Guide d'utilisation Annuler

Découpage en tranches des pages web

Les tranches divisent une image en plusieurs petites images qui sont ensuite reconstituées sur une page web à l’aide d’un tableau HTML ou de calques CSS. Le fait de diviser l’image vous permet d’affecter des liens URL pour créer une navigation de page ou d’optimiser chaque partie d’une image à l’aide de ses paramètres d’optimisation.

Vous exportez et optimisez une image découpée en tranches à l’aide de la commande Enregistrer pour le Web. Photoshop enregistre chaque tranche dans un fichier séparé et génère le code HTML ou CSS nécessaire à l’affichage de l’image découpée en tranches.

Page web divisée en tranches dans Photoshop
Page web divisée en tranches

Gardez à l’esprit les notions de base suivantes lorsque vous travaillez avec les tranches :

  • Vous pouvez créer une tranche avec l’outil Tranche ou d’après des calques.

  • Une fois que vous avez créé une tranche, vous pouvez la sélectionner avec l’outil Sélection de tranche , puis la déplacer, la redimensionner ou l’aligner avec les autres tranches.

  • Vous pouvez définir les options de chaque tranche, notamment le type de tranche, son nom et l’URL, dans la boîte de dialogue Options de tranche.

  • Vous pouvez optimiser chaque tranche selon différents paramètres d’optimisation dans la boîte de dialogue Enregistrer pour le Web.

Types de tranches

Les tranches sont classées en fonction de leur type de contenu (tableau, image, sans image) et de la façon dont elles ont été créées (par l’utilisateur, d’après un calque, automatiquement).

Les tranches créées à l’aide de l’outil Tranche sont appelées des tranches utilisateur ; celles créées à partir d’un calque sont appelées des tranches créées d’après un calque. Lorsque vous créez une nouvelle tranche utilisateur ou une tranche d’après un calque, des tranches auto supplémentaires sont générées pour prendre en charge les zones restantes de l’image. En d’autres termes, les tranches auto remplissent l’espace de l’image qui n’est pas défini par des tranches utilisateur ou des tranches créées d’après un calque. Les tranches auto sont régénérées chaque fois que vous ajoutez ou modifiez des tranches utilisateur ou des tranches créées d’après un calque. Vous pouvez convertir les tranches auto en tranches utilisateur.

Les tranches utilisateur, les tranches créées d’après un calque et les tranches auto présentent un aspect différent : les tranches utilisateur et les tranches créées d’après un calque sont définies par un trait plein, tandis que les tranches auto sont délimitées par une ligne en pointillé. En outre, les tranches utilisateur et les tranches créées d’après un calque se distinguent par une icône différente. Vous pouvez afficher ou masquer les tranches auto, ce qui facilite la visualisation de votre travail avec des tranches utilisateur et celles créées d’après des calques.

Une sous-tranche est une tranche auto générée lorsque les tranches créées se chevauchent. Les sous-tranches déterminent la division de l’image lors de l’enregistrement du fichier optimisé. Bien que les sous-tranches soient numérotées et affichent un symbole de tranche, vous ne pouvez ni les sélectionner ni les éditer séparément à partir de la tranche sous-jacente. Les sous-tranches sont régénérées chaque fois que vous réorganisez l’ordre d’empilement des tranches.

Les tranches sont créées selon différentes méthodes :

  • Les tranches auto sont générées automatiquement.

  • Les tranches utilisateur sont créées à l’aide de l’outil Tranche.

  • Les tranches créées d’après un calque sont créées à l’aide du panneau Calques.

Découpage en tranche d’une page web

L’outil Tranche vous permet de tracer des traits de tranche directement sur une image ou de concevoir votre image à l’aide de calques et créer des tranches d’après des calques.

Création d’une tranche avec l’outil Tranche

  1. Sélectionnez l’outil Tranche . (Appuyez sur la touche C pour passer en revue les outils groupés avec l’outil Recadrage.)

    Les tranches existantes s’affichent automatiquement dans la fenêtre de document.

  2. Choisissez un style dans la barre d’options :

    Normal

    Détermine les proportions de la tranche pendant que vous faites glisser.

    Proportions fixes

    Définit le rapport entre la largeur et la hauteur. Entrez des nombres entiers ou décimaux comme rapport. Par exemple, pour créer une tranche deux fois plus large que haute, entrez 2 pour la largeur et 1 pour la hauteur.

    Taille fixe

    Spécifie la largeur et la hauteur de la tranche. Entrez des valeurs entières pour les pixels.

  3. Faites glisser sur la zone où vous voulez créer une tranche. Maintenez la touche Maj enfoncée tout en faisant glisser pour créer une tranche de forme rectangulaire. Maintenez la touche Alt (Windows) ou Option (Mac OS) enfoncée tout en faisant glisser pour tracer à partir du centre. Utilisez la commande Affichage > Magnétisme pour aligner une nouvelle tranche sur un repère ou sur une autre tranche de l’image. Reportez-vous à la section Déplacement, redimensionnement et magnétisme des tranches utilisateur.

Création de tranches d’après des repères

  1. Ajoutez des repères à une image.
  2. Sélectionnez l’outil Tranche, puis cliquez sur Tranches d’après les repères dans la barre d’options.

    Lorsque vous créez des tranches d’après des repères, les tranches existantes sont supprimées.

Création d’une tranche d’après un calque

Une tranche créée d’après un calque englobe toutes les données de pixel dans le calque. Si vous déplacez le calque ou modifiez son contenu, la zone de la tranche s’adapte automatiquement pour inclure les nouveaux pixels.

Création d’une tranche d’après un calque dans Photoshop
Une tranche créée d’après un calque est mise à jour lorsque le calque source est modifié.

Les tranches créées d’après un calque sont moins souples ; vous pouvez cependant convertir une tranche de ce type en tranche utilisateur. Reportez-vous à la section Conversion d’une tranche auto ou d’une tranche créée d’après un calque en tranche utilisateur.

  1. Sélectionnez un calque dans le panneau Calques.
  2. Choisissez la commande Calque > Nouvelle tranche d’après un calque.
Remarque :

Ne créez pas de tranche d’après un calque lorsque vous prévoyez de déplacer ce calque sur une zone importante de l’image au cours d’une animation, car les dimensions de la tranche risquent d’être beaucoup trop grandes.

Conversion d’une tranche auto ou d’une tranche créée d’après un calque en tranche utilisateur

Une tranche créée d’après un calque étant liée au contenu en pixels du calque, la seule façon de la déplacer, la combiner, la diviser, la redimensionner et l’aligner est de modifier le calque, sauf si vous la convertissez en tranche utilisateur.

Toutes les tranches auto d’une image sont reliées et partagent les mêmes paramètres d’optimisation. Si vous souhaitez définir différents paramètres d’optimisation pour une tranche auto, vous devez la convertir en tranche utilisateur.

  1. À l’aide de l’outil Sélection de tranche , sélectionnez une ou plusieurs tranches à convertir.
  2. Cliquez sur Convertir dans la barre d’options.

Affichage des tranches et des options de tranches

Vous pouvez afficher les tranches dans Photoshop et dans la boîte de dialogue Enregistrer pour le Web. Les caractéristiques suivantes permettent d’identifier et de différencier les tranches :

Traits

Ils définissent les limites d’une tranche. Les traits pleins indiquent qu’il s’agit d’une tranche utilisateur ou créée d’après un calque, tandis que les traits en pointillé dénotent une tranche auto.

Couleurs

Elles permettent de différencier les tranches utilisateur et créées d’après un calque des tranches auto. Par défaut, les tranches utilisateur et créées d’après un calque contiennent des symboles bleus, tandis que les symboles des tranches auto sont gris.

En outre, la boîte de dialogue Enregistrer pour le Web utilise des réglages pour atténuer les couleurs des tranches désélectionnées. Ces réglages servent à des fins d’affichage uniquement et n’agissent pas sur la couleur de l’image finale. Par défaut, le réglage des couleurs des tranches auto est égal au double de celui des tranches utilisateur.

Numéros

Les tranches sont numérotées  de gauche à droite et de haut en bas, à partir du coin supérieur gauche de l’image. Si vous modifiez la disposition ou le nombre total des tranches, les numéros sont mis à jour pour refléter le nouvel ordre.

Badges des tranches

Les badges ou icônes suivants indiquent certaines conditions :

La tranche utilisateur contient une image.

La tranche utilisateur ne contient pas d’image.

La tranche est basée sur un calque.

Affichage ou masquage de bordures de tranches

  1. Choisissez Affichage > Afficher > Tranches. Pour afficher ou masquer des tranches en même temps que d’autres éléments, utilisez la commande Extras (voir la section Affichage ou masquage des Extras).

Affichage ou masquage de tranches auto

  1. Effectuez l’une des opérations suivantes :
    • Sélectionnez l’outil Sélection de tranche , puis cliquez sur Afficher les tranches automatiques ou Masquer les tranches automatiques dans la barre d’options.

    • Choisissez Affichage > Afficher > Tranches. Les tranches auto apparaissent avec vos autres tranches.

Affichage ou masquage des numéros de tranche

  1. Utilisez l’une des méthodes suivantes :
    • Sous Windows, choisissez la commande Edition > Préférences > Repères, grille et tranches.

    • Sous Mac OS, choisissez la commande Photoshop > Préférences > Repères, grille et tranches.

  2. Dans la zone Tranches, cochez la case Afficher le numéro des tranches.

Changement de la couleur de trait des tranches

  1. Sous Windows, choisissez la commande Edition > Préférences > Repères, grille et tranches ; sous Mac OS, choisissez la commande Photoshop > Préférences > Repères, grille et tranches.
  2. Dans la zone Tranches, choisissez une couleur dans le menu Couleur du trait.

    Une fois la couleur modifiée, les lignes de tranche sélectionnées sont automatiquement affichées dans une couleur contrastante.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?