Dans ce tuto Photoshop, Arzhur Caouissin va commencer la découpe de la maquette HTML avec l'outil tranche. On peut trouver l'outil tranche derrière l'outil de recadrage. Nous utiliserons plus tard l'outil de sélection de tranches pour modifier les tranches créées.
L'outil peut donc par glisser déposer de créer les cadres dont nous avons besoin. Chaque cadre va se matérialiser par une image à l'export. Le nom de la tranche s'affiche en haut à gauche du cadre et automatiquement, Photoshop va créer une autre tranche avec le reste de l'image. Les tranches créées en bleu sont celles faites manuellement et celle en gris sont faites automatiquement par Photoshop, celle-ci ne seront pas exportés en image. Sur la deuxième ligne, le formateur va créer une tranche pour chaque bouton.
Une fois les boutons fait, il découpe les parties sans boutons sur la même ligne. Il va maintenant couper la partie qui se trouve sous les boutons. Il ne découpe pas la partie blanche qui va posséder le texte HTML car elle n'aura pas besoin d'être présente sur le site. Il finit avec le pied de page de la maquette.
Éditeurs Photoshop