Tools zum Erstellen von CSS-Sprites? [geschlossen]

126

Gibt es gute Werkzeuge, um CSS-Sprites zu erstellen?

IDEAL Ich möchte ihm ein Verzeichnis mit Bildern und eine vorhandene CSS-Datei geben, die auf diese Bilder verweist, und ein großes Bild erstellen lassen, das mit all den kleinen Bildern optimiert ist, UND meine CSS-Datei so ändern, dass sie auf diese Bilder verweist.

Zumindest möchte ich, dass es ein Verzeichnis von Bildern nimmt und ein großes Sprite und die CSS-Datei generiert, die erforderlich sind, um jedes als Hintergrund zu verwenden.

Gibt es dafür gute Photoshop-Plugins oder vollwertige Apps?

Simon_Weaver
quelle
Könnten Sie bitte etwas näher darauf eingehen, versuchen Sie, alle Sprites auf einem größeren Bild zu kompilieren, und verwenden Sie dann CSS, um den Teil des Bildes anzuzeigen, der das richtige Sprite enthält. (Schiebetürtechnik)
teh_noob
1
Gibt es eine Möglichkeit, die Hintergrundfarbe zu ändern, damit ich meine weißen Symbole auf dem Spritepad sehen kann?
Jim
24
Ich verstehe wirklich nicht, warum dies geschlossen wurde? Es scheint viele gute nützliche Antworten zu geben. Dies sollte wohl eine Superuser-Frage sein, da ich keine bestimmte Programmiersprache erwähne, aber ich mag die Antworten, die ich erhalten habe, und sie waren offensichtlich für viele nützlich.
Simon_Weaver
3
Bitte, Gott, lösche diese Frage nicht, sie ist die hilfreichste Liste im Internet für dieses Problem und hängt sicherlich mit der Programmierung zusammen (auch wenn es sich nicht um eine Programmierfrage handelt) . Dies ist definitiv ein Urteilsspruch und hätte von den Mods nicht gewaltsam geschlossen werden dürfen.
Dafür

Antworten:

46

Dies erledigt 90% der Arbeit für Sie: CSS Sprite Generator . Sie müssen die Regeln noch selbst bearbeiten, aber das Tool gibt Ihnen die Codefragmente, die Sie für die neue CSS-Datei benötigen.

Sophie Alpert
quelle
@ben perfekt! vorausgesetzt es funktioniert ;-)
Simon_Weaver
1
Ich bin ein wenig unzufrieden mit diesem Tool, daher wähle ich es als meine ausgewählte Antwort. es hat mein Bild beschnitten und es erklärt nicht sehr gut, warum es große Lücken zwischen den Bildern
hinterlässt
Ich mag diese Lösung nicht, obwohl ich denke, dass sie in Ordnung funktioniert. SpriteMe scheint viel besser zu funktionieren.
Chuck Le Butt
2
Das Problem mit diesem Tool ist, dass die Bilder nicht in voller Qualität sind.
Jim
50

Instant Sprite ist ein CSS-Sprite-Generator im Browser, an dem ich arbeite. Es ist sehr schnell, hat aber nicht so viele Funktionen wie einige der anderen. Es funktioniert derzeit nur in Firefox oder Chrome, da JavaScript FileReader und HTML Canvas verwendet werden, um die Sprites im Webbrowser ohne Uploads zu generieren.

Brian Grinstead
quelle
1
Wow, was für ein tolles Werkzeug. Vielen Dank!
Vivian River
Ich habe Ihr Tool verwendet, um an einigen Produktionswebsites zu arbeiten, seit Sie hier gepostet haben. Es ist sehr einfach und leicht.
Vivian River
7
+1. Ihr Tool ist weitaus besser als der Rest, den ich ausprobiert habe.
Ed Bayiates
3
Dies ist die bisher intuitivste ... danke ... (obwohl es das "intelligente" Layout von Sprites enthalten sollte, um Leistungsprobleme zu minimieren)
Kumarharsh
2
Vielen Dank an alle! @Harsh, ich stimme dem Layout zu - ich habe vor einiger Zeit angefangen, damit zu experimentieren, aber es hat nie ganz funktioniert: github.com/bgrins/InstantSprite/tree/bin-pack
Brian Grinstead
31

Es gibt jetzt Sprite Me von Steve Souders. Probiert es einfach aus und es scheint ziemlich gut zu funktionieren.

Hier ist der Link http://spriteme.org/ und hier ist der Blog-Beitrag, der dies ankündigt.

http://www.stevesouders.com/blog/2009/09/14/spriteme/

Jauder Ho
quelle
2
+1 Dies ist erstaunlich einfach zu bedienen: Navigieren Sie einfach zu der gewünschten Seite und klicken Sie auf das SpriteMe-Lesezeichen ... Es erstellt die Bilder und das CSS automatisch!
Chuck Le Butt
Es ist ein nettes Tool, erfordert jedoch eine ZIP-Datei Ihrer Bilder und die Reihenfolge, in der Ihre Sprites abgelegt werden, ist die ZIP-Reihenfolge. Mit dem folgenden Tool von Brian können Sie Dateien hochladen und per Drag & Drop die Reihenfolge ändern.
Ed Bayiates
Ich mag, dass es Quellcode frei verfügbar hat
lkraav
13

Das sieht vielversprechend aus:

http://csssprites.org/

Außerdem habe ich diesen Artikel gefunden, der einige nützliche Informationen und sogar einige lesenswerte Leserkommentare enthält.

Anscheinend hat das Google Web Toolkit auch etwas - wenn Sie es also verwenden, lohnt es sich möglicherweise, es sich anzusehen.

Simon_Weaver
quelle
Scheint, als ob die Seite nicht mehr funktioniert ...
Bob
smartsprites.osinski.name wurde in csssprites.org umbenannt , daher habe ich es für Sie bearbeitet. Es scheint die einzige der Optionen zu sein, die in den Erstellungsprozess integriert werden können, wie ich hier gesehen habe.
Ripper234
9

Versuche dies:

http://spritepad.wearekiss.com/

Phönix
quelle
Das ist definitiv legitim. Gespeicherte Spritemaps sind meiner Meinung nach ein Schlüssel, sodass sich nur relevante Bilder und Codezeilen im Laufe der Zeit ändern müssten, anstatt den gesamten Koordinatensatz bei jeder Änderung des Bildinhalts neu zu berechnen.
lkraav
7

ZeroSprites ist ein CSS- Spritesgenerator zur Flächenminimierung mithilfe von VLSI-Bodenplanungsalgorithmen.

Clyfish
quelle
6

fand dies ziemlich schnell , obwohl das Upload-Limit von 500K ein Schmerz sein könnte. Der Quellcode ist hier verfügbar

Scott Evernden
quelle
Warum sollte ein Upload von 500 KB ein Problem sein? Ich würde wahrscheinlich nie> 100kb hochladen wollen
Simon_Weaver
Ich sagte, es könnte ein Schmerz sein. Es hängt irgendwie von der Anwendung ab, nein? .. Eine Zip-Datei voller mittelgroßer PNGs, zum Beispiel in einem großen Raster, könnte in der Nähe dieser Zahl ausgeführt werden. Wenn es nur kleine Bitmaps sind, dann sicher / kein Problem.
Scott Evernden
1
Ja, aber der springende Punkt bei CSS-Sprites ist, zu verhindern, dass viele kleine Bilder mit vielen Anfragen geladen werden. Wenn Sie wirklich so viele kleine Sprites hätten, würde das Laden lange dauern. In dieser Zeit würde keine angezeigt. Am besten halte ich sie für höchstens 100kb. Sie können immer mehrere tun
Simon_Weaver
Ich arbeite viel mit Bildern. vielleicht nicht kleine CSS-Bitmaps. Vielleicht habe ich deshalb den Vorbehalt gegeben. Ihre Bedürfnisse sind unterschiedlich / ok. 500 KB werden auf den meisten Breitbändern in einer Sekunde eintreffen. Ich war der erste, der die akzeptierte Antwort auf Ihre Frage lieferte, und hier bin ich niedergeschlagen ~ und verteidige meine Sprache? was auch immer ...
Scott Evernden
Es war ein Schmerz für mich, da die Bilder, mit denen ich angefangen habe, ein Bündel waren, das größer als diese Grenze war, und ich musste sie ausschneiden oder optimieren, bevor ich sie überhaupt verwenden konnte.
Kzqai
4

Es ist noch nicht klar, ob es in das ASP.NET-Kernframework gelangen wird, aber hier ist ein Microsoft-Codeplex-Projekt für CSSsprites:

http://aspnet.codeplex.com/releases/view/50869

Wenn es dir gefällt - benutze es - oder magst du einfach die Idee, dann füge einen Kommentar hinzu. Ich denke, das wäre eine großartige Sache im ASP.NET-Framework. Habe es nicht persönlich benutzt (ich musste das Rad selbst erfinden), aber es hat gute Kritiken bekommen.


Es enthält die folgenden Komponenten:

  • API zum automatischen Generieren von Sprites und Inline-Bildern
  • Steuerelemente und Helfer, die eine bequeme Möglichkeit zum Aufrufen der API bieten

In der zweiten Version hinzugefügte Funktionen:

  • Ein CSS-Verknüpfungssteuerelement für Web Forms (wählt die richtige CSS-Datei für den Browser des Benutzers aus, zeigt jedoch kein Bild an)
  • Verwenden anderer benutzerdefinierter Ordnerpfade als App_Sprites
  • Ändern der Kachelrichtung von Sprite-Bildern
  • Zusammenführen des generierten CSS mit dem eigenen CSS eines Benutzers

Funktionen, die für zukünftige Versionen in Betracht gezogen werden:

  • Automatische Auswahl der effizientesten Sprite-Hintergrundfarbe
  • Automatisches Minimieren des gerenderten CSS
  • Kompilieren gegen .NET 3.5
Simon_Weaver
quelle
4

Verwenden Sie einfach http://sprites.scherpontwikkeling.nl/ , um Sprites aus Website-URLs zu generieren. Sie können Ihre Sprites nach der Entwicklung Ihrer Website integrieren. Es ist sehr einfach zu bedienen;)

John
quelle
3

Keine direkte Antwort, aber für meine Kollegen, Entwickler und Webintegratoren, sollten Sie jedes Sprite einfach auf Zweierpotenzen ausrichten. zB ein 16-Pixel- oder 32-Pixel-Raster. Dies erleichtert die Berechnung von Offsets in der CSS-Datei erheblich. Der gesamte Leerraum dazwischen spielt keine Rolle, da die Formate gifd und png dies sehr gut komprimieren.


quelle
Guter Tipp, obwohl ich hauptsächlich versuche, Text-Header (jeweils 1-2 KB) in einer einzigen Datei zu kombinieren. Ich mache mir keine allzu großen Sorgen um Leerzeichen, weil ich weiß, dass sie komprimiert werden - ich verstehe nur nicht ganz, warum Werkzeuge zur Herstellung von Sprites so viel daraus machen
Simon_Weaver
Eine Einschränkung: Während das Leerzeichen im Bild für den Transport komprimiert wird, wird es erweitert und belegt beim Laden des Browsers Speicher. Die blinde Verwendung von Tools zur automatischen Sprite-Generierung kann zu großen Bildern führen, die den Speicherbedarf auf diesen Seiten erhöhen können. Bei der Gruppierung von Bildern zu Sprite-Blättern ist einige Sorgfalt erforderlich, um dies in angemessenen Grenzen zu halten.
Sam Foster
Sam: Stimmt! Fand das später heraus. Wenn das Sprite-Bild sehr breit oder hoch ist, sollten Sie dies berücksichtigen! Besonders für Handy-Apps (weniger Speicher). Simon: Der Leerraum ist wahrscheinlich auf Einschränkungen von CSS zurückzuführen. Selbst wenn Sie auf einem Hintergrund keine Wiederholung verwenden, wird das Sprite-Bild durch Auffüllen, Zeilenhöhe und im Grunde den gesamten Hintergrundbereich des Elements mit Ausnahme von Rändern und Rändern angezeigt. Angenommen, Sie haben ein Symbol für einen Link. Wenn der Link mehrere Linien umfassen würde, könnten andere Symbole des Sprites durchscheinen. Das Hinzufügen von genügend Leerzeichen macht dies "widerstandsfähiger".
@ Simon_Weaver - Basierend auf dem Feedback aller hier habe ich ein Sprite-Tool gepostet, das einfach ist stackoverflow.com/a/13281578/1162141
technosaurus
3

Das Compass CSS Framework verfügt über eine automatische Sprite-Generierung .

Salman von Abbas
quelle
2
Ich bin verblüfft über die Anzahl der Leute, die Compass nicht für die Sprite-Generierung verwenden. Compass wurde dafür geboren ...
justnorris
2

Wenn Sie Java mögen, können Sie GWT 1.5+ verwenden, das mit " ImageBundle " geliefert wird . Der GWT-Compiler übernimmt alle bösen Details für Sie. Sie müssen nicht einmal eine einzige Zeile JavaScript codieren oder CSS schreiben.

Aaron Digulla
quelle
2

Hier ist ein Skript, das Bilder über ein Photoshop-Skript zu CSS-Sprites kombiniert . Es wird keine Sprite-Karte erstellt, wie Sie gefragt haben, aber es werden Bilder in Vielfachen von zwei (2, 4, 8) kombiniert, wenn sie dieselbe Größe haben. Ich bevorzuge es, ähnliche Bilder (normal, Hover, ausgewählt, übergeordnet von ausgewählt) zu kombinieren, als alle Bilder in einer Datei zu haben.

Stephen James
quelle
2

Es gibt ein neues Tool namens ActiveSprites, das Teil des Gems active_assets ist.

Github: http://bitly.com/eRTwU4

Sie verwenden ein Ruby-DSL, um Ihre Sprites zu definieren, und führen dann "Rake-Sprites" aus. Die Sprites und die entsprechenden Stylesheets werden generiert.

Es ist großartig!

Hier ist ein Beispielcode:

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end
Shwoodard
quelle
2

https://github.com/northpoint/SpeedySprite

Dieses Tool verfolgt einen neuartigen Ansatz, indem es Ihre angeforderten Bilder im laufenden Betrieb als http-Dienst zusammenstellt. Dies macht den gesamten Vorgang ziemlich einfach (keine Vorverarbeitung erforderlich, Bilder können jederzeit geändert werden): Sie starten den Dienst und verweisen dann auf die gewünschten Bilder in Ihrem HTML-Code:

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

Da es dynamisch ist, können Sie sogar Sprites aus einem dynamischen Satz von Bildern erstellen, z. B. einer Miniaturbildseite. Unterstützt JPEG zwar nicht, aber PNG und GIF funktionieren einwandfrei.

Magnus
quelle
1

Ich empfehle Ihnen, Sprite Master Web zu verwenden . Ich generiere automatisch Sprite-Blätter und exportiere CSS-Code für Sie. Es wird immer versucht, kleinste Sprite-Blätter mit fortschrittlichen Algorithmen zu generieren.

Hier ist ein Screenshot und ein Youtube-Video

Geben Sie hier die Bildbeschreibung ein

bateristt
quelle
Bemerkenswert ist, dass dies keine kostenlose oder Open-Source-App ist, aber einen angemessenen Preis von 3,99 US-Dollar hat. Es ist gut gebaut und macht gute PNG-Komprimierung.
t.mikael.d
Nur Mac. Schade, dieser sah vielversprechend aus.
Mahn
1

Keines dieser Tools erfüllte meine Anforderungen, daher habe ich eines geschrieben, das Mark Tylers winzige Bildbibliothek mtpixel (jetzt Teil von mtcelledit ) verwendet. Es ist nicht besonders umfangreich, aber es kann leicht durch die integrierten Funktionen von mtpixel erweitert werden, darunter: Graustufen, Farbumkehrung , Drehen, Schärfen, Quantisieren, Posterisieren, Spiegeln (vertikal und horizontal), Transformieren, RGB-> Indiziert, Indiziert-> RGB, Kantenerkennung, Prägen, Zeichnen von Polygonen, Text und mehr.

Alles, was Sie tun, ist, eine Reihe von Bildern als Argumente zu übergeben (unterstützt PNG, GIF und JPEG) und es wird ein RGB-PNG namens sprite.png zusammen mit den nützlichen Bildaufteilungsdaten an stdout ausgegeben. Ich verwende es in Bash-Skripten, um ein ganzes Verzeichnis von Bildern zu spritisieren und die Slicing-Daten für die automatische Generierung von CSS auszugeben (in der Hoffnung, dass es schließlich in der Lage ist, vorhandene img-Tags automatisch durch ein bisschen kreatives sed / awk zu ersetzen).

Binäre Pakete für Puppy Linux werden hier sein:

http://murga-linux.com/puppy/viewtopic.php?t=82009

In meinem Anwendungsfall mussten die Bilder nur vertikal in ein neues PNG gespleißt werden. Das ist alles, aber mein Quellcode ist gemeinfrei und die mtcelledit-Bibliothek ist gpl3. Wenn mtpixel statisch verknüpft ist, ist die Binärdatei <100 KB (bei dynamischer Verknüpfung nur wenige KB) und die einzigen anderen Abhängigkeiten sind libpng, libjpeg und libgif (und Freetype mit dem offiziellen mtpixel, aber ich brauchte keine Textunterstützung, also habe ich hat die Freetype-Bits im statischen Build auskommentiert)

Fühlen Sie sich frei, für Ihre eigenen Bedürfnisse zu ändern:

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}
Technosaurus
quelle
0

Wenn Sie .net verwenden, besuchen Sie http://www.RequestReduce.com . Die Sprite-Datei wird nicht nur automatisch erstellt, sondern im laufenden Betrieb über ein HttpModule zusammen mit dem Zusammenführen und Minimieren des gesamten CSS. Es optimiert außerdem das Sprite-Bild mithilfe von Quantisierung und verlustfreier Komprimierung und übernimmt die Bereitstellung der generierten Dateien mithilfe von ETags- und Expires-Headern, um ein optimales Browser-Caching sicherzustellen. Das Setup ist trivial und beinhaltet nur eine einfache Änderung von web.config. Weitere Informationen zur Übernahme durch die Microsoft Visual Studio- und MSDN-Beispielgalerie finden Sie in meinem Blogbeitrag .

Matt Wrock
quelle
0

Ich habe kürzlich diese Tools gefunden: SpriteRight http://spriterightapp.com/

SpriteRight ist ein CSS-Spritesheet-Generator für den Mac, mit dem Sie Ihre vorhandenen Bilder oder Stylesheets importieren können. Beschleunigen Sie das Laden Ihrer Websites, senken Sie die Bandbreitenkosten und sparen Sie Zeit. SpriteRight generiert sogar CSS-Code im laufenden Betrieb.

Prestarocket
quelle
Bemerkenswert ist, dass dies keine kostenlose oder Open-Source-App ist, aber einen angemessenen Preis von 4,99 US-Dollar hat. Es ist gut gebaut und bietet eine gute PNG-Komprimierung, mehr Funktionalität als das oben genannte "Sprite Master Web".
t.mikael.d
Und es ist auch nur Mac.
Mahn