Photoshop ve Dreamweaver ile tasarım (2. 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
1.
Tüm gördüğünüz şeyler birer resim, yani ortadaki beyaz alan da beyaz bir resim parçası...
Photoshop'un oluşturduğu parçaları rahat görebilmek için, CellPad'e 5 piksel değer girdim, border'ı 1piksel ve yeşil yaptım.



2.
Photoshop'un oluşturduğu sayfayı DreamWeaver'da açıyoruz.
Resmin kesilen tüm parçaları web sayfamızda işe yaramayacak... İşi bu parçaları silmekle başlıyoruz. Kolaylık olması için CellPad'e bir değer girin ki parçalar birbirinden ayrılsın, böylece işe yaramayacakları daha kolay saptarsınız... (aşadığaki örnekte 5 piksel değer girilmiştir)
Bu kontrol sırasında bazı gereksiz hücreler de gözünüze çarpacaktır. Sağdaki hücreler gereksiz, o bölümü tümüyle siliyoruz....
8.gif

Silinmiş hali aşağıda...



3.
Background ile alanları dolduralım
Tekrar eden resim parçalarıyla gereken yerleri doldurmayı biliyorsunuz.
background="images/xx.gif"
Bu parçaları 1-2 piksel olarak hazırlamak en uygunu. Çünkü amacımız sayfayı olabildiği kadar küçük boyutta hazırlamak...
Sağ taraftaki bölüm
Üst taraftan başlayalım. Aşağıda gördüğünüz bölümü 1_06.gif adlı resmi kullanarak background olarak doldurdum.
1_06.gif

1_003.gif








Alt tarafta devam edelim:
1_19.gif
1_19.gif
1_03.gif











spacer.gif

Ayrı bir parça olarak kestiğimiz çizgili bölümleri resim olarak çağırıp ilgili yerlere ekliyoruz.
1_14.gif
1_14.gif

Kullandığımız parçalar bunlar:
1_003.gif




1_19.gif

1_14.gif

1_12.gif
1_16.gif
1_18.gif




Tüm yerleştirmeler tamamlanınca sağ bölümün görünümü aşağıdaki gibi olacak...
1_03.gif





1_12.gif
1_14.gif

1_14.gif

1_14.gif

1_14.gif

1_14.gif

1_14.gif

1_14.gif

1_14.gif

1_16.gif

1_18.gif
spacer.gif


Sol taraftaki bölüm
Burada kullanacağımız parçalar da bunlar:
1_01.jpg

1_09.gif


Bitmiş hali de bu:
1_01.jpg









Baktığınız zaman 3. Hali ile Photoshop'un oluşturduğu arasında fark yok gibi görünüyor. Ama önemli bir fark var.
Yazı yazmak için alanlarımız oluştu
 

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

    Üst