Strumenti per creare sprite CSS? [chiuso]

Ci sono buoni strumenti per creare sprite CSS?

IDEALMENTE Vorrei dargli una directory di immagini e un file .css esistente che fa riferimento a quelle immagini e che crei un'immagine grande ottimizzata con tutte le piccole immagini E cambi il mio file .css per fare riferimento a quelle immagini.

Almeno vorrei che prendesse una directory di immagini e generasse un grande sprite e il .css necessario per usarli come sfondo.

Ci sono buoni plugin di Photoshop o app completamente funzionanti per farlo?

Questo farà per te il 90% del lavoro: CSS Sprite Generator . Dovrai comunque modificare tu stesso le regole, ma lo strumento ti fornirà i frammenti di codice necessari per il nuovo file CSS.

Instant Sprite è un generatore di sprite CSS nel browser su cui sto lavorando. È davvero veloce, ma non ha abbastanza funzioni come alcune delle altre. Attualmente funziona solo in Firefox o Chrome, poiché utilizza JavaScript FileReader e HTML Canvas per generare gli sprite all'interno del browser Web senza caricamenti.

Ora c'è Sprite Me di Steve Souders. Basta provarlo e sembra funzionare abbastanza bene.

Ecco il link http://spriteme.org/ ed ecco il post sul blog che lo annuncia.

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

Sembra promettente:

http://csssprites.org/

Inoltre ho trovato questo articolo che contiene alcune informazioni utili e anche alcuni commenti dei lettori che vale la pena leggere.

Anche apparentemente google web toolkit ha qualcosa - quindi se lo stai usando potrebbe valere la pena dare un'occhiata.

Prova questo:

http://spritepad.wearekiss.com/

ZeroSprites è un generatore di sprite CSS finalizzato alla minimizzazione delle aree mediante algoritmi di pianificazione dei piani VLSI.

ho trovato questo abbastanza veloce anche se il limite di upload di 500K potrebbe essere una seccatura. il codice sorgente è disponibile qui

Tonttu è un'applicazione basata su Adobe AIR che fornisce un'interfaccia semplice per la creazione di potenti immagini Sprite CSS. È possibile specificare FiledWidth e FieldHeight o ordinare le immagini.
Crea immagini Sprite CSS con Tonttu Desktop Tool

Non è ancora chiaro se entrerà nel framework ASP.NET di base, ma ecco un progetto codeplex di Microsoft per csssprites:

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

se ti piace, usalo o semplicemente come l'idea, aggiungi un commento. Penso che sarebbe una grande cosa avere nel framework ASP.NET. Non l'ho usato personalmente (ho dovuto inventare la ruota da solo) ma ha ottenuto buone recensioni.

Include i seguenti componenti:

• API per la generazione automatica di sprite e immagini incorporate
• Controlli e helper che forniscono un modo conveniente per chiamare l'API

Funzionalità aggiunte nella seconda versione:

• Un controllo di collegamento CSS per Web Form (seleziona il file CSS corretto per il browser dell'utente, ma non visualizza un'immagine)
• Utilizzo di percorsi di cartelle personalizzati diversi da App_Sprites
• Modifica della direzione di affiancamento delle immagini sprite
• Unione del CSS generato con il CSS dell'utente

Funzionalità in esame per le versioni future:

• Selezione automatica del colore di sfondo sprite più efficiente
• Minimizzare automaticamente il CSS renderizzato
• Compilazione su .NET 3.5

Basta usare http://sprites.scherpontwikkeling.nl/ può generare sprite anche dagli URL dei siti Web ... è possibile integrare i tuoi sprite dopo aver sviluppato il tuo sito Web. È molto facile da usare;)

Non una risposta diretta ma ai miei colleghi sviluppatori e integratori web, considera semplicemente l'allineamento di ogni sprite ai poteri di due; ad esempio una griglia di 16 pixel o 32 pixel. Rende molto più semplice il calcolo degli offset nel file CSS. Tutto lo spazio bianco tra non importa poiché i formati gifd e png lo comprimono molto bene.

Compass CSS Framework ha una generazione automatica di sprite .

Se ti piace Java, puoi usare GWT 1.5+ che viene fornito con qualcosa chiamato " ImageBundle ". Il compilatore GWT gestirà tutti i dettagli cattivi per te. Non dovrai nemmeno codificare una singola riga di JavaScript o scrivere CSS.

Ecco uno script che combina le immagini tramite uno script di Photoshop in sprite CSS . Non eseguirà una mappa sprite come richiesto, ma combinerà le immagini in multipli di due (2, 4, 8) se hanno le stesse dimensioni. Preferisco combinare immagini simili (normale, hover, selezionato, genitore di selezionato) piuttosto che avere tutte le immagini in un file.

se stai usando ruby ​​su rotaie, c'è una libreria facile da installare per generare sprite CSS.

http://github.com/aberant/spittle

Esiste un nuovo strumento là fuori chiamato ActiveSprites, parte della gemma active_assets.

Github: http://bitly.com/eRTwU4

Usi un ruby ​​dsl per definire i tuoi sprite e poi fai "rake sprite" e gli sprite e i corrispondenti fogli di stile vengono generati.

È rad!

Ecco un po 'di codice di esempio,

# 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

Questo strumento adotta un nuovo approccio in quanto assembla le immagini richieste al volo come servizio http. Questo rende l'intero processo piuttosto semplice (non è richiesta la preelaborazione, si cambiano le immagini in qualsiasi momento): si avvia il servizio e quindi si fa riferimento a qualsiasi immagine desiderata nel proprio HTML:

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

Poiché è dinamico, puoi persino creare sprite da una serie dinamica di immagini come una pagina di anteprima. Tuttavia, non supporta JPEG, ma PNG e GIF funzionano bene.

Ti suggerisco di usare Sprite Master Web . Genero fogli di sprite automaticamente ed esporta il codice CSS per te. Cerca sempre di generare fogli sprite più piccoli con algoritmi avanzati.

Ecco uno screenshot e un video di YouTube

Nessuno di questi strumenti ha soddisfatto i miei requisiti, quindi ne ho scritto uno che utilizza la minuscola libreria di immagini di Mark Tylers, mtpixel (ora parte di mtcelledit ) Non è super esteso ma è facilmente estendibile attraverso le funzioni integrate di mtpixel che includono: scala di grigi, inversione di colore , rotazione, nitidezza, quantizzazione, posterizzazione, rotazione (verticale e orizzontale), trasformazione, rgb-> indicizzato, indicizzato-> rgb, rilevamento dei bordi, rilievo, disegno di poligoni, testo e altro.

Tutto quello che fai è passargli un set di immagini come args (supporta png, gif e jpeg) e produrrà un pg rgb chiamato sprite.png insieme all'utile immagine che taglia i dati su stdout. Lo uso negli script bash per velocizzare un'intera directory di immagini e generare i dati di slicing per la generazione automatica di CSS (con la speranza di renderlo in grado di sostituire automagicamente i tag img esistenti con un po 'di sed / awk creativo)

I pacchetti binari per Puppy Linux saranno qui:

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

Il mio caso d'uso richiedeva solo di collegare le immagini verticalmente in un nuovo png, quindi è tutto ciò che fa, ma il mio codice sorgente è di dominio pubblico e la libreria mtcelledit è gpl3. Con mtpixel collegato staticamente, il binario è <100kb (solo pochi kb quando collegato dinamicamente) e le uniche altre dipendenze sono libpng, libjpeg e libgif (e il tipo di file con il mtpixel ufficiale, ma non avevo bisogno del supporto del testo, quindi ho commentato i bit di freetype nella build statica)

sentiti libero di modificare per le tue esigenze:

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

Se si utilizza .net, consultare http://www.RequestReduce.com . Non solo crea automaticamente il file sprite, ma lo fa al volo attraverso un HttpModule insieme a unire e minimizzare tutti i CSS. Ottimizza anche l'immagine dello sprite utilizzando la quantizzazione e la compressione senza perdita di dati e gestisce la pubblicazione dei file generati utilizzando le etichette ETags e Expires per garantire una cache ottimale del browser. L'installazione è banale e comporta solo una semplice modifica di web.config. Vedi il mio post sul blog sulla sua adozione da parte della Galleria di esempi di Microsoft Visual Studio e MSDN.

ho recentemente trovato questi strumenti: SpriteRight http://spriterightapp.com/

SpriteRight è un generatore di fogli elettronici CSS per Mac che ti consente di importare immagini o fogli di stile esistenti. Fai caricare i tuoi siti più velocemente, riduci i costi della larghezza di banda e risparmia tempo. SpriteRight genera anche il codice CSS al volo.