Уроки анімації для початківців, як зробити анімацію, уроки по створенню анімованих аватар.

урок 16

Ефект нескладний, вимагає тільки деякого уваги і терпіння. Не знаю, куди-як його можна застосувати, але за заявками трудящих. Будемо збирати карту Arcanum зі шматочків. В принципі, форма шматків може бути будь-який, тому, може і знайдеться ефекту застосування.

інструментарій

• Adobe Photoshop CS2;
• Adobe ImageReady CS2.

Виглядає цей ефект приблизно так:

Почнемо мабуть.

Створюємо в Photoshop новий документ (нехай 400 × 400). Заливаємо потрібним нам кольором (або текстурою). Я взяв колір зі сторінки цього сайту. Беремо потрібну картинку і завантажуємо її в Photoshop, форматіруем до потрібного розміру. Картинка приблизно в два рази менше документа. У мене - 200 × 200, Рис.1.

Якщо у Вас на документі немає лінійок - відкрийте їх Рис.2 через меню Перегляд. Перевірте одиниці виміру лінійок, потрібно, щоб вони були в пікселях (простіше буде). Зайдіть в меню Редагування -> Установки -> Одиниці виміру та лінійки і виставте потрібне (Рис.3).

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

Робимо активним шар з картинкою-картою (натиснувши на нього) і вибираємо інструмент Прямокутне виділення (Рис.5). Виділяємо на зображенні потрібний шматок, чверть нашої карти (або Вашого малюнка). Заходимо в меню Редагування -> Копіювати (Рис.6). Якщо Ви пам'ятаєте гарячі клавіші, то прекрасно, буде швидше. Ще раз заходимо в той же меню і тиснемо Вставити (Рис.7).

У нас з'явився новий шар з четвертинки карти (Рис.8).

Якщо картинка розбивається на рівні частини можна зайти в меню Виділення -> Виділити знову (Рис.9), з'явиться та сама виділена область, яку ми переміщаємо тим же інструментом (Прямокутне виділення) на наступну частину картинки (Рис.10), натиснувши по виділенню, утримуючи ліву кнопку миші і «тягнучи» контур виділення за курсором.

Повторюємо процес Виділення-Копіювати-Вставити з рештою частинами картинки, отримавши по шару на кожен шматочок (Рис.11). Тепер видалимо вихідну картинку. У нас вийшло п'ять шарів, фон і чотири складових зображення, яке ми «порізали».

Робимо активним Шар 1 і робимо по ньому подвійний клік, відкривши меню Стиль шару (Рис. 12).

У меню, (Рис.13) виставляємо, що нам треба. Мені потрібна тільки тінь під картинками. Що я і зробив. Тепер копіюю цей стиль, натиснувши правою кнопкою миші і вибравши в меню Скопіювати стиль шару (Рис. 14). По черзі Вставити стиль шару з іншими верствами документа (Рис. 15).

Входимо в меню Редагування -> Вільне трансформування (Рис. 16) (або Поворот, наприклад) і трохи повертаємо шматки зображення, як захочеться або треба (Рис. 17).

«Розганяємо» частини картинки по кутах документа (Рис.18) і переходимо в ImageReady, натиснувши відповідну кнопку-іконку.

Тут робимо активним потрібний нам шар (та частина зображення, що почне анімацію) (Рис.19), робимо невидимими три інших шару картинки (але не фону, він як і раніше бачимо, але неактивний) і тиснемо Дублювати кадр. З'явився кадр-дублікат (Рис. 20). Робимо цей кадр активним (натискаємо на нього), переходимо у вікно робочої області і перетягуємо шматочок карти на місце, де йому належить бути.

Виділяємо обидва кадру (утримуючи кнопку ctrl клавіатури) і створюємо проміжні кадри (Рис.21), натиснувши на відповідну іконку Вікна анімації.

У вікні Створення проміжних кадрів виставте параметри, як на Рис. 22 (кількість кадрів може бути будь-яким, але чим більше їх, тим більше «вагу» готової анімації). Проміжні кадри створені. перевіримо:

Зійде.

Робимо активним останній кадр (Рис. 23). Активуємо і робимо активним Шар 2, залишаючи видимість Шаруючи 1 і Фону і невидимість Шарів 3 і 4. Створюємо дублікат останнього кадру, робимо його активним. Переміщаємо наступний шматок карти на задумане потрібне місце в робочій області (Рис. 24).

Активуємо останні два кадри і створюємо проміжні кадри (Рис. 25).

Процес повторився. Зрозуміло, що з рештою двома шматочками картинки чинимо абсолютно аналогічно (Рис. 26, третій фрагмент карти). Оптимізуємо зберігаємо результат, виставивши тривалість кадрів по-смаку.

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

Удачі Вам в освоєнні анімації і сподіваюся, що мої записки Вам хоч трохи допоможуть в цьому. Запитання можна поставити на форумі аватар .