Faire de belles images bien nettes ?

Bonjour, pour un projet de dev, j'ai besoins de belles images de poissons que je vais ensuite réutiliser avec du Javascript (elles seront redimensionnées et subirons d'autres transformations). J'ai donc voulu commencer par un poisson-clown, en essayant d'avoir un design un peu minimaliste/material

Et j'ai obtenu ça :

C'est plûtot ce que j'essaie de faire, mais pour une raison inconnue, il est tout pixellisé Comment je fais pour le rendre tout lisse et tout doux ?

Je dispose de Photoshop, Gimp, Inkscape, Paint (?) et de deux bras.

PS : Si vous le trouvez dégueulasse et pas du tout matérial, dites-le et aidez moi à remplir cet objectif. Merci.

Je penses que tu as du exporter ton image en JPEG ? Il faut savoir qu'avec ce format, tu n'auras pas de transparence et une perte de qualité (comme tu as ici). Il vaut mieux utiliser du PNG. Voilà, j'espère t'avoir aidé.

Vu la tête du truc, tu devrais peut-être faire ça en SVG avec Inkscape. Le dessin vectoriel me semble plus approprié dans ce cas.

Attention, j'y connais rien au Web et au JS, donc je sais pas si c'est la meilleure chose à faire pour l'utiliser en JS. Je laisse ma place à d'autres qui s'y connaissent pour te dire ça.

Le vectoriel est je pense aussi plus approprié, ça se redimensionne sans perte et tu peux même l'avoir en code xml, pratique pour manipuler l'image en profondeur avec le JS. Sinon c'est quoi les caractéristiques de ton cette image ? (dimension, ppp…) La qualité est peut-être tout simplement trop basse.

Je sais pas comment tu as réalisé ton poisson, mais sous Photoshop il est important de noter la différence entre le crayon et le pinceau : le premier dessine des lignes justement "pixelisées", alors que le second des lignes lissées.

Après, je suis pas expert en graphisme, mais pour un design minimaliste/material, je dirais comme mes VDD que l'optimal serait d'avoir des images vectorielles, et du coup plus de problème à ce sujet.

A nouveau, je suis pas expert en design, mais quand j'entends "material" j'imagine une image constituée de formes très géométriques. Ici ça ressemble plutôt à un dessin fait à la main (ou à la souris ?).

Je penses qu'il voulait plutôt dire flat.

C'est sûrement la qualité du truc qui était dégueulasse, je vais essayer de le refaire sous inkscape.

POur le manipuler en javascript, j'aurais besoin de générer des poissons comme celui-là mais de différentes tailles (voir même différentes couleurs ?) vous pensez que c'est plus simple en PNG ou en SVG ?

Merci

Je penses qu'avec Canvas c'est équivalent niveau simplicité du code et performances, mais si tu doit en faire des gros, prends plutôt du SVG. De toute façon, je crois qu'Inkscape permet pas d'exporter en PNG.

Je ne sais pas si Javascript traite le PNG et le SVG différemment, en tout cas pour une telle image, qui de plus sera redimensionnée, je le ferais en SVG. Le PNG, lui, à toutefois l'avantage d'être supporté par plus de navigateurs.

Maintenant que j'y pense (si tu décidais de faire en PNG), sous Photoshop, il y a la plume pour faire de jolis tracés lisses. Sinon, pour lisser une image déjà "pixelisée", c'est toujours possible de s'amuser avec le flou gaussien et les niveaux, mais le résultat sera évidemment moins beau. Avec ton image, ça pourrait donner ça :

Le PNG et le SVG ne se compare pas, on parle de Bitmap ou Vectoriel. Le bitmap (png, jpeg…) est une image composé de pixel, tu n'a aucun moyenne de gérer des tailles différentes ; le SVG lui te permet de scale ton image à volonté sans aucune perte de qualité.

Tu peut utilise Inkscape, qui est très bien pour bosser. utilise une image bitmap de référence pour venir travailler par dessus.

Bon courage.

De toute façon, je crois qu'Inkscape permet pas d'exporter en PNG.

Inkscape permet d'exporter en PNG (heureusement!) via la fonction Exporter en Bitmap. On peut choisir la zone à exporter et la résolution de l'image finale.

Trois choix, équivalents si tu n'as pas besoin d'afficher plus d'une dizaine d'objets :

• Utiliser l’élément <svg>
• Utiliser <canvas> en dessinant un PNG (support IE > 9)
• Utiliser <canvas> en dessinant un SVG (fait partie de la spec' mais support incertain)

Ok je viens d'essayer avec inkscape, je précise que je ne connaissais pas cet outil avant.

J'ai beaucoup de respect pour toi et toute ta famille, poisson-clown

Je précise qu'il s'agit d'une capture d'écran d'inkscape >.> je n'arrive pas à faire deux trois petites chose : -"peindre" pour dégager le haut des bandes (qui devrait être blanc) -virer tous les autres trucs de l'écran (il y a un grand rectangle noir que je peux pas sélectionner) -rendre le fond transparent (à moins qu'il le soit déjà)

Mais là, ça devient un tuto Inkscape

• Peindre pour dégager le haut des bandes semble compliqué sans un niveau de base.
• Le grand rectangle noir est la zone de dessin, donc normal que tu ne puisse pas le supprimer.
• Le fond est déjà transparent.

Mon 'Bureau' inkscape a cette tête là :

Sinon, pour enlever les bouts noirs, je pourrais juste rajouter des chemins blancs par-dessus non ?

Pour dégager le haut des bandes, je pense qu'il faut découper la courbe de Béziers correspondant à la bande de telle manière à pouvoir changer l'apparence du haut et bas des bandes séparément. J'avais essayé mais pas réussi quand je faisais des illustrations de maths avec Inkscape, mais je suis pas bon en graphisme, c'est pas étonnant

Tu peux peut-être aller voir le topic sur les illustrations de maths avec Inkscape pour les schémas de topologie d'Holosmos, il me semble que c'était expliqué.

Oh, et le rectangle noir c'est juste pour que tu voies ta feuille. Ça s'enlève dans le menu affichage si je me souviens bien, mais de toute façon ça apparaît pas dans le SVG final.

Voilà, j'ai exporté l'image pour vous montrer