Prsentation Courtin maxime GI 05 Automne 2004 Prsentation

Présentation Courtin maxime – GI 05 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Plan : - Rappel Photoshop - Prise en main d‘Image. Ready - environnement - enregistrement (. html, . psd) - optimisation image - animation - Raccourcis utiles Courtin Maxime – GI 05 2 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Utilités du logiciel : - Création de page HTML simple (non dynamique) - Compromis entre Photoshop et Dreamweaver Notion Présentées : - Optimisation des images - Création de carte Images - Création de tranches - Transformation par la souris - Création d’animations Courtin Maxime – GI 05 3 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils -Rappel Photoshop - notions de calque - Sélections - filtres Courtin Maxime – GI 05 4 /17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Présentation de l’environnement : Optimisations Couleurs Transformations Historique Calque Interactions animations Courtin Maxime – GI 05 5 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Création/Sélection des carte-images Création/Sélection des tranches Masquer ou non les carte-images Masquer ou non les tranches Visualisation sous Internet Explorer Courtin Maxime – GI 05 6 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Optimisation des images pour le Web: Rappel : - 2 critères : poids et esthétisme dépend de la taille, du nombre de couleur, de la résolution. . . - différence entre GIF/ JPEG: JPEG (compression avec perte d’informations , affichage progressif, pas transparence, Photographies) GIF (compression sans pertes, affichage progressif et transparence, Illustrations, logos, typographies, objets aux contours nets) Courtin Maxime – GI 05 7 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Visualisation des différentes optimisations Réglages différentes optimisations Courtin Maxime – GI 05 8 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Enregistrement du travail effectué Deux cas intéressants : - Sous format HTML : permet d’avoir des pages web directement Fichier -> enregistrer une copie optimisée - Sous format PSD permet de pouvoir retravailler dessus ensuite. Fichier -> enregistrer sous Courtin Maxime – GI 05 9 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Création d’une tranche Outils Zone réactive Nom de la carte image Url Option d’ouverture Texte décrivant la zone réactive Courtin Maxime – GI 05 10 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Création d’une tranche Les tranches sont des zones rectangulaires sur lesquelles on peut : - Définir une optimisation - Ajouter un comportement (souris ou lien) Avantages : - Liberté de création : Conception de la page web avec les outils graphiques d’Image Ready puis exportation des tranches dans un tableau d’éditeur html (dreamweaver) - Optimisation du poids : On définit une optimisation appropriée à chaque zone et on n’exporte pas les zones de fond (refait sur l’éditeur) - Mise à jour de la page facilitée : il suffit de réexporter la zone de texte modifiée et non l’écran entier. Courtin Maxime – GI 05 11 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Création d’une tranche outils Tranche 1 Tranche 2 Tranche 3 Les tranches 2 et 3 peuvent être converties en tranches utilisateurs (possibilité de comportement) gâce au menu Tranche – convertir en tranche utilisateur Nom de la carte image Url Option d’ouverture Courtin Maxime – GI 05 12 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Ajouter un comportement, une animation Au préalable, il faut avoir créé une carte image ou des tranches, puis : Bouton droits + cliquer sur : ajouter une transformation par souris Aller dans l’onglet animations et cliquer sur l’icône de duplication Courtin Maxime – GI 05 13 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Durée du comportement Autant de duplication que d’états Courtin Maxime – GI 05 prévisualisation En double cliquant sur la transformation, nous choisissons l’événement 14 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils Les comportements se créent facilement : - il faut dans un premier temps dupliquer les calques sur lesquels nous voulons effectuer des changements. - effectuer les modifications sur la copie (applications de filtres, changement de couleurs…) - puis afficher tel ou tel calque à tel ou tel moment du comportement -> ex : texte qui bouge, bouton qui clignote Utile pour les projets, par exemple pour changer de couleur lorsque nous passons une zone cliquable… Courtin Maxime – GI 05 15 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils - Pensez à mettre un fond transparent Les Raccourcis utiles: - Ctrl + T : Proportion de l’image (Shift, garde les bonne proportions) - Ctrl + Alt + p : Visualisation sur Internet Explorer - Ctrl + s Courtin Maxime – GI 05 : Enregistrer 16 / 17 Automne 2004

Présentation | Rappel Photoshop | Image. Ready | Utils MERCI Courtin Maxime – GI 05 17 / 17 Automne 2004