Ett användarvänligt gränssnitt, väl ritad grafik, rätt ordning av element på sidan - hälften av webbplatsens framgång med besökaren. Att rita knappar för en webbplats är en liten men viktig del av arbetet med ett onlineprojekt.
Instruktioner
Steg 1
Försök att rita en rund knapp. Metoden nedan är också universell för att skapa logotyper och avatarer. Att rita det är inte svårt, trots antalet åtgärder som du måste utföra.
Steg 2
Öppna Adobe Photoshop. Skapa ett nytt dokument genom att trycka på kombinationen "Ctrl + N". Bildparametrar 300 * 300, upplösning 72 ppi. Standardbakgrunds- och färgläget är vitt respektive RGB.
Steg 3
Det är bäst att rita med vektorer så att kvaliteten inte försämras när knappen minskas. Välj det ovala verktyget, håll ned Skift och rita en cirkel från mitten.
Steg 4
Använd nu några effekter på den resulterande cirkeln. Gå till menyn "Lager" - "Skiktstil" - "Blandningsalternativ". Här måste du använda en lutning.
Steg 5
Därefter markerar du rutan bredvid "Embossing" för att ge knappen den nödvändiga utbuktningen och ställer in följande parametrar: stil - konturprägling, metod - soft cut, djup - 220%, storlek - 1 pixel, mjukning - 5 pixlar, vinkel - 135 ° utan global belysning, höjd - 32, markeringsläge - normalt med 30% opacitet, skuggläge - multiplicera med 25% opacitet
Steg 6
För att ge ännu mer volym, här i blandningsparametrarna, kryssa i rutan "Skugga" och ställ in följande parametrar: blandningsläge - multiplikation, transparens - 40%, vinkel - 125o med global belysning, förskjutning - 5 pixlar, storlek - 20 pixlar.
Steg 7
Resultatet av de utförda åtgärderna blir en sådan bild som visas i figuren.
Steg 8
Skapa nu ett nytt lager, välj "Oval" igen och rita en cirkel med en mindre radie än den första formen. Öppna "Blandningsalternativ", markera rutan bredvid "Inre skugga" och ställ in parametrarna: Blandningsläge - Mjukt ljus, Vinkel - 125o, Offset - 0px, Krymp - 45%, Storlek - 21px.
Steg 9
Därefter, här i blandningsalternativen, kryssa i "Gradient overlay" och skapa en lutning med parametrarna som på bilden. Klicka på OK
Steg 10
Därefter ställer du in blandningsstil till radiell, skala till 124%
Steg 11
Markera nu rutan "Stroke" och ställ in följande parametrar: storlek - 5 pixlar, position - utanför, blandningsläge - normal, opacitet - 100%, stroke typ - lutning.
Steg 12
Som ett resultat av dessa åtgärder bör du få något som ser mer ut som en knapp. Du kan öppna blandningsalternativen igen och experimentera med dem.
Steg 13
Nu måste vi lägga till höjdpunkterna så att knappen får en glasstruktur. För att göra detta skapar du ett nytt lager igen, väljer verktyget Oval Selection, skapar en oval ovanför knappen och fyller det med vitt med hjälp av Fill-verktyget. Håll Ctrl, klicka på lagret med den färgade cirkeln, invertera markeringen ("Selection" - "Inversion"). Tryck nu på Radera. Den ovala ska trimmas runt cirkelns omkrets.
Steg 14
Ändra alternativet Normal till Mjukt ljus på panelen Lager, klicka sedan på vektormaskikonen och välj Fill Tool - Gradient. Fyll höjdpunkten från botten till toppen. Knappen är nästan klar.
Steg 15
Du kan lägga till en inskription på knappen. Du kan också använda blandningseffekter på den, som inre, yttre glöd, lutning och så vidare. Var inte rädd för att experimentera, ju mer fantasi du använder i ditt arbete, desto snabbare kommer du att bemästra både redaktören själv och webbdesign.
