Створюємо анімацію на основі крил в програмі photoshop

Створюємо анімацію на основі крил в програмі Photoshop

Вам буде потрібно Photoshop CS3 або Photoshop CS і ImageReady CS.

1.Создать новий малюнок (Файл-новий) необхідного вам розміру з чорним фоном, після чого на панелі ШАРИ натискаємо на кнопку "додати новий шар". На новому шарі малюємо клин за допомогою інструменту "прямолінійний ласо", і заливаємо його за допомогою інструменту "заливка" білим кольором. Прибираємо виділення.

2.Поворачіваем клин на 20 градусів за годинниковою стрілкою (Зображення-повернути полотно-довільно). Далі застосовуємо до шару з клином фільтр Фільтр-стилізація-вітер, вибираємо напрям ЛІВОРУЧ (застосувати пару раз).

3.Снова повертаємо шар, але вже на 40 градусів проти годинникової стрілки. Знову застосовуємо фільтр ВІТЕР кілька разів.

4.Поворачіваем шар з клином в початкове положення (20 градусів за годинниковою стрілкою) і знову застосовуємо фільтр ВІТЕР 2 рази.

5.Копіруйте шар з клином 4 рази (перетягнувши мишею малюнок шару на значок "Новий шар" на панелі ШАРИ). За допомогою "Довільної трансформації" (Редагування- вільна трансформація). Зменшуйте, повертайте або збільшуйте пір'їнка на кожному шарі, складаючи їх так, щоб получілость щось схоже на "віяло". Відключаємо видимість фонового шару (Натиснувши на панелі ШАРИ значок очі поруч із шаром) і склеюємо шари зклинами (Шар-об'єднати видимі) і називаємо його "ПІР'Я". Знову робимо видимим фоновий шар.

6.Создаем новий шар натиснувши на значок "Новий шар" на панелі ШАРИ, і на ньому від отриманих раніше пір'я малюємо ще один клин за допомогою інструменту "Прямолінійне ласо" і заливаємо його білим кольором за допомогою інструменту "заливка". Прибираємо виділення.

7.Несколько раз повертаємо клин під різним кутом (редагування-вільна трансформація), застосовуємо до нього фільтр ВІТЕР (фільтр-стилізація-вітер). При цьому волокна повинні відходити від клина тільки в одну сторону.

8.Копіруем шар "Пір'я" перетягнувши рядок шару на значок "Новий шар", трохи зменшуємо його, повертаємо за допомогою "Вільної трансформації" і ставимо його так щоб аж пір'я здавалися пухнасті. Склееваем всі верстви крім фону (відключаємо видимість фонового шару і натискаємо шар-об'єднати видимі).

9.Пріменяем до одержали шару фільтр Фільтр-спотворення-хвиля, число генераторів-1, переміщаємо повзунки довжина хвилі поки не досягнете потрібного результату. Копіюйте шар з крилом, і об'єднайте з попереднім.

10.Якщо ви хочете щоб крило було не просто білим, то скопіюйте шар з крилом, і замініть колір крила на новому шарі на чорний (Зображення-корекція-замінити колір), за допомогою "вільної трансформації" зменшите крило і розташуйте його по верхньому краю білого крила. Смакота шари з крилами. Назвіть вийшов шар "Крило праве".

11.Копіруйте шар з крилом, перетягнувши рядок шару на значок "Новий шар" на панелі ШАРИ і відобразіть його по горизонталі (Редагування-трансформування-відобразити по горизонталі). Пріпомощі інструменту "Переміщення", посуньте крило так, щоб обидва крила було видно. Назвіть вийшов шар "Крило ліве".

12.Якщо не вистачає місця для того, щоб вмістити два крила разом - збільшіть розмір полотна (Зображення-розмір полотна), змінивши ширину.

13.Скопіруйте шар "Крило праве" 2 рази, назвіть ці шари "праве 1" і "праве 2".

14.Скопіруйте шар "Крило ліве" 2 рази, назвіть ці шари "ліве 1" і "ліве 2".

15.Актівізіруем шар "праве 1" і трансформуємо (Редагування-трансформірованіе- деформація), роблячи крило трохи вище, ніж насл "праве", з боку "пір'я" і не змінюючи положення крила з іншого боку.

16.Актівізіруем шар "праве 2" і трансформуємо, роблячи крило трохи вище, ніж насл "праве 1", з боку "пір'я" і не змінюючи положення крила з іншого боку.

17.Актівізіруем шар "ліве 1" і трансформуємо, так щоб крило знаходилося на одній висоті з крилом на шарі "праве 1" (щоб вони були симетрично).

18.Актівізіруем шар "ліве 2" і трансформуємо, так щоб крило знаходилося на одній висоті з крилом на шарі "праве 2".

19.Откройте панель анімації в Photoshop CS3 (ВІКНО-АНИМАЦИЯ) або перейдіть в ImageReady CS, за допомогою кнопки "Редагувати в ImageReady" (в самому низу панелі інструментів), якщо ви працюєте в Photoshop CS.

20.Скопіруйте перший кадр 3 рази.

21.вернемся до першого кадру анімації (кликнемо по ньому мишею), на панелі Шари залишаємо видимими - фоновий шар, шар "праве" і шар "ліве" (у інших верств відключаємо видимість (значок ОКО)). У другому кадрі залишаємо видимими - фоновий шар, шар "праве 1" і шар "ліве 1". У третьому - фоновий шар, шар "праве 2" і шар "ліве 2". У четвертому - фоновий шар, шар "праве 1" і шар "ліве 1".

22.Задаем час затримки кадру 0,2 секунди, для всіх кадрів.

Ось, що з цього може вийти. Для того, щоб зберегти анімацію в Photoshop CS 3 заходимо в меню Фото-ЗБЕРЕГТИ ДЛЯ ВЕБ і зберігаємо зображення в потрібну Вам папку, як малюнок і HTML-код у форматі GIF. Якщо зберігаєте з Image Ready, то заходимо в меню Фото-ЗБЕРЕГТИ оптимізувати ЯК і зберігаємо зображення як малюнок і HTML-код у форматі GIF.