* FAQ  * Rechercher  * @Gimlao  * Mumble
 * Connexion
Nous sommes actuellement le Mar 27 Juin 2017 12:36:17
  Consulter les messages sans réponse
Consulter les sujets actifs



Publier un nouveau sujet Répondre au sujet  [ 2 message(s) ] 
Auteur Message
Message Publié : Ven 31 Déc 2004 17:43:46    Sujet du message : [Opti] Optimisez correctement vos dessins
Avatar de l’utilisateur
Support technique

Message(s) : 3061
Inscription : 31 Déc 2004
Âge : 36
Localisation : Edenia

Prenez bien soin de regarder ces deux images

Image Image

Elles représentent exactement le même dessin et pourtant elles sont totalement différentes.
Celle de gauche n'a pas été optimisée et restée telle qu'elle est sortie du scanner (l'image PNG de ce dessin monte déjà à 1,5 Mo !!!). D'où, on ne peut imaginer une telle image en PNG Truecolor et un passage en JPEG est pratiquement obligatoire. Pourtant, on va le voir plus bas, j'ai une solution bien plus intéressante à vous offrir.
A l'opposé, celle de droite a été intelligemment optimisée et son PNG ne fait plus que 83 Ko. Une différence de taille me direz-vous. Et ce n'est pas tout, je l'ai passé en mode 'Niveau de gris' car il n'y avait plus aucune couleur dessus, afin de gagner en taille de fichier. L'image de droite est aussi plus jolie et plus confortable à regarder, en plus d'être 21 fois plus rapide à charger.

Cette optimisation est-elle compliquée à faire ? Point du tout. Je vais vous montrer les étapes de cette optimisation, qui va de la suppression du motif quadrillé au rééquilibrage des niveaux, en passant par le passage en mode 'niveaux de gris', le tout avec Photoshop (la méthode peut aussi s'appliquer avec d'autres logiciels comme Paint Shop Pro, The GIMP ou autre, en ayant un peu de jugeote) :

1. Suppression du motif quadrillé

Avant toute chose, il faut bien comprendre que généralement, les détails superflus nous empêchent d'apprécier une image correctement. De plus, ces détails ont tendance à freiner la compression de l'image lorsque celle-ci est en PNG, car elle est compressée sans perte. Voilà qui tombe bien car ça va nous forcer à enlever ces détails superflus pour que l'image se compresse mieux, le tout en veillant à ce qu'elle soit plus jolie. C'est une approche totalement inverse de celle qu'on connaît ; mais que je trouve plus intéressante, moi.

Le premier détail superflu est bien évidemment ce quadrillage bleu-rose qui trahit un dessin fait dans de mauvaises conditions. Histoire de moins passer pour un amateur, nous allons enlever ce quadrillage, non pas par des manipulations longues et fastidieuses mais grâce à un bricolage tout simple.

Ce bricolage consiste tout d'abord à convertir l'image en mode 'CMJN' (un mode de couleur autre que RVB, utilisé pour l'impression notamment).
Ceci se fait en allant dans le menu 'Image', puis en choisissant 'mode' et enfin 'Couleurs CMJN'.
Voilà, votre image est à présent en mode CMJN.
Ensuite, il faut se rendre dans la palette 'Calques, Couches, Tracés' en bas à droite. Il faut cliquer sur l'onglet 'Couches' pour faire apparaître les quatre couches respectives Cyan, Magenta, Jaune et Noir qui composent notre image (car elle est maintenant en CMJN). Comme ci-dessous :

Image

Ce qu'il faut faire maintenant est sélectionner la couche 'Jaune' en cliquant dessus (sur sa barre, pas sur l'oeil), afin que seule celle-ci soit active.
Revenez sur l'image (sa fenêtre) et wow ! Vous constaterez qu'il ne reste plus que des traces blanches à la place du quadrillage. C'est magique ! Voici ce qu'on obtient dans l'exemple que j'ai choisi : (cliquez pour agrandir - 509 Ko)

Image

Certes, c'est mieux... mais insuffisant. Il reste encore toutes les saletés dues au crayon HB et au gommage, ainsi que les aspérités du papier qui alourdissent encore le PNG. On n'a pas vraiment besoin de ça pour apprécier un dessin. C'est pour ça que nous allons maintenant essayer d'enlever ces saletés, afin de rendre l'image encore plus propre dans notre 2ième paragraphe. Ne touchez surtout à rien sur les couches CMJN et laissez la couche 'Jaune' sélectionnée toute seule comme ça. Ca servira pour la suite.

2. Passage en niveaux de gris et réajustement des niveaux

Euh... Niveaux ?... C'est quoi, ce machin encore ? Il s'agit d'un réglage permettant de redéfinir avec précision comment s'afficheront les tons foncés, clairs et neutres d'une image. Cette correction des niveaux est donc plus pointue qu'un simple réajustement de la luminosité et du contraste et donne aussi de meilleurs résultats selon ce qu'on veut.

Mais avant de toucher aux niveaux, on va d'abord faire l'essentiel, c'est-à-dire passer l'image CMJN ci-présente en 'niveaux de gris', car nous n'avons plus de couleurs sur le dessin. Et ça évitera, par la suite, d'avoir un PNG lourd pour rien (ça évitera surtout ces satanées esquisses toujours sauvegardées en PNG truecolor car vous oubliez toujours de la mettre en niveaux de gris^^).

a. Passage en mode 'niveaux de gris'

Pour ce faire, il faut se rendre, comme tout à l'heure dans le menu 'Image' et aller sur 'Mode'. Mais choisir cette fois 'Niveaux de gris' :

Image

Une question vous sera posée concernant la suppression des autres couches (car on est encore en CMJN). Répondez oui, et vous aurez alors la couche Jaune en tant qu'image en niveaux de gris. Ce qu'on voulait, quoi. Maintenant, on va apporter la touche finale à l'image, c'est-à-dire, faire ce fameux ajustement des niveaux.

b. réajustement des niveaux

Vous devez vous rendre dans le menu 'Image' (encore !), mais sélectionner 'Réglages' cette fois. Choisissez alors 'Niveaux' et cette boîte de dialogue apparaîtra :

Image

Vous pouvez y voir un espèce de graphe qui est en fait un histogramme représentant les teintes les plus présentes sur l'image. Et on peut voir qu'il y a beaucoup de "blancs" (plutôt gris-blancs), comme l'indique le graphique dont le sommet se situe surtout vers les blancs (vers 255 environ, quoi). L'idéal serait que ces teintes blanches tendent bien entendu vers du blanc pur. C'est ce qu'on va s'arranger à faire. Sous le graphique, il y a trois curseurs que l'on peut déplacer avec la souris, en pointant et cliquant dessus (ce sont les niveaux d'entrée). Il faut alors prendre le curseur de droite (celui des tons clairs) et le ramener environ, au tout début du sommet représenté par le graphe (comme sur le screenshot ci-dessus, je l'ai mis à 225 -- sa valeur est indiquée juste au-dessus du graphe) afin de repositionner ces tons gris-blancs, vers le maximum. En cliquant sur la case 'Aperçu' de la boîte de dialogue, on aura un aperçu de ce que sera l'image. Et on peut voir que comme on le voulait, les tons gris-blancs ont disparu, pour laisser la place à du blanc bien blanc.
Mais il y a un petit problème car le trait du crayon a tendance à s'effacer et à devenir plus gris. No problémo. On va compenser ça grâce au curseur du milieu, celui des tons moyens.
Il faut en fait déplacer ce curseur plus vers les blancs, afin de rendre le trait plus foncé (me demandez pas pourquoi, je suis incapable de répondre, là !!). Dans mon exemple, j'ai déplacé la valeur jusqu'à 0,55 (les valeurs correspondant à chaque curseur sont montrées à gauche, au milieu et à droite, juste au-dessus du graphique). Il existe une autre solution consistant à déplacer le cursur des tons foncés vers la droite. Ca produira le même effet, mais dans notre cas seulement.
Une fois trouvé le bon équilibre, vous pouvez cliquer OK.
Et vous voilà avec une image représentant votre dessin au crayon, bien distinctement mis en valeur par le fond rendu très blanc.

Maintenant, passons à la dernière étape, l'enregistrement de l'image en PNG.

3. Enregistrement en PNG

Afin de bien récompenser le travail qu'on vient de faire, le plus gros sacrilège serait d'enregistrer l'image en JPEG. Après avoir nettoyé l'image, on se retrouverait ainsi avec un ficher très compact, mais avec une image présentant d'autres détails dont on se serait bien passé, des espèces d'échos au niveaux des contours du tracé. Certes, ils ne seront visibles qu'après grossissement de l'image (zoom), mais ce n'est pas très sérieux et pas une bonne solution pour rendre un dessin compact.
Je vous propose, moi, une solution bien plus intelligente, qui vous fera un fichier presque aussi compact sinon plus, mais sans aucun défaut sur l'image. Même en zoomant hard dessus.

Attention, j'admets que vous avez déjà réduit la taille (résolution) de votre image avant de l'enregistrer. Si ce n'est pas le cas, rendez-vous dans le topic 'Comment redimensionner correctement une image' pour en savoir plus (en fait, il faut choisir la méthode 'Bilinéaire' lorsque vous rétrécissez une image ou sinon vous aurez des espèces de halos clairs au niveaux des contours -- si vous choisissez la méthode 'bicubique').
La seule chose qui reste à faire maintenant est d'aller sur le menu 'Fichier' et de choisir 'Enregistrer sous'. Tapez votre nom de fichier (n'imorte quoi, celui que vous voulez) et sélectionnez un format par ceux proposé. Ici, ce sera 'PNG, Portable Network Graphics' (ou SuperPNG si vous avez installé ce plug-in à la place -- http://dioxaz.free.fr/download/SuperPNG.zip pour le trouver). Cliquez sur 'Enregistrer' et voilà !! Vous devriez normalement avoir quelque chose dans le style de l'image que je vous ai montré au tout début :

Image

Cette image ne fait que 83 Ko malgré sa relative grosseur et elle est resplendissante (certes, sous Photoshop, le fichier ne sera pas aussi petit car j'ai recompressé après :P).

Bien sûr rien ne vous interdira de vouloir recompresser votre image avec OptiPNG par exemple (voir topic qui lui est consacré). Vous aurez une taille de fichier bien plus petite que celle que vous donne Photoshop et profiterez ainsi s'un meilleur rapport poids/qualité.

Il s'agit d'une démarche totalement inverse de celle que recommandent les personnes qui rédigent les guides de retouche d'image qu'on trouve dans les librairies et grandes surfaces. Il s'agit aussi de la plus intelligente de nos jours où le haut débit fait plus qu'un tabac. Il serait dommage de ne pas en profiter et de sacrifier encore la qualité de ses images pour après regretter 3 ans plus tard :P. (à oui, il est courant de dire qu'on peut se contenter d'une qualité "acceptable" ; mais moi, j'ai complètement dépassé ce stade : mes images sont toutes nickel et mes MP3 encodés dans la meilleure qualité qui soit, juste pour donner un exemple -- je ne me laisse pas piétiner par la technologie, moi :P -- sauf, quand il s'agit du hardware... mais là c'est une question d'argent... :( )

J'espère que ce tuto vous aura servi et qu'il n'aura pas été trop long. Si vous avez des remarques à faire dessus, des suggestions ou si vous n'avez pas compris quelque chose, merci de m'envoyer un MP.

Non au gaspillage créatif !
Dernière édition par Dioxaz le Ven 18 Fév 2005 14:20:17, édité 2 fois.
Haut
Profil  
Message Publié : Ven 31 Déc 2004 17:45:54    Sujet du message :
Avatar de l’utilisateur
Support technique

Message(s) : 3061
Inscription : 31 Déc 2004
Âge : 36
Localisation : Edenia

Bon, pour vous illustrer la chose, j'ai sélectionné quelques exemples parmi vos fanarts. Il est commun de penser que le JPEG compresse mieux que le PNG quelles qu'en soient les circonstances. Il n'en n'est rien. Et ces exemples vont vous le prouver. L'erreur commune est de penser qu'un dessin papier est beaucoup trop compliqué pour bien se compresser en PNG... certes, c'est vrai... lorsqu'il contient beaucoup de nuances et de crayonage, surtout couleur. Pas vrai lorsqu'il n'y a que du tracé pur et qu'on peut facilement y entreprendre une petite retouche ou optimisation, genre celle que je viens de vous montrer. Allez, c'est parti :

1er exemple :

Un dessin fait par Vilain_pabo, il y a quelques mois :

original, (JPEG, 54,1 Ko) : http://membres.lycos.fr/pnggallery2/png ... uplage.JPG
Version néttoyée et optimisée (PNG niveaux de gris, 27 Ko) : http://membres.lycos.fr/pnggallery2/png ... uplage.png

Notez qu'ici, j'ai simplement ré-ajusté les niveaux après mon nettoyage et que l'artwork s'y prétait bien. Ce qui explique que le PNG soit bien plus compact. Par contre, libre à vous de jugez laquelle des deux est la meilleure version.


2ème exemple :

Un dessin de Reploid fait par Dark-Ax, il y a quelques mois aussi (c'est son perso favori, je crois):

original, (JPEG, dans les 20 Ko) : je ne l'ai plus, sorry
Version néttoyée et optimisée (PNG niveaux de gris, 29,6 Ko) : http://membres.lycos.fr/pnggallery2/png ... -02_hq.png

Cet exemple est particulièrement intéressant dans la mesure où Dark-Ax "se vantait" que son image était compacte. Non seulement, la qualité visuelle était moyenne (après agrandissement) mais en plus il s'est avéré qu'après un nettoyage et ré-équilibrage de niveaux, j'aboutissait à, environ, une image presqu'aussi compacte... en PNG niveaux de gris cette fois et une quailté bien meilleure (même après agrandissement) :P.


3ème exemple :

Un dessin de Spitles (un scan d'une BD fait en cours de dessin il me semble):

original, (JPEG, 200 Ko) : http://membres.lycos.fr/pnggallery2/png ... minibd.jpg
Version néttoyée et optimisée (PNG niveaux de gris, 209 Ko) : http://membres.lycos.fr/pnggallery2/png ... ibd_hq.png

Ici, on a l'exemple typique d'une image ou un travail qu'on juge secondaire et qu'on s'empresse d'enregistrer en JPEG. Or, the Maniac of PNG vient encore nous semer la pagaille en affirmant qu'on peut enregistrer ça en PNG ! Bon, que s'est-il passé. Il se trouve qu'en m'amusant juste à uniformiser les couleurs à la va-vite sous GIMP (à la fac, lorsque je venais juste de télécharger l'image), j'ai obtenu un fichier, là aussi, aussi compact... et de bien meilleure qualité :P. Pourtant, les coups de baguette magique et de remplissage que j'ai fait ne m'ont pas pris plus de 3 minutes... Donc, en gros, vous êtes prêt à sacrifier de la qualité en pagaille, juste pour économiser 9 Ko de rien du tout ^^;;;. (et en plus, j'ai même pas recompressé l'image, le résultat aurait en effet été plus probant encore)
Bon, ne vous inquiétez pas. Là, je vous nargue, je suis pas sérieux à 100 % ;).


4ème exemple :

Un croquis d'un personnage imaginé et dessiné par Rkanjar qu'elle m'a passé sur MSN :

original, (JPEG, 75,5 Ko) : http://membres.lycos.fr/pnggallery2/png ... roquis.jpg
Version néttoyée et optimisée (PNG niveaux de gris, 64,6 Ko) : http://membres.lycos.fr/pnggallery2/png ... roquis.png

Le truc est pourtant un croquis assez compliqué. Et pourtant, allez savoir porquoi, la version PNG est encore une fois plus légère que le JPEG original. Je sais, j'ai néttoyé... (ça a peut-être joué) Je sais, j'ai ré-ajusté les niveaux et lissé les zones blanches (ça aussi, ça a joué). Bon, juste histoire de vous montrer que les optimisations dont certains s'affranchissent, non seulement améliorent le confort visuel mais en plus peuvent nous donner des résultats étonnants lorsqu'on essaie de les enregistrer en PNG 'niveaux de gris'.

5ème exemple :

Un dessin au crayon fait par Pallas4 :

original, (JPEG, 41,5 Ko) : http://membres.lycos.fr/pnggallery2/png ... allas4.jpg
Version nettoyée et optimisée (PNG niveaux de gris, 41,7 Ko) : http://membres.lycos.fr/pnggallery2/png ... 2grays.png

Là, il s'agit de quelqu'un qui reste attaché plus que jamais au JPEG. Pourtant, ici, j'ai réussi à obtenir en PNG niveaux de gris, une image du même poids. Avec une qualité visuelle sensiblement meilleure. Comment ai-je fait ça ?
C'est simple : un coup de baguette magique sur les zones blanches pour enlever les quelques artfacts JPEG restants, puis un passage en niveaux de gris, mais... il y a un hic. De cette manière-là, je ne descendais guère en-dessous de 72 Ko.
Et oui, et oui... J'AI TRICHE ! En fait, j'ai postérisé* son image à 32 niveaux (de gris, ici -- ceux qui ont observé la manière j'ai nommé le fichier l'ont sans doute déjà déviné ^^;;), ce qui a considérablement réduit son poids. De plus, je l'ai recompressée avec PNGOut (un petit programme DOS que je ne vous ai pas encore présenté). Tout ça histoire de me "vanger" sur vous et de vos "mauvaises habitudes" :P. Non, je rigole. Plus sérieusment, la postérisation à 32 couleurs que j'ai faite est pratiquement in-dé-ce-la-ble (même en zoomant à répétition), sauf si on s'amuse à compter les couleurs (PSP ou IrfanView peuvent le faire). Elle est surtout bien moins décelable que les dégradations liées au JPEG ^^ (dans ce cas précis, où la teinte dominante était le blanc et où toutes les nuances sont concentrées sur le tracé).

*Postérisation : procédé qui consiste à réduire le nombre de couleurs affiché par couche sur une image (une image Trucolor possède 3 couches, les couches R, V et B, tandis qu'une image en niveaux de gris n'en possède qu'une seule, la couche 'grise').

exemple : dans une image Truecolor, une postérisation à 64 signifie qu'il n'y aura que 64 couleurs pour chacune des trois couches R, V et B ; cela se traduira, sur une image visuellement riche, par des couleurs un peu déformés et des nuances qui se transformeront en teintes uniformes. En conséquance, le nombre total de couleurs affichées par l'image est aussi réduit.

Ce procédé n'est à utiliser que sur des images ayant des couleurs ou teintes unies et des contours nets. Cela permet d'alléger considérablement ce qui sera un fichier PNG (qu'on recompressera ensuite avec OptiPNG et le réglage 'opti_24_light_image.bat') sans qu'on y décèle une quelconque dégradation. Mais attention toutefois, ce procédé doit s'utiliser avec parcimonie.
Les résultats varient selon les images et je ne vous recommande d'utiliser la postérisation que dans des cas bien précis, si celle-ci apparait **réellement** ne pas dégrader l'image (comme évoqué plus haut, couleurs unies et contours nets = meilleur contexte pour la postérisation). Vous n'êtes pas non plus obligé d'utiliser cet effet (seulement si, réellement, vous voulez un fichier super-compact à tout prix).

Vous pouvez aussi l'utiliser si vous voulez un rendu inédit sur l'image (si celle-ci doit servir d'arrière-plan, par exemple -- cf. mon wallpaper avec Rouge et les clones Shadow -- PNG Truecolor, 677 Ko) ou pour faire un effet de 'cell-shading' en uniformisant toutes les nuances.

Pour l'utiliser sous Paint Shop Pro, il faut aller dans 'Couleurs' puis 'Postériser'.
Sous Photoshop, c'est dans 'Image' --> 'Réglages' --> 'Isohélie' (oui, ça porte un nom différent sous Photoshop).
Sous GIMP, clic droit sur la fenêtre de l'image puis 'Image' --> 'Couleurs' --> 'Postériser'.



Voilà, j'ai officiellement fini de vous gonfler. J'espère que ces exemples auront réussi que ces optimisations que je fais à chaque fois que je download un artwork sont non seulement bénéfiques (à la fois pour le visuel et la compression en PNG) et pas si compliquées et longues que ça. (sachez que même un scan que je considère comme secondaire, il faut que je l'optimise pour "voir ce que ça donne" ^^)

Non au gaspillage créatif !
Haut
Profil  
Afficher les messages publiés depuis :  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 2 message(s) ] 

Le fuseau horaire est UTC+1 heure [Heure d’été]


Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 1 invité


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum

Recherche de :
Aller vers :  
cron
Space Pilot 3K template by Jakob Persson
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Traduction et support en françaisHébergement phpBB