Создание анимационного gif-файла

Чтобы добавить интересную деталь к web-странице, вы анимируете логотип Museo Arte, создав впечатление, будто он двигается в левом верхнем углу. Вы ани­мируете текст, используя совместно палитры Animation (Анимация) и Layers (Слои) и продолжая работать в области web Design (web-дизайн) (чтобы пере­ключиться на рабочую область web Design (web-дизайн), выберите команду меню Window ♦ Workspace ♦ web Design (Окно ♦ Рабочая область ♦ web-дизайн)). 1 На палитре Layers (Слои) щелкните на значке треугольника для группы слоев Logo Animation, чтобы отобразить ее содержимое. Группа состоит из трех компо­нент: букв А и М, и текста Museo Arte, которые размещены на отдельных слоях. В начале создаваемой анимации на экране появятся две буквы, которые будут пе­ремещаться в заданную позицию. Когда буквы займут нужную позицию, они нач­нут светиться, а на экране появится заголовок Museo Arte.

2 Выберите в меню команду Window ♦ Animation (Окно ♦ Анимация), чтобы отоб­разить палитру Animation (Анимация) в левом нижнем углу окна изображения-Расширьте палитру Animation (Анимация), перетащив ее нижний правый угол, чтобы с пользой использовать доступное по горизонтали пространство рабо­чей области.

(Необязательный шаг.) Палитру Animation (Анимация) можно придвинуть к окну изображения так, чтобы расположить элементы рабочей области ближе друг к другу

3 На палитре Animation (Анимация) щелкните мышью на кнопке Duplicates selected frame (Создать дубли­кат выделенного кадра). На палитре Animation (Анимация) появится новый кадр, созданный на ос­нове предыдущего кадра.

4 На палитре Layers (Слои) выделите слой М.

5 Выберите инструмент Move (Перемещение) на панели инструментов. Перетащите изображение буквы М в левую часть окна изображения, удерживая нажатой клавишу Shift, чтобы ограничить перемещение горизонталь­ной линией. Нажимайте клавишу (Влево) на клавиатуре, отодвигая букву М влево, до тех пор, пока на экране не останется лишь небольшая часть буквы.

Будьте аккуратны, чтобы не вытащить букву полностью за пределы окна изобра­жения.

6 На палитре Layers (Слои) выделите слой А.

7 В окне изображения, используя инструмент Move (Перемещение), перетащи­те изображение буквы А вертикально вверх - при необходимости нажмите и удерживайте клавишу Shift, чтобы ограничить перемещение вертикальной ли­нией - до тех пор, пока на экране не останется лишь небольшая часть буквы.

Другой способ анимации объектов заключается в изменении их непрозрачности; с течением времени они полностью исчезают.

8 На палитре Layers (Слои) выделите слой Museo Arte. Для параметра Opacity (Непрозрачность) этого слоя установите значение 0%.

9 На палитре Layers (Слои) выделите слой М и уменьшите значение параметра Opacity (Непрозрачность) этого слоя до 10%. Затем выделите слой А и умень­шите значение параметра Opacity (Непрозрачность) этого слоя до 10%.

10 Выберите команду меню File ♦ Save (Файл ♦ Сохранить), чтобы сохранить свою работу.

Создание промежуточных кадров

на основе изменения положения и непрозрачности слоев

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

Для начала необходимо сделать второй кадр исход­ным состоянием анимации.

1 На палитре Animation (Анимация) перетащите кадр 2 влево, на место кадра 1. Кадры в после­довательности будут незамедлительно переи­менованы.

Сейчас вы добавите промежуточные кадры между этими двумя кадрами.

2 Убедитесь, что на палитре Animation (Анимация) выделен кадр 1, и затем щелк­ните на кнопке Tween (Создать промежуточные кадры) в нижней части палитры.

3 В диалоге Tween (Создание промежуточных кадров) установите следующие па­раметры (если они еще не установлены):

• В открывающемся списке Tween With (Начать с) выберите значение Next Frame (Следующий кадр).

• В текстовое поле Frames to Add (Добавить кадров) введите значение 5.

• В группе элементов управления Layers (Слои) диалога установите переключа­тель All Layers (Все слои).

• Убедитесь, что в группе элементов управления Parameters (Атрибуты слоя) ди­алога все флажки установлены.

4 Щелкните на кнопке ОК, чтобы закрыть диалог.

5 Чтобы просмотреть анимацию, щелкните на кнопке Play (Воспроизвести) в нижней части палитры Animation (Анимация). В окне изображения начнется воспроизведение анимации; при воспроизведении анимации могут быть замет­ны рывки, однако в вашем браузере анимация будет воспроизводиться плавно.