Share
I den här Snabbtipset kommer du att lära dig hur du skapar en skalbar webbknapp med Utseendepanelen och Adobe Illustrators 9 Skissningsskalning. Denna teknik är speciellt användbar för webbdesigners som behöver använda samma stilknapp med olika längder av text. Låt oss börja!
Denna handledning visar dig hur man skapar en skalbar vektorknapp med 9-skivning i Adobe Illustrator CS5. I exemplet nedan ser du hur knappen vågar med och utan 9-skifferskalning, så märker du att den vanliga skalan flyttar allt inom knappbilden. Med 9-skiva kan du ange hur bilden skaar för att skapa återanvändbara webelement.
Skapa ett nytt RGB-dokument av alla storlekar. Alternativ + Klicka på tavlan med rektangelverktyget (M) och ange knappens mått. Eftersom knappen blir skalbar Horisontellt är bredden inte viktig. Jag har satt min rektangel till 200px med 60px.
Öppna Utseendepanelen och välj Fx> Stylize> Round Corners, ställ in hörnradiusen till 8px, klicka på OK.
Lägg till en gradient fyllning till knappen med följande färger. Om du vill välja din egen, följ instruktionerna nedan för en indikation på färgernas position och färg. Du kommer märka att färgen 2 och 3 är mycket nära, det här är nyckeln till det snygga utseendet på lutningen.
Om din knapp har en rad, radera den. Lägg till en annan fyllning i Utseendepanelen och placera den under gradientlagret. Med Utseende Inställningar, gå till Fx> Sti> Förskjutningsväg och ställ in offset till 1px.
Fyll det andra fyllskiktet med en gradient i följande färger. Återigen kan du göra färgerna ditt eget val, kom ihåg att behålla ljus nyanser nära toppen och den mörka längst ner.
Lägg till en dropskugga under de två fyllningarna i Utseendepanelen genom att gå till Fx> Stylize> Drop Shadow och ställ in opaciteten till 60%, X-offset till 0px och Y-offset till 2px. Gör Blur 3px
Zooma in i knappen så att du kan se linjerna som du behöver göra i det här steget. En del av vägen till höger om knappen, rita två 1px linjer bredvid varandra. Gör den första i samma färg som toppen av gradienten och andra raden i samma färg som botten av konturgradienten. Jag har skrivit färgnumren i följande bild för referens.
Den här delen är för Adobe Illustrator CS5 - Välj knappen och raderna och dra den till Symbolpaletten. Klicka på Enable 9-Slice Scaling (Detta gör det möjligt för horisontell skalning) och Justera till pixelnätet (Detta hindrar knappen från att bli suddig på webbplatser). Dessa två inställningar gör knappen perfekt för webbanvändning.
När du skapar symbolen ser du en skärm som bilden nedan. Flytta de streckade linjerna för att markera de områden som inte ska skalas. Jag har placerat de streckade linjerna på sidan av området som jag vill placera en symbol, så att det inte kommer att ändras om jag ändrar knappens längd. Dubbelklicka på kartongen om du vill gå tillbaka till huvudbilden.
Skala knapparna för att testa de områden du har markerat. Om du behöver göra några ändringar dubbelklickar du på symbolen för att gå tillbaka till inställningarna.
Lägg till lite text och symboler på knapparna och välj en för att applicera utseendet på. Du kan sedan tillämpa utseendet på resten av objekten när du är klar med inställningarna. Börja med en gradient fyllning. Den här är en enkel mörk till ljusgradient. Jag har skrivit ned de färger jag har använt i bilden nedan.
Lägg till en vit fyllning under gradientlagret i Utseendepanelen och ställ det för att flytta 2px Vertikal. Klicka på OK.
Lägg till ett yttre glöd genom att gå till Fx> Stylize> Outer Glow. Ställ den på en ljus ton av färgerna på knappen och sudd mot 1px. Detta kommer att lägga till en subtila dis till lagseffekten och få knappen att se ut som om den är lite glödande.
Lägg till en stroke överst i Utseendeinställningarna i en mörk mättad ton i knappfärgen. Ställ stroke på 0.5px.
Testa stilen ut på olika symboler och knappar, spara de två stilarna till paletten Graphic Styles. genom att välja objektet med stilen och klicka på knappen Lägg till stil längst ned i grafiska format.
Där har du det. En skalbar webknapp som är lätt att använda och återanvända. Om du vill ändra de avrundade hörnen kan du klicka tillbaka till symbolen och ändra utseendet genom att byta de avrundade hörnen till osynliga. Om du vill skapa en ny knapp drar du en knappsymbol från symbolpaletten. på tavlan och Control Klicka för att navigera till alternativen för att bryta länken med symbolen. Därifrån ändras inte de andra symbolerna och du kan redigera den för att vara en ny stil. Jag hoppas att du njöt av denna tut.
Accentsconagua