Découpage d'un psd avec Photoshop (tranches pour le web)

Bonjour,

Savez vous s'il existe une méthode ou une technique à appliquer quand on découpe un psd avec l'outil tranches de photoshop ?

En effet, les personnes que je vois (et moi même) travaillons de manière plutôt empirique et surtout au feeling lors du découpage de nos psd sans réellement savoir par quoi commencer et quoi découper.
Du coup, je me demandais s'il y avait une technique à adopter lors de ce fameux découpage.

Merci pour vos infos.

Bonjour Pan,

J'ai déplacé ton sujet qui n'était pas à sa place dans la section Ergonomie et esthétique (où l'on présente généralement un "projet finalisé" que l'on soumet à la "critique")

Concernant ta question, je te renvoie pour un premier élément de réponse, à l'article publié par Florent V.

Viendront sans aucun doute l'avis des experts de photoshop (ou autre outil de prédilection) pour éclairer davantage tes lumières

Bon courage,
Cdt,
Sylvain

Salut,

Pour ma part quand je découpe un psd, j'essaye avant de visualiser la mise en forme CSS que je vais appliquer afin de mieux ajancer les images.

et ensuite je découpe les parties du design donc j'ai besoin afin de le reproduire le plus fidèlement possible.

Pour ma part, c'est simple, je ne découpe pas de PSD. Déjà, Photoshop c'est pas terrible pour le design web (cf. Fireworks -- amis trolleurs du samedi, bonjour). Mais si jamais le graphiste s'est entêté au point de produire son design avec Photoshop, je me contente alors d'exporter le design complet en PNG. Je fais parfois aussi une «planche» à fond transparent sur laquelle je copie différents éléments du design dont je sais qu'il va falloir les traiter en images avec fonds ou bordures translucides, et donc ça me donne un deuxième PNG.

Ensuite je recompose et découpe mes images individuelles avec The Gimp, qui est très bien pour ça.

Quant à savoir de quelles images on va avoir besoin exactement... eh bien, ça s'appelle l'expérience de l'intégration web.
(Et j'aurais tendance à dire que si on utilise l'outil tranches de Photoshop, on aura du mal à faire un travail correct. Mais un seul troll par message ça suffit donc je ne le dis pas, hein.)

PS: le message de FunK ci-dessus est frappé au coin du bon sens.
Modifié par Florent V. (20 Sep 2008 - 12:38)

Dans l'ancien temps j'utilisais aussi firefox, mais bon l'outil de découpage est similaire à photoshop. Donc quand j'ai un psd go photoshop

FunK a écrit :
Dans l'ancien temps j'utilisais aussi firefox, mais bon l'outil de découpage est similaire à photoshop. Donc quand j'ai un psd go photoshop

Un nouveau plugin du fameux navigateur ?

LoL je voulais dire fireworks
Modifié par FunK (20 Sep 2008 - 13:10)

Florent V. a écrit :
Pour ma part, c'est simple, je ne découpe pas de PSD. Déjà, Photoshop c'est pas terrible pour le design web (cf. Fireworks -- amis trolleurs du samedi, bonjour).

Peux tu dire quel soft tu utilises à la place de Photoshop ?

a écrit :
Ensuite je recompose et découpe mes images individuelles avec The Gimp, qui est très bien pour ça.

Est-ce que tu utilises aussi un système de tranches ?

a écrit :
Et j'aurais tendance à dire que si on utilise l'outil tranches de Photoshop, on aura du mal à faire un travail correct.

Peux tu me dire pourquoi ; en utilisant le magnétisme et une grille j'arrive à m'en sortir même si ça reste empirique pour moi

pan a écrit :
Peux tu dire quel soft tu utilises à la place de Photoshop ?

Il utilise Fireworks et The Gimp.



ps : Petite précision qui se doit d'être ajoutée, The Gimp est entièrement gratuit et open source.
Modifié par touvert (20 Sep 2008 - 13:33)

touvert a écrit :


Il utilise Fireworks et The Gimp.

Arrrrggll mais bon sang pourquoi ?
The gimp ok mais fireworks ???

pan a écrit :

Arrrrggll mais bon sang pourquoi ?
The gimp ok mais fireworks ???

Que sais-je moi, probablement une question de feeling avec l'outil.^^

pan a écrit :
Peux tu dire quel soft tu utilises à la place de Photoshop ?

Comme dit dans mon message: Fireworks (Adobe) est à mon sens plus adapté pour le design web que Photoshop. On peut bien sûr travailler certains éléments graphiques dans Illustrator ou Photoshop (ou autres!) pour les utiliser dans Fireworks, mais que ce soit pour le prototyping ou la finalisation du design, Fireworks est tout simplement plus souple, plus complet et plus adapté au design web (car fait pour ça!) que Photoshop (pas fait pour ça à la base).

Pour la partie intégration (découpages d'images), j'utilise The Gimp. Je suppose que Photoshop ou Fireworks peuvent faire l'affaire également.

pan a écrit :
Est-ce que tu utilises aussi un système de tranches ?

Non, car:
- tout ce qui est dans un design n'est pas à exporter en images, loin de là;
- l'image dont on a besoin pour réaliser tel ou tel élément est rarement l'image telle qu'elle apparait dans le design: certains éléments doivent être exportés sur fond transparent, tandis que d'autres (images de fond notamment) doivent souvent être recomposés pour créer des éléments graphiques plus aptes (avec le code HTML et CSS qui va bien) à s'adapter aux contraintes du Web telles que l'extensibilité en hauteur, par exemple.

a écrit :
Et j'aurais tendance à dire que si on utilise l'outil tranches de Photoshop, on aura du mal à faire un travail correct.

Parce qu'exporter des bouts d'image tels qu'ils apparaissent sur le design (avec texte et autres contenus variables masqués, bien sûr) est insuffisant.

Exemple d'image de fond utilisée récemment dans une intégration (commande pro):

Note bien les quatre parties de l'image. L'espacement entre les parties de gauche et celles de droite est calculé au pixel près.
Si tu fais ça avec un outil «tranches», alors tu es très très fort.
Modifié par Florent V. (20 Sep 2008 - 13:47)

pan a écrit :
Arrrrggll mais bon sang pourquoi ?
The gimp ok mais fireworks ???

Le meilleur webdesigner que je connais utilise essentiellement Fireworks. Pour ma part je fais très peu de design web (pas vraiment mon métier), mais Fireworks m'apparait comme un outil très puissant pour ça.

Du point de vue de l'intégrateur web, par contre, il n'y a pas photo entre un design produit dans Photoshop et le même produit dans Fireworks: Fireworks donne un rendu plus maitrisé pour des contenus destinés à être affichés sur écran, avec des pixels plus nets. On évite les effets de bordures «sales» où une bordure de 2px de large fera 2px pile d'un côté, et 3px (dont deux translucides) de l'autre.
Photoshop est tout simplement un outil pour le print, plus apte à gérer du 600dpi que du design web sur un canvas en 1280x1600px (par exemple).

Euh... oui troll c'est le mot.
J'ai envie de dire que tu maitrises mieux Fireworks que Photoshop c'est tout. C'est une question de pratique. Personnellement, j'utilise Photoshop depuis des années et je n'ai jamais utilisé l'outil tranche pour découper une interface - sauf dans mes jeunes années de découverte du produit -, il y a bien d'autres outils dans Photoshop pour découper une interface, au nanopixel près. Ton bout d'image peut très bien être découpé dans Photoshop de la même façon et il ne faut pas être un expert pour le faire.

Ce n'est pas parce que Photoshop fait du 600dpi - qu'on doit utiliser tous les 36 du mois d'ailleurs - qu'il ne sait pas faire du web. Le problème avec Photoshop, c'est que tout ne t'es pas fourni rôti dans le bec, il faut de l'expérience. Mais une fois l'outil bien en main, tu peux faire tout ce que tu veux, de manière beaucoup plus souple que Fireworks.

Fireworks a une fonctionnalité bien pratique c'est l'optimisation en direct des découpes que tu as faites (gif, png, nb de couleurs, etc.) mais euh... ImageReady le fait aussi Fireworks gère mieux les png (normal étant donné que c'est son format natif) mais bon, on en utilise peu dans le web en raison des contraintes de IE ou même d'accessibilité (on ne peut pas donner une couleur de fond par défaut à une div ayant un fond en png par exemple). Donc on l'utilise avec parcimonie.

Fireworks c'est bien, et c'est bien de le mettre en avant mais Photoshop est aussi fait pour le web, et on fait très bien ce que Fireworks sait faire. Sans souci
Modifié par Everholt (20 Sep 2008 - 14:56)

Everholt a écrit :
J'ai envie de dire que tu maitrises mieux Fireworks que Photoshop c'est tout.

En fait je ne maitrise correctement aucun des deux. Il m'apparait juste que l'approche vectoriel+rendu au pixel de Fireworks est plus efficace que l'approche bitmap+rendu prévu pour la haute def de Photoshop. Ceci dit, si on me montre un PSD optimisé pour l'intégration web, je peux changer d'avis.

Everholt a écrit :
Ton bout d'image peut très bien être découpé dans Photoshop de la même façon et il ne faut pas être un expert pour le faire.

C'est ce que je dis dans un message précédent (en indiquant que je fais mes découpes image par image avec The Gimp, mais qu'on peut faire la même chose avec Photoshop ou Fireworks ou autre encore). Mon troll Fireworks vs Photoshop portait sur le design web, et pas sur l'intégration.

Everholt a écrit :
Fireworks gère mieux les png (normal étant donné que c'est son format natif) mais bon, on en utilise peu dans le web en raison des contraintes de IE ou même d'accessibilité (on ne peut pas donner une couleur de fond par défaut à une div ayant un fond en png par exemple).

J'utilise du PNG à 95% dans mes intégrations. PNG-8, PNG-32 avec ou sans couche alpha, etc. Mais je suppose que tu parlais essentiellement de PNG-24 avec couche alpha?
Le seul avantage de Fireworks pour le PNG est la production de PNG-8 avec transparence alpha (Fireworks étant un des rares outils à proposer cette option). Pour le reste, tous les principaux logiciels de graphisme exportent du PNG correct, sauf peut-être Photoshop qui les compresse mal (mais comme de toute façon on passe un coup de pngcrush ou PNGOptimizer derrière pour virer les infos de colorimétrie, ça n'a pas une grande importance).

a écrit :
En fait je ne maitrise correctement aucun des deux. Il m'apparait juste que l'approche vectoriel+rendu au pixel de Fireworks est plus efficace que l'approche bitmap+rendu prévu pour la haute def de Photoshop. Ceci dit, si on me montre un PSD optimisé pour l'intégration web, je peux changer d'avis.

Photoshop fait aussi du vectoriel et du pixel près, il faut juste faire attention aux configurations de départ des outils. Je t'enverrai une maquette optimisée (mais quand j'aurai le temps de la super-peaufiné parce que je sais que tu chercheras la petite bête ;p )

Pour le PNG je suis d'accord avec toi. Etonnant d'ailleurs que PS ne se soit pas amélioré là dessus.
Modifié par Everholt (20 Sep 2008 - 15:23)

Everholt a écrit :
Personnellement, j'utilise Photoshop depuis des années et je n'ai jamais utilisé l'outil tranche pour découper une interface - sauf dans mes jeunes années de découverte du produit -, il y a bien d'autres outils dans Photoshop pour découper une interface, au nanopixel près.

Comment fais tu, car c'est vrai que l'outil tranche c'est pas toujours évident à utiliser

Bizare j'aime en savoir plus sur l'élément photoshop que tu utilise pour faire tes découpes car moi j'utilise exclusivement l'outil tranche

bah moi l'outil tranche, connais pas.
Je suis nouveau en codage, mais pas en "design web" sous photoshop, loin de là.
Les découpes, il est possible de les faire avec une sélection carrée... Décocher les groupes de calques dont on n'a pas besoin, (boutons par exemples). ensuite, si on s'est bien débrouillé dans photoshop et que le design est droit, il suffit de créer un calque composite au dessus, et de sélectionner les parties qui nous intéressent.
En cas de bordures, lueure externe, il faut faire des découpes plus larges...
Pour les motifs mal calés, il y a une fonction magique dans photoshop, pour ceux qui connaissent déjà bien les motifs, ils s'en servent : c'est le filtre translation. Il permet de décaler le motif droite-gauche/haut-Bas.
Pour s'y repérer dans photoshop, mettez des reppères !

pan a écrit :

Arrrrggll mais bon sang pourquoi ?
The gimp ok mais fireworks ???

<ironie>Fireworks est d'une rapidité extrême pour charger les PSD</ironie> (parfois moins de 2 minutes, incroyable! )

Everholt a écrit :
Etonnant d'ailleurs que PS ne se soit pas amélioré là dessus.

Adobe Fireworks et Macromedia Fireworks
Les équipes sont peut-être un peu trop cloisonnées ... enfin surtout il faut toujours des nouveautés à vendre dans CS2, CS3, CS4, ... (et des nouveautés qui se voient et qui soient vendeuses), l'amélioration de l'existant passant sûrement après.

Pour ce qui est de l'intégration et de la découpe, je n'utilise Photoshop ou Fireworks qu'au départ pour:
1- récupérer le texte (une macro clavier pour accélérer le copier-coller )
2- cacher le texte quand je vais devoir récupérer des fonds
Après ça, n'importe quel logiciel de graphisme me suffit (du genre Paint.Net/Photofiltre) du moment qu'il ouvre les PSD (sans gestion des calques, plus besoin)

Avant de savoir ce dont je vais avoir besoin, il y a une période d'analyse du design pour prévoir à quels éléments HTML associer quelles images. Charte graphique (fond global de la page, header, footer, ...) puis colonnage et "blocs" de contenu avec pour beaucoup d'éléments les questions: titres en image ou pas, fond extensible en hauteur ou pas, boutons de soumission de formulaire en image ou pas, ...
Rien de transcendant mais quand le design est bien fait, les réponses à ces questions sont évidentes et il n'y a pas de complications par la suite. Quand il y a des soucis on part vite dans le positionnement relatif, les flottants partout, etc Et deux jours après, on a 50 règles pour IE6 pour autant de bugs

EDIT: sinon c'est dur de conceptualiser qqch qu'on a appris sur le tas, surtout quand le formateur l'a lui-même appris sur le tas
Modifié par Felipe (21 Sep 2008 - 20:23)