[Tutorial] Creare userbars da inserire in firma

[mattia]

Le forum board permettono agli utenti registrati di inserire una firma personalizzata, configurabile dal pannello di controllo del profilo, che viene visualizzata alla fine di ciascun messaggio.

Le firme possono contenere testo, immagini e link. Per questo sono molto diffuse le userbars, semplici barre contenenti delle scritte o delle foto che identificano gli interessi dell'utente.

In questo tutorial vediamo come creare userbars da inserire in firma!

Con Photoshop, incominciamo con l'aprire un documento nuovo con i parametri dell'immagine sottostante.


Ora possiamo cominciare a lavorare sul nostro progetto, come piu' ci soddisfa, inserendo immagini colori e scritte. Il font che la fa da padrone sulle barre si chiama Visitor-BRK con il quale gli Userbars design scrivono in maiuscolo, tipo: windows user, spaghetti fun, big boobs hunter.

Il font lo potete scaricare da: http://www.dafont.com/visitor.font
Come si può notare, molte barre hanno delle linee trasversali inclinate tutte equidistanti tra loro e tutte della stessa dimensione.


Farle una per volta sarebbe una cosa non solo estenuante, ma dal risultato finale disastroso.
Se zoomate su di una barra vi accorgerete che quelle linee sono formate da punti.
Ecco come realizzare le linee, precise ed in maniera veloce:

STEP [1]
Scegliamo un pennello duro dalla punta tonda e appena sopra la palette del navigatore dove si trovano le alette, facciamo clic sul tab Pennelli.
Questo è quello che appare.


Ora facciamo clic su Forma punta del pennello ed in basso tiriamo lo slide fino ad ottenere questo.


STEP [2]
Apriamo adesso un documento nuovo 100x100pix di colore trasparente e in alto a destra diamo un punto di pennello preferibilmente nero, dalle dimensioni di 3pix.
Su tastiera teniamo premuto il tasto SHIFT e diamo il secondo punto di pennello in basso a sinistra.
Questo è ciò che avviene.


STEP [3]
Salviamo adesso come pennello predefinito assegnandogli un nome.
Lo riprendiamo subito dopo per fare delle prove:
Per ottenere delle linee oblique tutte uguali e perfettamente equidistanti, col nostro pennello appena fatto, diamo un punto sull'estrema sinistra di un'immagine dalle dimensioni di una barra e tenendo premuto il tasto SHIFT, diamone un altro all'estrema destra ed ecco tracciate le linee.


Un consiglio: le linee trasversali inseritele su di un nuovo livello, in modo tale da poterle modificare in qualsiasi momento senza intaccare il resto dell?immagine.

Un'altra cosa che si nota sulle barre è quel leggero effetto di luce che conferisce un effetto 2D.
Per realizzarlo procediamo cosi:

STEP [1]
Tracciamo una selezione ellittica che volendo possiamo centrare, spostare, distorcere e modificare a nostro piacimento, dopo aver fatto clic su Seleziona > Trasforma selezione. ( io per comodità ho usato anche i righelli e le linee guida )


STEP [2]
Impostiamo il colore di primo piano su bianco. Selezioniamo lo strumento Sfumatura, sulla barra delle Opzioni strumento mettiamo il flag nella casella Trasparenza e tiriamo un gradiente dall'alto verso il basso facendo varie prove fino ad ottenere un risultato soddisfacente.

[Google ADS]

[Markino]

non ho capito come si fanno le barre trasversali.
Fino alla seconda figura del quadrato con la diagonale ci sono...ma poi come lo salvo il pennello?
E quando vado a fare le linea sulla userbar il risultato ? una diagonale dall'angolo basso sinistro a l'angolo alto destro... :cry:

[mattia]

Lo salvi come pattern personal (non ricordo a memoria dove si trova la voce), poi quando lo devi inserire nella userbar non devi far altro che creare un livello subito sopra il livello di sfondo e andare su Modifica > Riempi > Pattern e scegliere il pattern, ricordando di abbassare l'opacit? del livello dalla palette dei livelli.

Per quanto riguarda le linee c'? lo strumento direzione o verso.

Purtroppo ho formattato da poco per necessit? il pc e Photoshop non l'ho ancora reinstallato, per cui sono costretto a dirti pi? o meno a memoria.
:roll:

[Markino]

Alla fine a fare le barre trasversali ci sono riuscito...
per? non ho capito come si fa a fare l'effetto lucido... :oops:

Ciao ciao!!!

[mattia]

- Prendi lo strumento Selezione ellittica e crea una selezione di questo tipo:

- Scegli lo strumento di riempimento; crei un nuovo livello trasparente.
- Stando su questo livello, riempi l'area selezionata con il colore bianco.
- Vai nelle opzioni dei livelli e imposta l'Opacit? del livello al 50%.

[Markino]

Grazie della pazienza hack!!!

[cloud_strife84]

Dopo che ho creato la userbar, come faccio ad inserirla come firma nel forum?

[mattia]

una volta che hai creato l'userbar,
possiedi l'immagine png, gif, jpg o quello che è;
la carichi in un sito tipo http://www.image-share.net o attraverso il nostro script http://www.methack.it/upload.php
copi il link diretto come indicato...vai nel tuo profilo del forum, nel campo di testo della firma, inserisci il codice
[img]url diretto immagine[/img]

clicchi su salva profilo

[cloud_strife84]

Ah ecco! Infatti quando le ho create tempo fa su un sito mi dava il codice da inserire. Invece in questo caso non riuscivo proprio a capire come fare. Grazie mille!!