Ferramentas para criar sprites CSS? [fechadas]

Existem boas ferramentas para fazer sprites de CSS?

IDEALMENTE, gostaria de fornecer um diretório de imagens e um arquivo .css existente que se refira a essas imagens e fazer com que ele crie uma imagem grande otimizada com todas as pequenas imagens E altere meu arquivo .css para se referir a essas imagens.

No mínimo, eu gostaria que ele pegasse um diretório de imagens e gerasse um sprite grande e o .css necessário para usar cada um como pano de fundo.

Existem bons plugins de photoshop ou aplicativos totalmente expandidos para fazer isso?

Isso fará 90% do trabalho para você: CSS Sprite Generator . Você ainda precisará editar as regras, mas a ferramenta fornecerá os fragmentos de código necessários para o novo arquivo CSS.

Instant Sprite é um gerador de sprites CSS no navegador em que estou trabalhando. É muito rápido, mas não possui tantos recursos quanto alguns dos outros. Atualmente, ele só funciona no Firefox ou Chrome, pois usa JavaScript FileReader e HTML Canvas para gerar os sprites dentro do navegador da Web sem uploads.

Agora existe o Sprite Me de Steve Souders. Apenas experimenta e parece funcionar muito bem.

Aqui está o link http://spriteme.org/ e aqui está o post do anúncio.

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

Isso parece promissor:

http://csssprites.org/

Também encontrei este artigo que contém algumas informações úteis e até alguns comentários de leitores que valem a pena ser lidos.

Aparentemente, o Google Web Toolkit aparentemente tem algo - então, se você estiver usando, pode valer a pena conferir.

Tente o seguinte:

http://spritepad.wearekiss.com/

ZeroSprites é um gerador de sprites CSS destinado a minimizar a área usando algoritmos de planejamento de piso VLSI.

Achei este muito rápido, embora o limite de upload de 500K possa ser um problema. o código fonte está disponível aqui

O Tonttu é um aplicativo baseado no Adobe AIR que fornece uma interface fácil para criar imagens poderosas de CSS Sprites. Você pode especificar FiledWidth e FieldHeight ou classificar imagens.
Crie imagens de sprites CSS com a ferramenta Tonttu Desktop

Ainda não está claro se ele entrará na estrutura principal do ASP.NET, mas aqui está um projeto do Microsoft codeplex para csssprites:

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

se você gosta - use - ou curta a idéia, adicione um comentário. Eu acho que isso seria uma grande coisa para ter na estrutura do ASP.NET. Não o usei pessoalmente (eu mesmo tive que inventar a roda), mas ele tem boas críticas.

Inclui os seguintes componentes:

• API para gerar automaticamente sprites e imagens embutidas
• Controles e auxiliares que fornecem uma maneira conveniente de chamar a API

Recursos adicionados na segunda versão:

• Um controle de vinculação CSS para Web Forms (seleciona o arquivo CSS adequado para o navegador do usuário, mas não exibe uma imagem)
• Usando caminhos de pasta personalizados que não sejam App_Sprites
• Alterando a direção lado a lado das imagens de sprite
• Mesclando o CSS gerado com o próprio CSS do usuário

Recursos em consideração para lançamentos futuros:

• Selecionando automaticamente a cor de fundo do sprite mais eficiente
• Minificando automaticamente o CSS renderizado
• Compilando no .NET 3.5

Basta usar http://sprites.scherpontwikkeling.nl/, pois ele também pode gerar sprites a partir dos URLs do site ... você pode integrar seus sprites após o desenvolvimento do site. É muito fácil de usar ;)

Não é uma resposta direta, mas para meus colegas desenvolvedores e integradores de web, considere simplesmente alinhar cada sprite aos poderes de dois; por exemplo, uma grade de 16 ou 32 pixels. Isso facilita muito o cálculo de compensações no arquivo CSS. Todo o espaço em branco entre eles não importa, pois os formatos gifd e png são compactados muito bem.

O Compass CSS Framework possui geração automática de sprites .

Se você gosta de Java, pode usar o GWT 1.5+, que vem com algo chamado " ImageBundle ". O compilador GWT tratará de todos os detalhes desagradáveis ​​para você. Você nem precisará codificar uma única linha de JavaScript ou escrever qualquer CSS.

Aqui está um script que combina imagens via script do Photoshop em sprites CSS . Ele não fará um mapa de sprite como você pediu, mas combinará imagens em múltiplos de dois (2, 4, 8), se forem do mesmo tamanho. Prefiro combinar imagens semelhantes (normal, pairar, selecionado, pai de selecionado) do que ter todas as imagens em um arquivo.

se você estiver usando ruby ​​on rails, existe uma biblioteca fácil de instalar para gerar sprites de css.

http://github.com/aberant/spittle

Existe uma nova ferramenta chamada ActiveSprites, parte da gema active_assets.

Github: http://bitly.com/eRTwU4

Você usa um dsl ruby ​​para definir seus sprites e, em seguida, executa "rake sprites" e os sprites e as folhas de estilo correspondentes são gerados.

É rad!

Aqui está um exemplo de código,

# 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

Essa ferramenta adota uma abordagem inovadora, pois reúne as imagens solicitadas em tempo real como um serviço http. Isso simplifica todo o processo (não é necessário pré-processamento, altera imagens a qualquer momento): você inicia o serviço e depois faz referência às imagens que deseja em seu HTML:

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

Por ser dinâmico, você pode até criar sprites a partir de um conjunto dinâmico de imagens, como uma página em miniatura. No entanto, não suporta JPEG, mas PNG e GIF funcionam bem.

Eu sugiro que você use o Sprite Master Web . Eu gera folhas de sprite automaticamente e exporta o código CSS para você. Ele sempre tenta gerar as menores folhas de sprite com algoritmos avançados.

Aqui está uma captura de tela e vídeo do youtube

Nenhuma dessas ferramentas atendeu aos meus requisitos, então escrevi uma que usa a minúscula biblioteca de imagens de Mark Tylers, mtpixel (agora parte do mtcelledit ). Não é muito extensa, mas é facilmente extensível através das funções internas do mtpixel que incluem: escala de cinza, inversão de cores , rotação, nitidez, quantizar, posterizar, inverter (vertical e horizontal), transformar, rgb-> indexado, indexado-> rgb, detecção de borda, relevo, desenho de polígonos, texto e muito mais.

Tudo o que você faz é passar um conjunto de imagens como args (suporta png, gif e jpeg) e ele produzirá um png rgb chamado sprite.png, juntamente com os dados úteis de corte de imagem no stdout. Eu o uso em scripts bash para criar um diretório inteiro de imagens e gerar os dados de corte para geração automática de css (com a esperança de eventualmente torná-lo capaz de substituir automaticamente as tags img existentes automagicamente por um pouco de sed / awk criativo)

Pacotes binários para filhotes linux estarão aqui:

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

Meu caso de uso exigia unir as imagens verticalmente em um novo png, de modo que é tudo o que faz, mas meu código-fonte é de domínio público e a biblioteca mtcelledit é gpl3. Com o mtpixel vinculado estaticamente, o binário é <100kb (apenas alguns kb quando vinculado dinamicamente) e as únicas outras dependências são libpng, libjpeg e libgif (e tipo livre com o mtpixel oficial, mas eu não precisava do suporte de texto, por isso comentou os bits do tipo livre na compilação estática)

sinta-se à vontade para modificar para suas próprias necessidades:

#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 você estiver usando .net, consulte http://www.RequestReduce.com . Ele não apenas cria o arquivo sprite automaticamente, mas o faz rapidamente através de um HttpModule, além de mesclar e minificar todo o CSS. Ele também otimiza a imagem do sprite usando quantização e compactação sem perdas e lida com a veiculação dos arquivos gerados usando os cabeçalhos ETags e Expira para garantir o cache ideal do navegador. A configuração é trivial, envolvendo apenas uma simples alteração do web.config. Veja minha postagem no blog sobre sua adoção pela galeria de exemplos do Microsoft Visual Studio e do MSDN.

Encontrei recentemente estas ferramentas: SpriteRight http://spriterightapp.com/

SpriteRight é um gerador de planilha CSS para Mac que permite importar imagens ou folhas de estilo existentes. Faça com que seus sites sejam carregados mais rapidamente, reduza os custos de largura de banda e economize tempo. SpriteRight até gera código CSS em tempo real.