Share
Hva du skal skapeAnimerende vektorikoner og -design er gjort enkelt med Adobe Illustrator og Adobe Photoshop. Du kan bare lage enkle flate ikoner og importere dem til Photoshop for enkel GIF-oppretting. Vi lager tre animerte ikoner og utforsker et par teknikker for å skape jevne, enkle animasjoner.
Trenger du inspirasjon? Utforsk flere utrolige Vector ikoner på Envato Market og Envato Elements.
Lage en Nytt dokument i Adobe Illustrator. Jeg skal bruke Adobe Illustrator CC, men du kan enkelt tilpasse disse teknikkene og designene til tidligere versjoner.
Med Rektangelverktøy (M), tegne et lyseblått rektangel. Velg de to nedre ankerpunktene med Direkte utvalgsverktøy (A), og trekk den Levende hjørner innover for å runde ut de to hjørnene. Bruke Pennverktøyet (P) å tegne en strekket linje i medium blå som definerer åpningen av konvolutten.
Tegn to linjer enten med Pennverktøy eller Linjesegmentverktøy (/) som møtes nær midten av konvolutten. Utvide ditt slag under Gjenstand, og bruk Form Builder Tool (Skift-M) å velge de ikke-kryssende delene av linjene fra rektangelet for å slette dem. Dette er vårt grunnleggende konvoluttobjekt.
Kopier (Control-C) og Lim inn (Control-V) konvoluttdesignen. Tegn en trekant fra øverste hjørne til øverste hjørne for åpningen av konvolutten. Velg trekant mens du holder nede alt, og trekk ut en duplikat av trekanten. Roter (R) det rundt for å skape åpningen av konvolutten, og sett fyllfarge til mørkere blå. For denne demonstrasjonens skyld mangler linjene fra designet nedenfor, men vil bli brukt i den endelige versjonen.
Nå bør du ha to konvolutter: en åpen og en lukket. Målet vårt er å lage flere iterasjoner av konvolutter som bryter gapet mellom den lukkede konvolutten og den åpne konvolutten for vår siste animasjon. Gruppe (Control-G) sammen hver av konvoluttens komponenter.
Duplisere den åpne konvolutten. Bruke Direkte utvalgsverktøy å ta tak i toppkantenes toppankerpunkt og dra den nedover til den nesten dekker helt den mørke trekant. Duplisere denne konvoluttgruppen og trekk den tynnere trekantens nedre punkt oppover litt slik at konvolutten ser ut som den åpner mer. Vi fortsetter å duplisere hver konvolutt og flytte trekanten oppover til den er tilbake til startpunktet igjen.
Til slutt, inkludert de lukkede og åpne konvoluttene, har jeg ni konvolutter for mitt animerte ikon. Du kan sjekke plasseringen av trekanter og deres ankerpunkter nedenfor. Sørg for at hver konvolutt er gruppert separat slik at de blir enkle å importere til Adobe Photoshop seinere.
Tegn et lysegult rektangel og Kopiere og Lim inn det over hver konvolutt. Målet er å få rektangelet til å bevege seg oppover i jevne steg når det åpnes. Jeg bestemte meg å gå med syv rektangler totalt for mitt design.
Velg den første konvolutten og dens overlappende rektangel. Bruker Form Builder Tool, velg delen av det gule rektangel som krysser med innsiden av konvolutten. Slett den ikke-skjærende delen av det gule rektangelet, slik at du bare er igjen med en liten trekant av det gule rektangel. Gjenta denne teknikken på de andre konvoluttene.
Fortsett å definere den gule bokstavformen for hver konvolutt. Du kan se hva mine bokstaver ser ut som med tilhørende konvolutt nedenfor.
Tegn flere tynne rektangler for å simulere linjer skrevet på brevet. Rette inn og Distribuere rektanglene i Rette inn panel. Deretter, Forene dem i Pathfinder panel.
Plasser flere sett med rektangler over hver konvolutt. Legg merke til hvordan noen bokstaver viser flere linjer enn andre. Jeg har satt sett med rektangler på seks av mine ni konvolutter.
Velg bokstavsform og rektangler. Bruker Form Builder Tool, velg den ikke-skjærende delen av hvert rektangel og slett dem. Gjenta trinn dette for alle konvoluttene dine.
Gruppe sammen hver konvolutt og dens komponenter slik at du har ni separate grupper totalt. Nå er vi klare til å animere vårt design!
Åpen Adobe Photoshop og lage en Nytt dokument. Siden vi lager en enkel web grafikk, har jeg satt min Dokumentstørrelse på 72 dpi (ingen grunn til høyere oppløsning siden vi ikke skriver ut vårt kunstverk), 250 px bredde og 300 px høyde. Du kan opprette en større eller mindre fil hvis du ønsker det, og også beskjære dokumentet ditt når du trenger det.
I Adobe Illustrator, Kopiere hver konvoluttgruppe og Lim inn dem inn i din Adobe Photoshop dokument. Hvis du vil endre størrelsen på bildet ditt uten tap i kvalitet, limer du inn hver gruppe som en Smart objekt. Hvis du er fornøyd med størrelsen, Lim inn dem inn i et nytt lag som piksler.
Kontroller at hvert objekt er lagdelt i rekkefølge. I tillegg vil du velge alle ni lagene og Rette inn dem til sine sentre og bunnkanter.
Åpne Tidslinje panel og opprett en Ny ramme animasjon. Begynn med lukket konvoluttlag (gjem de andre), opprett en Ny rammeog sett rammens forsinkelse til 0,1 sekund. For hver ramme, ta av det neste laget og skjul det forrige laget til konvolutten er åpen. Sett deretter forsinkelsen på 0,2-0,5 sekunder.
Gjenta å skjule og skjule lag, men denne gangen går du i omvendt rekkefølge slik at konvolutten lukkes igjen. Pass på at det er sløyfet "For alltid"så animasjonen fortsetter å åpne og lukke.
Len deg tilbake og klikk Spille på Tidslinje panel for å se din gif loop. Du kan justere rammforsinkelsene dine for et langsommere eller raskere gif, samt endre hvor lenge den lukkede eller åpne konvolutten blir sett i Tidslinje panel. La oss gå videre til de andre ikonene og flere teknikker for å animere.
Tilbake i Adobe Illustrator, enten i et nytt dokument eller på et nytt lag, tegne en sirkel ved hjelp av Ellipseverktøyet (L). Deretter overlapper sirkelen med en liten trekant og Forene de to formene sammen: dette er din grunnleggende chatboble. Tegn tre sirkler for ellipser som skal brukes i animasjonen senere.
Kopiere og Lim inn Chat-boblen og Reflektere det over a Vertikal akse. Endre den andre boblens farge til en mørkere fargetone. Scale ellipser ned, slik at de passer inn i chatboblen. Neste legger vi til litt tekst.
Tegn eller skriv ut enkle ord som "hei" og "hei", enten ved hjelp av en håndskrevet skrift du nyter eller tegner hvert brev med Paintbrush Tool (B) bruker en standard kalligrafisk børste. Pass på at tekst eller streker konverteres til objekter, og at hvert brev er en separat gjenstand.
Skriv eller tegne enkle tekst uttrykksikoner i chat-boblene. Alternativt kan du tegne emojis i stedet. Det er ditt chat-ikon, og den overordnede stilen er opp til deg. Totalt er det 14 separate komponenter under: tre ellipser, fem bokstaver, to chatbobler og fire objekter som lager uttrykksikoner. Hver og en vil være kopiert og limes inn i et nytt dokument i Adobe Photoshop som et eget lag.
I Adobe Photoshop, Lim inn Hver av de 14 ikonskomponentene i dokumentet ditt som et nytt lag. Gruppe sammen som gjenstander som jeg har gjort nedenfor i lag panel: komponentene for hvert ord, uttrykksikon, ellipser og chatbobler. Dette holder din dokument organisert og gjør animering din GIF lettere samlet.
Til å begynne med vil jeg at min første chatboble kommer inn fra venstre side. Jeg har skjult alle komponentene unntatt den første chat-boblen og plassert den utenfor dokumentrammen min til den første Tidslinje ramme. Innen sju rammer har jeg flyttet min chatboble til midten av dokumentet fra venstre side. Du kan flytte og endre et lag for hver ny ramme uten å påvirke rammen før den.
Når chatboblen er i gang, starter jeg "skrive" -effekten. Hver ellipse er synlig en om gang i den første chat-boblen, etterfulgt av den første meldingen av "hei". Så begynner jeg å skyve den andre chatboblen inn i rammen, mens den første chatmeldingen (gruppert sammen i lag panelet som "hei") er redusert i uklarhet (ved 20% hver ramme) i lag panel.
Her er en titt på min Tidslinje panel for hele GIF. Jeg har over 30 rammer totalt og de fleste av dem har a 0,1 sekunders forsinkelse. Noen komponenter, som ellipser, går "prikk, prikk, prikk" på en 0,3 sekunders forsinkelse, mens fading av ord eller skriving av bokstaver og uttrykksikoner er raskere når det er mulig. Du kan justere dine foretrukne forsinkelser ettersom du passer. Du vil at skrivingen skal være jevn og lesbar uten å være for langsom og hakkete.
Du kan sjekke ut min siste animasjon under: Den første chatboblen kommer inn og begynner å skrive, den andre boblen reagerer, og begge sender uttrykksikoner og flyttes deretter ut av rammen. Vi må lage et siste animert ikon som kombinerer ideene og teknikkene som tidligere ble brukt.
I Adobe Illustrator, tegne et rektangel. Velg de to øverste ankerpunktene med Direkte utvalgsverktøy, og trekk den Levende hjørner innover. Tegn et andre, mørkere rektangel under den første, og rund ut sine nederste hjørner. Merk at det andre rektangelet er mindre enn det første, men begge deler samme breddemåling.
I mørkegrå tegner du et tynt rektangel for øyeblikkelig filmåpning på den nederste halvdelen av kameraet. Tegn avrundede rektangler og en sirkel for kameraets objektiv, søker og ekstra design på kameraets ansikt.
Legg til en rød sirkel og en mørk, varm grå sirkel for kameraets knapp. For linsen, stable grå og blå sirkler oppå hverandre, vekslende mellom mørk og lys. Bruke Direkte utvalgsverktøy å skyve toppankerpunktet til den indre sirkelen nedover, slik at objektivet ser skinnende ut (se designet nedenfor).
For lukkeranimasjonen ønsket jeg en enkel, åpen og nær animasjon. Du kan selvsagt lage mer komplekse former hvis du vil. For min lukker tok jeg en mørkegrå sirkel. Kopiere og Lim inn sirkelen og kutt den i halv (overlapp horisontal senter av sirkelen med et linjesegment, og deretter Dele opp de to figurene i Pathfinder panel).
Kopiere og Lim inn de to sirkelhalvdelene. Flytt hver halvveis fra sentrum og bruk Direkte utvalgsverktøy å flytte de to nedre ankerpunktene for å trekke opp hver sirkel halvt litt. Gjenta for seks totale iterasjoner som bringer lukkeren fra lukket for å åpne. Alle seks av disse gruppene vil være kopiert og limes inn i det Photoshop dokument under animasjonstrinnet.
Nå kan vi jobbe med øyeblikkelig film. I hovedsak tegner du en serie rektangler som blir større og større. Start med et tynt, lysegrå rektangel i midten av den nedre halvdelen av kameraikonet. Etter et par rektangler legger du et mørkegrå rektangel til den lysegrå. Legg merke til hvordan de blir lengre og lengre mens du går.
Her er en endelig titt på alle kamerakomponenter: kameraet, de seks lukkerformene og de åtte filmene (inkludert kameraet). Totalt vil jeg være kopiering og lime 15 komponenter i Photoshop dokument i neste avsnitt. La oss animere dette kameraet!
Som med ikonene før, Kopiere og Lim inn hver komponent i din Photoshop dokument. Jeg fant det enklest for hvert ikon å ha sitt eget dokument i Photoshop, slik at jeg konsentrert seg om en animasjon av gangen.
Grupper sammen lukkelagene og filmlagene i lag panel over kamera laget. Jeg begynte med lukkeranimasjonen: Lukk og åpne lukkeren slik at objektivet ser ut som om det blinker.
Deretter vil du animere filmen som går inn og ut av filmsporet (alternativt kan den falle av kameraet, som det egentlig ville). Nok en gang vil du sykle gjennom hver filmkomponent, den ene etter den andre, og deretter lage en ramme for hver i revers.
Til slutt, et raskt notat om lagring av din GIF filer. Gå til Fil> Eksporter> Lagre for web (Legacy) (Alt-Shift-Control-S) og velg GIF fra rullegardinmenyen. Begrense GIF til 32 farger eller mindre, hvis det er mulig. Du kan forhåndsvise animasjonen, endre størrelsen på filen din og bestemme filens kvalitet før du trykker på Lagre.
Her er en titt på mitt siste kameraikon i aksjon!
Enten du lager et gif med hver ramme som er tegnet inn Adobe Illustrator, manipulere komponenter mens i GIF skapelsesstadiet, eller en blanding av begge teknikker, animerer vektorgrafikk er enkelt og morsomt. Del dine kreasjoner i kommentarseksjonen nedenfor, eller trykk disse ideene til deres grenser og opprett et helt sett animerte ikoner eller til og med scener klar for webpublisering og mer!
For mer episke ikondesigner, gå videre til Envato Elements, hvor du kan abonnere på å låse opp tusenvis av designmateriell av høy kvalitet for en månedlig avgift! Sjekk ut en av våre favoritter nedenfor!
Du er i for en velsmakende godbit med denne levende pakken med vektorikoner! Denne pakken inneholder 30 minimalistiske ikoner som passer for ulike prosjekter. Rediger disse ikonene enkelt ved hjelp av Adobe Illustrator og gjør designene dine pop med spennende farger!
Accentsconagua