Логотипті анимациялау – логотипті динамикалық және тартымды ету үшін оның визуалды элементтеріне қозғалыс немесе өзгерістер енгізу процесі. Оны мәтін, кескіндер, түстер және пішіндер сияқты логотиптің әртүрлі бөліктеріне қолдануға болады және оның мәтіннің жыпылықтауы немесе түсінің өшуі сияқты қарапайым анимациялардан бастап қозғалатын немесе интерактивті объектілерді қамтитын күрделі анимацияларға дейінгі әртүрлі күрделілік дәрежесі болуы мүмкін. әсерлері.
Логотиптік анимация кең таралған. Смартфондар мен интернет технологиясының жалпы дамуы арасында логотиптер қазір цифрлық кеңістіктерде әлдеқайда кең таралған және бұл физикалық өнімдермен мүмкін емес анимация сияқты көрнекі әсерлерге есік ашады. Әрине, логотип анимациясының өсіп келе жатқан танымалдығы бәсекеге қабілетті болып қалу үшін көбірек брендтерге қажет болады дегенді білдіреді. Сондықтан логотипті анимациялауды үйрену сіздің логотипіңізді келесі деңгейге көтеретін құнды дағды болуы мүмкін.
Сонымен қатар, анимациялық бағдарламалық қамтамасыз ету де осы өсіп келе жатқан пайдаланушы базасын қолдау үшін кең таралған, жеңілдетілген және интуитивті болды. Осылайша, логотиптік анимация қаншалықты техникалық және күрделі көрінсе де, тіпті жаңадан бастағандар да қарапайым, бірақ тиімді анимацияларды жасай алады.
After Effects бағдарламасындағы логотип анимациясы -
1-қадам. Логотиптік файлды дайындаңыз.
Біз шын мәнінде Adobe Illustrator бағдарламасында (немесе ұқсас логотипті жобалау бағдарламалық құралында) логотипті анимациялау туралы оқулықты бастаймыз. Бұл біздің файлымызды қамтамасыз ету үшін қажет анимация үшін орнатылған логотип.
Анимация бағдарламалық құралының өзі растрлық болса да, бастапқы логотиптік файлдар векторлық пішімде болуы керек. Бұл оларды онсыз өзгертуге мүмкіндік береді зақымдану кескін сапасы үшін (мысалы, растрлық логотипті үлкейту пиксельденуге әкеледі) және бұл кейінірек пішін қабаттарымен жұмыс істегенде пайдалы болады.
Қабаттар тақтасы арқылы логотипіңіз қабаттарға бөлінгеніне көз жеткізіңіз.
Логотип бір нысанға топтастырылмай, көпқабатты болуы керек. Бұл логотиптің жеке бөліктерін анимациялау арқылы күрделі анимацияларды жасауды жеңілдетеді. "" көмегімен жаңа қабаттарды жасауға болады. Жаңа қабат қосу» Қабаттар тақтасының төменгі жағында, содан кейін логотиптің бөліктерін көшіріп, оларға қойыңыз.
Соңында, анимация цифрлық сипатта болғандықтан, біз RGB түстерімен де жұмыс істейміз. Illustrator файлыңыз CMYK күйіне орнатылған болса, логотипті таңдап, Өңдеу > Түстерді өңдеу > RGB түріне түрлендіру тармағына өту арқылы мұны өзгертуге болады.
Дайын болған кезде, логотипті толық қабатты векторлық файл ретінде экспорттаңыз. After Effects файл түрлері Adobe бағдарламалық жасақтама тобының бөлігі болғандықтан, мен жасаған логотипті AI файлы ретінде сақтаймын (Adobe Illustrator), бірақ басқа бағдарламалық құралды пайдалансаңыз, таңдауға болатын бірнеше түрлі векторлық файлдар бар.
2-қадам: логотипіңізді After Effects қолданбасына импорттаңыз. Логотиптік анимация
After Effects қолданбасын ашыңыз. Интерфейс бір қарағанда күрделі болып көрінуі мүмкін, сондықтан негіздерін талдап көрейік:
- Құралдар тақтасы : мұнда сіз негізгіге қол жеткізе аласыз графикалық құралдарҚалам құралы, Теру құралы және т.б.
- Жоба панелі : Бұл бүкіл жоба үшін медиа файлдарды басқаратын және ұйымдастыратын жер.
- Композиция терезесі : Бұл жұмыс істеп жатқан ағымдағы композицияның (көбінесе композиция деп аталады) анимациясын алдын ала қарауға болатын бейнені алдын ала қарау терезесі. Композициялар - бұл әрқайсысының жеке анимация хронологиясы бар көріністер. Композицияларды келесі бөлімде толығырақ қарастырамыз.
- Хронология : Бұл жерде анимацияңызды жасайсыз. Ол оң жақтағы тура хронологиядан (хронологияда іске қосу үшін анимация оқиғаларын орнатасыз) және сол жақта орналасу аймағынан (мұнда мультимедиа активтеріңіздің атрибуттарын қабаттастыру және өңдеу) тұрады.
- басқару панелі : Мұнда сіз мультимедиа ақпараты, абзац және туралау опциялары және After Effects ішіне енгізілген алдын ала жасалған анимация және көрнекі әсерлер кітапханалары сияқты әртүрлі қолдау көрсететін мүмкіндіктерге қол жеткізе аласыз.
Құрал немесе түйме туралы сенімсіз болсаңыз, тінтуірді оның үстіне апарсаңыз, сізге сипаттама беріледі.
Логотиптік файлды импорттау үшін оны жоба тақтасына сүйреп апарыңыз немесе таңдаңыз Файл » > « Импорттау « > « Файл » . Келесі тілқатысу терезесінде Мультимедианы басқаша импорттау опциясын таңдаңыз бейнелер мен біріктірілген қабаттар .
3-қадам: Композицияңызды орнатыңыз. Логотиптік анимация.
Композиция (композиция) – мультимедиалық файлдарға анимация жасауға, өңдеуге және қолдануға мүмкіндік беретін контейнер. Фильм сияқты үлкенірек қойылымда жоба панелінде ұйымдастырылған бірнеше тректер болады. Осылайша, тректерді сол фильмдегі бір көрініс ретінде қарастыруға болады және әр тректің жеке уақыт шкаласы болады. Біздің жағдайда бес секундтан аз уақытқа созылатын логотиптік анимация өте аз композицияны қажет етеді.
Композицияны теңшеу үшін мультимедиа файлдарын уақыт шкаласы тақтасының сол жағына сүйреңіз.
Қарапайым фоннан бастайық. Орналасу панелін тінтуірдің оң жақ түймешігімен басып, « Жасау « > « Қатты» . Менің логотипім ақ болғандықтан, мен қатты таңдадым қара түс, бірақ кез келген түсті таңдауға болады. Келесі терезеде қатты затты атаңыз (менің жағдайда «BG»), « Өлшем жасаңыз компьютер» және « ЖАРАЙДЫ МА» . Енді логотип файлыңызды Жоба тақтасынан Уақыт шкаласы тақтасына сүйреп апарыңыз және композиция терезесінде логотипті алдын ала қарау керек. Олай болмаса, логотип файлының астындағы қатты фонды сүйреп апару арқылы қабаттарды қайта реттеңіз.
Орналасу панеліндегі логотип файлын тінтуірдің оң жақ түймешігімен басып, таңдаңыз Жасау « > « Көпқабатты композицияға түрлендіру» . Бұл сіздің логотип файлыңызды басқа композицияға айналдырады (белгіше өзгергенін көресіз). Логотиптік файлды екі рет басу жаңа қойындыны ашады және сізді Illustrator бағдарламасында орнатқан барлық жеке қабаттарды қамтитын осы жаңа композицияға апарады. Енді сіз компадардың қалай жұмыс істейтінін көре аласыз: олар ішкі қалталарға ұқсайды.
Логотиптік анимация
Қаласаңыз, осы қабаттардың әрқайсысын тінтуірдің оң жақ түймешігімен басып, таңдау арқылы бөлек композицияларға түрлендіруге болады Алдын ала құрам» . Бұл осы қабатқа алдыңғы композицияның ішінде кірістірілген өзіндік анимация хронологиясын береді. Егер сіз бүкіл логотипті бірден жандандырғыңыз келсе, негізгі композициямен байланысты уақыт шкаласын пайдалануыңыз керек.
Бұл жағдайдан кейін бұл уақыт шкаласы анимация үшін қалай жұмыс істейтінін түсінейік.
4-қадам: Негізгі кадрларды пайдаланып логотипті анимациялаңыз
After Effects (және анимациялық бағдарламалық құралдың көпшілігі) негізгі кадрлармен жұмыс істейді. Негізгі кадрлар – бұл анимацияның басталу және аяқталу күйлерінің қашан орын алу керектігін анықтау үшін уақыт шкаласында орнатуға болатын маркерлер.
Мысалы, өте қарапайым анимациядан бастайық: жоғалу. Объектінің оған тіркелген әр түрлі атрибуттары болады және берілген уақыт аралығында өзгеретін атрибуттар негізінен анимация болып табылады. Бұл төлсипаттарды көру үшін логотиптің жанындағы Кеңейту белгішесін, одан кейін басыңыз "Түрлендіру" қасиеті .
Уақыт шкаласы тақтасындағы Сипаттар жанындағы секундомер белгішесін басу арқылы негізгі кадрлар жасаңыз.
Өшіп бара жатқан анимация үшін нысанның көрінуін өлшейтін атрибутпен жұмыс істегіңіз келеді: мөлдірлік. Мөлдірлік 100%-ға орнатылған, себебі әдепкі бойынша логотип толығымен көрінеді.
«Мөлдірлік» опциясының жанындағы секундомер белгішесін басыңыз, сонда сіз ойнату механизмі маркері орнатылған гауһар тасты көресіз (уақыт шкаласын кесіп өтетін әлсіз көк сызық). Бұл негізгі кадр, негізінен көрсетілген төлсипаттың ағымдағы мәнінің суреті. Негізгі кадрды басып, оны уақыт шкаласында 2 секунд белгісіне апару арқылы жылжытыңыз. Жүгірткіні 0 секунд белгісіне дейін сүйреңіз, содан кейін басқа негізгі кадрды жасаңыз және мөлдірлікті 0% етіп орнатыңыз. Композиция терезесіндегі анимацияны көру үшін Бос орын пернесін басыңыз.
Effects кейін
Небәрі екі негізгі кадрмен 0 секунд ішінде мөлдірлікті 100%-дан 2%-ға дейін өзгерту арқылы біркелкі өшетін анимация жасағаныңызды көресіз. After Effects бағдарламасында барлық анимация осылай жасалады. Уақыт шкаласы бойынша әр түрлі аралықтарда бастапқы негізгі кадрды және аяқталу негізгі кадрын жасауға болады және After Effects A нүктесінен В нүктесіне (анимация бизнесінде дәстүрлі түрде ара кадрлары деп аталады) жету үшін қажетті кадр ауысуларын автоматты түрде есептейді.
Қарапайым тегіс анимация Opacity қасиетіне арналған екі негізгі кадр арқылы жасалады.
Сіз жұмыс істеуге болатын бірқатар атрибуттар бар екенін көре аласыз Мүлікті түрлендіру, біз мұнда қысқаша түсіндіреміз. Негізгі кадрлармен тәжірибе жасап, олардың анимация мүмкіндіктерін сезіну үшін әрқайсысын өзгертіңіз:
- Позиция : Бұл атрибут орналасу экранындағы X, Y кеңістігіндегі логотиптің орнын сипаттайды және сызықтық қозғалысты анимациялауға мүмкіндік береді.
- Үлкейту : Бұл төлсипат логотип өлшемін сипаттайды (түпнұсқа файлдың толық өлшемінен пайызбен) және үлкейтетін немесе кішірейтетін анимацияларды жасауға мүмкіндік береді.
- Айналу : Бұл атрибут бағдарды градуспен сипаттайды және айналу анимацияларын жасауға мүмкіндік береді.
Кәсіби кеңес :
Логотипті анимациялауға келетін болсақ, артқа қарай жұмыс істеу мағынасы бар (біз «өшіру» сияқты), өйткені анимация дайын, толық логотипте аяқталуы керек. Бұл әдепкі күйінде төлсипат мәндерінің суретін алу үшін ештеңені өзгертпес бұрын негізгі кадрларды жасау керек дегенді білдіреді. Содан кейін осы негізгі кадрларды уақыт шкаласында қажетті соңғы нүктеге жылжытуға болады (анимация қанша уақытқа созылғанын қаласаңыз да) және хронологияның басындағы өзгерістер үшін жаңа негізгі кадрлар жасай аласыз.
5-қадам. Пішін қабаттарын пайдаланып логотипті анимациялаңыз.
Енді пішін қабаттарын пайдаланып қызықты анимация әдістеріне көшейік. Пішін қабаттары - бекіту нүктелері мен қосқыш сызықтары (векторлық бағдарламалардағыларға ұқсас) сияқты жол ақпаратын қамтитын нысандар және оларды өңдеу анимация мүмкіндіктерінің толық ауқымына жол ашады. Сипаттарды түрлендіру .
Логотипке дұрыс түсті қалай таңдауға болады?
Алдымен логотипті пішін қабатына түрлендіреміз. Қабатты композиция панелінде (3-қадамда жасалған қабаттар) барлық қабаттарды таңдап, тінтуірдің оң жақ түймешігімен басып, « Жасау « > « Векторлық қабаттан фигуралар жасау» . Әрбір қабаттың жанындағы жұлдызшамен көшірілетінін көресіз - бұл пішін қабаты. Пішін қабатының астына салынғанын табасыз Мазмұн қасиеті қосымша Меншікті түрлендіру . Оң жағында Мазмұн қасиеттері сіз сондай-ақ түймені көресіз » Қосу » , бұл сізге анимациялау үшін одан да көп атрибуттарды таңдауға мүмкіндік береді.
Пішін қабаттарында қиып алу жолдары сияқты анимациялық сипаттардың барлық түрлерін қосуға мүмкіндік беретін Қосу түймесі (Мазмұн сипатының оң жағында) бар.
Adobe Illustrator бағдарламасында нысанды масштабтау
Жолдарды кесу
Мен өзімнің логотипім үшін Trim Paths сипатын пайдаланып, өте кең таралған және пайдалы анимацияны қолдандым. Мұны істеу үшін мен «Кесу жолдары» түймесін « Қосу » әр әріптің пішін қабаттарына End төлсипатының негізгі кадрын уақыт шкаласының басында 0% және шамамен 100 секундтан кейін 1% орнатыңыз. Көріп отырғаныңыздай, әріптердің сұлбасы нақты уақытта көрінбейтін қолмен сызылған сияқты.
Жолдарды кесу қасиетін пайдалану сызықтарды нақты уақыт режимінде сызатындай етіп жандандыруға мүмкіндік береді.
Сонымен қатар, мен фонға кейбір акцент анимациясын қосқым келді. Мен ақ-қара түсте жұмыс істейтіндіктен, мен Ымырт аймағын еске түсіретін циклдік туннель әсерін таңдадым. Ол үшін Құралдар тақтасындағы көпбұрыш құралын пайдаланып, композициямның ортасына фигураны салып, жаңа пішін қабатын жасадым.
Содан кейін мен Repeater қасиетін қосып, орынды ортаға қойдым және көшірмелер санын көбейттім. Бұл пішінді қайталап, шексіз болып көрінетін туннель жасайды. Масштабты реттеу әрбір көшірменің арасындағы кеңістікті арттырады, ал айналдыруды өзгерту көрнекі қызығушылық үшін көшірмелерді әртүрлі бағытта бағдарлайды.
Соңында, оны жақсарту үшін мен уақыт шкаласының басында 0 офсетін негізгі кадрға түсірдім және кейінірек оны уақыт шкаласында теріс мәнге орнаттым.
Көпбұрышты пішін қабатын және Repeater қасиетін пайдалана отырып, мен анимациялық фон жасай алдым.
Сіз пішін қабаттарының көптеген нұсқалары бар екенін болжаған шығарсыз. Бұл рас: тақырыпқа арналған толық онлайн курстар бар және сіз тәжірибе жасауға, тәжірибе жасауға және үйренуге уақыт бөлуіңіз керек.
Сізге қай анимация стилі сәйкес келетінін айта алмаймын логотипі немесе қандай арнайы құралдар осы стильге жету үшін сізге анимациялар қажет болады. Дегенмен, мен сізге оны өзіңіз үшін қалай ашуға болатындығы туралы кеңес бере аламын. Басқа анимациялық логотиптерден шабыт іздеңіз, мысалы, бәсекелестеріңіз, өзіңізге ұнайтын брендтер және/немесе Pinterest немесе Dribbble сияқты сайттар - логотипті бастапқыда жасаған кездегідей.
Сіз логотипті анимациялау туралы жаңа біліміңізді пайдалана отырып, оларды талдауды бастағаннан кейін, олардың көпшілігі қарапайым деректерге негізделгенін көресіз. манипуляциялар пішіндер мен түрлендірулермен (тіпті жетілдірілген стильдендірілген әсерлерімен анық қабатталған). Өзіңізге ұнайтын бірнеше нәрсені тапқаннан кейін, тәжірибе үшін анимацияларды кері инженериялауға тырысу үшін After Effects қолданбасында кері жұмыс істеуге болады.
6-қадам: Уақытты орнатыңыз.
Бүкіл анимациядағы анимациялық кадрлардың қарқынын сипаттайтын уақыт туралы сөйлесейік. Графикалық редакторға өту арқылы уақыттың көрнекі көрінісін көруге болады. Бұл әрекетті орындау үшін, уақыт шкаласы тақтасының жоғарғы жағындағы график белгішесін (меңзерді оның үстіне апарған кезде Графикалық өңдегіш деп белгіленген) басыңыз және бұл уақыт шкаласын сызықтық диаграммаға өзгертеді.
Негізгі кадр атрибуттарының біреуін бассаңыз, бір негізгі кадрдан келесіге дейінгі түзу сызықты көресіз. Дәл қазір біз тек бастапқы және аяқталу нүктелерін негізгі кадрға түсіргендіктен, уақытты жасау үшін After Effects қолданбасын қалдырдық. Бағытсыз After Effects анимацияның әрбір кадрын біркелкі жылжытады, нәтижесінде мінсіз түзу сызық пайда болады.
График өңдегіші сызықтық графикте көрсетілгендей негізгі кадр уақытын көрсетеді.
Дегенмен, уақыттың мақсатты өзгеруі анимацияға шынайылық сезімін береді. Мысалы, доптың серпілу анимациясында доп серпіліс биіктігінде баяу қозғалады және импульс пен ауырлық күшінің әсерінен жерге жақындаған сайын тезірек қозғалады. Басқаша айтқанда, ол бүкіл анимацияда бірдей жылдамдықпен қозғалмайды, егер ол қозғалса, ол робот ретінде ерекшеленетін еді.
График редакторының төменгі жағында орналасқан Bezier құралдары график сызығының қисықтығын реттеуге мүмкіндік береді.
Негізгі кадрларды Auto Bezier түріне түрлендіру
Графикалық редактор графика сызығын қисыққа түрлендіру үшін Bezier деп аталатын тұтқаларды пайдалану арқылы жеке анимация уақытын реттеуге мүмкіндік береді. График редакторының төменгі оң жақ бұрышында сызықтарға бекітілген бірнеше шаршы нүкте белгішелерін көресіз — бұл Bezier құралдары.
Негізгі кадрлардың бірін басып, меңзерді Bezier құралдарының үстіне " деп белгіленгенін тапқанша апарыңыз. Негізгі кадрларды автобеткейге түрлендіру» . Осыны басқан кезде графикте сары маркер пайда болады. Бұл тұтқаны сүйреу сызықтың иілуіне әкеледі және бұл анимация уақытын өзгертеді. Қисық айқынырақ болса, кадрлар жылдам ойнатылады, ал қисық тегіс болса, кадрлар баяу ойнатылады.
Айқынырақ қисық жылдамырақ синхрондауға, ал тегіс қисық баяу синхрондауға сәйкес келеді.
Өз уақытыңызды реттеудің нюанстарын шынымен түсіну үшін анимация тәжірибесі қажет, сондықтан Безье қисықтарын қолмен реттеу неғұрлым жетілдірілген тақырып болып табылады. Бұл бастаушы нұсқаулығында мен Bezier құралын пайдалануды ұсынамын Жеңіл жеңіл (бұл сіз таңдаған негізгі кадрға автоматты қисық сызықты қолданады) барлық анимация уақыт аралықтары үшін. Сіз өтініш бере аласыз Жеңіл жеңіл негізгі кадрды таңдап, тінтуірдің оң жақ түймешігімен басу арқылы диаграмма өңдегішінің сыртындағы негізгі кадрға.
7-қадам: логотипіңізді экспорттаңыз.
Дайын анимациялық логотипті экспорттауға дайын болғанда, « Файл » > « экспорт» > « Кезекке Adobe Media Encoder қосу» . After Effects әдепкі бойынша экспортталады файл пішімінде бейне үшін қолайлы mp4. Біз логотиптің ортақ сурет файлын жасағымыз келгендіктен, оны анимациялық GIF ретінде экспорттаймыз. Media Encoder терезесінде «Формат» сөзінің астындағы мәтіннің бөлектелген көк жолының жанындағы көрсеткіні басып, « Анимациялық GIF" . Сондай-ақ, «Шығыс файлы» сөздерінің астындағы көк мәтінді басу арқылы дайын файлыңыз үшін тағайындалған қалтаны орнатуға болады.
Файлды экспорттау үшін Файл > Экспорттау > Adobe Media Encoder кезегіне қосу тармағына өтіп, Пішім бағанындағы ашылмалы тізімнен Animated Gif тармағын таңдаңыз.
Экспорттау параметрлері терезесін ашу үшін алдын ала орнатудың астындағы бөлектелген көк мәтінді екі рет басыңыз. Файл өлшемін азайту үшін қарастырғыңыз келетін бірнеше опция бар: Сапа (мен оны 20-ға қойдым), кадр жиілігі (бейне үшін жоғары кадр жиіліктері (fps) ұсынылғанымен, мен оны 10-ға қойдым) және Ұзақтық, бұл алдын ала қараудағы көк жолақ (мен өзімді 4 секундқа қысқарттым). таңдаңыз ЖАРАЙДЫ МА, осы терезені жабу үшін.
Аяқтаған кезде, Media Encoder қолданбасының жоғарғы оң жақ бұрышындағы жасыл Ойнату белгішесін таңдаңыз, сонда файлыңыз таңдалған мақсатты қалтада көрсетіледі. Міне, логотиптік анимация аяқталды!
Логотиптік анимация арқылы брендіңізді өмірге әкеліңіз.
-
Логотиптік анимация - бұл брендтер ұстануға мәжбүр болған танымал тренд емес. Сондай-ақ логотипті анимациялаудың даусыз сиқыры бар және бұл сіздің брендіңізбен әрекеттесетін әрбір адам үшін көрнекі ләззат сәтін жасаудың тамаша тәсілі. Бақытымызға орай, анимациялық бағдарламалық қамтамасыз ету дамыды, сондықтан кез келген адам дерлік шеберлігіне қарамастан, өз логотипіне осы сиқырды аздап қоса алады.
Осыған орай, бұл оқулық логотипті анимациялау негіздерінен бастауға арналған болса да, негізгі анимациядан басқа кез келген нәрсені алу үшін көп сынақ пен қате, тәжірибе және тәжірибе қажет. Егер сіз шынымен ерекше логотип анимациясын алғыңыз келсе, кәсіби логотип аниматоры инвестициялауға тұрарлық.
пікір қалдыру