# Ton premier sprite Ouvre l'éditeur, crée un sprite, dessine, puis enregistre et exporte ton travail. _Les raccourcis sont écrits pour Windows et Linux. Sur Mac, utilise ⌘ Cmd là où il est écrit Ctrl, et ⌥ Option pour Alt._ 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](https://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](https://pxstud.io/fr/docs/manual/guides/workspace.md). ## 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. ![La boîte de dialogue Nouveau sprite avec l'onglet de préréglages Vide ouvert, des tailles carrées de 8x8 à 256x256, et les champs Nom, Largeur, Hauteur, Mode colorimétrique, Arrière-plan et Palette à droite](https://pxstud.io/manual/images/start/new-sprite-dialog.light.webp) _La boîte de dialogue Nouveau sprite_ - 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](https://pxstud.io/fr/docs/manual/guides/layers.md#the-background-layer). - **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](https://pxstud.io/fr/docs/manual/reference/tools.md). **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`). > **Attention:** Le travail enregistré dans le navigateur reste dans ce navigateur. Effacer les données de site de ton > navigateur le supprime, et il n'est pas sur tes autres appareils. Télécharge une copie avec > Fichier > Enregistrer sous... pour le mettre à l'abri, ou utilise Sync sur pxstud.io pour garder ton travail dans > ton compte. ## 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](https://pxstud.io/fr/docs/manual/guides/layers.md) : dessine séparément le contour, les couleurs et l'ombrage. - [L'espace de travail](https://pxstud.io/fr/docs/manual/guides/workspace.md) : organise les panneaux comme tu le souhaites. - [Menus](https://pxstud.io/fr/docs/manual/reference/menus.md) : tout ce qui se trouve dans la barre de menus.