Photoshop, tête à calques

Je ne peux m’empêcher de fulminer à la lecture du moindre article où il est question de l’usage de Photoshop pour réaliser des maquettes pour le web. Voilà comment ça se passe : j’ai chaud, je bave, mes tempes me font mal. Ce genre là. Comme je suis d’un naturel distrait et que j’oublie régulièrement de suivre ma timeline (quand on a du boulot, on est distrait) ou de checker les colonnes de mon agrégateur, j’arrive systématiquement après la bataille des commentaires. Une goutte de venin au coin des lèvres, je tente de m’incruster au milieu des échanges plus ou moins constructifs de ceux qui m’ont précédé. C’est du réchauffé, bien sûr. Et il était temps que je prenne la plume à mon tour. Dès lors, vous pardonnerez le peu de fiel contenu dans les lignes qui vont suivre.

C’est pas de l’Adobe

J’ai démarré ma vie d’actif en tant qu’infographiste, apprenant sur le tas un logiciel que peu connaissent et dont je dois ici louer la qualité : CorelDraw. D’une prise en main plutôt facile, grosse usine à gaz cependant, et pas tout à fait stable dans sa version d’alors, ce produit avait pour avantage d’être fourni avec les pilotes de la graveuse laser que nous utilisions.

Je commençais à utiliser Photoshop, mais il était évident que pour réaliser des maquettes de brochure, des cartes de visites et pour préparer la compo des tampons et autres gravures, rien ne valait un logiciel vectoriel (dont je rappelle qu’en l’occurrence il communiquait à la perfection avec la machine  qui gravait tout ça).

Plus tard, je me perfectionnais sur le best-seller (hum !) d’Adobe en réalisant des illustrations pour la sérigraphie. Équipé d’une tablette graphique, j’oubliais CorelDraw dans les arabesques pailletées que me réclamait mon patron, et les calques s’empilèrent dans une débauche de couleurs…

License IV

Quelques années plus tard, encore, je découvrais Photoshop sous un jour nouveau en débutant ma carrière de graphiste web au service d’une grosse boîte d’ecommerce. Là aussi, débauche de calques : chaque filet, chaque rectangle, chaque étiquette de prix soldé avait le sien. A chacun sa façon de travailler, et, bien que mon mentor soit un rapide et ne sache jurer que par le pixel, je m’efforçais d’avoir recours aux masques vectoriels pour simplifier la manipulation des formes, et aussi pour les partager avec mes collègues, qui pouvaient ainsi les agrandir et les déformer. CorelDraw en embuscade.

Les version de Photoshop passèrent (nous voyions aussi passer les factures de la suite Adobe, et je m’estimais heureux de ne pas devoir payer pour ma propre licence), pas forcément pour notre plus grand bonheur, car si les fonctionnalités nouvelles étaient alléchantes, les bugs n’étaient pas toujours résolus et nos processeurs commençaient à salement tirer le langue.

T’en veux, des calques ?

Les PSD prenaient du poids : nos maquettes, sans doute plus ambitieuses que par le passé, et truffées de styles de calque, accumulaient par dizaine les calques, calques de réglage, masques vectoriels et d’écrétage…  Quand @STPo, dans ses guidelines Photoshop pour le web, conseille de bien replier chaque groupe de calque et d’en nommer de façon pertinente le contenu, je ne peux que lui donner raison. A ce stade, non seulement les intégrateurs, mais aussi les collègues graphistes avec qui nous échangions nos fichiers, étaient au moins heureux d’y voir clair dans la liste de 50 calques et groupes de calques qui leur explosaient à la figure.

Ordre et progrès

Sauf qu’il y a un moment où la rigueur, la clarté des intitulé, en un mot l’organisation ne suffisent plus. Que les innombrables tracés d’une carte IGN, par exemple, avec ses routes, ses fleuves, ses noms de rue, sa légende, etc, soient soigneusement rangés dans des calques au nom judicieusement choisi d’un fichier vectoriel, je peux comprendre. L’ennui avec les PSD, c’est que même les maquettes simples nécessitent un paquet de calques. Qui doivent être manipulés en tant que calques. Avec ma carte vectorielle, mes objets sont rangés dans des calques. Dans Photoshop, tous mes objets sont des calques.

En outre, difficile de se satisfaire d’une aussi rigide « zone de travail ». Hors du format imprimable de mon image, point de place pour des éléments provisoires qu’on pousserait sur le côté en attendant de les réutiliser. Là encore, solution calque : on cache un élément, on en affiche un autre, on duplique, on cache à nouveau. Et on se retrouve avec un beau merdier. On versionne, au bout d’un moment, histoire de ne pas se retrouver avec des fichiers de 300 Mo pleins de nos propositions « visibles » et celles « insivibles ».

Lassé du lasso

Moi, webdesigner, qui conçoit des interfaces, qui dessine des blocs, des bordures, qui déroule du texte, définit un fond, positionne des boutons, manipule des motifs, bref, qui fait de la mise en page, même si ce n’est pas au kilomètre… qu’est-ce qui m’a pris de quitter le spacieux plan de travail d’un logiciel vectoriel pour cet étriqué labo photo à tiroirs ?

Car oui, ce pour quoi les logiciels de « composition » ou de mise en page avaient été conçus, à savoir la composition, la mise en page d’éléments graphiques et de texte, est ici réalisé avec un logiciel de retouche photo. Évolué, certes, mais dont la logique de manipulation par calques a atteint ses limites. C’est un peu tarte à la crème mais je vous avais prévenu : je lâche mon fiel, et quelques simplicismes ne font pas de mal.

Dans le même genre : avant, j’entendais dire que ce n’était pas très « pro » de concevoir un flyer avec Photoshop, et qu’un logiciel approprié était de mise.
Et maintenant, pépé, avec quoi tu lookes ton site web ? Approprié, non ?

Chérie, ça va trancher

Au final, mes anciens collègues intégrateurs trouvaient souvent plus simple d’aplatir le fichier après en avoir évacué le superflu, pour tranquillement en découper les tranches. Au pire, si une difficulté se présentait, il suffisait de demander directement au graphiste d’isoler l’élément concerné pour en simplifier l’exportation. Faut comprendre, hein : déjà que l’auteur du fichier lui-même avait parfois du mal à retrouver ses petits dans son mille-feuille… Et puis, il est parfaitement logique qu’un utilisateur de niveau moyen sur Photoshop ait parfois besoin d’un coup de main. Après tout, il s’agit d’un logiciel pas toujours intuitif, quoiqu’en disent les fans, qui n’ont généralement pas d’élément de comparaison, ou pas le recul nécessaire.

Voilà un argument supplémentaire pour remettre en question la position centrale qu’occupe Photoshop dans le processus du webdesign, dont les acteurs ne sont pas tous des infographistes chevronnés : la difficulté technique.

Il existe pourtant d’autres logiciels plus simple d’accès, dont à la fois graphistes et intégrateurs pourraient faire un usage partagé. Car il faut en arriver au but, là, maintenant : quelles alternatives ?

Lâché dans la zone

Je ne m’attarderai pas au sujet de Fireworks, que je ne connais pas bien. En tant qu’alternative à la réputation solide, je le recommande de toutes façons. Fireworks fait l’objet d’une formation sur le forum de @wdfriday.

Par contre, et c’est l’ancien utilisateur de CorelDraw qui s’exprime, je m’empresse de vous recommander Inkscape, qui est un logiciel de dessin vectoriel libre et gratuit dont les fonctionnalités sont tout à fait suffisantes, et même plus, pour répondre aux exigences du webdesigner. Je n’utilise que lui. Ses caractéristiques sont celles de la plupart des logiciels vectoriels, avec une prise en main plutôt facile. La zone de travail est infinie, et je me régale à faire cohabiter plusieurs version d’une même maquette dans le même fichier. Inkscape permet d’exporter n’importe quel élément au format PNG, tel quel, avec fond transparent ou pas. Croyez-le ou pas, pas besoin de découper des tranches : c’est un logiciel, pas un grille pain.

La zone de travail illimitée d’Inkscape

Évidemment, détourer des objets dans une photo ou en augmenter la densité n’ont pas de mise ici. Pour les images, vous reviendrez à votre logiciel de retouche préféré… Gimp, bien sûr ;).

Objets groupés, objets verrouillés, masques, etc. Il y a dans Inkscape de nombreuses façons de préparer votre fichier pour le partager avec autrui. Un détail : le format usuel d’Inskcape est le SVG, ça vous dit quelque chose ? Je suis assez peu porté sur la divination mais quelque chose me dit qu’il est raisonnable de miser sur les avancées du vectoriel sur le web. En s’efforçant de (re)considérer les options non-propriétaires.
HTML5, mon ami.

Débouchés, t’es sourd ?

Vous l’avez compris, je déplore l’évidente suprématie de Photoshop dans le petit monde du design pour le web, alors qu’il existe des solutions à la fois plus légères, plus accessibles et aussi moins chères ! Je passe rapidement sur les raisons supposées de cette suprématie : la réputation et l’ancienneté de la marque Adobe n’étant plus à démontrer, les professionnels se tournent aveuglément vers son logiciel phare (notez qu’en toute mauvaise foi je n’ai pas mentionné Illustrator, mais qu’il constitue lui aussi une alternative) ; les écoles et formations professionnelles ayant trait au webdesign forment essentiellement sur ce logiciel, justement pour offrir plus de débouchés professionnels ;  les graphistes web frémissent à l’idée de devoir changer leurs habitudes ; de nombreux intégrateurs eux-même craignent le syndrome de Stockholm, etc.

Des calques qui se perdent

Il est utile de rappeler que l’outil ne fait pas la créativité. Photoshop est un très bon logiciel, qui en vaut bien un autre quand il s’agit de matérialiser une idée brillante (inversement, c’est justement la facilité qu’offre Photoshop de redonner du fancy à un design mal inspiré qui a en partie fait le succès de ce produit). En revanche, c’est à mes yeux un outil désormais inadapté au webdesign, par opposition aux logiciels vectoriels dont la logique correspond davantage à des exigences de manipulation et de partage. Et peut-être même aux innovations du web moderne.

Alors j’en entends se pâmer devant les perspectives du design directement dans le navigateur (thème très hype s’il en est), mais ce sont quelquefois les mêmes qui ne jurent que par l’onéreux poids lourd de la retouche photo quand il s’agit de maquetter le moindre formulaire ! Avant de nous prononcer quant à l’avenir de la première méthode, acceptons de considérer la deuxième comme complètement ringarde.

Post-scriptum : j’ai pu lire, à la fin d’un article de Smashing Magazine, ces quelques commentaires (éclairés) qui, quelque part, rejoignent le mien. À lire aussi, cette intéressante interview du créateur Raphaël Bastide, lequel prêche pour un changement d’approche dans la conception web d’où seraient absents les softs de retouche, dont Photoshop.

Commentaires

  1. Parfait !
    Merci beaucoup, c’est aussi ce que je pense aussi.
    Un prémaquettage des sites sous myPaint pour bosser à la tablette graphique ou faire des crayonnés.
    Le design à proprement dit sur Inkscape
    Et Gimp pour la partie photo. Redite de l’article, mais voilà.
    Et je me permets de rajouter en alternatives : SumoPaint, vraiment bien fichu, online, avec une version desktop paynte, je ne sais pas trop ce que ca vaut et mon logiciel à moi : Paint.NET (oui, je fais du webdesign dessus, mais j’estime que le peu de fonctionnalités qu’il m’apporte meme avec des extensions m’oblige à être plus inventif. Que demander de plus !

  2. STPo

    … alors qu’on a vu de dangereux extrémistes comme Pixenjoy faire machine arrière, et passer du tout libre (Gimp + Inkscape) à… Photoshop. Sur quel pied on danse, les filles ?

    Très juste article au demeurant (et belle plume), mais Photoshop reste incontournable tout simplement parce que… il est incontournable. Sa popularité et son quasi-monopole de fait le rendent inévitable dans la chaîne de prod, et même s’il n’est pas nativement destiné à faire du web design il va falloir beaucoup de temps et d’énergie pour le déloger !

  3. kazes

    je tomb sur cet article intéressant et cherche du coup le header pour voir la racine du site. Pas de header ?
    Quelqu’un veut un coca ?

  4. kazes

    ah. il est en bas. tout va bien. merci

  5. kazes

    Hey il est pas mal ce site. Bon je suis un peu perturbé avec la navigation et le fait qu’il n’y ait pas d’archives (hein STPo) mais j’aime bien c propre et le contenu a l’air intéressant.
    J’arrête de spammer désolé promis pardon :)

  6. @mygreg Je dirais même plus : parfait !

    @STPo Je suis conscient qu’il va falloir beaucoup d’énergie pour déloger PS. Mais j’aime bien les cause perdues…

    @kazes Oula, c’est la première fois que plus de 2 visiteurs laissent un commentaire, tu m’étonnes que j’avais pas prévu d’archives !

  7. kazes

    j’ai rattrapé le quota avec tout mon flood alors :)

    Oui, ce serait pratique des archives, ou tout du moins « les derniers articles » dans un ptit bloc. Enfin c’est ma manière de browser les contenus, c’est mon feedback.

  8. Pierre Pernix

    @kazes Sinon « Blog » et t’as tous les articles à la suite. Mais c’est pas parfait, sans doute. Je prends note, merci.

  9. Avant et après la lecture de ce billet, je me demande si le terme « inadapté » est bien utilisé. Déjà, y’a-t-il un logiciel vraiment adapté au webdesign ? (à part la calculette windows ?)
    Oui, Photoshop n’est pas optimisé pour la production web, Fireworks semble être la solution Adobe sur ce sujet (même si, je ne l’utilise pas non plus), mais peut-on dire qu’il est inadapté, au regard de son omniprésence dans les chaines de production web et de nombreux webdesigners qui ne jurent que par lui ? Je ne pense pas.
    Je pense que ce billet met surtout en avant la diversité de méthodes de conception web, de logique de travail, et que de ce fait, tous les outils ne conviennent pas à tout le monde.
    Sinon, très sympa ce site / blog !

  10. fak1

    Bon, j’ai lu… T’as raison sur certains points, le fait que photoshop, et Adobe en particulier monopolise le marché de la créa numérique par exemple. Mais bon, travailler sur 15 softs différents pour obtenir une maquette web « complete » ça me gène un peu. Photoshop à non seulement toutes les qualités des softs cités, mais surtout, il est fait pour travailler le web. Qu’on ne vienne pas me dire qu’un logiciel spécialisé dans le vectoriel est fait pour faire du Web. L’unité, le pixel c’est ça qui différencie le papier de l’écran. P

  11. fak1

    Excuse je termine… (fausse manip)
    Pas besoin de rappeler que chaque support de création a ses propres contraintes, selon moi, parmis les softs cités, photoshop est le seul permettant de respecter ces contrainte sans avoir à jongler avec un autre logiciel de créa… Voilà,

    Donc, en gros chacun sa méthode, mais je pense qu’en étant un temps soi peu rigoureux, on s’en sort avec des maquettes web, ultra chargée à pas plus de 13 Mo.

  12. Pierre Pernix

    @fak1 Pour aller plus loin dans la manipulation de tracés complexes (dessin de logos, déformation de typos, etc) tu seras souvent contraint de passer par un logiciel vectoriel, en plus de Photoshop.
    Quant aux pixels, il y en a partout sur mon écran, peu importe que j’ouvre PS ou Inkscape. Il suffit que j’affiche la grille pour les voir, et que j’exporte mes images à la bonne résolution ;)

  13. Je me permet de poster cet outil – pas encore testé – mais qui paraît spécialisé pour faire des mockups avec Inkscape. https://github.com/ajashton/Inkscape-Mockup-Toolkit
    En ce qui me concerne Inkscape ne m’en sert pas pour le dessin de pages entières mais pour des parties, je laisse les réglages typographiques et couleur au bon soin des CSS à l’aide de mon navigateur.

  14. jozue

    Comme souvent dans ce genre de débat, je trouve qu’on se trompe un peu de sujet, ce n’est pas la techno utilisée, ni le logiciel qui fait la réussite et la qualité du projet.
    Mais ça tu l’as dit.
    Ensuite, pour parler du gros bouzin, oui, quelque part Photoshop est compliqué pour des éléments que l’on duplique (et encore via les objets dynamiques cela règle une grande part de ce « problème ») ou pour expliquer le fonctionnement d’une maquette sur les différentes résolutions, mais finalement si ce logiciel est compliqué, c’est parce qu’il laisse une grande marge de liberté.
    Logiciel libre, ou logiciel à license hors de prix, j’ai envie de dire :
    que vive le logiciel craqué ;)

    Merci pour l’article, c’est un point de vue intéressant.

  15. Pierre Pernix

    @Raphaël Très intéressant. Dans le même genre, l’auteur de ce projet envisageait un genre de plugin export des dégradés d’Inkscape en CSS3 : http://create.freedesktop.org/wiki/Viaduct (mais ça a l’air assez embryonnaire).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>