Share
Das Exportieren von Assets aus Ihren Designs ist eine übliche Aufgabe. Sie beginnen mit dem Erstellen und Vorbereiten Ihrer Grafiken, wählen dann das Exportformat aus, legen die Eigenschaften fest und fertig. Die Exportwerkzeuge in Sketch 3 gehören zu den besten Funktionen. Sketch 3 hilft uns dabei, Inhalte auf so viele verschiedene Arten zu exportieren, dass ich überzeugt bin, dass Sie Ihren Workflow verbessern werden, indem Sie diesen Artikel lesen.
Wir werden einige grundlegende Beispiele verwenden, um die verschiedenen Exportoptionen von Sketch 3 vollständig zu verstehen. Ich helfe Ihnen dabei zu entscheiden, welche Methoden für Sie am besten sind, je nachdem, woran Sie gerade arbeiten.
Wenn Sie Sketch für einen Großteil Ihrer Entwurfsarbeit verwenden, können Sie übrigens viel Zeit sparen, indem Sie einige der Sketch-Vorlagen von Envato Market verwenden. Sie können Sketch-Dateien mit vorgefertigten, anpassbaren Versionen der am häufigsten verwendeten Oberflächenelemente herunterladen, sodass Sie sie schnell an Ihre eigenen Bedürfnisse anpassen können, anstatt jedes Mal von vorne zu beginnen.
SkizzenvorlagenSkizze öffnen. Wir brauchen ein Objekt auf unserer Leinwand, also erstellen wir eine Vektorform. Gehe zu Einfügen> Form und wählen Sie eines der verfügbaren Tools aus. Für dieses Beispiel werde ich ein erstellen 300x300px Quadrat mit Einfügen> Form> Rechteck (R).
MerkenSie können ein zufälliges Rechteck zeichnen und dessen Eigenschaften über das Symbol anpassen Inspektor Panel.
Gehen Sie jetzt zum Datei Speisekarte. Sie sollten das sehen Export Option wurde aktiviert. In der Symbolleiste können Sie auf klicken Export Symbol auch, also fahren Sie fort und klicken Sie darauf. Sie werden einige Änderungen auf der Leinwand, in der Ebenenliste und im Inspektorfenster feststellen. Was ist passiert?
Im Ebenenfenster hat Sketch automatisch ein neues erstellt Scheibe mit den gleichen Abmessungen und Position des Objekts, das wir auf der Leinwand haben. Slices sind spezielle Ebenen, mit denen wir Bereiche der Leinwand in Dateien exportieren können. Der gesamte Inhalt eines Bereichs, der von einem Slice definiert wird, wird in diese Datei aufgenommen. Sie können so viele Slices wie gewünscht haben Einfügen> Slice (S) Möglichkeit. Jedes Slice wird in eine andere Datei exportiert.
Wenn vorhanden, zeigen das Messersymbol und die gestrichelte Kontur an, dass die betreffende Ebene ein Schnitt ist. Sie können Position, Breite und Höhe wie jedes andere Objekt in Sketch ändern. Sie können sie direkt auf der Leinwand verschieben oder skalieren oder ihre Eigenschaften mit dem Inspektor ändern.
Wenn Sie über den Inspektor sprechen, werfen Sie einen Blick darauf, während Sie das Slice ausgewählt lassen. Wie bereits gesagt, können wir die Position, Breite und Höhe der Slices ändern. Wir sehen aber auch einige neue Optionen:
Neben dem Export Beschriftung finden wir verschiedene Dropdown- und Eingabefelder:
Accentsconagua
@ 2x Suffix für doppelt große Bilder..png, .jpg, .tiff, .pdf, .eps und .svg. Standardmäßig sind die Sketch-Exportoptionen auf festgelegt Größe = 1x (100% Originalgröße), keine Suffixe und .png Format. Belassen Sie diese Optionen mit den Standardwerten oder spielen Sie mit ihnen, wenn Sie möchten.
Spitze: Sketch unterstützt das Exportieren in beliebige Größen. Machen Sie sich also keine Sorgen, wenn Sie beispielsweise 100x-Export oder 1,75x-Export benötigen. Sie können auch den Wert der Pixel gefolgt von eingeben w für die Breite und h für die Höhe, um Assets in beliebiger Größe zu exportieren. Geben Sie zum Beispiel ein 60w Im Export-Tool und Sketch wird Ihr Asset bei 60px Breite exportiert und die Höhe entsprechend skaliert. Gleichermaßen, wenn Sie schreiben 60 gefolgt von h Sketch exportiert Ihr Asset mit einer Höhe von 60px und skaliert die Breite proportional.
Denken Sie nun daran, Ihr Slice ausgewählt zu lassen, und schauen Sie sich den unteren Bereich des Inspektorfensters an. Sie sehen einen großen und einen kleineren Button daneben. Der erste Schritt zeigt den letzten Exportschritt. Der andere bietet Ihnen einige zusätzliche Optionen, um Ihre Datei direkt an verschiedene Anwendungen anzuhängen. Klicken Sie auf die Schaltflächen, um zu sehen, was passiert, wenn Sie den Exportvorgang abschließen.
Spitze: Benennen Sie die Slice-Ebene um, um dem exportierten Inhalt automatisch einen Dateinamen zuzuweisen.Ein schöner Trick isteinen Schrägstrich hinzufügen / innerhalb des Namens, Sketch anweisenUnterordner für Sie erstellen. Die folgenden Bilder veranschaulichen den Punkt deutlicher:
Benennen Sie die Slice-Ebene in einen Schrägstrich um.
Exportiere diese Ebene
Die resultierende OrdnerstrukturÖffne das export_what_you_wantDatei, die ich als Anhang zu diesem Tutorial bereitgestellt habe.
Hinweis: Sie benötigen Sketch 3, um es zu öffnen, aber wenn Sie eine ältere Version verwenden, machen Sie sich keine Sorgen. Es sollte nicht zu schwierig sein, den Inhalt selbst zu replizieren. Denken Sie jedoch daran, dass einige der Optionen, die wir behandeln, für Sie möglicherweise nicht verfügbar sind. Siehe folgendes Bild als Referenz:
Sie sehen einige gruppierte Objekte, eine Zeichenfläche und andere Elemente, die direkt auf der Leinwand außerhalb der Zeichenfläche platziert sind.
Gehe zu Datei> Exportieren. Alternativ können Sie auf klicken Export Symbol in der Symbolleiste.
Wenn Sie zum ersten Mal auf Exportieren klicken, geht Sketch davon aus, dass Sie Ihre Zeichenflächen exportieren möchten, und macht sie automatisch exportierbar. Dabei werden alle Objekte verworfen draußen die Zeichenbretter. Sie werden auch feststellen, dass es keine gibt Schichtschicht verfügbar in der Schicht Liste.
Zeichenflächen in Sketch 3 können direkt exportiert werden, ohne dass zusätzliche Scheiben hinzugefügt werden müssen. Wenn Sie Ihrem Dokument neue Zeichenflächen hinzufügen, fügen Sie diesen Zeichenflächen einfach eine Exportgröße hinzu, indem Sie auf klicken + Symbol neben dem Exportetikett in der Inspektor Panel, wobei die Zeichenflächen ausgewählt bleiben. Nächstes Mal, wenn Sie auf klicken Export Symbol, Sketch enthält auch diese Zeichenflächen.
Kommen wir zu unserer Akte zurück. Jetzt exportieren wir eine einzelne Ebene. Wählen Sie das blaue Quadrat direkt oder über die Ebenenliste aus. Schauen Sie unten im Inspektorfenster nach: Sie sehen eine neue Option Exportierbar machen.Klick es.
Der Inspektor zeigt an, dass Sie ein Bild in 1x (Originalgröße) ohne Suffix und standardmäßig in exportieren .png Format.
Schauen Sie sich die Ebenenliste an und beachten Sie, dass das Symbol in der Liste für die blaue quadratische Ebene ein kleines Messersymbol erhalten hat. Dies bedeutet, dass die Ebene exportierbar ist. Nächstes Mal gehst du nach Datei> Exportieren oder klicken Sie auf Export Von der Symbolleiste aus wird diese neue exportierbare Ebene auch dort unter Ihren normalen Ebenenebenen angezeigt.
Richten Sie Ihre Aufmerksamkeit auf das violette Quadrat. Wir werden das nicht verwenden Exportierbar machen Option diesmal erstellen wir automatisch ein Slice.
Gehe zu Einfügen> Slice.Beachten Sie, wie sich der Cursor ändert, wenn Sie sich über den Objekten auf der Leinwand bewegen. Erinnere dich an das Messersymbol? Klicken das lila Quadrat. Ein neues Slice wird mit derselben Position, Breite und Höhe angezeigt!
Spitze: Mit derselben Methode können Sie auch Slices für ganze Gruppen erstellen. Und für einzelne Scheiben in einer Gruppe drücken Sie die Befehl Wenn Sie den Mauszeiger über das Objekt bewegen, das Sie in Scheiben schneiden möchten.
Ok, wir haben Scheiben verwendet und die Exportierbar machen Möglichkeit. Wir haben bereits gesehen, was passiert, wenn wir Artboards haben ... aber wir haben nicht gesehen, was mit dem passiert Nur Gruppeninhalt exportieren Option noch!
Gehe zu Einfügen> Slice Bewegen Sie den Cursor über die orangefarbenen und grünen Quadrate, die bereits gruppiert sind. Klicken Sie auf sie. Sie haben gerade ein neues Slice für die Gruppe erstellt.
Verschieben Sie die Slice-Ebene in die Gruppe orange + grün.
Wenn Sie sich den Inspector ansehen, wenn das Slice ausgewählt ist, sehen Sie das Nur Gruppeninhalt exportieren Option kann jetzt ausgewählt werden. Aber prüfe es noch nicht!
An diesem Punkt des Verfahrens ist es sehr nützlich, die Bildvorschau zu überprüfen, um zu sehen, welcher Inhalt in unsere Datei aufgenommen wird.
Überprüf den Nur Gruppeninhalt exportieren Möglichkeit.
Sieh den Unterschied? Die rote Ellipse wurde aus der Vorschau entfernt.
Wann Nur Gruppeninhalt exportieren istWenn diese Option aktiviert ist, werden die Ebenen nur innerhalb einer eigenen Gruppe exportiert, und der Inhalt außerhalb der Ebene wird verworfen. Ebenen hinter der Gruppe werden ebenfalls verworfen. Dies ist eine sehr nützliche Option für große Designs mit vielen überlappenden Objekten!
Spitze: Wenn Sie viele Schichten in Ihrer Ebenenliste haben und sich nicht von ihnen stören lassen möchten, können Sie sie mit dem kleinen Messerknopf am unteren Rand der Ebenenliste vorübergehend deaktivieren.
Wie wir gezeigt haben, können wir Inhalte auf viele Arten exportieren. Welches solltest du wählen? Nun, es kommt darauf an, was Sie brauchen. Zum Beispiel die Exportierbar machen Diese Option ist sehr nützlich, um Symbole oder einzelne Ebenen zu exportieren. Ich empfehle, beim Exportieren des gesamten Dokuments Slices oder Zeichenflächen zu erstellen (dies ist jedoch nur ein Vorschlag)..
Bei der Verwendung von Sketch 3 ist zu beachten, dass Sie mehrere Bilder gleichzeitig exportieren können. Ich meine nicht, dass Sie verschiedene Bilder aus verschiedenen Schnitten oder Zeichenflächen exportieren können (obwohl dies möglich ist). Ich meine damit, dass Sie verschiedene Versionen gleichzeitig aus einer Ebene oder einem Segment exportieren können.
Fügen Sie ein Stück aus dem türkisfarbenen Quadrat hinzu oder machen Sie es durch das Inspektorfenster exportierbar. Auf jeden Fall sollten im Exportfenster neue Exporteinstellungen mit Standardwerten angezeigt werden.
Drücke den + Symbol direkt über der Dropdown-Liste. Sie haben Sketch soeben gesagt, dass Sie zwei verschiedene Exportdateien aus einer einzigen Ebene benötigen! Klicken Sie so oft auf das Symbol, wie Sie möchten, um jede gewünschte Größe oder jedes gewünschte Format zu erhalten.
Vielleicht denken Sie, wir haben alles über die Exportoptionen von Sketch erfahren, aber es gibt noch mehr! Hier sind einige zusätzliche Tipps:
Wenn Sie eine beliebige Ebene aus der Liste auf den Desktop oder in eine andere App ziehen, wird sie automatisch für Sie exportiert .png Format. Halten Sie die Option (⌥) Taste, um beim Herausziehen in das PDF-Format zu wechseln.
Wir haben über native Funktionen in Sketch gesprochen, aber es gibt eine sehr aktive Community, die ständig Plugins entwickelt. Der Sketch Generator ist beispielsweise eine völlig neue Art, Inhalte mit Sketch zu exportieren. Sie sollten sich dieses Plugin insbesondere dann ansehen, wenn Sie die Adobe Generator-Funktion von Photoshop CC bereits ausprobiert haben.
Skizzenbefehle sind eine Sammlung von Skriptbefehlen. Einige von ihnen beziehen sich auf Exportaufgaben, daher ist dies eine weitere Erweiterung, die ich Ihnen empfehlen sollte.
All die Dinge, die ich in diesem Tutorial behandelt habe, haben Sie mit den Fähigkeiten ausgestattet, um vollständig zu verstehen, wie Inhalte in Sketch 3 exportiert werden. Wenn Sie Fragen zum Exportieren oder Sketch im Allgemeinen haben, lassen Sie unten einen Kommentar. Ich helfe Ihnen gerne weiter!
