Photoshop programı ile yapılan grafik bazlı çalışmaların web ortamında rahat kullanılması için otomatik olarak CSS 'ye nasıl dönüştürebileceğimizi anlatıyoruz.

Adobe Photoshop programının CS2 ve CS3 sürümlerinden önceki versiyonlarında ImageReady diye ayrı bir program vardı bu programla aşağıda anlatacağımız olay gerçekleştirilebiliyordu fakat şimdi ImageReady programı yoktur. Abdullah Tekin hocamın bu konudaki dersini buradan inceleyebilirsiniz.

Şimdi olayımıza başlayalım.

İlk olarak tasarımımızı yapıyoruz, bende sanalkurs izleyenlerine özel basit bir tema yaptım;



Daha sonra ekrandaki 'Slice' aracımız ile sitenin header,footer gibi bölümlerini ayırıyoruz;



Şekildeki gibi ayırmaları yaptıysak ileriki aşamaya bakalım;



'Slice' ile ayırdıktan sonra "File / Save For Web & Devices.." 'a basarak kaydetme yerine geliyoruz;



Çıkan önizleme ve dosya uzantısı ayarlama bölümünden 'Save' diyoruz;



Kaydetme yerinde resimdeki bölüme tıklıyoruz;



Yine şekildeki kısma 'HTML' e girerek resimdeki gibi ayarları yapalım;



HTML 'yi seçtiğimiz yerden Slices 'ı seçiyoruz;



En son olarak Kaydetme bölümü geliyor buradan .html uzantısı ile kaydetmesini rica ediyoruz ve işte CSS 'lerimiz hazır.

İnanmadınız mı?

Buyurun sonuç