Ton premier sprite

Ce tutoriel t'accompagne pour créer un petit sprite du début à la fin : le créer, dessiner, annuler les erreurs et en sortir un PNG. Compte environ cinq minutes.

Ouvrir l'éditeur

Va sur app.pxstud.io. Il n'y a rien à installer et aucun compte à créer : l'éditeur démarre avec un projet appelé « Projet sans titre » qui contient un sprite vierge, « Sans titre 1 » (64×64 pixels, transparent, avec une palette de départ de 24 couleurs).

La disposition par défaut comprend :

• la barre de menus tout en haut ;
• la palette, le sélecteur de couleur et les couleurs de premier plan et d'arrière-plan à gauche ;
• la barre d'options d'outil, le canevas et la chronologie au milieu ;
• la barre d'outils à droite.

Sur un téléphone ou dans une petite fenêtre, l'éditeur utilise à la place une disposition compacte, avec les panneaux latéraux repliés en onglets. Tout est toujours là ; voir L'espace de travail.

Créer un nouveau sprite

Choisis Fichier > Nouveau sprite... (Ctrl+Alt+N), ou clique sur + à la fin des onglets de sprite. La boîte de dialogue Nouveau sprite s'ouvre sur 64×64.

• Les Préréglages en haut renseignent des tailles courantes : Vide (carrés et écrans de jeu), Réseaux sociaux (YouTube, Instagram et plus), Consoles (les écrans natifs de systèmes classiques et de consoles imaginaires comme PICO-8), Boutiques (Steam, itch.io et les boutiques d'applications) et Récents (les tailles que tu as utilisées).
• Pour les tailles des réseaux sociaux et des boutiques, une ligne Taille en pixels propose des canevas plus petits qui s'agrandissent exactement. Choisis « 320x180 ×4 », dessine en 320×180 et exporte à 400 % pour obtenir une image nette de 1280×720.
• Largeur et Hauteur fixent la taille toi-même.
• Mode colorimétrique : Couleur RGBA (n'importe quelle couleur, avec transparence), Niveaux de gris ou Couleurs indexées (chaque pixel est l'une des couleurs de la palette).
• Arrière-plan : Transparent, Blanc ou ta couleur d'arrière-plan. Un arrière-plan non transparent devient un calque Arrière-plan.
• Palette démarre le sprite avec la palette par défaut, l'une de Mes palettes ou une palette intégrée.

Clique sur Créer. Le sprite s'ouvre dans un nouvel onglet, dans le projet actuel.

Dessiner

1. Choisis une couleur : clique sur un échantillon de la palette pour en faire la couleur de premier plan, ou fais un clic droit dessus pour en faire la couleur d'arrière-plan. Appuie sur X pour échanger les deux.
2. Choisis le Crayon (B) et fais glisser sur le canevas. Le bouton droit de la souris dessine avec la couleur d'arrière-plan.
3. Essaie le Pot de peinture (G) pour remplir une zone, le Rectangle (U) pour les boîtes, et la Gomme (E) pour effacer des pixels. Maintenir Alt au-dessus du canevas capte une couleur avec la Pipette.

Chaque outil est décrit dans la référence des Outils.

Annule avec Ctrl+Z et rétablis avec Ctrl+Shift+Z ou Ctrl+Y. Chaque sprite a son propre historique des annulations, et le bouton d'historique en dessous dans la barre d'outils (ou Édition > Historique des annulations) montre chaque étape sous forme d'arbre pour que tu puisses revenir à n'importe laquelle, y compris des étapes que tu as annulées puis remplacées par autre chose.

Se déplacer

• Zoome avec la molette de la souris ou en pinçant sur un trackpad (le zoom se fait autour du pointeur), ou avec Ctrl+= et Ctrl+-. Ctrl+Shift+0 fait tenir tout le sprite dans la vue.
• Déplace la vue avec un défilement à deux doigts sur le trackpad, le bouton central de la souris, ou la Main (H).
• Sur un écran tactile, un doigt dessine et deux doigts pincent pour zoomer et déplacer la vue. Touche avec deux doigts pour annuler, ou avec trois pour rétablir.

Enregistrer

Tu n'as pas besoin d'enregistrer : chaque modification est conservée dans ton navigateur au fur et à mesure, et l'en-tête affiche Enregistré localement dès que c'est fait. Ferme l'onglet et reviens plus tard, et ton projet, ses sprites et les onglets que tu avais ouverts sont toujours là. L'éditeur fonctionne aussi hors ligne une fois que tu l'as ouvert.

Tu peux aussi installer l'éditeur comme application, avec sa propre fenêtre et son icône : dans Chrome, Edge et d'autres navigateurs Chromium, utilise l'icône d'installation à la fin de la barre d'adresse ; sur iPhone et iPad, touche Partager, puis Sur l'écran d'accueil. Sur un ordinateur ou un téléphone Android, l'application et l'onglet du navigateur partagent le même travail. Sur iPhone et iPad, l'application de l'écran d'accueil garde sa propre copie, distincte de celle de Safari : connecte-toi à Sync dans les deux pour avoir les mêmes sprites.

• Fichier > Enregistrer (Ctrl+S) enregistre tout de suite au lieu d'attendre un instant.
• Fichier > Enregistrer sous... (Ctrl+Shift+S) télécharge le sprite sous forme de fichier .pxstudio, une copie que tu peux conserver, partager, ou rouvrir avec Fichier > Ouvrir... (Ctrl+O).

Exporter un PNG

Choisis Fichier > Exporter... (Ctrl+Alt+Shift+S). La boîte de dialogue affiche un aperçu en direct du fichier que tu obtiendras.

• Type : PNG, GIF animé, PNG animé, Feuille de sprites, Fichier Aseprite, WebP, Vidéo MP4 et plus.
• Redimensionner : agrandis l'image par paliers entiers (100 % à 1600 %) pour que chaque pixel reste un carré net. Le pixel art se dessine généralement petit et s'exporte grand.
• Images : toutes, seulement l'image courante, ou celles d'une étiquette.

Clique sur Exporter et le fichier se télécharge.

Trouver n'importe quelle commande

Appuie sur Ctrl+K pour ouvrir la palette de commandes et tape ce que tu veux (« flip », « onion », « export »). Elle liste chaque commande avec son menu et son raccourci, et celles que tu as utilisées récemment passent en premier.

Ensuite

• Calques : dessine séparément le contour, les couleurs et l'ombrage.
• L'espace de travail : organise les panneaux comme tu le souhaites.
• Menus : tout ce qui se trouve dans la barre de menus.