Como criar ativos de imagem de exibição de Retina para sites de melhor aparência

Você investiu muito tempo em tornar o seu novo site perfeito. Então por que parece tão difuso quando você vê isso no seu iPhone? Você se certifica de usar belas imagens de alta qualidade, mas elas não parecem estar sendo exibidas corretamente.

Muitas pessoas não percebem que dispositivos mais recentes especialmente aqueles da Apple. Usam tecnologia de exibição avançada que afeta o modo como as imagens são exibidas. Felizmente, existem alguns truques que você pode usar para garantir que suas imagens sejam otimizadas. Garantindo que o seu site seja perfeito em dispositivos como o seu iPhone.

Este artigo apresentará o tópico da exibição de retina e como isso impactará as imagens do seu site. E em seguida, mostrará como criar recursos de imagem que se exibirão bem em telas retina.

 

Explicando imagens em tela de retina

 

As telas de dispositivos continuaram a melhorar a qualidade ao longo dos últimos anos. E a Apple, em particular, tem trabalhado para tornar suas telas extremamente claras e visíveis. Na verdade, a “Retina Display” é uma marca da Apple usada para descrever as telas de suas Dispositivos mais recentes.

As telas Retina visam exibir texto e imagens o mais afiado possível, sem pixels visíveis a olho nu. O desafio para os designers é que os displays de retina não são um padrão. E ele varia de acordo com o tamanho da tela do dispositivo (por exemplo, uma tela de relógio em comparação com um tablet) e com a proximidade de um usuário típico com a tela.

Ao falar sobre displays de retina, temos que pensar sobre a densidade de pixels. Que é o número de pixels que uma tela pode caber em uma distância fixa. Isso não é o mesmo que a resolução, que é o número de pixels em toda a altura e largura de um dispositivo. Uma tela menor (como um iPhone) com a mesma resolução que uma maior, teria uma maior densidade de pixels.

O que é DPI?

Dividir a largura física da exibição pelo número de pixels exibidos horizontalmente nos dá os pixels por polegada (ppi, também chamado de dpi para pontos por polegada). ‘High DPI’ é usado para se referir a qualquer dispositivo com mais de 200 pixels por polegada. Isso inclui todos os dispositivos de exibição de retina da Apple e alguns dispositivos de outros fabricantes.

Tradicionalmente, os gráficos da web foram otimizados em 72dpi. Uma imagem dessa densidade exibida em qualquer dispositivo DPI elevado (especialmente uma exibição retina) será exibida de duas maneiras:

 

  1. Como uma fração do tamanho, se mostrado no DPI do dispositivo.
  2. Mostrado nas dimensões originais com pixels extra adivinhados (interpolados) e preenchidos reduzindo a qualidade da imagem.

As imagens não otimizadas para displays de retina mostrarão pixelação como a imagem à esquerda.

Isso significa que para a melhor exibição de imagem de qualidade em dispositivos de exibição retina, você precisa estar trabalhando com imagens de resolução superior. Isso garante que a imagem pode ser exibida em uma densidade de pixels apropriada para essas telas mais recentes. Vejamos como você pode fazer isso dentro do seu Photoshop.

Como usar o Photoshop para criar imagens de exibição de Retina

Trabalhar com imagens com dupla ou quadruplicar a resolução significa que você precisará ampliar para poder ver qualquer detalhe. Mas arquivos de imagem extremamente grandes podem criar problemas de desempenho e desafios de armazenamento de arquivos.

A solução para a maioria dos designers tem sido criar múltiplas camadas e grupos, ativá-los e desativar, conforme necessário. Usando o recurso comps do Photoshop, ou para trabalhar na resolução original e exportar os tamanhos de que eles precisam.

O desafio com ambos os métodos é que você não pode ver várias imagens ao mesmo tempo. Se você precisa ver as diferenças nas imagens nos tamanhos necessários, você deve alternar entre eles ou exportar e depois retrabalhar.

Felizmente para nós amantes do Photoshop, a Adobe adicionou funcionalidades que tornam a criação de imagens múltiplas ainda mais fácil. Agora você pode criar várias telas lado a lado usando o recurso da placa de arte e criar vários tamanhos de imagem usando o Generar. Vamos ver como isso funciona para criar imagens para displays de retina.

1. Crie seu primeiro quadro de arte

A nova ferramenta Artboard, apresentada no Photoshop CC 2015, pode ser encontrada escondida atrás da ferramenta Mover. Você pode clicar na ferramenta no menu ou usar Shift + V para alternar entre Move e Artboard : 

Para criar uma mesa de trabalho, clique e arraste uma área. A nova placa de arte será exibida no painel Layers com um nome padrão da Artboard 1 .

2. Configurar o seu quadro de arte

Você pode adicionar as camadas que você precisa para a sua área de trabalho. E elas serão aninhadas de forma semelhante aos grupos de camadas – permitindo que você crie uma estrutura de camada apropriada. Sugerimos adicionar seus vários ativos, como formas e tipos, para que eles estejam posicionados conforme você precisa deles antes de passar para o próximo passo.

 

3. Duplique seu quadro de arte

Uma vez que sua primeira área de trabalho esteja configurada de acordo com suas necessidades, você pode duplicá-la usando o menu contextual. Clique com o botão direito do mouse no Artboard 1 no painel Layers e selecione Duplicate Artboard. Isso cria outra placa de trabalho do mesmo tamanho e posição, contendo exatamente a mesma estrutura de camada com todos os recursos incluídos:

A duplicação da sua mesa de trabalho oferece uma cópia perfeita do pixel do layout.

4. Posicione suas quadros de arte

A grande vantagem de usar quadros de arte é poder ver todas as suas imagens ao mesmo tempo. Para fazer isso, basta posicionar suas pranchas de parede conforme necessário. Existem várias maneiras de mover uma mesa de trabalho:

  • Use o painel Propriedades que aparece quando uma mesa de trabalho é selecionada para inserir as coordenadas X e Y para o canto superior esquerdo da mesa de trabalho.
  • Arraste a mesa de trabalho selecionada para qualquer posição dentro do Photoshop. A mesa de trabalho é um guia inteligente habilitado, para que você possa alinhar automaticamente várias plataformas e suas posições serão bloqueadas para o espaçamento anterior.
  • Use as teclas de seta do teclado para mover uma mesa de trabalho selecionada. Uma tecla de seta por si só vai empurrar a placa por um pixel, enquanto segurando Shift + Arrow irá movê-lo em dez pixels.

 

5. Redimensionar suas quadros de arte (se necessário)

Se você precisa ajustar o tamanho de suas pranchetas, você novamente tem várias opções:

  • Redimensione-os usando as alças que aparecem quando você seleciona uma mesa de trabalho.
  • Use o painel de opções logo abaixo do menu Arquivo para escolher tamanhos predefinidos, definir larguras ou alturas personalizadas ou alternar entre a orientação retrato e paisagem.
  • Use o painel Propriedades que é exibido quando uma mesa de trabalho é selecionada para alterar o tamanho e acessar os tamanhos predefinidos.
  • Você pode escolher um tamanho predefinido para a sua área de trabalho usando a guia Propriedades.

    6. Crie sua arte

    Agora você pode trabalhar com suas pranchetas, substituir recursos de imagem e fazer alterações conforme necessário. Supondo que sua configuração original foi bem, você terá imagens de pixel perfeito com todos os recursos no lugar certo.

    7. Configurar a ferramenta Gerar

    Gerar permite exportar quadros de arte, camadas ou grupos usando uma sintaxe de nomeação especial. Ele atua como um atalho Salvar para Web. Para garantir que o Generate esteja ativado para o seu PSD, vá para Arquivo> Gerar> Ativos da imagem:

    8. Renomeie suas quadros de arte

    Gerar trabalhos, salvando os recursos da imagem conforme você trabalha com base nas opções que você definiu no nome do grupo de camadas – ou, neste caso, na sua área de trabalho. Existem algumas opções que você pode definir:

     

    • Formato de arquivo. Adicione uma extensão (como -opt.jpg , .gif ou .png ) para salvar o arquivo relevante – por exemplo, header-main.png. Os recursos da imagem serão salvos na mesma pasta que o arquivo PSD, mas com um sufixo-assets.
    • Compressão de arquivos. Após a extensão, você pode adicionar uma figura indicando a compactação de nível usada. Para opt.jpg você pode usar porcentagens e para. png use 8 , 24 ou 32 para os respectivos formatos de bits – por exemplo, header-main.png8.
    • Escala de saída. Você pode definir a escala da saída adicionando a porcentagem, ou pixels (largura por altura) antes do nome da imagem (por exemplo, 100% header-main.png8 ).
    • Imagens múltiplas. Você pode exportar várias imagens da mesma mesa de trabalho usando uma vírgula ou um sinal de mais para separar os nomes das imagens. Cada imagem pode assim ter suas próprias opções desde que cada nome de imagem seja exclusivo – por exemplo, 100% header-main.png8, 200% header-main.png8 .

    A combinação dessas opções permite que você crie consistentemente ativos de imagens complexas em suas plataformas:

    Configurações Padrão

    Se forem necessárias imagens padrão para todas as suas pranchetas, a ferramenta Gerar permite que você crie uma configuração padrão para se aplicar a cada uma delas. Para criar essa configuração, adicione uma camada vazia na parte superior do documento com as seguintes opções:

  • Palavra-chave padrão: o nome deve começar com isso para permitir Gerar saber usar como padrão.
  • Escala de saída: como anteriormente, defina a escala da saída com uma porcentagem ou pixels (largura por altura).
  • Pasta / sufixo: defina o nome da pasta onde as imagens devem ser salvas e um sufixo para adicionar aos nomes dos arquivos.

    Ao adicionar várias opções, você pode criar automaticamente as imagens que você precisa para exibições de retina – por exemplo, final 100% padrão / @ 1x, 200% fim / @ 2x, 300% fim / @ 3x. Você pode adicionar extensões a qualquer placa que você deseja exportar usando a opção padrão.

    Se você usa outras ferramentas de design como o Sketch , eles possuem seus próprios mecanismos de exportação – mas se você for um fã do Photoshop, esse fluxo de trabalho reduzirá drasticamente o tempo que você leva para criar as múltiplas imagens necessárias para exibições de retina.

    Como otimizar seus ativos de imagem de exibição Retina

    O tamanho do arquivo é sempre uma grande consideração ao criar imagens para o seu site. As imagens devem ser carregadas nos navegadores do visitante, por isso, quanto maior o tamanho dos arquivos, mais lento será o seu site. Um belo site que leva uma eternidade para carga provavelmente não será visto por seus visitantes, pois eles não vão querer esperar.

    Você pode começar a otimizar as imagens do seu site , certificando-se de que está usando as opções relevantes ao salvar seus arquivos no Photoshop. À medida que abordamos o fluxo de trabalho acima, você salvará suas imagens como arquivos JPEG ou PNG . O formato JPEG é melhor para fotografias com muitas cores, pois usa compressão para reduzir o tamanho do arquivo. O formato PNG funciona melhor para screenshots e imagens de design, como ícones e botões, mas usa compressão sem perdas para que os tamanhos dos arquivos sejam maiores.

    O WordPress também oferece ajuda na otimização, criando vários tamanhos de imagem quando você faz upload de imagens para o seu site WordPress. Isso ajuda a garantir que você use uma imagem de tamanho apropriada – por exemplo, as miniaturas serão usadas em listas de várias postagens. Além disso, existem plugins de otimização de imagem para ajudar a otimizar qualquer imagem à medida que são carregadas.

    Conclusão

    Está tudo muito bem escolhendo imagens incríveis e de alta resolução para o seu site, mas se você não as preparou corretamente antes de fazer o upload, elas poderiam parecer inesperadamente pixeladas quando visualizadas em dispositivos de exibição retina mais recentes.

    Criar imagens de exibição de retina no Photoshop é um pedaço de bolo – vamos recapitular as etapas:

  • Crie suas pranchetas, tendo o cuidado de configurar, duplicar e posicioná-las corretamente.
  • Redimensione as suas prateleiras, se necessário, antes de criar as imagens em questão.
  • Configure a ferramenta Gerar para auxiliar na exportação de suas imagens.
  • Mude o nome das suas quadros de arte no Generate, configurando-as como opções padrão, se necessário.
  • As dicas compartilhadas acima devem ajudá-lo a entender como criar imagens otimizadas para exibição em telas de dispositivos mais recentes – permitindo que você crie belas imagens que se parecem com todas as telas.

    Veja também

    Como inserir um vídeo do youtube no site com DIVI

    Como inserir vídeos do Youtube no site com DiviO módulo de vídeo O Módulo de Vídeo é perfeito para adicionar um único vídeo em qualquer lugar do seu site em qualquer layout. Basta fazer o upload de um vídeo ou definir um URL de vídeo e o Divi irá inseri-lo em sua...

    Como criar uma página em HTML e subir via cPanel

    Como criar uma página em HTML e subir via cPanel

    HTML é uma linguagem de marcação utilizada para o desenvolvimento de sites. Apesar de existir plataformas que facilita o desenvolvimento sem a necessidade de conhecimento de códigos, há quem se aventure em desenvolver sites escrevendo todo o código "na mão",...

    Share This