Alat untuk membuat sprite CSS? [Tutup]


126

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?



Bisakah Anda menjelaskan lebih lanjut, apakah Anda mencoba untuk mengkompilasi semua sprite pada satu gambar yang lebih besar dan kemudian menggunakan css untuk menampilkan bagian dari gambar yang berisi sprite yang tepat. (Teknik pintu geser)
teh_noob

1
apakah ada cara untuk mengubah warna latar belakang sehingga saya dapat melihat ikon putih saya di spritepad?
Jim

24
Saya benar-benar tidak mengerti mengapa ini ditutup ?? Tampaknya ada banyak jawaban berguna yang bagus. Ini bisa dibilang harus menjadi pertanyaan pengguna Super karena saya tidak menyebutkan bahasa pemrograman tertentu tapi saya suka jawaban yang saya dapatkan dan mereka jelas bermanfaat bagi banyak orang.
Simon_Weaver

3
Tolong Tuhan jangan menghapus pertanyaan ini, ini adalah daftar paling membantu di internet untuk masalah ini, dan tentu saja terkait dengan pemrograman (bahkan jika itu bukan pertanyaan pemrograman per-katakan) . Ini jelas merupakan panggilan penilaian, dan seharusnya tidak ditutup paksa oleh para mod; untuk itulah sistem penutupan suara masyarakat adalah ....
BlueRaja - Danny Pflughoeft

Jawaban:


46

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.


@ben sempurna! dengan asumsi bekerja ;-)
Simon_Weaver

1
Saya sedikit tidak puas dengan alat ini jadi saya hapus pilihan itu sebagai jawaban yang saya pilih. akhirnya memotong gambar saya dan itu tidak menjelaskan dengan baik mengapa ia meninggalkan celah besar di antara gambar
Simon_Weaver

Saya tidak suka solusi ini, meskipun saya kira itu berfungsi ok. SpriteMe tampaknya bekerja lebih baik.
Chuck Le Butt

2
masalah dengan alat ini adalah bahwa gambar tidak pada kualitas penuh.
Jim

50

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.


1
Wow, alat yang hebat. Terima kasih!
Sungai Vivian

Saya telah menggunakan alat Anda untuk bekerja di beberapa situs web produksi sejak Anda memposting di sini. Ini sangat sederhana dan mudah.
Sungai Vivian

7
+1. Alat Anda jauh lebih baik daripada yang sudah saya coba.
Ed Bayiates

3
ini adalah yang paling intuitif ... terima kasih ... (walaupun, itu harus mencakup tata letak sprite "pintar" untuk meminimalkan masalah kinerja)
kumarharsh

2
Terimakasih semuanya! @ Keras, saya setuju tentang tata letak - saya mulai bereksperimen dengan itu beberapa waktu yang lalu tetapi tidak pernah berhasil: github.com/bgrins/InstantSprite/tree/bin-pack
Brian Grinstead

31

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/


2
+1 Ini luar biasa mudah digunakan: Cukup navigasikan ke halaman yang Anda inginkan dan klik bookmarklet SpriteMe ... Ini membuat gambar dan CSS secara otomatis!
Chuck Le Butt

Ini adalah alat yang bagus, tetapi membutuhkan file ZIP dari gambar Anda dan urutan menempatkan sprite Anda adalah urutan ZIP. Alat Brian di bawah ini memungkinkan Anda untuk mengunggah file dan menyeret & jatuhkan untuk mengubah urutan.
Ed Bayiates

Saya suka itu memiliki kode sumber yang tersedia secara bebas
lkraav

13

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.


Sepertinya halaman itu tidak berfungsi lagi ...
Bob

smartsprites.osinski.name diubah namanya menjadi csssprites.org , jadi saya mengeditnya untuk Anda. Tampaknya menjadi salah satu dari beberapa opsi yang dapat diintegrasikan ke dalam proses pembangunan, dari apa yang saya lihat di sini.
ripper234

9

Ini jelas sah. Spritemaps yang disimpan IMHO adalah kunci, jadi hanya gambar dan baris kode yang relevan yang harus berubah dari waktu ke waktu, alih-alih menghitung ulang seluruh koordinat yang disetel dengan setiap perubahan konten gambar.
lkraav


6

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


mengapa mengunggah 500kb akan menyusahkan? Saya mungkin tidak akan pernah mau mengunggah> 100kb
Simon_Weaver

Saya bilang 'mungkin' menyebalkan. Ini agak tergantung pada aplikasinya bukan? .. File zip yang penuh dengan PNG ukuran sedang, misalnya, pada kisi yang cukup besar ~ ~ bisa ~ mendekati angka ini. jika semua bitmap kecil maka yakin / tidak bermasalah.
Scott Evernden

1
ya tapi inti dari sprite css adalah untuk mencegah banyak gambar kecil dimuat dengan banyak permintaan. jika Anda benar-benar memiliki banyak sprite kecil itu akan membutuhkan waktu lama untuk memuat di mana waktu tidak akan ditampilkan. terbaik untuk menjaga mereka saya pikir paling banyak 100kb. Anda selalu dapat melakukan beberapa
Simon_Weaver

saya melakukan banyak pekerjaan dengan gambar. mungkin tidak sedikit bitmap css. jadi mungkin itu sebabnya saya memberi peringatan. kebutuhan Anda berbeda / ok. 500kb akan tiba dalam sedetik pada sebagian besar penyiaran. saya pertama kali memberikan jawaban yang diterima untuk permintaan Anda dan di sini saya turun ~ memilih dan membela bahasa saya? terserah ...
Scott Evernden

Itu menyakitkan bagi saya, karena gambar yang saya mulai dengan akhirnya menjadi bundel lebih besar dari batas itu, jadi saya harus memotong atau mengoptimalkan sebelum saya bahkan bisa menggunakannya.
Kzqai


4

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


3

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.


tip yang baik, meskipun saya terutama mencoba untuk menggabungkan header teks (masing-masing 1-2kb) menjadi satu file. Saya tidak terlalu khawatir tentang ruang putih karena saya tahu itu akan dikompresi - saya hanya tidak sepenuhnya mengerti mengapa alat untuk membuat sprite membuatnya begitu banyak
Simon_Weaver

Satu peringatan untuk ini - sementara spasi putih dalam gambar akan dikompresi untuk transportasi, itu diperluas dan menempati memori saat memuat browser. Penggunaan buta alat penghasil sprite otomatis dapat menyebabkan beberapa gambar besar, yang dapat melonjak penggunaan memori pada halaman tersebut. Dibutuhkan kehati-hatian dalam pengelompokan gambar untuk membentuk lembaran sprite untuk menjaga ini dalam batas yang wajar.
Sam Foster

Sam: Benar! Menemukan ini nanti. Jika gambar sprite sangat lebar atau tinggi itu sesuatu yang perlu dipertimbangkan! Khusus untuk aplikasi ponsel (lebih sedikit memori). Simon: ruang putih mungkin karena keterbatasan CSS. Bahkan ketika Anda menggunakan tanpa-ulangi pada latar belakang, gambar sprite akan ditampilkan melalui padding, tinggi garis dan pada dasarnya semua area latar belakang elemen kecuali margin dan batas. Katakan misalnya Anda memiliki ikon untuk tautan. Jika tautan akan merentangkan garis mutliple maka ikon sprite lainnya mungkin terlihat. Menambahkan spasi yang cukup membuat ini lebih "tangguh".

@Simon_Weaver - Berdasarkan umpan balik everyones di sini, saya memposting alat sprite yang sederhana stackoverflow.com/a/13281578/1162141
technosaurus


2

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.




2

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

2

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.


1

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

masukkan deskripsi gambar di sini


Perlu dicatat, ini bukan aplikasi gratis atau open source tetapi cukup dengan harga $ 3,99. Ini dibangun dengan baik dan melakukan kompresi PNG yang baik.
t.mikael.d

Hanya untuk Mac. Nyebelin, yang ini tampak menjanjikan.
Mahn

1

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

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.


0

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.


Perlu dicatat, ini bukan aplikasi open source atau open source tetapi cukup dengan harga $ 4,99. Ini dibangun dengan baik dan melakukan kompresi PNG yang baik, lebih banyak fungsionalitas daripada "Sprite Master Web" di atas.
t.mikael.d

Dan itu mac juga.
Mahn
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.