HTML5 Maker

Hola a todos hoy, de nuevo os traigo una práctica nueva de Ensamblado de Publicaciones Electrónicas sobre HTML5 Maker y Bannersnack.

¿Qué es HTML5 Maker?

HTML5 Maker es una herramienta en línea que nos permite crear banners dinámicos en el lenguaje informático html5 a partir de plantillas que nos presenta la página Web o desde cero.

¿Como se hace un banner en HTML5 Maker?

Se nos presentan muchas opciones para poder personalizar nuestro banner y a partir de estas haremos nuestro banner dinámico.

1. Primero debemos registrarnos en la página y confirmar nuestro correo electrónico.
   
2. Despues elegiremos el tamaño del banner que  queremos crear y accedemos a la ventana de edición.
   
3. En la ventana de edición podremos personalizar y ajustar el banner como deseemos, podemos agregar texto, imágenes, animaciones, hipervínculos...etc.
   
   
   
   
   
   
   
4. Al terminar de editar el banner hacemos click en "SAVE AND CLOSE" en la esquina superior derecha y tendremos nuestro banner dinámico listo para ser publicado.
   

Aquí dejare un banner dinámico del blog de una compañera de clase:

Banners Black Mirror

Hola a todos, hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre los Banners Black Mirror. Esta es una práctica que consistía recrear .gifs mostrados por la profesora a partir de imágenes iniciales.

Proceso que he seguido para realizar esta práctica:

1. Lo primero fue insertar la imagen inicial en Photoshop.
   
2. Luego realice los retoques necesarios en la imagen inicial y he creado las capas necesarias para el .gif.
   
3. Al tener todo listo en el Photoshop he montado las capas y imágenes para realizar el .gif con cuadros.
   
4. Finalmente he exportado los .gifs.

 

Gifs con Cuadros en Photoshop

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre Gifs en Photoshop con cuadros.

Ya hemos visto como hacer gifs con Gifmaker, pero ahora mostrare como se pueden hacer en Photoshop.

Proceso para crear Gifs con cuadros en Photoshop:

1. Como antes, lo primero es conseguir las imágenes que vamos a utilizar para la creación del gif. En mi caso es solo una imagen.
   
2. Luego de tener las imágenes listas para hacer el gif, metemos todas en el orden correspondiente en Photoshop.
   
3. Ya tenemos todos listo para crear el Gif, ahora hay que animarlo. Abrimos la ventana de "Línea de tiempo" en Photoshop y se nos abrirá una pequeña ventana en la parte inferior de la pantalla.
   
4. Ahora empezamos le damos a crear "animación de cuadros" y montamos las capas de en su orden correspondiente en la línea de tiempo. En la línea de tiempo nos dan varias opciones para poder personalizar la velocidad a la que  se reproducirá cada fotograma o cuantas veces se debe repetir el gif, modificar estas opciones queda a nuestro criterio. Para usar esta ventana debemos seleccionar la capa con la que crearemos un cuadro, esta capa debe estar visible para poder crear el cuadro correctamente y tenemos que hacer esto en orden en todas las capas hasta tener todas las capas en la línea de tiempo.
   
5. Al terminar, exportamos el gif en la siguiente ventana.
   
6. Finalmente tendremos nuestro gif.
   
   
   
   

Banner Gifmaker

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre como crear banners dinámicos con Gifmaker.

El proceso:

1. Primero debemos crear las imágenes que vamos a utilizar, esto lo podemos hacer en un programa como Adobe Photoshop, esto tendremos que hacerlo en un orden fluido y organizado.
   
2. Luego de tener las imágenes listas tendremos que abrir gifmaker.me y subir las imágenes que hemos creado en Adobe Photoshop. Ahí tendremos varias opciones para hacer .gifs pero solo vamos a usar el primero "Create Gif Animation".
   
3. Finalmente, tenemos que guardar el .gif y tendremos el banner dinámico listo para usar.
   

Aquí dejare el banner que hice en clase: