Prima di cominciare faccio presente che questa guida dà per scontate alcune conoscenze di base dell’utilizzo di Photoshop. Se non siete abituati ad usarlo, fate riferimento alla guida in linea del programma. Detto questo, come esempio base di questo tutorial, senza eccessiva fantasia, creeremo una userbar dedicata a Webwards. Ritengo corretto precisare che questo tutorial è frutto di conoscenze acquisite dalla lettura di altre guide simili (linkate in basso) in lingua inglese. Veniamo ora alla creazione della userbar. Prima di tutto, creiamo un nuovo documento di larghezza 350 pixel e altezza 19 pixel (impostare il resto delle opzioni come in figura).
Ora selezioniamo due colori (in questo caso quelli del sito, ovvero le due tonalità di arancione) e creiamo una sfumatura riflessa bal basso verso l’alto.
Per un risultato migliore, conviene sempre che il colore più scuro stia nella parte inferiore e quello chiaro nella parte superiore, come in figura. Ma questo non è un limite tassativo: molte userbar vengono create con sfumature anche orizzontali.
Per aggiungere le linee diagonali, è necessario creare un nuovo documento di larghezza e altezza pari a 3 pixel. Dopo aver zoomato fino al 1600%, si selezionano 3 quadrati in diagonale (ognuno di dimensioni 1×1 pixel) e li si colorano di nero, fino a ottenere il risultato della prossima figura.
Ora, per evitare di rimpire a mano l’area della userbar con questo motivo, andiamo su Modifica > Definisci pattern e assegnamo un nome a piacere al pattern appena creato. Fatto questo, torniamo al documento della userbar e creiamo un nuovo livello. Per riempirlo, facciamo Selezione > Tutto (Ctrl+A) quindi Modifica > Riempi e scegliamo il pattern appena creato. Regoliamo l’opacità di questo livello al 30-40%.
Adesso è il momento di aggiungere il logo sulla parte sinistra della userbar. Scegliamo quindi l’immagine desiderata (solitamente dev’essere abbastanza grande in modo che solo una piccola porzione sia visualizzata) e la incolliamo sulla userbar in un nuovo livello. Se vogliamo dare un effetto 3D, possiamo aggiungere un’ombra esterna all’immagine nelle Opzioni di fusione.
Ora aggiungiamo le scritte. Utilizzeremo come font il Visitor TT2 (BRK), dimensione 13 pixel, anti-alias nullo e colore bianco. Per aggiungere il bordo nero, nell’elenco dei livelli, cliccare con il tasto destro sul livello della scritta, scegliere Opzioni di fusione > Traccia e impostare colore nero, dimensione 1 pixel e posizione Esterno. Si ottiene il seguente risultato.
Il prossimo passaggio ci consente di aggiungere un effetto tridimensionale alla userbar. Per fare questo, creiamo un nuovo livello, e con il tool della seleziona ellittica, selezioniamo la porzione superiore (circa a metà) della userbar per poi colorarla di bianco. Settiamo un’opacità di 20-25% e il risultato sarà il seguente.
Ora non resta che aggiungere il bordo della userbar: Selezione > Tutto (Ctrl+A), quindi Modifica > Traccia, impostando le dimensioni ad 1 pixel, colore nero e posizione Interno. E il gioco è fatto.
Fonte :
Webwards
