Partage
  • Partager sur Facebook
  • Partager sur Twitter

PNG tout baveux après Export

Illustrator CC 20

    17 novembre 2017 à 17:37:04

    onjour !

    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 !

    -
    Edité par Tsarina 17 novembre 2017 à 17:39:07

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 18 novembre 2017 à 17:58:39

      Bonjour.

      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.

      -
      Edité par -L0Lock- 18 novembre 2017 à 17:59:26

      • Partager sur Facebook
      • Partager sur Twitter

      FAQ 3D || 3DFR: discord francophone d'infographie 3D || Pas de demande d'aide par MP, le forum est là pour ça :)

        20 novembre 2017 à 18:00:37

        @-L0Lock-

        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.

        -
        Edité par Tsarina 20 novembre 2017 à 18:02:14

        • Partager sur Facebook
        • Partager sur Twitter
          Staff 20 novembre 2017 à 19:10:59

          16px c'est minuscule ! Même les emotes d'Openclassroom sont plus grandes que ça. :o 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.

          • Partager sur Facebook
          • Partager sur Twitter

          FAQ 3D || 3DFR: discord francophone d'infographie 3D || Pas de demande d'aide par MP, le forum est là pour ça :)

            21 novembre 2017 à 10:32:09

            -L0Lock

            Merci pour tes conseils ! J'ai noté ce que tu m'as dit :)

            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.

            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 

            Sinon, j'aurais peut-être dû créer mes icônes sur Photoshop? 

            • Partager sur Facebook
            • Partager sur Twitter
              Staff 21 novembre 2017 à 15:07:33

              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.

              • Partager sur Facebook
              • Partager sur Twitter

              FAQ 3D || 3DFR: discord francophone d'infographie 3D || Pas de demande d'aide par MP, le forum est là pour ça :)

                21 novembre 2017 à 16:10:00

                @-L0Lock-

                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?

                -
                Edité par Tsarina 21 novembre 2017 à 16:11:20

                • Partager sur Facebook
                • Partager sur Twitter
                  Staff 21 novembre 2017 à 16:13:20

                  Je sais pas. Demande peut-être à la personne qui s'occupe de l'intégration. Pour le script, il devrait être capable de s'adapter non ?
                  • Partager sur Facebook
                  • Partager sur Twitter

                  FAQ 3D || 3DFR: discord francophone d'infographie 3D || Pas de demande d'aide par MP, le forum est là pour ça :)

                    4 mars 2020 à 12:17:43

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

                    -
                    Edité par Pierre-Se 4 mars 2020 à 12:18:14

                    • Partager sur Facebook
                    • Partager sur Twitter

                    PNG tout baveux après Export

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    • Editeur
                    • Markdown