INTERPOLACIÓN DE MOVIMIENTO

INTERPOLACIÓN DE FORMA

En esta ocasión he utilizado el programa de flash para crear varias prácticas utilizando la interpolación de forma

La interpolación de forma se hacía desde la línea del tiempo, cuando le dábamos a la opción de interpolación de forma aparecía una línea verde, en la cual al principio de ella había que poner la forma inicial que queríamos, y al final la forma en la que queríamos que se convirtiese nuestra forma del principio.

Esto no solo se limita a las formas poligonales, sino que también se puede hacer con letras. En este caso he hecho que una letra pase a ser una forma y esa forma vuelva a ser una letra. ( En mi caso el principio es una T, luego pasa a un cuadrado y por último a una S ).

Esto lo he hecho separando el texto con la opción de separar, ya que sin esa opción no te deja realizar la interpolación de forma. Una vez hecho esto lo único que tuve que hacer fue hacer lo mismo que en la práctica anterior, pero esta vez creando tres fotogramas claves en los que irían las dos letras y el cuadrado.

Y por último he creado una esfera y gracias a la interpolación de forma he hecho que pareciese que la luz que tenía la esfera se desplazaba.

Esto también era muy sencillo, simplemente hice un degradado radial en un círculo y luego moví la parte central del degradado hacía un lado con la herramienta de selección de degradado. Y por último, con la misma herramienta movíamos esa misma parte del degradado hacía el lado contrario, y en la parte final de la línea de interpolación de forma.

TRAZADO CON PLUMA

En esta práctica he realizado un trazado con la herramienta pluma. 

Hacer un trazado es sencillo, una vez seleccionamos la herramienta de pluma lo único que tenemos que hacer es ir haciendo la forma que queremos trazar.

En el caso de esta práctica, el trazado era de un árbol, en el que teníamos que trazar todas sus ramas, de forma que solo quedase en árbol con sus ramas y el fondo desapareciese.

También podemos destacar que para hacer las líneas curvas se tiene que arrastras el cursor al hacer el trazado ( Cuando esto se hace aparece una especie de nivelador que nos permite mover el trazado para deformarlo ), de esta forma la curva se hará automáticamente. 

Una vez el trazado del árbol está terminado se le daba a la opción de Trazado de recorte, que lo que hace es una especie de selección del trazado para que desaparezca el fondo. Si no se realiza esta acción no desaparecerá el fondo.

Al tener el trazado de recorte hecho lo llevábamos a Indesing, donde tenía que hacer una composición  en la que tenía que incluir varias cosas como cajas de imagen, textos, crear un trazo para el árbol...

Este es el resultado que quedaba al hacer todo lo que expliqué antes :

HERRAMIENTA DECO

En esta práctica he utilizado la herramienta DECO para crear un dibujo con animación.

La herramienta DECO es una herramienta que nos permite crear varios dibujos, como edificios, flores, efectos de fuego o llamas...

Yo realicé un dibujo muy sencillo, simplemente hice los edificios y después le puso un efecto de fuego en movimiento para que diese el efecto de que los edificios se quemaban.

Después de hacer todo esto este fue el resultado :

BOTÓN PULSE

En la práctica de botón pulse creé una animación en la que tenían que ir apareciendo distintas letras que creasen la palabra PULSE. 

Para empezar con esta práctica creé un fondo de escenario amarillo y con la herramienta polystar hice todas las estrellas que ocupan el fondo de la composición.

Luego puse la primera letra que tiene que aparecer en la animación, la P, y en la línea del tiempo creé un fotograba clave al principio y un fotograba normal al final, hasta donde quería que se viese la letra.

Este proceso se hacía con todas las letras hasta conseguir que apareciesen seguidas una tras otra.

Este es el resultado que quedaba de hacer ese proceso con todas las letras : 

CIRCUNFERENCIA CON FLASH

Crear una circunferencia con flash es muy sencillo.

Para empezar cogí un punto de referencia que se nos daba y del que teníamos que crear la circunferencia.

Lo que hice con esa línea fue copiarla y pegarla creando un fotograma clave, después la modifiqué con la herramienta de selección directa y la coloqué después de la línea de referencia que se nos daba.

Se seguía este proceso sucesivamente, creando las líneas, modificándolas y poniéndolas en fotogramas claves para que al reproducir la animación pareciese que la circunferencia se fuese creando poco a poco.

Este es el resultado :

PRÁCTICA FOTOGRAMAS

En esta práctica utilicé la línea del tiempo para crear una animación en la que iban apareciendo distintos títulos.

Primero tenía que crear el texto, y después crear un fotograma para que apareciese ese texto.

Para hacer que apareciese el segundo texto tuve que cambiar el texto y crear un nuevo fotograma clave y después crear otro fotograma para marcar el final de esa animación.

Así sucesivamente hasta llegar al décimo fotograma.

APRENDER A DIBUJAR EN FLASH

En estas prácticas he utilizado Flash para realizar dos dibujos.

El primer dibujo que realicé fue una composición con un oso panda como protagonista.

Para realizar este dibujo lo primero que hice fue colocar el color azul como color de escenario, y colocar un cuadro de imagen de color verde para la hierba. 

Después, en una capa distinta creé los diferentes pájaros, y en otra capa las nubes a partir de la herramienta de forma, eligiendo la forma de óvalo y juntando varios de forma que pareciese una nube.

Lo siguiente que hice fue crear el sol, el cual creé utilizando la herramienta de forma ovalada, creando la esfera y dándole un degradado radial que fuese de amarillo a naranja.

Por último creé el panda, empezando por la forma de su cara, también creando un círculo y deformándolo hasta que pareciese la cara del panda. Luego hice las orejas, que eran dos óvalos y las coloqué. Y por último creé los ojos y la boca creando distintas formas.

El otro dibujo que realicé fueron 3 textos, cada uno hecho de una forma distintas.

El primero hecho con una máscara de recorte, el segundo igual, lo único que cambiaba era que tenía que crear el contenido que iba a llevar ( La fresa en mi caso ), y por último un texto que llevaba filtros.

CARTA DE COLOR

Una carta de color es una paleta en la que se muestran distintos colores y distintas tonalidades de los mismos, además de las valores CMYK que tenemos que colocar para obtener ese color. Estas cartas de color son muy utilizadas en preimpresion o en el ámbito de la fotografía.

En esta ocasión he realizado una carta de color desde photoshop.

Para ello primero he organizado el espacio en el que iba a ir cada una de los cuadrados de cada color.

Para crear los distintos colores lo que hice fue crear uno a uno los cuadrados con la herramienta de marco rectangular y después crear una capa de relleno en esos cuadrados para después poner en el selector de color los distintos porcentajes y conseguir ese color.

Por último lo que hice fue colocar correctamente todos los colores y el porcentaje de CMYK que se necesitaba para conseguir el color deseado.

Este fue el resultado :

BANNERS CON HTML5

En esta práctica he realizado un banner HTML5 a partir de un programa llamado HTML5 Maker.

Este es un programa que se usa exclusivamente para crear banners en HTML5, y es muy sencillo de utilizar. 

Para empezar vemos a la izquierda las pestañas en las que se dividirá nuestro banner, y también el tiempo que durarán hasta cambiar al siguiente. También nos permite realizar otras acciones como por ejemplo borrar una pestaña o copiar una que ya tengamos hecha.

En la parte superior del programa están las opciones para añadir texto e imágenes, además de otras opciones que nos permiten visualizar nuestro banner y otra que nos permite hacer zoom.

Y por último en la parte derecha encontramos todo lo necesario para modificar nuestras imágenes y textos, ya sea su tamaño, color, trazo... Incluso también una opción que nos permite poner un hipervínculo.

Por último publicábamos nuestro banner y al publicarlo nos permitía guardarlo y coger su código embebido.

Otro de los programas que podemos utilizar es bannersnack.

Este programa nos permite crear banners en HTML5 y en flash.

Este programa se parece mucho al anterior, en su parte izquierda encontramos las dsitintas pestañas que nos servirán para crear nuestro banner, al igual que en el programa anterior.

En la parte superior también encontramos las opciones para añadir texto, imágenes, visualizar el banner...

Y en la parte derecha encontramos también los ajustes que nos permiten modificar nuestro texto, imágenes y demás.

PROTOTIPO DE PAGINA WEB

El prototipado de una página web consiste en hacer un bosquejo o boceto de esa página para ver como será su aspecto y corregir errores antes de crear la página final. El prototipo de una página web se puede realizar a mano ( con una hoja y un papel ) o con un programa de prototipo, como por ejemplo NinjaMock, que es el que he utilizado en este caso.

Ahora explicaré como realizar el prototipo de una página web a partir de dicho programa.

Esa es la página que se nos abre cuando queremos crear un nuevo prototipo, como podéis ver yo ya tengo el mío creado. 

A la derecha aparecen todos los elementos que podemos utilizar para crear nuestro prototipo :

Entre estos elementos aparecen los típicos, como por ejemplo uno que te permite poner imágenes, textos, links... Pero hay otros más curiosos como por ejemplo algunos que te permiten poner calculadoras, mapas, gráficos... 

En la parte derecha de la página se muestran las propiedades del elemento que estamos utilizando : 

A partir de todos esos elementos cree un prototipo de página web, este es el resultado final :

Cuando estaba terminado había que guardarlo en HTML y en PDF :

GESTIÓN DE COLOR

En esta práctica os explicaré qué es y como se utiliza la gestión del color. 

Para ello os mostraré un ejemplo mediante imágenes que os ayudarán a comprenderlo mejor. 

Empezaré con la siguiente imagen :

En esta imagen aplicaré un ajuste de color Preimpresión Europa 3.

Lo primero que haremos será meter la imagen en Photoshop. Cuando hagamos esto se nos abrirá la siguiente ventana :

Como podéis ver en esa ventana se nos muestran tres opciones, estas opciones siempre se nos muestran cuando a la imagen le falta un perfil. 

En este caso he elegido la segunda opción que es : Asignar espacio de trabajo RGB Adobe RGB (1998). La primera opción significa que no se va a efectuar ninguna gestión de color y la última nos deja elegir un perfil. 

Después de darle el perfil de color a la imagen lo que haré será ir a la ventana de edición y seleccionar el apartado ajustes de color.

Como podéis ver, en esta ventana se nos presentan varias opciones sobre el ajuste de color. En este caso solo he tocado la primera opción en la que pone ajustes, en la que he cambiado la opción a Preimpresión en Europa 3. Al hacer esto automáticamente se cambiaba el ajuste de CMYK a FOGRA39 y el apartado de RGB queda igual que al principio.

Cabe resaltar que este último paso se puede realizar al principio, antes de meter la imagen en photoshop, así al meter la imagen ya se quedaría con esos ajustes y no habría que cambiarlos después.

Ese es el resultado que queda al realizar todo el proceso.

Ahora a partir de la siguiente imagen crearé un ajuste a medida que va a ser un FOGRA27.

Aunque este ejemplo lo haré de otra forma para explicar otra alternativa para realizar la gestión de color.

En este caso al colocar la imagen en photoshop marcaremos la primera opción :

Como dije antes esta opción no da ningún perfil de color, por lo tanto tendremos que colocarlo después. 

Para ello simplemente vamos a la ventana de edición y le damos a asignar perfil, allí nos aparecerá la misma ventana que nos aparecía al principio para darle el perfil.

Lo siguiente que haré será lo mismo que en el paso anterior pero con una pequeña diferencia. La diferencia es que cambiaré el Ajuste por uno a medida y en el apartado de CMYK cambiamos a FOGRA27.

Este es el resultado de esta imagen :

Por último explicaré como convertir el perfil en CMYK.

Simplemente vamos de nuevo a edición, y esta vez abrimos el apartado de convertir en perfil :

En el apartado de Espacio de destino marcamos la opción de Espacio de trabajo CMYK. Esta opción también sirve para pasarlo a RGB o a otro tipo de perfiles.