Zum Hauptinhalt springen
eyunzhu

Sprite-Sheet erstellen

Bilder anordnen · Abstände · CSS und Koordinaten

Bilder bleiben auf Ihrem Gerät

Dateien

0 · 0 ausgewählt

Noch keine Bilder ausgewählt.

Bilder oder ZIP-Datei hier ablegen Bilder lassen sich auch einfügen oder gemeinsam auswählen.
JPEG · PNG · WEBP · AVIF

Einstellungen

Erweiterte Einstellungen
Exporteinstellungen
Passfoto-AusschnittDie lokale Erkennung schlägt nur einen Ausschnitt vor; vor dem Export lässt er sich weiter anpassen.

Der Ausschnitt dieses Bildes ist noch nicht bestätigt.

Passfoto-HintergrundOptionales Freistellen direkt auf dem Gerät; das Original wird nicht übertragen.
Anwenden auf
Format
Abmessungen
Vorgegebene GrößeGängige Plattformgrößen

Wählen Sie eine oder mehrere Größen; jedes Bild wird in allen gewählten Größen ausgegeben.

Schutzabstand des Icons12%
Icon-Hintergrund

Aus einem Ausschnitt entstehen Favicon-, PWA- und gängige App-Größen samt Manifest.

ZuschneidebereichRahmen zum Verschieben oder Skalieren ziehen
Drehung
Qualität88%
Abmessungen
Bildposition
Abstand an jeder Seitepx
Hintergrund
Aufteilen nach
Anordnung
Ausrichtung
Erweiterte Einstellungen
Helligkeitshistogramm
Wasserzeichenbild

Position

Erweiterte Einstellungen
Modus zum Freistellen
Bild hochskalierenReal-ESRGAN · 2×

Farbe im Bild aufnehmen

Ausrichtung
Metadaten-Aufgabe
Scan-Darstellung

Ziehen Sie jede Ecke auf den Dokumentrand. Mit den Pfeiltasten lässt sich feinjustieren.

Qualität
Frame-BereichLetzten Frame leer lassen, um bis zum Ende zu verarbeiten.

Base64 vergrößert die Datenmenge. Die Eingabe ist zum Schutz des Browserspeichers begrenzt.

Was möchten Sie als Nächstes tun?

Die Bilder werden nur vorübergehend in diesem Browser übergeben und nicht hochgeladen.

Bilder für den nächsten Schritt
Stapelverarbeitung für BilderArbeitsschritte kombinieren · Bilder im Stapel verarbeiten Bild zuschneidenSeitenverhältnis · Begradigen · Bildausschnitt Bild aufteilenRaster · Lange Bilder aufteilen · Eigene Hilfslinien Bilder zusammenfügenNebeneinander · Untereinander · Im Raster Bildgröße ändernPixel oder Prozent · Einpassen · Mehrere Größen Bildfläche erweiternRänder ergänzen · Leinwandgröße · Hintergrund Bildgrößen für soziale NetzwerkePlattformformate · Bildaufbau · Mehrere Größen Bild komprimierenAutomatisch komprimieren · Zielgröße · Originalvergleich Bildformat umwandelnBeim Import konvertieren · Mehrere Formate · Stapeldownload Bild- und Base64-KonverterBild ↔ Base64 · Sofortige Vorschau · Kopieren Bild bearbeitenDrehen und spiegeln · Farben · Rückgängig und Wiederholen Wasserzeichen hinzufügenText- oder Bildwasserzeichen · Frei verschieben · Kacheln Gesichter und private Angaben verdeckenGesichter erkennen · Bereiche markieren · Stapelverarbeitung Bildfarben anpassenBelichtung und Farben · Histogramm · Live-Vorschau Farbwähler für BilderFarbe anklicken · HEX / RGB / HSL · Farbpalette Farbe im Bild ersetzenFarbe wählen · Toleranz und weiche Kanten · Live-Vorschau Bilder vergleichenSchieberegler · Nebeneinander · Pixelunterschiede Bildmetadaten anzeigen und entfernenBildinformationen · Datenschutzprüfung · Metadaten entfernen Doppelte Bilder findenOrdner importieren · Gleiche Dateien · Ähnliche Bilder GIF aus Bildern erstellenBilder animieren · Anzeigedauer · Reihenfolge GIF-Einzelbilder extrahierenFrame-Bereich · Auswahlintervall · Stapeldownload Animiertes GIF bearbeitenReihenfolge und Dauer · Rückwärts · Zuschneiden und skalieren GIF komprimierenWeniger Farben · Frames auslassen · Verkleinern GIF in Sprite-Sheet umwandelnFrames im Raster · Koordinatendatei Bilder in PDF umwandelnBilder sortieren · Seitenformat · Als PDF zusammenführen Favicon- und App-Icon-GeneratorWebsite- und App-Icons · Sicherheitsabstand · Mehrere Größen Bildplatzhalter erzeugenBlurHash · ThumbHash · Kleine Vorschaubilder Bildhintergrund lokal entfernenPersonen oder Objekte freistellen · Kanten · Hintergrund Bild in Text umwandeln (OCR)Text erkennen · Bereich auswählen · Text exportieren Dokumentenfoto-ScannerEcken korrigieren · Dokument verbessern · Mehrseitiges PDF Bild hochskalierenLokale KI-Vergrößerung · Doppelte Größe · Mehr Details Passfoto erstellenFotovorgaben · Bildausschnitt · Hintergrund Chinesisches PassfotoFotovorgaben · Bildausschnitt · Hintergrund Foto für chinesischen PersonalausweisFotovorgaben · Bildausschnitt · Hintergrund Foto für chinesische LehramtsprüfungFotovorgaben · Bildausschnitt · Hintergrund Foto für chinesische BeamtenprüfungFotovorgaben · Bildausschnitt · Hintergrund Foto für Hubei-SozialversicherungskarteFotovorgaben · Bildausschnitt · Hintergrund US-VisumfotoFotovorgaben · Bildausschnitt · Hintergrund Japanisches VisumfotoFotovorgaben · Bildausschnitt · Hintergrund

Über dieses Tool

Fassen Sie Symbole oder kleine Spielgrafiken in einer Datei zusammen und greifen Sie über Koordinaten darauf zu. Die Rasterzellen richten sich nach dem größten Ausgangsbild; kleinere Bilder lassen daher Platz frei.

Anwendung

Sprite-Sheet erstellen

Wofür sich das Werkzeug eignet

Bilder mit einstellbaren Spalten und Abständen in einem PNG-Raster zusammenfassen. Originalmaße erhalten und JSON-Koordinaten sowie CSS-Positionen exportieren.

Anwendung

Bilder anordnen, Spalten und Abstände wählen. Jedes Bild behält seine Maße und liegt links oben in einer Zelle nach Größe des größten Bildes. Exportiert werden Grafik, JSON-Koordinaten und CSS-Positionen.

Ergebnisse und weitere Bearbeitung

Zum Hauptbild gehören Koordinaten, Manifest oder Hilfscode. Das vollständige ZIP bewahrt ihre Zuordnung.

Datenschutz und lokale Verarbeitung

Die Verarbeitung erfolgt im Browser. Originalbilder werden von diesem Werkzeug nicht hochgeladen.

Häufige Fragen

Werden kleinere Bilder auf die Größe der übrigen gestreckt?

Nein. Die Originalmaße bleiben erhalten; jedes Bild sitzt links oben in einer Zelle, deren Größe sich nach dem größten Ausgangsbild richtet. Freiflächen sind daher möglich. PNG, JSON-Koordinaten und CSS-Positionen werden exportiert; es gibt kein enges Packen mit Beschnitt transparenter Ränder.

Warum zeigt das exportierte CSS allein noch keine Sprites?

Es enthält die Abmessungen und Hintergrundpositionen der Einzelbilder. Ergänzen Sie auf Ihrer Seite die background-image-Adresse des Sheets und eine passende Darstellungsart. PNG, JSON und CSS müssen aus demselben Export stammen; tauschen Sie sie nach Änderungen gemeinsam aus.

Wie vermeide ich verschobene Koordinaten nach erneutem Erstellen?

Legen Sie die Warteschlangenreihenfolge vor Spalten und Abständen fest. Positionen folgen dieser Reihenfolge; Einfügen, Entfernen oder Verschieben kann nachfolgende Koordinaten ändern. Kombinieren Sie niemals eine alte Zuordnung mit einem neuen Sheet.

Kommentare

0
, um an der Diskussion teilzunehmen.
Noch keine Kommentare.
Antwortverlauf

Verfolgen Sie die vollständige Unterhaltung chronologisch; jede Antwort kennzeichnet die konkrete Nachricht, auf die sie sich bezieht.