Photoshop ve Dreamweaver ile tasarım (1. bölüm)

Photoshop kullanılarak yapılmış tasarımı, Slice Aracıyla kesip, save for web'de HTML and images seçeneğini işaretleyerek kaydederseniz, kesilmiş resimler ve html sayfa oluşturulur. Tasarım yapıldıysa, çok kısa sürede ve çok kolay olarak web sayfanız hazırdır...

Bu sayfa server'a yüklenip, internet dünyasına açılabilir.

Ama bazı sorunlar sizi rahatsız edecektir, bunları bulmaya çalışalım...

• Resim ve yazıları Photoshopta hazırladıysanız, yazılar üzerinde düzeltme yapmak gerektiğinde en baştan başlamız gerekir.
  
• Farklı
  yazıları olan sayfalar için tekrar photosohopta hazırlamanız gerekir,
  ortak fotoğraflar olduğu halde onları tekrar tekrar oluşturursunuz...
  
• Tümü resimden olan sayfalar, dosya boyutu olarak büyük olduğu için sayfalar çok geç açılır...
  

Dreamweaver ile, Photoshopta oluşturduğunuz html sayfaları düzenlerseniz, bu sorunları aşarsınız...

Elinizde Photoshopta sizin (ya da tasarımcı) tarafından hazırlanmış bir çalışma olduğunu varsayarak, başlıyoruz...



Kesme işlemleri

Slice Aracı ile kesilmesini istediğiniz kısımları işaretlemeniz gerekir.


Önceden guide
ile keseceğiniz yerleri belirlemeniz iyi olur. İşaretlerken nerelerden
keseceğinizi düşünün, ve tam kenarlarına yerleştirmeye özen gösterin.
Büyüteçle sayfaya yakınlaşıp çizgileri kontrol etmeyi unutmayın.


Aşağıdaki Snap ve Snap To
ayarını yapmayı unutmayı unutmayın, Slice Aracını rahat kullanırsınız.
Çünkü snap To bölümünden seçtiğiniz guides, grid, Layers vs, yaptığınız
çizimin, seçenekleriniz doğrultusunda kolayca (guides'a, grid'e,
Layers'a vs.) yapışmasını sağlar



Kesilmesi gereken yerleri slice Tool ile tek tek işaretleyin...



İşaretlemeniz
bitince, File / Save for Web bölümüne gelin. Resmin özelliklerine göre
gif ya da jpg formatını seçin, HTML and Images seçeneğini işaretleyin
ve kaydedin



Verdiğiniz
isim, resimlerin isimleri olarak kullanılacaktır bu yüzden daha kısa
bir isim seçmeniz, harf kalabalıklığını önler

ps-ile-tasarim-yapma1_01.gif yerine
1_01.gif olarak görünmesi daha iyidir...




Sayfamızı kaydederken oluşan images klasörünün içinde kesilmiş resimleri görüyorsunuz
[img(485,672)]http://www.webdersleri.com/dijital-resim/pstutorial/sitetasarimi/images1/6.gif