informatique ACCUEIL     forum informatique FORUM      Livre d'or informatique LIVRE D'OR

Logiciels et bureautique

Photoshop :
Réaliser son site à partir d'une image

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)



Manipulation à suivre
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) :

Model
Pour voir l'image à sa taille d'origine cliquez dessus.


Vous pouvez cependant utiliser l’image que vous voulez…
Maintenant que nous avons notre image, passons à la pratique :
1- Sélectionnez l’outil tranche

Outils tranche


2- Détourez les endroits qui seront des liens (la où vous pourrez cliquer) :

Détourage


Lorsque vous relâchez ceci apparaît :

Détourage relaché
Pour voir l'image à sa taille d'origine cliquez dessus.


Faites ceci pour tout vos liens ce qui donnera par exemple:

Détourage fini
Pour voir l'image à sa taille d'origine cliquez dessus.


3- Faites un clic droit sur chacun des liens, puis choisissez "Modifier les options de tranche" pour les configurer.

Menu contextuel


Une fenêtre "Options de tranche" apparaît :

Options de tranche
Pour voir l'image à sa taille d'origine cliquez dessus.


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 une nouvelle fenêtre écrivez: _blank
    Pour que le lien s’ouvre dans la fenêtre en cours n’écrivez rien
Message : Message qui s’inscrit en bas de l’explorateur (Vous pouvez laisser vide, ce qui est conseillé)
    Exemple :

    Message Internet Explorer

Instruction Alt : Message qui apparaît à coté du pointeur au survole de l’image (Je vous conseille de ne pas laisser ce champ vide)
Voici un exemple résumant :

Options de tranche fini
Pour voir l'image à sa taille d'origine cliquez dessus.


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 :

Enregistrement pour le Web
Pour voir l'image à sa taille d'origine cliquez dessus.


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

Copyright © I-Informatique.net 2006 Tous droits reservés | Design :Tonnere & Youngart