How å lage animerte vektor ikoner i Adobe Illustrator og Photoshop
Hva du skal lage
Animere vektor ikoner og design er gjort enkelt med Adobe Illustrator og Adobe Photoshop. Bare lage enkle flate ikoner og importere dem inn i Photoshop for enkel GIF skapelse. Vi vil opprette tre animerte ikoner og utforske et par teknikker for å lage glatte, enkle animasjoner.
1. Tegn Konvolutt
Trinn 1
Opprett et nytt dokument i Adobe Illustrator. Jeg skal bruke Adobe Illustrator CC, men kan du enkelt tilpasse disse teknikkene og design til tidligere versjoner.
Med rektangel Tool (M), tegne en lyseblå rektangel. Velg de to nederste festepunktene med Direct Selection Tool (A), og trekk live Corners innover til avrunder de to hjørnene. Bruk Pen Tool (P) for å tegne et strøk linje i medium blå som definerer åpningen av konvolutten.
Trinn 2
Tegn to linjer enten med Pen Tool eller Line Segment Tool (/) som møtes nær sentrum av konvolutten. Utvid dine slag under Object, og bruke Shape Builder Tool (Shift-M) for å velge ikke-kryssende deler av linjene fra rektangel for å slette dem. Dette er vår grunnleggende konvolutt objekt.
Trinn 3
Kopier (Ctrl-C) og lim (Ctrl + V) konvolutten design. Tegn en trekant fra øverste hjørne til hjørne for åpningen av konvolutten. Velg trekanten mens du holder nede Alt, og dra ut en kopi av trekanten. Rotere (R) er det rundt for å skape åpningen av konvolutten, og sette fyllfarge til en mørkere blå. For å få til denne demonstrasjonen mine linjer mangler fra design under, men vil bli brukt i den endelige versjonen
Trinn 4
Nå bør du ha to konvolutter. Én åpen og én lukket . Vårt mål er å skape flere gjentakelser av konvolutter som bro over gapet mellom den lukkede konvolutten og den åpne konvolutten for vår endelige animasjon. Group (Ctrl-G) sammen hver konvolutt maskinens komponenter.
2. Lag Ulike former av konvolutten
Trinn 1
Duplicate den åpne konvolutten. Bruk Direct Selection Tool til å ta tak i toppen trekant topp forankringspunkt og dra det nedover til den nesten helt dekker den mørke trekanten. Kopiere denne konvolutten gruppen og trekker lettere trekanten nedre punkt oppover litt så konvolutten ser ut som det er åpning mer. Vi vil fortsette å duplisere hver konvolutt og flytte trekanten oppover før det er tilbake til utgangspunktet igjen.
Trinn 2
Til slutt, inkludert de lukkede og åpne konvolutter, jeg har ni konvolutter for min animert ikon. Du kan sjekke ut plassering av trekanter og deres ankerpunktene nedenfor. Sørg for at hver konvolutt er gruppert separat slik at de vil være lett å importere til Adobe Photoshop senere.
3. Opprett Letter
Trinn 1
Tegn en lysegul rektangel og Kopier og lim det over hver konvolutt. Målet er å ha rektangelet bevege seg oppover i enda trinn som det er åpning. Jeg bestemte meg for å gå med sju rektangler totalt for min design.
Trinn 2
Velg den første konvolutten og dens overlapp rektangel. Bruke Shape Builder Tool, velge den delen av den gule rektangel som krysser med innsiden av konvolutten. Slett ikke-kryssende del av den gule rektangelet slik at du bare igjen med en liten trekant av den gule rektangelet. Gjenta denne teknikken på de andre konvolutter.
Trinn 3
Fortsett å definere den gule brev formen for hver konvolutt. Du kan se hva mine brev se ut med sine tilhørende konvolutt under.
Trinn 4
Tegn flere tynne rektangler for å simulere linjer skrevet på brevet. Rett og distribuere rektanglene i Align panel. Deretter forene dem i Pathfinder-panelet.
Trinn 5
Plasser flere sett med rektangler enn hver konvolutt. Legg merke til hvordan noen bokstaver vise flere linjer enn andre. Jeg har plassert sett med rektangler på seks av mine ni konvolutter.
Trinn 6
Velg brevet form og rektangler. Bruke Shape Builder Tool, velger ikke-kryssende del av hver rektangel og slette dem. Gjenta steg dette til alle dine konvolutter.
Trinn 7
konsernet sammen hver konvolutt og dets komponenter, slik at du har ni separate grupper totalt. Nå er vi klare til å animere vår design!
4. Animere Konvolutt
Trinn 1
Åpne Adobe Photoshop og lage et nytt dokument. Siden vi skaper en enkel web-grafikk, har jeg satt min dokumentstørrelse på 72 dpi plakater (ingen grunn for en høyere oppløsning siden vi ikke skriver ut vår kunstverk), 250 px bredde, og 300 px høyde. Du kan lage en større eller mindre fil hvis du ønsker, og også beskjære dokumentet når du trenger å gjøre det.
I Adobe Illustrator, Kopier hver konvolutt gruppe og lim dem inn i Adobe Photoshop-dokument. Hvis du ønsker å endre størrelsen på bildet uten tap av kvalitet, lim hver gruppe inn som et smart objekt. Hvis du er fornøyd med størrelsen, lime dem inn i et nytt lag som piksler.
Trinn 2
Sørg for hvert objekt er lagdelt sekvensielt. I tillegg vil du ønsker å velge alle ni lagene og justere dem til sine sentre og nedre kant.
Trinn 3
Åpne tidslinjepanelet og lage en ny Frame Animation. Starter med lukket konvolutt laget (skjule de andre), skape en ny ramme og sette rammen forsinkelse til 0,1 sekund. For hver ramme, unhide neste lag og skjule det forrige laget før konvolutten er åpen. Deretter stiller forsinkelse på 0,2-0,5 sekunder.
Gjenta unhiding og skjule lag, men denne gangen går i motsatt rekkefølge slik konvolutten avsluttes igjen. Sørg for at det er loopet "Forever", slik animasjonen holder åpning og lukking.
Trinn 4
Len deg tilbake og trykke play på Tidslinje panelet for å se din gif loop. Du kan justere ramme forsinkelser for en langsommere eller raskere gif samt endre hvor lenge lukket eller åpen konvolutt er sett i tidslinjepanelet. La oss gå videre til de andre ikoner og flere teknikker for å animere.
5. Tegn en Chat Icon
Trinn 1
Tilbake i Adobe Illustrator, enten i et nytt dokument eller på et nytt lag, tegne en sirkel ved hjelp av Ellipse Tool (L). Deretter overlappe sirkelen med en liten trekant og forene de to figurene sammen: Dette er din grunnleggende chat boble. Tegn tre sirkler for ellipser som skal brukes i animasjonen senere
Trinn 2
Kopier. Og lim chat boble og reflektere over det en vertikal akse. Endre andre boble farge til en mørkere nyanse. Skalere ellipser ned slik at de passer inn i chat boble. Neste vi vil legge til litt tekst.
Trinn 3
Tegn eller skriv ut enkle ord som "hei" og "hei", enten ved hjelp av en håndskrevet stil font du liker eller tegning hver bokstav med Paintbrush Tool (B) ved hjelp av en standard kalligrafiske børste. Sørg for at enhver tekst eller slag er omgjort til objekter, og at hver bokstav er et eget objekt.
Trinn 4
Skriv eller tegne enkle tekst emoticons innenfor chat bobler. Alternativt kan du tegne emojis stedet. Det er din chat-ikonet og den generelle stilen er opp til deg. I alt er det 14 separate komponenter nedenfor: tre ellipser, fem bokstaver, to chat bobler, og fire gjenstander skaper emoticons. Hver og en skal kopieres og limes inn i et nytt dokument i Adobe Photoshop som et eget lag.
6. Animere Chat Icon
Trinn 1
I Adobe Photoshop, Lim hver av de 14 ikon komponentene i dokumentet som et nytt lag. Gruppe sammen som gjenstander som jeg har gjort under i Lag-panelet: komponentene for hvert ord, fjesing, ellipser og chat bobler. Dette holder dokumentet organisert og gjør animere din GIF enklere overall.
Trinn 2
For å begynne, jeg vil ha min første chat boble som kommer inn fra venstre side. Jeg har gjemt alle komponentene med unntak av den første chat boble og plassert den utenfor mitt dokument ramme for første Tidslinje rammen. Innen syv rammer, har jeg flyttet min chat boble til midten av dokumentet fra venstre side. Du kan flytte og endre et lag for hver ny ramme uten å påvirke ramme før det.
Når chat boblen er i sikte, begynner jeg på "skrive" effekt. Hver ellipse er synlig en om gangen i den første chat boblen, etterfulgt av den første meldingen "hi". Så jeg begynner å skyve andre chat boble inn i rammen, mens den første chat-melding (gruppert sammen i Lag-panelet som "hei") er redusert i opacity (med 20% hver ramme) i lagpanelet.
< h3> Trinn 3
Her er en titt på min Tidslinje panel for hele GIF. Jeg har over 30 bilder totalt og de fleste av dem har en 0,1 sekunders forsinkelse. Noen komponenter, som ellipser, gå "prikk, prikk, prikk" på en 0,3 sekunders forsinkelse, mens falming av ord eller skrive bokstaver og emoticons er raskere når det er mulig. Du kan justere dine foretrukne forsinkelser som det passer deg. Du vil ha å skrive for å være glatt og lesbar uten å være for treg og hakkete
Trinn 4
Du kan sjekke ut mitt endelige animasjonen nedenfor. Den første chat boble går inn og begynner å skrive, den andre boble reagerer, og både sende uttrykksikoner og deretter gå tilbake ut av rammen. Vi må gjøre en siste animert ikon som kombinerer ideer og teknikker brukt tidligere.
7. Tegn Kamera
Trinn 1
I Adobe Illustrator, tegne et rektangel. Velg de to øverste festepunktene med Direct Selection Tool, og trekk live Corners innover. Tegn en andre, mørkere rektangel under den første, og avrunder sine nederste hjørnene. Legg merke til at det andre rektangelet er mindre enn den første, men begge deler målingen samme bredde.
Trinn 2
I mørk grå, tegne en tynn rektangel for instant film åpningen på nedre halvdel av kameraet. Tegn avrundede rektangler og en sirkel for kameralinsen, i søkeren, og flere design på forsiden av kameraet.
Trinn 3
Legg en rød sirkel og en mørk, varm grå sirkel for kameraets knapp . For linsen, stable og grå blå sirkler på toppen av hverandre, alternerende mellom mørke og lys. Bruk Direct Selection Tool for å skyve toppankerpunktet av den indre sirkel nedover slik at objektivet ser skinnende (se utformingen nedenfor).
8. Lag Kamera Animasjon Komponenter
Trinn 1
For lukker animasjon jeg ønsket en enkel åpne og lukke animasjon. Du kan selvfølgelig lage mer komplekse former hvis du vil. For min skodde trakk jeg en mørk grå sirkel. Kopier og lim sirkelen og kutt den i to (lapper den horisontale midten av sirkelen med et linjestykke, og deretter Divide
de to figurene i Pathfinder-panelet).
Kopier og lim de to sirkel halvdeler. Flytt hver halvdel unna sentrum og bruke Direct Selection Tool til å flytte de to nederste festepunkter til squish opp hver sirkel halvparten litt. Gjenta for seks totalt gjentakelser som bringer lukkeren fra lukket til åpen. Alle seks av disse gruppene vil bli kopiert og limt inn i Photoshop dokumentet under animasjonen scenen.
Trinn 2
Nå kan vi jobbe med instant film. Hovedsak du tegner en serie av rektangler som får større og større. Begynn med en tynn, lett grå rektangel i sentrum av den nedre halvdel av kameraikonet. Etter et par rektangler, vil du legge til en mørk grå rektangelet på lys-grå. Legg merke til hvordan de både blir lengre og lengre når du går
Trinn 3
Her er en siste titt på alle de kamera komponenter:. Kameraet, de seks lukker former, og de åtte (inkludert Den ene på kamera) film former. Totalt vil jeg være å kopiere og lime inn 15 komponenter i Photoshop-dokumentet i neste avsnitt. La oss animere dette kameraet!
9. Animere kamera
Trinn 1
Som med ikonene før, Kopier og lim hver komponent i Photoshop-dokumentet. Jeg fant det lettest for hvert ikon for å ha et eget dokument i Photoshop slik at jeg ble konsentrere seg om en animasjon om gangen.
konsernet sammen skodde lag og filmlagene i Lag-panelet over kameraet lag. Jeg startet med lukker animasjon. Lukke og åpne lukkeren så objektivet ser ut som om det er blinkende
Trinn 2
Deretter vil du ønsker å animere filmen går inn og ut av filmen slot (alternativt kan det falle ut av kameraet, som det egentlig ville). Nok en gang vil du gå gjennom hver film komponent, den ene etter den andre, og deretter opprette en ramme for hver i revers.
Trinn 3
Til slutt, en rask kommentar på lagre GIF-filer . Gå til Fil > Export > Lagre for Web (Legacy) (Alt-Shift-Ctrl-S) og velg GIF fra rullegardinmenyen. Begrens GIF til 32 farger eller mindre, hvis det er mulig. Du kan forhåndsvise animasjonen, endre størrelse filen, og bestemme på filens kvalitet før du trykker på Lagre.
Trinn 4
Her er en titt på min siste kameraikonet i aksjon!
Great Job, er du ferdig!
Enten du oppretter en gif med hver ramme trukket i Adobe Illustrator, manipulere komponenter mens i GIF skapelse scenen, eller en blanding av begge teknikker, animere vektorgrafikk er enkelt og morsomt. Del dine kreasjoner i kommentarfeltet nedenfor, eller skyve disse ideene til sine grenser og skape et helt sett av animerte ikoner eller scener klar for webpublisering og mer!