Baggrunde, overlay og beskæring
Billede-slider som baggrund · Overlay · Billeder af personer · Billeder af tekst
Her kan du læse, hvordan du bruger billeder som baggrund i heroen og temakomponenten, og hvordan overlay gør teksten oven på billedet lettere at læse.
Du kan også læse, hvordan du beskærer billeder af personer og billeder med tekst, så de passer i alle visninger.
Billede-slider som baggrund
I Hero m. tekstboks kan baggrunden vise flere billeder. Vælg billederne under Billeder.
Slå Billede-slider til, hvis billederne skal vises i en karrusel, hvor den besøgende kan bladre. Er den slået fra, vises et tilfældigt af billederne, hver gang siden indlæses.
I temakomponenten vælger du billederne under Billede. Slå Vis karrusel til, hvis billederne skal vises i en karrusel.
Typer af overlay
Et overlay er et farvelag oven på billedet. Det gør billedet lidt mørkere, så teksten bliver lettere at læse.
Overlay over hele billedet bruges fx på fejlsiden og på hero med søgebar, når der er en overskrift. Her ses en fejlside.
Her går farven gradvist diagonalt fra det ene hjørne mod midten. Overlayet er tydeligst i hjørnet, hvor teksten står.
Det bruges fx på hero med tekst, hero med baggrundsvideo og temakomponenten i fuld bredde. Her ses en hero med tekst og linkpil.
Her starter farven i bunden af billedet og bliver gradvist svagere op mod toppen.
Det bruges fx på linkkort med billeder. Her ses et linkkort fra en kortsamling.
Farver på overlay
Gå til din forside og vælg fanen Design. Klik på Valgte farver under Farver.
Åbn gruppen Overlay. Her vælger du farver til overlay over hele billedet, start- og slutfarve, tekst, knap og knaptekst. Vælg farven i farvefeltet, eller skriv en HEX-kode.
Overlay, der kun dækker en del af billedet, har en startfarve og en slutfarve. Du kan derfor lave en overgang mellem to farver. Her er startfarven mørkeblå og slutfarven lyserød.
Du kan også ændre farverne direkte på hjemmesiden med farvevælgeren (malerbøtte-ikonet). Den vises, når Vis farvevælger er slået til under fanen Design.
Vælg Overlay i menuen og klik i det felt, du vil ændre. Vælg farven i farvehjulet, eller skriv en HEX-kode.
Overlayet skal være delvist gennemsigtigt, så billedet kan ses igennem. Du justerer gennemsigtigheden med skyderen i farvevælgeren. Ved 0 % er der intet overlay, og ved 100 % kan billedet ikke ses.
Som udgangspunkt behøver du ikke ændre noget. Vi anbefaler:
- Overlay over hele billedet: mindst 60 %
- Overlay med to farver, startfarve: 70–100 %
- Overlay med to farver, slutfarve: 0 %
Husk, at teksten skal være let at læse.
Billeder af personer
Alle billeder i Mediearkivet kan bruges i alle komponenter med billeder. Komponenterne beskærer billedet forskelligt. Åbn billedet i Mediearkivet for at se alle beskæringerne.
Et portræt passer til de fleste beskæringer. Personen bliver kun skåret over i beskæringerne til hero og banner. Brug derfor portrætter på fx kontaktlister og personsider.
Giv billedet luft (whitespace) omkring ansigtet, så ansigtet ikke bliver skåret over:
- Luft i top og bund: mindst 27 % af billedets højde.
- Luft til højre og venstre: mindst 35 % af billedets bredde.
Tommelfingerregel: Luften i top og bund er lidt under en tredjedel af hovedets højde. Luften i siderne er lidt over en tredjedel af hovedets bredde.
Har billedet mere luft end anbefalet, kan du beskære det. Mål ansigtets højde og bredde. Her er ansigtet 226 px højt, og det skal fylde 46 % af højden. Del højden med procenten: 226 / 0,46 = 491 px. Gang med 27 %: 491 × 0,27 = 133 px luft i top og bund. Bredden regner du ud på samme måde.
Her er billedet efter beskæringen. Nu kan du uploade det til Mediearkivet.
Billeder af tekst
Vi fraråder billeder med tekst. Billederne bliver beskåret forskelligt i komponenterne, så teksten kan blive skåret over. Og skærmlæsere kan ikke læse teksten i billedet.
Er et billede med tekst nødvendigt, fx et logo, skal ALT-teksten være den samme som teksten i billedet. Logoer i menu og footer skal ikke følge reglerne her.
Giv teksten luft (whitespace), så den ikke bliver skåret over:
- Luft i top og bund: mindst 185 % af tekstens højde.
- Luft til højre og venstre: mindst 70 % af tekstens bredde.
Billeder i tekstkomponenten på artikelsiden bliver ikke beskåret. Men husk, at andre kan bruge billedet fra Mediearkivet i komponenter, der beskærer.
