Utilisation de l'outil Découpe avec Photoshop CS4

Application à un bouton rollover

 

Ouvrir une image dans photoshop.

But : faire un bouton sur le mot Capucine.

Sélectionner l'outil Tranche.

Si une tranche apparait comme ceci :

cliquer sur le bouton Masquer les tranches dans les options de l'outil tranche

Il est intéressant de définir les découpes futures avec les repères et de faire les tranches d'après les repères avec les options de l'outil :

quand le bouton

est sélectionné

on obtient la découpe suivant :

Il ne reste plus qu'à enregistrer pour le web, grâce au menu Fichier, après avoir optimisé :


en enregistrant une copie optimisée sous votre dossier dans votre site en choisissant le type : HTML et Images.de toutes les tranches :

Toutes les images de la découpe ont été enregistrées en jpg en choisissant mes paramètres.,

et la page html produite par photoshop donne le code d'un tableau contenant toutes les images de la découpe que vous pourrez utiliser sur le site.

L'image du futur bouton rollover a été isolée.

Pour faire un bouton rollover, il faut deux images de même dimension.

Le plus souvent, l'image initiale est modifiée, son gamma, sa couleur .

L'image 05 contenant le mot Capucine est réouverte dans photoshop pour la modification,

modification de la luminosité par exemple :

et elle est enregistrée sous un autre nom comme over.jpg  par exemple.

Si l'on veut mettre une image très différente, il faut faire une image de la même dimension.

L'image capucine fait 142 x 59 px, il faut donc faire une nouvelle image de 142 x 59 px..

Le travail avec Photoshop est terminée. Maintenant ouvrir Dreamweaver CS4 pour faire le bouton rollover.

Ouvrir une page XHTML dans Dreamweaver : Menu Fichier/ Nouveau

Recopier le code produit par Photoshop de la balise <table> à la balise</table> qui contient tout le code du tableau .
Je vous montre le code que je recopie pour exemple :.

<table id="Tableau_01" width="570" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img id="capucine_01" src="images/capucine_01.jpg" width="154" height="61" alt="" /></td>
<td>
<img id="capucine_02" src="images/capucine_02.jpg" width="142" height="61" alt="" /></td>
<td>
<img id="capucine_03" src="images/capucine_03.jpg" width="274" height="61" alt="" /></td>
</tr>
<tr>
<td>
<img id="capucine_04" src="images/capucine_04.jpg" width="154" height="59" alt="" /></td>
<td>
<img id="capucine_05" src="images/capucine_05.jpg" width="142" height="59" alt="" /></td>
<td>
<img id="capucine_06" src="images/capucine_06.jpg" width="274" height="59" alt="" /></td>
</tr>
<tr>
<td>
<img id="capucine_07" src="images/capucine_07.jpg" width="154" height="30" alt="" /></td>
<td>
<img id="capucine_08" src="images/capucine_08.jpg" width="142" height="30" alt="" /></td>
<td>
<img id="capucine_09" src="images/capucine_09.jpg" width="274" height="30" alt="" /></td>
</tr>
</table>

Coller ce code dans la nouvelle page à la place de destination.
La page qui n'avait que pour but de donner le code du tableau maintenant peut être supprimée.

En mode Création, cliquez sur l'image capucine et supprimer la au clavier avec la touche suppr.

Le fond du background apparait dans le trou sans bouger le pointeur, qui se trouve dans la bonne cellule du tableau,:

nous allons faire le bouton rollover , enfin !

Menu Insertion de Dreamweaver/ Objets Image/Image survolée

la boite de dialogue s'ouvre :

Donner un identifiant à l'image, elle servira à Dreamweaver à d=faire son script pour le bouton rollover, j'ai nommé l'image : monimageover

indiquer les chemins des deux images

cocher préchargéer l'image survolée au chargement de la page pour accélérer l'effet de rollover

le texte secondaire n'est pas nécessaire, mais il permet d'instruire le serveur vocaux pour les non-voyants.

Pour parfaire la lisibilité dans Firefox ou Opera, il est conseillé d'ajouter,côté code, à la balise alt produite par dreamweaver, une balise title.

<td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('monimageover','','images/capucine_05over.jpg',1)"><img src="images/capucine_05.jpg" alt="chez Capucine" title="chez Capucine" name="monimageover" width="142" height="59" border="0" id="monimageover" /></a></td>

pour le lien, j'ai mis un lien vide provisoire.

Je le retrouve en sélectionnant, l'image capucine, dans la fenètre des propriétés, et je pourrait faire mon lien  là.

Voilà le bouton rollover est terminé.

Je vous remercie de votre attention.