Create a Steel, Vector-knapp Sett

I det følgende opplæringen vil du lære hvordan du oppretter en stål vektor strømknappen satt i Adobe Illustrator. En strømknappen symbolet kan brukes på et grensesnitt design eller som en positiv digital metafor i designarbeidet. La oss få til å fungere ved hjelp av en rekke form byggeteknikker, kombinert med Illustrator effekter, og lære å legge nyansert belysning for å gjøre blanke knapper med stålplater. Det er på tide å slå på din egen vektor-knappen ikon.

Trinn 1

Opprett en 700 av 500px, RGB-dokument. Først slår på Grid (View > Grid) og Fest til rutenett (View > Fest til rutenett). Deretter trenger du et rutenett hver 10px. Gå til Rediger > Preferanser > Guides > Grid, skriv 10 i linjenettet hver boks og en i underinndelinger boksen

Du kan også åpne infopanelet (Vindu > Info). For en live forhåndsvisning med størrelsen og plasseringen av figurer. Ikke glem å bytte måleenhet for å piksler fra Rediger > Preferanser > Enhet > General. Alle disse alternativene vil øke arbeidshastigheten.

Trinn 2

Start med Ellipse Tool (L). Lag en 90px sirkel, fyll den med ingen, men legger til en 16 pkt slag. Fargen er ikke viktig. Sørg for at din krets er valgt og gå til Object > Sti > Legg ankerpunkter. Dette vil legge til fire nye ankerpunkter for din vei. Bytt til Direct Selection Tool (A), velger du den øverste forankringspunkt og trykk på knappen Slett fra tastaturet. Selvfølgelig vil dette fjerne det ankerpunktet.

Nå må du legge til en viss rundhet for sluttpunktene i de resterende bane. Velg din vei, gå til Strek-panelet (Vindu > Stroke) og klikk på Round Cap-knappen fra Cap delen. Til slutt veien skulle gjerne tredje bildet som vises nedenfor.

Trinn 3

For neste trinn må du et rutenett hver 1px. Gå til Rediger > Preferanser > Generelt og skriv en i Tastatur verdiboksen. Plukk rektangel Tool (M), opprette en 16 med 40 px form og legg den som vist i følgende bilde. Fyll den med samme farge som brukes i forrige trinn, og deretter gå til Effect > Stylize > Avrundede hjørner. Skriv en 8px radius og klikk på OK

Trinn 4

Velg de to figurer laget så langt, gå til Symboler panel. (Vindu > symboler) og klikk på New Symbol-knappen. Det er den lille filen ikonet fra bunnlinjen.

Symbol Alternativer-vinduet skal åpnes. Skriv inn " strøm symbol " i Navn-delen, plukke filmklipp fra rullegardinmenyen, og klikk OK. Ta en ny titt på din symboler panel og du vil finne din frisk symbol. Gå til Layers-panelet og fjerne den eksisterende symbol

Trinn 5

Gå tilbake til ". Linjenettet hver 10px ". Så, gå til Rediger > Preferanser > Generelt og skriv 10 i Tastatur verdiboksen. Plukk Ellipse Tool (L), opprette en 250px sirkel og fyll den med R = 241, G = 242, B = 242. Lag en kopi av denne sirkelen (Command + C > Command + F) og flytte den til høyre, som vist i følgende bilde

Trinn 6

Velg den venstre sirkelen og gå. til Effect > 3D > Extrude & Bevel. Klikk på knappen Flere innstillinger deretter inn alle data som er vist nedenfor. Ikke glem å sjekke " Tegn Hidden Faces " boksen fra bunnen av vinduet.

Fortsett og klikk på Kart Art knappen. Gå til " Surface en " og velg " strøm symbol " fra symbolrullegardinmenyen. Roter den som vist i følgende bilde og klikk på OK.

Velg riktig sirkelen og trykk Shift + Kommando + E. Dette vil legge til samme 3D-effekt. Du trenger bare å gjøre en liten justering. Sørg for at denne retten sirkelen er fortsatt valgt og gå til Utseende panel. Åpne eksisterende 3D Extrude & Bevel effekt og redusere Extrude Dybde til 50pt.

Nå figurer skal se ut som bildet nedenfor. Den venstre formen vil være sluppet knappen, mens riktig form blir skjøvet knappen.

Trinn 7

Nå skal vi fokusere på sluppet knappen. Velg den og gå til Object > Utvid Utseende. Dette vil utvide 3D-effekt skape en gruppe med en haug med undergrupper, former og klipping stier.

Gå til Lag-panelet og utvide denne gruppen. Her er hvordan du enkelt kan gjøre det. Hold Alt-tasten og klikk på den lille pilen ikonet fra venstre av gruppen. Nå som du kan se alt innholdet i gruppen din, la oss gjøre noen endringer.

Først slette alle beskjæringsbaner. Deretter slette gruppe figurer som er valgt i det andre bildet. Velg de to formene som utgjør makt symbol og gå til Object > Forbindelse Sti > Lage. Dette vil gjøre dem til en enkelt form, en sammensatt bane.

Velg gruppe figurer fra bilde # 4 og klikk på Unite knappen fra Pathfinder-panelet. Sørg for at den resulterende formen er fylt med R = 128, G = 130, B = 133. Velg det viktigste gruppen og trykke Command + Shift + G flere ganger for å kvitte seg med alle grupper og undergrupper.

Nå, la oss gjøre en rask oppsummering. Du bør ha en lys grå sirkel, en andre sirkel skjult i ryggen (du må ha denne formen senere), kraften symbol og den mørke, grå form nederst.

La oss fokusere på en andre på den skjulte sirkel. Det er en viktig del av den endelige illustrasjonen så la oss gjøre det merkbar. Gå til Lag-panelet Dobbeltklikk på denne veien og gi den navnet " Black ". Også, for å være sikker på at du ikke velger /flytte den ved et uhell, låse den

Trinn 8

Deaktiver Fest til rutenett og gå til Rediger >.; Preferanser > General. Skriv inn en i Tastatur verdiboksen og klikk OK. Fokus på bunnen, grå form. Velg den og lage to kopier foran (Command + C > Command + F > Command + F).

Velg den øverste kopien og traff pil opp to ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%

Trinn 9

Igjen, velg den nederste, grå form og lage to kopier i front (Command + C >. Command + F > Command + F). Velg den øverste kopien og traff pil opp fire ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%

Trinn 10

Nok en gang, velge nederste, grå form og lage to kopier i front (Command + C >. Command + F > Command + F). Velg den øverste kopien og traff pil opp seks ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%.

Trinn 11

Neste, du trenger så legge til noen ekstra detaljer for den nederste grå form. Velg det, gå til Utseende panel og klikk på Legg til ny Fill-knappen (den lille, hvite firkanten fra bunnen bar). Selvfølgelig vil dette legge en annen fylling for din figur.

Velg den fra Utseende panelet og bruke lineær gradient vist nedenfor. De gule nuller fra den gradient bilde stå for opasitet prosentandel. Legg en tredje fyll for denne form og bruke radial gradient vist nedenfor. Husk at den gule teksten stå for Opacity prosent mens den hvite teksten står for plassering prosentandel.

Trinn 12

Hold fokus på formen redigeres i forrige trinn. Velg den og legge til en fjerde fyll. Velg det fra Utseende panel og gjøre det svart. Senk opacity til 8%, endre blending mode til Multipliser og gå til Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor og klikk på OK.

Trinn 13

Deretter må du maskere formen opprettet i forrige trinn. Dette vil skjule Film Grain virkning som overstiger kantene på formen. Velg den og lage en kopi i front (Command + C > Command + F > Command + F).

Velg denne kopien og traff D-tasten på tastaturet. Dette vil legge til standardegenskaper for din form (hvitt fyll og en 1pt, svart strek). Fjern den svarte strøk. Nå velger denne hvite form, sammen med formen redigeres i forrige trinn, og gå til Transparency panelet (Vindu > Transparent). Åpne fly-out menyen og klikk på Make Opacity Mask.

Trinn 14

Velg alle figurene som utgjør bunnområdet på knappen og gruppere dem (Kommando + G). Gå til Lag-panelet Dobbeltklikk på denne gruppen og gi den navnet " Bottom ".

Trinn 15

Flytt til toppen sirkel form. Velg den og gå til Object > Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK. Velg den resulterende formen og lage en kopi i front (Command + C > Command + F).

Velg denne kopien og traff pil ned to ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fylle den resulterende form med lineær gradient er vist i den fjerde bilde. Ikke glem at den gule null står for Opacity prosent

Trinn 16

Velg det øverste sirkelen og gå til Object >.; Sti > Offset Path. Skriv inn et -1px Offset annonseklikk OK. Velg den resulterende formen og lage en kopi i front (Command + C > Command + F). Velg denne kopien og traff pil opp en gang.

Marker på nytt begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fylle den resulterende form med lineær gradient er vist i den fjerde bilde. Det er det samme gradient brukes i forrige trinn

Trinn 17

Velg det øverste sirkelen og lage en kopi i front (Command + C > Command + F).. Gå til Lag-panelet og gjøre denne kopien usynlig. Velg det resterende, synlig sirkel og fyll den med radial gradient vist i det andre bildet

Sørg for at denne formen er fortsatt valgt og gå til Object >.; Utvide. Sjekk Fyll og Gradient Mesh boksene og klikk OK. Dette vil skape en ny gruppe med en gradient mesh en beskjæringsbane. Gå til Lag-panelet finner denne gruppen, fjerne maskerende bane og dele opp maskene (Command + Shift + G).

Trinn 18

Du har kanskje allerede lagt merke til at maskene er altfor stor. Du må endre størrelsen. Velg den og gå til Transformering-panelet. Bare skriv 249,904 i bredden boksen og 244,534 i høyden boksen. Dette vil bringe mesh til ønsket størrelse.

Nå, la oss legge litt farge til dette mesh. Plukk Direct Selection Tool (A), velge alle mesh poeng og sette farge på R = 167, G = 169, B = 172. Fortsett med Direct Selection Tool (A) og velg de midterste mesh poeng. Sett farge på R = 209, G = 211, B = 212.

Trinn 19

Velg den Mesh Tool og legger til en ny mesh sti som vist nedenfor. Bytt til Direct Selection Tool (A), velger de fire mesh punkter fremhevet i følgende bilde og sette sine farger på R = 188, G = 190, B = 192.

Trinn 20

Fortsett med Mesh Tool og legge til to nye mesh veier som vist nedenfor. Bytt til Direct Selection Tool (A), velger de fire mesh punkter fremhevet med hvit og sette sine farger på R = 209, G = 211, B = 212. Velg de fire mesh punkter markert med blå og sette sine farger på R = 188, G = 190, B = 192.

Trinn 21

Gå til Lag-panelet og vri kopi opprettet i det syttende skritt tilbake til synlig. Flytt den rett over mesh og fylle den med svart.

Trinn 22

Velg den svarte formen fra forrige trinn. Senke opacity til 60%, endre blending mode til Overlay og gå til Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor, klikk på OK og gå til Effect > Blur > Radial Blur. Igjen, skriv dataene nedenfor og klikk på OK. Til slutt knappen din skal se ut som bildet nedenfor.

Trinn 23

Velg mesh og alle figurene som utgjør forsiden av knappen og gruppere dem (Kommando + G) . Kalle denne nye gruppen " Front ".

Trinn 24

Fokus på strømmen symbolet form. Velg den og lage to kopier foran (Command + C > Command + F > Command + F). Velg den øverste kopien og traff pil ned én gang. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Velg den resulterende gruppe av former, slå den inn i en sammensatt bane (Object > sammensatt bane > Lag). Og fyll den med R = 109, G = 110, B = 113

Trinn 25

Velg det strøm symbol form og lage to kopier foran (Command + C > Command + F > Command + F). Velg den øverste kopien og traff pil ned tre ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Velg den resulterende gruppe av former, slå den inn i en sammensatt bane (Object > sammensatt bane > Lag). Og fyll den med R = 147, G = 149, B = 152

Trinn 26

Velg det strøm symbol form og legge til en annen fylling. Velg det fra Utseende panel. Fyll den med lineær gradient vist nedenfor, senk Opacity til 15% og gå til Effect > Sti > Offset Path. Skriv inn et -6px Offsettrykk, og klikk på OK. Reselect hele banen og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK.

Trinn 27

Velg alle figurene som utgjør makt symbol og gruppere dem. Name it " strøm symbol ". Nå velger alle gruppene som utgjør denne sluppet knappen og gruppere dem (Kommando + G). Kalle denne nye gruppen " Utgitt Button ".

Trinn 28

Flytt til presset knappen og utvide 3D-effekt. Igjen, fokus på den resulterende gruppen, fjerne alle avgrensningsbaner og figurene som er valgt i det andre bildet. Du bør også slette sirkel form skjult i ryggen, som du ikke trenger denne.

Trinn 29

Velg formene fremhevet i det første bildet og forene dem. Velg de formene som utgjør makt symbol og gjøre dem om til en sammensatt bane.

Trinn 30

Fokus på bunnen, grå form. Velg den og lage to kopier foran (Command + C > Command + F > Command + F). Velg den øverste kopien og traff pil opp en gang. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%

Trinn 31

Igjen, velg den nederste, grå form og lage to kopier i front (Command + C >. Command + F > Command + F). Velg den øverste kopien og traff pil opp to ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%

Trinn 32

Nok en gang, velge nederste, grå form og lage to kopier i front (Command + C >. Command + F > Command + F). Velg den øverste kopien og traff pil opp tre ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%.

Trinn 33

Velg det nederste grå form og legg til bygninger som benyttes i løslatt knappen. Du kan enkelt kopiere egenskapene fra en form til en annen. Her er hvordan du kan gjøre det. Gå til Lag-panelet og finne bunnen, grå form fra sluppet knappen.

Fokus på høyre side av Lag-panelet, og du vil merke at hver figur kommer med en liten sirkel. Det kalles et mål ikon. Hold alt, kan du klikke på denne sirkelen og dra på elementet du vil kopiere utseende attributter. Nå som du overført egenskapene maskere denne formen som du gjorde i trinn tretten. Ikke glem å gruppere alle figurene som utgjør bunnen delen av dette trykket knappen.

Trinn 34

For forsiden av trykket knappen vil vi bruke en kopi av " Front " gruppe. Gå til Lag-panelet inn i " Utgitt Button " gruppe og duplisere " Front " . Gruppe

Dra denne kopien utenfor " Utgitt Button " gruppe. Velg denne gruppen kopi sammen med fronten sirkel fra trykket knappen og gå til Align panel. Bare klikk på den horisontale Høyrejustér og Vertikal Juster Bottom knapper. Nå skal gruppen kopi plasseres som vist i det endelige bildet.

Trinn 35

Flytt til strøm symbol. Gjenta trinn 24, 25 og 26, eller bruke teknikken vist i forrige trinn. Symbolet fra trykket knappen trenger en fin Ytre glød effekt. Bare velg makt symbol form og gå til Effect > Stylize > Ytre glød. Tast inn dataene vist i det andre bildet, og klikk på OK.

Hvis du velger å gjenta disse tre trinnene ikke glem å gruppere de endelige formene som utgjør din makt symbol. Til slutt velger alle gruppene som gjør ferien trykket knappen og gruppere dem. Gi denne siste gruppen " Presset Button ".

Trinn 36

Gå tilbake til " Black " forme og låse den opp. Velg den, sende den til bunnen av Lag-panelet (Shift + Kommando + Venstre Bracket-tasten) og gå til Object > Sti > Offset Path. Skriv inn et 3.5px Offsettrykk, og klikk på OK. Fyll den resulterende form med R = 35, G = 31, B = 32, og slette den opprinnelige " Black " . Formen

Trinn 37

Gå til Lag-panelet og gjøre " Utgitt Button " gruppe usynlig. Velg formen gjort i forrige trinn og lage en kopi i front (Command + C > Command + F).

Trinn 38

Aktiver Fest til rutenett. For neste trinn må du et rutenett veldig 5px. Gå til Rediger > Preferanser > Generelt og skriv 5 i Tastatur verdiboksen. Plukk Ellipse Tool (L) og opprette fire, 25px sirkler. Fyll dem alle med R = 35, G = 31, B = 32. Nå plasserer dem som vist i følgende bilde, og slå dem sammen til en sammensatt bane. Velg den og lage en kopi i front.

Trinn 39

Velg den fronten, stor sirkel sammen med fronten sammensatt bane ble opprettet i forrige trinn, og klikk på Minus Front knappen fra Pathfinder panel. Dette vil skape en gruppe med fire kutt sirkler.

Trinn 40

Velg de fire formene opprettet i forrige trinn én etter én, og fylle dem med lineær gradient vist nedenfor. Ikke glem om den gule null.

Trinn 41

Deaktiver Fest til rutenett. Velg den øverste, venstre kutt sirkel og lage to kopier i front. Velg den øverste kopien og traff pil ned én gang. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%.

Trinn 42

Velg den øverste, rett kutt sirkel og lage to kopier i front. Velg den øverste kopien og traff pil ned én gang. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%.

Trinn 43

Velg den nederste, venstre kutte sirkel og lage to kopier i front. Velg den øverste kopien og traff pil ned og pil høyre samtidig. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%.

Trinn 44

Velg den nederste, høyre kutt sirkel og lage to kopier i front. Velg den øverste kopien og traff pil ned og pil venstre samtidig. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart og senke Opacity til 15%.

Trinn 45

Velg den andre store sirkelen sammen med den andre sammensatt bane og klikk på Unite knappen fra Pathfinder-panelet. Velg den resulterende form og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor image # 2 og klikk på OK.

Trinn 46

Aktiver Fest til rutenett. For neste trinn må du et rutenett hver 1px. Gå til Rediger > Preferanser > Generelt og skriv en i Tastatur verdiboksen. Plukk Ellipse Tool (L), opprette en 8px sirkel og fyll den med R = 88, G = 89, B = 91.

Legg til en annen fylling for denne formen og velge det fra Utseende panel. Sett farge på R = 35, G = 31, B = 32, og gå til Effect > Sti > Offset Path. Skriv inn et -2px offset og klikk på OK. Med dette andre fyll likevel valgt gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK. Gå tilbake til Utseende panel og legge en 0,5 hjerneslag. Juster det til inne og sette farge på R = 35, G = 31, B = 32.

Trinn 47

Velg den formen laget i forrige trinn, og ta tre kopier. Nå plasserer disse fire sirkler som vist i følgende bilde. Fest til rutenett vil lette arbeidet ditt. Velg alle disse mørke former og gruppere dem. Gi denne gruppen " Black " og send den til å sikkerhets (Shift + Kommando + Venstre Bracket nøkkel)

Trinn 48

Gå tilbake til ". linjenettet hver 10px " og slå " Utgitt Button " gruppen tilbake til synlig. Velg " Black " gruppe og lage en kopi i front. Velg denne kopiere og flytte den under trykket knappen som vist i det andre bildet. Igjen, vil Fest til rutenett lette arbeidet ditt.

Trinn 49

Velg den Ellipse Tool (L), opprette en 270 etter 290px formen og legg den bak sluppet knappen, som vist i følgende bilde. Først sende denne formen for å sikkerhets (Shift + Kommando + Venstre Bracket-tasten) og fyll den med lineær gradient vist nedenfor. Deretter senke Opacity til 40% og gå til Effect > Blur > Gaussian Blur. Skriv inn et 5px radius, og klikk OK. Lag en kopi av denne enkle ellipse og dra den bak trykket knappen.

Trinn 50

For bakgrunnen bruke rektangelverktøyet (M). Lag en form av størrelsen på artboard, fyll den med R = 50, G = 50, B = 50 og sende den til å sikkerhets (Shift + Kommando + Venstre Bracket tasten).

Legg til en annen fylling for dette forme og gjøre det svart. Velg det fra Utseende panel og gå til Effect > Pikseler > Mezzotint. Velg fine prikker på rullegardinmenyen, klikk OK, og deretter gå den Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor og klikk på OK.

Trinn 51

Til slutt kan du erstatte de grå fargetoner som brukes til strøm symbol med et annet sett med farger. I disse bildene kan du finne noen eksempler. Bruk toppen, to farger for de tynne sammensatte baner og bunnen farge for det totale strøm symbol. Ikke glem å redigere Ytre glød effekt brukes for trykket knappen.

Konklusjon

Den endelige vektor-knappen ikonsett er under.