Come creare una animazione in GIF con Gimp.

Nel post precedente abbiamo visto come creare una immagine animata in formato GIF con Photoshop e come promesso vediamo adesso come crearla con Gimp che è programma di grafica gratuito e multipiattaforma.

Chi ancora non avesse Gimp nel proprio computer può installarlo dalla Home di Gimp cliccando su Download. Se avete un computer Windows la pagina rileverà automaticamente se il vostro OS è a 32bit o a 64bit per poi farvi scaricare la giusta versione. Sarà installato automaticamente anche il linguaggio impostato nel computer.

Gimp è un ottimo programma di grafica solo di pochissimo inferiore al costoso Photoshop. Con Gimp si possono fare innumerevoli modifiche grafiche come convertire le immagini in altri formati, rendere trasparenti gli sfondi delle foto, nascondere un volto o ottimizzare le immagini con Riot.

Come convertire un video in una immagine animata in GIF con Photoshop.

La conversione di un filmato in una immagine animata in formato GIF è una operazione molto semplice che può essere fatta con uno dei tanti software convertitori gratuiti. Ricordo tra gli altri iWisoft Free Video Converter e Format Factory. Con questi due software si può convertire anche solo una clip del video. Con Format Factory per esempio nella colonna di sinistra si va su Video > GIF quindi si su Aggiungi File con cui si sceglie il filmato da convertire.

Si clicca quindi su Opzioni che apre una nuova finestra per selezionare la porzione di filmato da convertire cliccando su Ora di Inizio e Ora di Fine. Si clicca su OK in tale finestra per chiuderla quindi ancora su OK nella precedente finestra. Si va quindi su Vai per per iniziare la conversione in GIF.

Free Video to GIF Converter per creare immagini animate in GIF da un video.

Gli esperti di grafica e grandi conoscitori di Photoshop non hanno grossi problemi a creare immagini animate. Se non hanno nel computer quel costoso programma di Adobe possono utilizzare la sua alternativa gratuita Gimp con cui si possono creare animazioni a partire da testi o immagini.

Con Photoshop si può estrarre una immagine in GIF anche da un filmato. Ricordo anche l'ottimo GIFNinja per creare immagini in GIF a partire da un video.

Come creare banner di animazioni in GIF nel Profilo di Google Plus.

Le immagini in formato GIF di dimensioni 150x150 pixel hanno la particolarità di essere mostrate animate direttamente nella pagina di Google Plus senza doverle aprire nel Lightbox. Nella scheda Informazioni che si trova nel Profilo di Google+ è possibile inserire fino a 5 foto. Possiamo bannerizzare una nostra immagine con un servizio come Avatar Banner che scompone una foto in cinque parti ed è analogo a servizi identici per il nuovo Profilo di Facebook. 

Considerato che su Google Plus si possono inserire anche immagini animate si possono creare delle composizioni veramente originali. L'importante è che l'immagine che si carica in formato GIF sia di 150x150 pixel. Si può per esempio estrarre uno spezzone da un video e convertirlo in una immagine animata usando Photoshop, Format Factory o il servizio online GIFNinja. Vediamo nel dettaglio come creare con GIFNinja cinque immagini animate formate a loro volta dalle stesse cinque foto che dobbiamo caricare nel servizio online in ordine sfalsato per non vedere sempre la immagine in contemporanea in tutte le finestre. Ricordo che con GIFNinja si può anche configurare la velocità della animazione. Vogliamo cioè creare una cosa di questo genere

GIFNinja per creare animazioni in GIF da immagini o da video.

Le immagini animate in formato GIF sono molto apprezzate perché funzionano in loop e si riproducono senza soluzione di continuità. Per contro sono molto pesanti e rendono il caricamento dei siti più lungo. Si può comunque sempre trovare un buon compromesso tra le esigenze di navigabilità e quelle estetiche. Dopo aver illustrato come convertire un video, o un suo estratto, in una immagine animata mediante Photoshop, passo a illustrarvi un metodo alternativo, molto più semplice che possono usare tutti coloro che non posseggono quel costoso programma di grafica.

GIFNinja consente di creare gratuitamente delle immagini animate in GIF caricando le foto da usare come singoli fotogrammi o anche convertendo un video, necessariamente di pochi secondi. Se si parte da delle foto dobbiamo andare su Select Files e selezionare tutte le immagini da usare cliccandoci sopra tenendo premuto il tasto Ctrl (CM su Mac). Verranno visualizzate tutte le immagini caricate di cui potremo modificare l'ordine attraverso il drag and drop. In basso si può inserire Titolo e Descrizione e cliccare su Looks good, build it!

Come convertire video in immagini animate in GIF e postarle su Google+.

Coloro che hanno ricevuto un invito per Google+ si saranno resi conto di una differenza fondamentale rispetto a Facebook. E' possibile caricare immagini animate in formato GIF cosa che invece non si può fare su Facebook. Ci sono coloro che le amano e quelli che le detestano. Per i secondi consiglio l'estensione GIF Stopper che funziona in Chrome e che blocca le immagini animate. Dalla navigazione su Google+ si nota che la maggior parte delle immagini animate postate sono state estratte da dei video. Ci sono diversi strumenti per convertire dei videoclip in GIF. Consiglio Beneton Movie GIF che ho già avuto modo di recensire insieme ad altri strumenti per creare GIF animate.

Vediamo come sia possibile convertire dei clip video in immagini animate anche con il celebre programma gratuito Format Factory. Se non avete ancora nel computer questo eccellente, software vi consiglio di provvedere subito scaricandolo dalla pagina di download di Format Factory. Dopo aver aperto il programma si sceglie Video > Tutti verso GIF

Come creare un countdown personalizzato.

I siti che offrono widget quali orologi o countdown sono piuttosto comuni nel web. Ho già recensito Clock Easy e Flash Countdown ma ho anche mostrato come creare un orologio digitale senza aiuto di siti terzi. CountDown Clock Codes offre conti alla rovescia personalizzati per tutti i gusti. Nella colonna di sinistra sono presenti vari modelli da usare. Ce ne sono in stile MySpace, altri per ricorrenze e avvenimenti quali compleanni, matrimoni, vacanze, feste, ecc. Dopo aver scelto il template, l'unica cosa che non si può modificare è la scritta animata "Until" che si potrebbe tradurre come "Prima di". Nella parte alta vengono visualizzati i giorni, le ore, i minuti e i secondi che mancano all'evento

Come creare e modificare immagini animate in formato GIF.

Agli albori del web non esisteva ancora il formato flash per la riproduzione dei video nel browser. Tutto quello di animato  che c'era online era dovuto alle immagini in formato GIF. Ora sono andate un po' fuori uso perché soppiantate dai filmati che hanno formati molto più leggeri e sono molto più performanti. Non si è però assistito alla morte di queste immagini che sono una semplice raccolta di singoli fotogrammi. Sono infatti ancora utilizzate da molti blogger per banner e altre personalizzazioni che sarebbe complicato fare con i video.

Gli strumenti gratuiti a disposizione per la creazione di questo tipo di immagini sono moltissimi. Non occorre avere grande dimestichezza con tool grafici sofisticati come Photoshop o Gimp per generare delle GIF animate. In articoli passati mi sono già occupato di come creare delle GIF. Ricordo il tool online Make a Gif, molto semplice e intuitivo, GIF Creator un programma gratuito e intuitivo, GIF UP altro tool online che però inserisce un watermark nelle realizzazioni. Con questo post mi ripropongo di arricchire la raccolta di strumenti gratuiti per la gestione delle GIF.

Beneton Movie GIF è un programma freeware che riesce a generare GIF animate arricchendole anche di effetti speciali. Durante l'installazione bisogna cercare di evitare di iscriversi a un sito di sondaggi che funge da sponsor e selezionare solo il programma che si desidera. L'interfaccia è intuitiva

Come sostituire in Blogger il titolo del widget con una immagine.

Con l'avvento del Designer Modelli è possibile personalizzare molti aspetti dei titoli dei widget. Si possono per esempio modificare i colori di sfondo e quelli del testo, la dimensione e il tipo dei caratteri. Comunque c'è sempre qualcuno che non è soddisfatto del tipo di modifiche che si possono apportare e vuole sempre qualcosa di più. Tempo fa mi fu chiesto in un commento se fosse possibile sostituire il titolo di un singolo widget con una immagine. In realtà la cosa è abbastanza semplice ma me ne ero dimenticato e il post con il relativo tutorial non lo avevo mai scritto.

Pongo rimedio adesso con la ragionevole certezza che alcuni lettori si appresteranno alla modifica subito dopo aver letto questo post. Come detto l'obiettivo è quello si inserire una immagine al posto del titolo di un singolo gadget. La foto da inserire può anche essere animata e, per questioni di estetica, deve avere dimensioni compatibili con quelle del titolo che va a sostituire. Come test ho usato il celebre sito CoolText che permette di creare delle scritte molto suggestive che poi possono essere salvate come immagine. Non sto qui a illustrare come ottenerla dato che si tratta di un procedimento molto intuitivo. Si scarica cliccando con il destro del mouse e scegliendo Salva immagine con nome. Ecco un esempio

Come inserire immagini fisse o fluttuanti in uno dei quattro angoli del blog su Blogger.

Inserire immagini fisse o statiche significa che devono rimanere nella stessa posizione quando si scrolla la pagina. Si possono inserire in qualsiasi punto del blog modificando i parametri e possono essere messe senza collegamenti o con un link a una determinata pagina. Potrebbe essere utile inserire per esempio una icona di Facebook e una di Twitter con i relativi collegamenti all'account o alla pagina fan. Si può pensare anche di mettere una bella icona dei feed con il collegamento all'URL che abbiamo avuto da FeedBurner.

Per i tag si deve utilizzare la terminologia inglese. Si tratta di espressioni conosciutissime ma ricordo che top e bottom sono rispettivamente alto e basso e left e right rispettivamente sinistra e destra. Per inserire una immagine con un collegamento a una pagina dobbiamo utilizzare questo codice

 <a href="URL DEL LINK"><img style="border:none;position:fixed;top:10px; left:10px;" title="Titolo" alt="Nome Immagine" src="URL DELL'IMMAGINE"/></a>

Mostrare una immagine che indica lo stato di caricamento di una pagina del blog.

Ci sono blog che impiegano molto tempo a caricarsi perché sono pieni di immagini pesanti e di widget. In questo caso può essere carino inserire una immagine che mostra al navigatore lo stato di caricamento della pagina che è stata aperta. In rete ci sono almeno un paio di siti che offrono gratuitamente delle immagini a questo scopo.

Ajaxload.info consente di selezionare l'immagine animata che più ci piace da un menù verticale

Si possono selezionare anche il colore di sfondo e quello in primo piano (background e foreground). Si clicca su Generate It per creare l'immagine personalizzata quindi su Download It per scaricarla.

Come addobbare il blog con effetti speciali per le feste di Natale.

Dopo aver presentato l'effetto della neve che cade basato su immagini di fiocchi o cristalli di neve in caduta oscillante e dopo aver proposto l'effetto tempesta di neve con la possibilità di personalizzarne il colore, ho pensato di racchiudere in un unico script alcuni abbellimenti per il blog da utilizzare durante le feste natalizie.

Si tratta di unire insieme la tempesta di neve a delle campane da visualizzare nella parta alta del blog. Ne propongo di tre tipi ma si possono facilmente inserire le immagini che più ci piacciono. Per l'installazione dell'effetto basta andare su Design > Aggiungi un gadget > HTML/Javascript e aggiungere il seguente codice in Sezioni del sito senza immettere il titolo

<!--Widget Natale Inizio-->
<script type="text/javascript" src=" ... jquery-snowfalls.min.js"></script>  <script type="text/javascript"> $("body").append($("<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpw5Zmq2vzZeJisbgXTXG0QrSqHsAca2Zn3F_WCDsV1cWAnT5Lph_0ZF2m8T8Wqy-DhyphenhyphenwZBbNr7DC5XGpYmB-1PfNtrH7O9EQkmoC1_d2PRBsxg3ho0lfmJzdhiq1TOGB3VxQIwIWK6pes/' style='position:absolute; top: 15px;left:0px;border:none;'/><img id='xmasleftbell' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dX4rMdueNNVAxJ-4Vj_ryBjxM5ZkzZdR3hlsBqc3_KV1X2uPDSMIAJ7h-jHdKF8SGKbXE3HfCk7qFvbT_XoAiqvnkoxGdJ1NtEGrBbEJJgSfo4lH16Vpqwn37yGGSg_SOxdYFmDTR-rM/' style='position:absolute; top: 15px;right:0px;border:none;'/>")); </script> <script src=' .... cascata-di-neve.js' type='text/javascript'></script> <script type="text/javascript"> $(document).snowfall({flakeCount:199}); </script>
<!--Widget Natale Fine - www.ideepercomputeredinternet.com-->

I due file javascript il cui URL deve essere incollato al posto di  ... jquery-snowfalls.min.js e  .... cascata-di-neve.js possono essere scaricati da questo archivio e caricati su DropBox.
Dopo aver salvato il widget e averlo posizionato in qualsiasi punto del blog, il vostro sito prenderà questo aspetto

Photoscape è un fantastico editor di immagini che crea GIF con un click.

Photoscape è un editor di immagini gratuito e multilingue. Dopo aver cliccato su Download e aver scaricato il programma, l'installazione non  presenta difficoltà. Si deve solo selezionare se mostrare l'icona nel desktop o nell'avvio veloce, cosa comunque che può essere configurata in seguito. Si tratta di un programma dalla grafica veramente rivoluzionaria rispetto a quelli cui siamo abituati e che è in grado di fare un sacco di cose. In un articolo non ho la pretesa di illustrarle tutte e mi limiterò a quelle più interessanti secondo una mia valutazione soggettiva. Ecco l'interfaccia del programma

Sono presentate le varie sezioni sia sotto forma di menù nella parte alta che in una suggestiva ruota nel centro della finestra. Le schede presenti servono ciascuna per una operazione particolare e sono:

Come creare delle animazioni in GIF mediante Windows Movie Maker e Format Factory.

I filmati che si vedono sul web sono quasi tutti in formato flash e hanno bisogno di un player per essere visti. Un'alternativa è il formato SWF che è sempre in flash ma che si visualizza senza player. Si possono inserire questi tipi di filmati direttamente in un blog attraverso questo tutorial che ho pubblicato qualche tempo fa.

Una valida alternativa a questi oggetti sono le immagini animate in formato GIF che però hanno la controindicazione di essere molto pesanti. Occorre quindi selezionare solo pochi secondi di un filmato per poterle postare nel blog. Vediamo come fare con Windows Movie Maker che è un programma gratuito della Microsoft che viene installato in tutti i computer con OS Windows.

Tweetgif per pubblicare animazioni in GIF e condividerle su Twitter.

Il formato GIF è relativo alle immagini ed è quello più pesante perché si tratta, in genere, di animazioni e il file è formato da tutti i fotogrammi che la compongono. Questa pesantezza può portare a un loro uso limitato visto le problematiche recentemente introdotte da Google relative alla velocità di caricamento della pagina.

Certo che condividere queste animazioni su Twitter è assolutamente senza controindicazioni. TweetGif è un sito specializzato proprio in questo settore

Gif2Apng per convertire immagini animate in GIF nel formato meno pesante APNG.

Il formato APNG è stato introdotto come nuovo standard delle immagini animate al posto dell'usatissimo GIF. Ho già illustrato molti tool in grado di creare delle immagini in APNG a partire da singoli fotogrammi. Tra i più decisi nell'applicazione di questo standard pare esserci la fondazione Mozilla che ha sviluppato un APNG Editor veramente interessante e che ho usato per fare dei test di realizzazione.

Il problema non indifferente di questo formato è che ancora non è stato accettato da tutti i browser e le animazioni si vedono solo su Firefox. Il vantaggio rispetto alle immagini animate in GIF risiede in una minore pesantezza e quindi in una maggiore velocità di caricamento.

Evolver per creare gratis animazioni in tre dimensioni (3D) in modo facile e divertente.

Vanno nascendo sempre nuovi servizi per la creazione di avatar in 3D che consentono anche ai non professionisti della grafica, tantomeno tridimensionale, di ottenere dei risultati estremamente sofisticati. Evolver è uno di questi e permette di farlo tramite dei semplici passaggi, il primo dei quali deve essere la registrazione. E' presente anche una versione Pro di cui non mi occuperò. Si inizia andando su Get Started e si può scegliere uno degli avatar già predisposti sulla sinistra

Se ci siamo registrati, si può caricare una foto che deve essere in formato JPG, di 600 pixel di altezza minima, di 100KB come size minimo consentito e tale da avere il volto in posizione perfettamente frontale.

Dopo questa operazione si può andare su Customize per personalizzare il nostro avatar

Si possono modificare la faccia, i capelli, gli occhi, la pelle, il corpo e l'abbigliamento. Per ogni scheda ci sono le varie opzioni di intervento; per esempio per la faccia si possono cambiare forma dell'ovale, inserire occhiali, modificare gli orecchi, la bocca, il mento e il naso. C'è anche un cursore per gestire la modifica in modo continuo. Quando abbiamo finito clicchiamo su Save.

Andando su My Dashboard si potranno vedere tutti gli avatar che abbiamo creato e che possiamo rieditare. Cliccando su Transport si accede alla fase dell'inserimento del moto.

Si possono scegliere tra più di venti scene di movimento che vanno dall'inchino, al ballo, dal respiro alla corsa, dalla tosse al salto, ecc. Si può selezionare anche il formato di uscita (in GIF, in FLV o JPG), la dimensione da 82 a 492 pixel e il colore di background dell'avatar.

Il processo durerà pochi secondi e saremo avvertiti quando è terminato da una finestra che si apre sul sito o da una email se nel frattempo lo abbiamo lasciato.

Si potrà cliccare su Download per scaricare l'avatar, incorporarlo in uno dei moltissimi servizi a disposizione oppure semplicemente copiarne il codice HTML da mettere per esempio nel blog.

E' un servizio molto simile a Avatara ma con qualche funzionalità in più.

Festeggia San Valentino con wallpaper, icone, immagini e effetti da mettere nel blog.

Quest'anno San Valentino e Carnevale si festeggiano contemporaneamente e sono curioso di vedere come sarà gestita questa coabitazione. In attesa di scrivere un post su Carnevale ecco alcune risorse che potrebbero essere utili per chi volesse festeggiare la festa degli innamorati su internet.

Intanto dico subito che su Facebook non si scherza e gli utenti di Farmville hanno già inviato 220 milioni di regali virtuali nelle ultime 18 ore! Non amo particolarmente le applicazioni di Facebook ma bisogna prendere atto che si tratta ormai di un fenomeno di massa.

Se volete festeggiarlo inserendo uno sfondo personalizzato nel vostro computer vi consiglio le raccolte che potete trovare su Technospot, ma soprattutto quelle su Theholidayspot, quelle su Valentine's Corner o quelle su Kate.net.

Sempre in tema di wallpaper sono molto belli anche i 40 proposti da Psdtop di cui ne riporto uno qui sotto

Se invece siete interessati alle icone da inserire nei messaggi, nel blog o in qualsiasi altro posto vi consiglio quelle di Crazyprofile, quelle di Coolbuddy. Molte di queste icone sono animate, se volete rimanere nel classico date uno sguardo ai pacchetti di icone per San Valentino di Iconarchive o di Iconsmaster.

Se invece delle icone volete delle immagini che abbiano come tema questa festività date uno sguardo a Hellasmultimedia. In Castl sono specializzati in Clipart sempre di grande impatto. Forse però la raccolta più interessante la trovate su St Valentine's day.

Nel caso amiate, come me, le immagini animate in formato GIF vi conviene dare un'occhiata a Amazing Animations e a Critical Layout. Ecco un esempio tratto dal primo sito

Se volete inserire degli effetti nel blog potete copiare il codice da inserire in un elemento HTML/Javascript che troverete nei post

• Inserire cuoricini animati nel blog -
• Inserire cuori animati nel blog -   

Accanto sono visibili le pagine in cui ho caricato questi effetti come dimostrazione.

Come inserire delle immagini anche animate con dei collegamenti a post del blog o ad altri siti.

Inserire dei collegamenti a delle immagini nel blog è una delle operazioni più semplici che però non è proprio immediata. Bisogna distinguere tra inserire queste immagini in un articolo oppure in un elemento pagina. Nel primo caso non ci sono difficoltà perché sia se si usa l'editor di Blogger che Windows Live Writer c'è sempre la possibilità di selezionare l'immagine e cliccare sull'icona o sul collegamento inserisci link per creare il collegamento desiderato.

E' sempre meglio inserire anche il Titolo dell'immagine perché sarà quello che vedrà il lettore quando ci passerà sopra con il mouse e poi la sua presenza è molto apprezzata dai motori di ricerca.

Nel caso invece in cui si voglia creare un elemento pagina con una foto collegata ad una pagina web possiamo usare due metodi. Il primo è il più banale e consiste nello sfruttare l'apposito widget di Blogger. Si va cioè su Aggiungi un gadget > Foto

Dopo aver selezionato il tIpo di elemento pagina non resta che riempire i campi successivi

Si seleziona l'immagine dal disco rigido o dal web, si inserisce il titolo, eventualmente una didascalia e il collegamento alla pagina o al sito che vogliamo si apra quando ci si clicca sopra. Si termina cliccando su Salva e posizionando la foto con il mouse nel punto del blog che si preferisce.

Le immagini animate non vengono caricate in Blogger attraverso questo metodo quindi bisogna seguire un'altra via. Occorre caricare l'immagine su un nostro account come per esempio il gratuito Skydrive e acquisirne l'URL cliccandoci sopra fino a che non si vede l'animazione. L'indirizzo si copierà direttamente dalla barra del browser. Quindi si personalizza questo codice

<a href="URL_del_collegamento" target="_blank" ><img title="titolo immagine" alt="nome immagine" src="URL_immagine" /></a>

Le personalizzazioni riguardano

1. URL_del_collegamento: si sostituisce con il link alla pagina o al sito che si vuole venga aperto quando ci si clicca sopra
2. target="_blank": si può inserire questo attributo se si vuole che il collegamento si apra in un'altra scheda del browser, altrimenti si può eliminare. E' conveniente inserirlo se il link è esterno per non far uscire dal nostro sito il lettore
3. Titolo immagine: è quello che viene mostrato al lettore quando punta l'immagine con il mouse
4. Nome immagine: può essere lo stesso del titolo ed è un altro attributo molto gradito ai motori di ricerca perché è quello che mostra il browser nella malaugurata ipotesi non riesca ad aprire l'immagine
5. URL_immagine: si inserisce l'URL dell'immagine che abbiamo caricato su Skydrive o su altro hosting

Dopo aver preparato il codice si va su Layout > Elementi pagina > Aggiungi un gadget > HTML/Javascript, si incolla in Sezioni del sito e si clicca su Salva; successivamente si posiziona con il mouse sempre in Layout > Elementi pagina.

Concludo mostrando come esempio questo codice

<a href="http://parsifal32.blogspot.com/2009/01/cuoricini-animati-che-cadono-da-mettere.html" target="_blank"><img title="Cuore e cuoricini" alt="Cuore_animato" src="http://public.blu.livefilestore.com/y1pd9Dm0W4ThIMhXQg5pFSbb-wndjw_EJRh9ZBTIOl8bDe9tKAlICgwC8MJTW-3Da4lMicK4DY14IFmKICKzJGHgw/heartani.gif" /></a>

che porta all'inserimento della seguente immagine animata

con collegamento all'effetto cuoricini di San Valentino.

Inserire nel blog effetti fotografici in occasione del Natale.

Dopo aver ripreso l'articolo sull'effetto della neve che cade ecco che voglio proporvi altre cosucce per addobbare il blog in occasione delle Feste. Si tratta di personalizzazioni prese principalmente da siti web2.0. Per esempio da ImageChef è possibile selezionare un tool per inserire una sfera di vetro con canonica neve all'interno da personalizzare con una propria scritta

ImageChef: Sfera di vetro -

 

Sempre da ImageChef è possibile personalizzare un pupazzo di neve

ImageChef: Pupazzo di neve -

 

 

Ancora da ImageChef è possibile creare una spilletta con un fiocco di neve con testo personalizzato

ImageChef: Badge fiocco di neve -

Se vi piacciono le immagini animate date uno sguardo a Animated Gifs of Christmas e ne troverete di tutti i tipi. Sono suddivise in categorie e ce ne sono veramente per tutti i gusti, alcune anche in tre dimensioni. Si possono scaricare anche degli screensaver dedicati al Natale e anche degli Wallpaper animati. Ecco qualche esempio