Bildoptimering för webben

Storlek: px

Starta visningen från sidan:

Download "Bildoptimering för webben"

Hugo Abrahamsson
för 8 år sedan
Visningar:

1 Bildoptimering för webben Av Stefan Isaksson och Jonas Andersson För att få en så hög och så jämn teknisk kvalitet på webben som möjligt krävs att man behandlar bildfilen på rätt sätt. Denna artikel ger tips om hur man åstadkommer detta. Vi utgår ifrån att bilderna antingen skannas in eller kommer direkt från digitalkameran. Att ha en kalibrerad skärm är ett måste när man arbetar bilder i datormiljö. Det räcker ofta inte att göra en mjukvarukalibrering i t.ex. Adobe Gamma utan en hårdvarukalibrering är att rekommendera. Det finns flera produkter på marknaden som är bra, t.ex. Gretag Macbeths Eye One och ColorVisions Spyder. Om ni ändå väljer att endast ställa in skärmen med Adobe Gamma så hänvisar vi till en artikel på fotosidan skriven av Mikael Pertmann. Färginställningar Nästa steg är att ställa in Photoshops färginställning så att man arbetar i rätt färgrymd. För att bilden ska kunna användas till fler användningsområden än visning på webben bör man arbeta i färgrymden Adobe RGB så länge som möjligt. Ska bilden laddas upp på webben konverteras bilden till färgrymden srgb. Mer om detta senare i artikeln. Skanning Skanna bilden i största möjliga färgrymd (Adobe RGB) helst i 16 bitar. Lär er hur ni använder skannerns programvara på bästa sätt för att redan här uppnå maximal bildkvalitet. Se till att ha teckning i hela bilden, från skuggor till högdagrar. Undvik för hög kontrast. Bilden bör inte skärpas i skannerprogramvaran utan görs i stället i Photoshop. Se till att inte få med något svart ifrån filmramen när ni markerar skanningsområdet i skannerprogrammet. Filer från digitalkamera För att ha störst utrymme för färgjustering bör man fotografera i RAW-format och i färgrymden Adobe RGB. Digitalkameror kräver att man exponerar rätt. Det är lätt att högdagrarna fräter ut. Lär er använda histogrammet i kameran!

Att ha en kalibrerad skärm är ett måste när man arbetar bilder i datormiljö. Det räcker ofta inte att göra en mjukvarukalibrering i t.ex. Adobe Gamma utan en hårdvarukalibrering är att rekommendera.

2 Arbetsflöde Se till att Photoshop är inställt i rätt arbetsfärgrymd. Det hittar ni under Färginställningar (Color Settings). Se dessa inställningar som en grundinställning. Bilder som redan har arbetsfärgrymden Adobe RGB kommer att öppnas i Photoshop utan dialogrutor. När bilder med färgrymden srgb öppnas kommer följande dialogruta att visas. Använd i detta fall den inbäddade profilen som redan har rätt färgrymd för webben, alltså srgb, se ovan.

Bilder som redan har arbetsfärgrymden Adobe RGB kommer att öppnas i Photoshop utan dialogrutor.

3 Ställ nu in svart och vitpunkt. Ett sätt att göra detta är med verktyget Bild-Justeringar-Nivåer (Image-Adjustments-Levels [CTRL+L] ) I exemplet ovan sätts svart och vitpunkt där histogrammet börjar och slutar. Se nedan. Det går också att använda pipetterna för er som känner er säkra på detta. Mittreglaget justerar ljusheten på mellandagrarna. Var försiktig med för stora förändringar. Vill man nu höja kontrasten ytterligare kan man använda Bild-Justeringar-Kurvor (Image- Adjustment- Curves [Ctrl+M]) och här göra en svag S-kurva. Se nedan. (För er som har den senaste versionen av Photoshop kan ni använda verktyget Bild-Justeringar-Skugga/Högdagrar (Image- Adjustment- Shadow/Highlight/) om kontrasten är för hög och t.ex. de mörka partierna blivit för mörka.)

Det går också att använda pipetterna för er som känner er säkra på detta. Mittreglaget justerar ljusheten på mellandagrarna. Var försiktig med för stora förändringar.

4 För att ta bort eventuella färgstick i bilden kan man i första hand prova Bild-Justeringar-Automatisk färg (Image- Adjust- Auto Color). Den fungerar ibland bra, men inte alltid. Om inte annat får man här en ganska bra uppfattning om man har färgstick i bilden eller inte. Ibland vill man ju faktiskt ha kvar ett färgstick i bilden och då fungerar inte denna metod. Annars är Bild-Justeringar-Nyans/Mättnad (Image- Adjustment- Hue/Saturation [Ctrl+U]) ett av de mest användbara verktygen för att justera färger. Här kan man välja att gå in i varje färg (rullgardinsmenyn, Edit:) och justera nyans och mättnad. Se nedan. Bild-Justeringar-Färgbalans (Image-Adjustment-Color Balance [Ctrl+B]) kan också användas för att justera färgstick. När färgjusteringen är gjord kan man nu konvertera till 8 bitar/kanal om bilden togs in i 16 bitar, Bild-Läge-8 Bits/Kanal (Image- Mode- 8 Bits/Channel). Detta för att inte filen ska bli för tung. Nu är ett bra tillfälle att spara bilden högupplöst och oskärpt i exempelvis Tiff format. Denna fil kan man sedan göra mindre bilder av till webben. Nu är det dags att storleksförändra bilden så att den passar på Picturo. Bildens längsta sida skall vara 600 pixlar. Ingen ram. Detta gör man i Bild- Bildstorlek (Image- Image Size)

Annars är Bild-Justeringar-Nyans/Mättnad (Image- Adjustment- Hue/Saturation [Ctrl+U]) ett av de mest användbara verktygen för att justera färger.

5 Nästva steg är skärpning. Här använder ni Filter- Skärpa- Oskarp Mask (Filter- SharpenUnsharp Mask) Se nedan. Det är svårt att säga exakt vilket värde ni ska ha eftersom det beror på motivet, samt storlek på bilden. Mängden; Mängd (Amount) avgör hur mycket skärpa ni lägger på bilden och inställning för radien; Radie (Radius) beror mycket på hur stor bilden är samt hur ﬁna detaljer den innehåller. Tröskelvärdet; Tröskelvärde (Threshold) längst ned kan oftast hållas mellan 0 och 2. Exempel på riktvärden för radien: Bild 600 pixlar hög (web 72 ppi): Bild 3500 pixlar hög (utskrift 250 ppi) Ett vanligt fel är att man använder för hög radie när man gör bilder till webben. Då får man ofta vita linjer runt skarpa kanter som inte är att föredra. I exemplet nedan har vi överdrivit för att visa effekten Radie (Radius) 1.9 Mängd (Amount) 200 Tröskelvärde (Threshold) 0 Radie (Radius) 0.4 Mängd (Amount) 220 Tröskelvärde (Threshold) 0 Man bör inte storleksförändra bilden efter den har skärpts. Spara hellre ut en högupplöst oskärpt kopia innan ni storleksförändrar och skärper.

Mängden; Mängd (Amount) avgör hur mycket skärpa ni lägger på bilden och inställning för radien; Radie (Radius) beror mycket på hur stor bilden är samt hur ﬁna detaljer den innehåller.

6 Nu återstår bara att se till att bilden ligger i rätt färgrymd för ändamålet. För webben används srgb och för leverans till tryckerier etc så bör bilden ligga i arbetsfärgrymden Adobe RGB. Ligger bilden redan i rätt arbetsfärgrymd behöver den naturligtvis inte konverteras. För att konvertera, välj Bild- Läge- Konvertera till Profil (Image- Mode- Convert to Profile) Källfärgrymd (Source space): Det är här ni ser vilken arbetsfärgrymd ni arbetar i för tillfället. Målfärgrymd (Destination space): Det är här ni väljer vilken arbetsfärgrymd bilden ska konverteras till. Om bilden ligger i Adobe RGB och ni ska publicera denna bild på webben, välj då srgb i Destination Space. Då kommer bildens färger bli mycket lik den bild ni ser i Photoshop även när den visas i t.ex. Internet Explorer. Spara bilden i jpg format och komprimera lagom mycket så att den fortfarande ser bra ut, men blir så lätt som möjligt så att den laddar snabbt på webben. Nu är det bara att ladda upp bilden.

Relevanta dokument

ICC-profiler och färginställningar

ICC-profiler och färginställningar FÖR DAGSPRESS Innehåll Introduktion... 3 Betraktningsmiljö... 4 Skärmkalibrering... 5 ICC-profiler... 6 Färginställningar... 7 Bildbehandling... 9 Tryckanpassning...