Photoshop Espineli | El blog de Juanjo Costa

Señoras y señores, niños y niñas, os presento a Lomax, la nueva mascota que dará vida mi blog.

Tengo que tener mucho cuidado con él. A la que me descuido está pegándose un lingotazo y acaba cómo siempre, más borracho que una cuba. Además ya es borracho de por sí el tio nació así con un alto porcentaje de alcohol en la sangre, así que cuidármelo que no se me desmadre.

Estaba ya algo cansado de la anterior mascota (que por cierto se me olvidó presentar, se llamaba Cactilio) que era del juego final fantasy 8 para el que no lo sepa o no haya jugado, era un enemigo que se dedicaba a acribillar a los personajes que controlábamos con sus terribles púas. Pues como estaba algo aburrido y algo cansado de la anterior mascota blogueril, dicho y hecho me he cogido mi programa preferido para de photoshop, el Macromedia fireworks 8 del que ya hablé en su día, y he editado un Gif muy majo, que aunque a simple vista está estático (más que nada por que yo soy de los que cuando entran en un blog no le gusta mucho ver un gif animado, así que si puedo lo evito) cuando se pasa el puntero por encima el personaje cobra movimiento/vida, un efecto que a mi parecer es muy llamativo para según que blogs, quizás un día de estos decida no poner nada, o simplemente una sin tanto “ritmo”.

De paso voy a explicar el proceso por si alguien le apetece hacerlo, cogiendo un gif animado para crear el mismo efecto que yo he conseguido, o sea de pasar a estar estático a cobrar movimiento.

Bien, pues primero del todo tenemos que cogernos (por ej.) el Macromedia fireworks mismo podría valernos.

Tendremos que abrir la imágen gif, nos fijamos en el alto y ancho que están escritos en píxeles (px) la que yo he usado era de 55px de ancho y 61px de alto, para tomar una referencia lo explicaré usando mi imágen. Hacemos un copia y pega de la imágen para abrirla en una ventana nueva (todo esto dentro del M.Fireworks) y le damos el doble de alto de la imágen gif y si es posible y más recomendable aumentarle el alto 3 ó 4 píxeles, para que tengan algo de separación entre ambas. De modo que quedaría algo así como esto:

De modo que la imágen estática tendría que ir arriba y las animadas abajo, en mi caso las tengo que repetir 8 veces ya que son 8 los movimientos en total del personaje Lomax. Esto se realiza fácilmente gracias a los fotogramas:

Ahora sólo tenemos que teniendo dos imágenes abiertas por pestañas (la original y la que tiene el doble de alto) ir seleccionando fotograma por fotograma e ir copiando y pegando cada nueva animación de fotograma, volvemos con Lomax cómo ejemplo:

Como veis la estática está arriba, mientras que los fotogramas están abajo, la forma más fácil para no liarnos es coger el gif original darle el doble de alto más 3 píxeles de más, de jar la animada abajo y coger un fotograma (debe ser el primero o el último) estático, y ponerlo arriba, el de arriba hay que repetirlo en cada fotograma si no veremos una imágen parpadeante.

Por último hay que buscar (normalmente en “Archivo”) y guardar el Gif en formato “Exportar”. Nos quedaría cómo resultado final una imágen así:

Ahora os preguntaréis ¿y que hago yo con una imágen asi doble? Pues es muy sencillo, ahora viene la parte técnica a la que aplicaremos el Html y Css a nuestro blog, en el que usaremos un efecto llamado Rollover.

Cómo Css, (funciona tanto en WordPress cómo en Blogger) sería esto, creando un div con el alto y ancho de la imágen inicial, o sea sin ser el doble de alto en píxeles.

#mosca { width: 54px; height: 61px; position:fixed; bottom:0px; right:0px; }

Y el Html esto otro (dependiendo de si es en WordPress o Blogger se aplica de una forma o de otra, pero yo no voy a entrar en tantos detalles)

Con esto lograríamos mostrar en el blog, una imágen estática, que al pasar el puntero del ratón por encima se vuelve animada, eso es todo,espero no haberme extendido mucho y que a alguien le sea útil.

Si os ha gustado Lomax, que resulta que es uno de los personajes de un videojuego de Playstation (cómo un Lemmings moderno) tenéis algunas animaciones más en este enlace, en la zona píxeles.