12 KiB
| title | localeTitle |
|---|---|
| Photoshop | Photoshop |
Photoshop
O Adobe Photoshop é um software de edição de imagens baseado em pixels (raster) que é usado por uma ampla variedade de criadores de conteúdo para criação e edição de gráficos / fotografias. Desenvolvedores ou designers normalmente usam o Photoshop para criar ou modificar ativos e fotografias para sites. Alguns desenvolvedores também usam o photoshop para designs e modelos de sites, mas outras ferramentas, como o Adobe Experience Design e o Sketch, estão sendo usadas com mais frequência. O Adobe Photoshop está disponível para Windows e Mac, mas atualmente não é Linux.
Uma coisa comum que um desenvolvedor pode fazer no photoshop é modificar o tamanho e a resolução do pixel (72dpi para a web) de uma imagem para um uso adequado da web e modificar imagens para ter planos de fundo transparentes (usando filetypes .gif e .png). É uma prática comum reduzir o tamanho de uma imagem para ser o maior que será necessário usar em um site. Isso reduz o espaço do servidor e os tempos de carregamento, e o Photoshop é uma ferramenta para isso.
Resumo
- Software de edição de imagens baseado em raster
- Um arquivo do Photoshop é um .psd, pode exportar para a maioria dos tipos de arquivos de imagem.
- O Photoshop usa pixels. Certifique-se de criar ativos grandes o suficiente, já que o dimensionamento maior não é possível sem degradação.
- Downloads disponíveis para Windows e Mac através de assinaturas da Adobe.
- Tornando-se menos comumente usado para modelos de interface do usuário / website.
- Muitas ferramentas e recursos avançados para edição de fotos que podem não ser necessários para desenvolvedores.
O Photoshop foi criado em 1988 e é o padrão da indústria para várias tarefas de manipulação de imagens, como:
- Manipulação de fotos, como recortar imagens, mudar cores rapidamente
- Criando mock-ups para sites ou aplicativos
- Criando logotipos 1
- Criando Ladrilhos de Estilo
- Criando ícones
O Photoshop é usado por web designers, designers de aplicativos móveis, designers de UX e fotógrafos, entre outros profissionais do setor.
Como o Photoshop é diferente de outras ferramentas?
Designers iniciantes geralmente querem saber a diferença entre o Photoshop e o Illustrator para entender qual ferramenta usar:
O Photoshop cria imagens raster, o que significa que você consegue ver os pixels na imagem se você aproximar o zoom.
O Illustrator, por outro lado, cria gráficos vetoriais. Os gráficos vetoriais podem ser redimensionados em qualquer formato sem qualquer pixelação.
Por exemplo:
Uma fotografia é uma imagem rasterizada, uma ilustração é uma imagem vetorial.
Escolha o Photoshop quando precisar trabalhar com uma combinação de formatos de mídia (fotografias, texto) ou quando não desejar redimensionar sem pixelação.
Instalação
O Adobe Photoshop faz parte do conjunto de programas da Creative Cloud. Você pode instalar uma avaliação gratuita de 7 dias do Photoshop através do site da Adobe . Após o teste, você precisará selecionar uma opção de preço que funcione para você.
Se tudo que você precisa é o Photoshop, você pode escolher a opção Single Application, que é de US $ 19,99 / mês, e inclui acesso ao TypeKit (uma boa fonte de fontes) e 20 GB de armazenamento.
Alunos e professores podem obter um desconto educacional aqui .
Noções básicas
Começando um novo documento
Quando você abre o Photoshop pela primeira vez, provavelmente verá uma caixa de diálogo perguntando se deseja:
- Abra um documento existente
- Crie um novo documento
Se você não vir isto, você pode ir para File > New... ou usar o atalho de teclado CMD / ctrl + N
Para projetos da web, você desejará escolher uma resolução mais baixa ou dpi (pontos por pixel). O padrão é de 72 dpi.
Para projetos de impressão, você deve escolher uma resolução maior. Pelo menos 300 dpi é recomendado.
Visão geral
Quando você abre o Photoshop, você verá alguns componentes principais.
A paleta de ferramentas à esquerda e a seção de paleta à direita.
A paleta de ferramentas tem todas as ferramentas necessárias para manipular ou editar uma imagem (consulte a seção Ferramentas abaixo).
Algumas ferramentas têm uma paleta própria, que você verá na seção de paletas à direita. Você pode controlar as paletas que você vê na visualização da paleta acessando Window e alternando as várias paletas disponíveis.
A tela é o espaço de trabalho do seu projeto. Você pode mover elementos ao redor da tela e redimensionar a tela. Qualquer coisa que não esteja na tela não será visível.
Ferramentas
-
Mover ferramenta: mova elementos ao redor da tela.
-
Marquee tool: marque e edite uma seleção retangular ou circular em uma camada.
-
Laço ferramenta: ferramenta de seleção de forma livre que você pode usar para desenhar uma área de seleção.
-
Ferramenta de varinha mágica: faça uma seleção de uma cor específica em uma imagem.
-
Ferramenta de recorte: recorte o tamanho da sua tela.
-
Ferramenta Conta-gotas: selecione uma cor de uma imagem e carregue-a na sua paleta de cores.
-
Ferramenta de pincel de recuperação de pontos: clonar uma área de uma imagem e mesclá-la em uma parte diferente da imagem. Use-o para retocar e misturar.
-
Ferramenta de pincel: desenho de forma livre.
-
Ferramenta Clone Stamp: copie e cole certos pixels de uma imagem. Use para retocar.
-
Pincel histórico: restaura as cores e outras propriedades para uma imagem baseada no histórico. Use-o para corrigir erros.
-
Ferramenta Eraser: apagamento de forma livre.
-
Ferramenta Balde de tinta: preencha uma seleção com cor (cor de primeiro plano padrão).
-
Ferramenta de desfoque: desfocagem de forma livre de uma imagem.
-
Ferramenta Dodge: ilumine uma seção de uma imagem.
-
Ferramenta Caneta: use para desenhar um caminho ou fazer uma seleção com maior precisão.
-
Ferramenta de tipo horizontal: digite o texto em uma linha horizontal (cor de primeiro plano padrão).
-
Ferramenta de seleção de caminho: selecione um caminho desenhado.
-
Ferramenta de forma personalizada: selecione uma variedade de predefinições de forma para desenhar na tela.
-
Ferramenta manual: mova-se pela tela.
-
Ferramenta de lupa: amplie ou reduza a tela.
Na parte inferior, você pode definir as cores de primeiro plano e plano de fundo. Você pode alternar rapidamente as cores do primeiro plano e do plano de fundo pressionando a tecla x .
Camadas
A paleta de camadas é acessível do lado direito da janela na seção paletas.
Um projeto é composto de várias camadas. Cada elemento no projeto é sua própria camada. Camadas são empilháveis.
No exemplo abaixo, a camada "círculo" está no topo da camada "A" na paleta de camadas. Isso significa que o círculo é renderizado na parte superior da letra "A" na tela.
Toda vez que você quiser evitar que uma camada seja ajustada de forma casual, poderá bloqueá-la selecionando-a na janela de camadas e pressionando o botão de bloqueio.
Você também pode dar um título para cada camada. Essa é uma boa prática em particular quando você trabalha com composições complexas. Basta clicar duas vezes no título da camada na janela de camadas para renomeá-lo. Que é um bom segway em usar pastas, o que você também deve fazer para boas práticas em grandes projetos.
Importando fontes
Uma licença do Photoshop Creative Cloud vem com uma conta gratuita do Typekit . Typekit é uma fundição de fontes onde você pode encontrar fontes para uso digital ou de impressão.
Para adicionar fontes do Typekit:
- Selecione a ferramenta Horizontal Type na paleta Tools.
- Clique no seletor de fonte suspenso no canto superior esquerdo.
- Clique em
add fonts from Typekit
Isso abrirá uma janela do navegador e levará você ao site do Typekit, onde você pode adicionar fontes à sua conta do Photoshop Creative Cloud (certifique-se de ter efetuado login com as credenciais da sua conta da Adobe). Uma vez adicionados à sua conta, essas fontes estarão disponíveis quando você usar a ferramenta Tipo.
Exportando arquivos
Clique em File > Export .
Você pode então selecionar Quick export to PNG , que na maioria dos casos é bom para uso na web.
Se você precisar de outro formato, selecione File > Export > Export as... Lá, você pode selecionar entre PNG , JPG ou GIF .
Atalhos de teclado do Photoshop
| Atalhos de ferramentas | MAC | WIN | | -------------------------- | ------ | ------ | | Mover ferramenta | V | V |
| Marquise retangular | M | M |
| Ferramenta de letreiro elíptico | M | M | | Ferramenta Lasso | L | L | | Ferramenta laço poligonal | L | L | | Ferramenta magnética Laço | L | L | | Ferramenta Varinha Mágica | W | W | | Ferramenta de Seleção Rápida | W | W | | Ferramenta de colheita | C | C | | Ferramenta fatia | C | C | | Fatia Selecione ferramenta | C | C | | Conta-gotas | Eu | Eu | | Ferramenta Color Sampler | Eu | Eu | | Ferramenta Régua | Eu | Eu | | Nota ferramenta | Eu | Eu | | Ferramenta de contagem | Eu | Eu | | Ferramenta Pincel de Recuperação para Manchas | J | J | | Pincel de recuperação | J | J | | Ferramenta de correção | J | J | | Ferramenta Red Eye | J | J | | Ferramenta de pincel | B | B | | Ferramenta de lápis | B | B | | Ferramenta de Substituição de Cor | B | B | | Pincel misturador | B | B | | Ferramenta Clone Stamp | S | S | | Padrão carimbo ferramenta | S | S |
Alternativas ao Photoshop
- Pixelmator (apenas para Mac)
- GIMP (Mac e PC)
Alternativas on-line para o Photoshop
Notas de rodapé
- Embora você possa projetar logotipos no Photoshop, a maioria dos designers optou por usar o Illustrator para logotipos, pois o Illustrator cria imagens vetoriais que facilitam o redimensionamento de logotipos para vários usos, como pequenos logotipos para cartões de visita ou grandes logotipos.
- Você pode criar seus próprios pincéis no Photoshop, usando a opção Brush Preset. Você também pode importar pincéis. Isso permite que você não se limite a determinados pincéis padrão.
- É mais fácil e melhor usar o Photoshop caso você esteja fazendo obras de arte usando tablets gráficos, já que você tem várias opções de pincéis, algo que não existe no Illustrator.
Mais Informações:
Alternativas: Gimp (disponível no Linux e grátis)