Bilder · Sprite-Sheet-Generator

Ein CSS-Sprite-Sheet auf dem Mac erstellen

Pack Symbole in ein Bild mit dem CSS, um jedes anzuzeigen, plus eine HTML-Vorschau.

Läuft auf deinem Mac

KI fragenChatGPTClaudePerplexityKI-ModusGrokMarkdown

OneMacTools laden Weitere Werkzeuge: Bilder

Sprite-Sheet-Generator auf einem Mac

Sprite-Sheet-Generator mit Beispieldateien und seinen Optionen

Was Sprite-Sheet-Generator aus den Beispieldateien erstellt hat

Bildschirmfotos aus der App, mit Beispieldateien.

So verwendest du Sprite-Sheet-Generator

1
Symbole ablegen
Füge zwei oder mehr Bilder hinzu. Jeder Dateiname wird zu einer CSS-Klasse, benenne sie also vorher gut, zum Beispiel „search.png“ und „cart.png“.
2
Abstand und Präfix festlegen
Wähle den Abstand zwischen den Symbolen und das Präfix der CSS-Klassen.
3
Retina-Symbole kennzeichnen
Sind deine Symbole @2x, schalte die Retina-Option ein, damit sie scharf in halber Größe angezeigt werden.
4
Auf „Sheet erstellen“ klicken
Die Symbole werden in Zeilen gepackt und als sprite.png gesichert, mit sprite.css und einer Seite preview.html, in einem datierten Ordner in Downloads › OneMacTools.
5
Auf deiner Website verwenden
Leg sprite.png und sprite.css zusammen ab, verlinke das CSS und füge die Klassen zu Elementen hinzu. Öffne preview.html, um jede Klasse zu sehen.

Was Sprite-Sheet-Generator macht

Symbole jeder Größe werden dicht in Zeilen gepackt, jedes erhält eine eigene CSS-Klasse mit der richtigen Position und Größe, und eine Vorschauseite zeigt alle. Lege den Abstand zwischen den Symbolen, das Klassenpräfix und fest, ob die Symbole @2x für scharfe Retina-Displays sind.

Ideal für

Einen Satz Symbole mit einer einzigen Anfrage laden
Ein Sprite-Sheet für ein Spiel erstellen
Flaggen oder Emojis für eine Website bündeln

Optionen erklärt

Abstand zwischen Symbolen: 0, 2, 4 oder 8 px; Standard ist 2 px. Ein kleiner Abstand verhindert, dass benachbarte Symbole beim Zoomen der Seite ineinanderlaufen.
Symbole sind @2x (in halber Größe für scharfe Retina-Displays anzeigen): Standardmäßig aus. Ist es aktiviert, zeigt das CSS jedes Symbol in halber Pixelgröße und skaliert das Sheet entsprechend, sodass Symbole in doppelter Auflösung auf Retina-Bildschirmen scharf aussehen.
CSS-Klassenpräfix: Der Anfang jedes Klassennamens; „icon“, wenn leer. Mit dem Präfix icon wird aus „search.png“ .icon-search.

Bewährte Vorgehensweisen

Benenne die Dateien vorher in Kleinbuchstaben mit Bindestrichen. Daraus entstehen die Klassennamen, und „@2x“ wird automatisch weggelassen.
Nimm Symbole mit transparentem Hintergrund, damit das Sheet auf jeder Seitenfarbe funktioniert.
Erstelle Retina-Symbole in genau doppelter Anzeigegröße mit geraden Pixelmaßen, damit die halbierten Größen ganze Pixel ergeben.
Komprimiere sprite.png danach mit „PNG komprimieren“; ein Paletten-PNG ist bei Symbolbögen oft viel kleiner.
Nimm einen Abstand von 2 px oder mehr, wenn die Symbole skaliert oder bei gezoomter Seite angezeigt werden.

Funktioniert mit

In: Zwei oder mehr Bilder, meist PNG-Symbole, in beliebigen Größen.
Ende: sprite.png (alle Symbole zusammengepackt), sprite.css (eine Klasse pro Symbol mit Größe und Position) und preview.html.

Symbole unterschiedlicher Größe werden dicht in Zeilen gepackt, die höchsten zuerst.
Gleichnamige Dateien erhalten nummerierte Klassen wie -2, damit keine verloren geht.

Fragen zu Sprite-Sheet-Generator

Was ist ein CSS-Sprite-Sheet?

Ein Bild mit vielen Symbolen, dazu CSS, das pro Element nur ein Symbol zeigt, indem es den Hintergrund verschiebt. So lädt es alle deine Symbole mit einer einzigen Anfrage.

Wie verwende ich das Sprite auf meiner Website?

Lade sprite.png und sprite.css in denselben Ordner hoch, verlinke das CSS in deiner Seite und gib einem Element Klassen wie class="icon icon-search".

Wie entstehen die Klassennamen?

Aus jedem Dateinamen, in Kleinbuchstaben, mit Bindestrichen statt Leerzeichen und Symbolen, nach deinem Präfix. Aus „Shopping Cart.png“ mit dem Präfix icon wird .icon-shopping-cart.

Kann ich Symbole unterschiedlicher Größe verwenden?

Ja. Jedes Symbol behält seine eigene Größe, und seine CSS-Klasse bekommt die passende Breite und Höhe.

Wie mache ich Sprites auf Retina-Bildschirmen scharf?

Erstelle die Symbole in doppelter Anzeigegröße und aktiviere die Option @2x. Das CSS zeigt sie dann in halber Größe, was auf hochauflösenden Bildschirmen scharf aussieht.

Kann ich es für Spiele-Sprites verwenden?

Ja. sprite.css listet Position und Größe jedes Bildes auf dem Sheet auf, die du in eine Game-Engine oder Canvas-Code einlesen kannst.

Lädt Sprite-Sheet-Generator meine Dateien hoch?

Nein. Sprite-Sheet-Generator läuft komplett auf deinem Mac – deine Dateien verlassen ihn nie, und es funktioniert offline.

Verändert Sprite-Sheet-Generator meine Originaldateien?

Nein. Ergebnisse werden als neue Dateien in einem datierten Ordner in Downloads › OneMacTools gesichert, und deine Originale bleiben genau, wie sie waren – außer du aktivierst eine Option, die etwas anderes sagt.

Was braucht Sprite-Sheet-Generator?

Nur ein Mac mit macOS 26 oder neuer. Sonst musst du nichts installieren.