Ir para o conteúdo principal

Como criar imagens "Retina" para um blog WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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 WordPressQuantas 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 »:

Prancheta-Art1-photoshop-tutorial-wordpress-create-images-retina prontoPara 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:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

photoshop prancheta duplicação

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.

Propriedade da área de trabalho do photohop

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):

gerar photoshop ferramentagerar photoshop ferramenta

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:

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

  • 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:

gestão de componentes de imagem

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 outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência 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.wp-ultimate-sociais

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.

Wp slick slider e carrossel de imagens profissional

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 desse plug-in do WordPress deve informar aproximadamente para que serve. Mas parece que o plug-in Social Sidebar do WordPress o ajudará a criar uma barra lateral no seu site para ajudá-lo a compartilhe rapidamente seu conteúdo em diferentes redes sociais.

Barra lateral social Wordpress

Suas funcionalidades estão entre outras: integração automática ao seu tema WordPress, a possibilidade 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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Descarregar Demo | hospedagem na web

Outros recursos recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

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

... 

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
10 ações
ação10
chilrear
Enregistrer