5. DECOUPAGE DU DESIGN
Votre design est terminé et doit grossièrement ressembler à la capture précédente. Nous allons maintenant le découper et enregistrer les parties de celui-ci afin de pouvoir commencer à travailler sur notre page HTML. Munissez-vous de l’outil rectangle de sélection et sélectionnez le panneau d’information (la partie du site avec votre logo et vos informations). Pressez les touches CTRL + MAJ + C. Cela permet de faire une copie de tout l’élément présent dans votre zone de sélection et cela même si certains composants ne sont pas sur le même calque. Formidable n’est-ce pas ! Maintenant, pressez les touches CTRL + N afin de créer un nouveau document, puis CTRL + V pour coller votre image. Vous avez donc un document de la taille de la zone de sélection qui contient votre panneau d’information. En principe, ce document doit avoir une taille de 350 pixels de large pour 400 de haut.

Enregistrez-les pour le web (Fichier > Enregistrer pour le web ou CTRL + MAJ + ALT + S). Dans la colonne de droite, cliquez sur le menu déroulant tout en haut, il correspond au «Paramètre pré- défini», et choisissez «PNG-24». Vous pouvez maintenant cliquer sur «Enregistrer». Pour faciliter votre travail, je vous conseille de créer un dossier vide du nom de votre site, sur votre bureau par exemple. A l’intérieur de celui-ci, créez un dossier que vous nommez «img» et qui contiendra toutes les images de votre site. C’est donc dans celui–ci que vous devez enregistrer votre panneau d’information. Nommez le «info.png». Retournez sur le premier document que vous avez créé. Cette fois-ci, masquez tous vos calques, mis à part le fond gris et celui qui contient les quatre bandes de couleurs. Sélectionnez la globalité du document (CTRL + A), copier le tout (CTRL + MAJ + C) et répétez l’action ci-dessus, mais en enregistrant votre image sous le nom «fond.png».