Autor Tema: Vectorizando Imágenes Digitales  (Leído 8714 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado PalitroqueZ

  • Moderadores
  • DsPIC33
  • *****
  • Mensajes: 5474
    • Electrónica Didacta
Vectorizando Imágenes Digitales
« en: 27 de Marzo de 2011, 03:22:34 »
Introducción:

        Para todos los que usamos ordenadores, es casi impensable el no utilizar imágenes en nuestros proyectos o documentaciones. Existe todo un mundo tras la ciencia del diseño gráfico y para el usuario "promedio" utilizar una imagen no va mas allá que usar un formato conocido que muestre una resolución aceptable, y hasta ahí llegamos, así vamos pasando nuestro tiempo en otras actividades que demanden mas tiempo.

pero en diferentes ocasiones veremos que no podremos ser conformistas con una sola técnica, y mas cuando la evolución de los ordenadores ha llevado a personas a desarrollar otros medios para crear efectos mas realistas en cuanto al diseño, manipulación y transportación de gráficos, entonces es allí cuando nos damos cuenta que si, que si debemos invertir un poco de nuestro tiempo en averiguar como podemos utilizar otras técnicas para darle mayor calidad a nuestras presentaciones de fotografías o lo que sea que conlleve a una expresión artística que valga mas que mil palabras.

por lo general una imagen digital se trabaja bajo la forma pixelada (o rasterizada), pero existe otra técnica para manejar imágenes digitales, llamada vectorización de gráficos. En el presente articulo veremos como convertir imágenes rasterizadas en vectoriales para poder editarlas con mayor resolución y obtener una mejor calidad en el resultado final.


¿Que son los gráficos pixelados?

También llamado mapa de bits o rasterizado, son las imágenes que conocemos comúnmente como mapa de bits o BMP, gráfico de formato intercambiable o GIF, Portable Network Graphics o PNG y el Grupo Conjunto de Expertos en Fotografía o JPG

las imágenes que están constituidas bajo el pixelado, se caracterizan porque todo su contenido está formado por un conjunto de entidades llamadas pixels, que de acuerdo a ciertos parámetros le dan el color, la tonalidad, el contraste y la iluminación a lo que pretenden mostrar

los formatos mas conocidos son, BMP, JPG, GIF y PNG

¿Que son los gráficos vectoriales?

En un gráfico vectorial, la entidad mínima viene siendo una figura geométrica, que generalmente se crean con las curvas de Béizer, en los gráficos vectoriales, no existen matrices para definir el contenido de una imagen, sino que éstas, se construye a partir de objetos que poseen propiedades totalmente modificables.


entre la categoría de los gráficos vectoriales, existen cada fabricante o marca que lo utiliza de acuerdo a sus reglas. Por ejemplo está Macromedia Flash, CorelDraw y Adobe Illustrator.

en el rubro de códigos abiertos (si se puede decir), existen dos formatos que son bastantes conocidos: el Portable Document Format (PDF) y el Gráfico Vectorial Escalable (SVG)

trabajaremos sobre éste último, ya que es una especificación avalada por la W3C que funciona bajo gráficos vectoriales 2D, tanto estático como animado (y encima que está construido bajo el lenguaje XML)

¿es posible convertir gráficos pixelados en vectoriales?

si es posible, actualmente existen herramientas que permiten realizar esta tarea.

tanto el CorelDraw como el Adobe Illustrator lo realizan. Ya mencionaremos otros mas adelante.


¿De que me serviría convertir un gráfico pixelado a vectorial?

bueno.... la respuesta a esa pregunta depende de las necesidades, pero es muuuy probable que si usas un ordenador te veas en la necesidad de sacar provecho a los vectores para restaurar una imagen.


y esa es la palabra mágica, RESTAURAR, porque una de las aplicaciones de realizar una conversión es poder reparar, retocar e incluso mejorar notablemente aquella imagen que se encuentre deteriorada o que se tenga un aspecto NO adecuado para el uso que queramos darle.

vamos a poner un ejemplo:

supongamos que tenemos la imagen de pedro picapiedras





esta imagen se consiguió en formato jpg y tiene una resolución de 240x200 pixels con 24 bits de profundidad

pero, se necesita aumentarla a 800x600 ¿cómo se hace?

1.-  si piensas ponerla en un sitio web, basta con indicarle al navegador las nuevas dimensiones y listo. Parte del gráfico se vería así:




2.- se puede escalar con programa de edición de imágenes pixeladas, tales como el mspaint o el xnview








pero aún así el gráfico se nota deteriorado, con deficiencia y a menos que nos dediquemos a retocar por completo mediante un software de edición, no es posible aumentarle su calidad.

y es allí donde entra en juego la conversión de pixelado a vectorial



¿Que software uso para realizar la conversión de gráficos rasterizados a gráficos vectoriales?


para la pretensión de este articulo, se utilizará el Inkscape y el VectorMagic.


- Trabajando con Inkscape

el inkscape es el software por excelencia para manejar gráficos vectoriales bajo el formato svg. Si quieren saber mas sobre el inkscape, los invito a visitar el tema del amigo SavageChicken

Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos


y por supuesto la fuente original http://inkscape.org/?lang=es


tomemos, pues, la imagen de nuestro personaje y veremos como queda en vectores...

- Abrimos el inkscape e importamos la imagen (le decimos incrustar)




- Seleccionamos la imagen y nos vamos al menú trayecto/vectorizar mapa de bits, saldrá una ventana como esta:





se llama Potrace y es una utilidad creada por Peter Selinger. http://potrace.sourceforge.net/


allí vemos que aparece una cantidad de opciones de configuración, cada una con la generación de un resultado diferente.

si por ejemplo queremos tomar solo los bordes del gráfico, clicamos en la opción Detección de Borde




para vectorizar la imagen lo mas aproximado posible de la original, bastará clicar donde dice Colores en pasadas múltiples




y obtendremos:




observen que el nuevo gráfico se ve como borroso, eso es porque en las opciones de vectorizado se utilizaron 8 pasadas

las 8 pasadas significan que se crearon 8 capas de un mismo color, cada capa es en realidad una figura geométrica que forma parte de la imagen original y que junto con las otras 7 capas conforman el total de la imagen original




usted puede suponer que al ver tantas capas, da la impresión que manejar vectores como que es trabajar mas, pero en realidad no es tanto y la recompensa es infinita.

si tomamos una de las capas generadas, en su condición de vector, podemos manejarla a nuestro antojo y con mucho menor dificultad a que si se tratara de un gráfico rasterizado




además si volvemos nuevamente a vectorizar la imagen, y le añadimos mas capas, mas aumentará la calidad del resultado final, pongamosle 64 capas




noten que incluso la imagen generada tiene incluso mejor calidad que la original




con la misma imagen pero ahora en forma vectorial, se simplifica bastante el trabajo a la hora de retocarla o cambiarle el color, incluso podemos cortar trozos con relativa facilidad, y lo mas importante: podemos exportar la nueva imagen a cualquier dimensión sin pérdida de calidad!!!

notas:

- en el caso de montar imágenes en páginas web, podemos optar por dejar el gráfico en formato svg, puesto que el contenido de la misma está basado en XML, el navegador podrá leerlo sin dificultad (tal es el caso de Firefox)

- mientras mas capas le digamos al inkscape que cree, mejor será la calidad del gráfico, pero mayor será la memoria de video que exigirá y ralentizará el desempeño de software.


Llevando de Gráfico Vectorial a rasterizado

ahora hagamos el paso inverso, llevemos de gráfico vectorial a pixelado, podremos llevarlo a PNG, que es un formato que comprime sin degradación significativa (además que soporta transparencia)





Trabajando con Vector Magic

Vector Magic es una aplicación pago que se encuentra en la dirección http://vectormagic.com/desktop

vector magic es un software cuya finalidad es vectorizar gráficos pixelados en cualquiera de los formatos conocidos bmp, jpg, gif, png, tiff y psd


es posible usar una versión gratuita en modo online, mientras que la versión offline es paga

vamos a realizar el proceso anterior descrito con inkscape, pero ahora con vectormagic

1.- cargamos la imagen




del lado derecho aparecen varios botones de opción para arrancar con la conversión, podemos empezar por darle Totalmente automático y dejamos que corra los pasos siguientes




una vez terminado el proceso, observamos el resultado:




clicamos en siguiente y elegimos guardar en svg (también se puede guardar en formatos como AI, DXF, EMF, EPS y PDF)

abrimos en inkscape y vemos el resultado




si insertamos la imagen original, observaremos con mas detalle el antes y el después:




la calidad es notable, también se observan unos detalles que no coinciden como por ejemplo uno de los ojos, pero eso se puede arreglar con suma facilidad en inkscape una vez llevado a vector










y haciendo el proceso inverso de rasterizar la imagen svg a la resolución de 800x600 en formato png, tenemos el siguiente resultado





Comparaciones de Resultados

entonces, hagamos unas comparaciones tomando cada uno de los resultados con las diferentes técnicas de escalado, vectorizado y rasterizado

respecto a la original (jpg, 240x280):


- gráfico llevado a 800 pixel de ancho, png mediante editor de imágenes pixelado




- gráfico vectorizado por inkscape y rasterizado nuevamente  a 800 pixel de ancho, png





- gráfico vectorizado por vectormagic y rasterizado por inkscape a 800 pixel de ancho, png




« Última modificación: 27 de Marzo de 2011, 03:25:01 por PalitroqueZ »
La propiedad privada es la mayor garantía de libertad.
Friedrich August von Hayek

Desconectado IAO

  • Colaborador
  • PIC24F
  • *****
  • Mensajes: 702
Re: Vectorizando Imágenes Digitales
« Respuesta #1 en: 27 de Marzo de 2011, 17:17:53 »
Hola..
Buen post peter, te felicito..
Muy bueno..
Fìjate que tenìa un error. Pensaba que vectorizar era
lo mismo que trazado de lineas. Hoy me doy cuenta que son dos cosas diferentes.
Que broma tan seria es la ignorancia. :)

Prosperidad peter, todo lo mejor del cielo para ti.
Saludos..
« Última modificación: 28 de Marzo de 2011, 14:23:17 por IAO »
"No hay caminos para lograr la PAZ. La PAZ es el camino"... (Mahatma Gandhi).
Mentes Superiores discuten Ideas, Proyectos. Mentes Promedio discuten Acontecimientos y Sucesos. Mentes Pobres discuten sobre Personas.

Desconectado PalitroqueZ

  • Moderadores
  • DsPIC33
  • *****
  • Mensajes: 5474
    • Electrónica Didacta
Re: Vectorizando Imágenes Digitales
« Respuesta #2 en: 27 de Marzo de 2011, 17:57:16 »
Gracias Don Ruben!!!!


...Fijate que tenia un error. Pensaba que vectorizar era
lo mismo que trazado de lineas....

bueno, se podría decir que en cierta forma si.

La propiedad privada es la mayor garantía de libertad.
Friedrich August von Hayek

Desconectado SavageChicken

  • Colaborador
  • PIC24F
  • *****
  • Mensajes: 931
Re: Vectorizando Imágenes Digitales
« Respuesta #3 en: 30 de Marzo de 2011, 17:28:51 »
Hola Pedro.
Muy ilustrativo este tuto, espero que sea de mucha ayuda a los foreros.

Salud  8)
No hay preguntas tontas...
Solo hay tontos que no preguntan.

Desconectado falflores

  • PIC16
  • ***
  • Mensajes: 173
    • Control, electrónica y programación en español
Re: Vectorizando Imágenes Digitales
« Respuesta #4 en: 31 de Marzo de 2011, 06:34:18 »
Hola PalitroqueZ, excelente explicación, yo hace poco que me enteré de que son las imágenes vectoriales, ya que me hice unos drivers para CNC y necesitaba pasar una imagen a codigo G y la única forma de hacerlo es que el Vector Magic convierta la imagen JPG o equivalente a vectorial, y luego con otro programa llamado Lazy Cam, pasar la imagen vectorial a codigo G.
Los invito a mi blog "Control, electrónica y programación en español" www.robotnias.blogspot.com

Desconectado BlueShift

  • PIC10
  • *
  • Mensajes: 14
Re: Vectorizando Imágenes Digitales
« Respuesta #5 en: 19 de Junio de 2011, 19:08:07 »
gracias por la info, muy buena explicacion

Desconectado Santiago_Pardo

  • PIC10
  • *
  • Mensajes: 13
Re: Vectorizando Imágenes Digitales
« Respuesta #6 en: 20 de Junio de 2011, 07:38:27 »
Muy interesante, gracias

Saludos

Desconectado gamuu

  • PIC10
  • *
  • Mensajes: 9
Re: Vectorizando Imágenes Digitales
« Respuesta #7 en: 16 de Octubre de 2011, 20:20:31 »
Exelente aporte. Muchas gracias


 

anything