Création d'un sprite animé avec Piskel

Piskel est un logiciel utilisable directement dans votre navigateur ou téléchargeable sur leur site.

Il permet de réaliser facilement des grilles de sprites (lutins) pour jeux vidéo, avec une interface simple mais très complète.

Ce qui est intéressant avec Piskel, c’est d’abord la possibilité de travailler avec des "calques" et surtout de pouvoir créer plusieurs "frames" pour exporter au final soit un GIF animé de votre conception, soit une planche de toutes les images dessinées, pour les importer dans un logiciel de conception de jeux.

L’outil est gratuit et sous licence libre.

Aller sur le site Piskel - Free online sprite editor

Pour commencer nous allons donc créer une licorne qui vomit un arc-en-ciel et qui, aulieu de mourir fais caca pendant genre 10 secondes (c'est une idée qui vaut ce qu'elle vaut, je vous l'accorde...)
Alors, on commence par ouvrir le logiciel Piskel, téléchargé au dessus, et on « Resize » le sprite en 50*50px.

Première frame

image licorne1.png (31.4kB)
Clique sur « pen tool » pour commencer à tracer le contour de ton dessin pixel par pixel.
Pour agrandir ou réduire ta zone de dessin, joues avec la molette de ta souris. Une fois que tu as tracé ton dessin, tu va créer un nouveau calque pour la couleur de ton dessin :
Va sur fenêtre « layers » (calques, ou couches) à droite et tu cliques sur + pour créer un nouveau layer.
Sur ce calque, tu vas ajouter la couleur à ton dessin.

Créer un calque te permet de mieux gérer les différentes parties de ton dessin.

Seconde frame

image licorne2.png (30.9kB)
Ensuite, tu vas dupliquer ta Frame. Sur ta frame en haut a gauche tu survoles et cliques sur Duplicate this frame. Cette seconde frame va nous permettre de faire bouger les pattes des licornes vers l’avant.

En dupliquant la 1re frame, tu as copié l’intégralité du dessin (donc les 2 layers)

Tu as donc besoin sur la 2e frame de bouger les jambes vers la droite. Pour cela, tu effaces une partie de la jambe et la refais en la décalant sur la droite.
Ensuite tu vas sur le second layer et tu bouges aussi la couleur des sabots, car comme tu as bougé le contour des pattes, la couleur doit bouger aussi.

Troisième frame

image licorne3.png (30.3kB)
De nouveau, tu vas dupliquer la 1re frame. Cette troisième frame va nous permettre de faire bouger les pattes de la licorne vers l’arrière.
Tu as donc besoin sur la 3ᵉ frame de bouger les jambes vers la gauche.

Pour cela, tu effaces une partie de la jambe et la refais en la décalant sur la gauche.

Ensuite tu vas sur le second layer et tu bouges aussi la couleur des sabots, car comme tu as bougé le contour des pattes, la couleur doit bouger aussi.

Quatrième frame

image Capture3.png (33.2kB)
De nouveau, tu vas dupliquer la 1re frame. Cette quatrième frame va nous permettre de créer le vomi arc-en-ciel
Pour ce faire, tu vas sur le layer 2 et tu créés un arc-en-ciel au niveau de la bouche de la licorne.

Cinquième frame

image Capture4.png (36.1kB)
De nouveau, tu vas dupliquer la 1re frame. Cette cinquième frame va nous permettre de créer le « caca d’attente » (au lieu de perdre et de recommencer au début du niveau, tu dois attendre et regarder la licorne faire caca pendant 10 secondes).

Pour ce faire, tu vas sur le layer 2 et tu créés un caca au niveau de la croupe de la licorne.

Les frames et les calques sont importants pour pouvoir retoucher facilement les différents mouvements de ton dessin, si tu faisais tout le dessin sur un seul et même frame ou layer, tu serais obligé d’effacer a chaque nouvelle idée et surtout tu ne pourrais pas créer une animation.

Voila pour le tutoriel Piskel Licorne, maintenant que tu sais faire la licorne, un monde nouveau s'ouvre à toi!

Menus à gauche de l'écran (partie gauche)

Menu des Outils

image Capture_numrot.png (22.5kB)
1 Pen size / Taille du stylo : Il permet de jouer avec la taille du stylo, il part d'un point de 1px (1 carré) pour arriver a 4px (16 carrés) au maximum.

2 Pen tool / Outil stylo : Il permet de dessiner. C'est avec lui que vous allez créer les "points pixel" qui serviront à construire votre "pixel art".

3 Vertical mirror pen / Stylo miroir vertical : comme le stylo, il permet de dessiner mais cette fois avec un effet miroir vertical (suivant l'axe vertical).
Si vous dessinez avec le stylo miroir à gauche de votre "feuille", le même dessin sera créé symétriquement à droite.
Si vous appuyez simultanément sur la touche CTRL alors que vous dessinez, c'est avec l'axe horizontal que l'effet miroir sera créé.
Et si vous appuyer simultanément sur la touche shift / MAJ c'est avec l'axe horizontal et vertical que vous dessinerez.

4 Paint bucket tool / Outil pot de peinture : Il permet de remplir un carré, un groupe de carré ou le fond de l'image avec la couleur unie de votre choix.

5 Paint all pixels of the same color / Peindre tous les pixels de la même couleur : Il permet de peindre tous les carrés de la même couleur.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les calques.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous dessins / frames.

6 Eraser tool / Outil gomme : Comme son nom l'indique, il permet de gommer. Comme pour l'outil stylo, on fait varier sa taille avec l'outil "Pen size / Taille du stylo".

7 Stroke tool / Outil ligne et diagonale : Il permet de créer des lignes et diagonales en partant d'un point fixe.
En appuyant simultanément sur shift / MAJ, la diagonale ou ligne reste droite.

8 Rectangle tool / Outil rectangle : Il permet de créer le contour d'un rectangle (vous pouvez ensuite le remplir avec l'outil pot de peinture).
En appuyant simultanément sur shift / MAJ, vous maintiendrez un rapport de 1 à 1, cela veut dire que votre rectangle ne sera pas déformé.

9 Circle tool / Outil cercle : Il permet de créer le contour d'un cercle (vous pouvez ensuite le remplir avec l'outil seau de peinture).
En appuyant simultanément sur shift / MAJ, vous maintiendrez un rapport de 1 à 1, cela veut dire que votre cercle sera un vrai cercle et ne sera pas déformé (ovale).

10 Move tool / Outil mouvement : Il permet de déplacer votre dessin.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les calques.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous les dessins / frames.
Si vous appuyer simultanément sur la touche ALT, cela aura pour effet de "cloner" votre dessin.

11 Shape selection / Choix de la forme : Cet outil vous permet de sélectionner et de faire glisser la "forme / sélection" de votre choix.
Si vous appuyer simultanément sur la touche CTRL+C, vous copiez la zone sélectionnée.
Si vous appuyer simultanément sur la touche CTRL+V, vous collez la zone sélectionnée.
Maintenez la touche shift / MAJ pour déplacer le contenu.

12 Rectangle selection / Sélection rectangulaire : Il permet de sélectionner un élément via une forme rectangulaire.
Si vous appuyer simultanément sur la touche CTRL+C, vous copiez la zone sélectionnée.
Si vous appuyer simultanément sur la touche CTRL+V, vous collez la zone sélectionnée.
Maintenez la touche shift / MAJ pour déplacer le contenu.

13 lasso selection / Sélection au lasso : Il permet de sélectionner un élément en créant une forme libre de votre choix. Avec le lasso vous créez vous-même la forme de la zone que vous voulez sélectionner.
Si vous appuyer simultanément sur la touche CTRL+C, vous copiez la zone sélectionnée.
Si vous appuyer simultanément sur la touche CTRL+V, vous collez la zone sélectionnée.
Maintenez la touche shift / MAJ pour déplacer le contenu.

14 Lighten / Éclaircir : Cet outil vous permet d'éclaircir ou d'obscurcir les pixels de votre dessin, il permet aussi de créer une sorte de dégradé.
Si vous appuyer simultanément sur la touche CTRL, vous allez obscurcir la partie souhaitée.
Si vous appuyer simultanément sur la touche shift / MAJ, vous allez appliquer l'effet une seule fois par pixel.

15 Dithering tool / Outil de tramage : Il permet de créer une trame, un damier de couleurs choisies.

16 Color picker / Sélecteur de couleurs : Il permet de sélectionner une couleur pour pouvoir s'en servir sur une autre forme, calque ou dessin.

Autres

L'éditeur de couleur

image Capture_couleur.png (1.2kB)
Editeur de couleur
Il y a 2 carrés de couleur, l'un pour la couleur première et l'autre pour la secondaire, en cliquant sur le carré vous choisissez la couleur que vous souhaitez, soit à l’aide de l’outil Pipette, des panneaux Couleur et Nuancier ou avec les couleurs sous forme de valeur hexadécimale (#000000).

Frame / Cadre

Le cadre / Frame est votre fenêtre de "dessin".
image Captureframe.png (2.8kB)
On peut créer autant de frame que l'on veut, les frames sont comme des calques, ils sont utilisés pour effectuer des opérations telles que la composition d’images multiples, l’ajout de texte à une image ou l’ajout de formes à une image vectorielle.
Il peuvent être déplacés de haut en bas pour choisir leurs niveaux d'importance.
Ils peuvent aussi être dupliqués.
Il faut vraiment les imaginer comme des feuilles de papier calque.
image 450pxCaptureframeg.png (84.3kB)


Pour la partie droite

image CaptureGauche.png (26.5kB)
1 Fenêtre de visualisation : Avec cette fenêtre vous pouvez visualiser en direct votre animation.
Vous pouvez régler la taille de votre animation :
Original size preview / Aperçu du format original
Best size preview / Aperçu du meilleur format
Full size preview / Aperçu du format en taille réelle.

- Toggle Grid / Basculer la grille : Il vous permet de faire apparaitre ou non la grille pour créer votre dessin.
- Open preview in popup / Ouvrir la prévisualisation dans une fenêtre popup: Permet d'ouvrir et de visualiser l'animation dans une nouvelle fenêtre.

2 Toggle onion screen / "Basculer à la visualisation en "couches d'oignon": Permet de visualiser ou non les différents "frames et layers" sur votre fenêtre principale.

3 Curseur FPS : Le curseur permet d'augmenter ou de diminuer la vitesse de votre animation.

4 Layers / Couche : Sensiblement la même chose que Frame, a la différence près que les "dessins" créés avec "layers" sont fixes, ils ne bougeront pas au sein de votre animation.

Partie "Transform"

5 Flip vertically / Basculer verticalement : Il applique un effet miroir vertical à votre dessin.
Si vous appuyez simultanément sur la touche ALT, vous appliquez un effet miroir horizontal.
Si vous appuyez simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous dessins / frames.
Si vous appuyez simultanément sur la touche CTRL, vous appliquerez cet effet à tous les layers .

6 Counter-clockwise rotation / Rotation dans le sens inverse des aiguilles d'une montre : Permet de faire tourner votre "dessin" dans le sens inverse des aiguilles d'une montre.
Si vous appuyer simultanément sur la touche ALT, vous ferez tourner votre dessin dans le sens des aiguilles d'une montre.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous dessins / frames.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les layers.

7 Clone current layer to all frames / Cloner le calque sur toutes les frames / images : Il permet de cloner votre dessin sur toutes les frames que vous avez créées. Attention: il clone la frame active (celle qui est entourée de jaune).

8 Align image to the center / Aligner et centrer votre image : Il permet d'aligner et de centrer correctement votre image.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous les dessins / frames.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les layers.

9 Crop the sprite / recadrer le sprite (zone de dessin) : Cet outil vous permet de recadrer votre zone de dessin, mais attention, l'outil est appliqué sur toutes les frames et layers en même temps.

10 L'outil palette vous permet de prédéfinir des couleurs pour ensuite vous en servir via l'éditeur de couleur.
En cliquant sur le petit icone stylo, vous pouvez gérer la palette, une fenêtre s'ouvre et vous pouvez ajouter ou supprimer et renommer des palettes de couleurs.

Barre de menu

image Captured.png (8.8kB)
- Préférences :
1 Settings / Misc :
Background: Permet de régler la luminosité et le contraste du fond "transparent" de votre sprite / dessin.
Layer opacity : Permet de régler l'opacité et donc la visibilité de vos layers.
Maximum FPS : Permet de régler la vitesse maximum pour le curseur FPS vu ci-dessus.
Color format : Permet de choisir le format de couleur RGB ou HEX.

Settings / Grid (grille):
Enable grid / activer la grille : Permet d'activer ou non la grille pour dessiner les "carrés".
Grid size / taille de la grille : Permet de gérer la taille de la grille en pixel.
Grid spacing / Espacement de la grille : Permet de gérer l'espacement de la grille en pixel.
Grid color / Couleur de la grille : Permet de gérer la couleur de l'espacement de la grille.

Settings / Tile mode ( Mode carrelage):
Enable tile mode / Activer le mode carrelage : Activer ou désactiver le mode carrelage.
Mask opacity / Opacité du masque : Permet de gérer la transparence du mode carrelage.

image Captured.png (8.8kB)
2 Resize / Redimensionner :
Permet de redimensionner votre "dessin".
(widtht/largeur),(height/longueur)
Maintain aspect ratio / Maintenir le rapport hauteur/largeur : Cocher cette case permet de ne pas déformer votre dessin, vous l'agrandissez mais dans des proportions égales au dessin de base.
resize canvas content / redimensionner le contenu du canevas : Permet de redimensionner le contenu du canvas.

Default size / Dimension par défaut : Permet de définir les dimensions par défaut de vos dessins.

image Captured.png (8.8kB)
3 Save / Sauvegarde :
Sprite information : Vous pouvez ici, créer un titre et une description pour votre sprite/dessin

Save offline as file / Enregistrer hors ligne sous forme de fichier : Votre fichier sera enregistré sur votre pc sous le format ".piskel".

Save offline in browser / Enregistrer hors ligne dans votre navigateur :
Save Online : Permet de sauvegarder directement sur le site internet piskelapp.com si vous avez créé un compte utilisateur au préalable.

image Captured.png (8.8kB)
4 Export / Exporter
Scale / Mettre a l'échelle : Permet de mettre à l’échelle en maintenant les proportions (Aspect ratio).
GIF,PNG,ZIP...: permet d'exporter votre dessin au format désiré.

5 Import / Importer :
Load from browser / Importer à partir du navigateur
Load .piskel file / Importer un fichier .piskel depuis votre ordinateur.
Import from picture / Importer une image.
Recover recent sessions / Récupérer les sessions précédentes : Permet de récupérer vos sessions précédentes et travailler dessus.

<img src="https://media.giphy.com/media/GrgdX3VHh9TQ4HSBOt/giphy.gif"></img>


Graphisme Jeux vidéo Logiciel Médiation numérique Piskel Tutoriel Zoomacom