Objelerden animasyon oluşturmanın bir uzantısı olarak FreeHand ile etkili Banner’lar hazırlamanız mümkün. Banner’daki mantık animasyonla tamamen aynı. Her kareyi ayrı ayrı katmanlar şeklinde düşünmek gerekiyor.

Banner hazırlamaya başlamadan önce FreeHand’deki sayfamızı bir Banner sayfasına çevirmemiz gerekiyor. Bunun için Library paletinin sağ üst tarafında bulunan pop-up menüye girerek Import komutunu vermemiz gerekiyor. Açılan pencere FreeHand’in English > Settings klasörünü gösterir. Bu klasör Mac OS 9’da Macromedia FreeHand klasörünün içinde, Mac OS X’te ise Library > Application Support klasöründe bulunan Macromedia klasörünün içindedir. Bu pencere içinden Symbols klasörünün içinde bulunan Master Pages dokümanını açmamız gerekiyor. Bu noktada adı Import Symbols olan yeni bir pencere karşımıza çıkacaktır. Buradaki seçenekler arasından Web Banner’ı seçip Import komutunu verdiğinizde üzerinde kılavuz çizgileri de bulunan bir Banner sayfası Document panelindeki Master sayfalar içinde yerini alacaktır. Aslında açılan sayfa (eğer kılavuz çizgileri kullanmayacaksanız) sadece 468 x 60 piksel büyüklüğünde yeni bir sayfadır. Dolayısıyla hazır Banner sayfasından kullanmak yerine kendiniz manuel olarak 468 x 60 piksel büyüklüğünde bir alan da açabilirsiniz.

Karışıklığa mahal vermemek için geri kalan işlemleri adım adım anlatalım.

1-468 x 60 piksellik alan içinde örnek olarak bir tasarım hazırlayalım. Bizim hazırladığımız tasarımda MacLine’ın yeni yıl aboneliği için hazırlanmış bir Banner bulunuyor. Burada harfler teker teker eklenerek cümleyi oluşturacak.

2-Her harfin eklendiği banner’dan bir adet çoğaltarak ilerlememiz gerekiyor. Bizim örnek çalışmamız için bu rakam 30 oldu. Toplamda 30 adet aynı Banner tasarımından çoğalttıktan sonra harfleri tek tek silerek de ilerlemeniz mümkün.

3-Bu işlemi yaptıktan ve 30 adet Banner’i seçtikten sonra hem sayfaya, hem de birbirlerine ortalı olarak hizalamamız gerekiyor. Hizalamayı Align panelini kullanarak kolayca yapabilirsiniz. Burada hangi karenin en üstte olduğunun pek bir önemi yok.

4-Kareleri hizaladıktan sonra Modify > Group komutu ile bir grup oluşturmamız gerekiyor. Bu grubu oluşturmamızın nedeni çok zahmetli olan tek tek Layer açma ve objeleri layer’lara atama işleminden kısa yoldan kurtulmak.

5-Objelerimizi tek bir grup altında topladıktan sonra Xtras > Animate > Release to Layers komutunu vermemiz gerekiyor. Bu komutu verdiğimiz

de açılan pencereden Animate seçeneği olarak Build’i seçeceğiz. Eğer işlemin sonunda animasyon tersten oynuyorsa, yani harfler birbirinin arkasına eklenerek cümleyi oluşturmak yerine bir cümle içinden teker teker çıkarılıyorsa Animate penceresinden Reverse Direction kutucuğunu işaretlememiz gerekir.

6-Banner’ımız servise hazır. Hazırladığımız çalışmayı izlemek için Window > Movie > Test komutunu vermemiz gerekiyor. Eğer oynama hızını değiştirmek isterseniz Movie menüsünün altında bulunan Settings panelinden FPS (Frame Per Second: Saniyedeki kare sayısı) değerini düşürerek veya artırarak istediğimiz hıza ulaşabiliriz.

7-Son olarak da bu banner’ı bağımsız bir Flash belgesi olarak kaydetmek için File > Export seçeneğini kullanarak SWF formatında export etmeliyiz.

FreeHand’de Web Tasarımı

Yılların eskitemediği vektörel çizim yazılımı FreeHand, bir Macromedia yazılımı olması dolayısıyla yüzünü son yıllarda tamamen Web’e döndü. Flash ve Fireworks ile etkileşimi artırıldı, içerisine SWF desteği eklendi. Animasyon, master sayfa, HTML çıkış gibi önemli Web araçları eklendi. Hal böyle olunca FreeHand vektörel çizim programı ve sayfa tasarım programı olmanın ötesine geçerek Web alanına da sıçramış oldu.

Şimdi sadece FreeHand’i kullanarak herhangi bir Web tarayıcısında veya Flash player’da görüntülenebilecek ve kullanılabilecek basit bir Web sitesi hazırlayalım.

Bu Web sitesini hazırlarken içinde fotoğraf da kullanma şansımız var. Ancak biz baştan sona kadar FreeHand’de hazırlanmış bir Web sitesi hazırlayacağız.

1-öncelikle tasarımızı oluşturarak işe başlıyoruz. Aslında her grafik üründe olduğu gibi Web sitelerinde de tasarım aşaması çok önem arzeden bir aşamadır. Ancak biz burada bu dosya konusunu tasarım öğütleri ile değil, uygulama önerileri ile dolduracağız. Bu yüzden bu adımı hızlıca geçiyoruz.

Hazırlayacağımız örnek tasarımda birkaç adet link bulunmalı. Yazının başlarında da belirttiğimiz gibi database sorgulaması yapabilen veya karmaşık yapılara sahip siteleri FreeHand gibi yazılımlar ile yapmak olanaklı değil. Aşağıdaki örnek FreeHand’de hazırlanabilecek sayfa tasarımlarına güzel bir örnek oluşturuyor.

Butonlarımızı koyup yazıları da yazdıktan sonra yazıları Text>Convert to Paths komutu ile path’lere dönüştürüyoruz. Her linkin butonu ile yazısını da gruplamayı ihmal etmeyin.

2-Bu sayfadan üzerindeki buton sayısı kadar çoğaltıyoruz. Gerekli görürseniz alt sayfalarda farklı bir sayfa düzeni veya farklı renkleri de tercih edebilirsiniz. Burada ana sayfanız olacak sayfanın en üstte bulunmasına özen gösterin.

3-Sayfalardaki butonları linkler haline getirmek için iki ayrı yol bulunuyor. Bunlardan ilki FreeHand’e MX sürümünde eklenmiş olan Action tool. Yapmamız gereken iş, Action tool ile anasayfada ‘01’ isminde görülen butonun üzerine tıklayıp parmağınızı Mouse’tan kaldırmadan alttaki sayfalardan ilkine götürüp bırakmak. Siz Action tool ile bir objenin üzerine tıklayıp sürüklediğinizde imleci hareket ettirdiğiniz yere doğru bir çizgi belirecektir. Parmağınızı Mouse’un butonundan kaldırdığınız anda iki obje arasında bir bağlantı kurmuş olursunuz. Bunu yine FreeHand’de farklı yazı alanlarını birbirine bağlayarak tek bir yazı alanı oluşturmaya benzetebiliriz.

4-Yukarıda yazdığımız şekilde Action tool’u kullanarak tek tek bütün butonlardan bütün sayfalara linkler atamalısınız. Bu biraz zahmetli bir iştir. çünkü anasayfadaki tüm butonlardan ilgili sayfalara ve alt sayfalardan hem anasayfaya hem de birbirlerine linkler vermelisiniz. Yani ortaya aşağıdaki gibi karışık bir şekil çıkacaktır.

Linkleri atarken dikkat etmeniz gereken şöyle bir nokta var; 02 numaralı sayfada bulunan 02 isimli butonu pas geçmeli ve herhangi bir link atamamalısınız. Aynı şekilde anasayfada bulunan Anasayfa isimli butondan herhangi bir obje veya sayfaya link vermemelisiniz. Bu butonu biraz soluklaştırabilir, hatta silebilirsiniz.

5-Bu FreeHand dokümanını Window > Movie > Test komutunu vererek izleyebilir, File > Export komutu ile SWF olarak kaydedebiliriz.

6-<üçüncü adımda değindiğimiz gibi, objeleri link haline getirmenin iki yolu bulunuyor. İlki Action Tool (ki yukarıda bu aracın nasıl çalıştığını okudunuz), ikincisi ise Navigation paneli. Window > Navigation seçeneği ile açacağınız Navigation panelini de objeleri link olarak atamak için rahatlıkla kullanabilirsiniz. Bunun için herhangi bir objeyi seçtikten sonra Navigation paneli üzerindeki ‘Link’ menüsünden istediğiniz sayfayı seçmelisiniz.

Burada da link olarak kullanılacak her obje için teker teker sayfaları belirlemeniz gerekiyor.

Navigation panelini kullanarak Action Tool’un yaptığı gibi linkler atayabileceğiniz gibi linkinizin bağlandığı sayfada bir animasyon varsa onu da oynatabilmeniz mümkün.

7-Linklerinizi ister Action tool ile, isterseniz de Navigation Panelini kullanarak verin, hazırladığınız sayfayı File > Export komutunu kullanarak SWF olarak kaydedebileceğiniz gibi File menüsünün altında bulunan

Publish as HTML komutu ile SWF yerine HTML bazlı olarak da kaydedebilirsiniz.

Photoshop’ta Web’e Yönelik Araçlar

Photoshop programı 5.5 sürümünden itibaren Web araçlarını içeriyor. özellikle ImageReady, Save for Web ve Slice aracı Photoshop’un en önemli Web araçları arasında sayılabilir. Photoshop’un Web araçlarını ikiye ayırmak mümkün. İlk gruba Web tasarım ile profesyonel olarak uğraşan kullanıcıların yararlanacağı araçlar olan Save for Web, Slice tool, ImageReady girerken, ikinci gruba daha amatör kullanıcılara hitap eden HTML çıkış, Web Photo gallery gibi araçlar dahil olabilir. Şimdi kısaca bu araçların neler yapabildiklerine bakalım.

Save for Web: Photoshop’ta hazırlanan görüntülerin Web sayfalarında hızlı bir şekilde görüntülenebilmesi için Save for Web komutu ile kaydedilmesi gerekir. Bir fotoğrafı Web üzerinde yayınlamak istediğinizde File menüsünden Save for Web’i açın. En üstte bulunan 4 UP sekmesine tıklayın. Sağ taraftaki seçenekler arasından kaydedeceğiniz formatı seçin (JPEG, GIF, PNG vs.) ve OK’e tıklayın. Bu kadar basit ayarlar ile birlikte bile önemli bir boyut kazancı elde edeceksiniz. Save for Web’in en önemli özelliği dosya boyutunu küçültürken kaliteyi mümkün olabilen en kaliteli şekilde tutmaktır.

Slice Tool: Photoshop’ta işlediğiniz görüntüleri Web’de kolay yüklenebilmesi için parçalara ayırmaya yarar. Slice aracını kullanarak fotoğrafınızı istediğiniz kadar parçaya ayırabilir ve daha sonra Save for Web paleti yardımıyla parçalar halinda kaydedebiliriz. Eğer gerekli görürseniz Slice Tool’un hemen altında bulunan Slice Select Tool’u kullanarak dilimleri büyütebilir, küçültebilir veya yerlerini değiştirebilirsiniz.

Slice aracı ile ayrılmış parçaları farklı dokümanlar olarak kaydetmek için:

1. Slice Tool ile fotoğrafınızı dilimlere ayırın. Fotoğrafın büyüklüğüne göre dilimleri istediğiniz gibi büyük ya da küçük olarak parçalara ayırabilirsiniz.

2. File menüsünden Save for Web’i açın. Sağ tarafta bulunan Output Settings butonuna tıklayarak kayıt ayarlarınızı yapmalısınız.

3. Açılan pencerede HTML yazan pop-up menüden Slices’i seçin. Buradan dokümanınızda kullanacağınız tüm dilimleri ayrı ayrı dosyalar olarak kaydederken nasıl isimlendirileceklerini seçebilirsiniz. Bu işlemi yaptıktan sonra OK butonuna tıklayarak tekrar Save for Web penceresine dönebilirsiniz. Tekrar OK butonuna basarsanız dilimleriniz belirttiğiniz klasöre ayrı ayrı dokümanlar olarak kaydedilecektir. Burada Save penceresinde Biçim olarak Images Only seçeneğini seçmeyi unutmayın.

Bir Slice’ı buton yapmak için:

önceki adımda anlatıldığı gibi Slice’larınızı oluşturup Save for Web komutunu verdikten sonra Slice’larınızı buton haline getirebilir, linkler atayabilirsiniz. Bunun için çizilmiş slice’lardan herhangi birini Save for Web penceresinde bulunan Slice seçim aracı ile seçin. ‹zerine çift tıkladığınızda açılan pencereden atadığımız linke bağlı sayfanın içeriğine yönelik ayarlarımızı yapabiliyoruz. Durum çubuğunda yazacak mesajdan, açılacak sayfanın ayrı bir sayfada açılmasına kadar birçok ayar burada karşımıza çıkıyor. OK butonuna bastıktan sonra Save for Web penceresini de onaylayıp sayfamızı HTML olarak kaydedersek linkleri ile çalışan bir Web sayfasına sahip oluruz.