Sobreposições de gradiente: dá cor às fotos sem as esconder

Uma sobreposição de gradiente é uma camada de cor que se esbate sobre uma foto, colocada por cima para a tingir, unificar um conjunto de imagens ou tornar um título legível. O truque está no esbatido: uma parte da foto é muito tocada, o resto quase nada. É por isso que uma sobreposição de gradiente parece pensada, quando uma caixa preta lisa a 50 por cento parece um remendo. Tu escolhes onde a cor cai, quão forte fica e como se mistura com a imagem por baixo.

Quatro tipos de sobreposição de gradiente

Quase todas as sobreposições que vês num site, cartaz ou publicação são de um de quatro tipos. Saber qual precisas poupa muita mexida em cursores de opacidade.

A sombra de proteção: uma sobreposição para texto

Uma sombra de proteção é o cavalo de trabalho. Começa totalmente transparente e escurece em direção à margem onde estão as tuas palavras, normalmente em baixo ou à esquerda. A foto fica intocada onde está o assunto, e o texto ganha um chão calmo e escuro. Usa um tom escuro da própria foto em vez de preto puro: um castanho profundo sobre um interior quente, um azul-marinho sobre uma marinha. O preto puro parece uma mancha.

Os 40 por cento de cima da sombra em baixo estão totalmente limpos, o que mantém rostos e produtos brilhantes. A escuridão cresce pela metade de baixo e atinge o máximo mesmo na margem, exatamente onde fica uma legenda. Para mais formas de manter as palavras legíveis sobre imagens, lê texto legível sobre fotografias.

Sobreposições de lavagem de cor e modos de mistura

Uma lavagem de cor é como as marcas fazem fotos de banco de imagens, instantâneos de telemóvel e imagens de eventos parecerem uma só família. Coloca um gradiente de duas cores da marca sobre a foto e muda o modo de mistura. O modo de mistura decide como a cor se mistura com a imagem, e importa mais do que as cores.

Como acrescentar uma sobreposição de gradiente a uma foto

1. 1

   Decide para que serve a sobreposição

   Texto, ambiente ou consistência. Uma sombra de proteção para texto, uma lavagem para ambiente e consistência. Se não sabes dizer qual, provavelmente não precisas de nenhuma.

2. 2

   Recolhe um tom escuro da foto

   Escolhe a cor mais profunda que já está na imagem para uma sombra de proteção, ou duas cores da marca para uma lavagem.

3. 3

   Desenha o gradiente sobre a zona que precisa

   Começa limpo sobre o assunto e constrói em direção à margem com as palavras. Mantém o esbatido longo para não haver uma linha visível.

4. 4

   Escolhe um modo de mistura

   Normal para sombras de proteção, multiplicar para fotos claras, ecrã para escuras, cor para um tom único.

5. 5

   Baixa a opacidade até quase desaparecer

   Depois sobe-a de volta um passo. As melhores sobreposições só se notam quando as desligas.

6. 6

   Verifica o texto ao tamanho do telemóvel

   Encolhe o design ao tamanho em que será visto e lê todas as palavras. O contraste que funciona num monitor pode falhar num telemóvel; contraste de cor tem os valores a atingir.

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

Como limite de trabalho, se o extremo mais escuro de uma sombra de proteção tem de passar de cerca de 80 por cento para o texto se ler, a foto está demasiado carregada para aquele sítio. Move as palavras, corta de outra forma ou escolhe uma imagem mais calma. Uma lavagem sobre a imagem toda precisa de muito menos, ou a foto deixa de parecer uma foto.

Sobreposições de gradiente num website

Na web podes empilhar a sobreposição e a foto numa só declaração, o que as mantém 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 mistura e pseudoelementos, está em sobreposição de gradiente em 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 condiz sempre com a tua marca

As sobreposições desviam-se quando cada designer escolhe as suas cores. No Studio do Gradiently, as fotos podem ser tingidas nas cores do teu Mark, em mono, duotone ou lavagem, para que imagens de origens diferentes partilhem uma paleta sem acertos manuais. E quando as palavras assentam num Mark e não numa foto, ele acalma sozinho a zona atrás delas, sem qualquer sobreposição. Lê fotos duotone nas cores do teu Mark para perceberes como funciona a lavagem.