Щоб зробити анімацію, не обов'язково мати якісь феноменальні знання, потрібно просто обзавестися відповідним інструментом і правильно його використовувати. Таких рішень є досить багато, але найвідомішим з них є Adobe Photoshop. У цій статті буде показано, як швидко створити в ньому анімацію.
Якщо Фотошоп відсутній на вашому ПК, завантажуємо його за посиланням вище, після чого встановлюємо, дотримуючись інструкцій цієї статті, і запускаємо.
Етап 1: Підготовка полотна та шарів
Тепер ви можете намалювати те, що буде зображено на анімації. В нашому простому прикладітаким буде квадрат, що рухається. На кожному шарі він зміщується на кілька пікселів праворуч.
Етап 2: Робота з часовою шкалою
Всі! Анімація готова. Ви можете переглянути результат, натиснувши кнопку "Запуск відтворення анімації". А після цього можете зберегти її у форматі GIF.
Таким простим, але перевіреним способом ми зуміли у Фотошопі зробити GIF-анімацію. Звичайно, її можна значно покращити, скоротивши час кадрів, додавши більше кадрів і, звичайно, замість чорного квадрата створивши щось оригінальніше і якісно краще. Але це вже залежить від ваших уподобань, бажань та вміння.
Чи думали ви, як створюються анімовані 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
Так буде виглядати початкове положення світлової плями на літерах. Переміщуйте індикатор поточного часу за шкалою та рухайте шари зі світловими плямами, створюючи ключові кадри. Продовжуйте їх переміщати, доки не закінчите рух цятки по всій літері кожного текстового шару. Для інструкції дивіться кілька скріншотів нижче
Зробимо анімацію у фотошопі
Із самого початку дамо визначення…
Що таке гіф анімація?
Це анімоване зображення, тобто. зображення, яке може рухатись. Гіф анімацію можна зробити з кількох зображень або з відео. Сьогодні, можливо, зробити анімацію онлайн. Завантажте зображення, натисніть створити і буде готова гіф анімація. Також можна зробити гіф анімацію з відео.
Сьогодні ми займемося створенням гіф анімацією у програмі Photoshop.
Нам потрібні фотографії, зображення, малюнки. Я не розповідатиму вам, як редагувати фотографії! Ми займатимемося одним процесом створення анімації!
У мене виникла потреба зробити гіф анімацію. Я подумав, чому б на основі цієї анімації не написати сторінку присвячену темі створення анімації у фотошопі!?
Опишемо повністю процес створення анімації!
Відкриваємо фотошоп, кожне зображення створюємо окремий шар.
Як створити окремий шар для анімації?
Я роблю так: завантажили всі зображення у фотошоп, вирізаємо потрібну частину зображення та вставляємо ці шматки в окремий файл. Окремий файл потрібен для того, щоб ненароком не зіпсувати якусь фотографію у вас на комп'ютері!
Коли ви вставляєте вирізаний шматок в анімацію, шар створюється автоматично!
Якщо у вас немає пункту меню – «Анімація», то натисніть у меню, що випало, показати всі пункти меню.
У самому низу програми фотошоп з'явиться меню керування вашою анімацією. Створюємо стільки копій виділених кадрів, скільки у вас змінюватиметься анімація.
У моїй гіф анімації змінюватиметься зображення 9 разів. Якщо раптом, кількість кадрів виявилася більшою, ніж вам потрібно, то трохи правіше кнопки додати, є кнопка видалити.
Як встановити час показу кожного кадру в анімації?
Нам потрібно показувати кожен кадр у різний час. Щоб відредагувати час показу, натискаємо по маленькій строчці – трикутнику.
У меню вибираємо потрібний час показу кожного кадру. Якщо вам потрібний інший час показу кадру, то вибираємо інший і встановлюємо потрібний час.
Доброго вечора, дорогі передплатники та просто читачі мого блогу! Чи готові Ви дізнатися про те, як "оживити" свою картинку? І не за допомогою магії, а за допомогою всього нашого улюбленого фотошопу! Як довго я відкладав цей урок, сам не розуміючи чому. Адже це основи фотошопу! Але тепер я наважився виправитися.
І виправитися настільки, що наприкінці відео на Ваш чекає ще й відео урок про те, як робити анімацію у фотошопі.
Я довго не писав уроки з фотошопу, і в мене були на те причини. Адже я закінчував свою розповідь “ ”. Прошу прочитати його, і висловити свою думку прямо в коментарях!
А зараз перейдемо безпосередньо до уроку. На відео, яке буде нижче, я розповім як робити текст, що додається поступово, але в текстовому уроці завдання буде трохи складніше.
У нас є Чіполліно, і нам потрібно зробити так, щоб він махав нам ручкою.
Крок 1.Для початку потрібно "включити" анімацію у фотошопі. Для цього заходимо "Вікно"->"Анімація". Може ще бути написано "Шкала часу".
Крок 2Для того, щоб рука ворушилася, нам потрібно вирізати її і ставити в різні положення. Для вирізання руки я особисто використовую "Магнітне ласо". Робимо копію основного ( Ctrl+J) та працюємо з копією. Оригінал не чіпаємо.
Виділяємо акуратно руку та вирізаємо її!
Крок 3А тепер вставляємо нашу руку, як би це не звучало, і ставимо її в різні положення. Вставлятиметься рука в нові шари, нам це навіть на руку.
Крок 4.Цей крок необов'язковий, але краще використовуючи інструмент "Ластик" трохи підправити руку, зробивши її природнішою. Важко це пояснити, звичайно, на словах. Якщо зрозуміли для чого ми використовуємо гумку, то виконуйте цей крок, якщо все ж таки не зрозумієте, можете пропустити. Це не важливо, тому що нам найголовніше навчитися створювати просту анімацію!
Крок 5.Тепер працюємо із кадрами. У кожному кадрі включаємо лише ті шари, які нам потрібні. Наприклад, у 1 кадрі нам потрібен наш оригінал, а у нашому випадку "Шар 0".
Тепер створюємо новий кадр:
І вже до нового кадру включаємо інші верстви. Тобто наш "Шар 0 копія"і "Шар 1"тобто інше положення руки. Сподіваюся, алгоритм зрозумілий Вам, дорогі читачі.
Крок 6Виставляємо затримку кадру. Тобто через який проміжок часу буде показаний наступний кадр.
Крок 7.Зберігаємо нашу. Не дарма я включив цей крок до свого уроку, оскільки збереження гіф-анімації відбувається трохи інакше, ніж просто зображення.
Вибираємо формат (по дефолту стоїть GIF) та зберігаємо.
Створюємо новий файл із розмірами 700 x 300 px.
Відчиняємо вікно Timeline((Вікно - Шкала часу)).
Натискаємо на кнопку « Create Frame Animation» (Створити анімацію кадру).
Використовуючи інструмент () створюємо 3 шару з текстом ("Анімація", "це", "просто").
Інструментом (Інструмент "Переміщення" / Клавіша "V") розміщуємо текст як на зображенні нижче.
У вікні Timeline(Шкала часу) вибираємо перший кадр та натискаємо на кнопку « Duplicates selected frames» (Створення копії виділених кадрів).
Створюємо 4 копії виділених кадрів.
Вибираємо у вікні Timeline(Шкала часу) другий кадрі залишаємо видимими тільки шари « Анімація» та « Фон».
Вибираємо четвертий кадрі залишаємо в ньому видимими Усешари.
Задамо параметр повтору нашої анімації. У меню вікна Timeline(Шкала часу), змінюємо параметр повтору з « Одноразово» на « Постійно» (Зображення нижче).
Тепер ми можемо використовувати відтворення анімації.
Налаштування анімації у «Файл – Зберегти для Web» (File – Save for Web) Photoshop CC. Фінальний результат 
