Comment créer une maquette d'écran vidéo dans Photoshop

Les maquettes sont un excellent moyen de montrer votre travail rapidement et dans un cadre idéal. Alors que la plupart des gens utilisent des maquettes d'images, une maquette vidéo attirera l'attention et gardera les gens engagés dans votre travail. Ajouter une vidéo à un écran est une façon sympa de montrer votre travail et pas très difficile à faire non plus.

Qu'est-ce qu'une maquette d'écran vidéo ?

Une maquette est un moyen numérique de prototyper une conception ou d'appliquer une conception à son produit en temps réel sans le produire. Les raisons en sont nombreuses, mais l'une des principales raisons de créer une maquette est de rendre vos conceptions, illustrations ou tout ce que vous souhaitez montrer plus réalistes. Cela aide votre public à visualiser à quoi ressemblera la pièce à la fin.

Au lieu du temps, de l'argent et des efforts supplémentaires nécessaires pour produire un produit réel, vous pouvez créer une maquette numérique présentant votre art, votre design, votre site Web, etc.

Maintenant, une maquette d'écran animée est un concept très similaire, mais avec une maquette sur un écran, comme un téléphone ou un ordinateur. Et au lieu d'une image, la maquette montrera un dessin ou une vidéo en mouvement.

Ces conceptions mobiles peuvent être n'importe quoi, d'une vidéo à un prototype de conception UX/UI ou à un enregistrement d'écran.

Pourquoi devriez-vous utiliser une maquette d'écran animée ?

L'une des meilleures raisons de créer une maquette d'écran animée est de montrer un site Web. C'est un excellent moyen de montrer un site Web que vous avez conçu dans votre portefeuille.

L'utilisation d'une maquette donne un peu plus de créativité dans votre portfolio que de simples captures d'écran de votre site Web. C'est un excellent moyen de diversifier l'apparence de vos maquettes.

Si vous souhaitez afficher une vidéo que vous avez créée, cela peut également être une manière créative de la montrer au lieu de simplement intégrer la vidéo de YouTube, etc. Dans l'ensemble, une maquette d'écran animée est une façon amusante d'afficher votre travail.

Comment créer une maquette d'écran animée dans Photoshop

Bien que la plupart des gens connaissent Photoshop en tant qu'outil d'édition d'images, vous pouvez également l'utiliser pour créer des animations et des vidéos. Voici donc les étapes à suivre pour créer une maquette vidéo à l'aide de Photoshop.

Quel type de vidéo devriez-vous utiliser ?

Il existe de nombreuses options pour votre maquette d'écran animée. Un fichier vidéo plus petit fonctionnera mieux. Bien que vous puissiez utiliser cette technique pour afficher de vraies séquences vidéo, la taille rendra plus difficile le rendu dans Photoshop.

Pour cette raison, nous allons créer une maquette faisant défiler une page Web. L'utilisation d'une vidéo plus courte sans aucun autre aspect de conception rendra le rendu plus rapide et donnera un résultat de haute qualité.

Utilisez un enregistreur d'écran pour créer une vidéo de votre écran. Cela peut être fait sur un mobile ou un ordinateur de bureau, selon ce sur quoi vous voulez que votre maquette soit. Nous utiliserons Quicktime Player sur Mac et le Nouvel enregistrement d'écran option, mais il y a beaucoup de autres options Mac. Si vous avez un iPhone, vous pouvez voir comment filtrer un enregistrement sur un iPhone. Vous n'avez pas besoin d'audio dans cet enregistrement.

Pour notre vidéo, nous avons enregistré le site Web Makeuseof.com, montrant une série d'articles sur la conception graphique. Vous pouvez filtrer tout ce qui a du sens pour vous. Gardez un défilement régulier et assurez-vous qu'il n'est ni trop rapide ni trop lent.

Une fois votre court enregistrement terminé, enregistrez-le au format MP4 et placez-le dans un dossier facile d'accès.

Quel type de photo devriez-vous utiliser ?

Pour obtenir les meilleurs résultats dans cette maquette, vous devez utiliser une photo qui montre un écran dégagé. Il peut s'agir d'un écran mobile, d'un ordinateur ou même d'un écran de télévision. Bien que votre image puisse montrer une certaine perspective, il est préférable que l'écran soit principalement face à vous.

Il est possible de utiliser un écran obstrué ou une image avec une perspective lourde pour une maquette plus compliquée, mais nous allons rester simple aujourd'hui.

Vous pouvez prendre votre propre photo ou en télécharger une à partir d'un site libre de droits, tel que Unsplash. Nous n'utiliserons pas de maquette PSD prédéfinie pour ce didacticiel, vous n'aurez donc pas à vous soucier d'en trouver une.

Comment faire la maquette vidéo

Ouvrez votre image dans Photoshop.

Si vous avez téléchargé l'image à partir d'un site libre de droits ou si vous l'avez prise avec un appareil photo de haute qualité, la taille peut être assez grande. Vous pouvez réduire la taille de l'image.

Cliquez sur Image > Taille de l'image. Les dimensions finales dépendent de vous, mais nous recommandons une largeur d'environ 1200. Gardez les contraintes d'image en proportion lors du changement de taille. Cliquez sur d'accord.

Maintenant, pour créer l'espace où la vidéo va s'asseoir. Trouvez les dimensions de votre vidéo originale; si vous enregistrez un écran à partir d'un téléphone, recherchez les dimensions de l'écran du téléphone et si vous enregistrez un site Web, vous pouvez utiliser une résolution standard de 1680 x 1050, à moins que vous ne connaissiez les dimensions exactes.

À l'aide de l'outil Rectangle (U), cliquez sur votre canevas. Cela apportera une fenêtre contextuelle dans laquelle vous pourrez spécifier les dimensions. Entrez la largeur et la hauteur de votre enregistrement d'écran et cliquez sur d'accord. Supprimez le trait et choisissez une couleur de remplissage noire ou gris foncé.

Sur le calque du rectangle, cliquez avec le bouton droit de la souris et accédez à Convertir en objet intelligent. Vous pouvez maintenant transformer le rectangle pour qu'il s'adapte parfaitement à l'écran. Cela signifie que toute image placée sur l'objet intelligent suivra la même transformation de forme.

Pour transformer votre rectangle, utilisez l'outil Transformer. Vous pouvez le trouver en allant sur Éditer > Transformation libre ou en frappant cmd + T (Mac) ou ctrl + T (Les fenêtres).

L'outil Transformer ne changera que la taille du rectangle. Modifiez la taille pour qu'elle ressemble le plus possible à l'écran. Utilisez ensuite la fonction Distorsion.

Encore une fois, allez au Éditer menus, puis Transformer > Fausser. Cela vous permettra de faire glisser et d'étirer les coins pour qu'ils correspondent parfaitement à votre écran. Cela fonctionne très bien si votre image a une perspective supplémentaire. Double-cliquez sur le rectangle une fois que vous avez aligné tous vos coins et bords. Si les bords ne sont pas correctement alignés, utilisez à nouveau l'outil Transformer et l'option Distorsion jusqu'à ce qu'ils le soient.

Vous pouvez insérer votre vidéo dans votre objet intelligent correctement dimensionné et formé. Cliquez sur La fenêtre > Chronologie pour ouvrir la chronologie de l'animation. Assurez-vous qu'il se trouve sur la chronologie de la vidéo plutôt que sur l'animation de l'image.

Double-cliquez sur l'objet intelligent dans le panneau des calques en cliquant sur l'icône avec un papier et un carré sur la vignette de votre objet intelligent. Cela s'ouvre dans une nouvelle fenêtre.

Faites glisser votre vidéo vers la fenêtre de l'objet intelligent. Votre vidéo doit être de la même taille que votre rectangle. Si les dimensions sont incorrectes, vous pouvez le corriger facilement: faites glisser les coins jusqu'à ce qu'ils correspondent à toute la fenêtre.

Si vous avez besoin de couper des bords, vous pouvez le faire. Tout ce que vous pouvez voir est ce qui sera montré dans la maquette finale. Une fois que vous êtes satisfait, double-cliquez pour confirmer la taille et l'emplacement.

Vous verrez maintenant deux calques de chronologie sur la chronologie de la vidéo: un pour le rectangle et un pour la nouvelle vidéo. Faites glisser la longueur de la chronologie du rectangle pour qu'elle corresponde à la longueur de la vidéo. Cela garantit que la vidéo sera vue pendant toute sa durée.

Cliquez sur le bouton de lecture pour vérifier votre vidéo. Le chargement peut prendre un certain temps et donc jouer plus lentement que le temps réel.

Pour rendre votre écran vidéo plus réaliste, modifiez le mode de fusion du calque vidéo. Vous pouvez également réduire l'opacité sur le calque vidéo). Jouez avec différents paramètres de fusion jusqu'à ce que vous soyez satisfait. Si vous voulez le laisser sans cette étape, c'est bien aussi. Cela donnera une vue plus claire de l'écran.

Maintenant, pour enregistrer la vidéo dans votre maquette, enregistrez simplement la fenêtre d'objet intelligent. Vous pouvez le faire en allant sur Fichier > sauvegarder ou frapper cmd + S (Mac) ou ctrl + S (Les fenêtres). Une fois enregistré, quittez la fenêtre de l'objet intelligent.

Vous reviendrez à la fenêtre de maquette. Vous verrez votre vidéo à la place de l'écran.

Pour enregistrer votre maquette, accédez à Fichier > Exportation > Rendre la vidéo… Ici, vous pouvez modifier la taille de la maquette finale. Changer la taille aidera également au chargement et à la taille globale du fichier. Une fois que vous êtes satisfait de vos paramètres, cliquez sur Rendre.

Cela se traduira par un fichier vidéo MP4 final avec votre maquette vidéo terminée.

Amenez vos maquettes plus loin avec une maquette d'écran vidéo

En utilisant la vidéo dans vos maquettes d'écran, vous pourrez partager plus de travail et impliquer plus de personnes. Ce style de maquette dynamique créé dans Photoshop est facile à réaliser et donne d'excellents résultats.

Bien que vous puissiez utiliser cette technique pour une maquette statique en utilisant uniquement une image, en utilisant la vidéo, vous apprenez une nouvelle compétence et encouragez les gens à s'engager plus longtemps dans votre travail. Une maquette vidéo est rare à voir, et la surprise attirera l'attention de tous ceux qui la regardent.

Comment faire une maquette d'emballage de boîte dans Photoshop

Lire la suite

A propos de l'auteur