Share
Vad du ska skapaAnimerade vektorikoner och mönster görs enkelt med Adobe Illustrator och Adobe Photoshop. Skapa enkelt enkla platta ikoner och importera dem till Photoshop för enkelt GIF-skapande. Vi skapar tre animerade ikoner och utforskar ett par tekniker för att skapa smidiga, enkla animeringar.
Behöver du inspiration? Utforska fler otroliga Vector Ikoner på Envato Market och Envato Elements.
Skapa en Nytt dokument i Adobe Illustrator. Jag ska använda Adobe Illustrator CC, men du kan enkelt anpassa dessa tekniker och mönster till tidigare versioner.
Med Rektangelverktyg (M), rita en ljusblå rektangel. Välj de två nedre ankarpunkterna med Direktmarkeringsverktyg (A), och dra den Levande hörn inåt för att runda ut dessa två hörn. Använd Penverktyg (P) att rita en streckad linje i mediumblå som definierar öppningen av kuvertet.
Rita två linjer antingen med Penverktyg eller den Linjesegmentverktyg (/) som möts nära mitten av kuvertet. Bygga ut dina slag under Objekt, och använd Formverktygsverktyg (Shift-M) att välja de icke-skärande delarna av linjerna från rektangeln för att radera dem. Detta är vårt grundläggande kuvertobjekt.
Kopiera (Control-C) och Klistra in (Control-V) kuvertdesignen. Rita en triangel från övre hörnet till övre hörnet för att öppna kuvertet. Välj triangeln medan du håller nere Alt, och dra ut en dubblett av triangeln. Rotera (R) det runt för att skapa öppningen av kuvertet och ställa fyllfärgen till en mörkblå. För denna demonstrations skull saknas mina linjer från konstruktionen nedan, men kommer att användas i den slutliga versionen.
Nu borde du ha två kuvert: en öppen och en stängd. Vårt mål är att skapa flera iterationer av kuvert som överbryggar klyftan mellan det slutna kuvertet och det öppna kuvertet för vår sista animation. Grupp (Control-G) sammanfatta varje av kuvertens komponenter.
Duplicera det öppna kuvertet. Använd Direktmarkeringsverktyg att ta den högsta trianglens främre ankarpunkt och dra den nedåt tills den nästan helt täcker den mörka triangeln. Duplicera den här kuvertgruppen och dra den lätta triangeln nedre punkten uppåt så att kuvertet ser ut som att det öppnar mer. Vi fortsätter att duplicera varje kuvert och flytta triangeln uppåt tills det är tillbaka till utgångspunkten igen.
Till slut, inklusive de stängda och öppna kuverten, har jag nio kuvert för min animerade ikon. Du kan kolla in placeringen av trianglarna och deras ankarpunkter nedan. Se till att varje kuvert är grupperat separat så att de blir enkla att importera till Adobe Photoshop senare.
Rita en ljusgul rektangel och Kopia och Klistra det över varje kuvert. Målet är att få rektangeln att flytta uppåt i jämn steg när den öppnas. Jag bestämde mig för att gå med sju rektanglar totalt för min design.
Välj det första kuvertet och dess överlappande rektangel. Använda Formverktygsverktyg, välj den del av den gula rektangeln som skär med insidan av kuvertet. Ta bort den icke-skärande delen av den gula rektangeln så att du bara lämnar med en liten triangel av den gula rektangeln. Upprepa denna teknik på de andra kuverten.
Fortsätt att definiera den gula brevformen för varje kuvert. Du kan se hur mina bokstäver ser ut med deras motsvarande kuvert nedan.
Rita flera tunna rektanglar för att simulera linjer skrivna på brevet. Justera och Distribuera rektanglarna i Justera panel. Sedan, Förena dem i Stigfinnare panel.
Placera flera uppsättningar rektanglar över varje kuvert. Observera hur vissa bokstäver visar fler rader än andra. Jag har satt uppsättningar rektanglar på sex av mina nio kuvert.
Välj bokstavsform och rektanglar. Använda Formverktygsverktyg, välj den icke-skärande delen av varje rektangel och radera dem. Repetera steg detta för alla dina kuvert.
Grupp tillsammans varje kuvert och dess komponenter så att du har nio separata grupper totalt. Nu är vi redo att animera vår design!
Öppna Adobe Photoshop och skapa en Nytt dokument. Eftersom vi skapar en enkel webbgrafik har jag satt mina Dokumentstorlek på 72 dpi (ingen anledning till en högre upplösning eftersom vi inte skriver ut vårt konstverk), 250 px bredd och 300 px höjd. Du kan skapa en större eller mindre fil om du vill, och även beskära ditt dokument när du behöver göra det.
I Adobe Illustrator, Kopia varje kuvertgrupp och Klistra dem i din Adobe Photoshop dokumentera. Om du vill ändra storlek på din bild utan kvalitetsförlust klistar du in varje grupp som en Smart Object. Om du är nöjd med storleken, Klistra dem till ett nytt lager som pixlar.
Se till att varje objekt är lagrat i följd. Dessutom vill du välja alla nio lager och Justera dem till sina centra och nedre kanter.
Öppna tidslinje panelen och skapa en Ny ram Animation. Börja med det stängda kuvertskiktet (göm de andra), skapa en Ny ramoch ställ in ramens fördröjning till 0,1 sekund. För varje ram, ta bort nästa lager och göm det föregående lagret tills kuvertet är öppet. Ställ sedan förseningen vid 0,2-0,5 sekunder.
Upprepa skyddar och döljer lager, men den här gången går i omvänd ordning så att kuvertet stängs igen. Se till att det är loopat "Evigt"så animationen fortsätter att öppna och stänga.
Luta dig tillbaka och träffa Spela på tidslinje panel för att titta på din gif loop. Du kan justera dina ramfördröjningar för en långsammare eller snabbare gif samt ändra hur länge det stängda eller öppna kuvertet ses i tidslinje panel. Låt oss gå vidare till de andra ikonerna och ytterligare tekniker för animering.
Tillbaka in Adobe Illustrator, antingen i ett nytt dokument eller på ett nytt lager, rita en cirkel med hjälp av Ellipsverktyg (L). Överla sedan cirkeln med en liten triangel och Förena de två formerna tillsammans: det här är din grundläggande chattbubbla. Rita tre cirklar för att ellipser ska användas i animationen senare.
Kopia och Klistra chattbubblan och Reflektera det över en Vertikal axel. Ändra den andra bubblans färg till en mörkare nyans. Skala ellipserna ner så att de passar in i chattbubblan. Nästa lägger vi till lite text.
Rita eller skriv ut enkla ord som "hej" och "hej", antingen med hjälp av en handskriven typ som du tycker om eller ritar varje bokstav med Paintbrush Tool (B) använder en standard kalligrafisk borste. Se till att text eller streck konverteras till objekt och att varje bokstav är ett separat objekt.
Skriv eller teckna enkla textikoner i chattbubblorna. Alternativt kan du rita emojis istället. Det är din chattikon och den övergripande stilen är upp till dig. Totalt finns 14 separata komponenter nedan: tre ellipser, fem bokstäver, två chattbubblor och fyra objekt som skapar uttryckssymboler. Var och en kommer att vara kopierade och klistras in i ett nytt dokument i Adobe Photoshop som ett separat lager.
I Adobe Photoshop, Klistra var och en av de 14 ikonkomponenterna i ditt dokument som ett nytt lager. Grupp tillsammans som föremål som jag har gjort nedan i Skikten panel: komponenterna för varje ord, uttryckssymbol, ellipser och chattbubblor. Detta håller din dokument organiserat och gör animering av din GIF enklare övergripande.
Till att börja med vill jag ha min första chattbubbla att komma in från vänster sida. Jag har gömt alla komponenter utom för den första chattbubblan och placerat den utanför min dokumentram för den första tidslinje ram. Inom sju bilder har jag flyttat min chattbubbla till mitten av dokumentet från vänster sida. Du kan flytta och ändra ett lager för varje ny ram utan att påverka ramen före den.
När chattbubblan är i sikte börjar jag "skriva" -effekten. Varje ellips är synlig en i taget inom den första chattbubblan, följt av det första meddelandet "hi". Sedan börjar jag skjuta den andra chattbubblan i ramen, medan det första chattmeddelandet (grupperade ihop i Skikten panelen som "hej") reduceras i opacitet (vid 20% varje ram) i Skikten panel.
Här är en titt på mina tidslinje panelen för hela GIF. Jag har över 30 ramar totalt och de flesta av dem har a 0,1 sekundars fördröjning. Vissa komponenter, som ellipserna, går "punkt, punkt, punkt" vid a 0,3 sekundars fördröjning, medan blekning av ord eller skrivning av bokstäver och uttryckssymboler är snabbare när det är möjligt. Du kan justera dina föredragna förseningar som du tycker är lämpliga. Du vill att skriva ska vara smidig och läsbar utan att vara för långsam och hakig.
Du kan kolla in min sista animation nedan: den första chattbubblan går in och börjar skriva, den andra bubblan svarar, och båda skickar uttryckssymboler och flyttar sedan tillbaka ur bildrutan. Vi måste göra en sista animerad ikon som kombinerar de idéer och tekniker som tidigare använts.
I Adobe Illustrator, rita en rektangel. Välj de två främsta ankarpunkterna med Direktmarkeringsverktyg, och dra den Levande hörn inåt. Rita en andra, mörkare rektangel under den första och runda ut sina nedre hörn. Observera att den andra rektangeln är mindre än den första, men båda delar samma breddmätning.
I mörkgrå rita en tunn rektangel för ögonblicklig filmöppning på den nedre halvan av kameran. Rita avrundade rektanglar och en cirkel för kamerans lins, sökare och ytterligare mönster på kamerans ansikte.
Lägg till en röd cirkel och en mörk, varm grå cirkel för kamerans knapp. För linsen, stapla grå och blå cirklar ovanpå varandra, växla mellan mörk och ljus. Använd Direktmarkeringsverktyg för att trycka in den inre cirkelns främre ankarpunkt så att linsen ser glänsande ut (se designen nedan).
För slutaranimationen ville jag ha en enkel öppen och nära animering. Du kan självklart skapa mer komplexa former om du vill. För min slutare tog jag en mörkgrå cirkel. Kopia och Klistra cirkeln och skär den i halva (överlappa cirkelns horisontella mittpunkt med ett linjesegment, och sedan Dela upp de två formerna i Stigfinnare panel).
Kopia och Klistra de två cirkelhalvorna. Flytta varje halvvägs från mitten och använd Direktmarkeringsverktyg för att flytta de nedre två ankarpunkterna för att klämma upp varje cirkel halvt något. Upprepa för sex totala iterationer som tar slutaren från stängda för att öppna. Alla sex av dessa grupper kommer att vara kopierade och klistras in i Photoshop dokument under animationsstadiet.
Nu kan vi jobba på den ögonblickliga filmen. I huvudsak drar du en serie rektanglar som blir större och större. Börja med en tunn, ljusgrå rektangel i mitten av den nedre halvan av kamerans ikon. Efter ett par rektanglar lägger du en mörkgrå rektangel till den ljusgråa. Lägg märke till hur de blir längre och längre när du går.
Här är en sista titt på alla kamerakomponenterna: kameran, de sex slutarformerna och de åtta (inklusive kamerans kamera) filmformer. Totalt kommer jag att vara kopiering och klistra in 15 komponenter i Photoshop dokument i nästa avsnitt. Låt oss animera den här kameran!
Som med ikonerna tidigare, Kopia och Klistra varje komponent i din Photoshop dokumentera. Jag fann det enklast för varje ikon att ha sitt eget dokument inom Photoshop så att jag koncentrerade mig på en animering i taget.
Gruppera slutarskikten och filmskikten i Skikten panelen ovanför kameralaget. Jag började med slutaranimering: stäng och öppna slutaren så att linsen ser ut som om den blinkar.
Då vill du animera filmen som går in och ut ur filmplatsen (alternativt kan den falla av kameran, som det verkligen skulle). Återigen cyklar du igenom varje filmkomponent, en efter en och sedan skapar en ram för var och en i omvänd.
Slutligen, en snabb anteckning om att spara din GIF filer. Gå till Arkiv> Exportera> Spara för webben (Legacy) (Alt-Shift-Control-S) och välj GIF från rullgardinsmenyn. Begränsa GIF till 32 färger eller mindre, om möjligt. Du kan förhandsgranska animeringen, ändra storlek på din fil och bestämma filens kvalitet innan du träffar Spara.
Här är en titt på min sista kameraikon i åtgärd!
Oavsett om du skapar ett gif med varje ram som ritats in Adobe Illustrator, manipulera komponenter medan i GIF skapande skede, eller en blandning av båda teknikerna, animera vektorgrafik är enkelt och roligt. Dela dina skapelser i kommentarsektionen nedan eller tryck dessa idéer till deras gränser och skapa en hel uppsättning animerade ikoner eller till och med scener redo för webbpublicering och mer!
För mer episka ikondesigner, gå vidare till Envato Elements, där du kan prenumerera på att låsa upp tusentals högkvalitativa designtillgångar för en månadsavgift! Kolla in en av våra favoriter nedan!
Du är med för en godis behandla med detta livfulla paket med vektorikoner! Paketet innehåller 30 minimalistiska ikoner som är lämpliga för olika projekt. Redigera dessa ikoner enkelt med hjälp av Adobe Illustrator och gör dina motiv pop med spännande färger!
Accentsconagua