Grafik Nedir? GRAFİK FORMATLARI Grafik ve Animasyon TURGUTLU MYO-2004Bahar Grafik kelimesinin kökeni çok eskilere dayanır. Eski Yunanca da kullanılan Graphein veya Grafikos sözcüklerinden gelmektedir. Yazı, resim, ve çizgi anlamında kullanılır. Çağdaş sanat terimi olarak resim ve fotoğraf yoluyla yapılan tüm iletişim araçlarına verilen addır. Grafik sanatçısı mesajını resim, fotoğraf, illüstrasyon ve yazı (tipografi) yoluyla insanlara iletir. Çoğaltma aracı olarak Internet, matbaa teknikleri, film ve televizyon kullanılmaktadır. seval.ozbalci@bayar.edu.tr 2 Tasarım Nedir? Temel Metotlar Tasarım bir problemin çözümüdür. Birden çok doğru çözüm yöntemi vardır. Tasarımda başarı ise çekicilikte değil mesajın en yalın biçimde anlatımı buluş ve işlevselliktir. Gerekli olanın araştırılması, Tanımlanmış bir amaca yönelik yapılan ürün çalışması, Belli bir amaç çerçevesinde gerçekletirilen yaratıcı süreç, Zeka ve yeteneğin ortak ürünlerini oluşturmaktır. İki Temel Metot: Vektör CDR, SWF Bitmap BMP, TIF, JPG, GIF Video ve Hareketli Görüntü Formatları: MPEG, AVI, Quick Time, FLI seval.ozbalci@bayar.edu.tr 3 seval.ozbalci@bayar.edu.tr 4 1
VEKTÖR GRAFİK Grafik Türleri Vektör Grafikler ve Bitmapler Sol alt köşeden 15 derece açıyla kuzey yönünde mavi bir çizgi çiz şeklindeki formüllerden oluşur. Bu nedenle; daha az bilgi barındırdırır daha küçük boyutlu olabilir. seval.ozbalci@bayar.edu.tr 6 Vektör Grafik Türleri Karikatür Örneği Çözünürlükten bağımsız olan, ölçeklenebilir vektör grafiklerdir. Genelde matbaacılıkta ve çizgi film, karikatür benzeri görüntüler oluşturmada kullanılılırlar. Başlıca formatları: AI (Adobe Illustrator), CDR (CorelDRAW), CMX (Corel Exchange), CGM Computer Graphics Metafile, DRW (Micrografx Draw), DXF AutoCAD, WMF (Windows Metafile). seval.ozbalci@bayar.edu.tr 7 seval.ozbalci@bayar.edu.tr 8 2
Vektör Grafiklerin Özellikleri-I Vektör Grafiklerin Özellikleri-II Çözünürlüğe göre yeniden meydana getirildikleri için ekranda iyi gözükmenin dışında kağıda çıktı alırken de başarılı sonuçlar sağlamaktadırlar. Bu tip grafikler metinleri de, özellik olarak barındırdığından resim içindeki yazılar da kaliteli olarak görüntülenir. Çizilen şekillerin arkaplanları olmak zorunda değildir. Vektör grafikler dörtgenlerle sınırlandırılmamıştır. Başka nesnelerin üzerine yerleştirebilen bu grafiklerin boş bölümlerinde diğer nesneler görüntülenebilir. Bitmap biçimde kaydedilen bir dairenin dörtgen bir çerçevesi mutlaka olacaktır. Bu çerçevenin boş alanları arkaplana uymadığında istenmeyen görüntüler ortaya çıkabilir. Ama vektör grafiklerde böyle bir sorun yaşanmaz. seval.ozbalci@bayar.edu.tr 9 seval.ozbalci@bayar.edu.tr 10 Vektör Grafiklerin Özellikleri-III Vektör Grafiklerin Özellikleri-IV Vektör grafikler yazılımlar sayesinde elde edilir. Bir yazılım kullanmadan tarayacımızdan aktardığımız resimleri vektör grafik olarak kaydedemeyiz! Vektör grafikleri bitmap formatına çevirmek oldukça kolaydır. Bu işlemi yaparken, orijinal dosyayı ve ilk halinin bir kopyasını saklamak gerekir. Daha farklı boyutlarda bir bitmap istendiğinde bundan yararlanılır. Nedeni: Vektör grafik, bitmap dosyanına dönüştüğünde tüm yararlı vektör özelliklerini geride bırakır. seval.ozbalci@bayar.edu.tr 11 seval.ozbalci@bayar.edu.tr 12 3
Vektör Grafiklerin Özellikleri-V BİTMAP GRAFİK Office dökümanınıza bir clip art resim eklerken dosyanın uzantısının wmf olduğunu fark edebilirsiniz. Metafile olarak adlandırılan wmf ve emf uzantılı dosyalar da bir nevi vektör grafik dosyalarıdır. Farkı ise, vektör komutlarıyla beraber içlerinde bitmap resim görüntüleyebilirler. Örneğin vektör olarak çizilmiş bir pencerenin dört parçasından birinde yine formüllerle belirtilmiş özellikler yerine dışardan çağrılmış bir bitmap resim görüntülenebilir. Bu resim formatında kayıt yapılırken, ikinci satırın sekizinci noktası kırmızı olacak gibi bilgiler resmin tüm noktaları için tekrarlanır. BMP, TIFF, JPG, GIF gibi formatlar bu yolla kayıt yapar. seval.ozbalci@bayar.edu.tr 13 seval.ozbalci@bayar.edu.tr 14 Bitmap Nedir? Bitmap Türleri Bilgisayar ekranında (display space) bir resmi görüntülemek için gereken tüm renk bilgilerinin ekranı oluşturan her piksel (ekran çözünürlülüğü dahilinde, adreslenebilir en küçük resim parçası, pixel) için renk bilgilerinin verildiği resim formatlarına verilen genel addır. BMP, GIF, JPEG, JPG, PNG, PICT (Macintosh), PCX, TGA, TIFF, PSD (Adobe Photoshop). Bitmap dosyaları ekranda görebilmek ve yazıcılardan bastırabilmek için özel bazı programlar gerekir (Photo Shop, XView, ACDSee vb gibi). seval.ozbalci@bayar.edu.tr 15 seval.ozbalci@bayar.edu.tr 16 4
Bitmap Ölçeklendirme Bitmap Görüntü Kaybı Bitmap formatları, resmin çözünürlülüğüne bağlı sabit bir tanımlama ile resmi oluştururlar (Raster tekniği). Bu haliyle, eğer resmi ölçeklendirirsek (küçültme/büyütme) bir çok ayrıntıyı kaybedebiliriz. Örnek Vektör bazlı grafik formatlarında ise, tanımlamalar bağıl olduğu için ölçeklendirmelerde kayıp önlenir (CAD formatları, Post Script (PS, EPS) formatları gibi). Küçük olarak gördüğünüz sıradan bir simge aslında her noktası detaylı olarak tanımlanmış bir bitmap dosyadır. Büyütünce gördüğümüz bu noktalar dışında arkaplan rengi de her piksel için ayrı ayrı tanımlanmıştır. seval.ozbalci@bayar.edu.tr 17 seval.ozbalci@bayar.edu.tr 18 Bitmap Görüntü Kaybı Bitmap Renk Derinliği Bitmap grafikler çözünürlükten bağımsız olmadıkları için farklı boyutlarda aynı kalitede görüntü veremeyebilirler. Resmi düzenlerken eğer küçülterseniz bazı piksellerin bilgilerinden feragat edilecek, eğer büyütürseniz de yeni oluşturulan pikseller çevresindekilere bakılarak tahmin edilmeye çalışılacaktır. Bu nedenle resimlerinizi yazıcıdan basarken beklemediğiniz boyut ve kalite değişiklikleriyle karşılaşabilirsiniz. Temelde bitmap dosyalarda dört derece renk derinliğinden biri seçilir: Tek renk, 16 renk (4 bit/piksel), 256 renk (8 bit/piksel), 16 milyon renk (24 bit/piksel). Artık 256 renk ve 16 milyon renk resimler standart olmuştur. seval.ozbalci@bayar.edu.tr 19 seval.ozbalci@bayar.edu.tr 20 5
256 Renk (8 bit/piksel) 16 Milyon Renk (24 bit/piksel) 256 renk, 8 bit/piksellik resimler, örneğin GIF dosyaları milyonlarca renk arasından, söz konusu resimde kullandıklarını bir araya toplayarak en fazla 256 renk barındıracak bir palet oluştururlar. 640'a 480 piksel boyutlarda 8 bit bir grafik dosyası yaklaşık 300 KB tutar ve yeterli kalitede görüntü sunar ama 35mm'lik bir fotoğrafın kalitesini tatmin edemez. 16 Milyon renk, 24 bitlik resimler ise her bir piksel için üç ana rengin tonlarını kaydederler. Mavi, yeşil ve kırmızı için 256 şar ayrı ton sunan bu yolla 256x256x256 yani 16,7 milyon renge ulaşırız. Çoğu 24 bitlik resim aslında 32 bit olarak kaydedilmekte, ekstra bir bit de o noktanın alpha değerini (efekt özelliği) barındırmaktadır. 640x480 boyutlarında bir resim yaklaşık 920 KB yer tutar. seval.ozbalci@bayar.edu.tr 21 seval.ozbalci@bayar.edu.tr 22 BMP Bitmap Türleri ve Özellikleri BMP, CPT, PNG, PSD, TGA, TIF Windows Bitmap formatı, Microsoft'un DOS dünyasına grafikleri taşırken kullandığı, Windows ve DOS ortamına özel başlıca araçlardan biriydi. 24 bit renk derinliği sunan BMP artık pek fazla kullanılmıyor. BMP'nin saydamlık gibi özellikleri de bulunmuyor. seval.ozbalci@bayar.edu.tr 24 6
CPT PNG Corel PHOTO-PAINT'in kayıt formatlarından biri olan CPT, şekilleri piksellerle betimleyerek resmi oluşturur. CorelDRAW CPT dosyalarını başka dosyalara ekleyebilir ya da alabilir. Bu dosyaların renkli ya da gri ölçekli olması mümkündür. Corel PHOTO-PAINT ile CPT olarak kaydedilen dosyaların mask, lens, floating objects özellikleri korunur. PNG hem gerçek renk derinliği için 24 bit hem de -GIF gibi- sınırlı bir renk paletini kullanarak 8 bit formatlarda kullanılabilir. Her durumda kayıpsız kaydedilir. Fazladan bir alpha kanalıyla orijinal dosyanın katman özelliklerini de saklar (böyle kaydedildiğinde RGB yerine RGBA resmi olur). seval.ozbalci@bayar.edu.tr 25 seval.ozbalci@bayar.edu.tr 26 PNG de Saydamlık PSD Piksel başına 48 bit'e varan kalitede görüntü ile gerçek renk sunan, gri ölçekli resimleri de piksel başına 16 bit bilgiyle kaydedebilen PNG, GIF'ten daha farklı saydamlık özellikleri sunuyor.şu anda İnternet'te kullanılan temel görüntü formatlarından biri, dosyalarınızı kaydederken mutlaka göz önünde bulundurun. Grafik düzenleme programlarının en ünlüsü Photoshop'ın dosyaları kaydederken kullandığı kendi formatı da sadece bu nedenle dahi başlıca formatlar arasında yer alıyor. PSD daha fazla yer tutuyor, gerçek renk derinliğini başarıyla uyguluyor, her zaman katman bilgisi barındırıyor. Sıkıştırma kullanmıyor ve saydamlık özelliği yok. Photoshop'da devam ettiğiniz projeleri PSD olarak tutmak bitmap detay kaybını önlüyor. seval.ozbalci@bayar.edu.tr 27 seval.ozbalci@bayar.edu.tr 28 7
TGA TIF Truevision Targa sıkıştırma ile kaliteden vazgeçip küçük boyutta dosyalar elde edilebilen bir diğer format. Gerçek renk derinliği ve katman bilgisi barındıran TGA saydamlık seçeneği sunmuyor. Tagged Image Format birkaç firma tarafından iddialı olarak geliştirilen, genişletilebilen özellikler sunan bir çalışma.saydamlık özelliği olmayan TIF gerçek renk derinliğinde katmanları destekliyor. Sıkıştırma ile iyi sonuçlara ulaşabiliyorsunuz. Çok renkle uğraştığınızda zaman önemli, yer de çok önemli değilse, TIF'i kullanmanızda fayda var. seval.ozbalci@bayar.edu.tr 29 seval.ozbalci@bayar.edu.tr 30 Temel Fark Internette Grafik Seçimi JPG, JPEG (Joint Photographics Experts Group) GIF Kullanımı GIF (Graphics Interchange Format) Gerçek renk derinliği isteyen, tonların birbirine geçtiği görüntülerde JPG düşük boyutlarda harika görüntüler verir. GIF ise aynı görüntü kalitesine ulaşamaz ve daha yüksek boyutlarda kayıt yapar. Az renk içeren uygulamalarda ise JPG hem kaliteyi düşürür, hem de dosya boyutunda önemli bir değişiklik sağlamaz. seval.ozbalci@bayar.edu.tr 32 8
JPG Renk Derinliği Jpg formatı 24 KB Renklere dikkat! Gif formatı 112 KB Dosya boyutuna dikkat! JPEG formatı 24-bit renk derinliği sunar. Bu da bir web sayfası için yeterli olacak kalitede fotoğraf ve benzeri resimleri kullanmamızı sağlar. JPG'nin en büyük artılarından biri, kalite oranının tamamen grafikere bırakılmasıdır. Kaydederken sıkıştırma oranını, böylece de kaliteden ne kadar feragat edileceğini siz belirlersiniz. seval.ozbalci@bayar.edu.tr 33 seval.ozbalci@bayar.edu.tr 34 JPG de Resim Kalitesi JPG i Tekrar Kaydetmeyin! Her seferinde hesaplanıp yeniden oluşturulan resimin kalitesini sıkıştırılma oranı belirler. İlk sefer görüntülenen dosyanın aynısı değil, kodlarının yorumu görüntülendiğinden JPG dosyaların üstünde oynamalar yaptığınızda aslında orijinal görüntüyü değiştiriyor olmazsınız. Onun yerine derlenmiş, yorumlanmış bilginin görüntüsünü elden geçirmiş olursunuz. Elinizdeki resmin orijinalini saklayın. Web'de yayın gibi amaçlar için oluşturduğunuz resmin bir JPG kopyasını elde ettiğinizde orijinali kaybetmeyin. JPG sıkıştırılmış kodun açılımı olduğu için, sonrasında değişiklikleri orijinalde yapıp yeni bir JPG olarak kaydetmek gerekir. Eğer orijinali elinizde yoksa, düzenlediğiniz JPG dosyasındaki olası sorunları, renklerdeki küçük uyumsuzlukları, fazla parçacıkları temizleyin. seval.ozbalci@bayar.edu.tr 35 seval.ozbalci@bayar.edu.tr 36 9
GIF Renk Derinliği GIF de Resim Kalitesi GIF olarak saklanan dosyalar fotoğraflarda ve de bol renkli görüntülerde JPEG'e göre daha başarısız sonuçlar verir. Önce benzer renklerdeki pikseller ayrı birimlere ayrılıp kaydedilir, ardından da dosya bir renge endekslenir. Bu nedenle GIF dosyaları en fazla 256 renk derinliğine sahiptir. Sıkıştırma özelliği olmayan GIF ile kalite kaybı olmaz ancak, grafiğiniz 256 rengin üzerindeyse bu renge düşürülünce birçok özelliğinden olabilir. Diğer yandan bu kısıtlı renk derinliği dosya boyutunu oldukça küçültebilir. Çizgi film benzeri basit çizgisel görüntüler, şirket logoları, imzalar GIF'in başarılı olduğu resim tiplerine sadece birkaç örnektir. seval.ozbalci@bayar.edu.tr 37 seval.ozbalci@bayar.edu.tr 38 GIF 87a ve 89a GIF Animasyon GIF formatının iki farklı versiyonu var : 87a ve 89a. 89a versiyonu ile eklenen özellikler: Tek bir GIF dosya içinde birden çok GIF formatlı resim yerleştirilmesine ve anime edilmesine olanak veren animated gif özelliği. Katmanlı "interlaced" görüntü saklama özelliği. Bu, özellikle internet üzerindeki resimlerde kullanılır. Böylece, kullanıcı, GIF formatındaki resmi, her seferinde 1 katman gelecek şekilde ekranında görür ve resmin bütünü hakkında, tüm resim gelmese bile, fikri olur. GIF dosyası birkaç görüntü barındırıp böylece hareketli bir animasyon sunabilir. seval.ozbalci@bayar.edu.tr 39 seval.ozbalci@bayar.edu.tr 40 10
GIF Transparan GIF Dosyalarının Değiştirilmesi Renklerin birbirine karışmadığı kalitede şeffaflık da GIF ile mümkündür. Görüntüdeki bir renk transparan olarak atanabilir. Bir GIF dosyasında değişiklik yaparken, doğru rengi seçtiğinizden emin olsanız da istediğiniz tonda bir değişiklik yapamayabilirsiniz. Bunun nedeni, sınırlı renk derinliğidir. GIF dosyasının kaydedilmiş paletinde sizin eklediğiniz renk yer almıyordur. Bu durumda resmi gerçek renk derinliğine, yani RGB moduna yükseltip değişiklikleri yapmalı, sonra yeniden GIF olarak kaydetmelisiniz. seval.ozbalci@bayar.edu.tr 41 seval.ozbalci@bayar.edu.tr 42 Renk Paletini Yeniden Kaydetmek Renk Paletini Yeniden Kaydetmek Eğer resimden çeşitli bölümleri çıkartmış ya da resmin bir bölümünü kesip görüntüyü küçültmüşseniz belki de resim dosyasında kaydedilmiş bazı renkleri dışarda bırakmışsınızdır. Bu nedenle halihazırda elinizde varolan dosyanın renk paletinde yer alan renklerin bazıları gereksiz hale gelmiş olabilir. Resmin renk derinliğini arttırıp sonra yeniden düşürdüğünüzde program görüntüdeki renkleri yeniden sayacaktır. GIF olarak kaydederken program fazla olan renkleri otomatikman düşürür. Böylece yeni resminizin boyutu önemli oranlarda azalmış olabilir. seval.ozbalci@bayar.edu.tr 43 seval.ozbalci@bayar.edu.tr 44 11
SVG Geliyor SVG nin Üstünlükleri Henüz yaygınlaşmamış olan ama üzerinde yoğun çalışmalar yapılan bir vektör grafik formatı da XML teknolojisinden faydalanan SVG (Scalable Vector Graphic) formatıdır. GIF ve JPG dosyalarına Internet'te alternatif olması için geliştirilen başlıca formatlardan biri olan SVG dosyalarını bir metin editöründe açıp inceleyebilir, XML dilinden ne kadar faydalandığına tanık olabilirsiniz. SVG ile İnternet'ten sadece formülün indirilip, görüntünün oluşturulması kullanıcının bilgisayarına bırakılınca sayfalar daha hızlı gelecektir. Bu formatın çok daha derin renk özellikleri, mükemmel piksel konumlandırması, daha başarılı çıktılar sağlaması, sayısız yazı tipini barındırıp hatta içindeki metinlerin aranabilmesi söz konusudur. seval.ozbalci@bayar.edu.tr 45 seval.ozbalci@bayar.edu.tr 46 Hareketli Görüntü Formatları Video (Hareketli Görüntü) Formatları MPEG, AVI, Quick Time Hareketli görüntü formatları, sahneleri arka arkaya (sinema filmi gibi) sürekli gösterebilen formatlardır. Web üzerinde de kullanılan en önemli hareketli görüntü formatları MPEG, AVI ve Quick Time'dır. seval.ozbalci@bayar.edu.tr 48 12
MPEG AVI MPEG ( Video Pictures Extended Group), bir ISO hareketli görüntü (Video) ve ses (Audio) sıkıştırma standartıdır. Video, CD vb gibi ortamlarda hareketli görüntülerin saklanması ve iletilmesini temin eder. Sıkıştırma oranları 1:50 lere kadar çıkmaktadır (MPEG-2). AVI, Microsoft'un geliştirdiği bir video formatıdır. 24 bit true color, platformunuzun desteklediği tüm ekran çözünürlülükleri ve ses bu format ile verilebilir. seval.ozbalci@bayar.edu.tr 49 seval.ozbalci@bayar.edu.tr 50 Quick Time (MOV) Resim formatlarına virüs bulaşabilir mi? Quick Time, Apple'in geliştirdiği bir hareketli görüntü formatıdır. Pek çok platformda bu format desteklenir. Bu, AVI'ye gore en buyuk avantajıdır. AVI'dekine benzer özellikler taşır. Virüsler, temel olarak, bilgisayar programları/program parçalarıdır ve bilgisayarınızın CPU'sunda işlenmelidir. Grafik ve ses formatları ise (en azından bilinen formatların tamamına yakını) sadece statik yapıda verilerden (data) oluşur. İçlerinde hiç çalıştırılabilir kod yoktur. Bu yüzden de virüs taşımaları imkansızdır. Eğer bir resim formatını okumaya çalıştığınızda bilgisayarınız kilitleniyorsa bunun muhtemel sebebi; (1) ya resim formatı bozuktur (2) ya da resim görüntüleyen programınızda bir sorun vardır. seval.ozbalci@bayar.edu.tr 51 seval.ozbalci@bayar.edu.tr 52 13
Haftaya Bir vesikalık fotoğrafınızı taratarak uygun formatta diskete kaydedip derse gelirken yanınızda getirin. seval.ozbalci@bayar.edu.tr 53 14