Es müssen wartbare Sprites erstellt werden

Kennt jemand ein gutes Tool oder einen Generator, mit dem ich Sprites erstellen, das Sprite-Set speichern und das CSS-Blatt aktualisieren kann, wenn ich dem Icon-Set neue Symbole hinzufüge? Was ich meine ist folgendes:

Derzeit habe ich 100 Symbole. Sie müssen alle zu Sprites gemacht werden. Sobald sie in Produktion gehen, kann sich das CSS nicht mehr ändern (was bedeutet, dass sie jedes Mal an genau derselben Stelle bleiben müssen). Es wird jedoch erwartet, dass ich den Symbolsatz aktualisiere, wenn ich weitere hinzufügen muss.

Kennt jemand etwas, das es so gibt? Ich habe eine Photoshop-Erweiterung ausprobiert (ich kann mich nicht an den Namen erinnern), die Sprites aus den Ebenen in meiner Photoshop-Datei erstellt, aber leider hat es einfach nicht funktioniert und ich bin immer wieder auf Fehler gestoßen (vermutlich, weil ich möglicherweise zu viele Bilder habe, die es müssen in Sprites verwandelt werden).

Jede Hilfe wird sehr geschätzt.

Antworten (4)

Wenn dies mein Problem wäre, würde ich eine Photoshop-Datei mit Hilfslinien konfigurieren, wo ich sie brauche, und alles richtig positioniert. Dann könnte ich alles bearbeiten, alles bleibt in den von mir konfigurierten Hilfslinien und ich könnte jederzeit neue Elemente hinzufügen. Speichern Sie die Datei dann einfach erneut über Für Web speichern als .png (oder was auch immer) und haben Sie ein neues Sprite-Sheet, ohne dass sich etwas bewegt.

Automatisierte Lösungen funktionieren selten für komplexe Probleme.

Das ist genau die Technik, die ich immer benutzt habe.
So habe ich es normalerweise gemacht ... außer ich habe so viele Symbole, dass die Idee, dies manuell zu tun, ein bisschen seelentötend ist :-/

Die Antwort auf Ihre Träume von der Verwaltung von Sprites mit Sass und Compass .

Compass macht es sehr einfach, mehrere Bilder zu einem Sprite zu kombinieren und sie dann im Laufe des Projekts zu verwalten.

Hier ist ein weiteres Tutorial mit weiteren Beispielen: Webdesign: CSS Image Sprite With Compass

Tatsächlich habe ich dieses Juwel gefunden

http://spritepad.wearekiss.com/

Ich kann SpritePads speichern und bei Bedarf weiter hinzufügen. Die UX auf diesem ist ein bisschen mangelhaft (IMO), aber es hat mir so viel Zeit gespart, dass es lächerlich war.

Ich bin kürzlich auf dieses Problem gestoßen und habe ein Tool namens Stitches gefunden . Sie können Bilder hineinziehen und auf verschiedene Weise organisieren. Diese App generiert ein Sprite-Sheet sowie ein CSS-Dokument und unterstützt auch LESS.