2.647 kez okundu

Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız

10 10 2.647 kez okundu incelendi

Dersimizin 1. bölümünde Photoshop’ta sitemizi tasarlamıştık. Şimdi de bu tasarımı Dreamweaver’da kullanmada.

Sitemizi tasarlayıp Photoshop’ta kaydetmiştik ve elimizde images adlı bir klasör ve sitemiz.html oluşmuştu. Sitemiz.html bizi fazla alakadar etmiyor. images klasörü içerisindeki parçaladığımız resimleri sitemizde uygun yerlere koyacağız.

http://resim.sanalkurs.net/uploads/20_10.jpg

Şimdi Dreamweaver?ı açıyoruz, sıfırdan başlıyoruz. Layout Table ile 800?e 600lük bir alan hazırlıyoruz. Arka plan rengimizi kırmızının tonlarından bir tanesini seçtim. Şimdi resimleri üzerine yerleştirme zamanı geldi.

http://resim.sanalkurs.net/uploads/21_16.jpg

http://resim.sanalkurs.net/uploads/22_21.jpg

Şimdi tek yapmamız gereken ölçülerle Layout Table oluşturmak. En önde 190 piksellik bir kare vardı. Oraya logomuzu koyacaktık. Öncelikle onun için bir tablo oluşturalım.

http://resim.sanalkurs.net/uploads/23_13.jpg

Şimdi de arka plan için üst tarafta oluşturduğumuz bölümü yapalım. Onun da yüksekliği 90 pikseldi. Aşağıda göründüğü gibi çizelim.

http://resim.sanalkurs.net/uploads/24_10.jpg

Şimdi arka plan belirlemek için Standard görünüme geçiyoruz.

http://resim.sanalkurs.net/uploads/25_10.jpg

Properties bölümünde bulunan Bg bölümünden resmimizi buluyoruz.

http://resim.sanalkurs.net/uploads/26_6.jpg

Resmi bölerken üst bölümdeki geçişi 2 piksellik bir resim olarak kaydetmiştim. Resim kendisini devam edeceği için bu resmi seçiyoruz.

http://resim.sanalkurs.net/uploads/27_7.jpg

Sitemiz şu hâli aldı. Oluşan çizgiler de çizdiğimiz tabloların kılavuz çizgileri. Siteyi kaydettiğimizde bu çizgiler gözükmeyecek.

http://resim.sanalkurs.net/uploads/28_6.jpg

Butonlarımız vardı. Draw layout cell ile butonların büyüklüğü kadar bölümler oluşturuyoruz. İstersek bu alanı tek bir bölme olarak hazırlayıp öyle de butonları yerleştirebiliriz.

http://resim.sanalkurs.net/uploads/29_6.jpg

Alanı seçip Common menüsünde Image seçeneği ile ekliyoruz. Diğer seçenekleri de kullanabiliriz ama dersin içeriği bakımından yüzeysel olarak anlatıyorum.

http://resim.sanalkurs.net/uploads/30_5.jpg

Resmi ekledikten sonra butonları seçip Properties bölümünden bağlantıyı sağlıyoruz.

http://resim.sanalkurs.net/uploads/31_10.jpg

Üstteki butonlara isim verdikten sonra kabaca sitemiz bitmiş oluyor. Şimdi metinlerin bulunacağı bölümü yapmaya başlıyoruz.

http://resim.sanalkurs.net/uploads/32_6.jpg

Şimdi şöyle bir detay verelim. Layout bölümünde ?Layout Table? ve ?Draw Layout Cell?i inceleyelim. Sitemizin temelini buradan oluşturuyoruz. Layout Table ile sitemizdeki tabloları oluşturuyoruz. Draw Layout Cell ile de yazı alanımızı oluşturuyoruz. Her ikisini de gerektiği yerde kullanabiliyoruz. Layout Table?ın içerisine Layout Table tekrar çizebiliyoruz. Ama Draw Layout Cell içerisine Layout Table veya Draw Layout Cell çizemiyoruz. Bu mantığı oturttuktan sonra alanımızı çizelim.

http://resim.sanalkurs.net/uploads/33_12.jpg

Şimdi Photoshop ile tasarladığımız klasörden gerekli parçaları buluyoruz. Soldaki menü için anlatmak gerekirse, 3 parçadan oluşmaktadır. Bir tane gelişigüzel bir Layout Table çiziyoruz. Genişliğimiz 200 pikseldi. Gölgelendirme verdiğimiz için 200 pikselden biraz daha büyük olmayacaktır. Resmimizin üzerine geldiğimizde bir bilgilendirme kutusu çıkıp resmin boyutlarını görmemize yardımcı olacaktır. Resmimiz gördüğünüz gibi 205 piksel genişliğinde ve 9 piksel uzunluğundaymış.

http://resim.sanalkurs.net/uploads/34_10.jpg

Üstte ve altta bulunan oval köşeli bölüm için bir tane uygun boyutlarda Layout Table çizip arka plana gerekli resmi koyacağız. Ama önce dediğimiz gibi menü uzunluğunda bir Layout Table çiziyoruz. Resmimiz 205 piksel genişliğindeydi. Bu Layout Table da 205 piksel genişliğinde olmalı. Yüksekliği de şimdilik önemli değil. Gelişi güzel bir uzunlukta bırakıyoruz.

http://resim.sanalkurs.net/uploads/35_6.jpg

Deminki resmimizi yerleştireceğiz. Bir tane daha Layout Table çizeceğiz. 9 piksel uzunluğunda, table?ın içerisine ve en üstüne sabitlemeliyiz.

Tablomuzu oluşturduktan sonra Standart görünüme geçip arka planımızı bu bölgeye atıyoruz. Aşağıdaki Properties bölümünden yapıyoruz. Ardından aynı işlemi aşağıdaki bölüm için de yapıyoruz. Bu resmimizin uzunluğu da 15 pikselmiş. Onun için tablomuzun alt tarafına 15 piksel uzunluğunda bir tablo çizip bu resmimizi yine arka plan olarak atıyoruz. Bu işlemden sonra işimiz bitti gibi.

http://resim.sanalkurs.net/uploads/36_4.jpg

Ön izleme yaparak yerleştirdiğimiz şekilde bulunduğunu görebiliriz. Şimdi Layout bölümüne gelerek ortada bulunan alanı yapıyoruz. Bu bölgeye yazı yazacağımız için bu bölgeyi Draw Layout cell ile yapacağız. Arada kalan bölgeyi tamamen Draw Layout cell ile oluşturup arka planı belirlediğimiz 2-3 piksel olarak kaydettiğimiz aradaki bölümü arka plan olarak atıyoruz buraya.

http://resim.sanalkurs.net/uploads/37_3.jpg

Gördüğümüz gibi 3 piksellik bir resim ile tüm bölümü oluşturmuş olduk. Bu sayede sitemiz hem hantallıktan kurtulmuş, hem de güzel bir görünüme kavuşmuş olacaktır. Ortadaki bölümü Draw Layout cell ile yaptığımız için yazı yazdığımız zaman biraz fazla menü olursa bölüm kendini otomatik olarak uzatacaktır. Arka plan resmimiz de kendini otomatik olarak uzayan bölgeyle beraber uzamaya devam edecektir. Şimdi Aynı şekilde orta bölgedeki yazılarımızın olacağı bölümü de oluşturuyoruz?

http://resim.sanalkurs.net/uploads/38_2.jpg

Sitemiz kullanılabilir bir durumda. Size sadece içerisini doldurmak kalıyor.

http://resim.sanalkurs.net/uploads/39_2.jpg

Mesela bir ayakkabı firmasının sitesi olarak tasarlamış olalım? Sitemizin içeriğini yerleştirdikten sonra işimiz bitmiş oluyor.

http://resim.sanalkurs.net/uploads/40_1.jpg

Tasarım aşamasındayken transparan çalışmıştık. Şimdi de bu transparan çalışmamızın kolaylıkları sayesinde sitenin görünümünde değişiklikler yapalım?

http://resim.sanalkurs.net/uploads/41_1.jpg
http://resim.sanalkurs.net/uploads/42_1.jpg
http://resim.sanalkurs.net/uploads/43_1.jpg

Gerisi sizin yaratıcılığınıza kalmış bir şey. Başarılar dilerim?

(Unutmayın: Bu dersi tablolarla anlattım. Yeni başlayanlar “Tablolarla anlatılmış, daha kolaydır, divlerle hiç uğraşmayayim” gibi bir düşünceye kapılmasın. 1. dersin başında da bahsettiğim gibi bu 2 ay önce hazırlamış olduğum bir ders. O zamanlar divlerle pek aram olmadığı için tablolarla hazırlamıştım. Kesinlikle divlerle çalışmanızı öneririm. Div mantığını kavradığınız zaman bu tip siteleri yapmanız çok daha basit olabiliyor.)

Paylaş !

Yoruma kapali.

Önceki yazıyı okuyun:
Photoshop ile yaptığımız bir tasarımı Dreamweaver'a nasıl aktarırız

Bu derste sizlere Photoshop ile tasarlanan bir siteyi nasıl kullanılabilir duruma getireceğimizi anlatmaya çalışacağım. Takıldığınız noktalarda elimden geldiğince yardımcı olmaya...

Kapat
Barış Ozcan Facebook Sayfasi
Barış Ozcan Twitter