Transparenter Raster Generator für PNG und SVG
Dieser Raster Generator zeichnet gleichmäßig verteilte Linien auf einen durchsichtigen Hintergrund, genau in der Pixelgröße, die Sie wählen. Sie legen Spalten, Zeilen, Linienstärke und Farbe fest und laden das Raster als PNG oder SVG herunter oder kopieren es als CSS-Hintergrund. Es dient als Hilfsebene über Grafiken, Layouts oder Screenshots. Alles läuft im Browser, nichts wird hochgeladen.
Raster erstellen online: so geht es
Das Raster entsteht direkt auf der Seite. Sie brauchen vier Schritte:
- Geben Sie Breite der Zeichenfläche (px) und Höhe der Zeichenfläche (px) ein. Beide reichen von 10 bis 5000 und stehen zu Beginn auf 1920 mal 1080.
- Stellen Sie Spalten (1 bis 200, Start 12) und Zeilen (1 bis 200, Start 6) ein.
- Wählen Sie die Linienstärke (px) von 1 bis 50 und eine Linienfarbe. Voreingestellt ist Rot, #FF0000.
- Prüfen Sie die Vorschau und drücken Sie dann auf PNG herunterladen, SVG herunterladen oder CSS kopieren.
Eine Schaltfläche zum Übernehmen gibt es nicht. Die Vorschau zeichnet sich bei jeder Eingabe neu. Das Schachbrettmuster dahinter zeigt, welche Teile der Datei transparent sind. Es gehört nicht zum Download.
Zellgröße aus Zeichenfläche, Spalten und Zeilen
Die Zeichenfläche wird gleichmäßig geteilt: Die Zellbreite ist die Breite geteilt durch die Spalten, die Zellhöhe die Höhe geteilt durch die Zeilen. Die Angabe „Jede Zelle ist … × … px groß“ unter der Vorschau zeigt das Ergebnis, während Sie Werte ändern. Für quadratische Zellen wählen Sie Zahlen, die in beide Richtungen dieselbe Größe ergeben. Eine Zeichenfläche von 1920 × 1080 mit 16 Spalten und 9 Zeilen ergibt Zellen von 120 × 120 px.
Die Linien liegen mittig auf jeder inneren Teilung. Geht die Zeichenfläche nicht glatt auf, kann eine Linie zwischen zwei Pixeln liegen und im PNG etwas weich wirken. Für scharfe Linien wählen Sie eine Breite, die ein Vielfaches der Spalten ist, und eine Höhe, die ein Vielfaches der Zeilen ist.
Raster für Figma: gängige Größen
Diese Größen werden besonders oft gebraucht (Breite × Höhe, Spalten × Zeilen, Zellgröße):
- Quadratische Zellen auf Full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Quadratische Zellen auf 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- 3×3-Raster, quadratisch: 1080 × 1080, 3 × 3, 360 × 360 px
- 3×3-Raster im Hochformat 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
In Figma können Sie die fertige Datei einem Frame hinzufügen und als Hilfsebene nutzen.
Linienstärke, Linienfarbe und erweiterte Optionen
Die Linienstärke ist die Strichbreite in Pixeln der Zeichenfläche. Auf einer großen Zeichenfläche braucht eine dünne Linie deshalb einen höheren Wert, damit sie sichtbar bleibt, wenn das Bild verkleinert wird. Das Feld Linienfarbe öffnet die Farbauswahl Ihres Browsers und zeigt daneben den Hex-Wert. Wählen Sie eine Farbe mit Kontrast zum Untergrund: Weiß über dunkler Grafik, eine dunkle Farbe über heller.
Unter Erweiterte Optionen gibt es drei Kontrollkästchen. Ein einfaches Raster hat nur Linien auf den inneren Teilungen, die Ränder der Datei bleiben leer.
- Äußerer Rahmen fügt einen Rahmen hinzu. Er wird innerhalb der Zeichenfläche gezeichnet und behält deshalb die volle Linienstärke.
- Fadenkreuz in der Mitte zieht eine senkrechte und eine waagerechte Linie durch die Mitte. Bei einer geraden Zahl von Spalten oder Zeilen liegt dort schon eine Linie, eine Änderung sehen Sie also nur bei ungeraden Zahlen.
- Diagonalen fügt zwei Linien von Ecke zu Ecke hinzu, die sich in der Mitte kreuzen.
Raster als SVG und als CSS-Hintergrund
PNG herunterladen speichert ein transparentes Bild in genau der Größe der Zeichenfläche, benannt wie raster-1920x1080.png. SVG herunterladen speichert dasselbe Raster als Vektorlinien ohne Hintergrund, benannt wie raster-1920x1080.svg. CSS kopieren legt eine Zeile background-image: url("data:image/svg+xml,...") und eine Zeile background-size in die Zwischenablage. So können Entwickler das Raster ohne eigene Bilddatei über eine Seite legen.
Der Hintergrund wiederholt sich standardmäßig. Wenn Sie ihn kacheln, bedenken Sie, dass ein einfaches Raster am Außenrand keine Linie hat. Ist die Option Äußerer Rahmen eingeschaltet, treffen an jeder Naht zwei Rahmen aufeinander und wirken etwa doppelt so dick wie der eingestellte Wert.
Raster auf einem Foto oder CSS-Grid-Code?
Wenn Sie ein Raster über ein vorhandenes Bild zeichnen möchten, etwa für die Rastermethode beim Abzeichnen, nehmen Sie den Rasterbild-Generator. Für ein Seitenlayout mit grid-template-areas-Code ist der CSS-Grid-Generator das richtige Werkzeug. Dieses Werkzeug liefert die leere, transparente Rasterdatei selbst.
Häufige Fragen
Wie erstelle ich ein PNG mit transparentem Raster?
Geben Sie „Breite der Zeichenfläche (px)“ und „Höhe der Zeichenfläche (px)“ ein, stellen Sie „Spalten“ und „Zeilen“ ein, wählen Sie eine „Linienfarbe“ und drücken Sie auf „PNG herunterladen“. Der Hintergrund der Datei ist transparent. Das Schachbrettmuster in der Vorschau zeigt das nur an. Die Datei heißt zum Beispiel raster-1920x1080.png, mit Ihrer eigenen Größe im Namen.
Wie sieht ein 3×3-Raster als PNG aus?
Stellen Sie „Spalten“ auf 3 und „Zeilen“ auf 3. Das zeichnet zwei senkrechte und zwei waagerechte Linien und teilt die Fläche in neun gleiche Zellen. Schalten Sie unter „Erweiterte Optionen“ den „Äußeren Rahmen“ ein, wenn Sie zusätzlich einen Rahmen am Rand möchten, und drücken Sie dann auf „PNG herunterladen“.
Welche Größe braucht ein Raster im Format 9:16?
Setzen Sie „Breite der Zeichenfläche (px)“ auf 1080 und „Höhe der Zeichenfläche (px)“ auf 1920 für ein bildschirmfüllendes Hochformat. 2160 mal 3840 ist dieselbe Form im Format 9:16 mit doppelter Auflösung. Beides liegt innerhalb der Grenze von 5000 px. Die Angabe unter der Vorschau zeigt die Größe einer Zelle.
Wie mache ich ein weißes Raster als Overlay?
Wählen Sie bei „Linienfarbe“ Weiß, #FFFFFF. Weiße Linien sind auf dem Schachbrettmuster der Vorschau schwer zu erkennen. Das heruntergeladene PNG behält sie aber auf transparentem Hintergrund, sie sind also sichtbar, sobald Sie die Datei über ein Foto oder ein dunkles Layout legen.
Kann ich das Raster als SVG speichern?
Ja. Drücken Sie auf „SVG herunterladen“, um dasselbe Raster als Vektordatei zu speichern, zum Beispiel raster-1920x1080.svg. Die Linien sind Striche in Ihrer Farbe, es gibt keine Hintergrundfläche. Die Datei bleibt bei jeder Vergrößerung scharf und lässt sich im Browser oder in jedem Vektorprogramm öffnen.
Wie verwende ich das Raster als CSS-Hintergrund?
Drücken Sie auf „CSS kopieren“ und fügen Sie das Ergebnis in eine Regel ein. Sie erhalten ein background-image mit dem Raster als eingebettetem SVG und eine background-size in der Größe Ihrer Zeichenfläche. Ändern Sie die background-size, um das Raster zu skalieren, oder wählen Sie eine kleine Zeichenfläche und lassen Sie den Hintergrund sich wiederholen. Ohne „Äußerer Rahmen“ haben die Kachelränder keine Linie.
Wie füge ich ein Raster in Illustrator oder Figma ein?
Beide Programme haben eigene Raster und Hilfslinien. Dieses Werkzeug nutzen Sie, wenn Sie ein Raster als Datei in exakter Größe brauchen. Öffnen Sie das SVG in Illustrator, damit die Linien Vektoren bleiben, oder legen Sie das PNG als transparente Ebene über Ihre Grafik. In Figma können Sie beide Dateien einem Frame hinzufügen.
Warum ist mein PNG auf dem iPhone oder iPad kleiner?
Safari auf iPhone und iPad liefert ab etwa 16 Millionen Pixeln ein leeres Bild. Deshalb wird das PNG dort verkleinert, und ein Hinweis nennt die gespeicherte Größe. Das SVG behält immer die volle Größe, die Sie eingestellt haben. Nehmen Sie es, wenn Sie die exakten Maße brauchen.
Empfohlen
-
Pentel GraphGear 500 DruckbleistiftSkizziere das Layout zuerst auf Papier, mit feinen Linien passend zu deinem Raster
-
Leuchtturm1917 Notizbuch A5, gepunktetSkizziere deine Screens auf Punktraster, bevor du Figma öffnest
-
Wacom Intuos S ZeichentablettZeichne von Hand auf deiner Rasterebene, mit einem Stift, der deinem Cursor folgt
Hilft, die Tools kostenlos zu halten. ✨
Symbolbilder. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.
