Tutorial: Sombras modernas

24 Feb

Últimamente veo en muchas webs, un tipo de sombra que realza el contenido dando un efecto de que este tiene un cierto relieve respecto al interfaz de la página. Os voy a mostrar como conseguir este resultado facilmente con Photoshop.

Como es dificil explicarlo, mejor os dejo ver un ejemplo y nos metemos en harina.

Sombras modernas

Sombras modernas

  1. Para empezar, abrimos un nuevo documento (el mio es de 400 x 250), creamos un óvalo de color negro, mas o menos alargado y le aplicamos un gaussian blur (Desenfoque gausiano).

    Gaussian Blur 5px

    Gaussian Blur 5px

  2. A continuación en una capa nueva, creamos un rectangulo del mismo color que el fondo y lo colocamos encima del ovalo hasta que tengamos la sombra a nuestro gusto, o si no tenemos gusto, simplemente nos copiamos de la imagen.

    Sombra lateral

    Sombra lateral

  3. Una vez tenemos la sombra creada, solo es cuestión de duplicar la capa, y darle la vuelta horizontalmente para crear el mismo efecto en el lado opuesto, como ya hemos visto en el resultado final, al inicio del tutorial.

Consejos:

  • El efecto es mas vistoso cuando el fondo y el color del interfaz son el mismo o tonalidades del mismo color.
  • El efecto es igualmente efectivo en formato horizontal
  • Si sois vagos, una vez creado el efecto lo podeis convertir a spray con Photoshop.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: