Örneğimizdeki Arayuz_set.psd isimli dökümanımızın Photoshop da nasıl hazırlandığını daha iyi anlayabilmek için bu sayfadaki PSD formatlı zipli dosyasını indirip, Photoshop programınızda açarak, Layer (Katman) leri tek tek incelemelisiniz.
Gelelim yukarıdaki örnek dökümanımızı ImageReady de nasıl hazırladığımıza; Önceden Photoshop da hazırlayıp, Arayuz_set.psd olarak kayıt ettiğimiz dökümanımızı, Photoshop dan ImageReady'e gönderebileceğimiz gibi doğrudan ImageReady den de açabiliriz. Dökümanımıza Link vereceğimiz alanları belirlemeye yardımcı olacak olan Slice ile rahat çalışmak için (View>Show Rulers ile cetvelimizi dökümanımız üzerinde belirledikten sonra) ayıracağımız parçalarını tespit etmek için "Guide" ile ayrım yerlerini 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 (Ruler) üzerine tıklayıp maus u basılı tutarak çekiyoruz. Böylece "Guide" nin -mavi- çizgilerini bulup imaj üzerinde istediğimiz gibi taşıyoruz. Guide bize imaj üzerinde ayrım ayırma yapacağımız alanları belirlemede çok kolaylık sağlar.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.
Slice penceresindeki alanların nasıl doldurulması gerektiğini "Slice Bölümünde" görebilirsiniz.
Slice Tool (Dilimleme) aracı ile dilimlediğimiz yerleri tekrar seçmek için ise yine Tool Box dan Slice Select Tool ile mavi çerçeveli alanları tıklayarak dilimleri seçili hale getiriyoruz.Bu örneğimizde ImageReady in Slice ve Rollover pencerelerini birlikte kullanarak uygulamamızı yapacağız. Şöyleki;
Slice penceresinde, Slice Select Tool ile link vereceğimiz alanı belirledikten sonra bu pencerenin link özellikleri olan URL, Target, Message, Alt bölümlerini tercihimize göre dolduracağız.
Rollover Penceresinde ise Slice penceresindeki link özelliklerine göre mause üzerine gelince imajın alacağı görüntüyü düzenleyeceğiz. Uygulamamıza başlayalım; (Slice seçimlerinin hepsini, Slice Select Tool ile yapacağımızı tekrar hatırlatalım)
1- İlk olarak Slice penceresinden yukarıdaki resimde gürünen 14 numaralı parçayı seçelim ve link özelliklerini girelim. Daha sonra Rollover penceresine gidelim ve mause hareketleri için gerekli olan seçimimizi yapmak için alt tarafta bulunan ikonuna (Create new rollover state) tıklayarak yeni bir Rollover durumunu gösterecek olan (hemen üst taraftan Over'ı seçerek) rollover yaratıp, Layer penceresindeki Button1 Layer Set'i içindeki Layer 13'ün yanındaki göz ikonunu (tıklayarak) aktif hale getirelim . Ardından Eko Layer Set'i içindeki eko1 ve eko1_ISIK Layerlerinin yanındaki göz ikonlarına tıklayarak bunlarıda aktif hale getirelim ve klavyemizdeki Yukarı tuşu yardımıyla bulunduğu yerden yukarıya taşıyalım. Nihayet Text Layer Set'i içindeki ana sayfa Layerinin yanındaki göz ikonuna tıklayarak aktif hale getirelim . Bununanlamı, 14. slice parçasında olan yani dökümanımızdaki 1. butonun üzerine mause ile gelince, butonun rengi değişecek ve açık renk olacak, 1. equalizer düğmesi hareket edip yukarıya çıkacak, pencerede de gidilecek olan linki gösteren "ANA SAYFA" yazısı belirecek. Bu uygulamadan sonra dökümanımızın görüntüsü yan taraftaki resimde görünen şekli alacaktır.

Şimdi de Slice penceresinden yukarıdaki resimde gürünen 16 numaralı parçayı seçelim ve link özelliklerini girelim. Daha sonra Rollover penceresine gidelim ve yeni bir Rollover durumunu gösterecek olan (Over) rollover yaratıp, Layer penceresindeki Button2 Layer Set'i içindeki Layer 16'yı aktif hale getirelim.
Ardından Eko Layer Set'i içindeki eko2 'i aktif hale getirelim ve klavyemizdeki Yukarı tuşu yardımıyla bulunduğu yerden yukarıya taşıyalım. Text Layer Set'i içindeki linkler Layerini aktif hale getirelim. Böylece 16. slice parçasında olan yani dökümanımızdaki 2. butonun üzerine mause ile gelince, butonun rengi değişecek ve açık renk olacak, 2. equalizer düğmesi hareket edip yukarıya çıkacak, pencerede de gidilecek olan linki gösteren "LINKLER" yazısı belirecek.
3- Şimdi de Slice penceresinden yukarıdaki resimde gürünen 18 numaralı parçayı seçelim ve link özelliklerini girelim. Daha sonra Rollover penceresine gidelim ve yeni bir Rollover durumunu gösterecek olan (Over) rollover yaratıp, Layer penceresindeki Button3 Layer Set'i içindeki Layer 20'yi aktif hale getirelim. Ardından Eko Layer Set'i içindeki eko3'i aktif hale getirelim ve klavyemizdeki Yukarı tuşu yardımıyla bulunduğu yerden yukarıya taşıyalım. Text Layer Set'i içindeki galerim Layerini aktif hale getirelim. Böylece 18. slice parçasında olan yani dökümanımızdaki 3. butonun üzerine mause ile gelince, butonun rengi değişecek ve açık renk olacak, 3. equalizer düğmesi hareket edip yukarıya çıkacak, pencerede de gidilecek olan linki gösteren "GALERIM" yazısı belirecek.
4- Tekrar Slice penceresinden yukarıdaki resimde gürünen 20 numaralı parçayı seçelim ve link özelliklerini girelim. Daha sonra Rollover penceresine gidelim ve yeni bir Rollover durumunu gösterecek olan (Over) rollover yaratıp, Layer penceresindeki Button4 Layer Set'i içindeki Layer 24'ü aktif hale getirelim. Ardından Eko Layer Set'i içindeki eko4 'i aktif hale getirelim ve klavyemizdeki Yukarı tuşu yardımıyla bulunduğu yerden yukarıya taşıyalım. Text Layer Set'i içindeki kimim Layerini aktif hale getirelim. Böylece 20. slice parçasında olan yani dökümanımızdaki 4. butonun üzerine mause ile gelince, butonun rengi değişecek ve açık renk olacak, 4. equalizer düğmesi hareket edip yukarıya çıkacak, pencerede de gidilecek olan linki gösteren "KIMIM" yazısı belirecek.
5- Slice penceresinden yukarıdaki resimde gürünen 22 numaralı parçayı seçelim ve link özelliklerini girelim. Daha sonra Rollover penceresine gidelim ve yeni bir Rollover durumunu gösterecek olan (Over) rollover yaratıp, Layer penceresindeki Button5 Layer Set'i içindeki Layer 28'i aktif hale getirelim. Ardından Eko Layer Set'i içindeki eko5 'i aktif hale getirelim ve klavyemizdeki Yukarı tuşu yardımıyla bulunduğu yerden yukarıya taşıyalım. Text Layer Set'i içindeki forum Layerini aktif hale getirelim. Böylece 22. slice parçasında olan yani dökümanımızdaki 5. butonun üzerine mause ile gelince, butonun rengi değişecek ve açık renk olacak, 5. equalizer düğmesi hareket edip yukarıya çıkacak, pencerede de gidilecek olan linki gösteren "FORUM" yazısı belirecek.
6- Slice penceresinden yukarıdaki resimde gürünen 24 numaralı parçayı seçelim ve link özelliklerini girelim. Daha sonra Rollover penceresine gidelim ve yeni bir Rollover durumunu gösterecek olan (Over) rollover yaratıp, Layer penceresindeki Button6 Layer Set'i içindeki Layer 32'yi aktif hale getirelim. Ardından Eko Layer Set'i içindeki eko6 'yı aktif hale getirelim ve klavyemizdeki Yukarı tuşu yardımıyla bulunduğu yerden yukarıya taşıyalım. Text Layer Set'i içindeki z. defteri Layerini aktif hale getirelim. Böylece 24. slice parçasında olan yani dökümanımızdaki 6. butonun üzerine mause ile gelince, butonun rengi değişecek ve açık renk olacak, 6. equalizer düğmesi hareket edip yukarıya çıkacak, pencerede de gidilecek olan linki gösteren "Z.DEFTERI" yazısı belirecek.
7- Slice penceresinden yukarıdaki resimde gürünen 26 numaralı parçayı seçelim ve link özelliklerini girelim. Burayı e-mail göndermek için kullanacağımızdan sadece URL kısmına, mailto:emailadımız@sitemizinadı.com gibisinden e-mail adresimizi yazalım. Burada Rollover penceresini kullanmıyoruz. Buraya tıklayınca ziyaretçinin e-mail programı, bize e-mail göndermek üzere açılacak.
8- Son olarak Slice penceresinden yukarıdaki resimde gürünen 09 numaralı parçayı seçelim. Burası sadece dökümanımıza birazcık animasyon katmak için hazırlanmış hoş bir sürpriz bölümü olacak ve buraya tıklayınca üzerinde "DISK" yazan CD penceresi açılıp kapanarak bir anismasyon oluşturacak, birazcık eğlencenin kimseye zararı olmaz herhalde.. :-)) Burada Slice penceresini kullanmıyoruz. Daha sonra Rollover penceresine gidelim ve yeni bir Rollover durumunu gösterecek olan (Over) rollover yarattıp Text Layer Set'i içindeki disc Layerini aktif hale getirelim. Sonra, tekrar yeni bir rollover yaratalım ancak bu defa Click 'i seçelim. Layer penceresinde bulunan disk_ici ve eject_golge01 Layerlerini aktif hale getirelim. Text Layer Set'i içindeki disc open Layerini aktif hale getirelim. Tekrar yeni bir rollover yaratalım (Down) Layer penceresinde bulunan disk_ici ve eject_golge01 Layerlerindeki göz ikonlarını kapatarak aktifliklerini iptal edelim. Text Layer Set'i içindeki disc open Layerinin de aktifliğini iptal edip, disc Layerini aktif hale getirelim. Böylece 09. slice parçasında olan yani dökümanımızdaki eject butonun üzerine mause ile gelince, pencerede "DISC" yazısı belirecek, tıklayınca disk kapağı açılıp pencerede "DISC OPEN" yazısı belirecek ve arka arkaya tıklamalarla da bu animasyon hareket etmiş olacak.
Bu bölümdeki örnek dökümanımızdaki pencere içindeki link yazılarını göstermek için dijital yazı tipi olarak "Digital Readout" fontunu kullandık. İndirmek için tıklayınız » [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] (71 Kb)
Sizler kendi uygulamalarınızda burada bahsedilen örnek döküman olan Arayuz_set.psd de istediğiniz değişikliği yapabilir, renkleri, yazıları vs. hepsini istediğiniz gibi değiştirip kendi tasarımınıza adapte edebilirsiniz.
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.
PSD formatlı dökümanımızı Optimize ederek kaydetmek için, 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.. Daha sonra kaydettiğimiz yerde bulunan HTML sayfasını browser ımız ile açıp, kaynak kodlarını, Java Script kodlarıyla beraber alarak web sayfamızın HTML kodları arasına yerleştirerek web sayfamıza dökümanımızı taşıyabiliriz ( ve aralarındaki kodlara dikkat ederek). Bu kodlar arasındaki tagı içindeki ONLOAD="preloadImages();" kodu script in çalışması için çok önemlidir. Mevcut tagınız şu şekilde değiştirilmelidir:
Ancak kayıt sırasında oluşan images klasörünü de içindeki .*gif formatlı imajlarla beraber web sayfamız ile aynı yere kopyalamalıyız.
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.
İşte hepsi bu kadar.
Kolay gelsin...