Rask tips Opprette enkle ikoner med Adobe Illustrator, en nybegynners guide

For nybegynnere kan skarpe ikoner være vanskelig å lage i Adobe Illustrator. Med noen få enkle triks, Utseendepanelet og Form Builder Tool, vil du lage profesjonelle utseende ikoner på kort tid, det er enkelt!


Trinn 1

Først opprett et nytt dokument i skalaen på ikonet ditt, er vanlige størrelser 96px, 48px, 32px, 24px og 16px. For denne opplæringen skal jeg lage et 48 x 48 px-ikon. Angi fargemodus til RGB, Raster Effects til 72ppi og enhetene til piksler.


Steg 2

Vi vil nå sette rutenettet til piksler, noe som gjør det enklere å planlegge designet. Gå til Innstillinger> Guider og Grids, og sett gridlinjen til 10px med 10 underoppdelinger, og gå til Vis> Vis grid og vis> Snap to Grid.


Trinn 3

Med alle mine ikoner (bortsett fra de grunnleggende) liker jeg å lage en rask miniatyrskisse som en base for designet mitt. Du kan tegne med penn og papir, eller du kan skisse inn i Illustrator eller Photoshop. Jeg laget min skisse i Photoshop og kopierte og limte den på kunsttavlen i Illustrator.

Når skissen er på tavlen, kan jeg skala den, plassere den og deretter redusere opaciteten til 50%. Hvis du bruker en skisse, reduser du opaciteten til 50% (eller mer hvis skissen er litt for mørk), og lås laget og lag et nytt lag under skisse laget, dette vil være ditt kunstlag.


Trinn 4

Med en hvilken som helst kompleks form kan du bryte den ned i grunnleggende former. For dette designet har jeg sporet hodet ved hjelp av Ellipse Tool (L) og flyttet og roterte formene til posisjon med valgverktøyet (V).

Når de grunnleggende figurene er i omtrentlig posisjon, ta Form Builder Tool (Shift + M) og slå sammen dem ved å dra markøren over figurene.


Trinn 5

Hvis du trenger å lage subtile kurver, ta pennverktøyet (P) og tegne i grunnformen. Gjør et punkt midt på hver kurve, dette er hvor linjene vil bli jevnet.

For å lage glatte kurver fra punkter, ta Konverter ankerpunktsverktøyet (Shift + C) og dra punktet mens du holder nede Skift-nøkkelen.

For å gjøre symmetrien lettere, bruk Reflekteringsverktøyet (O). For å reflektere en form, velg den først med valgverktøyet (V), velg deretter Reflekteringsverktøyet (O) og Alternativet + Klikk på tavla hvor formen reflekterer. Du bør nå se en innstillingsboks.

Sett aksen slik du vil reflektere formen (bildet mitt reflekteres vertikalt) og klikk Kopier. Du vil nå få en reflektert kopi av formen din.

Kombiner figurene med Form Builder Tool (Shift + M) og slett alle punkter med Convert Anchor Point Tool (Shift + C).


Trinn 6

Her er den morsomme delen. Det er et triks du kan bruke til å forhåndsvise ditt ikon mens du jobber. Gå først til Vindu> Nytt vindu. Dette vil skape en kopi av dokumentet du jobber med.

Når du har gjort det nye vinduet, skjul rutenettet. I menyen "Vis", sett vinduet til Faktisk størrelse, Skjul kunstbrett og velg Pikseleksempel. Nå får du en nesten perfekt forhåndsvisning av ditt ferdige ikon.

Det beste med å jobbe med det andre vinduet er at alt du endrer i det første vinduet, vil også endre seg i det andre vinduet.


Trinn 7

For å lage en knapp bak ikonet, velg det avrundede rektangelverktøyet og alternativet + klikk på tavlen, dette vil gi opp en innstillingsmeny. Sett bredden og høyden til noen få piksler mindre enn den endelige ikonstørrelsen din, dette gir deg plass til å legge til eventuelle dråpeskygger eller effekter senere. Hjørneradiusen vil variere avhengig av størrelsen på ikonet du lager, jeg har valgt å bruke 6px fordi ikonet mitt er ganske lite.

Når du har opprettet det avrundede rektangel, velger du det og flytter det bak ikondesignet ved å trykke på Kommando + den venstre firkantbrakettnøkkelen.


Trinn 8

For å lage en myk gradient for det avrundede rektangel fyller du på formen ved hjelp av Gradient Tool (G) og endrer bunnprøven i gradienten for å være en midgrå, endrer toppprøven til et veldig lysegrå og deretter like under toppprøven , klikk på gradienten for å legge til en tredje fargeprøve. Endre den tredje fargeprøven for å være en litt mørkere nyanse av det andre grå

Hvis du vil legge til en oversikt, går du til Utseendepanelet (Vindu> Utseende) og med det avrundede rektangelet som er valgt, klikker du på strekkalternativet, angi fargen som en midgrå (litt mørkere enn den mørkeste nyansen) og sett vekten til 1px.


Trinn 9

Nå vil vi legge til en gradientoversikt til ikonformen og lagre knappen og ikonstilene for fremtidige design. For det første er den enkleste måten å lage en gradient disposisjon på en form, å opprette en forskyvningsbane. For å gjøre dette, velg formen, og deretter i Utseendepanelet (Vindu> Utseende) legg til en ny fyll over den første fyllingen. Gjør dette til en litt mørkere versjon av din første gradient.

Som du kan se i eksemplet nedenfor, har jeg brukt en mørk radialgradient for innsiden av formen (toppgradient) og en lettere versjon for omrisset (nederste gradient). Begge fyllingene kan endres ved å velge fyll inn Utseendepanelet og endre innstillingene med Gradient Panel (Vindu> Gradient) og Gradient Tool (G).

Velg toppgradienten i Utseendepanelet og gå til fx knappen nederst på panelet. Naviger til Path> Offset Path og sett Offset til -1px med Round Joins og klikk OK.

Hvis du vil lagre et utseende som en fargeprøve, går du til Utseendepanelet og drar ikonet øverst på panelet i panelet Grafisk stil (Vindu> Grafiske stiler).


Konklusjon

Du vil nå ha to grafiske stiler som kan brukes på mange forskjellige former og knapper for å lage et raskt sett med grunnleggende ikoner. Se hva du kan komme med, og vær så snill å dele arbeidet ditt på Vectortuts + Facebook-siden.

Hvis du likte denne opplæringen, kan du kanskje "Hvordan lage en gjenbrukbar ikonstil med utseendepanelet".