Exportieren eines Slice in Sketch mit transparentem Hintergrund

Mit Sketch 3 möchten Sie ein Symbol exportieren. Die Symbole selbst sind 24x24 groß, befinden sich jedoch in einem Bereich von 32x32.

Ich habe herausgefunden, wie das geht, indem ich zwei verschiedene Ebenen 24x24 und 32x32 kombiniert habe, aber es ist ein mühsamer Prozess. Ich muss dies für jedes einzelne Symbol tun.

Gibt es einen schnelleren Workflow?

Hit Azur Erstellung eines Artboard , wählen Sie die Größe (oder geben Sie Ihre eigenen , indem Sie auf den Button +in der rechten unteren Ecke) und starten Sie den Export. Es müssen keine zusätzlichen Ebenen erstellt werden.

Es ist eigentlich sehr einfach, wenn du weißt, wie es geht :)

Angenommen, Sie haben ein Symbol mit 24 x 24 Pixel und möchten, dass das PNG 32 x 32 Pixel groß ist. Sie müssen ein Slice über dem Symbol erstellen. Das Slice muss 32x32px sein. Gruppieren Sie dann das Segment und das Symbol. Last but not least: Klicken Sie auf das Slice und im Inspector sehen Sie so etwas:

Stellen Sie sicher, dass Sie "Nur Gruppeninhalte exportieren" aktivieren. Die anderen Optionen müssen deaktiviert sein.

Auf diese Weise exportieren Sie eine transparente PNG, auch wenn sich unter dem Symbol kein transparenter Hintergrund befindet.

Wenn Sie nur die Symbolebene (24x24) exportieren möchten, ziehen Sie die Ebene einfach auf den Desktop.

Verwenden Sie dies, um Ihre Assets zu exportieren. Das Problem mit Sketch selbst und den meisten anderen Plugins ist, dass beim Exportieren unsichtbare Ebenen vernachlässigt werden. Infolgedessen funktionieren unsichtbare Grenzen nicht.

Ich habe sogar versucht, die Deckkraft einer Schranke auf 0 zu verringern, um Sketch zum Exportieren zu bewegen. Aber der native Export von Sketch ist nicht so naiv.

Möglicherweise sehen Sie eine Horde von Sketch-Plugins, die beim Exportieren von Assets für Android auf einfache Weise helfen. Sie können die erforderlichen Schritte reduzieren, lösen jedoch nicht das Problem der Grenzen.

Dieser tut es.

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

Sie können Assets für iOS, Android und Windows für alle Auflösungen exportieren und dabei die Grenzen beibehalten.

Spart all diese Zeichenflächenbemühungen.

Diese Methode hat bei mir funktioniert: Platzieren Sie die richtige Größen-Slice-Ebene über der Ebene, auf der sich Ihr Symbol befindet, und stellen Sie sicher, dass sie nicht gruppiert sind .

Ich hoffe es hilft

Ich habe mehr Zeit damit verbracht, als manuell nacheinander zu arbeiten, aber ich habe nicht aufgegeben und eine Lösung gefunden, die gut funktioniert:

1. Kopieren Sie alle Symbole, die Sie exportieren möchten, in eine neue Datei
2. Konvertieren Sie sie in Symbole
3. Da sie zu Symbolen wurden, haben sie ihre eigenen Zeichenflächen (Sie müssen nur auf eines der Symbole doppelklicken, um zur Symbolseite zu gelangen).
4. Vergewissern Sie sich auf der Symbolseite, dass alle Symbole ausgeblendet sind. Ansicht> Ebenenliste> Alle Gruppen ausblenden und wählen Sie sie alle aus. Cmd + A
5. Jetzt können Sie weiter machen und alle exportieren
6. Voila! Wenn Sie sie richtig benannt haben, haben Sie sie auch in ordentlichen kleinen Ordnern

hoffe das hat geholfen!

Ich habe eine Problemumgehung gefunden, bei der keine separaten Zeichenflächen erstellt wurden. Es ist ein bisschen abgedreht, aber es hat bei mir funktioniert. Ich wollte, dass Symbole in meinem Design in Zeplin exportiert werden können. Das Erstellen neuer Zeichenflächen würde es Entwicklern daher erschweren, die Symbole zu finden.

Also habe ich den quadratischen Hintergrund mit dem Mischmodus "Abdunkeln" um 1% deckend gemacht. Sie können es überhaupt nicht sehen. Dann habe ich das mit dem Icon gruppiert und die Gruppe exportierbar gemacht. Super einfach.