GIMP è un software straordinariamente potente considerando che è gratuito. I web designer, in particolare, potrebbero essere grati per la sua capacità di produrre semplici-g.webp
Le-g.webp
Come creare una-g.webp" />
I seguenti passaggi mostrano una semplice animazione delle dimensioni di un banner web utilizzando un paio di elementi grafici di base, del testo e un logo.
Le istruzioni in questo articolo si applicano a GIMP versione 2.10.12.
-
Apri un nuovo documento. In questo esempio, abbiamo selezionato il modello preimpostato di Banner Web mobile grande 320x100.
Per la tua animazione, puoi selezionare una dimensione preimpostata o impostare dimensioni personalizzate a seconda di come utilizzerai l'animazione finale.
Per questo tutorial, l'animazione sarà composta da sette fotogrammi e ogni fotogramma sarà rappresentato da un livello individuale, il che significa che il file GIMP finale avrà sette livelli, incluso lo sfondo.
-
Imposta il fotogramma uno. L'animazione inizierà con uno spazio vuoto, quindi non sono necessarie modifiche al livello effettivo Sfondo poiché è già bianco.
Tuttavia, è necessaria una modifica al nome del livello nella tavolozza Layers. Fare clic con il pulsante destro del mouse sul livello Sfondo nella tavolozza e selezionare Modifica attributi livello.
Image -
Nella finestra di dialogo Modifica attributi del livello che si apre, aggiungi (250ms) alla fine del nome del livello. Questo imposta la quantità di tempo in cui questo fotogramma verrà visualizzato nell'animazione. Il ms sta per millisecondi e ogni millisecondo è un millesimo di secondo. Questo primo fotogramma verrà visualizzato per un quarto di secondo.
Image -
Imposta il fotogramma due. Per il tutorial, per questo frame viene utilizzato un grafico dell'impronta. Vai a File > Apri come livelli e seleziona il file grafico. Questo posiziona l'impronta su un nuovo livello che può essere posizionato come richiesto usando lo Strumento Sposta.
Image -
Come per il livello di sfondo, questo nuovo livello deve essere rinominato per assegnare il tempo di visualizzazione del fotogramma. In questo caso, 750 ms.
Nella tavolozza Layers, l'anteprima del nuovo livello sembra mostrare uno sfondo nero attorno alla grafica, ma in re altà quest'area è trasparente.
Image -
Imposta i fotogrammi tre, quattro e cinque. I prossimi tre frame sono più impronte che attraverseranno il banner. Questi vengono inseriti allo stesso modo del fotogramma due, utilizzando la stessa grafica e un' altra grafica per l' altro piede. Come prima, il tempo è impostato su 750 ms per ogni fotogramma.
Ognuno dei livelli dell'impronta ha bisogno di uno sfondo bianco in modo che sia visibile un solo fotogramma – attualmente, ognuno ha uno sfondo trasparente. Possiamo farlo creando un nuovo livello immediatamente sotto un livello dell'impronta, riempiendo il nuovo livello di bianco e quindi facendo clic con il pulsante destro del mouse sul livello dell'impronta e facendo clic su Unisci giù
-
Imposta il fotogramma sei. Questa cornice è solo una cornice vuota riempita di bianco che darà l'impressione che l'impronta finale scompaia prima che appaia la cornice finale. Abbiamo chiamato questo livello Intervallo e abbiamo scelto di avere questo display per soli 250 ms.
Non è necessario dare un nome ai livelli, ma può rendere più facile lavorare con i file a strati.
Image -
Imposta il fotogramma sette. Questo è il frame finale e mostra del testo insieme al logo Lifewire.com. Il primo passo qui è aggiungere un altro livello con uno sfondo bianco.
Image -
Successivamente, usa lo Strumento Testo per aggiungere il testo. Questo viene applicato a un nuovo livello, ma ce ne occuperemo una volta aggiunto il logo o una nuova immagine, operazione che può essere eseguita nello stesso modo in cui è stata aggiunta la grafica dell'impronta in precedenza.
Image -
Quando li avremo disposti come desiderato, possiamo usare Unisci giù per combinare il logo e i livelli di testo e poi unire il livello combinato con il livello bianco che è stato aggiunto in precedenza. Questo produce un singolo livello che formerà il fotogramma finale e abbiamo scelto di visualizzarlo per 4000 ms.
Image -
Anteprima dell'animazione Prima di salvare la-g.webp" />Filtri >Animazione > Riproduzione Questo apre una finestra di anteprima con pulsanti autoesplicativi per riprodurre l'animazione. Se qualcosa non va bene, a questo punto può essere modificato. Altrimenti, può essere salvato come-g.webp" />.
La sequenza di animazione è impostata nell'ordine in cui i livelli sono impilati nella tavolozza Layers, partendo dallo sfondo o dal livello più basso e procedendo verso l' alto. Se la tua animazione viene riprodotta fuori sequenza, dovrai regolare l'ordine dei tuoi livelli, facendo clic su un livello per selezionarlo e usando le frecce su e giù nella barra inferiore della palette Livelli per cambiarne la posizione.
Image -
Salva la-g.webp" />. Il salvataggio di una-g.webp" />File > Salva una copia e dai al tuo file un nome pertinente e seleziona dove vuoi salvarlo.
Image -
Avanti, vai su File > Esporta come per salvarlo come-g.webp" />.
Image -
Nella finestra di dialogo Esporta immagine che si apre, seleziona Seleziona tipo file e scorri fino all'immagine-g.webp" />. Se ricevi un avviso sui livelli che si estendono oltre i bordi effettivi dell'immagine, seleziona il pulsante Ritaglia.
Image -
Questo porterà ora alla finestra di dialogo Salva come GIF con una sezione di Opzioni-g.webp" />. Puoi lasciarli ai valori predefiniti, anche se se vuoi che l'animazione venga riprodotta solo una volta, dovresti deselezionare Ripeti per sempre.
Image - Ora puoi condividere la tua-g.webp
Conclusione
I passaggi mostrati qui ti forniranno gli strumenti di base per produrre le tue semplici animazioni, utilizzando grafici e dimensioni dei documenti diversi. Sebbene il risultato finale sia piuttosto semplice in termini di animazione, è un processo molto semplice che chiunque abbia una conoscenza di base di GIMP può ottenere.
