Html Kodlar | Tr.gg | Webmaster | Sitene Ekle | Html Kod | Photoshop | Dreamweaver | Webtasarim | Tr.gg Tasarimlari

P.s De Css tasarım

By Sanalport.tr.gg Tarafından Yazılmıştır... Alırken Alıntı Göstermemeniz Durumunda Gerekli işlemler başlatılacaktır...

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;

http://img.sanalkurs.net/uploads/1_341.jpg

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

http://img.sanalkurs.net/uploads/2_288.jpg

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

http://img.sanalkurs.net/uploads/3_234.jpg

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

http://img.sanalkurs.net/uploads/4_197.jpg

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

http://img.sanalkurs.net/uploads/5_158.jpg

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

http://img.sanalkurs.net/uploads/6_121.jpg

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

http://img.sanalkurs.net/uploads/7_88.jpg

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

http://img.sanalkurs.net/uploads/8_68.jpg

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ç

http://img.sanalkurs.net/uploads/9_58.jpg
 
By AdiL
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol