2015KomItC Digitale billeder

From rtgkomArkiv
Jump to: navigation, search

Digitale Billeder[edit]

Hvad handler det om?[edit]

Arbejde med billeder er et stort område og et centralt tema indenfor kommunikation og medieproduktion. I de digitale medier har vi et stort antal muligheder for manipulation, distribution og fortælling af og med billeder. En kvalificeret brug af billeder gør en afgørende forskel for, hvordan en historie læses, et fagligt emne forstås og i det hele taget for, hvordan et stykke information giver mening for brugeren.

Vi vil i dette forløb fokusere på digitale billeder, og hvordan vi kan arbejde med dem på en hensigtsmæssig måde.

Hvad skal du så gøre?[edit]

Du skal altid sørge for at læse opgaver og oplæg grundigt igennem! Vær også opmærksom på at denne side kan ændre sig når som helt.

Start derefter med at se denne lille video der giver en kort introduktion til rasterbilleder og vektorbilleder;

<html> <iframe width="560" height="315" src="https://www.youtube.com/embed/x1QMV6VrlGI" frameborder="0" allowfullscreen></iframe> </html>

Programmer[edit]

Start med at installere følgende programmer:

  • (raster)billedbehandlingsprogrammet; Gimp [1]
  • (vektor)grafikprogrammet; Inkscape [2]

Begge programmer er open source, og helt gratis :D

Øvelser i billedbehandling[edit]

Du skal nu sætte dig ind i den grundlæggende brug af programmerne. Der vil være hjælp at hente i nogle af videoerne til forløbet, men du må også regne med selv at være aktivt søgende efter mere viden, øvelser og forklaringer.

Se denne video der viser nogle af de mere almindelige funktioner anvendt i Gimp;

<html> <iframe width="560" height="315" src="https://www.youtube.com/embed/yFQ1LHspBCo" frameborder="0" allowfullscreen></iframe> </html>

Første øvelse: Redigering af raster grafik med Gimp[edit]

Nu er det din tur! Prøv om du kan lave det samme billede som i videoen ovenover. Billederne jeg har brugt er udgivet med en creative commons licens [3] og du kan finde dem her:

  • Eiffel tårnet [4]
  • Rød ballon [5]

Krav til din aflevering[edit]

Når du senere får lavet dig studieweb (din portfolio hjemmeside), skal din opgave afleveres dér. Derfor er det vigtigt at du laver en grunding dokumentation af både processen og resultatet. Det betyder at du i denne opgave skal tage screenshots af de forskellige operationer og beskrive hvad der foregår. Læs mere om hvad vi mener når vi bruger begrebet dokumentation her [6]

Suppler gerne med eksperimenter med andre typer billedredigering såsom

  • opretning/forvrængning af linjer
  • indkopiering
  • effektfiltre
  • opløsning
  • beskæring
  • lys
  • kontrast
  • farvemætning
  • farvetone


Hvis du skulle beslutte dig for at finde nogle andre billeder at arbejde med i opgaven skal du være opmærksom på følgende:

  • din opgave besvarelse skal senere på året skal uploades på din offentlige portfolie side.
  • billederne skal være frit tilgængelige, og MÅ IKKE være ophavsretligt beskyttede. Dette skal dokumenteres i opgavebesvarelsen! Tag eventuelt dine egne billeder, eller brug billeder udgivet med creative commons licensen.
  • billedet må ikke kunne virke stødende eller krænkende.
  • billedet må ikke indholde personer som du ikke har skriftligt samtykke fra.

Anden øvelse - beregning af filstørrelser[edit]

Et billede er ligesom alle andre data på din computer beskrevet med bits/bytes. Se denne video, hvor jeg viser hvordan et ukomprimeret billede består at bits og bytes:

<html> <iframe width="560" height="315" src="https://www.youtube.com/embed/hRNM2nKFNrQ" frameborder="0" allowfullscreen></iframe> </html>

Du ved nu hvordan et billede er bygget op af binære tal. Nu skal du prøve at beregne størrelsen på et billede:

  • Hent prøvebilledet [7].
  • Åben billedet i Gimp, og eksporter det som .BMP format til skrivebordet. (BMP står for bitmap, og gemmer alle billedets data gemt ukomprimeret).
  • Noter nu billedets bredde og billedets højde i pixel (dermed har du billedes opløsning)
  • Med din viden om hvor mange bits der går til en pixel og billedets opløsning skal du nu lave en beregning der viser hvor meget .BMP billedet bør fylde i kilobyte.
  • Find filen på dit skrivebord. Højreklik og vælg egenskaber. Notér billedfilens størrelse. Passer den nogenlunde med din beregning? (Der skal være en ganske lille forskel - kan du finde ud af hvad de sidste bytes mon bliver brugt til?)
  • Regn på hvor lang til det vil tage at overføre billedet med en downloadhastighed på 1 kilobit/s.

Krav til din aflevering[edit]

  • Beskriv hvad en pixel er, hvordan den kan beskrives med bits og bytes.
  • Vis med tekst/formler/billeder hvordan man kan udregne filstørrelse og overførselshastighed.
  • Dokumenter hvordan du gemmer et billede i .BMP, hvordan du ser billedets opløsning, og hvordan du beregner billedets størrelse.
  • Reflekter på skrift over forskellene i de opgivne størrelser, og din beregning af størrelsen.

Tredje øvelse - komprimering[edit]

Start med at se denne video, hvor Professor David Brailsford forklarer hvad kompression helt grundlæggende er.

<html> <iframe width="560" height="315" src="https://www.youtube.com/embed/Lto-ajuqW3w" frameborder="0" allowfullscreen></iframe> </html>

[8]

Ok - nu er det blevet tid til at lave vores eget eksperiment med komprimering:

  • Hent prøvebilledet [9]. Rediger herefter prøvebilledet sådan at det indeholder alle farver. Spørg hvis du har brug for hjælp! (Prøv eventuelt sidemanden først)
  1. Eksporter forskellige versioner af billedet som .jpg i forskellige komprimeringsgrader (eks.100, 90, 50, og 20).
  2. Eksporter herefter billedet som et .png
  3. Zoom ind. Gå helt tæt på, og beskriv med tekst og billeder de forskelle du kan se i billederne og sammenlign dem med deres filstørrelser.
  • Gentag punkt 1, 2 og 3 med et fotografi istedet
  • Beskriv med tekst og billeder hvornår det er bedst at bruge .jpg, og hvornår det er bedst at bruge .png.

Krav til din aflevering[edit]

Dit produkt bliver altså en dokumentation af ovenstående øvelser. Gem din dokumentation - den skal uploades til dit studieweb (din portfolio hjemmeside), senere på året.

Din dokumentation kunne med fordel indeholde følgende:

  • Eksempelvisning af det originale ukomprimerede prøvebillede.
  • Et udsnit af prøvebilledet i eksporteret i 4 forskellige grader af .jpeg komprimering
  • En beskrivelse af hvad du ser komprimeringen gør ved billedet - sammenholdt med billedernes filstørrelse.
  • Samme udsnit af prøvebilledet komprimeret med .png
  • En beskrivelse af hvad du ser komprimeringen gør ved billedet, holdt op imod billedets filstørrelse. Er der overhovedet nogen ændringer?.
  • Gentagelse af alle ovenstående punkter - men denne gang med et fotografi.
  • En refleksion over hvornår det er bedst at bruge .png, og hvornår det er bedst at bruge .jpeg.

Er du ultrahardcore, og kan du slet ikke vente med at forstå hvordan det kan lade sig gøre at reducere et billede med .jpeg, kan du vælge at se nærmere på disse links der beskriver hvordan .jpeg grundlæggende virker. Herefter kan du se om du kan beskrive hvorfor eksempelvis .jpeg komprimeringen ser ud som den gør når man går tæt på... (ikke et krav - og kun for de særligt nysgerrige :D)

Jpeg - Colorspace [10] Jpeg - Files and color [11] Jpeg - DCT [12]

Fjerde øvelse - Vektorgrafik[edit]

<html> <iframe width="560" height="315" src="https://www.youtube.com/embed/7F70YZon8yY" frameborder="0" allowfullscreen></iframe> </html>


Ud introduktionen i videoen herover er det nu tid til at du selv skal lege med vektorprogrammet Inkscape. Vi skal lave to øvelser:

1. øvelse: Fra raster til vektor

  • Skriv dine forbogstaver med tekstværktøjet i Gimp
  • Eksporter billedet med dine forbogstaver som .png fil
  • Importer billedet med din forbogstaver i Inkscape.
  • Lav en outline af rasterbilledet med dine forbogstaver.
  • Vis hvordan du nu kan skalere din grafik uden forringelse af kvaliteten.

2. øvelse: Tegn med vektorer

  • Lav en ny fil i Inkscape.
  • Tegn et eller flere af dine forbogstaver fra bunden med vektorer

Krav til din aflevering[edit]

Begge øvelser dokumenteres som vanligt detaljeret med tekst og screenshots.

Materialer til forløbet[edit]

Udover videoerne og materialerne herunder, er det altid en god idé også selv at være nysgerrig og søgende efter gode og spændende kilder. Kommer du undervejs på en fantastisk kilde som du ikke mener andre skal være foruden, kan du bede din lærer sætte den på herunder.

  • Engelsk wiki artikel om pixels [13]
  • Engelsk wiki artikel om vektor grafik [14]
  • Engelsk wiki artikel om raster grafik [15]
  • Gimp tutorials på engelsk [16]
  • Overvej hvordan dit færdige billede skal licenseres (CreativeCommons) [17]