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

Sé que la gente prefiere 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 .

Hay un proceso abreviado que se origina en Photoshop que es útil para ilustraciones e íconos vectoriales simples. Lo uso para la velocidad, aunque es útil si no está seguro de la herramienta y las funciones del lápiz. Crea tu ilustración en Photoshop a 240 dpi. Los colores planos dan mejores resultados. Para un icono uso negro. Exportar como jpg con la máxima calidad. Ejecute esto a través de una aplicación llamada Vector Magic y el vector se creará para usted (mejor que el seguimiento de la imagen del ilustrador). Puede eliminar el fondo en la aplicación y abrirlo en Illustrator para volver a trabajar. Ejemplo de personaje de chatbot: bit.ly/2AG8HrV

Respuestas (5)

Nota: esta respuesta se escribió originalmente en 2013 cuando SVG era una opción "más nueva" en Photoshop y antes de que Photoshop tuviera la capacidad de "exportar activos". El soporte para SVG ha crecido en la última década. Si bien sigo creyendo que Photoshop no es la herramienta adecuada si desea algo más que íconos planos en forma vectorial, es posible exportar archivos SVG que son 100% vectoriales desde Photoshop; consulte el apéndice al final de la respuesta. Animo a los usuarios a que intenten exportar construcciones vectoriales de diversa complejidad a SVG para ver qué se puede retener o no en las exportaciones, si el formato SVG es viable para su flujo de trabajo (que puede no ser el caso).

TL; DR: con la excepción de la exportación SVG rudimentaria * (consulte el apéndice a continuación) ... Photoshop no puede crear archivos vectoriales reales, 100% independientes de la resolución, en ningún otro formato.

Esto es un malentendido muy común.

Piense en ello como un coche. -- ¿Se puede ir en 4 ruedas con un Toyota Prius? ¡Claro que puedes ! ¿Hará todo lo que puede hacer un Jeep Wrangler? Diablos no. Hay una razón por la que necesita usar un vehículo con tracción en las 4 ruedas para ir en 4 ruedas, al igual que hay una razón por la que necesita usar una aplicación de vectores para crear archivos vectoriales.

*(Excluyendo SVG -- Ver anexo a continuación)

Independientemente de cómo cree un archivo y lo guarde, Photoshop siempre guarda tanto la información vectorial como la rasterizada . Los archivos de Photoshop son siempre archivos de trama que pueden contener o no datos vectoriales incrustados. Nunca son archivos vectoriales.

Un archivo de vector verdadero contiene cero datos raster y es 100% independiente de la resolución. Lo que significa que el archivo no está sujeto a ninguna configuración de PPI/DPI.

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 nítidos y nítidos, sin embargo, si ese cuadrado tiene un relleno degradado. Ese relleno degradado es raster completamente en Photoshop y sufrirá al escalar en una herramienta/software externo.

Las aplicaciones como Illustrator, Inkscape, CorelDraw, Xara, Sketch, etc. en realidad pueden crear archivos que contienen solo un 100 % de datos vectoriales independientes de la resolución. No se trata de que "la gente prefiera" usar una aplicación de vectores. Es necesario si desea un archivo vectorial verdadero al final.

Esto no quiere decir que las herramientas vectoriales de Photoshop sean inferiores en general, generalmente no lo son. Aunque las aplicaciones reales basadas en vectores serán absolutamente más sólidas en lo que respecta a la creación de datos vectoriales.

Sí, puede dibujar con las herramientas vectoriales de 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 ráster interiores para adaptarse a la transformación. Esa interpolación no ocurre fuera de Photoshop. Entonces, después de exportar/guardar si uno escala algo como un EPS de Photoshop en InDesign, los bordes del vector se escalarán y permanecerán nítidos porque son vectores, pero la interpolación de los datos rasterizados interiores no ocurre fuera de Photoshop. Por lo tanto, los "píxeles rotos" son completamente posibles con Photoshop EPS, aunque haya utilizado herramientas vectoriales.

Este problema surge cuando guarda el archivo o exporta el archivo de Photoshop en todos los formatos compatibles con vectores (PDF, EPS, PSD). Photoshop crea un archivo de trama con datos vectoriales incrustados . Photoshop no crea un archivo vectorial. Esto es completamente diferente a las aplicaciones reales basadas en vectores.

A efectos de producción, esta diferencia puede carecer en gran medida de importancia si ya está trabajando con un alto ppp en Photoshop. Pero un usuario debe tener en cuenta que simplemente usar las herramientas vectoriales de Photoshop y guardarlos como EPS/PDF no crea archivos vectoriales utilizando ninguna versión actualmente disponible de Photoshop (CC2022 a partir de este escrito).

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 utilizar una aplicación vectorial real . Photoshop es y siempre ha sido una aplicación de trama .

* Apéndice sobre SVG:

Ha habido algunos comentarios sobre SVG de Photoshop. Es posible exportar un SVG vectorial independiente con una resolución del 100 % desde Photoshop si la construcción del archivo es correcta. La construcción general de cualquier SVG generalmente debe ser bastante rudimentaria y sin estilos de capa, filtros, desenfoques, etc. SVG solo funciona si los archivos son tan "básicos" como pueden ser, que contienen solo rellenos/trazos planos y sin interacciones de formas complejas . o enmascaramiento. Además, si SVG es o no un formato adecuado para cualquier método de reproducción en particular puede ser otra cuestión. Sin embargo, si se desea generar algo como planos, un color, iconos vectoriales, Photoshoppuede ser adecuado si se utiliza el formato SVG al exportar. Sin embargo, todavía existen algunas limitaciones importantes en cuanto a lo que se puede crear para una exportación vectorial viable.

Sin embargo, quisiera advertir ... si el objetivo es generar archivos vectoriales reales, uno realmente debería usar una aplicación vectorial real. Si bien amo Photoshop y ciertamente puede crear muchas, muchas cosas. No es el ser-todo-fin-todo para todo. Photoshop también puede exportar video... pero sus capacidades palidecen en comparación con la aplicación de video dedicada, al igual que palidecen en comparación con las aplicaciones vectoriales. Si quisiera un video robusto, intrincadamente editado y producido, entonces Photoshop no sería una herramienta para usar en lugar de algo como Adobe Premiere. Usaría Premiere para algo más que ediciones de video muy simples, al igual que debería usar Illustrator si desea archivos vectoriales más sólidos.

Realmente PUEDES dibujar gráficos vectoriales en Photoshop. Por ejemplo, suelo exportar vectores de PS a Flash. Por lo tanto, puede crear verdaderas imágenes vectoriales.
@Dani Sí, puedes dibujar usando vectores en Photoshop. Pero no puede guardar (o exportar) un verdadero archivo vectorial desde Photoshop. ¿Has comprobado esas exportaciones? Al igual que exportar a Illustrator, son contenedores vectoriales con rellenos de trama. Eso no es un verdadero archivo vectorial. Lo mejor que puede hacer es dibujar vectores en Photoshop, luego exportar las rutas y usar alguna otra aplicación de vector real para agregar rellenos y trazos. Entiendo que la gente realmente quiere que Photoshop cree archivos vectoriales, pero la verdad es que Photoshop simplemente no lo hace.
Además, el mero hecho de que necesite usar Flash es una prueba más de que Photoshop es insuficiente para crear archivos vectoriales reales.
¿Qué entiendes por archivo vectorial verdadero?
Sin contenido de trama. La mayoría de las veces, los usuarios desesperados por usar Photoshop para archivos vectoriales intentan vender archivos vectoriales en sitios de microstock. Y al igual que esos sitios, no veo un archivo que contenga un montón de contenedores vectoriales con rellenos de imágenes de trama como un verdadero vector. Escalar un archivo con contenedores vectoriales y rellenos de trama romperá los píxeles en los rellenos de trama, eso no es vector. Nota: no digo que no puedas crear archivos con Photoshop. Los contenedores vectoriales con rellenos de trama están bien para la mayoría de la producción. Pero no son verdaderos vectores.
@Scott ¿Qué tal una capa de relleno de color sólido con una máscara vectorial? Posiblemente con efectos de capa. Sin mapa de bits/datos de trama.
@WojtekKruszewski El relleno sigue siendo una imagen de trama enmascarada por el contenedor vectorial.
@Scott Hay nuevos tipos especiales de capas de relleno: color sólido y degradado. Los ajustes de color o degradado se pueden cambiar en cualquier momento. Para pintar sobre una capa de este tipo, primero debe "renderizarla" en una capa normal.
@WojtekKruszewski Soy consciente de las capas vectoriales en Photoshop; todavía es un relleno de trama con borde vectorial. Cree un archivo con solo una forma vectorial y use las opciones Rellenar/trazar. Guardar como EPS. Abre ese eps en Illustrator... ¿qué hay ahí? Ráster. Nos guste o no, NO HAY FORMA de guardar un archivo vectorial real desde CUALQUIER versión de Photoshop.
@Scott Pruebe "Capa -> Nueva capa de relleno -> Gradiente". Cree una imagen pequeña (5x5px), agregue una capa de relleno, luego escale la imagen hasta 1000x1000px. Observe que el degradado es suave, porque este tipo de capa contiene una definición de degradado (posiciones porcentuales de los marcadores y sus colores). Es posible que esta información se pierda y el degradado se represente como un mapa de bits al exportar a EPS. El archivo PSD fijo que contiene solo esas capas de relleno especiales con máscaras vectoriales y efectos de capa puede escalar indefinidamente.
@WojtekKruszewski sigue siendo un relleno de trama con un contenedor de vectores. Discute todo lo que quieras, pero simplemente no puedes crear verdaderos archivos vectoriales con Photoshop. El degradado es ráster en formato PSD, EPS, PDF... todos los formatos capaces de datos vectoriales. No es un vector real.
@Scott ¿Hay algún término para describir un ráster similar a un vector? Estoy hablando de una imagen en Photoshop que puedo ampliar sin perder ningún detalle porque tiene cualidades similares a las de un vector.
@TomDworzanski si usa las herramientas vectoriales dentro de Photoshop y mantiene las capas, puede ampliar dentro de Photoshop y mantener la calidad. Solo cuando guarda para otra aplicación externa, la escala se convierte en un problema. Photoshop hace un gran trabajo dentro de sí mismo al escalar sus propios contenedores vectoriales.
El generador de Photoshop puede guardar archivos SVG.
Sí. pero SVG tiene su propio conjunto de problemas cuando se guarda desde el Generador de Photoshop. Si obtiene o no un SVG de vector sólido depende en gran medida de cómo se construyan las cosas en Photoshop. Para formas rudimentarias con rellenos planos, sí, SVG puede funcionar. Para cualquier cosa remotamente compleja, SVG a menudo se desmorona como un formato vectorial de Photoshop.

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

La herramienta que tiene Photoshop que te permite trabajar con gráficos vectoriales, es la Herramienta Pluma . El funcionamiento básico de la herramienta Pluma consiste en hacer clic en el lienzo de Photoshop para que aparezcan los puntos. Estos puntos se conectarán mediante líneas y comenzarán a crear una forma.

En comparación con otros programas (como Illustrator), son las cosas que puede hacer CON las formas una vez que las ha dibujado lo que de alguna manera falta. Photoshop te permitirá dibujar, modificar nodos y jugar a combinarlos, intersecarlos o restarlos, pero no te permitirá realizar operaciones más complejas.

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

PUEDE exportar las rutas que cree a un archivo de Illustrator, pero la vista básica es que Photoshop se creó para imágenes rasterizadas e Illustrator se creó para imágenes vectoriales. CorelDraw hace ambas cosas en un solo programa, pero la compensación 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 quedar todavía confundidos. A la mayoría de los lectores no les importará si los resultados son "eps verdaderos" o "archivos vectoriales verdaderos", solo quieren hacer algo. Sin embargo, deben ser conscientes de los límites y restricciones 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 ha madurado hasta convertirse 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, almacenan 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 mostrarlos o imprimirlos, 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 compensación entre el formato vectorial y el formato de píxel 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 distintas a la resolución en la que fueron creados. Los formatos de píxeles capturan los pequeños detalles y los 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 vectoriales son más apropiados para logotipos y arte simple basado en web y dispositivos móviles.

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

  5. Si desea utilizar herramientas vectoriales en una imagen basada en píxeles en Photoshop, puede hacerlo con la herramienta Pluma o con Photoshop Generate. A continuación, puede obtener las ventajas de desarrollar con arte vectorial en Photoshop o exportando el arte vectorial a Illustrator. Después de usar Illustrator, puede devolver el arte a Photoshop si tiene la intención de guardarlo en última instancia en un formato basado en píxeles.

Sería mejor decir que las imágenes rasterizadas se preparan al guardar, mientras que los dibujos vectoriales los prepara la máquina del espectador y, por lo tanto, pueden ser más flexibles en términos de escalado en el extremo del usuario, etc. De lo contrario, no está claro por qué las aplicaciones de gráficos 3D no son aplicaciones vectoriales. y por qué a veces lo son. De todos modos, estás omitiendo un gran punto y es: no necesariamente quieres una aplicación que haga un poco de ambas cosas. Porque quiere estar seguro de que sus dibujos vectoriales son vectores. Aunque al revés no es lo mismo. Entonces, el cruce se realiza con relativa facilidad después de rasterizar.

El Generador de Photoshop, en algunos casos limitados, puede guardar archivos 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>
Cambie el relleno a un degradado, luego abra el svg en Illustrator.... Esta es menos que una solución sólida.
Depende para qué necesites el SVG. Sin embargo, tiene razón, la compatibilidad con la exportación de archivos SVG es incompleta en el mejor de los casos, pero si solo desea íconos sólidos o datos de ruta, funciona muy bien.
Si solo desea datos de ruta, puede exportar rutas.
Scott, creo que debes admitir que Photoshop es en realidad una herramienta de diseño vectorial aceptable para algunas situaciones.
Mark, Básicamente, no, no lo hago. No si su deseo es crear verdaderos archivos vectoriales para usar en otras aplicaciones. Si desea formas rudimentarias con rellenos planos, está bien, svg puede funcionar para usted. Pero esa es la excepción , no la regla. La realidad es que realmente necesita más herramientas que solo una. Un carpintero no construye una casa de calidad solo con un martillo. Y no puede crear archivos vectoriales de calidad solo con Photoshop. Algunos usuarios quieren desesperadamente que Photoshop haga todo porque no quieren aprender nada más. Eso no significa que Photoshop sea bueno para todo. No es.
Estoy completamente de acuerdo con "eso no significa que Photoshop sea bueno para todo". He estado usando Illustrator desde la versión 3 y todavía lo uso hoy. Pero, para guardar activos de interfaz de usuario de color sólido de iOS o Android, soy todo para Photoshop y Generator. Y para eso, Photoshop es realmente mejor: la vista previa de píxeles del vector de Illustrator es inferior a la media (antialiasing perdido y otros problemas).
¿Cómo crear gráficos vectoriales en Photoshop?
RespuestasAquíPolítica de privacidad1y, 0v