En effet, Photoshop dispose d'un outil bien pratique presque uniquement dédié à cette application : l'outil Tranche (K), ainsi que sa variante : sélection de tranche.

Création des tranches (ou tranchaqe, ça fait plus warrior)

L'utilisation de l'outil Tranche requiert l'affichage d'un nouveau type d'assitant : les Tranches (faites Affichage/Afficher/Tranches). Cliquez donc sur le bouton de l'outil Tranche pour dégainer votre bistouri, nous allons découper pour l'exemple une partie du menu de votre site préféré (bien sûr ;).

Cliquez ici pour télécharger le fichier .PSD

L'outil tranche est très simple à utiliser (il ressemble un peu à l'outil sélection rectangulaire), il suffit d'entourer avec un rectangle toutes les tranches dont vous aurez besoin.

Pour la partie "Cours" du menu, on a besoin de 3 tranches : le titre du sous-menu (Cours écrit sur l'ardoise) : menu_cours, une tranche horizontale qui contient le dégradé qui constitue le fond du menu : menu_fond, et enfin les coins arrondis en bas de chaque menu : menu_bas :

Vous pouvez voir que j'ai créé une troisième tranche, elle contient le fond des liens quand ceux-ci sont survolés par le pointeur de la souris. Vous aurez aussi remarqué qu'on a créé que quatre tranches (n°3,7,11 et 14), mais il y en a beaucoup plus à l'écran.

Les quatre tranches que nous avons créées s'appellent des tranches utilisateurs (elles sont en bleu et je vous laisse deviner pourquoi elles s'appellent comme ça), les autres ont été créées automatiquement par Photoshop (elles sont en gris).

Ne vous préoccupez pas des tranches grises, créez bien tranquillement vos propres tranches selon vos besoins.

Renommez vos tranches

C'est bon, vous pouvez ranger le bistouri et prendre sa variante : l'outil sélection de tranche. En double cliquant sur n'importe quelle tranche, une boîte de dialogue s'ouvre :

Je vous conseille très vivement de donner un nom explicite et formaté à toutes les tranches utilisateurs (sinon après c'est la grosse galère lors de la création des feuilles de style CSS, vous pouvez de croire).

Exportation du design

Découper son design en tranches c'est bien, mais ça ne servirait pas à grand-chose sans l'outil d'exportation pour le web. En effet, Photoshop permet d'enregistrer toutes vos tranches dans un même dossier. Pour cela, il suffit de cliquer sur Fichier/Enregistrer pour le Web (Alt+Ctrl+Maj+S, attention aux crampes de doigts !).

Une grande fenêtre s'affiche, elle vous permet de choisir un format pour chaque tranche, de paramétrer la qualité... Le JPEG 80 par défaut est très bien (pas besoin d'un long discours, explorer un peu toutes les fonctionnalités de ce panneau), et cliquez sur Enregistrer. Dans le panneau d'enregistrement, vous pouvez demander à Photoshop de n'enregistrer que les Tranches utilisateurs, vous n'avez plus qu'à spécifier le dossier dans lequel vous voulez que toutes vos images soient placées et c'est fini.

Enfin fini, pas tout à fait, puisqu'il reste encore à créer la ou les feuilles de style CSS pour mettre en forme toutes ces images afin de créer un design (Photoshop propose d'exporter les images + le code xHTML, mais le problème c'est que toshop rivalise avec Word en programmation Web, vous risquez gros).

Je tiens à préciser qu'il existe un programme spécialisé dans le découpage fourni avec Photoshop, il s'agit d'ImageReady. Je ne l'utilise pas parce que Photoshop répond entièrement à mes besoins, mais ça vaut sans doute le coup d'essayer.