Micro Application

Créez une "interface" HTML pour votre site, comme un pro, où tout s'intègre à la perfection, comme vous l'avez conçu dans photoshop. Pour cela, nous allons créer, à partir d'une image de base, plusieurs images optimisées et un tableau HTML les regroupant, dans lequel vous pourrez intégrer le texte de votre page.

1. Préparation des calques et repères

Créez d'abord dans Photoshop l'image de votre interface telle que vous la désirez.
Prévoyez les menus et les zones de texte.

	Assurez-vous que votre image est bien en mode de couleurs RVB ( menu Image > Mode > couleurs RVB)
	Faites dans votre image un calque ou un groupe de calques avec votre interface à l'état normal, et un calque ou un groupe de calques avec vos boutons tels qu'ils apparaîtront au survol de la souris ("rollOver").
	Vous allez créer un tableau dans lequel s'intègreront les morceaux d'images composant votre visuel. Placez les repères de l'image aux limites des éléments qui la composent (voir l'exemple dans l'illustration ci à qauche, on place un repère horizontal juste en dessous du menu du haut et un repère vertical juste à droite du menu de gauche... puis on crée une case pour chaque item du menu). Pour placer des repères, on fait apparaître les règles (ctrl + R) et on clique-glisse depuis la règle jusqu'à la position désirée dans l'image.
	Vous créez ainsi une sorte de quadrillage irrégulier, figurant vos futures cases de tableau.

2. Lancement d'Image Ready

Si, à l'installation de Photoshop, vous avez demandé une installation complète, alors, vous devez disposer d'un logiciel annexe, Image Ready, qui vous permettra d'exporter des images pour le web.
Si ce n'est pas le cas, reprenez votre CD d'installation et suivez les étapes proposées.

Lancez le logiciel, via Photoshop, en cliquant sur le bouton le plus en bas de la barre d'outils ou avec le raccourci "ctrl + shift + M".

3. Création des tranches

	Dans la palette des outils, maintenez le clic quelques instants sur le bouton "Tranche" : vous accédez aux deux outils : tranche et sélection de tranche. Une petite flèche se trouve en dessous des outils, glissez jusqu'à elle et relachez le bouton de la souris pour ouvrir une palette flottante qui vous donnera accès aux deux outils.
	Créez une première image-tranche avec l'outil Tranche, en cliquant-glissant d'une intersection de repères à une autre. (par défaut, les répères sont "magnétiques", c'est-à-dire que votre souris aura tendance à se positionner exactement sur eux).
	Puis créez les autres tranches de la même manière. Chaque tranche est appelée à devenir une image constitutive de votre page. Veillez à ce que toutes les images que vous souhaitez exporter soient incluses dans des tranches.
	Dans la palette des tranches (pour afficher cette palette, allez dans le menu "Fenêtre > Tranches"), vous pouvez nommer les tranches ainsi créées. Par défaut, les tranches sont nommées par le nom de l'image et le numéro de tranche. Pour passer d'une tranche à l'autre, utilisez l'outil de Sélection de tranche et cliquez dans la tranche que vous désirez nommer. Qaund une tranche est sélectionnée, des petites poignées jaunes apparaissent à chacun de ses angles.
	Dans cette même palette, vous pouvez également définir la couleur de fond des cases de votre tableau. Pour toutes les tranches unies, où ne figure pas d'image, indiquez-le grâce au menu déroulant "image/pas d'image", et indiquez-en la couleur de fond, si elle est différente de la couleur de fond de la page.

4. Enregistrement des images

	Ouvrez maintenant l'onglet "2 vignettes", qui vous permettra de visualiser votre original en vis-à-vis des tranches optimisées.
	Tranche après tranche, choisissez les paramètres d'optimisation, pour que chaque image soit la plus légère possible (voyez l'astuce "Préparez vos images pour le web" précédente). Ici, on choisit généralement des gif, en 8 couleurs environ.
	Dans le menu "Fichier", choisissez "Enregistrer une copie optimisée sous..." (ou ctrl+alt+shift+S)
	Choisissez d'exporter "HTML et images", et "toutes les tranches". Cliquez OK.

Vous avez maintenant une page HTML avec un tableau contenant vos images, que vous pouvez modifier à votre convenance dans votre éditeur HTML, et dans laquelle vous pouvez saisir votre texte.
Si vous voulez des boutons qui réagissent au survol de la souris ("rollOver"), suivez les quelques étapes complémentaires qui suivent.

	Vous devez avoir préparé l'image de vos boutons préalablement, sur un calque ou un dossier de calque séparé (comme indiqué au début de cette astuce). Faites apparaitre ce calque dans votre image.
	Sélectionnez chaque tranche contenant un bouton à modifier, une par une. Renommez-les et choisissez les paramètres d'optimisation comme indiqué plus haut (ici, il est important de renommer les images, sinon, elles porteraient le même nom que les images des boutons à l'état normal, et les remplaceraient).
	Puis sélectionnez-les toutes (en maintenant la touche shift enfoncée pendant que vous cliquez).
	Utilisez le raccourci clavier "ctrl + shift + alt + S", pour enregistrer une copie optimisée. Choisissez de n'enregistrer que les images, et seulement les tranches sélectionnées. (vous pouvez remplacer "espaceur.gif", si cela vous est demandé)

Modifiez maintenant le comportement de vos images dans votre éditeur HTML.
Votre page est prête à être mise en ligne.