INTRODUKSJON TIL BILDEBRUK

INTRODUKSJON TIL BILDEBRUK FOR NETTREDAKTØRER JAKOB THYNESS

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

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

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

Når bruker vi bilder?

1. Når vi vil utdype en historie

elle.no

2. Når vi vil understreke et poeng

climatecrisis.net

3. Når vi vil dokumentere noe

Foto: Adnan Hajj/Reuters

aftenposten.no

Foto: The White House

Faksimile: Der Tzitung

aftenposten.no

4. Når vi vil vise sammenhenger

5. Når vi vil skape en stemning

istockphoto.com

2. Velg motiv med omhu

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:

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.

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

Motivtyper Personer Situasjoner Gjenstander Prosesser Informasjonsgrafikk

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

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

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!

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!

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

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

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

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!

www.infogr.am

www.canva.com

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

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.

«On White», Wassily Kandinsky, 1923. Kilde: Wikipedia

campaignforrealbeauty.com

3. Komposisjon - ikke så vanskelig som du tror

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

istockphoto.com

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

istockphoto.com

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

istockphoto.com

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

istockphoto.com

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

istockphoto.com

4. Farger kan forsterke budskapet

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

Varmt istockphoto.com

Kaldt istockphoto.com

Friskt istockphoto.com

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

istockphoto.com

5. Gi bildet liv med kontrast

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

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

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

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

Farger vs. svart-hvitt

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

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

6. Standardiser størrelser

aftenposten.no

dagsavisen.no

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!

7. Vær faktaorientert

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

dagbladet.no

8. Vær relevant

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.

nho.no

9. Håndtér personer riktig

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

dagbladet.no

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

dagbladet.no

R dagbladet.no

dagbladet.no

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

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

dagbladet.no

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

dagbladet.no

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

Litt teknisk om bilder

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.

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.

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

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.

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

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.

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.

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

Komprimering - GIF

JPEG (Joint Photographer s Expert Group) Utviklet for å omgå svakhetene til GIF-formatet Variabel, men destruktiv filkomprimering (lossy) Maksimalt antall farger: 16 777 216 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.

Komprimering - JPEG

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.

Original Lagret som JPEG 10x www.istockphoto.com

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

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

JPEG slår GIF til foto GIF - 57 Kb JPEG - 8 Kb www.istockphoto.com

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

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?

Takk for meg. E-mail: jakob@webgruppen.no Twitter: @JakobT