 |
|
 |
 |
 |
 |
|
|
Sitede 27 kategoride, toplam 92 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.903
Bugünkü ziyaret: 0
|
|
 |
|
 |
|
|
Eklenme Tarihi: 07.11.2005 - 20:51 (İzlenme: 69688)
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...
|
|
|
|