Bonjour
Nous allons voir à travers ce tutorial comment créer un effet de rollover avec ImageReady CS.
Avant de réaliser ce tutorial vous devez lire et apprendre le post précédent "Créer un menu pour son site".

1° nous allons ouvrir notre menu dans photoshop et organiser les calques de texte. Pour cela faites un clic droit sur le calque de texte puis sélectionnez Propriétés du calque


2° Sélectionnez une couleur, jaune par exemple, puis cliquez sur Ok



3° Répétez l'étape 1 & 2 sur tous les calques de texte.
Votre fenêtre de calques doit maintenant avoir cet aspect.



4° Maintenant créez un nouveau calque et nommez le rollover



5° Dans votre menu d'outils sélectionnez l'outil Forme personnalisée.
Dans la barre des options en haut de votre écran sélectionnez la forme ainsi que la couleur. Pour ce tutorial nous avons choisi le bleu.





6° Toujours sur le calque rollover appliquez votre forme personnalisée. Comme vous le voyez notre forme est beaucoup trop grande, nous allons donc la redimensionner puis la centrer en s'aidant du accourci clavier Ctrl+T.





7° Faites Calque-->Pixellisation-->Forme



8° Déplacez votre calque Forme1 sous votre calque LIEN_1



9° répétez l'opération depuis l'étape 6.
!!! astuce !!!
Pour éviter de recréer la forme puis de la redimensionner placez-vous sur le calque "Forme1" utilisez le raccourci clavier Ctrl+j pour le dupliquer, vous gagnerez ainsi de précieuses minutes..
Donc dupliquez votre calque , renommez-le, déplacez le-sous le calque du lien concerné, centrez-le et appliquez la couleur bleu dans votre fenêtre de calques afin de pouvoir les différencier rapidement.
Le résultat obtenu doit ressembler à la capture d'écran ci-dessous.



Voila pour le travail sous Photoshop nous allons maintenant passer sur ImageReady en cliquant sur l'icone Transférer sous ImageReady.



Vous avez sans doute remarqué que l'interface est pareil à celle de photoshop.
Donc sélectionnez votre fenêtre de calques puis masquez les calques de rollover.



10° Cliquez sur l'onglet Fenêtre-->Contenu Web




La fenêtre Contenu Web va alors s'ouvrir et vous retrouverez les tranches que nous avons créées sous photoshop dans le tutorial "Créer un menu pour son site"



11° Sélectionnez la tranche n° 1 celle-ci doit correspondre à la tranche Accueil cliquez sur Créer un état de transformation par souris



12° Comme vous pouvez le voir sur la capture d'écran activez votre calque par dessus puis activez la visibilité de votre calque rollover



Si vous cliquez sur le calque au dessus menu_ready_01 votre calque rollover doit ètre désactivé



13° faites Fichier-->Apercu dans-->Iexplorer pour voir si votre rollover fonctionne parfaitement



14° Si votre rollover fonctionne correctement, répétez les étapes de 11 à 12.
Une fois le travail effectué rangez vos rollover en cliquant sur le triangle à coté de vos tranches



15°Maintenant nous allons voir les diverses options des tranches.
Dans votre barre d'outils cliquez sur Outil Sélection de Tranche



16° Si votre fenêtre d'options des tranches n'est pas active, faites Fenêtre-->Tranche



17° voici notre fameuse fenêtre d'options des tranches, réglez vos options.











18° Maintenant toutes vos tranches parametrées, faites.
Fichier-->Enregistrer une copie optimisée sous...



19° Dans votre menu déroulant sélectionnez Autres



20° Cliquez deux fois sur Précédent .



21° Vous serez alors sur cette fenêtre, tapez le nom que vous souhaitez donner à votre dossier image puis enregitrez votre travail



Maintenant il ne reste plus qu'à utiliser la commande "include"
ou bien de copier/coller le tableau créé dans la page html générée par ImageReady.

Code: Tout sélectionner

<php>

Voila vous savez maintenant créer un effet de rollover avec ImageReady, cliquez sur ce lien si vous souhaitez voir le résultat final
http://www.photoshop-creation.com/tuto_menu_ready/menu_ready.html
Amicalement
Tutorial proposé par : photoshop-création

J'ai voulu voir le resultat :

Objet non trouvé!
L'URL requise n'a pu etre trouvée sur ce serveur. Si vous avez tapé l'URL à la main, veuillez vérifier l'orthographe et réessayer.

Si vous pensez qu'il s'agit d'une erreur du serveur, veuillez contacter le gestionnaire du site.

Error 404

oups

de même

ok je corrige ça ce soir

sinon le tuto a l'air très bien

petite question :

J'ai fait mon menu, j'ai obtenu mon menu avec l'effet de rollover. Mais comment faire pour que , quand je clique sur un des boutons de mon menu, ca s'affiche dans la partie du bas ?
Dans l'exemple, ca ouvre une nouvelle fenetre à chaque fois.

Je voudrais faire comme ce site la en fait : le menu (avec les onglets) en haut, et chaque page s'affiche dans la partie du bas.

Est-ce que je dois faire une tranche dans la partie inferieure ?

Salut au lieu de mettre _blank sélectionne _self dans la fenêtre ci-dessous

c'est ce que j'ai fait, mais du coup, ca remplace meme mon menu. Ca s'affiche dans la bonne fenetre, mais mon menu n'appparait plus et on ne peut plus naviguer.

Vu que je suis nulle avec dreamweaver, je vais essayer de coder à la main , ca marchera peut etre

parce que ton menu ne suis pas ...
Tu devrais l'inclure à l'aide de la fonction " include "

exemple

Code: Tout sélectionner

<?php
include "menu.php";
?>

Bonjour

J'ai suivi le tuto suivant pour créer un menu pour mon site web...

creer-un-effet-de-rollover-t147.html

Cependant, l'alerte du contrôle active X apparaît à chaque fois qu'on visite la page d'accueil.

Comment faire pour contourner ce problème?

Merci de votre aide et bonne journée

Car tu le testes en local, sur un serveur tu n'auras plus cette erreur
Amicalement