Photoshop for WEB


Подготовка графических элементов web-страниц


Подготовка графических элементов web-страниц

Основными графическими элементами web-сайта являются заголовки, кнопки, маркеры списков и текстуры. Они позволяют придать странице приятный внешний вид и сделать ее удобной для использования. В этом уроке мы рассмотрим основы подготовки этих элементов с использованием Adobe PhotoShop.

На заре эпохи Всемирной паутины основным назначением web-страницы было представление научной информации. Поэтому в языке разметки страниц (HTML — Hypertext Markup Language — Язык разметки гипертекста) предусмотрели возможность создания текстовых массивов, содержащих таблицы, списки, рисунки и ссылки на другие тексты. На рис. 6.1 приведен пример подобного сайта.

Рис. 6.1. Так могли выглядеть первые web-страницы

Вначале элементы страниц использовались по своему прямому назначению. Потом люди стали понимать, что сайт может быть не только информативным, но и действительно красивым. Постепенно начало складываться новое направ ление искусства, которое теперь называют web-дизайном. Во многом развитию художественного оформления страниц способствовал рост популярности Интернета среди обычных пользователей, ищущих не информацию по научным вопросам, а развлечения. Для привлечения посетителей руководству сайтов, ориентированных на таких людей, пришлось серьезно задуматься над их внешним видом.

ПРИМЕЧАНИЕ. Гипертекстом называют систему статей, связанных между собой ссылками. При чте нии одной статьи вы можете в любой момент просмотреть связанную с ней информацию, например, определение термина или разъяснение какого-либо сложного момента. Интернет, точнее его составляющая, называемая Всемирной Паутиной (WWW — World Wide Web — Всемирная Паутина), представляет собой совокупность страниц с самым разнообразным содержанием, связанных между собой ссылками.

Потребность в средствах для улучшения внешнего вида сайтов появилась, а средства для ее удовлетворения пришлось искать среди уже имевшихся возможностей HTML и других инструментов создания сайтов. Так постепенно на web-страницах стали появляться нарисованные кнопки, служащие ссылками на другие разделы сайта, линии и узоры, разделяющие отделы самой страницы друг от друга, фигурные маркеры списков, текстуры (рисунки, используемые в качестве фона ячеек таблиц и страниц в целом) и многие другие элементы. Постепенно меняясь, они используются и в настоящее время. На рис. 6.2 вы можете увидеть страницу, выполненную в стиле, характерном для времени зарождения графического оформления.

Рис. 6.2. Первые шаги дизайнеров по просторам Всемирной паутины были довольно робкими

Постепенно стали появляться более проработанные страницы. На них, как правило, присутствовали выпуклые кнопки и простейшим образом подготовленные картинки. Оформление страниц в таком стиле не требует изготовления уникальных элементов, выполнить которые может только человек с достаточным опытом. Поэтому HTML-редакторы часто содержат в качестве шаблонов (заготовок) страницы именно такого вида. При помощи такой программы практически любой человек может за короткое время изготовить сайт. Это полезно для новичков, но в большинстве случаев страницы получаются на одно лицо. На рис. 6.3 показан пример страницы, выполненной в таком «автоматизированном» стиле.

Рис. 6.3. Страницы, похожие на эту, легко сделать при помощи HTML-редактора

ПРИМЕЧАНИЕ. Существует множество программ (например, XaraWebstyle), которые предназначены исключительно для автоматизированной подготовки кнопок, текстур и заголовков. Вы просто вводите нужный текст, выбираете цвет и форму, а программа сама рисует кнопку или графический заголовок страницы. Работать с такой программой интересно и полезно для освоения методов обработки изображений, но они часто предоставляют слишком узкий круг возможностей. С помощью такого редактора, как Adobe PhotoShop, можно добиться гораздо большего.

По мере развития языка HTML и графических редакторов у дизайнеров появилась возможность использовать в оформлении страниц более качественную графику и сложные элементы, недоступные ранее. На рис. 6.4 показана страница, выполненная в современном стиле. Как видно, подход к разработке оформления значительно изменился. Во многих случаях именно дизайн ставится на первое место. Высокий уровень владения графическими пакетами и возможности самих пакетов позволяют разрабатывать страницы, достойные того, чтобы просто посмотреть на них. Обратите внимание на то, что хотя возможности браузеров изменились, и они теперь позволяют реализовать все более смелые замыслы дизайнеров, многие современные страницы «собираются» из тех же элементов, что и самые первые.

Рис. 6.4. Дизайнеры набираются опыта, меняется и сам подход к оформлению страницы — внешний вид ставят на первое место

Готовя оформление сайта, нельзя забывать и о его функциональности. Так как сайт является «лицом» системы, обращенным к пользователю, разработчикам приходится кроме эстетики задумываться еще и об удобстве работы. С одной стороны, сайт должен привлечь пользователя, не дать ему заскучать и помочь найти необходимую информацию. С другой стороны, для организации взаимодействия с пользователем необходимо получить от него требуемые сведения (в простейшем случае пользователю предлагается щелкнуть по одной из расположенных на странице ссылок). Дизайн сайта должен указывать пользователю путь к нужному разделу, а не служить своеобразным лабиринтом, сквозь который надо «продираться», тратя на это лишнее время.

В большинстве случаев графические элементы строятся на основе трех компонентов: готовых фотографий, текста и графики, нарисованной самим дизайнером. Каждая из этих частей позволяет наполнить элемент страницы определенным содержанием.

Использование фотоизображений помогает разнообразить внешний вид сайта, насыщает его мелкими деталями, делает страницы более интересными и приятными для глаз. Реалистичность, вносимая фотоизображениями в оформление сайта, незаметно для человека привлекает внимание, заставляет определять, что именно изображено на картинке, позволяет отвлечься от работы и немного отдохнуть. Работая с таким сайтом, пользователь не испытывает скуки. Однако следует помнить, что загружать людей информацией можно до некоторого предела. Если страница содержит информацию, подразумевающую обдумывание (деловые или научные документы, числовые данные), то графика может отрицательно сказаться на работоспособности пользователя.

Фотографии могут использоваться в оформлении web-сайтов несколькими способами. Самый простой и естественный метод — непосредственное размещение фотографии на странице. Этот способ чаще всего используется для создания виртуальных выставок и фотогалерей. Если вы хотите разместить на своей домашней страничке небольшой фотоальбом, то, скорее всего, вам следует просто поместить изображения в тексте. Перед размещением изображений на сервере можно провести необходимую обработку (коррекцию). При использовании такого подхода возникает проблема роста объема загружаемой информации. Дело в том, что фотографии, особенно представленные в хорошем качестве, обычно имеют большой объем. Использование сжатых форматов (таких как JPEG) позволяет уменьшить объем файлов, но всегда приходится выбирать между дополнительным объемом файла или снижением качества при сжатии.

ВНИМАНИЕ. Для хранения и представления на сайте фотографий и иной многоцветной графики в большинстве случаев следует использовать формат JPEG. Для таких данных он позволяет достичь значительно большего сжатия и лучшего качества, чем GIF или PNG.

Для решения этой проблемы используется простой прием — в тексте страницы размещаются уменьшенные копии изображений (в англоязычных книгах и программах их часто называют thumbnails — от слова thumbnail — ноготь большого пальца). Эти изображения используются в качестве ссылок на изображения полного размера, сохраненные с хорошим качеством. Уменьшенные копии можно сохранять с высокими степенями сжатия, так как от них чаще всего не требуется высокого качества изображения. Они призваны дать пользователю только представление об основном изображении. Так как сама фотография может иметь значительный размер, стоит указывать рядом со ссылками размер основных изображений. Это позволит пользователю оценить приблизительное время загрузки файла на его компьютер. Пример страницы, выполненной с использованием уменьшенных копий изображений, приведен на рис. 6.5.

Рис. 6.5. Для ускорения загрузки фотогалерей и выставок удобно использовать уменьшенные копии представленных изображений

Часто фотографии используются не самостоятельно, а в виде коллажей и композиций. Такая композиция может использоваться, например, в качестве заставок сайтов, размещаемых на начальных страницах. Для изготовления композиции могут использоваться как фотоизображения, так и отсканированные или нарисованные самим дизайнером фрагменты. Типичный пример такого использования фотографий приведен на рис. 6.6.

В данном случае на заставке сайта используются сканированные (изображение художника) и нарисованные (логотип сайта, фон) изображения. При подготовке таких композиций часто используются текстовые элементы, выполненные с использованием разнообразных шрифтов. На рис. 6.6 используется текстовый логотип сайта и нарисованная надпись, поясняющая направление деятельности.

Еще одно направление использования фотографий — изготовление миниатюрных элементов, например, маркеров списков и небольших заголовков. Однако при уменьшении предметы, изображенные на фотографии, могут стать неузнаваемыми. Поэтому изображения с множеством мелких деталей в таких целях использовать практически бесполезно. Изображенный на фотографии объект должен быть крупным и контрастным.

Подготовка элементов на основе фотоизображений обычно заключается в открытии нужных исходных файлов, копировании из них нужных фрагментов изображения в виде слоев в один файл и в удалении ненужных частей изображений. Выделение нужных и ненужных частей производится при помощи описанных в прошлом уроке средств выделения. Там же была описана процедура извлечения отдельных фрагментов изображения. Придание фрагментам нужной формы производится либо при помощи инструментов (например, при помощи инструмента Eraser (Стирательная резинка)), либо при помощи выделений. Выделенные фрагменты можно удалять (выделяя их и нажимая клавишу Delete) или трансформировать. Трансформирование изображения может быть выполнено при помощи команды Edit > Free Transform (Правка > Свободное трансформирование). Она позволяет изменять форму изображения и его пропорции. Из меню Edit > Transform... (Правка > Трансформирование...) можно выбрать команду для исполнения какого-либо преобразования с точным заданием параметров. Возможно простое масштабирование без искажений (это, наверное, наиболее полезная функция этой команды). Действие команды Edit > Free Transform (Правка > Свободное трансформирование) аналогично команде Select > Transform Selection (Выделение > Трансформировать выделение). Только трансформируется не само выделение, а заключенное в нем изображение. Если выделение отсутствует, то трансформируется активный в настоящий момент слой (если этот слой не является фоновым). В подменю Edit > Transform (Правка > Трансформировать) содержатся команды, позволяющие трансформировать выделенный объект путем ввода числовых значений. Это удобно в тех случаях, когда операция должна быть выполнена очень точно или когда одну операцию требуется повторить несколько раз. Команда Edit > Transform > Again... (Правка > Трансформировать > Повторить...) позволяет повторить последнюю выполненную операцию трансформирования.

Рис. 6.6. На сайтах часто можно встретить композиции и коллажи из разнородных изображений

Текст также часто используется при подготовке графического оформления страниц. Разумеется, здесь имеется в виду не текстовое содержание сайта, а надписи, изображенные на картинках. Использование таких надписей позволяет сделать оформление сайта более информативным не в ущерб красоте. При использовании «нарисованного» текста перед дизайнером открывается целый ряд возможностей.

  • Во время рисования дизайнер может использовать практически любой шрифт, а обычный текст web-страницы в большинстве случаев не может содержать более трех стандартных типов шрифтов (гарнитур). Ярким примером использования нестандартных шрифтов могут служить названия сайтов, размещаемые обычно на начальных страницах. Образец такой надписи вы можете увидеть на рис. 6.6.
  • При подготовке изображений можно применять к надписи различные эффекты. Последние версии браузеров имеют некоторый набор фильтров, применяемых и к обычному тексту, но широкого распространения они пока не получили.
  • Текст, включенный в картинку, может быть ее частью, основным или вспомогательным элементом. Он может иметь тот же стиль, что и остальное содержание изображения и, таким образом, не выделяться сильнее, чем это требуется. Обычный текст, как правило, ясно различим среди графических элементов (это можно использовать для повышения информативности).
  • Графика позволяет использовать шрифты со сглаживанием. Сглаживание символов (antialiasing) означает образование на границах символов пикселов с цветом, переходным от цвета текста к цвету фона. Это позволяет значительно улучшить внешний вид текста, особенно при использовании символов большого размера. Символы малого размера, будучи сглаженными, читаются хуже, чем без сглаживания. Для обычного текста использование сглаживания возможно благодаря браузеру и операционной системе.
  • В отличие от простого текста, графика отображается независимо от настроек браузера. Независимо от того, какой цвет и размер шрифта установлен пользователем для web-страниц, ваш логотип будет отображен без искажений.

Текст может использоваться для представления некоторой информации, например, при рисовании заголовка страницы или раздела. В логотипах, заставках и заголовках текст может использоваться в качестве пояснения, помогающего понять основную идею сайта или указывающего на то, с чем пользователю предстоит столкнуться в следующий момент. Еще одно применение текстовых надписей, выполненных в виде графических элементов — навигационные ссылки (кнопки). Такие элементы обычно «устанавливаются» на сайте вместо традиционных текстовых ссылок из-за возможности использовать различные специальные эффекты, доступные только при работе с графикой. При подготовке заголовков и кнопок следует уделять внимание тому, чтобы текст легко читался. Кроме того, следует помнить о том, что графические элементы занимают гораздо больше места на диске, чем простой текст. Они требуют больше времени для загрузки по каналу связи. Страница, насыщенная графикой, может загружаться достаточно долго. Поэтому следует искать компромисс между красотой и скоростью загрузки.

Нарисованный текст может использоваться и как самостоятельный элемент, особенно если он нарисован красиво. Но даже если он несет основной смысл (например, это навигационный указатель), его чаще всего дополняют каким-либо изображением. В случае навигации это может быть маркер, выделяющий ссылку из остального содержимого сайта, или логотип раздела, на который эта ссылка указывает.

На рис. 6.7 показан пример использования шрифта при изготовлении логотипа сайта.

Рис. 6.7. Пример использования нарисованного текстового логотипа совместно с графикой

В верхней левой части страницы находится название сайта — «OZON». Рядом с ним располагается графический логотип. И то и другое выполнено при помощи графики. Использование для названия сайта графики позволило реализовать все возможности, указанные выше. Обратите внимание на очертания надписей «OZON» и «ИНТЕРНЕТ-МАГАЗИН». Шрифт надписи не относится к стандартным гарнитурам, встраиваемым в браузеры. В отличие от простых текстовых надписей (присмотритесь повнимательнее к пунктам меню в левой части страницы), грани нарисованных букв плавно переходят к фону. Это значительно улучшает внешний вид страницы. Сглаживание границ возможно и для обычного текста, но оно полностью зависит от возможностей браузера и операционной системы. Часто вместе с фотоизображениями и текстовыми элементами используется графика, нарисованная самим дизайнером

. Обзоры чаще всего это небольшие маркеры списков, указатели, навигационные кнопки и другие элементы. Однако встречаются и большие картинки, нарисованные от руки или при помощи векторных редакторов.

Нарисованные вручную изображения делятся на две категории — растровые и векторные. Растровая графика позволяет использовать множество эффектов и предоставляет дизайнеру свободу в работе с цветом. Возможности векторной графики в этом смысле значительно более ограничены, но она позволяет легко трансформировать объекты без потери качества.

ПРИМЕЧАНИЕ. Растровая графика основана на представлении изображения как совокупности то чек (пикселов). Вы можете изменять каждый пиксел растрового изображения независимо от других. Это позволяет легко работать с цветом в каждой точке изображения, добиваясь различных эффектов. Векторное изображение описывается при помощи нескольких опорных точек. Все остальные точки вычисляются при помощи различных формул. Получить доступ к некоторой произвольной точке изображения при этом сложно, поэтому эффекты в векторной графике практически отсутствуют. Зато такое изображение легко трансформировать и масштабировать, изменяя несколько числовых значений. В отличие от растровой графики, векторная графика при подобных операциях не теряет качества.

Растровые изображения получают либо сканированием, либо рисуют в графических редакторах (например, в Adobe PhotoShop). Для рисования прямо на компьютере очень удобны графические планшеты. Они позволяют более точно, чем мышью, управлять движением курсора. Векторные изображения рисуются в графических векторных редакторах. Самым известным и широко распространенным векторным редактором является Corel Draw фирмы Corel, но при его использовании возникает проблема совместимости с редакторами растровой графики, которые необходимы для подготовки изображений, помещаемых на страницу. С Adobe PhotoShop наилучшим образом совмещается векторный редактор Adobe Illustrator.

Независимо от того, какой редактор использовался для подготовки изображения, для подготовки его к размещению на странице необходим растровый редактор, так как изображения в форматах GIF, JPEG и PNG — растровые.

На рис. 6.8 показан пример использования нарисованной графики для оформления сайта.

Обратите внимание на орнамент заголовка — чаще всего подобные элементы разрабатываются для конкретного сайта и являются уникальными. Это позволяет сделать оформление сайта оригинальным.

Рис. 6.8. В оформлении сайта могут использоваться изображения, нарисованные дизайнером

ПРИМЕЧАНИЕ. Сайт, показанный на рис. 6.8, относится к проекту «Веди», ориентированному на разработку и распространение шрифтов, орнаментов и других подобных элементов. На этом сайте (http://vedi.d-s.ru) вы можете найти много полезных вещей.

Теперь рассмотрим некоторые технические приемы, используемые для подготовки графических элементов страниц в Adobe PhotoShop. Кроме традиционных рисующих инструментов наиболее часто используются инструмент Туре (Текст) и слоевые эффекты. Инструмент Туре (Текст) позволяет помещать в изображение надписи, выполненные различными шрифтами (шрифт должен быть установлен заранее). Основное достоинство этого инструмента — набранный текст может быть в последующем отредактирован. Можно изменить не только сам текст, но и его шрифт, а также цвет. С полученными надписями (текстовыми слоями) можно выполнить практически все операции, допустимые для обычных слоев: перемещение, трансформирование, применение слоевых эффектов. Нельзя использовать рисующие (стирающие) инструменты, а также фильтры и команды.

Вызов инструмента

Туре (Текст) осуществляется при помощи кнопки, расположенной на панели инструментов. После ее нажатия надо щелкнуть мы шью в окне документа и ввести текст. При этом панель настроек позволя ет контролировать параметры шрифта. На рис. 6.9 показано окно программы во время редактирования текста.

ПРИМЕЧАНИЕ. Удерживая кнопку Туре (Текст) некоторое время, можно вызвать на экран меню, из которого можно выбрать одну из разновидностей инструмента. К этим разновидностям относятся ввод вертикального текста и построение вместо текстового слоя выделенной области.

Рис. 6.9. При помощи инструмента Туре можно вводить в изображение и редактировать текстовые элементы

После завершения ввода необходимо нажать кнопку с изображением галочки

, расположенную на панели настройки. Кнопка с изображением запрешающего знака
позволит отменить операцию. Если вы примете результат (нажмете «галочку»), то на панели Layers (Слои) появится новый слой, выделяемый символом текстового слоя
. Для того чтобы изменить текст, вы берите нужный слой и инструмент Туре (Текст). После этого щелкните мышью в окне редактирования и произведите нужные изменения.

На панели настроек во время ввода или редактирования отображается ряд элементов управления, позволяющих изменять параметры шрифта. Их состав несколько изменяется в зависимости от того, начали вы ввод текста или просто выбрали инструмент Туре (Текст). Вам предоставляются описанные ниже возможности по изменению параметров текста (табл. 6.1).

Таблица 6.1. Возможности настройки при работе с инструментом Туре (Текст)

<


Начало    Вперед



Книжный магазин