# Duotonefotos i dine brandfarver: monokrom, duotone og farveslør

[Canonical HTML page](https://gradiently.design/da/guide/photo-duotone-in-mark-colours)

Fotos, der ikke passer sammen, er den hurtigste måde at få et feed til at se lånt ud. Toner du dem i dine egne farver, samler du stockbilleder, telefonbilleder og produktfotos i én familie.

## The short version

- Et duotonefoto erstatter et billedes toner med to farver: én til skyggerne og én til højlysene.
- I Gradiently kan ethvert foto tones som monokrom, duotone eller farveslør, og duotone og farveslør henter deres farver fra designets Mark.
- Toner du fotos i samme farver som baggrunden, ligner blandede kilder, fra stock til telefonbilleder, ét bevidst sæt.
- Fotos kan også justeres i lys og farve, afsluttes med filtre som Film eller Noir og beskæres til buer, cirkler og blobs.
- Alle fotojusteringer kan redigeres, så du senere kan ændre toningen eller skifte Mark, og fotoet følger med.

Et **duotonefoto** bytter et billedes naturlige farver ud med to valgte: en mørk farve til skyggerne og en lys farve til højlysene, med alle toner imellem blandet fra parret. Gjort i dine brandfarver forvandler det ethvert fotografi til noget, der tydeligt hører til dig. I Gradiently kan du tone et foto på tre måder, monokrom, duotone eller farveslør, og duotone og farveslør henter deres farver direkte fra designets Mark, så foto og baggrund altid er enige.

## Sådan virker et duotonefoto

Tænk først på fotoet som sort-hvidt. Hver pixel har en lysstyrke fra 0 til 100 procent. En duotone maler så de mørkeste pixels i din skyggefarve, de lyseste i din højlysfarve og alt andet på det tilsvarende punkt langs forløbet imellem dem. Resultatet bevarer alle fotoets detaljer, men ingen af dets oprindelige farver.

- Indigo til rosa: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Dyb petrol til sand: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Oksblod til smør: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Marineblå til is: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Fire duotoneforløb. Skyggerne får farven til venstre, højlysene farven til højre, og fotoets mellemtoner lander i midten.

Tricket, der får en duotone til at se god ud frem for mudret, er kontrast mellem de to ender. En meget mørk skygge og et meget lyst højlys holder ansigter og produkter tydelige. To mellemtoner giver et fladt, grumset billede. Lookets historie og bredere anvendelser finder du i [duotone-effekten](https://gradiently.design/da/guide/duotone-effect).

## Monokrom, duotone og farveslør: tre måder at tone på

| Toning | Hvad den gør | Farver fra | Brug den til |
| --- | --- | --- | --- |
| **Monokrom** | Gør fotoet sort-hvidt | Neutrale grå | Portrætter, citater, alt seriøst eller tidløst |
| **Duotone** | Lægger skygger og højlys i to farver | Marken | Kraftige opslag, eventplakater, teambilleder, der ikke passer sammen |
| **Farveslør** | Lægger Markens farve over fotoet og bevarer noget af dets egen | Marken | Produktbilleder og mad, hvor motivet stadig skal se ægte ud |
| Ingen | Lader fotoets farver være | Fotoet | Produktbilleder i hovedrollen, hvor præcise farver betyder noget |

Toningsmulighederne i fotoredigering. Duotone og Farveslør bruger farverne i din Mark, så skifter du Mark, tones fotoet om.

Et stående opslag med titlen Mød holdet og en detaljelinje om fem mennesker og en espressomaskine på en varm gradient-Mark

Den slags opslag, en duotone redder: teambilleder taget på forskellige telefoner, samlet i ét sæt af Markens farver.

Et stående produktopslag, der annoncerer en efterårskaffeblanding på samme gradient-Mark

Et produktopslag: den slags, hvor et blidt farveslør binder fotoet til baggrunden, men lader kaffen ligne kaffe.

## Sådan laver du et duotonefoto i Gradiently

1. **Tilføj fotoet** Upload eller indsæt dit eget, eller vælg et blandt de gratis stockfotos i Studio.
2. **Åbn fotoredigering** Markér fotoet, og åbn dets redigeringspanel, hvor lys, farve, filtre og toning findes.
3. **Vælg Duotone under Mark-farver** Fotoet lægges med det samme over i Markens palet. Prøv også Farveslør og Monokrom; det koster ingenting at sammenligne.
4. **Indstil kontrasten** Hæv kontrasten, hvis resultatet ser fladt ud, og lysstyrken, hvis ansigter falder ned i skyggefarven.
5. **Beskær til en form** Indram det som et kvadrat, en cirkel, en bue eller en blob, så det passer til layoutet.
6. **Skift Mark for at teste** Skift designets Mark, så følger toningen med, og du kan prøve flere looks på samme foto.

> **Alt kan stadig redigeres** Toninger og filtre brændes aldrig ind i fotoet. Du kan ændre eller nulstille dem når som helst, og det betyder noget, når en kampagne skifter farve midtvejs.

## Filtre, lys og farve til finishen

Toningen bestemmer farvefamilien; de andre justeringer bestemmer følelsen. De ligger i tre grupper, og forudindstillingerne er en hurtig start, før du finjusterer. Er fotoet et produktbillede, så få baggrunden på plads først: [baggrunde til produktfotos](https://gradiently.design/da/guide/product-photo-backgrounds) dækker det.

| Gruppe | Justeringer | Hvad du skal gribe efter |
| --- | --- | --- |
| Lys | Lysstyrke, kontrast | Kontrast først til enhver duotone; den adskiller de to farver |
| Farve | Mætning, temperatur, grøn til magenta, farvetone | Temperatur til at gøre et farveslør varmere eller koldere; lad mætningen være på en duotone |
| Finish | Sløring, vignettering | En let vignettering trækker øjet indad i portrætter |
| Forudindstillinger | Original, Livlig, Blød, Varm, Kold, Falmet, Noir, Film | Film eller Falmet under et farveslør giver let en trykt følelse |

Justeringerne i fotoredigering. Start med en forudindstilling, og justér så lys før farve.

## Beskæringsformer: buer, cirkler og blobs

Et tonet foto i en blød form opleves som designet frem for bare sat ind. Buer føles arkitektoniske og rolige, smukke til indretning, blomsterhandlere og bryllupper og et naturligt valg til [branding for fotografer](https://gradiently.design/da/guide/photographer-branding). Cirkler passer til mennesker: teamsider, talere, anbefalinger. Blobs er legende og passer til mad, børnebrands og alt uformelt. Hold dig til én form pr. design, så sættet ser ensartet ud.

### Undgå

- To mellemtonefarver, der gør fotoet gråt
- En duotone på det ene foto, hvor de ægte farver sælger, fx en kjole
- En ny toning på hvert foto i en karrusel
- Ord over den mest urolige del af fotoet

### Gør

- En dyb skyggefarve og et blegt højlys
- Farveslør til produkter, duotone til mennesker og steder
- Én toning på tværs af alle fotos i et sæt
- Ord i det rolige område, hvor Automatisk tekstfarve vælger farven

Står der tekst på selve fotoet, dækker [læsbar tekst på fotos](https://gradiently.design/da/guide/readable-text-on-photos) placeringen, og en ensartet toning er en af de enkleste vaner bag [brandkonsistens](https://gradiently.design/da/guide/brand-consistency).

## En duotone i CSS

På et website kan du bygge samme effekt med blandingstilstande: gør fotoet gråtonet, multiplicér det over højlysfarven, og gør det så lysere med skyggefarven.

```css
.duotone {
  position: relative;
  background: #fbcfe8; /* highlight colour */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e1b4b; /* shadow colour */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Indigo skygger og rosa højlys. Se [mix-blend-mode på MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for browserunderstøttelse.

## FAQ

### Hvad er et duotonefoto?

Et foto, hvis farver er erstattet af to: én til skyggerne og én til højlysene, med tonerne imellem blandet fra parret.

### Hvordan laver jeg et duotonefoto i mine brandfarver?

I Gradiently markerer du fotoet, åbner fotoredigering og vælger Duotone; den bruger farverne i designets Mark. I CSS kombinerer du et gråtonet billede med blandingstilstande.

### Hvad er forskellen på duotone og et farveslør?

En duotone erstatter alle fotoets farver med to farver. Et farveslør lægger en farve over fotoet og bevarer noget af dets egen, så motiverne stadig ser naturlige ud.

### Hvilke farver giver en god duotone?

En meget mørk skyggefarve og en meget lys højlysfarve. To mellemtoner får fotoet til at se fladt og mudret ud.

### Kan jeg beskære fotos til former i Gradiently?

Ja. Fotos kan indrammes som kvadrater, cirkler, buer eller blobs.