HTML5-MAKER y GIFMAKER.

¡Buenas! En esta entrada vamos a hablar un poquito sobre algunas webs para realizar GIFs y Banners, y sobre el HTML5.

Primero os voy a comentar un poco sobre GIFMAKER.ME.

Esta web como se ve, es muy sencilla. Simplemente tendríamos que darle a ''Subir Imágenes''. Se nos pedirá que seleccionemos las imágenes que queramos para crear nuestro GIF. A la derecha podemos ver la previsualización de cómo será nuestro GIF, así como algunas opciones que nos permiten cambiar el tamaño, el número de repeticiones, el tamaño del lienzo y añadirle música con un enlace de Youtube. Una vez configurado esto al gusto, le daremos a ''Crear animación GIF''. Se ampliarán unas opciones justo debajo, como queremos descargarlo, seleccionamos ''Descargar el GIF''.

Y tendriamos ya este GIF descargado y listo para publicar donde queramos. Como por ejemplo... este blog.

¿A que ha sido sencilla de usar esta web? Tardo yo más en desarrollar esta entrada que cualquiera en crear un GIF con ella. Bueno, ¿y si probamos otra un poco diferente? Vámonos a BannerSnack.

Esta página nos permitirá crear algo con un poco más de personalización. Necesitaremos registrarnos, ¡pero no te preocupes! Es totaaaalmente gratuito hacerlo. Lo único malo es que no podremos utilizar todos los recursos de esta web, tendremos acceso limitado a algunas acciones y cosillas de esas, algo parecido a la Demo de un videojuego o a la de muchos programas de pago. 

Bueno, prosigamos. Una vez teniendo nuestra cuenta creada, le daremos a crear un banner, y seleccionaremos una de las dos opciones que nos ofrecen. En este caso elegiré una pancarta normalilla. Y del tipo Rascacielos Ancho. 

Tenemos aquí el lienzo de nuestro Banner, sobre el cuál trabajaremos. Las capas del Banner a la derecha, y las diapositivas también. A la izquierda tenemos toooodas las opciones para crear nuestro banner. Tenemos muchísimas cosas para empezar nuestro diseño desde cero. Pero debemos tener cuidado, hay algunas cosas marcadas con un símbolo naranja. Esto significa que debes pagar para poder usarlas... es lo malo, ¡pero es lo que hay! 

Con los elementos gratuitos que me ofrecen, he realizado este banner. Lo he guardado y dinamizado de manera que ha quedado así >> PrePublicacionesElectrónicas << He de decir que a la hora de descargarlo, nos permite hacerlo en HTML5 pero sólo si pagamos. Por lo que no puedo traer este ejemplo subido.
En mi caso he subido el código HTML, que nos lo da la página.

¡Y eso es todo por hoy, nos veremos en la próxima entrada!

Banners Estáticos y Dinámicos

¡Buenas! Hoy voy a mostraros un par de Banners, en su forma dinámica y estática. Los he realizado con nuestro siempre amigo Adobe Photoshop y la Línea de Tiempo a Cuadros.
Si tienes dudas sobre esto último mencionado, he publicado hace nada una entrada explicando esta herramienta de Photoshop.
Lo dejo por aquí -->> Banner Animado Explicación <<-- Así podéis echarle un vistazo si os interesa saber cómo realizar este tipo de Banners.

Los banners que voy a mostrar son muy sencillos, de echo son mini montajes de Photoshop, que no he tardado mucho en hacer.

Primero os enseño su versión estática (JPEG) y luego la dinámica (GIF).

Estático

Dinámico

Este Banner ha sido un poco más complejo que el próximo, por algunos efectos que contiene. Pero no ha supuesto ningún tipo de problema y por supuesto se ha realizado igual que en el ejemplo de la entrada anterior. Mismo procedimiento a pesar de tener muchos más elementos.

Estático

Dinámico

La realización de este ha sido muy sencilla. Un contorno, simples formas rellenadas de un color y un pequeño efecto de capa en uno de sus elementos. 

También realicé este otro pequeño Banner para el insti.

Y eso es todo por hoy, nos vemos en otra entrada. ¡Chaito!

Banner Animado Explicación

Buenas, en esta entrada voy a realizar una explicación sobre cómo funciona un gif animado. Nos ayudaremos de Photoshop para explicar esto. En mi caso usaré la silueta de una bailarina. Sería mejor que tuvierais una imagen vectorizada, ya que estas imágenes no pierden calidad al aumentarlas.

Cabe destacar que photoshop reconoce estas imágenes, y te lo indica de esta manera.

Ese símbolo significa que es un objeto inteligente. Photoshop reconoce que es un vector, esto se puede ''transformar'' a una imágen de mapa de bits: haciendo Clik Derecho o Cmd + Click en dicha capa con el objeto inteligente y seleccionando la opción Rasterizar Capa. Al hacer esto, la imagen si se agranda, irá perdiendo calidad, por lo que es preferible usar vectores.

Bueno, una vez explicado este detallito, vamos con lo que es la bailarina y cómo animarla.

LÍNEA DE TIEMPO

Antes de nada, necesitamos la Línea de Tiempo de Photoshop. Probablemente esté ya sacada en vuestro Photoshop, pero si no está, vamos a Ventana > Línea de Tiempo, y os saldrá.

En esta línea tenemos distintas opciones. Las cuáles iré explicando para qué sirven.

· Convertir en Animación de Cuadros/Línea de Tiempo de Vídeo. Esta primera opción lo que hace, es cambiar el aspecto de nuestra línea de tiempo. Ya que tenemos dos formas de animar nuestra bailarina. La que muestro, es la Animación en Cuadros. Asi que hoy explicaré esta línea de tiempo.

· Repeticiones. Donde pone ''Una vez'', es el número de veces que nuestra animación se repetirá. Podemos cambiarlo a un número que queramos, o también para que no acabe nunca, y sea una animación infinita.

· Opciones de Reproducción. Son las típicas opciones para reproducir lo que estamos haciendo. Tenemos la vuelta al principio, retroceder un cuadro, el play, y avanzar un cuadro.

· Intercalar. Esto lo que hace es reducir el tiempo necesario para crear efectos de animación. Se usa para añadir o modificar automáticamente una serie de cuadros entre dos ya existentes, variando las propiedades de las capas.

· Añadir Cuadro. Hace digno su nombre. Añade un cuadro. Aunque también sirve para duplicar varios cuadros seleccionados.

· Eliminar. Permite eliminar el cuadro o los cuadros eliminados.

Estas son las principales herramientas de la Línea de Tiempo con Cuadros. Sabemos qué hacen, pero debemos saber usarlas. Así que ahora sí, vamos a explicar cómo hacer girar a esta bailarina.

ANIMAR (cuadros)

La animación que vamos a realizar va a tener muy pocos cuadros, por lo que no se verá fluida. Para que sea fluida, necesitaríamos muchísimos cuadros.

Teniendo ya las capas y la línea de tiempo, seleccionamos la capa del objeto que queremos animar, y le haremos click a la opción de Añadir Cuadro. Tenemos el primer Cuadro (podríamos llamarlo fotograma también).

A continuación deberemos duplicar nuestra capa actual. ¿Y por qué debemos hacer esto? Fácil. Debemos editar a la bailarina, para que parezca que esté girando. Pero necesitamos a la primera bailarina de todos los cuadros. También necesitamos a la segunda, a la tercera, a la cuarta.... Photoshop lo que hará será ir haciendo los cuadros con las capas que se estén viendo. 

· Si realizamos el GIF con únicamente una capa, la animación simplemente será esa capa, aunque hayamos hecho los cuadros editando a la bailarina en cada uno. Es decir, será un cuadro igual en los - por ejemplo - 15 que hayamos hecho. Y no, no estará animado ni un pelín.

Duplicamos a la bailarina, y a esta nueva copia, la modificamos, estrechándola, para que parezca que va girando. Es importante tener la bailarina de la capa inferior oculta. Y creamos otro cuadro.

De este modo, hacemos varias bailarinas, estrechándolas cada vez más hasta llegado un punto en que deberemos volterla horizontalmente, y en vez de estrecharla, ensancharla hasta volver a la postura original. Os dejo una serie de capturas de cómo he ido modificando mi bailarina. Recordad siempre ir duplicando la bailarina actual, y ocultar las demás a la hora de crear el cuadro.

Una vez tenemos hecho hasta aquí, podemos darle al Play de la Línea de Tiempo para visualizarlo. He de decir que yo he cambiado la duración de cada cuadro de 1 segundo a 0,2 segundos.

Ya tendríamos la animación por cuadros creada. Para exportarla, nos dirigimos a Archivo > Exportar... > Guardar para la Web. Saldrá una ventana.

quí podemos toquetear algunas cositas, como el tamaño de nuestro GIF, sus transparencias (en este caso no tiene), y cuántos colores tendrá. También podemos previsualizar cómo se vería nGuardar...''y se nos guardará en formato GIF.
nuestro GIF en la web. Al previsualizar, veremos los datos de nuestra bailarina así como si código HTML, el cuál nos puede servir para, por ejemplo, subirlo a Blogger. Sólo nos quedaría darle a ''Guardar... Sólo imágenes''
Y ya tendríamos nuestro GIF. Así que con esta entrada, me despido, nos veremos en otra entrada próxima.

¡Un saludito :P!

Banners y sus Tipos

Buenas, en esta entrada voy a hablaros sobre los banners.

¿Qué son los banners?

Son una pieza publicitaria dentro de una página web. Su objetivo es atraer tráfico hacia la web del anunciante que paga por incluirlo. Pueden contener imágenes, textos, animaciones, vídeos, audio, formularios.... Y pueden ser estáticos - en formato JPEG o PNG - o animados - con animaciones, formato GIF, java, flash -.

Banner Estático

Sin animaciones, pueden tener un breve texto con enlace a la web y pueden tener un logo.

Banner Animado o Dinámico

Tienen algún tipo de animación, ya sea corta o larga, efectos de texto e imagen que lo hacen más interesantes, enlace a la web, y pueden tener: logo, texto simple, eslogan, idea de venta, texto publicitario e imagen.

Rotativos

Son los que aparecen de forma inesperada, en el momento de abrir una nueva página o ventana emergente, ya sea por un enlace, al entrar o salir de una web. Este tipo de banner no esta siempre visible en la web publicitada, sino que aparecerá en la web con cierta frecuencia, la cual se ajustara en función de la importancia que queramos darle a nuestro banner. Es decir, podríamos ajustarlo para que el banner saltase cada 10 visitas a la web o en determinadas horas.

Ubicación de los Banners

Hay zonas en las pantallas de los dispositivos que lo usuarios visualizan más que otras.

Suelen posicionarse en la parte superior de la página, ya que es la zona con mayor legibilidad o lectura. La presencia del usuario en la web se va reduciendo conforme van bajando. Son pocos los usuarios que llegan hasta el final de la página.

Formatos de Banners

-Robapáginas 

-Leaderboard

-Rascacielos

-Integrados

-Expandibles

-Flotantes

-Rising Stars

Robapáginas. Rectangular vertical que está muy bien integrado en las páginas, y colocado estratégicamente, de forma que el usuario no se siente molestado por la publicidad. Se suele ubicar al lado del contenido de un artículo. Es muy efectivo.

Leaderboard. Banner vertical que suele estar situado en la parte superior de la página.

Rascacielos. Rectangular vertical que se coloca normalmente a la derecha de la web.

Integrados. 

Expandibles.

Flotantes.

Estan los Intersititial y los Layer

Rising Stars.

Y esos son los tipos de banners que hay, en entradas próximas realizaremos alguno. 

Nos vemos en la próxima entrada. ¡Un saludito! :)