Bonjour à tous! Dans ce didacticiel, je vais expliquer comment utiliser certaines fonctions spéciales de Clip Studio Paint Ex pour nous aider à créer de l'art isométrique de manière simple, axé sur la scénographie et l'art pour les jeux vidéo, mais les techniques peuvent être appliquées à des conceptions ou des illustrations. .

● Je ne suis pas un expert en la matière, j'ai donc expérimenté et je souhaite partager avec vous les méthodes et techniques qui ont fonctionné pour moi. j'espère qu'il vous sera utile

 

■ REMARQUE : j'utilise Clip Studio Paint Ex. Certaines fonctions peuvent ne pas être disponibles dans d'autres versions.

 

Voici quelques exemples que j'ai peints en utilisant les techniques que nous allons apprendre ▼

 

1. Introduction | Perspective ou projection isométrique

■ Regardons les différences entre les différents types de perspective :

 

• Perspective à deux points : Si nous observons des objets en perspective, nous pouvons remarquer qu'ils deviennent plus petits à mesure qu'ils s'éloignent vers le point de fuite. De cette façon, l'œil humain perçoit.

 

• Perspective isométrique : Contrairement à la perspective traditionnelle, la perspective isométrique est un type de projection axonométrique. On voit toujours 3 côtés et leur échelle de mesure est la même. Les objets n'apparaissent pas plus petits ou plus grands quelle que soit la position de la "caméra". Les côtés font un angle de 30° avec l'axe vertical.

L'avantage de ce type de projection est que l'on peut facilement construire en perspective même en tant que débutant, mais il faut tenir compte du fait que des problèmes peuvent être générés pour percevoir la profondeur et la hauteur des objets.

 

• Perspective 2: 1 : Un autre type de projection axonométrique largement utilisé dans les jeux vidéo et le design. Dans ce cas deux côtés ont le même angle d'environ 26,6°.

Si nous le comparons à l'isométrique, les objets sont vus avec une vue de dessus moins prononcée, ils sont donc perçus de manière légèrement plus naturelle pour l'œil.

 

 

La perspective 2: 1 est devenue populaire pour son utilisation dans le Pixel Art pour les jeux vidéo, l'angle permet de générer des lignes droites propres par rapport à la vue isométrique. ▼

 

■ REMARQUE: La projection la plus appropriée dépend du style que nous recherchons, pour les jeux de stratégie et la conception architecturale, la perspective isométrique est très utile, pour la conception et le pixel art, nous pouvons utiliser 2: 1.

Personnellement, je trouve la vue offerte par la perspective 2:1 plus agréable, mais il vaut mieux expérimenter pour bien choisir en fonction des besoins de chaque projet et des goûts personnels, on peut même explorer d'autres angles pour obtenir des perspectives différentes.

2. Première méthode: transformation

• Nous allons utiliser les outils de transformation de clip studio pour créer les projections isométriques :

 

■ [1] Pour l'exemple, j'utilise un carré. Nous allons d'abord dans [Modifier]> [Transformer]> [Échelle / Rotation] ou utilisez le raccourci clavier CTRL + T.

■ [2] Nous faisons pivoter le calque de 45° à l'aide des poignées ou dans la palette [Propriété de l'outil] et confirmons la transformation en appuyant sur OK ou sur la touche Entrée

■ [3] Nous appliquons à nouveau une transformation.

• [3.1] Nous nous sommes assurés de désactiver [Maintain Ratio]

• [3.2] Nous modifions la hauteur pour obtenir la perspective. Pour la projection isométrique 60 est souvent utilisé mais personnellement 58 me donne le meilleur résultat pour réaliser l'angle de 30°.

Nous confirmons la transformation en appuyant sur OK ou sur la touche Entrée et nous avons maintenant une tuile que nous pouvons utiliser comme base.

COMMENT CRÉER DU VOLUME À PARTIR DE CETTE FAÇON ?

 

■ [4] Nous pouvons utiliser le fond de teint pour créer du volume très facilement. Tout d'abord, nous allons dupliquer le calque à l'aide de l'outil de déplacement (raccourci V) en maintenant ALT pour dupliquer et SHIFT pour déplacer verticalement. Nous le plaçons un peu plus haut pour définir la hauteur de notre objet.

■ REMARQUE : Nous pouvons également dupliquer à l'aide du raccourci CTRL + J ou du menu déroulant de [Calque]> [Dupliquer le calque] dans ces méthodes, je duplique fréquemment les calques, je recommande donc d'utiliser le raccourci clavier pour être plus efficace : D

 

■ [5] En utilisant l'outil de ligne que nous aimons le plus, nous connectons les points sur l'axe vertical pour créer le volume.

• [5.1] Dans l'outil forme j'utilise un pas d'angle de 15° qui me permet de créer à la fois les lignes verticales et les côtés à 30°

■ REMARQUE : Dans cet exemple, j'ai également connecté les côtés et j'ai défini la couche supérieure comme référence pour m'aider à remplir, cette étape est facultative.

■ [6] J'utilise le pot de peinture sur la couche inférieure pour remplir les côtés, puis je combine les couches en utilisant le raccourci CTRL + E

• Avec ces étapes simples, la base de notre objet est prête. Maintenant, nous pouvons l'utiliser pour créer les objets que nous imaginons.

 

UTILISER LA BASE POUR CRÉER DIFFÉRENTS MATÉRIAUX

 

■ [7] En suivant la géométrie de la base, nous pouvons créer différents matériaux dans la perspective isométrique.

Nous pouvons travailler sur le même calque ou en créer de nouveaux si nous le jugeons nécessaire.

 

Le processus dépend de chacun, dans mon cas j'esquisse quelques détails tels que la texture et les fissures dans le matériau. J'essaie de casser les bords pour rendre l'objet plus organique. ▼

Pour finir, nous peignons simplement le matériau avec nos pinceaux préférés.

Tenir compte de la direction de la lumière et essayer de générer des formes intéressantes à partir de la base en perspective.

 

Le niveau de détail dépend des besoins et du style de chacun. C'est très amusant d'imaginer et d'expérimenter avec différents matériaux.

 

■ On part d'un carreau, on lui donne du volume puis on définit un matériau organique en perspective isométrique.

 

• J'espère que cet exemple simple vous donne une idée des possibilités expressives qu'a cette méthode.

2.1 | Action automatique

■ Pour rendre ces actions répétitives moins fastidieuses, préparez un ensemble d'actions automatiques.

 

Vous pouvez les télécharger dans les ressources Clip Studio avec le reste des outils que vous préparez pour le didacticiel. ▼

 

■ [1] Si nous ne voyons pas le panneau d'actions automatiques, nous pouvons l'activer à partir du menu [Fenêtre]> [Action automatique]

 

• [1.1] Ensuite, nous chargeons les actions en les faisant glisser depuis le panneau des matériaux.

■ [2] Les actions sont divisées en deux parties.

• [2.1] Isométrique 30° (Base, avant, côté)

• [2.2] Dimétrique 2: 1 (j'utilise une échelle de largeur 141 et hauteur 71)

■ [3] On peut utiliser les 3 actions d'Isométrique 30° pour construire facilement un cube. Malheureusement, je n'ai pas pu définir de côtés pour la perspective 2: 1. ▼

 

• L'action Isométrique 2: 1 nous aide à créer la base de la perspective 2: 1 ▼

■ REMARQUE : en raison de l'absence de décimales et d'asymétrie dans les options de transformation, les formes ne sont pas parfaites. Ils servent encore à gagner du temps et ensuite on peut affiner la base.

■ [4] ASTUCE : Nous pouvons attribuer des raccourcis clavier aux actions automatiques, de cette façon nous pouvons être encore plus efficaces et optimiser le flux de travail.

 

Allons dans [Fichier] [Paramètres des raccourcis (H)] ou utilisons le raccourci CTRL + ALT + MAJ + K

• [4.1] Nous sélectionnons Action automatique dans le menu déroulant.

• [4.2] On sélectionne l'ensemble des actions isométriques, on choisit l'action à laquelle on veut affecter un raccourci et on appuie sur edit raccourci

• [4.3] Nous ajoutons le raccourci et confirmons.

 

 

• Nous pouvons maintenant appliquer les actions en appuyant sur le raccourci clavier. Très utile et efficace. : RÉ

3. Deuxième méthode : règles spéciales

Une autre façon de nous aider à créer des informations est d'utiliser les règles spéciales du CSP.

Je vais vous montrer deux techniques différentes.

■ [1] Pour la première technique, nous allons utiliser la règle spéciale de [Ligne parallèle]

 

• [1.1] Nous définissons le Pas d'Angle à 30 pour définir la Perspective Isométrique de 30° et nous activons Créer dans le calque d'édition

 

• [1.2] En maintenant la touche SHIFT, nous créons une règle à 30 degrés vers la droite

• [1.3] Ensuite, nous créons un autre à gauche pour définir l'autre côté.

 

• [1.4] Enfin, nous créons une règle verticale

• [1.5] Dans le panneau des calques, nous configurons la règle pour qu'elle soit visible dans tous les calques.

■ [2] Maintenant que nous avons défini les règles, nous pouvons tracer les bons angles.

 

• [2.1] La règle active est celle de couleur violette. Nous pouvons effectuer une rotation entre chaque règle à l'aide du bouton de la barre de commandes ou du raccourci clavier CTRL + 4.

 

• [2.2] On peut utiliser le bouton de la barre de commandes ou le raccourci clavier CTRL + 2 pour activer et désactiver l'utilisation des règles. Par exemple, nous désactivons les règles pour ajouter des détails organiques.

■ [3] ASTUCE : Nous pouvons tirer parti des calques vectoriels pour construire nos objets.

• [3.1] On trace les lignes sans se soucier qu'elles se coupent

• [3.2] Nous utilisons la gomme vectorielle pour supprimer les lignes en excès.

■ REMARQUE : Cette méthode est probablement la plus précise pour créer une isométrique à 30°, mais je la trouve personnellement pas aussi intuitive ou efficace.

 

Pour résoudre ce problème, préparez quelques règles et grilles de perspective, vous pouvez les trouver dans les outils que j'ai partagés dans les assets ▼

■ [4] Pour utiliser les règles et les grilles, nous avons simplement fait glisser le panneau des matériaux vers le canevas.

 

• [4.1] Nous ajustons la grille à la taille que nous préférons, en utilisant l'objet | Opération.

• [4.2] Profitant de la règle de perspective, nous dessinons de manière plus intuitive.

• [4.3] Comme nous l'avons fait précédemment, nous pouvons utiliser le raccourci CTRL + 2 pour activer / désactiver l'utilisation des règles, de cette façon nous pouvons dessiner sans nous limiter aux angles lorsque cela est nécessaire.

• [4.4] En utilisant la règle 2 : 1, nous pouvons créer cette perspective de la même manière que l'isométrique 30°

• J'espère que les règles vous seront utiles. Nous allons les combiner avec les actions automatiques pour réaliser nos designs. Mais parlons d'abord de la création de cartes pour les jeux vidéo. ▼

4. Ensemble de tuiles Tilemaps

Une technique très polyvalente et populaire pour créer des scénarios dans les jeux vidéo est l'utilisation de Tilesets et de Tilemaps.

 

■ QU'EST-CE QUE LES CARRELAGES ?

 

• Un jeu de tuiles est un ensemble de tuiles ou "tuiles" que nous pouvons utiliser pour créer nos cartes dans une grille formant une "Tilemap", elles sont un moyen efficace de créer des cartes et sont généralement utilisées dans différents moteurs de jeu tels que Godot ou Unity .

 

• Ils sont généralement créés dans un format carré et forment généralement des motifs les uns avec les autres établissant un système modulaire.

▼ Je vais vous montrer comment configurer nos fichiers pour qu'ils fonctionnent avec des ensembles de tuiles et quelques techniques intéressantes pour créer des paysages isométriques.

■ Préparation des fichiers :

 

• [1] Nous allons dans [Fichier]> [Nouveau] pour créer notre canevas de base que nous nommons Tileset,

 

• [1.1] La taille peut varier mais il est généralement plus facile de travailler dans un format carré. Dans mon cas 512x512px

la taille peut varier mais il est généralement plus facile de travailler dans un format carré. Dans mon cas 512x512px

 

• [1.2] Important : Nous allons activer Créer une illustration animée et définir un certain nombre de cadres. Cette étape est importante pour le système que j'ai développé.

 

Chaque cadre représentera une tuile. 12 est un bon nombre pour commencer, nous pouvons en ajouter si nécessaire.

■ [2] Notre fichier a déjà un dossier d'animation avec 12 cellules préparées

• [2.1] Pour voir les images, allez dans [Fenêtre]> [Chronologie (X)]

• [2.2] Comme nous l'avons configuré dans le menu précédent, nous gagnons du temps et nous avons déjà une cellule affectée par trame : D

 

■ [3] Afin de travailler avec plusieurs calques par tuile, nous allons faire un clic droit et [Créer un dossier et insérer un calque (F)] ou utiliser le raccourci CTRL + G

• [3.1] Nous définissons un dossier pour chaque Cellule

■ [4] On définit une grille de guidage à partir du menu [Affichage]> [Réglages Règle / Grille (N)...]

• [4.1] Origine de la règle / grille: centre

• [4.2] Intervalle égal à la taille du canevas, dans ce cas 512px. 4 divisions

■ [5] Enfin, nous sauvegardons le fichier dans un endroit facilement accessible.

Maintenant, nous allons peindre nos tuiles. Pour s'assurer que les motifs sont répétés correctement, nous pouvons créer un fichier de référence.

■ [6] Nous peignons d'abord sur la première image pour nous aider à configurer le fichier.

• [6.1] On crée un nouveau fichier, pour définir la taille on va créer une grille de 9 tuiles, donc on multiplie la taille du fichier de base par 3. Dans ce cas 512 x 3 = 1536

• [6.2] Nous importons le fichier Tileset en tant qu'objet fichier depuis le menu [Fichier]> [Importer]> [Créer un objet fichier]

• [6.3] Avec l'opération | Objet, nous configurons la raison à partir du sous-menu Tool Property.

 

• [6.4] Nous configurons la fenêtre pour pouvoir l'utiliser comme référence. Toutes les modifications que nous apportons au fichier Tileset d'origine sont reflétées dans cette couche lorsque nous sauvegardons.

■ [7] À titre d'exemple, je crée une variante de la première tuile. Je duplique le calque et le place dans le dossier "2" correspondant au deuxième cadre ou cellule.

 

• [7.1] Avec le raccourci CTRL + U j'utilise la correction Teinte / Saturation / Luminosité, et change la teinte pour créer la variante de couleur. C'est une technique très utilisée dans les jeux vidéo pour profiter de l'art et gagner du temps.

• [7.2] Maintenant, ma partie préférée de ce système que nous avons préparée : Dans le sous-menu Propriétés de l'outil, nous pouvons sélectionner le cadre spécifique affiché à partir de l'objet fichier.

 

De cette façon si on passe de 0 à 1 on passe de TILE 1 à 2 !

 

▼ Nous allons utiliser cette méthode pour créer nos cartes en utilisant les tuiles créées dans un seul fichier. Personnellement, je trouve que c'est une façon très intéressante et créative d'utiliser cette fonction de Clip Studio Paint : D

4.1 CONSEIL | Motifs ou modèles

■ Je ne suis pas un expert dans la création de motifs ou de motifs répétitifs, mais je vais partager quelques méthodes que je trouve utiles pour les peindre.

■ REMARQUE: en mars 2020, l'un des sujets des CONSEILS du mois était les motifs et les modèles. Si vous le souhaitez, vous pouvez consulter les incroyables tutoriels créés par d'autres auteurs de la communauté. Ici, je partage quelques-uns de mes favoris. ▼

■ [1] Nous allons créer une tuile "LAVA". La première étape consiste à peindre la texture que nous voulons, nous ne nous soucions toujours pas d'en faire un motif. ▼

• Utilisez vos pinceaux préférés.

■ REMARQUE : une option consiste d'abord à esquisser la texture, à la convertir en motif, puis à l'affiner, mais dans ce cas, j'ai décidé de créer le carreau en couleur pour gagner du temps.

■ [2] Nous activons la Grille que nous avons préparée auparavant avec 4 divisions.

• [2.1] Nous nous assurons d'activer [Snap to Grid] (Raccourci CTRL + 3) et en utilisant l'outil de sélection rectangulaire (Raccourci M) nous sélectionnons d'un coin au centre.

• [2.2] Avec la sélection active, CTRL + C et CTRL + V pour copier et coller dans un nouveau calque.

• [2.3] Nous répétons avec les 3 autres coins et nous avons déjà divisé la "Tuile" en 4 parties.

■ [3] Avec l'outil Déplacer le calque (Raccourci V) Nous nous déplaçons chaque quart vers le coin opposé.

Nous pouvons maintenir SHIFT pour maintenir la diagonale, une fois que nous avons placé l'image dans le coin, nous utilisons les flèches du clavier pour vérifier que nous la plaçons dans le bon pixel.

 

• [3.1] On répète avec les 3 autres parties.

• [3.2] En utilisant CTRL + E, nous unissons les couches en une seule.

L'avant et l'après ▼ Il faut maintenant corriger les joints au centre pour finir la texture.

■ [4] Nous commençons à peindre pour corriger les coutures au centre. Nous pouvons travailler sur le même calque ou en créer de nouveaux si nécessaire.

 

• [4.1] Dans le fichier de référence, nous configurons le cadre correspondant au TILE à l'aide de l'outil Opération / Objet et de la palette Propriétés de l'outil.

• [4.2] En utilisant la référence pour vérifier la texture, nous continuons à peindre et à peaufiner jusqu'à ce que nous soyons satisfaits du résultat. ▼

■ REMARQUE : N'oubliez pas d'enregistrer le fichier (Raccourci CTRL + S) lorsque vous modifiez la texture pour mettre à jour l'objet fichier sur le canevas de référence. (« Vérification du jeu de tuiles »)

■ [5] Dans Clip Studio Assets, nous pouvons trouver d'excellents modèles et motifs. Pour les utiliser, nous glissons simplement de la palette des matériaux vers la toile.

 

• [5.1] Pour s'assurer qu'il est correctement configuré, nous utilisons l'outil Objet et dans la palette Propriétés de l'outil, nous configurons Ajuster la position sur "Toile".

De cette façon, le motif est parfait sur les bords de notre toile.

 

■ REMARQUE : Idéalement, nous utilisons les matériaux Assets comme base pour nous aider à créer nos tuiles, puis nous peignons dans notre propre style pour générer un système visuel cohérent. Chacun est libre d'explorer différentes techniques pour obtenir de bons résultats.

▼ Quelques exemples de Tuiles, chacune dans son cadre respectif.

 

▼ Certains matériaux que j'ai utilisés dans les exemples.

4.2 CONSEIL | Création de cartes à l'aide de Tilesets

Je vais vous présenter quelques techniques pour utiliser le jeu de tuiles que nous avons créé dans la section précédente et créer dynamiquement des cartes ou des scénarios.

■ [1] Nous créons un nouveau Canvas, dans ce cas 1920x1080px

• [1.1] Nous allons utiliser le matériau de la grille et de la règle 2: 1 pour définir la perspective.

• [1.2] Nous importons le Tileset en tant qu'objet fichier depuis le menu [Fichier]> [Importer]> [Créer un objet fichier] et sélectionnons le fichier "Tileset"

 

■ [2] Nous utilisons l'Action Automatique "Isométrique 2: 1" pour définir la "Tuile" en perspective

Nous utilisons les contrôles pour repositionner et redimensionner le Tile Tile

• [2.1] Nous modifions le cadre dans la palette Propriétés de l'outil pour sélectionner la bonne tuile.

• [2.2] Nous activons Motif pour le transformer en motif répétitif. De cette façon, nous définissons le sol de notre scène.

• [2.3] Pour créer d'autres éléments, nous dupliquons l'objet fichier et sélectionnons un autre Tile en changeant le cadre.

• [2.4] Dans les options Reason, nous pouvons choisir comment il est répété. Si nous sélectionnons Horizontal ou Vertical, nous créerons une seule rangée de tuiles dans l'une des deux directions. Dans ce cas, nous définissons une sorte de rivière avec la tuile d'eau.

• [2.5] On duplique à nouveau, et cette fois on change la direction du motif.

Ensuite, nous définissons la tuile en modifiant le cadre.

■ [3] Notre carte semble toujours plate, donnons-lui un peu de profondeur.

Nous pouvons facilement créer une dimension en utilisant les règles et en peignant manuellement.

Nous créons d'abord un calque sous les blocs.

 

• [3.1] Avec la règle active et le pinceau que nous aimons le plus, nous peignons le côté des carreaux.

• [3.2] CONSEIL: Si nous créons des variantes d'une tuile, nous pouvons utiliser des masques de calque pour créer des mélanges et des textures intéressants.

Tout d'abord, nous dupliquons et modifions le cadre.

 

• [3.3] En maintenant ALT, nous appuyons sur le bouton pour créer un masque de calque, de cette façon nous cachons le calque entier.

• [3.4] À l'aide d'un pinceau doux, nous peignons pour créer une transition entre les 2 variantes. La couleur révèle et les peaux transparentes.

• [3.5] Enfin, nous regroupons tous les calques dans un dossier.

• [3.6] Nous allons créer une ombre pour définir la hauteur de l'élément que nous créons.

Nous créons un nouveau calque sous le groupe.

Ensuite, en maintenant CTRL, nous cliquons sur le dossier pour créer une sélection.

Nous remplissons la sélection avec une couleur bleu foncé et déplaçons le calque vers le bas pour créer la distance entre les carreaux et le sol.

• [3.7] On remplit la partie manquante avec un pinceau.

Nous plaçons la couche en mode Multiplication et réduisons l'option.

• [3.8] Pour compléter l'effet, nous allons dans [Filtre]> [Flou]> [Flou gaussien] et ajustons la valeur pour adoucir les bords de l'ombre.

■ [4] Maintenant, nous allons donner un peu de profondeur à la rivière.

Nous créons une nouvelle couche au-dessus des tuiles d'eau.

Nous peignons un bord à l'aide de la règle de perspective.

▼ Dans ce cas peignez sans vous soucier de la partie qui se chevauche dans l'eau. Ensuite, j'ai chargé le calque d'eau en tant que sélection en appuyant sur CTRL + Cliquez sur la vignette du calque et j'ai effacé ce qui restait pour obtenir un bord net.

 

• [4.1] Nous pouvons désactiver la règle et peindre manuellement des bords et des détails plus organiques.

• [4.2] Pour créer une ombre dans l'eau, nous chargeons d'abord à nouveau le calque en tant que sélection, puis allons dans le menu [Sélectionner]> [Réduire la zone sélectionnée] et lui donnons une valeur de 10px

• [4.3] Nous adoucissons la sélection du menu [Sélectionner]> [Blur edge] et lui donnons une valeur de 40px.

Ensuite, nous remplissons un nouveau calque avec n'importe quelle couleur car il ne doit être utilisé que comme sélection plus tard.

• [4.4] Nous dupliquons la couche d'eau et la mettons en mode de fusion de multiplication

• [4.5] Pour finir nous chargeons la sélection que nous avons précédemment créée et l'utilisons comme masque de calque.

Nous affinons le masque en peignant manuellement avec un pinceau doux.

▼ Si on compare, avec l'ombre subtile on a un peu plus de volume. Ces types de détails sont faciles à réaliser et enrichissent la pièce.

■ [5] Nous continuons à créer des éléments. Dans ce cas, j'utilise la tuile en bois pour créer un pont.

Je duplique d'abord l'objet fichier comme nous l'avons fait précédemment et sélectionne le Cadre correspondant à la Tuile de bois.

• [5.1] En maintenant la touche ALT enfoncée, nous créons un masque de calque cachant tout le calque.

Ensuite, nous peignons en ne révélant que la zone autour de l'eau pour créer le pont en bois.

Nous affinons le masque de calque en peignant manuellement pour obtenir une forme intéressante.

• [5.2] Nous dupliquons le calque ci-dessous. L'étape suivante consiste à pixelliser et à appliquer le masque de calque.

Puis on descend un peu pour créer le volume du pont.

(CTRL + U) Teinte / Saturation / Légèreté pour assombrir le calque afin que vous puissiez voir la silhouette.

• [5.3] En suivant la forme de la silhouette, nous avons peint manuellement le bord du pont pour lui donner du volume. Nous essayons de définir l'éclairage. (Il n'a pas besoin d'être parfait)

• [5.4] Pour finir, nous créons un nouveau calque sous le pont en mode multiplication et peignons une ombre sur le sol et l'eau pour intégrer l'objet dans la scène.

Voici comment était le pont.

▼ En combinant ces techniques, nous pouvons créer différents objets et définir notre décor ou notre carte.

■ [6] Quelques derniers détails dans cet exemple :

Sur un calque en mode Strong Light, j'ai peint quelques effets de lumière pour améliorer l'atmosphère avec un aérographe doux.

• [6.1] Je duplique à nouveau l'objet "tileset" et je choisis la Tile, mais cette fois je désactive Motif, pour n'avoir qu'une seule tuile.

• [6.2] Dans un nouveau calque sous le carreau, je peins un des côtés à l'aide des règles pour définir le volume.

• [6.3] Je duplique le côté et utilise le raccourci CTRL + T pour une transformation libre. Ensuite, je clique dessus avec le bouton droit et je choisis [Retourner horizontalement]

Enfin je positionne la copie pour obtenir l'autre côté du cube et regroupe les calques dans un dossier.

■ ASTUCE : Nous pouvons bloquer les pixels transparents et peindre l'éclairage/les textures sans craindre de perdre la forme.

• [6.4] Je crée une copie du groupe et change la tuile pour obtenir une variante de couleur.

• [6.5] CTRL + T pour une transformation libre. Je rétrécis l'objet et définit sa position.

• [6.6] Enfin, pour les intégrer dans la scène, j'ai créé un calque sous les objets en mode multiplication et peint une ombre portée manuellement.

▼ J'ai décidé de changer la texture dans le masque de calque des carreaux verts pour générer une texture plus intéressante dans la transition.

C'est le résultat final de mon exemple. J'espère que vous donnerez une idée des possibilités de ce système. En combinant des techniques de peinture manuelle avec des Tilesets, nous pouvons créer d'innombrables scénarios de manière créative et efficace.

(Il m'a fallu beaucoup plus de temps pour expliquer les étapes que pour peindre cet exemple)

■ REMARQUE : si nous ne pixellisons pas les objets du fichier, nous pouvons toujours apporter des modifications au Tileset et cela sera reflété dans la mise en page isométrique finale. Cela nous permet d'avoir un grand contrôle sur la pièce et à mon avis c'est un outil créatif très puissant.

▼ Par exemple, en changeant la tuile de "eau" en "lave", le reste des réglages se fait quasiment tous avec Teinte/saturation/luminosité (CTRL+U) et en 5 minutes j'ai une variante ambiante du scénario.

5. Peinture scène isométrique 2: 1

En combinant les techniques présentées, nous allons peindre une scène plus complexe en tant que concept de jeu vidéo.

■ [1] Le canevas dans cet exemple est 4k (3840x2160px).

 

• [1.1] La perspective que j'ai choisie est encore 2: 1.

 

• [1.2] C'est le Tileset que j'ai préparé, pour avoir une palette Tiles avec laquelle travailler. Si vous pouvez remarquer que j'ai quelques variantes de la tuile "roches" pour pouvoir générer de la variété.

• [1.3] Pour casser la toile vierge, peignez un environnement de base, sans trop de détails puisque je vais en couvrir la majeure partie. Cette étape est facultative mais à mon avis elle permet d'intégrer la scène dès le début.

• [1.4] À l'aide des règles, j'ai créé le croquis de la scène. C'est une bataille contre un boss araignée. J'ai essayé de définir différents plans et éléments avec lesquels notre personnage pourrait interagir dans le jeu.

■ [2] Je commence à définir les éléments. D'abord, j'importe le Tileset en tant qu'objet fichier.

[Fichier]> [Importer]> [Créer un objet fichier]

• [2.1] Je sélectionne une des tuiles "rocher" avec le bon cadre.

• [2.2] À l'aide de l'action automatique, je convertis la tuile en projection 2: 1 comme je l'ai fait précédemment dans l'exemple précédent.

• [2.3] En prenant la grille et le croquis comme référence, je réduis le carreau à l'échelle appropriée.

• [2.4] Dans un nouveau calque sous la tuile, je définis la hauteur du bloc en utilisant la grille comme référence. dans ce cas, le bloc mesure 1 haut x 4 large.

Ensuite je regroupe les calques dans un dossier que je nomme Tile Roca 1 et lui donne une couleur pour m'organiser

• [2.5] Je verrouille les pixels transparents du calque latéral et commence à peindre les détails, en sélectionnant les couleurs du carreau avec la touche Alt.Comme c'est une texture de roche, je suis les contours pour lui donner un volume plus réaliste. Il n'est pas nécessaire que la perspective soit parfaite, il suffit de créer l'illusion de la matière.

• [2.6] Pour accentuer l'éclairage, je duplique le calque, le mets en mode multiplication et baisse l'opacité, puis efface les parties qui ne sont pas nécessaires.

• [2.7] Je charge le carreau en tant que sélection et dans un nouveau calque en mode Écran je peins pour augmenter la luminosité en haut du bloc.

• [2.8] Je crée une copie du dossier et le déplace pour voir comment les blocs se chevauchent. La jointure est un peu tendue, alors je crée une nouvelle couche et peins un volume autour des bords pour améliorer la transition entre les blocs. Peu importe qu'on s'éloigne un peu de la grille puisqu'il s'agit d'une texture organique.

• [2.9] Il est important de comprendre comment les blocs se chevauchent. Pour obtenir le bon effet, dans le panneau des calques, les blocs à droite de la toile doivent être en haut des calques. À leur tour, les « rangées » qui vont de bas en haut doivent être en ordre.

■ REMARQUE : Lorsque j'ai créé les variantes de la tuile "Rock", je me suis assuré de ne modifier que le centre, donc en changeant simplement la tuile avec le cadre nous avons déjà 3 blocs de "roches" que nous pouvons utiliser.

 

Nous allons dupliquer les blocs que nous avons créés pour définir facilement le terrain.

■ [3] Nous continuons à définir des éléments.

En répétant les mêmes étapes, nous créons des blocs avec d'autres «tuiles».

Dans ce cas, j'ai modifié le pitch pour créer la variante de bloc.

• [3.1] En utilisant CTRL + T dans le dossier, on joue en modifiant l'échelle des blocs pour définir facilement la base d'autres éléments de la scène.

• [3.2] A l'aide des règles, j'étale la texture de la tuile sur les côtés.

• [3.3] Je crée une copie et les place pour former une étape avec 2 blocs.

• [3.4] Je regroupe les 2 blocs dans un dossier et crée 3 autres copies. En modifiant la position verticale, je définis différentes hauteurs pour les marches, obtenant une structure plus intéressante sans trop d'effort.

• [3.5] Pour améliorer la façon dont ils se chevauchent, dans un nouveau calque en mode multiplication, nous peignons des ombres. Pour éviter de laisser les bords, nous chargeons simplement les blocs en tant que sélection (CTRL + MAJ + Clic sur la vignette du calque) et créons un masque de calque. Ensuite, nous supprimons les parties dont nous n'avons pas besoin.

• [3.6] Nous répétons les étapes dans les autres blocs. En utilisant le même masque sur un calque en mode Écran, nous pouvons peindre un peu de lumière sur la première marche.

Enfin, nous rassemblons toutes les étapes dans un seul dossier.

• [3.7] Nous continuons à créer des copies des blocs de "roches" définissant la carte. Il n'est pas nécessaire de coller parfaitement à la grille si en ajustant les positions on obtient une meilleure structure visuelle.

• [3.8] Pour améliorer les bords dans les blocs extrêmes, nous créons un masque de calque et effaçons une partie de la structure en suivant la forme des rochers.

• [3.9] Je définis la deuxième ligne, puis je regroupe tous les blocs dans un dossier, de cette façon je peux facilement dupliquer les lignes et compléter le sol.

• [3.10] J'utilise 3 blocs de hauteur pour que le sol du lustre soit sur un plan plus élevé.

• [3.11] Je finis de terminer le sol, et j'ajuste les carreaux au hasard pour que ce ne soit pas si répétitif.

• [3.12] En déplaçant simplement certains blocs verticalement de haut en bas, nous pouvons casser la grille et donner plus de volume à la scène.

Ces types de détails sont subtils mais donnent vie à la scène et ne prennent pas trop de temps à terminer.

Ils nous aident également à raconter une histoire ou à expliquer les mécanismes du concept du jeu. Certains blocs peuvent tomber lorsque le personnage marche dessus ou active des pièges.

■ Nous avons terminé le sol de cette scène. Nous pouvons réutiliser les éléments pour créer d'innombrables scénarios avec le système de grille et de bloc.

■ [4] Pour intégrer l'échelle aux blocs de roche, je crée un masque de calque dans le groupe et je peins avec une couleur transparente pour effacer une partie des bords afin qu'ils ne soient pas si parfaits.

• [4.1] En suivant le croquis et à l'aide de la grille, nous plaçons les tuiles que nous avons précédemment créées pour créer des surfaces flottantes.

• [4.2] Dans un calque en mode multiplication, nous peignons une ombre là où le premier bloc entre en contact avec le sol en pierre. De cette façon, nous intégrons la scène.

• [4.3] Nous chargeons la forme du Tile en tant que sélection et la remplissons avec la couleur sombre de l'ombre.

En utilisant la grille, nous nous assurons que les ombres sont situées au bon endroit afin de ne pas briser l'illusion de perspective.

Nous modifions l'opacité du calque pour ajuster l'intensité de l'ombre.

• [4.4] Nous dupliquons le calque et le plaçons sous le bloc suivant.

Pour l'ombre des 4 blocs qui forment une structure, nous chargeons chaque tuile en tant que sélection et la remplissons dans le même calque. Ensuite, nous plaçons l'ombre sur le sol en suivant la grille.

• [4.5] Nous appliquons un [Filtre]> [Flou]> [Flou gaussien] à chaque ombre pour adoucir les bords. Enfin, nous regroupons tous les calques et y appliquons un masque de calque pour affiner le résultat final.

▼ L'un des principaux problèmes de ce type de perspective est la difficulté de percevoir la hauteur des objets. En utilisant les ombres, nous créons l'illusion de profondeur, cela n'a pas besoin d'être très réaliste.

■ [5] Nous continuons à créer les éléments d'esquisse. La prochaine étape, la rivière de lave.

Les étapes sont toujours très similaires. D'abord, je duplique le tilset.

Je sélectionne la tuile de lave et la place dans la bonne position derrière les blocs de roche.

Cette fois, j'active "Raison" pour créer une ligne.

À l'aide d'un masque de calque et d'une couleur transparente, je cache les parties dont je n'ai pas besoin.

• [5.1] Le côté des blocs "grands" semble un peu étrange à cause des parties répétées. Nous allons peindre sur un nouveau calque manuellement pour le rendre plus naturel.

• [5.2] Nous regroupons les blocs, et masquons une partie de la base pour l'intégrer au Lava.

• [5.3] Nous créons un nouveau calque en mode Strong Light et appliquons un masque d'écrêtage aux blocs. Ensuite, nous peignons une lueur orange pour renforcer l'effet de la lave.

• [5.4] Pour les blocs qui se trouvent sur la rivière de lave, nous pouvons facilement créer une variante spéciale. Tout d'abord, nous dupliquons le calque "Tile" et le changeons en tuile de lave.

Ensuite, en maintenant ALT, nous créons un masque de calque cachant tout le contenu.

Nous peignons pour révéler la création de détails de lave sur la surface du bloc.

• [5.5] Dans un nouveau calque, nous peignons des ombres pour définir le volume des fissures.

Nous ajoutons également des effets de lumière avec un calque sur Add Glow

• [5.6] Je duplique le bloc et modifie un peu les fissures de lave. Pour les intégrer, je masque à nouveau une partie du fond de teint puis rajoute un soft glow.

Enfin, sur un nouveau calque, je peins manuellement des détails à la surface de la lave.

▼ C'est le résultat de la rivière de lave et comment elle s'intègre aux blocs

■ [6] Nous continuons pas à pas à détailler la scène. Les prochains éléments que je vais préparer sont les roches qui encadrent la rivière. Comme base, j'utilise l'un des blocs mais j'augmente sa taille en utilisant CTRL + T.

Je n'ai pas grand chose à expliquer avec ce type d'éléments, on essaie de garder du recul mais il ne faut pas être parfait. Je peins manuellement avec une variété de pinceaux.

▼ Encore une fois, j'utilise des reflets et des masques pour intégrer les éléments.

Bien que certains éléments semblent complexes à réaliser, nous nous contentons de diviser en parties et de répéter les mêmes étapes, patiemment pour obtenir le niveau de détail souhaité.

Chaque fois que je le peux, j'essaie de réutiliser des éléments pour gagner du temps.

• [6.1] Certains éléments sont plus faciles à manipuler en vue de face. Nous pouvons esquisser puis appliquer la perspective ou, comme nous l'avons fait avec le Tileset, nous pouvons peindre une base en couleur.

Dans ce cas, j'utilise une règle de symétrie pour accélérer le processus et concevoir l'arche de l'entrée du donjon.

• [6.2] CTRL + T pour transformer, en maintenant CTRL je déplace la poignée du centre vers le bas pour déformer l'arc en perspective en prenant la grille comme référence.

Une fois l'angle défini, je duplique le calque et le déplace pour donner du volume à l'arc.

À l'aide des règles, je complète les côtés pour définir la forme de base.

• [6.3] À partir de la structure de base, je peins les détails et définis les différents plans en tenant compte de la matière et de l'éclairage.

Le processus de définition de la base d'abord à l'aide des règles et de la grille permet de créer facilement des objets complexes. Ensuite, il s'agit de peaufiner la pièce avec le style et les détails que l'on souhaite.

• [6.4] Pour finir, je crée un calque en mode lumière forte et j'utilise un masque d'écrêtage. Sur ce calque, j'ajoute des textures et des paramètres d'éclairage.

Dans un calque en mode multiplication je crée l'ombre comme dans les éléments que nous avons vu précédemment.

• [6.5] En suivant le même procédé manuel, j'ai peint le bloc de roches qui servira de base à une fontaine et un cristal comme « point de sauvegarde ».

Certains éléments que je n'explique pas en détail étape par étape puisque je répète les mêmes techniques. J'espère que c'est compris en tout cas.

• [6.6] Une autre option consiste à créer des guides en vue de face, puis à les placer en perspective à l'aide de l'action automatique que j'ai partagée. Dans ce cas, je vais créer une police, donc je dessine 2 cercles et quelques lignes de séparation.

Je place le guide en perspective (Avec des calques séparés pour pouvoir faire des sélections) Et avec une transformation libre, je définis l'échelle et la position correctes sur le bloc de pierre.

• [6.7] Je duplique le calque et le déplace verticalement pour définir la hauteur de la police. Ces couches supérieures nous aident à créer des sélections.

Dans une couche inférieure, je peins le volume à l'aide des sélections.

• [6.8] Je peins l'ombre intérieure et en suivant les lignes directrices, je divise la structure en plusieurs parties.

Pour que la couleur remplisse le cercle intérieur d'un calque en mode Haute lumière, déplacez-le verticalement vers le bas et supprimez les parties qui se chevauchent en inversant la sélection.

• [6.9] Sur un nouveau calque, je peins manuellement les roches individuelles, en me concentrant sur les bords et la texture.

• [6.10] À l'aide d'un pinceau que j'ai téléchargé depuis Assets, je peins la texture de l'eau, puis à l'aide de l'action automatique je la mets en perspective. J'efface le surplus à l'aide de la sélection du bord intérieur

• [6.11] Je termine avec une ombre en mode multiplication et en ajustant les couleurs.

En combinant les techniques que nous avons vues précédemment et à l'aide de guides, Dessiner des objets isométriques circulaires n'est pas compliqué.

■ [7] Comme je l'ai expliqué, pour les objets organiques je préfère peindre directement, en ne prenant que la grille et la perspective de référence. Certaines parties n'ont pas non plus besoin d'autant de détails.

 

Pour le fond de la scène, j'ai simplement peint manuellement la structure à l'aide des règles isométriques. Ensuite, je les désactive et ajoute des détails avec différents pinceaux.

• [7.1] Peignez quelques œufs d'araignées monstres. J'ai peint le premier, puis je l'ai dupliqué, mis à l'échelle et peaufiné certains détails.

Bien qu'ils ne soient pas parfaitement en perspective, l'ombre au sol les intègre à la scène.

• [7.2] Pour finir ces détails organiques, peignez des toiles d'araignées et des effets de lumière sans trop de détails. Il suffit de suggérer la texture pour générer le climat. Je peux toujours revenir en arrière et peaufiner davantage les petits détails.

■ [8] Un des avantages de la perspective isométrique est qu'on peut réutiliser des éléments pour en construire d'autres.

Dans ce cas j'ai superposé 3 blocs de tailles différentes, pour définir une colonne.

Je duplique le groupe et le déplace vers le bas sur l'axe vertical.

Ensuite, à l'aide des règles, je relie les bords et enfin je peins la texture et l'éclairage.

• [8.1] Je duplique le bloc supérieur une fois de plus et réduis la taille. Je répète les étapes précédentes pour définir le petit pilier.

• [8.2] Pour créer facilement un orbe, remplissez d'abord une sélection circulaire. Je fais un masque d'écrêtage en utilisant un matériau émeraude pour obtenir des détails.

Enfin, j'aplatis les calques et peins les détails d'éclairage.

• [8.3] En dupliquant le même bloc, nous pouvons générer les autres structures. Je définis d'abord le dessus, puis je peins les côtés.

• [8.4] Avec le même bloc j'ai construit des escaliers. J'ai essayé de créer une dimension avec les ombres.

Les éléments de base de la carte sont déjà construits. Il ne nous manque que les personnages et quelques détails.

5.1 Éléments 3D

Une caractéristique de la peinture Clip Studio que j'aime beaucoup, ce sont les calques 3D. Incroyablement utile pour référence dans les bandes dessinées, l'art conceptuel et les objets de dessin sous des angles complexes.

 

■ Malheureusement, nous ne pouvons pas sélectionner la vue isométrique simplement dans la caméra des couches 3D. Pour résoudre ce problème, préparez quelques calques 3D vides, avec la caméra aussi proche que possible de la vue isométrique. J'ai également partagé ce matériel dans Assets

■ [1] Nous plaçons le calque 3D correspondant, dans ce cas 2: 1

Il crée un groupe avec un calque 3D vide et une zone de référence.

• [1.1] Avec le calque 3D sélectionné, nous faisons glisser un objet 3D sur le canevas. L'objet est placé avec la caméra que j'ai configurée précédemment. (Ne le modifiez pas)

 

• [1.2] À l'aide des commandes de calque 3D, nous modifions la rotation, l'échelle et la position de l'objet.

■ REMARQUE: l'objet doit être positionné au-dessus de la zone de référence pour garantir la perspective la plus précise possible.

• [1.3] Lorsque nous sommes satisfaits de l'objet, nous dupliquons le calque 3D et le pixellisons.

En utilisant CTRL + T nous modifions l'échelle et la position si nécessaire.

• [1.4] Nous éliminons l'objet de la couche 3d et répétons les étapes avec d'autres modèles qui nous intéressent.

Avec les différents objets, la scène est maintenant terminée. Nous ne pouvons peindre qu'en utilisant les objets 3D comme base ou référence.

Voici les objets que j'ai utilisés

https://assets.clip-studio.com/en-us/detail?id=1726790

■ [2] Je peins chaque élément, je fais tout avec des pinceaux et quelques calques dans différents modes de fusion. Si vous en avez besoin, vous pouvez consulter mon tutoriel sur les modes de fusion.

J'ai d'abord peint le verre du "savepoint", j'ai essayé de casser un peu la structure du modèle 3d et de lui donner un aspect magique avec les reflets et la couleur.

• [2.1] Le deuxième objet était le seau, très simple. J'ai d'abord modifié la couleur avec une carte de dégradé, puis j'ai peint manuellement. Comme pour les autres objets, il est important de peindre l'ombre en contact avec le sol, de cette façon l'objet est intégré à la scène.

• [2.2] Les verres colorés j'ai décidé de les laisser pratiquement les mêmes, j'ai seulement flouté quelques bords et modifié une partie de l'éclairage. Pour finir j'ai dupliqué le calque, j'y ai appliqué un flou gaussien et l'ai mis en mode raster.

• [2.3] Bien qu'il semble plus complexe, le coffre « mimique » suit le même processus. En utilisant la géométrie de l'objet 3D, je peins jusqu'à ce que je définisse l'image que j'ai en tête.

J'ai changé la "bouche", j'ai ajouté des sortes d'yeux et de pattes d'araignée. Une fois que j'ai mis l'ombre portée dessus, elle se fond beaucoup mieux dans la scène.

• [2.4] Pour peindre le personnage, j'ai simplement divisé les différents éléments en couches et peint manuellement de la même manière qu'avec le reste des éléments.

• [2.5] Enfin, nous peignons l'araignée. Je définissais la forme et la texture en dessinant sur le modèle 3D.

J'ai divisé le corps en 3 parties et j'ai superposé la couleur en mode Strong Light.

Le processus pour tous les éléments est similaire, il suffit d'être patient et de peindre jusqu'à atteindre le niveau de détail nécessaire. C'est toujours une bonne idée de regarder les références.

■ [3] Pour terminer la scène, j'ai peint des effets d'éclairage magiques. Vous pouvez retrouver les méthodes que j'utilise dans mon tutoriel sur les effets magiques.

J'utilise généralement des calques en mode Ajouter (brillant), mais cela dépend du résultat souhaité.

■ C'est le résultat final, du croquis aux effets magiques.

■ La chose intéressante à propos de l'art isométrique est que nous pouvons déplacer les éléments et créer de nouvelles scènes.

conclusion

Merci beaucoup d'avoir regardé mon tutoriel.

C'était très intéressant d'explorer l'art isométrique axé sur les jeux vidéo.

J'ai l'impression que certaines parties ne sont pas expliquées en détail car je répétais les mêmes techniques que lors des étapes précédentes. Désolé si c'est un peu long.

 

■ J'espère que les documents que j'ai partagés vous aideront. Ils peuvent les appliquer aux illustrations et à la conception, pas seulement à l'art des jeux vidéo.

 

Si vous avez des questions, n'hésitez pas à me laisser un commentaire.

Prenez soin de vous et explorez votre créativité.