3 modi per creare schermate GIF animate del lavoro di progettazione per il tuo portfolio

Al termine del tuo ultimo progetto di web design, è il momento di mostrarlo e aggiungerlo al tuo portfolio. I visitatori del tuo sito web (e potenziali clienti!) vorranno vedere il tuo fantastico lavoro in azione. Le grandi immagini sono fondamentali e, nello spazio digitale, ci saranno momenti in cui vorrai illustrare la funzionalità del progetto. Mostrarlo con schermate animate potrebbe essere la soluzione perfetta.

Sono sicuro che hai visto i fantastici e semplici screenshot animati che ci mostrano come funzionano le app o i siti web. Le GIF di cattura dello schermo danno all'utente un'idea migliore di come vengono eseguite determinate attività, mostrando anche quali funzionalità sono disponibili. Il video è sicuramente un'opzione e ha sicuramente un posto importante sul web. Video di prodotto approfonditi o case study traggono sicuramente vantaggio da un formato video. Tuttavia, una scelta più semplice e più consapevole delle dimensioni del file come una GIF animata con screenshot potrebbe essere proprio quello che stai cercando.

Perché gli screenshot animati sono importanti per il tuo portfolio

Sia che tu lo pronunci "GIF" o "JIF", è importante ricordare che le GIF possono essere qualcosa di più di semplici gatti divertenti e filmati con uno slogan intelligente. Le GIF animate dei tuoi progetti dovrebbero essere accattivanti e pianificate con cura per mostrare la funzionalità del design. L'animazione degli elementi dell'interfaccia è sia uno scopo funzionale che estetico, quindi un file GIF lo mostra. Che ne dici di dimostrare il menu e le opzioni presentate dal tuo lavoro? Che ne dici di mostrare come funziona lo scroll? La visualizzazione della funzionalità aiuta l'utente a vedere chiaramente in che modo l'app o il sito Web possono aiutarli.

Strumenti per creare GIF

Non c'è modo migliore per dimostrare il tuo duro lavoro che con uno dei seguenti strumenti per la creazione di GIF. Gli esempi seguenti mostreranno come appare quando un utente tocca un'opzione, visualizza più dettagli e quindi scorre per vedere più contenuti.

Nota : in questo tutorial non ci saranno istruzioni di progettazione visiva; questi suggerimenti presuppongono che la progettazione del sito Web o dell'applicazione per il progetto del tuo portfolio sia già stata eseguita.

Come creare screenshot GIF animati in Adobe Photoshop

Secondo me, Adobe Photoshop e Adobe After Effects sono gli strumenti migliori per il lavoro. Entrambi consentono molto controllo sul prodotto finale. Personalmente mi piace Photoshop per le catture di schermate GIF (e la maggior parte dei designer lo conosce molto bene), quindi è così che verrà costruito il seguente esempio. Iniziamo!

Visualizzazione della funzionalità di scorrimento

Questo design è stato eseguito in Adobe XD ma poi esportato in Photoshop con livelli con nomi appropriati. L'esempio ha un livello chiamato "Elenco delle posizioni MinTour" per la pagina dell'elenco, "Elenco del giardino delle sculture" per la pagina dei dettagli e la parte che è fuori dalla visualizzazione a scorrimento iniziale è chiamata "Esclusione dell'elenco del giardino delle sculture".

Prima parte

1. Impostazione della sequenza temporale ed elenco delle posizioni

La funzione Timeline è ciò che utilizzeremo per creare le diverse schermate per il prodotto finale. Assicurati che il pannello Timeline sia aperto andando su Finestra> Timeline .

Ecco la pagina dell'elenco; l'utente inizia qui, tocca una posizione e arriva alla pagina dei dettagli, dove può scorrere per vedere maggiori dettagli.

Vedrai che è già stato stabilito un primo fotogramma chiave. Assicurati che i livelli corretti vengano visualizzati in modo che la vista corretta sia mostrata nel fotogramma chiave.

Facoltativo: se desideri mostrare dove l'utente tocca, a volte questo viene mostrato con un punto. Per fare ciò, aggiungi una cornice extra con l'area del punto.

2. Dettagli sulla posizione individuale

La possibilità di organizzare con i livelli è un enorme vantaggio e ti aiuterà a mantenere tutto in ordine mentre crei la GIF di cattura dello schermo. Vai alle opzioni nel pannello Timeline e scegli "Nuovo fotogramma". La stessa cosa qui: assicurati che i livelli corretti siano nascosti/mostrati. Per questo, avevo bisogno che fosse mostrato il singolo elenco, quindi il livello dell'elenco delle posizioni è nascosto.

3. I dettagli delle singole posizioni scorrono il contenuto

La pagina dell'elenco individuale per il Giardino delle sculture ha più contenuti, quindi l'area di scorrimento dovrebbe essere mostrata all'utente. Questo era su un livello separato, quindi ho creato una nuova cornice per mostrare questo contenuto di overflow.

4. Scegli le durate

Potrebbe essere necessario un po' di sperimentazione, ma è importante scegliere la durata di ciascun fotogramma. Vuoi che l'utente abbia abbastanza tempo per vedere ogni fotogramma, ma anche non dovrebbe aspettare troppo a lungo prima di vedere quello successivo.

Ho inserito i valori per ogni fotogramma, per un totale di cinque secondi per l'intera animazione.

5. Anteprima

È bene dare un'occhiata a cosa sta succedendo finora. C'è un pulsante di riproduzione nella riga inferiore del pannello Timeline. Prova le cose e vedi se c'è qualcosa che può essere migliorato.

(Facoltativo) controllo interpolazione

Le cose sono ordinate correttamente, ma sembrano un po' nervose. Le animazioni degli screenshot possono essere regolate per far apparire le cose un po' più fluide. Dalle opzioni Timeline, c'è un'opzione "Tween". Per creare automaticamente un'animazione fluida tra il fotogramma corrente e quello precedente, possono essere inseriti automaticamente più fotogrammi.

Dall'elenco all'overflow dell'elenco, Tween è stato aggiunto per farlo sembrare più un'azione di scorrimento. Questi nuovi frame erano impostati per avere una durata molto breve di 0,05 secondi (lo scorrimento in un'app avviene in modo relativamente veloce).

Se vuoi che questo continui a scorrere in Photoshop, assicurati che "Per sempre" sia selezionato. Se è presente un determinato numero di loop, è possibile immettere quel valore.

6. Salvataggio della GIF di acquisizione dello schermo (solo flusso dello schermo)

Se stai cercando di includerlo solo come un flusso di schermo animato, il salvataggio sarà l'ultimo passaggio. In questo momento, viene creata l'animazione dello screenshot, deve solo essere salvata nel formato GIF corretto. Potresti essere abituato a salvare un'immagine statica, ma salvare una sequenza di immagini è diverso. Vai su File> Salva per Web per salvare questo file GIF.

Qui vedrai tutte le impostazioni di cui avrai bisogno per la tua GIF. Ricorda che sei limitato al numero di colori, quindi osserveremo le cose al meglio prima dell'esportazione. 256 è molto probabilmente l'opzione migliore poiché i siti Web e le applicazioni tendono ad avere un'ampia gamma di colori, ma se il tuo design lo consente, puoi semplificare (il che riduce le dimensioni del file).

Ci sono anche alcune impostazioni di "Animazione" nell'angolo in basso a destra; puoi scegliere Looping se vuoi che questo si ripeta indefinitamente. Puoi anche eseguire il loop un determinato numero di volte, se lo desideri. Salvalo nella posizione desiderata ed è pronto per partire!

Parte seconda: schermate a più livelli presenti su un dispositivo

Se hai deciso di continuare, sono necessari alcuni passaggi aggiuntivi per sovrapporlo in modo che appaia più realistico sul telefono. Dal pannello Timeline scegli "Appiattisci fotogrammi in livelli". Ogni fotogramma verrà convertito in un livello piatto, che finisce per essere 26 fotogrammi (quindi ci sono 26 livelli).

Una volta salvato, l'immagine del telefono dovrà essere aggiunta al file. Per adattarsi a ciò, sarà necessario ridimensionare le dimensioni dell'immagine.

1. Regola le dimensioni della tela per il tuo screenshot animato

L'immagine di sfondo è 1300 X 920, quindi le dimensioni della tela devono essere regolate per adattarle esattamente. Vai su Immagine> Dimensioni tela e inserisci le dimensioni corrette.

2. Prepara i livelli per essere posizionati sullo schermo del telefono

Quindi, crea un nuovo livello per l'immagine di sfondo in modo che l'animazione possa essere sovrapposta. Ecco dove i livelli di frame "Seleziona tutto" torneranno utili.

3. Ricontrolla i frame

Questo è un buon momento per assicurarti che i frame siano ancora come avevi pianificato. Se riproduci l'animazione dal pannello Timeline, vedrai la sequenza animata.

4. Inclinare gli schermi

È importante che tutti i livelli dello schermo siano selezionati in modo che possano essere tutti inclinati contemporaneamente per rimanere uniformi. Modifica> Trasforma> Oscilla è dove questo è fatto.

Ci vorrà un po' di sperimentazione, ma regola gli angoli in modo che si allineino con i bordi dello schermo, dando l'illusione che lo schermo sia illuminato con l'animazione.

5. Regolazioni dell'immagine e salvataggio della cattura dello schermo GIF

Ora è il momento di fare qualsiasi aggiustamento. Colore, contrasto o altri ritocchi finali devono essere eseguiti prima del salvataggio. Il salvataggio dell'animazione è lo stesso di quanto fatto nella prima parte, passaggio 6.

In questo esempio, lo sfondo è stato desaturato e il contrasto è stato aumentato per far risaltare l'animazione. Ora sembra essere su un dispositivo reale!

Gifi

Se Photoshop non è il tuo strumento preferito, c'è uno strumento gratuito e facile chiamato Giphy. (Oltre all'uso professionale, puoi anche creare molte GIF divertenti!)

Se scegli "Presentazione", questa è una buona opzione per creare uno screenshot di animazione. Per utilizzarlo, dovrai salvare i singoli file delle schermate. Trascinerai quindi le immagini fisse e il processo inizierà.

Una volta caricati i file, seleziona "Crea presentazione". Quando hai finito di mettere insieme le immagini, puoi scaricare il file. E 'così semplice!

Registralo

Questa app è piuttosto semplice; registra l'azione che si svolge sullo schermo del tuo computer e carica la registrazione sul sito Web Recordit.io e crea un collegamento condivisibile, con la possibilità di scaricare la GIF.

Quando Recordit è stato installato sul tuo computer, viene visualizzata un'icona nella barra delle applicazioni. Una volta selezionato, puoi trascinare e selezionare l'area dello schermo che desideri registrare. Questo è stato perfetto quando sono passato alla modalità di anteprima in Adobe XD e sono stato in grado di utilizzare un prototipo per la dimostrazione.

Dopo aver selezionato l'area che verrà inclusa, viene visualizzato un pulsante di registrazione. Quando premi "Registra", Recordit registra quindi tutto ciò che accade sullo schermo, entro i limiti che hai creato. Quando hai finito di registrare, scegli semplicemente "Stop".

Ci vorranno alcuni secondi, ma dopo che la registrazione è stata interrotta, apparirà un pop-up con un collegamento che ti porta alla registrazione, che è ospitata sul sito Recordit.io.

Le GIF animate di schermate sono un ottimo modo per mostrare il flusso degli utenti e come funzionano i tuoi progetti di design. Anche il video ha il suo posto, ma le GIF possono essere create molto rapidamente e sono facili da aggiungere al tuo portfolio online.

Foglio di lavoro gratuito: pubblico di destinazione e persona del cliente

Cerchi una guida praticabile per aiutarti a mantenere i tuoi contenuti facilmente riconoscibili e coinvolgenti? Questo PDF interattivo di tre pagine ti aiuterà a trovare il tuo pubblico, controllare i tuoi contenuti e creare un piano di gioco per far crescere la tua attività.

Se ti è piaciuto questo articolo, potrebbero piacerti anche questi:

• Come creare animazioni SVG con CSS
• Come creare una galleria di video WordPress
• Come utilizzare i collegamenti salta per rendere il tuo sito WordPress più accessibile