Share
I denne Quick Tip lærer du hvordan du oppretter en skalerbar webknapp med Utseendepanelet og Adobe Illustrators 9 Skive Scaling. Denne teknikken er spesielt nyttig for webdesignere som trenger å bruke samme stilknapp med ulike tekstlengder. La oss komme i gang!
Denne opplæringen viser deg hvordan du lager en skalerbar vektorknapp ved hjelp av 9-skala-skalering i Adobe Illustrator CS5. I eksemplet nedenfor vil du se hvordan knappen skaleres med og uten 9-Skala-skalering, du vil legge merke til at den vanlige skaleringen beveger alt i knappbildet. Med 9-Slice kan du angi hvordan bildet skaleres for å lage gjenbrukbare webelementer.
Lag et nytt RGB-dokument av hvilken som helst størrelse. Alternativ + Klikk på tavla med rektangulærverktøyet (M) og tast inn knappens dimensjoner. Fordi knappen vil skaleres Horisontalt, er bredden ikke viktig. Jeg har satt min rektangel til 200px med 60px.
Åpne Utseendepanelet og velg Fx> Stylize> Round Corners, sett hjørneradiusen til 8px, klikk OK.
Legg til en gradient fyll på knappen med følgende farger. Hvis du vil velge din egen, følger du veiledningen nedenfor for en indikasjon på fargenes stilling og nyanse. Du vil legge merke til at farge 2 og 3 er veldig nært, dette er nøkkelen til det superblanke utseendet på gradienten.
Hvis knappen har en linje, slett den. Legg til et annet fyll ut Utseendepanelet og plasser det under gradientlaget. Med Utseendeinnstillinger, gå til Fx> Sti> Offset Path og sett offset til 1px.
Fyll det andre fyllingslaget med en gradient i følgende farger. Igjen kan du gjøre fargene dine egne valg, bare husk å holde lys nyanser nær toppen og den mørke i bunnen.
Legg til en dropshadow under de to fyllene i Utseendepanelet ved å gå til Fx> Stylize> Drop Shadow og angi opaciteten til 60%, X-offset til 0px og Y-offset til 2px. Gjør sløret 3px
Zoom inn i knappen, slik at du kan se linjelinjene du må gjøre i dette trinnet. Del av veien til høyre side av knappen, trekk to 1px linjer ved siden av hverandre. Gjør den første i samme farge som toppen av gradientplanen og den andre linjen i samme farge som bunnen av oversiktsgradienten. Jeg har skrevet fargene i bildet nedenfor som referanse.
Denne delen er for Adobe Illustrator CS5 - Velg knappen og linjene og dra den inn i symbolpaletten. Klikk Aktiver 9-skala-skalering (Dette aktiverer horisontal skalering) og Juster til pikselrutenett (Dette forhindrer at knappen blir sløret på nettsteder). Disse to innstillingene vil gjøre knappen perfekt til bruk på nettet.
Når du lager symbolet, ser du en skjerm som bildet nedenfor. Flytt de stiplede linjene for å markere områdene som ikke skal skaleres. Jeg har plassert de stiplede linjene til siden av området som jeg vil plassere et symbol på, slik at det ikke vil endres hvis jeg endrer lengden på knappen. Dobbeltklikk på tavlaområdet for å gå tilbake til hovedbildet.
Skaler 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.
Legg til litt tekst og symboler på knappene og velg en til å bruke utseendet til. Du kan deretter bruke utseendet til resten av elementene når du er ferdig med innstillingene. Begynn med en gradient fylling. Denne er en enkel mørk til lett gradient. Jeg har skrevet ned fargene jeg har brukt i bildet nedenfor.
Legg til en hvit fyll under gradientlaget i Utseendepanelet og sett det for å flytte 2px Vertikal. Klikk på OK.
Legg til et ytre glød ved å gå til Fx> Stylize> Outer Glow. Sett den til en lys tone i fargene på knappen og uskarpheten til 1px. Dette vil legge til en subtile dis til lagseffekten og få knappen til å se ut som om den er litt glødende.
Legg til et slag til toppen av Utseendeinnstillingene i en mørk mettet tone i knappens farge. Still slaget til 0,5 px.
Test stilen ut på forskjellige symboler og knapper, lagre de to stilene til paletten Grafisk stil. ved å velge objektet med stilen og klikke på knappen Legg til stil nederst på grafiske stiler.
Der har du det. En skalerbar webknapp som er enkel å bruke og gjenbruk. Hvis du vil endre de avrundede hjørnene, kan du klikke tilbake til symbolet og endre utseendet ved å bytte de avrundede hjørner til usynlig. Hvis du vil lage en ny knapp, drar du et knappesymbol fra symbolpaletten. på kunstglasset og kontroll klikk for å navigere til alternativene for å bryte lenken med symbolet. Derfra vil ikke knappen endre de andre symbolene, og du kan redigere den for å være en ny stil. Jeg håper du likte denne tut.
Accentsconagua