Hvordan lage en girkasse Innstillinger symbol Bruke Enkelt Shapes

How å lage en girkasse Innstillinger symbol Bruke enkle former
Dette innlegget er en del av en serie som heter Icon Design.How å illustrere et Brain ikon for OSX og Vista10 Tips for Effektiv Icon Design

Mye kan gjøres i Illustrator uten å være avhengig pennverktøyet, som demonstrert av den siste timeglass opplæringen. Utnytte bare enkle, forhåndsdefinerte figurer, samt verktøy som Pathfinder og transformasjoner, kan hele illustrasjoner lages fra bunnen av. I denne opplæringen, vil vi lage et ikon som passer for portretterer alternativer, innstillinger, preferanser, etc., i likhet med OS X systeminnstillinger ikonet. Så la oss komme i gang!


Vil tilgang til de fulle Vector kildefiler og nedlastbare kopier av hver tutorial, inkludert denne? Bli med Vector Plus for bare 9 $ i måneden.

Trinn 1

Begynn med å lage et nytt dokument i alle størrelser du ønsker, har jeg brukt 600px 400 piksler, som det er størrelsen brukes for opplæringen bildene.

Vi begynner med å tegne gear. Først tegne en sirkel og sentrer den i forhold til artboard (ved å gjøre dette kan vi lett justere alle figurene vi trenger for å tegne). Deretter trekke tre flere sirkler som får gradvis mindre mot midten (og sentrere dem i artboard). Også, legg en lys grå fill til sirklene, som vil gjøre det lettere å arbeide med Pathfinder pallen når vi klippe ut biter av sirklene.

Trinn 2

Deretter velger den største og nest største sirkler, deretter åpne Pathfinder paletten og klikk på Minus Front-knappen for å trekke mindre sirkel fra større.

Nå velger de andre to mindre sirkler, og gjøre det samme.

Trinn 3

Neste, tegne et rektangel, senter den vertikalt i artboard, og legg den over den øverste halvdelen av sirklene.

Velg den og klikk på Roter-verktøyet i verktøykassen . Hold nede Alt og klikk selve sentrum av sirklene for å plassere den lyseblå opprinnelse poeng der, og en dialogboks vises. Vi kan nå rotere på rektangelet i forhold til midten av sirklene. Siden vi ønsker seks av disse eiker
på gear, angi 60 for vinkelen i grader (360/6 = 60).

Klikk deretter kopiere å lage en kopi av rektangelet rotert .

Til slutt, med det nye rektangelet er markert, trykker Command + D for å gjenta transformasjon tre flere ganger, helt til du har fem jevnt fordelt rektangler.

Trinn 4

Velg alle fasonger, så i Pathfinder paletten klikker du på Unite-knappen for å sette dem sammen til en enkelt form

Til slutt velger den nye figuren og rotere det 30 grader ved å velge Objekt >.; Transform > Rotere fra menyen

Trinn 5

Nå har vi grunnlaget for vårt utstyr, men det mangler den kritiske egenskap som gjør et gir et gear -. Tennene! Så, tegne en liten firkant som vist nedenfor

Velg rektangelet, og deretter gå til Effect >.; Warp > . Arc ... skriv -6 for Bend, og la horisontale og vertikale Distortion på 0, og klikk OK

Deretter velger Effect > Stilisere > Avrundede hjørner ..., skriv 6 for Radius i piksler, og klikk OK.

Trinn 6

Nå som vi har fått vår tann, senter det vertikalt i artboard og sted . det over utstyr slik at ytterkanten av utstyret oppfyller akkurat der de nederste hjørnene av tannen begynner å kurve

Velg deretter tann og velg Objekt > Utvid Utseende å spore opp de effektene vi har lagt inn i en bane.

Trinn 7

Vi trenger nå å rotere tann rundt resten av utstyret, og vi vil gjøre det på samme måte Vi gjorde tidligere med spilene. Start ved å velge tann og deretter Roter Tool fra verktøylinjen. Deretter Alt-klikk sentrum av utstyret. Siden vi ønsker 18 tenner, angi en verdi på 20 for vinkelen i grader (360/18 = 20).

Og klikk kopi til rotere en kopi av tannen.

Med andre tann fortsatt er valgt, trykker du Kommando + D 16 flere ganger, for totalt 18 tenner.

Og til slutt, velge alle fasonger og igjen klikk Unite i Pathfinder paletten til å flette alt inn i én form.

Trinn 8

På dette punktet kan vi fjerne strøk fra giret og fylle den med en litt mørkere nyanse av grått (jeg brukte # C6C8CA).

Velg utstyr og kopiere den (Kommando + C) og lim den direkte bak den opprinnelige (Command + B). Deretter fylle den med en mørk grå og dytte den ned noen få piksler.

Og gjøre det samme igjen (kopiere den opprinnelige utstyret og lime den inn bak), men denne gangen fyll den med hvit og dytte det opp et antall piksler (du kan ikke se det med mindre du endrer bakgrunnsfarge).

Nå vi kan gruppere alle tre figurer sammen, men før vi gjør, lage en kopi av den øverste, lys grå utstyr og flytte den ut til siden - vi trenger den senere

Trinn 9

Tegn en sirkel litt større enn den minste åpning i midten av gear, og legge et tynt strøk til. det (nok til å overlappe begge sider av den indre kanten av åpningen - Jeg brukte 15px)

Velg Objekt >. Sti > Outline Stroke å spore opp slaget.

Fyll ny form med en mørk til lys grå gradient (fra øverst til nederst).

Og velg endelig form og send den til baksiden ( Command + Venstre Bracket-tasten, eller høyreklikk og velg Ordne >. lengst bak)

Trinn 10

Nå gjentar den samme prosessen som i det siste trinnet, men overlapper den nest største sirkulær kant som vist nedenfor. Fyll denne sirkelen med en mørk til lys grå radial gradient, går fra mørk i sentrum for å tenne mot kantene.

Trinn 11

Nå velger denne formen, kopiere den (Kommando + C ) og lim den direkte i front (Command + F). Nå endre sin gradient fra radial til lineær.

Så, endre blending mode (i Transparency paletten) for å overlappe og senke Opacity til 50%.

Og til slutt, velger du både av ring former og sende dem til svært tilbake (Command + Venstre Bracket nøkkel).

Trinn 12

Vi har nesten ferdig giret. Det siste trinnet er å legge til litt av en metallisk tekstur til det. Alright, så vi slipper å bruke Pen Tool, men dette er den eneste gangen, og det er lett - løftet. :)

Tegn noen merkelig formede trekanter (noen forvrengning er bra, ønsker vi ikke dem perfekt likesidet), og har sine punkter all konvergerende i sentrum. Nå fylle dem med ulike nyanser av grått.

Velg alle former og gruppere dem (Command + G). Deretter velger Effect > Blur > Radial Blur ...

Tast 50 for beløpet, og angi metode for å spinne

Merk Bilde:. Radial blur effekten er ganske prosessor-intensiv, så hvis du jobber på en tregere datamaskin, kan du angi kvaliteten til Utkast til nå. Dette vil i stor fart opp gjengivelse av effekten, og du kan enkelt gå tilbake og endre den til God eller Best før du lagrer det endelige produktet som grafisk eller skrive den ut.

Trinn 13

Har fortsatt at kopi av det opprinnelige utstyret formen vi gjort veien tilbake for en stund siden? Bra, fordi nå er det på tide å bruke det (og bare i tilfelle, i din uendelige visdom, besluttet ikke å følge mitt råd å lage en kopi, kan du bare lage en kopi av det nå. Når du har fått den form, flytte den over toppen av metall tekstur, og sentrere dem med hverandre

Velg begge stedene, og velg deretter Object >. Clipping Mask > Merke (Command + 7)

. Og til slutt, sentrere form horisontalt og vertikalt i artboard, og gruppen alle figurene sammen som komponerer gear. Og vi er ferdig med det!

Trinn 14

Nå er det tid å lage boksen som skal inneholde våre tannhjul (og danne grenser og formen på vår ikon). Begynn være å skape et rektangel som dekker ca 2/3 av gear. Fyll den med en lett til middels grå gradient.
< p> Deretter velger Effect > Stylize >. runde hjørner ..., skriver 20px for radius, og klikk OK

Så velger du Objekt > Utvid Utseende å konvertere de avrundede hjørnene inn i en bane.

Step 15

Fortsett ved å tegne et mindre rektangel over det første. Dette vil utpeke vår vindu
der får vi se girene. Sentrere den med det første rektangelet.

Velg begge rektangler ...

... og klikk Minus Front knappen i Pathfinder paletten til å kutte mindre rektangel ut av den større.

Step 16

Vi vil nå gjenta prosessen igjen at vi gjorde tidligere med utstyret, for å skape den innvendige skråkanten rundt vinduet. Start med å tegne et rektangel litt større enn vindusåpningen.

endre det slag til noe ganske tykk, nok til å overlappe vinduskanten (jeg brukte 20px).

Send den til baksiden (Command + Venstre Bracket nøkkel)

Velg Objekt >.; Sti > Outline Stroke å spore opp stien inn i en form.

Og fyll den med en svart til hvit gradient (øverst til nederst).

Trinn 17

Vi vil gjenta samme prosess en siste gang for å skape skråkant rundt ytterkanten. Tegne litt mindre rektangel og endre den til en tykk strek.

Men denne gangen før vi skissere det, vil vi runde hjørnene for å matche boksen.

Nå skissere hjerneslag og send den til baksiden.

Og til slutt, fyll den med en grå til hvit gradient (bunn til topp denne gangen).

Trinn 18

Nå må vi legge til perforert metall backing til boksen. Start med å tegne et rektangel litt større enn vindusåpningen, og fyll den med en mørk grå.

Hvis du vil legge de perforerte hullene, tegne to små sirkler, ett mindre enn den andre, og plassere dem i topp- venstre hjørne av rektangelet. Fyll mindre en i front med svart og større en bak med en mørk grå til hvit gradient (øverst til nederst)

Gruppe de to sirklene sammen og velge Object >.; Transform > Flytt ... Oppgi 40px for horisontal og 0px for vertikal, og klikk på Kopier.

Nå med det andre hullet fortsatt er valgt, trykker du Kommando + D for å gjenta transformasjon. Terpe før du har en rad omtrent samme bredde som rektangelet. Deretter gruppe raden av hull sammen

Trinn 19

Velg raden og gå til Objekt >.; Transform > Flytt ... igjen. Denne gangen, skriv 0px for horisontal og -40px for vertikal og klikk på Kopier.

Nå trykker Command + D igjen for å gjenta transformasjon. Når du har fylt rektangel, velge alle radene, og gruppere dem inn i en enkelt objekt

Trinn 20

Velg de grupperte hull og igjen, og velg Objekt >.; Transform > Flytt ... og denne gangen angi 20px for horisontal og -20px for vertikal.

Klikk på Kopier, og velg deretter alle hullene og gruppere dem en gang til.

Og til slutt, velg de grupperte hull og rektangel og sentrere dem i forhold til hverandre.

Trinn 21

For å fullføre boksen, gruppe hullene og rektangel og flytte dem bak rammen vi opprettet tidligere.

Velg den innvendige skråkanten form av rammen, og legge en skygge til det.

Deretter legger en skygge til den ytre koniske formen også.

Trinn 22

Nå som vi har fått de viktigste komponentene gjort, alt som er igjen å gjøre er å montere dem!

Start med å lage to kopier av utstyr (sørg for å gruppere alle figurene først) og plassere dem i de nederste hjørnene av den viktigste.

Legg til en skygge til hver av tannhjul, og deretter gruppen alle tre. Du kan også endre rekkefølgen på dem slik du ønsker (jeg flytte to foran tannhjul litt lenger opp, slik at de vil være mer synlig gjennom vinduet).

Nå tegne et rektangel med samme størrelse som den vindusåpningen (eller det kan være litt større, bare ikke mindre), og legg den over girene. Du kan plassere den slik du ønsker, så hva er dekket av rektangelet er alt som skal vises gjennom i det endelige bildet.

Når du har plassert den hvor du vil, velge både verkgruppe og rektangelet, og velg deretter Object > Klipping Mask > Gjør.

Trinn 23

Dra girene inn i boksen og sentrere boksen og tannhjul med hverandre. Deretter sender girene til baksiden og bringe dem frem til de er direkte over den perforerte backing, men bak rammen.

Og til slutt, er det siste trinnet for å legge til refleksjon for å simulere et glass vinduet over åpningen. Lag et rektangel bredden på åpningen og ca 1/2 av høyden.

Deretter tegner en stor ellipse over rektangelet. Vi er bare veldig interessert i buen det skaper over bunnen av rektangelet, så sørg for at den dekker resten.

Velg både ellipse og rektangel, og velg deretter Snitt i Pathfinder paletten. Deretter slette de overflødige former.

Trinn 24

Nå legger et gjennomsiktig gradient til formen (fra topp til bunn, med toppen å være mer ugjennomsiktig og bunnen blir mer transparent). Dette kan gjøres i Illustrator CS4 med de gjennomsiktige graderinger, eller i tidligere versjoner med en tetthet maske.

For Illustrator CS4

I gradient paletten, legge to hvite farge stopper, en på hver slutt. Still modus til Linear og vinkelen til -90 grader. Deretter stiller gjennomsiktigheten til venstre stopp til 100% og retten stopp til 50%.

Deretter stiller generelle åpenhet i form til 50% (i Transparency paletten). I tillegg sender formen bakover til den er over girene og backing, men bak den ytre rammen (slik at skyggen er synlig over det).

For Illustrator CS3 og tidligere

Fyll objektet med heldekkende hvit, og deretter kopiere den (Kommando + C) og lim kopien foran (Command + F).

Legg til en lineær gradient til det, med en -90 graders vinkel. Dra en farge stopp i hver ende, og gjøre det igjen en hvit og den rette 50% grå.

Deretter velger både refleksjon former og klikk den lille menyen ikonet i øvre høyre hjørne av Transparency palett. I menyen som dukker opp, velger Lag Opacity Mask.

Og til slutt, senke den generelle åpenhet i form til 60%. I tillegg sender formen bakover til den er over girene og backing, men bak den ytre rammen (slik at skyggen er synlig over det).

Konklusjon

Vi er ferdig! Forhåpentligvis denne opplæringen har vist noe av kraften i enkle former, transformasjoner, og verktøy som Pathfinder, og hvordan de kan brukes til å produsere kvalitet illustrasjoner og grafikk. Lykke til med ditt eget arbeid!

Abonner på Vectortuts + RSS-feed for å holde deg oppdatert med de nyeste vektor tutorials og artikler.