Створення gif в Photoshop. Створення анімації у Photoshop CC
Анімація в інтернеті давно перестала бути простою прикрасою сторінки та перетворилася на корисний інструмент для покращення юзабіліті. Вона допомагає користувачеві взаємодіяти з інтерфейсом, привертає увагу до важливих моментів.
Анімація – це послідовне відображення схожих кадрів один за одним. Кожен кадр трохи змінюється, тому здається, що картинка рухається.
Для анімації інтерфейсу, створення інтерактивних прототипів або рекламних роликів використовують спеціальні програми, наприклад Adobe Animate або After Effects.
Щоб створити простий веб-банер або презентацію, не обов'язково розбиратися з спеціальними програмами. Для цього підійдуть і інтегровані засоби Photoshop.
З чого почати
Насамперед потрібно визначитися з тим, що ми анімуватимемо і якого результату плануємо досягти.
Для створення анімації я взяв один із яскравих проектів з Behance та перемалював його у Photoshop. Вирівняв по сітці, підібрав розміри і помістив кожен елемент в окремий шар. В результаті у мене з'явився відмальований у PSD-форматі перший екран сайту, який я потім анімував.
Шкала часу
Перед створенням анімації необхідно підготувати потрібні інструменти – увімкнути відображення «Шкали часу», яка допомагає керувати кадрами в анімації.
Для цього я відкриваю вкладку «Вікно» та ставлю галочку навпроти рядка «Шкала часу».
Внизу вікна Photoshop має з'явитися широкий рядок, за допомогою якого можна керувати кадрами в анімації.
Щоб створити перший кадр, натискаю іконку "Створити анімацію кадру" на "Шкалі часу".
Після того, як перший кадр з'явився, можна розпочати створення руху.
Проміжні кадри
У Photoshop елемент можна анімувати кількома способами:
- Намалювати кілька кадрів, вручну змінюючи положення та властивості елементів. Якщо анімація досить довга, промальовування кожного кадру займає багато часу.
- Вставити проміжні кадри. Необхідно вручну задати лише стану макета: на початку та наприкінці анімації. Необхідні кадри між цими станами додасть Photoshop. Цей спосіб підійде, щоб зробити поступову появу та зникнення об'єкта або показати його переміщення.
Спочатку я анімую зображення балалайки. Для плавної появи зображення використовую інструмент "Вставка проміжних кадрів". Щоб Photoshop самостійно анімував елемент, необхідно задати два стани для елемента - початковий у першому кадрі та кінцевий наступний.
Тому я додам ще один кадр у "Шкалу часу" за допомогою кнопки "Створити копію кадрів".
Після додавання нового кадру перемикаюся на перший і прибираю видимість шару з балалайкою. Також можна встановити непрозорість шару 0%.
На наступному кадрі перевіряю, чи видно шар із балалайкою.
Після роботи із зображенням балалайки налаштовую появу текстового рядка. У першому кадрі я виділяю текст Soul sings і зрушую його вправо за межі макета. З текстом "3 strings" роблю так само - зрушую вліво, поки він не зникне.
У другому кадрі повертаю текст назад.
Чудово. Тепер вставимо проміжні кадри між ключовими.
Для цього натискаю кнопку "Створення проміжних кадрів" на "Шкалі часу".
У діалоговому вікні, що з'явилося, вказую, скільки кадрів необхідно додати.
Чим більше кадрів, тим довше анімація та плавніше рухається елемент. Якщо кадрів замало - елементи рухатимуться ривками.
Перша частина анімації готова. Тепер її можна відтворити та подивитися, що вийшло.
Натискаю кнопку відтворення на «Шкалі часу».
Вставка проміжних кадрів допомогла швидко створити анімацію з плавною появою та рухом елементів.
Поява, зникнення і рух можна комбінувати один з одним, щоб досягти ще цікавіших ефектів.
Покадрова анімація вручну
Окрім лінійної анімації, іноді потрібно створити хаотичний рух чи показати складну взаємодію елементів. Зазвичай створюють кілька копій першого кадру, а потім трохи змінюють кожну копію - малюють анімацію покадрово.
Я кілька разів скопіюю останній кадр, щоб створити рух стрілки та тексту «go to shopping».
У наступному кадрі виділяю потрібний шар із текстом і стрілкою, зрушую його трохи вгору, а останньому кадрі - вниз.
Тепер можна запустити анімацію та подивитися результат.
Так як кадри змінюються швидко, очі не встигають сфокусуватися на останньому кадрі і зафіксувати кінцеве положення предметів на екрані.
Тому я збільшив тривалість останнього кадру: потрібно натиснути на стрілку біля напису "0 сек." та вибрати інший час зі списку.
Для останнього кадру я поставив тривалість у дві секунди. Тепер відтворення сповільнюється наприкінці. Тому за рухом елементів зручно спостерігати.
Збереження та експорт
У вікні попереднього перегляду можна ще раз переглянути анімацію та змінити параметри збереження.
За промовчанням після відтворення анімація зупиняється. Тому змінюю режим відтворення на «Повторення» і зберігаю.
Ось яка анімація вийшла в результаті:
Висновок
У Photoshop просто створювати короткі інтерактивні банери та презентації, анімувати окремі елементи. Зручно експериментувати із результатом.
Раніше на сайті ми розглядали сторонні, проте більшість із них запросто може замінити звичайний фотошоп. Анімовані GIF файли з його допомогою робляться досить легко та швидко. Вони, як правило, складаються з декількох зображень (кадрів), які при покроковій зміні та утворюють фінальний результат. Сьогодні постараємося максимально детально розглянути це питання від А до Я:
Скріншоти представлені нижче з Photoshop СС, але робота з GIF анімацією в CS6 та інших версіях програми плюс-мінус аналогічна. Можливо, візуально інструменти трохи відрізнятимуться, але в цілому, принцип і алгоритм дій схожі. Як приклад розглянемо тривіальне завдання як створити GIF анімацію у Фотошопі з фотографій, що змінюють один одного. Нещодавно за допомогою цього керівництва зробив гіфку про свої пригоди для підсумкового поста за 2016 рік у персональному блозі.
Процес зайняв буквально хвилин 5-10. Тут важливо просто уважно виконувати усі кроки. Наприкінці посту знайдете англомовний відеоурок на цю тему.
Додавання зображень GIF анімації у Photoshop
Насамперед потрібно завантажити в графічний редакторвсі картинки/фото, які братимуть участь в анімації. Додайте їх в один проект різними шарами - це будуть кадри для результуючого GIF файлу. Перевірте розміри картинок та їх відображення, щоб усе було як вам потрібно. Шари можна приховувати (за допомогою іконки ока ліворуч від шару), щоб переглядати всі об'єкти.
У центрі даної панелі є список, що випадає, де потрібно вибрати варіант «Create Frame Animation» і клікнути по кнопці. В результаті цієї дії Timeline трохи перетвориться, і ви повинні побачити як перший кадр картинку з верхнього шару.
На наступному етапі виділяєте всі шари в проекті (клікаєте по них утримуючи клавішу Ctrl). Після цього відкриваєте контекстне менюу правому верхньому кутку вікна Timeline і вибираєте «Make Frames From Layers».
З усіх видимих та виділених шарів Adobe Photoshopстворить кадри анімованого GIF В результаті побачите їх у панелі Timeline.
Налаштування GIF анімації у Фотошопі
Тут вам потрібно буде вказати дві речі: тривалість відображення різних кадрів + число повторень гіфки. Почнемо з першого. Під кожним об'єктом-картинкою в Timeline знайдете час показу та стрілку вниз. Клікаєте по них і у випливаючому меню вибираєте тривалість карда.
Елементам можна вказувати різний час або встановити параметр одночасно для декількох з них (спільне виділення як і в шарах - за допомогою Ctrl).
Щоб «зациклити» GIF у Фотошопі при створенні анімації вибираєте значення Forever у відповідному налаштуванні, як показано на скріншоті нижче.
Там є можливість вказати будь-яку потрібну вам кількість повторень. Поруч знаходиться кнопка Play, що дозволяє програти анімований GIF і подивитися як виглядатиме підсумковий результат.
Збереження GIF анімації у Фотошоп
У фінальній частині нашого керівництва розглянемо, як правильно зберегти GIF анімацію у Фотошопі. Для цієї мети використовується знайомий всім інструмент Save for Web, проте в останніх версіях Adobe Photoshop СС він розташовується в новому місці меню (File - Export). На щастя Alt+Shift+Ctrl+S все ще працює.
У вікні налаштувань потрібно вибрати формат GIF, а також переконатися, що налаштування Looping Options встановлено в Forever. У нижньому правому кутку вікна можна запустити створений вами анімований GIF у Photoshop для перегляду.
Якщо все функціонує так, як потрібно, натисніть Save і зберігаєте файл на локальному комп'ютері. Щоб перевірити працездатність GIF потрібно відкривати їх у браузері, т.к. вбудований переглядач Windows не програє анімацію.
До речі, ви також легко можете експортувати ваш проект у відео формат. Порядок дій аналогічний як при збереженні GIF анімації, але у меню Фотошоп вибираєте пункт File — Export — Render Video.
У вікні будуть різні налаштування відео, але нічого додатково міняти не потрібно, просто клацаєте по кнопці Render. У результаті отримаєте mp4 файл зі слайдшоу фотографій/зображень.
Насамкінець пропонуємо глянути англомовний відеоурок для створення анімованих GIF у Photoshop. Алгоритм роботи там такий самий, як і у статті, але можливо, вам буде простіше сприймати інформацію про відео.
Якщо у вас залишилися ще якісь питання про те, як зробити GIF анімацію у Фотошопі або є доповнення, пишіть у коментарях.
Якщо у вас накопичилася велика колекція із серій знімків з кількома кадрами одного сюжету, можна зробити з них gif-анімації для соцмереж, особистого блогу, улюблених форумів тощо. Відповідь на питання, як зробити гіфку з фото в , не така вже й складна. Втім, це необов'язково мають бути фото, можна використовувати будь-які зображення, наприклад малюнки. Освоївши цю техніку, ви зможете створювати унікальні «живі» листівки, колажі та інші цікаві речі. Це заняття винятково захоплююче.
Крок 1: підбираємо та готуємо фотографії
Знімки краще вибрати з однаковим тлом і такою композицією, де головний об'єкт приблизно одного масштабу. Загальні розміри зображень теж не повинні надто відрізнятися, це може позначитися на якості. Краще взяти 3-5 фото. З великою кількістю працювати можна, але складніше. Перший раз краще зробити найпростіший варіант, щоб попрактикуватися.
Ми взяли три фотографії дівчинки з різними розмірами та масштабом, рис.1, тому спочатку ми зробимо підготовчу роботу:
1. Обріжемо фотографії за допомогою інструмента «Рамка», щоб розташування моделі було приблизно однаковим, рис.2.
2. Наші фото завеликі – понад 2 тисячі пікселів по ширині, працювати з анімацією буде важко, тому змінимо ширину всіх трьох на 500 пікселів, висота підбереться автоматично. Зробити це можна через меню "Корекція", далі "Розмір зображення". Вийшло так, рис.3, хоча розміри вони однаково відрізняються, але ми виправимо пізніше.
3. Можна трохи покращити знімки за допомогою «Рівні» або збільшити насиченість, використовуючи підменю «Тон/насиченість». Обидва параметри знаходяться в меню «Зображення» та «Корекція».
Крок 2: з'єднуємо усі фото в одне зображення
1. Відкриваємо вікно «Шари».
2. Вибираємо фото, яке буде першим кадром анімації. Інструментом "Переміщення" перетягуємо на нього зображення з іншої фотографії, після чого з'являється два шари, рис.4.
3. Відкриваємо меню «Редагування» та вибираємо «Вільне трансформування». Підганяємо розмір другого шару під перший.
4. Третє фото переносимо так само, тепер головне зображення складається з трьох шарів, рис.5, решту фото краще закрити, щоб вони не заважали.
Крок 3: робимо gif-анімацію
1. Відкрийте меню «Вікно» та виберіть «Анімація». З'явиться вікно зі шкалою, де перший кадр буде додано автоматично. Якщо замість кадрів у вас відкрилася тимчасова шкала, то натисніть значок у нижньому правому куті вікна анімації.
2. Відкрийте налаштування анімації, клацнувши на значок у верхньому правому кутку того ж вікна (під хрестиком для закриття), виберіть «Створити кадри з шарів» - на шкалі з'являться всі ваші кадри, рис.6.
3. Тепер забудьте про вікно «Шари», працюємо лише зі шкалою анімації. Натисніть SHIFT і, утримуючи клавішу, виділіть усі кадри. Це можна зробити через налаштування, натиснувши «Виділити всі кадри». Змініть час програвання кадрів, ця опція знаходиться під попереднім переглядом кожного з них і виглядає як цифра зі стрілочкою. Ми поставили 0,5 секунди.
4. У нижньому меню вікна виберіть "Постійно" або інший спосіб відтворення, якщо потрібно.
5. Натисніть Play та подивіться, що вийшло. За потреби можна поміняти кадри місцями, перетягнувши мишкою.
Крок 4: зберігаємо гіфку
Після того, як вдалося успішно зробити gig-анімацію у Фотошопі, потрібно її грамотно зберегти, робиться це особливим чином.
1. Виберіть у меню «Файл» не зазвичай «Зберегти як», а «Зберегти для Web та пристроїв» трохи нижче.
2. Відкриється вікно з налаштуваннями. Краще залишити їх за умовчанням, змінивши лише розмір анімації внизу віконця. Ми поставили ширину 300, висота визначилася автоматично. Можна просто вказати відсоток від оригінального розміру зображення. Рис.7.
Усім, хто любить перемальовувати портрети чи малюнки, стане корисним цей урок. В уроці йдеться про те, як за допомогою програми Photoshop розбити будь-яке зображення на рівні квадрати, щоб легше було...
Чи думали ви, як створюються анімовані GIF-файли? Автор уроку пропонує вам за одну ніч опанувати деякі секрети анімації за допомогою цього уроку. Також ви навчитеся використовувати Шкалу часу (Timeline), яка доступна у версії Photoshop CS6. А тепер почнемо!
Результат уроку.
Крок 1
Створіть новий документ (Ctrl+N) з розмірами файлу 800 x 500 пікселів. Залийте фон будь-яким кольором, який ви бажаєте. Тепер йдемо в меню Шари- Стильшару- Накладенняградієнта(Layer> Layer Styles> Gradient Overlay). Виконайте такі настройки: Стиль Радіальний(Radial), кольори від чорного (#000000) до синього (#54799b), який буде використовуватись у центрі.
Крок 2
Створіть новий шар та назвіть його Noise Layer. Виберіть інструмент Заливання(Paint Bucket Tool) і залийте створений шар темним кольором (# 231f20). Залишіть активним шар Noise Layerта йдіть у меню Фільтр - Шум - Додати шум(Filter> Noise> Add Noise). У діалоговому вікні параметрів фільтра поставте такі значення: Ефект(Amount) 3%, розподіл Рівномірне(Uniform) та натисніть OK.
Крок 3
Натисніть комбінацію клавіш (Ctrl+U)і в діалоговому вікні налаштувань корекції введіть значення Насиченості(Saturation) 100%: Змініть цей шар режиму накладання на М'яке світло(Soft Light).
Примітка перекладача: Для того щоб досягти такого кольору як у автора на скріншоті, можна при корекції колірний тон / насиченість (Hue/Saturation) значення колірного тону (Hue) поставити на - 140.
Крок 4
Додати будь-який текст, який ви хочете. Тут ми використовуватимемо текст логотипу сайту 123RF. У стилях шару використовуйте Обведення(Stroke). Значення розміру обведення виберіть за своїми перевагами.
Примітка перекладача: На скрині автора вже є растрований текст разом зі стилем Обведення. Щоб у вас вийшло так само, після того, як застосували обведення, приберіть Заливку (Fill) шару з текстом на 0%, перетворіть цей шар на смарт об'єкт, а потім розтрируйте його.
Крок 5
У цьому кроці ми будемо створювати ефект, що світиться для тексту за допомогою стилів шару. Двічі клацніть на шарі, щоб викликати вікно налаштувань стилів. Для налаштування стилів шару використовуйте скріншоти нижче.
Тиснення(Bevel & Emboss)
Внутрішня тінь(Inner Shadow)
Внутрішнє свічення(Inner Glow)
Накладання кольору(Color Overlay)
Зовнішнє світіння(Outer Glow)
Тінь(Drop Shadow)
Крок 6
Як тільки ви закінчите створювати світлові ефекти за допомогою стилів шару, перейдіть в палітру шарів і зменшіть цей шар Заливання(Fill) – на 0%.
Крок 7
Дублюйте шар, який ви створили в кроці 5 і вимкніть цю копію всі стилі шару. Налаштуйте тепер стилі так:
Внутрішня тінь(Inner Shadow)
Внутрішнє свічення(Inner Glow)
Крок 8
Нижче результат після того, як ви застосували стилі шару.
Крок 9
Тепер ми створимо світлові цятки, що рухаються. Створіть 5 шарів поверх існуючих і перейменуйте їх як 1,2,3, R і F. Якщо у вас свій текст створіть шари відповідно до ваших літер. Згрупуйте ці шари в папку, якою дайте назву Light Spotsта змініть режим накладання на Освітлення основи(Color Dodge).
Активуйте інструмент Пензлик(Brush Tool), виберіть м'який пензлик, встановіть Непрозорість(Opacity) на 95% і білим кольором намалюйте цятки поверх тексту. Для кожної літери окрема світлова пляма на своєму шарі. Нижче на скріншоті ви можете розглянути, як шари виглядають у автора на панелі шарів.
Крок 10
Тепер йдемо в меню Вікно - Шкала часу(Window > Timeline). Ви помітите, що ваші шари вже побудовані в цій палітрі в її лівій частині. Виділіть кожен із п'яти шарів зі світловими плямами, які знаходяться в групі Light Spotsі переконайтеся, що індикатор поточного часу (блакитний слайдер) стоїть на нульовому кадрі. Тепер на кожному шарі в групі, за його активності, натисніть на опцію Позиція(Position), щоб створити ключовий кадр.
Примітка перекладача: Щоб активувати шкалу часу, натисніть кнопку Створити тимчасову шкалу для відео(Create Video Timeline) та всі ваші шари завантажаться у шкалу часу. Виділено у ній буде той самий шар чи група, що у палітрі шарів.
Крок 11
Встановіть індикатор поточного часу (блакитний слайдер) на позначці 01:00 Fі перемістіть шари зі світловими плямами траєкторією їх руху щодо контуру літери.
Крок 12
Так буде виглядати початкове положення світлової плями на літерах. Переміщуйте індикатор поточного часу за шкалою та рухайте шари зі світловими плямами, створюючи ключові кадри. Продовжуйте їх переміщати, доки не закінчите рух цятки по всій літері кожного текстового шару. Для інструкції дивіться кілька скріншотів нижче
3. Шукаємо свою папку з підготовленими фото і натискаємо лівою кнопкою миші на першу фотографію, затискаємо клавішу Shift, і натискаємо на останню, тоді вони виділяються все. Тиснемо ВІДКРИТИ.
4. У фотошопі відкриваються всі фотографії. Починаємо створювати шари, які нам знадобляться для анімації або створення gif картинки . Я відкрила широку фотографію. І вона буде першим шаром.
Щоб перетворити фото на шар, клацаємо по ньому двічі лівою кнопкою миші.
5. Щоб створити другий шар, нам потрібно натиснути на іконку, на яку вказує стрілка. На другому шарі ми будемо мати іншу фотографію.
6. Топаємо в наші фотографії, які відкриті поруч із першою, і вибираємо вузьку фотографію. Нагадую, що це необов'язково… З однаковими фото легше працювати. Отже, знаходимо потрібну фотографію, йдемо в меню – виділення – виділити ВСІ.
7. Після цього навколо картинки почнуть бігати маленькі тире, це виділення. Тепер йдемо в меню – редагування – скопіювати.
8. Повертаємось до нашої першої фотографії, яка вже зі шарами, йдемо в меню – редагування – вставити. І наша вузенька фотографія вставляється на новий шар. Але вона не може залишатися такою вузькою. Нам потрібно додати тло під неї. Для цього клацаємо по іконці (1), перетягуємо шар під вузьке фото, потім піпеткою (2) підбираємо будь-який колір, що сподобався вам, клікнувши курсором по фото. Я вибрала світло-зелений. І заливаємо новий шар, для чого ми активізуємо інструмент заливки (3) і потім клацаємо лівою кнопкою миші по робочому полю фотографії. Зверніть увагу, що в цей момент активним має бути новий прозорий фон. Активні шари вирізняються синім кольором. Після ваших дій прозорий шар забарвиться.
9. Тепер нам треба об'єднати два шари (вузьку фотографію та фон). Настаємо лівою кнопкою миші на перший шар. Затискаємо клавішу Shift і натискаємо по другому шару. Вони виділилися синім кольором. Йдемо в меню – шари – об'єднати шари.
10. Отримуємо таку картинку.
11. Повторюємо пункти 6-10 мого уроку, щоб створити шар з ще однією вузькою фотографією. Він у мене 2 шар. І створюємо ще один новий прозорий шар для розміщення там останньої широкої фотографії (шар 3).
12. Для цього виконуємо пункти уроку 6, 7, 8. Усі. Готово. Шари для нашої gif картинкими створили.
13. Можна розпочинати анімування і з вашими шарами, але я вирішила створити підкладку під нашу картинку. Для цього топаємо в меню - зображення - розмір полотна. Збільшуємо наше полотно на 50 пк по ширині та висоті. Тиснемо ОК.
14. У нас вийшло так.
15. Створюємо новий шар (у мене шар 4), перетягуючи його в самий низ під усі фотографії, ви можете зробити підкладку того ж кольору, що і тло у ваших вузьких фотографіях. Я вибрала колір підкладки трохи темнішою.
Оформляєте вашу підкладку будь-яким способом. Сподіваюся, що ви знаєте, як виставляються параметри шару, але якщо ні, це просто. Настаєте на потрібний шар і клацаєте по ньому двічі лівою кнопкою миші і у вас відкривається вікно з параметрами вашого шару, а там окремо відкриваєте кожен окремий параметр і ви застосовуєте або змінюєте налаштування. Я застосувала ефект у параметрах шару Внутрішня тінь і Внутрішнє світіння з параметром шару Множення… Колір тіні трохи темніший за тон підкладки. Але тут я не берусь нав'язувати вам мою думку. Ви маєте своє бачення. Спробуйте, змінюйте налаштування. Це не страшно. Завжди можна повернутися до початкового результату, навіщо йдете в меню – редагування – повернутися назад.
До речі, на моїй останній фотографії кущ гліцинії, її багато у Франції та час її цвітіння кінець квітня – початок травня. Цей кущ я сфотографувала у саду у батьків мого друга. У моєму болгарському дворі теж є кущі гліцинії і думаю, що скоро вона порадує нас своїми квітами, схожими на бузкові хмари.
16. Настав час поставити свій логотип, особливо це важливо, якщо ваша картинка розташовуватиметься на вашому сайті. Для звичайних користувачівце можна застосовувати. Нагадаю, що я робила урок фотошопу о. Пробігу коротко: йдемо в меню - файл - помістити. Шукаємо свій файл PSDз підготовленим заздалегідь логотипом, наступаємо на нього та клацаємо по кнопці Помістити.
17. Перетягуємо шар із логотипом на самий верх, як у мене. При необхідності збільшуємо логотип до потрібного розміру, Для чого йдемо в меню - редагування - масштабування. Із затиснутою кнопкою Shift розтягуємо або зменшуємо логотип. Активуємо інструмент «переміщення» (найвищий інструмент зі стрілкою та + в панелі інструментів) та переміщуємо логотип на потрібне місце.
Все підготовлено зі створення анімації.
17. У першому кадрі анімації у вас повинна бути відкрита видимість з шаром підкладки, перший шар з вашою фотографією (у моєму випадку шар 0) і логотип (позиція 1). Для гарного перегляду вашої фотографії встановлюємо час затримки 5 сек(Позиція 2). Після визначення часу затримки та встановлення їх у першому кадрі, всі наступні кадри будуть із заданим часом 1 кадру, тобто. 5 сік у моєму випадку. Для створення другого кадру тиснемо на іконку, показану на позиції 3.
18. У другому кадрі змінюємо видимість шару з першої картинки на другу, так само, як показано на моєму скрині.
