Créer un personnage pixel art isométrique dans Adobe Photoshop

Ce que vous allez créer

Si vous avez vraiment aimé jouer avec Lego en tant qu'enfant (ou si vous avez continué à jouer avec eux à l'âge adulte), le pixel art isométrique pourrait vous intéresser; cela peut être assez technique, cela ressemble plus à la construction qu'à l'illustration et comme il n'y a pas de perspective, vous pouvez déplacer des éléments dans votre environnement isométrique comme vous le souhaitez.

Nous allons créer un personnage car c'est un point de départ logique pour le pixel art isométrique, car cela vous aidera à définir les proportions de la plupart des autres éléments que nous pourrions continuer à créer. Cependant, nous devrions passer en revue quelques notions de base de pixel art isométrique avant d’arriver au personnage; à moins que vous ne vouliez simplement faire le personnage et ne pas revenir au style, auquel cas vous pouvez passer à 3. Ajoutons un caractère.

1. Lignes de pixel art

Ces lignes sont fondamentales pour le style isométrique le plus courant (et amusant) en pixel art, le style que nous utiliserons:

Ils ont deux pixels en largeur pour chaque pixel en bas. Ils ont l'air relativement lisse et ils sont utilisés pour faire des carrés de surface:

La plupart des lignes régulièrement structurées comme celles-ci fonctionnent bien, mais elles ont l’air plus irrégulières à mesure que chaque étape est longue:

Pour le contraste, voici quelques lignes de structure irrégulière:

Très déchiqueté et pas très jolie. Éviter ces.

2. les volumes

Notre personnage ne suivra pas rigoureusement toutes les règles de la vue isométrique, alors commençons par créer un simple cube pour commencer à gérer les volumes.

Créer un Nouveau déposer dans Adobe Photoshop avec une résolution de 400 x 400 px.

J'aime ouvrir une fenêtre supplémentaire pour le même fichier (Fenêtre> Arranger> Nouvelle fenêtre… ) pour travailler avec l’un à un zoom d’environ 600% et garder l’autre à un zoom de 100% pour contrôler les progrès. L'utilisation de la grille de pixels vous appartient, mais je la trouve parfois plus distrayante qu'utile.

Alors zoomons et créons l'une des lignes 2: 1:

Je préfère utiliser 5% de gris au lieu de noir pour pouvoir ensuite ajouter des ombres (noir et faible opacité) et pouvoir toujours sélectionner chaque couleur séparément avec la baguette magique..

Voici quelques façons de faire la ligne:

1. En utilisant le Outil Ligne mis à pixels, anti-alias sans contrôle et avec 1px poids. Pendant le dessin, la pointe de l'outil qui nous informe sur l'angle de la ligne que nous sommes en train de tracer devrait dire 26,6˚. L'outil Ligne, cependant, ne me semble pas très fiable, il peut créer des lignes désordonnées si l'angle n'est pas tout à fait correct.
2. Faire une sélection rectangulaire de 40 x 20 pixels, puis avec le Outil Crayon (toujours à Taille 1px) en dessinant un seul pixel dans le coin inférieur gauche, puis en maintenant enfoncée la touche Maj, en dessinant un autre pixel dans le coin supérieur droit. Photoshop créera automatiquement une ligne entre les deux points. Avec un peu d'expérience, il est possible d'obtenir ces lignes correctement (ou presque, puis de les corriger) sans la sélection rectangulaire
3. Dessiner deux pixels dos à dos avec le Outil Crayon, en les sélectionnant et en appuyant sur Alt déplacez la sélection à l'aide d'une touche fléchée ou de la souris (désormais désignée par alt-nudging), puis déplacez les pixels à l'aide des touches fléchées ou de la souris de manière à ce que les deux ensembles de pixels se rencontrent aux coins. Puis en sélectionnant ces deux ensembles de pixels et en répétant la procédure ci-dessus pour continuer à allonger la ligne.

Nous avons eu notre première ligne. Choisissons-le et Alt-Nudge ou bien copier la sélection, la coller et fusionner le calque vers le bas. Puis retournez-le horizontalement (Édition> Transformer> Retourner horizontalement) J'utilise tellement cette fonction que j'ai créé un raccourci clavier!

Et rejoignons les deux lignes:

Puis, sélectionnez à nouveau et modifiez ceci, retournez-le verticalement et réunissez-vous pour compléter notre carré:

Il est temps d'ajouter une "troisième dimension". Alt-Nudge ou copie place et placez la copie 44px au-dessus de l’original:

Pointe: Si vous maintenez la touche Maj enfoncée tout en appuyant sur une touche fléchée, votre sélection sera déplacée de dix pixels dans cette direction, au lieu d’un seul..

Pour créer un cube plus net, lissons les coins en supprimant le pixel le plus à gauche et le pixel le plus à droite des carrés. Ceci fait, ajoutez les lignes verticales dont le cube a besoin:

Supprimez maintenant les lignes arrières de la case du bas. Et pour commencer à ajouter de la couleur, choisissez la couleur de votre choix (un peu du côté plus clair) et remplissez-la du carré supérieur..

Augmentez maintenant la luminosité de 10% à cette couleur (il est recommandé d’utiliser les curseurs HSB du panneau de couleurs) pour tracer les coins les plus clairs le long du recto de notre carré coloré. En raison de la manière dont nous découpons légèrement notre cube, ces lignes claires apparaissent mieux à un pixel au-dessus des lignes noires (au lieu de remplacer les lignes noires par des rehauts), comme suit:

Nous devons maintenant supprimer ces lignes noires sous la ligne plus claire. le Crayon astuce pour faire des lignes fonctionne également avec la gomme (qui doit être réglé sur Outil pour effacer, mode crayon et Taille 1px).

Sélectionnez la couleur du carré supérieur avec le Pipette (que vous pouvez obtenir plus rapidement en maintenant enfoncé Alt alors que les outils de crayon ou de remplissage sont sélectionnés) et utilisez-les pour couvrir la ligne verticale au milieu du cube. Réduisez ensuite la luminosité de cette couleur de 15% et remplissez la face gauche du cube avec la nouvelle couleur. Réduisez de 10% la luminosité supplémentaire pour la face droite du cube:

Notre cube est fini. Il devrait sembler propre et relativement lisse au zoom 100%. Nous pouvons procéder.

3. Ajoutons du caractère

Le style de caractère peut être un choix très personnel. N'hésitez pas à modifier les proportions ou les éléments à votre guise. J'ai tendance à faire des corps minces et des têtes légèrement grandes. Les corps minces aident certainement à garder les lignes simples / droites.

Il est logique de commencer par les yeux. Si nous étions stricts en ce qui concerne les angles isométriques, un œil devrait être plus bas que l'autre sur l'écran, mais à petite échelle, nous n'utiliserons aucun problème de "triche" afin de rendre les visages de nos personnages plus esthétiques. agréable qui les rend également plus claires malgré leur taille.

Nous faisons un petit personnage parce qu'avec le temps, nous pourrions finir par faire une voiture, une maison, une place ou même une scène de ville. À ce moment; dans le contexte d'une scène aussi étendue, les personnages doivent figurer parmi les plus petits éléments appartenant à l'illustration. Il y a aussi une certaine efficacité graphique à prendre en compte; viser à rendre un personnage aussi beau que possible avec le moins de pixels possible (juste assez grand pour avoir des traits du visage.) Et aussi, petit est beaucoup plus facile que grand. À moins que le but de ce que vous voulez illustrer ne concerne que le caractère, ses expressions ou sa ressemblance, nous sommes bons avec les petites choses..

Créons un nouveau calque. Pour faire les yeux, nous allons simplement utiliser deux pixels; un pour chaque œil, avec un seul pixel vide entre les deux. Et à un pixel de l’un des yeux, tracez une ligne verticale:

Maintenant, ajoutez un nouveau calque et tracez une ligne horizontale de deux pixels sous les yeux, c'est la bouche. Déplacez-le vers le bas avec les touches fléchées et, lorsque vous avez trouvé la position qui vous convient, fusionnez le calque. Vous pouvez faire la même chose avec la mâchoire, il devrait simplement s'agir d'une ligne horizontale plus longue:

Répétez l'opération pour le contour des cheveux et la ligne pour le haut de la tête, puis arrondissez les coins et vous devriez avoir quelque chose comme ça:

Maintenant, à côté de l'autre œil, laissez un pixel vide, puis ajoutez un côté (qui aidera également à donner aux oreilles du personnage) et davantage de pixels au-dessus du côté pour qu'il atteigne la limite des cheveux. Ensuite, un autre pixel vide pour savoir où l’oreille devrait aller, puis une ligne qui marque le bord de la tête. Continuez et contournez les coins où les lignes se rejoignent:

Ajoutez un pixel pour le haut de l'oreille et modifiez la forme de la tête si vous le souhaitez. les têtes sont généralement plus étroites près du cou:

Tracez une ligne à partir du menton, ce sera la poitrine. Et le cou ira de l'endroit où se trouve l'oreille, en descendant de quelques pixels verticalement, puis de quelques autres pixels supplémentaires, mais en diagonale, afin de créer l'unique épaule visible pour notre personnage:

Maintenant, là où les extrémités des épaules forment une ligne verticale de 12 pixels, un bord du bras et l’autre côté doivent se trouver à deux pixels de distance. Joignez les lignes du bas avec quelques pixels pour créer la main / le poing (en réalité, il n’ya aucun détail sur ces mains, mais ce n’est généralement pas un problème) et juste au-dessus de la fin de la main, créez une ligne 2: 1 qui sera le tour de taille , puis complétez la ligne de poitrine et vous avez tout le haut du corps souligné. Il y a un bras qui n'est pas visible mais qui devrait avoir l'air correct, comme s'il était simplement obstrué par la poitrine.

Cela devrait ressembler à ceci:

Bien sûr, vous pouvez essayer différentes proportions si vous le souhaitez. J'aime voir différentes options côte à côte avant de décider de presque tout.

Maintenant, pour le bas du corps, nous allons ajouter quelques lignes verticales supplémentaires. J'aime laisser 12px entre les semelles et la taille. Les pieds sont assez simples, juste un toucher plus large que les jambes et à cause de la vue isométrique, un pied est plus bas sur l'écran que l'autre:

Nous allons maintenant ajouter de la couleur. Un joli ton de peau n’est pas toujours facile à définir, donc si vous voulez utiliser celui que j’ai utilisé, son code couleur hex est: # FFCCA5. Trouver des couleurs pour le reste des éléments ne devrait pas être difficile. Après cela, vous devez définir la longueur des manches, la position du cou de la chemise ou le style et ajouter une ligne plus sombre pour séparer la chemise de la peau. J'aime rendre la plupart des lignes intérieures plus claires que le noir (en particulier lorsque différentes parties sont fondamentalement au même niveau, comme de la chemise à la peau ou un pantalon), afin que le contraste de toutes les lignes ne devienne pas trop fort et différent. volumes plus évidents.

Vous pouvez ajouter un effet de lumière sur presque toutes les zones de couleur. Évitez trop de nuances ou d’utiliser des dégradés pour l’ombrage; quelques touches d'une nuance plus brillante ou plus foncée (10% à 25%) suffisent à faire ressortir les éléments et à cesser d'apparaître à plat. Si vous souhaitez ajouter une surbrillance pour une couleur qui a déjà une luminosité de 100%, essayez de réduire sa saturation. Et dans certains cas (comme les cheveux), il peut être judicieux de modifier également la teinte entre les nuances.

Vous pouvez essayer de nombreuses options pour les cheveux. Jetez un coup d'œil à quelques idées:

Si vous continuez à faire plus de personnages, de petites variations comme le style de la chemise, la longueur des manches, la longueur des jambes du pantalon, les accessoires, les vêtements et les couleurs de peau vous seront utiles pour une belle variété..

Tout ce qui nous reste à faire est de rassembler nos deux éléments et d’apprécier à quel point ils semblent appartenir au même environnement:

Si vous voulez exporter, le format PNG est le format idéal.

Ça y est, vous êtes fait!

J'espère que le tutoriel ne submerge pas; Je pensais juste que je donnerais autant de conseils que possible sur Photoshop et sur l'esthétique du style. Nous allons continuer à élargir notre monde de pixel art isométrique; bâtiments, véhicules, intérieurs, extérieurs. Tout est possible et amusant à faire, sinon peut-être pas facile.