Bonjour à tous ! Dans ce tutoriel, 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 conception de décors et l'art pour les jeux vidéo, mais les techniques peuvent être appliquées à des designs ou des illustrations.

●Je ne suis pas un expert en la matière, j'ai donc expérimenté et je veux partager avec vous les méthodes et techniques qui m'ont donné des résultats. J'espère que cela 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

■ Observons 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. C'est ainsi que l'œil humain perçoit.

 

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

L'avantage de ce type de projection est que nous pouvons facilement construire en perspective même en étant débutants, mais il faut prendre en compte que des problèmes peuvent survenir pour percevoir la profondeur et la hauteur des objets.

 

• Perspective 2:1 : Un autre type de projection axonométrique très 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°.

Comparé à l'isométrique, les objets apparaissent avec une vue supérieure moins prononcée, ils sont donc perçus de manière un peu plus naturelle pour l'œil.

 

 

La perspective 2:1 est devenue populaire grâce à son utilisation dans le Pixel Art pour les jeux vidéo ; l'angle permet de générer des lignes droites nettes 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 le design architectural, la perspective isométrique est très utile. Pour le design et le pixel art, nous pouvons utiliser la 2:1.

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

2. Première méthode : Transformation

• Nous allons utiliser les outils de transformation dans Clip Studio pour créer les projections isométriques :

 

■ [1] Pour l'exemple, j'utilise un carré. Nous allons d'abord dans [Édition] > [Transformer] > [Mise à l'échelle \/ Rotation] ou utilisons 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 la touche Entrée

■[3] Nous appliquons à nouveau une transformation.

•[3.1] Nous nous assurons de désactiver [Conserver les proportions].

•[3.2] Nous modifions la hauteur pour obtenir la perspective. Pour la projection isométrique, on utilise souvent 60, mais personnellement, 58 me donne un meilleur résultat pour obtenir un angle de 30°.

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

▼ COMMENT CRÉER DU VOLUME À PARTIR DE CETTE FORME ?

 

■[4] Nous pouvons utiliser la base pour créer du volume très facilement. Nous allons d'abord dupliquer le calque en utilisant l'outil 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 en utilisant le raccourci CTRL + J ou le menu déroulant de [Calque] > [Dupliquer le calque]. Dans ces méthodes, je duplique fréquemment des calques, je vous recommande donc d'utiliser le raccourci clavier pour être plus efficace :D

 

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

•[5.1] Dans l'outil de forme, j'utilise un pas d'angle de 15°, ce 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 configuré le calque supérieur comme référence pour m'aider à remplir, cette étape est facultative.

■ [6] J'utilise le pot de peinture sur le calque inférieur pour remplir les côtés, puis je combine les calques en utilisant le raccourci CTRL + E.

• Avec ces étapes simples, la base de notre objet est prête. Nous pouvons maintenant 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 en 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, je dessine quelques détails comme la texture et les fissures du matériau. J'essaie de casser les bords pour que l'objet paraisse plus organique. ▼

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

En tenant compte de la direction de la lumière et en essayant 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. Il est très amusant d'imaginer et d'expérimenter avec différents matériaux.

 

■ Nous sommes partis d'une tuile, nous lui avons donné du volume et avons ensuite défini un matériau organique en perspective isométrique.

 

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

2.1 | Action automatique

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

 

Vous pouvez les télécharger dans Clip Studio Assets avec les autres outils que j'ai préparés pour le tutoriel. ▼

 

■ [1] Si le panneau des actions automatiques n'est pas visible, nous pouvons l'activer via le 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, devant, côté)

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

■ [3] Nous pouvons utiliser les 3 actions de l'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 sert à créer la base de la perspective 2:1 ▼

■REMARQUE : En raison du manque de décimales et d'inclinaison dans les options de transformation, les formes ne sont pas parfaites. Elles servent néanmoins à gagner du temps et nous pouvons ensuite affiner la base.

■ [4] ASTUCE : Nous pouvons attribuer des raccourcis clavier aux actions automatiques, ce qui nous permet d'être encore plus efficaces et d'optimiser le flux de travail.

 

Nous allons dans [Fichier] [Paramètres de raccourcis (H)] ou utilisons le raccourci CTRL+ALT+SHIFT+K.

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

•[4.2] Nous sélectionnons l'ensemble d'actions isométriques, choisissons l'action à laquelle nous voulons attribuer un raccourci et appuyons sur modifier le 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. :D

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

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

Je vais vous montrer deux techniques différentes.

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

 

•[1.1] Nous configurons le Pas d'angle à 30 pour définir la perspective isométrique de 30° et activons Créer sur le calque d'édition.

 

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

•[1.3] Ensuite, nous en créons une autre vers la gauche pour définir l'autre côté.

 

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

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

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

 

•[2.1] La règle active est celle de couleur violette. Nous pouvons basculer entre chaque règle en utilisant le bouton dans la barre de commandes ou le raccourci clavier CTRL+4.

 

•[2.2] Nous pouvons utiliser le bouton dans 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] Nous dessinons les lignes sans nous soucier qu'elles se croisent.

•[3.2] Nous utilisons la gomme vectorielle pour supprimer les lignes superflues.

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

 

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

■ [4] Pour utiliser les règles et les grilles, il suffit de les faire glisser du panneau des matériaux vers la toile.

 

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

•[4.2] En tirant parti 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, ce qui nous permet de dessiner sans nous restreindre 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 d'abord, parlons de la création de cartes pour les jeux vidéo. ▼

4. Tileset | Tilemaps

Une technique très polyvalente et populaire pour la création de décors dans les jeux vidéo est l'utilisation de Tilesets et de Tilemaps.

 

■ QUE SONT LES TILESETS ?

 

• Un tileset est un ensemble de tuiles ou de "tiles" que nous pouvons utiliser pour créer nos cartes sur une grille formant une "Tilemap". C'est un moyen efficace de créer des cartes et ils sont souvent utilisés dans différents moteurs de jeu comme Godot ou Unity.

 

• Ils sont généralement créés dans un format carré et forment souvent des motifs entre eux, établissant un système modulaire.

▼Je vais vous montrer comment configurer nos fichiers pour travailler avec des tilesets et quelques techniques intéressantes pour créer des scénarios isométriques.

■ Préparation des fichiers :

 

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

 

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

La taille peut varier mais il est généralement plus simple de travailler en format carré. Dans mon cas, 512x512px.

 

•[1.2] Important : Nous allons activer Créer une illustration en mouvement et définir un nombre d'images clés. Cette étape est importante pour le système que j'ai développé.

 

Chaque image clé représentera une tuile ou un carreau. 12 est un bon nombre pour commencer, nous pouvons en ajouter plus si nécessaire.▼

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

•[2.1] Pour voir les images clés, nous allons dans [Fenêtre] > [Chronologie (X)].

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

 

■ [3] Pour pouvoir travailler avec plusieurs calques par tuile ou carreau, 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] Nous définissons une grille guide depuis le menu [Affichage] > [Paramètres de la règle\/grille (N)...]

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

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

■ [5] Pour terminer, nous enregistrons le fichier dans un endroit facilement accessible.

Maintenant, nous allons peindre nos Tuiles. Pour nous assurer que les motifs se répètent correctement, nous pouvons créer un fichier de référence.

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

• [6.1] Nous créons un nouveau fichier. Pour définir la taille, nous allons créer une grille de 9 tuiles, nous multiplions donc la taille du fichier de base par 3. Dans ce cas, 512 x 3 = 1536.

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

•[6.3] Avec l'outil Opération | Objet, nous configurons le motif depuis le sous-menu Propriété de l'outil.

 

•[6.4] Nous configurons la fenêtre pour pouvoir l'utiliser comme référence. Toute modification apportée au fichier Tileset original se reflète dans ce calque 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 à la deuxième image clé ou cellule.

 

•[7.1] Avec le raccourci CTRL+U, j'utilise la correction Teinte\/Saturation\/Luminosité, et je change la teinte pour créer la variante de couleur. C'est une technique très utilisée dans les jeux vidéo pour tirer parti 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é : Dans le sous-menu Propriété de l'outil, nous pouvons sélectionner l'image clé spécifique affichée de l'Objet de fichier.

 

De cette manière, si nous passons de 0 à 1, nous passons de la TUILE 1 à la 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 manière très intéressante et créative d'utiliser cette fonction de Clip Studio Paint :D

4.1 ASTUCE | Motifs ou Patrons

■Je ne suis pas un expert en création de motifs ou de patrons répétitifs, mais je vais partager avec vous quelques méthodes qui me sont utiles pour les peindre.

■REMARQUE : En mars 2020, l'un des thèmes des ASTUCES du mois était les motifs et les patrons. Si vous le souhaitez, vous pouvez consulter les incroyables tutoriels créés par d'autres auteurs de la communauté. Je vous en partage quelques-uns de mes préférés ici. ▼

■[1] Nous allons créer une tuile de "LAVE". La première étape est de peindre la texture que nous voulons, sans nous soucier de la transformer en motif.▼

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

■REMARQUE : Une option est de créer d'abord un croquis de la texture, de la convertir en motif puis de l'affiner, mais dans ce cas, j'ai décidé de réaliser la tuile 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 [Aligner sur la grille] (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 sur 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 déplaçons chaque quart vers le coin opposé.

Nous pouvons maintenir SHIFT enfoncé pour conserver la diagonale. Une fois l'image placée dans le coin, nous utilisons les flèches du clavier pour vérifier que nous l'avons placée au bon pixel.

 

•[3.1] Nous répétons avec les 3 autres parties.

•[3.2] En utilisant CTRL+E, nous fusionnons les calques en un seul.

L'avant et l'après▼ Maintenant, nous devons corriger les jointures du centre pour finaliser la texture.

■[4] Nous commençons à peindre pour corriger les jointures 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 l'image clé correspondant à la TUILE en utilisant l'outil Opération \/ Objet et la palette Propriété de l'outil.

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

■REMARQUE : N'oubliez pas d'enregistrer le fichier (Raccourci CTRL+S) lorsque vous apportez des modifications à la texture pour mettre à jour l'Objet de fichier sur la toile de référence. ("Tileset Check")

■[5] Dans Clip Studio Assets, nous pouvons trouver d'excellents motifs et patrons. Pour les utiliser, il suffit de les faire glisser de la palette de matériaux vers la toile.

 

•[5.1] Pour nous assurer que tout 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 s'ajuste parfaitement aux bords de notre toile.

 

■REMARQUE : Idéalement, nous utilisons les matériaux d'Assets comme base pour nous aider à créer nos Tuiles, puis nous peignons avec 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 sa propre image clé.

 

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

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

Je vais vous présenter quelques techniques pour utiliser le tileset que nous avons créé dans la section précédente et créer des cartes ou des scénarios de manière dynamique.

■[1] Nous créons une nouvelle toile, dans ce cas 1920x1080px.

•[1.1] Nous allons utiliser le matériau de grille et 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 commandes pour repositionner et donner l'échelle appropriée à la Tuile▼

•[2.1] Nous changeons l'image clé dans la palette Propriétés de l'outil pour sélectionner la tuile correcte.

•[2.2] Nous activons Motif pour le transformer en un motif répétitif. De cette manière, 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 une autre tuile en changeant l'image clé.

•[2.4] Dans les options de Motif, nous pouvons choisir comment il se répète. Si nous sélectionnons Horizontal ou vertical, nous allons créer seulement une 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] Nous dupliquons à nouveau, et cette fois-ci, nous changeons la direction du motif.

Ensuite, nous définissons la tuile en modifiant l'image clé.

■[3] Notre carte semble encore plate, nous allons lui donner un peu de profondeur.

Nous pouvons facilement créer de la 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 de notre choix, nous peignons le côté des carreaux.

•[3.2] ASTUCE : Si nous créons des variantes d'une Tuile, nous pouvons utiliser des masques de calque pour créer des fusions et des textures intéressantes.

Nous dupliquons d'abord et changeons l'image clé.

 

•[3.3] En maintenant ALT enfoncé, nous appuyons sur le bouton pour créer un masque de calque, de cette manière nous cachons tout le calque.

•[3.4] En utilisant un pinceau doux, nous peignons pour créer une transition entre les 2 variantes. La couleur révèle et le transparent cache.

•[3.5] Pour finir, 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 avons créé.

Nous créons un nouveau calque sous le groupe.

Ensuite, en maintenant CTRL enfoncé, 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] Nous complétons la partie manquante avec un pinceau.

Nous mettons le calque en mode Multiplication et baissons l'opacité.

•[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 un nouveau calque au-dessus des tuiles d'eau.

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

▼Dans ce cas, j'ai peint sans me soucier de la partie qui se chevauche dans l'eau. Ensuite, j'ai chargé le calque d'eau comme sélection en appuyant sur CTRL+Clic sur la vignette du calque et j'ai effacé ce qui était en trop 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 le calque comme sélection à nouveau, et 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 depuis le menu [Sélectionner] > [Adoucir le bord] et lui donnons une valeur de 40px.

Ensuite, nous remplissons un nouveau calque avec n'importe quelle couleur, car il ne servira que de sélection plus tard.

•[4.4] Nous dupliquons le calque d'eau et le mettons en mode de fusion multiplication.

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

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

▼Si nous comparons, avec l'ombre subtile, nous avons un peu plus de volume. Ce type de détails est simple à réaliser et enrichit l'œuvre.

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

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

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

Ensuite, nous peignons en révélant uniquement 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 en dessous. L'étape suivante est de rastériser et d'appliquer le masque de calque.

Ensuite, nous déplaçons un peu vers le bas pour créer le volume du pont.

(CTRL+U) Teinte\/saturation\/luminosité pour assombrir le calque et pouvoir voir la silhouette.

•[5.3] En suivant la forme de la silhouette, nous peignons manuellement le bord du pont pour lui donner du volume. Nous essayons de définir l'éclairage. (Il n'est pas nécessaire que ce soit 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 à la scène.

▼Voici le pont une fois terminé.

▼En combinant ces techniques, nous pouvons créer divers objets et définir notre scénario ou carte.

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

Sur un calque en mode Lumière crue, j'ai peint quelques effets lumineux pour améliorer l'ambiance avec un aérographe doux.

•[6.1] Je duplique une fois de plus l'objet "tileset" et choisis la Tuile, mais cette fois-ci je désactive Motif, pour n'avoir qu'une seule tuile.

•[6.2] Sur un nouveau calque sous la tuile, 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 la transformation libre. Ensuite, je fais un clic droit et 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 nous soucier de perdre la forme.

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

•[6.5] CTRL+T pour la transformation libre. Je réduis l'objet et définis sa position.

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

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

▼Voici le résultat final de mon exemple. J'espère que vous aurez une idée des possibilités de ce système. En combinant des techniques de peinture manuelle avec les Tilesets, nous pouvons créer une infinité de 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 rastérisons pas les objets fichier, nous pouvons toujours apporter des modifications au Tileset et celles-ci se refléteront dans la composition 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 "eau" par celle de "lave", le reste des ajustements sont presque tous avec Teinte\/saturation\/luminosité (CTRL+U) et en 5 minutes, j'ai une variante environnementale du scénario.

5. Peindre une scène isométrique 2:1

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

■[1] La toile dans cet exemple est en 4K (3840x2160px).

 

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

 

•[1.2] Voici le Tileset que j'ai préparé, pour avoir une palette de Tuiles avec laquelle travailler. Si vous remarquez, j'ai quelques variantes de la Tuile "roches" pour pouvoir générer de la variété.

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

•[1.4] En utilisant les 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 l'une des tuiles "roche" avec l'image clé correcte.

•[2.2] Avec 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 l'esquisse comme référence, je réduis la tuile à l'échelle appropriée.

•[2.4] Sur 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 a 1 de haut x 4 de large.

Ensuite, je regroupe les calques dans un dossier que je nomme Tuile Roche 1 et je lui donne une couleur pour m'organiser.

•[2.5] Je bloque les pixels transparents sur le calque des côtés et commence à peindre les détails, en sélectionnant les couleurs de la tuile avec la touche Alt. Comme c'est une texture de roches, 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 du matériau.

•[2.6] Pour accentuer l'éclairage, je duplique le calque, le mets en mode multiplication et j'en réduis l'opacité, puis j'efface les parties inutiles.

•[2.7] Je charge la tuile comme sélection et, sur un nouveau calque en mode Trame, je peins pour augmenter la luminosité sur le dessus du bloc.

•[2.8] Je crée une copie du dossier et la déplace pour voir comment les blocs se chevauchent. L'union semble un peu forcée, je crée donc un nouveau calque et peins du volume sur les bords pour améliorer la transition entre les blocs. Peu importe si nous sortons un peu de la grille car c'est une texture organique.

•[2.9] Il est important de comprendre comment les blocs se superposent. Pour obtenir l'effet correct, dans le panneau des calques, les blocs qui se trouvent à droite de la toile doivent être en haut des calques. De même, les "rangées" qui vont du bas vers le haut doivent être dans l'ordre.

■REMARQUE : Lorsque j'ai créé les variantes de la tuile "Roche", je me suis assuré de ne modifier que le centre. Par conséquent, en changeant simplement la tuile avec l'image clé, 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 les é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é la teinte pour créer la variante du bloc.

•[3.1] En utilisant CTRL+T sur le dossier, nous jouons avec l'échelle des blocs pour définir facilement la base d'autres éléments de la scène.

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

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

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

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

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

Pour finir, nous regroupons toutes les marches dans un seul dossier.

•[3.7] Nous continuons à créer des copies des blocs de "roches" pour définir la carte. Il n'est pas nécessaire de s'en tenir parfaitement à la grille si en ajustant les positions, nous obtenons une meilleure structure visuelle.

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

•[3.9] Je définis la deuxième rangée, puis je regroupe tous les blocs dans un dossier, de cette manière je peux facilement dupliquer les rangées et compléter le sol.

•[3.10] J'utilise 3 blocs de hauteur pour que le sol de l'araignée soit sur un plan supérieur.

•[3.11] Je termine de compléter le sol, et j'ajuste les tuiles de manière aléatoire pour que ce ne soit pas trop répétitif.

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

Ce type de détails est subtil mais donne vie à la scène, et ne prend pas trop de temps à réaliser.

Ils nous servent également à raconter une histoire ou à expliquer les mécaniques du concept du jeu. Peut-être que certains blocs tombent lorsque le personnage marche dessus ou activent des pièges.

■ Nous complétons le sol de cette scène. Nous pouvons réutiliser les éléments pour créer une infinité de scénarios avec le système de grilles et de blocs.

■[4] Pour intégrer l'escalier aux blocs de roches, je crée un masque de calque dans le groupe et peins avec une couleur transparente pour effacer une partie des bords et éviter qu'ils ne paraissent trop parfaits.

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

•[4.2] Sur un calque en mode multiplication, nous peignons une ombre là où le premier bloc touche le sol en pierre. De cette manière, nous l'intégrons à la scène.

•[4.3] Nous chargeons la forme de la Tuile comme sélection et la remplissons avec la couleur sombre de l'ombre.

En utilisant la grille, nous nous assurons que les ombres sont placées au bon endroit pour ne pas briser l'illusion de la 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 comme sélection et la remplissons sur 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. Finalement, nous regroupons tous les calques et lui 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é à percevoir la hauteur des objets. En utilisant les ombres, nous créons l'illusion de profondeur, il n'est pas nécessaire que ce soit très réaliste.

■[5] Nous continuons à créer les éléments du croquis. L'étape suivante, la rivière de lave.

Les étapes restent très similaires. Je duplique d'abord le tilset.

Je sélectionne la tuile de lave et la place à la position correcte derrière les blocs de roches.

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

En utilisant un masque de calque et une couleur transparente, je cache les parties dont je n'ai pas besoin.

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

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

•[5.3] Nous créons un nouveau calque en mode Lumière forte et lui appliquons un masque d'écrêtage sur les 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. Nous dupliquons d'abord le calque de "Tuile" et le changeons en Tuile de lave.

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

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

•[5.5] Sur 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 en mode Ajouter (Luminosité)

•[5.6] Je duplique le bloc et modifie légèrement les fissures de lave. Pour les intégrer, j'applique à nouveau un masque sur une partie de la base, puis j'ajoute une légère lueur.

Finalement, sur un nouveau calque, je peins manuellement les détails sur la surface de la lave.

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

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

Je n'ai pas grand-chose à expliquer avec ce type d'éléments, nous essayons de maintenir la perspective mais il n'est pas nécessaire d'être parfait. Je peins manuellement avec une variété de pinceaux.

▼J'utilise à nouveau des reflets et des masques pour intégrer les éléments.

Bien que certains éléments puissent paraître complexes à réaliser, nous les divisons simplement en parties et répétons les mêmes étapes, avec patience, pour obtenir le niveau de détail souhaité.

Dès que possible, j'essaie de réutiliser des éléments pour gagner du temps.

•[6.1] Certains éléments sont plus simples à travailler en vue frontale. Nous pouvons les 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'arc de l'entrée du donjon.

•[6.2] CTRL+T pour transformer, en maintenant CTRL enfoncé, je déplace la poignée centrale 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.

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

•[6.3] En utilisant la structure de base, je peins les détails et définis les différents plans, en tenant compte du matériau et de l'éclairage.

Le processus de définition de la base en utilisant d'abord les règles et la grille facilite la création d'objets complexes. Ensuite, il s'agit de peaufiner la pièce avec le style et les détails que nous voulons.

•[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 ajustements d'éclairage.

Sur un calque en mode multiplication, je crée l'ombre comme dans les éléments vus précédemment.

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

Je n'explique pas certains éléments en détail étape par étape car je répète les mêmes techniques. J'espère que cela reste compréhensible.

•[6.6] Une autre option est de créer des guides en vue frontale, puis de les placer en perspective en utilisant l'action automatique que je vous ai partagée. Dans ce cas, je vais créer une fontaine, j'ai donc dessiné 2 cercles et quelques lignes de division.

Je place le guide en perspective (avec des calques séparés pour pouvoir faire des sélections) et avec la 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 fontaine. Ces calques supérieurs nous servent à créer des sélections.

Sur un calque inférieur, je peins le volume en m'aidant des sélections.

•[6.8] Je peins l'ombre interne, et en suivant les lignes guides, je divise la structure en parties.

Pour obtenir la couleur, je remplis le cercle interne sur un calque en mode Lumière forte, je le déplace verticalement vers le bas et j'élimine 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] En utilisant un pinceau que j'ai téléchargé des Assets, je peins la texture de l'eau. Ensuite, en utilisant l'action automatique, je la mets en perspective. J'efface l'excédent en utilisant la sélection du bord interne.

•[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 avec l'aide de guides, dessiner des objets circulaires isométriques n'est pas compliqué.

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

 

Pour le fond du décor, j'ai simplement peint manuellement la structure en utilisant les règles isométriques. Ensuite, je les désactive et j'ajoute des détails avec différents pinceaux.

•[7.1] J'ai peint une paire d'œufs d'araignée monstrueux. J'ai peint le premier puis je l'ai dupliqué, j'ai changé son échelle et modifié quelques détails.

Même s'ils ne sont pas parfaitement en perspective, l'ombre au sol les intègre à la scène.

•[7.2] Pour finaliser ces détails organiques, j'ai peint des toiles d'araignées et un effet lumineux sans trop de détails. Il suffit de suggérer la texture pour créer l'ambiance. Je peux toujours revenir et affiner les petits détails plus tard.

■[8] L'un des avantages de la perspective isométrique est que nous pouvons 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 un pilier.

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

Ensuite, en utilisant les règles, je connecte les bords, et finalement 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 une orbe facilement, je remplis d'abord une sélection circulaire. Je réalise un masque d'écrêtage en utilisant un matériau d'émeraude pour obtenir des détails.

Finalement, j'aplatis les calques et je 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 de la dimension avec les ombres.

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

5.1 Éléments 3D

Une fonction de Clip Studio Paint que j'aime beaucoup, ce sont les calques 3D. Incroyablement utiles pour les utiliser comme référence dans les bandes dessinées, le concept art et pour dessiner des objets sous des angles complexes.

 

■Malheureusement, nous ne pouvons pas sélectionner une vue isométrique de manière simple dans la caméra des calques 3D. Pour résoudre ce problème, j'ai préparé une paire de calques 3D vides, avec la caméra aussi proche que possible d'une vue isométrique. J'ai également partagé ce matériel dans les Assets.

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

Cela nous 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 la toile. L'objet est placé avec la caméra que j'ai configurée précédemment. (Ne la modifiez pas)

 

•[1.2] En utilisant les contrôles du 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 nous assurer une perspective aussi précise que possible.

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

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

•[1.4] Nous supprimons l'objet du calque 3D et répétons les étapes avec d'autres modèles qui nous intéressent.

▼ Avec les divers objets, la scène est déjà complète. Il ne nous reste plus qu'à peindre 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, tout est réalisé avec des pinceaux, et quelques calques dans différents modes de fusion. Si besoin, vous pouvez consulter mon tutoriel sur les modes de fusion.

J'ai d'abord peint le cristal du "point de sauvegarde". 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. Il est important, comme pour les autres objets, de peindre l'ombre en contact avec le sol, de cette manière l'objet s'intègre à la scène.

•[2.2] J'ai décidé de laisser les cristaux colorés pratiquement tels quels. J'ai seulement estompé quelques bords et modifié une partie de l'éclairage. Pour finir, j'ai dupliqué le calque, lui ai appliqué un flou gaussien et l'ai placé en mode trame.

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

J'ai changé sa "bouche", lui ai ajouté une sorte d'yeux et des pattes d'araignée. Une fois que je lui applique l'ombre projetée, il s'intègre beaucoup mieux dans la scène.

•[2.4] Pour peindre le personnage, j'ai simplement divisé les différents éléments en calques et j'ai peint manuellement comme pour le reste des éléments.

•[2.5] Enfin, nous peignons l'araignée. J'ai défini la forme et la texture en dessinant par-dessus le modèle 3D.

J'ai divisé le corps en 3 parties et j'ai travaillé la couleur sur des calques en mode Lumière forte.

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

■[3] Pour finaliser la scène, j'ai peint quelques effets lumineux et magiques. Vous pouvez trouver les méthodes que j'utilise dans mon tutoriel sur les effets magiques.

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

■ Voici le résultat final, du croquis aux effets magiques.

■ Ce qui est intéressant avec l'art isométrique, c'est que nous pouvons déplacer les éléments et créer de nouvelles scènes.

Conclusion

Merci beaucoup d'avoir regardé mon tutoriel.

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

Je sens que certaines parties n'ont pas été expliquées en détail car je répétais les mêmes techniques que dans les étapes précédentes. Excusez-moi si c'est un peu long.

 

■ J'espère que les matériaux que j'ai partagés vous seront utiles. Vous pouvez les appliquer aux illustrations et au design, pas seulement à l'art pour les 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é.