pictos, icônes dans site web

gui_gui_gui

Membre actif
25 Mai 2005
250
3
58
perso.wanadoo.fr
Salut , afin de réaliser tout un tas d'icônes et de pictos dans un site, je les réalise avec illustrator, puis je les pixellise dans photoshop, pour un résultat d'environ 1 cm à 5 mm de côté pour chaque picto ou icône.
Mais voilà qu'au niveau de la charte graphique on s'est mis en tête d'avoir des pictos vert clair à contour de 1 pixel, vert foncé. Certains pictos rendent bien, mais d'autres, ceux où il y a peu de contours verticaux ou horizontaux mais surtout des contours courbes ou en pente, le contour de 1 pixel se casse en une mini mosaïque un peu floue, quand on zoome à mort. Ce qui est normal. Mais une fois observé en taille réelle des pixels, le picto à l'air bien. Par contre j'ai des soucis pour certains coins arrondis, où les contours se diffusent trop. Ce sont des petits coins arrondis d'environ 6 pixels. Le programmeur du site m'assure que le problème vient du fait que je travaille en vectoriel, pour pixelliser ensuite. Il me dit que je devrais travailler directement en pixels. Moi je trouve cela absurde, comment peut-on réaliser un picto de 1 cm de côté (une main avec doigt tendu par exemple) directement dans photoshop, sans passer par le vectoriel ? Le dessin vectoriel n'est il pas une première étape dans le processus de réalisation de pictos ? Je soupçonne ce programmeur de méconnaître tout cela. En même temps il est certain que le rendu en pixels de contours, limités à 1 pixel, est parfois peu satisfaisant.
Je réalise pourtant mes pictos à l'échelle dans Illustrator, en ayant paramétré dans les prefs les unités générales en pixels, pour pouvoir attribuer un contour de 1 pixel à mes pictos.
Ce qui m'a tué, c'est quand le type m'a dit : "Tu vois l'icône PDF sur ton écran ? Elle est nickel, ça prouve que le gars qui l'a réalisée ne l'a pas fait avec un logiciel vectoriel".
Vous savez, la fameuse icône PDF qui indique aux gens que là ils peuvent télécharger un doc en PDF. C'est vrai qu'elle est bien foutue mais il me semble qu'elle a bel et bien été réalisée en vectoriel avant d'être pixellisée.
Qu'en pensez-vous ?
 
Tu peux très bien travailler tout d'abord avec illustrator si tu es plus à l'aise avec. Mais quand ton image se réduit à 1 cm x0,5 cm en 72 dpi il faut que tu finalises ton picto sur photoshop. Cela ne fait que 28 pixels x 14 pixels. Ce qui est peu. Tout l'art réside à poser le bon pixel dans la bonne case pour qu'en définition écran l'image apparaisse lisiblement (d'ailleurs on appelle ça du pixel art). L'idéal est de travailler à 1600 % dans photoshop pour pouvoir voir les pixels et leur donner à chacun la valeur que tu désires. En l'occurrence pour ton filet de 1 pixel autour de ton image c'est facile à traiter puisque ton pixel à l'écran fait bonnement, de mémoire, 1cm x1cm. Bon courage.
 
gui_gui_gui a dit:
Il me dit que je devrais travailler directement en pixels. Moi je trouve cela absurde, comment peut-on réaliser un picto de 1 cm de côté (une main avec doigt tendu par exemple) directement dans photoshop, sans passer par le vectoriel ?
Je ne vois pas du tout ce qu'il y a d'absurde. Ça a été la seule et unique manière de travailler pendant longtemps. Si on réalise souvent l'original en vectoriel, c'est plutôt pour anticiper un éventuel agrandissement (pour une plaquette ou un splash screen, dans le cas d'une icône de logiciel) ou une version imprimée du site. Mais plus une icône est petite, plus il est indiqué de la faire (ou de la refaire) entièrement en pixels. La totalité des icônes de 32 et 16 pixels présentens dans l'interface de Mac OS X, par exemple on été soit faites au pixel, soit tracées dans illustrator dans une grille à l'échelle du pixel (ce qui peut être aussi une solution élégante de sortir de ton affaire, mais chaque fois que je l'ai fait je me suis dit : autant repasser directement à totosh).

Mais, dit en passant, même les icônes plus grandes sont souvent dessinées au pixel. C'est le logiciel le plus efficace pour une tâche qui doit être utilisé. Et le vectoriel a des avantages mais aussi des lourdeurs. Dans certains cas (souvent) on fait même d'abord la petite icône puis une version plus travaillée en grand (vectoriel ou non) si nécessaire.

De tout façon l'icône finale doit toujours être retouchée au pixel. Quand on fait une icône professionnelle pour un logiciel on dessine les tailles 128px mais aussi 32 et 16 px (au minimum) et ces deux dernières tailles sont forcément travaillées individuellement en pixel art, on ne peut pas faire autrement.

gui_gui_gui a dit:
Salut , afin de réaliser tout un tas d'icônes et de pictos dans un site, je les réalise avec illustrator, puis je les pixellise dans photoshop, pour un résultat d'environ 1 cm à 5 mm de côté pour chaque picto ou icône.
Là c'est mal barré ;) : centimètres ? milimètres ? connais pas ! Si tu ne connais pas les dimensions finales de tes icônes en pixels ne commence pas à travailler, tu vas perdre un temps fou.
 
Oui le travail au pixel près dans Photoshop est la seule solution pour avoir des pictos parfaits et surtout parfaitement nets. La transposition en pixels d'un dessin vectoriel va se faire au petit bonheur la chance avec un lissage fort qui, à cette échelle, va plus flouter qu'autre chose, et donc rendre imprécis le dessin, lui faire perdre trop de contraste, bref le rendre illisible.

Autant prendre directement les bonnes habitudes et bosser sur un logiciel d'imagerie bitmap et non vectorielle, donc Photoshop. Il y a peut-être une solution avec Illustrator, comme évoquée par Niconemo : spécifier le pixel comme unité, désactiver le lissage si c'est possible, mais ça risque de vite devenir un enfer difficilement contrôlable, donc plutôt qu'à imiter l'original, autant créer directement dans Photoshop.

Cela bien sûr ne vaut que pour des pictos qui ne serviront qu'à l'affichage sur écran, site web, borne ou autre ; si on sait qu'on doit pouvoir les imprimer dans d'autres formats et en haute définition, là il faut effectivement faire une version vectorielle qu'on retravaillera dans Photoshop pour la parfaire en utilisation écran.
 
Mais certains dessins fort complexes nécessitent l'emploi d'Illustrator, comme par exemple dessiner un microscope stylisé ou une voiture.
Mais dessiner, dans photoshop, un disque vert pâle de 10 pixels de diamètre, avec un contour de 1 pixel vert foncé. C'est flou... Tant que c'est des lignes droites verticales ou horizontales ça va, mais pour les courbes c'est pas évident.
Donc j'ai essayé tout de même de dessiner directement certains pictos directement dans Photoshop (lissage désactivé, merci) pour des formes simples, mais pour les dessins compliqués, c'est Illustrator. Après pixellisation, j'essaye de retoucher dans Photoshop, pixel par pixel avec l'outil de sélection "M". Mais après, pour avoir un bon rendu, faut que j'essaye plusieurs versions.
Le problème c'est que c'est des pictos très très petits.