Aunque la versión de este Software ya está en la Nro. 7, es posible acceder a tutoriales en su versión anterior.
AyatoWeb.com (en inglés)
After effects Tutorial (7.0) (en inglés)
Ejercicio básico (en Inglés)
martes, agosto 22
Metáforas visuales
Las metáforas visuales:
Con textos del artículo Semiótica y Retórica Visual Aplicada al diseño de Interfases: La Metáfora como elemento de Navegación. http://nolimit-studio.com/tesis/
Con textos del artículo Semiótica y Retórica Visual Aplicada al diseño de Interfases: La Metáfora como elemento de Navegación. http://nolimit-studio.com/tesis/
Interrogantes (http://nolimit-studio.com/tesis/)
- ¿De qué manera podemos diseñar elementos gráficos para una interfaz que al usuario le resulten familiares e intuitivos?
- ¿Qué conceptos del diseño de objetos y señalizaciones reales pueden ser transportadas a un sistema de señalización virtual?
- ¿Comó reducir la ambigüedad en la interpretación de los signos gráficos?
Hipótesis
- Una interface confusa hace que el usuario pierda interés en utilizarla, de tener varias opciones elegirá aquella que le resulte más clara y sencilla de usar. Si por el contrario la interfaz está diseñada no sólo para ser fácil de usar sino además para guiar al usuario de forma amigable esto se traducirá en una mejora de comunicación entre el producto y el usuario.
- El uso de metáforas visuales ayudará al usuario a comprender mejor el funcionamiento de las interfaces ya que hará una conexión mental entre los objetos físicos que ya está acostumbrado a usar.
- Una interface gráfica tiene como función servir de mediador entre las aplicaciones y las personas que las usan, nunca deben tener un rol protágonico que opaque la importancia mayor del contenido.
Definición de Metáforas visuales
- Una metáfora es una figura del lenguaje donde se realiza una comparación entre dos objetos que no tienene ninguna relación aparente .
Un ejemplo concocido es la frase “El tiempo es oro” donde se transfieren las características de la palabra “oro” (valioso, escaso, preciado) a la palabra “tiempo” para dar a entender su valor.
Originalmente metáfora es una palabra griega que significaba transferír . Su etimología viene de meta que significa “cambio” y pherein que significa “llevar o trasladar”. Asi, la palabra Metáfora tiene a su vez un significado metáforico: “llevar o transferir un significado de una cosa a otra”
Las metaforas visuales funcionan de una manera similar, se sustituye un mensaje complejo mediante una imágen más simple pero evocatíva que le transfiere a éste su significado. Por ejemplo cuando una empresa que produce jugos de frutas enlatados le pone a su producto una marca con un pictográma representando a un árbol está pretendiendo sustituír en la mente del receptor las características del producto (enlatado, industrializado, producido en serie etc.) por las del árbol (naturaleza,frescura,saludable).
Uso de metáforas visuales en interfaces gráficas de usuario
La necesidad de interfaces más intuitívas
Una de las cosas que resultan obvias cuando uno hace una prueba de usabilidad — ya sea que esté uno probando sitios web, software o electrodomésticos— es la gran cantidad de gente que usa las cosas sin saber en realidad como funcionan o con ideas completamente erroneas acera de su funcionamiento.
Muy poca gente se toma el tiempo de leer instrucciones.
En su lugar el usuario avanza, experimenta, haciendo historias, vagamente plausibles acerca de qué qué hace y por qué funciona.
Para el usuario no es relevante saber como funcionan las cosas, en tanto que pueda usarla.
No es un problema de inteligencia sino de falta de interés.
Si logran hacer que algo funcione, no importa que tan mal lo haga, no buscarán otra manera de hacerlo.
Si los usuarios entienden, hay entonces una mejor oportunidad de que encuentren lo que buscan y cumplán sus objetivos, lo que es bueno tanto para el usuario como para el proveedor del servicio. Ademas, el usuario se sentirá mas inteligente y en control cuando use nuestro sitio, lo que garantizará su regreso.
¿Por qué usar metáforas visuales en Interfaces Gráficas de Usuario?
Para poder interactuar efectivamente con una aplicación es importante para los usuarios obtener un modelo cognitivo apropiado y relacionado a esa aplicación (.
Una manera simple de presentarle al usuario una funcion abstracta dentro de la funcionalidad de una aplicación es estableciendo una comparación entre esa funcionalidad y un objeto tangible del mundo real con el que estè familiarizado. Esto se logra mediante el uso de metáforas.Las metáforas contenidas en la interfaz de usuario final de un aplicación son herramientas poderosas para el desarollo de modelos cognitivos y conceptuales.
La clave de estos lenguajes era representar visualmente solo la cantidad necesaria para sugerir el objeto en cuestión. Lo que significa que mucha de la responsabilidad de completar los detalles faltantes reside en el lector, aunque este esfuerzo de descifrado se vuelve innecesario con el tiempo al acostumbrarse éste a saltar (mentalmente) de la imágen a la idea .
En este contexto, una metáfora es el uso deuna idea u objeto en lugar de otro para sugerir una similitud.
- Una metáfora visual es un ideográma que representa visualmente esa idea
abstracta. La importancia de las metáforas reside en su habilidad para iniciar
una transferencia cognitiva entre un dominio del conocimiento familiar hacia
otro menos familiar.
Los íconos, ideogramas, ilustraciones y demás componentes gráficos que componen una interfaz de usuario deben tener una temática específica, por ejemplo, en los cortos de película que están publicados en el Blog, es claro que las metáforas visuales corresponden a una determinada temática.
Errores comunes en uso de metáforas visuales.
- Si los pictogramas o las metáforas requieren, para ser comprendidas la inclusión de un texto monosémico e inequívoco, hay que pensar si es preferible utilizar sólo la palabra en lugar de una metáfora ambigua y dotarle mejor de condiciones optimas de legibilidad .
- Otro error común es la falta de consistencia en el diseño de las metáforas a través de todo el sistema íconico, puesto que se toman metáforas existentes de diveras fuentes que no siguen una misma línea estética en su diseño. Esto genera confusión y falta de identidad.
Recomendaciones para diseñar sistemas de metáforas para una interfaz.
Cuando una metáfora es usada en varias aplicaciones, implementelas en la manera estándar. Es bueno tener conjuntos de íconos probados y examinados que se relacionen con determinadas metáforas partículaes listos para ser adaptados y reutilizados.
Use una metafora en toda su extensión. Una implementación incompleta puede llevarnos a confusión, frustración y el desarrollo de estructuras pobremente formadas.
Esto es claro sobre todo al usar sistemas metafóricos complejos como en el caso del escritorio, un elemento perteneciente a otro campo semántico — como una sartén, por ejemplo— creará confusión en cuanto a su uso y le restará seriedad a la aplicación.
Evite metáforas similares cuando uses multiples metáforas. Obviamente, metáforas similares están propensas a provocar confusión en situaciones donde se producen íconos que podrían ser igualmente aplicables a una u otra metáfora.
No use referencias alusivas a un lenguaje específico. Esto es especialmente importante al diseñar aplicaciones con alcance internacional como puede ser un sitio web. Por ejemplo, en inglés se utiliza la palabra home (casa) para designar a la página principal de un sitio, pero en otros idiomas se utiliza otra palabra para describirlas, en español por ejemplo, decímos portada, índice o simpelmente página principal.
Diseño de información - Definición del producto
Tareas críticas:
- Público
Seleccionar el público objetivo al que va dirigido el mensaje. Tener en cuenta si es para niños, adultos, ¿saben leer?, etc. Son consideraciones que aunque parecen innecesarias al final tienen que ver con el resultado de nuestro producto.
- Distribución
Es la manera como se distribuirá el mensaje. Esto es, por CD, DVD, VHS, Internet, dispositivos móviles, etc. Dependiendo de esta decisión, se tomará en cuenta la tecnología y software necesarios, así como el equipo humano que debe participar en el proyecto. - Software
Las CURVAS DE APRENDIZAJE deben ser tenidas en cuenta ya que se tomar decisiones erradas al interponer en proyectos, la utilización de software para el cual no se es experto o sobre el que se tienen espectativas diferentes al verdadero alcance del software. - Contenido
Se deben tener ideas varias e irlas consignando en apuntes para documentar el proyecto, bocetos visuales, ideas escritas sobre contenidos, metáforas, ilustración, etc.
Una vez recogidas las ideas principales, se recomienda pasar a definir el proyecto y NO a la confección propia de la pieza multimedial, ya que suelen haber muchos cambios y esto hace inoperante, y extenuante el trabajo en el proyecto.
Tener en cuenta por ejemplo, la realización de storyboards, guiones, antes del diseño. O lo que equivale a plantear el proyecto como tal en un documento escrito, tal como se describe en Propuesta de un proyecto Multimedia - Planificar el proyecto
La planificación tiene que ver con fechas de entrega de cada uan de las partes del proyecto, la realización de guiones, storys y demás material gráfico y textual de refrencia para ayudar al cliente a comprender el trabajo que se le entregará así como al equipo de trabajo, en lo que se deberá desarrollar de acuerdo al plan de fechas. - Organizar el Contenido
Definir los objetivos del producto, nos ayuda seleccionar los demás items del desarrollo del trabajo: Video, animación, ilustración, programas, ¿QUé será la mejor opción para comunicar mi proyecto?. - Diagrama de flujo del contenido
Los Diagramas de Flujo nos ayudan a entender cómo se va a organizar la información del proyecto, que se enlaza con qué, que contenidos van a tener las secciones . Nos dan una visual de como organizar ETIQUETAS de botones, que nombres deben tener, y la profundidad de los CLICKS en un producto interactivo, que generalmente no debe ser más de 2.
Ayudarían a decidir, por ejemplo el uso de pestañas, navegación cruzada, lineal, horizontal, vertical (temas que estudiaremos más adelante).
jueves, agosto 10
Composición con Tipografia
Al crear la composición, se ha insrtado un SOLIDO desde el menú LAYER/NEW SOLID. Se debe tener en cuenta que la tecla MAYUSCULAs del computador bloquea la visual del área de trabajo, representada por un REBORDE rojo en dicha ventana.
Efecto de texto en un sólido
Los efectos de TEXTO quedan ubicados en la capa, al hacer doble click o pulsar la tecla F3, se abre la ventana correspondiente al panel de control del efecto. Para visualizar el EFECTO en la linea de tiempo, en el nombre de la CAPA, se pulsa sobre el pequeño triángulo al lado de dicho nombre.
Panel de control de efectos
Desde dicho panel, abierto con F3, o una vez colocado el efecto desde el menú EFECT, es posible insertar un FOTOGRAMA CLAVE (KEYFRAME), el cual está representado por un ICONO de forma redonda a manera de un CRONOMETRO, que al ser pulsado, inserta el KEYFRAME. La marca que contiene un número corresponde a la posición X, Y, del objeto en la ventana de composición.
En la ventana de TIME CONTROL (menú VIEW) aparece al final un ICONO de avance con tres lineas anteriores. Sirve para RENDERIZAR en memoria RAM una previsualización del trabajo. La previsualización se marca con una linea de color verde en el TIMELINE, también se acciona con la tecla "0" (cero).
Agrupar capas para crear una PRECOMPOSICION
En la imagen vemos que se han agrupado dos capas, seleccionándolas al tiempo, y aplicándoles la acción PRECOMPOSE del menú layer. Esto, para quienes manejan Flash, equivale en cierta forma a crear un MovieClip, que pasa a ser para el lenguaje de After Effects, una COMPOSICION. Para editar las capas precompuestas se escoje la pestaña en la linea de tiempo o se hace doble click en el nombre respectiovo de la ventana de archivos del proyecto.
Enmascarar una capa con otra.
En este caso, le asignamos a la capa del texto la función BLENDING MODE/STENCIL ALPHA, con ello la capa que está abajo, quedará inmersa dentro del texto.
Aplicar un efecto
Desde el menú EFFECT, se pueden asignar diferentes efectos a la linea de tiempo. En la ventana del panel de control del efecto, tener en cuenta los KEYFRAMES, la posición en los ejes X, Y. Esta ventana puede contener varios efectos.Para el ejemplo se asigno un DIRECTIONAL BLUR, en diferentes fotogramas pra dar la sensación de movimiento.
Asignar Tridimensionalidad en AE.
Aunque After Efects no es un programa de 3D propiamente dicho, si puede simular la tridimensionalidad. A las Capas que queremos sean TRIDIMENSIONALES, les asignamos la propiedad desde el menu LAYER/3D LAYER. Fíjense en la representación de un CUBO en el TIMELINE al lado derecho del nombre de la capa.
Una Capa 3D puede ser visualizada desde varios puntos de vista . TOP, LEFT, RIGHT, FRONT, BOTTOM, CUSTOM VIEW1,2 Y 3.
Una capa 3D puede tener propiedades de aceptar SOMBRAS (SHADOWS) si se activan desde la spropiedades de la capa (triángulo pequeño al lado izquierdo del nombre de la capa).
Vista auxiliar
Al desplegar el menú en la parte derecha de la ventana de composición, podemos ver las vistas de las que se habló anteriormente. Con ello podremos desplazar de manera fácil los objetos en sus ejes X, Y y Z.
Asignar Luces las capas 3D
Desde el menu LAYER/NEW/LIGTH, seleccionamos primero una luz AMBIENT, a un 80% de su intensidad. Seguidamente, iniciamos una nueva LUZ tipo SPOT desde dicho menú también.
Esta LUZ (SPOT) es la encargada de generar las sombras sobre los objetos a donde se dirija.
En la ilustración vemos que para que las sombras se visualicen, debemos haber ACTIVADO las opciones CAST SHADOWS (aceptar sombras) , en cada una de las capas: LUZ SPOT, la capa de la transparencia y el fondo. y TODAS las capas deben ser 3D LAYER.
Posición de las capas en la Línea de tiempo
es muy común olvidar colocar la CABEZA DE LECTURA de la LT en la posición inicial, por ejemplo, 0:00:00. Para modificar, se deben correr con el mouse a la posición deseada.
Suscribirse a:
Entradas (Atom)