Лекция: Photoshop и веб-дизайн

Adobe Photoshop не только признанный лидер среди растровых редакторов для редактирования компьютерной живописи и фото, но также одна из лучших программ для создания и обработки иллюстраций для Сети.

 

Содержание

• Цветовое кодирование для Интернет. Шестнадцатеричные веб-цвета
• Пример 7.1. Перевод RGB цветов в шестнадцатеричную систему счисления (HEX)
• Преобразование изображения в режим Indexed Color
• Сжатые форматы графический файлов (GIF, JPEG, PNG)
• Оптимизация изображения для Сети в программе Adobe Photoshop
• Деление изображения на ломтики
• Разрезание изображений на фрагменты
• Организация гиперссылок
• Оптимизация ломтиков
• Карта ссылок
• Что такое GIF - анимация?
• Пример 7.2. Создание анимации для Интернет
• Шаг 1. Подготовка изображений для анимации
• Шаг 2. Создаем многослойное изображение
• Шаг 3. Анимируем изображения
• Шаг 4 - Создание переходов между кадрами
• Шаг 5 - Оптимизация и сохранение анимации

Разработчики из 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.

Рис. 7.1. Окно Indexed Color

Далее выберите один из следующих пунктов в списке 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 цветов.