Tombe la neige

Dans un précédent tuto, je vous expliquais pourquoi et comment j'avais décidé de me passer de logiciels Windows sous Wine pour créer des animations uniquement avec GIMP. Après la pluie donc, voici non pas le beau temps mais, solstice oblige, la neige.

Matériel nécessaire

• une image sur laquelle vous voulez faire neiger (pour cet exemple, j'ai choisi une image avec des flocons de neige statiques pour créer un effet tourbillonnant)
• GIMP 2.10 (libre et gratuit pour Linux/Windows/OSX)

Instructions

1. Ouvrir une copie de votre image à animer dans GIMP et la redimensionner au besoin pour une taille raisonnable pour éviter d'avoir une animation trop lourde à charger.

2. Ajouter un nouveau calque blanc.

3. Menu Couleurs - Inverser.

4. Ajouter du bruit via le menu Filtres - Bruit - Brouillage TSV avec la configuration suivante :

- Dulling = 8
- Teinte = 1
- Saturation = 1
- Valeur = 1
- Cliquer sur Nouveau germe (mauvaise traduction de « seeding ») pour générer une nouvelle répartition aléatoire des pixels

 5. Appliquer Filtres - Ombres et lumières - Étinceler avec les paramètres suivants :

- Seuil de luminosité = 0,017
- Intensité de l'éblouissement = 0,50
- Longueur des pointes = 10
- Nombre de pointes = 5
- Angle des pointes = -1
- Densité des pointes = 1
- Transparence = 0
- Teinte aléatoire = 0
- Saturation aléatoire = 0
- Cocher Préserver la luminosité
- Cocher Couleur du premier plan (qui doit être blanc)

6. Supprimer le fond noir du calque avec le menu Couleurs - Couleur vers alpha avec les paramètres suivants :

- Couleur = noir
- Autres paramètres par défaut

7. Renommer le calque Neige 1 et régler son mode de mélange sur Superposer.

8. Répéter deux fois les étapes 2 à 7 en veillant bien à cliquer sur Nouveau germe à l'étape 4 (très important) et en renommant les calques Neige 2 et Neige 3.

9. Dupliquer deux fois le calque de l'image de fond et disposer une copie sous chaque calque neige.

10. Fusionner chaque calque neige vers le calque d'image de fond juste au dessous via le menu contextuel Calques - Fusionner vers le bas. Vous devez avoir maintenant 3 calques différents.

11. Modifier le mode des couleurs pour un GIF optimisé via le menu Image - Mode - Couleurs indexées :

- Générer une palette optimale
- Tramage des couleurs = Floyd-Steinberg (couleurs qui déteignent moins)

12. Il ne reste plus qu'à exporter votre animation via le menu Fichier - Exporter sous en choisissant Image GIF dans Type de fichier. Une autre fenêtre s'ouvre pour le paramétrage de votre fichier de sortie :

- Cocher En tant qu'animation
- Cocher Boucler indéfiniment
- Délai entre les images là où ce n'est pas spécifié = 200 ms
- Autres paramètres par défaut

NOTE : Avant de fusionner les calques neige, il peut être utile de gommer certains flocons qui tombent sur un visage par exemple.

Pour ce second exemple réalisé à partir d'une photo perso, j'ai choisi un effet descendant. J'ai d'abord appliqué un masque à mon image pour l'adoucir. À l'étape 7, j'ai réglé le mode de mélange sur Lumière linéaire et réduit un peu l'opacité. Au lieu de répéter les étapes pour créer d'autres calques neige, j'ai dupliqué deux fois celui que j'ai créé et j'ai appliqué un décalage vertical via le menu Calques - Transformer - Offset de y = -30 pour le calque neige 1 et y = 30 pour le calque neige 3, celui du milieu restant intouché. J'ai ensuite dupliqué et intercalé les calques de fond sous les calques de neige et fusionné comme dans l'exemple précédent. À l'exportation, une fenêtre pop-up m'a invitée à rogner les calques débordant de l'animation en cliquant sur un bouton et pour le délai entre les images, j'ai choisi 400 ms.

Voilà, vous êtes maintenant parés pour lutter contre le réchauffement climatique et sinon pour animer vos cartes de Noël électroniques. Pour le vent, on verra une autre fois.

© La Pensine Mutine. Tous droits réservés. Reproduction interdite.

Partager :

Lire la suite

Le mauvais temps en images

Rencontrant récemment des petits soucis avec Wine (résolus depuis), je me suis décidée à chercher des solutions alternatives pour animer mes images sans passer par des logiciels Windows. Après tout, quand on choisit d'utiliser Linux, ce n'est pas juste pour la gratuité mais pour embrasser toute la philosophie derrière et par souci d'alignement à ses principes. Du moins, c'est le cas pour moi. J'ai donc trouvé un autre moyen de générer de la pluie dans mes animations sans utiliser ni Sqirlz Water Reflections ni Animation Shop (voir Articles connexes) qui ne fonctionneront d'ailleurs peut-être plus avec les versions ultérieures de Windows. Voici donc le résultat de mes expérimentations pour rester dans l'ambiance de la saison et la marche à suivre pour les reproduire avec les images de votre choix.

La pluie

Matériel nécessaire

• une image sur laquelle vous voulez faire pleuvoir (pour cet exemple, une photo prise avec mon téléphone dans un parc près de chez moi)
• GIMP 2.10 (libre et gratuit pour Linux/Windows/OSX)

Instructions

1. Ouvrir une copie de l'image que vous souhaitez animer dans GIMP et au besoin, la redimensionner afin de ne pas générer une animation trop volumineuse.

2. Ajouter un nouveau calque blanc au-dessus de celui de votre image.

3. Appliquer du bruit à ce nouveau calque à l'aide du menu Filtres - Bruit - Jeter avec les valeurs suivantes :

- Répéter = 2
- Randomisation = 50
- Cliquer sur Nouveau germe (mauvaise traduction de « seeding ») pour générer une nouvelle répartition aléatoire des pixels

4. Mettre le calque en niveaux de gris à l'aide du menu Couleurs - Désaturation - Couleur vers gris.

5. Régler le mode de mélange du calque sur Écran.

NOTE : Attention, j'utilise les nouveaux modes de mélange de la version 2.10 dont le rendu diffère de ceux des versions antérieures (toujours disponibles en utilisant le bouton de bascule dans la barre d'outils au-dessus de la palette des calques).

6. Appliquer un flou de mouvement à l'aide du menu Filtres - Flou - Flou cinétique linaire avec les valeurs suivantes :

- Longueur = 14,68
- Angle = 115

NOTE : Ces valeurs sont à adapter à votre image mais une longueur trop petite donnera plutôt un effet neige. L'angle est fonction de l'orientation que vous souhaitez donner aux gouttes de pluie.

7. Régler l'apparence du calque dans le menu Couleurs - Niveaux en fonction de votre image.  À titre d'exemple, voici les valeurs que j'ai utilisées :

- Niveaux d'entrée (à gauche) = 197
- Autres paramètres par défaut

8. Au besoin, réduire l'opacité du calque (79%).

9. Pour adoucir l'effet et le rendre plus naturel, appliquer un flou gaussien à l'aide du menu Filtres - Flou - Flou gaussien avec les valeurs suivantes :

- Taille X = 0,50
- Taille Y = 0.50
- Autres paramètres par défaut

10. Dupliquer le calque de l'image, le déplacer en haut de la pile et répéter les étapes 2 à 9 en veillant bien à cliquer sur Nouveau germe à l'étape 3 (très important).

11. Répéter l'étape 10.

12. Vous diposez maintenant de 3 calques identiques de votre image de base, chacun avec un calque de pluie différent au-dessus. Fusionner vers le bas chaque calque de pluie avec le calque d'image au-dessous. Vous devez avoir maintenant 3 calques différents.

13. Modifier le mode des couleurs pour un GIF optimisé via le menu Image - Mode - Couleurs indexées :

- Générer une palette optimale
- Tramage des couleurs = Floyd-Steinberg (couleurs qui déteignent moins)

14. Il ne reste plus qu'à exporter votre animation via le menu Fichier - Exporter sous en choisissant Image GIF dans Type de fichier. Une autre fenêtre s'ouvre pour le paramétrage de votre fichier de sortie :

- Cocher En tant qu'animation
- Cocher Boucler indéfiniment
- Délai entre les images là où ce n'est pas spécifié = 100 ms
- Autres paramètres par défaut

Et voilà, votre animation est prête !

NOTE : Au début de la manipulation, j'ai appliqué un filtre d'amélioration pour accentuer la netteté de mon image de départ et au final, j'ai augmenté la saturation de chacun des calques de l'animation.

Les éclairs

En plus de la pluie, j'ai eu envie de générer des éclairs histoire de voir si j'arriverais à terroriser ce courageux escargot sur son brin d'herbe (apparemment, sa coquille fait office de cage de Faraday).

Matériel nécessaire

• une image à animer (pour cet exemple, j'ai utilisé une image trouvée sur Pinterest)
• Brosses éclairs pour GIMP

Instructions

1. Pour utiliser les brosses, dézipper le fichier téléchargé sur DeviantArt et copier le dossier Lightning dans le répertoire Brushes de votre dossier de configuration GIMP.

- Sous Linux :
home/nom d’utilisateur/.config/GIMP/2.10 (ou autre version)
NOTE : Attention, le répertoire Config est un dossier caché, pour y accéder il faudra donc afficher les fichiers cachés.

- Sous Windows :
C:\Utilisateurs\nom d’utilisateur\GIMP\2.10 (ou autre version)

- Sous Mac OSX :
Désolée, je n'ai pas pu tester mais il est possible de trouver en allant dans le menu Edition - Préférences - Dossiers - Brosses de GIMP, ce qui vous permettra d'ailleurs (peu importe sous quelle plateforme vous êtes) d'ajouter un autre emplacement, ce que je trouve, pour ma part, beaucoup plus pratique.

Redémarrer GIMP pour charger les brosses. 

Le principe reste le même que pour la pluie mais avec moins de manipulations :

2. Dupliquer le calque original de l'image 3 fois pour un total de 4 calques identique.

3. Au-dessus de chaque calque de l'image (sauf le premier au bas de la pile), ajouter un calque transparent en mode Lumière vive (non disponible pour les versions antérieures à la 2.10).

4. Sur chaque calque transparent, appliquer au pinceau  (avec du blanc) une brosse éclair différente à des endroits différents avec les paramètres suivants :

- Taille = à adapter en fonction de la brosse et de votre image
- Proportions = 0
- Angle = 0
- Espacement = 25
- Dureté = 100
- Force = 50
- Dynamique de la brosse = Dynamics Off

5. Comme pour la pluie, fusionner ensuite chaque calque d'éclair avec le calque d'image au dessous pour n'avoir plus que 4 calques différents.

6. Appliquer l'indexation des couleurs.

7. Donner des instructions à l'animation en renommant ainsi les calques du bas vers le haut :

4 (200ms)
3 (200ms)
2 (200ms)
1 (600ms)

8. Exporter comme expliqué précédemment.

La totale

Après l'escargot, j'ai décidé de nettoyer l'esplanade du Trocadéro de ses touristes envahissants à grand renfort de pluie et d'éclairs.

Matériel nécessaire

• brosses éclairs
• une image à animer (pour cet exemple, j'ai utilisé une photo personnelle dont préciser le lieu serait superflu)

Instructions

Ce dernier exemple combine les deux précédents. La partie la plus complexe résidant dans l'agencement et la fusion des calques.

1. Créer les effets de pluie sur 3 calques comme expliqué plus haut.

2. Renommer les calques fusionnés comme suit en partant du bas :

pluie 3 (100ms)
pluie 2 (100ms)
pluie 1 (100ms)

3. Ajouter deux calques d'éclairs différents (le mode de mélange utilisé ici est Addition) en haut de la pile sans fusionner.

éclair 2
éclair 1
pluie 3 (100ms)
pluie 2 (100ms)
pluie 1 (100ms)

4. Ensuite dupliquer chacun de des calques pluie en les agençant comme suit :

éclair 2
éclair 1
+ pluie 3#2 (100ms)
+ pluie 2#2 (100ms)
+ pluie 1#2 (100ms)
pluie 3 (100ms)
pluie 2 (100ms)
pluie 1 (100ms)

Ce qui donne un cycle de pluie de 600ms.

Explication du principe : pour la pluie, chaque calque doit s'afficher durant 100ms soit un total de 300ms pour un cycle; pour les éclairs, on a besoin de deux cycles de pluie de 300ms, soit 600ms puis 200ms pour chaque calque d'éclair. Il va falloir combiner tout ça (pluie seule, pluie + éclairs) en dupliquant et fusionnant certains calques.

5. Dupliquer une fois chaque calque d'éclairs (en haut de la pile) :

+ éclair 2#2
éclair 2
+ éclair 1#2
éclair 1
pluie 3#2 (100ms)
pluie 2#2 (100ms)
pluie 1#2 (100ms)
pluie 3 (100ms)
pluie 2 (100ms)
pluie 1 (100ms)

6. Dupliquer et intercaler des calques de pluie différents sous chaque calque éclair avant de pouvoir les fusionner comme suit :

↓ éclair 2#2
+ pluie 1#4 (100ms)

↓ éclair 2
+ pluie 3#3 (100ms)

↓ éclair 1#2 (1
+ pluie 2#3 (100ms)

↓ éclair 1
+ pluie 1#3 (100ms)

pluie 3#2 (100ms)
pluie 2#2 (100ms)
pluie 1#2 (100ms)
pluie 3 (100ms)
pluie 2 (100ms)
pluie 1 (100ms)

7. Fusionner ensuite chaque calque d'éclair avec le calque de pluie qui se trouve au-dessous. Vous devriez avoir ceci  :

éclair 2 + pluie 1 (100ms)
éclair 2 + pluie 3 (100ms)
éclair 1 + pluie 2 (100ms)
éclair 1+ pluie 1 (100ms)
pluie 3#2 (100ms)
pluie 2#2 (100ms)
pluie 1#2 (100ms)
pluie 3 (100ms)
pluie 2 (100ms)
pluie 1 (100ms)

Nous avons donc un cycle de pluie de 600ms suivi de deux cycle éclairs-pluie de 200ms tandis que l'effet pluie reste toujours à 100ms par calque à l'intérieur du cycle d'éclairs (désolée, si je vous ai largués en route).

8. Appliquer l'indexation des couleurs.

9. Exporter comme expliqué précédemment.

Voilà, j'espère que ces tutoriels un peu longs vous auront plu et ne vous auront pas paru trop compliqués.

Bon vent !

© La Pensine Mutine. Tous droits réservés. Reproduction interdite.

Partager :

Lire la suite

Incruster une vidéo dans une image

À l'occasion du passage à l'équinoxe d'automne, je vous propose un petit tuto graphique réalisé à partir d'une vidéo filmée avec mon téléphone pour vous mettre dans l'ambiance. Il y a cinq ans (oups, déjà !), je vous expliquais comment incruster un GIF animé tout prêt dans une image à l'aide d'Animation Shop et de Paint Shop Pro. Depuis, je suis passée à Linux et je découvre peu à peu toutes le fonctionnalités de GIMP 2.10 même si pour certaines choses (notamment les filtres externes et les masques), j'utilise encore Paint Shop Pro 8 qui fonctionne très bien sous Wine (à part certains filtres sympas mais non indispensables).

Pour ce tuto, vous aurez donc besoin uniquement d'une version récente de GIMP disponible pour Windows, Mac et Linux.

Matériel nécessaire

• une vidéo au format MP4, WebM, AVI, MPEG, FLV, MOV, 3GP ne dépassant pas 100 M-
• une image avec une zone transparente pour y incruster la vidéo (évitez une trop grande résolution sinon l'animation résultante sera de mauvaise qualité et trop lourde à charger sur une page Web)

Instructions

1. Nous allons commencer par transformer la vidéo en GIF animé. Pour cela nous allons utiliser une application gratuite en ligne qui va faire tout le travail. Rendez-vous ici : https://ezgif.com/video-to-gif

2. Dans Upload video file, cliquer sur Parcourir pour sélectionner une vidéo sur votre ordinateur ou insérer un lien vers une vidéo en ligne dans Paste video URL. Cliquer ensuite sur le bouton Upload video.

Fig. 1

Fig. 2

3. Une fois votre vidéo téléversée, vous devriez la voir s'afficher avec une barre d'outils au-dessus (fig. 1).

4. Dans cette barre, sélectionner l'outil Resize video pour redimensionner la vidéo à une taille adaptée à l'image dans laquelle nous souhaitons l'incruster. Indiquer dans New width la taille en pixels souhaitée. Laisser le cadre New height vide pour que l'algorithme calcule automatiquement le bon ratio. Ne modifier rien d'autre et cliquer sur le bouton Resize video (fig. 2).

Fig. 3

Fig. 4

5. La vidéo redimensionnée apparaît un peu plus bas sur la page avec une barre d'outils au-dessous (fig.3).

6. Cliquer sur l'outil Crop video pour recadrer votre vidéo sinon ignorer cette étape et cliquer sur un autre outil. Vous avez la possibilité de choisir un ratio (carré, 4:3, 16:9, etc.) ou de tracer le cadre de sélection manuellement en approchant le curseur de la vidéo comme dans un logiciel de retouche d'image et le modifier à volonté en sélectionnant un des poignées de redimensionnement tout autour. Cliquer ensuite sur le bouton Crop video (fig. 4).

Fig. 5

Fig. 6

7. La vidéo recadrée apparaît un peu plus bas sur la page avec une barre d'outils au-dessous (fig.5).

8. Cliquer sur l'outil Cut video pour ne conserver qu'une petite séquence. Pour ce faire, cliquer sur la flèche du lecteur pour commencer à lire la vidéo. À l'endroit souhaité où doit démarrer la séquence, cliquer sur le bouton Use current position à droite de Start time pour marquer le début de la séquence, puis pareil pour End time (fin de la séquence). Vous pourrez modifier ces chiffres manuellement après pour plus de précision si nécessaire. Ensuite cliquer sur le bouton Cut video (fig. 6).

Fig. 7

Fig. 8

9. Comme pour les autres étapes, la vidéo résultante apparaît une peu plus bas dans Processed video avec une barre d'outils. Vous pouvez sélectionner d'autres outils si vous souhaitez par exemple modifier la vitesse, etc.

10. Sélectionner l'outil Video to GIF pour convertir la vidéo en GIF animé. Dans la nouvelle fenêtre, modifier le débit d'images par seconde (Framerate) en fonction de la durée de votre clip. Plus ce nombre sera élevé, plus il y aura d'images et plus le GIF résultant sera lourd. Ensuite cliquer sur le bouton Convert to GIF (fig. 7).

11. Le GIF résultant apparaît un peu plus bas avec sa barre d'outils. Cliquer sur l'outil Save pour l'enregistrer sur votre ordinateur (fig. 8).

12. Lancer GIMP et ouvrir une copie du GIF. Dans la fenêtre des calques, toutes les images composant votre animation apparaîtront de bas en haut. Vous pouvez visualiser l'animation en cliquant dans le menu Filtres - Animation - Rejouer l'animation. Là il est encore possible de raccourcir la séquence en supprimant des calques consécutifs depuis le haut et/ou le bas de la pile mais pas au hasard sinon le mouvement risque d'être saccadé.

13. Afin de pouvoir travailler les couleurs, nous allons en augmenter le nombre en cliquant dans le menu Image - Mode - RVB.

14. Sélectionner le calque en haut de la pile. Dans un nouvel onglet, charger l'image dans laquelle vous souhaitez incruster l'animation. Vous pouvez soit la copier et la coller comme nouveau calque dans la séquence d'images ou plus rapide, sélectionner son onglet et tout en maintenant le bouton gauche de la souris enfoncé, le faire glisser sur l'onglet de l'animation pour ouvrir sa fenêtre et le descendre sur l'animation elle-même où elle sera automatiquement ajoutée comme nouveau calque.

15. Si vous avez correctement redimensionné votre vidéo sur EzGif, votre image dans laquelle l'insérer sera plus grande et en la glissant comme nouveau calque, elle sera tronquée. Cliquer sur le menu Image - Ajuster le canevas aux calques pour résoudre ce problème. Vous pourrez ensuite ajuster parfaitement votre image/cadre à l'animation à l'aide de l'outil de mise à l'échelle ou le menu Calque - Échelle et taille du calque.

16. À l'aide de la baguette magique, sélectionner la partie transparente du calque puis inverser la sélection. Sélectionner le calque sous celui du cadre et cliquer sur la touche Suppr de votre clavier. Faites de même pour tous les calques. Désélectionner en cliquant dans le menu Sélection - Aucune.

17. Déplacer le calque du cadre du haut de la pile juste au-dessus du calque Arrière-plan. Faire un clic droit et fusionner vers le bas (ou menu Calque -  Fusionner vers le bas).

18. Il ne vous reste plus qu'à exporter votre image. Cliquer dans le menu Fichier - Exporter sous... Choisir l'emplacement sur votre disque dur et le nom. Au bas de la boite de dialogue, cliquer sur Sélectionner le type de fichier (selon l'extension) et choisir Image GIF puis cliquer sur le bouton Exporter. Une nouvelle boite de dialogue s'ouvre. Cocher les options En tant qu'animation et Boucler indéfiniment avant de cliquer à nouveau sur le bouton Exporter.

NOTE : J'ai effectué d'autres manipulations que je n'ai pas mentionnées afin que ce tutoriel reste le plus simple possible. Comme mon cadre avait également une zone transparente autour, j'ai ajouté un calque de la couleur des pages de mon blog tout en bas de la pile et j'ai fusionné le calque d'arrière-plan avec en prenant bien soin de le renommer exactement pareil pour que l'animation fonctionne. Pour unifier les teintes de mon animation au cadre, avant de fusionner ce dernier à l'étape 17, j'ai cliqué dans le menu Couleurs - Balance des couleurs et sauvegardé mes réglages avant de l'appliquer au calque sélectionné. J'ai refait l'opération pour TOUS les calques de l'animation SAUF celui du cadre à l'aide des touches CTRL + F (Répéter le dernier filtre).

Et voilà ! J'espère que ce tutoriel vous aura plu. Il y a des modules à rajouter pour transformer les animations dans GIMP mais cela me semble un peu trop compliqué pour l'instant et si jamais je change d'avis et trouve le temps de les explorer, qui sait cela fera peut-être l'objet d'un nouveau tutoriel.

© La Pensine Mutine. Tous droits réservés. Reproduction interdite.

Partager :

Lire la suite

Comment simuler un clignement d'yeux

Comme promis dans mon précédent tutoriel, je vais tenter de vous expliquer comme simuler un clignement d’yeux sur une image statique. Pour cela vous aurez besoin d'un logiciel de retouche d'image (j'ai utilisé Paint Shop Pro X) et d'Animation Shop ou tout autre programme permettant de créer des GIF animés à partir de plusieurs images. Notez toutefois que même si les directives sont simples, la technique n'est pas à la portée des débutants car elle demande une bonne maitrise de tous les outils de retouche. Néanmoins, que cela ne vous rebute pas : comme on dit, c'est en forgeant que l'on devient forgeron.

Matériel nécessaire

• un portrait de personne ou d'animal suffisamment grand pour travailler à l'aise
• Animation Shop (à installer)
• Patch de francisation pour AS (à installer dans dossier de AS original)

Instructions

1. Ouvrir une copie de l'image du visage que vous souhaitez animer dans Paint Shop Pro. Dupliquer le calque.

2. Avec le pinceau de clonage, recouvrir l’œil (ou les yeux) de peau clonée de manière à ce qu'il(s) ai(en)t l'air fermé(s). Puis, avec le pinceau de maculage, unifier le tout comme sur la capture ci-contre.

3. Masquer le calque supérieur et activer l'original. Sélectionner la/les frange(s) de cils supérieurs avec le lasso et transformer cette sélection en calque. Désélectionner tout.

4. Déplacer le nouveau calque en haut de la pile lui appliquer un renverser (miroir vertical). Rétablir la visibilité du calque avec la/les paupière(s) fermée(s) et positionner les cils sur le bord inférieur de la (des) paupières. Il sera bien entendu nécessaire de rectifier le tracé en gommant de qui dépasse ou n'épouse pas correctement la courbe de la/les paupière(s) et de prolonger vers le coin de l’œil/des yeux (en rouge sur la capture).

5. Le résultat n'a pas besoin d'être parfait étant donné que la paupière fermée n'apparaitra que très brièvement. Cependant comme l’œil que j'ai choisi était en gros plan, j'ai voulu parfaire l'illusion. J'ai donc ajouté un nouveau calque sous les cils puis prélevé une couleur claire sur la partie visible de la paupière du calque original pour peindre à partir du coin externe sur le nouveau calque à l'aide de l'aérographe (en bleu sur la capture). J'ai réduit légèrement l'opacité pour un résultat plus « fondu ».

6. J'ai ajouté un nouveau calque en haut de la pile et vaporisé du noir au ras des cils et sur le coin externe de la paupière (en vert sur la capture).

7. Pour finir, j'ai masqué le calque original puis fusionné tous les calques visibles avant de rétablir sa visibilité. J'ai peaufiné à l'aide du pinceau de maculage et du pinceau d'adoucissement.

8. Sauvegardez votre image avec les deux calques au format PSP pour Animation Shop (ou sinon de sauvegardez le résultat au format JPG).

9. Lancez Animation Shop et chargez l'image avec les deux calques (ou sinon importez l'image originale comme nouvelle animation puis l'image modifiée que vous ajouterez après l'image active).

10. Il faut ensuite indiquer la durée d'affichage (ALT+Entrée) pour chaque image de l'animation. Pour cet exemple, j'ai choisi 200 pour la première (original) et 7 pour la seconde (paupière fermée).

11. Lancer l'assistant d'optimisation (menu Fichier) en sélectionnant « Fichier GIF animé » puis faire Suivant. Choisir « Meilleure qualité » et cliquer sur Personnaliser.

Onglet Couleurs :
- Nombre de couleurs : 255
- Créer la palette à partir de octree optimisé
- Réduire les couleurs par diffusion d'erreur

Onglet Optimisations :
- Cocher toutes les cases

Cliquer OK puis Suivant pour lancer l'optimisation. Vous pouvez maintenant enregistrer votre animation au format GIF via le menu Fichier.

Pour ce deuxième exemple (issu d'un composition graphique beaucoup plus grande et complexe qui m'a pris des heures de travail), l'animation a été nettement plus simple car je n'ai eu qu'à recouvrir les yeux de la chouette de gris clair. Comme les chouettes ne clignent pas de la même manière que les humains, j'ai donc choisi des durées différentes : 140 (original) et 10 (yeux fermés).

Voilà, maintenant vous pouvez faire cligner tout œil qui ne bouge pas ! Attention toutefois à l'erreur souvent commise avec les chats qui ont deux paupières dont la première se ferme à l'horizontale.

© La Pensine Mutine. Tous droits réservés. Reproduction interdite.

Partager :

Lire la suite

Animer des visages

Comme promis à celles et ceux qui aiment les pièces détachées animées de bibi dans les petites bulles de chaque côté des pages de ce blog, je vais donc tenter de vous expliquer ici comment j'ai réalisé ce tour de magie. Bien que le principe soit relativement simple, ce n'est pas vraiment à la portée des débutants car cela demande un peu de dextérité et de maitrise des outils graphiques. Mais avec un minimum d'entrainement, rien n'est impossible. Pour ce faire, j'ai utilisé Paint Shop Pro X mais les autres logiciels équivalents comme GIMP ou Photoshop doivent également disposer du même type d'outils sous des appellations différentes sans doute. Pour la partie animée, si votre OS est compatible, vous pourrez récupérer Animation Shop que je vous avais déjà présenté.

Matériel nécessaire

• un portrait de personne ou d'animal suffisamment grand pour travailler à l'aise
• Animation Shop (à installer)
• Patch de francisation pour AS (à installer dans dossier de AS original)

Instructions

1. Ouvrir une copie de l'image du visage que vous souhaitez animer dans Paint Shop Pro. Dupliquer le calque.

2. Activer le calque dupliqué et sélectionner la grille déformante. Comme sur la capture, déplacer les points au niveau des sourcils pour créer le mouvement. Comme tout est fonction de votre image de départ et du mouvement souhaité, vous devrez faire pas mal d'essais avant de trouver la bonne déformation.

QUELQUES CONSEILS :
- Rétrécissez le quadrillage de la grille en augmentant les valeurs dans les paramètres pour davantage de précision.
- Ayez un miroir à portée de main et observez le mouvement que vous voulez reproduire sur votre propre visage afin de voir quelles parties bougent et comment.
- Masquez votre calque puis rendez-le visible à nouveau pour simuler le mouvement avec l'image d'origine ainsi vous verrez si ça colle ou pas.

3. Une fois que vous aurez obtenu la déformation qui convient n'oubliez pas de valider et de sauvegarder votre image au format PSP pour Animation Shop (ou sinon de sauvegarder le résultat au format JPG).

4. Lancez Animation Shop et chargez l'image avec les deux calques (ou sinon importez l'image originale comme nouvelle animation puis l'image modifiée que vous ajouterez après l'image active).

5. Il faut ensuite indiquer la durée d'affichage (ALT+Entrée) pour chaque image de l'animation. Pour cet exemple, j'ai choisi 75 pour la première (original) et 25 pour la seconde (déformation).

6. Lancer l'assistant d'optimisation (menu Fichier) en sélectionnant « Fichier GIF animé » puis faire Suivant. Choisir « Meilleure qualité » et cliquer sur Personnaliser.

Onglet Couleurs :
- Nombre de couleurs : 255
- Créer la palette à partir de octree optimisé
- Réduire les couleurs par diffusion d'erreur

Onglet Optimisations :
- Cocher toutes les cases

Cliquer OK puis Suivant pour lancer l'optimisation. Vous pouvez maintenant enregistrer votre animation au format GIF via le menu Fichier.

Pour ce deuxième exemple, j'ai choisi d'animer la bouche en sus des sourcils mais au lieu de la grille de déformation, j'ai utilisé le pinceau déformant, beaucoup plus précis et offrant davantage de possibilités, en mode Tirer qui, en fait, permet également de pousser vers le haut. Comme précédemment, il est difficile de donner plus de directives si ce n'est de procéder par petites touches et d'adapter la taille du pinceau à l'élément à déformer. On peut également jouer sur le pas et l'intensité voire la rigidité. Pour trouver le bon compromis, il faut tester. Pour les durées de chaque image, j'ai choisi 50 pour l'originale et 15 pour la déformation.

Ce dernier test a également été réalisé avec le pinceau déformant mais en mode Contracter. Une fois la déformation souhaitée obtenue, j'ai dupliqué ce calque et, à l'aide du pinceau de maculage, j'ai estompé la langue de manière à donner l'impression qu'elle rentre à l'intérieur de la bouche du bébé. J'ai donc obtenu trois images et j'ai choisi comme durée pour la première 100, pour la seconde 7 et pour la dernière 20.

Voilà, beaucoup d'essais seront nécessaires mais comme toujours soyez aventureux et vous finirez bien par obtenir quelque chose de sympa. La prochaine fois, je vous expliquerai comment j'ai fait pour cligner de l’œil.

© La Pensine Mutine. Tous droits réservés. Reproduction interdite.

Partager :

Lire la suite

Morpher plusieurs photos

La technique du morphing est très utilisée pour les effets spéciaux au cinéma mais également par les hologrammes. Pourquoi ne pas l'utiliser avec des images statiques pour créer des GIF animés originaux ? Il existe des tas de logiciels le permettant. J'ai sélectionné Sqirlz Morph, gratuit et peu gourmand en ressources systèmes, dont la qualité de rendu et la simplicité d'utilisation m'ont immédiatement conquise. Comme pour Sqirlz Water Reflections que je vous avais déjà présenté, il ne fonctionne malheureusement que sous Windows (XP/Vista/7/8?) mais la bonne nouvelle pour les linuxiens est qu'il fonctionne aussi très bien sous Wine. Pour l'installer, dézipper d'abord l'archive puis double-cliquer sur le fichier extrait (vous devrez sans doute être en mode Administrateur).

Matériel nécessaire

• deux portraits (ou plus) de personnes ou d'animaux, différents ou non, mais de même taille et avec le même fond
• Sqirlz Morph

Instructions

1. Lancer Sqirlz Morph et ouvrir une copie de chacune des photos à utiliser pour le morphing (icône dossier vert sur la barre d'outils horizontale ou bien menu File - Open). Pour éviter d'obtenir une animation très lourde, je vous conseille de réduire au préalable la taille de vos images à des dimensions acceptables selon l'usage que vous souhaitez en faire et cela même si le logiciel peut le faire à l'exportation du produit final (économie de ressources système et rapidité de traitement accrue).

2. Activer l'image de départ en cliquant dessus puis sélectionner la croix verte dans la barre d'outils latérale gauche (ou menu Control Points - Add) et cliquer là où vous souhaitez poser un marqueur. Il faut les sélectionner en fonction des points communs entre les deux images car ils vont servir de repères pour guider le morphing de l'image 1 vers l'image 2.

3. Activer ensuite l'image d'arrivée puis la flèche noire dans la barre d'outils latérale gauche (ou menu Control Points - Move) et cliquez sur un marqueur pour le déplacer au bon endroit (voir capture ci-dessous). Pour vous aider, le logiciel entoure le marqueur correspondant dans l'image de départ. À noter que si vous avez plus de deux images, il faut bien sûr renouveler cette opération pour chaque image.

4. Une fois les marqueurs posés et synchronisés, indiquez le nombre d'images que devra comporter votre animation (j'ai laissé 20 par défaut) en cliquant sur le triangle de points colorés dans la barre d'outils supérieure (ou menu Morph - Period). Vous pouvez prévisualiser votre animation en cliquant sur la flèche jaune. Pour cette image, j'ai sélectionné Reverse et Mix1 dans le menu Morph. Si vos images sont trop grandes, vous pouvez opter pour les redimensionner automatiquement à la création de l'animation (menu Morph - Resize on Saving).

5. Nous allons maintenant sauvegarder l'animation pour en faire un GIF animé (il est également possible d'en faire un clip vidéo au format AVI ou Flash ou encore d'enregistrer les images séparément pour les retoucher avec un autre logiciel d'animation). Pour cela, cliquer sur l'icône Gif de la barre d'outils horizontale (ou menu Morph - Make GIF File). Une boite de dialogue s'ouvre vous demandant de nommer votre fichier et éventuellement de modifier son emplacement. Ensuite il vous faudra indiquer quel débit (vitesse d'animation) vous souhaitez. Pour cet exemple, j'ai choisi 20 images par secondes. Validez OK pour lancer la création du GIF.

NOTE : Comme je n'étais pas satisfaite de la fluidité de l'animation, j'ai modifié la durée d'apparition de certaines images à l'aide d'Animation Shop.

Avec les deux exemples ci-dessous, on est plus dans l'animation que dans le morphing. J'en profite pour préciser que je n'ai pas triché et que les images utilisées ne proviennent pas de vidéos ni de GIF animés existants.

Pour le kissou, j'ai sélectionné One Way plutôt que Reverse (menu Morph) et je n'ai modifié la durée d'affichage que pour l'image de départ (il y en a deux). Pour ce qui est du beau gosse, j'ai procédé exactement de la même manière que pour les félins à la seule différence que l'opération s'est avérée plus complexe car d'une prise de vue à l'autre, il effectue une rotation de tête à 90°, ce qui m'a obligée à m'y reprendre à plusieurs fois avant de trouver les marqueurs essentiels à indiquer au logiciel. Afin que le mouvement soit le plus naturel possible avec seulement deux images statiques, il était impératif de modifier la durée d'affichage de certaines images intermédiaires.

Comme vous voyez, ce logiciel est très simple d'utilisation et, une fois encore, la seule limite est votre imagination. Tout ce que vous risquez à essayer est d'être agréablement surpris par la qualité des résultats. Alors faites-vous plaisir et morphez à donf.

© La Pensine Mutine. Tous droits réservés. Reproduction interdite.

Partager :

Lire la suite

Incruster une animation dans une photo

Today, there are many free online or downloadable applications to create animated GIF from videos. Such a commonplace manipulation, you might say. Let's use the idea to embed the animations you'll make (or find) into still images with a little bit of ingeniosity for striking and totally original look. As always this tutorial is based on Paint Shop Pro which is the image editing software I use, but it's very easy to adapt it to any other program provided you master the basics. In order to do so, you'll find a link to download the companion application to Paint Shop Pro while it was still manufactured by JASC now available as abandonware (therefore free). It runs on Windows only (though Linux users might be able to run it on Wine?), but there are many similar applications that you may use instead. The important is to get the idea, then you can always find different ways to achieve it.

Matériel nécessaire

• une image avec un objet suffisamment grand dans lequel on va pouvoir incruster une animation (jumelles, objectif photo, lunettes, miroir, fenêtre, télévision, cadre photo, etc.)
• un GIF animé
• Animation Shop (à installer)
• Patch de francisation pour AS (à installer dans dossier de AS original)
• Reflet pour lentille (facultatif)

Instructions

1. Ouvrir le GIF animé dans Animation Shop. Sélectionner toutes les images (CTRL+A) et via le menu Fichier - Enregistrer les images sous, les sauvegarder au format PSP pour Paint Shop Pro en veillant surtout à bien cocher « Enregistrer les images sous forme de calques ». Si vous utilisez un autre logiciel de retouche photo, choisissez le format JPG et vous les récupérez une par une pour l'incrustation. Au passage, notez-bien la durée d'affichage inscrite sous chaque image car vous en aurez besoin plus tard.

2. Charger l'image multi-calque ainsi créée dans Paint Shop Pro. Dans la palette des calques, se positionner sur l'image 0, en bas de la pile et ajouter un nouveau groupe de calques. Y faire glisser les autres images de manière à ce que l'ordre soit respecté, la dernière image devant toujours être en haut de la pile à l'intérieur du groupe. Redimensionner l'image au besoin si elle est trop grande pour tenir en entier dans l'objet devant la réceptionner (dans ce cas, ne pas oublier l'option « Redimensionner tous les calques »).

3. Ouvrir une copie de l'image cible dans laquelle vous allez incruster l'animation. La redimensionner au besoin et la convertir en calque raster (indispensable pour obtenir une transparence à l'étape suivante).

4. Attention, c'est la partie la plus délicate : avec le lasso ou la gomme suivant la complexité de la forme à détourer, sélectionner la zone à effacer qui contiendra l'animation puis supprimer (sauf si vous avez utilisé la gomme qui aura déjà effacé la zone indésirable).

5. Copier le groupe de calques de l'animation et le coller dans l'image à retoucher. Descendre ce groupe sous le calque détouré. Positionner correctement l'animation à l'endroit désiré (comme les calques sont groupés, déplacer le groupe affecte la position de tous les calques qu'il contient en même temps). J'ai effectué une rotation de 15° à droite sur chaque calque du groupe de l'animation afin de respecter l'angle de prise de vue.

6. Si vous incrustez l'animation dans un objet en verre comme ici (lentilles de jumelles ou bien un objectif photo, des lunettes ou autre) pour plus de réalisme, il est possible de rajouter une image (ou de la créer si vous savez le faire) pour simuler des reflets. Ouvrir une copie de celle fournie à cet effet et la redimensionner à la taille de votre zone détourée avant de la positionner entre de l'animation et le calque détouré. Pour cet exemple, j'ai dû la coller deux fois (une pour chaque lentille) en réglant le mode de mélange sur Recouvrement. Comme l'effet n'était pas assez prononcé, j'ai dupliqué chacun de ces calques et réglé le mode de mélange sur Éclaircir. Cela dépend en fait des images utilisées, il faut donc faire des essais et voir quel est le meilleur rendu.

7. Voici maintenant l'étape la plus fastidieuse pour laquelle tous les calques du groupe doivent être affichés. Copier avec fusion puis relancer Animation Shop (si vous l'aviez fermé) et Coller comme nouvelle animation. De retour dans le logiciel de retouche, masquer le dernier calque du groupe en haut de la pile (celui qui a le numéro le plus élevé), recommencer Copier avec fusion et dans Animation Shop, Coller avant l'image active. Répéter ces étapes en respectant bien l'ordre jusqu'à ce que tous les calques du groupe aient été utilisés.

8. Votre animation finale devra comporter autant d'images que celle d'origine. Sélectionner tout et régler la durée d'affichage (ALT+Entrée) qui doit être identique à celle notée à l'étape 1.

9. Lancer l'assistant d'optimisation (menu Fichier) en sélectionnant « Fichier GIF animé » puis faire Suivant. Choisir « Meilleure qualité » et cliquer sur Personnaliser.

Onglet Couleurs :
- Nombre de couleurs : 255
- Créer la palette à partir de octree optimisé
- Réduire les couleurs par diffusion d'erreur

Onglet Optimisations :
- Cocher toutes les cases

Cliquer OK puis Suivant pour lancer l'optimisation. Vous pouvez maintenant enregistrer votre animation au format GIF via le menu Fichier.

NOTE : Dans ce second exemple, pour le détourage de l'objectif, j'ai contracté la taille de ma sélection et j'ai ajouté une progressivité du même nombre de pixels que ceux que je lui ai retirés de manière à ce que la démarcation soit invisible. Comme l'objectif de l'image original était mat et sans reflet, je n'ai rajouté aucun effet de superposition.

Amusez-vous bien, laissez libre court à votre imagination et surtout soyez créatifs !

© La Pensine Mutine. Tous droits réservés. Reproduction interdite.

Partager :

Lire la suite