/Cómo Transformar Rápidamente Iconos Aburridos En Piezas Maestras Originales

Cómo Transformar Rápidamente Iconos Aburridos En Piezas Maestras Originales

Compartir

Los iconos son una parte integral de nuestro diseño. Son pistas visuales para indicar varias acciones, y pueden darle identidad única a un producto. Pero muchas veces elegimos celebrar su importancia al descargar los mismos conjuntos de iconos y hacer cada icono para cada sitio web igual al anterior. ¡Qué forma de tratar algo de tanta importancia!

Para resolver este problema, he creado una guía para ayudar a diseñadores a añadir profundidad visual a sus iconos y hacerlos únicos para el producto que representan. Este tutorial está ampliamente inspirado por la guía de Google Material Design.

Los Principios De Google Material Design

Cómo dice Google, “material es una metáfora”. Toma prestado pistas visuales del mundo físico y crea un lenguaje visual nuevo para estandarizar todas sus interfaces. Los principios de Material Design son accesibles y que puedan ser rápidamente aplicados para mejorar el atractivo visual y de experiencia de usuario de varias interfaces.

1. Usa Formas Geométricas Simples y Colores Impactantes

La tendencia del diseño “flat” (o plano) de Material Design, el cual también está basado en formas planas, seleccionó con cuidado qué forma representaba mejor el elemento el cual el icono está representando. Carefully select which shape best represents the element that the icon is portraying.

2. Añade Profundidad Con Sombras Sutiles

Una sombra paralela es una buena forma de engañar al ojo y darle un sentido de profundidad a tu diseño, porque simula el efecto de la luz sobre un objeto.

Nótese que la luz natural es muchas veces simulada como si viniera de la esquina superior izquierda.

3. Usa Matices De Colores Para Reemplazar Sombras Paralelas

Cada color es usado en múltiples matices para simular profundidad visual. Por ejemplo, en el icono de Gmail, puedes ver diferentes matices de rojo que son usados para la forma de la M, y un tono más oscuro para el gris es utilizada debajo para la solapa del sobre.

Cómo Puedes Hacerlo: Demostraciones Paso A Paso

Aplicaremos una versión más simple del estilo Material Design, y para cada icono, usaremos sólo tres tonos del mismo color y mantendremos las sombras planas y cortas, en vez de el efecto común de una “sombra larga”.

Recursos

  • Descarga los diez iconos con los que estaremos trabajando a continuación aquí.
  • Revisa el conjunto gratuito de iconos entero de Google aquí.

Comencemos.

1. Ícono De Rayo

Parte el icono en dos, y haz que la parte de arriba parezca elevada. Puedes lograr esto al crear un efecto de sombra en la intersección de ambas formas. Usa tres tonos de amarillo – el más claro arriba, uno más oscuro abajo, y conserva el que sea más oscuro aún para la sombra.

2. Ícono De Chat

En el ícono original, tenemos un poco del efecto de sombra en el espacio entre las dos burbujas, y ahí es donde crearás una sombra.

En la forma de abajo, selecciona el punto formando el ángulo derecho en el espacio, y muévelo hacia arriba a la izquierda hasta que formes un ángulo derecho en la esquina superior izquierda.

Duplica la burbuja de arriba y mueve la copia hacia abajo y a la derecha. Selecciona la copia y la forma de burbuja debajo, usa “Buscatrazos” para crear una división, y mantén sólo una intersección con la copia anterior.

Ahora puedes aplicar las tres sombras de azul y poner la más clara arriba, una más oscura en el medio, y la segunda más oscura debajo.

Via: toptal.com