Esta entrada es una colaboración de Toptal
Los iconos son una parte integral del diseño pues son pistas visuales que indican acciones al usuario y muy a menudo pueden definir la identidad de un producto o marca.
Usa formas geométricas simples
La tendencia de diseños planos inspiro Material design, que también está basado en formas planas y simples. Selecciona con cuidado la mejor forma que represente el elemento para el cual destinas un icono.
Agrega profundidad con sombras sutiles.
Las sombras paralelas son una buena forma de engañar al ojo y darle profundidad al icono.
Utiliza matices en lugar de sombras
Los matices de un color también pueden utilizarse para simular sombras. Nótese los distintos tonos de rojo en la M.
Recursos
Descarga los 10 iconos con los que trabajaremos aquí. Documento Adobe Illustrator.
Revisa el catálogo completo de iconos gratuitos de google aquí.
Cómo hacerlo paso a paso.
A continuación hay una lista de imágenes gif animadas que te darán 10 ejemplos de cómo transformar iconos, dale tiempo a la página de cargar. En todos los casos se hará uso del panel pathfinder de Illustrator.
1. Icono de Rayo.
Divide el icono original en dos y haz que la parte superior parezca levantada. Puedes lograr esto colocando un efecto de sombra en la unión de las dos partes.
2. Icono de chat.
En el icono original tenemos una especie de sombra o espacio en blanco entre las dos burbujas de mensajes, allí es donde crearemos la sombra.
3. Icono de check
Para este icono crearemos un efecto de papel doblado.
4. Icono de bandera
A esta bandera le daremos un sencillo efecto para que parezca doblada por el viento.
5. Icono de corazón.
Utiliza 3 matices de rosa.
6. Icono de montañas.
Utiliza 3 matices de marrón.
7. Icono de gente.
Duplicando la porción inferior y con solos 2 tonos puedes lograr que la silueta de la izquierda se vea mas cercana que la de la derecha.
8. Icono de cuadro flotante.
Similar al anterior, duplica, reubica, elimina lo restante y colorea.
9. Icono de carta.
Redimensiona el espacio superior de la carta para crear una hoja de papel.
10. Icono de torta.
Duplica la porción inferior y desplazala hacia arriba para cubrir el espacio en blanco, elimina lo que sobre de esa porción duplicada. Luego aplica 3 matices de naranja.
Ahora que ya tienes la idea comienza a experimentar. Visita el post original de Toptal para instrucciones detalladas. Hasta la próxima, comparte.
Comentarios
Publicar un comentario