Tutorial: Desarrollar un GIF animado creando fotogramas a partir de sprites en Adobe Photoshop.




Tal vez la forma más fácil de hacer una animación sea partiendo de un sprite, como es este caso, obtenido de internet. Los sprites se llevan usando años, desde la programación de videojuegos (ejemplo), como es el caso de la saga de Mario Bros. Hoy en día se utilizan mucho en páginas webs, generalmente en formato .png y su ventaja reside en que se carga una sola imagen y se indican qué coordenadas de la imagen se van a visualizar en determinadas áreas (artículo de referencia). Por otra parte están las aplicaciones java de teléfonos móviles, que actúan de manera similar y aquí os muestro un ejemplo, donde encontraréis la imagen Helmo, el personaje del vídeo.

Pongo este otro sprite, en formato PNG, que contiene la animación del protagonista de Monkey Island: Guybrush Threepwood. Y este es el reto futuro que le dejo a mi colega Alex de Murcia, y a todo el que se anime, para que haga un GIF animado.

Páginas para editar fotografías online gratis

Photoshop Express

https://www.youtube.com/watch?v=PiE4bHZWHrs

Pixrl




SumoPaint




PicMagick

Befunky

https://www.youtube.com/watch?v=X7hxZN-owX4

 

Phixr




Splashup




Pixlr




PicMonkey




DrPic




Rollip.com




Ipiccy.com

https://www.youtube.com/watch?v=oAE1AFMvKd4

Vintagejs.com

Webresizer.com

 

Basado en un artículo original en http://www.dzoom.org.es/noticia-1776.html publicado el 17 de abril de 2008 por Jose Luis Rodríguez.

Visita a la web del ilusionista chileno

Hoy he dado en internet con la web de César Castillo Márquez, en Chile. Os recomiendo que hagáis una visita a http://www.elilusionista.cl/ y veáis calidad en ilustración, animación y retoque digital. Entre tanto, os adelante este divertido contenido de animación:




Dónde encontrar iconos gratuitos

He aquí una serie de sitios web que recomiendo para la búsqueda de iconos para web y confección de pequeños diseños. En la última fila aparecen tres que tienen contenidos de pago, si bien los pongo por su calidad de diseño.

FREE ICONS WEB FIND ICONS VISTA ICONS DRY ICONS ICONSPEDIA GRAPHICHIVE ICONS MYSITEMYWAY ICON SEEKER ICON DRAWER ICON ARCHIVE ICON HOT ICON FINDER MEZZOBLUE WIKIMEDIA COMMONS $ YOOTHEME $ ICON SHOCK $ YELLOW ICON

¿Qué medida uso para definir tamaño de texto en web?

Aquí pongo un ejemplo cuando nuestro navegador web utiliza una  fuente inicial de 12pt=16px=1em=100%. Por desgracia, esta medida se puede tomar como media legible, pero cada navegador distribuye opta por tipografías y estilos muy diferentes.

Mozilla Firefox,  Safari y Google Chrome (Times New Roman 16px); Internet Explorer (10 a 16px con  Arial, verdana y  Times New Roman); en Opera varían muchísimo sus estilos, utilizando mucho un los 13,5pt = 18px.

¿Qué ventajas tiene trabajar en medidas relativas? Básicamente que podamos observar un comportamiento web responsivo, es decir, todas las medidas varian en tamaño al mismo tiempo en función de la tipografía asignada por defecto a BODY.

La tendencia es tomar medidas em, pero en un artículo de Kyle Schaeffer señala las ventajas de utilizar porcentaje %.

Y si comparamos las representaciones de fuentes entre PC y Mac, debemos tener en cuenta el uso de familias tipográficas  parecidas (artículo de referencia).

Animaciones de videojuegos estilo años 80.




Es sencillamente espectacular cómo se puede llegar a recrear historias de videojuegos de los años 80 con un toque de humor y toda la tecnología disponible.