Hva bør du tenke på når du velger banner bilder til websiden?

Hva bør du tenke på når du velger banner bilder til websiden?

Med banner bilder så mener jeg et typisk avlangt bilde i breddeformat.

Mange synes kanskje dette er et rart tema å ta opp, men av erfaring vet jeg at dette med banner bilder er noe mange har problemer med å se for seg.

Når man skal velge tema til websiden sin, så ser man gjerne på lekre eksempler med perfekt tilpassede bilder. Og det er ikke alltid like lett å se for seg hvordan dette temaet vil fungere på akkurat din side og med dine bilder.

Her er noen eksempler på temaer med banner:

Eksempel på webside med banner fra Studiopress
Eksempel på wordpress theme fra elegantthemes med banner
Et annet eksempel på wordpress tema med banner i bredde format

Veldig ofte når noen velger theme av denne typen, så sender de bilder til webdesigneren sin i høydeformat. Noen mennesker er rett og slett skrudd sammen slik at de må se ting på svart på hvitt for å forstå hvordan ting vil se ut.

Når du skal velge ut bilder, enten du har papirkopier eller ser de på nett, så kan du f.eks bruke et par papirstrimler og legge over bilder slik at du ser utsnittet i breddeformat.

Her er en «infografikk» som illustrerer dette på en enkel og oversiktlig måte. Takk til Ian & Amy på webdesignersacademy.com for lån av av denne malen.

Infografikk som illustrerer hvordan bilder fremstår som banner til websider

Kanskje du kan løse problemet ved å legge en gradient over bildet og legge på en tekst

Hvis du har bilder du ønsker å bruke, men som ikke er mulig å få til å passe i breddeformat så kan man løse det ved å legge en gradert farge over bildet med en tekst over. I photoshop løser du det på følgende måte. Åpne bildet du vil bruke og velg Image – Canvas size:

Endre størrelse på canvas i photoshop
Vi dobler bredden på canvaset og legger bildet til høyre.

Her dobler jeg bredden på arbeidsflaten og sørger for at bildet ligger til høyre på denne måten her. Dette blir nok for stort, men det justerer vi til slutt.

Her legger jeg på en gradient med utgangspunkt i fargen på murveggen, og velger en gradient som går fra forgrunnsfarge til transparent. (Gradients har hurtigtast G i photoshop)

Jeg har lagt på et rektangel med runde hjørner og senket opacity til ca 80%, lagt på litt tekst og en knapp. Og til slutt har jeg croppet bildet ned til ca 950 x 280px.

Dette er en måte å lage banner av bilder som ikke passer i formatet, du kan også lage en collage med flere bilder om du ønsker det.

Canva og Picmonkey er enkle hjelpemidler for å lage kule bannerbilder!

Her er det ferdige banneret

Til slutt noen tips til deg som ikke har vært hos fotografen enda!

Mange fotografer er ikke vant til å tenke bilder for web, og cropper bildene for nærme hode og «kroppsdeler». Skal bildene brukes i bannere kombinert med tekst, så er det viktig med nok luft både over, under og på sidene.

For ikke å snakke om bilder som skal brukes som bakgrunn i full bredde/høyde. På store skjermer er det en skikkelig utfordring. Det er ikke uten grunn at det ofte brukes abstrakte bilder på demosidene til forskjellige WordPress temaer av den typen. 

Skal du ha med deg selv i den type bilder, så vil du ofte bli «halshugd» eller kanskje bare panneluggen din blir synlig.

Tenk gjennom hva du skal bruke bildene til, og fortell fotografen hva du trenger. Det er ikke moro å betale tusenvis av kroner, for bilder du ikke får brukt slik du hadde tenkt!

WP Basis + VIP tilbud i mai!

Kjøper du WP Basis kurset før 1. juni får du VIP medlemskap gratis den første måneden, deretter kun kr 599,- ink.mva pr mnd. Prisen låses så lenge du er aktiv medlem.

Fra 1. juni går prisen opp til kr 999,- pr mnd, men kun for nye medlemmer.

Skriv en kommentar

Din e-postadresse vil ikke bli publisert.

Dette nettstedet bruker Akismet for å redusere spam. Lær om hvordan dine kommentar-data prosesseres.

Ikke gå glipp av nyheter fra WP Skolen

Du vil motta e-post fra oss når vi har nye blogginnlegg, nyheter eller tilbud som vi tror vil være av interesse for deg. Du kan melde deg av når du vil!

Tilbakestill passord

Gjenopprett passordet ditt

En link for å gjenopprette passord vil bli sendt deg på e-post.

Tilbake