Infographie Licence Pro MMI 2015-2016 TD n°1 – 09/10/2015 Partie 1 : Présentation et rappels.

Présentation au sujet: "Infographie Licence Pro MMI 2015-2016 TD n°1 – 09/10/2015 Partie 1 : Présentation et rappels."— Transcription de la présentation:

1 Infographie Licence Pro MMI 2015-2016 TD n°1 – 09/10/2015 Partie 1 : Présentation et rappels

2 Infographie Licence Pro MMI 2015-2016 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

3 Infographie Licence Pro MMI 2015-2016 Présentation Et vous ?

4 Infographie Licence Pro MMI 2015-2016 « Le temps c’est de l’argent » Optimiser votre travail et vous rendre plus efficace dans vos travaux en Infographie Objectifs du cours

5 Infographie Licence Pro MMI 2015-2016 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 Comment ?

6 Infographie Licence Pro MMI 2015-2016 TD n°1 Brush, symboles, sélections flottantes, détourage, masques et fichiers liés TD n°2 Images HD, styles, objets dynamiques vectoriels, et scripts d’automatisation TD n°3 Traitements par lots et scripts (JavaScript/Visual basic) TD n°4 Evaluation des compétences acquises http://www.llemaitre.fr Programme (prévisionnel)

7 Infographie Licence Pro MMI 2015-2016 Rappels succincts : –Les modes colorimétriques –Les formats d’images –Consignes générales Présentation des travaux à réaliser Mise en œuvre Plan du TD n°1

8 Infographie Licence Pro MMI 2015-2016 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 Rappels (1/3) : les modes colorimétriques

9 Infographie Licence Pro MMI 2015-2016 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 (1/3) : les modes colorimétriques

10 Infographie Licence Pro MMI 2015-2016 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

11 Infographie Licence Pro MMI 2015-2016 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

12 Infographie Licence Pro MMI 2015-2016 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

13 Infographie Licence Pro MMI 2015-2016 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

14 Infographie Licence Pro MMI 2015-2016 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

15 Infographie Licence Pro MMI 2015-2016 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 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/ http://wdfriday.com/blog/2012/06/adapter-vos-sites-pour-les-ecrans-retina/ Rappels (2/3) : les formats d’image

16 Infographie Licence Pro MMI 2015-2016 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 –… Rappels (3/3) : consignes générales

17 Infographie Licence Pro MMI 2015-2016 TD n°1 Partie 2 : Création de la page centrale du catalogue de Noël de la société Botaland

18 Infographie Licence Pro MMI 2015-2016 Utilisation des brush Photoshop Création / utilisation des symboles Illustrator Détourage / sélection Photoshop Utilisation des masques Import de fichiers liés sous Illustrator Export PDF Illustrator Notions abordées TD n°1

19 Infographie Licence Pro MMI 2015-2016 Brush = brosse / forme de pinceau Tutoriel création : http://www.photoshop- school.org/tutoriaux/forme-predefinie-brush Téléchargement libre http://www.brush-photoshop.fr/ Brush Photoshop

20 Infographie Licence Pro MMI 2015-2016 Exemples –Silhouettes de personnages –Formes particulières gouttes de sang, notes de musiques, plumes, flèches, circuits électroniques, … –Eléments de décoration dessins d’immeubles, étoiles, ornements, vagues, explosions, … Brush Photoshop

21 Infographie Licence Pro MMI 2015-2016 Brush Photoshop - Chargement

22 Infographie Licence Pro MMI 2015-2016 Symbole = élément vectoriel réutilisable dans vos différents documents.ai Infos définition / création / modification : http://help.adobe.com/fr_FR/illustrator/cs/usi ng/WS714a382cdf7d304e7e07d0100196cbc5f -6221a.html# Utilisation placage 3D Symboles Illustrator

23 Infographie Licence Pro MMI 2015-2016 Symboles Illustrator - Chargement

24 Infographie Licence Pro MMI 2015-2016 Les modes : –Destructif (penser à dupliquer le calque original) –Non destructif (masque / retouches possibles) Les outils : –Sélections géométriques –Lasso –Sélection rapide –Baguette magique –Plume –Masques de fusion –… Détourage Photoshop

25 Infographie Licence Pro MMI 2015-2016 Les paramétrages : –Contours progressifs –Lissage –Dilater / Contracter –Améliorer le contour Détourage Photoshop

26 Infographie Licence Pro MMI 2015-2016 Sélections flottantes / géométriques –Rectangle / Ellipse –Barre d’ESPACE pour déplacer la sélection tant que la souris est enfoncée –Touche SHIFT enfoncée pour créer un carré ou un cercle parfait Détourage Photoshop

27 Infographie Licence Pro MMI 2015-2016 Addition / Soustraction (barre d’options ou raccourci clavier) –Nouvelle sélection : efface automatiquement la sélection précédente –Ajouter : permet de créer une nouvelle sélection s’ajoutant à la précédente (SHIFT) –Soustraire : permet d’effacer une portion de la précédente sélection (ALT) –Intersection : ne conserve que l’intersection des deux sélections (ALT + SHIFT) Détourage Photoshop

28 Infographie Licence Pro MMI 2015-2016 Mémoriser une sélection flottante –Création de la sélection –Menu Sélection / Mémoriser la sélection –Nommer la sélection –La sélection est mémorisée en couche alpha visible dans la palette Couches Récupérer une sélection flottante –Menu Sélection / Récupérer une sélection –Ou CTRL + CLIC sur la vignette de la couche alpha Détourage Photoshop

29 Infographie Licence Pro MMI 2015-2016 Lasso –Cliquer tirer pour entourer la zone à sélectionner –Touche ALT pour créer des segments de droite Lasso polygonal –Clics successifs pour entourer la zone à détourer –Touche SUPPR pour effacer le dernier segment –Touche ECHAP pour annuler le détourage Détourage Photoshop

30 Infographie Licence Pro MMI 2015-2016 Sélection rapide –Cliquer tirer à l’intérieur de l’image ou de la photo pour créer la sélection flottante –Choix de la taille de l’outil –Options d’addition / soustraction Baguette magique –Permet de sélectionner des zones de couleur identique Détourage Photoshop

31 Infographie Licence Pro MMI 2015-2016 Gomme magique –Permet de sélectionner une zone de couleur et la rendre transparente en un clic (= Baguette magique + SUPPR) Gomme d’arrière plan –Permet de rendre une zone, dont la couleur est celle sélectionnée comme couleur d’arrière plan, transparente Détourage Photoshop

32 Infographie Licence Pro MMI 2015-2016 Plume (détourage vectoriel précis et net) –Dans la barre d’options : option Tracé / Exclure (cochée par défaut) –Création du tracé http://fr.openclassrooms.com/informatique/cours /maitriser-l-outil-plume-et-les-traces http://fr.openclassrooms.com/informatique/cours /maitriser-l-outil-plume-et-les-traces Détourage Photoshop

33 Infographie Licence Pro MMI 2015-2016 Plume (suite) –Dans la palette Tracés, Création d’une nouvelle vignette Vérifier que l’objet à conserver est blanc, et que le reste de la vignette est gris (blanc = affiché / gris = masqué) Renommer le tracé –Récupération de la sélection et création d’un masque Détourage Photoshop

34 Infographie Licence Pro MMI 2015-2016 Masque de fusion (détourage non destructif) –À partir de n’importe quel type de sélection –Lorsque la sélection est active, ajout d’un masque en cliquant sur l’icône accessible en bas de la palette Calques –Principe : Partie blanche = partie visible Partie noire = partie masquée Zones grises = zones avec transparence Détourage Photoshop

35 Infographie Licence Pro MMI 2015-2016 Correction d’un masque de fusion –Attention, vérifier que le masque est bien sélectionné (contour autour du masque dans la palette Calques) –Utilisation de l’outil Pinceau/Crayon (ou autre) pour peindre sur le masque : Peindre en noir pour effacer Peindre en blanc pour restaurer l’image originale Détourage Photoshop

36 Infographie Licence Pro MMI 2015-2016 Import d’illustrations indépendantes au sein du.ai Fichiers stockés dans un dossier particulier (attention conventions de nommage) Conservation d’un lien vers l’image source : –en cas de mise à jour de l’image, à l’ouverture du fichier.ai, Illustrator propose d’effectuer automatiquement la mise à jour Plus d’infos : http://help.adobe.com/fr_FR/illustrator/cs/using/W S714a382cdf7d304e7e07d0100196cbc5f-657aa.html http://help.adobe.com/fr_FR/illustrator/cs/using/W S714a382cdf7d304e7e07d0100196cbc5f-657aa.html Fichiers liés Illustrator (import)

37 Infographie Licence Pro MMI 2015-2016 Fichier de consigne Attention aux contraintes !!! Consulter les liens proposés dans la présentation Lien permettant le téléchargement d’images gratuites et libres de droit (jusqu'à 10Mo de téléchargement gratuit par jour) : http://fr.photl.com http://fr.photl.com Consigne TD n°1

38 Infographie Licence Pro MMI 2015-2016 Questions ?

39 Infographie Licence Pro MMI 2015-2016 A vous !