Photoshop : menu calques contextuel

[ Concept / Photoshop ]

Suite à un concept de refonte Photoshop par le Designer d'interfaces Aurélien Salomon sur l'incontournable plateforme Behance, j'ai voulu rebondir sur sa proposition du panneau « Calques » de Photoshop.

Le redesign du panneau « Calques ». Découvrir le concept de redesign Photoshop d'Aurélien Salomon.

Ce qui m'a interpellé, c'est le choix d'un fil d'Ariane pour naviguer dans les dossiers et les calques. Au premier abord, j'ai trouvé cela original. Mais en y réfléchissant, cette solution me semble superflue. Elle créée une redondance d'informations et des clics inutiles. En effet, les dossiers et les calques sont déjà visibles sous ce fil. Cliquer sur un des items du breadcrumb, reviendrait à cliquer sur un calque/dossier situé sous ce fil d'Ariane.

Si je veux sélectionner un calque ou dossier dans au sein de ce panneau, suivant mon expérience du logiciel, j'utiliserais le scroll de la souris pour me déplacer rapidement. Excluant de facto, l'usage de ce fil d'Ariane. À mon avis.

Cependant n'oublions pas, qu'il s'agit d'un concept de redesign. L'auteur en a précisé le contour au début de sa présentation.

Une idée chasse l'autre

Cependant, cette idée de fil d’Ariane devient intéressante pour la sélection d'éléments sous-jacents.

Aujourd'hui, lorsque vous voulez cibler un élément d'arrière-plan couvert par un élément d'avant-plan. Vous cliquez sur cet élément d'avant-plan et ensuite vous vous dirigez vers le panneau « Calques » pour sélectionner l'élément du dessous.

Bien évidemment, vous pouvez naviguer dans le panneau « Calques » pour cibler les divers éléments, c'est même plus rapide. Cependant, en ce qui me concerne, dans la manière de travailler, (et je pense que cela concerne la majeure partie des graphistes), je navigue dans ma maquette, réalise un CTRL + Clic pour sélectionner l'élément puis si j'ai besoin d'accéder à un élément d'arrière-plan, j'utilise le panneau « Calques ».

Tout ça pour vous dire que l'idée d'un menu contextuel pour sélectionner sous-jacente serait intéressante (voir le concept animé). Design servant d'exemple issu de mon book, ici.

La proposition d'Aurélien Salomon m'a donné l'idée d'un menu contextuel lors de la sélection. Rien de nouveau. Je ne vais rien apprendre aux experts quant à la sélection d'un élément sur le plan de montage avec les raccourcis clavier Contrôle/Commande + Clic. Cette façon de procéder est également très rapide. Le seul hic, c'est la sélection d'un élément du dessous, juxtaposé et recouvert par un élément du dessus.

Mais... Cette fonctionnalité existe déjà !

Pour l'heure, Photoshop donne la possibilité d'accéder aux divers éléments avec le Clic-Droit. Mais, je ne l'utilise que très peu. Et cela pour deux raisons (pas forcément les meilleures, je vous l'accorde).

Première raison : cela vous oblige à bien nommer vos calques si vous voulez savoir quel élément ciblé. En effet, lire « Calque 2 », ne vous parlera pas immédiatement. À moins que vous l'ayez créé dans l'instant.

C'est une tâche que je n'exécute pas de manière systématique lorsque je commence ma maquette. Et vous imaginez bien qu'il est difficile de s'y retrouver lorsque je cumule des calques non nommés correctement.

C'est pourquoi ce Clic-Droit n'est utilisé que très rarement.

J'entends déjà les puristes me sermonner sur l'utilité de ce nommage. Certes, je ne contredirai pas et je le conseille fortement. Notamment pour le travail d'équipe ou pour vous. Il est plus aisé de reprendre une maquette, même après plusieurs semaines, ayant des calques ordonnés et nommés de manière concise.

Mais dans ma manière de travailler, surtout dans sa phase démarrage, le nommage se fait timidement et vers la fin, je renomme tous mes calques à 90% (pour ne pas dire à 100%).

La deuxième raison est qu'il n'est pas pratique de parcourir la cinquantaine de calques au bout des quelques heures de boulot. Donc pas du tout ergonomique. Il aurait été pratique sur le Clic-Droit de l'élément que la ligne soit surlignée. Adobe si tu m'entends :) Mais que nenni, à la place, c'est débrouille toi à te retrouver parmi la cinquantaine de calques (voir plus) et tant pis pour toi, t'aurais dû les renommer correctement... Et toc !

Pour conclure

Donc chère Adobe, à la place de cette liste indigeste de lignes de calques, je te propose un menu plus visuel, reprenant en partie l'ergonomie de ton panneau « Calques » actuel ; histoire de ne pas trop pousser le développement ; avec les quelques interactions ;que tu peux voir ci-dessous.

Il va sans dire que si on se restreint à deux calques par maquette, cela ne mérite pas qu'on ne s'attarde pas sur cette problématique.

Il y a aussi la solution de Indesign pour sélectionner les éléments sous-jacents : le CTRL + Clic par autant de fois, pour atteindre l'élément ciblé.

Les Pros de Photoshop l'auront sûrement remarqué, mais si ce n'est qu'un problème de sélection d'éléments positionnés en arrière-plan : un panneau « Calques » plus visuel aurait suffit. Sans les options de calques (styles, masques, réglages...). Mais j'ai trouvé intéressant de dupliquer ces fonctionnalités pour y accéder rapidement sans qu'il est nécessaire de naviguer par un va-et-vient vers le panneau « Calques ». Enfin, bref, je vais m'arrêter là...

Voici une animation réalisée sous After Effects pour illustrer mes propos. Attention, c'est un peu rapide. Alors soyez attentif :)

Technos utilisées
Adobe Photoshop
Adobe After Effects

Lire aussi : S'en remettre au hasard pour embaucher le bon Designer ? ›