Команда Save for Web
Команда Save for Web
Для того чтобы получить оптимизированные изображения для Web-страницы в форматах Graphics Interchange, Format (GIF), Joint Photographic Experts Group (JPEG) и Portable Network Graphics (PNG-8 или PNG-24), следует использовать команду Saves for Web (Сохранить для Web) меню File (Файл), В результате открывается диалоговое окно Save for Web (Сохранить для Web), в котором можно не только определить параметры трех форматов, но и получить массу полезной информации, а также воочию увидеть изменение в изображении и сравнить его с исходным.
В верхней части диалогового окна над полем просмотра расположены вкладки, которые позволяют изменить вид поля просмотра.
Вкладка Original (Исходное изображение) показывает только изображение без влияния параметров экспортирования. |
|
Вкладка Optimized (Экспортируемое изображение) показывает только изображение с учетом параметров экспортирования. |
|
Вкладка 2-Up (Двойной блок) показывает два варианта изображения, формат которых выбирается пользователем. |
|
Вкладка 4-Up (Четверной блок) показывает четыре варианта изображения, формат которых выбирается пользователем. |
По умолчанию вариант 2-Up (Двойной блок) отображает исходное изображение и оптимизируемое с текущими параметрами экспортирования, а вариант 4-Up (Четверной блок) — исходное изображение, оптимизируемое изображение и два изображения с более низкими параметрами.
Для того чтобы получить иной ряд параметров в режиме 4-Up (Четвсрнои блок), необходимо выполнить команду Repopulatc Views (Пересчитать параметры) в списке команд, которое вызывается щелчком на кнопке правее списка Settings (Установки). Программа автоматически генерирует изображения с меньшим качеством, исходя из текущих значений оптимизации При этом выделенное и исходное изображения изменению не подлежат.
|
|
Для того чтобы восстановить любое изображение с измененными параметрами, необходимо выделить его и выбрать в раскрывающемся списке Settings (Установки) вариант Original (Исходное изображение).
В нижней части каждого окна просмотра отображается соответствующая информация об изображении, например, формат файла, объем файла, время передачи такого файла при соответствующей скорости, количество цветов и некоторые другие.
В нижней части диалогового окна представлена полоса статуса, состоящая из трех блоков.
В первом блоке представлен список масштабов Для изменения масштаба можно также использовать инструмент Zoom (Масштаб) из палитры инструментов, расположенной в левом верхнем углу диалогового окна. Если изображение увеличено, то для его перемещения в окне просмотра используется инструмент Hand (Рука). В остальных окнах изображения автоматически перерисовываются. |
|
|
Во втором блоке оперативно отображается информация о цветах в процессе проведения курсором по изображению, здесь представлены следующие поля: R: (Красный), G: (Зеленый), В: (Синий), Alpha: (Цвет маски альфа-канала), Hex: (Шестнадцатеричный код цвета), Index: (Индексированный цвет). |
|
В третьем блоке отображается список программ -браузеров, с помощью которых можно предварительно увидеть не только изображение, но и параметры документа и собственно HTML-код. |
|
|
Выбор формата для оптими зированного изображения
В настоящее время для Web-дизайна используется всего три формата точечной графики — GIF, JPEG и PNG. Выбор формата определяется с учетом многих факторов, хотя, в основном, считается, что для полноцветных и фотореалистических изображений наиболее приемлем формат JPEG, для текстовых и простых изображений (логотипов и символов) — формат GIF, а на смену тому и другому приходит формат PNG, который объединяет достоинства обоих форматов. Правда, последний формат следует использовать с осторожностью, поскольку браузеры прошлых версий не могут его "читать", хотя у него в качестве достоинства можно отметить способность сохранять градиентную прозрачность.
Для выбора формата-в диалоговом окне Save for Web (Сохранить для Web) представлен раскрывающийся список в группе Settings (Установки). В нем — три формата: GIF, JPEG и PNG в двух вариантах — PNG-8 и PNG-24. При выборе формата изменяется набор параметров в этой группе.
Форматы GIF и PNG-8
Формат GIF (Graphics Interchange Format) позволяет сохранять изображения с использованием палитры индексированных цветов (до 256 оттенков цвета) или серой шкалы (до 256 оттенков серого). Как правило, этот формат применяется для работы со шрифтовыми фрагментами, кнопками, логотипами и прочими изображениями, имеющими ограниченное количество цветов и резкие ясные контрасты. В формате предусмотрено сжатие без потерь.
Nota Bene. Вместе с тем, следует иметь в виду, что в программе Adobe Illustrator предоставляется возможность создавать файл с помощью алгоритма сжатия с потерями. Это дает значительное сокращение объема файла и не слишком заметные погрешности изображения. |
Формат PNG-8 фактически дублирует функции формата GIF, а некоторые функции, например компрессия, имеют улучшенные характеристики, однако ввиду его новизны стоит воздерживаться от его применения, поскольку устаревшие версии браузеров не поддерживают этот формат.
У форматов GIF и PNG-8 в списке Color reduction algorithm (Алгоритм сокращения цветов) можно выбрать параметр цветовой таблицы, или алгоритм цветовой редукции, т. е. способ, используя который программа уменьшает количество цветов у 24-битового изображения до 8-битового.
Selective (Селективный) —- создает цветовую таблицу, в целом идентичную перцепционной, но с предпочтением цветов Web-безопасной палитры. Такая цветовая таблица обычно довольно близко сохраняет цвета исходного изображения. Этот вариант принят по умолчанию. |
|
Perceptual (Перцепционный) — создает цветовую таблицу с учетом чувствительности и восприятия человеческого глаза. |
|
Adaptive (Адаптивный) — создаст цветовую таблицу из цветов, наиболее часто встречающихся в исходном изображении. Например, если в документе предстайлены только два цвета, то цветовая таблица будет включать только эти два цвета. В общем случае таблица стремится к составу цветового спектра. |
|
Web (Web-безопасный) — использует стандартную таблицу из 216 цветов, включающую цвета, общие как для операционной системы Windows, так и операционной системы Mac OS. Выбор этого варианта исключает необходимость имитации (dither) отсутствующих цветов. |
|
Custom (Пользовательская) — сохраняет текущие цветовые таблицы в виде фиксированной, такая цветовая таблица не обновляется при работе с другим изображением. |
Если какая-либо цветовая таблица была сохранена, то в этом списке отображается и имя данной таблицы.
В следующем раскрывающемся списке Dithering algorithm (Алгоритм имитации) можно выбрать способ имитации отсутствующих цветов при использовании экрана монитора с 256 цветами:
No Dither (Без имитации) |
|
Diffusion (Диффузия) |
|
Pattern (Узор) |
|
Noise (Шум) |
При выборе варианта No Dither (Без имитации) поле Dither (Степень имитации) становится недоступным.
|
|
Nota Bene. Следует иметь в виду, что эта функция является рудиментом прошлых технологий, поэтому практически во всех случаях ее следует отключать. |
В поле Lossy (Потери сжатия) можно установить уровень потерь, допустимых при сжатии в диапазоне от 0 (минимальные потери) до 100 (максимальные потери). Уровень потерь можно определять визуально в соответствующем окне просмотра.
В раскрывающемся списке Colors (Количество цветов) можно выбрать количество цветов, которое будет задействовано при сохранении изображения в диапазоне от 2 до 256. Вариант Auto (Автоматически) обеспечивает использование только цветов, имеющихся в исходном изображении, их количество и образцы отображаются в окне Color Table (Цветовая таблица).
В поле Matte (Фон) представлены команды, которые обеспечивают заполнение фоновых областей каким-либо цветом. В этом случае исходное изображение должно иметь прозрачные области.
Eyedropper Color (Цвет, выбранный пипеткой) |
|
White (Белый) |
|
Black (Черный) |
|
Other (Произвольный) |
|
None (Без фона) отменяет использование фонового цвета |
В поле Web Snap (Приближение к Web) можно установить степень приближения имеющихся цветов к Web-безопасной палитре. Для того чтобы не допустить имитации отсутствующих цветов, к чему будет стремиться браузер при видеокарте с 256 цветами, необходимо цвета, имеющиеся в исходном изображении, заменить на близкие цвета Web-безопасной палитры. Любой цвет, который отображается в окне просмотра Color Table (Цветовая таблица), можно заменить на самый близкий цвет к тому, который имеется в Web-безопасной палитре. Для этого следует выделить образец цвета и щелкнуть на кнопке Web Shift (Заменить на Web-цвет) ( ) в нижней части окна просмотра Color Table (Цветовая таблица). Этой же цели служит команда Web Shift/Unshift Selected Colors (Заменить/Вернуть выделенные цвета) меню этого окна. В результате образец цвета помечается маленьким ромбиком в центре квадратика.
Флажок Transparency (Прозрачность) позволяет обеспечить прозрачные области в изображении, сквозь которые просвечивает фон Web-страницы. (Такую прозрачность поддерживают форматы GIF и PNG.)