Kaede WeBlog

Partendo da dove ci eravamo lasciati nel precedente tutorial sulle userbars, impareremo a crearne di animate.
Riapriamo il nostro file .psd (ossia il documento di Photoshop) e, per chi possiede Photoshop CS3, apriamo la finestra animazione (ITA: Finestra>Animazione; ENG: Window>Animation); se possedete una versione precedente alla CS3 passate ad ImageReady premendo l’apposito bottone presente nella barra degli strumenti (nella figura seguente è indicato da un ovale rosso).

A questo punto dovrebbe essersi aperta la finestra Animazione in cui potremo lavorare sui frames (fotogrammi). Ecco come si presenta la finestra…

Nell’animazione di una userbar possiamo giocare principalmente con la posizione, l’opacità, e gli effetti dei livelli. Adesso entriamo nel vivo dell’animazione agendo in maniera semplice su questi tre parametri.
Questi sono i livelli della nostra userbar…

E questo è il suo aspetto attuale…

A titolo esemplificativo la nostra animazione consisterà nel creare una comparsa in assolvenza del logo, un’entrata in scorrimento del testo, e un bagliore esterno al pattern.

Selezioniamo l’unico frame presente nella finestra Animazione, poi selezioniamo il livello del logo e settiamo la sua opacità allo 0%; ora selezioniamo il livello del testo e spostiamo il contenuto verso destra premendo Ctrl+freccia direzionale destra oppure usando il Move Tool (V), infine selezioniamo il livello del pattern e applichiamo l’effetto bagliore esterno (outer glow) attraverso il percorso Livello>Stile di livello>Bagliore Esterno (ENG: Layer>Layer Style>Outer Glow) senza dimenticare di impostare l’opacità del bagliore allo 0%.
A questo punto, se avete eseguito tutto in maniera corretta, dovreste visualizzare solo lo sfondo e il pattern…

Adesso creiamo un nuovo frame, selezioniamolo, e impostiamo l’opacità del livello del logo al 100%, riportiamo il testo all’interno della userbar, e infine impostiamo al 75% l’opacità del bagliore applicato al pattern.

Il passo successivo consiste nel cliccare sul bottone Tween (”interponi frames“) ed inserire i seguenti parametri…

…non ci resta che impostare quante volte vogliamo che si ripeta l’animazione…

In questo caso ho scelto Once (una volta).
Prima di andare in “Salva per Web e Dispositivi” (Alt+Shift+Ctrl+S) e salvare l’immagine in formato .gif, assicuriamoci che l’animazione venga eseguita correttamente.

Il tutorial è terminato e il suo risultato è questo:

(per rendere sempre visibile l’animazione ho selezionato la ripetizione continua ogni 5 secondi)

La mia animazione è basilare ma, ovviamente, capito il meccanismo potrete elaborare l’animazione di una userbar in base alle vostre preferenze.

Spero di essere stato chiaro. Se riscontrate problemi lasciate pure un commento e sarò felice di aiutarvi.

Questo tutorial vi guiderà nella creazione di una userbar utilizzando Photoshop.

Premetto che è consigliata un po’ di confidenza con Photoshop in quanto alcune cose potrebbero essere date per scontate, tuttavia anche se non si ha dimestichezza con il programma è possibile raggiungere l’obiettivo di questa guida; in caso di pigrizia patologica a fondo pagina potete trovare alcuni siti che creano userbar oppure che ne hanno un archivio.

Per iniziare è necessario creare un nuovo documento (File>Nuovo) di larghezza 350 pixel e altezza 19 pixel.

Ora selezioniamo due colori e creiamo una sfumatura riflessa dal basso verso l’alto (oppure come la preferite).

Per aggiungere le linee diagonali, è necessario creare un nuovo documento di larghezza e altezza pari a 3 pixel con sfondo trasparente.

Dopo aver zoomato fino al 1600%, con lo strumento matita, si traccia in diagonale una linea nera di 1px. Il risultato è mostrato nella prossima figura.

Ora andiamo in Modifica > Definisci pattern, assegnamo un nome al pattern appena creato, e premiamo OK. Fatto questo, torniamo al documento della userbar e creiamo un nuovo livello. Per inserire il pattern appena creato andiamo in Modifica > Riempi e scegliamo il pattern da utilizzare. Regoliamo l’opacità di questo livello al 30-40%.

Adesso è il momento di aggiungere il logo sulla parte sinistra (io lo preferisco lì XD ) della userbar. Scegliamo quindi l’immagine (è molto importante scegliere un’immagine adatta alle dimensioni della userbar) e posizioniamola sulla userbar in un nuovo livello. Se vogliamo dare qualche effetto particolare possiamo giocare un po’ con gli Stili di Livello (Layer Style).

Ora aggiungiamo il testo. Il font più comune per questo passaggio è il Visitor TT2 (BRK) (che potete anche trovare su www.dafont.com) 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 Stile di livello > Traccia e impostare colore nero, dimensione 1 pixel e posizione Esterno. Niente vi vieta di usare altri font e altri stili. Io ho ottenuto il seguente risultato.

Col prossimo passaggio aggiungeremo un effetto riflesso alla userbar. Creiamo un nuovo livello, e tracciamo un’ellisse (con lo strumento apposito) che ricopra la metà superiore della userbar, come in figura.



Impostiamo l’opacità a circa il 20-25% e il risultato sarà il seguente.

Ora non resta che aggiungere un nuovo livello e creare il bordo della userbar: Seleziona > Tutto (Ctrl+A), quindi Modifica > Traccia, impostando le dimensioni ad 1 pixel, colore nero e posizione Interno.

Il tutorial è terminato. Complimenti! (per la pazienza )

Infine vi segnalo alcuni siti che hanno come tema le userbars:

• www.userbar.org
• www.userbarmaker.com
• www.userbars.com
• www.userbars.net

P.S.se avete bisogno dei comandi in lingua inglese non esitate a chiedere lasciando un commento.