ImageReady ile Navigation Bar

Arayüz (interface) Yapalım - 2

(Navigation Bar)

Photoshopda hazırlayıp, Arayuz02.psd olarak kayıt ederek, ImageReady'e gönderdiğimiz dökümanımızın Slice ile ayıracağımız parçalarını tespit etmek için "Guide" ile bölümlerini belirledik. ["Guide", yan taraftaki resimde görünen mavi çizgilerdir. Bu çizgileri bulup, oluşturmak için imaj penceresinin üst ve sağ tarafından yada yandaki resimde görünen cetvel (Rule) üzerine tıklayıp mouse u basılı tutarak çekiyoruz. Böylece "Guide" nin -mavi- çizgilerini bulup imaj üzerinde istediğimiz gibi taşıyoruz.] Daha sonra da Tool Box dan Slice Tool (Dilimleme) aracını seçip, Guide ile ayırdığımız bölümler arasında imajı dilimleyeceğimiz alanları seçtik. Yan taraftaki resme dikkat ederseniz, "Ana Sayfa" yazısı üzerinde mavi zeminli 03 yazısını görebilirsiniz. Bunun anlamı, "Şu anda 03 nolu dilimdesiniz" demektir. Bu arada Slice Penceresine dikkat ederseniz, otomatik olarak Name: Arayuz02_03 ismini verdiğini görebilirsiniz. URL: kısmına ise bu, "Ana Sayfa" yazısı olan butona basılınca gidilecek olan URL yi girmeniz gerekir. Diğer alanların doldurulmasını "Slice Bölümünde" görebilirsiniz. Tool Box dan Slice Select Tool ile diğer mavi zeminli alanları tıklayarak dilimleri seçebilirsiniz. Bizde örneğimizde diğer URL vereceğimiz bölümleri bu şekilde belirledik. Dilimlenecek alanlarımızı Slice ile tespit ettikten sonra mouse'ı üzerine gelince oluşacak fonksiyonu belirlemek için şimdi Rollover Penceresine (Sekmesine) tıklayarak geçelim. Burada Normal Penceresi görünmektedir. Buradaki Normal, browser da görünen imajın ilk halidir. Alt tarafta bulunan ikonuna (Create new rollover state) tıklayarak yeni bir rollover durumunu gösterecek olan ve default olarak Over adıyla yeni bir pencere açıldı. Burası da browser da mouse hareketine göre görünen imajın 2. halidir. Over yazısı yanındaki ikona tıklarsak açılan menüden mouse'ı, Over:imaj üzerine gelinceki görüntüsünü, Down:imajın üzerine tıklayıncaki görüntüsünü, Click:imaja tıklayınca sabit kalan görüntüsünü, Out:imaj üzerinden ayrıldığı zamanki görüntüsünü, Up:imaja tıklayıp üzerinde bekleme görüntüsünü belirler. Bunları deneyerek daha iyi anlarsınız. Konuyu daha iyi anlatmak için örneğimizde "Ana Sayfa" butonunda Down, diğer butonlarda ise Over kullandık. Siz istediğiniz tercihi kullanabilirsiniz. Dökümanımıza dönersek, öncelikle, 03 numaralı parçaya tıklayarak "Ana Sayfa" yazılı butonumuzu seçtik, Down penceresine gelip, Layer Penceresindeki "Bar&Button01" isimli Layer Set içindeki, "Button1_2" isimli Layerin yanındaki boş bölüme tıklayarak göz ikonunu açıp görünür hale getirdik . 04 nolu parçaya tıklayıp, "Galerim" yazan butonu seçtik bu defa Over Penceresine gelip, aynı şekilde layer penceresindeki "Button2_2" layerini görünür hale getirdik. Aynı şekilde "Linkler" butonunda "Button3_2" ve "E-mail" butonunda da "Button4_2" isimli layerleri görünür hale getirdik. Animasyonlu örneği görmek için Tıklayınız! Böylece işlemlerimizi bitirmiş, Photoshop da hazırlamış olduğumuz Navigasyon Barımıza link verip marifetlerini arttırmış olduk. Bütün yaptımız işlemleri test etmek ve browser da görmek için Araç Çubuğundaki Browser ikonuna tıklamanız yeterli. Açılan browser penceresinde dökümanınızı çok detaylı olarak bütün özelliklerini ve HTML kodlarını görebilirsiniz. Örneğimizin kayıt kodlarını görmek için Tıklayınız! Gerekli kontrolleri yaptıktan sonra herşey istediğimiz gibiyse File>Save Optimized (başka bir isim ile kaydedeceksek File>Save Optimized As... ile) açılan pencereden kaydetmek istediğimiz yeri seçerek hem HTML sayfası olarak ve hem de aynı klasör içine ImageReady nin otomatik olarak yaratacağı images klasörünün içindeki .*gif formatlı resimleri de olmak üzere kaydedebiliriz. Kayıt özelliklerini açılan penceredeki Output Settings den değiştirebiliriz. Ancak önerimiz bu ayarları pek değiştirmeyin. Bırakın default kalsınlar.. Şayet dökümanımızı ayrıca PSD Formatında kaydetmek istersek File>Save (başka bir isim ile kaydedeceksek File>Save As... ile) yine açılan pencereden kaydedeceğimiz yeri seçerek PSD formatında kaydedebiliriz. Daha sonraki değişiklikleri yapabilmeniz için bu PSD formatlı kaydı mutlaka yapmanızı öneririz. Burada hazırladığımız Arayüzün Photoshop da yapılmasını incelemek için Tıklayın » Kolay gelsin...

Yazan: Yorum: Bu ders için yorumlar yok

	Arama terimlerinizi girin Arama formu gönder
	Web www.aeystudio.com