Tutoriel : Apprendre à découper un design avec photoshop

Ce tutoriel va vous appprendre à découper un design rapidement et facilement à l'aide de photoshop. Nous aborderons également son intégration html à base de tableau pour les plus pressés. Nous reviendrons plus tard via un autre tuto sur l'intégration Xhtml Stricte, bien plus intéressante pour l'ergonomie, la personnalisation, le référencement et la compatibilité avec les différents navigateurs web.

Pour commencer et afin que vous puissiez réaliser cette découpe en direct, nous vous proposons de télécharger notre modèle de gabarit simple Téléchargez le PSD prêt à être découpé.

1. L'outil tranche

Photoshop a un outil spécialement dedié au découpage de design, l'outil tranche réprésenté par cette icône :
Il va vous permettre de découper des zones, de les nommer et des les extraires au format d'images souhaités pour l'assemblage final de votre design. Cet outil se veut très simple d'utilisation, il s'utilise comme l'outil rectangle de sélection.

Voici en image le design tranché et prêt à être enregistré :

2. Préparation des tranches pour la découpe

Dans un premier temps nous allons établir et définir les zones de découpe qui faciliteront l'intégration html par la suite. Pour ce gabarit simple il n'y aura que 8 images à decouper :

    1) le header
    2) le menu découpé en 3 parties
    3) le pied
    4) le cadre de news découpé en 3 parties

3. Préparation à la découpe

Si pour avoir un aperçu de la mise en forme globale vous avez rajouté du texte facultatif sur votre PSD, retirez-le pour obtenir votre design vierge et sélectionnez l'outil tranche :

4. La découpe du design

Commençons par le header : Sélectionnez votre outil tranche et en partant d'un des coins supérieurs du header, effectuez un clic gauche maintenu et faites glisser votre souris vers le coin opposé bas pour délimiter le header.



Un rectangle s'est formé autour de votre header (la tranche), nous allons donner un nom à cette tranche de manière précise pour vous aider plus tard à vous y retrouver dans vos images, en effet ce types de gabarit ne comportera que quelques images mais plus vous créerez des modèles complexes et plus il sera important de nommer chaques images de manière à les identifier facilement.


Faites un clic droit dans la zone de la tranche ou un double clic gauche, un menu apparaît, choississez : modifier les options de tranche...



Une nouvelle boite de dialogue apparaît avec plusieurs champs le seul qui nous intéresse pour le moment est le "Nom:"

Par defaut photoshop nomme les tranches par le nom de votre PSD + une numérotation, exemple pour celui-ci notre PSD se nomme gabarit donc nos tranches s'appelleront par défaut gabarit_01, gabarit_02 etc... nous allons donc donner un nom à notre tranche : header (sans majuscule et sans espace si vous devez mettre des mots séparés utilisez le - ou le _)





On valide.
Voila votre première tranche créée, il faut maintenant répéter l'opération pour chaques tranches en suivant notre modèle établi plus haut.

5. pourquoi découper certaines images en plusieurs parties ?

Pourquoi découper le menu et le cadre de news en trois parties au lieu d'une seule ?

l'extensibilité de votre menu va vous permettre d'y intégrer autant de contenu que vous le souhaitez, cette technique est préférable pour vous faciliter l'intégration html plus tard. En exemple le menu :
découpez le menu en trois tranches que vous nommerez pour plus de facilité :

- menu_haut
- menu_fond (la partie qui s'étirera)
- menu_bas



Votre design est déjà découpé et prêt à passer à l'intégration html !

6. 1 ère technique : exportation en html à base de tableau

Photoshop propose d'exporter le design avec le code html à base de tableau ce n'est pas la méthode que nous conseillons, mais pour les plus pressés ou peu soucieux des normes W3C elle conviendra parfaitement pour une intégration rapide.
Dans l'onglet fichier /enregistrer pour le web et les périphériques/ (alt+maj+ctrl+s) une boite de dialogue s'ouvre



Cliquez sur enregistrer ensuite dans le menu déroulant choissiez HTML et images puis enregistrer



Vous obtiendrez un dossier contenant votre fichier html et son dossier images.
La decoupe est terminée et vous pouvez déjà commencer à éditez votre site !

7. 2 ème technique d'exportation des images

Lorsque vous aurez sélectionnez les tranches indispensables à votre design à savoir :

le header, le menu (3 parties), le cadre de news en (3 parties) et votre pied de page, d'autres tranches inutilisées et servant à l'apercu globale seront également créés, elles sont facilement reconnaissables car elles sont grisées à l'aperçu.


Pour éviter de les exporter avec les images dont nous avons besoin nous allons les rendre invisibles



clique droit dans la zone de la tranche non-utilisée ou un double clique gauche dans le menu déroulant selectionnez "Pas d'images" puis ok



Pour ce design 8 images sont inutiles, nous les avons numérotées de 1 à 8 pour que vous puissiez facilement les identifier :



Lorsque que l'on a toutes les images inutiles rendues invisibles on enregistre le tout
Dans l'onglet fichier /enregistrer pour le web et les périphériques/ (alt+maj+ctrl+s) la boite d'enregistremet s'ouvre cliquez sur enregistrer et selectionnez "images"





Voici au final l'aperçu de votre dossier images et des fichiers qui seront nécessaires





Si vous avez apprécié ce tutoriel partagez-le sur Twitter Merci.