Ressources Magic Makers

Pixel Art

Tuto PiskelApp

Outil en ligne de dessin en pixel. Permet de créer des dessins fixes (.png) ou animés (.gif)

-> Lien vers l’outil : https://www.piskelapp.com/

L'interface globale

Les outils de dessin

 

1. Choix de la taille des pixels

2. Stylo (outil de dessin main levée)

3.Miroir pour dessiner en symétrie

4.Seau de peinture (pour tous les pixel de la même couleur qui touchent celui sélectionné)

5. Peinture (pour tous les pixel de la même couleur que celui sélectionné)

6. Gomme

7. Ligne droite

8. Tracer un rectangle

9. Tracer un cercle

10. Sélectionner

11. Sélectionner une forme pour la bouger

12. Sélection de forme rectangulaire pour bouger les pixel

13. Sélection en mode lasso pour bouger les pixel

14. Effet lumineux sur le pixel

15. Colorier en damier

16. Sélectionner une couleur cliquée avec cet outil

17. Choix des couleurs

 

Les dessins / les “frame” / les étapes du .gif

Il est possible d’ajouter simplement une nouvelle “page” de dessin en cliquant sur “add new frame”

Il est aussi possible de dupliquer (en bas à droite du dessin) une image pour la répliquer et la modifier

on peut supprimer une image en cliquant sur l’icône “poubelle”

La pelure d’oignon (sous l’écran de visualisation du gif, en haut à droite de l’écran)

La pelure d’oignon, c’est un peu l’outil magique de PiskelApp : quand elle est activée (jaune) chaque frame/image comprend la trace en transparence de l’image/frame précédente.

Cela permet de créer des animations frame par frame, en bougeant petit à petit les lignes de son dessin (par exemple, pour faire bouger un personnage)

 

Elle est indispensable lorsqu’on crée un .gif afin de travailler les mouvements étape par étape (un peu comme dans un flipbook ou lorsqu’on crée un dessin animé à l’ancienne)

Voici ce que ça donne :

Sauvegarder & Exporter

En cliquant sur la deuxième icône en partant du bas : il est possible de visualiser la taille du gif et de le télécharger.

Vous pouvez exporter en plusieurs formats. Ceux qu’on utilise :

Pour les télécharger, on clique sur “Download” et on choisit le dossier local sur lequel on veut sauvegarder nos fichiers.

Resizer / re-dimensionner

On peut aussi redimensionner notre image, afin qu’elle soit + ou – grande que ce qu’on a créé sur piskelapp (par exemple pour la mettre ensuite dans un projet Scratch). Il faut souvent l’agrandir.

ATTENTION : si elle est très grande, Scratch aura du mal à l’uploader !

Exemple de modification de la taille du dessin :

 

Astuces Pixel Art

Pour un meilleur rendu, tu peux travailler sur plusieurs aspects de ton dessin :

Perspective

La perspective qu’est-ce que c’est ?

C’est la représentation d’un espace et de ce qu’il contient en fonction de lignes de fuites. N’ayez pas peur d’elles, ce sont des lignes qui sont là pour vous aider ! Pour les vues qui nous intéressent pour nos jeux (à savoir planométrique ou vue rpg du dessus) on aura pas besoin de trop s’embêter !

Le plus simple est d’utiliser la vue RPG du dessus ! Elle est très facile à réaliser puisque globalement vous ferez les personnages de face (ou de côté) et les éléments de décors et autres objets vue de haut (ou de face surtout pour un jeu de combat ou plateformer) !

 

Lumière et ombres

Rajouter de l’ombre et de la lumière à votre personnage ou vos objets peut vraiment améliorer votre dessin ! Et le mieux dans tout ça.. C’est qu’il suffit de pas grand chose ! Voyons ça !

Nous avons un petit slime tout bête mais un peu trop simple !

Il manque un peu de volume… Mais comment faire ?

La première chose à faire est de déterminer d’où vient votre lumière ! Si c’est le soleil ou une lampe au plafond, elle viendra du haut !

D’ailleurs petit conseil… Essayer de ne pas faire vos ombres avec du noir ! Mais avec une autre couleur comme du bleu, du rouge, ou du violet ! Vos dessins n’en seront que plus vivant !

Coloré le contour de votre personnage est aussi un bon moyen de donner plus de volume à votre création !

Amusez-vous avec les couleurs et les lumières !

 

Palette de couleurs

Quand on commence à créer on a tendance à soit trop se limiter dans nos choix de couleur ou alors à partir très vite très loin et se retrouver avec beaaaaucoup trop de couleur !

Il faut trouver le juste milieu ! Pour ça il peut être intéressant de réfléchir à votre palette de couleur dès le début ! Votre personnage est vert ? Très bien ! Il y aura donc le vert de base, le vert pour l’ombre, et le vert pour la lumière ! Le blanc et le noir sont des indispensables !

Dernière chose, si vous avez plusieurs éléments de la même couleur, essayez de réutiliser une palette déjà faite pour ! Par exemple, mon petit slime est vert, si je fais un buisson, à moins que ce soit un buisson spécial, je peux réutiliser la même palette !

Le côté pratique de ces palettes de couleurs, c’est qu’il est facile de les modifier ensuite !

Voici un petit slime d’eau par exemple ! Ça ne m’a pris que quelques cliques !

Texture

Pour cette partie je vais vous présenter deux outils forts sympathiques !

Tout d’abord le “dithering tool”. Choisissez deux couleurs et hop là !

Très pratique pour faire des ombres ou des lumières moins brutes ou encore des motifs !

Enfin nous avons le “lighten/darken tool” !!

Si vous maintenez contrôle (ctrl) en même temps vous allez “ombrer” la couleur sur laquelle votre souris est ! Sinon ça va “l’éclairer” ! Ça peut être très pratique si vous voulez faire quelque chose de réaliste, une texture d’arbre ou de pierre, etc…

Notez juste que si ensuite vous voulez changer les couleurs ce sera plus compliqué que si vous aviez une palette de couleur simple !

Tips pour créer son décor en Pixel Art

On va d’abord poser sur papier notre idée de décor. On va ensuite le décomposer en plans et commencer par le dernier (= le fond) notre dessin  :

Tips : Si tu veux que certains éléments apparaissent devant les personnages dans Scratch, tu peux les créer séparement.

Ressources pour aller plus loin

Pour trouver encore plus d’astuces et conseils sur le Pixel Art, tu peux regarder ce lien.

Tu pourras notamment découvrir comment créer un effet ‘brillant’, de la fumée ou encore comment animer une marche !

Mais attention ces ressources sont en anglais !!