Sketch Grundkurs

Pixeloptimierung vor dem Export

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Ansicht in Sketch kann vor dem Exportieren von Vektor auf Pixel umgestellt werden, um die Qualität von Grafiken besser zu beurteilen. Das betrifft insbesondere die Kantenschärfe beim Anti-Aliasing.

Transkript

Wir wollen uns nun anschauen, wie man möglichst präzise in Sketch arbeitet. Vor allem, wenn es nachher um den Export geht. Um dies zu demonstrieren, habe ich hier ein Rechteck aufgezogen, was in dem Fall nicht genau auf runden Pixeln basiert. Das heißt, wir sehen hier in dem Fall auf der y-Achse haben wir 0.6 und auf der Breite haben wir 0.4. An und für sich merkt man hier keinen Unterschied. Auch wenn ich jetzt mal hier ran zoome, sieht man eigentlich nicht, dass das Ergebnis hier irgendwie unschön wäre. Wenn wir etwas näher ranzoomen, dann wird irgendwann hier dieses Raster eingeblendet. Und hier an dem Raster können jetzt sehen, dass diese Oberkante nicht genau auf dem Raster liegt. Genauso auch auf der rechten Seite. Auch hier sehen wir, es liegt nicht genau auf dem Raster. Bei Vektoren ist das egal. Wenn man aber nachher das Ganze exportiert, dann arbeitet man ja pixelsbasiert und dann soll es möglichst präzise sein, weil es im Browser ja nachher auch entsprechend dargestellt wird. Und deswegen sollte man möglichst genau auf den Pixeln liegen. Was können wir machen? Wir können natürlich jetzt hingehen und die Werte ändern. Um aber erstmal zu sehen, wie das Ergebnis aussieht, wir sind ja jetzt hier in der Vektor-Ansicht, können sich hier bei Show Pixels die Pixel-Ansicht anzeigen. Genauso auch unter View Canvas Show Pixel Und dann sehen wir hier die Pixel eingeblendet und das Anti-Aliasing, das sind diese Zwischenwerte hier. Wie wir sehen, ist diese Karte nicht sauber. Wenn wir nach links scrollen, dann werden wir sehen, dass diese Kante sauber ist. Genauso auch, wenn ich nach unten scrolle, diese Kante hier ist in dem Fall nicht sauber. Diese und diese. Das liegt ganz einfach hier an den Werten. Wenn ich jetzt die Werte ändere, also hier den Wert jetzt auf Null setze, dann sehen wir, sitzen wir hier genau auf der Kante. Wenn ich die Breite auch auf Null setze, dann sitzen auch hier auf der Kante. Wenn wir jetzt noch mal uns das Rechteck von allen Seiten betrachten, dann sind die Kanten knackig scharf. Das Ganze geht aber auch leichter. Ich mache noch mal die Schritte rückgängig, so dass wir wieder diese ungeraden Werte haben. Was wir nämlich machen können ist, einfach das Objekt auswählen, und dann gehen wir über Das macht genau das Gleiche. Wie wir gesehen haben, werden hier dann auch die Kommastellen einfach auf- oder abgerundet. Und so kann man natürlich hingehen, in Windeseile alle Objekte, die man eingefügt hat, hier entsprechend anpassen oder direkt über einen Mausklick über Layer Round to Pixel Außerdem haben wir diese Einstellungen in den Voreinstellungen von Sketch, und zwar hier unter General. Wenn wir hier Häkchen setzen, Fit layers and points to pixel Auch beim Vergrößern und Verkleinern, auch beim Ausrichten, dann haben wir das Problem natürlich in Zukunft nicht mehr.

Sketch Grundkurs

Lernen Sie die grundlegende Bedienung von Sketch am Beispiel des UX-Designs einer App.

4 Std. 45 min (54 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.04.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!