BANNERS FIREWORKS

BANNERS ESTÁTICO FIREWORKS 

CON LA MARCA DE CROSSMEDIA

A continuación crearemos dos tipos de baneers estáticos utilizando las herramientas ya aprendidas de Adobe Fireworks 

 LEADEBOARD   

Una vez creado con las medidas adecuadas crearemos el banner estatifico con la mrca de crossmedia utilizando herramientas vectoriales ,texto usando un tipo de fondo al cual le hemos cambiado las tonalidades

De igual manera para el siguiente banner lo hemos hecho poniedole formas vectoriales como estrellas y cmbiando los fondos y tonalidades 

SCYCRAPPER

ADOBE FIREWORKS 

¿QUE ES FIREWORKS ?

Adobe Fireworks , antes conocido como Macro media Fireworks , es un software editor de mapas de bits y gráficos vectoriales que actualmente integra la Adobe Creative Suit Fireworks  en la actualidad es conocido y utilizado por su excelente optimización como editor de gráficos orientado al diseño y ,maquetación de sitios web , con herramientas y funciones para obtener resultados obtimizados para la pantalla y diversos dispositivos. Adobe Fireworks ofrece imágenes de mapa de bits y vectoriales , bocetos , gráficos en 3D y contenido interactivo para las tablets y los smarphones más conocidos del mercado .

A continuación mostraremos un sencillo ejercicio mostrando como se utiliza las herramientas de FIREWORKS

1. Para crear un documento nuevo en Fireworks podemos utilizar varias opciones , desde la barra de menus la caja de herramientas o los comandos abreviados .

2. Una vez abierto el documento en Fireworks podemos ver y modificar en cualquier momento su formato desde el inspector de propiedades

Este panel nos servirá para cambiar el color de fondo , cambiar el tamaño del lienzo del documento , cambiar el tamaño del documento o cambiar el tamaño del lienzo del objeto seleccionado .

3. Con las herramientas vectoriales de fireworks podemos dibujar sobre el documento formas como círculos estrellas rectángulos ,óvalos o cualquier poligono.  

4. Crearemos sobre nuestro documento la forma de una estrella a la cual le ajustaremos el tamaño utilizando las herramientas de transformación en este caso la herramienta escala y también  cambiaremos el color , así crearemos cuatro estrellas  masa sobre el lienzo

5. Así mismo usando las formas ahora crearemos la forma de una flecha a la cual mediante los puntos de control le ajustaremos los parámetros automáticos de la forma que son la agudeza de la punta, la longitud y anchura de la cola y la longitud de la punta. 

6. Una vez obtenido la forma deseada crearemos el logotipo añadiéndole texto y cambiando el tipo de letra deseado  

7 Por ultimo guardarnos el documento seleccionado ARCHIVO < GUARDAR  en formato de archivo de Fireworks es el formato PNG  lo guardaremos en este formato para cuando lo queramos abrir otra vez le podremos modificar  a nuestro gusto. 

FINAL 

USABILIDAD Y ACCESIBILIDAD

¿QUE ES LA ACCESIBILIDAD WEB?

 La accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web.
La necesidad de que la Web sea universal y accesible por cualquier persona está presente desde el principio de la Web, ya que era un requisito contemplado en su diseño por su creador Tim Berners-Lee:

---

El poder de la Web está en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial.
Tim Berners-Lee, Director del W3C e inventor de la World Wide Web

En la actualidad, no existe una definición formal y totalmente aceptada del concepto de accesibilidad web. En este sitio web puedes encontrar varias definiciones que existen. También puedes leer una pequeña introducción donde se explica que la Web ofrece oportunidades sin precedentes a las personas con discapacidad, pero si no se lleva cuidado, la falta de accesibilidad creará graves barreras que impedirán su uso.
Además, también existen una serie de mitos  sobre la accesibilidad web que perduran desde hace años. Estos mitos se pueden resumir en que la accesibilidad web es cara y supone un coste extra en el desarrollo de un sitio web, sin que los beneficios sean importantes. Además, otro de los mitos que perdura es creer que la accesibilidad web sólo beneficia a las personas con discapacidad. Los beneficiarios de la accesibilidad web son todo el mundo.

• 
• 

¿QUE E LA USABILIDAD WEB?

La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema. Esto se mide a través del estudio de la relación que se produce entre las herramientas (entendidas en un Sitio Web el conjunto integrado por el sistema de navegación, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.

Otra definición es la que entrega el académico Yusef Hassan (Universidad de Granada) al indicar que "la usabilidad es la disciplina que estudia la forma de diseñar Sitios Web para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible" y agregar que "la mejor forma de crear un Sitio Web usable es realizando un diseño centrado en el usuario, diseñando para y por el usuario, en contraposición a lo que podra ser un diseño centrado en la tecnología o uno centrado en la creatividad u originalidad".

EJEMPO DE PAGINAS WEB CON ACCECIBILIDAD

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

PRACTICA MASCARAS DE RECORTE USANDO FORMAS VECTORIALES

THE BIG SHORT 

En esta practica realizaremos un cartel para una película en la cual tendremos que utilizar mascaras de recorte pero tambien añadiremos una nueva herramienta llamada formas vectoriales

 
1. Para empezar seleccionaremos la herramienta personalizada que en este caso sera la forma de la flecha y la aplicaremos sobre el documento en la cual tendremos que colocar las imágenes de los protagonistas e la película

 

2. Crearemos cuatro flechas en el documento una arriba abajo a la izquierda y otra a la derecha a als cuales les daremos un trazado de colores y tamaños  luego colocaremos las imágenes  y le daremos aplicar mascaras de recorte para que las imágenes queden adaptadas en las flechas  

3. En una de las imágenes tendremos que aplicar una mascara de capa ya que la cabeza de unos de los actores sobresale a la flecha aplicada retocaremos  la parte del pelo y crearemos una mascara de capa la cual la pondremos encima de la capa ya si quedara x fuera de la flecha

4. Por ultimo pondremos el texto THE BIG SHORT  y lo ajustaremos para obtener el resultado final y lo llevaremos a indesing creando un nuevo documento para imprimirlo

                                                                       FINAL 

PRACTICA CON MASCARAS DE RECORTE

MASCARAS DE RECORTE 

Las máscaras de recorte permiten usar el contenido de una capa para enmascarar las que hay por encima .La creación de la máscara está condicionada por el contenido de la capa inferior o capa base . El contenido no trasparente de la capa base recorta (muestra) el contenido de las capas superiores en la máscara de recorte .El resto del contenido de las capas recortadas se enmascara .




A continuación realizaremos una practica utilizando  mascaras de recorte BALLENA
utilizando las siguientes imágenes

  

1. para empezar trabajaremos sobre la imagen de la ballena donde pondremos primero el texto y para ello ocultaremos la capa de la ballena

2. Al texto le pondremos un tipo de letra algún tipo de fusion y tendremos que RAZTERIZARLO para que se convierta en imagen para ello ires a capa + razterizar+ texto

3. Luego de tener listo el texto realizaremos la mascara de recorte , para ello primero crearemos una mascara de relleno para así poder utilizar la imagen de la ballena la cual colocaremos sobre las capas de texto y de relleno y aplicaremos la mascara de recorte para ello iremos a CAPA + CREAR MASCARA DE RECORTE Y  así obtener el resultado final

4.  Por ultimo colocaremos la imagen de la brújula sobre las capas anterior y tambien le aplicaremos un recorte peo ademas tendremos que bajarle la opacidad para que no destaque tanto sobre la imagen y así tendríamos el resultado final.

                                                                        FINAL

PRACTICA MADAME BUTERFLY

POSTAL CMYK PARA ARTE MADAME BUTERFLY

En esta practica de madame buterfly usaremos mascaras de capas, degradados, opacidades modos de fusión y sobre todo mascaras de relleno , partiendo de las siguientes imágenes .

 

1. Realizaremos un trabajo para arte y lo montaremos en pothoshop creando un documento nuevo con unas medidad de 13 x 17 cm y a una resolución de 262ppp

2. Colocamos la imagen de las mariposas sobre el documento el cual tendremos que quitarle el fondo para que nos quede solo las mariposas eso lo ahremos con la barita mágica ,cuando ya tengamos las mariposas solo haremos una capa de relleno con un degradado adecuado y bajandole la opacidad para que nos quede como el resultado que nos piden

3. Por otra parte ahora colocaremos la imagen de la japonesa en la cual también trabajaremos con algún tipo de fusión el mas adecuado para que quede bien también le crearemos una mascara  de capa en la cual le daremos tambien el degradado adecuado

4. Por ultimo le añadiremos el texto al que tambien le daremos un modo de fusión y lo llevaremos a indesing donde lo exportaremos como PDF para poderlo imprimir con cruzes de corte y sangrado

INDESING

 
                                                                          FINAL 












                                                                 

BANNER INSTITUTO

BANNER DINÁMICO I.E.S PUERTA BONITA 

A continuación hemos realizado un banner para el IES Puerta Bonita siguiendo los mismos pasos con los que hemos hecho los demás banners anteriores

Montando primero el diseño con imágenes y textos y creando capas hemos realizado el montaje del banner donde hemos puesto los diferentes módulos y ciclos formativos que hay en el instituto

Y una vez terminado lo haremos animado con la linea del tiempo  donde vallan apareciendo las imágenes una tras otra y asi obtener el resultado final

FINAL

BANNERS CON POTHOSHOP

REALIZACIÓN DE BANNSERS ESTATICOS Y DINÁMICOS CON POTHOSHOP 

A continuación realizaremos dos tipos de banners uno estatico y otro dinámico usando pothoshop 

BANNER ESTATICO POP UNDER DIA MUNDIAL SIN TABACO 

1. Para realizar este banner primero haremos el montaje en pothoshop utilizando capas y textos , macaras de capa y degradados para así una vez terminado podamos dinamizar de modo que vallan apareciendo uno detrás de otro 

2. Una vez realizado el montaje así es como quedaría y ya lo tendríamos listo para dinamizarlo 

BANNER ESTÁTICO

3. Para empezar a crear el banner dinámico lo que haremos es irnos  a menu ventana y elegir LINEA DEL TIEMPO que es la que se encargara de dinamizar nuestro banner 

4. Lo siguiente sera ir ocultando y descubriendo  capas y abriendo una nueva  ventana de linea del tiempo para que valla apareciendo una tras otra por ultimo le daremos un tiempo y elegiremos las veces que queramos que se repita .

5 . Para finalizar lo guardaremos y para ello tendremos que ir a guardar archivo para la web y elegiremos un formato adecuado para guardarlo en este caso en formato GIFF

BANNER DINÁMICO






BANNER ESTÁTICO Y DINÁMICO LARGE RECTAGLE
TRIODOS BANK

El siguiente banner de triodos bank es muy similar al anterior ya que tan bien lo hemos montado en pothoshop y a continuación lo hemos dinamizado siguiendo los mismos pasos

ESTÁTICO 

Una vez montado  el estático haremos los mismos pasos anteriores para dinamizar el banner y lo guardaremos igual en formato giff

DINÁMICO

TIPOS DE BANNERS

TIPOS DE BANNERS 

 

BANNERS INTEGRADOS

¿Qué es un banner?

Un banner es básicamente una “imagen” con unos tamaños predeterminados que se introduce en las páginas web con el objetivo de que los navegantes que hagan “click” en esa imagen sean redirigidos a otra página web con el objetivo de conseguir el mayor número de visitas posibles.

Entre los Banners que existen podemos encontarr los Estaticos y Dinamicos

 BANNERS ESTÁTICOS:

 Son aquellos banners que tienen una posición fija en la página y que no cambian de tamaño ni de posición bajo ningún concepto. A continuación mostraremos 6 tipos de Banners estáticos 

1

Tipo de Banner : Estático
Dimensiones y resolución : 300 x 250 , 72ppp
Formato y peso:  jpeg , 219,7 kb
Modo de color : RGB



2

Dimensiones y resolución : 300 x 250 , 72ppp
Formato y peso : gif , 73,2 kb
Modo de color : Color indexado








3

Dimensión y Resolución: 728 x 90 , 72ppp
Formato y peso: jpg ,  192,0 kb
Modo de color :RGB







4

Dimensiones y  Resolución: 728 x 90,   72ppp
Formato y peso : jpg ,  192,0 kb
Modo de color: RGB











5

Dimensiones y Resolución:  300 x 250 ,   72ppp
Formato y peso : jpg ,  219,7 kb
Modo de color: RGB






6

Dimensiones y resolución:300 x 250 ,  72ppp
Formato y Peso: jpg ,  219,7 kb
Modo de color: RGB

BANNERS DINÁMICOS: 

Los banners dinámicos son aquellos que tienen una pequeña interacción y movimiento y están divididos por numero de fotogramas

1

Dimensiones y resolución: 300 x 100 , 72 ppp
Formato y peso : GIF , 87,9 kb
Modo de color :  RGB
Número y duración de fotogramas: 13 ftgrms , 3 sg x
fotograma









2

Dimensiones y resolución: 300 x 100 ,  72ppp
Formato y peso .GIF, 87,9 kb
Modo de color :RGB
Número y duración de fotogramas: 4 fotgms  , 1 y 2 duran 2 sg y 3 y 4 , 4  sg




3

Dimensiones y resolución: 300 x 100,  72 ppp
Formato y peso :GIF,  87,9kb
Modo de color :RGB
Número y duración de fotogramas: 3 ftgrms , 2 sg cada uno















4

Dimensiones y resolución: 300 X 250 , 72 ppp
Formato y peso: GIF , 219.7 kb
Modo de color: RGB
Número y duración de fotogramas: 4 ftgrms , 2 sg cada uno



5

Dimensiones y resolución: 300 x 250 , 72 ppp
Formato y peso:GIF , 219,7 kb
Modo de color: RGB
Número y duración de fotogramas: 2 ftgrms , 4sg cada uno










6

Dimensiones y resolución: 300x 250 , 72 ppp
Formato y peso: GIF , 219,7 kb
Modo de color: RGB
Número y duración de fotogramas: 33 ftrgrms , 5 sg cada uno