Créer un menu avec, descriptifs des liens ...

Bonjour vous allez pouvoir apprendre ici à faire un menu avec un descriptif des liens sous ImageReady.
Ce tutorial vous aidera seulement sur l'utilisation d'ImageReady mais pas sur la partie graphique
Voila ce que vous réussirai à faire en suivant ce tutorial
Voir le résultat
Pour réaliser facilement ce tutorial je vous propose de télécharger la source en cliquant ici

Si vous n'utilsez pas les sources de ce tutorial, créez votre propre graphisme avec vos boutons ou liens et découpez votre réalisation en utilisant l'outil tranche (Je ne n'expliquerai pas comment utiliser cet outil car le thème a dèja été abordé dans d'autres tutoriaux) par contre soyez attentif quand vous créez vos tranches.Une tranche parfaite commence la ou la précédente s'arrette et ne doit pas se chevaucher.
Comme vous le voyez sur la capture d'écran suivante il est important d'organiser votre projet en créant des groupes de calques différents pour chaque partie de votre projet ceci afin de vous repérer plus facilement sous ImageReady ou vous travaillerez sur deux fenêtres différentes (fenêtre de tranches et celle des calques). Il est important aussi de différencier facilement vos effets rollovers en créant des sous groupes et d'attribuer à vos calques bas l'extention "_bas" afin de repérer facilement le calque utilisé pour l'effet de survol de la souris

Une fois votre travail effectué sous photoshop envoyez votre projet sous ImageReady en cliquant sur l'icone présent en bas de votre barre d'outil



Une fois votre projet dans ImageReady, organisez vos fenêtres afin de ne pas être géné pendant votre travail et sélectionnez l'outil "Modification de tranches" repère rouge et sélectionnez une tranche (la tranche en question sera automatiquement mis en avant dans votre fenêtre des tranches).Ici j'ai choisi la tranche avec l'icone contact.



Cliquez maintenant sur "Créer un état de transformation par souris"



Et dans votre fenêtre des calques, masquez l'état haut de l'icone et faites apparaître l'état de survol bas.



Faites ensuite apparaître le calque ayant le descriptif correspondant à l'état de survol bas de votre icone

A ce niveau nous pourrions nous dire que notre effet de rollover fonctionne car si vous le testez en cliquant sur l'état haut et bas de votre fenêtre des tranches cela marchera, par contre en faisant un test dans le navigateur vous allez vous rendre compte que l'effet de survol fonctionne mais que le descriptif du lien lui ne marche pas :?:
Effectivement c'est normal car la tranche sur laquelle le descriptif doit s'afficher et distante de la tranche principale de l'effet de survol.

Pour que notre descriptif puisse s'afficher correctement, nous allons lier les deux tranches en utilsant l'icone en forme d'escargot à gauche de l'effet de survol de notre icone.
Cliquez dessus et en maintenant le bouton de votre souris enfoncé, allez chercher la tranche distante (ici dans mon projet c'est la tranche N°11) puis relachez le bouton de votre souris.



Puis répétez ces opérations pour chacun de vos boutons ou liens



Enfin enregistrez une copie optimisée de votre projet



Donnez le nom que vous souhaitez donner à votre création et gardez le paramètres ci-dessous



Concrètement vous venez de voir une autre fonctionnalité d'imageready pour afficher des tranches distantes dans vos effets de rollovers

Voila nous sommes au bout de ce tutorial