Quick Tips: Hvordan lage en av og på-knapp i Adobe Illustrator
I det følgende opplæringen vil du lære å lage en av /på-knappen. Det er enkelt å lage, og du vil lære å lage et objekt som er perfekt som en web-element eller ikon. La oss komme i gang!
Trinn 1
Lag en 200 ved 200px, RGB-dokument. Slå på Grid (View > Grid) og Fest til rutenett (View > Fest til rutenett). Deretter trenger du et rutenett hver 5px. Gå til Rediger > Preferanser > Guides & Grid, skriv 5 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 dine figurer. Ikke glem å bytte måleenheten til piksler fra Rediger > Preferanser > Unit > General. Al disse alternativene vil øke arbeidshastigheten.
Trinn 2
Velg rektangel Tool (M), opprette en 90 ved 140px form og fyll den med R = 65 G = 64 B = 66. Åpne Utseende panelet (Vindu > Utseende), velg fyll og gå til Effect > Stilisere > Indre glød. Skriv inn dataene nedenfor og klikk på OK.
Trinn 3
Velg den formen laget i forrige trinn, ope fly-out menyen i Utseende-panelet og klikk på Legg til ny Fill. Dette vil legge til en annen fylling for formen. Velg den, satt sin farge til R = 20 G = 20 B = 20 og deretter gå til Effect > Forvrenge & Transform > Transform. Skriv inn dataene nedenfor bilde 1 klikk OK og gå til Effect > Warp > Arc Nedre. Skriv inn dataene nedenfor bilde # 2, klikk OK og deretter gå til Effect > Blur > Gaussian Blur. Skriv inn en 1px radius og klikk på OK. Sørg for at denne nye fyllingen blir valgt, senke opacity til 70% deretter flytte den under den første fylle (i Utseende panel).
Trinn 4
Legg til en tredje fyll for din rektangel. Velg det, senke opacity til 15%, endre blending mode til Multipliser deretter gå til Effect > Artistic > Film Grain. Skriv inn dataene nedenfor og klikk på OK.
Trinn 5
Velg det rektangel og legg til en første slag. Gjør det 0.5pt bred, justere den til inne og sette farge på R = 20 G = 20 B = 20. Velg det fra Utseende panel og klikk på Duplicate Selected Sak ikon fra bunnen av Utseende panel. Dette vil duplisere hjerneslag. Velg denne kopien, satt sin farge på R = 109 G = 110 B = 113 så gå til Effect > Forvrenge & Transform > Transform. Skriv inn dataene nedenfor og klikk på OK
Trinn 6
Velg det hele rektangelet og gå til Effect >.; Stilisere > Avrundede hjørner. Skriv inn og 5px radius klikk deretter OK. Nå kan du forme bør se ut i følgende bilde.
Trinn 7
Velg den Ellipse Tool (L), opprette en 5 av 5px form og legg den som vist i følgende bilde. Fest til rutenett vil lette arbeidet ditt. Fyll den med R = 88 G = 89 B = 91 velg deretter fyll og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK.
Trinn 8
Velg det formen gjorde i forrige trinn og legge til en annen fylling. Velg den, satt sin farge til R = 20 G = 20 B = 20 og gå til Effect > Forvrenge & Transform > Transform. Skriv inn de data som vises nedenfor, klikk OK og deretter gå til Effect > Forvrenge & Transform > Pucker & bloat. Igjen, skriv dataene nedenfor og klikk på OK.
Trinn 9
Deretter må du legge til en kopi av denne sirkelen i hvert hjørne. Du kan opprette tre eksemplarer og flytte dem i hjørnene, eller du kan velge sirkelen og legge de to Transform effektene er vist nedenfor.
Step 10
Velg avrundet rektangel og gå til Objekt > Sti > Offset Path. Skriv inn et -20px Offsettrykk, og klikk OK. Den resulterende formen skal se ut i det andre bildet. Velg den og traff D for å legge standardegenskapene (hvit fyll- og svart slag). Nå formen din skal se ut i det tredje bildet. Reselect det, justere slaget utenfor, sette farge på R = 10 G = 10 B = 10 for både fylle og hjerneslag deretter gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 5px radius og klikk på OK. Til slutt formen din skal se ut i det fjerde bildet.
Trinn 11
Velg den formen laget i forrige trinn, og lage en kopi i front (Ctrl + C > Control + F). Velg denne kopien, fjerne strøk, satt fyllfargen på R = 255 G = 255 B = 255 så gå til Objekt > Utvid Utseende.
Trinn 12
Velg den Pen Tool (P) og tegne en 60px horisontal bane. Legg en tynn, rød strek, slik at du kan skille det lettere fra resten av figurene. Velg den sammen med den hvite formen opprettet i forrige trinn og åpne Align panel. Plukk Selection Tool (V), klikk på grensen av det hvite form (det bør bli lagt vekt) klikk deretter på Horisontal Align Center og Vertical Align midtknappen fra Align panel. Nå bør din horisontal bane bli tredd opp som vist i tredje bildet. Reselect det sammen med den hvite, avrundet rektangel og klikk på Divide knappen fra Pathfinder-panelet. Dette vil dele din hvit form i to like figurer.
Step 13
Velg gruppen ble opprettet i forrige trinn, og treffer Shift + Ctrl + G for å dele opp det. Nå, la oss fokusere på de nederste figurer. Velg det, fyll den med R = 75 G = 75 B = 75 deretter legge til en annen fylling og bruke lineær gradient vist nedenfor image # 2. Den gule null fra gradient bildet står for opasitet prosent
Trinn 14
Kan Fest til rutenett og deretter gå til Edit >.; Preferanser > General. Skriv inn 0,5 i Tastatur Increment boksen og klikk OK. Reselect formen redigeres i forrige trinn, og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopien og traff pil opp (for å flytte den 0.5px opp). Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 147 G = 149 B = 152.
Trinn 15
Nå, la oss gå til toppform. Velg den og gå til Effect > 3D > Extrude & Bevel. Skriv inn de data som vises nedenfor, klikk OK og deretter gå til Objekt > Utvid Utseende. Ta en titt i din lagpanelet, og du vil finne en ny gruppe. Åpne den og fjerne de to avgrensningsbaner.
Step 16
Velg formene fremhevet i det første bildet, og klikk på Unite knappen fra Pathfinder-panelet. Fyll den resulterende form med lineær gradient er vist i det andre bildet.
Step 17
Aktiver Fest til rutenett og plukke Direct Selection Tool (A). Velg ankerpunktene fremhevet i det første bildet og flytte dem ned som vist i det andre bildet. Nok en gang vil snap til rutenett lette arbeidet ditt. Fylle denne form med R = 65 G = 64 B = 66 den legge til en ekstra fyll og bruke gradient vist i fjerde bildet.
Trinn 18
Deaktiver Fest til rutenett velg deretter formen redigeres i forrige trinn, og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopien og trykke pil ned. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 128 G = 130 B = 133 og senke opacity til 85%.
Trinn 19
Til slutt, hvis du velger å rotere knappen 90 grader vil det se som i det første bildet. For å fikse skyggen velge stor avrundet rektangel, gå nederst fyll, åpne Transform effekt og erstatte den eksisterende data med det som vises i det andre bildet. Gjør det samme hvis du velger å bruke Transform effekt å multiplisere skruene.
Konklusjon
Der har du det, en enkel, men likevel elegant og på knapp. Jeg håper du har hatt glede av denne tut. Anmeldelser