Le blog de Loonie

J’ai récemment découvert un petit logiciel libre et gratuit que j’aime beaucoup, Context Free. Il permet, à partir d’instructions qu’on lui donne, de générer des dessins. On peut lui donner des instructions récursives, c’est à dire qui se répètent en boucle, ce qui est pratique pour dessiner des fractales, et/ou aléatoires, qui nous donneront un résultat chaque fois différent.

Je vous invite à visiter la galerie de Context Free Art pour avoir un aperçu de ce dont ce logiciel est capable. Et si grâce au petit tutoriel qui va suivre, vous arrivez à faire de jolies choses, n’hésitez pas à l’enrichir de vos créations !

(suite…)

Il n’y a pas que des pixels dans la vie des images numériques ! Il existe aussi les courbes de Bézier. Vous les connaissez peut-être sous un autre nom suivant les logiciels que vous utilisez : tracés vectoriels pour les utilisateurs de la suite Adobe, ou bien chemins pour les utilisateurs de logiciels tels que The GIMP et Inkscape.

C’est quoi une courbe de Bézier ? C’est une ligne fermée ou non, qui est définie par des points et des vecteurs. C’est pour ça qu’on appelle un dessin fait de courbes de bézier un dessin vectoriel. Cette ligne passe par tous les points, et elle est influencée par les vecteurs qui peuvent être attachés à ces points, pour ajuster la courbure de cette ligne. Voici un exemple de courbe de Bézier : on peut voir les points qu’on appelle des ancres ou bien des nœuds, et les vecteur que l’on appelle plus communément des poignées, qui sont toujours tangents à la courbe. On appelle segment le morceau de courbe qui se trouve entre deux points.

On peut se servir des courbes pour dessiner une surface, ou bien un contour, ou bien les deux à la fois. Les ancres et poignées seront évidemment invisibles sur le dessin final ^^

L’intérêt de ces courbes, c’est que quel que soit le niveau de zoom avec lequel on les regarde, elle seront toujours aussi lisses et aussi précises. Ce n’est pas le cas des pixels : si vous agrandissez 10 fois une image bitmap (=faite de pixels) vous vous retrouverez avec des carrés de 10 pixels de côté, et l’image s’en trouvera très dégradée. Prenez par exemple ce smiley que j’ai dessiné en vectoriel.

Si je l’agrandis 5 fois, voici ce que j’obtiens :

Hors voici ce que j’obtiendrais en agrandissant 5 fois le petit smiley s’il avait été un bitmap et non un dessin vectoriel :

C’est pour cette raison que l’écrasante majorité des polices d’écriture sont conçues en vectoriel et non en bitmap, pour qu’on puisse écrire à la taille quel’on veut sans perdre de qualité.

Si vous voulez vous essayer au dessin vectoriel, il existe Inkscape, qui est un logiciel gratuit dédié au dessin vectoriel. Le logiciel de référence utilisé par les professionnels est Adobe Illustrator, mais ce n’est pas le même prix … ^^

Ces courbes de Bézier vont nous être utiles pour certains tutoriels à venir.

Coloriez vos dessins ou ceux des autres, s’ils vous en laissent le droit

Lien vers le tutoriel (je l’ai mis sur un page différente pour que vous puissiez bien le voir)

Voici un tutoriel pour vous apprendre comme son nom l’indique, à colorier un dessin en commençant par le rendre exploitable s’il ne l’est pas déjà. Autrement dit, pour transformer ceci :

En cela :

Pour un meilleur résultat, il faut que les traits de votre dessin soient bien noirs, un croquis au crayon mal appuyé rendra moins bien à l’écran. Au besoin, repassez-le au feutre noir. Et si vous le pouvez, scannez-le au lieu de le prendre en photo comme l’a fait ma soeur
J’ai pris son dessin comme exemple pour le tutoriel parce que l’on voit bien ce qui nous empêche de le colorier tel qu’il est. Mais quand on prend bien soin de faire son dessin avec des traits noirs propres et de le scanner correctement, comme je l’ai fait pour colorier mon Calamar, le résultat est de meilleure qualité.

J’ai menti ! J’ai pu faire mieux comme image GIF à partir de l’exemple PNG : il suffisait de l’animer =) Façon de parler, hein, « suffisait » ne traduit pas assez bien le casse tête que ça a été ^^

Voilà le reflet animé :

Chaque calque est une couche différente de l'image. C'est comme si on avait plusieurs feuilles de papier calque (d'où le nom) superposées pour former l'image entière. On peut donc travailler sur chaque calque indépendamment des autres, et un calque laissera voir les calque du dessous par transparence aux endroits où il n'est pas peint opaque.

Cette animation vous aidera peut-être à comprendre ce qu'est un calque. Vous pouvez monter et descendre le calque "Carré" en appuyant sur les flèches vertes en bas, et rendre les calques visibles ou non en appuyant sur les yeux.

Les possibilités qu'offrent les calques sont infinies : on peut mettre un fond derrière un sujet, dupliquer et modifier un calque pour faire une ombre ou un reflet, colorier par dessus une image et gommer le coloriage sans gommer l'image dessous...

D’une manière générale, lorsqu’on travaille sur une image, il vaut mieux toujours l’enregistrer dans le format du logiciel d’édition que vous utilisez (.psd pour Photoshop, .xcf pour The GIMP, .bmp pour MS Paint…), comme ça on est d'avoir une copie propre de son travail.

Pour publier une image sur internet, on enregistrera les images pratiquement toujours au format GIF, JPEG ou PNG.

Le format GIF

Le format GIF est très utile pour faire des animations. Le principal défaut de ce format est que le nombre de couleurs est limité à 256. Or par exemple les photos que j'ai prises avec mon appareil en contiennent environ cent mille à deux cent cinquante mille ! En revanche, contrairement au format JPEG, on peut avoir des pixels transparents, et donc des images pas forcément rectangulaires mais en forme de ce que vous voulez. Dans ce cas, vous serez limité à 255 couleurs, plus la transparence : un pixel est soit complètement opaque, soit complètement transparent.

Le GIF n'est avantageux que pour les animations depuis que le format PNG a été inventé, car ce dernier est plus performant que le GIF en tous points, sauf pour les animations qu'il ne supporte pas.

Voici un exemple d'animation GIF :

Le format JPEG

Le format JPEG, ou JPG, est très répandu sur internet, du fait du faible poids des images enregistrées dans ce format. Son faible poids a une contrepartie : les images perdent de la qualité. Elles contiennent plus de bruit, bien que les couleurs conservent leur diversité, elles perdent un peu de leur qualité. On ne peut pas avoir de transparence avec ce format : une image JPG sera toujours un rectangle plein.

Les photographies, qui contiennent un grand nombre de couleurs différentes, sont enregistrées en JPG car contrairement aux formats GIF et PNG, le format JPG ne répertorie pas toutes les couleurs qui composent l'image mais fait un caclul pour les déduire. Quand il y a beaucoup de couleurs, elles prennent donc moins de place.

Par contre, une image qui contient peu de couleurs perd à être enregistrée en JPG car son poids sera équivalent ou même plus élevé que si elle avait été enregistrée en GIF ou en PNG, et ce avec une qualité ammoindrie.

Voici un exemple pourra vous permettre de vous rendre compte de cette perte de qualité.

Voici donc une image que, compte tenu du fait qu'elle ne contient que deux couleurs, j'ai enregistrée en PNG.

Voici maintenant la même, enregistrée en JPG avec une qualité de 60% selon l'échelle que donne GIMP, et qui est à peu près la qualité que l'on obtient en enregistrant une image en JPG dans Microsoft Paint.Le rouge est moins profond et les contours ne sont plus très nets.

Détail agrandi trois fois du PNG :

et du JPG :

On voit moins cette compression dans une photographie enregistrée avec une qualité raisonnable, car on a rarement de contrastes aussi marqués et le bruit se fond dans les autres couleurs.

Le format PNG

Le format PNG est une version plus récente et beaucoup améliorée du format GIF. Elle ne permet pas l'animation. En revanche, il peut gérer autant de couleurs que le JPEG, la même image en PNG sera plus légère qu'en GIF, et il gère plusieurs niveaux de transparence. Le tout sans altérer la qualité de l'image. Les images contenant des bords nets, du texte, restent lisibles et sans défaut.

Les niveaux de transparence permettent d'éviter les escaliers sur le contour de l'objet dont on aura enlevé le fond, d'avoir des ombres et des objets transparents, etc... Malheureusement, Internet Explorer 6 ne sait pas gérer les niveaux de transparence, il les affiche comme des rectangles pleins. Heureusement, il est possible de choisir la couleur de fond de l'image qu'affichera IE6. Par contre, convertir un GIF transparent en PNG ne pose pas ce problème, si l'on prend garde que le PNG que l'on enregistre est bien en mode 256 couleurs, les zones transparentes le resteront.

Voici un exemple d'image PNG transparente
Si vous utilisez Internet Explorer 6 vous ne verrez donc pas la transparence du PNG, pour les autres, vous pouvez jouer avec l'ascenseur pour superposer l'image PNG avec l'image de fond du blog pour l'observer.

Et le meilleur équivalent en GIF que j'aie pu faire.

Récapitulatif :

Votre image est :

• animée > on l'enregistre en GIF
• une photographie simple > on l'enregistre en JPEG
• transparente > on l'enregistre en PNG
• réalisée par ordinateur >  on l'enregistre en PNG
• avec du texte > on l'enregistre en PNG.

Il y a quelques temps, j’ai regardé un reportage sur le calamar géant. Dans le reportage, les scientifiques partaient à la pêche pour essayer de trouver des larves de calamar géant. Ils ont fini par en trouver, mais en cours de route ils ont trouvé d’autres choses, dont un bébé calamar d’une autre espèce, que j’ai trouvé très mignon ! Ca m’a donné envie de le dessiner. Ce que j’ai fait au crayon à papier le lendemain, dans la salle d’attente du médecin. A la maison j’ai emprunté le feutre-pinceau à l’encre de chine de mon Shamaloo et j’ai repassé les traits. Une fois sec, j’ai gommé le crayon et je l’ai scanné, pour ensuite le colorier sur The Gimp.

Voilà le résultat !

Hier soir, peu avant de me coucher, j’ai eu une envie de dessiner, mais, comme d’habitude, je ne savais pas quoi. J’ai donc demandé à mon Shamaloo qui m’a répondu « Une grenouille ! ». J’ai donc dessiné une grenouille sur The Gimp, et puis je l’ai coloriée. Pour m’amuser j’ai caché les traits de dessin et finalement je l’aime mieux sans les traits, en ne laissant que la couleur.