¿Cómo puedo crear iconos Long Shadows?

¿Cómo puedo crear iconos Long Shadows?

Cómo puedo crear iconos Long Shadows 1

Los iconos Long Shadows están muy de moda, incluso dentro de la gran moda de los diseños Flat el uso de sombras planas tienen un gran número de seguidores que aplican el efecto a gran variedad de elementos y así logran mayor presencia, principalmente iconos pequeños para la interfaz del usuario.

La técnica para crear iconos con sombras largas no es nueva, en realidad ya se usa hace bastante tiempo en fotografía. Suele aplicarse a imágenes donde el objetivo es lograr mayor dramatismo o emociones cargadas de pasión.

¿Quieres crear tus propios iconos Long Shadows? Una buena forma es utilizar el programa Adobe Illustrator y acceder a la opción Blend Tool. Primero crearemos las formas y luego las duplicaremos y las moveremos, para lograr el efecto de inclinación de entre 45º y 135º. El truco está en utilizar la paleta de colores para diferenciar cual de los iconos será la sombra y luego cambiar la posición de los ejes X e Y. Con la opción Blend crearemos un vínculo entre ambas figuras y luego recortaremos ese espacio, aplicaremos gradientes de color para lograr una sombra más realista y listo, el resultado será nuestro icono sombreado al estilo Long Shadows.

Otra forma es utilizar el método Pathfinder. Es un proceso un tanto más complejo pero a la vez ofrece resultados más precisos. Lo primero que hay que hacer es crear un rectángulo con la misma altura del diámetro del elemento del icono. Luego se recorta una porción de esta figura del tamaño deseado para la sombra.

Cómo puedo crear iconos Long Shadows 2

Existen otras alternativas como Photoshop Actions o incluso el sencillo efecto Long Shadows en CSS3, pero si quieres lograrlo de forma manual ahora ya tienes dos maneras para empezar a crear tus propios paquetes de iconos con Long Shadows.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>