Seguir

Imagens no Spark Page

Há dois tipos de imagem no Adobe Spark Page: as que são cortadas e as que não são cortadas. Os tipos de imagem Preencher tela e Janela podem cortar fotos dependendo da foto e do tamanho da tela. Os tipos de imagem No texto e Largura total nunca cortam fotos.

imageTypes.png

É importante entender que alguns tipos de imagem (como Preencher tela e Janela) não deixarão de ser cortados. Além disso, não é possível prever como essas imagens serão cortadas, complicando ainda mais. Isso acontece porque uma página do Spark Page pode ser exibida em qualquer dispositivo com qualquer tamanho de tela, logo, as imagens serão cortadas de milhares de maneiras diferentes, ao mesmo tempo!

Se você ainda não entendeu por que isso acontece, não se preocupe! Vamos exemplificar. Imagine que temos uma imagem como esta, de 5 pessoas andando na praia:

sample.png

Crédito: Unsplash

Vamos ver como essa imagem aparece para dois clientes visualizando minha página do Spark Page ao mesmo tempo. Um desses clientes está no celular e o outro está no desktop. Conforme mostrado abaixo, há duas maneiras de eles verem essa imagem no Spark Page:

 

Opção A: permitir cortes

O que eles veem:

compare1_r3_c1.png

Vantagens e desvantagens

O usuário obtém uma experiência mais imersiva às custas de uma imagem cortada.

Algumas telas mostrarão menos de 5 pessoas na praia. Quantas pessoas são exibidas depende do tamanho da janela do navegador do cliente.

Tipos de imagem do Spark Page para essa opção: 

  • Imagem Título
  • Imagem Preencher tela
  • Imagem Janela
  • Glideshow
  • Layout dividido

 

Opção B: não permitir cortes

O que eles veem:

compare1_r1_c1.png

Vantagens e desvantagens

A imagem não está cortada, mas a experiência não é tão imersiva.

Todas as 5 pessoas podem ser vistas por todos os clientes.


Tipos de imagem do Spark Page para essa opção:

  • Imagem No texto
  • Imagem Largura total

 

Explicação da opção A: permitir cortes

Observe que essas fotos sempre preenchem a tela inteira de qualquer dispositivo em que são exibidas. Se você girar o dispositivo, o tamanho da tela mudará (de alto para largo e vice-versa) e, mesmo assim, a foto ainda preencherá a tela inteira. Não há espaços brancos ao redor da foto.

Esse efeito dá uma aparência imersiva à foto em dispositivos de qualquer tamanho em que o site está sendo exibido. Mesmo que a janela do navegador seja redimensionada ou a orientação do dispositivo seja mudada, a foto continuará preenchendo a tela inteira.

Mas esse efeito imersivo tem consequências: às vezes, sua imagem precisará ser cortada para que isso seja possível. Isso ocorre porque a foto tem uma taxa de proporção única, mas será exibida em várias telas com proporções diferentes. Mesmo se essa foto se encaixasse perfeitamente no desktop, de modo algum caberia no celular.

Então, temos que escolher... encolhemos a foto e colocamos barras brancas nas laterais para que a imagem inteira seja exibida ou esticamos e cortamos a imagem para que parte dela sempre preencha completamente a tela. Quando você escolhe o tipo de imagem “Preencher tela”, está basicamente dizendo ao Spark Page que está disposto a sacrificar o corte, pois é mais importante que a foto preencha a tela toda.

 

Explicação da opção B: não permitir cortes

Se você decidir que sua foto não deve ser cortada, pode escolher os tipos de imagem “No texto” ou “Largura total”. Nenhum desses tipos corta a foto. Lembre-se de que talvez seja necessário rolar para ver a foto inteira, mas ela estará lá.

Esses tipos de imagem são úteis quando você não pode sacrificar o corte para obter uma sensação imersiva proporcionada por fotos que preenchem a tela. Isso não quer dizer que um tipo de imagem é melhor do que o outro. Ambos podem ser eficazes dependendo da foto e do contexto do documento. Imagens No texto, por exemplo, são ótimas para logotipos, visto que você raramente quer que eles sejam esticados na tela.

 

Observação sobre “Título”, “Janela”, “Glideshow” e “Layout dividido”

Não vamos nos aprofundar nos tipos de imagem título/janela/glideshow/layout dividido aqui, apenas comentaremos que os cortes neles funcionam de maneira similar ao tipo de imagem “Preencher tela” acima.

 

Dicas

Se você não entendeu completamente as explicações acima, lembre-se apenas destas dicas:

  • Use o tipo de imagem Preencher tela para criar uma experiência imersiva na tela, mas lembre-se de usar fotos que possam ser cortadas sem causar problemas.
  • Lembre-se de que o corte de imagens Preencher tela será diferente em dispositivos e tamanhos de tela diferentes, portanto, verifique se o resultado está satisfatório em várias situações. Você pode verificar isso rapidamente no desktop e explorar várias proporções redimensionando a janela do navegador.
  • Certifique-se de que o “Ponto focal” esteja definido em todas as fotos Preencher tela. Isso orienta o Spark Page sobre qual é a parte mais importante da foto, assim ele pode tentar manter esse ponto na tela quando a imagem for cortada.
  • Se o enquadramento de sua foto for importante ou houver detalhes nas bordas que não devem ser cortados, use as imagens No texto ou Largura total.



Dicas para fotógrafos: como faço para tirar fotos que funcionam com o recurso Preencher tela?

A composição, ou como os objetos são posicionados dentro de uma fotografia, é provavelmente o maior diferencial de uma foto incrível. Se você pegar a melhor foto do mundo e cortá-la só um pouquinho, a qualidade dela já pode ser reduzida significativamente. Da mesma maneira, tirar uma foto mediana e cortá-la de modo mais criativo pode elevar seu nível. Fotógrafos usam muitas técnicas de composição, algumas das quais estão listadas aqui (em inglês).

Vamos usar como exemplo algumas das regras listadas nesse artigo:

  • Rule of thirds (Regra dos terços)
  • Frame within the frame (Framing)
  • Golden Triangles (Triângulos de ouro)
  • Golden Ratio (Proporção áurea)

Essas regras são todas extremamente sensíveis ao corte. Fotografias que usam essas regras geralmente não são grandes candidatas para imagens Preencher tela no Spark Page, devido ao corte que ocorrerá em alguns dispositivos.

Mas se os fotógrafos quiserem usar os tipos de imagens imersivas no Spark Page, eles obterão melhores resultados se entenderem e se adaptarem aos fatores mencionados acima. Algumas maneiras de contornar esses problemas são: usar alternativas como o recurso Ponto focal do Spark Page, ter um único objeto na foto e evitar regras sensíveis a cortes.

Outra opção é focar em outras regras fotográficas listadas no artigo acima, pois algumas fotos podem se destacar com o recurso Preencher imagem:

  • Centered composition and symmetry (Simetria e composição centralizada)
  • Leading lines (Seguir as linhas)
  • Patterns & Textures (Padrões e texturas)
  • Simplicity and minimalism (Simplicidade e minimalismo)

Compreender e se adaptar a essas limitações em fotos é essencial para criar as melhores páginas do Spark Page para o seu público.

 

Esse artigo foi útil?
Usuários que acharam isso útil: 2 de 3
Tem mais dúvidas? Envie uma solicitação