Catégorie : CC3-exos

L’objectif de cette activité est la construction modulaire de personnages à partir de signes typographiques appartenant à une même police de caractères. Ces personnages formeront une série à incorporer dans divers produits de communication :

• affiches et flyers promotionnels
• encarts pour le Web et les réseaux sociaux
• couvertures et pages intérieures de livres pour la jeunesse
• jeux de cartes traditionnels
• packaging de jeu de cartes
• présentoirs sur lieu de vente
• objets publicitaires divers
• etc.

Comment procéder

Il s’agit donc de procéder de la manière suivante :

• choisir une police de caractères (entièrement libre de droits) dans une famille typographique donnée ;
• inventorier tous les signes typographiques disponibles dans la police choisie, dans une fonte donnée (grasse de préférence) ;
• assembler les signes typographiques de son choix pour réaliser une collection de personnages.

Règles du jeu de construction

• Utiliser le logiciel Adobe Illustrator. Enregistrer le fichier au format natif d’Illustrator (.ai).
• Vectoriser tous les glyphes disponibles avant de construire les personnages.
• Construire des personnages simples. Ne pas détailler les formes des personnages en cherchant à produire des dessins réalistes.
• Ne pas déformer les signes typographiques choisis. Jouer seulement sur l’échelle, l’orientation, la transformation horizontale ou vertical.
• Ne pas utiliser la palette pathfinder dans la phase de recherches vectorielles.
• La suppression de points ou d’accents est autorisée, ainsi que la suppression éventuelles des contreformes.
• D’éventuelles silhouettes d’accessoires peuvent être utilisées (avec modération).

Séries de personnages réalisables

Personnages de jeu d’échecs

Les exemples ci-dessus présentent des personnages de jeu d’échecs (Roi, Dame, Cavalier, Tour, Fou (ou Évêque), Pion). Ces personnages ont été utilisés dans un projet de communication pour l’annonce d’un championnat.

Personnages de jeux de cartes

Il est possible de créer la série suivante (les 3 premiers peuvent servir à la réalisation d’un jeu de cartes) :

• Roi
• Reine
• Valet
• Prince
• Princesse
• Nourrice

Les attributs/caractéristiques iconographiques du roi, de la reine et du valet peuvent être trouvés en examinant les figures d’un jeu de carte.

Jeu des 7 familles

L’ensemble de ces personnages est utilisable pour créer un jeu des 7 familles. Ces familles peuvent être des grandes familles typographiques. Dans ce cas, 1 série de 6 personnages est créée pour chacune des 7 familles suivantes :

• Sans serif ou Neutre
• Serif ou Sérieuse
• Display ou Expressive
• Script ou Amicale
• Monospaced ou Monospace
• Bitmap ou Pixelisée

Personnages d’un conte

La même série de personnages est utilisable pour illustrer un conte pour enfants. Pour ce type de réalisation, il est suggéré d’utiliser des signes typographiques très agrandis, positionnés en arrière plan, pour suggérer des paysages.

Des élements de décor (bâtiments, mobilier, accessoires, etc.) peuvent être créés en complément pour rendre les illustrations du conte plus intelligible. Un tel projet éditorial nécessite une collaboration avec un ou une rédacteur-rédactrice spécialisée dans la littérature jeunesse.

Documentation en ligne

Voici quelques réalisations similaires, publiées en ligne, montrant aussi des portraits et des dessins d’animaux :

• https://dornyika.com/pages/typo
• https://www.themarginalian.org/2013/02/25/roberto-de-vicq-de-cumptich-design-matters-debbie-millman/
• https://the-graphic-designer.co.uk/faces-with-type/
• https://www.pinterest.fr/pin/876442777457878660/
• https://www.devicq.com/type#/bembo-zoo/

Conseils techniques

La fabrication d’un jeu de cartes nécessite une préparation spécifique.

Format et nombre de cartes par planche

Le format standard des grandes cartes à jouer est 80 x 120 mm. Ce format est choisi dans une optique d’utilisation pédagogique en centre de formation. Il s’agit donc, dans le cas d’un jeu des 7 familles, de créer 42 cartes (6 x 7) et Quelques cartes supplémentaires pour présenter la règle du jeu en plusieurs langues.

Dans le cadre d’une impression à l’imprimerie du Pôle Plurimédia, le format de papier imprimé sera 320 x 450 mm. La largeur (320 mm) permet de positionner 3 cartes par leur petit côté, avec 3 mm de fond perdu pour chaque carte. La longueur (450 mm) permet de positionner 3 cartes par leur grand côté, toujours avec 6 mm entre chaque pose (3 mm de fond perdu autour de chaque carte).

Un total de 45 cartes est donc envisageable en imprimant 5 planches de 9 cartes chacune. La règle du jeu pourra être imprimée en français et en anglais, la dernière carte étant réservé aux mentions techniques (auteur, polices ce caractères utilisées, etc.).

Attention : le schéma d’imposition correspond à ce que réalisera l’imprimeur. Le fichier PDF à lui fournir sera non imposé (cartes les unes sous les autres), avec les fonds perdus.

Fichier Illustrator à importer

Pour faciliter la mise en place des figures dans les cartes d’une même famille, il est recommandé de positionner les différentes figures de la même famille typographique sur un même plan de travail. Ce plan correspondra à 6 carrés de 80 x 80 mm, ses dimensions seront 480 x 80 mm.

En effet, en réservant en haut et en bas de chaque carte une zone de 20 mm pour mentionner le nom de la famille et le nom de la figure, chaque figure se positionne dans une zone de 80 mm de hauteur et 80 mm de largeur (la largeur de la carte).

Dans InDesign, l’image de 480 x 80 mm sera importée dans un bloc image de 80 x 80 mm. L’image sera recadrée horizontalement pour montrer le personnage correspondant à la carte mise en forme.

Voici une prévisualisation de 2 cartes de la famille Expressive :

La couleur d’accompagnement est à choisir de telle sorte qu’elle puisse être utilisée avec une luminosité de 50 % en arrière plan des textes et à 40% en arrière plan des figures (et éventuellement en premier plan de quelques éléments des figures).

Les éléments d’arrière plan peuvent être intégrés dans l’image importée ou dans le fichier de mise en page.

Attention : anticiper la présence de fonds perdus sur chaque carte.

Fichier à préparer pour l’impression

Le fichier à remettre à l’imprimeur sera réalisé dans InDesign en prévision d’un export en PDF haute définition avec traits de repérage.

Les pages sont à prévoir les unes sous les autres. L’utilisation d’un gabarit pour chaque famille typographique est vivement recommandée.

Même en limitant à 2 couleurs la présentation du jeu de cartes, le fichier sera réalisé en mode CMJN. Un tracé de découpe sera prévu en ton direct pour l’arrondi des angles du jeu de cartes.

Le tracé de découpe de chaque carte sera placé sur un calque indépendant. Le tracé de découpe sera en ton direct, nommé impérativement “CutContour”, paramétré en surimpression.

>> Il y a bien 2 C majuscules dans le nom du ton direct 😉

Pour le paramétrage en surimpression, dans InDesign, sélectionner le contour de découpe dans le gabarit, aller dans le menu “Fenêtre > Sortie > Options d’objet” et cocher “Surimpression du contour”.

Créer le verso des cartes

Pour le verso des cartes il faut réaliser, dans InDesign, un fichier de 278 x 398 mm présentant un motif régulier sur un seul grand rectangle. Ce rectangle couvrira toute la zone d’imposition et débordera de 10 mm tout autour de cette zone.

Au cours de cette activité, vous allez animer une mascotte mise au point par vos soins. L’animation sera réalisée dans Illustrator, image par image exportées en PNG puis produite au format GIF avec gifmaker.me. L’animation produite pourra être intégrée dans un décor figuratif ou abstrait réalisé dans canva.com.

Animer en boucle image par image

L’animation à réaliser doit pouvoir tourner en boucle indéfiniment.

Sur l’animations ci-dessus, observez la manière dont débutent et finissent Les mouvements les plus simples. Renseignez vous sur les 12 principes de l’animation.

Trouver des modèles

Si vous devez reproduire un mouvement en boucle, observer-le dans la nature ou procurez-vous une courte séquence animée mettant en scène le mouvement à reproduire.

➜ Il existe de courtes vidéos, proposées en ligne par Shutterstock, susceptibles de vous aider à trouver comment animer vos mascottes.

• Ours en peluche dansant
• Adulte style cartoon marchant
• Enfant style cartoon courant
• Personnage filaire dansant
• Vol de papillon en cercle
• Vol de papillon au ralenti

Vous pouvez les exploiter image par image en les convertissant au format GIF. Pour cela, faites un clic droit sur les vidéos pour copier l’URL de la vidéo. Vous collerez cette URL dans un convertisseur MP4 to GIF acceptant de récupérer des vidéos en ligne.

➜ Online Convert permet ainsi de récupérer une vidéo en ligne. Ne modifiez pas les réglages par défaut. Après conversion, vous disposez d’une séquence d’images fixes.

Les images obtenues ainsi vous serviront de modèle dans Illustrator pour trouver la juste pose de votre mascotte, image par image. Vous pourrez également savoir combien d’images utiliser pour réaliser une boucle complète.

➜ Pour cette animation 21 images sont suffisantes pour réaliser une boucle… même si l’animation GIF exportée après conversion est constituée de 126 images !

Animation GIF avec gifmaker.me

Les images réalisées avec Illustrator doivent être exporter en png (idéalement sur fond transparent pour pouvoir créer une animation GIF avec fond transparent.

Le dessin image par image nécessite du temps. Je vous recommande d’éditer une animation simple avec gifmaker.me puis de l’améliorer progressivement.

Il reste encore beaucoup de travail à faire pour rendre le personnage plus mobile et le vol plus réaliste mais vous pouvez noter quelles ont été les améliorations apportées entre les 2 versions.

Intégration dans canva.com

Une animation GIF peut être importée dans CANVA puis intégrée dans un décor figuratif ou un environnement abstrait.

CANVA permet l’exportation des animations au format MP4 ou GIF.

Veillez à conserver quelques éléments statiques dans votre image afin de permettre au regard de se reposer.

Dans l’exemple ci-dessous, à titre expérimental, un effet balayage a été paramétrée en début d’animation. La durée de l’animation a été fixée à 10 secondes (13 battements d’ailes de fée…).

Utilisation éventuelle d’After Effect

Les plus expérimentés peuvent réaliser l’animation de leur mascotte avec After Effect. L’utilisation de ce logciel n’est pa au programme de la formation Com-Créa. L’animation ci-dessous a été réalisée par Fabien, en utilisant les fonctionnalités de base d’After Effect.

L’animation d’un logo permet d’envisager la création d’encarts Web animés. L’exemple ci-dessous est conçu (toujours dans After Effect) pour tourner en boucle.

Lors de cette activité pratique (niveau 3 de la formation Com-Créa), vous allez réaliser une mascotte simplifiée en lien avec l’identité visuelle d’une entreprise. Vous effectuerez des recherches sur le sujet, guidés par les consignes données et les ressources mises à votre disposition sur Netboard et sur Pinterest.

Prérequis : avoir suivi les niveaux 2 des formations Com-Créa et PAO-Tech.

Suivre un processus de design

La création d’une mascotte suit le même processus que la création d’un logo (voir niveau 2). Les étapes du processus sont celles du design graphique en général :

• Brief et rédaction du cahier des charges
• Documentation marketing et sectorielle
• Planche de tendances
• Arbre thématique
• Planche de stylisation (formes, proportions, couleurs, traitement graphique)
• Recherches graphiques (premières esquisses)
• Vectorisation et prototypage
• Tests et affinage
• Propositions au client
• Finalisation et charte d’utilisation
• Utilisation et retours sur l’utilisation
• Débriefing avec l’équipe de design et le client

Schématiser la succession des étapes de création

Il s’agit dans un premier temps de s’immerger dans le projet, les besoins du client et des utilisateurs, les tendances du moment dans le domaine concerné (étape formalisée par le brief, la documentation au sens large, la rédaction du cahier des charges et la planche de tendances).

Dans un second temps, il s’agit de définir le ou les axes de création sur lesquels vont se baser les recherches graphiques (arbre thématique, planche de style, premières esquisses)

Dans un troisième temps, il s’agit de réaliser vectoriellement la ou les propositions au client, en prenant soin de les tester et de les affiner si nécessaire au préalable.

Enfin, la dernière série d’étapes concerne la finalisation de la mascotte en la déclinant pour les différents usages envisagés et en concevant sa charte d’utilisation (charte graphique).

Visionner un processus complet

Vous pouvez visionner un processus complet de création de mascotte sur behance.net, depuis les croquis préparatoires jusqu’aux intégrations en vidéo et sur salons promotionnels.

➜ Sans aller jusqu’à ce niveau de professionnalisme, vous êtes invités, au cours du niveau 3 de la formation Com-Créa, à réaliser une mascotte simple en suivant la démarche indiquée. Vous pouvez vous baser sur les projets de logo menés au niveau 2 de la formation ou entreprendre une création pour répondre aux besoins d’une marque que vous connaissez.

Incarner les caractéristiques d’une entreprise

La mascotte incarne des valeurs de l’entreprise, elle donne corps à tel ou tel aspect de la vie de l’entreprise (sa production, ses services, son point fort, sa raison d’être, etc.).

Inventorier toutes les possibilités

Voici une liste de quelques éléments d’une entreprise “incarnables” par une mascotte :

• Le nom de l’entreprise (ex : Miss Queen > mascotte reine)
• Un produit créé par l’entreprise (ex : fruit > mascotte fruit)
• Un ingrédient d’un produit (ex : chips aux crevettes > mascotte crevette )
• Le bâtiment de l’entreprise (ex : tour Eiffel > mascotte tour Eiffel)
• Les utilisateurs du service de l’entreprise (ex : le stade G. Guichard > mascotte footballeur)
• Les bénéficiaires des services de l’entreprise (ex : société de protection des ours blancs > mascotte ours blanc)

Utiliser la symbolique animalière

Selon les cultures, les animaux sont dotés de traits de caractère qui leur permettent d’incarner des valeurs, des conduites à tenir. Dans la culture occidentale, je vous propose quelques repères.

Identifier les traits de caractères animaliers

• Les nourriciers : vaches, pélicans
• Les protecteurs : lions, tigres
• Les voyageurs : hirondelles, oies
• Les royaux : aigles, lions, cerfs
• Les laborieux : abeilles, fourmis
• Les donateurs : cigognes, geais
• Les bâtisseurs : castors, hirondelles
• Les résistants au froid : ours polaires, manchots, pingoins
• Les bavards : peroquet, maynate
• Les sorciers et magiciens : hiboux, chouettes, corbeaux, chats noirs, araignées, chauve-souris
• Les colériques : rhinocéros, bouledogues
• Les économes : écureuils, fourmis
• Les gourmands : ours, fourmilier (tamanoir)
• Les voraces : cochons, sangliers
• Les météorologues : grenouilles, hirondelles
• Les malins : renards, singes
• Les méchants : loups, araignées, chauves-souris, guêpes, crocodiles
• Les nonchalants : koalas, paresseux, gros ours
• Les musiciens : cigales, grillons
• Les prétentieux : coqs, paons
• Les forts : chevaux, bœufs, taureaux
• Les sages : hiboux, éléphants
• Les doux : biches, brebis
• Les indépendants : chats, baleines
• Les fidèles : chiens, colombes
• etc.

Pour en savoir plus sur le sujet : https://www.wikiwand.com/fr/Symbolique_des_animaux

Choisir le style graphique d’une mascotte

Le choix du style graphique d’une mascotte est guidé par les recherches effectuées sur les tendances et les codes du secteur concerné. Les mascottes ci-dessus (guêpe et taureau) sont adaptées à l’identité visuelles de clubs sportifs. Un puissant contour, un relief contrasté mis en valeur par le trait, un traitement vectoriel franc et une expressivité agressive correspondent aux attendus des clubs et de leurs supporters.

Choisir un niveau de complexité et un mode de rendu

Le style graphique d’une mascotte repose sur le mode de rendu graphique et sur le niveau de complexité du dessin.

Le tableau ci-dessous différencie trente styles graphiques combinant niveaux de complexité et modes de rendu.

Il est plus facile de créer une mascotte dans les styles des trois premières colonnes du tableau. Le choix du style “cartoon modulaire” (3e colonne) permet assez facilement la réalisation d’animations détaillées.

Animer ou ne pas animer la mascotte

En tenant compte de votre niveau de technicité, tant en dessin qu’en PAO, choisissez un style graphique que vous pourrez exploiter sans difficulté dans la suite du projet.

En effet, il importe de prendre en compte l’éventuelle animation de la mascotte et le nombre de dessins à réaliser pour cela.

Sur les animations ci-dessus, notez les exagérations des mouvements (anticipation et inertie des gestes les plus simples). Renseignez vous sur les 12 principes de l’animation si vous envisagez de réaliser de telles images.

Attention : l’expression “animer une mascotte” renvoie très souvent au fait d’utiliser un acteur costumé pour incarner la mascotte (lors d’un événement en lien avec la marque promue par la mascotte).

Choisir l’angle de vue et la pose de la mascotte

Pour rendre la mascotte plus vivante aux yeux des utilisateurs de la marque, il est souhaitable de pouvoir la représenter sous plusieurs angles de vue.

Dessiner des “model sheets” et des “turnarounds”

Les créateurs de mascottes les représentent ainsi dans des planches nommées en anglais model sheets ou turnarounds.

Il est évidemment plus facile de proposer des poses et des angles de vue différents dans les styles graphiques les plus simples.

Utiliser des poses dynamiques

Les poses des planches précédentes sont souvent statiques. Pour élargir l’expressivité de la mascotte, il est recommandé de la présenter dans des poses dynamiques.

Étudiez le travail des designers de personnage (character designers) pour diversifier vos dessins.

➜ Effectuez des recherches avec les mots clés characters poses ou chibi action. Collectez des exemples et donnez à vos personnages le mouvement des modèles retenus.

Personnaliser des gabarits existants

Pour gagner du temps ou suppléer à des compétences de dessin insuffisantes, vous pouvez personnaliser des gabarits vectoriels proposés en ligne sur diverses plateformes.

Vous trouverez quelques gabarits gratuits sur freepik.com et de nombreux gabarits payants sur graphicmama.com. Graphic Mama propose quelques ressources gratuites sur son blog.

Charter le design de la mascotte

Une fois les tests d’utilisation effectués et les correctifs apportés au design du personnage, il convient de consigner les points clés du dessin de la mascotte dans une planche de synthèse ou une charte graphique plus complète.

Préciser les formes, les proportions et les couleurs

Proposer des éléments modulaires

Pour faciliter l’utilisation ultérieure de la mascotte, il est intéressant de mettre au point des versions modulaires du personnage. Plusieurs poses sont réalisables en assemblant différentes parties du personnage.

Intégrer la mascotte dans les produits de communication

Associer un univers à la mascotte

Une mascotte est comme un héros de bande dessinée ou un personnage de dessin animé. Elle évolue dans un univers personnel. Elle est porteuse d’une histoire et peut être accompagnée d’un(e) ou plusieurs ami(e)s ou partenaires.

Faire interagir les produits et la (les) mascotte(s)

Dans les exemples présentés ici, les petites mascottes utilisent le produit et le produit les montre en train d’évoluer dans l’univers associé à la marque. Photos et dessins sont combinés pour mêler réel et imaginaire.

Multiplier les intégrations

Sur les sites mentionnés sur y-goguely.netboard.me, vous pouvez voir des mascottes imprimés sur des badges, des magnets, des coques de téléphone, des supports de PLV (Publicité sur Lieu de Vente), etc.

Animées à des degrés divers, elles sont aussi présentées sur les réseaux sociaux et sur les sites web de la marque.

➜ Mettez vos mascottes en situation et anticipez les besoins en communication de votre client.

Dans cet activité de mise en pratique (TD), vous devez concevoir un visuel modulaire destiné à illustrer un kit de communication. Ce kit sert à promouvoir un événement par le biais de plusieurs produits personnalisables. Vous vous appuierez sur une réalisation existante que vous optimiserez dans le cadre fictif d’une reconduction de l’événement.

Vous allez dans un premier temps étudier le kit d’aide à la communication mis en place par la Fédération Française de Cyclotourisme pour promouvoir la Fête du Vélo prévue en juin 2019. Vous imaginerez ensuite un nouveau kit pour promouvoir le même événement envisagé en juin prochain (année suivant la date de session).

Prendre connaissance du cahier des charges

Consulter les documents fournis

Les documents à partir desquels vous allez travailler sont à télécharger sur votre poste de travail.

Le kit de communication de la FF Vélo avait été mis en ligne sur le site de la Fédération Française de Cyclotourisme. Il a été retiré depuis, remplacé par d’autres outils de communication que je vous invite à découvrir. Vous trouverez sur le site ffvelo.fr le lien de téléchargement de la charte graphique de la fédération.

• https://kitcommunication.ffvelo.fr/
• https://kitcommunication.ffvelo.fr/wp-content/uploads/2020/03/GUIDEMARQUE_FFVELO.pdf

Suivre la démarche de design vue au niveau précédent

Pour mener ce projet, vous reprendrez une démarche analogue à celle suivie pour la conception d’un logo (voir le cours précédent) : préparation-définition → idéation-conception → réalisation-publication.

Il vous faut donc mener un brief, analyser le cahier des charges, clarifier tous les points techniques relatifs aux livrables à produire. Vous allez vous documenter sur le sujet, prendre en compte la direction artistique du projet (la tendance et le style imposé), effectuer des recherches et faire des propositions. Vous allez finaliser la proposition retenue et décliner cette proposition sur tous les produits de communication envisagés.

Analyser le cahier des charges

➜ Après avoir analysé les éléments de la campagne 2019, une première version de cahier des charges a été rédigée. Ce cahier des charges doit être analysé et complété par les réponses aux questions à poser lors du brief (1re séance de cours).

Il s’agit de réaliser un kit d’aide à la communication, proposé en ligne par la Fédération Française de Cyclotourisme, pour la Fête du Vélo envisagée durant les 2 premières semaines du mois de juin prochain.

Prendre en compte 4 axes positifs et négatifs

4 axes positifs sur lesquels s’appuyer :

• communication festive
• diverses pratiques (sportives, ludiques, touristiques, utilitaires, sur route, sur sentiers, sur circuits, etc.)
• divers publics (hommes, femmes, ados, enfants, divers âges, etc.)
• divers lieux (ville, campagne, montagne, littoral, complexes aménagés, etc.)

4 axes négatifs à éviter absolument (le contraire des 4 axes positifs…) :

• communication formelle
• 1 seule pratique
• 1 seul public
• 1 seul lieu

Identifier l’ensemble des livrables attendus

Les éléments à personnaliser devront prévoir un espace suffisant pour intégrer en impression numérique le nom de la ville où se déroulera l’événement ainsi que le lieu du principal rendez-vous (ex: Clermont-Ferrand | Place de Jaude).

En respectant la charte graphique publié par la FFC (couleurs, typographies, formes, etc.) Il est attendu la production des éléments suivants :

• Un bloc marque optimisé (agrandir la zone événement et améliorer la présentation du texte)
• Un bloc date optimisé (amélioration de la lecture des données)
• Un visuel en appui sur les 4 axes définis plus haut – Format 297 x 297 mm – Résolution 300 dpi
• Deux affiches (1 aff. A3 et 1 aff. A4 )avec zone de personnalisation
• Un flyer A5 recto verso avec zone de personnalisation
• Une couverture de guide pratique + gabarits pages intérieures (gauche + droite) – format fermé : 210 x 148 mm
• Trois bannières Web (FB = 820 x 312 px + TWT 1500 x 500 px + ISTGRM = 1080 x 1080 px)
• Trois GIF animés (billboard  970 x 250 px + leaderboard  970 x 90 px + pavé 300 x 250 px)

Il est également attendu la production des éléments graphiques permettant le marquage des objets suivants :

• Stickers
• Sacs
• Gourdes
• T-shirts
• Casquettes

Préparer le travail de conception

Avant de se lancer dans le travail de conception de l’illustration il est nécessaire de mener à bien plusieurs opérations.

Analyser les documents fournis

Une rapide analyse des éléments existants (campagne 2019) montre que le visuel utilisé ne correspond pas aux axes proposés pour l’année concernée par le projet.

Le visuel présente un vélo de femme, pour une utilisation ludique ou utilitaire, placé devant un paysage rural de plaine. Le visuel 2019 est trop axé sur un seul type de pratique, dans un seul type d’environnement et pour un public trop spécifique !

Analyser une collecte d’affiches sur le même thème

➜ Pour trouver des éléments de réponse à la question posée par la nécessité de cibler diverses pratiques, divers publics et divers lieux, consultez les sites de quelques studios graphiques ayant travaillé sur un projet de communication en rapport avec la fête du vélo.

• http://www.approche-design.fr/portfolios/lafeteduvelo/
• https://www.behance.net/gallery/60687725/Fete-du-vlo
• http://www.verdiel.fr/fete-du-velo-2019/
• http://www.clementbuee.fr/portfolio/fete-du-velo-saint-ouen/
• http://www.kleguillerm.com/page_portfolio/affiche/affiche_projet08.html

Une collecte d’affiches portant sur le même thème permet de mieux cerner les données du problème. La question posée pourrait-être Comment traduire visuellement la multiplicité des usages cyclistes ?

➜ Chaque graphiste a trouvé une manière différente de répondre à la question. Certains ont produit plusieurs visuels pour la même campagne, d’autres ont multiplié les figures de cyclistes, des graphistes ont inventé des vélos aux usages multiples… d’autres sont tombés dans le même biais que le graphiste du projet retenu par la fédération concernée en 2019.

Tenir compte de la direction artistique imposée

Pour vous permettre d’expérimenter un type de mise en page très pratique dans ce type de contexte, je vous propose une ligne directrice à suivre concernant le type d’illustration à mettre en œuvre.

Le cahier des charges nous invite à produire une illustration de format carré. Par ailleurs, vous serez amenés à décliner cette illustration dans plusieurs autres formats rectangulaires, horizontaux ou verticaux.

➜ Je vous propose donc de réaliser un visuel en appui sur une grille de carrés de 3×3 (9 carrés), dans une optique modulaire, chaque carré ou carreau de la grille pouvant être déplacé dans la composition en fonction des besoins.

Dans le diaporama ci-dessous, des exemples d’assemblages de carrés sont présentés. Les carrés blancs figurent des zones de texte et les carrés noirs des zones d’image.

➜ Il s’agit donc :

• de mettre en place, sur une grille de 9 carrés (3 colonnes x3 rangées), une image d’arrière-plan composée de carrés juxtaposés indépendants, eux-mêmes composés de formes géométriques simples évoquant un environnement paysager ;
• d’incorporer dans la composition des éléments graphiques (formes, couleurs, textures, motifs) évoquant la mer et la montagne, la ville et la campagne, le bâti et le naturel ;
• d’ajouter à cet environnement des illustrations ou éléments figuratifs évoquant le cyclisme sous toutes ses formes et pour tous les âges (avec ou sans personnages-cyclistes).

Se documenter sur le style imposé

➜ Avant de se lancer dans le maquettage de l’illustration, il est nécessaire de se documenter au sujet des compositions graphiques sur une grille de carrés. Pinterest offre un premier champ de recherches.

https://www.pinterest.fr/dendrographe/composition-grilles-de-carr%C3%A9s/

Pinterest mentionne la présence de motifs géométriques sur le site de Freepik. Une recherche plus détaillée vous donnera accès à des éléments vectoriels susceptibles de fournir une base sur laquelle vous appuyer pour mettre au point composition sur grille.

Sélectionner le visuel le plus pertinent

➜ Prenez le temps d’examiner avec soin les motifs collectés. Dans Illustrator, créez un masque qui vous permette d’examiner le rendu d’une grille de 3×3 carrés, comme indiqué sur la capture d’écran ci-dessous.

Vous découvrirez ainsi le type de formes qui répondra le mieux au cahier des charges du projet. Il s’agit de trouver des formes qui soient ni trop urbaines ni trop rurales, évoquant un univers à la fois masculin et féminin, adulte et enfantin…

L’alternance des zones claires et des zones foncées entre aussi en ligne de compte. Veillez à ce que le regard circule facilement entre les différents motifs. Si les formes vous conviennent mais que les couleurs vous semblent mal réparties, n’hésitez pas à faire des modifications.

Le carré sélectionné servira de charpente à l’illustration définitive. Il est prévu d’insérer dans les formes du motif global des éléments visuels plus significatifs (photos, dessins figuratifs, etc.) ainsi que des textures si cela est jugé nécessaire.

L’équilibre final sera atteint quand toutes les composantes graphiques seront intégrées dans la composition. Ne cherchez à équilibrer trop tôt votre composition !

Affiner le visuel sélectionné

Les visuels collectés sur Freepik ne sont pas toujours construits avec rigueur. Suivant le temps dont vous disposez et surtout si vous envisagez de décliner une série de motifs géométriques de plusieurs manières, envisagez de rectifier l’alignement des traits.

➜ Pour effectuer ce travail de rectification des tracés, il est nécessaire de travailler en aperçu “Tracés”.

Vous pouvez régler le pas de la grille sur la dimension des modules et activer le magnétisme de la grille. Le reste est une question de persévérance…

➜ Rectifiez a minima les 9 carrés (3X3) que vous avez sélectionnés pour construire votre illustration. Utilisez les fonction d’alignement horizontal et vertical, dans Illustrator, pour rectifiez votre dessin.

Utiliser les couleurs de la charte

La FFC dispose d’une charte graphique proposant plusieurs couleurs.

Étager les couleurs fournies

Les couleurs imposées ne sont pas présentées de manière à mettre en évidence l’étagement de leur valeur de gris, base de toute composition visuelle structurée. Il est primordial, lors de la colorisation définitive du visuel, d’optimiser le contraste entre les différentes parties de votre composition.

Cela donne du rythme à l’image, en évitant toute impression de sous-exposition (image trop sombre) ou de surexposition (image trop claire). La lecture des formes clés doit être optimisée quelque soit les conditions d’éclairage et le visuel est plus impactant.

➜ Il convient donc de trier les couleurs fournies en utilisant 3 catégories (couleurs foncées, couleurs moyennes, couleurs claires). Je vous propose de compléter pour votre usage, la planche ci-dessous.

Vous pouvez ajouter une couleur dont la symbolique dans le monde cycliste est très forte, il s’agit du jaune (maillot jaune). Cette couleur est curieusement absente du nuancier de notre “client”.

Vérifier l’équilibre des valeurs

➜ Une fois que vous avez réparti vos couleurs dans votre composition, en veillant à utiliser les 3 catégories de couleurs (foncées, moyennes et claires), exportez votre travail en tant qu’image matricielle (ou faites une capture d’écran).

Ouvrez cette image matricielle dans Photoshop et convertissez l’image en niveaux de gris. Vous verrez alors au premier coup d’œil si votre composition est bien rythmée et bien contrastée. Si ce n’est pas le cas, vous saurez immédiatement quelle est la couleur à changer pour obtenir une valeur plus claire ou plus foncée dans les zones concernées.

Pour améliorer la qualité visuelle de votre image, vous pourrez ajouter ponctuellement des petites zones de blanc (ou de couleurs claires sur fond blanc).

Prévoir les fonds perdus

Il est maintenant nécessaire d’anticiper l’intégration du visuel créé dans les différents produits de communication. Le premier livrable est une affiche A3 sur laquelle le visuel occupe toute la partie supérieure.

➜ Prévoyez 5 mm de fonds perdus et anticipez le résultat d’un massicotage imprécis de l’affiche en disposant de manière cohérente les éléments débordants. faites bien attention de ne pas déformer les triangles et les cercles en vous contentant de décaler des points de contrôle.

Décliner le visuel sur les différents produits

Composer l’affiche

Le moment est venu de mettre en page votre visuel pour composer l’affiche A3. Le schéma ci-dessous vous indique comment se positionne le visuel dans l’affiche.

Il est assez déroutant, pour un illustrateur débutant, de voir le visuel qu’il a patiemment mis au point passer au second plan lors de la mise en page. Les textes ou leurs blocs d’encadrement dissimulent les motifs ajustés avec soin : c’est parfois assez frustrant ! Soyez rassurés, dans d’autres produits de communication du projet (notamment la couverture du livret), le visuel mis au point sera moins “encombré” par les différents blocs d’information.

➜ Effectuez le positionnement de tous les éléments qui doivent figurer sur l’affiche et, si vous le jugez nécessaire, vous rectifierez votre image pour l’adapter à son utilisation dans l’affiche. Ne cherchez pas à équilibrer votre affiche avant d’avoir intégré tous les éléments qui doivent y figurer.

Pour enrichir votre travail de recherche, référez-vous au cours intitulé L’illustration modulaire.

Créer des gifs animés

La création des gifs animés nécessite de disposer de plusieurs “écrans” sur lesquels s’affichent successivement les textes proposés au lecteur.

Il est tout à fait envisageable de préparer les écrans dans Adobe Illustrator, sur des plans de travail distincts, puis d’exporter pour les écrans à la taille réelle (x1), en jpg ou en png.

➜ Pour transformer les images exportées en gif animé, je vous propose d’utiliser l’outil en ligne gifmaker.org (voir tutoriel ci-dessous).