In questa seconda parte della serie vedremo passo passo come creare un semplice bottone in stile 2.0 in Photoshop.
Questo post è la seconda parte di una serie dedicata alla grafica del web 2.0. Il primo intervento, che tratta alcuni aspetti più strettamente teorici, è reperibile qui: Grafica 2.0, Prima parte.
Sebbene qui utilizzi Photoshop, la procedura descritta, in quanto non si avvale di funzioni specifiche di questo software, penso possa essere applicata a molti altri programmi di grafica.
Creiamo il bottone
- Per prima cosa apriamo Photoshop e creiamo un nuovo file con sfondo bianco di 150x45 pixels.
- Creiamo all'interno dell'area di disegno un rettangolo con angoli smussati utilizzando lo strumento Shape delle stesse dimensioni del foglio e riempiamolo di un colore abbastanza chiaro, ad esempio: #d5ea4f.

- Bene, ora applichiamo alcuni effetti allo shape appena creato. Facendo doppio click sul layer contenente la nostra figura, apriamo il pannello degli effetti, spuntiamo Gradient Overlay e Stroke e utilizziamo i seguenti parametri:


- Tenendo premuto Ctrl e cliccando sull'immagine accanto al nome del layer, selezioniamo il rettangolo smussato. Utilizzando poi lo strumento di selezione ovale in modalità sottrattiva otteniamo un risultato simile al seguente:

- Ora dal menu Selection scegliamo Modify e infine Contract, inseriamo un valore di due pixel e premiamo ok. Come potete vedere abbiamo in questo modo deselezionato il bordo:

- Create un nuovo layer e riempitelo di bianco (#FFFFFF), poi diminuite il parametro Fill dal pannello effetti e impostate il Blend Mode su Soft Light:

- Inseriamo del testo, visto che senza testo che bottone sarebbe? Per esempio io ho utilizzato il carattere Trebuchet MS grassetto, ad una dimensione di 24px. Come colore di riempimento scegliete il bianco (#FFFFFF).

- Non resta altro da fare a questo punto che applicare una leggera ombra al testo per renderlo più leggevole e più piacevole alla vista. Apriamo quindi il pannello effetti facendo doppio click sul layer e applichiamo l'ombra:

- Ed ecco il risultato completo!

Il file PSD è disponibile per il download
qui!
Se il tutorial vi è stato utile, lasciate un commento!