20 truques do Photoshop para designers da Web

Provavelmente, todo web designer por aí tem seu próprio conjunto de truques favoritos do Photoshop na manga. Por uma boa razão. A poderosa edição de imagens da Adobe é um grampo do mundo do design da web. Poucos programas podem rivalizar com este excelente software e sua ampla gama de recursos.

No entanto, embora a maioria dos web designers conheça o Photoshop, sempre há mais coisas que você pode aprender. Afinal, o programa não é apenas poderoso, mas também complexo. Além disso, novas coisas são adicionadas por meio de atualizações regularmente.

Por esse motivo, é uma boa ideia continuar explorando sua ferramenta favorita. Para ajudá-lo a fazer isso, neste artigo, veremos alguns dos melhores truques do Photoshop que existem. Coisas que podem melhorar seu fluxo de trabalho, tornar o trabalho e a vida mais fáceis, economizar tempo e ajudá-lo a projetar os melhores sites possíveis.

Você está pronto para aprender mais sobre o Photoshop? Então continue lendo.

Truques do Photoshop para transformá-lo em um assistente de design da Web

As dicas a seguir variam do nível iniciante ao material mais complexo. Cada um deles é escolhido para ajudá-lo a ser o melhor web designer que você pode ser.

1. Simplifique seu espaço de trabalho

Vamos começar com o básico. A primeira coisa a fazer para melhorar seu fluxo de trabalho é configurar o Photoshop de uma forma que suporte a maneira como você o usa. Afinal, o trabalho fica mais fácil com uma ferramenta mais afiada.

Por esse motivo, nossa primeira parada é Janela> Área de trabalho> Gráfico e Web . Escolher esta opção mudará as ferramentas disponíveis para aquelas que você provavelmente usará para web design.

Depois disso, vá para Editar> Preferências . Aqui, uma das paradas mais importantes são as unidades e réguas. Qualquer que seja a medida que você escolher aqui (provavelmente pixels), será o padrão para todos os documentos que virão.

(Dica rápida: para alterar as réguas de documentos únicos, basta clicar com o botão direito sobre eles e escolher a unidade de medida desejada.)

Depois disso, vá para Preferences> Performance> History & Cache e clique em Web / UI Design .

Isso mudará as configurações de cache para favorecer arquivos menores com muitas camadas, que é com o que você trabalhará principalmente.

No mesmo lugar, você também pode escolher o número de estados do histórico. Essa é a quantidade de etapas que você pode voltar se quiser desfazer algo.

Por fim, saia das preferências, feche todos os documentos e pressione o botão T no teclado. Isso fará com que o menu de fontes apareça na parte superior da tela. Tudo o que você definir aqui será, a partir de então, padrão para novos documentos. Porque ninguém gosta tanto do Myriad Pro.

2. Aprenda atalhos de teclado

Para qualquer programa que você usa regularmente, aprender os atalhos do teclado geralmente é um bom conselho.

Por exemplo, eu uso Ctrl + Alt + 2/3 para criar títulos h2 e h3 enquanto escrevo esta postagem. É muito mais rápido do que usar a barra de ferramentas do editor, pois não preciso tirar as mãos do teclado.

O mesmo é verdade para o Photoshop. Saber como executar ações com simples pressionamentos de tecla é infinitamente mais rápido do que clicar nos menus.

Mencionaremos vários atalhos de teclado ao longo deste artigo. No entanto, também recomendo esta folha de dicas para aprender os atalhos para as operações mais comuns do Photoshop. Além disso, também é uma boa ideia criar o hábito de examinar atalhos de teclado para coisas que você faz repetidamente.

3. Camadas de grupo e nome

Ao trabalhar com o Photoshop, você trabalhará com muitas e muitas camadas. Além de obter a maioria dos elementos em sua própria camada, modificações como brilho / contraste também são adicionadas como camadas.

Por esse motivo, pode ficar confuso muito rapidamente. Felizmente, existem várias opções para torná-lo menos importante, duas das quais são a capacidade de agrupar e nomear camadas.

Primeiro, clicando duas vezes em qualquer camada, você pode alterar seu nome para o que quiser.

Dessa forma, você entenderá facilmente se uma camada contém a imagem de fundo, o menu ou a barra lateral.

Como alternativa, você também pode escolher várias camadas de uma vez, mantendo pressionada a tecla Ctrl para escolher camadas individuais ou Shift para marcar uma gama de camadas vizinhas. Ctrl + G então os transforma em um grupo.

Como alternativa, clique com o botão direito nas camadas e escolha a opção de grupo a partir daí. De qualquer forma, suas camadas ficam muito mais organizadas. Além disso, você também pode nomear as camadas agrupadas!

4. Camadas de filtro

Nomear e agrupar camadas é um bom começo. No entanto, ao trabalhar com dezenas ou mesmo centenas deles, você ainda pode se confundir facilmente.

Nesses casos, você também tem a opção de filtrar suas camadas. Para fazer isso, basta usar o menu na parte superior do menu Camadas para filtrar por tipo, nome, efeito, cor e muito mais.

Como alternativa, selecione diretamente uma camada usando a ferramenta Mover , mantendo pressionada a tecla Ctrl e clicando em uma camada ou objeto.

5. Crie uma grade

Imagem por PureSolution / shutterstock.com.

A grade é um dos princípios mais importantes em web design. Traz ordem ao design e ajuda a posicionar seus objetos. Por esse motivo, só faz sentido criar uma grade no Photoshop também.

Para fazer isso, use Exibir> Novo layout do guia . Como alternativa, crie guias horizontais e verticais simplesmente clicando em uma régua e arrastando para o documento. Use Ctrl para mover guias existentes.

6. Importar amostras de cores

Você pode carregar amostras de cores diretamente no Photoshop a partir de arquivos HTML, CSS ou SVG. Dessa forma, você tem um excelente ponto de partida para o seu esquema de cores ao trabalhar com ativos existentes, como um logotipo.

Para aproveitar as vantagens desse truque do Photoshop, basta abrir o painel Amostras , clicar no menu suspenso no canto superior direito e escolher Carregar Amostras . Agora navegue até o arquivo em questão e abra-o para importar sua nova amostra de cor.

7. Salvar formas personalizadas

Especialmente ao projetar várias páginas para o mesmo site ou sites com design semelhante, você se verá usando os mesmos objetos e formas repetidamente. Por esse motivo, faz sentido salvá-los como formas personalizadas para reutilização rápida.

Para fazer isso, clique com o botão direito na forma em questão com a ferramenta de seleção de caminho (a seta preta). Em seguida, escolha Definir forma personalizada . Depois de fazer isso, você pode acessar essa forma por meio das opções da barra superior da ferramenta Forma Personalizada . Basta clicar no menu suspenso onde está escrito Forma: e escolher a forma salva.

8. Alternar entre as cores de fundo e de primeiro plano

Dois alternam entre as cores de fundo e de primeiro plano sem clicar no ícone, basta pressionar X no teclado. Além disso, se quiser que as cores voltem ao preto e branco simples, pressione D.

9. Altere a opacidade por meio do teclado

Outro atalho de teclado: para qualquer ferramenta que pode alterar a opacidade, você pode simplesmente fazer isso por meio do teclado. Os números de 1 a 0 definirão a opacidade para algo entre 10% e 100%. A mesma coisa também funciona com a opacidade das camadas.

10. Desenhe linhas retas

Para desenhar uma linha reta com qualquer ferramenta, simplesmente mantenha pressionada a tecla Shift . Depois disso, você pode desenhar uma linha (horizontal e verticalmente) que será automaticamente reta como um prego. Como alternativa, clique em dois pontos diferentes para criar uma linha reta entre eles.

11. Amostra de cor

O próximo passo em nossa sacola de truques do Photoshop é a capacidade de obter amostras de qualquer cor. Se precisar da cor de qualquer objeto, segure o botão Alt e clique no matiz que deseja. Isso funciona com o pincel , o lápis , o balde de tinta e qualquer outra ferramenta que use cores.

12. Adicionar ou remover da seleção

Você pode adicionar a uma seleção existente mantendo a tecla shift pressionada e selecionando a parte que deseja incluir. Para subtrair, faça a mesma coisa, mas com o botão Alt .

13. Desfaça mais de uma etapa

A maneira clássica de desfazer sua última ação é usar Ctrl + Z. No entanto, isso só funciona para a última coisa que você fez. Para voltar várias etapas, use Ctrl + Alt + Z.

14. Alterar dinamicamente o tamanho do pincel

Para alterar o tamanho do pincel, não há necessidade de clicar no menu suspenso e arrastá-lo para o tamanho certo. Em vez disso, simplesmente segure Alt e o botão direito do mouse e arraste para a esquerda e para a direita para diminuir e aumentar o tamanho do pincel.

15. Salvar para a web

Usar a função Safe for Web é essencial, pois garante que o tamanho da imagem seja o menor possível. Isso é muito importante para melhorar a velocidade do site.

No Photoshop, você pode fazer isso em Arquivo> Exportar> Salvar para a web . No entanto, uma maneira mais rápida é usar Ctrl + Alt + Shift + S. Você é bem vindo!

16. Abra as imagens como camadas

Às vezes, é necessário importar um grande número de imagens para o Photoshop de uma vez. No entanto, quando você simplesmente os arrasta para sua área de trabalho, será solicitado que você os coloque manualmente.

Uma maneira mais prática de fazer isso é Arquivo> Scripts> Carregar arquivos na pilha . Navegue até as imagens em questão, marque-as e pressione OK duas vezes. Agora, cada imagem será automaticamente importada para sua própria camada.

17. Copie CSS diretamente do Photoshop

Um dos truques mais confortáveis ​​do Photoshop para web designers é o fato de que o programa cria CSS que você pode exportar. Não há necessidade de digitar tudo à mão ou usar tentativa e erro para implementá-lo.

Para tirar proveito disso, basta clicar com o botão direito do mouse em uma camada e selecionar Copiar CSS . Como alternativa, use o menu Camada para encontrar a mesma opção. Agora você tem todos os estilos necessários para simplesmente colar em sua folha de estilo ou em qualquer outro programa que estiver usando.

18. Projeto para vários dispositivos e orientações ao mesmo tempo

Hoje em dia, projetar para a web significa projetar para uma infinidade de dispositivos diferentes. Em tempos em que os dispositivos móveis eclipsam os computadores desktop em todo o mundo, a implementação do design móvel é uma obrigação.

Fonte: ComScore

Felizmente, o Photoshop tem pranchetas e objetos inteligentes que tornam muito fácil dimensionar seu design para diferentes formatos.

Eu poderia descrever ambos em detalhes aqui, no entanto, Phlearn fez um excelente tutorial sobre isso que faz um trabalho muito melhor do que eu poderia fazer:

19. Use o processamento automático para tarefas repetitivas

Outro recurso incrível do Photoshop é o processamento automático. Isso significa que você pode repetir tarefas gravadas uma e outra vez, sem ter que executá-las manualmente. Isso é muito útil, por exemplo, se você precisa salvar muitas imagens para a web.

É assim que funciona. Primeiro, abra seu arquivo. Em seguida, abra Ações ( Alt + F9 ), encontre Criar Nova Ação e clique nele. Forneça um nome e, opcionalmente, atribua a ele uma combinação de teclas e uma cor.

Para gravar suas ações, pressione Gravar . Em seguida, execute a operação que deseja repetir. No meu caso, abro uma imagem de uma pasta e salvo para a web em outra pasta.

Uma vez feito isso, pare de gravar. Agora você pode reutilizar essa ação para todas as outras imagens, economizando muito tempo. Para obter mais informações sobre o que você pode automatizar no Photoshop, consulte este artigo.

20. Pré-visualizar no dispositivo

Finalmente, junto com o Photoshop, a Adobe também oferece um aplicativo que permite visualizar seu trabalho em vários dispositivos iOS. A melhor coisa: você é capaz de observar as mudanças no dispositivo à medida que as faz no computador.

Para fazer isso, instale o aplicativo e use o Device Preview para conectar o Photoshop a um dispositivo externo via USB ou wi-fi. Você encontra a opção em Janela> Visualização do dispositivo .

Quais são seus truques favoritos do Photoshop?

O Photoshop é uma das ferramentas de web design mais usadas que existe. Seus recursos poderosos o tornam perfeito para projetar sites e ativos de alta qualidade.

No entanto, com grande poder também vem grande complexidade e, especialmente para iniciantes, pode levar algum tempo para dominar o software.

Para encurtar a curva de aprendizado, fornecemos acima uma série de truques úteis do Photoshop para web designers. Eles facilitam muitas coisas, desde o fluxo de trabalho geral até o processamento automático de arquivos.

Conhecer o Photoshop por dentro e por fora é um grande investimento em seus resultados financeiros. Quando você consegue fazer as coisas mais rápido, você pode assumir mais trabalho, gerando mais receita. E isso nunca pode ser uma coisa ruim.

Quais são alguns dos seus truques favoritos do Photoshop? Por favor, deixe-nos saber na seção de comentários abaixo para que possamos todos ajudar uns aos outros.

Imagem em miniatura do artigo por Creative Stall / shutterstock.com