Infographie Licence Pro MC TP n°3 – 02/11/2015 Création d’une bibliothèque de pictogrammes pour une application éducative compatible web/tablette

Infographie Licence Pro MC Plan du TP n°3 Compte rendu travaux rendus TP n°2 Notions abordées au cours du TP n°3 (Démonstrations / Explications) Consignes Mise en œuvre Questions relatives à l’évaluation

Infographie Licence Pro MC Compte rendu TP n°2 Points positifs : –Livraisons dans les délais (sauf 1 non livré) –Respect des contraintes techniques + CDC –Bonne utilisation des fichiers liés en majorité –Utilisation des masques en majorité –Engagement fourni

Infographie Licence Pro MC Compte rendu TP n°2 Points négatifs : –Généralités Fautes d’orthographe dans les textes, copier/coller non mis à jour  relire l’ensemble avant de livrer Organisation des fichiers bien souvent mise en place après l’import des fichiers liés (liaisons à mettre à jour)

Infographie Licence Pro MC Compte rendu TP n°2 Points négatifs : –Aspect « Technique » Format RVB / CMJN Organisation des calques pas toujours optimale –Regrouper les textes dans un seul groupe ne permet pas de les identifier rapidement –Exemple d’organisation possible : »Sous groupe nommé avec article correspondant »ou groupe texte + article correspondant

Infographie Licence Pro MC Compte rendu TP n°2 Points négatifs : –Aspect « Qualité graphique » Manque de créativité Problème de lisibilité des textes Détourages de qualité moyenne –Penser à placer un calque de couleur noir (ou en contraste) sous l’objet à détourer pour ne rien oublier

Infographie Licence Pro MC Notions abordées TP n°3 Sensibilisation aux contraintes liées à une multi- compatibilité web/tablette Organisation de son espace de travail Import d’objet dynamique vectoriel sous Photoshop Création, application et enregistrement de styles Création, utilisation et enregistrement de scripts d’automatisation Renommage par lots de fichiers

Infographie Licence Pro MC Contraintes compatibilité web / tablette 2 types de contraintes –Contraintes ergonomiques –Contraintes techniques

Infographie Licence Pro MC Contraintes compatibilité web / tablette Contraintes ergonomiques –Taille de l’écran (PC / tablette / mobile) –Interface tactile –Lisibilité –…

Infographie Licence Pro MC Contraintes compatibilité web / tablette Contraintes techniques –Technologies HTML5 –Responsive web design –Pas de swf sur iOS –Format spécifique des images HD Formats d’images à privilégier –png / jpeg / gif (non animé?) –svg –_2x (ou autre format HD)

Infographie Licence Pro MC Contraintes compatibilité web / tablette Particularités des écrans HD / Retina (non spécifique iOS) –2 fois plus de pixels Ex : l’écran d’un IPhone 5 de 1136x640 pixels contient en réalité 2272x1280 pixels. Pour optimiser un affichage HD, il faut donc enregistrer une image 2 fois plus grande et l’afficher à l’aide des media queries (sinon le device agrandira l’image pour l’afficher à 200% > image floue)

Infographie Licence Pro MC Contraintes compatibilité web / tablette Ressources utiles –Diagramme des fonctionnalités HTML 5 disponibles par navigateur –Infos sur les images HD (iOS) pour-les-ecrans-retina/ pour-les-ecrans-retina/ –Nouveautés Web –Stratégies de développement web mobile

Infographie Licence Pro MC Organisation de son espace de travail Identification –Fenêtres / panneaux utilisés le plus souvent –Fenêtres / panneaux rarement utilisés Mise en place –Affichage et positionnement des fenêtres / panneaux à conserver –Effacement des fenêtre / panneaux non utilisés Sauvegarde de son espace de travail

Infographie Licence Pro MC Organisation de son espace de travail

Infographie Licence Pro MC 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

Infographie Licence Pro MC Import d’objet dynamique vectoriel

Infographie Licence Pro MC Import d’objet dynamique vectoriel

Infographie Licence Pro MC Import d’objet dynamique vectoriel Ressources utiles – 5B e E126.htmlhttp://help.adobe.com/fr_FR/photoshop/cs/using/WS41A 5B e E126.html – dynamiques-avec-lien-666.htmlhttp:// dynamiques-avec-lien-666.html

Infographie Licence Pro MC Création et application de styles Styles Photoshop –Définition : effets appliqués dans les options de fusion d’un calque –Effets non destructifs s'appliquant à un calque (et pas à toute l'image) –Possibilité de les modifier et/ou désactiver à tout moment –Styles prédéfinis / créés / téléchargés

Infographie Licence Pro MC Création et application de styles Styles prédéfinis

Infographie Licence Pro MC Création et application de styles Création (démo) –Sélection du calque sur lequel est appliqué le style à mémoriser –Fenêtre Styles > Nouveau Style –Saisie du nom du style et sélection des options

Infographie Licence Pro MC Création et application de styles Utilisation (démo) –Sélection du calque sur lequel doit être appliqué le style –Fenêtre Styles > Clic sur la vignette du style à appliquer

Infographie Licence Pro MC Création et application de styles Enregistrement (démo) –Fenêtre Styles > Menu contextuel > Enregistrer les styles –Saisie du nom et de l’emplacement du fichier.asl Attention ! – par défaut l’ensemble des styles présents dans la fenêtre Styles est sauvegardé  supprimer les styles non utiles avant de sauvegarder le fichier.asl

Infographie Licence Pro MC Création et application de styles Chargement (démo) –Permet d’importer un style créé initialement ou téléchargé sur Internet –Procédure Fenêtre Styles Menu contextuel de la fenêtre > Charger les styles Sélection du fichier.asl à utiliser

Infographie Licence Pro MC Création et application de styles Ressources utiles – 34e1c4b69f30ea53e ab64-789ba.htmlhttp://help.adobe.com/fr_FR/photoshop/cs/using/WSfd12 34e1c4b69f30ea53e ab64-789ba.html – de-calque-de-photoshophttp:// de-calque-de-photoshop – styles-comprehensive-guide/ (en anglais) styles-comprehensive-guide/

Infographie Licence Pro MC Scripts d’automatisation Définition permet d'enregistrer une série d'évènements pour les reproduire à volonté et à l'identique Peut être utilisé… –soit successivement sur le même fichier, –soit sur un dossier de fichiers (traitement par lots)

Infographie Licence Pro MC Scripts d’automatisation Exemples d’utilisation –Réduction / agrandissement –Recadrage –Ajout d’élément (copyright, cadre, …) –Correction d’exposition (photo) –Recolorisation –…

Infographie Licence Pro MC Scripts prédéfinis Scripts d’automatisation

Infographie Licence Pro MC Utilisation –Sélection de la ou les actions à réaliser ou sélection de l’ensemble d’actions à réaliser –Clic sur le bouton « Exécuter » –Pour plus d’infos sur les options de lecture : cripts.pdf cripts.pdf Scripts d’automatisation

Infographie Licence Pro MC Création (démo) –Procédure : Fenêtre Actions Création d’un nouvel ensemble (dossier) permettant de différencier le script créé de ceux prédéfinis Création du nouveau script et début de l’enregistrement A partir de ce moment chaque action est mémorisée Arrêt de l’enregistrement une fois la ou les manipulations effectuées Possibilité d’affecter un raccourci clavier permettant de lancer le script Scripts d’automatisation

Infographie Licence Pro MC Enregistrement (démo) –Favorise le travail collaboratif –Permet de stocker ses propres scripts –Procédure : Fenêtre Actions Sélectionner un ensemble / dossier de scripts Menu contextuel de la fenêtre > Enregistrer les actions Saisie du nom et de l’emplacement du fichier.atn Scripts d’automatisation

Infographie Licence Pro MC Chargement (démo) –Permet d’importer un script créé initialement ou téléchargé sur Internet –Procédure Fenêtre Actions Menu contextuel de la fenêtre > Charger les actions Sélection du fichier.atn à utiliser Scripts d’automatisation

Infographie Licence Pro MC Scripts d’automatisation Ressources utiles – sous-photoshophttp://fr.openclassrooms.com/informatique/cours/les-scripts- sous-photoshop – – – sweety.net/Tutoriaux/Tutos_Photoshop/Scripts/scripts.htmhttp:// sweety.net/Tutoriaux/Tutos_Photoshop/Scripts/scripts.htm – creer-un-script-photoshop/ creer-un-script-photoshop/

Infographie Licence Pro MC Scripts d’automatisation Pour aller plus loin : –Traitement par lot de fichiers : permet d’appliquer automatiquement une série d’actions (.atn) à plusieurs fichiers (plus le nombre de fichiers est important, plus le gain de temps l’est aussi !) –Scripts (JavaScript / VB Script etc…) : Lignes de code détaillant les opérations à exécuter dans Photoshop La plupart des actions réalisées dans Photoshop ont leur propre équivalent de script Exécution possible du script sur un ou plusieurs fichiers Si vous souhaitez tester : voir TD n°3 LP MMITD n°3

Infographie Licence Pro MC Renommage par lots de fichiers Outils permettant de renommer rapidement plusieurs fichiers à la fois –Exemples : Rechercher une chaîne de caractères dans le nom d’un fichier et la remplacer par une autre ou l'effacer Changer des lettres minuscules en majuscules et vice-versa Ajouter une séquence numérique (001, 002, ) Ajouter la date et l'heure (actuelle ou prise du fichier ou dossier) Changer la longueur du nom … –Logiciels gratuits : XnView, Renomme, AntRenamer, …XnView AntRenamer

Infographie Licence Pro MC Consigne TP n°3 Objectif : créer une bibliothèque de pictogrammes rapidement déclinables en styles et tailles Fichier de consigne Attention au respect des contraintes !!!

Infographie Licence Pro MC Questions ?

Infographie Licence Pro MC A vous !

Infographie Licence Pro MC Organisation –Date : le 14/12/2015 de 14h à 17h –Durée : 3h –Travail strictement individuel –Réutilisation des fonctionnalités abordées –Livraison des éléments à la fin de la séance –Notation selon les critères définis précédemment + réelle utilisation des fonctionnalités demandées Questions relatives à l’évaluation

Infographie Licence Pro MC Explications complémentaires liées au fonctionnalités utilisées au cours des TP ? Autres questions ? Questions relatives à l’évaluation Si nécessaire, me contacter par mail :