JTY/B3/D1 - Şablonu Parçalara Ayırma ve Kaydetme

Bu dersimizde hazırlamış olduğumuz şablonu parçalara ayıracağız. Tabi bu işlemi yaparken normal bir slice yani kesme işlemi gibi değilde, sadece ihtiyacımız olan parçalara kesme işlemi şeklinde yapacağız. Ders hazırlarken sık sık belirttiğim birşeyi tekrar edeceğim. Bu tür işlemler için onlarca farklı metod uygulanabilir. Bu, bu, bu yada bu şekilde kesme/dilimleme/slice işlemini yapabilirsiniz. Ben bu işlem için kendime göre bir yol belirledim ve alışkanlıklarım dahilinde benim için daha kolay bir işlem. Siz kendinize en uygun metodu seçerek bu işlemi gerçekleştirebilirsiniz.

Şimdi kesme işlemine başlayalım.

Hazırlamış olduğumuz site şablonunu fireworks/photoshop programı ile açıyoruz ve soldaki araçlar kutusundan Crop Tools aracını seçiyoruz. Ardından kesmek istediğimiz alanı belirliyoruz. Gördüğünüz gibi logunun etrafını belirledim ve enter'a basarak bu alanı kesiyorum.

Gördüğünüz gibi ekranda sadece kestiğim logo alanı kaldı. Şimdi bu kesme işleminin ardından dosyamızı nasıl optimize şekilde kayıt edeceğimizi görelim.

File sekmesi altından Export Wizard bölümüne tıklıyoruz.

Export Wizard'a tıkladığımızda karşımıza bu uyarı çıkacaktır. Bu uyarı ekranında bir değişiklik yapmadan devam butonuna tıklıyoruz.

Bir uyarı ekranı daha geldi. Çıktımızı ne için kullanacağımızı soruyor. Burada The Web seçili olarak gelmekte. Zaten bizde resmi bir web sitesinde kullanacağımız için devam butonuna tıklayarak devam ediyoruz.

Son bir uyarının daha gelmesinin ardından çıkış butonuna tıklıyoruz ve aşağıdaki bölüm açılıyor. Burada resmin formatını ayarlayacağız. Soldaki okun olduğu bölümdeki açılır menüye tıklayıp JPEG'yi seçtiğinizde %80 resim kalitesiyle 5.65 KB bir resim boyutu sunuyor. Tabi burada resmin kalitesinden %20'lik bir kayıp olduğunu özellikle vurgulamakta yarar var. Diğer seçenekleri de görelim ve ardından kararımızı verelim.

JPEG formatında kalite oranını %100'e çıkardığımızda resmin boyutu 15 KB'a ulaşıyor. Neredeyse ilk seçeneğimizin 3 katı. PNG uzantısının boyutunu görmeden kararımızı vermiyoruz.

Açılır menüden format türünü PNG 32 seçtğimizde resmin boyutu 9KB civarında oldu. Tabi buradaki fark şu. JPEG resmin %100 kalitesi ile PNG 32'nin kalitesi aynı. Fakat boyutu gördüğünüz gibi yüzde 50 oranında daha küçük. 

Burada tercih tamamen size kalmış durumda. Sitenizde kullanacağınız resimlerde transparanlık olacaksa PNG 32 kaydetmenizi, resimlerin kaliteli görünmesinin çok önemli olmadığı durumda JPEG %80 kaydetmenizi yada hem yüksek boyutta, hem kaliteli olsun derseniz JPEG %100 yapabilirsiniz. Ben bu dersi hazırlarken yüksek kaliteli bir resme ihtiyacım olmadığı için JPEG %80 oranında kaydedeceğim.

Seçimi yaptıktan sonra hemen pencerenin altındaki Export (Çıkart) butonuna tıklıyoruz.

Açılan yeni bir pencerede resmi kaydedeceğimiz ekran çıkıyor. Burada temamızın images klasörünü seçiyor ve resmimizin adını düzenliyoruz. Ardından yine sağ alt köşedeki Export (çıkart) butonuna tıklıyoruz. Resmimiz kaydedildi.

Açılı pencereler kapandıktan sonra logonun olduğu ekran açılıyor. Burada CTRL + Z tuşlarına aynı anda basıyoruz ve tekrar şablonumuza geri dönüyoruz.

Şimdi anamenümüzün arkaplanını keseceğiz. Gördüğünüz gibi arkaplan sağa doğru tekrar eden şekilde. Biz bu resmi boydan boya kesmek yerine sadece sağa doğru yanyana koyduğumuzda aynı görüntüyü verecek şekilde küçük bir parçasını kesiyoruz. (Normalde burada 1px genişliğinde bir parça kesmeniz yeterli. Resim daha iyi anlaşılsın diye biraz büyük bir parça kestim)

Keseceğimiz alanı seçtikten sonra enter'a tıklıyoruz ve yukarıda yaptığımız kayıt işlemini tekrar ediyoruz. Ardından yine CTRL + Z butonlarına basarak şablona geri dönüyoruz.

Şimdi modül başlığının arkaplanını keseceğiz. Yeşil alanın kenarlarında açık yeşilli şekilde bir efekt olduğu için bu resmi kendini tekrarlayan şekilde kesemem. Logoyu kestiğimiz şekilde etrafını kaplayacak şekilde seçip, ardından kesebiliriz. Diğer bir yöntemi de göstermek için o metodu kullanmıyorum. 

Yeşil alana tıklayıp, CTRL + X tuşlarına aynı basarak fareyle seçtiğim arkaplan resmini kesiyorum.

Hemen üstteki File (Dosya) sekmesi altındaki New (Yeni) kısmına tıklıyorum.

Açılır penceredeki genişlik ve yükseklik değerlerini değiştirmiyorum. Bu değerler kestiğim resmin boyutuna ayarlı şekilde geliyor. Bu yüzden pencerenin sağ alt köşesindeki OK butonuna tıklayarak pencereyi kapatıyorum.

Açılan boş sayfaya CTRL + V yaparak kesmiş olduğum arkaplanı yapıştırıyorum. Gördüğünüz gibi arkaplan tam olarak hizalandı. Ardından ilk adımda yaptığım export wizard ile resmimi kaydediyorum.

Şimdi ise yatay eksende değil de, dikey eksende tekrarlayan bir resim keseceğiz. Sitenin içeriğinin ve modülün arkaplanı olarak çizilen alanı çok büyük kesmeye gerek yok. Bunun yerine kendi tekrar ettiğinde sorunsuz görünecek şekilde yatay olarak seçiyor ve enter'a basarak kesme işlemini yapıyoruz. Yine export wizard yöntemi ile kaydediyoruz. (Not: Burada seçilen alanın yüksekliğini 1px olarak seçmemiz yeterli olacaktır. Resimde daha net anlaşılsın diye daha yüksek bir alan seçilmiştir.)

Kesme işlemini yaparken Dreamweaver yada HTML bir site için kesim yapmaktan farklı bir işlem uyguladık. Dreamweaver ile HTML site yaparken büyük büyük resim parçaları kesiyorduk ve bunları tablo yada divler şeklinde sitemizde gösteriyorduk. Fakat kestiğimiz tüm alanlar sabit bir genişliğe yada yüksekliğe sahip oluyordu. Biraz fazla yazı girdiğimizde yükseklik ayarı bozuluyor ve sitede kaymalar oluşuyordu. Dinamik bir altyapıda olan joomlada ise birçok alanı sabit olarak tutamıyoruz. Bu nedenle ufak boyutlarda resim seçiyoruz ve gerekli durumlarda bu resimleri tekrarlattırarak gösteriyoruz.

Bu şekilde sitemizde kullanacağımız tüm resimleri kesmiş olduk. Şimdi bu resimleri kullanarak XHTML ve CSS kodlarımızı yazmaya başlayabiliriz.

Bu adımda kesme işleminde zorluk çekenler için bir sonraki derste resimlerin kesilmiş halini vereceğiz. Eğer fireworks konusunda henüz tecrübeniz yoksa bir sonraki adıma geçebilir ve xhtml-css yazma dersinden kodlamaya devam edebilirsiniz. 

Derse bir sonraki adımla devam etmek için tıklayınız >>