Прийоми створення анімації в image ready

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

Мета уроку

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

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

Вид уроку: практична робота.

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

Використовувані матеріали:

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

Найпростіше в програмі ImageReady, реалізується анімація з заздалегідь підготовлених файлів з фазами руху.

Вправа 1. Політ метелика

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

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

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

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

Відключити (рис.6) (показує видимість шару) в шарі 1, для того щоб побачити, що вийшло в шарі 2 (рис.7).

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

Натисніть на кнопці Jump to ImageReady (перейти в ImageReady) (рис.9).

Відкриється програма ImageReady і файл завантажиться автоматично.

Тепер відкрийте або знайдіть на екрані панель анімації. Якщо її не видно спочатку, її можна відкрити за допомогою меню Window (Вікно)> Show Animation (Показати панель анімації) (рис.10).

На панелі анімації є трикутна кнопка справа вгорі. В меню команд палітри Animation вибираємо команду Make Frames From Layers, що дозволяє з кожного окремого шару зображення створити свій кадр (рис.11).

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

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

Виконуючи команду File (Файл) - Save (Зберегти), зберігаємо файл у форматі Photoshop для продовження роботи з шарами зображення. Якщо робота завершена і не потрібно збереження шарів, то по команді File (Файл) - Save Optimized (Зберегти оптимізоване як ...) зберігаємо GIF-файл для Web-сторінки, при цьому використовуються параметри оптимізації за умовчанням. Оцінити результат оптимізації можна за допомогою виду 2-Up, який показує поточна й оптимізоване зображення.

Можливість автоматичного створення проміжних кадрів анімації (tweening) є дуже корисною і може бути застосована як до графічних, так і текстовим зображенням.

Вправа 2. розлітаються текст

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

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

Наберіть першу букву. Тепер повторіть цей крок так, щоб кожна буква слова виявилася на окремому шарі (рис.17).

Натисніть на кнопці Jump to ImageReady (перейти в ImageReady) (рис.18).

Відкриється програма ImageReady і файл завантажиться автоматично. Тепер відкрийте або знайдіть на екрані панель анімації. Якщо її не видно спочатку, її можна відкрити за допомогою меню Window (Вікно)> Show Animation (Показати Animation).

У нижній частині цієї панелі, клікніть на кнопці New Frame (Новий кадр), щоб зробити копію поточного кадру (рис.19).

Отримаємо два однакових кадру на панелі анімації (рис.20).

На панелі шарів клікніть на шарі, з буквою Ш (рис.21).

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

Повторіть кроки для решти букв. У палітрі анімації, (перший кадр повинен бути просто чорним) поміняйте кадри місцями, для цього треба перенести перший кадр на другий кадр. 2-й кадр тепер чорний (рис.24).

Натисніть на кнопці Tween (рис.25) (генерація проміжних кадрів), яка розташована в нижній частині панелі анімації. Відкриється вікно параметрів. Введіть наступні значення:

Tween With: Proveons Frame

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

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

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

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

Вправа 3. Морфинг

Морфинг - це процес, при якому один об'єкт плавно змінюється (претекает) в інший.

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

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

Зараз панель шарів виглядає так (мал.31).

Видаліть перший шар в кошик, панель шарів виглядає так (мал.32).

Тепер відкрийте або знайдіть на екрані панель анімації. Якщо її не видно спочатку, її можна відкрити за допомогою меню Window (вікно)> Show Animation (показати панель анімації) (рис.33).

На панелі анімації є трикутна кнопка справа вгорі. В меню команд палітри Animation вибираємо команду Make Frames From Layers, що дозволяє з кожного окремого шару зображення створити свій кадр (рис.34).

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

На панелі анімації є трикутна кнопка справа вгорі. Натисніть на цій кнопці і виберіть в меню пункт Tween. або клікніть на кнопці (генерація проміжних кадрів). Відкриється вікно параметрів (рис.36).

Натисніть OK, і програма сама додасть нові кадри (мал.37).

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