Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

Ролловер, инициирующий анимацию

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

Рис. 23.153. Создание новой миниатюры ролловера (стиль button-up заменен на button-down)

Рис. 23.154. Добавление кадров в анимационную последовательность

Рис. 23.155. Выделение миниатюры ролловера в состоянии Normal

Рис. 23.156. Первый кадр

1. На палитре Rollover (Ролловер) создайте новую миниатюру для выделенного ломтика изображения, желательно в состоянии Over (Над) (как это сделать, написано в разделе «Создание ролловера для ломтика изображения») - см. рис. 23.153.
2. Перетащите вкладку Animation (Анимация) и расположите ее отдельно от других палитр.
3. Выделите миниатюру нового ролловера на палитре Rollover (но не состояние Normal (Нормальный)), щелкните по палитре Animation и создайте кадры и события анимации (см. раздел «Перемещение элемента изображения с помощью анимации») - рис. 23.154.
4. Щелкните по миниатюре ролловера в состоянии Normal (рис. 23.155). Все кадры, за исключением первого, временно исчезнут с палитры Animation (рис. 23.156).
5. Сохраните файл и просмотрите его с помощью команды File > Preview in [browser] (Файл > Предварительный просмотр в [браузер]).

Создание анимации с искажением текста

Новая функция искажения текста, которая позволяет применить 14 различных эффектов искажения, упрощает создание анимации текста.

1. Откройте или создайте изображение, содержащее фоновый слой и прозрачный слой с редактируемым текстом.
2. В палитре Layers (Слои) выберите текстовый слой (рис. 23.157).
3. Откройте палитру Animation (Анимация), выделите первый кадр, а затем щелкните по кнопке Duplicate current frame (Дублировать текущий кадр).
4. На панели опций инструмента Туре (Текст) щелкните по кнопке Warp (Деформировать) - см. рис. 23.158.
5. В диалоговом окне Warp Text (Деформировать текст) произведите необходимые настройки.

Из всплывающего меню Style (Стиль) выберите стиль деформации (рис. 23.159). Включите опцию Horizontal (Горизонтально) или Vertical (Вертикально), чтобы указать направление искажения текста. Затем с помощью ползунка или полей Bend (Изгиб), Horizontal Distortion (Искажение по горизонтали) и Vertical Distortion (Искажение по вертикали) установите необходимые значения для получения соответствующего эффекта. В главном окне документа можно увидеть результат.

6. Щелкните по кнопке ОК (рис. 23.160).

Рис. 23.157. Выделение текстового слоя на палитре Layers

Рис. 23.158. Кнопка Warp на панели опций инструмента Туре

Рис. 23.159. Установка значений параметров Style и Bend в диалоговом окне Warp Text

Рис. 23.160. Кадры анимации искажения текста

7. В текущем кадре на палитре Animation будет отображен деформированный текст. Не снимая выделения с кадра, на этой же палитре щелкните по кнопке Tween (Промежуточные кадры). Поставьте переключатель Layers (Слои) в положение All Layers (Все слои), введите соответствующее число в поле Frame to Add (Добавить кадры) и щелкните по кнопке ОК.
8. Выберите время задержки для кадров и щелкните по кнопке Play (Проиграть) на палитре Animation, чтобы начать воспроизведение.

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

Удаление или корректировка искаженного текста

1. Выберите слой искаженного текста.
2. На панели опций инструмента Туре (Текст) щелкните по кнопке Warp (Деформировать).
3. Для того чтобы удалить эффект деформации текста, выберите во всплывающем меню Style (Стиль) пункт None (Нет).

Если вы хотите скорректировать искажение, обусловленное упомянутым эффектом, выберите другой вариант из меню Style ли6o примените другое направление искривления или задайте другие значения параметров Bend (Изгиб), Horizontal Distorsion (Искажение по горизонтали) или Vertical Distorsion (Искажение по вертикали).

Также можно на палитре Animation выделить какой-либо кадр и по-другому исказить текст только в этом кадре.

Сохранение GIF-анимации

Если выполнить команду File > Save (Файл > Сохранить), то файл анимации будет сохранен в формате Photoshop; текущие настройки формата GIF на палитре Optimize (Оптимизация) будут также сохранены вместе с файлом. Выберите варианты Perceptual (Учитывающий восприятие), Selective (Селективный) или Adaptive (Адаптивный) в этой палитре, а также метод размытия, который поможет сгладить переходы от одного кадра к другому. Команда Save (Сохранить) никак не повлияет на палитру Layers (Слои) (сравните с командой Save Optimized (Сохранить с оптимизацией), о которой рассказывается далее) - см. рис. 23.161. Сохраненный файл можно будет в дальнейшем редактировать.

Если воспользоваться командой File > Save Optimized (Файл > Сохранить с оптимизацией), которой соответствует комбинация клавиш Ctrl+Option+S, то автоматически устанавливается формат GIF, а не Photoshop. За исключением одного случая: если в файле содержится ролловер, инициирующий анимацию, автоматически будет установлен формат HTML вместо GIF. Команда Save Optimized существенно влияет на слои. Вместо того, чтобы сохранить отдельные элементы слоя, которые составляют анимацию, команда сопоставляет каждый слой отдельному кадру анимационной последовательности (рис. 23.162). Посмотрите, какие изменения произойдут на палитре Layers (Слои) после того, как вы снова откроете файл, сохраненный командой Save Optimized (Сохранить с оптимизацией). Подробнее об этой команде рассказано в разделе «Сохранение оптимизированного файла в ImageReady».

Рис. 23.161. Пока файл остается в формате Photoshop, каждый элемент анимации находится на отдельном слое

Рис. 23.162. Сопоставление слоев кадрам анимации в результате использования команды Save Optimized

Рис. 23.163. Опция Optimize By в диалоговом окне Optimize Animation

Открытие анимации в формате GIF

Единственное видимое преимущество использования формата GIF - это возможность применения или редактирования настроек оптимизации файла.

1. Выполните команду File > Open (Файл > Открыть) либо нажмите комбинацию клавиш Ctrl+O.
2. Найдите название файла с расширением .gif и щелкните по нему.
3. Щелкните по кнопке Open (Открыть). Кадры анимационной последовательности при этом будут сохранены. Однако на палитре Layers (Слои) теперь станет отображаться последовательность слоев: по одному слою для каждого кадра. Отдельные элементы слоя теперь нельзя редактировать независимо от других кадров!

Оптимизация анимации

1. В меню палитры Optimize (Оптимизация) воспользуйтесь командой Optimize Animation (Оптимизировать анимацию).
2. В группе параметров Optimize By (Оптимизировать с помощью) установите флажок Bounding Box (Габаритная рамка), чтобы сохранить первоначальный кадр, а также только те области, которые изменяются при переходе от одного кадра к другому (рис. 23.163). В результате уменьшится размер файла, но в то же время не все программы-редакторы, воспринимающие формат GIF, смогут работать с данным файлом.

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

Ни одна из этих опций не изменит фактического вида анимации, все изменения происходят «за сценой».