Анімуємо у Photoshop. Два простих способи: покадрово та через Puppet Warp

Розповідаємо про два прості способи створення GIF-анімації.

Пише про дизайн та маркетинг у Skillbox Media. З 2011 до 2017 року писала про бізнес у ділові ЗМІ, співзасновник агентства копірайтингу «Абзац».

Більшість користувачів сприймають Adobe Photoshop як програму, де редагують зображення або малюють статичні картинки. Але тут можна робити і анімацію - цей напрямок дизайну приносить хороші гроші при тому, що професіоналів у Росії не так багато.

А якщо хочете зробити крок далі Photoshop і піти назустріч затребуваній професії, перегляньте курс «Motion-дизайнер» від Skillbox.

Покадрова анімація

Покадрова анімація – один із найлегших способів роботи з анімацією у Photoshop. Але враховуйте, що цей нескладний процес виявиться досить довгим. Приступимо.

Спочатку створимо новий документ, а потім зайдемо в меню Window і поставимо галочку навпроти Timeline («Шкала часу»). Після цього з'явиться відеоредактор. У ньому будуть відображені всі шари, які відкриті у документі.

Далі клацаємо на кнопку Create Video Timeline, переходимо в меню Layers («Шари»), вибираємо пункт Video Layers і створюємо порожній відеошар.

Тепер ваше завдання – намалювати анімацію покадрово. Це можна робити з нуля або малювати поверх готової картинки, відкритої в окремому шарі.

Беремо пензель та створюємо перший кадр анімації. Далі пересуваємо повзунок часу та малюємо вміст наступного кадру. Щоб побачити свої дії на попередньому етапі, клацніть по меню у правому верхньому кутку та виберіть Enable Onion Skins («Перейти в режим кальки»).

З таких простих, але монотонних дій складається процес створення покадрової анімації: крок за кроком ви додаєте черговий елемент картинки, що рухається. Тут у кожному новому кадрі ми малюємо кольоровий кружок.

Щоб зробити плавну анімацію, поділіть зображення максимально короткі відрізки. Швидкість кожного кадру можна змінити, клацнувши по ньому правою кнопкою миші.

Основна робота закінчена, займемося ефектами. Наприклад, додамо на шкалу часу шар із написом або картинкою. Якщо потрібно змінити колір анімації, робіть це так само, як у звичайних шарів. Двічі клацніть по шару, виберіть команду Color Overlay («Накладання кольору»), Візьміть потрібний колір, скопіюйте стиль шару і вклейте його на всі інші шари.

Наприкінці збережемо отриману анімацію як відео. Перейдіть до меню File → Export → Render Video. Якщо потрібний формат GIF, вибираємо пункт Save for Web. У віконці можна змінити налаштування, а потім натиснути Save.

Анімація за допомогою «Маріонеткової деформації»

GIF-анімацію у Photoshop створюють і за допомогою інструменту Puppet Warp («Маріонеточна деформація»). Це набагато швидше ніж малювати анімацію вручну. Спочатку візьміть зображення у форматі PNG без фону. Якщо він таки є, об'єкт доведеться вирізати.

Отже, відкрийте зображення в Photoshop і перейдіть до панелі шарів. Клацніть правою кнопкою миші по створеному нульовому шару та перетворіть його на смарт-об'єкт.

Якщо збираєтеся використовувати якісь ефекти, наприклад тінь або обведення, - застосуйте їх із першого кадру. Це набагато простіше та швидше, ніж пізніше додавати щось на всі створені шари. Далі клацніть Duplicate Layer.

Потім тиснемо на меню Edit та вибираємо пункт «Маріонеточна деформація». У цей момент картинка покриється сіткою, а значок курсору перетвориться на кнопку.

Перед тим як пожвавити нашу картинку, потрібно «приколоти» її за допомогою кнопок і залишити вільною тільки ті частини, які рухатимуться
на GIF-анімації.

Тепер найцікавіше: лівою кнопкою миші затискаємо ту частину картинки, яка повинна бути в русі, і злегка тягнемо в потрібну сторону. Потім відпускаємо мишу і тиснемо Enter.

Щоб анімація була плавною та реалістичною, доведеться рухати картинку поступово. Для цього кілька разів повторіть весь процес: копіюємо шар → рухаємо зображення → тиснемо Enter. У нашому випадку знадобилося створити 14 шарів, щоб підняти вухо персонажа і повернути його у вихідне положення.

Коли перестали рухати картинку, виділіть всі шари, клацніть по них правою кнопкою миші і натисніть Rasterize («Раструвати шар»).

Далі починається робота зі "Шкалою часу". Клацаємо на Create Frame Animation, переходимо в меню, розташоване у правому верхньому кутку, та вибираємо команду Make Frames From Layers.

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

Якщо все влаштовує, зберігаємо нашу анімацію у форматі GIF. Для цього в меню "Файл" вибираємо пункт "Зберегти для Web".

Висновок

Тепер ви можете робити анімацію у Photoshop двома простими способами.Їх можна використовувати під час створення банерів або логотипів, які прикрасять будь-яку веб-сторінку.

Якщо ви всерйоз зацікавилися анімацією та дизайном – придивіться до моушн-дизайну. Це один із модних напрямків сучасності. Освоївши його, ви будете на професійному рівні створювати анімацію для крутих проектів.

Курс

Професія Графічний дизайнер PRO

Ви навчитеся створювати елементи фірмового стилю та графіку для бізнесу. Зберете портфоліо, яке відобразить ваш стиль та підтвердить навички дизайнера. Зможете розпочати кар'єру у студії чи на фрілансі.

Навчайтеся дизайну на практиці - безкоштовно

Як створити GIF у Photoshop: повні рекомендації

Формат обміну графікою, також відомий як GIF, є форматом файлу стисненого зображення, що допускає анімацію. GIF – це коротка анімація та відеокліп з низькою роздільною здатністю, який можна використовувати як реакцію в онлайн-спілкуванні для вираження емоцій та почуттів замість слів. GIF широко використовується молодими людьми в соціальних мережах, таких як Facebook, Messenger, Twitter і т.д. д., додавання гумору до контенту. Є способи створити GIF, але варто витратити час на редагування GIF у Photoshop. Ви один із тих, кому цікаво, як зробити свій власний? У цій статті представлено найкраще покрокове керівництво з як зробити GIF у фотошопі. Тому підемо з нами, щоб дізнатися, як швидко і просто створити GIF.

Частина 1. Чи можу я створювати файли GIF у Photoshop?

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

Частина 2. Як створити та експортувати/зберегти GIF у Photoshop, якщо ви вже створили зображення

1. Завантажте фотографії у Photoshop. Натисніть Файл , потім перегляньте Сценарії , Звідти, Завантаження файлів у стек імпортувати потрібні фотографії у Photoshop з окремої папки.

2. Виберіть Вставити після цього виберіть файли, які потрібно включити до свого GIF.

3. Потім виберіть Добре.

Якщо ви ще не створили зображення

1. Створіть унікальний фотошоп Шар для кожного кадру анімованого файлу GIF. Ми можемо це зробити, натиснувши «Вибрати» Шар , потім перейдіть до Нове . Звідти, будь ласка, подивіться Шар, щоб додати новий шар.

2. Обов'язково вказуйте назви шарів, щоб їх можна було легко запам'ятати під час створення GIF. Щоб перейменувати шар, Двічі клацніть існуюче ім'я шару на панелі «Шар» у нижньому правому куті екрана та введіть нове ім'я. Коли закінчите, натисніть клавішу Enter .

3. Ви готові перейти до другого кроку, коли всі ваші шари присутні та ідентифіковані.

Pro Tip: Щоб об'єднати шари так, щоб вони відображалися в одному кадрі вашого GIF-файлу, увімкніть видимість шарів, які ви хочете об'єднати (натискаючи на око зліва від імені кожного шару, щоб відображалися тільки очі тих шарів, які ви хочете об'єднати). ). Потім натисніть Shift+Команда+Option+E на комп'ютері Mac або Windows.Об'єднаний контент буде створено як новий шар у Photoshop, який вам слід перейменувати.

4. Відкрийте вікно шкали часу.

Перейдіть до верхньої навігації та виберіть Вікно в Стрічка для доступу до тимчасової шкали. Ви можете вмикати та вимикати певні шари на різну довжину, використовуючи тимчасову шкалу, щоб перетворити статичне зображення на GIF.

5. У нижній частині екрана з'явиться вікно шкали часу. Це виглядає так:

6. Виберіть Створити анімацію у вікні часової шкали.

Виберіть його з меню, що розкривається, якщо він ще не вибраний; однак клацніть, щоб відобразилися параметри анімації кадру.

7. Ваша тимчасова шкала тепер має виглядати так:

8. Для кожного нового кадру створюйте новий шар. Для початку виберіть Виберіть і перейти до Усі шари з верхнього меню навігації, щоб вибрати кожен шар окремо. Потім натисніть кнопку меню в правій частині екрана шкали часу.

9. У розкривному меню виберіть «Створити новий шар» для кожного нового кадру.

10. Виберіть Створення рамок із шарів із тієї ж кнопки меню праворуч. В результаті, кожен шар вашого GIF стане рамкою.

11. Під кожним кадром оберіть, як довго він повинен залишатися видимим, перш ніж переходити до наступного. Для цього виберіть потрібну тривалість, клацнувши піктограму часу поряд з кожним кадром. В даному випадку ми зупинилися на 0.5 секунд на кожен кадр.

12. Виберіть, скільки разів ви хочете, щоб він повторювався у нижній частині панелі інструментів. Один з них буде використовуватися за умовчанням, але ви можете повторювати його стільки разів, скільки захочете, аж до Forever. Якщо потрібно вказати довільну кількість повторів, натисніть Інше .

13.Натисніть значок відтворення, щоб переглянути файл GIF.

Експортуйте та зберігайте GIF у Photoshop

1. Експортувати та Збережено Вашу гіфку. Ви задоволені своїм GIF? Вибравши Файл побачивши Експортувати. Будь ласка, натисніть Зберегти для Інтернету (застаріла версія) з верхнього рядка меню; Ви можете зберегти його для використання в Інтернеті.

2. Потім у меню «Предустановки» виберіть тип файлу GIF, в якому ви хочете його зберегти. Виберіть GIF-файли зі згладжуванням, щоб уникнути колірних смуг, якщо ваш GIF-файл має градієнти.

Ви можете відмовитися від дизерингу, якщо у зображенні широко використовуються суцільні кольори. Наскільки більшими (і точними) будуть кольори GIF порівняно з вихідними JPEG або PNG, залежить від числа поряд із файлом GIF.

На думку Adobe, більший відсоток згладжування призводить до появи більшої кількості кольорів та деталей, але також збільшує розмір файлу.

3. На ПК збережіть файл, натиснувши кнопку «Зберегти» внизу. Цей GIF-файл тепер готовий до завантаження для маркетингових цілей. Він повинен відтворюватися без проблем, якщо ви завантажите файл GIF у будь-яке місце в Інтернеті, куди ви помістите зображення.

При експорті GIF файл GIF може мати низьку роздільну здатність через малий розмір кадру. Але ви можете використовувати Photoshop, щоб збільшити роздільну здатність зображення.

Ви дізналися, як створити та експортувати/зберегти GIF-файл із Photoshop. Це буде складно, якщо ви не уважно виконаєте всі кроки по створенню GIF-файлів у Photoshop, тому що це досить довго. Якщо вам потрібен більш простий метод, читайте нижче.

Частина 3. Альтернатива Photoshop для створення GIF за допомогою AnyMP4 Video Converter Ultimate

AnyMP4 Video Converter Ultimate — найкращий вибір найкращих творців та редакторів GIF.Він відмінно підходить для створення цікавих файлів GIF на Windows або Mac. За допомогою цієї програми редагування GIF ви можете обертати GIF, змінювати ефекти та фільтри, додавати водяні знаки та багато іншого. Крім того, він підтримує обробку GIF за допомогою численних інструментів, включених до його вбудованої панелі інструментів, таких як корекція кольору, обрізка відео, 3D Maker і т.д.

• Зручний для початківців інтерфейс користувача з невеликою кількістю елементів управління спрощує редагування GIF-файлів.
• У вбудованій панелі інструментів є близько 20 різних типів інструментів редагування.
• Щоб GIF-файл виглядав краще за допомогою функції покращення перед відправкою, створіть приголомшливий ефект.

1. Отримайте AnyMP4 Video Converter Ultimate

Скачайте та встановіть AnyMP4 Video Converter Ultimate на ваших комп'ютерах.

Створення та збереження анімації у Фотошопі

Незважаючи на те, що Фотошоп не так часто використовується для створення анімацій, у програмі все ж таки така можливість існує. Давайте розберемося, як це робиться.

Підготовчі роботи

Анімація буде створюватися на Шкалі часу, що знаходиться в нижній частині вікна програми.

У випадку, коли ця шакала вимкнена, її можна активувати в меню «Вікно».

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

Аналогічно шкала розгортається.

Створюємо анімацію

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

Як вихідне зображення ми візьмемо логотип нашого сайту.

1. Розміщуємо рамку та самий напис на різних шарах. Фон на обох шарах має бути прозорим.
2. Переходимо на шкалу часу, де натискаємо кнопку "Створити тимчасову шкалу для відео".
3. У результаті ми матимемо такий результат. Верхню межу шкали можна зрушити вгору за допомогою лівої кнопки миші, щоб вмістити всю інформацію. Як бачимо, обидва шари, крім фонового, з'явилися тут як окремих доріжок.
4. Варіантів анімації може бути безліч. Ми спробуємо зробити її за наступним сценарієм: спочатку з'являється рамка, потім напис – зліва направо.
5. Почнемо із рамки. Клацаємо по невеликій стрілці поруч із правим верхнім кутом мініатюри шару.
6. У лівій частині шкали відобразяться властивості вибраного шару. Тут ми клацаємо по значку у вигляді секундоміра поруч із параметром "Непрозор.".
7. Після цього на шкалі відобразиться ключовий кадр, або, іншими словами, ключ у вигляді жовтого ромбика.
8. Тепер нам потрібно налаштувати стан шару цього ключа. Згідно з нашим завданням, рамка має виникнути плавно, отже, на початку її не повинно бути видно. Тому в редакторі шарів встановлюємо непрозорість шару на рівні 0%.
9. Переміщуємо повзунок шкали трохи наперед і знову створюємо ключ. Тепер уже тиснемо не значок у вигляді секундоміра, а маленький жовтий ромб поруч.
10. Для цього ключа на панелі шарів задаємо непрозорість на рівні 100%.
11. У нас є можливість перевірити ефект, рухаючи повзунок або використовуючи кнопки, що управляють відтворенням у верхній лівій частині шкали.
12. Якщо після перегляду ефекту потрібно прискорити його появу або, навпаки, розтягнути довше, можна посунути фінальний ключ у потрібну сторону.
13. Отже, поява рамки зроблено і можна переходити до тексту.
14. Зсуваємо повзунок на шкалі трохи правіше останнього ключа, коли рамка вже повністю видно.
15. На панелі шарів створюємо новий, заливаємо його білим кольором.
16. Після цього потрібно трохи змінити розташування шарів. У самому верху повинен розташовуватися шар з рамкою, потім - з білою заливкою, а потім - з текстом.
17. На полотні вирівнюємо ліву межу білого тла із початком тексту. Для цього нам знадобиться інструмент "Переміщення", який можна вибрати на бічній панелі.
18. На шкалі часу початок всіх шарів має бути вирівняний.
19. Зсуваємо повзунок вперед і встановлюємо трохи правіше кінцевого ключа шару з рамкою. Відкриваємо властивості шару із білим тлом. Клацаємо по значку у вигляді секундоміра поруч із параметром «Позиція». Таким чином, ми встановимо ключ для початкової позиції.
20. Зсуваємо повзунок вперед і створюємо ще один ключ-позицію.
21. Взявши інструмент "Переміщення", на полотні зрушуємо шар із білим тлом вправо, щоб весь текст став видимим.
22. Методом зсуву повзунка (або кнопок керування відтворенням) перевіряємо, чи правильно працює створена анімація. Якщо потрібно, можна внести фінальні коригування до доріжки - змістити ключі, щоб, наприклад, відредагувати швидкість появи букв і т.д.
23. Тепер потрібно обрізати зайву частину анімації. Для цього, затиснувши ліву кнопку миші, тягнемо правий кінець будь-якої доріжки вліво до тривалості, яка нам потрібна.
24. Аналогічні дії виконуємо стосовно інших доріжок.
25. Переходимо у меню "Файл", вибираємо пункт "Зберегти для Web", щоб зберегти анімацію.
26. Формат, який нам потрібен GIF. Як параметр повтору вибираємо значення «Постійно» і тиснемо кнопку "Зберегти".
27. Вибираємо папку для збереження, вказуємо ім'я файлу та знову клацаємо «Зберегти». Анімація у форматі GIF працює у веб-браузерах та спеціально призначених для цього програмах. За допомогою стандартних програм для перегляду фотографій та зображень відтворити анімацію не вдасться.
28. А у нас вийшов такий результат.

Висновок

Photoshop – це потужний графічний редактор, який дозволяє не лише обробляти зображення, імітувати різні ефекти тощо. У програмі також можна зробити анімацію та зберегти її у популярному форматі GIF для подальшого використання, наприклад, додати на веб-сторінку.