Un cinémagraphe avec Photoshop CC et Adobe Stock pour Halloween !
L’univers inquiétant d’Halloween s’invite sur Creative Connection… C’est l’occasion parfaite pour créer des effets spéciaux pour intriguer, surprendre, voire terroriser ! Pour des photos encore plus effrayantes, animez-les grâce à la technique du cinémagraphe. L’exemple avec cet arbre fantasmagorique… On imaginerait presque un fantôme apparaître ou une chauve-souris s’envoler ! Voici toutes les étapes pour créer cette animation :
Un cinémagraphe, lui, immortalise « l’instant T » d’une photographie, tout en intégrant les « effets cinématographiques » d’une vidéo. Cette association nous révèle l’expérience de l’animation, en nous dispensant de broder un récit linéaire.
Aux débuts du web, les cinémagraphes étaient enregistrés sous forme de GIF animés, essentiellement parce que ce format était très largement pris en charge. Depuis, nous avons vu d’autres types de médias entrer dans la composition des cinémagraphes — vidéo, HTML, CSS et JavaScript notamment.
Concrètement, nous disposons d’un plus vaste choix d’options pour créer une expérience autour d’un cinémagraphe. Dans cet article, nous nous intéresserons à un workflow de création faisant appel à la composition de vidéos, d’illustrations et de photos avec Adobe Photoshop CC.
Utilisation d’une illustration Adobe Stock pour démarrer
En explorant Adobe Stock, je suis tombé sur cette illustration représentant un arbre fantasmagorique. Cette composition en noir et blanc m’a plu, et j’ai décidé d’en préserver l’esprit, tout en remplaçant l’arrière-plan par de la brume et des nuages en mouvement.
Il s’agissait, dans un premier temps, de masquer l’arrière-plan. J’ai créé un calque et ai commencé par repeindre les branches dans une couleur claire. Je l’admets, la tâche était un peu fastidieuse, même en recourant à quelques astuces de sélection ; mais la finesse des détails a véritablement contribué au résultat final.
Ensuite, j’ai chargé les pixels du nouveau calque dans une sélection. Pour effectuer cette opération, il existe un raccourci consistant à maintenir la touche Cmd (Mac) ou Ctrl (Windows) enfoncée et à cliquer sur la vignette du calque. J’ai ensuite sélectionné le calque de l’arbre d’origine, et ajouté un nouveau masque de fusion.
Résultat : les branches de l’arbre apparaissent en blanc sur le masque de fusion, et le reste en noir. La silhouette de l’arbre se détache sur un fond transparent. Ensuite, j’ai simplement ajouté un nouveau calque, que j’ai fait glisser vers le bas, puis je l’ai rempli avec un dégradé allant du gris foncé au noir.
Ajout de la lune
Par la suite, j’ai recherché une pleine lune dans Adobe Stock. Une fois l’image trouvée, j’ai ajouté le fichier correspondant dans ma composition sous forme d’objet dynamique lié. Pour pouvoir modifier ce nouvel objet dynamique, j’ai ajouté un masque de fusion circulaire.
Une fois la lune masquée, j’ai ajouté une lueur externe blanche de 165 pixels, avec un grossi de 6, et j’ai utilisé le mode de fusion Superposition. L’effet obtenu est celui d’un astre luisant à travers des nuages épais.
Manipulation de vidéos dans Photoshop
J’ai ensuite téléchargé depuis Adobe Stock deux vidéos dédiées à l’application d’effets spéciaux sur des photos et vidéos. J’ai créé et animé ces vidéos noir et blanc pour vous aider à simuler des effets cinématographiques dans le cadre de ce projet mêlant cinémagraphe, vidéo et animation.
Dans le fichier Photoshop, ouvrez le panneau Montage pour créer un montage vidéo. Importez une vidéo dans un calque en choisissant Fichier > Importer et lier, puis en sélectionnant le fichier clouds.mp4.
Remarque : si vous utilisez le bouton + du panneau Montage, Photoshop associera la vidéo à un groupe de vidéos. Pour supprimer ce groupe, sélectionnez-le et choisissez Calque > Dissocier les calques.
Placez les nuages derrière l’arbre et choisissez le mode de fusion Superposition. Vous masquerez ainsi les zones noires de la vidéo et ferez apparaître les lueurs de la lune. Appliquez un masque de fusion et opérez un fondu sur les parties droite et gauche jusqu’à ce qu’elles soient totalement transparentes. Ainsi, les nuages apparaîtront éclairés par la lune.
Importez ensuite la vidéo de la brume, convertissez-la en objet dynamique, puis placez-la derrière l’arbre. Dupliquez cet objet dynamique, et placez la copie au-dessus de l’arbre. Vous jouerez ainsi sur l’intensité de la brume. Ajoutez un masque de fusion aux deux calques ainsi créés. Pour celui à l’arrière-plan, définissez une opacité de 30 % et masquez les bords droit et gauche pour les rendre transparents. Vous créerez ainsi pour la brume un effet identique à celui créé pour les nuages.
Pour terminer, accentuez encore le masquage des bords droit et gauche pour donner l’impression que la brume est toute proche.
Rendu
Le format de fichier le plus en vogue pour un cinémagraphe est la vidéo, en l’occurrence le format mp4. Celui-ci accepte bien plus d’images qu’un GIF animé, pour un fichier final nettement plus compact. Si les cinémagraphes basés sur CSS et JavaScript peuvent être encore plus petits et générer des contenus aléatoires, ils exigent davantage de fichiers.
Pour opérer le rendu d’une vidéo depuis Photoshop, sélectionnez Rendu vidéo dans le menu Fichier > Exportation.
Liste des contenus Adobe Stock pour ce cinémagraphe :