02. Подготовка графики для Web

Рассмотрим типичные сценарии подготовки иллюстраций для Web.

На этой странице:

• Фотография
• Рисунок
  • Заголовки
  • Логотип
  • Фоновая полоска

Фотография

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

Исходные параметры снимка (фотокамера Nikon D70):

Понятно, что в исходном виде иллюстрация не может быть размещена на Web-странице — слишком большие геометрический и килобайтный размеры. Кроме того, фотография “вяловата” и её надо кадрировать.

Для обработки фотографий лучше всего подходит растровый редактор (например, платный Photoshop или бесплатный GIMP, см. раздел “Инструменты для разработки сайта”).

Загружаем фотографию в Photoshop и сначала выполняем кадрирование. При кадрировании выделяем главные элементы снимка, отбрасывая отвлекающие несущественные детали, и стараемся получить прямоугольник, соотношения сторон которого близко к золотому сечению (1,618).

Нужное соотношение сторон можно задать в окошках настройки инструмента Кадрирование графического редактора:

Результат кадрирования показан ниже (в уменьшенном виде):

Следующий шаг — исправление тона изображения.

Открываем инструмент Levels (Уровни). В Photoshop инструмент активизируется через меню Image/Adjustments/Levels или, что проще, аккордом Ctrl+L:

В окошке инструмента показан двумерный график (гистограмма) распределения тонов в нашем изображении.

На гистограмме по горизонтали откладывается яркость точек картинки от 0 слева (чисто чёрный) до 255 справа (чисто белый). По вертикали — число точек с данной яркостью на иллюстрации.

Видим, что на графике для нашего снимка нет чисто чёрных цветов и чисто белых. Значит, снимок вялый, малоконтрастный. Его нужно корректировать.

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

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

Таким образом, из вялого снимка получено хорошо сбалансированное по яркости, контрастное изображение.

Можно дополнительно подвигать средний (серый) указатель (влево для осветления снимка, вправо для затемнения).

Ниже показан результат тональной коррекции в сравнении с исходным изображением:

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

• Image/Adjustments/Brightness/Contrast (Яркость/Контраст);
• Image/Adjustments/Color Balance (Цветовой баланс);
• Image/Adjustments/Hue/Suturation (Тон/Насыщенность);
• Image/Adjustments/Shadow/Highlight (Тень/Свет).

Особый интерес представляет простой инструмент Shadow/Highlight (Тень/Свет). Он позволяет корректировать тёмные и светлые области изображения без предварительного их выделения (которое достаточно трудоёмко).

Продолжим подготовку нашей фотографии для публикации в Web.

Уменьшаем исходный размер фрагмента (1184×1375) до величины, приемлемой для размещения на гипертекстовой странице (200×232):

Записываем иллюстрацию на диск в формате PNG (качество не страдает). Полученный размер — 79 килобайт, конечно, очень велик для Web, но оптимизация будет заключительным шагом после завершения всех редакций.

Заметим, что иллюстрация плохо вписывается в страницу, смотрится как заплата. Можно отделить её от страничного фона рамкой, которую легко задать атрибутом border=1 в теге IMG (см. следующий раздел урока Кодирование картинок):

Фотография будет смотреться ещё лучше, если в дополнение к тонкой рамке добавить тень — картинка “приподнимется” над страницей. Тень можно сделать в растровом графическом редакторе, а можно и в векторном (если он позволяет работать с растром).

Выделим фотографию в Photoshop (аккорд Ctrl+A) и сохраним её в буфере обмена (аккорд Ctrl+C). Откроем векторный редактор Xara X и скопируем на его холст содержимое буфера (аккорд Ctrl+V).

Сначала инструментом Прямоугольник нарисуем рамку, а затем инструментом Тень построим тень.

Запишем результат на диск снова в формате PNG, при этом выбираем режим True color (сохранение без искажений). В результате получаем симпатичную иллюстрацию размером 213×245 и “весом” в 80 килобайт:

Килобайтный вес, конечно, велик, поэтому загружаем картинку в оптимизатор графики (бесплатный WebGraphics Optimizer Professional). Итог оптимизации — JPEG-файл размером 12 килобайт:

Дальнейшее уменьшение параметра Quality (качество) в оптимизаторе приводит к характерным искажениям от чрезмерного JPEG-сжатия (справа показан увеличенный фрагмент):

Рисунок

Рассмотрим примеры создания типичных графических элементов сайта:

• Заголовки
• Логотип
• Фоновая полоска

Заголовки

Рисованный заголовки (сайта, страниц) способны украсить сайт и создать фирменный стиль. Эти рисунки имеют небольшой килобайтный объём. Кроме того, заголовок сайта повторяется на каждой странице (вместе с логотипом), что не увеличивает трафик пользователя.

Создать заголовок можно как в растровом, так и в векторном редакторе, но работа в векторном редакторе имеет преимущество.

Дело в том, что заголовок в растровом редакторе нужно записывать сразу в нужном размере. Если растягивать растровый рисунок после его создания, искажения неизбежны, они проявляются в виде увеличенных пиксельных ступеней:

В векторном редакторе таких проблем нет. Векторный рисунок создаётся в любом размере, потом масштабируется до нужного и сохраняется в растровом формате (как правило, GIF или PNG).

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

Важно не просто установить антиалиасинг, но и конструировать рисунок на том фоне, который будет под рисунком на сайте. Если этого не сделать, сглаживание будет построено неверно (не к тому фону).

Подробнее про антиалиасинг читайте в справочной системе АРМ “Проверка сайта”:

Погрешность	Описание
Отсутствие антиалиасинга или не соответствие его фону страницы

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

Логотип

Рекомендации, высказанные по отношению к заголовкам, распространяются и на логотипы:

• в растровом редакторе логотип (как и любой другой рисунок) создаётся сразу нужного размера. Увеличение растрового рисунка приводит к укрупнению пиксельных ступенек (в том числе укрупняются и пикселы антиалиасинга);
• чтобы контуры рисунка смотрелись гладкими, нужно включить режим антиалиасинга;
• чтобы сглаживание было построено правильно, рисунок нужно поместить на фон, близкий к фону гипертекстовой страницы.

Дополнительно нужно позаботиться о том, чтобы логотип:

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

Пример заголовка сайта, посвящённому курсу “Азы информатики”:

Горизонтальный размер заголовочной части сайта (логотип, заголовок, декорации) рекомендуется делать короче 600 пикселов — это позволит работать с сайтом без горизонтальной прокрутки в окне шириной 640 пикселов (разница уходит на рамку окна, поля и полосу прокрутки).

Ниже показан пример заголовочной части в которой логотип и заголовок дополняются ещё одним рисунком справа:

Земной шар, опутанный паутиной, хорошо согласуется по смыслу с логотипом — образом сетевого паука в поисках ссылок. Кроме того, картинка справа делает композицию более симметричной.

Готовую картинку (заголовок, логотип, другой рисунок) желательно сохранить как PNG в режиме True color (сохранение без искажений), а затем поработать в графическом оптимизаторе: подобрать самый экономный Web-формат (как правило, GIF или PNG с ограниченным числом цветов) и установить для него оптимизирующие параметры, ориентируясь на минимальный килобайтный объём файла при приемлемом качестве изображения.

Фоновая полоска

Обычным приёмом оформления сайта является вертикальная полоса по левой границе окна. Этот элемент создаёт отступ от левого края для основного содержимого страницы, кроме того, на полоску помещают логотип, слоган, вертикальное меню, счётчик посещений, “горячие” ссылки, окошко поиска, форму для голосования и другие элементы, не относящиеся к основному информационному наполнению.

Полоска может быть однотонной, как на предыдущем рисунке или с цветовой растяжкой (цветовым градиентом):

Изготовить полоску очень просто: нужен инструмент Прямоугольник и, если нужна растяжка, инструмент Заливка в режиме “линейный градиент”.

Ширина полоски выставляется в соответствие с её местом на сайте, высота такой, чтобы можно было визуально оценить построенную заливку:

Когда полоска готова, высота её уменьшается до одного пиксела. На страницу полоска выводится как фоновая плиточка с повторением только по вертикали:

background: white repeat-y url("./pic/fon.png");

Однотоновую полоску экономнее всего сохранять в формате GIF, полоску со сложной градиентной растяжкой — в формате PNG-24 (плавные цветовые переходы для GIF противопоказаны, JPEG сохраняет с потерями даже при максимальном значении качества).