GRAFİK TEMELLERİ. Grafik ve Animasyon. Coşkun CANLI Bilişim Teknolojileri Öğretmeni

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.

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ı

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.

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.

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.

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.

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.

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.

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.

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.

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.

Çö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;

240000 sayısı grafiği oluşturan toplam piksel sayısını verir.

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.

Renk Derinliği

Bir pikselde gösterilebilecek farklı renklerin sayısıdır.

Teknik olarak bir pikselin renk bilgisinin saklanacağı alan olarak tanımlanır.

Örneğin; renk derinliği 8 bit olan bir grafikte,

8 ² = 256

farklı renk kullanılabilir.

Bu bilgi bilgisayar belleğinde 8 bit yer kaplar.

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)

RGB Renklerinin Temsili

K: 0 , Y: 102 , M : 255 İkilik sayı sisteminde:

00000000 – 01100110 – 11111111

Buradan onaltılık sayı sistemine çevrilir:

00 – 66 – ff Sonuçta

#0066ff

Bu ifadedeki

ilk iki rakam kırmızı tonları Sonraki iki rakam yeşil tonları En son iki rakam da mavi tonları gösterir.

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.

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.

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.

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.

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.

Vektör Grafikleri

Bitmap grafiklerinin aksine, vektör grafikleri piksellerle ifade edilmez.

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.

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.

Vektör Grafikleri

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

- SON -