C4 - Soorten afbeeldingen

afbeeldingen
lgg
  • Je kan de grootte van een bitmap afbeelding berekenen
  • Je weet wanneer je een bitmap of vector afbeeldingen moet gebruiken
  • Je weet waarom er kleurmodellen zijn
lgg c4
1 / 40
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolvwoLeerjaar 4

Cette leçon contient 40 diapositives, avec quiz interactifs, diapositives de texte et 2 vidéos.

time-iconLa durée de la leçon est: 120 min

Éléments de cette leçon

afbeeldingen
lgg
  • Je kan de grootte van een bitmap afbeelding berekenen
  • Je weet wanneer je een bitmap of vector afbeeldingen moet gebruiken
  • Je weet waarom er kleurmodellen zijn
lgg c4

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Korte herhaling
kleurmodellen, hexadecimaal en Binair

Slide 2 - Diapositive

Cet élément n'a pas d'instructions




Hoe schrijf je deze kast op?
A
0x10
B
0x17
C
0x2
D
0x11

Slide 3 - Quiz

Cet élément n'a pas d'instructions

Hoeveel staat 0x11 gelijk aan in decimaal?

tip:     16^0 = 1 , 16^1=16, 16^2=256
A
11
B
16
C
17
D
10

Slide 4 - Quiz

Cet élément n'a pas d'instructions

hoe schrijf je het decimale getal 10
om in binair?

tip: 2^0 = 1 , 2^1=2, 2^2=4, 2^3 = 8
A
Ob1111
B
0b1010
C
0b0101
D
Ob10

Slide 5 - Quiz

Cet élément n'a pas d'instructions

wat weten jullie nog over
kleurmodellen?

Slide 6 - Carte mentale

Cet élément n'a pas d'instructions

Waar staat RGB voor?
A
Rood, Groen, Blauw
B
Rood, Geel, Zwart
C
Rood, Geel, Blauw
D
Rood, Groen, Zwart

Slide 7 - Quiz

Cet élément n'a pas d'instructions

Welke kleur krijg je bij (255, 255, 255)
RGB?
A
Wit
B
Zwart
C
Grijs
D
Oranje

Slide 8 - Quiz

Cet élément n'a pas d'instructions

Waar staat CMYK voor?

Slide 9 - Question ouverte

Cet élément n'a pas d'instructions

Kleurmodellen
RGB: Rood, Groen, Blauw. Wordt gebruikt voor schermen
CMYK: Cyaan, Magenta, Yellow, blacK. Wordt gebruikt bij printen
Bij het "mengen" van alle kleuren krijg je wit
Bij het "mengen" van alle kleuren krijg je zwart

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

In deze kleurenmap zie je dat RGB en CMYK niet hetzelfde oppervlak beslaan. Dat betekent dat ze niet allemaal dezelfde kleuren bevatten.

Met RGB kan je veel intensere kleuren rood, groen en blauw/paars krijgen.
Deze kleur zit wel in CMYK maar niet in RGB
Deze kleur zit niet in CMYK maar wel in RGB
Infrarood?
Ultraviolet?

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

CSS kleurcodes
Als we met html en css gaan werken, gaan we werken met kleurcodes zoals deze:

#ff05ab

Daarin zitten eigenlijk drie kleurcodes verstopt: 
  • 2 voor rood: 0xff 
  • 2 voor geel: 0x05 
  • 2 voor blauw: 0xab

Slide 12 - Diapositive

1 hex = 4 bit
dus 6 x 4 = 24 bits 

Slide 13 - Vidéo

Cet élément n'a pas d'instructions

Digitale camera
lichtgevoelige sensor (electronic film)
Deze bootst het menselijk oog na.

In plaats van licht te reflecteren op film, 
stuurt de lichtgevoelige sensor elektrische signalen naar 
camera van hoeveel licht deze ontvangt.

Deze digitale signalen zijn makkelijk op te slaan

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Slide 15 - Diapositive

Een mooie foto! Maar als je inzoomt kan je de pixel zien.

Dat komt omdat dit een bitmap of rasterfoto is.
Raster afbeeldingen
Raster afbeeldingen zijn opgebouwd uit pixels en daarom ook altijd op basis van afmeting. Voor elke pixel wordt opgeslagen welke kleur zij moet hebben. Er zijn vele soorten raster afbeeldingen. Deze onderscheiding zich vooral door de manier hoe de kleuren worden opgeslagen. 

Bekende formaten zijn: bmp, jpeg, png en gif 

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Pixel - Picture x element
Die kleine puntjes waar een afbeelding uit is opgebouwd

  • "Een afbeelding bestaat uit 320x240 pixels"
  • "De resolutie van mijn scherm is 1920x1080 pixels"

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

Grootte van een bitmap afbeelding berekenen
In een bitmap worden de pixels in een matrix opgeslagen en één voor één getekend. Stel we hebben een HD afbeelding van 1920 x 1080 pixels. Dan begin je dus bij 1, 1 en eindigt bij 1920, 1080.

Op elk coördinaat wordt een kleurcode opgeslagen. Hoeveel kleuren worden opgeslagen is afhankelijk van de hoeveelheid bits die gebruikt worden. Zie het als een bakje met een bepaalde grootte; hoe groter het bakje, hoe meer mogelijke kleuren je kan gebruiken:

  • 16 bits => 2^16 =                 65536 kleuren (16^4)
  • 32 bits => 2^32 = 4,294,967,296 kleuren (16^8)

Dus: 1980 x 1080 =  2 miljoen pixels

2 miljoen x 16 bits = 32 miljoen

Maar een bit is geen byte


Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Opdracht
1. Zoek op internet de resolutie van de camera van je telefoon.
(MP = 1 miljoen. Dus 12 MP camera is 12 miljoen)

2. Moderne camera's hebben een pixel kleur limiet van 10-bits (bakje per pixel)
3. Bereken hoeveel bytes (dus niet bits) de afbeelding groot is


Bereken de grootte van een foto van je telefoon

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Hoeveel bytes is een afbeelding van jouw camera?

Slide 21 - Question ouverte

Cet élément n'a pas d'instructions

in de kleurcode #ff05ab (hexadecimaal)
zitten 3 kleurcodes verstopt. (0xff, 0x05 en 0xab)
Hoeveel bits heb je nodig om dit te kunnen opslaan

Slide 22 - Question ouverte

Cet élément n'a pas d'instructions

Vector afbeeldingen
Een vector afbeelding is een afbeelding waarin op basis van een pad verteld wordt wat er getekend moet worden. Eigen een beetje  alsof je een schilder vertelt waar hij z'n kwast naartoe moet sturen.

HTML voor plaatjes
"Van hier naar daar en dan van zus naar zo. En in deze kleur."
Bekende formaten zijn: ai, eps en svg

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

Slide 24 - Vidéo

Cet élément n'a pas d'instructions

Dus wat is een Vector image?
Je gebruikt wiskunde (geometrische vormen).

In plaats van een raster van allemaal pixels naast elkaar

Je geeft je pen instructies om elementen te tekenen

Doordat  je alle waarde x1,5 kan doen word de nieuwe vector 
image ook 1,5 keer zo groot zonder zijn scherpte te verliezen.

Bekende formaten zijn: ai, eps en svg

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

Raster
Vector
iconen
logo's
Tekst
Foto's, "complexe" afbeeldingen

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

Wat is een voordeel van raster images tegenover vector images?

Slide 28 - Question ouverte

Cet élément n'a pas d'instructions

Nadelen raster

- Bestandsgrootte
- Onscherp als je inzoomt
Nadelen vector

- Niet bruikbaar voor complexe afbeeldingen

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

Bitmap of Vector afbeelding?

Afbeelding om verkeersborden te maken
A
Bitmap
B
Vector

Slide 30 - Quiz

Cet élément n'a pas d'instructions

Bitmap of Vector afbeelding?

Afbeeldingen die gebruikt worden in 2D-games
A
Bitmap
B
Vector

Slide 31 - Quiz

Cet élément n'a pas d'instructions

Bitmap of Vector afbeelding?

Een foto die je met je smartphone maakt
A
Bitmap
B
Vector

Slide 32 - Quiz

Cet élément n'a pas d'instructions

Bitmap of Vector afbeelding?

Een reclameposter in een bushokje, die bestaat uit een grote foto met wat tekst
A
Bitmap
B
Vector

Slide 33 - Quiz

Cet élément n'a pas d'instructions

Bitmap of Vector afbeelding?

Bedrijfslogo dat op verschillende soorten promotieartikelen zoals kladblokken en T-shirts wordt gebruikt
A
Bitmap
B
Vector

Slide 34 - Quiz

Cet élément n'a pas d'instructions

Bespreken PO!
PO
bespreken

Slide 35 - Diapositive

Cet élément n'a pas d'instructions

Je weet wanneer je een bitmap of vector afbeeldingen moet gebruiken
A
Dat weet ik!
B
Dat weet ik niet :(
C
Dat weet ik een beetje.. denk ik..

Slide 36 - Quiz

Cet élément n'a pas d'instructions

Je weet waarom er kleurmodellen zijn
A
Dat weet ik!
B
Dat weet ik niet :(
C
Dat weet ik een beetje.. denk ik..
D
Ik weet het wel maar ik zeg het lekker niet

Slide 37 - Quiz

Cet élément n'a pas d'instructions

Maak opdrachten
van module C4 H2 Kleurmodellen
Bestudeer en maak:
§2.2 - 1 t/m 5, §2.3 - 1, §2.4 – 1 en 2

Slide 38 - Diapositive

Cet élément n'a pas d'instructions

Wat kon er beter aan deze les?

Slide 39 - Question ouverte

Cet élément n'a pas d'instructions

Volgende les
  • Compressie
  • Digitaal geluid

Slide 40 - Diapositive

Cet élément n'a pas d'instructions