CSS sprite oluşturma araçları? [kapalı]

Css sprite oluşturmak için iyi araçlar var mı?

İDEAL OLARAK ona bir görüntü dizini ve bu görüntülere atıfta bulunan ve tüm küçük görüntülerle optimize edilmiş büyük bir görüntü oluşturmasını sağlayan mevcut bir .css dosyası vermek VE .css dosyamı bu görüntülere başvuracak şekilde değiştirmek isterdim.

En azından bir resim dizini alıp büyük bir hareketli grafik ve her birini arka plan olarak kullanmak için gerekli .css oluşturmasını istiyorum.

Bunu yapmak için iyi bir photoshop eklentisi veya tamamen gelişmiş uygulamalar var mı?

Bu sizin için işin% 90'ını yapacak: CSS Sprite Generator . Yine de kuralları kendiniz düzenlemeniz gerekecek, ancak araç size yeni CSS dosyası için ihtiyacınız olan kod parçalarını verecektir.

Instant Sprite , üzerinde çalıştığım bir tarayıcı içi CSS hareketli grafik oluşturucu. Gerçekten hızlı, ancak bazıları kadar çok özelliğe sahip değil. Web tarayıcısı içinde sprite yüklemeleri olmadan oluşturmak için JavaScript FileReader ve HTML Canvas kullandığından, şu anda yalnızca Firefox veya Chrome'da çalışmaktadır.

Şimdi Steve Souders'ın Sprite Me yazarı var. Sadece deniyor ve oldukça iyi çalışıyor gibi görünüyor.

İşte bağlantı http://spriteme.org/ ve işte bunu duyuran blog yazısı.

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

Bu umut verici görünüyor:

http://csssprites.org/

Ayrıca bazı yararlı bilgiler ve hatta okumaya değer bazı okuyucu yorumlarını içeren bu makaleyi buldum .

Ayrıca görünüşe göre google web araç setinde bir şeyler var - bu yüzden onu kullanıyorsanız, kontrol etmeye değer olabilir.

Bunu dene:

http://spritepad.wearekiss.com/

ZeroSprites , VLSI yer planlaması algoritmalarını kullanarak alanı küçültmeyi amaçlayan bir CSS sprite oluşturucusudur.

bunu oldukça hızlı buldum, çünkü 500K yükleme sınırı bir sorun olabilir. kaynak kodu burada mevcuttur

Tonttu , güçlü CSS Sprites görüntüleri oluşturmak için kolay arayüz sağlayan Adobe AIR tabanlı bir uygulamadır. FiledWidth ve FieldHeight'ı belirtebilir veya görüntüleri sıralayabilirsiniz.
Tonttu Masaüstü Aracı ile CSS Sprite Görüntüleri Oluşturun

Çekirdek ASP.NET çerçevesine girip girmeyeceği henüz belli değil, ancak işte csssprites için bir Microsoft kodepleks projesi:

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

Eğer beğenirseniz - kullanın - veya sadece fikir gibi, sonra bir yorum ekleyin. Bunun ASP.NET çerçevesinde olması harika bir şey olacağını düşünüyorum. Kişisel olarak kullanmadım (tekerleği kendim icat etmek zorunda kaldım) ama iyi değerlendirmeleri var.

Aşağıdaki bileşenleri içerir:

• Otomatik olarak hareketli görüntüler ve satır içi görüntüler oluşturmak için API
• API'ye çağrı yapmanın uygun bir yolunu sağlayan kontroller ve yardımcılar

İkinci Sürümde Eklenen Özellikler:

• Web Formları için bir CSS bağlama denetimi (kullanıcının tarayıcısı için uygun CSS dosyasını seçer, ancak bir resmi görüntülemez)
• App_Sprites dışında özel klasör yolları kullanma
• Hareketli görüntülerin döşeme yönünü değiştirme
• Oluşturulan CSS'yi bir kullanıcının kendi CSS'si ile birleştirme

Gelecekteki sürümler için dikkate alınan özellikler:

• En verimli hareketli arka plan rengini otomatik olarak seçme
• Oluşturulan CSS'yi otomatik olarak küçültme
• .NET 3.5'e karşı derleme

Sadece http://sprites.scherpontwikkeling.nl/ adresini kullanın , web sitesi URL'lerinden de sprite oluşturabilir ... web sitenizi geliştirdikten sonra sprite'larınızı entegre edebilirsiniz. Kullanımı çok kolay;)

Doğrudan bir yanıt değil, geliştirici arkadaşlarıma ve web entegratörleri için, her sprite'ı ikinin gücüne hizalamayı düşünün; örneğin 16 piksel veya 32 piksel ızgara. CSS dosyasındaki ofsetleri hesaplamayı çok daha kolay hale getirir. Gifd ve png formatları bunu çok iyi sıkıştırdığı için aradaki tüm beyaz boşluk önemli değildir.

Compass CSS Framework, otomatik hareketli grafik oluşturma özelliğine sahiptir .

Java'yı seviyorsanız, " ImageBundle " adlı bir şeyle birlikte gelen GWT 1.5+ kullanabilirsiniz . GWT derleyicisi sizin için tüm kötü ayrıntıları ele alacaktır. Tek bir JavaScript satırı kodlamanız veya herhangi bir CSS yazmanız bile gerekmez.

İşte bir Photoshop komut dosyası aracılığıyla görüntüleri CSS sprite'ları olarak birleştiren bir komut dosyası . İstediğiniz gibi bir hareketli harita yapmaz, ancak aynı boyuttaysa görüntüleri ikinin katları (2, 4, 8) olarak birleştirir. Tüm resimleri tek bir dosyada bulundurmaktansa benzer resimleri birleştirmeyi (normal, üzerine gelindiğinde, seçili, seçilenin üst öğesi) tercih ederim.

Ruby on rails kullanıyorsanız, css sprite oluşturmak için kurulumu kolay bir kitaplık vardır.

http://github.com/aberant/spittle

ActiveSprites adında, active_assets geminin bir parçası olan yeni bir araç var.

Github: http://bitly.com/eRTwU4

Sprite'larınızı tanımlamak için bir ruby ​​dsl kullanırsınız ve ardından "sprite rake" yaparsınız ve sprite'lar ve karşılık gelen stil sayfaları oluşturulur.

Radikal!

İşte bazı örnek kodlar,

# 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

Bu araç, istediğiniz görüntüleri anında bir http hizmeti olarak bir araya getirerek yeni bir yaklaşım benimser. Bu, tüm süreci oldukça basitleştirir (önişleme gerekmez, görüntüleri istediğiniz zaman değiştirin): Hizmeti başlatırsınız ve ardından HTML'nizde istediğiniz görüntülere referans verirsiniz:

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

Dinamik olduğu için, küçük resim sayfası gibi dinamik bir görüntü kümesinden bile sprite oluşturabilirsiniz. Yine de JPEG'i desteklemiyor, ancak PNG ve GIF iyi çalışıyor.

Sprite Master Web'i kullanmanızı öneririm . Otomatik olarak hareketli grafik sayfaları oluşturuyorum ve sizin için CSS kodunu dışa aktarıyorum. Her zaman gelişmiş algoritmalarla en küçük hareketli grafik sayfaları oluşturmaya çalışır.

İşte bir ekran görüntüsü ve youtube videosu

Bu araçlardan hiçbiri gereksinimlerimi karşılamadı, bu yüzden Mark Tylers'ın küçük resim kitaplığını kullanan bir tane yazdım, mtpixel (şimdi mtcelledit'in bir parçası ) Çok kapsamlı değil, ancak mtpixel'in aşağıdakileri içeren yerleşik işlevleriyle kolayca genişletilebilir: gri tonlama, rengi ters çevirme , döndürme, keskinleştirme, niceleme, posterleştirme, çevirme (dikey ve yatay), dönüştürme, rgb-> dizinli, dizinli-> rgb, kenar algılama, kabartma, çizim çokgenleri, metin ve daha fazlası.

Yapmanız gereken tek şey ona bir dizi görüntüyü bağımsız değişken olarak iletmektir (png, gif ve jpeg'yi destekler) ve stdout'a kullanışlı görüntü dilimleme verileriyle birlikte sprite.png adlı bir rgb png çıktılar. Tüm bir görüntü dizini spritify ve otomatik css üretimi için dilimleme verilerini çıktı olarak bash betiklerinde kullanıyorum (sonunda mevcut img etiketlerini otomatik olarak biraz yaratıcı sed / awk ile değiştirebilme umuduyla)

Yavru linux için ikili paketler burada olacak:

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

Benim kullanım durumum sadece görüntüleri dikey olarak yeni bir png'ye eklemeyi gerektirdi, tüm yaptığı bu, ancak kaynak kodum kamuya açık ve mtcelledit kitaplığı gpl3. Mtpixel statik olarak bağlandığında, ikili <100kb'dir (dinamik olarak bağlandığında yalnızca birkaç kb'dir) ve diğer bağımlılıklar yalnızca libpng, libjpeg ve libgif'tir (ve resmi mtpiksel ile freetype, ancak metin desteğine ihtiyacım yoktu, bu yüzden statik yapıda freetype bitlerini yorumladı)

kendi ihtiyaçlarınız için değişiklik yapmaktan çekinmeyin:

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

.Net kullanıyorsanız, http://www.RequestReduce.com adresine bakın . Yalnızca sprite dosyasını otomatik olarak oluşturmakla kalmaz, aynı zamanda tüm CSS'yi birleştirip küçülterek bir HttpModule aracılığıyla anında yapar. Ayrıca, sprite görüntüsünü niceleme ve kayıpsız sıkıştırmayı kullanarak optimize eder ve optimum tarayıcı önbelleği sağlamak için ETag'leri ve Expires başlıklarını kullanarak oluşturulan dosyaların sunumunu gerçekleştirir. Kurulum, basit bir web.config değişikliğini içeren önemsizdir. Microsoft Visual Studio ve MSDN Örnekleri galerisi tarafından benimsenmesi hakkındaki blog gönderime bakın .

Yakın zamanda bu araçları buldum: SpriteRight http://spriterightapp.com/

SpriteRight, Mac için mevcut görüntülerinizi veya stil sayfalarınızı içe aktarmanıza izin veren bir CSS model sayfası oluşturucusudur. Sitelerinizin daha hızlı yüklenmesini sağlayın, bant genişliği maliyetlerini azaltın ve zamandan tasarruf edin. SpriteRight, anında CSS kodu üretir.