viernes, 6 de marzo de 2015

Iconos con fondo transparente, con Inkscape

Inkscape es un potentísimo editor de gráficos vectoriales, gratuito, libre y multiplataforma, que se instala por defecto en Debian y que, por supuesto, no me lo voy a estudiar (como tampoco me he estudiado el Gimp, el Photoshop, etc, etc) porque no soy un profesional de la edición de imágenes... pero que siempre viene bien conocer algún 'truquillo' (o 'utilidad') para hacer cosas puntuales (de hecho, ya he puesto algunos, en el Blog, para el Gimp).
El caso es que yo soy muy aficionado a usar mis propios iconos personales, que los obtengo, la mayoría de las veces, de imágenes que busco con Google, y algunas pocas creándolos, por ejemplo con LibreOffice Writer, o con Impress, y luego exportándolos como imagen para, ya, recortarlos y ajustarlos.
Pero en el tema de descargar (o crear) una imagen, para usarla como icono, ocurre la mayor parte de las veces que esta imagen lleva un fondo, normalmente blanco, y a mi me gusta que queden con el fondo transparente.
Mira, por ejemplo, aquí:
como se ve, las imagenes/icono de Firefox, y la de los CDRom, tienen un fondo blanco que no me acaba de convencer.
Entonces... ¿cómo quitárselo?
De hecho, hace tiempo, en esta entrada, explicaba cómo podía ponerse un fondo transparente a un icono, con GIMP. Pero ahora he visto cómo puede hacerse, por un método distinto, y en muchos casos más perfeccionado, con Inkscape... y lo voy a apuntar aquí, para recordarlo.
(Por cierto, los iconos que vienen en el sistema (en particular en /usr/share/icons) y son 'escalables' tienen la extensión SVG, que indica que se han creado con Inkscape, ya que SVG es su extensión 'nativa') 
El método de crear fondos transparentes con Inkscape, es bastante distinto. En esencia, lo que hay que hacer es vectorizar la imagen, desagrupar sus capas de colores, borrar aquellas capas que forman el fondo de la imagen y, hecho esto, volver a agruparlas y guardar la nueva imagen, ya con fondo transparente, bien como SVG (sería escalable) o bien como PNG. Y los pasos serían estos: Primera fase: Preparar (vectorizar) la imagen
1- abrir imagen con Inkscape y la seleccionamos con Edición-Seleccionar todo (Ctrl+A) o, aún más fácil, con un simple clic de ratón y vamos a Trayecto-Vectorizar mapa de bits. 
2- En la ventana emergente que sale, vamos a 'Pasadas múltiples: crea un grupo de trayectos' y, ahí marcamos 'Colores' y, en el cuadro 'Pasadas' vemos el valor que tiene (suele ser 8, o 9). 


Como tenemos seleccionada la imagen, si pinchamos en 'Actualizar' previsualizaremos cómo queda con esas 'Pasadas'. Si no nos gusta, modificamos esas pasadas (por ejemplo a 15... o a lo que queramos) y pinchando de nuevo en 'Actualizar' vamos previsualizando el resultado (las pasadas son, por decirlo así, la 'sensibilidad' a los distintos colores detectados, a más pasadas más 'capas' de distintos colores (o sea, más precisión)... pero si trabajas con muchas capas luego se enlentecen los procesos siguientes, aparte de que es más incómodo seleccionar una capa determinada... entre muchas. 
3- El caso es que, encontrado un acuerdo en la previsualización, tras el último Actualizar, pinchamos en 'Aceptar'. 
4- Y ya podemos cerrar esa ventana emergente. Al hacer esto, Inkscape nos habrá hecho una copia de la imagen original con los colores y la nitidez quizás un poco cambiados, que se superpone a la original. La desplazamos con el ratón, para ver ambas, seleccionamos la imagen original, la borramos, y nos quedamos con la modificada ('preparada'). 

Segunda fase: desagrupar y borrar
5- Ahora nos toca desagrupar los elementos de la imagen preparada
Para desagrupar los elementos, seleccionamos la imagen entera (clic ratón, o con Ctrl-A) y le damos a Objeto-Desagrupar. Entonces vemos como se divide en pequeñas capas (marcadas en cuadros de línea intermitente) basándose en los colores que había detectado en las 'Pasadas'. 
6- Ya desagrupados, ahora vamos a borrar el fondo de la imagen. Primero clicamos fuera de la imagen (para des-seleccionar todo) y luego clicamos en el fondo, para seleccionar solo esa capa. Entonces la arrastramos fuera de la imagen y, con Supr, lo borramos
(una técnica, si podemos confundirnos con los colores, es, seleccionada una capa, cambiarle de color, para ver mejor 'su alcance'). 

Tercera fase: agrupar y guardar
7- Y cuando nos queden solo las capas de colores que queramos, solo tenemos que seleccionar todo (por ejemplo con Edición-Seleccionar todo de todas las capas) y darle a Objeto-Agrupar los elementos seleccionados
8- Finalmente, guardamos esta imagen, ya sin fondo. Para esto vamos a Archivo- 'Exportar mapa de bits'. Aquí simplemente, le decimos la ruta en la que tiene que guardar el archivo y le damos a "Exportar". Lo guardará como PNG (o, si se lo indicamos, como SVG, que es el formato 'nativo' de Inkscape). 
Y ya está. Y así de bien quedarían los iconos que decía antes:


NOTA: el único problemilla que veo, a la hora de vectorizar el mapa de bits y definir las pasadas, es que la imagen tenga zonas de colores difuminados (como en el ejemplo del icono de Firefox que he usado para probar), porque las agrupa en 'capas de colores próximos' y si pones un excesivo número de pasadas muchas capas y se enlentecen los procesos siguientes. 

En resumen, Inkscape es una aplicación potentísima, el que la quiera estudiar a fondo seguro que encontrará multiples Manuales buceando por Google pero yo, como simple 'aficionadillo', de momento me quedo aquí, con esta utilidad de hacer transparentes los fondos de los iconos.
(que, por cierto, pienso que también podría servir, en ciertos casos, para 'recortar' una imagen, o para cambiar de color no se, unos ojos, una camisa..., es cuestión de poder seleccionar bien la capa específica...). Y veremos si más adelante encuentro alguna otra 'utilidad' interesante.

2 comentarios:

  1. Buenos días! Muchas gracias porque he conseguido terminar mi trabajo satisfactoriamente.
    Saludos
    Rocio

    ResponderEliminar
  2. Muchas gracias por tu explicación.
    Me ha venido estupendamente porque era exactamente lo que quería hacer con una imagen con fondo blanco.
    ¡Y funciona de maravilla!

    ResponderEliminar