Photoshop и веб-дизайн
Разработчики из Adobe с каждой новой версией вводят в программу все большие возможности, ориентированные на Web-дизайнеров. Это, например, такие возможности Adobe Photoshop, как:
- фильтры экспорта в основные графические форматы (GIF, JPEG, PNG) для World Wide Web;
- специальная (безопасная) палитра цветов, обеспечивающая их одинаковую передачу на компьютерах разных платформ, то есть с разными операционными системами, браузерами и техническими (аппаратными) возможностями;
- возможность оптимизации изображений для их размещения в Интернет;
- карты ссылок (image map);
- ролловеры;
- другие возможности.
На английском языке интерактивные элементы дизайна web страниц, сочетающие использование графики и скриптов, называются rollovers (roll over = перекатываться, переворачиваться). Ролловер представляет собой несколько (до четырех) изображений, связанных с определенными событиями. При возникновении вышеперечисленных событий браузер заменяет одно из этих изображений другим. С каждым событием ассоциируется одно изображение. Обработкой этих событий, их регистрацией и загрузкой изображений занимается сценарий JavaScript. Простейший пример ролловера - кнопка, меняющая свой цвет в зависимости от того, нажата она или отжата.
В данной лекции мы поговорим об особенностях графики для Сети, о том, как подготовить изображения для последующего их использования в Интернет.
Цветовое кодирование для Интернет. Шестнадцатеричные веб-цвета
Мы уже знаем, что монитор для отображения цветов на экране компьютера использует цветовую модель RGB (Red, Green, Blue, т.е. Красный, Зеленый, Синий). Для Интернет отображаемые браузером цвета кодируются с помощью HTML тегов в шестнадцатеричной системе счисления. В системе координат RGB черный цвет представляется последовательностью 000, 000, 000, а белый - 255, 255, 255. Шестнадцатеричные цвета представляют собой наборы из трех двузначных шестнадцатеричных чисел. Каждое отдельное число соответствует значениям R, G и В, общее количество символов в наборе равно шести. Например, 000000 соответствует черному. Другое крайнее значение - FFFFFF, т. е. максимальная интенсивность всех трех цветов соответствует белому цвету.
Итак, в веб-дизайне цвет задается в шестнадцатеричной системе счисления шестью цифрами (от 0 до F). Первые две цифры - красный цвет, следующие две цифры - зеленый цвет, а последние две цифры - синий цвет.
Пример 7.1. Перевод RGB цветов в шестнадцатеричную систему счисления (HEX)
Один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселей других, близких к нему, цветов, имитирующих заданный. Для того, чтобы представляемые цвета были корректно отображены у всех пользователей ПК разработана специальная Безопасная сетевая палитра цветов (Websafe Palette), содержащая 256 цветов. Использование изображений в этой палитре цветов гарантирует одинаковый показ цветов изображения на любых ПК. Иначе говоря, изображения для показа в Интернет, в идеале (теоретически), должны соответствовать этой палитре. Тогда цвета будут восприниматься другими пользователями точно так же, как видите их вы.
Веб-цветами называются такие цвета, когда для каждой составляющей RGB устанавливается одно из шести значений HEX. Общее количество цветов из всех возможных сочетаний дает палитру веб-цветов. Эта палитра идентична (синоним) палитре безопасных (индексированных) цветов. Пример веб-цвета - #35СС68.
Предположим, что на изображении имеется оттенок зеленого цвета, определяемый в цветовой модели RGB числами 0, 255, 133. Переведем это число в шестнадцатеричную систему счисления, используемую для кодирования цветов в Интернет.
Для пересчета из цветовой модели RGB (DEC) в цветовую систему Index Color (HEX) удобно использовать калькулятор Windows в инженерном режиме. В результате вычислений получим следующие числа:
| RGB 0 DEC = 00 HEX, |
| RGB 255 DEC = FF HEX, |
| RGB133 DEC = 85 HEX, |
| где DEC и HEX - обозначение десятичной и шестнадцатеричной систем счисления чисел. |
| Итак, RGB 0, 255, 133 DEC = HEX 00, FF, 85 = #00FF85. |
Преобразование изображения в режим Indexed Color
Практически для того, чтобы перевести ваше графическое изображение в программе Adobe Photoshop в палитру безопасных цветов (в режим Indexed Color), нужно выполнить следующую последовательность действий:
| Откройте любое изображение в программе Adobe Photoshop и командой Image (Изображение) | Mode (Режим) убедитесь, что изображение находится в режиме RGB. |
| Выполните команду Image (Изображение) | Mode (Режим) | Indexed Color (Индексированные цвета) - рис. 7.1. |
При преобразовании многослойного изображения в режим Indexed Color все слои будут объединены командой Flatten Image.
Далее выберите один из следующих пунктов в списке Palette (Палитра):
| Exact (Точная) | если изображение содержит 256 или меньше цветов. При этом ни один цвет оригинала не будет удален; |
| System Mac OS (Системная Mac OS) | если собираетесь экспортировать файл в приложение, которое воспринимает только палитру Макинтош, установленную по умолчанию; |
| System Windows (Системная Windows) | если собираетесь экспортировать изображение в приложения на платформе Windows; |
| Web (Сетевая) | если намереваетесь загружать файл в Сеть. Эта опция ограничивает набор цветов изображения тем множеством, которое доступно в большинстве Web-браузеров; |
| Uniform (Равномерная) | чтобы создать таблицу цветов, равномерно распределенных по спектру. При этом не учитываются преобладающие цвета изображения; |
| Local (Локальная) | выбирается так, чтобы создать таблицу цветов на основе только тех цветов, которые входят в изображение или в зависимости от того, какие цвета желательно сохранить при преобразовании изображения в режим Indexed Color; |
| Master (Специальная) | использует специальную таблицу цветов, созданную заранее на основе группы изображений; |
| Custom (По выбору пользователя) | чтобы создать собственную палитру. При желании отредактируйте таблицу цветов и щелкните на кнопке ОК; |
| Previous (Предыдущая) | чтобы использовать палитру, применявшуюся в предыдущем преобразовании, если оно выполнялось. |
Из этих вариантов мы остановимся на палитре Web (Сетевая). Тем не менее, когда из миллионов цветов делаешь сотни, то, как видно из иллюстрации ( рис. 7.2) потери качества не избежать. Качество исходного изображения при его индексировании заметно ухудшилось.
Рис. 7.2. Исходное изображение (слева) и изображение, после преобразования его цветов в Web Palette (справа)
Несколько улучшить изображение в безопасной палитре цветов можно, если в списке Dither (Дизеринг) выбрать подходящий вариант дизеринга, то есть попробовать все способы размытия изображения: Diffusion (Диффузия), Pattern (Текстура), Noise (Шум) и выбрать наилучший.
Дизеринг (Размытие) это перемешивание двух цветов из палитры для имитации третьего. Данный метод используется, когда необходимо, чтобы изображение с ограниченным количеством цветов (256 или менее) содержало большее количество оттенков. Обычно он применяется к изображениям с плавным переходом цветов, чтобы увеличить диапазон используемых оттенков, но в жизни ничего не дается даром, и поэтому после применения данного метода изображение может покрыться точками.
Актуальность перевода изображений в безопасную палитру цветов была высока на заре Интернет. Сегодня подобная задача не является первостепенной, так как сегодня вы практически не найдете в Интернет пользователя, который работает на мониторе, показывающем не более 256 цветов.
Сжатые форматы графических файлов (GIF, JPEG, PNG)
Популярный в Сети формат GIF (Graphics Interchange Format - Формат обмена графическими данными) - это формат для изображений, содержащих 256 или менее цветов. Он использует алгоритм сжатия LZW (Lempel-Ziv-Welch) с хорошей степенью сжатия. Формат поддерживает прозрачность и чересстрочное отображение. Формат GIF следует использовать для изображений, создаваемых в графических редакторах программным путем (диаграммы, рисунки, текст и т.д.). Формат пригоден для создания анимационных эффектов, так как GIF позволяет хранить в одном файле несколько изображений, а браузеры могут их поочередно демонстрировать. Для каждого изображения можно указать время его демонстрации. Если каждое из изображений, хранящееся в файле GIF, представляет фазу анимации, то браузер покажет маленький "фильм". Эта особенность формата GIF нашла широкое применение в Web-дизайне. Особенно часто анимированные изображения используются в баннерах (от английского banner, плакат). GIF использует 256 цветов и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения без потерь. Может содержать прозрачные области. Поэтому формат широко используется для создания анимированных рисунков, может содержать текст, логотипы, иллюстрации с четкими краями, изображения с прозрачными участками.
Формат JPEG (Joint Photographic Experts Group - Объединенная экспертная группа по фотографии) - это масштабируемый упакованный формат, обеспечивающий высокую степень сжатия с очень небольшим снижением качества изображения. Формат JPEG может быть наилучшим вариантом для точной передачи изображений с плавным переходом цветов, то есть для изображений фотографического типа. Это любое изображение с количеством цветов более 256 (фото со сканера, цифровой фотокамеры, компакт диска и т.д.). Исходя из того, что JPEG объединяет в себе хорошую степень сжатия и незначительную потерю качества, он является идеальным форматом для среды Web-сайта. JPEG использует 16,7 миллионов цветов, поддерживает чересстрочную развертку. Область применения формата в Сети - любое изображение с количеством цветов более 256 - фотографии; рисунки, содержащие прозрачные участки; рисунки с большим количеством цветов и четкими краями изображений.
Оба формата (как GIF, так и JPEG) поддерживают чересстрочную развертку, т.е. загрузка таких форматов осуществляется через несколько строк и на экране по мере загрузки границы изображения становится более четкими. Преимущество формата JPEG заключается в том, что он сжимает 24-битное изображение так же эффективно, как формат GIF сжимает 8-битное. Недостатки JPEG состоят в следующем: JPEG - не самый лучший вариант для изображений, содержащих однотонные области или текст, так как подобный метод сжатия вносит заметные искажения в изображения такого типа.
Невозможность создания полноцветных изображений с прозрачными участками в рамках форматов GIF и JPEG привела к появлению формата PNG. Этот формат сохраняет всю цветовую информацию и один альфа-канал изображения. В формате PNG-8 максимально возможное количество цветов оптимизированного изображения - 256, этот формат похож на GIF. В формате PNG-24 у изображения могут быть миллионы цветов, этот формат, в свою очередь, похож на JPEG. В форматах PNG используется метод сжатия без потерь данных. Оба формата PNG могут сохранять полупрозрачные области (например, смягченные растушеванные границы), используя метод под названием альфа-прозрачность. В этом случае у точки может быть 256 уровней непрозрачности, начиная с полной прозрачности и заканчивая полной непрозрачностью.
Формат PNG занимает промежуточное положение между GIF и JPEG. Однако в формате PNG-8 нельзя создать анимацию (в формате GIF можно), а файлы в формате PNG-24 больше по размеру аналогичных JPEG-файлов. Формат PNG-8 аналогичен GIF, однако поддерживается не всеми программами. Использует улучшенный формат сжатия данных. Формат PNG-24 аналогичен JPEG, поддерживает 16 миллионов цветов. Подобно формату JPEG, сохраняет яркость и оттенки цветов в фотографиях. Подобно GIF сохраняет детали изображения, как, например, в простых рисунках, логотипах, или иллюстрациях.
После сравнения основных графических форматов для веб-страниц, можно сделать вывод о том, что идеального (универсального) графического формата не существует, поскольку каждый призван решать строго определенный круг задач. Как правило, на веб-странице многоцветные изображения, такие, как фотографии, сохраняются в формате JPEG. Формат PNG-24 также годится для фотографий, однако, в отличие от JPEG, этот формат занимает больше места. PNG-24 рекомендуется для работы с полноцветными изображениями содержащих многоуровневую прозрачность. Иллюстрации с малым количеством цветов, четкими линиями или мелкими деталями, например, содержащие текст, должны быть оптимизированы в формате GIF или PNG-8.
Оптимизация изображения для Сети в программе Adobe Photoshop
Предположим, что в программе Adobe Photoshop вы командой Файл | Импортировать получили цифровое изображение со сканера с разрешением 300 dpi и сохранили его с родным для этой программы расширением *.PSD. Полученное изображение непригодно для использования в Интернет, поскольку данный графический файл по меркам Сети имеет слишком большой размер за счет избыточного качества изображения. В этом практическом примере мы займемся его оптимизацией, а затем экспортируем в один из графических форматов, поддерживаемых браузерами. Таким образом, мы подготовим сканированное изображение для его применения в Интернет.
Для открытого в программе Adobe Photoshop оригинального изображения выполните команду File (Файл) | Save For Web (Сохранить для Веб) и в окне Save For Web перейдите на вкладку Original (Оригинал). В нашем случае сканированное оригинальное изображение girl.psd имеет размер 5,49 Мб.
Теперь перейдите на вкладку Optimized (Оптимизация). Перед вами результат оптимизации изображения в соответствии с параметрами, установленными в данном окне по умолчанию. Изменение этих параметров приведет к немедленному обновлению изображения на вкладке Optimized в окне документа. Поскольку у нас фотография, то в списке Optimized file format (Оптимизированный формат файла) имеет смысл выбрать формат JPEG.
Перемещайте ползунок Quality справа (высокое качество) налево (низкое качество) до тех пор, пока не заметите появления нежелательных артефактов (искажений) изображения. Мы установили ползунок в положение 30%, что соответствует среднему качеству изображения.
Если незначительные артефакты остались, то их можно попробовать удалить размыванием изображения с помощью ползунка Blur (Размытие). Следите за тем, чтобы изображение не слишком потеряло в резкости.
Перейдите на вкладку 2-Up в окне документа ( рис. 7.3).
Перед вами одновременно оригинал (слева) и оптимизированное изображение (справа). Имея перед глазами результат одновременно двух вариантов оптимизации, вы можете выбрать наиболее подходящий. При сравнении вариантов можно воспользоваться функцией предварительного просмотра изображения в браузере. Для этого следует нажать в нижней правой части окна кнопку Preview in Default Browser (Просмотр в браузере) - она открывает список браузеров, установленных на вашем компьютере. При нажатии этой кнопки Adobe Photoshop автоматически создаст временный оптимизированный файл изображения и необходимый для его демонстрации HTML-код, который и загрузит в браузер.
Взгляните на строку состояния в окне документа. Там отображается текущий размер оптимизированного нами файла (93,25 Кбайт) и оценка времени его загрузки (34 сек) при скорости модема (28,8 Кбит/сек).
Итак, в результате оптимизации мы получили весьма существенный выигрыш в размере файла, сохранив приемлемое качество изображения. Но наилучшим ли способом проведена оптимизация? Может быть лучше использовать форматы PNG или GIF? Рассмотрите этот вариант самостоятельно.