Softonic

Sprite Sheet Oluşturucu

Adım / 3
Seçilen dosya geri yükleniyor...

Bir grup görsel bırakın; oluşturucu bunları eşit bir ızgaraya yerleştirir ve tarayıcınızda tek bir sprite sheet PNG çizer, ardından her sprite için bir background-position ofseti içeren CSS üretir. Her şey yerel olarak canvas üzerinde çalışır, dolayısıyla hiçbir şey bir sunucuya yüklenmez. Simge setleri, retro oyun kareleri ve çok sayıda ayrı görsel yerine tek bir dosya istediğiniz arayüz durumları için kullanışlıdır. Sütun sayısını, döşeme boyutunu, hücreler arası boşluğu ve arka planı (saydam, beyaz veya siyah) siz belirlersiniz.

Sprite sheet nasıl oluşturulur

  1. 1

    Görsellerinizi bırakın

    PNG, JPG veya WebP dosyaları ekleyin. Yukarı/aşağı denetimleriyle sıralarını değiştirin ya da bir kareyi kaldırın; sayfa anında yeniden oluşturulur.

  2. 2

    Izgarayı ayarlayın

    Sütun sayısını seçin; satır sayısı eklediğiniz görsel sayısından belirlenir. Her görsel, en boy oranı korunarak kare bir döşemeye sığacak şekilde ölçeklenir ve ortalanır.

  3. 3

    Döşeme boyutunu ve boşluğu ayarlayın

    Döşeme boyutunu piksel olarak seçin ve ölçeklerken komşu sprite'ların birbirine taşmaması için hücreler arasına boşluk ekleyin.

  4. 4

    PNG indirin ve CSS kopyalayın

    Sprite sheet'i tek bir PNG olarak kaydedin ve üretilen CSS sınıflarını kopyalayın: her görsel için genişlik, yükseklik ve background-position içeren bir `.spr-ad` kuralı.

Yerleşim nasıl çalışır

Oluşturucu tek ve öngörülebilir bir yerleşim kullanır: eşit bir ızgara. Sütun sayısını siz belirlersiniz; satır sayısı yukarı_yuvarla(görseller / sütunlar) olur. Her hücre aynı kare boyuttadır (seçtiğiniz döşeme boyutu), bu yüzden her görsel en boy oranı korunarak hücresine sığacak şekilde ölçeklenir ve ortalanır. Farklı boyuttaki görsellerin hepsi eşit hücrelere yerleşir, background-position kullanan CSS sprite’larının beklediği tam da budur.

Denetim Aralık Etki
Sütunlar 1 ila 16 Satır başına sprite; satırlar otomatik hesaplanır
Döşeme boyutu 32 ila 512 px Her görselin sığdırıldığı kare hücre
Boşluk 0 ila 64 px Ölçeklerken taşmayı önleyen, hücreler arası saydam boşluk
Arka plan Saydam / Beyaz / Siyah Çıktı PNG’sinde sprite’ların arkasındaki dolgu

Üretilen CSS’in biçimi

Her görsel, dosyasının adını taşıyan bir sınıfa dönüşür (.spr-<ad>), döşeme boyutunda ve kendi hücresine ötelenmiş olarak. Dört sütun, 128 px döşeme boyutu ve boşluk yokken sayfa şöyle görünür:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Ofset iki boyutta hareket eder: sprite’lar her satırı soldan sağa doldurur, sonra bir sonraki satıra geçer. PNG’yi CSS’inizin yanına spritesheet.png olarak kaydedin (ya da yolunuza uyması için url(...) değerini düzenleyin).

Boşluk ve taşma

Kenar kenara paketlenen sprite’lar, tarayıcı sayfayı ölçeklediğinde (tam sayı olmayan piksel oranları, CSS dönüşümleri) birbirine taşabilir. Komşu piksellerin sızmasını önlemek için hücreler arasına 2 ila 4 piksel boşluk ekleyin.

Yüksek yoğunluklu ekranlar (retina)

Otomatik 2x dışa aktarma yoktur, ancak daha keskin bir sayfayı kolayca elde edebilirsiniz: her sprite daha çok piksel taşısın diye daha büyük bir döşeme boyutu seçin (örneğin 128 px yerine 256 px), sonra onu CSS boyutunun yarısında gösterin. Böylece ayrı bir geçiş olmadan yüksek yoğunluklu ekranlarda keskin sprite’lar elde edersiniz.

Sprite sheet mi, alternatifler mi

  • Sprite sheet’ler: CSS’te klasik simge setleri, HTML5 oyun kareleri ve çok sayıda küçük görseli tek dosyada toplamaktan yararlanan sayfalar.
  • SVG sprite’lar (symbol): modern arayüz simgeleri için daha iyidir, kayıpsız ölçeklenir, CSS fill kabul eder, background-position ile uğraşmak gerekmez.
  • Simge yazı tipleri: sınırlıdır ama minik tek renkli simgeler için hâlâ kullanılır.
  • HTTP/2 veya HTTP/3 ile ayrı dosyalar: çoğullama, istek sayısını eskisinden daha az önemli hale getirir.

Sık Sorulan Sorular

Görseller tarayıcınızda kalır. Çok adımlı akışta seçilen dosyalar ve düzen, en fazla 30 dakika boyunca bu tarayıcı sekmesinde geçici olarak tutulur. Hiçbir şey sunucuya gönderilmez veya URL’ye eklenmez.

Evet, ancak satır içi SVG’ler veya SVG <symbol> sprite’ları genellikle bileşen çerçevelerine daha iyi oturur. CSS sprite sheet’leri, statik sayfalarda aynı anda birçok görsel gösterildiğinde parlar.

Her kare bir satırda olsun diye sütun sayısını kare sayınıza eşitleyin, ardından CSS animation-timing-function: steps(N) ve hücre hücre atlayan bir background-position ile yönetin. Kısa döngü animasyonları (yükleniciler, boşta durumları) için iyi çalışır.

Izgaradaki her hücre aynı kare boyuttadır (seçtiğiniz döşeme boyutu), bu yüzden her görsel kendi hücresine sığdırılır ve ortalanır. Sprite’larınız zaten aynı karelerse, döşeme boyutunu buna göre ayarlayın; değişmeden geçerler.

İlgili Araçlar

Çizgili Kağıt Oluşturucu

Ücretsiz yazdırılabilir çizgili kağıt oluşturun. Kolej, geniş veya dar çizgi seçin, satır aralığını mm cinsinden ayarlayın, kağıt boyutunu ve bir kenar boşluğu çizgisi belirleyin, ardından yazdırın veya SVG olarak indirin.

Material Design Renk Seçici

Material Design renk paletini gezin. Herhangi bir tonu (50'den A700'e kadar) tek dokunuşla HEX, RGB veya HSL biçiminde kopyalayın.

Kareli kağıt oluşturucu

Çevrimiçi yazdırılabilir kareli kağıt oluşturun: kare veya nokta ızgarası seçin, aralığı mm cinsinden ayarlayın, A4 veya Letter ile özel bir çizgi rengi belirleyin, ardından yazdırın veya net bir SVG indirin.

Kanaviçe Şablonu Oluşturucu

JPEG, PNG veya WebP görselini 10–150 ilmek, 2–40 özel renk, semboller, kesin sayımlar ve kumaş ölçüleri içeren yazdırılabilir kanaviçe şemasına dönüştürün.

Fotoğraflardaki Yüzleri Çevrimiçi Bulanıklaştırın

Yüzlerin veya hassas ayrıntıların üzerine kutular çizin, ardından bulanıklaştırın, pikselleştirin ya da siyah kutuyla kapatın. İşlem tarayıcıda yapılır ve sonuç JPEG olarak indirilir.

Görüntü Formatı Dönüştürücü

Görselleri doğrudan tarayıcıda JPG, PNG veya WebP biçimine dönüştürün; kayıplı biçimlerde kaliteyi siz kontrol edin, PNG ve WebP'de şeffaflık korunur.

Araç diğer dillerde mevcuttur