Quick Tips: Hvordan lage en Ultra Glossy Scalable Web Button med 9-Slice Scaling
Dette innlegget er en del av en serie kalt Web og grensesnittdesign Med Vector.Quick Tip hvordan lage en oppsiktsvekk Last Button i Adobe IllustratorAdobe Illustrator rolle i en web design arbeidsflyt

i denne hurtig Tips, vil du lære hvordan du kan lage en skalerbar web knappen med Utseende Panel og Adobe Illustrator er 9 Slice skalering. Denne teknikken er spesielt nyttig for webdesignere som trenger å bruke samme stil knappen med ulike lengder av tekst. La oss komme i gang!

Innledning

Denne veiledningen vil vise deg hvordan du oppretter en skalerbar vektor knapp med 9-Slice skalering i Adobe Illustrator CS5. I eksempelet nedenfor ser du hvordan knappen skalerer med og uten 9-Slice skalering, vil du legge merke til at den vanlige skalering flytter alt innen knappbildet. Med 9-Slice kan du angi hvordan bildet skaleres for å lage gjenbrukbare web-elementer.

Trinn 1

Lag ny RGB dokument i alle størrelser. Tilvalg + klikk på artboard med rektangelverktøyet (M) og skriv inn knappen dimensjoner. Fordi knappen vil være skalerbar Horisontalt er bredden ikke viktig. Jeg har satt min rektangel til 200px ved 60px

Trinn 2

Åpne Utseende Panel og velg Fx >.; Stylize > Runde hjørner, sett hjrneradius til 8PX, klikk på OK.

Trinn 3

Legg til en gradient fyll opp til knappen med følgende farger. Hvis du ønsker å velge din egen, følg veiledningen nedenfor for angivelse av posisjon og skyggen av farger. Du vil merke at fargen 2 og 3 er svært nær, er dette nøkkelen til super glossy utseende på graderingen.

Trinn 4

Hvis knappen har en linje, slette den. Legg til en annen fyll i Utseende Panel og plasser den under graderingen lag. Med Innstillinger for utseende, gå til Fx > Sti > Offset Sti og sette forskyvningen til 1PX.

Trinn 5

Fyll andre fyll lag med en gradient i følgende farger. Igjen, kan du gjøre fargene dine egne valg, bare husk å holde lyse nyanser nær toppen og den mørke nederst.

Trinn 6

Legg til en Skygge under to fyller ut Utseende Panel ved å gå til Fx > Stylize > Skygge og sett opacity til 60%, X utlignet til 0px og Y utlignet til 2 piksler. Gjør Blur 3px

Trinn 7

Zoom inn på knappen slik at du kan se linjene linjene du trenger å gjøre i dette trinnet. En del av veien inn i høyre side av knappen, tegne to 1px linjer ved siden av hverandre. Gjør den første i samme farge som toppen av gradient disposisjon og den andre linjen i samme farge som bunnen av omrisset gradient. Jeg har skrevet fargenumrene i følgende bilde for referanse

Trinn 8

Denne delen er for Adobe Illustrator CS5 -. Velg knappen og linjene og dra den inn på Symboler paletten. Klikk Aktiver 9-Slice Scaling (Dette vil gjøre det mulig horisontal skalering) og Juster være Pixel Grid (Dette vil stoppe knappen fra rende uskarpt på nettsider). Disse to innstillingene vil gjøre knappen perfekt for web bruk.

Når du oppretter Symbol, vil du se et skjermbilde som bildet nedenfor. Flytt de stiplede linjer for å markere ut de områdene som ikke skal skaleres. Jeg har plassert de stiplede linjene på siden av det området som jeg ønsker å plassere et symbol, vil dette sikre at det ikke vil endre seg dersom jeg endre lengden på knappen. Dobbelklikk på artboard området for å gå tilbake til hovedbildet.

Skala knappene for å teste de områdene du har merket ut. Hvis du trenger å gjøre noen endringer, dobbeltklikker du på symbolet for å gå tilbake til innstillingene.

Trinn 9

Legg til litt tekst og symboler til knappene og valgte en å bruke utseendet til. Du kan deretter bruke utseendet til resten av elementene når du er ferdig med innstillingene. Start med en gradient fyll. Dette er en enkel mørk til lys gradient. Jeg har skrevet ned de fargene jeg har brukt på bildet nedenfor.

Trinn 10

Legg et hvitt fyll under gradient lag i Utseende Panel og sette den til å flytte 2 piksler vertikalt. Klikk på OK

Trinn 11

Legg til en Ytre glød ved å gå til Fx >.; Stylize > Ytre glød. Sett den til en lys tone av fargene på knappen og blur til 1px. Dette vil legge til en subtil dis til laget effekt og gjøre knappen ser ut som det er litt glødende.

Trinn 12

Legg et strøk til toppen av Innstillinger for utseende i en mørk de mettet tone på knappen farge. Sett strek til 0.5px.

Trinn 13

Test stil ut på rekke symboler og knapper, uten de to stilene til de grafiske stiler palett. ved å velge objektet med stil og klikke på Legg Stil-knappen nederst i grafikk Styles.

Konklusjon

Det du har det. En skalerbar web-knapp som er enkel å bruke og gjenbruk. Hvis du ønsker å endre avrundede hjørner kan du klikke tilbake i symbol og endre utseendet ved å veksle de avrundede hjørner til usynlig. Hvis du ønsker å lage en ny knapp, dra en knappen symbol fra Symboler Palette. på artboard and Control Klikk for å navigere til alternativene for å bryte koblingen med Symbol. Derfra vil knappen ikke endre andre symboler, og du kan redigere det å være en ny stil. Jeg håper du likte denne tut.