Pubblicato da: cursao11 | ottobre 3, 2007

Photoshop tutorial. Bottone con effetto Glossy (web 2.0)

Ormai il web 2.0 sta spopolando, corredato da tutti i suoi novi effetti grafici. Di seguio un tutorial per creare un simpatico bottone da aggiungere alle vostre pagine.

Photoshop Tutorials. Cool web 2.0 button.


1.Usiamo lo strumentoRounded Rectangle per creare un rettangolo, per arrotondare gli angoli, specifichiamo un Radius pari a 5px. Il codice del colore usato è: #01a7ea.

Photoshop Tutorials. Cool web 2.0 button.

2. Aggiungiamo il Layer Style, ed in particolare: Inner Shadow

Photoshop Tutorials. Cool web 2.0 button.

3. A questo punto dovreste avere qualcosa del genere:

Photoshop Tutorials. Cool web 2.0 button.

4. Ora creiamo un nuovo layer, e facciamo una selezione, come in figura:

Photoshop Tutorials. Cool web 2.0 button.

5. A questo punto riempiamo la selezione con un gradiente lineare, i cui colori sono: da #3fbbf0 a #9adfff e deselezioniamo (ctrl + d)

Photoshop Tutorials. Cool web 2.0 button.

6. Nella finestra dei layer, click sul thumb del layer che contiene ilrettangolo, quindi andare su Select>Modify>Contract e scegliere 2 come valore. Quindi Select>Inverse, quindi premere il tasto Canc, e deselezionare (ctrl+d).

Photoshop Tutorials. Cool web 2.0 button.

7. Premere Ctrl + T e andare su Edit>Transform>Wrap

Photoshop Tutorials. Cool web 2.0 button.

8. A questo punto aggiungiamo il bordo esterno ( Stroke).

Photoshop Tutorials. Cool web 2.0 button.

9. Dovreste avere qualcosa del genere:

Photoshop Tutorials. Cool web 2.0 button.

10. Aggiungamo del testo usando i font: Myriad Pro 25pt e Semibold.

Photoshop Tutorials. Cool web 2.0 button.

11. Quindi modifichiamo il layer style aggiungendo la Drop Shadow.

Photoshop Tutorials. Cool web 2.0 button.

12. E per concludere aggiungiamo: Gradient Overlay: #ededed to #ffffff

Photoshop Tutorials. Cool web 2.0 button.

13. Abbiamo finito:

Photoshop Tutorials. Cool web 2.0 button.
fonte pscloud.com

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: