¿Cómo transformar una imagen de píxeles en el logotipo de vector en Inkscape?

17

No sé si estoy en el lugar correcto, pero me gustaría saber cómo transformar una imagen de píxeles que hice en un logotipo vectorial.

Utilizo esta imagen para mi favicon de mi sitio web personal. Y si tienes alguna recomendación de software , trabajo en Mac. Prefiero usar uno de código abierto.

Imagen de píxeles

Guillaume Vincent
fuente
3
¿Estás tratando de mantener el aspecto pixelado, o estás tratando de suavizarlo?
Brendan
También relevante: ** Dibujos en tamaño de píxel en vector
JohnB
El pequeño problema es que la imagen no está bien formada, no son cuadrados perfectos cuando se acerca.
Adam Schuld
@brendan Quiero mantener el aspecto pixelado
Guillaume Vincent

Respuestas:

16

Inkscape

Esta potente aplicación de gráficos vectoriales es gratuita, multiplataforma y de código abierto. Viene con una función incorporada para rastrear gráficos vectoriales desde mapas de bits.

Estos son los pasos involucrados:

  1. Archivo - Importar ... : elija "incrustar" el mapa de bits.
  2. Seleccione el mapa de bits incrustado.
  3. Elija Ruta -trace mapa de bits ... . Esto abrirá el siguiente cuadro de diálogo:

    ingrese la descripción de la imagen aquí

  4. Realice los siguientes ajustes para preservar la apariencia del cuadro cuadrado pixelado en el Modo y en las pestañas Opciones :

    ingrese la descripción de la imagen aquí

    • Marque los colores .
    • Elija 11 Escaneos para los 11 colores de su imagen de origen.
    • Tick Stack escanea para tener un objeto por color apilado uno encima del otro.
    • Desactive las esquinas suaves y optimice las rutas para los cuadros cuadrados resultantes.
    • Haga clic en Actualizar para obtener una vista previa, OK para rastrear el mapa de bits.
    • Mueva el gráfico vectorial al lado del mapa de bits para comparar el resultado (aquí la traza del vector seleccionado está en el lado derecho):

    ingrese la descripción de la imagen aquí

    • Copie el objeto vectorial en un nuevo dibujo y guárdelo en el formato de archivo que elija.

Nota:

Esta guía no conducirá al resultado deseado de un gráfico vectorial pixelado cuando se trabaja en una fuente de icono muy pequeña. Para seguir obteniendo el efecto pixelado en el rastreo, primero debemos aumentar la escala del icono antes de importarlo a Inkscape.

Takkat
fuente
Una cosa que tengo curiosidad acerca de @Takkat es si la misma anormalidad está en su rastro como en Illustrator. Si miras mi respuesta, verás que el ojo no es exactamente una línea recta: ¿es lo mismo en Inkscape o Inkscape lo hace mejor?
Adam Schuld
@AdamSchuld: en Inkscape es la opción "optimizar ruta" que tenemos que desactivar para obtener líneas rectas en lugar de Béziers. Sin embargo, puede que no haya ángulos rectos del 100% (difícil de probar). Creo que hay una opción similar en Illustrator (pero no puedo probarla en mi sistema de código abierto aquí).
Takkat
3

No soy competente en el programa, pero se puede hacer en Inkscape. Estoy seguro de que alguien se precipitará y lo explicará en Inkscape. Una cosa que noté cuando amplié la imagen es que hay una imprecisión con esos cuadrados en su imagen. Quien hizo esta imagen usó un ancho de fila alterno de 7 píxeles y 8 píxeles, lo que lo hace un poco más complicado de un proceso al hacer una cuadrícula para el efecto pixelado.

La forma más rápida y rápida es usar el rastreo de imágenes en Adobe Illustrator, literalmente lleva menos de un minuto en comparación con el proceso más complicado de recrear los píxeles usando una cuadrícula. No estoy 100% seguro de que el rastreo de mapas de bits en Inkscape produzca el mismo resultado.

En cualquier caso, el proceso en Illustrator es importar la imagen y luego usar el trazado de la imagen con aproximadamente la misma configuración que la imagen a continuación. Producirá un rígido efecto de píxel. ingrese la descripción de la imagen aquí

El efecto se amplió. Para la mayoría del efecto no habrá anormalidades. Aumentado

Sin embargo, en ciertas áreas necesitará arreglar las rutas manualmente porque están ligeramente apagadas. Anormalidades leves

Adam Schuld
fuente
gracias @AdamSchuld, elijo la solución de código abierto Takkat. Pero su respuesta puede ayudar a los usuarios de ilustradores.
Guillaume Vincent
¡Su respuesta fue mejor! Me alegro de poder ayudar
Adam Schuld
0

No es necesario usar gráficos vectoriales cuando desea un aspecto de píxel-y. Simplemente puede usar GIMPpara mejorar su PNGarchivo. Así es cómo:

  1. Abre tu archivo en GIMP
  2. Seleccione Image>Scale Image
  3. Cambie la configuración para escalar su archivo
  4. Exporte su archivo escalado como otro PNG(presione Ctrl+ Shift+ Eo seleccione File> Export)

Sin embargo, si está extruyendo el ícono de píxel Blender, tendrá que usar el Inkscapemétodo.

RetroAsgardian
fuente