• Échantillons de Pixel Art isométrique (@cheishiru)

introduction

L'isométrique pour le pixel art est un peu différent de l'isométrique traditionnel.

L'isométrie traditionnelle est basée sur un angle de 30 degrés, mais cela aurait l'air terriblement irrégulier pour le pixel art. Par conséquent, pour le pixel art, nous suivons la règle des 2x1 pixels, soit environ 26,565 degrés au lieu de 30.

En raison de la différence d'angle, la vue isométrique de Pixel art sera différente de la vue traditionnelle. Lorsque vous chevauchez une tuile isométrique traditionnelle et une tuile isométrique en pixels, vous pouvez voir qu'elles ne s'entendent pas bien.

*Tuiles bleues = tuiles isométriques traditionnelles.

Bases isométriques du pixel art

Il existe trois styles de tuiles isométriques :

 

1. Deux pixels en haut et en bas de la tuile, fidèles à la règle 2x1.

2. Trois pixels en haut et en bas de la tuile. Lorsque vous dessinez un cube, mettre le contour vertical du cube est une évidence.

3. Quatre pixels en haut et en bas de la tuile. Mettre une ligne droite pour le bord peut sembler gênant, mais lorsque vous le colorez, les côtés sont parfaits. C'est le meilleur pour le carrelage du jeu.

 

Les tailles de grille les plus courantes pour l'art isométrique sont : 32 x 16 et 64 x 32.

Il y a plus de variations sur la taille, tant qu'elle est 2x1. J'ai dessiné en 24x12, 36x18 et 48x24 pour le plaisir. Certains artistes utilisent même des tuiles 128x64 pour leur art.

 

Plus la taille est grande, plus vous pouvez ajouter de détails (ce qui signifie que cela semblerait plus réaliste), mais moins cela ressemblerait à du pixel art. Voir la comparaison ci-dessous pour référence.

*Plus il est grand, plus il se rapproche des dessins traditionnels.

 

Il n'y a pas de règle stricte sur le style et la taille des carreaux. Vous êtes libre de choisir celui que vous préférez.

Préparation du CSP pour le Pixel Art (outils et matériaux de base)

CSP n'est pas spécialement conçu pour le pixel art, vous devez donc peaufiner et préparer certaines choses. Préparons les outils et le matériel !

 

(Certains des conseils ci-dessous peuvent être appliqués à d'autres applications de dessin telles que Photoshop et SAI.)

 

1. Stylo Pixel

Il existe deux types de stylos que j'utilise pour le pixel art. Un exactement un pixel de large (pour un dessin précis) et l'autre avec la pression du stylet (pour dessiner et colorier). Le pixel large est disponible par défaut sur Clip Studio Paint sous le nom Dot Pen (trouvez-le sous le sous-outil Marker). Mais vous devez créer vous-même celui à des fins de croquis et de coloriage.

 

Accédez à la propriété de l'outil de votre stylo préféré et choisissez le cercle le plus à gauche pour l'anticrénelage. Cela désactivera l'anticrénelage et donnera au stylo un aspect irrégulier, parfait pour le pixel art !

2. Effaceur de pixels.

Vous ne voulez pas effacer et trouver votre art infecté par un désordre flou. Vous pouvez utiliser Vector Eraser (disponible par défaut) ou créer votre propre outil de gomme sous pression. Tout comme le stylet, désactiver l'anticrénelage sur votre gomme préférée et le tour est joué !

 

3. Outil de remplissage (alias Pot de peinture), version pixel art.

Décochez la case Mise à l'échelle de la zone sur la propriété de l'outil de remplissage afin que la peinture ne saigne pas et ne rende votre pixel art flou. J'appelle le mien "Pixel Fill".

*Remplir l'outil avec la mise à l'échelle de la zone activée ou désactivée.

 

4. Deux longues lignes isométriques. (Optionnel)

Tracer des lignes parfaites pixel par pixel prend du temps. J'ai préparé ceci pour accélérer le processus de dessin.

Vous pouvez absolument vivre sans cela. Si vous le souhaitez, vous pouvez télécharger les lignes ici.

5. Grille isométrique de pixel art au choix. (Optionnel)

Ce n'est pas encliquetable, mais utile pour la référence de taille. Mes grilles personnalisées sont disponibles en trois tailles que j'utilise habituellement : 32x16, 36x18 et 64x32.

Dessiner une pièce isométrique

1. Toile et grille.

Créez un canevas de 150 x 150, puis faites glisser et déposez la grille de 32 x 16 sur le canevas.

 

La pièce sera cubique avec 2x2 dalles pour le sol et 2 dalles en hauteur. Assurez-vous que vous pouvez voir toute la pièce sur la toile.

• Zone rouge = sol, zone bleue = murs. Les couleurs sont là uniquement à des fins de visualisation de ce didacticiel.

 

3. Esquisse

À l'aide du stylet Pixel Pen, dessinez grossièrement la pièce. Le pixel art est très sensible, un seul pixel n'est pas à sa place et cela peut gâcher l'ensemble de l'image, mais il n'est pas nécessaire d'insister sur la perfection lors de l'esquisse. Dessinez-le librement. Même si cela a l'air moche, tant que vos idées sont là, vous êtes prêt à partir.

• Le fait est que vous puissiez reconnaître tout ce que vous dessinez, même si cela semble désordonné.

 

Remarque : Dans cet exemple, l'esquisse est en vue isométrique, mais la vue de face est une option viable ; surtout quand il s'agit de formes délicates. (Des conseils sur la vue de face sont disponibles ci-dessous !)

 

4. Dessin au trait épuré.

Créez un calque au-dessus du calque Sketch et utilisez les longues lignes préparées pour les bordures de sol et de pièce. Au fait, j'ai décidé d'élever les murs et d'ajouter 30 pixels à la hauteur de la toile.

Une fois que la forme de la pièce est définitive, concentrez-vous d'abord sur les éléments qui ont des formes de base en blocs. Les formes de blocs ont besoin de lignes précises, il serait déroutant de déterminer la précision lorsque tous les éléments sont déjà dessinés.

Ensuite, ajoutez de la profondeur, modifiez le lit pour qu'il n'ait pas l'air trop rigide et ajoutez le reste comme prévu (plus un oreiller juste parce que !)

Le dessin au trait est terminé !

 

4. Coloration.

Commencez par peindre les couleurs de base, ajoutez des ombres, puis des reflets.

Certains artistes aiment les contours noirs de leur pixel art et considèrent l'illustration réalisée à ce stade. D'autres (et moi) aimons utiliser la technique du sel-out (Selective Outlining) pour colorer les contours noirs.

Les deux styles sont excellents, alors choisissez votre poison ! Quoi qu'il en soit, la chambre est faite.

Faire du pixel art isométrique avec vue de face

Faire un dimensionnement et une mise en forme précis (en particulier des cercles et des courbes) et s'assurer que les choses sont divisées uniformément (comme des fenêtres de dessin) en vue isométrique peut causer des maux de tête. Utiliser la vue de face pour tout planifier et le transformer en isométrique peut aider énormément.

• Vous avez juste besoin d'ajouter de la profondeur et de la peaufiner un peu.

 

Lorsque vous souhaitez dessiner une vue de face avant de la transformer en art isométrique, gardez à l'esprit que (lorsqu'il est incliné vers la vue isométrique), la longueur d'une ligne à travers une tuile isométrique est égale à la longueur des deux côtés d'une tuile isométrique.

Expliquons clairement pourquoi c'est le cas :

Vue de face à Isométrique, la ligne apparemment courte en vue de face apparaîtra plus longue en vue isométrique. Alors, gardez cela à l'esprit lorsque vous dessinez !

Dessin d'un dépanneur avec vue de face

1. Dessinez la forme de base du magasin.

Dans ce cas une boîte. Nous transformerons la vitrine en vue de face à l'étape suivante.

*La zone grise sera la devanture du magasin.

 

2. Faites passer la vitrine de la vue isométrique à la vue de face.

Copiez uniquement la partie vitrine sur un autre calque, puis utilisez la transformation libre.

 

Sur la propriété de l'outil de transformation libre, assurez-vous de changer le mode sur "Skew" et la méthode d'interpolation sur "Hard Edges (Nearest Neighbor)"

Inclinaison vous permet de faire glisser les côtés verticaux de haut en bas et les côtés horizontaux de gauche à droite. Il n'y a pas besoin de s'inquiéter d'une rotation ou d'une mise à l'échelle accidentelle.

 

Hard Edges (Nearest Neighbor) garantira que vos lignes ne deviennent pas floues lorsqu'elles sont transformées. Le flou est le plus grand ennemi du pixel art. (Voir les lapins tournés ci-dessous pour la visualisation. Celui de gauche est celui d'origine, celui du milieu utilisait des bords durs, celui de droite utilisait les autres options)

De retour à notre couche de vitrine, faites glisser le côté gauche vers le haut et le côté droit vers le bas.

2. Finition de la devanture du magasin en vue de face.

Dessinez la devanture, puis inclinez-la vers l'arrière jusqu'à ce que les côtés horizontaux forment la formation de 2x1 pixels. Utilisez la boîte de la première étape comme référence.

3. Ajoutez de la profondeur et des détails au bâtiment.

Créez un calque au-dessus du calque de construction, puis dessinez avec une couleur différente pour éviter toute confusion. Changez les choses petit à petit et effacez toutes les parties qui devraient être cachées à cause du changement.

4. Coloration.

Les étapes sont identiques au didacticiel de la salle isométrique précédent : couleur de base, ombre + surbrillance, puis sélection automatique.

Fait!

Postfaces

La vue isométrique est ma préférée depuis que j'ai commencé à dessiner du pixel art. Je ne couvre que la pièce et les bâtiments cette fois, mais il y a une tonne de sujets à explorer tels que les personnages, le style chibi, les animaux, les plantes et autres objets.

Si vous avez des questions, vous pouvez me contacter sur Twitter ou IG ( @cheishiru )

 

J'espère que cela t'aides!