Alat untuk membuat sprite CSS? [Tutup]

Apakah ada alat yang baik untuk membuat sprite css?

Secara idealnya saya ingin memberikannya direktori gambar dan file .css yang ada yang merujuk pada gambar-gambar itu dan membuatnya membuat gambar besar dioptimalkan dengan semua gambar kecil DAN mengubah file .css saya untuk merujuk ke gambar-gambar itu.

Setidaknya saya ingin mengambil direktori gambar dan menghasilkan sprite besar dan .css yang diperlukan untuk menggunakan masing-masing sebagai latar belakang.

Apakah ada plugin photoshop yang bagus atau aplikasi yang sepenuhnya meledak untuk melakukan ini?

Ini akan melakukan 90% pekerjaan untuk Anda: CSS Sprite Generator . Anda masih perlu mengedit aturan sendiri, tetapi alat ini akan memberi Anda fragmen kode yang Anda butuhkan untuk file CSS baru.

Instant Sprite adalah generator sprite CSS dalam browser yang sedang saya kerjakan. Ini sangat cepat, tetapi tidak memiliki banyak fitur seperti yang lainnya. Saat ini hanya berfungsi di Firefox atau Chrome, karena menggunakan JavaScript FileReader dan HTML Canvas untuk menghasilkan sprite di dalam browser web tanpa mengunggah.

Sekarang ada Sprite Me oleh Steve Souders. Coba saja dan sepertinya berhasil dengan cukup baik.

Ini tautannya http://spriteme.org/ dan di sini ada posting blog yang mengumumkannya.

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

Ini terlihat menjanjikan:

http://csssprites.org/

Saya juga menemukan artikel ini yang memiliki beberapa informasi berguna, dan bahkan beberapa komentar pembaca layak dibaca.

Rupanya google web toolkit juga memiliki sesuatu - jadi jika Anda menggunakannya mungkin perlu dicoba.

Coba ini:

http://spritepad.wearekiss.com/

ZeroSprites adalah generator sprite CSS yang ditujukan untuk meminimalkan area menggunakan algoritma perencanaan lantai VLSI.

menemukan ini cukup cepat bahwa batas unggah 500K mungkin menyusahkan. kode sumber tersedia di sini

Tonttu adalah aplikasi berbasis Adobe AIR yang menyediakan antarmuka yang mudah untuk membuat gambar CSS Sprite yang kuat. Anda dapat menentukan FiledWidth dan FieldHeight atau mengurutkan gambar.
Buat Gambar CSS Sprite dengan Alat Desktop Tonttu

Belum jelas apakah ini akan membuatnya menjadi kerangka kerja inti ASP.NET tapi di sini ada proyek Microsoft codeplex untuk csssprite:

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

Jika Anda suka - gunakan - atau hanya suka ide kemudian tambahkan komentar. Saya pikir ini akan menjadi hal yang hebat untuk dimiliki dalam kerangka ASP.NET. Belum secara pribadi menggunakannya (saya harus menemukan roda sendiri) tetapi mendapat ulasan yang baik.

Ini mencakup komponen-komponen berikut:

• API untuk secara otomatis menghasilkan sprite dan gambar sebaris
• Kontrol dan pembantu yang menyediakan cara yang mudah untuk menelepon ke API

Fitur yang Ditambahkan dalam Rilis Kedua:

• Kontrol penautan CSS untuk Formulir Web (memilih file CSS yang tepat untuk browser pengguna, tetapi tidak menampilkan gambar)
• Menggunakan jalur folder khusus selain App_Sprites
• Mengubah arah ubin gambar sprite
• Menggabungkan CSS yang dihasilkan dengan CSS milik pengguna

Fitur yang dipertimbangkan untuk rilis mendatang:

• Secara otomatis memilih warna latar sprite paling efisien
• Meminimalkan CSS yang diberikan secara otomatis
• Kompilasi dengan .NET 3.5

Cukup gunakan http://sprites.scherpontwikkeling.nl/ juga dapat menghasilkan sprite dari URL situs web juga ... Anda dapat mengintegrasikan sprite Anda setelah mengembangkan situs web Anda. Ini sangat mudah digunakan;)

Bukan jawaban langsung tetapi kepada sesama pengembang dan integrator web saya, pertimbangkan untuk hanya menyelaraskan setiap sprite dengan kekuatan dua; mis. kisi 16 piksel atau 32 piksel. Itu membuat menghitung offset dalam file CSS jauh lebih mudah. Semua ruang putih antara tidak masalah karena format gifd dan png kompres dengan sangat baik.

Kompas Kerangka CSS memiliki generasi sprite otomatis .

Jika Anda menyukai Java, maka Anda dapat menggunakan GWT 1.5+ yang dilengkapi dengan sesuatu yang disebut " ImageBundle ." Kompiler GWT akan menangani semua detail jahat untuk Anda. Anda bahkan tidak perlu membuat kode satu baris pun JavaScript atau menulis CSS apa pun.

Berikut ini adalah skrip yang menggabungkan gambar melalui skrip Photoshop ke dalam sprite CSS . Ini tidak akan melakukan sprite map seperti yang Anda minta, tetapi akan menggabungkan gambar dalam kelipatan dua (2, 4, 8) jika ukurannya sama. Saya lebih suka menggabungkan gambar yang sama (normal, mengarahkan, dipilih, orang tua yang dipilih) daripada memiliki semua gambar dalam satu file.

jika Anda menggunakan ruby ​​on rails, ada perpustakaan yang mudah dipasang untuk menghasilkan sprite css.

http://github.com/aberant/spittle

Ada alat baru di luar sana yang disebut ActiveSprites, bagian dari permata active_assets.

Github: http://bitly.com/eRTwU4

Anda menggunakan dsl ruby ​​untuk mendefinisikan sprite Anda dan kemudian melakukan "sprite rake" dan sprite dan stylesheet yang sesuai dihasilkan.

Itu rad!

Berikut beberapa contoh kode,

# 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

Alat ini mengambil pendekatan baru karena merakit gambar yang Anda minta dengan cepat sebagai layanan http. Ini membuat keseluruhan proses menjadi sangat sederhana (tidak perlu preprocessing, mengubah gambar kapan saja): Anda memulai layanan dan kemudian referensi gambar apa pun yang Anda inginkan dalam HTML Anda:

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

Karena dinamis, Anda bahkan dapat membuat sprite dari serangkaian gambar dinamis seperti halaman thumbnail. Meskipun tidak mendukung JPEG, tetapi PNG dan GIF berfungsi dengan baik.

Saya sarankan Anda untuk menggunakan Web Master Sprite . Saya membuat lembar sprite secara otomatis dan mengekspor kode CSS untuk Anda. Itu selalu mencoba untuk menghasilkan lembar sprite terkecil dengan algoritma canggih.

Ini screenshot dan video youtube

Tak satu pun dari alat ini memenuhi persyaratan saya, jadi saya menulis yang menggunakan pustaka gambar kecil Mark Tylers, mtpixel (sekarang bagian dari mtcelledit ) Ini tidak super luas tetapi mudah diperluas melalui fungsi bawaan mtpixel yang meliputi: abu-abu, inversi warna , rotasi, pertajam, kuantisasi, posterize, flip (vertikal dan horizontal), transform, rgb-> diindeks, diindeks-> rgb, deteksi tepi, emboss, gambar poligon, teks dan banyak lagi.

Yang Anda lakukan adalah mengopernya satu set gambar sebagai args (mendukung png, gif dan jpeg) dan itu akan menghasilkan png rgb yang disebut sprite.png bersama dengan data pengiris gambar yang berguna untuk stdout. Saya menggunakannya dalam skrip bash untuk membuat spritify seluruh direktori gambar dan mengeluarkan data slicing untuk pembuatan css otomatis (dengan harapan pada akhirnya membuatnya mampu mengganti tag img yang ada secara otomatis dengan sedikit kreatif sed / awk)

Paket biner untuk puppy linux ada di sini:

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

Kasus penggunaan saya hanya perlu menyambungkan gambar secara vertikal ke png baru, jadi hanya itu yang terjadi, tetapi kode sumber saya adalah domain publik dan pustaka mtcelledit adalah gpl3. Dengan mtpixel yang terhubung secara statis, binernya <100kb (hanya beberapa kb ketika terhubung secara dinamis) dan satu-satunya dependensi lainnya adalah libpng, libjpeg dan libgif (dan freetype dengan mtpixel resmi, tetapi saya tidak memerlukan dukungan teks, jadi saya tidak memerlukan dukungan teks, jadi saya berkomentar bit freetype dalam build statis)

jangan ragu untuk memodifikasi untuk kebutuhan Anda sendiri:

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

Jika Anda menggunakan .net, lihat http://www.RequestReduce.com . Itu tidak hanya membuat file sprite secara otomatis, tetapi melakukannya dengan cepat melalui HttpModule bersama dengan menggabungkan dan memperkecil semua CSS. Ini juga mengoptimalkan gambar sprite menggunakan kuantisasi dan kompresi lossless dan menangani penyajian file yang dihasilkan menggunakan ETags dan Expires header untuk memastikan cache browser yang optimal. Pengaturannya sepele yang hanya melibatkan perubahan web.config sederhana. Lihat posting blog saya tentang penerapannya oleh Microsoft Visual Studio dan galeri Sampel MSDN.

Saya baru-baru menemukan alat ini: SpriteRight http://spriterightapp.com/

SpriteRight adalah generator spritesheet CSS untuk Mac yang memungkinkan Anda mengimpor gambar atau stylesheet yang ada. Jadikan situs Anda memuat lebih cepat, menghemat biaya bandwidth dan menghemat waktu. SpriteRight bahkan menghasilkan kode CSS dengan cepat.