Bu bölümüzde web sayfalarında sık sık gördüğümüz animasyonlu reklam banner ların ImageReady ile nasıl yapıldıklarını göreceğiz. Bundan böyle kendi banner larınızı kolaylıkla yapıp web sayfalarınıza yerleştirebileceksiniz.
Web üzerinde kabul görmüş çeşitli ebatlarda bannerlar vardır. Biz burada en yaygın kullanılan 468 x 60 ebatlarındaki bir banner'ın nasıl yapıldığını inceleyeceğiz. Bunu yaparken de ImageReady'in Animation Penceresini kullanacağız. Banner'ımız bittiği zaman Optimize penceresi yardımıyla istediğimiz gibi size'ını küçültüp kaydedeceğiz. Örnek olarak hazırlayacağımız banner'ımıza web sayfamızın adını yazıp bir animasyon ile süsleyeceğiz.
Öncelikle yeni bir imaj penceresi (döküman) açalım. File>New (Ctrl+N). Yanda resmi görünen "New Document" penceresinde Name kısmına dökümanımızın adını verelim ve Banner yazalım. Image Size kısmında pixel değerlerini verelim. Width (uzunluk) 468, Height (yükseklik) kısmına da 60 yazalım. Contents of First Layer kısmına da arkaplan rengi seçimi için White'ı işaretleyelim. OK 'e basınca "Banner" adındaki yeni dökümanımız açılacaktır. Şayet açık değilse Window>Show Animation ile de animasyon penceresini açalım. Dikkat ederseniz Animasyon penceresinde 1.Frame işaretli olarak görünüyor. Hemen altında "Once" yazan aşağı bakan ok'a tıklayıp açılan menüden Other.. 'a tıklayalım. Burada animasyonumuzun kaç defa tekrarlanacağını seçeceğiz. Açılan "Set Loop Count" penceresindeki Play: kısmına 1001 yazıp OK diyelim. Artık animasyonumuz 1001 defa oynayıp duracaktır.
Dökümanımıza geri dönüp Banner'ımızdaki yazımızın rengini belirlemek için Swatches Penceresinden bir renk seçelim. Örneğimizde #0000CC kodlu mavi rengi seçtik.
Daha sonra Araç Kutusundan Type Tool (T) yazı aracını seçelim ve dökümanımızın herhangi bir yerine tıklayarak web sayfamızın adını yazalım. Araç Çubuğundaki Type Tool seçili iken Tool Options Bar (Araç Seçenekleri Çubuğundaki Pallets düğmesine tıklayarak yazı özelliklerini ayarlayacağımız Yazı Paletini açalım. Aşağıdaki resimdeki gibi değerlerini girelim. Bütün bu işlemlerden sonra dökümanımız ve penceler resimde gördüğünüz şekli aldı.

Daha sonra Animasyon penceresine gelip pencerenin alt tarafındaki ikonuna tıklayarak 1.Frame'in kopyası ve yeni bir Frame olan 2.Frame'i yaratalım. 2.Frame de iken Layers penceresine gelip aeyStudio yazan Layer'e sağ tuş yaparak açılan menüden Dublicate Layer ile aeyStudio copy Layer'ini yaratalım ve alttaki aeyStudio Layerinin yanındaki göz ikonuna tıklayarak aeyStudio Layer'ini kapatalım. Tekrar 1.Frame'i işaretleyip bu defa aeyStudio copy Layerinin yanındaki göz ikonuna tıklayarak aeyStudio copy layerini kapatalım. Bunun anlamı, "1.Frame de iken aeyStudio copy Layer'ini görme, 2.Frame de iken aeyStudio Layer'ini görme" dir. Daha sonra aeyStudio copy Layerinde iken Edit>Free Transform ile "aeyStudio" yazısının boyunu sağ tarafa çekerek uzatalım.
Tekrar Animasyon penceresine gelip pencerenin alt tarafındaki ikonuna tıklayarak 2.Frame'in kopyası ve yeni bir Frame olan 3.Frame'i yaratalım. 3.Frame de iken Layers penceresine gelip aeyStudio copy yazan Layer'e sağ tuş yaparak açılan menüden Dublicate Layer ile aeyStudio copy 2 Layer'ini yaratalım ve Layers Penceresinde alttaki aeyStudio copy Layerinin yanındaki göz ikonuna tıklayarak aeyStudio copy Layer'ini kapatalım. Animasyon penceresindeki Frame leri kontrol edelim ve 1.Frame de iken aeyStudio Layerinin, 2.Frame de iken aeyStudio copy Layerinin, 3.Frame de iken se aeyStudio copy 2 Layerinin açık olmasına dikkat edelim. Bunun anlamı, "1.Frame de iken aeyStudio copy Layer'ini ve aeyStudio copy 2 Layer'ini görme, 2.Frame de iken aeyStudio Layer'ini ve aeyStudio copy 2 Layer'ini görme, 3.Frame de iken aeyStudio Layer'ini ve aeyStudio copy Layer'ini görme dir. Daha sonra aeyStudio copy 2 Layerinde iken Edit>Free Transform ile dökümanımızdaki "aeyStudio" yazısının boyunu biraz daha sağ tarafa çekerek uzatalım.
Animasyon penceresine gelip Ctrl tuşuna basılı tutarak sol tuş ile Frame 1, Frame 2 ve Frame 3'ü seçili hale getirelim ( Yada Animasyon penceresinin sağ üst köşesinde bulunan ikonuna basarak açılan menüden Select All Frames' tıklayarak da bu işlemi yapabiliriz. Bunu daha çok Frame sayısı fazla olan animasyonlarda yapabilirsiniz ). Sonra herhangi bir Frame in altında bulunan 0,00 s... (Selects frame delay time) üzerine tıklayarak açılan menüden tercihinize göre framelerin ekranda görünme sürelerini saniye cinsinden seçebilirsiniz. Biz örneğimizde 0,5 saniye olarak seçtik.
Banner'ımıza isterseniz bir de çerçeve ekleyelim. Çerçevenin rengini tespit edelim biz örneğimizde çerçevemizi siyah yaptığımızdan Palet rengimizi siyah olarak seçtik. Layers Penceresinde Background Layerine tıklayalın ve Layers Penceresinin alt tarafında bulunan (Create a new layer) ikonuna tıklayarak yeni bir Layer yaratalım. Araç Kutusundan Marquee Tool (M)'u seçerek, dökümanımız üzerine çekip uzatarak ve info penceresini açıp kontrol ederek 468x60 ebatlarında seçili alan yarattık. Araç kutusundan Paint Bucket Tool (G)'u seçip seçil alanın üzerine tıklayarak layer'i komple siyaha boyadık. Daha sonra Select>Modify>Contract.. 'ı seçip açılan pencerede değerini 1 vererek Ok dedik ve seçili alanı 1 pixel küçültüp Delete tuşuna basarak kalan seçili alanı sildik. Böylece 1 pixel kalınlığında çerçevemiz oldu. Bu çerçeveyi dökümanın kenarlarına göre klavyenizdeki aşağı-yukarı oklarla taşıyıp ayarlayabilirsiniz.
Böylece Banner'ımızı bitirmiş olduk.
Şimdi dökümanımızı optimize ederek kaydedelim. Öncelikle açık değilse Optimize Penceresini açalım (Window>Show Optimize). Daha sonra döküman penceremizde üst tarafına dikkat ederseniz, Original, Optimize, 2-Up, 4-Up sekmelerini görürsünüz. Original sekmesi dökümanın PSD formatındaki orjinal görüntüsü ve özelliklerini, Optimize sekmesi Optimize penceresinde yapacağımız optimizasyondan sonraki görüntüsü ve özelliklerini, 2-Up, 4-Up sekmeleri ise dökümanımızın 2 veya 4 resim halinde optimizasyon sırasındaki görüntüsü ve özelliklerini gösterir. Biz burada Optimize sekmesini seçip, Optimize penceresinden de GIF, Colors kısmını da 16 olarak vererek Optimize sekmesinde optimizasyon ile kaydettikten sonraki görüntüsünü ve pencerenin alt tarafındaki listeden dökümanımızın size'ının 5,427K, olduğunu, 28.8 modem ile 3 saniyede açılacağı gibi özelliklerini görüp istediğimiz gibi ayarlayabiliriz. Buradaki görüntüsü ve özelliklerine göre gerekli değişiklikleri Optimize Penceresinden yapabiliriz. Bizim örneğimizdeki optimized ayarları yukarıdaki gibidir.
Animasyon Penceresinin alt tarafındaki Play tuşuna basarak animasyonunuzu seyredebilirsiniz. Durdurmak için Stop tuşuna basınız. Yaptığımız animasyonu browser da görmek için ise Araç Çubuğundaki Browser ikonuna tıklamanız yeterli. Açılan browser penceresinde dökümanınızın çok detaylı olarak bütün özelliklerini ve HTML kodlarını görebilirsiniz.
Gerekli kontrolleri yaptıktan sonra herşey istediğimiz gibiyse File>Save Optimized veya başka bir isim ile kaydedeceksek File>Save Optimized As... ile açılan pencereden kaydetmek istediğimiz yeri seçerek kaydedebiliriz.
Şayet dökümanımızı ayrıca PSD Formatında kaydetmek istersek File>Save veya 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.
Örnek olarak yaptığımız bannerımız; [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]