Qualsiasi sito web è dotato di bottoni:
bottoni che richiamano una pagina interna del sito, che si collegano ad una risorsa esterna, che attivano un’azione ben precisa (il classico bottone di invio in un form contatti), insomma è fondamentale per un web designer creare bottoni e saperli gestire.
Dopo aver cambiato il colore degli occhi, oggi vi propongo un altro tutorial per ottenere un bottone con il classico testo “scolpito” o “incavato“, in inglese si chiama “inset text“, molto piacevole da vedere, utilizzato molto spesso nella realizzazione del layout web.
Apriamo il fido Photoshop e creiamo un nuovo documento (File->Nuovo), io ho dato le dimensioni di 550px per 350px, e clicchiamo su OK.
Selezioniamo il rettangolo arrotondato e creiamo il bottone con un raggio di circa 20px (il raggio è molto soggettivo, più è alto il valore più gli angoli saranno arrotondati).
Adesso applichiamo gli stili al bottone:
Doppio clic sul livello del bottone, si aprirà la finestra di dialogo degli stili di livello
Applichiamo una sfumatura verticale che vada da un grigio scuro (#848484) ad uno molto più chiaro (#C4C4C4)
Applichiamo , adesso, un’ombra esterna: opacità->47% – distanza->2px – dimensione->4px
Abbiamo bisogno di aggiungere una traccia al nostro bottone: dimensione->1px – posizione->esterno – opacità->100% – colore->#666666
Dedichiamoci al testo del bottone: possiamo dare spazio alla fantasia, scriviamo quello che preferiamo all’interno della nostra creatura, in questo tutorial io faccio “la persona seria” e scrivo un classico “download“.
Selezioniamo lo strumento testo orizzontale e scriviamo
Dopo aver fatto doppio clic sul livello del testo, si aprirà la consueta finestra di dialogo, applichiamo una sovrapposizione colore, questo è il codice esadecimale: #303030
Ombra interna: metodo di fusione->Moltiplica – colore->#000000 – opacità->75% – angolo->41 – distanza->1px – dimensione->1px
Ultimo sforzo, l’ombra esterna: metodo fusione->Normale – colore->#FFFFFF – angolo->90° – opacità->47% – distanza->1px
Ed ecco a voi il meritato risultato:
Spero che il tutorial vi sia piaciuto, buon web design!
Scarica il PSD
