Creare un bottone gommoso 2.0

Posted by: Nicola on: febbraio 14, 2008

• In: Tutorial | Video
• 5 Comments

Il blog AfterFuture ormai ha effettuato il suo “rodaggio” della prima settimana, quindi ora mi sembra una buona idea iniziare ad inserire delle rubriche settimanali e stabili. Così ho pensato che il mercoledì può essere dedicato alla grafica, in particolar modo all’utilizzo di PhotoShop!

Se non hai Photoshop, questo è il link per poterlo scaricare gratis (è una versione trial di 30 giorni): clicca qui!

Oggi vediamo come creare un pulsante/bottone gommoso in stile 2.0, ecco quale sarà il risultato del tutorial:

1 – Creiamo un nuovo progetto con le dimensioni, larghezza 200px e altezza 50px e sfondo trasparente:

2 – Selezioniamo lo Strumento Secchiello (tasto rapido G), e dopo aver selezionato come colore #6aa3cf, riempiamo lo sfondo e rinominiamo il livello “Sfondo” (questo ci serve per poter far risaltare maggiormente le ombre con cui lavoreremo dopo):

3 – Creiamo un nuovo livello, rinominandolo “Bottone”. Selezioniamo lo Strumento Rettangolo Arrotondato (tasto rapido U), inserendo nella barra superiore raggio 5px e il colore #2a425f. Disegnamo un rettangolo di queste dimensioni:

4 – Selezioniamo il livello “Bottone” e clicchiamo col tasto destro. Selezioniamo “Opzioni Fusione” e modifichiamo lo stile del nostro rettangolo arrotondato:

4a – Ombra Esterna:

4b – Bagliore Interno:

 

4c – Sovrapposizione Colore:

 

4d – Sovrapposizione Sfumatura:

La cui sfumatura è composta da due colori, ecco qui quali:

4e – Traccia:

 

Questo è il risultato dopo aver modificato le opzioni di fusione:

 

5 – Ora che abbiamo realizzato la base del bottone, dobbiamo inserirne il contenuto. Creiamo un nuovo livello, rinominandolo “Forma”. Selezioniamo lo Strumento Forma Personale e successivamente la forma che desideriamo (in questo caso io ho scelto la nuvoletta):

Selezioniamo il colore #a1c9f7 e disegnamo la forma, posizioniandola alla sinistra sul pulsante in modo che si ottenga come risultato:

6 – Selezioniamo il livello “Forma”, clicchiamoci sopra col tasto destro e selezioniamo “Opzioni Fusione” e modifichiamo lo stile della forma da noi disegnata:

6a – Bagliore Esterno:

6b – Bagliore Interno:

Ecco il risultato dopo aver modificato le opzioni di fusione:

7 – Ora è il momento di scrivere il testo sul nostro pulsante, selezioniamo lo Strumento Testo Orizzontale, settiamo il font Verdena, dimensione 9pt, anti alias Preciso e il colore bianco (#ffffff):

Scriviamo il testo, nel caso di questo tutorial ho scritto “Send us an email Today!” con questo risultato:

8 – Ora selezioniamo il livello del testo, clicchiamo col tasto destro e operiamo sulle Opzioni Fusione in modo da inserire un’Ombra Esterna con queste caratteristiche:

Questo è il risultato dopo aver aggiunto l’ombra al testo:

9 – Clicchiamo col tasto CTRL + tasto sinistro del mouse, il livello “Bottone” così da selezionare tutto il rettangolo arrotondato:

Dopodichè selezioniamo lo strumento Strumento Selezione Ellittica, e tenendo premuto il tasto ALT, andiamo a togliere una parte della selezione precedente, in modo tale da ottenere una selezione di questo tipo:

10 – Creiamo un nuovo livello chiamandolo “Gommoso”, selezioniamo lo Strumento Secchiello e riempiamo l’area selezionata precedentemente col colore bianco (#ffffff), in modo da ottenere questo:

11 – Selezioniamo il livello “Gommoso” e riduciamo l’opacità in modo da averla al 40%:

Il risultato di questo tutorial sarà appunto il nostro bottone, pronto per essere utilizzato!

Se non riuscite a capire qualche passaggio, potete chiedere postando. Il video per realizzare il bottone l’ho uppato su YouTube (anche se non si leggono molto bene i numeri…): clicca qui per il video!

Se volete il file .psd: download it!