M@ttia Bergomi's Web Site

.:Userbar

Impariamo a creare in pochi secondi le Userbar (ITA: Barra Utente), quelle piccole e colorate barre, spesso usate come firma nei Forum, per esporre in maniera accattivante i nostri gusti!
Credo che tutti sappiano cosa siano, anche se magari qualcuno non ne conosceva il Nome. Con questo breve Tutorial desidero permettere a tutti voi di potervi creare la propria Userbar(s), da poter esibire come Firma nei vostri Forum preferiti!

Allegati: Font Visitor , Photoshop File

PREMESSA:

In questa Guida ho utilizzato Photoshop CS2 (in inglese) ma ovviamente, traducendo la procedura con i Comandi corrispondenti, è possibile realizzarle anche con altri Software, fra i quali soprattutto ricordiamo l'ottimo (nonché gratuito!) TheGimp.

Tutti i Tools citati (per Nome) in questa Guida, si trovano nella barra a sinistra in Photoshop, come riassunto in questa Immagine:

TOP

Step 1: Creazione & Sfondo Gradiente

Andiamo su File -> New e, poiché le userbar hanno la Dimensione Standard di 350×19 pixel, nella finestra che ci appare selezioniamo i parametri così:

Creiamo ora lo sfondo sfumato utilizzando il Gradient Tool e, a seconda dei propri gusti, selezioniamo il gradiente "Lineare" oppure quello "Riflesso" come illustrato:

Clicchiamo quindi sull'anteprima della sfumatura (a sinistra nell'Immagine Sopra) per accedere alla Finestra di Selezione dei Colori:

Come indicato dalle Frecce, scegliamo dapprima la Sfumatura a 2 Colori, dopodiché cliccando sulle freccette indicate potremo scegliere i due colori da sfumare l'uno nell'altro. Settati i parametri, non ci resta che disegnare la sfumatura, semplicemente cliccando il mouse un po' dentro l'immagine vuota e, tenendo cliccato, trascinarlo verticalmente fino ad un po' sotto, per poi rilasciarlo (alternativamente, come io preferisco, si può sfumare anche in orizzontale...):

Otteniamo così (nel mio esempio dell'Orizzontale) il seguente risultato:

Perfetto, ora abbiamo la base della nostra Userbar: iniziamo allora con gli Effetti ed il Contenuto nel prossimo Step.

TOP

Step 2: La Trama a Righe

Aggiungiamo qui quelle accattivanti righine diagonali tipiche delle userbar: per far questo definiremo un nuovo Pattern, con il quale poi riempiremo l'Immagine.
Andiamo su File -> New e creiamo un nuovo documento di dimensione 3x3 pixel (il resto lasciamolo uguale a come impostato all'inizio di questa guida). La nuova immagine vuota sarà davvero molto piccola, quindi clicchiamo CTRL+0 per ottenere uno Zoom al massimo, ovvero 1600% (in alternativa è possibile digitare 1600 e premere Invio nell'angolino in basso a sinistra di Photoshop).

Ora bisogna creare una piccola Riga Diagonale Nera dal basso-sinistra verso l'alto-destra dell'immagine, formata da 3 quadratini neri di 1 pixel ciascuno: selezioniamo il Pencil Tool, impostiamone la grandezza ad 1 pixel (Click col destro sull'Immagine -> Master Diameter) e clicchiamo nelle 3 zone sulla diagonale per ottenere la riga voluta:

Infine facciamo Edit -> Define Pattern e diamogli un Nome a nostra scelta (ad es. Trama Userbar).

Chiudiamo quest'ultimo documento che non ci serve più e torniamo alla nostra Userbar. Qui creiamo un nuovo Layer (SHIFT+CTRL+N, oppure la rispettiva icona nella Finestra dei Livelli) e selezioniamo Edit -> Fill. Nella nuova Finestra selezioniamo la nostra Pattern appena creata, e impostiamo l'Opacità in un valore fra 15% e 25% (io personalmente suggerisco 20%).

Clicchiamo su Ok e notiamo il risultato ottenuto.

TOP

Step 3: Immagine sulla Sinistra

Sebbene questo Step non sia obbligatorio, rende comunque l'Userbar più "personalizzata" ed accattivante.
Scegliamo un'immagine che vogliamo inserire sulla sinistra della Userbar: non importa se sembra troppo grande, purché sia senza sfondo (ovvero trasparente, ad es. .png o .gif), e apriamola con Photoshop (File -> Open).
Selezioniamo il Move Tool, clicchiamo sopra all'immagine e, senza rilasciare il bottone del mouse, trasciniamola dentro la userbar (in alternativa basta selezionare l'immagine e fare Copia-Incolla nella Userbar).
Ovviamente, essendo la Userbar una Striscia, l'immagine risulterà tagliata: avvalendoci di Edit -> Transform -> Scale e Edit -> Transform -> Rotate ridimensioniamola/ruotiamola per ottenere l'effetto che più ci aggrada (Trick: tenendo premuto Shift si mantengono le proporzioni durante il ridimensionamento...), confermando infine la modifica con un doppio click.
Ecco (il mio) Risultato:

TOP

Step 4: La Scritta

È finalmente giunto il momento di applicare sul lato Destro un Testo di nostra scelta: il font utilizzato nelle userbar è il Visitor TT2 BRK (allegato anche a questa Guida, vedi in Cima): dopo averlo scaricato copiatelo nella cartella dei Font (in Windows è solitamente C:/Windows/Fonts).
Tornati in Photoshop selezioniamo lo strumento Testo con le seguenti Impostazioni:

Fatto questo clicchiamo sopra l'userbar e digitiamo il testo di nostra scelta (spesso del tipo: xxx User, xxx Fan, xxx Addicted, xxx Proud User, xxx Admin, ecc.), dopodiché clicchiamo con il tasto destro sopra il Layer del Testo (che si è creato automaticamente: sarà il primo in cima alla lista, nella Finestra dei Layer sulla destra di Photoshop), e selezioniamo Blending Options. Nella finestra che apparirà mettiamo il Visto all'Opzione Stroke, configurandola come in figura:

TOP

Step 5: Effetto Lucido (Ellisse di Luce)

Siamo ad un passo dalla conclusione: selezioniamo l’Elliptical Marquee Tool e creiamo un’ellisse: per avere le dimensioni giuste che servono a noi cliccate sull’angolo in alto a sinistra della userbar e, senza rilasciare, trascinate fino all'angolo in basso a destra, rilasciando; successivamente con le frecce della tastiera spostiamo l'ellisse appena creato verso l'alto, finché ne sarà visibile (nell'immagine) esattamente solo metà (circa 8-9 volte la freccetta verso l'alto).

Creiamo ora un nuovo livello (SHIFT+CTRL+N) e, con lo strumento Secchiello (allo stesso posto del Gradient Tool), riempiamo l'ellisse di colore Bianco. Cambiamo quindi l’opacità del layer (Casella nella Finestra dei Layer, in Alto) impostando un valore fra 25% e 35% (io la imposto a 30%):

Fatto questo selezioniamo l'intera figura (Select -> All oppure CTRL+A) e, cliccando su Edit -> Stroke, impostiamo questi Parametri:

Così facendo abbiamo impostato un piccolo Bordino all'immagine, anch'esso ad Opacità 30% (se lo desideriamo di un nero più intenso, basta farlo su un altro/nuovo layer).

Come ultima mossa, spostiamo il Layer col Testo in cima a tutto, ed in particolare sopra all'ellisse:

Finalmente conclusa l'Opera, non ci resta che fare File-> Save as... (oppure File-> Save for Web...) e salvare la nostra bella userbar nel formato preferito. Ecco il risultato:

TOP

Consigli & Suggerimenti:

Anziché impostare uno sfondo gradiente, è anche possibile impostarvi un'immagine, badando bene che essa non vada ad appesantire troppo il look in generale, rovinando il nostro lavoro o rendendolo troppo "piatto" (le "Userbar originali" hanno lo sfondo gradiente orizzontale...).
È ovviamente possibile inserire più immagini sulla sinistra, sempre con la stessa procedura: anche qui cerchiamo di non esagerare, ma di giocare bene sullo Scale/Rotate + eventuali sovrapposizioni.
L'ellisse di Luce serve a dare un effetto "translucido" all'immagine finale, e pertanto il suo effetto principale lo va a fare sullo sfondo gradiente. È assolutamente consigliato (se non obbligatorio!) lasciare il Testo sopra all'ellisse (pena: un testo poco leggibile e mal definito) e, a seconda dei gusti, anche le immagini a sinistra possono restarvici sopra. Inoltre, con l'utilizzo di un'immagine quale sfondo al posto di un gradiente, a volte risulta consigliato non applicare del tutto l'effetto Ellisse.
Se si intende usare queste Barre nei Forum quali firma, non inserirne tante (si otterrebbe una firma chilometrica, nella quale ogni userbar perde il suo effetto), ma al massimo 1-2 (magari rappresentando il ruolo svolto nel forum, l'OS preferito o una passione particolare).
Attenzione infine, che non tutti i Forum tollerano Immagini (quindi anche le userbar) nelle Firme, al fine di facilitare la lettura del Forum stesso e tenerlo "pulito e scorrevole": le firme lunghe 10 volte il messaggio postato sono davvero orribili!

Qui di seguito posto un paio di altre Userbar che ho realizzato, per dare un'idea un po più generale della cosa:

Per i più pigri, oppure per chi non ha tempo a disposizione, ho allegato a questo articolo il mio file Photoshop (Userbar.psd e Trama.psd), liberamente modificabile per creare direttamente le proprie userbar.

Happy Userbar-ing!

TOP