Présentation des tranches

Lorsque vous concevez des éléments graphiques pour le web, différentes parties d’une image doivent souvent se comporter indépendamment. Une zone peut renvoyer vers une URL, une autre peut se charger plus vite et une autre encore peut nécessiter des paramètres d’amélioration différents. Les tranches fractionnent une seule image en une grille de petits éléments qui fonctionnent ensemble comme une page web, tout en vous laissant le contrôle de chaque section.

Photoshop réassemble les images découpées en tranches sur les pages web à l’aide de tableaux HTML ou de calques CSS. Lorsque vous exportez une image découpée en tranches avec la commande Fichier > Export > Enregistrer pour le web, Photoshop enregistre chaque tranche dans un fichier distinct.Il génère également le code HTML ou CSS nécessaire pour afficher l’image comme une composition unique dans un navigateur.

Fonctionnement des tranches

Les tranches divisent une image le long de lignes de grille invisibles, créant des sections rectangulaires qui fonctionnent comme des fichiers indépendants. Chaque tranche conserve sa position dans la mise en page globale tout en fonctionnant comme un élément distinct avec ses propres propriétés, paramètres d’amélioration et comportements.

Cette approche offre quelques avantages pratiques :

• Attribuer différents liens URL pour créer des éléments de navigation cliquables
• Appliquer différents paramètres de compression pour équilibrer la qualité et la taille de fichier selon les zones
• Mettre à jour des sections individuelles sans réexporter l’ensemble de la composition

Type de tranche selon la création

Photoshop classe les tranches selon leur mode de création, et chaque type se comporte différemment lorsque vous modifiez l’image.

• Tranches utilisateur : Sections que vous définissez manuellement à l’aide de l’Outil Tranche outil. Vous contrôlez entièrement leur taille, leur position et leurs propriétés, et elles restent en place jusqu’à ce que vous les déplaciez ou les modifiiez.
• Tranches basées sur le calque : Les tranches incluent tous les pixels d'un calque.Leurs limites se mettent automatiquement à jour lorsque vous déplacez ou modifiez le calque. Elles conviennent bien au contenu qui change souvent, mais offrent moins de contrôle sur le positionnement précis que les tranches utilisateur.
• Tranches automatiques : Tranches qui remplissent l’espace restant d’une image non couvert par les tranches utilisateur ou les tranches basées sur le calque. Photoshop génère ces tranches automatiquement et les régénère chaque fois que vous ajoutez, supprimez ou modifiez d’autres tranches. Toutes les tranches automatiques d’une image partagent les mêmes paramètres d’amélioration.
• Sous-tranches : un type spécialisé de tranche automatique qui apparaît lorsque des tranches se chevauchent. Les sous-tranches indiquent comment Photoshop divise les zones de chevauchement lorsque vous enregistrez le fichier amélioré. Vous ne pouvez pas sélectionner ni modifier les sous-tranches indépendamment des tranches sous-jacentes.

Type de tranche par contenu

Les tranches sont également classées selon le type de contenu qu’elles contiennent.

• Tranches d’image : type de tranche par défaut pour le contenu visuel, contenant des données d’image provenant du document Photoshop.
• Tranches sans image : cellules de tableau vides pour le texte HTML ou les couleurs unies. Photoshop ne procède pas à l’export de ces éléments en tant que fichiers image, ce qui les rend utiles pour du texte actif et sélectionnable.
• Tranches de tableau : tranches qui définissent la façon dont Photoshop structure le tableau HTML utilisé pour réassembler une image découpée en tranches dans un navigateur.

Repères visuels des tranches

Photoshop se sert de repères visuels pour vous aider à distinguer les types de tranches pendant que vous travaillez.

• Lignes de tranche : les lignes pleines signalent les tranches utilisateur ou les tranches basées sur un calque, et les lignes pointillées signalent les tranches automatiques.
• Couleurs de tranche : les symboles bleus identifient les tranches utilisateur et les tranches basées sur un calque, et les symboles gris signalent les tranches automatiques.
• Numéros de tranche : les numéros, situés dans le coin supérieur gauche de chaque tranche, sont affichés de gauche à droite et de haut en bas, et sont mis à jour automatiquement lorsque vous réorganisez ou modifiez des tranches.
• Badges de tranche : des petites icônes identifient le contenu et le type de la tranche. Par exemple, une icône d’image signale une tranche utilisateur contenant du contenu d’image, une icône d’image barrée signale une tranche utilisateur sans contenu d’image, et une icône de calque signale une tranche basée sur un calque.

Reconnaître ces distinctions visuelles vous aide à identifier rapidement les types de tranches et à travailler plus efficacement avec des mises en page de tranches complexes lorsque vous découpez des pages web en tranches.