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

bitter_im

Admin
Admin
Genel Yönetici
Katılım
3 Aralık 2009
Mesajlar
64.633
Tepki
53.643
Puan
113
Yaş
32
Konum
kocaeli
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...
  • <LI class=yazi>Resim ve yazıları Photoshopta hazırladıysanız, yazılar üzerinde düzeltme yapmak gerektiğinde en baştan başlamız gerekir.
    <LI class=yazi>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...
1.jpg

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

Ö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.
2.jpg

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
snap.gif


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

İş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
4.gif

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...
5.gif


Sayfamızı kaydederken oluşan images klasörünün içinde kesilmiş resimleri görüyorsunuz
6.gif
 

Şu anda bu konu'yu okuyan kullanıcılar

    Üst