TP CDUI CCP 1 - Concevoir les éléments graphiques d'une interface et de supports de communication

Introduction 

• Photoshop et le traitement de l’image pixel : qu’est-ce qu’un pixel
• Présentation de l’interface : menu, outils et palettes 
• L’espace de travail 

Préparer mon image 

• Ouvrir, redimensionner et recadrer une image 
• Désincliner l’image 
• Taille de l’image – Taille de la zone de travail 
• Naviguer dans l’image (outil zoom, main, panneau navigation, raccourcis, etc) 

Diagnostic de l’image 

• L’histogramme 

Connaître les principes techniques d’une image 

• Résolution et formats d’images 
• Les modes colorimétriques : RVB, CMJN, etc. 

La correction colorimétrique de l’image 

• Présentation des réglages (menu image) 
• Utiliser les réglages non destructifs (calques de réglage) 
• Les réglages ajustant la luminosité, les contrastes, le point blanc et le point noir, etc. 
• Les réglages affectant la teinte, la couleur, la saturation, etc.
• Tons foncés/tons clairs et Virage HDR

Comprendre et utiliser les calques 

• Notions de calques (notion de plans) 
• Dupliquer, supprimer, verrouiller ou déplacer un calque 
• S’organiser avec les libellés (couleurs) et les groupes de calques (en bref) 
• Calques de réglages « couleur unie » et « dégradé » 

Sélection et détourage : première approche 

• Notion de sélection 
• Les outils de sélection (cadre, lasso, lasso polygonal, lasso magnétique, baguette magique, sélection rapide, etc.) 
• Copier une sélection et coller sur un nouveau calque 
• Travailler avec du contour progressif 

Quelques outils principaux 

• Pinceau/crayon/gomme 
• Forme de base, diamètre, dureté, opacité, etc.
• Sélecteur de couleur (premier plan / arrière plan) 
• Outil Pipette 
• Pot de peinture 
• Outil dégradé 
• Palette couleur 
• Le nuancier 
• Utiliser les repères et les règles 

Enregistrer et exporter dans différents formats d’image 

• Méthode de travail en retouche : travailler au format psd 
• Présentation des principaux formats d’images (Tiff, Jpeg, etc.) 
• Optimisation pour le print : passage rvb vers cmjn, améliorer la résolution 
• Optimisation pour le web (les formats du web : Jpeg, Gif, Png, etc. 

Les bases de la retouche d’image 

• Utiliser l’outil Tampon 
• Outil Correcteur, correcteur localisé, pièce et déplacement basé sur le contenu 
• Les outils de retouche locale (goutte d’eau, éponge, netteté, densité – et +.)

Utilisation des filtres pour la correction d’image 

• Les principaux filtres de netteté 
• Les principaux filtres de flou (gaussien, directionnel, etc.)
  La galerie d’effets de flou 
• Filtre « correction de l’objectif » (pour la photo) 

Travailler en non destructif (premières notions) 

• Travailler avec des calques de réglages 
• Échantillonner les calques inférieurs (retouche) 
• Objets dynamiques pour filtres dynamiques 
• Les masques de fusion (notion de détourage bitmap) 

Les masques de fusion 

• Le détourage avec les masques de fusion (à partir de sélections) 
• Masque de fusion sur un calque de réglage (pour régler une zone de l’image)
• Retoucher un masque de fusion (pinceau, gomme, lisser, contours progressifs, etc.) 

Exercices appliqués 

• Retouche photo 
• Photomontage simple 

Le vectoriel de Photoshop 

• La palette Tracés 
• Combiner plusieurs tracés 
• Les calques de formes 
• Le détourage à la plume (masque vectoriel) 

Aller plus loin avec les calques 

• Le calque d’écrêtage 
• Lier des calques 
• Travailler avec les modes de fusion (notions de base) 

 Le texte 

• Ajouter du texte (calque de texte) 
• Options pour le texte

Photoshop productif (bases) 

• Utilisation de Photomerge 
• Planche contact 
• Importations de fichiers images (liens ou incorporés) 
• Ouverture de fichiers autres (Pdf, Ai, etc.) 

Retoucher un portrait (si profil photo) 

• Techniques de retouche variées et combinées 
• Utilisation de filtres pour la retouche d’images 
• Le filtre passe-haut 
• Le filtre fluidité (en filtre dynamiques) 

Photoshop multimédias 

• Optimisation pour le web (les formats du web : Jpeg, Gif, Png, etc.) 
• La palette Animation (Gif) 
• La palette Montage (en bref) 
• Organiser et découper un Design Web (outil tranche) et exportation

Exercices appliqués 

• Photomontage de complexité intermédiaire 
• Retouche portrait (profils photo) ou Maquette newsletter (profils web) 

Outils/Fonctions supplémentaires

• Panneau « Source de duplication » avec Tampon
• Les motifs (remplir, calque de motif, tampon de motif)
• Outil forme d’historique
• Transformation basée sur le contenu
• Déformation de la marionnette
• Outil Correction de la perspective par recadrage

Sélection et détourage : Aller plus loin

• Mémoriser, récupérer une sélection
• Le « mode masque »
• Interface « Sélectionner et masquer »
• Détourer les cheveux
• Le détourage avec les couches (R/V/B)
• Combiner les techniques (détourage à la plume vers masque de fusion, puis améliorer le masque avec « Sélectionner et masquer »)

Travailler en non-destructif (notions avancées)

• Les possibilités des objets dynamiques
• Utiliser les masques de filtre dynamique

Aller plus loin avec les filtres

• Filtres de déformation, d’esthétique, pixelisation
• Le rendu d’éclairage
• Autres filtres utiles (nuage, halo, ajout de bruit, réduction de bruit, antipoussière, etc.)
• Combinaisons avec la galerie de filtres
• Aller plus loin avec Fluidité
• Filtre point de fuite
• Filtre « Grand angle adaptatif » (profil photo uniquement)

Travailler avec caméra raw (Profil Photo)

• Filtre caméra Raw à partir de Photoshop
• Caméra Raw avec Adobe Bridge
• Synchroniser les paramètres / paramètres de développement
• Renvoyer vers Photoshop (direct ou objet dynamique)

Outils de design multimédias (Profil web et PAO)

• Optimiser la maquette (profil Web)
• Les plans de travail (profil Multimédias)
• Nouvel outil « Image » (profil Web)
• Créer un Mockup (profils Web et PAO)
• Visualiser en Quadri/CMJN (Profil PAO)

Photoshop productif (notions avancées)

• Utiliser les scripts et traitements par lots
• Autres processus d’images automatisés (charger les images dans une pile)
• La fusion HDR (profil Photo)

Illustration avec Photoshop (Travail à la tablette graphique)

• Les brosses (pinceaux)
• Créer une brosse personnalisée
• Créer des motifs personnalisés
• Options de symétrie pour la peinture

La 3D avec Photoshop (Optionnel)

Exercices appliqués

• Petits exercices appliqués (Art numérique, Digital Painting, création de textures, etc.)
• Réalisation d’une maquette Web (profil Web)
• Atelier retouche photo (profil Photo)

Introduction 

• L'image bitmap (avec des pixels) et l'image vectorielle 

Présentation d'Adobe Illustrator et de son interface 

• Choisir son plan de travail 
• Présentation rapide des principaux outils et palettes, notion d'espace de travail 

L'objet vectoriel 

• Comprendre la forme vectorielle 
• Le point d'ancrage (types sommet ou courbe) 
• Le vecteur et la poignée de direction, etc. 

Les formes vectorielles de base : création et déformation 

• Créer un rectangle, une ellipse, un polygone 
• Créer un triangle avec l'outil polygone 
• Les déformations, utilisation du cadre de sélection 

Appliquer un fond et un contour à un objet vectoriel 

• Les différents types de fond dans la palette Nuancier : couleur, dégradé et motif 
• La palette Contour 

Les outils et techniques de sélection 

• Sélection flèche noire et flèche blanche : fonctionnalité et spécificité 
• Les autres outils de sélection (Baguette magique et Lasso) 

Déformer, transformer l'objet vectoriel 

• Déformer et transformer en utilisant la flèche blanche 
• Les outils de transformation Rotation, Miroir, Mise à l\'échelle, Déformation
• La palette Transformation 
• L'outil Transformation manuelle 

Jouer sur les différents plans 

• Le menu disposition : mettre au premier plan, en arrière, etc. 
• Copier devant, copier derrière 

Dessiner avec l'outil Plume 

• Utilisation et maîtrise de l'outil plume 
• Plume plus, plume moins 
• L'outil Conversion de point d'ancrage 

Déplacer, dupliquer, aligner les objets vectoriels 

• Le menu Joindre et Alignement dans Objet > Tracé 
• La palette Alignement 
• Le menu Transformation réparti 
• Différentes possibilités pour dupliquer un objet vectoriel 

Combiner les objets vectoriels 

• Combiner avec la commande Associer et utilisation de flèche blanche plus (Sélection directe progressive)
• Travailler en mode isolation ou avec la flèche blanche plus 
• Combiner avec la palette Pathfinder 

Les bases du texte dans Adobe Illustrator 

• Outil texte 
• Outil texte captif 
• Outil texte curviligne 
• Les palettes Caractère et Paragraphe 

Gestion des images dans Illustrator 

• Importer une image 
• La palette Lien : lien d'une image, intégrer une image 
• Image sur un calque en mode modèle 

Mieux organiser son travail en se servant des calques 

• Intérêt et utilisation des calques dans Illustrator 
• Calques et sous-calques

Réaliser des dessins vectoriels simples 

• Types de travaux réalisés (à titre indicatif, non exclusif) 
• Logo, cartographie-infographie, signalétique, stylisme de mode, tatouage, illustration, etc.

Travailler avec des dégradés 

• Outil dégradé de couleur (rappel) 
• Le dégradé de forme 
• Outil filet de dégradé 

Les masques dans Illustrator 

• Masque d'écrêtage 
• Masque d'opacité 

La palette Transparence 

• Jouer sur l'opacité 
• Jouer avec les modes de fusion 

Les formes de pinceau dans Illustrator 

• La forme artistique 
• La forme de motif 
• La forme calligraphique 
• Option de pointe de pinceau 
• Faire une forme de pinceau avec une image pixel (nouveauté cc) 

La palette Aspect 

• Travailler avec plusieurs fonds et contours 
• Gérer les effets 

La palette Symbole 

• Intérêt de travailler avec des symboles 
• Créer, supprimer un symbole 
• Substituer un symbole 

La gestion des couleurs dans Illustrator 

• Mode colorimétrique suivant type de document 
• Créer, importer une bibliothèque de nuance
• Notion et utilisation de couleur globale 
• La palette couleur 
• La palette guide des couleurs 

Les principaux effets dans Illustrator 

• L'effet ombre portée 
• L'effet arrondi 

Les styles de déformation (Arc, Dilatation, etc.) 

• Dans les effets Déformation 
• Dans le menu distorsion de l'enveloppe 

Les textes dans Adobe Illustrator (approfondissement) 

• La palette Glyphe 
• Tabulation 
• Habillage du texte 

Travailler en volume dans Illustrator 

• L'effet 3D 
• L'outil grille de perspective 
• Vectorisation d'une image 

La vectorisation dynamique dans Illustrator 

• Diffèrent mode de vectorisation 
• Préparation d'une image avant la vectorisation 

Réaliser des dessins vectoriels complexes 

• Types de travaux réalisés (à titre indicatif, non exclusif) 
• Logo avec dégradés 
• Bouton web effet aqua 
• Cartographie-infographie avancées 
• Signalétique 
• Stylisme de mode avancé 
• Tatouage, illustration, etc.

Découvrir InDesign et comprendre son utilisation – présentation de l’outil

• InDesign outil de mise en page pour la PAO print et/ou numérique
• Notion sur la chaîne graphique
• Présentation de l’interface (les menus, les outils, la barre de contrôle, les palettes, etc.)

Créer un nouveau document

• Choisir le format de son document
• Choisir ses repères de marges et de colonnes

Prise en main de base

• Créer, manipuler, gérer les blocs texte et image dans InDesign
• Spécificités des différents blocs
• Les formes graphiques
• Créer et appliquer des couleurs
• Importer une image et l’ajuster
• Le panneau des calques
• Quelques mots sur l’exportation PDF

Gérer ses images dans InDesign

• Les principaux formats d’images utilisés
• Les modes colorimétriques (spécificité du CMJN)
• Le panneau Liens et la résolution d’images
• Importations multiples et autres astuces

Les aspects graphiques (couleurs, nuancier, contour, transparences, effets)

• Créer une nuance
• Les tons directs et nuances Pantone
• Créer un dégradé
• Thèmes Adobe Color
• Les attributs de contour
• Contours progressifs dégradé et autres effets
• La transparence et les modes de fusion
• La pipette

Travailler le texte et la typographie

• Les palettes Caractère et Paragraphe
• Les principaux attributs par le panneau de contrôle.
• Initiation à la typographie et à la lisibilité d’un texte
• La palette Glyphes
• Remplir avec un texte de substitution
• Installation des polices

Organiser sa mise en page dans InDesign

• Se servir de repères
• Déplacer, dupliquer, aligner des blocs
• Principes de base pour la mise en page
• Créer un document multi-pages
• L’outil espace
• Modifier les angles de bloc

Analyser une mise en page

• Typologie de mise en page
• Gestion des repères/grilles

Réaliser des mises en page avancées – InDesign productif

• L’habillage de texte
• Les options de bloc de texte
• Le chainage de blocs de texte
• L’habillage de texte
• Fonctions d’automatisation de mise en page
• Création et application de gabarits (panneau pages)
• Libérer un ou des élément(s) de gabarit
• Pagination automatique

Réaliser et gérer des documents multi-pages

• Les éléments récurrents de la maquette > Gestion des planches (ou pages en vis-à-vis)
• Les feuilles de styles (caractère-paragraphe-objet)
• Rôle des gabarits dans un document multipages

Perfectionnement sur les outils

• Gestion des repères/grilles
• Création et application d’une grille de ligne de base
• Utilisation des outils vectoriels
• Spécificités d’importations PSD et AI
• Importation multiple d’images
• Les options de calques d’objet

Pratique – réaliser des mises en page autour de projets complets

Exercices de mises en page pouvant être proposés par le formateur :

• Documents de communication monopage ou recto-verso (cartes de visites, flyers, affiches)
• Documents de communication en « volets » (3-volets, plaquettes 4 pages)
• Documents multi-pages (brochures, fascicules, etc.)

Les racines de l’identité visuelle

• Brève histoire du Design
• Les influences du Design contemporain
• Les dernières tendances

Qu’est-ce qu’une identité visuelle

• Identité visuelle et charte graphique
• Que doit comporter une charte graphique (exemples) ?
• Qu’est-ce qu’un logo et quel est son rôle ?
• Les principes fondamentaux de l’identité visuelle de marque

Interpréter les couleurs

• Psychologie des couleurs
• Créer des harmonies de couleur

La typographie

• Qu’est-ce que la typographie et qu’est-ce qu’une police de caractère ?
• Quelle police pour quelle utilisation ?

Concevoir une identité visuelle – Méthodologies

• Réaliser une stratégie de création (analyse de la demande client, de la cible, réflexion)
• Les méthodes d’agences : Brainstorming, Mind Mapping, Design Thinking
• La recherche documentaire et iconographique
• Atelier projet : Brainstorming, puis méthode « les 6 chapeaux de Bono »
• Réaliser un Mood-Board (planche tendance)

La lecture de l’image

• Analyser et évaluer la qualité d’une photographie / image
• Cadrages et compositions (règles des tiers, nombre d’or)

L’affiche

• L’affiche d’hier à aujourd’hui
• Les différents types d’affiches (publicitaire, propagande, culturelle, etc.)
• L’affiche : organisation, lecture graphique, composition
• L’affiche : le message
• Les obligations, les normes d’impression, etc.

Réalisation d’une charte graphique

• Atelier : création du logo
• Atelier : création des autres éléments de la charte graphique
• Atelier : mise en page de la charte graphique
• Bonus : l’alphabet des formes ?
• Les applications (papeterie, enseignes)
• Atelier : Réaliser un Mock-Up

Découverte du webdesign

• Découverte du Webdesign
• Les métiers du Webdesign et ses différences avec le Print
• Comment fonctionne le Web
• Comment est construit un site ou une application et comment les mettre en ligne
• Comprendre une URL
• En parallèle du Design

UX Design : Présentation

• L’expérience utilisateur
• Le rôle de l’UX Designer

UX Design : Architecture de l’information

• Définition
• Travailler avec des grilles
• Les blocs qui constituent un site ou une application
• Les différents types de pages d’un site Web
• Les différents éléments d’interface
• Les bons sens de lecture
• La zone de flottaison
• La hiérarchie textuelle
• Réussir ses formulaires

UX Design : Le facteur humain

• Définition
• Le cerveau comme micro-processeur
• 6 lois liées à la théorie de la forme (Gestalt)
• Les neurones miroirs
• Les interférences
• Les limites cognitives
• Les 4 moteurs de séduction

UX Design : Adobe XD

• Ouvrir, importer, enregistrer, exporter, partager et fermer un document
• L’onglet Design et l’onglet Prototype
• La barre d’outils
• Le panneau des actifs
• Le panneau des plans de travail
• Les plans de travail
• Les repères Les grilles
• Les outils de dessin
• Le texte La fluidité responsive
• Les colonnes
• Les actifs
• Les composants
• Le prototype
• L’animation
• Responsiver sa conception

UX Design : Les 7 étapes clés

• La stratégie (vision du projet)
• Les personas
• La taxonomie
• L’user flow
• Le croquis
• Le wireframe / prototype
• Le test utilisateur
• L’anticipation

UX Design : Les principes de conception

• Le feedback (retour système)
• L’affordance
• Le mapping
• Le guidage
• La découverte progressive
• L’homogénéité
• L’anticipation de l’erreur
• La narration (le storytelling)

UI Design : Architecture d’interface

• Qu’est-ce que le Design d’interface
• Quel est le rôle du Designer d’interface
• Pourquoi la qualité graphique doit être au rendez-vous
• Les grandes tendances
• Le Skeuomorphisme
• Le Flat Design
• Les devices et les checkpoints
• Le responsive

UI Design : Typographie

• Définition
• Les différents formats
• Différence entre police et fonte
• Les 5 familles typographiques
• Les polices à éviter
• Les balises H
• Jouer avec les formes et les familles
• L’usage des textes
• Les sites indispensables

UI Design : Colorimétrie

• Définition
• Le bon choix de couleurs
• Le bon vocabulaire
• La règle des 60-30-10
• Adobe Color
• Les différentes combinaisons
• L’importance du contraste
• L’exploitation des couleurs
• Définition de toutes les couleurs

UI Design : Iconographie

• Définition
• Dénotation & connotation
• Le réalisme
• La géométrie
• Les signes
• Toucher au plus juste
• Hiérarchie des composants visuels
• Comment choisir la bonne image
• La règle de tiers
• Le nombre d’or
• Les bons outils
• Où faire sa veille graphique

Travaux pratiques

• Conceptions sur Adobe XD
• Wireframe d’une Newsletter
• Maquette d’une application
• Wireframe & Maquette d’une landing page

Illustration vectorielle et animations simples

• Comprendre les deux principaux modes de création et stockage des images numériques et vecteurs (eps, svg, ai)
• Création d’un objet stylisé 2D en utilisant les courbes de bézier
• Les aplats de couleur et les dégradés
• Création d’une composition équilibrée à partir d’éléments vectoriels et bitmap
• Les cinq propriétés de bas d’un calque
• Animations simples par image clés : position, rotation, échelle
• Trajectoires de mouvement
• Préparer un sujet pour un film de motion design

 Animation avancée

• Les accélérations et ralentis dans une animation
• Interpolation spatiale et temporelle. L’éditeur de graphiques
• Types d’images clés – lissage à l’approche / éloignement, maintien, déplacement dans le temps
• Le parentage et les animations composées. Calques et objets nuls
• Importation de documents Illustrator et Photoshop multi-calque
• Création et paramétrage d’un bras articulé. FK et IK
• Préparer un storyboard pour un film de motion design

 Animation de texte

• Introduction au motion design avec l’animation de texte
• Création de titres animés avec After Effects
• Application d’un effet sur un partie d’un calque de texte – le sélecteur de plage
• Utilisation du sélecteur de plage pour une animation lettre par lettre
• Effets aléatoires – le sélecteur de tremblement
• Rendu d’un découpage pour le film de motion design

 Calques de forme

• Les outils de conception graphique dans le logiciel : outils géométriques et plume
• Comprendre la différence entre les masques et les calques de forme
• Structure et hiérarchie d’un calque de forme
• Les modificateurs des calques de forme : fusionner, répétition, tremblements etc.
• Les tracés libres : créer une forme personnalisée en utilisant l’outil plume
• Réaliser un morphing en déplaçant les sommets un tracé vectoriel
• Passerelles entre les logiciels Adobe Illustrator et After Effects

 Espace 3D et rendus

• L’espace 3D dans Adobe After Effects. L’axe de la profondeur (Z)
• Déplacer et faire tourner un calque dans les trois dimensions
• Ajouter et animer des lumières et une caméra
• Comprendre la compression vidéo, types de compression (avec et sans pertes de qualité)
• Comprendre la différence entre un multiplexeur et un codec
• Effectuer le réglage des paramètres d’export dans After Effects et Media Encoder
• QCM : vérification des acquis de la semaine

Animations 3D avancées

• Placement des calques en vue de la création d’un décor en 3D
• Vues de perspective et vue orthogonales. Division de la fenêtre composition
• Paramètres avancés des lumières et surfaces. Projeter et accepter des ombres
• Paramètres avancés des caméras. Réduire la profondeur de champ
• Réaliser un effet de parallaxe en animant une caméra dans un décor 3D
• Travaux accompagnés : réalisation d’un film de motion design

 Suivi de mouvement et lancer de rayon

• Suivi de point, rotation et échelle d’un métrage filmé
• Reconstitution de la trajectoire d’une caméra et intégration d’un texte 3D dans un métrage
• Les moteurs de rendu raytracing et Cinema 4D dans After Effects
• Extrusion d’un texte et d’un calque de forme
• La passerelle entre les logiciels Cinema 4D et After Effects – le plugin Cineware
• Travaux accompagnés : réalisation d’un film de motion design

 Systèmes de particules

• Comprendre le fonctionnement d’un système de particules : Emetteur, particules, forces
• Les systèmes de particules intégrés au logiciel : Particle Systems II, Laboratoire de Particules
• Création d’un rideau de neige et d’une flamme avec le laboratoire de particules
• Le générateur de vagues et les ondes radio
• Travaux accompagnés : réalisation d’un film de motion design

 Les expressions

• Introduction aux expressions et à leur cas d’utilisation : comment programmer After Effects
• Comprendre les paramètres et les valeurs
• Écrire des expressions automatiques avec l’icône de sélection. Modifier une expression
• Expressions répétitives (loop) et expressions aléatoires (wiggle)
• Construire un système de contrôle pour une scène avec les expressions
• Extraire l’intensité sonore d’un fichier audio et l’utiliser pour animer d’autres calques
• Travaux accompagnés : réalisation d’un film de motion design

 Intégration d’After Effects dans un flux de travail

• La passerelle Dynamic Link entre Adobe Premiere Pro, After Effects et Media Encoder
• Installation et activation de scripts et plug-ins
• Préparer le déplacement d’un projet : le système de dépendances et de liens
• QCM : vérification des acquis de la semaine
• Rendu du film de motion design réalisé dans la semaine