Графика и дизайн -> Photoshop -> Photoshop для подготовки WEB-графики

Photoshop для подготовки WEB-графики

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

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

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

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

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

а

б

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

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

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

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

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

1. Открыть многослойное изображение и преобразовать его в последовательность кадров. Для этого нужно выполнить следующие команды:
   • File > Open (Файл > Открыть) и выбрать нужный PSD-файл;
   • Make Frames From Layers (Сделать кадры из слоев) в меню палитры анимации.
2. Создать последовательность кадров из набора файлов. Предназначенные для этого изображения должны иметь одинаковый размер, одинаковый формат и храниться в одной папке. Для удобства можно присвоить им названия, соответствующие порядку отображения кадров. Команда, соответствующая этому способу: 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...

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

1. Replace Frames (Заменить кадры). Заменяет выделенные кадры копированными. Если вставлять кадры в то же изображение, добавления новых слоев не происходит или, вернее, свойства каждого существующего слоя заменяются свойствами копированного. Если же вставлять копированные кадры между уже имеющимися, то в изображение будут добавлены новые слои, причем видимыми становятся только вставленные, а имевшиеся до этого скрываются.
2. Paste Over Selection (Вставить поверх выделенных). Добавляет содержимое вставляемых кадров как новые слои. Если вставлять кадры в то же изображение, использование этого метода удваивает количество слоев. Так же, как и в предыдущем методе, «свежевставленные» слои становятся видимыми, старые скрываются.
3. 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 (б)

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

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

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

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

   

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

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

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

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

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

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

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

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

[ Назад | Содержание | Дальше ]