How å lage et sett med Toggle Knapper i Adobe Illustrator
I det følgende opplæringen vil du lære hvordan du kan lage et sett med vippeknapper i Adobe Illustrator. Vi kommer til å bruke grunnleggende former og Pathfinder-panelet for å lage denne UI avgjørende for noens verktøysett. Videre mer, vil du ikke trenger Pen Tool, så det er enkelt å følge med for nybegynnere!
Trinn 1
Hit Command + N for å opprette et nytt dokument . Skriv inn 600 i boksen Bredde og høyde boksene klikk deretter på knappen Avansert. Velg RGB, Screen (72ppi) og sørg for at " Juster nye objekter til Pixel Grid " boksen ikke er krysset før din klikker OK. Aktiver Grid (View > Vis rutenett) og Fest til rutenett (View > Fest til rutenett).
Deretter må 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
Bruk rektangel Tool (M), opprette en 215 ved 255px form, fyll den med R = 70 G = 70 B = 70 og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 15px radius, klikk på OK og gå til Objekt > Utvid Utseende.
Trinn 3
Deaktiver Fest til rutenett (View > Fest til rutenett) og deretter gå til Rediger > Preferanser > Generell og sørg for at tastaturet Increment er satt til 1px. Reselect formen gjorde i forrige trinn og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopiere og flytte den 1px ned ved hjelp av pil ned på tastaturet. Reselect begge eksemplarene, åpner Pathfinder-panelet og klikk på Minus Front-knappen. Fyll den resulterende formen med R = 20 G = 20 B = 20.
Trinn 4
Velg det avrundet rektangel gjort i andre trinn og fokus på utseendet panel. Først velger fyll og gå til Effect > Stilisere > Indre glød. Skriv inn de data som vises nedenfor, klikk OK og deretter gå til Effect > Stilisere > Drop Shadow. Igjen, skriv dataene vist i følgende bilde og klikk på OK. Sørg for at formen er valgt, gå tilbake til Utseende panel og legge til en 5PT, svart strek. Velg sin, senke Opacity til 5% og justere den til innsiden. Hold fokus på Utseende panel og legge til en andre strøk for din form ved hjelp av Legg til ny Stroke knappen. Velg denne nye slag, satt sin farge på svart, gjør det 2pt bred, senke Opacity til 20% og justere den til innsiden.
Trinn 5
Aktiver Fest til rutenett (View > Fest til rutenett). For de følgende trinnene vil du trenge et rutenett hver 1px. Så, gå til Rediger > Preferanser > Guides & Grid og skriv en i linjenettet hver boks. Bruke rektangel Tool (M), opprette en 64 ved 28px form, fyll den med svart, plasser den som vist i følgende bilde og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 14px radius, klikk på OK og gå til Objekt > Utvid Utseende.
Trinn 6
Bruke rektangel Tool (M), opprette en 36 ved 24px form, fyll den med lineær gradient vist nedenfor, og legg den som vist i følgende bilde. De hvite tall fra gradient bilde stå for plassering prosentandel. Bytt til Ellipse Tool (L) og lage en to, 24px sirkler. Fyll begge figurer med hvitt og plassere dem som er vist i det andre bildet.
Trinn 7
Velg det tre former laget i forrige trinn og kopiere dem (Ctrl + C > Control + F). Velg disse kopiene, og klikk på Minus Front knappen fra Pathfinder-panelet. Flytt til Lag-panelet, dobbeltklikk på den resulterende formen og gi den navnet " Top ".
Trinn 8
reselect " Top " sammen med den rette, hvite sirkelen og kopiere dem (Ctrl + C > Control + F). Velg kopi av sirkelen og flytte den 1px til venstre med venstre pil fra tastaturet. Reselect begge eksemplarene og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende form med lineær gradient vist nedenfor og endre Blending Mode til Soft Light. Igjen, de hvite tall fra gradient bilde stå for plassering prosent mens de gule nuller stå for Opacity prosentandel.
Trinn 9
reselect " Top " sammen med venstre, hvit sirkel og kopiere dem (Ctrl + C > Control + F). Velg kopi av sirkelen og flytte den 1px til høyre med pil høyre fra tastaturet. Reselect begge eksemplarene og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende form med lineær gradient vist nedenfor og endre Blending Mode til Soft Light.
Trinn 10
reselect " Top " og lage en kopi i front (Ctrl + C > Control + F). Bruke rektangel Tool (M), opprette en 20 ved 4px form og legg den som vist i det andre bildet. Velg denne nye rektangelet sammen med kopien gjort i begynnelsen av trinnet og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende formen med hvit og senke Opacity til 10%.
Trinn 11
reselect " Top " og lage en kopi i front (Ctrl + C > Control + F). Bruke rektangel Tool (M), opprette en 36 ved 3px form og legg den som vist i det andre bildet. Velg denne nye rektangelet sammen med kopien gjort i begynnelsen av trinnet og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende formen med svart og senke Opacity til 20%.
Trinn 12
Velg det svart avrundet rektangel laget i femte trinn og duplisere den (Ctrl + C > Control + F). Velg denne nye kopien sammen med de to, hvit sirkel og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 45 G = 45 B = 45
Trinn 13
Velg det svart avrundet rektangel gjort i det femte trinnet og går til Effect >.; Stilisere > Drop Shadow. Tast inn dataene som vises i venstre vindu, klikk på OK og gå igjen til Effect > Stilisere > Drop Shadow. Tast inn dataene som vises i vinduet til høyre og klikk på OK.
Step 14
Bruke Ellipse Tool (L), opprette et nytt 24px sirkel, fyll den med det første lineær gradient og plasser den som vist i det første bildet. Velg denne nye formen og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopiere og flytte den 1px til høyre. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med lineær gradient vist i den tredje bilde og senker Opasitet 15%.
Trinn 15
Velg det sirkel gjort i forrige trinn og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopiere og flytte den 1px til venstre. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med lineær gradient vist i den tredje bilde og senker Opasitet 15%.
Trinn 16
Velg det 24px sirkel og lage to kopier foran (Ctrl + C > Ctrl + F > Control + F). Velg den øverste kopiere og flytte den 3px til venstre. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med lineær gradient vist i den tredje bilde og senker Opasitet 15%.
Step 17
Bruke rektangel Tool (M) og lage to, en av 6PX figurer, en svart og den andre hvit. Plasser dem som vist i det første bildet og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 0.5px radius, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Tast inn dataene vist i det andre bildet og klikk på OK.
Step 18
Velg det svart avrundet rektangel gjort i forrige trinn og gå til Objekt > Utvid Utseende. Slå den resulterende gruppe figurer i en sammensatt bane (Object > Compound Sti > Lag), fyll den med R = 120 G = 120 B = 120 og endre Blending Mode til Multipliser.
Step 19
Velg det hvite avrundet rektangel gjort i det syttende trinnet og går til Objekt > Utvid Utseende. Slå den resulterende gruppe figurer i en sammensatt bane (Object > Compound Sti > Lag). Og senke Opacity til 13%
Trinn 20
Marker på nytt alle figurene er laget i det siste seks trinn og konsernet dem (Ctrl + G). Velg denne nye gruppen og gå til Objekt > Transform > Reflektere. Sjekk Vertikal knappen og klikk på Kopier-knappen. Dette vil skape en horisontalt venda kopi av din gruppe. Dra den til høyre og plassere den som vist i tredje bildet.
Trinn 21
Velg alle figurene som er opprettet i de siste 15 trinn (de former som utgjør knappen) og gruppere dem (Ctrl + G). Flytt til Lag-panelet og kalle denne nye gruppen " Button ". Deaktiver Fest til rutenett (View > Fest til rutenett). Med Type Tool (T), tilsett " " som vist i andre bilde. Bruk " Century Gothic " font med stilen sett på Fet og størrelsen satt til 12 pkt. Velg denne teksten, fokus på Utseende panel og legge til en ny fylle bruker Legg til ny Fill-knappen. Velg den, satt sin farge på R = 57 G = 181 B = 74 og gå til Effect > Stilisere > Drop Shadow. Skriv inn dataene nedenfor og klikk på OK.
Trinn 22
Marker på nytt teksten og legge til en annen fylling. Velg den, sørg for at fargen er satt til R = 57 G = 181 B = 74 og gå til Effect > Stilisere > Ytre glød. Skriv inn dataene nedenfor og klikk på OK. Hold fokus på Utseende panel og legge til en tredje fyll. Velg den, satt sin farge på R = 57 G = 255 B = 74 og gå til Effect > Sti > Offset Path. Skriv inn et -0.6px Offsettrykk, og klikk OK.
Trinn 23
Velg alle figurene laget så langt og gruppere dem (Ctrl + G). Lag en kopi av denne nye gruppen og flytte den til høyre som viser i det andre bildet. Fokus på denne nye gruppen og fjerne teksten. Deretter velger du " Button " og flytte den 64px til høyre. Fokus på Lag-panelet og bore ned i din " Button " gruppe. Velg bunnen, svart avrundet rektangel og fokus på utseendet panel. Åpne de to Drop Shadow effekter og inverse X Offset (bare erstatte 1px med -1px)
Trinn 24
Hold fokus på den andre gruppen gjorde i forrige trinn og tilsett ". OFF ". Satt sin farge på R = 20 G = 20 B = 20 og bruke " Century Gothic " font med stilen sett på Fet og størrelsen satt til 12 pkt. Også legge den diskrete Drop Shadow vist i følgende bilde.
Trinn 25
Til slutt, her er hvordan du enkelt kan endre farge knappene. Reselect hoved avrundet rektangel (den gjort i andre trinn), lage en kopi i front (Ctrl + C > Ctrl + F) og bringe den til front (Shift + Ctrl + [). Velg denne ny kopi, fokus på Utseende panel, fjerne strøk og effektene deretter fylle den med R = 215 G = 225 B = 242 og endre Blending Mode til Color.
Eller du kan bruke de samme teknikkene, men bare for knappen.
Konklusjon
Nå arbeidet er ferdig. Her er hvordan det skal se ut i en rekke så fargekombinasjoner.