giovedì 3 giugno 2010

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":

.
 .
 .

-

Nessun commento:

Posta un commento

Sono Webmaster Freelance http://www.cipiri.com/

Related Posts Plugin for WordPress, Blogger...

Sosteniamo Mundimago

Segui RIFLESSI da Facebook

Segui RIFLESSI da Facebook
Siamo anche qui

Seguici da FACEBOOK

Seguici da FACEBOOK
siamo anche qui

Post più popolari