Les tranches, ou Photoshop et le webdesign

Les tranches, ou Photoshop et le webdesign

Tutoriel publié en mars 2008 par Galdon dans la catégorie Photoshop

L'outil tranche permet de gagner beaucoup de temps pour exporter un webdesign de site internet, en permettant de découper chacune des images qu'on utilise ensuite en background via les feuilles de style CSS.

Autant le dire tout de suite, si vous ne faites pas de webdesign, ce chapitre vous sera complètement inutile, mais vous pouvez quand même le lire, peut-être y trouverez-vous une autre utilité.

Pour cet exemple, je vais utiliser un menu (le menu "cours") de l'ancienne version de finalclap (la v2, qui a été utilisée de 2008 à 2009 pour ceux que ça intéresse) :

Finalclap v2
Cliquez sur l'image pour agrandir

Découper un webdesign

La première étape c'est de créer les tranches qui vont donner ensuite les images qu'on va utiliser en background image.

Commencez par télécharger le webdesign sur lequel nous allons travailler :

Menu cours (outil tranche) Menu cours (webdesign finalclap v2) découpé avec l'outil tranche.
Télécharger

L'utilisation de l'outil Tranche requiert l'affichage d'un nouveau type d'assistant : les tranches (assurez-vous que Affichage > Afficher > Tranches est cochée).

L'outil tranche est très simple à utiliser (il ressemble un peu à l'outil sélection rectangulaire), il suffit d'entourer avec un rectangle toutes les tranches dont vous aurez besoin. Sélectionnez l'outil tranche dans le panneau outil (touche K).

Ici nous allons créer 4 tranches :

  1. Le titre "cours" (qui est écrit sur l'ardoise) : menu-cours
  2. Une tranche horizontale qui contient le dégradé qui constitue le fond du menu : menu-bg-middle (l'image sera utilisée avec un repeat-y en CSS)
  3. Les coins arrondis en bas du menu : menu-bg-bottom
  4. Et enfin le rectangle vert aux coins arrondis qui est affiché au survol des liens : menu-hover

Voilà ce que j'obtiens (zoom 250% pour mieux voir) :

Découpe avec l'outil tranche

Nous n'avons créé que 4 tranches, mais pourtant vous remarquez qu'on voit d'autres tranches de couleur grise. On voit aussi que chaque tranche porte un numéro affiché en haut à gauche de chaque tranche.

Les quatre tranches que nous avons créées s'appellent des tranches utilisateur (elles sont en bleu et je vous laisse deviner pourquoi elles s'appellent comme ça), les autres ont été créées automatiquement par Photoshop (elles sont en gris).

Ne vous préoccupez pas des tranches grises, créez bien tranquillement vos propres tranches selon vos besoins. D'ailleurs on peut masquer ces tranches automatiques en cliquant sur le bouton Masquer les tranches auto dans les options de l'outil de sélection de tranche :

Masquer les tranches auto

Renommer les tranches

Après avoir créé les tranches, il va falloir leur donner un nom qui sera ensuite utilisé pour nommer les fichiers image correspondant lors de l'export. Évitez donc les accents et les espaces, le mieux est de n'utiliser que des lettres, des chiffres et des underscore ou dash : [A-Za-z0-9_-] (pour ceux qui connaissent les regex...).

Pour changer le nom d'une tranche, il suffit de double cliquer sur une tranche avec l'outil de sélection de tranche. La fenêtre options de tranche s'affiche alors :

Options de tranche

Utilisez les noms que j'ai cités plus haut dans la liste des tranches (1. 2. 3. et 4.).

Exporter un webdesign

Découper son design en tranches c'est bien, mais ça ne servirait pas à grand-chose sans l'outil d'exportation pour le web. En effet, Photoshop permet d'enregistrer toutes vos tranches dans un même dossier. Pour cela, il suffit de cliquer sur Fichier > Enregistrer pour le Web (ou Alt+Ctrl+Maj+S, attention aux crampes de doigts !).

Une grande fenêtre s'affiche, elle vous permet de choisir un format pour chaque tranche, de paramétrer la qualité...

Enregistrer pour le web
Cliquez sur l'image pour agrandir

En gros on peut utiliser 3 formats de fichiers pour le web :

  • JPEG : le jpeg est un format destructif, mais qui produit des images très légères. Par contre il ne gère pas la transparence
  • GIF / PNG-8 : le gif et le png8 sont équivalent, ces formats gèrent la transparence, mais de manière très limitée. Il n'y a pas de couche alpha avec une opacité variable, il n'y a que 2 valeurs pour l'opacité : totalement opaque ou totalement transparent. De plus, il s'agit d'un format à palette de couleurs indexées, une image ne peut contenir que 256 couleurs différentes
  • PNG-24 : ce format gère la transparence complète (canal alpha, avec 256 valeurs possibles : 0-255), et il n'utilise pas de couleurs indexées. Son taux de compression dépend de l'image, il peut être meilleur que JPEG si l'image comporte peu de couleurs différentes, et au contraire bien pire pour une image dont l'histogramme est très large, comme pour les photographies par exemple.
    Attention : internet explorer 6 et 7 (le navigateur le plus pourri du monde) ne gère pas la transparence des PNG-24.

Sur l'image ci-dessus, j'ai choisi le format GIF, on peut voir sur la droite la palette de couleurs indexées que Photoshop a générée pour cette image.

Une fois que tout est réglé, cliquez sur le bouton Enregistrer. Dans la fenêtre d'enregistrement qui s'affiche alors, vous trouverez plusieurs listes déroulantes :

  • Format
    • HTML et images
    • Images
    • HTML
  • Paramètres
    • Personnalisés
    • Image d'arrière-plan
    • Paramètres par défaut
    • XHTML
    • Autre...
  • Tranches
    • Toutes les tranches
    • Toutes les tranches utilisateur
    • Tranches sélectionnées

Utilisez les paramètres qui sont en gras pour exporter uniquement les images des tranches utilisateur. Photoshop permet aussi d'exporter du code HTML ou xHTML en plus des images, mais je vous déconseille d'utiliser cette technique car cela produit une intégration HTML/CSS de très mauvaise qualité avec des <table> comme dans les années 90...

Pour résumer, Photoshop rivalise avec Word en programmation web, donc vous risquez gros...)

Maintenant il ne vous reste plus qu'à écrire votre code HTML et la feuille de style CSS qui va avec, ça s'appelle l'intégration et ça n'est pas le sujet de ce cours Photoshop.

À propos d'imageready

Dans les anciennes version, Photoshop était livré avec un logiciel spécialement dédié au découpage de webdesign : ImageReady. Ce logiciel n'existe plus depuis la Creative Suite 3 (CS3), il proposait en gros les mêmes fonctionnalités que l'outil tranche et la fonction Enregistrer pour le Web.

Sprite CSS

Dans ce tutoriel, j'ai pris pour exemple un vieux webdesign de 2008. Ça n'est pas un hasard, car aujourd'hui on utilise plus tellement les images directement dans le CSS.

À la place on regroupe plusieurs images qu'on place dans une seule image "partagée", que l'on appelle une sprite CSS. Ensuite il n'y a plus qu'à jouer avec la propriété CSS background-position pour utiliser telle ou telle zone de la sprite.

L'intérêt c'est que cette technique économise beaucoup de requêtes HTTP, ce qui accélère le temps de chargement et d'affichage d'une page web, en plus d'alléger la charge et les logs du serveur.

Sur finalclap par exemple, j'utilise une sprite qui ressemble à ça :

Sprite CSS finalclap

Alors même si l'outil tranche ne permet pas de générer directement des sprite, il peut quand même être d'une grande utilisé, ne serait-ce que pour exporter séparément chacune des images à inclure dans le sprite, avant de les rassembler et de les placer manuellement dans la sprite, avec Photoshop.

Mais l'outil tranche est aussi d'une grande utilité pour obtenir la position (X, Y) d'une tranche, qui est affichée dans la fenêtre options de tranche, et qu'il suffit de recopier dans la feuille de style (sans y aller au pifomètre avec Firebug ou l'inspecteur chrome). Ça fait gagner du temps et rends cette tâche moins pénible.

Découvrez ce tutoriel photoshop : intégration de texte en 3d à lire tout de suite !

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.

18 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°1466 par Myki
Myki mardi 17 août 2010, 11:36
L'outil tranche a été regroupé sous l'outil de recadrage... Par conséquent maintenir appuyé la souris sur l'outil de recadrage, glisser vers la droite et enfin sélectionner l'outil tant convoité ;)

De rien...
commentaire n°1571 par sonwukong
sonwukong jeudi 11 novembre 2010, 10:04
bonjour,
ça fait un moment que je cherche sans trouver, peut-ont renommer le dossier "images" quand on valide nos images "tranchées" pour mettre le nom que l'on veut ?
commentaire n°1577 par Galdon
Galdon vendredi 12 novembre 2010, 16:46
@sonwukong : Dans la boîte de dialogue "Enregistrer" (dans Enregistrer pour le web), il y a une liste déroulante "Paramètres" > choisis Autre...

Ensuite, tu peux changer le nom ("Dossier de destination des images".
commentaire n°1610 par thib3113
thib3113 dimanche 5 décembre 2010, 18:29
merci pour tes tutos j'utilisais photofiltre mais prévoyé de passer sous photoshop d'ici peu, j'utilise photoshop CS (vieux) ...
commentaire n°1847 par Bruckle
Bruckle mercredi 15 juin 2011, 18:02
Pour l'outil tranche une fois que tu auras tout bien mit en HTML :) tu risques d'avoir un décalage entre les images sous fear-fou car les images ont une bordure de deux pixels. CONSEIL : pour contrer ca tu devrais ajouter un ch'tit code CSS a tout ca si tu veux pas que ce soit le gwos bowdel, que voici
img {
display : block;
border:0;
}

après t'as plus qu'à le lier à ta feuille HTML...(j'entends les "comment on fait????* ><)
une fois que vous avez enregistré votre feuille de style css dans le MEME DOSSIER QUE VOTRE FICHIER HTML (je précise car sinon vous allez vous taper tout un cheminement C://Users/bla bla bla/fichier)
donc ouvrez votre fichier HTML et sous la balise <head> vous écrivez
<link rel="stylesheet" href="votrefichiercss.css">

Voilou bonne création de site
commentaire n°3079 par Daroche
Daroche mardi 19 mai 2015, 16:13
Merci beaucoup pour la combine !! ça m'a sauvé la vie je n'y avais même pas pensé. J'ai une petite combine pour éviter de générer un fichier supplémentaire avec style.css, il suffit d'ajouter ce code :
img {
display : block;
border:0;
}

entre les balises <head> et </head> du fichier html et le tour est joué ! Mailchimp l'interprète correctement et l'immense majorité des boites mail aussi :)

Merci encore ++
commentaire n°1881 par Dan
Dan lundi 11 juillet 2011, 16:57
Merci pour ce tuto! Je n'arrive seulement pas à l'enregistrer autrement qu'en HTML... Quand je l'enregistre en format "image" ca donne rien. En gros je comprend pas du tout l'histoire des feuilles de "style CSS"...
Merci d'avance
commentaire n°2523 par MarinePI
MarinePI mercredi 20 mars 2013, 16:11
Bonjour,
Je souhaite faire un catalogue PDF de recettes assez graphique avec photoshop. J'aimerai ajouter des liens sur les ingrédients vers mes produits.
Est-ce possible ? Si oui comment faire pour transférer vers mon PDF les liens faits avec les tranches ?
Merci par avance de votre réponse.
commentaire n°2566 par JoBrazil
JoBrazil vendredi 24 mai 2013, 15:46
Salut, merci pour tes tutos ;) Faute d'orthographe :

"Tranches
Toutes les tranches
Toutes les tranches utilisateur
Tranches sélectionnées

Utilisez les paramètres ===="que qui"==== sont en gras pour exporter uniquement les images des tranches utilisateur. Photoshop permet aussi d'exporter du code HTML ou xHTML en plus des images, mais je vous déconseille d'utiliser cette technique car cela produit une intégration HTML/CSS de très mauvaise qualité avec des <table> comme dans les années 90...
commentaire n°2573 par Galdon
Galdon dimanche 2 juin 2013, 23:02
Je viens de corriger la faute, merci de l'avoir signalé.
commentaire n°2709 par Espoir
Espoir lundi 16 décembre 2013, 22:50
Bonjour,
Juste pour vous remercier pour vitre tuto qui m'a beaucoup aidé.
Je suis en formation pour être webdesigner et si un jour vous pourriez mettre le tuto de votre menus "réseaux sociaux" à gauche ou tout simplement d'avantage de tutos en intégration css et webdesign, ce serait super :)

Bon courage dans vos projets et merci encore ! ;)
commentaire n°2710 par Espoir
Espoir lundi 16 décembre 2013, 22:51
Euh... à droite pas à gauche lol !
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré