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

Présentation au sujet: "Infographie Licence Pro MC 2015-2016 TP n°3 – 02/11/2015 Création d’une bibliothèque de pictogrammes pour une application éducative compatible web/tablette."— Transcription de la présentation:

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

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

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

4 Infographie Licence Pro MC 2015-2016 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)

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

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

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

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

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

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

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

12 Infographie Licence Pro MC 2015-2016 Contraintes compatibilité web / tablette Ressources utiles –Diagramme des fonctionnalités HTML 5 disponibles par navigateur http://html5readiness.com/http://html5readiness.com/ –Infos sur les images HD (iOS) 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/ –Nouveautés Web http://www.alsacreations.com/http://www.alsacreations.com/ –Stratégies de développement web mobile http://www.octaveoctave.com/mag http://www.octaveoctave.com/mag

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

14 Infographie Licence Pro MC 2015-2016 Organisation de son espace de travail

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

16 Infographie Licence Pro MC 2015-2016 Import d’objet dynamique vectoriel

17 Infographie Licence Pro MC 2015-2016 Import d’objet dynamique vectoriel

18 Infographie Licence Pro MC 2015-2016 Import d’objet dynamique vectoriel Ressources utiles –http://help.adobe.com/fr_FR/photoshop/cs/using/WS41A 5B796-6846-4e95-8459-95243441E126.htmlhttp://help.adobe.com/fr_FR/photoshop/cs/using/WS41A 5B796-6846-4e95-8459-95243441E126.html –http://www.wisibility.com/tutoriels/tutoriel-les-objets- dynamiques-avec-lien-666.htmlhttp://www.wisibility.com/tutoriels/tutoriel-les-objets- dynamiques-avec-lien-666.html

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

20 Infographie Licence Pro MC 2015-2016 Création et application de styles Styles prédéfinis

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

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

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

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

25 Infographie Licence Pro MC 2015-2016 Création et application de styles Ressources utiles –http://help.adobe.com/fr_FR/photoshop/cs/using/WSfd12 34e1c4b69f30ea53e41001031ab64-789ba.htmlhttp://help.adobe.com/fr_FR/photoshop/cs/using/WSfd12 34e1c4b69f30ea53e41001031ab64-789ba.html –http://www.wks.fr/etape/apprendre-a-utiliser-les-styles- de-calque-de-photoshophttp://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)http://designinstruct.com/tools-basics/photoshop-layer- styles-comprehensive-guide/

26 Infographie Licence Pro MC 2015-2016 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)

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

28 Infographie Licence Pro MC 2015-2016 Scripts prédéfinis Scripts d’automatisation

29 Infographie Licence Pro MC 2015-2016 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/s cripts.pdf http://edisam.free.fr/cours/photoshop/55_scripts/s cripts.pdf Scripts d’automatisation

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

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

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

33 Infographie Licence Pro MC 2015-2016 Scripts d’automatisation Ressources utiles –http://fr.openclassrooms.com/informatique/cours/les-scripts- sous-photoshophttp://fr.openclassrooms.com/informatique/cours/les-scripts- sous-photoshop –http://www.photoshoplus.fr/utiliser-scripts/http://www.photoshoplus.fr/utiliser-scripts/ –http://www.diapovision.com/formation/pshop/scripts.htmhttp://www.diapovision.com/formation/pshop/scripts.htm –http://www.chez- sweety.net/Tutoriaux/Tutos_Photoshop/Scripts/scripts.htmhttp://www.chez- sweety.net/Tutoriaux/Tutos_Photoshop/Scripts/scripts.htm –http://www.votreassistante.net/blog/pourquoi-et-comment- creer-un-script-photoshop/http://www.votreassistante.net/blog/pourquoi-et-comment- creer-un-script-photoshop/

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

35 Infographie Licence Pro MC 2015-2016 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, …XnView AntRenamer

36 Infographie Licence Pro MC 2015-2016 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 !!!

37 Infographie Licence Pro MC 2015-2016 Questions ?

38 Infographie Licence Pro MC 2015-2016 A vous !

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

40 Infographie Licence Pro MC 2015-2016 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 : formation.llemaitre@gmail.com formation.llemaitre@gmail.com