- Apri un nuovo documento di dimensioni 1000×1000 (meglio ‘fare le cose in grande’, a rimpicciolire si fa sempre in tempo).
- Seleziona lo strumento “Rettangolo arrotondato” (U). Dalla barra delle opzioni, in alto, scegli la modalità “Livelli forma” e il colore del pulsante (io ho scelto il verde). Quindi disegna la forma (apparirà automaticamente in un nuovo livello forma). Potrai cambiare il colore e le dimensioni del pulsante in qualsiasi momento, senza perdita di qualità.
- Per dare al pulsante un aspetto più tridimensionale, aggiungi questi stili di livello (anche i livelli forma li accettano, è questo il vantaggio):
- Traccia: dimensione 1px, posizione centro, colore leggermente più scuro di quello scelto per il pulsante.
- Ombra esterna: metodo fusione moltiplica, opacità 75%, angolo 120°, colore grigio.
- Sovrapposizione sfumatura: metodo fusione normale, opacità 25%, sfumatura dal nero al bianco, stile lineare, angolo 90°.
- Bagliore interno: metodo fusione scolora, opacità 100%, colore molto più chiaro rispetto alla tinta del bottone (quasi bianco), sorgente bordo, dimensione 8px.
- Ora non resta che aggiungere un bel riflesso, per rendere il pulsante più lucido; crea un nuovo livello.
- Fai una selezione rettangolare libera sopra il pulsante.
- Con lo strumento Sfumatura (G), applica una sfumatura radiale dentro la selezione appena fatta, dal bianco (centro) al trasparente (esterno).
- Ora abbassa l’opacità del livello al 18% circa, così il riflesso è più naturale.
- Infine fai clic con il pulsante destro del mouse sul livello del riflesso, seleziona ‘Crea maschera di ritaglio‘ dal menu contestuale; in questo modo il riflesso non trasborda (così se cambi colore dello sfondo su cui si staglia il bottone, non c’è problema). Ecco il risultato finale:
Questo è un pulsante base, a cui possono essere aggiunti vari altri effetti a proprio piacimento. Il vantaggio di aver creato il pulsante in un livello forma è che il pulsante può essere scalato, ovvero ingrandito e rimpicciolito a piacere senza perdita di qualità; per scalare anche gli effetti applicati al pulsante (traccia, ombra, ecc.), basta fare clic con il pulsante destro del mouse sopra gli effetti (nella palette ‘Livelli’), e quindi selezionare ‘Scala effetti’ dal menu contestuale.
Per chi è interessato, metto a disposizione il file .psd del pulsante, più un set di pulsanti .png già belli e pronti per essere usati; tutto in un set che puoi scaricare liberamente da questa pagina:
Freebie: pulsanti web lucidi gratuiti (.psd+.png)
Prossimamente farò un tutorial su come creare del testo con effetto lievemente incassato; credo starebbe bene su un pulsante come questo.
[…] Veloce tutorial per creare un bel pulsante web in Photoshop […]
[…] è davvero semplice e il risultato, a mio parere, è molto bello e realistico. Io parto dal pulsante che ho realizzato in un tutorial precedente, ma come base si può utilizzare qualsiasi altro […]
Grazie. Tutorial chiaro, essenziale,davvero ottimo.
Guida fantastica complimenti e grazie