HOME      TUTORIALS      GUIDE      FORUM      SHOP                                               CONTATTI
Pulsante con riflessi
in: Web Design

Ecco un altro pulsante simile al pulsante rosso, questo differisce dal precedente oltre che dalla forma (che è relativa) ma dalla presenza di riflessi che simulano un pulsante molto più lucente rispetto al primo, vediamo come procedere:

I primi passaggi sono del tutto simili alla creazione del pulsante rosso

Creiamo una nuova immagine di 300x300 pixel a fondo bianco, creiamo subito un nuovo livello, selezioniamo lo strumento ellisse con i valori come nell'esempio precedente, premiamo il tasto SHIFT (per creare una figura quadrata) e creiamo la nostra forma nell'immagine

Selezioniamo un colore verde scuro per il colore di primo piano ed un verde molto chiaro per il colore di fondo

Applichiamo gli effetti al livello appena creato, applichiamo un gradient overlay e come colore di riempimento selezioniamo da colore di primo piano a colore di fondo

Applichiamo un effetto rilievo

ed un bagliore interno, è importante selezionare il blend mode in modalità multiply, il colore di riempimento da nero al bianco e l'origine centrata

Aggiungiamo in fine un po' d'ombra con i valori predefiniti

Creiamo un nuovo livello (nell'immagine non è visibile ma otterremo un nuovo livello layer 2)

Premiamo il tasto D per ripristinare i colori e creiamo una selezione come in figura

Con lo strumento gradient la riempiamo dall'alto verso il basso

CTRL + D per deselezionate e premiamo poi CTRL + T per ridimensionare il livello, cerchiamo di ottenere qualcosa come in figura

Filter/Blur - Gaussian Blur per sfocare l'immagine

ed abbassiamo l'opacità del livello, forse 30% come in figura è troppo, meglio un 15%

Creiamo un layer 3

Premiamo il tasto CTRL e tenendolo premuto facciamo clic sul layer 1, appare una selezione attorno al quadrato, clicchiamo e teniamo premuto sullo strumento selezione e clicchiamo su selezione circolare, premiamo il tasto ALT clicchiamo sull'angolo superiore sinistro del quadrato e trasciniamo, rilasciamo il tasto ALT e senza rilasciare il tasto sinistro del mouse ripremiamo ALT per creare una selezione partendo dal centro (mi sono spiegato???) trasciniamo fino a creare una selezione circolare come in figura.

e premiamo CTRL + Backspace per riempire di bianco la selezione

CTRL + D per deselezionare, e sfochiamo con il solito filtro blur questa volta abbassando il valore

Abbassiamo l'opacità di tale livello al 20%

Creiamo un nuovo livello

riselezioniamo il quadrato premendo il tasto CTRL e cliccando sul layer 1, clicchiamo sullo strumento selezione rettangolare e premento il tasto ALT eliminiamo la selezione in eccesso lasciando selezionati solo l'angolo superiore sinistro e l'angolo inferiore destro, assicuriamoci che il layer 4 sia attivo e riempiamo di bianco queste selezioni (CTRL + backspace)

CTRL + D per deselezionare e poi CTRL + T per ridimensionare gli angoli come in figura, premi e tieni premuti i tasti ALT + SHIFT per ridimensionare mentenendo le proporzioni dal centro

Applichiamo anche qui il filtro gaussian blur con i valori precedenti ed abbassiamo l'opacità al 25%

invertiamo i colori di defoult premendo il tasto X ed inseriamo del testo bianco, centriamolo sul pulsante ed applichiamogli il filtro outer glow (bagliore esterno) con i valori predefiniti, assicuriamoci che il livello del testo sia in cima a tutti i livelli

Hai ottenuto qualcosa di simile? Salva l'immagine in formato PSD

Premi adesso CTRL + A per selezionare l'intera immagine
Premi poi CTRL + SHIFT + C per copiare in un unico livello, crea una nuova immagine e non modificare i valori, premi OK e poi CTRL + V per incollare, vai nel menù image e ridimensioniamo l'immagine con il comando image size. Io ho inserito 55x55 pixel. Ecco il risultato finale.


Questo sito è stato ideato e progettato da Aldo Gragnaniello
E' vietata copia totale o parziale senza autorizzazione del webmaster