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:

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.

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:

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!

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!