Cinemagraph

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones electrónicas sobre los Cinemagraph.

¿Qué es un Cinemagraph?

Las cinemagraphs nacen de la combinación de la fotografía con el vídeo. Su nombre proviene precisamente de su definición: cinema-(photo)graph, acuñado por los fotógrafos estadounidenses Kevin Burg y Jamie Beck, quienes empezaron a utilizar esta técnica en el 2011 para dar vida a sus fotografías de moda.

Cinemagraphs que hicimos en clase:

Proceso para la creación de un Cinemagraph:

1. Lo inicial es tener el video que vamos a tratar listo para su edición.
   
2. Como segundo paso vamos a duplicar la capa del video dentro de Adobe Photoshop y esta segunda capa "copia" la vamos a rasterizar para que pase a ser un fondo fijo dentro del archivo de video.
   
3. Después de tener el fondo preparado, vamos a enmascarar la capa de video con nuestra zona de interés dentro del video.
   
4. Finalmente vamos a "Interpretar el video" para exportarlo a nuestro formato deseado.
   
   
   
   

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:

Banners

Hola a todos hoy os traigo una nueva práctica de Ensamblado de Publicaciones Electrónicas sobre los banners.

¿Qué son los banners?

Un banner es una forma de publicidad en Internet que consiste en incluir una pieza publicitaria gráfica dentro de una página web. Su objetivo fundamental es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión. Hay distintos formatos de archivo que se usan en los banners.

Los banners estáticos normalmente suelen estar en .jpg o .png y los banners dinámicos suelen estar en .gif, .swf y tambien java script.

Ejemplos de banners estáticos:

1 - www.gabriela-h.com:

Dimensiones(px) y resolución:735 x 1200 y 72ppp
Formato y peso del archivo: .jpg y 152 KB
Modo de color: RGB
2 - www.elmundo.es:

Dimensiones(px) y resolución:300 × 600 y 72ppp
Formato y peso del archivo: .png y 205 KB
Modo de color: RGB
3 - www.elmundo.es:

Dimensiones(px) y resolución:970 × 250 y 72ppp
Formato y peso del archivo: .jpg y 74 KB
Modo de color: RGB
4 - www.larazon.es:

Dimensiones(px) y resolución:120 × 600 y 72ppp
Formato y peso del archivo: .jpg y 25 KB
Modo de color: RGB
5 - www.abc.es:

Dimensiones(px) y resolución:300 × 250 y 72ppp
Formato y peso del archivo: .jpg y 41 KB
Modo de color: RGB
6 - www.elmundo.es:

Dimensiones(px) y resolución:728 × 90 y 72ppp
Formato y peso del archivo: .jpg y 90 KB
Modo de color: RGB

Ejemplos de banners dinámicos:

7 - www.g2a.com:

Dimensiones(px) y resolución:1170 × 297 y 72ppp
Formato y peso del archivo: .gif y 508 KB
Modo de color: RGB
Número de fotogramas: 30
8 - www.abc.es:

Dimensiones(px) y resolución:970 × 250 y 72ppp
Formato y peso del archivo: .gif y 156 KB
Modo de color: RGB
Número de fotogramas: 5
9 - www.abc.es:

Dimensiones(px) y resolución:970 × 250 y 72ppp
Formato y peso del archivo: .gif y 266 KB
Modo de color: RGB
Número de fotogramas: 150
10 - www.elmundo.es:

Dimensiones(px) y resolución:728 × 90 y 72ppp
Formato y peso del archivo: .gif y 70 KB
Modo de color: RGB
Número de fotogramas: 2
11 - www.abc.es:

Dimensiones(px) y resolución:300 × 100 y 72ppp
Formato y peso del archivo: .gif y 37 KB
Modo de color: RGB
Número de fotogramas: 18
12 - www.elconfidencial.com:

Dimensiones(px) y resolución:141 × 280 y 72ppp
Formato y peso del archivo: .gif y 41 KB
Modo de color: RGB
Número de fotogramas: 4