Photoshop Magazin
 


Adobe Image Ready CS2

01 October 2005 | Sayı: Oct 2005
 
1 2 3 4 5
 

hspace=0

undan oniki yıl önce, Şubat 1990’da Adobe firması, Photoshop 1.0’ı piyasaya sürmüştü. Dönüp şöyle geriye baktığımızda dün gibi geliyor. Ancak Photoshop’un günümüzde geldiği noktaya bakınca geçen zamanın hayatımızda ne gibi farklar yarattığını, ne çok yenilikler katmış olduğunu görebiliyoruz.
Birçok meslek grubuna hitap eden (Fotoğraf, Grafik tasarım, İllustrasyon, TV, Web tasarımı vs...) profesyonel ve ev kullanıcılarının vazgeçilmez  pixel tabanlı çalışan bir program olmuştur. Adobe firması profesyonel ve ev kullanıcıları için, hem Photoshop arayüzünü kullanan ve bunun yanında web sitesinde ihtiyacının olacak birçok şeyi yapabileceğiniz ADOBE IMAGE READY CS 2 programını sürdü.
Bir web sitesi yapmak istiyorsanız, sitenin içeriğini belirledikten sonra size gerekecek olan kullanıcıların izleyeceği web sayfalarınızı hazırlayacağınız bir programdır. İşte Image Ready programı tam size göre. Sitenizin arayüzünü tasarlayabilir, butonlar yapabilir, istediğiniz ölçülerde bannerlar hazırlayabilir ve daha birçok etkiyi ve efekti bir arada kullanarak farklı tasarımlar gerçekleştirebilirsiniz.



IMAGE READY BANNER




hspace=0






Web sayfalarında sık sık gördüğümüz animasyonlu reklam bannerlarını Image Ready ile nasıl yapıldıklarını göreceğiz. Bundan böyle kendi bannerları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 Image Ready’nin 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 (doküman) açalım. File>New (Ctrl+N). 

>> Yanda resmi görünen “New Document” penceresinde Name kısmına dokü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 dokü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 oka 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.



hspace=0


>>
Dokü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.
>> 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.
>> 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 image ready yazan Layer’a sağ tık yaparak açılan menüden Duplicate Layer ile image ready copy Layerını yaratalım ve alttaki image ready Layerının yanındaki göz ikonuna tıklayarak image ready Layer’ını kapatalım.
>> Tekrar 1.Frame’i işaretleyip bu defa image ready copy Layerının yanındaki göz ikonuna tıklayarak image ready copy layerını kapatalım. Bunun anlamı, “1.Framede iken image ready copy Layer’ını görme, 2.Frame de iken image ready Layerını görme” dir. Daha sonra image ready copy Layerınde iken Edit>Free Transform ile  “ image ready “ 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 image ready copy yazan Layer’a sağ tık yaparak açılan menüden Duplicate Layer ile image ready copy 2 Layerını yaratalım ve Layers penceresinde alttaki image ready copy Layerının yanındaki göz ikonuna tıklayarak image ready copy Layer’ını kapatalım.
>> Animasyon penceresindeki Frameleri kontrol edelim. 1.Framede iken image ready Layerının, 2.Frame de iken image ready copy Layerının, 3.Frame de ikense image ready copy 2 Layerının açık olmasına dikkat edelim. Bunun anlamı, “1.Frame de iken image ready copy Layerını ve image ready copy 2 Layerını görme, 2.Frame de iken image ready Layerını  ve image ready copy 2 Layerını görme, 3.Frame de iken image ready Layerını  ve image ready copy Layerını görme’dir.

 

 

hspace=0>> Image ready copy 2 Layerınde iken Edit>Free Transform ile  dokümanımızdaki “ image ready “ 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
(Ya da Animasyon penceresinin sağ  üst köşesinde bulunan ikonuna basarak açılan menüden select All Frames’i 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 Layerıne tıklayalım 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, dokü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çili alanın üzerine tıklayarak layerı komple siyaha boyadık. 
>> 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 dokümanın kenarlarına göre klavyenizdeki aşağı-yukarı oklarla taşıyıp ayarlayabilirsiniz. Böylece Bannerımızı bitirmiş olduk.

IMAGE READY OPTIMIZE

>> Şimdi dokümanımızı optimize ederek kaydedelim. Açık değilse Optimize Penceresini açalım (Window>Show Optimize).
>> Doküman penceremizde üst tarafına dikkat ederseniz, Original, Optimize, 2-Up, 4-Up  sekmelerini görürsünüz. Original sekmesi dokümanın PSD formatındaki orijinal 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 dokü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 dokü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.
>> Animasyon penceresinin alt tarafındaki Play tuşuna basarak animasyonunuzu seyredebilirsiniz. Durdurmak için Stop tuşuna basınız.
>> Yaptığımız animasyonu browserda görmek için ise Araç Çubuğundaki Browser ikonuna tıklamanız yeterli. Açılan browser penceresinde dokümanınızın çok detaylı olarak bütün özelliklerini ve HTML kodlarını görebilirsiniz.
>> Gerekli kontrolleri yaptıktan sonra 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. Dokü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. Sonra tekrar çalışabilmek için bu PSD uzantılı dosyayı kaydetmeyi unutmayın.
hspace=0

 

October 2005

 


Image Ready