Come realizzare un cinemagraph con Photoshop

I cinemagraph sono una delle mie tendenze di design preferite ormai da alcuni anni. Sono uno straordinario mix tra foto e video, risultando in un'elegante opera d'arte per il tuo sito che aggiunge solo un pizzico di mistero.

C'è anche un motivo pratico fondamentale per cui i cinemagraph sono fantastici: le dimensioni ridotte dei file. È molto più facile aggiungere piccoli momenti di movimento al tuo sito, piuttosto che un intero file video! Ma al di là della logistica, c'è un'ultima ragione per cui i cinemagraph sono così magici: in realtà sono molto più facili da creare di quanto si pensi!

Pronto per iniziare? Tira su la sedia, apri Photoshop e segui questi sette semplici passaggi per creare il tuo cinemagraph!

1. Scegli il tuo file video

Per creare un cinemagraph, inizierai con un file video di base. Idealmente dovresti girare tu stesso il video in modo che possa essere specifico per la tua azienda e corrispondere perfettamente al tuo marchio, ma se stai solo sperimentando, il download di un video stock funzionerà perfettamente!

Per questo tutorial, sto usando un video che abbiamo girato internamente di un tour di Jenga su un semplice sfondo blu. (Otterrai lo stesso file se ti iscrivi al corso Design Trends!)

Quando scegli il video perfetto per il tuo cinemagraph, ci sono alcune cose che dovresti tenere a mente:

• La fotocamera deve rimanere ferma per tutto il tempo. Se stai girando il video da solo, estrai il vecchio treppiede per mantenere le cose il più stabili possibile. Se stai navigando in opzioni su azioni, cerca il minor movimento possibile!
• Il movimento che vuoi mantenere dovrebbe essere facile da isolare. Se gli oggetti si incrociano l'uno di fronte all'altro o si muovono su tutto lo schermo, sarà più difficile isolare il movimento che desideri mantenendo fermo lo sfondo.
• Il video dovrebbe andare in loop . Per mantenere il cinemagraph senza tempo, dovrà essere riprodotto in loop. Mentre Photoshop può sicuramente aiutare a sistemare le cose, è più facile usare un video che può facilmente andare in loop o avere un inizio e una fine reversibili.

Una volta che hai il tuo file video, sei pronto per caricarlo in Photoshop.

2. Importa il file video

Con Photoshop tirato su, vai su File> Apri . Seleziona il tuo file, quindi vedrai il video apparire come un livello. Se non viene visualizzato automaticamente, assicurati di poter vedere anche la linea temporale andando su Finestra > Linea temporale .

Noterai che il file video viene automaticamente inserito in un gruppo, "Video Group 1". Puoi lasciarlo lì, ma se avere solo un livello in un gruppo ti dà fastidio, sentiti libero di estrarre il livello video ed eliminare il gruppo! Non è necessario.

3. Ripulisci la linea temporale

Riproduci il tuo file video alcune volte: hai bisogno di tutto? Se ci sono filmati extra prima o dopo la sezione su cui desideri che il tuo cinemagraph si concentri, vai avanti e taglia il file in modo che non sia d'intralcio. Puoi farlo facendo clic sul bordo del file nella Timeline e trascinandolo sul timestamp desiderato.

Se il tuo file video è lungo e hai problemi a visualizzare tutto o ad arrivare al punto esatto che desideri, puoi utilizzare la scala nella parte inferiore della finestra Timeline per ingrandire e ridurre.

Nota: la parte del tuo file che tagli verrà comunque salvata, quindi non preoccuparti di perdere dati qui! Puoi sempre fare clic e trascinare il bordo indietro, se decidi di aver bisogno di una certa parte in un secondo momento.

Il mio file video originale si è concluso con la caduta della torre Jenga, il che non sarebbe stato facile da riprodurre in loop. Quindi ho tagliato quella parte e ne ho ritagliata anche un po' dall'inizio, solo per semplificare il tempo con cui stavo lavorando!

Una volta che hai finito di ripulire la linea temporale, è il momento di nascondere il movimento che non vuoi.

4. Crea il livello di mascheratura

Ora creerai l'aspetto "foto" del cinemagraph. Metti in pausa il video sull'"immagine" che desideri creare, quindi seleziona l'intera area. Copia e incolla questo in un nuovo livello.

Se premi play, noterai che ora non puoi vedere nessuno dei video, perché lo still later è in cima. Ora è il momento di aggiungere una maschera, che ci permetterà di scegliere il movimento esatto che vogliamo mostrare!

Vai avanti e aggiungi una maschera di livello, dall'opzione nella parte inferiore del pannello Livelli o andando su Livello> Maschera livello> Mostra tutto.

5. Isolare il Movimento

Assicurati di aver selezionato la maschera di livello (invece del livello stesso) e quindi prendi lo strumento pennello. Proprio come qualsiasi maschera, il pennello con il nero nasconderà la maschera (rivelando il contenuto dal livello sottostante) mentre il pennello con il bianco rivelerà la maschera (nascondendo il contenuto dal livello sottostante).

Per questo esempio, volevo mostrare il movimento della torre Jenga mentre le lancette rimanevano ferme. Per fare ciò, ho dipinto la maschera di nero sopra la torre e ho lasciato il resto bianco.

Ciò ti consente di isolare il movimento, rivelando solo il movimento che vuoi che il tuo cinemagraph mostri, mantenendo fermo il resto.

6. Esporta come GIF

Una volta che sei soddisfatto del tuo cinemagraph, è il momento di esportarlo! Basta andare su File > Esporta > Salva per Web (Legacy) . Ci sono molte opzioni che puoi sperimentare qui, ma le due più importanti sono:

1. Salva come gif (situato vicino alla parte superiore della finestra di dialogo)
2. Imposta le opzioni di looping su Forever (che si trova nella parte inferiore della finestra di dialogo)

C'è sempre un po' di equilibrio tra dimensione e qualità del file, quindi consiglio vivamente di sperimentare le impostazioni per assicurarti di ottenere esattamente l'esportazione di cui hai bisogno.

E questo è tutto! Hai appena creato il tuo cinemagraph personale da condividere con il mondo. Com'è andata a finire? Ci piacerebbe saperlo nei commenti.

Come utilizzare il file Photoshop

Quando apri questo file in Photoshop, vedrai il cinemagraph finito. Puoi usarlo se vuoi, oppure puoi giocare per vedere come abbiamo impostato tutto!

Inizia smascherando tutti i livelli, ad eccezione del "metraggio di base". Questo è il file del film originale con cui abbiamo iniziato. Se premi play, sarai in grado di vedere quanto si muove la mano per scuotere la tavola Jenga!

Quindi abbiamo aggiunto il livello di mascheramento per isolare il movimento e lascia che te lo dica: scegliere una forma geometrica come questa su uno sfondo a tinta unita ha reso il processo di mascheramento semplicissimo! A seconda del file video, potrebbe essere necessario essere un po' più precisi, ma lo lasceremo a te.

Successivamente, abbiamo deciso di concentrarci solo su un segmento del video che andava bene insieme, per creare quell'effetto senza tempo. Tuttavia, abbiamo lasciato l'intero file lì, in modo che tu possa vedere tutto!

Infine, abbiamo modificato le curve per correggere parte del colore nel file. Potrebbe essere necessario o meno farlo, a seconda del video, ma ricorda: puoi sempre continuare a modificare una volta realizzato il cinemagraph!

E questo è tutto! Hai un cinemagraph pronto per essere visualizzato sul tuo sito. Raccontaci nei commenti qui sotto: cosa creerai con questa tendenza?