thomaskekeisen.de

Aus dem Leben eines Bildschirmarbyters

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.

screenshot: Stern-Form in Sketch

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

Teilen

Kommentare