Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
13 mai 2007 7 13 /05 /mai /2007 06:20

TUTORIAL PHOTOSHOP : NIVEAU ********

Vous êtes nombreux à me demander comment le menu de mes rubriques a été créé sans le passer en format SWF (Flash player) mais en le gardant en format image JPEG. Il suffit, grace à Image Ready (intégré à Photoshop) de créer des zones inter-actives sur une image (comme le menu de ce blog)

Exemple : définir sur une pomme et un cendrier, deux liens distincts amenant respectivement à la page
d'acceuil du blog et à un article "recettes" en cliquant sur la vasque.. (non actif ici, voir fin du tutorial)


1) dans photoshop, vous devez dans un premier temps réaliser l'image. pour ma part, j'ai décidé d'animer ce blog avec une icones symbolisant les rubriques importantes de mon blog. Vous pouvez accéder aux tutoriaux ici

 

 

 

2) une fois votre image ou photo prête à être exploitée, n'oubliez pas d'applatir vos calques (menu>calques>aplatir l'image) et enregistrez là dans une bonne qualité (JPEG niveau 5 pour photo, niveau 7 s'il y a du texte)

 

 

3)Allez maintenant dans MENU>Passer à..>IMAGE READY

(si le lien n'est pas disponible,
allez dans l'Explorateur Windows>Program Files>Adobe>
et ouvrez le fichier Adobe Image Ready.exe et ensuite ouvrez l'image JPEG)

 

 

Vous voilà dans Image Ready, composant intégré de PHOTOSHOP..

choisissez affichage>taille réelle pour voir votre image telle qu'elle sera vue dans le navigateur Internet

dans la barre outil, choisissez l'outil "carte-image", restez appuyé une seconde pour voir apparaitre l'ensemble des options disponibles de cet outil.. Choisissez l'outil CERCLE pour délimiter la pomme

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

maintenant que la zone CARTE IMAGE est définie, vous allez lui donner des attributs qui vont être transformés en langage HTLM reconnaissable par vos navigateurs :

une fois cela réalisé, passons au cendrier
 

cette fois, par commodité puisque le tracé est plus complexe, je choisis l'outil Carte image polygonale
et je réalise un tracé autour du cendrier...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

je lui ajoute, à lui aussi, ses attributs WEB :

 


 

 

 

 

 

 

 

 

 

 

 

Maintenant que les zones sont définies, nous allons les tester et obtenir le code source pour le css..
dans la barre outil, vous avez l'icone d'Internet Explorer.. cliquez dessus..
votre navigateur s'ouvre, vous montrant l'image et, en dessous, un code htlm..
COPIEZ CE CODE ET COLLEZ LE DANS WORD PAD ou tout éditeur de texte.. sauvegardez le..

Voici le code source de cette image :
___________________________________________________________________________

<HTML>






<IMG SRC="images/ACCUEIL-RECETTES.jpg" WIDTH=523 HEIGHT=267 BORDER=0 ALT="" USEMAP="#ACCUEIL_RECETTES_Map" image screen "http://idata.over-blog Adresse de votre fichier>




COORDS="351,34, 324,59, 325,97, 314,124, 319,171, 354,205, 396,221, 435,210, 476,185, 494,143, 490,115, 484,100, 492,59, 454,26, 396,20" HREF="http://dometflo.over-blog.com"> COORDS="129,107,94"
HREF="http://lien de la pomme">COORDS="245,156,78"


 

>   Remplacez le texte orange par l'url exacte de l'image (que vous avez     préalablement hébergée chez ob ou autre, bien sûr !!!) (dans IMG SRC)


 



____________________________________________________________________

 

et voilà, il ne vous suffit plus que de créér un article, module, page d'accueil etc. et de coller (Crtl +V) le code source dans la fonction "code source" de l'article. et vous obtiendrez une image sur laquelle les zones que vous avez sélectionné fonctionneront comme des liens..

 

pour d'autres façon de procéder , voir aussi le blog de PêUR
article connexe: 
http://peutetreunereponse.over-blog.com/article-557869.html

Partager cet article

Repost 0

commentaires

voyance gratuitement 13/07/2015 11:31

C'est avec plaisir que je regarde votre site ; il est formidable. Vraiment très agréable à lire vos jolis partages .Continuez ainsi et encore merci.

voyance gratuite par email 13/07/2015 11:31

Merci beaucoup pour ce site et toutes les informations qu’il regorge. Je le trouve très intéressant et je le conseille à tous !
Bonne continuation à vous. Amicalement .

sugi la fourmiz 14/05/2007 18:08

C'est merveilleux tous ce que tu sais faire DOM :-)Pour l'erreur, t'en fais pas ça arrive à tous le monde d'être distrait lolMoi la première! rien avoir avec l'age moi j'dis hihiVu que j'ai pas photoshop (trop cher pour mon portefeuille)Groso bisous et passe une bonne semaiineSugi la fourmiz

Bool 13/05/2007 16:10

Salut Dom !!Juste un tit coucour pour voir si tu vas bien :-)Je viens de migrer mon CSS en V2, pas trop de probs ouf ;-)Gros bisous à toi et à bientôt !Bool

Garoudesbois 13/05/2007 12:55

hello Dom .. je visite ...dis moi on peut faire ça à partir de quelle version  .. ???  parceque parfois les détourages ça prend un temps et c'est parfois souvent pas précis ... ! ! !sur mon toshop 7 je n'ai pas cet outil il me semblebonne journée