Приемы создания анимации в Image Ready

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

Цели урока

• Обучающая: в рамках данного урока учащемуся необходимо освоить приемы создания анимации из заранее подготовленных файлов с фазами движения, создание промежуточных кадров анимации, сохранение GIF-файла для Web-страницы.
• Развивающая: умение оперировать новой терминологией, умение сравнивать и обобщать.
• Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.

Тип урока: урок изучения нового материала.

Вид урока: практическая работа.

Методы: объяснительно-иллюстративный, репродуктивный.

Используемые материалы:

• класс, оборудованный ПК;
• PhotoShop не ниже версии 5.5;
• проектор;
• файлы изображений.

Ход урока

Проще всего в программе ImageReady, реализуется анимация из заранее подготовленных файлов с фазами движения.

Упражнение 1. Полет бабочки

Запустите Photoshop и создайте новый файл размером 100 x 100 пикселей. Залейте фон зеленым цветом. Вставьте в этот файл, на отдельный слой изображение бабочки (рис.1).

Рис. 1

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

Рис. 2

Рис. 3

Продублируйте слой 1 (рис.4).

Рис. 4

Сожмем изображение бабочки по горизонтали. Edit (Редактирование) > Free Transform (Произвольная трансформация). Изменим размер изображения по ширине, заменив величину W=100% на 80% (рис.5)

Рис. 5

Отключить (рис.6) (показывает видимость слоя) в слое 1, для того чтобы увидеть, что получилось в слое 2 (рис.7).

Рис. 7

Повторите шаги для 3-х предыдущих действий, выполнив произвольную трансформацию по ширине на 60%, 40% и 20% используя направляющую, как ось симметрии. Получим 6 слоев (рис.8).

Рис. 8

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.9).

Рис. 9

Откроется приложение ImageReady и файл загрузится автоматически.

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать панель анимации) (рис.10).

Рис. 10

На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.11).

Рис. 11

Теперь у нас есть шесть кадров (рис.12).

Рис. 12

Теперь можно нажать кнопку play (рис.13) и проиграть анимацию (рис.14) .

Выполняя команду File (Файл) – Save (Сохранить), сохраняем файл в формате Photoshop для продолжения работы со слоями изображения. Если работа завершена и не требуется сохранения слоев, то по команде File (Файл) - Save Optimized (Сохранить оптимизированное как…) сохраняем GIF-файл для Web-страницы, при этом используются параметры оптимизации по умолчанию. Оценить результат оптимизации можно с помощью вида 2-Up, который показывает исходное и оптимизированное изображения.

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

Упражнение 2. Разлетающийся текст

Запустите Photoshop и создайте новый файл размером 300 X 150 пикселей. Залейте фон черным цветом. В нижней части панели слоев кликните на иконке New Layer (Новый слой) (рис.15).

Рис. 15

Выберите цвет для текста и возьмите инструмент Type Tool (Набор текста) (рис.16).

Рис. 16

Наберите первую букву. Теперь повторите этот шаг так, чтобы каждая буква слова оказалась на отдельном слое (рис.17).

Рис. 17

Кликните на кнопке Jump to ImageReady (перейти в ImageReady) (рис.18).

Рис. 18

Откроется приложение ImageReady и файл загрузится автоматически. Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (Окно) > Show Animation (Показать Animation).

В нижней части этой панели, кликните на кнопке New Frame (Новый кадр), чтобы сделать копию текущего кадра (рис.19).

Рис. 19

Получим два одинаковых кадра на панели анимации (рис.20).

Рис. 20

На панели слоев кликните на слое, с буквой Ш (рис.21).

Рис. 21

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

Рис. 23

Повторите шаги для остальных букв. В палитре анимации, (первый кадр должен быть просто черным) поменяйте кадры местами, для этого надо перенести первый кадр на второй кадр. 2-й кадр теперь черный (рис.24).

Рис. 24

Кликните на кнопке Tween (рис.25) (генерация промежуточных кадров), которая расположена в нижней части панели анимации. Откроется окно параметров. Введите следующие значения:

Tween With: Proveons Frame

Frames to: 5

Layers: All Layers

Parametrs: все галочки

Панель анимации теперь должна содержать 7 кадров (6 с текстом +1 черный) (рис.26).

Рис. 26

Установите небольшую паузу (2 секунды) для первого кадра, чтобы текст можно было прочитать (рис.27).

Рис. 27

Теперь можно нажать кнопку play и проиграть анимацию (рис.28).

Рис. 28

Упражнение 3. Морфинг

Морфинг - это процесс, при котором один объект плавно меняется (претекает) в другой.

Загрузите ImageReady. С помощью меню File (файл) > New (новый) создайте новый файл с нужными размерами и вставьте в этот файл, на отдельный слой изображение лягушки (рис.29).

Рис. 29

На другой слой вставьте изображение замка, которое будет постепенно появляться (рис.30).

Рис. 30

Сейчас панель слоев выглядит так (рис.31).

Рис. 31

Удалите первый слой в корзину, панель слоев выглядит так (рис.32).

Рис. 32

Теперь откройте или найдите на экране панель анимации. Если она не видна изначально, её можно открыть с помощью меню Window (окно) > Show Animation (показать панель анимации) (рис.33).

Рис. 33

На панели анимации есть треугольная кнопка справа вверху. В меню команд палитры Animation выбираем команду Make Frames From Layers, что позволяет из каждого отдельного слоя изображения создать свой кадр (рис.34).

Рис. 34

Теперь у нас есть два кадра (рис.35).

Рис. 35

На панели анимации есть треугольная кнопка справа вверху. Кликните на этой кнопке и выберите в меню пункт Tween... или кликните на кнопке (генерация промежуточных кадров). Откроется окно параметров (рис.36).

Рис. 36

Нажмите OK, и программа сама добавит новые кадры (рис.37).

Рис. 37

Теперь можно нажать кнопку play и проиграть анимацию (рис.38).

Рис. 38

 Литература

1. Панкратова Т. Photoshop 6. Учебный курс — СПб.: Издательство "Питер", 2001.
2. Эффективная работа с Photoshop 5.5 — СПб.: Издательство "Питер", 2000.
3. Бурлаков М. Photoshop 6, ImageReady 3. Справочник. — СПб. Издательство "Питер", 2001.
4. Стразницкас М. Photoshop 5.5 для подготовки Web-графики. Учебный курс — СПб.: Издательство "Питер", 2000. — 480 с.: илл.