Ana sayfa İnternet Photoshop ve Fireworks ile web sayfaları için ileri düzey menü yapımı

Photoshop ve Fireworks ile web sayfaları için ileri düzey menü yapımı

0

Fireworks”ün, web tasarımcılarına ve yazılımcılarına zamandan tasarruf etme imkanı sağlayan ipuçlarına bir örnek.

Dreamweaver, Flash ve Photoshop. Web tasarımcılarının bu üç programa olan saygısı ve sevgisi sonsuz. Peki ya Fireworks? Diğer üçüyle kıyaslarsak neredeyse öksüz evlat muamelesi görüyor. Ancak işin gerçeği şu ki; ufak çaplı animasyonlardan profesyonel butonlara ve detaylı menülere kadar, temel ve ileri düzey web tasarım araçları konusunda en iyi web programcılarını bile kıskandıracak pratikliğe sahip. Macromedia döneminde tabii ki Photoshop”un da bir nevi rakibi olarak görünen bu program Adobe”ye geçtiğinden beriyse onun gölgesinde kalmış izlenimi veriyor. Photoshop”un rakibi dediysek tabii sadece web tasarım konusunda. Fireworks internet siteniz için lazım olan en ideal imaj çözünürlüğü ve çeşitlerini bünyesinde barındırmasıyla ünlü. Ek olarak Fireworks”ün kendine özgü yapısıyla öyle pratik noktaları varki bunlar da onu piyasada tutan özellikler olarak göze çarpıyor. çoğumuzun Adobe”ye geçiş döneminde FreeHand”le beraber piyasadan kalkacağına kanaat getirdiğimiz Fireworks, pratik özellikleri sayesinde Adobe için de vazgeçilmez bir hal aldı. ?imdi biz de hak ettiği değeri yeteri kadar bulamamış bu programla sitemiz için alt bölümleri de olan bir menü hazırlayacağız. Tabii bu noktada temel web tasarımı ilkelerini biliyor olduğunuzu ve Photoshop”a az da olsa aşina olduğunuzu varsayacağız.

öncelikle menüyü sitede yerleştireceğiniz alana göre boyutlandırıyoruz. Mesela burada uygun görülen alan 755×35 pixel boyutlarında. Değerleri girip, RGB ve transparan özellikleri olan bir Photoshop dosyası oluşturuyoruz.

Ardından menünün asıl görünümünü oluşturacak zemini belirliyoruz. Buradaki zemin örneği Photoshop”un, Reflected Gradient özelliği kullanılarak oluşturuldu. Herhangi bir zemin olabilir. Dikkat edeceğiniz nokta ilerki aşamalarda oluşturacağınız ikinci zeminle kontrastlığı olması. Zemini mevcut katmanımızın ortasına Gradient Tool”la yukardan aşağıya katmanın yarısını kaplayacak şekilde ufak bir darbe atarak oluşturuyoruz.

 

Zeminin üzerine, doğru hizayla ve aralarına bir ayraç çizgisi koyarak bölümleri yazıyoruz. Bunun için de Horizontal Type Tool”u kullanıyoruz. Renk paletinde üstteki rengi beyaz yapıyoruz. çizgi için Line Tool”u kullanabilirsiniz. Ancak “alt” ve klavyenin üst bölümünde bulunan “6” tuşlarına aynı anda basarak yazı yazarken de dikey çizgi çekmeniz mümkün. Hem de daha kolay (Laptoplar için “alt” ve “>” tuşları iş görecektir). Bölüm isimlerini ve aralarındaki boşlukları düzgün bir şekilde ayarlamak isim uzunluklarının orantısızlığına bağlı olarak biraz sabır gerektirebilir. Daha sonra yazıyı yazdığınız Layer”ı; Layer > Rasterize > Type diyerek katmana gömüyoruz.

 

Daha sonra ikinci zemini belirliyoruz. İkinci zemin için yeni bir Layer oluşturuyoruz. Layer > New > Layer.  Renk paletinden ilk zeminin zıddı bir renk seçiyoruz. Açık sarı burada tercih edilen renk.

Edit > Fill diyerek Ok”e tıklıyoruz (Fill”de Content Use: Foreground Color, Blending Mode: Normal ve Opacity: %100 olmalı).

 

Bunun üzerine de menünün ana yazı rengi hangisiyse -buradaki beyazdı- yine onun tersi başka bir renk seçerek -örneğin siyah tercih edilmiş- yazıları bu renge dönüştürerek en üste kopyalıyoruz. Bunu yapmak için mevcut yazı Layer”ını (bu örnekte adı Yazı 1); Layer > Duplicate Layer diyerek çoğaltıyoruz. İsmini düzenleyip (örnekte Yazı 2 olarak düzenlendi) Layer”ların içinde en üste taşıyoruz.

Daha sonra Select > Load Selection diyerek resme çevirdiğimiz yazıyı seçili hale getiriyoruz. Renk paletinde üste siyahı doldurarak Edit > Fill deyip Ok”ye tıklıyoruz.
Dosyamızı PSD olarak kaydedip Fireworks”te açıyoruz.

İlk önce Layers bölmüne gidip (Window > Layers)  ne var ne yok bir göz atıyoruz. Her şey yerli yerinde. State bölümüne geçip (Window > State) hemen ikinci bir State oluşturuyoruz.

Bunun için State kutucuğunun sağ alt bölümünde çöp sepeti ikonunun solunda bulunan “New/Duplicate State” özelliğini kullanıyoruz.

 

İlk State”in üzerine tıklayıp Layers bölümüne gidiyoruz. Layers bölümünde bu State”de görünmesini istediğimiz ilk zemin ve ilk yazıyı görünür bırakıp diğerlerini gizliyoruz. İkinci State için de bunun tam tersini yapıyor; önce State bölümünde ikinciye geçiyor, ardında Layers”da ikinci zemin ve ikinci yazıyı görünür bırakıp diğerlerini gizliyoruz.

 

State bölümüne geri dönüp bu iki State”i geçişken hale getiriyoruz. Bunun için Shift tuşuna basılı tutup, mouse”la ikinci State”in sol taraf en baş bölümünde bulunan kutucuğuna tıklıyoruz.

Şimdi Slice”la yazdığımız bölümleri ayırıyor ve kendi başlarına kullanılabilir hale getiriyoruz. Bütün bölümler için bunu yapıyoruz. Slice tool”la bölümlerin üzerlerini dikdörtgen bir şekille örtmekten ibaret bu işlem. önemli olan her bölüm için ayrı ayrı yapılması. Aynı Crop aracını kullanır gibi.

 

Daha sonra ayırdığımız bu bölümlerin üzerine mouse”un sağ tuşuna tıklayarak (veya eski fareler için “kntrl” ile beraber tıklayarak) “Add Simple Rollover Behavior” özelliğini tek tek uyguluyoruz. Alt tarafta gördüğünüz Properties bölümünde Link yazan yere bölüm için belirlediğimiz sayfayı giriyor Target bölümünden de bu sayfanın ne şekilde açılmasını istiyorsak ayarlayabiliyoruz. Alt yazan bölüm ise alt text için. Buraya gireceğiniz tanımlama; tarayıcıda, mouse”la butona yaklaştığınızda görünür ve okunur hale geliyor. Kullanılması elzem değil.

Şimdi sıra geldi alt menüleri eklemeye. Alt menü eklemek istediğimiz bölüme gelip yine sağa tıklıyoruz. “Add Pop-up Menu” diyoruz ve görsellerde gördüğünüz değerleri tek tek giriyoruz. Content”de Text için ayrılan yere alt menüleri giriyoruz. + ikonuna tıklayarak veya Enter”layarak ilerleyebiliriz burada. Sola blok olacaksa bir-iki tık boşluk vererek, isimleri öyle girmenizi tavsiye edebilirim, daha şık gözüküyor. Link ve Target”ı da hemen burada belirleyebiliyoruz.

Appearance”de alt bölümleri görünmesini istediğimiz düzene sokuyoruz. Font ailesini, rengini veya ne şekilde bloklanacağını seçiyoruz. Ayıca alt bölümü dikey veya yatay belirleme şansına da sahibiz.

Advanced bölümünde sütunların kendi içinde nasıl bir düzene sahip olması gerektiğini belirliyoruz. Burada farklı değerler girerek çıkacak sonuçları karşılaştırıp sizin için en uygununu bulmanız gerekmekte. Cell width”in yani alt bölüm sütun genişliğinin, asıl bölüm genişliğiyle eşit olmasını istiyorsanız; Properties”de W yazan yere karşılık gelen değeri Cell width”e yazmanız yeterli olacaktır. Ancak alt bölüm ismi bu örnekte olduğu gibi uzun ise eşitleme çabası tasarımı zorlayacağından -örneğin fontu çok küçültmek gerekebilir- pek de üzerinde takılmamalı.

Position”daysa X”e sıfır verirken (farklı bir değer girip çıkan sonuçtan memnun kalıyorsanız problem yok) Y”ye menünün boyu kaç pixelse o kadar veya bir pixel fazlasını giriyoruz. Bu örnek için menü yüksekliği 35 pixel. Doğal olarak 36 girilmiş.

Şimdi File > Preview in Browser > Safari diyoruz ve işi test ediyoruz. Farklı browser”lar tanımlayarak da test etmeniz pekala mümkün. Tüm bu aşamalara gelene kadar dosyamızı kaydetmeyi de ihmal etmiyoruz tabii. Fireworks”ün menümüzü PNG formatında kaydetmesi çok doğal. öyle bırakıyoruz.
Menümüz temel olarak hazır olsa da bir şeyden daha bahsetmekte fayda var. Her zaman karşımıza çıkmaz ama bu örnekte karşımıza çıkıyor. Alt bölümün de bir alt bölümü daha olamaz mı? Tabii ki olabilir. Mesela burada Büro Malzemeleri alt bölümünün de altına bir çok bölüm sıralanabilir. Söz gelimi Kalemler. Haydi şimdi buna bakalım.

 

Fireworks”e geri dönüp, alt bölüm eklediğimiz asıl bölümün üzerine sağa tıklıyor ve “Edit Pop-up Menu” diyoruz. Content bölümünde ikinci bir alt bölüm oluşturmak istediğimiz seçeneği belirliyor ve + işaretine tıklıyoruz. Açılan yeni boş alanda resimde daire içine alınmış küçük ikona tıklıyoruz. En sağdaki ikon. Zaten birden seçilebilir hale geliyor, hemen kendini belli ediyor.


 

Bölümleri sıralıyor ve Position”a gidiyoruz. Bu sefer alt bölümde X”e sıfır Y”ye ise 1 veriyoruz. Browser”da test ediyor ve nihayet dosyamızı Export edebilir hale geliyoruz.

Fireworks”ün bir diğer güzelliği bu dosyayı HTML export edip anında Dreamweaver”a import edilebilir hale getiriyor olması. CSS ve JS dosyalarını da kendi hazırlıyor tabii ki. Aynı zamanda orijinal PNG dosyanızı saklamaya devam edin çünkü yapacağınız değişiklikleri Update HTML özelliğiyle kolayca güncelleyebilirsiniz. Değişiklikler Dreamweaver”a anında işlenecektir.

Dosyayı Export etmek için CS 3 veya daha önceki bir sürümü kullanıyorsanız çalışma pencerenizin sağ üst köşesinde bulunan Quick Export seçeneğini kullanabilirsiniz. Quick Export”da Dreamweaver”ı seçip oradan da Export HTML diyebilirsiniz. Update HTML de yine aynı yerde. HTML export ettiğiniz dosyayı ise Dreamweaver”da Insert > Image Objects > Fireworks HTML diyerek menü için açtığınız bölüme import edebilirsiniz. CS 4″de Export ve Update için File > Export ve File > Update HTML yapmanız gerekmekte.

Update HTML”den de biraz bahsedelim. üzerinde değişiklik yaptığınız asıl PNG dosyanızı Update HTML diyerek ve eski HTML dosyanızın üzerine kaydederek güncelleyebilirsiniz. Yaptığınız güncelleme tüm Dreamweaver dosyalarına otomatik yansır ve sizi büyük bir işten kurtarır. Hele ki Link”leri ve Target”ları Fireworks üzerinde belirttiyseniz (ki bunu yapmanız tavsiye edilir) Update HTML size çok büyük bir zaman kazandırır (bu noktada hazırladığınız sitenin dosyalarıyla menünüzün HTML, CSS ve JS dosyalarının aynı klasörde olması gerekiyor tabii).

Her iki seçenekte de dikkat edilmesi gereken bir diğer önemli nokta: “Put Images in Subfolder” sekmesini işaretlemenizin gerekebileceği. çünkü çoğu zaman hazırlanan sitelerdeki görseller tek bir klasörde toplanır. Daha sonra da Browse diyerek sitenizin imaj dosyalarını barındıran bu klasörü tanımlıyorsunuz. Böylece ilk export”da menünün imaj dosyaları tüm sitenizin imaj dosyalarıyla aynı yerde konumlanıyor. Update zamanında da mevcut menü görsellerinin üzerine yenilerini doğru şekilde kaydederek sağlıklı güncellemenizi sağlıyor. Görüldüğü üzere Fireworks oldukça zahmetli olan bu işi çok daha pratik bir hale getiriyor. Onun nimetlerinden neden faydalanmayasınız? Hepinize kolay gelsin.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here