Fireworks ile Grafik Sitesi - 1. Bölüm

  • 18.535

Bu derste birlikte güzel ve basit bir grafik sitesi hazırlayacağız.

Fireworks programının grafik tabanlı web siteleri için en ideal program olduğunu ilk yazımızda ifade etmiştim. Photoshop da bu bakımdan oldukça iyidir, ama Fireworks'un sadece web için geliştirildiğini söylemek her halde iki programı birbirinden ayıracaktır.

Yeni bir sayfa açalım

İlk önce File > New diyerek yeni boş bir sayfa açacağız. Karşımıza aşağıdaki gibi bir iletişim kutusu gelecek:



Biz 780*600 için bir web sayfası hazırlayalım ve Width (Uzunluk)=780, Height(Yükseklik)=600 yapalım. Bu bizim ekran çözünürlüğümüz olacak. Bu şekilde yapmamızın nedeni, web sayfasının 15" bir monitörde bile ekrana tam oturmasını sağlamaktır. Resolution (Çözünürlük)=72 olsun.

Canvas Color (Tuval Rengi) için seçeneklerden birini seçelim. İsterseniz "white" diyerek arka planın beyaz olmasını, isterseniz "transparent" diyerek renksiz olmasını, dilerseniz de "custom" bölümünden herhangi başka bir rengi seçmeniz mümkün tabii. Biz "white" diyoruz.

Sayfamızı açıldı ve artık web sayfamız için çalışmalarımıza başlayabiliriz.

Şimdi hayalî bir yayınevi için basit bir grafik web sayfası yapacağız. Adımlarımızı tek tek izleyin. Araç kutusundan bilemediğiniz olursa, bir önceki dersimize bakabilirsiniz.

Web sayfamız için önce bir arka plan yapacağız. Bunun için "Renctangle" aracını kullanarak tüm arka alanı kaplayacak şekilde bir dörtgen çiziyoruz. Properties'e gelin ve şu değerleri girin: Dolguyu Solid (renk: #003366) yapın. Edge: Antialias, Texture: Line-Horiz 1, (45-50) yapalım. Netice aşağıdaki gibi bir şey olacaktır:



Yukardaki gibi bir sayfamız oldu. Yapacağımız diğer unsurları bunun üzerine bina edeceğiz. Eğer isterseniz siz daha farklı efektler, dolgular deneyebilirsiniz. Şimdi üzerine yine "Renctangle" aracını kullanarak bu kez beyaz bir alan oluşturacağız. Aşağıdaki gibi bir alan oluşturun.



Şimdi bu kez de beyazın üstünden biraz kırparak menü alanı oluşturalım. Bunun için şu işlemleri takip edin: Yine "Renctangle" aracını kullanarak üstten bir küçük bir dörtgen çizin.



Bu arada gördüğünüz gibi layer (katman) çizgileri seçildiğinde mavi olarak görünür. Seçilmeden önce üzerine geldiğinizde kırmızı renktedir. Üstte bu beyaz alanı oluşturduktan sonra devam edelim. Şimdi bu beyaz alanımızın üstten küçük bir kısmını keserek zarif bir görüntü oluşturmak istiyorum. Bıçakla sağ üstten küçük kenarını yatay bir şekilde keseceğim, bunun için katman seçiliyken bıçak (knife tool) sembolünü seçiyor ve kesiyorum. Sonra o alanı tek başına seçerek "delete" tuşuyla siliyorum. Aşağıdaki gibi olması gerekiyor.



Şimdi üst taraflara açılır menüler yerleştireceğiz. Onun için böyle bir şey yaptık. Aslında menülerin açıldığı her bir sayfa için bu şekilde beyaz çıkıntılar oluşturarak menülere gidildiğinde o kısım ayrı bir parçaymış hissi uyandırılabilir. Bunun en güzel örneğini MSN Hotmail sayfalarında görebilirsiniz.

Şimdi üste yerleştirdiğimiz küçük beyaz dörtgene bir renk vereceğiz, dolgu yaparak.



Dolguyu nasıl yapacağız?

Toolkit menüsünden "Gradient" aracını seçelim. Aşağıda Properties (Özellikler) bölümünde ilgili alanın kullanabileceğimiz özellikleri görüntülenecektir. Dolgu menüsünden "Linear" ismini seçin. Bununla bir bölgeden diğer bölgeye azalan renk alanları oluştururuz. Şimdi boya kutusu simgesine tıklayın:



Yukarı doğru bir kutu açıldı. Burada dolgu kutularını görüyorsunuz. Sağ taraftaki dolgu kutusu mavi, soldaki beyaz olduğundan bir taraftan diğer tarafa doğru renk azalıyordur. Gördüğünüz kutucukları orta taraflarda her hangi bir yere tıklamak suretiyle çoğaltabilirsiniz. O zaman renk sayısı artacaktır. Veya Preset açılır menüsünden hazır renkler seçebilirsiniz.

Şimdi şeklimize dönelim. Aşağıdan yukarı mouse'u çekelim. Aşağıdan yukarı maviden beyaza bir geçiş görülecektir.

Şimdi de hazırladığımız maviyi üst köşeye yerleştirelim.



Gördüğünüz gibi orada hoş bir görünüm oluştu. Şimdi o aynı işlemi tam aksi istikamete de uygulayacağız. Öyleyse, "Linear" uyguladığınız mavi alanı (yani beyaz şeklimizi) seçin, şu işlemlerden birini yapın: Alan seçili olduğu halde Edit > Duplicate komutunu verin. Resmin hemen altına bir kopyası çıkarılır.

Ya da, Edit > Clone komutunu verin. Resmin tam üstüne kopyası çıkarılır.

Ya da, "Alt" tuşuna basılı tutarken resmi sürükleyin, kopyasını çıkarmış olursunuz.

Ya da, "Ctrl+C" tuşuna basıp, "Ctrl+V" ile yapıştırın. (Bu her yerde kullanılan genel bir yöntemdir)

Kopyalama işlemi bittiyse, kopyasını yaptığınız şeklimizi sağ tarafa taşıyıp aşağıdaki resimde olduğu gibi yerleştirin. Ama önce resmi ters çevirmemiz gerekiyor. Bunun için de şu işlemlerden birini yapın: Sırasıyla, Modify > Transform > Flip Vertical komutunu verin, arkasıdan Modify > Transform > Flip Horizontal işlemlerini uyguladığınızda tam ters çevrilmiş olduğunu göreceksiniz.

Ya da, en kolay yoldan Modify > Transform > Free Transform yapıp resmi sizin istediğini şekle gelinceye kadar çevirebilirsiniz.

Son durum:



Güzel bir arayüz oldu, öyle değil mi? Şimdi işe koyulup üste logo, menüler yapacağız. Alt tarafta da bir ana sayfa oluşturacağız. Zaman ilerledikçe güzel bir web sayfası elde edeceğiz. Yazıların üzerine geldiğimizde açılır menüler olan bir web sayfamız olacak. Bir sonraki hafta kaldığımız yerden devam edeceğiz. Çalışmamıza sonraki derste eklemeler yaptık mı, son durum aşağıdaki gibi olacak. Bekleyin...



Hepinize kolay gelsin.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

• 12 yıl önce
mükemmel olmuş abi
• 12 yıl önce
harika olmuş teşekkür ederiz
• 12 yıl önce
çohq süper bişi
• 12 yıl önce
gercekten süper olmus.hem estetik hem de hos bir arayüz :D tam istedigim sey bende menüyü sol tarafa koyarak yapmayı deniyecem bakalım yapabilecekmiyim :D
• 12 yıl önce
Çok güzel olmuş, ben de yaparken bir türlü kesme (knife tool) işlemini yapadım her seferinden kesmiyor bir yerde yanlışmı yapıyorum anlamıyorum bir açıklama nerde yanlış yaptım lütfeeen:-dusun:
• 12 yıl önce
yorumdan sonra bir tekrar daha yapmak nasıl olduysa kestim yani oldu, tşk
• 12 yıl önce
Süper bişi bu anlatımlarınız ama çok uğrastım ve çok sinirlendiğim zamanlar oldu ama gerçekten güzel bir program ve güzel bir anlatımınız var tşkler...
• 12 yıl önce
Toolkit menüsü nerde ya bulamadim yada göremiyorum :(
• 11 yıl önce
çok güzel ellerine sağlık

Yukarı Git