1 - Introduction

Vous venez de faire un superbe design de kit graphique, et là vous vous demandez comment vous allez pouvoir le mettre en page !
La réponse se trouve dans la découpe de votre image.

Pas de remède miracle pour la découpe.
Certain logiciel vont vous faire la découpe des morceaux (Paintshop pro, Image Ready...), mais c'est à vous de dire où il faut couper, et c'est ça le plus difficile !

On peut donc dire que l'opération va se dérouler en 3 temps :
- le tracé des lignes de coupe
- la découpe en elle-même
- le placement des morceaux dans la page

2 - Pourquoi faut-il découper ?

Hormis le fait que découper une image permet de la charger un peu plus vite, la principale finalité de la chose est de pouvoir gérer des rollovers sans surcharger la bande passante, et donc le temps de réponse.
Définition :
Un rollover est l'opération par laquelle, au passage de la souris une image est remplacée par une autre, histoire de montrer que l'on est passé au-dessus d'un lien cliquable.
Exemple :

Si on a une image qui fait 100Ko avec 8 parties réagissants au passage de la souris, il faudrait donc 9 images :
- 1 image avec tous les rollover désactivés
- 1 image avec le rollover du bouton 1 activé
- 1 image avec le rollover du bouton 2 activé
- etc...
soit 9*100Ko = 900Ko, ce qui est énorme.

3 - Principe de base

Donc, le principe c'est de partager l'image du kit graphique en morceaux rectangulaires, de façon à isoler les parties qui peuvent changer (rollover) des parties qui restent inchangées.
De cette manière, seules les images qui ont des rollovers seront remplacées, ce qui fait gagner énormément au niveau du téléchargement.
Ensuite ces morceaux seront placés dans un tableau, chaque morceau dans une cellule, pour reconstituer l'image globale.