Le userbar

(1)


Photoshop: creare le proprie userbar in autonomia..






Inviato da Carlos in : Grafica, Photoshop CS2, Tutorials , trackback

Le userbar (tradotto in italiano: Barra utente): sono piccole immagini allungate (350×19 pixel) dalla grafica semplice ma accattivante, da mettere nelle firme di forum ed e-mail. Vengono utilizzate per mostrare i propri gusti.
–Wikipedia–

Credo che tutti sappiate cosa siano, e sono convinto che spesso dentro di voi avete detto: cavolo perché non imparo a farmele da solo? Infatti solo così si può ottenere quello che effettivamente si desidera. Quindi vediamo se riesco a spiegare bene la tecnica più usata per crearle; una volta imparata, sarete in grado di farne quante ne volete in meno di 5 minuti! Tanto per cominciare, le userbar hanno dimensioni standard di 350×19 pixel, quindi andate su File —> New e nella finestra che vi appare impostate i seguenti parametri:

http://www.carlosweb.net/old-images/userbar/00new.png

Io nella profondità di colori ho impostato 16bit, ma potete mettere anche 8bit (anzi la maggior parte delle immagini in rete ha questa profondità). Quindi cliccate su Ok, adesso avrete una immagine rettangolare trasparente davanti ai vostri occhi; andiamo a creare il suo sfondo colorato:

(2)

http://www.carlosweb.net/old-images/...radientool.png

http://www.carlosweb.net/old-images/...3clickgrad.png

Selezionate il Gradient Tool che vedete evidenziato nella prima immagine qui accanto e poi dopo aver selezionato (cliccandoci sopra) il Reflected Gradient (selezionato in verde nella seconda immagine), andate a cliccare nella finestra indicata dalla freccia rossa per impostare i colori che avrà la barra. Una volta cliccato, si aprirà la finestra che vedete di seguito.
Cliccate sopra la seconda immagine per ingrandirla, altrimenti dubito che si possa vedere qualcosa http://www.carlosweb.net/wp-includes...icon_smile.gif

http://www.carlosweb.net/old-images/...impostgrad.png

Nell’immagine dovete prima cliccare sul tipo gradiente (a due colori) indicato dalla freccia 1, successivamente impostare i colori indicati dalla freccia 2 e 3; per modificare i colori cliccate due volte sopra i punti indicati dalle frecce 2 e 3, vi si aprirà una finestra che abbiamo già avuto modo di vedere in altri tutorial e nella quale dovrete o scegliere il colore, oppure digitare il suo codice. Io ho utilizzato questi colori: #00ffff e #0000ff. Fatto questo, cliccate su Ok. E’ il momento di tracciare il gradiente: lo tracceremo verticalmente all’immagine (più o meno nel mezzo) e per farlo dovrete cliccare con il tasto sinistro del mouse (senza rilasciarlo) sulla “sponda” alta della figura, ed attraversarla fino all’altra sponda; per capirci meglio:

(3)

http://www.carlosweb.net/old-images/...5applygrad.png

Se avrete lavorato bene, questo sarà il risultato:

http://www.carlosweb.net/old-images/.../06latgrad.png

Ora dobbiamo aggiungerci quelle piacevoli righine diagonali che si vedono spesso nelle userbar; per far questo utilizzeremo un riempimento di pattern. Prima però dobbiamo creare una pattern: andate su File —> New, e create un nuovo documento con i dati uguali a quelli che abbiamo utilizzato inizialmente per la userbar, ma modificando le dimensioni che dovranno essere di 3×3 pixel. Vi si aprirà un documento davvero piccolo, ma non dovete far altro che ingrandirlo digitando 1600 (e premendo Invio) nello spazio evidenziato nell’immagine qui sotto:

http://www.carlosweb.net/old-images/.../07newzoom.png

Come vedete all’ingrandimento max è tutto più chiaro

http://www.carlosweb.net/old-images/...olorpencil.png

La freccia rossa vi indica che basta cliccare in quel simbolino (default foreground and background colors), per impostare in automatico il colore nero.Ora bisogna creare una riga diagonale formata da quadratini di 1 pixel ciascuno: lo faremo con il Pencil Tool (evidenziato in verde nell’immagine di fianco). Impostate la grandezza del “Pencil” ad 1 pixel (lo potete fare cliccando nella freccina evidenziata di verde qua sotto).

(4)

http://www.carlosweb.net/old-images/...r/brushdim.png

Poi andata a cliccare sopra l’immagine cercando di fare coincidere il quadrato nero del pencil tool con un angolo della figura poi andando in diagonale per concludere (vi bastano tre click):

http://www.carlosweb.net/old-images/...makpattern.png

e per concludere:

http://www.carlosweb.net/old-images/...ishpattern.png

Fatto tutto questo, andate su Edit —> Define Pattern…

http://www.carlosweb.net/old-images/.../11defpatt.png

Nella finestra che si aprirà digitate un nome e cliccate su Ok:

http://www.carlosweb.net/old-images/userbar/12ok.png

Adesso nella finestra dei livelli (in basso a destra) create un nuovo livello cliccando su New Layer (evidenziato in verde):

http://www.carlosweb.net/old-images/...13newlayer.png
Figura 1

Ora andate su Edit —> Fill:

http://www.carlosweb.net/old-images/...14editfill.png

Nella finestra selezionate pattern e scegliete quella che avete appena salvato, inoltre impostate l’opacità al 20%:

(5)

http://www.carlosweb.net/old-images/...impostpatt.png

Cliccate su Ok; il risultato è questo:

http://www.carlosweb.net/old-images/...16withfill.png

Bene, ora è il momento di inserire un’immagine: io ho deciso di creare una userbar un po’ simpatica ed ho scelto un’immagine “buffa”, ma voi potete scegliere qualsiasi altra cosa. Ecco la mia immagine:

http://www.carlosweb.net/old-images/.../17newopen.png

Per aprire la vostra immagine dovete solo fare click su File —> Open e cercarla. L’immagine può essere anche più grande del dovuto, tanto potremo scalarla; l’importante è che abbia uno sfondo trasparente (di conseguenza si prestano molto le icone). Una volta aperta la vostra immagine e selezionato il Move Tool, cliccateci sopra con il tasto sinistro del mouse e (senza rilasciarlo), trascinatela dentro la userbar, poi rilasciate. Adesso l’immagine che avevate precedentemente aperto, è sopra la userbar. Se è troppo grande come nel mio caso, andate su Edit —> Transform —> Scale, poi tenendo premuto Shift (per mantenere le proporzioni), cliccate su uno degli angoli e diminuitelo andando nel verso opposto dell’angolo:

http://www.carlosweb.net/old-images/.../19scaleim.png

Quando sarete soddisfatti rilasciate il mouse e confermate la trasformazione cliccando sul simbolo dell’ok posto in alto sulla destra:

http://www.carlosweb.net/old-images/userbar/20ok.png

Il risultato dopo questa operazione sarà il seguente:

http://www.carlosweb.net/old-images/.../21latimag.png

(6)
Ora è giunto il momento di inserire il testo. Il font più utilizzato è il Visitor TT1 -BRK- che potete scaricare da QUI. Dopo averlo scaricato e scompattato, inseritelo nella cartella dei vostri font (pannello di controllo —> Caratteri o Font). Poi selezionate lo strumento testo:

http://www.carlosweb.net/old-images/userbar/22text.png

e accertatevi di avere le seguenti impostazioni:

http://www.carlosweb.net/old-images/.../23opttext.png

Dunque cliccate sopra la userbar e digitate il vostro testo; nel mio caso: “Angry Man”. Poi cliccate con il tasto destro del mouse sopra il livello (layer) del testo (l’ultimo creato), e selezionate Blending Options:

http://www.carlosweb.net/old-images/...24blendopt.png

Poi andiamo ad impostare la traccia (stroke) con questi parametri:

http://www.carlosweb.net/old-images/...pplystroke.png

Bene, ecco il risultato che dovreste ottenere:

http://www.carlosweb.net/old-images/...26latblend.png

Arrivati a questo punto manca davvero poco alla conclusione; selezionate l’Elliptical Marquee Tool:

(7)

http://www.carlosweb.net/old-images/...r/27ellipt.png

Poi create un’ellisse cliccando sull’angolo in alto a sinistra e, senza rilasciare il tasto, arrivate fino all’angolo in basso a destra. Avrete creato un’ellisse; adesso create un nuovo livello (guardate la Figura 1 se non vi ricordate) e, dopo aver selezionato il Move Tool, spostate l’ellisse verso l’alto coprendo la userbar solo con metà ellisse:

http://www.carlosweb.net/old-images/...makeellsel.png

http://www.carlosweb.net/old-images/userbar/29white.png
Cliccate sul simbolo indicato dalla freccia rossa (inverte i back-fore ground colors) per avere il colore bianco, e selezionate il secchiello, poi cliccate sopra la metà ellisse; questa diventerà bianca.

Cambiate l’opacità del livello “ellisse” (selezionato come layer 4 in figura) portandola al 30%:

http://www.carlosweb.net/old-images/...30changeop.png

Fatto questo andate su Select —> All:

http://www.carlosweb.net/old-images/...r/31selall.png

e poi cliccate su Edit —> Stroke:

http://www.carlosweb.net/old-images/...r/32stroke.png

Nella finestra che compare impostate i seguenti parametri:

http://www.carlosweb.net/old-images/...3strokeopt.png

Dopo aver cliccato su Ok, abbiamo finito. Resta solo da salvare la userbar: File —> Save for Web…, e scegliere il formato che desiderate. Com’è venuta? Ecco qua:

http://www.carlosweb.net/old-images/userbar/end.png

Ed eccone una che ho fatto in 1 minuto, modificando il file .psd originale (infatti vi consiglio di salvarlo):

http://www.carlosweb.net/old-images/userbar/secend.png

userbar photoshop+userbar creare+userbar tutorial+userbar photoshop+tutorial(8)


Altri articoli che potrebbero interessarti:

• Trasformare una foto in stile fumetto con GIMP :P
• Tecniche avanzate, precise e veloci per modificare il colore degli occhi con Photoshop
• Effetto pin-up con Photoshop!
• Invecchiare le foto con Photoshop!
• Photoshop: creare la visione agli infrarossi
• Prime impressioni sulla creazione di wallpapers vector-brushes-colors-effects
• Cornici veloci a immagini e foto con Photoshop!
• 3 wallpapers davvero belli!
• Photoshop: inserire un’immagine in un testo..
• Creare un arcobaleno con Photoshop ;)

Fine
BUON DIVERTIMENTO
:pioneer 1420::pioneer 1420::pioneer 1420: