[Web] - Découper un design web avec l'outil Tranche sous Illustrator

Tutorial - Comment créer une découpe de son design et exporter les images optimisées pour le web

Après avoir créé votre design web sous Illustrator (ou dans Photoshop par ex), vous voulez maintenant le découper pour pouvoir exporter les images séparément.
Il existe pour cela l'outil Tranche dans Illustrator, que vous pourrez trouvez dans la boîte à outils.
Il vous permet de créer des zones qui seront exportées séparemment.

Vous pourrez ensuite optimiser le poids des images en les exportant en jpeg, gif ... et dans la palette de couleurs qui correspondra à votre image.
Illustrator peut aussi fournir une page HTML mise en forme avec des tableaux.
Il est fortement conseillé de retravailler le design découpé avec un fichier CSS pour une meilleure accessibilité.








Tout d'abord, ouvrez votre image sous Illustrator et enregistrez votre fichier .ai.

Sélectionner ensuite l'outil Tranche dans la boîte à outils :

Cet outil permet de tracer des zones rectangulaires qui fixeront les limites de chaque image à l'exportation.
Il s'utilise comme l'outil Rectangle de séléction, tracez un rectangle avec un cliqué-déplacé.
Pour créer une tranche de forme carrée, maintenez la touche MAJ enfoncée.
Si vous voulez plus de précision, vous pouvez créer une tranche autour d'une selection précise d'éléments.
Pour cela, il faut séléctionner les éléments en question puis Objet > Tranche > Créer d'après la sélection.
Vous allez remarquer qu'Illustrator crée des zones automatiques autour de la première zone que vous allez créer.
Ces zones vont remplir le reste de l'illustration de tranches pour que l'ensemble du design soit découpé.





Pour sélectionner une tranche, cliquez simplement sur la tranche avec l'outil Sélection de Tranche d'Illustrator ou cliquez sur le tracé avec l'outil Sélection habituel.
Pour accéder à cet outil, cliquez longuement sur l'outil Tranche jusqu'à ce que le second outil appraisse.


Si vous voulez modifier une tranche pour lui attribué un type différent (Image, Pas d'image, Texte HTML), sélectionnez une tranche puis choisissez Objet > Tranche > Options de tranche.
Pour redimensionner toutes les tranches aux limites du plan de travail, choisissez Objet > Tranche > Ecrêter selon le plan de travail.
Pour modifier la taille d'une tranche, toujours avec l'outil Sélection de Tranche, cliquez-déplacez les bords quand vous voyez le pointeur se transformer en double flèche.










Pour enregistrer les images correspondant aux tranches, choisissez Fichier > Enregistrer Pour Le Web ..., une boîte de dialogue va apparaître.



Vous retrouvez l'outil sélection de tranches sur le côté gauche (en haut à gauche du screenshot).
Une fois la tranche sélectionnée, vous avez donc la possibilité de choisir la compression et la qualité de chaque tranche dans les menus de droite. Cliquez ensuite sur le bouton "Enregistrer" et choisissez si vous voulez exporter seulement les images ou bien un fichier HTML avec la découpe de votre design.

• Si vous voulez éviter de sélectionner les tranches par erreurs, vous pouvez les verrouiller : Affichage > Verrouiller les tranches.
• Pour éviter de trop charger votre illustration, vous avez la possibilité de cacher les tranches : Affichage > Masquer les tranches.
• Pour fusionner / combiner des tranches, sélectionnez les tranches à combiner puis choisissez : Objet > Tranche > Combiner les tranches.
• Pour supprimer une tranche, sélectionnez la tranche, puis appuyez sur la touche Suppr.

Si vous avez des problèmes avec la découpe du design votre site internet, laissez un commentaire sur cet article.