Crear íconos Material Design en Sketch

Contenido del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:17

Crear íconos Material Design en Sketch

Curso de Sketch 2015

Clase 5 de 19

Clase 5 / 19

Recursos

Crear un ícono profesional en Sketch es más simple de lo que parece cuando dominas técnicas clave de Material Design. Aquí aprenderás a replicar el logo de Platzi, convertir trazos en objetos, usar máscaras y construir una long shadow precisa a 45°, manteniendo capas limpias y preparadas para exportar.

¿Qué vas a conseguir y con qué herramientas?

Con este flujo producirás un ícono coherente con Material Design y listo para prototipo. Usarás herramientas como rotate, lock layer, vector, Vectorize Stroke, color picker, edición de nodos, opacidad, radios, duplicado con Option + Shift, máscaras con mask, gradientes, y Scale para escalar sin perder propiedades.

Replicar el logo de Platzi y convertirlo en ícono dentro de un rectángulo con sombra.
Vectorizar strokes para manipular formas como objetos reales.
Construir long shadow a 45° con gradiente de opacidad.
Enmascarar para recortar sombras con precisión.
Organizar layers con nombres, grupos y artboards.
Escalar con Scale para exportes limpios.

¿Cómo replicar el logo y convertirlo en ícono Material Design?

Para lograr un resultado limpio y fiel al estilo, prepara el logo, vectoriza trazos y ajusta esquinas y colores con precisión.

¿Cómo preparar y vectorizar el trazado?

Primero ordena la base para no arrastrar errores.

Importa el bitmap y gíralo con rotate manteniendo Shift para base plana.
Bloquea la capa con lock layer para evitar seleccionar el bitmap por accidente.
Traza el eje central con la herramienta vector (tecla V) y usa Shift para ángulo recto.
Aumenta el grosor del trazo; luego conviértelo en objeto: Layer > Paths > Vectorize Stroke.
Edita nodos con doble clic para ajustar proporciones con guías activas.

¿Cómo ajustar color, esquinas y opacidad?

El parecido depende de detalles finos.

Aplica color con color picker.
Redondea esquinas editando el radio en los nodos.
Usa opacidad más baja para comparar contra el bitmap bloqueado.
Recupera con Ctrl/Command + Z si una esquina se deforma.

¿Cómo crear el long shadow y enmascarar?

La sombra larga es un rasgo clásico en Material Design y debe ser limpia y controlada.

Envuelve el logo en un rectángulo con radio y color Platzi; mueve el logo al frente.
Duplica el logo con Option + Shift y rota a 45°.
Crea un rectángulo auxiliar, rota a 45°, y ajústalo para tocar extremos del logotipo.
Baja la opacidad al 20% desde el inspector para ver fondo y forma mientras alineas.
Ajusta vértices con nodos (doble clic) hasta cubrir el área de sombra deseada.
Trae el ícono al frente: verás la sombra, pero será demasiado larga.
Enmascara: coloca arriba el objeto que enmascara, quítale fill y bordes si hereda propiedades, selecciona ambos y aplica mask.
Define el fill de la sombra como gradiente: negro 20% a negro 0% (transparente), orientado a 45°.
Resultado: ícono con long shadow consistente y editable dentro de su carpeta (renómbrala a “Ícono”).

¿Cómo organizar layers y escalar sin perder propiedades?

Mantener orden y preparar archivos para exportar acelera el trabajo individual y en equipo.

¿Cómo limpiar el documento y agrupar?

Evita el caos de capas con acciones rápidas.

Mueve el ícono terminado a un artboard para separarlo de elementos sueltos.
Agrupa y renombra para claridad: por ejemplo, “TweetBot” o “Ícono”.
Elimina restos que no necesites.
Consejo clave: capas limpias, equipo alineado.

¿Cómo usar Scale para exportar sin deformar?

Cuando escalas arrastrando, se rompen radios y bordes. Con Scale todo se mantiene.

Selecciona el objeto y usa Scale para definir el tamaño final (por ejemplo, 1024).
Verifica que radios, trazos y gradientes se conservan.
Ideal para preparar export sin re-trabajos.

¿Qué práctica extra fortalece tus habilidades?

Un ejercicio recomendado es recrear el ícono de fotos de iOS/macOS.

Practicarás gradientes, opacidades y objetos compuestos.
Comparte tu versión y recibe retroalimentación.

¿Tienes dudas o quieres mostrar tu proceso y resultados? Cuéntalo en comentarios y comparte tu ícono terminado.

Resumen

¿Qué vas a conseguir y con qué herramientas?

Replicar el logo de Platzi y convertirlo en ícono dentro de un rectángulo con sombra.
Vectorizar strokes para manipular formas como objetos reales.
Construir long shadow a 45° con gradiente de opacidad.
Enmascarar para recortar sombras con precisión.
Organizar layers con nombres, grupos y artboards.
Escalar con Scale para exportes limpios.

¿Cómo replicar el logo y convertirlo en ícono Material Design?

Para lograr un resultado limpio y fiel al estilo, prepara el logo, vectoriza trazos y ajusta esquinas y colores con precisión.

¿Cómo preparar y vectorizar el trazado?

Primero ordena la base para no arrastrar errores.

Importa el bitmap y gíralo con rotate manteniendo Shift para base plana.
Bloquea la capa con lock layer para evitar seleccionar el bitmap por accidente.
Traza el eje central con la herramienta vector (tecla V) y usa Shift para ángulo recto.
Aumenta el grosor del trazo; luego conviértelo en objeto: Layer > Paths > Vectorize Stroke.
Edita nodos con doble clic para ajustar proporciones con guías activas.

¿Cómo ajustar color, esquinas y opacidad?

El parecido depende de detalles finos.

Aplica color con color picker.
Redondea esquinas editando el radio en los nodos.
Usa opacidad más baja para comparar contra el bitmap bloqueado.
Recupera con Ctrl/Command + Z si una esquina se deforma.

¿Cómo crear el long shadow y enmascarar?

La sombra larga es un rasgo clásico en Material Design y debe ser limpia y controlada.

Envuelve el logo en un rectángulo con radio y color Platzi; mueve el logo al frente.
Duplica el logo con Option + Shift y rota a 45°.
Crea un rectángulo auxiliar, rota a 45°, y ajústalo para tocar extremos del logotipo.
Baja la opacidad al 20% desde el inspector para ver fondo y forma mientras alineas.
Ajusta vértices con nodos (doble clic) hasta cubrir el área de sombra deseada.
Trae el ícono al frente: verás la sombra, pero será demasiado larga.
Enmascara: coloca arriba el objeto que enmascara, quítale fill y bordes si hereda propiedades, selecciona ambos y aplica mask.
Define el fill de la sombra como gradiente: negro 20% a negro 0% (transparente), orientado a 45°.
Resultado: ícono con long shadow consistente y editable dentro de su carpeta (renómbrala a “Ícono”).

¿Cómo organizar layers y escalar sin perder propiedades?

Mantener orden y preparar archivos para exportar acelera el trabajo individual y en equipo.

¿Cómo limpiar el documento y agrupar?

Evita el caos de capas con acciones rápidas.

Mueve el ícono terminado a un artboard para separarlo de elementos sueltos.
Agrupa y renombra para claridad: por ejemplo, “TweetBot” o “Ícono”.
Elimina restos que no necesites.
Consejo clave: capas limpias, equipo alineado.

¿Cómo usar Scale para exportar sin deformar?

Cuando escalas arrastrando, se rompen radios y bordes. Con Scale todo se mantiene.

Selecciona el objeto y usa Scale para definir el tamaño final (por ejemplo, 1024).
Verifica que radios, trazos y gradientes se conservan.
Ideal para preparar export sin re-trabajos.

¿Qué práctica extra fortalece tus habilidades?

Un ejercicio recomendado es recrear el ícono de fotos de iOS/macOS.

Practicarás gradientes, opacidades y objetos compuestos.
Comparte tu versión y recibe retroalimentación.

¿Tienes dudas o quieres mostrar tu proceso y resultados? Cuéntalo en comentarios y comparte tu ícono terminado.

Introducción a Sketch

Flujo de trabajo moderno con Sketch

Curso de Sketch para diseño web desde cero

Interface de Sketch: canvas infinito y artboards

Replicar el ícono de Tweetbot en Sketch

Crear íconos Material Design en Sketch

Diseñando para Web

Sketch con Illustrator: compatibilidad y plugins

Sketch, Prototipados y Optimización para Web

Preguntas antes de Clase

Sketch + InVision: prototipos con hover automático

Recursos gratuitos para acelerar diseño Sketch

Cómo crear tab bar iOS en Sketch e InVision

Símbolos en Sketch: cómo identificarlos y usarlos

[Extra] Creando prototipos con Marvel y Sketch

[Extra] Cómo pasar un archivo de Sketch a Zeplin

Presenta un proyecto de Sketch a tu Cliente

Sketch para interfaces: unidades, símbolos y exportación

Creación de portafolios responsivos en Sketch

Cómo hacer portafolios responsivos en Sketch

Proyecto: Sitio Responsive III

Crear grids para proyectos con mucho contenido

Crear íconos Material Design en Sketch

Progreso del curso

Introducción a Sketch

Sketch, Prototipados y Optimización para Web

Presenta un proyecto de Sketch a tu Cliente

Recursos

Recursos