Crear iconos conforme al Long Shadow Desing con Inkscape

Hace ya algún tiempo que el diseño flat se ha convertido en un estándar, y es necesario introducir nuevos conceptos como es el caso del Long Shadow Design. Esta técnica consiste en que los objetos muestran sombras desproporcionadamente largas.

Aunque está pendiente de que haga una completa revisión a My-Weather-Indicator para Android, incorporando algunas opciones como puede ser la selección de fondo, o sobre todo la reorganización, no he podido resistirme a actualizar el icono de la aplicación con este nuevo estilo de diseño.

Así que, ¿como aplicar Long Shadow Design a tus iconos?. En mi caso yo me he decantado por Inkscape.

Long Shadow Desing - imagen 1

Long Shadow Desing con Inkscape

Como ya he comentado en mas de una ocasión, Inkscape se ha convertido en mi herramienta de diseño preferida a la hora de realizar iconos, tanto para las aplicaciones que implemento para Ubuntu como para Android, puesto que me permite escalar estos iconos sin perder resolución en ellos.

Long Shadow Desing paso a paso

Ya sea que incorporemos nuestro icono en un círculo o en un cuadrado, los pasos a seguir para crear un icono con diseño Long Shadow Desing son exactamente los mismos. Para este ejemplo, me voy a decantar por una letra, que convertiré a trazo para poder utilizar intersecciones con las guías.

El primer paso a realizar es activar ajuste (%), ajustar nodos, trayectos y tiradores y ajustar otros puntos, tal y como puedes ver en la siguiente imagen,

Long Shadow Desing - imagen 2

A continuación añadimos a 45º que delimiten nuestra figura para conocer las sombras que debemos crear,

Long Shadow Desing - imagen 3

Esta guía la colocaremos en los vértices de nuestro trazo y lo giramos a -45º

Long Shadow Desing - imagen 4

Añadimos tantas guías como sean necesarias de forma que nos aseguremos que cubren por completo nuestro trayecto.

Long Shadow Desing - imagen 5

A continuación dibujamos curvas Bézier y líneas rectas, hasta salirnos fuera del círculo,

Long Shadow Desing - imagen 6

Cambiamos las características del trayecto, de forma que no tenga trazo pero si relleno, tal y como puedes ver en la siguiente imagen,

Long Shadow Desing - imagen 7

Duplicamos el círculo (ctrl+D), de forma que quedaré encima de todas las otras figuras/trayectos, y realizamos una intersección entre esta y la sombra,

Long Shadow Desing - imagen 8

Una vez realizada la intersección ya estaremos a punto de alcanzar nuestro objetivo, puesto que como ves la sombra está encima de nuestra imagen,

Long Shadow Desing - imagen 9

Nos queda bajar la sombra por debajo de la letra M, para que tenga un efecto mas realista, de forma que el resultado final es el que puedes ver en la siguiente imagen,

Long Shadow Desing - imagen 10

Y de esta forma ya tenemos nuestro icono con Long Shadow Desing


Más información,

  • Gabriel Ibáñez

    Excelente tutorial para los que comenzamos en el universo de Inkscape, muchas gracias

    • Hola Gabriel,

      Estoy preparando algún tutorial mas, en principio para los lunes. Si estás interesado en alguna temática en concreto me dices.

      Muchas gracias y un saludo.

  • Miguel Os

    Muchas gracias por este tutorial. Me gusta mucho este estilo de iconos así que seguramente lo aplicaré.

    • Hola Miguel Os,

      El primero puede resultar relativamente complicado, pero cuando llevas dos o tres la cosa es realmente sencilla, y el resultado es muy, pero que muy aparente.

      Gracias y un saludo.

  • Pingback: Aplicaciones de escritorio en Ubuntu GNOME y otros sabores()