Tools zum Erstellen von CSS-Sprites? [geschlossen]

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?

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.

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.

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/

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.

Versuche dies:

http://spritepad.wearekiss.com/

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

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

Tonttu ist eine Adobe AIR-basierte Anwendung, die eine einfache Oberfläche zum Erstellen leistungsstarker CSS Sprites-Bilder bietet. Sie können FiledWidth und FieldHeight angeben oder Bilder sortieren.
Erstellen Sie CSS Sprites-Bilder mit dem Tonttu Desktop Tool

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

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;)

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.

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

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.

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.

Wenn Sie Ruby on Rails verwenden, gibt es eine einfach zu installierende Bibliothek zum Generieren von CSS-Sprites.

http://github.com/aberant/spittle

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

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.

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

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; 
}

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 .

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.