Tracear imágenes a SVG monocromáticos para moodle, otras web u otros proyectos con Inkscape

En moodle 5 para los iconos de los módulos de actividad se utiliza un fichero monologo.svg cuya imagen, con un tamaño y formato concreto, se colorea en función del propósito del módulo. El propósito del módulo debe estar definido en una función <modulo>_supports() en el fichero lib.php del módulo.

Para generar estos ficheros a partir de los iconos .png, seguir estos pasos utilizando el programa inkscape.

Paso 1: Importar tu imagen

Se recomienda partir de una imagen grande para el vectorizado sea más detallado, lo ideal es que sea una imagen sin pérdida como PNG pero si es un buen JPG también nos sirve.

• Abre Inkscape.

• Arrastra tu archivo de imagen dentro del lienzo de Inkscape o usa el menu Archivo → Abrir….

• Aparecerá una ventana de importación. Deja las opciones por defecto y dale a OK.

• Ahora tienes la imagen en el centro.

Paso 2: Vectorizar (Convertir píxeles a trazos)

• Haz clic izquierdo sobre tu imagen para asegurarte de que está seleccionada (verás unas flechas negras alrededor).

• En el menú superior, ve a Trazo > Vectorizar mapa de bits... (o usa el atajo Mayús + Alt + B).

• Se abrirá un panel a la derecha. Hay que configurarlo así:

  • Pestaña: Pasada simple (o Brillo de corte).

  • Umbral: Juega con el valor (usualmente 0.450 o 0.500 está bien).

  • Importante: Marca la casilla Vista en directo (si la tienes) para ver cómo queda. Deberías ver la silueta en negro.

  • Si el icono tiene colores claros y no sale bien, sube el umbral a 0.600 o más hasta que la silueta negra se vea completa y nítida.

• Haz clic en el botón Aplicar.

Paso 3: Limpiar

Ahora tienes dos cosas una encima de la otra: el vector nuevo y la imagen vieja.

1. Haz clic en la imagen y arrástrala a un lado. Verás que una se ve borrosa al hacer zoom (la original) y la otra nítida (el vector).

2. Selecciona la imagen original (la de colores o borrosa) y presiona la tecla Supr (Delete) para borrarla, es la que ha quedado debajo.

   1. Si no hay manera de mover la imagen borrosa sin mover la nítida por estar delante nos vamos a Capas > Capas y objetos.

3. Quédate solo con la silueta negra.

Paso 4: Ajustar al estándar "Monologo" (Negro puro)

Moodle necesita que el icono sea #000000 (negro puro).

1. Selecciona tu silueta vectorial.

2. Abajo a la izquierda verás una paleta de colores. Haz clic en el cuadro Negro (el primero).

3. Mira en la esquina inferior izquierda donde dice "Relleno" y "Trazo":

   • Relleno: Debe ser un cuadrado negro.

   • Trazo: Debe poner "Ninguno" o "None". En caso contrario, haz clic derecho sobre el cuadro de color "Trazo" abajo a la izquierda y elige "Eliminar trazo".

Para que el icono se vean idénticos a los nativos (Foro, Tarea, …), deben seguir esta proporción:

• Tamaño del Lienzo (Canvas): 24 x 24 píxeles (Esto es el archivo total).

• Tamaño del Dibujo (Glifo): Máximo 20 x 20 píxeles (aprox).

• Margen resultante: Unos 2 píxeles de espacio vacío a cada lado.

Paso 5: Fijar el tamaño del lienzo a 24x24

1. Ve a Archivo > Propiedades del documento (Mayús + Ctrl + D).

2. En la sección Formato (abajo), busca "Ancho" y "Alto".

3. Escribe manualmente 24 en Ancho y 24 en Alto (asegúrate que la unidad sea px).

4. Cierra esa ventanita.

Paso 6: Reducir el icono (El margen)

Ahora vamos a hacer el dibujo un poco más pequeño para dejar espacio libre.

1. Selecciona tu icono negro (haz clic sobre él).

2. Mira la barra de herramientas superior (donde están W y H).

   1. Si no aparecen ve a Objeto > Transformar > Escalar > Escalar proporcionalmente > Altura = 20pt

3. Asegúrate de que el candado () entre W y H esté cerrado.

4. Cambia el valor de H (Alto) a 20 (o 19 si es muy cuadrado). Dale a Enter.

   • Ahora el dibujo es más pequeño que el cuadro blanco.

Paso 7: Centrarlo perfectamente

1. Abre el panel Alinear y distribuir (Mayús + Ctrl + A). Lo encontrarás también en el menú Objeto.

2. Donde dice "Relativo a:", elige Página.

3. Haz clic en el icono de "Centrar en el eje vertical" (una línea vertical con cuadros a los lados).

4. Haz clic en el icono de "Centrar en el eje horizontal".

Paso 8: Guardar como SVG limpio

Este es el paso final para que el archivo sea ligero y compatible con Moodle.

1. Ve a Archivo > Guardar como...

2. En "Tipo" (abajo a la derecha de la ventana de guardar), NO elijas "Inkscape SVG".

3. Busca y selecciona SVG plano (*.svg).

   • El "SVG plano" elimina metadatos de Inkscape que Moodle no necesita.

4. Nómbralo monologo.svg.

Paso 9: Forzar que se use el propósito del módulo para colorear el icono

Para que tenga el color según el propósito hay que cambiar el color fijo por la variable CSS currentColor. Esto le dice al SVG: "Usa el color del texto del elemento donde me encuentres".

1. Ábre el fichero svg con tu editor de texto (Notepad++/VS Code).

2. Busca la etiqueta <path> y cambia style="fill:#000000..." o fill="#000000"

   por fill="currentColor"

3. Guarda el fichero.

Paso 10: Definir el propósito (purpose)

Hay que definir el propósito del módulo para que Moodle le ponga el color correspondiente, para ello:

1. Abre el fichero <modulo>/lib.php

2. Busca la función <modulo>_supports y añádele un nuevo case tal que así:

   case

    

   FEATURE_MOD_PURPOSE:return

    

   MOD_PURPOSE_CONTENT;

   Según el propósito del módulo en lugar de CONTENT puede ser que tengamos que poner otro, consultar la documentación de Moodle para más detalles.

3. Guarda del fichero.

 

Para otros proyectos

Si símplemente quieres hacer un avatar o un icono para un programa puedes usar los trucos recién expuestas con algunas variantes en las ideas: 

• No necesitarás todo lo que se ha explicado para Moodle, a no ser que quieras usarla para una página web, en cuyo caso puedes dejar  "currentcolor" y que se encargue el css de elegir el color:
  style="fill:currentcolor"
• Para otros proyectos que no usen css simplemente pon
  fill: #RRGGBB
  donde puedes poner el color que quieras.
• El ancho y alto del documento y de la imagen en sí lo puedes definir como quieras, por ejemplo, te puede interesar que la imagen sea 200 x 200 y dejar 10 puntos a los lados, en cuyo caso, En las propiedades de proyecto será 220 x 220 y tendrías que definir un margen superior e izquierdo de 10 puntos.

Recuerda que, al ser una imagen vectorial, puede tener luego el tamaño que quieras sin pixelaciones. 

Calendarios 2020 hechos con inkscape y gimp

Este año voy a hacer 4 calendarios para imprimir en A3 con impresora láser color de mis temas de interés favoritos: GNU/Linux, retroinformática, tente y Málaga.
Como siempre he usado software libre pero este año voy a utilizar herramientas distintas: inkscape para hacer el calendario en sí y gimp para ponerle el fondo que más nos guste.

Vamos al lío.

Inkscape

Simplemente abrimos inkscape y accedemos al generador de calendarios con las opciones de menú:

Extensiones ► Generar ► Calendario

Una vez nos abra el asistente cambiamos los valores de cada pestaña a nuestro gusto, prestando especial atención a:

• Pestaña configuración:
  • Año: 2020. Mes: 0 (todos en una sola página).
  • Día de inicio de la semana: Lunes.
  • Fin de semana: Domingo o Sábado y Domingo.
• Pestaña colores: elige los que más te gusten, los tienes que introducir en formato RRGGBB, que puedes obtener fácilmente con gpick o gimp por ejemplo.
• Pestaña Localización: presta atención a los nombres de meses y días de la semana y a haber elegido la codificación UTF-8 para no tener problemas con los acentos.

Y ya está, si dominamos inkscape incluso podríamos terminar el calendario desde esta herramienta, o si no lo guardamos como un archivo csv y terminamos el trabajo con GIMP.

En mi caso he personalizado la tipografía poniendo una muy especial para que sea un poco más original.

GIMP

• Una vez que tenemos el archivo csv lo abrimos con GIMP.
• Como se trata de una imagen prediseñada nos preguntará por la resolución con la que la vamos a abrir que debe ser generosa para que salga bien al imprimirla en el tipo de hoja que vayamos a usar.
• En mi caso voy a imprimirla en un A3 así que una resolución de entorno a 5000x7000 pixeles sería adecuada, teniendo en cuenta que estos son valores orientativos que variaran para que se mantenga las dimensiones del calendario.
• A partir de ahí vamos abriendo las imágenes que queramos en nuevas capas, que situaremos unas detrás de otras a nuestra conveniencia mediante el selector de capas, por supuesto la capa más superficial debe ser siempre nuestro calendario.
• A estas imágenes hay que aplicarles filtros, alguna capa extra o jugar con el tono y saturación para que queden como una marca de agua y así se vean bien los textos del calendario. 

 Los resultados

Aquí tenéis los 4 calendarios que he hecho para este 2020: Amstrad pinups, Grandes éxitos del software libre, Campeones de Tenteexpress y Málaga a orillas del Alcazaba.

¡Ojo! haz clic en ellos, no te guardes la imagen directamente o no tendrás la calidad necesaria para una buena impresión.

Y si te quieres hacer el tuyo propio, aquí tienes el archivo CSV para que le añadas tus imágenes favoritas.

Espero que os guste el regalo de Saturnalia.

¡Felices fiestas!

Alternativas al software propietario (II): Inkscape, el editor de gráficos vectoriales

Inkscape es un programa ideal para hacer gráficos vectoriales, utiliza el formato SVG que es un estándar que lee casi todos los programas incluidos los navegadores.

• Multiplataforma.
• Muy ligero, consume muy pocos recursos y estable.
• Compatible con otros programas.
• Maneja PDFs.
• Mucha documentación para sacarle todo el jugo.

Si aún no te ha convencido para probarlo, mira algunas capturas.

En su día, yo diseñe un mueble a medida en un ratito.

Enlaces de interés

• Creando PDF's CMYK para impresión con Inkscape y Scribus. 
• Videocursos para inkscape.