Bir Şablonun CSS Olarak Kaydedilmesi

Photoshop CS4 ile bir şablon hazırladınız ve küçük resimlere bölmek, pozisyonlarını ayarlamak, tek tek uğraşmamak için otomatik olarak HTML'de CSS kullanarak kaydedebilmenizin kolay ve rahat bir yolu.

1- Hazırladığınız Photoshop Şablonunu Slice Tool ile istediğiniz şekillerde bölüyorsunuz.



2- Şablonunuzu File > Save For Web & Devices(Alt+Shift+Ctrl+S) ile kaydetmelisiniz.



3- Karşınıza gelen pencerede sağ üst köşedeki Optimize Menu'den Edit Output Settings'i Seçiyoruz.



4- Karşınıza yeni bir pencere daha gelecek; burada Settings > Custom olarak kalacak ve altındaki seçenekte Slices seçildikten sonra pencerede değişiklikler olduğunu göreceksiniz. Generate CSS seçeneği seçildikten sonra geri kalan ayarları kendi isteğinize göre ayarlayın ve OK diyerek bir önceki pencereye geri dönün.



5- Save (Kaydet) butonuna tıkladıktan sonra kaydetme seçenekleri karşınıza gelecek. Buradan Kayıt Türü olarak HTML&IMAGES seçildikten sonra kaydedilecek.



6- Son bir açıklama: Kaydettiğiniz klasörde bir de images diye bir klasör oluşacak. Bu klasörde çalışmanıza ait resim parçacıkları olacak ve oluşan HTML dosyası da CSS'i barındıran html sayfanız olacak.