Ders Adı: ImageReady - Pencereler
Kategorisi: ImageReady Tanıtımı
Ekleyen: zebaniz - Tarih: 07.11.2005 - 19:50

ImageReady - Pencereler
Önceden de açıkladığımız gibi ImageReady'nin pencereleri de hemen hemen Photoshop'un pencerelerinin aynısıdır. Layer, Switch, History, Actions Pencereleri aynı kullanım özelliklerine ve işlevlerine sahiptirler. Bunları Photoshop bölümümüzde açıkladığımız için burada sadece ImageReady'e özgü olan ve yeni göreceğimiz pencereleri açıklayacağız.
Bunlardan ilk olarak, üzerinde "Animation" - "Rollover" - "Image Map" - "Slice" sekmeleri olan pencereye kısaca bir ad verirsek, "İmaj Düzenleme Penceresi" diyebiliriz.

"İmaj Düzenleme Penceresi" Genel Görünümü

"İmaj Düzenleme Penceresinin bütün sekmelerinin gösterildiği animasyonu görmek için Tıklayın!

Ayrıca Optimize ve Effects pencerelerini de açıklamaya çalışacağız.
"Optimize" Penceresi Görünümü "Effects" Penceresi Görünümü
ImageReady - Animation Sekmesi
Burada ilk sırada "Animation Sekmesi" vardır. Öncelikle bu sekmeyi inceleyelim;

"Animation Penceresi" Genel Görünümü

Bir hatırlatma yaparak başlamakta fayda var; ImageReady gibi programlarla animasyon hazırlamak için "Frame" lere ihtiyaç vardır (Flash'da bu işi Timeline Penceresi yapar). Animasyonu oluşturacak her hareket tek tek "Frame" lerde düzenlenir. Yani anime edeceğimiz imajımızın yapacağı her hareketi bir Frame'de göstermemiz gerekir. Sonra bütün Frame'leri hareket ettirince, tıpkı sinema filmi şeritinde olduğu gibi animasyonumuz hareket etmeye başlar. Hayat kazanır....
Şimdi gelelim yukarıdaki resimimize, mavi renk ile işaretlenmiş üzerinde "1" yazılı olan çerçeve, animasyonu oluşturacak olan ilk Frame (Çerçeve) dir. Frame sayısı çoğaldıkça ve Frame sayısı kadar çerçeve eklenerek herbirinin kaçıncı Frame olduğu üzerinde yazar (1.-2.-3.-4-.-.. Frame gibi). Bu mavi çerçevenin alt tarafında görünen "0,00s.." ise o Frame in saniye cinsinden ekranda görüneceği zamanı belirler. Yanındaki Aşağı Ok'a basarak açılan menüden bu süreyi kendimiz istediğimiz gibi belirleyebiliriz. Çerçevenin alt tarafında ucunda aşağı ok ile gösterilen bölge ise animasyonun tamamı ile ilgili olup, ne kadar süre ile ekranda görüneceğini belirler. Resimde yazılı olan "Once" seçerseniz animasyon bir defa oynayacak ve duracak demektir. Aşağı ok'a basarak açılan menüden "Forever" ı seçerseniz animasyon hiç durmadan devamlı çalışacaktır. Animasyonun oynama süresini kendiniz seçmek isterseniz bu defa "Other" ı seçip bu süreyi yazarak belirleyebilirsiniz. "Other" a genellikle bu süre 1001 olarak yazılır. Şimdi pencerenin en altında bulunan ve bir Kaset Çaların kumanda düğmelerine benzeyen komutları inceleyelim;

İlk (en başataki- 1.) Frame'e gönderir.
Seçili olan Frame den bir önceki Frame'e gönderir.
Bütün Frame'leri çalıştırarak animasyonu oynatır. (Play)
Frame'lerin çalışmasını ve animasyonu durdurur. (Stop)
Seçili Frame'den bir sonrakine gönderir.
Tween, Seçili Frame'e istediğiniz kadar frame ve başka özellikler ekleyip frame sayısını belli bir düzen içinde çoğaltarak akışkanlık kazandırır.
Seçili Frame'i dublike ederek kopyasını yaratır.(Yeni Frame ekler.)
Frame'i pencereden siler.

Gördüğünüz gibi bu düğmelerle, tıpkı bildiğimiz Kaset Çalar'a kumanda eder gibi animasyonumuza çok kolay kumanda edebiliriz.
ImageReady - Rollover Sekmesi
Şimdi de ikinci sıradaki "Rollover" sekmesini inceleyelim;

"Rollover Sekmesi" Görünümü

Buradaki Rollover Penceresini açıklamak için şöyle bir örnek vermek gerekirse, hani web sayfalarında sık sık gördüğümüz başka sayfalara link veren düğmeler vardır da bunlardan birinin üzerine mouse ile gidince hemen başka bir düğme ile değiştir, hatta üzerindeki yazı da değişir. Mouse'umuzu üzerinden çekince de tekrar eski düğme belirir ya işte buna "Rollover" deniyor. Bunu yapanda bir java script'tir.
İşte bu uygulamayı ImageReady ile bu sekme sayesinde çok kolay yapıyoruz.
Bunu açıklamak için yukarıdaki örnek resmimizdeki imajı yaratalım. Öncelikle Layer Penceresine gidip yeni bir Layer yaratalım . Daha sonra Araç Kutusundan Marquee Tool'u seçip , bir dikdörtgen çizelim. Swatches' dan seçtiğimiz yeşil renk ile bu dikdörtgenimizi boyayalım . Tekrar Layer Penceremize gidip Layerin üzerine sağ tuş ile tıklayarak "Dublicate Layer" i seçerek ilk layerimizin kopyasını yaratalım. Yarattığımız bu layer'e klavyemizdeki Shift tuşuna basılı tutarak bir defa tıklayıp seçili hale getirelim. Tekrar Swatches' a gidip bu defa kırmızı rengi seçelim. Layer'imizi kırmızıya boyayalım. Bu imajımıza efekt verelim ki "Rollover" da farklı görülsün. Layer Penceremizin altında bulunan Efekt ikonuna tıklayarak açılan menüden "Bevel and Emboss" u seçelim. İşte artık efektsiz yeşil renkte "Layer 1" ve efekt verilmiş kırmızı renkte "Layer 1 copy" isimli iki adet Layerimiz oldu.
Şimdi "Animasyon Penceresi"nden "Rollover" sekmesini seçelim. Önce "Normal" yazan bir çerçeve karşımıza çıktı ve burada her iki Layer'ımızdaki yeşil ve kırmızı imajlarımız görünüyor. Layer Penceremize gidip, "Layer 1 copy" yi kapatalım . Şimdi "Normal" çerçevesinde sadece yeşil imaj görünüyor. Rollover sekmesini en altında bulunan ikonuna tıklayarak "Over" çerçevesini yaratalım. Over çerçevesi seçili iken (mavi renk) tekrar Layer Penceresine gidip bu defa "Layer 1" kapatıp, "Layer 1 copy" yi açalım . Şimdi de "Over" çerçevesinde kırmızı imajımız görünüyor. Over yazısının yanında Aşağı Bakan Ok'a tıklayıp menüyü açtığımızda "Over-Down-Click-Out-Up-Custom- None" seçenekleri karşımıza çıkar. Bunlar mouse üzerine gelince, imajın ne şekilde değişeceğini tespit etmemize yarar. İmajın üzerine gelince, üzerinden ayrılınca, tıklayınca gibi tercihlerdir. Bunlardan birini seçerek varsayılan -Default- Browser'ınızda , üstelik Java Script kodu ile beraber ve imajınızın bir çok özelliğini de görebilirsiniz.

ImageReady - Image Map Sekmesi
Üçüncü sıradaki "Image Map" sekmesini inceleyelim;

Buradaki Image Map'i açıklamaya bir örnek ile başlarsak; diyelim ki bir imajınız var, ancak bunu bölüp parçalara ayırıp, web sayfanızı hazırlama aşamasında HTML kodunu düzenlerken hücreler ayırıp, bu parçalarıda hücrelerin içine koymak istemiyorsunuz, yada bir manzara resmi vb. üzerinden bütünün bozmadan ama çeşitli yerlerinden başka sayfalara link vermek istiyorsunuz. İşte bu aşamada Image Map, bir nevi imajınızın haritasını çıkarmak için yardımınıza hazır, bekliyor. Konuyu daha anlamak için aşağıdaki örnek resmi inceleyelim:

"Image Map" Örnek Resmi.
İmaj Penceremizde, öncelikle beyaz zemin (background) üzerinde kırmızı renkte dikdörtgen şeklinde bir imajımız, üzerinde de üst kenara yakın ve seçili bir alan içinde "Ana Sayfa" yazısı ile alt kenarına ve yakın yine seçili ancak renkli bir alan içinde "ImageReady" yazısını görüyoruz.
İşte bu seçili alanlar, imaj üzerinden link verebileceğimiz alanlardır. Örneğimizdeki üstteki seçili alandan, web sayfamızın "Ana Sayfa"sına, alttaki seçili alandan da "ImageReady" konusu ile ilgili sayfasına link verdik.
Daha iyi anlamak için, bu imajı nasıl hazırladığımızı görelim; Öncelikle evvelce "ImageReady-Penceler.PSD" isimli ve PSD formatında kaydettiğimiz imajımızı açtık.
Sonra Layer Penceresine gidip, yeni bir Layer yarattık (Layer 1).
Daha sonra, Araç Kutusundan Marquee Tool'u seçip , bir dikdörtgen çizdik. Swatches' dan seçtiğimiz kırmızı renge "Paint Bucket Tool" (G) ile bu dikdörtgenimizi içine tıklayarak boyadık .
Şimdi artık "imaj haritamızı" çıkarabiliriz:Tekrar Araç Kutusuna gidip, buradan "Rectangle Image Map Tool" (P) 'u seçtik. Layer 1 deki kırmızı renkli dikdörtgenmizin üst kenarına yakın bir yerden yine bir dikgörtgen şeklinde çizerek seçili alan olan ilk "Image Map" imizi yarattık. Araç Kutusundan "Type Tool" (T) ' ile ilk Image Map 'in içine "Ana Sayfa" yazdık.
Daha sonra tekrar Araç Kutusundan "Rectangle Image Map Tool" (P) 'u seçip yukarıda anlattığımız yolu izleyerek ancak ilki ile karışmaması için bu defa kırmızı imajımızın altına doğru ikinci Image Map'imizi de yaratarak içine "ImageReady" yazdık.
İmajımızda, üzerinde işlem yapacağımız Image Map'leri Araç Kutusundaki, "Image Map Select Tool" ' adlı Seçim Aracı ile seçerek tespit ediyoruz. İşlem yapmak üzere ile seçtiğimiz Image Map, yukarıdaki örnek remimizde de görüleceği gibi kenar ve köşelerinde küçük kareler olan seçim çizgileri ile belirleniyor, seçilmeyenler ise "Hoop...Burada bir Image Map var!.." diyerek kenarları renkli bir alan olarak kalıyor.
Artık bu iki adet Image Map seçili alanlarına link vermeye sıra geldi.
Önce üzerinde "Ana Sayfa" yazılı ImageMap_01 isimli alanımıza ait olan ve sayfanın üst tarafındaki "Image Map Penceresi Görünümü" resmimizde gösterilen Image Map Penceresindeki boş alanları dolduralım. Burası tamamen HTML kodu yaratmaya yarar. Name: İsteğinize bağlı olarak bir isim verebilirsiniz. Biz aynen bıraktık. URL: link vereceğiniz adresin URL sini yazın. Target: Link verdiğiniz adrese ait web sayfasının nasıl açılmasını istediğinizi belirliyebilirsiniz (_blank,_ self, _parent, _top). Alt:Mouse üzerine gelince belirecek olan açıklamayı yazabilirsiniz. Dimensions Bölümü: Link verdiğimiz seçili alanların pixel cinsinden ölçüleridir. X:Seçili alanın, İmaj Penceresinin sol kenarından uzaklığını, Y: Seçili alanın, İmaj Penceresinin üst kenarına olan uzaklığını, W:Seçili alanın enini, H: Seçili alanın yüksekliğini belirler.
Hepsi bu kadar, artık ayarlarınız da tamamsa, Varsayılan -Default- Browser'ınızda , Java Script kodu ile beraber "Image Map" özelliğini görebilirsiniz.
*İleride tekrar kullanmak üzere, "ImageReady-Penceler.PSD" isimli imajımızı File > Save (Ctrl+S) ile PSD Formatında kaydedelim.

Alanların seçimini animasyonda görmek için Tıklayın!
ImageReady - Slice Sekmesi
Animasyon Penceresinin son sekmesi "Slice Sekmesi" dir.

İşlevsel olarak Image Map sekmesine çok benzemektedir. Ancak burada yapılan işlemin farlı, imajı dilimler halinde parçalara ayırarak herbirine ayrı ayrı link verilebilir, istenmeyen parçaların imajda görünmesi engellenebilir, "Windows Status" denen, browser penceremizin sol alt köşesine mesajlar yazılabilir. Kayıt sırasında parçaladığınız imajları sizin belirleyeceğiniz bir klasöre yada default olarak bırakırsanız, "images" klasörüne kaydeder. Bütün bu işler için gerekli bütün HTML kodlarının ve script'lerin düzenlenmesini ImageReady sizin için otomatik olarak yapar. Slice sekmesini açıklamaya herzamanki gibi bir örnek ile başlayalım;
Öncelikle yeni bir imaj yaratmak için programın arayüzündeki File/New ile "ImageReady-Slice" adını verip, 150X150 ebatlarında Beyaz zeminli, seçimle imajımızı yaratalım.
Sonra Layer Penceresine gidip, yeni bir Layer yaratalım (Layer 1).
Daha sonra, Swatches' dan Kırmızı rengi seçip, Araç Kutusundan Rounded Rectangle Tool'u seçip , köşeleri kıvrık Kırmızı renkli bir dikdörtgen çizelim. Biraz değiklik olsun diye imajımıza efekt verelim. Layer Penceremizin altında bulunan Efekt ikonuna tıklayarak açılan menüden önce "Drop Shadow" ve ardından da "Bevel and Emboss" u seçelim.
İmaj Penceresinin Normal Görünümü ve "Slice Tool" u Seçtikten Sonraki Görünümü.
İmaj Penceresinin "Slice Tool" ile İşaretlenmiş Görünümü.
İmaj Penceremizde, öncelikle beyaz zemin (background) üzerinde kırmızı renkte ve efekt uygulanmış dikdörtgen şeklinde bir imajımız oldu.
Şimdi Animasyon Penceresinden "Slice" sekmesini seçelim. ("Slice" sekmesindeki yukarı-aşağı küçük oklar ile pencere görüntülerini değiştirebiliriz. ). Araç Kutusundan "Slice Tool" (K)'u seçip
, Kırmızı renkli imajımızın üzerine istediğimiz büyüklükte bir seçili alan yaratalım. Tekrar "Slice Tool" ile başka bir seçili alan yaratalım. Resimde de gördüğümüz gibi seçtğimiz bu alanlar ile hem imajımızı bölmüş olduk hemde link vereceğimiz alanları yaratmış olduk.
Görüldüğü gibi, imajın üzerinde numaralar ile parçalara ayrılmış alanlar oluştu. Burada ki numaralar, parçalanma sonucu oluşan yeni imajların numaralarıdır. Bizim Slice Tool ile seçerek oluşturduğumuz ve aktif olan parçaların numaraları Mavi çerçeve için de gösterilir. (Buradaki 3 ve 7 nolu imajlar gibi).
İşlem yapmak istediğimiz parçayı "Select Slice Tool" (K) ile seçerek tespit ederiz.
"Slice" sekmesindeki boş pencereleri aynı "Image Map" de olduğu gibi link vermek için istediğimiz gibi doldurabiliriz. URL: Kısmına, link vereceğimiz yere ait URL adresini, Target: Kısmına, Link verdiğiniz adrese ait web sayfasının nasıl açılmasını istediğinizi belirliyebilirsiniz (_blank,_ self, _parent, _top), Message: Kısmına, "Windows Status" denen, browser penceresinin sol alt köşesine görülecek mesajı yazılabilirsiniz, Alt:Kısmına, Mause üzerine gelince belirecek olan açıklamayı yazabilirsiniz.
Burada farklı olan diğer alanlardan, Type Açılır Menüsünden "Image" seçilirse, imajımızda seçmiş olduğumuz alandaki imaj browser da görünecek, "No Image" seçilirse, yeni bir "Text" Penceresi açılarak buraya herhangi bir yazı yazabileceğiz, ancak link veremeyeceğiz. BG: ise bu alanın zemin rengi (Background) ni belirleyebiliriz.
Dimensions Bölümü: Seçili alanların pixel cinsinden ölçüleridir. X:Seçili alanın, İmaj Penceresinin sol kenarından uzaklığını, Y: Seçili alanın, İmaj Penceresinin üst kenarına olan uzaklığını, W:Seçili alanın enini, H: Seçili alanın yüksekliğini belirler. "Constrain Proportions" seçilirse, bu ölçülerden birini değiştirirseniz, diğeride o ölçüye uygun olarak otomatik olarak değişir. (W-H)
Slice Sekmesinde, yan tarafdaki küçük pencerede ise seçilen parçanın görüntüsü ve özellikleri belirir.
3 nolu Parça Seçili iken "Slice Sekmesi" Görünümü
Hepsi bu kadar, artık ayarlarınız da tamamsa, Varsayılan -Default- Browser'ınızda , Java Script kodu ile beraber "Slice" özelliğini görebilirsiniz.

Daha iyi anlamak için animasyonu görebilirsiniz. Tıklayın!


Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=38
Web Sitesi: http://www.aeyStudio.com