Grafica  »  Articoli  »  Tutorial Photoshop 

Aggiungiamo il testo

Ho aggiunto un font open type. Il nome del font è ITC Cheltenham. Per aggiungere un tocco diverso alle scritte ho colorato soltanto la prima lettera richiamando il colore della linea orizzontale alla base del pulsante. In basso l'esempio:

Duplichiamo gli elementi

La realizzazione della grafica è lo step più importante, ricordatevi che sarà più facile stilare il markup del CSS se la largezza è uguale per tutti i tasti. Se non lo dovesse essere allora bisognerebbe dichiarare la larghezza effettiva per ognuno di essi. In questo esempio la larghezza del tasto è di 145px ma nel CSS ne ho dichiarati 147. Questo perchè lo spazio tra un tasto e l'altro è di 1px ciascuno. Non mi addentrerò nel commento del codice, ma da questa immagine potete capire più facilmente cosa voglio dire.

Abbiamo creato il primo tasto adesso non ci resta che duplicare gli elementi orizzontalmente fino ad aggiungere gli altri tre. Vediamo la figura in basso:

Il primo gruppo di tasti dovrebbe essere contenuto all'interno di un set per facilitare le operazioni di spostamento, una volta duplicati gli elementi orizzontalmente, non ci resta che duplicare il set e trascinarlo verso il basso come mostrato in questa figura.

Lo stato hover

Adesso resta poco lavoro per completare la nostra menu bar. Ho voluto realizzare solo lo stato hover, ma nulla ci vieta di potere aggiungere anche lo stato active.

Per lo stato hover ho scelto un colore semplicissimo: il nero. Per cambiare il colore ho selezionato i livelli contenenti i tab e ho applicato una Sovrapposizione colore selezionando semplicemente il colore nero. Qui potete vedere il risultato.

Il taglio della grafica

Dopo avere realizzato la grafica procederemo a tagliarla servendoci delle guide. Tramite il menu Visualizza/Guide ne creeremo due orizzontali e due verticali. Aprendo il file .psd allegato vi accorgerete subito della loro presenza e quindi sarà possibile eseguire un taglio preciso utilizzando lo strumento Ritaglio (C). Quando utilizzate le guide per ritagliare la grafica, ricordatevi che l'opzione Aggancia deve essere settata su Guide e livelli documento, in questa maniera sia le stesse che le selezioni di ritaglio si aggancieranno ai pixel automaticamente. In questa figura potete vedere un dettaglio del menu con le guide già pronte per il ritaglio.

Non ci resta che salvare l'immagine per il web. Io ho usato GIF a 256 colori per il formato finale.

Altri articoli

Altre guide

Altre newsletter