TD n°2 – 19/10/2015 Création d’une bibliothèque de pictogrammes pour une application éducative compatible web/tablette

Compte rendu travaux rendus TD n°1 Plan du TD n°2 Compte rendu travaux rendus TD n°1 Notions abordées au cours du TD n°2 (Démonstrations / Explications) Consignes Mise en œuvre

Compte rendu TD n°1 Moyenne : 10,5 / 20 Note + : 14 / 20 Note - : 7 / 20 Détail des notes individuelles au cours du TD (notes fournies à titre d’information, non prises en compte dans la note finale pour cette matière)

Compte rendu TD n°1 Critères de notation : Mise en page globale / Qualité graphique /10 Qualité générale /4 Créativité /2 Complexité de mise en œuvre /2 Qualité des finitions /2 Détourage /5 Qualité des détourages /3 Utilisation des masques /2 Respect des contraintes et livraison /5 Respect des contraintes du Cahier des Charges /2 Noms des fichiers explicites sans espaces ni caractères spéciaux /1 Organisation des calques au sein des fichiers sources /1 Livraison complète / 1

Points positifs : Compte rendu TD n°1 Livraisons dans les délais (sauf 1 non livré) Mail de livraison correct Bonne utilisation des fichiers liés en majorité

Points négatifs : Compte rendu TD n°1 Aspect « Technique » Manque d’organisation dans les fichiers livrés et au sein des fichiers sources Essayer de se mettre à la place d’une personne qui n’a jamais vu le ou les fichiers, comment fait-il pour s’y retrouver ? Noms de fichiers pas toujours explicites Idéal = combinaison numérotation + description (exemple : art01_description) Livraisons pas toujours complètes, éléments manquants, ou contraintes non respectées Penser à faire une check-list du fichier de consigne avant de faire le zip

Points négatifs : Compte rendu TD n°1 Aspect « Qualité graphique » Manque de créativité Travail qui favorise souvent la facilité technique de mise en œuvre plutôt que la qualité graphique Utilisation minimum des masques L’utilisation des masques devrait être systématique pour tous les détourages (facilité de mise à jour) Détourages de qualité moyenne Penser à placer un calque de couleur noir (ou en contraste) sous l’objet à détourer pour ne rien oublier

Points négatifs : Compte rendu TD n°1 Généralités Fautes d’orthographe dans les textes, copier/coller non mis à jour, Lorem Ipsum Organisation des fichiers bien souvent mise en place après l’import des fichiers liés (liaisons à mettre à jour) Polices particulières non livrées

Organisation de son espace de travail Notions abordées TD n°2 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

Contraintes compatibilité web / tablette 2 types de contraintes Contraintes ergonomiques Contraintes techniques

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

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)

Contraintes compatibilité web / tablette Particularités des écrans HD / Rétina (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)

Contraintes compatibilité web / tablette Ressources utiles Diagramme des fonctionnalités HTML 5 disponibles par navigateur http://html5readiness.com/ Infos sur les images HD (iOS) http://wdfriday.com/blog/2012/06/adapter-vos-sites-pour-les-ecrans-retina/ Nouveautés Web http://www.alsacreations.com/ Stratégies de développement web mobile http://www.octaveoctave.com/mag

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

Organisation de son espace de travail

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 Ressources utiles 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

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

Création et application de styles Styles prédéfinis

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

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

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

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

Création et application de styles Ressources utiles http://help.adobe.com/fr_FR/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-789ba.html http://www.wks.fr/etape/apprendre-a-utiliser-les-styles-de-calque-de-photoshop http://designinstruct.com/tools-basics/photoshop-layer-styles-comprehensive-guide/ (en anglais)

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, objet du prochain TD)

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

Scripts d’automatisation Scripts prédéfinis

Scripts d’automatisation 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 : http://edisam.free.fr/cours/photoshop/55_scripts/scripts.pdf

Scripts d’automatisation 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 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 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 Ressources utiles http://fr.openclassrooms.com/informatique/cours/les-scripts-sous-photoshop http://www.photoshoplus.fr/utiliser-scripts/ http://www.diapovision.com/formation/pshop/scripts.htm http://www.chez-sweety.net/Tutoriaux/Tutos_Photoshop/Scripts/scripts.htm http://www.votreassistante.net/blog/pourquoi-et-comment-creer-un-script-photoshop/

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, 003 ...) Ajouter la date et l'heure (actuelle ou prise du fichier ou dossier) Changer la longueur du nom … Logiciels gratuits : XnView , Renomme, AntRenamer, …

Attention au respect des contraintes !!! Consigne TD n°2 Objectif : créer une bibliothèque de pictogrammes rapidement déclinables en styles et tailles Fichier de consigne Attention au respect des contraintes !!!

Questions ?

A vous !