English Português

Uno de los efectos que más se estan usando ultimamente es la de usar reflejos, ya sea en texto o en imagenes. Es algo que va muy acorde con el filosofia de diseño de la web 2.0 y que seguramente seguira teniendo mucha aplicación. Bien pues en este minitutorial te diremos paso a paso como hacer este efecto en Photoshop.

  1. Lo primero que tenemos que hacer es tener nuestro elemento solo, sin fondo y lo podemos conseguir seleccionando el objeto y eliminando el fondo como vimos en el tutorial “Selecciones dificiles en Photoshop”. Para nuestro ejemplo usaremos el siguiente simpatico jarrito de tequila:
  2. Lo siguiente que tenemos que hacer es duplicar la capa, para esto damos click derecho sobre el nombre de la capa de nuestro jarro y en las opciones que se despliegan damos click en “Duplicar capa” (Duplicate Layer) y haceptamos el cuadro de dialogo que nos aparece.
  3. Nuestra nueva capa queda exactamente encima de la otra y lo que tenemos que hacer es reflejarla hacia abajo, para esto lo hacemos vamos al menú “editar” (edit) ahi a “transformar” (transform) y “Flip Vertical”. Lo que nos gira nuestra imagen 180°. Ahora hay que mover esa imagen de cabeza hacia abajo para que coinsida con la otra como sigue:
  4. Ahora creamos una nueva capa . En esta nueva capa, hacemos un gradiente de arriba hacia abajo en la zona que esta nuestro jarro de cabeza con se muestra en la figura:
  5. Ahora vamos a cargar la selección del gradiente, presionando la tecla Ctrl damos click justo sobre el icono de la capa que contiene el degradado.
  6. Como veras, nos aparece una selección. Ahora nos ubicamos en la capa del jarro reflejada y presionamos la tecla suprimir, con esto eliminamos en forma de gradiente parte de esa imagen. Y presionamos Crtl+D para desaparecer la selección.
  7. Como la capa del gradiente ya no la utilizaremos, nos ubicamos en dicha capa y la eliminamos con el boton del bote de basera bajo las capas.Y nos permite observar el resultado en la capa reflejada:

  8. Para mejorar el efecto podemos bajar la opacidad de la imagen, para este ejemplo usare 60% pero esta en función de la imagen y del resultado que busques. Juega con estos varios valores hasta que encuentres el que más te guste.
  9. Y el resultado final es el siguiente:Este metodología puede aplicarse de la misma forma para el texto con buenos resultados.
Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

Comentarios

  1. Joaquín / Hace 7 años /

    Hola Francisco, intento hacer este truco, pero no me sale ya que cuando duplico la capa, no me queda una arriba de la otra, me podrías decir cómo hacerlo?
    Saludos

    Responder a Joaquín →
  2. Francisco / Hace 7 años /

    Joaquín, al duplicar la capa se genera automaticamente encima de la original, de que modo la intentas duplicar?

    Responder a Francisco →
  3. Mendi / Hace 7 años /

    Gracias Francisco, para hacer reflejos usaba el comando “fundir imagen” de Fireworks, me gustó mucho este tutorial.

    Excelente Blog.

    Saludos

    Responder a Mendi →
  4. halı yıkama / Hace 6 años /

    thanks

    Responder a halı yıkama →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad