Animimi i logos është procesi i prezantimit të lëvizjes ose ndryshimeve në elementet vizuale në një logo për ta bërë atë më dinamike dhe tërheqëse. Mund të aplikohet në pjesë të ndryshme të një logoje, të tilla si teksti, imazhet, ngjyrat dhe format, dhe mund të ketë shkallë të ndryshme kompleksiteti, duke filluar nga animacionet e thjeshta si teksti që vezullon ose zbehet ngjyrat, deri tek animacionet komplekse që përfshijnë objekte që lëvizin ose ndërveprojnë. efektet.

Animacioni i logos po bëhet gjithnjë e më i zakonshëm. Midis telefonave inteligjentë dhe zhvillimit të përgjithshëm të teknologjisë së internetit, logot tani janë shumë më të zakonshme në hapësirat dixhitale, dhe kjo hap derën për efekte vizuale si animacionet që nuk janë të mundshme me produktet fizike. Natyrisht, popullariteti në rritje i animacionit të logos do të thotë që gjithnjë e më shumë markave do t'ju duhet për të qëndruar konkurrues. Pra, të mësuarit se si të animoni një logo mund të jetë një aftësi e vlefshme që do ta çojë logon tuaj në një nivel tjetër.

Si të zgjidhni ngjyrën e duhur për logon tuaj?

Në të njëjtën kohë, softueri i animacionit është bërë gjithashtu më i kudondodhur, më i efektshëm dhe intuitiv për të mbështetur këtë bazë përdoruesish në rritje. Pra, pavarësisht sa mund të tingëllojë animacioni teknik dhe kompleks i logos, edhe fillestarët tani mund të krijojnë animacione të thjeshta por efektive.

 

Animacioni i logos në After Effects -

Hapi 1. Përgatitni skedarin tuaj të logos.

Ne në fakt do të fillojmë tutorialin tonë se si të animojmë një logo në Adobe Illustrator (ose softuer të ngjashëm për dizajnimin e logos). Kjo është e nevojshme për të siguruar që skedari ynë logoja e vendosur për animacion.

Regjistrimi i logos

Megjithëse vetë softueri i animacionit është raster, skedarët origjinalë të logos duhet të jenë në format vektorial. Kjo ju lejon t'i ndryshoni ato pa dëmtimi për cilësinë e imazhit (për shembull, zmadhimi në një logo raster rezulton në pikselim), dhe kjo do të jetë e dobishme më vonë kur punoni me shtresa të formës.

Pamja e ekranit të Adobe Illustrator me logo brenda animacionit të Logos.

Sigurohuni që logoja juaj të jetë e ndarë në shtresa duke përdorur panelin Layers.

Logoja gjithashtu duhet të jetë me shumë shtresa dhe jo të grupohet në një objekt. Kjo e bën të lehtë krijimin e animacioneve më komplekse duke animuar pjesë të veçanta të logos. Ju mund të krijoni shtresa të reja duke përdorur "  Shto një shtresë të re" në fund të panelit të shtresave dhe më pas kopjoni dhe ngjisni pjesë të logos suaj në to.

Së fundi, duke qenë se animacioni është i natyrës dixhitale, ne punojmë edhe me ngjyrat RGB. Nëse skedari juaj Illustrator është vendosur në CMYK, mund ta ndryshoni këtë duke zgjedhur logon tuaj dhe duke lundruar te Edit > Edit Colors > Convert to RGB.

Kur të jeni gati, eksportoni logon tuaj si një skedar vektorial me shtresa plotësisht. Meqenëse llojet e skedarëve After Effects janë pjesë e familjes së softuerëve Adobe, unë do të ruaj logon që kam krijuar si një skedar AI (Adobe Illustrator), por ka disa lloje të ndryshme skedarësh vektoriale për të zgjedhur nëse jeni duke përdorur softuer tjetër.

Hapi 2: Importoni logon tuaj në After Effects. Animacion logo

Hapni After Effects. Ndërfaqja mund të duket e ndërlikuar në shikim të parë, kështu që le të zbërthejmë bazat:

Animacioni i logos së Adobe After Effects

 

 
  1. toolbar : këtu mund të hyni në kryesore mjetet grafikesi p.sh. vegla Pen, vegla Lloji etj.
  2. Paneli i projektit : Këtu ju menaxhoni dhe organizoni skedarë media për të gjithë projektin.
  3. Dritarja e përbërjes : Kjo është një dritare e shikimit paraprak të videos ku mund të shikoni paraprakisht animacionin për kompozimin aktual (shpesh i quajtur kompozim) me të cilin po punoni. Kompozimet janë në thelb skena, secila me afatet e veta kohore të animacionit. Ne do të diskutojmë kompozimet në më shumë detaje në pjesën tjetër.
  4. Afati kohor : Këtu do të krijoni animacionin tuaj. Ai përbëhet nga një vijë kohore fjalë për fjalë në të djathtë (ku do të konfiguroni ngjarjet e animacionit për t'u ekzekutuar në vijën kohore) dhe një zonë plan urbanistik në të majtë (ku do të mbivendosni dhe modifikoni atributet e aseteve tuaja të medias).
  5. Paneli Kontrollit : Këtu mund të keni akses në veçori të ndryshme mbështetëse si informacioni i medias, opsionet e paragrafëve dhe shtrirjes, si dhe bibliotekat e para-ndërtuara të animacioneve dhe efekteve vizuale të integruara në After Effects.

Nëse nuk jeni të sigurt për një vegël ose buton, vendosja e miut mbi të do t'ju japë një përshkrim.

Për të importuar një skedar logoje, thjesht tërhiqeni atë në panelin e Projektit ose zgjidhni  Dosje "  > «  Import "  > «  Dosje " . Në kutinë tjetër të dialogut, zgjidhni Importo media si  pamjet dhe shtresat e bashkuara .

Hapi 3: Vendosni përbërjen tuaj. Animacion logo.

Një kompozim (comp) është një kontejner që ju lejon të kompozoni, modifikoni dhe aplikoni animacion në skedarët e medias. Një prodhim më i madh, si një film, do të përmbajë këngë të shumta të organizuara në një panel projekti. Kështu që ju mund t'i mendoni pjesët si një skenë të vetme në atë film, dhe secila pjesë do të ketë afatin e saj kohor të veçantë. Në rastin tonë, një animacion logo që zgjat më pak se pesë sekonda kërkon shumë pak kompozime.

After Effects me përbërjen e krijuar. Animacion logo

Për të personalizuar përbërjen tuaj, tërhiqni skedarët e medias në anën e majtë të panelit të vijës kohore.

Le të fillojmë me një sfond të thjeshtë. Klikoni me të djathtën në panelin e paraqitjes dhe zgjidhni " Krijo "  > «  E ngurtë" . Meqenëse logoja ime është e bardhë, zgjodha solide ngjyrë të zezë, por ju mund të zgjidhni çdo ngjyrë. Në dritaren tjetër, emërtoni solidin (në rastin tim "BG"), klikoni "  Bëni madhësinë  kompjuter" dhe zgjidhni "  NE RREGULL" . Tani tërhiqni skedarin tuaj të logos nga paneli i Projektit në panelin Kohëzgjatja dhe duhet të shihni logon tuaj të parashikuar në dritaren e kompozimit. Nëse jo, sigurohuni që të riorganizoni shtresat duke zvarritur sfondin e fortë poshtë skedarit të logos.

Klikoni me të djathtën mbi skedarin e logos në panelin e paraqitjes dhe zgjidhni Krijo " > « Konvertoni në një përbërje me shumë shtresa" . Kjo do ta kthejë skedarin tuaj të logos në një përbërje tjetër (do të shihni që ikona ka ndryshuar). Duke klikuar dy herë në skedarin e logos do të hapeni tani një skedë të re dhe do t'ju çojë te kjo përbërje e re që përmban të gjitha shtresat individuale që keni vendosur në Illustrator. Tani mund të shihni se si funksionojnë komps: ato janë në thelb si nënfolderë.

Animacion Logo

Nëse dëshironi, mund ta shndërroni secilën nga këto shtresa në kompozime të veçanta duke klikuar me të djathtën dhe duke zgjedhur  Përbërja paraprake" . Kjo do t'i japë kësaj shtrese afatin kohor të vet të animacionit, të vendosur brenda përbërjes së mëparshme. Dhe nëse doni të animoni të gjithë logon menjëherë, duhet të përdorni një afat kohor të lidhur me përbërjen kryesore.

Me këtë jashtë rrugës, le të kuptojmë se si funksionojnë këto afate kohore për animacionin.

Hapi 4: Animoni logon duke përdorur kornizat kryesore

After Effects (dhe shumica e programeve të animacionit) funksionojnë duke përdorur kornizat kryesore. Kornizat kryesore janë në thelb shënues që mund t'i vendosni në afatin kohor për të përcaktuar se kur duhet të ndodhin gjendjet e fillimit dhe të përfundimit për animacionin tuaj.

Për shembull, le të fillojmë me një animacion shumë të thjeshtë: venitje. Një objekt ka atribute të ndryshme të bashkangjitura, dhe atributet që ndryshojnë gjatë një periudhe të caktuar kohore janë në thelb animacion. Për të parë këto atribute, klikoni ikonën Zgjero pranë logos, e ndjekur nga pronë "Konverto" .

Animacioni i logos së paneleve kohore të Adobe After Effects

Krijoni korniza kyçe duke klikuar ikonën e kronometër pranë "Properties" në panelin "Kronologjia".

Për një animacion të zbehur, ju dëshironi të punoni me atributin që mat dukshmërinë e një objekti: opaciteti. Opaciteti është vendosur në 100% sepse si parazgjedhje logoja është plotësisht e dukshme.

Klikoni ikonën e kronometër pranë opsionit Opacity dhe do të shihni një diamant ku është vendosur shënuesi i kokës së luajtjes (vija blu e zbehtë që kalon vijën kohore). Ky është një kornizë kyçe, në thelb një fotografi e vlerës aktuale të një atributi të specifikuar. Zhvendosni kornizën kryesore duke klikuar dhe zvarritur atë në shenjën 2 sekonda në vijën kohore. Tërhiqni rrëshqitësin përsëri në shenjën 0 sekonda, më pas krijoni një kornizë tjetër kyçe dhe vendosni opacitetin në 0%. Shtypni Spacebar për të parë animacionin në dritaren e kompozimit.

Pas Efektet

Do të shihni se keni krijuar një animacion të qetë të zbehjes duke ndryshuar opacitetin nga 0% në 100% në 2 sekonda me vetëm dy korniza kyçe. Kështu bëhet i gjithë animacioni në After Effects. Mund të krijoni një kornizë fillestare dhe një kornizë kyçe fundore në intervale të ndryshme përgjatë vijës kohore dhe After Effects llogarit automatikisht kalimet e nevojshme të kuadrove për të kaluar nga pika A në pikën B (tradicionalisht quhet tween frames në biznesin e animacionit).

Gif i animuar i një animacioni në rritje në After Effects

Një animacion i thjeshtë i qetë krijohet duke përdorur dy korniza kyçe për veçorinë Opacity.

Ju mund të shihni se ka një sërë atributesh me të cilat mund të punoni Transformimi i pronës, të cilën do ta shpjegojmë shkurtimisht këtu. Mos ngurroni të eksperimentoni me kornizat kryesore dhe modifikoni secilën prej tyre për të marrë një ndjenjë për aftësitë e tyre të animacionit:

  • Pozicion : Ky atribut përshkruan pozicionin e logos në hapësirën X, Y në ekranin e paraqitjes dhe lejon lëvizjen lineare të animohet.
  • shkallë : Ky atribut përshkruan madhësinë e logos (si përqindje e madhësisë së plotë të skedarit origjinal) dhe ju lejon të krijoni animacione zmadhuese ose zvogëluese.
  • rrotullim : Ky atribut përshkruan orientimin në shkallë dhe ju lejon të krijoni animacione rrotulluese.

Këshilla nga një profesionist :

Kur bëhet fjalë për animimin e një logoje, ka kuptim të punohet mbrapsht (siç bëmë me fade-in) pasi animacioni duhet të përfundojë në logon e përfunduar dhe të plotë. Kjo do të thotë që ju duhet të krijoni korniza kyçe përpara se të ndryshoni ndonjë gjë në mënyrë që të keni fotografi të vlerave të atributeve në gjendjen e tyre të paracaktuar. Më pas mund t'i zhvendosni këto korniza kyçe në pikën përfundimtare të dëshiruar në vijën kohore (për sa kohë që dëshironi që animacioni të zgjasë) dhe të krijoni korniza të reja kyçe për ndryshimet në fillim të vijës kohore.

Hapi 5. Animoni logon duke përdorur shtresa të formës.

Tani le të kalojmë në teknikat më interesante të animacionit duke përdorur shtresat e formës. Shtresat e formës janë objekte që përmbajnë informacione për shtigjet si pikat e ankorimit dhe linjat lidhëse (të ngjashme me ato në programet vektoriale), dhe manipulimi i tyre hap derën për një gamë të tërë mundësish animacioni përtej Transformoni vetitë .

Si të zgjidhni ngjyrën e duhur për logon tuaj?

Së pari ne do të konvertojmë logon në një shtresë formë. Në panelin Layered Composition (shtresat e krijuara në hapin 3), zgjidhni të gjitha shtresat tuaja, kliko me të djathtën dhe zgjidhni "  Krijo "  > «  Krijo forma nga shtresa vektoriale" . Do të shihni se çdo shtresë është dublikuar me një yll pranë saj - kjo është një shtresë e formës. Të mbivendosur nën shtresën e formës, do të gjeni Vetia e përmbajtjes përveç Transformoni pronën . Ne te djathte Karakteristikat e përmbajtjes do të shihni gjithashtu një buton " Shto " , e cila do t'ju lejojë të zgjidhni edhe më shumë atribute për të animuar.

Panelet e afatit kohor të Adobe After Effects

Shtresat e formës përmbajnë një buton Shto (në të djathtë të veçorisë Përmbajtje) që ju lejon të shtoni të gjitha llojet e vetive të animuara, të tilla si shtigjet e prerjes.

Shkallëzimi i një objekti në Adobe Illustrator

Shkurtoj shtigjet

Për logon time, kam përdorur një animacion mjaft të zakonshëm dhe të dobishëm duke përdorur veçorinë Trim Paths. Për ta bërë këtë, unë shtova "Rrugët e Prirjes" duke përdorur butonin " Shto " në shtresat e formës për secilën shkronjë, vendosni kornizën kryesore të atributit Fund në 0% në fillim të vijës kohore dhe 100% pas rreth 1 sekonde. Siç mund ta shihni, skica e shkronjave duket të vizatohet nga një dorë e padukshme në kohë reale.

Trim Paths ju lejon të animoni linjat. Animacion logo

Përdorimi i vetive Trim Paths ju lejon të animoni linjat në mënyrë që ato të vizatohen në kohë reale.

Përveç kësaj, doja të shtoja një animacion të theksuar në sfond. Meqenëse punoj bardh e zi, zgjodha një efekt tuneli looping që të kujton Zonën e Twilight. Për ta bërë këtë, përdora mjetin poligon në panelin e veglave për të vizatuar një formë në qendër të kompozimit tim, duke krijuar një shtresë të re formë.

Më pas shtova një veçori Repeater, vendosa në qendër pozicionin dhe rrita numrin e kopjeve. Kjo dyfishon formën, duke krijuar një tunel në dukje të pafund. Rregullimi i shkallës rrit hapësirën midis çdo kopjeje dhe ndryshimi i rrotullimit i orienton kopjet në drejtime të ndryshme për interes vizual.

Më në fund, për ta shijuar atë, kam vendosur një kompensim prej 0 në fillim të afatit kohor dhe më vonë e vendosa në një vlerë negative në vijën kohore.

Pamja e ekranit të Adobe After Effect

Duke përdorur një shtresë të formës poligonale dhe veçorinë Repeater, arrita të krijoj një sfond të animuar.

Me siguri e keni marrë me mend se ka shumë opsione për shtresat e formës. Është e vërtetë: ka kurse të plota online mbi temën e dedikuar për këtë temë, dhe ju duhet të merrni kohë për të eksperimentuar, praktikuar dhe mësuar.

Unë gjithashtu nuk mund t'ju them se cili stil i animacionit do t'ju përshtatet logo apo çfarë mjetesh specifike animacione që ju nevojiten për të arritur këtë stil. Megjithatë, unë mund t'ju jap këshilla se si ta zbuloni vetë. Kërkoni frymëzim nga logot e tjera të animuara, të tilla si konkurrentët tuaj, markat që admironi dhe/ose faqet si Pinterest ose Dribbble - ashtu si keni bërë kur keni krijuar fillimisht logon.

Do të zbuloni se sapo të filloni t'i analizoni ato duke përdorur njohuritë tuaja të reja se si të animoni një logo, shumë prej tyre bazohen në manipulimet me forma dhe transformime (edhe ato që shtresohen qartë me efekte të stilizuara të avancuara). Pasi të gjeni disa që ju pëlqejnë, mund të punoni mbrapsht në After Effects për t'u përpjekur t'i ndryshoni ato animacione për praktikë.

Hapi 6: Vendosni kohën.

Le të flasim për kohën, e cila përshkruan ritmin e kornizave të animacionit përgjatë animacionit. Ju mund të shihni një paraqitje vizuale të kohës duke shkuar te Redaktori i Grafikut. Për ta bërë këtë, klikoni ikonën e grafikut (e etiketuar Graph Editor kur rri pezull mbi të) në krye të panelit të vijës kohore dhe kjo do ta ndryshojë vijën kohore në një grafik rreshtor.

Nëse klikoni në një nga atributet e kornizës kryesore, do të shihni një vijë të drejtë nga një kornizë në tjetrën. Tani për tani, meqenëse po konfiguronim vetëm pikat e fillimit dhe të përfundimit, u larguam nga After Effects për të përcaktuar kohën. Pa drejtim, After Effects lëviz çdo kornizë të animacionit në mënyrë të barabartë, duke rezultuar në një vijë krejtësisht të drejtë.

Redaktori i grafikut. Animacion logo

Redaktori i grafikut tregon kohën e kornizës kryesore siç tregohet në grafikun e linjës.

Megjithatë, ndryshimi i qëllimshëm në kohë është ajo që i jep animacionit një ndjenjë realizmi. Për shembull, në një animacion me topin kërcyes, topi lëviz më ngadalë në lartësinë e kërcimit dhe më shpejt ndërsa i afrohet tokës për shkak të momentit dhe gravitetit. Me fjalë të tjera, ai nuk lëviz me të njëjtën shpejtësi gjatë gjithë animacionit dhe nëse do të bënte, ai do të shquhej si robot.

Animacioni i Logos së Veglave të Bezier

Veglat Bezier, të vendosura në fund të redaktuesit të grafikut, ju lejojnë të rregulloni lakimin e vijës së grafikut.

Konvertoni kornizat kryesore në Auto Bezier

Redaktori i Grafikut ju lejon të rregulloni kohën e animacionit tuaj duke përdorur të ashtuquajturat doreza Bezier për të transformuar një vijë grafiku në një kurbë. Në këndin e poshtëm djathtas të redaktuesit të grafikut, do të shihni disa ikona me pika katrore të bashkangjitura në rreshta - këto janë mjete të Bezier.

Klikoni një nga kornizat kryesore dhe kaloni pezull mbi veglat Bezier derisa të gjeni atë të etiketuar "  Konvertoni kornizat kryesore në Auto Bezier" . Kur klikoni mbi këtë, do të shihni një shënues të verdhë të shfaqet në grafik. Zvarritja e kësaj doreze do të bëjë që linja të përkulet dhe kjo do të ndryshojë kohën e animacionit tuaj. Aty ku kurba është më e theksuar, kornizat do të luhen më shpejt, dhe aty ku kurba është më e qetë, kornizat do të luhen më ngadalë.

Pamja e ekranit të veglave të Bezier në Adobe After Effects

Një kurbë më e mprehtë korrespondon me sinkronizimin më të shpejtë dhe një kurbë më e butë korrespondon me sinkronizimin më të ngadaltë.

Për të kuptuar me të vërtetë nuancat e rregullimit të kohës tuaj kërkon përvojë në animacion, prandaj rregullimi manual i kthesave të Bezier është një temë më e avancuar. Në këtë udhëzues fillestar, unë rekomandoj përdorimin e mjetit Bezier Lehtësi e lehtë (që aplikon një kurbë automatike në kuadrin kyç që zgjidhni) për të gjitha intervalet kohore të animacionit. Ju mund të aplikoni  Lehtësi e lehtë  në një kornizë kyçe jashtë redaktuesit të diagramit duke zgjedhur kornizën kryesore dhe duke klikuar me të djathtën.

Hapi 7: Eksportoni logon tuaj.

Kur të jeni gati të eksportoni logon tuaj të përfunduar të animuar, zgjidhni " Dosje " > «  Eksporto"  > «  Shto Adobe Media Encoder në radhë" . After Effects eksporton si parazgjedhje skedar në format mp4, e cila është e përshtatshme për video. Meqenëse duam të krijojmë një skedar imazhi të ndashëm të logos sonë, ne do ta eksportojmë atë si një GIF të animuar. Në dritaren e koduesit të mediave, klikoni shigjetën pranë vijës blu të theksuar të tekstit nën fjalën "Format" dhe zgjidhni "  GIF i animuar" . Ju gjithashtu mund të vendosni dosjen e destinacionit për skedarin tuaj të përfunduar duke klikuar tekstin blu nën fjalët "Skedari i daljes".

Kodifikuesi Adobe Media

Për të eksportuar një skedar, shkoni te File > Export > Add to Adobe Media Encoder Queue dhe zgjidhni Animated Gif nga lista rënëse në kolonën Format.

Klikoni dy herë tekstin blu të theksuar poshtë paracaktimit për të hapur dritaren e opsioneve të eksportit. Ka disa opsione që do të dëshironi t'i shikoni për të zvogëluar madhësinë e skedarit tuaj: Cilësia (e vendosa në 20), Shpejtësia e kuadrit (e vendosa në 10, megjithëse shpejtësia më të larta të kuadrove (fps) rekomandohen për video) dhe Kohëzgjatja, e cila është shiriti blu nën pamjen paraprake (Unë e shkurtova timen në 4 sekonda). Zgjidhni  NE RREGULL,  për të mbyllur këtë dritare.

Kur të keni mbaruar, zgjidhni ikonën e gjelbër Play në këndin e sipërm djathtas të Media Encoder dhe skedari juaj do të shfaqet në dosjen e destinacionit të zgjedhur. Kjo është e gjitha: animacioni i përfunduar i logos!

Jepni markën tuaj në jetë me animacionin e logos.
-

Animimi i logos është më shumë se thjesht një trend popullor që markat janë të detyruara të ndjekin. Ka gjithashtu një magji të pamohueshme për animacionin e logos dhe është një mënyrë e shkëlqyer për të krijuar një moment kënaqësie vizuale për këdo që ndërvepron me markën tuaj. Dhe për fat të mirë, softueri i animacionit ka evoluar në mënyrë që pothuajse çdokush, pavarësisht nga aftësia, mund të shtojë pak nga ajo magji në logon e vet.

Me këtë thënë, ndërsa ky tutorial ka për qëllim t'ju fillojë me bazat e animimit të logos, duhet shumë provë dhe gabime, praktikë dhe eksperimente për të arritur diçka përtej animacionit bazë. Nëse dëshironi një animacion vërtet të veçantë logoje, një animator profesionist logo ia vlen investimi.

 АЗБУКА

 

Përkufizime dhe terma të dizajnit të uebit