Share
Was Sie erstellen werdenSketch, von den netten Leuten bei Bohemian Coding, ist ein hervorragendes Programm für das Interface-Design. In diesem Tutorial für Anfänger werden Sie mit dem Entwurf von Sketch vertraut gemacht. Sie benötigen keine Vorkenntnisse mit dem Programm, sondern nur etwas Zeit, um etwas Neues zu lernen.
Ich zeige Ihnen, wie Sie eine einfache Zeichenfläche einrichten, wie Sie mit grundlegenden Werkzeugen, booleschen Operationen, dem Inspektorfenster und der Ebenenliste Formen erstellen. Wir werden sehen, wie Sie Eigenschaften ändern, Ebenen organisieren, Bilder importieren und andere nützliche Aspekte des Workflow eines Sketch-Designers.
Beginnen wir mit dem Erstellen eines neuen Dokuments. Haben Sie Sketch 3 bereits geöffnet? Okay, das ist alles was du tun musst! Lassen Sie mich erklären; Standardmäßig bietet Sketch eine unendliche Arbeitsfläche, auf der Sie arbeiten können. Sie können mit dem Erstellen von Elementen beginnen, ohne Angst zu haben, dass der Platz leer wird.
Gehen wir noch einen Schritt weiter und erstellen Sie eine Zeichenfläche. Mit Zeichenflächen können Sie feste Rahmen auf der unendlichen Leinwand von Sketch erstellen.
Um eine neue Zeichenfläche zu erstellen, gehen Sie zu Einfügen> Zeichenfläche (EIN) aus der Symbolleiste oder im Hauptmenü.Klicken und ziehen Sie in die Leinwand von Sketch. Sie werden feststellen, wie Sketch die Breiten- und Höhenwerte anzeigt. Ein ... kreieren 600 x 800 Pixel artboard.
Spitze: Wir können beliebig viele Zeichenflächen erstellen. Wir können auch den Namen der Zeichenfläche im ändern Layer-Liste auf der linken Seite des Bildschirms oder ändern Sie seine Position und Abmessungen mit der Taste Inspektor Panel auf der rechten Seite. Löschen Sie Zeichenflächen, indem Sie auf die Supr oder Löschen Taste, wenn die Zeichenfläche ausgewählt ist.
Zum Beispiel verwenden wir die Inspektor die Position der Zeichenfläche in ändern X = 0 Y = 0. Alternativ können Sie die Zeichenfläche einfach an diese Position ziehen.
Spitze: Gehe zu Ansicht> Raster anzeigen um das mit Sketch gelieferte Standardraster zu aktivieren. Es hilft, Objekte genau so zu positionieren, wie Sie es möchten.
Jetzt ändern wir die Zeichenfarbe. Dies hilft bei den folgenden Schritten. Wählen Sie Ihre Zeichenfläche aus und werfen Sie einen Blick auf die Inspektor Panel. Überprüf den Hintergrundfarbe Option und klicken Sie auf das Farbfeld rechts. Ein Farbwähler zeigt verschiedene Farboptionen und -eigenschaften an. Wählen Sie die gewünschte Farbe aus. Es spielt keine Rolle, welche Farbe Sie wählen, aber in diesem Fall entscheiden wir uns für ein warmes Grau.
Ihre Zeichenfläche ist fertig und Sie können mit dem grundlegenden Layout beginnen!
Gehe zu Einfügen> Form> Rechteck (R). Ein ... kreieren 360 x 500 Pixel Rechteck auf Ihrer Zeichenfläche. Genau wie beim Erstellen von Zeichenflächen können Sie ein zufälliges Rechteck zeichnen und dessen Eigenschaften über das Symbol anpassen Inspektor Panel. Zeigen Sie das Raster, um die Sache zu vereinfachen!
Nachdem Sie das Rechteck ausgewählt haben, schauen Sie sich das an Inspektor Panel. Entfernen Sie den Rand der Form, indem Sie sie deaktivieren. Drücke den Füllen probieren und setzen auf Weiß. In der können wir abgerundete Ecken setzen Inspektor Panel auch; Beweg den Radius Schieberegler nach rechts oder Typ 10 im Eingabefeld.
Ein ... kreieren 40 x 40 px Kreis mit Einfügen> Form> Oval. Denken Sie daran, Sie können einen zufälligen Kreis zeichnen und die Inspektor seine Eigenschaften ändern. Bewegen Sie es jetzt in die Mitte Ihres Rechtecks. Verwenden Sie die Zoom-Werkzeug auf der Werkzeugleiste wenn Sie zoomen müssen.
Erstelle dieses Mal einen anderen Kreis 20 x 20 px. Richten Sie es innerhalb des ersten Kreises in der Mitte aus. Beim Verschieben sehen Sie einige intelligente Hilfslinien, die Ihnen beim Ausrichten von Objekten helfen.
Um sicherzustellen, dass Ihr Inhalt richtig angeordnet ist, halten Sie die Taste gedrückt Option (⌥) Taste auf der Tastatur. Mit der Skizze erhalten Sie genaue Pixelmessungen mit Entfernungen zwischen Objekten. Zum Beispiel:
Das ist eine große Hilfe! Danke, Sketch!
Jetzt werden wir aus unseren beiden Kreisobjekten einen einzigen "Ring" machen. Wählen Sie beide Kreise direkt oder durch Layer-Liste. Gehe zum Werkzeugleiste und klicken Sie auf Subtrahieren.
Wir haben jetzt eine neue komplexe Form:
Wählen Sie dieses neue Objekt aus und wählen Sie auch Ihr Rechteck aus. Klicken Sie jetzt auf Union um die endgültige Form zu erhalten.
Was haben wir hier gemacht? Wenn wir eine nicht standardmäßige Form benötigen, müssen wir sie selbst erstellen. Wir könnten es mit dem Stiftwerkzeug zeichnen, aber oft lässt sich eine komplexe Form leicht in mehr Standardformen zerlegen. Wir können benutzen boolesche Operationen dafür. Skizze kommt mit Union, subtrahieren, sich schneiden und Unterschied boolesche Operationen, um verschiedene komplexe Formen durch Unterpfade zu erhalten.
Diese Optionen sind zerstörungsfrei Operationen, damit wir die Eigenschaften der Unterpfade (Grundformen) leicht ändern können, indem Sie sie im Feld auswählen Layer-Liste. Wenn Sie eine Form mit mehreren Unterpfaden in Ihrer Leinwand haben, werfen Sie einen Blick auf die Ebenenliste. Links wird ein Pfeil angezeigt, und wenn Sie ihn erweitern, sehen Sie eine Liste der Unterpfade für Ihre Form. Auf der rechten Seite können Sie für jeden Teilpfad eine boolesche Operation auswählen, wenn Sie ihn ändern möchten.
Unsere Grundform ist fast fertig! Stellen Sie sicher, dass Ihre Form ausgewählt bleibt Inspektor wählen Sie aus Schatten und legen Sie seine Eigenschaften wie folgt fest: Farbe> R = 38 G = 30 B = 10 Alpha = 50, X = 0, Y = 20, Unschärfe = 20 und Spread = 0. Am Ende sollte Ihre Form so aussehen:
Ein Anmeldeformular wäre nichts ohne Eingabefelder und Schaltflächen, also machen wir ein paar!
Spitze: Sie können Ihre Hauptform sperren, um Fehler und unerwartete Bewegungen zu vermeiden. Wählen Sie es aus und gehen Sie zu Anordnen> Ebene sperren. Ein kleines Vorhängeschloss in der Ebenenliste informiert Sie darüber, welche Objekte gesperrt sind.
Verwendung der Rechteckwerkzeug (R), ein ... kreieren 280 x 50 px Form entfernen, den Rand entfernen, Füllfarbe auf einstellen R = 239 G = 87 B = 46, Radius = 2 und platzieren Sie es wie in der folgenden Abbildung gezeigt.
Ein anderes erstellen 280 x 70 px Form, füllen Sie es mit Weiß, Radius = 2, einstellen Randstärke zu 1 und Randfarbe zu R = 234 G = 234 B = 234. Bewegen Sie es an den oberen Rand des orangefarbenen Rechtecks und ziehen Sie es 10px nach oben. Diese Form duplizieren (Steuerung-D), wählen Sie die Kopie aus und ziehen Sie eine andere 80px oben.
Erstellen Sie jetzt ein wenig 20 x 20 px Quadrat mit Rechteckwerkzeug (R). Fülle es mit Weiß und setze Radius = 2 , Randstärke=1 und Randfarbe zu R = 234 G = 234 B = 234. Bewege es 10px unter dem orangefarbenen Rechteck. Ihre Zeichenfläche sollte so aussehen:
Ok, jetzt werden wir das Anmeldeformular mit einigen Textelementen für Beschriftungen und Platzhalter aufpeppen. Wähle aus Textwerkzeug (T) und dann können Sie auf eine beliebige Stelle in der Leinwand klicken, um Ihre Textebene einzufügen. Der Text wird hinzugefügt und ausgewählt, sodass Sie sofort mit der Eingabe beginnen können. Sie werden feststellen, dass der Inspektor geändert wurde, um alle Eigenschaften anzuzeigen, die für Text gelten.
Spitze: Sie können auch klicken und ziehen, um ein Textfeld mit fester Größe zu erstellen. Wenn der Text zu groß wird, um in das Feld zu passen, wird die Größe nach unten geändert, im Gegensatz zu einem normalen Textfeld, das seine Breite an den Inhalt anpasst.
Fügen Sie den "USERNAME" -Text hinzu und gehen Sie zu Inspektor Panel, um seine Eigenschaften festzulegen. Verwenden Sie die Montserrat-Schrift, Gewicht = normal, Größe = 11, Abstand = 1, Farbe> R = 204 G = 204 B = 204.
Wählen Sie erneut die Schreibwerkzeug (T) und fügen Sie den Eingabetext "Armando" (oder was auch immer Sie möchten) hinzu. Verwenden Sie diese Werte diese Zeit, um ihre Eigenschaften festzulegen: Montserrat-Schrift, Gewicht = normal, Größe = 24, Abstand = 0, Farbe> R = 113 G = 87 B = 44. Wählen Sie beide Textteile aus und platzieren Sie sie wie folgt:
Dadurch werden unser Platzhalter und der Eingabetext für das erste Feld sortiert. Zweitens duplizieren Sie die Textebenen und verschieben Sie sie über das zweite Rechteck 80px Nieder. Ändern Sie den Textinhalt in "PASSWORD" und "*******"..
Fügen Sie einige neue Textebenen hinzu und verwenden Sie die Attribute wie unten gezeigt. Du wirst brauchen Öffnen Sie Sans-Schrift.
Sie werden feststellen, dass der Link "Passwort vergessen" unterstrichen ist. Um diesen Effekt zu erzielen, klicken Sie auf die Schaltfläche Schaltfläche Textoptionen Dekorationseffekte zu enthüllen. Wählen Sie die zweite aus, während die Textebene ausgewählt ist.
Nun das Ergebnis:
In diesem Moment sollten wir uns die Layer-Liste ansehen. Es könnte eine gute Idee sein, diese zu organisieren und umzubenennen Rechteck Formen oder einfach Elemente gruppieren. Benennen Sie Objekte um, indem Sie darauf doppelklicken oder mit der rechten Maustaste darauf klicken Umbenennen Möglichkeit. Um eine Ebenengruppe zu erstellen, wählen Sie einfach eine oder mehrere Ebenen aus und klicken Sie dann auf Gruppe Symbol in der Werkzeugleiste. Sie können Objekte auch wie erwartet zwischen Gruppen in der Ebenenliste ziehen.
Das Hauptziel besteht darin, eine unordentliche Ebenenliste in etwas eleganter und organisierter zu gestalten. Berücksichtigen Sie dies, nicht nur in diesem Tutorial, sondern in jedem Projekt, an dem Sie beteiligt sind.
Wir haben bereits die Elemente erstellt, die wir in unserer Login-Box benötigen. Es ist Zeit, ein Logo hinzuzufügen.
Öffne das logo_icon.svg Ich habe dieses Tutorial als Anhang beigefügt. Konzentrieren Sie sich nun auf das Ebenenlistenfeld. Sie werden sehen, wie das Symbol mit verschiedenen Pfaden erstellt wurde, die wir leicht bearbeiten können.
Verwendung der Rechteckwerkzeug (R), ein ... kreieren 30 x 60 px formen und platzieren Sie es wie in der folgenden Abbildung gezeigt. Zu diesem Zeitpunkt ist es nicht notwendig, es zu 100% perfekt zu platzieren. Denken Sie daran, dass Sie das Raster und das Symbol verwenden können Option (⌥) Taste auf der Tastatur, wenn Sie sich bewegen. Auf diese Weise zeigt Ihnen Sketch genaue Entfernungen.
Nun auf die Layer-Liste, Ziehen Sie die Pfadebene in die Gruppe "Form". Legen Sie es auf die Oberseite. Sie erhalten dadurch eine neue zusammengesetzte Form. Das ist die Stärke von booleschen Operationen und Vektorformen in Sketch!
Erinnerst du dich, als wir über diese kleinen Icons auf der rechten Seite deiner Unterpfade sprachen? Wir können für jeden Teilpfad verschiedene boolesche Operationen einzeln auswählen. Also lass uns den ersten zu ändern Subtrahieren und der zweite zu Unterschied.
Einfacher Schritt. Stellen Sie sicher, dass Ihre neue Verbundform noch ausgewählt ist. Gehe zu Layer> Pfade> Abflachen. Dadurch haben Sie Ihre Unterpfade und ihre Bearbeitungsfunktionen verloren, aber der nächste Schritt wird jetzt einfacher.
Lass deine Form ausgewählt. Gehe zum Werkzeugleiste und klicken Sie auf die Bearbeiten Symbol. Sie werden einige Änderungen an der Inspektor Panel und die Form selbst. Wählen Sie alle Vektorpunkte aus, indem Sie auf der Leinwand ziehen.
Konzentriere dich auf den Inspektor Panel und Set Ecken zu 5. Klicken T fülleno Öffnen Sie das Optionsfenster und wählen Sie die zweite Art der Füllung aus, Linearer Farbverlauf. Sie sehen zwei Punkte, die durch eine Linie über Ihrer Ebene verbunden sind. Jeder Punkt auf der Linie steht für einen Farbstopp entlang des Verlaufs.
Um die Farbe einer der Haltestellen zu ändern, klicken Sie in der Leinwand darauf. Sie sehen, dass der Farbwähler im Inspektor die Farbe der Haltestelle aktualisiert. Wählen Sie in dieser Farbauswahl einen neuen Wert aus, und Sie sehen das Ergebnis. Wenn wir das wissen, können wir die erste Farbe anpassen R = 245 G = 166 B = 35 und der zweite zu R = 239 G = 87 B = 46. Sie können die Farben auch direkt in der Farbauswahl ändern.
Dies ist unsere endgültige Form:
Kopieren Sie die Form und fügen Sie sie in Ihr Anmeldeformular ein.
Ihr Logo ist fast fertig, fügen Sie also einen generischen Text hinzu. Geben Sie ein, was Sie möchten, aber für dieses Tutorial habe ich "myapp" und die folgenden Positionen und Eigenschaften verwendet:
Unser Anmeldeformular ist fertig!
Mit Sketch können wir sowohl mit Bitmap-Bildern als auch mit Vektorobjekten arbeiten. Für den Hintergrund wähle ich ein Bild aus Unsplash. Tolle Fotografie dort! Ich werde diesen von Nick West wählen.
Gehen Sie jetzt zurück zu Ihrem Dokument. Wählen Sie Ihre Zeichenfläche auf der Layer-Liste Panel und gehen Sie zu Einfügen> Bild um das Bild auszuwählen. Achtung: Dieses Bild ist riesig! Wir werden es ein wenig verkleinern, indem wir zum gehen Inspektor Panel und ändern seine Dimensionen auf etwas überschaubarer 1280 x 876 px. Position es um X = 0 Y = 0 und stellen Sie sicher, dass es istam unteren Rand Ihrer Ebenenliste.
Spitze: Wenn Sie Bilder importieren, während eine Zeichenfläche ausgewählt bleibt, wird Ihr Bild automatisch mit den Abmessungen der Zeichenfläche maskiert. Verschieben Sie die Ebene außerhalb der Zeichengruppe, um sie zu demaskieren. Weitere Informationen zum Maskieren von Objekten finden Sie in der offiziellen Dokumentation.
In Sketch können Sie die Farben eines vorhandenen Bildes mithilfe von anpassen Farbe anpassen Panel in der Inspektor. Wir können Sättigung, Helligkeit und Kontrast ändern. einstellen Sättigung zu 0 und Kontrast zu 1,9.
Erstellen Sie jetzt eine 600 x 800 Pixel Rechteck mit Einfügen> Form> Rechteck (R). Platziere es bei X= 0 Y = 0. Auf der Layer-Liste Bewegen Sie die Formebene direkt über die Bildebene. Duplizieren Sie es und legen Sie die Rechteck-Eigenschaften wie folgt fest: für den ersten Rechtecksatz Deckkraft = 100%, Mischung = Multiplizieren, Farbe> R = 173 G = 166 B = 152. Für den zweiten (knapp über dem ersten) setzen Deckkraft = 50%, Mischung = Normal, Farbe> R = 173 G = 166 B = 152.
So sollte es aussehen.
Ich hoffe, dir hat dieses Tutorial gefallen…
Da Sie ein Benutzeroberflächenelement erstellen, kann das Hinzufügen einiger zusätzlicher Details zu Ihrem Anmeldeformular wirklich nützlich sein, finden Sie nicht? Formularschnittstellen haben viele Aspekte. verschiedene Zustände und Rückmeldungen. Alle Techniken, die ich in diesem Tutorial behandelt habe, haben Sie mit den Fähigkeiten ausgestattet, um einige zusätzliche Elemente wie die folgenden zu erstellen:
Glaubst du, du kannst es schaffen? Wenn Sie stecken bleiben oder mich etwas fragen müssen, schreiben Sie einfach einen Kommentar oder finden Sie mich auf Twitter. Ich freue mich darauf zu sehen, wie es Ihnen geht!
Accentsconagua