Come creare grafica vettoriale in Photoshop?

So che le persone preferiscono usare CorelDraw o Adobe Illustrator, ma voglio sapere se esiste una tecnica che posso seguire per utilizzare Adobe Photoshop per creare immagini vettoriali .

TL; DR: Photoshop non può creare vere immagini vettoriali. Questo è un malinteso molto comune.

Pensalo come un'auto. - Puoi andare su 4 ruote con una Toyota Prius? Sicuro che puoi ! Farà tutto ciò che può fare una Jeep Wrangler? Diamine no. C'è una ragione che si ha bisogno di usare un veicolo a 4 ruote motrici per andare 4-wheeling, così come c'è un motivo avete bisogno di utilizzare un'applicazione vettore per creare file vettoriali.

Indipendentemente da come si crea un file e lo si salva, Photoshop salva sempre sia le informazioni vettoriali che quelle raster . Questo è diverso da qualsiasi vera applicazione vettoriale.

Non è possibile creare file vettoriali con Photoshop. È possibile creare solo file raster con alcuni dati vettoriali incorporati. Ciò significa che potrebbe esserci un quadrato vettoriale e i suoi bordi rimarranno nitidi e nitidi, tuttavia se quel quadrato ha un riempimento sfumato. Questo riempimento sfumato è raster del tutto e si soffre su qualche ridimensionamento.

Applicazioni come Illustrator, Inkscape, CorelDraw, Xara, Sketch, ecc. In realtà possono contenere solo dati vettoriali indipendenti con una risoluzione del 100%. Non si tratta di "persone che preferiscono" utilizzare un'applicazione vettoriale. È necessario se si desidera un vero file vettoriale alla fine.

Questo non vuol dire che gli strumenti vettoriali di Photoshop siano complessivamente inferiori, non lo sono . Sì, puoi disegnare con gli strumenti vettoriali in Photoshop e creare contenuti vettoriali. Ma per ottenere il vero vantaggio di quel contenuto vettoriale in Photoshop, devi sempre usare Photoshop per tutte le future modifiche. Quando ingrandite o trasformate un contenitore vettoriale in Photoshop, Photoshop interpola i dati raster interni per adattarli alla trasformazione. Questa interpolazione nosuccede al di fuori di Photoshop. Quindi, dopo aver esportato / salvato è possibile ridimensionare qualcosa come un Photoshop EPS, i bordi vettoriali si ridimensionano e rimangono nitidi perché sono vettoriali, ma l'interpolazione dei dati raster non avviene al di fuori di Photoshop. Quindi "pixel spezzati" sono del tutto possibili con Photoshop EPS anche se hai utilizzato strumenti vettoriali. Questo problema si presenta quando si salva il file o lo si esporta . In tutti i formati vettoriali - PDF, EPS, PSD - Photoshop crea un file raster con dati vettoriali incorporati. Photoshop non crea un file vettoriale. Questo è del tutto diverso dalle attuali applicazioni basate su vettori.

Ai fini della produzione, questa differenza potrebbe essere in gran parte irrilevante se si sta già lavorando con un ppi elevato in Photoshop. Ma un utente dovrebbe essere consapevole del fatto che il semplice utilizzo degli strumenti vettoriali di Photoshop e il salvataggio come EPS / PDF non creano file vettoriali utilizzando alcuna versione attualmente disponibile di Photoshop (CC2017 è la più recente).

Mi rendo conto che alcuni utenti vogliono che Photoshop crei file vettoriali perché ciò significa che non hanno bisogno di imparare una nuova applicazione per generare un nuovo formato di file. Tuttavia, non c'è modo di aggirarlo. Se si desidera file vettoriali reali , è necessario utilizzare un'applicazione vettoriale reale. Photoshop è ed è sempre stata un'applicazione raster , quindi "foto" nel suo nome.

Chippin 'in, nel caso qualcuno voglia ancora creare elementi vettoriali in Photoshop (da usare con immagini raster, ad esempio o per qualsiasi altra situazione).

Lo strumento Photoshop che ti consente di lavorare con la grafica vettoriale, è lo strumento Penna . L'operazione di base dello strumento Penna prevede di fare clic sulla tela di Photoshop per far apparire i punti. Questi punti saranno collegati da linee e inizieranno a creare una forma.

Rispetto ad altri programmi (come Illustrator), sono le cose che puoi fare CON le forme una volta che hai disegnato ciò che in qualche modo manca. Photoshop ti consente di disegnare, modificare nodi e giocare combinandoli, intersecandoli o sottrattili, ma non ti consentirà di eseguire operazioni più complesse.

I forum di Adobe hanno una guida molto completa su come iniziare con lo strumento penna .

È possibile esportare i percorsi creati in un file Illustrator, ma la vista di base è che Photoshop è stato creato per le immagini raster e Illustrator è stato creato per le immagini vettoriali. CorelDraw fa entrambi in un programma, ma il compromesso è che non è buono come Adobe, imo.

Penso che questo thread abbia bisogno di un riepilogo, altrimenti i lettori potrebbero rimanere ancora confusi. La maggior parte dei lettori non si preoccuperà se i risultati sono "veri eps" o "veri file vettoriali", vogliono solo fare qualcosa. Tuttavia, dovrebbero essere consapevoli dei limiti e dei vincoli su determinate tecniche. Ecco i concetti chiave forniti nelle risposte:

1. Photoshop è uno strumento di elaborazione delle immagini basato su pixel (raster) con alcune funzionalità vettoriali. È stato originariamente progettato per manipolare e salvare immagini basate su pixel (ad esempio fotografie digitali), ma è diventato uno strumento molto più flessibile.

2. Illustrator è uno strumento di elaborazione delle immagini basato su vettori che presenta alcune funzionalità di rasterizzazione. Le immagini basate su vettori non memorizzano informazioni sui pixel, ma memorizzano l'immagine come dati che verranno interpretati da un programma di disegno di immagini basato su vettori.

3. Entrambi i tipi di file di immagine richiedono un programma per computer per preparare i dati del file per la visualizzazione o la stampa, ma alla fine la stampante o il computer richiede che l'immagine sia in formato pixel. Di conseguenza, i file basati su vettori richiedono una maggiore elaborazione. Il principale compromesso tra il formato vettoriale e il formato pixel è che i formati vettoriali possono essere ridimensionati per apparire belli in una vasta gamma di risoluzioni. I formati pixel soffrono quando vengono visualizzati con risoluzioni diverse dalla risoluzione in cui sono stati creati. I formati pixel catturano piccoli dettagli e sottili cambiamenti nell'immagine molto meglio dei formati vettoriali. Di conseguenza, i formati di pixel sono più appropriati per fotografie o dipinti realistici e i formati vettoriali sono più appropriati per logo e grafica semplice basata su web e mobile.

4. Poiché i due formati hanno punti di forza complementari, ha senso utilizzare entrambi. In questi casi, puoi scegliere di creare e manipolare le tue immagini usando sia Photoshop che Illustrator (o CorelDraw - che fa entrambe le cose), oppure puoi usare gli strumenti vettoriali in Photoshop o gli strumenti di rasterizzazione in Illustrator. L'approccio migliore è dettato caso per caso. L'ovvia linea guida è quella di selezionare lo strumento principale in base al formato di output necessario.

5. Se si desidera utilizzare gli strumenti vettoriali su un'immagine basata su pixel in Photoshop, è possibile utilizzare lo strumento Penna o Photoshop Generate. È quindi possibile ottenere i vantaggi dello sviluppo con la grafica vettoriale in Photoshop o esportando la grafica vettoriale in Illustrator. Dopo aver usato Illustrator, puoi quindi riportare l'arte in Photoshop se intendi infine salvare in un formato basato su pixel.

Photoshop Generator può salvare SVG (sì, proprio, SVG solo vettoriali basati su layer di forme creati in Photoshop). Per farlo, avrai bisogno di Photoshop CC 2014.2 (o 2014.1).

Aiuto di Adobe: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Questo documento di Photoshop:

Creato questo 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>