Vídeo Edición

Video del Gol de Alba editado en Adobe Premiere en el cual hemos ido cortando las secuencias de los planos del gol para agruparlas posteriormente, así como; con las secuencias de la celebración del gol. De igual modo hemos añadido algunos efectos de barrido y transición.

Aplicación Simple usando escenas

Aplicación simple utilizada en Flash, con diversas escenas. Muy útil para construir la base de una página web.

Cabecera Web-Blog

En la parte superior del Blog podemos observar una cabera creada en Illustrator y animada mediante Flash.

Logo Intro

Intro animación de nuestro logo personal.

Galería Visor de Imagenes

Galería de Imagenes

Cartel Animado

En éste ejercicio hemos animado el cartel que previamente teniamos creado en Photoshop. Usando todo lo aprendido en los ejercicios anteriores podemos darle "vida" a aquellas ilustraciones o fotomontajes que creamos; como en este caso.

Efecto Escritura (borrado)

Efecto escritura realizado en Flash; creando la animación borrando fotograma a fotograma un poco del texto. Después se seleccionan todos los fotogramas y se invierten quedando el efecto final.

Práctica Máscaras

En ésta práctica de animación en Flash, hemos utilizado las máscaras para añadir efectos de aparecer y desaparecer, así como efectos de iluminación.

Práctica Guía

Ejercicio de animación en Flash en el que los objetos siguen el recorrido establecido por una línea guía.

Ejercicio Banner

Arriba podemos ver un banner animado en Flash. Para ello he utilizado el logotipo que cree en Illustrator de la agencia de viajes y utilizando dibujos simples realizados de igual modo en illustartor he creado una mini historia en la que finalmente el logotipo es un botón.

Ejercicio Botón Interactivo

Hemos realizado un botón interactivo en flash con destino a un vinculo externo a otra página.

Ejercicio Esfera Efectos 3D

En este ejercicio hemos simulado efectos 3D utilizando degradados en elementos. De igual modo, conviertiendo estos elementos en clips de pelicula y añadiendoles efectos de desenfoque; superposicion, etc... conseguimos esos efectos de luz.

Código para insertar archivos Flash en blogspot

Este es el código que debemos introducir en la entrada de nuestro blog; en la opción HTML. Para ello antes debemos subir el archivo a Google Site

<object data="https://AQUÍ PEGAMOS LA URL DEL ARCHIVO SUBIDO EN GOOGLE SITES" height="400" id="swf" type="application/x-shockwave-flash" width="500">>>0">       <param name="movie" 
   value="https://AQUÍ PEGAMOS LA URL DEL ARCHIVO SUBIDO EN GOOGLE SITES"></object>

Ejercicio Interpolaciones Flash

En este primer ejercicio usando el programa Flash; hemos realizado una animación utilizando las 3 interpolaciones que nos ofrece el programa.

Animacion Inteerpolaciones

PR/15 - Diseño de Logotipo y Web

  

Diseño de un Logotipo y Web. (En CONSTRUCCIÓN)

EJ 11 - Malla de Degradado

En esta actividad hemos usado la herramienta "MALLA DE DEGRADADO". A través de este herramienta y partiendo de una forma simple y de una imagen de mapa de bits; podemos simular casi con total realidad (yo aún no...) cualquier objeto; añadiendo puntos a los cuales se les va aplicando color.

Enlace al ejercicio en el Blog del Tutor (Jorge)

PR/7 - Prueba de Espirografía

  En este ejercicio hemos aprendido a utilizar algunas herramientas curiosas de Adobe Illustrator.

A partir de la creación de una trama de objetos; y utilizando las herramientas "DEFORMAR" y sus variantes hemos creado las primeras composiciones.

La esfera; mapeada con una de esas composiciones; así como el smilie y el dibujo espirográfico se han realizado utilizando la herramienta Efecto 3D y Efecto Distorsionar y Transformar.

Enlace al ejercicio en el Blog del Tutor (Jorge)

PR/13 - Diseño de página web (prueba)

   Esta práctica es la continuación de la práctica anterior (PR/12). partiendo de los logotipos que habíamos creado; hemos diseñado las correspondientes páginas web. En mi caso, he realizado dos páginas de estilos diferentes. La primera corresponde a una Agencia de Viajes; donde prima el color y las gamas correspondientes a los tonos del logotipo. En la segunda; tenemos una web más simple; sobre fondo negro y siempre repitiendo el dorado como color de todos los detalles, apliques, y demás elementos en concordancia con el logotipo planteado.

Enlace al ejercicio en el Blog del Tutor (Jorge)

PR/12 - Realizar logotipos

   En esta práctica hemos realizado dos logotipos con dos conceptos diferentes que representan a dos empresas. Posteriormente utilizaremos estos logotipos para realizar dos pruebas de página web.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ 06 - Texto en contornos, Texto en composición

   En el ejercicio nº 6 hemos realizado una composición a partir de la herramienta texto y las posibilidades que esta nos ofrece. Para ello he unido diversas letras para el isotipo central; y con otras tipografías he realizado los textos siguiendo determinados contornos. De igual modo he modificado algunos caracteres y he añadido elementos en consonancia con el mensaje y la ilustración que he diseñado.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ 05 - Calco Interactivo y texto adaptado

   En este ejercicio hemos utilizado la herramienta "CALCO INTERACTIVO"; con la que, partiendo de una imagen de bits (.jpg en mi caso) hemos realizado su vectorización de modo automático modificando los parámetros correspondientes para que Illustrator determine los vectores y las formas. Posteriormente hemos cambiado el color del nuevo logotipo vectorizado.

   De igual modo; hemos practicado con las opciones del texto; ajustando el texto a la imagen, o introduciendo un texto siguiendo el contorno de un trazado.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ 04 - Escudo

   En el ejercicio nº 4 hemos realizado un escudo heráldico (o no...) utilizando la herramienta "PLUMA". Con ésta herramienta podemos crear contornos y realizar las formas que nosotros deseemos. Para darle color hemos utilizado las herramientas anteriormente aprendidas en los ejercicios anteriores.

En la primera imagen; podemos observar el escudo creado en Illustrator íntegramente; así como el banderín delantero.

En la segunda imagen podemos observar una composición realizada en Photoshop usando el elemento vectorial.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ 03 - Botón

  En esta actividad hemos realizado un botón web utilizando las posibilidades que nos ofrece Illustrator. En la primera imagen podemos ver el botón original; el cual he tomado como idea de partida y el botón creado por mi.

   En la segunda imagen; aparece el resultado final; acompañado por las capas u objetos que he utilizado para hacerlos a modo de exposición. Para ello he utilizado formas simples; las cuales he "degradado" para dar los efectos; utilizando de igual modo los modos de fusión de las capas así como las opacidades.

   En la tercera imagen podemos ver; el mismo botón en diversas variaciones y su posterior vista en cada uno de los tres estados de su función.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ 02 - Formas Básicas, Buscatrazos, Texto y Máscaras de Recorte

Ejercicios realizados como práctica para conocer las herramientas y las posibilidades que ofrecen las herramientas de Illustrator.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ 01 - Diana

  En este primer encuentro con Adobe Illustrator hemos realizado como ejercicio de conocimiento de las herramientas que el programa ofrece; una diana a través de formas simples; alineándolas y  editando su color de relleno así como el color del trazo.

Enlace al ejercicio en el Blog del Tutor (Jorge)

PR/04 Diseño de una Web (copia)

En esta actividad; el objetivo ha sido realizar el diseño de una página web; en cuanto a composición, estructura y contenido. Para ello; como primer enfrentamiento al proyecto hemos tomado una página web ya creada y hemos copiado su imagen; modificándola para que el diseño sea personalizado a nuestro interés.

En mi caso he optado por partir de cero y diseñar una web a mi gusto.

- La primera imagen muestra la página al abrirse; que podría ser una animación en flash que sirve como presentación.

- La segunda imagen muestra la página web una vez que se ha accedido a alguno de los contenidos del menú.

- La tercera imagen muestra una de las aplicaciones de la página web al pinchar sobre una imagen; lo que hace que esta se vea ampliada y aislada actuando como un visor de imágenes.

Enlace a la actividad en el Blog del Tutor (Jorge)

03 Actividades - Cabecera

Cabecera realizada en Photoshop; que posteriormente procederemos a animar en flash.

Enlace al ejercicio en el Blog del Tutor (Jorge)

07 Actividades - Foto-montaje Collage

   Hoy lunes; 28 de Mayo de 2012, hemos realizado una fotocomposición a modo de collage basándonos en una obra de arte, pintura, cartel de cine, etc... En mi caso he elegido el tan versionado cuadro "Las Meninas" de Velázquez. Y como visión y objetivo e intentado recrear la escena de un modo actual creando un entorno callejero con diversas texturas. Sobre este escenario he puesto a diversas personas; así como obejetos e imágenes retro basándome en mis gustos personales.

Enlace a la actividad en el Blog del Tutor (Jorge)

Pasatiempo 2

   Segunda foto-composición creada entre ejercicio y ejercicio. Una de las tendencias más explotadas en Photoshop hace años era crear mini mundos fantásticos sobre animales o entornos. Aquí mi demostración personal.

05 Actividades - Realización de un Cartel

   En esta actividad hemos realizado un cartel. Yo lo he orientado al tema publicitario. Para ello hemos utilizado la nueva herramienta: MÁSCARA DE CAPA.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ/06 - Deformar una foto

   En este ejercicio hemos deformado una fotografía; utilizando diversos métodos. Aplicando las herramienta LICUAR, así como DEFORMAR dentro de las opciones de transformación libre podemos crear Gifs animados bastantes divertidos.

Enlace al ejercicio en el Blog del Tutor (Jorge)

PR/02 - Logotipo

En este ejercicio hemos realizado un Logotipo. En mi caso he optado por un juego de palabras; entre el Ave Fénix y mi nombre, Felix; sustituyendo la "F" por una "P", para causar un ajuste más anglosajón. De igual modo he unido la "P" a un icono simulando el Ave Fénix y una llama para darle total consistencia a la composición.

El logotipo ha sido íntegramente realizado en negro. He utilizado tres fuentes de texto; una para la "P", otra para "helix" y otra para "design". La forma del ave así como la de la llama la he dibujado con la herramienta pluma.

Una vez adherida a la "P"; he añadido un degradado a ambas partes; otorgando su color final.

Enlace al ejercicio en el Blog del Tutor (Jorge)

EJ/04 - Ajustes de Imagen

En el ejercicio nº 4, hemos realizado una cabecera a partir de dos fotografías.

En primer lugar hemos cogido una fotografía en escala de grises a la cual le hemos aplicado color; en mi caso utilizando una capa de ajuste Degradado.

A la segunda fotografía;  que estaba en color, la hemos desaturado y la hemos coloreado utilizando una capa en un tono y cambiando el modo de fusión de la capa a COLOR.

Tras ello; hemos unido ambas imágenes ayudándonos de una máscara de capa y de los modos de fusión.

Aquí la misma cabecera; pero habiendo aplicado un filtro de RUIDO; y también hemos añadido un forma la cual hemos desenfocado y a la que le hemos añadido un DESTELLO.

Enlace al ejercicio en el Blog del Tutor (Jorge)

Entre ejercicio y ejercicio....

Foto-composición realizada entre ejercicio y ejercicio mientras pasa el tiempo. Espero que os guste! Agradezco vuestros comentarios!

EJ/03 - Menú Web Vertical

Siguiendo la estética del ejercicio anterior; y de igual modo hemos realizado un menú web horizontal. En éste caso he optado por no incluir ningún icono ya que el menú horizontal los lleva incluidos.

Enlace al Ejercicio en el Blog del Tutor (Jorge)

EJ/03 - Menú Horizontal Web

Menú web realizado en Photoshop creando formas simples y fuentes de texto. Nos hemos ayudado de la herramienta degradado; así como del uso de capas y máscaras de capa para darle el diseño o intención deseada. En mi caso e incluido una textura y también me he ayudado de un pincel personalizado para dar los últimos retoques.

Ejercicio en el Blog del Tutor (Jorge)

EJ/02 - Banner

Banner realizado en Photoshop. Hemos creado un fondo y un pequeño fotomontaje ayudándonos de las herramientas que nos ofrece el programa. Hemos usado capas y modos de fusión para obtener el efecto deseado; así como, filtros que son muy útiles visualmente.

Teoría y Ejercicio - Blog del Tutor (Jorge)

EJ/01 - Ejercicio Botón en 3 estados

En este ejercicio hemos realizado un botón web; utilizando las herramientas que nos ofrece el programa Photoshop, principalmente las orientadas a crear formas; como la herramienta degradado. Con ella otorgamos color y determinamos por la intensidad o combinación en qué estado se encuentra nuestro botón.

En la imagen observamos el botón creado en los tres estados:
1 - Botón en Reposo
2 - Botón en Stand (al colocar el ratón encima o pasarlo sobre éste)
3 - Botón Pulsado

Enlace a Ejercicio Botón - Blog del Tutor (Jorge)

Ejercicio Herramientas

Retoque realizado en Photoshop usando todas las herramientas que el programa nos ofrece. Hemos aprendido a utilizar todas las opciones de éstas; aplicándolas en un ejercicio práctico de retoque para quitarle las pecas a las chica de la imagen.

Dentro de las herramientas del programa nos encontramos:

MOVER
LAZO POLIGONAL
PINCEL
BOTE DE PINTURA
PLUMA...

Teoría Herramientas - Blog Tutor (Jorge)