Bilişim Ders Notları
Dijital Sanat · 9. hafta · Dijital Tasarım Elemanları ve İlkeleri

Dijital Tasarım Araçları: Vektör ve Raster

Dijital Sanatlar · 9. hafta ders notu · DS.1.3.2

Öğrenme çıktıları
DS.1.3.2
  • Vektör ve raster görselleri karşılaştırır; büyütüldüklerinde ne olduğunu açıklar.
  • Çözünürlüğün piksel sayısıyla ilişkisini açıklar ve bir görselin çözünürlüğünü okur.
  • PNG, JPG, SVG ve GIF dosya biçimlerini kullanım amacına göre seçer.
  • Çizim, fotoğraf düzenleme ve şablonlu tasarım araçlarını (Krita, GIMP, Inkscape, Photopea, çevrim içi araçlar) tanır ve arayüz bölümlerini gösterir.
Bilgisayarsız sınıf alternatifi

Kareli kâğıt ve arayüz kartları

Bilgisayar yokken raster kavramı kareli kâğıtta piksel çizimiyle, vektör kavramı ise "noktaları birleştir" etkinliğiyle öğretilir: aynı çizim küçük ve büyük kâğıda noktalar ve talimatlarla yeniden çizilir, keskinlik bozulmaz. Program arayüzü öğretmenin büyük kâğıda çizdiği şemayla ve bölüm adı kartlarıyla tanıtılır.

Konu anlatımı

Önce konuyu aç, sonra sorulara dokun: cevap altında açılır. Soru işaretli kutulara dokununca cevap görünür.

01Vektör ve raster
?Raster görsel nedir?
Satır satır dizilmiş piksellerden oluşan görseldir. Fotoğraflar ve fırçayla yapılan dijital resimler rasterdir. Ayrıntılı renk geçişleri için çok uygundur ama büyütülünce kareler belirginleşir.
?Vektör görsel nedir?
Noktalar, çizgiler ve eğrilerin matematiksel olarak tanımlandığı görseldir. "Merkezi şurada, yarıçapı 100 olan kırmızı daire" gibi saklanır; bu yüzden istenildiği kadar büyütülse de keskin kalır.
?Hangisini ne zaman seçerim?
Logo, simge, yazı ve sade illüstrasyonlar için vektör; fotoğraf ve fırça dokulu resimler için raster tercih edilir.
Anahtar kavramlar: PikselRasterVektör
Asılgörsel × 8büyüt VektörRaster (piksel) Noktalar ve eğrilerle tanımlı;büyütünce keskin kalır. Piksellerden oluşur;büyütünce kareler görünür.
02Çözünürlük
?Çözünürlük nedir?
Bir görselin genişlik ve yükseklikte kaç pikselden oluştuğudur. 1920 × 1080 çözünürlük, yatayda 1920, dikeyde 1080 piksel demektir.
?Baskı için neden daha yüksek çözünürlük gerekir?
Kâğıda basılan görsel yakından bakılır ve her santimetreye daha çok piksel düşmesi gerekir. Ekranda iyi görünen küçük bir görsel, büyük afiş olarak basılınca bulanık çıkar.
8 × 864 piksel16 × 16256 piksel32 × 321024 piksel Piksel sayısı arttıkça ayrıntı ve netlik artarFull HD ekran: 1920 × 1080 ≈ 2 milyon piksel
03Dosya biçimleri

Soru işaretli kutulara dokun.

.pngSaydam zeminKayıpsızLogo, çizim.jpgFotoğraf içinKayıplı, küçükSaydamlık yok.svg<circle r="32"/>Vektör biçimHep keskinLogo, simge.gifkare 1 · 2 · 3HareketliEn çok 256 renkKısa animasyon
BiçimTürüEn uygun kullanım
PNG
JPG
SVG
GIF
04Raster çizim programı
Çizim programı (raster) · resim1.png DosyaDüzenGörüntüKatmanSeçFiltreYardım FırçaBoyut: 24 pxOpaklık: %80Sertlik: %60 T Renk Ön / arka renk Katmanlar Fırça iziDağlarArka plan + YeniSil 1920 × 1080 px · %50 yakınlaştırma
  1. 1Menü çubuğuDosya açma-kaydetme, katman, filtre gibi bütün komutlar burada.Dokun, adını gör
  2. 2Araç seçenekleriSeçili aracın boyutu, opaklığı ve sertliği ayarlanır.Dokun, adını gör
  3. 3Araç kutusuFırça, silgi, boya kovası, seçim, metin, damlalık ve taşıma araçları.Dokun, adını gör
  4. 4TuvalÇizimi yaptığımız alan; 1920 × 1080 piksel boyutunda.Dokun, adını gör
  5. 5Renk paneliÖn plan rengi fırçanın rengidir; altta hazır renk örnekleri var.Dokun, adını gör
  6. 6Katmanlar paneliHer parça ayrı katmanda; göz simgesiyle gizlenip gösterilir.Dokun, adını gör
  7. 7Durum çubuğuTuval boyutu ve yakınlaştırma oranı.Dokun, adını gör

Numaralara dokun.

?Krita, GIMP ve Photopea arasındaki fark nedir?
Üçü de raster çalışır. Krita dijital resim ve illüstrasyon için fırça odaklıdır; GIMP fotoğraf düzenleme ve rötuşta güçlüdür; Photopea ise kurulum gerektirmeden tarayıcıda çalışan bir görüntü düzenleyicidir.
?Inkscape ne işe yarar?
Ücretsiz bir vektör çizim programıdır. Logo, simge, afiş ve çizgisel illüstrasyonlar hazırlanır; çalışmalar SVG olarak kaydedilir.
05Şablonlu çevrim içi tasarım araçları
Şablonlu tasarım aracı (web) ŞablonÖgeMetinYükleProje Afiş ara… Yazı tipi ▾36AKT Paylaşİndir SPORŞENLİĞİ 3 Haziran · Okul bahçesiBayındır Ortaokulu%48
  1. 1Kenar menüsüŞablon, öge, metin, yükleme ve projeler arasında geçiş yapılır.Dokun, adını gör
  2. 2ŞablonlarHazır tasarımlar; seçilen şablon kendi içeriğimizle değiştirilir.Dokun, adını gör
  3. 3Metin araç çubuğuYazı tipi, boyut, renk, kalın-italik ve hizalama ayarları.Dokun, adını gör
  4. 4Paylaş ve İndirTasarım bağlantıyla paylaşılır ya da PNG, JPG, PDF olarak indirilir.Dokun, adını gör
  5. 5Seçili metin kutusuKöşelerdeki tutamaçlarla boyutlandırılır, sürüklenerek taşınır.Dokun, adını gör
  6. 6Tasarım sayfasıAfişin kendisi; yalnızca bu alan dışa aktarılır.Dokun, adını gör

Numaralara dokun.

?Şablonlu tasarım araçları ne sağlar?
Hazır afiş, sunu ve sosyal medya şablonlarını tarayıcıda düzenlemeyi sağlar. Metin, renk ve görseller sürükle-bırakla değiştirilir; tasarım PNG, JPG ya da PDF olarak indirilir.
?Hazır şablon kullanmak tasarımı benim yapar mı?
Şablonu kendi fikrin, kendi çizimlerin ve kendi renk seçimlerinle değiştirdikçe evet. Yalnızca yazıyı değiştirip bırakırsan tasarım büyük ölçüde şablonu hazırlayan kişinindir.
Biliyor muydun?

Çevrim içi araçlarda hesap açmak gerekebilir; okulda öğretmeninin hesabıyla, evde bir yetişkinle birlikte kullan.

Ders akışı

40 dakikalık bir ders saati için planlandı. Adımın başlığına dokun, ayrıntılar açılsın.

5dk

Isınma: Büyüteç testi

Tahtada bir logoyu ve bir fotoğrafı sırayla çok büyüt. Öğrencilere hangisinin bozulduğunu, hangisinin keskin kaldığını sor. Fotoğraftaki küçük karelerin adının piksel olduğunu söyle.

Asılgörsel × 8büyüt VektörRaster (piksel) Noktalar ve eğrilerle tanımlı;büyütünce keskin kalır. Piksellerden oluşur;büyütünce kareler görünür.
10dk

Keşif: Vektör, raster, çözünürlük

Vektör görselin noktalar ve eğrilerden, raster görselin piksellerden oluştuğunu açıkla. Çözünürlük görselinde 8 × 8, 16 × 16 ve 32 × 32 hâllerini karşılaştır; piksel sayısını birlikte hesaplayın (8 × 8 = 64). Full HD ekranın yaklaşık 2 milyon piksel olduğunu söyle.

8 × 864 piksel16 × 16256 piksel32 × 321024 piksel Piksel sayısı arttıkça ayrıntı ve netlik artarFull HD ekran: 1920 × 1080 ≈ 2 milyon piksel
7dk

Keşif: Dosya biçimleri

Dört dosya biçimini kartlarla tanıt. "Okul logosu, tatil fotoğrafı, saydam arka planlı çıkartma, kısa hareketli ikon" örneklerinin hangi biçimde kaydedilmesi gerektiğini sınıfa sor.

.pngSaydam zeminKayıpsızLogo, çizim.jpgFotoğraf içinKayıplı, küçükSaydamlık yok.svg<circle r="32"/>Vektör biçimHep keskinLogo, simge.gifkare 1 · 2 · 3HareketliEn çok 256 renkKısa animasyon
10dk

Keşif: Araçları tanıyalım (öğretmen gösterir)

Bir raster çizim programının ve bir şablonlu tasarım aracının arayüzünü numaralarla incele. Mümkünse tarayıcıda çevrim içi bir editör açıp fırça boyutunu ve opaklığı değiştirerek tahtada kısa bir çizim yap. Öğrenciler sırayla gelip menü, araç kutusu, tuval ve katmanlar panelini gösterir.

Çizim programı (raster) · resim1.png DosyaDüzenGörüntüKatmanSeçFiltreYardım FırçaBoyut: 24 pxOpaklık: %80Sertlik: %60 T Renk Ön / arka renk Katmanlar Fırça iziDağlarArka plan + YeniSil 1920 × 1080 px · %50 yakınlaştırma
8dk

Etkinlik: Kareli kâğıtta piksel

Öğrenciler kareli kâğıtta 10 × 10 karelik bir alana basit bir piksel çizimi (kalp, yaprak, yıldız) yapar. Sonra aynı çizimi 5 × 5 kareye sığdırmaya çalışır ve ayrıntının nasıl kaybolduğunu görür. Bitirenler çizimlerinin kaç pikselden oluştuğunu yazar.

Doğru mu, yanlış mı?

Dersin sonunda tahtada ya da öğrencinin kendi cihazında çözülür.

1. Raster görseller piksel denen küçük karelerden oluşur.

Cevabı gösterDoğru

2. Vektör görseller büyütüldüğünde pikseller görünür ve görüntü bulanıklaşır.

Cevabı gösterYanlış · Vektör görseller matematiksel noktalar ve eğrilerle tanımlanır; büyütülünce yeniden hesaplanır ve keskin kalır. Bulanıklaşan raster görsellerdir.

3. Logolar ve simgeler için vektör biçim (SVG) çok uygundur.

Cevabı gösterDoğru

4. Aynı görselde piksel sayısı arttıkça ayrıntı da artar.

Cevabı gösterDoğru

5. JPG biçimi saydam arka planı destekler.

Cevabı gösterYanlış · JPG saydamlığı desteklemez; saydam arka plan gereken çıkartma ve logolar PNG ya da SVG olarak kaydedilir.

6. GIF biçimi kısa hareketli görüntüler için kullanılabilir.

Cevabı gösterDoğru

7. 1920 × 1080 çözünürlüklü bir ekran yaklaşık 2 milyon pikselden oluşur.

Cevabı gösterDoğru · 1920 × 1080 = 2.073.600 piksel.

8. Inkscape bir vektör çizim programıdır.

Cevabı gösterDoğru

9. Küçük bir fotoğrafı büyütmek ona yeni ayrıntılar ekler.

Cevabı gösterYanlış · Program yalnızca var olan pikselleri büyütür ya da tahmin ederek doldurur; gerçek yeni ayrıntı eklenmez, görüntü bulanıklaşır.

10. Krita ve GIMP ücretsiz kullanılabilen programlardır.

Cevabı gösterDoğru
← Önceki haftaDoku, Değer, Perspektif ve Tasarım İlkeleri Sonraki hafta →Görsel Düzenleme ve Afiş Tasarımı

9. hafta günlük planı

2026–2027 1. düzey Seçmeli Dijital Sanatlar dersi 9. hafta günlük planı. Okul ve öğretmen bilgileriyle doldurulmuş Word dosyası için etkileşimli sürümde Evraklar › Günlük planlar bölümünü kullanın.

2026–2027 EĞİTİM ÖĞRETİM YILI …………………………

SEÇMELİ DİJİTAL SANATLAR 1. SEVİYE DERSİ GÜNLÜK PLANI · 9. HAFTA

BÖLÜM I · DERSE İLİŞKİN BİLGİLER
DersSeçmeli Dijital Sanatlar 1. SeviyeSınıf / Düzey1. düzey (seçmeli)
Hafta / Tarih9. Hafta · 9–13 Kasım (KASIM)Süre2 ders saati (40' + 40')
TemaDİJİTAL TASARIM ELEMANLARI VE İLKELERİ
KonuDijital Tasarım Araçları: Vektör ve Raster
BÖLÜM II · ÖĞRENME ÇIKTILARI VE KAYNAKLAR
Öğrenme çıktısıDS.1.3.2 Görsel düzenleme sürecinde dijital tasarım araçlarından yararlanabilme
Süreç bileşenleri
  • Vektör ve raster görselleri karşılaştırır; büyütüldüklerinde ne olduğunu açıklar.
  • Çözünürlüğün piksel sayısıyla ilişkisini açıklar ve bir görselin çözünürlüğünü okur.
  • PNG, JPG, SVG ve GIF dosya biçimlerini kullanım amacına göre seçer.
  • Çizim, fotoğraf düzenleme ve şablonlu tasarım araçlarını (Krita, GIMP, Inkscape, Photopea, çevrim içi araçlar) tanır ve arayüz bölümlerini gösterir.
Araç, gereç ve kaynaklarAkıllı tahta (öğretmen gösterimi için bir çizim programı ya da tarayıcıda çevrim içi editör) · Kareli kâğıt (piksel çizimi için) · Renkli kalemler · Araç ve dosya biçimi eşleştirme kartları · Bilişim Ders Notları ders sayfası, sunum ve etkinlikler (bilisimdersnotlari.com)
BÖLÜM III · ÖĞRENME-ÖĞRETME UYGULAMALARI
SüreEtkinlik akışı
1. ders
5 dk		Isınma: Büyüteç testi
Tahtada bir logoyu ve bir fotoğrafı sırayla çok büyüt. Öğrencilere hangisinin bozulduğunu, hangisinin keskin kaldığını sor. Fotoğraftaki küçük karelerin adının piksel olduğunu söyle.
1. ders
10 dk		Keşif: Vektör, raster, çözünürlük
Vektör görselin noktalar ve eğrilerden, raster görselin piksellerden oluştuğunu açıkla. Çözünürlük görselinde 8 × 8, 16 × 16 ve 32 × 32 hâllerini karşılaştır; piksel sayısını birlikte hesaplayın (8 × 8 = 64). Full HD ekranın yaklaşık 2 milyon piksel olduğunu söyle.
1. ders
7 dk		Keşif: Dosya biçimleri
Dört dosya biçimini kartlarla tanıt. "Okul logosu, tatil fotoğrafı, saydam arka planlı çıkartma, kısa hareketli ikon" örneklerinin hangi biçimde kaydedilmesi gerektiğini sınıfa sor.
1. ders
10 dk		Keşif: Araçları tanıyalım (öğretmen gösterir)
Bir raster çizim programının ve bir şablonlu tasarım aracının arayüzünü numaralarla incele. Mümkünse tarayıcıda çevrim içi bir editör açıp fırça boyutunu ve opaklığı değiştirerek tahtada kısa bir çizim yap. Öğrenciler sırayla gelip menü, araç kutusu, tuval ve katmanlar panelini gösterir.
1. ders
8 dk		Etkinlik: Kareli kâğıtta piksel
Öğrenciler kareli kâğıtta 10 × 10 karelik bir alana basit bir piksel çizimi (kalp, yaprak, yıldız) yapar. Sonra aynı çizimi 5 × 5 kareye sığdırmaya çalışır ve ayrıntının nasıl kaybolduğunu görür. Bitirenler çizimlerinin kaç pikselden oluştuğunu yazar.
2. ders
10 dk		Tekrar: Sunum
9 slaytlık ders sunumu akıllı tahtada açılır; önceki saatte öğrenilen kavramlar öğrencilerle birlikte tekrar edilir.
2. ders
20 dk		Uygulama: Etkinlikler
Akıllı tahtada etkileşimli etkinlikler oynanır: Vektör mü, raster mı?; Hangi dosya biçimi?; Programın bölümleri; Doğru mu, yanlış mı?; Kutuyu aç: konu soruları; Test yarışması: Dijital Tasarım Araçları: Vektör ve Raster.
2. ders
10 dk		Değerlendirme
10 soruluk doğru-yanlış testi tahtada birlikte çözülür; yanlış cevaplar gerekçeleriyle tartışılır.
FarklılaştırmaBilgisayarsız sınıf alternatifi: Kareli kâğıt ve arayüz kartları. Bilgisayar yokken raster kavramı kareli kâğıtta piksel çizimiyle, vektör kavramı ise "noktaları birleştir" etkinliğiyle öğretilir: aynı çizim küçük ve büyük kâğıda noktalar ve talimatlarla yeniden çizilir, keskinlik bozulmaz. Program arayüzü öğretmenin büyük kâğıda çizdiği şemayla ve bölüm adı kartlarıyla tanıtılır.
BÖLÜM IV · ÖLÇME VE DEĞERLENDİRME
Ölçme araçlarıKontrol listesi, dereceli puanlama anahtarı, öz ve akran değerlendirme
Doğru-yanlış soruları
  1. Raster görseller piksel denen küçük karelerden oluşur. (D)
  2. Vektör görseller büyütüldüğünde pikseller görünür ve görüntü bulanıklaşır. (Y)
  3. Logolar ve simgeler için vektör biçim (SVG) çok uygundur. (D)
  4. Aynı görselde piksel sayısı arttıkça ayrıntı da artar. (D)
  5. JPG biçimi saydam arka planı destekler. (Y)
  6. GIF biçimi kısa hareketli görüntüler için kullanılabilir. (D)
  7. 1920 × 1080 çözünürlüklü bir ekran yaklaşık 2 milyon pikselden oluşur. (D)
  8. Inkscape bir vektör çizim programıdır. (D)
  9. Küçük bir fotoğrafı büyütmek ona yeni ayrıntılar ekler. (Y)
  10. Krita ve GIMP ücretsiz kullanılabilen programlardır. (D)
Belirli gün ve haftalar10 Kasım Atatürk'ü Anma Günü ve Atatürk Haftası
Dersin uygulanmasına ilişkin açıklamalarOkulda bilgisayar olmadığı için bu derste program arayüzleri yalnızca öğretmen gösterimiyle ve numaralı görsellerle tanıtılır. Tarayıcıda çalışan bir editör (ör. Photopea) kurulum gerektirmediği için akıllı tahtada hızlı bir gösterim sağlar.
…………………………Bilişim Teknolojileri Öğretmeni
UYGUNDUR09.11.2026…………………………Okul Müdürü
Bu dersi sınıfta işleyinSunum, tahta modu ve etkileşimli etkinlikler için.
Etkileşimli sürümü aç →