L'animació del logotip és el procés d'introduir moviment o canvis en els elements visuals d'un logotip per fer-lo més dinàmic i atractiu. Es pot aplicar a diferents parts d'un logotip, com ara text, imatges, colors i formes, i pot tenir diferents graus de complexitat, que van des d'animacions simples com el parpelleig del text o els colors esvaïts, fins a animacions complexes que impliquen objectes en moviment o interactius. efectes.
L'animació del logotip és cada cop més habitual. Entre els telèfons intel·ligents i el desenvolupament general de la tecnologia d'Internet, els logotips són ara molt més habituals als espais digitals, i això obre la porta a efectes visuals com l'animació que no són possibles amb productes físics. Per descomptat, la creixent popularitat de l'animació del logotip significa que cada cop més marques la necessitaran per seguir sent competitives. Així que aprendre a animar un logotip pot ser una habilitat valuosa que portarà el vostre logotip al següent nivell.
Al mateix temps, el programari d'animació també s'ha tornat més omnipresent, simplificat i intuïtiu per donar suport a aquesta creixent base d'usuaris. Així, per molt que sembli l'animació de logotip tècnica i complexa, fins i tot els principiants ara poden crear animacions senzilles però efectives.
Animació de logotip a After Effects -
Pas 1. Prepareu el fitxer de logotip.
De fet, començarem el nostre tutorial sobre com animar un logotip a Adobe Illustrator (o programari de disseny de logotip similar). Això és necessari per garantir que el nostre fitxer logotip configurat per a l'animació.
Tot i que el programari d'animació en si és ràster, els fitxers de logotip originals han d'estar en format vectorial. Això us permet canviar-los sense dany per a la qualitat d'imatge (per exemple, fer zoom en un logotip ràster com a resultat de la pixelació), i això serà útil més endavant quan es treballi amb capes de forma.
Assegureu-vos que el vostre logotip estigui separat en capes mitjançant el tauler Capes.
El logotip també hauria de tenir diverses capes en lloc d'agrupar-se en un objecte. Això facilita la creació d'animacions més complexes animant parts individuals del logotip. Podeu crear capes noves utilitzant el " Afegeix una nova capa" a la part inferior del tauler Capes i, a continuació, copieu i enganxeu-hi parts del vostre logotip.
Finalment, com que l'animació és de naturalesa digital, també treballem amb colors RGB. Si el vostre fitxer Illustrator està configurat en CMYK, podeu canviar-ho seleccionant el vostre logotip i navegant a Edita > Edita colors > Converteix a RGB.
Quan estigueu preparat, exporteu el vostre logotip com a fitxer vectorial completament en capes. Com que els tipus de fitxer After Effects formen part de la família de programari d'Adobe, desaré el logotip que vaig crear com a fitxer AI (Adobe Illustrator), però hi ha diversos tipus diferents de fitxers vectorials per triar si feu servir un altre programari.
Pas 2: importeu el vostre logotip a After Effects. Animació del logotip
Obriu After Effects. La interfície pot semblar complicada a primera vista, així que anem a desglossar els conceptes bàsics:
- Barra d’eines : aquí podeu accedir a la principal eines gràfiquescom ara l'eina Bolígraf, l'eina Tipus, etc.
- Panell del projecte : aquí és on gestioneu i organitzeu els fitxers multimèdia per a tot el projecte.
- Finestra de composició : Aquesta és una finestra de previsualització de vídeo on podeu previsualitzar l'animació de la composició actual (sovint anomenada composició) en la qual esteu treballant. Les composicions són essencialment escenes, cadascuna amb les seves pròpies línies de temps d'animació. Analitzarem les composicions amb més detall a la següent secció.
- Cronologia : Aquí és on crearàs la teva animació. Consta tant d'una línia de temps literal a la dreta (on configurareu esdeveniments d'animació per executar-se a la línia de temps) com d'una àrea de disseny a l'esquerra (on superposareu i editareu els atributs dels vostres recursos multimèdia).
- Panell de control : aquí podeu accedir a diverses funcions de suport, com ara informació multimèdia, opcions de paràgraf i alineació, i biblioteques d'animacions i efectes visuals preconfigurades integrades a After Effects.
Si no esteu segur d'una eina o d'un botó, passeu el ratolí per sobre us donarà una descripció.
Per importar un fitxer de logotip, simplement arrossegueu-lo al tauler Projecte o seleccioneu-lo Dossier" > « Importa " > « Dossier" . Al quadre de diàleg següent, seleccioneu Importa el suport com a metratge i capes combinades .
Pas 3: configureu la vostra composició. Animació del logotip.
Una composició (comp) és un contenidor que us permet compondre, editar i aplicar animacions als fitxers multimèdia. Una producció més gran, com ara una pel·lícula, contindrà diverses pistes organitzades en un panell de projecte. Així que podeu pensar en les pistes com una única escena d'aquesta pel·lícula, i cada pista tindrà la seva pròpia línia de temps separada. En el nostre cas, una animació de logotip que dura menys de cinc segons requereix molt poques composicions.
Per personalitzar la vostra composició, arrossegueu els fitxers multimèdia al costat esquerre del tauler de la línia de temps.
Comencem amb un fons senzill. Feu clic amb el botó dret al tauler de disseny i seleccioneu " Crear" > « sòlid" . Com que el meu logotip és blanc, vaig triar sòlid color negre, però pots triar qualsevol color. A la finestra següent, poseu un nom al sòlid (en el meu cas "BG"), feu clic a " Feu la mida ordinador" i seleccioneu " D'ACORD" . Ara arrossegueu el vostre fitxer de logotip des del tauler Projecte al tauler Línia de temps i hauríeu de veure el vostre logotip previsualitzat a la finestra de composició. Si no, assegureu-vos de reorganitzar les capes arrossegant el fons sòlid sota el fitxer del logotip.
Feu clic amb el botó dret al fitxer del logotip al tauler de disseny i seleccioneu Crear" > « Converteix a una composició multicapa" . Això convertirà el vostre fitxer de logotip en una composició diferent (veureu que la icona ha canviat). Si feu doble clic al fitxer del logotip, ara s'obrirà una pestanya nova i us portarà a aquesta nova composició que conté totes les capes individuals que heu configurat a Illustrator. Ara podeu veure com funcionen les composicions: són essencialment com subcarpetes.
Animació del logotip
Si voleu, podeu convertir cadascuna d'aquestes capes en composicions separades fent clic amb el botó dret i seleccionant-les Composició preliminar" . Això donarà a aquesta capa la seva pròpia línia de temps d'animació, imbricada dins de la composició anterior. I si voleu animar tot el logotip alhora, hauríeu d'utilitzar una línia de temps associada a la composició principal.
Amb això fora del camí, anem a entendre com funcionen aquestes línies de temps per a l'animació.
Pas 4: animeu el logotip amb fotogrames clau
After Effects (i la majoria del programari d'animació) funciona amb fotogrames clau. Els fotogrames clau són essencialment marcadors que podeu establir a la línia de temps per determinar quan s'han de produir els estats inicial i final de la vostra animació.
Per exemple, comencem amb una animació molt senzilla: desaparèixer. Un objecte té diferents atributs associats, i els atributs que canvien durant un període de temps determinat són essencialment animació. Per veure aquests atributs, feu clic a la icona Expandir al costat del logotip seguit de propietat "Convertir" .
Creeu fotogrames clau fent clic a la icona del cronòmetre al costat de Propietats al tauler Línia de temps.
Per a una animació esvaïda, voleu treballar amb l'atribut que mesura la visibilitat d'un objecte: l'opacitat. L'opacitat s'estableix al 100% perquè per defecte el logotip és completament visible.
Feu clic a la icona del cronòmetre al costat de l'opció Opacitat i veureu un diamant on es troba el marcador del capçal de reproducció (la línia blava tènue que creua la línia de temps). Aquest és un fotograma clau, bàsicament una instantània del valor actual d'un atribut especificat. Mou el fotograma clau fent-lo clic i arrossegant-lo fins a la marca de 2 segons a la línia de temps. Arrossegueu el control lliscant cap a la marca de 0 segons, després creeu un altre fotograma clau i configureu l'opacitat al 0%. Premeu la barra espaiadora per veure l'animació a la finestra de composició.
Després dels efectes
Veureu que heu creat una animació d'esvaïment suau canviant l'opacitat del 0% al 100% en 2 segons amb només dos fotogrames clau. Així és com es fa tota l'animació a After Effects. Podeu crear un fotograma clau inicial i un fotograma clau final a diferents intervals al llarg de la línia de temps, i After Effects calcula automàticament les transicions de fotogrames necessàries per anar del punt A al punt B (tradicionalment anomenats fotogrames d'interpolació en el negoci de l'animació).
Es crea una animació senzilla i suau utilitzant dos fotogrames clau per a la propietat Opacitat.
Podeu veure que hi ha una sèrie d'atributs amb els quals podeu treballar Transformar la propietat, que aquí explicarem breument. No dubteu a experimentar amb fotogrames clau i modificar-ne cadascun per tenir una idea de les seves capacitats d'animació:
- Posició : aquest atribut descriu la posició del logotip a l'espai X, Y a la pantalla de disseny i permet animar el moviment lineal.
- Escala : aquest atribut descriu la mida del logotip (com a percentatge de la mida completa del fitxer original) i us permet crear animacions d'ampliar o reduir.
- Rotació : aquest atribut descriu l'orientació en graus i us permet crear animacions de rotació.
Assessorament d'un professional :
Quan es tracta d'animar un logotip, té sentit treballar al revés (com vam fer amb el fade-in), ja que l'animació hauria d'acabar amb el logotip complet i acabat. Això vol dir que heu de crear fotogrames clau abans de canviar res perquè tingueu instantànies dels valors dels atributs en el seu estat predeterminat. A continuació, podeu moure aquests fotogrames clau al punt final desitjat a la línia de temps (per molt temps que vulgueu que duri l'animació) i crear nous fotogrames clau per als canvis al començament de la línia de temps.
Pas 5. Anima el logotip mitjançant capes de forma.
Ara passem a tècniques d'animació més interessants amb capes de forma. Les capes de forma són objectes que contenen informació del camí, com ara punts d'ancoratge i línies de connector (similars a les dels programes vectorials), i manipular-les obre la porta a tota una gamma de possibilitats d'animació més enllà. Transformar propietats .
Com triar el color adequat per al vostre logotip?
Primer convertirem el logotip en una capa de forma. Al panell Composició en capes (les capes creades al pas 3), seleccioneu totes les vostres capes, feu clic amb el botó dret i seleccioneu " Crear" > « Crear formes a partir de la capa vectorial" . Veureu que cada capa està duplicada amb una estrella al costat: aquesta és una capa de forma. Enclavat sota la capa de forma, trobareu Propietat del contingut a més de Transformar propietat . A la dreta de Propietats del contingut també veuràs un botó " Afegeix " , que us permetrà seleccionar encara més atributs per animar.
Les capes de forma contenen un botó Afegeix (a la dreta de la propietat Contingut) que us permet afegir tot tipus de propietats animades, com ara camins de retall.
Escalar un objecte a Adobe Illustrator
Retalla els camins
Per al meu logotip, vaig utilitzar una animació bastant comuna i útil amb la propietat Retallar camins. Per fer-ho he afegit "Camins de retall" mitjançant el botó " Afegeix " a les capes de forma de cada lletra, establiu el fotograma clau de l'atribut Final al 0% al començament de la línia de temps i al 100% després d'aproximadament 1 segon. Com podeu veure, el contorn de les lletres sembla dibuixat per una mà invisible en temps real.
L'ús de la propietat Retalla els camins us permet animar línies perquè es dibuixin en temps real.
A més, volia afegir una mica d'animació d'accent al fons. Com que treballo en blanc i negre, vaig triar un efecte de túnel en bucle que recorda la Zona Crepuscular. Per fer-ho, vaig utilitzar l'eina de polígons del panell Eines per dibuixar una forma al centre de la meva composició, creant una nova capa de forma.
A continuació, vaig afegir una propietat Repetidor, vaig centrar la posició i vaig augmentar el nombre de còpies. Això duplica la forma, creant un túnel aparentment interminable. Ajustant l'escala augmenta l'espai entre cada còpia, i canviar la rotació orienta les còpies en diferents direccions per a l'interès visual.
Finalment, per donar-li més sabor, vaig crear un desplaçament de 0 a l'inici de la línia de temps i més tard vaig establir un valor negatiu a la línia de temps.
Utilitzant una capa de forma poligonal i la propietat Repetidor, vaig poder crear un fons animat.
Segurament heu endevinat que hi ha moltes opcions per a les capes de forma. És cert: hi ha cursos en línia complets sobre el tema a Internet i t'has de dedicar el temps a experimentar, practicar i aprendre.
Tampoc et puc dir quin estil d'animació s'adaptarà al teu logotip o quines eines específiques animacions que necessitareu per aconseguir aquest estil. Tanmateix, puc donar-vos consells sobre com descobrir-ho per vosaltres mateixos. Busqueu inspiració en altres logotips animats, com ara els vostres competidors, les marques que admireu i/o llocs com Pinterest o Dribbble, com ho vau fer quan vau crear el logotip originalment.
Trobareu que un cop comenceu a analitzar-los utilitzant els vostres nous coneixements sobre com animar un logotip, molts d'ells es basen en manipulacions amb formes i transformacions (fins i tot aquelles que estan clarament en capes amb efectes estilitzats avançats). Un cop trobeu algunes que us agradin, podeu treballar enrere a After Effects per intentar fer enginyeria inversa d'aquestes animacions per practicar.
Pas 6: estableix l'hora.
Parlem del temps, que descriu el ritme dels fotogrames d'animació al llarg de l'animació. Podeu veure una representació visual del temps si aneu a l'Editor de gràfics. Per fer-ho, feu clic a la icona del gràfic (anomenada Editor de gràfics quan passeu el cursor per sobre) a la part superior del tauler de la línia de temps i això canviarà la línia de temps a un gràfic de línies.
Si feu clic a un dels atributs del fotograma clau, veureu una línia recta d'un fotograma clau a l'altre. Ara mateix, com que només estàvem fent fotogrames clau dels punts inicial i final, vam deixar After Effects per fer el temps. Sense direcció, After Effects mou cada fotograma de l'animació de manera uniforme, donant lloc a una línia perfectament recta.
L'editor de gràfics mostra el temps de fotograma clau tal com es mostra al gràfic de línies.
Tanmateix, el canvi de propòsit en el temps és el que dóna a l'animació una sensació de realisme. Per exemple, en una animació de pilota que rebota, la pilota es mou més lentament a l'alçada del rebot i més ràpid a mesura que s'acosta al terra a causa de l'impuls i la gravetat. És a dir, no es mou a la mateixa velocitat durant tota l'animació i, si ho fes, destacaria com un robot.
Les eines Bezier, situades a la part inferior de l'editor de gràfics, us permeten ajustar la curvatura de la línia del gràfic.
Converteix fotogrames clau a Bezier automàtic
L'Editor de gràfics us permet ajustar el temps de la vostra pròpia animació utilitzant les anomenades nanses de Bezier per transformar una línia de gràfics en una corba. A l'extrem inferior dret de l'editor de gràfics, veureu algunes icones de punts quadrats adjuntats a les línies; aquestes són eines de Bezier.
Feu clic a un dels fotogrames clau i passeu el cursor per sobre de les eines de Bezier fins que trobeu l'etiqueta " Converteix fotogrames clau a Bezier automàtic" . Quan feu clic sobre això, veureu que apareix un marcador groc al gràfic. Arrossegant aquesta nansa farà que la línia es doblegui i això canviarà el temps de la vostra animació. Quan la corba és més pronunciada, els fotogrames es reproduiran més ràpid, i si la corba és més suau, els fotogrames es reproduiran més lentament.
Una corba més nítida correspon a una sincronització més ràpida, i una corba més suau correspon a una sincronització més lenta.
Per entendre realment els matisos d'ajustar el vostre propi temps requereix experiència en animació, per això ajustar manualment les corbes de Bezier és un tema més avançat. En aquesta guia per a principiants, us recomano utilitzar l'eina Bezier Facilitat fàcil (que aplica una corba automàtica al fotograma clau que seleccioneu) per a tots els intervals de temps d'animació. Podeu sol·licitar Facilitat fàcil a un fotograma clau fora de l'editor de diagrames seleccionant el fotograma clau i fent clic amb el botó dret.
Pas 7: exporteu el vostre logotip.
Quan estigueu preparat per exportar el vostre logotip animat acabat, seleccioneu " Dossier" > « Exportar" > « Afegeix Adobe Media Encoder a la cua" . After Effects exporta per defecte fitxer en format mp4, que és adequat per a vídeo. Com que volem crear un fitxer d'imatge compartible del nostre logotip, l'exportarem com a GIF animat. A la finestra Media Encoder, feu clic a la fletxa que hi ha al costat de la línia blava de text ressaltada sota la paraula "Format" i seleccioneu " GIF animat" . També podeu establir la carpeta de destinació del fitxer acabat fent clic al text blau sota les paraules "Fitxer de sortida".
Per exportar un fitxer, aneu a Fitxer > Exporta > Afegeix a la cua d'Adobe Media Encoder i seleccioneu Gif animat a la llista desplegable de la columna Format.
Feu doble clic al text blau ressaltat a sota del valor predefinit per obrir la finestra Opcions d'exportació. Hi ha algunes opcions que voldreu mirar per reduir la mida del fitxer: Qualitat (la vaig establir en 20), Velocitat de fotogrames (la vaig establir en 10, tot i que es recomanen velocitats de fotogrames (fps) més altes per al vídeo) i Durada, que és la barra blava a la vista prèvia (he retallat la meva a 4 segons). Seleccioneu D'ACORD, per tancar aquesta finestra.
Quan hàgiu acabat, seleccioneu la icona de reproducció verda a l'extrem superior dret de Media Encoder i el vostre fitxer es mostrarà a la carpeta de destinació escollida. Això és tot: animació del logotip acabada!
Doneu vida a la vostra marca amb l'animació del logotip.
-
L'animació del logotip és més que una tendència popular que les marques es veuen obligades a seguir. També hi ha una màgia innegable a l'animació del logotip, i és una manera fantàstica de crear un moment de plaer visual per a tots els que interactuen amb la vostra marca. I, per sort, el programari d'animació ha evolucionat de manera que gairebé tothom, independentment de les habilitats, pot afegir una mica d'aquesta màgia al seu propi logotip.
Dit això, tot i que aquest tutorial està pensat per començar amb els conceptes bàsics de l'animació de logotips, calen molts assaigs i errors, pràctica i experimentació per obtenir qualsevol cosa més enllà de l'animació bàsica. Si voleu una animació de logotip realment especial, val la pena la inversió un animador de logotip professional.
Deixa un comentari