Come creare un mockup dello schermo video in Photoshop

I mockup sono un ottimo modo per mostrare il tuo lavoro in modo rapido e in un ambiente ideale. Mentre la maggior parte delle persone usa modelli di immagini, un modello video attirerà l'attenzione e manterrà le persone coinvolte nel tuo lavoro. Aggiungere un video a uno schermo è un modo interessante per mostrare il tuo lavoro e non è nemmeno molto difficile da fare.

Che cos'è un mockup di schermo video?

Un mockup è un modo digitale per prototipare un design o applicare un design al suo prodotto in tempo reale senza produrlo. Le ragioni sono molte, ma una delle ragioni principali per creare un mockup è rendere più realistici i tuoi progetti, illustrazioni o qualsiasi cosa tu voglia mettere in mostra. Aiuta il tuo pubblico a visualizzare come apparirà il pezzo alla fine.

Invece del tempo, del denaro e dello sforzo extra necessari per produrre un prodotto reale, puoi creare un mockup digitale con la tua arte, design, sito Web, ecc.

Ora, un mockup di schermo animato è un concetto molto simile, ma con un mockup su uno schermo, come un telefono o un computer. E invece di un'immagine, il mockup mostrerà un design o un video in movimento.

Questi progetti in movimento possono essere qualsiasi cosa, da un video a un prototipo di design UX/UI o una registrazione dello schermo.

Perché dovresti usare un mockup di schermo animato?

Uno dei migliori motivi per creare un mockup di schermo animato è mostrare un sito web. È un ottimo modo per mostrare un sito web che hai progettato nel tuo portfolio.

L'uso di un mockup offre un po' più di creatività nel tuo portfolio rispetto ai semplici screenshot del tuo sito web. È un ottimo modo per diversificare l'aspetto dei tuoi modelli.

Se vuoi visualizzare un video che hai creato, questo può anche essere un modo creativo per mostrarlo invece di incorporare semplicemente il video da YouTube ecc. Nel complesso, un mockup di schermo animato è un modo divertente per mostrare il tuo lavoro.

Come creare un mockup di schermo animato in Photoshop

Sebbene la maggior parte delle persone conosca Photoshop come strumento di modifica delle immagini, puoi anche usarlo per creare animazioni e video. Quindi, ecco i passaggi per creare un mockup video utilizzando Photoshop.

Che tipo di video dovresti usare?

Ci sono molte opzioni per il tuo mockup di schermo animato. Un file video più piccolo funzionerà meglio. Sebbene tu possa utilizzare questa tecnica per visualizzare filmati video reali, le dimensioni renderanno più difficile il rendering in Photoshop.

Per questo motivo, creeremo un mockup scorrendo una pagina web. L'uso di un video più breve senza altri aspetti di progettazione renderà più veloce e produrrà un risultato di alta qualità.

Usa uno screen recorder per creare un video del tuo schermo. Questo può essere fatto su un dispositivo mobile o desktop, a seconda di cosa vuoi che sia il tuo mockup. Useremo Quicktime Player su Mac e il Nuova registrazione dello schermo opzione, ma ce ne sono molti altre opzioni Mac. Se hai un iPhone, puoi vedere come registrare lo schermo su un iPhone. Non è necessario alcun audio in questa registrazione.

Per il nostro video, abbiamo registrato il sito Web Makeuseof.com, che mostra una serie di articoli sulla progettazione grafica. Puoi registrare su schermo tutto ciò che ha senso per te. Mantieni uno scorrimento costante e assicurati che non sia né troppo veloce né troppo lento.

Una volta completata la tua breve registrazione, salvala come MP4 e mettila in una cartella di facile accesso.

Che tipo di foto dovresti usare?

Per ottenere i migliori risultati in questo mockup, dovresti usare una foto che mostri uno schermo libero. Può essere uno schermo mobile, un computer o persino uno schermo TV. Sebbene la tua immagine possa mostrare una certa prospettiva, è meglio se lo schermo è per lo più rivolto verso di te.

È possibile utilizzare uno schermo ostruito o un'immagine con una prospettiva pesante per un modello più complicato, ma oggi lo terremo semplice.

Puoi scattare la tua foto o scaricarne una da un sito esente da royalty, ad esempio Spruzza. Non utilizzeremo un mockup PSD premade per questo tutorial, quindi non avrai bisogno del fastidio di trovarne uno.

Come realizzare il mockup video

Apri la tua immagine in Photoshop.

Se hai scaricato l'immagine da un sito esente da royalty o l'hai scattata con una fotocamera di alta qualità, le dimensioni potrebbero essere piuttosto grandi. Puoi ridurre le dimensioni dell'immagine.

Clic Immagine > Dimensione dell'immagine. Le dimensioni finali dipendono da te, ma ti consigliamo una larghezza di circa 1200. Mantieni i vincoli dell'immagine in proporzione quando modifichi le dimensioni. Clic ok.

Ora per creare lo spazio in cui si posizionerà il video. Trova le dimensioni del tuo video originale; se esegui lo screen registrato da un telefono, trova le dimensioni dello schermo del telefono e se esegui lo screen registrato da un sito Web, potresti utilizzare uno standard 1680 x 1050, a meno che tu non conosca le dimensioni esatte.

Usando lo strumento Rettangolo (U), fai clic sulla tela. Verrà visualizzato un popup in cui è possibile specificare le dimensioni. Inserisci la larghezza e l'altezza della registrazione dello schermo e fai clic ok. Rimuovi il tratto e scegli un colore di riempimento nero o grigio scuro.

Sul livello del rettangolo, fai clic con il pulsante destro del mouse e vai a Converti in oggetto avanzato. Ora puoi trasformare il rettangolo per adattarlo perfettamente allo schermo. Ciò significa che qualsiasi immagine posizionata sull'oggetto intelligente seguirà la stessa trasformazione della forma.

Per trasformare il tuo rettangolo, usa lo strumento Trasforma. Puoi trovarlo andando su Modificare > Trasformazione libera o colpendo cmd + T (Mac) o ctrl + T (Finestre).

Lo strumento Trasforma cambierà solo la dimensione del rettangolo. Cambia la dimensione in modo che sia il più simile possibile allo schermo. Quindi usa la funzione Distorci.

Ancora una volta, vai al Modificare menu, quindi Trasformare > Distorcere. Ciò ti consentirà di trascinare e allungare gli angoli per adattarsi perfettamente allo schermo. Funziona benissimo se la tua immagine ha una prospettiva aggiuntiva. Fai doppio clic sul rettangolo dopo aver allineato tutti gli angoli e i bordi. Se i bordi non sono allineati correttamente, utilizzare di nuovo lo strumento Trasforma e l'opzione Distorci finché non lo sono.

Puoi inserire il tuo video nel tuo oggetto intelligente correttamente dimensionato e sagomato. Clic Finestra > Sequenza temporale per aprire la sequenza temporale dell'animazione. Assicurati che sia sulla timeline del video piuttosto che sull'animazione del fotogramma.

Fare doppio clic sull'oggetto intelligente nel pannello dei livelli facendo clic sull'icona con un foglio e un quadrato sulla miniatura dell'oggetto intelligente. Si apre in una nuova finestra.

Trascina il tuo video nella finestra dell'oggetto intelligente. Il tuo video dovrebbe avere le stesse dimensioni del tuo rettangolo. Se le dimensioni non sono corrette, puoi sistemarlo facilmente: trascina gli angoli finché non si adattano all'intera finestra.

Se hai bisogno di ritagliare i bordi, puoi farlo. Qualunque cosa tu possa vedere è ciò che verrà mostrato nel mockup finale. Quando sei soddisfatto, fai doppio clic per confermare la dimensione e il posizionamento.

Ora vedrai due livelli della timeline sulla timeline del video: uno per il rettangolo e uno per il nuovo video. Trascina la lunghezza della timeline del rettangolo in modo che corrisponda alla lunghezza del video. Ciò garantisce che il video venga visualizzato per tutta la sua durata.

Fare clic sul pulsante di riproduzione per controllare il video. Potrebbe volerci un po' di tempo per caricare e quindi suonare più lentamente del tempo effettivo.

Per rendere il tuo schermo video più realistico, cambia la modalità di fusione del livello video. Puoi anche ridurre l'opacità sul livello video). Gioca con diverse impostazioni di fusione finché non sei felice. Se vuoi lasciarlo senza questo passaggio, va bene lo stesso. Darà una visione più chiara dello schermo.

Ora, per salvare il video sul tuo mockup, salva semplicemente la finestra dell'oggetto intelligente. Puoi farlo andando a File > Salva o colpendo cmd + S (Mac) o ctrl + S (Finestre). Una volta salvato, esci dalla finestra dell'oggetto intelligente.

Tornerai alla finestra del mockup. Vedrai il tuo video al posto dello schermo.

Per salvare il tuo mockup, vai a File > Esportare > Rendering video… Qui puoi modificare le dimensioni del mockup finale. La modifica delle dimensioni aiuterà anche con il caricamento e la dimensione complessiva del file. Quando sei soddisfatto delle tue impostazioni, fai clic su Rendi.

Ciò si tradurrà in un file video MP4 finale con il tuo mockup video completato.

Porta i tuoi mockup ulteriormente con un mockup di schermo video

Utilizzando i video nei prototipi dello schermo, sarai in grado di condividere più lavoro e coinvolgere più persone. Questo stile di mockup dinamico creato in Photoshop è facile da realizzare e ha risultati eccellenti.

Mentre puoi usare questa tecnica per un mockup statico usando solo un'immagine, usando il video stai imparando una nuova abilità e incoraggiando le persone a impegnarsi con il tuo lavoro più a lungo. Un video mockup è raro da vedere e la sorpresa attirerà l'attenzione di chiunque guardi.

Come creare un mockup di imballaggio per scatole in Photoshop

Leggi Avanti

Circa l'autore