Fireworks ile Websitesi tasarlayalım - Yakup Gövler - WordPress'e dair ne varsa
Bu yazıda Fireworks kullanarak basit bir websitesi tasarlayacağız. Önce websitesinin olmasını istediğiniz çözünürlükte (800x600, 1024x768 vs.) yeni bir dosya oluşturun. İlk önce navigasyon çubuğumuzu yapacağız. Resmin genişliğinde yeni bir dikdörtgen oluşturun. İçerisini açık griden, ortaya griye, linear olacak şekilde gradient (renk geçişi) ile doldurun ve 1px genişliğinde koyu gri renkte kenarlık uygulayın.Aşağıdaki gibi görünmesi gerekiyor.
Çubuğa küçük bir gölge ekleyin. Gölge çubuğun altında ve geçirgenliği (opacity) az olmalı. Aşağıdaki yolla gölgeyi ekleyebilirsiniz. Dikkat edin, gölge fazla olmasın.
Çubuğumuza birkaç düğme ekleyelim. Çubuğun üzerine içini gradient (renk geçişi) olarak turuncudan sarıya olacak şekilde linear ve koyu sarı renkte kenarlığı bulunan bir dikdörtgen ekleyin.
Aşağıdaki gibi çubuğumuzun üzerine yerleştirin.
Resmi zumlayın. Aşağıdaki gibi açık sarı renkte, line aracıyla düğmenin üzerine iki çizgi çizin. Bunlar düğmeye ışık verecektir.
Şimdi düğmeyi oluşturan bütün çizimleri seçip, düğmeyi çoğaltın (Edit/Dublicate) ve çubuğun üzerine yatay olarak yerleştirin. Üzerlerine Metin aracı (text tool) ile sayfalarımızın isimlerini yazıyoruz.
Navigasyon çubuğumuzun üst kısmına ister bir resim isterseniz de site adınızı, sloganınızı yazabilirsiniz.
Şimdi sitemizin yan menüsünü ekleyelim. Navigasyon çubuğunun altında yeni bir dikdörtgen oluşturun ve dolgu olarak açık maviden koyu maviye linear gradient uygulayın. Böylece soldan ışık geliyormuş gibi oldu. Işık soldan geldiğine göre menümüzün sağında gölge oluşması lazım. Menümüze küçük bir gölge ekliyoruz.
Yan menümüzü oluşturduktan sonra üzerine yazılarımızı yazıyoruz.
Yan menümüzün genişliğinde aşağıdaki gibi yeni bir dikdörtgen çizip, yan menünün en üstüne yerleştirin. Dikdörtgenin altına da küçük bir gölge uyguluyoruz. Gölge rengini lacivert olarak seçiyoruz.
Oluşturduğumuz dikdörtgen üzerine menümüzün başlığını yazıyoruz. Aynı zamanda da içerik bölümüne de sitemizin içeriğini, örneğin bir haberi yazıyoruz.
Son olarak, sitemizin en üstüne aşağıdaki gibi bir renk geçişi olan bir dikdörtgen ekliyoruz. Aynı zamanda da navigasyon çubuğumuzu çoğaltıp (edit/dublicate) sitemizin en altına yerleştiriyoruz. Tasarımımızın son hali aşağıdaki gibi olmalı. Resme tıklayıp, hedefi kaydet diyerek tasarımın Fireworks dosyasına ulaşabilirsiniz.
Bu yazının kısa bağlantısı http://www.yakupgovler.com/?p=108.
“Fireworks ile Websitesi tasarlayalım” yazısı için 4 Yorum
Tarih: 26 Ekim 2007 Saat: 00:10
güzel anlatım olmuş ellerinize sağlık. 🙂
atınç hoca dedi ki:
Tarih: 02 Şubat 2008 Saat: 19:49
Emeğinize sağlık.Kardeşm çabaların için teşekkürler.Başarılarını kıskanıyoruz. 🙂
Tarih: 13 Ocak 2009 Saat: 16:05
Hocam bende elimden geldiğinde photoshop ile websitesi tasarlıyorum fakat... Bunu html olarak nasıl site haline sokacağız.. Orda sorunlar var bu konu hakkında da bizi bilgilendirirsen çok sevinirim...
Tarih: 13 Ocak 2009 Saat: 17:47
Photoshop ya da hangi resim programı olursa olsun yapılan tasarımı HTML olarak kodlamak için resmin parçalanması ve ardından bu resim parçalarının HTML + CSS kullanılarak sitenin yapılan tasarıma en uygun olacak şekilde birleştirilmesi gerekmektedir.
Bir tasarımı HTML + CSS'ye dönüştürmek için bunları iyi bir şekilde bilmek ve bazı yöntemleri (CSS sprite - CSS arkaplan kaydırma, kutu modeli vs.) iyi öğrenmek gerekiyor. CSS ile ilgili olarak http://www.fatihhayrioglu.com'un sitesi vazgeçilmezdir.