Imagens borradas em Web Design: Como fazê-las funcionar
É um fato inegável: o uso de imagens desfocadas é uma técnica de design da web em 2015. Parece que em todo lugar que você olha há algum elemento de desfoque.
Mas essa não é uma solução para alguns dos seus problemas fotográficos. É uma técnica distinta que requer prática para aperfeiçoar e atenção aos detalhes para acertar. Portanto, antes de seguir a tendência, pense nas opções de uso de imagens desfocadas para decidir se é certo para você e como você pode fazer o melhor uso dessa técnica em seus projetos.
Fotos desfocadas estão na moda
Poderíamos dedicar páginas inteiras ao número de sites usando imagens borradas. A tendência é grande agora.
Essa é a primeira coisa que você precisa considerar ao avançar com uma ideia que inclui imagens borradas.
- Deseja fazer parte da tendência?
- Você pode usar a tendência de uma maneira um pouco diferente de outros sites por aí?
- É o seu estilo ou um pouco usado demais para o seu gosto?
- Você ficará bem com o design do site depois que a tendência seguir seu curso? Ou você precisará de um novo design?
Não há absolutamente nada de errado em criar algo moderno. Mas é uma decisão que você deve considerar desde o início. Criar um site com imagens borradas - dependendo do seu estilo e uso preferidos - pode ser uma tarefa demorada e, se você não tem experiência em software de edição de fotos, pode exigir treinamento adicional.
O borrão é uma técnica a ser usada com boas imagens
Essa pode ser a frase mais importante que você lerá ao pensar em desfocar imagens. Só funciona se você tiver boas imagens para começar. O desfoque não é uma maneira de "corrigir" uma imagem ruim.
Para dizer de outra maneira. Se você recebe uma fotografia borrada e é instruído a criar um site com ela, isso não está na moda. Essa é uma foto ruim. Se essa é a sua situação, essa não é a técnica para você. (Você pode começar a pensar em criar um elemento artístico com tipografia ou procurar imagens.)
Porém, se você tem uma imagem bacana da qual deseja aproveitar mais algumas milhas ou usar de uma nova maneira, a técnica desfocada é uma possibilidade. Existem várias maneiras de pensar sobre o desfoque (abordaremos cada um abaixo), mas o primeiro passo é entender como realmente criar o desfoque. A Adobe tem um ótimo tutorial para você começar no Photoshop.
Desfocar a imagem inteira
Uma das coisas que contribuiu para a tendência da imagem borrada é outra: o uso de cabeçalhos de heróis. Os designers estão reunindo as técnicas para criar imagens borradas no estilo de tela cheia como os visuais dominantes nas páginas de entrada dos sites.
O site da Trellis Farm usa uma imagem icônica de uma fazenda para fornecer uma sensação de lugar para o site. Para aumentar o interesse, a foto é em preto e branco - para transmitir aquela sensação antiga - e em camadas com um ótimo tipo de letra para chamar sua atenção. A rolagem continua com a sensação ao adicionar cor à mistura. O desfoque é bom porque você sabe o que está na imagem e ajuda o usuário a se concentrar no texto e nas próximas ações a serem executadas na tela.
Por que funciona:
- Um fundo desfocado pode focar as camadas na parte superior da imagem, como texto. Apenas certifique-se de selecionar um tipo de letra impactante.
- Ele pode criar um novo interesse com uma imagem que você usa regularmente, como uma foto de marca padrão.
- Ele pode ser usado com praticamente qualquer tipo de conteúdo, em praticamente qualquer esquema de cores, para apelo universal.
Planos de fundo e imagens em camadas
O desfoque não é apenas uma técnica de imagem completa. Partes específicas de uma imagem podem ser desfocadas por impacto. Embora seja mais comum ver planos de fundo desfocados com um foco nítido em primeiro plano, alguns designers adotam a abordagem oposta para uma nova opção que tem um primeiro plano desfocado com um plano de fundo em foco.
A agência Anchour usa desfoque nas fotos em sua página de destino. A técnica usada na imagem pode fazer parte da fotografia real ou você pode criar o mesmo efeito no software de edição de fotos. O truque aqui quando você está criando esse estilo de desfoque é que você não pode dizer que ele foi "criado" e deve parecer natural como se a foto fosse tirada dessa maneira. (No software de edição de fotos, você pode fazer isso usando a ferramenta Gaussian Blur com pequenos ajustes incrementais.)
Por que funciona:
- O desfoque cria contraste visual e pode suavizar a sensação de ocupado de uma imagem.
- Altera a perspectiva da imagem e a visão do usuário do visual.
- Ele adiciona dimensão a uma imagem que pode parecer plana para uma renderização quase 3D.
Desfoque dramático para arte abstrata
Quando você precisa de uma imagem de plano de fundo para o seu site, mas pode encontrar um padrão ou cor adequado, uma foto com um desfoque dramático pode ser a solução perfeita. Considere um desfoque dramático como algo que torna instantaneamente o conteúdo da foto imperceptível e pode tornar a foto completamente irreconhecível.
Essa é uma opção popular para sites que estão lançando ou promovendo um projeto digital com um fundo desfocado abstrato da foto atrás de um telefone mostrando o produto. O Piction usa a mesma imagem em segundo plano e no telefone com diferentes níveis de zoom e desfoque para um design bastante atraente.
Por que funciona:
- Traz o foco para o produto em destaque.
- Cria um plano de fundo personalizado em vez de usar um padrão que pode estar em outros sites.
- Dá ao designer controle sobre a cor e a sensação quando se trata de como o desfoque abstrato funciona, desde nitidez a cores e formas suaves, até a legibilidade da imagem de fundo e a conexão com a marca.
Desfoque sutil para qualquer imagem
Um pequeno grau de desfoque também pode funcionar em muitos outros tipos de fotos e não precisa ser usado apenas para uma imagem em tela cheia. Os designers podem adicionar uma pitada de desfoque a uma imagem que precisa de um pouco de foco em primeiro plano para ajudar os usuários a olhar para as partes certas da imagem, estilizar um logotipo ou apenas criar um visual mais complexo.
O logotipo da Zeo usa um borrão sutil, mas agradável, no design redondo. O desfoque obriga a olhar mais de perto o logotipo, devido à forma interessante e às bordas de um lado do logotipo em comparação com a nitidez do outro lado. A técnica é enfatizada ainda mais porque o design do site como um todo usa desfoque em outros lugares, como no fundo da imagem dominante na página de destino.
Por que funciona:
- Pequenas manchas podem criar um elemento de surpresa.
- Desenha o foco para partes específicas de uma foto, com foco visual. (Dê uma olhada em algumas das promoções no site da Zeo para outros usos de desfoque sutil para foco na foto.)
- Pode fornecer a quantidade certa de contraste para sobrepor outros elementos em uma seção de uma imagem, como texto, da mesma forma que um desfoque em tela cheia pode funcionar com um cabeçalho de herói.
Use-o também para vídeo
Você também pode emparelhar a tendência de desfoque com outro elemento de design quente - o vídeo. Você pode usá-lo como faria com qualquer outra técnica de imagem. Funciona da mesma maneira (embora as ferramentas e o processo de edição sejam um pouco diferentes).
O Design de nível 2 usa azul e um efeito de tela para adicionar interesse a um vídeo em tela cheia. (Atualize o navegador para vídeos borrados.) O efeito é divertido e atual e funciona com vídeos que deveriam ter uma aparência antiga. Os rápidos loops de vídeo são altamente legíveis e chamam a atenção.
Conclusão
Existem várias maneiras de usar o desfoque de maneira eficaz para projetos de web design. O segredo - se é que existe mesmo - é criar um efeito borrado que se integra perfeitamente ao restante do design. E você pode fazer isso quase pensando em desfoque em extremos.
Use muito desfoque para obter alto impacto e um sentimento abstrato. Use um desfoque mínimo para criar um contraste sutil e definir o foco. Como em qualquer projeto, teste-o em alguns usuários antes do lançamento e veja o que eles pensam. Eles percebem o borrão? (A maioria dos não designers não pensa sobre isso.)
