Úvodná » photoshop » Photoshop Vytvoriť tlačidlo Web 2.0

    Photoshop Vytvoriť tlačidlo Web 2.0

    Tlačidlá Photoshop tutoriály sú pravdepodobne jednou z najhorúcejších kategórií v každej lokalite tutoriálov Photoshopu a keďže Web 2.0 je takou horúcou témou, dovoľte si urobiť jednoduché tlačidlo vhodné pre akúkoľvek webovú aplikáciu webových stránok. Tutorial po skoku.

    Vytvorte prázdne plátno s rozmermi približne 500 pixlov (šírka) x 400 pixlov (výška), čím začnete s návrhom tlačidla. Vytvorte nový hovor vrstvy "bg01'. Vyberte položku Zaoblený pravouhlý nástroj, podržte klávesovú skratku SHIFT a nakreslite zaoblené okraje v strede. V súčasnej fáze je akákoľvek farebnosť.

    Vyvolajte Blending Options z "bg01'a upravte tieto štýly:

    Vrhať tieň

    • Neprístupnosť: 40%
    • Vzdialenosť: 0px
    • Spread: 0%
    • Veľkosť: 6px

    Gradient Overlay

    • Zastavenie farieb: 0%, # d00031
    • Farba zastavenia: 100%, # ff2b5d

    Podržte CTRL, ľavým tlačidlom myši kliknite na "bg01'Thumbnail Layer pre výber jeho tvaru. ísť vybrať -> pozmeniť -> zmluva a zadajte hodnotu "2px'. Tým sa zmenší vybraná oblasť o 2 pixely.

    Vytvorte nový hovor vrstvy "bg02'a vyplnil zvýraznený (po zmenšení) oblasť s ľubovoľnou farbou. Používam tu # 000000 čierne. Dvakrát kliknite na 'bg02' a spustite Možnosť miešania a vyladiť nasledujúci štýl.

    Gradient Overlay

    • Zastavenie farieb: 0%, # c6002f
    • Farba zastavenia: 100%, # c6002f

    Vytvorte novú novú vrstvu pre text,TXT'. Vložte text tlačidla. Použijem abecedu, ktorú budem zastupovať. Štýly písma, ktoré používam tu, sú nasledovné:

    • Zaoblené Arial tučné
    • 150pt

    Rovnako, po rozhodovaní vášho textu dvakrát kliknite na txt a spustíte ho Blending Options a vyladiť nasledujúce štýly.

    Vrhať tieň

    • Neprístupnosť: 25%
    • Vzdialenosť: 0px
    • Rozloženie: 0px
    • Veľkosť: 5px

    Vnútorný tieň

    • Opacita: 10%
    • Vzdialenosť: 0px
    • Tlmivka: 0
    • Veľkosť: 10px

    Bevel Emboss

    • Hĺbka: 1px
    • Smer: dole
    • Veľkosť: 0px
    • Softten: 0px
    • Režim zvýraznenia: 32%
    • Režim tieňového režimu: 32%

    Gradient Overlay

    • Farba Stop: 0% # d2d2d2
    • Farba Stop: 100% # f0efef

    Tlačidlo je takmer hotovo. Dajme to trochu žiaru nad hornou časťou. vydržať CTRL, ľavý klik 'bg02'Miniatúra vrstvy na zvýraznenie vonkajšieho tvaru; zvoliť Nástroj Eclipse Marquee. Teraz podržte ALT, pomocou nástroja Eclipse Marquee Tool (Vybrať nástroj Eclipse Marquee Tool), presuňte sa smerom do dolnej polovice zvýraznenej oblasti. Pozrite si obrázok vyššie.

    Ak je zvýraznená horná časť a nástroj Eclipse Marquee Tool je stále vybraný, kliknite pravým tlačidlom a vyberte perie; vstúpiť 15px pre polomer.

    Vytvorte novú vrstvu,žiara'a zvýraznite zvýraznený diel bielym [#ffffff]. To by malo pridať žiarivý efekt na hornú časť vášho tlačidla. Konečný produkt by mal vyzerať podobne ako obrázok nižšie.

    Stiahnite si výučbu

    Niečo navyše ...

    Zmieňajte možnosti miešania "bg01"a"bg02"vám poskytne viac zaujímavých tlačidiel. Tu je ďalší návod pre Photoshop na tlačidle, ktoré som urobil predtým - Vytvoriť lesklé tlačidlo pre Web 2.0

    Stiahnite si vzorku