Анімація логотипу

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

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

Як вибрати правильний колір для Вашого логотипу?

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

 

Анімація логотипу в After Effects

Крок 1. Підготуйте файл з логотипом.

Фактично ми розпочнемо наш посібник з анімації логотипу в Adobe Illustrator (або в аналогічному програмному забезпеченні для розробки логотипів). Це необхідно для того, щоб переконатися, що наш файл логотип налаштований для анімації.

Реєстрація логотипу

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

Логотип також має бути багатошаровим, а не згрупованим в один об'єкт. Це дозволяє легко створювати складніші анімації, анімуючи окремі частини логотипу. Ви можете створювати нові шари за допомогою кнопки «  Додати новий шар » в нижній частині панелі «Шари», а потім копіювати і вставляти в них частини свого логотипу.

Нарешті, оскільки цифрова анімація за своєю природою, ми також працюємо з квітами RGB . Якщо файл Illustrator встановлено в CMYK, ви можете змінити це, вибравши свій логотип та навігації до Edit > Edit Colors > Перетворити на RGB .

Коли ви будете готові, експортуйте свій логотип як багатошаровий векторний файл. Оскільки типи файлів After Effects відносяться до сімейства програмного забезпечення Adobe, я збираюся зберегти створений мною логотип у вигляді файлу AI (Adobe Illustrator), але є кілька різних типів векторних файлів на вибір, якщо ви використовуєте інше програмне забезпечення.

Крок 2. Імпортуйте логотип в After Effects. анімація логотипу

Відкрийте After Effects. На перший погляд інтерфейс може здатися складним, тому давайте розберемося з основ:

 

1. Панель інструментів : тут ви можете отримати доступ до основних інструментів побудови графіки, Таким як інструмент "Перо", інструмент "Текст" і т.д.
2. панель проекту : Тут ви керуєте і систематизуєте мультимедійні дані для всього проекту.
3. вікно композиції : це вікно попереднього перегляду відео, в якому ви можете переглянути анімацію для поточної композиції (часто званої композицією), над якою ви працюєте. Композиції — це, по суті, сцени, кожна з яких має окремі часові шкали анімації. Ми обговоримо композиції докладніше у наступному розділі.
4. тимчасова шкала : тут ви створюватимете свою анімацію Він складається як з буквальної часової шкали праворуч (де ви налаштуєте події анімації для запуску на тимчасовому графіку), так і з області компонування зліва (де ви накладатимете і редагуватимете атрибути ваших медіаресурсів).
5. Панель управління : Тут ви можете отримати доступ до різних допоміжних функцій, таких як мультимедійна інформація, параметри абзацу та вирівнювання, а також готові бібліотеки анімації та візуальних ефектів, вбудовані в After Effects.

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

Щоб імпортувати файл з логотипом, просто перетягніть його на панель «Проект» або виберіть «  файл »  > "  імпорт »  > "  файл » . У наступному діалоговому вікні виберіть імпорт мультимедіа як  відеоматеріал і об'єднані шари .

Крок 3. Налаштуйте композицію. Анімація логотипу.

Композиція (comp) – це контейнер, який дозволяє накладати, редагувати та застосовувати анімацію до медіафайлів. Більша продукція, наприклад фільм, міститиме кілька композицій, організованих на панелі проекту. Таким чином, ви можете думати про композиції як про єдину сцену в цьому фільмі, і кожна композиція матиме окрему тимчасову шкалу. У нашому випадку для анімації логотипу, яка триває менше ніж п'ять секунд, потрібно дуже мало композицій.

Почнемо із простого фону. Клацніть правою кнопкою миші на панелі компонування та виберіть « створити »  > "  суцільний » . Оскільки мій логотип білий, я вибрав суцільний чорний колірале ви можете вибрати будь-який колір. У наступному вікні назвіть тверде тіло (у моєму випадку «BG»), натисніть кнопку «  зробити розмір  компа »і виберіть«  ОК » . Тепер перетягніть файл вашого логотипу з панелі проекту на панель тимчасової шкали, і ви повинні побачити свій логотип, попередньо переглянутим у вікні композиції. Якщо ні, не забудьте переупорядкувати шари, перетягнувши суцільне тло під файл логотипу.

Клацніть правою кнопкою миші файл логотипу на панелі компонування і виберіть « створити » > " Перетворити в багатошарову композицію » . Це перетворить ваш файл із логотипом на іншу композицію (ви побачите, що значок змінився). Подвійне клацання файлу логотипу тепер відкриє нову вкладку і перенесе вас у цю нову композицію, яка містить усі окремі шари, які ви налаштували в Illustrator. Тепер ви можете бачити, як працюють comps: вони насправді схожі на вкладені папки.

Анімація логотипу

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

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

Крок 4. Анімація логотипу з використанням ключових кадрів

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

Наприклад, почнемо з дуже простої анімації: поступової появи. До об'єкта прикріплені різні атрибути, а атрибути, що змінюються протягом заданого часу, по суті є анімація. Щоб побачити ці атрибути, клацніть значок «Розгорнути» поряд з логотипом та наступним властивістю «Перетворити» .

Для анімації ви хочете працювати з атрибутом, який вимірює видимість об'єкта: непрозорість. Непрозорість встановлена ​​на 100%, тому що за умовчанням логотип повністю видно.

Клацніть значок секундоміра поруч із параметром «Непрозорість», і ви побачите ромб там, де встановлений маркер курсора відтворення (тьмяна синя лінія, що перетинає часову шкалу). Це ключовий кадр, переважно знімок поточного значення зазначеного атрибута. Перемістіть ключовий кадр, клацнувши та перетягнувши його на позначку 2 секунди на шкалі часу. Перетягніть повзунок до позначки 0 секунд, потім створіть ще один ключовий кадр і встановіть непрозорість на 0%. Натисніть пробіл, щоб переглянути анімацію у вікні композиції.

Після ефектів

Ви побачите, що створили плавну анімацію наростання, змінивши непрозорість з 0% до 100% протягом 2 секунд із двома ключовими кадрами. Саме так і виконується вся анімація у After Effects. Ви можете створити стартовий ключовий кадр і кінцевий ключовий кадр на різних інтервалах вздовж часової шкали і After Effects автоматично обчислює необхідні кадри переходів дістатися з точки А до точки В (традиційно називають проміжні кадри в бізнес-анімації).

Ви можете бачити, що є ряд атрибутів, з якими ви можете працювати в властивості Transform, які ми тут коротко пояснимо. Не соромтеся експериментувати з ключовими кадрами та змінюючи кожен із них, щоб відчути їх можливості анімації:

• Позиція : Цей атрибут описує становище логотипу в просторі X, Y на екрані компонування і дозволяє анімувати лінійне рух.
• Масштаб : Цей атрибут визначає обсяг логотипу (у відсотках від повного розміру вихідного файлу) і дозволяє створювати анімацію збільшення або зменшення.
• обертання : Цей атрибут описує орієнтацію в градусах і дозволяє створювати анімацію обертання.

Порада від професіонала :

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

Крок 5. Анімація логотипу за допомогою шарів-фігур.

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

Як вибрати правильний колір для Вашого логотипу?

Спочатку ми збираємося перетворити логотип на шар-фігуру. На панелі багатошарової композиції (шари, створені на кроці 3) виберіть усі свої шари, клацніть правою кнопкою миші та виберіть «  створити »  > "  Створити фігури з векторного шару » . Ви побачите, кожен шар дубльований зіркою поруч із ним — це шар-фігура. Вкладене під шар-фігуру, ви знайдете властивість Content на додаток до властивості Transform . Справа від властивості Content ви також побачите кнопку « Додати » , Яка дозволить вам вибрати ще більше атрибутів для анімації.

Масштабування об'єкта в Adobe Illustrator

Обрізати шляхи

Для свого логотипу я використав досить поширену та корисну анімацію, використовуючи властивість Trim Paths. Для цього я додав "Обрізати контури" за допомогою кнопки " Додати » до шарів форми кожної літери, встановив для ключового кадру атрибута «Кінець» значення 0% на початку шкали часу і 100% приблизно 1 секунду. Як бачите, при цьому контур букв здається намальованим невидимою рукою в реальному часі.

Використання властивості Trim Paths дозволяє анімувати лінії, щоб вони малювалися самі по собі в реальному часі.

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

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

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

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

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

Ви виявите, що як тільки ви почнете аналізувати їх, використовуючи свої нові знання про те, як анімувати логотип, багато хто з них засновані на простих маніпуляціях з формами та перетвореннями (навіть ті, які явно накладені на просунуті стилізовані ефекти). Як тільки ви знайдете кілька з них, які вам сподобаються, ви можете працювати у After Effects у зворотному напрямку, щоб спробувати реконструювати ці анімації для практики.

Крок 6. Налаштуйте час.

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

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

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

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

Перетворити ключові кадри на автоматичну Безьє

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

Клацніть один із ключових кадрів і наведіть курсор миші на інструменти Безьє, поки не знайдете той, який позначений як «  Перетворити ключові кадри в автоматичну Безьє » . Коли ви натиснете на це, ви побачите, що на графіці з'явиться жовтий маркер. Перетягування цього маркера призведе до згинання лінії, і це змінить час вашої анімації. Якщо крива більш виражена, кадри відтворюватимуться швидше, а де крива більш плавна, кадри відтворюватимуться повільніше.

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

Крок 7. Експортуйте логотип.

Коли ви готові експортувати готовий анімований логотип, виберіть « файл » > "  експорт »  > "  Додати в чергу Adobe Media Encoder » . After Effects за промовчанням експортує файл у форматі MP4, що підходить для відео. Оскільки ми хочемо створити файл зображення нашого логотипу, яким можна поділитися, ми експортуватимемо його як анімований GIF. У вікні Media Encoder клацніть стрілку поруч із виділеним синім рядком тексту під словом «Формат» і виберіть «  Анімований GIF » . Ви також можете встановити папку призначення для готового файлу, клацнувши синій текст під словами «Вихідний файл».

Двічі клацніть виділений синій текст під налаштуванням, щоб відкрити вікно «Параметри експорту». Є кілька варіантів, на які ви хочете звернути увагу, щоб зменшити розмір файлу: Якість (я виставив 20), Частота кадрів (я встановив 10, хоча для відео рекомендується більш висока частота кадрів (fps). ) і тривалість, це синя смуга під попереднім переглядом (я обрізав свій до 4 секунд). Виберіть  добре,  щоб закрити це вікно.

Коли ви закінчите, виберіть зелений значок «Відтворити» у верхньому правому куті Media Encoder, і ваш файл буде відображено у вибрану папку призначення. Ось і все: готова анімація логотипу!

Пожвавите свій бренд за допомогою анімація логотипу.
-

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

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

 АЗБУКА

 

Визначення і терміни веб-дизайну