Logoanimaatio on prosessi, jossa logon visuaalisiin elementteihin tuodaan liikettä tai muutoksia tehdään siitä dynaamisempi ja houkuttelevampi. Sitä voidaan soveltaa logon eri osiin, kuten tekstiin, kuviin, väreihin ja muotoihin, ja sen monimutkaisuus voi vaihdella yksinkertaisista animaatioista, kuten tekstin vilkkumisesta tai haalistumisesta, monimutkaisiin animaatioihin, joissa on liikkuvia tai interaktiivisia esineitä. tehosteita.
Logo-animaatio on yleistymässä. Älypuhelimien ja Internet-teknologian yleisen kehityksen välissä logot ovat nyt paljon yleisempiä digitaalisissa tiloissa, ja tämä avaa oven visuaalisille tehosteille, kuten animaatioille, jotka eivät ole mahdollisia fyysisillä tuotteilla. Logoanimaatioiden kasvava suosio tarkoittaa tietysti sitä, että yhä useammat brändit tarvitsevat sitä pysyäkseen kilpailukykyisinä. Joten logon animoinnin oppiminen voi olla arvokas taito, joka vie logosi seuraavalle tasolle.
Samaan aikaan animaatioohjelmistot ovat myös yleistyneet, virtaviivaistetut ja intuitiivisemmat tukemaan tätä kasvavaa käyttäjäkuntaa. Joten riippumatta siitä, kuinka tekniseltä ja monimutkaiselta logoanimaatio kuulostaa, jopa aloittelijat voivat nyt luoda yksinkertaisia mutta tehokkaita animaatioita.
Logo-animaatio After Effectsissä -
Vaihe 1. Valmistele logotiedostosi.
Aloitamme itse asiassa opetusohjelman logon animoinnista Adobe Illustratorissa (tai vastaavassa logosuunnitteluohjelmistossa). Tämä on tarpeen sen varmistamiseksi, että tiedostomme animaatiota varten asetettu logo.
Vaikka animaatioohjelmisto itsessään on rasteri, alkuperäisten logotiedostojen on oltava vektorimuodossa. Näin voit vaihtaa niitä ilman vahingoittaa kuvanlaadun kannalta (esimerkiksi rasterilogon lähentäminen johtaa pikseloimiseen), ja tästä on hyötyä myöhemmin muototasojen kanssa työskennellessä.
Varmista, että logosi on erotettu tasoiksi Tasot-paneelin avulla.
Logon tulee myös olla monikerroksinen yhdeksi esineeksi ryhmitellyn sijaan. Tämä helpottaa monimutkaisempien animaatioiden luomista animoimalla logon yksittäisiä osia. Voit luoda uusia tasoja käyttämällä " Lisää uusi kerros" Tasot-paneelin alareunassa ja kopioi ja liitä osia logostasi niihin.
Lopuksi, koska animaatio on luonteeltaan digitaalista, työskentelemme myös RGB-väreillä. Jos Illustrator-tiedostosi arvo on CMYK, voit muuttaa tätä valitsemalla logosi ja siirtymällä kohtaan Muokkaa > Muokkaa värejä > Muunna RGB:ksi.
Kun olet valmis, vie logosi täysin kerrostettuna vektoritiedostona. Koska After Effects -tiedostotyypit ovat osa Adoben ohjelmistoperhettä, aion tallentaa luomani logon AI-tiedostona (Adobe Illustrator), mutta voit valita useista eri tyyppisistä vektoritiedostoista, jos käytät muita ohjelmistoja.
Vaihe 2: Tuo logosi After Effectsiin. Logo-animaatio
Avaa After Effects. Käyttöliittymä saattaa ensi silmäyksellä tuntua monimutkaiselta, joten puretaan perusasiat:
- toolbar : tästä pääset pääsivulle grafiikkatyökalutkuten kynätyökalu, kirjoitustyökalu jne.
- Projektipaneeli : Tässä voit hallita ja järjestää koko projektin mediatiedostoja.
- Koostumusikkuna : Tämä on videon esikatseluikkuna, jossa voit esikatsella nykyisen sävellyksen (jota kutsutaan usein sävellykseksi) animaatiota, jonka parissa työskentelet. Sävellykset ovat pohjimmiltaan kohtauksia, joista jokaisella on omat erilliset animaatioaikajanansa. Käsittelemme sävellyksiä tarkemmin seuraavassa osiossa.
- Aikajana : Tässä luot animaatiosi. Se koostuu sekä oikealla olevasta kirjaimellisesta aikajanasta (jossa määrität animaatiotapahtumat ajamaan aikajanalla) että vasemmalla olevasta asettelualueesta (jossa voit peittää ja muokata mediasisältöjesi attribuutteja).
- Ohjauspaneeli : Täällä voit käyttää erilaisia tukiominaisuuksia, kuten mediatietoja, kappale- ja tasausvaihtoehtoja sekä After Effectsiin sisäänrakennettuja valmiita animaatio- ja visuaaliset tehostekirjastot.
Jos olet epävarma työkalusta tai painikkeesta, saat kuvauksen viemällä hiiren sen päälle.
Tuo logotiedosto vetämällä se Projekti-paneeliin tai valitsemalla Tiedosto " > " Tuonti" > " Tiedosto " . Valitse seuraavassa valintaikkunassa Tuo media nimellä materiaalia ja yhdistettyjä tasoja .
Vaihe 3: Määritä kokoonpano. Logon animaatio.
Koostumus (comp) on säilö, jonka avulla voit luoda, muokata ja käyttää animaatioita mediatiedostoihin. Suurempi tuotanto, kuten elokuva, sisältää useita kappaleita järjestettynä projektipaneeliin. Voit siis ajatella kappaleita yhtenä kohtauksena kyseisessä elokuvassa, ja jokaisella kappaleella on oma erillinen aikajana. Meidän tapauksessamme alle viisi sekuntia kestävä logoanimaatio vaatii hyvin vähän sävellyksiä.
Voit mukauttaa sävellystäsi vetämällä mediatiedostoja aikajanapaneelin vasempaan reunaan.
Aloitetaan yksinkertaisella taustalla. Napsauta asettelupaneelia hiiren oikealla painikkeella ja valitse " Luoda" > " kiinteä" . Koska logoni on valkoinen, valitsin solidin musta väri, mutta voit valita minkä tahansa värin. Nimeä seuraavassa ikkunassa kiinteä aine (tapauksessani "BG"), napsauta " Tee koko tietokone" ja valitse " OK " . Vedä nyt logotiedostosi Projekti-paneelista Aikajana-paneeliin ja sinun pitäisi nähdä logosi esikatseltavissa koosteikkunassa. Jos ei, muista järjestää tasot uudelleen vetämällä logotiedoston alla olevaa yhtenäistä taustaa.
Napsauta logotiedostoa asettelupaneelissa hiiren kakkospainikkeella ja valitse Luoda" > " Muunna monikerroksiseksi koostumukseksi" . Tämä muuttaa logotiedostosi erilaiseksi koostumukseksi (näet, että kuvake on muuttunut). Logotiedoston kaksoisnapsauttaminen avaa nyt uuden välilehden ja vie sinut tähän uuteen koostumukseen, joka sisältää kaikki Illustratorissa määrittämäsi yksittäiset tasot. Nyt näet kuinka comps toimivat: ne ovat pohjimmiltaan kuin alikansioita.
Logon animaatio
Halutessasi voit muuntaa jokaisen näistä tasoista erillisiksi koostumuksiksi napsauttamalla hiiren kakkospainikkeella ja valitsemalla Alustava kokoonpano" . Tämä antaa tälle tasolle oman animaation aikajanan, joka on sisäkkäinen edellisen koostumuksen sisällä. Ja jos haluat animoida koko logon kerralla, sinun tulee käyttää pääkoostumukseen liittyvää aikajanaa.
Kun tämä on poissa tieltä, ymmärrämme, kuinka nämä aikajanat toimivat animaatioissa.
Vaihe 4: Animoi logo avainkehysten avulla
After Effects (ja useimmat animaatioohjelmistot) toimii avainkehysten avulla. Avainkehykset ovat pohjimmiltaan merkkejä, jotka voit asettaa aikajanalle sen määrittämiseksi, milloin animaatiosi aloitus- ja lopetustilat esiintyvät.
Aloitetaan esimerkiksi hyvin yksinkertaisella animaatiolla: häipyminen. Objektiin on liitetty erilaisia attribuutteja, ja tietyn ajan kuluessa muuttuvat attribuutit ovat pääasiassa animaatioita. Näet nämä määritteet napsauttamalla logon vieressä olevaa Laajenna-kuvaketta ja sen jälkeen ominaisuus "Muunna" .
Luo avainkehykset napsauttamalla Ominaisuudet-kohdan vieressä olevaa sekuntikellokuvaketta Aikajana-paneelissa.
Häipyvässä animaatiossa haluat käyttää attribuuttia, joka mittaa objektin näkyvyyttä: peittävyys. Peittävyydeksi on asetettu 100 %, koska oletusarvoisesti logo on täysin näkyvissä.
Napsauta Sekuntikello-kuvaketta Opacity-vaihtoehdon vieressä, niin näet timantin, jossa toistopaikan merkki on asetettu (haalean sininen viiva, joka ylittää aikajanan). Tämä on avainkehys, periaatteessa tilannekuva määritetyn attribuutin nykyisestä arvosta. Siirrä avainkehystä napsauttamalla ja vetämällä se aikajanan 2 sekunnin merkkiin. Vedä liukusäädin takaisin 0 sekunnin merkkiin, luo sitten toinen avainkehys ja aseta peittävyydeksi 0 %. Paina välilyöntiä nähdäksesi animaation sommitteluikkunassa.
Jälkivaikutukset
Huomaat, että olet luonut sujuvan häivyttävän animaation muuttamalla peittävyyttä 0 %:sta 100 %:iin kahdessa sekunnissa kahdella avainkehyksellä. Näin kaikki animaatiot tehdään After Effectsissä. Voit luoda aloitusavainkehyksen ja lopetusavainkehyksen eri välein aikajanalla, ja After Effects laskee automaattisesti tarvittavat kehyssiirtymät päästäksesi pisteestä A pisteeseen B (kutsutaan animaatioalalla perinteisesti tween-kehykseksi).
Yksinkertainen sujuva animaatio luodaan käyttämällä kahta avainkehystä Opacity-ominaisuutta varten.
Voit nähdä, että on olemassa useita attribuutteja, joita voit käyttää Muuta omaisuutta, jonka selitämme tässä lyhyesti. Voit vapaasti kokeilla avainkehyksiä ja muokata niitä saadaksesi käsityksen niiden animaatioominaisuuksista:
- Asema : Tämä attribuutti kuvaa logon sijaintia X- ja Y-tilassa asettelunäytössä ja mahdollistaa lineaarisen liikkeen animoinnin.
- asteikko : Tämä attribuutti kuvaa logon kokoa (prosenttiosuutena alkuperäisen tiedoston täydestä koosta) ja mahdollistaa zoomattavien tai pienennettävien animaatioiden luomisen.
- kierto : Tämä attribuutti kuvaa suunnan asteina ja mahdollistaa kiertoanimaatioiden luomisen.
Neuvoja ammattilaiselta :
Logon animoinnissa on järkevää työskennellä taaksepäin (kuten teimme häivytyksen kanssa), koska animaation pitäisi päättyä valmiiseen, täydelliseen logoon. Tämä tarkoittaa, että sinun on luotava avainkehykset ennen kuin muutat mitään, jotta sinulla on tilannekuvat määritteiden arvoista oletustilassa. Voit sitten siirtää nämä avainkehykset haluttuun loppupisteeseen aikajanalla (riippumatta siitä, kuinka kauan haluat animaation kestävän) ja luoda uudet avainkehykset aikajanan alussa oleville muutoksille.
Vaihe 5. Animoi logo käyttämällä muotokerroksia.
Siirrytään nyt mielenkiintoisempiin animaatiotekniikoihin muotokerroksia käyttämällä. Muototasot ovat objekteja, jotka sisältävät polkutietoja, kuten ankkuripisteitä ja liitinlinjoja (samanlaiset kuin vektoriohjelmissa), ja niiden käsittely avaa oven monille animaatiomahdollisuuksille. Muunna ominaisuuksia .
Kuinka valita oikea väri logollesi?
Ensin aiomme muuntaa logon muotokerrokseksi. Valitse Layered Composition -paneelissa (vaiheessa 3 luodut tasot), napsauta hiiren kakkospainikkeella ja valitse " Luoda" > " Luo muotoja vektoritasosta" . Näet, että jokainen kerros on kopioitu ja sen vieressä on tähti - tämä on muotokerros. Muotokerroksen alle sisäkkäin löydät Sisällön ominaisuus lisäksi Muuta omaisuutta . Oikealle Sisällön ominaisuudet näet myös painikkeen " Lisätä" , jonka avulla voit valita vielä enemmän animoitavia attribuutteja.
Muototasot sisältävät Lisää-painikkeen (Sisältö-ominaisuuden oikealla puolella), jonka avulla voit lisätä kaikenlaisia animoituja ominaisuuksia, kuten syväyspolkuja.
Objektin skaalaus Adobe Illustratorissa
Leikkaa polkuja
Logossani käytin melko yleistä ja hyödyllistä animaatiota Trim Paths -ominaisuuden avulla. Tätä varten lisäsin "Rajauspolut" painikkeella " Lisätä" Aseta kunkin kirjaimen muototasoihin End-attribuutin avainkehys arvoksi 0 % aikajanan alussa ja 100 % noin 1 sekunnin kuluttua. Kuten näet, kirjainten ääriviivat näyttävät olevan näkymätön käsi reaaliajassa.
Trim Paths -ominaisuuden avulla voit animoida viivoja niin, että ne piirtävät itsensä reaaliajassa.
Lisäksi halusin lisätä taustaan aksenttianimaatiota. Koska työskentelen mustavalkoisena, valitsin silmukkatunneliefektin, joka muistuttaa Twilight Zonea. Piirsin tätä varten työkalupaneelin monikulmiotyökalulla muodon sävellykseni keskelle ja loin uuden muotokerroksen.
Sitten lisäsin Repeater-ominaisuuden, keskitin paikan ja lisäsin kopioiden määrää. Tämä kopioi muodon ja luo loputtoman tunnelin. Mittakaavan säätäminen lisää tilaa kunkin kopion välillä, ja käännön vaihtaminen suuntaa kopiot eri suuntiin visuaalisen kiinnostavuuden vuoksi.
Lopuksi, piristääkseni sitä, asetin aikajanan alussa 0:n siirtymän ja asetin sen myöhemmin negatiiviseen arvoon aikajanalla.
Monikulmion muotoisen kerroksen ja Repeater-ominaisuuden avulla pystyin luomaan animoidun taustan.
Olet luultavasti arvannut, että muotokerroksille on monia vaihtoehtoja. Se on totta: Internetissä on täydellisiä verkkokursseja aiheesta, ja sinun tulee käyttää aikaa kokeiluun, harjoitteluun ja oppimiseen.
En myöskään osaa sanoa, mikä animaatiotyyli sopii sinulle logo tai mitä erityisiä työkaluja animaatioita, joita tarvitset tämän tyylin saavuttamiseksi. Voin kuitenkin antaa neuvoja, kuinka voit löytää sen itse. Etsi inspiraatiota muista animoiduista logoista, kuten kilpailijoistasi, ihailemistasi brändeistä ja/tai sivustoista, kuten Pinterest tai Dribbble – aivan kuten teit logon alun perin luodessasi.
Huomaat, että kun alat analysoida niitä käyttämällä uutta tietoasi logon animoinnista, monet niistä perustuvat yksinkertaisiin manipulaatioita muodoilla ja muunnoksilla (jopa sellaiset, joissa on selkeästi kerrostettu edistyneitä tyyliteltyjä tehosteita). Kun löydät muutaman, joista pidät, voit työskennellä taaksepäin After Effectsissä ja yrittää muokata animaatioita harjoittelua varten.
Vaihe 6: Aseta aika.
Puhutaanpa ajasta, joka kuvaa animaatiokehysten tahtia koko animaation ajan. Voit nähdä visuaalisen esityksen ajasta siirtymällä Graafieditoriin. Voit tehdä tämän napsauttamalla aikajanapaneelin yläosassa olevaa kaaviokuvaketta (merkitty Graafieditoriksi, kun viet hiiren sen päälle), jolloin aikajana muuttuu viivakaavioksi.
Jos napsautat jotakin avainkehysmääritteistä, näet suoran viivan avainkehyksestä toiseen. Juuri nyt, koska avainkehystimme vain aloitus- ja loppupisteitä, jätimme After Effectsin ajoituksen tekemiseen. Ilman suuntaa After Effects siirtää animaation jokaista kehystä tasaisesti, jolloin tuloksena on täysin suora viiva.
Kaavioeditori näyttää avainkehysten ajoituksen viivakaavion mukaisesti.
Tarkoituksenmukainen ajanmuutos antaa kuitenkin animaatiolle realismia. Esimerkiksi pomppivassa pallo-animaatiossa pallo liikkuu hitaammin pomppimiskorkeudella ja nopeammin, kun se lähestyy maata liikemäärän ja painovoiman vuoksi. Toisin sanoen hän ei liiku samalla nopeudella koko animaation ajan, ja jos liikkuisi, hän erottuisi robottina.
Bezier-työkaluilla, jotka sijaitsevat kaavioeditorin alaosassa, voit säätää kaavioviivan kaarevuutta.
Muunna avainkehykset Auto Bezieriksi
Graafieditori mahdollistaa oman animaatiosi ajoituksen säätämisen käyttämällä niin kutsuttuja Bezier-kahvoja muuttamaan kaavioviivan käyräksi. Kaavioeditorin oikeassa alakulmassa näkyy joitain neliömäisiä pistekuvakkeita, jotka on liitetty viivoille – nämä ovat Bezier-työkaluja.
Napsauta yhtä avainkehystä ja vie hiiri Bezier-työkalujen päälle, kunnes löydät kehyksen, jonka otsikko on " Muunna avainkehykset Auto Bezieriksi" . Kun napsautat tätä, kaavioon ilmestyy keltainen merkki. Tämän kahvan vetäminen saa viivan taipumaan ja tämä muuttaa animaation ajoitusta. Kun käyrä on selvempi, kehykset toistuvat nopeammin ja missä käyrä on tasaisempi, kehykset toistuvat hitaammin.
Terävämpi käyrä vastaa nopeampaa synkronointia ja tasaisempi käyrä vastaa hitaampaa synkronointia.
Oman ajoituksen säätämisen vivahteiden ymmärtäminen vaatii animaatiokokemusta, minkä vuoksi Bezier-käyrien säätäminen manuaalisesti on edistyneempi aihe. Tässä aloittelijan oppaassa suosittelen Bezier-työkalun käyttöä Helppo Helppous (joka käyttää automaattista käyrää valitsemaasi avainkehykseen) kaikille animaation aikaväleille. Voit hakea Helppo Helppous avainkehykseen kaavioeditorin ulkopuolella valitsemalla avainkehys ja napsauttamalla hiiren kakkospainikkeella.
Vaihe 7: Vie logosi.
Kun olet valmis viemään valmiin animoidun logosi, valitse " Tiedosto " > " Viedä" > " Lisää Adobe Media Encoder jonoon" . After Effects vie oletuksena tiedosto muodossa mp4, joka sopii videoille. Koska haluamme luoda logostamme jaettavan kuvatiedoston, viemme sen animoituna GIF-tiedostona. Napsauta Media Encoder -ikkunassa korostetun sinisen tekstirivin vieressä olevaa nuolta sanan "Format" alla ja valitse " Animoitu GIF" . Voit myös asettaa valmiin tiedoston kohdekansion napsauttamalla sinistä tekstiä sanojen "Output File" alla.
Vie tiedosto siirtymällä kohtaan Tiedosto > Vie > Lisää Adobe Media Encoder -jonoon ja valitsemalla Muoto-sarakkeen avattavasta luettelosta Animated Gif.
Kaksoisnapsauta korostettua sinistä tekstiä esiasetuksen alla avataksesi Vientiasetukset-ikkunan. Voit pienentää tiedostokokoa muutamalla vaihtoehdolla: Laatu (asetin sen arvoon 20), Frame Rate (Asetin sen arvoon 10, vaikka videoille suositellaan korkeampaa kuvanopeutta (fps)) ja Kesto, joka on sininen palkki esikatselun alla (leikkasin omani 4 sekuntiin). Valitse OK, sulkeaksesi tämän ikkunan.
Kun olet valmis, valitse vihreä Play-kuvake Media Encoderin oikeasta yläkulmasta, niin tiedostosi näkyy valitsemassasi kohdekansiossa. Siinä se: valmis logoanimaatio!
Herätä brändisi henkiin logoanimaatiolla.
-
Logoanimaatio on enemmän kuin vain suosittu trendi, jota brändien on pakko seurata. Logoanimaatiossa on myös kiistaton taika, ja se on loistava tapa luoda visuaalista nautintoa kaikille, jotka ovat vuorovaikutuksessa brändisi kanssa. Ja onneksi animaatioohjelmistot ovat kehittyneet niin, että melkein kuka tahansa, taidosta riippumatta, voi lisätä tätä taikuutta omaan logoonsa.
Vaikka tämän opetusohjelman tarkoituksena onkin saada sinut alkuun logoanimaatioiden perusteiden parissa, vaatii paljon yritystä ja erehdystä, harjoittelua ja kokeiluja saadaksesi jotain muuta kuin perusanimaatiota. Jos haluat todella erikoisen logo-animoinnin, ammattimainen logoanimaattori kannattaa panostaa.
Jätä kommentti