Introduction

Bonjour ! Je m'appelle Hira Karmachela. À cette occasion, je vais partager mon expérience pour créer du pixel art rétro animé pour un écran de démarrage de jeu en utilisant Clip Studio Paint.

 

J'espère que ce billet sera un conseil intéressant pour ceux d'entre vous qui cherchent à créer du pixel art et du design rétro avec CSP.

À propos du design rétro

Le rétro est un style de design qui était à la mode dans les années 70 à 90. Le rétro est différent du style vintage, connu depuis longtemps. Le style rétro a une impression contemporaine et même futuriste pour son époque. La caractéristique unique du rétro peut être observée par la sélection de couleurs plus scintillantes, également connues sous le nom de couleurs néon. Les styles de design rétro se sont développés à cette époque, parallèlement à l'essor du disco, des fêtes et du style de vie sportif.

 

À la même époque, les jeux vidéo ont été développés avec des graphiques à basse résolution, ce qui est maintenant connu sous le nom de pixel art. C'est ce qui m'intéresse pour donner des conseils sur la création de pixel art dans un style rétro.

Configuration de la toile pour le pixel art

Commençons ! Ouvrez Clip Studio Paint puis créez une nouvelle toile. L'œuvre finale que nous allons créer mesurera 1280px par 720px, mais pour créer du pixel art, nous n'avons besoin que de créer 10% de cette taille. Les dimensions de la toile dont nous avons besoin sont donc de 128px par 72px.

Ensuite, nous devons configurer la grille pour faciliter le dessin de pixels. Allez dans Affichage > Grille.

 

Maintenant, nous pouvons le voir sur la toile. Mais nous devons encore ajuster la taille de la grille. Allez dans Affichage > Paramètres de la grille/règle. Définissez l'origine au centre et réglez l'Espacement (D) et le Nombre de divisions à 1.

Palette de couleurs rétro

Avant de commencer à assembler les pixels, nous devons d'abord créer une palette de couleurs qui correspond au style rétro. Créez un nouveau calque pour en faire une palette, nommez le calque "palette rétro".

Ensuite, double-cliquez sur la couleur de premier plan dans la Boîte à outils pour ouvrir les paramètres de couleur. La première couleur que nous allons créer est le "Rose chaud". Dans le champ HEX, entrez le code "ff69b4". Ensuite, brossez sur la toile.

Voici les couleurs de la palette rétro dont nous avons besoin.

Pour le reste, nous avons toujours besoin de noir et blanc que nous pouvons prendre dans le panneau de palette standard.

Configuration des outils pour le pixel art

OK ! Il existe plusieurs outils que nous pouvons utiliser pour créer du pixel art avec des paramètres spéciaux. Le premier outil, nous pouvons utiliser l'"Outil Figure" comme les outils de lignes, de courbes et de formes pour créer des objets pixel précis.

Pour utiliser l'outil Figure afin de créer du pixel art, nous devons désactiver la fonction Anti-Aliasing. L'anti-crénelage est une fonction qui rend les bords des objets d'image numériques lisses en ajoutant et en manipulant la couleur des pixels d'échantillon autour d'eux.

Avec l'anti-crénelage, le pixel art n'aura pas l'air bon. Nous devons donc désactiver cette fonction dans le panneau de propriétés de l'outil à gauche. Dans la section Anti-crénelage, il y a plusieurs niveaux, sélectionnez "Aucun".

Deuxième outil, nous pouvons utiliser l'"Outil Plume" avec les sous-outils Marqueur et Stylo à points. Ce type de stylo produira un dessin au trait d'une épaisseur de 1px afin que nous puissions facilement créer des objets pixel organiques.

Troisième outil, nous pouvons utiliser l'"Outil Remplir" pour remplir facilement les zones de pixels. Sélectionnez le type Référencer d'autres calques afin que nous puissions remplir les zones qui se chevauchent même si ce sont des calques différents. Ensuite, dans les propriétés de l'outil, décochez Échelle de zone. Cette fonction est presque similaire à l'anti-crénelage qui produit du bruit sur les objets pixel.

Quatrième outil, bien sûr, nous avons besoin de l'"Outil Gomme" pour effacer les pixels inutiles sur le travail. Sélectionnez le type Vecteur pour effacer les pixels sans laisser de trace.

 

OK ! Le reste, nous pouvons utiliser d'autres outils selon les besoins.

Arrière-plan rétro

Maintenant, faisons un festin de pixels. Nous commençons par créer l'arrière-plan de l'écran de démarrage que nous allons créer, bien sûr dans un style rétro.

Je divise la toile avec une ligne de 1px d'épaisseur comme horizon séparant la zone du ciel et du sol.

Ensuite, utilisez l'"Outil Pipette" pour prendre la couleur de la palette de calques que nous avons créée précédemment. J'ai rempli le ciel avec la couleur Améthyste et la zone du sol avec la couleur Carmin.

Maintenant, créez un nouveau calque, nous allons créer l'objet coucher de soleil qui est typique du célèbre design rétro. Utilisez l'outil de forme ellipse et faites un cercle en maintenant la touche "Maj" enfoncée sur le clavier pour que la forme soit proportionnelle.

Utilisez l'outil gomme pour créer des rayures sur le coucher de soleil. Vous pouvez imiter le motif comme je l'ai fait.

Maintenant, créez un nouveau calque, nous allons décorer l'arrière-plan avec une image de silhouette de montagnes. Utilisez l'outil de ligne avec du noir pour dessiner les montagnes à droite et à gauche de l'image du coucher de soleil.

Remplissez les montagnes avec du noir puis changez l'opacité du calque à 50%.

Créez un nouveau calque, nous allons ajouter l'image de silhouette des bâtiments devant le coucher de soleil. Cette fois, j'utilise un stylo à points.

Décorez l'image du bâtiment avec quelques pixels colorés comme des lumières.

Maintenant, nous passons à la zone du sol, créons un nouveau calque pour créer un maillage sur le sol. Encore une fois, j'utilise l'outil de ligne avec la couleur Bleu Turquoise pour réaliser un design précis.

Tracez la ligne en diagonale en vous appuyant sur un seul point pour la perspective.

Copiez ce calque, puis allez dans Édition > Transformer > Retourner horizontalement. Positionnez le maillage de manière à ce qu'il soit symétrique sur la toile. Ensuite, sélectionnez le calque de maillage et la copie, allez dans Calque > Fusionner les calques sélectionnés.

Maintenant, faites des lignes horizontales à travers les lignes diagonales qui ont été faites pour créer une image maillée.

Environnement de rue rétro

Ensuite, nous créons des objets pour l'environnement. Nous allons créer une atmosphère de rue rétro. C'est simple, je vais faire des marquages routiers et une ligne de palmiers sur les accotements gauche et droit de la route.

 

Créez un dossier de calques pour collecter les calques des objets de l'environnement. Créez un nouveau calque pour créer un chemin.

Maintenant, remplissez l'intersection de la forme qui forme le chemin, dans l'image avec du jaune électrique. Changez l'opacité du calque à 50%.

Créez un nouveau calque pour créer des marquages routiers. Faites des marquages routiers blancs à l'aide de l'outil ligne.

Ensuite, créez un autre nouveau calque pour faire un palmier. Utilisez l'outil stylo à points pour le faire. Faites-le symétrique à droite et à gauche.

Objet voiture rétro

OK ! Il est maintenant temps de créer le modèle principal. Créez un nouveau calque pour l'objet voiture rétro. Utilisez un stylo à points pour le dessiner.

Créez un nouveau calque au-dessus du calque de la voiture, utilisez du noir pour créer une ombre sur la surface du modèle de voiture. Changez l'opacité du calque à 50%. Ensuite, fusionnez le calque avec le calque de la voiture.

En complément, faites une ombre sous la voiture sur un nouveau calque. Changez l'opacité du calque à 50%.

Processus d'animation

Il est maintenant temps de donner vie à la scène. Il y a deux parties que nous allons animer, à savoir l'environnement de la rue et les lumières des bâtiments.

 

Pour cela, préparez le panneau de la timeline. Allez dans Fenêtre > cochez Timeline. Vous trouverez le panneau de la timeline apparaissant en bas de l'écran.

Dans le panneau Timeline, cliquez sur Nouvelle timeline. Ensuite, un nouveau réglage de timeline apparaîtra, remplissez le nom de la timeline. Définissez la fréquence d'images et le temps de lecture sur 24. Scène et prise au numéro 1 et ligne de division au numéro 6. Ensuite, changez l'interpolation d'image en Bords durs.

Pour créer une animation, nous avons besoin d'un dossier d'animation qui contient des calques spéciaux qui seront liés à la cellule d'animation.

 

Pour cela, cliquez sur Nouveau dossier d'animation. Le dossier d'animation apparaîtra alors en haut dans le panneau Calques. Renommez le dossier en "Animation". Actuellement, le dossier d'animation est vide. Nous devons traiter les modèles qui ont été réalisés pour les compiler et en faire des cellules animées.

Sélectionnez tous les calques de modèle, de la voiture rétro au calque d'arrière-plan. Vous pouvez exclure la palette de calques et l'enregistrer en bas. Ensuite, allez dans Calque > Créer un dossier et insérer un calque. Toutes les couches sélectionnées seront alors regroupées dans un seul dossier. Renommez le dossier en "Compilation".

Copiez le dossier Compilation et renommez le dossier copié en "cel_01". Ensuite, allez dans Calque > Convertir le calque (H), de sorte que le dossier cel_01 se transforme en un calque d'unité. Faites glisser le calque cel_01 dans le dossier Animation.

Dans le panneau de la timeline, assurez-vous de sélectionner le cadre numéro 1 marqué en rouge pour chaque cadre sélectionné, puis cliquez sur Spécifier les cellules. Il vous sera demandé de sélectionner le calque qui sera lié à la cellule. Sélectionnez cel_01.

Pour créer la cellule suivante, faites de même. Copiez le dossier Compilation puis renommez la copie en "cel_02". Avant d'être converti en calque unitaire, nous devons transformer certains des modèles de ce dossier pour créer l'illusion de mouvement.

Maintenant, sélectionnez le calque de marquage routier dans le dossier cel_02. Nous allons modifier l'image de manière à ce que les marquages routiers semblent avancer vers le bas de la toile. Il suffit de supprimer ou d'ajouter des pixels dans certaines parties.

Au fur et à mesure que les marquages routiers se déplacent, les palmiers doivent également se décaler vers le bas de la toile. D'un point de vue logique, l'objet qui s'approche de la vue semblera plus grand. Ainsi, en se déplaçant, le palmier a dû être agrandi.

 

Sélectionnez le calque du palmier, puis allez dans Édition > Transformer > Transformation libre. Dans les propriétés de l'outil à gauche, modifiez le paramètre de la méthode d'interpolation en Bords durs afin que la mise à l'échelle ne provoque pas de bruit de pixels.

Maintenant, sélectionnez le calque du bâtiment, modifiez la décoration des lumières de manière à ce qu'elles semblent clignoter.

Ensuite, sélectionnez le dossier cel_02. Allez dans Calque > Convertir le calque (H). Faites glisser le calque cel_02 dans le dossier Animation. Sélectionnez le cadre numéro 3 dans la timeline puis cliquez sur Spécifier les cellules. Sélectionnez cel_02. Dans cette animation, je vais définir la cellule toutes les 2 images pour un temps de lecture de 24.

Sélectionnez le cadre numéro 3 dans la timeline, puis cliquez sur Spécifier les cellules. Sélectionnez cel_02.

Dans cette animation, je vais définir la cellule toutes les 2 images pour un temps de lecture de 24.

 

Pour les cellules suivantes, veuillez faire la même chose en modifiant la transformation continue de manière à produire l'illusion de mouvement.

Rendu et publication

OK ! J'ai terminé de composer et de remplir toutes les 2 images avec la cellule animée pour un total de 24 images.

Avant de rendre et de publier cette animation. Permettez-moi de vous rappeler que cette animation a des dimensions de 128px par 72px. Donc, si nous la rendons immédiatement, le résultat que nous pourrons voir sera de cette taille.

Pour cela, nous devons d'abord la redimensionner. Allez dans Édition > Changer la résolution de l'image. La fenêtre de réglage de la résolution apparaîtra.

Changez la largeur à 1280px et la hauteur à 720px. Ensuite, changez la méthode d'interpolation en Bords durs. L'image sera alors agrandie sans détruire l'agencement des pixels.

 

Maintenant, nous allons rendre cette animation. Si vous avez besoin d'un résultat animé qui peut être visualisé avec la fonction de boucle, alors nous devrions l'exporter au format GIF animé. Allez dans Fichier > Exporter l'animation > GIF animé. Spécifiez un répertoire de stockage.

La fenêtre de rendu apparaîtra, changez la largeur à 1280px et la hauteur à 720px.

Cependant, dans certains projets de jeu. Généralement, le développeur demande que l'écran de démarrage soit présenté en séquences d'images. Cela est dû au fait que l'animation sera créée à l'aide d'un script de programmation. Pour cela, nous pouvons aller dans Fichier > Exporter l'animation > sélectionner Séquence d'images.

La fenêtre des paramètres de rendu apparaîtra. Spécifiez un répertoire de stockage. Sélectionnez le format PNG et la case à cocher Exporter les images.

 

OK ! C'est tout ce que je peux partager. J'espère que cela vous sera utile et veuillez me soutenir pour que je puisse créer plus de conseils.

Abonnez-vous à ma chaîne YouTube :