Crear íconos Material Design en Sketch

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.