Graphismes 2D pour les programmeurs

Restez en forme… l'outil de découpe

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.

12 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur : Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

Image non disponible
Image non disponible


Commencez avec un rectangle. Image non disponible

Image non disponible


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

Image non disponible


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

Image non disponible


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

Image non disponible


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

Image non disponible


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

Image non disponible


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

Image non disponible


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

Image non disponible


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

Image non disponible

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.

Image non disponible
Image non disponible


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

Image non disponible


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

Image non disponible


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

Image non disponible


Notre lointain palmier commence avec une simple étoile Image non disponible,

Image non disponible


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

Image non disponible


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

Image non disponible


Ajoutez un carré pour le tronc. Image non disponible

Image non disponible


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

Image non disponible


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

Image non disponible


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.

Image non disponible
Image non disponible


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

Image non disponible


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

Image non disponible


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.

Image non disponible
Image non disponible


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

Image non disponible


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

Image non disponible


Créez un duplicata plus petit de la forme.

Image non disponible


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

Image non disponible


Inversez verticalement le duplicata et placez-le en-dessous. Image non disponible

Image non disponible


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

Image non disponible


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

Image non disponible


Ajustez la courbe de la torsion pour reformer la feuille,

Image non disponible


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

Image non disponible

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.

Image non disponible
Image non disponible

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 Image non disponible pour les feuilles de palmier et un vert bleuté pour l'île et le ciel permettent de transformer toute la scène.

Image non disponible

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.

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 © 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.