Logon animaatio

Logoanimaatio on prosessi, jossa logon visuaalisiin elementteihin tuodaan liikettä tai muutoksia, jotta logosta tulee 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 häivytyksestä, monimutkaisiin animaatioihin, joissa on liikkuvia tai interaktiivisia kohteita. 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ä enemmän tuotemerkkejä tarvitsee sitä pysyäkseen kilpailukykyisenä. 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.

Logon rekisteröinti

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ä.

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:

 

1. toolbar : tästä pääset pääsivulle grafiikkatyökalutkuten kynätyökalu, kirjoitustyökalu jne.
2. Projektipaneeli : Tässä voit hallita ja järjestää koko projektin mediatiedostoja.
3. 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.
4. 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).
5. 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ä.

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 voit nähdä kuinka comps toimivat: ne ovat pohjimmiltaan kuin sisäkkäisiä kansioita.

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" .

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 animaatiossa perinteisesti kehysten väliksi liiketoimintaa).

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 .

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.

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. Tätä varten käytin työkalu monikulmio työkalupaneelissa piirtääksesi muodon sävellykseni keskelle ja luodaksesi 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.

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.

Tarkoituksenmukainen ajanmuutos antaa kuitenkin animaatiolle realismia. Esimerkiksi pomppivassa pallo-animaatiossa pallo liikkuu hitaammin pomppimiskorkeudella ja nopeammin, kun se lähestyy maata vauhdin 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äet useita kuvakkeet viivoihin kiinnitetyt neliöpisteet 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.

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 asentaa kansio valmiin tiedoston kohde napsauttamalla sinistä tekstiä sanojen "Output File" alla.

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.

 АЗБУКА

 

FAQ. Logon animaatio.

1. Mitä logoanimaatio on?

Logoanimaatio on prosessi, jossa logoon lisätään liikettä tai visuaalisia tehosteita, jotta logosta tulee dynaamisempi ja silmiinpistävämpi.

2. Miksi tarvitset logoanimaatiota?

Logo-animaatio auttaa sinua erottumaan kilpailijoista, parantaa tuotekuvaa, herättää huomiota ja voi tehdä logostasi ikimuistoisen.

3. Mitä ohjelmia käytetään logoanimaatioiden luomiseen?

• Adobe After Effects: Ammattimainen ohjelma monimutkaisten animaatioiden ja visuaalisten tehosteiden luomiseen.
• tehosekoitin: Ilmainen ja tehokas 3D-animaatioohjelmisto.
• Cinema 4D: Suosittu 3D-mallinnus- ja animaatioohjelmisto ammattilaisten keskuudessa.
• Adobe Animate: Ohjelma 2D-animaatioiden luomiseen.
• Liike: Applen animaatioohjelmisto, jota käytetään pääasiassa videotuotantoon.

4. Millaisia ​​logoanimaatioita on olemassa?

• 2D-animaatio: Yksinkertaiset liikkeet ja tehosteet 2D-logoille.
• 3D-animaatio: Monimutkaisempia ja realistisempia liikkeitä 3D-logoille.
• Morphoimalla: Tasainen muodonmuutos tai logon värit.
• Sarjaanimaatio: Logo tulee kasaan tai hajoaa osiin.
• Typografinen animaatio: Logotekstin animaatio.

5. Kuinka kauan logoanimaation tulee kestää?

Logoanimaatio kestää yleensä 3-10 sekuntia. On tärkeää, että se ei ole liian pitkä eikä häiritse pääsisällöstä.

6. Missä voin käyttää logoanimaatiota?

• Web-sivustot: Päällä kotisivu tai latausnäytöksi.
• video: Videoiden alku- ja lopputeksteissä.
• Sosiaaliset verkostot: Lyhyissä videopostauksissa tai tarinoissa.
• Esitykset: Yritys- ja markkinointiesityksessä.
• mainos: Digi- ja televisiossa mainonta.

7. Mitkä ovat parhaat käytännöt logoanimaatioita luotaessa?

• Brändin noudattaminen: Animaation tulee heijastaa brändin tyyliä ja arvoja.
• helppous: Liian monimutkainen animaatio voi häiritä ja painaa katsojaa.
• Laatu: Высокое качество animaatio auttaa luomaan ammattimaisen kuvan.
• lyhyt: Lyhyet animaatiot ovat tehokkaampia ja mieleenpainuvampia.

8. Kuinka kauan logoanimaation luominen kestää?

Luomisaika riippuu animaation monimutkaisuudesta ja suunnittelijan taidoista. Yksinkertainen animaatio voi kestää useita tunteja, kun taas monimutkaiset projektit voivat vaatia viikkoja työtä.

9. Mitä kustannuksia logoanimaation luominen maksaa?

Hinta vaihtelee työn monimutkaisuuden ja suunnittelijan kokemuksen mukaan. Yksinkertainen animaatio voi maksaa $ 100 - $ 500, kun taas monimutkaisempi ja ammattimainen työ voi maksaa $ 1000 tai enemmän.

10. Voinko animoida olemassa olevan logon?

Kyllä, voit animoida olemassa olevan logosi lisäämällä liikettä ja tehosteita. On tärkeää säilyttää logon alkuperäinen tyyli ja elementit.

11. Mitä logoelementtejä voidaan animoida?

• teksti: Näkyy, katoaa, muuttaa tekstin kokoa ja väriä.
• Graafiset elementit: Pyöritä, skaalaa, siirrä, muuta väriä ja muotoa.
• tausta: siirtymät, gradientit ja muut visuaaliset tehosteet.

12. Mitkä logoanimaatiotrendit ovat tärkeitä nykyään?

• minimalismi: Yksinkertaiset ja selkeät animaatiot.
• Käsityöt: Tehosteet, jotka luovat käsin piirrettyjen elementtien tunteen.
• 3D-animaatio: 3D-tehosteiden ja mallien käyttäminen.
• Gradientit ja värisiirtymät: Tasaiset värien ja sävyjen muutokset.
• Interaktiivisia elementtejä: Animaatio, joka vastaa käyttäjän toimiin.