Il était temps que je vous en parle, ça fait un an qu'existe un panneau bien pratique pour les animateurs dans Photoshop, plein de raccourcis clavier, bien pensé, etc. En un an, il s'est passé plein de choses, notamment cette excellente animation par Olivia Huynh, Borrowed Light.

Stéphane Baril a donc réalisé la v2 de son panneau Anim Dessin, cette fois-ci pour Photoshop CC uniquement, et pour cause, y'a eu de grosses nouveautés "sous le capot", comme on dit.

Si tout est expliqué sur la page kimtag, notamment les liens vers les vidéos de démo, il m'a semblé qu'un petit récap texte et démo pouvait intéresser.

Si vous connaissiez déjà la v1

AnimDessinvsAnimDessinV1V2.gifPour les utilisateurs de la v1, les nouveautés sont donc : une réécriture en HTML5, une interface utilisateur plus compacte, et l'assemblage des actions des boutons sous une seule ligne du panneau historique (avant, tout était décomposé, le cmd/ctrl-Z pouvait être un peu long).

Par contre, sur cette version, pas de tooltips pour l'instant (pas possible dans Ps, mais on espère que ça viendra), et en anglais uniquement (ça par contre, pour le français, ça devrait arriver)

Alors, qu'est-ce que AnimDessin (2)

Note de départ, je rassure les esprits chafouins, les explications sont aussi valables pour la v1, Cs4, Cs5 et Cs6, cf la page kimtag, et si je parle d'une fonction que vous ne voyez pas, c'est qu'elle est disponible dans la v2.

Vous connaissez Photoshop, les calques, les brosses (pinceaux). Vous avez même découvert le panneau d'animation, image par image ou montage. Vous dessinez toujours sur papier, mais de plus en plus directement en numérique.

Du coup, en fonction de votre talent et de votre temps disponible, vous pourrez réaliser des animations comme celle ci :

Anim300.gif

ou des choses un peu plus fouillées comme celles-là

Ps-Panneau-AnimDessin2.pngLe fonctionnement est basé sur les groupes vidéo, dans lesquels chaque calque s'enchaîne avec le suivant dans l'ordre d'animation.

Pour les réaliser, à la main, dans photoshop, créez un document, créez dessus trois calques, sur lesquels vous dessinerez des choses différentes, ouvrez le panneau Montage (menu Fenêtres > Montage) et cliquez sur le bouton "créer un nouveau montage".

Le panneau rassemble et organise toute une méthode pour créer des animations, de la création et réglage du document, à la création des images clés (visibles en mode pelure d'oignon) et surtout une gestion très maligne des intervalles.

Avant de commencer…

Première étape, installer l'extension, via le menu Fenêtres > Extensions > Adobe Exchange.

Là vous chercherez AnimDessin2 ou Stéphane Baril ou, si je vais assez-vite à finir cet article, vous le trouverez dans les nouveautés.

N'oubliez pas de renseigner votre mot de passe lors du passage par Extension Manager qui traîne toujours un peu à se mettre en route.

Logiquement, une fois que le panneau Exchange vous indique que c'est bon, vous redémarrez Photoshop puis menu Fenêtres > Extensions > AnimDessin2

Step by step (oh baby…)

Puisque le panneau est méthodique, voyons les différentes étapes point par point.

Créer le document

Là, les tailles vidéo sont standard (1080p, 2k, 4k) et profitent des préréglages de Ps. Si vous voulez réaliser une anim à un format personnalisé, commencez par créer un 1080p, par exemple, puis cliquez sur le bouton Custom Size.

Préparez votre document pour le dessin.

Dans l'ordre, afficher le panneau de montage, créez une timeline et un groupe. Au besoin, changer le nombre d'images par seconde via ce bouton. Et enfin, rappel important, n'hésitez pas à sauvegarder votre document à cette étape (et régulièrement), ça vous évitera de vous arracher les cheveux.`

Ps-PanneauAnimDessin-Fenetre-CreerFrequence.png

Votre écran ressemble donc à cette image. En bas, vous avez le panneau de montage (zoomez pour plus facilement caler vos images clés), à droite, dans les calques, vous avez un groupe vidéo, nommé Anim. Et c'est sur le calque 1 que vous allez commencer à dessiner.

Images d'animation

La durée par défaut des images ajoutées à un groupe vidéo fait qu'à chaque ajout de calque, vous deviez réajuster cette piste. Désormais, vous choisissez 1 frame ou 2 frames, selon la complexité du mouvement. Le bouton vous crée un calque vierge de la bonne durée.

Pelures d'oignons et raccourcis

Le grand secret des Disney, Ghibli et autres studios consiste à regarder par transparence, ou rapidement les images avant et après celle sur laquelle on s'affaire. En numérique, on active la pelure d'oignon, et Photoshop vous affiche avec une opacité réduite une ou plusieurs images, selon un intervalle que vous déterminez pour bien caler vos mouvements.

Ici, vous aurez tout loisir d'activer et désactiver en un clic, et surtout d'accéder au réglages juste à côté. Et un clic au cas où vous auriez oublié d'activer les raccourcis propres au montage. Facile.

Ps-PanneauAnimDessin-Fenetre-Onion-Interv.png

Durées et intervalles

Dans la même veine, pour quantifier le mouvement, on le prolongera en rajoutant une image ou deux, Là, c'est aussi le cas, avec ± 1, 2 ou 3 frames.

Si votre mouvement est trop décomposé, vous ajouterez des intervalles, en un clic. Et comme tout ceci est basé sur les calques photoshop, il vous faudra parfois décaler votre calque dans le temps. Là aussi, un clic, à moins de se rappeler des raccourcis.

Colorer les images clés

Pour facilement identifier vos images clés, savoir où est le avant/après, et surtout rajouter votre intervalle au bon endroit, rien de tel que colorer l'image d'avant en rouge, et celle d'après en vert. Lorsque vous créez l'intervalle, sa position devient flagrante, ce qui simplifiera le process de déplacement du calque au dessus ou en dessous.

Ps-PanneauAnimDessin-KeyFrame-Focus.png

Faciliter les boucles

Les animateurs travaillent souvent sur des boucles pour voir la décomposition du mouvement et le peaufiner à la répétition. Dans Photoshop, il "suffit" de tirer les marqueurs du début et de fin pour délimiter la boucle. Hors, si dans les démos, avec quelques images ces marqueurs sont toujours visibles, en production sur des animations un peu plus longues, vous risquez de scroller un peu.

Désormais, placez votre tête de lecture et en un clic déterminez les extrémités de la boucle.

Animation et efficacité

PageUpDownHomeEnd.gifPour les plus pianistes d'entre nous (vous ?), vous savez qu'une bonne partie de Photoshop peut s'utiliser à grands renforts de raccourcis clavier. Et peut-être même que vous connaissez les raccourcis du panneau montage comme les touches Page Up/Down, Home et End (parfois représentées avec des flèches obliques ou à double trait) pour naviguer au début, à la fin, à l'image suivante…

Concernant AnimDessin2, le point le plus important au niveau productivité, c'est que toutes les actions des boutons sont accessibles via les scripts dans le menu Fichier > Scripts > AnimD2

Cela vous permet d'assigner un raccourci clavier à votre commande favorite. Choisissez menu Edition > Raccourcis Claviers (cmd/ctrl+alt-maj-K), puis chercher dans les menus de l'application > Fichier > Scripts > AnimD2_…

Ps-PanneauAnimDessin-Raccourcis.png

Et pour inverser toute une série de calques ? Menu Calques > Disposition > Inverser

Ça nous permet aussi de retrouver les raccourcis cmd-, et cmd-; (ou ctrl+, ctrl+;) pour déplacer un calque juste au dessus ou en dessous (dans un groupe vidéo, ça équivaut à intervertir deux images

Pour finir

Voilà, je crois que vous êtes bien armés pour faire bouger vos anims au trait (voire plus si affinités). Si vous êtes très "ligne claire" c'est le moment de jeter un œil vers AnimCouleur, le petit frère spécialisé dans les remplissages, les couleurs, que vous trouverez sur (la même) page kimtag.

Surtout, n'hésitez pas à faire suivre vos réalisations à Stéphane, ça fait toujours plaisir (et taggez moi aussi, comme ça, je saurai) !