Crea sito
Get Adobe Flash player

♥ Benvenuti nel blog "I Pensieri di Fiordiluna"  ♥
Le mie riflessioni  in un blog rilassante e creativo.
Se vi va, lasciate un commento sotto i post e buona navigazione!

Tutorial

ncadettessagray_by_nicolecadet-d93ipecOltre allo scrivere, una delle mie passioni è, come già detto, il fare grafica. Questo post sarà un po’ diverso, cioè non ci saranno mie riflessioni, bensì un tutorial sul come realizzare una semplice animazione con elementi online, utili per creare dei bottoncini per il nostro sito, dei piccoli banners o semplicemente per abbellire i nostri articoli online!

Ci sono molti programmi che potremmo utilizzare per la realizzazione di una piccola animazione (immagine in formato gif), ma qui voglio soffermarmi su come sia possibile far ciò con dei servizi gratuiti che abbiamo a disposizione online, che garantiscono comunque un ottimo risultato finale!

Partiamo dal presupposto che per realizzare una animazione gif dobbiamo mettere in sequenza una serie di immagini (due o più) e, tramite una semplice operazione che vi illustrerò, dobbiamo animarla…

Prendiamo come esempio l’immagine animata che ho appena realizzato, ovvero questa:

hellogif (1)

Per crearla, sono partita da una base grafica realizzata da me (nel mio caso, per la base grafica ho utilizzato Photoshop)… se volete potete utilizzarla anche voi per le vostre prove, eccola qui sotto:

heartbase

Salvate questa immagine (o createne una voi, anche una base completamente trasparente va benissimo) e recatevi su http://www.picmonkey.com/ , un editor grafico online completamente gratuito.

Una volta effettuato l’accesso a questo sito, cliccate in alto il bottoncino “Edit” e scegliete dal vostro Computer l’immagine di base che volete utilizzare.

Una volta effettuata la scelta, visualizzerete l’immagine stessa in primo piano, nello spazio apposito pereditarla (modificarla a piacere).

A questo punto andiamo a realizzare due immagini con la stessa base grafica, inserendo, nel punto in cui desideriamo, una scritta.

Clicchiamo nel menù a sinistra dell’Editor grafico sull’icona Tt, che ci permetterà di inserire un testo scegliendo il nostro Font preferito (tipo di carattere) e modificando a piacere il colore dello stesso agendo sul piccolo menù che apparirà in automatico.

Ad esempio, ecco la mia prima base grafica per la realizzazione della piccola animazione:heartbase1

Dopo aver inserito il nostro testo, modificato la grandezza dello stesso, la posizione ed il colore,salviamo l’immagine, cliccando sul bottoncino in alto “Save“, avendo l’accortezza di salvare lastessa immagine in formato png e non jpg (il formato png mantiene infatti inalterata la trasparenza dell’immagine e va a preservare la qualità della stessa in termini di nitidezza e colori).

Dopo aver salvato la prima immagine, il programma/servizio online tornerà in automatico in modalità Editor.

Senza spostare il box di scrittura, andiamo ora a modificare solo il colore del testo, creando una seconda immagine, nel mio caso, questa:

heartbase2

E’ importante, in questo caso, non modificare null’altro e soprattutto non spostare in alcun modo il testo, altrimenti il risulato finale non sarà dei migliori ed il testo risulterà “traballante”.

Facciamo la stessa operazione, salvando l’immagine, sempre in formato png.

Ora, per creare la nostra animazione, rechiamoci su http://picasion.com/ e carichiamo le nostre due immagini in sequenza, cliccando su “Choose file”. In ogni box possiamo caricare, come sapete, una sola immagine. Nel box numero 1, carichiamo la nostra prima creazione, in quello numero 2, la seconda immagine realizzata con l’editor grafico.

Dopo aver caricato le due immagini, andiamo necessariamente a specificare la larghezza della nostra immagine animata, in base a quella che è la grandezza effettiva in pixel delle immagini da noi create. L’altezza viene calcolata in automatico da questo servizio online.

Nel nostro caso, la larghezza dell’immagine di base è di 180 px.  Clicchiamo quindi sul box “Size” e scegliamo l’opzione “Advanced”.  Così facendo comparirà un nuovo piccolo box con la scritta “Your size”, nel quale scriviamo la larghezza in pixel dell’immagine stessa (nel nostro caso il numero 180, senza l’aggiunta di null’altro).

Negli altri casi, per sapere di preciso la larghezza delle vostre immagini, vi basterà selezionarle e passare il mouse
sulle stesse (sul vostro pc): vi apparirà, come di certo sapete, un box informativo. Guardate alla voce “Dimensions”. La larghezza è il primo valore riportato. La nostra immagine, ad esempio, è di  180×218 px (pixel). 180 px è quindi il valore numerico della larghezza, da inserire nel box “Size” di Picasion.

Vi consiglio, ora, di lasciare invariata la velocità di animazione, cioè di lasciare nel box “Speed”, il valore standard, cioè “Normal”… in questo spazio possiamo, infatti, andare anche ad aumentare o diminuire la velocità della stessa animazione, cliccando ad esempio, su “Fast”, “Faster” o  anche su “Slow”, ecc… a seconda dei nostri gusti e del risultato finale che vogliamo ottenere.

Clicchiamo ora su “Create Animation” e la vostra animazione è pronta!

L’immagine ottenuta è in formato gif e vi sarà molto utile per mettere in evidenza delle sezioni particolari del vostro sito o per tutti gli usi che vi suggerirà la vostra fantasia.

Spero che questo tutorial vi sia utile e che in ogni caso vi abbia dato uno spunto creativo!

Fiordiluna

 

Altri Post


Fiordiluna, classe 1985, laureata in legge, blog designer e Art designer per passione, esprimerà se stessa in questo blog con i suoi pensieri e le sue rifessioni!

♥Il blog che vedete è interamente realizzato da me, nella grafica e nei contenuti. Se vi piace il mio stile e desiderate un tema blog WordPress personalizzato, li realizzo su commissione a costi modici. Per info e richieste: [email protected]

Calendario post
maggio: 2017
L M M G V S D
« Dic    
1234567
891011121314
15161718192021
22232425262728
293031  

Visite ricevute

Back to Top