BANNERS APLICADOS CROSSMEDIA

Aplicando el ejercicio del crossmedia, aplicaremos nuestros conocimientos de banner para crear uno con nuestra empresa elegida. En este caso serán banner estáticos.

SINTESIS ADITIVA Y SUSTRACTIVA DEL COLOR

Síntesis aditiva de color

Un sistema de color aditivo: implica que se emita luz directamente de una fuente de iluminación de algún tipo. El proceso de reproducción aditiva normalmente utiliza luz roja, verde y azul para producir el resto de colores. Combinando uno de estos colores primarios con otro en proporciones iguales produce los colores aditivos secundarios: cian, magenta y amarillo. Combinando los tres colores primarios de luz con las mismas intensidades, se produce el blanco. Variando la intensidad de cada luz de color finalmente deja ver el espectro completo de estas tres luces.

Las televisiones y los monitores de ordenador son las aplicaciones prácticas más comunes de la síntesis aditiva.

Síntesis sustractiva de color

La síntesis sustractiva explica la teoría de la mezcla de pinturas, tintes, tintas y colorantes naturales para crear colores que absorben ciertas longitudes de onda y reflejan otras. El color que parece que tiene un determinado objeto depende de qué partes del espectro electromagnético son reflejadas por él, o dicho a la inversa, qué partes del espectro no son absorbidas.

Una manzana iluminada por una luz blanca, parece roja. Pero esto no significa que emita luz roja, que sería el caso una síntesis aditiva. Si lo hiciese, seríamos capaces de verla en la oscuridad. En lugar de eso, absorbe algunas de las longitudes de onda que componen la luz blanca, reflejando solo aquellas que el humano ve como rojas. Los humanos ven la manzana roja debido al funcionamiento particular de los ojos y a la interpretación que hace el cerebro de la información que le llega de ellos.

Se necesitan tres cosas para ver un color: una fuente de luz, una muestra y un detector (que puede ser nuestra vista).

La síntesis sustractiva de color se aplica en la impresión a color y la fotografía en color, pero también en las artes plásticas y la pintura decorativa.

ACCESIBILIDAD Y USABILIDAD

"La usabilidad trata sobre el comportamiento humano; reconoce que el humano es emotivo, no está interesado en poner demasiado esfuerzo en algo, y generalmente prefiere las cosas que son fáciles de hacer contra las que son difíciles de hacer." 

David McQuillen

"Taking Usability Offline" Darwin Magazine, Junio 2003

USABILIDAD

Usabilidad es un término adaptado de la palabra en inglés “usability”, para indicar que algo se puede usar; la norma ISO 9241-11 dice que la usabilidad se refiere al alcance en el que un producto puede ser utilizado por usuarios específicos para alcanzar metas específicas con efectividad, eficiencia y satisfacción en un contexto específico de uso. 

Que un producto sea usable implica que:

• Pueda ser utilizado en forma adecuada, eficiente y satisfactoria por la mayoría de los posibles usuarios. 
• Sea tan fácil de aprender a usar que no requiere manuales. 
• Pueda ser utilizado por personas con diferentes habilidades o discapacidades. 
• Cualquier persona, sin importar su edad o cultura, pueda usarlo. 
• Evita que el usuario cometa errores. 

El diseño centrado en el usuario, y la usabilidad debe considerarse durante todo el proceso de diseño, desde la planeación del sitio Web hasta hacer el sistema, producto o servicio disponible al público, e incluso una vez puesto en funcionamiento se debe dar seguimiento para conocer si el sitio Web o sistema cubre los requerimientos de la tarea y de los usuarios al trabajar en la realidad.

ACCESIBILIDAD

Por accesibilidad se entiende la posibilidad de que un producto o servicio Web pueda ser accedido y usado, de forma independiente de las limitaciones propias del individuo o de las derivadas del contexto de uso.

La distinción entre “usabilidad”, que implicaría la facilidad de uso, y “accesibilidad”, no solo es difícil, sino en muchos casos innecesaria; la accesibilidad debe ser entendida como “parte de”, y al mismo tiempo “requisito para” la usabilidad.

Dentro de las limitaciones propias del individuo puede haber deficiencias visuales, auditivas, motrices, cognitivas y de lenguaje, pero también puede tener limitaciones derivadas del contexto de uso y del dispositivo de acceso empleado (hardware y/o software), como puede ser el idioma, la experiencia o conocimientos previos. Por ejemplo, comparten el mismo problema de visualización los usuarios con visión reducida y los que, sin padecer discapacidad visual, utilizan pantallas pequeñas o accedan desde entornos llenos de humo. Recomendaciones:

• Todos los elementos visuales, imágenes o animaciones, deben contar con una descripción de su función. 
• Incluir subtítulos y transcripciones de los sonidos, y descripciones de los videos. 
• Usar texto que tenga sentido cuando se lea fuera de contexto. 
• Aplicar una apropiada organización de la página; usar encabezados, listas y estructura consistente; usar tablas solo para presentar datos tabulares, así como hojas de estilo en cascada donde sea posible. 
• Dar alternativas accesibles a los scripts, applets y plug-ins para los casos en que las características activas sean inaccesibles o no soportadas. 
• Hacer las tablas de manera que se puedan leer línea por línea, y añadir un resumen.

Ejemplo1

http://www.mecd.gob.es/portada-mecd/

Ejemplo2

http://www.once.es/new

BANNER IES

PRACTICA GRAN APUESTA

Una máscara de recorte es un objeto cuya forma enmascara otra ilustración de forma que solo se pueden ver las áreas están dentro de la forma, es decir, la ilustración se recorta con la forma de la máscara. La máscara de recorte y los objetos que se enmascaran se denominan conjunto de recorte. Un conjunto de recorte se puede crear a partir de una selección de dos o más objetos o de todos los objetos de un grupo o una capa.

Los conjuntos de recorte en el nivel de los objetos se combinan como un solo grupo en el panel Capas. Al crear conjuntos de recorte en el nivel de las capas, el primer objeto recorta todos los objetos que se encuentren debajo de él. Todas las operaciones que realice en un conjunto de recorte en el nivel de los objetos, como las transformaciones y los alineamientos, se basan en el límite de la máscara de recorte y no en el límite sin máscara. Una vez que haya creado la máscara de recorte en el nivel de objeto, solo podrá seleccionar el contenido de recorte mediante el panel Capas de la herramienta Selección directa o bien aislando el conjunto de recorte.

     

La nueva herramienta que utilizaremos en esta ocasión no es otra que las herramientas vectoriales, una flecha será nuestra elección para recrear el póster de la película "la gran estafa."

Si deseas dibujar formas personalizadas, usa las formas disponibles en el panel emergente Forma personalizada o bien guarda formas y trazados para emplearlos como formas personalizadas.

1. Selecciona la herramienta Forma personalizada . (Si la herramienta no se encuentra visible, mantenga pulsada la herramienta de rectángulo situada cerca de la parte inferior del cuadro de herramientas).
2. Elije una forma en el panel emergente Forma personalizada de la barra de opciones.Si no encuentras la forma que busca en el panel, haga clic en la flecha situada en la esquina superior derecha del panel y selecciona otra categoría de formas. Cuando Photoshop te pregunte si deseas reemplazar las formas actuales, haz clic en Reemplazar si solo deseas ve las formas de la nueva categoría o en Añadir para añadirlas a las formas ya visualizadas.
3. Arrastra la imagen para que se dibuje la forma.

Colocaremos las fotografías de los actores por encima de cada una de sus flechas para aplicar una máscara de recorte, así daremos el efecto que estas estarán dentro de duchas flechas.

Los trazados proporcionan contornos redondeados que puede convertir en bordes de selección precisos. También puede convertir bordes de selección en trazados, mediante la herramienta Selección directa para un ajuste perfecto.
Puede definir cualquier trazado cerrado como borde de selección. Un trazado cerrado se puede añadir, restar o combinar con la selección actual.

Con esta herramienta podremos deformar la imagen desde los vértices de la misma, para otorgarle el aspecto apropiado para la composición.

Tendremos que solventar una pequeña contratiempo que se nos presenta ya que uno de los personaje, el pelo sale por encima de la flecha. Pero tan sencillo será la solución como hacer una selección de esta parte del cuerpo, con una máscara de capa, y colocarlo por encima de (la capa) Consiguiendo de esta forma el efecto de relieve sobre el resto.

                     

Para finalizar nada más que añadir el texto, asegurándonos que todos los modos de color y resolución son las adecuadas para su impresión.     

PRÁCTICA MÁSCARA DE RECORTE

Una máscara de recorte es un objeto cuya forma enmascara otra ilustración de forma que solo se pueden ver las áreas están dentro de la forma, es decir, la ilustración se recorta con la forma de la máscara.
Los conjuntos de recorte en el nivel de los objetos se combinan como un solo grupo en el panel Capas. Al crear conjuntos de recorte en el nivel de las capas, el primer objeto recorta todos los objetos que se encuentren debajo de él. Todas las operaciones que realice en un conjunto de recorte en el nivel de los objetos, como las transformaciones y los alineamientos, se basan en el límite de la máscara de recorte y no en el límite sin máscara. Una vez que haya creado la máscara de recorte en el nivel de objeto, solo podrá seleccionar el contenido de recorte mediante el panel Capas de la herramienta Selección directa o bien aislando el conjunto de recorte.

A continuación explicaremos paso a paso como usar máscaras de recorte. Empezaremos escribiendo e texto sobre un fondo transparente.

De fondo insertaremos una máscara de relleno de color uniforme, bajo las letras:

                       

Insertaremos la imagen que necesitamos colocandola sobre las letras, botón derecho sobre la miniatura y Crear máscara de recorte.

                                     

PRÁCTICA MADAME BUTTERLFY

Con esta nueva práctica tenemos la oportunidad de utilizar una nueva herramienta que hemos aprendido recientemente, máscaras de capa y máscaras de recorte.

Las veces que sean necesarias para que la sección de las mariposas quede expuesta bajo la nueva capa de relleno.

A continuación recortaremos la imagen de la japonesa que colocaremos en uno de los laterales bajo un color verde y degradado, a continuación bajaremos la opacidad y dejarlo con el resultado deseado. No olvidemos el modo de fusión de la capa en el modo exclusión.

                 

Y finalmente el resultado:

BANNER FIREWORKS

Adobe Fireworks (anteriormente llamado Macromedia Fireworks) es un editor de gráficos vectoriales y mapas de bits. Fireworks proporciona a los diseñadores web una forma ligera y eficaz de crear gráficos para sus páginas web sin tener que profundizar en el código o perderse entre múltiples paletas de colores.
Realizaremos un práctica para la toma de contacto con este nuevo programa, crear un gif muy sencillo con figuras geométricas básica.

Practica

Para empezar crearemos un documento nuevo; los documentos nuevos de Fireworks se guardan como documentos PNG, es el formato de archivo nativo de Fireworks. Las imágenes que se crean en Fireworks pueden exportarse o guardarse en varios formatos Web y formatos gráficos. Independientemente de los parámetros de optimización y exportación elegidos, el archivo PNG original de Fireworks se conserva para facilitar ediciones posteriores.

Con el rectángulo ya sobre la mesa de trabajo, iremos añadiendo diferentes formas para la práctica, las cuales, usaremos herramientas básicas para la toma de contacto. 

Siguiente paso con las Herramientas Vectoriales, dibujaremos sobre nuestro documento un rectángulo el cual estará relleno de un color a nuestra elección.

                             

                           

Active el trazo o el relleno para determinar a qué atributo afectan los ajustes de color. Restablezca los colores de trazo y relleno para aplicar los valores predeterminados especificados en el cuadro de diálogo Preferencias.

• En la sección Colores del panel Herramientas, haga clic en el icono situado a la izquierda del cuadro Color del trazo o Color de relleno.
• Haga clic en el botón Sin color de trazo o relleno en la sección Colores del panel Herramientas. Para establecer la característica inactiva en Ninguno, haga clic otra vez en el botón Sin color de trazo o relleno.

Con el rectángulo ya dibujado y con un relleno de color, es el paso de añadir las diferentes figuras de lo que está compuesto nuestro gif. Añadiremos Estrella y una flecha, todo ello con las herramientas vectoriales.

               

Elegimos la estrella como objeto a dibujar con la opción de cinco lados, que serán las puntas que tenga. A continuación con la Herramienta Escala, buscaremos la forma que más nos convenga para nuestro trabajo.

Crearemos al menos tres más para rellenar nuestro banner, además de usar la Herramienta Puntero para modificar su aspecto original.

                             

A continuación añadiremos una flecha con otra de las herramientas Vector, Línea de flecha.

           

Modificando su aspecto original con la herramienta para que finalmente tenga la siguiente forma:

Para finalizar el diseño, un pequeño texto con la herramienta correspondiente:

                                              

Como colofón asegurarnos que nuestro trabajo queda guardado en el formato adecuado para su posterior exposición y resultado.