Grafik Bolumu - İsmail Kırbaş İle Web Sitesi Tasarımı

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