In questo nuovo tutorial per Photoshop scopriremo come creare un bottone grigio in stile Skimbu, un bottone semplice ma che anch’esso, come diremo nell’introduzione, ha la sua difficoltà. Inoltre potrai acquistare per soli 0,20 € un interessante PSD con tanti bottoni… Lo trovi in fondo all’articolo!

Introduzione

Le funzioni basilari di Photoshop le sanno usare in molti. La difficoltà di Photoshop ci viene incontro in due occasioni:

• Quando dobbiamo eseguire lavori che richiedono funzioni particolari una combinazione di filtri, come ad esempio il montaggio digitale di una foto (vedi questo tutorial, ad esempio).
• Quando vogliamo eseguire lavori semplici che non richiedono particolari funzioni ma che richiedono un’attenta selezione dei colori oppure una certa manualità (con strumenti manuali come penna, matita ecc.)

In questo tutorial ci troviamo nel secondo caso, in realtà noi creeremo un rettangolo e lo stilizzeremo (un normale bottone), ma ad esempio io, che conosco Photoshop da 7-8 anni almeno nelle sue funzioni basilari, solo adesso sono arrivato a produrre un bottone stilisticamente pulito e bello, oltre che semplice, come quello che andremo a produrre e che noti spesso anche su Skimbu.

Purtroppo molti sottovalutano questo aspetto, ma la scelta dei colori è assolutamente fondamentale se si lavora nel web design, scegliere colori “a caso” produrrà sempre un lavoro che sarebbe potuto essere molto più appariscente se i colori fossero stati scelti accuratamente. Anche l’associazione dei colori è fondamentale, c’è chi mischia blu con nero oppure azzurro con rosso e crede di essere un bravo webdesigner. Difficilmente però nei designer professionisti si notano colori scuri su colori scuri (come anche blu e nero) oppure colori bianchi su colori bianchi.

Il tutorial

In questo breve tutorial andremo a creare dunque un bottone semplice e pulito come quello di Skimbu e di altri siti web. Ricordo che non andremo a fare nulla di complicato, questo tutorial vi serve più che altro per imparare a scegliere accuratamente i colori, oltre che imparare a usare gradazioni lievi e altri piccoli consigli/suggerimenti che ho imparato quando disegno nuove interfacce per Skimbu.

Disegniamo subito la parte più semplice, dopo aver creato un documento (io ho fatto 600×400 per avere molto spazio) scegliamo lo strumento Rettangolo (U), come foreground color (il quadratino dei colori in fondo al pannello degli strumenti) scegliamo il nero e disegniamo un rettangolo non troppo alto e lungo più o meno quanto il testo che ci vorremo inserire (qui dobbiamo immaginare, io ho fatto un rettangolo 132×33, come puoi vedere sotto).

È già venuto il momento di stilizzare il nostro bottone, e qui viene la parte più difficile. Doppio click sul livello del rettangolo appena creato e abilitiamo sovrapposizione sfumatura.

Iniziamo con la sfumatura grigia, noi andremo a creare un bottone grigio, nonostante il grigio sia un colore che non ha molte tonalità (a differenza di un colore come il giallo, che può tendere al marrone o al beige) in quanto il grigio può essere solo scuro o chiaro.

Qui bisogna banalmente scegliere due grigi, uno più chiaro e uno più scuro, ma stiamo attenti perché un bottone troppo scuro risulterebbe poco pulito, mentre un bottone troppo bianco e chiaro perderebbe il suo fascino. Dunque ci vuole la giusta sfumatura di grigio, che non è facile trovare. Per farvi capire ecco tre esempi di bottoni grigi, chiaramente quello in mezzo risulta più pulito e personalmente anche molto più bello, anche se tutti e tre sono bottoni apprezzabili. Ricordo che avrei potuto spendere ancora qualche minuto per trovare la gradazione giusta per i tre bottoni, specialmente per il primo e per il terzo mi sono soffermato poco perché servivano da esempi, ma anche nel secondo probabilmente ci stava una sfumatura grigia ancora leggermente più chiara.

Comunque troverai tutti i bottoni nel PSD a pagamento in fondo all’articolo.

Per il secondo bottone, la sfumatura da impostare è la seguente (ho specificato ovviamente i colori esadecimali), che dovrai impostare in Sovrapposizione di sfumatura cliccando sul rettangolino di fianco al parametro “Sfumatura”.

Ovviamente al bottone ho aggiunto anche altri effetti che lo hanno reso molto interessante, come una leggera ombra esterna, un’ombra interna ecc. ecco le finestre di seguito:

Come hai notato anche la traccia del bottone necessita di un grigio che si adegua alla luminosità della sfumatura, la sfumatura più scura ha richiesto una traccia più scura mentre la sfumatura più chiara ha richiesto una traccia più chiara.

Creiamo ora l’active state del bottone, ovvero lo stile del bottone quando sarà cliccato. Basterà cambiare l’ombra interna! Ecco le opzioni di fusione cambiate:

Ricordatevi anche di disattivare il bagliore interno. Ed ecco il risultato finale:

Poi ovviamente potrai “giocare” con i colori, magari rendere la sfumatura più scura per dare ancora di più l’effetto “profondità“. Ci sono tante variazioni belle che possiamo fare, per questo ti invito ad acquistarne il PSD per scoprire nuovi colori e tutte le variazioni possibili.

“Acquista” il PSD

Il PSD che acquisterà conterrà tutti i bottoni che trovi qui in alto. Potrai vedere direttamente le opzioni di fusione e scoprire nuove sfumature e 2 “active state” per ogni bottone grigio. Clicca sul link a basso e acquista il PSD per soli 20 centesimi, il pagamento avviene via PayPal.