Original do site: André Buzzo – Criação de sites e desenvolvimento web || Como mesclar imagem e texto

Mescar imagem e texto é bem popular. Originada bem antes da concepção sobre web design, textos em imagens podem provocar um engajamento emocional maior e contextualização mais rica. Antigamente, as imagens precisavam ser bem pequenas para que pudessem ser renderizadas por baixas conexões. Entretanto, as conexões hoje são mais rápidas e a densidade das telas aprimorada, nos permite utilizar imagens mais pesadas em nossos designs.

Decisões sobre o uso desse tipo de recurso no design são extremamente importantes, e desenvolver boas práticas para gerenciar essa prática é imperativo para manter a qualidade de nossos projetos. Não é simplesmente colocar um texto sobre a imagem e decretar que o negócio ficou apresentável!

Nesse artigo, discutiremos cinco aspectos diferentes sobre como inserir textos sobre imagens que vão lhe ajudar a misturar imagem e escrita de maneira apropriada.

Nota: o conteúdo desse artigo também pode ser aplicado na composição de vídeos com textos.

1 – CONTRASTE ATRAVÉS DE CORES E BRILHO

Usar imagens que tem um contraste significante com texto é imperativo. Particularmente procure usar imagens escuras com escrita clara ou imagens utilizando filtros ou um elemento de “sobrecamada” (overlay), que possam assegurar a utilização de contraste suficiente.

Algumas dicas para conseguir contraste de cor e brilho de maneira apropriada:

• Se você não consegue imediatamente visualizar as formas das letras, seu contraste está baixo.
• Contraste não é necessariamente “escuro contra claro”; cores complementares também oferecem contraste de maneira natural.
• Se a imagem é complexa e cheia de foco, utilize um overlay ou editar a imagem será provavelmente a melhor opção a seguir.

OUTROS EXEMPLOS

2 – CONTRASTE POR DIMENSÃO E POSICIONAMENTO

Para mesclar imagem e texto, a cor não seria a única maneira de promover contraste em uma imagem onde um texto foi sobreposto a ela. Selecionando o tamanho do texto e posicionamento em relação às áreas com maior quantidade de objetos focados é essencial, e isso se relaciona à capacidade de leitura como um todo.

Nesse exemplo, escolhemos uma imagem com uma área relativamente grande que representa o céu. Essa é área perfeita para inserção de texto. Em contraste, um local muito menos legível para se inserir o texto seria o centro da imagem, onde a linha do horizonte se apresenta.

OUTROS EXEMPLOS

3 – Legibilidade através de profundidade

Escolha uma imagem que utilize profundidade em seus elementos. Isso vai lhe proporcionar um fundo bem suave para inserção de texto, o que aumentará a legibilidade da escrita. Coloque seu texto na parte “não focada” dos elementos da imagem, e tenha a certeza de que o texto contraste adequadamente com a cor primária da área fora de foco.

Podemos utilizar o recurso facilmente quando posicionamos o texto em locais de baixo foco, como no exemplo abaixo:

OUTROS EXEMPLOS

4 – Assunto abordado pela imagem

Mesclar imagem e texto só é realmente eficaz quando a reunião de ambos significa alguma coisa. Por exemplo, não utilize uma imagem genérica se existe alguma outra mais específica para expressar uma ideia ou conceito. Quando escolher uma imagem, pense em quais emoções/sentimentos ela pode levantar e em qual contexto literal ela se encontra, especialmente quando relacionada com o tom da mensagem que se deseja transmitir.

Algumas dicas:

• Escolha imagens que tenha uma sentença completa; o usuário precisa claramente entender o assunto da imagem, e assimilar a ação que a imagem pretende passar, se essa for tal intenção.
• Não escolha imagens onde o foco principal é mínimo em relação ao restante da composição.
• Tenha em mente a importância da objetividade da imagem. Se a imagem não consegue transmitir a mensagem ou se ela tem poucos detalhes, o uso de camadas pesadas de efeitos ou filtros talvez possa aumentar eficácia da imagem.

EXEMPLOS

5 – Consciência Tridimensional

Pense sobre o lugar no qual o texto aparece em relação ao nível de foco dos elementos presentes na imagem. O texto parece ocupar um lugar secundário na imagem, ou ele é o maior destaque da peça? O texto se mescla com a imagem, ou ele aparece desconexo em algum ponto do eixo? Como o texto se relaciona com os elementos de maior foco da imagem, especificamente?

Uma regra de ouro: quanto menor o texto, mais destaque ele terá.

Neste exemplo usamos o texto no primeiro plano, que nos permite sentir que o texto está mais próximo de nós do que os arbustos ao fundo da imagem. Apesar do alto nível de detalhe do plano de fundo nossos olhos automaticamente identificam as longas linhas e as maiores formas da fonte do texto, interpretando a mensagem de maneira muito mais fácil do que a expressa no exemplo ruim. No ruim, os caracteres de texto sequestram toda a extensão do eixo –z incluindo as folhas da paisagem.

OUTROS EXEMPLOS

Original -> https://webdesign.tutsplus.com/articles/tips-to-help-you-properly-mix-text-with-imagery–cms-21575

Fonte: André Buzzo – Criação de sites e desenvolvimento web
Post original: Como mesclar imagem e texto
Conteúdo originalmente criado por André Buzzo

Por guedes em 30 de julho de 2020   /   Sem categoria   /   Deixe um comentário