# Fotos duotone nas cores da sua marca: mono, duotone e véu

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

Fotos que não combinam são o jeito mais rápido de fazer um feed parecer emprestado. Tingi-las com as suas cores une fotos de banco de imagens, de celular e de produto em uma só família.

## The short version

- Uma foto duotone troca os tons de uma imagem por duas cores: uma para as sombras e outra para as altas luzes.
- No Gradiently, qualquer foto pode ser tingida em monocromático, duotônico ou véu, e o duotônico e o véu tiram suas cores do Mark do design.
- Tingir as fotos com as mesmas cores do fundo faz fontes variadas, de banco de imagens a fotos de celular, parecerem um conjunto deliberado.
- As fotos também podem ser ajustadas em luz e cor, finalizadas com filtros como Filme ou Noir e recortadas em arcos, círculos e manchas.
- Todo ajuste de foto continua editável, então você pode mudar o tom ou trocar o Mark depois e a foto acompanha.

Uma **foto duotone** troca as cores naturais de uma imagem por duas escolhidas: uma cor escura para as sombras e uma cor clara para as altas luzes, com todos os tons intermediários misturados a partir do par. Feita nas cores da sua marca, transforma qualquer fotografia em algo que claramente pertence a você. No Gradiently, você pode tingir uma foto de três formas, monocromático, duotônico ou véu, e o duotônico e o véu tiram as cores direto do Mark do design, então a foto e o fundo sempre concordam.

## Como funciona uma foto duotone

Pense na foto primeiro em preto e branco. Cada pixel tem um brilho de 0 a 100%. O duotone então pinta os pixels mais escuros com a sua cor de sombra, os mais claros com a sua cor de alta luz e todo o resto no ponto correspondente da rampa entre elas. O resultado mantém todos os detalhes da foto, mas nenhuma de suas cores originais.

- Índigo a rubor: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Verde-petróleo a areia: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Vinho a manteiga: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Marinho a gelo: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Quatro rampas de duotone. As sombras recebem a cor da esquerda, as altas luzes a cor da direita, e os tons médios da foto caem no meio.

O truque que faz um duotone ficar bonito, e não turvo, é o contraste entre as duas pontas. Uma sombra bem escura e uma alta luz bem clara mantêm rostos e produtos legíveis. Dois tons médios produzem uma imagem chapada e nebulosa. Para a história e outros usos do visual, veja [o efeito duotone](https://gradiently.design/pt-br/guide/duotone-effect).

## Monocromático, duotônico e véu: três formas de tingir

| Tom | O que faz | Cores vindas de | Use para |
| --- | --- | --- | --- |
| **Monocromático** | Deixa a foto em preto e branco | Cinzas neutros | Retratos, citações, qualquer coisa séria ou atemporal |
| **Duotônico** | Leva sombras e altas luzes para duas cores | O Mark | Posts ousados, cartazes de eventos, fotos de equipe que não combinam |
| **Véu** | Coloca a cor do Mark sobre a foto mantendo um pouco das cores dela | O Mark | Fotos de produto e comida, em que o assunto deve continuar parecendo real |
| Nenhum | Deixa a cor da foto como está | A foto | Fotos principais de produto em que a cor fiel importa |

As opções de tom na edição de foto. O duotônico e o véu usam as cores do seu Mark, então trocar o Mark retinge a foto.

Post vertical intitulado Conheça a equipe, com a linha de detalhe sobre cinco pessoas e uma máquina de espresso, sobre um Mark em degradê quente

O tipo de post que um duotone salva: fotos da equipe feitas em celulares diferentes, unidas em um conjunto pelas cores do Mark.

Post vertical de produto anunciando um blend de café de outono sobre o mesmo Mark em degradê

Um post de produto: daqueles em que um véu suave liga a foto ao fundo mas mantém o café com cara de café.

## Como fazer uma foto duotone no Gradiently

1. **Adicione a foto** Envie ou cole a sua, ou escolha uma das fotos grátis de banco de imagens no Studio.
2. **Abra a edição de foto** Selecione a foto e abra o painel de edição, onde ficam luz, cor, filtros e tom.
3. **Escolha Duotônico em Cores do Mark** A foto é remapeada para a paleta do Mark na hora. Teste também o Véu e o Monocromático; comparar não custa nada.
4. **Ajuste o contraste** Aumente o contraste se o resultado parecer chapado e o brilho se os rostos caírem na cor da sombra.
5. **Recorte em uma forma** Enquadre como um quadrado, um círculo, um arco ou uma mancha, conforme o layout.
6. **Troque o Mark para testar** Mude o Mark do design e o tom acompanha, então você pode testar vários visuais na mesma foto.

> **Tudo continua editável** Tons e filtros nunca são gravados na foto. Você pode mudá-los ou redefini-los a qualquer momento, o que importa quando uma campanha muda de cor no meio do caminho.

## Filtros, luz e cor para o acabamento

O tom define a família de cor; os outros ajustes decidem a sensação. Eles ficam em três grupos, e as predefinições são um jeito rápido de começar antes do ajuste fino. Se a foto for de produto, acerte primeiro o fundo: [fundos para foto de produto](https://gradiently.design/pt-br/guide/product-photo-backgrounds) trata disso.

| Grupo | Controles | O que usar |
| --- | --- | --- |
| Luz | Brilho, contraste | Contraste primeiro em qualquer duotone; ele separa as duas cores |
| Cor | Saturação, temperatura, verde para magenta, matiz | Temperatura para esquentar ou esfriar um véu; deixe a saturação em paz em um duotone |
| Acabamento | Desfoque, vinheta | Uma vinheta leve puxa o olhar para dentro em retratos |
| Predefinições | Original, Vivo, Suave, Quente, Frio, Desbotado, Noir, Filme | Filme ou Desbotado sob um véu dá uma sensação impressa fácil |

Controles da edição de foto. Comece com uma predefinição e depois ajuste a luz antes da cor.

## Formas de recorte: arcos, círculos e manchas

Uma foto tingida em uma forma suave parece desenhada, e não jogada ali. Os arcos parecem arquitetônicos e calmos, lindos para interiores, floriculturas e trabalhos de casamento, e combinam naturalmente com o [branding de fotógrafo](https://gradiently.design/pt-br/guide/photographer-branding). Os círculos combinam com pessoas: páginas de equipe, palestrantes, depoimentos. As manchas são divertidas e combinam com comida, marcas infantis e tudo informal. Mantenha uma forma por design para que o conjunto pareça consistente.

### Evite

- Duas cores de tom médio que deixam a foto cinza
- Um duotone na única foto em que a cor fiel vende, como um vestido
- Um tom diferente em cada foto de um carrossel
- Palavras sobre a parte mais movimentada da foto

### Faça

- Uma cor de sombra profunda e uma alta luz pálida
- Véu para produtos, duotone para pessoas e lugares
- Um tom em todas as fotos de um conjunto
- Palavras na área calma, com a tinta automática escolhendo a cor

Se o texto fica sobre a própria foto, [como deixar o texto legível em fotos](https://gradiently.design/pt-br/guide/readable-text-on-photos) trata do posicionamento, e um tom consistente é um dos hábitos mais simples por trás da [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency).

## Um duotone em CSS

Em um site, você pode criar o mesmo efeito com modos de mesclagem: deixe a foto em tons de cinza, multiplique-a sobre a cor da alta luz e depois clareie com a cor da sombra.

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

Sombras índigo e altas luzes rubor. Veja [mix-blend-mode no MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) para o suporte dos navegadores.

## FAQ

### O que é uma foto duotone?

Uma foto cujas cores são trocadas por duas: uma para as sombras e outra para as altas luzes, com os tons intermediários misturados a partir do par.

### Como faço uma foto duotone nas cores da minha marca?

No Gradiently, selecione a foto, abra a edição de foto e escolha Duotônico; ele usa as cores do Mark do design. Em CSS, combine uma imagem em tons de cinza com modos de mesclagem.

### Qual é a diferença entre duotone e um véu de cor?

Um duotone troca toda a cor da foto por duas cores. Um véu coloca uma cor sobre a foto mantendo um pouco das cores dela, então os assuntos continuam parecendo naturais.

### Quais cores formam um bom duotone?

Uma cor de sombra bem escura e uma cor de alta luz bem clara. Dois tons médios deixam a foto chapada e turva.

### Posso recortar fotos em formas no Gradiently?

Pode. As fotos podem ser enquadradas como quadrados, círculos, arcos ou manchas.