P2.1b Éléments graphiques

Thème

Voyager dans mes rêves

Création des éléments graphiques
  • Allez chercher des éléments graphiques déjà existants dans des banques d’image libres de droits ou payante (si vous avez les sous) OU illustrez vous-même vos éléments.
    Au bas de cette page, vous trouvez 2 capsules vidéos dans lesquelles je vous présente comment utiliser l'outil de génération d'illustrations AI dans Adobe Illustrator.
  • Montez vos scènes dans Illustrator ou Photoshop. Ajustez les couleurs des éléments avec celles de votre palette via le nuancier: pour les images vectorielles, si vous les exportez en SVG, vous pouvez les recoloriser avec: color.adobe.com/fr/color-labs/recolor-svg
  • Pensez aux éléments animables mais aussi à l’arrière-plan de chaque scène, de chaque chapitre.
  • Idéalement, travaillez avec du vectoriel. Mais vous pouvez aussi travailler avec des éléments photographiques détourés. Vous pouvez même faire du mix média (photo et vectoriel) si ça fonctionne avec votre style.
  • Exportez chaque éléments graphiques animables séparément de l’arrière-plan en format svg si c’est vectoriel, png si c’est un élément matriciel avec fond transparent, jpg si c’est une image matricielle rectangulaire sans transparence.
Notez les sources et les crédits des images que vous allez chercher dans les banques d'images. Notez aussi les images que vous générez à partir de l'IA. Il faudra tout créditer dans le pied de page de votre histoire scrollytelling. IMPORTANT Cohérence graphique entre tous les éléments, dans les couleurs et dans le style. Minimum requis Au moins 8 éléments graphiques distincts qui vont entrer / sortir de l’écran. Vous pouvez créer plusieurs éléments distincts ou plusieurs variantes d’un même élément, par exemple votre personnage principal avec des positions différentes ou des plans de vue différents. Un décor / arrière-plan pour chaque chapitre. La taille de l'image doit être minimalement 1920x1080 ou un peu plus grand si vous prévoyez faire bouger votre arrière plan dans l'écran. Notez que :
• Tous les chapitres peuvent prendre place au même endroit mais pensez varier un peu le plan de cadre ou les éléments visibles de chapitre en chapitre, voir par exemple The Bear and his Scarf
• Vous n’êtes pas contraints à remplir l’espace en arrière-plan, si vous le désirez vous pouvez simplement ajouter quelques éléments graphiques pour mettre votre lecteur en contexte, voir par exemple The Bear and his Scarf. Un décor ou paysage réalisé et exporté en plusieurs couches (plusieurs images distinctes avec des zones transparente) afin de réaliser un effet parallax. Par exemple : Parallax avant ou Parallax planètes ou Parallax forêt Deux formes hyper simples pour prévoir une animation de morphing. Ces formes doivent être vectorielles et exportées en svg. Une illustration en plusieurs couches (donc plusieurs images distinctes) pour réaliser l’animation suivante : « Quelque chose qui se compose ou se décompose en couche ou en éclats via le défilement de la page » (se référer aux requis des animations présentés au dernier cours). Une illustration linéaire (line art ou autre) pour réaliser l’animation suivante : « Forme (ligne) simple qui se dessine en même temps que le défilement (scroll) de la page » (se référer aux requis des animations présentés au dernier cours) Deux éléments distincts animés via After Effects que vous allez exporter en 2 spritesheets distinctes.
• Par exemple l’homme qui fait un cycle de marche ici : Walking Dead (scrollytelling).
• Attention, pas nécessaire d’être un bonhomme qui marche, ce peut-être une pyramide qui tourne sur elle-même, un poisson volant qui bat des ailes, une note de musique qui grelotte, une fleur qui fond comme un glaçon et qui ensuite se reforme. Rappelez-vous, c’est un rêve !
• Le seul requis important, c’est que votre animation doit boucler de façon limpide à l’infini, donc le dernier frame doit être équivalent au premier frame.
• Pour l’exportation en sprite sheet voici la capsule vidéo que je vous ai prépatée. Vous pouvez en ajouter d’avantage mais cette liste regroupe les requis minimums. Dans After Effects, évitez de créer des spritesheets trop volumineuses :
  • Taille de la composition max 500px X 500px (pas nécessaire d'être carrée).
  • Animation courte (max 2-3 secondes).
  • Composition: nombre d'images par seconde minimal, éviter le 24 ou 30 fps, considérez réduire à 12fps ou même 6fps.
 Notes de cours 📚 et outils 🛠️

Banques d'illustrations libres de droit et utilisation de générateur d'illustration avec AI

Illustrator + exporter en SVG

Exportation SVG à partir d'Illustrator et optimisation SVGOMG

+
OUTIL SVG Bear Pour recoloriser des images SVG à couleur unique en grand lot, d'un seul coup

Capsule vidéo After Effects vers Sprite sheet

Animation d'une animation After Effects vers une sprite sheet

Dans After Effects, évitez de créer des spritesheets trop volumineuses :
  • Taille de la composition max 500px X 500px (pas nécessaire d'être carrée).
  • Animation courte (max 2-3 secondes).
  • Composition: nombre d'images par seconde minimal, éviter le 24 fps ou 20 fps, considérez réduire à 12fps ou même 6fps.
 +
OUTIL Sprite Sheet Packer Créer gratuitement des planche de sprites à partir de vos images, directement sur le Web.