Transat Creative Design

Par Pierre Pernix, le 25 mai 2011  15 commentaires

EDIT : j’ai pu lire, à la fin d’un article de Smashing Magazine, ces quelques commentaires (éclairés) qui, quelque part, rejoignent le mien.
A 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.

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.

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.

É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.