Voici un petit tutorial sur la découpe d'interface. Pour cet exemple, j'ai choisi de découper une image toute simple afin d'en faire l'intitulé d'une page web.  
 
Logiciels : Photoshop 6.0 fr, ImageReady 3.0 fr
 
1. Ouvrez Photoshop, faites "Fichier > Ouvrir..." et sélectionnez l'image que vous souhaitez découper.
 

 
 
2. Afin de découper plus facilement votre interface, nous allons utiliser des guides (ou règles). Faites "Affichage > Afficher les règles" (ou ctrl + 'r'.
 
 
3. Vous allez désormais placer les repères de découpage aux endroits clés de votre image. Pour créer un guide, il vous suffit de cliquer dans l'une des règles qui bordent votre image, de laisser votre bouton de souris appuyé et de déplacer votre pointeur à l'intérieur de l'image. Pour placer correctement vos règles, vous pouvez vous aider de la palette "infos", qui vous donne en temps réel la position en x ou en y de votre curseur.
 

 

 
 
4. Maintenant que vos règles sont en place, faites "Fichier > Passer à... Adobe ImageReady 3.0" afin d'ouvrir l'image dans ImageReady.
 
 
5. Pour découper l'image, sélectionnez l'outil "tranche" . Découpez votre image à l'aide des repères mis en place sous Photoshop (note : il est également possible de positionner les repères dans ImageReady).
 

 
 
6. Avant de sauvegarder votre image, il est nécessaire de l'optimiser. Au dessus de votre image se trouvent plusieurs onglets. Cliquez sur "2 vignettes" pour afficher simultanément l'image originale et son homologue optimisée. Ensuite, travaillez votre image grâce à la palette d'optimisation.
 

 
Il vous est également possible d'optimiser une à une les zones découpées. Sélectionnez l'outil "Outil sélection de tranches..." (cliquez sur l'outil "tranches", et restez appuyé une ou 2 secondes pour faire apparaître les outils apparentés) et cliquez dans l'une des zones découpées. Vous pourrez ainsi faire varier l'optimisation en fonction de la zone concernée, en définissant telle partie de l'image en compression jpeg 100% (une zone très détaillée), et telle autre en gif 2 couleurs (un fond blanc) par exemple. Trouver le taux de compression idéal de chaque zone peut-être fastidieux, mais c'est un travail nécessaire à l'optimisation idéale de votre interface.
 
 
7. Dernière étape : sauvegardez votre (vos) image(s). Faites "Fichier > Enregistrer une copie optimisée sous...", entrez le nom de votre page html et validez. Vous avez également la possibilité de personnaliser la sortie en html, à l'aide du bouton "Paramètres de sortie". De très nombreux attributs sont modifiables, pensez-y !