194 lines
12 KiB
Markdown
194 lines
12 KiB
Markdown
|
---
|
||
|
|
title: Photoshop
|
||
|
|
localeTitle: 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](https://en.wikipedia.org/wiki/Mockup) para sites ou aplicativos
|
||
|
|
* Criando logotipos 1
|
||
|
|
* Criando [Ladrilhos de Estilo](http://styletil.es/)
|
||
|
|
* 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](https://www.adobe.com/products/photoshop/free-trial-download.html) . 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](http://www.adobe-students.com/creativecloud/buy/students.html) .
|
||
|
|
|
||
|
|
### 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
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
1. Mover ferramenta: mova elementos ao redor da tela.
|
||
|
|
|
||
|
|
2. Marquee tool: marque e edite uma seleção retangular ou circular em uma camada.
|
||
|
|
|
||
|
|
3. Laço ferramenta: ferramenta de seleção de forma livre que você pode usar para desenhar uma área de seleção.
|
||
|
|
|
||
|
|
4. Ferramenta de varinha mágica: faça uma seleção de uma cor específica em uma imagem.
|
||
|
|
|
||
|
|
5. Ferramenta de recorte: recorte o tamanho da sua tela.
|
||
|
|
|
||
|
|
6. Ferramenta Conta-gotas: selecione uma cor de uma imagem e carregue-a na sua paleta de cores.
|
||
|
|
|
||
|
|
7. 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.
|
||
|
|
|
||
|
|
8. Ferramenta de pincel: desenho de forma livre.
|
||
|
|
|
||
|
|
9. Ferramenta Clone Stamp: copie e cole certos pixels de uma imagem. Use para retocar.
|
||
|
|
|
||
|
|
10. Pincel histórico: restaura as cores e outras propriedades para uma imagem baseada no histórico. Use-o para corrigir erros.
|
||
|
|
|
||
|
|
11. Ferramenta Eraser: apagamento de forma livre.
|
||
|
|
|
||
|
|
12. Ferramenta Balde de tinta: preencha uma seleção com cor (cor de primeiro plano padrão).
|
||
|
|
|
||
|
|
13. Ferramenta de desfoque: desfocagem de forma livre de uma imagem.
|
||
|
|
|
||
|
|
14. Ferramenta Dodge: ilumine uma seção de uma imagem.
|
||
|
|
|
||
|
|
15. Ferramenta Caneta: use para desenhar um caminho ou fazer uma seleção com maior precisão.
|
||
|
|
|
||
|
|
16. Ferramenta de tipo horizontal: digite o texto em uma linha horizontal (cor de primeiro plano padrão).
|
||
|
|
|
||
|
|
17. Ferramenta de seleção de caminho: selecione um caminho desenhado.
|
||
|
|
|
||
|
|
18. Ferramenta de forma personalizada: selecione uma variedade de predefinições de forma para desenhar na tela.
|
||
|
|
|
||
|
|
19. Ferramenta manual: mova-se pela tela.
|
||
|
|
|
||
|
|
20. 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](https://typekit.com/) . Typekit é uma fundição de fontes onde você pode encontrar fontes para uso digital ou de impressão.
|
||
|
|
|
||
|
|
Para adicionar fontes do Typekit:
|
||
|
|
|
||
|
|
1. Selecione a ferramenta Horizontal Type na paleta Tools.
|
||
|
|
2. Clique no seletor de fonte suspenso no canto superior esquerdo.
|
||
|
|
3. 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](http://www.pixelmator.com/mac/) (apenas para Mac)
|
||
|
|
* [GIMP](https://www.gimp.org/) (Mac e PC)
|
||
|
|
|
||
|
|
### Alternativas on-line para o Photoshop
|
||
|
|
|
||
|
|
* [Pixlr](https://pixlr.com/)
|
||
|
|
* [Photopea](https://www.photopea.com/) (a única ferramenta online para editar arquivos .psd)
|
||
|
|
|
||
|
|
#### Notas de rodapé
|
||
|
|
|
||
|
|
1. 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.
|
||
|
|
2. 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.
|
||
|
|
3. É 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:
|
||
|
|
|
||
|
|
* [Website oficial](https://www.adobe.com/products/photoshop.html)
|
||
|
|
* [Gráficos de raster vs. vetor](https://www.psprint.com/resources/difference-between-raster-vector/)
|
||
|
|
* [Aprenda e suporte](https://helpx.adobe.com/support/photoshop.html?promoid=5NHJ8FD2&mv=other)
|
||
|
|
|
||
|
|
Alternativas: Gimp (disponível no Linux e grátis)
|