Як зробити анімацію в фотошопі

Для того щоб зрозуміти, як зробити анімацію в фотошопі необхідно згадати про те, що мультфільми чи фільми це всього лише швидко мінливі статичні картинки або фотографії. А photoshop дозволяє працювати з окремими кадрами. Залишається тільки в меню програми знайти інструментарій по створенню рухомих картинок і зрозуміти, як там все працює.

Як у фотошопі зробити анімацію

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

Для того щоб поекспериментувати і розібратися з тим, як зробити анімацію в фотошопі cs3, необхідно створити новий документ з потрібними вам розмірами, після чого перейти у вкладку Windows у верхньому меню і знайти там слово Animation. У нижній частині робочої області з'явиться довга тимчасова стрічка (Frames). Це розкадровка нашого майбутнього «мультфільму». Якщо ви хоча б раз працювали з яким-небудь відео редактором, то розберетеся з цим враз.

Тепер опишемо кнопочки та інший функціонал:

1 1 сек - затримка кадру, як довго не буде змінюватися певний кадр
2 - перемикання режимів повторення, скільки разів буде програна анімація - вічно або певну кількість циклів
3 - play - кнопки управління переглядом. Тут все зрозуміло, як в самому звичайному плеєрі
4 - створити копію обраного кадру
5 - видалити вибраний кадр
6 - вибір кількості продубльованих кадрів в окремому діалоговому вікні і вибір параметрів, які необхідно зберегти

Звичайно ж, простіше зрозуміти, як зробити анімацію в фотошопі cs4 на конкретному прикладі - це наочно і дозволяє повторити урок власноруч. Ми вже говорили в инструк про те як зробити слайд шоу - зроблене самостійно завдання засвоюється в десятки разів краще. Ми не стали робити приклад занадто складним. Придумали простенький банер з написом «Цікава анімація» і загарать лампочкою.

Крок 1. Насамперед, щоб дізнатися, як зробити анімацію в фотошопі гиф потрібно створити новий документ певного розміру. Якщо що, розмір потім можна буде змінити. Клацають File> New або тиснемо ctrl + N. З'явиться вікно? В якому вказуємо ширину 520 px, висоту 120 px. Інше залишаємо як є і тиснемо "OK".

Крок 2. Заливаємо робочу область темним кольором або ставимо на фон яке-небудь нейтральне зображення. Якщо будете заливати сірим, то спершу розблокуйте робочий шар, клацнувши для рази на зображенні замку, після чого натиснувши «ОК» в віконці.

Крок 3. Продовжуємо говорити про те, як зробити анімацію в фотошопі cs2 і створюємо чорну рамочку, шириною 4 пікселя.

Крок 4. Додаємо напис «ЦІКАВА АНИМАЦИЯ». В даному випадку не важливо, що буде написано, нам важливо зрозуміти, як все працює і який в програми є інструментарій. Пишемо вказані слова білим кольором і вибираємо сподобався шрифт. Зрушуємо в ліву частину фону, так як справа буде лампочка.

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

Крок 6. Далі, щоб зробити gif анімацію в фотошопі витонченої, потрібно точно зіставити положення двох ламп і підігнати їх розміри. Щоб оці не було помітно, що картинки змінилися зі зміщенням. Щоб змінювати розміри шару, потрібно вибрати інструмент трансформації, натиснувши ctrl + T. Рухати зображення краще по одному пікселю, натискаючи на кнопки зі стрілочками. Ознайомтеся зі статтею про те як зробити скріншот сторінки, щоб додавати скріни в коментарі до статті, якщо будуть питання.

Крок 7. Додамо до напису тінь. Ми хочемо створити ілюзію того, що лампа реально запалилася. При цьому вона не просто змінила свій колір, вона вплинула на навколишні об'єкти - напис стала відкидати тінь. Дізнатися, як зробити анімацію в фотошопі з тінню дуже просто. Робимо подвійне клацання лівою кнопкою миші на шарі з написом і вибираємо в лівій частині вискочив вікна Drop Shadow (Падаюча тінь). Кут ставимо 0, Дистанцію 6, Розмір 1. Решта залишаємо як є і тиснемо "Ок".

Крок 8. Якщо лампа вплинула на літери, вона повинна висвітлювати і фон. Хоча б трошки. Зараз розповімо, як у фотошопі зробити анімацію освітлення. Для цього створюємо новий шар під шаром з лампочкою і вибираємо інструмент Градієнт (Gradient tool) - тиснемо рази клавішу G. Перед цим піпеткою вибираємо колір жовтої лампи, щоб освітлена частина не сильно відрізнялася від кольору самого освітлювального пристосування.

У лівому верхньому куті опцій інструменту Градієнт, вибираємо режим заливки - Від кольору до прозорого фону. А поруч вибираємо режим - Радіальний градієнт. Після цього малюємо не більшу лінію від центру лампи до периферії. Якщо ефект вийде не такий як на картинці, а зворотний, приберіть у верхній частині меню інструменту Градієнт галочку з опції - Revers.

Крок 9. Усі складові частини нашого проекту створені, можна безпосередньо переходити до вивчення того, як зробити анімацію в фотошопі cs5 або в будь-який інший версії програми. Для цього у верхньому меню тиснемо на Window> Animation. З'явиться довге віконце із зображенням кадру. Яка кнопка, що означає в цьому віконці ми вже розповіли вище. Тиснемо один раз на кнопку створення нового кадру, щоб у нас їх було два. Ось картинка:

Крок 10. Виділяємо перший кадр і робимо невидимі всі верстви, які нам не потрібні. А саме - запалену лампу, світло від лампи, тінь від напису. Щоб зробити шар не видимим, потрібно клацнути на зображення ока зліва від назви шару.

Крок 11. Продовжуємо далі розбиратися з тим, як зробити анімацію в фотошопі cs3 і на цей раз виділяємо другий шар, робимо видимими те, що ми зробили не видимим кроком вище. А саме - включаємо жовту лампу, тінь від букв, світло від лампи.

Крок 12. Тепер потрібно виставити тривалість показування кадрів. У першому кадрі ставимо 2 секунди, а в другому 5 секунд. Ви можете поекспериментувати і зробити так, як вам більше подобається. Тиснемо на кнопку Play і запускаємо тестовий перегляд. Якщо все подобається, переходимо до останнього кроку.

Крок 13. Ну, от ви усвідомили, як зробити анімацію в фотошопі cs4, залишається тільки зберегти плоди своєї праці. Для цього тиснемо File> Save for Web ... У розкрився на весь екран вікні потрібно буде вибрати кількість кольорів в gif файлі. Тут необхідно знайти компроміс між якістю відео і розміром файлу. Чим менше, тим краще, але не на шкоду красі. Все, анімація банера готова, можна віщати його на сайт або завантажувати в соціальні мережі. Якщо щось залишилося не зрозуміло, запитуйте в коментарях.