[TUTO] - Configurer Photoshop pour dessiner en Pixel Art

standard: fr

0:00:01.090,0:00:02.990
Bonjour à tous ! J’espère que vous allez
bien.

0:00:02.990,0:00:07.100
Il y a quelques semaines, j’ai participé
au Ludum Dare #37 avec BlackMuffin Studio

0:00:07.100,0:00:11.260
en tant que pixel artist et je me suis dis
qu'une vidéo sur "Comment configurer Photoshop

0:00:11.260,0:00:13.780
pour du pixel art" pourrait être intéressante.

0:00:13.780,0:00:17.621
Je ne vais pas vous faire une démonstration sur les règles du dessin

0:00:17.621,0:00:23.100
en pixel art, mais plus sur la manière dont on congif

0:00:23.100,0:00:24.900
Photoshop pour le pixel art.

0:00:24.900,0:00:29.100
D’ailleurs je vous conseille de regarder
l’excellente vidéo de "Pause Process" qui

0:00:29.100,0:00:31.950
traite du sujet qui vous permettra
de bien comprendre cet art.

0:00:31.950,0:00:35.550
Je vous mets comme d’habitude toutes les
informations dans la barre d’info.

0:00:35.550,0:00:39.390
En attendant, c'est partie pour le tuto !

0:00:39.390,0:00:43.500
Le pixel art est une technique utilisé à
la base pour des machines ne pouvant afficher

0:00:43.500,0:00:45.230
beaucoup de pixels à la fois.

0:00:45.230,0:00:48.390
Pour reproduire ce type de dessins il faut
donc réduire la taille de notre document

0:00:48.390,0:00:49.719
à un nombre assez bas.

0:00:49.719,0:00:53.600
Par exemple prenons 128x128 px.

0:00:53.620,0:00:58.960
Dans la résolution, gardez bien 72 px/pouces
car nous travaillons à destination du numérique.

0:00:58.960,0:01:04.210
Attention à bien mettre votre mode de couleur sur "RGB"

0:01:05.619,0:01:09.719
Maintenant que nous avons notre document,
il faut choisir un outil qui permettra de

0:01:09.719,0:01:11.619
peindre pixel par pixel.

0:01:11.619,0:01:13.600
Vous devez sûrement connaître le pinceau.

0:01:19.600,0:01:24.259
En utilisant ce dernier, Photoshop crée automatiquement
un dégradé entre la zone peinte et la zone

0:01:24.260,0:01:26.850
non peinte afin que le rendus à taille réelle
soit propre.

0:01:28.480,0:01:31.820
Nous, nous allons utiliser le crayon qui est
un sous-outil du pinceau.

0:01:31.829,0:01:37.240
Vous pouvez le sélectionner en faisant un
clic droit ou un clic gauche prolongé.

0:01:43.460,0:01:46.239
Si je fais un trait avec cet outil on voit
bien la difference de rendus.

0:01:46.239,0:01:50.399
Il n'y a plus de dégradé entre zone peinte
et non-peinte, c'est pour ça que l'on voit

0:01:50.400,0:01:52.060
apparaître les pixels.

0:01:52.740,0:01:56.300
Vous aurez aussi besoin de mettre la gomme en mode "pixel art"

0:01:56.300,0:02:00.580
Car actuellement si j'essai d'utiliser la gomme, voici ce qu'il se passe.

0:02:01.940,0:02:09.220
Pour passer la gomme en mode "pixel art", il vous suffit de la passer en mode "crayon".

0:02:12.760,0:02:18.380
Nous avons nos outils, nous avons nos documents,
préparons maintenant notre espace de travail.

0:02:18.380,0:02:19.860
Quand on dessine en pixel art,

0:02:19.860,0:02:23.180
on travaille à une échelle tellement petite
qu’on se retrouve à zoomer complètement

0:02:23.180,0:02:24.180
sur notre modèle.

0:02:24.180,0:02:26.610
Plutôt que de zoomer/dézoomer constamment

0:02:26.610,0:02:30.920
nous allons dupliquer la fenêtre afin
d’avoir 2 vues de notre dessin, zoomé à

0:02:30.920,0:02:34.220
gauche, et taille réelle « in game » à
droite.

0:02:34.220,0:02:40.470
Pour cela, il nous suffit d’aller dans « Fenêtre
> Réorganiser > Nouvelle Fenêtre ».

0:02:40.470,0:02:42.560
Cela va donc dupliquer notre fenêtre.

0:02:44.960,0:02:48.440
Maintenant je n'ai plus qu'à agencer mon espace de travail

0:02:48.480,0:02:53.560
pour afficher nos 2 fenêtres. Et pour cela je vais dans "Réorganiser > 2 vignettes verticales".

0:02:59.920,0:03:04.000
Si je dessine sur ma fenêtre de gauche, ma
fenêtre de droite sera automatiquement mise

0:03:04.000,0:03:06.080
à jour car c’est en fait le même document.

0:03:07.600,0:03:09.920
Dernière chose à configurer, c'est le "re -échantillonnage".

0:03:10.480,0:03:13.760
Une fois votre dessin fait, vous allez peut-être vouloir agrandir la résolution de votre image.

0:03:13.760,0:03:17.760
Ici par exemple, mon image est zoomée à 300%.

0:03:17.760,0:03:22.800
Mon image en taille réelle ressemblerait plutôt à ça.

0:03:22.800,0:03:28.960
Si je veux l'agrandir il me suffirait de changer la taille de mon image en faisant image > taille de l'image.

0:03:28.960,0:03:31.840
Par exemple en 400x400px.

0:03:33.840,0:03:38.640
Je valide, et là évidemment, on se rend compte que Photoshop

0:03:38.640,0:03:44.480
me floutte les bords de mes pixels, tout simplement car il doit créer les pixels manquants.

0:03:45.240,0:03:48.360
Pour régler le problème il faut donc changer le re-échantillonage.

0:03:48.360,0:03:50.400
Donc on va revenir en arrière

0:03:50.400,0:03:52.400
et on va faire "image > taille de l'image".

0:03:52.400,0:03:59.140
Et ici "re-échantillonage : Au plus proche (contour net).

0:04:00.060,0:04:04.020
Donc je mets 400x400 px

0:04:04.020,0:04:05.340
Et là :

0:04:06.240,0:04:07.700
Mes bords sont bien nets

0:04:07.960,0:04:11.420
Si je regarde en 100%, mon pixel art est beaucoup plus grand

0:04:12.280,0:04:14.020
Et, il est net.

0:04:14.020,0:04:17.520
Alors vous allez avoir le même problème si vous utilisez les objets dynamiques.

0:04:17.520,0:04:21.260
Par exemple, si ici je le convertis en objet dynamique

0:04:21.720,0:04:27.440
Et que je décide de le réduire de taille par exemple ici de 50%

0:04:28.700,0:04:29.420
Et que je valide.

0:04:30.260,0:04:33.760
On a exactement le même problème par ce que notre objet dynamique

0:04:33.800,0:04:37.360
est interprété comme étant un dessin normal donc il doit floutter les bords.

0:04:37.360,0:04:41.940
Alors pour changer ça, il suffit juste d'aller dans les préférences de Photoshop

0:04:45.920,0:04:50.880
Préférences qui sont ici sur Mac, sinon vous avez le raccourcis "Ctrl K"

0:04:52.780,0:04:56.220
Et vous allez dans "Général" et ici "interpolation de l'image"

0:04:56.220,0:05:01.640
Vous avez à nouveau ce bilinéaire qu'on veut changer par "Au plus proche : conserve les contours nets".

0:05:01.640,0:05:05.240
Alors là il va falloir revenir en arrière,

0:05:05.240,0:05:08.680
et refaire la même manipulation.

0:05:08.680,0:05:11.700
50% et 50%

0:05:11.700,0:05:15.520
Et valider et là il me conserve bien les contours nets.

0:05:15.520,0:05:19.260
Alors évidemment quand vous repassez à du dessin classique pensez bien

0:05:19.260,0:05:23.320
à changer ces préférences et les remettre sur "bilinéaire".

0:05:23.320,0:05:25.320
Je crois que c'est "bilinéaire" de base d'ailleurs.

0:05:26.340,0:05:27.960
Histoire de pas avoir ce problème là.

0:05:32.360,0:05:36.020
C'est tout du coup pour aujourd'hui, j'espère que cette vidéo vous aura apporté quelque chose

0:05:36.620,0:05:40.680
Dans tous les cas n'hésitez pas à mettre dans les commentaires si vous voulez que

0:05:40.680,0:05:42.460
je développe un peu plus de vidéos sur le pixel art qui est quand même

0:05:42.460,0:05:46.920
une branche vraiment différente du digital painting.

0:05:46.920,0:05:48.920
Hésitez pas dans tous les cas, et je vous dis à la semaine prochaine !