Photoshop Magazin
 


Web İçin Başarılı Grafik Optimizasyonu ve Kullanışlı Uygulamalar

01 March 2007 | Sayı: Mar 2007
 
1 2 3 4 5
 


Web İçin Başarılı Grafik Optimizasyonu ve Kullanışlı Uygulamalar


Web'in yoğun bir şekilde hayatımıza girdiği son 10 yıllık dönem, pek çok tasarımcı için yeni bir kariyer - kendini ifade etme alanı oldu. Bu süreç içinde gerek ülkemizde gerek yurtdışında Web için çok renk kullanılmalı mı?dan tutun da GIF uzantısı GİF'mi yok¬sa CİF'mi diye okunura dek pek çok şey tartışıldı; kurallar yazıldı, benimsendi, sonra değiştirildi ve bu süreç yavaş yavaş kendi iç dinamiklerini oturtmaya başladı. Bugün üzerinde tartışılmayan temel niteliğinde kurallar da var hala yeni gelişmeler ışığında şekillenen yeni yaklaşımlar ve kurallarda...

hspace=0




Şimdi Photoshop'da başarılı web imaj optimizasyonu ve kullanışlı uygulamaları hazırlama yollarına bir göz atalım.




Hız ve Uyumluluk




Web ortamında yıllar içinde yaşanan gelişmeler iki temel sorunu ortadan kaldırdı;
1 - Boyut ve ölçülerin yönetilebilme sorunu,
2 - Birbirinden farklı browser, plug-in mimarileri ve operasyon sistemlerinden kaynaklanan sınırlamalar.




 Aslında öncelikli soru hala şu; dial-up'ın yerini alan geniş band bağlantı altyapısı, artan download hızlarıyla birlikte günümüzde ölçü yani size ve hız konusu hala öncelikli mi ? Bunun cevabı da muhtemelen şu; Hala bir siteye bağlanırken açılma hızını ya da bir dosya download ederken indirme hızını düşünmediğimiz oluyor mu? Yani ne yazık ki hayır... Aslında çoğumuz hala bol atraksiyonlu, yoğun grafik içerikli siteleri seviyoruz. Gelişen hız ve altyapı bize daha rahat ve keyfi hareket etme özgürlüğü sunuyor. Ancak sorun şu ki hala çoğu insan bizimle aynı durumda değil.
Bu da aslında genel olarak hala broadband kullansak da dial-up günlerinin devam ettiği anlamına geliyor. Kısacası hala çoğu insan spor araba kullan(a)mıyor. Yani hala minimum müşterek paydaları düşünerek tasarımlar üretmek ama izleyicilerimizi memnun etmeye çalışmaya da devam etmek zorundayız.



 

İyi haber şu; günümüzde uyumluluk açısından bayağı mesa¬fe kat edilmiş durumda. Yani artık hardware ve softwarelar birbiriyle çok daha fazla uyumlu. Mac ve PC'ler çok daha hızlı ve gelişmiş altyapılara sahip. Browserlar çok daha uyumlu. Plug-in'ler (örneğin Flash) hemen her yerde ve ko¬lay temin edilebilir durumda. Yani artık Browser Safe Web Colors gibi seçenekler tarih oldu. Bugün hemen her yerde 24-bit monitör var hemen herkes milyonlarca rengi rahatça ve ucuza görebiliyor.

hspace=0


Değişen Beklentiler

Bir diğer önemli gelişme de şu; ilk zamanlar web yeniydi ve tasarımcılar da bol flashlı görsel atraksiyonlu, efektli tasarımlara bayılıyordu. Ziyaretçilerde ekranlarında bazen dakikalarca bir şeylerin yüklenmesini beklemeyi sorun etmiyordu çünkü bu sabrın sonunda ödül olarak yeni bir deneyim yaşayacaklarını biliyorlardı. Bu deneyim bazen sadece yüzlerinde hafif bir tebessüm uyandıran bir izlence, bazen de sahip olmak istedikleri bir gösteri ve tanıtım aracı demekti. Sonuç da herkes bu teknolojinin nereye doğru gitti¬ğini görmek istiyor ve gelişmeleri yakından takip ediyordu. Web, bu yönüyle belki de dünyanın her yerinden bu kadar büyük ve çeşitli insan kitlesinin aynı anda ve yakından takip ettiği en büyük teknolojik gelişmeydi. Bu arada web olgun¬laşırken insanların sabrı da azaldı. Artık çoğu kimse sayfalar açılırken aynı sabrı göstermiyor. Skip Intro ya da Introyu Geç mantalitesi de işle böyle ortaya çıktı. Artık webe daha pragmatik, amaca yönelik bir araç gözüyle bakıyoruz çünkü; uçak, otobüs ya da sinema biletimizi mümkün olduğunca hızlı ve en güzel yerden alabilmeliyiz. Hızlı bağlantı altyapısı olan insanlar için bile durum böyle.

hspace=0

Bu aşamada yapılması gereken Alengirli grafikleri at ve tüm textleri Arial yap gibi bir yaklaşımdan öte elimizdekileri daha doğru, etkin ve yerinde kullanabilmek. Bugün pek çok kişi internetten resimlere bakmayı, müzik dinlemeyi, video seyretmeyi seviyor ve bunu yeterli sayılamayacak hızlarla yapmaya çalışıyor. Ve tasarımcı, tüm bu yoğun beklentileri karşılayacak yaklaşımları bilmek, flash gibi vektör tabanlı olanlar da dahil olmak üzere tüm optimal teknolojileri kullanmak, her şeyin düzgün çalışması için çabalamak ve en iyi optimizasyonları gerçekleştirmekle yükümlü.

hspace=0

TEMEL OPTİMİZASYON YAKLAŞIMLARINA BAKIŞ
Web optimizasyonunda en temel yaklaşım; dosyaların boyut olarak mümkün olduğunca küçük tutulması ama bu arada imaj kalitesinin de mümkün olduğunca korunmasıdır. Şimdi temel web optimizasyon kurallarına bir bakalım;
Öncelikle resminizi Photoshop'da açın. File > Save For Web ile (Ctrl / Command + Shift + Alt + S) optimizasyon pencere¬sini açın. Yukarıdaki tab'da 2-Up seçeneğine tıklayın. Bura¬daki menüden imajın optimize edilmeden önce ve sonraki halini görebilirsiniz. Şimdi genel olarak bakalım;

hspace=0

1 -Dosya Tipine Karar Verin
Burada birincil sırada gelen dosya uzantıları JPEG ve GIF'dir. Bildiğiniz üzere renk sayısı fazla olan görseller JPEG, az olanlar da GIF'dir. Sonuçlarını en iyi görmek için görselinizi her iki dosya uzantısını seçerek inceleyin. İmajın görünüm kalitesi, dosyanın boyutundaki değişim (resmin altındaki barda dosya boyutu ve bağlantı hızına bağlı olarak sitede ortalama açılma süresi saniye cinsinden görebilirsiniz) bu konuda size fikir verecektir.

2 - JPEG Sıkıştırma Aşaması
JPEG dosyaları için sonraki adım uygun olan sıkıştırma ora¬nına karar vermektir. Bu da Quality bölümünden gerekli düzenlemeyi yapma ve dosya boyutuyla dosyanın görünüm kalitesi arasındaki ilişkiyi inceleme anlamına geliyor. Burada işinize yarayabilecek bir ipucu şu; Yaptığınız optimizasyon ayarı neticesinde imajınızın görünümünde gren / pixel oranı artarsa Blur bölümünden değeri bir miktar artırarak bunu halledebilirsiniz.

3 - GIF Bölümünde Optimize İşlemi
GIF dosyaları içinse sonraki adım Color Tablea bakıştır. Color Table bize, imajda kullanılan renklerin incelenmesi ve eşleştirilmesi imkanı sunar. Burada görüntü kalitesinin düzenlenmesi ve optimize işlemleri için oldukça geniş bir hareket alanımız var. Bu konunun detaylarını GIF Renk Seti ve Optimizasyon bölümünden inceleyebilirsiniz.

4 - Değişken Sıkıştırma Yöntemleriyle Dosya Optimizasyonu

Değişken sıkıştırma, Channel Mask tanımlayarak imajın belli bir alanındaki görüntü kalitesine yoğunlaşma işlemidir yani bir maskeleme işlemidir. Bu işlem, özellikle bir imajın arka planında işlem yapma söz konusu olduğunda size rahatça çalışma imkanı sunar. Değişken Sıkıştırma konusu¬nun detaylarını Değişken Sıkıştırma Yöntemleriyle Dosya Optimizasyonu bölümümüzde inceleyebilirsiniz.

hspace=0

5 - İhtiyaca Göre Yeniden Keskinleştirme

Sıkıştırılmış dosyayı kaydettikten sonra re-sharpening me¬toduyla imajınıza bazı detayları yeniden kazandırabilirsiniz. Bunun için yapmanız gereken şey Araç paletinizden Sharpen aracını seçmek ve resminiz üzerinde daha keskin, net görün¬mesini istediğiniz noktalarda bunu uygulamak. Bu şekilde hem resminizin boyutu değişmeyecek hem de optimizasyon sırasın¬da kaybedilen bazı detayları yeniden resme ekleyebileceksiniz.

GIF RENK SETİ VE OPTİMİZASYON
GIF optimizasyon bölümünde, görüntü kalitesinin düzen¬lenmesi ve optimize işlemleri için oldukça geniş bir hareket alanımızın olduğunu söylemiştik. Ancak burada kritik nok¬ta, orijinal renklerin, bunları minimal düzeyde temsil edecek renklerle eşleştirilmesi aşamasıdır. 32 rengin bir resimde binlerce rengin yerini alması fikri çoğu kişiye tuhaf ya da komik gelebilir. Ancak bu aslında çok kolay. Dikkat edilmesi gereken husus hangi rengi atıp hangi rengi tutacağınıza doğru karar vermeniz;

a - Photoshop'da Resmi Açıp Kaydetme
Önce GIF'e dönüştürmek istediğiniz resminizi açın. Save For Web ile web optimizasyon ekranını açın. Sağ taraftaki panelden GIF kayıt seçeneğini seçin.

b - Temel GIF Ayarlarını Girme
Önce resminizin görüntü kalitesini en az etkileyecek şekilde Colors bölümünden renk miktarını düşürün. Yukarıdaki Optimized bölümüne tıklayın ve sonucu inceleyin.

hspace=0

c - Önemli Renkleri Kilitleyin
Optimized ekranında sağda Color Table menusunu seçin. Soldaki araç çubuğundan damlalık - Eyedropper (I) aracını seçin. Şimdi resimdeki en çok göze çarpan renklerden birini damlalıkla seçin. Siz damlalıkla renge tıkladığınızda Photos¬hop o renge en uygun gelen karşılığı Color Table'da işaretler. Color Table menusunun altındaki üçüncü sırada yer alan kilit ikonuna tıklayarak bu rengi kilitleyin. Bu işlemi aynı şekilde resminizdeki diğer kritik renkler içinde uygulayın.

d - Yakın Renkleri Elemine Etme
Resminizdeki öncelikli renkleri seçip kilitledikten sonra, seçtiğiniz renklere yakın tonlardaki diğer renkleri seçip çöp kutusuna yollayın. Klavyeden Shift'e basarak çoklu renk seçimi yapabilirsiniz. Bu da zamandan tasarruf olur.

e - Tekil Renkleri Değiştirme
Önemli renkleri kilitleyip sakladıktan sonra bu renkler üzerinde bir değişiklik yapmak isteyip istemediğinizi düşünün. Eğer bazı renklerde değişiklik yapmak isterseniz yapmanız gereken şey kilitlediğiniz renklerden birine çift tıklamak. Bu durumda karşımıza Color Picker ekranı gelecektir. Color Picker ekranında seçim yaparken dikkat edeceğiniz en önemli husus rengin web ortamına uygunluğu olmalıdır. Bu uygunluğu sağlamanın yolu Color Libraries butonu-nun hemen yanında yer alan ya da almayan 3 köşeli kutucuk ikonu'dur. Almayan diyoruz çünkü eğer bu minik kutucuk görünüyorsa rengimiz web için uygun değildir anlamına geliyor. Ne zaman bu kutucuk kaybolursa bilin ki seçtiğiniz renk web için uyumlu bir renktir. Bu noktada Color Picker'ın sol alt köşesindeki Only Web Colors seçeneğini işaretle¬mek faydalı olacaktır. Çünkü böylece direkt webe uyumlu renkleri görebilir ve seçiminizi bu kısıtlama çerçevesinde daha rahat yapabilirsiniz.

f - Color Table Ayarların ı Kaydetme
Eğer aynı tip birden fazla imajla çalışıyorsanız ya da belirledi¬ğiniz renklerle bir imaj serisi oluşturmak istiyorsanız o zaman Color Table ayarlarınızı kaydedebilirsiniz. Color Table'ın sağındaki küçük ok'a tıklayıp açılan menüden Save Color Tableı seçin. Açılan pencereden bir kayıt ismi girin ve OK'e tıklayın.

hspace=0

ÇEŞİTLİ İMAJ TİPLERİYLE ÇALIŞMA

a - Daha İyi Thumbnail'ler Oluşturma

Thumbnail grafikler neredeyse her zaman gözden kaçırılır, üstünde fazla zaman harcanmaz. Ancak gerçek şu ki, thumbnail'lar web ortamında neredeyse her yerdedirler ve nadiren olması gerektiği gibi hazırlanırlar. Thumbnail hazırlarken sakınılması gereken en önemli konu çok fazla görsel atraksiyon barındırmamaları gerektiğidir. Tekil ve baskın bir görsellik kullanımı ön planda olmalıdır. Background renk ve imaj kullanımından uzak durulmalı; temiz, tanınabilir ve anlaşılır bir yapıda hazırlanmalıdır.

b - İnfo Grafiklerde Daha Fazla Netlik Sağlama
İnfo grafikler bir ürünün satımı, bir konu ya da hizmetin açıklanmasında başvurulan görsellerdir. Web ortamı için hazırlanacak çalışmalarda thumbnail'ların optimize edilmesi konusuna ek olarak imajların mümkün olduğunca stilize edilerek kullanılması, renk sayısının azaltılması çok önemli. Çünkü infografik konusunda görselliğin anlatımın önüne geçmemesi gerekiyor. En azından web ortamı için...

c-Küçük İmajlar
Web için küçük imajlar hazırlarken göz önünde bulundurulması gereken birkaç önemli nokta var. Bunları yaparken önce imajı küçültüp Sharpen ve Contrast işlemlerini daha sonra yapmayı, bölgesel alan rötuşlarını da en sona bırakmayı unutmayın;

• Kontrast Verin: Küçük imajların okunabilirliği yani görünebilirliği çok önemli. Bunun için de yüksek kontrastlı ol¬ması önemlidir. Bunu Curves, Levels ya da uygun bir başka Adjustment aracı kullanarak gerçekleştirebilirsiniz.

• Saturation Verin: Küçük imajlar daha parlak ve daha renkliyken çok daha iyi görünürler. Ayrıca küçük imajlar, büyüklere göre daha yüksek bir renk doygunluk düzeyine sahiptirler.

• Backgroundu Sadeleştirin: Yazımızda daha önce de belirttiğimiz gibi backgroundun sadeleştirilmesi çok önemli. Çünkü web imajlarında adı gibi geri planda olan backgroundlar, konu boyut olunca hiç de geri planda kalmıyorlar. Bu da imajın boyutunun gereksiz yere büyük olması anlamına geliyor.

Background'ı sadeleştirmek için Dodge, Burne gibi araç tool-larını, Blur gibi efektleri ya da gerekiyorsa Flatten Image ile layerları birleştirerek gereksiz yükü atabilir, görsel yoğunluğu minimize edebilirsiniz.
hspace=0
• Tonları Sıkıştırın: Posterize uygulaması ve Cutout filtresiyle imajınızın renk tonu yoğunluğunu azaltabilirsiniz. Bunların bir faydası da imajın hem daha parlak hem de farklı efekt etkisiyle görünmesidir.

hspace=0

• Smart Blur Verin: İmajın optimize edilmesi sürecinde en çok karşılaşılan durum Noise (Gren'li) görünümün ortaya çıkmasıdır. Bunu Smart Blur yardımıyla kolayca elimine edebilir, artı renklerin sadeleşmesini sağlayabilirsiniz.

• İlave Shadow ve Highlight Etkisi: Araç çubuğundaki Dodge / Burn araçlarını kullanarak imajınıza ilave kontrast etki katabilir ve belirli alanları daha belirgin bir hale getirebilirsiniz. Kontrastlığın artması, renk sayısının da azalması ve bu da boyuta olumlu katkı anlamına geliyor.
hspace=0

Kurumsal Grafik ve Renkler
VVebde kullanılan pek çok grafik ya da kullanılan pek çok renk kurumsal tabanlıdır. Bu durumda en önemli öncelik, renk tutarlılığının devam ettirilmesidir.

Dikkat edilmesi gereken konu kurumsal yapıya, vizyon ve misyon yapısına uygun grafikler seçmek, uygun renkler (doğrudan kurumsal renkler ya da bunları destekleyecek kontrast / tint) renkleri seçmektir.
Sonrasında da bu renklerin ve grafiklerin doğru optimizas-yonla yayınlanmasıdır.

Değişken Sıkıştırma Yöntemleriyle Dosya Optimizasyonu
Değişken sıkıştırma yöntemi size aynı imaj üzerindeki farklı noktalarda değişik sıkıştırma ve kalite yakalama imkanı sunar. Bu şekilde, backgroundda ya da imajdaki düzgün renk alanları bölgelerinde çok da önemli olmayan alanlarda bir yandan bazı detayların kaybolmasına izin verirken bir yandan da merkezi bir karakter ya da imajın çevresindeki detaylara daha fazla yoğunlaşabilirsiniz.

Sonuçta yüksek kalitede ancak düşük çözünürlükte imaj elde etmiş olursunuz.

a - Yeni Bir Kanal (Channel) Açın
Bu çalışmanın ilk aşaması Photshop'da bir maske oluş¬turmayı gerektirir. Önce üzerinde çalışacağınız imajı açın. Kanal paletini (Window > Channels) açın. Sağ üstteki açılan menüden yeni bir kanal seçin. Ayar ekranında Masked Are-as seçiliyken OK diyerek yeni kanalınızı oluşturun.

hspace=0

b - Bir Maske Oluşturun
Yeni kanalınızı oluşturduğunuzda siyah bir imaj katmanı gelecektir. Diğer kanalları da görünür hale getirdiğinizde imajınızı kırmızı renkle maskelenmiş olarak göreceksiniz. Resmin sıkıştırma sürecinin sonunda beyaz alanları en fazla detayı barındıran yani önemli, siyah alanları da en az detay barındıran yani nispeten daha az önemli alanlar olarak belirlemiş olacaksınız. Bu aklınızın bir köşesinde dururken beyaz boyayı seçin, herhangi bir boyama aracıyla resminizdeki ortaya çıkmasını istediğiniz detayları Alfa kanalında boyayın. İşiniz bittiğinde Alfa kanalının gözünü kapatın.
hspace=0

c - JPEG Dosyalarına Save For Web'de İnce Ayar

Çalışmayı Save For VVeb'de açın. JPEG uzantısını seçin. Quality bölümünün hemen sağ tarafındaki küçük ikona tıklayarak modify Quality Settingi açın. Burada Channel bölümünden az önce Photoshop'da oluşturduğunuz kanalı seçin. Quality barının hemen altında solda Minimum sağda da Maksimum barlarını göreceksiniz. Kanalımızdaki beyazla boyanan alanlar maksimum ayarına, siyah bölgelerde minimum alanına karşılık gelir. Yani maksimumdaki değerleri oynayarak maske uyguladığınız ve önemli olarak belirlediğiniz kısımlarda optimizasyon yapabilir, minimum bölümündeki değerlerle de kalan diğer alanlar üzerinde optimizasyon ayarlaması yapabilirsiniz.

hspace=0

d - GIF Dosyalarına Save For Web'de İnceAyar
 
Eğer imajınızı GIF olarak kaydetmeniz gerekiyorsa Save For Web ekranında GIF uzantısını seçin. GIF ayarlama menü-sünden aynı şekilde kanalınızı seçerek yukarıdaki uygulamayı GIF dosyanız içinde yapabilirsiniz. Burada ek olarak selective, Lossy ve Dither bölümlerinden hazırladığınız kanal yardımıyla renk azaltımı, sıkıştırma gibi optimizas¬yon işlemleri yapabilirsiniz. Sonuç olarak web dünyası bugün çok daha uyumlu altyapılar ve hızlı bağlantılara sahip. Ancak bunun dışında kullanıcı beklentileri hala genel olarak aynı; hız, ergonomi ve bunları doğru destekleyen bir estetik yapı... İşin tasarımcılar yönüne gelince; tasarımcılar için bugün daha bilinçli bir hareket ortamı mevcut çünkü kullanıcı beklentileri de olgunlaştı. Tasarımcılar estetik ve ta¬sarım kaygılarından fedakarlık etmeden ziyaretçilerin hız, ergonomi ve yenilik açlığını artık daha hızlı ve verimli olarak karşılayabilecek noktadalar. Elbette Photoshop'ın da yardımıyla...

 

March 2007

 


Mercek Altında