<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.
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).
Selecciona la imagen original (la de colores o borrosa) y presiona la tecla Supr (Delete) para borrarla, es la que ha quedado debajo.
Si no hay manera de mover la imagen borrosa sin mover la nítida por estar delante nos vamos a Capas > Capas y objetos.
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).
Selecciona tu silueta vectorial.
Abajo a la izquierda verás una paleta de colores. Haz clic en el cuadro Negro (el primero).
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
Ve a Archivo > Propiedades del documento (
Mayús + Ctrl + D).En la sección Formato (abajo), busca "Ancho" y "Alto".
Escribe manualmente 24 en Ancho y 24 en Alto (asegúrate que la unidad sea
px).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.
Selecciona tu icono negro (haz clic sobre él).
Mira la barra de herramientas superior (donde están W y H).
Si no aparecen ve a Objeto > Transformar > Escalar > Escalar proporcionalmente > Altura = 20pt
Asegúrate de que el candado (
) entre W y H esté cerrado.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
Abre el panel Alinear y distribuir (
Mayús + Ctrl + A). Lo encontrarás también en el menú Objeto.Donde dice "Relativo a:", elige Página.
Haz clic en el icono de "Centrar en el eje vertical" (una línea vertical con cuadros a los lados).
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.
Ve a Archivo > Guardar como...
En "Tipo" (abajo a la derecha de la ventana de guardar), NO elijas "Inkscape SVG".
Busca y selecciona SVG plano (*.svg).
El "SVG plano" elimina metadatos de Inkscape que Moodle no necesita.
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".
Ábre el fichero svg con tu editor de texto (Notepad++/VS Code).
Busca la etiqueta <path> y cambia
style="fill:#000000..."ofill="#000000"por
fill="currentColor"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:
Abre el fichero <modulo>/lib.php
Busca la función <modulo>_supports y añádele un nuevo case tal que así:
caseFEATURE_MOD_PURPOSE:returnMOD_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.
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.
No hay comentarios:
Publicar un comentario