Donc, vous voulez être un artiste pixel tutoriels Photoshop et tutoriels Pixelart, des sourires et des pixelart
SO VOUS VOULEZ ÊTRE UN ARTISTE PIXEL
Auteur: Tsugumo
Partie 9: Création d'un Sprite jeu de combat
Mais d'abord, permettez-moi de souligner que ce n'est pas seulement pour les jeux de combat. J'utilise le terme tout le temps parce que ce que je me fonde la pose / la position de l'image-objet tutoriel sur. Ces techniques et les concepts peuvent appliquer à toutes sortes de jeux. Earthworm Jim probablement utilisé le même type de techniques. Rappelez-vous, apprendre de tout ce que vous pouvez, et l'adapter à vos besoins. Maintenant que cela est hors du chemin, regardons quelques exemples de Street Fighter Alpha 3 d'abord, pour obtenir dans la gorge:
Maintenant que est une compétence de pixel. Chaque personnage a son propre look unique. Zangief est une énorme masse de muscle, tandis que Sakura est pratiquement un personnage peu de bâton minuscule en comparaison. Notez également la différence de largeur entre les deux. Cela nous dit que les sprites ont chacun leur propre taille, sans zone de délimitation réelle restriction. Sakura est 76x87 alors que Zangief est 116x111. Ces mesures sont basées hors seulement les pixels, cependant. Si Zangief élancé vers l'avant et étendu horizontalement, son sprite deviendrait beaucoup plus horizontale et verticale beaucoup plus courte. Quoi qu'il en soit, les boîtes englobantes ne sont pas importants en ce moment. nous nous concentrons sur la façon de faire ces choses. Mais gardez à moi que le « standard » générale est une hauteur d'environ 100 pixels. La largeur sera généralement moins, sauf dans le cas d'un caractère large comme E.Honda, ou quelqu'un qui portait une arme qui colle sur le côté. Quoi qu'il en soit, nous allons coller avec 100 pixels.
Le procédé utilise Capcom est un mystère. Ils n'ont pas des tutoriels ou des explications sur la façon dont ils partout font leurs sprites, ce qui est pas trop surprenant parce qu'ils ont mieux à faire que le travail sur les tutoriels, heh. Cependant, je ne suis pas. Alors, voici ce que j'ai compris d'analyser les sprites et la collecte de petits morceaux d'information de partout au fil des ans. Regardons un tas de photos de Chun-Li de trois (Street Fighter 3):
(Cliquez sur l'image pour la taille réelle)
L'image principale d'importance est la grande Chun-Li dans le coin supérieur droit. Notez l'absence de détails sur elle. Lorsque vous faites un sprite, vous ne pouvez avoir une certaine quantité de détails qui apparaît. Si vous faites une petite frimousse de 8x8, vous ne va pas être en mesure de montrer les lignes pour les narines, alors pourquoi perdre du temps en les attirant dans? Notez les lignes courbes sur ses vêtements. lorsqu'elle est sous forme d'image-objet, ce sont une épaisseur de pixels des lignes jaunes (détails sur le costume). La ligne aura une certaine épaisseur, et si l'image était un portrait de quelque sorte, ils seraient une largeur donnée. mais étant donné que le sprite sera petite, il n'y a pas de point à tracer la ligne avec une largeur. Elle a aussi jaune « trim » autour du tissu qui pend vers le bas. mais qui est ajouté lorsque vous faites le travail de pixels. Donc la première chose que vous voulez faire, est d'obtenir un style simplifié va que vous pouvez utiliser.
Vagabondage pour un moment, je voudrais expliquer qu'il ya beaucoup de façons différentes de faire sprites. La méthode utilisée dépend de votre niveau de compétence et la taille des sprites avec lesquels vous travaillez. Si vous faites un personnage 16x16 RPG, il ne sert à la main le premier dessin, le balayage dans, puis revenir sur. Il suffit de travailler avec des pixels. Si vous n'avez pas compétence au dessin à la main, alors il n'y a pas de point dans la main dessin le caractère d'abord, parce que vous pourriez obtenir de meilleurs résultats en peu de jouer avec des pixels. Deux autres méthodes que vous pouvez essayer, si vous ne vous sentez pas confiant dans vos compétences de dessin, ou vous n'avez pas accès à un scanner. ou tout simplement ne veulent pas passer par la peine de la main en tirant toutes les images et la numérisation dans (ce qui est honnêtement une grande douleur dans le cul):
Sur le côté droit est un homme gribouillis (il heh, terme technique). Je les utilise parfois parce qu'ils sont un peu plus clair que la silhouette, et un peu plus rapide à faire. Il est fondamentalement juste griffonner la forme générale du sprite de sorte que vous savez ce que les membres vont là où et tout. Il sert le même but que la silhouette, mais vous permet d'obtenir un peu plus de détails pour montrer quel bras est est avant et où les muscles iraient tels. Il est pas mieux que la silhouette, bien sûr. Il est juste une autre méthode que vous pourriez vouloir essayer. L'inconvénient est que, puisque cela est essentiellement ce que vous faites quand vous êtes la main dessin (la planification de la pose d'abord), vous devez être en mesure de manipuler la souris un peu mieux, parce que vous dessinez les détails spécifiques. Avec la méthode de silhouette, vous pouvez commencer par un blob et pixels ou geste à effacer toute trace dans certains. Quoi qu'il en soit, essayer différentes choses et voir ce qui fonctionne bien pour vous.
Pour ce tutoriel, je vais utiliser Photoshop 4.0, mais je vais essayer de ne pas trop tech-lourds. Quand je parle de l'anti-aliasing et d'autres choses, ils sont généralement universels dans les programmes de peinture. Dans le programme que vous utilisez, vous devrez probablement chercher à trouver les mêmes choses, mais ils vont probablement être là. Une chose importante à noter, cependant, est que Photoshop est généralement pas bon pour faire sprites. La raison en est que beaucoup de jeux utilisent des palettes pour tout, et Photoshop morsures assez bien pour modifier spécifiquement et l'organisation de la palette. Ceci est purement parce que Photoshop est pas vraiment construit à cet effet. d'abord et avant tout, il est censé être utilisé pour modifier des photos et de faire des illustrations et ce genre de chose. la manipulation de la palette ne joue pas vraiment dans ce, il est donc assez minables pour faire sprites. Si le jeu que vous faites n'a pas la palette (la plupart des jeux PC sont comme ça alors que les consoles (Game Boy Advance, Game Boy, SuperNES, Genesis, etc.) utiliser des palettes) et vous n'avez pas à vous soucier de combien de couleurs que vous utilisez et quels espaces sur la palette que vous devez utiliser, puis Photoshop est très bien pour faire sprites. J'aime utiliser Photoshop pour la pratique sprites parce que je n'ai pas à vous soucier de la mise en place de chaque couleur sur la palette et tout ce que je ferais si j'utilisais un programme palette. Quoi qu'il en soit, l'image-objet que je vais faire pour ce tutoriel va être fait dans Photoshop parce que beaucoup de gens ont et nous n'avons pas à vous soucier des restrictions de palette ou quoi que ce soit qui fera expliquer beaucoup plus facile. Je vais aussi utiliser une image tirée par la main pour commencer, parce que c'est ce que Capcom fait et c'est une méthode agréable:
(Cliquez sur l'image pour la taille réelle)
« Plus proche voisin » ne soit pas d'anti-aliasing. Cela est extrêmement utile lorsque vous voulez redimensionner l'image-objet après que vous avez fait pour faire une version 4x plus grand pour montrer aux gens afin qu'ils ne doivent pas mettre leur nez contre l'écran pour le voir. Vous pouvez également réduire avec elle afin que vous puissiez faire sauter un sprite de montrer à quelqu'un, obtenir des commentaires, puis le réduire à nouveau et le désordre avec une fois de plus sans avoir vos pixels modifiés du tout. Je l'utilise beaucoup pour ce faire ce tutoriel, heh.
« Bilinéaire » et « bicubique » font presque la même chose. Bicubique semble faire plus anti-aliasing. L'image que j'ai commencé avec était relativement faible pour commencer, il ne fait pas une énorme différence avec ce sprite, mais si vous rétrécit vers le bas d'une image qui est comme 800 pixels de haut (à droite après avoir numérisé, vous pourriez obtenir une image de cette taille), ce sera plus noticable. Le problème avec l'utilisation bicubique est que vous pouvez obtenir trop anti-aliasing. Comparer le tibia sur sa jambe droite (celle en arrière-plan). D'une bicubique, il est beaucoup plus floue que sur le bilinéaire un. De même pour les lignes sur le bras et les détails du visage. Cela peut être gênant lorsque vous essayez de voir ce que les lignes vont là où pour retracer, donc je tiens à utiliser bilinéaire pour obtenir un peu d'anti-aliasing, mais pas trop. Alors maintenant, nous avons notre sprite (la fille est de 95 pixels de haut):
La belle partie sur l'utilisation de Photoshop (et l'une des principales raisons pour lesquelles je l'utilise pour cette technique) est que vous pouvez faire des couches. Les couches sont extrêmement importantes lorsque vous êtes une photo retraçant parce que vous pouvez dégager les parties de vos lignes sans déconner avec l'image d'arrière-plan. Si vous utilisez un programme palettisée, ils ne seront généralement pas avoir des couches que vous pouvez utiliser pour ce faire avec, donc vous êtes un peu coincé si vous avez besoin d'utiliser le programme palettisée pour faire les couleurs. Une idée pourrait être de retracer les lignes dans Photoshop et vous avez juste un lutin noir et blanc décrit, puis prenez cela dans votre programme palettisée ajouter les couleurs là-dedans. Il est beaucoup de travail, mais vous faites ce que vous avez à faire.
Notez le bas de la chemise de la jeune fille sur la version rétrécie vers le bas de l'image. Dans la main la version tirée, il y avait là une double ligne pour montrer la doublure de blanc que je vais mettre. Mais il devient rétréci juste un blob. Le bras est de la même façon. les lignes verticales vont être minces lignes blanches, mais ils sont comme blobs parce qu'ils étaient trop rapprochés. J'ai essentiellement à l'aile pour faire ces lignes minces maintenant, ce qui leur a fait tirer une perte de temps et juste encombré l'image pour retracer. Voilà pourquoi les détails des vêtements de Chun-Li étaient juste des lignes minces. Les détails peuvent être ajoutés à l'étape de pixel, où il est plus facile de voir à quoi ressemblera le résultat final.
Voici un moyen rapide, je mis en place Photoshop pour retracer les images, donc tout est relativement simple. Avec l'image sur l'arrière-plan (assurez-vous que vous êtes en mode RVB bien sûr), faire une nouvelle couche. Remplir cette couche avec une couleur de quelque sorte (j'utiliser le bleu). Réglez la couche à « écran » (dans le menu déroulant qui devrait dire « normal » dans la palette des calques), qui vous donnera l'image-objet que vous aviez avant, mais avec les lignes noires changé en bleu. Ensuite, aplatir les calques. Le but de cela est que les lignes noires que vous dessinez apparaissent clairement au-dessus du bleu, plutôt que de dessiner des pixels noirs sur les pixels noirs. Maintenant, faire une autre nouvelle couche et le remplir avec du blanc (ce qui lui faire de sorte que vous ne pouvez pas voir la couche en dessous). Réglez cette option à « multiplier », qui vous montrera votre dessin. Maintenant, quand vous dessinez l'image-objet, utilisez cette couche. Vous pouvez tout simplement faire une nouvelle couche et l'utiliser tout de suite (si la couche est transparente au lieu de blanc), mais quand vous voulez effacer un pixel (que vous ferez en permanence) vous devez passer à l'outil gomme qui peut être douleur. Avec cette méthode, alors que vous ne pouvez pas voir le blanc, le fond est blanc. Lorsque vous avez la configuration de la couleur par défaut (cliquez sur la chose palette noir / blanc dans le menu outil de sorte que la couleur de premier plan est noir et le fond est blanc), vous pouvez simplement frapper « X » et de basculer entre les couleurs de premier plan / arrière-plan. Depuis blanc apparaît maintenant comme transparent, vous pouvez simplement effacer des pixels en appuyant sur « X », en mettant blanc sur eux, puis frapper « X » pour revenir à nouveau en utilisant le noir. C'est agréable et rapide lorsque vous effectuez sprites. Quoi qu'il en soit, c'est la configuration de base. Si vous voulez effacer votre image doublée bleu de sorte que vous pouvez voir l'image-objet seul, il suffit de changer le nouveau mode de couche à la « normale » au lieu de « multiplier » et le blanc redevient opaque. Maintenant commencer le traçage:
La belle partie sur l'utilisation d'un dessin de fond est qu'il réduit la quantité de penser que vous avez à faire, ce qui rend les choses aller plus vite. Vous pouvez simplement suivre le guide général des lignes de fond et de réparer les pièces qui ne semblent pas droit. Rappelez-vous toujours, cependant, que l'image de fond est juste pour la référence. Si quelque chose ne semble pas juste, corriger quand vous retracing. Habituellement, les visages sortiront ressembler à des pixels aléatoires sur l'image d'arrière-plan afin que vous devez faire quand vous retracing. Vous pouvez même changer une grande partie de la pose (comme je le pied je n'aime pas) parce qu'il n'a tout simplement pas juste sous forme de pixels. Faites ce qui ressemble le mieux sur l'image-objet. Aussi, essayez d'éviter les blobs de pixels. Comme dans son bras, je l'ai dessiné Brièvement sans lâcher le bouton de la souris. Notez les blobs de pixels noirs à tous les coins et quelques pixels parasites. vraiment essayer de nettoyer ce genre de choses vers le haut. Si vous avez un groupe de 4 pixels noirs il fait un point vraiment source de distraction visuelle dans l'image-objet. Vous pourriez même avoir à modifier la pose légèrement pour se débarrasser d'eux. comme si vous avez un bras à côté d'une jambe et les deux lignes sont juste à côté eachother alors où ils touchent vous obtenez une ligne de pixels noirs 2 pixels de large, déplacez le bras ou déplacer la jambe de sorte que vous ne disposez d'une ligne d'un pixel il épaisseur . Parfois, vous ne pouvez pas simplement éviter les blobs, mais la plupart du temps, ils peuvent être fixés vers le haut. Passons maintenant:
Ici, j'ai fini avec les lignes retraçant noir. Il y a des détails que je vais ajouter quand je la couleur, et le visage est un peu difficile de faire sortir (en particulier les yeux), mais ils vont mieux regarder quand la couleur est ajoutée (et vous pouvez voir le blanc de l'œil. Il « ll inscrire comme « oh, d'accord, de sorte que le pixel noir à la gauche de la blanche est le globe oculaire » mentalement). Commençons donc avec des couleurs plates premières:
Ici, je suis rempli dans les couleurs plates. Je travaille avec un fond de couleur fade au lieu de blanc, car il est plus facile de voir les couleurs que je utilise. Si vous regardez l'un avec un fond blanc, les couleurs sont plus sombres (surtout sa chemise) parce que le blanc est si brillante en comparaison. C'est un truc vos yeux jouent sur vous. En utilisant une couleur plus foncée en arrière-plan, vous pouvez voir ce que les couleurs ressemblent vraiment. Donc, nous allons passer à l'ajout d'ombrage:
Je voudrais commencer par ombrage la peau d'abord. Il n'y a aucune raison réelle pour elle, alors commencez où vous voulez. Le visage est la partie la plus délicate de faire un sprite parce que l'expression doit être lisible et vous avez seulement quelques pixels pour travailler avec. J'ai utilisé une teinte légèrement plus foncée de la couleur de la peau (plus foncée que l'ombre générale foncé) pour la bouche et le nez. En utilisant noir pour eux les fait coller un peu trop (noir pour une bouche fait ressembler à la bouche est ouverte), et en utilisant l'ombre normale sombre les rend un peu trop léger pour être noticable. Maintenant qu'il ya des pixels blancs pour les globes oculaires, vous pouvez voir qu'elle cherche sur le côté. Donc passer, je l'ombre le reste de son:
Maintenant, elle cherche un peu plus 3D avec l'ombrage. Mais elle ne se fait pas encore. Je veux ajouter quelques détails comme garniture sur sa chemise et des lignes sur sa manche, qui, comme je l'ai dit, je fais à l'étape de pixel, où je peux voir à quel point la chambre que je dois travailler. Voici donc ajouter tous les détails et ceci:
Au départ, je prévu d'avoir deux lignes blanches en descendant sa manche, mais il était tout simplement pas la chambre sprite pour le faire. Il y aurait trop de blanc et il pourrait ressembler à des lignes noires sur un manchon blanc au lieu, ou tout simplement trop d'un blob de couleurs. Le blanc, être blanc pur qui est lumineux, contraste beaucoup avec l'obscurité de sa chemise, de sorte que le genre blanc de rougeoie. Il ressemble presque à la ligne blanche est plus d'un pixel d'épaisseur, mais ce n'est pas. Il est le contraste qui trompe l'œil (comme je l'ai dit, sur l'utilisation d'un fond de couleur sombre au lieu de blanc lors de l'ajout de la couleur à l'image-objet). Je aurais pu tons vers le bas un peu, mais il fonctionne comme il est si ce n'est pas une grosse affaire. Si j'étais mort mis d'avoir deux lignes sur la manche, je pourrais simplement montrer la deuxième ligne quand elle a son côté tourné vers la caméra plus il est comme l'autre ligne est autour de la courbure de sa manche où le spectateur ne peut pas voir il en ce moment. Je lui ai donné des chaussures un peu doublure, ainsi que sa veste, et changé les lignes noires sur son pantalon juste lignes ombrée sombre pour les mêmes raisons générales que j'ai fait la bouche / nez une ombre au lieu de noir. Noir se démarque un peu trop. La dernière chose que vous pouvez faire est de rendre les contours de couleur:
Personnellement, je n'aime pas les contours colorés. Capcom les utilise et quand ils les utilisent, leur apparence, heh. Je n'ai pas tout à fait compris le truc à elle (même si je suis assez sûr que vous avez juste besoin d'utiliser des couleurs beaucoup plus sombres pour les grandes lignes) et j'aime le regard des lignes noires. Avec les lignes de couleur, tout se genre de flou et il n'y a pas autant dans la définition que des morceaux de vêtements commencent où et tout. De plus, si votre arrière-plan est rouge et tous vos vêtements rouges est indiquée en rouge, il va regarder un peu bizarre. Avec le noir le seul vrai problème est quand l'image-objet passe au-dessus d'une zone noire, et il est plus facile d'éviter qu'un tas de couleurs différentes. Mais encore une fois, cela est juste une préférence personnelle et je ne sais pas tout à fait la technique pour obtenir les contours de couleur pour regarder agréable encore. Comme je l'ai dit un tas de fois maintenant, faire ce qui ressemble le mieux pour l'image-objet.
Auteur de cette page avait obtenu l'autorisation d'accueillir ce tutoriel ici. Pour avoir ce tutoriel à votre page, vous devez demander la permission de son auteur.