Sobreposição em gradiente: tingir fotos sem escondê-las

Uma sobreposição em gradiente é uma camada de cor que se apaga sobre uma foto, aplicada por cima para tingi-la, unificar um conjunto de imagens ou deixar um título legível. O segredo é que ela se apaga: uma parte da foto recebe muita cor, o resto quase nada. É por isso que uma sobreposição em gradiente parece pensada, enquanto uma caixa preta chapada a 50 por cento parece um remendo. Você escolhe onde a cor cai, com que força e como ela se mistura com a imagem embaixo.

Quatro tipos de sobreposição em gradiente

Quase toda sobreposição que você vê em sites, pôsteres ou posts é de um destes quatro tipos. Saber qual você precisa poupa muito tempo mexendo em controles de opacidade.

A máscara: uma sobreposição para texto

A máscara é a peça mais usada. Ela começa totalmente transparente e escurece em direção à borda onde está o texto, geralmente embaixo ou à esquerda. A foto fica intacta onde está o assunto, e o texto ganha uma base escura e calma. Use um tom escuro da própria foto em vez de preto puro: um marrom profundo sobre um interior quente, um azul-marinho sobre uma paisagem marítima. Preto puro parece uma mancha.

Os 40 por cento superiores da máscara inferior são totalmente transparentes, o que mantém rostos e produtos claros. O escuro cresce pela metade de baixo e atinge o máximo bem na borda, exatamente onde fica a legenda. Para mais formas de manter o texto legível sobre imagens, leia texto legível sobre fotos.

Lavagens de cor e modos de mesclagem

A lavagem de cor é como as marcas fazem fotos de banco de imagens, fotos de celular e fotos de eventos parecerem da mesma família. Coloque um gradiente com duas cores da marca sobre a foto e mude o modo de mesclagem. O modo de mesclagem decide como a cor se mistura com a imagem, e ele importa mais que as próprias cores.

Como adicionar uma sobreposição em gradiente a uma foto

1. 1

   Defina para que serve a sobreposição

   Texto, clima ou consistência. Uma máscara para texto, uma lavagem para clima e consistência. Se você não sabe dizer qual, provavelmente não precisa de nenhuma.

2. 2

   Pegue um tom escuro da foto

   Escolha a cor mais profunda que já existe na imagem para uma máscara, ou duas cores da marca para uma lavagem.

3. 3

   Desenhe o gradiente sobre a área que precisa

   Comece transparente sobre o assunto e vá escurecendo em direção à borda com o texto. Mantenha a transição longa para que nenhuma linha apareça.

4. 4

   Escolha um modo de mesclagem

   Normal para máscaras, multiplicação para fotos claras, tela para escuras, cor para um único tom.

5. 5

   Baixe a opacidade até quase sumir

   Depois suba um passo. As melhores sobreposições só são notadas quando você as desliga.

6. 6

   Confira o texto no tamanho do celular

   Reduza o design ao tamanho em que ele será visto e leia cada palavra. Um contraste que funciona no monitor pode falhar no celular; contraste de cor traz as metas a buscar.

Quão escura deve ser uma sobreposição em gradiente

Como limite prático, se a borda mais escura da máscara precisa passar de uns 80 por cento para o texto ficar legível, a foto está movimentada demais naquele ponto. Mude o texto de lugar, corte de outro jeito ou escolha uma imagem mais calma. Uma lavagem sobre a imagem inteira precisa de muito menos, senão a foto deixa de parecer foto.

Sobreposições em gradiente num site

Na web você pode empilhar a sobreposição e a foto numa única declaração, o que mantém as duas juntas quando a imagem muda. A sobreposição vem primeiro porque o CSS pinta a primeira camada por cima. O conjunto completo de técnicas, incluindo modos de mesclagem e pseudoelementos, está em sobreposição em gradiente no CSS.

.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

Uma lavagem que combina com a sua marca sempre

As sobreposições se desencontram quando cada designer escolhe as próprias cores. No Studio do Gradiently, as fotos podem ser tingidas com as cores do seu Mark em mono, duotone ou lavagem, então imagens de fontes diferentes compartilham uma paleta sem ajuste manual. E quando o texto fica sobre um Mark em vez de uma foto, ele acalma sozinho a área atrás do texto, sem sobreposição nenhuma. Leia fotos duotone nas cores do seu Mark para ver como a lavagem funciona.