Graphismes 2D pour les programmeurs

Restez en forme… l'outil de découpe

Chris Hildenbrand

Traducteur

Alexandre Laurent

Pour rester dans le thème de l'eau, rejoignons le rivage et regardons le coucher de soleil sur la plage afin d'introduire d'autres outils et techniques pratiques.

Commentez

- Titre : Graphismes 2D pour les programmeurs

- Auteur : Chris Hildenbrand

- Traducteur : Alexandre Laurent

- Parution : 11 septembre 2014

- Licence : 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 ® 2014 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.

Sommaire

- I. Restez en forme… l'outil de découpe

- I-A. Recycler des objets

- II. Remerciements

- III. Commenter

I - Restez en forme… l'outil de découpe

Commencez avec un rectangle.

Utilisez l'outil de dégradé linéaire pour le remplir. Nous souhaitons créer un coucher de soleil avec une lumière proche de l'horizon.

Ajoutez un duplicata en dessous et éditez le dégradé pour le rendre bleu foncé.

Un rectangle plus sombre dont les nœuds ont été déformés constituera la plage au premier plan.

Un autre rectangle avec un léger remplissage jaune ayant un alpha de 25 % formera les rayons de lumière.

Réduisez la base et déplacez le point de pivot vers le bas, puis dupliquez-le.

Pour garder les rayons « à l'intérieur » du fond, nous utilisons l'outil de découpage. Commencez par créer un duplicata du ciel,

et sélectionnez le rectangle, puis les rayons et utilisez la commande Objet/Découpe/Définir.

Le nouvel « objet rayon » peut être dupliqué et même avoir sa propre valeur alpha.

C'est notre coucher de soleil « style pop » basique avec quelques cercles et dégradés en plus pour les rochers dans l'eau.

Il est temps d'ajouter des palmiers pour donner un aspect tropical.

Commençons par ajouter une lointaine île avec des palmiers. Débutez avec un cercle écrasé.

Après l'avoir converti en chemin, marquez tous les nœuds et cliquez sur le bouton d'insertion de nouveaux nœuds.

Deux clics suffisent pour avoir assez de nœuds pour déformer le cercle en une jolie silhouette d'île.

Notre lointain palmier commence avec une simple étoile ,

convertie en un chemin et modifiée pour former les feuilles.

En cliquant sur la ligne entre les nœuds et en les déplaçant, vous influez sur les courbes.

Ajoutez un carré pour le tronc.

Convertissez-le en chemin, modifiez les nœuds et adoucissez les courbes.

Ajoutez des variations pour rendre votre scène bien plus intéressante.

Une des « merveilleuses » choses avec le dessin vectoriel est sa faculté d'être redimensionnable. Les objets peuvent être agrandis ou réduits sans perte, permettant une édition et un ajustement simple de l'illustration.
Dans notre cas, la taille des palmiers définira la perception de la distance par l'observateur. Des palmiers plus petits placeront l'île plus loin, alors que des palmiers plus grands la « placeront » plus près de nous.

De petits palmiers éparpillés sur l'île la rendent plus grande et lointaine.

Alors que des arbres plus grands rendent l'île plus petite et proche du rivage.

Jusqu'à maintenant, nous n'avons utilisé que deux simples palmiers pour notre scène, mais cela ressemble déjà à une plage tropicale.
En utilisant les mêmes palmiers dans le premier plan nous donnons un aspect plus « réaliste » et bien plus graphique à la scène.
Essayons et ajoutons quelques détails à nos palmiers étoilés.

À propos, les nuages sont de la même forme que l'île, simplement écrasés et coloriés avec une couleur correspondant au dégradé du ciel. Essayez de réutiliser les formes tout en les modifiant légèrement, en les écrasant, en les tournant ou en les inversant afin d'accélérer les choses, d'ajouter de la variation et de rendre votre scène encore plus intéressante.

Les nombreux objets que j'utilise dans mes tutoriels (tels que les palmiers ci-dessus) sont faits à partir de formes prédéfinies (cercles, carrés, étoiles, etc.) mais ce n'est qu'une option. L'outil de dessin à main levée ou l'outil de tracé de ligne permettent créer des formes identiques mais nécessitent un peu plus de compétences artistiques.

Pour notre palmier détaillé nous avons besoin de fonctionnalités « plus avancées » d'Inkscape : l'interpolation et les effets de chemins.

Pour notre palmier au premier plan nous commençons avec un cercle écrasé converti en un chemin,

et nous modifions les nœuds pour créer une extrémité pointue.
C'est aussi une bonne forme pour l'herbe ou les cheveux.

Créez un duplicata plus petit de la forme.

Sélectionnez les deux objets et faites-en une interpolation.(Extensions/Générer à partir du chemin/Interpoler…).

Inversez verticalement le duplicata et placez-le en dessous.

Ajoutez un autre cercle pour remplir le centre des feuilles et ajoutez la tige.

Créez des variations en sélectionnant un groupe interpolé et en ajoutant une torsion (Chemin/Éditeur d'effets de chemin/Courber),

Ajustez la courbe de la torsion pour reformer la feuille,

faites de même avec l'autre moitié et ajustez la tige pour correspondre à la courbe.

En variant les feuilles, en ajoutant l'interpolation et en vérifiant sur quelques images de référence on peut continuer d'améliorer l'aspect des palmiers.

I-A - Recycler des objets

Si vous avez des images similaires à produire pour votre jeu, il peut être judicieux de prendre plus de temps sur les éléments initiaux, puis de les « recycler ». De cette façon, vous économisez du temps et créez un aspect plus consistant.

Le superbe avantage d'utiliser des graphismes vectoriels repose sur la facilité de manipuler et modifier les objets. En prenant les éléments du coucher de soleil et en les coloriant différemment, on peut créer une scène de plage en pleine journée en un rien de temps.

Un dégradé allant du vert sombre au vert clair pour les feuilles de palmier et un vert bleuté pour l'île et le ciel permettent de transformer toute la scène.

Suivant le style que vous voulez obtenir, les illustrations vectorielles peuvent être trop propres, trop claires ou simplement trop pimpantes visuellement. Je suggère de les combiner avec des effets disponibles dans Gimp.

En associant les outils des programmes d'illustrations vectorielles avec les capacités des logiciels de manipulation d'images et de photos le résultat peut être complètement différent et offrir des possibilités infinies.

J'espère que ces fonctionnalités légèrement plus avancées ne vous ont pas trop posé de problèmes. Amusez-vous bien et attendez-vous à plus !

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.