Graphismes 2D pour les programmeurs

Créer un personnage avec un contour visible

Les deux auteur et traducteur

Traducteur : Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Créer un personnage avec un contour visible

Voici une demande que j'ai reçue plusieurs fois : « Comment créer un personnage avec un contour ? » Ce n'est pas très différent des autres créations de personnages, vous ajoutez juste un peu de difficulté et quelques problèmes à contourner.

Les principaux problèmes que j'ai vus avec de nombreuses illustrations utilisant les contours sont :

  • l'incohérence de la grosseur du trait (différentes épaisseurs pour différents éléments de l'écran). C'est un petit peu plus compliqué et demande quelques réflexions pour avoir un écran équilibré. Mon conseil est de soit garder tous les éléments avec la même épaisseur, soit d'utiliser un pinceau plus gros pour tous les éléments importants (par exemple, les personnages, logos, éléments d'interface) et de créer le fond avec un trait plus fin ;
  • la couleur des traits par rapport à la couleur des formes ;
  • l'absence de corrélation entre l'épaisseur de la ligne et l'illustration. Vous avez sûrement vu que, dans les comics, les illustrations et les cartoons - l'épaisseur du trait n'est pas uniforme. Il commence fin, devient plus gros et finit en finesse, ce qui donne un sentiment de coup de pinceau. Bien fait, cela améliore grandement l'image, mais cela est plus long à faire. L'utilisation des outils d'Adobe Illustrator ou Corel Draw pour créer des brosses dynamiques donne souvent un résultat qui ne semble pas bon.

Mettons de côté tous ces problèmes. Commençons par quelque chose de simple. Dans ce tutoriel, nous allons faire un porcelet avec un trait noir cohérent sur tous les éléments. Dans l'un des prochains tutoriels, je détaillerai des contours plus complexes.

Image non disponible
Image non disponible


Commencez avec un cercle, Image non disponible convertissez-le en chemin et déplacez le nœud droit vers le bas,

Image non disponible


pour créer la tête du porcelet. Dupliquez-le et rétrécissez-le pour l'ombre.

Image non disponible


Ajoutez un trait sur la forme extérieure. N'oubliez pas de rendre le trait assez épais pour l'exportation en bitmap.

Image non disponible


Ajoutez des cercles pour les yeux Image non disponible (forme de base, reflet et, dans ce cas, une marque autour de l'œil droit).

Image non disponible


Ensuite, créez les oreilles en utilisant des cercles déformés grâce à l'ajout de nœuds. Image non disponible Image non disponible

Image non disponible


Dupliquez la forme et réduisez-la un peu pour former l'intérieur de l'oreille du cochon.

Image non disponible


Dupliquez les deux formes, inversez-les et réduisez un peu leur largeur. Ensuite, placez-les derrière la tête.

Image non disponible


Passons maintenant à la particularité la plus importante pour en faire un porcelet : le museau. Démarrez avec un cercle, convertissez-le en chemin et dupliquez-le. Image non disponible

Image non disponible


Déformez le cercle en tirant le nœud gauche vers l'extérieur et en ajoutant deux autres nœuds.

Image non disponible


Placez le museau sur la gueule et ajoutez deux cercles pour les naseaux. Le contour pose un problème, puisque nous ne souhaitons pas que les lignes sur la gauche soient visibles.

Image non disponible


Utilisez l'outil de lignes droites pour dessiner une forme recouvrant la ligne sur la gauche, Image non disponible

Image non disponible


et ajoutez-lui la couleur de base de la peau. Ajoutez une autre ligne pour dessiner une bouche. Image non disponible

Les deux dernières étapes montrent l'un des principaux problèmes avec les contours : le recouvrement d'éléments crée des lignes que nous ne voulons pas voir. Vous pourriez juste combiner le museau avec la tête, mais, en faisant un objet unique, cela posera des problèmes pour le travail d'animation. Cela devient encore plus évident avec les bras et jambes. Je préfère simplement ajouter des formes pour masquer les recouvrements.

Image non disponible
Image non disponible


Un autre cercle est déformé pour le corps, Image non disponible Image non disponible

Image non disponible


avec une version réduite pour l'ombre - comme pour la tête. La forme plus claire n'a pas besoin de contour.

Image non disponible


Les jambes sont basées sur un autre cercle déformé. Image non disponible Image non disponible

Image non disponible


Utilisez l'outil de lignes droites pour dessiner la forme du sabot - c'est à la base un rectangle particulier avec une indentation. Image non disponible

Image non disponible


Convertissez les lignes en courbes et pliez les lignes du haut et du bas. Image non disponible

Image non disponible


Dupliquez les formes et assombrissez-les pour les jambes arrière.

Image non disponible


Positionnez les éléments et placez les deux jambes derrière le corps (page précédente).

Image non disponible


Créez un autre cercle pour la queue, transformez-le en chemin et ajoutez un nœud en bas à gauche et tirez-le vers l'extérieur, Image non disponible Image non disponible

Image non disponible


tournez ce nœud dans un coin et ajustez-le pour créer une pointe. Ajoutez un triangle et un autre cercle pour la base. Image non disponible Image non disponible

Image non disponible

La queue peut ne pas avoir un aspect tire-bouchon que vous verriez dans de nombreuses illustrations de cochon - c'est un de ces cas où vous pensez savoir à quoi cela ressemble et que ce n'est pas la réalité. À la fin, j'ai vérifié sur Google images (la meilleure invention depuis le pain en tranches) et j'ai vu de vrais porcelets et j'ai trouvé qu'ils avaient une jolie petite queue plus convenable.

Image non disponible
Image non disponible

Et la dernière étape - j'ai oublié de l'ajouter à la page du tutoriel - c'est une forme pour masquer la jointure des jambes avec le corps.

J'espère que vous avez aimé ce tutoriel. Lancez Inkscape et commencez à créer !

II. Remerciements

Cet article est une traduction autorisée de l'article paru sur 2D Game Art for programmers. Je remercie chaleureusement Chris Hildenbrand de nous avoir permis de le traduire.

III. Commenter

Vous pouvez commenter cet article ou présenter vos réalisations sur le forum.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Chris Hildenbrand. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.