Grafica  »  Articoli  »  Tutorial Photoshop 

Uno degli argomenti 'caldi' degli ultimi mesi tra i web designer è stato quello dei menu a tab. O meglio, la loro realizzazione con un codice (X)HTML ben struturato e con i CSS. Gli esempi reperibili in rete sono decine e anche in questa sezione abbiamo affrontato diverse volte l'argomento:

• Un menu a tabs con i CSS
• Menu grafici con rollover e preload via CSS

Molto spesso, quando si è trattato di costruire menu di questo tipo con grafica o con tecniche di image replacement, si è usato come modello quello del sito di Apple. In questo tutorial vedremo come si possano realizzare con Photoshop gli elementi di base di quel tipo di menu. A voi la scelta su come utilizzarli e inserirli nelle vostre pagine. Qui rimarremo ancorati all'aspetto puramente grafico. Gli screenshot e le scorciatoie da tastiera si riferiscono alla versione per Windows (in inglese) del programma di Adobe. Iniziamo col vedere il risultato finale:

Prepariamo l'ambiente di lavoro

All'apertura di Photoshop è opportuno fare piazza pulita dei pannelli che non ci serviranno, visualizzando solo quelli necessari. Sono essenzialmente 3 e possono essere attivati dal menu Window:

• Tools
• Info
• Layers

Oltre a questi 3 pannelli è fondamentale visualizzare la barra delle opzioni (Options), che si trova immediataemnte sotto la barra dei menu: anch'essa è attivabile dal menu Window. Ecco uno screenshot del nostro spazio di lavoro [Schermata 1]. E' anche preferibile usare i pixel come unità di misura del pannello Info. Per modificare l'unità, basta cliccare sulla piccola freccia posta sulla destra del pannello e selezionare la voce Palette Options, come mostrato in questa immagine [Schermata 2].

A questo punto creiamo un nuovo documento (CTRL + N) e nella finestra delle impostazioni assegniamo come dimensioni 400x400px e come sfondo il bianco [Schermata 3].

Tracciare la figura di base

Ora è il momento di creare un nuovo livello (Layer): basta la combinazione CTRL + SHIFT + N. Come nome possiamo accettare quello proposto, Layer 1. Nel pannello dei livelli esso apparirà sopra quello originario denominato Background. Su questo livello appena creato dovremo disegnare un rettangolo con gli angoli arrotondati di colore nero.

Intanto verifichiamo che il livello su cui stiamo lavorando sia Layer 1 e che il colore di primo piano sia impostato sul nero. Quindi, dal pannello degli strumenti, clicchiamo sul pulsante delle forme selezionando il rettangolo con angoli arrotondati. Attenzione, prima di passare al disegno dobbiamo fare altre 2 piccole modifiche. Occhio alla barra delle Opzioni in alto. Bisogna prima di tutto selezionare il pulsante Fill pixels (riempie l'aria con pixel invece di creare una forma vettoriale) e impostare il raggio degli angoli su 20px, così:

Ora possiamo tracciare un rettangolo. Non preoccupiamoci, per il momento, delle dimensioni finali, disegniamo con misure sufficienti per lavorare comodamente. Nell'esempio siamo partiti da un rettangolo di 200x145px (mentre disegnate, tenete d'occhio i valori W e H nel pannello Info per ottenere queste dimensioni).

Dobbiamo ora eliminare la parte del rattangolo che non ci serve. Premiamo il tasto M per passare allo strumento di selezione rattangolare (si può fare, ovviamente, anche dal pannello degli strumenti) e tracciamo un rettangolo come mostrato in questa immagine:

Quindi, premendo il tasto Backspace o dal menu Edit > Clear, eliminiamo la parte selezionata. Otterremo questo risultato:

Altri articoli

Altre guide

Altre newsletter