10 Tipps zum präzisen Entwerfen in Sketch
Mit Sketch erhalten Sie das Beste aus beiden Welten: skalierbare Vektoren und präzise Pixelsteuerung. Mit den Werkzeugen in Sketch können Sie scharfe Kanten und definierte, ausgewogene Konturen erstellen, die die Grundlage für ein großartiges Design bilden.
Sketch kann Ihre Formen automatisch an Pixelkanten ausrichten und bietet Ihnen außerdem die Möglichkeit, jedes Pixel in der Vorschau anzuzeigen und zu bearbeiten, um sicherzustellen, dass Ihre Exporte scharf sind. Dies ist besonders wichtig, wenn Sie Assets für die verschiedenen verfügbaren Bildschirmgrößen, Pixeldichten und Plattformen vorbereiten.
Wenn Sie mit Vektorformen arbeiten und Elemente exportieren, möchten Sie möglicherweise sicherstellen, dass alle Formen und Ebenen am Pixelraster des Dokuments ausgerichtet sind, um unscharfe Kanten zu vermeiden, die sich aus Bruchzahlen ergeben können.
Wenn Sie den Inspektor im Auge behalten und Tools wie Pixelanpassung und Pixelzoom nutzen, können Sie auf einfache Weise präzise bearbeiten. In diesem Tutorial werden wir einige meiner Lieblingswerkzeuge für das Entwerfen mit Pixelperfektion untersuchen.
01. Voreingestellte Zeichenflächen
Beim Entwerfen für Mobilgeräte denke ich immer an die verschiedenen Bildschirmgrößen und Auflösungen. Um die Zeit des ursprünglichen iPhone gab es nur eine Bildschirmgröße und nur eine Auflösung: Ein Punkt entsprach einem Pixel. Mit Retina-Displays auf dem iPhone und den verschiedenen Pixeldichten für Android sieht es heute komplexer aus.
Mit den voreingestellten Zeichenflächen von Sketch, ein wenig Planung und einfacher Mathematik ist es jedoch ein Kinderspiel, Elemente für mehrere Bildschirmgrößen und Pixeldichten vorzubereiten.
02. Design bei 1x
Als Apple das erste Retina-iPhone vorstellte, begannen viele Designer sofort mit der Entwicklung in 2-facher Auflösung und reduzierten diese nachträglich auf 1-fache Auflösung für ältere Telefone. Als das iPhone 6 Plus ankam, wurde dies jedoch problematisch.
Wenn Sie etwas Pixelgenaues mit 2x entwerfen, besteht die Möglichkeit, dass es bei einer Vergrößerung um das 1,5-fache an einer Bruchposition landet. Viele Designer haben wieder mit 1x entworfen, denn wenn Vektordimensionen mit 2 oder 3 skaliert werden, werden sie garantiert nicht als Bruchziffern angezeigt.
03. Inspektor
Der erste Weg, um festzustellen, ob Ihre Entwürfe präzise sind, besteht darin, ihre Positions- und Größenwerte zu kennen. Der Inspektor ist die Hauptbefehlszentrale für Ihr Skizzendokument. Es enthält alle Eigenschaften und Details für eine ausgewählte Form oder Ebene. Dies ist Ihre Anlaufstelle, um Unvollkommenheiten in Form von Bruchzahlen zu erkennen.
04. Positions- und Größenwerte
Bruchzahlen verursachen das Rendern von Subpixeln - der Hauptgrund dafür, dass Ihr exportiertes Bitmap-Asset möglicherweise unscharfe Kanten aufweist. Sie können dies manuell beheben: Bearbeiten Sie einfach die Werte für Position und Größe zu vollständigen Zahlen.
Das Arbeiten mit Formen innerhalb von Gruppen kann mühsam sein. Mit cmd + Click können Sie jedoch jede Form direkt auswählen und ihre Werte bearbeiten.
05. Pixel anzeigen
Scheinbar glatte Vektorkurven und Kanten können täuschen. Wenn Sie Pixel anzeigen aktivieren, können Sie jedes einzelne Pixel in Ihrem Dokument anzeigen. Diese Einstellung kann über Ansicht> aktiviert werden
Leinwand> Pixel anzeigen (Umschalt + P).
Was Sie sehen, entspricht dem Exportieren des Bilds in PNG und dem anschließenden Vergrößern. Beachten Sie, dass bei einem 100-prozentigen Zoom (tatsächliche Größe) kein Unterschied zwischen diesen beiden Modi besteht. Wenn Sie jedoch weiter hineinzoomen, wird der Pixel werden sichtbar sein.
06. Pixelraster anzeigen
Wenn Sie einen Hinweis darauf erhalten möchten, wie Ihr Design beim Export aussehen wird, aber keine großen, verschwommenen Pixel betrachten möchten, ist der Pixelzoom Ihr Freund. Stellen Sie sicher, dass Pixelraster anzeigen aktiviert ist, indem Sie auf Ansicht> Leinwand> Pixelraster anzeigen (Umschalt + X) klicken.
Mit Pixel anzeigen Raster können Sie zwischen unscharfen Pixeln mit geringem Kontrast unterscheiden, die sonst nicht sichtbar wären. In Kombination mit Pixel anzeigen werden alle Kanten angezeigt, die nicht am Pixelraster ausgerichtet sind.
07. Auf die nächste Pixelkante runden
Round to Nearest Pixel Edge wird als die beste versteckte Funktion in Sketch bezeichnet und behebt viele Fehler bei der Pixelausrichtung. Sobald Sie eine Vektorform mit Subpixelwerten entdeckt haben, können Sie die Form auswählen und dann Ebene> Auf nächste Pixelkante runden auswählen.
Durch Skizzieren werden die Kanten automatisch am Pixelraster ausgerichtet. Dies funktioniert sowohl für die Werte Position als auch Size. Mit dieser Funktion können Sie schnell sicherstellen, dass Ihre Designs konsistent sind, insbesondere beim Importieren von Symbolen.
08. Vektorpunkte bearbeiten
Wenn Ihre Form nicht wie gewünscht ausgerichtet ist, können Sie die einzelnen Vektorpunkte bearbeiten, indem Sie die Form auswählen und in der Symbolleiste auf Bearbeiten klicken. Dadurch werden Ihre Vektorbearbeitungsoptionen im Inspektor aufgerufen, wo Sie zwischen vier verschiedenen Punktmodi wechseln und eine Pixelrundungseinstellung auswählen können.
09. Runde bis volle Pixel
Pixelpräzision ist bei Bedarf gut, aber Sie müssen sich nicht einschränken. Wenn Sie beispielsweise kleine Symbole entwerfen, können Sie die Pixelrundungseinstellung für vollständige Bewegungsfreiheit der Punkte deaktivieren. Wenn Sie jedoch sicherstellen möchten, dass die Kanten Ihrer Form konsistent sind, hilft es, runde bis volle (oder halbe) Pixel zu aktivieren.
10. Pixelanpassung
Eine globale Einstellung, die von Anfang an die Pixelgenauigkeit gewährleistet, ist die Einstellung für die Pixelanpassung unter Skizze> Einstellungen ...> Registerkarte Allgemein> Pixelanpassung. Diese Einstellung stellt sicher, dass jede Ebene, die Sie einfügen oder deren Größe ändern, auf einer Vollpixelkante endet (mit Ausnahme der Drehung).
Wenn Sie durch die mangelnde Freiheit des Pixelrasters frustriert sind, können Sie die Pixelanpassung bei Bedarf deaktivieren.
Das Entwerfen für Pixelperfektion ist für viele Designer eine wichtige Praxis. Diese Präzision ist sehr wichtig, insbesondere wenn Sie Ihre Designs für ein sauberes und scharfes Rendering zukunftssicher machen möchten. Trotzdem können Sie diese Regel durchaus brechen, wenn Sie völlige Bewegungsfreiheit wünschen.
Das ist es, was ich an Sketch liebe: Es bietet eine einzigartige Mischung aus Flexibilität und präziser Pixelsteuerung. Wenn Sie Sketch noch nicht ausprobiert haben, laden Sie jetzt die kostenlose Testversion herunter.
Dieser Artikel wurde ursprünglich in veröffentlicht Netzmagazin Ausgabe 278.
