Composante Photoshop CS6 (et un peu de Dreamweaver)

1. Composante Photoshop CS6(et un peu de Dreamweaver) 12novembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2580/

2. La semaine dernière… • Intégration Web • Éléments complexes de Dreamweaver

3. Et donc on fait quoi aujourd’hui? • Création d’une image lien via Photoshop • Mettre du texte • Couleur de fond • Texture de fond • Changement de couleur au survol • Images maps via Dreamweaver

4. Image lien via Photoshop

5. Image lien • Vous 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.

6. Photoshop – nouveau fichier Choisir ici la taille souhaitée pour votre image lien

7. Photoshop – nouveau fichier

8. Ajouter du texte Modifier la police, la couleur, le style, la taille, etc. Sélectionner l’outil Texte

9. Ajouter du texte - résultat

10. Modifier le texte Pour modifier le texte une fois ajouté, il faut : • Sélectionner le calque du texte à modifier • Sé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.

11. Ajouter une couleur de fond Créer un nouveau calque

12. Ajouter une couleur de fond Choisir l’outil de sélection et sélectionner l’ensemble du claque Choisir « Remplir » dans le menu « Édition »

13. Ajouter une couleur de fond Correspond aux 2 couleurs de la boite à outil Choisir la couleur voulue

14. Ajouter une couleur de fond - résultat Le 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

15. 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.

16. Texture - résultat On change la couleur du texte pour que cela ressemble à quelque chose de plus correct.

17. Ajouter un effet de survol • Maintenant, 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.

18. Augmenter la zone de travail On va doubler la taille de la zone de travail et l’étendre vers le bas

19. Augmenter la zone de travail Mettre 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.

20. Augmenter la zone de travail - résultat

21. Dupliquer les calques On va maintenant dupliquer les deux claques qu’on a. Glisser le calque vers l’icône Nouveau calque Faire ça pour les deux calques

22. Déplacer les calques dupliqués Sé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é

23. Ajouter l’effet de survol Sélectionner le calque du fond dupliqué (celui du bas donc) et jouer avec son contraste et sa luminosité pour ajouter l’effet de survol.

24. Ajouter l’effet de survol - résultat

25. Exporter votre image • Exporter votre image pour le Web (vu dans le cours sur les images) • Après on passe dans Dreamweaver pour rajouter le comportement de survol.

26. 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.

27. 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.

28. Règle CSS pour la classe du lien Choisir votre image de fond Bien indiquer 0 et 0 pour ces deux valeurs de position.

29. Règle CSS pour la classe du lien Choisir la même taille que vous aviez choisi à l’origine pour votre fichier Photoshop

30. Règle CSS pour la classe du lien Bien choisir Block

31. Appliquer la classe à votre lien On voit bien que le texte est toujours affiché. Il faut donc le rendre invisible.

32. Rendre invisible le texte du lien • Cré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.

33. Rajouter l’effet de survol • Écrire une nouvelle règle directement dans le fichier CSS comme suit. Le :hover permet de rajouter le comportement du survol d’une élément Nom de la classe associée au lien Correspond à la hauteur de votre image créer avec Photoshop

34. Effet de survol plus simple

35. Effet de survol plus simple • Code 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.

36. Images map

37. 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.

38. Prenons ce magnifique exemple

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

40. 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.

41. Créer des zones dans l’image

42. 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)

43. Créer des zones dans l’image Répéter l’opération pour chacune des zones qu’on veut créer

44. Créer des zones dans l’image • Et ça donne ceci dans le code.

45. Atelier

46. Atelier • Refaite votre menu du travail 2 avec une image map. ET • Refaite votre menu du travail 2 avec des liens-image avec survol.