Creare userbars animate
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.
Aprile 16th, 2008 at 1:17 pm
Ciao, al momento di salvare come gif, PS m raggruppa tutto in unico livello e non esegue più l’animazione correttamente..come mai?
Aprile 16th, 2008 at 2:39 pm
Devi andare in “Salva per Web e Dispositivi” (Alt+Shift+Ctrl+S) e la salvi da lì in formato gif.
In questo modo Ps non ti chiede di unire i livelli.
Grazie per la segnalazione. Pensavo fosse sottinteso, ma adesso correggo per evitare equivoci.
Giugno 2nd, 2008 at 10:46 pm
Ho un problema, la userbar è bellissima solo che l’opzione “Salva per Web” è oscurata e non posso selezionarla, ho riprovato a farla 3 volte, seguendo passo per passi quello che hai scirtto però non riesco a salvarla.
Come posso fare ??
Giugno 3rd, 2008 at 3:42 pm
Non ho mai riscontrato questo problema, ma cercando in rete ho appreso che probabilmente è dovuto alla patch che traduce Ps in italiano.
Ecco un paio di link che ti porteranno a due discussioni che potrebbero esserti utili: P2Pforum,html.it.
Giugno 4th, 2008 at 3:03 pm
I link non mi sono stati utitli, avrò cercato male, va bè, comunque io ho il CS3, adesso lo sto provando a rinstallare per vedere se quel “errore” scompare, però un mio amico, che ha anche lui il CS3 (visto che glielò dato io) a lui l’opzione “salva per web” la può usare però lui ha Win Vista e secondo lui non è un problema della Patch ma un problema di installazione perchè senza Imageready neanche lui la può salvare in .gif
Appena ho finito di installarlo provo a salvare la Userbar anche se è in Inglese il CS3 e poi applico la Patch. Poi ti dirò come è andata.
Giugno 4th, 2008 at 7:50 pm
Sono di nuovo io, mi sa che invece hai ragione tu, perchè appena applicata la patch in italiano l’opzione “salva per web” mi si è oscurata. Non è che conosci quale soluzione ?? perchè ad usare il CS3 in inglese è una vera impresa e io l’inglese lo so poco :asd:
Grazie.
Giugno 4th, 2008 at 8:23 pm
Non conosco altra soluzione che possa tradurre il software ma, dopo una rapida raccolta di informazioni sul web, ho potuto notare che, a quanto pare, le patch non fanno altro che danni: funzioni disabilitate, eliminate, eccetera.
Comunque a mio parere la lingua non è un problema insormontabile: Photoshop è talmente intuitivo.
Giugno 4th, 2008 at 10:28 pm
Alla fine ho trovato una piccola soluzione, anche se funziona per metà. Sul mio pc, che uso di solito ho Photoshop CS3 in ita, mentre sull’altro che ho l’ho installato e tenuto in inglese così posso salvare la Userbar, ma ho riscontrato un errore, io la Userbar la salvo il .gif, ma se la provo ad aprire mi dice “Operazione di disegno non riuscita” e non capisco il perchè. Forse sbaglio le impostazioni quando la salvo in .gif ??