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.O que você vai ler
- Como criar ativos de imagem de exibição de Retina para sites de melhor aparência
- Explicando imagens em tela de retina
- Como usar o Photoshop para criar imagens de exibição de Retina
- 1. Crie seu primeiro quadro de arte
- 2. Configurar o seu quadro de arte
- 3. Duplique seu quadro de arte
- 4. Posicione suas quadros de arte
- 5. Redimensionar suas quadros de arte (se necessário)
- 6. Crie sua arte
- 7. Configurar a ferramenta Gerar
- 8. Renomeie suas quadros de arte
- Configurações Padrão
- Como otimizar seus ativos de imagem de exibição Retina
- Conclusão
Nós temos a solução
Tenha uma equipe profissional pronta para te ajudar rapidamente
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:- Como uma fração do tamanho, se mostrado no DPI do dispositivo.
- 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.
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. exatamente a mesma estrutura de camada com todos os recursos incluídos: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:
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 .
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: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:Nós temos a solução
Tenha uma equipe profissional pronta para te ajudar rapidamente
