Görsellerde Sprite Yöntemi

CSS Sprite Nedir ve Nasıl Uygulanır?

CSS Sprite tasarımlar meydana getirmenizi sağlayan oldukça kullanışlı ve hızlı bir yöntemdir.

Görünüşte görseller ve geçiş efektleri yer alsa da işin temelinde performans bulunmaktadır. Sprite tekniğinin kullanımındaki ilk amaç, hızlı bir şekilde açılan tasarımlar meydana getirmektir. Ancak CSS3 sisteminindi sanal âleme girmesiyle SSS Sprite web tasarımcılarının güçlü bir kozu haline geldi.

Biraz Detaylandıralım

CSS Sprite ile ilgili söylenmesi gerekenleri söyledik. Ancak yine de genel bir toparlama yapacak olursak; Teknik CSS’in background-position değerleriyle oynayarak meydana getirilir ve pek çok görsel ile hazırlayabileceğimiz tasarımları yalnızca bir görsel ile oluşturmamızı sağlar. Bu şekilde sayfanın boyutu ve hızı küçülürken tasarımın kalitesi de bir o kadar yükselir.

Photoshop aşaması

Adobe Photoshop’un herhangi bir sürümünü açtıktan sonra Google görseller ikonundan iki tane görsel seçiyoruz. Bu alanda birçok görsel yer almaktadır. Biz aşağıdaki iki seçimi yaptık. Her ikisinin de arka planı transparandır.

Sizde GIF veya PNG formatındaki arka planı şeffaf olan görsellere yönelin ki diğer görselleri temizleyerek zaman kaybetmeyin. Eğer aceleniz yoksa buradan bizim hazırlamış olduğumuz görsele ulaşıp bir sonraki adıma geçebilirsiniz. Ancak biz bu işlemleri öğrenmenizi öneriyoruz.

İlk olarak görselleri Sprite yöntemi ile tekrardan tasarlayalım. Örnek verecek olursak; basketbol topu ve noktalarının ebattı 30x30 olarak düşünelim. Yani toplam olarak genişliğimiz 60 piksel, yüksekliğimiz ise 30 piksel olur.

Bu iconların üstüne geldiğimiz zaman renklerini değiştirecek ve dolayısıyla bir kopya meydana getirmemiz gerekecektir. Yani iki tane olan ikon sayım tasarımında 4 tane yer alacak, üstte2, alta 2 olmak kaydıyla. Böylelikle genişlikle hiç oynamadan yüksekliğimizi iki katına çıkarmış olacağız.

Yani toplamda 60 piksek olan genişliğimiz yine 60 piksel olarak kalacak, yüksekliğimiz ise iki katına çıkarak oda 60 piksel olacak.

Bu işlemi gerçekleştirirken;

• View > Rulers,
• View > Extras,
• View > Snap,
• View > Guides, Smart Guides
• View > Snap > Guides, Layers, Document Bounds,

Alanlarını açmalısınız ki kaydırma yapmadan rahat bir şekilde çalışabilesiniz. Çalışma yaparken rehber çizgilerinin bize ne kadar yardımcı olduklarını sizde göreceksiniz.

CSS SPRİTE TEKNİĞİ

CSS Sprite Nasıl Oluşturulur

CSS Sprite oluşturmak için iki farklı yol vardır. Bu yollardan birisi her bir görseli photoshop gibi bir program yardımıyla birleştirerek alt alta veya yan yana dizdiğiniz gibi bu görselleri piksel bazında koordinelerini hesaplamaktır. Sizin de tahmin ettiğiniz gibi bu iş biraz zahmet isteyen bir iştir ve hata yapma şansınız oldukça yüksektir.

Başka bir yol ise bu işlemi yapabilmek için bir aracıdan destek almanızdır. Görsellerin her bir tanesini ayrı bir şekilde imaj haline getirip, bu görselleri zip formatında sıkıştırarak, CSS Sptite Generator’a a (CSS Tümleşik Resim Üreteci) yükleyelim. Bu sistem görsellerinizi tek bir imaj haline getirecek ve görsellerin CSS kodlarında kullanılması için koordinatlarını bize sunacaktır.

Bu adres ise HTML5 tekniğinden faydalanan bir başka oluşturucu sistemdir. Bilgisayarınızda bulunan resimleri sürükle bırak sistemi ile bu alana atabilir, Generate butonuna basarak sağında bulunan Sprite ile kombine edilmiş olan bir tek resim dosyasını, Stylesheet ile kullanabileceğiniz CSS dosyasının içinde görüntüleyebilirsiniz.

CSS Sprite Nasıl Kullanılır

Yukarıda belirtmiş olduklarımız bize gerekli bilgileri verecektir ama biz yine de detaylı bir şekilde anlatmakta fayda görüyoruz. CSS Sprite tekniği kullanarak kodlama yapabilmek için CSS’nin arka plan özelliği kullanılmalıdır.

Örnek verecek olursak; Almak istemiş olduğunuz görsel, görselin tamamının 10 piksek aşağısında ve soldan 20 pikselin sol kısmında ise farklı yöntemlerle kullanılması gerekmektedir.

Sprite Sheet Tekniği Tam Manasıyla Nasıl Oluşturulur?

İlk olarak Sprite Sheet (Tümleşik Resim) sisteminin ayrıntıları karışık olarak gelebilir. Kullanım şekilleri de bir o kadar farklılık gösteren Sprite Sheet (Tümleşik Resim) tekniğinde en fazla dikkat edilmesi gereken nokta ise çizimlerdir. Bu tekniği kullanmak isteyen ziyaretçilerin ilk olarak çizimleri oluşturması gerekmektedir. Çizimlerde kullanılmak istenen teknik ise tamamen kullanıcının tercihine kalmış bir durumdur. Bir karakteri veya animasyon için meydana getirmek istediğiniz bir nesnenin öncelikli olarak ilk halini çizmeniz gerekmektedir. Nesnenin temel hali olarak isimlendirilen bu ilk halden sonra animasyonun hareketlerine bağlı olarak şekillendirmeler yapmanız gerekmektedir.

Eğer animasyonda bulunacak olan nesnenin ön hareketini daha hızlı bir hale getirmek istiyorsanız bu durumda karakterin ön kısma doğru yürüme aşamalarını çizmeniz gereklidir. Yani yürüyen bir çocuk çizdiğinizi düşünürsek karakterin yürüyebilmesi için bir sonraki resimde karakterin ayaklarından birisinin daha önce çizilmesi gerekmektedir.

Diğer resim serisinde ise sonraki ayağı öne çıkarmalısınız. Kısaca ifade etmek gerekirse adım esnasında yaşanan bütün olayları çizimde belirtip ardı ardına sıralamanız gerekmektedir. Yapmış olduğunuz bu sıralama sonrasında bütün hareketleri tanımlamanız gerekir. Tanımlamış olduğunuz bu hareketler animasyon meydana getirme aşamasında oldukça gerekli aşamalardır. Bunun için çizim aşamalarını belirlerken de çok dikkatli olmanız ve çizimlerinize oldukça önem vermelisiniz.

CSS Sprite Nasıl Yapılır?

CSS gelişmesi ve internet standartlarının sağlamış olduğu kolaylıklar, özellikle programcılara güven ve hız konusunda birçok avantaj sağlamaktadır. CSS Sprite, web sayfanızda kullanmış olduğunuz küçük çaplı görselleri ve ikonları kısım kısım çağırmak yerine bütün görsellerin bir arada yer aldığı tek bir görsel üzerinden koordinat belirleyerek çağırmamızı sağlayan, sitemizin yüklenme hızını pozitif yönde etkileyen bir sistemdir.

CSS Sprite Tekniğinin Ne Gibi Avantajlar Sağlar

CSS Sprite tekniğini kullanarak hazırlanmış olan bir web sitesi, bu tekniği kullanmayan web sitelerinden daha hızlı yüklenme hızına sahiptir. Nedeni ise sitenizde 10 tane görsel yer alıyorsa, bu da her bir görsel için sunucuya gönderilecek 10 request anlamına gelir. CSS Sprite ile 10 tane görseli tek bir görsel haline getirirseniz, bu da tek bir request anlamına gelecek ki, sayfanızın daha hızlı yüklenmesine yardımcı olacaktır. Google gibi büyük şirketlerin çoğu CSS Sprtite tekniğini kullanmaktadır.

Doğru Görüntü Formatını Bulmaya çalışın

Web sayfalarında yer alan görsel yoğunluğu göz önünde bulundurulduğunda görsellerin performansa etkileri oldukça fazladır. Görsel boyutu, görsel formatları ve görsel kalitesi üzerinde etkin bir rol oynamaktadır. Bu nedenle doğru formatı bulabilmek, web sayfası performansı için oldukça kritik bir noktadır.

Görsellerinizi Boyutlandırmaya Özen Gösterin

Web sayfalarında yer alan görseller XHTML ya da CSS yöntemi ile boyutlandırılmaktadır. Boyutlandırılmamış olan görseller, diğer görsellere göre daha yavaş bir şekilde yüklenirler.

Görsellerinizi Sıkıştırmayı Unutmayın

Görsellerinizi web sayfanıza yüklemeden önce sıkıştırmak, sayfanızdaki alanlardan tasarruf etmenizi sağlayacaktır. Bu durum sayfanızın yüklenme hızını olumlu yönde etkileyecektir. Web sayfanızda kullanmak istediğiniz görselleri Adobe Photoshop yardımı ile basit bir şekilde sıkıştırabilirsiniz.

Görsellerinizin URL Yapısını Mutlaka Değiştirin

Görsellerin kaynak kodları içinde yer alan URL yapısı da web sayfasının hızına etki eden faktörler arasında yer almaktadır. URL’de yer alan gereksiz uzantıları kaldırarak kaynak kodunuzu sadeleştirebilirsiniz. Böylelikle sadeleştirdiğiniz URL yapınız sayesinde web sayfanızın yüklenme hızı olumlu yönde etkilenecek olup web sayfanızın kullanıcılara ulaşması daha kaliteli bir hale gelecektir.