--- 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: ![exemplo de vetor vs raster](https://raw.githubusercontent.com/cecyc/textures/master/vector-vs-raster.jpg) 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 ![Visualização da janela do Photoshop](https://raw.githubusercontent.com/cecyc/textures/master/photoshop-view.png) 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 ![Paleta de ferramentas do Photoshop](https://raw.githubusercontent.com/cecyc/textures/master/tools-palette.png) 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. ![Paleta de camadas](https://raw.githubusercontent.com/cecyc/textures/master/layers.png) #### 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` ![Adicionar fontes do Typekit](https://raw.githubusercontent.com/cecyc/textures/master/add-from-typekit.png) 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)