aeyStudio
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Arayüzler
PSP - Boru Yapımı
PSP - Transparent Gif Yapımı
Butonlar
PSP - Paslı Zemin Yapımı
Arayüz Yapımı-2
Fireworks Kısa Yollar
Efektler
Metal Plaka Yapımı
ImageReady ile Arayüze Link Verme

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.697
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / ImageReady / ImageReady Örnekleri / ImageReady ile Navigation Bar

ImageReady ile Navigation Bar
RSS Feed: ImageReady ile Navigation Bar (Dersler)
Eklenme Tarihi: 07.11.2005 - 20:51   (İzlenme: 58473)
Yorumları Oku (-)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır /


Arayüz (interface) Yapalım - 2

(Navigation Bar)

Tıklayınız
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 » Jump to Photoshop
Kolay gelsin...




Yazan: Yorum:
Bu ders için yorumlar yok

RSS Feed: ImageReady ile Navigation Bar (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar