fr32c blog

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - Animation

Fil des billets - Fil des commentaires

jeudi 31 octobre 2013

Panneau AnimDessin2 - Extension pour l'animation au trait dans Photoshop

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) !

vendredi 15 février 2013

Adobe Edge Animate 1.5

C'est officiel, la Saint Valentin 2013 est placée sous le signe des Adobe Edge Tools and Services.

Hier soir, pas moins de 3 mises à jour et grosses nouveautés, entre la sortie officielle de la version preview de Adobe Edge Reflow (commentaires et retours attendus sur le forum ou via twitter) pour créer des sites en Responsive Web Design, nouvelle version de Edge Code, et surtout la nouvelle version de Adobe Edge Animate

EgAn-MaJ1.5.png

Au programme de cette version 1.5 :

Un peu plus de détails ci-dessous.

Lire la suite...

vendredi 19 octobre 2012

One Banner A Day — day 2

Deuxième jour sur Edge (si vous ne voyez pas l'iframe sur le rss,cliquez pour voir le message au complet)

Lire la suite...

jeudi 18 octobre 2012

One Banner A Day — day 1

J'ai décidé de faire quelques tests sur Edge, et de me donner une petite contrainte de productivité. Cliquez pour en savoir plus.

Lire la suite...

mardi 25 septembre 2012

Spritesheet depuis Flash

DivingFishAnimation.gifPour réaliser de petites animations numériques, une multitude d'outils d'offre à vous, certains plus adaptés et efficaces que d'autres.

Avec le temps, Flash a fait ses preuves en la matière et permet un travail efficace, principalement vectoriel.

Mais si votre animation est destinée a être visualisée, par exemple, sur une tablette ou un smartphone dont le navigateur n'utilise pas de plug-in (comprendre : iPad/iPhone) vous pourriez être tentés d'oublier l'outil, et de passer directement à Edge Animate.

Or, ce dernier, très efficace pour les animations de blocs, de textes ou d'images est malheureusement incapable de créer le moindre élément visuel, et sert principalement à intégrer et animer les éléments.

Découvrons ci-dessous la manière dont nous allons pouvoir exporter notre animation (en vue, plus tard, d'une utilisation dans Edge).

Lire la suite...

vendredi 6 avril 2012

Edge et Muse

''Note pour plus tard'' : c'est pas bien compliqué de coller une animation Edge dans Muse, mais faut juste pas s'attendre à voir du rendu en direct comme pour les Google Maps.

Ah, et faut aussi bien connaître sa hiérarchie de dossiers.

Donc, par exemple, dans mon dossier MuseExport (là où Muse met tout son site), j'irai poser mon dossier EdgeAnim, dans lequel je pourrai cibler Animation.html

Y'aura plus qu'à mettre une taille, virer les bords, et zou.

Si je laisse ça en wiki, c'est très lisible, si je place en html, vous allez juste voir l'anim, pas le code :)

<iframe src="EdgeAnim/Animation.html" width="600px" height="200px" frameborder="0" scrolling="no"> </iframe>

mardi 13 mars 2012

Edge et animations interactives en HTML5


Lire la suite...