# Duotone-kuvat brändiväreissä: yksivärinen, kaksivärinen ja verho

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

Yhteen sopimattomat valokuvat saavat syötteen nopeasti näyttämään lainatulta. Omilla väreillä sävyttäminen kokoaa kuvapankkikuvat, puhelinkuvat ja tuotekuvat yhdeksi perheeksi.

## The short version

- Duotone-kuva korvaa kuvan sävyt kahdella värillä: toinen varjoille ja toinen vaaleille kohdille.
- Gradientlyssä minkä tahansa kuvan voi sävyttää yksiväriseksi, kaksiväriseksi tai väriverholla. Kaksivärinen ja Väriverho käyttävät designin Markin värejä.
- Kuvien sävyttäminen taustan väreillä saa eri lähteistä tulevat kuvapankki- ja puhelinkuvat näyttämään yhdeltä harkitulta sarjalta.
- Kuvien valoa ja väriä voi myös säätää, viimeistellä Filmi- ja Noir-suodattimilla sekä rajata kaariksi, ympyröiksi ja vapaiksi muodoiksi.
- Kaikkia kuvasäätöjä voi edelleen muokata. Voit vaihtaa sävytyksen tai Markin myöhemmin, ja kuva seuraa mukana.

**Duotone-kuva** vaihtaa kuvan luonnolliset värit kahteen valittuun väriin: tummaan varjoille ja vaaleaan huippuvaloille. Välisävyt sekoittuvat tästä parista. Brändiväreillä tehtynä se muuttaa minkä tahansa valokuvan selvästi sinun näköiseksesi. Gradientlyssä kuvaa voi sävyttää kolmella tavalla: yksiväriseksi, kaksiväriseksi tai väriverholla. Kaksivärinen ja Väriverho käyttävät suoraan designin Markin värejä, joten kuva ja tausta sopivat aina yhteen.

## Miten duotone-kuva toimii

Ajattele kuva ensin mustavalkoisena. Jokaisen pikselin kirkkaus on 0-100 prosenttia. Duotone maalaa sitten tummimmat pikselit varjovärillä, kirkkaimmat huippuvalovärillä ja loput vastaavalla kohdalla niiden välistä asteikkoa. Tulos säilyttää kuvan kaikki yksityiskohdat mutta ei sen alkuperäisiä värejä.

- Indigosta poskipunaan: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Syvästä sinivihreästä hiekkaan: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Häränverestä voinkeltaiseen: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Laivastonsinisestä jäähän: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Neljä duotone-asteikkoa. Varjot saavat vasemman värin, vaaleat kohdat oikean ja kuvan keskisävyt asettuvat niiden väliin.

Hyvän duotonen erottaa sameasta sen päiden välinen kontrasti. Hyvin tumma varjoväri ja hyvin vaalea huippuvaloväri säilyttävät kasvot ja tuotteet selkeinä. Kaksi keskisävyä tuottaa tasaisen, samean kuvan. Ilmeen historiaa ja laajempia käyttötapoja käsittelee [duotone-efekti](https://gradiently.design/fi/guide/duotone-effect).

## Yksivärinen, kaksivärinen ja väriverho: kolme sävytystapaa

| Sävytys | Vaikutus | Värien lähde | Käyttö |
| --- | --- | --- | --- |
| **Yksivärinen** | Muuttaa kuvan mustavalkoiseksi | Neutraalit harmaat | Muotokuvat, sitaatit, vakava tai ajaton sisältö |
| **Kaksivärinen** | Muuntaa varjot ja valot kahdeksi väriksi | Mark | Vahvat julkaisut, tapahtumajulisteet, erilaiset tiimikuvat |
| **Väriverho** | Levittää Markin värin kuvaan säilyttäen osan omista väreistä | Mark | Tuotekuvat ja ruoka, joissa kohteen pitää näyttää aidolta |
| Ei mitään | Säilyttää kuvan värit | Valokuva | Tärkeät tuotekuvat, joissa värin tarkkuus ratkaisee |

Kuvan muokkauksen sävytysvaihtoehdot. Kaksivärinen ja Väriverho käyttävät Markisi värejä, joten Markin vaihtaminen sävyttää kuvan uudelleen.

Pystyjulkaisu otsikolla Tapaa tiimimme, tiedot viidestä ihmisestä ja espressokoneesta lämpimällä liukuväri-Markilla

Julkaisu, jonka duotone pelastaa: eri puhelimilla otetut tiimikuvat yhtenäistyvät Markin väreillä.

Syksyn kahvisekoituksen tuoteuutinen pystyjulkaisuna samalla liukuväri-Markilla

Tuotejulkaisu, jossa kevyt väriverho sitoo kuvan taustaan ja pitää kahvin kahvin näköisenä.

## Näin teet duotone-kuvan Gradientlyssä

1. **Lisää valokuva** Lataa tai liitä oma kuvasi tai valitse Studion maksuttomista kuvapankkikuvista.
2. **Avaa Kuvan muokkaus** Valitse kuva ja avaa sen muokkauspaneeli, jossa ovat valo, väri, suodattimet ja sävytys.
3. **Valitse Markin värit -kohdasta Kaksivärinen** Kuva muunnetaan heti Markin palettiin. Kokeile myös Väriverhoa ja Yksiväristä. Vertailu ei maksa mitään.
4. **Säädä kontrasti** Nosta kontrastia, jos tulos on lattea, ja kirkkautta, jos kasvot jäävät varjoväriin.
5. **Rajaa muotoon** Rajaa neliöksi, ympyräksi, kaareksi tai vapaaksi muodoksi asettelun mukaan.
6. **Kokeile toista Markia** Vaihda designin Mark, niin sävytys seuraa mukana. Voit kokeilla useita ilmeitä samalla kuvalla.

> **Kaikkea voi muokata edelleen** Sävytyksiä ja suodattimia ei tallenneta pysyvästi kuvaan. Voit muuttaa tai nollata ne milloin tahansa, mikä auttaa kampanjan värien vaihtuessa kesken matkan.

## Viimeistele suodattimilla, valolla ja värillä

Sävytys määrittää väriperheen, muut säädöt tunnelman. Ne jakautuvat kolmeen ryhmään, ja esiasetuksilla pääset nopeasti alkuun ennen hienosäätöä. Jos kuvaat tuotetta, hoida tausta ensin: [tuotekuvien taustat](https://gradiently.design/fi/guide/product-photo-backgrounds) auttaa siinä.

| Ryhmä | Säädöt | Mistä aloittaa |
| --- | --- | --- |
| Valo | Kirkkaus, kontrasti | Duotonessa ensin kontrasti, sillä se erottaa kaksi väriä |
| Väri | Kylläisyys, lämpötila, vihreä-magenta, sävy | Lämpötila lämmittää tai viilentää väriverhoa; jätä duotonen kylläisyys rauhaan |
| Viimeistely | Sumennus, vinjetointi | Kevyt vinjetointi vetää katseen muotokuvan keskelle |
| Esiasetukset | Alkuperäinen, Eloisa, Pehmeä, Lämmin, Viileä, Haalistunut, Noir, Filmi | Filmi tai Haalistunut väriverhon alla luo helposti painetun tunnun |

Kuvan muokkauksen säädöt. Aloita esiasetuksella ja säädä valoa ennen väriä.

## Rajausmuodot: kaaret, ympyrät ja vapaat muodot

Sävytetty kuva pehmeässä muodossa näyttää suunnitellulta eikä vain pudotetulta sivulle. Kaaret tuntuvat arkkitehtonisilta ja rauhallisilta. Ne sopivat sisustukseen, kukkakauppoihin, häihin ja luontevasti myös [valokuvaajan brändäykseen](https://gradiently.design/fi/guide/photographer-branding). Ympyrät sopivat ihmisille: tiimisivuille, puhujille ja asiakaspalautteisiin. Vapaat muodot ovat leikkisiä ja sopivat ruokaan, lastenbrändeihin ja epämuodolliseen sisältöön. Käytä yhtä muotoa designia kohti, jotta kokonaisuus pysyy yhtenäisenä.

### Vältä

- Kaksi keskisävyä, jotka tekevät kuvasta harmaan
- Duotone kuvassa, jossa aito väri myy, kuten mekossa
- Eri sävytys karusellin joka kuvassa
- Sanat kuvan levottomimman osan päällä

### Tee näin

- Syvä varjoväri ja vaalea huippuvalo
- Väriverho tuotteille, duotone ihmisille ja paikoille
- Yksi sävytys kuvasarjan joka kuvaan
- Sanat rauhalliselle alueelle, värin valitsee Automaattinen muste

Jos teksti on kuvan päällä, [luettava teksti valokuvissa](https://gradiently.design/fi/guide/readable-text-on-photos) käsittelee sijoittelua. Yhtenäinen sävytys on myös yksi yksinkertaisimmista [brändin yhtenäisyyden](https://gradiently.design/fi/guide/brand-consistency) tavoista.

## Duotone CSS:llä

Verkkosivulla voit rakentaa saman efektin sekoitustiloilla: muuta kuva harmaasävyiseksi, kerro se huippuvalovärin päälle ja vaalenna sitten varjovärillä.

```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;
}
```

Indigonväriset varjot ja poskipunanväriset huippuvalot. Tarkista selaintuki [MDN:n mix-blend-mode-ohjeesta](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode).

## FAQ

### Mikä on duotone-kuva?

Kuva, jonka värit korvataan kahdella: toinen varjoille ja toinen huippuvaloille. Välisävyt sekoittuvat näistä kahdesta.

### Miten teen duotone-kuvan brändiväreilläni?

Valitse Gradientlyssä kuva, avaa Kuvan muokkaus ja valitse Kaksivärinen. Se käyttää designin Markin värejä. CSS:ssä yhdistä harmaasävyinen kuva sekoitustiloihin.

### Mitä eroa on duotonella ja väriverholla?

Duotone korvaa kuvan kaikki värit kahdella värillä. Väriverho levittää värin kuvaan säilyttäen osan sen omista väreistä, joten kohteet näyttävät edelleen luonnollisilta.

### Mitkä värit tekevät hyvän duotonen?

Hyvin tumma varjoväri ja hyvin vaalea huippuvaloväri. Kaksi keskisävyä tekee kuvasta lattean ja samean.

### Voiko kuvat rajata muotoihin Gradientlyssä?

Kyllä. Kuvia voi rajata neliöiksi, ympyröiksi, kaariksi ja vapaiksi muodoiksi.