Yayınlanmış Yazılar
TekHost.Net > TekHost Destek Sistemi > Yayınlanmış Yazılar

Photoshop tasarımlarımızı div olarak kaydetme

Yazı içeriği Bu yazımızda photoshop üzerinde yapmış olduğumuz tasarımlarımızı div olarak kaydetmek ve css kodlarını kullanmayı göstermeye çalışacağız.

Öncelikle photoshop tasarımımızı slicelerle bölüyoruz. (Bölmüş olduğumuz slicelere hatırlayacağımız şekilde isimler verirsek, ileride css kodlarımızı düzenlerken daha kolay olur.)

Slice işleminden sonra 'photoshop->File-> Save for web & Devices' diyerek kaydetme işlemine başlıyoruz.

Açılan kayıt sayfasında Sağ en üst kısımda simge halinde bulunan 'Optimize Menu' ye tıklıyoruz. Açılan menüden 'Edit output setting' e tıklıyoruz.

Output settings te bize çeşitli kayıt seçenekleri sunuyor. Bu tablodan 'Next' kısmına tıklıyoruz. Önemli olan nokta da burası. Yani 'Slice Output' !

Slice Output kısmında 2 adet seçenek mevcut. 1. si 'generate table' diğeri ise 'Generate Css'.

Generate table seçeneği tablolar halinde kayıt yapmaya yaramaktadır.

Bizi ilgilendiren kısım ise Generate Css olduğu için generate css yi tıklıyoruz ve 'Save' diyerek kaydediyoruz. Şimdi tekrar kayıt sayfasına döndük. Buradan da save diyerek kayıt yapıyoruz. Bu kısımda unutmamamız gereken yer ise kayıt türüdür. Kayıt türünü 'Html and İmages' olarak kaydetmeliyiz.

Kayıt seçeneklerini daha da genişletmek mümkündür. Css kodlarını kullanmak için şimdilik bu yeterlidir. İleride detaylı ve resimlerle anlatmaya çalışacağız.

Not: kayıt işleminde css kodları index sayfamızın içerisinde bulunmaktadır. Dilerseniz url yolunu göstererek css kodlarını .css tablosundan da çekebilirsiniz.

ETİKETLER: ps div kaydetmek, photoshopta div olarak kayıt, div olarak kaydetmek nasıl, photoshop dersleri, sliceleri div olarak kaydetmek, photoshop div kullanmak, photoshop ta divlerle sayfayı kaydetmek, photoshop xhtml div.
 
Sizce bu bilgiler faydalı mı? evet / hayir
Yazı detayları
Yazı ID: 50
Kategori: Çeşitli Anlatım ve Kaynaklar
Mesaj Tarihi: 2010-07-20 16:24:23
Görüntüleme: 27
Popülerlik (Oylama): Article rated 5.0/5.0 (3)

 
<< Geri Git

TekHost Destek Sistemi