Cómo dibujar formas y exportar gráficos vectoriales (SVG)

Dibuja formas y exporta a SVG en siete pasos

1. 1

   Crea un documento nuevo

   Ve a lilcactus.app y elige Archivo› y luego Nuevo… Escribe 800 en Anchura y 800 en Altura, haz clic en la muestra de cuadros bajo Fondo para que el fondo sea transparente y haz clic en Crear.

   

2. 2

   Dibuja un círculo

   Pulsa U para elegir la herramienta Forma. En la barra de opciones (la franja bajo los menús), elige Elipse en la lista Forma; en Modo debe poner Forma. Mantén pulsada la tecla Mayús o ⇧ y arrastra por casi todo el lienzo: aparece un círculo negro en una capa nueva llamada Forma. Las formas nuevas se rellenan con el color frontal.

   

3. 3

   Fija su tamaño, su posición y su color exactos

   Con el círculo seleccionado, el panel Propiedades muestra sus ajustes dinámicos. Escribe 100 en X (px) y en Y (px), y 600 en Anchura (px) y en Altura (px), pulsando Tab después de cada valor: el círculo queda centrado con un margen de 100 px.

   Más abajo, en Relleno, haz clic en la muestra de color, escribe 2E7D5B en el campo hexadecimal y haz clic en Aceptar. El círculo se vuelve verde.

   

   

4. 4

   Dibuja una estrella blanca de puntas redondeadas

   Pulsa D y luego X para que el blanco sea el color frontal. Elige Estrella en la lista Forma de la barra de opciones y ajusta Puntos a 5, Radio interior a 50 y Radio de esquina a 24. Mantén pulsada la tecla Mayús o ⇧ y arrastra desde aproximadamente un cuarto del círculo hasta tres cuartos: aparece una estrella blanca de puntas suaves en su propia capa. Para colocarla con exactitud, en Propiedades escribe 250 en X (px) y en Y (px), y 300 en Anchura (px) y en Altura (px).

   

   

5. 5

   Cambia la estrella más adelante

   Las formas siguen siendo dinámicas. Con la capa de la estrella seleccionada, escribe 6 en Puntos en el panel Propiedades y pulsa Tab: la estrella se vuelve a dibujar con seis puntas, con el mismo tamaño y las mismas esquinas redondeadas. Anchura (px) y Radio (px) (el radio de esquina) funcionan igual.

   

6. 6

   Añade un anillo blanco

   Haz clic en la capa del círculo (Forma) en el panel Capas. En Propiedades, en Trazo, elige Color en Pintura, haz clic en la muestra y elige el blanco (FFFFFF). En Geometría del trazo, escribe 16 en Anchura (px) y elige Interior en Posición, para que el anillo quede dentro del círculo de 600 px.

   

   

7. 7

   Exporta a SVG y guarda el proyecto

   Primero oculta la capa Fondo vacía con su icono del ojo en el panel Capas: si no, el SVG incluye una diminuta imagen transparente para ella, que otras aplicaciones importan como un objeto de más. Después elige Archivo› y luego Exportar› y luego SVG… y haz clic en Exportar. El SVG conserva cada forma como un trazado vectorial, así que se ve nítido a cualquier tamaño en una web o en otra aplicación de diseño, y el fondo sigue siendo transparente.

   Para que las formas sigan siendo editables en Lil Cactus, elige también Archivo› y luego Guardar como› y luego Proyecto de Lil Cactus… (Ctrl+Mayús+S o ⇧⌘S); a partir de ahí, Archivo› y luego Guardar actualiza ese archivo. Archivo› y luego Guardar como› y luego Photoshop (.psd)… las conserva como capas de forma vectoriales, pero al volver a abrir el PSD son trazados editables sin sus ajustes dinámicos de esquinas y puntas.

   

Formas y opciones

• Rectángulo: Radio de esquina, en la barra de opciones, redondea sus esquinas, para botones y tarjetas.
• Línea: arrastra de un extremo a otro y luego ajusta en Propiedades el color y la anchura del trazo y Extremos de línea (planos, redondeados o cuadrados). Una línea nueva se traza con el color frontal; si no se ve, es que ese color coincide con el del documento: elige allí otro color de trazo.
• Polígono y Estrella: Lados o Puntos y, en una estrella, Radio interior, que fija la profundidad de las puntas.

Modo, en la barra de opciones, decide qué crea un arrastre: una capa de forma (Forma), un trazado que puedes convertir en selección o en trazo (Trazado) o pintura en la capa actual (Píxeles), que ya no se puede editar como forma.

Combina y modifica formas

Para recortar una forma de otra, selecciona la capa de forma y, antes de dibujar, elige Restar en la lista Operación de la barra de opciones: la forma nueva se convierte en un agujero en la seleccionada, dentro de la misma capa. Unir la suma, Intersecar conserva solo la parte común y Excluir lo conserva todo menos la parte común. Vuelve a poner Operación en Nueva capa para crear formas separadas.

Para arrastrar puntos sueltos, haz clic con el botón derecho en el botón de la pluma de la barra de herramientas, elige Selección directa y arrastra un punto de la forma seleccionada. Una forma combinada o modificada se convierte en un trazado libre: su lista Forma en Propiedades indica Trazado editable y ya no tiene ajustes dinámicos de esquinas ni de puntas. Consulta cómo usar la herramienta Pluma.

Qué conserva una exportación a SVG

• Las capas de forma, con rellenos de color o de degradado lineal, radial o reflejado, trazos y discontinuos, se convierten en trazados vectoriales. Una forma con un degradado angular o de diamante se convierte en una imagen.
• El texto se convierte en contornos vectoriales de las letras cuando la fuente lo permite.
• Las fotos, los estilos de capa como las sombras paralelas y las máscaras se convierten en una imagen solo para esa capa.
• Una capa visible con un modo de fusión distinto de Normal, una máscara de recorte o una capa de ajuste convierte todo el SVG en una sola imagen, sin vectores. Lo mismo ocurre con un documento Lab o en escala de grises, o con uno que tenga un perfil de color distinto del predeterminado y contenga texto, transparencia o degradados. El cuadro de diálogo de exportación te avisa antes de exportar.

Para obtener un archivo vectorial puro, limita el diseño a capas de forma y texto simple en modo Normal, y oculta las capas vacías.

Soluciona problemas frecuentes

La forma ha salido negra

El color frontal era negro. Cambia el relleno en Propiedades o elige el color frontal antes de dibujar.

La forma nueva ha hecho un agujero en la anterior

En la barra de opciones, Operación está en Restar. Deshaz con Edición› y luego Deshacer (Ctrl+Z o ⌘Z), cámbiala a Nueva capa y vuelve a dibujar.

El círculo es un óvalo

Escribe el mismo valor en Anchura (px) y en Altura (px) en Propiedades.

Si vienes de otro editor

Photoshop

Las herramientas de forma (U) y los ajustes dinámicos de forma del panel Propiedades.

Formas y gráficos vectoriales: preguntas y respuestas