Share
Dans le tutoriel d'aujourd'hui, je vais vous montrer comment préparer et créer une variété de styles graphiques dans Adobe Illustrator CS6 pour les utiliser ensuite dans un jeu. L'utilisation des styles graphiques présente l'avantage de pouvoir ensuite les appliquer à une multitude de formes sans avoir à recréer chaque aspect. Alors sautons dans ce tutoriel amusant!
J'utiliserai Adobe Illustrator CS5 pour mes premières parties de ce didacticiel. C'est une préférence purement personnelle, car je le trouve un peu plus stable sur mon PC. Cependant, utiliser AI CS6 du début à la fin est tout à fait correct. Commencez par créer un nouveau document en mode couleur RVB.
Je vais essayer quelque chose de nouveau pour moi et c'est une manière différente de préparer une palette de couleurs. J'ai eu cette astuce grâce aux tutoriels de Beto Garza, dont il a plusieurs ici sur Vectortuts +. Commencez par dessiner deux formes espacées et créez une fusion de 3 étapes (Ctrl + Alt + B). Modifiez vos couleurs de début et de fin pour obtenir un joli changement de couleur progressif. Voici les bases pour obtenir une palette de couleurs.
Mélangez-le et essayez de choisir une couleur dans le panneau Nuancier par défaut, puis accédez au panneau Guide des couleurs et sélectionnez-en une couleur. Cela peut vous donner une autre variété de couleurs pour jouer avec.
Avant d’aller plus loin dans la préparation de mes palettes, je dois savoir quels jeux de couleurs seront nécessaires pour la variété d’éléments que je vais créer. Commencez donc par un croquis de base d’une scène de jeu. Ici j'ai ajouté six zones potentielles à créer.
Donc, avec les six zones, je vais créer un mélange de couleurs pour chaque élément. Je viens de dupliquer le mélange original, puis de modifier les couleurs de début et de fin.
Une fois que vous êtes satisfait de vos palettes, cliquez sur Objet> Développez-les pour supprimer le mélange et conserver cinq couleurs pour chaque élément. Sélectionnez chaque groupe de couleurs individuellement et cliquez sur Nouveau groupe de couleurs en bas du panneau Nuancier. Cela ajoutera les couleurs de ce groupe dans son propre dossier de palette. Vous pouvez ensuite double-cliquer sur le dossier de la palette et le nommer Soil / Rocks, Grass etc… afin de faciliter la référence ultérieure..
Élément par élément, je vais vous montrer comment créer chaque style graphique. Nous allons commencer sur le "Grass". Commencez par tracer une ligne courbe avec l'outil Plume (P) ou Arc. Donnez-lui une couleur de trait noir, puis appliquez un poids de trait de 4 points. Dans le panneau Contour, ajoutez le profil: Profil de largeur 1.
Lorsque cette option est sélectionnée, dans le panneau Pinceaux, sélectionnez Ajouter un nouveau pinceau> Pinceau de dispersion et utilisez les options ci-dessous. Changez la méthode de colorisation en teintes et cliquez sur OK.
Tracez une ligne avec l'outil Segment de ligne (\) sur la planche à dessin et dans le panneau Apparence, vous voudrez ajouter neuf traits avec le vert le plus clair en haut et le plus sombre en bas. Appliquez votre brosse à gazon sur chacun des traits, puis de haut en bas, les poids de trait suivants: 0,5, 0,75, 0,75, 1,0, 1,25, 1,25, 1,5, 1,5, 1,75 pt.
Une fois cela fait, dans le panneau Styles graphiques, cliquez sur Nouveau style graphique pour l'ajouter au panneau. Double-cliquez sur l'icône qu'il crée et renommez-le en quelque chose de plus mémorable..
Maintenant que nous avons notre premier élément, je vais configurer mon panneau Calques afin qu’il y ait un calque pour chaque élément.
J'ai ensuite ajouté des formes de base pour chaque élément en utilisant les couleurs de mes palettes personnalisées. Je peux voir à partir d'ici si les couleurs fonctionnent bien ensemble. Pour le moment, je ne suis pas trop sûr du rose, mais je le changerai plus tard quand je saurai mieux comment les éléments fonctionnent ensemble..
Ensuite, nous allons commencer à créer notre sol / roches. C'est dans ce style qu'Adobe Illustrator CS6 commence à rapporter son prix grâce au formidable outil de modélisation. Nous allons commencer par dessiner plusieurs formes avec l’outil Rectangle arrondi. J'ai ajouté un poids de trait de 4 points et ai utilisé les couleurs moyennes de ce groupe de couleurs pour le remplissage et le trait..
Une fois créé, sélectionnez toutes les formes et accédez à Effets> Transformation et distorsion> Ébauche et utilisez les options ci-dessous. Cela créera un style plus irrégulier pour les formes.
Ensuite, allez à Objet> Développer l’apparence pour supprimer l’effet et vous donner les formes autonomes..
Sélectionnez vos formes et sélectionnez Objet> Motif> Créer pour utiliser les options de motif..
À l'aide de l'outil de sélection (V), déplacez vos formes, faites-les pivoter si nécessaire, puis modifiez vos options de motif pour obtenir le motif souhaité. L'objectif est de placer les roches dans une formation avec le moins de trous possible, mais aussi pour éviter que les formes se touchent. Nous n'avons pas fini de créer ce modèle…
À l’aide de l’outil Plume (P), ajoutez de l’ombre aux rochers. Maintenant, l'aigle aux yeux sera le premier à dire "comment peut-il y avoir de l'ombre sur les rochers parce qu'ils sont tous sous terre", ma réponse est… Ajouter de l'ombrage créera une texture plus rock. Alors commencez par ajouter une de vos couleurs plus claires aux rochers, en vous rappelant de dessiner des formes irrégulières.
Puis, en utilisant à nouveau une couleur plus claire, ajoutez d’autres rehauts aux rochers. Une fois que vous êtes satisfait de votre modèle, cliquez sur Terminé et votre nouveau modèle sera ajouté au panneau Nuancier, prêt à être utilisé..
Lorsque j'ai appliqué le motif sur le sol du jeu, il était trop volumineux. Ainsi, pendant que la forme est sélectionnée, sélectionnez Objet> Transformer> Échelle et réduisez l’échelle du motif de 50% seulement..
Puis, en utilisant uniquement les couleurs de la palette de mélange que nous avons créée, j'ai créé un style graphique avec un dégradé linéaire transparent en partant du haut, puis un solide brun moyen derrière le motif. Une fois terminé, j'ai enregistré ce style graphique sous le nom "Soil Rocks".
Déplacement sur nos montagnes / collines en arrière-plan. Commencez par dessiner un long rectangle avec l'outil Rectangle (M). Utilisez ensuite l’effet Effet> Transformer et déformer> Zig Zag avec des points lissés pour créer une onde..
Puis Object> Expand à votre forme autonome.
Maintenant, supprimez ces pointes épineuses. Tracez deux rectangles (M) sur l'une des extrémités de la forme, sélectionnez-les tous les deux et créez un tracé composé (Ctrl + 8)..
Ensuite, utilisez Pathfinder> Minus Front pour supprimer ces pointes hérissées.
Utilisons maintenant l'outil Motif pour créer un joli motif ondulé. Commencez par modifier les options pour vous assurer que vous obtenez des courbes lisses sur chaque sommet sans angles inutiles..
Dupliquez la vague et Coller devant (Ctrl + F), puis modifiez les couleurs de la manière avec les couleurs de votre palette de montagne. Cliquez sur Terminé lorsque vous êtes satisfait du résultat..
J'ai dessiné des montagnes / collines de style dessin animé à l'arrière-plan avec l'outil crayon (P). Dessinez ensuite individuellement plutôt que dans le cadre d'une grande forme.
Je suis ensuite allé à la création du style graphique suivant avec les options du panneau Apparence ci-dessous. Le dégradé le plus sombre a un chemin de décalage de -4 pt tandis que le plus clair venant du haut des collines est réglé sur -10pt.
Recyclons le style graphique des montagnes et appliquons-le au ciel.
Lorsque cette option est sélectionnée, allez dans Recolor Artwork et cliquez sur le groupe de couleurs Sky sur le côté, puis cliquez sur OK..
J'ai supprimé certains effets et traits de la forme. Il ne s'agit donc que d'un motif et de deux dégradés linéaires..
Je vais entrer dans l'élément de motif lui-même et le modifier car la combinaison de couleurs actuelle est un peu trop audacieuse pour le ciel.
J'ai utilisé les deux bleus les plus légers de la palette pour créer un motif de deux vagues.
Pour le rendre plus moelleux, je vais appliquer un effet Smooth Point Zig Zag aux formes avec les paramètres ci-dessous..
Ensuite, utilisez Objet> Développer sur les formes.
Si vous effectuez un zoom avant, vous pouvez constater que nous avons à nouveau un problème avec ces bords épineux.!
Cette fois cependant, utilisez l'outil Plume (P) et supprimez simplement les points inutiles. Vous n'aurez pas besoin de les supprimer tous, mais uniquement ceux qui provoquent une distorsion du motif. Cliquez sur Terminé lorsque vous êtes satisfait du résultat..
Contrairement aux roches et au sol, ce motif est trop petit pour le ciel. Je vais donc changer l'échelle du motif et l'augmenter de 200%.
J'ai ensuite modifié les dégradés pour créer un motif beaucoup plus subtil. Avec le ciel, vous ne voulez pas que le motif se démarque autant qu'il pourrait vous distraire du jeu / de l'action. Une fois que vous êtes satisfait du résultat, créez votre nouveau style graphique et nommez-le de manière appropriée..
Je souhaite que les collines en arrière-plan semblent plus détachées du premier plan. Je vais donc ajouter un autre dégradé au style graphique que nous avons déjà. En utilisant le dégradé utilisé pour le bas du style graphique Sky, je vais l’ajouter aux traits et aux remplissages du style graphique Hill. Avec cela appliqué et enregistré, il sépare définitivement l'arrière-plan et le premier plan.
Faisons maintenant le style graphique pour les boîtes mystères. Dessinez deux rectangles (M) sur deux et appliquez deux teintes différentes de la palette Boîte mystère..
À l'aide du panneau Transformer, faites pivoter de 45 degrés.
Créons un motif avec ces formes avec l'outil Motif. J'ai une des formes et ajouté une couleur plus sombre derrière les deux rectangles d'origine pour donner un effet de triple bande. Maintenant que le motif me convient, cliquez sur Terminé..
En terminant notre style graphique de la boîte mystère, j'ai ajouté des traits dans un style similaire à celui des montagnes, ainsi qu'un léger dégradé qui est un chemin décalé de -4pt..
Le soleil est créé en utilisant Zig Zag Effects avec différents paramètres et couleurs. Commencez avec un cercle pair créé avec l'outil Ellipse (L). Ci-dessous les réglages du premier effet.
Avec une couleur plus foncée Ajouter un nouveau remplissage derrière le premier.
Ajoutez ensuite un nouveau remplissage sur les deux remplissages avec une couleur plus claire..
En utilisant le même jaune, ajoutez un dégradé radial transparent au-dessous du jaune le plus brillant avec un chemin de décalage de 40 pt. Puis enregistrez votre style graphique et nommez-le de manière appropriée.
Maintenant que nous avons nos styles graphiques complets, je vais leur dire. J'ai ajouté une plate-forme supplémentaire pour tester notre sol et ajouté un trait d'herbe sur le dessus. Cependant les bords du sol semblent incomplets.
Je suis allé de l'avant et j'ai modifié le style graphique du sol en ajoutant deux traits. Cela lui permettra de suivre un style similaire au reste de notre scène..
Comme on le soupçonnait, nos boîtes mystères ne correspondent pas à notre palette de couleurs globale. J'ai donc sélectionné les boîtes, puis utilisé Recolor Artwork et le groupe de couleurs Soil Rocks..
J'ai modifié l'ordre des couleurs dans le groupe en cliquant sur le menu déroulant et en sélectionnant Luminosité - clair à foncé. Cela va créer le contour sombre puis un contour plus clair autour de la forme.
Utilisez l'outil Texte (T) pour ajouter un point d'interrogation à l'une des boîtes de mystère et appliquer le style graphique "Soil 2"..
Je vais modifier les couleurs de la scène globale pour donner un aspect différent à notre jeu, peut-être pour un niveau différent. Dupliquer tous les éléments et leur donner leur propre calque.
Je vais passer en revue et recolorer les illustrations sur chacun des éléments. Pour le ciel, je suis allé dans l'onglet Edition de la boîte de dialogue des options. Cliquez sur Lien harmoniser les couleurs pour conserver le même rapport entre les couleurs.
Lorsque vous déplacez l'une des couleurs, les trois sont modifiées. Je vais donner un coup d'oeil au coucher du soleil / lever de soleil à la scène en ajoutant un ciel rose en sourdine.
Je ne veux pas que les couleurs des montagnes soient trop différentes, je vais donc opter pour une teinte similaire et remplacer les montagnes par le groupe de couleurs d'origine de la boîte mystère..
Je suis ensuite allé modifier l’herbe en allant dans l’onglet Éditer. Il en va de même avec les Mystery Boxes et Soil / Rocks. J'ai également modifié les couleurs du soleil et modifié sa position pour l'adapter à la palette de couleurs coucher / lever du soleil.
Une fois terminé, n'oubliez pas d'ajouter vos nouveaux styles graphiques au panneau et de les renommer correctement. Cela le rendra beaucoup plus facile à utiliser à l'avenir.
J'espère que vous avez apprécié le didacticiel d'aujourd'hui sur la création d'éléments de jeu en créant divers styles graphiques. Apprendre à tirer parti des styles graphiques peut vous faire gagner beaucoup de temps et faciliter la tâche des concepteurs de jeux pour créer les éléments souhaités en appliquant simplement un style à une forme de base..
Accentsconagua