Neumorphic Design mit Figma: Volumen für Oberflächen

1. Einführung in Kurs und Kursleiter:in: Hallo, ich bin Kate Liebich und ich bin User Experience Designerin aus Frankfurt, Deutschland Lassen Sie uns heute in die Welt des Neumorphismus eintauchen und herausfinden, wie wir den Schnittstellen Leben und Tod hinzufügen können Im Laufe meiner Karriere habe ich alle möglichen Projekte übernommen , von einfach bis sehr komplex. Aber glauben Sie mir, Neumorphic-Designs können für Designer und Entwickler ein Rätsel spannende Drei ist, mit der Idee der Tiefe in Ihren Designs zu spielen , als würde man eine ganz neue Dimension hinzufügen. In diesem Kurs freue ich mich, Ihnen meine speziellen Tricks zur Herstellung solcher Interfaces zu zeigen meine speziellen Tricks zur . Ich werde über Schatten und Licht sprechen, das dynamische Duo, das Ihre Designs wie in 3D aussehen lässt Ihre Designs wie in 3D aussehen Wir werden uns auch die Hände schmutzig machen. Elemente, die handwerklich aussahen wurden mit einer Reihe cooler Methoden herausgeschnitten Außerdem werde ich Ihnen eine supercoole und einzigartige Technik vorstellen, wie Sie eine rote Farbe für die Neumorphic Elements und Neumorphic Designs auswählen können. Ich würde sagen, dass Sie diese Technik in Zukunft tatsächlich für jedes Ihrer Projekte verwenden können in Zukunft tatsächlich für jedes Ihrer Projekte verwenden Wir werden unsere kreative Stimmung verbessern und ein paar Bildschirme zusammenstellen ein paar Bildschirme zusammenstellen auf denen Sie Ihre neuen Fähigkeiten unter Beweis stellen können. Am Ende dieses Kurses, das habe ich Ihnen versprochen, werden Sie das Selbstvertrauen haben, Neumorphic aufzupeitschen, Sie sind wie ein Neumorphic aufzupeitschen, Sie Und vergessen Sie nicht, dass das Projekt, das wir am Ende dieses Kurses durchführen werden das Sahnehäubchen auf Ihrem Designportfolio sein wird. Ich freue mich darauf, Sie in diesem Kurs zu sehen. Bereit, Neumorphic-Designs zu rocken. Wir sehen uns dort. 2. Verschiedene UI-Morphismus-Stile: Sie erinnern sich wahrscheinlich nicht, wie oder wie die Alt-Interfaces aussehen. Die Elemente, die Sie hier sehen, sind der erste Schritt zum Skeumorphismus Dieser Farbstoff wurde von Dingen aus der realen Welt inspiriert , um neue und unbekannte Funktionen zu erklären Er verwendet eine Analogie oder Metapher So könnte jeder herausfinden, wie ein Computer funktioniert. Denken Sie daran, dass das Müllsymbol im alten Mac OS oder das Safari-Symbol im Jahr 2003 so aussahen. Es ist ein reiner Skumorphismus. Aber die Zeit vergeht schnell. Benutzer haben lange, lange Zeit, um eine Schaltfläche ohne unnötige Schatten und Glanzlichter von einem Symbol zu unterscheiden . Und vor allem dreidimensionale Bilder sind aus den Schnittstellen verschwunden. Smartphones sind zur Norm geworden und überlastete IT-Schnittstellen nerven nur die Menschen Skeumorphismus als Stil ist veraltet, aber es sind viele verschiedene Dinge daraus hervorgegangen Flaches Design wurde nach der Veröffentlichung von iOS 7 populär und wird immer noch von allen verwendet von Designstudios bis hin zu Apple, Google und Microsoft. Es gilt als Nachfolger des grafischen Skeumorphismus. Die Hauptidee von Leginon ist jedoch das Gegenteil. Wie heutzutage sollte die Oberfläche den Benutzer nicht mit zusätzlicher Textur und Lautstärke ablenken den Benutzer nicht mit zusätzlicher Textur und Lautstärke Aber in den 2000er Jahren wurde alles zu etwas Neuem Und eine Alternative. Neomorphismus. Eine Kombination aus Volumen und flachen Elementen. Es ist jedoch unmöglich, es in seiner reinen Form zu verwenden. Denn dann wird es für den Benutzer schwierig sein den Zustand der Oberflächenelemente zu verstehen. Die Farben sind im Ton sehr nahe beieinander. Es benötigt viel Leerraum, in dem alle Schaltflächen erkennbar und verständlich bleiben Daher hat es in einer mobilen Anwendung mit einer geringen Anzahl von Funktionen eine gute Leistung erbracht . Jetzt haben Sie ein Verständnis der UI-Morphismus-Stile. In diesem Kurs lernen wir , wie wir diese Elemente einfach erstellen und gestalten können , indem wir nur Licht und Schatten verwenden , und wie wir diese Elemente mit anderen wichtigen Teilen kombinieren diese Elemente mit anderen wichtigen Teilen um sie in der Benutzeroberfläche zu verwenden. Lassen Sie uns in die Figma-Software eintauchen und nicht die wichtigsten Tools, die wir in diesem Kurs verwenden 3. Kurze Figma-Übersicht: In diesem Video gebe ich den ersten Überblick über die Figma-Software und das leistungsstarke Designtool, das von Fachleuten auf der ganzen Welt verwendet wird von Fachleuten auf der ganzen Welt Ich persönlich bevorzuge Figma, da Sie Ihr kostenloses Konto erstellen und es für Ihre eigenen Bedürfnisse verwenden Gleichzeitig stehen Ihnen alle Tools zur Verfügung, die Sie benötigen, um eine eigenständige Benutzeroberfläche zu erstellen. Wenn du dich an ein anderes Tool gewöhnt hast, kannst du diese Lektion überspringen und zur nächsten übergehen , wo wir lernen werden , wie du strukturieren und wie du Pedale und Licht bauen kannst. Es ist also im Grunde egal , welches Tool Sie verwenden werden. Die Grundlagen sind dieselben. Lassen Sie uns mit der Übersicht über die Software beginnen. Wenn Sie Figma starten, werden Sie mit einem leeren Dosendokument begrüßt Dann erstellen Sie ein neues Dokument. Klicken Sie einfach auf die Plus-Schaltfläche in der oberen linken Ecke oder verwenden Sie die Tastenkombination für Windows Control plus M für Mac, allgemeines Plus N. Sobald Sie Ihr Dokument geöffnet haben, möchten Sie Ihre Arbeit möglicherweise in verschiedene Abschnitte Mit Figma können Sie Ihrem Dokument mehrere Seiten hinzufügen. Um eine neue Seite hinzuzufügen, gehen Sie zum rechten Panel und klicken Sie auf das Seitensymbol. Du kannst es auch benutzen. Die Tastenkombination für Windows-Steuerung plus N für kein gängiges Plus plus N. Lassen Sie uns nun mit der Erstellung Ihres ersten Frames beginnen. Ein Rahmen steht für einen bestimmten Bildschirm oder Abschnitt Ihres Designs. Um einen Rahmen zu erstellen, klicken Sie auf das Rahmensymbol in der linken Werkzeugleiste oder verwenden Sie die Tastenkombination F. Klicken Sie einfach auf den Hauptbereich und zeichnen Sie Ihren ersten Frame. Auf der rechten Seite können Sie bei Bedarf die Größe des Rahmens ändern . Figma bietet eine Vielzahl von Tools, mit denen Sie Ihre Vision entwerfen und Hier sind ein paar wichtige Tipps, um Ihnen den Einstieg zu erleichtern. Werkzeug bewegen. diesem Tool können Sie Objekte innerhalb Ihres Entwurfsformwerkzeugs auswählen und verschieben . Verwenden Sie dieses Werkzeug, um Formen wie Rechtecke, Kreise und Polygone zu zeichnen . Das Stiftwerkzeug. Mit dem Stiftwerkzeug können Sie Kostümformen und Passagen erstellen, indem Ankerpunkte platzieren und deren Kurven anpassen. Tool für Texte. Mit einem Textwerkzeug können Sie Ihren Designs einen EditText hinzufügen Lassen Sie uns abschließend das rechte Bedienfeld erkunden, in dem Sie eine Reihe von Steuerelementen zur Feinabstimmung Ihrer Designs finden Lassen Sie uns zuerst ein Rechteck zeichnen. Sie können Tastenkombinationen verwenden, und wir werden die Größe des Rechtecks auf der rechten Seite ändern Rechtecks auf der rechten Seite nur um zu versuchen, wie das funktioniert Lassen Sie uns das rechte Panel genauer untersuchen. Hier sind meiner Meinung nach die wichtigsten Merkmale , um sich der Ausrichtungen bewusst zu sein. Mit diesen Steuerelementen können Sie Objekte sowohl horizontal als auch vertikal ausrichten . Beschränkungen können Sie definieren, wie sich Objekte verhalten und reagieren, wenn die Größe des Entwurfs geändert wird. Figma bietet vier Arten von Einschränkungen. linker, rechter, oberer und unterer Skala und feste Einschränkung Sie können mit ihnen herumspielen und sehen, wie es funktioniert. Ebeneneinstellungen. Mit dieser Auswahl können Sie Ebeneneigenschaften wie Deckkraft, Mischmodi und Effekte anpassen wie Deckkraft, Mischmodi und Effekte Figma bietet ein Farbauswahl-Tool, mit dem Sie auf einfache Weise Farben auswählen und auf Ihre Designelemente anwenden Es kann eine Füllung oder ein Strich sein, aber wir werden uns das im nächsten Abschnitt genauer ansehen. Und das war's für diesen kurzen Überblick über Figma. Denken Sie daran, dies ist nur die Spitze des Eisbergs. Figma bietet zahlreiche leistungsstarke Funktionen, die erkunden können und mit denen Sie Ihre Designideen zum Leben erwecken In der kommenden Lektion werden wir das Effektpanel ins Rampenlicht rücken. Und glaub mir, es wird Fn beschatten. Wir werden in die Schatteneinstellungen eintauchen und verschiedene Setups erkunden Machen Sie sich bereit, die magische Kraft der Schatten für Ihre Interfaces zu erleben , die magische Kraft der Schatten für Ihre Interfaces Wir werden verschiedene Setups ausprobieren und Sie werden sehen, wie einfach es mit Shadow ist, den Elementen und Ihren Interfaces ein Volumen hinzuzufügen den Elementen und Ihren Interfaces Also lass uns anfangen. 4. Figma: Schatteneffekt-Bedienfeld: In dieser Lektion werden wir uns eingehender mit einem der Figmas Schatteneffekte. Machen Sie sich bereit, es in Ihre Designs zu integrieren. nur Schatteneffekte verwenden, können Sie Ihren Designelementen einen Hauch von Realismus und Tiefe verleihen Lassen Sie uns beginnen und herausfinden , wie Sie Schatten in der Figma-Software anwenden Lassen Sie uns für diese Demonstration eine einfache Kreisform als Beispiel verwenden . Wir können es in der linken oberen Ecke finden. Okay, lass uns einen kleinen Kreis zeichnen. Um einen Schatten anzuwenden, wählen Sie die Form aus und navigieren Sie zum rechten Bereich. Einfach auf den Plus-Button klicken und schon findest du die Magie, nach der wir suchen, der Schatten. Schauen wir uns nun die verschiedenen Einstellungen an, die für die Erstellung von Schatten und Figma verfügbar sind Durch Anpassen dieser Einstellungen können Sie Ihrer Kreativität freien Lauf lassen und die Schatten anpassen , um den gewünschten Effekt zu erzielen Schauen wir uns zunächst die X- und Y-Positionen an. Diese Einstellungen steuern die horizontale und vertikale Positionierung des Schlagschattens. Sie können einzigartige Effekte erzeugen, indem die Werte jeder Achse anpassen Sie können es auch mit negativen Zahlen versuchen, und das funktioniert auch in die entgegengesetzte Richtung. Sehen Sie, wie Sie den Schatten in verschiedene Richtungen bewegen können , indem Sie die Werte anpassen. Sie können damit experimentieren und dynamische Effekte erzeugen. Unschärfe. Die Unschärfeeinstellung bestimmt die Weichheit oder Schärfe Höhere Unschärfewerte erzeugen einen weicheren, diffuseren Schatten, während niedrigere Löhne zu einem klaren Beachten Sie, wie der Schatten weicher oder schärfer wird, wenn wir den Unschärfewert anpassen Spielen Sie mit dieser Einstellung herum, um den gewünschten Effekt zu erzielen. Fahren wir mit der Einstellung „Streuung“ fort, der die Größe oder Ausdehnung des Schattens um die Form herum gesteuert wird. Wenn Sie den Streuwert erhöhen, erstreckt sich der Schatten weiter von den Kanten der Form entfernt. Schau dir an, wie sich der Schatten ausdehnt oder kontrastiert, wenn wir diesen Pred-Wert ändern dieser Einstellung können Sie die Reichweite des Schattens steuern und so interessante visuelle Effekte erzeugen, so interessante visuelle Effekte erzeugen, die wir in unseren nächsten Lektionen auf jeden Fall verwenden werden. Sie können auf jeden Fall die Farbe des Schattens ändern, die Farbeinstellung, die an den Farbton des Schattens erinnert. Sie können jede Farbe wählen, die zu Ihrem Design passt oder zum Wüstenambiente passt. Entdecken Sie verschiedene Schattenfarben, um die Stimmung Ihres Designs zu verbessern. Spielen Sie mit verschiedenen USA herum, bis Sie das perfekte Spiel gefunden haben . Die Opazitätseinstellung steuert die Transparenz des Schattens Höhere Opazitätswerte führen einem ausgeprägteren und durchsichtigeren Schatten Niedrigere Werte machen den Schatten dagegen subtiler. Eine Anpassung der Opazität kann die Schattenwirkung dramatisch verändern Experimentiere mit verschiedenen Levels, um das perfekte Gleichgewicht zwischen Dauerhaftigkeit und Plötzlichkeit Figma bietet auch einen inneren Schatten , der einen Schatteneffekt innerhalb der Form und nicht außerhalb erzeugt innerhalb der Form und nicht außerhalb erzeugt Es kann verwendet werden, um Gehörlose hinzuzufügen oder Botschaftseffekte zu simulieren. Wir werden es auf jeden Fall benutzen. Das innere Schattenbild eröffnet eine ganz neue Palette von Behinderungen. Probiere es aus, um den Touch zu verleihen und Tiefe zu erzeugen. Eine weitere bestehende Feature-Dimension ist, dass Sie mit Figma mehrere Schatten auf eine einzelne Form anwenden können Das bedeutet, dass Sie verschiedene Schatteneffekte tragen und kombinieren können , sodass Sie noch mehr Kontrolle über Ihre Designs haben. Visuelle Wirkung allein mit dem Schatten können Sie UI-Elementen verschiedene Schritte hinzufügen und eine Art statische Animation hinzufügen. Zum Beispiel hat die Schaltfläche für den Hover-Status einen kleineren Schatten als die Standardschaltfläche und es wird das Gefühl vermittelt, dass sie sich bewegt und der Benutzer physisch In der nächsten Lektion werde ich Ihnen zeigen, wie Sie mehrere Schatten- und Lichteffekte auf ein Element anwenden können. Unser Ziel ist es, Neumorphe Elemente zu erstellen und sie dann mithilfe Ihrer Designs in Ihren Benutzeroberflächen zu platzieren mithilfe Ihrer Designs in Ihren Benutzeroberflächen 5. Schatten und Licht-Architektur: Bevor wir uns mit der Elementerstellung für die zukünftige Benutzeroberfläche befassen , wir einen kurzen Blick auf die Licht- und Schattenarchitektur in einfachen Worten. Wenn wir Dinge auf einer ebenen Fläche dreidimensional aussehen lassen wollen, müssen wir verstehen, wie Licht funktioniert und wohin die Schatten gehen sollten , damit es echt aussieht. Indem wir Gleiter bewegen, können wir Schatten in verschiedene Richtungen bewegen und sie dunkler oder heller werden lassen Dies hilft uns, unsere Designelemente zu formen und sie so aussehen zu lassen, als hätten sie Volumen und Form. Stellen wir uns also vor, wir haben eine Lichtquelle. Ich platziere es in der linken oberen Ecke. Wenn wir die Benutzeroberfläche selbst, die Benutzeroberfläche, erstellen, müssen wir natürlich die Benutzeroberfläche selbst, die Benutzeroberfläche, erstellen, kein Licht abspielen , aber wir müssen uns zumindest vorstellen, wo es ist, um unsere Schatten richtig zu platzieren. Also, falls noch einmal, werde ich einen Kreis zeichnen. Und wie ihr hier schon sehen könnt, habe ich einen Schatten hinzugefügt. Und der Schatten für dieses spezielle Beispiel sollte sich auf der gegenüberliegenden Seite der Lichtquelle befinden. Und Licht reflektiert oder die Lichtseite dieses Elements ist tatsächlich dem Licht zugewandt. Ein weiterer Tipp ist, dass, wenn Sie einige Objekte näher am Licht platzieren, Sie sehen können, dass der Schatten eine etwas kräftigere Farbe hat . Es ist viel stärker. Und für die Elemente , die ein bisschen weit vom Licht entfernt sind , wird die Freude weniger stärker und sattelter, wie bei diesen Eine weitere Sache, die Sie zwischen diesen beiden verschiedenen Kreisen sehen können . Es fühlt sich ein bisschen größer an als dieser. Und dieser große Kreis hat eine flachere Form. Es ist auch Teil der Light Architecture und Shadow Architecture. Wie Sie hier sehen können, ist der Schatten sehr klein und subtil. Und dann haben wir das Gefühl, dass es sehr flaches Element handelt und dieser Schatten ein sehr flaches Element handelt und dieser Schatten etwas länger ist und dieser Kreis dadurch größer Sie können es auch in Ihrem Raum in der Nähe finden. Du. Schauen Sie jetzt auf Ihren Schreibtisch oder in Ihr Zimmer und Sie werden sehen, und Sie werden feststellen, dass je höher sie sind, natürlich einen längeren Schatten haben , natürlich einen längeren Schatten Ein weiterer Tipp, an den wir uns erinnern sollten, wenn wir zum Zeichnen von Interfaces zurückkehren, ist, dass all unsere Schatten, sie sollten für alle Elemente in einer Oberfläche auf derselben Seite platziert werden . Was ich damit meine, stellen Sie sich vor, wir platzieren dieses Licht auf der anderen Seite, auf der rechten Seite. Es bedeutet also, dass all unsere Schatten hier auch diesen beiden Begriff kannten. Also lass uns das versuchen. Die gleiche Logik ist hier. Das Licht befindet sich in der rechten oberen Ecke. Alle Elemente haben ihre Schatten auf der gegenüberliegenden Seite. Stellen Sie sicher, dass alle Elemente Schatten auf derselben Seite haben. Andernfalls erhalten Sie das P38-Ergebnis. Wenn wir die Benutzeroberfläche entwerfen und unsere normalen Elemente verwenden , die wir erstellen werden. Wir sollten sie vorsichtig und vorsichtig verwenden, rund um die Benutzeroberfläche als auch für den Benutzer Also lasst uns mit der nächsten Lektion beginnen und endlich unsere Elemente für die Interfaces erstellen unsere Elemente für die Interfaces 6. Erstellen verschiedener neumorpher Elemente: In dieser Lektion beginnen wir mit einem sehr einfachen Setup. Denken Sie daran, dass unser Ziel darin besteht, einen Volumeneffekt zu erzielen. Aber auf der ebenen Fläche. Das erste, was ich Ihnen zeigen möchte, ist, einem Element einfache Schlagschatten hinzuzufügen. Kommen wir also zurück zu Figma. Aber zuerst erstellen wir einen Kreis. Wir verwenden den Hotkey 0 oder suchen einfach unser Element in der oberen linken Ecke Ich würde dir raten, keinen wirklich großen zu haben , sonst können Shadow und unsere Spezifikationen funktionieren wollen und werden zu klein sein. Wählen wir eine Größe von 160. Und noch eine wichtige Sache: Sie müssen sicherstellen, dass Ihr Hintergrund ebenfalls eine Beta-Version verwendet, beispielsweise eine warme Farbe. Dies ist das richtige Hexadezimalfeld und der Kreis selbst muss ebenfalls dieselbe Farbe haben, wie er es sein wird. Sie werden sehen, dass das realistischer aussieht , wenn Sie die Hintergrundfarbe ändern und die Zeichenfläche selbst auswählen Und dann ändere hier das Feld auf das benötigte Hexadezimalfeld, um auch die Kreisfarbe auf der rechten Seite zu ändern . Wenn der Kreis ausgewählt ist, können Sie hier die Farbe ändern, oder Sie können ihn einfach platzieren. Sie können es einfach von der Oberfläche auswählen, indem Sie klicken, ich bin in der Tastatur. Okay, versuchen wir also, unser Ziel zu erreichen und das erste neumorphe Element zu erstellen, indem wir auf der rechten Seite auf dieses Plus klicken Also fügen wir den ersten Schlagschatten hinzu. Es, weißt du, es sieht schon ganz nett aus. Aber versuchen wir, einen realistischeren Effekt zu erzielen. Ich werde mich also an die Spezifikationen halten, die bereits für diesen speziellen Kreis vorbereitet wurden. Schauen wir uns das mal an. Existiert 20. Warum ist fast 20? Der Blurb-Parameter ist 14. Und Spread Ich werde in diesem Beispiel das Farbhexadezimalfeld nicht verwenden. Lass uns vor einem E 916 ausmalen einem E 916 Nett. Unser Element sieht also schon sehr realistisch aus. Und da du dich an den Scheinwerfer auf der linken Seite erinnerst, habe ich ihn immer noch hier, nur um es dir zu zeigen und um der Struktur zu folgen, die wir besprochen haben. Fügen wir nun einen weiteren Effekt hinzu , der unser Licht sein wird, ebenfalls den Schlagschatteneffekt. Also klicken wir im rechten Bereich erneut auf Plus. Und jetzt werden wir die Angestellten benutzen, um zu bauen. Dies spiegelt sich auf der linken Seite wider. Okay, also lass uns die weiße Farbe wählen, genau wie hier. Und die Opazität wird acht Prozent betragen. Und all unsere Positionen werden der Position des Schattens selbst entgegengesetzt sein . Es ist also minus -20 und wieder -20, und das Gebläse ist 16. Nett. Schauen wir uns an, wie es aussieht. Dies ist also unser erstes Neumorphic Elements , das tatsächlich bereits in der Benutzeroberfläche verwendet werden kann Aber versuchen wir es mit anderen Spezifikationen. Das ist etwas subtiler. Lass uns ein bisschen mehr flache Elemente bauen. Elemente. Ich werde den gleichen Kreis kopieren, weil einige Spezifikationen ähnlich strahlen und es für uns einfach einfacher ist. Nochmals. Gehen wir zum Abschnitt Effekte. Ändere den Schlagschatten nach hinten. X ist also sechs mal sechs Klappentext 16. Und die Farbe ist, wie Sie sehen können, dieselbe. Und lassen Sie uns die Opazität auf 17 ändern. Schauen wir uns das an. Das Licht, die helle Seite hat auch ein bisschen andere Spezifikationen. Also verwenden wir minus zehn oder auch X minus, minus zehn. Warum blauer? Er ist 30. Der Rest ist richtig. Farbe und Opazität. Wir haben uns schon geändert Okay, schauen wir uns das an. Wenn Sie das mit Elements vergleichen, können Sie sehen, dass dies etwas flacher aussieht und dieser Kreis etwas faktorisierender Lassen Sie uns also ein anderes Beispiel ausprobieren, das in Bezug auf unsere Spezifikationen etwas komplexer sein wird, und wir müssen vier Schatten mit unterschiedlichen Einstellungen hinzufügen. Der erste Schlagschatten mit diesen Parametern ist 66160 Die Farbe ist dieselbe, 70% ihrer Kapazität. Okay, dann müssen wir einen weiteren Schlagschatten hinzufügen. Sie werden den Unterschied zwischen diesen beiden Elementen sehen. Dass dieser Kreislauf natürlicher und komplexer sein wird, da wir noch mehr Effekte haben werden. Also fügen wir einen weiteren Schatten mit diesen Parametern für vier bis vier Gebläse hinzu , wobei wir die Farben verwenden. Wohingegen konkav nach oben gerichtet. Es ist also 55550 und die Opazität ist zehn. Okay? Und wir werden es platzieren, du kannst sie bewegen. Schatten überall. Wir werden es unten platzieren. Der Lichteffekt beträgt minus zehn, minus 1034 Unschärfe. Und die Angestellte natürlich. Und ich nehme Opazität, Transparenz ist ein T. Fügen wir noch ein Licht hinzu, reflektiert Und es ist ziemlich ähnlich, aber direkt. Es ist also minus zehn. Minus zehn. Blur ist also zehn. Die Farbe weiß. Und sie sind passiv. Ja. Okay, wir haben also vier verschiedene Einstellungen für dieses Element. Und lassen Sie uns sehen, was der Unterschied zwischen diesem und diesem sehr subtilen Unterschied ist. In der Benutzeroberfläche werden Sie jedoch feststellen , dass dieses Element etwas natürlicher aussieht. Beim Neumorphismus geht es darum, durch die Verwendung von Schatten und Licht einen 3D-Effekt zu erzielen Verwendung von Schatten und Licht einen 3D-Effekt Die Elemente erscheinen also oder fügen sich in die Oberfläche Beginnen wir mit der nächsten Lektion und lernen Sie mehr über konvexe und konkave Elemente 7. Konkave und konvexe Elemente: Beginnen wir mit der Erstellung konvexer Elemente. Kontextformen erscheinen aus dem Hintergrund und laden zum Berühren ein. Konkave Elemente wirken sofort als wären sie in die Oberfläche gekrümmt Natürlich sind Schatten und Licht die wichtigsten Zutaten, um diese Effekte zu erzielen. Hier habe ich verschiedene Elemente und Styles erstellt. Und B wird sie zusammen erstellen. Ich habe mich bereits entschieden, für jeden Stil dieses Elements einen Namen zu haben. Und wir werden in Figma eine weitere Option sehen , mit der Sie auch für die Zukunft speichern können , um sie für andere Elemente zu verwenden Beginnen wir mit unseren ersten konkaven und konvexen Elementen. Einer wird konvex, hoch und scharf sein, und ein anderer konkav, tief Ich platziere es, schlage auf die Oberseite und wir wählen ein anderes Formwerkzeug, das ein Rechteck sein wird Die Brüste befinden sich auf Ihrer Tastatur oder gehen Sie einfach zur linken Seite, in die obere Ecke. Und spitzes Rechteck. Die Größe. Geben wir 150 Pixel mal ein Fünftel ein. Und wichtiger Punkt. Wählen wir auch ihre Hintergrundfarbe wie diese, y1, y1, y1 Es ist eine sehr helle Farbe auf fast Weiß, unterscheidet sich aber immer noch etwas von Weiß. Ich kann es dir zeigen, wenn ich will, platziere ein Rechteck und mache es weiß Wie Sie sehen, ist es ganz anders. Es hat wie diese graue, warme, graue Farbe. Okay, wir haben also unser Rechteck. Lassen Sie uns auch die Ecken etwas glatter machen. Ich gebe hier wahrscheinlich 32 ein. Ja, das ist nett, um diese schönen glatten Elemente zu erstellen. Und lassen Sie uns in unsere FX-Einstellungen eintauchen. Und wir müssten zwei Schlagschatten und zwei innere Schatten erzeugen , um diesen Effekt zu erzielen. Und vergiss nicht, die gleiche Farbe des Rechtecks wie unser Hintergrund zu wählen die gleiche Farbe des Rechtecks wie unser Hintergrund Lass uns das zusammen machen. Ich mache es einfach mit ihnen in diesem Ton hier. Okay. Lassen Sie uns also den ersten Schlagschatten erstellen. Klicken Sie einfach erneut auf Plus und auf das Effektpanel. Und wir werden diese ersten Einstellungen verwenden, um den Schatteneffekt zu erzielen und es wird unser Schatten draußen sein. X ist also 15. Warum ist 15? Blur ist 35. Die Opazität der Transparenz beträgt 35. Und lass uns diese Farbe wählen. Wir werden es in dieser Lektion oft verwenden. 806-80-6806. Okay, das sieht schon nett aus. Okay, dann lassen Sie uns einen weiteren Schlagschatten erstellen , den unser Licht nach außen reflektiert. Also irgendwo in der linken oberen Ecke. Es ist also minus zehn. Minus zehn entspricht 40 Farben, da dies das hellste Weiß ist. Sei einfach froh, oder sechsmal. Leather F. Und ihre Opazität, wie Sie sehen können, ist sie 70. Nett. Dann rate ich dir auch, das sieht schon gut aus. Ich rate Ihnen auch, mehr Tiefe zu verleihen und unsere Form auszuwählen und einen Effekt hinzuzufügen. Wir müssen den inneren Schatten wählen, anstatt den Schlagschatten Sei vorsichtig damit. Und wir werden fünf Warums platzieren. Fünf, Blur ist 40. Und die Farbe werden wir, wie ich bereits erwähnt habe , diesmal oft verwenden. Und Duane T ist unsere Undurchsichtigkeit. Okay, jetzt hat es so etwas wie ein konvexes Element, aber jetzt hat es ein bisschen konkaves Es ist also, als würde man ein bisschen in die Mitte drücken. Und fügen wir auch ein Feuerzeug oder einen Ausfluss hinein, der auch drinnen sein wird Innerer Schatten mit weißer Farbe als unserem Lichteffekt. Und mal sehen, es ist minus zehn -10,44 Unschärfeeffekt und 17%. Okay, jetzt haben wir es. Jetzt. Lassen Sie uns die interessante Funktion nutzen, die Figma bietet Wir werden das speichern Lassen Sie uns diesen Fx zusammen in einem Stil speichern. Ich werde diesen Stil Konvex nennen, groß, scharf, aber du kannst ihn nennen, wie du willst. Also, wie macht man das? In diesem Effektfenster können Sie diese vier Punkte sehen. Wir klicken hier und wir klicken erneut auf das Plus, erstellen einen Stil. Dies ist der Zuständigkeitsbereich unseres Stils. Und ich werde den Namen Convex tall sharp platzieren und diesen Stil kreieren Siehst du, jetzt erscheint es hier. Und wenn ich ein anderes Rechteck zeichne, oder lassen Sie uns eine kreisförmige Ellipse Und jetzt gehe ich zum Effektpanel und sehe meinen Stil hier, hier, Convex Talk Sharp, und ich klicke darauf Und es hat bereits alle Einstellungen. Und das ist eigentlich sehr praktisch. Es ist sehr schnell, weitere Elemente für Ihre Oberflächen zu erstellen , wenn Sie sie jetzt speichern. Und heute werden wir sechs verschiedene Stile kreieren. Du kannst sie bereits in der nächsten, unseren Lektionen verwenden, um einige Interfaces zu erstellen. Okay, lass uns weitermachen. Und wir haben diesen konkaven, tiefenschärferen Namen für diesen Stil Und versuchen wir noch einmal, den gleichen Effekt zu erzielen , den wir hier sehen. Auch hier zeichne ich ein Rechteck, das eins mal 150 Pixel groß sein wird eins mal 150 Pixel groß sein Und wir werden wieder runde glatte Ecken haben. Vergessen Sie auch nicht, dieselbe Farbe für den Hintergrund auszuwählen dieselbe Farbe für den und direkt zu den Effekten zu wechseln. Also zuerst Shadow outside, das ist unsere Farbe, die ich wieder verwenden werde. Und X ist 15. Warum ist 15? Niedriger? Ist 40. Wie Sie sehen können, sind die Parameter einander die ganze Zeit sehr ähnlich oder nur unterschiedliche Positionen, unterschiedliche, meistens Unschärfe und Opazität Und dann haben wir wirklich einen ganz anderen Effekt. Okay, also der erste Schlagschatten ist fertig. Dann lassen Sie uns Außenlichtreflexe erzeugen. Dafür bräuchten wir wieder Drop-Shadow. Und für das Licht wird immer die richtige Farbe verwendet. X ist minus zehn. Y ist minus zehn ist 40. Und bei. Okay, als Nächstes verwenden wir einen inneren Schatten, inneren Schatten und eine Acht für die X, Y-Farbe. Für T wie Boston Tea und Blur ist 15. Nett. Und die letzten Inner Shadow werden ihre Form wählen. Der letzte innere Schatten wird minus acht sein. Minus acht. Die Farbe ist weiß, der Nerv ist 15 und die Opazität ist 60. Okay, nett. Und wir können wieder einen Stil kreieren, wieder vier Punkte plus, und ich nenne ihn konkav, tiefscharf Auch hier können Sie Ihren Namen verwenden , der für Sie bequem ist Erstellen Sie einen Stil. Okay, jetzt lass uns weitermachen. Und lasst uns diese Styles kreieren , die etwas flacher sind. Und ich tauche direkt in die Entstehung dieses Elements ein. Lassen Sie uns noch einmal das Rektum zeichnen. Vergessen Sie nicht, die Umschalttaste zu verwenden, um ein Quadrat zu erstellen, eigentlich nicht das Rechteck Und die Größe ist dieselbe, 150, die Ecke ist 30 bis zu den meisten Ecken, Ecken und Radien. Und die Farbe, die du wieder auswählst, die Hintergrundfarbe. In der nächsten Lektion werde ich über Farben sprechen und darüber, wie Sie wirklich coole und schöne Farben für Ihren Neomorphismus kreieren wirklich coole und schöne Farben für Ihren Neomorphismus Und sie sind mehr Elemente. Ich werde dir einige meiner Geheimnisse zeigen , wie ich sie normalerweise erschaffe. Lassen Sie uns also in unsere Stile eintauchen. Zuerst. Nochmals, Effekte. Lass den Schatten für 4 h Höhe fallen. Ich werde um 6.40 Uhr ausmalen, ist unser Policy-Team. Okay. Als nächstes erzeugen wir direkt den nächsten Schlagschatten, der der hellere Fluss draußen sein wird. Und meins als Angestellter. Dan, zehn oder 40,74, Opazität. Der nächste Effekt ist innerer Schatten. Auch hier ist unsere dunkle, warme Farbe fünf. Warum 5 h 40? 20% Und letzter Schattenlichtreflex, es ist meins und dann minus zehn, 40. Und ja, natürlich ist die Farbe weiß und hat eine Deckkraft von 70%. Und wir haben unser Element mit allen benötigten Styles. Speichern wir es jetzt in unserer Bibliothek. Auch hier vier Punkte im neuen Stil. Alkoholisieren Sie es Convex low, Sharpe, und legen Sie es in ihre Bibliothek Lassen Sie uns direkt mit der nächsten Komponente beginnen. Okay, wir erstellen das konkave Element 15030, um die Hintergrundfarbe zu formen, zu koordinieren, zu reduzieren und uns mit den Effekten zu befassen Erster Schlagschatten. Dieser 18. Folgen Sie den Einstellungen hier. Farbe. Die Unschärfe beträgt 30,15% da sie sie an einen anderen Schlagschatten weitergeben Der Lichteffekt draußen. Auch hier ist die Farbe für unsere Lichter weiß , minus zehn, -1.030,30% Als nächstes kommt der innere Schatten. Schatten, und die Farbe für Y ist vier, Unschärfe ist acht und positive 60. Und der letzte, das Licht wird im Inneren reflektiert. Auch hier ist es innerer Schatten, es ist minus vier. Minus vier. Farbe. Weiß. Blur steht für Getränk, Tee und Opazität Lass es uns speichern. Stilbibliothek. Also ein Kommentar, wenn du das ausspeicherst, die Elemente sollten natürlich ausgewählt werden, müssen ausgewählt werden. Und Sie stylen konkaven, wenig schärferen Code. Und die nächsten beiden Elemente, sie sind etwas flüssiger. Auch nett für einige Benutzeroberflächen und du kannst sie auch für deine Ideen verwenden. Lassen Sie uns das erste konvexe glatte Element erstellen. Wieder derselbe Tango. Ich denke, wenn Sie all diese sechs Elemente wiederholen , werden Sie lernen. Und Sie werden verstehen, was eigentlich und wie all diese verschiedenen Parameter zusammenspielen, um einen konkaven Effekt oder einen konvexen Effekt zu erzielen Wie Sie sehen können, wenn Sie ältere Schatten auf der rechten Seite haben, und wie in diesem Beispiel, auf der Außenseite. Und es gibt mehr, als es sich anfühlt, als wäre das Element konvex Wenn Sie jedoch einen stärkeren Schatten hineinlegen , fühlt es sich an, als wäre dieses Element konkav Fahren wir mit unserem nächsten Stil fort. Auch hier ein Fünftel für sie, Größe 30 bis vier, Eckenradius Die Hintergrundfarbe, und tauchen Sie zuerst in die Effekteinstellungen ein, ist unser Schlagschatten, und die Einstellungen werden überschüssige Null-Bit verschiedene Einstellungen sein. Aber ich denke, was wir erreichen wollen, ist ein glattes konvexes Element mit einer glatten Form Null ist also Null, Y ist vier, Unschärfe ist 30 und die Farbe ist ein bisschen anders Das ist unsere Hintergrundfarbe. Nochmals, lassen Sie es uns sagen. Nächstes Element. Licht wird nach außen reflektiert. Nochmals. Wir fügen sie hinzu. Wir haben den Schlagschatten bearbeitet, zehn für 54. Warum? Dann? Dunkle, warme Farbe, billiger Prozentsatz ist positiv. Und lerne 40. Fügen wir inneren Schatten hinzu. Wenn zehn oder 15. Warum? Farbe ist weiß? Laura? 14. Und Opazität im Blick, werde tatsächlich dazu auch etwas Rot, das du im Sommer gebrauchen kannst Aber lassen Sie uns das beenden. Fügen wir auch einen inneren Schatten für sie hinzu. Der Schatten selbst, nicht das Licht und die Farbe. Und die Farbe sollte anders sein als der Rest, wird zu tief was wir gemacht haben, minus 2010 ist die Unschärfe 20,40% Okay? Und wie zuvor kreieren wir den Stil Convex reibungslos Ich nenne es und speichere es in unserer Bibliothek. Okay, dann das letzte Element in dieser Lektion, noch einmal, lassen Sie uns das Rechteck erstellen Gleiche Größe und gleiche Ecke, Radius 32, gleiche Farbe für sie. Wählen Sie die Elemente aus dem Hintergrund aus und fügen Sie den Schlagschatten hinzu. Zuerst 188-30-4806 für die Farbe und 15 für den und 15 für Schatten ist minus vier, X minus Y. Blurb und 34 Pasiphae, die Farbe ist weiß 88 ist eine schmutzige Farbe. Und 40 in der Form von Bassett. Und letzter innerer Schatten. Also minus vier X minus Y. Vier Tupelunschärfe, 60, Opazität Und wir sind mit dem letzten Element in dieser Lektion fertig. Speichern wir es jetzt in unseren Styles. Ich werde es konkav glatt nennen , um es in den nächsten Lektionen zu verwenden Jetzt haben wir gelernt, wie man mit all ihren Effekten manipuliert, um verschiedene Stile für konkave und konvexe Elemente mit unterschiedlicher Tiefe und auch einem glatten Effekt zu erzeugen Elemente mit unterschiedlicher Tiefe und auch einem glatten Effekt zu und auch Und in der nächsten Lektion werde ich über Farben sprechen. Das ist sehr wichtig. Wir sehen uns in der nächsten Lektion. 8. Die richtige Farbe auswählen: Die Wahl der richtigen Farbe für Ihre Elemente und Formen ist entscheidend für ein atemberaubendes Neumorphic einige einfache Regeln befolgen, können Sie ein visuelles Erlebnis schaffen, das sich warm, kalt oder etwas dazwischen anfühlt , kalt oder etwas dazwischen In dieser Lektion wollte ich Ihnen eine einzigartige Technik vorstellen, wie Sie die Farbe tatsächlich von Grund auf neu erstellen können. Ich weiß, dass es für einige Designer manchmal sehr schwierig sein kann richtige Farbe zu finden. Also lasst uns gleich reinspringen. Aber lassen Sie uns zuerst über warme und kalte Autos sprechen. den Unterschied zwischen ihnen verstehen, können Sie den Wüstenmodus in Ihren Neumorphic-Designs einrichten. Warme Farben rufen ein Gefühl von Grobheit, Energie Grobheit Kalte Farben hingegen vermitteln ein Gefühl von Ruhe und Arroganz Denken Sie daran, wenn es darum geht , warme und kalte Autos zu unterscheiden, stellen Sie sich bläuliches Grün als Erkältung Und Rottöne, Orangen und Rottöne, Gelbtöne wie warm. Fahren wir im Figma-Interface fort. Und ich habe bereits zwei Zeichenflächen für unsere nächste Lektion vorbereitet , die Erforschung von Farben Wenn Sie dasselbe tun möchten, gehen Sie auf die linke Seite der Benutzeroberfläche, suchen Sie das Menü, wählen Sie Rahmen aus und zeichnen Sie eine beliebige Rahmengröße. Beginnen wir nun mit der Auswahl der Farbpalette. Die Wahl der richtigen Farbe ist für jede Benutzeroberfläche von entscheidender Bedeutung . Wir müssen die Oberfläche, das Element selbst und den Schatten berücksichtigen . Für die Beleuchtung ist es normalerweise besser, nur ein weißes Halsband zu verwenden, das sechs mal F im Sechskant ist. Um es nicht schwieriger zu machen, zeige ich Ihnen eine Technik, mit der Sie die richtige Farbe für Ihre Benutzeroberfläche auswählen können. Zuerst zeichne ich ein Rechteck. Sie können die R-Taste verwenden, um eine zu erstellen. Die Größe spielt in dieser Lektion keine Rolle , da wir uns nur auf Farben konzentrieren. Die Farbe des Rechtecks spielt keine Rolle, entweder rot, grün oder blau Sie können im Farbwähler eine beliebige Stelle auswählen und die Stelle irgendwo im Goldenen Schnitt Was bedeutet das? Ganz rechts, aber etwa ein Drittel der Linienlänge von rechts Das ist es nicht unbedingt, aber ich würde sagen, es funktioniert besser für weichere, ruhigere Farben Und du wirst sehen warum. Lassen Sie uns außerdem die Transparenz der Farbe festlegen. Gehen Sie dazu etwas runter und setzen Sie es auf fünf Prozent. Drücken Sie die Eingabetaste, um die Farbe anzuwenden. Zeichne jetzt ein weiteres Rechteck, das das vorherige Rechteck ein bisschen so verdeckt Die Farbe für dieses Rechteck sollte so einfach sein, dunkelgrau, mit einer Transparenz von ebenfalls 5% Also mischen wir zwei Farben , um die Farbe zu finden, die wir suchen, die unsere Hauptfarbe sein wird. Bereitstellung der Schnittstelle. Nenn das, oder warm, in dem Fall eher kälter, ich würde sagen Stimmung Die graue Farbe hilft, den Ton zu tief einzuprägen. Um den Hex-Wert für diese Farbe herauszufinden, zeichnen Sie ein weiteres Rechteck, einfach irgendwo hier drin. Und drücken Sie I auf Ihrer Tastatur oder verwenden Sie den Farbwähler und wählen Sie die Farbe Rot, die Kugeln der Farben überlappen sich im vorherigen Rechteck Dies wird unsere Hauptfarbe für die zukünftigen Neumorphic Und ich zeige dir, was du tun kannst, besuche später. Lassen Sie uns nun ein paar weitere Farben erstellen. Platziere hier irgendwo ein weiteres Rechteck. Wählen Sie unsere erste aus. Erstellen Sie dieses Rechteck und verschieben Sie diese Auswahl in eine beliebige Farbe. Sie werden feststellen, dass die Farbe des ersten Rechtecks etwas wärmer oder kälter Nehmen wir diesmal eine wärmere Farbe. Nochmals. Verwenden Sie das Häkchen auf Ihrer Tastatur, um das Hexadezimalfeld der überlappenden Farben auszuwählen Machen wir noch einmal dieselbe Übung und erstellen Sie ein weiteres Rechteck, um das vorherige Rechteck schnell zu kopieren Drücken Sie Alt, während Sie es auswählen und verschieben. Jetzt haben wir drei Farben, die wir in unserer Neumorphic-Oberfläche verwenden können Als Nächstes wählen wir die richtige Farbe für Schatten aus. Und ich zeige Ihnen eine Technik, die dazu beiträgt. Erstellen Sie einen Rahmen, in dem wir mit Schatten und Stilen arbeiten. Verwenden Sie den Farbwähler. Drücken Sie erneut I auf der Tastatur und wählen Sie die erste Farbe aus, die wir erstellen. Lassen Sie uns jetzt, erst kürzlich, Effekte aus der vorherigen Lektion verwenden und ihnen Farben hinzufügen. Gehen Sie dazu zum Effektpanel auf der rechten Seite. Und du solltest all deine Styles hier sehen. Wenn Sie sie nicht sehen, stellen Sie sicher, dass Sie in derselben Figma-Datei arbeiten, der wir in der vorherigen Lektion gearbeitet haben Sie können diese von uns erstellten Styles verwenden und sie in Zukunft in das Designsystem umwandeln. Wir haben ein weiteres Rechteck erstellt und einen Stil ausgewählt, den Sie zuvor verwendet haben Für dieses Rechteck wird Konvex ausgewählt, wenn der Name niedrig ist, wenn Sie der Namenskonvention aus der vorherigen Lektion folgen aus der Die Farben des Hintergrunds und des Elements passen jedoch nicht gut zusammen. Um dies zu beheben, machen wir das Rechteck zunächst mit 32 Pixeln des Eckenradius etwas glatter zunächst mit 32 Pixeln des Eckenradius etwas Löscht diesen Stil, um die Farben des Schattens und der Oberfläche zu ändern Klicken Sie dazu auf die kleine Schaltfläche hinter den benannten Stilen. Jetzt können wir alle Schlagschatten und inneren Schatten unseres Schöpfers aus der vorherigen Lektion für diesen speziellen Stil sehen alle Schlagschatten und inneren Schatten unseres Schöpfers aus der vorherigen Lektion . Führe alle Elemente mit dem Hintergrund aus, indem du dein Element auswählst und mit dem Farbwähler eine Farbe von der Hintergrundoberfläche auswählst Es sieht schon viel besser aus. Aus meiner Sicht passen die Farben und andere Farben jedoch nicht ganz zueinander. Lass es uns ein bisschen mehr krachen lassen. Wie können wir das erreichen? Nun, das ist die Farbe, die wir in der vorherigen Zeichenfläche erstellt haben in der vorherigen Zeichenfläche erstellt Lassen Sie uns ein weiteres Rechteck erstellen. Um das richtige Auto auszuwählen, wählen Sie die Hintergrundfarbe aus und öffnen Sie den Farbwähler Lassen Sie uns nun herausfinden, wo sich diese Farbe in der Farbpalette befindet. Es scheint bläulich, magentafarben zu sein. Um einen Farbton dafür zu wählen. Wir würden etwas Ähnliches im Ton bevorzugen, aber eher in einem gräulichen, schmutzigen Farbton und dunkler. Natürlich. Platzieren wir die Stelle irgendwo in der Mitte dieses Raums, teilen sie in der Mitte dieses Raums, in drei Teile auf und stellen die Opazität auf etwa 80 Prozent Großartig. Jetzt müssen wir die Farbe selbst auswählen, wie wir es auf der vorherigen Zeichenfläche getan haben Erstellen Sie ein weiteres Rechteck, wählen Sie diese Farbe und wir können das vorherige entfernen Sieht aus, dass es keine Opazität hat. Klicken Sie auf das Farbfeld , um es zu kopieren. Wählen Sie Ihre Form aus und gehen Sie zum Effektfenster. Schauen wir uns den Hintergrundschatten an. Wir müssen es auf die Farbe ändern, die wir gerade erstellt haben. Fügen Sie einfach den Hex-Wert hier ein. Der helle Teil bleibt eine Weile erhalten, sodass wir sie nicht berühren müssen. Jetzt haben wir wieder den inneren Schatten durch die Farbe ersetzt, die wir gerade erstellt haben. Kopieren Sie einfach das Hex und fügen Sie es ein. Lassen Sie uns nun unser Element eliminieren. Es sieht ziemlich nett aus, perfekt. Du kannst die erstellten Sterne verwenden und einfach die Farbe der Elemente ändern und schon hast du Schatten. Natürlich. Sie können auch mit den Farben im Farbwähler herumspielen , wenn Sie dies bevorzugen. Dies ist ein intuitiverer Ansatz Ich mache das oft ohne spezielle Techniken, aber manchmal hilft es , die Methode anzuwenden. Ich zeige dir nur, wenn sich etwas nicht richtig anfühlt. Okay, lassen Sie uns zusammenfassen. Es mag wie eine Menge Schritte erschienen sein, aber wenn Sie den Prozess einmal verstanden haben, wird er einfach und schnell. Also lass es uns ein paar Mal wiederholen und du wirst dich daran gewöhnen und dich daran gewöhnen. Lassen Sie uns eine weitere Zeichenfläche erstellen. Wählen Sie den Rahmen aus und zeichnen Sie eine andere Form. Ich wähle eine Farbe, die wir zuvor erstellt haben. Das zweite bisschen wärmer, würde ich sagen. Lassen Sie uns noch einmal den Schatten dafür finden. Zuerst. Machen Sie die Form etwas glatter mit einem Eckenradius von Natrium, um die Sauce zu pflücken, wie bei der vorherigen. Wählen Sie einen der Styles aus. Ich wähle ein Convex Elements. Du siehst, dass es nicht gut aussieht. Die grauen Autos scheinen dreckig zu sein. Lassen Sie uns den Vorgang wiederholen. Wählen Sie zunächst die Farbe des Elements aus dem Hintergrund aus, drücken Sie I und klicken Sie auf eine beliebige Stelle im Hintergrund. Versuchen wir nun, die Schattenfarbe zu erstellen. Wählen Sie das Rechteck aus, wählen Sie eine Stelle in der Farbpalette, an der sich die Farbe befindet, und verschieben Sie sie irgendwo in der Mitte dieses Quadrats Aber jetzt groß die Schattenfarbe. Denken Sie daran, dass dies zu hell sein wird, also müssen wir es ein wenig anpassen, weiteres Rechteck erstellen und die Farbe auswählen , die wir ohne Transparenz erstellt haben Und es auszuwählen ist unser eigener Hex. Wählen Sie das aus, drücken Sie Command C oder Control C unter Windows , um das Hex zu kopieren. Kehren Sie nun zu unserer Stilpalette oder unserem Stilmenü zurück und ändern Sie die Schatten. Es gibt vier Stile. Der erste Schatten, also geben wir hier die gewählte Farbe weiter. Dann bleibt das weiße Licht unverändert. Und den inneren Schatten müssen wir ebenfalls auf die geschaffene Farbe ändern. Schauen wir uns unser Element an. Es sieht ziemlich cool aus. So können Sie verschiedene Farben für das Interface verwenden. Wie versprochen, versuchen wir es mit einem helleren Schatten. Nochmals. Wählen Sie eine Farbe aus, die wir auf der vorherigen Zeichenfläche erstellt haben. Der letzte, der dritte, er ist ein bisschen grünlich. Stellen Sie den Eckenradius so ein, dass die Form glatter wird. Und gehe zum Effektpanel. Wählen Sie einen anderen Stil, trennen Sie ihn und vergessen Sie nicht, die Farbe für das Element aus dem Hintergrund auszuwählen die Farbe für das Element aus dem Hintergrund Vulkanisiert, aber immer noch ein bisschen dreckig. Lass uns die richtige Schattenfarbe erstellen. Wählen Sie ein Rechteck aus und vergrößern Sie die Farbe des Hintergrunds , um die zugehörige Farbgruppe zu finden Wie in den beiden vorherigen, Zeichenflächen. Verschiebe es nach unten. Und wie gesagt, machen wir es ein bisschen heller. Schieben Sie dazu unseren Punkt etwas nach rechts und vielleicht irgendwo in die Mitte oder sogar ein bisschen nach oben. Mal sehen, wie es aussieht. Außerdem kann die Verwendung von Transparenz zu tieferen Farben führen. Erinnerst du dich daran? Okay. Wählen Sie nun diese Farbe ohne Transparenz aus, wie wir es zuvor getan haben. Zweimal. Verwenden Sie die Pipette. Das ist unsere Zielfarbe. Kopiere das Hexadezimalfeld dieses Elements und füge die Farbe in den inneren Schatten und in den Schlagschatten unserer Elemente ein. Es sieht ziemlich cool aus. Jetzt können Sie Ihre eigenen Farben und Elemente für die Benutzeroberfläche erstellen . Wie Sie sehen können, ergibt das einen super schönen Effekt und vermittelt das stilvolle und einzigartige Gefühl der Benutzeroberfläche. Wir sind fast am Ende unseres Kurses. Aber kommen wir zur dunklen Seite der Anzahl der Elemente. Ja, du hast recht. Im nächsten Flex machen wir einen Dunkelmodus. Lass uns anfangen. 9. Dunkelmodus: Ich habe beschlossen, diese Lektion hinzuzufügen, da ich denke, dass sie im aktuellen Zustand der Welt sehr wichtig ist. Wie in diesem Video werden wir alle Statistiken und Elemente, die wir in den vorherigen Lektionen erstellt haben, in den Dunkelmodus oder die Teams konvertieren in den vorherigen Lektionen erstellt haben, in den Dunkelmodus oder die Teams Die meisten aktuellen Implementierungen der Mobil- oder Webanwendungen erforderten einen einfachen Wechsel zwischen Hell- und Dunkelmodus und natürlich auch für neumorphe Versuchen wir also, Elemente für den Dunkelmodus zu erstellen. Ich kann dir schon von Anfang an sagen , dass es nicht schwer sein wird, weil wir dieselben Stile verwenden werden, die wir bereits erstellt haben und die wir bereits in den vorherigen Lektionen verwenden. Wir passen einfach die Hintergrundfarbe an, passen die Farbe des Elements an. Und das ist eigentlich alles. Natürlich die dunklen Teams. Sie sind etwas spezifisch, vor allem im Feld- und Skeuomorphismus-Design, weil es schwieriger ist all diese Elemente voluminöser zu machen , da alles ruhig, dunkel und fast unsichtbar ist und der Text einen starken Kontrast zu ihren Hintergründen bietet Selbst wenn wir also das Neumorphe Design für die dunklen Teams verwenden , sollten wir sehr vorsichtig sein Erstens, weil der Schatten selbst ist, können wir dafür nur eine schwarze Farbe wählen. Andernfalls ist es nicht sichtbar, sodass es nicht in der Lage ist, diesen Volumeneffekt bereitzustellen oder den Volumeneffekt für die Elemente zu erzeugen. Wie Sie in diesen Beispielen sehen können, die gesamte Hintergrundfarbe und die Hauptfarbe. Es ist irgendwie dunkel, aber es ist nicht schwarz oder rein schwarz. Sie können also die Schatten sehen und das Element tatsächlich aus ihnen herausspringen. Oberfläche. Okay, kommen wir also zu unseren zuvor erstellten Stilen zurück unseren zuvor erstellten Stilen und ändern sie schnell in den Dunkelmodus. Zunächst wähle ich das erste Element aus. Es ist ein Quadrat, 150 mal 150 Pixel mit einem Koordinatenradius von 32 Pixeln. Und sie sind alle gleich. Wählen Sie also das erste Element aus, die Berührung, den Stil daraus. Und jetzt werden wir mit all diesen Schlagschatten und inneren Schatten arbeiten . Wählen wir unsere aus, um die Hintergrundfarbe zu ändern. Da werden wir das dunkle Thema machen. Wählen Sie unsere Zeichenfläche aus und gehen Sie zum rechten Bereich. Sehen Sie sich die ausgewählten Kraftstoffkomponenten und wählen Sie eine Farbe aus der Palette irgendwo unten, im dunklen, dunklen Bereich. Aber natürlich nicht die ganz Schwarzen, wie ich sonst schon erklärt habe, sie stehen alle, werden nicht sichtbar sein. Lass uns ein paar ziemlich kalte Farben machen, so etwas. Wie du sehen kannst, ist es irgendwie unten und es ist ziemlich dunkel Aber wir können immer noch den Farbton der Farbe unterscheiden. Dann. Goldfisch-Effekt. Und natürlich müssen wir die gewählte Farbe kopieren, da wir sie auch für das Element selbst verwenden werden Wie Sie sich aus früheren Lektionen erinnern, die Farbe des Elements und sollten die Farbe des Elements und die Farbe der Oberfläche identisch sein. Oder wir können das auch tun, indem wir einfach das Element auswählen. Und durch Drücken habe ich Farbe und Farbwähler geöffnet und die Farbe von der Oberfläche ausgewählt. Okay? Wie Sie sehen können, unser gesamtes Styling aus früheren Lektionen immer noch dasselbe und es ist nicht das, was wir wollen, es hilft uns nicht, dieses Element voluminös aussehen zu lassen. Wir, es sieht mit Volume aus. Okay, gehe zum rechten Effektfeld. Mal sehen, was der erste Schatten auf Schulz fällt. Machen wir es also ganz einfach. Der Schlagschatten sollte superdunkel sein, damit wir ihn sehen können. Wir können also einfach eine sehr schwarze Farbe wählen, die im Grunde sechs mal Null ist. Und die Opazität sollte 100% betragen. Also im Grunde gibt es kein, es gibt kein Positives und die Farbe ist rein. Der nächste ist der Angestellte. Denken Sie an die vorherigen Lektionen, es war unser Lichteffekt oder es war im Grunde die Reflexion des Lichts. Hier. Das brauchen wir nicht so stark. Und ich rate Ihnen, die Opazität zu reduzieren, um 10% zu erhöhen Opazität Als nächstes innerer Schatten. Auch dies ist unser Schatten, aber innerhalb des Elements wählen wir wieder eine dunkle Farbe und eine Deckkraft von 100% Und der nächste innere Schatten, wieder war er weiß. Machen wir nur zehn Prozent von Boston daraus. Schau dir unsere Elemente an. Ich würde sagen, es ist abgeschlossen und wir können es in der Benutzeroberfläche verwenden. Und machen wir dasselbe wie alle anderen Elemente. Der erste Schatten ist zu 100% rein schwarz. Der nächste ist, er ist weiß. Es sind also nur zehn Prozent. Der innere Schatten sollte wiederum sehr dunkel sein und er ist zu 100% undurchsichtig. Und die weiße Farbe ist wieder braun. Und natürlich haben wir vergessen, eine Farbe von der Oberfläche auszuwählen. Ich mache dasselbe mit anderen Elementen. Und der letzte, Stil. Wähle eine schwarze Farbe. 100%, Angestellte, 10%, wieder rein schwarz-weiß. Ich war bei zehn Prozent. Ich nenne das gerne 10%. Wähle eine Oberfläche. Jetzt haben wir unsere Elemente und versuchen wir, uns zu ändern. Und dann Dark Team, die Farbe dieses Teams. Wie Sie sehen können, gibt es hier mehrere Autos und es sieht anders aus. Verwenden wir eine warme Farbe für den Hintergrund. Wählen Sie erneut Artboard aus. Und lass uns eine solche Farbe wählen. Du kannst meine Auswahl verwenden. Kopiere einfach das Hex von hier. Und was werden wir tun? Du sagst mir, wir wählen alle unsere Elemente aus und wählen eine Farbe von der Oberfläche aus. Und das ist alles. Und in einer Sekunde werden wir in unsere letzte Lektion in diesem Kurs eintauchen . Herzlichen Glückwunsch. Wir werden alle Create-a-Stile und -Elemente verwenden , um endlich eine Benutzeroberfläche zu erstellen 10. Neumorphic Mobile Interface erstellen: Dies ist unsere letzte Lektion in diesem Kurs und ich freue mich sehr, endlich eine Benutzeroberfläche zu entwerfen. Zusammen mit Ihnen haben wir gelernt, die Figma-Software zu verwenden um einfache Formen zu erstellen ihnen Lichter und Schatten hinzuzufügen, wiederverwendbare Stile zu erstellen und komplexe Farben für die zukünftigen Benutzeroberflächen zu finden komplexe Farben für die zukünftigen Benutzeroberflächen In dieser Lektion erstellen wir zwei einfache Bildschirme für die mobile Anwendung. Wie Sie sich wahrscheinlich erinnern, empfehle ich, eine sehr subtile Elementnorm zu verwenden , um die Benutzeroberfläche nicht zu überfordern Wenn du dir Triple oder Pinterest ansiehst und nach Neumorphic do is suchst, du wahrscheinlich feststellen, dass wir in den meisten wirst du wahrscheinlich feststellen, dass wir in den meisten guten Beispielen nur eine kleine Menge dieser Elemente verwenden werden nur eine kleine Menge dieser Der Rest sind funktionale und flache Komponenten, die dem Benutzer ein Gefühl der Ausgeglichenheit vermitteln. Dies ist ein Beispiel, das wir in dieser Lektion erstellen werden. Ich habe dieses Design im Voraus vorbereitet, und drei werden dasselbe Ergebnis erzielen, aber zusammen Folgt mir in Figma. Lassen Sie uns einen Rahmen erstellen, aber machen wir es ein bisschen anders. Wählen Sie die beiden Rahmen aus. Und auf der rechten Seite sehen Sie all die verschiedenen Größen. Ihr Huhn spricht für ihr mobiles Interface oder Webinterface. Ich wähle die Größe für das iPhone. Und vergessen Sie natürlich nicht all die Elemente, die Sie zuvor erstellt haben , und alle Stile. Wir werden sie auf jeden Fall, wir werden sie jetzt benutzen. Okay, wir können also von Anfang an mit dem kleinen Menü oben in der Ecke beginnen. Schnittstelle. Nein. Dazu wähle ich ein Rechteck aus und zeichne einfache Baumlinien Ja, wir können ihnen Farbe zuweisen. Wählen wir einfach ein dunkleres. Und lassen Sie uns den Titel der Seite angeben, da es in unserer Benutzeroberfläche darum geht, eine Veranstaltung für den Benutzer zu planen. Lassen Sie uns eine freundliche Warnung und eine benutzerfreundliche Benutzeroberfläche erstellen. Wenn Sie einen Text und eine Oberfläche erstellen möchten, wählen Sie einfach Kanäle in der linken oberen Ecke des Stifts aus. Und wir können den Schriftstil auswählen. Ich würde empfehlen, für dieses Interface einen neuen Sheriff-Stil zu wählen Oder folge mir einfach. Wählen Sie diese Schrift aus. Ich mag es wirklich. Fügen wir etwas Abstand zwischen den Zeilen hinzu. Ich möchte auch eine kleine Zeile hinzufügen. Unten finden Sie es normalerweise in der informellen Home-Bar des iPhones Aber es gibt ihnen ein realistischeres und genaueres Aussehen. Echtes Interface und echt. Das nächste Element in unserer Oberfläche wird der Kalender sein. Das ist super einfacher zu erstellen. Platzieren Sie einfach erneut ein Textwerkzeug, geben Sie eine Zahl ein. Ich wähle die Roboto-Schrift aus, um einen gewissen Kontrast zu erzielen. Sie. Hauptheader. Ändere die Größe, um kleiner zu werden. Und was zu tun ist, wir müssen im Grunde 77 Zahlen in eine Reihe setzen und sie dann in ähnliche Rollen kopieren und sie zusammen spielen. Ich rate dir, eine Zahl zu haben und sie in ein Quadrat zu legen , damit es einfacher ist, sie anzupassen und den gesamten Kalender gleichmäßig zu gestalten. Ich hatte das Gefühl , dass meine Anpassung nicht richtig war. So schnell, ja. Ordnen Sie den Abstand zwischen den Zahlen ein wenig an und kopieren Sie einfach alle Zeilen zusammen Jetzt können wir alle Zahlen zusammen auswählen und sie verschieben und sie ein wenig an die Größe anpassen, die wir tatsächlich benötigen. Fast fertig. Lassen Sie uns einige Zahlen von Anfang an streichen, weil normalerweise nicht das Monster, nicht von einem Tag an. Und platziere alle neuen Zahlen aus den Monaten. Es wäre eine harte, sich wiederholende Arbeit, aber ich wusste nicht, wie man das anders machen kann Und wir brauchen die Wochenenden, ändern die Farbe etwas heller, um das dem Benutzer zu zeigen. Und ein paar kleine Anpassungen. Schau, wie es zusammen aussieht. Andere Elemente. Ich möchte auch die obere Leiste vom iPhone aus platzieren , um mehr Elemente für die Benutzeroberfläche zu erstellen. Werkzeug. Leer. Passen Sie die Komposition ein bisschen an. Und schließlich können wir unsere Elemente verwenden, die wir zuvor vorbereitet haben, und wir werden lernen, wie man sie erstellt. Natürlich können Sie Ihre Styles für dieses Design kreieren. Aber ich würde empfehlen, das zu verwenden was wir bereits ein wenig angepasst haben , ihren Radius an der Ecke auf 16 und auch die Größe des Buttons. Bei einem Mobilgerät ist es normalerweise besser, Tasten mit einer Höhe von mehr als 50 Pixeln zu haben . Sonst ist Hopi zu klein für ihren Finger. Verwenden Sie einfach Text zu, um der Schaltfläche ein Symbol hinzuzufügen. Und lassen Sie uns schnell ein weiteres Symbol erstellen, das eine Lupe plus Suche sein wird Suche Es sieht gut aus. Ich würde auch etwas mehr Aufmerksamkeit und Elemente zu diesen bereits erstellten Ereignissen hinzufügen oder zum Beispiel den Tag des Kalenders für heute ausgewählt. Etwas mehr Exzellenz. Und um für Farben zu sorgen. Sieht so aus, als ob wir mit dem ersten Bildschirm fertig sind, aber Sie möchten einen weiteren erstellen, um das Event zu Wenn der Benutzer also auf die Plus-Taste drückt, wird der Strahl erneut auf den Bildschirm fallen Schauen Sie sich jetzt gemeinsam die Bowl-Bildschirme an. Ich finde, die Knöpfe könnten etwas größer sein. Unsere Elemente, und lassen Sie uns sie auf 65 Pixel ändern. für den zweiten Bildschirm Lassen Sie uns für den zweiten Bildschirm die Falte so entfernen, wie es erforderlich ist. Und da es ein Pop-up sein wird, sollte der Hintergrund dunkel sein Und dann das Pop-up selbst, es erscheint von oben. Und für dieses Pop-up verwenden wir den gleichen Kalenderpicker, weil du mit Flow das neue Ereignis erstellst und du ein Datum auswählen musst An welchem Datum wirst du sein. Sogar. Ändere den Titel. Und natürlich werden wir ein weiteres Element verwenden , bei dem Sie eine Einzahlung erstellen und das TextField erreichen, wenn Sie es präsentieren Aber lassen Sie uns zunächst einige Elemente im Farbwähler schnell anpassen einige Elemente im Farbwähler schnell Ich würde empfehlen, einen von ihnen auszuwählen. Konkaves Element. Dieses Element stellt ein Textfeld oder besser gesagt einen Textbereich dar , in dem der Benutzer seine Beschreibung für das Ereignis hinzufügt. Ändern Sie natürlich die Farbe des Elements und wählen Sie die Farbe aus dem Hintergrund aus. Und ich sehe aus meiner Perspektive, dass einige ihrer Schatten ein bisschen sein können. Natürlich müssen wir auch den Eckenradius anpassen. Und ich füge den Stil und die kleinen Teile an, die die Opazität ihrer Formen haben Es wird also nicht so stark sein. Als unsere Schnittstelle. Sehr leicht und einfach. Natürlich muss der Benutzer dieses Popup irgendwie schließen , also müssen wir noch ein paar Schaltflächen platzieren. Wahrscheinlich stornieren und dann kann er wählen oder er knurrt das Pop-up oder fügt dieses Event tatsächlich hinzu Rechne nicht ab. Ein weiteres kleines und letztes Element , das ich zu dieser Oberfläche hinzufügen möchte , ist der kleine Hilfetext im Textbereich. Der Benutzer wird also verstehen , dass er diese Form tatsächlich innerhalb des Quadrats eingeben kann . Und wir sind mit der letzten Lektion fertig. Ich habe Ihnen ein Beispiel für die Schnittstelle gezeigt , die einen Arm von Elementen verwendet. Es war wahrscheinlich ein bisschen schnell, aber mein Hauptziel war es, dir zu zeigen und dir eine Richtung zu geben eine Richtung anstatt einfach zu folden, dich zu treffen. Um genau das gleiche Interface zu erstellen, kannst du diese Ideen oder das Gefühl der Zusammensetzung der Balance nutzen Zusammensetzung der Balance um deine Ideen zu verwirklichen, das kannst du selbst ausprobieren und einfach ein ähnliches oder sogar ganz anderes Interface erstellen . Im letzten Teil dieses Kurses erkläre ich Ihnen die Aufgabe , die Sie selbst ausführen können. Und dann überprüfe ich gerne Ihre Ergebnisse und gebe Ihnen in allen Richtungen einen Verbesserungsvorschlag 11. Kursprojekt: Herzlichen Glückwunsch, wir haben unseren Kurs abgeschlossen. Ihre Aufgabe besteht darin, ein oder zwei Bildschirme für einen einfachen Taschenrechner mit Neumorph-Stilen zu entwerfen einen einfachen Taschenrechner mit Neumorph-Stilen Natürlich können Sie Elemente verwenden, die wir zusammen erstellt haben, oder Ihre eigenen erstellen , indem Sie alle Techniken verwenden, die wir in diesem Kurs gelernt haben. Ich ermutige Sie, alle Prinzipien des Neomorphismus anzuwenden, um visuell ansprechende Benutzeroberflächen zu erstellen Denken Sie daran, dass diese Schnittstellen am Ende von Menschen verwendet werden. Sobald du deine Designs fertiggestellt hast, kannst du sie im Kursforum mit mir teilen. Und ich freue mich, Kommentare abzugeben oder Ihnen zu helfen, sich zu verbessern. Ich kann es kaum erwarten zu sehen, was du dir einfallen lässt. Scheuen Sie sich nicht, kreativ zu sein und haben Sie es finanziert. Experimentieren Sie ruhig und denken Sie daran, Übung macht den Meister. Vielen Dank, dass Sie Teil dieser unglaublichen Lernerfahrung sind. Und ich freue mich, Sie in meinen nächsten Kursen zu sehen. Bitte überprüfe mein Profil. Ich habe auch einen anderen Kurs , der Komposition heißt. Wenn Sie mehr üben und mehr Inspiration von der Welt um Sie herum finden möchten und mehr Inspiration von der Welt um Sie herum finden , um Ihre Fähigkeiten in Bezug auf Layout und Komposition zu entwickeln . Also schau es dir an und wir sehen uns später. Wir sehen uns. Tschüss.