Bir Site Yapalım - 1

Hepimiz birçok Flash web sitesini görmüş ve hayranlıkla bakmışızdır. Son sürümünde gelişmiş özelliklere sahip olan Fireworks 8 ile Flash site alt yapısı anlamında bir çalışma yapalım istedim bu derste.

Hepimiz birçok Flash web sitesini görmüş ve hayranlıkla bakmışızdır. Son sürümünde gelişmiş özelliklere sahip olan Fireworks 8 ile Flash site alt yapısı anlamında bir çalışma yapalım istedim bu derste.

Flash teknolojisi sadece grafik ve tablolardan oluşan HTML sayfalarını altüst ederek büyük bir devrim yaratmıştı. Hem dinamik yapıyı destekliyor oluşu, hem de az yer kaplaması bunda çok etkili oldu. Artık Flash materyalin kullanılmadığı web sitesi neredeyse yok gibi.

Bundan yola çıkarak ben de sizlere, basit bir Flash sitesi taslağı nasıl hazırlanır, nelere dikkat etmek gerekir, onu anlatacağım.

Daha öncesinden tasarımlarınızın kabataslak bir eskizini oluşturmuş olmanız işinizi büyük ölçüde kolaylaştıracaktır. Yapacağınız tasarımın amacı da bu noktada çok önemlidir. Konsepti, kurumsallığı gibi hususlar sitenin ara yüzünü belirlemede etkin unsurlardır. Ancak ben burada henüz başlangıç aşamasında olan bir projeye yaptığım tasarım üzerinde duracağım.

Flash sitesi hazırlamaya başlamadan önce tasarımını mutlaka Fireworks veya Photoshop'ta yapmış olurum. Fireworks ağırlıklı tercihimdir, çünkü Flash ile entegrasyonu mükemmeldir. Flash, Fireworks'ten aktardığınız vektörel grafikleri olduğu gibi tanıyacaktır. Bu dersimizde tasarım kısmını Fireworks'te hallettikten sonra Flash'ta sitemize hareket vereceğiz.

Adım 01:
Şimdi Fireworks 8 programında kendimize File > New menüsünden 780x600 ölçülerinde yeni bir sayfa açalım. Arka plan rengini #99CC00 yapın. Sayfamızı "Tercih.png" adı ile kaydedin.



Adım 02:
Çalışmamız için düşündüğümüz tasarım, daha önceden yaptığımız eskizlere göre şekillenecek. Buna göre ana sayfa ara yüzümüz 6 kısımdan oluşacak: 1. Site ismi, sloganı, varsa logonun olduğu kısım, 2. Menüler, 3. Sitenin mesajını iletecek grafik alanı, 4. Hoş geldiniz başlığı, 5. Site yazıları, 6. Copyright kısmı.

Adım 03:
Şimdi Site ismi ve menü alanı için Rectangle aracını kullanarak 628x124 ebadında bir dikdörtgen çizin ve çizdiğiniz bu dikdörtgenin kenarlarını Properties panelinden Rectangle Roundness kısmını 11 yapın. Bu işlem dörtgenin kenarlarını hafif oval yapacaktır. Gradient olarak da Linear (#ECECEC, #F4F4F4), kenar çizgi kalınlığı 1, rengini de #FFFFFF yapın. Dilerseniz Effects bölümünden gölge verebilirsiniz. (Resim 2)

Adım 04:
Sitenin mesajını iletecek grafik alanı için de 620x199 ölçüsünde bir dörtgen daha çizin ve bunu az önce çizdiğinizin alt kısmına konumlandırın. Rectangle Roundness kısmını 5 yapın. Dolgusu mühim değil, çünkü içine resim atacağız, ama kenar çizgi kalınlığını 1, rengini ise #FFFFFF yapın. Sağ tıklayıp Arrange > Bring to Front deyin. Böylece bu şeklimiz en üste geldi.



Ders devam edecek.... Dersin devamı için tıklayın.

  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

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

Hocam İnanınız...Ne Zamandır Fireworks Dersleri Bekliyorduk Bu Derste İlaç gibi Geldi...Çok Güzel bir Ders Olmuş Tebrik Ederim....Klavyeniz Der Görmesin:gul:.....Devamını Bekleriz....:)
yapılan calısma gerçekden cok iyi çalışmaların devamını büyük bir ilgi ile izlemekten ve sizi teprik etmekten baska yapabileceğim bir sey yok tesekkurler...
emeği geçen herkese teşekkür ediyorum... bende yararlanıyorum bu siteden.. başarılar dilerim..
güsel anlatım yapmışsınız..teşekkürler..
:D ellerinize sağlık
hocam süpersin...
ben ilk kez karşılaşıyorum.çok anlamlj:D
Bir Site Yapalım - 2 'den ders devam ediyor. Dalga gecmeye calisan arkadaslara duyurayim.
elinize sağlık
herkese merhaba... sorum şöyle: Bir index sayfası için tuval ölçüleri ne olmalıdır? Bu bir okul sitesi olacak.Bir de pencere düğmeleri ile oynandığında sitenin sayfa kenarları ekranda 1024*768 çözünürlüğünde gözükecek.selamlar

Yukarı Git