Photoshop for WEB

         

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


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

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

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

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

значок

дроплета нужно перетащить с панели оптимизации на рабочий стол.

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

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

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

на панели оптимизации. В результате появляется диалоговое окно Save optimized settings as droplet (Сохранить оптимизированные настройки как дроплет) (рис. 9.35).

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

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

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

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



Что нового мы узнали?


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



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




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

в левом верхнем углу панели.

Меню панели оптимизации (рис. 9.28) появляется при нажатии на кнопку

.

Рис. 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.



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


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

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

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

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

а б

Рис. 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.

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

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


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

а б
Рис. 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).

ПРИМЕЧАНИЕ. Параметр гамма измеряет яркость полутонов, отображаемых монитором. ОС 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 (Настройки действия). После этого станут доступными элементы управления, позволяющие задать некоторые параметры, полезные при автоматизированной обработке изображений.





а



б

Рис. 9.8. Диалоговые окна команд Image > Image Size... в PhotoShop (а) и ImageReady (б)

Из меню Fit Image By (Подогнать рисунок по) выбрать подходящий параметр подгонки: ширину, длину, ширину и длину вместе или процентное соотношение.

Флажок Do Not Enlarge (He увеличивать) позволяет запретить увеличение изображения в том случае, если его текущие габариты меньше установленных в параметрах команды.

Закончить запись действия.

Команда Image > Variables > Define... (Изображение > Переменные > Определить...) используется при создании нескольких изображений на основе одного шаблона (рис. 9.9). Переменные определяют динамические элементы шаблона. Тип переменной обусловливает тип данных, которые должны меняться. Типы могут быть следующими:

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



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

текстовые переменные. Позволяют заменить одну текстовую строку другой.



Рис. 9.9. Диалоговое окно команды Image > Variables > Define...



Рис. 9.10, а. Режим замещения пикселов Fit



Рис. 9.10, б. Режим замещения пикселов Fill



Рис. 9.10, в. Режим замещения пикселов As Is

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

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

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

Fill (Залить). Иллюстрация к этому методу представлена на рис. 9.10, б. Изображение с сохранением пропорций помещается в заданные границы по ширине. Флажок Clip to Bounding Box (Обрезать по рамке) позволяет обрезать области изображения, не помещающиеся в рамку;

As Is (Как есть). Иллюстрация к этому методу представлена на рис. 9.10, в. Изображение помещается в заданные границы без изменения размера, лишнее можно обрезать, установив флажок Clip to Bounding Box (Обрезать по рамке);

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



Рис. 9.10, г. Режим замещения пикселов Conform

Команда Image > Variables > Data Set... (Изображение > Переменные > Набор данных...) определяет набор данных, который представляет собой совокупность переменных и связанных данных. Переключение между наборами данных позволяет оперировать различными данными в одном шаблоне (рис. 9.11).

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

Над набором данных производятся следующие действия:

создание набора данных. Для этого предназначена кнопка
;

редактирование набора данных. Данные переменных видимости, характеризует которые значок
слева от названия, можно изменять с помощью переключателей Visible (Видимый) и Invisible (Невидимый). Для переменных замещения пикселов (значок
) с помощью команды Browse... (Поместить. ..) указывается необходимый файл. Для текстовых переменных строка вводится в соответствующее текстовое поле;



сохранение набора данных. Созданный набор сохраняет кнопка
;

переименование набора данных. Введение нового имени в соответствующее текстовое поле вкладки Data Set (Набор данных);

удаление набора данных. Для этого служит кнопка
;

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



Рис. 9.11. Диалоговое окно команды Image > Variables > Data Set...

Команда Image > Preview Document (Изображение > Просмотр документа) позволяет посмотреть анимированное изображение, анимированные кнопки или внешний вид в целом.

Подменю Master Palette (Главная палитра) содержит команды работы с заказной палитрой, которая используется для пакетной обработки изображений. Команда Image > Master Palette > Add To Master Palette (Изображение > Главная палитра > Добавить в главную палитру) добавляет в главную палитру всю информацию о цвете текущего изображения.

Команда Image > Master Palette > Build Master Palette (Изображение > Главная палитра > Сделать главную палитру) создает новую таблицу поиска цвета на основе информации, собранной при помощи предыдущей команды. Команда Image » Master Palette > Clear Master Palette (Изображение > Главная палитра > Очистить главную палитру) позволяет не включать цвета из предыдущих изображений в новую палитру.

Команда Image > Master Palette > Save Master Palette (Изображение > Главная палитра > Сохранить главную палитру) предназначена для того, чтобы назвать файл главной палитры и выбрать место его размещения. По умолчанию, такой файл имеет расширение *.act (Adobe Color Table).

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



a б
Рис. 9.12. Внешний вид меню Layer для PhotoShop (a) и ImageReady (б)

4. Меню Layer (Слой)

Команда Layer > Layer Options... (Слой > Настройки слоя...) ImageReady по принципу действия напоминает команду Layer > Layer Properties... (Слой > Свойства слоя...) PhotoShop (рис. 9.13, а и б),

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



Рис. 9.13, а. Диалоговое окно команды Layer > Layer Properties... из PhotoShop



Рис. 9.13,б. Диалоговое окно команды Layer > Layer Options... из ImageReady

Команда Layer > New Layer Based Image Map Area (Слой > Новый слой, основанный на карте-изображении) позволяет создать слой на основе карты-изображения. Подробнее работа этой команды рассмотрена ниже (см. Карты-изображения в ImageReady).

Команда Layer > Match... (Слой > Подогнать...) позволяет применить текущие настройки слоя к слоям, входящим в другие элементы (рис. 9.14).



Рис. 9.14. Диалоговое окно команды Layer > Match...

В этой команде требуется указать кадры для подгонки (текущая анимация, текущий фрагмент нарезки, состояние карты-изображения или анимированной кнопки) и что, собственно, «подгонять»: расположение, видимость или стиль слоя.

В группу команд монтажа, выравнивания и распределения внесена команда Layer > Set Layer Position... (Слой > Установить расположение слоя...), диалоговое окно которой показано на рис. 9.15.

Эта команда определяет смещение слоя по горизонтали и вертикали.

Команда Layer > Lock All Layers In Set... (Слой > Закрепить все слои в наборе...) фиксирует следующие параметры в наборе слоев: прозрачность, изображение, расположение или все параметры сразу (рис. 9.16).



Рис. 9.15. Диалоговое окно команды Layer > Set Layer Position...



Рис. 9.16. Диалоговое окно команды Layer > Lock All Layers In Set...



Рис. 9.17. Внешний вид меню Slices (Нарезка)



5. Меню Slices (Нарезка)

Фрагменты нарезки принадлежат к одному из трех типов:

созданные автоматически;

созданные пользователем;

созданные на основе слоя.

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

Команда Slices > Create Slices from Guides (Нарезка > Разрезать по направляющим) создает фрагменты нарезки из фрагментов изображения, заключенных между направляющими.

ВНИМАНИЕ. При разрезании по направляющим все уже существующие фрагменты удаляются.

Команда Slices > Duplicate Slice (Нарезка > Повторить фрагмент нарезки) делает копию фрагмента нарезки.

Команда Slices > Combine Slices (Нарезка > Объединить фрагменты нарезки) соединяет несколько фрагментов в один. Объединенный фрагмент становится фрагментом пользовательского типа, хотя входить в него может и созданный автоматически.

ВНИМАНИЕ. Нельзя объединить фрагменты нарезки, основанные на слое.

Команда Slices > Divide Slice... ( Нарезка > Разделить фрагменты нарезки...) делит каждый фрагмент нарезки на заданное количество частей, каждая из которых в свою очередь становится полноценным фрагментом (рис. 9.18).



Рис. 9.18. Диалоговое окно команды Slices > Divide Slice...

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

Команды Slices > Delete Slice (Нарезка > Удалить фрагмент нарезки) и Slices > Delete All (Нарезка > Удалить все) предназначены для удаления соответствующих элементов.

Группу команд для связывания и разъединения образуют Slices > Link Slices (Нарезка > Связать фрагменты нарезки), Slices > Unlink Slices (Нарезка > Разъединить фрагменты нарезки), Slices > Unlink Set (Нарезка > Разъединить набор) и Slices > Unlink All (Нарезка > Разъединить все).

Команда Slices > Promote to User Slices (Нарезка > Перевести в пользовательские фрагменты нарезки) предназначена для того, чтобы присвоить фрагментам, созданным автоматически или основанных на слое, статус созданных пользователем. Это необходимо для выполнения команд из следующих подменю: Slices > Arrange (Нарезка > Монтаж), Slices > Align (Нарезка > Выравнивание) и Slices > Distribute (Нарезка > Распределение).



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

Команда Slices > Save Slice Selection... (Нарезка > Сохранить выделение фрагмента нарезки...) позволяет назвать выделенные фрагменты. Подменю Slices > Load Slice Selection (Нарезка > Загрузить выделение фрагмента нарезки) и Slices > Delete Slice Selection (Нарезка > Удалить выделение фрагмента нарезки) соответственно загружают или удаляют сохраненное ранее выделение.

6. Меню Select (Выделение)



а



б

Рис. 9.19. Внешний вид меню Select для PhotoShop (а) и ImageReady (б)

Команды Select > Create Selection from Slices (Выделение > Создать выделение из фрагментов нарезки) и Select > Create Slice from Selection (Выделение > Создать фрагмент нарезки из выделения) используются для преобразования выделения в фрагмент нарезки и наоборот.

Команда Select > Create Image Map from Selection... (Выделение > Создать карту-изображение из выделения) позволяет создать карту-изображение на основе выделенной области (рис. 9.20).

При выборе многоугольной формы карты-изображения параметр Quality (Качество) определяет степень приближения многоугольника к выделенной области. Подробнее этот вопрос рассмотрен в уроке «Карты-изображения в ImageReady».



Рис. 9.20. Диалоговое окно команды Select > Create Image Map from Selection...

Подменю Select > Delete Channel (Выделение > Удалить канал) позволяет удалить ненужный канал, имя которого выбирается из списка.

7. Меню Filter (Фильтр).



а



б

Рис. 9.21. Внешний вид меню Filter для PhotoShop (а) и ImageReady (б)

Команда Filter > Last Filter (Фильтр > Последний фильтр) в ImageReady разделилась на две: Filter > Apply Last Filter (Фильтр > Применить последний фильтр), обеспечивающую повторение предыдущего фильтра с теми же параметрами, и Filter > Last Filter... (Фильтр > Последний фильтр...), вызывающую повторно диалоговое окно последнего фильтра.



Из рис. 9. 21 видно, каких групп фильтров и команд не хватает. Состав некоторых оставшихся групп фильтров сокращен. Посмотрим, что осталось.

В группе Blur (Размытие): Gaussian Blur... (Размытие по Гауссу...), Radial Blur... (Радиальное размытие...) и Smart Blur... (Интеллектуальное размытие...).

В группе Pixelate (Оформление): Color Halftone... (Цветовые полутона...), Crystallize... (Кристаллизация...), Mezzotint... (Меццо-тинто...) и Pointillize... (Пуантилизм...).

В группе Sharpen (Резкость): Unsharp Mask... (Контурная резкость...).... В группе Stylize (Стилизация): Extrude... (Тиснение...), Glowing Edges... (Свечение краев...), Solarize... (Соляризация...), Tiles... (Фрагменты...), Wind... (Ветер...).

В группе Other (Другие): Offset... (Смещение...).

Добавился фильтр Filter > Other > Tile Maker... (Фильтр > Другие > Фрагменти-рование...).



Рис. 9.22. Диалоговое окно фильтра Filter > Other > Tile Maker...

а б
Рис. 9.23. Результат работы фильтра Tile Maker...: использован переключатель Blend Edges, значение Width взято равным 20%, флажок Resize Tile to Fill Image установлен (a); использован переключатель Kaleidoscoge Tile (б)

Фильтр Tile Maker (рис. 9.22 и 9.23) облегчает подготовку фонового рисунка для web-страниц. Он позволяет стереть границы рисунка для создания бесшовной текстуры или применить калейдоскопический эффект для создания абстрактного фона.

Для использования фильтра необходимо выполнить следующие действия:

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

Выполнить команду Filter > Other > Tile Maker... (Фильтр > Другие > Фрагментирование...).

Выбрать Blend Edges (Стереть границы), если нужно сделать из выделения фрагмент фона. В текстовое поле Width (Ширина) требуется ввести ширину стираемой границы в процентах (оптимальным является значение в диапазоне от 5% до 15%). Флажок Resize Tile to Fill Image (Увеличить фрагмент до размера изображения) снимается, если нужно создать фрагмент меньшего размера, чем оригинальное выделение.



Выбрать Kaleidoscope Tile (Калейдоскопический эффект), если нужно создать абстрактный рисунок. В этом случае выделение сместится, повторится по горизонтали и вертикали и границы растушуются.

8. Меню View (Вид).



а



б

Рис. 9.24. Внешний вид меню View для PhotoShop (а) и ImageReady (б)

Подменю View > Preview (Вид > Предварительный просмотр) управляет отображением цветов и позволяет увидеть, как изображение будет выглядеть в ситуациях выбора следующих режимов (рис. 9.24): Browser Dither (Сглаживание в браузере), Uncompensated Color (Некомпенсированные цвета), Standard Windows Color (Стандартные цвета Windows), Standard Macintosh Color (Стандартные цвета Macintosh) и Use Embedded Color Profile (Использовать внедренный цветовой профиль). При переключении режима просмотра само изображение не изменяется.

Команда View > Resize Window to Fit (Вид > Изменить размер окна по изображению) изменяет размер окна, чтобы оно соответствовало размеру изображения.

Команды подменю View > Show (Вид > Показать), помимо основных дополнительных элементов, таких как фрагменты нарезки и границы выделения, отображают специфические дополнительные элементы: карты-изображения, границы текстовых блоков, базовые линии текста и выделение в тексте.

Подменю View > Snap To (Вид > Привязать к), в отличие от подобного подменю PhotoShop, позволяет выполнить привязку только к направляющим и фрагментам нарезки.

Команда View > Create Guides... (Вид > Создать направляющие...) автоматически создает нужное количество направляющих (рис. 9.25).



Рис. 9.25. Диалоговое окно команды View > Create Guides...

На вкладке Horizontal Guides (Горизонтальные направляющие) задается либо количество направляющих, либо расстояние между направляющими в пикселах, либо количество пикселов сверху (в этом случае создается одна направляющая). Те же параметры можно задать для вертикальных направляющих на вкладке Vertical Guides (Вертикальные направляющие). При необходимости используется флажок Clear Existing Guides (Удалить существующие направляющие).


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


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

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

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

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

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

Что нового мы узнали?

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

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

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



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


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

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

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

а б

в г

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

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

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

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



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


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

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

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

Рис. 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 представлены остальные три формата, которые можно оптимизировать. Они не так популярны, как форматы, рассмотренные выше. Причина заключается в том, что они не поддерживаются многими, особенно старыми, браузерами.



а



б



в

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

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


Что нового мы узнали?


Мы познакомились с процессом подготовки анимированных изображений в Adobe ImageReady. Нам стало известно, каким образом можно создать на основе обычного изображения покадровую анимацию и как ее следует сохранять для использования на web-страницах.



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


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

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

а б

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

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

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

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

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

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

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

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

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



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


Метод удаления фона применяется в том случае, когда анимированное изобра жение содержит один перемещающийся объект. Меню метода появляется 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).

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

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

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

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



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


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

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

File > Open (Файл > Открыть) и выбрать нужный PSD-файл;

Make Frames From Layers (Сделать кадры из слоев) в меню палитры анимации.

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

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

на панели анимации, либо выбрать команду New Frame (Новый кадр) из меню этой панели.

ВНИМАНИЕ. Создавать и редактировать кадры необходимо в режиме просмотра Original (Оригинал). В остальных режимах возможности редактирования ограничены.

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

Selects Previous Frame (Предыдущий кадр) ,
Selects Next Frame (Следующий кадр) и
Selects First Frame (Первый кадр) Добавление в выделение как обычно происходит при нажатой кнопке Shift, снять выделение можно щелчком при нажатой кнопке Ctrl. Чтобы выделить все кадры, можно воспользоваться соответствующей командой из меню панели анимации.

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

Удалить кадр из последовательности можно следующими способами:

выполнив команду Delete Frames (Удалить кадры) из меню панели анимации;

щелкнув на кнопке

и подтвердив удаление;


перетащив выделенный кадр на кнопку
.

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

Копирование выполняется с помощью команды Copy Frames (Копировать кадры) из меню панели анимации. После выбора места вставки (выделения принимающего кадра) выполняется команда Paste Frames... (Вставить кадры...). На экране появляется следующее диалоговое окно (рис. 10.2).



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

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

Replace Frames (Заменить кадры). Заменяет выделенные кадры копированными. Если вставлять кадры в то же изображение, добавления новых слоев не происходит или, вернее, свойства каждого существующего слоя заменяются свойствами копированного. Если же вставлять копированные кадры между уже имеющимися, то в изображение будут добавлены новые слои, причем видимыми становятся только вставленные, а имевшиеся до этого скрываются.

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

Paste Before Selection (Вставить до выделенных) и Paste After Selection (Вставить после выделенных). Вставляет копированный кадр до или после указанного в качестве принимающего. При вставке кадра между уже имеющимися добавляются новые слои, причем только они становятся видимыми.

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

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



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

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



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

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

Selection (Выделенные) — с выделенными;

Next Frame (Следующий кадр) — с текущим и следующим;

Previous Frame (Предыдущий кадр) — с предыдущим и текущим.

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

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

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

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

Position (Расположение) изменяет расположение содержимого слоя в добавляемых кадрах;

Opacity (Прозрачность) изменяет непрозрачность новых кадров;

Effects (Эффекты) изменяет настройки эффектов слоя в новых кадрах.

Нажав на кнопку
в нижнем левом углу панели анимации, можно настроить зацикливание. Оно определяет, сколько раз должно просматриваться анимированное изображение. Параметр может принимать следующие значения: Once (Один раз), Forever (Постоянно) или Other... (Другое...). При выборе Other... (Другое. ..) на экране появляется диалоговое окно, в котором нужно указать количество циклов (рис. 10.4).



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

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

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

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


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


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

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



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


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

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

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

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

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

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

Что нового мы узнали?

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

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

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

а

б

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

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

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



Что нового мы узнали?


В этом уроке мы научились работать с картами-изображениями при помощи Adobe ImageReady. Мы узнали, как можно создавать карты-изображения, настраивать и просматривать их.



Карты-изображения в ImageReady


Карты-изображения в ImageReady

Создание карт-изображений

Конвертирование карт-изображений

Просмотр карт-изображений

Выбор типа карты-изображения

Что нового мы узнали?

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

С точки зрения математики карта-изображение — это координаты, которыми определяются ее границы.

При создании ссылок на различные объекты можно использовать не только карты-изображения, но и нарезку (табл. 11.1).

Таблица 11.1. Различия при задании ссылок с помощью карт-изображений и нарезки

Карта-изображение Фрагмент изображения
Экспортируется на web-страницу в одном файле с рисунком Экспортируется на web-страницу как отдельный файл
Возможность создания круглых, многоугольных и прямоугольных ссылок Предполагает только прямоугольные ссылки

ВНИМАНИЕ. Не рекомендуется совмещать карты-изображения с нарезкой, если в последней уже содержатся гиперссылки: они могут игнорироваться некоторыми браузерами.



Конвертирование карт-изображений


Поскольку двигать и выравнивать карты-изображения, созданные на основе слоя, или изменять их размер можно, только редактируя слой, иногда бывает необходимо конвертировать их в «инструментальные». Для этого выбираем нужную карту-изображение инструментом выбора

и выполняем команду Promote Layer Based Image Map Area (Перевести слой, основанный на карте-изображении), которая находится в меню панели карты-изображения.



Просмотр карт-изображений


При выборе карты-изображения инструментом выбора

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

щелчок на кнопке

Toggle Image Maps Visibility (Сделать карты-изображения видимыми) панели инструментов;

команда View > Show > linage Maps (Вид > Показать > Карты-изображения);

команда View > Extras (Вид > Дополнительные элементы). К дополнительным элементам относятся также граница выделения, текстовые блоки, базовые линии текста, выделение текста, разметка фрагментов нарезки и направляющие.

Настроить отображение области карты-изображения на экране позволяет команда Edit > Preferences > Image Maps... (Правка > Установки > Карты-изображения...). Диалоговое окно этой команды представлено на рис. 11.5.

Рис. 11.5. Диалоговое окно команды Edit > Preferences > Image Maps...

Рассмотрим параметры настройки.

Флажок Show Lines Only (Показать только линии) позволяет отображать только линии области и связан с вкладкой Color Adjustment (Регулирование цвета). Флажок Show Bounding Box (Показать рамку) заключает в прямоугольную рамку эллиптическую область.

Меню Line Color (Цвет линий) позволяет выбрать из списка цвет линий области Согласно собственному вкусу.

Бегунок Image Map Overlay (Покрытие карты-изображения) вкладки Color Adjustment (Регулирование цвета) становится доступным при снятом флажке Show Lines Only (Показать только линии). Он регулирует яркость выделенной области карты-Изображения.



Создание карт-изображений


Создать карту-изображение можно двумя способами: с помощью соответствующего инструмента или на основании слоя. Рассмотрим первый способ.

В наше распоряжение предоставлены следующие инструменты:

и
для создания карт-изображений разной формы и выбора. Следить за происходящим помогают три панели (рис. 11.1).

а

б

в

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

а

б

Рис. 11.2. Панель карты-изображения, управляющая позиционированием, размерами, настройками (a) и соответствующее меню (б)

В правой части этой панели (рис. 11.2) указаны текущие координаты и размеры карты-изображения.

Рассмотрим назначение четырех полей, находящихся слева:

Name (Имя). Позволяет задать имя активной области или изменить автоматически присвоенное. При помощи имени программы внедренные в код страницы могут получать доступ к параметрам элементов документа.

URL. Содержит адрес гиперссылки, который может быть абсолютным или относительным.

Target (Цель). Определяет, в каком фрейме будет отображаться карта-изображение. Предполагает либо указание имени фрейма, либо выбор значения параметра из ниспадающего меню. В зависимости от значения параметра файл, на который ссылается карта-изображение, будет открыт браузером следующим образом:

_blank — в новом фрейме;

_self — в том же фрейме, что и текущий документ;

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

_top — документ будет загружен в текущее окно браузера, он заместит собой все имевшиеся в окне фреймы.

Alt (Эквивалент). Указывает браузеру, какой текст выводится на экран при отсутствии рисунка или в случае, когда курсор находится за пределами карты-изображения.

При нажатии кнопки ® в правом верхнем углу этой панели появляется меню управления картами-изображениями (рис. 11.2, б). В нем собраны команды удаления, дублирования, автоматического выравнивания и преобразования активных областей карт-изображений.


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

На рис. 11.3 показана связь карт-изображений с анимированными графическими ссылками.



а



б



в

Рис. 11.3. Панель анимированных графических ссылок (кнопок), отображающая области карты-изображения как возможные состояния ссылки (а), соответствующее меню (б) и контекстное меню, открывающееся при щелчке правой кнопкой на миниатюре карты-изображения (в)

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

Перейдем ко второму способу. В этом случае форма карты-изображения опре деляется содержимым слоя, на основе которого она создается (рис. 11.4). Когда изменяется содержимое, автоматически изменяется и форма.

Если рисунок, на основе которого требуется создать карту-изображение, содержит несколько слоев, их необходимо предварительно соединить, выполнив ко манду Layer > Merge (Слой > Соединить). После этого выбираем слой на панели слоев и выполняем команду Layer > New Layer Based Image Map Area (Слой > Новый слой, основанный на карте-изображении).



Рис. 11.4. Вид панели карты-изображения, основанной на слое

Очевидно, что чем выше параметр качества, тем больше координат нужно запомнить и соответственно больше конечный размер файла.

ВНИМАНИЕ. Для карты-изображения, основанной на слое, команды Duplicate (Дублировать) и Align (Выровнять) становятся недоступными. Чтобы получить доступ к этим командам, нужно конвертировать «слоевую» карту-изображение в «инструментальную». Подробнее процесс конвертирования будет рассмотрен ниже.


Выбор типа карты-изображения


Все карты-изображения по способу использования делятся на две группы: серверного и клиентского типов.

Серверный тип.

Работой карты-изображения серверного типа управляет web-сервер, с которого она загружается. В момент выделения активной области браузер посылает web-серверу координаты указателя, где они будут обработаны программой cgi-bin. В обработку входит поиск координат в файле конфигурации и отсылка URL, связанного с активной областью. Естественно, это может значительно замедлить работу.

При выборе этого типа ImageReady создает в добавление к HTML-файлу отдельный файл карты, основанный на настройках выбранного вами сервера. Серверный тип в свою очередь подразделяется еще на два: NCSA и CERN. Они отличаются друг от друга методом описания карт-изображений.

ВНИМАНИЕ. Карты-изображения серверного типа не работают с изображениями, содержащими многочисленные фрагменты нарезки.

ПРИМЕЧАНИЕ. NCSA — Национальный центр приложений для суперкомпьютеров (США) — один из наиболее известных научных центров в области программирования. В этой организации был создан первый графический браузер — Mosaic. CERN — Европейский центр ядерных исследований. В нем была разработана концепция гипертекста и основы современных стандартов Всемирной паутины.

Клиентский тип.

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

ВНИМАНИЕ. Некоторые устаревшие браузеры могут не справиться с обработкой карты-изобра жения клиентского типа.

Данные карты-изображения, представляющие собой код на языке Java, содержатся в HTML-файле, поэтому обращения к серверу не нужны.

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

Рассмотрим возможности, предоставляемые командой File > Output Settings > Image Maps... (Файл > Выходные настройки > Карты-изображения...) (рис. 11.6).

Рис. 11.6. Внешний вид диалогового окна команды File > Output Settings > Image Maps...

На вкладке Type (Тип) представлены пять возможных комбинаций. В зависимости от ваших желаний и договоренности с провайдером, можно выбрать подходящий вариант.

Вкладка Placement (Расположение) предназначена для указания представления карты-изображения (тег <МАР>) в HTML-файле:

Тор (Верх). Располагает тег <МАР> в начале кода;

Body (Содержимое). Располагает тег <МАР> выше, чем <IMG> (тег включения в web-страницу изображения) для соответствующего фрагмента нарезки;

Bottom (Низ). Описание карты-изображения размещается в конце кода страницы.



Что нового мы узнали?


Мы познакомились с тем, как можно легко и быстро поместить на web-страницу анимированные кнопки, изменяющие свой вид при наведении на них курсора мыши.



Подготовка анимированных кнопок


Подготовка анимированных кнопок

Состояния анимированных кнопок

Работа со слоями

Что нового мы узнали?

Анимированной кнопкой называется область изображения, изменяющая свой вид при выполнении какого-либо действия с помощью мыши. Для определения активной области используется фрагмент нарезки или карта-изображение. Работой с анимированными кнопками управляет соответствующая панель (рис. 12.1).

а

б

Рис. 12.1. Панель анимированных кнопок (а) и соответствующее меню (б)

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



Работа со слоями


Эффекты анимированных кнопок позволяет создать применение команд и настроек панели слоев. При создании анимированных кнопок или изображений некоторые изменения слоя сказываются только на активном состоянии или кадре, а некоторые — на всех.

Слой можно повторить во всех состояниях. Для этого нужно сделать следующее:

на панели слоев выбрать слой, отображение содержимого которого желательно во всех состояниях;

чтобы применить атрибуты слоя выделенного состояния ко всем состояниям текущей анимированной кнопки, надо выполнить команду New Layers Visible in All States/Frames (Новые слои видимы во всех состояниях/кадрах) из меню панели анимированных кнопок.

Команда Create Layer for Each New Frame (Создать слой для каждого нового кадра) позволяет расположить содержимое слоя в каждом кадре.

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

Стиль анимированной кнопки включает в себя ее состояния и эффекты слоя. Если применить такой стиль к слою, то он превратится во фрагмент нарезки, основанный на слое.

Для применения стиля анимированной кнопки к слою необходимо выполнить следующие действия:

выбрать нужный слой на панели слоев;

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

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

, находящуюся в нижней части пане ли стилей, или выполнить команду New Style... (Новый стиль...) из меню панели стилей. При выполнении этой команды появляется диалоговое окно Style Options... (Настройки стиля...), показанное на рис. 12.3.

Рис. 12.3. Диалоговое окно команды Style Options...

Помимо присвоения имени, в этом окне можно установить три флажка, контролирующие включение в стиль эффектов слоя, настроек режима наложения и состояний.



Состояния анимированных кнопок


Состояние анимированной кнопки определяется расположением слоя, его стилями и другими атрибутами (табл. 12.1 и 12.2).

Таблица 12.1. Состояния анимированных кнопок, связанные с выполняемыми пользователем действиями

Состояние Действие пользователя
Over Мышь наведена на изображение, но кнопка мыши не нажата
Down Нажатие кнопки мыши на области. Состояние длится, пока кнопка мыши нажата
Click Щелчок мышью на области анимированной кнопки. Состояние длится до тех пор, пока не будет выполнено другое действие
Out Мышь за пределами активной области изображения
Up Кнопка мыши отпущена

Таблица 12.2. Состояния анимированных кнопок, не связанные с действиями пользователя

Состояние Описание
/Normal Характеризует вид анимированной кнопки при первой загрузке изображения в браузер
Custom Характеризует отличное от стандартных состояние, которое можно создать, используя код JavaScript
.None Сохраняет текущее состояние изображения для дальнейшего его использования в качестве состояния анимированной кнопки. Это состояние на web-странице не отобразится

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

Чтобы создать состояние, нужно выбрать фрагмент или карту-изображение, а затем выполнить одно из следующих действий:

нажать

кнопку, находящуюся в нижней части панели анимированных кнопок;

выполнить команду New Rollover State (Новое состояние) из меню панели ани мированных кнопок.

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

При необходимости изменить состояние можно выполнить команду Rollover State Options... (Настройки состояния...) из меню панели анимированных кнопок (рис. 12.2).




Рис. 12.2. Диалоговое окно команды Rollover State Options...

Состояние можно скопировать и заменить им другое. При этом слои состояния-источника заменят слои состояния-приемника. Скопировать можно кадры анимации и вставить их как состояния (и наоборот — вставить состояния как кадры).

ПРИМЕЧАНИЕ. Команды копирования из меню панели анимации и панели анимированных кнопок используют внутренний буфер обмена, предназначенный исключительно для этих процессов, следовательно, содержимое основного буфера ImageReady остается в целости и сохранности.

Для того чтобы скопировать состояние, нужно выделить его и выполнить команду Copy Rollover State (Копировать состояние) из меню панели анимированных кнопок. Затем необходимо выбрать, какое состояние вы хотите заменить скопированным и выполнить команду Paste Rollover State (Вставить состояние).

Состояние может включать в себя анимацию. Чтобы добавить анимацию, нужно выполнить следующее:

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

с помощью панели анимации создать кадры.

Чтобы удалить одно состояние, можно использовать кнопку
или команду Delete State (Удалить состояние), а для удаления всех состояний применя ется команда Delete Rollover (Удалить анимированную кнопку) из меню панели анимированных кнопок.

Проверить работу анимированной кнопки можно либо непосредственно в ImageReady, либо в браузере. Для просмотра в ImageReady служит кнопка
. Нажатие кнопки приводит к выводу изображения в окне браузера вместе с HTML-кодом, служащим для его помещения на web-страницу. Если для просмотра по умолчанию используется другой браузер, то на кнопке
будет изображен его логотип.