Como criar gráficos vetoriais no Photoshop?

Sei que as pessoas preferem usar o CorelDraw ou o Adobe Illustrator, mas quero saber se existe uma técnica que eu possa seguir para usar o Adobe Photoshop para criar imagens vetoriais .

TL; DR: O Photoshop não pode criar imagens vetoriais verdadeiras. Este é um equívoco muito comum.

Pense nisso como um carro. - Você pode andar de quatro rodas com um Toyota Prius? Claro que você pode ! Vai fazer todas as coisas que um Jeep Wrangler pode fazer? Parreira não. Há uma razão pela qual você precisa usar um veículo com tração nas quatro rodas para andar com as quatro rodas, assim como há uma razão pela qual você precisa usar um aplicativo de vetor para criar arquivos vetoriais.

Independentemente de como você cria e salva um arquivo, o Photoshop sempre salva as informações de vetor e de varredura . Isso é diferente de qualquer aplicativo de vetor verdadeiro.

Você não pode criar arquivos vetoriais com o Photoshop. Você só pode criar arquivos rasterizados com alguns dados vetoriais incorporados. Isso significa que pode haver um quadrado de vetor e suas bordas permanecerão nítidas e nítidas, no entanto, se esse quadrado tiver um preenchimento de gradiente. Isso preenchimento de gradiente é raster completamente e vai sofrer em alguma escala.

Aplicativos como Illustrator, Inkscape, CorelDraw, Xara, Sketch etc. podem conter apenas 100% de dados vetoriais independentes da resolução. Não é uma questão de "pessoas preferirem" usar um aplicativo de vetor. É necessário se você quiser um arquivo vetorial verdadeiro no final.

Isso não quer dizer que as ferramentas de vetor no Photoshop sejam inferiores em geral, não são . Sim, você pode desenhar com as ferramentas de vetor no Photoshop e criar conteúdo de vetor. Mas, para obter o benefício real desse conteúdo vetorial no Photoshop, você deve sempre usar o Photoshop para todas as alterações futuras. Quando você amplia ou transforma um contêiner de vetor no Photoshop, o Photoshop interpola os dados da varredura interna para se adequar à transformação. Essa interpolação nãoacontecer fora do Photoshop. Portanto, depois de exportar / salvar, você pode dimensionar algo como um EPS do Photoshop, as bordas do vetor serão dimensionadas e permanecerão nítidas porque são vetoriais, mas a interpolação dos dados rasterizados não ocorre fora do Photoshop. Portanto, "pixels quebrados" são totalmente possíveis com um Photoshop EPS, mesmo que você tenha usado ferramentas de vetor. Esse problema surge quando você salva o arquivo ou o exporta . Em todos os formatos compatíveis com vetores - PDF, EPS, PSD - o Photoshop cria um arquivo raster com dados vetoriais incorporados. O Photoshop não cria um arquivo vetorial. Isso é totalmente diferente dos aplicativos baseados em vetores reais.

Para fins de produção, essa diferença pode não ser muito importante se você já estiver trabalhando com um ppi alto no Photoshop. Porém, o usuário deve estar ciente de que o simples uso das ferramentas de vetor do Photoshop e o salvamento como EPS / PDF não criam arquivos de vetor usando qualquer versão atualmente disponível do Photoshop (o CC2017 é o mais recente).

Sei que alguns usuários querem que o Photoshop crie arquivos vetoriais, porque isso significa que eles não precisam aprender um novo aplicativo para gerar um novo formato de arquivo. No entanto, não há maneira de contornar isso. Se você deseja arquivos vetoriais reais , deve usar um aplicativo vetorial real. O Photoshop é e sempre foi um aplicativo raster , portanto, "foto" em seu nome.

Chippin 'in, caso alguém ainda queira criar elementos vetoriais no Photoshop (para usar com imagens raster, por exemplo, ou para qualquer outra situação).

A ferramenta do Photoshop que permite trabalhar com gráficos vetoriais é a Pen Tool . A operação básica da Ferramenta Caneta envolve clicar na tela do Photoshop para fazer aparecer pontos. Esses pontos serão conectados por linhas e começarão a criar uma forma.

Comparado a outros programas (como o Illustrator), são as coisas que você pode fazer COM as formas depois de desenhá-las, o que está faltando. O Photoshop permitirá que você desenhe, modifique nós e brinque com a combinação, a interseção ou a subtração, mas não permitirá operações mais complexas.

Os Fóruns da Adobe têm um guia muito completo sobre como começar com a Ferramenta Caneta .

É possível exportar os caminhos criados para um arquivo do Illustrator, mas a visualização básica é que o Photoshop foi criado para imagens rasterizadas e o Illustrator foi criado para imagens vetoriais. O CorelDraw faz as duas coisas em um programa, mas o problema é que não é tão bom quanto a Adobe.

Eu acho que esse tópico precisa de um resumo, caso contrário, os leitores ainda podem ficar confusos. A maioria dos leitores não se importa se os resultados são "eps verdadeiros" ou "arquivos vetoriais verdadeiros", eles apenas querem que algo seja feito. No entanto, eles devem estar cientes dos limites e restrições de certas técnicas. Aqui estão os principais conceitos dados nas respostas:

1. O Photoshop é uma ferramenta de processamento de imagem baseada em pixel (raster) que possui alguns recursos de vetor. Ele foi originalmente projetado para manipular e salvar imagens baseadas em pixel (por exemplo, fotografias digitais), mas amadureceu e se tornou uma ferramenta muito mais flexível.

2. O Illustrator é uma ferramenta de processamento de imagem baseada em vetor que possui alguns recursos de rasterização. As imagens baseadas em vetor não armazenam informações de pixel; ele armazena a imagem como dados que serão interpretados por um programa de desenho de imagem baseado em vetor.

3. Ambos os tipos de arquivos de imagem requerem um programa de computador para preparar os dados do arquivo para exibição ou impressão, mas, em última análise, a impressora ou o computador exige que a imagem esteja no formato de pixel. Como resultado, os arquivos baseados em vetores requerem mais processamento. A principal desvantagem entre o formato vetorial e o pixel é que os formatos vetoriais podem ser redimensionados para ficarem bem em uma ampla variedade de resoluções. Os formatos de pixel sofrem quando exibidos em resoluções diferentes da resolução em que foram criados. Os formatos de pixel capturam pequenos detalhes e alterações sutis na imagem muito melhor do que os formatos vetoriais. Como resultado, os formatos de pixel são mais apropriados para fotografias ou pinturas realistas e os formatos de vetor são mais apropriados para logotipos e arte simples na Web e móvel.

4. Como os dois formatos têm pontos fortes complementares, faz sentido usar os dois. Nesses casos, você pode optar por criar e manipular suas imagens usando o Photoshop e o Illustrator (ou CorelDraw - que faz os dois), ou pode usar as ferramentas de vetor no Photoshop ou as ferramentas de rasterização no Illustrator. A melhor abordagem é ditada caso a caso. A orientação óbvia é selecionar a ferramenta principal com base no formato de saída necessário.

5. Se você quiser usar ferramentas de vetor em uma imagem baseada em pixel no Photoshop, isso pode ser feito usando a ferramenta Caneta ou o Photoshop Generate. Você pode obter as vantagens de desenvolver arte vetorial no Photoshop ou exportar a arte vetorial para o Illustrator. Depois de usar o Illustrator, você poderá trazer a arte de volta ao Photoshop se pretender salvar em um formato baseado em pixel.

O Gerador do Photoshop pode salvar SVGs (sim, SVGs apropriados somente de vetor com base nas camadas de forma criadas no Photoshop). Você precisará do Photoshop CC 2014.2 (ou 2014.1) para fazer isso.

Ajuda da Adobe: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Este documento do Photoshop:

Criado este SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="272" height="245" viewBox="0 0 272 245">
  <defs>
    <style>
      .cls-3 {
        fill: #fc6665;
      }
    </style>
  </defs>
  <g id="vectorsvg">
    <circle id="circle-1" class="cls-3" cx="50" cy="50" r="50"/>
    <rect id="rect-1" class="cls-3" x="72" y="145" width="200" height="100"/>
  </g>
</svg>