Usando Sketch 3 desea exportar un ícono, los íconos son 24x24 pero se ubican dentro de un área de 32x32.
He descubierto cómo hacerlo combinando dos capas diferentes, una 24x24 y la otra 32x32, pero es un proceso tedioso. Necesito hacer esto para cada ícono.
¿Hay un flujo de trabajo más rápido?
export
sketch-app
Ariel Seidman
fuente
fuente
Respuestas:
Presiona
A
para crear una mesa de trabajo , selecciona el tamaño (o establece el tuyo haciendo clic+
en la esquina inferior derecha) y comienza a exportar. No es necesario crear capas adicionales.fuente
En realidad es muy fácil si sabes cómo hacerlo :)
Supongamos que tiene un icono que es 24x24px y desea que el png sea 32x32px. Tienes que crear un corte sobre el icono. El segmento debe ser 32x32px. Luego, agrupe la rebanada y el icono juntos. Por último, pero no menos importante: haga clic en el segmento y en el inspector verá algo como esto:
Asegúrese de marcar "Exportar contenido del grupo únicamente". Las otras opciones deben estar desmarcadas.
De esta manera, exportará un png transparente, incluso si no hay un fondo transparente debajo del icono.
fuente
Si desea exportar solo la capa de iconos (24x24) simplemente arrastre la capa al escritorio.
fuente
Use esto para exportar sus activos. El problema con Sketch y la mayoría de los otros complementos es que descuida las capas invisibles durante la exportación. Como resultado, los límites invisibles no funcionan.
Incluso intenté disminuir la opacidad de un límite a 0 para intentar engañar a Sketch para que lo exportara. Pero la exportación nativa de Sketch no es tan ingenua.
Es posible que vea una horda de complementos de Sketch que ayudan a exportar activos para Android fácilmente. Pueden reducir los pasos involucrados, pero no resuelve el problema de los límites.
Este sí.
https://github.com/GeertWille/sketch-export-assets
Le permite exportar activos para iOS, Android y Windows para todas las resoluciones mientras mantiene los límites intactos.
Ahorra todos esos esfuerzos de mesa de trabajo.
fuente
Este método funcionó para mí: coloque la capa de corte de tamaño correcto sobre la capa en la que está su icono y asegúrese de que no estén agrupados .
Espero eso ayude
fuente
Pasé más tiempo del que hubiera tomado manualmente ir uno por uno, pero no me di por vencido y encontré una solución que funciona bien:
Espero que esto haya ayudado!
fuente
Se me ocurrió una solución alternativa que no implica la creación de mesas de trabajo separadas. Es un poco hacky, pero funcionó para mí. Quería que los iconos dentro de mi diseño fueran exportables en Zeplin. Por lo tanto, crear nuevas mesas de trabajo dificultaría a los desarrolladores encontrar los íconos.
Entonces hice el fondo cuadrado con 1% de opacidad con el modo de mezcla "Oscurecer". No puedes verlo en absoluto. Luego agrupé eso con el ícono e hice que el grupo fuera exportable. Súper simple
fuente