Tutoriel Comic Composer #2 : mode animé

En tant que bédéistes numériques confirmés, vous êtes bien évidemment au courant du concours Comic Composer lancé par EspritBD en partenariat avec Digital Artist. Pour rappel, l’unique contrainte de cet appel à la création tient à l’utilisation du logiciel Comic Composer en mode animé. Vous n’êtes pas encore familier avec Comic Composer ? Justement, EspritBD vous explique tout ce dont vous avez besoin.

Avant de débuter, n’oubliez pas qu’Aquafadas a réalisé un solide tutorial au format pdf que vous pouvez retrouver sur leur site, si vous désirez compléter notre explication :).

1) Démarrage et sélection du format de composition animé

Pour commencer, ouvrez le logiciel Comic Composer et sélectionnez le mode animé, avant de choisir le format dans lequel vous souhaitez voir votre création évoluer : voulez-vous dessiner pour smartphone ou tablette ? Vous avez également le choix du mode de lecture, à exploiter selon les besoins narratifs de votre histoire : horizontal, vertical, ou les deux. Sachez qu’une fois la lecture lancée dans un de ces modes, il est obligatoire d’y rester jusqu’à la fin. 

Que choisir ? Il faut savoir que vous n’avez pas à proprement parler à choisir… Plus tard, dans l’interface, vous pourrez « Ajouter un Profil », puis « Dupliquer » votre numérisation, et travailler à son adaptation. Nous reviendrons sur les déclinaisons plus loin, mais nous vous recommandons donc de débuter sur un format Smartphone, basse définition, format horizontal.

Cliquez sur Sélectionner et importez ensuite vos planches au format JPEG.

2) La mise en forme : les scènes

Pour commencer, un peu de vocabulaire. Comic Composer vous permet de créer ce qu’on appelle des scènes, qui vous permettent de délimiter ce qui apparait à l’écran : en d’autres termes, le hors-scène est hors champ. Autour de votre scène donc, vous pouvez aussi configurer la couleur de votre hors-champ, grâce au bouton « coloris » présent dans la colonne de gauche, à côté de chaque page.

Notez enfin qu’il est souvent préférable de faire coïncider les scènes avec chacune de vos cases pour une meilleure lisibilité.

 Ce bouton, en haut à gauche, permet de créer une nouvelle scène rectangulaire (Cmd+R ou Ctrl+R). Une fois celle-ci positionnée correctement sur votre planche, vous pouvez en modifier la taille très facilement, en faisant simplement glisser les ronds blancs.

Il existe deux sortes de scènes : rectangulaire (inutile de vous faire un dessin :) ) et polygonale, c’est à dire dont on peut modifier la forme à loisir (le deuxième type de scène décrit dans le dessin d’Alix Leroux ci-dessus).

Ce bouton permet de créer une nouvelle scène polygonale (Cmd+T ou Ctrl+T).  Ce type de découpage est particulièrement intéressant car il s’adapte par exemple aux cases triangulaires de mangas ou de comics, permet de ne révéler qu’une partie spécifique de l’écran à la fois, et se prête tout particulièrement à l’exploration de la création numérique. Cmd+ clic ou Ctrl+clic vous permet d’adjoindre / de supprimer un point de cette scène polygonale.

Notez que vous pouvez modifier l’ordre des scènes à votre guise, en les faisant simplement glisser à la bonne place dans la colonne de droite.

Dans un deuxième temps, à l’intérieur de chaque scène, vous avez la possibilité de créer autant de shots que vous le souhaitez, c’est à dire une délimitation plus précise de ce qui sera visible à l’intérieur de chaque scène.

3) Les shots

Une fois votre scène en place, donc, vous devriez apercevoir un rectangle délimité par des lignes et ronds jaunes : il s’agit d’un shot. Par défaut, ils ont la taille de la scène créée, mais il peut en exister un ou plusieurs au sein de cette même scène, selon ce que vous souhaitez montrer.

A quoi servent les shots ? Ils permettent un survol de la scène, bien que l’intégralité de ce qui se trouve dans la scène reste visible, soit dans le champ du shot, soit sur les bords si vous n’adaptez pas la taille du shot à la taille de l’écran. Pour effectuer cette dernière manipulation, il suffit simplement de double-cliquer sur le shot.

Autre astuce : si vous souhaitez réduire la taille de votre scène et celle de votre shot simultanément, servez-vous du raccourci Cmd (ou Ctrl) + Alt + clic (pour redimensionner manuellement).

Copier-coller un shot ? Cmd (ou Ctrl) C, et V, comme d’habitude, ou Cmd (ou Ctrl) D (dupliquer). Copiez-coller vos shots d’une planche sur l’autre en gardant un ratio identique se révèle extrêmement pratique pour les effets de trompe-l’oeil, en gardant une partie de votre planche identique, pour que l’on ne voit pas la transition !

Après avoir chargé une planche se lance le simulateur. 

Il vous permet de bien voir ce que vous réalisez, et après l’avoir fermé vous pouvez le retrouver en cliquant cette icône. Il vous place du point de vue de vos shots : la mise en forme finale, en fait.

Vous voyez les flèches jaunes, qui indiquent le déplacement logique entre les différents shots ? Elles soulignent le mouvement entre les différentes composantes de chaque scène : c’est la lecture guidée. Vous pouvez aussi choisir d’effectuer un mouvement de zoom, en réduisant la taille du shot au sein du précédent, ou à l’inverse de dézoom. Appuyez sur « Shift » en modifiant leur taille pour conserver le ratio, ou sur « Alt » pour réduire proportionnellement la hauteur ou la largeur. Sachez par ailleurs que les shots se succèdent par défaut dans l’ordre dans lequel vous les créez. Vous pouvez en effacer un en cliquant dessus puis en appuyant sur « Del », ou les déplacer en colonne de droite, en bas (sélectionnez les images pour se faire).

4) Les transitions 

Passons à présent aux transitions : pour accéder à ces dernières, il suffit de cliquer sur la flèche présente au bas de chaque scène ou shot. Vous avez notamment le choix entre Dissolve (fondu), Custom (effets personnalisés), End of joke (effet de page qui tourne – notez toutefois que cet effet n’est pour le moment pas visible dans le simulateur !). Les paramètres du menu vous permettent également de régler le timing ou la dynamique de vos transitions, et de les pré-visualiser, grâce au bouton de lecture.

Nous vous conseillons de les utiliser à bon escient : par exemple afin d’appuyer un évènement, comme une explosion ; ou une action, telle que suivre le déplacement de vos personnages, et ce afin de ne pas surcharger la lecture.

5) Le timing

Du côté du timing de la lecture animée et de son enregistrement, le logiciel est très intuitif. En effet, vous pouvez permettre à vos lecteurs de cliquer sur le bouton play et de laisser les cases défiler, mais vous devez néanmoins paramétrer un temps de lecture pour chaque case. Souvenez-vous également que si vos lecteurs n’apprécient pas cette lecture, ils pourront toujours choisir de défiler « au clic ».  

Donc, pour changer le timing et l’enregistrer avec plus de simplicité, servez-vous du simulateur.

Ouvrez tout d’abord le simulateur et cliquez sur le bouton horloge (qui remplacera alors le bouton de lecture) pour passer en mode enregistrement. Cliquez ensuite sur ce même bouton pour définir la durée d’affichage du shot que vous souhaitez, et passer au suivant. Une relecture plus tard, votre animation est terminée ! 

Pour information, le bouton cible à gauche vous sert à vous rendre au niveau du shot visible dans le simulateur, dans Comic Composer, et le bouton à droite à afficher en petit / en grand.

6) Décliner mes versions pour d’autres supports

Quelques détails techniques, si vous souhaitez que vos dessins s’adaptent parfaitement à la taille de l’écran et que vous voulez au préalable les concevoir à des formats spécifiques :

Résolution d’un iPhone « classique » : 480 x 320 pixels 

…d’un iPhone 4 : 960 x 640 pixels

…et d’un iPad 1 ou 2 :  1 024 × 768 pixels

Comme expliqué un peu plus tôt, nous vous recommandons donc de débuter sur un format Smartphone, basse définition. Ainsi en dupliquant votre travail sur Smartphone HD, vous n’aurez pas de retouche à effectuer, et vous serez prémuni contre la pixellisation. Enfin, nous vous conseillons fortement de réaliser cette même duplication de Profil pour le format iPad : là vous constaterez une subtile différence. Comme les ratios ne sont pas les mêmes, vous aurez des zones (non visibles sur smartphone) qui apparaîtront en haut et en bas, selon le format de votre œuvre. Si vous n’effectuez aucun changement, elles adopteront les couleurs de fond pour tout ce qui est hors de vos scènes, ou feront apparaître les zones correspondantes au sein de votre scène pour tout ce qui est hors-shot.

Pour nombre de créations numériques, ces soudaines apparitions pourraient être préjudiciables, nous vous recommandons donc de vérifier ce qui sera visible au sein de la liseuse, et de les modifier éventuellement. Pour ordonner à une scène ou à un shot de se mettre au ratio iPad, double cliquez sur ce dernier.   

Enfin, en format « web », qu’est-ce qui apparait ? En version animée, il s’agit du format smartphone pour le moment (nous vous préviendrons bien évidemment si cela venait à changer! :) )

7) Exportation

Comment prévisualiser le résultat final ? 

Sur un Macintosh, pour avoir un petit aperçu de ce que l’on fait sur votre terminal mobile, le mieux est de créer un export de ce fichier dans un simulateur (gratuit) : MyKiosk

Avant toute chose, vous devez enregistrer votre appareil sur Comic Composer (il suffit d’enregistrer l’UDID de votre iPhone/iPad dans les Préférences de Comic Composer). Vous avez un très bon tutoriel à ce sujet ici.

Une fois toutes ces cartes en main, vous êtes prêts, une fois pour toute.

Il vous suffit, donc, de cliquer sur Fichier > Exporter et de sélectionner votre appareil pour créer le fichier .zave (qui vous permettra de faire le test.)

Ceci étant fait, vous ouvrez votre iTunes et dans Appareil > « Nom de votre iPhone/iPad » > Apps vous scrollez en bas de page dans le menu Apps où vous trouverez MyKiosk. Cliquez dessus.

Vous n’avez plus qu’à faire glisser votre fichier .zave dans « Documents MyKiosk » ou de cliquer sur « Ajouter »

Et c’est fait.

Si vous avez besoin de faire des corrections, vous pouvez modifier votre fichier . Avep sur Comic Composer ; l’exporter à nouveau en .zave et à le glisser dans « Documents MyKiosk » pour comparer.

8) Mettre en ligne sur EspritBD

Enfin, une fois votre œuvre Comic-composée, il vous suffit de vous rendre dans le menu Fichier > Enregistrer sous, et de sauvegarder votre œuvre numérique nouvellement créée au format .avep, puis de vous connecter sur EspritBD à l’aide de votre compte auteur.

Vous pouvez ensuite sélectionner Mon profil > Mes œuvres > Publier une nouvelle œuvre, remplir les champs nécessaires du formulaire en n’oubliant pas d’attacher votre fichier .avep, et zou ! Publication sous 48 heures :). Elle est pas belle la vie ? Notez que remplir tous les champs vous assure un référencement web de bien meilleure qualité :) Et souvenez-vous de notifier vos fans !

Ah ! et n’oubliez pas qu’il vous sera demandé d’uploader une couverture, au format 180×240 px, qui apparaîtra en vignette sur le Wall. Ce n’est pas grand, alors concevez une image « choc », ou un titre frappant ! Et, dernier petit point de détail, si vous envoyez un fichier en version page ET version animée, EspritBD vous refusera la version page, et ne publiera que l’animée. Pas de duplication des oeuvres, donc ! :)

Allez, à vous de jouer !

Il vous reste des questions ? Le mode d’emploi détaillé de Comic Composer est disponible au téléchargement ici (PDF). 

(> téléchargez Comic Composer ici !)