minifloppy.it - logo

www.minifloppy.it

Internet, Web Design & Tecnologia

Grafica 2.0, Seconda Parte: realizzare un bottone

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

  1. Per prima cosa apriamo Photoshop e creiamo un nuovo file con sfondo bianco di 150x45 pixels.
  2. 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.
    Prima immagine di esempio
  3. 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:
    Seconda immagine di esempio
    Terza immagine di esempio
  4. 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:
    Quarta immagine di esempio
  5. 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:
    Quinta immagine di esempio
  6. 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:
    Sesta immagine di esempio
  7. 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).
    Settima immagine di esempio
  8. 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:
    Ottava immagine di esempio
  9. Ed ecco il risultato completo!
    Esempio completo
Il file PSD è disponibile per il download qui!

Se il tutorial vi è stato utile, lasciate un commento!

Comments

No comments so far...
Leave a Comment
 
 

 
Image verification
 
 
Categories
Archives
Fresh Content