Screenshot Stern-Form in Sketch
thomaskekeisen.de
Aus dem Leben eines Bildschirmarbyters
Achtung: Diese Seite enthält Partner- und Werbe-Links. Daher ist diese Seite im Gesamten als Werbeanzeige zu verstehen!
Gleichgroße Dateien mit Slices
In meinem Artikel Mein Entwickler-Software-Stack: Eine Übersicht hatte ich schon kurz über das Grafikprogramm Sketch gesprochen, das ich seither als Ersatz für das eingestellte Fireworks von Adobe verwende. Da ich mir anfangs schwer getan habe, stets gleichgroße Icons mit "transparentem Rand", also ebenfalls exportiertem Weißraum zu erzeugen, hier eine kurze Anleitung.
1: Ausgangssituation
Prinzipiell kann jede Form oder jeder Bildausschnitt exportiert werden. In meinem Beispiel habe ich einen einfachen Stern mit einer Größe von 180x180px erstellt.
2: Slice erstellen
Um einen neuen Slice zu erstellen, genügt ein Klick auf das "+" im oberen linken Eck mit der anschließenden Auswahl von "Slice". Alternativ kann auch die Taste S gedrückt werden.
Screenshot Neuen Slice hinzufügen
3: Slice positionieren
Der so neu erstellte Slice muss jetzt mit der Maus entsprechend positioniert werden. Ich habe in meinem Beispiel die Größe auf 400x400px gestellt und den Slice mittig zu meinem Stern positioniert.
In der Vorschau auf der rechten Seite, die erscheint, wenn der Slice ausgewählt ist, sollte jetzt bereits einen transparenten Hintergrund darstellen.
Screenshot Slice positionieren
4: Optionale Hintergrundfarbe setzen
Alternativ kann für den neu erstellten Slice auch eine Hintergrundfarbe gesetzt werden. Dies ist besonders praktisch, wenn ein Icon oder eine Grafik mit einem Klick mit verschiedenen Hintergrundfarben exportiert werden soll. In diesem Fall muss dann lediglich für jede Farbe ein weiterer Slice angelegt werden.
Screenshot Slice-Hintergrundfarbe einstellen
5: Slice exportieren
Ist der Slice korrekt eingestellt, kann jetzt einfach unten rechts auf "Export" geklickt werden um das, was sich "hinter" dem Slice befindet im entsprechend ausgewählten Format zu exportieren.
Et voilà! In meinem Fall würde jetzt eine 400x400px -große PNG-Datei mit transparentem Hintergrund und einem 180x180px -großen Stern in der Mitte exportiert werden.
Weiterführend kann auch auf der Webseite von Sketch eine schöne Slice-Dokumentation gefunden werden.
Screenshot Slice exportieren