Faire de belles images bien nettes ?

Désolé Nemo

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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.

+0 -0

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.

+1 -0

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.

+0 -0

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.

Photoshop : pinceau (à gauche) et crayon (à droite)

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.

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

Teillo

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

+1 -0
Auteur du sujet

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 :)

+0 -0

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 :

+1 -0

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 :)

Teillo

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.

Staff

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.

Hier, dans le parc, j'ai vu une petite vieille entourée de dinosaures aviens. Je donne pas cher de sa peau.

+1 -0

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 ?

Teillo

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)

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0
Auteur du sujet

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

Image utilisateur

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

+0 -0
  • 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.

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0

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 :D

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.

Édité par anonyme

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte