GRAFIK TEMELLERI Grafik ve Animasyon Coşkun CANLI Bilişim Teknolojileri Öğretmeni

Grafik Nedir? Grafik, görüntünün bir yüzey üzerinde temsil edilmesidir. Fotoğraflar, çizimler, diyagramlar, haritalar ve diğer resimler birer grafiktir. 2

Grafik Tasarım Alanları Tipografi Logo Tasarımı İllüstrasyon Karikatür Serigrafi Gravür, Klişe, Trio Afiş, Bilboard, Branda, Pano Antedli, Zarf, Kartvizit, Fatura Seri Tasarım Dizgi Kitap Tasarımı Otokoku, Pad, Magnet, Cepli Dosya, Bıçaklı Tasarım Ambalaj Tasarımı Stand Tasarımı Web Tasarımı Arayüz Tasarımı İnteraktif Tasarım Animasyon 3D Tasarım Fotoğrafçılık Kurumsal kimlik Tasarımı 3

Web Grafikleri Web grafik tasarımı, grafik tasarım alanı ile yakın ilişkili bir konu olmasının yanı sıra kendi içerisinde ayrı bir dal olarak çok geniş bir alandır. Henüz standartlaşmamış olmakla birlikte kendi kurallarını içinde barındırır. 4

Web Standartları Web standartları, değişik web cihazlarının, web içinde sunulan bilgileri ayni şekilde kullanıcıya göstermesine yardim eden bir takım teknolojileri toplamına verilen isim. Web dünyasının ana dilleri HTML (Hypertext Markup Language) ve CSS (Cascading StyleSheets). Bu standartlar web tasarımcılarına bir sayfanın nasıl kodlanması gerektiğini göstermenin yani sıra İnternet tarayıcılarına bir sayfanın kullanıcıya nasıl görünmesi gerektiğini söyleyen bir takım kuralları içinde barındırıyor. World Wide Web Consortium (W3C), Web ile ilgili tüm alanlarda araştırmaları yöneten ve standartları geliştiren ticari kurumlar ve eğitim kurumlarının konsorsiyumudur. 5

Sayısal (dijital) Görüntü Güneş ışığı içerisinde sonsuz sayıda renk olduğu kabul edilir. Bilgisayarlarda tüm verilerin sayısal olarak ifade edilmeleri gerektiğinden tabiattaki renklerinde sayısallaştırılması gerekir. Tayf(spectrum) üzerinde belli bir aralık eşit parçalara bölünerek her parçaya bir numara verilir. İstenilen rengi belirtmek için numarası kullanılır. Buna örnekleme denir. Sayısal ifadelerden oluşan bilgisayar ortamına aktarılabilen grafik bilgisine dijital ya da sayısal grafik denir. 6

Piksel (pixel) Tüm sayısal görüntülerin bağımsız renk değeri taşıyabilen en küçük birimine piksel denir. İngilizce'de resim parçası anlamına gelen "picture element" birleşik kelimesinden çıkarılmıştır. Piksel terimi Sensör (Resmi veya Grafiği görüp dijital bilgiye çeviren aygıt) ve Ekran (Dijital bilgiyi gözle görebileceğimiz şekle getiren aygıt) olarak iki ana aygıtın en temel parçasıdır. 7

Piksel Pikseller kare şeklindedir ve görüntünün en küçük birimidir. Sayısal görüntüler yana yana gelen piksellerden oluşur. Yandaki görüntü, 16 kat büyütüldüğünde pikseller ayırt edilebilir. Her piksel kare biçimindedir ve her pikselde sadece 1 renk vardır. 8

Piksel Bitmap (piksel tabanlı) resim programları, ölçü birimi olarak piksel kullanırlar. Grafiğin ölçüleri yatayda ve dikeydeki piksel sayısı olarak belirtilir. (Örn. 800x600) Piksel yoğunluğu arttırılırsa görüntü netleşir. Ancak dosya büyüklüğü artar. Piksellerin büyüklükleri sabit değildir. Örneğin: 5 cm'deki piksel sayısı 10 denildiğinde pikselin boyutu 5 mm’dir. 5 cm'deki piksel sayısı 20 denildiğinde pikselin boyutu 2.5 mm’dir. 9

Piksel Bir sayısal grafik üzerinde her pikselin bir adresi vardır. X ve Y koordinatlarından oluşan bu adres iki boyutlu bir matris üzerinde pikselin konumunu belirtir. Sayısal bir grafik yan yana ve alt alta dizilen piksellerin koordinat bilgileri ve her bir pikselin renk değerinden oluşur. 10

Nokta (Alt Piksel) Her piksel kırmızı, yeşil ve mavi renkleri temsil eden üç noktadan oluşur. Piksellerden oluşan bir grafiğe çok yakından bakıldığında noktalar ayırt edilebilir. 11

Nokta (Alt Piksel) Bir pikselin gösterebileceği diğer tüm renkler Toplamsal renk modeline göre(RGB), bu üç noktanın farklı yoğunluklardaki durumlarının bir arada gösterilmesiyle elde edilir. 12

Çözünürlük Grafiğin en ve boy ölçülerinin piksel birimi ile ifade edilmesidir. Örneğin 600x400, 600px genişlik ve 400px yüksekliğinde bir grafik anlamına gelir. Bu iki değeri çarparsak; sayısı grafiği oluşturan toplam piksel sayısını verir. 13

PPI (Piksel Yoğunluğu) Birim alandaki piksel sayısı, «Piksel Yoğunluğu» olarak adlandırılır. «Pixel Per Inch» (inç karedeki piksel sayısı) PPI ya da pixel/inch ile ölçülür. Piksel yoğunluğu arttıkça grafik netleşir. 14

Renk Derinliği (color depth) 15

RGB Renklerinin Temsili Web grafiklerinde temel olarak RGB(toplamsal) renk modeli kullanılır. RGB modelinde renk bilgisi sayısallaştırılırken; kırmızı, yeşil ve mavi değerleri ayrı ayrı örneklenir. Varsayılan olarak 24 bit renk derinliği kullanılır. Kırmızı: 8 bit (256 farklı ton) Yeşil: 8 bit (256 farklı ton) Mavi: 8 bit (256 farklı ton) Toplam: 24 bit (1,677,7216 farklı renk) 16

RGB Renklerinin Temsili K: 0, Y: 102, M : 255 İkilik sayı sisteminde: – – Buradan onaltılık sayı sistemine çevrilir: 00 – 66 – ff Sonuçta #0066ff şeklinde belirtilir. Bu ifadedeki ilk iki rakam kırmızı tonları Sonraki iki rakam yeşil tonları En son iki rakam da mavi tonları gösterir. Bu ifadedeki ilk iki rakam kırmızı tonları Sonraki iki rakam yeşil tonları En son iki rakam da mavi tonları gösterir. 17

Bitmap Grafikleri Görüntü bilgisini sayısal bir ortamda saklamak için, görüntüyü oluşturan her pikselin renk değeri ve grafik üzerindeki konum bilgisine sahip olmak gerekir. Bir bitmap grafik dosyası grafiğin ayrı ayrı her pikselinin konumunun ve renk değerinin kaydedilmesiyle oluşturulur. 18

Bitmap Grafikleri Bu nedenle bitmap grafiklerine «Piksel Tabanlı» grafik denir. Her piksel ayrı ayrı kaydedileceği için grafik çözünürlüğü arttıkça, diskte kapladığı alan da artar. Özellikle web uygulamalarında çok büyük boyutlu dosyalarla çalışmak işleri zorlaştırabilir. 19

Bitmap Grafikleri Bitmap grafiklerini oluşturan piksellerin belli bir boyutu yoktur. Grafiğin ebatları artırılırsa, grafiği oluşturan pikseller de büyür ve piksel yoğunluğu azalır. Bu da grafiğin görüntü kalitesini ciddi ölçüde düşürür. 20

Bitmap Grafikleri Fotoğraf Makineleri ve kameralar görüntüleri bitmap tekniğiyle kaydeder. Genelde gerçek tabiat görüntüleri bitmap türündedir. Ancak her türlü görüntüyü bitmap tekniği ile kaydetmek mümkündür. 21

Vektör Grafikleri Vektör grafikleri, vektör adı verilen ve görüntüyü geometrik özelliklerine göre tanımlayan çizgilerden ve eğrilerden oluşur. 22

Vektör Grafikleri Bitmap grafiklerinin aksine, vektör grafikleri piksellerle ifade edilmez. 23 Geometrik bir çizimin, boyutları ve düzlem üzerindeki konumu biliniyorsa, bu bilgi matematiksel olarak belirtilebilir. Her bir piksel için konum ve renk bilgisi saklamaktansa çizimi ifade eden matematiksel bir denklemi saklamak daha mantıklıdır. Bu denklem daha sonra çizimi tekrar oluşturmak için kullanılabilir.

Vektör Grafikleri Vektör grafiği, bir matematik denklemidir. Grafiğin boyutları değiştirildiğinde, denklemin sadece katsayıları değişir. Grafik, bitmap grafiğinin aksine istenildiği kadar büyütülüp küçültülebilir. Görüntü kalitesi asla bozulmayacaktır. 24

Vektör Grafikleri Vektör grafikleri ise bilgisayar ortamında oluşturulan geometrik çizimlerdir. Gerçek tabiat görüntülerinin vektörel grafiklerle temsil edilmesi zordur. 25

Vektör Grafikleri Geometrik çizimler bitmap formatıyla da temsil edilebilmesine rağmen, vektör formatı daha daha kullanışlıdır. 26

- SON - 27