C4 - Soorten afbeeldingen

Soorten afbeeldingen
lgg

  • Je weet wanneer je een bitmap of vector afbeeldingen moet gebruiken
  • Je weet waarom er kleurmodellen zijn
lgg c4
1 / 18
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolvwoLeerjaar 4

In deze les zitten 18 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 120 min

Onderdelen in deze les

Soorten afbeeldingen
lgg

  • Je weet wanneer je een bitmap of vector afbeeldingen moet gebruiken
  • Je weet waarom er kleurmodellen zijn
lgg c4

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Slide 2 - Tekstslide

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

Dat komt omdat dit een bitmap of rasterfoto is.
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 3 - Tekstslide

Deze slide heeft geen instructies

Slide 4 - Tekstslide

Deze slide heeft geen instructies

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 5 - Tekstslide

Deze slide heeft geen instructies

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 6 - Tekstslide

Deze slide heeft geen instructies

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: ff 
  • 2 voor geel: 05 
  • 2 voor blauw: ab

Hoeveel bits zijn er nodig deze code op te slaan?

Slide 7 - Tekstslide

1 hex = 4 bit
dus 6 x 4 = 24 bits 
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.

"Van hier naar daar en dan van zus naar zo. En in deze kleur."

Bekende formaten zijn: ai, eps en svg

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Nadelen raster

- Bestandsgrootte
- Onscherp
Nadelen vector

- Niet bruikbaar voor complexe afbeeldingen
Volgende slide: kleurmodellen

Slide 11 - Tekstslide

Deze slide heeft geen instructies

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 12 - Tekstslide

Deze slide heeft geen instructies

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 13 - Tekstslide

Deze slide heeft geen instructies

Aan de slag; Fundament Online

  • C4 - kleurmodellen (niet 2.4 vraag 2)
  • C4 - beeld en geluid
  • HTML cursus Codecademy

Slide 14 - Tekstslide

Deze slide heeft geen instructies

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 15 - Quizvraag

Deze slide heeft geen instructies

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 16 - Quizvraag

Deze slide heeft geen instructies

Volgende les
  • Compressie
  • Digitaal geluid

Slide 17 - Tekstslide

Deze slide heeft geen instructies

Wat kon er beter aan deze les?

Slide 18 - Open vraag

Deze slide heeft geen instructies