Você investiu muito tempo na configuração do design do seu blog, mas por que as imagens não são exibidas corretamente no Smartphone? Você certificou-se de usar imagens de alta qualidade, mas as más condições de imagem não corrigem a exibição.
Muitas pessoas não percebem que novos dispositivos (especialmente os da Apple) usam tecnologia de exibição avançada que afeta a maneira como as imagens são exibidas, para garantir que sejam exibidas corretamente nos computadores e no Smartphone.
Neste tutorial, tentaremos introduzir um pouco da noção de " retina pronto E mostre como criar uma imagem Retina.
Mas antes de começar, reserve um tempo para dar uma olhada Como instalar um tema WordPress, Quantas plugins devo instalar no WordPress.
Então vamos ao trabalho.
Explicação das imagens Retina Pronto
As telas dos dispositivos têm melhorado continuamente em qualidade nos últimos anos, e as telas da Apple, em particular, têm trabalhado muito para serem extremamente nítidas e visíveis. Tecnologia "Retina DisplayÉ uma marca da Apple usada para descrever um certo tipo de display com aptidões particulares.
As telas de retina visam exibir texto e imagens com a maior clareza possível, sem pixels visíveis a olho nu. O desafio para os designers é que a tela varia de acordo com o tamanho da tela do dispositivo e a proximidade do usuário com a tela.
Ao dividir a largura física da tela pelo número de pixels exibidos horizontalmente, temos os pixels por polegada (ppi, também chamado de ppp para pontos por polegada). " alta DPI É usado para se referir a qualquer dispositivo que tenha mais de 200 pixels por polegada. Isso inclui todos os dispositivos de exibição " retina (Da Apple) e alguns dispositivos de outros fabricantes.
Como criar imagens "Retina Ready" com Photoshop
Trabalhar com imagens em resolução dupla ou quádrupla significa que você poderá ampliar o zoom para ver todos os pequenos detalhes; no entanto, arquivos extremamente pesados causam um problema de desempenho e um desafio ao armazenamento de arquivos.
A solução para a maioria dos designers foi criar várias camadas e agrupá-las, ativando-as conforme necessário. usando a função "comps » Photoshop para trabalhar na resolução original e exportar os formatos necessários (usando uma ação como "retinizar").
O desafio desses dois métodos é que você não pode ver várias imagens ao mesmo tempo. Se você precisar ver as diferenças nas imagens nos tamanhos necessários, precisará alternar entre elas ou exportá-las.
Para sorte de nós, entusiastas do Photoshop, a Adobe adicionou um recurso que torna a criação de várias imagens mais fácil. Agora você pode criar várias telas lado a lado usando a prancheta característica e criar vários tamanhos de imagem usando o gerador. Vamos ver como isso funciona.
1 - Crie sua primeira prancheta
A nova ferramenta Prancheta, introduzido em Photoshop CC 2015, está oculto atrás da ferramenta de movimento. Você pode clicar na ferramenta no menu ou usar Shift + V para alternar entre " Deslocamento "E" prancheta »:
Para criar um plano de trabalho, clique e arraste uma área. A nova prancheta será exibida no painel de camadas com o nome padrão "Prancheta 1".
Leia também: Por que os freelancers precisam de uma programação diária
2 - Configure sua prancheta
Você pode adicionar as camadas necessárias à sua prancheta e elas serão aninhadas como as camadas são (permitindo criar uma estrutura de camada apropriada) Sugerimos adicionar seus vários arquivos, como formas, para que sejam posicionados como você deseja antes de prosseguir para a próxima etapa.
3 - Duplique sua prancheta
Depois que sua primeira prancheta estiver configurada para atender às suas necessidades, você pode duplicá-la usando o menu de contexto. Clique com o botão direito em "Artboard 1" na área de camadas e selecione "Duplicate Artboard". Isso cria outra "prancheta" semelhante, contendo a mesma estrutura com todos os seus componentes:
Para descobrir também: Como duplicar um artigo ou uma página no WordPress
4 - Coloque suas bancadas (prancheta)
A grande vantagem de usar pranchetas é poder ver todas as imagens ao mesmo tempo. Para fazer isso, basta posicionar suas bancadas de acordo com suas necessidades. Existem várias maneiras de fazer isso:
Use o painel que aparece quando um plano de trabalho é selecionado para inserir as coordenadas X e Y no canto superior esquerdo do plano de trabalho.
Arraste a prancheta selecionada para qualquer posição no Photoshop. A prancheta ativada de forma inteligente, para que você possa alinhar automaticamente várias pranchetas para que suas posições sejam travadas no espaçamento anterior.
Use as teclas de seta do teclado para mover um plano de trabalho selecionado.
Veja também nosso tutorial sobre: Como consertar a biblioteca de mídia que não funciona mais no WordPress
5 - Redimensione suas pranchetas (quando necessário)
Se você precisar ajustar o tamanho de suas pranchetas, você terá novamente várias opções:
- Redimensione usando as alças que aparecem quando você seleciona uma prancheta.
- Use o painel de opções logo abaixo do menu "Arquivo" para escolher tamanhos predefinidos, larguras ou alturas fixas, ou alternar entre retrato e paisagem.
- Use o painel "Propriedades" que aparece quando uma bancada é selecionada para alterar o tamanho e acessar os tamanhos predefinidos.
6 - Crie sua arte
Agora você pode trabalhar com suas bancadas, substituir componentes e fazer alterações conforme necessário. Assumindo que a configuração original não foi alterada, você agora terá imagens perfeitas em pixels com todos os componentes no lugar certo.
Veja também nossa lista de 26 WordPress temas com arraste sistema e soltar para criar suas páginas
7 - Configure a ferramenta "Gerar"
« Gerar »Permite exportar pranchetas, camadas ou grupos usando sintaxe de nomenclatura especial. Este é um atalho para salvar para a web. Para garantir que " Gerar Está ativado para o seu PSD, vá para " Arquivo> Gerar> Ativos de imagem "(Arquivo> Gerar> Imagem Ativos):
8 - Renomeie suas pranchetas
Gerar « Arte "Para salvar componentes de imagem você está trabalhando com base nas opções definidas no conjunto de camadas ou na sua prancheta. Existem algumas opções que você pode definir:
- O formato de arquivo. Adicione uma extensão (.jpg, gif ou png ) para salvar o arquivo em questão, por exemplo: header-main.png Os componentes da imagem serão salvos na mesma pasta do arquivo PSD, mas com "-assets" como sufixo.
- Compactação de arquivo. Após a extensão, você pode adicionar um número indicando o nível de compactação usado. Para " opt.jpg »Você pode usar porcentagens e, para png, usar os respectivos bits: 8, 24 ou 32.
- Escala de saída. Você pode definir a escala de saída adicionando porcentagem ou pixels (a largura para altura) antes do nome da imagem (por exemplo 100% header-main.png8 ).
- mais imagens. Você pode exportar várias imagens da mesma prancheta (prancheta) usando uma vírgula ou sinal de mais para separar os nomes das imagens. Cada imagem pode, portanto, ter suas próprias opções, desde que cada nome da imagem seja único.
A combinação dessas opções permite que você crie constantemente componentes de imagem complexos para suas pranchetas:
Se imagens padrão forem necessárias para todas as suas bancadas, o " Gerar Permite criar um parâmetro para aplicar a cada um por padrão. Para criar esse parâmetro, adicione uma camada vazia na parte superior do seu documento com as seguintes opções:
- Palavra-chave padrão: O nome deve começar com isto para sair da ferramenta " Gerar »A liberdade de usá-lo como padrão.
- Escala de saída: Permite definir a escala de saída com uma porcentagem ou pixels (a largura para altura).
- Pasta / sufixo: Defina o nome da pasta na qual as imagens devem ser salvase um sufixo para adicionar aos nomes dos arquivos.
Resumo
É tudo o que você tem aí, tente ampliar a imagem para ver como o último se comporta. Se necessário, você pode testar a imagem em seu blog WordPress, enviando-a para sua biblioteca de mídia.
Sinta-se à vontade para nos fazer perguntas conforme necessário.
Descubra também alguns plugins premium do WordPress
Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.
Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.
1. WP Ultimate Social
Este é o pacote definitivo de todos os recursos de rede social de que você pode precisar em seu blog WordPress.
Leia também o nosso 8 WordPress plugins para integrar um sistema de redução
Suas principais características são: vários ícones de redes sociais, compartilhamento social que permite a qualquer pessoa compartilhe o conteúdo do seu site (artigos, páginas, imagens, mídia) em redes sociais populares (Facebook, Twitter, Linkedin, GooglePlus, Pinterest, DiggBuffer, RedditTumblr, Stumbleupon, Xing, Weibo, VK, Delicious), conexão ao site com suas credenciais de mídia social, um contador para exibir os números de seus seguidores e compartilhamentos do seu site e de outros.
Descarregar | Demo | hospedagem na web
2. WP Slick Slider Image Carrossel Pro
Se você é um seguidor ávido do pacote Visual Composer, usar o plug-in WP Slick Slider é uma opção que você precisará considerar. Com quase modelos predefinidos do 100, você definitivamente encontrará o que está procurando sem codificar nada.
Essa é uma opção para levar a sério, especialmente para usuários de Visual Composer. Seus recursos são, entre outros: um layout totalmente responsivo com suporte para arrastar e soltar, um shortcodes, RTL e suporte multilíngue, um design bonito e muito mais
Descarregar | Demo | hospedagem na web
3. WordPress Social Sidebar
O nome disso WordPress Plugin deve dizer-lhe mais ou menos para que serve este último. Mas diremos que o WordPress Plugin Social Sidebar irá ajudá-lo a criar uma barra lateral em seu site com o objetivo de ajudá-lo a fazer compartilhe rapidamente seu conteúdo em diferentes redes sociais.
Suas funcionalidades incluem: integração automática com seu tema WordPress, a capacidade de configurá-lo de cima para baixo, compatibilidade com vários navegadores recentes e modernos, a possibilidade de colocar suas barras laterais da esquerda para a direita, acima ou na parte inferior das páginas, quatro conjuntos de cores são oferecidos de forma nativa, um layout responsivo e muito mais.
Descarregar | Demo | hospedagem na web
Outros recursos recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- plugins 7 WordPress para criar designs para seus produtos
- 4 WordPress plugins para salvar no DropBox
- Como adicionar rolagem infinita a um blog WordPress
- 10 WordPress plugins para receber doações em seu blog
Conclusão
Aqui ! É isso para este tutorial, espero que ele permita que você crie imagens "Retina" para o seu blog WordPress.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia em Criação de blog WordPress.
Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.
...
