Share
Ce que vous allez créerSi vous avez toujours voulu essayer le développement de jeux et la conception de personnages, ce tutoriel est pour vous! Aujourd'hui, nous allons créer une feuille de sprite pour une créature ressemblant à un oiseau chic, pour les jeux vidéo et les jeux mobiles, à l'aide des divers outils et fonctions d'Affinity Designer. Nous allons suivre tout le processus, de la mise en plan de l'esquisse à la mise en couleur, en passant par la création d'un ensemble de poses pouvant être utilisés pour l'animation. Commençons!
Je commence généralement à créer un personnage en dessinant et en essayant de trouver la bonne image, une forme intéressante et une apparence inhabituelle. Essayez de combiner quelques détails fictifs d'animaux ou d'objets que vous rencontrez dans la vie réelle, à la recherche de solutions originales et extraordinaires. Vous pouvez vous laisser inspirer par la navigation dans les sections des personnages de jeu ou des sprites de jeu d'Envato Market ou par la recherche d'un sprite de personnage de jeu sur Pinterest. Essayez de créer vos propres idées originales en créant des combinaisons inattendues.
Lorsque vous avez fait plusieurs variations, sélectionnez celle que vous préférez et continuez à l’utiliser. Essayez différentes poses et expressions faciales.
Je fais beaucoup de croquis, qui m'aident à comprendre comment mon personnage bouge, qu'il semble intéressant et original, qu'il s'adapte à l'environnement ou au concept de notre futur jeu, etc..
Enfin, je suis assez satisfait du look mystérieux et fantastique de ce petit garçon, et voici l’esquisse avec laquelle nous allons travailler dans ce tutoriel. Vous pouvez le télécharger directement ici-juste clic droit de la souris sur la photo et enregistrez-le sur votre PC.
Nous allons travailler avec Drawing Persona de Affinity Designer, en utilisant ses fonctionnalités vectorielles pour créer notre image-objet de personnage pour les jeux vidéo, qui peut être facilement animée dans différentes poses..
Créons un Nouveau document de 600 x 800 px Taille. Utilisez le Outil de placement d'image importer notre croquis et le positionner au centre de la toile.
Et commençons par décrire le personnage. Prendre le Outil Ellipse (M) et créez une forme adaptée à la taille du visage. Armez-vous du Outil Crayon (N) et dessinez un bec en suivant le croquis. Vous pouvez modifier le trait à l’aide des touches Outil de nœud (A) pour le rendre plus lisse et fluide.
Sélectionnez les deux formes que nous avons créées et utilisez le Ajouter Opération dans la barre d'outils contextuelle supérieure. De cette façon, nous avons fusionné les deux éléments en une seule forme.
Maintenant, utilisez le Outil Ellipse (M) faire un oeil et ajouter un couple plus ellipses pour le rendre plus détaillé. Suivez les lignes de l'esquisse, en adaptant les formes à l'esquisse.
Utilisez le Outil Crayon (N) tracer une longue ligne courbe sur le visage et le modifier, si nécessaire, à l'aide du bouton Outil de nœud (A). Nous pouvons changer le Style, largeur et d'autres paramètres de notre ligne dans le Accident vasculaire cérébral panneau (vous le trouverez dans l’un des onglets à côté du Couleur panneau).
De là, réglons la Largeur à 11 pt et descendre à la Pression fenêtre déroulante. Ici, nous pouvons faire varier la largeur de segments distincts de la ligne, en utilisant le graphique. Sélectionnez le bon point de la courbe sur le graphique et faites-le glisser vers le bas pour affiner la partie droite du trait (située au bout du caractère)..
Maintenant, prenez le Outil Rectangle (M) et passons au corps. Faites un rectangle, en l'alignant sur le corps, et Convertir il aux courbes dans la barre d'outils contextuelle supérieure. Basculer vers le Outil de nœud (A) et commencez à éloigner les nœuds inférieurs les uns des autres, en élargissant la partie inférieure.
Sélectionnez les deux nœuds supérieurs et faites-les glisser pour couvrir la tête de notre personnage. Puis sélectionnez le noeud en haut à droite et utilisez le Convertir à Lisse fonction de la barre d'outils contextuelle supérieure, rendant la partie droite du rectangle lisse et arrondie.
Maintenant, utilisez le Outil de nœud (A) modifier le côté gauche du corps en ajoutant plus de nœuds, en adoucissant les angles et en adaptant le contour à l'esquisse.
Ajoutons les plumes à la partie inférieure du corps, formant une sorte de jupe. Prendre le Outil Ellipse (M) et forme une forme écrasée au bas du côté gauche du corps. presse Option-Shift et faites glisser la forme vers la droite pour en faire une copie. Répétez la même action en faisant plus de copies et en remplissant toute la partie inférieure.
Enfin, sélectionnez la forme du corps et les plumes, allez dans la barre d’outils contextuelle supérieure et appliquez la Ajouter des opérations. Génial! Maintenant, nous avons fusionné les éléments en une seule forme.
Maintenant nous passons à la jambe. Soyons simples: tracez une ligne droite verticale avec un petit pied en bas. Dirigez-vous vers le Accident vasculaire cérébral panneau et ajoutons plus de dimension à la jambe en la rendant plus épaisse. Met le Largeur valeur à 60 pt et utiliser le Pression graphique pour rendre sa partie inférieure plus mince, comme indiqué dans la capture d'écran ci-dessous.
Nous devons maintenant transformer le trait en forme afin que nous puissions le modifier, ajouter des détails, des contours, etc. Garder la jambe sélectionnée, allez à Couche> Développer le trait. La forme semble assez bonne, même si elle peut avoir un tas de nœuds.
Bien que la forme soit toujours lisse, il peut s'avérer très difficile et fastidieux de supprimer manuellement tous les nœuds inutiles. Nous avons deux options ici: soit laisser la forme telle quelle avec un groupe de nœuds, soit créer une nouvelle forme si vous êtes soucieux de la qualité..
Nous pouvons utiliser l’un des outils de dessin ici: soit le Outil Crayon (N) ou la Outil stylo (P). Je préfère le Outil stylo (P). Il suffit de tracer la jambe créée ci-dessus pour obtenir une forme lisse et arrondie et Outil de nœud (A) pour déplacer les nœuds.
Copiez la jambe pour en ajouter une autre.
Nous avons une «jupe» de plumes à deux couches sur notre croquis, ajoutons donc une deuxième couche de corps à plumes. Copiez la forme du corps et étendez-la vers le bas, en la faisant grand, de sorte qu'elle s'adapte à l'esquisse. Supprimer la partie supérieure de la forme étendue, ne laissant que la jupe. Vous pouvez le faire avec l'aide du Outil de nœud (A) en sélectionnant tous les noeuds supérieurs inutiles et en les supprimant.
En option, vous pouvez également effacer la partie supérieure de la forme avec le bouton Outil de recadrage de vecteur. Cependant, je préfère la première méthode, car le Outil de recadrage de vecteur laisse la partie effacée cachée à l'intérieur d'un masque d'écrêtage. Cela peut être très utile dans de nombreux cas, lorsque vous devez restaurer la forme, mais nous n’avons pas besoin de le faire..
Formons maintenant un bras ou une aile stylisé pour notre personnage d'oiseau. Faites une ellipse, en ajustant l’aile sur le croquis, et Convertir il aux courbes. Faites glisser les deux points d’ancrage latéraux vers le bas, élargissant ainsi la forme en bas. Ajouter une autre ellipse, pliant le bras au coude.
Procéder par Conversion la deuxième ellipse aux courbes, et utiliser le Outil de nœud (A) pour déplacer les lignes, en les faisant correspondre à l'esquisse. Utilisez le Ajouter une opération fusionner les formes et lisser tous les nœuds.
Enfin, utilisez le Outil Crayon (N) àdessinez une petite touffe de plumes au coude et fusionnez-la avec le bras.
Génial! Les contours sont prêts. Ajoutons maintenant les couleurs!
Nous allons travailler avec une palette violet foncé. Je choisis habituellement les couleurs avec l'aide du Couleur panneau et le Outil Pipette, qui se trouve juste au-dessus de la roue chromatique dans le Couleur panneau.
Essayez de rendre les parties supérieures du personnage plus claires que les parties inférieures afin de séparer les éléments les uns des autres et de les faire ressortir. Rendez le visage beige clair en créant un contraste saisissant pour en faire l'élément principal du personnage, qui attire l'attention du spectateur..
Travaillons maintenant avec le visage. Appliquez les couleurs aux trois ellipses de l’œil, assombrissant sa partie interne et créant un trou. Et éditons la ligne rouge sur le visage. Le rendre plus épais, augmentant la Poids de l'AVC dans le Accident vasculaire cérébral panneau. Couper (Commande-X) la ligne, sélectionnez la forme du visage beige et allez à Édition> Coller à l'intérieur. Génial! Maintenant, la ligne est à l'intérieur de la forme du visage, comme dans un masque d'écrêtage, et nous pouvons toujours la modifier si nécessaire.
Ajoutons quelques ombres à notre personnage, le rendant plus détaillé. Prendre le Outil Crayon (N) et commencez à dessiner une forme, couvrant partiellement le côté gauche du corps. Il ne doit pas être parfait, car nous allons Couper (Commande-X) et puis Édition> Coller à l'intérieur de la forme du corps. Rendre l'ombre un peu plus sombre que le corps.
Utilisez le Outil Ellipse (M) d'ajouter un groupe de petits cercles le long du bord de l'ombre, superposés et texturés. Maintenez Décalage pour rendre les cercles parfaitement même.
Ajoutez une ellipse pourpre plus foncé à l’ombre sous le visage (appuyez sur Commander-[ plusieurs fois pour déplacer l’ellipse sous la forme du visage). Faites plus de détails, en formant une ombre sombre sur la «jupe» inférieure, et ajoutez une nuance bleue avec des cercles mouchetés sur le côté droit du corps du personnage. Enfin, rendre le bras beaucoup plus léger que le corps, en le séparant du reste des éléments.
N'oubliez pas d'ajouter deux petites ombres arrondies aux jambes, ce qui les rend plus tridimensionnelles..
Baisser le Opacité du bleu surligné dans le Couches panneau pour le rendre plus subtil.
Si vous voulez jouer avec les couleurs et les rendre plus vives, utilisez le Outil Pipette choisir la couleur d'un élément et l'appliquer à l'autre. Si vous n'avez pas essayé cet outil Concepteur d'affinité pourtant, cela peut être un peu délicat mais quand même très pratique.
Trouvez le Pipette icône dans le Couleur panneau et faites-le glisser directement sur votre image. Vous verrez une loupe qui aide à sélectionner la couleur désirée, qui apparaît à côté de la Pipette icône dans le Couleur panneau. Maintenant, vous pouvez l’appliquer à n’importe quelle forme que vous sélectionnez, simplement en cliquant sur le minuscule cercle coloré situé en bas de la fenêtre. Couleur panneau.
Ajoutons plus de détails à notre gars chic. Ajoutez des ombres à toutes les parties du corps, y compris la tête et le bras (si vous ne les avez pas encore ajoutées) et créez des taches supplémentaires sur le visage pour le rendre plus texturé..
Placez quelques ellipses supplémentaires à l’intérieur de l’œil, éclaircissant progressivement les couleurs pour les faire briller. Vous pouvez voir mon Couches panneau dans la capture d'écran ci-dessous, montrant toutes les parties du groupe des yeux.
Notre personnage a déjà l'air bien à ce stade, mais si nous imaginons le placer au-dessus d'un arrière-plan détaillé d'un jeu vidéo, il pourrait se fondre dans l'arrière-plan si les palettes de couleurs des éléments sont similaires. Nous devons rendre notre personnage plus distinct au-dessus de tout type d'arrière-plan. Il doit être attrayant et clairement visible au premier abord. Et voici un moyen simple de séparer visuellement le personnage: nous devrions utiliser les contours! Plus le contour du personnage est épais, plus il devient distinct!
Sélectionnez le bras, allez au Couleur panneau et appliquer un noir Accident vasculaire cérébral avec 3 pt de largeur valeur. Ajoutez également le contour au visage et aux jambes. Vous devrez peut-être sélectionner les éléments à l'intérieur le groupe utilisant le Couches panneau, afin d'appliquer le Accident vasculaire cérébral.
En ce qui concerne le corps, je souhaite appliquer un seul contour à l’ensemble de la forme. Cependant, le corps est composé de deux éléments, nous allons donc faire un petit tour. Sélectionnez les deux parties du corps et dupliquez-les (Commande-C> Commande-V). Vous verrez les copies dans votre Couches panneau. Sélectionnez les copies et fusionnez-les en une seule forme à l'aide de la Ajouter une opération.
Maintenant, nous pouvons définir le Remplir couleur de la forme fusionnée à aucun dans le Couleur panneau et appliquer une belle épaisseur 4 pt AVC, garder la forme du contour sur le corps.
Voyons ce que nous avons jusqu'à présent. Nous avons créé un personnage de fantaisie fantastique composé du corps (avec le visage), d'une paire de bras ailés et d'une paire de jambes amusantes. Et c’est tout ce dont nous avons besoin pour créer un sprite de jeu en mouvement! Assurez-vous d'avoir Groupé (Commande-G) toutes les pièces correctement dans le Couches panneau, en gardant votre travail propre et cohérent.
Nous pouvons maintenant créer un certain ensemble de poses que notre personnage peut jouer pendant le jeu. Vous pouvez parcourir la section des feuilles de sprite du personnage du jeu sur GraphicRiver pour voir les poses habituellement utilisées dans les jeux, ou créer votre propre.
Ici, j'ai présenté les poses de base en déplaçant simplement les parties de notre sprite, le faisant se tenir debout, courir, sauter ou s'évanouir. Remarquez que j'ai enlevé les yeux brillants de la pose pour la rendre plus inconsciente..
Bon travail! Nous venons de terminer la création de notre créature fantaisie d'oiseau et avons créé une feuille de sprite composée de plusieurs poses simples pouvant être utilisées pour l'animation. J'espère que vous avez trouvé quelques conseils et astuces utiles qui vous aideront à mieux connaître Affinity Designer ou qui vous inspireront pour créer de nouveaux personnages uniques et des feuilles de sprite pour PC, navigateur ou jeux mobiles..
Si vous souhaitez obtenir un fichier EPS vectoriel prêt à l'emploi avec notre oiseau fantaisie, y compris les cadres détaillés pour chaque pose, consultez cette feuille de sprite de créature oiseau. Il peut être utilisé pour une animation simple.
Amusez-vous à concevoir de nouveaux personnages et n'oubliez pas de partager vos résultats.!
Accentsconagua