Photoshop : créer une animation GIF de pluie avec des filtres

Le cœur d'une animation de pluie dans PS, c'est l'enregistrement d'action plus le montage. Enregistrez une action qui construit un calque de gouttes pour que les calques se dupliquent tout seuls, utilisez le montage pour en faire une animation image par image, puis exportez un GIF. Le fichier reste léger, ce qui le rend parfait pour un fond de page ou un sticker — et Online PS sait aussi enregistrer des actions.

1️⃣ Préparation

1. Ouvrez Online PS (zaixianps.cc).
2. Appuyez sur Ctrl+O (ou cliquez sur Fichier → Ouvrir en haut à gauche) pour charger l'image de fond sur laquelle vous voulez de la pluie.
3. Vérifiez que l'image de fond est bien le calque du bas dans le panneau Calques (affiché en général comme Arrière-plan ; s'il est verrouillé, double-cliquez dessus pour le déverrouiller en calque normal).

2️⃣ Créer une action et enregistrer le calque de gouttes

1. Appuyez sur Alt+F9 pour ouvrir le panneau Actions.
2. Cliquez sur Créer un nouvel ensemble en haut à droite du panneau et nommez-le Default Actions 1.
3. Dans cet ensemble, cliquez sur Créer une action et définissez :
   • Nom : Rain
   • Ensemble : Default Actions 1
   • Touche de fonction : F2
4. Cliquez sur Enregistrer (le point rouge se met à clignoter) pour commencer l'enregistrement.
5. Enregistrer le calque de gouttes
1. Appuyez sur Shift+Ctrl+N pour créer un nouveau calque, nommé Calque 1 par défaut.
2. Le calque Calque 1 sélectionné, appuyez sur Shift+F5 pour ouvrir Remplissage, puis dans la boîte de dialogue :
   • Contenu : Noir
   • Mode : Normal
   • Opacité : 100 %
3. Choisissez Filtre → Bruit → Ajout de bruit avec :
   • Quantité : 20 %
   • Répartition : Gaussienne
   • Monochrome : ✅ (coché)
   ※ La quantité de bruit contrôle la densité et la taille des gouttes — trop de bruit et l'image devient grise et boueuse, pas assez et le mouvement se lit à peine.
4. Choisissez ensuite Filtre → Flou → Flou directionnel avec :
   • Angle : 90° (droit vers le bas)
   • Distance : 25 pixels
5. Dans le menu déroulant Mode de fusion de Calque 1, choisissez Écran. Les gouttes apparaissent maintenant comme des traînées blanches transparentes.
6. Si des bords sombres ou du bruit apparaissent autour des gouttes, appuyez sur Ctrl+T (Transformation manuelle) et agrandissez un peu le calque pour que ses bords dépassent du plan de travail — cela masque la couleur indésirable.
6. Une fois les étapes ci-dessus terminées, cliquez sur Arrêter l'enregistrement en bas du panneau Actions (l'icône carrée) pour terminer l'enregistrement.

3️⃣ Laisser l'action dupliquer les calques

1. Le panneau Actions toujours ouvert, sélectionnez l'action Rain que vous venez d'enregistrer.
2. Appuyez deux fois sur F2. L'action s'exécute deux fois et produit Calque 2 et Calque 3 — trois calques de gouttes au total.
3. Le panneau Calques doit maintenant afficher :
   Arrière-plan, Calque 1, Calque 2, Calque 3.

4️⃣ Construire l'animation image par image (GIF) avec le montage

1. Ouvrez Fenêtre → Montage (Fenêtre → Montage).
2. La boîte de dialogue propose par défaut Créer une chronologie vidéo — cliquez plutôt sur Créer une animation image par image en bas à gauche (pas vidéo).
3. Créer une animation de gouttes en trois images
1. L'image 1 apparaît par défaut. Cliquez sur l'étiquette de durée sous l'image et réglez 0,1 seconde.
2. Dans le panneau Calques, laissez seulement Arrière-plan et Calque 1 avec leur icône d'œil activée, et désactivez les autres.
3. Cliquez sur Dupliquer les images sélectionnées en bas à droite du montage pour créer l'image 2.
   • Réglez aussi la durée sur 0,1 seconde.
   • Activez Arrière-plan et Calque 2, et masquez les autres.
4. Cliquez encore sur Dupliquer les images sélectionnées pour créer l'image 3.
   • La durée reste à 0,1 seconde.
   • Activez Arrière-plan et Calque 3, et masquez les autres.

Remarque : chaque image utilise le calque de gouttes suivant (image 1 → Calque 1, image 2 → Calque 2, image 3 → Calque 3), et le calque de fond reste visible tout le temps.

4. Dans Options de bouclage en haut à gauche du montage, choisissez Toujours pour que le GIF boucle sans fin.
5. Cliquez sur Lecture dans le montage pour prévisualiser. Si le résultat vous convient, passez à l'étape suivante.

5️⃣ Exporter en GIF (pour le web)

1. Utilisez Alt+Shift+Ctrl+S (ou le menu Fichier → Exporter sous → GIF...).
2. Dans le panneau de réglages qui s'ouvre, ces valeurs fonctionnent bien :
   • Couleurs : 256 (meilleure qualité)
   • Taille : conservez la largeur et la hauteur d'origine (ou mettez à l'échelle vous-même)
   • Bouclage : Toujours
   • Délai entre images : 0,1 seconde (déjà réglé dans le montage)
   • Autre : laissez « Palette de couleurs uniforme » cochée
3. Cliquez sur Enregistrer et téléchargez le fichier .gif généré.

🎉 Terminé !

Vous avez maintenant une animation GIF de pluie, prête à être intégrée dans une page web, sur les réseaux sociaux ou partout où de la pluie animée est la bienvenue.

Références

• Documentation officielle d'Adobe Photoshop
• HTML5 et les principes du traitement d'image front-end moderne
• Online PS