Logo-animaasje is it proses fan it ynfieren fan beweging of feroaringen oan 'e fisuele eleminten yn in logo om it dynamysker en oantrekliker te meitsjen. It kin tapast wurde op ferskate dielen fan in logo, lykas tekst, ôfbyldings, kleuren en foarmen, en it kin ferskate graden fan kompleksiteit hawwe, fariearjend fan ienfâldige animaasjes lykas tekst knipperende of ferdwine kleuren, oant komplekse animaasjes wêrby't objekten dy't bewegen of ynteraktyf binne belutsen. effekten.
Logo-animaasje wurdt hieltyd faker. Tusken smartphones en de algemiene ûntwikkeling fan ynternettechnology binne logo's no folle faker yn digitale romten, en dat iepenet de doar nei fisuele effekten lykas animaasje dy't net mooglik binne mei fysike produkten. Fansels betsjut de tanimmende populariteit fan logo-animaasje dat mear en mear merken it nedich hawwe om kompetitive te bliuwen. Dat learen hoe't jo in logo animearje kinne in weardefolle feardigens wêze dy't jo logo nei it folgjende nivo bringt.
Tagelyk is animaasjesoftware ek oeral, streamlined en yntuïtyf wurden om dizze groeiende brûkersbasis te stypjen. Dat, nettsjinsteande hoe technyske en komplekse logo-animaasje ek klinkt, sels begjinners kinne no ienfâldige, mar effektive animaasjes meitsje.
Logo-animaasje yn After Effects -
Stap 1. Tariede jo logo triem.
Wy sille eins ús tutorial begjinne oer hoe't jo in logo kinne animearje yn Adobe Illustrator (as ferlykbere software foar logo-ûntwerp). Dit is nedich om te soargjen dat ús bestân logo ynsteld foar animaasje.
Hoewol de animaasjesoftware sels raster is, moatte de orizjinele logobestannen yn fektorformaat wêze. Dit kinne jo feroarje se sûnder skea foar ôfbyldingskwaliteit (Bygelyks ynzoomen op in rasterlogo resultearret yn pikselaasje), en dit sil letter nuttich wêze as jo wurkje mei foarmlagen.
Soargje derfoar dat jo logo is skieden yn lagen mei it paniel Lagen.
It logo moat ek meardere lagen wêze ynstee fan groepearre yn ien objekt. Dit makket it maklik om kompleksere animaasjes te meitsjen troch yndividuele dielen fan it logo te animearjen. Jo kinne nije lagen meitsje mei de " Nije laach taheakje" oan de ûnderkant fan it paniel Lagen, en dan kopiearje en plakke dielen fan jo logo yn harren.
As lêste, om't animaasje digitaal fan aard is, wurkje wy ek mei RGB-kleuren. As jo Illustrator-bestân is ynsteld op CMYK, kinne jo dit feroarje troch jo logo te selektearjen en te navigearjen nei Bewurkje> Kleuren bewurkje> Konvertearje nei RGB.
As jo klear binne, eksportearje jo logo as in folslein laach fektorbestân. Sûnt After Effects-bestânstypen diel útmeitsje fan 'e Adobe-softwarefamylje, sil ik it logo dat ik makke haw opslaan as in AI-bestân (Adobe Illustrator), mar d'r binne ferskate ferskillende soarten fektorbestannen om út te kiezen as jo oare software brûke.
Stap 2: Ymportearje jo logo yn After Effects. Logo animaasje
Iepenje After Effects. De ynterface kin op it earste each yngewikkeld lykje, dus litte wy de basis brekke:
- Arkbalke : hjir kinne jo tagong krije ta de wichtichste grafyske arklykas it Pen-ark, Type-ark, ensfh.
- Projektpaniel : Dit is wêr jo mediabestannen foar it heule projekt beheare en organisearje.
- Komposysje finster : Dit is in fideofoarbyldfinster wêr't jo de animaasje foar de aktuele komposysje (faak in komposysje neamd) wêrmei jo wurkje kinne. Komposysjes binne yn wêzen sênes, elk mei har eigen aparte animaasjetiidlinen. Wy sille komposysjes yn mear detail beprate yn 'e folgjende paragraaf.
- Timeline : Dit is wêr jo jo animaasje meitsje. It bestiet út sawol in letterlike tiidline oan 'e rjochterkant (wêr't jo animaasje-eveneminten sille ynstelle om op' e tiidline te rinnen) en in opmaakgebiet oan 'e lofterkant (wêr't jo de attributen fan jo media-aktiva sille oerlaapje en bewurkje).
- control paniel : Hjir kinne jo tagong krije ta ferskate stypjende funksjes lykas media-ynformaasje, paragraaf- en ôfstimmingsopsjes, en pre-boude animaasje- en fisuele effektenbiblioteken ynboud yn After Effects.
As jo net wis binne oer in ark of knop, sil jo in beskriuwing jaan as jo mei de mûs oerhinne gean.
Om in logobestân te ymportearjen, sleep it gewoan nei it Projektpaniel of selektearje Map" > « Ymport" > « Map" . Selektearje yn it folgjende dialoochfinster Ymportearje media as byldmateriaal en gearfoege lagen .
Stap 3: Stel jo komposysje yn. Logo animaasje.
In komposysje (komp) is in kontener wêrmei jo animaasje kinne komponearje, bewurkje en tapasse op mediabestannen. In gruttere produksje, lykas in film, sil meardere spoaren befetsje dy't organisearre binne yn in projektpaniel. Sa kinne jo tinke oan de spoaren as ien sêne yn dy film, en elk spoar sil hawwe in eigen aparte tiidline. Yn ús gefal fereasket in logo-animaasje dy't minder dan fiif sekonden duorret, heul pear komposysjes.
Om jo komposysje oan te passen, sleep mediabestannen nei de linkerkant fan it tiidlinepaniel.
Litte wy begjinne mei in ienfâldige eftergrûn. Rjochts-klikke op it layoutpaniel en selektearje " Meitsje" > « Fêst" . Sûnt myn logo is wyt, Ik keas solid swarte kleur, mar jo kinne kieze eltse kleur. Yn it folgjende finster, neam de fêste (yn myn gefal "BG"), klik op de " Meitsje grutte kompjûter" en selektearje " OK " . Sleep no jo logo-bestân fan it Projektpaniel nei it Timeline-paniel en jo soene jo logo in foarbyld sjen moatte yn it komposysjefinster. As net, wês wis dat jo de lagen opnij regelje troch de fêste eftergrûn ûnder it logobestân te slepen.
Rjochtsklik op it logobestân yn it yndielingspaniel en selektearje Meitsje" > « Konvertearje nei in mearlaachige komposysje" . Dit sil jo logobestân feroarje yn in oare komposysje (jo sille sjen dat it ikoan is feroare). Dûbelklikke op it logobestân sil no in nije ljepper iepenje en jo bringe nei dizze nije komposysje mei alle yndividuele lagen dy't jo yn Illustrator hawwe ynsteld. No kinne jo sjen hoe't comps wurkje: se binne yn wêzen as submappen.
Logo Animation
As jo wolle, kinne jo elk fan dizze lagen konvertearje yn aparte komposysjes troch mei de rjochter te klikken en te selektearjen Foarriedige gearstalling" . Dit sil dizze laach in eigen animaasjetiidline jaan, nested binnen de foarige komposysje. En as jo it heule logo tagelyk wolle animearje, moatte jo in tiidline brûke dy't ferbûn is mei de haadkomposysje.
Mei dat út 'e wei, litte wy begripe hoe't dizze tiidlinen wurkje foar animaasje.
Stap 4: Animearje it logo mei help fan keyframes
After Effects (en de measte animaasjesoftware) wurket mei keyframes. Keyframes binne yn essinsje markers dy't jo kinne ynstelle op 'e tiidline om te bepalen wannear't de start- en einstaten foar jo animaasje moatte foarkomme.
Litte wy bygelyks begjinne mei in heul ienfâldige animaasje: fading yn. In foarwerp hat ferskate attributen ferbûn oan it, en attributen dy't feroarje oer in opjûne perioade fan tiid binne yn wêzen animaasje. Om dizze attributen te sjen, klikje jo op it útwreidzje ikoan neist it logo folge troch eigendom "Konvertearje" .
Meitsje keyframes troch te klikken op it stopwatch-ikoan neist Eigenskippen yn it Timeline-paniel.
Foar in fading animaasje wolle jo wurkje mei it attribút dat de sichtberens fan in objekt mjit: opasiteit. De opaciteit is ynsteld op 100%, om't standert it logo folslein sichtber is.
Klikje op it stopwatch-ikoan neist de Opacity-opsje en jo sille in diamant sjen wêr't de playheadmarker is ynsteld (de swakke blauwe line dy't de tiidline krúst). Dit is in keyframe, yn prinsipe in momintopname fan de aktuele wearde fan in spesifisearre attribút. Ferpleats it keyframe troch te klikken en te slepen nei de 2 sekonde markearring op 'e tiidline. Sleep de slider werom nei de 0 sekonde markearring, meitsje dan in oar keyframe en set de dekking op 0%. Druk op Spacebar om de animaasje yn it komposysjefinster te besjen.
neidat Effects
Jo sille sjen dat jo in soepele fade-in animaasje hawwe makke troch de opaciteit te feroarjen fan 0% nei 100% yn 2 sekonden mei mar twa keyframes. Dit is hoe't alle animaasje wurdt dien yn After Effects. Jo kinne meitsje in start keyframe en in ein keyframe op ferskillende yntervallen lâns de tiidline, en After Effects automatysk berekkent de nedige frame oergongen te krijen fan punt A nei punt B (tradisjoneel neamd tween frames yn de animaasje bedriuw).
In ienfâldige glêde animaasje wurdt makke mei twa keyframes foar de Opacity-eigenskip.
Jo kinne sjen dat d'r in oantal attributen binne wêrmei jo kinne wurkje Eigendom transformearje, dy't wy hjir koart útlizze. Fiel jo frij om te eksperimintearjen mei keyframes en elk te feroarjen om in gefoel te krijen foar har animaasjemooglikheden:
- Posysje : Dit attribút beskriuwt de posysje fan it logo yn X, Y romte op de opmaak skerm en lit lineêre beweging wurde animearre.
- Skaalfergrutting : Dit attribút beskriuwt de grutte fan it logo (as persintaazje fan de folsleine grutte fan it orizjinele bestân) en kinne jo meitsje ynzoomen of krimp-out animaasjes.
- Rotaasje : Dit attribút beskriuwt de oriïntaasje yn graden en kinne jo meitsje rotaasje animaasjes.
Advys fan in profesjonele :
As it giet om it animearjen fan in logo, hat it sin om efterút te wurkjen (lykas wy diene mei de fade-in), om't de animaasje moat einigje op it ôfmakke, folsleine logo. Dit betsjut dat jo keyframes moatte oanmeitsje foardat jo wat feroarje, sadat jo snapshots hawwe fan 'e attribútwearden yn har standertstatus. Jo kinne dan dizze keyframes ferpleatse nei it winske einpunt op 'e tiidline (hoe lang jo wolle dat de animaasje duorret) en nije keyframes oanmeitsje foar de wizigingen oan it begjin fan' e tiidline.
Stap 5. Animearje it logo mei help fan foarm lagen.
Litte wy no trochgean nei nijsgjirrigere animaasjetechniken mei help fan foarmlagen. Foarmlagen binne objekten dy't paadynformaasje befetsje lykas ankerpunten en ferbiningslinen (lykas dy yn fektorprogramma's), en it manipulearjen fan harren iepenet de doar nei in hiele oanbod fan animaasjemooglikheden bûten Transformearje eigenskippen .
Hoe kinne jo de juste kleur kieze foar jo logo?
Earst sille wy it logo konvertearje yn in foarmlaach. Selektearje yn it paniel Layered Composition (de lagen makke yn stap 3), al jo lagen, klik mei de rjochter mûsknop en selektearje " Meitsje" > « Meitsje foarmen fan fektorlaach" . Jo sille sjen dat elke laach is duplikearre mei in stjer neist it - dit is in foarmlaach. Nested ûnder de foarm laach, do silst fine Ynhâld eigendom dêrnjonken Transformearje eigendom . Oan'e rjochterside fan Ynhâld eigenskippen jo sille ek in knop sjen " Foegje " , wêrmei jo noch mear attributen kinne selektearje om te animearjen.
Foarmlagen befetsje in knop taheakje (rjochts fan it Eigenskip Ynhâld) wêrmei jo allerhanne animearre eigenskippen taheakje kinne, lykas knippaden.
Skaaljen fan in objekt yn Adobe Illustrator
Trimpaden
Foar myn logo brûkte ik in frij gewoane en nuttige animaasje mei it eigendom fan Trim Paths. Om dit te dwaan haw ik "Crop Paths" tafoege mei de knop " Foegje " nei de foarmlagen foar elke letter, set it Keyframe End attribút op 0% oan it begjin fan 'e tiidline en 100% nei sawat 1 sekonde. Sa't jo sjen kinne, liket de omtrek fan 'e letters te wurde tekene troch in ûnsichtbere hân yn echte tiid.
Mei it brûken fan de Trim Paths-eigenskip kinne jo linen animearje sadat se harsels yn realtime tekenje.
Derneist woe ik wat aksintanimaasje tafoegje oan 'e eftergrûn. Sûnt ik wurkje yn swart en wyt, Ik keas in looping tunnel effekt docht tinken oan de Twilight Zone. Om dit te dwaan, brûkte ik it polygon-ark yn it arkpaniel om in foarm yn it sintrum fan myn komposysje te tekenjen, en in nije foarmlaach te meitsjen.
Dan ik tafoege in Repeater eigendom, centered de posysje en ferhege it oantal kopyen. Dit duplicates de foarm, it meitsjen fan in skynber einleaze tunnel. It oanpassen fan de skaal fergruttet de romte tusken elke kopy, en it feroarjen fan de rotaasje oriïntearret de kopyen yn ferskate rjochtingen foar fisuele ynteresse.
Uteinlik, om it op te roppen, haw ik in offset fan 0 oan it begjin fan 'e tiidline keyframed en letter set it op in negative wearde op' e tiidline.
Mei help fan in polygonal foarm laach en de Repeater eigenskip, Ik koe meitsje in animearre eftergrûn.
Jo hawwe wierskynlik tocht dat d'r in protte opsjes binne foar foarmlagen. It is wier: d'r binne folsleine online kursussen oer it ûnderwerp op it ynternet, en jo moatte de tiid nimme om te eksperimintearjen, te oefenjen en te learen.
Ik kin ek net fertelle hokker animaasje styl sil passe by jo logo of wat spesifike ark animaasjes dy't jo nedich binne om dizze styl te berikken. Ik kin jo lykwols advys jaan oer hoe't jo it sels kinne ûntdekke. Sjoch foar ynspiraasje fan oare animearre logo's, lykas jo konkurrinten, merken dy't jo bewûnderje, en / of siden lykas Pinterest of Dribbble - krekt lykas jo diene doe't jo oarspronklik it logo makken.
Jo sille fine dat ienris jo begjinne te analysearjen se mei jo nije kennis fan hoe't jo in logo animearje, in protte fan harren binne basearre op ienfâldige manipulaasjes mei foarmen en transformaasjes (sels dyjingen dy't dúdlik lagen binne mei avansearre stilisearre effekten). Sadree't jo in pear fine dy't jo leuk fine, kinne jo efterút wurkje yn After Effects om te besykjen om dizze animaasjes te reverse engineerjen foar praktyk.
Stap 6: Stel de tiid yn.
Litte wy prate oer tiid, dy't it tempo fan animaasjeframes troch de animaasje beskriuwt. Jo kinne in fisuele foarstelling fan tiid sjen troch nei de Graph Editor te gean. Om dit te dwaan, klikje jo op it grafykbyldkaike (label mei Graph Editor as jo der oerhinne hoverje) oan 'e boppekant fan it tiidlinepaniel en dit sil de tiidline feroarje yn in linegrafyk.
As jo op ien fan 'e keyframe-attributen klikke, sille jo in rjochte line sjen fan it iene keyframe nei it folgjende. Op it stuit, om't wy allinich de start- en einpunten keyframe, ferlieten wy After Effects om de timing te dwaan. Sûnder rjochting ferpleatst After Effects elk frame fan 'e animaasje evenredich, wat resulteart yn in perfekt rjochte line.
De grafykbewurker toant de timing fan kaaiframe lykas werjûn yn 'e linegrafyk.
De doelbewuste feroaring yn 'e tiid is lykwols wat de animaasje in gefoel fan realisme jout. Bygelyks, yn in bouncing bal animaasje, de bal beweecht stadiger op 'e hichte fan' e sprong en flugger as it benaderet de grûn fanwege momentum en swiertekrêft. Mei oare wurden, hy beweecht net mei deselde snelheid troch de heule animaasje, en as hy dat die, soe hy opfalle as in robot.
De Bezier-ark, lizze oan 'e ûnderkant fan' e grafykbewurker, kinne jo de kromming fan 'e grafykline oanpasse.
Konvertearje Keyframes nei Auto Bezier
De Graph Editor lit jo de timing fan jo eigen animaasje oanpasse troch saneamde Bezier-handgrepen te brûken om in grafykline yn in kromme te transformearjen. Yn 'e rjochter ûnderkant fan' e grafyske bewurker sille jo wat fjouwerkante stippelbyldkaikes sjen taheakke oan rigels - dit binne Bezier-ark.
Klikje op ien fan 'e kaaiframes en hoverje oer de Bezier-ark oant jo de iene fine mei it label " Konvertearje Keyframes nei Auto Bezier" . As jo hjirop klikke, sille jo in giele marker ferskine op 'e grafyk. Troch dizze handgreep te slepen sil de line bûge en dit sil de timing fan jo animaasje feroarje. Wêr't de kromme mear útsprutsen is, sille de frames rapper ôfspylje, en wêr't de kromme soepeler is, sille de frames stadiger ôfspylje.
In skerpere kromme komt oerien mei flugger syngronisaasje, en in flüssigere kromme komt oerien mei stadiger syngronisaasje.
Om de nuânses fan it oanpassen fan jo eigen timing wirklik te begripen, fereasket animaasjeûnderfining, en dêrom is it manuell oanpassen fan Bezier-kurven in mear avansearre ûnderwerp. Yn dizze hantlieding foar begjinners advisearje ik it Bezier-ark te brûken Easy Ease (dy't in automatyske kromme jildt foar it keyframe dat jo selektearje) foar alle animaasjetiidintervallen. Jo kinne oanfreegje Easy Ease nei in keyframe bûten de diagrambewurker troch it keyframe te selektearjen en rjochts te klikken.
Stap 7: Eksportearje jo logo.
As jo klear binne om jo klear animearre logo te eksportearjen, selektearje " Map" > « Eksportearje" > « Add Adobe Media Encoder ta wachtrige" . After Effects eksportearret standert triem yn opmaak mp4, dat is geskikt foar fideo. Om't wy in dielde ôfbyldingsbestân fan ús logo wolle meitsje, sille wy it eksportearje as in animearre GIF. Klikje yn it finster fan Media Encoder op de pylk neist de markearre blauwe tekstline ûnder it wurd "Format" en selektearje " Animearre GIF" . Jo kinne ek de bestimmingsmap foar jo klear bestân ynstelle troch op de blauwe tekst te klikken ûnder de wurden "Utfiertriem".
Om in bestân te eksportearjen, gean nei Triem> Eksportearje> Taheakje oan Adobe Media Encoder Queue en selektearje Animated Gif út it dellûk list yn 'e Format kolom.
Dûbelklikje op de markearre blauwe tekst ûnder de foarynstelling om it finster Eksportopsjes te iepenjen. D'r binne in pear opsjes wêr't jo nei wolle sjen om jo triemgrutte te ferminderjen: kwaliteit (ik set it op 20), Frame Rate (ik set it op 10, hoewol hegere frame rates (fps) wurde oanrikkemandearre foar fideo), en Duration, dat is de blauwe balke ûnder foarbyld (ik trimme myn oant 4 sekonden). Útkieze OK, dit finster te sluten.
As jo klear binne, selektearje it griene Play-ikoan yn 'e rjochter boppeste hoeke fan Media Encoder en jo bestân sil werjûn wurde yn jo keazen bestimmingsmap. Dat is it: klear logo-animaasje!
Bring jo merk ta libben mei logo-animaasje.
-
Logo-animaasje is mear dan allinich in populêre trend dy't merken wurde twongen om te folgjen. D'r is ek in ûnbestriden magy foar logo-animaasje, en it is in geweldige manier om in momint fan fisueel wille te meitsjen foar elkenien dy't ynteraksje mei jo merk. En gelokkich is animaasjesoftware sa ûntwikkele dat hast elkenien, nettsjinsteande feardigens, in bytsje fan dy magy taheakje kin oan har eigen logo.
Mei dat sein, hoewol dit tutorial is bedoeld om jo te begjinnen mei de basis fan logo-animaasje, nimt it in protte probearjen en flater, praktyk en eksperimintearjen om alles te krijen boppe basisanimaasje. As jo in wirklik spesjale logo-animaasje wolle, is in profesjonele logo-animator de ynvestearring wurdich.
Leave a comment