Réalisation d'une page web à partir de Photoshop (Image ready)

Vous pouvez réaliser une interface graphique Html à partir d'une image en découpant cette dernière sous Photoshop ou ImageReady (fournit avec Photoshop à partir de la version 5.5)

Vous pouvez procéder de deux manières différentes

1°) - Placer vos repères sur la page et laisser Photoshop (ImageReady plus précisemment) découper automatiquent votre page en "tranches" et générer une page HTLM sous forme de tableau.

2°) - Découper vous-mêmes votre page avec l'outil "tranches" et générer la page html

 

1° - Génération automatique de la page.

Cette méthode n'est valable que pour des images régulières dont les différents éléments de découpe n'empiètent pas les uns sur les autres, pour des images plus sophistiquées, utilisez la seconde méthode.

Nous allons, par exemple, découper cette palette de couleur en autant d'élements que de couleur.

Pour générer automatiquement les tranches, il faut utiliser ImageReady qui est fournit avec Photoshop. Soit vous lancez directement l'application Imageready , soit vous basculez dans cette application à partir de Photoshop en cliquant sur son icône en bas de la palette d'outils

Tout d'abord, nous allons placer des guides sur notre image pour délimiter les endroits des différentes découpes. N'hésitez pas à zoomer pour placer ces repères le plus précisément possible.

Si la règle n'est pas affichée cliquez sur Ctrl+R pour la faire apparaître.

Pour placer les repères horizontaux, cliquez dans la règle du haut, maintenez le bouton de la souris enfoncé et déplacez votre souris à l'endroit ou vous désirez placer votre repère. Une ligne s'affiche à l'écran matérialisant l'endroit ou sera placé le repère. Lachez le bouton de votre souris quand le repère est placé correctement. Pour placer les repères verticaux, procédez de la même manière mais en cliquant dans la règle se trouvant à gauche de l'écran.

Pour déplacer un repère, 1. sélectionnez l'outil de déplacement

2. Placez le pointeur sur le repère (le pointeur se transforme en flèche à deux têtes).

3. Déplacez le repère en le faisant glisser à l'endroit désiré.

Pour supprimer un seul repère, faites-le glisser hors de la fenêtre active.
Pour supprimer tous les repères, choisissez Affichage > Effacer les repères.

Voici ce que nous obtenons :

Des traits bleus matérialisent l'endroit où ont été placés les repères.

Une fois tous vos repères placés sur votre image, sélectionnez dans le menu l'option Tranches/Créer des tranches à partir des repères.

Images Ready découpe votre image en fonction des repères que vous aves placé. Les tranches sont repèrées par des numéros.

Enregistrez votre image en sélectionnant Fichier/Enregistrer une copie optimisée sous...

Dans la boîte de dialogue, sélectionnez l'option HTML dans Enregistrer sous et donnez un nom à votre fichier. Validez.

ImageReady génère automatiquement une page HTML et convertit chaque tranche en image qu'il place dans un répertoire. Vous obtiendrez donc sur votre disque, un fichier Palette.html et un répertoire Images contenant toutes les images de cette page.

2° - Découpe manuelle de la page.

Vous pouvez travailler dans Photoshop directement.

Pour pouvoir travailler plus précisemment, placez des repères sur votre image pour délimiter les zones de découpe

Si vous générez automatiquement votre page html, vous allez vous trouver avec une multitude d'images sans aucun intérêt car votre image sera trop décomposée.
Il faut donc découper les tranches manuellement en utilisant l'outil tranche.

Positionnez-vous à l'endroit ou vous voulez commencer la découpe puis sans lacher le bouton de votre souris, délimitez la zone à découper.

Pour modifier une tranche, utilisez l'outils sélection de tranche.

positionnez-vous sur une ligne entourant la tranche. La bordure de La tranche sélectionnée devient jaune

Pour changer la taille de la tranche, placez-vous sur un des côtés (votre curseur se transforme en flèche double), et tirez le cadre jusqu'à la position désirée.
Encore une fois, n'hésitez pas à zoomer pour être le plus précis possible, Les repères que vous avez placés vous aideront.

 

Découpez toute votre image en fonction des différents éléments que vous voulez obtenir dans votre page html.

Une fois toutes vos découpes effectuées, enregistrez votre fichier en sélectionnant Fichier/Enregistrer pour le Web. Vérifiez les options dans les Paramètres de sortie

Enregistrez.

Photoshop génère automatiquement une page HTML contenant des tableaux et convertit chaque tranche en image qu'il place dans un répertoire image.