Ne vous est-il jamais arrivé de faire un dessin et de vous dire "Je le verrais bien en page d’accueil de
site…". Et bien sachez que sans faire de sorcellerie et sans se compliquer la vie, il vous est possible de
réaliser votre page à partir de votre image…
Dans ce tutorial vous allez apprendre à travers Photoshop et toutes ses possibilités, à découper une image
selon vos souhaits pour en faire une page de site…
Pour le tuto j'ai utilisé la version CS3, mais ça ne change presque rien, les manipulations restent les
mêmes, vous les trouverez peut être juste à d'autres endroits.
(Prévenez moi si il y a un problème)
|
Avant de faire quoi que ce soit, vous devez ouvrir l’image que vous voulez découper. Pour le tutorial, j’utilise cette image (850 x 540) :
Vous pouvez cependant utiliser l’image que vous voulez… Maintenant que nous avons notre image, passons à la pratique : |
|
1- Sélectionnez l’outil tranche
2- Détourez les endroits qui seront des liens (la où vous pourrez cliquer) :
Lorsque vous relâchez ceci apparaît :
Faites ceci pour tout vos liens ce qui donnera par exemple:
3- Faites un clic droit sur chacun des liens, puis choisissez "Modifier les options de tranche" pour les configurer.
Une fenêtre "Options de tranche" apparaît :
4- Remplissez comme suit : Type de tranche : Image Nom: Nom de l’image (Je vous conseil de mettre qu’un mot ou plusieurs mots séparé par des underscore, exemple : Mon_fichier) URL : Lien vers où mènera le clic sur l’image (Exemple : Astuce.html ou images.jpg ou http://www.i-informatique.net) Cible : Où sera ouvert votre lien
Pour que le lien s’ouvre dans la fenêtre en cours n’écrivez rien
Voici un exemple résumant :
5- Nous allons enregistrer notre travail, pour ça, allez dans le menu Fichier, puis Enregistrer pour le Web et les périphériques… . Dans Paramètre prédéfini choisissez JPEG supérieur ou à défaut faites comme sur la capture :
Puis cliquez sur Enregistrer, une nouvelle fenêtre apparaît, remplissez la ainsi : Nom du fichier : Le nom de votre fichier avec l’extension ".html" (Exemple : monfichier.html) Type : HTML et Images (*.html) Paramètre : XHTML Tranches : Toutes les tranches 6- Cliquez sur Enregistrer 7- Rendez-vous dans le dossier où vous avez enregistré votre page html et double-cliquez sur votre document .html. 8- Lorsque vous le mettrez sur Internet, cela vous donnera quelque chose ressemblant à ceci : Pour voir l’exemple, cliquez ici. |
Pour me contacter cliquez ici