Grafik Bolumu Resim ve animasyon gibi çoklu ortam ögeleri, basllangiçta yalnizca bilimsel amaçlar için kullanilan interneti, basin-yayin ortamina dönüstürdü. Günümüzde, kalitesi yüksek resim dosyalarini, düsük yükleme süreleriyle birlestirebilen veri sanatçilari revaçta. Bu yazida profesyonel web tasarimi için alti ipucu ve yardimci araçlari bulacaksiniz. Web sayfasi tasariminda, genellikle çok sayida noktanin bir araya getirilmesiyle olusturulan bitmap grafiklerin kullanimi gündeme gelir. Bu türden resimler, mercek altina alindiginda noktalari (ing. Pixel) kolaylikla ayirt edilebildiginden, her biri üzerinde ayri ayri çalismak mümkündür. Bitmap çözünürlügü, dpi (dots per inch) birimiyle ifade edilir. Bilgisayar ekranlarinin çogunda 72 dpi fiziksel çözünürlük üst siniri asilamadigindan, bu deger web grafiklerinin boyutlandirma normu olarak görülmektedir. Diger resim türü, noktalar yerine renk alanlarindan olusan vektör grafikleridir. Ölçekleri, uzatilarak ya da bastirilarak degistirilebilir. Vektör grafikleri, web kullaniminin inanilmaz boyutlara varmasindan önce var olduysa da, Shockwave teknolojisinin (Flash) devreye girmesiyle birlikte sayginlik kazanmistir. Bu tür, yine de diger web kullanimlari için uygunluk göstermez. Resim dosyalari farkli dosya biçimlerinde bulunabilir. BMP (Windows Bitmap) veya TIF (Tagged Image File Format) en sik karsilasilan grafik uzantilaridir. Tasarimcilar, web için GIF (Grafics Interchange Format) ve JPG veya JPEG’i ( Joint Photographic Experts Group) daha sik tercih ederler. Web grafikleri konusunda diger bir alternatif, giderek daha genis kullanim alani bulan PNG (Portable Network Graphics) dosya biçimidir. Bu format, GIF ve JPG dosyalarinin düsük renk derinligine sahip resimler için GIF biçimi GIF dosya biçimi, programcilar tarafindan özellikle World Wide Web kullanimi için gelistirilmistir. GIF, web tasarimcilarinin en fazla 256 renk kullanabilmesine izin verdiginden, düsük çözünürlükteki resimler için idealdir ve bu yüzden özellikle dügme, logo ve reklam bantlari gibi yönlendirme ögelerinin sekillendirilmesi sirasinda faydalanilir. GIF biçimindeki resimleri, renk sayisini azaltma yoluna giderek, küçültmek ve yüklenme süresini iyilestirmek mümkün. Sinirlandirilmis renk derinligi nedeniyle web’de fotograf yayini için elverissiz formatin web tasarimcilarinin gözündeki en cazip yani saydamlik, interlacing ve animasyon imkani. Saydamlik: GIF biçimi, herhangi bir rengin, genellikle de seçilen arka planin saydam olarak tanimlanabilmesini saglayabilir. Saydam alanlar, web browser üzerinde o anki web sayfasinin arka planini görülebilir kilar. Bu yolla, istediginiz her internet sayfasina rahatlikla ekleyebileceginiz dügme ve logolar olusturabilirsiniz. Interlacing: Resim dosyalariInterlacing: Resim dosyalari browser’da yüklenmeleri esnasinda satir satir olusturulur. Söz konusu resim dosyasi ne kadar büyükse, izleyicisi, resmi tümüyle anlayabilmek için o kadar uzun süre beklemek durumundadir. Interlacing özelliginin etkinlestirilmesi sayesinde, bir GIF resminin browser tarafindan öncelikle net olmayan hatlarla görüntülenmesini saglanir ve böylelikle sorun ortadan kalkar. Resmin netligi, dosya yüklenirken artmaya devam eder. Bu sekilde izleyici resmin içerigi hakkinda çok önceden bilgi sahibi olur ve fazla vakit kaybetmek durumunda kalmaz. Animasyon: GIF dosya biçimindeki resimler, animasyon olusturmada kullanilabilir. Bu amaçla, gerekli sayida resim hazirlanarak uygun bir araçla tek bir GIF dosyasinda bir araya getirilir. Hareketlendirilmis GIF dosyalarinin gösterimi sirasinda, resimler önceden belirlenen bir hizla birbiri ardina degistirilerek gösterilir ve resmi gören için animasyon etkisi olusturulur. 1/4 16.7 milyon renk: JPG türünde resimler JPG formatindaki resimler 16.7 milyon renk derinligini destekler. Bu nedenle bu dosya biçimi fotograflarin ve de 256 rengin üzerindeki diger resimlerin gösterimi için mükemmel bir uygum sergiler. JPG biçimindeki bir resim dosyasi, sikistirma yoluyla küçültülebilir ve bu yolla web sayfasinin yüklenme süresi iyilestirilebilir. PNG: Yüksek renk derinligine sahip resimler için Web kullanimi için uygun bir diger grafik formati ise PNG’dir. Bitmap resimlerin internette transferi için özel olarak gelistirilmistir. PNG formati, saydam alanlar da içeren yüksek renk derinligine sahip resimler için uygun görülüyor. Resim dosyasinin sikistirilmasi kalite kaybi yasanmadan gerçeklestirilebiliyor ve resimler bu yolla netlik kaybina ugrami-yor. Ancak sadece dördüncü nesil browser’lar PNG biçimindeki resimleri dogru olarak isleyip görüntüleyebiliyor. Bu yüzden en azindan simdilik bu formati web’de kullanirken dikkatli olmalisiniz.Web grafiklerinin renk paletini ve resim kalitesini belirlemek Internette kullaniminiza sunulan resim dosyalarinin kalitesi, farkli etkenlere bagli olarak degisir. Görüntülenen renkler, kullanilan grafik biçiminin disinda, isletim sistemi ve web-browser ayarlarindan oldugu kadar, monitör ve ekran kartinin degerlerinden de etkilenir. Tüm bu etkenler, resim dosyasinin gösterimini hissedilir ölçülerde degistirme gücüne sahiptir. Web grafiginde kullanilan renk paleti, en önemli faktörlerden biri olarak görülür. Kullanicilarin herhangi bir resim dosyasini çagirmalari halinde, browser resmin gösterimi için kendi dahili renk paletine basvurur. Internet Explorer prensipte renkleri Netscape Navigator’dan farkli bir biçimde bir araya getirir. Yani Internet Explorer, Windows renklerinin paletine basvururken, Netscape Navigator kendi dahili renk tablosundaki renk kombinasyonlarindan yardim alir. Browser, kendi dahili renk paletinde yer almayan bir rengi yorumlamak durumunda kaldiginda, benzer bir renk seçer ve iki farkli renk tonunu birbirine karistirarak yeni ve benzer bir renk elde eder. Renklerin karistirilmasi Dithering olarak da adlandirilir ve gerçekte istenmeyen bir etkidir. Kuskusuz web tasarimcisinin resim sekillendirme sirasinda kontrolü kaybetmemesini saglayan bir çözüm bulunuyor... Bu durumda kesin olarak tanimlanabilecek 216 renkten olusan ve kayitlarinin her güncel web browser tarafindan esit bir sekilde yorumlanacagi bir renk paleti kullanilir. Grafik sekillendirme sirasinda bu paleti tercih etmeniz durumunda, sayfanizin görüntülenme garantisi saglanir. Web sayfaniz için ücretsiz resim ve grafikler Baska hiçbir öge, bir web sayfasinin tasarimina uygun yerlestirilmis sik bir grafik ya da resim kadar güzel etki birakamaz. Grafiksel eklentilerden mahrum birakilmis metin alanlari, pek çok sörfçü tarafindan hos karsilanmayacaktir. Ancak uygun resim veya grafik materyalinin nereden temin edilebilecegi sorusu, hiçbir tasarimci için gündemden düsmez. Kendi sitesini tasarlayan amatör kullanicilar veya webmaster’lar, gerekli ögeleri kendi basina olusturabilecek kadar yetenekli bir tasarimci olmayabilirler. Firmalar bu is için genellikle grafiker, fotografçi ve resim editörlerini görevlendirirken, ayni yöntem özel kisisel web sayfalari için yüksek maliyet nedeniyle alternatif olmaktan çikar. Birazdan resim ve grafik temin edebileceginiz adreslerin listesine ulasacaksiniz. Söz konusu kaynaklarin sundugu içerigin tamamina yakinini kisisel web sayfanizin sekillendirmesi amaciyla ücret ödemeden kullanabilirsiniz. Dijital kamera veya tarayici resimlerini çogu kez hemen web sayfaniza yerlestiremezsiniz. Bu materyal, öncelikle bir grafik islem programi vasitasiyla uygun formata dönüstürülmelidir. Tarayici sayesinde, resim, grafik ya da diger sablonlar basili kagit üzerinden PC’ye aktarilabilir ve bilgisayarda yeniden biçimlendirilir. Bu isi görecek nitelikte bir tarayicinin maliyeti markasina ve özelliklerine göre 50 dolar ile 200 dolar arasinda degisir. Giderek daha da ucuzlayan dijital kameralar vasitasiyla görüntü karelerini sadece yakalamakla kalmaz, onlari ayni zamanda dogrudan fotograf makinesinden PC’ye aktarabilirsiniz. Üstelik genellikle dosya biçimini bile degistirmeniz gerekmez. Bu tarz dijital kameralarla web sayfaniz için resimler olusturabilirsiniz. Kameralarin fiyatlari 200 ile 300 dolar civarinda degisiyor. Resim negatifi ve dialari, fotografçilarda yüksek kalitede CD’ye yazdirabilir ve ardindan bilgisayara aktarabilirsiniz. Kitapçilarda, alisveris merkezlerinde, PC magazalarinda ve online shop’larda çok sayida fotograf, grafik ve simge içeren, 2/4 çogu kez Clip-Art Collection adiyla anilan uygun fiyatli CD-ROM’lar bulmak mümkün. Buradaki resimleri kendi web sayfalariniz için dilediginiz gibi kullanabilirsiniz. Pek çok uygulama Clipart koleksiyonuyla birlikte gelir. Program CD’lerine veya sabitdiskinizdeki program klasörlerine bakarak, ClipArt, Images, Bitmaps veya benzer isimli klasörlerin izini sürün. Microsoft Office paketiyle çalisiyorsaniz ve orijinal CD-ROM elinizin altindaysa ClipArts klasörüne bakmaniz yeterli olacaktir. Her türden resim ve grafik için bir diger kaynak da elbette web’in kendisidir. Uygun resim materyalini bulmayi saglayacak aramadan daha yakin pek az imkana sahibiz. Istediginiz resmi internetten kendi kisisel bilgisayariniza indirmek için sag fare tusuna tiklamak ve “Resmi farkli kaydet” komutunu seçmek yeterli. Pek çok arama motoru clipartlar için özel bölüm veya arsivlere sahip, digerleriyse ClipArt veya GIF aramalariyla isabetli sonuçlar elde edilmesini sagliyorlar. www.clip-art.com www.freegraphics.com www.clipartconnection.com www.clipartcastle.com Resim isleme için araç ve uygulamalar Resim ve grafiklerin web kullanimina hazir hale gelmesi için, degistirilmesi ve üzerinde çalisilmasi gerek. Bu nedenle grafik ve resim islemede kullanabileceginiz, çesitli hizmetler sunan bazi yazilimlari tanitiyoruz. Bu programlar web editörleriyle birlikte web tasarimcilari için en önemli araçlar arasinda yer aliyor. Paintshop Pro 7.0: Paintshop Pro, grafik ve resimleri küçük sanat eserlerine dönüstürebilmek için gereken tüm araçlari sunuyor. Özellikle web grafikleri konusunda fark edilir sonuçlara çok hizli sekilde erisilebiliyor. Dahili animation shop-araçlari sayesinde kisa sürede istenen GIF, banner veya metin animasyonlarini elde edebilirsiniz. Fiyat-performans degerinin uygunlugu, programi düsük bütçeli web tasarimcilar için son derece elverisli kiliyor. Bilgi için: www.jasc.com Phootshop 8 CS: Photoshop yaziliminin, profesyonel çizgisi övgüye deger. Program web grafiklerinin degistirilmesinde kullanilabilecek çok yönlü araçlar sunuyor. Photoshop hem vektör hem de bitmap grafikler konusunda hiçbir ihtiyaci karsiliksiz birakmiyor. Ama bu kez performansin bedeli bir hayli yüksek. Bilgi için: www.adobe.com Fireworks MX: Fireworks, tasarim ve gelistirme arasindaki boslugu örnek sekilde doldurmayi basariyor. Yazilim, çok yönlü bitmap ve vektör araçlari sayesinde, web grafiklerinin olusturulmasini, islenmesini ve hareketlendirilmesini sagliyor. Resimlerinizi iyilestirebilir ve istenen HTML editörüne aktarabilirsiniz. Fireworks profesyonel istekleri hedef alan ama daha az tecrübe sahibi kullanicilari da kolaylikla net sonuçlara götürebilen performans özellikleri sergiliyor. Bilgi için: www.macromedia.com Corel Draw 11: Corel Draw 11 Graphics, Suite Corel’in simdiye kadarki en yüksek performansi saglayan paketi. Sayfa tasarimi, illüstrasyon, resim isleme ve vektör animasyonlari için çesitli araçlara sahip. Bitmap grafiklerin olusturulmasi ve islenmesi için PhotoPaint yazilimiyla birlikte geliyor. Web tasarimcilar bu programla hem profesyonel kullanim hem de ev kullanimi için gereken araçlarla donatilmis olacaklardir. 3/4 Kaynak Site: Ismail KIRBAS ile Web Sitesi Tasarimi http://www.kirbas.com Belge Adresi: www.kirbas.com/index.php?id=342 4/4