Анимацията на лого е процес на въвеждане на движение или промени във визуалните елементи в лого, за да го направи по-динамично и привлекателно. Може да се прилага към различни части на лого, като текст, изображения, цветове и форми, и може да има различна степен на сложност, варираща от прости анимации като мигащ текст или избледняващи цветове до сложни анимации, включващи движещи се или интерактивни обекти ефекти.
Анимацията на лого става все по-често срещана. Между смартфоните и общото развитие на интернет технологията, логата вече са много по-често срещани в цифровите пространства и това отваря вратата за визуални ефекти като анимация, които не са възможни с физически продукти. Разбира се, нарастващата популярност на лого анимацията означава, че все повече марки ще се нуждаят от нея, за да останат конкурентоспособни. Така че да научите как да анимирате лого може да бъде ценно умение, което ще изведе вашето лого на следващото ниво.
В същото време софтуерът за анимация стана по-разпространен, рационализиран и интуитивен, за да поддържа тази нарастваща потребителска база. Така че, без значение колко техническа и сложна анимация на лого може да звучи, дори начинаещите вече могат да създават прости, но ефективни анимации.
Анимация на лого в After Effects -
Стъпка 1. Подгответе вашия лого файл.
Всъщност ще започнем нашия урок за това как да анимираме лого в Adobe Illustrator (или подобен софтуер за дизайн на лого). Това е необходимо, за да гарантираме, че нашият файл лого, настроено за анимация.
Въпреки че самият софтуер за анимация е растерен, оригиналните файлове с лого трябва да са във векторен формат. Това ви позволява да ги променяте без щета за качество на изображението (например увеличаването на растерно лого води до пикселизация) и това ще бъде полезно по-късно, когато работите със слоеве с форми.
Уверете се, че вашето лого е разделено на слоеве с помощта на панела със слоеве.
Логото също трябва да бъде многопластово, а не групирано в един обект. Това улеснява създаването на по-сложни анимации чрез анимиране на отделни части от логото. Можете да създавате нови слоеве с помощта на " Добавете нов слой" в долната част на панела със слоеве и след това копирайте и поставете части от вашето лого в тях.
И накрая, тъй като анимацията е цифрова по природа, ние работим и с RGB цветове. Ако вашият файл на Illustrator е настроен на CMYK, можете да промените това, като изберете вашето лого и отидете на Редактиране > Редактиране на цветове > Преобразуване в RGB.
Когато сте готови, експортирайте вашето лого като напълно наслоен векторен файл. Тъй като файловите типове After Effects са част от семейството на софтуера на Adobe, ще запазя създаденото от мен лого като AI файл (Adobe Illustrator), но има няколко различни типа векторни файлове, от които да избирате, ако използвате друг софтуер.
Стъпка 2: Импортирайте вашето лого в After Effects. Анимация на лого
Отворете After Effects. Интерфейсът може да изглежда сложен на пръв поглед, така че нека разбием основите:
- Toolbar : тук можете да получите достъп до основния графични инструментикато инструмента Pen, инструмента Type и т.н.
- Панел за проекти : Това е мястото, където управлявате и организирате медийни файлове за целия проект.
- Прозорец за композиция : Това е прозорец за визуализация на видео, където можете да визуализирате анимацията за текущата композиция (често наричана композиция), върху която работите. Композициите са по същество сцени, всяка със собствени отделни времеви линии на анимация. Ще обсъдим композициите по-подробно в следващия раздел.
- Хронология : Това е мястото, където ще създадете вашата анимация. Състои се от буквална времева линия вдясно (където ще настроите анимационни събития, които да се изпълняват на времевата линия) и област за оформление вляво (където ще наслагвате и редактирате атрибутите на вашите медийни активи).
- Панель управления : Тук можете да получите достъп до различни поддържащи функции като медийна информация, опции за абзаци и подравняване и предварително изградени библиотеки за анимация и визуални ефекти, вградени в After Effects.
Ако не сте сигурни за даден инструмент или бутон, задържите курсора на мишката върху него, ще получите описание.
За да импортирате файл с лого, просто го плъзнете в панела на проекта или изберете Файл " > « Импортиране " > « Файл " . В следващия диалогов прозорец изберете Импортиране на мултимедия като кадри и обединени слоеве .
Стъпка 3: Настройте композицията си. Анимация на лого.
Композицията (comp) е контейнер, който ви позволява да композирате, редактирате и прилагате анимация към медийни файлове. По-голяма продукция, като например филм, ще съдържа множество песни, организирани в панел на проекта. Така че можете да мислите за песните като за една сцена в този филм и всяка песен ще има своя отделна времева линия. В нашия случай анимация на лого, която продължава по-малко от пет секунди, изисква много малко композиции.
За да персонализирате композицията си, плъзнете медийни файлове от лявата страна на панела на времевата линия.
Нека започнем с прост фон. Щракнете с десния бутон върху панела с оформление и изберете " Създаване " > « твърдо" . Тъй като логото ми е бяло, избрах плътно черен цвят, но можете да изберете всеки цвят. В следващия прозорец наименувайте твърдото вещество (в моя случай „BG“), щракнете върху „ Направи размер компютър" и изберете " ДОБРЕ" . Сега плъзнете файла с вашето лого от панела на проекта към панела на времевата линия и трябва да видите вашето лого визуализирано в прозореца за композиция. Ако не, не забравяйте да пренаредите слоевете, като плъзнете плътния фон под файла с логото.
Щракнете с десния бутон върху файла с логото в панела за оформление и изберете Създаване " > « Преобразуване в многопластова композиция" . Това ще превърне вашия файл с лого в различна композиция (ще видите, че иконата е променена). Двойното щракване върху файла с логото сега ще отвори нов раздел и ще ви отведе до тази нова композиция, съдържаща всички отделни слоеве, които сте настроили в Illustrator. Сега можете да видите как работят comps: те по същество са като подпапки.
Анимация на лого
Ако желаете, можете да конвертирате всеки от тези слоеве в отделни композиции, като щракнете с десния бутон и изберете Предварителен състав" . Това ще даде на този слой собствена времева линия на анимация, вложена в предишната композиция. И ако искате да анимирате цялото лого наведнъж, трябва да използвате времева линия, свързана с основната композиция.
Като приключим с това, нека разберем как работят тези времеви линии за анимация.
Стъпка 4: Анимирайте логото с помощта на ключови кадри
After Effects (и повечето софтуери за анимация) работят с ключови кадри. Ключовите кадри са по същество маркери, които можете да зададете на времевата линия, за да определите кога трябва да настъпят началното и крайното състояние на вашата анимация.
Например, нека започнем с една много проста анимация: затихване. Един обект има различни атрибути, прикачени към него, а атрибутите, които се променят за даден период от време, са по същество анимация. За да видите тези атрибути, щракнете върху иконата Разгъване до логото, последвано от свойство "Конвертиране" .
Създайте ключови кадри, като щракнете върху иконата на хронометър до Properties в панела Timeline.
За избледняваща анимация искате да работите с атрибута, който измерва видимостта на обект: непрозрачност. Непрозрачността е зададена на 100%, тъй като по подразбиране логото е напълно видимо.
Щракнете върху иконата на хронометър до опцията Opacity и ще видите диамант, където е поставен маркерът за възпроизвеждане (бледа синя линия, пресичаща времевата линия). Това е ключов кадър, основно моментна снимка на текущата стойност на определен атрибут. Преместете ключовия кадър, като щракнете и го плъзнете до знака за 2 секунди на времевата линия. Плъзнете плъзгача обратно до знака 0 секунди, след това създайте друг ключов кадър и задайте непрозрачността на 0%. Натиснете интервал, за да видите анимацията в прозореца за композиция.
След ефекти
Ще видите, че сте създали плавна постепенно затихваща анимация чрез промяна на непрозрачността от 0% на 100% за 2 секунди само с два ключови кадъра. Ето как се прави цялата анимация в After Effects. Можете да създадете начален ключов кадър и краен ключов кадър на различни интервали по времевата линия, а After Effects автоматично изчислява необходимите преходи между кадрите, за да стигнете от точка А до точка Б (традиционно наричани междурамки в анимационния бизнес).
Създава се проста гладка анимация с помощта на два ключови кадъра за свойството Opacity.
Можете да видите, че има редица атрибути, с които можете да работите Трансформиране на собственост, което ще обясним накратко тук. Чувствайте се свободни да експериментирате с ключови кадри и да модифицирате всеки от тях, за да усетите възможностите им за анимация:
- Позиция : Този атрибут описва позицията на логото в пространството X, Y на екрана с оформлението и позволява линейното движение да бъде анимирано.
- мащаб : Този атрибут описва размера на логото (като процент от пълния размер на оригиналния файл) и ви позволява да създавате анимации за увеличаване или намаляване.
- Завъртане : Този атрибут описва ориентацията в градуси и ви позволява да създавате ротационни анимации.
Съвет от професионалист :
Когато става въпрос за анимиране на лого, има смисъл да работим в обратна посока (както направихме с постепенното затихване), тъй като анимацията трябва да завърши на готовото, пълно лого. Това означава, че трябва да създадете ключови кадри, преди да промените нещо, така че да имате моментни снимки на стойностите на атрибутите в тяхното състояние по подразбиране. След това можете да преместите тези ключови кадри до желаната крайна точка на времевата линия (колкото дълго искате да продължи анимацията) и да създадете нови ключови кадри за промените в началото на времевата линия.
Стъпка 5. Анимирайте логото с помощта на слоеве с форми.
Сега нека да преминем към по-интересни техники за анимация, използвайки слоеве с форми. Слоевете с фигури са обекти, които съдържат информация за пътя, като опорни точки и съединителни линии (подобни на тези във векторните програми), и манипулирането им отваря вратата към цял набор от възможности за анимация отвъд Трансформирайте свойства .
Как да изберете правилния цвят за вашето лого?
Първо ще преобразуваме логото в слой с форма. В панела Layered Composition (слоевете, създадени в стъпка 3), изберете всички ваши слоеве, щракнете с десния бутон и изберете " Създаване " > « Създаване на форми от векторен слой" . Ще видите, че всеки слой е дублиран със звезда до него - това е слой с форма. Вложени под слоя с формата, ще намерите Съдържание собственост в допълнение на Преобразуване на собственост . Вдясно от Свойства на съдържанието ще видите и бутон " Добавяне " , което ще ви позволи да изберете още повече атрибути за анимиране.
Слоевете с фигури съдържат бутон Add (вдясно от свойството Contents), който ви позволява да добавяте всякакви анимирани свойства, като например изрязващи пътеки.
Мащабиране на обект в Adobe Illustrator
Подрязване на пътеки
За моето лого използвах доста често срещана и полезна анимация, използвайки свойството Trim Paths. За да направя това, добавих „Пътеки за изрязване“, използвайки бутона „ Добавяне " към слоевете с форми за всяка буква, задайте ключовия кадър на атрибута End на 0% в началото на времевата линия и 100% след около 1 секунда. Както можете да видите, очертанията на буквите изглеждат нарисувани от невидима ръка в реално време.
Използването на свойството Trim Paths ви позволява да анимирате линии, така че да се рисуват сами в реално време.
Освен това исках да добавя малко акцентна анимация към фона. Тъй като работя черно-бяло, избрах ефект на лупинг тунел, напомнящ Зоната на здрача. За да направя това, използвах многоъгълния инструмент в панела с инструменти, за да нарисувам фигура в центъра на моята композиция, създавайки нов слой с фигури.
След това добавих свойство Repeater, центрирах позицията и увеличих броя на копията. Това дублира формата, създавайки привидно безкраен тунел. Регулирането на мащаба увеличава разстоянието между всяко копие, а промяната на въртенето ориентира копията в различни посоки за визуален интерес.
И накрая, за да го подправя, поставих ключов кадър на отместване от 0 в началото на времевата линия и по-късно го зададох на отрицателна стойност на времевата линия.
Използвайки слой с многоъгълна форма и свойството Repeater, успях да създам анимиран фон.
Вероятно се досещате, че има много опции за слоеве с форми. Вярно е: има пълни онлайн курсове по темата, посветени на темата, и трябва да отделите време за експериментиране, практика и учене.
Също така не мога да ви кажа кой стил на анимация ще ви подхожда лого или какви конкретни инструменти анимации, от които ще се нуждаете, за да постигнете този стил. Мога обаче да ви дам съвет как да го откриете сами. Потърсете вдъхновение от други анимирани лога, като например вашите конкуренти, марки, на които се възхищавате, и/или сайтове като Pinterest или Dribbble - точно както сте направили, когато първоначално сте създали логото.
Ще откриете, че след като започнете да ги анализирате, като използвате новите си знания за това как да анимирате лого, много от тях се основават на прости манипулации с форми и трансформации (дори тези, които са ясно наслоени с усъвършенствани стилизирани ефекти). След като намерите няколко, които харесвате, можете да работите назад в After Effects, за да опитате да проектирате обратно тези анимации за практика.
Стъпка 6: Задайте времето.
Нека поговорим за времето, което описва скоростта на кадрите на анимацията в цялата анимация. Можете да видите визуално представяне на времето, като отидете в редактора на графики. За да направите това, щракнете върху иконата на графиката (обозначена с редактор на графики, когато задържите курсора на мишката над нея) в горната част на панела на времевата линия и това ще промени времевата линия на линейна графика.
Ако щракнете върху един от атрибутите на ключовия кадър, ще видите права линия от един ключов кадър до следващия. Точно сега, тъй като само ключови кадри за началната и крайната точка, оставихме After Effects да направи времето. Без посока, After Effects премества всеки кадър от анимацията равномерно, което води до идеално права линия.
Редакторът на графики показва синхронизирането на ключови кадри, както е показано в линейната графика.
Но целенасочената промяна във времето е това, което придава на анимацията усещане за реализъм. Например, в анимация на отскачаща топка, топката се движи по-бавно на височината на отскока и по-бързо, когато се приближи до земята поради импулса и гравитацията. С други думи, той не се движи с еднаква скорост през цялата анимация и ако беше така, щеше да се открои като робот.
Инструментите на Bezier, разположени в долната част на графичния редактор, ви позволяват да коригирате кривината на линията на графиката.
Преобразувайте ключови кадри в Auto Bezier
Редакторът на графики ви позволява да регулирате времето на вашата собствена анимация, като използвате така наречените дръжки на Безие, за да трансформирате линия на графика в крива. В долния десен ъгъл на редактора на графики ще видите няколко икони с квадратни точки, прикрепени към линиите – това са инструменти на Bezier.
Щракнете върху един от ключовите кадри и задръжте курсора на мишката над инструментите на Bezier, докато намерите този с етикет " Преобразувайте ключови кадри в Auto Bezier" . Когато щракнете върху това, ще видите жълт маркер, който се появява на графиката. Плъзгането на този манипулатор ще доведе до огъване на линията и това ще промени времето на вашата анимация. Там, където кривата е по-изразена, кадрите ще се възпроизвеждат по-бързо, а където кривата е по-плавна, кадрите ще се възпроизвеждат по-бавно.
По-рязката крива съответства на по-бърза синхронизация, а по-плавната крива съответства на по-бавна синхронизация.
За да разберете наистина нюансите на коригиране на вашия собствен тайминг, е необходим опит с анимацията, поради което ръчното регулиране на кривите на Безие е по-сложна тема. В това ръководство за начинаещи препоръчвам да използвате инструмента Bezier Лесна лекота (което прилага автоматична крива към избрания от вас ключов кадър) за всички времеви интервали на анимация. Можете да кандидатствате Лесна лекота към ключов кадър извън редактора на диаграми, като изберете ключовия кадър и щракнете с десния бутон.
Стъпка 7: Експортирайте вашето лого.
Когато сте готови да експортирате готовото си анимирано лого, изберете " Файл " > « експортиране" > « Добавете Adobe Media Encoder към опашката" . After Effects експортира по подразбиране файл във формат mp4, който е подходящ за видео. Тъй като искаме да създадем файл с изображение за споделяне на нашето лого, ще го експортираме като анимиран GIF. В прозореца на Media Encoder щракнете върху стрелката до маркирания син ред текст под думата „Форматиране“ и изберете „ Анимиран GIF" . Можете също така да зададете целевата папка за вашия готов файл, като щракнете върху синия текст под думите „Изходен файл“.
За да експортирате файл, отидете на File > Export > Add to Adobe Media Encoder Queue и изберете Animated Gif от падащия списък в колоната Format.
Щракнете двукратно върху маркирания син текст под предварително зададената настройка, за да отворите прозореца Опции за експортиране. Има няколко опции, които ще искате да разгледате, за да намалите размера на файла си: Качество (зададох го на 20), Честота на кадрите (зададох го на 10, въпреки че за видео се препоръчват по-високи кадрови честоти (fps)) и Продължителност, която е синята лента при предварителен преглед (аз отрязах моята до 4 секунди). Изберете ДОБРЕ, за да затворите този прозорец.
Когато сте готови, изберете зелената икона за възпроизвеждане в горния десен ъгъл на Media Encoder и вашият файл ще се покаже в избраната от вас целева папка. Това е всичко: готова анимация на логото!
Вдъхнете живот на вашата марка с анимация на лого.
-
Анимацията на лого е нещо повече от популярна тенденция, която марките са принудени да следват. Освен това има неоспорима магия в анимацията на логото и това е чудесен начин да създадете момент на визуално удоволствие за всеки, който взаимодейства с вашата марка. И за щастие софтуерът за анимация се разви така, че почти всеки, независимо от уменията, може да добави малко от тази магия към собственото си лого.
С това казано, въпреки че този урок е предназначен да ви помогне да започнете с основите на анимацията на лого, са необходими много опити и грешки, практика и експериментиране, за да получите нещо извън основната анимация. Ако имате нужда от наистина специална анимация на лого, професионален аниматор на лого си струва инвестицията.
Оставете коментар