¿Cómo crear gráficos vectoriales en Photoshop?

Sé que las personas prefieren usar CorelDraw o Adobe Illustrator, pero quiero saber si hay una técnica que pueda seguir para usar Adobe Photoshop para hacer imágenes vectoriales .

TL; DR: Photoshop no puede crear imágenes vectoriales verdaderas. Esto es un malentendido muy común.

Piensa en ello como un auto. - ¿Puedes andar en 4 ruedas con un Toyota Prius? Claro que puedes ! ¿Va a hacer todas las cosas que un Jeep Wrangler puede hacer? Diablos no. Hay una razón por la que necesita usar un vehículo con tracción en las 4 ruedas para hacer 4 ruedas, así como también hay una razón por la que necesita usar una aplicación vectorial para crear archivos vectoriales.

Independientemente de cómo cree un archivo y lo guarde, Photoshop siempre guarda la información del vector y de la trama . Esto es diferente a cualquier aplicación de vector real.

No puede crear archivos vectoriales con Photoshop. Solo puede crear archivos ráster con algunos datos vectoriales incrustados. Esto significa que puede haber un cuadrado vectorial y sus bordes permanecerán afilados y nítidos, sin embargo, si ese cuadrado tiene un relleno degradado. Ese relleno degradado es la trama en su totalidad y que se sufren en alguna escala.

Las aplicaciones como Illustrator, Inkscape, CorelDraw, Xara, Sketch, etc. en realidad solo pueden contener datos vectoriales independientes con una resolución del 100%. No se trata de "personas que prefieren" usar una aplicación vectorial. Es necesario si quieres un verdadero archivo vectorial al final.

Esto no quiere decir que las herramientas vectoriales en Photoshop sean en general inferiores, no lo son . Sí, puede dibujar con las herramientas vectoriales en Photoshop y crear contenido vectorial. Pero para obtener el beneficio real de ese contenido vectorial en Photoshop, siempre debe usar Photoshop para todas las modificaciones futuras. Cuando amplía o transforma un contenedor de vectores dentro de Photoshop, Photoshop interpola los datos de trama interior para adaptarlos a la transformación. Esa interpolación nosuceder fuera de Photoshop. Entonces, después de exportar / guardar puede escalar algo como un EPS de Photoshop, los bordes del vector se escalarán y permanecerán nítidos porque son vectores, pero la interpolación de los datos ráster no ocurre fuera de Photoshop. Por lo tanto, los "píxeles rotos" son totalmente posibles con un Photoshop EPS aunque haya utilizado herramientas vectoriales. Este problema surge cuando guarda el archivo o lo exporta . En todos los formatos compatibles con vectores (PDF, EPS, PSD), Photoshop crea un archivo ráster con datos vectoriales incrustados. Photoshop no crea un archivo vectorial. Esto es completamente diferente a las aplicaciones basadas en vectores reales.

Para fines de producción, esta diferencia puede ser poco importante si ya está trabajando a un alto ppi en Photoshop. Pero un usuario debe tener en cuenta que el simple uso de las herramientas vectoriales de Photoshop y guardarlas como EPS / PDF no crea archivos vectoriales con ninguna versión disponible de Photoshop (CC2017 es la más reciente).

Me doy cuenta de que algunos usuarios quieren que Photoshop cree archivos vectoriales porque eso significa que no necesitan aprender una nueva aplicación para generar un nuevo formato de archivo. Sin embargo, no hay forma de evitarlo. Si desea archivos vectoriales reales , debe usar una aplicación vectorial real. Photoshop es y siempre ha sido una aplicación ráster , por lo tanto, "foto" en su nombre.

Chippin ', en caso de que alguien todavía quiera crear elementos vectoriales en Photoshop (para usar con imágenes ráster, por ejemplo, o para cualquier otra situación).

La herramienta que Photoshop tiene para trabajar con gráficos vectoriales es la herramienta Pluma . El funcionamiento básico de la herramienta Pluma consiste en hacer clic alrededor del lienzo de Photoshop para que aparezcan puntos. Estos puntos estarán conectados por líneas y comenzarán a crear una forma.

En comparación con otros programas (como Illustrator), son las cosas que puedes hacer CON las formas una vez que las has dibujado lo que de alguna manera falta. Photoshop le permitirá dibujar, modificar nodos y jugar con su combinación, intersección o sustracción, pero no le permitirá realizar operaciones más complejas.

Los foros de Adobe tienen una guía muy completa sobre cómo comenzar con la herramienta Pluma .

PUEDE exportar las rutas que crea a un archivo de Illustrator, pero la vista básica es que Photoshop se creó para imágenes ráster e Illustrator para imágenes vectoriales. CorelDraw hace ambas cosas en un solo programa, pero la desventaja es que no es tan bueno como Adobe, en mi opinión.

Creo que este hilo necesita un resumen, de lo contrario, los lectores pueden salir confundidos. A la mayoría de los lectores no les importará si los resultados son "verdaderos eps" o "verdaderos archivos vectoriales", solo quieren hacer algo. Sin embargo, deben ser conscientes de los límites y las limitaciones de ciertas técnicas. Aquí están los conceptos clave dados en las respuestas:

1. Photoshop es una herramienta de procesamiento de imágenes basada en píxeles (ráster) que tiene algunas capacidades vectoriales. Originalmente fue diseñado para manipular y guardar imágenes basadas en píxeles (por ejemplo, fotografías digitales), pero se ha convertido en una herramienta mucho más flexible.

2. Illustrator es una herramienta de procesamiento de imágenes basada en vectores que tiene algunas capacidades de rasterización. Las imágenes basadas en vectores no almacenan información de píxeles, almacena la imagen como datos que serán interpretados por un programa de dibujo de imágenes basado en vectores.

3. Ambos tipos de archivos de imagen requieren un programa de computadora para preparar los datos del archivo para su visualización o impresión, pero en última instancia, la impresora o la computadora requieren que la imagen esté en formato de píxeles. Como resultado, los archivos basados ​​en vectores requieren más procesamiento. La principal desventaja entre el formato vectorial y el formato de píxeles es que los formatos vectoriales se pueden escalar para que se vean bien en una amplia gama de resoluciones. Los formatos de píxeles sufren cuando se muestran en resoluciones diferentes a la resolución en la que fueron creados. Los formatos de píxeles capturan pequeños detalles y cambios sutiles en la imagen mucho mejor que los formatos vectoriales. Como resultado, los formatos de píxeles son más apropiados para fotografías o pinturas realistas y los formatos de vectores son más apropiados para logotipos y arte web y móvil simple.

4. Debido a que los dos formatos tienen fortalezas complementarias, tiene sentido usar ambos. En estos casos, puede elegir crear y manipular sus imágenes usando Photoshop e Illustrator (o CorelDraw, que hace ambas cosas), o puede usar las herramientas vectoriales en Photoshop o las herramientas de rasterización en Illustrator. El mejor enfoque se dicta caso por caso. La guía obvia es seleccionar la herramienta principal en función del formato de salida necesario.

5. Si desea usar herramientas vectoriales en una imagen basada en píxeles en Photoshop, puede hacerlo usando la herramienta Pluma o Photoshop Generate. Luego puede obtener las ventajas de desarrollar con arte vectorial en Photoshop o exportando el arte vectorial a Illustrator. Después de usar Illustrator, puede traer el arte nuevamente a Photoshop si tiene la intención de guardar en un formato basado en píxeles.

Photoshop's Generator puede guardar SVG (sí, SVG adecuados, solo vectoriales basados ​​en capas de formas creadas en Photoshop). Sin embargo, necesitará Photoshop CC 2014.2 (o 2014.1) para hacerlo.

Ayuda de Adobe: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Este documento de Photoshop:

Creó 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>