Uzaktan Eğitim Ders Notları

Grafik ve Animasyon Uzaktan Eğitim Ders Notları Bu ders içeriğinin basım, yayım ve satış hakları Yrd. Doç. Dr. Zekeriya PARLAK a aittir. "Uzaktan Öğretim" tekniğine uygun olarak hazırlanan bu ders içeriğinin bütün hakları saklıdır. İlgili kuruluştan izin almadan ders içeriğinin tümü ya da bölümleri mekanik, elektronik, fotokopi, manyetik kayıt veya başka şekillerde çoğaltılamaz, basılamaz ve dağıtılamaz. Her hakkı saklıdır 2014 Zekeriya PARLAK

2 Grafik ve Animasyon Temel Bilgiler Hedefler Grafik ve ve Animasyonların uygulama alanlarını tanır Çözünürlük ve Piksel Kavramı bilir Ekran Görüntülerinin nasıl oluştuğunu bilir Grafik formatlarını bilir Hexadecimal (Onaltılık) Renk Kodlamasını yapabilir

GRAFİK ve ANİMASYON TEMEL BİLGİLER 3 Önsöz Çağımız bir tasarım çağıdır. Birçok ürünün pazarlanması büyük oranda sahip olduğu tasarım özelliklerine göre değişmektedir. Başarılı bir tasarım çoğu zaman başarılı bir ürün olarak algılanır. Tüm bunlar göz önüne alındığında grafik tasarımı tasarım dünyasının en önemli bileşenidir. Birçok sektör günümüzde özellikle bilgisayar ortamında yaratılmış olan grafikleri kullanmakta ve bunun değerini her geçen gün daha iyi algılamaktadır. İnsanların kendi yeteneklerini farklı sektörlerde kullanabilmesi günümüz koşullarında teknoloji şirketleri içinde bir hedef haline gelmiştir. Sadece grafik tasarlayabilen bir insanın hiçbir programlama bilgisi olmadan web siteleri yapabilmesi buna bir örnek olarak verilebilir. Bu açıdan bu derste öğreneceğimiz grafik ve animasyon programları aslında bize birçok farklı sektöründe kapılarını açacaktır. Sakarya,2014

4 Kısaltmalar Adobe Fw : Adobe Fireworks Adobe Fl : Adobe Flash GIF JPG PNG TIFF PPI PPC DPI RGB ICO PCD TGA TTF WMF PSD PSP EPS : Graphics Interchange Format : Joint Photographic Experts Group : Portable Network Graphics : Tag Interchange File Format : Pixels Per Inch : Pixels Per Centimeter : Dots Per Inch : Red-Green-Blue : Icon : Photo CD : Targa : True Type Font : Windows Meta File : Photoshop Document : Paint Shop Pro : Extended Post Script

GRAFİK ve ANİMASYON TEMEL BİLGİLER 5 İçindekiler 1. Giriş 2. Uygulama Alanları 3. Çözünürlük ve Piksel Kavramı 4. Renk Görüntüleri ve Piksel Derinliği 5. Resim Formatları 5.1. Grafik Dosya Formatları 5.1.1. BMP(Bitmap) 5.1.2. GIF (Graphics Interchange Format) 5.1.3. JPEG (Joint Photographic Experts Group) 5.1.4. PNG(Portable Network Graphics) 5.1.5. TIFF(Tag Interchange File Format) 6. Hexadecimal (Onaltılık) Renk Kodlaması

6 1. Giriş Günümüzde basın sektörü, reklam sektörü, film sektörü, televizyon sektörü, oyun programlarının tasarımı, çoklu-ortam tasarımı, vb. alanlarda grafik ve animasyonlar sıklıkla karşımıza çıkmaktadır. Grafikler günümüz koşullarında bilgisayarlar ile hazırlamakta ve bunlara Bilgisayar Grafikleri, denmektedir. Bundan dolayı, bilgisayarın ekranında gördüğümüz her türlü şekil, renk, resim, logo, yazı, menü, vb. her türlü bilgisayar nesnesi bilgisayar grafiklerinin konusu içerisinde yer alır. Animasyon ise belirlenen bir zaman içerisinde ekranda gerçekleşen pozisyon değişimi, dönme, ölçekleme, renk değişimi, yüzey değişimi, vb. görsel değişiklikler olarak tanımlanabilir. Hedef : Grafik ve ve Animasyonların uygulama alanlarını tanır 2. Uygulama Alanları Bilgisayar grafiklerinin ve animasyonlarının birçok uygulama alanı vardır. Bunlar aşağıda maddeler halinde listelenmiştir: 1. Resim, Eğlence ve Yayın: Bu başlık altındaki uygulamalar film sektörü (filimler, çizgi filimler, reklam filmleri, vb.), oyun grafikleri ve çoklu-ortam (multimedya) tasarımı olmak üzere 3 sınıfta toplanabilir. Film ve oyun sektöründe, cisimlerin ya da hayalimizde ürettiğimiz olguların 3 boyutlu olarak bilgisayarda modellenmesi, modellenen cisimlere çeşitli animasyonlar kazandırarak hareketli hale getirilmesi, oluşturulan grafiklerin düzenlenmesi, çeşitli efektler kazandırılması, vb. tüm işlemler tamamen bilgisayar grafiklerine endekslenmiştir. Çoklu-ortam tasarımı web sayfaları, CD dizaynı, kitap, magazin, haberler, vb. konuları kapsamakta olup, grafiğin en fazla kullanıldığı alandır. 2. Bilgisayar Destekli Tasarım: Farklı branşlardaki mühendislerin ya da mühendislik hizmeti sunan şirketlerin çeşitli tasarımlar için zaman, işgücü ve para kazanımı amacıyla bilgisayar ve bilgisayar grafiklerini kullandıkları alanlardır. Örneğin, İnşaat mühendislerinin yapmak istedikleri evin, barajın, tünel ve köprülerin bilgisayarda çizilmesi (2 yada 3 boyut) ve oluşturulan grafiklere bağlı olarak çeşitli hesaplamaların yapılmasıdır. Mimarlar, bir evi kağıt üzerinde çizmekten ziyade 3 boyutlu grafik olarak çizip, istediği işlemleri yapmak için kullanırlar. Aynı şekilde makine, tekstil ve gıda mühendislerinin makine çizimlerini, endüstriyel tasarımcıların da ürün görüntülerini oluşturmalarında etkin bir şekilde kullanılmaktadır. Ayrıca, Elektronik mühendisleri tarafından elektronik devrelerin çizimi, sistem analistlerinin veri akış ve sistem akış şemalarının çizimi, iletişimcilerin ağ hiyerarşisi oluşturması ve gösterimi de bu grup içerisinde yer alır. 3. Görüntü İşleme (Image Processing) ve Görselleştirme (Visualization): Bu uygulama alanı, verinin en doğru bir şekilde bilgisayar tarafından algılanıp, anlaşılabilecek grafik formatlarına dönüştürülmesi ile ilgilenir. Örnek olarak fabrikadan gelen verilerin anlaşılır hale getirilmesi, uzaydan gelen verilerin ya da moleküler araştırma sonucunda

GRAFİK ve ANİMASYON TEMEL BİLGİLER 7 oluşan verilerin görselleştirilmesi, insan vücudundan alınan verilerin çeşitli tıp cihazlarına aktarılması ve görselleştirilmesi, vb. alanlarda kullanılır. 4. Eğitim ve Benzetim: Kişilerin öğrenmelerini hızlandırmak için bir sistemi modellemek ve benzetim haline dönüştürmek gibi uygulamalarda kullanılır. Hedef : Çözünürlük ve Piksel kavramı bilir 3. Çözünürlük ve Piksel Kavramı Piksel, bir bilgisayar tarafından ekranda görüntüyü resmi meydana getiren binlerce noktadan biridir. Diğer bir deyişle bir piksel, görüntünün en küçük birimidir. Çözünürlük, bir resmi boyut olarak tanımlamak için getirilen bir kavramdır ve ekrandaki resmin 1 inch lik uzunluğa (2,54 cm) kaç piksel sığdırılabileceğini ifade eder. Görüntü için yaygın olarak kullanılan birim, PPI/PPC dir. PPI (Pixels Per Inch), bir inch e düşen piksel sayısı olarak tanımlanırken, PPC (Pixels Per Centimeter) ise bir santimetreye düşen piksel sayısı olarak tanımlanır. Resmin PPC veya PPI ı ne kadar yüksekse, görüntü hassasiyeti de o derece yüksek olur. Fakat, PPC veya PPI arttıkça, resim dosyasının sabit diskte kapladığı alan da doğru orantılı olarak artacaktır. Ayrıca, monitör çözünürlüğünün hesaplanmasında da en iyi referans, PPI ve PPC'dir. Örneğin 22 inch bir ekranda, 1680*1050 modunda çalışan bir ekranın diagonalinde (çarpraz boy) en ve boy boyutunun çarpanının karekökü kadar (1328) piksel vardır. Bu durumda ekran çözünürlüğü, 1328/22=60 PPI'dir. Bir de DPI kavramı vardır. DPI (Dots Per Inch), baskı cihazlarının (yazıcı) çözünürlüğü için kullanılan bir terim olup, inch başına vurulan nokta sayısı ile ölçülür. Ortalama olarak bir görüntünün çözünürlüğü, baskı cihazının sahip olduğu çözünürlüğün 1/4 kadarı olabilir. Örneğin en son çalışma, 300 dpi çözünürlüğe sahip bir yazıcı ile basılacaksa, inch başına 75 piksel (300/4) görüntü çözünürlüğü yeterlidir. Hedef : Ekran Görüntülerinin nasıl oluştuğunu bilir 4. Renk Görüntüleri ve Piksel Derinliği Bilgisayarlardaki görüntüler RGB renk modeli olarak adlandırırılan 3 saf rengin (Kırmızı, Yeşil, Mavi) beyaz ışığa katılması ile oluşur (Şekil 1).

8 Şekil 1. Görüntü ekranları için RGB renk modeli İşletim sistemi, her pikselin rengini ekranda kontrol edebilmek için belleğinde her piksele karşılık bir yer ayırır. Ekran görüntüsü için ayrılan bu belleğe, "video RAM" ya da "VRAM" denir. En basit formuyla siyah beyaz ekranlarda, her piksel için bellekte bir bit yer ayrılır, bu her piksel için ayrılan bit sayısı olarak tanımlanır. Her bir bit bellek ya pozitif ya da negatif (0 yada 1) olabileceğinden, bir bitlik görüntü sistemi, her piksel için siyah yada beyaz olmak üzere sadece 2 rengi görüntüleyebilir (Şekil 2). Şekil 2. Bir bitlik siyah beyaz görüntü Eğer her piksel için 8 bitlik bir bellek ayrılmışsa, bu görüntünün alabileceği renk sayısı, 8 bit'in alabileceği olasılık olan 2 8 =256 ile sınırlıdır. Bu, her piksel renginin 256 renkten biri olabileceğini ifade eder. Bu tür ekran görüntülerine, "8-bitlik" ya da "256-renk" denir. Şekil 3 te de görüldüğü gibi, 1 piksel için tahsis edilmiş olan bellek alanı, 1 bayttır. Buna bağlı olarak, 2x2 piksel boyutunda (toplam 4 piksel) ve 8 bit piksel derinliğindeki bir görüntü 4 bayt belleğe gereksinim duyacaktır.

GRAFİK ve ANİMASYON TEMEL BİLGİLER 9 Şekil 3. 8 Bit yada 256 Renk Görüntüsü Bir piksel için 24 bit tahsis edilen resim türüne RGB denir. RGB resmi, Kırmızı (Red), Yeşil (Green) ve Mavi (Blue) renklerinin farklı tonlarda karışımından oluşturulur. Renklerin gerçek yaşamdaki gibi görünmesi amacıyla Yeşil, Kırmızı ve Mavi renkler için birer bayt (8 bit) bellek ayrılır. 24 bitlik görüntünün temsil edebildiği renk sayısı, 2 24 = 16.777.216 (16.7 Milyon) renktir. Böyle bir görüntüde 2x2 piksel boyundaki bir görüntü, 96 bayt bellek alanına gereksinim duyar. Şekil 4. 24 bit gerçek renk görüntüsü

10 Bir piksele tahsis edilen bit değerlerine bağlı olarak desteklenen renk sayısı, Tablo- 1 de sunulmuştur. Tablo 1. Piksel derinliğine bağlı olarak desteklenen renk sayısı Piksel Derinliği Piksel başına Bayt sayısı Matematiksel İfade Renk Sayısı 1 Bit 1/8 Bayt 2 1 İki Renk; Siyah/Beyaz 8 Bit 1 Bayt 2 8 256 Renk veya Gri Skala 16 Bit 2 Bayt 2 16 65.536 Renk, Çoklu Renk 24 Bit 3 Bayt 2 24 16.777.216 Renk, RGB Gerçek Renk 32 Bit 4 Bayt 2 32 4.3 Milyar Gerçek Renk Örnek: 1680*1050 piksellik bir ekran görüntüsünün 32 BIT renk derinliği olduğuna göre ne kadarlık bir ekran belleğine ihtiyaç vardır? Böyle bir ekran modu için: 1680*1050*4 Bayt = 7056000 Bayt = 7 MB gereklidir. Sıra Sizde 1024*768 piksellik bir ekran görüntüsünün 24 BIT renk derinliği olduğuna göre ne kadarlık bir ekran belleğine ihitiyaç vardır? Bir Windows işletim sisteminde ekran çözünürlüğü ve piksel derinliğini Denetim Masası > Ekran Çözünürlüğü penceresi açılarak görülebilir. Bilgisayar monitörleri genellikle 32 BIT lık renk derinliği ile çalışırlar. Bunlardan 24 BIT i RGB renkleri için geriye kalan 8 BIT ise saydam renkleri göstermek içindir. Şekil 5. Windows ta ekran çözünürlüğü ve piksel derinliği ayarı

GRAFİK ve ANİMASYON TEMEL BİLGİLER 11 Hedef : Grafik formatlarını bilir 5. Resim Formatları Bitmap ve vektör olarak iki dijital grafik tipi vardır. Her iki grafik tipinin de bir takım avantaj ve dezavantajları vardır. Grafikler üzerinde etkili işlem yapabilmek için bu tipler arasındaki farkı anlamak önemlidir. Bitmap grafikleri piksel(pixel) tabanlı grafiklerdir. Bu tip grafiklerin en büyük dezavantajları, boyutları değiştirildiğinde görüntü kalitesinin de düşmesidir. Bir grafik düzenleme programında açılan bir bitmap grafiği üzerinde yakınlaştırma(zoom) efekti uygulandığında, grafiği oluşturan piksellerin birer dikdörtgene benzediği görülecektir (Şekil 6). Şekil 6. Bir bitmap grafik üzerindeki bir bölgenin yakınlaştırılması ile pikseller görülmekte Vektör grafikleri tamamen matematiksel yöntemlerle tanımlanmış grafiklerdir. Vektör grafikleri bilgisayar programları tarafından birer nesne olarak algılanır. Uygulama programlarının bu tipteki grafikler üzerindeki düzenleme yetenekleri oldukça fazladır. Nesneler, geometrik olarak çizgi veya eğrilerle birbirine bağlanmış olan bir ızgara üzerine yerleştirilmiş noktalardan oluşmaktadır. Örneğin bir çember nesnesi, yarıçapı belli olan kapalı bir eğri kullanılarak elde edilir. Şekil 7.(a) da yarıçapı 3 birim olan bir çember görülmektedir. Vektör grafikleri üzerinde belli bir renkle doldurma, şekli bozma, boyut büyütme/küçültme, döndürme işlemleri rahatlıkla yapılabilmektedir. Şekil 7.(a) Şekil 7.(b) Şekil 7.(c) Şekil 7.(d) Şekil 7.(b) de çemberin bozulmuş hali, (c) de içi kırmızıyla doldurulmuş ve kenarlık rengi mavi yapılmış hali, (d) de ise bozulmuş ve döndürülmüş hali görünmektedir.

12 Vektör grafiklerin boyutları 20 kata kadar kayıpsız bir şekilde büyütülüp küçültülebilir. Vektör grafikleri karmaşık çizimler oluşturma çok zordur, daha çok basit şekillerin kombinasyonları kullanılır. Tablo 2. Bitmap ve Vektörel Grafiklerin Özellikleri Özellik Bitmap Grafikleri Vektör Grafikleri Boyutlandırma (Büyütme, Küçültme) Bozma (Resmi orantısız değiştirme) Görüntü kalitesi düşer. Resim tamamen bozulur. Görüntü kalitesi değişmez. İstenilen değişiklik yapılabilir. Dosya Boyutu Daha büyük Nispeten daha küçük Görüntü Kalitesi Kullanılan renklere bağlıdır. Renklerden bağımsızdır. Geometrik olmayan çizimler Rahatlıkla yapılabilir. Yapılması zordur. Kullanıldığı alanlar Web, Fotoğraflar, Kitaplar, v.s. Çoğunlukla animasyonlar Platformlar arası taşınabilirlik Daha kolay Nispeten daha zor 5.1. Grafik Dosya Formatları Grafik dosya formatları, grafik boyutlarını düşürmek amacıyla geliştirilen matematiksel algoritmalardır. Çeşitli amaçlara yönelik olarak kullanılan birçok grafik dosya formatı vardır. 5.1.1. BMP(Bitmap) PC platformunda kullanılan standart bir dosya formatıdır. BMP basit bir dosya sistemi olduğundan yapısı gayet açıktır. BMP dosyaları her zaman RGB verilerini içerir. RGB verileri, ana renkler olan kırmızı, yeşil ve mavi ile bunlar arasında kalan diğer tüm renkleri matematiksel bir şekilde tanımlayan bilgilerdir. Bir BMP dosyası 1-bit (2 renk-siyah, beyaz), 4-bit(16 renk), 8-bit(256 renk), veya 24-bit(16,777,216 renk) olabilir. 5.1.2. GIF (Graphics Interchange Format) GIF, daha çok web üzerinde kullanılan resimler için uygun bir dosya formatıdır. Bir GIF resmi, 0-255 arasında istenilen sayıda renk içerebilir. GIF renk tablosundaki her renk, her değer 0 ile 255 arasında, RGB değerleri ile tanımlanmıştır. GIF dosya formatı iki şekilde oluşturulabilir: Normal ve Aşamalı(Interlaced). Aşamalı form, genellikle internet üzerinde yayımlanan belgelerde kullanılır. Bu formdaki GIF resmi hep birden değil, piksel piksel ekrana gelir. GIF dosya formatının hareketli şekli de vardır. Buna "Animated GIF" denir ve yine çoğunlukla internet üzerinde yayımlanan belgelerde kullanılır.

5.1.3. JPEG (Joint Photographic Experts Group) GRAFİK ve ANİMASYON TEMEL BİLGİLER 13 Sık kullanılan diğer bir resim formatı ise JPEG formatıdır. JPEG veya JPG formatının özelliği gerçek renk (24 bit) değerlerini içermesidir. Bu nedenle fotoğrafik yani doğal, fotoğraf gibi gerçek renkli görüntülerin gösterilmesinde kullanılır. JPG formatında, resmin kalitesinden bir miktar ödün verilerek sıkıştırma uygulanır. Daha çok gerçek renk uygulamalarında tercih edilen JPG formatında, bir resme 0 ile 100 arasındaki bir faktör değeriyle sıkıştırma yapılabilir, ama genellikle 5-95 arası değerler kullanılır. 5.1.4. PNG(Portable Network Graphics) Bu dosya formatı GIF' in daha gelişmiş bir versiyonu olarak kabul edilebilir. Web yayıncılığında kullanılan PNG, 24 bitlik saydam arka plan (transparency) ve kayıpsız sıkıştırma yöntemi gibi avantajlı özelliklere sahiptir PNG, GIF in kullandığı algoritmaya göre daha iyi sıkıştırma işlemine sahiptir. Bundan dolayı PNG formatında JPEG deki bilgi kaybı olmadan daha küçük bir dosya boyutu elde edilebilir. 5.1.5. TIFF(Tag Interchange File Format) Adobe Corporation tarafından geliştirilen bir dosya formatıdır. Bu dosya formatı birçok uygulama programı tarafından ve bütün platformlar tarafından desteklenmektedir. Dosya uzantısı.tif 'tir. TIFF gerçek renk RGB, CMYK, Lab gibi neredeyse tüm renk görüntülerini destekler. Bu avantajlara karşılık TIFF formatı biraz kompleks olduğundan genellikle bir çok TIFF dosyası, GIF veya JPEG dosyalarından daha büyük boyuta sahip olur. Bundan dolayı, çok renkle uğraştığınızda zaman önemli, fakat dosya boyutu çok önemli değilse, TIFF formatı kullanmanızda fayda vardır. Bu dosya formatlarının dışında,.ico(icon),.pcd(photo CD),.TGA(Targa),.TTF(True Type Font),.WMF(Windows Meta File),.PSD(Photoshop Document),.PSP(Paint Shop Pro),.EPS(Extended Post Script), gibi tanınmış grafik dosya formatları vardır.

14 Hedef : Hexadecimal (Onaltılık) Renk Kodlamasını yapabilir 6. Hexadecimal (Onaltılık) Renk Kodlaması RGB renklerinin kırmızı, yeşil ve mavi olmak üzere herbirinin 0 ile 255 arasında değer aldığından bahsetmiştik. Bu sayı aralığı 10 luk sayı sistemindedir. Örneğin kırmızı tonu 140, yeşil tonu 50, mavi tonu 212 (RGB:140 50 212)olan renk aşağıda görülen renk olacaktır. Ancak grafik uygulamalarında bu renk değerleri onaltılık (hexadecimal) sayı sisteminde de gösterilmeleri yaygındır. 16'lik sayı sisteminde de toplam 16 rakam var bunlar. 0 1 2 3 4 5 6 7 8 9 A B C D E F Burada rakamlar 9 dan sonra harfler ile ifade edilirler. Sırayla A=10, B=11, C=12, D=13, E=14 ve F=15 dir. Bir RGB renk değerinin onaltılık sayı sisteminde nasıl ifade edileceğine gelecek olursak. Örnek: Yukarıda örneğini verdiğimiz renkte kırmızının değeri 140 tı, bunun onaltılık sistemdeki karşılığının ne olduğunu hesaplamak için bu sayıyı 16 ya bölmek ve bölüm sonucunda çıkan sayı ile kalan sayıya bakmamız gerekir. Bölüm sonucu 8 ve kalan 12 dir. 12 sayısı onaltılık sayı sisteminde C ye karşılık geldiği için RGB renk kodlamasında 140 olan sayı onaltılık sistemde 8C olmaktadır.

GRAFİK ve ANİMASYON TEMEL BİLGİLER 15 Yeşil için verilen 50 yine onaltılık sayı sisteminde 32, Mavi için verilen 212 ise D4 e karşılık gelmektedir. Bu durumda bu renk hexadecimal sistemde #8C32D4 olarak gösterilir. Not: Onaltılık renk kodlamasında sayıların başında # sembolü yer alır. Sıra Sizde 64 ve 198 sayılarının onaltılık sistemde kaç olduğunu siz hesaplayınız? Bazı renklerin onaltılık karşılığı aşağıda verilmiştir. #000000=black(siyah) #0000FF=blue(mavi) #008080=teal(koyu yesil) #00FFFF=aqua(turkuaz) #800080=purple(mor) yeşil) #808080=gray(gri) gri) #FF0000=red(kırmızı) pembe) #FFFF00=yellow(sari) #000080=navy(lacivert) #008000=green(yesil) #00FF00=lime(parlak yesil) #800000=maroon(visne çürügü) #808000=olive(zeytuni #C0C0C0=silver(gümüşî #FF00FF=fuchsia(parlak #FFFFFF=white(beyaz)

16 Tartışma Konuları 1. Baskı için hazırlayacağınız bir grafiğin hangi dosya formatında ve hangi çözünürlükte olması gerektiğini tartışınız 2. Dijital fotoğraf makinelerinin niçin JPEG formatında resim çektiklerini tartışınız. 3. GIF formatının JPEG e göre avantajlarının ne olduğunu tartışınız. 4. Vektörel grafikler hangi sektörde kullanılması gerektiğini tartışınız

GRAFİK ve ANİMASYON TEMEL BİLGİLER 17 Kaynakça Macromedia Fireworks 8 Kaynağından Eğitim, Medyasoft Yayınları