Seguro que desde hace no mucho tiempo has empezado a ver como se han popularizado logos y headers de páginas web que presentan efectos como el que se encuentra en esta imagen:

Este acabado se consigue mediante la aplicación de un efecto que podríamos denominar “espejo + degradado”, ya que consiste básicamente en aplicar el efecto espejo a la imagen original y realizar un degradado sobre la imagen reflejada para que la intensidad de ésta sea menor.
Como seguro que has podido ver en multitud de webs, es una técnica bastante extendida y que siempre viene bien conocer.
Por ello, aquí te presento los pasos básicos, como siempre con Gimp, para que puedas conseguir este acabado sorprendente en aquellos logos o rótulos que lo desees:
- Abre la imagen original con Gimp, en mi caso he optado por la mascota de Linux, Tux:

- Incrementa el tamaño del lienzo para que al aplicar el efecto pueda verse la imagen entera (Imagen -> Tamaño del lienzo…). Las dimensiones más adecuadas para la ampliación será mantener el ancho y duplicar el alto, pero todo depende de a qué distancia desees colocar la imagen reflejada. Ten en cuenta que al modificar las dimensiones del lienzo debes quitar el bloqueo de relación de aspecto (icono en forma de “ocho” que está a la derecha de los campos de introducción de la dimensión), para poder modificar el alto, sin que ello influya en el ancho.

- Una vez ampliado el lienzo, accede al diálogo de capas, duplica la capa existente (Capa -> Duplicar la capa)y gírala verticalmente (Capa -> Transformar -> Voltear verticalmente).

- Selecciona la herramienta Mover capas y selecciones
en la ventana principal de Gimp y desplaza la capa duplicada hacia abajo para conseguir el efecto espejo. Para desplazar la capa emplea los cursores y así podrás colocar la capa con precisión.

Hasta aquí has aplicado lo que podríamos denominar “efecto espejo”, pero si continúas con los siguientes pasos verás como la aplicación de un degradado le proporciona un efecto mucho más atractivo a tu imagen.
- Para aplicar el degradado crea una máscara de capa blanca sobre la capa que tiene la imagen invertida (Capa -> Máscara -> Añadir máscara de capa… -> blanca (opacidad total)).
- Selecciona la herramienta Degradado
con el negro como color de frente y el blanco como color de fondo y despliega el degradado desde la cabeza del pingüino hasta la base (por supuesto, estoy hablando de la imagen reflejada, ya que la original permanece intacta a lo largo de todo el efecto).

La herramienta Degradado se utiliza haciendo click en la zona origen desde la que desees aplicar el degradado y arrastrando el ratón hasta la zona destino. En este caso, cuanto más agresivo desees que sea el degradado más larga deberás hacer la línea mediante la que se establece el degradado. Haz varias pruebas y deshaz tantas veces como sea necesario hasta que obtengas el resultado que deseas.
- Una vez establecido el degradado, es el momento de que ajustes la opacidad de la capa de máscara para que el nivel de intensidad de la imagen reflejada sea el adecuado. Para ello accede al diálogo de Capas (Diálogos -> Capas) y establece el nivel de opacidad de la capa al valor que desees (yo he optado por 40).

- En este punto ya podría considerarse el efecto terminado, sin embargo, la aplicación de un cierto desenfoque sobre la imagen reflejada le aporta un toque muy atractivo. Para ello aplícale un filtro de desenfoque gausiano (Filtros -> Desenfoque [Blur] -> Desenfoque gausiano… [Blur]) eligiendo el grado de desenfoque que consideres más apropiado, yo he optado por 20 px.

Y con esto ya habrías aplicado a tu imagen el efecto “espejo + degradado”. Este efecto es bastante útil, no sólo por el acabado que ofrece (incluso no aplicando todos los pasos, ya que podrías no haber aplicado el desenfoque o ni siquiera haber modificado el nivel de opacidad y haberte quedado satisfecho con el resultado alcanzado), sino por el uso de herramientas muy importantes como el Degradado o la aplicación de una Máscara de capa, herramientas que muy probablemente empiecen, si no lo eran ya, a ser utilizadas por ti en otros trabajitos.
Y nada más, ahora te toca a ti aplicar el efecto a tus imágenes, iconos, logos, rótulos… Espero tus comentarios.












11 Comentarios ↓
Don alfredo el 18 de Febrero de 2007 a las 17:52
Creo que me he adelantado, pues sin ir más lejos puse el otro día este efecto en “lasexta” Eso si, tomo nota de los distintos gradientes de preciosidad que se pueden obtener. Buen trabajo
Jaluro el 18 de Febrero de 2007 a las 18:41
Ajam, lo acabo de ver. Concretamente se trata de esta imagen.
Pues nada, si has encontrado algo que te haya gustado en el artículo trata de mejorar tu imagen, si es posible,
Ciao
miguel el 19 de Febrero de 2007 a las 14:14
Ahí te va un videotutorial sobre cómo hacer lo propio con Photoshop http://www.youtube.com/watch?v=-pOkaC4eHsE
Jaluro el 19 de Febrero de 2007 a las 22:40
Desde luego que una imagen vale más que mil palabras y si encima es en movimiento como el videotutorial, jeje.
Muchas gracias, es una buena forma de apoyar la explicación. Aunque los pasos son ligeramente diferentes, es una buena forma de hacerse una idea del proceso global.
Muchas gracias de nuevo Miguel.
Ubuntu Life » Blog Archive » GIMP - Efectos para tu web el 30 de Junio de 2007 a las 9:10
[...] empecemos…Uno de los efectos que mas me gustan es el Reflejo aqui os copio uno de los mejores tutoriales que me encontrado en la [...]
Tutorial de Gimp para efectos en Web « Linuxeando… por un mundo sin ventanas el 30 de Junio de 2007 a las 17:29
[...] empecemos…Uno de los efectos que mas me gustan es el Reflejo aqui os copio uno de los mejores tutoriales que me encontrado en la [...]
Oscar dominguez el 10 de Septiembre de 2007 a las 19:10
Quiero hacer este efecto en flash!! como le hago
?
Jaluro el 10 de Septiembre de 2007 a las 22:40
Hola Oscar dominguez, no sé a qué te refieres con hacer este efecto en flash.
Pero lo que puedes hacer es seguir los pasos aquí indicados y a la hora de guardarlo, elegir un formato compatible con el programa que utilices para producir flash.
No estoy nada puesto en la creación de ficheros flash, pero si detallas más tu pregunta, quizás alguien pueda ayudarte.
Ciao y suerte
Letras de canciones el 18 de Marzo de 2008 a las 16:11
yo soy nuevo en estas cosas de diseño y este tutorial me ha dado varios tips muy buenos, graci.
Bruno el 22 de Marzo de 2008 a las 19:15
Esta Muy bueno el tutorial,
seguire los pasos ahora ^^
gracias chao
LuliS el 31 de Mayo de 2008 a las 16:56
eii esta re copadoo el effectoo..al igual qe el de superponer una foto…
muchas gracias van a mis paginas favoritas
Deja tu comentario
Por favor, no uses un lenguaje inapropiado, spam o cualquier otro tipo de conducta inadecuada. De lo contrario me reservo el derecho de eliminar y/o modificar aquellos comentarios que contengan algo de lo citado anteriormente.