Ferramentas para criar sprites CSS? [fechadas]

126

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?

Simon_Weaver
fonte
Veja também stackoverflow.com/questions/519774/…
tehvan 9/02/09
Você poderia elaborar um pouco mais, está tentando compilar todos os sprites em uma imagem maior e depois usar css para exibir a parte da imagem que contém o sprite correto. (técnica de portas de correr)
teh_noob
1
existe uma maneira de alterar a cor de fundo para que eu possa ver meus ícones brancos no spritepad?
Jim
24
Eu realmente não entendo por que isso foi fechado? Parece haver muitas boas respostas úteis. Provavelmente, essa deve ser uma pergunta de superusuário, porque não mencionei nenhuma linguagem de programação específica, mas gosto das respostas que recebi e elas obviamente foram úteis para muitos.
Simon_Weaver
3
Por favor, deus não exclua esta pergunta, é a lista mais útil na Internet para este problema e certamente está relacionada à programação (mesmo que não seja uma questão de programação por assim dizer) . Definitivamente, este é um julgamento e não deveria ter sido fechado à força pelos mods; é para isso que serve o sistema de fechamento de votos da comunidade ...
BlueRaja - Danny Pflughoeft 22/13/13

Respostas:

46

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.

Sophie Alpert
fonte
@ben perfect! supondo que ele funciona ;-)
Simon_Weaver
1
Estou um pouco insatisfeito com esta ferramenta, por isso a escolhi como minha resposta selecionada. acabou por cortar a minha imagem e ele não explicar muito bem por que ele deixa grandes lacunas entre as imagens
Simon_Weaver
Eu não gosto desta solução, embora eu acho que funciona bem. SpriteMe parece funcionar muito melhor.
Chuck Le Butt
2
o problema com esta ferramenta é que as imagens não têm qualidade total.
Jim
50

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.

Brian Grinstead
fonte
1
Uau, que ótima ferramenta. Obrigado!
Vivian Rio
Usei sua ferramenta para trabalhar em alguns sites de produção desde que você postou aqui. É muito simples e fácil.
Vivian Rio
7
+1. Sua ferramenta é muito melhor do que o resto que eu tentei.
Ed Bayiates
3
este é o mais intuitivo ainda ... obrigado ... (embora, ele deve incluir o layout "inteligente" de sprites para minimizar problemas de desempenho)
kumarharsh
2
Obrigado a todos! @Harsh, eu concordo sobre o layout - eu comecei a experimentar com isso há bastante tempo, mas nunca tenho que trabalhar: github.com/bgrins/InstantSprite/tree/bin-pack
Brian Grinstead
31

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/

Jauder Ho
fonte
2
+1 Isso é incrivelmente fácil de usar: basta navegar até a página desejada e clicar no bookmarklet SpriteMe ... Ele cria as imagens e o CSS automaticamente!
Chuck Le Butt
É uma boa ferramenta, mas requer um arquivo ZIP de suas imagens e a ordem em que coloca seus sprites é a ordem ZIP. A ferramenta de Brian abaixo permite que você envie arquivos e arraste e solte para alterar a ordem.
Ed Bayiates
Eu gosto que ele tem código-fonte livremente disponível
lkraav
13

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.

Simon_Weaver
fonte
Parece que a página não funciona mais ...
Bob
smartsprites.osinski.name foi renomeado para csssprites.org , então eu editei para você. Parece ser a uma das poucas opções que podem ser integradas ao processo de compilação, pelo que vi aqui.
ripper234
9

Tente o seguinte:

http://spritepad.wearekiss.com/

Fénix
fonte
Isso é definitivamente legítimo. Os spritemaps salvos IMHO são essenciais, portanto, apenas imagens e linhas de código relevantes precisariam ser alteradas ao longo do tempo, em vez de recalcular toda a coordenada definida a cada alteração no conteúdo da imagem.
lkraav
7

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

clyfish
fonte
6

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

Scott Evernden
fonte
por que o upload de 500kb seria uma dor? eu provavelmente nunca quer fazer upload> 100kb
Simon_Weaver
Eu disse que 'pode' ser uma dor. Sorta depende da aplicação não? .. Um arquivo zip cheio de PNGs de tamanho médio, por exemplo, em uma grade considerável ~ ~ poderia ~ rodar perto desse número. se todos os seus bitmaps são pequenos, com certeza / sem problemas.
911 Scott Evernden
1
sim, mas o ponto principal dos sprites de CSS é impedir que muitas imagens sejam carregadas com muitos pedidos. se você realmente tivesse tantos sprites pequenos, levaria muito tempo para carregar, e nenhum deles seria exibido. melhor mantê-los, eu acho que no máximo 100kb. você sempre pode fazer vários
Simon_Weaver
Eu trabalho muito com imagens. talvez não pequenos bitmaps css. talvez seja por isso que dei a ressalva. suas necessidades são diferentes / ok. 500kb chegará em um segundo na maioria das bandas de banda larga. Eu fui o primeiro a fornecer a resposta aceita para sua pergunta e aqui estou abaixo votado e defendendo meu idioma? o que quer ...
Scott Evernden
Foi uma dor para mim, já que as imagens que eu comecei acabaram sendo um pacote maior em tamanho que esse limite, então tive que cortar ou otimizar antes que pudesse usá-lo.
Kzqai
4

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
Simon_Weaver
fonte
4

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

John
fonte
3

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.


fonte
boa dica, embora eu esteja principalmente tentando combinar cabeçalhos de texto (1-2kb cada) em um único arquivo. Eu não estou preocupado muito com espaço em branco, porque eu sei que vai ficar comprimido para fora - Eu só não entendo completamente por que as ferramentas para fazer sprites fazer tanto dele
Simon_Weaver
Uma ressalva a esse respeito - enquanto o espaço em branco na imagem será compactado para transporte, ele é expandido e ocupa memória quando carregado o navegador. O uso cego de ferramentas automáticas de geração de sprites pode levar a imagens enormes, o que pode aumentar o uso de memória nessas páginas. É necessário algum cuidado ao agrupar imagens para formar folhas de sprite para manter isso dentro de limites razoáveis.
Sam Foster
Sam: Verdade! Descobri isso mais tarde. Se a imagem do sprite for muito larga ou alta, é algo a considerar! Especialmente para aplicativos de celular (menos memória). Simon: o espaço em branco é provavelmente devido às limitações do CSS. Mesmo quando você não usa repetição em um plano de fundo, a imagem do sprite será exibida através de preenchimento, altura da linha e basicamente toda a área de plano de fundo do elemento, exceto margens e bordas. Digamos, por exemplo, que você tenha um ícone para um link. Se o link abranger várias linhas, outros ícones do sprite poderão aparecer. Adicionar espaço em branco suficiente torna isso mais "resistente".
@Simon_Weaver - Com base no feedback de todos aqui, publiquei uma ferramenta de sprite que é simples stackoverflow.com/a/13281578/1162141 #
technosaurus
3

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

Salman von Abbas
fonte
2
Estou impressionado com a quantidade de pessoas que não usam o Compass for Sprite Generation. A bússola nasceu para isso ...
justnorris 27/05
2

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.

Aaron Digulla
fonte
2

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.

Stephen James
fonte
2

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
shwoodard
fonte
2

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.

Magnus
fonte
1

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

insira a descrição da imagem aqui

bateristt
fonte
Vale ressaltar que este não é um aplicativo gratuito ou de código aberto, mas com um preço razoável de US $ 3,99. É bem construído e faz boa compactação PNG.
t.mikael.d
Somente Mac. Que chatice, este parecia promissor.
Mahn
1

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; 
}
technosaurus
fonte
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.

Matt Wrock
fonte
0

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.

prestarocket
fonte
Vale ressaltar que este não é um aplicativo gratuito ou de código aberto, mas com preço razoável de US $ 4,99. É bem construído e faz boa compactação PNG, mais funcionalidade do que o "Sprite Master Web" acima.
t.mikael.d
E é apenas mac também.
Mahn