INTRODUKSJON TIL BILDEBRUK

Transkript

1 INTRODUKSJON TIL BILDEBRUK FOR NETTREDAKTØRER JAKOB THYNESS

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)

3 1. Tenk på hva du vil oppnå med bildet

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

7 elle.no

8 2. Når vi vil understreke et poeng

9 climatecrisis.net

10 3. Når vi vil dokumentere noe

11 Foto: Adnan Hajj/Reuters

12 Foto: Adnan Hajj/Reuters

13 aftenposten.no

14 Foto: The White House

15 Faksimile: Der Tzitung

16

17 aftenposten.no

18 4. Når vi vil vise sammenhenger

19

20 5. Når vi vil skape en stemning

21 istockphoto.com

22 2. Velg motiv med omhu

23 Konkretiser! Et bilde må nesten alltid vise noe fysisk, selv om det skal illustrere noe abstrakt. Se etter ting i artikkelen som gjør den unik, og som du enkelt kan konkretisere. Enkelte abstrakte ting har etablerte symboler som det går an å bruke:

24

25

26

27 Klisjeer Etablert symbolikk er nyttig, fordi den kommuniserer tydelig. Risikoen er at kommunikasjonen kan bli klisjépreget. På den annen side må den ikke være så original at den blir vrien å forstå. Gjør kommunikasjonen enkel ved å vise kjente ting. Unngå klisjeer gjennom å velge uvante fremstillinger.

28

29 Hva slags bilder fanger oppmerksomheten? Brukeren ser på bilder som inneholder relevant informasjon. Brukeren overser pyntebilder, merkevarebyggende bilder og åpenbare stockfotos.

30 Motivtyper Personer Situasjoner Gjenstander Prosesser Informasjonsgrafikk

31 Personer Ansikter lar oss identifisere personen - blikket faller naturlig på ansiktet i bilder. Kroppen må ha noe spesielt ved seg for å være like interessante (bevegelser, klær, fysiske attributter). Øyekontakt skaper nærhet. istockphoto.com

32 Situasjoner Et bilde kan aldri vise hele situasjonen, og må ha tekstlig forklaring. Dette gjelder enten situasjonen utspiller seg over tid, eller er over på et øyeblikk. istockphoto.com

33 Bruk av situasjonsbilder Bilder som er tatt under et opptrinn er det beste - men pass på å få med ting som hjelper leseren å sette det i sammenheng. Hvis hendelsen er over, er åstedet for hendelsen et godt alternativ, så lenge det forteller noe om hva som er skjedd. Hvis det er snakk om en spesiell hendelse, unngå bilder fra andre tilsvarende hendelser!

34 Situasjonsbilder og tekst Situasjonsbilder er svært avhengige av tekst for at leseren skal forstå dem. Situasjonsbilder blir nesten alltid sett i forhold til en overskrift. Disse må derfor henge sammen!

35 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. istockphoto.com

36 Prosesser Prosessbilder illustrerer fremgangsmåter eller tidsforløp. Hvert trinn i prosessen bør ha et separat bilde. Inkluder gjerne grafiske elementer som piler o.l. Tegninger er en god måte å fjerne uønsket «visuell støy» på. istockphoto.com

37 vs.

38 Informasjonsgrafikk Brukes til å illustrere struktur, størrelser og verdier. Gjør utstrakt bruk av diagrammer og symboler. Er svært tekstavhengig for å gi mening. istockphoto.com

39 Bruk av informasjonsgrafikk Hold diagrammer så enkle som mulig - ikke gå overbord med skygger, 3D-effekter og liknende. Bruk stor og tydelig tekst, og reduser tekstmengden til et minimum. Unngå bruk av foto - rene grafiske symboler og diagrammer fungerer ofte best. ExCel er ikke alltid ideelt!

40

41

42 «Etterslep» Siden vi tolker bilder og symboler ut fra vårt eget erfaringsgrunnlag reagerer vi mest pålitelig på ting vi har sett før. Dette betyr at ting som gir mening for oss ofte har et visst «etterslep», fordi vår generelle ide om dem ble dannet for lenge siden.

43

44

45 Når erfaringsgrunnlaget mangler Hvis vi ikke kjenner igjen eller kan relatere til det vi ser, er det stor sannsynlighet for at kommunikasjonen mislykkes. Derfor er det vanskelig å kommunisere nye eller avanserte ideer i bilder.

46 «On White», Wassily Kandinsky, Kilde: Wikipedia

47 campaignforrealbeauty.com

48 3. Komposisjon - ikke så vanskelig som du tror

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

50 istockphoto.com

51 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

52 istockphoto.com

53 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

54 istockphoto.com

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

56 istockphoto.com

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

58 istockphoto.com

59 4. Farger kan forsterke budskapet

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

61 Varmt istockphoto.com

62 Kaldt istockphoto.com

63 Friskt istockphoto.com

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

65 istockphoto.com

66 5. Gi bildet liv med kontrast

67 Høylys/skygge Høylysområder er nesten helt hvite Skyggeområder er nesten helt svarte Motivet blir skinnende blankt istockphoto.com

68 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 istockphoto.com

69 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 istockphoto.com

70 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 istockphoto.com

71 Farger vs. svart-hvitt

72 Farger Levende Spennende Iøynefallende...men også kanskje: Glorete/billig Utdatert istockphoto.com

73 Svart-hvitt Harmonisk Stilfullt Kunstnerisk...men også kanskje: Gammeldags Kjedelig istockphoto.com

74 6. Standardiser størrelser

75 aftenposten.no

76 aftenposten.no

77 aftenposten.no

78 dagsavisen.no

79 dagsavisen.no

80 dagsavisen.no

81

82 Hvor store bør bilder være? Bilder bør være store nok til at det er enkelt å se hva de forestiller...men ikke så store at de fortrenger annen og viktigere informasjon Husk at med økende bruk av mobiltelefoner og surfebrett blir båndbredde viktig igjen!

83 7. Vær faktaorientert

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

85 dagbladet.no

86 8. Vær relevant

87 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.

88 nho.no

89 9. Håndtér personer riktig

90 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

91 dagbladet.no

92 dagbladet.no

93 dagbladet.no

94 dagbladet.no

95 dagbladet.no

96 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

97 dagbladet.no

98 R dagbladet.no

99 dagbladet.no

100 10. Vær redelig - selv om det kan være kjedelig

101 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

102 dagbladet.no

103 dagbladet.no

104 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

105 dagbladet.no

106 dagbladet.no

107 dagbladet.no

108 dagbladet.no

109 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

110 Litt teknisk om bilder

111 Hvor stort er bildet? Størrelsen på et webbilde måles i piksler. Et piksel er en av de små fargede firkantene bildet er bygd opp av. Et bilde beregnet på web kan være f. eks. 850 x 350 piksler. De fleste kameraer lager bilder som er for store for bruk på web. Før vi kan bruke det, må bildet da skaleres og/eller beskjæres.

112 Skalering Å skalere et bilde er å redusere høyde og bredde på bildet, slik at det samme bildet inneholder færre piksler. Vi reduserer vanligvis høyde og bredde like mye, slik at bildet ikke strekker seg. Vi kan skalere bilder nedover i det uendelige uten at det blir uskarpt, men ikke oppover.

113 Nedskalering 100% 50% Reduserer vi bildet med 50% har det bare en fjerdedel så mange piksler som originalen.

114 Beskjæring Å beskjære et bilde er å redusere antallet piksler i bildet ved å kappe bildekantene. Vi kan velge å beskjære høyde og bredde like mye for å bevare det opprinnelige formatet, eller vi kan endre det når vi beskjærer.

115 Beskjæring Før Etter Beskjæring reduserer også antallet piksler i bildet.

116 Vi trenger ofte begge deler Ofte må bildet både beskjæres og skaleres. Da er det ofte lurt å gjøre beskjæringen før vi skalerer, så vi er sikre på at vi får med det vi skal i bildet.

117 Hvor tungt er bildet? En annen viktig variabel er filstørrelsen på bildet. Bilder på web trenger å være så lette som mulig, dvs. at filstørrelsen bør være minst mulig. Filstørrelsen bestemmes delvis av hvor mange piksler som er i bildet, og dels hvilket lagringsformat bildet er lagret i. Vi har tre lagringsformater for bilder på web, hvert med sitt bruksområde: GIF, JPEG og PNG.

118 GIF (Graphics Interchange Format) Det eldste grafikkformatet på web Ikke-destruktiv filkomprimering (lossless) Maksimalt antall farger: 256 Komprimeringsmetoden og det lave antallet farger gjør at bilder med rene fargeflater og få farger er best egnet for GIF-formatet

119 Komprimering - GIF

120 Komprimering - GIF

121 JPEG (Joint Photographer s Expert Group) Utviklet for å omgå svakhetene til GIF-formatet Variabel, men destruktiv filkomprimering (lossy) Maksimalt antall farger: Det store antallet farger gjør at JPEG egner seg godt for fotografier, men komprimeringsmetoden gjør at det forsvinner informasjon fra bildet når dette formatet brukes. Bildene kan bli svært lette.

122 Komprimering - JPEG

123 Komprimering - JPEG

124 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 og på nytt med samme filnavn.

125 Original Lagret som JPEG 10x

126 Alltid rene bilder Forminsking (JPEG) Originalbilde (Photoshop-format) Svart-hvitt (GIF) Nytt utsnitt 1 (JPEG) Én original - mange versjoner Nytt utsnitt 2 (JPEG)

127 PNG (Portable Network Graphics) Nyeste formatet på web Utviklet som en erstatning for GIF Ikke-destruktiv komprimering (lossless) Maksimalt antall farger: Fungerer godt i stedenfor GIF. Kan også brukes istedenfor JPEG, men bildene blir en del tyngre.

128 JPEG slår GIF til foto GIF - 57 Kb JPEG - 8 Kb

129 GIF slår JPEG på grafikk GIF - 8 Kb JPEG - 12 Kb

130 Noe å tenke på til neste gang: Hvordan jobber du med å plukke gode illustrasjonsbilder? Øv deg med å plukke ut overskrifter fra nettaviser og prøve å bildelegge dem selv, gjerne ved hjelp av Google-søk. Hvilke bilder ville du plukket, og hvorfor?

131 Takk for meg.