How å lage en detaljert Keyboard Button Illustrasjon i Adobe Illustrator
I de følgende trinnene vil du lære hvordan du kan lage en detaljert tastaturknapper illustrasjon. Du vil se hvor kraftig Utseende panelet kan virkelig være! For hoveddelen av knappen vil du bruke et enkelt rektangel med fjorten fills, lineær og radial gradient, tre slag, noen grunnleggende blending teknikker og over femti effekter. Til slutt tar full nytte av den Utseende panel, trenger du bare fire-rektangel, bakgrunnen form pluss de små biter av tekst.
Trinn 1
Hit Command + N for å opprette et nytt dokument. Skriv inn 600 i bredden boksen og 450 i høyden 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 trenger du et rutenett hver 1px. Gå til Rediger > Preferanser > Guides > Grid, skriver en 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
Vi begynner med bakgrunnen. Bruke rektangel Tool (M), lage en form av størrelsen på artboard, fyll den med R = 225, G = 225, B = 225 og fokus på utseendet panel. Legg en annen fylling for denne form ved hjelp av Legg til ny Fill knappen fra bunnen av Utseende panel. Velg denne nye fyll og legge radial gradient vist nedenfor. Den gule null fra gradient bildet står for Opacity prosentandel.
Trinn 3
Pass på at rektangelet gjorde i forrige trinn er valgt, fokuserer på utseendet panel og legge til en tredje fyll. Velg denne nye fyll, gjør det svart, senke Opacity til 3%, endre Blending Mode til Multipliser og gå til Effect > Artistic > Film Grain. Tast egenskapene som vises i følgende bilde og klikk på OK. Dette blir din enkel bakgrunn. Flytt til Lag-panelet og låse denne formen for å være sikker på at du ikke vil uhell velge /flytte den.
Trinn 4
Bruk rektangel Tool (M), opprette en 58 ved 57px forme og fylle den med lineær gradient vist i følgende bilde. Den hvite nummer fra gradient bildet står for plassering prosentandel. Flytt til Lag-panelet, dobbeltklikk på denne nye formen og slett kalle det " ButtonMain ".
Trinn 5
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg den eksisterende fyll og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 5px radius, klikk på OK og gå til Effect > Warp > Arc Nedre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Warp > Arc Øvre. Skriv inn de egenskapene som vises nedenfor, klikk på OK og gå til Effect > Warp > Utbulning. Tast egenskapene som vises i følgende bilde og klikk på OK.
Trinn 6
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg eksisterende fyll og klikker på Duplicate Selected Element-knappen (påpekt av den lille, blå pil). Selvsagt vil dette legge en kopi av det valgte fyllet. Velg denne nye fyll, senke Opacity til 80% og erstatte den lineære gradient med radial gradient vist i følgende bilde. Husk at den gule null fra gradient bildet står for Opacity prosentandel.
Trinn 7
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikker på Duplicate Selected element. Velg den nylig lagt fyll, senke Opacity til 70% og erstatte radial gradient med lineær gradient vist i følgende bilde.
Trinn 8
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikker på Duplicate Selected element. Velg den nylig lagt fyll, senke Opacity til 5%, erstatte lineær gradient med en enkel svart og deretter gå til Effect > Sti > Offset Path. Skriv inn et -2px Offsettrykk, og klikk OK.
Trinn 9
Pass på at " ButtonMain " er valgt, fokuserer på utseendet panel og legge en femtedel fill bruker Legg til ny Fill-knappen (påpekt av den lille, blå pil). Velg denne nye fyll, dra den i bunnen av Utseende panel, sette farge på R = 145, G = 145, B = 145 og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 7.5px radius, klikk på OK og gå til Effect > Warp > Arc Nedre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Warp > Utbulning. Skriv inn de egenskapene som vises nedenfor, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Tast egenskapene som vises i følgende bilde (pass på at du sjekker midten, topp referansepunkt) og klikk OK.
Step 10
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg den nylig lagt fyll og erstatte flat farge med lineær gradient vist i følgende bilde.
Step 11
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg den nylig lagt fyll og erstatte den eksisterende lineær gradient med det som vises i bildet nedenfor.
Step 12
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg dette nylig lagt fyll og redigere vinkelen brukes for lineær gradient som vist i følgende bilde.
Step 13
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg den nylig lagt fyll og erstatte den eksisterende lineær gradient med det som vises i bildet nedenfor.
Step 14
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg dette nylig lagt fyll og redigere vinkelen brukes for lineær gradient som vist i følgende bilde.
Step 15
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Legg til ny Fill-knappen. Velg dette nylig lagt fyll, sette farge på hvit, senke Opacity til 20% og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 5px radius, klikk på OK og gå til Effect > Warp > Arc Nedre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Warp > Arc Øvre. Skriv inn de egenskapene som vises nedenfor, klikk på OK og gå til Effect > Warp > Utbulning. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Forvrenge & Transform > Transform. Skriv inn de egenskapene som vises nedenfor og klikk på OK.
Step 16
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg dette nylig lagt fyll, senke Opacity til 10% og åpne eksisterende Transform effekt. Skriv inn " 2 " i Move-Vertical klikker OK og deretter åpne den eksisterende Offset Sti effekt og heve Offset å 2PX.
Step 17
Pass på at " ButtonMain " er valgt, fokuserer på utseendet panel og legge til en annen fill bruker Legg til ny Fill-knappen. Velg denne nye fyll, dra den i bunnen av Utseende panel, legge den lineære gradient vist i følgende bilde og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 7px radius, klikk på OK og gå til Effect > Warp > Arc Øvre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Warp > Utbulning. Skriv inn de egenskapene som vises nedenfor, klikk på OK og gå til Effect Sti > Offset Path. Skriv inn en 1px Offset, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Tast egenskapene som vises i følgende bilde (pass på at du sjekker midten, topp referansepunkt), klikk OK og gå til Effect > Stilisere > Indre glød. Skriv inn de egenskapene som vises nedenfor og klikk på OK
Trinn 18
Pass på at ". ButtonMain " er valgt, fokuserer på utseendet panel og legge til en annen fill bruker Legg til ny Fill-knappen. Velg denne nye fyll, dra den i bunnen av Utseende panel, legge den lineære gradient vist i følgende bilde, senke Opacity til 75% og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn en 1px radius, klikk på OK og gå til Effect > Sti > Offset Path. Skriv inn et 6PX Offset, klikk på OK og gå til Effect > Warp > Arc Øvre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Blur > Gaussian Blur. Skriv inn et 5px radius og klikk på OK.
Step 19
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg det første lagt fyll og gå til Effect > Stilisere > Drop Shadow. Tast egenskapene som vises i det øverste vinduet, klikk på OK og gå igjen til Effect > Stilisere > Drop Shadow. Tast egenskapene som vises i det nederste vinduet og klikk på OK
Trinn 20
Pass på at ". ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i det niende trinnet og går til Effect > Stilisere > Drop Shadow. Tast egenskapene som vises i det øverste vinduet, klikk på OK og gå igjen til Effect > Stilisere > Drop Shadow. Tast egenskapene som vises i det nederste vinduet og klikk på OK
Trinn 21
Pass på at ". ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i det syttende trinnet og legge de fire Drop Shadow effekt vist i følgende bilde.
Step 22
Pass på at " ButtonMain " er valgt, fokuserer på utseendet panel og legge til en 1pt, hvit strek. Velg den, justere den til innsiden, senke Opacity til 10% og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 5px radius, klikk på OK og gå til Effect > Warp > Arc Nedre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Warp > Arc Øvre. Skriv inn de egenskapene som vises nedenfor, klikk på OK og gå til Effect > Warp > Utbulning. Tast egenskapene som vises i følgende bilde og klikk på OK. Til slutt, sørg for at dette slag er plassert i toppen av Utseende panel
Trinn 23
Pass på at ". ButtonMain " er valgt, fokuserer på utseendet panel og legge til en andre strøk med Legg til ny Stroke knappen (påpekt av den lille, blå pil). Velg denne nye slag, gjør det 2pt bred, sette farge på svart, dra den under fyllingen lagt i det trettende trinn, senke Opacity til 30% og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 7.5px radius, klikk på OK og gå til Effect > Warp > Arc Øvre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Warp > Utbulning. Skriv inn de egenskapene som vises nedenfor, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Tast egenskapene som vises i følgende bilde (pass på at du sjekker midten, topp referansepunkt) og klikk OK.
Step 24
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg hjerneslag lagt i forrige trinn, og klikk på Duplicate Selected element. Velg dette nylig lagt hjerneslag og redusere størrelsen på 1pt.
Trinn 25
Velg " ButtonMain " og lage en kopi i front (Ctrl + C > Control + F). Velg denne kopien og fokus på utseendet panel. Fjern alle disse fyll og slag, men lagre den tredje fylle (starter tellingen fra bunnen av Utseende panel). Fokus på gjenværende fyll, gjør det rødt og fjern de to Drop Shadow effekter. Flytt til Lag-panelet, dobbeltklikk på denne nye formen og den navnet " ButtonNoise ".
Trinn 26
Pass på at " ButtonNoise " fortsatt er valgt, og fokusere på Utseende panelet. Velg den eksisterende fyll, gjør det svart, senke Opacity til 5%, endre Blending Mode til Multipliser og gå til Effect > Artistic > Film Grain. Tast egenskapene som vises i følgende bilde og klikk på OK
Trinn 27
Pass på at ". ButtonNoise " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg den nylig lagt fyll, gjør det hvitt, heve Opacity til 100%, endre Blending Mode til Soft Light og fjern Film Grain effekt. Hvis du foretrekker mørkere versjon på knappen kan du enkelt skjule denne hvite fyllet ved å klikke på det lille øyet ikonet fra Utseende panel. Nå velger " ButtonMain " og " ButtonNoise " og konsernet dem (Ctrl + G)
Trinn 28
Velg ". ButtonMain " og lage en kopi i front (Ctrl + C > Control + F). Velg denne kopien, dra den over gruppen (i Lag-panelet) og dra den 85px ned. Fokus på utseendet panel, fjerne alle de fyll og slag, men lagre den andre fyll (starter tellingen fra bunnen av Utseende panel). Fokus på gjenværende fyll og fjerne indre glød og de fire Drop Shadow effekt. Flytt til Lag-panelet, dobbeltklikk på denne nye formen og den navnet " ButtonSupport ".
Trinn 29
Pass på at " ButtonSupport " fortsatt er valgt, og fokusere på Utseende panelet. Velg eksisterende fyll og klikk på Duplicate Selected element. Velg dette nylig lagt fyll, fjerne Offset Sti effekt da erstatte den eksisterende lineær gradient med det som vises i bildet nedenfor.
Step 30
Pass på at " ButtonSupport " fortsatt er valgt, og fokusere på Utseende panelet. Velg fyllet legges i forrige trinn, og klikk på Duplicate Selected element. Velg dette nylig lagt fyll, erstatte lineær gradient med radial gradient vist nedenfor, og gå til Effect > Sti Offset banen. Skriv inn et -2px Offsettrykk, og klikk OK. Dra denne effekten under avrundede hjørner effekt så gå til Effect > Stilisere > Indre glød. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Stilisere > Drop Shadow. Skriv inn de egenskapene som vises nedenfor og klikk på OK
Trinn 31
Pass på at ". ButtonMain " er valgt, fokuserer på utseendet panel og legge til en 3pt, svart strek. Velg den, justere den til innsiden, senke Opacity til 10% og gå til Effect > Stilisere > Avrundede hjørner. Skriv inn et 7px radius, klikk på OK og gå til Effect > Sti > Offset Path. Skriv inn et -2px Offset, klikk på OK og gå til Effect > Warp > Arc Øvre. Tast egenskapene som vises i følgende bilde, klikker du på OK og gå til Effect > Warp > Utbulning. Skriv inn de egenskapene som vises nedenfor, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Tast egenskapene som vises i følgende bilde (pass på at du sjekker midten, topp referansepunkt) og klikk OK.
Step 32
Pass på at " ButtonMain " fortsatt er valgt, og fokusere på Utseende panelet. Velg bunnen fyll og legge de fire Drop Shadow effekt vist i følgende bilde.
Step 33
Velg " ButtonSupport ", lage en kopi i front (Ctrl + C > Ctrl + F), velg det og fokusere på utseendet panel. Redd andre fyll og fjerne strøk, og de to andre fyllingene. Velg den rester fyll, gjør det svart, senke Opacity til 5%, endre Blending Mode til Multipliser og gå til Effect > Artistic > Film Grain. Tast egenskapene som vises i følgende bilde og klikk på OK. Velg denne kopien sammen med " ButtonSupport " forme og konsernet dem (Ctrl + G)
Trinn 34
Duplicate de to gruppene som er opprettet så langt (Ctrl + C > Control + F).. Velg disse kopiene, dra dem 80px til høyre og fokus på den øverste linjen. Sjekk midten, venstre referansepunkt og bare skriv 88 i boksen Bredde. Til slutt din gruppe kopiene skal se ut i det andre bildet.
Step 35
Bruke Type Tool (T) legge noen enkle biter av tekst, som vist i følgende bilde og bruke egenskapene som vises nedenfor. Flytt til Lag-panelet og dra disse delene av teksten inne i grupper, mellom " ButtonMain " og " ButtonNoise " former.
Step 36
Velg teksten lagt i forrige trinn, fokus på Utseende panel og bare legge to fyllinger hvor det benyttes Legg til ny Fyll knappen. Velg den øverste fyll og satt sin farge på R = 30, G = 30, B = 30. Flytt til bunnen fyll, velg den, legge den lineære gradient vist nedenfor, og gå til Effect > Sti > Offset Path. Skriv inn en 1px Offsettrykk, og klikk OK.
Step 37
Til slutt, multiplisere gruppene laget så langt og leke litt med ordningen.
Konklusjon
Nå arbeidet er ferdig. Her er hvordan det skal se ut. Du kan enkelt endre farge knappen din hjelp som andre fylle fra " ButtonNoise " form. Bare erstatte den hvite med den fargen du foretrekker. Du kan også prøve en annen Blending Mode eller et høyere /lavere Opacity prosent for at fylle. Det finnes utallige muligheter. Anmeldelser