[Tutoriel Photoshop] Créer un gif avec une lueur animée

Hello,
Aujourd'hui, suite à la demande d'un admin d'un forme de one piece, je vous présente un tuto incluant la manière dont il faut procéder pour avoir un gif avec une lueur animée sur la typo. Sachez que ce tutoriel est pour débutant, mais nécessite cependant les bases fondamentales.
J'ai détaillé et imagé au mieux que je le puisse chaque étape, donc ça devrait aller (enfin je l'espère ).

______________________________________

Etape 1 :

Tout d'abord, munisez-vous d'un fond (pour ça, je ne viendrai pas dans les détails, si vous êtes débutant, un simple dégradé de couleurs suffira).



Etape 2 :

A présent, nous allons rajouter la typo (le texte quoi). Pour info, j'ai utilisé la police Mandigo, gratuitement téléchargeable ici (pour installer la police, faites clic droit/installer sur le fichier téléchargé).
Pour embellir, allez dans "Style de calque" (en double-cliquant sur votre calque "Fond") et rajoutez un contour blanc de 2 px, une incrustation en dégradé (qui inclura les couleurs du 1er/2ème plan). Si vous le souhaitez, vous pouvez aussi rajouter une ombre, mais pas plus (ça alourdirait l'image visuellement).



Etape 3 :

Bon, comme je vous voit bailler (sisi, les deux du fond là), on va commencer à corser les choses... Créez un nouveau calque "Lueur" juste au-dessus du calque "Fond". Sur ce calque, créez un rectangle blanc à la verticale, à l'aide de "L'outil rectangle" et avec un premier plan de couleur blanche.
Cliquez simultanément sur les touches Alt+T afin de transformer votre calque. A coté du petit dessin en forme d'angle sur le haut, entrez le nombre 40 (de cette manière, le rectangle pivotera d'un angle de 40°). Allongez ensuite ce rectangle sur toute la hauteur du document.



Etape 4 :

Toujours dans le calque "Lueur", allez dans l'onglet "Filtres" puis dans "Atténuation"/Flou Gaussien" et appliquez un rayon de 10 px.
Ceci étant fait, ancrez-le calque avec le raccourci Alt+G (en faisant bien attention d'avoir ce calque au-dessus du calque texte).
Vous remarquez ensuite que la lueur n'est affichée que sur le texte (pour ceux qui ne voient plus la lueur, déplacez-la au-dessus de la typo et vous verrez que j'ai raison ^^). Lorsque vous aurez terminé de vous amuser à déplacer la lueur de manière horizontale, vous cacherez le calque en cliquant sur l’icône ressemblant à un œil.



Etape 5 :

Avant de passer à l'animation, nous allons embellir notre image. Commençons par rajouter un contour de 1 px, extérieur et d'opacité 50 % au calque "Fond" (via le "style de calque").
Ceci étant fait, nous allons arrondir les bords. Pour cela, prenez "l'outil rectangle arrondi" avec un rayon de 10 px et un premier plan de la couleur de votre choix. Sur un nouveau calque situé tout en haut, créer donc ce rectangle arrondi en suivant les bords du fond. Il faut que ce soit proprement superposé, donc n'hésitez pas à zoomer et redimensionner avec Ctrl+T afin d'avoir un résultat parfait. Une fois ceci achevé, cliquez tout en restant appuyé sur Ctrl sur l'image situé à côté de votre calque dans la fenêtre de calques. Vous remarquerez que celui sélectionne le contenu de votre calque. Cliquez sur Ctrl+Shift (majuscule)+I, positionnez vous sur le calque "Fond" et appuyer sur "Suppr". Supprimez le calque contenant le rectangle arrondi et vous remarquerez que le fond a la même forme. ^^



Etape 6 :

Maintenant, nous allons passer au reflet sur le haut de l'image. ^^
Pour cela, faites un calque "Reflet" au dessus du calque fond et ancrez-le avec Ctrl+G. Plus la peine de vous expliquer l'utilité de l'ancrage, je pense que vous avez compris. Donc prenez "l'outil ellipse" avec la couleur blanche en premier plan et faites une ellipse s'étendant sur toute la largeur du document. Placez-là comme sur l'image ci-dessous. Baissez ensuite l'opacité du calque "Reflet" à 40 %.



Etape 7 :

On passe maintenant à l'animation. ^^ Avant tout, ouvrez la fenêtre animation en allant dans "Fenêtre" / "Animation" (impressionnant comme démarche, n'est-ce pas ? xD).



Etape 8 :

Bon, cette étape n'en est pas vraiment une, c'est simplement pour vous signaler qu'il faut appuyer sur le bouton que j'ai encadré en rouge s'il s'affiche une fenêtre comme celle que vous avez ci-dessous.



Etape 9 :

Je sens que vous vous ennuyez, passons aux choses sérieuses (je plaisante, la suite n'est pas très compliquée ^^).
Vous devrez à présent apercevoir cette fenêtre là :



Affichez le calque lueur précédemment masqué, et masqué l'arrière-plan (s'il y en a). Placez la lueur à gauche de la typo, de sorte que l'on ne la voit pas. Cliquez ensuite sur le curseur noir à droite de la fenêtre d'animation, puis sur "Nouvelle image". Dans cette fenêtre, il devrait s'afficher une nouvelle case numérotée "2". Décalez ensuite la lueur légèrement vers la droite (en restant appuyé sur la touche Maj) de sorte qu'on la voit légèrement. Créez ensuite une nouvelle image, et déplacez la lueur de quelques pixels vers la droite. Répétez cette étape jusqu'à ce que la lueur soit à l’extrême droite de la typo, donc non visible.



Etape 10 :

Vous avez passé le plus long concernant l'animation. Cliquez sur le curseur noir à droite de la fenêtre animation, puis sur "sélectionner toutes les images". Toutes les images étant sélectionnées, cliquez sur le curseur d'une des cases, et sélectionner la vitesse à laquelle vous souhaitez que la lueur défile (sachant que plus il y a de cases, plus il faut une vitesse importante, donc peu de seconde pour chaque case). Si vous souhaitez mettre une durée ne figurant pas dans les temps proposés, cliquez sur "Autres" et entrez la valeur souhaitée. Vous pouvez faire lire l'animation pour voir ce que ça donne.
Une fois ceci terminé, cliquez sur la dernière case et réglez le temps à 1 seconde. De cette manière, cela marquera une pause et évitera d'avoir une lueur qui défile sans s'arrêter.

(Hmm... Pas d'image cette fois...)


Etape 11 :

Bon, si ça peut vous rassurer, sachez qu'on touche presque à la fin. Il ne reste plus qu'à enregistrer votre fichier. Cliquez donc sur "Fichier" / "Enregistrer pour le web et les périphériques" et laissez les réglages tels quels, sauf pour un critère : En face "d'options de boucle", choisissez toujours pour un gif continu.



Et oui, c'est enfin terminé ! Voici le résultat :





Bon, n'hésitez pas à lancer des commentaires (et désolé pour la clarté du tuto, il y a peut-être trop de texte pour rien dire). ^^