# Dein erster Sprite Öffne den Editor, erstelle einen Sprite, zeichne und speichere und exportiere deine Arbeit. _Die Tastenkürzel sind für Windows und Linux notiert. Auf einem Mac nimmst du ⌘ Cmd statt Ctrl und ⌥ Option statt Alt._ Hier erstellst du einen kleinen Sprite von Anfang bis Ende: anlegen, zeichnen, Fehler rückgängig machen und ein PNG herausbekommen. Das dauert etwa fünf Minuten. ## Den Editor öffnen Geh zu [app.pxstud.io](https://app.pxstud.io). Du musst nichts installieren und kein Konto erstellen: Der Editor startet mit einem Projekt namens „Unbenanntes Projekt“, das einen leeren Sprite enthält, „Unbenannt 1“ (64×64 Pixel, transparent, mit einer Start-Palette aus 24 Farben). Das Standard-Layout besteht aus: - der **Menüleiste** ganz oben; - der **Palette**, der **Farbauswahl** und den **Vorder-/Hintergrundfarben** links; - der Leiste der **Werkzeugoptionen**, der **Leinwand** und der **Zeitleiste** in der Mitte; - der **Werkzeugleiste** rechts. Auf einem Handy oder in einem kleinen Fenster verwendet der Editor stattdessen ein kompaktes Layout, bei dem die seitlichen Bedienfelder in Tabs zusammengefasst sind. Alles ist weiterhin da; siehe [Der Arbeitsbereich](https://pxstud.io/de/docs/manual/guides/workspace.md). ## Einen neuen Sprite erstellen Wähle Datei > Neuer Sprite... (`Ctrl+Alt+N`) oder klick auf **+** am Ende der Sprite-Tabs. Der Dialog Neuer Sprite öffnet sich mit 64×64. ![Der Dialog Neuer Sprite mit geöffnetem Preset-Tab Leer, quadratischen Größen von 8x8 bis 256x256 und den Feldern Name, Breite, Höhe, Farbmodus, Hintergrund und Palette rechts](https://pxstud.io/manual/images/start/new-sprite-dialog.light.webp) _Der Dialog Neuer Sprite_ - **Presets** oben tragen gängige Größen ein: **Leer** (Quadrate und Spielbildschirme), **Social Media** (YouTube, Instagram und mehr), **Konsolen** (die nativen Bildschirme klassischer Systeme und Fantasy-Konsolen wie PICO-8), **Stores** (Steam, itch.io und die App-Stores) und **Zuletzt** (Größen, die du verwendet hast). - Bei den Größen für Social Media und Stores bietet eine Zeile **Pixelgröße** kleinere Leinwände an, die sich exakt hochskalieren lassen. Wähle „320x180 ×4“, zeichne in 320×180 und exportiere mit 400 %, um ein scharfes Bild in 1280×720 zu bekommen. - **Breite** und **Höhe** legen die Größe selbst fest. - **Farbmodus** ist RGBA-Farbe (beliebige Farben, mit Transparenz), Graustufen oder Indizierte Farbe (jeder Pixel hat eine der Farben der Palette). - **Hintergrund** ist Transparent, Weiß oder deine Hintergrundfarbe. Ein nicht transparenter Hintergrund wird zu einer [Hintergrund-Ebene](https://pxstud.io/de/docs/manual/guides/layers.md#the-background-layer). - **Palette** startet den Sprite mit der Standardpalette, einer deiner Paletten aus „Meine Paletten“ oder einer integrierten Palette. Klick auf **Erstellen**. Der Sprite öffnet sich in einem neuen Tab im aktuellen Projekt. ## Zeichnen 1. Wähle eine Farbe: Klick auf ein Farbfeld der Palette, um es zur **Vordergrundfarbe** zu machen, oder klick mit rechts darauf, um es zur **Hintergrundfarbe** zu machen. Mit `X` tauschst du die beiden. 2. Wähle den Stift (`B`) und zieh auf der Leinwand. Die rechte Maustaste malt mit der Hintergrundfarbe. 3. Probier den Farbeimer (`G`) zum Füllen einer Fläche, das Rechteck (`U`) für Kästen und den Radierer (`E`), um Pixel zu radieren. Hältst du `Alt` über der Leinwand, nimmt die Pipette eine Farbe auf. Jedes Werkzeug ist in der [Referenz Werkzeuge](https://pxstud.io/de/docs/manual/reference/tools.md) beschrieben. **Rückgängig** machst du mit `Ctrl+Z` und **Wiederholen** mit `Ctrl+Shift+Z` oder `Ctrl+Y`. Jeder Sprite hat seinen eigenen Änderungsverlauf, und die Verlauf-Schaltfläche darunter in der Werkzeugleiste (oder Bearbeiten > Änderungsverlauf) zeigt jeden Schritt als Baum, sodass du zu jedem zurückspringen kannst, auch zu Schritten, die du rückgängig gemacht und dann durch etwas anderes ersetzt hast. ## Dich bewegen - **Zoomen** mit dem Mausrad oder einer Pinch-Geste auf dem Trackpad (es zoomt um den Zeiger), oder mit `Ctrl+=` und `Ctrl+-`. `Ctrl+Shift+0` zeigt den ganzen Sprite im Bild. - **Verschieben** mit einem Zwei-Finger-Scrollen auf dem Trackpad, der mittleren Maustaste oder der Hand (`H`). - Auf einem Touchscreen zeichnet ein Finger, und zwei Finger zoomen und verschieben per Pinch. Tipp mit zwei Fingern, um rückgängig zu machen, oder mit dreien, um zu wiederholen. ## Speichern Du musst nicht speichern: Jede Änderung wird beim Arbeiten in deinem Browser behalten, und die Kopfzeile zeigt **Lokal gespeichert**, sobald es geschehen ist. Schließ den Tab und komm später zurück, und dein Projekt, seine Sprites und die Tabs, die du offen hattest, sind noch da. Der Editor funktioniert außerdem offline, sobald du ihn einmal geöffnet hast. Du kannst den Editor auch als App mit eigenem Fenster und Symbol installieren: In Chrome, Edge und anderen Chromium-Browsern nutzt du das Installieren-Symbol am Ende der Adressleiste; auf iPhone und iPad tippst du auf Teilen und dann auf **Zum Home-Bildschirm**. Auf einem Computer oder einem Android-Smartphone teilen App und Browser-Tab dieselbe Arbeit. Auf iPhone und iPad hat die App auf dem Home-Bildschirm ihre eigene Kopie, getrennt von der in Safari: Melde dich in beiden bei Sync an, um dieselben Sprites zu haben. - Datei > Speichern (`Ctrl+S`) speichert sofort, statt einen Moment zu warten. - Datei > Speichern unter... (`Ctrl+Shift+S`) lädt den Sprite als `.pxstudio`-Datei herunter, eine Kopie, die du aufbewahren, teilen oder mit Datei > Öffnen... (`Ctrl+O`) wieder öffnen kannst. > **Warnung:** Im Browser gespeicherte Arbeit bleibt in diesem Browser. Wenn du die Websitedaten deines Browsers > löschst, ist sie weg, und auf deinen anderen Geräten ist sie nicht. Lade mit Datei > Speichern unter... eine > Kopie herunter, um sie zu sichern, oder nutze Sync bei pxstud.io, um deine Arbeit in deinem Konto zu > behalten. ## Ein PNG exportieren Wähle Datei > Exportieren... (`Ctrl+Alt+Shift+S`). Der Dialog zeigt eine Live-Vorschau der Datei, die du bekommst. - **Typ:** PNG, Animiertes GIF, Animiertes PNG, Sprite-Sheet, Aseprite-Datei, WebP, MP4-Video und mehr. - **Größe ändern:** Skaliere das Bild in ganzen Schritten hoch (100 % bis 1600 %), sodass jeder Pixel ein scharfes Quadrat bleibt. Pixel-Art wird meist klein gezeichnet und groß exportiert. - **Frames:** alle, nur der aktuelle oder die Frames eines Tags. Klick auf **Exportieren**, und die Datei wird heruntergeladen. ## Jeden Befehl finden Drück `Ctrl+K`, um die Befehlspalette zu öffnen, und tipp, was du willst („flip“, „onion“, „export“). Sie listet jeden Befehl mit seinem Menü und Tastenkürzel auf, und die, die du zuletzt benutzt hast, stehen zuerst. ## Weiter - [Ebenen](https://pxstud.io/de/docs/manual/guides/layers.md): Zeichne Umriss, Farben und Schattierung getrennt. - [Der Arbeitsbereich](https://pxstud.io/de/docs/manual/guides/workspace.md): Ordne die Bedienfelder an, wie du es magst. - [Menüs](https://pxstud.io/de/docs/manual/reference/menus.md): alles in der Menüleiste.