J’avais déjà fait un article sur ce thème mais la manipulation était quand même assez complexe et longue. Voici une autre méthode plus facile et plus rapide qui va utiliser l’outil « pot de peinture » d’inkscape.

Alors au boulot ! Tout d’abord, il nous faut une image de départ. Le mieux est encore une capture d’un émulateur. Le choix ne manque pas sur tout les systèmes d’exploitation. Pour travailler plus clairement , j’ai repris l’image sous gimp et enlevé les pixels du fond. Voici la capture …

et l’image qui va nous permettre de travailler sous inkscape.

On peut se passer de cette étape mais c’est plus facile pour la suite.

Pour plus confort, il faudra séparer le dessin que nous allons réaliser et l’image. Avec le gestionnaire des calques (menu calques/ claques), créez un autre calque vide appelé « dessin ». On peut renommer le premier « mario »et le verrouiller.

Mario est prêt !

Cliquez sur le calque « dessin » et sélectionnez l’outil « pot de peinture ». Choisissez la couleur que vous voulez. Dans la barre de l’outil ,  mettez « grand » pour l’option « combler les vides ». Cliquez sur toutes les zones de couleur qui constituent le personnage.

On obtient donc une forme unie constituée de différents chemins.

Revenez à l’outil calque. Verrouillez le calque « dessin » et faites l’opération inverse pour le premier calque. On va ainsi pouvoir ainsi déplacer sur la gauche l’image d’origine pour repiquer les couleurs avec l’outil « pipette ».

Les experts auront remarqués les petits défauts du dessin vectoriel. Même en bidouillant les options du pot de peinture , je n’ai jamais réussi a obtenir un résultat parfait. Si on active  l’option d’agrandissement , cela a tendance a arrondir les bords des formes générées. P

Pas de panique, ces petits défauts ne seront pas trop visibles. Continuons. Donc, avec l’outil pipette, il suffit de sélectionner un objet vectoriel et de cliquer sur son pendant bitmap pour obtenir la même couleur. Le dessin n’étant pas complexe , c’est terminé en quelques minutes.

On peut customiser facilement notre petit personnage. Sélectionnez l’ensemble du dessin et dupliquez le. (ctrl + d) Allez en ensuite dans le menu chemin / union.

Floutez et passez cet objet en arrière plan et voici le résultat.

Sur le même principe , on peut obtenir un mario brillant. Toujours avec la même forme noire, tracez une autre qui couvre la partie supérieure.

Sélectionnez les deux formes et allez dans le menu chemin / intersection. On obtient donc ceci :

Passez ce nouvel objet en blanc et appliquez un dégradé.

Sur cette capture on a l’impression que les petits défaut du pot de peinture donnent une sorte de relief. Voila, amusez vous bien avec inkscape

Merci Imppao pour l’info, la sortie d’inkscape 0.48 est très proche. Les impatients peuvent toujours télécharger une version ici.

En passant voici une petite capture de cette nouvelle mouture :

La première chose que l’on remarque , une bonne partie des outils initialement placés au dessus est passé a droite. L’outil « spray » vient de se rajouter sur la barre de gauche.

Il y a quelques semaines, j’avais testé une des préversions et la conversion texte->chemins était revenue comme sous la version 0.46. Le changement a été annulé , La conversion texte->chemin donnera toujours un groupe et non un chemin « complet ».

Perso , les barres d’outils a droite, je trouve ça gonflant mais on peut changer ça très simplement en basculant l’affichage en mode « personnalisé ». On peut ainsi replacer les barres d’ouils comme on veut     (menu Affichage / Personnalisée)

Je repasse l’info en coup de vent … , donc la première préversion de l’attendu inkscape 0.48 est dispo ici !

Il y a les sources pour compiler cette version , une pour mac os et un installateur exe pour windows. Tout le monde est content.

Bon test !

Tutoriel un peu particulier , il vous faudra la version 0.48 d’inkscape qui n’est pour l’instant qu’en développement. Merci a Luc qui m’a donné cette idée sans faire exprès

Où peut on trouver cette version ? :

Les utilisateurs de windows peuvent la télécharger ici. Il suffira de décompresser l’archive et de lancer le programme directement. Pour les utilisateurs d’ubuntu 10.04 , vous pouvez le compiler avec un peu de patience en suivant cet article ici.

Au boulot ! :

Tout d’abord, il va falloir dessiner les facettes … et c’est plutôt facile avec l’extension « sphère fil de fer ». Vous la trouverez dans le menu Extensions / rendu. Voici les paramètres que j’ai utilisé :

Donc , le résultat obtenu en cliquant sur accepter est ceci :

Première constat , on ne peut pas changer le contour de cette sphère qui devra être blanche. Sélectionnez la sphère, cliquez sur le bouton dégrouper ou bien en passant par le raccourci (MAJ+CTRL+G ).

Resélectionnez les objets séparés et allez dans le menu Chemin / combiner. Laissez la sphère telle que, nous la modifierons par la suite. Il nous manque de la couleur tout en ayant du relief… Il va donc falloir dessiner un cercle qui aie la même taille que la sphère avec en prime un dégradé radial blanc -> noir. Pour ce qui est de la taille, c’est assez simple. Il suffit de reporter les bonnes valeurs en pixels qui se trouvent sur la barre en haut. (voir image)

Donc dans mon cas, le cercle dessiné devra être parfait avec un diamètre de 201 pixels. (en maintenant la touche ctrl enfonçée on dessine de beaux cercles)

Passons au dégradé blanc vers transparent comme pour l’image ci dessous.

L’outil dégradé fonctionne de façon un peu particulière. Une fois appliqué , on se retrouve avec un dégradé couleur princpale vers cette même couleur mais transparente… (si vous êtes paumé , un petit tour par ici s’impose)

Pour résumé :

(1) : c’est votre liste de « stop » qui correspond a une étape du dégradé. Le dégradé  par défaut a donc deux stop.

(2) : c’est l’outil de sélection de couleurs. Perso, je préfère la roue.

(3) : c’est le piège de cet outil. Si vous changez la couleur du deuxième stop pour du noir comme nous en avons besoin, il ne faut pas oublier de mettre cette réglette a fond. Sinon votre couleur de fin est totalement transparente.

Vous vous en sortez avec le dégradé ? Parfait ! Reste a mettre ces deux objets l’un sur l’autre.

Sélectionnez les deux objets et cliquez sur l’outil de positionnement ( CTRL + MAJ + A) et cliquez sur les boutons de centrage comme sur l’image qui suit.

Cliquez sur la sphère en fil de fer, et appliquez un contour blanc. (clic droit sur le blanc dans la palette puis « définir le contour ».

Voici ce que cela donne avec un fond noir et un petit rectangle gris pour simuler le fil d’accroche de la boule.

Bien entendu , on peut encore améliorer avec par exemple :

- une copie du cercle de fond de la boule mis en blanc, flouté et passé en arrière plan. Cela donne un halo lumineux assez sympa.

- deux petites formes en arc de cercles faites avec l’outil bézier et floutées permettent de cibler des effets de lumières

- on peut tenter aussi de mettre des petites étoiles (il y a un outil pour ça) et de les flouter également.

Si vous cherchez le SVG, il se trouve en lien sur la dernière capture.

Pour aller plus loin :

Le rendu n’est pas parfait mais il a l’avantage d’être facilement réalisable. Si vous désirez appliquer une couleur  ou un dégradé pour chaque facette de la boule, c’est tout a fait faisable. Mais cela demandera plus de travail par la suite.

Il faudra travailler sur la sphère fil de fer ainsi qu’un cercle en dessous de la même taille. Sélectionnez les deux objets et allez dans le menu Chemin/exclusion. Le fond va disparaître. Retournez dans le menu Chemin/séparer. Chaque facette est devenue autonome et peut avoir un remplissage indépendant des autres !