Диалоговое окно команды Optimize To File Size ...

Рисунок 8.7. Диалоговое окно команды Optimize To File Size...

задать желаемый размер файла, не забывая, конечно, что от него зависит качество; выбрать, будет ли работа происходить с текущими настройками (в этом случае автоматически изменяться будут параметры выбранного вами формата), или предоставить PhotoShop определить нужный формат; указать параметры использования фрагментов изображения, определенных при помощи инструмента Slice (Нож).

Далее перейдем к вкладке Settings (Настройки). Она предусматривает два способа оптимизации: автоматическую и ручную (Рисунок 8.8.).

Диалоговое окно команды Save For Web ...

Рисунок 8.4. Диалоговое окно команды Save For Web...

Команда Save For Web... (Сохранить для Web...) предоставляет в ваше распоряжение обычный «джентльменский набор» инструментов: Hand (Рука), Slice Select (Выбор фрагмента), Zoom (Лупа) и Eyedropper (Пипетка). Никаких новых свойств они приобрести не успели, а описание их работы представлено в соответствующей главе.

Над правым верхним углом области просмотра находится кнопка

Экспорт файлов GIF для Web

Файлы GIF экспортируются командой File > Export > GIF89a Export (Файл > Экспорт > Экспорт GIF89a).

ВНИМАНИЕ. В Adobe PhotoShop 7 фильтр экспорта GIF89a по умолчанию не устанавливается, его нужно переписать из папки Goodies дистрибутива в папку исполняемых модулей. Файл имеет название GIF89a Export.Sbe.

Изображения, созданные с помощью этой команды, могут быть:

полупрозрачными; чересстрочными;

Они поддерживают следующие цветные режимы:

Indexed Color (Индексированные цвета); RGB.

Перед использованием команды необходимо перевести изображение в один из двух вышеуказанных режимов.

В этом окне можно задать следующие параметры:

Palette (Палитра). Может принимать значения Adaptive (Адаптивная) и System (Системная). Как подробно разбиралось выше, палитра Adaptive (Адаптивная) основана на преобладающих цветах изображения, а палитра System (Системная) — на цветах, использующихся в Windows или Mac OS. При указании палитры System (Системная) становится доступным флажок Use Best Match (Использовать наиболее похожие), который позволяет заменить цвета изображения на близкие им цвета системной палитры;

Color (Цвет). Из раскрывающегося списка необходимо выбрать количество цветов, которое будет содержаться в сохраняемом изображении; флажок Interlaced (Чересстрочный) управляет чересстрочной загрузкой изображения; флажок Export Caption (Добавить подпись) указывает, надо ли добавлять к экспортируемому изображению подпись, которая извлекается из сведений о файле (команда File > File Info... (Файл > Сведения...)).

Кнопка Load (Загрузить) загружает сохраненную ранее палитру.

Оценить результаты работы позволяет кнопка Preview (Предварительный просмотр).

Кроме вышеперечисленных параметров, здесь можно указать:

цвет прозрачных пикселов при предварительном просмотре (по умолчанию серый, что не всегда удачно); какие цвета сделать прозрачными (при помощи инструмента Eyedropper (Пипетка)); если изображение содержит канал маски, то она может быть использована для определения прозрачных областей (поле Transparency From (Прозрачность из)).

ВНИМАНИЕ. Черный цвет маски определяет прозрачность, белый — непрозрачность. Для фор-мата GIF не существует переходных состояний прозрачности: область либо прозрачна, либо нет. Темно-серый цвет маски станет прозрачным, а светло-серый — непрозрачным.

Экспорт контуров в Adobe Illustrator

В программу Adobe PhotoShop, являющуюся, по сути, растровым редактором, внедрены некоторые элементы векторной графики. Возможно, вы захотите, использовав при работе над изображением векторный объект, перенести его в векторный редактор для дальнейшей обработки. Воспользуйтесь командой File > Export > Paths to Illustrator... (Файл > Экспорт > Контуры в Illustrator...). Она позволяет сохранить векторные объекты (контуру) в формате векторной графики .AI, используемом программой Adobe Illustrator. Диалоговое окно этой команды представлено на Рисунок 8.14.

Совет 8
Совет 8

Программы семейства Adobe во многом схожи и совместимы между собой. Поэтому вы можете легко переносить между ними изображения и другие объекты при помощи буфера обмена Windows. Разумеется, каждая из программ будет представлять переданный ей объект в меру своих возможностей.

Мастер экспорта прозрачных изображений

Этот мастер быстрой подготовки изображений для Web запускается командой Help > Export Transparent Image... (Помощь > Экспорт прозрачных изображений...). Рисунки, которые вы сохраняете с его помощью, могут содержать прозрачные области.

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

На первом шаге (Рисунок 8.15) от пользователя требуется описать изображение: имеет ли оно прозрачный фон, выделенную область, которая должна быть прозрачной, или пользователь хотел бы сделать какую-либо область прозрачной. Если вы укажете, что хотите выделить область, то вам будет предложено завершить работу мастера, выделить нужный участок изображения и запустить мастер снова.

Меню выбора режима предварительного просмотра

Рисунок 8.5. Меню выбора режима предварительного просмотра

Окно мастера экспорта прозрачных

Рисунок 8.15. Окно мастера экспорта прозрачных изображений при выполнении первого шага

На втором шаге (Рисунок 8.16) необходимо указать, для чего предназначено экспортируемое изображение: для печати (Print) или для размещения в Сети (Online). В зависимости от ответа Adobe Photoshop определит нужное разрешение: для web-графики достаточно 72 dpi, а для печати в большинстве случаев требуется гораздо большее разрешение. При выборе параметра Print (Печать) работа мастера на этом шаге заканчивается и вам будет предложено стандартное окно сохранения, где от вас требуется только ввести название файла.

Рисунок 8.16. Окно мастера экспорта прозрачных изображений при выполнении второго шага

На третьем шаге (Рисунок 8.17) нужно выбрать формат экспортируемого изображения. При выборе формата GIF за счет индексации мы потеряем некоторое количество цветов, а формат PNG до сих пор не поддерживается многими браузерами или же в них реализуются далеко не все его возможности. При выборе формата PNG работа мастера на этом шаге заканчивается и вам будет предложено сохранить файл.

Рисунок 8.17. Окно мастера экспорта прозрачных изображений на третьем шаге при выборе параметра Online

На четвертом шаге (Рисунок 8.18) проводится индексация цветов при помощи ранее подробно рассмотренной команды Indexed Color... (Индексированные цвета...).

Рисунок 8.18. Окно мастера экспорта прозрачных изображений на четвертом шаге при выборе формата GIF

После выполнения этих шагов остается только сохранить файл под нужным именем.

Слева изображены настройки для GIF справа — для JPEG

Рисунок 8.8. Слева изображены настройки для GIF, справа — для JPEG

Оптимизация запускается автоматически при выборе из ниспадающего меню стиля оптимизации.

При ручной оптимизации формата GIF можно задать алгоритм сокращения количества цветов, алгоритм сглаживания, прозрачность, чересстрочную загрузку, степень сглаживания (в процентах), цвет, которым следует заполнить прозрачные пикселы. Эти параметры рассмотрены выше (в разделе «Сохранение в формате GIF»). Дополнительными параметрами являются Lossy (Потери) и Web Snap (Цвета для Web).

Совет 5
Совет 5

При установке значения Lossy (Потери) около 30% размер файла значительно уменьшается, а качество остается приемлемым. Чем меньше значение параметра Web Snap (Цвета для Web), тем меньше степень соответствия используемых цветов web-цветам. Значение 100% говорит о том, что используются только web-цвета.

При выборе формата JPEG следует обратить внимание на следующие отличия от обычного окна сохранения:

в меню Quality (Качество) показатель изменяется в пределах от 0 до 100; возможно использование цветового профиля (флажок ICC Profile (Профиль ICC)); появился параметр Blur (Размытие), который упрощает сжатие.

ВНИМАНИЕ. Для обработки цветовых профилей web-браузеру необходимы дополнительные модули, к тому же включение цветового профиля увеличивает размер файла на 3-4 Кбайт. При использовании размытия изображения обеспечивается уменьшение размера файла, но удаляются его детали.

Следующие две вкладки — Color Table (

Сохранение файлов в форматах GIF и JPEG

Сохранение файлов в форматах GIF и JPEG

Сохранение в формате GIF Сохранение в формате JPEG Сохранение с помощью команды Save For Web... (Сохранить для Web...) Экспорт файлов GIF для Web Экспорт контуров в Adobe Illustrator Мастер экспорта прозрачных изображений Что нового мы узнали?

В этом уроке мы научимся различать тонкости использования форматов GIF и JPEG, выбирать способ сохранения и использовать некоторые «подготовительные» команды.

Использование форматов GIF и JPEG обусловлено тем, что web-специфика заставляет считаться с таким основополагающим критерием, как размер файла. Все изображения, которые встречаются на web-страницах, упрощенно можно разделить на две группы: фотографии и логотипы. Фотография — многоцветное изображение с непрерывным фоном, логотип — высококонтрастное изображение с текстом, содержащее ограниченное количество цветов.

Выбор делается в пользу формата GIF, если сохраняемое изображение имеет хотя бы одну из ниже перечисленных позиций:

прозрачные области; анимация; использование не больше 256 цветов палитры RGB; использование режимов Grayscale (Оттенки Серого) или Indexed Color (Индексированный Цвет).

Следовательно, изображение типа «логотип» идеально подходит для сохранения в формате GIF.

Фотографии и многоцветные картинки, не содержащие слоев и альфа-каналов, хранят в формате JPEG.

Теперь мы умеем классифицировать изображения, использующиеся в web-графике. Рассмотрим процедуру сохранения в форматах GIF и JPEG.

Сохранение с помощью команды Save

Сохранение с помощью команды Save For Web... (Сохранить для Web...)

Главным достоинством команды Save For Web... (Сохранить для Web...) является возможность предварительного просмотра изображения и автоматическая подготовка HTML-кода, позволяющего установить изображение на web-страницу. Эта команда позволяет сравнить различные группы параметров и выбрать ту, которая обеспечивает оптимальное соотношение качества изображения и размера файла. Например, сравнить различные индексированные палитры цветов, параметры JPEG-сжатия, форматы GIF и JPEG. При этом исходное изображение остается неизменным и можно легко к нему вернуться.

С помощью этой команды за одну операцию можно провести индексацию цветов, добавить прозрачность и сохранить изображение в формате GIF или JPEG, что избавляет от необходимости предварительно использовать команды Indexed Color... (Индексированные цвета...) или Color Table (

Сохранение в формате GIF

Чтобы сохранить цветное изображение в формате GIF, необходимо преобразовать его к цветовой модели RGB с помощью команды Image > Mode > RGB (Изображение > Режим > RGB), а затем воспользоваться командой Image > Mode > Indexed Color... (Изображение > Режим > Индексированный Цвет...).

Примечание 1
Примечание 1

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

В диалоговом окне этой команды (Рисунок 8.1) можно указать наиболее важные цвета, выбрать цвета из более естественных палитр и применить прозрачность. Рассмотрим параметры, указанные в диалоговом окне, и их влияние на изображение.

Сохранение в формате JPEG

Для хранения изображений фотографического качества формат JPEG обеспечи вает минимальный размер файла, но за это удовольствие приходится расплачи ваться потерей качества. Утешением может служить то, что сжатие в формате JPEG искажает внешний вид изображения меньше, чем сокращение палитры цветов. При сохранении JPEG-изображений на экран выводится (Рисунок 8.3) диалоговое окно JPEG Options (Настройки JPEG).

Рассмотрим параметры, указанные в диалоговом окне, и их влияние на изображение.

Matte (Кайма). Уместнее было бы название «имитация прозрачности». Пара метр становится доступным для изменения, если изображение содержит про зрачные области. В отличие от GIF, формат JPEG не поддерживает прозрачности и мы должны указать Adobe PhotoShop, каким цветом эти области залить. Соответствующий цвет можно выбрать из раскрывающегося списка.

Таблица цветов)

Таблица цветов).

На Рисунок 8.4 представлено диалоговое окно команды Save For Web... (Сохранить для Web...).

Начнем по порядку рассматривать состав и назначение вкладок, меню и инструментов.

Большую часть диалогового окна занимает область просмотра. С помощью четырех вкладок можно настроить следующие режимы отображения:

Original (Оригинал) — просмотр оригинального изображения без влияния изменений; Optimized (Оптимизированное) — вид оптимизированного изображения без оригинала; 2-Up (2 вида) — оригинал и один из оптимизированных вариантов; 4-Up (4 вида) — оригинал и три варианта оптимизации, естественно, это самый наглядный режим.

Таблица LUT (lookup table) — таблица

Таблица LUT (lookup table) — таблица поиска цвета — генерируется PhotoShop. Она служит предметным указателем или индексом, поэтому процесс называется индексированием.

Uniform (Однородный). Создает однородное распределение цветов спектра. Практически не используется; Local (Локальный). Используется при работе с фотографическими изображениями, когда необходимо высокое качество цветопередачи. В этом режиме выделяется три вида алгоритмов сокращения количества цветов: Perceptual (Перцепционный). Создает заказную таблицу поиска цвета, отдающую приоритет тем оттенкам, которые четко различает человеческий глаз; Selective (Избирательный). Создает таблицу поиска цвета, похожую на перцепционную, но основанную на ключевых цветах изображения. Предпочтение отдается web-цветам; Adaptive (Адаптивный). Создает заказную таблицу из тех цветов спектра, которых больше в изображении. Игнорирует все палитры системы и web-палитру;

Совет 1

Наиболее приемлемые результаты обычно дает режим Local (Adaptive) (Локальный (Адаптивный)). Master (Главный). Становится доступным при двух и более одновременно открытых файлах. Применяется для создания таблицы поиска цвета, в которой содержатся цвета всех открытых изображений. Используется для пакетной обработки изображений, которые впоследствии могут быть записаны на компакт-диск или другой носитель информации. Работает по тем же алгоритмам сокращения количества цветов, что и режим Local (Локальный); Custom (Заказной). Позволяет пользователю создать самому таблицу поиска или загрузить ее с диска. Используется при создании изображений для мультимедийных приложений, в web-графике почти не применяется. При выборе этого режима появляется диалоговое окно Color Table (

Таблица поиска цвета) где можно

Таблица поиска цвета), где можно выбрать следующие варианты: Custom (Заказная) — предоставляет возможность самостоятельного создания таблицы; Black Body (Темный фон) — уничтожает цвета сине-зеленой части спектра, оставляя черный, красный, оранжевый, желтый и белый. Grayscale (Оттенки Серого) — изображение становится полутоновым; Spectrum (Спектральная) — оставляет только цвета спектра; System (Системная) — системная таблица Windows или Mac OS; Previous (Предыдущий). Этот режим использует последнюю таблицу поиска, созданную командой Indexed Color... После использования режима Master (Главный) становится режимом по умолчанию. Подходит при необходимости создания нескольких изображений, выдержанных в едином стиле.

Примечание 3

До применения команды Indexed Color... в текущем сеансе работы режим Previous (Предыдущий) недоступен.

ВНИМАНИЕ. После перевода изображения в режим индексированных цветов его нельзя редактировать. Большинство инструментов и команд не работают или работают не так, как того следовало ожидать.

Изменяя параметр Colors (Цвета), мы можем выбрать количество используемых цветов. Чем меньше используется цветов, тем меньше будет размер файла.

Параметр Forced (Защищенные) позволяет принудительно ввести в таблицу некоторые цвета. Они не изменяются при выборе остальных цветов.

Возможные значения:

None (Отсутствует) — предустановленные цвета в таблицу не вводятся. Для цветов, сформированных на основе изображения, в палитре остается больше позиций; Black and White (Черный и белый) — в палитре в любом случае будут присутствовать черный и белый цвета; Primaries (Основные) — в палитру вводятся восемь основных цветов: черный, белый, красный, зеленый, синий, голубой, темно-красный и желтый; Web — палитра будет содержать 216 цветов web-палитры (безопасной палитры).

Флажок Transparency (Прозрачность) позволяет сохранить прозрачные области изображения. Для их обозначения выделяется один из цветов палитры. Обратите внимание: так как прозрачность обозначается одним цветом, то плавное изменение прозрачности пикселов в режиме индексированных цветов невозможно. Вторая группа параметров — Options (Настройки).

Параметр Matte (Кайма) доступен при наличии прозрачности и используется совместно с флажком Transparency (Прозрачность). Если этот флажок установлен, то указанный цвет заполнит и полупрозрачные, и прозрачные пикселы.

Совет 2
Совет 2

Лучше всего выбрать цвет, соответствующий фону web-страницы.

Параметр Dither (Сглаживание) определяет стиль удаления «лишних» цветов. Искажения, возникающие при сглаживании, наиболее заметны при использовании web-палитры. Поскольку мы делаем акцент на web-графике, рассмотрим подробнее и проиллюстрируем режимы сглаживания.

Возможные режимы (Рисунок 8.2):

None (Отсутствует) — не контролирует корректную цветопередачу, подходит для «простых» изображений, не содержащих теней и плавных тональных переходов; Diffusion (Диффузия) — распределяет цвета по специальному алгоритму, не создающему узора и размывает переходы между различными цветами; Pattern (Узор) — сглаживает цвета с помощью геометрического узора (этот узор может довольно четко проступить на результирующем рисунке); Noise (Шум) — хаотически смешивает пикселы по всему изображению, не создавая узора.

Параметр Amount (Степень) доступен в случае использования режима сглаживания Diffusion (Диффузия) и позволяет контролировать его степень. Чем меньше значение, тем меньше количество используемых цветов и, соответственно, размер файла.

Таблица поиска цветов) и Image

Таблица поиска цветов) и Image Size (Размер изображения) — аналогичны командам Image > Mode > Color Table... (Изображение > Режим > Таблица поиска цветов...) и Image > Image Size... (Изображение > Размер изображения...), рассмотренным в предыдущей главе.

В правом верхнем углу вкладки Color Table (

Таблица поиска цветов) (Рисунок

Таблица поиска цветов) (Рисунок 8.9) расположена кнопка

В диалоговом окне команды Export

Рисунок 8.14. В диалоговом окне команды Export > Paths to Illustrator... необходимо указать название файла и экспортируемые контуры

Вид диалогового окна команды Image

Рисунок 8.1. Вид диалогового окна команды Image > Mode t Indexed Color...

Вкладка Palette (Палитра) позволяет выбрать способ вычисления цветов по таблице поиска. Существуют следующие режимы:

Exact (Точный). Используется по умолчанию, если изображение содержит менее 256 цветов (в том случае, если оно высококонтрастное или черно-белое); System (Системный). Представлен в двух вариантах: Windows и Mac OS. Используется при создании фоновых рисунков, обоев или других элементов рабочего стола; Web. Используется браузерами, применяется для вывода изображения на 8-битовый монитор. Включает те 216 цветов, значения R, G и В которых нацело делятся на 51, то есть эта 216-цветная таблица LUT является пересечением множеств цветов палитр систем Windows и Macintosh;

Примечание 2
Примечание 2

Вид диалогового окна при сохранении

Рисунок 8.3. Вид диалогового окна при сохранении изображения в формате JPEG Image Options (Настройки изображения). Изменяемым параметром является Quality (Качество). Он служит для задания степени сжатия изображения. Чем ниже значение параметра, тем выше сжатие (меньше размер файла). Качество изображения может значительно ухудшиться при увеличении степени сжатия.

Совет 3

В большинстве случаев оптимальной является степень сжатия около 7. Однако в каж-дом случае ее стоит подбирать индивидуально. Этому способствует то, что во время выбора параметров формата JPEG в окне изображения отображается, как сжатие скажется на рисунке. При помощи мыши вы можете «прокручивать» изображение в окне. Щелкая мышью при нажатой клавише Сtrl, можно увеличить изображение, а при нажатой клавише Alt — уменьшить.

Format Options (Настройки формата). Большинство web-браузеров поддерживает два варианта формата JPEG: базовый и прогрессивный (расширенный). Базовый, или последовательно отображаемый формат, создает изображения путем построчного вывода на экран, а прогрессивный выводит изображения на экран за несколько проходов. Формат Baseline Optimized (Оптимизированный базовый) отличается от Baseline («Standard») (Базовый стандартный) тем, что за счет использования улучшенного способа кодирования Хаффмана позволяет уменьшить размер файла на 5-10%. При выборе формата Progressive (Расширенный) изображение будет выводиться на экран не построчно, а за несколько проходов. На каждом из проходов выводится полное изображение, качество которого от прохода к проходу улучшается. Параметр Scans (Сканирование) задает число проходов. Чем выше значение этого параметра, тем более плавно улучшается качество изображения. Кроме того, при большем числе проходов файл занимает немного меньше места. Size (Размер) — вы можете оценить размер файла до его записи на диск. Из раскрывающегося списка вы можете выбрать скорость передачи данных. Рядом со списком отображается время, которое потребуется для загрузки изображения на компьютер пользователя. Если вы недовольны скоростью загрузки изображения, придется пожертвовать качеством и уменьшить параметр Quality (Качество).

Совет 4
Совет 4

При выборе скорости загрузки разумнее остановиться на средней. Если ориентироваться на пользователей, обладающих последними достижениями техники, есть риск лишиться львиной доли аудитории. Излишнее уменьшение размера файла за счет качества тоже не всегда приемлемо.

Вид и расположение меню параметров

Рисунок 8.6. Вид и расположение меню параметров

В этом меню собраны команды работы с настройками, команда Repopulate Views (Перемещение видов) и Optimize To File Size... (Оптимизировать размер файла...). Последнюю команду мы рассмотрим подробнее ввиду ее исключительной полезности (Рисунок 8.7.). Для web-графики, в которой идет жесткая борьба за каждый килобайт, возможность автоматически «отвоевать» уменьшение размера файла лишней не является. Для работы этой команды требуется:

Вид и расположение меню управления

Совет 6

Используя кнопки Prev (Предыдущий) и Next (Следующий), а также список, располо женный над элементами, определяющими параметры, вы можете быстро переключаться между режимами задания тех или иных настроек сохранения страницы.

Вид изображения с применением

Рисунок 8.2. Вид изображения с применением различных режимов: при отсутствии сглаживания (а); режим Diffusion (б); режим Pattern (а); режим Noise (г)

Флажок Preserve Exact Colors (Сохранить точные цвета) доступен в случае исполь зования режима сглаживания Diffusion (Диффузия) и сохраняет области одина нового цвета неразмытыми.

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

Внешний вид диалогового окна для

Рисунок 8.13. Внешний вид диалогового окна для настройки сохранения фрагментов рисунка

Внешний вид диалогового окна для настройки сохранения файлов

Рисунок 8.12. Внешний вид диалогового окна для настройки сохранения файлов

Внешний вид диалогового окна для настройки фона

Рисунок 8.11. Внешний вид диалогового окна для настройки фона

Внешний вид диалогового окна при настройке HTML показан на Рисунок 8.10. Для настройки HTML задаются следующие группы параметров:

Formatting (Форматирование). Из четырех ниспадающих меню выбираются варианты написания тегов (Tags Case (Регистр тегов) и Attribs Case (Регистр атрибутов)), значения параметра Indent (Абзац) и Line Ending (Окончание линии). Флажок Always Quote Attributes (Всегда использовать кавычки) указывает на то, что значения параметров тегов следует заключать в кавычки; Coding (Кодирование). Флажок Include Comments (Включить комментарии) добавляет комментарии к коду HTML; Slice Output (Выходные параметры фрагментов). Каскадная таблица стилей генерируется при выборе переключателя Generate CSS (Сгенерировать CSS), при этом требуется указать, по какому признаку следует вызывать элементы web-страницы. Это задается при помощи параметра Referenced (Ссылки по): «By ID» («По идентификатору»), «Inline» («Встроенный стиль») или «By Class» («По классу»). При выборе переключателя Generate Table (Сгенерировать таблицу) создается таблица. Ее параметры выбираются из трех ниспадающих меню: Empty Cells (Пустые ячейки), TD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители).

Совет 7
Совет 7

Для параметров ТD W&H (Высота и ширина ячейки) и Spacer Cells (Ячейки-разделители) лучше установить значение Always (Всегда) вместо установленного по умолчанию Auto (Авто).

Параметры фона генерируемой web-страницы задаются в окне, показанном на Рисунок 8.11.

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

Внешний вид диалогового окна при настройке параметров сохранения файлов показан на Рисунок 8.12.

В этом диалоговом окне вашему вниманию предлагаются три вкладки:

File Naming (Название файла). Определяет принцип присвоения названия файлу; Filename Compatibility (Совместимость названий файлов). Указывает, в каких системах, кроме Windows, может использоваться файл; Optimized Files (Оптимизировать файлы). Упрощает рутинную работу: копирует фоновый рисунок, записывает рисунки в одну папку и добавляет знак авторского права.

Внешний вид диалогового окна при настройке параметров сохранения фрагментов изображения, определенных при помощи инструмента Slice (Нож) показан на Рисунок 8.13.

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

Внешний вид диалогового окна для настройки HTML

Рисунок 8.10. Внешний вид диалогового окна для настройки HTML

А Внешний вид диалогового окна

Рисунок 9.27, а. Внешний вид диалогового окна команды Color Picker в PhotoShop

Автоматическая оптимизация настроек

Автоматическая оптимизация настроек в программе ImageReady выполняется с помощью дроплета.

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

Дроплет создается следующим образом:

для текущего изображения необходимо выбрать формат и настройки сжатия на панели оптимизации; значок Примечание 3
Примечание 3

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

Приведем также альтернативные способы создания дроплета.

Щелчок на значке дроплета

Б Внешний вид диалогового окна

Рисунок 9.27,б. Внешний вид диалогового окна команды Color Picker в ImageReady

Как видно из Рисунок 9.27, а и 9.27, б эти различия связаны с отсутствием цветовых моделей Lab и CMYK.

Диалоговое окно Save optimized

Рисунок 9.35. Диалоговое окно Save optimized settings as droplet в котором можно задать название дроплета и его размещение

Выполнение команды Create Droplet (Создать дроплет) из меню панели оптимизации. В результате появляется то же диалоговое окно, что и при предыдущем способе.

Для использования дроплета файл или папку нужно перетащить на значок дроп-лета на рабочем столе. После этого появится диалоговое окно Batch progress (Процесс выполнения).

В этом диалоговом окне можно прервать, продолжить или остановить процесс выполнения дроплета.

Оптимизация изображений

Оптимизацией изображений в программе ImageReady управляет панель оптимизации (Рисунок 9.28). Оптимизировать можно пять форматов файлов: GIF, JPEG, PNG-8, PNG-24 и WBMP. Количество параметров оптимизации контролируется кнопкой

Отличия инструментов и команд PhotoShop и ImageReady

Программы, безусловно, похожи, но не являются сестрами-близнецами. Рассмотрим, чем отличаются друг от друга инструменты и команды меню PhotoShop и ImageReady (Рисунок 9.1, табл. 9.1).

Как видно из рисунка, некоторые инструменты являются общими для обеих программ. Работа с этими инструментами описана в соответствующей главе.

Панель оптимизации для форматов

Рисунок 9.34. Панель оптимизации для форматов PNG — 8 (a), PNG — 24 (б) и WBMP (в)

Как видно из рисунка, специфических настроек они не имеют, а имеющиеся полностью совпадают с описанными выше.

Панель оптимизации для форматов GIF (слева) и JPEG (справа)

Рисунок 9.29. Панель оптимизации для форматов GIF (слева) и JPEG (справа)

При оптимизации формата GIF панель включает в себя семь строк (Рисунок 9.29, слева).

Меню формата файла и значение параметра Lossy (Потери). Сжатие с потерями сокращает размер файла за счет избирательного удаления данных. Оптимальным значением является 5-10, что приводит к уменьшению размера файла на 10-20%. Параметр становится недоступным при использовании флажка Interlaced (Чересстрочная загрузка) или алгоритмов сглаживания Noise (Шум) и Pattern (Узор). Для оптимизации степени потерь можно использовать альфа-канал. В этом случае белые области маски дают высокое качество, а черные — низкое. Для создания нового альфа-канала, основанного на текущем выделении, применяется команда Select > Save Selection... (Выделение > Сохранить выделение...) Кнопка

Подготовка и оптимизация изображений

Подготовка и оптимизация изображений

Отличия инструментов и команд PhotoShop и ImageReady Работа с цветом Оптимизация изображений Автоматическая оптимизация настроек Что нового мы узнали?

Программа Adobe ImageReady дополняет Adobe PhotoShop, начиная с версии 5. Она включает в себя не только большинство инструментов редактирования изображений, имеющихся в PhotoShop, но также средства подготовки и оптимизации web-графики. Кроме того, ImageReady позволяет создавать динамические изображения: анимированные графические ссылки и кнопки. В этом уроке мы рассмотрим вопросы подготовки изображений непосредственно в Adobe ImageReady и их оптимизации.

Если изображение не предназначено для печати и не предполагает сложной обработки или коррекции, то принципиальной разницы, где его создавать или редактировать — в PhotoShop или ImageReady — нет. Но, в отличие от PhotoShop, ImageReady обладает арсеналом средств для редактирования динамических изображений. Переход из одной программы в другую проще простого: чтобы попасть из PhotoShop в ImageReady, нужно лишь нажать кнопку

Работа с цветом

Работой с цветом в ImageReady управляет панель цвета. Необходимо обратить внимание на некоторые отличия этой панели от аналогичной панели PhotoShop (Рисунок 9.26). Меню панели цвета появляется при нажатии на кнопку

Первое, что бросается в глаза, это отсутствие цветовых моделей Lab и CMYK в меню панели цвета. Следующее отличие — дополнительные команды работы с цветом Invert (Инвертировать) и Complement (Дополнить).

Следует отметить также различие команд Color Picker (Определение цвета).

Отличия функций инструментов

Таблица 9.1. Отличия функций инструментов рисования программах PhotoShop и ImageReady

PhotoShop	ImageReady
Можно использовать инструменты рисования для создания контуров	Контур создать нельзя
На одном слое можно нарисовать много фигур и потом указать, как они должны перекрываться	На слое можно нарисовать только одну фигуру
После того, как фигура нарисована, ее можно редактировать	Фигуры можно только двигать и изменять

В PhotoShop (а) и ImageReady (6)

Рисунок 9.1. В PhotoShop (а) и ImageReady (6) панели инструментов немного отличаются друг от друга

Исходя из этого можно сделать вывод о том, какие изображения имеет смысл создавать и обрабатывать в ImageReady, а какие нет.

К различиям между командами также стоит отнестись внимательно, чтобы не стало сюрпризом, что какая-либо известная из PhotoShop команда работает не так или не совсем так, как ожидалось. И, естественно, рассмотрим работу команд, которые есть только в ImageReady.

1. Меню File (Файл) (Рисунок 9.2).

Команда File > Export Original... (Файл > Экспорт оригинала...) делает копию оригинала, предварительно произведя сведение слоев, и позволяет сохранить эту копию в разных форматах файлов. Форматы могут быть следующими: Photoshop (*.psd), BMP (*.bmp), PCX (*.pcx), Targa (*.tga) и TIFF (*.tif). Такая информация, как нарезка и параметры оптимизации, не сохраняется, если формат отличен от PSD.

Совет 1
Совет 1

Если ImageReady не позволяет сохранить файл в том формате, который вам нужен, всегда можно сделать это в программе PhotoShop.

Команда File > Save Optimized (Файл > Сохранить оптимизированное) сохраняет изображение с настройками, указанными при оптимизации (см. раздел «Оптимизация изображений» данного урока).

Команда File > Save Optimized As... (Файл > Сохранить оптимизированное как...) позволяет изменить настройки при сохранении (Рисунок 9.3).

Внешний вид диалогового окна Modify

Рисунок 9.30. Внешний вид диалогового окна Modify Lossiness Setting

Меню алгоритма сокращения «лишних» цветов и максимальное количество цветов изображения. Алгоритмы сокращения были подробно рассмотрены в соответствующей главе. Для автоматического определения количества цветов используется значение Auto (Авто), при этом программа подберет оптимальное количество на основании частоты повторения цветов в изображении. Для оптимизации сокращения количества цветов можно использовать альфа-канал. В этом случае области маски определяют, какие области изображения наиболее важны для создания таблицы LUT, показывая алгоритму сокращения «нужные» пикселы (белые области) и «ненужные» пикселы (черные области). Кнопка

справа от меню алгоритма сокращения цветов открыва ет диалоговое окно Modify Color Reduction (Изменить сокращение цветов), которое представлено на Рисунок 9.31. В этом окне можно выбрать нужный альфа-канал из списка и нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)). Меню алгоритма сглаживания и степень сглаживания. Алгоритмы сглаживания были подробно рассмотрены в соответствующей главе. Степень сглаживания указывается при выборе алгоритма Diffusion (Диффузия). Для оптимизации степени сглаживания можно использовать альфа-канал. В этом случае белые области маски определяют области изображения с высокой степенью сглаживания, черные — с низкой. Кнопка

в правом конце строки от крывает диалоговое окно Modify Dither Setting (Изменить настройки сгла живания), которое представлено на Рисунок 9.32. В этом окне можно выбрать нужный альфа-канал из списка, нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)) и определить степень сглаживания. Высокая степень сглаживания определяется величиной Maximum (Максимум). Для ее установки нужно выполнить одно из трех следующих действий: перетащить правый (белый) бегунок, ввести численное значение или воспользоваться стрелками текстового поля. Низкая степень сглаживания определяется величиной Minimum (Минимум), которой соответствует левый (черный) бегунок.

Рисунок 9.31. Внешний вид диалогового окна Modify Color Reduction

Рисунок 9.32. Внешний вид диалогового окна Modify Dither Setting

Флажок Transparency (Прозрачность) и значение параметра Matte (Кайма). Если изображение содержит прозрачные области, можно либо сохранить их либо залить определенным цветом. Установленный флажок Transparency (Прозрачность) сохраняет полностью прозрачные пикселы как прозрачные, а полупрозрачные заливает указанным цветом или делает полностью прозрачными (непрозрачными) в зависимости от выбранного значения параметра Matte (Кайма). Сброшенный флажок Transparency (Прозрачность) заливает полностью прозрачные и полупрозрачные пикселы указанным цветом. Меню алгоритма сглаживания прозрачности и степень сглаживания. Сглаживание прозрачности проявляется на границе прозрачных и непрозрачных пикселов. Степень сглаживания указывается для алгоритма Diffusion (Диффузия). Флажок Interlaced (Чересстрочная загрузка) и параметр Web Snap (Цвета для Web). Чересстрочная загрузка изображения в браузере позволяет оценить необходимость его полной загрузки до окончания процесса. Чтобы автоматически заменить используемые в изображении цвета на их web-эквиваленты, нужно перетащить бегунок Web Snap (Цвета для Web) или ввести численное значение. Эта операция уточнит допустимое количество заменяемых цветов. Чем выше значение этого параметра, тем больше цветов подлежит замене. Флажок Use Unified Color Table (Использовать унифицированную таблицу замены цвета) используется при необходимости унификации всех состояний анимированных кнопок.

При оптимизации формата JPEG панель состоит из пяти строк (Рисунок 9.29, справа).

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

ВНИМАНИЕ. Не забывайте, что оптимизированный формат JPEG не поддерживается некоторыми старыми браузерами и программами.

Рисунок 9.33. Внешний вид диалогового окна Modify Quality Setting

Меню степени сжатия и значение параметра качества. Чем выше степень сжатия, тем меньше размер файла. Основная задача заключается в нахождении наилучшего соотношения размер/качество опытным путем. Для оптимизации качества можно использовать альфа-канал. В этом случае белые области маски определяют области изображения с высоким качеством, черные — с низким. Кнопка

в правом конце строки открывает диалоговое окно Modify Quality Setting (Изменить настройки качества), которое представлено на Рисунок 9.33. В этом окне можно выбрать нужный альфа-канал из списка, нужные слои (флажки All Text Layers (Все текстовые слои) и All Vector Shape Layers (Все слои векторных фигур)) и определить качество. Высокое качество определяется величиной Maximum (Максимум). Для ее установки нужно выполнить одно из трех следующих действий: перетащить правый (белый) бегунок, ввести численное значение или воспользоваться стрелками текстового поля. Низкая степень качества определяется величиной Minimum (Минимум), которой соответствует левый (черный) бегунок. Флажок Progressive (Прогрессивный) и значение параметра Blur (Размытие). Флажок Progressive (Прогрессивный) устанавливается при необходимости сохранить изображение, которое будет постепенно проявляться при загрузке. При использовании размытия размер файла уменьшается путем удаления деталей изображения. Флажок ICC Profile (Профиль ICC) и значение параметра Matte (Кайма). Установка флажка ICC Profile (Профиль ICC) позволяет использовать цветовой профиль. Параметр Matte (Кайма) позволяет имитировать прозрачность. Флажок Preserve EXIF Metadata (Сохранить информацию о файле) используется при необходимости сохранения дополнительной информации.

На Рисунок 9.34 представлены остальные три формата, которые можно оптимизировать. Они не так популярны, как форматы, рассмотренные выше. Причина заключается в том, что они не поддерживаются многими, особенно старыми, браузерами.

Внешний вид меню File для PhotoShop

Рисунок 9.2. Внешний вид меню File для PhotoShop (а) и ImageReady (б)

Рисунок 9.3. Диалоговое окно команды File > Save Optimized As...

Изменить можно следующие параметры:

тип файла: HTML — код и изображения (*.html), только изображения (*.gif) и только HTML — код (*.html); настройки: заказные, фонового изображения, по умолчанию и другие; нарезку: все фрагменты или выделенные.

Команда File > Output Settings (Файл > Выходные настройки) отличается от соответствующей команды Photoshop только пунктом Image Maps... (Карты-изображения...), который подробно будет рассмотрен ниже (см. урок 12 «Карты-изображения в ImageReady»).

Команда File > Update HTML... (Файл > Обновить HTML...) предназначена для обновления связей в файлах HTML (Рисунок 9.4).

Рисунок 9.4. Диалоговое окно команды File > Update HTML...

В этом окне предоставляется возможность сохранения изображений и доступа к выходным настройкам.

Команды File > Place... (Файл > Поместить...) внешних различий не имеют, но если в Photoshop помещать можно только файлы форматов *.ai, *.eps, *.pdf и *.pdp, то ImageReady разрешает помещать файлы любых читаемых форматов.

Команда File > Import... (Файл > Импорт) позволяет получить файлы из внешних источников: импортировать папку с рисунками как кадры (подробно этот процесс рассмотрен ниже, импортировать изображение PDF, сканировать изображение и выбрать сканер.

Команда File > File Info... (Файл > Информация о файле...) гораздо скромнее, чем в Photoshop, можно указать только заголовок и автора.

Команда File > Preview In (Файл > Просмотр в) предоставляет возможность просмотреть изображение в любом установленном браузере.


а	б

Рисунок 9.5. Внешний вид меню Edit для PhotoShop (a) и ImageReady (б)

2. Меню Edit (Правка)

Команды подменю Edit > 0Copy HTML Code (Правка > Копировать HTML-код) обеспечивает копирование HTML-кода для всех нарезанных фрагментов изображения (Copy All Slices (Копировать все фрагменты)) или выделенных фрагментов (Copy Selected Slices (Копировать выделенные фрагменты)), а также соответствующего фрагментам изображения блоков программ JavaScript (Copy Preloads (Копировать программы)).

Команда Edit > Copy Foreground Color as HTML (Правка > Копировать текущий цвет как HTML) возвращает шестнадцатеричное значение текущего цвета. Команда Edit > Fill... (Правка > Заливка...) в отличие от подобной команды в Photoshop не позволяет использовать заказной узор.

3. Меню Image (Изображение)

Основное отличие заключается в количестве команд подменю Adjustments (Коррекция). Как видно из рисунка, большинство команд коррекции изображения в ImageReady отсутствует.

Рисунок 9.6. Внешний вид меню Image и подменю Adjustments для PhotoShop (a) и ImageReady (б)

Рисунок 9.7. Диалоговое окно команды Image > Adjustments > Gamma...

Команда Image > Adjustments > Gamma... (Изображение > Коррекция > Гамма...) позволяет настроить яркость изображения с учетом используемой системы (Рисунок 9.7).

Примечание 1

Параметр гамма измеряет яркость полутонов, отображаемых монитором. ОС Windows использует значение гамма выше, чем Mac OS, поэтому одно и то же изображение темнее для Windows, чем для Macintosh. Изображения, созданные в Photoshop 4.0 или более ранней версии, используют по умолчанию значение гамма, равное 1,8 (системное значение Mac OS) и должны быть скорректированы для Windows. Изображения, созданные в Photoshop 5.0 или более поздней версии, используют по умолчанию значение гамма, равное 2,2 (системное значение Windows), поэтому коррекции не требуют.

Как видно из рисунка, можно провести автоматическую настройку для переноса изображения из Windows в Macintosh и обратно.

ВНИМАНИЕ. Изменения, проведенные с помощью команды Image > Adjustments > Gamma... (Изображение » Коррекция > Гамма...), изменяют величину пикселов. Команды же из меню View > Preview корректируют параметр гамма, не изменяя величину пикселов изображения.

Команда Image > Duplicate Optimized... (Изображение > Повторить оптимизированное...) делает копию оптимизированного изображения, в отличие от команды Image > Duplicate... (Изображение > Повторить...), которая делает копию оригинала.

Команда Imaget Image Size... ( Изображение > Размер изображения...) позволяет изменить размер изображения, не теряя качества и предоставляет дополнительные настройки (Рисунок 9.8).

Вкладка Current Size (Текущий размер) носит чисто информативный характер, на вкладке New Size (Новый размер) задаются нужные параметры: ширина, длина или процентное соотношение. Флажок Constrain Proportions (Сохранить пропорции) не позволяет только удлинять или только расширять изображение. Из меню Quality (Качество) можно выбрать способ искажения пикселов (бикубический или «ближайший сосед»).

Поскольку изменение размеров изображения — часто используемый шаг обработки, его можно автоматизировать с помощью вкладки Action Options (Настройки действия). Для этого нужно записать указанную ниже последовательность действий.

Начать запись действия. Выполнить команду Image > Image Size... (Изображение > Размер изображения...), задав нужные параметры изображения. При необходимости установить флажок Action Options (Настройки действия). После этого станут доступными элементы управления, позволяющие задать некоторые параметры, полезные при автоматизированной обработке изображений.

Примечание 2
Примечание 2

Если вы хотите получить доступ к своей палитре при оптимизации GIF или PNG изображений, сохраните ее в папке Adobe PhotoShop > Presets > Optimized Colors. Чтобы применить к изображению свою палитру, нужно найти ее название в меню алгоритма сокращения количества цветов панели оптимизации. Подробнее этот вопрос будет рассмотрен дальше (см. Оптимизация изображений).

Внешний вид меню панели оптимизации

Рисунок 9.28. Внешний вид меню панели оптимизации

Это меню управляет сохранением и удалением настроек, автоматической оптимизацией, установками обновления и оптимизацией размера файла.

Команды Show Options (Показать параметры) и Hide Options (Спрятать параметры) управляют отображением на панели дополнительных параметров форматов.

Команды Save (Delete) Settings (Сохранить (Удалить) настройки) соответственно сохраняют или удаляют набор настроек, заданный пользователем.

Команды Repopulate Views (Перемещение видов) и Optimize to File Size... (Оптимизировать размер файла...) совпадают с командами Adobe PhotoShop и подробно рассмотрены в соответствующем уроке.

Команда Create Droplet... (Создать дроплет...) будет подробно рассмотрена ниже (см. раздел «Автоматическая оптимизация настроек» данного урока).

Если вы не хотите тратить время на обновление изображения после каждого изменения какого-либо параметра, нужно снять флажок команды Auto Regenerate (Автообновление). Команда Regenerate (Обновить) используется при снятом флажке команды Auto Regenerate (Автообновление) или после принудительного прерывания оптимизации.

Рассмотрим вид панели оптимизации для каждого формата.

Как уже не раз говорилось выше, самыми распространенными форматами изображений в web-графике являются GIF и JPEG. Внешний вид панели оптимизации для этих форматов (в режиме отображения дополнительных параметров) представлен на Рисунок 9.29.

Внешний вид панели цвета и соответствующего

Рисунок 9.26. Внешний вид панели цвета и соответствующего меню для PhotoShop (а, в) и ImageReady (б, г)

Диалоговое окно команды Optimize

Рисунок 10.8. Диалоговое окно команды Optimize Animation... (Оптимизировать анимацию...)

Установить флажок Bounding Box (Рамка), если необходимо обрезать каждый кадр по границам области, которая меняется в предыдущем кадре. Установить флажок Redundant Pixel Removal (Перемещение лишних пикселов), если необходимо сделать прозрачными все пикселы в кадре, которые не меняются в предыдущем кадре.

Совет 1

При оптимизации цветов анимированного изображения нужно использовать адаптивную, перцепционную или избирательную палитры.

Диалоговое окно команды Paste Frames ...

Рисунок 10.2. Диалоговое окно команды Paste Frames...

Рассмотрим предложенные методы вставки кадров.

Replace Frames (Заменить кадры). Заменяет выделенные кадры копированными. Если вставлять кадры в то же изображение, добавления новых слоев не происходит или, вернее, свойства каждого существующего слоя заменяются свойствами копированного. Если же вставлять копированные кадры между уже имеющимися, то в изображение будут добавлены новые слои, причем видимыми становятся только вставленные, а имевшиеся до этого скрываются. Paste Over Selection (Вставить поверх выделенных). Добавляет содержимое вставляемых кадров как новые слои. Если вставлять кадры в то же изображение, использование этого метода удваивает количество слоев. Так же, как и в предыдущем методе, «свежевставленные» слои становятся видимыми, старые скрываются. Paste Before Selection (Вставить до выделенных) и Paste After Selection (Вставить после выделенных). Вставляет копированный кадр до или после указанного в качестве принимающего. При вставке кадра между уже имеющимися добавляются новые слои, причем только они становятся видимыми.

Флажок Link Added Layers (Связать добавленные слои) используется при необходимости перемещения вставленных слоев как единого целого.

Для автоматического создания кадров между двумя уже существующими используется специальная команда Tween... (Промежуточные кадры...). Эта команда необходима для придания плавности движению, изменению прозрачности или переходам цвета.

ВНИМАНИЕ. Промежуточные кадры создаются только между смежными. Первый и последний кадры исходной последовательности тоже являются смежными (если рассматривать ее как зацикленную), причем промежуточные кадры добавятся после последнего кадра).

Итак, при выполнении команды Tween... (Промежуточные кадры...) из меню панели анимации или нажатии на кнопку

Диалоговое окно команды Tween ...

Рисунок 10.3. Диалоговое окно команды Tween...

Список Tween With (Промежуточные кадры между) позволяет выбрать, с какими кадрами работать:

Selection (Выделенные) — с выделенными; Next Frame (Следующий кадр) — с текущим и следующим; Previous Frame (Предыдущий кадр) — с предыдущим и текущим.

Количество кадров, которое необходимо добавить, указывается в поле Frames to Add (Добавить кадров).

ВНИМАНИЕ. Чем больше кадров в анимированном изображении, тем больше конечный размер файла.

Вкладка Layers (Слои) предназначена для выбора участвующих в процессе выполнения команды слоев: All Layers (Все слои) либо Selected Layers (Выделенные слои).

Рассмотрим флажки вкладки Parameters (Параметры):

Position (Расположение) изменяет расположение содержимого слоя в добавляемых кадрах; Opacity (Прозрачность) изменяет непрозрачность новых кадров; Effects (Эффекты) изменяет настройки эффектов слоя в новых кадрах.

Нажав на кнопку

Диалоговое окно Set Loop Count

Рисунок 10.4. Диалоговое окно Set Loop Count

Сколько времени кадр будет находиться на экране, определяет задержка. Выпадающее меню появляется при нажатии на кнопку

Использование слоев для редактирования кадров

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

Все изменения параметров слоев можно разделить на присущие отдельным кадрам (локальные) и глобальные.

Меню установки времени задержки

Рисунок 10.5. Меню установки времени задержки (а) и диалоговое окно Set Frame Delay (б)

ВНИМАНИЕ. Для уточнения времени задержки необходимо просматривать анимированное изображение в браузере.

Метод удаления фона

Метод удаления фона применяется в том случае, когда анимированное изобра жение содержит один перемещающийся объект. Меню метода появляется npi щелчке на кадре правой кнопкой мыши. Кадр может находиться в одном из тре: состояний в зависимости от того, какой флажок установлен: Automatic (Автома тическое определение), Restore to Background (Восстановить фон) или Do Not Dispos (Не удалять) (Рисунок 10.7).

Набор кадров с прозрачным фоном

Рисунок 10.7. Набор кадров с прозрачным фоном. Вид анимации при установке флажка Restore to Background (а) и при установке флажка Do Not Dispose (б)

ВНИМАНИЕ. При использовании параметра оптимизации Redundant Pixel Removal (Перемещение лишних пикселов) необходима установка флажка Automatic (Автоматическое определение).

Оптимизация анимированных изображений

Анимированные изображения поддерживаются только форматом GIF, поэтому их можно оптимизировать так же, как и неанимированные файлы того же формата.

ВНИМАНИЕ. Форматы JPEG и PNG не поддерживают анимацию. В случае сохранения анимированного изображения в одном из этих форматов браузер отобразит только первый кадр.

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

Выполнить команду Optimize Animation... (Оптимизировать анимацию...) из меню панели анимации (Рисунок 10.8).

Работа с кадрами

Добавить кадры можно двумя способами.

Открыть многослойное изображение и преобразовать его в последовательность кадров. Для этого нужно выполнить следующие команды: File > Open (Файл > Открыть) и выбрать нужный PSD-файл; Make Frames From Layers (Сделать кадры из слоев) в меню палитры анимации. Создать последовательность кадров из набора файлов. Предназначенные для этого изображения должны иметь одинаковый размер, одинаковый формат и храниться в одной папке. Для удобства можно присвоить им названия, соответствующие порядку отображения кадров. Команда, соответствующая этому способу: File > Import > Import Folder As Frames (Файл > Импорт > Импортировать папку как кадры).

Для создания кадра можно либо воспользоваться кнопкой

Сохранение анимированных изображений

Сохранить анимированные изображения можно в виде последовательности кадров в графическом формате GIF либо в формате QuickTime. Чтобы сохранить анимацию в формате GIF, необходимо оптимизировать ее, выполнив команду Optimize Animation... (Оптимизировать анимацию...) из меню панели анимации и сохранить файл с помощью команды File > Save... (Файл > Сохранить...).

Для сохранения анимации в формате QuickTime нужно выполнить команду File > Export Original... (Файл > Экспорт оригинала...) и выбрать из выпадающего меню формат QuickTime.

Создание анимированных изображений

Создание анимированных изображений

Работа с кадрами Использование слоев для редактирования кадров Метод удаления фона Оптимизация анимированных изображений Сохранение анимированных изображений Что нового мы узнали?

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

Создание анимации, работа с кадрами и их обработка, просмотр и оптимизация анимированных изображений — вот круг вопросов, рассматриваемых в этом уроке.

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

Внешний вид панели анимации (а) и соответствующее меню (б)

Рисунок 10.1. Внешний вид панели анимации (а) и соответствующее меню (б)

Изменить размер миниатюр кадров можно с помощью команды Palette Options... (Настройки панели...) из меню панели анимации.

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

Внешний вид панели слоев (а) и соответствующее меню (б)

Рисунок 10.6. Внешний вид панели слоев (а) и соответствующее меню (б)

Локальные изменения затрагивают только кадры, выделенные на панели анимации. При этом к соответствующим слоям можно применить команды и настройки панели слоев (прозрачность, режим наложения, видимость, расположение и эффекты).

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

Новый слой становится видимым во всех кадрах. Чтобы скрыть слой в отдельном кадре, необходимо выделить кадр на панели анимации и воспользоваться соответствующей командой панели слоев.

Для автоматического добавления слоя в каждый новый кадр в меню панели анимации есть команда Add Layer to New Frames (Добавить слой в новые кадры), работающая по принципу флажка. В результате выполнения этой команды появляется новый слой, который становится видимым в новом кадре и скрывается в остальных. Эта команда позволяет сэкономить время в том случае, когда необходимо добавить новый видимый элемент в каждый кадр.

Для каждого кадра анимированного изображения создается свой «сложносочиненный» слой, соответствующий содержимому всех слоев кадра. Исходные слои кадра скрыты, но находятся в целости и сохранности.

ВНИМАНИЕ. При сохранении анимации как GIF-изображений слои сводятся и их дальнейшее редактирование становится недоступным. Чтобы избежать этого, необходимо сохранение в формате PSD.

Команда Flatten Frames into Layers (Создать из кадров слои) из меню панели ани мации обеспечивает созданиеслоев на основе содержимого каждого кадра.

При использовании команд панели слоев все изменения производятся в теку щем выделенном кадре. Чтобы применить их ко всем кадрам, необходимо вы полнить команду Match Layer Across Frames (Повторить слой во всех кадрах) и меню панели анимации, предварительно выделив слой, содержащий нужный элемент.