Bilder og bildebruk for nettsider og nettbutikker Uni Micro Web - 6. mai 2014 1
Innledning En nettside blir aldri bedre enn bildematerialet som fremvises En nettside består av mange bilder. Både reklamebannere, produkter og illustrasjoner. Hvis man kan litt om hvordan man skal beskjære, samt noen enkle kjøreregler for fargebruk, så kommer man langt. Vi tørr påstå; lengre enn de fleste. I Uni Micro Web har vi laget malvelgere for både hjemmesider og nettbutikker. Disse har ganske standardiserte størrelser for bildene. Vi skal i noen eksempler innom malene, for å forklare litt om prinsippene rundt bruk av bilder på nettsiden. Vi håper det kan hjelpe på forståelsen av hvordan bildene brukes. Informasjonen i denne artikkelen gjelder uansett hvilket nettbutikksystem man benytter. Produktbilder Kvalitet på produktbilder kan variere. Noen tar egne produktbilder, andre får de fra leverandører, eller så «hentes» de på nettet. For det første er det viktig å være klar over at å «hente» produktbilder på nettet kan være ulovlig. For eksempel om du laster ned produktbilder som andre forhandlere har tatt selv, så kan ikke disse brukes - uten å først innhente tillatelse til å bruke disse på sin egen nettside. For det andre kan du risikere at det medfører brudd på lov om opphavsrett til åndsverk. Siste nevnte kan medføre erstatningsansvar. Hvis leverandøren ikke har gode produktbilder av produktene du selger i din nettbutikk, anbefaler vi deg å leie inn en fotograf til å ta profesjonelle bilder. Med det mener vi at du får samme bakgrunn til bildene hver gang. I tillegg får du de levert i en størrelse som fungerer enten du skal bruke det i nettbutikken, eller du skal bruke det i annonser og 2
annet trykket materiell. Alternativt kan du ta bildene selv, men da gjerne med kamera plassert på et stativ, med lik bakgrunn og likt lys hver gang. Bakgrunn vs uten bakgrunn I mange tilfeller fungerer det veldig godt å ikke ha bakgrunn på produktbildene. Dette fremstår ryddig i listene i nettbutikken. En bonus er at ved hvit eller gjennomsiktig bakgrunn, vil så vil jobben med å få bildene til å fremstå bra, være lettere. Uten bakgrunn Med bakgrunn Helhetsinntrykket fremstår mer ryddig, og uten forstyrrende elementer med transparent eller hvit bakgrunn. 3
Bildene ser videre mer fornuftig plassert ut, ved at de ikke har en bakgrunn som definerer hvor stort bildet faktisk er. Eller sagt på en annen måte, bakgrunnen avslører ikke proporsjonaliteten (bredde x høyde forholdet) i bildet. Hvis man ser på eksemplet over med bakgrunn, så ser man at bildet ligger helt mot toppen av rammen, og at det i tillegg ikke går helt ut til hver side av den disponible plassen. Dette er naturligvis ikke noe man tenker på i det første eksemplet - fordi det ikke har en bakgrunn som tydelig avslører den faktiske størrelsen. Sist men ikke minst, så vil en produktliste med mange forskjellige varianter av bakgrunner fremstå veldig rotete, med mange forskjellige farger. Dette vil være uheldig for fokuset. Produktene ønsker enhver nettbutikkinnehaver å vise frem fra sin beste side. Størrelse på produktbilder For å skjønne størrelse på bilder for bruk i en nettbutikk, så bør vi ha et forhold til benevnelsen pixels. (Vi anbefaler også å lese artikkelen på engelsk, da den er noe mer forklarende/utfyllende). Horisontalt bilde. Original oppløsning: 800 x 600 pixels (bredde x høyde) 4
Når det gjelder størrelsen på produktbilder så kan de være 1000 pixels bred x proporsjonal høyde, om det er et horisontalt bilde. Tilsvarende kan bildene være 900 pixels høy x proporsjonal bredde, om det er et vertikalt bilde. Bilder som skal brukes til produkter i nettbutikken må ikke være mindre enn 500 pixels i høyde eller bredde. NB: Viktig å sjekke dimensjon på bildet før det legges ut. Vertikalt bilde. Original oppløsning: 596 x 805 pixels (bredde x høyde) Alle Uni Nettbutikker og Uni Hjemmesider er responsive, som betyr at de tilpasser seg disponibel skjermflate. Det innebærer at bildene skaleres ned, avhengig av hvor stor plass 5
som er tilgjengelig på skjermen. Det er derfor vi understreker at bildene ikke må være under 500 pixels i bredde eller høyde. Hvis bildene er mindre vil de i enkelte skjermstørrelser fremstå som uklare. Bildene skal fungere på mange forskjellige skjermer, derfor er det viktig å passe på at de har riktige mål i utgangspunktet. 6
Skalering av bilder Som innehaver av en hjemmeside eller en nettbutikk, så er det vanskelig å unngå at man trenger et verktøy for å skalere bilder. Om du tar bilder selv, skaffer en fotograf til å ta bilder, eller mottar bilder fra en leverandør, så er sannsynligheten for at du må endre format - overhengende. Det innebærer at du må skaffe et program som kan gjøre denne jobben for deg. Det kan hende du allerede har et slikt program, ja til og med uten å være klar over det. Eksempelvis når man installerer Microsoft Office, så medfølger et slikt program - Microsoft Picture Manager. Andre eksempler kan være: Snagit (koster litt, men kan utføre både skalering, beskjæring mm.) Gimp (er gratis, men ganske avansert og ikke så intuitiv) Photoshop (bildebehandlingens Rolls Royce, men koster ganske mye) Snagit - legg merke til verktøyene i øvre venstre hjørne. Beskjæring, Skalering mm. Se også nederst i venstre hjørne, der står bredde x høyde på bildet (596 x 805) 7
Photoshop - endre bildestørrelse ved å skrive inn ønsket størrelse på bildet I bildebehandlingsprogrammene så brukes disse benevnelsene: Crop - som er det samme som å beskjære, eller lage et utsnitt av originalt bilde Resize - som er det samme som å endre størrelse på bildet (NB: vi forstørrer ikke bildet opp, bare ned i størrelse) 8
Beskjæring av bilder I arbeidet med bilder som skal brukes i «bildekaruseller» og artikler til et nettsted, så kan det være behov for å beskjære bildene. Årsaken til at man ønsker å beskjære bilder kan være flere. Noen ganger ønsker man å oppnå at bildene flyter penere sammen med tekst, eller for å sette fokus på en del av bildet. Andre ganger ønsker man å lage et kvadratisk bilde i stedet for et rektangulært. Sist men ikke minst ønsker vi å beskjære bilder til faste mål, som gjør at bildet fungerer i en bildekarusell. I bildebehandlingsprogrammene så er dette omtalt som Crop. Photoshop - crop gjøres ved å trekke i «håndtak» i hver side, samt over og under bildet, til man har det utsnittet man ønsker. 9
Tilsvarende gjøres dette på samme måte i Snagit. I verktøylinjen øverst til venstre velger man Crop, og deretter trekker man i «håndtakene» til man har ønsket utsnitt av bildet. Crop i Snagit 10
Kvadratiske bilder Ved å gjøre produktbilder kvadratiske, kan man spare seg for mye hodebry. Om du har produkter som best blir presentert med bakgrunn, eller du har produktbilder med transparent eller hvit bakgrunn så blir uttrykket, samt produktlistene penere med kvadrater. Derfor kan du med fordel beskjære hvert bilde. Pass på at de har like mye «luft» rundt. På den måten ser bildene like store ut. Visuelt skal det være like mye hvitt, eller bakgrunn, rundt hvert produktbilde. Crop i Photoshop for å lage kvadratiske produktbilder Produktliste med kvadratiske produktbilder og bakgrunn. Selv med bakgrunn fremstår denne listen ryddig. 11
Gjøre om fargebilder til sort/hvitt For å unngå at flere, eller enkelte farger «krasjer» med logo eller øvrig designprofil, kan du velge å gjøre bilder om til sort/hvitt. Dette er både enkelt, og kan gi en fin effekt. Ett klikk på Grayskale-knappen er i Snagit nok for å få denne effekten på bildet. 12
I Photoshop har man et utall av muligheter til å bearbeide et bilde. Du kan legge på flere lag med filter og effekter for å skape ditt «uttrykk». Bruk for eksempel «Image» og «Desaturate» for å gjøre bildet sort/hvitt i Photoshop 13
Bannerbilder / Kampanjebilder Når du skal lage bannerbilder eller kampanjebilder, så er det smart å bruke bilder som inneholder farger som ikke står i sterk kontrast (motsetningsforhold) med firmaprofilen. Skal du bruke illustrasjonsbilder for å underbygge et budskap, bruk gjerne bilder som inneholder farger som ligner logo og øvrig firmaprofil. Bilder som inneholder komplementære farger vil også fungere godt. (Enkel forklaring: Farger som passer sammen, eller utfyller hverandre) Det store bannerbildet til høyre inneholder farger som «kler» firmaprofilen 14
Størrelse på bannerbilder For at størrelsen på bannerbildene i Uni Nettbutikk og Uni Hjemmeside skal bli riktig er det viktig at du forholder deg til de oppgitte mål for akkurat den malen som du har valgt. Bredde og høyde varierer i de ulike malene. Riktige mål, kan leses av på mappen inne i systemet (arkivet) som bildene skal lastes opp til. Eksempelvis så er målene til bannerbildet i denne Uni Nettbutikk-malen 702 x 430 pixels (bredde x høyde). Det er viktig at bildene skaleres/beskjæres etter disse målene. Om du laster opp bilde med feil mål, så vil proporsjonaliteten i forhold til rundt-liggende elementer bli feil. Eksempelvis om du laster opp et bilde som er bredere og smalere enn ovennevnte mål, så vil bildet ikke være «kant i kant» med nyhetene som ligger til høyre for bannerbildet. Detaljene er viktig for helhetsinntrykket. 15
Kjøp av bilder For å kunne bruke bilder med god samvittighet, så har vi tidligere vært inne på at du må passe på å ha rettighetene til å bruke bildene til nettsiden din. Når det gjelder produktbilder så har vi også vært inne på alternativene for å skaffe seg rettigheter til bruk av slike. Når det gjelder illustrative bilder til kampanjer og redaksjonelt stoff, så anbefaler vi at du oppretter en konto hos en tilbyder av såkalte «stockphotos». Sett deg først inn i reglene for hvilken type lisens du må ha, eller hvor mye du må betale for den bruk av bildet du ønsker. Det finnes mange tilbydere av såkalte «stockphotos». Gjør et søk i google, og det dukker opp flere gode alternativer. istockphoto.com 16
Til slutt Ved første øyekast kan det virke mye å skulle ha kontroll på, men sannheten er at mesteparten av dette handler om å lære seg et verktøy. Det finnes mange alternativer, derfor er det bare å kaste seg ut i det - begynne først som sist. Når man etterhvert får kontroll på et bildebehandlingsprogram synes de fleste det er gøy. «Man får privilegiet av å være markedsfører for sin egen nettside, slik sett er det bare fantasien som setter grenser» Det er helt klart mange andre elementer av bildebehandling som kunne vært omtalt her. På den annen side er fremgangsmåten for de ulike verktøyene forskjellig. Derfor håper vi dette har gitt inspirasjon og forståelse nok, til at lysten på å gripe fatt i bildebehandling for sin egen nettside er tilstede. Verktøyet man velger vil naturligvis legge føringer for hvor avansert og bra bildene på din nettside kan bli. Derfor kan det være lurt å tenke gjennom hvilke ambisjoner, samt vurdere hvor mye tid som skal settes av til bildebehandling, før man går til anskaffelse av bildebehandlingsprogram. Og husk, man har bare en mulighet til å gi et godt førsteinntrykk Uni Micro Web AS av Bjørnar Strømsholm 06.06.14 17