Composante Photoshop CS6(et un peu de Dreamweaver)

12 novembre 2012Grégory Petit

http://lrcm.com.umontreal.ca/greg/COM2580/

La semaine dernière…

Intégration Web

Éléments complexes de Dreamweaver

Et donc on fait quoi aujourd’hui?

Création d’une image lien via PhotoshopMettre du texteCouleur de fondTexture de fondChangement de couleur au survol

Images maps via Dreamweaver

Image lien via Photoshop

Image lienVous savez déjà faire des liens images avec

Dreamweaver: Insérer une image Ajouter le lien dans dans la boite des propriétés de

l’élément Web image

On va créer un lien image un peu plus flyé via Photoshop.

Certaines étapes ne sont pas forcément nécessaires en fonction du degré de complexité que vous voulez atteindre.

Au plus haut degré de complexité, l’image sera utilisée comme image de fond de l’élément Web.

Photoshop – nouveau fichier

Choisir ici la taille souhaitée pour votre image lien

Photoshop – nouveau fichier

Ajouter du texte

Sélectionner l’outil Texte

Modifier la police, la couleur, le style, la taille, etc.

Ajouter du texte - résultat

Modifier le textePour modifier le texte une fois ajouté, il faut :

Sélectionner le calque du texte à modifierSélectionner l’outil Texte dans la boite à outils

de gauche.Modifier la police, taille, couleur, etc. dans la

boite à outils du haut.Modifier le texte en cliquant dessus.

Ajouter une couleur de fond

Créer un nouveaucalque

Ajouter une couleur de fondChoisir l’outil de

sélectionet sélectionner

l’ensemble du claque

Choisir « Remplir »dans le menu « Édition »

Ajouter une couleur de fond

Choisir la couleur voulue

Correspond aux 2 couleurs

de la boite à outil

Ajouter une couleur de fond - résultatLe fond apparaît par défaut devant le texte car un nouveau calque apparaît toujours en haut dans la liste des calques

Glisser le calque du fond en

dessous du calque du

texte

Créer une texture à partir de la couleur de fond

Comme pour chaque modification, il faut sélectionner le bon calque avant.

Ici, il faut sélectionner le calque du fond.

Ajouter certains

filtres permet de créer une

sorte de texture.

Texture - résultat

On change la couleur du texte pour que cela ressemble à quelque chose de plus correct.

Ajouter un effet de survolMaintenant, on veut rajouter un effet lorsque la

souris de l’usager passe au-dessus de l’image lien.

On va faire ça dans le même fichier Photoshop en dupliquant de qu’on vient déjà de faire.

La version survolée va se retrouver en dessous de la version normale de l’image lien.

Il faut donc doubler la taille de la zone de travail de notre fichier Photoshop.

Augmenter la zone de travailOn va doubler la taille de la zone de travail et l’étendre vers le

bas

Augmenter la zone de travailMettre la taille en pixel pour que cela soit plus facile et doubler

la hauteur.On va aussi indiquer qu’on souhaite que l’image soient étendue

vers le bas.

Augmenter la zone de travail - résultat

On va maintenant dupliquer les deux claques qu’on a.

Glisser le calque vers

l’icône Nouveau calque

Dupliquer les calques

Faire ça pour les deux calques

Déplacer les calques dupliquésSélectionner un des deux calques dupliqués puis choisir l’outil de

déplacement dans la boite à outils

Déplacer le calque avec les flèches du

clavier ou la souris

Faire la même manipulation pour le second calque

dupliqué

Ajouter l’effet de survolSélectionner le calque du fond dupliqué (celui du bas donc) et

jouer avec son contraste et sa luminosité pour ajouter l’effet de survol.

Ajouter l’effet de survol - résultat

Exporter votre imageExporter votre image pour le Web (vu dans le

cours sur les images)

Après on passe dans Dreamweaver pour rajouter le comportement de survol.

Ajouter le lien dans Dreamweaver

Si vous n’avez pas créé d’effet de survol, ajoutez l’image lien comme d’habitude (voir début du cours)

Pour rajouter l’effet de survol, 3 règles CSS sont nécessaires.

Tout d’abord, il faut créer un lien normal, et non pas un lien image.

Ajouter le lien dans Dreamweaver

Ensuite créer une nouvelle classe qui aura comme image de fond votre fichier image que vous venez de créer.

Il faut aussi rajouter d’autres propriétés CSS importantes pour faire fonctionner votre survol.

Règle CSS pour la classe du lien

Choisir votre image de fond

Bien indiquer 0 et 0 pour ces deux valeurs de

position.

Règle CSS pour la classe du lien

Choisir la même taille que vous aviez choisi à l’origine pour votre fichier

Photoshop

Règle CSS pour la classe du lien

Bien choisir Block

Appliquer la classe à votre lien

On voit bien que le texte est toujours affiché. Il faut donc le rendre

invisible.

Rendre invisible le texte du lienCréer une classe avec la propriété display:

none;

Entourer le texte du lien par un span et attribuer la classe qu’on vient de créer à ce span.

Rajouter l’effet de survolÉcrire une nouvelle règle directement dans le

fichier CSS comme suit.

Nom de la classe associée au lien

Le :hover permet de rajouter le

comportement du survol d’une élément

Correspond à la hauteur de votre image créer avec

Photoshop

Effet de survol plus simple

Effet de survol plus simpleCode CSS ajouté automatiquement.

Ne pas supprimer les scripts ajoutés automatiquement dans le <head> du fichier HTML.

L’image originale et l’image de survol sont créées aussi dans Photoshop.

Vous pouvez utiliser les mêmes techniques vues précédemment sauf que vous mettez les deux images dans deux fichiers séparés au lieu d’un seul.

Images map

Images map

Une image map permet de rendre certaines zones d’une image cliquable.

On crée donc plusieurs liens dans une même image.

On insère d’abord une image classique.

Prenons ce magnifique exemple

Option avancée dans les propriétés de l’image

Créer des zones dans l’image

Remplir d’abord l’attribut map pour donner un nom à l’image map.

Choisir un des trois éléments encadrés pour commencer à dessiner une zone de l’image map.

Créer des zones dans l’image

Créer des zones dans l’image

Remplir la propriété link pour indiquer la cible de la zone qu’on

vient de créer (comme pour un lien normal)

Créer des zones dans l’image

Répéter l’opération pour chacune des zones qu’on veut créer

Et ça donne ceci dans le code.

Créer des zones dans l’image

Atelier

AtelierRefaite votre menu du travail 2 avec une

image map.

ET

Refaite votre menu du travail 2 avec des liens-image avec survol.

Des questions???

Merci de votre attention!

A la semaine prochaine!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/COM2580/