composante photoshop cs6 (et un peu de dreamweaver)
Post on 23-Feb-2016
39 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
top related