Vektor och pixelgrafik
När man pratar om elektroniska bilder, så finns det två olika områden. Dels de vektorbaserade bilderna, och dels de pixelbaserade. I denna lathund kommer vi nästan uteslutande att behandla pixelgrafik. En kort förklaring till begreppet vektorgafik ges nedan.

Vektorgrafik

bild 1.1

Bilder som är uppbyggda av vektorgrafik består egentligen av en "instruktion" som förklarar bilden. Denna instruktion tolkas av ett program som i sin tur ritar upp den beskrivna bilden. Exempelvis skulle bilden ovan beskrivas som ett antal vektorer sammanbundna i två stycken olika stjärnformationer. Dessa stjärnor är fyllda med en röd färg, och har fem armar. Den högra har längre avstånd mellan stjärnans mitt och dess armar än den vänstra osv.

Genom att bilden består av en matematisk formel, och inte av pixlar, så kommer kvaliteten att förbli oförändrad om man förstorar eller förminskar bilden. Bilden ritas istället om baserad på de nya matematiska förutsättningarna. Förutom att kvaliteten inte försämras vid förstorning så är en annan fördel med vektorbaserade bilder att dessa filer oftast tar betydligt mindre plats än motsvarande bild som består av pixelgrafik. Ofta kräver dessa filer betydligt mindre lagringsutrymme än de pixelbaserade bilderna. En stor nackdel med denna teknik är tyvärr den att en del saker här i världen inte är så lätt att beskriva med en matematisk formel. Hur förklarar men exempelvis en tropisk solnedgång (bild1.2) på ett matematiskt vis? Sådana bilder är nästan alltid uppbyggda av pixelgrafik.

Pixelgrafik
Bilder som bygger på pixelgrafik består till skillnad från vektorgrafiska bilder av ett stort antal små bildpunkter, så kallade pixlar. Dessa pixlar har alla sin speciella färgnyans, och bygger tillsammans upp bilden. Man brukar förstå denna teknik lättare genom att jämföra med TV-bilden som också består av ett stort antal olika punkter. Om man sitter väldigt nära en Tv-ruta, så ser man att denna bild också är uppbyggd av punkter. Genom att förstora en pixelbild kan man se de olika pixlarna som bilden är uppbyggd av.

bild 1.2	bild 1.3
Hela originalbilden	Ett visst område på bilden inzoomat ca 1600 ggr

Mått & storlekar
När man talar om punktuppbyggda, eller pixeluppbyggda bilder så brukar man nästan alltid beröra ett begrepp som heter upplösning. En bilds upplösning brukar mätas i ppi eller dpi, beroende på vilket medium man har bilden på. Dpi brukar ange upplösningen på en skrivare, medan ppi används när man pratar om bildläsare eller bildskärmar. Ppi står för pixels per inch (pixlar per tum), och dpi står för dots per inch (punkter per tum).
Just upplösning brukar ställa till med problem, även för de som är lite mer erfarna med att arbeta med digitala bilder. Detta framförallt för att det finns så många olika begrepp, beroende på vilket medium bilden ska betraktas. Vi börjar med att gå igenom de vanligaste begreppen man brukar använda när man talar om upplösning:

Pixelmått
Detta mått anger hur många pixlar på bredden respektive höjden bilden är uppbyggd av. En bild kan exempelvis ha pixelmåtten 800x600.

Bildupplösning
Det finns en mängd olika missförstånd när det gäller bildupplösningen på digitala fotografier och bilder, vi ska nu försöka reda ut några av dessa missförstånd.
Många hävdar att bilder för webben ska vara 72 ppi, vilket inte är helt korrekt. Detta mått är helt irrelevant så länge man inte planerar att skriva ut sin bild. En bild med upplösningen 72 ppi ser exakt likadan ut som en bild med 300 ppi.

Nedan finns några exempel på hur man kan förändra en bildstorlek. Exemplen är tagna ifrån Photoshop 7, men det ser ut på liknande sätt i de flesta bildbehandlingsprogram.

bild 2.1
Bilden på palmen (bild1.2) hade dessa originalinställningar. Pixelmåttet var 219 x 300. Upplösningen för utskrift var 72 ppi, och filstorleken var 192KB (Okomprimerad)

bild 2.2
I detta fall har vi kryssat ur Resample image (ändra bildupplösning), och upplösningen har ändrats från 72 ppi till 300 ppi. Notera här att själva filstorleken inte ändrats, den är fortfarande 192KB. Däremot har dokumentstorleken blivit mindre vilket skulle resultera i att bilden skulle skrivas ut på en mindre yta jämfört med originalbilden. Bilden skulle dock innehålla exakt likadan bildinformation.

bild 2.3
Om vi istället behåller Resample image ikryssad och ökar upplösningen kommer bildens pixelmått att öka från 219x300 till 456x625. Samtidigt ökar också filstorleken från 192KB till 835KB. Detta sätt att ändra upplösning på en bild kallas att interpolera bilden. Vad som sker vid interpolering är att programmet, med utgångspunkt från originalbilden "gissar" hur bilden hade sett ut vid en högre upplösning. Viktigt att komma ihåg är att "ditt foto redan är fotograferat". Har man en väldigt lågupplöst bild, så kan man inte förbättra den mycket, därför att bilden helt enkelt inte innehåller så mycket bildinformation. En bra regel är därför att man ska arbeta med så högupplösta bilder man bara kan redan från början.

Skärmupplösning
Upplösningen på skärmen talar om hur många pixlar i bredd och höjdled skärmen klarar av att visa. Faktorer som avgör vilken upplösning en skärm har är skärmens storlek, samt vilken pixelinställning som är gjort för bildskärmen. Skärmens storlek går ju naturligtvis inte att göra så mycket åt, eftersom det är ett fysiskt mått. Däremot kan vi ändra pixelinställningen och det gör vi genom att högerklicka på skrivbordet (PC), väljer egenskaper, och därefter inställningar.

bild 2.4

Skärmdumpar
Om man vill kopiera det som visas på skärmen vid ett visst ögonblick så går man det med tangenten PrintScrn (Print Screen). Vill man istället bara skriva ut det aktuella fönstret trycker man Alt+PrintScrn. Nästa steg är att öppna ett bildbehandlingsprogram, öppna en ny bild med de mått man önskar, och slutligen klistra in sin skärmdump genom att välja Redigera-> Klistra in (Ctrl +V).

Skrivarupplösning
Till sist beskriver skrivarupplösningen hur många punkter (dots) som skrivaren klarar av att återge på pappret. Skrivarupplösningen mäts vanligen i dpi, dots per inch. Upplösningen ligger på ca 600dpi för laserskrivare, medan bläckstråleskrivare brukar ha en upplösning från 1200dpi ända upp till 2880dpi. Notera dock att olika fabrikat har sina egna sätt metoder att räkna ut skrivarupplösningen. Man bör därför ta dessa värden med en nypa salt, och istället jämföra skrivarna utifrån utskriftsprover.

Utskriftsstorlek
Det enda sätt man kan ta reda på vilken storlek bilden kommer att ha vid utskrift är antingen att titta på dokumentstorleken som anges i bildbehandlingsprogrammet, eller genom att räkna ut den manuellt.
Formeln för detta är: dokumentstorlek x upplösning = bildstorlek

Exempel 1:
Vi vill att måtten på vår bild ska vara 6 x 4 (bredd x höjd i tum). Vi vet också att vår skrivare klarar av att skriva ut med upplösningen 300dpi. Vilken bildstorlek ska bilden ha?
Lösning: (6x300)x(4x300)=1800x1200 (bredd x höjd i pixlar)

Exempel 2:
Vår bild har måtten 800x600. Vi vet att vår skrivare klarar att skriva ut med 300dpi. Vilka mått kommer den utskriva bilden att ha?
Lösning: (800/300)x(600x300)=2.66x2 (bredd x höjd i tum)

Filstorlek
Filstorleken är det fysiska utrymme bilden tar på datorns hårddisk. Om en bild har måttet 800x600, och färgdjupet 8 bitar(256 nyanser), så räknar man fram filstorleken enligt följande:

Bredd x höjd x färgdjupet(i bitar)= 800 x 600 x 8= 3840000 bitar

Delar vi resultatet med 8 får vi fram den mer förekommande lagringsenheten "bytes":

3840000/8=480000 dvs. 480 KB (kilobytes)
Tänk på att denna storlek avser okomprimerad bild (bitmap). Sparas en bild i GIF eller JPEG så kommer filstorleken att sjunka avsevärt.

Scanning
När man ska digitalisera en bild, så är det viktigt att bestämma vilken upplösning man ska använda. Detta varierar beroende på vilket medium bilden ska distribueras. Visst kan man som regel alltid scanna med exempelvis 600ppi, men detta har sina nackdelar. För det första blir filerna enormt stora och svårarbetade, dessutom blir inte kvaliteten bättre när man nått upp till vissa värden. Nedan finns en tabell med några riktlinjer när det gäller scannerupplösning.

Färgdjup
Vilka olika nyanser varje pixel kan anta bestäms av färgdjupet. I sin enklaste form kan pixlarna i en bild antingen vara svarta eller vita. Man talar då om att färgdjupet eller bitdjupet i bilden är 1. Rent matematiskt skriver man ett färgdjup på 1 som 2¹ = 2, vilket betyder att varje pixel kan anta två olika nyanser. Ofta brukar man tala om bilder med 8, 16, och 24 bitars färgdjup. I det senare fallet kan varje pixel anta 2²⁴ = 16,7 miljoner olika värden.

GIF
Gif står för Grafhics Interchange Format, och det är bland de mest använda formaten som finns på nätet. Detta format ger vanligtvis ganska små filer, trots att kompressionen är förlustfri. En förlustfri kompression, eller lossless som den också kallas på engelska, innebär att ingen bildinformation går förlorad vid komprimering. Vid GIF-komprimering används en komprimeringsmetod kallad LZW, som gör bildfilen ca 10-50 % mindre än ursprungsstorleken.
Det finns dock begränsningar med att använda GIF, och dess största begränsning är att färgdjupet endast är 8 bitar. Detta innebär att GIF bilder max kan innehålla 256 färger, vilket gör att formatet inte lämpar sig för fotografier och andra bilder som innehåller ett stort antal färgnyanser.
Däremot lämpar sig GIF väldigt bra till enklare grafik, dels för att GIF filer blir relativt små, men även därför att formatet stödjer transparent färg.

bild 3.1	bild 3.2
GIF bild som har transparent bakgrund.	Bild sparad i JPEG format som inte stödjer transparenta färger.

	bild 3.3
En annan stor fördel GIF har gentemot exempelvis JPEG är att det går att skapa animeringar i GIF, vilket man ofta brukar se i annonser på Internet.

JPEG
JPEG, eller Joint Photographic Experts Group, utvecklades främst för att kunna minska filstorleken för stora fotografier och bilder, utan att bildkvaliteten försämrades märkvärt. Till skillnad från GIF så komprimeras JPEG förstörande (lossy). Vid kompression så kastas alltså stora delar av bildfilen bort. Det kan röra sig om komprimeringsgrad på 60-90 %, vilket innebär att 60-90 % av bilden skalas bort, och ändå uppfattar vi inte någon kvalitetsförsämring.

Naturligtvis finns det också nackdelar med detta format. Ett är att JPEG inte stödjer transparent färg. Andra problem som kan uppstå är att kvaliteten på enklare grafiska bilder faktiskt kan vara sämre om man sparar filen som JPEG istället för GIF. Detta trots att JPEG kan hantera mer än 16 miljoner färger, medan GIF bara kan visa 256 färger.

bild 4.1	bild 4.2
JPEG, 409 bytes	GIF, 130 bytes
JPEG filen till vänster har betydligt sämre kvalitet än GIF filen till höger, trots att JPEG filen är mer än tre gånger så stor.

RGB

Namnet RGB står för Red, Green, Blue, och används som färgmodell av alla bildskärmar. Förkortningen RGB förklarar ganska bra vad det hela med färgmodeller handlar om. De tre grundfärgerna rött, grönt och blått blandas på olika sätt för att få fram färgspectrats övriga nyanser. Varje färg kan anta 256 olika värden (0-255). Man brukar tala om RGB som en additiv färgmodell, då man framställer färgnyanser genom att addera olika mängder ljus. Alla bildskärmar använder sig av RGB modellen. Eftersom bildskärmar emitterar (sänder ut) ljus blir varje pixel ljusare desto högre värde färgerna (R,G,B) antar. Skulle värdena för R, G och B vara 0,0 och 0 skulle inget ljus emitteras via skärmen, och vi skulle få en svart pixel. Maximerar vi istället värdena för R, G och B (255,255,255) avger istället pixeln maximalt med ljus och vi uppfattar den som vit.

CMYK
Den färgmodell som skrivare och tryckerier använder sig av består av färgerna Cyan, Magenta, Gul (Yellow), samt en Key color (oftast svart). Till skillnad mot RGB kallas CMYK för en subtraktiv färgmodell. Anledningen till att denna färgmodell passar för tryck är att vid tryck så "svärtas" pappret ner. Man tillsätter färgerna Cyan, Magenta och Gult, och på samma gång "subtraheras" ljuset från pappret och vi uppfattar det som mörkt. För att få fram helt svarta områden räcker det inte med att blanda cyan, magenta och gult, utan man måste här lägga till sin nyckelfärg, eller key color.

Index
Om man vill reducera antalet färger i en RGB bild för att spara den i ett ilformat som inte hanterar många olika färger exempelvis GIF, så kan man ändra färgmodellen till Index. Vad som sker är att endast de nödvändigaste färgerna sparas i en sorts färgtabell, vilket är den stora fördelen med Index färger. Denna tabell kan spara sin färginformation från förutbestämda regler, och dessa regler kan man naturligtvis ställa in.

bild 5.1

Inställningsmöjligheterna för Index paletten:

Exact: Detta alternativ kan endast väljas om bilden redan innehåller 256 färger eller färre, vilket oftast bara inträffar om man arbetar med skärmdumpar och i andra högkontrast situationer.
Web: Detta alternativ lämpar sig om man vill man basera sin bild på de 217 webbsäkra färgerna som finns.
Adaptive: Detta alternativ skapar en palett som innehåller de mest förekommande färgerna i bilden.
Indexed color reducerar filstorlekar utan att göra avkall på bildkvaliteten vilket kan vara önskvärt för publicering på webben.

Utskrift

För att skriva ut sidorna krävs Acrobat Reader.

Klicka här för att skriva ut lathunden i pdf-format.

Grundläggande övningsuppgifter
Hämta hem övningsbilden här

De första sakerna man bör behärska oberoende på vilket bildbehandlingsprogram man använder sig av är att ändra storleken på sin bild, att kunna beskära bilden, samt att kunna rotera sin bild. Det är också viktigt att man kan spara sin bild i lämpligt format.

Uppgift:
När du hämtat hem övningsbilden (högerklicka på den och välj spara bild som...) och öppnat den i ditt bildbehandlingsprogram ska du:

1. Beskära bildne så att de vita områdena runt bilden försvinner.
2. Rotera bilden 90 grader.
3. Eftersom bilden är rätt stor ska du ändra storlek. Bredden ska vara ca 150px och höjden ca 200px.
4. Slutligen ska du spara bilden, men filen får inte bli större än 10KB.

Försök att klara de olika momenten utan att titta på lösningsförslagen.
Lösningsförslagen utgår från Photoshop Elements 2.0

Till lösningsförslaget...

Utbildning
Vektor och pixelgrafik
Vektorgrafik
Pixelgrafik
Mått & storlekar
Pixelmått
Bildupplösning
Skärmupplösning
Skärmdumpar
Skrivarupplösning
Utskriftsstorlek
Filstorlek
Scanning
Färgdjup
GIF
JPEG
RBG
CMYK
Index
Utskrift
Övningar