Photoshop, bottone Web 2.0 con riflesso in pochi passi

Ecco come realizzare un bottone in perfetto stile 2.0 utilizzando solo Photoshop (in questo caso CS2 in Inglese ma non cambia molto), noi vogliamo realizzare un classico tasto call to action (Download in questo caso) per questo scegliamo un colore come il verde, un colore piuttosto forte che salta agli occhi. Ora facciamo partire Photoshop e iniziamo…

1. Creiamo una nuova immagine della dimensione di 300×200
2. Selezioniamo un colore come colore principale diverso dallo sfondo e creiamo un nuovo layer
3. Selezioniamo dalla barra degli strumenti “Rounded Rectangle Tool” ossia rettangolo con bordi arrotondati.
4. Impostiamo lo strumento con 6px come raggio (Radius) e controlliamo che sia in modalità shape.
5. Andiamo a disegnare un rettangolo al centro della nostra immagine fino ad ottenere una cosa cosi:
   

   

6. Ora aggiungiamo una gradiente per renderlo più d’effetto, doppio click sul livello con lo shape, oppure tasto destro sopra il livello e clicchiamo su “Blending Options”, andiamo in Gradient Overlay.
7. Se non avete il gradiente pre impostato potete crearne uno nuovo cliccando sulla barra del gradiente.
   Il verde usato in questo tutorial è composto da un semplice Gradiente lineare con 2 colori #a4c855 e #ccea89 una volta aggiunto il nuovo gradiente, impostiamo la finestra di Gradient Overlay cosi:

   

   Il risultato sarà qualcosa di simile a questo:

   

8. Ora aggiungiamo un leggero effetto glossy, per farlo creiamo un nuovo layer, selezioniamo il colore bianco come colore principale e selezioniamo lo strumento eclissi (quello per disegnare i cerchi) e questa volta facciamo in modo sia selezionato Fill pixel (la terza iconcina nella barra in alto) cosi potremmo lavorare su un livello già trasformato in immagine e non in shape.
9. Disegniamo un ellisse bianco sopra il bottone come segue (ho cambiato il colore di sfondo solo per far vedere meglio l’ellisse):

   

10. Ora cancelliamo il cerchio in eccesso per farlo CTRL + click sul livello (layer) del bottone poi SHIFT+I (inverte selezione) selezioniamo il layer del cerchio e premiamo CANC (DEL su alcuni pc), ora dovremmo avere un risultato simile a questo:

    

11. Ora aggiungiamo un bordo cliccando 2 volte sul layer o entrando in Blending Options, andiamo su Stroke selezioniamo il colore #24b802 a position selezioniamo outside, come dimensione (size) mettiamo 1 px e otterremo questo:

    

12. Ora aggiungiamo il riflesso e in fine il testo, selezioniamo entrambi i layer sia quello per l’effetto glow che quello del bottone e con il tasto destro scegliamo duplica layer alla finestra che appare clicchiamo su ok.
13. Ora abbiamo una copia dei 2 layer uno sopra l’altro selezioniamo i layer copie e premiamo CTRL+E questo li unira in un unico layer che andra’ a fare da riflesso.
14. Visto che si parla di riflesso dobbiamo capovolgere il nuovo layer per farlo è sufficiente andare in Edit -> Transform -> Flip Vertical spostiamo il nuovo layer in basso subito sotto il tasto e selezioniamo quasi a meta con lo strumento “Rectangular Marque Tool” (basta premere M) come da immagine:

    

15. ora andiamo a cacellare il riflesso in eccesso, per farlo bisogna prima sfumare la selezione, quindi Select (Selezione) -> Feather (Sfuma) e come valore mettiamo 15, ora torniamo al bottone e con il layer del riflesso selezionato premiamo canc 2 volte finche non otteniamo un buon risultato, ora non resta che abbassare l’opacità intorno al 44% dovrebbe andare, ecco il risultato:

    

16. Ora andiamo ad aggiungere il testo e magari un icona, apriamo un icona dal sito IconFinder.net nel nostro caso scegliamo questa posizioniamo l’icona a sinistra del tasto, e a destra con lo strumento testo andiamo a scrivere “Download” e scegliamo colore bianco come riempimento del testo Arial come font e Bold come stile la dimensione 36/34 insomma in base alla dimensione del bottone.
    Aggiungiamo lo stroke  al testo di size 2px e colore #2e7a00 ed ecco il risultato finito: