83. Экспортирование документа в форматы для Web-страниц

| |

Экспортирование документа в форматы для Web-страниц

В настоящее время практически любая более или менее профессиональная программа графики и верстки позволяет генерировать документ в HTML-кодах или в крайнем случае экспортировать минимизированные по объему изобразительные файлы. Программа Adobe Illustrator также не исключение, и данная версия предлагает команду Save for Web (Сохранить для Web) меню File (Файл).

При экспортировании графики для Web-страниц следует иметь в виду:

	с самого начала работы над документом желательно использовать цветовую модель RGB;
	для того чтобы представлять йй>е конечный вид изображения, довольно удобно работать в пикселн&м режиме, который активизируется командой Pixel Preview (Отображение в пикселах) меню View (Просмотр):
	если требуется присвоить элементу изображения URL-адрес (Uniform Resource Locator), то следует использовать палитру Attribute (Атрибуты):
	для того чтобы работать только с Web-безопасной палитрой (Web-safe colors), следует в палитре Color (Синтез) выбрать режим Web-safe RGB или в диалоговом окне Color Picker (Цветовая палитра) установить флажок Only Web Colors (Только Web-цвета);
	полный перечень Web-безопасных цветов можно также загрузить в палитру Swatch (Каталог);
	для того чтобы экспортировать документ в специализированный формат Scalable Vector Graphics (SVG) или Macromedia Flash (SWF), следует выполнить команду Export (Экспортировать) меню File (Файл).

Команда 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) (рис. 14.14), в котором можно не только определить параметры трех форматов, но и получить массу полезной информации, а также воочию увидеть изменение в изображении и сравнить его с исходным.

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

	Вкладка Original (Исходное изображение) показывает только изображение без влияния параметров экспортирования.
	Вкладка Optimized (Экспортируемое изображение) показывает только изображение с учетом параметров экспортирования.
	Вкладка 2-Up (Двойной блок) показывает два варианта изображения, формат которых выбирается пользователем.
	Вкладка 4-Up (Четверной блок) показывает четыре варианта изображения, формат которых выбирается пользователем.

По умолчанию вариант 2-Up (Двойной блок) отображает исходное изображение и оптимизируемое с текущими параметрами экспортирования, а вариант 4-Up (Четверной блок) — исходное изображение, оптимизируемое изображение и два изображения с более низкими параметрами.

Для того чтобы получить иной ряд параметров в режиме 4-Up (Четвсрнои блок), необходимо выполнить команду Repopulatc Views (Пересчитать параметры) в списке команд, которое вызывается щелчком на кнопке правее списка Settings (Установки). Программа автоматически генерирует изображения с меньшим качеством, исходя из текущих значений оптимизации При этом выделенное и исходное изображения изменению не подлежат.

Для того чтобы восстановить любое изображение с измененными параметрами, необходимо выделить его и выбрать в раскрывающемся списке Settings (Установки) вариант Original (Исходное изображение).

В нижней части каждого окна просмотра отображается соответствующая информация об изображении, например, формат файла, объем файла, время передачи такого файла при соответствующей скорости, количество цветов и некоторые другие.

В нижней части диалогового окна представлена полоса статуса, состоящая из трех блоков.

В первом блоке представлен список масштабов (рис. 14 15) Для изменения масштаба можно также использовать инструмент Zoom (Масштаб) из палитры инструментов, расположенной в левом верхнем углу диалогового окна. Если изображение увеличено, то для его перемещения в окне просмотра используется инструмент Hand (Рука). В остальных окнах изображения автоматически перерисовываются.

	Во втором блоке оперативно отображается информация о цветах в процессе проведения курсором по изображению, здесь представлены следующие поля: R: (Красный), G: (Зеленый), В: (Синий), Alpha: (Цвет маски альфа-канала), Hex: (Шестнадцатеричный код цвета), Index: (Индексированный цвет).
	В третьем блоке отображается список программ -браузеров, с помощью которых можно предварительно увидеть не только изображение, но и параметры документа и собственно HTML-код (рис. 14.16).

Выбор формата для оптими зированного изображения

В настоящее время для 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-битового (рис. 14.17).

	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 (Чересстрочная развертка) обеспечивает постепенное улучшение изображения в процессе загрузки. Если данное изображение предполагается использовать в качестве фона или текстурной заливки, то этот флажок лучше убрать.

Формат JPEG

Формат JPEG (Joint Photographic Experts Group) вполне пригоден для сохранения полноцветных изображений (он поддерживает 24-битный цвет), особенно если они предназначаются только для отображения на экране монитора. Такие изображения широко используются в сети Internet. В некоторых случаях для передачи градиентных растяжек этот формат экономнее формата GIF.

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

Формат JPEG однако не поддерживает прозрачности, поэтому прозрачные пикселы оригинала, если они есть, можно заполнить фоновым цветом (matte color).

В раскрывающемся списке Compression Quality (Степень сжатия) представлены варианты (рис. 14.18):

	Low (Низкая)
	Medium (Средняя)
	High (Высокая)
	Maximum (Максимальная)

В соответствии с этим выбором в поле Quality (Качество) отображается условное число в диапазоне от 0 (низкое качество) до 100 (максимально возможное качество).

В поле Blur (Размытие) можно определить уровень размытия, действие этой функции напоминает фильтр Gaussian Biur (Размытие по Гауссу), что позволяет смягчить некоторые излишне резкие элементы.

Установка флажка ICC Profile (Профиль ICC) позволяет сохранить в файле данные системы управления цветом, которые могут использовать некоторые браузеры.

Флажок Optimized (Оптимизированный) обеспечивает оптимизацию цветопередачи и уменьшенный размер файла, хотя не все устаревшие браузеры поддерживают эту функцию.

Флажок Progressive (Прогрессивный) позволяет создавать несколько изображений с различным разрешением, которые поочередно выводятся на экран, это удобно для восприятия, но требует некоторого увеличения объема файла.

Формат PNG-24

Формат PNG-24 поддерживает полноцветные изображения, кроме того, он обеспечивает довольно эффективную компрессию без потерь, а также градиентную прозрачность, однако этот формат относительно нов и не поддерживается устаревшими .версиями браузеров.

Функции, которые 'становятся при выборе варианта PNG-24 (рис. 14.19), идентичны тем, которые обеспечиваются форматом JPEG.

Цветовая таблица

Цветовая таблица, отображающая образцы оптимизированных цветов, выводится в окне просмотра при щелчке на вкладке Color Table (Цветовая таблица).

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

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

	Unsorted (Без сортировки);
	Sort by Hue (Сортировка по цветовому тону) — нейтральным цветам (серая шкала) присваивается значение 0 градусов и они располагаются рядом с красными;
	Sort by Luminance (Сортировка по яркости);
	Sort by Popularity (Сортировка по частоте использования).

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

Щелчок на кнопке Add Eyedropper Color (Добавить цвет пипетки) добавляет в цветовую таблицу цвет, установленный в цветовом блоке в правом верхнем углу. Того же можно добиться, если выполнить команду New Color (Новый цвет) меню окна цветовой таблицы, меню открывается щелчком на треугольной стрелке.

В цветовой таблице цветовые Образцы можно выделять- если необходимо изменить цвета. Для этого следует щелкнуть на квадратике нужного Цвета. При этом последовательная группа выделяется с помощью клавиши [Shift], а выделение в произвольном порядке посредством клавиши [Ctrl]. Для выделения всех цветов в меню окна просмотра предлагается команда Select All Colors (Выделить все цвета), а для отмены выделения — команда Deselect All Colors (Снять выделение всех цветов). Для выделения всех цветов, входящих в Web-безопасную палитру, служит команда Select All Web Safe Colors (Выделить все цвета Web-безопасной палитры), а для всех цветов, не входящих в Web-безопасную палитру — Select All Non-Web Safe Colors (Выделить все цвета вне Web-безопасной палитры).

Выделенные цвета можно редактировать, например, изменять параметры цвета. Для этого необходимо выполнить двойной щелчок и в открывшемся диалоговом окне Color Picker (Цветовая палитра). Измененный цвет помечается ромбиком.

Цвета можно зафиксировать с тем, чтобы не допустить удаления его при редуцировании цветов или имитации его другими цветами. Фиксировать цвет можно следующими способами;

	щелкнуть на кнопке Lock (Фиксировать) () в нижней части окна просмотра;
	выполнить команду Lock/Unlock Selected Colors (Фиксировать/Освободить выделенные цвета) меню окна цветовой таблицы, меню открывается щелчком на треугольной стрелке.

В результате на цветовом образце в правом нижнем углу отображается маленький квадратик с точкой. Для снятия фиксирования следует повторить действие.

Выделенные цвета можно удалить из цветовой таблицы:

	щелкнуть на кнопке Trash (Корзина) в нижней части окна просмотра;
	выполнить команду Delete Color (Удалить цвет) меню окна просмотра.

Nota Bene. Следует иметь в виду, что удаление цвета ведет к тому, что область, которая им окрашивалась, меняет свой цвет на другой, оставшийся в таблице и наиболее близкий к удаленному, а тип таблицы автоматически меняется на Custom (Пользовательская).

Полученную цветовую таблицу можно сохранить для использования с другими изображениями и другими документами. При загрузке цветовой таблицы все цвета в оптимизируемом изображении заменяются на новые. Для этих операций используются команды Save Color Table (Сохранить цветовую таблицу) (информация сохраняется в файле с расширением act) и Load Color Table (Загрузить цветовую таблицу), которые расположены в меню окна просмотра.

Размер изображения

При экспортировании графики в форматы, используемые и Web-дизайне, возможно изменение размера как непосредственно в пикселном измерении, так и в процентном отношении.

Nota Bene. Следует иметь в виду, что при этом неизбежны более или менее значительные погрешности, поскольку при уменьшении изображения определенная часть пикселов удаляется, а при увеличении требуется процедура интерполяции, чтобы заполнить цветом дополнительные пикселы.

Для выполнения этой функции следует выбрать вкладку Image Size (Размер изображения) (рис. 14.20) диалогового окна Save for Web (Сохранить для Web).

В группе Original Size (Исходный размер) отображается размерность изображения в пикселах по ширине (поле Width) и высоте (поле Height). Эта группа важна для оценки размера изображения, предназначенного для размещения на Web-страницах.

В группе New Size (Новый размер) в поля Width (Ширина) и Height (Высота) можно ввести новые значения размерности изображения в пикселах или в поле Percent (Процент) ~ в процентах. Для того чтобы новое изображение оказалось подобным исходному, следует установить флажок Constrain Proportions (Сохранить пропорции).

Флажок Clip to Artboard (Обрезать до монтажной области) устанавливается в том случае, если изображение выходит за границы монтажной области.

Для отработки всех установленных параметров следует нажать кнопку Apply (Применить).

Именованные наборы установок

Набору установок, которые используются для экспортирования в диалоговом окне Save for Web (Сохранить для Web), можно присвоить произвольное имя, сохранить его и использовать в дальнейшем для ускорения работы.

Для того эдобы,сохранить набор.установок, необходимо выполнить команду Save Settings (Сохранить установки)'.^еню вкладки Settings (Установки). Информация записывается в файл "с- расширением ire. После сохранения имя этого набора отображается^» списке Settings (Установки). Для его удаления в том же меню расположена команда Delete Settings (Удалить установки).

Сохранение оптимизированного изображения

После установки всех параметров для отдельного оптимизированного изображения следует нажать кнопку ОК. В результате на экран выводится диалоговое окно Save Optimized As (Сохранить оптимизированное изображение) (рис. 14.21).

Изображение сохраняется в том формате, параметры которого определялись в диалоговом окне Save for Web (Сохранить для Web).

При установке флажка Save HTML File (Сохранить HTML-файл) программа генерирует HTML-файл, в котором обеспечивается ссылка на оптимизированное изображение.

В меню окна просмотра Settings (Установки) представлена команда Optimize То File Size (Оптимизировать, не превышая объема файла), которая открывает одноименное окно.

Объем файла, который требуется соблюсти, определяется, поле Desired Fne Size (Необходимый объем файла). Переключатель Start With (Исходить из) предлагает два положения:

	Current Settings (Текущих установок) не изменяет формата;
	Auto Select GIF/JPEG (Автоматический выбор формата GIF/JPEG) самостоятельно обеспечивает выбор формата.

| |