Grafik Temelleri - files.eba.gov.tr

GRAFIK TEMELLERI
Grafik ve Animasyon
Coşkun CANLI
Bilişim Teknolojileri Öğretmeni
2
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.
3
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ı
4
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.
5
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.
6
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.
7
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.
8
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.
9
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.
10
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.
11
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.
12
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.
13
Çö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.
14
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.
15
Renk Derinliği (color depth)
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,
82 = 256
farklı renk kullanılabilir.
Bu bilgi bilgisayar belleğinde 8 bit yer kaplar.
16
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ı
Yeşil
Mavi
: 8 bit (256 farklı ton)
: 8 bit (256 farklı ton)
: 8 bit (256 farklı ton)
Toplam
: 24 bit (1,677,7216 farklı renk)
17
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 ş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.
18
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.
19
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.
20
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.
21
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.
22
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.
23
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.
24
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.
25
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.
26
Vektör Grafikleri
Geometrik çizimler bitmap formatıyla da temsil edilebilmesine rağmen,
vektör formatı daha daha kullanışlıdır.
27
- SON -