EN | FI

Photoshop-tutoriaali

Second Picture on omistettu alkuperäisille tutoriaaleille 3D-grafiikasta, Photoshopista, valokuvauksesta ja WWW-suunnittelusta.

Lasinen nappi Photoshopissa

web 2.0 painike

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.

Suorakaiteen muotoinen lasinappi

Musta suorakaiteen muotoinen nappi, jossa on pyöristetyt kulmat

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:

Gradient Overlay

Gradient Overlay suorakaiteen muotoisessa napissa

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.

Inner Glow

Inner Glow Adobe Photoshopin Sekoitusasetuksissa

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.

Stroke

Stroke asetukset Adobe Photoshopin Sekoitusasetuksissa

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.

Drop Shadow

Heittovarjoefekti

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.

Napin teksti

Teksti napissa

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.

Kiilto / Heijastus

Lasisen napin kiilto

Kuva 8. Valkoisesta pyöristetystä suorakaiteesta tulee kiilto.

Lasinen nappi, joka on tehty Adobe Photoshop CS3:ssa

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: