Анимација на логото е процес на воведување движење или промени на визуелните елементи во логото за да се направи подинамично и попривлечно. Може да се примени на различни делови од логото, како што се текст, слики, бои и форми, и може да има различни степени на сложеност, кои се движат од едноставни анимации како што се текстот што трепка или бледнее бои, до сложени анимации кои вклучуваат објекти кои се движат или интерактивни ефекти.
Анимацијата со лого станува се почеста. Помеѓу паметните телефони и општиот развој на интернет технологијата, логоата сега се многу почести во дигиталните простори, а тоа ја отвора вратата за визуелни ефекти како анимација кои не се можни со физички производи. Се разбира, зголемената популарност на анимацијата со лого значи дека се повеќе и повеќе брендови ќе им требаат за да останат конкурентни. Така, учењето како да анимирате лого може да биде вредна вештина што ќе го однесе вашето лого на следното ниво.
Во исто време, софтверот за анимација, исто така, стана сеприсутен, рационализиран и интуитивен за поддршка на оваа растечка база на корисници. Значи, колку и да звучи техничка и сложена анимација со лого, дури и почетниците сега можат да креираат едноставни, но ефективни анимации.
Анимација на логото во After Effects -
Чекор 1. Подгответе ја вашата датотека со лого.
Ние всушност ќе го започнеме нашиот туторијал за тоа како да анимирате лого во Adobe Illustrator (или сличен софтвер за дизајнирање лого). Ова е неопходно за да се осигура дека нашата датотека логото поставено за анимација.
Иако самиот софтвер за анимација е растерски, оригиналните датотеки со лого мора да бидат во векторски формат. Ова ви овозможува да ги промените без оштетување за квалитетот на сликата (на пример, зголемувањето на скалата на растерското лого доведува до пикселирање), а тоа ќе биде корисно подоцна кога работите со слоеви на форми.
Проверете дали вашето лого е поделено во слоеви користејќи го панелот Layers.
Логото исто така треба да биде повеќеслојно наместо да се групира во еден објект. Ова го олеснува создавањето посложени анимации со анимирање на поединечни делови од логото. Можете да креирате нови слоеви користејќи го " Додај нов слој" на дното на панелот Layers, а потоа копирајте и залепете делови од вашето лого во нив.
Конечно, бидејќи анимацијата е дигитална по природа, работиме и со RGB бои. Ако вашата датотека Illustrator е поставена на CMYK, можете да го промените ова со избирање на вашето лого и навигација до Уреди > Уреди бои > Претвори во RGB.
Кога ќе бидете подготвени, извезете го вашето лого како целосно слоевит векторска датотека. Бидејќи типовите датотеки After Effects се дел од семејството на софтвери на Adobe, ќе го зачувам логото што го создадов како датотека со вештачка интелигенција (Adobe Illustrator), но постојат неколку различни типови векторски датотеки од кои можете да изберете доколку користите друг софтвер.
Чекор 2: Увезете го вашето лого во After Effects. Анимација со лого
Отворете After Effects. Интерфејсот може да изгледа комплициран на прв поглед, па ајде да ги разложиме основите:
- Toolbar : овде можете да пристапите до главната графички алаткикако што се алатката Пенкало, алатката Тип итн.
- Проектен панел : Ова е местото каде што управувате и организирате медиумски датотеки за целиот проект.
- Прозорец за составување : Ова е прозорец за преглед на видео каде што можете да ја прегледате анимацијата за тековната композиција (често наречена композиција) на која работите. Композициите во суштина се сцени, секоја со свои посебни временски линии за анимација. Во следниот дел подетално ќе разговараме за композициите.
- Времеплов : Ова е местото каде што ќе ја креирате вашата анимација. Се состои од буквална временска линија десно (каде што ќе поставите настани за анимација да се извршуваат на временската линија) и област за распоред лево (каде што ќе ги преклопите и уредувате атрибутите на вашите медиумски средства).
- Контролен панел : Овде можете да пристапите до различни придружни функции, како што се медиумски информации, опции за пасуси и порамнување, како и претходно вградени библиотеки за анимација и визуелни ефекти вградени во After Effects.
Ако не сте сигурни за алатка или копче, ако го ставите глувчето над него, ќе добиете опис.
За да увезете датотека со лого, едноставно повлечете ја во панелот Project или изберете датотека" > « Увоз " > « датотека" . Во следното поле за дијалог, изберете Увези медиум како снимки и споени слоеви .
Чекор 3: Поставете го вашиот состав. Анимација со лого.
Композиција (comp) е контејнер што ви овозможува да составувате, уредувате и применувате анимација на медиумски датотеки. Поголема продукција, како што е филм, ќе содржи повеќе песни организирани во проектен панел. Така, можете да ги замислите нумерите како единствена сцена во тој филм, и секоја песна ќе има своја посебна временска рамка. Во нашиот случај, анимација со лого која трае помалку од пет секунди бара многу малку композиции.
За да го приспособите вашиот состав, повлечете ги медиумските датотеки на левата страна од панелот за временска линија.
Да почнеме со едноставна позадина. Десен-клик на панелот за распоред и изберете „ Создај " > « Цврсто" . Бидејќи моето лого е бело, избрав солидно црна боја, но можете да изберете која било боја. Во следниот прозорец, именувајте го цврстото тело (во мојот случај „BG“), кликнете на „ Направете големина компјутер" и изберете " ДОБРО" . Сега повлечете ја датотеката со логото од панелот Project до панелот Timeline и треба да го видите вашето лого прегледано во прозорецот за композиција. Ако не, погрижете се да ги преуредите слоевите со влечење на цврстата позадина под датотеката со лого.
Десен-клик на датотеката со лого во панелот за распоред и изберете Создај " > « Претвори во повеќеслојна композиција" . Ова ќе ја претвори датотеката со лого во различен состав (ќе видите дека иконата е променета). Со двоен клик на датотеката со лого сега ќе се отвори ново јазиче и ќе ве однесе до оваа нова композиција која ги содржи сите поединечни слоеви што сте ги поставиле во Illustrator. Сега можете да видите како функционираат компонентите: тие се во суштина како подпапки.
Анимација со лого
Доколку сакате, можете да го претворите секој од овие слоеви во посебни композиции со десен клик и избирање Прелиминарен состав“ . Ова ќе му даде на овој слој сопствена временска линија за анимација, вгнездена во претходната композиција. И ако сакате да го анимирате целото лого одеднаш, треба да користите временска линија поврзана со главниот состав.
Со тоа што е надвор од патот, ајде да разбереме како овие временски линии функционираат за анимација.
Чекор 4: Анимирајте го логото со помош на клучни рамки
After Effects (и повеќето софтвери за анимација) работи со помош на клучни рамки. Клучните кадри се во суштина маркери што можете да ги поставите на временската линија за да одредите кога треба да се појават состојбите на почеток и крај за вашата анимација.
На пример, да почнеме со многу едноставна анимација: бледнее внатре. Објектот има различни атрибути поврзани со него, а атрибутите кои се менуваат во одреден временски период се во суштина анимација. За да ги видите овие атрибути, кликнете на иконата Прошири веднаш до логото проследено со имот „Конвертирај“ .
Креирајте клучни кадри со кликнување на иконата на стоперката веднаш до Својства во панелот Времеплов.
За бледнее анимација, сакате да работите со атрибутот што ја мери видливоста на објектот: непроѕирност. Непроѕирноста е поставена на 100% бидејќи стандардно логото е целосно видливо.
Кликнете на иконата на стоперката до опцијата Opacity и ќе видите дијамант каде што е поставен маркерот за репродукција (бледо сина линија што ја преминува временската линија). Ова е клучна рамка, во основа слика на моменталната вредност на одреден атрибут. Поместете ја клучната рамка со кликнување и влечење до ознаката од 2 секунди во временската линија. Повлечете го лизгачот назад до ознаката 0 секунди, потоа креирајте друга клучна рамка и поставете ја непроѕирноста на 0%. Притиснете Spacebar за да ја видите анимацијата во прозорецот за композиција.
По ефектите
Ќе видите дека сте создале непречена анимација со избледување со менување на непроѕирноста од 0% на 100% за 2 секунди со само две клучни кадри. Вака се прави целата анимација во After Effects. Можете да креирате почетна клучна рамка и крајна клучна рамка во различни интервали долж временската линија, а After Effects автоматски ги пресметува потребните преодни рамки за да стигнете од точката А до точката Б (традиционално наречена tween frames во бизнисот со анимација).
Едноставна мазна анимација се креира со користење на две клучни рамки за својството Opacity.
Можете да видите дека има голем број на атрибути со кои можете да работите Трансформирајте имот, што овде накратко ќе го објасниме. Слободно експериментирајте со клучните кадри и модифицирајте ги за да ги почувствувате нивните способности за анимација:
- Позиција : Овој атрибут ја опишува позицијата на логото во просторот X, Y на екранот за распоред и овозможува линеарно движење да се анимира.
- Скала : Овој атрибут ја опишува големината на логото (како процент од целосната големина на оригиналната датотека) и ви овозможува да креирате анимации за зумирање или смалување.
- Ротација : Овој атрибут ја опишува ориентацијата во степени и ви овозможува да креирате анимации за ротација.
Совет од професионалец :
Кога станува збор за анимирање лого, има смисла да се работи наназад (како што направивме со fade-in) бидејќи анимацијата треба да заврши на готовиот, целосно лого. Ова значи дека треба да креирате клучни рамки пред да промените нешто за да имате снимки од вредностите на атрибутот во нивната стандардна состојба. Потоа можете да ги преместите овие клучни кадри до саканата крајна точка на временската линија (колку долго сакате да трае анимацијата) и да креирате нови клучни кадри за промените на почетокот на временската линија.
Чекор 5. Анимирајте го логото користејќи слоеви на форма.
Сега да преминеме на поинтересни техники за анимација користејќи слоеви на форми. Слоевите на форма се објекти кои содржат информации за патеката, како што се точките за прицврстување и линиите за поврзување (слични на оние во векторските програми), а манипулирањето со нив ја отвора вратата за цела палета на можности за анимација надвор од Трансформирајте ги својствата .
Како да ја изберете вистинската боја за вашето лого?
Прво ќе го претвориме логото во слој на облик. Во панелот Layered Composition (слоевите создадени во чекор 3), изберете ги сите ваши слоеви, кликнете со десното копче и изберете " Создај " > « Креирај форми од векторски слој" . Ќе видите дека секој слој е дупликат со ѕвезда до него - ова е слој на облик. Вгнездени под облик слој, ќе најдете Својство на содржината во прилог на Трансформирајте го имотот . На десно од Својства на содржината ќе видите и копче " Додај " , што ќе ви овозможи да изберете уште повеќе атрибути за анимирање.
Слоевите на обликот содржат копче Додај (десно од својството Содржини) кое ви овозможува да додавате секакви анимирани својства, како што се патеките за отсекување.
Скалирање на објект во Adobe Illustrator
Намали патеки
За моето лого, користев прилично вообичаена и корисна анимација користејќи го својството Trim Paths. За да го направите ова, додадов „Патеки за сечење“ користејќи го копчето „ Додај " на слоевите на обликот за секоја буква, поставете ја клучната рамка на атрибутот Крај на 0% на почетокот на временската линија и 100% по околу 1 секунда. Како што можете да видите, контурата на буквите се чини дека е нацртана со невидлива рака во реално време.
Користењето на својството Trim Paths ви овозможува да ги анимирате линиите така што тие се цртаат во реално време.
Дополнително, сакав да додадам некоја акцентна анимација на позадината. Бидејќи работам во црно-бело, избрав ефект на тунел кој потсетува на зоната на самракот. За да го направам ова, ја користев алатката полигон во панелот Алатки за да нацртам форма во центарот на мојата композиција, создавајќи нов слој на форма.
Потоа додадов својство Repeater, ја центрирав позицијата и го зголемив бројот на копии. Ова ја дуплира формата, создавајќи навидум бесконечен тунел. Прилагодувањето на скалата го зголемува просторот помеѓу секоја копија, а менувањето на ротацијата ги ориентира копиите во различни насоки за визуелен интерес.
Конечно, за да го зачинам, на почетокот на временската линија поставив поместување од 0, а подоцна го поставив на негативна вредност на временската линија.
Користејќи слој со полигонална форма и својството Repeater, успеав да создадам анимирана позадина.
Веројатно сте погодиле дека има многу опции за слоеви на форми. Вистина е: има целосни онлајн курсеви на оваа тема на Интернет и треба да одвоите време да експериментирате, вежбате и учите.
Исто така, не можам да ви кажам кој стил на анимација ќе ви одговара логото или кои специфични алатки анимации ќе ви требаат за да го постигнете овој стил. Сепак, можам да ви дадам совет како сами да го откриете. Побарајте инспирација од други анимирани логоа, како што се вашите конкуренти, брендови на кои им се восхитувате и/или сајтови како Pinterest или Dribbble - исто како што правевте кога првично го креиравте логото.
Ќе откриете дека штом ќе започнете да ги анализирате користејќи го вашето ново знаење за тоа како да анимирате лого, многу од нив се засноваат на едноставни манипулации со форми и трансформации (дури и оние кои се јасно напластени со напредни стилизирани ефекти). Откако ќе најдете неколку што ви се допаѓаат, можете да работите наназад во After Effects за да се обидете да ги промените тие анимации за вежбање.
Чекор 6: Поставете го времето.
Ајде да зборуваме за времето, кое го опишува темпото на кадрите за анимација низ анимацијата. Можете да видите визуелно претставување на времето со одење до уредувачот на графикони. За да го направите ова, кликнете на иконата на графиконот (означена како Уредувач на графикони кога лебдите над неа) на горниот дел од панелот за временска линија и ова ќе ја смени временската линија во линиски график.
Ако кликнете на еден од атрибутите на клучните кадри, ќе видите права линија од една клучна рамка до друга. Во моментов, бидејќи само ги обликувавме почетните и крајните точки, оставивме After Effects да го прави тајмингот. Без насока, After Effects ја поместува секоја рамка од анимацијата рамномерно, што резултира со совршено права линија.
Уредувачот на графикони го прикажува тајмингот на клучните рамки како што е прикажано на линискиот график.
Сепак, намерната промена во времето е она што на анимацијата и дава чувство на реализам. На пример, во анимација со топка која отскокнува, топката се движи побавно во висина на отскокнувањето и побрзо додека се приближува до земјата поради импулсот и гравитацијата. Со други зборови, тој не се движи со иста брзина во текот на целата анимација, а ако се движи, би се истакнал како робот.
Алатките Bezier, лоцирани на дното на уредувачот на графикони, ви овозможуваат да ја прилагодите заобленоста на линијата на графиконот.
Претворете ги клучните рамки во Auto Bezier
Уредувачот на графикони ви овозможува да го прилагодите времето на вашата анимација со користење на таканаречените Bezier рачки за да ја трансформирате линијата на графиконот во крива. Во долниот десен агол на уредувачот на графикони, ќе видите неколку икони со квадратни точки прикачени на линии - ова се алатки на Bezier.
Кликнете на една од клучните рамки и лебдете над алатките на Bezier додека не ја најдете онаа означена со „ Конвертирај клучни рамки во Auto Bezier" . Кога ќе кликнете на ова, ќе видите жолт маркер што се појавува на графиконот. Повлекувањето на оваа рачка ќе предизвика свиткување на линијата и тоа ќе го промени времето на вашата анимација. Онаму каде што кривата е поизразена, кадрите ќе се репродуцираат побрзо, а каде што кривата е помазна, кадрите ќе се репродуцираат побавно.
Поостра крива одговара на побрза синхронизација, а помазната крива одговара на побавна синхронизација.
За вистински да ги разберете нијансите на прилагодување на сопственото време потребно е искуство со анимација, поради што рачно прилагодување на кривите на Bezier е понапредна тема. Во овој водич за почетници, препорачувам да ја користите алатката Bezier Лесна леснотија (што применува автоматска крива на клучната рамка што ќе ја изберете) за сите временски интервали на анимација. Можете да аплицирате Лесна леснотија до клучна рамка надвор од уредувачот на дијаграмот со избирање на клучната рамка и десен клик.
Чекор 7: Извезете го вашето лого.
Кога ќе бидете подготвени да го извезете вашето готово анимирано лого, изберете „ датотека" > « Извоз" > « Додајте Adobe Media Encoder во редот“ . After Effects стандардно извезува датотека во формат mp4, што е погодно за видео. Бидејќи сакаме да создадеме датотека со слики за споделување на нашето лого, ќе го извеземе како анимиран GIF. Во прозорецот Медиумски енкодер, кликнете на стрелката веднаш до означената сина линија на текст под зборот „Формат“ и изберете „ Анимиран GIF" . Можете исто така да ја поставите дестинационата папка за вашата готова датотека со кликнување на синиот текст под зборовите „Излезна датотека“.
За да извезете датотека, одете до Датотека > Извоз > Додај во редица за енкодер на Adobe Media и изберете Анимиран Gif од паѓачката листа во колоната Формат.
Кликнете двапати на означениот син текст под претходно поставеното за да се отвори прозорецот Опции за извоз. Има неколку опции што ќе сакате да ги погледнете за да ја намалите големината на вашата датотека: Квалитет (јас го поставив на 20), Стапка на слики (го поставив на 10, иако повисоки стапки на слики (fps) се препорачуваат за видео) и Времетраење, што е сината лента под преглед (јас ја скратив мојата на 4 секунди). Изберете ДОБРО, за да го затворите овој прозорец.
Кога ќе завршите, изберете ја зелената икона Play во горниот десен агол на Media Encoder и вашата датотека ќе се прикаже во вашата избрана дестинација папка. Тоа е сè: завршена анимација со лого!
Оживејте го вашиот бренд со анимација со лого.
-
Анимацијата на логото е повеќе од само популарен тренд што брендовите се принудени да го следат. Има и непобитна магија во анимацијата на логото и тоа е одличен начин да се создаде момент на визуелно задоволство за секој што е во интеракција со вашиот бренд. И за среќа, софтверот за анимација еволуираше така што речиси секој, без разлика на вештина, може да додаде малку од таа магија на сопственото лого.
Со тоа, иако ова упатство е наменето да започнете со основите на анимацијата со лого, потребни се многу обиди и грешки, вежбање и експериментирање за да добиете нешто што е надвор од основната анимација. Ако сакате навистина посебна анимација со лого, професионален аниматор на лого вреди да се инвестира.
Оставить комментарий