Zum Tutorial springen
lil cactus

Pixel-Art erstellen

Einsteiger10 MinutenAktualisiert

Kurze Antwort

Beginnen Sie in Lil Cactus mit einer Arbeitsfläche von 16 × 16 px und wählen Sie aus der Werkzeuggruppe „Pinsel“ in der Werkzeugleiste den Buntstift. Stellen Sie Größe auf 1 px und Deckkraft auf 100 % und zeichnen Sie in starker Vergrößerung. Für ein Ein-Pixel-Raster wählen Sie Mehr dann Voreinstellungen…, öffnen den Bereich Hilfslinien & Raster, stellen den Abstand auf 2 px und die Unterteilungen auf 2 und aktivieren dann Ansicht dann Anzeigen dann Raster. Vergrößern Sie über Bild dann Bildgröße… mit Pixelwiederholung und einem ganzzahligen Vielfachen, etwa von 16 auf 512 px.

Ein dreifarbiger Pixel-Kaktus, von 16 × 16 auf 512 × 512 Pixel vergrößert, im Vergleich: weiche Kanten mit „Bilinear“ und scharfe Kanten mit „Pixelwiederholung“
Dieselbe Zeichnung auf 512 × 512 vergrößert: „Bilinear“ (Vorher) vermischt die Kanten, „Pixelwiederholung“ (Nachher) hält die Pixelblöcke klar getrennt. Ziehen Sie den Regler, um zu vergleichen.
Dauer
10 Minuten
Niveau
Einsteiger
Sie brauchen
Eine kleine Arbeitsfläche und eine Maus zum Setzen der Pixel
Funktioniert mit
Neue RGB-Bilder und PNG-Sprites
Beispiel in Lil Cactus öffnenEigenes Foto verwenden

Kostenlos, ohne Anmeldung. Ihr Foto bleibt auf Ihrem Computer.

Pixel-Art wird auf einem kleinen Bild Zelle für Zelle gezeichnet. Der Kaktus hier verwendet drei Malfarben und einen weißen Hintergrund. Der Buntstift setzt hartkantige Striche; beim Vergrößern mit Pixelwiederholung werden diese Pixel kopiert, ohne Mischfarben dazwischen einzufügen.

Einen Pixel-Kaktus in sieben Schritten zeichnen und vergrößern

  1. Eine Arbeitsfläche von 16 × 16 öffnen und eine Zeichenebene hinzufügen

    Öffnen Sie die leere Beispieldatei auf dieser Seite. Um stattdessen eine eigene Arbeitsfläche anzulegen, wählen Sie Datei dann Neu…, stellen Breite und Höhe auf 16 und lassen Maßeinheiten auf Pixel. Hintergrund bleibt auf Weiß. Klicken Sie auf Erstellen.

    Wählen Sie Ebene dann Neu dann Neue Ebene. Doppelklicken Sie im Bedienfeld „Ebenen“ auf ihren Namen, geben Sie Cactus ein und drücken Sie Enter. Lassen Sie Cactus über Hintergrund ausgewählt.

    Einstellungen für ein neues Dokument mit Breite 16, Höhe 16, Pixel und weißem Hintergrund
    Verwenden Sie eine winzige Arbeitsfläche: Diese Maße sind Bildpixel, nicht die vergrößerte Ansicht.
    Unterer Rand des Dialogs für ein neues Dokument mit eingekreister Schaltfläche „Erstellen“
    Erstellen Sie die Arbeitsfläche, nachdem Sie ihre Maße eingestellt haben.
    Das Bedienfeld „Ebenen“ mit ausgewählter Ebene „Cactus“ über einer weißen Ebene „Hintergrund“
    Zeichnen Sie auf Cactus; Hintergrund liefert das weiße Papier.

  2. Ein Grün wählen, dann den Buntstift mit 1 px

    Wählen Sie Fenster dann Farbe. Ersetzen Sie im Feld # in der Zeile Vordergrund den Wert durch 4A8654.

    Klicken Sie mit der rechten Maustaste auf die Werkzeugschaltfläche unter der Pipette oder halten Sie sie gedrückt und wählen Sie dann Buntstift. Stellen Sie Größe auf 1 px. Modus, also wie sich ein Strich mit vorhandenen Pixeln mischt, bleibt auf Normal. Deckkraft bestimmt, wie deckend der Strich ist; lassen Sie sie auf 100 %.

    Glättung beruhigt einen Strich; lassen Sie den Wert zum Setzen dieser Zellen auf 0. Lassen Sie beide Kästchen für den Stiftdruck deaktiviert, damit Größe und Deckkraft gleichmäßig bleiben. Lassen Sie Automatisch löschen deaktiviert, damit beim Übermalen eines Pixels weiter die Vordergrundfarbe verwendet wird.

    Das Bedienfeld „Farbe“ mit Grün 4A8654 im eingekreisten Feld „#“ in der Zeile „Vordergrund“
    Geben Sie das Grün im Feld „#“ ein.
    Die Werkzeuggruppe „Pinsel“ mit eingekreister Gruppenschaltfläche und eingekreistem Eintrag „Buntstift“, daneben benachbarte Werkzeuge
    Der Buntstift teilt sich die Werkzeugschaltfläche mit dem Pinsel; vergrößerte Ansicht.
    Optionen des Buntstifts mit eingekreistem Regler „Größe“, auf 1 px gestellt
    Buntstiftstriche mit einem Pixel füllen einzelne Zellen des Bilds.
    Optionen des Buntstifts mit Modus „Normal“, Deckkraft 100 % und Glättung 0 %
    Behalten Sie „Normal“, 100 % Deckkraft und 0 % Glättung bei.
    Die Kästchen „Stiftdruck für Größe“, „Stiftdruck für Deckkraft“ und „Automatisch löschen“ des Buntstifts, alle deaktiviert
    Lassen Sie diese drei Kästchen für diese Zeichnung deaktiviert.

  3. Ein Ein-Pixel-Raster einblenden

    Wählen Sie Mehr dann Voreinstellungen… und dann Hilfslinien & Raster. Rasterabstand (Dokument-px) legt den Abstand zwischen den Hauptlinien fest; stellen Sie ihn auf 2. Unterteilungen pro Hauptzelle teilt diesen Abstand; stellen Sie den Wert auf 2. Klicken Sie auf Schließen.

    Wählen Sie Ansicht dann Anzeigen dann Raster und dann Ansicht dann Ganzes Bild. Die feinen Linien trennen jetzt einzelne Pixel, mit kräftigeren Linien alle zwei Pixel. Die weiße Zelle oben links ist Spalte 1, Zeile 1. Zählen Sie die Spalten von links und die Zeilen von oben.

    Das Menü „Mehr“ mit eingekreistem Eintrag „Voreinstellungen…“
    Öffnen Sie die Voreinstellungen über „Mehr“.
    Die Bereiche der Voreinstellungen mit eingekreistem Eintrag „Hilfslinien & Raster“
    Wählen Sie in den Voreinstellungen „Hilfslinien & Raster“.
    Die Einstellungen von „Hilfslinien & Raster“ mit eingekreistem Rasterabstand 2 und Unterteilungen 2, dazu die Schaltfläche „Schließen“
    2 px Abstand, in 2 geteilt, ergibt ein Ein-Pixel-Raster.
    Das Menü „Ansicht“ mit seinem Untermenü „Anzeigen“ und eingekreistem Eintrag „Raster“
    Aktivieren Sie „Ansicht › Anzeigen › Raster“.
    Die leere weiße Arbeitsfläche von 16 × 16 bei 3200 % Zoom mit Rasterzellen von einem Pixel
    Das Beispiel bei 3200 % Zoom. Jede kleine Zelle ist ein Bildpixel.

  4. Stamm und Arme zeichnen

    Lassen Sie Cactus ausgewählt und die Vordergrundfarbe grün. Ziehen Sie durch die Mitten der Zellen. Setzen Sie für jede der folgenden Linien einen eigenen Strich:

    • Stamm: drei senkrechte Striche in den Spalten 8, 9 und 10, jeweils von Zeile 3 bis Zeile 10.
    • Linker Arm: waagerechte Striche über die Spalten 5–7 in den Zeilen 6 und 7. Ergänzen Sie seine aufrechte Spitze in Spalte 5, Zeilen 4–5.
    • Rechter Arm: waagerechte Striche über die Spalten 11–13 in den Zeilen 7 und 8. Ergänzen Sie seine aufrechte Spitze in Spalte 13, Zeilen 5–6.
    Ein-Pixel-Raster mit dem grünen Kaktusstamm und zwei erhobenen Armen, noch ohne Topf und Lichter
    Die grüne Silhouette, jede gemalte Zelle noch im Raster sichtbar.

  5. Den Topf und hellere Pixel hinzufügen

    Geben Sie im Feld # des Bedienfelds „Farbe“ für den Topf B66B4B ein. Malen Sie Zeile 11 über die Spalten 6–12, die Zeilen 12 und 13 über die Spalten 7–11 und dann Zeile 14 über die Spalten 8–10.

    Ändern Sie den Wert im Feld # auf A0C78D. Setzen Sie einen hellen Streifen in Spalte 8, Zeilen 4–9. Fügen Sie zwei hellere Zellen in Spalte 5, Zeilen 5–6, und eine in Spalte 11, Zeile 7, hinzu. Nutzen Sie das ganze Raster in Schritt 3, um ihre Positionen abzuzählen.

    Blenden Sie Cactus mit seiner Augenschaltfläche aus, um mit dem leeren Hintergrund zu vergleichen, und blenden Sie die Ebene dann wieder ein.

    Eine nähere Rasteransicht des fertigen Pixel-Kaktus mit grünen Armen, hellgrünen Akzenten und einem Terrakottatopf
    Die fertige Pflanze, enger beschnitten, damit Sie die einzelnen Zellen erkennen.
    Das Bedienfeld „Ebenen“ mit Cactus über Hintergrund und beiden eingekreisten Augenschaltflächen
    Cactus enthält die Zeichnung. Hintergrund bestimmt das Weiß dahinter.

  6. Die kleine Vorlage speichern, dann vergrößern

    Wählen Sie Datei dann Speichern unter dann Lil-Cactus-Projekt…, solange die Arbeitsfläche noch 16 × 16 groß ist. So bleiben die beiden bearbeitbaren Ebenen in der Originalgröße der Zeichnung erhalten.

    Wählen Sie Bild dann Bildgröße… Lassen Sie Maßeinheiten auf Pixel, die Kettenschaltfläche verbunden und Neu berechnen aktiviert. „Neu berechnen“ ändert die Anzahl der Pixel. Stellen Sie Breite auf 512; Höhe folgt auf 512. Wählen Sie im Menü für die Neuberechnung Pixelwiederholung und klicken Sie auf Größe ändern.

    Das ist eine 32-fache Vergrößerung: Jedes Originalpixel wird zu einem Block von 32 × 32.

    Der Dialog „Bildgröße“: 16 × 16 wird zu 512 × 512 mit verbundenen Maßen, „Neu berechnen“ aktiviert und „Pixelwiederholung“ ausgewählt
    Wählen Sie „Pixelwiederholung“, bevor Sie auf „Größe ändern“ klicken.

  7. Das PNG exportieren, dann zur Zeichengröße zurückkehren

    Wählen Sie Datei dann Exportieren dann PNG… und klicken Sie dann auf Exportieren. Die neue Datei hat 512 × 512 px. Wählen Sie Bearbeiten dann Rückgängig, um für die nächste Bearbeitung zur Zeichnung mit 16 × 16 zurückzukehren.

    Datei dann Speichern aktualisiert jetzt das Projekt.

Warum „Pixelwiederholung“ die Palette erhält

„Bildgröße“ öffnet sich mit ausgewähltem Bilinear. Bei dieser Vergrößerung vermischt dieses Verfahren die Farben an den Kanten. Pixelwiederholung erhält die drei Malfarben und den weißen Hintergrund der Zeichnung.

Vergrößerter Ausschnitt der Kaktuskante mit einheitlich gefärbten quadratischen Blöcken durch „Pixelwiederholung“
Pixelwiederholung: einfarbige Pixelblöcke, vergrößert dargestellt.
Dieselbe Kaktuskante mit „Bilinear“ vergrößert, mit Zwischenfarben, die über die Blöcke verlaufen
Bilinear: Die Farben derselben Zeichnung verschwimmen an den Kanten.

Was Sie als Nächstes machen können

Pixel-Art: Fragen und Antworten

Ist Pixel-Art zeichnen dasselbe wie ein Foto verpixeln?

Nein. In Lil Cactus setzt diese Methode einzelne farbige Zellen, um ein Sprite zu zeichnen. „Filter › Vergröberungsfilter › Vergröberungsfilter…“ fasst dagegen die Pixel eines vorhandenen Bilds zu größeren Blöcken zusammen.

Kann Pixel-Art einen transparenten Hintergrund haben?

Ja. Blenden Sie in Lil Cactus die Ebene „Hintergrund“ mit ihrer Augenschaltfläche aus, wie in Schritt 5 gezeigt, und wählen Sie dann „Datei › Exportieren › PNG…“. Die Ebene „Cactus“ bleibt ohne das weiße Papier sichtbar.

Soll ich Pixel-Art als PNG oder JPEG speichern?

Verwenden Sie in Lil Cactus PNG, um die Palette zu erhalten und Transparenz zu unterstützen. JPEG kann an scharfen Kanten zusätzliche Farben erzeugen und keine Transparenz speichern.

Warum sehe ich das Ein-Pixel-Raster nicht?

In Lil Cactus erscheinen die feinen Rasterlinien dieser Anleitung ab 800 % Zoom. Neben „Ansicht › Anzeigen › Raster“ muss auch „Ansicht › Extras“ aktiviert sein. Der Rasterabstand folgt den Voreinstellungen dieses Browsers, ein anderer Browser kann also ein anderes Raster zeigen. Das Raster ist eine Einblendung des Editors und erscheint nicht im exportierten PNG.

Kann ich einen einzelnen Buntstiftstrich rückgängig machen?

Ja. In Lil Cactus entfernt „Bearbeiten › Rückgängig“ den letzten Buntstift-Zug oder -Klick als einen Protokollschritt. „Bearbeiten › Wiederholen“ stellt ihn wieder her.

Kann ich Pixel-Art um einen nicht ganzzahligen Faktor vergrößern?

Ja, aber in Lil Cactus ergeben nur ganzzahlige Vielfache gleichmäßige Blöcke. Eine nicht ganzzahlige Vergrößerung kann manche Originalpixel breiter machen als andere, auch mit „Pixelwiederholung“.

Veröffentlicht  · Zuletzt geprüft