Quick Tips: Hvordan lage en enkel Web Button Sett Bruke Utseende Panel
Dette innlegget er en del av en serie kalt Web og grensesnittdesign Med Vector.SVG Files: fra Illustrator til WebQuick Tips: hvordan lage en enkel Register Form design
i det følgende opplæringen vil du lære hvordan du kan lage dine egne web knapper satt. Først bruker rektangelverktøyet sammen med noen Pathfinder og forskyvning pluss en Avrundede hjørner effekten du vil skape de tre starter former. Deretter vil en lineær gradient pluss noen filmkorn og Drop Shadow effekter fullføre helhets knappen. Til slutt, vil litt tekst og en ny Drop Shadow effekt hjelpe deg fullføre arbeidet. La oss komme i gang!
Trinn 1
Velg den rektangelverktøyet (M) og klikk på artboard. Skriv inn 93 i boksen Bredde og 32 i høyden boksen og klikk deretter på OK. Dette vil skape en 93 ved 32px form. Fyll den med R = 0 G = 182 B = 241 og deretter gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 17px radius klikk deretter på OK.
Nå bør figuren din ser ut som bildet nedenfor. Velg den og trykke Ctrl + C og trykk Ctrl + F. Dette vil legge en kopi i front. Ta en rask titt i Lag-panelet (Vindu > Layers) og sørg for at du har de to figurer skapt så langt
Trinn 2
Velg kopien gjort i forrige trinn og. gå til Object > Utvid Utseende. Velg den resulterende form og gå til Object > Sti > Offset Path. Skriv inn et -1px Offset klikk deretter OK. Fyll den resulterende form med hvit så velg på nytt utvidet, blå form og slette den.
Trinn 3
Gå til Rediger > Innstillinger > Generelt og skriv 0.5 i Tastatur verdiboksen. Velg det hvite formen og lage en kopi i front (Ctrl + C > Control + F). Velg denne ny kopi og traff pil ned én gang (for å flytte den 0.5px ned). Reselect både former og klikk på Minus Front knappen fra Pathfinder-panelet. Den resulterende formen skal se ut som det tredje bildet nedenfor.
Trinn 4
Gå tilbake til blå form. Først erstatte den flate blå med lineær gradient vist nedenfor deretter legge til en 1pt slag. Juster det til inne, sette sin farge på R = 0 G = 149 B = 218 så sørg for at den avrundede hjørner effekten er i toppen av Utseende panelet som vist i følgende bilde.
Trinn 5
Velg det avrundet rektangel og gå til Utseende panel. Åpne fly-out menyen og klikk på Legg til ny Fill. Selvfølgelig vil dette legge en annen fylling for formen. Velg det fra Utseende panel og gjøre det svart da senke opacity til 2% og gå til Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor og klikk deretter på OK.
Trinn 6
Legg til en tredje fyll for din avrundet rektangel. Velg det fra Utseende panel, senke opacity til 10% og deretter bruke lineær gradient vist i følgende bilde. De gule tall fra gradient bilde stå for opasitet prosent mens de hvite tallene står for plassering prosentandel. Dette betyr at du må velge hver gradient glidebryteren og angi plasseringen /opacity prosenten som vist nedenfor. Betale ekstra oppmerksomhet til den midtre delen av graderingen. Du bør ha to overlappende skyveknapper. Man har tettheten satt til 0% og plasseringen på 50%, mens den andre har tettheten satt til 100% og plasseringen på 50%.
Trinn 7
Velg det avrundet rektangel og gå til Utseende panel. Velg bunnfyllings (den med den lineære gradient) og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk deretter på OK.
Trinn 8
Til slutt legger litt hvit tekst. Bruk Calibri skrift med en størrelse på 15px deretter gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk deretter på OK. For den pressede versjonen på knappen kan du sette stil på Fet og sporings sett på 50. Det skal se ut som det andre bildet nedenfor.
Trinn 9
Noen av dere kanskje ikke liker den pixilated utseendet på skygge effekt. Her er hvordan du kan forbedre det. Gå til Effect > Dokumentrastereffektinnstillinger. Som standard oppløsninger bør settes til 72 ppi. Sett den til en høyere verdi, og klikk OK. Velg 300ppi og knappe vil se glatt ut følgende bilde.
Trinn 10
Her er noen andre farger som du kan bruke til knappen. I det følgende bilde kan du finne fargeegenskapene som du må erstatte. Den lineære gradient er for avrundet rektangel mens flat farge er for hjerneslag og skygge effekt brukt på teksten. Selvsagt kan du legge til ditt eget sett med farger. Det finnes utallige muligheter.
Trinn 11
Til slutt, her er hvordan du kan lage den mønstret bakgrunn fra det endelige bildet. Plukk rektangel Tool (M), opprette en figur med den størrelsen på artborad og fyll den med R = 241 G = 242 B = 242. Sørg for at denne nye formen er valgt, gå til Utseende panel og legge til en annen fylling. Du trenger en innebygd mønster for denne nye fyll. Du kan finne det gjennom fly-out menyen i fargekartpanelet. Bare gå til Open Swatch Library > Patterns > Grunnleggende Grafikk > Grunnleggende Graphics_Textures og et nytt vindu med en haug med fint mønster vil åpne.
Se etter " Diamond " mønster (første rad, kolonne ti). Reselektere den andre fyll, tilsett Diamond mønster, senke opacity til 7% og gå til Effect > Kunstnerisk > Film Grain. Legg inn dataene som vises i det endelige bildet, og klikk på OK.
Trinn 12
Velg det formen opprettet i forrige trinn, og legge til en tredje fyll. Velg det fra Utseende panelet, endre blending mode til Multipliser og bruke radial gradient vist nedenfor.
Konklusjon
Nå knappene satt er gjort. Her er hvordan det skal se ut. Jeg håper du har hatt glede av denne tut.