Esportazione di una porzione in Sketch con sfondo trasparente intorno

Utilizzando Sketch 3 vuoi esportare un'icona, le icone stesse sono 24x24 ma si trovano all'interno di un'area di 32x32.

Ho capito come farlo combinando due diversi livelli uno 24x24 e l'altro 32x32 ma è un processo noioso. Devo farlo per ogni singola icona.

C'è un flusso di lavoro più veloce?

Premi Aper creare una tavola da disegno , seleziona la dimensione (o imposta la tua facendo clic su +in basso a destra) e inizia l'esportazione. Non è necessario creare livelli aggiuntivi.

In realtà è molto semplice se sai come farlo :)

Supponi di avere un'icona che è 24x24px e vuoi che il png sia 32x32px. Devi creare una sezione sopra l'icona. La sezione deve essere 32x32px. Quindi raggruppare la fetta e l'icona insieme. Ultimo ma non meno importante: fai clic sulla sezione e nell'ispettore vedrai qualcosa del genere:

Assicurati di selezionare "Esporta solo i contenuti del gruppo". Le altre opzioni devono essere deselezionate.

In questo modo, esporrai un png trasparente, anche se non c'è uno sfondo trasparente sotto l'icona.

Se vuoi esportare solo il livello icona (24x24), trascina il livello sul desktop.

Usalo per esportare le tue risorse. Il problema con Sketch stesso e la maggior parte degli altri plugin è che trascura i livelli invisibili durante l'esportazione. Di conseguenza, i limiti invisibili non funzionano.

Ho anche provato a ridurre l'opacità di un limite a 0, quindi prova a ingannare Sketch per esportarlo. Ma l'esportazione nativa di Sketch non è così ingenua.

Potresti vedere un'orda di plugin di Sketch che aiutano a esportare facilmente risorse per Android. Potrebbero ridurre i passaggi coinvolti, ma non risolve il problema dei limiti.

Questo lo fa.

https://github.com/GeertWille/sketch-export-assets

Ti consente di esportare risorse per iOS, Android e Windows per tutte le risoluzioni mantenendo intatti i limiti.

Salva tutti gli sforzi della tavola da disegno.

Questo metodo ha funzionato per me: posiziona il layer della dimensione corretta sopra il layer su cui si trova l'icona e assicurati che non siano raggruppati .

Spero che sia d'aiuto

Ho trascorso più tempo di quanto ci sarebbe voluto manualmente per andare uno per uno, ma non mi sono arreso e ho trovato una soluzione che funziona bene:

1. Copia tutte le icone che desideri esportare in un nuovo file
2. Converti in simboli
3. Da quando sono diventati simboli avranno le loro tavole da disegno (devi solo fare doppio clic su uno dei simboli per accedere alla pagina dei simboli)
4. Quando sei nella pagina dei simboli assicurati che tutti i simboli siano compressi Visualizza> Elenco livelli> Comprimi tutti i gruppi e selezionali tutti cmd + A
5. Ora puoi andare avanti e selezionare rendere esportabile fine esportarli tutti
6. Ecco! Se li hai nominati correttamente, li avrai anche in piccole cartelle ordinate

spero che questo abbia aiutato!

Mi è venuta una soluzione alternativa che non prevedeva la creazione di tavole da disegno separate. È un po 'confuso, ma ha funzionato per me. Volevo che le icone all'interno del mio progetto fossero esportabili in Zeplin. Quindi creare nuove tavole da disegno renderebbe più difficile per gli sviluppatori trovare le icone.

Così ho realizzato lo sfondo quadrato all'1% di opacità con la modalità di fusione "Scurisci". Non puoi vederlo affatto. Poi l'ho raggruppato con l'icona e ho reso il gruppo esportabile. Super semplice.