Створюємо gif прелоадер у фотошопі за 5 хвилин, Уроки анімації, Допомога з фотошопом
З цього уроку ви дізнаєтесь, як створити стильний gif прелоадер у фотошопі. Для довідки: Прелоадер – відображає процес завантаження програм, сайтів тощо. Наприклад, прелоадер можна поставити, поки вантажиться сайт або його окрема частина.
Крок 1: Підготовляємо прелоадер
Створіть новий документ бажаних розмірів, для уроку використав 750х300 px
Візьміть інструментдовільна фігура, на верхній панелі відкрийте панель "Довільна фігура " і виберіть фігуру "Кругла рамка ". Якщо такої немає, її можна додати клацнувши по значку шестерні -> Фігури
Потім виберіть темно-сірий колір, затисніть Shift і накресліть овальну область по центру документа
Крок 2: Створюємо стиль анімації
Анімацію створюватимемо за допомогою стилю шару та шкали часу. Для початку зайдіть у стиль шару, клацнувши двічі по шару з фігурою і перейдіть в пункт "Накладання градієнта ". Далі створіть новий градієнт, слідую скріншотам нижче
Режим накладання: Нормальний; Непрозорість: 100%; Стиль: Кутовий; Кут: 90 про; Перший колір: #363636
Другий колір: # 0cff00; Третій колір такий самий як і перший
Потім перейдіть до "Внутрішнє свічення " і встановіть такі настройки
Натискаєте ОКей. У вас має вийти як на скріншоті нижче
Крок 3: Робимо анімацію
Тепер найголовніше завдання потрібно анімувати наш стиль. Для початку зайдіть у вкладку
"Вікно -> Шкала часу", щоб відкрити панель створення анімації.
Пункти 1 і 2 думаю зрозумілі (розкриваєте Фігура 1 і активуєте стиль. Далі найцікавіше.
Під цифрою 3 я поставив стрілочку право, тобто. При активаціїпараметр "стиль" у вас з'явився жовтий ромбік це наш стиль фігури на момент активації.
Для анімації нам потрібно пересунути червону смужку в право приблизно на відстані, як показано вище.
Потім знову зайдіть у стиль шару фігури та встановіть такі параметри
Тепер ще раз пересуньте червону смугу приблизно на таку ж відстань, зайдіть у стиль шару та встановіть такі параметри
Потім обріжте тимчасову шкалу, підтягнувши за повзунок до останнього стилю, як показано на скріншоті
Щоб анімація повторювалася, поставте галочку у "Цикл відтворення"
Крок 4: Зберігаємо gif прелоадер
Зайдіть "Файл -> Зберегти для Web " Виберіть формат .gif і тисніть зберегти.
