Partie 1 : Présentation et rappels TP n°1 – 09/10/2015 Partie 1 : Présentation et rappels

Expérience Professionnelle : Présentation Formation : DUT SRC ex MMI (promo 2002-2004) Certificat Gestion de Projet (Septembre 2013) Expérience Professionnelle : Depuis 2004 : intégratrice multimédia puis conceptrice e-Learning (Netopen SA) Rôles : Analyse et conception pédagogique Développement de projets multimédia Gestion de projet

Présentation Et vous ?

« Le temps c’est de l’argent » Objectifs du cours « Le temps c’est de l’argent » Optimiser votre travail et vous rendre plus efficace dans vos travaux en Infographie

Travaux basés sur des cas concrets et réels Comment ? Travaux basés sur des cas concrets et réels Astuces et conseils d’utilisation des logiciels Adobe Photoshop et Adobe Illustrator Conseils d’organisation Sensibilisation aux contraintes professionnelles

Programme (prévisionnel) TP n°1 Création vectorielle, outil Plume, outils de transformation et Pathfinder, objets dynamiques vectoriels TP n°2 Brush, symboles, sélections flottantes, détourage, masques et fichiers liés TP n°3 Images HD, styles, objets dynamiques vectoriels, et scripts d’automatisation TP n°4 Evaluation des compétences acquises http://www.llemaitre.fr

Présentation des travaux à réaliser Mise en œuvre Plan du TP n°1 Rappels succincts : Les modes colorimétriques Les formats d’images Consignes générales Présentation des travaux à réaliser Mise en œuvre

Rappels (1/3) : les modes colorimétriques RVB Créations destinées à être affichées sur un écran (Web) Résolution standard : 72-96 ppi CMJN Créations destinées à être imprimées (Print) Résolution standard : 150-300 ppi

Couleurs indexées Niveaux de gris Lab Rappels (1/3) : les modes colorimétriques Couleurs indexées Palette de 256 couleurs spécifiques à l’image Niveaux de gris Créations en Noir et Blanc Lab Mode de couleur permettant de manipuler séparément la luminance (clarté) et la chrominance (couleur)

Rappels (2/3) : les formats d’image BMP Format par défaut Windows Non compressé (fichiers lourds) PS/EPS Format hybride bitmap/vectoriel Réservé à l'impression Fichiers très lourds

Rappels (2/3) : les formats d’image JPEG / JPG Excellente compression (réglable) mais compression destructrice Spécialement adapté aux photographies ou images avec dégradés Ne permet pas la transparence

Rappels (2/3) : les formats d’image GIF Permet la transparence (crénelage des contours) Possibilité d’animation (attention compatibilité nouveaux navigateurs) Palette limitée à 256 couleurs spécifiques à l’image A éviter en cas d’image avec dégradé

Rappels (2/3) : les formats d’image PNG Permet la transparence Permet ou non de choisir une palette des couleurs Format non destructeur de l’image Poids des images parfois supérieur au JPEG Transparence des images non supportée par les anciens navigateurs (Internet Explorer 6)

Rappels (2/3) : les formats d’image PNG 8 Couleurs indexées (palette de 256 couleurs) PNG 24 Couleurs vraies Gestion de la transparence (sans crénelage) Attention : PNG source multi-calques non compatible Web !

Rappels (2/3) : les formats d’image SVG Format vectoriel qui peut être animé (attention compatibilité anciens navigateurs) Basé sur XML Plus d’infos sur ce format : http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html @2x / _2x Destinée aux écrans HD / Retina Images aux dimensions « double » Attention au poids ! Plus d’infos : http://wdfriday.com/blog/2012/06/adapter-vos-sites-pour-les-ecrans-retina/

Rappels (3/3) : consignes générales Toujours respecter les règles suivantes ! Nom des fichiers / dossiers : sans caractères spéciaux, espaces ou caractères accentués explicites (travail collaboratif) facilitant les tris Organisation au sein des fichiers sources favorisant le travail collaboratif (nom des calques / dossiers de calques) Attention au poids et à la taille des fichiers utilisés pour le Web Sauvegardes régulières Suivi de son travail …

TP n°1 Partie 2 : Création de la face avant de la jaquette du jeu vidéo Krib Le retour

Utilisation de formes vectorielles simples Notions abordées TP n°1 Utilisation de formes vectorielles simples Utilisation de l’outil Plume Utilisation des outils de transformation et du Pathfinder Importation d’objet dynamique vectoriel Export PDF

Utilisation des formes vectorielles simples Créer un personnage à l’aide de formes vectorielles simples sous Illustrator

Utilisation de l’outil Plume Sert à tracer des courbes vectorielles aussi appelées courbes de Bézier Utilisé aussi pour faire des sélections précises, notamment dans Photoshop (objet du prochain TP)

Utilisation de l’outil Plume Un tracé réalisé avec l’outil Plume est une suite de points d’ancrage. Points d’ancrage : points par lesquels passe le tracé A noter : les formes vectorielles simples sont des tracés vectoriels du même type et peuvent donc être modifiés de la même façon que vos propres tracés.

Utilisation de l’outil Plume Création d’un 1er tracé : Succession de clics : création d’une ligne brisée (suite de segments de droites)

Utilisation de l’outil Plume Création d’un tracé complexe : Clic et glissé sans relâché le clic : création d’un point d’inflexion et définition de la ligne directrice du point (de manière homothétique) Clic et glissé sans relâché le clic puis ALT : permet de définir une ligne directrice différente vers le prochain point

Utilisation de l’outil Plume Modification d’un tracé : Clic + ALT sur un point existant : conversion du point d’ancrage (ex: une courbe devient une ligne brisée) Clic + ALT sur une poignée : permet de redéfinir la ligne directrice Autres possibilités : ajout / suppression de point

Utilisation de l’outil Plume Démo

Utilisation de l’outil Plume Plus d’infos : https://helpx.adobe.com/fr/illustrator/using/drawing-pen-pencil-or-flare.html https://openclassrooms.com/courses/maitriser-l-outil-plume-et-les-traces https://helpx.adobe.com/fr/illustrator/using/default-keyboard-shortcuts.html#WS714a382cdf7d304e7e07d0100196cbc5f-6420a (raccourcis clavier)

Utilisation des outils de transformation Mise à l'échelle Agrandissement ou réduction sur le plan vertical, horizontal, ou les deux Déformation Inclinaison d'un objet par rapport à l'axe vertical ou horizontal, ou selon un angle défini par rapport à un axe spécifié

Utilisation des outils de transformation Déplacement Glissement d’un objet sur l'axe vertical ou horizontal ou les deux Rotation Faire pivoter un objet autour d'un point défini Réflexion ou symétrie Création du symétrique d'un objet par rapport à un axe invisible que vous pouvez spécifier

Utilisation des outils de transformation Option « Copie » Permet d’appliquer la transformation à un « duplicata » de l’objet sélectionné

Utilisation des outils de transformation Plus d’infos : https://helpx.adobe.com/fr/illustrator/using/transforming-objects.html http://www.psill.net/7_transformations.html

Utilisation du Pathfinder Réunion Réunis les 2 formes pour n'en former plus qu’une

Utilisation du Pathfinder Soustraction Ne conserve que la forme en arrière-plan et masque les parties recouvertes par celle du premier plan

Utilisation du Pathfinder Intersection Ne conserve que la zone d'intersection entre les deux formes

Utilisation du Pathfinder Exclusion Ne conserve pas la zone d'intersection entre les deux formes

Utilisation du Pathfinder Division Sépare les formes par rapport à leurs intersections

Utilisation du Pathfinder Pochoir Supprime les parties recouvertes et tous les contours

Utilisation du Pathfinder Fusion Supprime les parties recouvertes, tous les contours et réunis les formes superposées de mêmes couleurs

Utilisation du Pathfinder Découpe Sépare les formes et supprime toutes les parties en dehors des limites de la forme du premier plan. Supprime également les contours

Utilisation du Pathfinder Contour Sépare les formes et ne conserve que les contours

Utilisation du Pathfinder Soustraction Ne conserve que la forme au premier plan et masque les parties au contact avec l'arrière-plan

Utilisation du Pathfinder Plus d’infos : https://helpx.adobe.com/fr/illustrator/using/combining-objects.html http://www.helpclic.net/tutoriaux/tutoriel-478-Illustrator-Utiliser-les-outils-de-la-fenetre-pathfinder.html

Import d’objet dynamique vectoriel Définition élément créé dans Illustrator, importé en conservant un lien direct vers le fichier source Avantages Rapidité de mise à jour Accès direct au fichier ouvert dans Illustrator par un double clic sur le calque

Import d’objet dynamique vectoriel

Import d’objet dynamique vectoriel

Import d’objet dynamique vectoriel Plus d’infos : http://help.adobe.com/fr_FR/photoshop/cs/using/WS41A5B796-6846-4e95-8459-95243441E126.html http://www.wisibility.com/tutoriels/tutoriel-les-objets-dynamiques-avec-lien-666.html

Attention aux contraintes !!! Consigne TP n°1 Fichier de consigne Attention aux contraintes !!! Consulter les liens proposés dans la présentation

Questions ?

A vous !