Repositorio Institucional de Documentos

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 Diego Gutierrez Escuela de Ingeniería y Arquitectura 2013 Repositorio de la Universidad de Zaragoza – Zaguan http://zaguan.unizar.es Tomo 1/2 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 ....................................... 4 2.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.1.1 Lista de características .......................................... 19 3.1.2 Análisis de las características ...................................... 20 3.1.3 Lista de características definitivas.................................. 24 3.1.4 Estudio de características con usuarios ............................... 24 3.2 Selección de categorías ............................................ 25 I 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 1 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. Figura1: Diferentes composiciones con la misma semántica: un perro, un árbol, flores y el sol, pero con estilos totalmente diferentes. 2 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. 3 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. 4 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... 5 ■ 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 Figura 2.2: Ejemplos de los estilos que se pueden encontrar en la base de datos Art Explosion 800,000. 12 2.3.2. Pixolution7 Pixolution (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 7 http://demo.pixolution.de/ 13 1 1 a 1 c b d 1 e 1 g f 1 i h 1 k j 1 m l 1 o n Figura 2.12: Resultados de búsqueda de Pixolution tomando como referencia las correspondientes imágenes de la Figura 2.8. 14 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. (a) Portada (b) Patrón Característica (c) Resultados para patrón 15 Figura 2.14: Resultados de búsqueda en Microsoft Offi ce, seleccionando imágenes de la propia galería. Las imágenes patrón se muestran en la columna aparte a la izquierda. 1 a 1 c 1 d 1 g 1 h 1 e 1 b 1 f 16 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/ 12 https://imagesearch.services.open.xerox.com/ 17 Figura 2.15: Resultados de búsqueda en Xerox, seleccionando imágenes de la propia galería. Las imágenes patrón se muestran como primer resultado de búsqueda (arriba a la izquierda). 1 1 1 2 1 3 1 4 1 5 18 Facilidad de uso Tiempo invertido (clasificación) Tiempo invertido (búsqueda) Resultados CalidadPrecio Tipos de imágenes 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. Tabla 1: Comparación de los productos de búsqueda de imágenes. 19 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 g r á fi c o s , 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 Figura 3.1: Distintos tipos de contorno que se pueden encontrar en las imágenes vectoriales: (a) Con línea de contorno, (b) Sin línea de contorno, (c) Línea gruesa, (d) Línea fi na, (e) Línea de color, (f) Línea uniforme, (g) Línea variable, (h) Línea a mano alzada, (i) Contorno afi lado, (j) Contorno suave, (k) Pocos trazos, (l) Muchos trazos, (m) Contorno cerrado, (n) Contorno abierto, (o) Bordes redondeados, (p) Bordes duros. (a) (b) (c) (d) (e) (f) (g) (h) (i) (j) (k) (l) (m) (n) (o) (p) 20 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: 21 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 imágenes. La importancia de esta característica es muy elevada, diferenciándose a simple vista unas imágenes de otras . Valoración de la característica: 5 28 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 29 Figura 4.1: Evolución formal sobre la organización de los elementos de la aplicación (b) (a) 30 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 31 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. 32 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) (a) (b) (c) 33 ■ 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 idea de la cámara de fotos como representativa de la imagen (pic, por style pic), usando los mismos colores verde-azulados del logo del GILAB. La tipografía utilizada es una mezcla entre las dos anteriores, resultando seria y legible e incorpora rayas como de un trazado. 5.1.4. Evolución del concepto Después de valorar los conceptos iniciales sobre el imagotipo de la aplicación se decidió crear una Figura 5.2: Diferentes propuestas sobre el diseño del logo para la aplicación (a) (b) (c) 34 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). (a) (b) (c) 35 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. 5.2.3. Evolución del concepto Después de juntar la composición en forma de elipse con el fondo de fantasía se observó que no daba muy buen resultado por lo que se creó un nuevo fondo a base de destellos que salían del interior manteniendo los mismos colores. Además, para mejorar la visibilidad de los elementos de los planetas 36 Figura 5.5: Diferentes propuestas 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) (a) (b) 37 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 La web de Style it! tiene como objetivo principal dar a conocer al mayor rango de gente posible la aplicación, mostrando lo que es capaz de hacer, lo sencilla que es de utilizar, permitiendo interactuar con su interfaz y albergando contenido extra sobre Style it!. El estilo visual del sitio web pretendía resultar llamativo sin llegar a ser excesivamente recargado y sobre todo reflejar calidad. La web iba a ser visualizada en pantallas de diversas resoluciones así que su diseño se adaptó para que funcionase correctamente en las resoluciones más utilizadas actualmente, Figura 5.6: Diseño final del póster para la aplicación 44 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, 45 6.3. Conclusiones personales El trabajo realizado en este proyecto ha sido gratificante para mi, ya que además de estar dirigido para una de las empresas más importantes de diseño gráfico, me ha servido para conocer otros métodos de trabajo diferentes a los estudiados en clase que se pueden aplicar al amplio campo del diseño. Realizar algunas partes del código del que se empleó para la web resultó lo más agobiante del proyecto, ya que al no partir del nivel de conocimiento de programación necesario para realizar algunas tareas complejas, tenía que invertir más tiempo y dedicación que el que emplearía un informático. Además ver que poco a poco van surgiendo nuevos problemas en el mismo código llegaba a resultar frustrante, pero finalmente, la felicidad de resolver esos problemas compensaba todas las horas invertidas. Personalmente, puedo afirmar que trabajar junto con Elena y Diego, así como el resto de los miembros del GILAB, ha sido una agradable experiencia en mi vida,ya que es admirable el gran interés que muestran por su trabajo y los amplios conocimientos que poseen no solo en el campo de la informática gráfica.