El Blog de Clases de Ricardo

1.- El Software de Diseño de Imagenes 15 septiembre, 2010

1.1 Diseño

Diseño de imágenes para una comunicación efectiva

Introducción

El uso de los iconos en las interfaces gráficas y en la web debería tener un objetivo muy concreto: ayudar a comunicar visualmente una función del sistema. Si colocamos imágenes con el único objetivo de decorar, estaremos introduciendo ruido que puede hacer más confusa nuestra web o programa.

Exponemos unos principios básicos para mejorar la capacidad comunicativa de las imágenes que utilicemos, reforzando la facilidad de uso de nuestra web o programa.

Características de una imagen para lograr una comunicación efectiva

Enumeramos las características principales que debe tener una imagen para mejorar su capacidad para comunicar.

Inmediatez

El objetivo es capturar rápidamente la atención y que la impresión que cause sea perdurable. Para esto, las imágenes deben ser claras, simples y equilibradas.

Las marcas comerciales buscan esta inmediatez y perdurabilidad con sus logotipos.

Forma y contornos simples, sin adornos innecesarios para lograr una imagen que se asimila sin esfuerzo.

Generalidad

Es la capacidad para representar una clase de objetos o una característica de estos, más que un objeto concreto.

Quitando detalles particulares podemos ir abstrayendo y creando una imagen más general. Si utilizamos una reproducción fiel de un objeto familiar se da la impresión de que el icono se refiere al objeto en sí, no a una clase de objetos o una función de esos objetos.

Representación de la función “calcular” en programa hipotético. El proceso de abstración hace más sencillo comprender la función del icono.

Cohesión

Cuando las imágenes aparecen juntas, situación muy común en las interfaces gráficas, deben guardar unha coherencia entre ellas con una relación visual muy clara.

El tipo de trazos, colores y tamaño ayudan a darle cohesión.

Botones de navegación del Explorer. El ligero relieve de las cuatro primeras imágenes contrasta con la pronunciada perspectiva de la quinta imagen. Los trazos de los tres primeros símbolos (flechas y cruz) son rectos mientras que en el cuarto son curvos.

Botones de navegación del Safari. Todo los botones mantienen una unidad estética.

Caracterización

Los objetos y su estado deben ser reconocibles. Un punto de vista adecuado y la exageración de rasgos característicos de un objeto ayudan a identificarlo.

Visto desde arriba un avión es más sencillo de identificar.

La exageración en la separación de las piernas y brazos hace más clara la actividad a la que se refiere esta imagen.

Tipos de imágenes

Un gran porcentaje de una interfaz gráfica es un sistema de señales. Codifican en imágenes funciones del sistema.

Las señales las podemos dividir en tres tipos, según la semiótica

  • Iconos: describen el significado mediante una caracterización del propio significado. Es decir, siempre describen objetos tangibles.
  • Índices: representación del significado por asociación de conceptos relacionados (por ejemplo, una imagen de humo para indicar fuego).
  • Símbolo: representan un significado por pura convención.

Nota: debido a que la mayoría de las imágenes en una interfaz gráfica son del primer tipo (iconos), estas son conocidas popularmente por iconos, aunque formalmente puedan ser índices o símbolos.

Cada tipo de señal es adecuado para distintas situaciones.

¡¡Importante!! no mezclar en un mismo grupo de imágenes iconos, índices y símbolos. Los procesos mentales para interpretarlos son muy distintos y si aparecen juntos pueden crear confusión.

Técnicas para hacer imágenes efectivas

Lo primero que hay que hacer es pensar si es adecuado utilizar una imagen. Si así es, después determina qué tipo de señal hay que utilizar: icono, índice o símbolo.

  • Si no quieres representar un concepto abstracto: icono o índice.
  • Si la imagen va a ser utilizada constantemente y de un modo coherente, podemos decantarnos por un símbolo.
  • Si lo que queremos codificar es un concepto abstracto, lo mejor es recurrir al texto.

Si queremos utilizar un icono o índice:

  1. Escoge una representación fiel desde el punto de vista más representativo.
  2. Determina el nivel de abstración preciso. La práctica te irá diciendo hasta dónde puedes llegar en este proceso.
  3. Comenzar a quitar detalles innecesarios, experimentando continuamente con diferentes combinacions de los elementos que mejor identifiquen el objeto que se quiere representar.
  4. Simplifica las formas empleando figuras geométricas.
  5. Elimina contornos que no sean precisos. Juega con el espacio en blanco.
  6. Si la imagen va a ser utilizada junto a otras, necesitas que tengan coherencia unas con otras: colores predominantes, tipo de trazos, tamaño, etc.

Este no es un proceso cerrado. El primer boceto probablemente sirva como punto de partida para una idea mejor. Y así sucesivamente hasta obtener el resultado deseado.

Comentarios finales

El diseño de imágenes para interfaces gráficas no es cuestión de habilidades artísticas, si no de la capacidad de plasmar un concepto en una imagen que hable por si sola. El objetivo es ayudar en la comunicación para hacer programas y webs más sencillas de utilizar.

Esto no quiere decir que la estética y la capacidad comunicativa sean incompatibles.

Una buena forma de seguir ampliando conocimientos es leyendo las guías de estilo para la creación de iconos de las grandes compañías de informática.

1.2 ANIMACIÓN

La animación informáticapor computadorapor ordenador es la técnica de crear imágenes en movimiento mediante el uso de ordenadores ocomputadoras. Cada vez más los gráficos creados son en 3D, aunque los gráficos en 2D todavía se siguen usando ampliamente para conexiones lentas y aplicaciones en tiempo real que necesitan renderizar rápido. Algunas veces el objetivo de la animación es la computación en sí misma, otras puede ser otro medio, como una película. Los diseños son elaborados con la ayuda de programas de diseño, modelado y por último renderizado.

Para crear la ilusión del movimiento, una imagen se muestra en pantalla sustituyéndose rápidamente por una nueva imagen en un fotograma diferente. Esta técnica es idéntica a la manera en que se logra la ilusión de movimiento en las películas y en la televisión.

Para las animaciones 3D, los objetos se modelan en la computadora (modelado) y las figuras 3D se unen con un esqueleto virtual (huesos). Para crear una cara en 3D se modela el cuerpo, ojos, boca, etc. del personaje y posteriormente se animan con controladores de animación. Finalmente, se renderiza la animación.

En la mayor parte de los métodos de animación por ordenador, un animador crea una representación simplificada de la anatomía de un personaje, pues tiene menos dificultad para ser animada. En personajes bípedos o cuadrúpedos, muchas partes del esqueleto del personaje corresponden a los huesos reales. La animación con huesos también se utiliza para animar otras muchas cosas, tales como expresiones faciales, un coche u otro objeto que se quiera dotar de movimiento.

En contraste, otro tipo de animación más realista sería la captura del movimiento, que requiere que un actor vista un traje especial provisto de sensores, siendo sus movimientos capturados por una computadora y posteriormente incorporados en el personaje.

Para animaciones 3D, los fotogramas deben ser renderizados después de que el modelo es completado. Para animaciones vectoriales 2D, el proceso de renderizado es clave para el resultado. Para grabaciones grabadas anticipadamente, los fotogramas son convertidos a un formato diferente o a un medio como una película o video digital. Los fotogramas pueden ser renderizados en tiempo real, mientras estos son presentados al usuario final. Las animaciones para transmitir via Internet en anchos de banda limitados (ejem. 2D Flash, X3D) utilizan programas en el ordenador del usuario para renderizar en tiempo real la animación como una alternativa para la transmisión y para animaciones pre-cargadas para enlaces de alta velocidad.

Para complementar el tema descarga el siguiente archivo —>Animación

Anuncios