PULSANTI PER IL WEB IN 3D

In questo articolo vedremo come realizzare pulsanti tridimensionali per i vostri siti web. Andiamo nel menu File e creiamo un nuovo documento "button" e con lo Strumento sfumatura applichiamo allo sfondo una Sfumatura radiale, da un angolo a l'altro del nostro foglio:

Disegniamo un Cerchio di colore verde: per farlo utiliziamo lo Strumento ellisse sulla tela e contemporaneamente premiamo il tasto Shift; in questo modo Photoshop realizzerà un cerchio perfetto:

Nella Finestra Livelli rinominiamo il nuovo livello in "Button" e facciamo doppio click per applicare uno stile di livello; di seguito le impostazioni da selezionare::

E questo dovrebbe essere il risultato parziale del nostro pulsante:

Ora creiamo un nuovo livello che chiameremo "riflesso"; utilizzando lo Strumento ellisse disegniamo un ellisse sulla parte superiore del nostro pulsante dopodichè rasterizziamo il livello (trasformiamo, cioè, la nostra immagine vettoriale in raster) quindi aggiungiamo una maschera vettoriale a questo livello; con lo Strumento sfumatura, impostando il selettore del colore dal nero al bianco, andiamo a selezionare la zona da coprire con la maschera:

Duplichiamo il livello "riflesso", modelliamolo e spostiamolo al bordo del pulsante:

Ecco il risultato: in pratica i due livelli sovrapposti non fanno altro che rendere il bordo esterno più luminoso:

Duplichiamo questi due livelli ("riflesso" e "riflesso copia") e spostiamoli nell'angolo opposto:

Ora impostiamo a 0 il Riempimento del livello "button" e importiamo un immagine a piacere (io ho scelto il nostro tricolore) che posizioneremo sotto il livello "button" che chiameremo "sfondo button":

Ora dobbiamo selezionare il contorno del pulsante: per farlo lasciamo il livello "button" con riempimento a 0 e rendiamo invisibile il livello "sfondo button"; posizioniamoci sopra i livello "button" e, con lo strumento bacchetta magica con tolleranza a 0, selezioniamo l'area esterna al pulsante (vedrete una linea tratteggiata che indica l'area selezionata):

Invertiamo la selezione (da tastiera Shift + Ctrl + I ) e rendiamo visibile nuovamente il livello sotto Button:

Infine ritorniamo nuovamente su livello "button" e copiamo tutti gli elementi uniti in un nuovo livello:

Modifica -> Copia elementi uniti

Incolliamo la nuova immagine in un nuovo livello o documento e chiamiamolo "Button Finito":

Ora possiamo divertirci impostando sfondi differenti modificando solo il livello "sfondo Button":
. 

.

 .
 .

-