mai 1
21

Créez une animation typographique en vidéo 1/2 : Photoshop

Créez une animation typographique en vidéo 1/2 : Photoshop

Programme : Photoshop & After Effects

Difficulté : Intermédiaire

Temps estimé : 30 minutes

Télécharger les fichiers sources
Vous devez être logués ou enregistrés pour télécharger !

Lhenalee (Thomas Normanno) vous guide dans la création d’une animation typographique en vidéo avec Photoshop et After Effects.

Bonjour à  tous ! Dans la première partie de ce tutoriel, nous allons concevoir un effet typographique à  l’aide de Photoshop CS5 et After Effects. Ensuite dans la seconde partie, nous réaliserons une animation sous After Effects à  partir de la maquette réalisée dans la partie 1.

Dans cette première partie nous utiliserons tout d’abord Photoshop pour concevoir notre typographie, et nous verrons ensuite comment importer ce PSD dans After Effects avec tout ses calques et groupes ! Il est donc bien plus pratique de commencer les visuels/maquettes dans Photoshop pour les animer ou les retravailler par la suite dans After Effects !

Vous pouvez voir les résultats ci-dessous :

Résultat final du tutoriel (partie 1/2)

Résultat final du tutoriel en vidéo (partie 2/2)

Mais un peu de patience et commençons en ouvrant Photoshop ! :)



Étape 1 : Commencer à  créer le fond

Nous allons commencer par créer notre nouveau document. Le choix de la résolution est très important ! En effet, la maquette sera importée sous After Effects pour être retravaillée et animée dans la Partie II. De ce fait, je vais choisir une résolution de 1280 x 720 qui est une résolution HD.

– Double cliquez sur le calque arrière plan que vous renommez « Fond« , et remplissez (MAJ + F5) ce calque avec la couleur #201e1b. Appliquez un « Filtre => Bruit => Ajout de bruit, avec une valeur comprise entre 1 et 2« .

– Créez un nouveau calque « Dégradé Blanc« , prenez ensuite l’outil dégradé (G), modifiez ensuite les réglages de sorte à  avoir un dégradé de blanc avec une opacité de 100% qui va au blanc, opacité 0%. Et sélectionnez le « mode radial« . Faites ensuite un dégradé du milieu haut jusqu’à  environ 75% de la hauteur et passez le calque en mode « Lumière tamisée« . Dupliquez maintenant ce calque (CTRL + J) et appliquez lui un « FIltre => Atténuation => Flou gaussien ( 250 pixels)« .

– Faites un nouveau calque « Black ». Prenez l’outil ellispe (m) puis tracez un cercle qui recouvre 80-90% de l’image et qui part du milieu de celle-ci tout en restant appuyé sur ALT. Ensuite inversez la sélection « CTRL + MAJ + I », puis ajoutez un contour progressif « ALT + CTRL D » de 250 pixels. Remplissez (MAJ + F5) avec la couleur noir et passez le calque en mode « Lumière tamisée ». Dupliquez ce calque et baissez son opacité à  50%.
– Sélectionnez maintenant tous vos calques et groupez-les (CTRL + G). Nommez le groupe « Background« .

Tout ça pour un simple fond ? Oui ! Ne perdez pas espoir, passons maintenant à  la suite. ;)

Résultat final du fond



Étape 2 : Création du texte secondaire

Passons maintenant à  la création du texte qui se trouve au-dessus et en-dessous du principal. Pour la rédaction de ce tutoriel, j’ai décidé d’écrire les mots-clés suivants (« Photoshop », « After Effects », « Motion design » et sur « Livingtuts »…). Je vous fais confiance pour personnaliser ce tutoriel.

– Commencez par écrire le texte avec l’outil « Texte Horizontal (T)« . Dans mon exemple : « PHOTOSHOP – AFTER EFFECTS – MOTION DESIGN« .
– Ouvrez la fenêtre « Caractère« , celle-ci va nous permettre   de configurer notre texte. J’ai utilisé la police « Champagne & Limousines » que vous pouvez trouver sur Dafont. Vous pouvez regarder les différents réglages sur l’image ci-dessous.

- Double cliquez maintenant sur le calque texte et dans le style de calque faites les mêmes réglages que l’image ci -dessous.

- Créez un nouveau calque « lueur » et prenez l’outil ellipse (m) puis tracez un cercle ovale qui recouvre la moitié de la hauteur du texte et toute la largeur. Remplissez (MAJ + F5) la sélection de blanc et passez le calque en mode « Lumière tamisée« . Nous allons maintenant transformer ce calque en masque d’écrêtage. Retenez bien cette technique car je pense qu’elle peut vous être utile dans vos prochaines créations.

Le masque d’écrêtage permet à  un calque de prendre la forme du calque juste en-dessous. Il s’active en pressant (CTRL + ALT + G) ou dans les menus du haut (Calque => Créer un masque d’écrêtage). Dupliquez (CTRL + J) maintenant ce calque et repassez-le en masque d’écrêtage (CTRL + ALT + G) et baissez son opacité à  70%.

- Reprenez le calque texte et dupliquez-le. Passez-le en suite au-dessus de tous les calques (Pas de panique ! les masques d’écrêtage vont s’enlever, pensez à  les remettre !:))
Passez ensuite ce nouveau calque texte en mode incrustation et baissez son opacité à  60%.
Répétez l’étape ou dupliquez tous les calques et renommez le texte pour écrire le reste. N’oubliez pas de grouper vos calques pour ne pas vous perdre !
Voici le résultat que vous devriez obtenir à  la fin de cette étape.

Résultat final du texte secondaire


Étape 3 : Création de la typo principal

Nous allons maintenant passer au texte principal, pas une minute à  perdre, c’est parti !

-Créez un nouveau texte. Dans l’exemple, nous écrirons « Tutoriel » mais une fois de plus, libre à  vous d’écrire ce qui vous passe par la tête :) Centrez celui-ci et appliquez les mêmes réglages présents ci-dessous. Vous pouvez télécharger la police « Bebas » sur Dafont.

Dupliquez le texte, et masquez   le calque texte tout en haut. Sur le calque texte en dessous appliquez un nouveau style de calque :

- Incrustation couleur : #c1913e.

- Contour : Taille => 2 px et couleur => #c1913e.


Nous allons maintenant créer des calques à  partir des effets appliqués. Cliquez (droit) sur les effets et sélectionnez « Créer des calques« , vous avez maintenant deux calques supplémentaires que nous fusionnons avec le calque texte. Nous appliquons un dernier effet à  celui-ci : Ombre portée : Mode de fusion => Normal, Opacité => 86, Angle=> 120 , Distance=> 6, Maigri=> 0, Taille=> 9.

Affichez ensuite le calque texte du haut et changez la couleur de la typo par #4f8e85. Ajoutez un style de calque :

- Ombre portée : Mode de fusion => Normal, Opacité => 100, Angle=> 120 , Distance=> 1, Maigri=> 0, Taille=> 1.

- Ombre interne : Mode de fusion => Normal, Opacité => 75, Angle=> 120 , Distance=> 1, Maigri=> 0, Taille=> 1.

Renommez maintenant les calques de texte : « Tutoriel face » pour le calque positionné tout en haut et « Tutoriel dos » pour le calque en dessous.

Il est maintenant temps de texturer tout ca ! :) Prenez la texture fournie dans les fichiers sources ou encore une texture de votre choix (Mur, béton, etc) et placez là  au-dessus du calque « Tutoriel face« , mettez le calque en mode « Incrustation » et passez le en masque d’écrêtage. Dans le panneau « Teinte/Saturation« , baissez la saturation à  -100%.

Nous allons maintenant donner un peu plus de relief et de contraste à  cette typo, rien de plus simple. Créez un nouveau calque au dessus de la texture et passez le en « masque d’écrêtage » et en mode de fusion « Lumière tamisée« .
Vous allez maintenant peindre par dessus avec une brush abstraite comme des nuages (La première brush trouvée sur Google correspond parfaitement :)) en noir pour accentuer les couleurs et en blanc pour éclaircir.
L’utilisation d’une tablette graphique est un plus dans cette étape. Une fois satisfait du résultat vous pouvez dupliquer ce calque et baisser son opacité à  40%.
On ajoute encore une nouvelle texture, il s’agit cette fois d’une texture de flamme disponible dans les fichiers sources ou bien vous en trouverez très facilement dans Google Image. Passez là  en mode « Incrustation » avec une opacité de 40% et réglez la « teinte » à  -38 et la « saturation » à  - 33.

Pour modifier légèrement les couleurs vous pouvez créer un nouveau calque de réglage => Courbes, et modifier légèrement avec les trois courbes RVB. N’oubliez pas de mettre ce calque en « masque d’écrêtage ».

Vous pouvez répéter l’étape   qui consiste à  utiliser les textures sur le calque « Tutoriel dos« .

Pour finir, créez un calque « Trait haut » et à  l’aide de la plume, tracez une droite qui prend la largeur de l’image. Réglez votre pinceau (Epaisseur : 1 ou 2 px, opacité à  100% et dureté à  100%.) Dans le panneau forme, cochez « Dynamique de la forme ». Allez ensuite dans le panneau « Tracé » et cliquez (Droit) sur votre tracé => « Contour du tracé« . Prenez l’outil « Forme » et cochez « Simulez la pression« 

Appliquez une ombre portée : Normal, Opacité => 100, Angle=> 90, Distance=> 2, Maigri=> 0, Taille=> 1.

Dupliquez le calque et renommez le « Tracé Bas ». Déplacez-le en dessous du texte principal.

Voici à  quoi devrait ressembler votre panneau de calque ainsi que votre image à  la fin de l’étape 3.

Résultat final de la typo principal



Étape 4 : Création des particules avec After Effects !

Attention, c’est maintenant que ça va se corser ! Commencez par ouvrir After Effects (Cs3-Cs4-Cs5) et assurez-vous d’avoir le plugin de Red Giant, Trapcode Particular que vous trouverez ici.

Nous allons créer toutes nos compositions dans un premier temps pour être tranquille par la suite.

-Créez trois   « compositions » nommées « FX1« , « FX2« , « FX3 » avec les paramètres suivants :

-Nous allons maintenant importer le PSD crée précédemment, allez dans « Fichier » => « Importer » => « Fichier » ou « CTRL+I« . Sélectionnez votre PSD et utilisez les réglages suivants :


Voilà  notre maquette est désormais disponible dans la fenêtre « Projet » et prête pour être travaillée avec After Effects sous forme de composition. Si vous avez bien nommé et groupé vos calques, vous aurez plus de facilité pour vous y retrouver.
Cependant, nous allons laisser notre maquette de coté pour l’instant, et nous allons commencer la création des particules.

- Allez dans la composition « Fx1 » et créez un nouveau solide (« Calque » => « Créer » => « Solide » ou « CTRL+Y ») que vous nommerez « Smoke ». Assurez-vous qu’il soit à  la bonne résolution (1280×720) sinon cliquez sur « Créer taille de la composition« .
– Appliquons l’effet Particular à  notre solide, « Effet » => « Trapcode » => « Particular« . Vous pouvez apercevoir tous les paramètres dans la fenêtre « Effet ». Vous pouvez vous amuser à  déplier tous les onglets pour vous rendre compte de toutes les possibilités qu’offre ce plugin ;) ! Pas de panique nous n’utiliserons pas tout.

- Il vous suffit de rentrer les mêmes réglages que ci-dessous :


-Dans la « timeline » déplacez vous à  3 sec, les particules agissent au cours du temps donc vous n’aurez aucun résultat si vous restez à  0 sec. Dupliquez le solide « Smoke« , « CTRL+D« . Vous devriez avoir une sorte de fumée bleue comme ceci :

-Nous allons maintenant créer des fines particules de lumière, créez un nouveau solide « CTRL+Y » que vous nommez « Etoile » et appliquez l’effet « Particular » et entrez les réglages suivants :

-Passez le solide en mode « Addition » et dupliquez le « CTRL+D« . Vous devriez maintenant avoir ceci :

– Nous avons terminé avec la composition « FX1« , passons tout de suite à  la composition « FX2« . Nous allons réaliser un fil de particules qui suit un tracé, c’est une méthode très utilisée avec « Particular ».
– Créez un nouveau solide et à  l’aide de l’outil « plume » (« G« ) tracez une courbe comme ci-dessous :

- Toujours dans la même composition, créez une nouvelle « lumière » (« Calque » => « Créer » => « Lumière« ) et nommez là  « Emit« . Sélectionnez le solide noir où se trouve le tracé et appuyez sur la touche « M« . Vous devriez maintenant voir la propriété « tracé du masque« , cliquez sur celle-ci et copiez la (« CTRL+C« ), vous pouvez supprimer le solide il ne nous sert plus à  rien ! Sélectionnez maintenant la « lumière » « Emit« , cliquez sur « P » pour afficher l’option « Position » que l’on sélectionne aussitôt, et faites un petit collage « CTRL+V » ! A ce niveau,une petite explication me semble nécessaire. ;)

L’étape que nous venons de réaliser est très simple, à  partir d’un « masque » (Tracé à  la plume) sur un solide nous avons copié les propriétés de ce tracé pour les transmettre à  une lumière dans le but de l’animer ! Vous devez donc maintenant avoir une lumière constituée de trois images clé qui se déplace de 0 à  2sec (Faites glisser le curseur dans la timeline pour apprécier le résultat).

Vous l’aurez compris, la lumière va servir d’émetteur pour nos particules. Celle-ci vont suivre le chemin tracé par notre lumière.

- Créez un nouveau « solide » nommé « Fil » et appliquez l’effet « Particular« , pour lier les particules à  la lumière, cochez   « Light(s) » dans « Emitter Type« . Un message d’erreur devrait apparaître, cliquez sur « Options » et dans la fenêtre qui apparaît, écrivez le nom de votre « lumière« , à  savoir « Emit« , dans la case de Gauche. Vos particules sont dorénavant complétement liées à  notre lumière ! :)

-Vous pouvez maintenant créer trois autres solides « Particules« , « Smoke » et « Fil2« . Vous pouvez retrouver les réglages des 4 solides   ci-dessous (cliquez pour voir en grand) :

Réglages AE

Une fois tous ces réglages appliqués, vous devriez avoir un résultat semblable à  celui là  :

-Copiez les 4 solides ainsi que la lumière et collez-les dans la composition « FX3« . Sur le solide lumière appuyez sur « U » (Raccourcis qui permet de voir toutes les images clé) et cliquez sur le chrono pour enlever celles-ci, nous allons en fait changer l’animation donc nous répétons l’étape qui consiste à  créer un solide et un tracé pour ensuite l’appliquer à  une lumière. Cette fois, vous allez faire un cercle avec l’outil « Ellipse ».

-Sélectionnez la « lumière« , appuyez sur « P » et faites « ALT + CLICK » sur le chrono du paramètre position, nous allons entrer une simple « expression » : Wiggle(100,150);
-Sélectionnez la dernière image clé et positionnez-là  à  1 sec.

-Vous devriez normalement avoir un résultat plus ou moins proche de l’image ci-dessous ! :

Le tutoriel touche enfin à  sa fin ;). Encore un peu de courage, nous y sommes presque !

- Créez une composition nommée « FX3.1 » dans laquelle vous glissez la composition « FX3« . Dupliquez « FX3« , cliquez droit sur celle-ci et faites « Géométire » => « Basculer Horizontalement« . Dupliquez ces deux compositions et redimensionnez-les en appuyant sur le raccourci « S » pour faire apparaitre l’option « Échelle« 

Il ne nous reste plus qu’à  compiler tout ça ensemble et faire quelques derniers réglages !
– Nous allons enfin ouvrir notre maquette ;). Dans la fenêtre projet, ouvrez la composition de votre maquette importée précédemment, dans mon cas, il s’agit de la composition « Crea ». Nous allons retrouver tous les éléments de notre PSD et si vous avez bien rangé celui-ci, vous ne devriez pas avoir de problème !

NB : Les groupes sous photoshop sont des compositions dans After.

- Il vous suffit simplement d’importer les compositions « FX1« , « FX2 » et « FX3.1 » et de les positionner juste au-dessus de la composition « Background« .
– Dupliquez « FX2 » et basculez-là  horizontalement et verticalement et dupliquez « FX3.1« .

- Ajoutons un dernier effet, créez un nouveau solide blanc et appliquez lui l’effet « Bruit de turbulence » (Dans « Effet » =>  » Bruit et grain » ). Changez la valeur de « l’évolution » => 0x + 319 ° et dans « Transformation« , décochez « Echelle uniforme » et entrez la valeur de 1000 à  « Hauteur d’échelle« 

- Ensuite ajoutez l’effet « Volet linéaire » (Dans « Effet » => « Transitions » ). Changez les valeurs suivantes : « Pourcentage » => 60%, « Angle » => 0x +0 ° et « Contour progressif » => 375. Passez maintenant ce solide en mode « Incrustation« .

- N’oubliez pas de vous positionner à  une seconde dans la timeline et décalez la composition « FX1 » de 1 à  2 sec vers la gauche de sorte à  obtenir plus de particules ! Vous pouvez vous positionner à  différents moments de la timeline pour avoir différentes images. Je vous encourage fortement à  jouer avec toutes ces particules et de tester toutes les options qu’offre Trapcode Particular ! Pour exporter votre image, allez dans « Composition » => »Enregistrer l’image sous » => « Fichier« .
Une fenêtre « File d’attente de rendu » va apparaître, pour choisir la destination de notre PSD, cliquez sur le texte en orange à  coté de « Destin » et sélectionnez votre destination et le nom de votre fichier. Vous pouvez maintenant cliquer sur rendu.

- Ouvrez le PSD, dupliquez l’image et passez-la en mode « Lumière Tamisée » et baissez l’opacité à  50%.

Félicitations si vous êtes arrivés jusqu’au bout de ce tutoriel, voici l’image finale :) :

Tout d’abord, j’espère que vous aurez apprécié ce tutoriel et surtout qu’il vous a permis de progresser et assimiler différentes techniques. J’ai essayé d’être le plus clair possible dans mes explications, n’hésitez surtout pas à  poser des questions ! Je vous encourage aussi à  me faire part de vos impressions, remarques, critiques, suggestions voire encouragements dans le but d’améliorer les prochains tutoriels :)
Prochainement dans la partie II, nous animerons tous ces éléments afin de créer un court opening d’une dizaine de seconde !

Je vous laisse donc patienter et je vous dit à  la prochaine :)

21 Comments to “Créez une animation typographique en vidéo 1/2 : Photoshop”

  • Décidément on en apprend tous les jours sur ce site !

    Tutoriel plutôt sympa en tout cas =D Réalisation claire, explications précise c’est un bon point !

    Par contre tiliser les BO de tron est une bonne idée mais autant le mettre en crédit ^^

  • Bon tuto, bien expliqué.

    La réalisation est même plus que sympa.

  • Ouais on a reconnu le End Titles de la BO de Tron! Je suis pour l’intégration des Daft Punk dans les crédits :D

  • Moi qui voulait me mettre a After effects, j’attends avec impatience la suite de ce tuto , très cool en tout cas !

  • Bonjour,

    Merci pour ce tuto très intéressant.

    Je suis bloqué au début de l’utilisation de After Effect, en effet, je n’ai pas le Trapcode Particular, et celui-ci est payant.

    N’y a-t-il pas un plugin gratuit similaire? Ou une façon de faire qui ne nécessite pas de plug in payant?

    Merci d’avance,

    Fabien

    • Salut et merci :)

      Alors si tu ne possèdes pas le plug Particular, je pense que tu peux t’en sortir avec CC Particle World qui est intégré de base dans After.

      Si tu as compris le principe de Particular, tu devrais t’en sortir avec CC Particle World qui est très similaire !

      Il se trouve dans Effet > Simulation > CC Particle World.

      • Merci pour l’info ! Du coup maintenant j’attends la suite ^^

        Bon courage pour la réalisation du prochain tuto donc !

        Et merci encore !

  • Très bon tutoriel … et magnifique rendu surtout !!

    Bravo

  • Bonjour,
    comme toujours un très bon tuto est riche de détails et de créativité !
    Bravo.

    ps: problème de lien pour les fichier sources

    • Bonjour, merci de nous avoir signalé ce petit problème. C’est réglé ! ;)

  • Bonjour,
    Merci et super tutoriel !
    Mais j’ai un petit problème, j’ai une croie rouge qui s’affiche sur ma création. Comment l’enlever ?
    Merci d’avance.

    • Salut,
      Merci !
      Si tu as une croix rouge dans After, c’est certainement à cause d’un plug dont la licence n’est pas bonne :)
      Particular sûrement ?

      • Oui, sauf que moi c’est tous le trapcode … Donc je doit acheter, les plugins pour enlever la croix ?

  • Je débute sur after effects, Je tiens à travailler sur des tutos de qualité. Le tiens est magnifique et ta générosité tout aussi admirable.

  • […] animation typographique en vidéo 2/2 : After Effects Approche Théorique du Webdesign Créez une animation typographique en vidéo 1/2 : Photoshop Créer un site d’entreprise de A à Z 2/3 : Intégration HTML5 / CSS3 Les instruments […]

  • Super tuto déjà, mais au niveau de Photoshop, je ne sais pas comment régler le calque de réglage courbes pour que la couleur soit la même ou presque que sur l’image, j’ai essayé au pif mais en vain. Un petit screen serait possible siouplez ? =I

  • Bonsoir,

    Je suis actuellement bloqué quand il faut utiliser l’outil « Ellipse », c’est juste quand copie-colle dans FX3.

    Merci pour ceux qui m’aideront. :)

  • […] Créez une animation typographique en vidéo 1/2 : Photoshop […]

  • […] Je me suis aidé de ce tutoriel sur Living Tuts pour la création du […]

  • Bonjour,

    Excellent Tuto mais moi je suis bloqué dans la 1ere partie, là ou il faut mettre un masque d’écrêtage dans le calque du haut « tutoriel face » l’image que j’avais mis en incrustation disparait completement.

    Que faire Svp ?? :-(

    Merci d’avance

  • Très bon tuto avec un rendu final sobre mais efficace.

Laisser un commentaire