En este artículo veremos los elementos de nuestra infografía que modificaremos con Inkscape, la más completa de las herramientas de edición de gráficos vectoriales de código libre. Es una parte más de la serie de artículos en la que combinamos software libre e Inteligencia Artificial.

Pero antes, nos había quedado pendiente la descripción de la barra de herramientas ubicada en el lado derecho de la aplicación. Nos pondremos a ello.

La barra derecha

• Documento nuevo: Crea un documento nuevo a partir de la plantilla predeterminada.
• Abrir documento: Este diálogo permite abrir documentos previamente creados con Inkscape o en formatos compatibles.
• Guardar: Guarda el documento con el que estuvimos trabajando.
• Importar: Permite agregar al documento imágenes de mapas de bits o SVG.
• Exportar: Permite guardar todo o parte del documento como imagen PNG.
• Deshacer: Elimina la última acción.
• Rehacer: Restaura la acción deshecha.
• Copiar: Copia la selección al portapapeles.
• Cortar: Copia la selección al portapapeles y la elimina del documento.
• Pegar: Pega objetos o texto desde el portapapeles en la selección del puntero del ratón.
• Zoom a selección: Ajusta el tamaño de la selección a la ventana.
• Zoom a dibujo: Ajusta el dibujo a la ventana.
• Zoom a página: Ajusta el tamaño de la página a la ventana.
• Zoom a centro de página: Centra la página en la ventana.
• Duplicar: Duplica los objetos seleccionados.
• Crear clon: Crea una copia de un objeto que se modifica cuando este lo hace.
• Desconectar clon: Elimina la conexión entre los clones y sus originales, evitando que los primeros se sigan modificando cuando lo hacen los segundos.
• Group: Agrupa los objetos seleccionados.
• Desagrupar: Desagrupa los objetos seleccionados.
• Abrir relleno/borde: Abre los paneles que permiten elegir colores, puntas de flecha, degradado y el resto de las propiedades de relleno y trazo.

Los elementos de nuestra infografía

El primer elemento de nuestra infografía es la base que modificaremos. Lo que hice fue pedirle a ChatGPT que le agregara una columna, ya que para nuestro objetivo necesitamos seis. Por iniciativa propia repitió elementos de otras columnas. No importa demasiado porque vamos a eliminarlos.

Veamos el código en detalle:

Línea 1

Se indica al navegador cómo debe interpretar el código y el tamaño del lienzo (1024×768).

Líneas 3 a 22

Se determinan 6 degradados. Para el fondo se eligió que vaya de blanco azulado a gris azulado suave y, en el caso de los temas de color de los paneles (azul, verde, amarillo, naranja, morado), se determinó que cada degradado vaya de un tono pastel claro a uno más saturado, dando un aspecto moderno y suave.

Dado que nosotros necesitamos que los paneles sean verde, rojo, negro, azul, verde y amarillo, haremos las correcciones necesarias en Inkscape.

Líneas 24 a 30

Se establecen ciertos filtros para mejorar el aspecto de la base de la infografía.

• Sombra paralela: Da profundidad a los paneles laterales.
• Sombra suave: Para elementos secundarios como botones o encabezados.

Líneas 32 a 42

Acá se establecen estilos para elementos que van a ser reutilizados en diversas partes de la imagen.

Líneas 45 a 48

Se crea un rectángulo que cubre todo el lienzo con el degradado que habíamos definido previamente.

Se crea un segundo rectángulo con fondo transparente y bordes redondeados, dando un efecto ventana.

Líneas 50 a 69

Se crea un efecto de red con líneas unidas con círculos a modo de nodos que las unen.

Se dibujan formas abstractas en las esquinas para darles dinamismo visual sin distraer.

Brillo: Se distribuyen aleatoriamente estrellas de 4 puntas por todo el lienzo para dar un efecto de destello.

Líneas 71 a 92

Se dibujan dos rectángulos con bordes redondeados en los laterales para simular insignias o etiquetas.

Placa central con forma hexagonal alargada para contener el título principal.

Líneas 94 a 135 y 380 a 435

Para ahorrarse trabajo, ChatGPT cambió la escala de los 5 paneles originales para que el sexto cupiera en el lienzo.

Lo que sigue es la determinación de los colores e iconos de los paneles que nosotros cambiaremos manualmente.

• Panel 1 Azul: Representa innovación e ideas. Contiene una bombilla como icono principal y un diagrama de flujo como icono secundario.
• Panel 2 Verde: Representa colaboración y estructura. El icono principal es un apretón de manos y el secundario es un gráfico de tortas.
• Panel 3 Amarillo: Representa crecimiento y datos. Usa un gráfico de barras como icono principal y uno de líneas como secundario.
• Panel Naranja: Representa análisis y optimización y tiene como icono principal cuadrículas y líneas y como secundario flechas circulares.
• Panel 5 Morado: Indica lanzamiento/proyectos, tiene como icono principal un cohete y como secundario una nube con un rayo.
• Panel 6 Color azul claro: Indica cierre o resumen. Repite la temática de la última columna, pero lo cambiaremos.

«`

Líneas 353 a 360

En estas líneas se dibujan los contenidos adicionales de los paneles.

• Se dibuja un círculo superior que actúa como contenedor para un número o icono pequeño. Nosotros lo cambiaremos por un sombrero.
• Se colocan iconos decorativos laterales con forma de cruces, diamantes y círculos para equilibrar el espacio negativo.
• Se agregan marcadores de posición con forma de viñetas y rectángulos grises semitransparentes que simulan líneas de texto.
• Se coloca en la parte inferior un rectángulo redondeado, al estilo de un botón de «Leer más».

Líneas 362 a 370

Aquí tenemos líneas horizontales y una serie de círculos pequeños ubicados en la parte inferior central. Esto simula que existen varias páginas que el usuario puede visitar como si fuera un carrusel.

Líneas 372 a 386

Acá se dibujan las flechas laterales.

Recordemos que las características de SVG son:

• Reutilización y mantenibilidad: El código usa las etiquetas <defs>, <g> (grupos) y clases CSS para que el archivo sea liviano y fácil de modificar. Por ejemplo, para cambiar el color azul, solo hay que modificar el degradado #blue o la clase .blueStroke.
• Escalabilidad: Las imágenes SVG se pueden ampliar a cualquier tamaño (por ejemplo, 4K) sin perder calidad, lo que hace que nuestra infografía sea ideal para pantallas de presentación o impresión.
• Diseño listo para usar: En esta plantilla no se incluye texto real, solo hay formas geométricas que lo simulan. Esto ahorra el trabajo del diseñador.

Ahora que tenemos la base de nuestra presentación, empezaremos con las modificaciones en el próximo artículo.

Artículo original