3 Nov 2011

Minitutorial: Creación de una animación HTML con Illustrator, Photoshop y Edge

En este nuevo minitutorial vamos a explicar como crear una simpática animación en HTML5 gracias a las posibilidades de Illsutrator, Photoshop y el nuevo Adobe Edge. Esta animación podremos visualizarla tanto en el navegador de PC como en nuestros dispositivos, incluyendo aquellos basados en iOS.

1.       La animación consistirá en un personaje saltarín que se desplaza a través del ancho de un Banner. Comenzaremos dibujando la secuencia del personaje saltando directamente en Illustrator con tus herramientas de dibujo favoritas. Yo en este ejemplo utilicé los pinceles caligráficos y el pincel de manchas pero también podrían ser imágenes escaneadas y trazadas posteriormente. Lo importante es que cada uno de los personajes que compone la secuencia esté agrupado como un único objeto (un objeto por cuadro de secuencia) y que cada una de las imágenes de la secuencia esté en una capa distinta.

Image001

2.       A continuación seleccionamos todos los personajes de la secuencia y los alineamos verticalmente (sólo verticalmente!) para que ocupen todos la misma anchura.

Image002

3.       Una vez alineados seleccionamos el comando de menú Archivo>Exportar… y escogemos Photoshop(psd) como formato de exportación.

Image003

4.       En el cuadro de diálogo que aparece es importante que seleccionemos en el apartado “Resolución” >“Pantalla” y en el apartado “Opciones” >”Escribir capas”.

Image005

5.       Abrimos en Photoshop el fichero PSD resultante y mostramos en panel de animación mediante el comando Ventana>Animación.

Image006

6.       Es importante que la línea de tiempo esté en el modo  animación de cuadros. Si no fuera así, hacemos clic en el menú lateral de este panel y seleccionamos la opción “Convertir en animación de cuadros”.

Image008

7.       Esta parte es crítica ya que debemos hacer visible en cada fotograma únicamente la capa que nos interesa que aparezca. Haz clic en el botón de nuevo fotograma y vuelve a repetir el proceso de hacer invisibles todas las capas menos la que quieres que aparezca en el fotograma.

Image009

8.       Repite el proceso hasta tener construida toda la secuencia del salto.

Image010

9.       Antes de hacer clic en el botón play para ver cómo queda el resultado, es importante definir la duración de cada uno de los cuadros. Es normal que mientras el personaje toma impulso vaya más lento mientras que cuando salta, se eleva por los aires y cae lo haga en una secuencia más rápida. También es importante anotar estos tiempos porqué luego nos servirán para hacer cálculos a la hora de animar el personaje en Adobe Edge. En mi caso le he dado una duración de medio segundo a los dos primeros cuadros, una duración de 1 segundo al tercer cuadro y 0,1 segundos al resto que componen la secuencia del salto.Fig.9. Para asignar tiempo a un cuadro, haz clic en la parte inferior del cuadro donde indica la duración de ese cuadro, aparecerá un menú desplegable con las duraciones disponibles. Cuando hayas asignado el tiempo a cada fotograma ya puedes hacer clic en el botón de reproducir para observar una primera vista previa del resultado.

10.   El siguiente paso es exportar la secuencia como gif animado. Para ello ejecutamos el comando de menú Archivo>Guardar para web y dispositivos…

11.   En el cuadro de diálogo que aparece, escoge GIF como formato, activa la casilla transparencia y en el menú desplegable “Halo” es aconsejable escoger el mismo color de fondo que pensemos utilizar de fondo en nuestra animación de Edge para conseguir un resultado lo más suavizado posible. En opciones de repetición puedes escoger o bien “infinito” o bien el número de veces que quieras repetir el salto en la animación Edge.

Image012

12.   Ahora llega el turno de abrir Adobe Edge y crear una nueva animación a través del comando de menú File>New. En el panel de propiedades podemos fijar las dimensiones de nuestro Banner. En mi caso fijé unas dimensiones de 720 píxeles de ancho por 200 de alto. También en este panel podemos cambiar el color del escenario.

Image013

13.   Importamos el Gif animado que acabamos de crear en Photoshop mediante el comando de menún File>Import… Aparecerá nuestro personaje dando sus saltitos dentro del escenario.

Image015

14.   Como al principio el personaje no se desplaza (mientras está tomando impulso). Arrastraremos el cabezal inferior hasta  la marca de tiempo donde queremos que empiece a desplazarse, en mi caso a los dos segundos (recuerda, medio segundo de los dos primeros cuadros y 1 del tercero).

Image017

15.   Ahora toca arrastrar el cabezal superior que define el punto final de la transformación. Lo arrastraremos a la marca de tiempo que salga resultante de sumar la duración del tiempo del salto (en mi caso 0,3 segundos, 0,1+0,1+0,1) al tiempo de la primera marca adonde arrastramos el cabezal inferior.

Image018

16.   Asegúrate que el botón del “Auto-Keyframe” y “generate Smooth Transitions” están activados.

Image019

17.   A continuación desplazamos el personaje hacia la derecha en el eje horizontal el espacio que deseemos (para desplazarlo solamente en el eje horizontal es necesario que pulse la tecla mayúsculas del teclado mientras se arrastra el personaje hacia la derecha). Mientras más espacio en píxeles dejes más exagerado se mostrará el salto. Haz varias pruebas para no pasarte o el salto perdería credibilidad. Cuando hayas realizado esta operación podrás ver como en la línea de tiempo aparece una tira entre el cabezal inferior y el cabezal superior que representa el desplazamiento que acabamos de crear.

Image027

18.   El personaje ahora debe permanecer parado mientras vuelve a coger impulso. El tiempo que debe estar parado coincide con la duración de los primeros cuadros del gif animado, o sea dos segundos, así que ahora toca arrastrar el cabezal inferior otros 2 segundos a la derecha en la línea de tiempo.

Image028

19.   De nuevo toca arrastrar el cabezal superior 0,3 segundos para realizar una segunda secuencia de salto. Desplazamos de nuevo el personaje hacia la derecha en ese punto y aparecerá una nueva tira que simboliza el nuevo desplazamiento.

Image029

20.   Repetimos los pasos 17 y 18 tantas veces como saltos queremos que realice el personaje hasta que salga por la derecha de la pantalla.

Image030

21.   Otra opción es variar la opacidad del personaje al 0% tras el último salto. Para ello seleccionamos al personaje en el escenario y variamos el parámetro “Opacity” en el panel “Properties”. Asegúrate que la posición del cabezal inferior (inicio de la acción) y el cabezal superior (final de la acción) están en el lugar correcto de la línea de tiempo, esto es coincidiendo en el tiempo con el último salto.

Image031

22.   Para previsualizar el resultado no te fíes de la reproducción en el propio Edge ya que no podrás apreciar la sincronización con los cuadros del gif animado, mejor selecciona el comando de menú “File>Preview In Browser”.

23.   Si te gusta el resultado simplemente tienes que guardar los cambios en una carpeta y colgar el tu web los ficheros que Edge crea en esa carpeta a excepción del fichero .edge que no es necesario para publicar pero sí que debes guardar en tu disco por si quieres realizar modificaciones en el futuro.

Aquí puedes ver un ejemplo con el resultado.

http://www.tonilirio.com/edgelab/salto/

2 Nov 2011

Incorporar GoogleFonts en Muse

Hace poco hablábamos de Muse, una nueva propuesta de Adobe para crear elegantes webs de diseño de forma totalmente visual. Pues bien, hoy me gustaría presentaros este vídeo de nuestro colaborador Pedro Arconada donde nos muestra como con Muse es también posible aprovechar los recursos que nos brinda la web, cómo las fuentes web de Google, e integrarlas en nuestro diseño tan sólo copiando y pegando unas cuantas líneas de código. Muy interesante, didáctico e intuitivo. Una razón más para valorar la inclusión de Muse en nuestro flujo de trabajo.

2 Nov 2011

Adobe adquiere Auditude

Adobe ha anunciado la adquisición de Auditude Inc, un líder en vídeo publicidad y tenologías de monetización para empresas y agencias de medios. A través de esta adquisición Adobe está ahora posicionada de forma única para ofrecer  una solución de vídeo de principio a fin, conectando la creación de contenido con la autoría, la monetización y la optimización del contenido con el objetivo de ayudar a los clientes a construir negocios a largo plazo basados en la distribución de contenido de vídeo de calidad a través de todos los dispositivos conectables a través de IP.

Más información en http://www.adobe.com/aboutadobe/pressroom/pressreleases/201111/110111AdobeAcquiresAuditude.html

20 Oct 2011

Nuevos productos de Wacom

Hace poco hablábamos de Inkling un nuevo y revolucionario product de Wacom, pero lo cierto es que esa no es la única novedad. Recientemente Wacom ha lanzado dos nuevos productos que pueden ser del interés de muchos amantes del dibujo.

Uno de ellos es la impresionante Cintiq 24 HD.

Image002

Se trata de una tableta gráfica y monitor de 24 pulgadas a la vez. Con una resolución de 1920 X 1200 píxeles y una alta gama de color (92% de AdobeRGB) permite dibujar directamente sobre su superficie mientras ves lo que estás dibujando en esa misma superficie. Es la mayor tableta de la familia Cintiq que ha hecho Wacom hasta ahora, proporciona un gran espacio de trabajo para trabajar con comodidad y soltura sobre la mesa del estudio (eso sí, espacio se necesita un poco), un auténtico tablero de dibujo que sin duda será el objeto de deseo de muchos ilustradores.

Image001

La otra novedad es la nueva generación de tabletas gráficas Bamboo, que son la elección idónea tanto para los entusiastas del dibujo digital como para los profesionales que quieran disponer de una tableta secundaria cómoda de manejar y fácil de transportar. Entre los modelos disponibles existe la versión Pen y la versión Pen&Touch, esta última permite utilizar, además del lápiz, los dedos para funciones multitáctiles como si se tratara de un Smartpad.

Más información en: http://www.wacom.eu

19 Oct 2011

No hagas nada en dos minutos

Donothing2minutes

De vez en cuando te encuentras con webs como ésta que suponen un soplo de aire fresco.

http://www.donothingfor2minutes.com/

Se trata de una web que te propone no hacer nada durante dos minutos a parte de mirar la pantalla y relajarte con la imagen y el sonido de las olas del mar. En el centro de la pantalla hay un contador que se resetea de nuevo a dos minutos apenas se mueve el ratón o se pulsa el tecleado recordándote tu fracaso en la misión de estar dos insignificantes minutos sin hacer nada. Muy recomendable para mejorar la productividad y el bienestar mental de todos aquellos que invierten gran parte de su tiempo delante de un ordenador y olvidan (olvidamos) que a veces lo mejor es parar un poco, relajarnos y vaciar la mente de pensamientos.

18 Oct 2011

Las nuevas aplicaciones Touch de Adobe

Psptouch

En el pasado Adobe MAX, Adobe daba a conocer una serie de “Apps” para tablets que dejan adivinar en buena medida cual es parte de la estrategia tecnológica de la compañía para los próximos tiempos.

Se trata de apps que no están concebidas para consumir contenido sino para crearlo, y creo que vale la pena subrayar este punto porque cuando apareció el iPad e inauguró la revolución de los tablets, fueron muchas las opiniones, vertidas dentro y fuera de la red, que aseguraban que era un dispositivo principalmente pensado para el consumo de contenidos, a pesar de que la propia Apple había presentado, junto con el iPad, aplicaciones de creación como Pages, Numbers, Keynote o Brushes, que por otro lado pocos parecieron tomar muy en serio.

Como era de esperar, enseguida fueron muchos los fabricantes y diseñadores de software que lanzaron al App Store aplicaciones de creación de contenidos adivinando el gran potencial de este tipo de dispositivos sobretodo en el entorno de los profesionales creativos.

Adobe fue uno de esos fabricantes que lanzó aplicaciones de creación, cómo Photoshop Express o Adobe Eazel, pero es en esta nueva generación de herramientas para Tablet donde se puede confirmar la apuesta definitiva de Adobe por este entorno. La diferencia entre esta familia de apps y las apps de otros fabricantes es, sobretodo, el enfoque con el que están concebidas ya que la intención es que trabajen como herramientas independientes o bien como complementos de apoyo de los programas de Creative Suite con los que se integran de forma muy flexible. En gran parte esta integración se consigue gracias a otra de las novedades presentadas en MAX, se trata de Adobe Creative Cloud, un servicio que permitirá acceder a nuestras creaciones a través de la nube y compartirlas de forma sencilla y rápida entre varios ordenadores y dispositivos.

De las seis apps presentadas, una ya hace tiempo que está disponible en el mercado; la magnífica Adobe Ideas pero las otras cinco son totalmente inéditas. Vamos a hacer un breve resumen de todas ellas.

·         Adobe Photoshop Touch: Se trata de una versión reducida de Photoshop que nos permite realizar parte de las operaciones básicas de retoque de imagen como ajustes, selecciones y calados y que muy bien pueden servir como punto de partida de un proyecto que luego puede continuarse en el Photoshop de escritorio dentro del ordenador ya que permite guardar en formato PSD y compartir dicho PSD a través de la Creative Cloud.

·         Adobe Debut: Permite mostrar y compartir con los colaboradores y clientes los diseños creados en programas de Creative Suite como Photoshop, In Design e Illustrator. Se pueden mostrar u ocultar capas y hacer anotaciones sobre el documento de esta manera se simplifica mucho el proceso de experimentación, corrección y toma de decisiones respecto a un diseño entre una, dos o más personas.

·         Adobe Proto: Con esta app se pueden crear prototipos interactivos de sitios web y/o aplicaciones para dispositivos móviles dentro de tu tableta, así que se convierte en una herramienta ideal para comenzar a esbozar la composición y la arquitectura de la información de este tipo de proyectos que luego puede ser compartida con el resto de miembros del equipo de diseño y desarrollo.

·         Adobe Collage: Como su nombre indica, esta app permite componer y ensamblar diferentes contenidos de imagen para acabar obteniendo un montaje final sobre el que añadir texto o trazos. Permite importar directamente imágenes de Google o Flickr, pero también documentos en formato PDF, Photoshop o Illustrator.

·         Adobe Kuler: En este caso se trata de la versión app de un famoso servicio de Adobe para la creación de paletas y armonías de color disponible desde hace tiempo en la web a través del navegador en kuler.adobe.com. Las paletas de color creadas se pueden exportar a Adobe Creative Cloud para ser usadas en los programas de Creative Suite.

·         Adobe Ideas: Para los que no lo conozcáis todavía, Adobe Ideas es una magnifica herramienta de dibujo a mano alzada con una interfaz muy sencilla que tiene la característica destacable de que las ilustraciones resultantes son vectoriales y por tanto pueden escalarse a cualquier tamaño sin pérdida de resolución.

De momento estas aplicaciones están solamente disponibles para dispositivos Android a excepción de Adobe Ideas que está sólo disponible para iOS, pero la intención es que en el momento de su lanzamiento oficial estén todas para ambas plataformas.

Más info en: http://www.adobe.com/products/touchapps.html

14 Oct 2011

Arteterapia

Arterapia

El próximo sábado 15 de Octubre en el programa “Respira” de Barcelona TV emitirán un interesante reportaje sobre “Art i Terapia” donde se mostrará que el arte (y el dibujo como parte de tal) es una poderosísima herramienta terapéutica para mejorar nuestra salud mental, emocional y, por lo tanto, física y una estupenda vía de crecimiento personal.

Los que seguís este blog ya sabéis que he defendido más de una vez el poder del dibujo mucho más allá de su cualidad como actividad plástica por eso pienso que conocer una disciplina como la Arte terapia puede ser sumamente enriquecedor.

Los que no podáis sintonizar la cadena, podréis ver el programa en diferido más adelante a través de http://www.btv.cat/alacarta/  . También podéis encontrar más información acerca de esta disciplina en http://www.fesmediacion.com/page8.html

13 Oct 2011

Nueva extensión de Fireworks para la creación de diseños CSS3 para móviles.

Jquery

En Adobe Labs hay disponible una nueva extensión para Fireworks que permite la creación de “skins” personalizados para aplicaciones móviles basadas en JQuery Mobile.

La extensión se compone de una plantilla de varias páginas que contiene una colección completa de símbolos, botones y otros elementos de interfaz completamente editables. La plantilla además permite la creación de diferentes variaciones de colores basadas en el mismo diseño principal.

Una vez personalizada la plantilla, desde el propio Fireworks es posible previsualizar el aspecto y funcionamiento del “skin”. Fireworks abre el navegador web con una simulación funcional del interfaz de la aplicación móvil ya en formato HTML.

Si estamos satisfechos con el resultado, otro comando de esta extensión exporta los ficheros CSS y de imagen correspondientes listos para importar en nuestra aplicación Jquery Mobile creada en Dreamweaver.

Más información en http://labs.adobe.com/technologies/fireworks_css3mobile/

11 Oct 2011

Adobe en SIGN

Image001

El pasado viernes día 7 estuvimos dando una conferencia en Madrid dentro del marco del evento Viscom Sign. La conferencia se centró básicamente en la publicación de contenido para dispositivos digitales.

Image002

Al principio, el director comercial Jordi Masfarné informó de los descuentos que hay actualmente del 20% para las actualizaciones de Creative Suite desde la versión 2,3 o 4  . Ya entrando en la parte tecnológica y de demostración, Ana Mesas hizo una primera exposición acerca del proceso de publicación de libros electrónicos, en formatos PDF y EPUB, donde mostró el resultado de una misma maqueta realizada en in Design, bajo diferentes lectores y dispositivos, para pasar luego a una explicación en profundidad del proceso de creación y publicación de revistas digitales para iPad y Android con el sistema Adobe Digital Publishing Suite.

Image003

Mencionó una de las novedades anunciadas en Adobe MAX; la Digital Publishing Suite Single Edition.  Se trata de un servicio basado en esta tecnología que por un precio de 300 € aproximadamente permitirá crear una aplicación sencilla de publicación electrónica. Resulta ideal para autores, agencias y creativos que quieran lanzar al App Store  ediciones de número único que aprovechen toda la potencia de maquetación de In Design y las posibilidades de interacción y contenido multimedia que otorgan las herramientas del Overlay Creator en Digital Publishing.

Por su parte Pedro Arconada, periodista tecnológico, consultor experto, formador y colaborador habitual de Adobe, explicó su experiencia en el proceso de creación de una revista electrónica con Digital Publishing Suite dentro de un proyecto real en el que ha estado participando ofreciendo sus servicios tanto en la fase de elaboración como en los entresijos de publicación dentro de la tienda de Apple. Esta parte fue especialmente agradecida por el público, pues muchos de los asistentes estaban interesados en adentrarse de forma directa o indirecta  y más o menos inmediata en este nuevo entorno y por eso el testimonio de una experiencia de primera mano fue muy valorado.

Image004

El mismo Pedro Arconada siguió la conferencia mostrando las novedades de Dreamweaver CS5.5 referentes al trabajo directo con HTML5 y CSS3 y, especialmente, la posibilidad de crear aplicaciones nativas para dispositivos, basadas en Java Script, desde la propia aplicación. A continuación yo mismo demostré como en el nuevo Flash CS 5.5 podemos crear, aparte de contenido para la web, aplicaciones nativas para distintos dispositivos basados en iOS o Android independientemente del tamaño de su pantalla gracias a la nueva prestación de adaptar el contenido al tamaño del escenario. En esta parte, lo que más gustó fue la facilidad con la que podíamos crear una aplicación Android a partir de una plantilla y visualizarla directamente en el dispositivo para comprobar su funcionamiento. Para finalizar enseñé como crear animaciones HTML5 a través de Flash gracias a la utilidad Wallaby.

El último plato que se sirvió fue dos novedades presentadas recientemente y que han causado una gran expectación entre la comunidad de usuarios. Se trata de Adobe Edge, una herramienta para la creación de animaciones HTML5 y Adobe Muse una aplicación que permite crear atractivas webs de diseño de forma totalmente visual con un interfaz muy similar a los programas de maquetación, como in Design, que están acostumbrados a utilizar los diseñadores gráficos.

Pedro Arconada mostró varios ejemplos donde quedó de manifiesto la facilidad de uso de Edge y la calidad y suavidad de las animaciones resultantes así como la posibilidad de añadir interactividad básica aún sin conocimientos de programación.

Un servidor de ustedes tuvo el gusto y el honor de sorprender a la audiencia creando un website completo en apenas minutos gracias a Adobe Muse y sin teclear ni una sola etiqueta HTML. La respuesta del público ante este producto fue muy favorable tal y como era previsible por otro lado. Recordemos que tanto Edge como Muse son tecnologías aún en fase de prueba que pueden descargarse y probarse de labs.adobe.com.

En general, el interés que pudimos captar entre los asistentes fue muy alto, mayor incluso del que suele haber en otros eventos de presentación de novedades. Por la cantidad y calidad de las preguntas que surgieron pudimos comprobar no solamente la avidez de los creativos por subirse al tren de los nuevos medios de creación sino su buena actitud frente a indudables tiempos de cambio también en el entorno tecnológico y creativo.

10 Oct 2011

Últimas adquisiciones de Adobe

Iridas

Durante los últimos meses Adobe ha realizado algunas adquisiciones estratégicas de cara a reforzar su liderazgo en el área de creación de contenidos digitales. Me gustaría destacar dos de ellas.

La primera es IRIDAS un fabricante de software de corrección, edición y manipulación de color en fotografía y vídeo. El primer resultado de la adquisición de esta tecnología es la integración de una de las principales herramientas, SpeedGrade, dentro de varios productos de Creative Suite.

Con la adición de esta tecnología, se espera que Adobe Creative Suite Production Premium y Adobe Creative Suite Master Colection ganen un buen conjunto de herramientas de forma que los editores de imagen y vídeo puedan manipular de forma flexible el color y la luz de cualquier tipo de contenido, incluyendo cine y televisión profesional.

 

Phonegap


 

La otra adquisición es Phone Gap. Un proyecto Open Source que permite desarrollar aplicaciones para dispositivos móviles de cualquiera de las plataformas mayoritarias; iOS, Android, Symbian y otras muchas a partir de código HTML5 y Java Script. Además de estas APIS estándar Phone Gap añade una seria de APIs específicas que permiten acceder al hardware del dispositivo como la cámara o el acelerómetro.

En realidad lo que hace Phone Gap es “empaquetar” el contenido HTML5+JS e una especie de navegador auto-contenido que se ejecuta en el dispositivo correspondiente sin ningún control que evidencie que se trata de una navegador.

Actualmente Dreamweaver CS5.5 ya incorpora esta tecnología para crear aplicaciones autónomas para Android e iOS. No obstante Phone Gap, como tecnología, seguirá siendo Open Source.