*Tutti gli usi dei contenuti qui presenti - e dei loro derivati - sono strettamente proibiti senza esplicito consenso dell'autore, fatta eccezione la diffusione senza modifiche attraverso canali media e social media.* ___ ![](https://cdn.steemitimages.com/DQmXzBmPYaLbX1XYis5wi1zbCnsWZ6bqstRNM9xzj41jQJ5/come%20creare%20un%20banner%20animato.jpg) ___ *Le informazioni qui sotto riportate sono valide solo al momento della stesura di questo articolo.* ___ **Ciao!** Nei giorni scorsi ho deciso di creare un banner di saluto da inserire all'interno dei miei post, un “upgrade” del solito arrivederci. L'idea era quella di creare un elemento contenente delle semplici parole e di cui hai visto un'anticipazione nella copertina. Ma con un ma: non un'immagine statica, bensì una GIF animata. Qui sotto trovi il risultato finale. ![](https://cdn.steemitimages.com/DQmebDrfZQQdUKGZ2je16WwXJsjjrXdW1tk8SmuYQfFvfu1/to%20the%20next.gif) E tu sei in grado di creare un elemento come questo? No? È semplice, sebbene richieda un po' di tempo. Vediamolo, sfruttando #STEP2STEEM, un'iniziativa che lanciai tempo fa e di cui trovi maggiori info **[QUA](https://steemit.com/hive-184714/@davidesimoncini/step2steem-e-la-mia-opera)**. ___ # Prima d'iniziare: che cosa ci serve? Certamente un **pc**, desktop o portatile. Poi le applicazioni di tipo open-source: | [Inkscape](https://inkscape.org/it/?switchlang=it) | [Paint.net](https://www.getpaint.net/) | [GIMP](https://www.gimp.org/) | |--------------|-----------|------------| che dovremo aver scaricato e installato sul nostro pc. ___ # Iniziamo con lo step-by-step Nel mio caso ho aperto la suite **Inkscape**. Ho creato alcuni elementi che ho evidenziato grazie a dei contorni in colore blu. Gli elementi erano: - un rettangolo di colore grigio molto chiaro; - due scritte dello stesso numero di caratteri (il carattere, in questo caso, è la singola lettera o il singolo punto esclamativo che vedi nell'immagine); - una serie di scritte posizionate a lato del rettangolo. ![](https://cdn.steemitimages.com/DQmQC9dkLdXwwLK5nREVikVPnAm5TwSGpeWBebuuS4RmRuU/step1.jpg) Le scritte a lato del rettangolo sono state distanziate in maniera simile le une dalle altre, e sono tutte contenute in uno spazio compreso tra il prolungamento dei lati maggiori del rettangolo. Questo è importante. Queste 6 scritte servono infatti per posizionare successivamente le lettere all'interno del rettangolo. Le scritte che andranno a costituire il focus della nostra GIF sono quelle posizionate sopra e sotto il rettangolo grigio. Nel mio caso rappresentano la traduzione italiana e inglese dello stesso concetto. Iniziamo concentrandoci sulla prima lettera della scritta sopra il rettangolo, poi sulla prima lettera della scritta sotto il rettangolo. Potremo selezionarle una per una dopo aver convertito il testo in un tracciato, cliccando su **TRACCIATO** (voce che trovi su Inkscape nella barra in alto), poi **DA OGGETTO A TRACCIATO**, e poi cliccando sul testo con il tasto destro del mouse, per finire cliccando su **DIVIDI**. Da questo momento potremo selezionare le lettere singolarmente. ![](https://cdn.steemitimages.com/DQmXqTiuozWgthoUQeJYG7yvRCNrXG3N6L9DhdYGw7zTD1p/step2.jpg) Per prima cosa, impostiamo al 30% l'opacità delle scritte sopra e sotto il rettangolo grigio chiaro. La prima lettera della scritta sopra il rettangolo deve essere spostata all'altezza della prima scritta presente (scendendo a partire dalla scritta più in alto) a lato del rettangolo. Allo stesso modo, la prima lettera della scritta sotto il rettangolo va spostata all'altezza della prima scritta presente (salendo a partire dalla scritta più in basso) a lato del rettangolo. Il risultato lo vedi qui sotto. ![](https://cdn.steemitimages.com/DQmUPcLKm4GWH6zdViPSrb5JUSUP38zxYCDAapt61vEwx1q/step3.jpg) A questo punto devi selezionare il rettangolo grigio chiaro assieme a tutti gli elementi al suo interno (quello evidenziato in blu). Quindi, clic con tasto destro del mouse e clic sulla voce **COPIA**. ![](https://cdn.steemitimages.com/DQmTkRPUegF7kqC4CzvqaXNTedjiDg9c4G9YA1dszwkjim9/step4.jpg) Ora apriamo la suite **Paint.net**. Clicchiamo alla voce **MODIFICA** in alto a sinistra, e clicchiamo su **INCOLLA COME NUOVA IMMAGINE**. Otterremo un'immagine con tutti gli elementi copiati dalla suite Inkscape.net. ![](https://cdn.steemitimages.com/DQmdHFdCvdTUZb9iZp1dgx5wE7JRS165SWDWRvbYpC5GYU2/step5.jpg) A questo punto, **SALVIAMO** l'immagine su Paint.net. Per far questo, andiamo sulla barra in alto e clicchiamo su **FILE**. Scegliamo **SALVA** e selezioniamo il nome del file (per esempio 01) e il formato del file da salvare. Io ho usato il formato *.JPG*; è possibile usare anche un *.PNG*. ![](https://cdn.steemitimages.com/DQmPgcAomGVGKQwWZNJguzz3NTykcmhfkFqka4gfDMtJdYA/step6.jpg) A questo punto torniamo a Inkscape e spostiamo, nel nostro caso, la lettera A di uno step verso il basso, ponendola all'altezza della seconda scritta più in alto tra quelle a lato. Poi posizioniamo la lettera T di uno step verso l'alto, ponendola all'altezza della seconda scritta più in basso tra quelle a lato. Cambiamo poi l'opacità di entrambe le lettere al 60%. Il risultato sarà questo. ![](https://cdn.steemitimages.com/DQmNiDyj8zZwaqu7MRTNfFs8ZLE3YBbCRxkrrf9n1U9rixV/step7.jpg) Quindi effettuiamo il passaggio di prima, copiando il rettangolo con gli elementi al suo interno; incolliamo poi sulla suite Paint.net e salviamo, questa volta dando al nome dell'immagine il numero 2. Torniamo quindi a Inkscape e ripetiamo il procedimento, spostando la lettera A di uno step verso il basso, ponendola all'altezza della terza scritta più in alto tra quelle a lato. Poi posizioniamo la lettera T di uno step verso l'alto, ponendola all'altezza della terza scritta più in basso tra quelle a lato. Modifichiamo l'opacità di entrambe le lettere spostate muovendola fino al 100%. ![](https://cdn.steemitimages.com/DQmafBe8PKXDzAUgNw1tqfnVu3qJVAGjFYDQAg358eJ2PLb/step8.jpg) Copiamo il rettangolo grigio chiaro e gli elementi al suo interno, incolliamo su Paint.net e salviamo la nostra immagine con il numero 3. # E ora? Tanta Pazienza! A questo punto torniamo a Inkscape e ripetiamo tutti gli step visti in precedenza per ogni lettera colorata delle scritte sopra e sotto il rettangolo creato in Inkscape. Salviamo ogni immagine come visto in precedenza, sfruttando Paint.net. Ogni spostamento delle lettere sopra e sotto il rettangolo grigio chiaro fornirà così un'immagine con un numero progressivo. Nel mio caso, io sono arrivato a circa 50 immagini. ![](https://cdn.steemitimages.com/DQmXPmGSXTX6PjCpsRdwFfXiVkbuiVnwRGMH1zG73Ktqzxf/step9.jpg) Dopo aver completato l'opera, ho aggiunto una sfumatura grigiastra e il mio nome, a titolo di firma. ![](https://cdn.steemitimages.com/DQmZZEX8zmaqwYLNWWpdywrpGAPShyQvpooofSNwrhXRpef/step10.jpg) Consiglio di creare una decina di copie dell'ultima immagine, perché servirà a prolungare l'istante finale nella nostra animazione. ___ # Verso l'infinito e oltre E siamo arrivati all'ultima parte della nostra avventura. Apriamo la suite **GIMP**. In alto a sinistra, clicchiamo su **FILE**. Cerchiamo poi **APRI COME LIVELLI**. ![](https://cdn.steemitimages.com/DQmQhHDZMh1sRTnDptxXt6c2pqroZMiXBXkKNSkT4t6EU5q/step11.jpg) Clicchiamoci e iniziamo a selezionare tutte le immagini che abbiamo salvato in precedenza, dalla prima all'ultima (nel mio caso, dalla 1 alla 62). Possiamo farlo cliccando sulla prima immagine e poi, tenendo premuto il tasto MAIUSC, sull'ultima. Questo metodo potrebbe essere diverso per pc non Windows. ![](https://cdn.steemitimages.com/DQmXa6oYPoi7jZZp1uv1Mt1sjwvutCNC7TTwhX6NBWezVda/step12.jpg) Clicchiamo su **APRI**. Poi andiamo di nuovo su **FILE** in alto a sinistra e clicchiamo, cercando la voce **ESPORTA COME...** ![](https://cdn.steemitimages.com/DQmPfYMmpprNt98YSeZMMogTnPQ8evKineCLCiccPsjQsyV/step13.jpg) Clicchiamoci. Si aprirà una finestra dove potremo digitare il nome della nostra GIF in alto nello spazio evidenziato in blu, e cercare la voce **SELEZIONA TIPO DI FILE** nello spazio evidenziato più in basso. ![](https://cdn.steemitimages.com/DQmajMJo57SfBgkaFsowbkM25nDAzZUXkm7cMiY3EvSDddk/step14.jpg) All'interno della stessa finestra verranno mostrati una serie di nomi che noi dovremo scorrere, fino a quando troveremo **IMMAGINE GIF**. Clicchiamoci sopra. A questo punto, andiamo a cliccare su **ESPORTA**. ![](https://cdn.steemitimages.com/DQmcKdvFtkt5dFvNYJPYPqakMm87hK82okhvbBSZZYxfrqr/step15.jpg) Comparirà una nuova finestra. Disattiviamo tutte le voci cliccando sul quadratino a lato. Poi clicchiamo mettendo la “spunta” sul quadratino vicino a ***“Opzioni GIF”:*** **COME ANIMAZIONE** e ***“Opzioni GIF”***: **CICLO PERENNE**. Poi è importante fissare il ***“Ritardo tra quadri....”*** digitando ***90***, che saranno i millisecondi di ritardo tra un'immagine e la successiva. ![](https://cdn.steemitimages.com/DQmWUsgRamAxoB2b6mnTRzqG96fWxy6jmpFvLV8TFfUh3hD/step16.jpg) Infine, clicchiamo su **ESPORTA**. ___ # Fine A questo punto, il programma impiegherà qualche momento per salvare la nostra GIF. Una trentina di secondi, diciamo. Molto cambia da un pc a un altro e a seconda della grandezza delle immagini utilizzate. Nel mio caso, consiglio di usare un rettangolo grigio chiaro di larghezza non superiore a 1600 pixel. E nulla, spero che il mio banner di saluto animato ti sia piaciuto e che il tutorial sia risultato comprensibile. Ti porgo i miei saluti e, come sempre.... ![](https://cdn.steemitimages.com/DQmebDrfZQQdUKGZ2je16WwXJsjjrXdW1tk8SmuYQfFvfu1/to%20the%20next.gif) This post join the **[Penny4thoughts experimental project](https://steemit.com/hive-184714/@famigliacurione/un-penny-per-i-tuoi-pensieri)**.