Створити анімований gif у фотошопі. Створення анімації у Photoshop CC. Збереження GIF анімації у Фотошоп

Починаючи з версії CS3 Extended, доступна анімація. Gif-малюнки створюються з набору кадрів або безпосередньо з відеороликів. Так ви самостійно зробите динамічну картинку для сайту, аватарки, презентації? вітальну листівку. Подібну графіку можна використовувати в інших проектах або під час монтажу. Дізнайтеся, як зробити анімацію у Фотошопі, щоб вільно працювати з таким видом зображень.

Adobe Photoshop має безліч можливостей, серед яких і створення анімацій

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

Анімація з відео

Найпростіший спосіб – конвертація відео в анімацію. Не треба нічого налаштовувати. Досить просто відкрити ролик у Photoshop. Утиліта приймає формати avi, mov, mp4, mpg, mpeg, m4v. Для їхнього коректного запуску необхідний встановлений QuickTime. Доданий таким чином медіафайл не можна відредагувати або обрізати. Тільки перетворити на графіку.

Але є й інший метод. Ось як у Фотошопі зробити gif із кіно:

Перейдіть до Файл - Імпортувати.
Натисніть "Кадри з відео в шари".
Відкриється меню з деякими параметрами. Справа буде міні-плеєр для попереднього перегляду.
У полі «Діапазон» позначте один із параметрів: «Від початку до кінця» або «Тільки виділений». У другому випадку буде вставлено вибрану частину відео. Щоб вирізати потрібний фрагмент, посуньте чорні маркери під плеєром. У проект додасться шматок, що знаходиться між ними.
У Photoshop можна завантажити максимум 500 кадрів. Якщо робочий матеріал більший за цю величину, його доведеться різати або додавати частинами в різні документи.
Позначте галочкою пункт "Створити покадрову анімацію". Так до відео автоматично буде застосовано всі необхідні налаштування. Без цього динаміку доведеться задавати вручну.
Параметр "Залишити кожен [число]" дозволить імпортувати не всі слайди, а, скажімо, кожен третій. Підсумкова GIF вийде переривчастою.
Підтвердіть дію та дочекайтеся, поки утиліта обробить ролик.
Перейдіть до «Вікно - Робоче середовище» та виберіть «Рух». Цей набір найкраще підходить для створення анімованих картинок.
Внизу буде аналог медіапрогравача. У ньому вказано частоту кадрів. Є кнопка "Play", перемотування, масштаб відеодоріжки. Відображені всі фотографії по черзі.
Вони також будуть розподілені за шарами, список яких знаходиться праворуч знизу вікна Photoshop. Клацніть один з них, щоб попрацювати з окремим слайдом.
Можна видалити або відредагувати деякі кадри.
Усі знімки будуть в одній області. Це не дуже зручно. Щоб вимкнути видимість шару, натисніть на піктограму у вигляді ока поруч із ним. Слайд залишиться у документі і, якщо треба, з'явиться у gif-анімації. Щоб він знову відображався, натисніть на місце, на якому було «око».
Якщо хочете спробувати інший тип візуалізації (під аквареллю, олівці, неонові вогні), натисніть на «Фільтри» у рядку меню.
Щоб додати ефект Photoshop (світлення, тінь, градієнт, візерунок), клацніть правою кнопкою миші на шар і виберіть «Параметри накладання».
Щоб поміняти місцями слайди, перетягніть курсором.
Для вибору часу показу (або затримки) кадру натисніть на маленький чорний трикутник під ним.

Анімація з картинок

Ось як створити анімацію у Фотошопі, використовуючи картинки:

Вставте потрібні зображення. Кожне з них додайте свій шар (шар під назвою «Фон» видаліть).
Зазвичай малюнки відкриваються у вікнах або вкладках (залежить від налаштувань Photoshop). Щоб поєднати їх в одній робочій області, скопіюйте їх туди або перемістіть. Вони автоматично вирушать на нові шари.
Перейдіть в Вікно - Робочі середовища - Рух. Активується панель «Анімація» із програвачем.
Виберіть шар, який має стати першим кадром у вашій GIF .
Зробіть решту листів невидимими, натиснувши на іконку у вигляді ока поруч із ними.
На панелі з програвачем клацніть на кнопку «Перетворити на анімацію» справа внизу. Вона схожа на прямокутник, поділений на три частини.
Там буде один кадр із вибраним вами шаром. Продублюйте його. Для цього натисніть на маленьку кнопку «Створення копії».
Зробіть потрібну вам кількість слайдів.
Вийшла gif-анімація з однієї картинки. Щоб це виправити, натисніть на другий кадр і зробіть видимим другий шар, прибравши «очі» з першого. Відобразиться потрібний об'єкт.
Отже, по черзі «заповнюйте» слайди.

Якщо ви створюєте великий макет, цей спосіб забере багато часу. У цьому випадку можна зробити таке:

На інструменті "Анімація" у верхньому правому кутку (на самій панелі, а не на вікні Photoshop) є кнопка, схожа на список зі стрілкою. Натисніть на неї.
У меню виберіть «Створити кадри з шарів».

З зображеннями доступні ті ж дії, що й зі слайдами відео.

Збереження gif-анімації

Важливо ще розібратися, як зберегти анімацію у Фотошопі. Якщо її оформити як psd-файл або «статичну» картинку з розширенням jpg, bmp, png, ніякого сенсу не буде. Замість руху, трансформації чи миготіння вийде один застиглий кадр. Щоб зробити набір малюнків, що змінюються, треба перетворити документ у формат GIF.

Коли закінчите роботу у Photoshop, не поспішайте його закривати та перетворювати на psd-проект.
Перейдіть до Файл - Зберегти як. Або натисніть клавіші Shift+Ctrl+S.
Введіть ім'я свого творіння і вкажіть папку, в яку хочете його помістити.
У списку «Тип», що випадає, виберіть «CompuServe GIF».
Підтвердьте дію.

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

Доброго вечора, дорогі передплатники та просто читачі мого блогу! Чи готові Ви дізнатися про те, як "оживити" свою картинку? І не за допомогою магії, а за допомогою всього нашого улюбленого фотошопу! Як довго я відкладав цей урок, сам не розуміючи чому. Адже це основи фотошопу! Але тепер я наважився виправитися.

І виправитися настільки, що наприкінці відео на Ваш чекає ще й відео урок про те, як робити анімацію у фотошопі.

Я довго не писав уроки з фотошопу, і в мене були на те причини. Адже я закінчував свою розповідь “ ”. Прошу прочитати його, і висловити свою думку прямо в коментарях!

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

У нас є Чіполліно, і нам потрібно зробити так, щоб він махав нам ручкою.

Крок 1.Для початку потрібно "включити" анімацію у фотошопі. Для цього заходимо "Вікно"->"Анімація". Може ще бути написано "Шкала часу".

Крок 2Для того, щоб рука ворушилася, нам потрібно вирізати її і ставити в різні положення. Для вирізання руки я особисто використовую "Магнітне ласо". Робимо копію основного ( Ctrl+J) та працюємо з копією. Оригінал не чіпаємо.

Виділяємо акуратно руку та вирізаємо її!

Крок 3А тепер вставляємо нашу руку, як би це не звучало, і ставимо її в різні положення. Вставлятиметься рука в нові шари, нам це навіть на руку.

Крок 4.Цей крок необов'язковий, але краще використовуючи інструмент "Ластик" трохи підправити руку, зробивши її природнішою. Важко це пояснити, звичайно, на словах. Якщо зрозуміли для чого ми використовуємо гумку, то виконуйте цей крок, якщо все ж таки не зрозумієте, можете пропустити. Це не важливо, тому що нам найголовніше навчитися створювати просту анімацію!

Крок 5.Тепер працюємо із кадрами. У кожному кадрі включаємо лише ті шари, які нам потрібні. Наприклад, у 1 кадрі нам потрібен наш оригінал, а у нашому випадку "Шар 0".

Тепер створюємо новий кадр:

І вже до нового кадру включаємо інші верстви. Тобто наш "Шар 0 копія"і "Шар 1"тобто інше положення руки. Сподіваюся, алгоритм зрозумілий Вам, дорогі читачі.

Крок 6Виставляємо затримку кадру. Тобто через який проміжок часу буде показаний наступний кадр.

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

Вибираємо формат (по дефолту стоїть GIF) та зберігаємо.

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

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

Для анімації інтерфейсу, створення інтерактивних прототипів або рекламних роликів використовують спеціальні програми, наприклад Adobe Animate або After Effects.

Щоб створити простий веб-банер або презентацію, не обов'язково розумітися на спеціальних програмах. Для цього підійдуть і інтегровані засоби Photoshop.

З чого почати

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

Для створення анімації я взяв один із яскравих проектів з Behance та перемалював його у Photoshop. Вирівняв по сітці, підібрав розміри і помістив кожен елемент в окремий шар. В результаті у мене з'явився відмальований у PSD-форматі перший екран сайту, який я потім анімував.

Шкала часу

Перед створенням анімації необхідно підготувати потрібні інструменти – увімкнути відображення «Шкали часу», яка допомагає керувати кадрами в анімації.

Для цього я відкриваю вкладку «Вікно» та ставлю галочку навпроти рядка «Шкала часу».

Внизу вікна Photoshop має з'явитися широкий рядок, за допомогою якого можна керувати кадрами в анімації.

Щоб створити перший кадр, натискаю іконку "Створити анімацію кадру" на "Шкалі часу".

Після того, як перший кадр з'явився, можна розпочати створення руху.

Проміжні кадри

У Photoshop елемент можна анімувати кількома способами:

Намалювати кілька кадрів, вручну змінюючи положення та властивості елементів. Якщо анімація досить довга, промальовування кожного кадру займає багато часу.
Вставити проміжні кадри. Необхідно вручну задати лише стану макета: на початку та наприкінці анімації. Необхідні кадри між цими станами додасть Photoshop. Цей спосіб підійде, щоб зробити поступову появу та зникнення об'єкта або показати його переміщення.

Спочатку я анімую зображення балалайки. Для плавної появи зображення використовую інструмент "Вставка проміжних кадрів". Щоб Photoshop самостійно анімував елемент, необхідно задати два стани для елемента - початковий у першому кадрі та кінцевий наступний.

Тому я додам ще один кадр у "Шкалу часу" за допомогою кнопки "Створити копію кадрів".

Після додавання нового кадру перемикаюся на перший і прибираю видимість шару з балалайкою. Також можна встановити непрозорість шару 0%.

На наступному кадрі перевіряю, чи видно шар із балалайкою.

Після роботи із зображенням балалайки налаштовую появу текстового рядка. У першому кадрі я виділяю текст Soul sings і зрушую його вправо за межі макета. З текстом "3 strings" роблю так само - зрушую вліво, поки він не зникне.

У другому кадрі повертаю текст назад.

Чудово. Тепер вставимо проміжні кадри між ключовими.

Для цього натискаю кнопку "Створення проміжних кадрів" на "Шкалі часу".

У діалоговому вікні, що з'явилося, вказую, скільки кадрів необхідно додати.

Чим більше кадрів, тим довше анімація та плавніше рухається елемент. Якщо кадрів замало - елементи рухатимуться ривками.

Перша частина анімації готова. Тепер її можна відтворити та подивитися, що вийшло.

Натискаю кнопку відтворення на «Шкалі часу».

Вставка проміжних кадрів допомогла швидко створити анімацію з плавною появою та рухом елементів.

Поява, зникнення і рух можна комбінувати один з одним, щоб досягти ще цікавіших ефектів.

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

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

Я кілька разів скопіюю останній кадр, щоб створити рух стрілки та тексту «go to shopping».

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

Тепер можна запустити анімацію та подивитися результат.

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

Тому я збільшив тривалість останнього кадру: потрібно натиснути на стрілку біля напису "0 сек." та вибрати інший час зі списку.

Для останнього кадру я поставив тривалість у дві секунди. Тепер відтворення сповільнюється наприкінці. Тому за рухом елементів зручно спостерігати.

Збереження та експорт

У вікні попереднього перегляду можна ще раз переглянути анімацію та змінити параметри збереження.

За промовчанням після відтворення анімація зупиняється. Тому змінюю режим відтворення на «Повторення» і зберігаю.

Ось яка анімація вийшла в результаті:

Висновок

У 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

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

У цій статті я розповім про те, що таке анімація у фотошопі. Ми з вами подивимося, як працює анімація у фотошопі на прикладі створення новорічного банера.

Я працюватиму в Adobe Photoshop CS6. Інтерфейс у мене російська, оскільки я пишу з роботи.

Вдома у мене стоїть англійська версія, і вам раджу вчитися на англійській версії, ось чому:

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

Приступаємо до створення анімації у фотошопі CS6

Запускаємо фотошоп.

Створюємо новий документ File-New (Ctrl+N).

У вікні задаємо розміри банера: 600 х 120, назвемо його «Новорічний банер» -> «Ок».

Створюємо тло

Я заздалегідь підбираю матеріали, які використовуватиму в роботі (фони, шрифти тощо).

Відкриваємо підготовлену текстуру: Ctrl+O. Завантажити текстуру, що використовується мною, ви можете.

Відкриваємо палітру шарів "Layers" - F7.

Виділяємо вікно з текстурою, перетягуємо шар із палітри шарів на шар із банером.

Якщо текстура виявилася надто маленькою або дуже великою, ніж банер, відкоригуйте її розмір за допомогою трансформації «Ctrl+T».

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

Після того, як підігнали текстуру за розміром банера, переходимо до її корекції кольору.

Заходимо в меню "Image" - "Adjustsments" - "Hue/Saturation" (Зображення - Корекція - Колірний тон/Насиченість).

Я виставила такі налаштування, щоб досягти яскравого, насиченого кольору:

Пишемо текст

Створюємо новий шар (Ctrl + Shift + N) або клацаємо по іконці нового шару на панелі шарів.

Вибираємо інструмент "Horizontal Type Tool" (T).

Вибираємо пензель із будь-якою зіркою, малювати буде білим кольором #ffffff. Щоб вибрати колір, клацніть на маленькому квадратику внизу в лівій панелі.

На новому шарі малюємо зірочки у довільних місцях. Щоб зірки вийшли яскравіше, клацаємо по кілька разів в одному місці. Ось що вийшло у мене:

Робимо дублікат шару (Ctrl+J). Клацаємо на іконку ока на панелі шарів, щоб приховати видимість попереднього шару.

Виділіть верхній шар із копією зірок. На панелі ліворуч виберіть інструмент Lasso Tool(L).

Виділяємо кожну зірку по черзі, натискаємо «V»(інструмент Move Tool) та переносимо на будь-яке інше місце, таким чином у нас у різних кадрах зірочки будуть на різних місцях, завдяки чому створиться ефект мерехтіння.

Після того, як пересунете всі зірки на інше місце, створіть дублікат шару, на якому працювали (Ctrl+J), сховайте попередній шар на панелі шарів, клацнувши на очко, і знову повторіть операцію по переміщенню зірок на нові місця, ви також можете домалювати кілька нових зірок.

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

Все готово.

Переходимо до створення анімації у фотошопі

Відкриваємо тимчасову шкалу. Заходимо в меню "Window" - "Timeline" (Вікно - Шкала часу).

У панелі шкала часу, що з'явилася, знаходимо кнопку посередині «Create Video Timeline» (Створити тимчасову шкалу для відео).

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

У нас відкрилася панель покадрової анімації. Зараз у ній лише один кадр, в якому показані всі видимі шари (зміст виділеного кадру показується в основному вікні на моніторі).

Переходимо на палітру шарів - F7. Нам необхідно зараз відключити два верхні шари із зірками (клацніть по оку), залишивши видимим лише один. Це буде першим кадром.

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

Знову клацаємо на значок нового кадру. Вимикаємо другий шар із зірками, включаємо третій.

Зверніть увагу на якийсь час під кожним кадром, це тривалість показу кадру. 5 сек, які стоять за умовчанням, для нас дуже багато - анімація буде гальмувати, клацніть на стрілочку і встановимо тривалість кожного кадру по 0,1 сек.

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

У вікні вказуємо скільки проміжних кадрів ми хочемо створити. Я поставлю 2. Для всіх кадрів крім останнього ставимо «Наступний кадр».

Між першим та другим ключовими кадрами у вас з'явилося 2 проміжні.

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

Виділяємо останній кадр у шкалі часу. Натискаємо на кружки. У вікні, у рядку «Проміжні кадри» вибираємо «Перший кадр», кадрів додаємо так само 2.