Gemeinsame Elemente in hölzernen Ui Design verwendet
Wir alle wissen, dass Textur sowohl im modernen als auch im Vintage-Design verwendet wird, obwohl in vielen Fällen des Designs, das vor vielen Jahren produziert wurde, laute und grungy Texturen unvermeidlich waren.
Wenn es jedoch um eine Holzstruktur im Design geht, ob in einem Druckerzeugnis, einem Web- oder mobilen Benutzeroberflächenelement oder einem allgemeinen Layout, wird es immer verwendet, um die optische Attraktivität zu verbessern.
In diesem Artikel werden wir fünf allgemeine Elemente im UI-Design betrachten, die Holztexturen verwenden, um genau dies zu tun.
Neben der Diskussion dieser Elemente und bewundern einige ziemlich sexy Benutzeroberflächen-Designs, die ich gesammelt habe Dribbling Wir werden auch lernen, einige dieser Effekte zu reproduzieren, indem wir hier in diesem Artikel Mini-Tutorials folgen.
Diese fünf gemeinsamen Elemente im UI-Design sind:
- Stoff und Nähte,
- Papier und Schatten,
- Gravierte Typografie und Muster,
- Schlanke und moderne Elemente,
- Dreidimensionale Effekte.
1. Stoff und Stitching
Stoff und Nähte sind Elemente, die dazu tendieren, sich perfekt in die Holzstruktur einzufügen, da beides natürliche, organische Produkte sind. (Zugegeben, Baumwolle wird gewebt, geschnitten und gefärbt, und viel Holz in dieser Vitrine wurde geschnitten, abgeschliffen und behandelt - aber Sie verstehen, was ich meine!) Sehen Sie sich die wenigen Beispiele darunter an, die Stoff und Nähte mit kombinieren Holz Texturen.
Beispiele
Dieses sehr leichte Design verwendet einen einfachen "Stich" (nur einen gestrichelten Strich), um das Kreisemblem und das Banner so erscheinen zu lassen, als wäre es mit dem schwach deckenden und getönten Holztextur-Hintergrund vernäht worden. Diese kleine Berührung funktioniert so gut für solch ein einfaches Design.
Die Naht in diesem Design ist viel realistischer, kombiniert einen voll-Opazität Holz-strukturierten Hintergrund mit gravierten Elementen, Schlagschatten und echten Stoff Texturen. Dieser Stich hat einen Schlagschatten (0 Pixel in der Größe und 1 Pixel in einer Entfernung von 90 °), so dass der Stich hervorstechen und mit den Details im Rest des Designs übereinstimmen kann.
Die digital produzierte Holzstruktur lässt das Design modern aussehen, mit leichten Farbverläufen und gravierten Elementen, die ein leicht dreidimensionales und realistischeres Erscheinungsbild erzeugen. Ein sich wiederholendes Muster wird verwendet, um einen schönen Ledereffekt für das Abzeichen in der oberen linken Ecke zu erzeugen, das mit genau der gleichen Technik wie die oben erwähnte (mit dem 1-Pixel-Schlagschatten) genäht wurde.
Mini-Tutorials
Erstellen einer einfachen gestrichelten Linie (Illustrator)
In diesem Mini-Tutorial verwenden wir Illustrator (Ai), um wie im ersten Beispiel dieses Abschnitts eine einfache strichlierte Linie zu einem Kreis zu erstellen. Öffnen Sie Illustrator und wählen Sie das Ellipse-Werkzeug aus. Während du die Umschalttaste gedrückt hältst, um deine Form proportional zu halten, ziehe einen Kreis nach unten.
Verwenden Sie im Bedienfeld "Kontur" (Fenster → Kontur) einen 2-Punkt-Strich mit einer Gehrungsgrenze von 4. Aktivieren Sie die Option "Gestrichelte Linie" und fügen Sie 12 Punkte in das erste Feld ein.
Sie werden feststellen, dass die Linie auf der rechten Seite unserer Form tatsächlich aus zwei 12-Punkt-Strichen zusammengesetzt ist. Um das zu beheben, geben wir unserem Strich ein bisschen mehr Muster. Ändern Sie den Strich auf 3 Punkte und die Lücke auf 12 Punkte, und verdoppeln Sie dann den Strich auf 6 Punkte und behalten Sie die letzte Lücke 12 Punkte. Sie sollten mit einer Strichlinie enden, die der folgenden ähnlich ist (die Ergebnisse hängen von der Größe Ihres Kreises ab).
Dupliziere deine Form, indem du sie zuerst auswählst, dann wähle Bearbeiten → Kopieren (Befehl + C) und schließlich Bearbeiten → Einfügen am Platz (Befehl + F). Wenn die neue Form noch ausgewählt ist, halten Sie die Tastenkombination Alt + Umschalt gleichzeitig gedrückt und reduzieren Sie die Größe der Form. Halten Sie diese beiden Tasten gleichzeitig gedrückt, um die Form proportional zu halten und die Größe vom Mittelpunkt zu verringern oder zu vergrößern, sodass keine Neuausrichtung erforderlich ist.
Wählen Sie den größeren der beiden Kreise. Entfernen Sie den Strich und ändern Sie die Füllfarbe in ein braunes (oder eine andere Farbe). Wählen Sie nun den kleineren der beiden Kreise und ändern Sie die Strichfarbe in ein helleres Braun.
Wenn der kleinere der beiden Kreise noch ausgewählt ist, duplizieren Sie ihn, indem Sie ihn kopieren und einfügen. Wenn du dupliziert hast, positioniere es unterhalb deiner ursprünglichen Form (Befehl + [) und schiebe die Form nach unten, indem du einmal den Abwärtspfeil auf deiner Tastatur drückst; Ändern Sie dann die Strichfarbe in Weiß.
Reduzieren Sie die Deckkraft Ihres weißen Strichkreises auf 50% und die Deckkraft Ihres braunen Strichkreises auf 75%.
Erstellen eines realistischen Stiches (Photoshop)
In diesem Mini-Tutorial verwenden wir eine echte Fabric-Textur und einige der integrierten Effekte von Photoshop, um einen realistischen Stich zu erzeugen. Öffnen Sie ein neues Photoshop-Dokument und fügen Sie eine Stoffstruktur Ihrer Wahl ein. Beschneide das Bild so, dass es auf einem weißen Hintergrund sitzt.
Wählen Sie das rechteckige Auswahlrechteck und ziehen Sie eine Auswahl auf die Innenseite der Form Ihrer Stoffstruktur. Erstelle eine neue Ebene und benenne sie in "Stitch" um. Gehe zu Bearbeiten → Kontur und wende einen 1-Pixel schwarzen Strich auf deine Form an.
Wählen Sie das rechteckige Auswahlrechteck erneut und positionieren Sie es über Ihrem Strich. Es spielt keine Rolle, wo Sie anfangen. Drücken Sie bei gewählter Position die Entf-Taste. Stellen Sie sicher, dass Sie Inhalt aus der Ebene der Kontur und nicht aus der Ebene der Struktur entfernen.
Wiederholen Sie den Vorgang für den Rest der Strichlinie, wie unten gezeigt.
Es besteht eine hohe Wahrscheinlichkeit, dass die Stiche nicht symmetrisch sind; aber das ist eine gute Sache, denn Stiche sind selten!
Sie sollten mit etwas enden, das wie folgt aussieht:
Klicken Sie mit der rechten Maustaste auf Ihre Ebene und wählen Sie "Fülloptionen", um das Fenster "Ebenenstile" zu öffnen. Wählen Sie die Registerkarte Farbüberlagerung, und wählen Sie ein helles Grau (ich verwendete #F1F1F1 ).
Wählen Sie nun die Registerkarte Schlagschatten. Wenden Sie einen schwarzen Schlagschatten mit einem Winkel von 90 °, einem Abstand von 1 Pixel und einer Größe von 0 Pixel an. Verringern Sie die Deckkraft des Schattens auf 20 bis 60%.
Wählen Sie die Fabric-Ebene und öffnen Sie das Fenster "Layerstile". Wenden Sie einen Standard-Schlagschatten mit einer Entfernung von 0 Pixeln und einen Farbverlauf von Weiß über Schwarz zu Weiß an. Ändern Sie den Überblendungsmodus Ihrer Verlaufsüberlagerung zu "Multiplizieren" mit einer Deckkraft von 15%. Sobald Sie angewendet und zu 100% angezeigt werden, sollten Sie mit etwas ähnlichem enden:
Spielen Sie mit den Farben Ihres Stoffes, indem Sie die Einstellungen für Farbton und Farbbalance verwenden. Hier ist mein Ergebnis:
2. Papier und Schatten
Papier und Schatten werden als Designstile immer populärer, sind aber besonders in textlastigen Designs wie z. B. mit Holz beliebt. Die Sammlung der folgenden Arbeiten zeigt, dass Papier und Schatten auf unterschiedliche Weise verwendet werden, um kleine Informationsbrocken oder in einigen Fällen den Hauptinhalt der Website darzustellen.
Beispiele
Dieser Screenshot, falls Sie es nicht bemerkt haben, stammt aus einem kleinen Ausschnitt des Designs, das wir am Ende des Abschnitts "Stoff und Stitching" oben gesehen haben. Wenn man das Thema der digital produzierten Textur fortsetzt, wird eine einfache weiße Form mit einem verzogenen benutzerdefinierten Schatten verwendet, um das Papier so aussehen zu lassen, als würde es sich wellen.
Eine wirklich schöne Kombination aus hölzernen und zerknitterten Papierstrukturen. Das Papier in dieser Benutzeroberfläche wird verwendet, um ein Snippet mit Informationen zu einem Rezept zu präsentieren, mit einigen reizenden Symbolen im Silhouettenstil, die es dem Benutzer ermöglichen, das vollständige Rezept anzuzeigen, zu bookmarken und mit anderen zu teilen.
Dieses Design ist schwer, kombiniert Holz-, Papier- und Tape-Texturen zu einer ansprechenden Benutzeroberfläche. Das fotografierte Holz und Klebeband, kombiniert mit den digital erzeugten Papierstrukturen und Schatten, arbeiten gut zusammen.
Dies ist eines meiner Lieblings-UI-Beispiele in der Post. Rein digital (einschließlich der Holzstruktur), verwendet das Design Tropfen und innere Schatten, um ein schönes Suchfeld zu erstellen. Das Design verwendet auch die Maschen und das Stoffelement. Insgesamt eine sehr benutzerfreundliche Oberfläche, die gut aussieht!
Dieser Entwurf scheint durch traditionelle Luftpostumschläge mit dem sich wiederholenden Muster um das Papier inspiriert zu werden. Das Papier wurde (digital) an den hölzernen Hintergrund geheftet, so dass die Benutzeroberfläche eher wie eine Stecknadel und ein Anschlagbrett erscheint, statt wie eine flache Webseite.
Der beige-creme Bild- und Navigationshintergrund hat einen feinen Schlagschatten, der ihn wie Papier erscheinen lässt, besonders mit dem gestempelten Abzeichen und den verblaßten sepia-ähnlichen Fotografien, die aussehen, als ob sie gedruckt worden waren. Dies passt wunderbar zu dem holzstrukturierten Hintergrund und dem Gesamteindruck der Oberfläche.
Mini-Tutorials
Erstellen eines einfachen digitalen Papiereffekts (Photoshop)
In diesem Mini-Tutorial verwenden wir eine Holzstruktur und grundlegende Photoshop-Werkzeuge, um einen digitalen Papiereffekt zu erzeugen. Beginnen Sie damit, ein neues Dokument mit einer Textur oder einem sich wiederholenden Muster zu erstellen.
Wählen Sie das Werkzeug Rechteckige Form aus, und fügen Sie eine Form ein, die der unten stehenden ähnlich ist, indem Sie sie ganz oben auf der Leinwand platzieren.
Dupliziere die Form und gehe zu Bearbeiten → Freie Transformation (oder drücke Befehl + T). Reduzieren Sie die Größe der Form, während Sie die Alt- und Umschalttaste gedrückt halten, um die Form im Verhältnis zu erhalten, und verringern Sie dann die Größe in Richtung der Mitte.
Ziehen Sie den oberen Ankerpunkt über den oberen Rand der Arbeitsfläche, sodass er den oberen Rand der ursprünglichen Form überlappt.
Ändern Sie die Farbe Ihrer neuen Form zu einem sehr hellen Beige (fast weiß). ich benutzte #FFFBF8 .
Dupliziere deine ursprüngliche Form und ändere die Farbe in reines Schwarz ( #000000 ).
Erhöhen Sie die Größe der Form, so dass es ein paar Pixel größer als die ursprüngliche Form ist. Erstellen Sie eine Hilfslinie - Sie können eine Hilfslinie aus dem Lineal ziehen (Ansicht → Lineale anzeigen, wenn sie nicht angezeigt wird) - etwa 10 bis 20 Pixel unter Ihrer schwarzen Form. Gehe zu Bearbeiten → Transformieren → Verkrümmen.
Ziehen Sie den unteren linken Ankerpunkt nach unten zu Ihrem Guide und wiederholen Sie den Schritt mit dem Anker unten rechts.
Drücken Sie die Eingabetaste, um die Formänderung zu bestätigen. Klicken Sie mit der rechten Maustaste auf das Werkzeug "Ebenen erstellen" und wählen Sie die Option "Ebene rasterisieren".
Positionieren Sie die schwarze Formschicht unter den anderen zwei Formen, aber über der Holzschicht. Gehe zu Filter → Weichzeichnen → Gaußscher Weichzeichner und verwische die schwarze Form um 10 Pixel. Klicken Sie dann auf "OK".
Verringern Sie die Deckkraft der schwarzen Form auf 50%. Öffnen Sie das Fenster "Ebenenstile" für Ihre ursprüngliche weiße Form und klicken Sie auf die Registerkarte "Strich". Wenden Sie einen 1-Pixel-Strich auf die Form an, indem Sie den Farbverlaufstyp verwenden, der von Schwarz zu Weiß mit einem 90 ° -Winkel reicht.
Damit haben wir unseren digitalen Papier-auf-Holz-Effekt! Dies ist eine großartige Technik für Websites.
3. Gravierte Typografie und Muster
Gravierte Typografie und Muster sind eine relativ verbreitete Technik im fortgeschrittenen Webdesign und werden im alltäglichen Design immer beliebter. Im Folgenden finden Sie einige Beispiele, die diesen Stil in holzstrukturierten Oberflächen gut verwenden.
Beispiele
Diese Instagram-Anwendung Benutzeroberfläche hat eine grungy Holzstruktur Hintergrund und ausgewaschenen halbtransparenten Bildern, um einen abgenutzten Vintage-Look zu produzieren. Die Typografie hat verschiedene Stile, so dass der Schriftzug hervorstechen kann und dem Holzhintergrund eine Gravur verleiht.
Insgesamt ist dies eine wirklich saubere Benutzeroberfläche aus Holz, mit einer großen und ebenso großen Sammlung verschiedener Stile und Techniken. Einer, der wiederholt (und sehr gut) verwendet wird, ist der gravierte Effekt auf die Typografie und die Muster, die in den floralen Mustern am oberen Rand des Screenshots veranschaulicht sind.
Metallbeschilderungen werden hier an den holzgefassten Kopf gehängt, um als Hauptnavigation zu dienen. Um den Schildern einen realistischeren Gravureffekt zu verleihen, gab der Designer der Typografie Innen- und Schlagschatten.
In diesem Design werden hauptsächlich Holztexturen für die Navigationsleiste verwendet (in diesem Fall das Protokoll). Die eingravierte Typografie lässt den Titel so erscheinen, als sei ein Teil des Steins weggeätzt, um die Holzstruktur zu zeigen.
Ein weiteres Beispiel für eingravierte Typografie auf Schildern, in diesem Fall Holztexturzeichen anstelle von Metall.
Diese Holz-UI verwendet schlanke und moderne Elemente, die es schwer machen, sich für diese oder die nächste Kategorie zu entscheiden. Der "Kaufen" -Button und das Einkaufstaschen-Icon haben einen sehr detaillierten Gravur-Effekt, der sie wunderbar klickbar macht!
Mini-Tutorials
Wie man ein Muster in Holz eingraviert (Photoshop)
In diesem Mini-Tutorial erstellen wir einen geätzten oder gravierten Holz-Effekt in Photoshop. Öffnen Sie ein neues Dokument und fügen Sie eine Holzstruktur ein.
Fügen Sie eines Ihrer eigenen Muster ein oder verwenden Sie ein Vektor-Bild.
Sobald Sie den Vektor korrekt positioniert haben, klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie "Ebene rasterisieren". Klicken Sie erneut mit der rechten Maustaste darauf und wählen Sie die Registerkarte Verlaufsüberlagerung. Wenden Sie einen Farbverlauf an, indem Sie zwei Farben aus dem hölzernen Hintergrund verwenden (siehe unten).
Wählen Sie die Registerkarte Schlagschatten und wenden Sie einen weißen Schatten mit einem normalen Überblendungsmodus an. Ändern Sie den Winkel des Schattens auf 90 ° und den Abstand und die Größe auf 1 Pixel. Sie können die anderen Einstellungen auf ihrem Standard beibehalten.
Wählen Sie die Registerkarte "Innerer Schatten", um einen Schatten auf die Innenseite Ihres Musters anzuwenden. Dies ermöglicht uns, den gravierten Effekt zu erzeugen. Verringere die Deckkraft des Schattens auf 20% und ändere den Winkel auf 90 °. Ändern Sie den Abstand und die Größe des Schattens auf jeweils 3 Pixel und behalten Sie alle anderen Einstellungen als Standard bei.
Klicken Sie auf "OK" und verringern Sie die Deckkraft Ihrer Musterebene auf 80%, damit die Hintergrundtextur in all ihrer Pracht erstrahlen kann. Sie sollten mit diesem Ergebnis enden:
4. Schlanke und moderne Elemente
Obwohl Holzstrukturen oft mit Vintage- und Retro-Design in Verbindung gebracht werden, können sie, wenn sie korrekt abgezogen werden, auch als Ergänzung zu modernen und eleganten Elementen dienen, wie Sie den folgenden Beispielen entnehmen können.
Beispiele
Hier ist ein weiterer Screenshot eines Interfaces, das wir in der vorherigen Kategorie gesehen haben. Es zeigt ein komplett anderes gestyltes Element. Der Schieberegler und die Bildlaufleisten in diesem Design haben glatte weiß-silberne und grüne Farbverläufe für eine benutzerfreundliche Oberfläche.
Neben den Stoff- und Stichen und den gravierten Typografietechniken verfügt dieses Design über einige moderne Elemente wie 2-Pixel-Grau-Weiß-Striche und die minimalistischen Icons, die für eine attraktive und nutzbare iPad-ähnliche Oberfläche sorgen.
Eine weitere meiner Lieblingsschnittstellen. Es kombiniert Stoff- und Holztexturen mit schlanken Farbverläufen, 2-Pixel-Strichen, einfachen Symbolen und wunderschönen Typografien zu vielen interessanten Punkten für den Benutzer.
Eine sehr detaillierte Oberfläche, die Holztexturen, dreidimensionale Effekte, Glühen und Glanzlichter zusammenführt, um ein Ergebnis zu erzielen, das seine Benutzer betäubt. Ein-Pixel-Linien werden verwendet, um den 3-D-Effekt zu verstärken.
Durch Glühen, Schatten und Striche wird diese lebendige Holzoberfläche zum Leben erweckt. Die modernen Symbole sind jedoch der Schlüssel.
Diese schöne kleine Schnittstelle nutzt die natürlichen Produkte der Welt und die eleganten futuristischen Elemente, um eine Benutzeroberfläche zu erstellen, die attraktiv und leicht zu verstehen ist. Zu den modernen Elementen kommt Lärm hinzu, so dass sie sich in den Holztexturkopf einfügen.
Diese Tastatur gibt uns eine Holzstruktur, die auf einem bestehenden modernen Element basiert: dem Standard-iPhone UIKit. Die Tastatur funktioniert genauso wie die Standardtastatur und verwirrt die Benutzer nicht.
Mini-Tutorials
In diesem Mini-Tutorial erstellen wir einen hölzernen UI-Schieberegler mit einer Auswahl von Photoshop-Ebeneneffekten. Erstellen Sie ein neues Dokument, und fügen Sie eine hölzerne Struktur oder ein Muster ein.
Wählen Sie das abgerundete Rechteck-Werkzeug aus und ziehen Sie eine lange schmale Form ähnlich der folgenden heraus. Der Eckenradius meines Werkzeugs ist auf 15 Pixel eingestellt.
Klicken Sie mit der rechten Maustaste auf die Ebene Formen und wählen Sie "Fülloptionen". Wählen Sie die Registerkarte Verlaufsüberlagerung und fügen Sie eine Farbverlaufsfarbe hinzu, die aus dem Hintergrund und dann einer etwas dunkleren Farbe ausgewählt wird. Klicken Sie dann auf "OK".
Wählen Sie nun die Registerkarte "Innerer Schatten" und wenden Sie einen schwarzen Schatten mit einer Opazität von 30% und einem Winkel von 120 ° an. Setze den Abstand auf 1 Pixel und lass alles andere auf 0 fallen. Dadurch entsteht ein Schatten in unserer Form, der aussieht, als wäre er aus dem hölzernen Hintergrund geschnitzt.
Wählen Sie die Registerkarte Schlagschatten und wenden Sie einen weißen Schatten mit einem normalen Überblendungsmodus an. Ändern Sie den Winkel auf 90 ° und den Abstand und die Größe auf 1 Pixel. Belassen Sie alles andere auf 0 Pixel. Dadurch wird unsere Form zu einem Highlight am Boden und wirkt dreidimensionaler und realistischer.
Untersuche deine geschnitzte Linie und wähle das Ellipsen-Werkzeug aus. Halten Sie die Umschalttaste gedrückt, um die Form beizubehalten. Ziehen Sie einen Kreis heraus und positionieren Sie ihn über dem Schieberegler.
Öffne das "Layer Styles" -Fenster für deine neue Kreisform. Klicken Sie auf die Registerkarte Farbverlaufsüberlagerung und wenden Sie einen Farbverlauf an, der von hell-mittel bis hellgrau reicht. Gib ihm einen 90 ° Winkel.
Wählen Sie die Registerkarte Schlagschatten und wenden Sie einen Schatten auf Ihre Form an. Ändern Sie den Abstand auf 0 Pixel und die Größe auf 10 Pixel.
Verkleinern Sie, um den Schieberegler auf 100% zu stellen. Hier ist das Ergebnis:
5. Dreidimensionale Effekte
Es gibt keine Einschränkungen für das dreidimensionale Design und es ist unglaublich effektiv mit Holztexturen. Diese Kombination wird häufig zur Herstellung von "Regalen" verwendet, wie sie in den iPhone- und iPad-Schnittstellen zu finden sind, insbesondere in Apples iBook-Anwendung.
Beispiele
Diese Regale sind sehr realistisch und die Schatten (wie die im inneren Regal in der oberen rechten Ecke) stammen aus einer großen Auswahl an benutzerdefinierten Jobs (keine integrierten Photoshop-Filter).
Die Effekte in diesem Design sind denen in der vorherigen ziemlich ähnlich. Diesmal zeigen die Effekte ein saubereres und moderneres Aussehen, während das vorherige realistischer aussehen und "gebraucht" werden sollte.
Diese iPhone-Regale präsentieren ähnliche Techniken. Diesmal ist das Ergebnis sowohl modern als auch realistisch und gleicht perfekt strukturierte Fotos mit digitalen Effekten aus.
Diese 3-D-Taste ist unglaublich! Mit seiner Kombination aus Holztexturen kommen die filigranen Details des Designs in den Fokus. Wenn ein Knopf wie dieser vor Ihnen steht, können Sie dem Druck nicht widerstehen!
Auf diese Navigationsleiste wurde ein einfacher und dennoch effektiver 3-D-Effekt angewendet, sodass die Tasten so aussehen, als wären sie Schubladen. S ein ausgeklügeltes Element, um den Benutzer in die Oberfläche einzubeziehen.
Geschrieben exklusiv für WDD von Callum Chapman, ein Designer und Illustrationshandel als Kreisschachtel kreativ . Er betreibt auch The Inspiration Blog und Picmix Laden
Teilen Sie Ihre hölzernen UI-Designs und Illustrationen mit uns sowie alle Artikel oder Tutorials, die Ihren Mitlesenden helfen könnten.