Présentation Courtin maxime – GI05Automne 2004

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

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

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 4 / 17 Automne Rappel Photoshop - notions de calque - Sélections - filtres

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 5 / 17 Automne 2004 Présentation de l’environnement : Interactions animations Optimisations Couleurs Transformations Historique Calque

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

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 7 / 17 Automne 2004 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)

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 8 / 17 Automne 2004 Visualisation des différentes optimisations Réglages des différentes optimisations

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 9 / 17 Automne 2004 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

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

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 11 / 17 Automne 2004 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. Création d’une tranche

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

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 13 / 17 Automne 2004 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

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

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 15 / 17 Automne 2004 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 une zone cliquable…

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 16 / 17 Automne 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 : Enregistrer

Présentation | Rappel Photoshop | ImageReady | Utils Courtin Maxime – GI05 17 / 17 Automne 2004 MERCI