WTK212U-WEB GRAFİK TASARIMI
Ünite 3: Photoshop ve Illustrator ile Web Tasarımı
Giriş
Web tasarım, İnternet Çağı’na özgü grafik tasarımdır. Grafik tasarım, sanat, endüstri, ekonomi, kitle iletişimi, reklamcılık gibi birçok sektörü kapsayan teknolojik ve estetik bir faaliyettir.
Grafik tasarım yazılımları, profesyonel tasarımcının yanı sıra ilgilenen herkes için tasarım deneyimi ve uygulamasının yolunu açar. Photoshop ve Illustrator gibi tasarım programlarının hayal gücüne, dijital tasarım anlayışına ve pratiğine kazandırdığı ivme, Dünya Çapında Ağ’ın (www/World Wide Web) devreye girmesiyle siber boyuta ulaşır ve web tasarım ortaya çıkar. Bu bağlamda web tasarımı, hem bir dijital zanaat pratiği hem de incelikli bir güzel sanatlar dalıdır.
Web tasarım alanında, Photoshop ve Illustrator programları, küresel olarak çok yaygın kullanılan iki programdır. Adlarından da anlaşılacağı üzere, öncelikli olarak, Photoshop, fotoğraf odaklı ve bitmap tabanlı, Illustrator, illüstrasyon odaklı ve vektör tabanlıdır.
Bitmap Tasarım ve Vektörel Tasarım
Vektör grafikleri ile bitmap görüntülerinin benzerlikleri ve farklılıklarına göre kullanım alanları vardır. Bitmap görüntüler genellikle fotoğraf makinesi ile çekilmiş görüntülerdir. Vektör grafikleri ise çoğunlukla çizimlerden oluşur. Bir web sitesi için logo, ikon ve çizgisel tasarımlar Illustrator gibi vektör tabanlı uygulamalarla gerçekleştirilir. Fotoğraflar ise Photoshop gibi bitmap tabanlı görüntü işleme programları aracılığı ile düzenlenir
Bitmap ve Vektör Görüntüleri Arasındaki Farklar
Photoshop programı ile bir web sitesi tasarımı yaptığımızda çalışmamızı dışa aktarırken çeşitli dosya formatları kullanırız. Aynı işlem Illustrator programı için de geçerlidir.
PDF Taşınabilir Belge Formatı
PDF Portable Document Format (Taşınabilir Belge Formatı). PDF dosyası genellikle vektör grafikleri, metin ve bitmap grafiklerinin birleşimidir. PDF Adobe tarafından 1992 yılında metin biçimlendirmesi ve görüntüler de dâhil olmak üzere belgeleri, uygulama yazılımı, donanım ve işletim sistemlerinden bağımsız bir şekilde sunmak için geliştirilen bir dosya formatıdır. Her PDF dosyası metin, yazı tipleri, vektör grafikleri, raster görüntüler ve görüntülemek için gereken diğer bilgiler dâhil olmak üzere sabit mizanpajlı düz bir belgenin tam bir açıklamasını kapsar. PDF belgesi desteklenen tarayıcılarda bir web sayfasının içinde gömülü içerik olarak da görüntülenebilir.
Bitmap (Bit İşlem)
Bitmap, dijital görüntüleri depolamak için kullanılan bir bellek organizasyonu veya görüntü dosyası biçimi türüdür. Bitmap terimi bilgisayar programlama terminolojisinden gelir, yani sadece bir bit haritası, mekânsal olarak eşlenmiş bir bit dizisi. Pixmap ile birlikte, genellikle mekânsal olarak eşlenmiş bir piksel dizisinin benzer kavramını ifade eder.
Raster görüntüler genel olarak dosyalarda ya da bellekte, ister sentetik ister fotoğrafik olsun, bit eşlemler ya da pixmaps olarak adlandırılabilir.
JPEG Bitmap Dosyası
JPEG, Joint Photographic Experts Group (Birleşik Fotoğraf Uzmanları Grubu) tarafından standartlaştırılmış bir sayısal görüntü kodlama biçimidir. JPEG standardında görüntü saklayan dosya biçimi de çoğunluk tarafından JPEG olarak adlandırılır. Bu dosyalar genellikle,.jpg,.jpe ya da.jfif uzantılıdır, ancak çoğunlukla.jpg uzantısı kullanılır. Ancak, JPEG standardı sadece görüntünün nasıl kodlanacağını tanımlar, görüntünün herhangi bir saklama ortamında depolanma biçimini belirtmez. Bu dosya biçimi, World Wide Web üzerinden görüntü iletmek ve fotografik görüntü saklamak için en popüler ve yaygın dosya biçimi olmuştur. JPEG, dijital ortamda bir dijital fotoğraf görseli için kayıplı sıkıştırma yöntemidir. Dolayısıyla depolama boyutu görüntü kalitesi üzerinde kayba neden olabilir.
PNG Bitmap Dosyası
PNG, “Taşınabilir Ağ Grafiği” anlamındaki “Portable Network Graphics”in kısaltmasıdır ve kayıpsız görüntü saklamak için kullanılan bir saklama biçimidir. PNG, palet tabanlı görüntüleri (24 bit RGB veya 32 bit RGB renklerinden oluşan paletlerle), gri tonlamalı görüntüleri (saydamlık için alfa kanallı veya alfa kanalı olmayan) ve palet tabanlı olmayan tam renkli RGB veya RGBA görüntülerini destekler. PNG, profesyonel kalitede baskı grafikleri için değil, görüntüleri internete aktarmak içindir; bu nedenle CMYK gibi RGB olmayan renk alanları desteklenmez.
JPEG ve PNG Formatının Karşılaştırılması
• Çizim ya da metin gibi keskin geçişler içeren resimlerde PNG çok daha iyi sonuçlar verirken, JPEG’te resimlerdeki çizgi ve metinlerin etraflarında basamaklanmalar ve bulanıklıklar görülür. • PNG’nin genelde JPEG’e tercih edilmemesindeki en büyük etken, kayıplı bir sıkıştırma algoritmasını kullanan JPEG’e kıyasla, PNG dosyalarının kimi zaman 4-5 kat daha fazla disk alanı kaplamasıdır. • PNG keskin kenarlı, vektör ve metin içeren resimlerde daha başarılı sonuç verirken, internetteki yüklenme hızının kabul edilebilir kalite kaybına tercih edildiği durumlarda JPEG kullanılmaktadır. • JPEG’te transparan alanlar olmaz, ancak PNG’de transparan alanlar mevcut olabilir.
Vektör
Vektör grafikleri, bir bilgisayar grafiği biçimi olarak, noktalar, çizgiler, eğriler ve çokgenler gibi Kartezyen düzlemde tanımlanan geometrik şekillerden doğrudan doğruya görseller oluşturmak için kullanılan mekanizmalar kümesidir. Bu mekanizmalar vektör görüntüleme ve yazdırma donanımını, vektör veri modellerini ve dosya
biçimlerini ve bu veri modellerine (özellikle grafik tasarım yazılımı, bilgisayar destekli tasarım ve coğrafi bilgi sistemleri) dayalı yazılımları içerebilir. Vektör grafikleri, her biri genel olarak ve belirli durumlarda avantaj ve dezavantajları olan raster grafiklere bir alternatiftir. Vektör grafikleri günümüzde SVG, WMF, EPS, PDF, CDR veya AI grafik dosyası formatlarında yaygın olarak bulunur ve özünde JPEG, PNG, APNG, GIF, WebP, BMP ve MPEG4 gibi daha yaygın raster grafik dosyası biçimlerinden farklıdır.
SVG Vektör Dosyası
Scalable Vector Graphics (Ölçeklenebilir Vektör Grafikleri) W3C Konsorsiyumu tarafından kullanımı tavsiye edilen bir dosya biçimidir. SVG görüntüleri vektör grafik formatında tanımlanır ve XML metin dosyalarında saklanır. SVG görüntüleri kalite kaybı olmadan boyut olarak ölçeklendirilebilir. XML metin dosyaları, metin düzenleyicileri veya vektör grafik düzenleyicileri ile oluşturulabilir ve düzenlenebilir. XML metin dosyaları web tarayıcıları tarafından işlenirler. SVG görüntüleri, Adobe Illustrator, Inkscape, Adobe Flash Professional veya CorelDRAW gibi bir vektör grafik düzenleyicisi kullanılarak üretilebilir ve aynı yazılım kullanılarak PNG gibi yaygın raster görüntü formatlarına dönüştürülebilir. Web tabanlı uygulamalar için, satır içi SVG olarak adlandırılan kullanım modu, SVG içeriğinin bir etiket kullanılarak HTML belgesine gömülmesine izin verir. Grafik yetenekleri daha sonra CSS gibi gelişmiş kullanıcı arayüzleri oluşturmak için kullanılabilir. SVG’nin bir görüntü formatı olarak tanımlandığını görmek yaygındır, ancak aslında HTML belgelerine benzer bir belge formatıdır ve bu nedenle komut dosyası veya CSS barındırabilir.
Photoshop ve Illustrator Programlarının Ortak ve Farklı Özellikleri, Araçlar Paneli ve Araçlar
Photoshop ve Illustrator Programlarının Ortak Özellikleri
Programların arayüzleri birbirine benzerlik gösterir. Programlarda kullanılan araçların çoğu birbirine benzerlik gösterir. Paneller, araç ayarları ve efektlerin çoğu birbirine benzerdir. Her iki program da dışarıya, JPEG, PNG ve PDF dosyalarını aktarabilir. Her iki program da sadece PDF formatında bitmap ve vektör dosyalarını dışarı aktarabilir. Program içerisinde diğer programa geçiş seçeneği oluşturulabilir.
Photoshop ve Illustrator Programlarının Farklı Özellikleri
Photoshop programı bitmap, Illustrator programı vektör tabanlıdır. Photoshop Programında vektör dosyaları PNG olarak açılır. Photoshop programı vektör dosyalarını işleyemez. Illustrator Programında bitmap dosyaları açılabilir, fakat işlenemez. Photoshop Programında çözünürlük önemlidir, Illustrator programında çözünürlük önemli değildir; dosyalar görüntü kaybı olmadan ölçeklenebilir. Photoshop programında dosyalar fazla yer
tutabilir, Illustrator programında dosyalar daha az yer kaplar; Web’te daha hızlı açılır. Photoshop programında gerçek ya da gerçeğe yakın bitmap görüntüleri tasarlanır. Illustrator programı ile daha çok dikkat çekmek ve mesaj niteliği taşıyan vektörel görüntüler tasarlanır.
Photoshop Araçları
Photoshop programının çok sayıda ve çeşitte aracı bulunmaktadır. Farklı biçim ve işlevlerde işaretleme ve seçme araçları, kesme araçları, kalemler, fırça ve silgiler, maskeler programın Araçlar panelinden kullanılabilir. Daha kapsamlı bir liste için ünitede sayfa 60’a bakılabilir.
Illustrator Araçları
Photoshop programına benzer bir şekilde Illustrator programının da çok sayıda ve çeşitte aracı bulunmaktadır. Bunlar farklı biçim ve işlevlerdeki seçim araçları, kalemler, yazım ve metin araçları, şekil kavis ve şekillendirme araçları, kesme ve silme araçları, boya ve renk araçları, grafik araçları ve yüzey araçları olarak özetlenebilir. Daha fazla bilgi için ünitede sayfa 63’e bakınız.
Photoshop ve Illustrator Programlarının Çalışma Alanı, Arayüz Bileşenleri
Photoshop ve Illustrator Programı Çalışma Alanı
Belgelerinizi ve dosyalarınızı paneller, çubuklar ve pencereler gibi çeşitli ögeleri kullanarak oluşturur ve değiştirirsiniz. Bu ögelerin herhangi bir düzenleme şekli, çalışma alanı olarak adlandırılır. Farklı Adobe kreatif uygulamalarının çalışma alanları benzer görünümlere sahiptir. Birçok hazır ayarlı çalışma alanından seçerek ya da kendinize ait bir çalışma alanı oluşturarak Photoshop ve Illustrator’ı kendi çalışma biçiminize uyarlayabilirsiniz.
Üstte bulunan Uygulama Çubuğu’nda çalışma alanı anahtarı, menüler (yalnızca Windows) ve diğer uygulama kontrolleri bulunur. Bazı ürünlerle ilgili Mac’de Pencere menüsünü kullanarak bunu gösterebilir ya da gizleyebilirsiniz. Araçlar Paneli’nde görüntü, resim, sayfa ögesi vb. oluşturulması ve düzenlenmesi için araçlar vardır. İlgili araçlar gruplanır. Kontrol Paneli o anda seçili olan araca yönelik seçenekleri görüntüler. Doküman Penceresi’nde üzerinde çalıştığınız dosya görüntülenir. Doküman penceresi sekmeli olabilir; bazı durumlarda gruplandırılmış ve sabitlenmiştir. Paneller çalışmanızı izlemenize ve değiştirmenize yardımcı olur. Paneller gruplanabilir, yığınlanabilir ya da sabitlenebilir. Uygulama Çerçevesi, tüm çalışma alanı ögelerini tek, birleştirilmiş bir pencerede gruplar; böylece uygulamaya tek birimmiş gibi davranabilirsiniz. Uygulama çerçevesini ya da ögelerini taşıdığınızda ya da yeniden boyutlandırdığınızda içindeki tüm ögeler birbirlerini yanıtlar; bu nedenle çakışmazlar. Uygulamaları değiştirdiğinizde ya da yanlışlıkla uygulama dışını tıklattığınızda paneller kaybolmaz. İki ya da daha fazla uygulamayla çalışıyorsanız uygulamaları ekranda yan yana yerleştirebilir ya da farklı monitörlere yayabilirsiniz. Mac kullanıyorsanız ve geleneksel, serbest form kullanıcı arabirimini tercih ediyorsanız, Uygulama Çerçevesi’ni kapatabilirsiniz.
Photoshop ve Illustrator Programlarında Efekt ve işlemlerinin ardından internete yüklenir. Örnek web sitesi Filtreler tasarımı ve süreci için ünitedeki sayfa 71’den başlayan Photoshop ve Illustrator programlarında çok sayıda efekt ve talimatları takip edebilirsiniz.
filtreler bulunmaktadır. Photoshop ve Illustrator programlarında kullanılan bu efekt ve filtreler tek başlarına ya da birlikte çeşitli kombinasyonlar oluşturarak kullanılır. Bu efekt ve filtreler tasarlanan çalışmalara ve deneyimlere göre seçilir. Örneğin Photoshop’ta bir portre fotoğrafında Sıvılaştırma (Liquify), iç mekân fotoğraflarında Uyarlanabilir Geniş Açı (Adaptive Wide Angle) gibi filtreler kullanılabilir. Ayrıca Photoshop’ta ayrı bir pencerede açılan Filtre Galerisi (Filter Gallery) yer alır. Illustrator’da ise efektler ve filtreler Photoshop’taki kadar çok değildir. Illustrator’da Çarpıtma (Warp), Stilize Et (Stylize) gibi efektlerin yanı sıra yine Illustrator içinde Bulanıklık (Blur), Çarpıt (Distort), Doku (Texture) gibi Photoshop efektleri de yer alır. Dolayısıyla, Photoshop ve Illustrator programlarında bulanıklaştırma, fırça darbesi, deforme etme, pikselleştirme, keskinleştirme, stilize etme, doku çeşitlemesi gibi birçok işlevsel ve sanatsal efekt bulunmaktadır.
Photoshop ve Illustrator Program Arayüzleri
Ön tanımlı olarak Photoshop ve Illustrator programının arayüzünün solunda, Araçlar Paneli (Tools Panel) bulunur. Araçlar Paneli birden fazla görüntü düzenleme işlevine sahip çeşitli araçları içeren bir kenar çubuğu olarak görünür. Bu araçların bazılarında araç kutusu simgesinin sağ alt kısmında küçük bir üçgen bulunur. Bunlar, tıklatıldığında benzer araçları ortaya çıkarmak içindir. Araçlar Paneli’ndeki her araç için arayüzün üstünde Kontrol Paneli (Control Panel) bulunur. Kontrol Paneli, seçili olan aracın seçeneklerini görüntüler. Arayüzün sağında ise işlem geçmişi (History), katmanlar (Layers) gibi çalışmamızı izlememize ve değiştirmemize yarayan Paneller (Panels) yer alır. Kullanıcı bu panelleri kaldırabilir ya da başka paneller ekleyerek, gruplayarak ya da sabitleyerek programın arayüzünü çalışma şekline göre değiştirebilir. Uygulama Çerçevesi, tüm çalışma alanı ögelerini tek bir tümleşik pencerede gruplar. Uygulama çerçevesini ya da ögelerinden herhangi birini taşıdığınızda ya da yeniden boyutlandırdığınızda içindeki tüm ögeler birbirine yanıt verir böylece hiçbiri çakışmaz. Uygulamaları değiştirdiğinizde ya da yanlışlıkla uygulamanın dışına tıkladığınızda paneller kaybolmaz. Belge Penceresi, üzerinde çalıştığınız dosyayı görüntüler. Belge Pencereleri sekme şeklindedir ve belirli durumlarda gruplandırılabilir ve sabitlenebilir. Üstteki Uygulama Çubuğu (Application Bar) ise menüleri ve uygulama denetimlerini içerir.
Photoshop ve Illustrator Programlarını Kullanarak Örnek Bir Web Sitesi Tasarımı Yapmak
Bir web sitesinin tasarımına başlamadan önce Domain, Hosting, Bant Genişliği ve Sunucu konumlarının sağlanması gerekmektedir. Yine bir web sitesi, tasarımı tamamlandıktan sonra ise gereken HTML ve CSS