Photoshop CS2 ve CS3 'teki şablonların CSS çıktısı

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.

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ç :)

  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

tşkrler yararlı oldu :kirp:
Eyvallah bu iyiliğini unutmucam memet abi
süpersin.teşekkürler...
Eline Saglık Güzel anlatım Çokta İşe Yarayan Bi Yöntem
Çok önemli bir bilgi eline sağlık
süpersin kaç zamandır böyle bişe nasıl olur diye düşünüyordum harikasin...
süper öteri
Çok teşekkürler. Bayaa araştırmıştım. Bir ara buldum kullanmadığımdan unutmuştum. Teşekkürler...
çok teşşekür ederim sonunda bu tablolardan kurtuldum ikide bir sayfa kayıp duruyordu bunda böyle bir problem çıkmıyor
dreamweaverde saatlerce uğreşceğime photoshopta yapar kodları alır eklemeleri yapar sonuca varırım.doğrumudur kardeşim

Yukarı Git