Un usuario llamado Osvaldo me ha preguntado cómo lograr el efecto de reflejo que se ve en algunas imagenes de mi blog. Para lograr este efecto pueden usar javascript, pueden usar un plugin para su wordpress que les instale el javascript automaticamente, o, el método que yo prefiero, editar la imagen directamente usando algún editor gráfico.
¿Por qué prefiero este método? Bueno, es más ligero, más rápido en cargar, no requiere de terceras tecnologías para funcionar y simplemente me entretiene más. Cada quien como se acomode.
Usando reflection.js
Para lograr el efecto con el reflection.js, debes incluir el archivo hasta arriba de tu web:
y luego agregar el atributo class="reflect" a tu imagen:
Usando WP Wetfloor
Si, por otro lado, prefieres el plugin WP Wetfloor, solo debes instalarlo y luego agregar una clase a tu imagen. Esta clase debe tener el alto y ancho especificado de la siguiente manera:
donde los ## deben ser cambiados por el número que deseas agregar.
Creando el efecto en Fireworks
Y bueno, si prefieres editar la imagen directamente, aquí dejo un pequeñísimo tutorial para lograrlo. Para lograr este efecto abre la imagen que deseas reflejar. Despues cambia el tamaño del canvas para que sea un poco más alta de la imagen original.
Ya con nuestro canvas más alto vamos a copiar la imagen original. Simplemente seleccionala y presiona control+c y luego control+v para pegarla. Esta copia colocala justo debajo de la original. Ahora vamos a invertirla. Para lograrlo debes dar click derecho sobre la imagen -> Transform -> Flip Vertical.
Con esto tendremos algo así:
Ya con la imagen invertida, habrá que cambiar la opacidad de la misma. Baja la opacidad a un 70%-80%. Depende de tu gusto y del color de fondo.
Ahora solo nos queda crear el gradiente degradado. En Fireworks es fácil. Solo selecciona la imagen invertida y ve a Commands -> Creative -> Fade Image.
Y en la ventana que sale después, selecciona el que va de abajo hacia arriba:
¡Eso es todo! Ahora tienes tu imagen con reflejo:
Solo una pequeña recomendación: no abusen de este efecto. Se ve bonito y es fácil abusar del mismo, traten de no hacerlo. ¡Suerte!
Yo lo hago de una manera muy similar en Photoshop ñ_ñ, igual, este efecto es muy usado hoy en día y no puede faltar.
Joer, que simple en Fireworks. Yo hice un tutorial para Photoshop que me ocupó un poco más... jeje
Sigue poniendo tutoriales de estos chulos
Muy bueno.. aunque por las prisas mejor implemente el script, aunque no queda tan bien como hacerlo uno mismo..
Muy interesante este turorial, lo puse a prueba y me funciono de lujo, muchasgracias, saludos
[...] Reflexo Uma das principais coisas com o mundinho web 2.0 é o efeito de reflexo nos logos, existem tutoriais por ai que ensinam até no Paintbrush como fazer o efeito, mais caso goste de personalizar existe um javascript que faz isso por você [...]
Increiblemente, pero cierto, llevo ya tiempo creando este efecto en Firoworks, pero hasta ahora me entero como se hace comodios manda.
MUCHAS GRACIAS.. FELICIDADES!
Interesante, estaba buscando una idea asi, gracias =D