Piace? Bene allora cominciamo. Avete bisogno di una buona immagine (.bmp, .jpg o .tif), la mia è questa:

La seconda cosa di cui avete bisogno è proprio del programmino Squirlz Water Reflections; questo software è prodotto dalla xiberpix sqirlz e potete scaricarlo da QUI. Il sito della xiberpix invece è: http://www.xiberpix.com ed in particolare Squirlz Water Reflections lo travate all’indirizzo: http://www.xiberpix.com/SqirlzReflect.html.

Dopo averlo scaricato, installatelo ed avviatelo. Ora aprite la vostra immagine tramite il comando File —> Open:

Ora avrete la vostra immagine davanti a voi, cliccate su Start Creating Outline e poi tracciate una linea orizzontale in un punto che desiderate dell’immagine (tenete premuto il tasto sinistro del mouse e poi rilasciate per ogni linea), ricordate che tale punto deve però andare da parte a parte, cioè coprire tutta la lunghezza dell’immagine; fatta la linea orizzontale, tracciate quella verticale con lo stesso metodo e poi ancora quella orizzontale parallela alla prima ed infine chiudete il rettangolo con una seconda parallela all’altra linea verticale. Per creare la selezione cliccate con il tasto destro del mouse per far capire al programma che avete finito.

Bene, adesso cliccate su Customize Basic Ripples e poi inserite i valori nella seconda figura qui sotto:

Customize Basic Ripples

Parametri da mettere

Dunque, ci sono tante opzioni, ma magari le analizzeremo in un altro tutorial (basta pensare che si può creare l’effetto pioggia in automatico!), chiudete la finestra dei parametri e preparatevi a creare la vostra animazione [1]. Andiamo ad impostare il periodo che avrà la nostra animazione su Animate —> Period:

Mettiamo come periodo 30 (ovviamente potremmo ridurre per diminuire le dimensioni dell’animazione), e clicchiamo su Ok. Adesso clicchiamo su Animate —> File Sequence Save e selezioniamo una cartella in cui salvare il file (vi consiglio di crearne una nuova da qualche parte). Cliccate Ok al messaggio “The animation you are about to save has the following…” e poi su Open dopo che vi sarete posizionati sulla cartella da voi scelta e dato un nome al file. Se andate a vedere nella cartella avrete una trentina di immagini che altro non sono che i frames dell’animazione. Ora è il momento di aprire Image Ready

In ImageReady fate click su File —> Import —> Folder as Frames… e selezionate la cartella dove avete salvato precedentemente tutti i frames cliccando su Ok.

Vi apparirà la finestra con l’immagine e l’animazione con elencati tutti i frames (se non la vedete attivatela cliccando su Window —> Animation. Lasciate a 0 il delay tra i frames (ritardo) e poi fate File —> Save Optimized as.., date un nome all’animazione e cliccate su Save. Ecco fatto !

Il risultato come precedentemente mostrato è il seguente:

Questo post è nato grazie ad adriart che ha evidenziato l’esistenza del programmino e grazie anche a molti utenti del forum Photoshopexpert.it interessati a questo.

_____

[1]: in realtà esiste un modo per creare l’animazione gif (od avi o flash) utilizzando il programma stesso senza ricorrere ad imageready. Basta andare su Animate —> Make AVI file / Make flash file / Make GIF file e seguire le istruzioni .

Read this tutorial in English language

Leggi questo tutorial in lingua Inglese

Apro questa categoria dedicata all’approfondimento del programma “fratello” di Photoshop, e cioè ImageReady. Questi tutorial sono fatti in collaborazione con PhotoshopExpert.it, e se la grafica è la vostra passione, non vi resta che visitarlo .

Bene, ma ora passiamo al tutorial vero e proprio: creeremo un’animazione testuale che appare e scompare in maniera non brusca, ma bensì attraverso una dissolvenza costante. Tanto per cominciare, utilizziamo Photoshop per creare quello che desideriamo (in questo caso una scritta), poi cliccheremo sul tasto passa ad ImageReady:

Ecco la scritta

Ed ecco il tasto per passare ad ImageReady

Una volta che il programma si sarà aperto, assicuratevi di avere aperta la finestrina delle animazioni visualizzata nell’area di lavoro, per esserne sicuri, andate nel menù Window ed assicuratevi di avere spuntata la voce Animation:

Appena attiverete la finestra ecco cosa vi si aprirà:

La freccia rossa indica il primo frame dell’animazione. L’effetto che vogliamo dare è semplice, ma le cose devono essere fatte con ordine: cliccate sul tasto Duplicate current frame per duplicare il frame iniziale

Quando avrete cliccato, vi si aggiungerà un altro frame (con numero 2) alla vostra animazione; questo è uguale al primo. Cliccate su questo nuovo frame per selezionarlo e andate nella finestra livelli (layers): qua dovrete diminuire l’opacità del livello della scritta fino all’80%

Ora dovete ripetere questo procedimento: duplicare il frame corrente e scalare l’opacità ancora del 20% e poi ripetere ancora fino ad arrivare al passaggio in cui dovete impostare 0% (io vi consiglio di mettere al posto di 0% un 10%). Poi ovviamente dovrete duplicare ancora i frames stavolta aumentando di 20% a volta fino all’80% (infatti il 100% ce l’ha già il primo frame e il ciclo è impostato su forever (per sempre):

Nell’immagine qua sopra l’animazione è formata da 10 frames, con i seguenti valori di opacità:

1 —> 100%, 2 —> 80%, 3 —> 60%, 4 —> 40%, 5 —> 20%, 6 —> 10%, 7 —> 20%, 8 —> 40%, 9 —> 60%, 10 —> 80%.

La freccia rossa indica che l’animazione si ripeterà all’infinito (se non è impostato su forever, cliccate e mettete su forever). Ho inoltre evidenziato in violetto la parte relativa al delay (ritardo tra un frame e l’altro in secondi); se volete modificare questo valore, cliccate sulla freccetta presente in basso a destra su ogni fotogramma:

Le frecce rosse indicano i tasti con i quali potete vedere in anteprima l’animazione (tasto centrale) e scorrere i frame a destra o a sinistra.

Tutto qui , questi sono due risultati lasciando un ritardo di 0 secondi nel primo, e di 0.2 secondi in quello successivo:

Per salvare l’animazione andate su File —> Save Optimized As…; otterrete un file con estensione .gif. Buon divertimento!