Linea de tiempo en Photoshop

Podemos crear videos desde photoshop mediante la linea de tiempo, para ello necesitamos las imágenes que vamos a usar.

Este es el menú principal que nos aparece, en el podemos modificar cuanto durará nuestro video y es donde crearemos la magia,



Si desplegamos el menú de "Capa" nos aparecen 3 opciones:

1. Posición: con esta opción crearemos movimiento, primero posicionamos la barra roja en la linea de tiempo donde queremos que haya movimiento, después movemos nuestra imagen o elemento y le damos a "Posición".
2. Opacidad: su forma de uso es igual que la anterior, solo que en este caso iremos modificando la opacidad de nuestra imagen o elemento.
3. Estilo: nos permite modificar el color, textura, estilo....

Podemos usar estas opciones por separado o a la vez, depende del efecto que queramos darle a nuestro video.

Estos son unos ejemplos que he realizado, espero que os guste. 

HTML5 Maker

¿Qué es HTML5?

Es un lenguaje informático, usado para estructurar y presentar el contenido para la web.

¿Cómo crear banners con HTML5 Maker?

1º Debemos hacernos una cuenta, después elegiremos el tamaño del banner.

2º Podremos poner imágenes nuestras o usar las que nos viene en el banco de imágenes de la aplicación, también elegiremos el formato del texto y lo más importante, cuantos fotogramas tendrá nuestro banner.

3º Una vez creado, lo publicaremos y en empotrar copiaremos el código HTML5 para así poder incluirlo en nuestro blog.

He creado un banner para publicitar el blog de una compañera, espero que os guste.

También he creado uno usando Bannersnack, la cual me parece más sencilla de manejar y al igual que HTML5 Maker utiliza el lenguaje HTML5.

Banners Black Mirror

Buenas, en esta entrada voy a presentaros algunos banners que he realizado sobre la serie Black Mirror.

Charles Ray "Cuatro Moldes"

¿Quién es Charles Ray?

Es un escultor estadounidense conocido por sus extrañas y enigmáticas esculturas que ponen en juicio las percepciones del espectador y considerado uno de los escultores más influyentes del panorama artístico actual. 

Su estilo y el tema de sus obras son muy variables, pero la naturaleza seductora y sorprendente de sus obras ha echo que tenga una gran audiencia.

Actualmente, el Museo Reina Sofía presenta en el Palacio de Cristal, del Parque del Retiro, la exposición "Cuatro Moldes" la cual reúne una selección de esculturas de gran tamaño. 

La exposición estará disponible hasta el 8 de septiembre de 2019. ¿Vais a perdérosla? 

Creación de Banners con Photoshop

1º Crearemos varias capas, cada una de ella con una imagen de nuestro banner. Como queremos darle movimiento, tendremos que ir modificando la posición y la forma poco a poco. Ej:



2º Pulsamos la pestaña Ventana>Linea de tiempo y se nos abrirá un nuevo menú. Le damos a "Crear animación de cuadros" y vamos creando un cuadro por cada capa.



3º Abajo, nos permite modificar cuanto queremos que darte nuestro cuadro en pasar al siguiente, si queremos que se mueva una única vez o de manera infinita y los botones de play, pausa, para pasar de una cuadro a otro, intercalar cuadros, crear un cuadro nuevo y borrar.




4º Una vez terminado, vamos a Archivo>Exportar> Guardar para web (heredado). Ponemos que se guarde en GIF y aceptamos.



En este caso he realizado dos Banners diferentes, espero que os gusten.

 

Creación de Banners con GIF Maker

¿Qué es?

Es una herramienta la cual nos permite crear gifs a partir de varias imágenes, en este caso vamos a utilizarlo para crear un banner dinámico.

Pasos a seguir:

1. Subimos las imágenes.



2.Ponemos las imágenes en orden, es tan sencillo como hacer clic y arrastrar a la posición deseada.



3. En el Panel de Control modificamos el tamaño y la velocidad a la que queremos que vaya y le damos a Crear gif.



4. Una vez realizado, nos da la posibilidad de descargarlo, modificarlo, crear uno nuevo....



Y este seria el resultado:

Banners

¿Qué son?

Son piezas publicitarias dentro de una página web, tienen como objetivo atraer tráfico hacia el sitio web del anunciante el cual paga por su inclusión, aumentar la presencia de una marca, dar a conocer un nuevo producto o servicio...  Pueden incluir imágenes, texto, animaciones, vídeos, audio.....

Pueden ser:

1. Dinámicos: son aquellos que tienen incluidos sonido, video, animaciones especiales.....Son más atrayentes y proporcionan una mayor visibilidad.
2. Estáticos: son los más básicos ya que no tienen ningún tipo de animación, suelen llevar un breve texto junto con el enlace a la web y un logo.

Ejemplos de Banners.

https://www.elmundo.es/internacional.html

https://www.abc.es/

Dinámicos:

1. 

Tipo: 3:1 rectangle.

Dimensiones: 300x100 Resolución: 72 rpp

Formato: GIF Peso: 27 Kb

Modo de color: RGB

Fotogramas: 9  

2. 

Tipo: half-page ad

Dimensiones: 300x600 Resolución: 72 rpp

Formato: GIF Peso: 101 Kb

Modo de color: RGB

Fotogramas: 15  

3.

Tipo: medium rectangle 

Dimensiones: 300x250 Resolución: 72 rpp

Formato:GIF  Peso: 62 Kb

Modo de color: RGB

Fotogramas: 14  

4.

Tipo: skyscraper

Dimensiones: 120x600  Resolución: 72rpp

Formato: GIF Peso: 21 Kb

Modo de color: RGB

Fotogramas: 2 

5.

Tipo: 3:1 rectangle 

Dimensiones: 300x100  Resolución: 72 rpp

Formato: GIF Peso: 7 Kb

Modo de color: RGB

Fotogramas: 3 

6.

Tipo: leaderboard

Dimensiones: 728x90 Resolución: 72rpp

Formato: GIF Peso: 37 Kb

Modo de color: RGB

Fotogramas: 3 

Estáticos:

1.

Tipo: Half-page ad

Dimensiones: 300x600 Resolución: 72 rpp

Formato: PNG Peso: 196 Kb

Modo de color: RGB

2.

Tipo: half-page ad

Dimensiones: 300x600  Resolución: 72 rpp

Formato: PNG Peso: 205 Kb

Modo de color: RGB

3.

Tipo: medium rectangle

Dimensiones: 300x250  Resolución: 72 rpp

Formato: PNG Peso: 67 Kb

Modo de color: RGB

4.

Tipo: medium rectangle

Dimensiones: 300x250  Resolución: 72 rpp

Formato: JPEG Peso: 43 Kb

Modo de color: RGB

5.

Tipo: billboard

Dimensiones: 970x250  Resolución: 72 rpp

Formato: JPEG Peso: 103 Kb

Modo de color: RGB

6.

Tipo: Half-page ad

Dimensiones: 300x600  Resolución: 72 rpp

Formato: JPEG Peso: 40 Kb

Modo de color: RGB

Ejemplos en web: