1. Bildebehandling
for nettredaktører

2. Jakob Thyness
• Partner, Webgruppen AS
• Utdannet art director
• Mer enn 20 års designerfaring
• Erfaring med web/digitale
medier siden 1993
• Medlem av Grafill,
Dataforeningen (BITS)
jakob@webgruppen.no

3. Riktig bildevalg

4. Hvorfor bruker vi bilder?
• Et bilde sier mer enn tusen ord
• Et bilde sier noe annet enn tusen ord
• Et bilde sier det på kortere tid enn tusen ord

5. Når bruker vi bilder?

6. 1. Når vi vil utdype en historie

8. 2. Når vi vil understreke et poeng

10. 3. Når vi vil dokumentere noe

16. 4. Når vi vil vise relasjoner

18. 5. Når vi vil skape en stemning

20. Målgruppemarkører

27. Formspråk

28. Hvordan kommuniserer bilder?
• Motiv
• Komposisjon
• Farger
• Kontrast

29. Motiver

30. Mennesker
• Ansikter er interessante
i seg selv.
• Kropper må ha noe
spesielt ved seg for å
være like interessante
(bevegelser, klær,
fysiske attributter)
• Øyekontakt skaper
nærhet.

31. Situasjoner
• Situasjoner utspiller seg
over tid, og må derfor
ofte forklares nærmere.
• Fokuser på det sentrale
i situasjonen: Hva har
skjedd? Hva er i ferd
med å skje?

32. Gjenstander
• Det må være tydelig hva
gjenstanden er.
• Gjenstander i bruk er
mer visuelt interessante
(og ofte mer
informative).
• Enkeltstående
gjenstander avslører
flere detaljer.

33. Stemninger
• Jo enklere følelser man
appellerer til, jo bedre.
• Våg å være banal!

34. Komposisjon

35. Tredjedelsregelen
• Del bildet i tre deler horisontalt og vertikalt
• Plasser den viktigste delen av motivet i et av
krysningspunktene
• Unngå å sentrere motivet i bildet

37. Det gyldne snitt
• Del bildet i to ulike deler
• Den minste av delene skal forholde seg til den største
som den største forholder seg til helheten
• Plasser fokus i bildet på delelinjen

39. Forgrunn/bakgrunn
• Hovedmotivet så stort som mulig i forgrunnen
• Tydelig forskjell mellom forgrunn og bakgrunn skaper
spenning i bildet
• Ikke prøv å få med alt på én gang

41. Diagonalen
• Legg motivet langs en diagonal linje fra hjørne til
hjørne for å skape fart og liv i bildet

43. Perspektiv
• Et motiv som går innover i bildet skaper dybde og
trekker tilskueren inn.

45. Farger

46. Fargebruk
• Bevisst bruk av farger kan forsterke innholdet i bildet
• Farger kan ha ulik betydning i ulike kulturer
• Fargeassosiasjoner er alltid svært enkle

47. Varmt

48. Kaldt

49. Friskt

50. Det er begrenset hvor mange fargeassosiasjoner
vi klarer å huske av gangen.

52. Fargekontraster

53. Høylys/skygge
• Høylysområder er
nesten helt hvite
• Skyggeområder er
nesten helt svarte
• Motivet blir skinnende
blankt

54. Komplementær-
kontrast
• Fargene kommer fra
hver sin side av
fargesirkelen
• Fargene har ofte høy
metning, slik at de
nesten ser ut til å
vibrere
• Brukes ofte for et
“etnisk” utseende

55. Lav kontrast I
• Mindre forskjell på
lyse og mørke partier
i bildet
• Gir et kraftig inntrykk
• Brukes ofte for å gi
effekt av autoritet og
makt

56. Lav kontrast II
• Mindre forskjell på
lyse og mørke partier
i bildet
• Gir et lyst og lett
inntrykk
• Brukes ofte for å gi
effekt av eleganse

57. Farger vs. svart-hvitt

58. Farger
• Levende
• Spennende
• Iøynefallende
...men også kanskje:
• Glorete/billig
• Utdatert

59. Svart-hvitt
• Harmonisk
• Stilfullt
• Kunstnerisk
...men også kanskje:
• Gammeldags
• Kjedelig

60. Bildemanér - en standardisering av
attributter
• Format/størrelse
• Bildeplassering
• Bildeutsnitt
• Motivvalg/behandling
• Fargehåndtering
• Bruk av grafikk

61. Standardisering av format/størrelse

66. Standardisering av bildeplassering

68. Standardisering av bildeutsnitt

70. Motivvalg og behandling

72. Standardisering av fargehåndtering

74. Bruk av grafikk

76. Innholdskriterier
• Fakta
• Målgruppe
• Relevans
• Personer
• Roller
• Generelle saker
• Produkter

77. Fakta
• Forsikre deg om at bildet faktisk viser det du tror det
gjør.

79. Målgrupper
• Bildene må gjenspeile målgruppen. Personer som er
avbildet bør derfor ligge tett opptil målgruppen i kjønn,
alder etc.
• Husk at hvordan målgruppen ser seg selv ikke alltid
samsvarer med hvordan resten av verden ser den

81. Relevans
• Bildet må se ut som om det har noe med saken å gjøre
• Pass på at “tonen” i bildet passer til saken
• Hvis du må velge mellom å relatere bildet til
brødteksten eller overskriften, så relater alltid bildet til
overskriften.

83. Personer
• Hvis enkeltpersoner blir omtalt, så bruk bilder av dem
hvis det er mulig
• Pass på at måten personene framstilles på i bildet
samsvarer med innholdet
• Fall ikke for fristelsen til å bruke bilder av perifere
personer

89. Roller
• Hvis en artikkel omhandler roller, som f.eks. “sjef”
“singel”, eller “byråkrat”, unngå for enhver pris å vise
bilder av identifiserbare personer (selv om de har riktig
rolle)
• Roller er generelle, personer er spesifikke -
personlighet er derfor alltid sterkere enn roller

91. R

93. Generelle saker
• Hvis artikkelen omhandler en personuavhengig sak, så
bruk generelle emneillustrasjoner
• Pass på at disse er relevante både i forhold til sak og
målgruppe

96. Produkter og firmalogoer
• Enkelte produkter er like gjenkjennelige som personer
• En logo er “ansiktet” til et selskap
• Disse brukes derfor bare der de omtales spesielt

101. Oppsummering - innholdskriterier
• Bildene må gjenspeile målgruppen
• Bildet må være relevant i forhold til saken
• Relater bildet til overskriften
• Bruk bilder av enkeltpersoner bare der de blir omtalt
• Unngå å illustrere roller med bilder av gjenkjennelige
personer
• Bruk generell saksillustrasjon til personuavhengige saker
• Spesifikke produkter avbildes bare når de omtales spesielt

102. Teknisk bildebehandling

103. Bildebehandlingsprogrammer
• Adobe Photoshop
• Adobe Photoshop Elements

104. 3 ting en nettredaktør må kunne i
Photoshop
• Skalere/beskjære bilder - bildene er ofte i gal
størrelse, og vi trenger ofte andre utsnitt
• Gjøre enkel fargekorrigering - spesielt hvis man tar
bilder selv
• Lagre bildet i riktig format

105. Skalering av bilder

106. Oppløsning
• Den eneste måleenheten
som gir mening på skjerm
er antall piksler i bredde og Antall piksler
høyde.
• Vanlige skjermstørrelser er
1024 x 768 eller 1280 x 1024
piksler.

107. Oppløsning for trykk / skjerm
• Bilder som er beregnet på trykk og bilder beregnet på
skjermbruk kan ikke brukes om hverandre.
• Bilder beregnet på trykk må skaleres ned og/eller
beskjæres for bruk på skjerm.
• Bilder beregnet på skjermbruk kan ikke skaleres opp
til bruk på trykk.

108. Høy oppløsning > trykk
• Høy oppløsning betyr ikke annet enn at pikslene
krympes ved utskrift for å gjøre bildet skarpt
• Jo høyere oppløsning, jo mindre er pikslene, og jo flere
piksler trenger man for at bildet skal bli stort nok ved
utskrift

109. 75 dpi 300 dpi
Bemerk at bildet har like mange piksler ved 75 dpi som ved 300 dpi!

110. Lav oppløsning > skjerm
• På skjerm er pikslene så store at de er synlige med det
blotte øye
• Da blir det ikke plass til alle pikslene som er i et stort
høyoppløselig bilde, og vi må redusere antall piksler i
bildet før vi kan bruke det

111. 300 dpi 75 dpi

112. Nedskalering
• I prinsippet kan et bilde nedskaleres i det uendelige
uten synlig tap av kvalitet
• Det opprinnelige bildet inneholder alltid nok
informasjon til å sikre god kvalitet på en mindre flate
• Ved nedskalering reduseres antallet piksler i bildet

113. 100% 50%

114. Oppskalering
• Et bilde kan normalt ikke skaleres opp mer enn maks
10-15%
• Originalbildet inneholder ikke nok informasjon for å
sikre god kvalitet over en større flate
• Vi kan m.a.o. ikke øke antallet piksler i bildet vesentlig
uten at kvaliteten blir dårlig

115. 100% 200%

116. Beskjæring av bilder

117. Når du beskjærer et bilde
• Pass på at du får med deg de tingene i bildet som er
viktigst
• Gå tett innpå!
• Beskjær gjerne til faste bildestørrelser - da blir det
lettere å holde orden
• Ved dramatiske beskjæringer av byråbilder - snakk
med bildebyrået!

119. Fargekorrigering

120. • Bilder for trykk bruker CMYK - Cyan + Magenta + Yellow = svart
• Bilder for skjerm bruker RGB - Red + Green + Blue = hvitt
• Konverter alltid bildet til RGB før du bruker det på skjerm.

121. ©istockphoto.com

123. Klikk på den fargen du vil ha mer av i bildet
Vil du ha mindre av en farge - klikk på den motsatte siden

125. Lagring av bilde i riktig format

126. Bildeformater på web
• Bildene må kunne vises på alle dataplattformer
• Bildene må ta liten plass
• Det finnes 3 bildeformater som brukes på web: GIF,
JPEG og PNG

127. GIF (Graphics Interchange Format)
• Det eldste grafikkformatet på web
• Ikke-destruktiv filkomprimering (lossless)
• Maksimalt antall farger: 256
• Støtter transparens (1 nivå)
• Mulighet for enkel animasjon
• Best egnet til logoer, spotgrafikk, knapper, bannere
etc.

130. JPEG (Joint Photographer’s Expert Group)
• Utviklet for å omgå svakhetene til GIF-formatet
• Variabel, men destruktiv filkomprimering (lossy)
• Maksimalt antall farger: 16 777 216
• Støtter ikke transparens
• Best egnet til fotografier, fargeforløpninger o.l.

133. JPEG-råte
• Fordi filkomprimeringen fjerner informasjon fra bildet,
kan JPEG-filer rammes av progressivt kvalitetstap
(JPEG-råte)
• Dette skjer når en JPEG-fil lagres på nytt med samme
filnavn

134. Original Lagret som JPEG 10x

135. Forminsking
(JPEG)
Svart-hvitt
(GIF)
Originalbilde
(Photoshop-format)
Nytt utsnitt 1
(JPEG)
Én original - mange Nytt utsnitt 2
versjoner (JPEG)

136. PNG (Portable Network Graphics)
• Nyeste formatet på web
• Utviklet som en erstatning for GIF
• Ikke-destruktiv komprimering (lossless)
• Maksimalt antall farger: 16 777 216
• Støtter transparens (254 nivåer)
• Støttes ikke av eldre nettlesere

137. GIF - 100 Kb JPEG - 40 Kb

138. GIF - 8 Kb JPEG - 12 Kb

139. Takk for meg!
jakob@webgruppen.no
Twitter: @JakobT