Photoshop, bottone Web 2.0 con riflesso in pochi passi

  • 0
  • 31 Views
Tutorial

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:

    Forma del bottone
    Forma del bottone senza effetti
  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:

    Impostazione gradiente
    Come va impostato il gradient del bottone

    Il risultato sarà qualcosa di simile a questo:

    Tasto con gradiente applicato
    Ecco il tasto con gradiente applicato
  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):

    Eclisse sopra il bottone
    Eclisse sopra il bottone
  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:

    Bottone con effetto
    Risultato quasi finale
  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:

    Bottone con bordo
    Bottone con bordo
  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:

    Ecco come deve essere la selezione
    Ecco come deve essere la selezione
  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:

    Quasi terminato
    Il bottone quasi terminato
  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:

    Risultato Finale
    Ecco il risultato finale pronto all'uso su qualsiasi sito.

 

Clicca qui per scaricare il psd già completo su MegaUpload.

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.