Kuva 1. Web 2.0 -tyylinen lasinen nappi.
01.11.2007 Kategoria: Photoshop
Nykyään lasiset napit näyttävät olevan hyvin suosittuja. Lasisia nappeja voi löytää Windows Vistasta ja joka puolelta Webistä. Muita suosittuja nappeja ovat metalliset ja muoviset napit. Kaikilla näillä napeilla on yksi asia yhteistä: Ne ovat kaikki kiiltäviä. Jotkut kutsuvat tällaisia nappeja Web 2.0 napeiksi. Käyn tässä läpi kahden erilainen lasisen napin tekemisen Adobe Photoshop CS3:ssa. Molemmat lasiset napit käyttävät samoja periaatteita. Kun olet käynyt tämän tutoriaalin läpi, sinun pitäisi pystyä soveltamaan samoja periaatteita ja luomaan monia erilaisia lasisia nappeja. Annan tässä tutoriaalissa tarkat mitat ja arvot tehdäkseni tästä helpompaa, mutta kokeile ihmeessä myös muita arvoja.
Kuva 2. Luo musta perusnappi uudelle tasolle.
Luo uusi kuva, jonka koko on 400 x 180 pikseliä. Luo uusi tyhjä taso. Aktivoi Rounded Rectangle Tool ja aseta Options-paneelista Radius-arvoksi 10 px. Valitse musta väri ja luo pyöristetty laatikko (140 x 50 pikseliä) uudelle tasolle kuvan 2 mukaisesti. (Piirrettäessä laatikon koko näkyy Info-paneelissa.) Ehkä kaikkein yleisin tapa luoda lasinen nappi Adobe Photohopissa on tasoefektien käyttäminen. Seuraavaksi lisäämme nappiin useita erilaisia tasoefektejä tehdäksemme siitä mielenkiintoisemman:
Kuva 3. Gradient Overlay asetukset Photoshopissa.
Klikkaa hiiren oikeaa nappia uuden tason päällä Layers-paneelissa ja valitse valikosta Blending Options.... Laita Gradient Overlay päälle. Muuta liukuvärin oikean reunan väri 50% harmaaksi (#808080) kuvan 3 mukaisesti.
Kuva 4. Inner Glow asetukset Adobe Photoshopissa.
Laita Inner Glow päälle. Muuta hohdon väri puhtaan valkoiseksi. Aseta Opacity-arvoksi 40%. Aseta Size-arvoksi 8 pikseliä. Napin pitäisi nyt näyttää samalta kuin kuvassa 4.
Kuva 5. Stroke asetukset.
Laita Stroke päälle. Muuta Size-arvoksi 1 pikseli ja väriksi 50% harmaa (#808080). Napin pitäisi nyt näyttää samalta kuin kuvassa 5.
Kuva 6. Drop Shadow asetukset.
Laita Drop Shadow päälle. Muuta Distance-arvoksi 0 pikseliä ja Size-arvoksi 8 pikseliä. Lasisen napin pitäisi nyt näyttää samalta kuin kuvassa 6. Klikkaa OK sulkeaksesi dialogin.
Kuva 7. Napin teksti.
Luo Button-teksti Type Tool työkalulla. Valitse tekstille valkoinen väri ja luo sille yhden pikselin paksuinen musta Stroke. Keskitä teksti napin keskelle. Lasisen napin pitäisi nyt näyttää samalta kuin kuvassa 7.
Kuva 8. Valkoisesta pyöristetystä suorakaiteesta tulee kiilto.
Kuva 9. Valmis lasinen nappi Adobe Photoshopissa.
Lasista nappia tehtäessä kiilto (valonlähteen heijastuminen) on kaikkein tärkein elementti.
Luo uusi tyhjä taso tekstitason päälle. Valitse valkoinen väri ja luo uusi pyöristetty laatikko (136 x 23 pikseliä) uudelle tasolle kuvan 8 mukaisesti. Klikkaa hiiren oikeaa nappia uuden tason päällä Layers-paneelissa ja valitse valikosta Blending Options.... Laita "Blend Interior Effects as Group" päälle. Laita Gradient Overlay päälle. Aseta liukuvärin vasemman reunan väriksi 25% harmaa (#404040) kuvan 9 mukaisesti. Klikkaa OK sulkeaksesi dialogin.
Vaihda uuden tason Blending modeksi Screen ja Opacity-arvoksi 90%. Nyt lasinen nappi on valmis ja sen pitäisi näyttää samalta kuin kuvassa 9.
Tämä on mustavalkoinen lasinen nappi, mutta samalla tekniikalla voisit tehdä minkä värisen lasinapin tahansa.
Osa 2: Lasinen helmi Photoshopissa
Näe lasiset napit käytännössä.www. filmgator.com -sivuston lasiset napit on tehty tämän tutoriaalin mukaisesti
Lasinen nappi muualla: