Главная » Adobe Illustrator CS5 » Команда Save for Web


Команда 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.)

Флажок Interlace (Чересстрочная развертка) обеспечивает постепенное улучшение изображения в процессе загрузки. Если данное изображение предполагается использовать в качестве фона или текстурной заливки, то этот флажок лучше убрать.

Comments are closed.