21 Ekim 2007

Fireworks ile Websitesi tasarlayalım

Tasarım ve Programlama Yorum Ekle

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.
Firework ile website tasarımı
Ç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.
Firework ile website tasarımı
Ç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.
Firework ile website tasarımı
Aşağıdaki gibi çubuğumuzun üzerine yerleştirin.
Firework ile website tasarımı
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.
Firework ile website tasarımı
Ş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.
Firework ile website tasarımı
Navigasyon çubuğumuzun üst kısmına ister bir resim isterseniz de site adınızı, sloganınızı yazabilirsiniz.
Firework ile website tasarımı
Ş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.
Firework ile website tasarımı
Yan menümüzü oluşturduktan sonra üzerine yazılarımızı yazıyoruz.
Firework ile website tasarımı
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.
Firework ile website tasarımı
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.
Firework ile website tasarımı
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.
Firework ile website tasarımı


Bu yazının kısa bağlantısı http://www.yakupgovler.com/?p=108.

Yazılarımı RSS aboneliği ile takip edebilir, yeni yazılarıma kolaylıkla ulaşabilirsiniz. Bunun için ise RSS adresimi kullanabilirsiniz.


“Fireworks ile Websitesi tasarlayalım” yazısı için 4 Yorum

Bu yazıya yapılan yorumları dilerseniz, ( RSS 2.0 ) beslemesini kullanarak takibe alabilirsiniz.

  1. henster dedi ki:

    güzel anlatım olmuş ellerinize sağlık. 🙂

  2. atınç hoca dedi ki:

    Emeğinize sağlık.Kardeşm çabaların için teşekkürler.Başarılarını kıskanıyoruz. 🙂

  3. Mehmet Ali dedi ki:

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

  4. Yakup Gövler dedi ki:

    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.