I bottoni liquidi sono bottoni speciali che tramite gli stili CSS e un unico file immagine (.png), ci permetto di creare bottoni che possono avere una larghezza infinita ('liquidi', appunto) e oltretutto possono essere personalizzati molto semplicemente in base all'attributo CSS background-color.Questo fa si che si risparmi tempo, fatica, e ottimizzeremo il download della pagina web. Inoltre, avendo 1 sola immagine per tutti i nostri bottoni, se un domani volessimo modificarne l'aspetto ci impiegheremmo un attimo!

L'articolo è molto dettagliato quindi ho preferito suddividerlo in due post separati. Nella Prima parte vedremo come creare la Base con Photoshop; nella seconda tratteremo il modo in cui interagire con i CSS.

Come creare Bottoni Liquidi con Photoshop

Aprite Photoshop, e creare un nuovo documento vuoto le dimensioni di 350x300 px

Nei tool, seleziona un lo strumento rettangolo arrotondato con l'opzione Livelli Forma . Se vuoi puoi specificare una dimensione fissa come vedi qui sotto, io ho utilizzato 180x46 px con angolo arrotondato di raggio 10. Rinominate questo Livello come BASE.

Adesso andremo a colorare il bottone con una sfumatura che prenderemo utilizzando le fusioni. Selezionate il livello base, click con il tasto destro e selezionate opzioni di fusione e fate click su sovrapposizione sfumatura. Scegliamo 2 colori simili tra loro, come ad esempio un giallo chiaro e un giallo leggermete più scuro. Per esempio io ho scelto i gialli #ffae00 e #d48200 vi consiglio anche di utilizzare la scale al 150%.

Aggiungiamo adesso un po' di ombra . Fate clic sulla casella di controllo Ombra Interna e inserite l'Opacità al 25% Distanza 0px, e taglia a 10px.

Tenendo premuto Ctrl sulla tastiera fate click sul livello Base sulla Miniatura del livello. Vedrete il pulsante selezionato con la classica seghettatura di Photoshop. Dai andate su Seleziona -> Modifica -> Contrai ... e specificate 1 Px. questo vi permette si diminuire la selezione di un pixel. Ora creiamo un nuovo livello con Ctrl + Shift + N che chiameremo Smusso. Dopo che il livello è stato creato premete su 'Ctrl' + 'Canc' che riempirà il livello con il colore di sfondo che avete utilizzato e specificate il riempimento a 0%.

Adesso selezioniamo il livello smusso e variamo le Opzioni di Fusione. specificando Dimensione:1 , Posizione Interno, colore : bianco

Otterremo un risultato così:

Adesso selezioniamo il livello smusso e creiamo una cartella premendo Ctrl + G selezionate lo Strumento Sfumatura (tasto G) . selezionate il gruppo e fai click su aggiungere maschera di livello che trovi nella palette livelli in basso. e metti l'opacità a 75%

Arrivati a questo punto fate click tenendo premuto Ctrl sulla miniatura del livello Base. Trascinate una guida a metà del pulsante. Dal menù Seleziona -> Modifica -> Contrai ... e specificate 1 Px. selezionate lo strumento selezione rettangolare e tenendo premuto il tasto alt "eliminate" la parte al di sotto della guida (ed eliminate successivamente la guida stessa).

A questo punto create un nuovo livello che chiameremo Fade e riempite la selezione partendo dal basso verso l'alto con lo strumento sfumatura utilizzando una sfumatura che da dal bianco al trasparente. Modificarte ilriempimento dell'immagine a 40%. Otterrete questo risultato ( deselezionate la selezione ovviamente ):

A questo punto avete creato tutti i livelli che vi servono e potete sbizzarrirvi nel cambiare colori sfumature e riempimenti. Notate che andando in Opzioni di Fusione del livello base e cambiando i colori della sfumatura il bottone manterrà i vari effetti di luce e trasparenze.

Questo rappresenta un'ottima base per creare bottoni liquidi. Adesso non ci resta che vedere come creare un vero e proprio Liquid Botton che con un semplice cambio di colore di background ci permetta di creare infiniti pulsanti. Per prima cosa rendete visibile il livello sfondo. Poi selezionate il livello Base e modificate le opzioni di Fusione deselezionando l'opzione di sfumatura e diminuite il livello di riempimento del livello mettendolo a 0%. Ecco cosa otterrete:

Tenendo premuto Ctrl fate clic sulla miniatura della maschera vettoriale in modo da selezionare il pulsante. Create un nuovo livello che chiameremo Gradiante e create una sfumatura con li strumento sfumatura dal nero al trasparente partendo dall'alto verso il basso.

Adesso utilizzando il comando selezione inversa (Crtl+ Shift + I) creiamo un nuovo livello e creiamo una maschera di bianco in questo modo:

Ecco ora l'effetto del nostro bottone è pronto! adesso dovremo solo ritagliarlo e utilizzalo nei nostri css. ecco come ottenere le tre immagini che ci servono: