Cum sa faci un buton Web 2.0 in Photoshop

October 26, 2009 by Catalin B.
No Comments

Evolutia grafica a aspectului si a imaginilor din paginilor Web din ultimii ani, a condus la definirea stilului Web 2.0. Acesta este caracterizat de:
– tonuri intense pentru culori, ce atrag atentia asupra simbolului  sau elementului respectiv;
– aplicarea efectelor de stralucire, reliefare, reflectie sau oglindire pentru a adauga detalii vizuale .
si este utilizat pentru a crea o imagine “cool” pentru logo-ul site-ului sau diferite elemente (butoane, meniuri, badge-uri) din acesta.
Exemplul pentru butonul Web 2.0 prezentat este realizat in Adobe Photoshop CS4  sau CS3.1. Se adauga un layer nou, numit Buton (dublu click pe numele layer-ului pentru a-l redenumi), pentru a separa elementul de background.

Add new layer
Add new layer

2. Pentru forma butonului se alege un dreptunghi cu colturi rotunjite. Acesta este desenat pe layer-ul Buton , ce a fost adaugat la pasul anterior. Inainte de a desena forma butonului se fac si setari cu privire la tipul formei (NU vrem o masca) si marimea unghiului pentru colturi. Pentru acest exemplu valoarea unghiurilor se stabileste a 15 grade.

Rounded Rectangle
Round rectangle options

3. Pentru a realiza un efect pe marginea interioara a butonului se face o selectie a acestuia prin intermediul layer-elor. Tinand apasata tasta Ctrl se selecteaza forma layer-ului Buton. Se obtine selectia formei butonului.

Select button shape
Select button shape

4. Selectia este modificata prin reducerea dimensiunii ei. Din meniu se alege Select -> Modify -> Contract. Selectia este micsorata catre interior cu 5 pixeli.

Selection options
Selection options

5. Selectia este copiata intr-un nou layer prin copy (Ctrl + C sau Edit->Copy din meniu) si paste (Ctrl + V sau Edit->Paste din meniu). Noul layer este denumit Interior.
6. Se selecteaza layer-ul creat la pasul anterior, Interior, si se aplica un efect de tip Stroke.

Stroke effect
Stroke effect

Optiunile pentru efectul de tip Stroke sunt: Size: 2 px, Color: Alb, Blend Mode: Normal, Opacity: 70 %

Stroke effect options
Stroke effect options

7. Tot pe layer-ul numit Interior se aplica un efect de tip Gradient Overlay intre nuantele #052a61 (albastru inchis) si #2c77e7 (albastru deschis)

Gradient effect options
Gradient effect options

8. Pentru a genera efectul de spot de lumina asupra butonului, se face o selctie de tip elipsa asupra layer-ului Interior utilizand Elliptical Marquee Tool

Elliptical marquee
Elliptical marquee

Selectia se face astfel incat sa cuprinda doar o parte din buton.

Button ellipse selection
Button ellipse selection

9. Selectia se copiaza intr-un nou layer prin copy (Ctrl + C sau Edit->Copy) si paste (Ctrl + V sau Edit->Paste). Noul layer este denumit Light. Daca la copierea selectiei, aceasta este desincronizata ca pozitie, se rearanjeaza utilizand Move tool.

Buton Web 2.0
Buton Web 2.0

10 Pe ultimul layer creat, Light, se aplica un efect de tip Color Overlay cu setarile Blend Mode: Soft Light, Color: Alb, Opacity: 65%

Color overlay effect

11. Se mai adauga un layer pentru textul de pe buton. Utilizand Horizontal Type Tool (din toolbar) se adauga textul click me folosind Font: Lucinda Sans, Stil: Demibold Roman, Size: 72

12 Pe layer-ul cu textul click me se adauga efectul Drop Shadow ( fata de setarile implicite am ales Opacity: 45%) si Outer Glow cu setarile Opacity: 25%, Size: 51px, Color: Alb.

Drop shadow effect
Drop shadow effect
Outer glow effect
Outer glow effect

13 Pentru a accentua butonul, pe layer-ul initial, numit Buton, se pune un effect de tip Bevel and Emboss.

Emboss effect
Emboss effect

14 Butonul Web 2.0 obtinut este

Web 2.0 Button
Web 2.0 Button

15 Prin modificarea formei butonului, tehnica prezentata va permite realizarea de badge-uri sau alte tipuri de simboluri Web 2.0

Sursa proiectului este disponibila aici

Alte resurse:
• documentatie Adobe Photoshop CS3 http://livedocs.adobe.com/en_US/Photoshop/10.0/

Tags: ,