Trabajo Fin de Grado
Diseño de una aplicación de búsqueda de imágenes
vectoriales mediante su estilo visual
Autor
Daniel Osanz Tello
Directora
Elena Garcés
Ponente
Diseño de una aplicación de búsqueda de imágenes vectoriales
mediante su estilo visual
RESUMEN
La mayoría de aplicaciones de edición y composición de imágenes integran bibliotecas con elementos prediseñados para crear composiciones de manera rápida y sencilla. Y en otras ocasiones los usuarios de estas aplicaciones recurren a galerías online en busca de este tipo de imágenes. Sin embargo, la búsqueda de imágenes con estilos semejantes, necesarios para crear una composición homogénea, resulta complicada en ambos casos.
Actualmente, herramientas como Google Imágenes nos permiten realizar búsquedas de imágenes prediseñadas -clip art- “visualmente similares” a una imagen de consulta. Sin embargo, los resultados obtenidos se limitan a imágenes con histogramas de color parecidos pero con estilos visuales que suelen ser totalmente diferentes, lo que provoca que cuando queramos realizar una composición o un diseño gráfico con elementos visualmente similares tengamos problemas en la búsqueda de imágenes del mismo estilo. El problema estriba en que los seres humanos somos capaces de interpretar el estilo de manera innata, sin embargo, un ordenador no es capaz de realizar esta tarea de manera automática.
En este proyecto se pretende indagar en este problema y analizar a fondo cuáles son las características visuales que definen un estilo de arte gráfico, es decir, qué elementos hacen que imágenes generadas por ordenador nos resulten perceptualmente similares. Además, para dar a conocer la aplicación, se desarrollará la imagen de marca de esta, un prototipo que simule la búsqueda de imágenes teniendo en cuenta sus características con el que se puedan crear composiciones de manera rápida y sencilla, una web promocional y un vídeo explicativo.
Índice General
Resumen I 1. Introducción 1.1. Motivación . . . 1 1.2. Objetivos . . . 2 1.3. Contexto . . . 2 1.4. Definiciones . . . 2 1.5. Estructura de la memoria . . . 3 2. Estudio de mercado 2.1 Productos de búsqueda por estilo . . . 42.1.1 Art explosion 800,000 . . . 4
2.1.2 Galería Microsoft Office . . . 6
2.2 Productos de búsqueda por palabras clave . . . 6
2.2.1 Dreamstime . . . 6
2.2.2 Fotolia . . . 7
2.2.3 iStockPhoto . . . 8
2.2.4 OpenClipArt . . . 8
2.3 Productos de búsqueda por imagen de referencia . . . 9
2.3.1 Google Images . . . 10
2.3.2 Pixolution . . . 12
2.3.3 Galería Microsoft Office . . . 14
2.4 Otros productos . . . 16
2.5 Conclusiones estudio . . . 16
3. Análisis de los datos 3.1 Características que definen un estilo . . . 19
3.3 Selección de un subconjunto de datos . . . 26
4. Diseño de la aplicación 4.1 Propuesta de funcionalidades de la aplicación . . . 27
4.1.1 Brainstorming . . . 27
4.1.2 Funcionalidades seleccionadas . . . 28
4.2 Interfaz del prototipo de búsqueda . . . 28
4.2.1 Objetivos . . . 28 4.2.2 Evolución formal . . . 28 4.2.3 Diseño final . . . 30 5. Diseño gráfico 5.1 Imagen de marca . . . 32 5.1.1 Fase de información . . . 32
5.1.2 Nombres para la aplicación. . . 33
5.1.3 Conceptos . . . 33
5.1.4 Evolución del concepto . . . 33
5.1.5 Normalización del imagotipo . . . 34
5.1.6 Manual de marca . . . 35
5.2 Póster promocional . . . 35
5.2.1 Objetivos . . . 35
5.2.2 Concepto . . . 35
5.2.3 Evolución del concepto . . . 35
5.3 Diseño web . . . 37 5.2.1 Objetivos . . . 37 5.2.2 Evolución formal . . . 38 5.2.3 Diseño final . . . 39 5.4 Vídeo explicativo . . . 40 6. Conclusiones 6.1 Trabajo realizado . . . 44 6.2 Trabajo futuro . . . 44 6.3 Conclusiones personales . . . 45
Capítulo 1
Introducción
1.1. Motivación
En los últimos años ha aumentado el interés por el diseño gráfico, apareciendo cada vez más obras de autores desconocidos en la red y aumentado considerablemente la calidad de los diseños. Este interés es debido a la constante evolución de las herramientas informáticas de edición y composición de imágenes con las que cada vez resulta más sencillo que un usuario sin experiencia previa pueda crear una obra de calidad de manera rápida.
Los diseñadores gráficos cuentan con una gran creatividad y buena mano a la hora de dibujar los elementos que constituirán su obra, sin embargo, el usuario convencional de estas aplicaciones no dispone de esa creatividad o de los medios necesarios para plasmar su idea en un soporte digital, por lo que recurrirá a galerías de imágenes prediseñadas que pueda emplear en sus obras. El problema de estas galerías es que las imágenes se encuentran muy mal organizadas y resulta complicado encontrar varias de un estilo similar para crear una composición coherente.
Actualmente, herramientas como Google Imágenes nos permiten realizar búsquedas de imágenes prediseñadas “visualmente similares” a una imagen de consulta. Sin embargo, los resultados obtenidos se limitan a imágenes con histogramas de color parecido o de la misma categoría semántica pero con estilos visuales totalmente diferentes, ya que un ordenador, a diferencia de los seres humanos, no puede interpretar el estilo de manera automática.
Este trabajo pretende indagar en las características de una imagen como su color, contorno y forma, para conseguir una mejor definición del estilo, de manera que se pudiesen crear conjuntos de imágenes visualmente similares como se muestra en la Figura 1.
1.2. Objetivos
Los objetivos principales del proyecto son:
■ Analizar las características visuales de las imágenes vectoriales para comprender cuales son las más importantes y las que definen estilos.
■ Diseñar una aplicación para la búsqueda de imágenes vectoriales, mediante el análisis de su estilo visual o artístico.
■ Crear la imagen corporativa de dicha aplicación así como un sitio web donde se muestren las funcionalidades de la aplicación y un prototipo de búsqueda.
1.3. Contexto
El proyecto ha sido desarrollado en los laboratorios del Grupo de Informática Avanzada (GIGA), dentro del Graphics and Imaging Lab (GILab) perteneciente al Departamento de Informática e Ingeniera de Sistemas (DIIS) en la Escuela de Ingeniería y Arquitectura (EINA) de la Universidad de Zaragoza. Ha sido dirigido por Elena Garcés y supervisado por el Dr. Diego Gutiérrez.
El trabajo está encuadrado dentro de la línea de investigación del GILAB en el campo de la edición avanzada de imágenes y en particular, dentro del proyecto de investigación titulado “Style-it! Clip Art Mashups” que actualmente se está desarrollando en colaboración con la empresa Adobe Systems Inc.
1.4. Definiciones
Durante los siguientes capítulos aparecerán términos cuyo significado pueda parecer confuso, de manera que para aclararlos se han definido de la siguiente manera:
■ Características: Rasgos que caracterizan a una imagen, como por ejemplo la cantidad de colores o el grosor del contorno de esta.
■ Categoría: Grupo de imágenes relacionadas por un tema como por ejemplo animales, vehículos... ■ Coherencia visual: Similitud del estilo de los elementos de una composición.
■ Elemento (compositivo): Cada una de las imágenes prediseñadas que hay en una composición. ■ Estilo: Conjunto de imágenes con las mismas características.
■ Imagen digital: Representación bidimensional de una imagen a partir de una matriz numérica. ■ Imagen matricial (Mapa de bits): Representación de una imagen a través del almacenamiento
del color de cada punto en la matriz. Se suele emplear para tomar fotografías digitales y realizar capturas de vídeo. Los formatos de estas imágenes más conocidos son JPG, PNG y GIF.
■ Imagen prediseñada (Clip art): Imagen diseñada para que un usuario la utilice.
■ Imagen vectorial: Representación de una imagen a través del uso de objetos geométricos como curvas de Bézier y polígonos. Los formatos de estas imágenes más conocidos son EPS, WMF y AI.
1.5. Estructura de la memoria
Los siguientes capítulos se encuentran estructurados de la siguiente manera: en el capítulo 2 se realiza un estudio de las aplicaciones que realizan búsquedas similares de imágenes realizando pruebas con las principales. En el capítulo 3 se realizará una exploración de las características que definen un estilo y las categorías semánticas en las que se pueden clasificar las imágenes. El capítulo 4 se encarga del diseño de la aplicación, teniendo en cuenta la selección de las funcionalidades y la interfaz. En el capítulo 5 se encuentran todos los elementos gráficos relacionados con la aplicación, entre los que se incluye el diseño del imagotipo, pósteres promocionales, sitio web y vídeo explicativo.
La memoria cuenta con un Anexo en el que se muestran análisis más completos, imágenes de las composiciones gráficas con una mayor resolución, las ideas obtenidas del brainstorming, manual de marca, explicación del código empleado en la web y la planificación del proyecto. Además, junto a este anexo se encuentra un CD que contiene los ficheros de la página web definitiva y el vídeo explicativo de la aplicación.
Capítulo 2
Estudio de mercado
En este capítulo se estudiarán las principales aplicaciones, bases de datos y galerías online relacionadas con la búsqueda de estilos similares, analizando su funcionamiento y características. Todos estos productos se englobarán en tres grandes grupos, teniendo en cuenta el criterio de búsqueda, que puede ser: búsqueda por estilo, búsqueda por palabra clave y búsqueda por imagen de referencia.
2.1. Productos de búsqueda por estilo
Una de las diferentes maneras de realizar búsquedas de imágenes parecidas a una dada es mediante una clasificación previa en grupos del mismo estilo. Este método requiere mucho tiempo para clasificar las imágenes manualmente y posee un gran inconveniente, que la búsqueda de imágenes de un estilo concreto resulta demasiado laboriosa.
Los principales productos de este grupo son las bases de datos de pago, de las cuales se analizó Art explosion 800.000, y algunas galerías online como la de imágenes de Microsoft Office.
2.1.1. Art explosion 800.000
Esta base de datos de pago se compró para realizar el proyecto debido al gran número de imágenes vectoriales que contenía, que serían necesarias para realizar el estudio de las características principales y las pruebas con el prototipo de la aplicación. Posee una gran cantidad de estilos diferentes pero no correctamente organizados, ya que las imágenes de un mismo grupo son bastante diferentes en varios casos.
La galería de gráficos vectoriales Art Explosion 800.000 clasifica las imágenes en diferentes carpetas, realizando una primera agrupación por temática y una segunda dentro de la anterior por estilo en las carpetas que más imágenes contienen, tal y como vemos en la Figura 2.1. Los estilos que podemos encontrar en alguna de las carpetas con nombre de temática se muestran en la Figura 2.2 y son:
■ Cartoons: Imágenes poco realistas que generalmente tienen un reducido número de trazos de tipo irregular.
■ Sin nombre de estilo: Imágenes más realistas que las anteriores organizadas simplemente por el nombre de categoría a la que pertenecen y las iniciales de las subcategorías que contienen, como por ejemplo Aquatic (A-DI), que incluye las imágenes relacionadas con animales acuáticos que empiezan por A... hasta los que empiezan por Di...
■ Line Art: Imágenes formadas exclusivamente por trazos negros irregulares.
■ Silhouettes: Imágenes de un solo color que consisten en la silueta de lo que representan. El color no tiene por que ser necesariamente negro.
■ Brush Stroke: Imágenes de color con contorno grueso. La gran mayoría son las que se encuentran en la carpeta de Line Art coloreadas.
■ Stylized: Imágenes que contienen gran cantidad de colores vivos y son bastante irreales.
Los problemas observados al buscar imágenes de un determinado estilo en esta galería fueron dos: que las diferencias entre los estilos que no tenían nombre y cartoons eran mínimas y contenían imágenes de estilos muy diferentes, y que había gran cantidad de carpetas y se debía saber de antemano el gráfico que se quería encontrar.
Figura 2.1:Organización de las imágenes vectoriales por carpetas de estilos generales en la base de datos Art Exploson 800,000.
(a) Base de datos (b) Clasificación por estilos (c) Resultados mostrados
(a) Cartoons (b) Sin estilo (c) Line Art (d) Silhouettes (e) Brush Stroke (f ) Stylized
2.1.2. Galería Microsoft Office
1Esta galería online (Figura 2.3) contiene diversas imágenes tanto en formato de mapa de bits como en formato vectorial. La búsqueda de imágenes de estilo parecido se realiza gracias a una clasificación previa, que se define en un número de cuatro dígitos vinculado a todas las imágenes con exactamente las mismas características.
Los dos problemas de esta organización son que hay tantos estilos que algunos de ellos tienen muy pocos elementos (unos diez) y que se limita a la búsqueda de estilos concretos en los que el parecido es total, excluyendo gran cantidad de imágenes que resultan visualmente parecidas. Por otra parte las principales ventajas que ofrece este método son que se trata de una base de datos con imágenes libres gratuita y que al estar las imágenes en un servidor online no ocupan espacio las que no se utilizan.
2.2. Productos de búsqueda por palabras clave
Otra manera de clasificar imágenes para posteriormente poder realizar búsquedas de similaridad consiste en asignar una serie de palabras clave relacionadas con las características de estas. Como en el método anterior, requiere clasificar manualmente cada una de las imágenes de la base de datos, pero ofrece una mejor búsqueda de parecido ya que no se limita a estilos concretos, sino que tiene en cuenta algunas de sus características, proporcionando más datos para poder comparar imágenes. El problema de este método, es que se le suele dar más importancia a palabras clave relacionadas con la categoría o con color del elemento que a las que tienen que ver con sus características, principalmente porque está orientado a imágenes reales, en las normalmente se busca el mismo objeto. Esto produce que más de la mitad de las palabras clave que caracterizan la imagen sean sobre categorías y por lo tanto los resultados de búsqueda se centren en la temática en vez del estilo.
Los ejemplos que realizan este tipo de clasificación estudiados son: Dreamstime, Fotolia, iStockPhoto y OpenClipArt, y todos ellos son galerías online que contienen imágenes en formato vectorial y mapa de bits.
2.2.1. Dreamstime
2Esta galería online (Figura 2.4) contiene imágenes de pago cuyo precio depende de la resolución o formato que se desea descargar. Para especificar que se quiere realizar una búsqueda de imágenes clip art Figura 2.3:Búsqueda de imágenes por estilos predefinidos en la galería online de Microsoft Office.
(a) Portada (b) Resultado de búsqueda (c) Categoría de estilo
1 http://office.microsoft.com/en-001/images/ 2 http://www.dreamstime.com/
basta con seleccionar la opción de Ilustraciones que se encuentra en la barra de búsqueda.Las palabras clave que utiliza, tienen que ver principalmente con las categorías en las que se engloba la imagen (gato, mascota, doméstico, halloween...), pero también contiene en menor medida relacionadas con el color (negro, blanco...) y con características ( silueta, boceto, cartoon, contorno, y línea exterior).
2.2.2. Fotolia
3Esta galería online (Figura 2.5) también contiene imágenes de pago, pero a diferencia del resto de galerías, esta incorpora un filtro de colores en el que se puede seleccionar una paleta de colores, para que al buscar imágenes solo muestre los resultados que tengan los colores especificados en la paleta. En la barra de búsqueda hay un desplegable que permite seleccionar la opción Ilustración para buscar imágenes vectoriales. Las palabras clave que utiliza tienen que ver casi exclusivamente con la categorías en las que se engloba la imagen (gato, adorable, animal, doméstico, mascota...), aunque también contiene algunas relacionadas con el color (rojo, blanco...) y muy ocasionalmente de características (silueta, contorno y dibujo animado). El precio de las imágenes también dependen del tamaño a los que se desea descargar estas.
Figura 2.5:Búsqueda de imágenes por palabras clave en la galería online de Fotolia.
(a) Portada (b) Resultados de búsqueda (c) Búsqueda por color
Figura 2.4:Búsqueda de imágenes por palabras clave en la galería online de Dreamstime.
2.2.3. iStockPhoto
4Esta galería online (Figura 2.6) contiene imágenes de pago y permite realizar búsquedas simples por similitud a un único color especificado. Las palabras clave que utiliza tienen que ver en su mayoría con la categorías en las que se engloba la imagen (gato doméstico, precioso, animal, generado ordenador...), pero también contiene algunas relacionadas con el color (negro, blanco...) y ocasionalmente de características (silueta, contorno, cartoon, icono). Los precios de estas imágenes dependen del autor y no del tamaño.
2.2.4. OpenClipArt
5Esta última galería online (Figura 2.7) contiene imágenes gratis y además permite a los usuarios editarlas de manera online. La lista de palabras clave es mucho más reducida y concreta que en las demás galerías (teniendo una media de diez y no cuarenta como el resto) y se le otorga el mismo valor a las palabras relacionadas con la categoría que a las de las características. En relación a la categoría usa palabras como animal, gato y mascota y para las características silueta, contorno, no contorno, línea exterior o dibujo animado.
Dentro de los productos que emplean palabras clave para realizar las búsquedas similares, esta base de datos es la que mejores resultados ofrece gracias a la correcta selección de palabras clave.
Figura 2.7:Búsqueda de imágenes por palabras clave en la galería online de OpenClipArt.
(a) Resultados sin categorías (b) Palabras clave (c) Resultados con categorías
Figura 2.6:Búsqueda de imágenes por palabras clave en la galería online de iStockPhoto.
(a) Portada (b) Resultados sin categorias (c) Resultados con categorías
4 http://www.istockphoto.com/ 5 http://openclipart.org/
2.3. Productos de búsqueda por imagen de referencia
El último método de búsqueda de imágenes similares consiste en el análisis de estas, de manera que a partir de una imagen de referencia se obtengan otras visualmente semejantes. Las principal ventaja de este método reside en que no hay que clasificar previamente ninguna imagen. El problema es que aparentemente, los productos que incorporan este método parecen pensados para su uso con imágenes reales y al utilizarlo en clip art, como veremos a continuación, los resultados no son los deseados.
Los productos estudiados que realizan este tipo de clasificación son: Google Images, Pixolution y la galería de Microsoft Office. Nótese que los resultados mostrados a continuación son una versión reducida del análisis completo incluido en el Apéndice A del Anexo.
Para analizar el funcionamiento de Google Images y Pixolution se realizó una prueba consistente en buscar imágenes con características marcadas y estudiar los resultados. Se seleccionaron tantas imágenes como características más importantes analizadas (véase el análisis de la sección 3.1), teniendo cada una de las ilustraciones una de las características muy marcada. Las imágenes seleccionadas pueden verse en la Figura 2.8. Además, para facilitar el análisis de los resultados, se buscaron solo imágenes de una categoría con muchos resultados: gatos.
Para los casos de la galería de Microsoft Office y Xerox, que funcionaban con imágenes propias, se seleccionaron diferentes imágenes pero que también contuviesen las características previamente numeradas. Las imágenes patrón utilizadas en estos casos se muestran en las figuras de cada galería.
Figura 2.8: Imágenes patrón utilizadas en las pruebas con Google Images y Pixolutión, teniendo como característica marcada: (a) Contorno fino, (b) Contorno grueso, (c) Contorno irregular, (d) Sin contorno(e) Blanco y negro, (f) Muchos colores, (g) Pocos colores, (h) Sombreado duro, (i) Transición suave, (j) Transición dura, (k) Forma 3D, (l) Forma plana, (m) Forma simple, (n) Forma compleja, (o) Relleno por fuera.
(a) (b) (c) (d) (e) (f ) (g) (h)
2.3.1. Google Images
6El buscador de imágenes de Google incorpora una herramienta para búsquedas por similaridad visual en la cual tras arrastrar una imagen a la barra de búsqueda muestra imágenes parecidas a la patrón, tal y como se muestra en la Figura 2.9. Además, incorpora otros criterios de búsqueda para unos resultados más específicos, como filtro de color y añadir palabras clave en la barra de búsqueda.
Para probar la aplicación se realizó la prueba explicada en la sección anterior. Los resultados de la aplicación fueron los siguientes (todas las secciones hacen referencia a la Figura 2.10 de la siguiente página):
■ Contorno: Interpreta correctamente si la imagen tiene contorno fino o grueso (secciones a y b). ■ Color: Las imágenes en blanco y negro las interpreta bien (secciones c, e, m y n), incluso devuelve
imágenes con la misma cantidad de negro total que la patrón para diferenciar entre contorno y relleno (secciones c y e), sin embargo ni las imágenes con muchos colores ni las que contenían sombreado duro son correctamente analizadas (secciones f y h).
■ Transición: No distingue entre imágenes con degradado y sin él (secciones i y j).
■ Forma: La forma compleja y simple de las imágenes la interpreta bien (secciones n y m) pero no sabe distinguir si la imagen es plana o 3D (secciones k y l) o si el relleno está fuera del contorno (sección o).
Como conclusión se podría decir que Google Images es una herramienta que analiza correctamente la mayoría de las imágenes aparentemente basándose en el histograma de color de estas para buscar resultados parecidos, método que funciona bastante bien con fotografías pero no tanto con clipart. La principal ventaja de este método es que no hace falta especificar manualmente palabras clave, pero un gran problema reside en la fiabilidades de las búsquedas.
Figura 2.9:Búsqueda de imágenes similares mediante análisis de estilo en el buscador de Google.
(a) Portada (b) Patrón Característica (c) Resultados para patrón
Figura 2.10: Resultados de búsqueda de
Google Images tomando como referencia las
correspondientes imágenes de la Figura 2.8.
11
a
1c
b
d
1e
11g
f
1i
h
1k
j
1m
l
2.3.2. Pixolution
7Pixolution (Figura 2.12) es una aplicación web especializada en la búsqueda de imágenes que permite realizar búsquedas por color, palabras clave o similaridad. La búsqueda por color es más avanzada que la que realiza Goggle, ya que mientras que este solo permite especificar un color, en Pixolution se puede añadir una paleta de colores. Y la búsqueda por palabres clave y por similaridad se realiza de manera parecida a Google, únicamente diferenciándose en que la interfaz de Pixolution resulta más clara y sencilla de usar que la de Google, que en ocasiones resulta confusa.
Para probar la aplicación se seleccionaron las mismas imágenes patrón que para Google Images. Los resultados de la aplicación fueron los siguientes (todas las secciones hacen referencia a la Figura 2.12 de la siguiente página):
■ Contorno: Interpreta correctamente si la imagen no tiene contorno o este es fino (secciones d y a), pero el grueso no lo analiza bien (sección b).
■ Color: Las imágenes en blanco y negro las interpreta bien (secciones c, e, m y n), así como la cantidad de negro total para diferenciar entre contorno y relleno (secciones c y e). Las imágenes con muchos colores las analiza mejor que Google (sección f ) pero las que contienen sombreado duro siguen sin ser correctamente interpretadas (sección h).
■ Transición: Distingue un poco si la transición entre los colores de la imagen es suave (sección i), pero la dura no (sección j).
■ Forma: La forma compleja de las imágenes la analiza de una manera aceptable (sección n) pero la simple no (sección m), y tampoco entiende si la ilustración tiene aspecto plano o 3D (secciones k y l), o si el relleno se sale del contorno (sección o).
Como conclusión se podría decir que Pixolution es una buena herramienta para buscar imágenes similares pero las búsquedas siguen sin resultar satisfactorias. La principal ventaja de esta opción es que incorpora de manera muy clara varios métodos de búsqueda en uno, como son la paleta de colores, palabras clave y análisis, permitiendo realizar búsquedas de manera sencilla e intuitiva.
Figura 2.11:Búsqueda de imágenes similares mediante análisis de estilo en el buscador de Pixolution.
(a) Portada (b) Patrón Característica (c) Resultados para patrón
11
a
1c
b
d
1e
1g
f
1i
h
1k
j
1m
l
Figura 2.12: Resultados de búsqueda de
Pixolution tomando como referencia las
2.3.3. Galería Microsoft Office
La galería de imágenes de Microsoft Office (Figura 2.13), además de permitir búsquedas de similaridad por estilos, contiene una opción para buscar imágenes visualmente parecidas basándose en la similaridad visual y palabras clave.
Para probar la aplicación se seleccionaron imágenes de la base de datos de Microsoft Office de diferentes estilos y que tuviesen alguna característica predominante. Los resultados fueron los siguientes (todas las secciones hacen referencia a la Figura 2.14 de la siguiente página):
■ Contorno: Las imágenes sin contorno son correctamente interpretadas (sección b) pero las que tienen contorno grueso no (sección a).
■ Color: Las imágenes en blanco y negro las interpreta bien, pero no analiza como Google o Pixolution la cantidad de negro presente en la ilustración, lo que provoca que en ocasiones confunda contorno con relleno (sección c). Las imágenes pocos o muchos colores las analiza correctamente también (secciones b y d) pero las que contienen sombreado duro siguen sin ser correctamente interpretadas (sección e).
■ Transición: Cuando la transición es suave la interpreta correctamente (sección f ).
■ Forma: La forma simple o compleja la analiza bien (secciones c y e) así como distinguir si la imagen es plana o 3D (secciones a y f ), además, a diferencia de las dos aplicaciones anteriores, entiende un poco cuando el relleno está fuera del contorno (secciones g y h).
Como conclusión se podría afirmar que los resultados de este método combinado de análisis y palabras clave son mejores que los anteriores, pero posee un gran problema, y es que se muestran resultados concretos basados en la categoría de la imagen y no se pueden especificar manualmente.
Figura 2.13:Búsqueda de imágenes similares mediante análisis de estilo en la galería de Microsoft Office.
1
a
1c
1d
1g
1h
1e
1b
1f
2.4. Otros productos
Además de los producto estudiados existen otros menos importantes, de los cuales algunos cancelaron el proyecto, como les ocurrió a Tiltomo8, cambiaron el modelo de mercado de Business-to-Consumer a
Business-to-business, como hizo Gazopa9, o hicieron sus aplicaciones de pago como Pixolution10.
Otros productos optaron por separarse de la competencia para crear un nuevo mercado como por ejemplo Tin Eye11, que realiza búsqueda inversas, es decir, al subir una imagen muestra las direcciones web
en las que se puede encontrar.
Por último, algunas productos son prototipos de servicios que algunas empresas quieren crear en un futuro para que usuarios puedan evaluarlos, como por ejemplo ocurre con la aplicación de búsqueda de imágenes similares de Xerox12, la cual funciona bastante bien pero todavía está en desarrollo, de manera
que los resultados son difíciles de filtrar (pruebas mostradas en la Figura 2.15 de la siguiente página).
2.5. Conclusiones estudio
Para finalizar este estudio de mercado se muestra un cuadro resumen de la valoración de cada uno de los métodos usados para analizar la similaridad entre imágenes, teniendo en cuenta:
■ La facilidad de uso de la herramienta.
■ El tiempo que invierte el desarrollador de la aplicación en preparar convenientemente las imágenes de la base de datos, ya sea clasificando manualmente o asignando palabras clave.
■ El tiempo que emplea el usuario en realizar su búsqueda de imágenes. ■ La calidad de los resultados.
■ La relación calidad/precio de las imágenes.
■ La cantidad y tipos de imágenes que contiene el producto, tanto vectoriales como bitmap.
Para realizar las valoraciones se ha puntuado sobre tres círculos, teniendo en cuenta que cero es muy mal resultado y tres muy bueno en la tabla 1 de la página 17.
Como conclusiones generales de la tabla se podrían sacar las siguientes:
■ El método de búsqueda por estilo es en el que el usuario invierte más tiempo para buscar imágenes de estilo similar, así que se evitará tomar como referencia debido a la importancia de la rapidez de uso buscada.
■ Los mejores resultados de búsqueda similar se obtienen de los productos que emplean los métodos
8 http://www.tiltomo.com/ 9 http://www.gazopa.com/
10 http://www.pixolution.de/index.php?id=19 11 http://www.tineye.com/
1
1
1
2
1
3
1
4
Facilidad de
uso invertido Tiempo
(clasificación)
Tiempo invertido (búsqueda)
Resultados
Calidad-Precio imágenesTipos de
Búsqueda por estilo
Art explosion 800,000 Galería Microsoft Office
Búsqueda por características
Dreamstime Fotolia iStockPhoto OpenClipArt
Búsqueda por análisis
Google Images Pixolution Galería Microsoft Office
de análisis o palabras clave, siempre y cuando estas estén bien definidas.
■ El método de análisis es en el que menos tiempo se emplea en preparar las imágenes para que estén disponibles en las búsquedas.
Nuestra aplicación aprovechará las mejores partes de cada método, creando un programa que analizará computacionalmente las características más importantes evitando tener que asignar palabras clave a cada imagen manualmente y realizando búsquedas con gran eficacia.
Capítulo 3
Análisis de los datos
En este capítulo se realizará una exploración de las características que defi nen un estilo y las categorías semánticas en las que se pueden clasifi car las imágenes para poder entender el problema de la similaridad visual entre imágenes. También se llevará a cabo una selección entre los datos disponibles para generar una solución viable.
3.1. Características que defi nen un estilo
En esta parte del capítulo se estudiarán las características de más bajo nivel que puede tener una imagen vectorial y se seleccionarán las más importantes.
3.1.1. Lista de características
Para crear la lista con las características que se pueden encontrar en una imagen vectorial se consultaron apuntes sobre Diseño Gráfi co y se leyó el libro Los elementos del diseño. Manual de estilo para diseñadores gráfi cos, además de analizar 40.000 imágenes diferentes pertenecientes a la base de datos de Art Explosion 800.000. Fruto de esta exploración se obtuvieron las siguientes características, de las cuales se muestran ejemplos, agrupadas en grupos más generales como contorno (Figura 3.1), forma (Figura 3.2) y color (Figura 3.3).
Contorno
Forma
Figura 3.2:Distintos tipos de forma que se pueden encontrar en las imágenes vectoriales: (a) Simetría, (b) Asimetría, (c) Espacio blanco, (d) Sin espacio blanco, (e) 2D, (f) 3D, (g) Marco.
(a) (b) (c) (d) (e) (f ) (g)
Color
Figura 3.3:Distintas maneras de empleo del color que se pueden encontrar en las imágenes vectoriales: (a) Pocos colores, (b) Muchos colores, (c) Blanco y negro, (d) Textura, (e) Sin degradados, (f) Degradados, (g) Color dentro, (h) Color fuera, (i) Brillos, (j) Sombras.
(a) (b) (c) (d) (e)
(f ) (g) (h) (i) (j)
3.1.2. Análisis de las características
Una vez obtenidas todas las características, se analizó visualmente la relevancia de cada una de estas utilizando diversas composiciones. Para ello se compararon imágenes con la misma característica y sin ella valorando del 1 al 6 la importancia de esta para que la composición resulte más o menos coherente, entendiendo un 1 como característica irrelevante y 6 como característica muy importante a la hora de lograr coherencia visual. Los ejemplos que se han buscado han sido cuidadosamente buscados y retocados para evitar que otras características destaquen más que la que se está estudiando, es por esto que se ha decidido centrar la composición en el mismo tema, con imágenes de parecidos estilos y retocado ligeramente el color y forma:
Línea de contorno y grosor
En este apartado se analiza la importancia de dibujar o no la línea de contorno, la cual está relacionada con el grosor de la línea de contorno y el color de esta, ya que cuanto más fina sea esta y su color resulte más claro y confundible con el fondo, más se integrará la imagen con las que no poseen contorno.
Valoración de la característica: 4
Línea uniforme y variable
En este apartado se analiza cómo influye que el trazo de la imagen sea de grosor uniforme o variable. El grosor de la línea de contorno y las partes que quedan sin contorno son las que dictaminan la importancia de la característica, pudiéndose afirmar que es una característica influyente en la semejanza de estilo. Además, las líneas a mano alzada y las abiertas pueden compararse con las variables, así que se tendrán en cuenta como si todas ellas fuesen variables de aquí en adelante.
Valoración de la característica: 4
Contorno afilado y suave
En esta sección se analiza como influye si el contorno tiene bordes afilados o estos resultan suavizados a la hora de lograr una coherencia visual en la composición. La importancia de esta característica es baja, ya que influye más la complejidad y grosor del trazo.
Valoración de la característica: 1
Pocos trazos y muchos trazos
En esta sección se analiza como influye el número de trazos en la semejanza entre diferentes
Simetría y asimetría
En esta sección se analiza como influye si la forma de las imágenes resulta simétrica o no en la coherencia visual. La importancia de esta característica es nula, pues lo que realmente diferenciaría las imágenes es la perspectiva, como se verá más adelante.
Valoración de la característica: 1
Perspectiva
En esta sección se analiza como influye la perspectiva en el parecido que se puede apreciar entre imágenes. La importancia de esta característica es media, cuando una imagen plana se muestra en el fondo pasa más desapercibida que cuando esta se encuentra por delante de la composición.
Valoración de la característica: 4
Color interior y exterior
En esta sección se analiza como influye si el color de la imagen se encuentra fuera del contorno de esta en la coherencia visual. La importancia de esta característica resulta crucial. Las imágenes con marco y las que contienen espacio blanco se considerarán como imágenes con color por fuera de aquí en adelante.
Valoración de la característica: 6
Muchos colores y pocos
En esta sección se analiza como influye el número de colores en el parecido entre imágenes. Esta característica resulta importante, especialmente cuanto más varía el número de colores presentes en las imágenes.
Blanco y negro y color
En esta sección se analiza como influye si la imagen es en blanco y negro o a color en la coherencia visual de la composición. La importancia de esta característica resulta crucial, aumentando cuantos más colores posean las demás imágenes .
Valoración de la característica: 6
Degradado
En esta sección se analiza como influye si la imagen posee degradados de color o no. Esta característica resulta importante, sobre todo cuanto más destacado sea el degradado y más dura la transición de colores en las imágenes sin degradado.
Valoración de la característica: 4
Sombras
En esta sección se analiza como influye el sombreado que se puede encontrar en algunas imágenes. Esta característica resulta importante, especialmente cuanto más sombreado posea la imagen.
Valoración de la característica: 5
Brillos
En esta sección se analiza como influyen los brillos que se puede encontrar en algunas imágenes. La importancia de esta característica es baja, y a no ser que resulten muy marcados, ni siquiera el que se encuentren en distintas orientaciones en cada elemento de la composición resulta un problema.
Otras características no analizadas
Los bordes redondeados y los duros se han eliminado del análisis debido a que no son una característica muy común en las imágenes y a que la importancia respecto a las demás características es muy reducida. La textura también se ha suprimido del análisis ya que aunque esta resulta una característica importante, no suele encontrarse en muchas imágenes y por lo tanto se podría considerar como un estilo propio.
3.1.3. Lista de características definitivas
Una vez analizadas todas las características mencionadas al principio del capítulo, suprimidas las menos importantes (con una valoración de 2 o menos) y realizado algún conjunto entre características semejantes, la lista resultante agrupando por contorno, color, transición y forma fue:
■ Contorno: Sin contorno, línea gruesa, línea fina, linea irregular/partida.
■ Color: Blanco y negro, monocromático o pocos colores, muchos colores, saturación similar. ■ Transición: Transición suavizada, transición dura.
■ Forma: Aspecto 3D, aspecto plano, forma simple, forma compleja.
3.1.4. Estudio de características con usuarios
Con el fin de valorar de manera sistemática la importancia de cada una de las características seleccionadas en la sección 3.1.3 a la hora de definir el estilo de una imagen se recurrió a lanzar encuestas en Mechanical Turk1, herramienta con la que se pueden subir encuestas a internet, conocidas como HIT
(Tarea de Inteligencia Humana), asignándoles un precio que será el que se pague a los usuarios que las realicen.
Modelo de test
El modelo de test consistía en 45 preguntas, formadas por una combinación de tres imágenes en cada una, de las cuales había que seleccionar entre dos imágenes la que más se parecía a una patrón, tal y como se muestra en los ejemplos de la Figura 3.4. Las tres imágenes de cada pregunta fueron tomadas de manera aleatoria a partir de la muestra de mil imágenes de la sección 3.3, pero controlando que no se repitiesen las mismas imágenes en ninguna de las triadas de cada encuesta. En algunas triadas aleatorias, también se le pedía al usuario que indicase las características que estaba utilizando para relacionar las imágenes. Con este test se pretendía obtener el mayor número de comparaciones entre imágenes para posteriormente poder relacionar características de las imágenes emparejadas con el reconocimiento de la similaridad entre ellas.
Con el fin de aclarar los objetivos del test, antes de iniciarlo se mostraba una explicación mediante un ejemplo obligatorio de realizar formado por tres triadas en el que si el usuario elegía mal se le explicaba en que había fallado y lo que se pretendía que se valorase entre las imágenes.
Para detectar usuarios que no presten atención y descartar sus encuestas se emplearon preguntas de control escondidas en los test, basadas en una combinación de imágenes prefijadas en las que la opción correcta resultaba obvia, como se puede observar en la Figura 3.4. Si un usuario no acertaba al menos
cuatro de las cinco preguntas de control de la encuesta no recibiría los 15 céntimos que se entregaban al finalizarla.
Los resultados de los tests fueron los siguientes: se sometieron 800 HITs, cada uno de los cuales contenía 45 comparaciones distintas del tipo: ¿Qué imagen, A o B, es más parecida en estilo a la imagen de referencia?. Un HIT era dado por válido si el usuario acertaba al menos cuatro de las preguntas cinco preguntas de control distribuidas aleatoriamente. Cada HIT tenía una duración de aproximadamente 10 minutos, por los cuales se pagaban 0.30$ si era considerado válido. Participaron un total de 244 usuarios distintos y se obtuvo un total de 25500 comparaciones distintas.
El objetivo de este experimento era obtener qué características son las más relevantes para definir un estilo. Sin embargo, puesto que un análisis ad-hoc es inviable, los resultados de los test están siendo evaluados con técnicas automáticas de “Machine Learning” (Aprendizaje Automático) por los directores del presente proyecto. Dado el componente técnico de dicho análisis, su estudio queda fuera del alcance de este proyecto.
3.2. Selección de categorías
En esta parte del capítulo se estudiarán las categorías que emplean las bases de datos para clasificar imágenes, y se seleccionarán las más importantes para la lista de categorías que incluirá nuestra aplicación.
Con el fin de enumerar todas las categorías que se pueden encontrar para clasificar imágenes, se estudiaron trabajos previos en el campo, como por ejemplo el artículo sobre categorías: Caltech-256 Object Category Dataset2, en el que se muestran las 256 categorías de objetos más comunes organizadas en
grupos más generales como se muestra en el Apéndice B del Anexo.
Figura 3.4:Triadas usadas en el ejemplo inicial explicativo del tipo: ¿Qué imagen, A o B, es más parecida en estilo a la imagen de referencia?
Una vez analizadas las clasificaciones que realizan, se agruparon las 256 categorías de objetos del primer artículo en grupos más generales y adecuados a nuestros intereses, teniendo en cuenta todas las maneras de clasificar estudiadas, dando como resultado el mapa mental que se muestra en el Apéndice B del Anexo y más resumidamente en la lista que se muestra a continuación:
■ Animales (aire, tierra, agua), Belleza, Oficina, Electrónica, Fantasía, Comida, Juegos, Hogar, Humanos, Insectos, Música, Naturaleza, Deportes, Estructuras, Productos, Herramientas, Transporte, Armas.
3.3. Selección de un subconjunto de datos
En esta parte del capítulo se explican los criterios seguidos a la hora de seleccionar las mil imágenes que usará nuestra aplicación para realizar las pruebas de funcionamiento y para las pruebas con mechanical turk.
Una vez obtenida la listas de características y categorías principales, se seleccionó una muestra de mil imágenes de la base de datos Art Explosion 800.000 y la galería de imágenes de Microsoft Office. Los criterios seguidos a la hora de seleccionarlas fueron:
■ Imágenes que solo contengan un elemento, con el fin de facilitar en análisis y evitar que haya estilos distintos en la misma imagen.
■ Imágenes que contengan todas las características, con un mínimo de unas 20 por característica. ■ Imágenes de todas las categorías seleccionadas.
■ Muestra “aleatoria”, siempre que cumpla con los criterios de arriba mencionados. ■ Formato jpg, con fondo blanco y tamaño de 150x150 pixeles.
La colección de datos final utilizada puede consultarse en la aplicación realizada o en el prototipo que se muestra en la web.
Capítulo 4
Diseño de la aplicación
En este capítulo se explican las funcionalidades de la aplicación y se comenta el diseño final de la interfaz de la aplicación. La explicación del código se muestra junto con el de la página web en el apéndice G del Anexo.
4.1. Propuesta de funcionalidades de la aplicación
En esta primera parte del capítulo se explica el método seguido en la generación de ideas para crear las diversas funcionalidades de nuestra aplicación.
4.1.1. Brainstorming
El método creativo seleccionado para generar funcionalidades para nuestra aplicación fue el brainstorming, puesto que es un método creativo sencillo e individual capaz de conseguir muchos resultados al problema de diversas maneras. Se realizaron tres sesiones en días distintos para aumentar el número de ideas sin resultar agotador, favoreciendo de este modo la creatividad. Durante las sesiones, después de haber definido el problema, se anotaron ideas que resolvieran el problema durante treinta minutos, y posteriormente se realizó la evaluación de ideas y se anotaron las adecuadas.
El problema que se trató durante las sesiones de brainstorming se definió como:
¿Funciones para un programa que analiza estilos de imágenes?
Durante el tiempo destinado a generar ideas se anotaron palabras clave y frases en un papel, sin tener en cuenta ninguna restricción del sector al que iba orientado o viabilidad tecnológica o financiera. Una vez terminado el tiempo se repasaron las palabras y frases anotadas y se apuntaron todas las funcionalidades posibles. Al final de la última sesión se agruparon por temas teniendo en cuenta tres grupos: funcionalidades básicas, avanzadas y generales. Las funcionalidades básicas son las que se
4.1.2. Funcionalidades seleccionadas
Después de valorar las funcionalidades generadas mediante el brainstorming se seleccionaron como las deseadas para nuestra aplicación las siguientes:
■ Detectar inconsistencias en la composición, es decir, encontrar los elementos diferentes a los del estilo principal de la composición para eliminarlos o reemplazarlos por unos más coherentes. ■ Modificar el estilo de la composición, editando los elementos de la composición para cambiar el
estilo principal sin necesidad de sustituir los elementos por otros nuevos, simplemente adaptándolos a las necesidades.
■ Reemplazar estilos, cambiando los elementos de la composición por otros diferentes con distinto estilo.
■ Búsqueda rápida, realizando búsquedas de elementos con un estilo concreto de manera simple, rápida e intuitiva.
■ Lista de características, que permite generar una lista con las características de nivel inferior que tiene un elemento concreto o la composición.
■ Composición real, sustituyendo los elementos de la composición por imágenes reales para crear estilos diferentes.
4.2. Interfaz del prototipo de búsqueda
En esta parte del capítulo se explica el proceso de diseño seguido para la creación de la interfaz de búsqueda de la aplicación.
4.2.1. Objetivos
La aplicación Style it!, para poder mostrar su funcionamiento básico en una página web, tenía que contener tres paneles básicos: uno para mostrar las imágenes de la base de datos, otro que contuviese todas las opciones de búsqueda, y un último para mostrar los resultados de las búsquedas. La navegación debería ser rápida y sencilla para lo cual se intentaron dejar los mínimos elementos posibles, aunque al tratarse de una aplicación experimental con la que el usuario debería poder usar múltiples opciones para hacerse una idea de como funciona, el número de elementos en el panel de las opciones de búsqueda iba a tener que ser elevado.
4.2.2. Evolución formal
Los primeros conceptos de la interfaz fueron pruebas sobre como distribuir los elementos por el espacio disponible, los cuales se muestran en la Figura 4.1.
El primer concepto de interfaz realizado (a) tenía un panel superior con las imágenes de la base de datos por las que se podía navegar a través de páginas con otras imágenes distintas. Al seleccionar una imagen de la base de datos aparecía un borde azul sobre ella. El panel con las opciones de búsqueda iba situado abajo a la izquierda y en él se encontraba un filtro de parecido formado por una lista desplegable, un filtro de categorías también formado por una lista desplegable, una lista con todas las características principales de las imágenes que se podían seleccionar, y el botón de búsqueda. El panel de resultados iba situado abajo a la derecha y mostraba resultados en páginas por las que se podía navegar gracias a unos
botones situados bajo las imágenes.
La segunda interfaz realizada (b) consistía en una simplificación de la anterior, mostrando las imágenes de la base de datos y los resultados de búsqueda sin necesidad de navegar por páginas, simplemente cargando nuevas imágenes al bajar con la rueda del ratón.
4.2.3. Diseño final
Una vez distribuidos los espacios para los paneles y pensado en la forma de colocar los elementos en ellos se realizó el diseño final, al que poco a poco se le fueron añadiendo todas las opciones de búsqueda deseadas. La interfaz definitiva se muestra en la Figura 10.2 y a continuación se explica.
En el panel de la base de datos se incorporó un menú desplegable que aparece al hacer click en el nombre con la flecha de señalización, en el que se permite cambiar la carpeta con las imágenes que trabaja el programa.
En el panel con las opciones de búsqueda, llamado filtros, se incorporó un menú en acordeón con opciones referidas a la búsqueda de imágenes. En el primer menú del acordeón se podían filtrar los resultados de la base de datos mediante la selección de características o categorías, además de permitir el cambio entre búsqueda simple y múltiple, la cual se encarga de dejar seleccionar varias imágenes de referencia para la búsqueda o limitar la selección a una sola. El segundo menú del acordeón contenía opciones de búsqueda avanzada para usuarios experimentados que quisiesen hacerse una idea del funcionamiento de la aplicación más en profundidad. Por último se encontraba el menú fijo con las opciones básicas de la búsqueda, que permitía filtrar las imágenes de los resultados por categorías y similaridad con la imagen de referencia del panel de la base de datos.
En el panel de los resultados de búsqueda se incorporó una ventana desplegable con la opción Figura 10.2:Interfaz definitiva de la aplicación
de exportar los resultados de la búsqueda, mostrar más o menos imágenes en el panel y ordenar por similaridad mayor o menor.
Además, se creó un código capaz de adaptar el tamaño de la aplicación a la ventana desde la que se abría la página, ya que aunque los usuarios que la utilizarían en general tendrían pantallas muy grandes no se quería limitar la aplicación a ellos ni tampoco negarles el espacio del que disponían. También se permitió redimensionar el tamaño de los paneles mediante la línea gruesa que separa el panel de la base de datos con los de debajo.
En el Apéndice D del Anexo se muestran imágenes de mayor resolución y mostrando más detalles de la aplicación.
Capítulo 5
Diseño gráfico
En este capítulo se explican los elementos gráficos empleados para dar a conocer la aplicación y proporcionarle una imagen más amena. Entre ellos se encuentra el logo, un póster de promoción, la página web y un vídeo explicativo de la aplicación.
5.1. Imagen de marca
Este apartado explica el proceso creativo seguido para la creación de la imagen de marca de nuestra aplicación, pasando por la fase de información, generación de conceptos y desarrollo del concepto elegido hasta llegar a la normalización de este.
5.1.1. Fase de información
Nuestra aplicación fue desarrollada en el Graphics and Imaging Lab (GILAB) de la universidad de Zaragoza, cuyo logo se muestra en la Figura 5.1 y es característico por su color azulado, el cual se intentó añadir al logotipo de la aplicación para relacionarlo al GILAB.
Para el diseño del logotipo de la aplicación se tuvo como referencia el logotipo de una de las aplicaciones más conocidas sobre anotación de categorías, LabelMe, el cual está formado por un juego de palabras relacionadas con la aplicación en inglés y usando una estética también relacionada con la función la aplicación (recortar fotos para categorizarlas).
Por último, también se siguieron las pautas sobre las características que todo logo debe cumplir, las cuales son:
Figura 5.1:Imágenes de referencia usadas para crear el logo, pertenecientes al logotipo del GILAB (a), una de las aplicaciones más conocidas sobre clasificación (b) y diseños famosos (c)
■ Simplicidad, diseño sencillo para un fácil reconocimiento de la marca.
■ Recordable, el diseño debe ser fácil de recordar, para lo cual los diseños simples ayudan. ■ Eterno, el logo debe durar en el tiempo.
■ Versátil, el logo debe funcionar en diversos medios y soportes, además de ser adecuado para soportes horizontales y verticales. Se recomienda usar el formato vectorial para estos fines.
■ Apropiado, el logo debe ser adecuado a su entorno.
■ La versión en blanco y negro no debe influir en el impacto del logo.
5.1.2. Nombres para la aplicación
Lo primero en lo que se pensó a la hora de desarrollar el imagotipo fue en nombre, teniendo en cuenta: que este estuviese relacionado con el propósito de la aplicación, idioma inglés, que fuese sencillo de recordar y que sonase agradable y divertido. Los posibles nombres que se obtuvieron fueron: Characterize it, Style it!, style pic, styli-it!, simily, style fit, simply, simi pic, styly clip, same clip, pic me! y style<img>.
Se usaron distintos nombres en los logotipos, usando el que más se adaptaba para cada símbolo, y tras seleccionar el logotipo definitivo y probar distintos nombres se decidió que la aplicación se llamaría Style it!.
5.1.3. Conceptos
Una vez decididos los posibles nombres de la aplicación se diseñaron diversos logos utilizando los nombres que más se adecuaban a cada símbolo. Las tres propuestas que se realizaron y que a continuación se explican pueden consultarse en la Figura 5.2.
La primera propuesta (a) consistía en un diseño de logo formal, simple y agradable que representaba la búsqueda de estilos en la aplicación mediante una lupa en un fondo circular, se seleccionó el color naranja debido a que es un color simple, directo, cercano, y la tipografía era sencilla y sin serifa para reforzar la misma idea que expresa su color.
La segunda propuesta (b) consistía en un diseño más informal que representa un estilo mediante un símbolo y una tipografía formada por trazos irregulares que parecen hechos a mano. El color azul verdoso se empleo ya que es parecido al color del GILAB y así se logra una relación con este, que es el lugar del desarrollo de la aplicación.
La última propuesta (c) consistía en un diseño entre medio de los dos anteriores, jugando con la Figura 5.2: Diferentespropuestas sobre el diseño del logo para la aplicación
mezcla entre la segunda y tercera propuestas, usando el símbolo de la segunda y la tipografía de la tercera. En cuanto al nombre, se probó a utilizar varios de la lista, decidiendo que el que mejor quedaba y más fácil de memorizar resultaría era el de Style it. En la Figura 5.3 se muestra la evolución del logotipo.
5.1.5. Normalización del imagotipo
Una vez seleccionado el imagotipo final, el cual se puede observar en la Figura 5.4, se procedió a la normalización de este para crear el manual de imagen corporativa.
Para la normalización, se describieron los margenes a respetar, tamaños y usos para mantener la legibilidad, selección de Pantones registrados para su impresión y construcción del imagotipo tal y como se puede apreciar en la Figura 5.5.
Figura 5.3: Evolución formal del logotipo de la aplicación, mostrando la propuesta inicial (a), la mezcla de conceptos realizada (b), y la versión final normalizada (c).
(a) (b) (c)
Figura 5.4: Versiones sobre fondo oscuro (a) y sobre fondo oscuro (b) del logo para la aplicación
(a) (b)
Figura 5.5: Ejemplos de normalización del logotipo de la aplicación, en los que se muestra los márgenes de respeto (a), la construcción del símbolo (b), y la construcción del imagotipo (c).
5.1.6. Manual de marca
El manual de marca de Style it!, la aplicación sobre búsqueda similar de imágenes, creado para unificar criterios y normalizar el manejo de la imagen gráfica y corporativa de la marca, con el fin de orientar a los miembros de la empresa, colaboradores y proveedores en la forma de hacer un buen uso de los lemas y signos institucionales, se muestra en el Apéndice E del Anexo.
5.2. Póster promocional
En esta parte del capítulo se explica el proceso de diseño seguido para la creación de un póster promocional de la aplicación.
5.2.1. Objetivos
Como complemento a los vídeos explicativos y página web de la aplicación que en capítulos posteriores se mostrarán, se pensó en la idea de desarrollar un póster que sirviese como elemento decorativo. El tamaño de este se fijó en 420x590 mm, tamaño de impresión estándar para pósteres domésticos.
Se pensó en diversas maneras de mostrar lo que la aplicación era capaz de realizar, clasificar estilos, hasta que se decidió representar varios estilos ya clasificados en diferentes grupos. Así pues, en el póster se mostraron pequeños mundos con imágenes de un mismo estilo sobre ellos, ya que esta idea resultaba una manera amena, agradable y llamativa de representar estilos, que es la imagen que se intenta dar.
5.2.2. Conceptos
Después de decidir la manera de representar la búsqueda de estilos similares de la aplicación en un póster se realizaron tres propuestas de fondos y organización, las cuales se pueden observar en la Figura 5.5 de la siguiente página.
La primera propuesta (a) consistía en un pequeño número de mundos de estilos flotando en medio del espacio.
La segunda propuesta (b) consistía en los planetas formando la inicial del nombre de la aplicación sobre un fondo más claro y mágico.
La última propuesta (c) consistía en los planetas organizados en una elipse proyectando sombras sobre un fondo con un degradado suave gris.
Finalmente se seleccionó el modelo de organización en forma de elipse de la tercera opción junto con el tipo de fondo usado en la segunda opción con algunas modificaciones.
Figura 5.5:Diferentespropuestas sobre el diseño del póster para la aplicación, los pósters a mayor resolución se encuentran en el Apéndice F del Anexo.
(c)
se modificaron los brillos de estos y se les añadió un borde grueso blanco. Por último las sombras que proyectaban sobre el fondo se suprimieron.
El resultado final se muestra en la Figura 5.6.
5.3. Diseño web
En este capítulo se explica el proceso de creación de la web de la aplicación así como se comentan sus secciones y objetivos. La explicación del código se muestra en el apéndice G del Anexo.
5.3.1. Objetivos
teniendo en cuenta las limitaciones de la segunda más utilizada de 1024×768, según estadísticas actuales1.
Las secciones que iba a contener la web eran las siguientes:
■ Página de inicio que mostrase de manera clara en que consiste la aplicación y lo que se puede conseguir con ella.
■ Página de información que explicase las funcionalidades de la aplicación.
■ Página con el prototipo de aplicación definitiva en el que se pueden buscar imágenes seleccionando características y crear composiciones con ellas.
■ Página con contenido extra en la que se encontraban enlaces al póster, aplicación definitiva, encuesta en mechanical turk y vídeo de presentación de Style it.
5.3.2. Evolución formal
La evolución formal que sufrió el diseño de la página web se muestra en la Figura 5.7 y de explica a continuación.
1 http://www.w3counter.com/globalstats.php
Figura 5.7:Evolución formal del diseño de la página web de la aplicación
(e) (a) (b)
El primer diseño de la web (a) era el más simple de todos, formado por una cabecera con el logo de la aplicación y el nombre de las secciones de esta, un slider junto con un texto de bienvenida para la página web en el que se mostraba información sobre la aplicación y los desarrolladores, y un pie de página con el logo del GILAB y páginas de contacto de los creadores de la aplicación.
El segundo diseño (b) incorporaba unos símbolos detrás de los nombres de las secciones de la web para hacer más sencilla su interpretación, además de eliminar el texto en la página de inicio y añadirlo a la primera diapositiva del slider, y suprimir la barra de separación de la cabecera consiguiendo mediante el cambio de color la separación entre cabecera y cuerpo.
El tercer diseño (c) consistió en un modificación de los colores del anterior para destacar la cabecera y el pie de página. Además se incluyó el logo del GILAB en la cabecera de la página.
El diseño final (d) otorgó una mayor importancia a los símbolos de las secciones de la cabecera y modificó el pie de página añadiendo el logo de adobe y modificando la distribución y color de esta, además de cambiar el slider de la página de inicio. Este diseño se explica más detenidamente en el siguiente apartado.
11.3. Diseño final
Las páginas de la web final se muestran en la Figura 5.8 y se explican a continuación.
La cabecera de la página muestra el logo de la aplicación y las secciones por las que se puede navegar representadas por símbolos sencillos y su nombre en pequeño debajo de estos con color blanco para una correcta legibilidad. El color de la cabecera es un degradado del color del logo del GILAB.
El pie de página se muestra al final del contenido de esta o abajo del todo si el contenido entra en el espacio reservado al cuerpo. Es de color blanco y se separa del cuerpo mediante una línea gris con degradado en los extremos. Contiene la información de contacto de los desarrolladores de la aplicación, los logos del GILAB y Adobe e información sobre el copyright.
La página de inicio contiene un slider con planetas de diferentes estilos por el que se puede navegar libremente y al hacer click en uno de ellos se muestra una composición con elementos del estilo del planeta. El fondo es azul con nubes blancas simulando un cielo de fantasía. Justo debajo de la cabecera se muestra un mensaje de bienvenida por el que al pasar por encima muestra una pestaña emergente con más información acerca de la aplicación por un breve periodo de tiempo. Si se presiona el ratón en uno de los planetas del slider se muestra una composición creada con elementos de ese estilo. Estas composiciones, que se muestran en la figura 5.9 de la siguiente página, se hicieron con elementos de la base de datos comprada, modificando en varios casos las imágenes o creando nuevas para mejorar los resultados.
La página de información contiene información acerca de las funcionalidades de la aplicación que se seleccionaron en el apartado 4.1.2 de esta memoria. Junto con la lista e información de cada una de estas se muestran las imágenes de la Figura 5.10 de la página 42 en las que se emula el uso de la funcionalidad sobre una composición de referencia.
La página con el prototipo de la aplicación contiene un cuadro a la izquierda en el que se pueden añadir imágenes, moverlas y redimensionarlas libremente y otro cuadro a la derecha que explica como usar la aplicación y permite añadir y eliminar imágenes. Al hacer click en el botón de añadir imágenes se muestra la interfaz de la aplicación y se pueden realizar búsquedas usando los filtros de características. Al hacer doble click en una imagen de la aplicación se añade automáticamente al cuadro de la izquierda para poder crear una composición con las imágenes buscadas en la aplicación.
La página de media, contiene cuatro imágenes con un texto explicativo en las que al hacer click se puede descargar el contenido que hay en ellas. Los contenidos son: el póster de la aplicación, la aplicación definitiva, la encuesta de mechanical turk y el vídeo explicativo de la aplicación.
En el Apéndice G del Anexo pueden consultarse con más detalle imágenes explicativas de la web.
5.4. Vídeo explicativo
Con el fin de ilustrar el funcionamiento de la aplicación se creó un vídeo en After Effects el que se explicase de manera rápida y sencilla para que servía la aplicación y cuales eran sus ventajas respecto a su competencia.
El vídeo se enfocó de manera similar a la página web, intentando que resultase ameno, para lo cual se recurrió a la tipografía. La tipografía puede obtener un alto nivel compositivo si se utilizan mayúsculas en negrita de diferentes tamaños y puesto que la aplicación esta relacionada con la composición con las imágenes buscadas guarda una relación con esta, así que se consultaron diferentes ejemplos de composición con texto tanto en vídeo como en diseño gráfico hasta que se llegó a la conclusión de usar
(a) (b)
(c) (d)
Figura 5.10:Ejemplos de lasfuncionalidades de la aplicación, mostrando la imagen original (a), detectar inconsistencias (b), modifi car estilo (c), reemplazar estilos (d), búsqueda rápida (e), lista de características (f)
(g)
(a) (b)
(c) (d)
las animaciones de texto.
El guión que se siguió fue el siguiente: ■ Mostrar el problema
■ Presentar algunas aplicaciones que intentan solucionar el problema sin éxito ■ Explicar cómo nuestra aplicación resolvería el problema y mostrar algún ejemplo
Después de haber seleccionado el estilo del vídeo y su guión se procedió al diseño de los elementos del vídeo. Como fondo se utilizó el degradado recomendado en el manual de marca, ya que ayuda a darle fuerza al texto y vincula la aplicación con el GILAB mediante el color. Para el diseño de la interfaz de las aplicaciones se recurrió a un diseño minimalista inspirado en linux y google. Las composiciones con las cuales ilustrar las ventajas de nuestro método de análisis fueron la de blanco y negro, que junto a la tipografía aumentaba más la fuerza de la composición, y la de contorno grueso, que resultaba amena y agradable.
Para realizar el vídeo se consultaron tutoriales y visitaron vídeos similares tanto de animaciones con texto como de fundidos para añadir elementos a una composición. En la Figura 5.11 se muestran fotogramas clave del vídeo.
Figura 5.11:Fotogramas delvídeo explicativo de la aplicación.
Capítulo 6
Conclusiones
En este capítulo se realiza un resumen de las aportaciones de este trabajo al campo del diseño gráfico y se comenta el camino futuro de esta investigación. También se recogen las conclusiones personales del autor. La planificación del proyecto se muestra en el Apéndice I del Anexo.
6.1. Trabajo realizado
Una vez finalizado el proyecto, se puede concluir que se han alcanzado los objetivos establecidos al comienzo de este (ver sección 1.2):
■ Se han analizado las características visuales de las imágenes vectoriales para comprender cuales son las más importantes y las que definen estilos, así como realizado encuestas que valorarán esta importancia para cada característica.
■ Se ha diseñado la aplicación para la búsqueda de imágenes vectoriales mediante el análisis de su estilo visual o artístico, teniendo en cuenta las funcionalidades y la interfaz.
■ Se ha creado la imagen corporativa de la aplicación, el sitio web donde se muestra la aplicación y el prototipo de búsqueda que permite realizar composiciones rápidamente emulando como lo haría la aplicación real.
6.2. Trabajo futuro
Tras la realización de este proyecto se proponen a continuación algunas de las posibles líneas de trabajo futuras:
■ Terminar la interfaz de la aplicación e incorporar las funcionalidades definidas.
■ Crear contenido en las redes sociales para dar a conocer el sistema: twitter, facebook, blog. ■ Ampliar la colección de datos e incorporar imágenes de otras colecciones: microsoft, google,
