La création d’une maquette vidéo vous aidera à montrer à vos clients à quoi ressembleront et fonctionneront vos conceptions numériques. Montrer vos créations comme celle-ci dans une présentation de conception graphique vous fait également ressembler au pro que vous êtes. Découvrez les exemples de maquettes que nous allons réaliser dans cet article, puis lancez-vous avec le didacticiel.
Premiers pas avec les remplacements d’écran
Sélection d’un clip
Dans notre Collection de maquettes vidéo, vous trouverez des vidéos de différents appareils à écran vert dans différents environnements. Il y a des clips avec des appareils statiques et d’autres qui montrent les appareils en mouvement. Les appareils mobiles nécessitent une étape supplémentaire, et nous couvrirons les deux types et techniques dans ce didacticiel. Une autre chose à surveiller est de savoir si l’écran interagit avec. Les maquettes qui montrent une personne en train de faire défiler et de cliquer sont idéales pour montrer des conceptions interactives telles que des sites Web et des applications. Vous devez déterminer si l’interaction et le mouvement sont importants pour votre présentation avant de choisir un clip.
Pour le premier exemple montré ci-dessus, nous utiliserons cette vidéo d’une maquette d’iPad et d’une main interagissant avec l’écran.
Enregistrez votre écran
Pour l’enregistrement d’écran, vous essayez essentiellement d’imiter les actions de votre clip vidéo. Faites simplement de votre mieux pour observer le mouvement dans les maquettes vidéo et peut-être lire le clip sur votre ordinateur pendant que vous enregistrez sur votre appareil mobile. Voici comment faire un enregistrement d’écran sur iOS et Android. Si vous utilisez un cadre statique pour votre écran, tout ce dont vous avez besoin est une capture d’écran.
Préparez-vous
Créez un nouveau projet AE et importez votre séquence vidéo et votre enregistrement d’écran. Créez une nouvelle composition à partir du clip vidéo. Pour en savoir plus sur AE, commencez ici.
Remplacer l’écran
Ensuite, créez une deuxième composition qui servira d’écran de l’appareil. Nommez-le pour savoir qu’il s’agit de la composition de l’écran et définissez les dimensions pour qu’elles correspondent à l’écran. Nous avons recherché sur Google les dimensions de l’écran d’un iPad Mini, l’appareil montré dans la vidéo, mais cela n’a pas besoin d’être exact.
Créez un nouveau solide dans cette composition d’écran en cliquant avec le bouton droit dans la chronologie et en choisissant Nouveau > Solide. Faites du solide une couleur rouge pour qu’il contraste avec l’écran vert pendant que vous travaillez.
Ensuite, alignez la composition d’écran – juste un solide rouge jusqu’à présent – avec l’écran. Faites glisser la composition d’écran vers la composition principale et réduisez un peu l’opacité pour que vous puissiez voir le solide rouge et l’écran vert. Nous allons maintenant ajouter le Goupille d’angle effect, un outil super utile pour travailler avec les écrans de la caméra. Rechercher Goupille d’angle dans votre panneau d’effets et faites-le glisser vers le calque d’écran. Faites glisser les coins pour les aligner avec l’écran vert sur votre métrage.
Maintenant que nous avons la forme, nous pouvons remplacer le solide par la séquence de capture d’écran. Faites glisser le clip d’enregistrement d’écran vers la composition d’écran au-dessus du calque solide, puis masquez le calque solide.
À ce stade, si vous vérifiez avec votre composition principale, les choses devraient plutôt bien paraître. Cependant, le mouvement de notre main est toujours sous l’écran. Il est temps de sortir l’écran vert.
Effacer l’écran vert
Faites glisser la composition de l’écran sous le métrage et ouvrez votre panneau d’effets. Trouvez le Effet Keylight et faites-le glisser vers le calque de métrage. Utilisez le Pipette dans le Panneau de commandes d’effet pour sélectionner la couleur verte dans votre calque de métrage. Cela devrait faire un très bon travail, même si vous remarquerez que le vert a été supprimé de l’intégralité de notre séquence vidéo, changeant toutes les couleurs. Ce n’est pas ce que nous voulions, mais ne vous inquiétez pas, nous allons le réparer.
Pour le moment, nous voulons juste nous assurer que l’écran est beau. L’incrustation sur ce clip particulier fait un assez bon travail sans beaucoup d’ajustement, mais vous devrez peut-être aller à Affichage > Cache de l’écran dans le Contrôles d’effet pour vous assurer que vous avez masqué tout l’écran. Dans ce mode d’affichage, les zones noires de l’écran sont transparentes et les zones blanches sont opaques. Utilisez le curseur pour vous assurer que tout votre écran est noir.
Le timing
Bien que simple dans son concept, cela pourrait en fait être la partie la plus délicate du projet. Faites glisser les calques dans la chronologie pour les aligner le plus près possible. Si c’est un peu décalé, accélérez ou ralentissez une ou les deux couches pour les faire correspondre. Cliquez avec le bouton droit sur un calque et choisissez Heure > Heure S’étirer faire des mouvements lents ou rapides
Créer un masque
Nous devons maintenant nous assurer que l’effet Keylight n’est appliqué qu’à la zone de l’écran, et non à l’intégralité du métrage. Pour corriger cela, nous allons faire un masque. Sélectionnez le calque de métrage et choisissez le Outil Rectangle (Q). Dessinez un rectangle autour de l’écran, puis dans la liste déroulante Masque de votre chronologie, choisissez « Aucun ». Nous avons créé un masque mais il ne fait rien pour l’instant.
Revenez au Effet Keylight dans le Contrôles d’effet panneau et sous « Masque intérieur » choisissez « Masque 1 ». Cela désactivera l’effet pour l’intérieur de votre masque, rendant l’écran vert. Pour inverser l’effet, cochez la « inverser » boîte et voilà !
Si vous avez utilisé un clip avec un appareil statique, vous avez terminé ! Si vous voulez vous imprégner du suivi de mouvement, lisez la suite.
Aller plus loin avec le suivi de mouvement
Beaucoup de nos téléchargements dans le Maquettes vidéo collection contiennent un appareil tenu dans une main, et même la main la plus stable n’est pas parfaitement immobile—Entrez dans le suivi de mouvement. Ici, nous allons utiliser un outil appelé Mocha, inclus avec AE, et recommencer avec un nouveau fichier, une nouvelle composition et un nouveau clip.
Sélectionnez votre clip de maquette iPhone et accédez à Animation > Piste en moka AE. Cela se lancera en tant qu’application distincte. Assurez-vous que votre tête de lecture se trouve au début du clip, puis utilisez le X-Spline outil (il se comporte comme le Outil stylo) pour dessiner une forme approximative autour de votre appareil. Faites un clic droit lorsque vous avez terminé. Cliquez ensuite sur le « Afficher la surface plane » outil et une boîte apparaîtra. Cliquez et faites glisser les coins pour les aligner avec les coins de l’écran. Soyez aussi précis que possible.
Clique le Suivre vers l’avant bouton. Cela prendra quelques minutes à quelques minutes. Sois patient! Remarque : bien qu’il n’y ait aucune interaction dans ce clip, cet outil sera suffisamment intelligent pour suivre une main interagissant avec l’écran.
Ensuite, nous devons renvoyer ces données à AE. Cliquez sur « Exporter les données de suivi » puis choisissez Épingle d’angle After Effects [Supports Motion Blur] et Copier dans le presse-papier.
Revenez à AE. Créez un nouveau solide dans votre chronologie et pré-composez-le en cliquant avec le bouton droit et en choisissant « Pré-composer… » Nommez cette nouvelle composition pour que vous sachiez qu’il s’agit de la composition d’écran (vous pouvez probablement voir où cela va !). Cliquez sur la composition d’écran, cliquez sur les attributs de transformation et pâte. Votre composition d’écran est maintenant animée pour suivre le mouvement de la main dans le métrage.
À partir de là, vous pouvez suivre les étapes décrites précédemment : ajoutez votre capture d’écran à votre composition d’écran, saisissez le vert de votre composition de métrage et ajoutez votre masque.
Il faut certainement un peu de pratique pour manœuvrer les couches et les compositions, mais une fois que vous aurez compris, vous remplacerez tout le temps les écrans. L’édition de maquettes vidéo est une compétence très pratique à préparer pour améliorer votre conception graphique et vos présentations Web. Si vous n’êtes pas tout à fait prêt à réaliser des maquettes vidéo, nous avons également maquettes d’images qui peut montrer vos conceptions.