Share
Ce veți creaAnimarea icoanelor vectoriale și a modelelor se face ușor cu Adobe Illustrator și Adobe Photoshop. Pur și simplu creați simboluri simple și le importați în Photoshop pentru crearea ușoară a GIF. Vom crea trei pictograme animate și vom explora câteva tehnici pentru crearea de animații ușoare și ușoare.
Aveți nevoie de inspirație? Explorați mai multe vectori incredibili pe Envato Market și Envato Elements.
Creeaza o Document nou în Adobe Illustrator. Voi folosi Adobe Illustrator CC, dar puteți adapta cu ușurință aceste tehnici și modele la versiunile anterioare.
Cu Instrumentul dreptunghiular (M), trageți un dreptunghi albastru deschis. Selectați cele două puncte inferioare de ancorare cu Instrumentul de selecție directă (A), și trageți Live Corners spre interior pentru a rotunji cele două colțuri. Folosește Instrument Pen (P) pentru a desena o linie mângâiată în albastru mediu care definește deschiderea plicului.
Desenați două linii fie cu Instrumentul Pen sau Instrumentul pentru segmentul de linie (/) care se întâlnesc în apropierea centrului plicului. Extinde loviturile tale sub Obiect, și utilizați Shape Builder Tool (Shift-M) pentru a selecta porțiunile care nu intersectează liniile din dreptunghi pentru a le șterge. Acesta este obiectul de bază al plicului.
Copiați (Control-C) și Lipiți (Control-V) proiectarea plicurilor. Desenați un triunghi din colțul de sus în colțul de sus pentru deschiderea plicului. Selectați triunghiul în timp ce țineți apăsat Alt, și trageți un duplicat al triunghiului. Rotiți (R) în jurul pentru a crea deschiderea plicului și a seta culoarea de umplere la un albastru mai închis. Din motive de demonstrație, liniile mele lipsesc din designul de mai jos, dar vor fi folosite în versiunea finală.
Acum ar trebui să aveți două plicuri: unul deschis și unul închis. Scopul nostru este de a crea mai multe iterații de plicuri care să împiedice decalajul dintre plicul închis și plicul deschis pentru animația noastră finală. Grup (Control-G) împreună cu componentele plicului.
Duplicat plicul deschis. Folosește Instrumentul de selecție directă pentru a apuca punctul de ancorare superior al triunghiului și trageți-l în jos până când acoperă aproape complet triunghiul întunecat. Duplicat acest grup de plicuri și trageți puțin punctul inferior al triunghiului în sus, astfel încât plicul pare să se deschidă mai mult. Vom continua să duplicăm fiecare plic și să mutăm triunghiul în sus până când se va întoarce din nou la punctul de plecare.
În final, inclusiv plicurile închise și deschise, am nouă plicuri pentru pictograma mea animată. Puteți verifica amplasarea triunghiurilor și a punctelor lor de ancorare de mai jos. Asigurați-vă că fiecare plic este grupat separat, astfel încât să fie ușor de importat Adobe Photoshop mai tarziu.
Desenați un dreptunghi galben deschis și Copie și Pastă pe fiecare plic. Scopul este de a face dreptunghiul să se deplaseze în sus, chiar în măsura în care se deschide. Am decis să merg cu șapte dreptunghiuri totale pentru designul meu.
Selectați primul plic și dreptunghiul său suprapus. Utilizarea Shape Builder Tool, selectați porțiunea de dreptunghi galben care se intersectează cu interiorul plicului. Ștergeți porțiunea non-intersectată a dreptunghiului galben astfel încât să rămâneți doar cu un triunghi mic al dreptunghiului galben. Repetați această tehnică pe celelalte plicuri.
Continuați să definiți forma literei galbene pentru fiecare plic. Puteți vedea ce arată scrisorile mele cu plicul corespunzător de mai jos.
Desenați mai multe dreptunghiuri subțiri pentru a simula liniile scrise pe litera. Alinia și Distribui dreptunghiurile din Alinia panou. Atunci, Uni acestea în deschizător de drumuri panou.
Plasați mai multe seturi de dreptunghiuri pe fiecare plic. Rețineți cum unele litere arată mai multe linii decât altele. Am plasat seturi de dreptunghiuri pe șase din cele nouă plicuri.
Selectați forma literei și dreptunghiurile. Utilizarea Shape Builder Tool, selectați porțiunea care nu intersectează fiecare dreptunghi și ștergeți-le. Repetați pasul pentru toate plicurile.
grup împreună cu fiecare plic și componentele acestuia, astfel încât să aveți în total nouă grupuri separate. Acum suntem gata să animăm designul nostru!
Deschis Adobe Photoshop și creeaza o Document nou. De vreme ce creăm o grafică web simplă, mi-am stabilit-o Dimensiunea documentului la 72 dpi (nu există motive pentru o rezoluție mai mare, deoarece nu imprimăm operele noastre de artă), 250 px lățime și 300 px înălţime. Aveți posibilitatea să creați un fișier mai mare sau mai mic, dacă doriți, și să vă cultivați documentul ori de câte ori aveți nevoie.
În Adobe Illustrator, Copie fiecare grup de plicuri și Pastă în ele Adobe Photoshop document. Dacă doriți să redimensionați imaginea fără să pierdeți calitatea, lipiți fiecare grup ca pe un Obiect inteligent. Dacă sunteți mulțumit de dimensiune, Pastă le într - un strat nou ca pixeli.
Asigurați-vă că fiecare obiect este stratificat secvențial. În plus, veți dori să selectați toate cele nouă straturi și Alinia la centrele și marginile de jos.
Deschide Cronologie și creați un Noua animație a cadrelor. Începând cu stratul de plic închis (ascundeți ceilalți), creați un Noul cadruși setați întârzierea cadrului la 0,1 secunde. Pentru fiecare cadru, deschideți următorul strat și ascundeți stratul anterior până când plicul este deschis. Apoi, setați întârzierea la 0,2-0,5 secunde.
Repetați dezbrăcarea și ascunderea straturilor, dar de data aceasta mergeți în ordine inversă, astfel încât plicul se închide din nou. Asigurați-vă că este în buclă "Pentru totdeauna"astfel încât animația continuă să se deschidă și să se închidă.
Stați înapoi și loviți Joaca pe Cronologie panou pentru a viziona bucla gif. Aveți posibilitatea să ajustați întârzierile cadrului pentru un gif mai lent sau mai rapid, precum și să schimbați cât timp plicul închis sau deschis este văzut în Cronologie panou. Să trecem la celelalte icoane și tehnici suplimentare pentru animație.
Înapoi în Adobe Illustrator, fie într - un document nou, fie pe un nou strat, trasează un cerc folosind Instrument de elipsă (L). Apoi, suprapuneți cercul cu un triunghi mic și Uni cele două forme împreună: acesta este bule de chat de bază. Desenați trei cercuri pentru elipse pentru a fi utilizate în animație mai târziu.
Copie și Pastă bula de chat și Reflectați peste o Axa verticala. Schimbați culoarea celei de-a doua bule într-o nuanță mai închisă. Scară elipsele în jos pentru a se încadra în bule de chat. Apoi vom adăuga un text.
Desenați sau tastați cuvinte simple precum "hei" și "hi", fie folosind un font în stil scris de mână, care vă place sau desenând fiecare literă cu Instrumentul pentru pensula (B) utilizând o perie caligrafică implicită. Asigurați-vă că orice text sau lovituri de mână sunt convertite în obiecte și că fiecare literă este un obiect separat.
Tastați sau desenați emoticoane text simple în cadrul bulelor de chat. Alternativ, puteți trage emojis în schimb. Este pictograma dvs. de chat și stilul general depinde de dvs. În total, există mai jos 14 componente separate: trei elipse, cinci litere, două bule de chat și patru obiecte care creează emoticoane. Fiecare va fi Copiată și S-a inserat într - un nou document în Adobe Photoshop ca strat separat.
În Adobe Photoshop, Pastă fiecare dintre cele 14 componente ale pictogramei în documentul dvs. ca un nou strat. grup împreună ca obiecte, așa cum am făcut mai jos în straturi panou: componentele pentru fiecare cuvânt, emoticon, elipse și bule de chat. Asta ține de tine document organizat și face animarea dvs. GIF mai ușor de ansamblu.
Pentru început, vreau ca primul meu buletin de chat să vină din partea stângă. Am ascuns toate componentele cu excepția primului bule de chat și l-am așezat în afara cadrului meu de documente pentru prima Cronologie cadru. În cadrul a șapte cadre, mi-am mutat bulele de chat în centrul documentului din partea stângă. Puteți muta și modifica un strat pentru fiecare cadru nou, fără a afecta cadrul înainte de el.
Odată ce balonul de chat este în vedere, încep demersul de "tastare". Fiecare elipsă este vizibilă una câte una în cadrul primului bule de chat, urmată de primul mesaj de "hi". Apoi încep să alunecă cel de-al doilea bule de chat în cadru, în timp ce primul mesaj de chat (grupat în straturi panou ca "hi") este redus în opacitate (prin 20% fiecare cadru) în straturi panou.
Uită-te la mine Cronologie panou pentru întreaga GIF. Am terminat 30 cadre în total și majoritatea au un 0,1 întârziere secundă. Unele componente, cum ar fi elipsele, merg "punct, punct, punct" la 0,3 secunde întârziere, în timp ce decolorarea cuvintelor sau scrierea de litere și emoticoane este mai rapidă atunci când este posibil. Puteți ajusta întârzierile preferate după cum doriți. Doriți ca tastarea să fie netedă și lizibilă, fără a fi prea lentă și agitată.
Puteți vedea animația mea finală mai jos: primul balon de chat intră și începe să scrie, cel de-al doilea balon răspunde și ambii trimite emoticoane și apoi se mută înapoi din cadru. Trebuie să facem o ultimă icoană animată care să combine ideile și tehnicile utilizate anterior.
În Adobe Illustrator, trage un dreptunghi. Selectați primele două puncte de ancorare cu Instrumentul de selecție directă, și trageți Live Corners spre interior. Desenați un al doilea dreptunghi mai întunecat sub primul și rotiți-i colțurile de jos. Rețineți că cel de-al doilea dreptunghi este mai mic decât primul, dar ambele au aceeași măsură de lățime.
În gri închis, desenați un dreptunghi subțire pentru deschiderea instantanee a filmului din jumătatea inferioară a camerei. Desenați dreptunghiuri rotunjite și un cerc pentru obiectivul obiectivului, vizor și alte modele de pe fața camerei foto.
Adăugați un cerc roșu și un cerc gri închis și închis pentru butonul camerei. Pentru lentilă, puneți cercuri în gri și albastru unul pe altul, alternând între întuneric și lumină. Folosește Instrumentul de selecție directă pentru a împinge punctul de ancorare superior al cercului interior în jos, astfel încât obiectivul să fie strălucitor (a se vedea modelul de mai jos).
Pentru animația de fotografiere am vrut o animație simplă deschisă și aproape. Desigur, puteți crea forme mai complexe dacă doriți. Pentru obturatorul meu am desenat un cerc gri închis. Copie și Pastă cercul și tăiați-l în jumătate (se suprapun centrul orizontal al cercului cu un segment de linie și apoi Divide cele două forme din deschizător de drumuri panou).
Copie și Pastă cele două jumătăți de cerc. Deplasați fiecare jumătate din centrul și utilizați Instrumentul de selecție directă pentru a mișca cele două puncte de ancorare de jos pentru a împărți fiecare cerc pe jumătate ușor. Repetați pentru șase iterații totale care aduc declanșatorul închis și deschis. Toate cele șase dintre aceste grupuri vor fi Copiată și S-a inserat în Photoshop document în timpul etapei de animație.
Acum putem lucra la filmul instant. În esență, desenezi o serie de dreptunghiuri care devin tot mai mari. Începeți cu un dreptunghi subțire, gri deschis în centrul jumătății inferioare a pictogramei camerei. Dupa cateva perechi de dreptunghiuri, veti adauga un dreptunghi gri-inchis la gri deschis. Observați cum devin amândouă și mai mult timp pe măsură ce mergeți.
Iată o privire finală asupra tuturor componentelor camerei: camera foto, cele șase forme de obturator și cele opt (inclusiv cea de pe cameră) formează filme. În total voi fi copiere și Lipire 15 componente în Photoshop document în secțiunea următoare. Să animăm camera asta!
Ca și pictogramele anterioare, Copie și Pastă fiecare componentă în dvs. Photoshop document. Mi sa părut mai ușor ca fiecare icoană să aibă propriul document în Photoshop, astfel încât să mă concentrez asupra unei singure animații la un moment dat.
Grupați împreună straturile de obturator și straturile de film în straturi panou deasupra stratului camerei. Am început cu animația de închidere: închideți și deschideți obturatorul astfel încât obiectivul să pară ca și când clipește.
Apoi, veți dori să animați filmul care intră și iese din slotul filmului (în caz contrar, poate cădea de pe cameră, așa cum ar fi cu adevărat). Încă o dată, veți trece prin fiecare componentă de film, una după alta, și apoi creați un cadru pentru fiecare în sens invers.
În cele din urmă, o notă rapidă cu privire la salvarea dvs. GIF fișiere. Mergi la Fișier> Export> Salvare pentru Web (Legacy) (Alt-Shift-Control-S) și selectați GIF din meniul drop-down. Limitați limita GIF la 32 de culori sau mai puțin, dacă este posibil. Puteți previzualiza animația, puteți redimensiona fișierul și puteți decide calitatea fișierului înainte de a lovi Salvați.
Iată o privire la pictograma mea finală a camerei în acțiune!
Indiferent dacă creați un GIF cu fiecare cadru tras înăuntru Adobe Illustrator, manipularea componentelor în timpul procesului GIF etapa de creație sau un amestec de ambele tehnici, animarea graficii vectoriale este simplă și distractivă. Distribuiți-vă creațiile în secțiunea de comentarii de mai jos sau împingeți aceste idei la limitele lor și creați un întreg set de pictograme animate sau chiar scene gata pentru publicarea pe web și multe altele!
Pentru mai multe modele de efecte iconice, mergeți la Envato Elements, unde vă puteți abona să deblocați mii de materiale de design de înaltă calitate pentru o singură taxă lunară! Consultați unul dintre preferatele noastre de mai jos!
Sunteți în căutarea unui delicios gust cu acest pachet vibrant de pictograme vectoriale! Acest pachet conține 30 de icoane minimaliste potrivite pentru diverse proiecte. Modificați cu ușurință aceste pictograme utilizând Adobe Illustrator și creați-vă design-urile pop cu culori interesante!
Accentsconagua