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

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

 
  Bugün 7 ziyaretçi (9 klik) kişi burdaydı!  
 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol