Conception d'interface pour le jeu, dessinez un pack d'icônes

Bonjour à tous!

Je suis Mikhail Kravchenko, concepteur d’interface de jeu.

Cet article explique comment dessiner un pack d'icônes pour le jeu. Ci-dessous, vous voyez le résultat.

Nous fixons les exigences du résultat

Donc, une tâche à propos de ce contenu nous a survolé. Dans le jeu, un événement commence - l'invasion de la race extraterrestre sur notre planète. Nous vaincrons les envahisseurs, divers objets en sortiront et ces objets doivent être dessinés.

Tout d'abord, il est nécessaire de formuler et de fixer les exigences du résultat, c'est le fondement de notre travail. Ayant de telles exigences sous nos yeux, avec une moindre chance, nous ne tirerons pas ce qui est nécessaire, nous aurons une compréhension beaucoup plus mutuelle avec le client et l'équipe, et il y aura également quelque chose pour vérifier le résultat de notre travail.

Une liste des exigences doit être compilée sur la base de la description du problème et de vos propres idées sur la façon de résoudre ce problème. Ensuite, vous devez vous adresser au client avec cette liste et vous assurer que nous comprenons la tâche de la même manière. Peut-être que la liste devra corriger quelque chose. En conséquence, nous obtenons une liste d'exigences pour le résultat.

Voici un exemple d'une telle liste:

• Les articles doivent être similaires à d'autres articles similaires d'intrusions passées;
• Il y aura 5 types d'articles - bagues, bracelets, broches, pendentifs et pierres;
• Chaque type d'objet aura trois degrés de rareté. Plus l'objet est rare, plus il donne de puissance;
• Le degré de rareté de l'article doit d'une manière ou d'une autre être montré visuellement;
• En plus de la rareté, les pierres ont 4 couleurs - bleu, rouge, jaune et vert;
• Les objets abandonnés par les soldats de l'armée d'invasion doivent donc avoir les traits et les couleurs caractéristiques de ces adversaires;
• Les images sont nécessaires au format Tga, taille - 128x128 pixels.

Nous avons décidé des exigences, vous pouvez maintenant commencer à travailler avec des références.

Les références

Trouvez des objets qui ont déjà été peints pour de tels événements. Nous devrons dessiner dans la même direction, et ces objets nous aideront à ne pas nous éloigner du bon chemin.



De plus, nous devons étudier les soldats de l'armée d'invasion. Nos objets devront avoir des caractéristiques communes avec eux, il vaut donc la peine de collecter plus d'images avec les envahisseurs et de construire un design basé sur eux.



Les opposants diffèrent par leur force - ils sont ordinaires, moyens et forts. Vous pouvez repousser cela. Par exemple, utiliser des parties d'adversaires faibles dans la conception d'objets ordinaires et les parties d'adversaires forts dans la conception sont plus rares.

Palette

Nous devrons dessiner beaucoup d'icônes dans un style, il sera beaucoup plus pratique de travailler si nous faisons une seule palette et celles-ci. processus de peinture pour tous les articles. Si nous ne faisons pas de palette, mais choisissons une couleur avec une pipette dans la référence, il est fort probable que les objets se corroderont en couleur.

Nous sélectionnons les références des couleurs parmi les objets déjà présents dans le jeu. Nos adversaires sont une race de plantes, donc la couleur verte est tout à fait appropriée. Et comme deuxième couleur, vous pouvez prendre de l'or. Ci-dessous, vous voyez des photos avec des références.



Maintenant, vous devez collecter les couleurs des références et en faire une palette. Prenez la couleur principale, il
Il est situé approximativement au milieu entre les zones claires et sombres du sujet, les couleurs pour les endroits clairs et sombres, les couleurs pour les reflets et en particulier les endroits sombres. Et aussi la couleur pour les réflexes de l'environnement. Il s'est avéré deux ensembles de couleurs, un pour la partie dorée et le second pour le vert.



La préparation est terminée, nous procédons au schéma.

Contour

Dans le processus, nous allons essayer différentes options pour la conception d'objets, et lorsque nous obtenons un résultat qui nous satisfait, nous le coordonnerons avec le client. Les souhaits et suggestions arriveront du client, certains d'entre eux nous aideront à améliorer le résultat, nous en discuterons et en rejeterons d'autres. Certaines choses dans notre conception ne seront pas entièrement adaptées et un certain nombre de points devront être corrigés ou refaits.

Point important
Si nous effectuons immédiatement le travail en qualité finale, cela prendra beaucoup de temps. Ensuite, il nous sera très probablement demandé de corriger ou de changer quelque chose, et cela ne fonctionnera certainement pas pour le faire facilement et rapidement. Vous aurez probablement besoin de consacrer à nouveau beaucoup de temps et d'efforts.

Par conséquent, nous esquissons d'abord. L'esquisse prend un peu de temps et d'efforts, tout en permettant de décrire en termes généraux ce que sera le résultat final. Cela signifie que nous pouvons rapidement et à moindre coût passer par plusieurs options de conception, et s'ils nous demandent de réparer quelque chose, cela ne posera aucun problème non plus.



Les esquisses commencent par un lineart. Il est préférable de prendre un pinceau rond avec les paramètres Opacité et Débit de l'ordre de 30%, qui varient en fonction de la force exercée sur le stylet. Sous nos yeux, nous tenons les parties des adversaires que nous avons choisies pour montrer la rareté des objets, ainsi que les images de bijoux qui sont déjà dans le jeu. Nous recherchons un formulaire approprié pour les objets, dans le processus d'une telle recherche, vous pouvez passer par plusieurs options, ci-dessous vous voyez un exemple d'une telle recherche.



Si certains éléments de votre conception sont répétés, il est logique de les envelopper dans des objets intelligents. Il est probable qu'au fil du temps, vous souhaiterez y changer quelque chose, et corriger un objet intelligent est beaucoup plus facile que de parcourir tous les endroits où l'élément est utilisé.



Et maintenant, le lineart pour tous les objets est prêt. Vous pouvez procéder à la peinture. Nous mettons en évidence les palettes préparées et les images d'objets de référence pour les fleurs.

Vous devez d'abord colorer un élément pour vous assurer que la palette actuelle vous permet d'obtenir le résultat souhaité. Et obtenez un échantillon, sur la base duquel nous pouvons colorer tous les autres objets.

Vous ne pouvez pas dessiner un tel motif dans un calque car dans ce cas, nous ne pourrons pas peindre d'autres objets de la même manière. Par conséquent, nous ajoutons chaque couleur de la palette dans un calque séparé afin d'avoir un processus de peinture sous nos yeux et de pouvoir le répéter lorsque nous peignons d'autres objets.



Il est probable que le résultat que nous obtiendrons ne nous convienne pas et il faudra changer légèrement les couleurs pour le rendre plus adapté. Il est bon que chaque couleur se trouve sur un calque séparé et vous pouvez modifier n'importe quelle couleur séparément des autres. Si nous changeons les couleurs de l'objet échantillon, nous ne devons pas oublier de corriger les mêmes couleurs sur la palette.

Voici un exemple de peinture prête, elle nous convient parfaitement et vous pouvez également peindre tous les autres éléments.



Nous créons un masque sous la forme de tous les objets afin de ne pas glisser sur leurs bords, faisons des groupes séparés pour les parties dorées et vertes de l'objet et rendons le contenu de ces groupes identique à celui de l'objet échantillon. Ce qui suit montre le processus de peinture d'un élément.



Nous avons également des pierres dans le problème et elles ont différentes couleurs - bleu, jaune, vert et bleu. Pour obtenir le résultat souhaité, il suffit de dessiner un ensemble de pierres, d'en faire trois copies, de mettre un calque avec le mode de fusion des couleurs par-dessus et de peindre le cœur des pierres dans les couleurs dont nous avons besoin. Vous pouvez également placer un calque avec superposition de superposition au-dessus du calque avec le mode Couleur et expérimenter avec la peinture dedans; dessiner dans un tel calque augmente le contraste de l'image et la saturation des couleurs.



Ici, nous avons des croquis prêts pour tous les objets et vous pouvez passer à l'étape suivante - l'approbation de la conception avec le client et ses collègues.

Approbation de conception

Avant de montrer les croquis au client, vous avez besoin d'un endroit pour fixer le chemin par lequel nous sommes arrivés à cette décision et le montrer avec les croquis. Lorsque ce chemin est visible par le client et ses collègues, de nombreuses questions disparaissent d'elles-mêmes et nous consacrons beaucoup moins de temps aux explications. Figma, ou un autre service en ligne similaire, est bien adapté pour présenter un tel chemin.

Nous montrons le croquis au client. Il est probable qu'il demandera de corriger quelques points, nous y serons prêts. Lorsque nous sommes d'accord avec le client, nous devons montrer le résultat à des collègues et leur demander de partager leur opinion sur le résultat. Cela vaut la peine de le faire pour plusieurs raisons.

Premièrement, les collègues peuvent remarquer des choses auxquelles nous n'avons pas prêté attention. Par exemple, j'ai dessiné une fois un symbole pour une nouvelle classe et cela correspondait bien à la description de la tâche, mais un collègue a vu ce symbole et a dit que le symbole individuel était similaire au logo du service May Target et, à cause de cela, cela semblait plutôt étrange. J'ai googlé ce logo et il s'est avéré que mon icône lui ressemblait beaucoup.

Deuxièmement, les collègues peuvent éprouver des associations désagréables ou étranges avec le sujet. Et si de telles associations sont apparues chez une seule personne, elles peuvent très bien apparaître chez les joueurs, et il n'est pas du tout rentable de provoquer chez elles des émotions négatives.

Troisièmement, quelqu'un peut se rappeler que nous avons déjà des objets similaires dans le jeu, et si vous en ajoutez un autre presque le même, cela embrouillera le joueur.

C'est-à-dire que la vérification du résultat avec l'aide de collègues nous aide à éviter certaines erreurs, ou au moins à réduire les chances qu'elles se produisent.

Un exemple de travail avec les commentaires de collègues

Voici un exemple de travail avec les commentaires de collègues.

Commentaire 01
La forme des pierres est presque la même que celle d'une autre race d'invasion.

Nous regardons toutes les pierres et voyons que différentes races ont des pierres de formes différentes, et nos pierres sont vraiment de forme similaire aux pierres d'une autre race.



Nous changeons la forme des pierres.



Commentaire 02
Cette forme du noyau de la pierre donne des associations avec une sorte de tumeurs douloureuses, ce qui rend l'article peu attrayant.

Si une telle association est apparue chez une personne, on peut supposer que d'autres apparaîtront. Il faut inventer autre chose.



Commentaire 03
Il est nécessaire de corriger le noyau de la pierre moyenne - il est similaire à celui de la pierre des démons.

Nous regardons les pierres de la race des démons, nous voyons que les pierres sont très différentes et que la version actuelle convient, et l'auteur du commentaire a tort.



Commentaire 04
Il est proposé d'augmenter la partie centrale de la pierre, en fonction de sa rareté.

Cela semble logique, essayons.



Ça s'est plutôt bien passé, laissons ça comme ça.

Commentaire 05
La broche ressemble trop à un haut des anneaux simplement arraché. MB, ils ont besoin d'une sorte de substrat ou d'une autre forme.

Comparez les articles.



Il semble vraiment que cela puisse embrouiller une personne, on change la forme de la partie verte.



Commentaire 06
Maintenant, la broche est différente de la bague, mais elle commence à ressembler à une amulette. Vous pouvez améliorer leur différence.

Comparez les objets, renforcez la différence, rendant la pièce d'or plus massive.



Point important
Pour éditer les croquis plus rapidement, vous pouvez copier un groupe avec eux et le réduire en un seul calque, raccourci clavier - Ctrl + E. Apportez des modifications dans le calque résultant et une copie du groupe à partir de ceux-ci. le processus de peinture pour économiser pour plus tard. Il sera nécessaire lorsque vous aurez besoin de dessiner des objets dans la qualité finale.

Et donc nous avons approuvé le contour des objets - tout le monde est d'accord avec tout et nous pouvons procéder au rendu final des objets.

Rendu fin

La chose la plus importante à ce stade est d'observer une seule technologie. le processus de dessin pour chaque article. Dans ce cas, tous les objets seront dessinés de la même manière et aucun ne sera éliminé du style général. Pour accélérer le processus, vous pouvez dessiner un vecteur, à une échelle de 100% de la valeur requise. Pour afficher les formulaires principaux avec un stylo, puis créer un calque sur le dessus, transformez-le en un masque d'écrêtage et peignez les zones souhaitées avec une brosse douce. Raccourci clavier sur le masque d'écrêtage - Ctrl + Alt + G. L'image ci-dessous montre le processus de peinture d'une partie du sujet.



Voici tous les articles prêts et ils peuvent être montrés au client et à l'équipe.



Il y aura très probablement un minimum de souhaits et de commentaires car nous nous sommes déjà mis d'accord sur tout au stade du projet.

Une fois les éléments approuvés, vous devez les enregistrer au format correct. Je recommande fortement de baliser le document avec l'outil Tranche et de donner un nom à chaque cellule. Et puis enregistrez tous les éléments à la fois via la fonction Enregistrer pour le Web. C'est très pratique.

J'espère que cet article vous a été utile. Je vous souhaite à tous bonne chance et succès créatif.