Melih Sancar

Bir grafik tasarımcı olarak Web tasarımına nasıl bakıyorsunuz? Web’e nasıl bakarsanız bakın ama önyargılı bakmayın. Çünkü her gün ustalıkla kullandığınız Photoshop, FreeHand, QuarkXPress gibi yazılımları kullanarak siz de basit bir broşür tasarımı hazırlar gibi Web’e yönelik animasyonlar, Banner’lar hatta siteler oluşturabilirsiniz.

Bugüne kadar yaşamını grafik tasarım ile uğraşarak sürdürmüş ve Photoshop-FreeHand-QuarkXPress üçlüsünün dışında bir yazılıma ihtiyaç duymamış kullanıcıların birçoğu için Web kapalı bir kutu. Bir kere el verilirse, kolun kaptırılabileceği bir alan olarak görülür… ASP’ler, PHP’ler, script’ler kodlar, table’lar, CSS’ler insanın gözünü korkutmaya yeter de artar bile.

Peki bu işin hiç kolayı yok mu? Web üzerinde insanların görebileceği siteler yapmak illa ki karmaşık bir şekilde mi olmak zorunda. Hergün kullandığımız yazılımlar ile Web tasarımı veya ilintili alanlarda işler ortaya koymak gerçekten mümkün değil mi?

Programlar sürüm atladıkça birbirlerinin alanlarına daha çok girmeye başladılar. çok değil, bundan 5 sene önce Photoshop sadece görüntü işleme aracı, FreeHand ise vektörel çizim aracıydı. Bugün geldikleri noktada Photoshop ve FreeHand’in kendi uzmanlık alanlarının ötesinde birçok farklı işe bulaştığını görüyoruz. Elbette bu durum sadece Photoshop ve FreeHand’i kapsamıyor. QuarkXPress, Microsoft Word veya iView MediaPro… Gerek profesyonel uğraşımız için kullandığımız yazılımlar olsun, gerekse gündelik işlerimizi yürütmek için kullandığımız yazılımlar olsun birçok programa baktığımızda hiçbirinin yerinde durmadığını, kendi uzmanlık alanlarının dışında diğer alanlara sıçrama yaptıklarını görüyoruz.

Genelde sıçrama yapılan alan da son yılların popüler medyası Web oluyor. Photoshop’ta işlenen bir görüntünün Web’de yayınlanmak üzere uygun format ve ölçülerde kaydedilmesi bir zorunluluk olarak yazılımın özellikleri arasına giriverdi. FreeHand 10. ve 11. sürümlerde özellikle Macromedia’nın bir yazılımı olmasının getirisi olarak Flash’tan birçok özelliği aldı.

Bugün bulunduğumuz noktada Web için herhangi bir tasarım yapmak için Dreamweaver, Flash ya da Golive bilgisi %100 gerekmiyor. Elbette FreeHand’i kullanarak hazırlayacağınız bir site ile Golive’ı kullanarak hazırlayacağınız bir site arasında dağlar kadar fark olacaktır. Ama kırk yılda bir işi Web tasarımına düşen bir tasarımcının işini görebilecek türde araçlar Photoshop, FreeHand ve QuarkXPress’in içinde bulunuyor. Bunları kullanarak da kolay yoldan Web tasarımı yapılabilir.

Bu noktada baştan şu uyarıyı yapmamız gerekiyor. Aslında Web, profesyonel bir uğraş ve kendine ait sorunları, araçları, çözümleri bulunuyor. Burada anlatacağımız özellikler bugüne kadar Web tasarımına hiç bulaşmamış bir kullanıcıyı Webmaster yapmaya yetecek bilgi donanımını sunmuyor. Sadece, Web üzerinde gereksinim duyulan basit çalışmaların grafik programları ile de yapılabileceğini işaret ediyor.

Peki Ama Nasıl?

çok kolay. Hatta bir broşür ya da katalog tasarımından çok daha kolay. Sadece birkaç aracın nasıl çalıştığını bilmeniz yeterli. Bugüne kadar ihtiyacınız olmadığı için pek sıklıkla uğramadığınız paletleri açmaya başlamalısınız. örneğin FreeHand’de çok sıklıkla kullanılmayan Layer’lar paleti FreeHand’de animasyon yapmak için anahtar rol üstlenir. Şimdi FreeHand’den başlayarak Internet üzerinden yayınlayabileceğiniz siteler, animasyonlar yapmaya başlayalım.

FreeHand’de Animasyon

FreeHand 10. sürümden bu yana animasyon yapma özelliğine sahip. Biz burada FreeHand’in MX sürümünü kullanıyoruz ama burada anlattığımız özelliklerin birçoğu (aksi belirtilmedikçe) FreeHand 10’da da yapılabilir.

FreeHand’de animasyon hazırlamanın temel mantığı katmanları kullanmaktır. ‹st üste duran üç adet katmanı kullanarak animasyon yaptığınızda bu katmanlar art arda kapanıp açılarak kare kare bir görüntü elde etmemizi sağlarlar. çok küçük bir denemeyi şu şekilde yapabiliriz. Birbirlerinden farklı yerlerde duran üç adet elips oluşturup bunlara ayrı ayrı renkler verelim. Ardından Layers paletininin sağında bulunan pop-up menüden New Layer seçeneğini seçerek üç adet yeni katman açalım. ‹ç elipsi, üç ayrı katmana atayıp Window > Movie > Test komutunu verdiğimizde elipslerin arka arkaya hareket ettiklerini görebilirsiniz.

Şimdi biraz daha detaylı olarak bir animasyon hazırlayalım. Hazırlayacağımız animasyonda biz bir elips şeklinin ‘MacLine’ kelimesine dönüşümünü kullanacağız.

1-öncelikle bir elips şekli çiziyoruz ve Type aracı ile ‘MacLine’ yazıyoruz. Elbette siz istediğiniz yazıyı ve istediğiniz şekli kullanmakta serbestsiniz. Yazıyı yazdıktan sonra, Text > Convert to Paths komutu ile path’e dönüştürmek gerekiyor. Burada dikkat edilmesi gereken nokta yazının ve elips şeklinin çizgi ve alan bilgilerinin denk olması. Yani elipste çizgi varsa yazıda da olmalı ya da yazıda alan dolgusu varsa elipsin dolgusu ‘None’ olmamalı. Renkler birbirinden değişkenlik gösterse de geçişin iki adımı olacak olan objelerin alan ve çizgi dolgu seçenekleri tamamen aynı olmalı.

2-Yazıya Blend komutunu uygulayabilmek için yazıyı oluşturan harflerin tek bir obje oluşturacak şekilde birleştirilmesi gerekir. Bu işlemi Join komutu ile yapmamız gerekiyor. Yazıyı birinci adımda yazdığımız gibi path’e çevirdikten sonra grubunu bozmamız gerekiyor. Bu işlemi Modify > Ungroup komutu ile yapabiliriz. Yazıya ungroup komutunu uyguladıktan sonra harflerin ayrı ayrı seçilebilir hale gelmiş olması gerekir. Bu işlemin ardından harflerin tamamını seçtikten sonra Modify > Join komutunu vermeliyiz.

3-Join komutu, harflerin ayrı ayrı olan alanlarını birleştirerek bir tek alan haline dönüştürür. Bu şekilde elips ve yazı üzerinde blend komutu ile geçiş uygulama işlemini gerçekleştirdiğimizde sadece iki adet obje arasında geçiş uygulamış oluruz.

Elips ve yazıya istediğimiz renkleri verdikten ve konumlarını da istediğimiz şekilde ayarladıktan sonra Xtras > Create > Blend ile aralarında bir geçiş oluşturalım. Blend komutu ile iki obje arasına eklenen yeni objelerin sayısını Properties panelinde bulunan Object penceresindeki Steps değerini yükselterek artırabilirsiniz.

4-Objelerimiz arasındaki geçişi oluşturduktan sonra animasyon için burada bulunan tüm objeleri farklı katmanlara atamamız gerekiyor. Blend’in ‘Steps’ değerine girdiğiniz değer söz gelimi 50 ise, toplamda 50 adet katman açmanız gerekecek. Bu 50 katmanı açmak ve her objeyi ayrı ayrı katmanlara atamak oldukça zahmetli bir iş. Ancak bu zahmetli süreci yaşamamanız için geliştirilmiş yararlı bir araç FreeHand’in derin sularında keşfedilmeyi bekliyor.

Blend komutu ile geçişinizi oluşturduktan sonra Xtras > Animate > Release to Layers komutunu verin. Bu komut blend’i oluşturan objelerin herbirini ayrı katmanlara otomatik olarak ayıracaktır. Burada yaptığımız örneğin dışında eğer Blend komutunu kullanmıyorsanız ve fazla sayıda objeden oluşan bir obje grubunuz varsa aynı komutu bu obje grubu için de kullanabilirsiniz. Release to Layers komutunu verdiğinizde karşınıza açılan pencerede bulunan Animate pop-up menüsü animasyonumuzun nasıl bir yapıda olacağını belirleyecek temel unsurdur. Animate menüsünde bulunan dört seçenekten ilki olan Sequence, kareleri teker teker oynatır. İkinci seçenek olan Build ile her açılan kare açık kalır, bir sonraki kare açık olan karenin üzerine açılır. Bu seçeneği bir sonraki bölümümüz olan FreeHand’de Banner yapma bölümünde özellikle bu seçeneği kullanacağız. Release to Layers penceresindeki üçüncü seçenek olan Drop’ta her karede tüm objeler görünür. Sadece her karede bir adet obje çıkarılır. Drop, stadyumlarda taraftarların yaptığı ‘Meksika Dalgası’na benzetilebilir. Son seçenek olan trail’de ise Trail by seçeneğine girilen değer kadar obje her karede görünür.

Bu seçeneklerin nasıl çalıştığını anlamak için fazla karmaşık olmayan bir animasyon hazırlayarak hepsini tek tek deneyebilirsiniz.

5-Uygun animasyon seçeneğini seçtikten sonra geriye sadece Window > Movie > Test komutunu verip arkaya yaslanmak kalıyor.

Eğer gerekli görürseniz var olan katmanlarınıza yeni objeler ekleyebilirsiniz. FreeHand, bir katmanda birden fazla obje kullanımına izin verir. Bu nedenle rahat rahat animasyonunuzu ek öğeler ile zenginleştirebilirsiniz. Animasyonu tamamladığınızda SWF formatında export ederek ayrı bir belge olarak saklayabilirsiniz.