Je suis entrain de créer sur Illustrator des icônes pour une application en webservice et dès que je les exporte en PNG, ils deviennent tout baveux.
Je sais qu'on perd en qualité entre le design vectorisé et le résultat pixelisé mais là c'est too much.
Je vous montre à quoi ça ressemble :
Dans Illustrator:
Dans l'appli :
J'ai essayé Exporter pour les écrans et c'est pas mieux ! :/
D'ailleurs sur la plupart des sites je ne sais pas ce qu'ils utilisent comme logiciel mais les icônes sont toujours hyper clen, pourtant ce sont des PNG quand je fais inspecter !
Je n'utilise presque pas Illustrator mais à vu d'œil les icones ont l'air d'avoir été exporté dans une définition trop faible.
Si je me souviens bien, lorsque tu fais une exportation depuis Illu, tu as moyen de choisir la définition d'exportation via un menu déroulant "scale" (ou "échelle" en anglais") qui te propose plusieurs choix :
soit un facteur (1x 2x 3x etc) qui va utiliser la définition actuelle de ton document et la multiplier par le facteur indiqué (dans ce cas tu dois avoir au préalable créé ton document avec les bonnes résolutions, ou les vérifier avant d'exporter)
soit indiquer manuellement la définition (le nombre de pixels) en hauteur ou largeur
soit indiquer la résolution, le nombre de pixels par pouce. Là encore tu dois connaitre la taille de ton document.
Dans tous les cas on n'exporte pas à l'aveuglette sans savoir la résolution de son document ou de l'export. Justement parce que à l'export tu as besoin d'avoir quelquechose qui correspond à l'utilisation de tes assets.
Sinon, je dis peut-être une bêtise mais il me semble qu'on peut utiliser directement du svg sur les sites web. Même utilisés en sprites CSS. Plus besoin de se soucier de résolution d'export dans ce format, on garde le vectoriel.
Mais je ne suis ni web designer ni développeur web donc c'est peut-être pas la bonne solution non-plus.
C'est en 72dpi (j'avais essayé 300 en sachant que c'était inutile mais de toutes façons ça n'avait eu aucune incidence).
Pour la résolution je n'y comprends malheureusement pas grand chose mais je sais que les icônes antérieures de l'application faisaient 16x16px, donc j'ai recréé des icônes 16x16px sur une feuille de 200x135px.
Maintenant j'ai un écran HD (Dell XPS 15) alors peut-être que ça a un impact au moment de l'export?
Je fais exporter avec la fonction Exporter vers... Il me demande pas d'échelle.
Pour le SVG ça ne sera pas possible car les clients qui utilisent ce logiciel ont, pour certains, de vieux navigateurs qu'ils ne peuvent/veulent pas mettre à jour. Et c'est une appli en webservice.
J'espère que mes questions ne font pas trop noob, je suis un peu paumée dernièrement.
16px c'est minuscule ! Même les emotes d'Openclassroom sont plus grandes que ça. Forcément ça apparait baveux et pixelisé quand on quadruple leur taille d'affichage. La preuve :
Quelques infos basiques à savoir sur les images numériques en général :
La définition est la taille d’une image ou d’un écran exprimée en pixel (c'est ce qui "définit" sa taille → la définition). La résolution est le nombre de pixel par unité de longueur ou, autrement dit, la densité de points par unité de longueur exprimée en dpi (dot per inch) ou ppp (point par pouce).
Par conséquent, la définition en px est la taille d’une image sur un écran, un site web et la résolution en dpi (combinée à la définition) caractérise la taille d’une image lors d’une impression.
Illustrator est un logiciel à la base conçu pour des travaux destinés à l'impression donc il hérite directement des besoins de ce milieu : les documents sont créés (par défaut) en unité de longueur avec une résolution (pixels par cm ou pouces).
Pour du web (ou le numérique en général) on travaille en 72dpi il me semble, mais ce qui importe vraiment pour le web c'est la définition à la sortie. Si dans Illustrator tu indiques la définition/taille de ton document directement en pixels, changer la résolution du document ne fera que changer la surface qu'occupera ton document s'il était imprimé sur du papier, ça ne change pas la définition de l'image.
Certains logiciels adaptent la définition du document lorsqu'on change sa résolution, mais généralement ils ne le font que si tu as indiqué la taille du document en unité de longueur physique (cm ou pouce par exemple) et il me semble que c'est justement le cas d'Illustrator, d'ou le fait que passer de 72dpi à 300dpi n'a rien changé chez toi vu que tu avais de toutes façons fixé la définition à 200x135 pixels.
Enfin bref.
Ce que tu devrais faire, c'est agrandir la taille/définition de ton document, ou alors indiquer une taille/définition plus grande lorsque tu exportes tes icones.
Pour te donner une idée, sur un écran comme le mien, les icones "de l'appli" de ton énoncé apparaissent presque en 64x64px (les puissance de deux, en informatique c'est la vie !). Physiquement, ça occupe un gros centimètre sur mon écran.
Je ne suis pas UI/UX designer, mais je pense que c'est pas idiot de dire que fournir une version de taille suppérieure de tes icones permettrait d'avoir des icônes belles sur les grands écran (surtout les 4K), pour les écrans plus petits ou avec moins de définition, il suffira soit d'afficher la même icône dans un espace plus petit, soit d'afficher une autre version de l'icone qui serait plus petite.
Par contre pour les icônes, le problème est déjà là à l'export. C'est à dire avant même de mettre la feuille de sprites en ligne :/ Du coup, je n'arrive pas à comprendre comment la taille peut être quadruplée.
C'est pourtant simple : dans ton application tu peux afficher les icones sous n'importe-quelle taille peu importe leur définition. Tu peux très bien avoir une image png de 16 pixels de côté et dire à ton application de l'afficher en taille 64 pixels de côté, ça agrandira l'image et comme elle n'a que 16 pixels à montrer sur les 64 ça rend moche.
J'ai essayé d'en créer des plus gros mais à l'export ils sont donc... gros. Et j'ai essayé de diminuer leur taille à l'export
Justement tu ne dois pas diminuer la définition de tes images à l'export. Tu devrais juste exporter tes icônes une seule fois et dans une définition assez grande (64px² par icône me semble déjà pas mal).
Et ensuite dans ton application tu mettras tes icônes en les affichant dans la taille que tu veux (tant que ça n'excède pas la définition du fichier). Ce n'est qu'un affichage, ce n'est pas la définition réelle de l'image.
Mais justement l'appli ne redimensionne pas. Elle les laisse telles quelles (il me semble, ce n'est pas moi qui fait l'intégration... heureusement vu comme je galère ).
Du coup mon icône en 16px en vecteur devient une icône 16px en PNG toute dégueue...
Si je voulais que la feuille de Sprites soit plus petite (admettons que je créé une feuille d'icônes de 64px chacun), je devrais rentrer quoi dans le CSS? Il faudrait également que je change les coordonnées des icônes manuellement? (Là c'est illustrator qui me le fait automatiquement avec un script).
Sinon je vois des tutos sur comment créer des mini icônes 16x16px. Du coup pourquoi ils ne créent pas des icônes en haute déf pour ensuite les afficher en petit? Quelle est la bonne méthode?
Pour ceux qui comme moi on fait face au même problème, il faut simplement exporter en grande taille (640x640 par exemple), puis limiter ensuite la taille (au ratio biensur) en CSS lors de l'intégration sur le site..
Exactement le même souci, gros soucis de contours de mon logo, j'ai essayé d'exporter pour le web en grand, puis de rétrécir dans mon site, mais ça ne change rien ! La fonction "save as" normale ne propose pas le PNG et Wordpress n'accepte pas les SVG..
Solution, sous illustrator, faire son image en taille réelle, ensuite faire "export">"export as" et augmenter le DPI à300 voir 600. de cette façon l'image gardera sa taille initiale.
- Edité par alama 23 novembre 2020 à 14:31:30
Ne baisse jamais les bras, car c'est a ce moment là que le miracle risque de se produire..
Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.
Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre. En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.
Au lieu de déterrer un sujet il est préférable :
soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
soit de créer un nouveau sujet décrivant votre propre contexte
ne pas répondre à un déterrage et le signaler à la modération
Je ferme ce sujet. En cas de désaccord, me contacter par MP.
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script
Ne baisse jamais les bras, car c'est a ce moment là que le miracle risque de se produire..
Moderateur forum || FAQ 3D || discord 3D francophone || OC Tweak script