Hola!
En esta ocasión, quiero compartir con ustedes un sencillo tutorial de adobe illustrator, para dar un aspecto flat a los íconos en nuestras interfaces.
Antes de empezar, quiero comentar algunos aspectos del diseño Flat. Actualmente es la tendencia más notable tanto en diseño de aplicaciones, interfaces de sitios web, sistemas operativos y cada vez se va integrando más al entorno de los seres humanos. Si bien, el Flat design, es el resultado de aplicar el paradigma del minimalismo en el diseño, ya que reduce al mínimo los elementos para la creación de los objetos en una interface. Al mismo tiempo, se puede decir que los íconos estilo flat, son una variante de los íconos de perspectiva de un punto, ya que como su nombre indica, solo existe un punto de fuga en el diseño. De los tipos de íconos según los puntos de fuga(perspectiva), hablaré en próximas entradas.
Ahora bien, comencemos con el ejercicio.
Paso 1
Creamos un nuevo documento en Illustrator de 500px x 500px. Trabajar con illustrator permite un mejor manejo de la escalabilidad de íconos (los formatos SVG tienen gran soporte hoy en día).
Paso 2:
Creamos un nuevo rectángulo redondeado con los valores de la imagen.
Paso 3:
Para los colores de los íconos he utilizado la herramienta Flat UI Colors dónde se nos presenta una gama de colores en brillo y contraste bastante simple. Rellenamos el cuadro con el color #3498db.
Paso 4:
A continuación colocamos el ícono que vamos a utilizar, en este caso, he creado un ícono de usuario, que he formato utilizando dos círculos y buscatrazos.
Paso 5:
A continuación duplicamos el icono y le damos un color negro para diferenciar la sombra principal.
Paso 6:
El siguiente paso es duplicar nuevamente nuestra ícono y moverlo unos cuantos pixeles hacia abajo, dependiendo de la dirección y el tamaño que vamos a querer de la sombra.
Paso 7:
En el panel de herramientas, nos dirigimos a la herramienta fusión (W) y hacemos click en el objeto superior y luego en el inferior de la sombra. Por defecto, nos creará la fusión con los valores predeterminados.
Paso 8:
Seleccionamos nuestra fusión y hacemos doble click en la herramienta fusión, hasta que aparezca el cuadro de diálogo que vemos en la imagen. Para este tutorial he usado un valor de 100 en la casilla de espacios especificados.
Paso 9:
Ahora bien, seleccionamos la primera forma de la fusión y le aplicamos un color de relleno de #2980b9.
Paso 10:
Para la forma inferior de la fusión, utilizamos un color de relleno igual al color base del cuadro del ícono, creando el efecto difuminado.
Paso 11:
Ahora enviamos la sombra detrás de el ícono original y con ello terminamos.
Consejos
Cuando se crea un set de íconos, lo principal es la consistencia, de manera que es preferible utilizar la misma paleta de colores, ángulos y tamaños para la sombras.
Espero les sirva.
Tus comentarios son el mejor aporte. :)
0 comentarios:
Publicar un comentario