Анимированные GIF-изображения уже стали привычным явлением на Web- страницах: собаки виляют хвостом, кошки бегают за мышками и т.д. Все это может производить неизгладимое впечатление. Программы Photoshop и ImageReady позволяют приводить в движение различные графические объекты. Как и десятки лет назад, анимация создается путем использования слоев изображений.
На рис. 1 представлен мой персонаж, который я собираюсь анимировать. Я хочу создать три простых кадра, при смене которых возникала бы иллюзия, что котенок машет лапкой.

Рис. 1. Очень скоро этот котенок научится махать лапкой

Шаг 1. Прежде всего, необходимо создать в Photoshop новое изображение и скопировать в него рисунок котенка. (Если вы хотите следовать описываемым инструкциям, загрузите изображение прямо с этой Web-страницы (кликнуть правой кнопкой мыши, затем"Сохранить рисунок как...")). Скопируйте исходный слой дважды, чтобы получить в результате три слоя с одинаковым содержанием. Картинку нижнего слоя мы изменять не будем. Она будет первым кадром нашего "анимационного ролика". Расположенный посередине слой послужит "переходным" кадром, а верхний слой будет "заключительным" кадром. Если хотите, можете создать любое необходимое вам количество переходных кадров. Чем больше кадров, тем более сглаженным будет анимационный эффект, но тем больше будет размер создаваемого файла. К сожалению, в таком случае анимация может не отображаться на некоторых компьютерах из-за их малой мощности или низкой скорости передачи данных через имеющееся подключение к Internet.

Шаг 2. Перейдите к верхнему слою и измените рисунок так, как он должен выглядеть в последнем кадре. На рис. 2 вы можете видеть, что я сместила лапу в крайнее нижнее положение. Чтобы сделать это, я вырезала изображение лапы, выделив ее предварительно инструментом Lasso, повернула на нужный угол, после чего закрасила кистью малого размера образовавшиеся пустоты.
Далее перейдите к среднему слою. Поскольку это будет совсем короткий анимационный эффект и котенок отодвинет лапу на относительно малое расстояние, одного промежуточного кадра будет достаточно. Если бы лапа сдвигалась еще дальше от исходного положения, имело бы смысл создавать большее количество переходных слоев. Выделите и вырежьте изображение лапы, после чего поверните ее в положение, среднее между положениями в нижнем и верхнем слоях. Вновь воспользуйтесь кистью малого размера, чтобы заполнить образовавшиеся пустоты. Вы должны получить результат, подобный представленному на рис. 3. "Художественная" часть работы практически завершена.

Puc. 2. Котенок машет лапкой.	Рис. 3. Так выглядит промежуточный кадр.

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

Шаг 4. Далее, перейдите в палитру Анимация (Window > Animation или Окно > Анимация). Из меню этой палитры выберите команду Make Frame from Layers (Преобразовать слои в кадры). Это меню можно открыть нажав иконку в правом верхнем углу палитры. В окне Animation вы увидите пять кадров. Щелкните на кнопке воспроизведения, чтобы выполнить предварительный просмотр созданного анимационного эффекта. Из расположенного в нижней части палитры Animation раскрывающегося меню выберите вариант Forever (Всегда) или Other (Другое), в результате чего эффект будет непрерывно повторяться снова и снова. При выборе какого-либо другого варианта эффект будет воспроизведен только один раз. Выбрав вариант Other, вы сможете указать необходимое число повторений. Как правило, десяти повторений оказывается вполне достаточно. Если кадры будут слишком быстро сменять друг друга, можете замедлить этот процесс, воспользовавшись полем Frame Delay (Задержка кадра). На рис. 4 показано, какие настройки я выбрала для создаваемого анимационного эффекта.

Шаг 5. Для представления этого конкретного изображения нет необходимости использовать большое количество различных оттенков, поэтому его вполне можно сохранить в формате GIF.
Воспользуйтесь командой Save for Web (Сохранить для Web и устройств...), чтобы сохранить проделанную работу в виде анимационного файла GIF в папку для изображений. Проверьте полученный результат.

Рис. 4. В данном случае создана последовательность из пяти кадров

© Смирнов Н.В. 2005 г.