Share
I den følgende opplæringen lærer du å lage en på / av-knapp. Det er enkelt å lage, og du vil lære å lage et objekt som er perfekt som et webelement eller et ikon. La oss komme i gang!
Lag et 200 x 200 px RGB-dokument. Slå på rutenettet (Vis> Rutenett) og Rask til rutenettet (Vis> Rask til rutenett). Deretter trenger du et rutenett hver 5px. Gå til Rediger> Innstillinger> Guider og rutenett, skriv inn 5 i Rutenettlinjen hver boks og 1 i Retningslinjene underdelinger. Du kan også åpne Info-panelet (Vindu> Info) for et forhåndsvisning med størrelsen og plasseringen av figurene dine. Ikke glem å bytte måleenheten til piksler fra Rediger> Innstillinger> Enhet> Generelt. Alle disse alternativene vil øke arbeidshastigheten betydelig.
Velg rektangulærverktøyet (M), opprett en form av 90 x 140 px og fyll den med R = 65 G = 64 B = 66. Åpne Utseende panelet (Vindu> Utseende), velg fyll og gå til Effekt> Stylize> Inner Glow. Skriv inn dataene som vises nedenfor, og klikk deretter OK.
Velg formen som ble gjort i det forrige trinnet, åpne fly-ut-menyen i Utseendepanelet og klikk på Legg til ny fylling. Dette vil legge til en ny fylling for din form. Velg den, sett fargen til R = 20 G = 20 B = 20 og gå til Effect> Distort & Transform> Transform. Skriv inn dataene som vises nedenfor Bilde nr. 1 klikker OK, og deretter går du til Effekt> Varsel> Arc Lower. Skriv inn dataene som vises under bilde nr. 2, klikk OK og gå til Effekt> Uklarhet> Gaussisk uskarphet. Skriv inn en radius på 1px og klikk OK. Pass på at denne nye fyllingen fortsatt er valgt, senk dens opasitet til 70%, og flytt den deretter under den første fyllingen (i Utseendepanelet).
Legg til en tredje fylling for rektangelet. Velg den, senk dens opasitet til 15%, endre blandemodus til Multiply, og gå deretter til Effect> Artistic> Film Grain. Skriv inn dataene som vises nedenfor, og klikk deretter OK.
Vellgjør rektangelet og legg til et første slag. Gjør det 0,5pt bredt, juster det til innsiden og sett fargen på R = 20 G = 20 B = 20. Velg det fra Utseende-panelet og klikk på Duplicate Selected Item-ikonet fra bunnen av Utseendepanelet. Dette vil duplisere strekningen. Velg denne kopien, sett fargen på R = 109 G = 110 B = 113 og gå til Effekt> Forvreng og transformer> Transform. Skriv inn dataene som vises nedenfor, og klikk deretter OK.
Velg hele rektangelet og gå til Effekt> Stylize> Avrundede hjørner. Skriv inn og 5px radius og klikk deretter OK. Nå skal du se på det følgende bildet.
Velg Ellipse Tool (L), opprett en 5 til 5px form og legg den som vist i bildet nedenfor. Snap to Grid vil lette arbeidet ditt. Fyll det med R = 88 G = 89 B = 91 velg deretter fyll og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som vises nedenfor, og klikk deretter OK.
Tilbakestill formen som ble gjort i forrige trinn, og legg til en ny fylling. Velg den, sett fargen til R = 20 G = 20 B = 20 og gå til Effect> Distort & Transform> Transform. Skriv inn dataene som vises nedenfor, klikk OK og gå til Effect> Distort & Transform> Pucker & Bloat. Igjen, skriv inn dataene som vises nedenfor og klikk OK.
Deretter må du legge til en kopi av denne sirkelen i hvert hjørne. Du kan lage tre kopier og flytte dem i hjørnene, eller du kan velge sirkelen og legge til de to Transform-effektene som vises nedenfor.
Velg det avrundede rektangelet og gå til Objekt> Sti> Offset Path. Skriv inn en -20px Offset og klikk OK. Den resulterende formen skal se ut i det andre bildet. Velg den og trykk D for å legge til standardegenskapene (hvitt fyll og svart slag). Nå skal formen din se ut i det tredje bildet. Velg det, juster streken til utsiden, sett fargen på R = 10 G = 10 B = 10 for både fyll og strekk, og gå deretter til Effekt> Stylize> Avrundede hjørner. Skriv inn en radius på 5px og klikk OK. Til slutt skal formen din se ut i det fjerde bildet.
Velg formen som ble gjort i forrige trinn og lag en kopi foran (Kontroll + C> Kontroll + F). Velg denne kopien, fjern slaget, sett fyllfarge ved R = 255 G = 255 B = 255 og gå til Objekt> Utvid Utseende.
Plukk pennverktøyet (P) og tegne en 60px horisontal bane. Legg til et tynt, rødt slag slik at du kan skille det lettere fra resten av figurene. Velg den sammen med den hvite formen som ble opprettet i forrige trinn, og åpne justeringspanelet. Velg markeringsverktøyet (V), klikk på grensen til den hvite formen (den skal bli understreket), og klikk deretter på Horisontal justeringssenter og Vertikal Juster senterknapp fra Juster-panelet. Nå skal den horisontale banen din snøres som vist i det tredje bildet. Velg den sammen med det hvite, avrundede rektangelet og klikk på Divide-knappen fra Pathfinder-panelet. Dette vil dele din hvite form i to like former.
Velg gruppen som ble opprettet i forrige trinn, og trykk Shift + Control + G for å oppheve gruppen. La oss nå fokusere på de nederste figurene. Velg den, fyll den med R = 75 G = 75 B = 75 og legg til en ny fyll og bruk den lineære gradienten som vises under bilde nr. 2. Den gule nullen fra gradientbildet står for opacitetsprosent.
Unngå Snap to Grid, og gå deretter til Rediger> Innstillinger> Generelt. Skriv inn 0,5 i tastaturøkningsboksen, og klikk deretter OK. Tilbakestill formen redigert i forrige trinn og lag to kopier foran (Kontroll + C> Kontroll + F> Kontroll + F). Velg toppkopien og trykk pil opp (for å flytte den 0,5 px opp). Velg begge kopier og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 147 G = 149 B = 152.
La oss nå flytte til toppform. Velg den og gå til Effect> 3D> Extrude & Bevel. Skriv inn dataene som vises nedenfor, klikk OK, og gå til Objekt> Utvid utseende. Ta en titt i Lag-panelet ditt, og du vil finne en ny gruppe. Åpne den og fjern de to Clipping-banene.
Velg figurene som er markert i det første bildet, og klikk på Unite-knappen fra Pathfinder-panelet. Fyll den resulterende formen med den lineære gradienten vist i det andre bildet.
Aktiver Snap to Grid og velg Direct Selection Tool (A). Velg ankerpunktene som er markert i det første bildet, og flytt dem ned som vist i det andre bildet. Igjen, vil snap to grid lette arbeidet ditt. Fyll denne formen med R = 65 G = 64 B = 66 Legg til en ny fyll og bruk gradienten vist i fjerde bilde.
Deaktiver Snap to Grid, velg deretter formen redigert i forrige trinn og lag to kopier foran (Kontroll + C> Kontroll + F> Kontroll + F). Velg toppkopien og trykk på nedpilen. Velg begge kopier og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 128 G = 130 B = 133 og senk dens opasitet til 85%.
Til slutt, hvis du velger å rotere knappen 90 grader, vil det se ut i det første bildet. For å fikse skyggen velg det store avrundede rektangelet, gå til bunnfyllingen, åpne Transform-effekten og erstatt eksisterende data med den som vises i det andre bildet. Gjør det samme hvis du valgte å bruke Transform-effekten for å multiplisere skruene.
Der har du det, en enkel, men likevel elegant på og av knapp. Jeg håper du har hatt glede av denne tut.
Accentsconagua