¿Herramientas para hacer sprites CSS? [cerrado]

¿Hay alguna buena herramienta para hacer sprites CSS?

IDEALMENTE Me gustaría darle un directorio de imágenes y un archivo .css existente que haga referencia a esas imágenes y que cree una imagen grande optimizada con todas las pequeñas imágenes Y cambie mi archivo .css para que haga referencia a esas imágenes.

Al menos, me gustaría que tomara un directorio de imágenes y generara un sprite grande y el .css necesario para usar cada uno como fondo.

¿Hay buenos complementos de Photoshop o aplicaciones completas para hacer esto?

Esto hará el 90% del trabajo por usted: CSS Sprite Generator . Aún necesitará editar las reglas usted mismo, pero la herramienta le dará los fragmentos de código que necesita para el nuevo archivo CSS.

Instant Sprite es un generador de sprites CSS en el navegador en el que estoy trabajando. Es realmente rápido, pero no tiene tantas características como algunas de las otras. Actualmente solo funciona en Firefox o Chrome, ya que utiliza JavaScript FileReader y HTML Canvas para generar los sprites dentro del navegador web sin cargas.

Ahora está Sprite Me de Steve Souders. Simplemente lo prueba y parece funcionar bastante bien.

Aquí está el enlace http://spriteme.org/ y aquí está la publicación del blog que lo anuncia.

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

Esto parece prometedor:

http://csssprites.org/

También encontré este artículo que tiene información útil e incluso algunos comentarios de lectores que vale la pena leer.

También, aparentemente, el kit de herramientas web de Google tiene algo, por lo que si está utilizando eso, puede valer la pena echarle un vistazo.

Prueba esto:

http://spritepad.wearekiss.com/

ZeroSprites es un generador de sprites CSS destinado a la minimización del área utilizando algoritmos de planificación de piso VLSI.

Encontré esto bastante rápido, aunque ese límite de carga de 500K podría ser una molestia. el código fuente está disponible aquí

Tonttu es una aplicación basada en Adobe AIR que proporciona una interfaz fácil para crear potentes imágenes CSS Sprites. Puede especificar FiledWidth y FieldHeight u ordenar imágenes.
Cree imágenes de sprites CSS con la herramienta de escritorio Tonttu

Todavía no está claro si entrará en el marco principal de ASP.NET, pero aquí hay un proyecto de codeplex de Microsoft para csssprites:

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

si te gusta, úsalo, o simplemente si te gusta la idea, agrega un comentario. Creo que esto sería una gran cosa para tener en el marco ASP.NET. No lo he usado personalmente (tuve que inventar la rueda yo mismo) pero tiene buenas críticas.

Incluye los siguientes componentes:

• API para generar automáticamente sprites e imágenes en línea
• Controles y ayudantes que proporcionan una forma conveniente de llamar a la API

Características agregadas en la segunda versión:

• Un control de enlace CSS para Web Forms (selecciona el archivo CSS adecuado para el navegador del usuario, pero no muestra una imagen)
• Usar rutas de carpetas personalizadas que no sean App_Sprites
• Cambiar la dirección del mosaico de las imágenes de sprites
• Fusionar el CSS generado con el propio CSS de un usuario

Características bajo consideración para futuras versiones:

• Seleccionar automáticamente el color de fondo de sprite más eficiente
• Minificar automáticamente el CSS renderizado
• Compilando contra .NET 3.5

Simplemente use http://sprites.scherpontwikkeling.nl/ también puede generar sprites a partir de las URL del sitio web ... puede integrar sus sprites después de desarrollar su sitio web. Es muy fácil de usar ;)

No es una respuesta directa, pero para mis colegas desarrolladores e integradores web, considere simplemente alinear cada sprite a potencias de dos; por ejemplo, una cuadrícula de 16 píxeles o 32 píxeles. Hace que el cálculo de las compensaciones en el archivo CSS sea mucho más fácil. No importa todo el espacio en blanco, ya que los formatos gifd y png se comprimen muy bien.

Compass CSS Framework tiene generación automática de sprites .

Si te gusta Java, puedes usar GWT 1.5+ que viene con algo llamado " ImageBundle ". El compilador GWT se encargará de todos los detalles desagradables para usted. Ni siquiera tendrá que codificar una sola línea de JavaScript o escribir CSS.

Aquí hay un script que combina imágenes a través de un script de Photoshop en sprites CSS . No hará un mapa de sprites como usted solicitó, pero combinará imágenes en múltiplos de dos (2, 4, 8) si son del mismo tamaño. Prefiero combinar imágenes similares (normal, pasar el mouse, seleccionado, padre de seleccionado) que tener todas las imágenes en un archivo.

Si está utilizando Ruby on Rails, hay una biblioteca fácil de instalar para generar sprites CSS.

http://github.com/aberant/spittle

Hay una nueva herramienta llamada ActiveSprites, parte de la gema active_assets.

Github: http://bitly.com/eRTwU4

Utiliza un dsl de ruby ​​para definir tus sprites y luego haces "rake sprites" y se generan los sprites y las hojas de estilo correspondientes.

Es rad!

Aquí hay un código de muestra,

# 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

Esta herramienta adopta un enfoque novedoso, ya que reúne las imágenes solicitadas sobre la marcha como un servicio http. Esto hace que todo el proceso sea bastante simple (no se requiere preprocesamiento, cambie las imágenes en cualquier momento): inicia el servicio y luego hace referencia a las imágenes que desee en su HTML:

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

Debido a que es dinámico, incluso puede crear sprites a partir de un conjunto dinámico de imágenes, como una página de miniaturas. Sin embargo, no admite JPEG, pero PNG y GIF funcionan bien.

Te sugiero que uses Sprite Master Web . Genero hojas de sprites automáticamente y exporto código CSS para usted. Siempre trata de generar las hojas de sprites más pequeñas con algoritmos avanzados.

Aquí hay una captura de pantalla y un video de youtube

Ninguna de estas herramientas cumplió con mis requisitos, así que escribí una que usa la pequeña biblioteca de imágenes de Mark Tylers, mtpixel (ahora parte de mtcelledit ). No es muy extensa pero es fácilmente extensible a través de las funciones integradas de mtpixel que incluyen: escala de grises, inversión de color , rotación, nitidez, cuantización, posterización, volteo (vertical y horizontal), transformación, rgb-> indexado, indexado-> rgb, detección de bordes, relieve, dibujo de polígonos, texto y más.

Todo lo que debe hacer es pasarle un conjunto de imágenes como args (admite png, gif y jpeg) y generará un png rgb llamado sprite.png junto con los datos útiles de corte de imágenes para stdout. Lo uso en scripts de bash para acelerar un directorio completo de imágenes y generar los datos de corte para la generación automática de css (con la esperanza de que eventualmente sea capaz de reemplazar automáticamente las etiquetas img existentes con un poco de sed / awk creativo)

Los paquetes binarios para cachorros linux estarán aquí:

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

Mi caso de uso solo requería empalmar las imágenes verticalmente en un nuevo png, así que eso es todo lo que hace, pero mi código fuente es de dominio público y la biblioteca mtcelledit es gpl3. Con mtpixel enlazado estáticamente, el binario es <100kb (solo unos pocos kb cuando está enlazado dinámicamente) y las únicas otras dependencias son libpng, libjpeg y libgif (y freetype con el mtpixel oficial, pero no necesitaba el soporte de texto, así que no comentó los bits de tipo libre en la compilación estática)

siéntase libre de modificar para sus propias necesidades:

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

Si está utilizando .net, consulte http://www.RequestReduce.com . No solo crea el archivo sprite automáticamente, sino que lo hace sobre la marcha a través de un HttpModule junto con la fusión y minimización de todos los CSS. También optimiza la imagen del sprite mediante la cuantización y la compresión sin pérdidas, y maneja el servicio de los archivos generados mediante ETags y encabezados Expires para garantizar un almacenamiento en caché óptimo del navegador. La configuración es trivial e implica un simple cambio web.config. Vea mi publicación de blog sobre su adopción por la galería de ejemplos de Microsoft Visual Studio y MSDN.

Recientemente encontré estas herramientas: SpriteRight http://spriterightapp.com/

SpriteRight es un generador de hojas de sprites CSS para Mac que le permite importar sus imágenes u hojas de estilo existentes. Haga que sus sitios se carguen más rápido, reduzca los costos de ancho de banda y ahorre tiempo. SpriteRight incluso genera código CSS sobre la marcha.