Questo tutorial spiega come realizzare un pulsante lucido molto semplice e sobrio, scalabile come se fosse un vettore. Può essere la base da cui partire per creare altri pulsanti più sofisticati. E’ un tutorial molto facile e adattabile a tutte le esigenze, pensato soprattutto per chi deve fare spesso delle modifiche o ha dei ripensamenti.

1. Apri un nuovo documento di dimensioni 1000×1000 (meglio ‘fare le cose in grande’, a rimpicciolire si fa sempre in tempo).
2. 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à.
3. 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.
4. Ora non resta che aggiungere un bel riflesso, per rendere il pulsante più lucido; crea un nuovo livello.
5. Fai una selezione rettangolare libera sopra il pulsante.
6. Con lo strumento Sfumatura (G), applica una sfumatura radiale dentro la selezione appena fatta, dal bianco (centro) al trasparente (esterno).
7. Ora abbassa l’opacità del livello al 18% circa, così il riflesso è più naturale.
8. 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.