Lerne Figma: User-Interface-Design-Grundlagen – UI/UX-Design

1. Einführung in den Kurs: Wenn Sie UI/UX Designer werden wollen, sind Sie am perfekten Ort. Dieser komplette Kurs wird Ihnen alles Wesentliche mit gut organisierten und leicht zu befolgen Tutorials lehren. Hallo, mein Name ist Arash und ich bin UI/UX Designer. Zusammen werden Sie und ich lernen, wie man User Interface Designer mit der Software Figma wird. Dieser Kurs wurde für Leute entwickelt, die völlig neu UI/UX Design oder sagen wir Design im Allgemeinen. Zuerst werden wir über die Design-Grundlagen und UI-Elemente lernen und dann werden wir gemeinsam über Figma und all seine versteckten Geheimnisse lernen, dann werden Sie lernen, wie man einen einfachen Wireframe erstellt. Von dort erfahren Sie, wie Sie Ihren Styleguide einrichten und wie Sie Ihre Farben entsprechend auf Ihr Design anwenden. Sie werden auch über alle Prinzipien der mobilen Anwendung und Web-Design lernen und dann werden wir eine Finanz-App zusammen entwerfen und ich werde mit Ihnen alle notwendigen Techniken in Geheimnissen teilen , um eine Weltklasse-Anwendung zu entwerfen. Darüber hinaus lernen Sie sowohl einfache als auch erweiterte Mikro-Interaktionen kennen, zusätzlich gibt es einen dedizierten Webdesign-Bereich, in dem wir gemeinsam eine komplette moderne Lernseite entwerfen. Hier erfahren Sie die Grundlagen des Webdesigns, wie Layoutraster, Interaktionen und vieles mehr. Wir werden auch über Markups sprechen und wie Sie Ihr eigenes Online-Portfolio erstellen können , ohne eine einzige Codezeile zu schreiben. Darüber hinaus erfahren Sie mehr über 3D-Modellierung und das Erstellen von Augmented-Reality-Szenen. Letzt lernen Sie, wie Sie Ihr eigenes Unternehmen gründen und Ihren ersten Kunden als UI/UX-Designer bekommen. Während dieser Ergebnisse werden wir Wireframe-Design und Prototypen einer mobilen Finanzanwendung entwickeln, um Ihre Design-Fähigkeiten zu entwickeln und alle notwendigen Werkzeuge zu meistern. Darüber hinaus erhalten Sie Zugang zu zwei brandneuen UI-Kits Wert von mehr als 3.000 US-Dollar und Sie können sie in Ihren kommerziellen Projekten verwenden. Ich hoffe, Sie sind bereit, neue Fähigkeiten zu erlernen und ein User Interface Designer zu werden. Wir sehen uns im Unterricht. 2. Einführung: Hallo an alle. Herzlich willkommen zum ersten Kapitel dieses Kurses. In diesem Abschnitt werden wir über die Unterschiede zwischen UI- und UX-Design und die Kursstruktur sprechen die Unterschiede zwischen UI- und UX-Design und , die Sie verstehen können, wie der Kurs organisiert ist, damit Sie ihn richtig verfolgen können. Letzt Zu guterLetztwerden wir über die Tools und Anforderungen sprechen, die Sie wissen müssen, um den Kurs fortzusetzen. Ohne weitere Umschweife, lasst uns anfangen. Zuallererst werde ich über die Unterschiede zwischen UI- und UX-Design sprechen. Obwohl beide Elemente für ein Produkt von entscheidender Bedeutung sind und eng zusammenarbeiten, sind ihre Rollen völlig unterschiedlich. UX-Design ist ein technischeres und analytisches Feld. UI-Design bezieht sich jedoch auf Grafikdesign mit komplexeren Verantwortlichkeiten. Lassen Sie mich Ihnen ein Beispiel geben. Wenn Sie ein Produkt wie ein Auto betrachten, ist das Chassis der Code, der ihm eine klare Struktur verleiht. Die anderen Teile wie Türen, Kraftstofffilter usw. stellen das UX-Design dar, das das Auto richtig funktionieren lässt. Auf der anderen Seite, UI-Design repräsentiert das Aussehen des Autos, seine Sensoren, et cetera. Mit anderen Worten, UX, die für User Experience steht, ist darüber, wie ein Produkt funktionieren sollte, und UI, die für Benutzeroberfläche steht, ist darüber, wie ein Produkt aussehen sollte. Sie als Produktdesigner sollten wissen, wie diese beiden Begriffe zusammenarbeiten und wie Sie zwischen ihnen unterscheiden können. Zum Beispiel sollten Sie wissen, was die Verantwortlichkeiten eines UX-Designers sind, und auf der anderen Seite, was die Verantwortung eines UI-Designers sind. Wie Sie auf den Bildern sehen können, haben wir zwei verschiedene Bildschirme. Die linke zeigt uns, wie das Produkt funktionieren soll. Angenommen, Sie haben einen Bildschirm mit zwei Tasten und zwei Textfeldern, die UX zeigt uns, wie diese Tasten mit dem Benutzer interagieren sollen, und das richtige Bild ist alles über Benutzeroberfläche und es zeigt uns, wie das Produkt sollte Schauen Sie. Zum Beispiel haben wir hier einen Knopf und ein Quadrat. Der UI-Designer entscheidet, wie groß dieses Muster sein soll oder welche Farbe für dieses Quadrat geeignet ist. Dies sind die Verantwortlichkeiten des UI-Designers. Vielen Dank für das Ansehen dieses Video und ich werde Sie im nächsten Video sehen. 3. Struktur des Kurses: Hi, alle. In diesem Video werden wir über die Struktur des Kurses sprechen. In der Tat können Sie den Kurs in zwei Hauptabschnitte unterteilen, den theoretischen Teil und den praktischen Teil. Der theoretische Teil erzeugt 10 Prozent des gesamten Kurses, der praktische Teil bildet 90 Prozent des Kursinhalts. Anstatt uns auf Theorien zu konzentrieren, konzentrieren wir uns darauf, die Fähigkeiten zu üben, die Sie lernen indem Sie an verschiedenen Arten von Projekten arbeiten. Im theoretischen Teil erfahren Sie mehr über Design-Grundlagen, UI-Elemente, Geschäftsideen usw. Im praktischen Teil werden wir eine komplette mobile Anwendung von Grund auf neu entwerfen. Sie werden auch über das Wesentliche des Webdesigns lernen , indem Sie eine moderne Lernseite entwerfen, wir sprechen auch über Drahtrahmen, 3D-Modellierung, Logo-Design und vieles mehr. Wenn Sie ein kompletter Anfänger sind, empfehle ich dringend, zuerst den theoretischen Teil zu sehen und dann mit dem Kurs fortzufahren. Auf der anderen Seite können Sie den theoretischen Teil überspringen und zum Erstellen eines Projekts springen. Alles klar, Leute, vielen Dank, dass ihr dieses Video gesehen habt, und ich werde euch im nächsten Video sehen. 4. Tools: Hallo an alle. In diesem Video werden wir über die erforderlichen Werkzeuge für den Abschluss dieses Kurses sprechen. In diesem Kurs werden wir verschiedene Grafikdesign-Tools verwenden, um gemeinsam erstklassige Benutzeroberflächen zu entwerfen. Die Hauptsoftware, die wir verwenden werden, heißt Figma, die sowohl für macOS als auch für Windows verfügbar ist. Sie können es sogar ohne Installation in Ihrem Browser verwenden. Darüber hinaus müssen Sie nicht dafür bezahlen, es ist völlig kostenlos. Die anderen Tools, die Sie erfahren, sind Vectary und Adobe Photoshop. Wir werden auch über nützliche Websites wie Dribble, Behance, etc. sprechen Wenn Sie keine der oben genannten Software haben, stellen Sie sicher, dass Sie sie installieren, bevor Sie den Kurs beginnen, so sehen Sie dort. 5. Einführung in den Design: Hallo an alle. Willkommen zurück zu einem anderen Abschnitt der Partituren. In diesem Kapitel werden wir über Layouts, Ikonographie, Typografie, Farben, Komposition und vieles mehr sprechen. Wenn Sie ein professioneller und großartiger UI werden wollen, UX-Designer, müssen Sie mit Design-Grundlagen beginnen. Nun, da Sie wissen, wie wichtig es ist, Design-Basics zu kennen, lassen Sie uns dieses Kapitel beginnen. 6. Layout: Hallo an alle. In diesem Video werden wir über Layouts im Design sprechen. Wenn es um UI-UX-Design geht, die Art und Weise, wie wir die Informationen in einer App oder Website anzeigen, so wichtig. In der Tat gibt es keinen bestimmten richtigen Weg, um Ihre eigene Komposition zu erstellen. So können Sie ganz einfach ein Layout erstellen, das auf Ihren eigenen Bedarf basiert , solange es für Benutzer konsistent und verständlich ist. Wie Sie in den Bildern auf der rechten Seite sehen können, sind beide Bildschirme gut gestaltet. Obwohl der Abstand unterschiedlich ist, ist die Zusammensetzung absolut klar und konsistent. Sie müssen viel auf Konsistenz achten, während Sie eine Benutzeroberfläche entwerfen. Egal für welche Art von Plattformen Sie entwerfen, die gleichen Regeln gelten für alle von ihnen. Jetzt schauen wir uns diese Bilder an. Wie Sie im linken Bild sehen können, sind die Entfernungen recht konsistent. Wenn Sie beispielsweise den Abstand zwischen dem Profilbild und dem oberen Bildschirmrand betrachten , können Sie erkennen, dass der Wert 50 Pixel beträgt, und auch der Abstand zwischen dem gleichen Profilbild und dem Textfeld rechts darunter ist wieder 50 Pixel. Wie Sie sehen können, ist das Layout dieses Designs ziemlich klar, und der Grund dafür liegt an der Konsistenz des Abstands. In den nächsten Vorträgen werden wir auch über Abstände und die Bedeutung davon im Design sprechen. Wenn Sie nun das richtige Bild betrachten, können Sie erkennen, dass das Design auch in diesem Layout klar ist. Der einzige Unterschied sind jedoch die Farben und der Abstand. Aber wie Sie vielleicht bemerkt haben, ist der Abstand wieder konsistent. Vielen Dank, dass Sie sich dieses Video ansehen. Ich werde Sie im nächsten Video sehen. 7. Visuelle Hierarchie: Hallo an alle. In diesem Video werden wir über visuelle Hierarchie sprechen. visuellen Hierarchie geht es darum, wie wir Designs betrachten. Klingt es komisch? Lassen Sie es uns anders sagen. Wir als Designer sollten uns in die Schuhe der Nutzer setzen , um zu erkennen, wie sie unsere Entwürfe sehen. Inhalte in jedem digitalen Seitenlayout verfolgen eine bestimmte Hierarchie. Zum Beispiel gehen Menüs oben, unten, links oder rechts auf dem Bildschirm oder eine Kombination davon. Kopfzeilen werden oberhalb des Textes angezeigt. Mit anderen Worten, Hierarchie ist eine einfache Möglichkeit organisiert zu bleiben, von den meisten zu den am wenigsten wichtigen. Denken Sie daran, dass Benutzer die Hierarchie jeder App oder Website definieren. Das Element, das zuerst die Aufmerksamkeit der Benutzer erregt, befindet sich oben in der Hierarchie. Die visuellen Spezifikationen, die der Designer nutzen kann, um das Verständnis der Informationen der Benutzer zu beeinflussen, sind Größe, je größer das Element, desto mehr Aufmerksamkeit wird es auf sich ziehen. Wenn Sie mit HTML und Web-Entwicklungsprozess vertraut sind, wissen Sie vielleicht, dass wir sechs Arten von Header von H1 bis H6 haben. H1 ist der größte Header und H6 ist der kleinste. Wenn wir so viel Aufmerksamkeit bekommen wollen, werden wir H1 verwenden. Nehmen wir zum Beispiel an, dass wir die Aufmerksamkeit der Benutzer auf einen bestimmten Abschnitt oder einen bestimmten Artikel lenken möchten . In diesem Fall werden wir den größeren Header verwenden oder andererseits wollen wir manchmal nicht so viel Aufmerksamkeit auf einen bestimmten Abschnitt oder Inhalt bekommen. In diesem Fall können wir den kleineren Header verwenden, daher ist die Größe so wichtig. Der nächste Punkt ist Farbe. Helle Farben sind auffälliger als gedämpfte Farben. Wenn Sie nicht genügend Informationen über Farben haben, müssen Sie sich keine Sorgen darüber machen, denn in den nächsten Lektionen werden wir alle notwendigen Informationen über die Auswahl der richtigen Farbe in Ihrem Design abdecken . Der nächste Punkt ist die Ausrichtung. Ein Element mit einer anderen Ausrichtung anderer wird mehr Aufmerksamkeit erregen. Was bedeutet das? Angenommen, Sie haben ein Layout von, sagen wir, vier verschiedene Videos oder vier verschiedene Fotos. Wenn Sie nur eines dieser Videos oder diese Fotos anders ausrichten, wird es mehr Aufmerksamkeit darauf lenken. Tatsächlich kann der Benutzer in diesem Fall erkennen, dass etwas anders ist. Der nächste Punkt ist der Kontrast. Scharf kontrastierende Farben fallen leicht ins Auge. Kontrast ist ein sehr wichtiges Thema im UI-Design. Wir werden in den nächsten Lektionen tief über den Kontrast sprechen. Der nächste Punkt ist die Nähe. Elemente, die eng zusammengesetzt sind, erscheinen eher verwandt, und das stimmt. Wenn Sie sich die Bilder auf der rechten Seite ansehen, können Sie sehen, dass wir zwei verschiedene Bildschirme haben. Konzentrieren wir uns auf den linken Bildschirm. Wie Sie sehen können, haben wir zwei verschiedene Abschnitte, neue Aktionen und neue Geschichten. Können Sie erkennen, dass Elemente in beiden Abschnitten eng miteinander verbunden sind , so dass Benutzer leicht verstehen können, dass sie miteinander verwandt sind? Als nächster Punkt folgt die Wiederholung. Wiederholte Stile können darauf hinweisen, dass Inhalt verwandt ist. Was bedeutet das? Schauen wir uns die Bilder auf der rechten Seite an. Können Sie sehen, dass wir vier Quadrate haben, haben drei Kreise, so dass der Benutzer leicht erkennen kann, die Beziehung zwischen diesen Elementen. Der nächste Punkt ist Leerzeichen, was ein weiterer wichtiger Begriff im UI/UX-Design ist. Mehr Platz zwischen den Elementen wird mehr Aufmerksamkeit auf sie lenken. Schauen wir uns die Bilder auf der rechten Seite an, aber dieses Mal müssen wir zwischen dem linken Bildschirm und dem rechten Bildschirm unterscheiden. Wie Sie auf dem linken Bildschirm sehen können, haben wir genug Platz, oder sagen wir, genug Leerzeichen zwischen unseren Elementen und unseren Abschnitten, so dass die Benutzer leicht durch die Benutzeroberfläche gehen können. Auf dem rechten Bildschirm sehen Sie jedoch, dass alle Elemente sehr nah beieinander liegen und es nicht genügend Leerraum zwischen allen Elementen in dieser Art von Layout gibt. Vielen Dank, dass Sie sich dieses Video ansehen. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 8. Visuelles Rauschen: Hallo an alle. In diesem Video werden wir über visuelles Rauschen im Design sprechen. visuellem Rauschen handelt es sich, wie man aus seinem Titel erraten kann , um einen Bildschirm oder einen Teil eines digitalen Produkts, das so viele Informationen und viele Elemente darauf hat. Wenn Sie eine App oder eine Website entwerfen, müssen Sie viel auf Details achten. Denn am Ende des Tages wollen wir einen Bildschirm gestalten, der benutzerfreundlich und einfach zu durchschauen ist. Stellen Sie sicher, dass Sie alle unnötigen Elemente oder Informationen von Ihrem Bildschirm entfernen. Wenn Sie sich nicht sicher sind, ob Ihr Design ein visuelles Rauschen aufweist oder nicht, empfiehlt es sich, das Feedback der Benutzer einzuholen. Wenn Sie sich die Bilder auf der rechten Seite ansehen, können Sie sehen, dass wir zwei verschiedene Bildschirme haben. Auf dem linken Bildschirm gibt es kein visuelles Rauschen und es ist großartig in Bezug auf das UI-Design. Auf der anderen Seite, dem rechten Bildschirm, gibt es zu viel visuelles Rauschen. Wie Sie sehen können, gibt es so viele Ticks an der Spitze und dann einige Elemente, die Videos oder Fotos sein könnten, dann wieder, einige Videos, und danach einige Geschichten, und Sie können erkennen, dass es nicht genug Leerraum zwischen diesen Elementen. Vielen Dank für das Ansehen dieses Video, ich werde Sie im nächsten Video sehen. 9. Ikonografie: Hi. In diesem Video werden wir über Ikonographie im Design sprechen. Ikonographie ist eine visuelle Sprache, die verwendet wird, um Aspekte, Inhalte oder Funktionalität zu demonstrieren. Symbole sollen einfache und klare visuelle Elemente sein, die sofort erkennbar sind. Sie müssen bekannte Symbole wie Home-Icon, Such-Symbol usw. nicht neu gestalten , oder sagen wir, das Rad nicht neu erfinden. Sie können Zugriff auf fast alle Arten von Symbolen auf Websites kostenlos oder zu vernünftigen Kosten erhalten. Aber was, wenn Sie es benötigen, um einige Icons speziell für Ihr Projekt zu entwerfen? In diesem Fall sollten Sie Symbole entwerfen, die mit Ihrem Design und anderen Symbolen harmonieren. Beachten Sie, dass Symbole von Benutzern leicht verstanden werden müssen. Stellen Sie daher sicher, dass Sie Konsistenz in Ihrem Design zeigen. 10. Typografie: Hi. In diesem Video werden wir über Typografie sprechen. Was ist Typografie? Typografie verwandelt Sprache in ein dekoriertes visuelles Element. Typografie ist einer der wichtigsten Teile des UI/UX-Designs, daher lohnt es sich, mehr darüber zu erfahren. Sie beim Entwerfen einer App oder einer Website BeschränkenSie beim Entwerfen einer App oder einer Websitedie Anzahl der verwendeten Schriftarten und Größen, um Ihr Design einfach zu halten. Beginnen Sie mit höchstens zwei Schriftarten, eine für die Kopfzeilen und die andere für die Textkörper. Sie können kostenlose oder kostenpflichtige Schriftarten in Ihren Projekten verwenden, aber ich empfehle Ihnen dringend, kostenlose Schriftarten zu verwenden. Wenn Sie kostenpflichtige Schriftarten verwenden möchten, überprüfen Sie die Lizenz sorgfältig. Sie sollten Ihre Kunden darüber informieren, dass sie für die Verwendung kostenpflichtiger Schriftarten extra bezahlen müssen. Wenn Sie nun auf die rechte Seite des Bildschirms schauen, können Sie sehen, dass sie die Typografiegrundlage für Sie klassifiziert haben. Schauen wir es uns Schritt für Schritt an. Genau an der Spitze haben wir Eigenschaften. Jede Textzeile in einem Programm hat eine Basislinie, wie Sie sehen können, wird sie hier mit der blauen Linie angezeigt und hat auch den Buchstabenabstand, den Sie in Ihrem Entwurf ändern können. Natürlich gibt es mehr Eigenschaften im Zusammenhang mit Typografie, aber für das Vorangehen dieser Partituren reicht es aus, diese beiden Eigenschaften zu kennen. Konzentrieren wir uns nun auf den Vergleich von Buchstabenabständen. Auf der linken Seite können Sie sehen, dass wir den Standardabstand haben, aber auf der rechten Seite ändere ich den Abstand dieser Buchstaben je nachdem, an welcher Art von Projekt Sie arbeiten, Sie können den Buchstabenabstand ändern, wie Sie möchten. Lassen Sie uns nun über das Gewicht jeder Schriftart sprechen. Die meisten Schriftarten haben mindestens ein 3D-Druckgewicht, aber einige von ihnen haben mehr. Zum Beispiel kann eine Schriftart sechs verschiedene Gewichte haben, wie Sie auf Ihrem Bildschirm sehen können, haben wir hier von hell bis fett. Last but not least, die Klassifizierung von Schriftarten. Wie Sie sehen können, haben wir zwei verschiedene Klassifizierungen für Schriftarten: die Serif, die die linke im Bild ist, und die serif, die die rechte im Bild ist. Was ist der Unterschied? Sicher können Sie zwischen ihnen unterscheiden, aber lassen Sie mich Ihnen erklären, um die Regel der Serif und Serif auswendig zu lernen. Eigentlich Serifen-Schriftarten haben eine Art flache Linie an der Spitze von ihnen und auch die Unterseite von ihnen oder Sie können sagen, dass sie Füße haben. Auf der anderen Seite haben serifenartige Schriftarten nicht diese Art von Zeilen. Sans in Englisch und Französisch bedeutet ohne, so sans serif bedeutet ohne Serif. Sie als Designer sind verantwortlich für die Auswahl des besten Gewichts der Schriftarten und auch die beste Klassifizierung, je nachdem, an welcher Art von Projekt Sie arbeiten. Vielen Dank für das Ansehen dieses Video, ich werde Sie im nächsten Video sehen. 11. Farbkontrast: Hallo an alle. In diesem Video werden wir über Farbkontrast sprechen, was ein sehr wichtiges Thema ist, wenn es um UI-Design geht. Das effektive Anwenden von Farben ist eine Fähigkeit, die jeder, der mit visuellen Kompositionen arbeitet, haben muss. Als UI-Designer müssen Sie wissen, wie Sie Farben in Ihren Projekten verwenden. Wenn es um die Anwendung von Farben geht, sind Lesbarkeit und Lesbarkeit die Schlüsselfaktoren. Forscher haben gezeigt, dass lebendige Farben genügend Kontrast ermöglichen und die Lesbarkeit und Lesbarkeit erhöhen. Bitte beachten Sie, dass zu viel Farbkontrast beim Lesen zu Schwierigkeiten führen kann. Ich empfehle dringend, dass Designer eine mittlere Kontraststufe erstellen sollten, und zum Hervorheben von Elementen können sie kontrastreiche Farben verwenden. Sie können Websites auch verwenden, um Ihnen ein Verhältnis zu bieten, wenn zwei Farben vergleichen, um zu sehen, ob genügend Kontrast vorhanden ist oder nicht. Wenn Sie sich die Beispiele auf der rechten Seite ansehen, haben wir sechs verschiedene Farben. Wie Sie sehen können, sind die ersten vier akzeptabel und haben genug Kontrast, aber die anderen sind nicht lesbar. Wenn wir eine Benutzeroberfläche entwerfen, müssen wir viel auf Farben achten, denn manchmal, Sie als Designer, wollen so kreativ wie möglich sein. Kreativität sollte jedoch nach Lesbarkeit und Lesbarkeit kommen. 12. Farbpalette: Hallo an alle. In dieser Lektion werden wir über Farbpalette sprechen. Erstellen eines Farbschemas für das Produkt mag eine schwierige Aufgabe sein, besonders wenn Sie ein Anfänger sind. In Wirklichkeit ist es jedoch nicht so kompliziert, wie viele Designer denken. Was ist das Farbschema? Ihr Farbschema ist eine Mischung aus Farben, die in Ihrer Benutzeroberfläche verwendet werden. Fast jedes Farbschema enthält die folgenden Farbgruppen. Primärfarben, Sekundärfarben, Akzentfarben, Neutronen, semantische Farben. Was sind die Primär- und Sekundärfarben? Primär- und Sekundärfarben sind die Grundfarben Ihrer Benutzeroberfläche. Die Farben, die am häufigsten in Ihrem UI-Design verwendet werden, werden als Primärfarben bezeichnet. Die meisten Designer wählen in der Regel Markenfarben als Primärfarben. In der Tat wird empfohlen, nicht mehr als drei Primärfarben zu haben. Optional können Sie sekundäre Farben verwenden, um Ihre Produkte zu unterscheiden und interessantere UI-Designs zu erstellen. Aber wie wählt man Farben richtig? Wenn Sie mit Farben arbeiten, sollten Sie keine Kombination von zufälligen Farben erstellen. Denn das Ergebnis wäre nicht das, was Sie erwarten. Um zu verstehen, wie man mit Farben arbeitet, müssen Sie zuerst wissen, was die Farbe erleichtert und wie sie funktioniert. Hier sind wichtige Farbkombinationen, die Sie kennen müssen. Kostenlos, das sind zwei Farben, die auf gegenüberliegenden Seiten des Farbrades sind. Der nächste ist monochromatisch, das sind drei Schattierungen Töne und Jugendliche sind eine Grundfarbe. Die letzte ist analog, das sind drei Farben, die nebeneinander auf dem Farbrad sind. Wenn Sie sich die rechte Seite des Bildes ansehen, können Sie sehen, dass wir hier ein Farbrad haben. Wie Sie sehen können, haben wir monochromatisch. Zum Beispiel, wenn Sie sich das Rot ansehen, haben wir drei verschiedene Schattierungen oder sagen wir Jugendliche von einer Grundfarbe, und wir haben auch kostenlos. Zum Beispiel haben wir hier lila und gelb, die sich auf gegenüberliegenden Seiten des Farbrades befinden. So ist die Kombination dieser Farben großartig. 13. Abstände: Hallo an alle. Willkommen zurück zu einer anderen Lektion dieses Kurses. In diesem Video werden wir über Abstände im Design sprechen. Konsistenz spielt eine Schlüsselrolle im UI-Design. Wenn Sie entwerfen, müssen Sie alles messen und konsistent halten. Als Designer liegt der Abstand bei Ihnen. Sobald Sie ihn jedoch festgelegt haben, müssen Sie die gleichen Abstandsmuster in Ihren Entwürfen verwenden. Wenn Sie beispielsweise den Abstand zwischen der Kopfzeile und dem Textkörper auf acht Pixel festlegen, sollten Sie im gesamten Projekt immer denselben Abstand verwenden. Wie Sie auf dem Bild sehen können, wurden alle Abstände genau gemessen und es macht das Design klarer. Zum Beispiel, wenn Sie sich das Bild ansehen, können Sie sehen, dass wir 50 Pixel von oben auf neue Bilder Titel und dann acht Pixel von neuen Bildern an die Spitze des Untertitels und los und weiter. Um den Entwurf klar zu halten, stellen Sie sicher, dass Sie im gesamten Projekt konsistente Abstandsmuster verwenden. 14. Komposition: Hallo an alle. In diesem Video werden wir über Komposition im Design sprechen. Was ist das goldene Verhältnis? Das goldene Verhältnis ist ein mathematisches Verhältnis zwischen den Elementen unterschiedlicher Größe, das als das ästhetisch ansprechendste Verhältnis für das menschliche Auge gilt. Das goldene Verhältnis entspricht 1:1 ,618 und ist normalerweise mit Muschel-förmigen Spiralen illustriert. Diese Zahl wurde bei der Erstellung von Proportionen für Architektur, Gemälde, Fotografie, Design usw.verwendet Gemälde, Fotografie, Design usw. aber wie verwendet man das goldene Verhältnis in Ihrem Design? Wenn Sie einen Bildschirm mit der Breite von 1.200 Pixeln haben, müssen Sie ihn durch 1.618 teilen und das Ergebnis ist 741,6. Jetzt können wir sagen, 1.200 Pixel minus 741 entspricht 459, also haben wir zwei Abschnitte mit der Breite von 741 Pixeln und 459 Pixeln. Wie Sie auf der rechten Seite des Bildschirms sehen können, haben wir einen Screenshot der mittleren Website. Können Sie sehen, wie es basierend auf dem goldenen Verhältnis entworfen wurde, so dass es die Aufmerksamkeit des Benutzers zur richtigen Zeit an den richtigen Ort bringen kann? 15. Design-Leitfaden: In diesem Video werden wir über Design Guide sprechen. Was ist ein Design-Leitfaden? Ein Entwurfshandbuch ist ein System, das Ihnen dabei helfen kann, Ihr Design konsistent zu halten. Es kann auch Ihren Konstruktionsprozess beschleunigen. Die Beispiele, die Sie betrachten, sind nur einige wenige Komponenten, die in Ihrem Entwurfshandbuch verwendet werden können. Es gibt viele Dinge, die in Ihrem Design-Leitfaden enthalten sein können, wie UI-Elemente, Typografie, Ikonographie, Größen- und Abstände, Farbpaletten usw. Ein Design-Leitfaden macht Ihr Leben viel, viel einfacher. 16. Konsistente Schriftarten: Hallo an alle. In dieser Lektion werden wir über Schriftarten im Design sprechen. Als Designer arbeiten Sie immer mit verschiedenen Schriftarten, so dass Sie wissen müssen, wie Sie sie richtig verwenden. Wie es im Bereich Typografie erwähnt wurde, empfiehlt es sich, höchstens mit zwei verschiedenen Schriftarten zu arbeiten, um Ihre Benutzeroberfläche einfach zu halten. Was sind die besten Schriftarten für das UI-Design? Nummer 1, San Francisco, ist es am besten für moderne Websites und mobile Apps. Nummer 2, Open Sans, ist es am besten für Websites und mobile Apps. Nummer 3, Montserrat, ist es am besten für minimale Websites und mobile Apps. Nummer 4, Proxima Nova, ist es ideal für moderne Content-zentrierte Websites und mobile Apps. guter Letzt, Roboto, ist es am besten für moderne Websites und mobile Apps. 17. Konsistente Farben: Hey, alle. In diesem Video werden wir über Farben sprechen. Anwenden von Farben auf Ihre UI-Elemente ist einer der wichtigsten Teile des UI-Entwurfsprozesses. Erinnern Sie sich, was bei der Gestaltung der Benutzeroberfläche eine Schlüsselrolle spielte? Du hast recht, Konsistenz. Sie müssen also auch Ihre Farben konsistent halten. Wenn Sie beispielsweise auf Titeln auf einer Seite blau anwenden, müssen Sie die gleiche Farbe auf Titel auf anderen Seiten anwenden. Oder wenn Sie ein Rot auf einen wertvollen Knopf anwenden, sollten Sie die gleiche Farbe für alle anderen wertvollen Tasten auf anderen Seiten verwenden. Deshalb brauchen wir einen Design-Leitfaden und einen Styleguide. Wenn Sie sich das Bild auf der rechten Seite ansehen, können Sie sehen, dass wir eine bestimmte schwarze Farbe für Titel verwendet haben, und wir verwenden eine bestimmte Farbe für unsere Tasten usw. Daher ist es so wichtig, dass Ihre Farben konsistent bleiben. 18. Konsistente Symbole: Hallo, alle. In diesem Video werden wir über Icons im Design sprechen. Sie können denken, dass die Arbeit mit Symbolen ein einfacher Teil des UI-Designs ist. Wenn Sie jedoch nicht auf Details achten, erhalten Sie kein angemessenes Ergebnis. Hier sind einige wichtige Punkte, um die Sie kümmern müssen. Nummer 1, Testskalierbarkeit. Überprüfen Sie, ob Ihre Symbole immer noch in kleinen Größen erkannt werden können, z. B. 15 x 15 Pixel. Nummer 2, richtig dimensioniert. Die empfohlene Zielgröße für Touchscreen-Objekte beträgt 7-10 Millimeter. Denken Sie auch daran, Padding zwischen den Symbolen hinzuzufügen, um falsche Tippen zu verhindern. Nummer 3, interne Konsistenz. Verwenden Sie dasselbe Farbschema für alle Symbole und auch die gleichen Styling-Attribute, wie z. B. die Größe der Rahmen. Nummer 4, perfekte Ausrichtung. Versuchen Sie immer, eine perfekte Ausrichtung in der Ikonographie zu haben, aber manchmal, weil Sie Symbole mit verschiedenen Größen haben, müssen Sie sie selbst ausgleichen. Wenn Sie sich das Bild auf der rechten Seite ansehen, können Sie sehen, dass wir zwei verschiedene Gruppen von Symbolen haben. In der linken Gruppe können Sie sehen, dass wir eine konsistente Ikonographie haben, da wir nur Umrisssymbole verwenden. Aber auf der anderen Seite haben wir eine inkonsistente Ikonographie, da wir sowohl Umrisse als auch feste Symbole gleichzeitig verwenden , was nicht empfohlen wird. 19. Konsistente UI-Elemente: Hi, alle. In diesem Video werden wir über Konsistenz von UI-Elementen sprechen. Eines der Dinge, mit denen Sie beim Entwerfen einer Benutzeroberfläche immer arbeiten , ist ein UI-Element. Was sind die UI-Elemente? Schaltflächen, Karten, Textfelder, Schieberegler, Dialoge, Diagramme , Schritte, Tabellen, Auswahlsteuerelemente , Menüs, Snackbars, usw. Wie Sie auf dem Bild sehen können, habe ich nur einige von ihnen für Sie ausgewählt, weil ich sicher nicht alle von ihnen hier setzen konnte. Sie werden jedoch über fast alle von ihnen im Kapitel UI-Elemente lernen. 20. Schriftquellen: He, alle. In diesem Video werden wir über Font-Ressourcen sprechen. Manchmal kann die Auswahl der richtigen Schriftarten für Ihre Projekte schwierig und zeitaufwändig sein, so dass Sie in diesem Teil über die besten Online-Ressourcen wissen, um Ihre Schriftarten leicht zu erhalten. Die erste Website heißt Google Fonts, die so berühmt ist und Sie können dort kostenlose Schriftarten finden. Die zweite Website heißt MyFonts, und Sie können dort kostenlose und kostenpflichtige Schriftarten finden. Letzt können Sie sich die Adobe Fonts-Website ansehen, auf der Sie dort kostenpflichtige Schriftarten finden können. Wenn Sie Probleme mit der Kopplung von Schriftarten haben, können Sie auch Typewolf oder FontPair verwenden. 21. Farbressourcen: Hallo an alle. In dieser Lektion werden wir über Farbresourcen sprechen. Jetzt ist es an der Zeit, nach unseren Farben zu suchen, um sie in unseren Projekten zu verwenden. Meistens ist es für UI-Designer eine schwierige Aufgabe, gute Farben zu finden, besonders wenn Sie ein Anfänger sind. Hier sind einige absolut nützliche Ressourcen, um Farben zu finden. Nummer 1, Color Hunt, Nummer 2, Adobe Color, was übrigens so nützlich ist, Nummer 3, ich weiß nicht, wie ich es aussprechen soll, aber ich denke, es ist Coolers oder Coolers, Nummer 4, WebGradients, das ist eine weitere gute Website, um Farbverläufe zu finden, wenn Sie nach ihnen suchen. Achten Sie darauf, genügend Zeit damit zu verbringen, die bestmögliche Farbpalette für Ihre Projekte zu finden. 22. Icon: He, alle. In diesem Video werden wir über Icon-Ressourcen für Ihr Designprojekt sprechen. Wie bereits erwähnt, Ikonographie ist ein wesentlicher Bestandteil des UI-Entwurfsprozesses, und es ist so wichtig zu wissen, wo Sie ansprechende finden können, und ein Standard-Symbole. Hier sind einige nützliche Ressourcen zum Suchen von Symbolen. Nummer 1, Flat Icon, das Sie dort bezahlte oder kostenlose Icons finden können. Nummer 2, IconFinder, die eine weitere gute Website für die Suche nach Symbolen ist. Last but not least, Nucleo, eine Anwendung, und es sammelt alle Symbole für Sie an einem Ort. Denken Sie daran, dass Sie die Symbole verwenden sollten, die von Benutzern leicht zu erkennen sind Nehmen Sie sich also Zeit und schauen Sie sich alle verfügbaren Symbole an, die Sie in Ihrem Projekt verwenden möchten. 23. Einführung in Figma: Hi, alle. Willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Abschnitt werden wir über Figma sprechen. Was ist Figma? Figma ist ein Interface-Design-Tool, das im Browser ausgeführt wird. Es gibt Ihnen alle notwendigen Werkzeuge, um eine erstklassige Benutzeroberfläche zu entwerfen. Aber es ist eigentlich viel mehr als das, weil Figma in seiner Natur ein immer Online-Tool ist, es ermöglicht eine Live-und Echtzeit-Kollaboration, was eine fantastische Funktion ist. Obwohl Figma browserbasiert ist, gibt es Desktopversionen für Windows und Mac OS. Ich werde Ihnen zeigen, wie Sie sowohl Browser- als auch Desktop-Versionen im nächsten Video verwenden können. Im Gegensatz zu anderen Werkzeugen wie Sketch ist Figma kostenlos zu verwenden, es sei denn, Sie müssen mehr als drei Projekte erstellen. Sie können unbegrenzte Seiten und Dateien in der kostenlosen Version erstellen. Alles klar, Leute, vielen Dank, dass ihr euch dieses Video angesehen habt. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 24. Figma: Hi, alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video zeige ich Ihnen, wie Sie ein Konto auf Figma erstellen können , um das für unsere Projekte zu nutzen. Wie ich bereits erwähnt habe, ist Figma kostenlos zu verwenden. Wenn Sie jedoch mehr als drei Projekte erstellen möchten, benötigen Sie das professionelle Konto, das für diesen Kurs nicht notwendig ist. Aber die gute Nachricht ist, wenn Sie Student sind und an einer Universität oder einer Schule eingeschrieben sind, können Sie immer ein Figma-Konto für einen Schüler erstellen und Ihren Studentenstatus verifizieren und kostenlos nutzen. Das ist fantastisch. Aber wenn Sie kein Student sind, gibt es kein Problem. Sie können immer noch alle Funktionen von Figma mit dem kostenlosen Konto nutzen und Sie können immer noch unbegrenzte Seiten und Dateien erstellen. Wie können Sie ein Konto erstellen? Es ist so einfach. Wenn Sie die Figma-Website öffnen, die figma.com ist, können Sie auf „Anmelden“ klicken. Hier können Sie wählen, ob Sie sich mit Google-Konto oder mit Ihrer E-Mail-Adresse anmelden und ein neues Passwort für Ihr Konto festlegen möchten. Es liegt ganz an dir. Sie können sich auch mit Ihrem Google-Konto oder mit Ihrer von Ihnen festgelegten E-Mail-Adresse und Ihrem Passwort bei Ihrem Konto anmelden. Lassen Sie mich mit meinem Google-Konto einloggen. Da gehen wir. Wie Sie sehen können, wenn Sie ein Konto erstellen, haben Sie bereits einige Projekte hier, die Figma Basics, Prototyping in Figma und Wireframing in Figma genannt werden. Wenn ich dieses öffne, könnten Sie einige einfache Tutorials und einige Grundlagen über Figma sehen und wie Sie das verwenden könnten. Du brauchst dir keine Sorgen darüber zu machen, denn wir werden alle Aspekte von Figma in der nächsten Videoserie abdecken . Wie Sie auf der linken Seite sehen können, haben Sie einige Menüs. Der erste ist Ihr Konto oder Ihr Profil. Wenn Sie darauf klicken, können Sie sehen, dass es Ihr Name ist. Sie können Ihr Profilbild ändern. Hier gibt es einige Optionen, persönliche Zugriffstoken und wir müssen das vorerst nicht verwenden. Wenn Sie Ihr Konto löschen möchten, können Sie diese Option verwenden. Die nächste Option ist „Suchen“. Sie können Ihre Projekte und Ihre Dateien durchsuchen. Dann haben Sie Recent, der Ihnen die zuletzt geöffneten Projekte und Dateien anzeigt. Dann haben wir Plugins, die Ihnen die Möglichkeit gibt einige Plug-Ins zu installieren, was so wichtig ist. Wir reden später darüber. Dann haben wir Drafts. Sie können einige Entwürfe erstellen und auch Sie haben Dateien gelöscht. Sie können dort auch ein neues Team erstellen, wenn Sie in einem Team arbeiten möchten. Sie können auch Ihre Skizzendatei importieren. Es ist erstaunlich. Figma konvertiert Ihre Skizzendatei automatisch Figma-Datei und Sie können sie perfekt verwenden. Momentan verwenden wir Figma in unserem Browser. Wie ich bereits erwähnt habe, könntest du Figma immer auf deinem System installieren. Wie kannst du das machen? Es ist so einfach. Wenn Sie gehen, um figma.com/downloads oder wenn ich voran und melden Sie sich hier, ist die Lernseite und Sie können die Ressourcen sehen und wenn Sie auf diesem Link bewegen, können Sie den Download-Link dort sehen. Ich werde darauf klicken. Hier haben wir die Figma-Downloads, mit denen wir einige Ressourcen herunterladen können. Die erste ist Desktop-App. Hier finden Sie Desktop-App für macOS oder Desktop-App für Windows. Abhängig von Ihrem Betriebssystem können Sie es herunterladen und installieren. Dann haben wir Live Device Preview. Es ist eine großartige Anwendung. Sie können es aus dem App Store oder Google Play herunterladen und dann können Sie Ihr Design sofort in der Vorschau anzeigen. Zu guter Letzt haben wir Font-Installateure. Was ist das? Wenn Sie Figma in Ihrem Browser verwenden, kann Figma keinen Zugriff auf Ihre lokalen Schriftarten bekommen, was nicht gut ist , weil Sie die meiste Zeit benötigen, um Ihre lokalen Schriftarten zu verwenden. Um dieses Problem zu beheben, könnten Sie den Font-Installer für Windows oder macOS herunterladen , dann können Sie es installieren. Danach können Sie auf Ihre lokalen Schriftarten in Ihrem Browser zugreifen , was ziemlich genial ist. Obwohl Sie durch die Installation dieses Font-Installationsprogramms Zugriff auf Ihre lokalen Schriftarten erhalten können, empfehle ich Ihnen dringend, die Desktop-Version von Figma zu verwenden , da dies Ihren Designprozess wirklich beschleunigt. Leute, vielen Dank, dass ihr euch dieses Video angesehen habt. Ich hoffe, es hat dir gefallen. Im nächsten Video werde ich über die Umgebung von Figma sprechen und wie Sie es einfach verwenden können. Wir sehen uns dann. 25. Figma: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über die Umgebung von Figma sprechen. Wie Sie sehen können, benutze ich jetzt Figma in meinem Browser. Ich werde jedoch die Desktop-Version öffnen , um meinen Designprozess zu beschleunigen. Also lass mich die Figma-App öffnen, da geht's los. Dies ist mein primärer Account, wie Sie sehen können, und dies ist die Desktop-Version, die wir leicht verwenden können. Lassen Sie uns zunächst eine neue Datei erstellen. Hier, wie Sie sehen können, können wir die Umgebung der Figma in vier verschiedene Abschnitte aufteilen. Die Symbolleiste, die sich oben befindet, und sie besteht aus allen notwendigen Werkzeugen, die Sie für die Gestaltung einer erstklassigen Benutzeroberfläche benötigen. Wie Sie hier sehen können, haben Sie ein Menü und hier haben Sie einige Untermenü wie Datei, Bearbeiten, Ansicht, Objekt, Vektor, Text, arrangieren, etc. Wir werden alle diese Optionen während dieses Kurses behandeln. Hier haben Sie einige Werkzeuge wie Verschieben von Werkzeugen, Skalieren und auch das Rahmen- und Slice-Werkzeug. Dann haben Sie die Objekte oder Formen Werkzeug und auch das Stift-Werkzeug. Dann haben wir den Text und die Kommentare. Rechts auf der linken Seite haben wir den Ebenenbereich, in dem alle Ihre Layer und alle Ihre Assets aufgelistet sind. Wie Sie sehen können, gibt es hier noch keine Komponente , da wir bisher keine Komponente erstellt haben. In den zukünftigen Lektionen werden wir jedoch lernen, wie man diese Abschnitte auch benutzt. Dann haben wir auf der rechten Seite den Inspektor, der aus drei verschiedenen Teilen besteht. Wie Sie sehen können, haben wir Design, Prototyp und Code. Wenn ich also auf meiner Tastatur auf ein „A“ klicke, kann ich eine Zeichenfläche erstellen, um meinen Designprozess zu starten. Zum Beispiel kann ich wählen Telefon und hier werde ich wählen iPhone 11 Pro oder X. Wie Sie sehen können, haben Sie die Dimension direkt dort drüben, Ich werde auf, dass klicken, und hier, Sie haben Ihre Zeichenfläche und Sie können den Namen auf der Ebene sehen s Liste. Wenn Sie darauf doppelklicken, können Sie es ändern, was Sie wollen. Zum Beispiel, sagen wir nach Hause, ziemlich gut, und ich kann einfach die Rechteck-Form wählen, und da gehen wir. Wir haben eine andere Schicht direkt unter dieser Zeichenfläche. Hier auf der rechten Seite im Inspektorbereich haben Sie verschiedene Optionen. Beispielsweise haben Sie im Entwurfsabschnitt Achsen, Sie haben eine Bemaßung und auch die Position, die Positionierung Ihrer Form. Sie haben auch den Abschnitt Einschränkungen, und wir werden in jedem Abschnitt separat in der nächsten Reihe von Videos eintauchen. Also mach dir keine Sorgen, wenn du nicht verstehst, was die Einschränkungen sind oder was sie tun. Zum Beispiel, hier haben wir Ebene und Sie können die Deckkraft Ihrer Ebene und ihren Modus anpassen. Hier haben Sie eine Füllung für die Änderung der Farbe. Wie Sie sehen können, haben wir Strich, wir haben Effekte für das Hinzufügen von Schatten, und dann haben wir den Export. Für Prototyping können Sie zum Prototyp-Abschnitt gehen. Hier haben wir auch verschiedene Optionen, die wir im Abschnitt Prototyping dieses Kurses behandeln werden . Sie haben auch den Codeabschnitt, und es ist so nützlich, wenn Sie ein Entwickler sind oder Siedie Eigenschaften Ihres Designs an Ihren Webentwickler oder sogar Ihren Anwendungsentwickler übergebenmöchten die Eigenschaften Ihres Designs an Ihren Webentwickler oder sogar Ihren Anwendungsentwickler übergeben Ihren Webentwickler oder , da Sie Ihre Eigenschaften im Code, zum Beispiel für iOS, haben wir variable und verschiedene Eigenschaften. Das ist ziemlich cool. Nicht zuletzt ist der vierte Abschnitt der Canvas, der sich mitten in Figma befindet. Hier werden Sie alle Ihre Entwürfe und alle Ihre Zeichenflächen platzieren. Sie haben auch die Freigabe-Option direkt dort drüben, dass Sie Ihre Datei oder Komponenten mit Ihrem Teammitglied teilen können, oder sogar Sie können es an Ihren Kunden für die Überprüfung des Projekts senden, etc. dass Sie Ihre Datei oder Komponenten mit Ihrem Teammitglied teilen können, oder sogar Sie können es an Ihren Kunden für die Überprüfung des Projekts senden, etc. Vielen Dank, dass Sie sich dieses Video ansehen. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 26. Formen: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. Ich hoffe, es geht Ihnen gut. In diesem Video werden wir über die Formen sprechen. Das Formwerkzeug ist eines der wichtigsten Werkzeuge, wenn Sie eine Benutzeroberfläche entwerfen , denn unabhängig davon, welche Art von Benutzeroberfläche Sie entwerfen, müssen Sie sicher eine dieser Formen verwenden. Ganz oben in der Symbolleiste finden Sie die Shapes. Wenn Sie darauf klicken, können Sie sehen, dass es hier verschiedene Formen gibt. Zum Beispiel haben wir das Rechteck. Wenn ich das auswähle, kann ich diese Form einfach durch Ziehen und Ablegen erstellen. Wie Sie sehen können, haben wir ein Rechteck erstellt und es heißt Rechteck 1. Jede Form hat einige Eigenschaften, z. B. hat diese Form die Eigenschaft „Eckenradius“, und wie Sie sehen können, wird sie mit diesen Punkten angezeigt. Wenn ich einfach auf einen von ihnen klicke und die Maus ein wenig so ziehe, kann ich den Eckenradius auf 30 einstellen. Alternativ können Sie den Umfang des Eckenradius ändern, indem Sie den Inspektor dort drüben schreiben, zum Beispiel kann ich ihn auf 50 so einstellen. Wenn Sie den Eckenradius oder nur einen dieser Punkte oder Kanten ändern möchten, können Sie die „Wahltaste“ gedrückt halten und dann so ziehen und ablegen. Wie Sie jetzt sehen können, haben wir für jeden Punkt unterschiedliche Eckenradius. In der Tat können Sie Ihren Eckenradius so anpassen, wenn Sie einfach auf „Independent Corners“ auf diesem Symbol klicken, können Sie sehen, dass Ecke Glättung, und ich werde darauf klicken. Hier haben wir einen Schieberegler und ich werde es auf 60 Prozent setzen. Wie Sie hier sehen können, ist es iOS geschrieben, also was bedeutet das? Eigentlich verwendet Apple in iOS glatte Ecken. Wenn Sie mit Sketch vertraut sind, verwenden wir auch den gleichen Begriff. Wie Sie sehen können, macht es unsere Ecken viel glatter. Natürlich können Sie es erhöhen, aber 60 Prozent lassen es gut aussehen, perfekt. Natürlich können Sie die Farbe Ihrer Form ändern, wie wir im vorherigen Video besprochen haben. Wir werden jedoch alle diese Funktionen in der nächsten Reihe von Videos abdecken, aber im Moment bleiben wir bei den Formen. Die nächste Form wird als Linie bezeichnet. Es ist nur ein Schlaganfall. Wenn ich „Shift“ und „zwei“ halte, kann man sehen, dass Figma mir diese Form automatisch in einer Weise bringt , dass ich sie deutlich sehen kann, also werde ich darauf klicken. Hier auf Schlaganfall haben Sie auch verschiedene Eigenschaften. Zum Beispiel können Sie die Dicke der Linie ändern oder sagen wir diesen Strich so. Lassen Sie mich es auf 10 setzen. Wenn Sie auf diese Punkte klicken, können Sie sehen, dass wir hier verschiedene Optionen haben. Es heißt fortgeschrittener Schlaganfall und wir haben Kappe und Join. Was bedeutet das? Werfen wir einen Blick darauf. Lassen Sie mich dieses Menü öffnen und hier haben wir verschiedene Optionen. Wir haben rund, die unsere Linie für beide Seiten abgerundet wird. Wir haben Quadrat, was keinen Sinn ergibt, weil es irgendwie dasselbe ist. Wir haben einen Zeilenpfeil wie diesen, und wir haben Dreieckpfeil wie diesen. Wenn ich zum Beispiel „Linienpfeil“ wähle und ich beschließe, diese Form durch Doppelklick auf diese Form zu ändern und zum Beispiel diesen Punkt zu verschieben, können Sie sehen, dass es sich automatisch ändert, ziemlich gut. Wir werden Joins in den zukünftigen Lektionen behandeln. Lassen Sie uns nun über die nächste Form sprechen, lassen Sie mich auf „Rückgängig“ klicken, um die Bearbeitung abzuschließen. Die nächste Form ist ein Pfeil, wie dieser. Es ist wieder eine Linie oder sagen wir nur Strich, den wir gerade erstellt haben. Sie könnten jedoch auch einen Pfeil wie diesen erstellen. Wie Sie sehen können, haben Sie verschiedene Typen, Rundung, Quadrat, Linienpfeil und Dreieckpfeil. Die erste wurde standardmäßig gemischt, weil wir eine angepasste Zeile hatten. Die nächste Form ist der Kreis. Ich werde „Shift“ halten, um das Seitenverhältnis so zu halten. Ich werde Drag & Drop, um diesen Kreis ziemlich gut zu erstellen. Dieser Kreis hat eine neue Eigenschaft, die Bogen genannt wird. Lassen Sie uns darauf klicken und versuchen, ein wenig zu bewegen, um zu sehen was Sie erreichen können, indem Sie diese Eigenschaft so ändern. Das ist ziemlich genial und vor allem ist es so nützlich wenn Sie ein Diagramm erstellen, genial. Die nächste Form heißt Polygon, ich werde eine erstellen. Lassen Sie uns diese Form für jetzt entfernen. Ich werde es größer machen, ziemlich gut. Das Polygon-Shape weist zwei verschiedene Eigenschaften auf. Der erste ist Eckenradius, und er funktioniert wie Rechtecke. Die zweite wird Zählung genannt, was die Anzahl der Kanten bedeutet, die wir verwenden, die wir erstellen. Lassen Sie mich es vergrößern, indem Sie „Shift“ gedrückt halten und so darauf klicken. Ich werde meine Maus nach oben und unten bewegen. Sie können es auch im Inspektor ändern, lassen Sie uns es auf acht setzen, ziemlich gut. Ich kann auch den Radius natürlich hier ändern, fantastisch. Lassen Sie mich das entfernen und ich werde den Stern wieder hier erschaffen, ziemlich gut. Die Sternform hat drei verschiedene Eigenschaften. Der erste ist der Eckenradius, wieder so. Die zweite ist das Verhältnis, das ist das Verhältnis zwischen diesen beiden Kanten wie folgt. Sie können das ändern, ich werde es auf 40 setzen. Der letzte ist die Zählung. Dass Sie erhöhen und verringern können, wie Sie wollen, ziemlich genial. Last but not least, ist der Ort Bild, dass Sie ein Bild von Ihrem System wählen können. Wenn Sie so ziehen und ablegen und sicherstellen, dass Sie die Umschalttaste auf Ihrer Tastatur gedrückt halten, um das Verhältnis beizubehalten, können Sie ein Bild platzieren. Sie können auch den Radius ändern, es ist so einfach. Jetzt reden wir über die Dimensionseigenschaft da drüben. Hier, wie Sie sehen können, haben Sie verschiedene Eigenschaften wie X und Y, die sich auf die Position dieser Form beziehen. Wenn ich Null und Null für Y setze, wie Sie sehen können, wird es in die linke obere Ecke verschoben, da die Null- und Nullpunkte von der oberen und linken Ecke beginnen. Jetzt können Sie die Breite und Höhe ändern. Zum Beispiel können Sie es auf 300 setzen. Wie Sie jedoch sehen können, sind die Breite und Höhe verknüpft. Wenn Sie sie separat ändern möchten, können Sie sie einfach aufheben, indem Sie auf dieses Symbol klicken, das als eingeschränkte Proportionen bezeichnet wird, und dann kann ich die Breite oder Höhe separat so ändern. Wie in Sketch können Sie hier mathematische Operationen durchführen. Zum Beispiel kann ich 300 durch 2 teilen, so und da gehen wir, wir haben 150 oder ich kann 180 mit 2 multiplizieren. Es ist eine großartige und nützliche Funktion, wenn Sie Ihre Benutzeroberfläche entwerfen. Wir haben die Ausrichtungen, wo sie oben sind. Zum Beispiel, wenn ich dieses Objekt oder diese Form wähle, kann ich es horizontal an der Mitte ausrichten, ich kann es auf der linken Seite ausrichten, an der rechten Seite ausrichten, an der Spitze ausrichten, ausrichten vertikal, und richten Sie es an der Unterseite aus. Aber was, wenn Sie ein Objekt ausrichten möchten, das in einem anderen Objekt platziert wird? Angenommen, wir werden dieses Objekt hier setzen, ich werde die Farbe in so etwas wie dunkelgrau ändern, wie dieses. Ich werde es etwas kleiner machen. Angenommen, wir werden diese Form mit unserem Rechteck ausrichten, das jetzt wie ein Quadrat aussieht, aber wie können wir das tun? Zunächst müssen Sie sicherstellen, dass Sie beide Objekte gleichzeitig ausgewählt haben. Sie können die „Umschalttaste“ auf Ihrer Tastatur gedrückt halten und sie auswählen, oder Sie können sie so auswählen, ziehen und ablegen. Dann klicken Sie auf „Horizontal zur Mitte ausrichten“ und „Vertikal zur Mitte ausrichten“ und es ist fertig, ziemlich genial. Jetzt in diesem Video haben wir gelernt, wie man Formen verwendet, und Sie kennen die Eigenschaften jeder spezifischen Form. Ich hoffe, Sie haben dieses Video genossen und ich werde Sie im nächsten Video sehen. 27. Formen bearbeiten: Hallo an alle und herzlich willkommen zu einem anderen Video dieses Kurses. In diesem Video werden wir über das Bearbeiten von Formen sprechen, was ein sehr wichtiges Thema ist, weil es die ganze Zeit passiert, die Sie benötigen, um Ihre Formen zu bearbeiten. Zunächst einmal werde ich drücken, „A“ und wie Sie jetzt sehen können, kann ich mein Kunstboard wählen. Lassen Sie uns das Desktop-Menü öffnen und hier werde ich wählen, MacBook Pro, für dieses Video ist es egal, aber ich habe genug Platz, um Ihnen zu zeigen, wie Sie Ihre Formen bearbeiten können. Dann werde ich hier ein neues Rechteck erstellen. Ich werde halten, Shift, und Drag & Drop so. Dann erhöhen wir den Eckenradius. Übrigens, wenn Sie die Umschalttaste auf Ihrer Tastatur gedrückt halten, können Sie den Eckenradius um 10 Einheiten erhöhen oder verringern, so ziemlich gut. Dann werde ich es mit einer anderen Farbe füllen, also lassen Sie uns nach einem sehr schönen Blau suchen. Ich denke, es ist großartig und dann werde ich hier ein weiteres Rechteck erstellen, also lasst uns halten, Shift, wieder, und ich werde Ihnen eine sehr großartige Technik zeigen, um Ihre Farben richtig zu wählen. Wenn Sie nicht sicher sind, wie Sie eine gute Farbe mit diesen Blau, die einen großen Kontrast zwischen ihnen schafft, können Sie zuerst die gleiche Farbe wie diese wählen. Dann, wenn Sie diesen Kreis einfach so auf die dunklere Seite dieser Farbpalette bewegen, können Sie einfach eine perfekte Übereinstimmung mit Ihrer Hintergrundfarbe wählen, was erstaunlich ist, nicht wahr? Nun, wie können wir unsere Form bearbeiten? Um eine beliebige Form zu bearbeiten, müssen wir zuerst in den Bearbeitungsmodus wechseln. Um dies zu tun, können Sie auf diese Form doppelklicken und dort gehen wir. Jetzt befinden wir uns im Bearbeitungsmodus, und wie Sie sehen können, haben wir hier vier verschiedene Knoten, oder sagen wir Punkte, mit denen wir anfangen können, unsere Form zu bearbeiten. Wenn ich auf den Kreis klicke und versuche, ihn ein wenig zu bewegen. Sie können sehen, dass ich diese Form ganz einfach bearbeiten kann, wie ich es möchte, so. Ich kann sogar den Radius dieser Ecke im Inspektor erhöhen, so etwas. Sie können auch weitere Knoten auf Ihrem Pfad hinzufügen, wie folgt. Zum Beispiel, hier kann ich einmal klicken und da gehen wir, ich habe gerade einen neuen Knoten erstellt, und ich kann ihn auf eine andere Weise wie folgt bearbeiten. Lassen Sie mich auf den ersten Zustand dieses Rechtecks zurückkommen, oder sagen wir Quadrat wie dieses. Nehmen wir nun an, Sie möchten so etwas wie eine Kurve erstellen In diesem Fall können Sie das Biegewerkzeug verwenden, das sich hier befindet. Sie können auf, dass klicken und wählen Sie einen dieser Knoten, dann können Sie sehen, dass behandelt Controller erscheint, und wir diese behandelt Controller können Sie leicht Ihre Kurve wie folgt anpassen. Es ist großartig, nicht wahr? Die Abkürzung des Biegewerkzeugs hält, Befehl, auf Ihrer Tastatur, da gehen wir. Sie können ganz einfach Ihre Kurve anpassen, um Ihre Erwartungen zu erfüllen, ziemlich genial. Nachdem Sie Ihre Form bearbeitet haben, müssen Sie daran denken, den Bearbeitungsmodus zu schließen. Um dies zu tun, können Sie klicken, „Rückgängig“ wie folgt, so gerade jetzt sind wir aus dem Bearbeitungsmodus. Aber ist es nicht besser, ein echtes Symbol zu erstellen, um Ihnen zu zeigen , wie Sie den leistungsstarken Bearbeitungsmodus nutzen können? Lasst uns das machen. Zuallererst werde ich ein bisschen so zoomen, dann werde ich in den Bearbeitungsmodus eintreten, lasst uns doppelklicken. Danach werde ich hier einen neuen Knoten erstellen. Ich werde darauf klicken, dann werde ich es nach unten ziehen, indem ich Shift gedrückt halte , so ziemlich gut. Das nächste, was ich tun werde, ist die Auswahl aller Knoten durch Halten von Befehl A oder Steuerung A in Windows, dann werde ich den Eckenradius erhöhen. Vergrößern wir es vielleicht auf sechs, das ist ziemlich gut. Jetzt werde ich es etwas größer machen, und das Letzte, was ich tun werde, ist, dieses Symbol zu drehen. Um etwas in Figma zu drehen, können Sie Ihre Maus direkt außerhalb Ihrer Form bewegen, und Sie können sehen, dass die Rotationsanzeige oder das Symbol sofort angezeigt wird. Dann werde ich halten, Shift, und ich werde es um 180 Grad drehen. Wie Sie sehen können, haben Sie den Betrag hier, und da gehen wir. Wie sieht es aus? Du hast recht, es ist wie ein Lesezeichen. Können Sie sehen, wie erstaunlich und leistungsstark dieses Bearbeitungswerkzeug ist? Ich werde einige Änderungen vornehmen, um es besser zu machen. Lassen Sie mich auf die Form doppelklicken, und ich werde diese beiden oberen Knoten auswählen und dann den Eckenradius auf 26 erhöhen, vielleicht ziemlich genial. Lassen Sie mich beide Ebenen auswählen und ich werde sie nach, Befehl G oder Control G, in Windows gruppieren Befehl G oder Control G, , und ich werde es nennen, Lesezeichen. Also, was können wir sonst noch tun? Lassen Sie uns voran und erstellen Sie hier ein Polygon, ich werde die Farbe auf das gleiche Blau wie unser Lesezeichen-Symbol setzen. Lassen Sie uns diesen Hintergrund kopieren und als unseren Rahmen einfügen. Ich werde halten, Befehlstaste oder Strg-Taste, in Windows und klicken Sie auf dieses Rechteck oder Quadrat und kopieren Sie es durch, Befehl C, und ich werde es einfügen. jedoch daran, diese Ebene außerhalb dieser Lesezeichengruppe zu verschieben. Ich werde es ein bisschen so verschieben, jetzt doppelklicken wir auf dieses Dreieck. Hier werde ich einen weiteren Knoten direkt am unteren Rand erstellen, so und lassen Sie mich es ein wenig ziehen, da gehen wir. Wir haben unseren GPS-Marker. Das ist ziemlich cool, nicht wahr? Lassen Sie mich es kleiner machen. Fantastisch. Lassen Sie mich es gruppieren und ich werde schreiben. Lassen Sie mich dieses Kunstbrett ein wenig vergrößern, dann werde ich Ihnen zeigen, wie Sie das Stiftwerkzeug verwenden können. Angenommen, Sie möchten zum Beispiel einen gekrümmten Pfeil erstellen , wie können Sie das tun? Es ist so einfach. Beginnen wir mit dem Hinzufügen eines Knotens, dann brauchen Sie einen anderen Knoten wie diesen und den letzten hier, das ist alles. Zuerst werde ich die Strichstärke vielleicht auf vier erhöhen, dann werde ich sie ein wenig drehen. Wenn ich auf diese Punkte klicke, kann ich den Cap-Modus auf Zeilenpfeil wie folgt ändern, es ist ziemlich cool. Ich kann es sogar so bearbeiten. Können Sie sehen, wie einfach es ist, neue Formen zu erstellen und zu bearbeiten? Ziemlich genial. Alles klar Leute, vielen Dank, dass Sie dieses Video gesehen haben, ich hoffe, Sie haben es genossen. In der nächsten Reihe von Videos werden wir die Verwendung dieser Werkzeuge üben, indem wir reale Projekte erstellen. Also keine Sorge, wenn Sie nicht alle Details verstehen, werde ich sicherstellen, alles im Detail zu erklären. Ich werde Sie im nächsten Video sehen. 28. Grundlagen von Ebenen: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über das Ebenen-Panel sprechen. Zu wissen, dass es so wichtig ist, wie Sie das Ebenenbedienfeld richtig verwenden können. Es mag einfach zu bedienen erscheinen, aber manchmal wird es ein wenig schwierig, in Bezug auf die Neuanordnung Ihrer Ebenen und Ihrer Objekte. Lassen Sie uns in diese Teile eintauchen und ich werde Ihnen zeigen, wie Sie es effizient nutzen können. Wie Sie sehen können, haben Sie die Layer-Liste auf der linken Seite. Hier können Sie alle Ihre Ebenen, alle Ihre Gruppen und auch alle Ihre Frames sehen. Wenn Sie eine neue Form oder ein neues Objekt erstellen, wird sie an den Anfang dieser Ebenenliste angezeigt. Probieren wir es aus. Ich werde hier ein Rechteck erstellen, und wie Sie sehen können, habe ich Rechteck 1. dieses Rechteck umzubenennen, doppelklicken Sie darauf und nennen wir es R1. Dann werde ich eine andere Form erstellen. Lassen Sie uns einen Kreis erstellen. Ziemlich gut. Ich werde die Farbe ändern, um sie sichtbarer zu machen. Ziemlich genial. Ich werde es C1 nennen. Wie Sie sehen können, wurde C1 an den Anfang dieser Layer-Liste platziert. Es wird auf der Vorderseite Ihres Canvas angezeigt. Dies ist der Grund, dass dieser Kreis hier sichtbar ist. Wenn ich diese Ebene unter R1 verschiebe, ist sie nicht mehr sichtbar. Sie können jedoch seine Eigenschaften wie die Farbe oder die Größe ändern. Wenn ich es zurück an seine vorherige Position schiebe, können Sie sehen, dass es wieder sichtbar ist. Bestellen Ihrer Ebenen ist so wichtig. Nehmen wir nun an, wir werden unsere Ebenen gruppieren. Wählen wir diese beiden Formen aus und halten Befehl G gedrückt. Wie Sie sehen können, haben wir gerade Gruppe 1 erstellt. Wenn Sie die in dieser Gruppe enthaltenen Layer sehen möchten, können Sie den kleinen Pfeil neben diesem Symbol verwenden, der anzeigt , dass es sich um eine Gruppe handelt. Ich werde darauf klicken, und da gehen wir. Um eine Ebene auszuwählen, können Sie einfach darauf klicken. Wie Sie sehen können, erscheint ein hellblaues Fahrrad , um zu zeigen, dass diese Ebene ausgewählt wurde. Wenn Sie zu Menü gehen und zu Einstellungen gehen, können Sie sehen, dass Sie hier verschiedene Optionen haben. Einer von ihnen ist, Highlight Layer on Hover. Was bedeutet das? Das bedeutet, dass, wenn Sie mit der Maus auf jede Ebene bewegen, wie zum Beispiel C1, können Sie auf der Leinwand sehen, dass die blaue Linie angezeigt wird , um zu zeigen, dass dies Ihre gewünschte Ebene ist. Ich werde das auswählen. Wenn Sie die Gruppierung dieser Ebenen aufheben möchten, können Sie einfach auf diesen Gruppennamen klicken und dann mit der rechten Maustaste hier klicken, und Sie können auf „Gruppierung aufheben“ klicken. Ich werde Befehl Z oder Control Z in Windows verwenden. Was ist, wenn Sie einige Ebenen ausblenden möchten? Es ist so einfach. Angenommen, wir werden diesen Kreis verbergen, der C1 genannt wird. Um dies zu tun, müssen wir zunächst auf diese bestimmte Ebene wie diese schweben. Dann erscheint sofort ein Augensymbol neben diesem Vorhängeschloss. Ich werde auf dieses Augensymbol klicken und Sie können diese Ebene einfach aus- und einschalten, so. Sie können auch jede Ebene sperren, indem Sie auf dieses Vorhängeschloss klicken, um zu verhindern, dass Ihre Ebene versehentlich bearbeitet wird. Wenn Sie den Layer sperren, können Sie den Layer nicht verschieben, Sie können nicht mit dem Layer interagieren Sie können jedoch weiterhin dessen Eigenschaften ändern. Probieren wir es aus. Ich werde versuchen, diese Schicht ein wenig zu verschieben. Wie Sie sehen können, weil es gesperrt ist, kann ich es nicht bewegen. Die Position ist fest und Sie können diese Technik verwenden, um Ihre Hintergründe zu verriegeln. Manchmal kann es nützlich sein. Lassen Sie uns jedoch jetzt versuchen, einige seiner Eigenschaften zu ändern. Zum Beispiel werde ich seine Farbe ändern. Wie Sie sehen können, kann ich immer noch Zugriff auf seine Eigenschaften erhalten, obwohl es gesperrt wurde. Um das zu entsperren, können Sie wieder auf dieses Vorhängeschloss klicken, und da gehen wir, es ist freigeschaltet. Sie können den Typ jedes Layers in der Layer-Liste anhand des Symbols neben dem Namen erkennen . Wie Sie auf dem Bild sehen können, haben wir Rahmen, wir haben Gruppen, wir haben Komponenten, über die wir in den zukünftigen Lektionen sprechen werden, wir haben Instanzen, wir haben Textobjekt, wir haben Form, Bild, ein animiertes GIF. Lassen Sie uns nun über die Positionierung Ihrer Ebenen sprechen. Noch einmal, weil ich Ihnen zeigen werde, wie Sie die Positionierung Ihrer Ebenen direkt unter Canvas neu anordnen können. Angenommen, Sie möchten das Quadrat oder sagen wir Rechteck nach vorne bringen. Um dies zu tun, können Sie natürlich zur Ebenenliste gehen und es so verschieben, und es ist fertig. gibt es jedoch eine Alternative. Sie können einfach mit der rechten Maustaste auf die Leinwand klicken, und Sie können wählen, Nach vorne bringen. Da gehen wir. Wenn Sie mit Adobe Illustrator vertraut sind, wissen Sie, dass Sie die gleiche Funktionalität auch in dieser Software verwenden können. Gehen wir nun zum Asset-Abschnitt. Hier, wie Sie sehen können, da wir noch keine Komponenten erstellt haben, können wir hier keine Komponenten sehen. Grundsätzlich Komponenten, sind Teile Ihres Designs, die Sie wiederverwenden können. Wir werden später darüber sprechen, und wir werden in den zukünftigen Lektionen in Komponenten eintauchen. Wir haben hier eine andere Option, die Seiten genannt wird. Ganz oben, wie Sie sehen können, hier haben wir Seite 1, und wenn ich darauf klicke, können Sie sehen, dass ich Seiten habe. Es heißt Seite 1. Sie können das umbenennen. Ich werde es auf Website ändern. Sie können das duplizieren, wenn Sie einfach mit der rechten Maustaste auf diesen Layer klicken, wie Sie sehen können, können Sie dieser Seitenliste eine neue Seite hinzufügen, wie folgt. Sie können es Seite 2 nennen. Die gute Nachricht ist, dass es keine Begrenzung für das Erstellen von Seiten gibt. Sie können beliebig viele Seiten erstellen. Zum Beispiel könnten Sie einige Teile Ihres Designs trennen, um es deutlich zu machen, wenn Sie in einem Team arbeiten, oder wenn Sie verschiedene Prototypen erstellen möchten, ist es ratsam, auch verschiedene Seiten zu haben. Ich gehe auf die Website, und das ist alles für dieses Video. Vielen Dank, dass Sie sich dieses Video ansehen. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 29. Boolesche Operationen: Hallo an alle. Willkommen zurück zu einem anderen Video der Partituren. In diesem Video werden wir über die booleschen Operationen sprechen. Tatsächlich verwenden wir heutzutage boolesche Operationen fast in jedem Aspekt unseres Lebens, wie Kunst, Programmierung, Design usw. schwierig es klingen mag, eigentlich sind boolesche Operationen so einfach. Lassen Sie uns hineintauchen und ich werde Ihnen zeigen, wie Sie sie leicht verwenden können. Wie Sie sehen können, habe ich hier ein einfaches Projekt mit vier verschiedenen Zeichenflächen erstellt, und ich nenne sie Union, Subtrahieren, Intersect und Exclude. Dies sind unsere booleschen Operatoren. Wie Sie hier sehen können, haben wir dieses Menü und wir haben Union Selection, wir haben Subtrahieren Auswahl, wir haben Intersect Selection, und wir haben Ausschließen Auswahl. Zunächst einmal lassen Sie mich diese Zeichenfläche wählen und ich werde „Shift“ halten und zwei, so, wie Sie vielleicht vermuten, Gewerkschaftsmittel kombiniert. Wenn ich versuche, diese Form mit diesem Kreis zu überlappen, wie Sie sehen können, wurden sie überlappt. Wenn ich die booleschen Operationen wähle und ich Union Operation wähle, können Sie sehen, dass wir diese beiden Kreise zu einer einzigen Form kombiniert haben. Hier können Sie natürlich Zugriff auf Sub-Layer wie diese Kreise erhalten, und Sie können sie trotzdem bearbeiten. Wir haben jedoch eine einzige Form und diese Operationen sind so nützlich, um Symbole zu erstellen, und wir werden später darüber sprechen. Nun gehen wir weiter und sprechen über die nächste Operation, die Subtrahieren ist. Lassen Sie mich zunächst diese Form so überlappen. Ich werde Subtrahieren wählen. Wie Sie sehen können, subtrahiert er den überlappenden Abschnitt von der Basisform. Der überlappende Abschnitt ist dieser Teil in der Mitte. Wenn ich Subtrahieren wähle, entfernt es diesen überlappenden Abschnitt von dieser Basisform, die der linke Kreis wie folgt ist. Wie Sie sehen können, ist der Vorgang „Subtrahieren“ das Gegenteil von „Union“. Die nächste Operation ist „Intersect“. Lassen Sie mich diese beiden Schichten so überlappen. Ich werde in „Auswahl schneiden“ klicken und diese Operation entfernt alle Bereiche außer dem überlappenden Abschnitt wie folgt. Die nächste Operation, die die letzte ist, heißt Exclude und es ist das Gegenteil von Intersect Operation. Wenn ich diese beiden Formen so überlappt und auf „Auswahl ausschließen“ klicke, können Sie sehen, dass alle Bereiche außer dem überlappenden Abschnitt beibehalten werden. Haben Sie also gesehen, wie einfach es ist, boolesche Operationen zu verwenden? Sie sind so nützlich. Denken Sie nicht, dass es eine gute Idee ist, einige Symbole mit diesem Wissen zu erstellen? Das ist großartig. Zunächst werde ich eine andere Zeichenfläche erstellen und ich werde auf meiner Tastatur auf „A“ klicken. Lassen Sie uns ziehen und ablegen, um einen neuen Rahmen wie diesen zu erstellen. Angenommen, wir möchten ein Suchsymbol erstellen. Was brauchen wir? Wir brauchen einen Kreis. Ich werde eine erstellen, und ich werde es nicht mit Farben füllen. Ich werde die Füllung entfernen und einen Strich hinzufügen, wie diesen. Ich werde die Dicke dieses Schlaganfalls erhöhen. Lassen Sie mich sehen, ich denke, 15 ist großartig und ich werde auch ein Rechteck mit der Breite von 15 als auch erstellen . Ich werde die Farbe auf Schwarz so ändern. Lassen Sie mich ein wenig hineinzoomen. Ich werde es nach oben bringen. Wählen wir dann beide Objekte aus und richten sie an der Mitte aus. Ich werde „Union Selection“ so wählen. Ziemlich gut. Jetzt kann ich es drehen. Ehrfürchtig. Haben Sie gesehen, wie einfach es ist, ein Symbol mit diesen booleschen Operationen zu erstellen? Ziemlich gut. Ich hoffe, es hat dir gefallen. Lassen Sie uns nun ein anderes Symbol erstellen. Lassen Sie uns zum Beispiel ein Cloud-Symbol erstellen. Ich werde hier ein Rechteck erstellen, wie dieses. Erhöhen wir den Radius. Ziemlich genial. Ich muss auch einen Kreis wie diesen erstellen. Lassen Sie mich es überlappen. Ziemlich gut. Dann wähle ich beide aus und wähle „Union Selection“. Da gehen wir, wir haben unsere Wolke. Wenn ich die Farbe in Schwarz ändere, können Sie sehen, wie erstaunlich es ist. Sie können es auch später anpassen oder sogar, zum Beispiel, Ich kann die Füllung entfernen und ich kann Strich wie folgt hinzufügen, wenn Sie diese Styling bevorzugen. Denken Sie jedoch daran, wenn Sie einige Symbole für ein bestimmtes Projekt entwerfen, müssen Sie die Stärke Ihrer Linien für jedes spezifische Symbol gleich halten , um in Ihrem Design konsistent zu sein. In Ordnung, Jungs. Vielen Dank, dass Sie sich dieses Video ansehen. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 30. Text: Hallo an alle und willkommen zurück zu einem anderen Video des Kurses. In diesem Video werden wir über Texte sprechen. Wir als UI UX Designer verwenden Texte die ganze Zeit und wir müssen alle Geheimnisse hinter dem Textwerkzeug kennen. Um also einen Text in Figma zu erstellen, können Sie einfach auf die Symbolleiste gehen und auf dieses Textsymbol klicken. Oder du könntest T auf deiner Tastatur so drücken. Awesome, und wenn Sie einmal klicken, werden Sie einen Bereich nimmt Ebene erstellen oder sagen wir einen Absatz Text-Ebene. Okay, also werde ich „Hallo“ schreiben. Wir sind UI UX Designer. Ziemlich genial, und wie Sie sehen können, wächst diese Art von Textzeile horizontal, wenn Sie tippen, okay? Natürlich können Sie es aber ändern. Lassen Sie mich Ihnen zunächst zeigen, wie Sie die Schriftgröße ändern können. Wenn Sie zum Textinspektor auf der rechten Seite gehen, können Sie die Schriftart ändern, Sie können die Schriftgröße ändern, Sie können die Gewichtung ändern. Wir werden später über all diese Eigenschaften sprechen. Also zuerst werde ich es auf 36 ändern. Ziemlich genial. Jetzt werde ich den Rahmen auswählen und ich werde Shift drücken und nach rechts. Wie ich bereits erwähnt habe, ist dies eine Bereichstextzeile. Was also, wenn Sie es vertikal wachsen lassen wollen? Um das zu tun, können Sie auf diese Punkte klicken und hier haben Sie viele Möglichkeiten zu ändern. Aber was wir brauchen, ist diese Größenänderung, wie Sie sehen können, es ist als Standard festgelegt, um horizontal zu wachsen. Wenn Sie es vertikal wachsen lassen möchten, können Sie es ändern, um hier vertikal zu wachsen, und wenn ich fortfahre, wächst es vertikal. Ich werde folgendermaßen schreiben: „Danke für deine Unterstützung“. Sie können auch eine Textzeile mit fester Größe erstellen. Oder du könntest es hier so ändern. Aber was ist, wenn Sie selbst eine Textzeile mit fester Größe erstellen möchten? Es ist so einfach. Zuerst wählen Sie das Textwerkzeug aus, dann klicken Sie und ziehen Sie so, und auf diese Weise geben Sie die Dimension Ihres Textfeldes so an, okay? Wenn ich hier etwas schreibe, wie „Wir reden über Texte und vergleichen verschiedene Optionen.“ So, und wenn Sie die Bemaßung dieser Textmarken ändern möchten, können Sie leicht auf diesen blauen Begrenzungsrahmen bewegen und Ihr Cursor ändert sich sofort zum Maßstabssymbol, okay, und ich kann es so ändern. Ziemlich gut, nicht wahr? Lassen Sie mich den Weg zu regulären ändern, okay? Manchmal kann es nützlich sein, eine Textzeile in einen Vektor zu konvertieren. Also, wie kannst du das tun? Wenn ich hier mit der rechten Maustaste klicke, kann ich voran gehen und auf flachen klicken, und da gehen wir. Jetzt ist unser Text ein Vektor, wie Sie dort sehen können, und Sie können jeden Buchstaben separat ändern. Ich werde hineinzoomen und lassen Sie uns doppelklicken auf diese H. Dort gehen wir. Nehmen wir an, ich werde hier etwas ändern. Zum Beispiel, wählen wir diese Knoten und ich werde den Eckenradius wie folgt erhöhen, und auch für diesen. Ist es nicht ziemlich cool? So konvertieren Sie Ihre Textzeile in einen Vektor als nützlich, vor allem, wenn Sie ein Logo oder eine Wortmarke, etc. entwerfen , in Ordnung. Angenommen, ich werde eine andere Textzeile wie diese erstellen. Schreiben wir H, dann werde ich das immer wieder duplizieren, und schreiben wir e und hier l und hier l, und wir werden das duplizieren und o, okay. Lassen Sie mich sie ein wenig bewegen, also, wie ich bereits erwähnt habe, um Ihre Takes Line zu einem Vektor zu machen, müssen Sie Ihren Text darauf abflachen. Aber was ist, wenn Sie Ihre Ebenen so halten möchten, wie sie sind? Zum Beispiel, hier habe ich fünf verschiedene Schichten und ich werde es Vektor machen. In diesem Fall können Sie mit der rechten Maustaste klicken und statt „Abflachen“ wählen, können Sie Kontur Kontur wählen. Jetzt haben Sie alle Buchstaben als Vektor. Das ist ziemlich genial, nicht wahr? Alles klar, Jungs, das ist alles für dieses Video. Vielen Dank, dass Sie es gesehen haben, und ich werde Sie im nächsten Video sehen. 31. Text: Hallo, alle. Ich hoffe, es geht Ihnen gut und willkommen zu einem weiteren Video dieses Kurses. In diesem Video werden wir über den Textinspektor sprechen, wie Sie Ihren Text anpassen können. Lassen Sie uns ohne weiteres mit der Auswahl dieser Texte beginnen. Im Textinspektor haben wir verschiedene Optionen. Wie ich bereits erwähnt habe, einige von ihnen, werde ich sie überprüfen. Die erste Option ist die Schriftart, die Sie leicht auf Ihre lokalen Schriftarten oder die Figma-Schriftarten zugreifen können. Sie können Ihre Schriftarten leicht ändern und jetzt werde ich es auf Montserrat zurücksetzen. Die nächste Option ist die Gewichtung Ihrer Schriftart. Sie können es in dünn, hell, normal, fett und schwarz ändern . Beachten Sie jedoch, dass diese Optionen für verschiedene Schriftarten unterschiedlich sein können. Ich werde es regelmäßig einstellen. Die nächste Eigenschaft ist die Schriftgröße. Wie Sie sehen können, können Sie Ihre Schriftgröße leicht ändern. Ich werde es auf 68 ändern. Sie können hier auch mathematische Operationen durchführen. Ich werde es durch zwei teilen, ziemlich genial. Dann haben wir die Zeilenhöhe, die so wichtig ist, wenn Sie eine Benutzeroberfläche in Bezug auf die Sichtbarkeit Ihrer Linien in verschiedenen Bildschirmgrößen entwerfen . Wie Sie sehen können, wurde es auf auto eingestellt. Figma berechnet die Zeilenhöhe in Prozent. Es basiert auf Ihrer Schriftgröße. Wenn Sie Ihre eigene Zeilenhöhe in Pixel deklarieren möchten, können Sie beispielsweise 80 Pixel einfach schreiben . Nun basiert dieser Wert auf Pixeln nicht mehr Prozentsatz. Die nächste Eigenschaft ist der Buchstabenabstand , der den Abstand zwischen den Buchstaben bestimmt. Dann haben wir Absatzabstand. Wir können die Änderungen hier nicht sehen, weil wir nur einen Absatz erstellt haben. Also werde ich diese Schriftgröße ein wenig kleiner machen. Setzen wir es auf 24. Ich werde die Zeilenhöhe auf Auto ändern. Lassen Sie uns einen weiteren Absatz hinzufügen. Ich werde schreiben, wir reden über Eigenschaften. Wenn Sie nun den Absatzabstand ändern, können Sie sehen, dass er sich sofort ändert. Dann haben wir den Absatz Einzug. Wenn ich dies vergrößere, können Sie sehen, dass Sie diesen Betrag angeben können und es wird etwas breiter Platz vor dem ersten Wort jedes Absatzes hinzufügen. Ich werde das rückgängig machen. Ziemlich gut. Hier haben wir die horizontalen Ausrichtungen. Wir haben Text nach links ausrichten, Text in der Mitte ausrichten und Text ausrichten, um zu schreiben. Danach haben wir die vertikale Ausrichtung. Wie Sie sehen können, kann ich es auch ändern. Beachten Sie jedoch, dass diese Option nur für eine Textebene mit fester Größe gilt. Wie Sie sehen können, können wir diese Änderungen anwenden, da wir eine Textebene mit fester Größe verwenden. Aber wenn ich hier einen anderen Text erstelle, hallo, teste ich ihn. Wenn ich nun die vertikale Ausrichtung ändere, passiert nichts. Sie haben auch einige erweiterte Eigenschaften, auf die Sie zugreifen können , indem Sie auf diese drei Punkte klicken. Hier haben Sie den vorherigen Abschnitt, dass Sie jede Operation in einer Vorschau anzeigen können , wenn Sie mit der Maus über diese Optionen bewegen. Die erste ist die Größenänderung, und ich habe Ihnen im vorherigen Video erklärt, Sie haben drei verschiedene Optionen: horizontal wachsen, vertikal wachsen, und feste Größe Textebene. Dann haben Sie eine Ausrichtung wie diese. Danach haben Sie Dekoration. Wie Sie sehen können, ist es auf keine gesetzt, so dass wir keine Dekoration haben. Sie können jedoch auf diese Weise unterstrichen oder durchgestrichen wählen. Danach haben wir den Brieffall. Sie können angeben, welche Art von Groß- und Kleinschreibung Sie verwenden möchten. Zum Beispiel ist dieser Großbuchstaben, wir haben Kleinbuchstaben. Wenn ich Großbuchstaben wähle, werden alle meine Buchstaben in Großbuchstaben geschrieben. Wenn ich Kleinbuchstaben wähle, wie Sie sehen können, gelten die Änderungen sofort. Dann haben wir Titelfall, wir haben kleine Kappen und erzwungene kleine Kappen. Ziemlich genial. Wir haben auch Formulare zwischen Groß- und Kleinschreibung. Es ist jedoch nicht für diesen ausgewählten Text anwendbar. Wir werden es vorerst verlassen. Dann haben wir Nummern. Wir können die Änderungen hier nicht sehen, da wir keine Nummer in unserem Text verwenden, aber Sie können diese hier in einer Vorschau anzeigen. Sie können sogar die Fraktion wählen. Es geht total um Zahlen. Diese sind so weit fortgeschritten, und die meiste Zeit verwenden wir sie nicht in unserem Designprozess. Alles klar, Leute. Das ist alles für dieses Video. Vielen Dank, dass Sie es gesehen haben, und ich werde Sie im nächsten Video sehen. 32. Textstil: Hallo, alle. Ich hoffe, es geht Ihnen gut und willkommen zurück zu einem weiteren Video der Partituren. In diesem Video werden wir über Textstile sprechen. Tatsächlich können Sie mit Stilen eine Reihe von Eigenschaften angeben, um sie in Ihren Projekten wiederverwenden zu können, und Sie können sie auch für Ihr Team freigeben. In diesem Video werden wir in Textstile eintauchen und ich werde Ihnen zeigen, wie wichtig es ist, Ihren Textstil zu erstellen, wenn Sie eine Benutzeroberfläche entwerfen. Angenommen, Sie entwerfen ein sehr kompliziertes Projekt, das aus 50 oder mehr Bildschirmen besteht. In diesem Fall verwenden Sie eine bestimmte Schriftart und nach einer Weile entscheiden Sie sich plötzlich, zum Beispiel die Schriftart Ihrer Kopfzeile oder sogar die Schriftgröße oder das Gewicht zu ändern , also wäre es nicht schön, dass Sie diese Änderungen vornehmen könnten und die Änderungen würden auf alle Ihre Tags zur gleichen Zeit gelten? Das ist fantastisch. Dies ist, was Textstil tun. jetzt ohne weiteres Lassen Sie unsjetzt ohne weiteresmit dem Einfügen eines neuen Textes beginnen. Ich werde zum Beispiel Header 1 hinzufügen , und ich werde es fett machen. Eigentlich, wenn Sie eine Website entwerfen, haben wir sechs verschiedene Arten von Headern, von H1-H6, in HTML. Sie müssen nicht jedes Detail darüber wissen, aber es ist gut, mit einigen Begriffen und einigen Regeln von HTML oder CSS vertraut zu sein. Nun, es ist unsere Header 1 und ich werde die Größe auf 80 so einstellen und dann werde ich meinen ersten Textstil erstellen. Wie kann ich das machen? Es ist so einfach. Siehst du diese vier Punkte? Ich werde darauf klicken und hier gibt es ein Plus-Symbol, mit dem ich einen neuen Textstil erstellen kann und ich werde H1 schreiben, dann lass es uns duplizieren. Das ist richtig, H2 hier und hier, wie Sie sehen können, verwendet es den vorherigen Textstil, den wir gerade für Header 1 definiert haben. Zuallererst müssen wir es von seinem Stil lösen, und dann werde ich es auf 60 setzen, ziemlich gut und ich werde einen anderen Textstil erstellen und nennen wir es H2, lassen Sie uns duplizieren, dass, noch einmal, trennen Sie es von seiner Textstil, und lassen Sie uns es auf 30 setzen. Ich werde Header 3 schreiben, lassen Sie uns auch einen neuen Textstil erstellen, H3 und das ist alles. Wie können wir nun unsere Textstile auf unsere Textebenen anwenden? Lassen Sie mich einen neuen Text erstellen. Ich werde Werbeaktionen schreiben, und wie Sie sehen können, verwendet es automatisch H3. Sie können das leicht ändern, indem Sie auf dieses Menü klicken, und ich werde es auf H2 setzen, da gehen wir. Wenn ich hier zu meinem Textstil gehe, Header 2, und ich einige Änderungen vornehme, gelten diese Änderungen auch für diese Promotion-Tags. Lassen Sie uns versuchen, gehen wir zu H2 und hier haben Sie Edit Stil, ich werde darauf klicken und zum Beispiel, Ich werde es regelmäßig machen, da gehen wir. Haben Sie gesehen, wie erstaunlich es ist, Textstile zu verwenden? Sie können auch die Schriftgröße ändern, zum Beispiel werde ich es auf 40 setzen, und das ist erledigt. Beachten Sie jedoch, dass, wenn Sie die Textfarbe ändern, dies nicht auf die Inzidenz dieses Textstils zutrifft Wenn ich zum Beispieldie Farbe dieser Kopfzeile 2 ändern, die Farbe dieser Kopfzeile 2 ändern, beispielsweise in diese Farbe, wie Sie sehen können, passiert nichts. Denn dafür müssen wir einen Farbstil schaffen, den wir in den Lektionen der Zukunft abdecken werden. Nun lassen Sie mich diese Aktionen duplizieren und dann können wir auch H3 ausprobieren. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 33. Einschränkungen und adaptive Layouts: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über Einschränkungen und reaktionsschnelle Layouts sprechen. Was sind Einschränkungen und warum brauchen wir, um unser Design reaktionsschnell zu gestalten? Angenommen, Sie entwerfen eine Webseite oder einen Anwendungsbildschirm und Sie verwenden, zum Beispiel, dieses Artboard, MacBook Pro, was passiert dann, wenn Ihr Benutzer den Portrait-Modus wie folgt verwendet? Wenn Sie Ihr Design nicht reaktionsschnell machen würden, wäre alles unorganisiert. In diesem Video werden wir über Einschränkungen sprechen und wie Sie Ihre Seiten reaktionsschnell machen können. Zunächst einmal werde ich hier eine einfache Landing Page entwerfen. Lassen Sie uns voran und fügen Sie hier ein Rechteck wie dieses hinzu, und ich werde die Farbe in dunkelblau ändern. Ziemlich genial. Dann werde ich hier einen Text hinzufügen. Lassen Sie uns willkommen in die Welt des UI/UX-Designs schreiben. Lassen Sie mich die Farbe zu Weiß für jetzt ändern und ich werde die Schriftart in SF Pro-Text ändern. Ich werde es ein bisschen größer machen. Setzen wir es auf 64. Ich denke, es ist besser, es zu einer Textebene mit fester Größe wie diese zu machen. Dann lassen Sie mich es an der Mitte ausrichten und auch hier, ziemlich gut. Was brauchen wir dann noch? Ich werde ein paar Links oder Menüs an der Spitze hinzufügen. Lasst uns nach Hause schreiben. Ich werde es auch weiß machen. Lass es uns kleiner machen. Ich denke, 24 Punkte sind großartig, duplizieren Sie das, dann lasst uns Preisgestaltung schreiben. Noch einmal, duplizieren Sie das und hier, Dienstleistungen. Noch einmal, ich werde das duplizieren und jetzt kontaktieren Sie uns, ziemlich gut. Das ist alles. Lassen Sie uns zunächst den Abstand zwischen ihnen ändern. Ich werde dieses Menü im Inspektor auswählen, und ich werde so auf „Horizontalabstand verteilen“ klicken. Auf diese Weise ist der Abstand zwischen meinen Links oder meinen Menüs gleich. Wenn Sie den Abstand zwischen den Objekten überprüfen möchten, können Sie einfach einen Text oder ein Objekt auswählen und dann die Wahltaste oder die Alt-Taste auf der Tastatur gedrückt halten, und Sie können den Mauszeiger auf den Text oder die Form neben der vorherigen Form bewegen. Wie Sie sehen können, wurde es auf 25 eingestellt. Ich werde es 24 machen, so, ziemlich genial. Lassen Sie uns nun diesen Text fett machen. Ich werde mich mutig entscheiden. Jetzt ist es besser. Jetzt werde ich es ein bisschen größer machen. Gut. Lassen Sie uns unsere Menüs an der Spitze gruppieren, Befehl G oder Control G. Ich werde Menüs schreiben, genial. Ich habe es auch vertikal ausgerichtet, und das ist alles vorerst. Nun, wie Sie sehen können, haben wir diese Seite für das MacBook Pro mit dieser Dimension entworfen, 1440 von 900, und es wurde für den Querformat entwickelt. Wenn ich es in Porträt ändere, können Sie sehen, dass alles disorganisiert wird. Wir müssen unsere Seite ansprechen. Um dies zu tun, wählen wir zuerst diese Texte aus. Wie Sie im Inspektor sehen können, haben Sie etwas namens Constraints. Wir werden das benutzen. Wie Sie sehen können, sind die Abhängigkeiten auf oben und links festgelegt. Aber wir werden es ändern, weil wir diese Texte in der Mitte unseres Bildschirms halten müssen . Ich werde es in die Mitte ändern. Lassen Sie uns das nach oben halten, denn wir müssen diesen Abstand nach oben gleich halten. Nun, wenn ich meinen Rahmen auswähle und ihn in den Portraitmodus ändere, können wir sehen, dass er automatisch seine Position ändert, und jetzt ist alles großartig. Das nächste, was wir tun müssen, ist die Einschränkung für unsere Menüs festzulegen. Gehen wir zurück zum Landschaftsmodus, und jetzt werde ich die Menüs auswählen. Wie Sie sehen können, sind die Abhängigkeiten auf links und oben festgelegt, sie müssen jedoch auf die Mitte und die Oberseite festgelegt werden. Ich werde es in die Mitte wechseln. Wenn ich nun meinen Rahmen in den Portraitmodus ändere, können Sie sehen, dass er sich wie folgt ändert. Es ist ziemlich cool, nicht wahr? Was ist jedoch, wenn ich meinen Bildschirm so noch größer mache? Sie können sehen, dass mein Hintergrund nicht reagiert. Jetzt pausieren Sie das Video und versuchen Sie, dieses Problem selbst zu beheben. Dann zeige ich Ihnen, wie Sie das tun können. Leute, ich bin sicher, dass ihr das alleine reparieren könntet. Aber jetzt werde ich es Ihnen auch zeigen, falls Sie Schwierigkeiten hatten, das zu tun. Um Ihren Hintergrund auch reaktionsschnell zu machen, wählen wir zuerst dieses Rechteck, das unser Hintergrund ist. Wie Sie sehen können, werden die Abhängigkeiten auf die linken und oberen Kanten festgelegt. Das Einzige, was wir ändern müssen, ist das hier. Wenn wir es nach links und rechts ändern können, wäre alles großartig. Jetzt versuchen wir es mal. Jetzt werde ich meinen Rahmen noch größer machen. Wie Sie sehen können, haben wir einen dehnbaren Hintergrund wie diesen. Das war einfach. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 34. Auto-Layout: Hallo an alle. Ich hoffe, es geht Ihnen gut. In diesem Video werden wir über die neueste Funktion von Figma sprechen, die Auto Layout genannt wird. Die Auto-Layout-Funktion wurde kürzlich zu Figma hinzugefügt, und es ist eine super leistungsfähige Funktion und ich werde Ihnen zeigen, wie Sie das nutzen können um Ihren Designprozess zu beschleunigen und Ihr Leben viel einfacher zu machen. Ohne weitere Umschweife, lasst uns anfangen. Zuallererst werde ich voran gehen und eine Schaltfläche erstellen. Um das zu tun, brauche ich ein Rechteck. Lasst uns eins erschaffen. Da gehen wir. Ich werde die Breite auf 300 und die Höhe auf 70. Schön. Dann erhöhen wir den Eckenradius auf 16. Wie Sie jetzt sehen können, erscheinen diese kleinen Kreise hier nicht, weil ich weit weg von dieser Schaltfläche bin. Wenn ich jedoch ein wenig zoomen würde, würden diese Kreise erscheinen. Ändern wir nun die Farbe in hellviolett, so. Schön. Dann brauchen wir natürlich einen Text. Ich werde Login schreiben und lassen Sie uns die Farbe auf Weiß ändern und ich werde die Schriftgröße auf 24 erhöhen. Wählen wir beide Ebenen aus und richten sie sowohl horizontal als auch vertikal aus. Ziemlich gut. Ich werde es etwas kleiner machen. Jetzt ist es besser. Lassen Sie uns sie gruppieren und nennen es Login. Jetzt ist alles in Ordnung. Angenommen, Sie erstellen diese Schaltfläche, Sie entscheiden sich, diese zu duplizieren und den Text in etwas anderes zu ändern. Zum Beispiel möchten Sie es in „Erste Schritte“ ändern. Kannst du sehen, was das Problem hier ist? Unsere Tasten reagieren nicht, und zuvor mussten wir unsere Tasten separat so anpassen. Wir mussten sie manuell ändern, und wieder mussten wir sie so ausrichten. Jetzt wird jedoch mit Hilfe von Auto Layout alles in einer Sekunde erledigt. Lassen Sie mich Ihnen zeigen, wie Sie das tun können. Zunächst einmal werde ich diese Login-Schaltfläche noch einmal duplizieren. Da gehen wir. Wie Sie im Inspektor sehen können, wurde ein neuer Abschnitt hinzugefügt, der Auto Layout genannt wird. Sie können entweder auf diesen Plus-Button klicken, um Auto Layout zu Ihrer Schaltfläche hinzuzufügen, oder Sie könnten Shift und A halten, und das ist alles. Alternativ können Sie mit der rechten Maustaste hier klicken und Automatisches Layout hinzufügen wählen. Alle werden gleich funktionieren. Wie Sie sehen können, hat sich hier nichts geändert. Aber wenn Sie versuchen, diesen Text zum Beispiel in „ Erste Schritte“ zu ändern , können Sie sehen, was ist der Unterschied hier? Jetzt ist unser Button ansprechbar. Das ist super cool, und Sie können auch die horizontale Polsterung, die vertikale Polsterung und einen Abstand zwischen den Elementen anpassen . Da wir jedoch nur ein Element hier haben, können wir den Abschnitt nicht verwenden. Sie können den Modus von horizontal zu vertikal ändern, aber Sie können den Unterschied hier nicht sehen. Wenn Sie jedoch versuchen, eine Liste zu erstellen, können Sie vertikal verwenden. Wir haben auch verschiedene Möglichkeiten für die Höhe. Wie Sie hier sehen können, haben wir automatische Höhe. Wenn ich versuche, einige Zeilen wie diese hinzuzufügen, wird die Höhengröße automatisch zunehmen, aber wenn ich versuche, sie in eine feste Höhe zu ändern und dann einige Zeilen hinzufüge, können Sie sehen, dass es nicht mehr reagiert. Sie können die Optionen, die Sie haben, ganz einfach anpassen. Hier ist dies die horizontale Polsterung. Sie können es einfach so ändern. Wenn Sie mit CSS vertraut sind, funktioniert es genau dasselbe, und auch die vertikale Polsterung, das ist ziemlich genial. Jetzt versuchen wir etwas anderes. Lassen Sie uns ein weiteres Rechteck hier erstellen und ich werde es auf 450 x 80 setzen. Schön. Erhöhen wir den Eckenradius auf 24 und ändern Sie die Farbe in dieses hellviolette. Nehmen wir an, dass dies unsere Tab-Leiste ist, und wir werden einige Symbole oder einfach nur Formen hinzufügen. Ich werde ein Rechteck wie dieses erstellen, und es wird 45 mal 45 sein. Lassen Sie uns seine Farbe in Weiß ändern. Ich werde ein wenig vergrößern und dann werde ich eine andere Form erstellen, wie einen Kreis und ich werde es auch auf 45 x 45 setzen. Lassen Sie uns die Farbe in Weiß ändern. Schließlich werde ich das Quadrat duplizieren und den Eckenradius so erhöhen, und ich werde es um 45 Grad drehen. Dann wählen wir alle unsere Formen aus und klicken Sie auf horizontalen Abstand verteilen, um den gleichen Abstand zwischen unseren Formen zu erhalten. Ich werde es auf 91 setzen. Dann lasst uns sie gruppieren und unsere Tab-Leiste auswählen und sie horizontal und vertikal an der Mitte ausrichten . Sie müssen sich jedoch daran erinnern, da wir diese Formen reaktionsschnell machen werden, müssen wir die Gruppierung nach der Ausrichtung aufheben. Ich werde mit der rechten Maustaste hier klicken, Gruppierung aufheben und die Tab-Leiste auswählen , die unser Hintergrund hier ist, und wieder gruppieren und ich werde es Tab-Leiste nennen. Dann drücken wir Umschalttaste A, um Auto Layout zu dieser Gruppe hinzuzufügen, und alles ist erledigt. Wie können wir es überprüfen? Der einfachste Weg ist zu versuchen, eine dieser Formen zu entfernen. Ich werde den Kreis entfernen, und da gehen wir, unsere Tab-Leiste reagiert jetzt. Sie könnten sogar weitere Objekte hinzufügen und die Größe würde sich automatisch ändern. Ich werde es duplizieren, und wie Sie sehen können, funktioniert es perfekt. Das ist ziemlich genial. Sie könnten auch ihren Platz leicht so ändern. Das ist fantastisch. Jetzt werden wir eine komplexere Auftragslayout-Gruppe erstellen. Was denkst du, wenn wir eine ansprechende Karte erstellen könnten, wäre das schön. Lassen Sie uns voran und erstellen Sie ein neues Rechteck hier und ich werde den Radius auf 40 erhöhen. Ändern wir die Dimensionen auf 300 mal 400. Schön. Ich werde die Farbe in Weiß ändern und fügen wir einen Strich hinzu mit dem gleichen hellvioletten wie wir hier haben. Dann werde ich ein paar Details hinzufügen. Angenommen, wir werden ein Profilbild haben, wir brauchen hier einen Kreis. Setzen wir es auf 70 mal 70 und ich werde die Farbe zu diesem lila ändern. Ziemlich gut. Wie Sie sehen können, ist die obere Polsterung auf 30 eingestellt. Lassen Sie uns auch die linke Polsterung auf 30 setzen. Dann werde ich ein paar Texte hinzufügen. Ich muss einen Namen haben. Lass es uns kleiner machen. Ich denke, 18 Punkte wären schön. Ich werde die Farbe auch in dieses Lila ändern. Duplizieren Sie das, und hier werde ich Nachnamen schreiben, ziemlich gut, und die linke Polsterung wird 16 Pixel wie folgt sein. Dann werde ich einen weiteren Text hinzufügen, der die Beschreibung ist, zum Beispiel, das ist richtig, Hallo alle. In diesem Video sprechen wir über Auto Layout in Figma. Ich denke, es ist besser, es zu einer Textebene mit fester Größe wie diese zu machen. Ich werde die automatische Höhe auf 24 ändern. Ziemlich genial. Lassen Sie uns diese Karte für den Moment ein wenig kleiner machen, die obere Polsterung wird 30 sein, also müssen wir 30 nach oben für diesen Text und 30 nach unten haben. Wie Sie sehen können, habe ich 27 und ich muss drei weitere hinzufügen, damit ich in die Höhe gehen kann, und hier werde ich plus drei schreiben. Da gehen wir. Lass es uns ein bisschen größer machen. Fantastisch. Nun, wie können wir diese Karte reaktionsschnell machen? Wir müssen hier eine andere Technik verwenden, denn wenn wir sie nur gruppieren, lassen Sie mich Ihnen zeigen und Shift und A drücken, wird es nicht funktionieren und alles wird unorganisiert. Wir müssen einen anderen Weg benutzen. In diesem Fall müssen wir zwei verschiedene Gruppen mit Auto Layout haben. Zuerst müssen wir ein horizontales automatisches Layout für diesen Profilbildplatzhalter und diese beiden Tags erstellen . Ich wähle sie aus und gruppiere sie. Nennen wir es User, und jetzt, wie Sie sehen können, haben wir hier zwei Objekte, die vertikal platziert sind. Wenn ich mein Rechteck und auch diesen Benutzer und diesen Text auswähle und gruppiere sie und nenne es Karte, jetzt kann ich Auto Layout perfekt hinzufügen, also werde ich Shift drücken und A Wie Sie sehen können, habe ich gerade ein vertikales Auto erstellt -Layout. Aber wir müssen auch ein horizontales Auto-Layout für unseren Benutzer erstellen. Nun müssen wir auch diesen Vor- und Nachnamen gruppieren, um auch für diese beiden Objekte ein horizontales automatisches Layout zu verwenden. Jetzt wähle ich die Benutzergruppe aus und drücke Shift und A, und wie Sie sehen können, haben wir gerade ein horizontales automatisches Layout erstellt. Dann wähle ich meine Hauptkarte aus und drücke erneut Shift und A, und wie Sie sehen können, habe ich gerade ein vertikales automatisches Layout erstellt. Ich werde es öffnen und ich werde die Ausrichtung des Benutzers nach links einstellen und alles ist erledigt. Versuchen wir es mal. Ich werde diesen Text ein wenig erweitern, um zu sehen, was passieren wird. Mal sehen, ob es funktioniert oder nicht und ja, wie Sie sehen können, funktioniert es perfekt. Lassen Sie uns schreiben, ja, es funktioniert perfekt. Das ist ziemlich cool. Wenn Sie nur versuchen, einige Linien hinzuzufügen, können Sie sehen, dass die Höhe automatisch erhöht wird. Aber was ist mit dieser Auto-Layout-Gruppe? Wenn ich versuche, den Namen in etwas anderes zu ändern, wie Mike und den Nachnamen zu White. Wie Sie sehen können, passiert nichts, weil es nicht so lang ist, also werde ich hier einige zufällige Zeichen hinzufügen. Wie Sie sehen können, funktioniert es. Mein Beschreibungstext bewegt sich jedoch weiter. Ich muss das Problem beheben. Um das zu beheben, werde ich es auswählen und wie Sie sehen können, wurde es an der Mitte ausgerichtet. Ich werde es nach links ausrichten, und jetzt ist alles großartig. Versuchen wir etwas hier. Ich werde es kopieren und einfügen. Da gehen wir. Es funktioniert einwandfrei. Na gut, Leute. Vielen Dank, dass Sie sich dieses Video ansehen. Ich habe es Ihnen genossen und ich werde Sie im nächsten Video sehen. 35. Bilder: Hallo, alle, und willkommen zurück zu einem anderen Video von diesem Kurs. In diesem Video werden wir über Bilder sprechen. Als UI-UX-Designer arbeiten Sie ständig mit Bildern. Es ist so wichtig zu wissen, wie Sie einzigartige Funktionen nutzen können, Figma, um Ihre Bilder richtig zu verwenden. Ohne weitere Umschweife, lasst uns loslegen. Wie Sie sehen können, habe ich hier ein einfaches Projekt mit nur fünf Kreisen und drei Quadraten erstellt . Wir werden Bilder zu diesen Kreisen und auch diesen Karten hinzufügen. Es gibt viele Möglichkeiten, das zu tun. Die erste besteht darin, Ihre Bilder einfach per Drag & Drop abzulegen und dann verwenden Sie die Option Maske, die wir in den zukünftigen Lektionen behandeln werden. Es gibt jedoch bessere Möglichkeiten, dies zu tun. Sie zunächst sicher, dass Sie die Assets-Datei herunterladen, die ich bereits für Sie vorbereitet habe, und es besteht aus einigen Bildern für diese Karten und einigen Bildern für diese Kreise. Der erste Weg ist, zu Shapes zu gehen, und hier haben wir Platz Bild. Wenn Sie die Assets-Datei heruntergeladen haben, können Sie sehen, dass Sie zwei verschiedene Ordner haben: Profil und Karten. Im Ordner „Profil“ können Sie fünf verschiedene Bilder sehen. Ich werde alle von ihnen auswählen und klicken Sie auf „Öffnen“, ziemlich gut. Ganz oben stehen Ihnen zwei Optionen zur Verfügung : Alles platzieren, Alle verwerfen. Wenn Sie auf „Alle platzieren“ klicken, werden alle Ihre Bilder auf einmal platziert, wie folgt. Wie Sie sehen können, haben Sie alle Ihre Bilder. Wieder müssen Sie voran gehen und Masken verwenden, um es auf diese Kreise zu legen. Noch einmal, ich werde diese Bilder öffnen. Wenn Sie hier auf „Alle verwerfen“ klicken, passiert nichts, Sie müssen noch einmal auswählen. Wie Sie sehen können, gibt es in der oberen linken Ecke Ihrer Bilder ein rotes Abzeichen, das die Anzahl der Bilder angibt, die Sie übrig haben, zum Beispiel, hier haben wir fünf. Wenn ich hier klicke, können Sie sehen, dass mein erstes Bild in die Leinwand eingefügt wird, und jetzt habe ich vier. Ich kann voran gehen und sie alle einfügen. Lassen Sie mich sie noch einmal auswählen. In der vorherigen Weise könnten Sie Ihre Bilder mit ihren eigenen Dimensionen platzieren. Wenn Sie jedoch die Dimension ändern möchten, können Sie einfach Drag & Drop wie folgt, da gehen wir. Sie können die Bemaßung wie gewünscht festlegen. Das letzte Mal werden wir diese Bilder in unseren Kreisen platzieren, und das ist so einfach. Wenn Sie mit der Maus auf diese Kreise bewegen und klicken, können Sie sehen, dass es so einfach ist, Ihr Bild in diese Kreise einzufügen und das ist alles. Die nächste Möglichkeit, ein Bild in Figma einzufügen, besteht darin, den Füllbereich zu verwenden. Ich werde Befehlstaste halten und ich werde diese Karte auswählen und hier in füllen, wenn ich dieses Drop-Menü öffne, können Sie sehen, dass Sie Bild-Option haben und Sie können Ihr Bild wie folgt wählen. Sie können hier auch die Belichtung Ihres Bildes, den Kontrast, die Sättigung, die Temperatur, die thematischen Glanzlichter und Schatten ändern die Sättigung, die Temperatur, die thematischen Glanzlichter . Sie können es sogar drehen, wenn Sie möchten. Jetzt werden wir Bilder zu unseren Karten hinzufügen. Gehen wir voran und wählen Bild platzieren. Hier werde ich Karten öffnen, und wie Sie sehen können, gibt es drei verschiedene Bilder hier, ich werde alle auswählen, klicken Sie auf „Öffnen“. Du musst dich an etwas erinnern. Wenn Ihr Bild so groß ist, wird Figma die Größe automatisch ändern, bevor Sie es in Figma einfügen können. Daher müssen Sie sich dieses Problem auch bewusst sein, wie dies und das ist erledigt. Haben Sie gesehen, wie einfach es ist, Bilder in Figma zu verwenden? Du könntest diese Karten auch einfach so bearbeiten, da gehen wir. Alles ist reaktionsschnell, das ist ziemlich cool, nicht wahr? Die gute Nachricht ist, dass Sie im Gegensatz zu anderen Software und Plattformen in Figma auch eine GIF-Datei einfügen können. Versuchen wir es mal. Wenn ich nun eine Vorschau dieser Zeichenfläche durch Klicken auf diese Schaltfläche „Play“ anzeigen, können Sie sehen, dass diese Bilder statisch sind. Was passiert, wenn ich einer dieser Karten eine GIF-Datei hinzufüge? Zum Beispiel, dieses hier, werde ich voran gehen und ein Bild aus GIF-Ordner platzieren, da gehen wir. Nun, wie Sie sehen können, ist es wie andere normale Bilder, aber wenn ich versuche, das in der Vorschau zu sehen, können Sie sehen, dass es sich tatsächlich von anderen Bildern unterscheidet, weil es eine GIF-Datei ist und es in Figma spielt, was ziemlich genial ist. Alles klar, Leute. Vielen Dank, dass Sie sich dieses Video ansehen. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 36. Styling: Füllung: Hallo an alle. Ich hoffe, es geht Ihnen gut. In diesem Video werden wir über den Feldbereich sprechen. Lassen Sie uns ohne weiteres damit beginnen, hier eine neue Form einzufügen. Ich werde ein Rechteck erstellen. Lassen Sie uns den Eckenradius so erhöhen, und auf der rechten Seite, im Inspektorbereich, können Sie den Feldabschnitt sehen. Hier können Sie Ihre gewünschte Farbe für Ihr Objekt oder sogar Ihre Textebene auswählen, wie diese. Zum Beispiel wählen wir jetzt Rot. Diese rote Farbe hat einen Wert, die Helligkeit jeder Farbe wird ihr Wert genannt. Wie Sie sehen können, wenn wir weiß zu dieser Farbe hinzufügen, wird es heller und wenn wir schwarz zu dieser Farbe hinzufügen, wird es dunkler und dunkler. Sie können auch die Pipette verwenden, um Ihre Farbe so zu wählen, und Sie können auch Ihre Farbe mit dem Hex-Code hier wählen. Sie können es auf RGB, CSS, HSL und HSB einstellen. Aber die meiste Zeit verwenden wir Hex-Code. Manchmal müssen wir die Deckkraft jeder Farbe ändern, in diesem Fall könnten Sie den Schieberegler so verwenden, und wie Sie jetzt sehen können, wird es transparent, oder Sie könnten diesen Prozentsatz hier verwenden, wie 20 Prozent, ziemlich gut. Unten sehen Sie die Farben Ihrer Dokumente. Wie Sie sehen können, haben wir keine Dokumentfarben, da wir noch keine erstellt haben. In den zukünftigen Lektionen werden wir jedoch darüber sprechen. Rechts oben links konnte man ein Drop-Menü sehen. Wenn ich es öffne, können Sie sehen, dass Sie viele Möglichkeiten haben. Die erste ist durchgefärbt, und wie Sie sehen können, konnten Sie nur eine Einzel- und Basisfarbe wählen. Wenn Sie einen Farbverlauf verwenden möchten, können Sie so linear wählen. Zum Beispiel kann ich hier die zweite Farbe wählen. Es ist jedoch auf transparent eingestellt, ich kann die Deckkraft auf 100 Prozent erhöhen, und mit diesen Controllern können Sie die Richtung Ihres Farbverlaufs so ändern. Sie könnten sogar mehr Farben zu Ihren Farbverläufen hinzufügen. Wenn Sie hier klicken, so kann ich diese Farbe auch wählen, ziemlich genial. Die andere Option, die Sie haben, ist radialer Farbverlauf. Sie haben auch eckig wie diese. Dann haben wir einen Diamanten wie diesen, und ein Bild, über das ich bereits gesprochen habe. Die beiden wichtigsten Optionen sind jedoch solide und lineare. Sie können hier auch die Deckkraft Ihrer Farbe oder des Farbverlaufs ändern, wie folgt. Sie können es ausblenden, wenn Sie es möchten, oder entfernen. Hier können Sie Ihren Farbmodus von Normal auf Farbsättigung, Farbton, Differenz ändern. Wir werden später über diese Optionen sprechen. Wenn Sie jedoch sehen wollen, was passieren wird, wenn wir es ändern, brauchen wir ein anderes Objekt. Ich werde ein neues Rechteck wie dieses erstellen, und lassen Sie uns seine Farbe auf so etwas wie dieses Blau setzen, und ich werde den Farbmodus in Farbe ändern, wie folgt. Hier können Sie den Unterschied sehen. Ich kann es so überlagern, wie dies, Bildschirm usw. Alles klar, Leute, das ist alles für dieses Video. Vielen Dank, dass du es dir angesehen hast. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 37. Stift: Hi, alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über den Schlaganfallbereich sprechen. Lassen Sie mich zunächst eine neue Form erstellen. Dieses Mal werde ich einen Kreis wie diesen wählen, und direkt unter dem Füllbereich, über den wir im vorherigen Video gesprochen haben, haben wir den Strichbereich. Ich werde auf diesen Plus-Button klicken, um den Strich zu meiner Form hinzuzufügen. Hier haben wir verschiedene Eigenschaften wie Farbe. Auch hier haben Sie all diese Möglichkeiten. Wie in der Füllung haben Sie die Dicke Ihres Strichs, die Sie hier ändern können, und Sie haben auch hier die Positionierungseigenschaft, dass Sie sie von innen nach Mitte und nach außen ändern können . Grundsätzlich bedeutet dies, dass dieser Strich auf die Außenseite Ihrer Form angewendet wird. Dies bedeutet, dass dieser Strich auf die Innenseite Ihrer Form angewendet wird. Hier haben Sie die erweiterte Option, und wir haben bereits darüber gesprochen. Sie haben Runde, Quadrat, Linienpfeil und Dreieckpfeil. Es funktioniert hier jedoch nicht, weil wir eine Zeile oder einen Pfad haben müssen , um diese Optionen zu verwenden. Du könntest es auch zum Strich bringen. Zum Beispiel kann ich zwei Komma fünf so schreiben, oder sagen wir 10. Ich kann es hier leicht ändern, 40. Das ist ziemlich cool. Natürlich können Sie es verstecken oder entfernen. Alles klar, Leute, vielen Dank, dass ihr dieses Video gesehen habt, und ich werde euch im nächsten Video sehen. 38. Styling: Effekte: Hallo an alle und willkommen zurück zu einem anderen Video der Partituren. In diesem Video werden wir über den Effektbereich sprechen. In der Tat verwenden wir den Effektebereich so oft, wenn wir eine Benutzeroberfläche entwerfen, zum Beispiel gibt es Zeiten, in denen Sie einige Schatten zu Ihrem Objekt oder sogar zu Ihrem Text hinzufügen möchten, oder Sie möchten wahrscheinlich eine Unschärfe hinzufügen Effekt auf Ihr Objekt oder auf Ihren Hintergrund. In diesen Fällen können wir den Effektebereich verwenden. Ohne weitere Umschweife, lasst uns loslegen. Wie Sie hier sehen können, habe ich ein einfaches Quadrat erstellt und ich ändere seine Farbe in diesen Hex-Farbcode 0038FF. Nun, ich werde ein paar Schlagschatten hinzufügen. Gehen wir zum Abschnitt Effect, und ich werde auf diesen Plus-Button klicken, und hier haben Sie ein Dropmenü. Sie haben inneren Schatten, und wie Sie sehen können, wird diese Option einige Schatten innerhalb Ihres Objekts hinzufügen. Wenn Sie Ihren Schatten ändern möchten, können Sie auf dieses Sonnensymbol klicken, und hier haben Sie die erweiterten Optionen. Sie haben die Unschärfe-Menge. Jetzt ist es auf vier gesetzt. Ich werde es auf 100 ändern, und wie Sie sehen können, gelten Änderungen sofort. Sie können auch die X-Achse ändern. Setzen wir es auf 20, und das hier auf 10. Natürlich können Sie die Änderungen hier nicht sehen, weil sie sich tatsächlich in unserem Objekt befindet. Wir werden diese Optionen jedoch auch für Schlagschatten ausprobieren. Die nächste Option, die Sie haben, ist die Farbe Ihres Schattens. Sie können es einfach in eine beliebige Farbe ändern, und die Deckkraft ist standardmäßig auf 25 Prozent festgelegt. Wenn Sie es ändern möchten, können Sie es natürlich erhöhen oder verringern Sie es so. Sie haben auch die Modusmenüs hier. Ziemlich genial. Lassen Sie uns die Art des Schattens in Schlagschatten ändern. Die meiste Zeit verwenden wir Schlagschatten, wenn wir eine Benutzeroberfläche entwerfen. Nun, gehen wir und ändern diese Farbe in Schwarz, und ich setze sie auf 25 Prozent. Ziemlich genial. Dann ändern wir die Unschärfe auf 40 und das x auf Null und das y auf 20. Wenn Sie einen sehr guten Schlagschatten bekommen wollen, können Sie Ihre Zahlen wie ich berechnen. Wenn Sie zum Beispiel die Unschärfe auf 40 setzen, können Sie sie durch zwei teilen und diese Zahl als y-Betrag wie hier festlegen. Dann werde ich die Deckkraft auf 20 Prozent so ändern. Ziemlich nett, nicht wahr? Wie Sie sehen können, sieht es ziemlich gut aus, aber ich werde Ihnen etwas vorschlagen. Um Ihren Schatten realistischer zu gestalten, empfiehlt es sich, die gleiche Farbe für Ihren Schatten wie die Farbe Ihrer Objektezu wählen Ihren Schatten wie die Farbe Ihrer Objekte und dann die Deckkraft auf etwa 15 Prozent oder sogar auf 10 Prozent zu verringern . Es liegt ganz an Ihnen, aber es macht mehr Sinn, weil tatsächlich bunte Objekte keine schwarzen Schatten haben. Wenn ich dieses Quadrat dupliziere und diese Farbe zum Beispiel in so etwas ändere , kann ich den Schatten in die gleiche Farbe ändern und ihn so auf 10 Prozent oder 15 Prozent verringern . Kannst du hier den kleinen Unterschied sehen? Es macht es realistischer. Nun gehen wir weiter und sprechen auch über andere Optionen. Wie Sie hier sehen können, haben Sie Ebenenunschärfe und Hintergrundunschärfe. Wenn ich Ebenenunschärfe wähle, wie Sie sehen können, verwischt es meine ausgewählte Ebene, und ich kann den Betrag hier so ändern. Ziemlich genial. Ich werde es auf 10 setzen und Sie haben auch die Hintergrundunschärfe. Aber wie Sie sehen können, wenn ich das wähle, passiert nichts, weil ich nichts hinter dieser Form habe. Wenn ich den Effekt der Hintergrundebene sehen möchte, muss ich etwas dahinter haben. Lasst uns voran gehen und dieses Quadrat wählen, und ich werde ein Bild darin platzieren. Lasst uns das hier wählen. Ziemlich gut. Dann werde ich dieses Quadrat so oben auf mein Bild setzen. Hier, wie Sie sehen können, ist die Hintergrundunschärfe ausgewählt, aber Sie können nichts sehen. Wenn Sie die Hintergrundunschärfe verwenden, müssen Sie die Deckkraft Ihres Feldes verringern, um die Änderungen zu sehen, nicht die Deckkraft des Layers. Wenn ich es auf 50 ändere, können wir sehen, dass nichts passiert, aber wenn ich die Deckkraft meiner Farbe auf 50 Prozent ändere, können Sie den Effekt sehen. Jetzt werde ich die Farbe auch zu etwas anderes wie diesem ändern und lassen Sie es auf 30 Prozent reduzieren. Ich werde die Unschärfemenge auf 20 Prozent ändern. Das ist fantastisch. Lassen Sie mich diese Ebene entfernen und fügen Sie hier einen Kreis wie diesen hinzu, machen Sie ihn schwarz und fügen Sie dann Hintergrundunschärfe hinzu, und lassen Sie uns die Deckkraft auf 30 Prozent verringern. Ich werde den Unschärfebetrag auf 50 setzen, und jetzt können Sie den Effekt deutlich sehen. Sie können auch Effekte zu den Textebenen hinzufügen. Wenn ich hier eine Textebene erstelle, schreiben wir, hallo, Sie können sehen, dass ich einen Schlagschatten, den inneren Schatten, die Ebenenunschärfe und auch die Hintergrundunschärfe hinzufügen kann den inneren Schatten, die Ebenenunschärfe . Na gut, Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 39. Farbstil: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über die Farben Stile sprechen. Genau wie Textil können Sie Ihren eigenen Farbstil kreieren. Lassen Sie uns zunächst ein Rechteck hier erstellen und ich werde den Eckenradius auf 40 erhöhen, so. Dann lassen Sie uns die einfarbige Farbe auf so etwas wie dieses Blau setzen, ziemlich schön, und ich werde es duplizieren. Dann ändern wir die Deckkraft auf 75 Prozent. Noch einmal, duplizieren Sie es. Dieses Mal werde ich es auf 50 Prozent ändern und wieder werde ich es duplizieren und jetzt ändern wir es auf 25 Prozent. Ich habe gerade vier verschiedene Farben mit der gleichen Grundfarbe erstellt, jedoch mit vier verschiedenen Werten. Wie Sie sehen können, wird es leichter und leichter. Ich werde sie auswählen, duplizieren und hier werde ich auch eine andere Farbe wählen, ich denke, diese ist großartig. Lassen Sie uns diesen Hex-Farbcode für die anderen kopieren und einfügen, wie folgt. Aber wie können Sie Ihren eigenen Farbstil erstellen? Es ist so einfach. Genau wie Textilien müssen Sie zuerst Ihr Objekt oder Ihre Ebene auswählen und dann hier können Sie auf diese vier Punkte klicken und hier können Sie auf dieses Plus-Symbol klicken, das Ihren Farbstil erstellt. Ich werde primär schreiben/lila, weil es wie eine violette Farbe aussieht. Ich werde primär schreiben/lila, und klicken Sie auf Stil erstellen. Ziemlich gut. Dann wähle ich das aus. Lassen Sie uns das gleiche tun, und dieses Mal schreiben wir sekundär/rosa. Für diesen hier kann ich sagen, primäre lila 75 Prozent, wie diese, und diese, primäre lila 50 Prozent und so weiter. Wie Sie hier sehen können, haben wir verschiedene Farben Stile. Sie haben primäre lila, Sie haben sekundäre rosa, primäre lila 75 Prozent, und so weiter. Wie können Sie diese Farbstile auf Ihre Formen oder Ihre Objekte anwenden? Es ist so einfach. Lassen Sie uns zunächst eine neue Form erstellen. Lassen Sie uns hier einen Kreis wie diesen erstellen. Um Ihren Farbstil anzuwenden, können Sie auf diese vier Punkte klicken, und hier können Sie Zugriff auf Ihre Farbstile erhalten. Hier haben wir primär, hier haben wir sekundäre. Wir haben vier verschiedene Primärfarben erstellt, und nur eine sekundäre. Wir werden in diesem Kurs in einem eigenen Abschnitt in der Erstellung Ihres eigenen Designsystems eintauchen. Jetzt kann ich das primäre Purple wählen und das ist alles. Ich kann es duplizieren. Hier kann ich es in sekundäres Rosa ändern, oder wenn Sie einige Eigenschaften dieser Form ändern möchten, können Sie es von seinem Stil lösen, indem Sie auf dieses Symbol so klicken, und Sie können die Farbe frei ändern. Genau wie Farbstile können wir auch Stile für Effekte oder für einen Strich erstellen. Wenn Sie auf diese vier Punkte klicken, können Sie einen Effektstil oder einen Strichstil erstellen. Was sind die Vorteile der Verwendung von Farbstilen in Ihren Projekten? Genau wie Textilien, wird das Erstellen Ihrer Farben Stile Ihnen so viel Zeit sparen. Denn wenn Sie sich entscheiden, diese Primärfarbe später zu ändern, können Sie leicht zu diesem Farbstil wechseln, und dann können Sie ihn ändern, indem Sie auf dieses Symbol „Stil bearbeiten“ direkt hier klicken und die Änderungen werden sofort angewendet. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen, und ich werde dich im nächsten Video sehen. 40. Masken: Hallo an alle und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir über Masken sprechen. Eigentlich können Sie Masken einen bestimmten Teil eines Bildes oder eines Objekts anzeigen. Wann immer Sie einen bestimmten Abschnitt eines Bildes verwenden möchten, können Sie ganz einfach Masken verwenden. Oder wenn Sie nur einen Teil eines Objekts präsentieren möchten, können Sie dafür immer noch Masken verwenden. Wie können Sie Masken verwenden? Wie Sie hier sehen können, habe ich ein Quadrat erstellt und habe ein Bild aus unserer Asset-Datei platziert. Wenn ich Masken verwenden möchte, muss ich zuerst diese Ebene auswählen und dann kann ich auf Masken-Symbol rechts oben klicken, wie folgt. Nachdem Sie auf dieses Symbol geklickt haben, werden Ihre Ebenen verschwunden. Jetzt kann ich mein Bild aus der Liste der Ebene auswählen und dann werde ich es auf die linke Seite verschieben. Wie Sie jetzt sehen können, wurde es abgeschnitten. Sie müssen bedenken, dass Masken auf alle darüber liegenden Ebenen angewendet werden. Hier, wenn ich diese Bildebene an den unteren Rand meiner Maske schiebe, können Sie sehen, dass nichts passiert. Die andere Möglichkeit, eine Maske auf Ihre Ebene anzuwenden, besteht darin, beide Ebenen auszuwählen. Zuerst werde ich dieses Bild auf mein Rechteck oder ein Quadrat setzen. Dann werde ich beide auswählen und dann auf Maske wie diese klicken. Die andere wichtige Sache, die Sie beachten müssen, ist, dass Sie, wenn Sie einen Farbverlauf oder einen Effekt für Ihr Rechteck verwenden und Masken verwenden möchten, Ihre Form duplizieren müssen, um diese Effekte beizubehalten. Wenn ich hier so etwas Schlagschatten hinzufüge, werde ich es auf 20 und das y auf 10 setzen, und dann werde ich meine Maske erstellen. Nun, wie Sie sehen können, wurde meine Schlagschattenfarbe geändert. Um dieses Problem zu beheben. Bevor ich meine Maske erstelle, kann ich mein Rechteck duplizieren. Ich werde es hier direkt unter meine Maskenebene setzen. Dann kann ich meine Maske ganz einfach erstellen. Nun, wie Sie sehen können, habe ich eine Maskengruppe. Wenn ich dieses Rechteck, das mein Schlagschatten ist, in diese Gruppe einfügen möchte das mein Schlagschatten ist, , muss ich sicherstellen, dass ich es hier direkt unter meine Maskenebene lege. Denn wenn ich es darüber lege, wird diese Maskenebene auch für dieses Rechteck gelten. Alles klar, Jungs, vielen Dank, dass Sie dieses Video gesehen haben. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 41. Komponenten: Hallo an alle und willkommen zurück zu einem anderen Video des Kurses. In diesem Video werden wir über Komponenten sprechen. Grundsätzlich sind Komponenten wiederverwendbare Elemente. Sie können sie einmal erstellen, und Sie können sie mehrfach verwenden. Es ist ziemlich erstaunlich. Sie sind wie Symbole in Sketch. Ohne weitere Umschweife, lasst uns anfangen. Zuallererst werde ich voran gehen und eine Schaltfläche erstellen. Ich brauche ein Rechteck. Ich werde Drag & Drop. Setzen wir die Breite auf 270 und die Höhe auf 70, so. Dann werde ich den Eckenradius auf 20 erhöhen. Ziemlich genial. Ich denke, es ist eine gute Idee, auch die Farbe zu ändern. Ich werde es auf diese Farbe setzen. Der Code lautet 3562FF. Dann brauche ich einen Text. Lasst uns primär schreiben. Ich werde die SF Pro Text-Schriftart und das Gewicht des Mediums wählen, und seine Größe wird 20 Punkte betragen. Dann lassen Sie uns die Farbe in Weiß ändern, um hier einen guten Kontrast zu haben, ich werde meine Elemente auswählen, sie sowohl vertikal als auch horizontal an der Mitte ausrichten . Jetzt lasst uns sie gruppieren, und ich werde es nennen Schaltfläche Schrägstrich primär. Und ich denke, es ist eine gute Idee, Auto-Layout zu dieser Schaltfläche hinzuzufügen. Ich werde Shift und a drücken, und wie Sie sehen können, wurde das automatische Layout zu dieser Schaltfläche hinzugefügt. Das nächste, was wir tun müssen, ist, auf dieses Symbol zu klicken, um unsere Komponente zu erstellen. Wenn ich darauf klicke, ist es fertig. Ich habe gerade meine erste Komponente erstellt. Wir können auch eine Beschreibung zu Ihrer Komponente hier hinzufügen, damit ich schreiben kann, es ist die primäre Schaltfläche wie folgt. Nun, wie können Sie diese Schaltfläche wiederverwenden? Es ist so einfach. Erinnern Sie sich, dass wir im Layer-Bereich den Asset-Abschnitt hatten? Wenn Sie es nun öffnen, können Sie sehen, dass wir in lokalen Komponenten unsere erstellten Komponenten hier haben. Wenn ich das verwenden möchte, kann ich es einfach per Drag & Drop ablegen. Wenn ich darüber schwebe, können Sie die Beschreibung sehen, die wir gerade geschrieben haben. Da gehen wir. Da ich das Auto-Layout hinzugefügt habe, kann ich diese Texte leicht ändern. Zum Beispiel, lasst uns schreiben, loslegen. Seine Größe wird sich dynamisch ändern. Ziemlich genial. Aber was, wenn Sie einige Eigenschaften dieser Instanz ändern möchten. Eigentlich ist diese Schaltfläche ein Weihrauch dieses Master-Button. Wir nennen diese Schaltfläche die Master-Komponente, und diese Schaltfläche ist eine Instanz dieser Master-Komponente. Wenn Sie einige Eigenschaften davon ändern möchten, zum Beispiel, wenn Sie die Farbe ändern möchten, können Sie leicht Kopf über Abschnitt füllen und Sie können es ändern. Wie Sie sehen können, passiert nichts mit der Massenkomponente. Wenn Sie jedoch versuchen, die Massenkomponente zu ändern, wirkt sich dies auf alle Exemplare aus. Im Abschnitt „Inspektor“ haben Sie den Instanzbereich hier, und hier haben Sie ein Dropmenü. Ich werde Ihnen zeigen, wie Sie das nutzen können. Aber wenn Sie zu der Massenkomponente gehen möchten, können Sie diese Schaltfläche verwenden, wie folgt. Jetzt sind wir in Massenkomponente. Wenn ich hier versuche, die Farbe zu ändern, können Sie sehen, dass sich ihre Instanz sofort ändert. Oder wenn ich hier den Eckenradius vergrößere, können Sie sehen, dass er sofort auf seine Instanzen zutrifft. Ich werde es auf 20 zurücksetzen. Jetzt lassen Sie uns eine weitere Schaltfläche erstellen. Ich werde diese Primarstufe 1 wählen. Ich werde es so duplizieren, und bevor wir hier Änderungen vornehmen, müssen wir es von seiner Instanz lösen. Zuerst müssen wir klicken und lösen Instanz. Nun, wenn ich es ändere, passiert nichts mit der vorherigen Schaltfläche. Ändern wir die Deckkraft auf 75 Prozent. Dieser wird der Hover-Zustand unserer vorherigen Schaltfläche sein. Ich gehe zur Layer-Liste und lassen Sie uns den Namen ändern, um die Schaltfläche zu bewegen und klicken Sie auf „Komponente erstellen“, und das ist fertig. Wenn ich nun diese Schaltfläche „Erste Schritte“ auswähle und ich zu diesem Dropmenü im Instanzbereich gehe , kann ich die Schaltfläche „Gehe zu“. Natürlich haben Sie hier verwandte Komponenten. Da ich jedoch Schrägstrich verwendet habe, wenn ich sie benenne, konnte ich all diese Schaltflächen in diese Gruppen-Schaltfläche einfügen. Jetzt kann ich es von primär zu schweben ändern. Da gehen wir. Es war so einfach. Nun gehen wir weiter und fügen einige Effekte zu dieser Schaltfläche. Ich werde die Master-Komponente auswählen und dann auf diesen Plus-Button im Effekt-Abschnitt klicken, und hier haben wir Schlagschatten. Ich gehe zum erweiterten Abschnitt und wähle hier die gleiche Farbe, und lass uns seine Deckkraft auf 15 Prozent ändern. Sehr gut. Ich werde die Unschärfemenge auf 20 und die y-Menge auf 10. Das x wird Null sein. Es ist ziemlich genial. Lassen Sie uns auch hier eine weitere Schaltfläche erstellen. Ich werde es duplizieren. Dann werde ich es von seiner Master-Komponente lösen. Dann hat sich die Deckkraft auf 25 Prozent geändert. Ich werde diesen Schlagschatten entfernen, weil es unser behinderter Zustand sein wird. Jetzt werde ich es in Button/Disable umbenennen. Ziemlich schön und klicken Sie auf „Create Component“. Es ist erledigt. Wenn ich nur diese Schaltfläche „Erste Schritte“ auswähle und ich zu diesem Drop-Menü gehe, kann ich einfach dasselbe auswählen. Es war so einfach, nicht wahr? Sie können fast alles zu einer Komponente machen. Zum Beispiel können wir voran gehen und ein Textfeld erstellen. Ich werde die Linie auswählen und ziehen und ablegen. Ziemlich gut. Hier haben wir eine Linie erstellt. Lassen Sie uns die gleiche Farbe wie unsere Schaltfläche wählen. Ziemlich nett. Ich werde die Dicke unserer Linie auf zwei erhöhen. Fantastisch. Lassen Sie uns die Breite auf 350 ändern und wir brauchen einen Text hier, also werde ich Textfeld schreiben. Ziemlich nett. Lassen Sie uns seine Farbe zu diesem ändern. Ich werde die obere Polsterung dieser Zeile auf acht Pixel wie folgt setzen. Lassen Sie uns diesen Text ein wenig nach rechts verschieben. Ziemlich genial. Ich denke, es ist besser, die Deckkraft dieser Texte auf 50 Prozent zu reduzieren. Fantastisch. Jetzt gruppieren wir sie. Ich werde es Textfeld/aktiv nennen, und lassen Sie uns eine Komponente daraus erstellen. Ziemlich gut. Sie jedoch sicher, dass Sie Ihren Text wie folgt nach links ausrichten. Sie könnten auch Auto-Layout hinzufügen, aber für den Zweck dieses Videos werde ich es so lassen, wie es ist. Jetzt duplizieren wir es. Ich werde es von seinem Meister lösen, und dann lasst uns die Farbe in so etwas ändern. Das hier auch, und es wird 50 Prozent sein. Dieser wird der Fehlerzustand sein, also lassen Sie uns seinen Namen in Fehler ändern und ich werde eine Komponente erstellen. Jetzt, wenn ich zu Assets gehe, in lokalen Komponenten, MacBook Pro-1, können Sie sehen, dass ich Textfeld habe, und hier kann ich es leicht verwenden. Lasst uns es in Bergbau ändern. Ziemlich genial. Wenn ich es in den Fehlerzustand ändern möchte, kann ich es hier leicht ändern. Da gehen wir. Sie könnten Ihre Karte als Komponente erstellen, Ihre Schaltflächen, Ihre Textfelder, Ihre Schieberegler, jede einzelne Sache, und sie ist so nützlich und leistungsstark und es wird Ihren Designprozess beschleunigen. Jetzt haben wir unsere Komponenten erstellt und können sie lokal nutzen. Wenn Sie jedoch diese Komponenten mit Ihren Teamkollegen teilen möchten, können Sie leicht zum Asset-Bereich gehen und Sie können auf dieses Symbol Team-Bibliothek klicken. Hier haben Sie die Möglichkeit, Ihre aktuelle Datei für andere Teammitglieder zu veröffentlichen. Dann können sie all diese Komponenten in anderen Projekten und anderen Dateien verwenden, was ziemlich cool ist. Sie daran, dass wir all dieses Wissen in den Futures-Lektionen üben werden, weil wir unsere eigenen realen Projekte auf der Grundlage dieses Wissens erstellen werden. Mach dir keine Sorgen, wenn du nicht jedes einzelne Ding hier verstehst, es ist völlig normal und du wirst es durch Übung lernen. Ich hoffe, Sie haben dieses Video genossen. Vielen Dank, dass Sie es gesehen haben. Ich werde Sie im nächsten Video sehen. 42. Varianten (NEU): Hey, willkommen zurück. In diesem Video werden wir über eine neue coole Funktion sprechen , die vor kurzem zu Figma hinzugefügt wurde, und es heißt Varianten. Was macht diese Funktion? Lassen Sie mich Ihnen ein Beispiel zeigen. Nehmen wir an, wir haben einen Knopf, also werde ich voran gehen und schnell eine Schaltfläche erstellen. Lassen Sie mich das Rechteck auswählen und klicken und ziehen, um dieses Rechteck zu erstellen. Ich werde die Höhe auf 44 Pixel und die Breite auf 100 so ändern. Lassen Sie mich hineinzoomen. Perfekt. Dann werde ich es gerundet machen, also erhöhen Sie den Eckenradius auf fünf. Fantastisch. Lassen Sie mich abschließend die Farbe in Lila ändern. Ziemlich gut. Jetzt für diese Schaltfläche benötigen wir eine Textebene. Ich drücke „T“ auf meiner Tastatur und klicke auf, um eine neue Textebene zu erstellen. Lasst uns Knopf schreiben. Dann werde ich seine Farbe in weiß so ändern. Seine lustige Größe wird 14. Dann wähle ich beide Ebenen aus und richte sie horizontal und vertikal aus. Das ist gut. Wählen Sie erneut beide aus und ich werde ihnen das automatische Layout hinzufügen. Drücken Sie „Shift and A“ auf Ihrer Tastatur so. Jetzt haben wir gerade eine einfache Schaltfläche erstellt, die so dynamisch ist. Wie ich Ihnen bereits gezeigt habe, können Sie eine Komponente aus diesem Button wie folgt erstellen. Sie könnten einfach eine Komponente erstellen und es ist völlig in Ordnung. Aber nehmen wir an, wir haben verschiedene Zustände dieser Schaltfläche. Lassen Sie mich es duplizieren. Befehl D oder Kontrolle D. Ich werde es nach unten bewegen. Für den ersten werde ich es so in Button/Primär/Default umbenennen. Diese zweite ist eine Instanz dieser Komponente. Zuerst werde ich es lösen. Ich werde auf dieses Symbol mit drei Punkten klicken und auf „Instanz lösen“ klicken. Jetzt werde ich seinen Namen in Button/Primär/Hover ändern. Dies ist der Hover-Zustand dieser Schaltfläche wie folgt. Dann werde ich dem Feldabschnitt ein weiteres Feld hinzufügen, bei dem es sich um eine Overlay-Ebene handelt, und ich werde es von Linear zu Solid ändern. Es ist weiß. Das ist perfekt. Lassen Sie mich die Deckkraft von 100 Prozent auf 10 Prozent reduzieren. Fantastisch. Denken Sie daran, eine Komponente zu erstellen. Da gehen wir. Wir haben die zweite Schaltfläche und wenn ich auf die Registerkarte Assets gehe, können Sie sehen, dass wir zwei Schaltflächen haben. So weit, so gut. Lassen Sie mich eine weitere Schaltfläche erstellen und dann werden wir in die Verwendung von Varianten springen. Ich werde es duplizieren, es nach unten verschieben, es von seiner Master-Komponente lösen, und ich werde es in Button/Primär/Gedrückt umbenennen. Dieses Mal werde ich die Farbe unseres Overlay-Feels ändern und anstelle von Weiß werde ich schwarz verwenden. Lassen Sie mich die Deckkraft auf 20 Prozent erhöhen. Nun lassen Sie mich eine Komponente erstellen und wir sind fertig. Nehmen wir an, wir arbeiten an einem Projekt und Sie möchten eine dieser Schaltflächen verwenden. Sie können auf die Registerkarte Assets gehen und Sie können Drag & Drop Button/Primär. Wenn Sie den Hover-Status benötigen, können Sie die Instanz hier in Hover, Pressed und alles andere austauschen . Aber jetzt könnten Sie Variants verwenden, was eine sehr coole Art ist, Ihre Komponenten in einer einzigen Komponente zu organisieren. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Im Moment haben wir drei verschiedene Komponenten. Aber was wäre, wenn wir diese Komponenten zu einer einzigen Komponente kombinieren könnten? Es ist so einfach zu tun. Wählen Sie einfach alle Ihre Komponenten, alle diese drei Komponenten. Im Inspektor finden Sie Varianten, klicken Sie auf „Als Varianten kombinieren“. Da gehen wir. Wie Sie sehen können, wurde hier ein neuer Rahmen erstellt, als Komponentensatz bezeichnet wird. Es wird mit diesem gestrichelten Rahmen angezeigt. Die coole Sache ist, dass Sie das Aussehen dieses Komponentensatzes anpassen können. Sie könnten die Farbe des Rahmens so nach Ihren Marken, Farben ändern, und Sie können es im Grunde so gestalten, wie Sie wollen. Aber vorerst werde ich es so lassen, wie es ist. Lassen Sie mich meinen Komponentensatz auswählen und auf der rechten Seite können Sie unter dem Abschnitt Varianten sehen, wir haben zwei verschiedene Eigenschaften. Objekt 1, Grundstück 2. Die Eigenschaft 1 ist im Grunde die Art unserer Schaltfläche in diesem Fall. Du könntest es nennen, was immer du willst. Aber vorerst werde ich voran gehen und Type schreiben, weil es Sinn macht. Aber was ist mit der zweiten Eigenschaft? Die zweite Eigenschaft ist im Grunde die Staaten. Ich werde State so schreiben. Nun, wenn ich auf die Registerkarte Assets gehe, können Sie sehen, dass wir nur eine Komponente haben, die Schaltfläche ist. Ich kann es per Drag & Drop in meine Leinwand ziehen. Auf der rechten Seite können Sie sehen, dass wir Typ und Staat haben. Für den Typ, da wir nur einen Tastentyp haben, der Primär ist, müssen wir ihn nicht ändern. Aber für den Staat können wir ihn in Hover ändern. Wir können es so in „Gedrückt“ ändern. Das ist so einfach, nicht wahr? Das nennen wir eindimensionale Varianten, weil wir hier grundsätzlich unterschiedliche Komponenten mit den gleichen Eigenschaften haben , jedoch mit unterschiedlichen Werten. Im Allgemeinen haben wir eindimensionale Varianten und mehrdimensionale Varianten. Ich werde Ihnen zeigen, wie Sie auch mehrdimensionale Varianten erstellen können , also keine Sorge. Aber bevor ich in mehrdimensionale Varianten springe, möchte ich Ihnen hier zwei weitere Beispiele geben. Nehmen wir an, Sie möchten einen Schalter erstellen , der tatsächlich zwei verschiedene Zustände ein- und ausgeschaltet hat. Lassen Sie uns voran und erstellen Sie schnell einen Schalter zusammen. Für den Schalter müssen wir ein Rechteck wie dieses erstellen. Ich werde die Breite auf 60 und die Höhe auf 30 so einstellen. Dann werde ich es komplett abgerundet machen, da es ein Schalter ist. Lassen Sie mich die Farbe auf Weiß ändern. Fantastisch. Jetzt werde ich es duplizieren. Drücken Sie auf der Tastatur „Befehl D“ oder „Control D“. Dann werde ich die Breite dieser neuen Ebene verringern, diese duplizierte Ebene auf 30, so dass ich 30 mal 30 Pixel Kreis. Dann werde ich es so auf die rechte Seite schieben. Sie könnten seine Farbe in Grün ändern. Ich werde es in dieses Grün ändern. Perfekt. Endlich werde ich es etwas nach unten skalieren. Halten Sie die „Umschalt- und Wahltaste“ zusammen oder „Umschalttaste und Alt-Taste“ gedrückt und versuchen Sie es so zu skalieren, bis Sie einen Kreis von 24 x 24 Pixeln erhalten. Fantastisch. Lassen Sie mich zu Ebenen gehen, und jetzt werde ich sie gruppieren. Lassen Sie mich es in Einschalt/On umbenennen. Dann werde ich es duplizieren. Befehl D oder Steuerung D, verschieben Sie es nach unten. Ich werde auf diesen grünen Kreis doppelklicken, um ihn auszuwählen, verschieben Sie ihn auf die linke Seite. Stellen Sie sicher, dass Sie hier die gleiche Polsterung beibehalten. Hier haben wir eine drei Pixel-Polsterung für oben, rechts und unten. Wenn Sie die Polsterung sehen möchten, können Sie die „Option“ oder „Alt“ -Taste auf Ihrer Tastatur gedrückt halten und so auf Ihr Element bewegen. Dann haben wir drei, drei und drei. Das ist perfekt. guter Letzt müssen wir die Farbe von Grün zu Grau ändern, um anzuzeigen, dass dieser Schalter ausgeschaltet ist. Lassen Sie mich es schließlich in Schalter/Aus umbenennen. Dann werde ich beide auswählen. In der Symbolleiste, anstatt auf diese Schaltfläche zu klicken, klicke ich auf dieses Pfeilsymbol, um dieses Dropmenü zu öffnen und klicke auf „Mehrere Komponenten erstellen“. Lassen Sie mich Ihnen zeigen, was passiert, wenn Sie auf diesen Button klicken. Wenn Sie darauf klicken, erstellen Sie eine einzelne Komponente, die nicht korrekt ist. Ich werde „Befehl Z“ oder „Control Z“ drücken, um den Prozess rückgängig zu machen. Lassen Sie mich mehrere Komponenten erstellen. Da gehen wir. Im Moment haben wir zwei verschiedene Schalter, Schalter/Ein, Schalter/Aus. Wenn ich auf die Registerkarte „Assets“ gehe, können Sie sehen, dass wir zwei verschiedene Komponenten haben. Das ist in Ordnung. Aber wir werden es zu einem anderen Schritt machen, indem wir Varianten verwenden. Was wir tun müssen, ist beide auszuwählen und sie als Varianten zu kombinieren. Da gehen wir. werde ich den Eigenschaftsnamen hier in Switch ändern. Da wir im Namen dieser Schalter deaktiviert und eingeschaltet haben, wenn wir versuchen, hier eine Instanz hinzuzufügen, konnten Sie sehen, dass wir dieses Drop-Menü nicht mehr haben. Wir haben diese coole Switch-Funktion wie diese, und es fühlt sich wirklich gut an. Lassen Sie mich meinen Switch-Komponentensatz auswählen und versuchen, dieses Aus umzubenennen, zum Beispiel, Disable und this On to Enable. Jetzt haben wir diese Funktionalität nicht mehr. Wir haben dieses Drop-Menü. Es funktioniert perfekt. Mit dieser coolen Funktion können Sie es jedoch noch besser machen. Ich werde hier und On schreiben. Sie könnten auch wahr und falsch verwenden. Außerdem könnten Sie ihre Position wie folgt ändern. Sie können klicken und ziehen, um ihre Position zu ändern. Ich werde es überhaupt anziehen. Lassen Sie mich Ihnen zeigen, wie Sie wahr und falsch verwenden können. Ich werde es in false umbenennen und Sie erhalten die gleiche Funktionalität. Perfekt. Können Sie sehen, wie erstaunlich diese Varianten sind? Dies war ein weiteres eindimensionales Beispiel. Ich werde Ihnen ein weiteres Beispiel zeigen und dann werden wir in die Schaffung von mehrdimensionalen Varianten springen . Das nächste Beispiel wird ein Optionsfeld sein. Was brauchen wir für ein Optionsfeld? Offensichtlich brauchen wir einen Kreis. Du könntest auch O auf deiner Tastatur drücken. Halten Sie die „Umschalttaste“ -Taste gedrückt und ziehen Sie, um einen Kreis zu erstellen. Ich werde die Breite und Höhe auf 30. Es ist jetzt völlig in Ordnung. Lassen Sie uns die Farbe in Weiß ändern. Dann werde ich es duplizieren. Drücken Sie auf der Tastatur „Befehl D“ oder „Control D“. Halten Sie die Taste „Umschalttaste“ und „Alt“ oder „Umschalttaste“ und „Wahltaste“ gedrückt und versuchen Sie, sie so zu skalieren. Für den inneren Kreis werden wir einen 18 mal 18 Pixel Kreis wie diesen haben. Jetzt werde ich die Farbe in dieses Lila ändern. Lassen Sie mich auf die Registerkarte „Ebenen“ gehen. Ich wähle beide aus, gruppiere sie, drücke „Befehl G“ oder „Control G“ auf deiner Tastatur. Lassen Sie mich es in Radio Button/On umbenennen. Ich werde es duplizieren, verschieben Sie es auf die rechte Seite, und doppelklicken Sie auf diesen inneren Kreis, entfernen Sie ihn, und lassen Sie uns die Gruppe in Radio Button/Off umbenennen. Wählen Sie beide aus, erstellen Sie mehrere Komponenten wie diese und klicken Sie dann, während diese beiden Komponenten ausgewählt sind, auf Als Varianten kombinieren. Da gehen wir. Lassen Sie mich nun auf die Registerkarte Assets gehen, ziehen Sie und legen Sie die Schaltfläche „Radio“. Wir haben Eigentum 1. Wir haben es nicht umbenannt. Wenn Sie es umbenennen möchten, sollten Sie sicherstellen, dass Sie Ihren Komponentensatz und nicht Ihre Komponente selbst auswählen . Ihre Komponentensatz, die Optionsschaltfläche ist. Hier können Sie auf diese Eigenschaft 1 doppelklicken, und lassen Sie uns State schreiben. Da gehen wir. Jetzt haben wir Staat. Es ist ziemlich gut, nicht wahr? Lassen Sie uns nun über mehrdimensionale Varianten sprechen. Zunächst werde ich voran gehen und hier eine neue Seite erstellen , um unsere Komponenten zu organisieren. Das ist unsere Seite 1. Ich werde es so in eindimensional umbenennen. Ich werde eine neue Seite erstellen, indem ich auf dieses Plus-Symbol klicke, und lassen Sie mich mehrdimensional schreiben. Perfekt. Lassen Sie mich zurück zu Eindimensional. Ich werde diesen Schaltflächenkomponentensatz auswählen, kopieren Sie ihn, Befehl C oder Control C, gehen Sie zur mehrdimensionalen Seite und fügen Sie ihn ein, drücken Sie „Befehl V“ oder „Control V“. Was machen wir hier? Zuallererst werde ich diesen Rahmen vergrößern. Ich werde es so vergrößern, damit wir mehr Raum haben, mit dem wir arbeiten können. Dann werde ich diese Schaltflächen organisieren. Ich werde es auch für diese Zeile in die erste Zeile verschieben. Wir haben einen Knopf mit drei verschiedenen Zuständen wie diesem. Lassen Sie mich diesen Rahmen kleiner machen. Zuallererst werde ich diese Komponenten aus diesem Komponentensatz verschieben, damit wir keine Varianten mehr haben. Wenn wir zu Assets gehen und wenn wir zu Multidimensional gehen, haben wir drei verschiedene Komponenten, was bedeutet, dass wir keine Varianten mehr verwenden. Jetzt müssen wir diese Schaltflächen umbenennen. Wie können wir das tun? Ich werde sie alle auswählen. Ich werde auf meiner Tastatur „Befehl R“ oder „Control R“ drücken. Hier, mit diesem Fenster, kann ich alle meine Ebenen, alle meine Komponenten gleichzeitig mit coolen Funktionalitäten umbenennen . Ich werde zu diesem Feld Umbenennen in gehen und lassen Sie mich auf diesen aktuellen Namen Button klicken. Auf diese Weise erhalten wir den aktuellen Namen unserer Ebene, und dann können wir mehr Text hinzufügen. Ich werde schreiben/und dann ohne Symbol, perfekt. Klicken Sie auf „Umbenennen“. Da gehen wir. Wir haben gerade den Namen aller Schaltflächen geändert. Das ist erstaunlich. Jetzt werde ich sie duplizieren, Befehl D oder Kontrolle D, sie nach unten bewegen. Dies sind die Instanzen unserer Master-Komponenten. Wie Sie wissen, müssen wir sie von ihren Master-Komponenten lösen. Noch einmal werde ich sie umbenennen. Drücken Sie „Befehl R“ oder „Control R.“ Hier im Match-Feld werde ich ohne Icon-Text schreiben. Stellen Sie sicher, dass Sie es genau so schreiben, wie Sie es zuvor geschrieben haben, es ist so wichtig. Ohne Symbol. Dann ersetzen Sie es durch With Icon und drücken Sie „Umbenennen“. Jetzt haben wir es einfach ersetzt. Dann werden wir hier ein Symbol zu diesen Schaltflächen hinzufügen. Wie können wir das tun? Es ist so einfach. Ich werde voran gehen und einen Stern nur für dieses Beispiel erstellen. Lassen Sie mich die Breite und Höhe auf 16 Pixel einstellen. Ich werde die Farbe in Weiß ändern, fantastisch. Dann schieben Sie es hierher. Ziehen Sie es und legen Sie es ab. Wie Sie sehen können, wurde die Breite automatisch geändert, da wir das automatische Layout verwenden . Dies ist nicht das, was wir wollen, weil wir die Breite unserer primären Taste beibehalten wollen. Um das zu beheben, gehe ich zum Abschnitt „Automatisches Layout“ im Inspektor. Für die horizontale Polsterung werde ich 16 Pixel so schreiben. Das ist genau das, was ich brauche. Ich werde den gleichen Vorgang für alle meine Tasten wiederholen. Ich wähle meinen Stern aus, drücke „Befehl C“ oder „Control C“ und wähle diese Schaltfläche aus und drücke „Befehl V“ oder „Control V“, um sie einzufügen. Nun werde ich die Position dieses Symbols von der rechten Seite auf die linke Seite ändern. Ich kann die linke Pfeiltaste auf meiner Tastatur verwenden, um es einfach zu tun. Wählen Sie erneut Ihre Schaltfläche aus, ändern Sie Ihre horizontale Polsterung auf 16. guter Letzt Zuguter Letztwerde ich dasselbe für meinen letzten Knopf tun. Alles ist erledigt. Das letzte, was wir tun müssen, ist Komponenten zu erstellen. Ich werde diese drei Schaltflächen auswählen und mehrere Komponenten erstellen. Perfekt. Jetzt haben wir sechs verschiedene Komponenten, und es ist Zeit, Varianten zu erstellen. Ich wähle alle aus und klicke auf Als Varianten kombinieren. Da gehen wir. Wir haben gerade mehrdimensionale Varianten erstellt. Auf der rechten Seite, wenn wir zum Abschnitt Varianten gehen, können wir Property 1 sehen, ich werde Type schreiben. Eigentum 2, Ich werde State schreiben. Eigenschaft 3, Ich werde Icon schreiben. Hier haben wir mit Icon, ohne Symbol. Wie ich bereits erwähnt habe, könnten Sie es einfach in Ein und Aus umbenennen, um diese Umschaltfunktion zu erhalten. Jetzt kann ich zu den Assets gehen, mehrdimensional. Sie könnten es per Drag & Drop ablegen. Da gehen wir. Wir haben primäre, wir haben Zustände wie diese, wir haben Symbol oder ohne Symbol. Das ist erstaunlich. So funktioniert im Grunde eine mehrdimensionale Variante. Aber was wäre, wenn wir es zu einem anderen Schritt machen könnten, indem wir hier eine neue Art von Schaltfläche hinzufügen? Jetzt haben wir die primäre Schaltfläche, aber wir können auch eine sekundäre Schaltfläche hinzufügen. Wie kann ich das machen? Es ist so einfach. Zuallererst werde ich meinen Komponentensatz auswählen. Dann werde ich diese Grenze vergrößern oder, sagen wir, Rahmen so. Schließlich wähle ich alle meine Tasten aus, drücke „Befehl D“ oder „Control D“, schiebe sie nach unten. Zuallererst werde ich alle auswählen, diese drei Tasten ohne Symbol, und lassen Sie mich ihre Farbe ändern. Gehen Sie zu „Auswahlfarben“ und versuchen Sie, das U so zu ändern. Ich denke, es ist gut. Stellen Sie sicher, dass Sie diesen Hex-Farbcode greifen, kopieren Sie ihn und wählen Sie die anderen drei Schaltflächen aus, und fügen Sie die Farbe hier ein. Wir sind mit ihrer Farbe fertig. Das einzige, was noch übrig ist, ihre Namen zu ändern. Was sollen wir hier ändern? Wir müssen das primäre Schlüsselwort zu sekundär ändern und wir sind im Grunde fertig. Ich werde alle von ihnen auswählen, drücken Sie „Befehl R“ oder „Control R“ auf Ihrer Tastatur. Hier im Textfeld Match werde ich Primary schreiben. Es bedeutet, primär zu werden. Dann werde ich es durch Secondary wie folgt ersetzen. Wenn ich auf „Umbenennen“ klicke, werden sie umbenannt. Du brauchst nichts anderes zu tun. Versuchen wir es mal. Ich gehe zu „Assets“ und ich werde diese Schaltfläche per Drag & Drop. Nun, anstelle von primären, werde ich sekundäre wählen und wir haben andere Staaten. Sie könnten ein Symbol wie dieses aktivieren. So können Sie verschiedene Arten Ihrer Schaltfläche erstellen. Lasst uns zusammenfassen. Zuerst müssen Sie daran denken, dass wir zwei verschiedene Arten von Varianten haben : eindimensionale Varianten und mehrdimensionale Varianten. Das zweite, woran Sie sich erinnern müssen, ist, dass Sie Varianten oder Komponenten verwenden können. Sie sollten bedenken, dass Sie Komponenten haben müssen, wenn Sie Varianten verwenden möchten. Das letzte, was Sie sich erinnern müssen, ist, dass Sie versuchen sollten , Ihre Immobilien sehr gut zu organisieren. Wenn ich diesen Komponentensatz hier auswähle, habe ich Typ, Status, Icon. Stellen Sie sicher, dass Sie sie richtig benennen, da Sie später , wenn Ihr Projekt wächst, es leicht machen können, damit zu arbeiten. Das letzte, was ich hier erwähnen werde, ist, dass Sie tatsächlich die Reihenfolge dieser Eigenschaften ändern könnten . Wenn Sie bei diesem Typ direkt daneben bestellen, können Sie sehen, dass ein Symbol angezeigt wird. Wenn ich so klicke und ziehe, kann ich die Reihenfolge dieser Eigenschaften ändern, was so cool ist. Basierend auf dem Grad der Wichtigkeit, können Sie sie einfach ändern. Aber in diesem Fall denke ich, Typ, Staat und Icon sind sinnvoll. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. Wir sehen uns dann. 43. Layoutraster: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über die Layout-Gitter sprechen. Grundsätzlich helfen Layout-Gitter uns dabei, genau zu gestalten, so dass wir verstehen können, wo genau unsere Objekte platziert werden sollen oder wie Sie Ihre Objekte in unterschiedlichen Bildschirmgrößen platzieren können. Um ein Layoutraster hinzuzufügen, können Sie zum Eigenschaftenfenster oder zum Inspektor wechseln und direkt in der Mitte sehen Sie den Layout-Rasterabschnitt. Ich werde auf diesen Plus „Button“ so klicken und in der erweiterten Einstellung können Sie die Größe einstellen. Zum Beispiel kann ich es auf acht setzen, wenn ich es zum Entwerfen mobiler Anwendungen verwenden werde , und ich kann es auf 10 setzen, wenn ich eine Webseite entwerfe. Sie können auch die Farbe so ändern und natürlich die Deckkraft. Wenn Sie den Typ Ihres Layoutrasters ändern möchten, können Sie einfach zu diesem Drop-Menü gehen. Wie Sie sehen können, haben wir drei verschiedene Optionen. Die erste ist Gitter, und das ist, was Sie hier sehen können. Die zweite ist Spalten. In diesem Fall haben Sie mehr Optionen zu ändern, zum Beispiel haben Sie die Anzahl Ihrer Spalten, die Sie verwenden möchten. Wenn Sie eine Webseite entwerfen, können Sie sie auf 12 setzen, es ist das bekannteste Layout-Raster für das Entwerfen einer Webseite. Dann haben Sie Typ, Breite und Rand. Die Breite ist deaktiviert, weil wir den Stretch-Typ verwenden, also bedeutet es im Grunde, dass es alle 12 Spalten über unser Kunstboard erstreckt. Wenn ich es in die Mitte ändere, können Sie sehen, dass die Breite aktiviert wird, so dass ich die Breite einfach auf 30 oder sogar 60 einstellen kann, und es ist zentriert. Die Rinnenmenge ist der Abstand zwischen Spalten und Zeilen, und hier können Sie es auf rechts setzen, Sie können es auf links und strecken. Wann sollten Sie Center verwenden? Wenn Sie beispielsweise eine Webseite für einen Ultra-Wide Screen entwerfen, können Sie diese Center-Option verwenden. Sie können es auch in Zeilen ändern, wie Sie sehen können. Der nächste wichtige Punkt, den ich erwähnen werde, ist, dass Layout-Gitter nicht von der Dimension Ihres Kunstboards abhängen. Es bedeutet, dass, wenn ich versuche, die Größe dieses Kunstboards so zu ändern, Sie sehen können, dass Ihr Layout-Raster intakt ist. Alles klar, Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 44. Plug-ins: Hallo an alle und herzlich willkommen zu einem anderen Video dieses Kurses. In diesem Video werden wir über Plugins in Figma sprechen. Eigentlich sind Plugins Skripte oder Anwendungen von Drittanbietern , die die Funktionalität einer anderen Anwendung erweitern. Um schnell oder sogar magisch etwas zu tun, können Sie Plugins in Ihrem Projekt verwenden. Jetzt werde ich Ihnen zeigen, wie wir sie finden können, wie Sie sie installieren, deinstallieren und schließlich, wie Sie sie verwenden können. Gehen wir zu „Plugins“ direkt unter „Zuletzt“ Abschnitt in Ihrem Dashboard. Dieses Fenster ist in drei verschiedene Abschnitte unterteilt. Empfohlene Plugins, beliebt und installiert. Im vorgestellten Plugin-Abschnitt finden Sie alle vorgestellten Plugins von Figma, wie Sie hier sehen können, haben wir Sympli Handoff, wir haben Vectary 3D, über die wir in der 3D-Modellierung Abschnitt dieses Kurses haben wir Master, Arrow Auto, Clean Document, etc. Es gibt unzählige Plugins, die Sie in Ihrem Projekt verwenden können. Jetzt werde ich Ihnen jedoch die wichtigsten und beliebtesten Plugins zeigen, und wir werden lernen, wie man sie benutzt. Wie Sie im beliebten Abschnitt sehen können, haben wir diese Plugins. Der erste heißt „Unsplash“, was so nützlich ist. Wenn ich darauf klicke, könnte man die Beschreibung hier sehen. Sie können schöne Bilder von Unsplash direkt in Ihre Designs einfügen. Es ist ein tolles Plugin und auch es ist eine großartige Website. Sie können gebührenfreie Bilder von dieser Website verwenden. Um das Plugin zu installieren, können Sie auf diese Schaltfläche klicken und das ist alles, was es installiert ist, und wenn Sie ein Plugin deinstallieren möchten, können Sie wieder, klicken Sie auf das und es ist fertig. Ziemlich cool. Sie könnten alle Informationen über diese Plugin hier erhalten, können Sie auf „Alle anzeigen“ klicken Sie über jede andere Version erfahren. Gehen wir zurück zu Plugins und hier, wie Sie sehen können, haben Sie unsplash im installierten Abschnitt, dann haben wir Contents Reel. Es ist ein weiteres gutes Plugin, das Ihnen zufällige Daten gibt , damit Sie alles mit echten Daten entwerfen können. Ich werde es auch installieren. Dann haben wir Diagramme. Sie können verschiedene Diagramme erstellen. Das brauchen wir vorerst nicht. Sie haben Map Maker, das ist so cool. Sie können ganz einfach Ihre Adresse in dieses Textfeld schreiben und es erstellt Ihnen einen Google Maps-Bildschirm oder sogar und einen Mapbox-Bildschirm. Lassen Sie uns es auch installieren. Wir haben Isometrisch, es ist so cool. Ich werde es installieren. Wir haben Vectary 3D lassen Sie es auch installieren, weil wir einen kompletten Abschnitt über 3D-Modellierung in diesem Kurs haben. Sie können 3D-Modelle in Ihrem Entwurf verwenden. Dann haben Sie Rename It und Themer, ich werde sie jetzt nicht installieren. Klicken wir nun auf „Alle Plugins durchsuchen“. Hier werde ich nach einem Plugin namens Brandfetch suchen. Da gehen wir. Es ist der zweite. Ich werde es auch installieren. Lassen Sie uns nach Palette suchen. Los geht's, und das ist alles vorerst. In der Tat können Sie fortfahren und alle installieren. Meiner Meinung nach ist es jedoch besser, Ihre Beschreibung zu überprüfen, Informationen darüber zu erhalten, wie diese Plugins funktionieren, und dann könnten Sie entscheiden, welches für Ihr Projekt geeignet ist. Lassen Sie uns nun eine neue Datei erstellen. Ich werde „A“ drücken, um eine Kunsttafel hinzuzufügen. Ich werde MacBook Pro wählen. Dann lassen Sie uns hier ein Rechteck erstellen. Ich werde den Eckenradius erhöhen, um es schön zu machen. Sobald mein Objekt ausgewählt ist, kann ich zum Menübereich gehen. Hier kann ich Plugins öffnen. Ich habe alle meine Plugins hier fertig. Moment werde ich Unsplash wählen ImMoment werde ich Unsplash wählenund bedenken, dass Sie nur ein Plugin auf einmal verwenden können. Sie können nicht zwei oder mehr Plugins gleichzeitig verwenden. Jetzt haben wir Unsplash Plugin geöffnet und Sie können einfach auf „Einfügen zufällige.“ Da gehen wir. Sie können sofort ein zufälliges Bild bekommen. Sie können auch diese Voreinstellungen wählen, zum Beispiel minimal oder Natur, bunt. Natürlich können Sie auch suchen. Zum Beispiel, lasst uns Porträt schreiben und da gehen wir. Es ist ziemlich genial. Sie können einfach eine auswählen. Fantastisch. Können Sie sehen, wie erstaunlich und leistungsstark diese Plugins sind? Jetzt kann ich einen Text erstellen. Lasst uns Namen schreiben. Ich werde die Größe auf 40 erhöhen. Dann gehen wir zum Plugin-Abschnitt und ich werde Inhalt Reel auswählen. Jetzt, wie Sie sehen können, haben Sie verschiedene Optionen in diesem Plugin. Zum Beispiel haben Sie Text, Sie haben Avatare, Sie haben Symbole. Lassen Sie uns zunächst diese Textoption ausprobieren. Wie Sie sehen können, habe ich meinen Namen Textebene ausgewählt, und ich werde es auf diese „Namen“ klicken. Da gehen wir, Sie haben einen zufälligen Namen. Wenn ich noch einmal klicke, können wir sehen, dass ich hier zufällige Namen bekommen kann. Wenn ich auf diese Punkte klicke, können Sie einige Einstellungen definieren. Sie können beispielsweise festlegen, ob Sie einen US-englischen Namen (Französisch, Spanisch) wünschen. Wenn ich Französisch wählen, können Sie auf „Bewerben“ klicken und dort gehen wir. Du kannst sogar das Geschlecht ändern. Zum Beispiel haben wir hier männlich oder weiblich. Sie können angeben, ob Sie nur Vorname oder Nachname wie folgt möchten. Hier können Sie die Vorschau Ihrer definierten Einstellungen sehen. Wenn Sie nun eine Telefonnummer erhalten möchten, können Sie auf „Telefon“ klicken. Da gehen wir. Wenn Sie eine Adresse erhalten möchten, können Sie auf „Adresse“ klicken und hier ist Ihre Adresse. Du könntest Zahlen bekommen, du könntest Datum und Uhrzeit bekommen, so. Überraschenderweise können Sie auch einige Lorem ipsum Inhalte wie diesen generieren. Sie können E-Mail-Adressen und einige URLs wie diese erhalten. Versuchen wir nun den Avatarbereich und die Symbole. Zuerst müssen wir einen Kreis erstellen. Dann klicke ich auf „Avatare“. Hier kann ich männlich, weiblich, männlich und weiblich verwenden . Ich werde mich für eine Frau entscheiden. Da gehen wir. Wenn ich diesen Kreis mehrfach dupliziere und alle auswähle und auf „Männlich und Weiblich“ klicke, könnte man sehen dass ich für jeden Kreis verschiedene Bilder habe, was ziemlich erstaunlich ist. Wenn Sie Symbole verwenden möchten, müssen Sie zuerst einige Mittel herunterladen, da dies keine PNG-Symbole sind, die Sie leicht verwenden könnten. Zuerst müssen Sie einige spezielle Mittel herunterladen, und dann könnten Sie diese Symbole verwenden. Versuchen wir es jetzt mit dem Map Maker. Zuerst muss ich sicherstellen, ob ich es installiert habe oder nicht. Es scheint, dass ich vergessen habe, es zu installieren. Klicken wir auf „Plugins verwalten“ und lassen Sie uns alle Plugins durchsuchen. Jetzt werden wir nach Map Maker suchen. Lassen Sie es uns installieren. Ich werde zu Plugins gehen, und da gehen wir. Hier lassen Sie uns eine Adresse einfügen. Ich weiß nicht, schreiben wir Harrison. Da gehen wir. Sie könnten genauer sein, Sie könnten einige Zahlen hinzufügen. Für den Zweck dieses Tutorials denke ich jedoch, dass es genug ist. Sie könnten auch entscheiden, ob Sie einen Google Maps-Bildschirm oder eine Mapbox erhalten möchten, wie diese, wir können auch einige Eigenschaften hier ändern. Sie können beispielsweise den Kartentyp von Roadmap zu Satellite in Hybrid ändern. Sie können auch die Zoomstufe ändern. Zum Beispiel werde ich es auf 16 ändern, so. Sie können auch eine Markierung hinzufügen. Zum Beispiel, dieses hier, das ist ziemlich genial. Das nächste Plugin, über das wir reden werden, ist Brandfetch. Es gibt Zeiten, in denen Sie benötigen, um ein Logo von einer Website zu erhalten , und es ist zeitaufwendig, einfach nach diesem Logo zu suchen, es zu speichern und es dann in Figma einzufügen. Stattdessen könnten Sie diese Plugin verwenden. Angenommen, wir wollen das Apples Logo erhalten. Wenn ich nur ihren Domainnamen wie ihre Website schreibe, apple.com und ich klicke auf „Get Logo“. Sie konnten das Apple-Logo sofort sehen. Ich kann es skalieren, kann es herunterskalieren. Versuchen wir auch ein anderes Logo, Brandfetch. Lasst uns figma.com schreiben und da gehen wir. Es ist ziemlich erstaunlich, nicht wahr? Das nächste Plugin, über das wir sprechen werden, ist die Palette. Wenn Sie eine tolle Farbpalette erstellen möchten, aber Sie wissen nicht, wie Sie Ihre Farben wählen. Mit diesem Plugin können Sie erstaunliche Farbpaletten in einer Sekunde erstellen, wie Sie sehen können, können Sie es von Standard zu Benutzeroberfläche wie folgt ändern. Sie können es aktualisieren. Sie können ein Foto auswählen, um einige Farben daraus zu bekommen. Du kannst es retten. Da gehen wir. Sie haben Ihre Farbpaletten einsatzbereit. Sie können den Hex-Farbcode direkt dort drüben bekommen. Es ist ziemlich fantastisch. In diesem Video haben Sie gelernt, wie Sie Plugins installieren, wie Sie das deinstallieren wie Sie das in Ihren Projekten verwenden können. Ich hoffe, Sie haben dieses Video wirklich genossen. Vielen Dank, dass Sie es gesehen haben, und ich werde Sie im nächsten Video sehen. 45. Exportieren: Hallo an alle und herzlich willkommen zu einem anderen Video dieses Kurses. In diesem Video werden wir über den Export Ihrer Dateien sprechen. Als UI/UX-Designer müssen Sie wissen, wie Sie Ihre Dateien richtig exportieren, um sie an Ihren Entwickler oder an Ihren Kunden zu übergeben. Angenommen, Sie möchten diese Bilder exportieren, um dies zu tun, können Sie zunächst ein Objekt auswählen, und dann im Abschnitt Eigenschaft haben Sie den Abschnitt Exportieren. Wenn ich auf dieses „Plus“ -Symbol klicke, können Sie sehen, dass Sie diese Einstellungen ändern können. Wie Sie sehen können, ist es standardmäßig auf 1x festgelegt. Was bedeutet das? Das bedeutet, dass Sie, wenn Sie es so exportieren, wie es ist, die gleiche Dimension Ihrer Datei erhalten. Wenn Sie dies jedoch für eine Anwendung entwerfen , die eine andere Dateigröße erfordert, können Sie dieses Dropmenü öffnen, und Sie können es auf 2x oder 3x setzen. Sie können das Suffix auch hier schreiben und dann können Sie das Format angeben. Zum Beispiel können Sie es auf PNG, JPG, SVG und PDF einstellen , und dann können Sie es in der Vorschau anzeigen und schließlich können Sie auf „Exportieren“ klicken und dort gehen wir, können Sie einfach einen Namen festlegen und auf „Speichern“ klicken. Wenn Sie Ihre Dateien jedoch nicht exportieren möchten und dieses Projekt nur mit Ihren Teamkollegen oder mit Ihrem Kunden teilen möchten , können Sie zum Toolbar-Bereich gehen und auf diese blaue Schaltfläche klicken, die heißt Teilen, und hier können Sie jemanden einladen, dieses Projekt anzusehen oder dieses Projekt zu bearbeiten, es liegt ganz an Ihnen. Sie können den Link auch kopieren und an eine andere Person senden. Wenn Sie dieses Projekt auf Ihrer Website präsentieren möchten, können Sie auf „Get einbetten Code“ klicken, und Sie erhalten einen iframe-Code, den Sie greifen und kopieren und in Ihre HTML-Datei einfügen können und Sie erhalten diese Projekte live auf Ihrer Website, Also, wenn Sie hier Änderungen vornehmen, wird dies auch auf Ihre Website angewendet. Es ist ziemlich erstaunlich. Alles klar Jungs, vielen Dank für das Ansehen dieses Video, ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 46. Prototyping: Hallo, alle und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir über Prototyping in Figma sprechen. Als UI UX Designer ist es wichtig, über Prototyping zu wissen und so wichtig, dieses Thema zu meistern , denn egal wie schön und wie erstaunlich Ihre Designs sind, am Ende des Tages, wenn Sie es nicht in einem erstaunliche Art und Weise, Ihre harte Arbeit zahlt sich nicht aus, so müssen Sie dieses Thema zu meistern. Aus diesem Grund haben wir in diesem Kurs einen kompletten Abschnitt über Prototyping. In diesem Video werde ich Ihnen zeigen, wie Prototyping funktioniert und ich möchte Sie mit dem Konzept vertraut machen. Lassen Sie uns ohne weiteres beginnen, indem Sie zwei Art-Boards hinzufügen. Ich werde drücken „A“ auf meiner Tastatur und lassen Sie uns iPhone 11 Pro oder X wählen. Dann werde ich das duplizieren, weil wir zwei verschiedene Art-Boards brauchen und lassen Sie uns ein Rechteck zu diesem ersten Kunstboard wie folgt hinzufügen. Ich werde den Eckenradius auf 40 erhöhen. Ziemlich gut. Lassen Sie mich es an der Mitte ausrichten. Dann wähle ich ein Bild aus unserer Asset-Datei aus. Zum Beispiel, wählen wir diese im Karten-Ordner, Nummer 2. Ich öffne es und lass es uns hier setzen. Ziemlich genial. dann auf der zweiten Kunsttafel Lassen Sie unsdann auf der zweiten Kunsttafelein weiteres Rechteck erstellen. Ziemlich gut. Es sollte zu deinem Artboard passen. Dann werde ich das gleiche Bild hier platzieren. Fantastisch. Jetzt ist es an der Zeit, Interaktionen zu unserem Design hinzuzufügen. Lassen Sie mich es umbenennen, um darauf zu verweisen, also werde ich den Namen zu Home und den zweiten zu Detail ändern. Ziemlich gut. Wenn der Benutzer auf dieses Bild in unserem Home Art Board klickt, sollte unser Detail Art Board in einer Sekunde präsentiert werden. Dann müssen wir es animieren. Zunächst können Sie im Eigenschaftenabschnitt Prototyp aus diesen drei Registerkarten wie folgt auswählen. Dann müssen Sie Ihr Objekt auswählen. Wie Sie sehen können, ist mein Bild bereits ausgewählt. Wie Sie sehen können, erscheint hier ein Kreis. Wenn ich also darauf klicke und meine Maus so halte, kann ich sie ganz einfach mit dem nächsten Artboard verbinden. Lasst es uns fallen lassen und da gehen wir. Jetzt sind unsere Kunsttafeln miteinander verbunden. Wenn ich diese Verbindung entfernen möchte, kann ich sie wie folgt in die Leinwand ziehen und ablegen. Sobald Sie Ihre erste Verbindung erstellt haben, erscheint ein kleines blaues Quadrat in der oberen linken Ecke Ihres ersten Kunstboards. Es bedeutet, dass Ihr Prototyp von diesem Kunstboard aus beginnt. Wenn Sie es ändern möchten, können Sie einfach darauf klicken, ziehen Sie es und legen Sie es hier so ab. Jetzt, da wir unsere Interaktion erstellt haben, lassen Sie uns eine Vorschau für eine Sekunde anzeigen. Wenn ich in die Symbolleiste gehe und auf diese Schaltfläche „Vorschau“ klicke, kann ich meine Kunstboards hier sehen. Wenn ich irgendwo in meiner Kunsttafel so klicke, können wir sehen, dass es mir zeigt, dass es eine Interaktion für dieses Bild gibt. Diese blaue Box ist also ein Hot Spot. Wenn ich nun darauf klicke, kannst du sehen, dass mein zweites Kunstboard sofort erscheint. Wir haben hier jedoch keine Animation. Gehen wir zurück zu unserer Projekt-Datei. Im Abschnitt Prototyp haben Sie Interaktionen Abschnitt, haben Sie Animation. Hier können wir die Art der Interaktion wählen. Zum Beispiel haben wir On Tap, On Drag, Während Hovering, Während Drücken , Maus Enter, etc. Wir werden nicht in diese Details jetzt eintauchen weil wir es im Abschnitt Prototyping dieses Kurses behandeln. Sie haben auch das Ziel hier. Navigieren Sie zu, Überlagerung öffnen, Wechseln mit, Zurück, Überlagerung schließen und URL öffnen, und hier ist Ihr Ziel. Dann haben wir auch den Bereich Animation. Wie Sie sehen können, ist es standardmäßig auf „instant“ eingestellt. Wenn ich dieses Drop-Menü öffne, habe ich viele Optionen. Ich habe Smart Animate, das ist eine neue Funktion. Wir haben Move In, Move Out, Push, Slide In und Slide Out. Jetzt werde ich Smart Animate wählen und hier haben wir erweiterte Optionen. Zum Beispiel kann ich „Einlassen“, „Auslassen“ , „Ein- und Ausstieg“ und „Linear“ wählen . Diese beziehen sich auf Animationsmaterial. Wir werden es im erweiterten Abschnitt abdecken. Hier hast du die Zeit. Zum Beispiel kann ich es auf 400 Millisekunden so einstellen. Hier können Sie auch die Prototypeneinstellung öffnen. Es bezieht sich auf dieses Fenster. Wir können zum Beispiel den Hintergrund zu weiß so ändern, wie Sie es wünschen. Sie können zum Beispiel das Modell Ihres iPhone ändern. Hier ist es auf Gold gesetzt. Ich kann Midnight Green so wählen. Fantastisch. Jetzt schauen wir es uns noch einmal an. Ich gehe zur ersten Seite und klicken Sie jetzt auf unser Bild. Da gehen wir. Es ist fantastisch, nicht wahr? Wenn Sie von vorne beginnen möchten, können Sie auf diese Schaltfläche klicken, neu starten und dann wieder auschecken. Gehen wir nun zurück zu unserer Projektdatei. Hier, wie Sie sehen können, der Name unserer Rechtecke in diesen beiden Kunsttafeln unterschiedlich, also lassen Sie uns sie gleich machen. Ich werde es in Bild und dieses eine Bild als auch ändern. Was denkst du, wird passieren? Schauen wir es uns an. Ich werde zum Prototyping gehen, lassen Sie uns das neu starten, und noch einmal werde ich darauf klicken. Fantastisch. Haben Sie den Unterschied hier gesehen? Mit Hilfe von Smart Animate können Sie diese Art von Animation und Prototyping leicht in Figma erstellen, was ziemlich erstaunlich ist. Wenn Sie im Abschnitt Prototyping dieses Kurses in komplexere Animationen und komplexere Prototyping eintauchen möchten . Alles klar, Leute. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 47. Multiplayer und Kommentieren: Hallo an alle und herzlich willkommen zu einem anderen Video dieses Kurses. In diesem Video werden wir über Multiplayer sprechen und kommentieren. In der Tat verfügt Figma über leistungsstarke Funktionen , um die Zusammenarbeit von Designern zu erleichtern. Wie ich bereits erwähnt habe, können Sie Ihr Projekt einfach mit diesem blauen Button teilen. Wenn ich darauf klicke, wie Sie sehen können, habe ich bereits eine Person eingeladen und ich definiere die Einstellung, dass er dieses Projekt bearbeiten kann. Dann erhielt er eine E-Mail von Figma, er akzeptierte das und von nun an kann er mit mir zusammenarbeiten, um dieses Projekt zu bearbeiten. Wie Sie in der Symbolleiste sehen können, gibt es zwei Personen, die dieses Projekt anzeigen. Der erste bin ich, der zweite ist diese Person, die auch ich in diesem Tutorial ist. Jetzt werde ich Ihnen zeigen, wie Sie das nutzen können. Lassen Sie mich zu diesem UI-Design-Konto wechseln. Da gehen wir. Angenommen, ich wähle diese Ebene aus, wenn ich zu meinem Hauptkonto zurückgehe, können Sie sehen, dass sie bereits ausgewählt wurde. Von wem? Dieses UI-Design. Wenn ich die Position meines Cursors hier ändere, können Sie sehen, dass es sich auch in diesem Projekt sofort ändert, oder lassen Sie uns ein anderes Objekt auswählen, zum Beispiel dieses Menü und dort gehen wir. UI-Design macht etwas mit dieser Ebene. Wenn ich hier den Hintergrund auswähle, ist dies mein Konto und ich gehe zu dem anderen Konto, Sie können diesen lila Strich sehen, der anzeigt, dass sie diesen Hintergrund gewählt haben. Sie können diese Farben in der Symbolleiste sehen, um zu erkennen, welche Person welches Objekt auswählt. Es ist ziemlich cool, nicht wahr? Nun nehme ich an, dass ich hier einige Kommentare hinzufügen möchte. In der Symbolleiste direkt neben unserem Textwerkzeug befindet sich ein weiteres Symbol zum Kommentieren. Wenn ich darauf klicke, kann ich hier einen Marker platzieren, zum Beispiel hier und ich kann einen Kommentar schreiben, zum Beispiel, wo ist der CTA? Welches ist Call-to-Action. Ich kann es posten. Ich kann sogar jemanden hier erwähnen, wie UI-Design hinzufügen und diese Person wird eine E-Mail über diesen Kommentar erhalten und er kann mir antworten. Fertig. In diesem Konto können wir sehen, dass es einen Kommentar gibt. Ich klicke darauf, ich schreibe, wo ist der CTA? Ich kann antworten, ich werde es bis heute Abend entwerfen. Wir können hier auch ein Emoji hinzufügen. Ziemlich cool. Antwort, das ist genial und hier in meinem Konto kann ich die Antwort sofort sehen, was ziemlich fantastisch ist. Wenn dieses Problem behoben wurde, können Sie auf die Schaltfläche „Lösen“ klicken und dieser Kommentar wird entfernt. Wie Sie sehen können, bietet Figma Ihnen viele Funktionen, um mit anderen Designern zusammenzuarbeiten , ohne Ihre Dateien zu exportieren und sie und all diese Dinge zu senden. So können Sie sofort mit anderen zusammenarbeiten und Ihre Ideen über Ihr Design teilen. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 48. Tastaturbefehle: Hi, alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über Tastenkombinationen in Figma sprechen. Als Designer ist es so wichtig, die wichtigsten Verknüpfungen der Plattform zu kennen , die Sie für die Gestaltung verwenden. Aufgrund der Tatsache, dass Figma eine plattformübergreifende Software ist, ist es zu schwierig, all diese Verknüpfungen in einem Video abzudecken. Anstatt jedoch all diese Verknüpfungen zu erwähnen und zu diskutieren, werde ich Ihnen einen sehr guten und schnellen Weg zeigen, wie Sie die Verknüpfungen herausfinden können, die Sie für Ihren Workflow benötigen. ob Sie macOS oder Windows verwenden, können Sie diese Methode in beiden Betriebssystemen verwenden. Wie Sie rechts unten sehen können, gibt es ein Fragezeichen-Symbol, es heißt Hilfe und Ressourcen. Wenn ich darauf klicke, können Sie sehen, dass es viele weitere Optionen gibt. Einer von ihnen sagt Tastaturkurzbefehle, und das ist genau das, was wir brauchen. Lassen Sie uns auf diese Tastenkombinationen klicken. Da gehen wir hin. Jetzt haben wir Zugriff auf all diese Verknüpfungen an einem einzigen Ort. Wie Sie sehen können, ist es in verschiedenen Abschnitten kategorisiert, wie Essential, Tools, Ansicht , Zoom, Text, Form, etc. Da ich macOS verwende, zum Beispiel hier zeigt es mir Befehlstaste, aber wenn Sie unter Windows, sehen Sie sicher Control hier. Oder zum Beispiel, wenn ich zu View gehe, hier habe ich Befehl; für Sie, wenn Sie Windows verwenden, ist es Control sicher. Auf diese Weise können Sie leicht die Tastenkombinationen finden, die Sie benötigen. Aber jetzt werde ich einige der wichtigsten Verknüpfungen erwähnen , die Sie für diesen Kurs benötigen. Beginnen wir mit dem Kopieren und Einfügen. Wie andere Software zum Kopieren und Einfügen können Sie einfach Ihr Element wie diesen Text auswählen und Befehl C verwenden. Wenn Sie es einfügen möchten, können Sie Befehl V in macOS verwenden. Wenn Sie Windows verwenden, können Sie jedoch Steuerelement C und Steuerelement V drücken, und Sie erhalten das gleiche Ergebnis. Wenn ich diese Ebenen gruppieren möchte, zum Beispiel diese Windows und macOS so, kann ich Befehl G auf meiner Tastatur drücken. In Windows können Sie jedoch die Steuerung G drücken. Wenn Sie etwas duplizieren möchten, können Sie die gewünschte Ebene auswählen und Befehlstaste D in macOS drücken. Wenn Sie Windows verwenden, können Sie stattdessen die Steuerungstaste D drücken. etwas zu skalieren, können Sie entweder hier gehen und das Skalierungswerkzeug auswählen, oder Sie können K auf der Tastatur drücken. Dabei spielt es keine Rolle, ob Sie macOS oder Windows verwenden, da Sie keine Befehls- oder Steuerungstasten verwenden müssen. Sie müssen nur K auf Ihrer Tastatur drücken. Wie Sie jetzt sehen können, ist das Skalierungswerkzeug ausgewählt. Letzt, wenn Sie die Pads und Ränder überprüfen möchten, können Sie die Wahltaste auf Ihrer Tastatur halten, wenn Sie macOS so verwenden, und mit der Maus auf andere Elemente in der Nähe Ihrer ausgewählten Elemente bewegen. Wie Sie sehen können, habe ich jetzt diese Zahl, die mit einem roten Text angezeigt wird, und dies ist die Polsterung zwischen diesen beiden Elementen. In Windows können Sie die Alt-Taste auf der Tastatur gedrückt halten und dasselbe tun. Wenn Sie verkleinern möchten, können Sie die Befehlstaste gedrückt halten und so scrollen, verkleinern und vergrößern. In Windows können Sie die Steuerungstaste gedrückt halten und dasselbe tun. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 49. Einführung in UI-Elemente: Hallo an alle. Willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Abschnitt werden wir über UI-Elemente sprechen, die so wichtig sind, wenn Sie eine Benutzeroberfläche entwerfen. In der nächsten Reihe von Videos werden wir über Textfelder, Schaltflächen, Schieberegler, Karten, Dialoge oder sogar Stepper und Charts sprechen. Wenn Sie über all diese Elemente verwirrt sind, schlage ich vor, dass Sie sich diesen Abschnitt ansehen. Wir sehen uns in der nächsten Reihe von Videos. 50. Textfelder: Hey, alle, willkommen zurück zu einem anderen Video von diesem Abschnitt. In diesem Video werden wir über Textfelder sprechen. Wie Sie vielleicht wissen, sind Textfelder UI-Elemente, denen Benutzer einen Text in eine Benutzeroberfläche eingeben können. Sie erscheinen normalerweise in Dialogen und Formularen. Fast alle mobilen Apps und auch Websites verwenden mindestens eine Art von Textfeldern. Zum Beispiel können Sie sie für die Eingabe von Daten, Namen, Uhrzeit usw. verwenden. Als UI-Designer müssen Sie die Anatomie eines Textfelds kennen, wie im Bild beschrieben. Sie können verschiedene Arten von Textfeldern auf verschiedenen Plattformen finden. Es wird daher empfohlen, sich über die Standard-UI-Elemente zu informieren , die ein bestimmtes Betriebssystem verwendet. Wenn Sie sich das Bild auf der rechten Seite ansehen, können Sie sehen, dass wir die Anatomie eines Textfeldes haben. Wie Sie sehen können, haben wir Label, wir haben den Eingabetext, wir haben das nachfolgende Symbol, das optional ist, wie Sie sehen können, ist es Nummer drei. Außerdem haben wir Aktivierungsindikator. Manchmal können Sie Spracheingabesymbol oder sogar ein Dropdown-Symbol verwenden. Am Ende können Sie sehen, dass wir verschiedene Zustände eines Textfelds entwerfen. Wenn der Benutzer beispielsweise das Kennwort falsch eingibt, ändert sich die Farbe des Textfelds möglicherweise in etwas anderes, zum Beispiel rot. 51. Knöpfe: He, alle. In diesem Video werden wir über Schaltflächen im Design sprechen. Mit Schaltflächen können Benutzer Aktionen ausführen Wenn ein Benutzer etwas tun muss, kommen Schaltflächen ins Spiel. Ich denke, jetzt verstehen Sie, wie wichtig es ist, über die Gestaltung von Schaltflächen zu wissen. Sie beim Entwerfen einer Schaltfläche darauf, dass Sie auf die folgenden Punkte achten. Nummer 1, Bundesstaaten. Entwerfen Sie alle Zustände der Schaltfläche, wie aktiv, inaktiv, getippt, Hover usw. Nummer 2, Hierarchie. Informieren Sie sich über die Hierarchie Ihrer Schaltflächen. Zum Beispiel, ob es sich um hohe Betonung, mittlere Betonung oder geringe Betonung handelt. Nummer 3, Platzierung. Mehrere Tastentypen können verwendet werden, um verschiedene Hervorhebungsebenen darzustellen. Nummer 4, Textknopf. Textschaltflächen werden in der Regel für weniger ausgeprägte Aktionen verwendet , z. B. in Dialogen und Karten und nicht zuletzt im Kontrast. Tasten sollten genügend Kontrast haben, um die Wichtigkeit ihrer Funktionalität auszudrücken. Wenn Sie sich das Bild auf der rechten Seite ansehen, können Sie sehen, dass wir verschiedene Zustände einer Schaltfläche haben. Zum Beispiel haben wir aktiv, wie Sie sehen können, hat es eine scharfe Farbe und die Deckkraft beträgt 100 Prozent. Auf der anderen Seite haben wir inaktiv zu zeigen, dass diese Schaltfläche für jetzt deaktiviert ist, die hier grau ist. Auch wir haben getippt, so dass, wenn der Benutzer auf diese Schaltfläche tippt, es ändert sich zu dieser bestimmten Farbe. Wie Sie sehen können, haben wir das ist hellblau und am Ende, wie Sie sehen können, haben wir vier verschiedene Tasten. Wir haben Text-Schaltfläche, auch wir haben Gliederungsschaltfläche, und dann enthalten Schaltfläche, und auch Umschaltfläche. Sie müssen sie sorgfältig verwenden, wenn Sie eine Benutzeroberfläche entwerfen, da es so wichtig ist , die Erwartungen des Benutzers zu kennen und auch in Bezug auf die Benutzererfahrung, ist es besser, den richtigen Typ der Schaltfläche in Ihrem Design zu verwenden. 52. Slider: He, alle. In diesem Video werden wir über Schieberegler im Design sprechen. Schieberegler ermöglichen es Benutzern, eine Auswahl aus einem Wertebereich zu treffen. Sie sind ideal zum Einstellen von Einstellungen wie Helligkeit, Lautstärke usw. Schieberegler können Symbole auf beiden Seiten der Leiste haben. Sie beim Entwerfen eines Schiebereglers darauf, auf die folgenden Dinge zu achten. Nummer 1, Bundesstaaten. Entwerfen Sie alle Zustände des Schiebereglers, wie Aktivieren, Deaktivieren , Tippen, Hover usw., genau wie Schaltflächen. Nummer 2, Einstellen. Schieberegler sollten nur verwendet werden, um Auswahlen aus einem Wertebereich auszuwählen. Nummer 4, Schnelligkeit. Schieberegler sollten sofort reagieren, so dass Änderungen sofort und nicht zuletzt die Zugänglichkeit erfolgen müssen . Schieberegler sollten die gesamte Palette von Auswahlmöglichkeiten für den Benutzer zur Auswahl zur Verfügung stellen. Wenn Sie sich das Bild auf der rechten Seite ansehen, können Sie sehen, dass wir zwei verschiedene Schieberegler haben. Der erste ist kontinuierliche Schieberegler. Wie Sie in dieser Art von Schieberegler sehen können, können Sie es kontinuierlich und ohne Unterbrechung ändern. Auf der anderen Seite, in der zweiten Art von Schiebereglern, die diskrete Schieberegler, können Sie es nicht ohne Unterbrechung ändern. Es gibt einige feste Punkte, aus denen der Benutzer wählen kann. 53. Tooltipps: He, alle. In diesem Video werden wir über Tooltips im Design sprechen. QuickInfos dienen zum Anzeigen informativer Texte, wenn Benutzer den Mauszeiger über ein Element bewegen, sich darauf konzentrieren oder tippen. Sie beim Entwerfen einer QuickInfo darauf, dass Sie auf die folgenden Dinge achten. Nummer 1, Prägnanz. QuickInfos sollten nur einen kurzen Text anzeigen. Fügen Sie kein Bild oder detaillierte Informationen hinzu. Nummer 2, Paarung. QuickInfos werden immer in der Nähe des Elements, mit dem sie verknüpft sind, gekoppelt. Zu guter Letzt, vorübergehender. QuickInfos werden beim Hover, Fokussieren oder Berühren angezeigt und verschwinden nach kurzer Dauer. Die empfohlene Zeit beträgt 1,5 Sekunden. Wie Sie auf der rechten Seite sehen können, haben wir einen Tooltip, der informativen Text zeigt. Wir haben eine Abkürzung für fett, und auch wir haben zusätzliche Informationen hier, speichern Sie für Bestätigen Schaltfläche. Stellen Sie sicher, dass Sie sie richtig verwenden. 54. Selection: Hallo an alle. In diesem Video werden wir über Auswahlsteuerelemente sprechen. Auswahlsteuerelemente ermöglichen es Benutzern, einfach zwischen verschiedenen Optionen auszuwählen. Es ist nützlich, um Voreinstellungen wie Einstellungen zu deklarieren. Sie beim Entwerfen des Auswahlsteuerelements darauf, dass Sie auf die folgenden Punkte achten. Nummer 1, Vertrautheit. Auswahlsteuerelemente werden im UI-Design für eine lange Zeit verwendet und sollten wie erwartet verwendet werden. Nummer 2, Effizienz. Auswahlsteuerelemente führen Benutzer leicht zu vergleichen zwei oder mehr Optionen. Zu guter Letzt, scanbar. Auswahlsteuerelemente sollten so angezeigt werden, dass Benutzer sie auf einen Blick erkennen können. Ausgewählte Elemente sollten visuell von nicht ausgewählten Elementen unterschieden werden. Wie Sie auf der rechten Seite des Bildschirms sehen können, haben wir drei verschiedene Auswahlsteuerelemente. Der erste ist Schalter. Es ist nützlich, um eine einzelne Option ein- oder auszuschalten, und es ist so beliebt. Der nächste ist die Optionsfelder. Sie sind nützlich, um eine einzelne Option aus einer Liste auszuwählen. Das letzte ist das Kontrollkästchen, und es ist nützlich, um ein oder mehrere Elemente aus einer Liste auszuwählen. Stellen Sie sicher, dass Sie sie auf eine richtige Weise verwenden. 55. Chips: Hey, alle. In diesem Video werden wir über Chips sprechen. Chips ermöglichen es Benutzern, Auswahlen zu treffen, Aktionen auszulösen, Informationen einzugeben usw. Im Gegensatz zu Schaltflächen, die ein konsistenter Call-to-Action sein sollten, sollten Chips dynamisch als eine Gruppe mehrerer interaktiver Elemente erscheinen. Wenn Sie einen Chip entwerfen, achten Sie darauf, auf die folgenden Dinge zu achten. Nummer 1, Bundesstaaten. Genau wie Schaltflächen und Schieberegler, müssen Sie alle Zustände Ihrer Chips entwerfen, wie aktivieren, deaktivieren, tippen, Hover usw. Nummer 2, Relevanz. Chips sollten eine hilfreiche Beziehung zu dem Inhalt oder der Aufgabe haben, die sie darstellen. Die letzte, Kompaktheit. Chips sind kompakte Elemente, die unterschiedliche Informationen darstellen. Wenn Sie sich das Bild auf der rechten Seite ansehen, können Sie sehen, dass wir verschiedene Chips haben. Einige von ihnen haben Symbole oder sogar ein Bild. Auf der anderen Seite haben einige von ihnen nur einen Text. Stellen Sie sicher, dass Sie sie in Ihrem UI-Design sorgfältig verwenden. 56. Karten: Hey, alle. In diesem Video werden wir über Karten im User Interface Design sprechen. Karten sind Container, die Inhalte und Aktionen zu einem einzelnen Thema anzeigen. Sie müssen leicht zu scannen sein, und Elemente wie Bilder oder Texte sollten in einer Weise darauf platziert werden, die sicherlich die Hierarchie anzeigt. Sie beim Entwerfen von Karten darauf, auf die folgenden Dinge zu achten. Nummer 1, einzeln, eine Karte kann nicht in mehrere Karten unterteilt werden. Sie sollten eine Karte nicht mit einer anderen zusammenführen. Nummer 2, Unabhängigkeit. Eine Karte muss sich nicht auf ihre umgebenden Elemente verlassen. Es kann allein stehen. Zu guter Letzt Komponenten. Eine Karte kann optional Rich Media wie Bilder oder Videos, Texte, Schaltflächen, Symbole und Miniaturansichten haben. Heutzutage verwenden die meisten Designer Karten in ihrem UI-Design. Also, wenn Sie sie auch verwenden möchten, achten Sie darauf, sie sorgfältig zu verwenden. 57. Dialogs: Hallo an alle. In diesem Video werden wir über Dialoge sprechen. Dialoge informieren Benutzer über kritische Informationen oder sogar Aufgaben. Sie fordern Benutzer auch auf, eine Entscheidung zu treffen oder zwischen verschiedenen Optionen zu wählen. Zum Beispiel können Dialoge verwendet werden, um um Erlaubnis zu fragen oder sogar aus einer Reihe von verschiedenen Variablen auf einem Schieberegler und vieles mehr auszuwählen. Sie beim Entwerfen von Dialogen darauf, Folgendes zu beachten: Nummer 1, Hierarchie. Ein Dialogfeld hat die höchste Hierarchie und blockiert die App-Nutzung, bis der Benutzer eine Dialogaktion ausführt. Nummer 2, Sichtbarkeit. Ein Dialog muss leicht erkennbar sein. Ich empfehle, der Ansicht ein dunkles Overlay hinzuzufügen und den Dialog darüber zu setzen. Nummer 3, unkompliziert. Ein Dialog sollte die Nachricht auf verständliche und übersichtliche Weise vermitteln. Zu guter Letzt Knöpfe. Ich empfehle, Side-by-Side-Schaltflächen in einem Dialogfeld zu verwenden, wie Sie im Bild sehen können. 58. Listen: He, alle. In diesem Video werden wir über Listen sprechen. Listen sind eine fortlaufende Gruppe von Bildern oder Texten. Sie bestehen aus Elementen, einschließlich primärer und sekundärer Aktionen, die durch Symbole und Text dargestellt werden. Sie beim Entwerfen von Listen darauf, dass Sie auf die folgenden Punkte achten. Nummer 1, Konsistenz. Listen müssen Symbole, Tags und Aktionen in einem konsistenten Format enthalten . Nummer 2, Aktion. Listen zeigen den Inhalt so an, dass es leicht macht, ein bestimmtes Element in der Sammlung zu erkennen und darauf zu reagieren. Zu guter Letzt, scanbar. Listen sollten auf logische Weise klassifiziert werden, damit Inhalte leicht gescannt werden können. Wie Sie auf der rechten Seite des Bildschirms sehen können, haben wir verschiedene Arten von Listen. Zum Beispiel haben wir hier Ihre Kontakte. Wie Sie sehen können, besteht es aus Bildern und Tags und hat auch ein Symbol. 59. Tabellen: He, alle. In diesem Video werden wir über Tische sprechen. Tabellen sind Container, die die unterschiedlichen Datensätze der Benutzer anzeigen, z. B. Produkte, Preise, Status, Datumsangaben usw. Eine Datentabelle enthält oben eine Kopfzeile, in der Spaltennamen gefolgt von Zeilen für Daten aufgelistet werden. Sie sind in der Regel scrollbar und einfach zu scannen. Wenn Sie einige Daten füllen müssen, die sortierbar sind und demselben Muster folgen, können Sie Tabellen verwenden. Sie beim Entwerfen von Tabellen darauf, dass Sie auf die folgenden Dinge achten. Nummer 1, erweiterbar. Zeilen in einer Tabelle können erweiterbar sein, damit der Benutzer zusätzliche Informationen auswerten kann, ohne seinen Kontext zu verlieren. Nummer 2, Paginierung. Paginierung funktioniert, indem die Menge von Zahlen in einer Ansicht mit der Möglichkeit, zu einem anderen Satz zu navigieren. Schließlich wurden Kopfzeilen behoben. Das Fixieren der Zeilenüberschrift, während ein Benutzer durch eine Tabelle blättert , hilft dem Benutzer, über den Spaltennamen zu wissen. 60. Navigation: Hey, alle. In diesem Video werden wir über Navigation sprechen. Navigation ist der Akt des Verschiebens zwischen Bildschirmen einer App, um Aufgaben zu erledigen. Sie können beispielsweise von der Seite „Durchsuchen“ einer App zur Seite „Profil“ navigieren. Es gibt verschiedene Arten der Navigation. Nummer 1, seitlich, es bezieht sich auf die Bewegung zwischen den Bildschirmen auf der gleichen Ebene der Hierarchie. Die Haupt-App-Navigationskomponente sollte Zugriff auf alle Ziele auf der obersten Ebene ihrer Hierarchie bieten. Nummer 2, vorwärts, es bezieht sich auf die Verschiebung zwischen Bildschirmen auf aufeinanderfolgenden Ebenen der Hierarchie. Last but not least, umgekehrt, es bezieht sich auf die Rückwärtsbewegung durch Bildschirme entweder hierarchisch innerhalb einer App oder chronologisch innerhalb einer App oder über verschiedene Apps. 61. Menüs: Hallo an alle. In diesem Video werden wir über Menüs im User Interface Design sprechen. Ein Menü zeigt eine Liste der Auswahlmöglichkeiten auf einer provisorischen Oberfläche an. Es wird angezeigt, wenn Benutzer mit einer Schaltfläche, einer Aktion oder anderen Arten von Steuerelementen interagieren . Menüs ermöglichen es Benutzern, eine Auswahl aus mehreren Optionen zu treffen. Im Gegensatz zu Auswahlsteuerelementen sind Menüs weniger herausragend und benötigen weniger Platz. Sie beim Entwerfen von Menüs AchtenSie beim Entwerfen von Menüsauf die folgenden Punkte. Nummer 1, scanbar; Menüoptionen sollten einfach zu scannen sein. Nummer 2, schnell; Menü sollte einfach zu öffnen, schließen und zu interagieren sein. Nicht zuletzt die Platzierung; Menüs erscheinen vor allen anderen UI-Elementen. 62. Diagramme: Hallo an alle. In diesem Video werden wir über Charts sprechen. Diagramme helfen Benutzern, Werte auf visualisierte Weise zu vergleichen. Wenn es darum geht, viele Werte zu vergleichen, ist es viel einfacher, Diagramme anstatt Zahlen in einem Raster zu betrachten. Sie beim Entwerfen von Diagrammen darauf, auf die folgenden Dinge zu achten. Nummer 1, Sichtbarkeit. Die Sichtbarkeit eines Diagramms ist so wichtig, weil manchmal ein Diagramm mit sehr kleinen Details vorhanden ist. Nummer 2, Konsistenz. Legen Sie Ihre Diagramme auf eine Karte, um Ihr Design sauber und konsistent zu halten. Schließlich, Margen. Stellen Sie sicher, dass zwischen den Diagrammen und anderen Elementen genügend Leerraum vorhanden ist. Später in diesem Kurs erfahren Sie, wie Sie Diagramme erstellen und wie Sie sie in Ihren Projekten verwenden. 63. Überstände: Hallo an alle. In diesem Video werden wir über Stepper sprechen. Stepper zeigen den Fortschritt durch eine Sequenz von logischen und nummerierten Schritten. Manchmal können Sie sie für die Navigation verwenden. Stepper können eine temporäre Feedback-Nachricht anzeigen, nachdem ein Schritt gespeichert wurde. Verwendung von Stepper könnte den Benutzern helfen, ihren Fokus zu vermeiden, wenn sie Formulare ausfüllen oder Maßnahmen ergreifen müssen. Sie beim Entwerfen von Stepper darauf, auf die folgenden Dinge zu achten. Nummer 1, Abschnitte. nicht in andere Stepper einbetten oder mehrere Stepper auf einer Seite verwenden. Nummer 2, Typen. Im Allgemeinen gibt es zwei Arten von Schritten: editierbare Schritte und nicht bearbeitbare Schritte. Wir haben horizontale Stepper und vertikale Stepper. Schließlich, Feedback. Optional können Sie transiente Rückmeldungen entwerfen, um den Benutzern den Fortschritt anzuzeigen. Sie sollten Feedback nur dann verwenden, wenn zwischen den Schritten eine Zeilenlatenz besteht. 64. Snackbars: Hallo an alle. In diesem Video werden wir über Snackbars sprechen. Snackbars geben über eine Meldung am unteren Bildschirmrand ein knappes Feedback zu einer Operation. Sie sollten eine einzelne Textzeile enthalten, die direkt mit der durchgeführten Operation in Verbindung steht. Sie können auch eine Schaltfläche enthalten. Sie beim Entwerfen von Snackbars darauf, auf die folgenden Punkte zu achten. Nummer 1, es sollte kurz sein. Snackbars sollten nur kurze Informationen über eine Operation und keine detaillierten Informationen anzeigen . Nummer 2, Transient. Snackbars Timeout automatisch vom Bildschirm, so dass sie schnell verschwinden sollten. Zu guter Letzt, Hierarchie. Wenn die Aktion wichtig genug ist, um die App-Nutzung zu blockieren, können Sie Dialoge anstelle von Snackbars verwenden. Die Snackbars verwenden nur eine Taste, wenn sie benötigt wird, und nicht mehr. Wie Sie auf der rechten Seite des Bildschirms sehen können, haben wir zwei verschiedene Beispiele. Die erste Gruppe von Snackbars ist perfekt entworfen, weil es nicht mehr als eine Taste hat und die Farben, die verwendet wurden, sind großartig. Auf der anderen Seite hat die zweite Gruppe unserer Snackbars jedoch zwei Knöpfe, die nicht ideal für Snackbars sind. Es hat auch ein Symbol neben dem Text verwendet. 65. Was ist Wireframing?: Hi, alle. In diesem Video werden wir über Wireframing sprechen. Wireframing ist eine Möglichkeit, eine App oder Website-Dienste auf struktureller Ebene zu entwerfen. Ein Wireframe wird in der Regel verwendet, um Inhalte und Funktionalitäten auf einer Seite zu erstellen, die Benutzerbedürfnisse und Erfahrungen berücksichtigen. Wir können ein grafisches Skelett in Erwägung ziehen. Ähnlich wie beim Entwurf eines Autos bestimmt der Drahtkörper die Details des gesamten Projekts in der Anfangsphase als Projektbeschreibung. Die meisten Anfänger denken, dass Wireframing und Prototyping irgendwie gleich sind, sind sie jedoch nicht. Ein Drahtmodell ist ein Low-Fidelity-Design, so dass es nicht das endgültige Erscheinungsbild der Benutzeroberfläche veranschaulicht. Auf der anderen Seite ist ein Prototyp ein High-Fidelity-Design und es ist dynamisch und interaktiv. Prototyping sieht fast wie das Endprodukt aus. 66. User: Hallo an alle. In diesem Video werden wir über Benutzerfluss sprechen. Benutzerfluss ist ein Pfad, der von einem prototypischen Benutzer in einer App oder Website verwendet wird, um eine Aufgabe abzuschließen. Der Benutzerfluss leitet sie von ihrem Einstiegspunkt durch eine Reihe von Phasen hin zu einem erfolgreichen Ergebnis und einer abschließenden Aktion, z. B. dem Senden einer Nachricht oder dem Kauf eines Artikels. Lassen Sie mich Ihnen ein Beispiel für einen sehr vereinfachten Benutzerfluss für eine E-Commerce-App geben. Der Benutzer startet von der Homepage. Von der Startseite aus klickt der Benutzer auf eine „Kategorie“ -Seite. Dann klickt der Benutzer auf der Kategorie-Seite auf ein „Produkt“. Dann fügt der Benutzer auf der Produktseite einen Artikel in den Warenkorb und dann aus dem Warenkorb, checkt der Benutzer aus. Danach schließt der Benutzer von der Checkout-Seite die Zahlung ab und am Ende kann der Benutzer seine Quittung erhalten. So sieht ein Benutzerfluss aus und es ist sehr wichtig jedes Projekt mindestens einen vereinfachten Benutzerablauf hat. 67. Interaktive Prototypen: Hi, alle. In diesem Video werden wir über interaktive Prototypen sprechen. Heute spielt das Prototyping eine immer wichtigere Rolle im Designprozess. Sie als UI/UX-Designer müssen wissen, wie Sie einen High-Fidelity-Prototyp Ihres Projekts so erstellen können, dass er die Botschaft Ihres Designs und auch die genaue Interaktion, die Sie erreichen möchten, deutlich vermitteln kann. Prototyping kann nicht nur Ihnen als Designer helfen, Ihre Arbeit zu zeigen, sondern es kann auch Entwicklern helfen zu wissen, wie Ihr Design in Code umgewandelt werden soll. Hier sind einige nützliche Tools, die Sie für das interaktive Prototyping verwenden können. Sketch, kann es für einfaches interaktives Prototyping verwendet werden. InVision Studio kann es für modernes und kompliziertes interaktives Prototyping verwendet werden. Prinzip, es kann für moderne und detaillierte interaktive Prototyping verwendet werden , und vieles mehr. Zum Beispiel können Sie ProTopie auch für fortgeschrittenes Prototyping verwenden. 68. Wireframe: Hallo an alle. In diesem Video werde ich über Wireframe-Tools sprechen. Jetzt, da Sie wissen, wie wichtig das Wireframing im UI-UX-Design ist, ist es an der Zeit, über die Tools zu sprechen, die für die Vorbereitung Ihres Drahtmodells absolut nützlich sind . Obwohl einige Designer es vorziehen, eigenständige Software für Wireframing zu verwenden, gibt es Designer, die webbasierte Tools für Wireframing verwenden. Egal, auf welche Art und Weise Sie sich entscheiden möchten, stellen Sie sicher, dass Ihr Wireframing konsistent bleibt. Hier sind einige nützliche Tools, die Sie für das Wireframing verwenden können. Nummer 1, MockFlow, können Sie mockflow.com verwenden, und es bietet eine Vielzahl von kostenlosen und kostenpflichtigen Dienstleistungen. Nummer 2, Figma, können Sie figma.com verwenden, und es bietet auch kostenlose und kostenpflichtige Dienste. Nummer 3, Skizze, es ist eine kostenpflichtige Anwendung, und last but not least, Adobe XD, die kostenlos ist, und Sie können es auf MacOS und Windows installieren. 69. Wireframing: Hallo, alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über Wireframing in Figma sprechen. Wie ich bereits in früheren Videos erwähnt habe, ist das Erstellen eines Low-Fidelity-Wireframes eine wichtige Aufgabe für einen UI-UX-Designer. In diesem Video zeige ich Ihnen, wie Sie mit einem vorgefertigten Wireframe-UI-Kit von Figma Ihren eigenen Wireframe erstellen können . Zunächst werde ich Sie bitten, diese URL, figma.com/templates/wireframe-kits, zu öffnen . Auf dieser Seite finden Sie diese Wireframe-Kits, die von Figma entworfen wurden und wenn Sie ein wenig nach unten scrollen, können Sie eine kostenlose Kopie davon bekommen. Klicken Sie darauf und dann sehen Sie so etwas. Dies ist ein vorgefertigtes Wireframe-UI-Kit, das von Figma entworfen wurde und ich werde Ihnen zeigen, wie Sie dies verwenden können. Zunächst einmal, wie Sie sehen können, haben Sie drei verschiedene Seiten. starten, bauen Sie Ihr eigenes und Beispiel. Auf der Startseite, wenn ich ein wenig zoomen, können Sie sehen, dass Sie einige Informationen über all diese Komponenten haben. Zum Beispiel haben wir Tasten und Karten, wir haben Navigation, wir haben hier Abschnitte, wir haben soziale Beweis, wir haben Funktionen links, Funktionen rechts, etc. Dann haben wir Ihre eigenen und Beispiele zu bauen. Öffnen wir „Bauen Sie Ihre eigenen“. Hier haben Sie einen Rahmen. Ich werde diese Komponente löschen und annehmen, dass wir einen Wireframe für eine Website erstellen werden. Zuallererst brauchen wir einen Heldenbereich. Ich kann leicht zu Assets gehen. Hier habe ich viele Komponenten. Ich habe Helden, ich habe Fußzeile, Funktionen rechts, Funktionen links, CTA, etc. Beginnen wir mit Helden und hier habe ich drei verschiedene Optionen. Ich fange mit dem ersten an. Lass es uns hierher ziehen. Ich werde es hier setzen und es an der Mitte ausrichten. Perfekt. Wie Sie sehen können, ist es das Heldenzentrum. Ich kann leicht zum Abschnitt „Instanz“ des Inspektors gehen. Ich kann dieses Drop-Menü öffnen und von hier aus kann ich es ändern, was ich will. Zum Beispiel kann ich es in Helden-Side-Bild wie folgt ändern. Ich bevorzuge dieses, weil ich auch ein Bild habe. Bleiben wir bei diesem hier. Dann werde ich die Höhengröße meines Rahmens erhöhen. Vergrößern wir es ein wenig, um mehr Platz zum Arbeiten zu haben. Perfekt. Danach werde ich einige Funktionen hinzufügen. Lassen Sie uns Funktionen öffnen. Ziemlich gut. Ich werde das hier benutzen. Fantastisch. Da es sich um ein Low Fidelity Wireframe handelt, brauchen Sie sich keine Sorgen um all diese Informationen, all diese Farben. Halten Sie es so einfach wie möglich. Dann werde ich ein paar Beiträge hinzufügen. Öffnen wir den Pfostenbereich. Von hier aus kann ich Post Tail so verwenden. Natürlich können Sie diese Tags und all diese Inhalte bearbeiten, wenn Sie möchten. Danach werde ich einige soziale Beweise wie Testimonial hinzufügen. Lasst uns das hier benutzen, es sieht gut aus. Danach brauche ich einen CTA. Öffnen wir CTA und ich werde CTA Center wählen. Ziemlich gut. Ich muss die Höhe meines Rahmens erhöhen. Lassen Sie mich es auswählen. guter Letzt werde ich eine Fußzeile hinzufügen, weil es notwendig ist, eine zu haben. Lassen Sie uns diese Fußzeile voll verwenden. Fantastisch. Das ist alles. Wie Sie sehen können, habe ich keine Navigation hinzugefügt. Aber es ist notwendig, eine zu haben, also gehen wir und fügen Sie eine Navigation hinzu. Ich denke, diese Navigation ist eine großartige Option wie diese. Fantastisch. Jetzt muss ich meine Größe verringern und das ist alles. Jetzt, wenn ich es Vorschau, können Sie sehen, dass ich die Navigation habe. Wie Sie sehen können, habe ich ein Logo, einige Menüs an der Spitze dann habe ich einen Registrierungsknopf. Hier habe ich meinen Heldenbereich, der aus einigen Tags und einem CTA und auch einem Bild besteht. Dann habe ich meine Schlüsselfunktion wie diese. Danach präsentiere ich eine Pose und dann habe ich den sozialen Beweis. Es könnten Bewertungen, Zeugnisse, alles sein. Dann habe ich hier noch einen CTA, der meine letzte CTA ist. Danach haben wir eine Fußzeile hinzugefügt. Hier habe ich alle Links zu meiner Website. Leute, habt ihr gesehen, wie einfach es ist, euren eigenen Wireframe in Figma zu erstellen? Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 70. Was ist ein Farbstil?: Hi. Willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Video werden wir über den Farbstil sprechen. Was ist ein Farbstil? In der Tat hat jede Marke eine Reihe von Farben, an denen sie sich halten. Zum Beispiel, wenn du an Twitter denkst, bin ich mir ziemlich sicher, dass du blau denkst. In diesem Abschnitt werden wir unseren eigenen Farbstil erstellen, oder sagen wir unseren eigenen Styleguide, der uns während unseres Designprozesses hilft. Ich werde Sie im nächsten Video sehen. 71. Primary, Accent, semantische Farben: Hallo, alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir anfangen, unseren Styleguide oder unser Designsystem zu erstellen, was sehr wichtig ist, wenn Sie an einem komplexen Projekt arbeiten möchten. Zuerst mag es scheinen, dass es viel zu tun gibt, aber es lohnt sich. Zuerst brauchen wir eine Zeichenfläche. Wie Sie sehen können, habe ich eine MacBook Pro Zeichenfläche erstellt, und ich werde seinen Namen in Farben ändern. Schön. Dann gehen wir weiter und fügen Sie ein Rechteck wie dieses ein. Ich werde den Eckenradius erhöhen, um ihn runder zu machen, vergrößern, um ihn kleiner zu machen, die Breite wird fünf sein und die Höhe wird 64 sein. Ich werde die Farbe auf 41, 35 und F3 ändern. Ziemlich nett. Dann lass es mich ein wenig auf die linke Seite schieben. Hier werde ich einen Text einfügen und Farben schreiben. Ich werde SF Pro Rounded verwenden. Ziemlich nett. Lassen Sie uns seine Größe auf 24 Punkte erhöhen und es wird regelmäßig sein. Ich werde jedoch den Farbcode in 4A, 4A und 4A ändern . Lassen Sie mich es vertikal ausrichten und ich werde es ein wenig kleiner machen. Ich werde das gruppieren. Fantastisch. Jetzt müssen wir unsere Abschnitte erstellen, da wir in Farben verschiedene Abschnitte haben. Zum Beispiel haben wir Primärfarben, wir haben Akzentfarben und wir haben semantische Farben. Natürlich können Sie auch Hintergrundfarben haben. In diesem Tutorial werden wir jedoch primäre, akzent- und semantische Farben erstellen . Nun, ich brauche eine Zeile wie diese. Ich werde Shift halten und ich werde die Farbe in E4, E4 und E4 ändern , so, dann muss ich einen Text hinzufügen. Lasst uns Primärfarben schreiben. Ich werde die gleiche Farbe wählen, die ich für diesen Text verwendet habe. Lassen Sie uns diesen Textfarbcode kopieren und einfügen. Fantastisch. Ich werde sie nach links ausrichten und seine untere Polsterung wird acht Pixel betragen. Lasst uns sie gruppieren, und ich nenne es „Primary Colors“. Fantastisch. Es ist ziemlich nett. Dann muss ich hier ein Quadrat erstellen und es abgerundet machen. Fantastisch. Dann müssen wir die Farbe auf 41, 35 und F3 ändern. Eigentlich ist dies die Farbe, die ich in diesem Tutorial verwenden möchte. Sie können verschiedene Farben für Ihr Designsystem verwenden. Denken Sie daran, dass Sie sie immer ändern können. Wenn Sie sich nicht sicher sind, warum und wie ich diese Farbe wähle, hängt es nur von Ihrem Projekt ab und es dauert einige Zeit, um zu verstehen, wie Sie Ihre Farbpalette richtig erstellen können. Aber jetzt wollen wir uns nur auf die Schaffung unseres Designsystems konzentrieren. Ich werde Ihnen zeigen, wie Sie es richtig machen können. Die Farben spielen keine Rolle. Seine obere Polsterung wird 16 Pixel sein. Ich werde das mit einem linken 16-Pixel-Polsterung duplizieren. Noch einmal, duplizieren Sie das. Wieder mal. Wir haben vier verschiedene Quadrate. Ich werde die zweite auswählen, und ich werde seine Deckkraft auf 75 Prozent so reduzieren. Der dritte, ich werde es auf 50 Prozent ändern, und der letzte, lass es uns auf 25 Prozent setzen. Der Grund, warum ich die Deckkraft geändert habe, ist, weil wir manchmal unterschiedliche Zustände jeder Farbe haben müssen. Wenn Sie zum Beispiel eine Schaltfläche erstellen, kann sie unterschiedliche Zustände haben, z. B. aktiv, [unhörbar] Hover usw. Wenn Sie diese Farbe für den aktiven Zustand verwenden, können Sie andere Farben, wie diese für den Hover-Zustand. Es ist durchaus notwendig, verschiedene Versionen Ihrer Farbe zu haben. Wählen wir nun das erste Quadrat aus. Ich gehe voran und klicke auf diese vier Punkte, und klicke dann auf diesen Plus-Button. Hier werde ich Farben/Primär/Lila 100 Prozent schreiben und Stil erstellen. Fantastisch. Dann die nächste, Farben Primary Purple 75 Prozent. Ich werde es kopieren. Dann wird das nächste 50 Prozent sein, und das letzte wird 25 Prozent sein. Fantastisch. Jetzt wählen wir alle aus. Gruppieren Sie sie, und es wird Primärfarben sein. Halten Sie die Umschalttaste gedrückt und klicken Sie auf diesen Primärfarben-Titel. Noch einmal gruppieren sie und ich werde es nennen, Primary Colors. Dann muss ich es so duplizieren. Ändern wir diesen Namen in Akzentfarben. Ich denke, es ist eine gute Idee, die Schriftgröße ein wenig zu verringern. Zum Beispiel, lassen Sie es auf 20 setzen. Das hier auch. Jetzt ist es besser. Wählen wir nun den ersten aus. Zuerst müssen wir es von seinem Stil lösen, und das Gleiche für andere. Nun wählen wir den ersten aus und ändern dann den Farbcode BE52F und 2. Ziemlich gut. Lassen Sie uns das kopieren und ich werde es für andere einfügen. Fantastisch. Nun müssen wir auch den Farbstil für diese Ecken erstellen. Wiederholen wir den Vorgang. Hier müssen wir Farben schreiben, Akzent Schrägstrich, das ist richtig, Lila 1. Das hier auch. Farben, Akzent, Lila 2. Lassen Sie uns das kopieren. Hier wird es Purple 3 sein. Der letzte sollte Purple 4 sein. Sie können sie so benennen, wie Sie möchten, aber halten Sie sie so organisiert wie möglich. Dann werde ich diese Gruppe in Akzentfarben umbenennen. Fantastisch, und auch dieses. Duplizieren Sie sie noch einmal. Hier wird es Semantic Colors sein. Zuerst müssen wir es von seinem Stil lösen. Wir brauchen diese letzte nicht, weil wir nur drei verschiedene Versionen haben werden. Wählen wir den ersten aus. Ich werde den Farbcode in FFCF und 5C ändern. Ich werde das kopieren und es für andere einfügen. In Ordnung. Lassen Sie uns jetzt voran und erstellen Sie unsere Farbschilder. Lasst uns Colors schreiben, Semantic, und lasst uns Orange eins schreiben. Ich werde das kopieren. Der nächste wird Orange 2 sein, und der letzte, Orange 3. Großartig. Wir brauchen noch eine semantische Farbe, also werde ich sie so duplizieren. Wieder müssen wir sie so von ihrem Stil lösen. Wählen wir den ersten aus. Ich werde den Farbcode auf 00, 84 und F4 setzen. Kopieren wir das und fügen Sie es für andere ein. Fantastisch. Nun, der letzte Schritt ist, unsere Farben Zeichen zu erstellen. Schreiben wir Farben, Semantik, Blau 1 und dann Blau 2 und schließlich blau 3. Wir sind fast fertig. Allerdings werde ich Ihnen etwas zeigen und wir müssen unsere Farbschilder ein wenig anpassen. Nun, da wir diese Farben Stile mit unterschiedlicher Menge an Deckkraft erstellt haben, werden wir einige Probleme haben, wenn wir uns entscheiden, diese Farben auf einem bunten Hintergrund zu verwenden . Nun, da wir sie auf einem weißen Hintergrund verwenden, können wir den Unterschied nicht verstehen. Aber ich werde dir etwas zeigen. Lassen Sie uns hier ein Rechteck erstellen. Ich schiebe es unten unter unsere letzte Gruppe. Wenn ich es schiebe, können Sie sehen, dass sich unsere Farben tatsächlich ändern, weil wir ihre Deckkraft ändern. Aber wir müssen einen weiteren Schritt tun, natürlich, für die ersten Farben ändert sich nichts, weil die Deckkraft dieser ersten Schicht 100 Prozent beträgt. Wie können wir das in Ordnung bringen? Der beste Weg ist, jeden zu wählen. Zum Beispiel, diese, dann gehen Sie zu Farbstil, dann Stil bearbeiten, und wählen Sie die Pipette und klicken Sie auf diese Farbe, und es ist fertig. Lasst uns dasselbe für alle tun. Da gehen wir. Es ist eine großartige Technik, um Ihre Farbstile zu erstellen , da Sie manchmal nicht alle Farben Code haben. In diesem Fall können wir diese Technik verwenden, und dann können Sie die Farben ändern. Ich werde das Gleiche für alle tun. In Ordnung. Es ist erledigt. Wenn ich das gleiche Rechteck wieder so erstelle, und ich werde es direkt unter unsere erste Gruppe setzen, können Sie sehen, dass sich unsere Farben nicht ändern. Von nun an bleiben Ihre Farben erhalten, selbst wenn Sie einen farbenfrohen Hintergrund auf Ihrem Design verwenden . Alles klar, Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 72. Graue Farben und Farbverläufe: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir weiterhin unseren Styleguide erstellen oder sagen wir unser Designsystem zusammen. In diesem Video müssen wir zwei weitere Abschnitte zu unserem Designsystem hinzufügen, bei denen es sich um graue Hintergrundfarben und Farbverlaufsfarben handelt. Um dies zu tun, müssen wir zuerst die Höhe unserer Zeichenfläche so erhöhen. Ich werde einen dieser Abschnitte kopieren und einfügen. Ziemlich nett. Nennen wir es graue Hintergrundfarben. Schön. Ich brauche diese blaue Linie nicht. Jetzt lass mich sie von ihrem Stil lösen. Ziemlich nett. Ich werde den letzten duplizieren, weil ich noch eine Farbe brauche. Fantastisch. Wählen wir nun den ersten aus und ich werde den Farbcode auf 28 , 37 und 4B so ändern. Lassen Sie mich den Farbstil erstellen. Ich werde Farben grau 1 schreiben. Für den zweiten werde ich diesen Farbcode kopieren. Lassen Sie es uns hier einfügen. Ich werde die Deckkraft auf 75 Prozent reduzieren. Danach wählen wir die Pipette und klicken auf diese Farbe. Um die gleiche Farbe mit 100 Prozent Deckkraft zu erhalten. Dann lassen Sie uns die Farbstil-Farben grau erstellen 2. Ich werde das kopieren und wir müssen den Farbcode noch einmal kopieren. Fügen wir es hier mit 50 Prozent Deckkraft ein. Die letzte mit 25 Prozent Opazität wie diese und lassen Sie mich sie ändern. Die letzte noch einmal zur Pipette und wählen Sie die gleiche Farbe. Fantastisch. Lassen Sie uns nun die dritte Farbe Stil Farben grau 3. Lassen Sie uns das kopieren. Die letzte, Farben grau und vier fantastisch. Jetzt werde ich die Gruppe in graue Hintergrundfarben umbenennen. Lassen Sie mich das kopieren und es auch für andere Gruppen einfügen, so. Ziemlich gut. Noch einmal, duplizieren Sie es. Jetzt werde ich es in Farbverlaufsfarben umbenennen. Lassen Sie uns die letzten beiden Farben entfernen, weil ich hier nur zwei Farben brauche. Ich werde den ersten auswählen, ihn vom Stil lösen, den zweiten ebenfalls. Für den ersten werde ich die Farbe von einfarbig zu linear ändern. Wählen wir die erste Farbe aus. Ich werde den Farbcode auf 41, 35 und F3 ändern. Die zweite, erhöhen wir die Deckkraft auf 100 Prozent. Ich werde es auf 71, 68 und F6 ändern . Dann werde ich die Richtung ändern, um so etwas zu bekommen. Ziemlich gut. Dann lassen Sie uns unseren Farbstil erstellen. Ich werde Farben schreiben, Farbverlauf 1. Für die zweite, lasst uns es auch in linear ändern. Die erste Farbe wird BE52 und F2 sein und die zweite Farbe müssen wir die Deckkraft auf 100 Prozent erhöhen. Ich werde den Farbcode auf DB85 und F5 ändern, so. Lassen Sie mich die Richtung ändern. Fantastisch. Wir müssen unsere Farbstil-Farben Farbverlauf 2 erstellen. Letzt Zu guterLetzt sollten wir unsere Gruppe in Farbverlaufsfarben umbenennen. Auch für andere Gruppen. Fantastisch. Leute, jetzt lasst uns unsere Farbverläufe ausprobieren. Ich werde hier ein Rechteck erstellen und unsere Farbverläufe anwenden. Zum Beispiel dieses. Es ist ziemlich fantastisch. Wir können es leicht ändern. Außerdem können wir die Hintergrundfarbe wählen. Ziemlich genial, nicht wahr? Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 73. Grenzen und Schatten: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir unserem Styleguide Grenzen und Schatten hinzufügen. Ohne weitere Umschweife, lasst uns anfangen. Zunächst einmal müssen wir unsere Kunsttafel so duplizieren, und ich werde sie in Grenzen umbenennen und diesen Titel auch in Grenzen ändern. Fantastisch. Ich werde sie alle entfernen, außer dem ersten so, dann lassen Sie mich vergrößern. Ziemlich gut. Ich werde diesen Titel in Grenzen ändern. Lassen Sie uns diese Farben nacheinander von ihrem Stil lösen. Dann muss ich einen Strich hinzufügen, denn für Grenzen müssen wir Schlaganfall haben. Klicken wir auf dieses Plus-Symbol wie folgt. Dann werde ich die Füllung entfernen, ziemlich gut. Lassen Sie mich den Farbcode auf BE52 und F2 wie folgt ändern und den zweiten, lassen Sie mich die Füllung entfernen, Strich hinzufügen, und ich werde den Farbcode in DBA5 und F5 ändern. Der nächste, du wirst dasselbe tun. Der Farbcode wird EEDFF und zwei sein. Wir brauchen nicht den letzten, lassen Sie es uns einfach halten, damit diese drei genug sind. Jetzt ist es an der Zeit, den Rahmenstil zu erstellen. Lassen Sie uns den ersten auswählen, und ich werde auf diese vier Punkte klicken. Genau wie das Erstellen von Farben Stile, hier werde ich Colors/Border/1 schreiben. Lassen Sie uns das kopieren. Der nächste wird Farben/Border/2 sein, und der letzte wird Farben/Border/3 wie folgt sein. Lassen Sie uns eine neue Form erstellen. Ziemlich gut. Ich werde den Stil der Grenzen darauf anwenden. Ich kann Strich hinzufügen und aus Farbstilen kann ich die Rahmenfarbe wie diese auswählen. Lassen Sie uns die Füllung entfernen. Fantastisch. Ich kann es leicht auf die zweite und auf die dritte ändern. Wir müssen Schatten zu unserem Styleguide hinzufügen. Ich denke, es ist eine gute Idee, sie hier in diese Kunsttafel hinzuzufügen. Ich werde diesen Titel in Grenzen und Schatten ändern. Lassen Sie uns auch den Namen der Kunsttafel ändern, Grenzen und Schatten. Fantastisch. Dann müssen wir diese Gruppe in Grenzen umbenennen, auch diese Gruppen. Lassen Sie mich es duplizieren, und schreiben wir Schatten. Du wirst vier verschiedene Arten von Schatten haben. Ich werde den letzten so duplizieren. Fantastisch. Wählen wir den ersten aus, wir müssen sie von ihrem Stil lösen. Ziemlich gut. Lassen Sie uns die erste auswählen und hier werde ich Effekte hinzufügen. Ziemlich gut. Anstelle von Strich lassen Sie uns eine einfarbige Farbe hinzufügen. Ich werde den Strich entfernen und füllen. Gehen wir zu der erweiterten Einstellung hier, und ich werde den Unschärfebetrag auf 10 und den X-Betrag auf eins und Y zu fünf ändern. Lassen Sie uns auch die Deckkraft auf 20 Prozent ändern. Danach können wir einen Effektstil erstellen. Genau wie Farbstile können Sie hier auf dieses Plus-Symbol klicken, und hier schreiben wir Shadows/1 und die zweite ebenfalls. Lassen Sie uns füllen und auch einen Effekt hinzufügen, und dann werde ich die Einstellung ändern. Setzen wir die Unschärfemenge auf 20 und den X-Betrag auf fünf und Y-Betrag auf 10 wie folgt. Lassen Sie uns natürlich die Deckkraft auf 20 Prozent reduzieren. Wieder einmal müssen wir unseren Effektstil erstellen. Ich werde Shadows/2 schreiben. Der nächste, der gleiche Prozess. Ich werde dazu Effekte hinzufügen. Die Unschärfemenge wird 20 sein, das X wird zwei sein, und das Y wird 10 sein. Lassen Sie uns die Deckkraft auf 10 Prozent verringern, und ich werde einen neuen Effektstil erstellen. Lasst uns Shadows/3 schreiben. Der letzte, fügen Sie noch einmal Füllung zu diesen und auch einen Effekt hinzu. Ich werde den Weichzeichnungsbetrag auf 14, das X auf eins und das Y auf fünf setzen das X auf eins . Ich werde die Deckkraft auf 10 Prozent setzen. Fantastisch. Lassen Sie uns unsere Effekte Stil Shadows/4 erstellen. Ziemlich genial. Benennen wir dann die Gruppen in Schatten für alle Gruppen um, denken Sie daran, dass, um unsere Ebenen so organisiert wie möglich zu halten. Ich werde Ihnen zeigen, wie Sie das nutzen können. Lassen Sie uns voran und erstellen Sie eine Form, zum Beispiel ein Quadrat, und dann werde ich die Farbe in so etwas ändern. Wenn ich in diese vier Punkte im Effektebereich klicke, kann man sehen, dass ich vier verschiedene Schatten habe. Ich kann auf einen klicken, und da gehen wir. Ich kann es leicht in alles ändern, was ich will. Es ist ziemlich cool, nicht wahr? Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen, und ich werde dich im nächsten Video sehen. 74. Einführung in den Typography: Hi. In diesem Video werden wir über den Textstil sprechen, genau wie das, was wir mit unseren Farben gemacht haben, wir werden jetzt mit unserer Typografie tun, also in diesem Abschnitt werden wir unser eigenes Textil erstellen und wir müssen verschiedene Größen, verschiedene Gewichte und auch verschiedene Farben zu unserem Typografie-Stil, um es in unserem Projekt zu verwenden. Ich werde Sie im nächsten Video sehen. 75. Typography Teil 1: Hallo an alle, und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir den Typografie-Stil zu unserem Styleguide hinzufügen. Ohne weiteres, lasst uns damit beginnen, diese Zeichenfläche zu duplizieren, und ich werde es Typografie nennen. Dann lassen Sie mich ein wenig hineinzoomen und lassen Sie uns diesen Titel auch in Typografie ändern. Fantastisch. Danach werde ich auch diese Schatten und diese Grenzen entfernen. Lassen Sie uns den Titel in H1 ändern, dann werde ich die Breite dieser Zeile auf 1.120 erhöhen, so. Danach werde ich diesen Text so duplizieren. Ziemlich gut. Lassen Sie uns die Schriftgröße auf 34 Punkte ändern und ich werde es fett machen. Fantastisch. Stellen Sie sicher, dass es so auf der linken Seite ausgerichtet ist. Ich werde den Text in Beispieltext ändern. Ziemlich genial. Dann müssen wir es duplizieren. Ich werde es in die Mitte dieser Zeichenfläche bringen. Lassen Sie uns es an der Mitte ausrichten. Noch einmal, duplizieren Sie es. Fantastisch. Nun wählen wir jedoch diese mittlere aus. Wir müssen es an der Mitte ausrichten. Der letzte, den wir brauchen, um es auf der rechten Seite auszurichten, und jetzt ist es Zeit, unseren Textstil zu erstellen. Wählen wir den ersten aus und klicken Sie auf diese vier Punkte. Lassen Sie uns auf dieses Symbol klicken. Hier werde ich H1/Left schreiben. Fantastisch. Der zweite wird H2/Center sein, und der letzte wird H1/Rechts sein. Fantastisch. Nun, lassen Sie uns diese Gruppe in H1 umbenennen, und diese auch. Lassen Sie mich diese Gruppe auch in Typografie umbenennen. Nun, lassen Sie uns diese H1-Gruppe so duplizieren, und ich werde den H1-Titel in H2 umbenennen. Nun, lassen Sie uns diese Texte von seinem Stil wie diesem lösen, diesen auch, und diesen auch. Jetzt ist es an der Zeit, alle auszuwählen. Ich werde die Schriftgröße auf 26 Punkte ändern. Fantastisch. Dann müssen wir unseren Textstil erstellen. Wie Sie sehen können, habe ich einen Fehler für diesen gemacht, ich schrieb H2. Lass uns weitermachen und es ändern, weil wir H1 dafür schreiben müssen. Nun, wählen wir diese aus und ich werde einen neuen Textstil erstellen. Lasst uns H2/Left schreiben. Ich werde das kopieren. Dieser wird H2/Center sein und der letzte wird H2/Right sein. Fantastisch. Nun, lassen Sie uns auch unsere Gruppe in H2 umbenennen, dann müssen wir das so duplizieren. Lassen Sie uns den Titel in H3 ändern. Ich werde diese Texte eins nach dem anderen von ihrem Stil lösen. Nun, lassen Sie uns alle auswählen und ich werde die Schriftgröße auf 16 Punkte ändern. Fantastisch. Jetzt werde ich jedoch nicht die Textstile erstellen, weil ich Ihre Zeit sparen werde. Ich werde es selbst machen und Sie können den letzten Styleguide aus der Ressourcenvorlesung des Abschnitts herunterladen . Lassen Sie uns diese Gruppe H3 umbenennen und noch einmal duplizieren. Es wird H4 sein. Lassen Sie uns alle diese Texte auswählen und die Schriftgröße auf 12 Punkte ändern. Fantastisch, und das ist alles für dieses Video. Im nächsten Video werden wir unseren Körpertext hier zusammen hinzufügen. Wir sehen uns dann. 76. Typography Teil 2: Hallo an alle und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir unseren Körpertext zu unserem Typografie-Stil hinzufügen. Ohne weiteres, lasst uns anfangen, indem wir die letzte Gruppe duplizieren, ich werde es hier setzen, und lasst uns Körper 1 schreiben, ziemlich gut. Ich werde all diese Texte auswählen und die Schriftgröße auf 14 Punkte ändern, fantastisch. Nun, wählen wir den ersten aus, und ich werde einen Textstil erstellen. Schreiben wir Körper 1 links, und der nächste wird Körper 1 Zentrum sein, und der letzte wird Körper 1 rechts sein, ziemlich gut. Nun lasst uns unsere Gruppen umbenennen. Es wird Körper 1 sein, auch dieser hier. Dann duplizieren wir es und lassen Sie uns den Titel in Körper 2 ändern. Wir müssen diese Textebenen von ihrem Stil lösen. Nun lassen Sie uns alle auswählen und ich werde die Schriftgröße auf 13 Punkte ändern. Ich werde jedoch nicht die Textstile erstellen, weil ich das für Sie tun werde und Sie können den letzten Styleguide aus der Ressourcen-Vorlesung dieses Abschnitts herunterladen . Lassen Sie uns noch einmal diese Gruppen umbenennen: Körper 2, Körper 2. Ich werde es zum letzten Mal duplizieren. Lassen Sie uns es in Körper 3 umbenennen und ich werde alle diese Texte auswählen. Lassen Sie uns die Schriftgröße auf 11 Punkte ändern. Alles klar, Leute, wir haben erfolgreich unseren Topographie-Styleguide zusammen erstellt , also lasst uns jetzt voran gehen und es überprüfen. Ich werde einen Text erstellen. Lasst uns den Titel schreiben. Aus den Textstilen kann ich wählen, was ich will. Moment haben wir nur drei Optionen, weil wir nicht die Textstile für all diese Texte erstellt haben. Wenn Sie jedoch den endgültigen Styleguide herunterladen, haben Sie Zugriff auf alle diese Textstile. Für jetzt, wählen wir H1 links, und da gehen wir. Wenn ich nur versuche, dieses H1 links zu bearbeiten, also lassen Sie uns voran gehen und dies zum Beispiel von fett zu normal ändern , können Sie sehen, dass sich mein Titel auch geändert hat. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 77. Entwerfen einer modernen Finanz-App: Hallo, alle und willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Abschnitt werden wir eine komplette mobile Anwendung namens Money entwerfen. Es ist eine Finanz-App und wir werden 24 verschiedene Bildschirme zusammen Schritt für Schritt entwerfen. Wir werden alle notwendigen Bildschirme entwerfen, die diese Anwendung benötigt. Wir beginnen mit der Gestaltung des Startbildschirms, dann werden wir eine Willkommensseite entwerfen. Außerdem haben wir zwei verschiedene Signaturseiten, dann werden wir drei verschiedene Anmeldeseiten entwerfen. Wie Sie sehen können, mit verschiedenen Zuständen. Danach werden wir unsere OTP-Verifizierungsseite entwerfen und wie Sie sehen können, haben wir drei verschiedene Bildschirme für diese. Der erste Bildschirm dient zum Abrufen der Nummer des Benutzers, der zweite Bildschirm ist für, wenn der Benutzer den Code eingibt, und der letzte Bildschirm ist, wenn die Schaltfläche aktiv ist. Danach werden wir das Profilformular entwerfen. Wie Sie hier sehen können, haben wir zwei verschiedene Bildschirme: Profil und Profil abgeschlossen. Dann beginnen wir mit der Gestaltung unserer Homepage zusammen mit diesen Karten und all diesen Komponenten. Dann werden wir unsere Hamburgerkarte entwerfen, und dann werden wir unsere Kartenseite entwerfen. Wir werden zwei verschiedene Karten haben: die primäre Karte und die sekundäre Karte. Hier haben wir die Transaktionen. Danach haben wir die Transaktionsseite und auch die Details der Transaktionen. Grundsätzlich, wenn der Benutzer auf diese Karte klickt, wird es herausrutschen und wir werden diesen Bildschirm mit all diesen Details sehen. Danach werden wir den Transferbildschirm mit diesen Numpad und all diesen Elementen entwerfen . Dann haben wir die Bestätigungsseite hier. Danach werden wir unsere Benachrichtigungsseite mit echten Daten gestalten. Dann werden wir hier die Profilseite gestalten. Zu guter Letzt werden wir drei verschiedene Onboarding-Seiten gemeinsam gestalten. Um dieses Projekt zu entwerfen, müssen Sie zuerst die Asset-Datei herunterladen, die ich bereits für Sie vorbereitet habe, aus dem Ressourcenbereich der Assets-Vorlesung herunterladen. Alles klar, Leute. Das ist alles für dieses Video. Ich werde Sie im nächsten Video sehen. 78. Start-Bildschirm: Hallo, alle und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir damit beginnen, unsere Finanzanwendung zu entwerfen, die Money genannt wird. Es ist interessant, nicht wahr? also ohne weiteres anfangen, Lassen Sie unsalso ohne weiteres anfangen,indem Sie eine neue Kunsttafel auf unsere Leinwand einfügen. Also werde ich drücken A auf meiner Tastatur und von Phone Abschnitt, Ich werde iPhone 11 Pro oder X wählen Dann lassen Sie mich es zu Launch Screen umbenennen, weil dies unsere erste Seite ist. Danach werden wir einfach das Logo dieser Anwendung platzieren , die ich bereits für Sie vorbereitet habe. Wenn Sie also bereits die Asset-Datei aus der Assets-Vorlesung heruntergeladen haben, können Sie sehen, dass Sie vier verschiedene Ordner haben: Logo, Illustrationen, Symbole und Apple iOS UI. Wenn Sie mit dem Sketch vertraut sind, wissen Sie wahrscheinlich, dass Sie Zugriff auf Apple iOS UI Kit haben um alle Elemente zu verwenden, die Apple unter dem Betriebssystem verwendet. Leider gibt es jedoch kein aktuelles Apple iOS UI Kit für Figma. Aber es gibt nichts, worüber man sich Sorgen machen muss, denn ich habe bereits für Sie alle notwendigen Dinge vorbereitet , die Sie während dieses Kurses benötigen. Wie Sie sehen können, haben wir Balken, Home-Indikator und die Statusleiste, und das ist alles, was wir brauchen. Aber für dieses Video müssen wir den Logo-Ordner öffnen. Hier können Sie sehen, dass wir drei verschiedene Dateien haben. Wir haben Colorful-Logo, Logo-White und Mastercard Logo. Jetzt wähle ich Colorful-Logo und lass es uns so in meine Kunsttafel ziehen und ablegen. Ziemlich nett, nicht wahr? Dann ist das einzige, was wir tun müssen, es sowohl horizontal als auch vertikal an der Mitte so auszurichten . Das ist alles für unseren Startbildschirm. Es war so einfach, nicht wahr? Alles klar, Leute, vielen Dank, dass ihr euch dieses Video angesehen habt. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 79. Anmelden/Seite und Welcome: Hallo an alle und willkommen zurück zu einem anderen Video dieses Abschnitts. In diesem Video werden wir unsere Anmeldeseiten und auch unsere Willkommensseite gemeinsam gestalten. Ohne weiteres, lassen Sie uns beginnen, indem Sie diese Zeichenfläche duplizieren, also werde ich „Befehl D“ oder „Control D“ drücken. Dann lassen Sie uns dieses Logo entfernen, das brauchen wir nicht mehr. Danach werde ich meine Zeichenfläche umbenennen. Lassen Sie uns Anmelden schreiben. Fantastisch. Eigentlich, der Anmeldeseite, werden wir das Logo oben setzen und auch wir brauchen einen Text, der sagt „Willkommen zurück“. Dann haben wir den Anmeldetitel, einige Textfelder und danach die Anmelde-Button rechts unten. Zunächst einmal beginnen wir mit dem Einfügen eines Kreises, also werde ich „Shift“ halten und ziehen und ablegen, und ich werde die Breite und Höhe auf 352 einstellen. Dann werde ich so einen linearen Farbverlauf hinzufügen. Lassen Sie uns die erste Farbe auswählen und ich werde den Farbcode auf 5264F9 setzen, wie folgt. Wählen wir den zweiten aus, und dieser wird 3AF9EF sein, wie folgt. Denken Sie jedoch daran, die Deckkraft so auf 100 Prozent zu erhöhen. Danach werde ich die Richtung ändern, also werde ich die erste Farbe oben auswählen. Lassen Sie uns die Richtung durch diese Handle-Controller wie folgt ändern. Fantastisch. Ich werde diesen Kreis ein wenig bewegen, um dafür einen guten Platz zu finden. Da ich den Standort jedoch bereits berechnet habe, kann ich hier einfach X und Y einstellen. Lassen Sie uns das X auf minus 74 setzen , und das Y auf minus 84. Ziemlich gut. In Ordnung. Jetzt müssen wir diesen Kreis so duplizieren. Ich werde es ein wenig bewegen, und lassen Sie uns diese Schicht direkt unter unseren ersten Kreis legen. Dann müssen wir den Farbverlauf ändern, also werde ich die erste Farbe auswählen. Lassen Sie uns den Farbcode auf 2F56F8 setzen, wie folgt. Wählen wir die zweite Farbe aus. Dieser wird C630F8 sein, so. Dieses Mal werde ich jedoch die Deckkraft auf Null reduzieren, so. Ich denke, es ist eine gute Idee, den Ort unserer Farben so zu ändern. Fantastisch. Lassen Sie uns die Richtung ein wenig ändern. Ziemlich gut. Dann duplizieren wir es noch einmal, und wir müssen es unten unter unseren zweiten Kreis bewegen. Lass es uns auf die rechte Seite bewegen. Wieder einmal müssen wir unsere Farben ändern, also wählen wir die erste Farbe aus, und ich werde den Code in C72FF8 ändern. Jetzt werde ich die Richtung ändern. Lassen Sie uns noch einmal den Ort unserer Farben ändern. Fantastisch. Nun gehen wir voran und setzen die X und Y für jeden Kreis. Ich werde den zweiten auswählen, und lassen Sie uns das X auf minus 43 und das Y auf minus 56 setzen. Großartig. Der dritte Kreis, setzen wir das X auf minus 12 und das Y auf minus 106, so. Ziemlich gut. Ist es nicht? Jetzt gehe ich jedoch voran und wähle den ersten Kreis aus. Lassen Sie uns die Richtung ein wenig ändern, um es ein wenig leichter zu machen. Ich denke, jetzt ist es perfekt,. Jetzt ist es an der Zeit, unser Logo zu dieser Kopfzeile hinzuzufügen. Gehen wir weiter und öffnen Sie die Assets-Datei, die Sie aus der Asset-Vorlesung dieses Abschnitts heruntergeladen haben. Ich werde ein Bild platzieren. Hier haben wir vier Ordner. Aus dem Logo-Ordner gehe ich voran und importiere Logo-Weiß und klicke einfach einmal hier. Wie Sie sehen können, ist dies ein SVG-Logo. Wenn Sie sich entscheiden, es so zu vergrößern, können Sie sehen, dass es sich ändert. Zunächst müssen Sie das Skalierungswerkzeug wie folgt auswählen. Sie können auch auf der Tastatur „K“ drücken, um das auszuwählen. Wenn ich danach „Shift“ auf meiner Tastatur halte und versuche, sie zu skalieren, können Sie sehen, dass sich nichts außer der Dimension und Größe ändert. Die Größe ist perfekt, es ist 60 mal 59. Ich werde es so behalten. Lassen Sie mich ein wenig hineinzoomen. Die obere Polsterung wird 64 Pixel sein. Wenn Sie die Polsterungen sehen möchten, können Sie einfach die Wahltaste oder die Alt-Taste auf Ihrer Tastatur halten. Da gehen wir, du hast alle Polsterungen. Wie Sie sehen können, ist die obere Polsterung dieses Logos 80, also werde ich es 64 machen, so, und die linke Polsterung wird 52. Ziemlich gut. werde ich einen Text einfügen. Drücken wir „T“ und klicken Sie hier, und ich werde die Schriftart auf Montserrat so ändern. Lassen Sie uns schreiben, „Willkommen zurück“, und ich werde die Schriftgröße auf 28 Punkte ändern. Ziemlich gut. Ändern wir auch die Farbe in Weiß und stellen Sie sicher, dass diese Textebene mit Ihrem Logo ausgerichtet ist. Offensichtlich wird seine linke Polsterung 52 Pixel betragen, wie unser Logo. Die obere Polsterung wird 16 Pixel sein. Ziemlich gut. Alles klar, wir sind fertig mit dem Header. Wählen wir nun alle unsere Formen aus, diese drei Kreise. Ich werde sie gruppieren und nennen es Shapes, fantastisch, um unsere Schichten organisiert zu halten. Jetzt ist es an der Zeit, unseren Titel hinzuzufügen. Also lassen Sie uns hier einen neuen Text einfügen. Ich werde Anmelden mit der gleichen Schriftart schreiben. Dieses Mal werde ich jedoch den Weg zu fett ändern und die Schriftgröße wird 28 Punkte betragen und wir müssen auch die Farbe ändern. Wie Sie sehen können, ist es schwarz. Sie können es natürlich benutzen. Es wird jedoch empfohlen, etwas Helleres zu verwenden , wenn Sie Schwarz vor dem weißen Hintergrund verwenden möchten. Es ist besser, kein reines Schwarz zu verwenden. Ich werde den Farbcode auf 3A3A3A ändern. Wie Sie sehen können, werden wir dunkelgrau. Fantastisch. Dann werde ich die Polsterung überprüfen, die linke Polsterung wird 30 Pixel sein, also lasst es uns überprüfen. Ziemlich gut. Die obere Polsterung für diese Gruppe wird 39 Pixel sein. Ziemlich genial. In Ordnung. Jetzt ist es an der Zeit, unsere Textfelder zu erstellen. Um ein Textfeld zu erstellen, benötigen wir eine Zeile, also werde ich eine Zeile aus diesen Objekten auswählen. Halten wir „Shift“ und ziehen und ablegen. Ziemlich gut. Lassen Sie uns die Breite so auf 315 ändern. Dann werde ich es an der Mitte ausrichten. Wie Sie sehen können, erhalten wir eine 30 Pixel linke und rechte Polsterung, was wir wollten. Dann werde ich die Farbe auf 2743FD ändern, fantastisch. Ich werde die Dicke auf eins halten. Lassen Sie mich es etwas runter schieben. Dann brauchen wir zwei Textebenen. Also wird die erste E-Mail-Adresse sein und lassen Sie uns die Schriftart in SF Pro-Text wie folgt ändern und auch das Gewicht wird regelmäßig sein und die Schriftgröße sollte 14 Punkte wie folgt betragen. Ich werde die Füllung auf B9B9B9 ändern, fantastisch, um dieses hellgrau zu sehen. Lassen Sie mich hineinzoomen. Ich werde es mit meiner Zeile ausrichten und seine linke Polsterung wird auch 30 Pixel betragen. Dann lassen Sie es uns duplizieren. Ich werde es runterziehen. Hier schreiben wir unsere E-Mail. Also werde ich design@test.com schreiben. Lassen Sie uns die Farbe auf 3A3A3A ändern, was die gleiche Farbe ist, die wir für den Anmeldetitel verwendet haben. Alles klar, seine untere Polsterung wird acht Pixel sein, wie Sie sehen können, und die obere Überschrift wird 16 Pixel wie folgt sein. Also, jetzt ist alles perfekt. Dann ist das nächste, was wir hinzufügen müssen, ein Häkchen-Symbol. Gehen wir also weiter und fügen Sie ein anderes Bild aus unserer Asset-Datei und aus Symbolen ein. Hier haben wir viele Symbole. Ich wähle ein Häkchen, und lasst uns hier klicken. Da gehen wir. Jetzt lasst uns alle unsere Elemente zusammenfassen. Wählen Sie danach dieses Häkchensymbol und richten Sie es aus. Lassen Sie mich vergrößern, seine untere Polsterung wird 17 Pixel betragen. Wie Sie sehen können, können wir hier nicht die richtige Polsterung bekommen, weil wir hier eine Gruppe verwenden. Wenn Sie also einen Frame anstelle einer Gruppe verwenden, könnten wir leicht die richtige Polsterung erhalten. Im Moment ist die einzige richtige Polsterung, die wir bekommen, bis zum Rand dieses Bildschirms. Wir müssen jedoch bis zum Ende dieser Zeile die richtige Polsterung erhalten. Um das zu erreichen, wählen wir unsere Gruppe aus. Ich werde es in E-Mail-Adresse umbenennen. Danach lassen Sie uns mit der rechten Maustaste darauf klicken und Sie können Rahmenauswahl wählen. Dann haben Sie einen Rahmen. Ich gehe voran und kopiere diesen Namen, lass es uns hier für diesen Rahmen einfügen und wenn ich diese Tick-Symbol wähle, jetzt, wenn ich die Optionstaste meine Tastatur halte, kann ich die richtige Polsterung sehen, weil ich die Polsterungen gegen diesen Rahmen, das ist, was wir wollten. Lassen Sie uns die richtige Polsterung auf 16 Pixel wie folgt setzen, und alles ist erledigt. Wir haben erfolgreich unser erstes Textfeld erstellt. Wir brauchen jedoch noch einen, also lasst uns voran gehen und duplizieren und wir werden es hinlegen und die obere Polsterung wird 24 Pixel wie folgt sein, dann lasst uns den Titel in Password ziemlich gut ändern und lasst uns Benennen Sie unsere Gruppe und unseren Rahmen auch um. Ändern wir es in Passwort und einen Frame-Namen als gut, fantastisch. Dann müssen wir diese Texte ändern, denn für das Passwort müssen wir zwei verschiedene Zustände haben, das versteckte und das Passwort und das sichtbare Passwort. Um das versteckte Passwort zu erstellen, können Sie die Option oder Alt auf Ihrer Tastatur halten und 8 drücken. Wie Sie sehen können, ist es für die Sicherheit versteckt. Das nennen wir User Experience, weil Sie als UIX-Designer auf alle Details achten müssen. Dann müssen wir dieses Symbol in ein Augensymbol ändern, der Benutzer dieses Passwort sichtbar oder versteckt machen kann. Ich werde das entfernen. Lassen Sie uns ein anderes Bild aus unserer Asset-Datei platzieren und hier haben wir ich mag dies, ich werde es hier einfügen und lassen Sie es direkt in unser Passwort-Textfeld verschieben. Es wird eine 16 Pixel untere Polsterung und eine 16 Pixel rechte Polsterung haben. Was brauchen wir noch für die Anmeldeseite? Natürlich brauchen wir den Link „Passwort vergessen“. Lass es uns schaffen. Ich brauche einen Text und lasst uns schreiben, Passwort vergessen, ein Fragezeichen, und dann werde ich die Farbe auf 2B47FC ändern und machen es größer, also werde ich die Schriftgröße auf 16 Punkte setzen. Lassen Sie uns es ausrichten, es ist linkes Padding wird 30 Pixel sein und seine obere Überschrift wird 24 Pixel sein, so wie diese. guter Letzt müssen wir unseren Anmelde-Button erstellen. Gehen wir weiter und fügen Sie hier ein Rechteck ein. Ich werde ziehen und fallen, ich werde die Breite auf 315 und die Höhe auf 72 so einstellen, dann erhöhen wir den Eckenradius auf 28. Ich muss sie jedoch glatt machen. Ich werde auf dieses Symbol klicken, unabhängige Ecken und diese Symbole sowie und wie Sie hier sehen können, habe ich einen Schieberegler, ich kann es auf 60 Prozent erhöhen, um eine iOS wie abgerundete Taste zu erhalten. Dann ändern wir die Farbe in einen Farbverlauf wie diesen. Ich werde die erste Farbe auswählen und ändern Sie sie auf 49, 60 und F9 und lassen Sie uns die zweite Farbe auswählen, die Deckkraft auf 100 Prozent erhöhen und sie auf 1433 und doppelt F ändern . Dann werde ich die Richtung ein wenig ändern so richtig sind, dann brauchen wir einen Text, also lasst uns anmelden. Ich werde die Schriftart in einen Satz und eine Schriftgröße auf 20 Punkte ändern, das Gewicht wird regelmäßig sein, aber lasst uns das Feld so in weiß ändern. Danach müssen wir sowohl unser Rechteck als auch unsere Zeichen-Tags auswählen , um sie auszurichten, also werde ich auf vertikal ausrichten klicken. Dann lassen Sie uns die Polsterungen überprüfen. Ich werde ein wenig vergrößern, die oberen, linken und unteren Polsterungen werden 24 Pixel wie folgt sein. Was brauchen wir dann? Wir benötigen einen Pfeil nach rechts, um es hier zu platzieren um anzuzeigen, dass Sie durch Klicken auf dieses Symbol zu einer anderen Seite weitergeleitet werden. Lassen Sie uns voran und platzieren Sie ein Bild und von den Symbolen können Sie weißen Pfeil wählen und es hier platzieren. Dort gehen wir und ich werde das Rechteck und dieses Symbol zusammen auswählen und klicken Sie auf vertikal ausrichten und es ist richtig Polsterung wird 24 Pixel wie folgt sein. Jetzt haben wir unseren Anmelde-Button erstellt, aber ich werde weitere Details hinzufügen, um es einzigartig zu machen. Lassen Sie uns voran und erstellen Sie einen Kreis wie diesen und dann werde ich voran gehen und klicken Sie auf diesen dritten Kreis wie folgt, dann klicken Sie mit der rechten Maustaste hier. Aus diesem Menü kopieren Einfügen, klicken und kopieren Eigenschaften wie diese , und wählen Sie diese kleinen Kreis, Klicken Sie mit der rechten Maustaste darauf und von Kopieren-Einfügen, klicken Sie auf und fügen Sie Eigenschaften, so dass wir die gleiche erhalten Gradient, den wir für unseren Header verwendet haben, dann werde ich es nach unten verschieben. Lassen Sie uns es so unter unseren Pfeil legen und danach müssen wir eine Maske erstellen, aber bevor wir das tun, müssen wir unser Rechteck duplizieren , weil wir nach der Maskierung einen Schlagschatten hinzufügen werden. Im Gegensatz zu Skizzen, wenn Sie einen Schlagschatten haben möchten, während Sie eine Maske verwenden, wird es nicht leicht funktionieren. Daher ist der beste Weg, um dieses Ergebnis zu erhalten, es zu duplizieren. Dies ist das Rechteck 2, ich werde es hinlegen, verstecken Sie es für jetzt und dann wählen Sie diesen Kreis und dieses Rechteck und klicken und maskieren Sie so und danach können Sie Ihre duplizierte Ebene sichtbar machen so und Sie können den Kreis leicht bewegen. Ich werde es ein wenig drehen, um so etwas zu bekommen, lass es uns hier setzen und ich denke, es ist eine gute Idee, es größer zu machen. Ich werde die Breite und Höhe auf 144 von 144 einstellen, um so etwas zu bekommen. Lassen Sie uns es duplizieren, verschieben Sie es auf die linke Seite, und dann werde ich die Eigenschaft des Kreises kopieren und einfügen, dieses blaue, diesen kleinen Kreis. Lassen Sie uns diese Ebene unter unseren ersten Kreis legen und dann werde ich es ein wenig drehen, um das bestmögliche Ergebnis zu erzielen. Ich denke, jetzt ist es großartig, es ist ziemlich gut, nicht wahr? Das letzte, was wir tun müssen, ist, einen Schlagschatten zu unserer Schaltfläche hinzuzufügen. zunächst daran, die duplizierte Ebene zu wählen, dieses Rechteck 2 und klicken Sie auf Effekte wie diese hinzufügen. Ich werde die Einstellungen ändern. Zuallererst werde ich die Farbe ändern. Setzen wir es auf 1B39 und doppeltes F wie folgt. Ändern Sie dann die Unschärfe auf 16 und ein Y auf acht wie folgt, und verringern Sie die Deckkraft auf 20 Prozent, es ist ziemlich cool, oder? Jetzt werde ich alle Elemente hier auswählen, gruppieren sie und lassen Sie es in Signatur-Schaltfläche umbenennen. Jetzt, wie unsere Schaltfläche ausgewählt ist, lassen Sie uns es an der Mitte ausrichten und wie Sie sehen können, haben wir eine 30 Pixel linke und rechte Polsterung und wir müssen eine 64 Pixel untere Polsterung wie folgt erhalten. Das einzige, was diesem Bildschirm noch hinzugefügt werden muss, ist ein Home-Indikator. Wenn Sie Ihre Asset-Datei öffnen, wie Sie sehen können, haben Sie einen Ordner namens Apple iOS UI, lassen Sie es uns öffnen und hier haben Sie verschiedene Ordner, Balken, Home-Indikator und Tastaturen. Öffnen wir Home-Indikator und hier haben Sie zwei Varianten, das dunkle Portrait und das helle Porträt. Eigentlich bedeutet das Licht hier nicht, dass es weiß ist, es bedeutet, dass man es auf einem hellen Hintergrund verwenden kann, also ist es im Grunde schwarz. Ich gehe voran und öffne es und klicke hier, dann lass es uns so an der Mitte ausrichten und es ist die untere Polsterung wird 0 sein. Schauen wir uns unsere Anmeldeseite an. Bevor wir dieses Video beenden, müssen wir eine Willkommensseite erstellen. Jetzt werde ich voran gehen und dieses Artboard auf die rechte Seite verschieben und es duplizieren und diese duplizierten Artboard so auf die linke Seite bringen. Ich werde es umbenennen, um willkommen zu heißen und natürlich brauchen wir diese Elemente nicht, also lasst uns sie entfernen. Behalten Sie jedoch die Anmeldeschaltfläche, und wählen Sie dann diese Shape-Gruppe, lassen Sie uns die Breite und Höhe auf 970 ändern, aber denken Sie daran, sie zuerst so zu verknüpfen. Setzen wir das x auf minus 424 und das y auf minus 409 und danach werde ich es ein wenig drehen. Setzen wir die Rotation auf minus 28 Grad, um so etwas zu bekommen, es ist ziemlich cool, nicht wahr? Dann lassen Sie es uns ein wenig auf die linke Seite bewegen. Stellen Sie sicher, dass diese Schritte in der Reihenfolge ausgeführt werden, denn wenn Sie es zuerst drehen werden Ihre x und y geändert. Auf dieser Willkommensseite haben wir noch einen Button, den Anmelde-Button. Ich gehe weiter und schiebe diesen Knopf nach oben, dupliziere ihn. Lassen Sie uns es nach unten bewegen und es ist die oberste Überschrift wird 16 Pixel wie folgt sein, dann lasst uns diese Texte ändern, um sich anzumelden. Natürlich können Sie es dynamisch machen, indem Sie das automatische Layout hinzufügen, wenn Sie möchten, natürlich und dann werde ich voran gehen und dieses Rechteck 2 auswählen. Lassen Sie uns die Füllung entfernen und einen Strich hinzufügen und ändern Sie die Strichfarbe in 27, 43 und FD wie folgt. Lassen Sie uns diesen Farbcode kopieren, weil ich das brauchen werde und entfernen Sie den Schlagschatten, das brauchen wir nicht mehr und wir müssen auch diese Kreise so entfernen. Wählen wir nun unseren Pfeil nach rechts aus und ändern den Farbcode in die Farbe, die wir für unseren Strich gewählt haben. Ich werde es hier einfügen und auch ich werde den Farbcode meiner Texte in die gleiche Farbe wie diese ändern . Lassen Sie uns die Polsterungen überprüfen, die untere Polsterung wird 64 sein, also werde ich beide Schaltflächen auswählen und sie um ein Pixel wie folgt nach unten verschieben und sicherstellen, dass Sie Ihre Gruppe umbenennen. Ich werde es ändern, um mich anzumelden. Das ist alles für dieses Video, ich hoffe, es hat dir wirklich gefallen, es war so interessant. Im nächsten Video werden wir unsere Anmeldeseiten gemeinsam gestalten. Wir sehen uns dann. 80. Anmelde-Seite: Hallo an alle, und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir unsere Anmeldeseiten und auch unsere Anmeldeseiten gemeinsam gestalten . Ohne weitere Umschweife, lassen Sie uns diese Anmeldeseite duplizieren. Ich wähle dieses Kunstboard aus und lass es uns duplizieren. Danach werde ich voran gehen und dieses Kunstboard umbenennen, um sich in Bindestrich Passwort anzumelden, denn in diesem Kunstboard werden wir dieses Passwort sichtbar machen. Lassen Sie uns ein wenig hineinzoomen. Fantastisch. Ich werde diese Text-Ebene auswählen und schreiben wir UI2020. Ziemlich gut. Offensichtlich müssen wir dieses Symbol auch ändern. Lassen Sie uns voran und fügen Sie neues Symbol aus unserer Assets-Datei. Ich gehe zu Icons, und hier haben wir Eye-Hidden, also lassen Sie uns das auswählen und es hier platzieren, und ich werde es durch unser vorheriges Symbol wie folgt ersetzen. Ich werde das entfernen und lassen Sie uns dieses Augensymbol in unser Passwort-Textfeld setzen. Fantastisch. Das ist alles für dieses Kunstbrett. Lassen Sie mich ein wenig verkleinern, und danach werden wir unsere Anmeldeseite erstellen. Es wird fast das Gleiche sein. Das einzige, was wir ändern müssen, ist dieser Titel. Ich gehe weiter und wähle die Anmeldeseite aus, dupliziere sie dann und ich werde sie umbenennen, um sich anzumelden. Ziemlich gut. Lassen Sie uns diesen Titel ändern, um sich auch anzumelden. Denken Sie daran, auch Ihre Schaltfläche zu ändern. Ich werde diese Textebene auswählen und es wird sich anmelden. Fantastisch. Da gehen wir. Wir haben gerade unsere Anmeldeseite erstellt. Nun lassen Sie uns die Anmeldeseite noch einmal duplizieren, und dieses Mal werden wir einen anderen Zustand dieses Textfelds erstellen. Zum Beispiel werden wir einen Fehlerzustand entwerfen. Lassen Sie mich ein wenig hineinzoomen. Lassen Sie uns zuerst dieses Kunstboard umbenennen, um Falsche E-Mail wie folgt zu registrieren. Dann lassen Sie uns diese E-Mail zum Beispiel falsch machen, ich werde this.com so entfernen. Wie Sie sehen können, ist es keine vollständige E-Mail-Adresse, und dann müssen wir dieses Häkchensymbol entfernen. Wenn es falsch ist, macht es keinen Sinn, dieses Häkchensymbol zu haben, also müssen wir das entfernen, und lassen Sie mich das gesamte Textfeld ein wenig nach oben verschieben , um mehr Platz für das Hinzufügen des Fehlers am unteren Rand zu haben. Das erste, was wir tun müssen, ist die Farbe dieses Titels in eine rote Farbe zu ändern. Ich möchte den Farbcode in FD2727 ändern und diesen Farbcode kopieren, weil ich den brauchen werde. Wählen wir dann diese horizontale Linie aus und ändern Sie die Farbe in das gleiche Rot. Danach gehe ich voran und dupliziere diese Textebene, verschiebe sie nach unten, wie hier, und lasst uns schreiben, dass die E-Mail-Adresse unvollständig ist. So wie das hier. Ich werde jedoch die Schriftgröße auf 13 Punkte ändern. Ziemlich gut, und lasst uns auch die Farbe in dieses Rot ändern. Dann werde ich das Gewicht von normal auf leicht ändern. Fantastisch. Jetzt ist es an der Zeit, unsere Polsterungen zu überprüfen. Wie Sie jetzt sehen können, ist unser oberstes Padding auf neun Pixel gesetzt. Ich werde es acht so machen. Dann lassen Sie uns diesen Text in unsere Email-Adress-Gruppe hier verschieben. Ziemlich gut, und es ist die untere Polsterung wird 24 Pixel wie folgt sein. Sicherlich müssen wir diese Anmelde-Titel ein wenig verschieben. Ich werde es nach oben verschieben, um eine 42 Pixel untere Polsterung wie folgt zu erhalten. Ziemlich gut. Jetzt sieht alles gut aus. Jetzt brauchen wir noch eine Anmeldeseite. Gehen wir weiter und wählen Sie diese Anmeldeseite, diese, und ich werde sie duplizieren. Lassen Sie uns es umbenennen, um die Eingabe zu registrieren, weil wir die Tastatur hier präsentieren, um dem Entwickler zu zeigen , wie dieses Layout funktioniert, wenn wir ein Schlüsselwort präsentieren. Denn offensichtlich werden wir einige Elemente hierher verschieben. Ich werde heranzoomen. Das erste, was wir tun müssen, ist, diese Elemente auszuwählen und sie so nach oben zu verschieben, und dann gehen wir voran und platzieren Sie ein Bild, und aus dem Assets-Ordner, Apple iOS UI, haben Sie Schlüsselwörter, und lassen Sie uns das auswählen, Platzieren Sie es hier. Ziemlich gut, fantastisch. Dann gehe ich voran und wähle dieses E-Mail-Adresstextfeld und Passwort-Textfeld aus, gruppiere sie und verschiebe sie nach oben, bis du eine 24 Pixel obere Polsterung wie folgt erhältst. Alles ist gut. Wir müssen jedoch noch eine Sache hinzufügen, eine Texteingabemarke. Da der Benutzer diese Seite eingibt, müssen wir hier eine Texteingabemarke hinzufügen. Es ist so einfach, eine zu erstellen. Lassen Sie uns voran und erstellen Sie eine Linie wie diese. Allerdings diesmal eine vertikale Linie, und ich werde die Breite auf 19 einstellen, so, und ich werde die Farbe zu diesem lila ändern, wie unser Tick-Symbol, fantastisch. Es ist die untere Polsterung wird acht Pixel sein. Ziemlich gut. Lassen Sie uns nun diese Zeile innerhalb dieser Passwortgruppe verschieben, damit Sie alle Füllstände korrekt messen können. Wie Sie jetzt sehen können, ist unsere linke Polsterung auf vier gesetzt, machen wir es zwei, und ich werde es ein wenig nach unten bewegen, um eine visuelle Balance zu erhalten. Ziemlich gut, und alles ist großartig. Leute, wir haben erfolgreich alle unsere Anmeldeseiten und auch unsere Anmeldeseiten zusammen erstellt . Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Im nächsten Video werden wir mit der Gestaltung unserer OTP-Verifizierungsseiten beginnen. Wir sehen uns dann. 81. OTP: Hallo, alle. Willkommen zurück zu einem anderen Video dieses Abschnitts. In diesem Video werden wir beginnen, unsere OTP-Verifizierungsseiten gemeinsam zu entwerfen. Ohne weitere Umschweife, lasst es uns loslegen. Zuerst müssen wir ein neues Kunstboard haben. Ich werde A drücken, und ich werde iPhone 11 Pro oder X wählen, so. Ich werde es hier verschieben, direkt unter meinem großen Bildschirm, um unsere Leinwand organisiert zu halten. Dann lassen Sie uns dieses Kunstboard in OTP umbenennen. Es wird unser erster Bildschirm sein, denn insgesamt wir drei verschiedene OTP-Bildschirme haben, und wir werden sie Schritt für Schritt erstellen. Nun, was brauchen wir? Wir brauchen einen Home-Indikator, um rechts unten zu setzen, so dass wir es einfach kopieren und von unseren bisherigen Kunstboards einfügen können. Ich werde das kopieren und es hier einfügen. Ziemlich gut. Wir brauchen auch die Statusleiste. Ich werde voran gehen und ein Bild platzieren. Hier habe ich Balken, Statusleiste, ich habe dunkle und helle Version, und das Licht bedeutet, dass Sie es auf einem hellen Hintergrund verwenden können. Die Statusleiste ist dunkel. Ich gehe weiter und öffne es, lege es hier. Nun, lassen Sie mich es an der Mitte ausrichten. Auch muss es am oberen Rand dieses Bildschirms bleiben, so. Was brauchen wir noch? Wir brauchen eine Illustration, die ich bereits für Sie vorbereitet habe. Lass uns weitermachen und ein anderes Bild hier platzieren. Im Ordner „Assets“ haben Sie einen Illustrationsordner, ich werde ihn öffnen. Hier, Sie haben OTP. Lasst uns das aufmachen. Ich möchte erwähnen, dass ich diese Illustrationen von der undraw.co-Website heruntergeladen habe, die eine sehr großartige Website ist, auf der Sie Zugang zu erstaunlichen lizenzfreien Illustrationen erhalten können . Wenn Sie eine andere Illustration verwenden möchten, stellen Sie sicher, dass Sie diese Website besuchen. Zuerst richten wir es an der Mitte aus, dann überprüfe ich die obere Polsterung. Eigentlich werden es 56 Pixel sein, so. Ziemlich gut. Dann brauche ich eine Textebene. Lassen Sie uns schreiben, OTP-Verifizierung, und ändern Sie die Schriftart in Montserrat, wie folgt. Ich werde die Fettversion verwenden, und wir müssen auch die Schriftgröße auf 24 Punkte ändern. Ziemlich gut. Die obere Polsterung wird 60 Pixel betragen, so. Dann lassen Sie uns diese Textebene duplizieren, verschieben Sie sie nach unten und ändern Sie den Weg zu normal, und ich ändere auch die Schriftgröße auf 16 Punkte. Ich werde es an der Mitte ausrichten. Hier schreiben wir : „Wir senden Ihnen ein einmaliges Passwort an diese Handynummer.“ Dann werde ich die Größe dieser Textebene ändern, um eine Textebene mit fester Größe zu haben, wie diese. Lassen Sie uns es an der Mitte ausrichten. Außerdem werde ich die Zeilenhöhe ändern. Was ich tun werde, ist 16 mal 1,5 zu schreiben, und dann PX, so. Es ist eine großartige Formel. Wenn Sie nicht wissen, wie Sie Ihre Zeilenhöhe wählen, können Sie sie verwenden. Sie können Ihre Schriftgröße schreiben und diese mit 1,5 multiplizieren. Denken Sie jedoch daran, dass Sie in Figma am Ende ein PX-Schlüsselwort hinzufügen müssen. Ziemlich gut. Nun wählen wir diese beiden Textebenen aus und lassen Sie uns die Textfarbe ändern. Ich werde sie auf 3A, 3A und 3A setzen, so. Ziemlich gut. Wählen wir nun diese Textebene aus und duplizieren Sie sie, verschieben Sie sie nach unten. Hier schreiben wir: „Geben Sie die Handynummer ein.“ Ich werde die Schriftart in SF Pro Text ändern, so ändern Sie den Weg zu Regular und auch die Schriftgröße auf 14 Punkte, wie folgt. Ich werde es an der Mitte ausrichten, und ich möchte auch die Farbe in B9, B9 und B9 ändern . Ziemlich gut. Wählen wir nun diese Textebene aus und überprüfen Sie die Polsterungen. Wie Sie sehen können, beträgt die obere Auffüllung jetzt 22 Pixel. Es ist jedoch besser, es auf 24 Pixel einzustellen. Dann lassen Sie uns die Polsterung dieser Texte überprüfen. Jetzt ist es auf 33 Pixel eingestellt. Lassen Sie uns jedoch auf 34 Pixel setzen. Dann brauchen wir hier ein Textfeld, um die Handynummer einzugeben. Was ich tun werde, ist nur diese Textfeldzeile auszuwählen. Ich kopiere das hier und füge es ein, schiebe es nach unten, ziemlich gut. Lassen Sie uns die Breite auf 233 verringern, so. Richten Sie es an der Mitte aus. Lassen Sie mich es nach unten verschieben und duplizieren Sie dann diese Textebene, verschieben Sie sie nach unten, ändern Sie den Weg zu Fett. Stellen Sie sicher, dass es an der Mitte ausgerichtet ist. Ich werde die Farbe auf 3A, 3A und 3A ändern , so. Hier schreiben wir eine Zufallszahl. Zum Beispiel können wir +49 111 222 333 schreiben. Ziemlich gut. Die untere Polsterung wird acht Pixel sein, so. Wählen Sie beide Ebenen aus, verschieben Sie sie nach oben, und wir müssen eine 24 Pixel obere Polsterung erhalten, wie folgt. Ziemlich gut. können Sie diese drei Elemente auswählen, gruppieren und nennen wir es Mobile Number, ziemlich gut. Das Letzte, was wir brauchen, ist ein Knopf. Ich gehe weiter und kopiere die Anmeldeschaltfläche und füge sie ein. Lassen Sie es uns hier einfügen. Ziemlich gut. Zuallererst werde ich es umbenennen in, Get OTP Button. Dann muss ich diesen Pfeil nach rechts entfernen, weil wir den nicht brauchen. Danach werde ich diese Textebene an der Mitte ausrichten. Wählen Sie zuerst diese Textebene aus, wählen Sie dann das Rechteck aus, richten Sie es an der Mitte aus. Lassen Sie es auch an der Mitte im Textbereich ausrichten. Ich werde es ändern in, Hol OTP. Ziemlich gut. Auch ich denke, es ist eine gute Idee, den Ort dieser Kreise zu ändern. Lassen Sie uns das blaue wählen, und ich werde es auf die linke Seite bewegen, so, und wählen Sie dieses, das lila, und bewegen Sie es nach unten. Drehen wir es ein wenig. Ziemlich gut. Ich werde dieses blaue ein wenig nach unten bewegen, und jetzt finde ich es großartig. Lassen Sie mich ein wenig hinauszoomen. Da gehen wir. Können Sie sehen, wie erstaunlich und schön es ist? Die untere Polsterung dieser Schaltfläche wird 64 Pixel sein, wie folgt. Ich denke, es ist eine gute Idee, die Schriftgröße unserer Handynummer zu erhöhen. Ich werde das auswählen und es auf 18 Punkte ändern. Jetzt ist es sichtbarer. Ich werde es an der Mitte ausrichten, es nach oben verschieben, und es wird eine acht Pixel untere Polsterung haben. Jetzt ist es viel besser. Na gut, Leute. Wir haben unseren ersten Bildschirm erfolgreich erstellt. Lassen Sie uns jetzt die anderen beiden erstellen. Lassen Sie uns diesen Bildschirm duplizieren, ziemlich gut. Ich werde diesen Text ändern, um die OTP eingeben, senden Sie an +49 111 222 333. Ich wähle diese Telefonnummer aus, und ich werde sie fett machen, so. Es ist ziemlich gut. Dann werde ich diese Textebene und auch diese Telefonnummer entfernen. Ziemlich gut. ich werde diese Linie behalten. Lassen Sie es uns jedoch ausschneiden und hier einfügen, weil wir diese Gruppe nicht mehr brauchen. Dann werde ich die Breite auf 48 setzen, so. Ziemlich gut. Nun fügen wir eine Textebene hinzu und lassen Sie uns einfach eine Zufallszahl schreiben, zum Beispiel sieben. Lass es uns regelmäßig machen, so. Auch die Schriftgröße wird 24 Punkte betragen, so. Verschieben Sie es ein wenig nach oben, um eine acht Pixel untere Polsterung zu erhalten, ziemlich gut. Dann lassen Sie uns es mit unserer Linie ausrichten, so. Gruppieren Sie sie, und lassen Sie uns es in Textfeld umbenennen, duplizieren Sie es dann und verschieben Sie es auf die rechte Seite. Es wird eine 24 Pixel linke Polsterung haben, so. Dann dupliziere es noch einmal, und noch einmal, ziemlich gut. Wählen Sie alle aus, gruppieren Sie sie und richten Sie sie an der Mitte aus. Dann wählen wir die zweite Zahl aus und ändern sie in etwas anderes, zum Beispiel drei. Ich werde die anderen beiden entfernen, weil in diesem Bildschirm der Benutzer das Passwort eingibt. Wir müssen diesen Prozess irgendwie darstellen. Dann werde ich diese beiden Linien auswählen und die Farbe in B9, B9 und B9 ändern , so ziemlich gut. Jetzt ist alles erledigt. Dann wählen wir diese Gruppe aus, verschieben Sie sie nach oben, und die obere Polsterung wird 58 Pixel betragen, wie folgt. Ich werde noch eine Textebene haben. Lassen Sie uns diese Textebene duplizieren und nach unten verschieben. Hier, wir müssen schreiben, haben Sie nicht das OTP erhalten? Dann schreiben wir, OTP erneut senden, so. Ich werde die Schriftart in SF Pro Text ändern, so. Lassen Sie uns auch die Schriftgröße auf 14 Punkte ändern. Wählen wir dann diesen Teil des Textes aus und ändern Sie den Farbcode in B9, B9 und B9. Wählen Sie auch diese OTP-Abschnitt erneut senden und ändern Sie es in 27, 43 und FD, wie folgt. Es ist Top-Polsterung wird 40 Pixel sein. Das Letzte, was wir tun müssen, ist unsere Taste zu ändern. Denn jetzt müssen wir einen deaktivierten Bestätigungsknopf haben. Zunächst einmal ändern wir diesen Text in, Verifizieren, großartig. Dann wähle ich dieses Rechteck zwei Ebene aus, dupliziere es, entferne den Schlagschatten und schiebe es dann rechts über den verifizierten Text nach oben, wie folgt. Ich werde die Farbe in eine feste ändern. Lass es uns in Weiß umwandeln. Danach werde ich die Deckkraft auf 40 Prozent reduzieren, so. Außerdem werde ich diese Verifizierungstext auswählen. Verringern wir die Deckkraft des Layers auf 50 Prozent. Ziemlich nett. Letzt, denken Sie daran, Ihre Gruppe immer umzubenennen, überprüfen, und das ist alles. Wie Sie sehen können, haben wir jetzt eine deaktivierte Schaltfläche da der Benutzer den OTP-Code nicht vollständig eingegeben hat. Nun, lassen Sie uns diesen Bildschirm duplizieren, um unseren letzten Bildschirm zu entwerfen. Ich werde es etwas auf die rechte Seite schieben. Nun, was brauchen wir? Zuallererst müssen wir diesen Code vervollständigen. Was ich tun werde, ist die Auswahl dieser Nummer, kopieren Sie diese, fügen Sie sie hier ein, verschieben Sie sie auf die rechte Seite, und ich werde sie direkt über diese Textzeile in unserem Ebenenfenster verschieben. Dann schreiben wir Null, ziemlich gut. Stellen Sie sicher, dass Sie sie so an der Mitte ausrichten. Danach werde ich die Farbe auf diese ändern. Ziemlich gut. Noch einmal, duplizieren Sie es, verschieben Sie es auf die rechte Seite. Wir müssen sie jedoch auch in unserem Ebenenbedienfeld so verschieben. Lass es uns in zwei ändern. Lassen Sie uns die Farbe unserer Textzeile ändern. Ziemlich gut. Zu guter Letzt müssen wir jetzt unseren Button aktivieren. Ich werde diese Gruppe öffnen und das Rechteck entfernen, das wir gerade erstellt haben. Ich werde die Deckkraft meines Textes auf 100 Prozent erhöhen. Alles klar, alle. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 82. Profile: Hallo an alle und willkommen zurück zu einem anderen Video der Sektion. In diesem Video beginnen wir mit der Gestaltung unserer Profilbildschirme. Zuerst müssen wir eine neue Zeichenfläche haben, also was ich tun werde, ist nur diesen OTP-Bildschirm zu duplizieren. Danach werde ich alle Objekte entfernen und es in Profil umbenennen. Grundsätzlich wird dieser Profilbildschirm einen Hintergrund und auch einen Profilbild Platzhalter rechts oben und einige Textfelder und eine Schaltfläche haben. Lassen Sie uns zunächst ein Rechteck einfügen , um unseren Hintergrund so zu erstellen. Stellen Sie sicher, dass es zu Ihrem Bildschirm passt, ändern Sie es dann in linearen Farbverlauf und wir werden es so passen. Wählen wir die erste Farbe aus, und ich werde den Farbcode auf 4960 und F9 setzen, wie folgt. Die zweite Farbe wird 1937 und FE sein. Sie jedoch sicher, dass Sie die Deckkraft auf 100 Prozent so erhöhen, und ich werde auch die Richtung ein wenig ändern , um einen besseren Farbverlauf zu erhalten, so etwas. Es ist ziemlich nett, nicht wahr? Danach müssen wir unsere Statusleiste und unseren Home-Indikator hinzufügen. Diesmal müssen wir jedoch die weiße Statusleiste und einen weißen Home-Indikator erhalten. Lass uns voran gehen und ein Bild platzieren. Von Apple iOS UI-Ordnerleisten, sagen Sie diese Leiste, lassen Sie uns die dunkle wählen und sie hier so platzieren. Ziemlich gut. Dann lassen Sie uns ein anderes Bild platzieren. aus dem Home-Indikatorordner Wählen wiraus dem Home-Indikatorordnerdas dunkle Porträt aus und legen Sie es rechts unten. Richten Sie es an der Mitte und richten Sie es auch so nach unten aus. Ziemlich gut. Bisher haben wir den Basisbildschirm erstellt. Jetzt ist es Zeit, einige Details hinzuzufügen. Das erste, was wir brauchen, ist ein Backlink-Pfeil rechts oben links. Lassen Sie uns ein Symbol aus unserem Icons-Ordner platzieren, und hier werde ich den Pfeil nach links wählen und es hier platzieren, wie folgt. Manchmal, wenn Sie diese Symbole hinzufügen, können sie unsichtbar sein. Dies ist wahrscheinlich ein Fehler von Figma, aber wenn Sie das beheben möchten, können Sie Ihre Datei schließen und erneut öffnen, und dann werden Sie diese Symbole sehen. Lassen Sie uns nun die Polsterungen überprüfen. Die linke Polsterung wird 30 Pixel wie folgt sein, und die obere Polsterung wird 24 Pixel wie folgt sein. Die obere Polsterung wird gegen diese Statusleiste sein, nicht die Kante dieser Zeichenfläche. Ziemlich gut. Lassen Sie uns nun unseren Platzhalter für Profilbilder zusammen erstellen. Was ich brauche, ist ein Rechteck. Ich werde das einfügen. Halten wir Umschalttaste hinzufügen Drag & Drop wie folgt. Stellen Sie sicher, dass Breite und Höhe jeweils auf 100 Pixel eingestellt sind. Dann werde ich den Eckenradius auf 36 einstellen, und ich werde es auch so glatt machen. Ziemlich gut. Danach ändern wir die Farbe in Weiß. Jetzt werde ich ein paar Details hinzufügen. Lassen Sie uns es zuerst duplizieren, Befehl D oder Kontrolle D, dann machen wir es ein wenig größer. Lassen Sie uns die Höhe und Breite sowohl auf 104 Pixel so einstellen. Ich werde die Farbe auf ein hellblau setzen. Versuchen wir es 40CE und F2. Fantastisch. Lassen Sie uns nun diese Ebene nach unten unterhalb unseres ersten Rechtecks verschieben. Dann werde ich es an der Mitte ausrichten, diese weiße auch, und jetzt wählen wir beide aus und richten sie sowohl horizontal als auch vertikal aus. Jetzt lasst uns sie umbenennen. Das Blaue wird blau sein und das weiße wird weiß sein, dass wir sie leicht erkennen können. Jetzt wählen wir das blaue aus, und ich werde es um minus 57 Grad drehen. Dann noch einmal, lassen Sie uns die weiße duplizieren, und jetzt ändern wir die Farbe in B52FF und 8, so. Dieses Mal machen wir es 106 106 Pixel und stellen sicher, dass es horizontal an der Mitte ausgerichtet ist. Ich werde es so hochziehen. Lassen Sie uns den Namen in lila ändern, bewegen Sie ihn rechts unterhalb des blauen nach unten, und dieses Mal drehen wir ihn um minus 30 Grad. Fantastisch. Es ist so schick, nicht wahr? Dann müssen wir unser Kamera-Symbol direkt in der Mitte dieses weißen Quadrates platzieren. Lass uns weitermachen und ein Bild platzieren. Von den Symbolen werde ich die Kamera auswählen und sie hier platzieren, dann stellen Sie sicher, dass Sie sie mit Ihrem weißen Quadrat sowohl vertikal als auch horizontal ausrichten . Danach wähle ich alle diese Elemente aus, gruppiere sie und nenne es Profilbild wie folgt. Die obere Polsterung wird 40 Pixel wie folgt sein, und stellen Sie sicher, dass sie horizontal an der Mitte ausgerichtet ist. Außerdem werde ich diese 0,6 von der Y-Achse entfernen, um eine 40 Pixel obere Polsterung wie folgt zu erhalten. Ziemlich gut. Jetzt ist es an der Zeit, unsere Textfelder zu erstellen. Um unsere Zeit zu sparen, werde ich dieses E-Mail-Textfeld auswählen, kopieren Sie es, fügen Sie es hier ein. Ziemlich gut. Ich werde es nach oben verschieben und lassen Sie uns den Titel in Benutzername ändern, und auch die Farbe wird 80E0 und FF sein. Lassen Sie uns diesen Farbcode kopieren, weil wir das brauchen werden. Diese Textebene wird Ihr Benutzername sein und der Farbcode wird gleich sein. Ziemlich gut. Lassen Sie uns diese Häkchen-Symbol ausblenden, entfernen Sie das jedoch nicht, weil im nächsten Bildschirm Sie es einblenden werden. Lassen Sie uns es einfach für jetzt ausblenden, dann wählen Sie diese Textfelder Zeile und machen Sie es weiß, ziemlich gut. Ich werde dieses Textfeld in Benutzername umbenennen, auch diese Gruppe. Ziemlich gut. Jetzt ist es Zeit, das zu duplizieren und es mit einem 24-Pixel-Padding wie folgt zu platzieren. Noch einmal, duplizieren Sie das, und noch einmal. Ziemlich gut. Der zweite wird unser Vorname sein. Lassen Sie uns den Vornamen schreiben, und hier wird zu Ihrem Namen geändert werden und ein Gruppen- und Frame-Name wird auch hier Vorname sein. Ziemlich gut. Der dritte wird Nachname sein. Fantastisch. Hier muss auch Ihr Nachname sein. Ziemlich gut. Der letzte wird das Geburtsdatum sein. Fantastisch. Hier schreiben wir Ihren Geburtstag, und ich werde ein Format für diese schreiben. Schreiben wir TT-MM-JJJJ. Es bedeutet, dass der Benutzer den Tag und Monat und das Jahr eingeben sollte. Denken Sie daran, den Namen Ihres Frames und auch den Namen Ihrer Gruppe umzubenennen, also werde ich ihn in den Nachnamen ändern. Das hier auch, und das letzte zum Geburtstag. Ziemlich gut. Nun lassen Sie uns alle auswählen, indem Sie die Umschalttaste auf Ihrer Tastatur gedrückt halten, und lassen Sie uns die obere Polsterung schütteln, es ist 71.2. Machen wir es 40 so. Sie können sie gruppieren und es Textfelder nennen, und wie Sie sehen können, sind die rechte und linke Polsterung 30 Pixel. Dann ist das Letzte, was wir brauchen, ein Knopf. Es wird unser kompletter Knopf sein. Ich werde diese Bestätigungs-Schaltfläche wählen, kopieren Sie dies, fügen Sie es hier ein. Lasst uns diese Kreise entfernen, wir brauchen sie nicht. Außerdem werde ich die Farbe in ein einfarbiges Weiß ändern. Stellen Sie sicher, dass Sie das Rechteck 2 nicht Rechteck 1 auswählen, weil dies unsere Maske ist und ich werde die Farbe zu einfarbig weiß ändern. Ziemlich gut. Die Textfarben sollten wie folgt C8, C8 und C8 sein. Lassen Sie es uns ändern, um es zu beenden. Das letzte, was wir zu dieser Schaltfläche hinzufügen müssen, ist ein Häkchen-Symbol. Lassen Sie mich diese Häkchen-Symbol von unserer Anmeldeseite kopieren und einfügen, und ich werde es hier einfügen. Lassen Sie uns die gleiche Farbe für diese Tick-Symbol als auch wählen. Ich werde es vertikal an meinem Text ausrichten, ziemlich gut, und stellen Sie sicher, dass Sie diese Ebene innerhalb Ihrer Schaltflächengruppe verschieben. Es wird hier sein und die linke Polsterung wird ein Pixel sein. Der Grund, warum wir eine hellgraue Farbe für diese Elemente gewählt haben , ist, dass diese Schaltfläche in diesem Bildschirm inaktiv ist, da der Benutzer dieses Formular noch nicht ausgefüllt hat. Nun lassen Sie es uns umbenennen, um es abzuschließen. Fantastisch. Jetzt ist alles erledigt. Jetzt gehen wir weiter und entwerfen unsere Profil fertig Seite. Ich werde diesen Bildschirm so duplizieren, und dann füllen wir zuerst diese Textfelder zusammen. Die erste wird Emma unterstreichen Ashley, Sie können wählen, was Sie wollen, es spielt keine Rolle. Ich werde es weiß machen. Der Vorname wird Emma sein, auch weiß, Nachname sollte Ashley sein. Lass es uns weiß machen, ziemlich gut. Das Geburtsdatum wird 20 Dezember 1990 sein. Lass es uns weiß machen. Ziemlich gut. Wie ich bereits erwähnt habe, werden wir unser T-Symbol einblenden. Gehen wir weiter und verbergen sie so. Fantastisch. Die Farbe unserer kompletten Texte sollte in 2B47 und FC geändert werden. Lassen Sie uns das kopieren, weil ich auch die Farbe dieses T-Symbols ändern werde, fügen Sie hier ein. Ziemlich gut. Jetzt ist diese Schaltfläche aktiv. Nun gehen wir weiter und ändern unseren Profilplatzhalter. Wir werden ein Bild hinzufügen. Zuallererst müssen wir dieses Kamera-Symbol so entfernen, dann wählen wir diese weißen Quadrat. Jetzt werde ich ein Plugin wählen. Ich werde den Inhalt echtes Plug-In verwenden, das ich Ihnen bereits gezeigt habe, wie Sie verwenden können. Ich werde hier auf diesen Inhalt klicken, und gehen wir zu Avataren, wählen weiblich, und lassen Sie uns es aktualisieren, bis Sie ein tolles Bild bekommen. Ich finde es ziemlich gut, fantastisch. Außerdem werde ich diesem Quadrat einen Schlagschatten hinzufügen, also lassen Sie uns Effekte hinzufügen. Ich werde die Einstellung ändern, also setzen wir die Unschärfe auf 22 und die weiße auf acht und verringern die Deckkraft auf 20 Prozent. Fantastisch. Danach wähle ich diese blauen und violetten Quadrate aus, verschiebe sie aus unserer Profilbildgruppe. Lasst uns sie ein bisschen so skalieren. Ich werde zuerst das blaue auswählen, doppelklicken, darauf, um in den Bearbeitungsmodus zu gelangen. Danach werde ich einen Knoten in der Mitte hinzufügen, wie diesen, und dann werde ich ihn auf die rechte Seite verschieben, bis ich eine Form wie diese bekomme. Ziemlich gut. Verschieben wir es nach rechts, klicken Sie auf „Fertig“, und lassen Sie uns dasselbe mit diesem violetten Quadrat tun. Ich werde hier einen Knoten hinzufügen und ihn so verschieben. Ziemlich gut. Bewegen Sie es nach oben. Drehen wir es ein bisschen so. Ich werde es jedoch skalieren, um es größer zu machen, ein wenig mehr. Lassen Sie uns dieses blaue auch skalieren, drehen wir es ein wenig. Ziemlich gut. Ich werde es nach rechts verschieben, bis ich den bestmöglichen Standort bekomme. Wählen wir nun beide aus. Ich werde sie unten direkt unter unser Profilbild und auch unsere Statusleiste verschieben, die diese Zeile ist. Ziemlich gut. Bewegen Sie sie nach oben und das ist alles. Es ist ziemlich gut, nicht wahr? Das einzige, was mir aufgefallen ist, ist, dass wir diese vollständige Textebene nicht an der Mitte ausgerichtet haben. Lassen Sie uns voran und wählen Sie diesen vollständigen Text und diese Häkchen-Symbol, gruppieren Sie sie und richten Sie sie an der Mitte aus. Ich werde dasselbe auch mit diesen Elementen tun. Ich wähle sie aus, gruppiere sie, wähle das Rechteck aus und richte sie an der Mitte aus. Jetzt ist alles erledigt. Siehst du, wie schön es ist? Es ist ziemlich interessant, nicht wahr? Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Im nächsten Video gestalten wir gemeinsam unsere Homepage. So sehen wir uns dann. 83. Homepage: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir gemeinsam unsere Homepage gestalten. Ohne weitere Umschweife, lassen Sie uns beginnen, indem dieses Profil fertig Zeichenfläche wie folgt duplizieren, dann werde ich fast alles außer dem Hintergrund entfernen. Lassen Sie uns versuchen, alle diese Elemente zu entfernen, auch diesen linken Pfeil, weil ich das nicht mehr brauche, und auch diesen Hausindikator. Dann lassen Sie uns diese Rechteck-4-Ebene verwenden, die unser Hintergrund ist, und ich werde die Höhe auf 278 ändern, wie folgt. Danach werde ich darauf doppelklicken. Jetzt bin ich im Bearbeitungsmodus. Wählen wir dann diese beiden unteren Knoten aus. Ich werde den ersten auswählen und Shift halten, und wählen Sie die zweite, und lassen Sie den Eckenradius auf 66 wie folgt einstellen, fertig. Achten Sie darauf, die Eckenglättung zu verwenden, um glatte Ecken wie diese zu erhalten. Fantastisch. Das nächste, was wir brauchen, ist das Hamburger-Menü-Symbol oben. Lass uns weitermachen und ein Bild platzieren. Von den Symbolen, Sie wählen Hamburger Menü, legen Sie es hier. Lassen Sie uns nun die Polsterungen überprüfen. Setzen wir nun die obere Überschrift auf 27, wie folgt, und eine linke Polsterung wird 30 sein. Fantastisch. Dann brauche ich dieses Profilbild, um direkt an den Anfang dieser Kopfzeile zu setzen. Gehen wir weiter und kopieren und fügen Sie es hier so ein. Dann werde ich es nach unten skalieren. Verwenden wir das Skalieren-Werkzeug. Lass es uns auf 50 mal 50 runter bringen, so. Ich werde es so auf 50 mal 50 setzen. Bringen wir es gleich da drüben. Dann muss ich diesem Profilbild einen Statusindikator hinzufügen , um anzuzeigen, ob dieser Benutzer online ist oder nicht. Fügen wir einen Kreis wie diesen hinzu. Ich werde es auf 10 mal 10 setzen, und lasst uns die Farbe auf 20C968 so ändern, und ich brauche einen Strich. Fügen wir einen Strich hinzu und ändern Sie die Farbe in Weiß. Fantastisch. Danach werde ich es auf der rechten Seite ausrichten. Lass es uns ein bisschen so nach oben bewegen. Wie Sie sehen können, ist dieser Indikator perfekt an den Kanten dieses Profilbildes ausgerichtet. Dann lassen Sie uns diesen Kreis in diese Profilbildgruppe setzen, und das ist alles. Danach müssen wir die Polsterungen überprüfen. Die obere Polsterung wird 24 Pixel sein, so, und das rechte Recht sollte 30 sein. Ziemlich gut. Das nächste, was wir brauchen, ist ein Text. Fügen wir eine Textebene hinzu und schreiben „Guten Morgen Emma“. Dann werde ich die Schriftart auf Montserrat so ändern, machen Sie es regelmäßig und die Schriftgröße sollte 24 Punkte und die Farbe offensichtlich weiß sein. Lassen Sie uns nun die Polsterungen überprüfen. Die linke Polsterung sollte 60 Pixel betragen, und eine obere Polsterung sollte 80 sein. Fantastisch. Was brauchen wir jetzt? Hier werde ich eine Karte platzieren, die aus einem Balkendiagramm besteht, das den verfügbaren Saldo dieses bestimmten Benutzers anzeigt. Ich muss ein Rechteck wie dieses hinzufügen. Lassen Sie uns zunächst die Breite und Höhe auf 315 einstellen, so richten Sie sie an der Mitte aus und erhöhen Sie den Eckenradius auf 40. Stellen Sie auch sicher, dass Sie glatte Ecken wie diese haben. Dann werde ich die Farbe in Weiß ändern. Fantastisch. Fügen wir nun einen Schlagschatten hinzu. Ich werde Effekte hinzufügen und die Einstellungen ändern. Die Unschärfe wird 50 sein, das X wird Null sein, und das Y sollte in diesem Fall neun sein. Verringern wir die Deckkraft auf 10 Prozent. Ziemlich gut. Ich werde die obere Polsterung dieser Karte auf 16 Pixel wie folgt setzen. So weit so gut. Dann brauchen wir die Textebene hier, ich werde Ihre Gesamtbilanz schreiben. Ziemlich gut. Lassen Sie mich die Schriftgröße auf 16 Punkte wie folgt reduzieren. Seine oberste Überschrift wird 32 Pixel sein, die linke Polsterung 32 Pixel ebenfalls, duplizieren sie. Jetzt werde ich den Weg zu fett und eine Schriftgröße auf 30 Punkte ändern. Hier schreiben wir den Betrag. Zum Beispiel, schreiben wir $8.500 so, und ich werde die Farbe auf 2D99FF ändern, so. Es ist Top-Polsterung wird acht sein, wie jetzt. Das nächste, was wir brauchen, ist ein Mehr Symbol. Lass uns weitermachen und ein Bild platzieren. Hier haben wir das More Symbol, ich werde es hier platzieren. Wie Sie sehen können, ist es jetzt unsichtbar. Wie ich bereits erwähnt habe, ist es ein Fehler. Um dies zu beheben, können Sie Ihre Datei einfach schließen und wieder so öffnen, und jetzt ist sie sichtbar. Lassen Sie uns dieses Symbol verwenden. Ich werde es auf die rechte Seite schieben. Nun lassen Sie es uns an unserem Text ausrichten. Lassen Sie uns dieses kleinere Symbol wählen, und diese Textebene und klicken Sie auf „Vertikal ausrichten“. Ziemlich gut. Die richtige Polsterung wird ebenfalls 32 Pixel betragen. jedoch daran, die Farbe dieser Textebene zu ändern. Ich werde es auf 3A3A3A setzen. Ziemlich gut. Jetzt ist es an der Zeit, unser Balkendiagramm zusammen zu erstellen. Zuallererst brauchen wir ein Rechteck, um unsere Balken zu erstellen. Ich werde Drag & Drop so. Setzen wir die Breite auf neun und die Höhe auf 122, so. Ich werde darauf doppelklicken und lassen Sie uns diese beiden oberen Knoten auswählen, weil ich den Eckenradius von ihnen erhöhen werde , bis ich einen vollständig abgerundeten Balken wie diesen bekomme. Dann lass uns das wählen. Ich wähle die Augentropfer und wähle das gleiche Blau wie unsere Menge Text, so. Ich werde es ein wenig nach unten bewegen, dann duplizieren, es auf die rechte Seite bewegen. Ich werde seine Höhe so verringern. Setzen wir es auf 32 Pixel. Ziemlich gut. Dann werde ich mit der rechten Maustaste darauf klicken, und wählen wir „Vertikal spiegeln“. Wie Sie sehen können, ist es umgedreht. Ich werde es nach unten bewegen und überprüfen wir die Polsterungen. Die linke Polsterung sollte vier Pixel wie folgt sein. Das Letzte, was wir tun müssen, ist die Farbe zu ändern. Ich werde es auf A5F3FF setzen. Ziemlich gut. Lasst uns sie zusammenfassen. Ich werde es Spalte 1 nennen, duplizieren Sie es, und lassen Sie uns die linke Polsterung auf 16 Pixel wie folgt setzen. Jetzt werde ich die Höhe dieser Balken ändern. Wählen wir diesen Balken aus. Ich werde es auf 100 setzen, so. Jetzt ist es an der Zeit, auch die Höhe dieses Balkens zu verringern. Fügen wir es zu 23. Ziemlich gut. Dann duplizieren wir es noch einmal. Platzieren Sie es mit einer 16 Pixel linken Polsterung. Ich werde die Höhe auf 89 verringern, so, und für diesen, lassen Sie uns es auf 15 reduzieren, ziemlich gut. Lassen Sie es uns noch einmal duplizieren. Setzen wir die Höhe auf 61, und lassen Sie uns die Höhengröße dieses kleineren auf sieben reduzieren. Dann duplizieren wir es noch einmal. Diesmal müssen wir den Platz dieser beiden Balken ändern. Sie zunächst mit der rechten Maustaste und wählen Sie „Vertikal umkehren“. Ich werde es so runterziehen. Danach verringern wir die Höhe auf 44. Ziemlich gut, und wählen Sie diese auch. Klicken Sie auf „Flip vertikal“ verschieben Sie es nach oben, und jetzt lassen Sie uns seine Höhe auf 27 erhöhen, wie folgt. Lassen Sie es uns duplizieren. Ich werde diesen auf 15 reduzieren, so. Erhöhen wir die zweite auf 70. Schließlich, die letzte, werde ich es duplizieren und diesen Balken ein wenig verringern. Ich werde es auf 10 setzen und den nächsten auf 108 erhöhen, so. Nun, wählen wir sie alle aus, gruppieren sie, und ich werde es Spalten wie diese nennen. Richten wir es mit meiner Karte aus. Ich werde dieses Rechteck auswählen, wir Shift gedrückt und klicken Sie darauf, richten Sie es an der Mitte aus. Setzen wir die obere Polsterung auf 26, so und eine untere Polsterung wird 32 sein weil die obere Polsterung hier 32 Pixel beträgt, also müssen wir die Höhe dieses Quadrats erhöhen. Wie Sie sehen können, sind es 26. Ich werde die Höhe ändern. Lassen Sie uns zuerst diese Höhe und Breite aufheben, und dann schreiben wir plus sechs. Schauen wir es uns an. Da gehen wir. Jetzt haben wir auch eine 32-Pixel-Button-Polsterung. guter Letzt müssen wir all diese Elemente zusammenfassen. Lassen Sie uns alle auswählen, gruppieren sie, und ich werde es Balance-Karte nennen. Jetzt gehen wir weiter und erstellen unsere Tab-Leiste. Wir müssen eine Tab-Leiste direkt am unteren Rand dieses Bildschirms platzieren. Anstatt eine vorgefertigte Tab-Leiste zu verwenden, werde ich Ihnen zeigen, wie Sie Ihre benutzerdefinierte Registerkarte entwerfen können, die ziemlich erstaunlich ist. Gehen wir weiter und fügen Sie hier ein Rechteck ein. Ich werde Drag & Drop und ändern Sie die Farbe in Weiß. Ziemlich gut. Ich werde einige Schlagschatten hinzufügen und lassen Sie uns die Unschärfe auf 20 ändern. Das y wird zwei sein. Außerdem müssen wir die Deckkraft auf 10 Prozent reduzieren. Ziemlich gut. Dann lassen Sie uns auch die Höhe auf 92 verringern. Ich werde es nach unten ausrichten. Auch wir brauchen den Hausindikator. Lassen Sie uns fortfahren und kopieren und fügen Sie es von einem unserer vorherigen Bildschirme wie folgt ein. Ziemlich gut. Jetzt ist es Zeit, unsere Tabs zu erstellen. Grundsätzlich werden wir drei verschiedene Registerkarten haben. Die Registerkarte auf, die Benachrichtigungsregisterkarte und eine Profilregisterkarte. Lass uns weitermachen und ein Bild platzieren. Im Icons Ordner haben Sie einen Tap oder Ordner sowie drei verschiedene Icons. Ich werde sie alle einzeln platzieren. Dann lasst uns ihren Platz ändern. Dieses Benachrichtigungssymbol befindet sich direkt in der Mitte und das Profil sollte auf der rechten Seite sein. Lassen Sie uns nun die Polsterung zwischen ihnen einstellen. Zuallererst werde ich alle so auswählen und aus dem Ausrichtungsabschnitt werde ich auf horizontalen Abstand so verteilen klicken. Danach mit diesem Indikator kann ich die Polsterung zwischen ihnen leicht auf 90 einstellen. Ziemlich gut. Dann brauchen wir einen kreisförmigen Indikator, um zu zeigen, dass diese Registerkarte aktiv ist. Ich werde einen Kreis erstellen. Machen wir es fünf mal fünf. Ich werde die Pipette wählen, um die gleiche Farbe wie unser Symbol auszuwählen. Lassen Sie uns es an der Mitte ausrichten. Ziemlich gut. Es ist Top-Polsterung wird ein Peak Zellen sein. So wie das. Jetzt gruppieren wir sie, das wird unser Portemonnaie sein. Ziemlich gut. Wir haben auch Benachrichtigungen und Profil. Wählen Sie alle aus, gruppieren Sie sie. Noch einmal werde ich es Tabs nennen, und lassen Sie uns es so an der Mitte ausrichten. Es wird oben Polsterung 24 Pixel wie folgt sein. Jetzt sind wir fast fertig. Ich werde jedoch einige Komponenten erstellen um Ihr Leben viel, viel einfacher zu machen. Wählen wir diese Gruppe Wallet und ich werde auf „Create Component icon“ klicken. Da gehen wir. Jetzt haben wir gerade eine Komponente erstellt. Dann lassen Sie uns das kopieren und ich werde eine neue Seite erstellen. Nennen wir es Symbole, und ich werde es hier einfügen. Da gehen wir. Dann muss ich diese beiden Symbole kopieren und einfügen, also lassen Sie uns sie auswählen, kopieren und in die Symbolseite direkt hier einfügen. Fantastisch. Grundsätzlich benötigen wir für jedes Symbol zwei verschiedene Zustände, den aktiven Zustand und den Deaktivierungsstatus. Diese blaue wird unser aktiver Zustand sein, und diese dunkelgraue wird unser deaktivierter Zustand sein. Was wir tun werden, ist, hier zwei verschiedene Zustände zu schaffen. Jetzt werde ich es duplizieren. Lasst uns es so von seinem Meister lösen. Entfernen Sie den Kreis und ich werde die Farbe zu diesem dunkelgrau ändern. Wählen wir diese Pipette und wählen Sie diese aus. Der Farbcode ist 3A, 3A und 3A. Jetzt werde ich diesen Wallet-Rahmen auswählen und auf „Komponente erstellen“ klicken, wie folgt. Ändern wir den Namen in Wallet/die aktive. Benennen wir es in Wallet/active um. Ziemlich gut. Tatsächlich ist dies, wie Sie sehen können, eine Instanz der Master-Komponenten. Unsere Master-Komponente ist da. Ich werde das abschneiden. Lassen Sie uns es hier einfügen, so dass wir die Master-Komponente haben können. Ich werde das entfernen, und da gehen wir. Benennen wir es erneut in Wallet/active um. Wir werden das Gleiche auch für diese beiden Symbole tun. Zur Benachrichtigung werde ich es duplizieren. Lassen Sie es uns auf die linke Seite bewegen. Ändern wir die Farbe in dieses Blau, so. Ich brauche diesen Kreis auch, also werde ich ihn hier kopieren und einfügen. Stellen Sie sicher, dass es vollständig ausgerichtet ist. Wählen Sie diese beiden Ebenen, gruppieren Sie sie, und lassen Sie uns Benachrichtigung/aktiv schreiben, und klicken Sie auf „Komponente erstellen“ wie folgt. Der zweite wird Benachrichtigung/deaktiv sein. Auch für das Profil werde ich es duplizieren. Lassen Sie uns seine Farbe in diese blaue ändern. Ich werde diesen Kreis auch kopieren und einfügen, sie gruppieren und nennen es Profil, aktiv. Klicken Sie auf „Komponente erstellen“. Der letzte sollte wie folgt Profil deaktiv sein und auf „Komponente erstellen“ klicken. Wir haben vergessen, eine Komponente davon zu erstellen, die aktive Benachrichtigung. Lassen Sie uns auch auf Komponenten für diese erstellen klicken. Wie Sie sehen können, haben wir hier einen anderen Rahmen, also lassen Sie uns das entfernen. Wir brauchen sie nicht. Ziemlich gut. Wir haben sechs verschiedene Komponenten. Wie können wir sie jetzt benutzen? Gehen wir zurück zu unserer Seite 1, und jetzt müssen wir unsere Symbole durch unsere Komponenten ersetzen. Gehen wir zu Vermögenswerten. Hier haben wir drei verschiedene Komponenten. Lass uns die aktive Brieftasche hier platzieren, ziemlich gut. Außerdem werde ich beide entfernen. Lassen Sie uns auch die Deaktivierungsbenachrichtigung platzieren. Ziemlich gut. Auch das deaktive Profil, wählen Sie alle von ihnen, klicken und verteilen Sie horizontalen Abstand, richten Sie sie auch vertikal aus, und lassen Sie uns die Polsterung auf 90 setzen, wie folgt. Noch einmal, gruppieren Sie sie und ich werde es Tabs nennen. Lassen Sie uns diese Gruppe an der Mitte ausrichten. Ziemlich gut. Jetzt müssen wir diese beiden Symbole an der Spitze dieser Gruppe ausrichten. Lassen Sie uns alle auswählen und klicken Sie auf „An der Spitze ausrichten“. Ziemlich gut. Jetzt zeige ich Ihnen, warum wir das getan haben. Angenommen, Sie werden dies zum aktiven machen, anstatt unsere Symbole immer wieder zu ändern, können wir jetzt leicht zum Weihrauch Abschnitt gehen und aus diesem Dropmenü können wir leicht deaktiv oder aktiv wählen. Ziemlich gut. Nun lasst uns unsere Elemente gruppieren. Ich werde diese Registerkarten und auch unser Rechteck und diese Home-Indikator auswählen. Gruppieren Sie sie und ich werde es Tab-Leiste nennen. Das letzte, was wir erstellen müssen, ist eine andere Karte hier. Wählen wir diese Balance-Karte aus. Ich werde Befehlstaste halten und darauf klicken. Kopieren Sie das, und fügen Sie es hier ein. Ändern wir die Höhe auf 146, so. Ich werde es nach unten verschieben und lassen Sie uns die obere Polsterung auf 24 Pixel setzen. Ziemlich gut. Dann werde ich diesen Knopf wählen. Ich werde Befehlstaste halten und dieses Rechteck 2 auswählen. Dann lasst uns mit der rechten Maustaste auf dieses Rechteck 2 klicken, weil ich die Eigenschaften dieser Schaltfläche kopieren und einfügen werde, brauche ich diesen Farbverlauf. Lassen Sie uns auf „Eigenschaften kopieren“ klicken, und ich werde diese Karte auswählen und fügen Sie sie hier ein. Ziemlich gut. Denken Sie jedoch daran, auch den Eckenradius zu ändern. Weil wir, dass die Eigenschaften dieser Schaltfläche einfügen, so müssen wir es wieder auf 40 ändern. Ziemlich gut. Danach wähle ich diese Kreise aus, kopiere sie, füge sie hier so ein. Ziemlich gut. Lassen Sie uns diese lila ein wenig nach unten bewegen und diese blaue ein wenig nach oben. Jetzt werde ich dieses Rechteck so duplizieren verschieben Sie es nach unten und jetzt kann ich diese Kreise leicht maskieren. Lassen Sie uns Rechtecke 6 verwenden, das ist das höhere Rechteck, und diese Kreise und klicken Sie auf Maske. jedoch daran, diese Schlagschatten zu entfernen. Ich denke, es ist eine gute Idee, den Ort dieser beiden Kreise zu ändern. Ich werde diese blaue nach unten und diese lila nach oben bewegen, um so etwas zu bekommen. Lasst uns sie ein wenig skalieren. Jetzt sieht es toll aus. Dann brauchen wir eine Textebene, also lassen Sie uns eine einfügen. Lassen Sie uns schreiben, überprüfen Sie Ihre Bankkonten“ wie folgt, und erhöhen Sie die Schriftgröße auf 20 Punkte. Ich werde es weiß machen. Lassen Sie uns auch den Rahmen dieser ändern, um so etwas zu bekommen. Dann werde ich es mit meiner Karte ausrichten. Wir müssen beide auswählen, sie vertikal ausrichten und die linke Polsterung sollte 32 Pixel betragen. Wir sind fast fertig. Das einzige, was wir hinzufügen müssen, ist ein kleiner Pfeil nach rechts. Platzieren wir ein Bild. Verwenden wir einen kleinen Pfeil und legen Sie ihn hier. Ziemlich gut. Lassen Sie es uns vertikal ausrichten. Fantastisch. Die rechte Polsterung wird ebenfalls 32 sein. Jetzt ist es Zeit, alle unsere Elemente auszuwählen. Wählen wir diese Massengruppe, diese Rechteck 7 als auch. Diese Texte Layer und dieser kleine Pfeil, gruppieren sie und nennen wir es Bankkontokarte. Das ist alles. Alles klar, Leute, es war ausgerichtetes Video. Wie Sie jedoch sehen können, könnten Sie diese erstaunlichen und modernen Dashboards für unsere Finanz-App erstellen. Das Letzte, was wir tun müssen, ist die Umbenennung unseres Kunstboards auf Homepage. Alles klar Leute, vielen Dank, dass du dieses Video gesehen hast. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 84. Menü: Hallo, alle, und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir unseren Menübildschirm gemeinsam gestalten. Grundsätzlich, wenn der Benutzer auf dieses Hamburger-Menü-Symbol rechts oben auf diesem Homepage-Bildschirm klickt , sollte unser Menü von der linken Seite des Bildschirms hineinschieben. Zunächst werde ich voran gehen und hier ein neues Kunstboard einfügen. Also lassen Sie uns „A“ drücken und wählen iPhone 11 Pro oder X ziemlich gut. Dann werde ich es so in Menü umbenennen. Danach müssen wir fortfahren und den Bildschirm exportieren, weil wir das brauchen werden. jedoch daran, zuerst die Statusleiste und diese Home-Anzeige auszublenden. Ich werde dir sagen, warum. Lassen Sie es uns zuerst exportieren. Im Abschnitt Export können Sie 2x wählen, um eine bessere Auflösung zu erhalten, und das Format sollte PNG sein. Sie könnten auch JPG wählen, aber PNG ist in Ordnung. Klicken wir auf diesen „Export-Startseite“ -Button. In unserem Ordner „Assets“ werde ich fortfahren und einen neuen Ordner erstellen. Schreiben wir Exporte und speichern Sie es hier. Dann denken Sie daran, Ihre Statusleiste und auch Ihre Home-Anzeige einblenden. Ziemlich gut. Jetzt ist es an der Zeit, unser exportiertes Bild hier zu platzieren. Gehen wir voran und wählen Sie das aus unserem Ordner „Assets“. Da gehen wir, Exporte, Homepage. Ich werde es hier platzieren. Fantastisch. Der Grund, warum ich die Statusleiste und auch diese Home-Anzeige versteckte, war, weil wir jetzt den Bildschirm auf die rechte Seite bewegen müssen. Wenn wir sie nicht verstecken würden, wäre ihr Platz hier oben vermasselt. Es macht also keinen Sinn, die Statusleiste und die Home-Anzeige auf die rechte Seite zu verschieben. Es ist nicht möglich. Jetzt bewegen wir es ein wenig auf die rechte Seite. Ich werde das X so auf 266 setzen. Ziemlich gut. Danach muss ich eine Overlay-Ebene platzieren, um sie dunkler zu machen. Lassen Sie uns voran und erstellen Sie ein Rechteck. Ich werde Drag & Drop so. Machen wir es ein wenig größer, setzen Sie es auf Schwarz und verringern Sie die Deckkraft auf 30 Prozent wie folgt. Es ist ziemlich gut. Dann müssen wir unser Menü erstellen. Lassen Sie uns hier ein weiteres Rechteck erstellen. Drag & Drop. Wenn Sie eine neue Ebene erstellen, kann sie manchmal außerhalb Ihrer Kunsttafel platziert werden. Wie Sie jetzt sehen können, ist es außerhalb meiner vielen Kunsttafeln, also lassen Sie es uns hineinschieben. Da gehen wir. Dann gehen wir weiter und ändern Sie die Breite auf 281 so. Die Höhe sollte 812 sein, und ich werde es weiß machen. Ziemlich gut. Dann lassen Sie uns doppelklicken, um in den Bearbeitungsmodus zu gelangen , und ich werde diese beiden Knoten auswählen, die oberen rechten und die unteren rechten Knoten wie folgt. Erhöhen wir den Eckenradius auf 20. Ziemlich gut. Allerdings werde ich es glatt machen, also lasst uns diesen Betrag auf 60 Prozent erhöhen. Ziemlich nett. Jetzt können wir diesen Home-Indikator so kopieren und einfügen. Ich werde es in die Mitte und nach unten legen. Ziemlich gut. Was brauchen wir für dieses Menü? Eigentlich brauchen wir dieses Profilbild, also werde ich es kopieren und hier einfügen, es auf die linke Seite verschieben, und seine linke Polsterung sollte 30 Pixel wie folgt betragen. Ziemlich gut. Lassen Sie mich hineinzoomen. Die andere Sache, die wir hinzufügen müssen, ist der Name des Benutzers und der Benutzername. Fügen wir hier einen Text ein. Ich werde Emma Ashley so schreiben. Ich werde die Schriftart in Montserrat ändern. Ziemlich gut. Lassen Sie uns es auf fett setzen und die Schriftgröße sollte 16 Punkte betragen und ich werde die Textfarbe auf 3A3A und 3A ändern. Ziemlich gut. Dann duplizieren Sie es, verschieben Sie es nach unten, und hier werde ich den Benutzernamen schreiben. Lassen Sie uns @emma_ashley schreiben und dann kann ich den Weg zu regulären und auch die Schriftgröße auf 14 so ändern. Die obere Polsterung sollte Null sein und nun wählen wir beide aus, gruppieren sie und richten sie an unserem Profilbild wie folgt aus. Die linke Polsterung sollte acht Pixel betragen. Ziemlich gut. Jetzt ist es Zeit, unsere Untermenüs zu erstellen. Lassen Sie uns zunächst einen Text einfügen. Das erste Menü wird Zahlungen wie diese sein und die Schriftgröße sollte 18 Punkte betragen, die Schriftart sollte Montserrat sein und das Gewicht sollte regelmäßig sein. Ich muss jedoch die Farbe ändern, um zu sein und FC so. Lass es uns ein bisschen nach oben bewegen. Dann müssen wir ein Symbol dafür platzieren. Lass uns weitermachen und ein Bild platzieren. Hier im Icons Ordner haben Sie den Menüordner und wir haben sechs Symbole. Für jetzt wählen wir Zahlungen, legen Sie es hier. Ziemlich gut. Lassen Sie uns beide auswählen und sie vertikal wie folgt ausrichten und die linke Polsterung sollte acht Pixel betragen. Gruppieren Sie sie. Dann werde ich einen Hintergrund dafür erstellen, weil wir verschiedene Zustände haben werden . Wenn das Untermenü ausgewählt ist, sollte sein Hintergrund etwas dunkler sein. Lassen Sie uns hier ein Rechteck erstellen. Ich werde Drag & Drop so und lassen Sie uns die Höhe auf 60. Ich werde darauf doppelklicken und diese beiden Knoten verwenden, oben rechts und unten rechts, und setzen Sie den Eckenradius auf 14 wie folgt. Denken Sie daran, sie glatt zu machen. Ziemlich gut. Danach werde ich die Farbe in F2F4 und F8 ändern , um so etwas zu bekommen, und wir werden diese Ebene nach unten verschieben. Ziemlich gut. Lassen Sie uns unseren Text vertikal an unserem Hintergrund ausrichten. So weit so gut. Dann ist das nächste, was wir brauchen, ein Pfeil nach rechts, also werde ich gehen und einen Pfeil, Symbole, und hier haben wir diesen kleinen Pfeil. Lassen Sie es uns hier platzieren. Dann werde ich es so hochziehen. Lassen Sie uns schließlich seine Farbe ändern. Ich werde es auswählen. Stellen Sie sicher, dass Sie den Rahmen nicht auswählen. Sie müssen die Form auswählen, also drücken und halten Sie die „Befehlstaste“ oder „Strg“ -Taste auf Ihrer Tastatur und wählen Sie sie aus. Jetzt wählen wir die Form aus. Dann wähle ich die Augentropfer und lass uns die gleiche Farbe wie unser Symbol auswählen. Danach müssen wir diesen kleinen Pfeil mit unserem Hintergrund und unserem Text ausrichten . Wie können wir das tun? Lassen Sie uns zuerst mit gelesenem Text wie folgt ausrichten. Da wir unseren Text bereits in der Mitte ausgerichtet haben, sind wir sicher, dass dieses Symbol auch mit unserem Hintergrund ausgerichtet ist. Seine rechte Polsterung wird 32 Pixel sein, so. Wie Sie sehen können, sind die obere und untere Polsterung 24 Pixel und die linke Polsterung unseres Symbols und der Textgruppe sollte 34 Pixel wie folgt sein und jetzt ist alles fertig. Das nächste, was ich tun werde, ist die Auswahl dieser Gruppe und auch der kleine Pfeil. Noch einmal, gruppieren Sie sie und ich werde es in Zahlungen umbenennen. Ziemlich gut. Duplizieren Sie es, verschieben Sie es nach unten, und der Abstand zwischen dem nächsten Untermenü und dem vorherigen Untermenü sollte 50 Pixel wie folgt betragen. Jetzt werde ich es in Transactions ändern. Fantastisch. Lassen Sie uns auch das Symbol ändern, also werde ich ein neues Symbol platzieren. Aus dem Menüordner haben wir Transaktionen. Lassen Sie es uns hier platzieren und ich werde dieses entfernen und es nach unten bewegen, Ihrem Text ausrichten. Ziemlich gut. Auch müssen wir es mit unserem Zahlungssymbol ausrichten. Lassen Sie uns beide auswählen. Wenn Sie diese auch auswählen möchten, halten Sie „Shift“ und „Command“ zusammen oder „Shift“ und „Control“. klicken Sie darauf und da gehen wir. Sie sind ausgewählt und ich werde es so horizontal an der Mitte ausrichten . Ziemlich gut. Benennen wir diese Gruppe in Transaktionen um und duplizieren sie erneut. Die obere Polsterung sollte 50 Pixel betragen und hier werde ich es in Meine Karten ändern und ein anderes Symbol platzieren. Da gehen wir. Wir haben hier meine Karte. Lassen Sie uns das vorherige Symbol entfernen. Ich werde es nach unten verschieben, ihn vertikal an unserem Text ausrichten, dann werde ich ihn in Meine Karten umbenennen. Noch einmal, duplizieren Sie es, und jetzt müssen wir es in Promotions ändern und ich werde dieses Symbol entfernen. Platzieren wir einen neuen. Wir haben die Promotions hier. Fantastisch. Lassen Sie uns es mit unserer Gruppe ausrichten und es auch mit Ihrem vorherigen Symbol ausrichten, also werde ich diesen, den Rahmen und auch diesen auswählen , ihn horizontal ausrichten. Ziemlich gut. Wie Sie sehen können, befindet sich dieses Symbol außerhalb dieses Ordners, also werde ich es hineinlegen und lassen Sie uns diesen Ordner in Promotions umbenennen. Ziemlich gut. Duplizieren Sie es und das ist unser letztes Untermenü. Nennen wir es Sparen, entfernen Sie das Symbol, und platzieren Sie ein neues Symbol, Einsparungen. Richten Sie es an der Mitte aus und lassen Sie es auch mit Ihrem vorherigen Symbol wie folgt ausrichten. Denken Sie daran, es in diese Gruppe zu setzen und die Gruppe in Sparen umzubenennen, und das ist alles. Haben Sie gesehen, wie einfach es ist, Ihr Menü zu erstellen? Das letzte, was wir erstellen müssen, ist eine Abmelde-Button. Was ich tun werde, ist die Schaltfläche Anmelden hier auf unserer Willkommen-Seite zu finden. Kopieren Sie das, fügen Sie es hier ein. Ich werde vergrößern und zuerst diesen Text in Abmelden ändern. Ziemlich gut. Ich werde dieses Symbol entfernen und wählen Sie dieses Rechteck 2, nicht Rechteck 1. Denken Sie daran, dieses Rechteck 2 und machen Sie es so kleiner. Ich werde die Breite auf 221 setzen. Fantastisch. Platzieren wir ein Symbol. Wir haben Ausloggen, legen Sie es hier, verschieben Sie es so nach unten. Wir brauchen diese Maskengruppe nicht, also können Sie sie entfernen. Lassen Sie uns auch die Polsterung dieses Symbols überprüfen. Zuallererst muss ich es an meinem Text ausrichten. Lassen Sie uns beide auswählen, richten Sie es vertikal so aus, und die rechte Polsterung dieses Symbols sollte 24 Pixel wie folgt betragen. Ziemlich gut. Last but not least, lassen Sie uns es in Abmelden Button umbenennen. Ziemlich gut. Die untere Polsterung sollte 56 Pixel wie folgt betragen. Das ist alles. Alles klar, Leute. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 85. Kreditkarten-Seite: Hallo, alle und willkommen zurück zu einem anderen Video der Partituren. In diesem Video werden wir unsere Karten Bildschirm zusammen gestalten. Ohne weitere Umschweife, lasst uns das loslegen. Zuerst werde ich voran gehen und diese Homepages-Bildschirm auswählen, duplizieren, und ich werde es direkt unter unseren OTP-Bildschirm verschieben, dann müssen wir einige Elemente entfernen. Lassen Sie uns zunächst diese Tab-Leiste entfernen, dann diese Karte, diese Karte sowie Profilbild und auch diese Hamburger-Menü-Symbol. Allerdings müssen wir diesen schwarzen Home-Indikator haben, also lassen Sie es uns kopieren und hier einfügen. Auch müssen wir diesen Pfeil nach links haben, also werde ich das kopieren und es hier mit der gleichen Position einfügen. Eigentlich erkennt Figma automatisch die vorherige Position dieses linken Pfeils. Dann lassen Sie uns ein wenig hineinzoomen. In diesem Bildschirm müssen wir eigentlich so viele Elemente haben. Zuerst müssen wir einen Titel haben. Lassen Sie uns schreiben, Sie können Ihre Karten hier überprüfen „, so. Dann werde ich es ziemlich gut skalieren, und danach werde ich es in fett ändern, und lassen Sie uns auch die linke Polsterung auf 30 Pixel wie folgt setzen. Die obere Polsterung wird 80 Pixel sein, so weit, so gut. Dann müssen wir zwei verschiedene Karten haben, die primäre Karte und eine sekundäre Karte. Danach müssen wir den letzten Transaktionsabschnitt haben. Lassen Sie uns zunächst unsere primäre Karte erstellen. Ich werde ein Rechteck wie dieses erstellen. Legen wir die Breite auf 209 und die Höhe auf 305 wie folgt fest, und ich werde den Eckenradius auf 40 ändern. Denken Sie auch daran, diese Ecken so glatt zu machen, und jetzt werde ich Ihnen eine sehr großartige Technik zeigen. Wir werden einen großartigen Hintergrund für unsere primäre Karte mit radialen Farbverläufen erstellen. Ich werde es auf Weiß setzen, es ist unser weißer Hintergrund, und danach müssen wir unsere radialen Farbverläufe nacheinander erstellen. Ich werde den Farbverlauf in radial ändern, und lassen Sie uns die erste Farbe auf 40D3 und F2 so setzen. Lassen Sie uns diesen Farbcode auch für die zweite Farbe kopieren und einfügen. Denken Sie jedoch daran, die Deckkraft der zweiten Farbe auf Null Prozent wie folgt zu halten, und jetzt werde ich voran gehen und die Richtung dieser Farbe ändern. Lass es uns so bewegen. Nun fügen wir einen weiteren Farbverlauf hinzu, es wird auch radial sein, und lassen Sie uns die Farbe auf E100FF setzen. Lassen Sie uns dies kopieren und fügen Sie es für die zweite Farbe ein. Ich werde die Richtung so ändern. Machen wir es größer, fantastisch, und wir brauchen auch noch einen Farbverlauf. Lassen Sie uns voran und fügen Sie einen weiteren radialen Farbverlauf hinzu, und ich werde die Farbe auf 2B47 und FC so ändern. Ich werde das kopieren und es für die zweite Farbe einfügen, und ich werde die Richtung hier ändern. Lass es uns größer machen. Jetzt werde ich die Richtungen ein wenig ändern, um das bestmögliche Ergebnis zu erzielen. Lassen Sie uns diese hellblauen auch modifizieren. Können Sie sehen, wie einfach es ist, diesen Hintergrund zu erstellen? Jetzt ist es an der Zeit, dieser Karte eine Textebene hinzuzufügen. Ich werde eine Textebene einfügen und schreiben wir für $4.500 so. Ich werde es weiß machen. Die Schriftgröße ist in Ordnung, also werde ich sie auf die linke Seite verschieben. Lassen Sie mich hineinzoomen. Die obere Polsterung wird 38 Pixel betragen, und die linke Polsterung sollte 24 Pixel wie folgt betragen. Dann lassen Sie es uns duplizieren, bewegen Sie es nach unten, und hier werde ich den Titel dieser Karte schreiben. Nehmen wir an, dass diese Karte für eine Firmenzählung ist, also werde ich Firma schreiben, und lassen Sie uns die Schriftgröße auf 18 Punkte reduzieren. Ziemlich gut, und die obere Überschrift wird drei Pixel wie folgt sein. Dann lassen Sie uns eine weitere Textebene für das Ablaufdatum dieser Karte hinzufügen, und ich werde 01/2020 schreiben. Machen wir es zu einem regulären, und ich werde auch die Schriftgröße auf 14 Punkte ändern, und lassen Sie uns die Farbe auch in Weiß ändern. Jetzt müssen wir es ausrichten. Die linke Polsterung sollte 24 Pixel betragen und die untere Polsterung sollte 72 Pixel betragen, wie folgt. Duplizieren Sie es, bewegen Sie es nach unten, und hier müssen wir die Kartennummer schreiben. Ich werde Sterne für die ersten 12 Ziffern wie diese verwenden, und für die letzten vier Ziffern schreiben wir 2204, und seine obere Auffüllung sollte 14 Pixel wie folgt sein. Das letzte, was wir zu dieser Karte hinzufügen müssen, ist das Logo der MasterCard. Ich gehe voran und platziere ein Bild, und aus dem Logo-Ordner werde ich MasterCard-Logo wählen. Lass es uns hier platzieren, fantastisch. Ich werde es nach unten verschieben, und es sollte die untere Polsterung 32 Pixel betragen, und die rechte Polsterung sollte 22 Pixel betragen, so. Jetzt ist alles großartig. Lassen Sie uns voran und wählen Sie alle diese Elemente, weil wir sie gruppieren müssen und nennen wir es MasterCard. Das letzte, was wir tun müssen, ist, diesen Karten einen Schlagschatten hinzuzufügen. Ich werde es öffnen, und wählen wir das Rechteck, das unsere Basiskarte ist, und lassen Sie uns Effekte hinzufügen. Schlagschatten, ich werde die Menge auf 49 und die weiße auf neun setzen, und dann ändern wir die Farbe auf 5988 und F8 so, und lassen Sie uns die Deckkraft auf 20 Prozent reduzieren, fantastisch. Wie Sie sehen können, haben wir gerade unsere erste Karte erstellt, die die primäre ist. Es ist Top-Polsterung wird 16 Pixel sein, perfekt, jetzt ist es Zeit, unsere sekundäre Karte zu erstellen. Ich werde dieses duplizieren, dann werde ich das Skalierungswerkzeug auswählen und ich werde es so skalieren. Ich denke, die Breite 177 ist eine perfekte Dimension dafür. Ich werde es auf die rechte Seite verschieben, die linke Polsterung sollte 24 Pixel betragen und denken Sie daran, sie vertikal so auszurichten. Was werden wir für diese Karte ändern? Das erste, was das Wichtigste ist, ist der Hintergrund. Ich werde alle diese Verläufe entfernen, weil Sie eine einfarbige weiße Farbe haben werden, dann wählen wir alle Textebenen aus, und ich werde den Farbcode auf 3A3A und 3A setzen. Dann werde ich diesen Betrag auf 4.000 so ändern, und auch diese Firma nimmt nach Hause. Das Letzte, was wir ändern müssen, ist die Farbe unseres Schlagschattens. Ich werde dieses Rechteck 14 auswählen, und lassen Sie uns die Farbe in Schwarz ändern. Mit 10 Prozent Deckkraft sieht es jetzt jedoch gut aus. Jetzt ist es an der Zeit, unsere letzten Transaktionen Abschnitt zu erstellen. Zuallererst werde ich einen Titel haben. Das ist Schreiben, die letzten Transaktionen. Ich werde die Schriftgröße auf 22 erhöhen, es wird kahl sein und die Schriftart sollte Montserrat sein, also ist alles perfekt außer dem Farbcode. Ich werde es auf 3A3A und 3A ändern, so, dann lassen Sie es uns ausrichten. Die linke Polsterung sollte 30 Pixel betragen, wie diese, und wir haben vergessen, die linke Polsterung dieser Karte zu überprüfen, also lassen Sie uns beide auswählen. Wie Sie sehen können, ist die linke Polsterung auf 32 Pixel eingestellt, ich werde es 30 machen, jetzt ist es großartig. Was brauchen wir hier? Wir müssen drei verschiedene Transaktionen mit Titel, Preis und einem Symbol erstellen . Lassen Sie uns zunächst eine andere Textebene erstellen. Nehmen wir an, dass die erste Transaktion mit dem Einkaufen verbunden ist. Ich werde einkaufen schreiben, lass es uns auswählen und ich werde es regelmäßig machen, und auch, lassen Sie uns die Schriftgröße auf 18 Punkte reduzieren. Ich werde den Farbcode auf 3A3A und 3A so ändern. Duplizieren Sie es und verschieben Sie es nach unten, und jetzt müssen wir die genaue Zeit und das Datum für diese Transaktion schreiben. Schreiben wir 15 März 2019, und lassen Sie uns 8:20 Uhr schreiben, und dann lassen Sie uns die Schriftgröße auf 16 Punkte reduzieren, und auch den Farbcode zu BFBF und BF wie folgt. Ich denke, es ist besser, die Schriftgröße vielleicht auf 12 Punkte zu reduzieren. Ja, es ist großartig, und die oberste Überschrift sollte vier Pixel sein, also ist jetzt alles großartig. Was brauchen wir dann noch? Wir brauchen ein Symbol rechts auf der linken Seite, also werde ich voran gehen und einen Kreis wie diesen erstellen. Es sollte 48 mal 48 Pixel sein, und dann lassen Sie uns den Farbcode auf FFCF und 87 ändern, fantastisch. Danach werde ich das spezifische Symbol bringen, das ich bereits für Sie vorbereitet habe, Symbole. Hier Transaktionen haben wir vier verschiedene Symbole, aber für den Bildschirm brauchen wir nur drei. Lassen Sie uns Einkaufen wählen und es hier platzieren. Ich werde sie vertikal und horizontal ausrichten. Manchmal müssen Sie jedoch Ihre Elemente manuell ausrichten , um eine große visuelle Balance zu erzielen. Ich werde es um zwei Pixel nach oben bewegen, und jetzt denke ich, es sieht gut aus. Dann lasst es uns gruppieren und ich werde es Shopping-Symbol nennen. Dann lassen Sie uns diese beiden Textebenen gruppieren und sie vertikal an Ihrem Symbol ausrichten. Die linke Polsterung dieser Textgruppe sollte acht Pixel wie folgt betragen. Was brauchen wir noch? Wir müssen den Betrag genau hier haben und auch einen kleinen Pfeil. Ich werde diese Textebene auswählen, kopieren und einfügen, dann werde ich sie außerhalb dieser Gruppe verschieben, vielleicht auf die rechte Seite. Lassen Sie uns die Schriftgröße auf 16 Punkte ändern, und denken Sie daran, es auf der rechten Seite auszurichten, ich werde Ihnen zeigen, warum. Lassen Sie uns minus $120 schreiben. Lassen Sie uns es so an Ihrer Textgruppe ausrichten, und danach brauche ich einen kleinen Pfeil. Platzieren wir es. Wir haben einen kleinen Pfeil hier. Wir müssen jedoch seine Farbe auf C7C7 und C7 so ändern. Denken Sie daran, wenn Sie die Farbe ändern möchten, müssen Sie die Form auswählen, nicht dies nicht. Die Form ist da. Wenn Sie einfach auf das Shape zugreifen möchten, können Sie die Befehlstaste auf der Tastatur oder die Steuertaste gedrückt halten, wenn Sie Windows verwenden. Dann lassen Sie es uns mit diesem Text ausrichten. Es ist richtig Polsterung wird 30 Pixel sein, und die richtige Polsterung dieser Menge sollte 16 Pixel wie folgt sein. Alles ist großartig. Wählen wir alle diese Elemente aus, gruppieren sie und nennen es einkaufen. Der obere Abstand dieser Transaktion sollte 12 Pixel wie folgt sein, dann lassen Sie es uns duplizieren, verschieben Sie es nach unten, und der Abstand zwischen ihnen sollte 16 Pixel wie folgt betragen. Benennen wir es in Medizin um, und dieser wird mit den Medizingeräuschen verwandt sein. Lassen Sie uns diesen Titel in Medizin ändern, und wir müssen auch die Zeit ändern. Ich werde 13 März 2019 schreiben und ändern Sie es auf 12:00 und 10:00 Uhr. Der Betrag sollte auf $89,50 geändert werden. Der Grund, warum ich Ihnen gesagt habe, dass Sie diese Textebene auf der rechten Seite ausrichten müssen , ist, weil, wenn wir die Menge ändern, diese Textebene sollte von der linken Seite nicht auf die rechte Seite wachsen. Dann schließlich wählen wir den Kreis und ich werde die Farbe auf E09 und FFF ändern. Lassen Sie uns dieses Symbol entfernen, und ich werde das Medizin-Icon aus diesem Transaktionsordner platzieren , es hier platzieren, und ich werde es mit meinem Kreis ausrichten, sowohl horizontal als auch vertikal. Denken Sie daran, diese Medizin Symbol in diese Medikamentengruppe zu setzen. Jetzt lassen Sie uns diese Transaktion duplizieren, und ich werde sie in Sport ändern, dann ändern wir die Zeit auf 10 März 2019, und die Zeit sollte 18:50 Uhr sein. Dann ändern wir den Betrag auf 99,90. Danach entfernen wir dieses Symbol, wählen Sie diesen Kreis und ändern Sie die Hintergrundfarbe auf 87F0 und FF, und lassen Sie uns sein spezifisches Symbol, Sport, platzieren Sie es hier und richten Sie es mit Ihrem Kreis sowohl horizontal als auch vertikal aus. Dann denken Sie daran, Ihre Gruppe auch in Sport umzubenennen. Alles klar alle, wir haben erfolgreich unseren Kartenbildschirm zusammen entworfen. Das Letzte, was wir tun müssen, ist, dieses Kunstboard in Karten umzubenennen, und das ist alles für dieses Video. Ich hoffe, es hat dir gefallen, und ich werde dich im nächsten Video sehen. 86. Transaktionsseite: Hallo, alle, und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir unseren Transaktionsbildschirm gemeinsam gestalten. Ohne weitere ich, lasst uns anfangen. Lassen Sie mich zunächst ein wenig vergrößern und dann werde ich eine neue Zeichenfläche einfügen. Drücken wir A auf meiner Tastatur und lassen Sie uns iPhone 11 Pro oder X verwenden. ziemlich gut. Lassen Sie mich es auf die linke Seite bewegen. Fantastisch. Was brauchen wir für diese Seite? Zuerst brauchen wir eine Kopfzeile mit einer Navigationsleiste oben, und dann brauchen wir einige Textebenen. Danach müssen wir eine Floating-Karte direkt am unteren Rand für unsere Transaktionen erstellen. Lassen Sie uns voran und erstellen Sie ein Rechteck. Ich werde Drag & Drop, stellen Sie sicher, dass dieses Rechteck in Ihrer Zeichenfläche ist. Nun lassen Sie uns unsere Zeichenfläche in Transaktionen umbenennen. Ziemlich gut. Dann wähle ich dieses Rechteck aus und setze uns die Höhe auf 245 so. Ich werde darauf doppelklicken, um in den Bearbeitungsmodus zu gelangen. Wählen wir diese beiden unteren Knoten aus, weil ich den Eckenradius auf 62 erhöhen werde . Klicken wir auf „Fertig“. Danach werde ich diese Ecken glatt machen. Fantastisch. Jetzt gehen wir weiter und ändern die Füllung. Eigentlich werde ich den gleichen Farbverlauf wie dieses Rechteck verwenden. Gehen wir weiter Kopieren, Eigenschaften, und ich werde mit der rechten Maustaste hier und fügen Sie es ein. Ziemlich gut. Nun lassen Sie uns die Statusleiste kopieren und einfügen. Ich werde das kopieren, es hier einfügen, ziemlich gut. Jetzt ist es Zeit, unsere Navigationsleiste zu erstellen. Für die Navigation, wo wir einen Titel benötigen, also lassen Sie uns eine Textebene einfügen und Transaktionen schreiben. Die Schriftart wird SF Pro Text sein und die Schriftgröße sollte 17 Punkte und fett sein. Dann wählen wir es aus und machen es so weiß. Richten Sie es an der Mitte aus. Lassen Sie es uns auch hier ausrichten. Jetzt überprüfen wir die Polsterungen. Es hörte auf, bis dieser Frame, der unsere Statusleiste ist, fünf Pixel wie folgt betragen sollte. Das einzige, was wir hinzufügen müssen, um unsere Navigationsleiste zu beenden, ist ein Backlink-Pfeil. Lass uns voran gehen und ein Bild platzieren. Von Symbolen können Sie dieses Nav-Pfeil-Symbol einfügen. Platzieren Sie es hier. Ziemlich gut. Nun lassen Sie es uns vertikal wie folgt an unserem Text ausrichten. Wieder einmal müssen wir die obere Polsterung auf drei setzen, diesmal nicht fünf, und die linke Polsterung sollte 24 Pixel betragen, wie folgt. Ziemlich gut. Ich werde sie gruppieren und schreiben Navigationsleiste. Sie können eine Komponente auch erstellen, wenn Sie sie immer wieder verwenden möchten. Wie Sie jetzt sehen können, haben wir eine Navigationsleistenkomponente. Ziemlich gut. Lassen Sie mich rauszoomen. Für diese Transaktionen Header, müssen wir einen Titel haben. Lassen Sie uns Ihre Gesamtkosten schreiben, und ich werde die Schriftart in Montserrat und auch die Schriftgröße auf 22 Punkte ändern. Lass es uns regelmäßig machen. Fantastisch. Ich werde es an der Mitte ausrichten. Lassen Sie uns die Schriftfarbe auf 87F0FF so ändern, ziemlich gut. Es ist auf die Mitte ausgerichtet. Lass es uns ein bisschen nach oben bewegen. Es ist oberste Polsterung, bis unsere Navigationsleiste 70 Pixel wie folgt sein sollte, duplizieren Sie sie, verschieben Sie sie nach unten. Hier müssen wir die Höhe unserer Ausgaben schreiben. Zuerst machen wir es mutig. Außerdem werde ich es weiß machen und dann die Schriftgröße auf 28 Punkte erhöhen. Stellen Sie sicher, dass es an der Mitte ausgerichtet ist. Hier schreiben wir $1.063.30 so. Die obere Polsterung dieses Betrags sollte 16 Pixel betragen, wie folgt. Ziemlich gut. Was brauchen wir noch? Ich werde dieses Rechteck duplizieren. Verschieben Sie diese Ebene direkt unter unser Hauptrechteck. Ich werde es um fünf Pixel nach unten verschieben. Wie Sie sehen können, dass Y jetzt auf fünf gesetzt ist, und lassen Sie uns seine Farbe in eine einfarbige ändern. Ich werde das gleiche Blau setzen, das wir für diese Textebene verwendet haben. Schreiben wir 87F0FF, ziemlich gut. Unser Header ist fertig und alles ist perfekt. Jetzt ist es Zeit, unsere Karte zu entwerfen. Ich gehe voran und wähle dieses Rechteck, dieses blaue, dupliziere es, schiebe es nach unten. Dann werde ich mit der rechten Maustaste hier klicken, und lasst uns es vertikal so drehen. Ziemlich gut. Stellen wir die Höhe so auf 541 ein und richten Sie sie nach unten aus. Ziemlich gut. Das Einzige, was ich ändern werde, ist die Richtung dieser Steigungen. Ich werde den Ort dieser beiden Farben so ändern. Jetzt ist alles großartig. Dann müssen wir einen Home-Indikator haben, also gehen wir voran und kopieren und fügen Sie diesen weißen ein. Ziemlich gut. Danach müssen wir einen Indikator erstellen, der anzeigt, dass diese Karte beweglich ist. Ich gehe voran und erstelle ein Rechteck, Drag & Drop so. Ich werde die Breite auf 47 und die Höhe auf vier setzen, so. Ich werde es komplett abgerundet machen, es weiß machen. Fantastisch. Danach richten wir es an der Mitte aus. Die obere Polsterung sollte 16 Pixel betragen, genau so. Dann müssen wir eine Suchleiste haben Anstatt einige vorgefertigte Suchleisten zu verwenden, werde ich Ihnen zeigen, wie Sie Ihre eigene benutzerdefinierte Suchleiste gestalten können. Es ist so einfach. Für eine Suchleiste benötigen wir ein Rechteck. Ich werde Drag & Drop so. Stellen wir die Breite auf 315 und eine Höhe auf 53. Dann werde ich den Eckenradius auf 16 so einstellen und sicherstellen, dass sie glatt sind. Fantastisch. Richten Sie es an der Mitte aus, und ändern Sie die Füllfarbe in etwas dunkler als dieser Hintergrund, um einen Kontrast zu erzeugen. Schreiben wir 05199E. Ziemlich gut. Die obere Polsterung sollte 24 Pixel betragen. So, und jetzt brauchen wir einen Text und ein Symbol. Ich werde voran gehen und ein Bild platzieren. Lassen Sie uns wählen „Suchen“ platzieren Sie es hier, und ich werde es vertikal an unserer Suchleiste ausrichten. Ziemlich gut. Die linke Polsterung sollte 16 Pixel betragen, wie die oberen und unteren Polsterungen. Danach brauchen wir einen Text. Ich werde die Suche schreiben und die Schriftart wird SF Pro Rounded sein. Lassen Sie uns die Farbe auf die gleiche Farbe wie unser Suchsymbol mit Hilfe von Pipette ändern , ziemlich gut. Richten Sie es vertikal an unserer Suchleiste aus und es ist linkes Padding sollte acht sein wie folgt. Dann wählen wir alle aus, gruppieren sie und nennen sie Suchleiste. Fantastisch. Jetzt ist es an der Zeit, unsere Transaktionen hinzuzufügen. Um es einfacher zu machen, werde ich voran gehen und diese letzten Transaktionen auswählen , die wir im vorherigen Video erstellt haben. Lassen Sie uns alle auswählen, kopieren Sie sie und fügen Sie sie in den Bildschirm ein, verschieben Sie sie nach oben. Ziemlich gut. Die obere Polsterung sollte 24 Pixel betragen, so. Allerdings müssen wir die Farben ändern, um sie sichtbar zu machen. Ich werde all diese Titel auswählen, Shopping, Medizin und Sport, und lassen Sie uns sie so weiß machen. Wählen wir nun das Datum und die Uhrzeit und lassen Sie uns die Farbe wie folgt auf 80E0FF setzen. Ich werde diese Farbe kopieren. Dann wählen wir diese Pfeile aus. jedoch daran, die Form auszuwählen, nicht diesen Rahmen. Die Form ist diese. Sie können die Befehlstaste oder die Strg-Taste auf Ihrer Tastatur halten und darauf klicken. Lassen Sie uns alle auswählen. Ich werde den Farbcode einfügen, den wir gerade so kopiert haben. guter Letzt müssen wir diese Menge X auswählen und sie weiß machen. Jetzt sieht es toll aus. Jetzt müssen wir noch ein paar Transaktionen zu dieser Karte hinzufügen. Gehen wir weiter und wählen Sie diese Einkaufstransaktion, duplizieren Sie sie, verschieben Sie sie so nach unten und stellen Sie sicher, dass die obere Auffüllung auf 16 Pixel eingestellt ist. Ändern Sie den Tag zum 5. März, so, und die Zeit auf etwa 7:20 und den Betrag auf $255, ziemlich gut. Noch einmal, duplizieren Sie es, bewegen Sie es nach unten, und dieses Mal werde ich es anders machen. Gehen wir weiter und benennen Sie es in Reisen um. Lassen Sie uns auch diesen Titel ändern, um zu reisen, und der Betrag sollte $399 sein. Ändern wir das Datum auf 3. März und die Zeit auf 5:50. Ziemlich gut. Das letzte, was wir ändern müssen, ist dieses Symbol. Lassen Sie uns diese Shopping-Symbol entfernen, wählen Sie diesen Kreis und ändern Sie das Feld in FF8787, wie folgt. Ich werde ein Bild von Transaktionen platzieren. Hier haben wir Reisen, legen Sie es hier und lassen Sie uns sie so an der Mitte ausrichten. Lassen Sie uns dieses Symbol umbenennen, um zu reisen. Ziemlich gut. Die letzte Transaktion sollte Sport sein, also werde ich es duplizieren. Wenn du sie ändern willst, liegt es ganz an dir. Sie können voran gehen und ändern Sie die Aufträge, die Mengen, die Farben. Sie können mit diesem Bildschirm herumspielen, um sich an diese Software und den Prozess der Gestaltung eines Bildschirms zu gewöhnen . Der Betrag sollte gleich sein, aber wir müssen das Datum ändern. Ich werde es am 10. Februar schaffen, und die Zeit um 5:20 so. Ziemlich gut. Dann lassen Sie uns fortfahren und alle Transaktionen auswählen, gruppieren sie, und nennen wir es Transaktionen wie folgt. Jetzt ist alles erledigt. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 87. Detaillierte Transaktionsseite: Hallo an alle. Willkommen zurück zu einem anderen Video dieses Abschnitts. In diesem Video werden wir unseren Transaktionsdetailbildschirm gemeinsam gestalten. Zuallererst werde ich voran gehen und diese Transaktionen Zeichenfläche duplizieren. Dann lassen Sie uns es in Transaktionen Bindestrich Detail umbenennen. Ziemlich gut. Dann werden wir diese Karte nach unten schieben und dann einige Details über diese Transaktionen präsentieren. Was ich tun werde, ist zunächst, diese Elemente vollständig zu gruppieren. Wählen wir diesen Indikator, die Karte selbst, die Suchleiste und diese Transaktionsgruppe aus. Gruppieren Sie sie. Nennen wir es Karte, bewegen Sie es direkt unter unsere Hausanzeige. Dann setzen wir das y auf 693, so. Hier werden wir unsere Details platzieren. Erste Dinge zuerst, lassen Sie uns voran und wählen Sie diese letzten Transaktionen dauert. Ich kopiere das, füge es hier ein. Lass es uns nach oben bewegen und ich werde es ändern, um deine Ausgaben zu verfolgen. Die obere Polsterung wird 32 Pixel wie folgt sein und die linke Polsterung sollte 30 Pixel betragen. Lassen Sie mich diesen Bildschirm auswählen, drücken Sie Shift und 2 so. Was brauchen wir noch? Eigentlich haben wir vier verschiedene Kategorien. Reisen, Shopping, Sport und Medizin. Wir brauchen vier verschiedene Karten mit vier verschiedenen Farben, um einige bis diese Mengen. Lassen Sie uns voran und erstellen Sie ein Rechteck. Ich werde Drag & Drop so. Ich werde die Breite auf 153 und die Höhe auf 103 einstellen. Dann erhöhen wir den Eckenradius auf 25 und machen ihn auch so glatt. Fantastisch. Schließlich müssen wir die Farbe ändern. Ich werde einen linearen Farbverlauf für diese verwenden. Wählen wir die erste Farbe aus und ändern Sie den Farbcode in FF8787. Wählen wir den zweiten aus. Erhöhen Sie die Deckkraft auf 100 Prozent. Ich werde den Farbcode auf C16A6A ändern, so. Danach ändern wir die Richtung ein bisschen so. Jetzt denke ich, dass es ziemlich gut ist. Was müssen wir sonst noch in diese Karte aufnehmen? Wir brauchen zwei Textebenen. Der Name dieser Karte, die Reise sein wird, und der Gesamtbetrag in Bezug auf diese Kategorie. Lassen Sie uns zunächst eine Textebene einfügen und Reisen schreiben und ich werde es regelmäßig machen. Lassen Sie uns die Schriftgröße auf 18 Punkte wie folgt reduzieren. Ich werde die Farbe auf A73131 so ändern. Ziemlich gut. Die obere Polsterung wird 24 Pixel betragen und linke Polsterung sollte 16 Pixel wie folgt betragen. Duplizieren Sie es, bewegen Sie es nach unten. Lass es uns mutig machen. Lassen Sie uns auch die Schriftgröße auf 24 Punkte erhöhen. Fantastisch. Hier müssen wir den Gesamtbetrag aller Reisetransaktionen schreiben, die $399 ist. Ziemlich gut. Jetzt werde ich mehr Details zu dieser Karte hinzufügen, um es ein wenig besser zu machen. Lassen Sie uns zunächst einen Kreis wie diesen erstellen. Ich werde die Breite und Höhe auf 112 einstellen. Dann wählen wir dafür einen linearen Farbverlauf. Ich werde die erste Farbe wählen und ändern wir sie auf F78C8C wie folgt, kopieren Sie diese fügen Sie sie für die zweite ein. Allerdings halten Sie dieses Mal die Deckkraft auf Null. Dann werde ich den Ort dieser beiden Farben so ändern. Lassen Sie uns die Richtung dieser Farbe so ändern und jetzt müssen wir eine Maske verwenden. Wie ich bereits erwähnt habe, wenn Sie eine Maske verwenden, ist es besser, dieses Rechteck einmal zu duplizieren und ich werde diesen Kreis direkt unter unsere Reise bewegen. Wählen Sie die duplizierte Ebene aus und klicken Sie auf Entmaskieren, um so etwas zu erhalten. Dann gehen wir weiter und wählen Sie den Kreis und bewegen Sie ihn ein wenig wie diese.t' Das ist ziemlich gut. Nun lasst uns unsere Elemente gruppieren. Ich werde diese Massengruppe wählen, diese Reise und ist Betrag, und auch unser Rechteck. Gruppieren Sie sie, nennen Sie es Reise, duplizieren Sie es, verschieben Sie es auf die rechte Seite und die linke Polsterung sollte neun Pixel wie folgt betragen. Dann lassen Sie uns beide auswählen, verschieben Sie sie auf die linke Seite, bis Sie eine 30 Pixel linke Polsterung und rechte Polsterung erhalten. Nun, gehen wir voran und wählen Sie dieses Rechteck 20 und ich werde seine Farbe in etwas anderes ändern. Lassen Sie uns die erste Farbe wählen. Ich werde es so auf FFCF87 setzen. Der zweite wird CA9547 sein. Ziemlich gut Nun lassen Sie uns diesen Kreis wählen und die Farbverlaufsfarbe auch hier ändern. Ich werde die erste Farbe auswählen und es wird F6C57A sein. Lassen Sie uns dies kopieren und fügen Sie es auch für Ihre zweite Farbe ein. guter Letzt müssen wir diese beiden Takes auswählen und ihren Farbcode in A27430 ändern. Lassen Sie mich den Titel zum Einkaufen ändern und der Betrag wird $375 sein. Denken Sie daran, Ihren Namen zu ändern. Ich werde Shoppen schreiben. Jetzt werde ich Sie bitten, das Video zu pausieren und weiterzumachen und eine dieser Karten zu duplizieren, sie hier ablegen, und ich werde Sie bitten, es für unsere Sportkarte zu ändern. Der Betrag wird 199,80 betragen. Ich werde Ihnen einen Hinweis geben, dass Sie diese Farben wählen können. Es muss so etwas wie blau sein, wie Sie für dieses Sportsymbol sehen können. Dann werde ich Ihnen zeigen, wie Sie das tun können. Lassen Sie uns das Video jetzt pausieren und es selbst machen. Ich bin mir ziemlich sicher, dass du das alleine machen könntest. Jetzt ist es jedoch Zeit, es zusammen zu tun. Jetzt gehen wir weiter und duplizieren diese erste Karte. Ich werde es runterziehen. Es ist Top-Polsterung wird neun Pixel sein. Lassen Sie uns diese Rechteck 20 auswählen, die unsere Basisschicht ist. Ich werde den Farbverlauf ändern. Wählen wir die erste Farbe und setzen Sie sie so auf 87F0FF. Wählen Sie die zweite und schreiben Sie 3AA2B1. Ich werde auch diesen Kreis wählen. Lasst uns ihre Farbe ändern. Ich werde das erste auswählen und es auf 73BCEB setzen , kopieren Sie es und fügen Sie es auch für die zweite Farbe ein. Jetzt werde ich unsere Textebenen auswählen und die Füllung auf 298693 ändern. Lassen Sie uns den Titel in Sport ändern. Können Sie sehen, dass wir hier einen großen Kontrast haben, denn mit diesem Kreis wir einen hellen Hintergrund geschaffen und wir verwenden eine dunklere Farbe vor diesem Hintergrund. Was ein ziemlich guter Weg ist, um ein gutes Kontrastverhältnis zu schaffen. Dann ändern wir den Betrag auf 199,80. Ich werde diese Gruppe in Sport umbenennen. Lassen Sie es uns duplizieren, verschieben Sie es auf die rechte Seite, und ich werde diese Rechteck 20 wählen. Lassen Sie uns die Farbe ändern. Ich werde den ersten wählen und schreiben E09FFF und der zweite wird 8A46AB sein, so. Lassen Sie uns unseren Kreis wählen und ihn auch ändern. Ich werde die erste Farbe wählen und schreiben D88FFF. Kopieren wir das und fügen Sie es für die zweite Farbe ein. Lassen Sie uns schließlich unsere Textebenen verwenden und den Farbcode auf 9137BC setzen. Ich werde den Titel in Medizin ändern. Der Betrag wird 89,50 sein. Schließlich lassen Sie es uns in Medizin umbenennen. Fantastisch. Wir brauchen noch eine Karte, die unsere Kreditkarten-Rückzahlungskarte ist. Lassen Sie uns voran und wählen Sie diese überprüfen Sie Ihre Bankkontenkarte. Kopieren Sie das, fügen Sie es hier ein. Dann werde ich dieses Rechteck auswählen, Rechteck 7, denken Sie daran, dass und auch Rechteck 6, das unsere Maske ist. Lassen Sie uns die Höhe so auf 105 ändern. Außerdem müssen wir den Eckenradius auf 25 ändern , was der gleiche Betrag ist, den wir für diese Karten verwendet haben. Dann lassen Sie mich hineinzoomen. Ich werde diesen Text so an meinem Rechteck ausrichten. Auch dieser kleine Pfeil wird in der Mitte sein. Lasst uns diese beiden Kreise benutzen und sie nach oben bewegen, um so etwas zu bekommen. Ändern wir diesen Text in Kreditkartenzahlung, wie folgt. Benennen Sie es in Kreditkartenzahlung Rand lassen Sie es uns nach unten verschieben. Es wird eine 16 Pixel obere Polsterung haben. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 88. Transferseite: Hallo an alle und herzlich willkommen zu einem anderen Video dieses Kurses. In diesem Video werden wir unseren Transferbildschirm gemeinsam gestalten. Ohne weitere Umschweife, lasst uns anfangen. Zuallererst werde ich voran gehen und diese Transaktionen Detailbildschirm wie folgt duplizieren . Dann lassen Sie es uns umbenennen, um es zu übertragen. Perfekt. Danach werde ich fast alle Elemente entfernen. Lassen Sie uns voran und wählen Sie diese Karten, entfernen Sie sie, diese auch, diese beiden Textebenen als auch. Wir brauchen jedoch den Hausindikator. Wir werden diese schwarzen kopieren und einfügen. Kopieren wir es und fügen Sie es hier ein. Ziemlich gut. Dann müssen wir auch unsere Navigationsleiste haben. Was ich tun werde, ist die Auswahl dieser beiden Rechtecke, Rechteck 15 und 16, gruppieren sie, und lassen Sie uns das Y auf minus 141 setzen. Fantastisch. Ändern wir diesen Titel in „Übertragen“. Ziemlich gut. Was brauchen wir noch für diese Seite? Eigentlich müssen wir eine Textebene haben, also lassen Sie uns hier eine Textebene einfügen. Ich werde so „Betrag eingeben“ schreiben. Dann setzen wir die Schriftart auf Montserrat. Fantastisch. Ich werde es regelmäßig machen. Lassen Sie uns auch die Schriftgröße auf 18 Punkte ändern. Ziemlich gut. Lassen Sie uns es an der Mitte ausrichten, und dann ändern wir die Farbe auf 2743 und FD. Fantastisch. Es ist Top-Polsterung wird 75 Pixel wie folgt sein. Dann duplizieren wir es, bewegen Sie es nach unten. Ich werde heranzoomen. Hier müssen wir den Betrag haben. Ich schreibe $0 und lass es uns fett machen. Außerdem werde ich die Schriftgröße auf 36 Punkte ändern. Ziemlich gut. Dann müssen wir die Farbe dieser Ziffer ändern, denn jetzt hat der Benutzer noch keinen Betrag eingegeben. Ändern wir es in B6BFFF, fantastisch. Richten Sie es an der Mitte aus und es ist die obere Polsterung wird 16 Pixel betragen, wie folgt. Dann brauchen wir einen Separator. Ich werde voran gehen und eine Linie wie diese erstellen. Stellen wir die Breite auf 224 ein und richten Sie sie an der Mitte aus. Lassen Sie uns den Schlaganfall in DE, E1 und EF ändern , so ziemlich gut. Es ist Top-Polsterung wird 16 Pixel sein, fantastisch. Noch einmal, lassen Sie uns diese „Menge eingeben“ Textebene duplizieren, verschieben Sie sie nach unten. Ich werde zwei schreiben, und die obere Polsterung sollte ebenfalls 16 Pixel betragen. Dann duplizieren wir es noch einmal. Hier müssen wir den Namen des Empfängers schreiben. Lassen Sie uns Grace Addison schreiben und eine Schriftgröße sollte 16 Punkte betragen. Allerdings müssen wir die Farbe auf 3A, 3A und 3A ändern , ziemlich gut. Wir müssen auch ein Profilbild dieses Benutzers haben. Gehen wir weiter und wählen Sie dieses Profilbild aus, kopieren Sie es und fügen Sie es hier ein. Ziemlich gut. Bewegen Sie es nach unten. Dann werde ich auch die Waage wählen. Sie können auf der Tastatur K drücken, um das auszuwählen, und es nach unten skalieren , um ein 34 x 34 Pixel-Profilbild zu erhalten. Ich werde es 34 mal 34 schaffen. Fantastisch. Lassen Sie mich ihn hierher bringen. Die rechte Polsterung dieses Fotos wird acht Pixel betragen. Dann wählen wir die Textebene und ich werde sie vertikal ausrichten. Ziemlich gut. Allerdings müssen wir dieses Foto ändern. Ich werde darauf doppelklicken, um dieses Foto zu wählen. Dann lassen Sie uns voran und führen Sie unsere Inhalte echte Plugin. Ziemlich gut. Gehen wir zu Avataren und hier werde ich auf Female klicken, fantastisch. Nun gruppieren wir unsere Textebene und unser Profilbild, richten Sie es an der Mitte aus und seine obere Auffüllung wird 16 Pixel betragen. Ziemlich gut. Das nächste, was wir erstellen müssen, ist unser Numpad. Ich werde ein Rechteck erstellen und die Breite auf 89 und die Höhe auf 70 einstellen, und ich werde den Eckenradius auf 17 ändern. jedoch sicher, dass diese Ecken mit diesem Schieberegler glatt sind. Fantastisch. Danach müssen wir die Hintergrundfarbe ändern. Schreiben wir F5, F6 und F8. Ziemlich gut. Lassen Sie mich hineinzoomen. Hier müssen wir eine Textebene einfügen, also werde ich eine schreiben. Allerdings müssen wir die Schriftart in SF Pro Text ändern, so dass sie mittel und eine Schriftgröße sollte 24 Punkte betragen. Schließlich ändern wir die Farbe auf 27, 43, und FD, ziemlich gut. Ich werde es an der Mitte ausrichten, sowohl vertikal als auch horizontal, und stellen Sie sicher, dass Ihre Textebene auch hier an der Mitte ausgerichtet ist. Dann gruppieren wir sie. Ich nenne es eins, dupliziere es, schiebe es auf die rechte Seite. Der Abstand zwischen ihnen wird 10 Pixel betragen. Lassen Sie uns es noch einmal duplizieren, wählen Sie alle aus, duplizieren Sie sie, verschieben Sie sie nach unten, ziemlich gut, immer wieder und wieder. Fantastisch. Dann gehen wir weiter und ändern Sie diese Textebenen einzeln. Es wird zwei, drei, vier, fünf, sechs, sieben, acht, neun sein. Dieser wird ein Punkt sein. Hier werden wir 0 haben und der letzte wird geändert werden. Lassen Sie uns diese Textebene entfernen. Ich werde sie alle auswählen, sie gruppieren, und nennen wir es Numpad, fantastisch. Richten Sie es an der Mitte aus und bewegen Sie es ein wenig nach oben. Für diesen einen zuerst werde ich seine Farbe ändern, weil dies unser Senden-Button ist. Ich werde den gleichen Farbverlauf verwenden, den wir für unseren Header verwendet haben. Wählen wir dieses Rechteck, Rechteck 15, klicken Sie mit der rechten Maustaste darauf und kopieren Sie die Eigenschaften wie folgt. Ich werde es hier einfügen. Ziemlich gut. Lassen Sie mich hineinzoomen. Dann müssen wir ein Pfeilsymbol nach rechts einfügen. Platzieren wir ein Bild. Aus dem Ordner „Symbole“ wähle ich den Pfeil nach rechts. Platzieren Sie es hier. Ziemlich gut. Dann gehen wir weiter und skalieren es so. Ich denke, jetzt ist es großartig. Lassen Sie uns es an der Mitte ausrichten. Fantastisch. Dann lassen Sie uns diese Gruppe in Senden umbenennen, ziemlich gut. Die untere Polsterung dieser Numpad wird 74 Pixel betragen, so, und die rechte linke Polsterung wird 44 Pixel betragen. Jetzt ist alles erledigt. Es ist ziemlich erstaunlich, nicht wahr? Leute, das ist alles für dieses Video. Wir haben unsere Transferseite erfolgreich zusammen erstellt. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 89. Bestätigungsseite: Hallo, alle, und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir unseren Bestätigungsbildschirm zusammen entwerfen, also ohne weiteres, lasst es uns loslegen. Zuallererst werde ich voran gehen und diese Transfer-Zeichenfläche duplizieren, ziemlich gut. Benennen wir es in Confirmation um, fantastisch. Hier, ich werde es in Transaction ändern, so, und wir müssen dieses Numpad entfernen. Aber lassen Sie uns dieses Foto behalten, weil wir das brauchen, und auch ich werde gehen und entfernen Sie diese Menge, dieses Trennzeichen und diese Textebene als auch. Dann ändern wir diese Textebene „Sie haben erfolgreich $99 an Grace Addison gesendet “, wie folgt. Dann werde ich die Größe dieser Textebene ein wenig ändern, sie an der Mitte ausrichten, lassen Sie es kleiner, ziemlich gut machen, und dann werde ich voran gehen und die Höhengröße auf 27. Richten Sie es erneut an der Mitte aus. Ich werde zoomen, ziemlich gut, und dann lass uns diesen Namen auswählen und ihn fett machen, so. Danach brauche ich ein grünes Häkchensymbol, also lassen Sie uns voran und platzieren Sie ein Bild. Hier haben wir getan, lassen Sie es uns platzieren. Ich werde diese Textebene nach unten verschieben und die obere Polsterung dieses Fertigen Symbols wird 108 sein, so lassen Sie uns diese beiden Elemente nach unten verschieben. Die obere Polsterung dieser Textebene wird 16 Pixel wie folgt sein. Danach werde ich dieses Profilbild wählen und das Skalierungswerkzeug verwenden und es ein wenig skalieren und ich werde die Breite und Höhe auf 78 x 78 Pixel einstellen, fantastisch. Hier werde ich den kreisförmigen Indikator über den Status dieses Benutzers haben, also gehen wir voran und wählen Sie diesen grünen Indikator, kopieren Sie diesen, und ich werde ihn hier einfügen, verschieben Sie ihn nach unten, dann stellen Sie sicher, dass Sie auch die Skalierung gewählt, und ich werde es skalieren und lassen Sie es auf 80 x 80 Pixel wie folgt setzen. Lassen Sie uns es mit Ihrem Profilbild ausrichten, fantastisch, gruppieren Sie sie, und nennen Sie es Profilbild. Ich werde es an der Mitte ausrichten und seine obere Polsterung wird 40 Pixel betragen, so ziemlich gut. Dann müssen wir hier zwei verschiedene Schaltflächen platzieren, die Schaltfläche „Erneut ausführen“ und eine Bestätigungsschaltfläche. Lassen Sie uns fortfahren und kopieren und fügen Sie diese Schaltfläche Verifizieren von unserer OTP-Verifizierungsseite. Ich werde das kopieren, es hier einfügen, es nach oben verschieben und es zu Execute Again ändern, ziemlich gut. Stellen Sie sicher, dass Sie diese Gruppe auch umbenennen, „Erneut ausführen“. Seine obere Polsterung wird 100 Pixel sein, so und für die Bestätigungsschaltfläche werde ich den Anmelde-Button von unserem Willkommensbildschirm auswählen, kopieren Sie diesen, fügen Sie ihn hier ein. Ich werde es so nach unten bewegen, dann entfernen wir diesen Pfeil nach rechts. Danach wähle ich diese Textebene und unsere Massengruppe aus, sie so an der Mitte aus und lass uns diesen Text in Bestätigung ändern, fantastisch. Richten Sie es nochmals an der Mitte und auch hier aus. Schließlich lassen Sie uns die Gruppe umbenennen Bestätigung und die obere Polsterung wird 16 Pixel sein, ziemlich gut. Alles klar, Leute, das ist alles für dieses Video. Wir haben unsere Bestätigungsseite erfolgreich zusammen erstellt. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 90. Notification: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir weitermachen und unsere Benachrichtigungsseite gestalten. Lassen Sie uns voran gehen und duplizieren Sie diesen Bestätigungsbildschirm und entfernen Sie dann alle Elemente. Benennen wir es in Benachrichtigung um. Ziemlich gut. Was brauchen wir für diese Seite? Zuallererst müssen wir eine Statusleiste haben. Ich werde voran gehen und diesen schwarzen wählen. Kopieren wir das und fügen Sie es hier ein. Ziemlich gut. Dann brauchen wir auch diese Tapper. Ich werde diesen kopieren, den Bildschirm auswählen, ihn hier einfügen. Aber hier müssen wir es von dieser Brieftasche zu diesem Benachrichtigungssymbol ändern. Ich werde dieses Wallet-Symbol auswählen. Lassen Sie uns es zum aktiven machen und wählen Sie dieses Benachrichtigungssymbol und machen es so aktiv. Ziemlich einfach, nicht wahr? Ganz oben müssen wir eine Suchleiste haben. Wir werden jedoch keine neue erstellen da wir bereits unsere angepasste Suchleiste erstellt haben. Ich gehe voran und wähle es aus der Transaktionsseite. Kopieren Sie das, fügen Sie es hier ein, verschieben Sie es nach oben. Wir müssen jedoch die Hintergrundfarbe unserer Suchleiste ändern. Lassen Sie uns dieses Rechteck wählen und ich werde den Farbcode auf F5, F6 und FA so einstellen . Lassen Sie uns nun die Polsterungen überprüfen. Die obere Polsterung wird 24 Pixel wie folgt sein und dann brauchen wir hier einen Titel. Lassen Sie uns voran und wählen Sie diese Spur Ihre Ausgaben, Kopieren Sie diese, fügen Sie es hier. Ich werde es nach oben verschieben und lassen Sie es ändern, um Ihre Benachrichtigungen hier zu überprüfen. Dann lassen Sie uns die Größe ändern, um so etwas zu erhalten. Die linke Polsterung sollte 30 Pixel betragen. Es ist die oberste Überschrift wird 32 Pixel wie folgt sein. Was brauchen wir dann noch? Du hast recht, wir brauchen unsere Nachrichten oder unsere Benachrichtigungen. Für jede Benachrichtigung haben wir ein Profilbild, einen Namen und eine kurze Nachricht. Gehen wir weiter und wählen Sie dieses Profilbild auf unserer Bestätigungsseite aus. Ich werde das kopieren und es hier einfügen. Es wird unsere Vorlage sein. Dann wähle ich das Skalierungswerkzeug aus und lass es uns 40 mal 40 so machen. Ziemlich gut. Lass es uns nach oben bewegen. Ich werde hineinzoomen und hier lassen Sie uns eine Textebene einfügen und den Namen schreiben. Ich werde es regelmäßig machen und lassen Sie uns auch die Schriftgröße auf 14 Punkte reduzieren . Ziemlich gut. Dann lassen Sie uns es mit unserem Profilbild wie folgt ausrichten und es ist linkes Padding wird acht wie folgt sein. Dann duplizieren Sie es, bewegen Sie es nach unten und hier schreiben wir eine Nachricht. Wir werden es später ändern. Ich werde die Schriftgröße auf 16 Punkte setzen und wir es so an unserem Profilbild ausrichten. Dann müssen wir seine Farbe auf 27, 43 und FD so ändern . Wir brauchen auch einen Pfeil nach rechts. Ich werde es aus unserer Asset-Datei platzieren, benutzen wir einen kleinen Pfeil, legen Sie es hier. Dann werde ich seine Farbe auf B47 und FC so ändern. Ich werde diesen Rahmen wählen, der unser kleiner Pfeil ist, und lassen Sie uns ihn so an unserem Profilbild ausrichten. Es ist richtig Polsterung wird 30 Pixel wie folgt sein. Ziemlich gut. Eigentlich brauchen wir auch hier einen Separator. Ich werde eine Zeile wie diese erstellen. Setzen wir die Breite auf 315, richten Sie sie an der Mitte aus, und ändern Sie ihre Farbe in DEE 1E und F. Die obere Polsterung wird 16 Pixel betragen. Ziemlich gut. wähle ich alle diese Elemente aus, gruppiere sie, nennen wir es Nachricht. Ziemlich gut und dann werde ich eine Komponente erstellen. Lassen Sie uns auf dieses Symbol klicken. Ziemlich gut. Dann duplizieren Sie es, verschieben Sie es nach unten. Seine obere Polsterung wird 16 Pixel sein. Dann werde ich es noch einmal duplizieren, bis ich so etwas bekomme. Jetzt anstatt die Informationen eins nach dem anderen zu schreiben, werden wir unsere Lieblings-Pestinhalt frei nutzen. Lass uns voran gehen und es laufen und dann werde ich dir zeigen , wie du später in einer Sekunde wirklich einfügen kannst. Lassen Sie uns diese Profilbild auswählen, indem Sie Befehlstaste gedrückt halten und auf , dass halten Sie Shift hier und Befehlstaste zusammen und wählen Sie alle diese Bilder. Ziemlich gut. Gehen wir zu den Avataren und klicken Sie auf männlich oder weiblich. Da gehen wir. Haben Sie gesehen, wie einfach es ist, echte Inhalte auf Ihrem Bildschirm hinzuzufügen? Wenn Sie mit Fotos nicht zufrieden sind, können Sie einfach darauf klicken und sie werden geändert werden. Jetzt müssen wir unsere Namen hinzufügen. Da diese erste jedoch unsere Master-Komponente ist, müssen wir sie zuerst duplizieren, um eine Instanz davon zu erstellen, dann lassen Sie uns die Master-Komponente wie folgt entfernen und dann die Namensschicht von Frauen verwenden. Ich wähle dieses aus, halte Shift gedrückt, dieses auch und dieses. Dann gehen Sie weiter und führen Sie den Inhalt echtes Plugin und im Namensbereich, klicken Sie auf diese drei Punkte und ich werde den Namentyp auf weiblich ändern. Sie können sich bewerben und da gehen wir. Können Sie sehen, wie einfach es ist, diese Änderungen anzuwenden? Es ist ziemlich erstaunlich. Jetzt ist es Zeit, eine [unhörbar] auszuwählen. Wählen wir sie aus und klicken Sie auf diese drei Punkte. Dieses Mal werde ich es auf main setzen und auf „Übernehmen“ klicken und das ist alles. Das Einzige, was wir nicht zufällig hinzufügen können, ist diese Botschaft. Wir müssen sie eins nach dem anderen ändern. Lassen Sie uns diese SMS auswählen und ich werde schreiben Arlene einfach senden Sie $20 wie diese und die nächste Teresa hat Ihnen $99 geschickt. Fantastisch. Um diesen Bildschirm zu vervollständigen, müssen wir nur noch eine Sache tun, und das ist, diesen Status zu ändern. Wie Sie jetzt sehen können, haben wir nur den aktiven Status. Was ich tun werde, ist zum Beispiel, wählen Sie diesen Status und lassen Sie uns ihn in einen geschäftlichen Status ändern. Ich werde F7, A700 so schreiben. Lassen Sie uns diesen Farbcode kopieren und ich werde diesen auch und diesen wählen. Fügen wir es hier ein und wir brauchen einen weiteren Zustand. Lasst uns das benutzen und es in CE, CE und CE ändern . Kopieren Sie dies und fügen Sie es für die zweite ein. Ziemlich gut. Dieser wird unser Offline-Zustand sein. Leute, wir haben erfolgreich unsere Benachrichtigungsseite zusammen erstellt. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 91. Benutzerprofil: Hallo, alle und willkommen zurück zu einem anderen Video dieses Abschnitts. In diesem Video werden wir unseren Profilbildschirm gemeinsam gestalten. Ohne weitere Umschweife, lassen Sie uns beginnen, indem Sie diesen Benachrichtigungsbildschirm duplizieren. Ich werde es in Profil umbenennen. Dann lassen Sie uns diese Elemente und diese Suchleiste entfernen. Wir werden jedoch unsere Tab-Leiste beibehalten, da wir diese Benachrichtigungssymbol deaktivieren müssen. Lassen Sie uns diese Profil-Symbol aktivieren. Was brauchen wir für diese Seite? Zuallererst brauchen wir einen Titel, also werde ich einen Text einfügen. Lasst uns schreiben, Profil. Dann lasst es uns in Montserrat umwandeln. Ich mache es fett und lass uns die Schriftgröße auf 40 Punkte ändern. Ich werde die Farbe auf 3A, 3A und 3A ändern . Die obere Polsterung sollte 46 Pixel und die linke Polsterung sollte 30 Pixel betragen. Was brauchen wir dann noch? Eigentlich gehe ich zu diesem Profilbildschirm hier, Profil abgeschlossen. Lassen Sie mich hineinzoomen. werde ich diese beiden Formen kopieren und einfügen. Kopieren Sie das und fügen Sie es hier ein. Lassen Sie uns sie den ganzen Weg unter die Statusleiste verschieben. Ich werde sie auf die rechte Seite bringen. Jetzt ist es perfekt. Wir brauchen auch alle diese Textfelder, also lassen Sie uns sie auswählen und kopieren und einfügen Sie sie hier. Zuallererst werde ich voran gehen und diese Tick-Symbole entfernen. Dann wählen wir diese Titel aus. Fantastisch. Ändern wir die Farbe in 3A, 3A und 3A. Außerdem müssen wir den Benutzernamen, den Vornamen, den Nachnamen und das Geburtsdatumauswählen den Vornamen, den Nachnamen und das Geburtsdatum und ihre Farbe auf 2743 und FD ändern. Schließlich müssen wir unsere Linienfarbe ändern. Lassen Sie uns alle hier auswählen und ich werde die Strichfarbe auf DEE1EF ändern. Wir müssen einen Abmelde-Button rechts unten haben, also gehe ich voran also gehe ich voran und kopiere und füge den Abmelde-Button ein. Lassen Sie es uns hier setzen und ich werde es vergrößern. Wählen wir dieses Rechteck 2 aus und setzen Sie die Breite auf 315. Wählen wir diese Schaltfläche aus, richten Sie sie an der Mitte aus. Ich werde dieses Symbol auswählen, und lassen Sie es auf die rechte Seite verschieben, bis Sie eine 24 Pixel rechte Polsterung erhalten. Fantastisch. Seine untere Polsterung, es wird 30 Pixel sein. Wählen wir nun unsere Textfelder aus. Ihre untere Polsterung wird 42 Pixel sein. Letzt müssen wir voran gehen und wählen Sie diesen Namen und Benutzernamen, und dieses Profilbild, kopieren Sie sie und fügen Sie sie hier, verschieben Sie es nach unten. Lassen Sie uns dieses Profilbild auswählen. Ich wähle das Skalierungswerkzeug aus. Lassen Sie es uns skalieren, bis Sie ein Bild mit 64 x 64 Pixeln erhalten. Seine linke Polsterung wird 30 Pixel betragen und seine obere Polsterung wird 32 Pixel betragen. Ich werde diese Texte auf die rechte Seite verschieben. Zunächst werde ich diesen Benutzernamen in den Status ändern, der online ist. Ich werde beide auswählen, weil wir die Farbe und die Schriftart ändern müssen. Lassen Sie uns zunächst die Schriftart auf SF Pro Text setzen. Die Schriftart dieses Namens wird 20 Punkte sein und es sollte mittel sein. Für den Status, lassen Sie uns es auf Licht setzen und es sollte 16 Punkte sein. Ich werde nach unten ziehen. Seine obere Polsterung wird acht Pixel sein. Wählen Sie beide aus, gruppieren Sie sie. Lassen Sie uns es mit Ihrem Profilbild ausrichten. Jetzt wählen wir beide aus und ich werde ihre Farbe ändern. Stimmt, 2743 und FD. Alles klar, Leute, das ist alles für dieses Video, ich hoffe, es hat euch gefallen. Ich werde Sie im nächsten Video sehen. Wir sehen uns dann. 92. Onboarding: Hallo an alle und willkommen zum letzten Video dieses Abschnitts. In diesem Video werden wir unsere Onboarding-Seiten gemeinsam gestalten. Eigentlich müssen wir drei verschiedene Seiten entwerfen, die die wichtigsten Merkmale dieser Anwendung veranschaulichen. Lassen Sie uns ohne weitere Umschweife beginnen, indem Sie eine neue Zeichenfläche einfügen. Ich werde auf meiner Tastatur „A“ drücken, und wählen wir ein iPhone 11 Pro oder X. Ich werde es hier platzieren, und lassen Sie es in Onboarding 1 umbenennen. Was brauchen wir noch für dieses Onboarding? Eigentlich müssen wir das Logo oder das Symbol dieser Anwendung platzieren. Zuerst gehen wir weiter und bringen es von hier her. Ich werde das kopieren und einfügen. Ziemlich gut. Ich werde diesen Titel jedoch entfernen. Das brauche ich nicht. Dann lassen Sie uns die Gruppierung aufheben, um einen großartigen Rahmen zu erhalten. Fantastisch. Ich werde es an der Mitte ausrichten. Seine obere Polsterung wird 84 sein, also lassen Sie es uns nach oben bewegen. Allerdings müssen wir den X-Wert auf 167 und den Y-Wert auf 80 ändern. Nun, wie Sie sehen können, haben wir eine 80 Pixel obere Polsterung. Machen wir es 84, so. Jetzt ist alles großartig. Dann müssen wir hier eine Illustration platzieren. Gehen wir weiter und platzieren Sie unsere Illustration. Der erste wird das Sparen sein. Platzieren Sie es hier. Ich werde es an der Mitte ausrichten und seine obere Polsterung wird 45 sein, so. Dann werde ich hier einen Kreis platzieren, also lass uns einen erstellen. Ich werde es ziehen und ablegen, und dann ändern wir den Farbcode in F5F6 und FA, so. Vergewissern Sie sich jedoch, dass sich dieser Kreis in Ihrer Zeichenfläche befindet. Ziemlich gut. Ich möchte die Breite und Höhe auf 470 ändern, und lassen Sie uns das X auf minus 125 und das Y auf 423 setzen. Ziemlich gut. Dann müssen wir einen Titel, eine Beschreibung, einen Seitenindikator und eine Schaltfläche „Weiter“ haben. Lassen Sie uns den Text hier einfügen und schreiben : „Sparen Sie Ihr Geld bequem.“ Dann werde ich die Schriftart in Montserrat ändern. Es wird fett sein, und die Schriftgröße sollte 24 Punkte betragen. Dann werde ich die Farbe auf 2743 und FD ändern, und dann lassen Sie uns die Größe ändern, um so etwas zu erhalten. Ich werde jedoch die Höhenlinie auf 36 setzen, um sie sichtbarer zu machen. Lassen Sie mich hineinzoomen. Ich werde das X auf die 30 setzen, um eine 30-Pixel-linke Polsterung und das Y auf 488 zu erhalten. Ziemlich gut. Dann duplizieren Sie es, verschieben Sie es nach unten, und dieses Mal werde ich die Schriftart in SF Pro Text ändern, es regelmäßig machen, und die Schriftgröße sollte 18 Punkte betragen. Dann ändern wir die Farbe zu 7C2AFF, und dann werde ich schreiben „Holen Sie sich fünf Prozent Cashback für jede Transaktion und geben Sie es leicht aus.“ Ziemlich gut. Ändern wir die Zeilenhöhe auf 28. Ich werde es runterziehen. Seine obere Polsterung sollte 22 Pixel wie folgt betragen. Jetzt ist es Zeit, unseren Seitenindikator zu erstellen. Lassen Sie mich ein wenig hineinzoomen. Ich muss ein Rechteck haben, also lassen Sie uns ziehen und ablegen, um ein Rechteck zu erstellen. Seine Breite wird 22 sein und seine Höhe sollte fünf sein, so. Lassen Sie es uns komplett abgerundet machen. Ich werde die Farbe auf 2A46 und FF ändern. Ziemlich gut. Lassen Sie uns es duplizieren, verschieben Sie es auf die rechte Seite, und der Abstand zwischen ihnen sollte vier Pixel betragen. Holen Sie sich einen Kreis, fünf mal fünf, dann lasst uns die Farbe in B5BFF ändern. Ziemlich gut. Noch einmal, duplizieren Sie es, verschieben Sie es auf die linke Seite, bis Sie eine vier Pixel linke Polsterung erhalten, gruppieren Sie sie und nennen Sie es Indikatoren. Ziemlich gut. Setzen wir das X auf 30 und das Y auf 736. Fantastisch. Das letzte, was wir erstellen müssen, ist unsere Schaltfläche „Weiter“. Hoffentlich können wir fortfahren und die Anmelde-Button kopieren. Ich werde das kopieren und es hier einfügen. Ich werde es nach unten verschieben, dann lasst uns diese Texte in Weiter ändern. Danach werde ich diese Maskengruppe eröffnen. Lassen Sie uns dieses Rechteck 1 und Rechteck 2 auswählen, indem Sie Shift gedrückt halten, und ich werde die Breite auf 153 verringern, wie folgt, und verschieben Sie es auf die rechte Seite. Fantastisch. Dann lassen Sie uns auch unseren Text bewegen, und wir werden eine 24 Pixel linke, 24 Pixel obere und untere Polsterung erhalten . Lassen Sie uns diesen Pfeil nach rechts auch auf die linke Seite bewegen , bis Sie eine 24-Pixel-rechte Polsterung erhalten. Ziemlich gut. Ich werde es in Weiter umbenennen. Dann lassen Sie uns sein X auf 192 und das Y auf 702 setzen, und das ist alles. Wie Sie sehen können, haben wir auch eine 30-Pixel-rechte Polsterung. Ich werde es duplizieren. Lassen Sie uns diese Abbildung entfernen. Ich werde einen neuen platzieren. Diesmal sollte der Safety Box sein, platzieren Sie ihn. Lassen Sie uns es an der Mitte ausrichten, und jetzt gehen wir weiter und ändern Sie diesen Titel in „Sichern Sie Ihr Geld kostenlos und erhalten Sie Belohnungen.“ Dann lassen Sie uns die Größe dieser Textebene ändern. Ziemlich gut. Ich werde auch diese Beschreibung ändern, also lasst uns schreiben „Holen Sie sich die sicherste Zahlungs-App aller Zeiten und genießen Sie es.“ Ziemlich gut. Offensichtlich müssen wir unsere Indikatoren ändern. Lassen Sie uns dieses blaue wählen, verschieben Sie es wie folgt auf die rechte Seite, und wählen Sie diese mittlere, verschieben Sie es mit der gleichen Vier-Pixel-Polsterung auf die linke Seite. Ziemlich gut. Das ist alles für diese Seite, und lassen Sie uns sie duplizieren. Noch einmal werde ich diese Illustration entfernen. Lass uns einen neuen platzieren, Trading. Fantastisch. Ich werde es an der Mitte ausrichten, und hier schreiben wir „Genießen Sie den provisionsfreien Aktienhandel“, und die Beschreibung sollte geändert werden in „ Online-Investitionen war noch nie einfacher, als es jetzt ist.“ Lassen Sie uns unsere Indikatoren ändern. Ich schiebe es auf die rechte Seite und lass uns letzte in die Mitte bewegen. Ziemlich gut. Danach müssen wir unsere Schaltfläche ändern, da wir sie jetzt von Next to Get Started ändern müssen. Lassen Sie uns zuerst diesen Pfeil nach rechts entfernen. Dann werde ich dieses Rechteck 1 und Rechteck 2 auswählen, dann lassen Sie uns seine Breite auf 211 erhöhen. Ziemlich gut. Ich werde diese Kreise ein wenig bewegen, um so etwas zu bekommen. Lassen Sie uns schließlich diesen Text an der Mitte ausrichten und „Erste Schritte“ schreiben. Ich werde diese Kreise ein wenig verschieben, und lassen Sie uns diese Schaltfläche in Erste Schritte umbenennen. Leute, das ist auch alles für diesen Bildschirm. Wir haben erfolgreich 24 verschiedene Bildschirme erstellt und Sie haben gelernt, wie Sie alle Techniken anwenden, die Sie benötigen, um eine moderne und ausgefallene Benutzeroberfläche zu erstellen. Ich hoffe, Sie haben diesen Abschnitt genossen. Es war eine lange Reise. Vielen Dank, dass Sie es gesehen haben, und ich werde Sie im nächsten Video sehen. Wir sehen uns dort. 93. Einführung in das Landing Page: Hey alle, willkommen zurück in einem anderen Abschnitt des Kurses. In diesem Abschnitt werden wir beginnen, eine moderne und schöne Lernseite zu entwerfen, oder eine fiktive mobile Anwendung namens Entwurf. Zunächst beginnen wir mit der Schaffung unseres Designsystems gemeinsam. Wir werden unsere Textstile, unsere Farbstile erstellen , und dann werden wir auf Wireframing-Prozess übergehen. Wir werden einen Low-Fidelity-Wireframe mit allen notwendigen Abschnitten wie Hero-Abschnitt, Feature-Abschnitt erstellen allen notwendigen Abschnitten wie Hero-Abschnitt, , und dann werden wir Mitgliedschaftspläne haben, wie Sie sehen können, und Q&A-Abschnitt, und schließlich, die Fußzeile. Danach werden wir beginnen, unsere Zielseite zusammen zu entwerfen, wir werden den Heldenbereich entwerfen und dann einen Kreditkartenabschnitt, den Statistikbereich, Unterstützungsabschnitt,Mitgliedschaftspläne und so weiter entwerfen den Statistikbereich, Unterstützungsabschnitt, . guter Letzt werden wir unser Design interaktiv gestalten, Zuguter Letzt werden wir unser Design interaktiv gestalten,indem wir unseren Elementen Interaktionen hinzufügen. Wir werden einen High-Fidelity-Prototyp für unsere Landing Page erstellen. Wie Sie sehen können, haben wir verschiedene Animationen, zum Beispiel, hier haben wir einen coolen Übergang für diese Kreditkarte dann werden wir diesen Akkordeon-Effekt wie folgt haben. Die Karte wird sich erweitern und Sie werden all diese coolen Techniken lernen. Sind Sie bereit, mit der Gestaltung Ihrer Website zu beginnen? Wir sehen uns im nächsten Video. 94. Was ist eine Landing: Hey, willkommen zurück. In diesem Video werden wir über Landing Pages sprechen. Wir werden erfahren, was eine Landing Page ist und wie sie strukturiert werden soll. Nun, was ist eine Landingpage? Eine Landing Page ist eine Webseite, die für Marketingzwecke entwickelt wurde. Es ist die Seite, auf der die Besucher landen, nachdem sie auf einen Link in einer Google-Anzeige, YouTube, Facebook, etc. Eine Zielseite wurde speziell für Marketingkampagnen entwickelt, oder sagen wir, um Besucher zu Kunden zu konvertieren. Was ist der Unterschied zwischen einer Startseite und einer Landing Page? Nun, auf einer Homepage finden Sie so viele Ablenkungen wie Links, Bilder usw. Andererseits ist die Zielseite super fokussiert, da weniger Ablenkungen einer höheren Konversionsrate entsprechen. Was sind die wesentlichen Elemente einer Landing Page? Der wichtigste Teil einer Landingpage ist der Heldenbereich. Ein Heldenbereich enthält eine Überschrift, eine unterstützende Überschrift, einen Call-to Action oder kurz CTA usw. Da dies der wichtigste Teil Ihrer Zielseite ist, sollten Sie sicherstellen, dass Sie sie perfekt gestalten. Dann können wir die vorteilsgesteuerten Funktionen haben. Dies ist der Abschnitt, in dem wir die wichtigsten Merkmale des Produkts oder der Dienstleistung präsentieren . Danach können wir soziale Beweise oder gesellschaftliche Zeugnisse haben. Schließlich können wir ein abschließendes Argument haben. Dies ist ein guter Ort für einen anderen CTA. Je nach Typ Ihrer Landingpage können Sie verschiedene Abschnitte verwenden. Werfen wir einen Blick auf eine gut gestaltete Landing Page auf Dribbble und analysieren sie. Diese Zielseite wurde von Martin Strba entworfen, ich hoffe, ich spreche seinen Namen richtig aus. Wie Sie sehen können, beginnt es mit dem Heldenbereich. Hier haben wir eine große und klare Schlagzeile. Übrigens sollten Sie immer den H1-Textstil für unsere Hauptüberschrift verwenden. Wir werden später darüber reden. Dann haben wir einen Call to Action oder CTA, beginnen Sie mit Ihrem Risikoberater. Wir haben auch eine Navigationsleiste an der Spitze und wir haben ein Bild hier. Wenn Sie ein wenig nach unten scrollen, haben wir die drei wichtigsten Vorteile dieses Produkts: analysieren, vorhersagen, entscheiden. Dann haben wir einige Lösungen, wie es funktioniert, einige Zeugnisse, einen weiteren Aufruf zum Handeln und schließlich eine Fußzeile. So ist eine typische Landing Page strukturiert. Alles klar, Leute. Ich hoffe, Sie haben jetzt ein besseres Verständnis von Landing Pages. Ich hoffe, es hat dir gefallen, und ich sehe dich im nächsten Video. 95. Einrichten deines Projekts: Hallo, da. In diesem Video werden wir unser Projekt einrichten und dann beginnen wir gemeinsam mit der Gestaltung unserer Landingpage. Öffnen Sie zuerst Figma und ich werde auf dieses Plus-Symbol in der oberen rechten Ecke klicken , um eine neue Datei zu erstellen. Wenn Sie diese beiden Symbole nicht sehen, liegt das daran, dass Sie sich in einem Abschnitt Entwürfe befinden, und das ist völlig in Ordnung. Es gibt hier keinen Unterschied, weil ich gerade in einem Design-Kurs Team bin, deshalb habe ich diese beiden zusätzlichen Icons. Aber wenn Sie unter Entwürfe Abschnitt oder dem Abschnitt Zuletzt verwendet werden, müssen Sie nur auf dieses Plus-Symbol klicken, um eine neue Datei zu erstellen. Lasst uns darauf klicken. Da gehen wir. Ich werde es nennen, Landing Page. Ziemlich gut. Was brauchen wir für dieses Projekt? Zunächst einmal erstellen Sie unseren Design-Leitfaden. Dazu gehören unsere Typografie-Stile und unsere Farbstile. Ich werde auf meiner Tastatur „A“ drücken, um eine Zeichenfläche zu erstellen. Wenn ich auf meiner Tastatur „A“ drücke, wird dieses Rahmenwerkzeug ausgewählt und ich werde diese Weise klicken und ziehen, um einen Rahmen zu erstellen. Ich werde es ein bisschen größer machen. Jetzt werde ich die Füllung auf F2F6FF ändern, um dieses sehr hellblaue als Hintergrund zu erhalten. Dann werde ich es nennen, Design-Leitfaden. Ziemlich gut. Dieser Design-Leitfaden wird zwei verschiedene Abschnitte haben, Typografie und Farben. Ich werde das „Rechteck-Werkzeug“ oben auswählen und klicken und ziehen, um ein Rechteck wie dieses zu erstellen. Ich mache es so weiß und lass es mich runden. Ich werde den Eckenradius auf 30 erhöhen. Fantastisch. Nun, fügen wir ein paar Schlagschatten hinzu. Lassen Sie uns einen Effekt hinzufügen. Da gehen wir. Standardmäßig ist es auf Schlagschatten eingestellt. Ich werde seine Einstellungen ein wenig ändern. Zunächst werde ich die Farbe auf 16194F ändern. Fantastisch. Dann werde ich die Unschärfemenge auf 100 und Y auf 50. Ziemlich gut. Lassen Sie mich abschließend die Deckkraft von 25 Prozent auf 10 Prozent reduzieren. Sieht toll aus, nicht wahr? Lassen Sie mich Ihnen sagen, warum ich diese Beträge gewählt habe. Wenn Sie nicht sicher sind, wie Sie diese Beträge einstellen, zum Beispiel die Unschärfe, die Y, können Sie immer die Formel verwenden, die ich verwende, und es funktioniert fast die ganze Zeit, und es ist so einfach. Sie müssen nur die Unschärfemenge nehmen und sie durch 2 teilen. Zum Beispiel habe ich hier 100 verwendet und hier kann ich sogar 100/2 schreiben, um es durch 2 zu teilen. In diesem Fall erhalten Sie einen sehr guten und weichen Schlagschatten. Das ist genau das, was ich wollte. Lassen Sie mich es ein wenig größer machen und dann werde ich das „Textwerkzeug“ auswählen. Ich drücke „T“ auf meiner Tastatur und klicke hier. Lassen Sie mich die Größe auch für jetzt ein wenig verringern, zum Beispiel 36. Hier, ich werde Topographie schreiben, ziemlich gut. Für dieses Projekt werde ich eine Google Font verwenden, die Roboto genannt wird. Es ist standardmäßig in Figma verfügbar, so dass Sie es nicht installieren müssen. Lassen Sie mich das Gewicht von fett auf mittel ändern und ich werde auch die Schriftgröße von 36-24 Punkten so verringern. Jetzt werde ich es duplizieren, „Befehl D“ oder „Control D“ auf Ihrer Tastatur. Ich werde es runterziehen. Lassen Sie mich hineinzoomen. Wenn Sie vergrößern möchten, können Sie die Taste „Command“ oder „Control“ gedrückt und gleichzeitig das Rad Ihrer Maus verwenden. Hier werden wir die Überschrift H1 60 fett schreiben. Ich wähle das aus und lass es uns fett machen. Für diese Überschrift H1 werde ich die Schriftgröße 60. Lassen Sie mich hier 60 schreiben. Ziemlich gut. Ich werde ein wenig verkleinern und sicherstellen, dass die Zeilenhöhe geändert wird. Die Zeilenhöhe hier ist standardmäßig auf auto gesetzt, aber stellen Sie sicher, dass Sie 150 Prozent schreiben. Möglicherweise sehen Sie hier momentan keine Änderungen, aber lassen Sie mich Ihnen ein Beispiel zeigen. Ich werde eine Textebene hinzufügen und etwas schreiben. Hallo Welt. Wir erstellen unseren Design-Leitfaden. Ich werde es kleiner machen. Wie Sie hier sehen können, haben wir drei Zeilen. Habe ich Recht? Wenn ich es auf Auto setze. Die Linienhöhe ist jetzt auf 70 festgelegt. Wenn Sie darauf klicken, können Sie die Standardnummer sehen, und jetzt scheint es in Ordnung, aber wenn ich es auf normal ändere, und wenn ich diese Schriftgröße auf zum Beispiel 30 Punkte verkleinere. Jetzt können Sie sehen, dass diese Textzeile nicht so lesbar ist. Aber wenn ich diese Zeilenhöhe von 35 ändere, die automatisch auf 150 Prozent ist, können Sie sehen, dass sie besser lesbar ist, besonders für Zeilenabsätze. So wichtig, um genügend Platz zwischen Ihren Linien zu haben. Das ist der Grund, warum wir 150 Prozent verwenden. Was bedeutet das? Wenn ich das entferne, bedeutet das, dass ich die Schriftgröße 30 mit 1,5 multipliziere und 45 bekomme. Wenn ich es auf 150 Prozent setze, bedeutet das, dass meine Zeilenhöhe jetzt 45 beträgt. Jetzt müssen wir unseren Textstil erstellen. Wie kann ich das machen? Es ist so einfach. Ich werde diese Textebene auswählen und ich werde auf diese vier Punkte Symbol klicken. Da gehen wir. Klicken Sie auf dieses Plus-Symbol „Stil erstellen“. Hier lassen Sie mich schreiben Überschrift/H1. Aber warum habe ich einen Schrägstrich zwischen diesen beiden Wörtern verwendet? Wenn ich eine Kategorie für meine Textstile oder meine Farbstile erstellen möchte, kann ich zwischen ihnen einen Schrägstrich verwenden. Ich werde dieses H1 unter die Überschriftenkategorie setzen und wir werden einen Stil erstellen. Da gehen wir. Hier können wir sehen, dass der Name dieser Kategorie Überschrift ist, und unter dieser Überschrift habe ich H1. Wann immer Sie diesen Textstil ändern möchten, können Sie einfach auf dieses Symbol klicken, „Stil bearbeiten“, und bearbeiten Sie Ihren Textstil. Hier können Sie sogar eine Beschreibung hinzufügen. Sie können den Namen ändern, ändern Sie die Eigenschaften, etc. ziemlich gut. Jetzt werde ich dieses Rechteck ein wenig vergrößern, um mehr Platz zum Arbeiten zu bekommen. Dann werde ich es duplizieren und nach unten ziehen. Hier werden wir unseren zweiten Textstil erstellen. Aber bevor wir das tun, müssen wir sicherstellen, dass wir diese Textebene von ihrem Stil lösen. Wenn ich zu diesem Abschnitt gehe, können Sie sehen, dass wir ein Symbol namens Trennen Stil haben. Ich werde darauf klicken und jetzt ist diese Textebene nicht mehr mit dem Stil verbunden, den wir gerade erstellt haben. Lassen Sie mich dieses H1 in H2 ändern und es wird 50. Ich werde die Schriftgröße auf 50 Punkte reduzieren und das ist alles. Vergessen Sie nicht, Ihren Textstil zu erstellen. Wir werden die Überschrift H2 schreiben. Ziemlich gut. Lassen Sie mich es nochmals duplizieren, verschieben Sie es nach unten, trennen Sie es von seinem Stil. Lassen Sie mich es auf H3 ändern, und ich werde es 40 machen und mich auch hier ändern lassen. Schließlich lassen Sie uns eine Stil-Überschrifte/H3 erstellen. Wir müssen sechs weitere Textstile erstellen. Ich werde es duplizieren, es nach unten bewegen, es von seinem Stil lösen. Hier schreiben wir die Überschrift H4 und 24. Lassen Sie mich die Schriftgröße auf 24 Punkte verringern und die Textstile Überschrift H4 erstellen. Lassen Sie mich es noch einmal duplizieren. Ich weiß, es ist ein langweiliger Prozess, aber glauben Sie mir, später wird sich dieser Prozess auszahlen. Lassen Sie mich es von seinem Stil lösen und dieses Mal werden wir unser Körper-Intro erstellen. Ich werde Körper Intro-Text schreiben 24 regelmäßig. Für dieses Body-Intro werde ich ein Gewicht von fett zu normal ändern, und eine Schriftgröße wird 24 sein. Lassen Sie mich den Stil kreieren. Ich werde Body/Intro schreiben. Ziemlich gut. Ich werde es duplizieren, es nach unten bewegen und es von seinem Stil lösen. Hier schreiben wir nach Haupt und die Schriftgröße wird 20 Punkte sein. Lassen Sie mich abschließend die Schriftgröße auf 20 verringern und den Textstil Body/main erstellen. Wir müssen drei weitere Textstile erstellen, um unsere Typografie-Stile zu vervollständigen. Wir werden es duplizieren, verschieben es nach unten, lösen es von seinem Stil, und lassen Sie uns schreiben mittleren Text 17 regulär. Ziemlich gut. Lassen Sie mich die Schriftgröße auf 17 Punkte ändern und den Stil erstellen. Ich möchte hier keine Kategorie erstellen, also werde ich ein Medium schreiben, ich werde es duplizieren, es nach unten verschieben, es von seinem Stil lösen. Nun, lassen Sie uns Beschriftungstext schreiben und es wird 15 Punkte sein. Lassen Sie mich den Stil erstellen und ich werde es Beschriftung nennen. Letzt werde ich es duplizieren, es von seinem Stil lösen, und lassen Sie mich schreiben, kleinen Text und es wird 13 Punkte sein. Lassen Sie mich den Stil kreieren. Ich werde es klein nennen. Das ist alles, was wir mit unseren Topographien Stilen getan haben. Ich werde sie jetzt organisieren. Ich halte die „Shift“ -Taste auf meiner Tastatur gedrückt und klicke auf jede Ebene, um sie gleichzeitig auszuwählen. Dann kann ich zum Ausrichtungsabschnitt gehen, oben rechts ist der Inspektor. Oben sehen Sie diesen Ausrichtungsabschnitt und auf der rechten Seite erhalten Sie dieses Symbol, Weitere Optionen. Ich werde „Vertikalen Abstand verteilen“ auswählen, und wenn ich vergrößere, kann ich diese rosa Griffe sehen. Ich kann den Abstand einfach anklicken und ändern. Ich werde es zum Beispiel auf 40. Ich kann den Betrag hier festlegen. Da gehen wir. Alles sieht gut aus. Jetzt können Sie sich fragen, warum muss ich diese Textstile erstellen? In der Tat ist es keine obligatorische Aufgabe, aber wenn Sie ein sehr guter UI-UX-Designer werden wollen, und wenn Sie zum Beispiel für eine Agentur arbeiten möchten, müssen Sie sicherstellen, dass Textstile und Farbstile verwendet werden fast die ganze Zeit, und wir müssen sicherstellen, dass alles organisiert. Was sind die Vorteile der Verwendung eines Textils? Lassen Sie mich es Ihnen in einer Sekunde zeigen. Ich werde eine Textebene erstellen und hier werde ich Hallo schreiben. Dies ist ein normaler Text. Wenn ich einen dieser Textstile anwenden möchte, kann ich diese Textebene einfach auswählen und ich kann im Inspektor zu diesem Textabschnitt gehen und mich auf das Style-Symbol klicken lassen. Von hier aus können Sie die Stile finden, die wir gerade erstellt haben. Wir haben Körper, Überschrift und diese drei Textstile. Ich werde es zum Beispiel auf H3 setzen. Ich werde hineinzoomen und jetzt werde ich eine andere Textebene erstellen und mich Welt schreiben lassen. Weil ich einen Textstil für diese vorherige Textebene verwende, und das ist genau das, was ich will. Also habe ich zwei Textebenen mit den gleichen Textstilen. Wenn das Projekt abgeschlossen ist, nehmen Sie an, dass der Kunde oder das Unternehmen Sie auffordert, die Schriftgröße der Überschrift 3 zu ändern Wenn Sie keine Textstile verwenden, müssen Sie alle Textebenen mit den gleichen Eigenschaften manuell ändern. Aber wenn Sie einen Textstil verwenden, können Sie leicht zu diesem Textstil gehen und klicken Sie auf „Textstil bearbeiten“. Hier können Sie beispielsweise die Schriftgröße auf 50 erhöhen. Nun, wie Sie sehen können, gelten die Änderungen für beide Textebenen gleichzeitig und wenn ich ein wenig nach oben gehe, können Sie sehen, dass diese Überschrift 3 ebenfalls geändert wurde. Ich werde den Vorgang rückgängig machen, indem ich „Befehl Z“ oder „Control Z“ gedrückt halte. Perfekt. Aus diesem Grund verwenden wir einen Textstil. Ich werde sie entfernen. Wenn Sie heute für Web oder sogar für mobile entwerfen, stellen Sie sicher, dass Sie nicht eine Schriftgröße kleiner nach unten 13 Punkte verwenden. Weil es für die Benutzer zu schwer wird, es zu lesen. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. 96. Erstelle deine Farbstile: Hey da, in diesem Video werden wir anfangen, unsere Farbstile zusammen zu erstellen. Ohne weitere Umschweife, lasst uns anfangen. Lassen Sie mich diese Design Guide Zeichenfläche so vergrößern. Schließlich werde ich alle diese Ebenen auswählen und sie gruppieren , indem ich auf meiner Tastatur Befehl G oder Strg G drücke. Ich nenne es Typographie. Dann werde ich ein weiteres Rechteck erstellen oder ich könnte es einfach duplizieren, aber lassen Sie mich Ihnen etwas zeigen. Ich werde so etwas per Drag & Drop ziehen. In der Tat werde ich die gleichen Effekte und den gleichen Stil anwenden, die für dieses Rechteck verwendet werden. Wenn Sie die Befehlstaste oder die Strg-Taste auf Ihrer Tastatur gedrückt halten und auf dieses Rechteck klicken, wird es ausgewählt. Alternativ können Sie zur Ebenenliste wechseln und sie manuell auswählen. Jetzt werde ich mit der rechten Maustaste darauf klicken, und unten gehe ich zu Kopieren und Einfügen, und von hier aus werde ich die Eigenschaften kopieren. Dann werde ich dieses Rechteck auswählen, das ich gerade erstellt habe. Ich werde mit der rechten Maustaste darauf klicken, gehen Sie zu Kopieren und Einfügen und Einfügen Eigenschaften. Da gehen wir. Wir haben das gleiche Styling auch für dieses Rechteck. Dieses Rechteck ist für unsere Farben. Ich werde es so vergrößern, ziemlich gut, und lassen Sie mich ein Quadrat erstellen. Ich werde die Umschalttaste gedrückt halten, Drag & Drop so ablegen. Legen wir die Breite und Höhe auf 250 x 250 fest, und schließlich erhöhen wir den Eckenradius auf 30. Ziemlich gut. Für dieses Projekt werde ich sechs verschiedene Farben Stile erstellen. Die erste Farbe wird unsere Primärfarbe sein. Der Farbcode ist 554DDE. Ziemlich gut. Dieses Lila wird unsere Primärfarbe sein. Wie Textilien können Sie, um einen Farbstil zu erstellen, einfach zum Fill Abschnitt gehen und auf das Style-Symbol klicken und auf dieses Plus-Symbol klicken. Hier werde ich die Primarvereinigung schreiben. Da gehen wir. Wir haben gerade unseren ersten Farbstil kreiert. Dann werde ich Befehl D oder Control D auf meiner Tastatur drücken, auf die rechte Seite bewegen, und ich werde es von seinem Stil lösen und dann werde ich den Farbcode auf F44E77 setzen. Ziemlich gut. Dieser wird unsere Akzentfarbe sein, und wir werden es zum Beispiel für den Aufruf von Aktionstasten verwenden , oder wenn wir einen bestimmten Teil des Textes hervorheben möchten, werden wir diese Farbe verwenden. Lassen Sie mich einen Farbstil erstellen, und ich werde Accent schreiben. Fantastisch. Noch einmal, duplizieren Sie es. Ich werde es nach unten verschieben, ich werde es von seinem Stil lösen, und lassen Sie mich den Farbcode auf 6A6D9E ändern. Es wird unser Licht sekundär sein, aber ich werde es Sekundärlicht nennen, also lass mich Secondary/Light schreiben, denn wir werden auch ein dunkles haben. Ich werde es duplizieren, es auf die rechte Seite verschieben, es von seinem Stil lösen und den Farbcode auf 16194F ändern. Lassen Sie mich einen Farbstil erstellen, Secondary/Dark. Fantastisch. Wir müssen zwei weitere erschaffen. Ich werde es duplizieren, es nach oben bewegen. Diese wird unsere neutrale Farbe sein und wir werden sie zum Beispiel für unseren Hintergrund verwenden . Ich werde es von seinem Stil lösen und lassen Sie mich den Farbcode in F2F6FF ändern . Ziemlich gut. Es ist eine hellblaue Farbe, es ist die gleiche Farbe, die wir für unseren Hintergrund hier verwendet haben. Ich werde einen Farbstil erstellen, lassen Sie mich es Neutral nennen. Fantastisch. Zu guter Letzt werden wir einen Farbstil für unseren Strich erstellen. Ich werde es duplizieren, verschieben Sie es nach unten, lassen Sie mich es von seinem Stil lösen, entfernen Sie die Füllung und fügen Sie einen Strich hinzu. Ich werde den Strich auf zwei setzen, die Dicke spielt jetzt keine Rolle, denn später können wir ihn ändern, wenn wir diesen Stil auf unsere Formen anwenden, aber was zählt, ist die Farbe. Ich werde den Farbcode auf CAD6F1 setzen. Ziemlich gut. Lassen Sie mich hineinzoomen, dass Sie es sehen können. Fantastisch. Lassen Sie mich es auswählen und einen Farbstil hinzufügen. Ich werde Stroke schreiben. Ich werde dieses Rechteck ein wenig kleiner machen, wie dieses. Lassen Sie mich alle diese Formen auswählen, gruppieren und die Umschalttaste gedrückt halten und dieses Rechteck auswählen. Schließlich können Sie sie im Inspektor oben sowohl horizontal als auch vertikal ausrichten. Was wir hier hinzufügen möchten, ist ein Titel. Lassen Sie mich verkleinern und lassen Sie mich dieses Rechteck ein wenig vergrößern. Ich werde diese Farben nach unten verschieben, und lassen Sie mich diesen Typografie-Text auswählen, kopieren Sie ihn, Befehl C oder Ctrl C, wählen Sie dieses Rechteck und fügen Sie es ein, Befehl V oder Strg V. Hier werde ich Farben schreiben. Ziemlich gut. Es ist linke Polsterung wird 65 sein, und seine obere Polsterung wird 60 sein. Wir haben unseren Designleitfaden erfolgreich erstellt. In der Tat können Sie mehr Elemente zu Ihren Designleitfäden hinzufügen, wie Logos, Symbole, Schaltflächen, Schieberegler, etc. Aber vorerst brauchen wir nur unseren Typografie-Stil und unsere Farbstile. Alles klar Jungs, das ist alles für dieses Video, ich hoffe, es hat euch gefallen, und ich werde euch im nächsten Video sehen. 97. Wireframing Teil 1 Teil: Hey, da. Jetzt, da unser Designleitfaden fertig ist, ist es an der Zeit, ein Drahtmodell für unsere Zielseite zu erstellen. Was ist eigentlich Wireframing? Wireframing ist eine Möglichkeit, eine Website oder eine mobile Anwendung auf struktureller Ebene zu entwerfen. Mit anderen Worten, es ist der Entwurf unseres Designs und es hilft uns, unser Projekt einfach und bequemer zu gestalten, also ohne weiteres, lasst uns loslegen. Ich werde Figma öffnen und hier, direkt neben diesem Design-Leitfaden, den wir erstellt haben, werde ich eine andere Zeichenfläche erstellen. Ich werde auf meiner Tastatur „A“ drücken und auf der rechten Seite im Inspektor können Sie sehen, dass wir einige vorgefertigte Zeichenflächen haben. Ich werde Desktop wählen. Die Dimension ist 1440 von 1024. Da gehen wir. Lass mich hineinzoomen, ziemlich gut. Wir haben unsere Zeichenfläche erstellt, aber wie Sie sehen können, ist sie nicht groß genug, um alle unsere Elemente anzubringen. Zuallererst werde ich es umbenennen. Lassen Sie uns auf seinen Namen in der Liste der Ebene doppelklicken und ich werde es in Drahtmodell umbenennen. Perfekt. Dann, im Inspektor, werde ich die Höhe auf 6.100 setzen, vorerst. Wenn ich verkleinere, können Sie sehen, dass wir jetzt viel mehr Platz haben, mit dem wir arbeiten können. Eigentlich haben wir zwei Arten von Wireframing, einen Low Fidelity Wireframe und einen High Fidelity Wireframe. Was ist der Unterschied? Ein Low-Fidelity-Drahtmodell enthält nur die notwendigen Elemente. Es muss nicht die Marken Farben, oder genaue Abstände, oder sogar Symbole haben . Wir versuchen uns nur vorzustellen, wie unser Endprodukt sein wird. Wir werden einfache Formen wie Rechteck, Kreis usw. verwenden, um unser endgültiges Projekt auf struktureller Ebene zu visualisieren. Auf der anderen Seite erfordert ein High-Fidelity-Drahtmodell mehr Inhalt, wie die genaue Größe Ihrer Schaltflächen, Ihrer Elemente, oder sogar Sie könnten einige Farben einschließen. Aber im Moment werden wir gemeinsam ein Low-Fidelity-Drahtmodell erstellen. Lasst uns anfangen. Für unsere Landing Page benötigen wir einen Heldenbereich, oben auf jeder Landing Page oder jeder Website benötigen wir einen Heldenbereich , der der wichtigste Teil der Website ist. Du solltest so viel darauf achten. Ich wähle das Rechteck-Werkzeug aus der Symbolleiste aus und lasse mich klicken und ziehen, um ein einfaches Rechteck zu erstellen. Dann gehe ich weiter und ändere unsere Füllung. Lassen Sie mich einen unserer Farbstile wählen, die wir bereits erstellt haben. Ich werde zweitrangig wählen, die dunkle, ziemlich gut. Das wird unser Heldenbereich sein. Oben drauf brauchen wir eine Navigationsleiste. Eine Navigationsleiste wird ein Logo enthalten, dann einige Menüpunkte in der Mitte, und schließlich eine Anmelde-Taste auf der rechten Seite. Ich werde weitermachen und ein weiteres Rechteck erstellen. Lassen Sie mich die Umschalttaste gedrückt halten, klicken und ziehen, um ein Quadrat zu erstellen. Ich setze es auf 60 mal 60 ein. Machen wir es abgerundet, ziemlich gut. Dann werde ich eine andere Farbe wählen. Lassen Sie mich sekundär wählen, die leichte. Dies wird unser Logo darstellen, dann brauchen wir einige Menüpunkte. Eigentlich brauchen wir drei Menüpunkte, aber später, wenn Sie möchten, können Sie es ändern und Sie müssen sich keine Sorgen um die Details machen. Um die Menüpunkte zu veranschaulichen, werde ich voran gehen und ein anderes Rechteck wie dieses erstellen. Ich werde es abgerundet machen. Lassen Sie mich den Eckenradius im Inspektor erhöhen. Fantastisch. Lassen Sie mich die Farbe ändern, aber dieses Mal werde ich mit dieser neutralen Farbe gehen. Lassen Sie mich es zweimal duplizieren, bewegen Sie es auf die rechte Seite. Um die Ebene zu duplizieren, können Sie „Befehl D“ oder „Control D“ drücken, wenn Sie Windows erneut verwenden. Diese drei Formen stellen unsere Menüpunkte dar. Dann auf der rechten Seite müssen wir einen Anmelde-Button haben. Lassen Sie mich ein weiteres Rechteck erstellen, ein wenig größer, und ich werde es abgerundet machen und lassen Sie mich seine Farbe zu diesem Akzent ändern. Sie könnten zum Beispiel diese sekundäre Farbe verwenden, wie wir für unser Logo verwendet haben. Aber da wir die Akzentfarbe für den Anmelde-Button in unserem Endprodukt verwenden werden, können Sie das auch verwenden. Hier werde ich ein paar Dinge schreiben. Lassen Sie mich eine Textebene erstellen und lassen Sie mich schreiben Button, fantastisch. Lassen Sie mich es auswählen und seine Schriftgröße vorerst auf 17 erhöhen. Moment werden wir unsere Textstile nicht verwenden , weil es für diese Phase wirklich keine Rolle spielt. Aber wenn Sie es vorziehen, könnten Sie auch Ihre Textstile verwenden. Zum Beispiel könnten Sie dieses Medium verwenden. Lassen Sie mich beide Ebenen auswählen. Ich halte die Umschalttaste auf meiner Tastatur gedrückt und klicke auf beide. Dann werde ich sie sowohl horizontal als auch vertikal ausrichten. Lassen Sie mich es ein wenig größer machen, damit wir unsere Textstile verwenden können und zum Beispiel könnten wir main 20 verwenden. Lassen Sie mich es ausrichten. So weit so gut. Wir haben unsere navbar erfolgreich erstellt. Lassen Sie mich nun all diese Menüpunkte auswählen und gruppieren. Ich werde es Menü nennen. Ich werde dieses Rechteck-Logo nennen. Schließlich wählen wir beide Ebenen aus, gruppieren sie, und nennen wir es Schaltfläche. Zu guter Letzt können Sie alle diese drei Ebenen auswählen, da wir sie gruppiert haben. Noch einmal gruppieren Sie sie und richten Sie diese letzte Gruppe horizontal an der Mitte aus. Sie können ihm einen Namen wie Nav Bar geben. So weit so gut. Wir haben unsere navbar erstellt. Dann brauchen wir für unseren Heldenbereich ein Bild auf der rechten Seite und eine große Überschrift, eine Beschreibung und einen Aufruf zum Handeln. Ein Call to Action ist eigentlich eine Schaltfläche. Zum Beispiel eine Registrierungsschaltfläche oder eine Anmeldeschaltfläche. Vorerst spielt es keine Rolle. Wichtig ist, einige Formen zu erstellen, um unseren Titel, unsere Beschreibung und unsere Schaltfläche darzustellen . Ich gehe voran und wähle das Rechteck-Werkzeug aus, klicke und ziehe so. Ich werde es abgerundet machen. Lassen Sie mich es ein wenig vergrößern, da dies unser Titel ist und es perfekt ist, dann werde ich seine Farbe in unsere sekundäre Linie ändern, duplizieren, nach unten bewegen. Ich werde es ein bisschen kleiner machen, um zu zeigen, dass dies ein Text ist. Noch einmal, duplizieren Sie es, machen Sie es ein wenig kleiner. Fantastisch. Das wird unser Titel sein. Ich werde sie gruppieren und nennen es Titel. Dann müssen wir eine Beschreibung haben. Für unsere Beschreibung könnten wir die gleiche Technik verwenden und ein Rechteck wie dieses erstellen. Ich werde es so abgerundet machen. Ich werde diese neutrale Farbe für unsere Beschreibung wählen, sie nach unten bewegen, ein wenig kleiner machen, duplizieren, es ein wenig kleiner machen. Das ist alles. Unsere Beschreibung ist auch fertig. Ich werde alle drei Elemente auswählen, sie gruppieren, „Befehl G“ oder „Control G“ auf Ihrer Tastatur. Nennen wir es Beschreibung. Fantastisch. Zu guter Letzt brauchen wir einen Knopf. Ich gehe voran und doppelklicke auf diese Schaltfläche, um sie auszuwählen. Ich werde es kopieren, „Befehl C“ oder „Control C“ auf Ihrer Tastatur. Wählen Sie dann dieses große Rechteck, das unser Hintergrund ist, und drücken Sie „Befehl V“ oder „Control V“. Nun, wie Sie sehen können, ist diese Schaltfläche nicht innerhalb unserer Navbar-Gruppe, sondern außerhalb davon. Ich werde es hier setzen. Die linke Seite unseres Heldenabschnitts ist fertig. Aber was ist mit der rechten Seite? Für die rechte Seite werde ich ein sehr einfaches Bild verwenden. Ich werde Rechteck wählen, klicken und ziehen Sie wie folgt, machen Sie es abgerundet. Ich werde den Eckenradius erhöhen. Setzen wir es auf 40. Lassen Sie uns schließlich seine Farbe in sekundäres Licht ändern. Ziemlich gut. Jetzt wähle ich all diese drei Gruppen aus und schiebe sie ein wenig nach unten. Lass es mich etwas kleiner machen und es nach unten schieben. Wie Sie sehen können, ist unser Heldenbereich fertig. Wir haben gerade einen Low-Fidelity-Wireframe für unsere Helden-Sektion erstellt. Im nächsten Video werden wir unsere Reise fortsetzen, um diese Landing Page zu vervollständigen. Wir sehen uns im nächsten. 98. Wireframing Teil 2: Hey, da. Nach dem Heldenbereich werde ich den Feature-Abschnitt erstellen. Für diesen Service, bei dem es sich um eine Online-Banking-Anwendung handelt, werden wir drei Feature-Abschnitte erstellen. Was ist ein Featurebereich? Ein Feature-Abschnitt ist, wie Sie vielleicht vermuten , ein Abschnitt, der dem Benutzer die Funktionen dieses bestimmten Dienstes oder dieses bestimmten Produkts zur Verfügung stellt , was in unserem Fall die Anwendung ist. Für jeden Feature-Abschnitt benötigen wir also einen Titel, eine Beschreibung, und auf der rechten Seite müssen wir ein Bild haben. Ich gehe voran und wähle diesen Titel aus. In dieser Beschreibung halte ich die Umschalttaste gedrückt, um beide auszuwählen. Drücken Sie auf der Tastatur „Befehl C“ oder „Control C“ und drücken Sie dann „Befehl V“ oder „Control V“ auf Ihrer Tastatur und bewegen Sie es so nach unten. Ziemlich gut. Lassen Sie mich sie auch hier auf der linken Seite ausrichten. Wie Sie sehen können, ist unsere Beschreibung hier nicht lesbar genug. Also, was ich tun werde, werde ich voran gehen und wählen Sie dieses Wireframe Art Board und ändern Sie seine Hintergrundfarbe. Wie Sie standardmäßig sehen können, ist es auf Weiß eingestellt, aber ich werde es in unsere neutrale Farbe ändern. Lassen Sie mich nach unten scrollen. Jetzt können wir die Farbe unserer Beschreibung in etwas anderes ändern. Zum Beispiel Sekundärlicht. Für diesen Titel könnten wir ihn in sekundäre Dunkelheit ändern. Fantastisch. Jetzt auf der rechten Seite brauchen wir ein Bild und wir können es kopieren und einfügen. Können Sie sehen, wie einfach es ist, ein Low-Fidelity-Drahtmodell zu erstellen? Ich werde kopieren und einfügen. Bewegen Sie es nach unten. Aber ich werde es etwas kleiner machen, so. Ziemlich gut. Eigentlich in diesem Abschnitt werden wir eine Kreditkarte auf der rechten Seite präsentieren. Deshalb habe ich es wie eine Kreditkarte aussehen lassen. Das Seitenverhältnis veranschaulicht seinen Zweck. Nun, wir brauchen einen weiteren Feature-Abschnitt, also werde ich alle diese drei Elemente auswählen und „Befehl D“ oder „Control D“ auf Ihrer Tastatur drücken , um sie zu duplizieren, verschieben Sie sie ein wenig wie folgt nach unten. Aber dieses Mal werde ich den Ort unseres Titels und unserer Beschreibung mit unserem Bild ändern. Was ich tun werde, werde ich beide auswählen, gruppieren sie, verschieben sie auf die rechte Seite, und wählen Sie unser Bild und verschieben Sie es auf die linke Seite. In diesem Abschnitt werden wir einige Statistiken haben, zum Beispiel ein Diagramm. Also, was ich tun werde, werde ich es etwas kleiner machen. Dieses Rechteck wird unser Diagramm halten. Ich werde es duplizieren, „Befehl D“ oder „Control D“ auf meinem Keyword, verschieben Sie es nach oben und machen es ein bisschen kleiner wie folgt. Noch einmal duplizieren Sie es, verschieben Sie es nach unten, legen Sie es direkt neben unser vorheriges Rechteck, wie folgt. Ziemlich gut. Lassen Sie mich alle auswählen, gruppieren und nach unten verschieben. Aber für diese Funktion brauche ich eine Schaltfläche, einen „Mehr erfahren“ -Button. Was ich tun werde, ist, diese Textgruppe ein wenig nach oben zu verschieben und einen Platz für unsere Schaltfläche zu schaffen. Gehen wir weiter und kopieren Sie diese Schaltfläche. Ich werde „Befehl C“ oder „Kontrolle C“ drücken. werde ich „Befehl V“ oder „Kontrolle V“ drücken. Da gehen wir. Jetzt müssen wir einen weiteren Feature-Abschnitt für unsere Lernseite erstellen. Für diesen Feature-Abschnitt brauche ich wieder eine Überschrift, eine Beschreibung und auch einige kleine Bilder direkt unter der Beschreibung. Lassen Sie mich kopieren und einfügen, „Befehl C“ und „Befehl V.“ Ich werde es runterziehen. Hier, genau darunter, brauche ich ein paar kreisförmige Bilder. Lassen Sie mich einen Kreis erstellen. Ich werde die Ellipse wählen, die Umschalttaste gedrückt halten, klicken und ziehen, ziemlich gut, so. Ich werde die Farbe in Sekundärlicht ändern. Dann lassen Sie es mich duplizieren, bewegen Sie es auf die rechte Seite. Duplizieren Sie es immer wieder. Diese werden unsere Image-Platzhalter sein. Ziemlich gut. Auf der rechten Seite werde ich ein paar Bilder haben. Was ich tun werde, ist eines dieser Rechtecke hier auszuwählen. Ich werde darauf doppelklicken. Lassen Sie mich es kopieren, „Befehl C“, „Befehl V“, so. Ich werde es etwas kleiner machen. Dieser Abschnitt wird die Support-Funktion dieser Plattform darstellen. Auf der rechten Seite brauche ich ein paar Chatblasen. Lassen Sie mich duplizieren, „Befehl D“ oder „Control D“, bewegen Sie es nach unten. Duplizieren Sie es noch einmal. Ziemlich gut. Unser Feature-Bereich ist fertig. Jetzt können wir zum nächsten Teil übergehen, der unsere Mitgliedspläne ist. Lassen Sie mich hineinzoomen. Hier in der Mitte werden wir einen Titel haben. Genau darunter werden wir eine sehr kurze Beschreibung haben. Lassen Sie mich die Befehlstaste auf meiner Tastatur oder Strg-Taste gedrückt halten und auf eines dieser Rechtecke klicken , um nur dieses auszuwählen. Ich werde es kopieren, „Befehl C“, und fügen Sie es „Befehl V“ ein. Ich werde es runterziehen. Lassen Sie mich es horizontal an der Mitte ausrichten. Auch werde ich es größer machen, aber nicht so. Eigentlich werde ich die Wahltaste oder die Alt-Taste auf meiner Tastatur gedrückt halten und dann versuchen, sie von beiden Seiten zu vergrößern. Das ist genau das, was ich will. Lassen Sie es mich duplizieren, verschieben Sie es nach unten. Da dies eine Beschreibung ist, werde ich es ein bisschen kleiner machen, und lassen Sie mich seine Farbe in sekundäres Licht ändern. Endlich werde ich es so etwas kleiner machen. Fantastisch. Wir haben unseren Titel, wir haben unseren Untertitel, und hier müssen wir zwei verschiedene Pläne haben, den kostenlosen Plan und den Premium-Plan. Jeder Plan sollte den Preis haben, einen Aufruf zum Handeln, und auch ein Bild, dass der Benutzer das Design ihrer Debitkarten oder ihre Kreditkarten wählen kann , und schließlich einige kurze Funktionen dieses bestimmten Plans. Lassen Sie mich das Rechteck-Werkzeug auswählen. Ich werde so klicken und ziehen. Fantastisch. Ich werde es abgerundet machen. Lassen Sie mich seine Farbe in unser sekundäres Licht ändern, so. Wie ich Ihnen bereits gesagt habe, benötigen wir für diesen Plan einige Informationen wie einen Titel. Ich wähle dieses Rechteck aus, drücke „Befehl C“, „Befehl V“, um es so einzufügen. Fantastisch. Das wird unser Titel sein. Ich werde es duplizieren und nach unten ziehen. Lassen Sie mich es ein wenig vergrößern. Das wird unser Preis sein. Dann brauchen wir einen Knopf. Ich gehe nach oben, wähle diese Schaltfläche, „Befehl C“, „Befehl V“, und schiebe sie nach unten, so. Aber in der Liste der Ebene müssen wir es hier nach oben verschieben. Ziemlich gut. Hier haben wir den Knopf. Dann müssen wir ein Bild haben, also lassen Sie uns eins erstellen. Ich werde das Rechteck-Werkzeug auswählen, klicken und ziehen. Dies wird unser Kreditkarten- oder Debitkarten-Platzhalter sein, machen Sie es abgerundet, und lassen Sie uns die Farbe in sekundäre dunkel ändern. Dann brauchen wir einen Text. Lassen Sie uns diesen Titel auswählen, kopieren und einfügen, „Befehl C“, „Befehl V“ oder „Control C“, „Control V“, und machen es ein wenig kleiner. Lass es uns etwas breiter machen. Fantastisch. Lassen Sie uns schließlich die Farbe auf neutral ändern. Lassen Sie mich es duplizieren. Bewegen Sie es nach unten, duplizieren Sie es. Wir haben erfolgreich unseren ersten Plan erstellt. Ich werde alle diese Elemente auswählen und sie gruppieren. Klicken und ziehen Sie, um sie auszuwählen, wie folgt, und drücken Sie „Befehl G“ oder „Control G“, um sie zu gruppieren. Dann nennen wir es Plan, und ich werde es duplizieren, „Befehl D“ oder „Control D“, und verschieben Sie es auf die rechte Seite. Wählen Sie dann beide aus, gruppieren Sie sie, „Befehl G“ oder „Control G“, und nennen Sie es Pläne. Schließlich werde ich es horizontal an der Mitte ausrichten. Sieht so schön aus. Der nächste Abschnitt wird ein Q&A-Bereich sein. Für diesen Abschnitt mit Fragen und Antworten benötigen wir wiederum einen Titel, eine Beschreibung. Also werde ich beide auswählen, „Befehl C“, „Befehl V“ oder „Control C“, „Control V“ Bewegen Sie es nach unten, so. Hier müssen wir einige Rechtecke haben, um unsere Fragen zu halten, also lassen Sie mich ein Rechteck erstellen. Wir können ziehen, so. Lassen Sie mich es abgerundet machen. Schließlich werde ich seine Farbe in unser sekundäres Licht ändern. Dieser Platzhalter wird eine Textebene haben, also lassen Sie mich diesen Titel auswählen, „Befehl C“, „Befehl V“, verschieben Sie ihn nach unten, und ich werde ihn in der Ebenenliste hier nach oben verschieben. Ziemlich gut. Lass es mich etwas kleiner machen. Bewegen Sie es auf die linke Seite. Das wird unsere Frage sein. Auf der rechten Seite brauchen wir ein Symbol, das ein Bild ist. Ich werde einen Kreis erstellen, wie diesen. Verschieben Sie es auf die rechte Seite, und ändern Sie seine Farbe in neutral. Ziemlich gut. Dann wählen wir sie alle aus, gruppieren sie und lassen Sie uns die Frage nennen. Schließlich können Sie es duplizieren und verschieben Sie es für unsere zweite Frage nach unten. Wiederum duplizieren Sie es, um 5 Fragen zu erhalten, wie diese. Wir sind fast fertig. Das Letzte, was wir für unsere Zielseite brauchen, ist eine Fußzeile. Eine Fußzeile ist ein Abschnitt, der alle wichtigen Links Ihrer Website und auch den Copyright-Haftungsausschluss enthält . Ich wähle das Rechteck-Werkzeug aus, klicke und ziehe so, und ändere dann seine Farbe in sekundäre Dunkelheit. Hier müssen wir ein Logo, dann den Copyright-Haftungsausschluss und dann 3 Spalten mit Links haben. Lassen Sie uns ein Logo erstellen. Es ist so einfach. Wir brauchen ein Rechteck. Halten Sie die Umschalttaste gedrückt, um ein Quadrat zu erstellen. Da gehen wir. Ich werde es abgerundet machen. Lassen Sie mich das sekundäre Licht dafür wählen. Das ist unser Logo. Dann müssen wir das Urheberrechts-Haftungsausschlussrecht darunter , also lassen Sie uns eine Beschreibung wie diese erstellen. Ich werde es abgerundet machen. Wieder werde ich das sekundäre Licht wählen, so duplizieren und nach unten bewegen. Fantastisch. Die linke Seite unserer Fußzeile ist fertig. Ich werde diese 2 Ebenen auswählen, sie gruppieren und auch dieses Logo und diese Gruppe auswählen und sie noch einmal gruppieren, und ich werde sie nach unten verschieben. Auf der rechten Seite, wie ich bereits erwähnt habe, müssen wir 3 Spalten mit Links haben. Lassen Sie mich ein Rechteck erstellen, aber kleines und machen Sie es abgerundet. Lassen Sie uns die Farbe in diese primäre ändern. Wir haben es nie benutzt. Da dies Links sein wird, ist es besser, eine andere Farbe zu wählen. Duplizieren Sie es, bewegen Sie es nach unten. Noch einmal, dupliziere es, so. Jede Spalte wird 3 Links haben. Jetzt halte ich die Umschalttaste auf meiner Tastatur gedrückt und wähle alle 3 Links aus, gruppiere sie, drücke „Befehl G“ oder „Control G“ und ich werde es Links nennen. Dann kann ich im Inspektor den Abstand zwischen ihnen einfach ändern, so. Ich werde es auf 70 setzen. Ich denke, es ist ziemlich gut. Während es ausgewählt ist, lassen Sie es uns duplizieren, „Befehl D“ oder „Control D“, und verschieben Sie es auf die rechte Seite. Noch einmal, duplizieren Sie es. Da gehen wir. Alle unsere 3 Spalten sind fertig, also werde ich es auf die linke Seite bewegen. Okay, Leute, lasst uns unseren Wireframe überprüfen und sehen, ob wir ein paar Änderungen vornehmen müssen. Lassen Sie mich hier all diese Fragen auswählen und sie ein wenig nach oben verschieben. Ich werde verkleinern. Da gehen wir. Unser Wireframe ist fertig. Also werde ich diese Wireframe-Zeichenfläche auswählen und auf dieses „Play“ -Symbol klicken, um es in der Vorschau anzuzeigen. Wie Sie sehen können, haben wir einen Heldenbereich mit einer Navigationsleiste und allen notwendigen Elementen. Ich werde nach unten gehen, und wir haben Feature 1, Feature 2, Feature 3, ziemlich gut, und den Abschnitt Q&A und die Fußzeile. Haben Sie gesehen, wie einfach es ist, dieses Low-Fidelity-Drahtmodell zu erstellen? Im nächsten Video werden wir gemeinsam mit der Gestaltung unseres Projekts beginnen. Ich hoffe, Sie haben dieses Video genossen, und wir sehen uns im nächsten. 99. Navigationsbar: Hey, willkommen zurück. Jetzt, da unser Drahtmodell fertig ist, werden wir damit beginnen, unsere Zielseite gemeinsam zu gestalten. Bist du bereit? Lass uns gehen. Zunächst einmal werde ich ein weiteres Kunstboard direkt neben meinem Drahtmodell erstellen. Ich werde auf meiner Tastatur „A“ drücken, und dann auf der rechten Seite wähle ich Desktop. Perfekt. Lassen Sie mich es nach oben bewegen, und ich werde zoomen. Nun, lassen Sie mich es in Landing Page umbenennen. Vergewissern Sie sich, dass Sie Ihre Ebenen und Ihre Kunsttafeln richtig benennen , damit Ihr Projekt organisiert bleibt. Nun, lass es mich ein bisschen länger machen, so. Es ist genug für den Moment. Was brauchen wir für unsere Zielseite? Wie Sie sehen können, haben wir ein Drahtmodell, das wir im vorherigen Video erstellt haben, und wir wissen, wo die Elemente platziert werden. Für diese Landingpage müssen wir jedoch zuerst ein Layout-Raster erstellen, um uns zu führen, wo wir unsere Elemente platzieren sollten. Während diese Landing-Page-Grafik ausgewählt ist, gehen Sie zum Layout-Raster auf der rechten Seite im Inspektor und klicken Sie auf dieses Plussymbol. Da gehen wir. Jetzt haben wir ein Gitter. Wenn Sie jedoch direkt neben diesen Tags auf dieses Symbol klicken, können Sie dieses Raster in Spalten ändern. Das ist genau das, was wir wollen. Für dieses Projekt verwenden wir ein 12-Säulen-Layout-Raster, das ein beliebtes ist. Ich werde die Zählung auf 12 setzen. Da gehen wir. Jetzt haben wir 12 Spalten. Dann wird der Typ dehnen. Sie können es auf die Mitte setzen und die Breite einstellen, aber ich ziehe es vor, es auf Strecken zu setzen. Ich werde ihm einen Rand von 150 Pixeln von der rechten Seite und von der linken Seite geben. Dann ändern wir die Rinnenmenge, die das Leerzeichen zwischen unseren Spalten ist. Ich werde es auf 16 setzen. Jetzt ist unser Layoutraster fertig, und wir könnten damit beginnen, unsere Landingpage zu entwerfen. Was brauchen wir? Zunächst einmal müssen wir unsere Navigationsleiste an der Spitze entwerfen. Unsere Navigationsleiste wird ein Logo haben, dann einige Menüpunkte und schließlich eine Schaltfläche. Bitte öffnen Sie den Ordner „Assets“, den Sie zuvor heruntergeladen haben, da wir das Logo benötigen, das wir bereits für Sie vorbereitet haben. die Datei logo.svg aus dem Logo-Ordner Ziehen Siedie Datei logo.svg aus dem Logo-Ordnerwie folgt in Ihr Projekt. Fantastisch. Wenn Sie Ihr Layoutraster ausblenden möchten, können Sie ganz einfach „Control G“ auf Ihrer Tastatur drücken und es erneut drücken, um es einzuschalten. Perfekt. Nun, ich werde ein wenig hineinzoomen, und ich werde dieses Logo auf der linken Seite dieser Spalte, der zweiten Spalte, ausrichten. Wir werden unsere Elemente nicht in die erste Spalte von links und von rechts setzen . Wir lassen sie leer. Ziemlich gut. Dann müssen wir einige Menüpunkte haben. Ich drücke „T“ auf meiner Tastatur und klicke hier, um eine Textebene zu erstellen. Dann lassen Sie mich schreiben, zum Beispiel, Home als unseren ersten Menüpunkt. Jetzt könnten wir anfangen, unsere Textgröße zu verwenden. Wenn ich zum Abschnitt Text im Inspektor gehe, kann ich auf dieses Stilsymbol auf der rechten Seite klicken, und dann werde ich Medium 17 wählen. Dies ist der Textstil, den wir zuvor erstellt haben. Da gehen wir. Ich ziehe es ein bisschen nach oben. Lassen Sie mich vergrößern und duplizieren, indem Sie „Befehl D“ oder „Control D“ drücken , wenn Sie Windows verwenden, und verschieben Sie es auf die rechte Seite. Lassen Sie mich es auf Funktionen ändern. Perfekt. Noch einmal werde ich es duplizieren, „Befehl D“ oder „Control D“, verschieben Sie es auf die rechte Seite, und lassen Sie mich Preisgestaltung schreiben. Jetzt haben wir unsere drei Menüpunkte. Was ich tun werde, ist diese drei Elemente auszuwählen, und ich werde „Shift“ und „A“ drücken, um das automatische Layout hinzuzufügen. Wie Sie auf der rechten Seite sehen können, haben wir ein automatisches Layout hinzugefügt. Von nun an könnten wir den Abstand zwischen diesen Elementen ändern , indem wir den Abschnitt verwenden, wie folgt. Wenn Sie zum Beispiel ein neues Element hinzufügen möchten , müssen Sie nur einen von ihnen auswählen und „Befehl D“ drücken. Wie Sie sehen können, wird dieser Rahmen, den wir gerade erstellt haben, horizontal automatisch wachsen , weil wir ein horizontales automatisches Layout verwenden. Wenn wir den Modus von horizontal zu vertikal ändern, können Sie sehen, dass sie vertikal stapeln, aber wir wollen es horizontal halten, so. Lassen Sie mich diese Funktionen entfernen. Ziemlich gut. Ich werde den Abstand zwischen ihnen auf 70 einstellen, so, vorerst. Dann lassen Sie mich es horizontal an der Mitte ausrichten , indem Sie den Ausrichtungsabschnitt im Inspektor verwenden, wie folgt. Das letzte, was wir für unsere Navigationsleiste brauchen, ist eine Schaltfläche. Was ich tun werde, ist dieses Rechteck-Werkzeug aus der Symbolleiste auszuwählen und klicken und ziehen, um ein Rechteck wie dieses zu erstellen. Ich werde den Eckenradius auf 20 erhöhen, um ihn abgerundet zu machen. Lassen Sie mich hineinzoomen. Ich werde mein Layout-Raster verstecken, um unsere Elemente ein wenig besser zu sehen. Lassen Sie mich die Breite zum Beispiel auf 167 anstelle von 177 ändern . Ich werde die Höhe vorerst auf 56 setzen. Nun, für diese Schaltfläche, werde ich einen unserer Farbstile verwenden, die wir bereits erstellt haben. Wenn ich zum Abschnitt „Füllen“ auf der rechten Seite gehe und auf diese vier Punkte klicke, kann ich die Akzentfarbe auswählen. Da gehen wir. Für diesen Button brauche ich einen Text. Lassen Sie mich „T“ auf meiner Tastatur drücken und klicken Sie hier, um eine Textebene zu erstellen. Ich werde die Anmeldung schreiben. Ziemlich gut. Da wir vorher einen Textstil für unsere Menüpunkte verwendet haben, wählt Figma automatisch den gleichen Textstil wie unser Standardtextstil aus, wenn wir eine neue Textebene erstellen. Es ist völlig in Ordnung. Dann werde ich die Farbe auf Weiß setzen, so. Schließlich müssen wir unsere Elemente hier ausrichten. Wenn ich ein wenig heranzoomen, dass Sie es besser sehen können, wie Sie sehen können, ist mein Text ausgewählt. Ich werde die „Shift“ -Taste gedrückt halten und so auf unser Rechteck klicken. Wenn Sie nun einen Blick auf die Layer-Liste werfen, können Sie sehen, dass zwei Layer gleichzeitig ausgewählt sind. Das ist genau das, was wir wollen. Nun, lassen Sie mich sie sowohl horizontal als auch vertikal ausrichten, so. Eine weitere Sache, hier könnten wir eine Gruppe erstellen oder wir könnten ihnen ein automatisches Layout hinzufügen. Ich bevorzuge das spätere. Lassen Sie mich „Shift“ und „A“ drücken, und jetzt ist diese Taste dynamisch. Was meine ich damit? Da es auf horizontal gesetzt ist, wenn ich versuche, etwas Text hinzuzufügen, wird es horizontal wachsen. Versuchen wir es mal. Ich werde die Anmeldung zu etwas wie Registrierung ändern. Kannst du sehen, wie es horizontal wächst? Es ist perfekt. Unser Knopf ist auch bereit. Was sollen wir sonst noch tun? Wir müssen alle diese drei Elemente vertikal ausrichten. Ich werde alle auswählen, indem ich die „Shift“ -Taste gedrückt halte, und ich werde „Vertikale Mitte ausrichten“ drücken. Aber wir haben noch ein Problem. Lassen Sie mich mein Layoutraster einblenden. Was ich tun werde, ist, diesen Knopf auf die rechte Seite zu bewegen , um die rechte Seite meiner 2. Spalte zu berühren. So wie das. Nun, ich denke, es sieht gut aus. Allerdings könnten wir es ein wenig besser machen, indem wir den gleichen Abstand zwischen unserem Logo und der linken Seite unserer Menüpunkte und unserer Schaltfläche und der rechten Seite unserer Menüpunkte haben. Wenn ich nun die Alt- oder Wahltaste auf meiner Tastatur gedrückt halte und mit der Maus über die Elemente um sie herum schwebe, kann ich den Rand sehen, den ich auffülle. Auf der rechten Seite habe ich 154, und auf der linken Seite habe ich 274. Lassen Sie mich es ein wenig auf die linke Seite bewegen. Jetzt, wie Sie sehen können, habe ich 214 Pixel von links und 214 Pixel von rechts. Dieser Rahmen ist genau in der Mitte dieser beiden Elemente, und es ist genau das Ergebnis, nach dem ich gesucht habe. Last but not least, lassen Sie uns alle auswählen, gruppieren sie, drücken Sie „Command G“ oder „Control G“ auf Ihrer Tastatur, und ich werde es Nav Bar nennen. Wie Sie sehen können, ist der obere Rand auf 79 gesetzt. Ich werde es auf 80 setzen, damit ich es durch die Pfeiltaste auf meiner Tastatur um ein Pixel nach unten verschieben kann . Perfekt. Alles klar, Leute, das ist alles für dieses Video. Wir haben unsere Navigationsleiste erfolgreich erstellt. Im nächsten Video beginnen wir gemeinsam mit der Gestaltung unserer Heldenabteilung. Wir sehen uns dann. 100. Hero – Teil 1: Hallo, willkommen zurück. In diesem Video werden wir anfangen, unseren Heldenbereich zu entwerfen. Ohne weitere Umschweife, lasst uns anfangen. Was brauchen wir für unsere Heldenabteilung? Werfen wir einen Blick auf unseren Wireframe. Wie Sie sehen können, unsere Helden Abschnitt, hat einen Hintergrund, und dann eine Kopfzeile, eine Beschreibung der Schaltfläche, und ein Bild auf der rechten Seite. Ich denke, es ist eine gute Idee, zuerst unseren Hintergrund zu entwerfen und dann zu den anderen Elementen zu gehen. Um alles organisiert zu halten, drücke ich „A“ auf meiner Tastatur und lasse mich eine neue Zeichenfläche hinzufügen. Lassen Sie mich Desktop auswählen und ich werde es direkt neben meiner Zielseite setzen . Lassen Sie mich hineinzoomen. Für diesen Hintergrund werde ich verschiedene Farbverläufe und verschiedene Farben verwenden, und dann mit einer coolen Technik werde ich Ihnen zeigen, wie Sie die Farben zusammen mischen können , um einen sehr coolen Hintergrund zu erhalten, was so ist heutzutage beliebt. Für diesen Hintergrund werde ich das Stiftwerkzeug verwenden, das „Stift-Werkzeug“ in der Symbolleiste auswählen und einen Knoten erstellen. Lassen Sie mich irgendwo hier klicken, und ich werde meine Maus so nach unten bewegen, halten Sie die „Shift“ -Taste gedrückt, um eine gerade Linie wie diese zu erhalten. Klicken Sie, um den zweiten Knoten zu erstellen und ihn auf die rechte Seite zu verschieben, klicken Sie wie folgt, und hier ist der knifflige Teil. Jetzt werde ich eine gekrümmte Linie erstellen. Wie kann ich das machen? Wie Sie sehen können, wenn ich einfach irgendwo klicke, bekomme ich eine gerade Linie, aber das ist nicht das, was ich will. Um eine gekrümmte Linie zu erhalten, können Sie so klicken und ziehen, klicken und ziehen, um so etwas zu erhalten, und schließlich, schließen Sie Ihren Pfad, indem Sie auf Ihren ersten Knoten klicken. Perfekt. Wir haben unsere erste Form, aber ich werde sie etwas ändern. Lassen Sie mich das Verschiebungswerkzeug auswählen, und ich werde auf diesen Knoten in der Mitte klicken, und mit diesen Griffen kann ich es so ändern. Ich denke, jetzt sieht es gut aus. Jetzt ist es Zeit, eine Farbe hinzuzufügen, aber zuerst werde ich den Strich mit diesem Minus-Symbol entfernen und dann eine Füllung hinzufügen. Für diese erste Form werde ich unsere sekundäre dunkle Farbe wie diese verwenden, und dann werde ich diese Form duplizieren, sie ein bisschen nach oben bewegen, und schließlich werde ich es ein bisschen größer machen. Halten Sie die „Umschalttaste“ -Taste gedrückt und klicken und ziehen Sie so. Aber Sie können nichts sehen, weil beide Ebenen die gleiche Farbe haben. Jetzt werde ich es in Akzent ändern, und da die zweite Ebene über unserer vorherigen Ebene liegt, sind wir nicht in der Lage, unsere vorherige Ebene zu sehen, also werde ich sie so nach unten verschieben. Da gehen wir. Jetzt sind beide sichtbar. So weit, so gut. Lassen Sie mich es ein wenig drehen, um so etwas zu bekommen, und ich werde es größer machen. Sie können mit diesen Werten herumspielen und Ihre Formen nach Belieben verschieben. Jetzt sieht es gut aus. Dann brauche ich eine andere Form. Ich wähle das Stiftwerkzeug aus und klicke hier, schiebe es nach unten, klicke hier, wie folgt, klicke irgendwo hier. Es spielt keine Rolle, wie Sie jetzt fahren denn diese Form wird unter unseren vorherigen Ebenen sein, wie diese, und ich werde die nächste hier setzen und sie so verbinden. Ziemlich gut. Nun lassen Sie mich eine Füllung hinzufügen. Ich werde diese Primärfarbe wählen und lassen Sie mich sie so nach unten verschieben , um sie unter unsere vorherigen Ebenen zu setzen. Bisher so gut, wir es ein bisschen größer machen können. Jetzt werde ich weitere Farben hinzufügen, also lassen Sie mich das Stiftwerkzeug erneut auswählen. Dieses Mal klicken Sie hier, verschieben Sie es hier und hier, um eine gekrümmte Linie wie diese zu erstellen, und lassen Sie mich eine weitere Farbe hinzufügen. Wahrscheinlich könnten Sie eine Farbe verwenden, die sich von unseren Farbstilen unterscheidet, und es ist völlig in Ordnung, da es ein Hintergrund ist, was ich wählen werde, ist eine hellblaue Farbe. Lassen Sie mich den Farbton ändern, so etwas. Ja, es sieht gut aus und wie Sie sehen können, hat es eine sehr gute Harmonie mit unseren anderen Farben. Der Farbcode ist 35ECEC. Da gehen wir. guter Letzt brauchen wir eine andere Farbe, die direkt hinter diesen Formen steckt. Aber davor, wie Sie sehen können, ist diese Form außerhalb meiner Zeichenfläche und es ist ein Problem. Wenn Sie auf die Liste der Ebene gehen, können Sie klicken und ziehen und in unsere Zeichenfläche legen, und lassen Sie mich diese Zeichenfläche in BG umbenennen, was für Hintergrund steht, und last but not least, lassen Sie mich Erstellen Sie eine weitere Form, mit der dieser weiße Bereich gefüllt werden soll. Perfekt, ziemlich gut. Ich werde so etwas wie Orange wählen. Versuchen wir es mal und sehen, ob es gut aussieht. Lassen Sie mich diese Schicht in unsere Zeichenfläche legen und sie nach unten bewegen. Fantastisch. Wie Sie sehen können, haben wir eine sehr gute Farbkombination. Es sieht jedoch nicht gut aus für unseren Hintergrund. Wie können wir es gut aussehen lassen? Lassen Sie mich Ihnen eine sehr gute Technik zeigen. Was ich jetzt tun werde, ist wählen Sie dieses BG, kopieren Sie es, drücken Sie „Befehl C“, und wählen Sie Ihre Zielseite und fügen Sie es ein, drücken Sie „Befehl V“. Ich werde es unter unsere Navigationsleiste setzen und es so nach oben verschieben, und dann werde ich einen Effekt hinzufügen. Wenn Sie zum Abschnitt Effekt gehen und auf dieses Plus-Symbol klicken, können Sie ihm einen Effekt hinzufügen, aber standardmäßig ist er auf Schlagschatten gesetzt. Ich werde es so in Ebenenunschärfe ändern. Wenn ich dann auf dieses Sonnensymbol klicke, kann ich diese Unschärfe-Menge ändern, was ich will. Ich werde diesen Schieberegler verwenden, wie dieser, ich werde es erhöhen, um alle diese Farben zu mischen. Siehst du, wie schön es jetzt ist? Wir haben gerade einen schönen Hintergrund für unsere Landing Page mit dieser einfachen Technik erstellt und tatsächlich einfache Formen verwendet. Jetzt werde ich meine Farben ein wenig modifizieren, um ein besseres Ergebnis zu erzielen. Zuallererst werde ich diese Orange in etwas anderes ändern. Lassen Sie mich meine Akzentfarbe wählen, es sieht gut aus, und auch, Ich werde diese blaue Farbe ein wenig ändern. Lassen Sie mich es dunkler machen, so etwas zu bekommen. Fantastisch. Außerdem werde ich diese sekundäre Farbe ein wenig ändern. Was ich tun werde, ist dieses Element auszuwählen und es ein wenig kleiner zu machen, und wählen Sie diese Vector 2-Ebene, verschieben Sie es ein wenig nach oben, und ich denke auch, dass wir eine andere Farbe für unseren Übergang hier zwischen diese Handlungen und Farbe und diese blaue Farbe. Was ich tun werde, ist diese Vector 5-Ebene auszuwählen, sie zu kopieren und einzufügen, sie auf die rechte Seite zu verschieben, sie ist nicht sichtbar, weil sie sich unter unseren anderen Ebenen befindet. Verschieben Sie es in der Ebenenliste wie folgt nach oben und ändern Sie die Farbe in etwas anderes, aber vorher müssen wir es von seinem Stil wie diesem lösen, und lassen Sie mich es in so etwas ändern. Der Farbcode ist 4EF4E0. Jetzt werde ich es ein wenig drehen. Es wird besser und besser, wie Sie sehen können, ziemlich gut. Lassen Sie uns schließlich diese blaue Farbe ändern, um ein besseres Ergebnis zu erzielen. Ziemlich gut. Wir müssen noch eine Sache tun. Wie Sie sehen können, jetzt, da die diesen verschwommenen Effekt zu unserem Hintergrund hinzugefügt haben, haben wir einige weiße Farbe an den Seiten, und ich werde das beheben. Wie kann ich das machen? Wir müssen nur diesen Hintergrund skalieren. Drücken Sie „K“ auf Ihrer Tastatur, um das Skalierungswerkzeug auszuwählen, halten Sie die „Shift“ -Taste gedrückt und versuchen Sie, es von beiden Seiten so zu skalieren, und jetzt sieht es besser aus. Wie Sie sehen können, obwohl wir diesen verschwommenen Effekt zu unserem Hintergrund hinzugefügt haben, konnten wir die Grenzen und Linien zwischen diesen Farben erkennen und es ist nicht gut. Wir sollten die Menge an Ebenenunschärfe erhöhen, um diese Linien wie diese zu beseitigen, und jetzt sieht es viel, viel glatter, ziemlich gut aus. Wir haben erfolgreich unseren Hintergrund erstellt, aber wir sind noch nicht fertig. Es gibt noch einen einzigen Schritt zu tun, und das ist, unseren Hintergrund zu maskieren. In der Tat könnten Sie es so lassen, wie es ist und versuchen, Ihre Helden Abschnitte Element hier hinzuzufügen. Allerdings werde ich seine Form zu etwas Phantasievolles ändern. Lassen Sie mich das Stift-Werkzeug auswählen und ich werde einen Knoten hier in der oberen linken Ecke erstellen, es ist außerhalb unserer Zielseite und ich weiß es, es ist völlig in Ordnung. Wir werden es in einer Minute reparieren. Dann klicken Sie hier, um einen anderen Knoten zu erstellen, und jetzt werde ich eine Wellenlinie erstellen. Um das zu tun, kann ich so klicken und ziehen, und dann werde ich hier klicken und ziehen. Fantastisch, verschieben Sie es nach oben, klicken Sie hier, klicken Sie hier, und verbinden Sie es mit Ihrem ersten Knoten. Dann entfernen wir den Strich daraus und fügen ihm eine einfarbige Farbe hinzu. Lassen Sie mich zunächst diese Kurve mit diesen Griffen ändern. Ich werde diesen Knoten auswählen, ziemlich gut. Ich finde, es sieht perfekt aus. Jetzt sollten wir diese Form, die wir gerade erstellt haben, verschieben und sie direkt unter unseren Hintergrund, unsere BG, in unsere Zielseite stellen, stellen Sie sicher, dass sie sich innerhalb unserer Zielseite befindet. Jetzt ist es drinnen, aber es ist nicht sichtbar, weil unser Hintergrund größer ist als das. Wie Sie sehen können, haben wir hier einen Rahmen, aber um ihn richtig zu maskieren, müssen wir ihn zuerst vom Frame zu Gruppe ändern, damit ich „Befehl G“ oder „Control G“ drücken kann, und ich werde es BG nennen, und halten Sie dann die „Shift“ -Taste gedrückt, wählen Sie Vektor 7, die Form, die wir gerade im Hintergrund erstellt haben, und klicken Sie auf das Symbol „Maske“ in der Symbolleiste. Da gehen wir. Wir haben nur unsere Hintergründe maskiert, und das ist genau das Ergebnis, nach dem ich gesucht habe. Siehst du, wie schön es ist? Wenn wir ein paar Inhalte hinzufügen, wird es großartig aussehen. Jetzt könnten wir es etwas ändern. Wenn Sie diesen Vector 7 auswählen und „Enter“ drücken, befinden Sie sich jetzt im Bearbeitungsmodus und können diesen Knoten auswählen und ändern. Ich denke, wenn wir diese Kurve ein wenig ändern könnten, wäre es viel, viel besser. Das letzte, was wir tun müssen, ist die Farbe unserer Menüpunkte zu ändern. Wie Sie sehen können, haben wir keinen guten Kontrast da wir die Standardfarbe für diese Elemente verwendet haben. Ich wähle alle aus, halte die „Shift“ -Taste gedrückt und klicke darauf und ändere das Feld in weiß. Perfekt. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen. Im nächsten Video werden wir unsere Heldenabteilung gemeinsam entwerfen. Wir sehen uns dann. 101. Hero – Teil 2: Hey, willkommen zurück. In diesem Video werden wir unseren Heldenbereich gemeinsam gestalten. Ohne weitere Umschweife, lasst uns anfangen. Werfen wir einen Blick auf unseren Wireframe und sehen, was wir sonst noch brauchen. Wir brauchen eine Schlagzeile, wir brauchen einen Untertitel und auch einen Aufruf zum Handeln. Auf der rechten Seite müssen wir ein Bild haben. Lassen Sie uns zunächst unsere Überschrift erstellen. Ich drücke T auf meiner Tastatur und klicke auf, um eine Textebene zu erstellen. Aber wie Sie sehen können, wurde dieser Takes Layer innerhalb meiner Hintergrundgruppe erstellt. Ich werde es so raus schieben, ziemlich gut. Lassen Sie mich schreiben, Smart Banking für Freiberufler. Fantastisch. Ich werde es auswählen und ändern Sie den Textstil in Überschrift H1, die die größte Überschrift ist, die wir haben. Lassen Sie mich nun mein Layout-Raster einblenden, indem Sie Control G auf meiner Tastatur so drücken. Ich werde es auf die linke Seite verschieben, stellen Sie sicher, dass es mit der linken Seite Ihrer zweiten Spalte ausgerichtet ist, so. Dann werde ich seine Breite so verringern. Sieht ziemlich gut aus. Jetzt werde ich seine Farbe von schwarz nach weiß ändern, um einen besseren Kontrast zu erhalten. Lassen Sie mich es ein wenig nach oben bewegen. Da gehen wir. Perfekt. Nun lassen Sie uns unseren Untertitel hinzufügen. Lassen Sie mich es duplizieren, verschieben Sie es nach unten und ich werde es von der Überschrift H1 zu Körper Haupt ändern. Dann werde ich nur den Text kopieren und einfügen, den ich bereits vorbereitet habe, um Ihre Zeit zu sparen. Lassen Sie es mich einfügen. Da gehen wir. Der Text lautet, Draft ist eine revolutionäre mobile App, die Ihnen hilft, Ihr Unternehmen einfach zu verwalten und Geld zu sparen. Es ist interessant. Lassen Sie mich nun die Breite so verringern, um sie ein wenig kleiner zu machen. Perfekt. Jetzt sieht es toll aus. Lassen Sie mich den oberen Rand dieser Textebene nehmen. Wie Sie sehen können, ist es auf 23. Ich werde es auf 30 setzen, so. Dann müssen wir eine Schaltfläche erstellen. Lassen Sie mich das Rechteck-Werkzeug auswählen, klicken und ziehen, um ein Rechteck wie dieses zu erstellen. Wieder, es ist in unserem Hintergrund. Ich werde es ausschieben. Um zu verhindern, dass dieses Problem immer wieder auftritt, werde ich diese Gruppe sperren. Wählen wir BG aus und klicken Sie auf dieses Schlosssymbol. Für diese Schaltfläche werde ich die Breite auf 200 einstellen, so und die Höhe 254. Lassen Sie es uns so behalten, wie es ist. Dann werde ich es abgerundet machen. Setzen wir es auf 20. guter Letzt Zuguter Letztmüssen wir ihm eine Farbe geben. Ich werde Sekundärdunkel wählen. Wie Sie sehen können, haben wir hier keinen guten Kontrast. Später können wir unseren Hintergrund ein wenig ändern, aber jetzt lassen Sie uns diese Farbe so behalten, wie sie ist. Dann für diesen Knopf brauchen wir einen Text, also werde ich T drücken und mich schreiben lassen, Registrieren Sie sich jetzt. Ziemlich gut. Ich werde es weiß machen. Für diese Schaltfläche werde ich den Beschriftungstextstil wie folgt auswählen. Vergrößern Sie die Ansicht, stellen Sie sicher, dass Sie sie sowohl vertikal als auch horizontal ausrichten. Bisher so gut, aber für diese Schaltfläche werde ich ein Symbol hinzufügen. Ein Pfeilsymbol nach rechts, das die Benutzer anzeigt, wenn sie auf diese Schaltfläche klicken, werden sie vorwärts gehen. Aus dem Asset-Ordner öffne ich Symbole und Sie haben arrow-right.SVG. Drag & Drop es hierher. Da gehen wir. Ich werde es in der Ebenenliste so nach oben verschieben. Ich werde dieses Symbol auswählen und die Alt-Taste gedrückt halten und sehen, was der Abstand zwischen dieser Textebene und diesem Symbol ist. Wie Sie sehen können, ist es auf vier gesetzt, ich werde es auf 10 setzen. Ich werde es auf die rechte Seite verschieben, dann wählen Sie beide aus, gruppieren Sie sie, drücken Sie den Befehl G oder Control G, wählen Sie das Rechteck aus und richten Sie sie horizontal und auch vertikal an der Mitte aus. Jetzt werde ich diese Gruppe und unsere Rechteck-Gruppe dann noch einmal auswählen und es Register Button nennen. Ziemlich gut. Wie hoch ist der obere Rand dieser Marge? obere Rand ist auf 18 gesetzt. Ich werde es auf 30 Pixel so einstellen. Ich denke, es ist eine gute Idee, die Zeilenhöhe dieser Überschrift ein wenig zu verringern. Standardmäßig setzen wir es auf 150 Prozent, aber ich denke, es ist zu viel, da diese Schriftgröße so groß ist. Wir können es von seinem Stil lösen und so könnten wir es auf 130 Prozent reduzieren. Jetzt sieht es viel besser aus. Stellen Sie sicher, dass Sie den Rand ändern, um 30 Pixel zwischen diesen Elementen zu erhalten. Perfekt. Wie ich bereits erwähnt habe, haben wir keinen guten Kontrast für diese Schaltflächen, daher müssen wir möglicherweise unseren Hintergrund etwas ändern, um ein besseres Ergebnis zu erzielen. Ich werde diese Hintergrundgruppe öffnen, die wir gesperrt haben. Ich werde es entsperren und wählen wir diese dunkle sekundäre Farbe. Das ist Vektor 1. In meinem Fall werde ich es ein wenig nach unten bewegen und es auf die linke Seite bewegen , um so etwas zu bekommen. Das ist das Ergebnis, nach dem ich gesucht habe. Perfekt. So weit, so gut. Jetzt, da wir unsere Textinhalte für unseren Heldenbereich erstellt haben, ist es an der Zeit, sich auf die rechte Seite zu konzentrieren. Da diese Zielseite für eine mobile Anwendung ist, sagen wir, Banking mobile Anwendung. Ich habe bereits einen einfachen mobilen Bildschirm entworfen und Sie haben es in den Assets Ordner, Bilder, Helden Abschnitt, und hier haben Sie Telefon und einige Formen. Wenn Sie es per Drag & Drop in Ihr Projekt ziehen, können Sie den Bildschirm sehen. Ich werde heranzoomen. Es ist ein einfacher Bildschirm, den ich bereits entworfen habe. Da es sich in diesem Abschnitt nicht um das Design mobiler Anwendungen handelt, bereite ich es im Voraus für Sie vor, so dass Sie jedes Bild, das Sie wollen, auf die rechte Seite setzen können. Perfekt. Jetzt werde ich es etwas nach oben schieben. Ich denke, hier sieht es gut aus. Lassen Sie mich mein Layoutraster einblenden. Ich werde sicherstellen, dass es ziemlich gut mit meinem Layout-Raster ausgerichtet ist. Wie Sie sehen können, sieht es schon gut aus. Aber um es interessanter aussehen zu lassen, möchte ich dieser Zielseite einige 3D-Formen hinzufügen und Sie haben Zugriff auf diese 3D-Formen, die ich bereits vorbereitet habe. Wenn Sie den Heldenbereich öffnen, im Asset-Ordner, Bilder, Hero-Abschnitt sehen, dass ich vier verschiedene Formen für Sie vorbereitet habe. Ich werde Form 1 auswählen und es so in mein Projekt ziehen und ablegen, dann schiebe ich es nach oben und lege es hier. Sieht ziemlich gut aus. Lassen Sie mich diese Schriftart ein wenig nach unten verschieben. Hier sieht es viel besser aus. Lassen Sie mich auch Drag & Drop die zweite Form hier. Ich werde es gleich da drüben hinstellen. Sie können die Farben leicht ändern, da sie Vektoren sind und auch Form 3 Ich werde es direkt dort drüben setzen. Aber für diesen, um den Tiefeneffekt zu erzeugen, werde ich ihm einen Weichzeichnungseffekt hinzufügen. Ich werde den Effekt hinzufügen, und dann werde ich es ändern, um Ebenenunschärfe und erhöhen die Unschärfemenge wie folgt. Mit dieser Technik können Sie diese Tiefenschärfe-Effekt erstellen, und es sieht viel besser, fantastisch aus. Last but not least, lassen Sie uns Form 4 ziehen und ablegen und direkt hier setzen. Jetzt denke ich, es ist eine gute Idee, alle diese Elemente auf der linken Seite auszuwählen und sie ein wenig nach unten zu bewegen. Wie Sie sehen können, habe ich hier so viel Leerzeichen. Mit Leerzeichen meine ich nicht die weiße Farbe wie dieser Hintergrund hier. Leerzeichen oder negativer Raum ist der Abstand zwischen Ihren Elementen. Es ist so wichtig, genügend Leerzeichen in Ihrem Design zu haben, um Ihr Design kurz zu lassen. Einer der Fehler, die ich sehe, die meisten Anfänger machen, ist, dass sie nicht genug Leerzeichen haben. Wenn Sie versuchen, diese Überschrift so nach unten zu verschieben und dieses Muster nach oben zu verschieben, wie Sie sehen können, kann Ihr Design nicht atmen. Oder wenn Sie zum Beispiel alle auswählen und so auf die rechte Seite verschieben, können Sie sehen, dass Sie hier nicht genügend Leerzeichen haben. Sie werden Ihren Entwurf so lange ändern, bis Sie mit dem Abstand zufrieden sind. Lassen Sie mich es etwas nach unten bewegen, ziemlich gut. Unser Heldenbereich ist fertig. Siehst du, wie schön es ist? Lassen Sie mich meine Zeichenfläche auswählen und eine Vorschau anzeigen. Es ist erstaunlich. Ich hoffe, es gefällt dir. Na gut, Leute, ich hoffe, ihr hat dieses Video genossen und ich seht euch im nächsten. 102. Spielfeld – Kreditkarte: Hey, willkommen zurück. In diesem Video beginnen wir mit der Gestaltung unseres ersten Featureabschnitts , der Kreditkartenabschnitt. Lassen Sie mich zunächst einen Blick auf unser Drahtmodell werfen. Wie Sie für den ersten Feature-Abschnitt sehen können, werden Sie eine Kreditkarte auf der rechten Seite und einen Titel und einen Untertitel haben. Ohne weitere Umschweife, lasst uns anfangen. Zuerst werde ich mein Layout-Raster einblenden. Ich werde Control G auf meiner Tastatur drücken, und jetzt sind meine Layoutraster sichtbar. Auf der linken Seite müssen wir einen Titel und einen Untertitel haben. Ich werde eine Textebene wie diese erstellen, und ich werde den Textstil in H2 ändern und hier lassen Sie mich schreiben, eine Karte für alle Ihre Zahlungen. Ich werde es auf die linke Seite verschieben und lassen Sie mich seine Breite auf 366 verringern, also deckt es vier unserer Spalten so ab. Dann, was ich tun werde, ist seine Farbe zu ändern, also werde ich diese Primärfarbe so wählen. Ich werde es duplizieren, es nach unten verschieben und hier brauchen wir eine Beschreibung. Für diese Beschreibung werde ich voran gehen und den Textstil in Body Main ändern, so verschieben Sie ihn ein wenig nach unten und ich habe bereits einen Text vorbereitet, also werde ich ihn aus meiner Zwischenablage kopieren und einfügen. Da gehen wir. Wie Sie sehen können, wird die Beschreibung diese sein. Holen Sie sich drei Prozent zurück auf alles, was Sie mit der Draftkarte kaufen. Registrieren Sie sich noch heute und genießen Sie jeden Aspekt Ihres Unternehmens. Es ist cool, nicht wahr? Nun lasst uns die Farbe ändern. Ich brauche die Primärfarbe nicht mehr, ich brauche die sekundäre Lichtfarbe, so. Ich werde diese Beschreibung auswählen und die Wahltaste oder Alt-Taste auf meiner Tastatur gedrückt halten und ich werde meine Maus über meinen Titel bewegen, um den Rand zu sehen, aber ich werde es 30 Pixel machen, also werde ich die Pfeiltasten auf meinem -Tastatur, um es ein wenig nach unten zu verschieben. Da gehen wir, jetzt haben wir 30 Pixel und es sieht ziemlich gut aus. Alles ist cool. Jetzt könnten wir weitermachen und unsere Kreditkarte auf der rechten Seite erstellen. Um das zu tun, brauche ich ein Rechteck. Lassen Sie mich auf Rechteck klicken, klicken und ziehen, um ein Rechteck hier zu zeichnen, und wie Sie sehen können wird die Breite auf 466 Pixel gesetzt und es umfasst fünf Spalten, und die Höhe wird 268 Pixel wie folgt sein. Ich finde es cool, und lass mich den Eckenradius auf 24 erhöhen, so. Ich werde meine Layoutraster vorerst ausblenden, weil ich das nicht brauche. Ich werde Control G auf meiner Tastatur drücken. Was brauchen wir für eine Kreditkarte? Wir brauchen einen Namen oben, wir brauchen die Kreditkartennummer, wir brauchen das Logo der Kreditkarte, und im Grunde ist das alles. Zuerst werde ich seine Farbe in unsere sekundäre Dunkelheit ändern, so und dann werde ich einfache Formen hinzufügen um einen so großen Hintergrund für unsere Kreditkarte zu schaffen. Um dies zu tun, werde ich das Stern-Tool so auswählen, halten Sie die Umschalttaste gedrückt, klicken und ziehen Sie so, und wie Sie sehen können, haben wir einen Stern, aber was ich tun werde, ist seine Anzahl von 5 zu ändern 7 um so etwas zu bekommen und danach werde ich den Eckenradius so erhöhen. Sie können die Umschalttaste auf Ihrer Tastatur gedrückt halten und auf diesen kleinen Kreis oben klicken und die Maus nach unten bewegen. Dann werde ich das Verhältnis ändern. Wie Sie hier sehen können, haben wir drei verschiedene Kreise. Der erste ist der Eckenradius, der zweite ist das Verhältnis zwischen den Kanten und der letzte ist count. Unsere Zählung ist bereits festgelegt, aber ich werde das Verhältnis ändern. Ich werde die Umschalttaste gedrückt halten, klicken und ziehen. Ich werde es auf etwa 74 oder 75 so erhöhen und dann werde ich den Eckenradius ein wenig erhöhen, um diese Ecken zu glätten. Sie können mit diesen Zahlen und Werten herumspielen, um die Form zu erhalten, die Sie suchen, aber ich denke, es ist eine coole Form zu beginnen. Wenn Sie mit dem Aussehen dieser Form nicht zufrieden sind, können Sie diese Werte leicht ändern und Ihre eigene Form erstellen und das ist, was ich möchte, dass Sie tun. Kopieren und einfügen Sie nicht nur, was ich tue, stellen Sie sicher, dass Sie Ihre eigene Version erstellen und Ihre eigene Kreativität verwenden. So werden Sie ein guter Designer. Jetzt werde ich seine Farbe zu einem hellvioletten ändern. Aber ich möchte nicht unsere Farben Zeichen verwenden, ich werde die Farbe auf CAC7FF setzen, da gehen wir. Es ist die Farbe, nach der ich gesucht habe. Ich ziehe es ein bisschen nach oben. Wie Sie sehen können, ist dieser Stern außerhalb dieser Kreditkarte, was ein Problem für jetzt ist, aber wir müssen es irgendwie maskieren. Wenn ich beide auswähle, wenn ich die Umschalttaste gedrückt halte und beide auswähle und auf Maske klicke, wird unser Rechteck verschwunden. Versuchen wir es mal, da gehen wir. Um das zu verhindern, könnten wir unser Rechteck duplizieren. Ich werde das Rechteck auswählen, ich werde es duplizieren, Befehl D oder Control D und wie Sie jetzt sehen können, habe ich zwei Rechtecke. Ich werde den oberen auswählen und die Umschalttaste gedrückt halten und meinen Stern auswählen und jetzt werde ich auf Maske klicken. Da gehen wir. Hier verwenden wir dieses Rechteck, um unseren Stern zu maskieren, und dieses Rechteck bleibt so wie unsere Kreditkartengrenzen. Lassen Sie mich diesen Stern auswählen und ihn so bewegen. Ziemlich gut. Ich werde es ein bisschen größer machen. Dann werde ich es duplizieren, es auf die rechte Seite verschieben und auch ich werde es nach unten bewegen, wie Sie sehen können, es ist über unserer ersten Form. Ich werde es runterziehen. Nichts hat sich geändert, weil beide die gleiche Farbe verwenden. Ich werde meine zweite Form auswählen, die jetzt unter meiner ersten Form ist und ich werde ihr einen Farbcode von 9A94FF wie diesen geben , ziemlich gut. Ich werde es auf die rechte Seite schieben. Was brauchen wir noch? Ich wähle meine erste Form erneut aus, dupliziere sie, verschiebe sie so nach unten und lasse mich sie skalieren. Ich werde K auf meiner Tastatur drücken und die Umschalttaste gedrückt halten, klicken und ziehen Sie so, bewegen Sie es nach unten und jetzt werde ich seine Farbe auf meine sekundäre Dunkelheit setzen , so etwas. Schließlich werde ich ihm auch eine Akzentfarbe geben. Was ich tun werde, ist diese letzte Form zu duplizieren, die wir gerade Befehl D oder Control D erstellt haben, und ich werde auch meine erste Form auswählen und duplizieren. Dann werde ich diesen Star 4 in meinem Fall auswählen, wenn Sie einen Blick auf die Ebenenliste auf der linken Seite werfen, und ich werde seine Farbe ändern, um so Akzent zu setzen. Allerdings werde ich es mit diesem Star 5 maskieren, dass wir gerade dupliziert so was ich tun werde, ist wählen Sie beide so Star 5 dieses ein, halten Sie die Umschalttaste gedrückt und klicken Sie auf diesen Stern 4 und dann werde ich auf Maske klicken, da wir Geh. Wir haben gerade eine neue Maske erstellt und sie sieht toll aus. Allerdings werde ich die Position meiner Formen ein wenig ändern , um sie besser aussehen zu lassen. Ich werde diese Star 2 auswählen, verschieben Sie es wie folgt, um die rechte Seite meiner Kreditkarte zu decken und auch ich werde andere Formen auswählen, Mask Group, Star 1 und Star 3, und verschieben Sie sie auf der linken Seite, wie diese . Unsere Kreditkarte sieht jetzt gut aus, daher haben wir einen einfachen Hintergrund mit einfachen Formen erstellt. Jetzt müssen wir die Details hinzufügen. Wie ich bereits erwähnt habe, für diesen Kreditstrom einen Namen oben, benötigen wir für diesen Kreditstrom einen Namen oben,also werde ich das Textwerkzeug auswählen und eine Textebene erstellen und einen zufälligen Namen wie Ronald Richards schreiben. Ich werde es auswählen, und in der Ebenenliste, wie Sie sehen können, ist es unter unserer Kreditkarte. Ich werde es so nach oben verschieben und lassen Sie mich den Textstil auf H4 ändern, so und ich werde die Farbe auf Weiß setzen. Nun, was ich tun werde, ist wählen Sie alle Ebenen unserer Kreditkarte, die diese Maskengruppe und dieses Rechteck ist. Es ist so wichtig, dass dieses Rechteck 48 die Grenzen Ihrer Kreditkarte ist , also müssen Sie sicherstellen, dass auch auswählen. Befehl G oder Control G, um eine Gruppe zu erstellen und ich werde es Kreditkarte nennen. Jetzt kann ich hineinzoomen. Lassen Sie uns die Polsterung überprüfen. Für diese Textebene werde ich eine 40 Pixel obere und linke Polsterung festlegen. Ich schiebe es auf die rechte Seite und schiebe es so nach unten. Da gehen wir. Jetzt werde ich es duplizieren, es nach unten verschieben und hier müssen wir die Kreditkartennummer haben. Lassen Sie uns so etwas schreiben wie dieses 4242 Leerzeichen halten Sie die Umschalttaste gedrückt und drücken Sie acht, 1, 2, 3, 4, um diese Sterne Raum zu schaffen, wieder, 1, 2, 3, 4 Raum 2456, so etwas. Für diese Textebene werde ich den Textstil in Main ändern, und es wird 40 Pixel linkes Padding und eine 40 Pixel untere Polsterung wie folgt haben. guter Letzt müssen wir ein Logo erstellen. Sie können einfach voran gehen und zum Beispiel das Visa Card Logo oder MasterCard Logo herunterladen. Allerdings müssen wir ein MasterCard-Logo einfach selbst erstellen , weil es einzigartig für unser Design sein wird. Wie wir wissen, besteht das Logo der MasterCard aus zwei einfachen Kreisen, die miteinander kombiniert werden. Was ich tun werde, ich werde die Ellipse auswählen, die Umschalttaste gedrückt halten, klicken und ziehen, um einen Kreis zu zeichnen. Ich werde die Breite und Höhe auf 35 so einstellen. Machen wir es weiß, und jetzt werde ich es duplizieren, verschieben Sie es auf die rechte Seite und in der Liste der Ebene, verschieben Sie diese neue Form, die der rechte Kreis nach unten ist, und legen Sie sie unter unseren ersten Kreis. Wählen Sie dann die zweite aus und verringern Sie die Deckkraft von 100 Prozent auf 75 Prozent. Ich werde es ein wenig auf die linke Seite schieben und da gehen wir. Ich werde sie gruppieren, Befehl G oder Control G, verschieben Sie sie auf die rechte Seite, seine rechte Polsterung wird 40 sein und seine untere Polsterung wird ebenfalls 40 sein. Ich werde ein wenig hinauszoomen, also sieht es fantastisch aus. Wir könnten unseren Hintergrund natürlich etwas verändern, damit er noch besser aussieht. Ich werde meine Formen auswählen, diese Maskengruppe, diese Maskengruppe, halten Sie die Umschalt- und Strg-Taste auf Ihrer Tastatur oder Umschalt- und Befehlstaste gedrückt und wählen Sie Star 1 und Stern 3 und verschieben Sie sie auf die rechte Seite ein wenig und auch nach unten. Jetzt denke ich, es sieht besser aus. Unsere Kreditkarte ist fertig. Ich werde alle Ebenen auswählen. Noch einmal, gruppieren Sie sie und ich werde es Kreditkarte nennen. Das Letzte, was wir tun können, ist, etwas Schlagschatten hinzuzufügen. Ich gehe voran und füge Effekte zu dieser Karte hinzu. Ich werde die Effekteinstellungen öffnen und für seine Farbe werde ich die Pipette verwenden und diese sekundäre dunkle Farbe wie diese wählen und ich werde die Deckkraft auf 15 Prozent verringern und schließlich die Unschärfe ändern. auf 100 und die Y bis 50. Da gehen wir. Wir haben gerade einen sehr tollen Schlagschatten für diese Kreditkarte erstellt. Sieht fantastisch aus. Ich denke, die Zeilenhöhe dieses Titels auf der linken Seite ist ein bisschen zu viel. Was ich tun werde, ist diesen Titel auszuwählen und ich werde ihn von seinem Stil lösen und dann werde ich die Zeilenhöhe von 150 Prozent auf 120 Prozent so verringern. Ich werde es nach unten bewegen, um einen 30 Pixel unteren Rand zu erhalten. Ich halte die Umschalttaste gedrückt und wähle meine Beschreibung aus, gruppiere sie, und ich werde es Feature 1 nennen , halten wir die Umschalttaste gedrückt und wählen unsere Kreditkarte aus, richten sie beide vertikal aus. Alles klar Jungs, jetzt wählen wir beide Gruppen aus, gruppieren sie, Control G oder Befehl G und nennen es Feature 1 Abschnitt und der obere Rand wird 260 Pixel sein. Ich werde es so runterziehen. Vielen Dank für das Ansehen dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 103. Spielfeld – Statistiken: Hey, willkommen zurück. In diesem Video beginnen wir mit der Gestaltung unseres zweiten Feature-Abschnitts, direkt unter diesen Kreditkartenabschnitten. Lassen Sie mich zunächst einen Blick auf unseren Drahtrahmen werfen und sehen, was wir entwerfen müssen. Wie Sie für unseren zweiten Feature-Abschnitt sehen können, müssen wir auf der linken Seite einige Karten haben, zwei kleine Karten oben und eine große Karte unten. Auf der rechten Seite müssen wir eine Kopfzeile, eine Beschreibung und auch eine Schaltfläche haben. Was wir tun müssen, ist wählen Sie diesen Titel und die Beschreibung, die wir für unseren Abschnitt Feature 1 erstellt haben, also werde ich darauf doppelklicken. Wie Sie in der Ebenenliste sehen können, ist Feature 1 ausgewählt, ich werde es kopieren, also drücken Sie „Befehl C“ oder „Control C“ auf Ihrer Tastatur und ich werde es einfügen. Stellen Sie sicher, dass sich dieser neue Layer, den wir gerade eingefügt haben, außerhalb dieses Bereichs von Feature 1 befindet. Wenn es so drinnen ist, stellen Sie sicher, dass Sie es herausziehen, und dann mit meiner Pfeiltaste kann ich es so nach unten bewegen. Nun, lassen Sie mich drücken „Control G“ auf meiner Tastatur, und wenn Sie diese Verknüpfungen nicht kennen, können Sie leicht zu diesem Fragezeichen-Symbol in der unteren rechten Ecke, die Sie darauf klicken können, und es gibt eine Option namens „Tastenkombinationen“. Ich werde darauf klicken. Da ich jetzt macOS verwende, zeigt es mir nur die Mac Shortcuts. Aber wenn Sie Windows verwenden, können sie anders sein. Wenn ich hier zu „Ansicht“ gehe, können Sie für Layoutraster sehen, es ist Control G geschrieben, und Sie können alle anderen Verknüpfungen hier überprüfen. Ich werde es schließen. Nun lassen Sie mich diese Ebene hier auf die rechte Seite verschieben, so wie diese. Lass es mich da drüben hinlegen. Perfekt. Wie Sie sehen können, umfasst es vier Spalten, dann werde ich es Feature 2 umbenennen. Wenn Sie auf den Namen doppelklicken, können Sie ihn einfach umbenennen. Schließlich müssen wir den Inhalt ändern. Ich werde den Text kopieren und einfügen, den ich bereits aus meiner Zwischenablage vorbereitet habe. Für den Titel werde ich schreiben, verwalten Sie Ihre Finanzen wie ein Profi in kürzester Zeit. Lassen Sie mich diese Beschreibung nach unten verschieben, um einen 30 Pixel oberen Rand wie diesen zu erhalten. Für die Beschreibung werde ich wieder kopieren und fügen Sie die Beschreibung aus meiner Zwischenablage, und da gehen wir. Die Beschreibung ist so. Wir entwerfen Buchhaltung, Bankwesen und Rechnungen sind alle an einem Ort. Du wirst immer wissen, wo du stehst. Unmittelbar darunter, müssen wir eine Schaltfläche hinzufügen, eine weitere Schaltfläche erfahren. Was ich tun werde, ist wählen Sie diese Schaltfläche „Jetzt registrieren“, aus unserem Heldenbereich, kopieren Sie es, „Control C“ oder „Command C“ und fügen Sie es ein und verschieben Sie es nach unten. Da gehen wir. Ich werde den oberen Rand auf 30 setzen, um alles konsistent zu halten. Schließlich müssen wir den Text ändern, um mehr zu erfahren. Lassen Sie mich es auf die rechte Seite bewegen, um eine 10 Pixel rechte Polsterung zu erhalten. Perfekt. Um diesen Button interessanter aussehen zu lassen, werde ich ihm einige Formen hinzufügen. Lassen Sie mich meine Layoutraster ausblenden und dann werde ich das Zeichenstift-Werkzeug auswählen. Klicken Sie hier, einmal, klicken Sie hier und ziehen Sie so, um eine gekrümmte Linie zu erstellen. Klicken Sie noch einmal und ziehen Sie und schließen Sie Ihre Knoten zusammen. Jetzt, da unser Weg geschlossen ist, können wir ihm eine Füllung geben. Lassen Sie mich den Strich entfernen und füllen Sie ihn. Perfekt. Dann werde ich diesem einen Farbverlauf hinzufügen. Ich werde gehen und darauf klicken, und dann werde ich dieses Drop-Menü oben öffnen und es von fest zu linear ändern. Jetzt haben wir einen linearen Farbverlauf. Für die erste Farbe, Ich wähle, dass, Ich kann den Code auf 554DDE setzen, um dieses lila zu erhalten. Die zweite Farbe wird die gleiche sein. Ich werde diesen Farbcode kopieren und die zweite Farbe auswählen und ihn hier so einfügen. Stellen Sie sicher, dass die Deckkraft für unsere zweite Farbe auf null Prozent gesetzt ist. Fantastisch. Jetzt muss ich diese Form maskieren. Wie kann ich das machen? Lassen Sie mich zunächst das Rechteck auswählen, dieses Rechteck 47 in meinem Fall. Dann werde ich es duplizieren, Befehl D oder Control D und wählen Sie dieses neue Rechteck, das wir gerade erstellt haben. Halten Sie die Strg- oder Befehlstaste auf Ihrer Tastatur gedrückt, und wählen Sie die Form aus, die wir gerade erstellt haben. Dieser hier, dieser lila, so. Nachdem beide ausgewählt sind, klicken Sie in der Symbolleiste auf „Maskensymbol“. Da gehen wir. Nun, wir haben diese Form gerade maskiert und wir können sie leicht so bewegen. Perfekt. Aber ich werde es etwas kleiner machen. Lassen Sie mich die „Shift“ -Taste gedrückt halten und skalieren Sie sie nach unten, und ich werde sie ein wenig drehen. Ziemlich gut. Fantastisch. Nun lassen Sie mich diese Form auswählen, duplizieren, Befehl D oder Steuerelement D, verschieben Sie sie nach oben, klicken Sie mit der rechten Maustaste darauf und drehen Sie sie vertikal. So wie das. Es sieht toll aus, es ist ziemlich cool. guter Letzt müssen wir die Farbe dieser neuen Form ändern. Ich werde den Farbverlauf auf F44E77 so ändern, und das gleiche für unsere zweite Farbe wie diese. Sie können den Farbverlauf mit diesem Handle ändern. Perfekt. Lassen Sie mich es auch für die erste Form ändern. Ziemlich cool. Es ist erstaunlich, nicht wahr? Jetzt, da die rechte Seite unseres zweiten Abschnitts fertig ist, können wir damit beginnen, den linken Abschnitt zu entwerfen. Lassen Sie mich die Layoutraster einblenden und wir müssen anfangen, unsere Karten zu erstellen. Wir brauchen zwei kleine Karten und eine große Karte. Ich werde das Rechteck-Werkzeug aus der Symbolleiste auswählen, klicken und ziehen. Jetzt habe ich ein Rechteck. Ich werde jedoch seine Breite auf 223 Pixel so einstellen, und es ist Höhe auf 180 wie folgt. Außerdem werde ich den Eckenradius auf 50 ändern. Alles sieht toll aus. Das nächste, was ich tun werde, ist seine Farbe zu ändern. Ich werde es in Weiß umwandeln. Wie Sie sehen können, ist es jedoch nicht sichtbar, da unsere Hintergrundfarbe auch auf Weiß gesetzt ist, was ein Problem darstellt. Wie können wir das beheben? Wir können ganz einfach die Landingpage Zeichenfläche auswählen. Dann, wie Sie sehen können, ist die Füllung auf Weiß eingestellt und ich werde sie in unsere neutrale Farbe so ändern. Jetzt ist unsere Karte sichtbar, und es schafft einen schönen Kontrast. Um es jedoch viel besser aussehen zu lassen, fügen wir Schlagschatten und Strich hinzu. Lassen Sie mich einen Schlaganfall hinzufügen. Ich werde das Strichfarbzeichen wählen, das wir bereits so vorbereitet haben, und dann lassen Sie mich seine Dicke auf 0,5 ändern. Da gehen wir. Das letzte, was wir brauchen, ist ein Schlagschatten, also werde ich auf dieses Plus-Symbol klicken, um einige Effekte hinzuzufügen und lassen Sie mich es ändern. Für die Blair werde ich es auf 50. Für das Y werde ich es auf 25 setzen, also 50 geteilt durch 2 ist gleich 25. Für die Farbe werde ich den Farbcode 16194F so schreiben. Lassen Sie mich abschließend die Deckkraft auf fünf Prozent reduzieren. Da gehen wir. Alles ist fertig, perfekt. Lassen Sie mich die Layoutraster einblenden und ich werde eine Textebene hinzufügen, und lassen Sie mich Balance schreiben. Es zeigt die Balance des Benutzers direkt unter dieser Textebene. Jetzt werde ich einen anderen Textstil verwenden. Lassen Sie uns Haupt, Körper Haupt. Sieht ziemlich gut aus. Ich werde seine obere Polsterung auf 40 setzen, und es ist auch links Polsterung auf 40. Duplizieren Sie es, Befehl D oder Control D, bewegen Sie es nach unten, und hier versuchen wir $5.600. Für diese Textebene werde ich H3 verwenden, weil wir eine gute Hierarchie haben müssen, da dieser Betrag, der die Balance ist, wichtiger ist als der Titel selbst, wir müssen eine größere und auch eine fett formatierte Schrift verwenden. Deshalb benutze ich H3 dafür. Schließlich werde ich seine Farbe auf unser Lila setzen. Da gehen wir. Lassen Sie mich die untere Polsterung auf 40 setzen, und jetzt sieht es toll aus. Was brauchen wir noch? Wir müssen eine weitere Karte direkt daneben für den letzten Transaktionsbetrag erstellen. Bevor ich das mache, möchte ich, dass Sie das Video jetzt pausieren und versuchen, es selbst zu erstellen. Sie müssen nicht so viel tun, Sie müssen nur die Elemente duplizieren, die wir gerade erstellt haben, und nur den Inhalt ändern. Halten Sie das Video an, und wenn Sie fertig sind, können Sie das Video erneut abspielen. Ich hoffe, du könntest das alleine machen, jetzt bin ich dran. Zunächst werde ich alle diese Elemente auswählen. Lassen Sie mich sie auswählen, gruppieren und ich werde es Balance-Karte nennen. Da gehen wir. Jetzt werde ich es duplizieren, Befehl D oder Control D, bewegen Sie es auf die rechte Seite, stellen Sie sicher, dass es Ihre sechste Spalte berührt. Wie Sie sehen können, ist der Rand auf 20 festgelegt. Jetzt doppelklicken Sie auf meine Textebene und lassen Sie mich sie in Letzte Transaktion ändern. Lassen Sie uns den Betrag auf $230 ändern. Ziemlich gut. Ich werde verkleinern und es sieht toll aus. Das Letzte, was wir brauchen, bevor wir unseren zweiten Feature-Abschnitt entwerfen , ist eine Diagrammkarte. Aber vorher, stellen Sie sicher, dass Sie diese letzte Transaktionskarte umbenennen , um alles organisiert zu halten. Es wird die letzte Transaktionskarte sein. Dann werde ich eine dieser Karten auswählen, duplizieren, verschieben Sie sie so nach unten, und ich werde es in Diagramm umbenennen und diese Textebenen auswählen und entfernen. Wir brauchen sie nicht mehr. Für unser Diagramm brauchen wir eine große Karte, also werde ich sie größer machen. Seine Breite wird auf 466 Pixel gesetzt und seine Höhe wird auf 246 Pixel eingestellt werden. Wir können es später ändern, wenn wir mit dem Ergebnis nicht zufrieden sind. Aber jetzt sieht es gut aus. Lassen Sie mich hineinzoomen. Perfekt. Eigentlich werden wir ein einfaches Balkendiagramm entwerfen. Wir werden Montag, Dienstag, Mittwoch, Donnerstag, Freitag, Samstag und Sonntag und einige Bars haben. Lassen Sie mich mit den Textebenen beginnen. Ich drücke T auf meiner Tastatur und klicke hier. Ich werde M-O-N schreiben, was für Montag steht. Welcher Textstil eignet sich für diesen? Ich denke, dieser kleine ist großartig. Außerdem werde ich seine Farbe in Sekundärlicht ändern. Allerdings haben wir ein Problem, und das ist das Gewicht dieser Textebene. Was ich tun werde, ist es von seinem Stil zu lösen und zu ändern, es ist viel zu fett. Jetzt sieht es viel, viel besser aus. Bewegen Sie es ein wenig auf die linke Seite, duplizieren Sie es. Bewegen Sie es auf die rechte Seite, und lassen Sie mich T-U-E schreiben, duplizieren. Bewegen Sie es auf die rechte Seite und dann W-E-D. Noch einmal, duplizieren Sie es. Wir werden die Polsterung vorerst nicht einstellen, weil ich zuerst die Balken erstellen werde. Später werden wir uns mit dem Abstand beschäftigen. Für jeden Tag müssen wir zwei Balken nebeneinander haben. Ich wähle das Rechteck-Werkzeug aus, klicke und ziehe so, um ein hohes Rechteck zu erstellen und mache es dann komplett abgerundet. Sie können es auf 20 setzen, um sicherzustellen, dass es abgerundet ist und seine Breite 14 beträgt. Ich werde den Eckenradius auf 25 einstellen, um sicherzustellen, dass er abgerundet ist. Lassen Sie mich für diese Bar die Höhe auf etwas wie 134 einstellen. Es ist nur eine Zufallszahl. Es bedeutet gar nichts. Sie können es kürzer oder größer machen. Es liegt ganz an dir. Aber ich denke, 134 ist eine gute Zahl. Dann ändere ich die Farbe in unsere primäre, dupliziere sie, Control D oder Befehl D, verschiebe sie auf die rechte Seite und mache sie kürzer und ändere die Farbe in Akzent. Stellen Sie sicher, dass Sie einen Abstand von vier Pixeln haben, wie folgt. Ziemlich gut. Unser erster Tag ist fertig. Ich werde jedoch beide Balken auswählen. Halten Sie die Umschalttaste auf Ihrer Tastatur gedrückt und klicken Sie auf die einzelnen, um beide gleichzeitig auszuwählen. Gruppieren Sie sie, Control G oder Befehl G, und nennen wir es Bars. Dann halte ich die Umschalttaste gedrückt und wähle „Montag“ und richte sie horizontal wie folgt aus. Lassen Sie mich hineinzoomen. Die untere Polsterung wird 10 Pixel sein, also werde ich sie um zwei Pixel nach oben bewegen und dort gehen wir. Jetzt werde ich die „Bars“ auswählen, duplizieren, verschieben Sie sie auf die rechte Seite, so und ich werde ihre Höhe ein wenig ändern. Wenn Sie die Befehlstaste oder die Strg-Taste auf Ihrer Tastatur gedrückt halten und auf einen dieser Balken klicken, können Sie diese bestimmte Ebene auswählen und die Höhe so leicht ändern. Ich werde es auf 98 setzen. Die nächste, ich werde es auf so etwas wie 40. Sieht gut aus. Stellen Sie dann sicher, dass es an der Textebene in der Mitte ausgerichtet ist. Perfekt. Wählen Sie es aus, duplizieren Sie es, verschieben Sie es auf die rechte Seite. Ich werde ihre Höhe wieder ändern. Sie müssen diesen Vorgang nur immer wieder wiederholen , um ein sehr einzigartiges Balkendiagramm zu erstellen. Können Sie sehen, wie einfach es ist, diese Diagramme zu erstellen? Ich werde sie ausrichten, perfekt. Duplizieren Sie es, verschieben Sie es so auf die rechte Seite. Das letzte, was wir tun müssen, ist, diese Balken mit ihrem entsprechenden Namen zu gruppieren. Ich wähle sie aus, Montag, gruppiere sie, und ich werde es M-O-N nennen. Ich werde diesen Prozess schnell weiterleiten, um etwas Zeit zu sparen. Jetzt, da alle Gruppen bereit sind, kann ich alle Gruppen auswählen, die Umschalttaste gedrückt halten und sie einzeln auswählen. Stellen Sie sicher, dass alle ausgewählt sind und ich einen geraden Raum zwischen ihnen verteilen kann. Wenn Sie zum Abschnitt Ausrichtung im Inspektor gehen, können Sie dieses Dropmenü sehen. Klicken Sie einfach auf dieses Symbol, „Weitere Optionen“ und klicken Sie auf „Horizontalabstand verteilen“. Da gehen wir. Jetzt ist es auf 16. Ich werde es mit diesem rosa Griff auf 20 setzen. Schließlich werde ich sie gruppieren und lassen Sie mich es Diagramm nennen. Da gehen wir. guter Letzt müssen Sie dieses Diagramm an Ihrer Karte Karte ausrichten. Ich werde diese Karte Karte und dieses Balkendiagramm zur gleichen Zeit auswählen und sie horizontal und vertikal ausrichten. Sie können sie auch gruppieren und es Karte nennen. Da gehen wir. Unsere Karte ist fertig. Lassen Sie mich die obere Polsterung überprüfen. Es ist auf 22 eingestellt. Ich werde es auf 20 setzen, um alles konsistent zu halten. Jetzt können wir all diese Karten auswählen und sie so nach oben verschieben, gruppieren und es Karten nennen. Lassen Sie uns auch alles auf der rechten Seite organisieren. Wir haben diese Maskengruppe, die diese Formen enthält. Halten Sie die Umschalttaste gedrückt und wählen Sie diese „Registriertaste“. Wir können es sicher umbenennen, gruppieren sie und nennen es „Weitere Informationen“. Dann können Sie die Umschalttaste gedrückt halten und Ihre Texte auswählen. Gruppieren Sie sie erneut und nennen Sie es „Feature 2", und Sie können sie vertikal ausrichten. Halten Sie die Umschalttaste gedrückt, wählen Sie „Karten“ und die Gruppe „Feature 2" und richten Sie sie vertikal aus. Da gehen wir. Unser Bereich Feature 2 ist fertig. Ich halte die Umschalttaste gedrückt, wähle beide aus, gruppiere sie und nenne sie so „Feature 2 - Abschnitt“. Ziemlich gut. Der obere Rand wird 260 Pixel betragen. Ich werde es runterziehen und da gehen wir. Alles sieht toll aus. Das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und wir sehen uns im nächsten. 104. Spielraum - Unterstützung: Hallo an alle. Willkommen zurück. In diesem Video werden wir unseren letzten Featurebereich entwerfen, der den Supportbereich ist. Lassen Sie mich einen Blick auf das Drahtmodell werfen. Wie Sie auf der linken Seite sehen können, müssen wir einige Textebenen haben, wie üblich, wie unsere vorherigen Abschnitte. Wir müssen also einen Titel, eine Beschreibung haben, und zusätzlich zu diesen Textebenen müssen wir einige Profilbilder haben, wie diese. Auf der rechten Seite müssen wir 3D-Druck-Chatblasen entwerfen, es wird zeigen, wie das Support-Team auf die Fragen des Benutzers reagiert. Zunächst einmal müssen wir die Größe unserer Lernseite Zeichenfläche erhöhen, also werde ich das auswählen und die Höhe auf erhöhen, sagen wir 4.000 für jetzt, später können wir es ändern. Ich werde vergrößern, und was ich brauche, sind einige Textebenen, also gehe ich voran und doppelklicke auf diesen Inhalt von Feature 1, kopiere ihn und lasse mich ihn hier einfügen. Ich werde meine Layoutraster einblenden, lassen Sie es mir so auf die linke Seite legen, und der Titel lautet „Wir unterstützen Sie in fünf verschiedenen Sprachen.“ Ich werde es so aus meiner Zwischenablage kopieren und einfügen. Lassen Sie mich diese Beschreibung nach unten verschieben und stellen Sie sicher, dass der obere Rand auf 30 gesetzt ist , und lassen Sie mich auch die Beschreibung kopieren und einfügen. Es wird sein, unser Support-Team ist hier, um Ihnen in fünf Sprachen zu helfen: Englisch, Französisch, Spanisch, Polnisch und Deutsch. Unten müssen wir einige Profilbilder haben. Um dies zu tun, müssen wir einen Kreis erstellen, also werde ich klicken und ziehen, und ich werde die Breite und Höhe auf 60 Pixel einstellen, lassen Sie mich es nach unten verschieben. Für jeden Kreis müssen wir ein Bild haben. Bevor ich das Bild zu unserem Kreis hinzufüge, füge ich ihm einen Strich hinzu und ändere die Dicke von 1-1,5 und ändere die Farbe wie folgt in Weiß. Dann wähle ich das aus und dupliziere es, Befehl D oder Control D, verschiebe es auf die rechte Seite, noch einmal, dupliziere es, und zwei weitere Male, da gehen wir. Insgesamt werden wir fünf verschiedene Bilder haben. Wie können wir nun das Bild zu diesen Kreisen hinzufügen? Wir können alle von ihnen auswählen und klicken Sie auf dieses Hamburger-Menü in der oberen linken Ecke und gehen Sie zu den Plugins, und hier werde ich gehen und klicken Sie auf Content Reel Plugin. Wenn Sie dieses Plugin noch nicht installiert haben, achten Sie darauf, auf „Plugins verwalten“ zu klicken, und auf der linken Seite können Sie alle installierten Plugins sehen. Wenn Sie kein Plugin installiert haben, können Sie leicht zur Community gehen, und dann auf Plugins Tab gehen, und von hier aus können Sie Content Reel finden und klicken Sie auf Install Button auf der rechten Seite. Während diese Kreise ausgewählt sind, werde ich voran gehen und diese Inhalte Reel Plugin laufen. Dann unten haben wir zwei Optionen, My Content und Content Library. Ich gehe voran und klicke auf Inhaltsbibliothek gehe dann zu Bildern. Hier haben Sie viele Bibliotheken, Sie haben Avatare von Microsoft und einige andere Bibliotheken. Lassen Sie mich Avatare von Microsoft auswählen, die sowohl männliche als auch weibliche Bilder enthält, und ich werde auf Alle anwenden klicken. Da gehen wir. Jetzt haben wir zufällige Bilder auf unsere Kreise geschnitten, und das ist genau das Ergebnis, nach dem wir gesucht haben. Wenn Sie jedoch mit den Bildern nicht zufrieden sind, können Sie ganz einfach wieder auf Alles anwenden klicken, um das bestmögliche Ergebnis zu erzielen. Achten Sie darauf, ein Gleichgewicht zu halten, damit Sie nicht nur männliche Bilder oder nur weibliche Bilder bekommen. Natürlich hängt es vom Zweck Ihres Designs und dem Zweck des Produkts ab. Ich denke, jetzt haben wir ein gutes Ergebnis. Ich werde das Plugin schließen, unsere Bilder sind fertig, Sie können alle auswählen, gruppieren Sie sie, Befehl G oder Control G, und nennen Sie es Profilbilder. Direkt neben diesen Bildern müssen wir eine Zahl, eine Textebene haben, also werde ich T auf meiner Tastatur drücken und eine neue Textebene erstellen, und ich werde plus 20 schreiben, und es zeigt an, dass es 20 weitere Leute gibt arbeiten in der Support-Abteilung. Ich werde es ein wenig nach oben bewegen, stellen Sie sicher, dass sie vertikal ausgerichtet sind. Lassen Sie uns seine linke Polsterung auf 10 setzen, und ich werde einen Textstil dafür wählen. Ich werde Haupt wählen und lassen Sie mich die Farbe ändern, lassen Sie uns unsere Farbstile verwenden, Secondary/Light. Da gehen wir. Sieht fantastisch aus. Die linke Seite ist fertig. Was ist mit der rechten Seite? Wie ich bereits erwähnt habe, müssen wir drei verschiedene Chatblasen erstellen. Wir müssen das Rechteck-Werkzeug verwenden, ich werde das auswählen, klicken und ziehen, wie folgt, stellen Sie sicher, dass die Breite auf 370 eingestellt ist, und dann werde ich den Eckenradius ändern, lassen Sie mich es auf 30. Aber ich muss den Eckenradius dieser bestimmten Ecke, die untere linke Ecke auf Null setzen. Um dies zu tun, können Sie einfach zum Inspektor gehen und auf dieses unabhängige Ecken-Icon klicken. Jetzt können Sie den Eckenradius unabhängig ändern. Ich werde unten links auf Null setzen, da gehen wir, und schließlich können wir die Farbe in Weiß ändern. Jetzt müssen wir ein Profilbild direkt neben dieser Chatblase hinzufügen, also müssen wir einen Kreis erstellen, wie diesen, und ich werde es kleiner machen, also lassen Sie uns die Breite und Höhe auf 55 Pixel setzen. Bewegen Sie es nach unten und stellen Sie sicher, dass es mit Ihrer Chatblase ausgerichtet ist, und seine rechte Auffüllung wird auf 20 Pixel eingestellt werden. Lassen Sie uns voran und führen Sie unser Content Reel Plugin. Gehen Sie erneut zu den Bildern der Inhaltsbibliothek und wählen Sie erneut Avatare aus. Aber dieses Mal werde ich eine Frau wählen, weil ich ziemlich sicher bin, dass diese Person eine Frau sein muss. Also lass mich das hier wählen, ziemlich gut. Ich werde es schließen und wir müssen ihren Namen und auch den Zeitstempel hinzufügen. Ich werde zum Beispiel Claire, 12:35 schreiben , und dafür werde ich den Textstil in Beschriftung ändern. Stellen Sie sicher, dass es mit unserer Chatblase ausgerichtet ist und die obere Polsterung 10 Pixel betragen wird. Schließlich lassen Sie mich die Farbe auf Secondary/Light ändern, fantastisch. Das Letzte, was wir tun müssen, ist die Nachricht hinzuzufügen, also werde ich hier eine Textebene hinzufügen und mich schreiben lassen, Hi Mike. Wie kann ich Ihnen helfen? Eine typische Support-Frage, natürlich. Ich werde den Textstil durch die Haupt wie folgt ändern. Stellen Sie sicher, dass es vertikal mit Ihrer Chatblase ausgerichtet ist und die linke Polsterung 40 Pixel betragen wird, wie folgt. Wie Sie sehen können, ist die obere Polsterung auf 30 und die untere Polsterung auf 29 eingestellt. Um es 30 zu machen, werde ich unser Rechteck oder Chat-Blase wählen, und lassen Sie uns die Höhe auf 90 anstelle von 89 setzen. Jetzt sieht es toll aus. Sie müssen sicherstellen, dass Sie Ihr Profilbild am Rechteck ausrichten. Wieder einmal sollte auch diese Textebene um ein Pixel verschoben werden , um die 10 Pixel obere Polsterung zu erhalten. Last but not least, müssen wir seine Farbe zu Secondary/Light ändern, fantastisch. Unsere erste Chatblase ist fertig. Wählen wir nun diese beiden Ebenen zuerst wie folgt aus. Ich werde klicken und ziehen, und wie Sie sehen können, ist unser Rechteck und diese Frage ausgewählt, gruppieren sie und lassen Sie uns es Chat Blase nennen. Wählen Sie dann diese Chatblase mit anderen Elementen aus. Halten Sie die Umschalttaste gedrückt, und klicken Sie darauf. Gruppieren Sie sie, und jetzt schreiben wir Nachricht 1. Jetzt werde ich es duplizieren, Befehl D oder Control D, bewegen Sie es so nach unten. Die nächste Nachricht wird unsere Benutzer Nachricht sein, und die Richtung dieser Chatblase sollte geändert werden. Was werde ich tun? Zuerst werde ich dieses Rechteck auswählen, also stellen Sie sicher, dass Ihr Rechteck ausgewählt ist, nicht die Chat-Blasengruppe, klicken Sie mit der rechten Maustaste darauf und drehen Sie es horizontal, damit die Richtung geändert wird. Dann werde ich dieses Rechteck noch einmal auswählen und seine Farbe ändern. Für diesen werde ich es auf Secondary/Light setzen und die Frage auswählen, die diese Textebene ist, trennen Sie sie von ihrem Stil und setzen Sie sie auf Weiß. Dann werde ich auf diese Textebene doppelklicken, sie auf die rechte Seite verschieben und sicherstellen, dass sie mit unserer Chatblase ausgerichtet ist, und schließlich müssen wir dieses Profilbild auf die rechte Seite verschieben. Wir müssen eine 20 Pixel rechte Polsterung bekommen, fantastisch. Jetzt können wir unsere Nachricht in Gruppe auf die linke Seite verschieben. Ich werde meine Layout-Gitter so einblenden, ziemlich gut. Vergiss nicht, den Namen und die Zeit zu ändern, ich werde Mike schreiben, und für die Zeit, lass es uns auf 12:36 setzen. Richten Sie es aus, Sie können es hier auch auf der rechten Seite ausrichten, und die Textebene wird geändert werden, meine Kreditkarte wird gestohlen, so. guter Letzt müssen wir unser Bild ändern. Wählen wir diesen Kreis aus, stellen Sie sicher, dass diese Ebene ausgewählt ist, und führen Sie das Content Reel Plugin aus, gehen Sie erneut zu Content Library, gehen Sie zu Bilder. Aber dieses Mal werde ich eine andere Bibliothek verwenden, zum Beispiel diese. Es spielt keine Rolle, welches, es liegt ganz an dir. Aber lassen Sie mich zum Beispiel dieses wählen . Ich finde, es sieht toll aus, perfekt. Unsere Botschaft 2 ist ebenfalls bereit. Wir müssen noch eine Nachricht haben, und jetzt ist es so einfach, weil wir nur Nachricht 1 auswählen, duplizieren, Befehl D oder Control D, verschieben Sie es so nach unten. Stellen Sie sicher, dass Sie den Abstand korrekt einstellen. Der obere Rand dieser Nachricht 2 wird auch für diesen einen 40 Pixel betragen. Denn Konsistenz ist der Schlüssel im Design. Lasst uns schreiben, nein, kein Problem. Wir werden uns darum kümmern. Sie können auch ein Emoji hinzufügen, aber wir werden es so lassen, wie es ist. Lassen Sie mich seine Breite auf 258 verringern, so, bewegen Sie es nach oben, und auch wir müssen diese Chatblase vergrößern, weil wir jetzt zwei Zeilen haben. Stellen Sie sicher, dass Sie dieses Rechteck auswählen, und ich werde die Höhe von 90 auf 110 ändern, um hier etwas Platz zu haben. Noch einmal, richten Sie sie aus, stellen Sie sicher, dass Sie Ihre Textebene nach unten bewegen und auch dieses Profilbild ausrichten, fantastisch, alles sieht gut aus. Nun wählen wir alle diese Nachrichten aus, gruppieren sie und nennen wir es Nachrichten. Ich wähle alle Inhalte auf der linken Seite aus, gruppiere sie und lass uns Feature 3 schreiben, die Umschalttaste gedrückt halten und die Nachrichten auswählen, sie vertikal ausrichten, gruppieren und nennen es Feature 3 Abschnitt. Wir sind fast fertig, aber lassen Sie mich diesen Abschnitt 3 nach unten verschieben, um einen 260 Pixel oberen Rand zu erhalten. Wie Sie hier sehen können, haben wir leere Räume. Um diese Räume zu füllen, könnten wir unserem Hintergrund einige einfache Formen hinzufügen. Es muss nicht sehr kompliziert sein, zum Beispiel können wir einige Kreise hinzufügen. Lassen Sie mich das Ellipsenwerkzeug auswählen, halten Sie die Umschalttaste gedrückt, klicken und ziehen, um einen Kreis zu erstellen, und lassen Sie mich die Breite und Höhe auf 16 Pixel ändern. Dann wählen wir unsere sekundäre/helle Farbe, lösen Sie sie von ihrem Stil, und verringern Sie die Deckkraft auf 10 Prozent, um diesen Lichtkreis zu erhalten. Dann werde ich es auf die rechte Seite duplizieren, noch einmal, duplizieren Sie es, Befehl U oder Control D, und wiederholen Sie diesen Vorgang, bis Sie sechs Kreise hintereinander haben, wählen Sie alle aus, gruppieren Sie sie, duplizieren Sie es, verschieben Sie es nach unten, stellen Sie sicher, dass der Abstand zwischen ihnen und der Abstand zwischen diesen Zeilen gleich ist, also ist er in diesem Fall auf sechs Pixel festgelegt. Noch einmal werde ich es duplizieren, es nach unten verschieben und diesen Vorgang wiederholen, bis Sie sechs Zeilen wie diese erhalten. Dann werde ich alle diese Gruppen auswählen, sie noch einmal gruppieren, nennen wir es BG. Ich werde es ein bisschen auf die linke Seite bewegen, so etwas. Ich denke, es sieht gut aus, lassen Sie es duplizieren, verschieben Sie es auf die rechte Seite nach unten und stellen Sie sicher, dass Sie diese Ebene nach unten verschieben und sie unter Ihren Feature-3-Abschnitt legen. Hier, da gehen wir. Ich denke, jetzt sieht es toll aus. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. 105. Membership: Hey, willkommen zurück. In diesem Video werden wir mit der Gestaltung unseres Mitgliederplans beginnen. Werfen wir einen Blick auf unser Drahtmodell. Wie Sie für diesen Abschnitt sehen können, benötigen wir einen Titel, einen Untertitel und zwei große Karten. Jede Karte wird einige Informationen über diese bestimmte Mitgliedschaft haben, wie Name, Preis, einen Aufruf zum Handeln oder sagen wir Registrierungs-Button, die Kreditkarte und die Vorteile dieser bestimmten Mitgliedschaft. Zuallererst müssen wir eine Textebene für unseren Titel erstellen. Ich werde T auf meiner Tastatur drücken und hier klicken und einen außergewöhnlichen Service zum richtigen Preis schreiben. Ich werde diese Textebene auswählen und lassen Sie mich unsere H3 oder Überschrift drei so wählen und ich werde es horizontal an der Mitte ausrichten. Perfekt. Was ist mit der Farbe? Für die Farbe werde ich zwei Farben für diese Textebene verwenden. Ich werde zum richtigen Preis auswählen und unsere Akzentfarbe dafür wählen und der Rest wird unsere Primärfarbe haben. Perfekt. Sieht gut aus. Dann werde ich es duplizieren. Befehl V oder Control V verschieben Sie es nach unten. Für den Untertitel werde ich schreiben beginnen mit unserem kostenlosen Plan und wechseln Sie zu Premium, wie Sie wachsen. So wie das. Für diese Textebene werde ich durch das Intro so wählen. Für die Farbe können wir sekundäre dunkel wählen und sicherstellen, dass es horizontal an der Mitte ausgerichtet wird, und es ist der obere Rand wird 20 Pixel wie folgt sein. Perfekt. Jetzt müssen wir unsere Karten erstellen, aber vorher müssen wir die Höhe unserer Lernseite erhöhen. Stellen Sie sicher, dass Sie Ihr Artboard auswählen und es auf 6100 erhöhen. Wir haben genug Platz zum Arbeiten. Ich werde heranzoomen. Zeichnen wir zuerst ein Rechteck für unsere Karte wie diese und ich werde die Breite auf 430 und die Höhe auf 1131 setzen , so. Ich habe es bereits berechnet, weil ich dieses Projekt bereits entworfen habe, damit ich die Höhe kenne , die ich brauchen werde, aber wenn Sie ein Projekt entwerfen möchten und Sie nicht wissen, wie es berechnet werden soll, müssen Sie diese Beträge nur mehrmals ändern, da Ihr Design geht weiter. Angenommen, Sie haben so etwas und fügen mehr Inhalt hinzu und Sie benötigen mehr Platz, dann werden Sie die Höhe immer wieder erhöhen, bis Sie die benötigte Höhe erhalten. Für diese Karte verwenden wir das gleiche Styling, das wir für diese Karten verwendet haben. Um das Styling zu kopieren, halte ich die Strg-Taste auf meiner Tastatur oder Befehlstaste gedrückt und klicke auf dieses Auto, um dieses bestimmte Rechteck auszuwählen. Alternativ können Sie zur Ebenenliste auf der linken Seite wechseln und nach diesem Rechteck suchen. Klicken Sie dann mit der rechten Maustaste darauf und gehen Sie zu den Eigenschaften Kopieren und Einfügen und Kopieren. Ich werde nach unten scrollen, wählen Sie dieses Rechteck, klicken Sie mit der rechten Maustaste darauf und fügen Sie Eigenschaften ein und wir gehen. Sie haben gerade alle Stile kopiert und eingefügt, die wir unseren Karten zuvor hinzugefügt haben, und das ist genau das, was wir wollen. Wir haben den Schlaganfall, wir haben den Schlagschatten, alles sieht gut aus. Was brauchen wir? Zuallererst an der Spitze brauchen wir den Namen. Ich werde T auf meiner Tastatur drücken und eine Textebene hinzufügen und hier schreiben wir frei. Dann werde ich den Textstil auf Alter von drei ändern, aber wir brauchen es nicht, um fett zu sein, also werde ich es von seinem Stil lösen und es zu regulär ändern. Stellen Sie dann sicher, dass sie an der Mitte Ihrer Karte ausgerichtet ist. Halten Sie die Umschalttaste gedrückt, wählen Sie diese Textebene und Ihre Karte aus und gehen Sie zum Ausrichtungsbereich im Inspektor und richten Sie ihn horizontal wie folgt aus. Jetzt ist es genau in der Mitte. Es ist oberste Polsterung wird 60 Pixel sein, duplizieren Sie es, Befehl D oder Control D, verschieben Sie es nach unten. hier müssen wir den Preis schreiben. Ich werde $0/m schreiben, was pro Monat bedeutet. Für diesen Betrag $ und Null werde ich die Schriftgröße auf 60 setzen und dieser Schrägstrich und m werden die gleiche Schriftgröße 40 verwenden. Das müssen wir nicht ändern. Stellen Sie sicher, dass Sie es wie folgt mit der Karte an der Mitte ausrichten. Es ist Top-Polsterung wird 50 Pixel sein, so. Was sonst noch? Danach müssen wir eine Beschreibung haben. Ich werde es duplizieren, es nach unten bewegen. Lassen Sie uns die Ausrichtung unserer Textebene auf Mitte setzen. Es ist einfacher, es später zu ändern und hier werde ich schreiben, verwalten Sie Ihr Geschäft mit einem einfachen und effizienten Konto. Ich werde es einfach aus meiner Zwischenablage kopieren und einfügen. Dafür werde ich von der Haupt wählen und seine Farbe wird sekundäres Licht wie folgt sein. Sie können die Breite auf 340 einstellen und sicherstellen, dass sie horizontal an der Mitte ausgerichtet ist. Immer müssen Sie Ihre Ebene und Ihre Karte auswählen und dann ausrichten. Es ist Top-Polsterung wird 30 Pixel und bisher so gut sein. Nach dieser Beschreibung müssen wir einen Knopf haben. Ich werde eine Schaltfläche für die ersten Schritte erstellen und ich werde ein Rechteck benötigen. Klicken und ziehen Sie wie folgt. Die Breite dieses Rechtecks wird 170 sein und die Höhe, ich werde es auf etwas wie 54 Pixel setzen. Dann werde ich es gerundet machen, erhöhen wir den Eckenradius auf 20 und schließlich machen wir es zu einer Gliederungsschaltfläche. Ich werde die Füllung entfernen und einen Strich hinzufügen. Ich werde die Dicke auf 1,5 einstellen und die Farbe wird so sekundär dunkel sein. Dann fügen Sie eine Textebene hinzu und lassen Sie uns schreiben, beginnen Sie uns. Für diese Textebene werde ich Beschriftung verwenden und auch für seine Farbe werde ich sekundäre Dunkelheit verwenden. Schließlich müssen wir dieses Rechteck mit unserer ersten Textebene sowohl horizontal als auch vertikal ausrichten und sie gruppieren Befehl G oder Control G. Lassen Sie uns es beginnen und ich werde es mit meiner Karte horizontal ausrichten. Da gehen wir. Es ist Top-Polsterung wird 30 Pixel sein. So weit, so gut. Was kommt als Nächstes? Als nächstes müssen wir unsere Kreditkarte haben, wir brauchen sie nicht noch einmal zu entwerfen, da wir sie bereits entworfen haben. Lassen Sie mich einfach diese Kreditkarte auswählen, kopieren Sie sie, scrollen Sie nach unten und fügen Sie sie hier ein. Ich werde K auf meiner Tastatur drücken, um das Skalierungswerkzeug auszuwählen und versuchen, es so zu skalieren. Ich finde, es sieht gut aus. Richten Sie es an der Mitte aus. Es ist Top-Polsterung wird 40 Pixel sein. Direkt unter dieser Kartemüssen wir zwei verschiedene Kreise erstellen, müssen wir zwei verschiedene Kreise erstellen damit der Benutzer zwischen zwei verschiedenen Designs wählen kann. Ich werde das Ellipsenwerkzeug auswählen, klicken und ziehen, und lassen Sie uns die Breite und Höhe auf 30 einstellen, wie folgt. Wir werden zwei verschiedene Designs haben, die dunkle Version und die helle Version. Um die dunkle Version anzuzeigen, werden wir hier zwei verschiedene Farben verwenden, unsere sekundäre dunkle Farbe und diese hellviolette Farbe, die wir für unsere Kreditkarte verwenden. Lassen Sie mich hineinzoomen. Ich werde ein Rechteck wählen, klicken und ziehen Sie so, um die Hälfte unseres Kreises zu fühlen und wählen Sie unsere sekundäre dunkle Farbe. Stellen Sie sicher, dass Sie diesen Kreis auswählen, duplizieren Sie ihn. Während diese duplizierte Ebene ausgewählt ist, halten Sie die Umschalttaste gedrückt und wählen Sie dieses Rechteck, das wir gerade erstellt haben, und klicken Sie so auf „Maske“. Wählen Sie dann Ihren anfänglichen Kreis, der dieser ist, und ändern Sie seine Farbe in dieses hellviolette. Ich werde das Auge wählen, das wir gehen. Unsere Maskengruppe ist bereit. Sie müssen sicherstellen, dass beide Ebenen ausgewählt werden. Stellen Sie sicher, dass Sie sowohl Ihren Anfangskreis als auch Ihre Maskengruppe auswählen und gruppieren. Nennen wir es dunkel, bewegen Sie es nach oben, und es ist die obere Polsterung wird 20 Pixel sein. Duplizieren Sie es, verschieben Sie es auf die rechte Seite, und jetzt müssen wir die Farbe ändern, also lassen Sie mich vergrößern. Ich wähle dieses dunkle Rechteck aus und ändere seine Farbe in dieses hellviolette, und wähle dann unseren anfänglichen Kreis aus und ändere seine Farbe in diese hellere Farbe oben. Da gehen wir. Das Letzte, was wir tun müssen, ist einen Schlag um diesen dunklen Kreis zu legen. Da wir irgendwie angeben müssen, dass diese dunkle Version ausgewählt ist, und wenn der Benutzer auf diese helle klickt, sollte dieser Strich um diesen Kreis herum erscheinen. Lassen Sie mich zunächst diese Gruppe in Licht umbenennen, und dann werde ich einen weiteren Kreis erstellen. Halten Sie die Umschalttaste gedrückt, klicken und ziehen Sie wie folgt, und legen Sie sie direkt unter die dunkle Gruppe, entfernen Sie eine Füllung, fügen Sie einen Strich hinzu, und wir müssen es an unserem inneren Kreis ausrichten. Ich werde es etwas kleiner machen. Wenn ich es auf 36 mal 36 Pixel setze und die Option oder die Alt-Taste auf meiner Tastatur gedrückt halte, können Sie sehen, dass wir von allen Seiten ein Drei-Pixel-Padding haben. Das ist genau das, was wir brauchen. Lasst uns sie gruppieren, und ich werde es ausgewählte Vene nennen. Die linke Polsterung dieses Lichtthemas wird 10 Pixel wie folgt betragen. Ziemlich gut. Aber sie sind nicht an der Mitte dieser Karte ausgerichtet. Was wir tun müssen, ist die Umschalttaste gedrückt halten und beide auswählen, wie diese, gruppieren sie, und hier werde ich es Themen nennen, und halten Sie die Umschalttaste gedrückt, klicken Sie auf unsere Kreditkarte und richten Sie sie an der horizontal zentrieren. Jetzt sind sie in der Mitte. Der nächste Abschnitt ist die Vorteile dieser Mitgliedschaft. Wir müssen ein Symbol auf der linken Seite und eine Textebene direkt daneben haben. Bitte öffnen Sie den Ordner „Assets“ und öffnen Sie den Ordner „Symbole“, und hier haben Sie einige Symbole. Bitte wählen Sie das Häkchensymbol aus und ziehen Sie es in Ihr Projekt. Da gehen wir. Ich werde vergrößern, drücken wir T und erstellen eine Textebene. Zum ersten Vorteil werde ich schreiben, 10 kostenlose lokale Transfers, und dann werde ich den Textstil auf Medium wie das setzen. Lassen Sie mich es sehr schnell mit meinem Häkchensymbol ausrichten, und es ist linkes Padding wird 10 Pixel sein und die Farbe sollte sekundär dunkel wie folgt sein. Wählen wir nun beide aus. Halten Sie die Umschalttaste gedrückt und klicken Sie auf Ihr Schecksymbol, gruppieren Sie sie, und ich werde es nutzen nennen. Duplizieren Sie es, bewegen Sie es nach unten. Hier für die zweite Funktion, werde ich kostenlose Geldautomaten Auszahlungen in Dollar bis zu $250 pro Monat schreiben. Ich werde es aus meiner Zwischenablage kopieren und einfügen, um Zeit zu sparen. Da gehen wir. Ich muss jedoch seine Breite von 400 Pixel auf 316 Pixel reduzieren , um so etwas zu erhalten. Fantastisch. Dann werde ich es duplizieren, es nach unten verschieben und hier werde ich kostenlose Zahlungen an andere Kontoentwürfe schreiben. Lassen Sie es mich einfügen. Da gehen wir. Stellen Sie sicher, dass Sie sie ausrichten. Noch einmal duplizieren Sie es, bewegen Sie es hier nach unten. Ich werde Prepaid-Debitkarten schreiben. Noch einmal, duplizieren Sie es, bewegen Sie es nach unten. Hier schreiben wir visuelle Karten. Fantastisch. Noch einmal, duplizieren Sie es, bewegen Sie es nach unten. Hier werde ich Priorität 24-7 Unterstützung wie folgt schreiben. Wir müssen noch zwei Vorteile schreiben. Für diesen hier werde ich Austausch 24 Währungen schreiben. Für den letzten werde ich Multi-User-Zugriff schreiben. Ziemlich gut. Jetzt müssen wir den Abstand zwischen ihnen einstellen. Ich halte die Umschalttaste gedrückt und wähle sie alle so aus und verteile den vertikalen Abstand. Ich werde die Polsterung zwischen ihnen auf 20 Pixel so einstellen. Gruppieren Sie sie und nennen Sie es Vorteile. Wählen Sie Ihr Rechteck, das Ihre Karte ist, richten Sie es an der Mitte aus und wählen Sie Ihre Vorteilsgruppe aus, verschieben Sie es nach oben. Seine obere Polsterung wird 40 Pixel wie folgt sein, und seine untere Polsterung wird auch 40 Pixel betragen. Wie bereits erwähnt, können Sie die Höhe ändern, wann immer Sie möchten. Wie Sie sehen können, ist es jetzt auf 41. Wenn ich die Höhe auf 1126 setze, kann ich 40 Pixel-Polsterung von unten so erhalten. So weit so gut. Das Letzte, was wir tun müssen, ist, diese letzten drei Vorteile zu deaktivieren. Denn diese kostenlose Mitgliedschaft wird all diese Funktionen außer diesen letzten drei Vorteilen haben . Diese sind in der Premium-Mitgliedschaft verfügbar. Ich muss nur ihre Farbe in ein hellgrau ändern. Ich werde diese Textebene auswählen, sie von ihrem Stil lösen und den Farbcode in B7, B7, B7 wie folgt ändern . Ich werde diese Farbcodes kopieren und mein Häkchensymbol auswählen, und im Auswahlfarbbereich werde ich es einfügen. Da gehen wir. Ich werde den gleichen Prozess für andere Vorteile wie diesen wiederholen. Wir sind mit unserer kostenlosen Karte fertig, aber eine Sache, die ich merke, ist, dass wir die obere Polsterung auf 60 Pixel setzen, also müssen wir auch eine 60 Pixel untere Polsterung haben. Wie Sie sehen können, ist es jedoch auf 40. Was ich tun werde, ist dieses Rechteck auszuwählen und ich werde voran gehen und einfach 20 weitere Pixel zur Höhe hinzufügen. Was ich tun kann, ist plus 20 so zu schreiben. Jetzt ist die untere Polsterung auf 60. Was ist mit der Premium-Karte? Zuerst müssen wir alle diese Elemente so auswählen. Klicken und ziehen Sie, um alle von ihnen auszuwählen, gruppieren sie, und hier schreiben wir freien Plan. Dann duplizieren Sie es, verschieben Sie es auf die rechte Seite. Die Polsterung zwischen ihnen wird 30 Pixel wie folgt sein. Wir müssen hier etwas ändern. Zuerst müssen wir den Gruppennamen ändern, bevor wir vergessen, dass, Lassen Sie uns es zu Premium-Plan ändern. Dann müssen wir den Namen natürlich ändern. Lassen Sie uns kostenlos zu Premium wechseln. Aber vorher, stellen Sie sicher, dass Sie die Textebene in der Mitte ausrichten , so dass sie in der Mitte bleibt. Der Preis wird $8 sein. Die Beschreibung muss geändert werden. Ich werde es zu einem vorrangigen Support und Multi-User-Zugriff ändern , um Ihre Produktivität zu maximieren. Lassen Sie mich es aus meiner Zwischenablage einfügen. Da gehen wir. Ich werde nach unten scrollen, und jetzt müssen wir diese letzten drei Optionen zur Verfügung stellen. Was wir tun sollten, ist wählen Sie alle diese Textebenen, halten Sie die Umschalttaste gedrückt und klicken Sie auf alle von ihnen und wählen Sie sekundäre dunkel. Wählen Sie dann Ihr Häkchensymbol aus und ändern Sie seine Farbe in Ihre Primärfarbe. Ziemlich gut. Es ist so einfach, nicht wahr? Die Premiumkarte ist ebenfalls fertig. Wir sind fast fertig, aber wir müssen daran denken, unsere Karten an der Mitte auszurichten. Lassen Sie uns beide auswählen, gruppieren sie, und hier werde ich es Pläne nennen. Gehen Sie einfach zum Ausrichtungsabschnitt und richten Sie ihn horizontal an der Mitte aus. Fantastisch. Der obere Rand wird 120 Pixel betragen. Das ist alles. Siehst du, wie schön sie sind? Ich hoffe, Sie haben dieses Video genossen und wir sehen uns im nächsten. 106. FAQ-Abschnitt: Hey, willkommen zurück. In diesem Video, Wir werden die häufig gestellten Fragen Abschnitt zu entwerfen. Für diesen Abschnitt, Wir müssen, wieder einen Titel, einen Untertitel, und einige Karten. Diese Karten werden innerhalb einer Karte geöffnet und geschlossen. Ohne weitere Umschweife, lasst uns anfangen. Zunächst werde ich voran gehen und wählen Sie Diese beiden Textebenen, duplizieren Sie sie, Control D oder Befehl D. Bewegen Sie sie so nach unten. Die obere Polsterung wird auf 260 Pixel wie Dies eingestellt werden. Der Titel wird in häufig gestellte Fragen geändert. Ich ändere diesen violetten Abschnitt in Häufig und den rechten Abschnitt zu Asked Questions. Lassen Sie mich die Farbe auf unsere Akzentfarbe ändern, wie dies, und richten Sie sie an der Mitte aus. Der Untertitel wird in etwas anderes geändert. Ich werde es aus meiner Zwischenablage kopieren und einfügen. Wie Sie sehen können, ist es ein Zeilenabsatz. Ich werde die Breite auf 600 Pixel verringern und den Text an der Mitte ausrichten und auch eine Ebene horizontal wie Dies an der Mitte ausrichten. Das Letzte, was wir hier ändern müssen, ist die Farbe. Ich werde die Farbe zu sekundärem Licht anstelle von dunkel für Diese Beschreibung ändern. Die Beschreibung, wie Sie sehen können, ist, wenn Sie nicht sicher sind, ob Draft für Sie geeignet ist oder nicht, keine Sorge. Wir sind hier, um Ihnen alles zu erklären, was Sie wissen möchten. Unmittelbar darunter müssen wir unsere Fragenkarten haben. Für unsere Fragen Karte, Wir müssen ein Rechteck erstellen. Klicken und ziehen Sie wie „Dies“. Ich werde meine Layoutraster einblenden. Die zweite Spalte von der linken Seite und die zweite Spalte von der rechten Seite, lassen Sie mich vergrößern. Die Breite ist auf 948 und die Höhe eingestellt, ich werde es auf 96 Pixel ändern. Dann, wie Sie vielleicht erraten, Wir müssen das gleiche Styling verwenden, die Wir für Diese Karten verwendet. Ich werde dieses „Rechteck“ auswählen, während es ausgewählt ist, klicken Sie mit der rechten Maustaste darauf und „Eigenschaften kopieren“. Wählen Sie dieses „Rechteck“, klicken Sie mit der rechten Maustaste darauf und „Eigenschaften einfügen“. Da gehen wir. Das einzige, was wir ändern müssen, ist der Eckenradius Betrag. Wie Sie sehen können, ist es auf 50. Aber es ist zu viel. Ich werde es auf 27 setzen. Wir brauchen eine Textebene und wir brauchen ein Symbol auf der rechten Seite. Lassen Sie mich eine Textebene erstellen und ich werde die Frage aus meiner Zwischenablage einfügen. Da gehen wir. Hier ist eine Frage. Was ist der Unterschied zwischen dem Entwurf und einem traditionellen Bankkonto? Lassen Sie mich den Textstil in H4 ändern. Sieht gut aus. Stellen Sie sicher, dass es vertikal mit unserer Karte ausgerichtet ist, und die linke Polsterung wird 30 Pixel wie Dies sein. Auf der rechten Seite, wie ich bereits erwähnt, Wir müssen ein Plus-Symbol platzieren. Öffnen Sie bitte den Ordner „Assets“, und im Ordner des Symbols finden Sie das Plus-Symbol, ziehen Sie es in Ihr Projekt und legen Sie es dort drüben ab. Es ist richtig Polsterung wird 30 Pixel sein. Stellen Sie sicher, dass sie vertikal an der Mitte Ihrer Karte ausgerichtet ist. Wählen Sie sowohl Ihr Symbol als auch Ihre Karte aus und richten Sie es vertikal aus. Da gehen wir. Unsere Karte ist fertig. Es war so einfach, nicht wahr? Nun, wählen wir sie alle aus, gruppieren sie, und ich werde es Frage nennen. Dann werde ich es duplizieren und nach unten ziehen. Der Rand zwischen ihnen wird 20 Pixel betragen. Jetzt werde ich die Frage in etwas anderes ändern. Lassen Sie mich diese Textebene auf der linken Seite ausrichten, und fügen Sie dann die Frage aus meiner Zwischenablage ein. Da gehen wir. Wer kann einen Kontoentwurf eröffnen? Noch einmal, duplizieren Sie es und verschieben Sie es nach unten, und ich werde die Frage ändern. Diesmal stellt sich die Frage, was ist, wenn ich Geld im Ausland abziehe. Ich werde es noch einmal duplizieren, es nach unten verschieben und die Frage in etwas anderes ändern. Kann ich mein Abonnement jederzeit kündigen oder zu einem anderen Tarif wechseln? Noch einmal, duplizieren Sie es, bewegen Sie es nach unten, und das ist unsere letzte Frage. Ich werde es sofort einfügen. Da gehen wir. Was passiert, wenn ich mehr als $250 auszahle? Natürlich können Sie voran gehen und ändern Diese Textebenen und diese Fragen. Es liegt ganz an dir. Unsere Fragen sind fertig. Jetzt werde ich sie alle auswählen, sie gruppieren und Fragen nennen. Es ist der obere Rand wird 120 Pixel wie Dies sein. Es ist ziemlich gut. Allerdings, wie Sie hier sehen können, Wir haben so viel leeren Raum und es ist nicht gut. Ich werde einige Hintergrundinformationen zu diesem Abschnitt hinzufügen, um irgendwie von dieser Mitgliedschaft Pläne Abschnitt zu Diese FAQ Abschnitt übertragen. Ich werde Ihnen eine sehr coole Technik zeigen, um erstaunliche Hintergründe zu schaffen. Wählen wir das Zeichenstift-Werkzeug aus. Klicken Sie irgendwo wie hier. Jetzt haben Sie gerade eine Notiz erstellt, klicken Sie an eine andere Stelle und ziehen Sie sie. Achten Sie darauf, klicken und ziehen Sie wie Dies, um eine gekrümmte Linie zu erstellen, und ich werde klicken und ziehen Sie wie Dies. Perfekt. Jetzt werde ich es nach unten verschieben, und lassen Sie uns seine Farbe in unsere sekundäre Lichtfarbe ändern, und öffnen Sie dieses Menü, gehen Sie zu Plugins. Dieses Mal werde ich ein cooles Plugin namens Looper verwenden. Wenn Sie es noch nicht installiert haben, stellen Sie sicher, dass Sie zu Verwalten Plugins gehen, dann gehen Sie zur Community, wie ich Ihnen bereits gezeigt habe, und suchen Sie nach dem Looper Plugin, installieren Sie es und jetzt können Sie es ausführen. Mit diesem Plugin können Sie Ihre Objekte iterieren. Beispielsweise können Sie eine Form wie Diese Linie erstellen, und dann können Sie einige Werte wie Iterationen, Position, Skalierung, Deckkraft, gerade Farbe festlegen , und dann werden coole Formen und Diagramme erstellt. Versuchen wir es mal. Denn jetzt werde ich die Einstellungen behalten, wie sie sind. Die Iteration wird auf 20 gesetzt, die Position x ist 0, y ist 10 und der Winkel ist fünf. Die Skala beträgt 10, die Deckkraft beträgt 80 Prozent. Klicken wir auf „Erstellen“. Siehst du, wie erstaunlich es ist? Jetzt könnten Sie leicht einen sehr coolen Hintergrund mit diesem Plugin erstellen. Drücken Sie „Befehl Z“ oder „Control Z“, um den Vorgang rückgängig zu machen. Ich werde diese Werte ändern. Ich werde die Iterationen auf 15 und auch die Skala auf fünf ändern. Sieht gut aus. Wie Sie sehen können, hat es eine Gruppe für uns geschaffen. Ich werde es BG-2 nennen und sicherstellen, dass diese BG-2-Gruppe den ganzen Weg nach unten bewegen, wie dies, bewegen Sie es nach unten, ziemlich cool. Dann kann ich „K' auf meiner Tastatur drücken und etwas skalieren. Fantastisch. Wie Sie sehen können, hier, Wir haben kein gutes Kontrastverhältnis. Was ich tun werde, ist, diese Deckkraft im Ebenenabschnitt auf 20 Prozent zu verringern , wie dies. Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich sehe dich im nächsten Video. 107. Fußer: Hey, willkommen zurück. In diesem Video werden wir die Gestaltung unserer Lernseite zusammen beenden. Das letzte, was wir entwerfen müssen, ist die Fußzeile. Sie finden eine Website-Fußzeile in der Regel am Ende der Website. Es besteht aus einem Copyright-Haftungsausschluss, einigen relevanten Ressourcen, und auch Sie könnten einen Call to Action wie ein Newsletter-Abonnement und das Logo des Unternehmens haben . Wir werden es so einfach halten. Werfen wir einen Blick auf unseren Wireframe. Wie Sie sehen können, haben wir neun verschiedene Links. Wir haben ein Logo und einen Text, was unsere Urheberrechtsvermerk ist. Ohne weitere Umschweife, lasst es uns loslegen. Zuallererst müssen wir ein Rechteck als Hintergrund unserer Fußzeile erstellen, wie folgt. Ich werde die Höhe auf 440 setzen, und dann werde ich den Farbcode in DC, E2 und F0 ändern , um ein gutes Kontrastverhältnis mit der Hintergrundfarbe zu erstellen. Jetzt müssen wir unser Logo hier platzieren. Ich werde nach oben scrollen. Da gehen wir. Hier ist unser Logo. Kopieren Sie es, scrollen Sie nach unten und fügen Sie es hier ein. Ich werde „K“ auf meiner Tastatur drücken, um es zu skalieren. Ich denke, es ist zu viel. Lass es uns so etwas machen. Ich werde die Breite auf 80 ändern. Es ist cool. Lassen Sie mich meine Layoutraster einblenden. Ich werde es hier in der zweiten Spalte platzieren und direkt darunter, wir müssen unseren Copyright-Hinweis haben, also werde ich eine Textebene erstellen und schreiben Copyright und ein Copyright Zeichen 2020 Draft, LLC. Schreiben wir, alle Rechte vorbehalten. Wenn Sie nicht wissen, wie Sie dieses Copyright-Zeichen eingeben, können Sie die Optionstaste auf Ihrer Tastatur gedrückt halten, wenn Sie ein Mac-Benutzer sind und „G“ drücken. Wenn Sie ein Windows-Benutzer sind, müssen Sie die Alt-Taste gedrückt halten und die Nummer 0169 eingeben. Wenn Sie keine Tastatur auf Ihrer Tastatur haben, können Sie nach Copyright-Zeichen in Google suchen und Sie werden so etwas finden, und Sie können es auswählen, esist eine gute Technik, ist eine gute Technik, kopieren Sie es und kommen Sie hierher und fügen Sie es ein. Das ist alles. Es macht das Gleiche. Jetzt werde ich den Textstil zu kaufen ändern und lassen Sie mich die Farbe auf Sekundärlicht ändern. Endlich werde ich es ausrichten. Wie Sie hier sehen können, bekomme ich 30.67. Das Problem ist mit der Rahmengröße meines Logos. Da ich es skaliert habe, bekam ich keine gerundete Zahl. Mach dir keine Sorgen darüber. Es ist völlig in Ordnung. Um das zu beheben, können Sie Ihre Rahmengröße ändern, aber im Moment werden wir es so lassen, wie es ist. Das nächste, was wir erstellen müssen, sind unsere Links. Lassen Sie mich eine neue Textebene erstellen. Hier werde ich Team schreiben und es wird Körper/Haupt sein, also ist es in Ordnung, und seine Farbe wird sekundär dunkel sein, so. Lassen Sie mich es auf die linke Seite bewegen. Ich werde es duplizieren, es nach unten bewegen. Hier, ich werde schreiben, drücken. Noch einmal, duplizieren Sie es, bewegen Sie es nach unten. Hier werde ich Gebühren schreiben. Jeder von ihnen ist ein Link. Die Polsterung zwischen ihnen wird 44 Pixel betragen, so. Ziemlich cool. Ich werde sie nach oben bewegen, duplizieren, sie auf die rechte Seite verschieben und hier werde ich Dienste schreiben. Dann werde ich Projekte schreiben. Die letzte, ich werde Affiliate schreiben. Wieder einmal müssen wir sie auswählen, duplizieren, sie auf die rechte Seite verschieben und hier werde ich Nutzungsbedingungen schreiben. Für die zweite, werde ich Datenschutzrichtlinie schreiben, und dann werde ich schreiben, kontaktieren Sie uns. Perfekt. Wählen Sie diese drei ersten Verknüpfungen aus, gruppieren Sie sie und wählen Sie dann die zweiten Spaltenverknüpfungen aus. Gruppieren Sie sie wieder und die letzte, und wählen Sie jetzt alle drei Gruppen aus. Ich werde voran gehen und horizontalen Abstand zwischen ihnen verteilen , die ich leicht die Polsterung dazwischen ändern kann. Die Polsterung zwischen ihnen wird 110 Pixel wie folgt sein. Sie können es auch über den Inspektor ändern. Dann gruppieren Sie sie, nennen wir es Links. Ziemlich gut. Nun, lassen Sie mich es auf die rechte Seite wie folgt setzen, und dann werde ich unser Rechteck, diesen Hintergrund auswählen und es vertikal an der Mitte ausrichten und auch, wir müssen diesen Copyright-Hinweis auswählen, halten Sie die „Shift „und wählen Sie unser Logo aus, gruppieren Sie es und wählen Sie unser Rechteck aus und richten Sie es auch vertikal aus. Ziemlich gut. Zu guter Letzt müssen wir all diese Elemente auswählen, sie gruppieren, und wir werden es Fußzeile nennen. Perfekt. Wir haben hier ein kleines Problem und das heißt, wir haben nicht so viel Leerzeichen, also müssen wir es beheben. Es ist auf 68 Pixel eingestellt, aber ich werde es auf 160 Pixel setzen. Ich werde „Landing Page“ auswählen und die Höhe so erhöhen. Bewegen Sie es nach unten. Mal sehen. Es ist zu viel. Ich werde es verringern. Jetzt habe ich 169, also werde ich die „Landing Page“ auswählen und hier für die Höhe schreibe ich minus neun wie folgt und verschiebe diese Fußzeile nach oben. Da gehen wir. In Ordnung, Jungs. Das ist alles für dieses Video. Unsere Landing Page ist endlich fertig, und jetzt lassen Sie uns eine Vorschau zusammen. Bist du bereit? Lass uns gehen. Ziemlich cool. Hier ist unser Heldenbereich. Ich werde nach unten scrollen. Alles klar Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 108. Prototyping: Hey, willkommen zurück. Jetzt, da unsere Landing Page fertig ist, erstellen wir einen voll funktionsfähigen Prototyp für unsere Website. Ohne weitere Umschweife, lasst uns anfangen. Werfen wir einen Blick auf unsere Landing Page. In der Tat werden wir einige unserer Elemente Interaktivität hinzufügen. Wenn du zu den Plänen gehst, werde ich hineinzoomen. Zuallererst denke ich, dass es eine gute Idee ist, den Hover-Status zu dieser Schaltfläche „Erste Schritte“ hinzuzufügen. Wenn der Benutzer den Mauszeiger über diese Schaltfläche bewegt, wird er geändert. Das nächste, was wir hinzufügen müssen, ist die leichte Version dieser Kreditkarte. Wie Sie hier sehen können, haben wir zwei verschiedene Themen hinzugefügt, und wenn der Benutzer auf das Lichtthema klickt, sollte diese Kreditkarte geändert werden. guter Letzt fügen wir unseren Q&A-Karten Interaktivität hinzu. Wie Sie hier sehen können, möchten wir einen Akkordeoneffekt erzeugen. Wenn der Benutzer auf eine dieser Karten klickt, sollte die Höhe dieser Karten erweitert werden und der Text, der sich auf diese Karte bezieht, angezeigt werden. Das ist alles. Um diese drei Interaktionen zu unserer Landing Page hinzuzufügen, müssen wir zunächst unsere Landing Page auswählen, wir müssen sie duplizieren, Befehl D oder Kontrolle D. Grundsätzlich haben wir hier eine Kopie unserer Landing Page. Jetzt werde ich so vergrößern, stellen Sie sicher, dass Sie die Gruppe Erste Schritte auswählen, dann gehen Sie zum Inspektor und gehen Sie zur Registerkarte Prototyp oben. Wie Sie sehen können, wird beim Vergrößern ein Kreis auf Ihren Elementen wie diesem mit einem Plussymbol angezeigt. Ich möchte, dass Sie klicken und ziehen, um diese Pfeillinie zu erstellen und dieses Element mit Ihrer zweiten Landing Page zu verbinden, die wir gerade kopiert haben. So wie das. sind diese beiden Landing Pages miteinander verbunden. Die linke Seite, die die erste Landingpage ist, ist der Anfang der Animation. Es funktioniert als Auslöser. Wenn der Benutzer auf diese Schaltfläche klickt, die Animation gestartet, und die zweite Landingpage ist das Ende dieser Animation, okay? Die letzte Etappe. Was auch immer dazwischen geschieht, wird automatisch von Figma gehandhabt. Sie müssen sich keine Gedanken über das Erstellen einer bestimmten Animation machen. Alles wird von Figma gehandhabt. Jetzt werde ich diese Interaktionsdetails schließen Pop-up. Ich werde hineinzoomen, und hier werden wir unsere Taste ändern. Ich werde das auswählen, doppelklicken Sie darauf, und ich werde das Rechteck auswählen. Lassen Sie uns auf die Registerkarte Design gehen und ich werde den Kontur entfernen und stattdessen eine Füllung hinzufügen, und ich werde die gleiche Farbe wählen, sekundäre dunkel. Stellen Sie sicher, dass Sie die Farbe Ihrer Textebene von sekundären dunkel zu weiß ändern , okay? Ziemlich gut. Nun gehen wir zu Prototype und ich werde meine erste Schaltfläche auf der ersten Landing Page auswählen. Wie Sie hier sehen können, haben wir den Abschnitt Interaktionen. Wenn Sie hier klicken, wird dieses Fenster geöffnet, und hier können Sie die Einstellungen für Ihre Interaktion und Animation festlegen. Für den Auslöser, der der erste Teil ist, werde ich dieses Drop-Menü öffnen. Standardmäßig ist er auf Bei Klick eingestellt. Sie haben verschiedene Optionen wie beim Ziehen, beim Schweben, beim Drücken usw. Ich gehe mit, während Sie schweben, und im Abschnitt Animation können Sie dieses Dropmenü öffnen und Sie haben auch verschiedene Optionen hier. Sie können mit Instant gehen, Sie können mit Auflösen gehen, Sie können mit Smart Animate gehen. Ich würde vorschlagen, dass Sie Smart Animate verwenden sollten. Anschließend können Sie den Animationstyp angeben. Wie beim Ein- und Auslassen, Ein- und Auslassen. Vorerst spielt es keine Rolle. Außerdem können Sie die Dauer der Animation angeben, und ich werde es so belassen, wie es ist. Lassen Sie mich dieses Fenster schließen, und im Grunde ist das alles. Lassen Sie uns eine Vorschau auf unseren Prototyp. Ich werde nach unten scrollen. Wenn der Benutzer den Mauszeiger über diese Schaltfläche bewegt, können Sie sehen, dass sich das Erscheinungsbild sofort ändert, wie folgt. Es ist ziemlich gut, nicht wahr? Aber es funktioniert nicht mit der anderen Taste. Sie können voran gehen und es hinzufügen, wenn Sie möchten. Aber für dieses Tutorial möchte ich Ihnen nur zeigen, wie die Interaktionen funktionieren. Jetzt gehen wir weiter und versuchen, unsere Kreditkartenabschnitt zu animieren. Ich werde hier hineinzoomen. Was haben wir? Wie Sie sehen können, ist unsere Anfangsphase diese dunkle Karte. Wir müssen die Interaktion zu diesem Lichtkreis hinzufügen. Jetzt müssen wir fortfahren und unsere erste Landing Page auswählen, die unsere Haupt-Landing Page ist. Noch einmal duplizieren Sie es, Befehl D oder Kontrolle D, ziemlich gut, und dann werde ich hier hineinzoomen. Wir müssen auf diesen Lichtkreis doppelklicken und versuchen diesen Kreis mit der Zielseite zu verbinden, die wir gerade dupliziert haben. So, perfekt. Für diese Interaktion werde ich es auf „On Click“ und „Smart Animate“ setzen. Das ist alles. Was sollen wir hier ändern? Wir müssen zwei Dinge ändern. Erstens, das Aussehen der Kreditkarte, weil es leicht sein sollte. Zweitens sollten wir diesen Schlag auf die rechte Seite bewegen. Fangen wir mit diesem Schlaganfall an. Ich wähle das aus, schiebe es auf die rechte Seite und stelle sicher, dass es mit deinem inneren Kreis ausgerichtet ist. Perfekt. Dann werde ich das Aussehen dieser Kreditkarte ändern. Gehen wir zur Registerkarte Design, zuerst beginnen wir mit dieser dunklen Farbe. Ich wähle Star 3 so und lasse mich seine Farbe in Sekundärlicht ändern. Dann werde ich Star 4 auswählen, und ich werde diesen Akzent auf neutral, ziemlich gut ändern. Dann werde ich meine Textebenen auswählen und ihre Farbe in sekundäre Dunkelheit ändern, wie diese, und wir sind fertig. Lassen Sie uns voran gehen und versuchen Sie es. Ich wähle meine erste Landingpage aus und lass uns eine Vorschau anzeigen. Scrollen wir nach unten. Unsere Schaltfläche „Erste Schritte“ funktioniert perfekt. Dann werde ich auf diesen Lichtkreis klicken. Da gehen wir. Hast du diese schöne Animation gesehen? Wir können jedoch nicht zum ersten Zustand zurückkehren , weil wir diese Interaktion noch nicht hinzugefügt haben. Gehen wir weiter und fügen Sie das hinzu. Was wir hier erreichen müssen, ist, dass, wenn der Benutzer auf dieses dunkle Thema klickt, alles, was wir geändert haben, umgekehrt werden sollte. Wir müssen diesen dunklen Kreis verbinden. Gehen wir zum Prototyp. Wir müssen es mit unserer ersten Landing Page wie folgt verbinden, und wir sind gut zu gehen. Lassen Sie uns noch einmal eine Vorschau anzeigen. Ich werde nach unten scrollen. Versuchen wir es mal. Ich werde auf diesen Lichtkreis klicken, da gehen wir, und dunkel. Können Sie sehen, wie schön und einfach es ist, diese Art von Interaktionen zu schaffen? Das ist erstaunlich. Das Letzte, was wir tun müssen, ist Interaktion zu unseren Q&A-Karten hinzuzufügen. Ich werde die Interaktion nur der ersten Karte hinzufügen. Für das Endprodukt können Sie jedoch voran gehen und die Interaktion allen hinzufügen, wenn Sie möchten. Aber vorerst werde ich die Interaktion nur der ersten Karte hinzufügen. Was brauchen wir? Zuallererst müssen wir unsere erste Landing Page auswählen und wir müssen sie duplizieren, Befehl D oder Kontrolle D, ziemlich gut. Jetzt gehe ich voran und wähle unsere erste Karte auf unserer ersten Landing Page aus. Während wir auf der Registerkarte Prototyp sind, wähle ich diese Karte aus und verbinde sie mit unserer letzten Landing Page, die wir gerade dupliziert haben, so. Für die Interaktion wähle ich Bei Klick und Animation sollte Smart Animate sein, so dass wir nichts ändern müssen. Dann werde ich vergrößern und versuchen, unsere letzte Landing Page zu ändern. Was sollen wir hier ändern? Zuallererst müssen wir die Höhe dieser Karte ändern. Ich gehe auf die Registerkarte Design und ich werde diese Karte auswählen, Sie können die Befehlstaste oder die Strg-Taste auf Ihrer Tastatur gedrückt halten und auf diese Karte klicken, um sie auszuwählen. Alternativ können Sie fortfahren und versuchen, es in der Ebenenliste auszuwählen. Es liegt ganz an dir. Dann werde ich die Höhe dieser Karte auf 200 Pixel erhöhen. Schließlich werde ich alle anderen Fragen auswählen und sie nach unten verschieben und sicherstellen, dass die 20-Pixel-Polsterung zwischen ihnen so aufrechterhalten wird. guter Letzt Zuguter Letztmüssen wir den oberen Rand von 160 Pixeln für diese Fußzeile beibehalten. Wie Sie jetzt sehen können, habe ich 56 Pixel. Wie kann ich das beheben? Es ist so einfach. Wir sollten unsere Landing Page auswählen, und hier für die Höhe werde ich schreiben plus, da ich 56 Pixel habe und ich 160 bekommen muss, werde ich 104 so schreiben, und schließlich wählen Sie Ihre Fußzeile und bewegen Sie es nach unten, und da gehen wir. Wir haben 160 Pixel. Perfekt. Was sollte hier noch geändert werden? Wenn diese Karte geöffnet ist, sollte dieses Plus-Symbol durch ein Minus-Symbol ersetzt werden. Ich gehe voran und wähle diese vertikale Linie aus und entferne sie. guter Letzt müssen wir hier unsere Textzeile hinzufügen. Hier haben wir eine Frage und dann müssen wir die Antwort für diese spezifische Frage hinzufügen. Moment werde ich eine Lorem Ipsum Textebene hinzufügen, weil die Antwort keine Rolle spielt. Aber wenn Sie an einem echten Word-Projekt arbeiten, stellen Sie sicher, dass Sie echte Antworten hinzufügen. Ich drücke „T“ auf meiner Tastatur und klicke auf, um eine Textebene zu erstellen, und dann werde ich den Text aus meiner Zwischenablage einfügen. Für diese Textebene werde ich Body/Main verwenden. Lassen Sie mich abschließend den Farbstil in Secondary/Light ändern. Ziemlich gut. Lassen Sie mich die Breite dieser Textebene verringern. Ich werde so hineinzoomen, lass es mich nach oben bewegen. Stellen Sie sicher, dass Sie diese Textebene in diese Kartengruppe legen, okay? Dies ist unsere Fragekarte, und ich werde diese Textebene verschieben und in diese Gruppe einfügen. Die obere Polsterung sollte 10 Pixel betragen, die linke Polsterung sollte 30 sein. Wir sind fast fertig. Das letzte, was wir tun müssen, ist, diese Karte mit unserer ersten Landing Page zu verbinden. Denn wenn der Benutzer hier auf diese erste Karte klickt, wird sie geöffnet werden. Wenn er es jedoch schließen möchte, müssen wir es auch mit unserer ersten Landing Page verbinden. Ich werde diese Fragekarte auswählen, stellen Sie sicher, dass Sie Ihre Fragengruppe auswählen, gehen Sie auf die Registerkarte Prototyp und verwenden Sie diesen Kreis, versuchen Sie, es mit Ihrer ersten Landing Page zu verbinden, und wir sind fertig. Lassen Sie uns unsere erste Landing Page auswählen und versuchen, sie in der Vorschau anzuzeigen. In Ordnung, lass mich nach unten scrollen. Versuchen wir es mal. Ich werde auf die erste Karte klicken, Dort gehen wir. Hast du gesehen, wie schön diese Interaktion war? Ich kann es so schließen. Figma ermöglicht es Ihnen, innerhalb weniger Minuten komplexe und erstaunliche Interaktionen zu erstellen. Sie müssen nicht mit komplexer Software arbeiten , um einen High-Fidelity-Prototyp zu erstellen. Alles klar, Leute, es war eine lange Reise zusammen, ich hoffe, ihr hat diesen Abschnitt genossen und ich werde euch dort sehen. 109. Logotypen: Hallo, alle. In diesem Abschnitt werden wir unser Logo entwerfen, und in diesem Video werden wir über sieben verschiedene Arten von Logo-Design sprechen. Ohne weitere Umschweife, lasst uns anfangen. Der erste Logo-Typ wird Monogramm genannt, oder Sie können Buchstaben sagen. Hier haben wir verschiedene Logos als Beispiele, wie HBO, das für Home Box Office steht. Wie Sie sehen können, haben wir hier nur Briefe. Sie sind buchstabiert und vertreten ihr Unternehmen. Der zweite Typ wird Wortmarken genannt, oder sagen wir Logotypen. Sie sind tatsächlich ähnlich wie ein Buchstabenzeichen. Eine Wortmarke konzentriert sich jedoch auf einen Firmennamen, wie Google, Canon oder Jeep. Der nächste Logo-Typ wird als abstrakte Logo-Markierungen bezeichnet, wie Pepsi, Nike oder BP, wie Sie hier sehen können. In der Tat ist eine abstrakte Marke eine Art bildliches Logo. Der nächste Logo-Typ wird als Bildmarken oder Logo-Symbole bezeichnet, wie Apple-Logo, Twitter und andere bekannte Marken. Eigentlich ist eine Bildmarke einfach ein Symbol, das die Eigenschaften des Unternehmens darstellt. Der nächste Logo-Typ sind Maskottchen. Maskottchenlogos sind Logos, die einen illustrierten Charakter nach 99designs.com beinhalten. Wenn Sie mehr Informationen über Logotypen und wie Sie sie verwenden möchten, können Sie sich ihren großartigen Artikel auf ihrer Website ansehen. Der nächste Logo-Typ sind Kombinationsmarken, und das ist das Logo, das ich Ihnen beibringen werde, wie Sie erstellen können. In diesem Logotyp finden Sie einen Buchstaben, der mit einer Illustration oder einer bestimmten Form kombiniert wird. Zu guter Letzt Emblem-Logos. Ein Emblem-Logo besteht aus einer Schriftart innerhalb eines Symbols oder einem Symbol wie dem Starbucks Logo. Vielen Dank, dass Sie sich dieses Video ansehen. In der nächsten Reihe von Videos werden wir vier verschiedene Logos erstellen. Stellen Sie sicher, dass Sie das Starter-Projekt herunterladen, weil ich bereits die Farben für Sie vorbereitet habe, um Ihre Zeit zu sparen. Sie können die Datei aus dem Ressourcenbereich der nächsten Vorlesung herunterladen. 110. Unser erstes Logo entwerfen: Hallo, alle? Willkommen zurück zu einem weiteren Video von diesem Kurs. In diesem Video werden wir anfangen, unser erstes Logo zu entwerfen. Das Logo, das ich für dieses Tutorial gewählt habe, ist das Figma-Logo, das ziemlich interessant und gleichzeitig ziemlich einfaches Logo ist. Zuallererst brauchen wir eine Zeichenfläche. Lassen Sie uns „A“ drücken und ich werde MacBook Pro wählen, dann werde ich die Höhe meiner Zeichenfläche vergrößern. So, ziemlich gut. Ich habe bereits die Vermögenswerte für Sie vorbereitet, die Sie aus der Asset-Vorlesung dieses Abschnitts herunterladen können. Zuerst werde ich das Figma-Logo platzieren, wie Sie im Assets-Ordner sehen können, da ist das FIGMA-Logo, ziemlich gut und dann werden wir das gleiche Logo zusammen entwerfen. Wie Sie sehen können, besteht dieses Logo aus verschiedenen einfachen Formen. Zum Beispiel haben wir hier ein Quadrat mit zwei abgerundeten Ecken, auch hier. Hier haben wir jedoch das gleiche Quadrat mit drei abgerundeten Ecken, und hier haben wir einen einfachen Kreis. Lassen Sie uns zunächst ein Rechteck hier einfügen. Ich werde Shift halten, um ein Quadrat zu erstellen, und dann werde ich die Breite und Höhe auf 200 einstellen. So, es ist ziemlich gut, bewegen wir es auf die rechte Seite. Jetzt muss ich diese beiden Ecken abrunden. Ich werde auf unabhängige Ecken wie diese klicken, und lassen Sie uns die obere linke Ecke Radius auf 100 und untere linke Ecke Radius auf 100 als auch setzen , und wie Sie sehen können, haben wir die gleiche Form wie das Logo der Figma. Jetzt müssen wir die Augentropfer in den Feldern Abschnitt verwenden , um die gleiche Farbe zu wählen, ziemlich gut. Dann müssen wir es duplizieren, und ich werde mit der rechten Maustaste darauf klicken, und lasst uns auf die horizontale Flip klicken. Ich werde es auf die rechte Seite bewegen, ziemlich gut, dann müssen wir seine Farbe so ändern, ziemlich fantastisch. Lassen Sie uns nun unser erstes Rechteck verwenden. Duplizieren Sie es, ich werde es nach unten bewegen, ziemlich genial. Noch einmal muss ich die Farbqualität ändern, und jetzt brauchen wir einen Kreis. Lassen Sie uns Kreis aus dem Shape-Menü wählen. Ich werde „Shift“ halten und einen Kreis erstellen. Allerdings mit der gleichen Breite und mit der gleichen Höhe. Es wird 200 mal 200 Pixel so sein, und ich werde die Farbe in dieses Blau ändern. Noch einmal, lassen Sie uns dieses Rechteck duplizieren. Ich werde es nach unten verschieben, und jetzt muss ich den Radiusbetrag dieser unteren rechten Ecke ändern. Hier im Inspektor, werde ich es auch auf 100 setzen. Last but not least, lasst uns seine Farbe ändern. Fantastisch. Haben Sie gesehen, wie einfach es ist, ein Logo in Figma zu entwerfen? Jetzt werde ich unsere Ebenen auswählen, ich werde sie gruppieren, und nennen wir es Figma neu. Sie können diesen entfernen und das ist alles. Alles klar Jungs, das ist alles für dieses Video, ich hoffe, es hat euch gefallen und ich werde euch im nächsten Video sehen. 111. Unser zweites Logo entwerfen: Hallo, alle und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir gemeinsam unser zweites Logo entwerfen, das für eine imaginäre Marke namens Clock gilt. Ohne weitere Umschweife, lasst uns anfangen. Zunächst werde ich ein Rechteck einfügen und ich werde „Shift“ halten, um ein Quadrat zu erstellen. Ziemlich nett. Setzen wir es auf 200 mal 200, so. Dann werde ich den Eckenradius von drei Ecken erhöhen. Ich muss die obere linke Ecke auf 100 ändern, die obere rechte Ecke auch auf 100 und die untere linke Ecke auf 100, so. Danach werde ich den Farbcode auf 00D179 setzen, wie folgt. Lassen Sie mich hineinzoomen. Nun, ich muss hier einen Kreis einfügen. Ich werde „Shift“ halten. Ziemlich nett. Dann werde ich dafür einen Gradienten verwenden, den linearen. Lassen Sie uns die erste Farbe auf die gleiche Farbe setzen wie wir für unser Hauptquadrat haben. Die zweite Farbe wird ein wenig dunkler sein, also versuchen wir es 038750, und ich werde die Deckkraft auf 100 erhöhen, so. Dann lasst uns die Richtung ändern, um so etwas zu bekommen. Ziemlich nett, nicht wahr? Jetzt werde ich es ein wenig skalieren. Lassen Sie uns auf diese „Move Tools“ klicken und hier werde ich Scale wählen. Sie könnten auch „K“ auf Ihrer Tastatur drücken und ich werde „Shift“ halten. Lasst es uns skalieren. Ziemlich nett. Setzen wir es auf 176 mal 176, und die Polsterungen werden 12 sein, wie Sie sehen können. Dann werde ich auf diesen Bogenkreis klicken, und ich werde „Shift“ so halten. Ziemlich nett. werde ich es um 90 Grad drehen. Wie Sie sehen können, bekomme ich so etwas. Ich muss jedoch die Richtung meines Gradienten ändern. Lassen Sie uns diese Handle-Controller verwenden, um so etwas zu erhalten. Siehst du, dass ich hier eine Uhr geschaffen habe? Es ist ziemlich genial, nicht wahr? Dann werde ich einen Text hinzufügen und die Schriftart ist Roboto. Lasst uns Clock schreiben. Es wird 80 Punkte sein. Ich werde die Farbe auf das gleiche Grün ändern. Lassen Sie es uns ausrichten. Seine linke Polsterung wird 16 Pixel wie folgt sein. Jetzt werde ich sie gruppieren. Nennen wir es Clock. Das ist alles. Haben Sie gesehen, wie einfach es ist, einfache Formen zu verwenden, um erstaunliche Logos zu erstellen? Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 112. Unser drittes Logo entwerfen: Hallo, alle, willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir gemeinsam unser drittes Logo entwerfen, das wiederum eine imaginäre Marke namens Moon ist . Es wird so interessant sein, und wir werden es so schnell erstellen. Zuallererst muss ich einen Kreis einfügen. Ich werde Shift so halten. Dann muss ich das duplizieren, und lass es uns ein wenig auf die rechte Seite bewegen, so wie hier. Danach werde ich beide auswählen und boolesche Operationen verwenden. Wählen wir „Auswahl subtrahieren“ und dann gehen wir. Wir haben gerade unseren Mond erschaffen. Jetzt werde ich es ein wenig nach links drehen, so wie hier. Ich werde es jedoch ändern. Um das zu ändern, kann ich Zugriff auf Sublayer erhalten, indem ich diese Gruppe öffne und dort gehen wir. Ich werde den oberen Kreis wählen und ihn ein wenig auf die rechte Seite bewegen. Ziemlich genial. Dann ändern wir die Farbe in Schwarz. Danach werde ich Moon schreiben. Ändern wir jedoch die Schriftart in Montserrat und das Gewicht wird regelmäßig sein. Es wird 80 Punkte sein. Ich werde meinen Mond so herunterskalieren. Lassen Sie uns die Breite auf 130 setzen und ich werde sie ausrichten. Wie Sie jedoch sehen können, scheint es, dass sie nicht perfekt ausgerichtet sind. Denn manchmal müssen Sie sie manuell ausrichten , um eine große visuelle Balance zu erhalten. Ich werde den Mondtext ein wenig auf die rechte Seite verschieben. Jetzt finde ich es großartig. Lass es uns nach oben bewegen. Ziemlich erstaunlich. Ich werde sie gruppieren, und ich werde sie Mond nennen. Alles klar, Leute, das ist alles für dieses Video. Sie haben gelernt, wie Sie Ihr eigenes Logo einfach in Figma mit einfachen Formen erstellen können . Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 113. Einführung in Adobe Photoshop: Hallo an alle. Willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Abschnitt werden wir über Adobe Photoshop sprechen. Obwohl ich bereits erwähnt, dass Adobe Photoshop keine gute Software für die Gestaltung der Benutzeroberfläche ist , ist es gut, mit Adobe Photoshop-Umgebung vertraut zu sein und auch die Grundlagen von Photoshop für die Vorbereitung unserer Bilder manchmal oder sogar die Bearbeitung unserer Dateien. Im nächsten Video beginnen wir unsere Lektion mit den Umgebungen von Adobe Photoshop. Wir sehen uns dann. 114. Umwelt von Adobe Photoshop: Hallo an alle. In diesem Video werden wir über die Umgebungen von Adobe Photoshop sprechen. Lassen Sie uns ohne weiteres unseren Adobe Photoshop öffnen. Wie Sie sehen können, verwende ich Adobe Photoshop Version CS6. Es spielt keine Rolle, welche Version Sie gerade verwenden , denn wir werden uns nur auf die Grundlagen konzentrieren und ich kann Ihnen versichern, dass fast alle Elemente in allen Versionen gleich sind, aber es wäre toll, auch die neueste Version zu verwenden. Hier in Adobe Photoshop können wir diese Umgebungen in verschiedene Abschnitte unterteilen. Zum Beispiel können Sie auf der linken Seite sehen, dass es das Tools-Panel gibt und hier gibt es alle Werkzeuge, die wir brauchen, um unsere Bilder zu bearbeiten oder sogar ein Grafikdesign zu erstellen. Auf der rechten Seite können Sie sehen, dass es mehr Panels gibt, zum Beispiel hier haben wir das Ebenenfenster, das eines der wichtigsten Panels in Adobe Photoshop ist und auch wir haben Anpassung, Farben usw. Aber das wichtigste Panel hier ist das Bedienfeld „Extras“. Alles klar, Jungs, vielen Dank, dass Sie dieses Video gesehen haben. Im nächsten Video werden wir über die Grundlagen von Adobe Photoshop sprechen und wie Sie diese Tools verwenden können. Wir sehen uns im nächsten Video. 115. Grundlagen von Adobe Photoshop: Hallo an alle, willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video werden wir über die Grundlagen von Adobe Photoshop sprechen. Wie ich im vorherigen Video erwähnt, werden wir verschiedene Panels in Adobe Photoshop wie Werkzeug-Panel, Ebenen-Panel, Farben, Anpassung, etc.verwenden Ebenen-Panel, Farben, Anpassung, etc. Aber zuerst brauchen wir eine Leinwand oder sagen wir eine Seite für beginnen unser Projekt mit. Um dies zu tun, Sie können entweder gehen, um Datei und klicken Sie auf neue, oder Sie können Befehl und N auf Mac-Systemen oder Steuerung und N unter Windows drücken. Hier, wie Sie sehen können, gibt es ein Fenster, in dem Sie die Dimension Ihrer Zeichenfläche auswählen können. Zum Beispiel können wir hier die Breite auf 1920 und stellen Sie sicher, dass es auf Pixel und die Höhe auf 1080 eingestellt ist, und wie Sie seine Pixel sehen können. Ich werde die Auflösung auf 72 ändern, weil es für Computerzwecke und den Farbmodus genug ist , müssen wir es auf RGB setzen, weil wir dieses Projekt auf Computer oder auf Bildschirmen präsentieren werden . CMYK wird für Druckzwecke verwendet. Ich kann voran gehen und klicken Sie auf OK. Da gehen wir. Ihre Zeichenfläche ist fertig. Ich habe keinen bestimmten Namen dafür festgelegt, aber stellen Sie sicher, dass Sie Ihren gewünschten Namen festlegen. Jetzt werden wir über das Tools-Panel sprechen. Wie Sie hier sehen können, haben wir verschiedene Werkzeuge und verschiedene Abschnitte. Dieser wird als Verschiebenwerkzeug bezeichnet und dient zum Verschieben von Objekten oder Elementen auf Ihrer Leinwand oder Ihren Zeichenflächen. Der nächste ist das Auswahlwerkzeug. Zum Beispiel, lassen Sie mich hier eine neue Ebene erstellen. Wenn Sie eine neue Ebene erstellen möchten, können Sie einfach zum Layer-Abschnitt gehen und auf dieses Ebenen-Symbol klicken. Wie Sie sehen können, haben wir gerade einen neuen Layer erstellt. Dann werde ich das Auswahlwerkzeug verwenden, um einen bestimmten Bereich wie diesen auszuwählen und ich kann ihn mit jeder gewünschten Farbe füllen. Wenn ich die Farbe ändern möchte, kann ich auf diesen Abschnitt klicken und ich kann dieses Blau wählen. Lassen Sie mich den Pinsel auswählen, um ihn zu füllen. Mit diesem Move-Tool kann ich diese leicht bewegen. Das nächste Werkzeug wird als Auswahlwerkzeug bezeichnet. Jedes Werkzeug hier enthält einige versteckte Werkzeuge. Wie Sie sehen können, gibt es einen kleinen Pfeil in der unteren rechten Ecke jedes spezifischen Werkzeugs und Sie können sehen, dass es hier einige versteckte Werkzeuge gibt , aus denen Sie wählen können. Das nächste Werkzeug heißt magnetisches Lasso, und es ist auch für die Auswahl. Sie können ganz einfach einen bestimmten Bereich auswählen und den gewünschten Abschnitt von diesem bestimmten Bild trennen. Um die Auswahl aufzuheben, können Sie unter Windows Befehlstaste und D oder Steuerelement D drücken. Auch hier haben Sie verschiedene Lasso-Werkzeuge, und das ist der Zauberstab. Es ist zur Auswahl. Wir haben es auch in der Skizze, so dass es einen bestimmten Bereich magisch auswählen kann. Das nächste Werkzeug ist Beschneiden. Es dient zum Beschneiden Ihrer Zeichenflächen oder Ihres Bildes. Der nächste ist der Augentropfer. Sie können eine bestimmte Farbe eines Fotos oder eines Elements auswählen. Diese Werkzeuge sind für die Retusche. Wie Sie sehen können, haben wir Spot-Heilpinsel, Heilpinsel Werkzeug, Patch-Werkzeug, etc. Dann haben wir Pinsel, zum Beispiel kann ich die rote Farbe hier wählen. Wie Sie sehen können, kann ich hier frei malen, und wenn ich mit der rechten Maustaste klicke, kann ich die Größe und auch die Härte meines Pinsels ändern. Das nächste Werkzeug wird als Klon-Stempelwerkzeug bezeichnet. Es ist auch für die Retusche. arbeiten wir nicht viel. Dann haben wir Geschichte Pinsel Werkzeug und Radiergummi, dass Sie Ihre Malerei oder sogar einen bestimmten Bereich eines Bildes löschen können. Dann haben wir Farbverlauf wie dieses und Unschärfe-Tool zum Unschärfen eines Bildes oder eines bestimmten Teils eines Bildes. Dies ist das Ausweichwerkzeug und dient zum Bearbeiten der Helligkeit eines bestimmten Bereichs eines Bildes. Dann haben wir das Stift-Werkzeug, das ein sehr wichtiges Werkzeug in Adobe Photoshop ist. Mit dem Stiftwerkzeug können Sie einen bestimmten Bereich genau auswählen. Wenn ich mit der rechten Maustaste hier klicke, kann ich auf Auswahl treffen klicken, der Feeder-Radius wird Null sein, und lasst uns auf, okay. Da gehen wir. Nun, wenn ich das Pinselwerkzeug wähle, kann ich es mit roter Farbe wie folgt füllen. Der nächste ist das Type-Werkzeug zum Tippen und Erstellen von Text. Hier haben Sie verschiedene Möglichkeiten. Sie verfügen über einen horizontalen Typ, ein vertikales Werkzeug, ein horizontales Maskenwerkzeug und ein vertikales Maskenwerkzeug. Die meiste Zeit verwenden wir horizontale Typ-Werkzeug. Dieses Pfadauswahlwerkzeug, wir werden das nicht viel verwenden. Dann ist das abgerundete Rechteck-Werkzeug zum Erstellen verschiedener Formen. Zum Beispiel kann ich ein abgerundetes Objekt wie Dies erstellen , dann kann ich eine Auswahl mit Rechtsklick treffen, und jetzt kann ich es mit jeder gewünschten Farbe füllen, wie diese. Die nächste Option ist Handwerkzeug, und es ist zum Malen herum. Sie können es auch mit Halten von Platz auf Ihrer Tastatur präsentieren. Dann haben wir das Zoomwerkzeug, okay, um zu vergrößern und zu verkleinern. In Ordnung, Jungs. Konzentrieren wir uns nun auf den Ebenenabschnitt, um zu sehen, was wir dort haben. Wie Sie sehen können, wir haben gerade eine neue Ebene erstellt und wie ich bereits erwähnt, jedes Mal, wenn Sie eine neue Ebene wollen, Sie können einfach auf dieses Symbol klicken und es erstellt eine neue Ebene für Sie. Sie können den Namen des Layers ändern, indem Sie auf den Namen doppelklicken , und Sie können ihn ändern, was Sie wollen. Lassen Sie uns es in UI ändern. Perfekt. Jetzt werde ich hier eine andere Form mit den Auswahlwerkzeugen erstellen. Da gehen wir, und ich kann es bewegen. Wenn Sie eine Ebene ausblenden möchten, können Sie auf dieses i, Symbol klicken, wie in Sketch und denken Sie daran, dass die Reihenfolge der Platzierung Ihrer Ebenen in Adobe Photoshop so wichtig ist. Hier befindet sich die Benutzeroberfläche über diesem abgerundeten Rechteck. Wenn ich es oben auf dieses Rechteck schiebe, können Sie den Unterschied sehen. Ich werde die Farbe ändern, um es klarer zu machen. Wir können auch die Deckkraft hier von null auf 100 Prozent ändern. Die andere wichtige Sache in Adobe Photoshop ist das Ebenenformatfenster. Lassen Sie uns auf diese UI-Ebene doppelklicken. Wie Sie sehen können, erscheint ein Fenster, das als Layerseite bezeichnet wird. Hier haben Sie verschiedene Optionen zum Stylen Ihres Layers. Zum Beispiel haben wir hier Fülloptionen Standard, zum Beispiel können Sie die Deckkraft und den Mischmodus hier ändern. Sie haben diese Optionen direkt in diesem Fenster sowie Sie können sehen, dass Sie viele Optionen hier haben, haben Sie Schlaganfall. Zum Beispiel kann ich die Farbe in Rot ändern und die Größe vergrößern. Du hast inneren Schatten, du hast inneren Glanz, Farbüberlagerung, Farbverlauf und vieles mehr. Sie haben Schlagschatten auch hier so. Alles klar Leute, vielen Dank, dass du dieses Video gesehen hast. Ich hoffe, es hat Ihnen gefallen und im nächsten Video werden wir über die Verwendung von Adobe Photoshop für UI-UX-Design sprechen . So sehen wir uns dann. 116. Adobe Photoshop für UI/UX Design: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir über die Verwendung von Adobe Photoshop für UI/UX-Design sprechen . Als UI/UX-Designer müssen Sie Ihre Bilder möglicherweise bearbeiten, um sie in Ihrem Projekt richtig verwenden zu können. Es gibt einige Änderungen, die Sie in Figma nicht vornehmen können, und es ist ratsam, sie in Adobe Photoshop zu verarbeiten. In diesem Video werde ich Ihnen beibringen, wie Sie Adobe Photoshop zum Bearbeiten Ihrer Bilder verwenden können . Lassen Sie uns ohne weiteres unseren Adobe Photoshop öffnen. Wie Sie sehen können, habe ich ein Bild dieses Schuhs von unsplash.com heruntergeladen, um Ihnen zu zeigen, wie Sie jedes Objekt in Adobe Photoshop vom Hintergrund trennen können. Angenommen, Sie entwerfen eine Shopping-Anwendung und wir müssen einige Schuhe in unserer Einkaufsliste haben. In diesem Fall ist es besser, diesen Schuh vom Hintergrund zu trennen und ihn dann als PNG-Datei zu speichern, und dann können Sie ihn in Figma importieren. Es gibt verschiedene Möglichkeiten, das zu tun. Sie können verschiedene Auswahlwerkzeuge verwenden. Zum Beispiel können Sie den Zauberstab so verwenden. Es funktioniert in einigen Beispielen. Aber zuerst, lassen Sie mich Ihnen etwas zeigen. Wie Sie sehen können, wird diese Ebene als Hintergrund bezeichnet. Wir können nichts tun, wenn es gesperrt ist. Um das zu entsperren, können Sie auf diese Ebene doppelklicken, zum Beispiel, setzt einen Namen, es spielt keine Rolle, was es ist. Du kannst ihn auf Schuh setzen und jetzt ist er freigeschaltet. Sie können Änderungen vornehmen. Ich werde so auf „Löschen“ klicken. Wie Sie sehen können, haben wir hier keinen Hintergrund. Sie müssen jedoch sicherstellen, dass der Hintergrund vollständig entfernt wurde. Zum Beispiel hier, wie Sie sehen können, haben Sie etwas Leerraum. Wir müssen diesen Leerraum noch einmal auswählen und so auf „Löschen“ klicken. Nun, um Ihnen zu zeigen, was der Unterschied hier ist, werde ich eine neue Ebene erstellen und nennen wir es BG als unseren Hintergrund. Ich werde es unten bewegen, direkt unter unserer Schuhschicht. Drücken Sie Befehl A oder Steuerelement A in Windows. Dann wählen wir eine andere Farbe, zum Beispiel diese und drücken Sie die Option „Löschen“ und da gehen wir. Wie Sie sehen können, können wir leicht die Hintergrundfarbe ändern. Ich kann auch den Hintergrund entfernen und als Png-Datei speichern und in Figma importieren und das verwenden. Sie könnten mehr Möglichkeiten haben, mit diesem Bild zu arbeiten. Aber es gibt einige Bilder, die Sie den Zauberstab nicht einfach verwenden können , um Ihr bestimmtes Objekt vom Hintergrund zu trennen. Lassen Sie mich diese Prozesse rückgängig machen. In diesem Fall können Sie andere Werkzeuge verwenden. Zum Beispiel können Sie den Magnetic Lasso so verwenden und Sie können Ihr Objekt einfach und perfekt auswählen. Sie können auch das Zeichenstift-Werkzeug verwenden, das die beste Option ist, da Sie eine genaue Auswahl Ihres Objekts erhalten können. Es braucht jedoch mehr Zeit. Hier, nachdem Sie zwei verschiedene Punkte ausgewählt haben, müssen Sie die Wahltaste gedrückt halten und auf diesen Punkt drücken, und wählen Sie einen neuen Punkt aus, und so weiter. Jetzt zeige ich Ihnen ein weiteres Beispiel für die Verwendung von Adobe Photoshop zum Ändern Ihrer Bilder. Manchmal müssen Sie möglicherweise die Farbe Ihres Produkts ändern. Lassen Sie mich zunächst den Hintergrund auswählen und diesen so entfernen. Angenommen, ich werde die Farbe dieses Schuhs ändern. Es ist ein bisschen schwierig, weil es zu dunkel ist. Aber ich werde es ausprobieren. Lassen Sie uns zunächst einen neuen Layer erstellen. Dann wähle ich den ganzen Schuh aus. Wie können wir das tun? Wir können Befehlstaste halten und hier auf dieses Quadrat klicken. Wie Sie sehen können, ist es bereits ausgewählt. Stellen Sie dann sicher, dass Sie die neue Ebene ausgewählt haben, und ändern Sie eine andere Farbe, z. B. blaue Farbe. Wählen Sie dann das Pinselwerkzeug wie folgt aus. Lassen Sie uns das alles so malen. Nun, es sieht seltsam aus, aber in einer Minute können Sie sehen, wie erstaunlich diese Technik ist. Wie Sie hier sehen können, haben wir zwei verschiedene Schichten. Hier haben wir den Mischmodus und wir haben verschiedene Optionen. Wenn Sie „Farbe“ auswählen, sehen Sie, dass die Farbe unserer Objekte perfekt geändert wurde. Es ist fantastisch, denn manchmal haben Sie als UI-Designer auch verschiedene Versionen eines bestimmten Produkts, aber es ist nicht im Internet verfügbar, so dass Sie Ihre eigenen erstellen können. Nehmen wir nun an, Sie möchten seine Farbe in etwas anderes ändern und Hunderte von Optionen sehen. Anstatt jede Farbe einzeln zu wählen, habe ich eine gute Lösung für Sie. Wenn Sie zu Anpassungen gehen, können Sie sehen, dass wir verschiedene Optionen haben. Wenn Sie jedoch auf „Farbton Sättigung“ klicken, können Sie den Farbton leicht ändern. Wie Sie sehen können, ändert sich die Farbe unseres Schuhs sofort. Es ist erstaunlich. Ist es nicht? Zum Speichern Ihrer Datei können Sie einfach Befehlshalt und S drücken, dann können Sie hier einen Namen festlegen, zum Beispiel Schuh, dann können Sie das spezifische Format auswählen, das Sie benötigen. Hier haben wir viele Formate. Wenn Sie dieses Bild jedoch ohne Hintergrund verwenden möchten, müssen Sie Png auswählen. Klicken Sie dann auf „Speichern“, und es ist fertig. Jetzt können wir diese PNG-Datei in Ihr Figma-Projekt importieren. Alles klar Leute, vielen Dank, dass du dieses Video gesehen hast. Ich hoffe, es hat dir gefallen, und ich werde dich im nächsten Video sehen. 117. Einführung in die 3D-Modellierung: Hallo an alle, und willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Abschnitt werden wir über 3D-Modellierung sprechen. Vielleicht fragen Sie sich, wie 3D Modeling Ihnen in Ihrer Karriere als UI/UX-Designer helfen wird . Lassen Sie mich es Ihnen in einem einfachen Begriff erklären. Für Sie, als UI/UX-Designer, ist es gut, ein wenig über 3D Modeling zu wissen , weil Sie manchmal eine kreative Landing Page entwerfen möchten, oder sagen wir einen Bildschirm für eine Anwendung, die einige einfache Formen benötigt oder sogar etwas 3D-Kontext. In diesem Abschnitt werde ich Ihnen beibringen, wie Sie diese Techniken verwenden können , um erstaunliche Dinge für Ihr Design zu erstellen. Sie können mit traditionellen 3D Modeling Software wie CINEMA 4D, 3ds Max, etc.vertraut 3ds Max, etc. , aber die Arbeit mit diesen traditionellen Software könnte ziemlich mutig für die Anfänger sein. Anstatt mit diesen Software zu arbeiten, werde ich Ihnen eine andere großartige Umgebung zeigen. Es gibt eine Web-Anwendung, die Vectary genannt wird. Es ist eine erstaunliche und brandneue Web-Anwendung, die Ihnen helfen kann, erstaunliche 3D-Dinge auf eine schnelle und einfache Weise zu erstellen. Anstatt mit einigen komplexen Tools zu arbeiten, werde ich Ihnen beibringen, wie Sie Vectary verwenden können, um die bestmöglichen Ergebnisse zu erzielen. Wenn Sie auf vectary.com gehen, wie Sie sehen können, ist dies die Zielseite. Da gehen wir hin. Wir können diese Funktionen sehen und die gute Nachricht ist, wenn Sie diesen Abschnitt beenden, können Sie diese Dinge leicht erstellen und Sie können den Code auf Ihrer Website setzen oder Sie können sogar eine Vorschau als Augmented Reality-Modell. Das erste, was wir tun müssen, ist ein Konto zu erstellen. Es gibt zwei Arten von Konten. Der erste Typ ist kostenlos. Wenn Sie auf die Preise gehen, können Sie sehen, wir haben zwei Arten, kostenlos und Premium. Für diesen Kurs können Sie das kostenlose Konto nutzen, da wir uns ausschließlich auf die Grundlagen konzentrieren werden. Stellen Sie sicher, dass Sie Ihr Konto erstellen, und im nächsten Video starten wir gemeinsam unser erstes 3D-Modellierungsprojekt. Wir sehen uns dann. 118. Erstelle dein erstes 3D-Modell: Hallo an alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir anfangen, mit dem Pfarrhaus zu arbeiten. Ohne weitere Umschweife, lasst uns anfangen. Lassen Sie uns zunächst voran gehen und klicken und beginnen Sie mit der Erstellung. Dann können Sie hier ein neues Projekt erstellen oder stattdessen einige vorgefertigte Projekte verwenden. Ich gehe voran und klicke auf dieses Projekt. Wie Sie hier sehen können, haben wir eine 3D-Umgebung mit dreidimensionalen. Los geht's. Bisher arbeiteten wir an einer 2D-Umgebung. Jetzt werden wir jedoch in eine 3D-Umgebung eintauchen. Das ist so interessant. Lassen Sie mich Ihnen zunächst einige Grundlagen erklären. Wenn Sie sich auf dieser Leinwand bewegen möchten, können Sie einfach Platz auf Ihrer Tastatur halten und sich bewegen. Wenn Sie vergrößern oder verkleinern möchten, können Sie so scrollen und Sie können auch mit der linken Maustaste schwenken. Das Pfarrhaus ist eine ziemlich komplexe Anwendung, daher werden wir nicht alle Werkzeuge abdecken. Allerdings werde ich Ihnen die Anforderungen beibringen, um Sie wissen zu lassen, wie Sie diese großartige Anwendung verwenden können. Ganz oben haben wir einige Modi. Wie Sie sehen können, haben wir Objekt, Bearbeitungsmodus, Bibliothek und Kommentare. Im Objekt haben wir auch verschiedene Optionen. Hier haben wir Primitive. Wie Sie sehen können, haben wir Box, Kugel, Zylinder, Rohr, etc. Sie können einfach in Feld klicken hier und da gehen wir. Sie haben Ihre Schachtel. Lassen Sie uns verkleinern. Ziemlich genial. Auf der rechten Seite können Sie einige Variablen wie Position, Drehung, Skalierung, Größe und sogar Material so ändern . Ziemlich genial, nicht wahr? Wir haben auch Segmente. Ich werde es für jetzt 10 machen. Wie Sie hier sehen können, haben wir ein Gizmo. Es sind ein paar Pfeile, ein paar Würfel und ein paar Bögen. diesem Gizmo können Sie Ihr Objekt drehen, skalieren und verschieben. Wenn Sie Ihr Objekt verschieben möchten, können Sie diese Pfeile so in jede gewünschte Richtung verwenden. Wenn Sie Ihr Objekt skalieren möchten, können Sie diese Würfel verwenden. Wie Sie sehen können, haben wir zwei verschiedene Würfel. Der äußere Würfel, lassen Sie uns Ihr Objekt in eine Richtung wie diese und den inneren Würfel skalieren , lassen Sie uns Ihr Objekt proportional skalieren. Wenn Sie Ihr Objekt drehen möchten, können Sie diese Bögen verwenden. Fantastisch. Jetzt werde ich dieses Objekt entfernen. Die andere Sache, die Sie verwenden können, ist Text. Immer wenn Sie auf diesen 3D-Text klicken, können Sie sehen, dass Vektor Sie automatisch einen neuen Text hier für Sie erstellt und wenn Sie diesen Text ändern möchten, können Sie leicht zu einem 3D-Text-Abschnitt gehen und lassen Sie uns dies in UI-UX-Design ändern. Ziemlich genial und ich kann es leicht hier bewegen. Ich kann die Tiefe ändern. Perfekt. Auch kann ich das Material ändern oder sagen wir die Farbe in diesem Fall. Ziemlich genial und Sie können auch die Schriftart ändern. Lassen Sie uns nach Montserrat suchen. Da gehen wir hin. Sie können auch die Gewichtung, den Zeichenabstand und den Zeilenabstand ändern. Wenn Sie mit einem 3D-Objekt arbeiten, müssen Sie es rendern. Hier oben sehen Sie, gibt es einen Render-Toggle und wenn Sie mit der Maus darüber bewegen, können Sie sehen, dass es drei verschiedene Optionen gibt. Geringe Qualität, mittlere Qualität und hochwertig. Ich werde mit mittlerer Qualität gehen. Da gehen wir hin. Es wurde perfekt gerendert. Natürlich gibt es einige Wasserzeichen in der kostenlosen Version. Wenn Sie sie entfernen möchten, können Sie die Premium-Lizenz von vector verwenden. Jetzt hören wir auf, unseren Text zu rendern. Leute, das ist alles für dieses Video. Vielen Dank, dass Sie sich dieses Video ansehen. Ich hoffe, es hat dir gefallen und im nächsten Video werden wir über die Kamera und Beleuchtung sprechen . Wir sehen uns dort. 119. Kamera und Beleuchtungen: Hi, alle. Willkommen zurück zu einem weiteren Video dieses Kurses. In diesem Video werden wir weiter an unserem vorherigen Projekt arbeiten. Wie Sie sehen können, haben wir diese 3D-Text. Jetzt ist es jedoch an der Zeit, eine Kamera zu unserer Leinwand oder unserer Ansicht hinzuzufügen. Lassen Sie uns auf diese Kamera klicken. Ziemlich genial. Wenn Sie nun schwenken, können Sie sehen, dass die Kamera fixiert ist und unseren Text in der spezifischen Ansicht zeigt, die wir festgelegt haben. Wenn Sie auf diese Kameraansicht klicken, Layer-Liste, da gehen wir, Sie erhalten Ihre Designer-Kameraansicht. Eine Kamera hilft uns, eine bestimmte Ansicht zu behalten, wann immer wir unser Projekt rendern wollen. Jetzt lassen Sie uns unseren Text noch einmal rendern. Wie Sie sehen können, scheint es nicht realistisch zu sein, weil wir keine großen Schatten und tolle Beleuchtung haben, also lasst es uns reparieren. Was wir tun werden, ist eine Schattenebene zu wählen. Ziemlich genial. Ich werde es runterziehen. Wie Sie sehen können, haben wir jetzt eine Schattenebene. In der Tat, wenn Sie ein Objekt oder sagen wir einen 3D-Text auf eine Schattenebene setzen , wird automatisch ein Schatten dafür erstellt. Zum Beispiel hier, lassen Sie mich vergrößern, wie Sie sehen können, unser Text ist nicht perfekt über unserer Schattenebene. Zunächst einmal wählen wir unseren 3D-Text und drücken Sie A. Ziemlich gut. Dann werde ich es so nach oben bewegen, stellen Sie sicher, dass es über Ihrer Schattenebene liegt. Wie Sie sehen können, ist es nicht, also werde ich es wieder nach oben bringen. Jetzt ist es ziemlich gut. Wenn Sie Ihre Objekte jetzt rendern, können Sie sehen, dass wir einen großen Schatten haben. Kannst du das sehen? In der Tat können Sie auch etwas Licht hinzufügen. Zum Beispiel, hier, werde ich für Rechteck Licht gehen. Ich werde es ein bisschen bewegen. Lassen Sie uns unsere Szene noch einmal rendern. Es ist zu hell. Jetzt ist es besser. Fantastisch. Alles klar, Leute. Vielen Dank, dass Sie sich dieses Video ansehen. Ich hoffe, es hat dir gefallen. Ich werde Sie im nächsten Video sehen. 120. Materialien und Texturen: Hallo an alle. Willkommen zurück zu einem anderen Video dieses Abschnitts. In diesem Video werden wir über Texturen und Materialien sprechen. Wenn Sie ein 3D-Objekt entwerfen, benötigen Sie sicher eine Textur oder ein Material. Wie ich bereits erwähnt habe, haben Sie eine Bibliothek oben, also lassen Sie uns voran und klicken Sie darauf. Hier haben Sie verschiedene Optionen, hier haben wir Sammlungen, wir haben eine Sammlung von verschiedenen Formen, wie Sie sehen können, hier können wir diese Formen wie diese oder diese verwenden, und wir haben andere Optionen als gut, wie Vermögenswerte. Sie haben viele 3D-Assets, und dann haben wir Materialien. Angenommen, wir wollen das Material unseres Textes hier ändern. Hier können wir eines dieser Materialien wählen, ich werde für dieses gehen. Sie können es per Drag & Drop auf Ihrem 3D-Text wie folgt ziehen. Das ist ziemlich cool, nicht wahr? Lassen Sie uns es noch einmal rendern und wir können den Unterschied sehen. Kannst du sehen, wie erstaunlich es ist? Sie können das Material ganz einfach ändern, wie Sie es wünschen. Ändern wir es zu etwas anderem, zum Beispiel zu diesem. Sie können Ihren Text auswählen und darauf klicken, perfekt, oder es ist besser, eine andere Form hier zu erstellen. Lassen Sie uns hier eine Box erstellen. Ich werde es nach unten skalieren, lassen Sie es hier verschieben, perfekt, und dann werde ich sein Material in etwas anderes ändern, zum Beispiel dieses. Es ist ziemlich cool, nicht wahr? Kannst du erkennen, wie viele Möglichkeiten es für dich gibt , dort erstaunliche Objekte zu schaffen? Das ist fantastisch. Alles klar, Jungs, vielen Dank, dass Sie dieses Video gesehen haben. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 121. Eine 3D-Szene erstellen: Hallo an alle, und willkommen zurück zu einem anderen Video des Abschnitts. In diesem Video werden wir damit beginnen, gemeinsam unsere erste 3D-Szene zu entwerfen. Was ist eine 3D-Szene? Wie Sie sich vorstellen können, ist eine 3D-Szene eine Szene, die aus verschiedenen 3D-Objekten besteht. Zum Beispiel haben wir hier eine Szene, weil wir hier mindestens zwei Elemente haben. Wir werden jedoch gemeinsam eine interessantere Szene schaffen. Lassen Sie uns zuerst diese beiden Objekte entfernen, ziemlich gut. Ich werde Schattenflugzeug behalten. Ich brauche die Kamera nicht mehr, also lasst uns das entfernen. Danach werde ich einen Text erstellen. Lassen Sie uns auf 3D-Text da drüben klicken, ziemlich gut. Dann werde ich es so auf UI ändern. Lassen Sie uns diese Farbe so einstellen, dass sie ziemlich genial ist. Dann werde ich es duplizieren, und lasst uns seine Position ändern. Lassen Sie uns es so in UX ändern. Danach werde ich die Farbe auf 3646ff ändern. Das ist ziemlich genial. Lassen Sie mich hineinzoomen. Dann werde ich es um 90 Grad drehen, ziemlich genial. Lassen Sie mich es so in Richtung des UI-Textes bewegen. Wieder einmal werde ich es so drehen. Es sieht so aus, als ob die UX oben auf der Benutzeroberfläche liegt. Dann werde ich die Größe von UX um diesen Würfel verringern, so. Lass es uns auf die linke Seite bewegen, ziemlich genial. Lassen Sie uns diesen UI-Text ein wenig nach oben verschieben, weil wir diesen Schatten bekommen müssen. Wenn Sie sich erinnern, wenn Sie eine Schattenebene verwenden, müssen wir unsere Objekte darüber legen, um einen Schatten zu bekommen. Fantastisch. Dann wählen wir UX hier, und verschieben Sie es auf die linke Seite, wie folgt. Das ist fantastisch. Allerdings werde ich UX ein wenig kleiner machen, ich denke, jetzt ist es besser, ziemlich gut. Das nächste, was ich tun werde, ist, eine Wand dahinter hinzuzufügen. Gehen wir in die Bibliothek und gehen dann zu Zick-Zack-Formen von Vectary, und hier haben wir eine Eckwand. Lasst uns darauf klicken, ziemlich genial. Ich werde verkleinern, weil wir diese Wand vergrößern müssen. Hier stellen Sie sicher, dass die Wand ausgewählt ist, und verwenden Sie diesen Würfel, um es zu vergrößern, und dieser Würfel als gut, ziemlich genial. Dann, was ich tun werde, ist seine Farbe zu ändern. Lassen Sie uns seine Farbe in so etwas ändern, das ist ziemlich großartig. Ich werde heranzoomen. Dann werde ich zur Bibliothek gehen, und dieses Mal werde ich Umgebungen wie diese öffnen. hier haben wir verschiedene Umgebungen. Zum Beispiel können wir dieses ausprobieren, Sie können es per Drag & Drop so ablegen. Lassen Sie uns unsere Szene rendern, um zu sehen, wie sie aussieht. Das ist großartig. Ich werde es jedoch in etwas anderes wie dieses ändern. Denken Sie daran, dass die von Ihnen gewählte Umgebung die Reflexionen und auch die Schatten beeinflussen wird . Stellen Sie sicher, dass Sie die bestmögliche Umgebung auswählen. Versuchen wir es auch, ich denke, es ist großartig. Dann lassen Sie uns einige 3D-Assets zu unserer Szene hinzufügen. Gehen wir zum Abschnitt Assets, und hier suchen Sie nach Büchern, und ich werde dieses wählen, ziemlich genial. Vergrößern wir es, fantastisch. Ich werde nach etwas anderem suchen, zum Beispiel nach einer Tasse Drink wie diesem. Machen wir es kleiner, bewegen Sie es auf die rechte Seite, fantastisch. Dann können wir auch einen Donut hinzufügen. Lassen Sie uns nach Donut suchen. Wir können hinzufügen, zum Beispiel, es ist ein Low-Poly-Donut. Ich mache es kleiner und lege es neben unsere Tasse Getränk. Wie Sie sehen können, haben wir ein Rechteck Licht. Allerdings werde ich unserer Szene ein weiteres Licht hinzufügen. Lassen Sie uns nach Richtlicht suchen, ziemlich gut. Ich werde verkleinern, bewegen wir es auf die rechte Seite, drehen Sie es ein wenig. Ich denke, jetzt ist es besser. Wir können auch verschiedene Objekte zu unserer Szene hinzufügen , um sie professioneller und auch komplexer aussehen zu lassen. dieses Kurses willen, werde ich es jedoch einfach halten. Lassen Sie uns unsere Szene rendern, um zu sehen, wie sie aussieht. Es ist ziemlich großartig, nicht wahr? Sie können auch fortfahren und einige Objekte aus Sammlungen hinzufügen. Zum Beispiel können wir voran gehen und organische Formen öffnen, und hier haben wir verschiedene Objekte wie dieses. Lassen Sie es nach unten skalieren, oder Sie könnten andere Objekte verwenden, zum Beispiel abgerundete Formen wie diese. Es hängt von Ihnen und dem Projekt ab, an dem Sie arbeiten, also stellen Sie sicher, dass Sie großartige Objekte auswählen, um die bestmögliche Kombination zu erstellen. Leute, vielen Dank, dass ihr dieses Video gesehen habt, ich hoffe, es hat euch gefallen. Im nächsten Video werden wir über das Rendern und Exportieren sprechen. Wir sehen uns dann. 122. Rendering und Exportieren: Hallo an alle. Willkommen zurück zu einem anderen Video des Abschnitts. In diesem Video werden wir über das Rendern Ihrer Szene sprechen. Wie bereits erwähnt, müssen Sie jedes Mal, wenn Sie an einem 3D-Projekt arbeiten, es am Ende rendern. Jetzt werde ich Ihnen zeigen, wie Sie die Rendering-Einstellungen ändern können und wie Sie die Viewer-Option verwenden können und wie Sie Ihre Datei exportieren können. Bevor ich das mache, werde ich einige Anpassungen an unserer Schattenebene vornehmen. Gehen wir und wählen unsere Schattenebene aus, und ich werde seine Farbe in so etwas ändern. Ich werde die Farbe wählen, Picker. Jetzt lassen Sie uns unsere Szene rendern. Es ist großartig, nicht wahr? Für das Rendern der Szene stehen Ihnen verschiedene Optionen zur Verfügung. Lassen Sie uns zunächst das Rendermenü oben öffnen. Der erste Abschnitt ist wie diese Umschalttaste. Sie können die Qualität ändern, Sie können sie auf niedrig, mittel oder hoch einstellen , und Sie können auf „Rendervorschau starten“ klicken. Sie können einige Effekte hinzufügen, Sie können die Sättigung, den Kontrast, den Farbfilter und auch die Farbbalance usw. ändern den Kontrast, den Farbfilter . Zu guter Letzt können Sie Ihre Szene als Bild exportieren. Sie müssen jedoch Ihre Lizenz aktualisieren, um diese Funktionalität zu erhalten, und dann können Sie auf Bild herunterladen klicken. Das nächste wichtige Merkmal von Vectary ist der Betrachter. Wenn Sie zum Viewer-Abschnitt gehen, haben Sie hier verschiedene Optionen, die Sie ändern können, wie Texturen, Backen, und dies sind über Beleuchtungen. Hier können wir Center-Kameraansicht wählen, und es bedeutet, dass die Kameraansicht auf dem aktuell ausgewählten Objekt zentriert wird. Wenn Sie UI auswählen, wird die Kameraansicht auf diesem Objekt zentriert und die Augmented Reality ist aktiviert, was großartig ist, weil wir auch eine Augmented-Reality-Szene erhalten können. Dann generieren wir unseren Code hier, und jetzt können wir auf „Generieren“ klicken, es dauert einige Zeit und es ist fertig. Hier können Sie den Code bekommen. Wie Sie sehen können, können Sie den iframe-Code kopieren und in Ihren HTML-Code einfügen, oder wenn Sie Ihre Website oder die Anwendung nicht entwickeln, können Sie es leicht Ihrem Entwickler geben und er oder sie könnte das perfekt verwenden. Wenn Sie es jedoch Ihren Kunden im Voraus anzeigen möchten, können Sie das Format von HTML iframe zu Link ändern, und Sie können diesen Link in Ihre Zwischenablage kopieren und an Ihre Kunden oder Ihren Freund senden. Schauen wir uns zuerst mal hier an. Da gehen wir, es wird so aussehen; ist es nicht großartig? Wir können Kommando halten und hineinzoomen, das ist fantastisch; nicht wahr? Wenn Sie die Szene auf Ihrem Handy öffnen, können Sie die Option Augmented Reality verwenden, um die Szene in Ihren Umgebungen zu erweitern, das ist ziemlich genial. Vergewissern Sie sich, dass Sie es sich ansehen. Sie können sowohl Android- als auch iOS-Geräte verwenden, um dies zu tun, und das ist fantastisch. Die nächste Option ist Export. Hier können Sie Ihre Datei in jedem Format exportieren Sie OBJ, DAE, USDZ, die Augmented Reality-Format für iOS, et cetera. Um jedoch diese Art von Funktionalität nutzen zu können, müssen Sie dafür eine erweiterte Lizenz erhalten. Alles klar, Jungs, das ist alles für diesen Abschnitt. Ich hoffe, Sie haben dieses Video genossen und ich werde Sie im nächsten Video sehen. 123. Prototyping-Tools: Hi, alle. Willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Abschnitt werden wir über Prototyping sprechen. Aber zuerst werde ich Ihnen einige der besten Werkzeuge vorstellen, um Ihre Projekte zu prototypisieren. Tatsächlich können Sie Figma zum Erstellen eines Prototyps verwenden. Wenn Sie jedoch einen ausgefallenen und komplexen Prototyp erstellen möchten, empfehle ich Ihnen, andere Websites und Anwendungen zu verwenden. Nun, was sind die besten Prototyping-Tools? Nummer 1, ProTopie, das ist meine Lieblings-Anwendung als auch, weil es so einfach zu arbeiten ist und es gibt eine Testversion, und Sie können es ausprobieren, bevor Sie eine Lizenz kaufen. Nummer 2, Zeplin. Nummer 3, Framer X und dann InVision Studio, Figma und Marvel. Im nächsten Video beginnen wir mit dem Prototyping eines unserer früheren Projekte in Figma. Wir sehen uns dann. 124. Prototyping: Hallo, alle, und willkommen zurück zu einem anderen Video dieses Kurses. In diesem Video beginnen wir gemeinsam mit dem Prototyping unseres Finance App-Projekts in Figma. Ich werde Ihnen einige nützliche Techniken zeigen, um einen sehr glatten und großartigen Prototyp zu erstellen. Lassen Sie uns zunächst voran gehen und zoomen. Ich werde den Bildschirm interaktiv machen. Dies ist unsere Willkommensseite, und wie Sie sehen können, besteht sie aus zwei verschiedenen Schaltflächen. Wählen wir zuerst den Anmelde-Button aus und klicken Sie dann auf Prototyp im Inspektor wie folgt. Wie Sie sehen können, wird ein kreisförmiger Knoten angezeigt. Lassen Sie uns darauf klicken und ziehen Sie es wie folgt, um sich mit dem Zeichen auf dem Bildschirm zu verbinden. Dann haben Sie auf der rechten Seite verschiedene Optionen zu ändern. Wir brauchen nichts in der Interaktion zu ändern. Im Animationsbereich werde ich jedoch dieses Dropmenü öffnen und uns Smart Animate wählen, was eine sehr großartige Funktion ist. Sie können Mikro-Interaktionen damit erstellen. Wie Sie sehen können, ist die Art der Animation so eingestellt, dass sie vereinfacht wird. Es ist ziemlich gut. Die Dauer beträgt 300 Millisekunden. Es ist in Ordnung. Was bedeutet Smart Animate hier? Smart Animate erkennt die Ebenen in beiden Bildschirmen mit dem gleichen Namen. Zum Beispiel haben wir hier Formen und in diesem Bildschirm, im Zeichen auf dem Bildschirm, haben wir Formen sowie mit der gleichen Rechtschreibung. Denken Sie daran, die Rechtschreibung ist sehr wichtig. Sie müssen identisch sein. Wenn der Benutzer auf den Anmelde-Button klickt, da wir hier zwei Ebenen mit dem gleichen Namen haben, wird Figma es automatisch für uns animieren. Lassen Sie uns voran und klicken Sie auf Anzeige-Symbol. Ziemlich gut. Ich werde auf Anmelden klicken. Da gehen wir. Hast du gesehen, wie glatt und schön diese Animation war? Es ist ziemlich genial. Versuchen wir es noch einmal. Es ist fantastisch. Sie können die Dauer sogar ändern, wenn Sie möchten. Zum Beispiel, lassen Sie es auf 400 setzen, und ich werde es versuchen. Fantastisch. Nun, zum Beispiel, lassen Sie uns das Gleiche für unseren Anmelde-Button tun. Ich werde es hierher ziehen und ablegen. Setzen wir es auf Smart Animate, und das ist alles. Ziemlich gut. Die nächste Technik, die ich Ihnen zeigen werde, ist für ein Ein- und Ausrutschen. Es ist ziemlich nützlich, wenn Sie Ihr Hamburger-Menü animieren möchten. Hier auf unserer Homepage wählen wir unser Hamburger-Menü-Symbol aus. Ich werde diesen Pfeil per Drag & Drop ziehen, um eine Verbindung mit unserem Menübildschirm wie folgt zu erstellen. Dann werde ich es so einstellen, dass es so schiebt. Der Pfeil nach rechts sollte jedoch wie folgt ausgewählt werden. Jetzt versuchen wir es mal. Aber vorher müssen wir voran gehen und ziehen Sie dieses Play-Icon und setzen es hier, weil es anzeigt, dass dieses Prototyping sollte von dieser Homepage starten. Nun gehen wir weiter und klicken Sie auf dieses Hamburger-Menü-Symbol. Da gehen wir. Ich denke, es ist eine gute Idee, die Dauer auf 200 Millisekunden zu ändern. Versuchen wir es mal. Es ist ziemlich gut, nicht wahr? Nun gehen wir weiter und wählen Sie diese Overlay-Ebene, diese dunkle, und ich werde eine Verbindung von hier zu unserem Homepage-Bildschirm erstellen. Lassen Sie es uns drücken. Diesmal sollte der Pfeil nach links mit einer Dauer von 200 Millisekunden ausgewählt werden, und ich werde Smart Animate passende Ebenen auswählen. Denn in diesen beiden Bildschirmen haben wir dieses Profilbild. Ich werde es automatisch animiert machen. Versuchen wir es mal. Da gehen wir. Wenn ich hier klicke, können Sie sehen, dass unser Profilbild animiert ist. Natürlich können Sie auch einfache Animationen verwenden. Zum Beispiel können wir fortfahren und auf die Schaltfläche Anmelden klicken. Lassen Sie uns eine Verbindung zu unserer OTP-Verifizierung herstellen. Ziemlich gut. Ich werde es sofort so einstellen. noch einmal daran, dieses Wiedergabesymbol auf diesen Bildschirm zu verschieben. Versuchen wir es so. Es ist sofort. Sie können es auch ändern, um es aufzulösen und es zu versuchen. Da gehen wir. Es ist Phasenbildung. Wie Sie sehen können, ist es in Figma nicht so schwierig, einen großartigen Prototyp zu erstellen. Leute, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. Wir sehen uns dann. 125. Mocking: Hallo an alle und herzlich willkommen zu einem anderen Video dieses Kurses. In diesem Video zeige ich Ihnen, wie Sie ein Markup in Figma erstellen können. Zunächst einmal werde ich Sie bitten, die FreeBIESUI-Website zu öffnen. Wenn du es geöffnet hast, lass uns so nach Figma suchen. Ich werde nach unten scrollen und ich denke, es ist ein gutes Beispiel. Lasst uns darauf klicken. Ziemlich gut. Ich werde nach unten scrollen und hier können Sie auf Download Freebie klicken, und es wird in Ihrer Figma geöffnet werden. Hier haben Sie verschiedene Beispiele. Ich gehe weiter und wähle diesen Bildschirm aus, kopiere ihn und füge ihn hier in unser Projekt ein. Fantastisch. Ich werde es auf die rechte Seite schieben. Großartig. Lassen Sie mich hineinzoomen. Wie Sie hier sehen können, haben Sie verschiedene Ebenen. Wenn Sie diesen Bildschirm öffnen, hier haben Sie Ihr Design und hier ist das Bild. Ich wähle das aus und lass uns ein Bild platzieren. Wenn Sie sich erinnern, haben wir bereits unsere Homepage-Bildschirme exportiert. Wenn Sie dies jedoch nicht tun, könnten Sie einen dieser Artikel exportieren. Dann lassen Sie es uns hier platzieren und klicken. Wie Sie sehen können, wurde es horizontal gekippt. Ich werde mit der rechten Maustaste darauf klicken und klicken Sie auf Horizontal drehen, das ist alles. Können Sie sehen, wie einfach es ist, Ihr Markup in Figma zu erstellen? Alles klar, Jungs, das ist alles für dieses Video. Ich hoffe, es hat dir gefallen und ich werde dich im nächsten Video sehen. 126. Wie du dein eigenes Online-Portfolio erstellen kannst?: Hallo an alle. In diesem Video werden wir über Online-Portfolio sprechen. Als UI/UX-Designer benötigen Sie unbedingt ein Online-Portfolio, um Ihre Fähigkeiten und Designfähigkeiten zu zeigen. Es ist äußerst wichtig, ein hervorragendes Portfolio zu haben , um einen guten Job zu bekommen, egal ob als Vollzeit-Designer oder als Freelancer. Wie können Sie Ihr eigenes Online-Portfolio erstellen, ohne eine einzige Codezeile zu schreiben? Um dies zu tun, können Sie Websites wie Dribbble oder Behance verwenden, die für Designer konzipiert sind und fast jeder Arbeitgeber muss sich Ihr Profil auf einer dieser Websites ansehen. Behance ist eine Online-Plattform, um kreatives Arbeiten zu präsentieren und zu entdecken. Es ist Eigentum von Adobe und Sie können ein großartiges Portfolio erstellen, indem Sie es kostenlos nutzen. Alternativ können Sie Dribbble verwenden, um Ihr Kunstwerk zu präsentieren und es erstellt automatisch ein Online-Portfolio für Sie. Sie können Ihr Portfolio auch nach Ihren Wünschen anpassen, aber Sie müssen etwas im Kopf behalten. Um Dribbble-Dienste kostenlos nutzen zu können, müssen Sie von anderen Designern eingeladen werden. Andernfalls können Sie das Premium-Abonnement erwerben. 127. Wie man Dribbble?: Hi, alle. In diesem Video werden wir darüber sprechen, wie Sie Dribbble verwenden können. Um Dribbble-Dienste nutzen zu können, benötigen Sie zunächst ein Konto. Sobald Sie Ihr Konto erstellt haben, können Sie entweder die Kunstwerke anderer Designer nach Inspiration durchsuchen oder Ihr eigenes kreatives Kunstwerk hochladen. Jeden Monat kannst du bis zu 48 Aufnahmen hochladen und deine Aufnahmen sollten den Richtlinien von Dribbble entsprechen. Sie können hochauflösende Bilder im PNG-, JPEG- und GIF-Format sowie animierte GIFs in Ihr Profil hochladen , JPEG- und GIF-Format . Außerdem können Sie, wenn Sie ein Pro-Mitglied sind, auch Videos hochladen. Nachdem Sie Ihr Kunstwerk hochgeladen haben, können Sie einen Titel dafür festlegen. Sie können auch relative Tags hinzufügen, damit andere Benutzer Ihr Kunstwerk leichter finden können. guter Letzt sollten Sie eine kurze Beschreibung für Ihre Aufnahme schreiben, und dann können Sie sie sofort oder in Zukunft veröffentlichen. 128. Wie man Behance verwendet?: Hallo an alle. In diesem Video werden wir darüber sprechen, wie Sie Behance verwenden können. Genau wie bei der Verwendung von Dribbble, , um Behance-Dienste nutzen müssen Sie zuerst ein Konto haben, um Behance-Dienste nutzenzu können. Dann können Sie andere Designer Artwork durchsuchen und überprüfen, oder erstellen Sie Ihr eigenes Projekt. Der Hauptunterschied zwischen Dribbble und Behance ist das Seitenverhältnis Ihrer Aufnahmen oder Projekte. Bei Dribbble können vertikale Aufnahmen wie eine Landingpage nicht vollständig hochgeladen werden. Auf Behance können Sie jedoch Bilder mit einem beliebigen Seitenverhältnis hochladen, um Ihr Kunstwerk zu präsentieren. Ich empfehle, sowohl Behance als auch Dribbble gleichzeitig zu verwenden und zu versuchen, ihre einzigartigen Eigenschaften zu nutzen, um Ihr Design perfekt zu präsentieren. Behance können Sie auch Ihre hochwertigen Bilder und Videos in einem einzigen Projekt hochladen, was eine großartige Funktion ist, um ein interaktives Produkt in kürzester Zeit zu präsentieren. 129. Wie du deinen ersten Kunden erhältst?: Hallo, alle, und willkommen zurück zu einem anderen Abschnitt dieses Kurses. In diesem Video werden wir über Geschäftsideen sprechen und wie Sie Ihren ersten Kunden bekommen und Ihr eigenes Unternehmen gründen können. Als UI-Designer fragen Sie sich vielleicht, wie Sie Ihren ersten Client bekommen können. Nun, hoffentlich gibt es viele Möglichkeiten, damit anzufangen. Die erste Stufe bei der Suche nach Kunden besteht darin, ein starkes Portfolio zu haben. Wenn Sie den Portfoliobereich noch nicht gesehen haben, schlage ich vor, dass Sie sich den Portfoliobereich dieses Kurses ansehen. Nachdem Sie Ihr Portfolio erstellt haben, müssen Sie sich fragen, welche Art von Jobs möchten Sie haben? Wollen Sie als Vollzeit-Designer arbeiten oder als Freelancer arbeiten? Wenn Sie als Vollzeit-UI-Designer arbeiten möchten, müssen Sie Ihren Lebenslauf vorbereiten und sich für die Unternehmen bewerben, in denen Sie arbeiten möchten. Auf der anderen Seite, wenn Sie als Freiberufler arbeiten möchten, können Sie sich auf einigen freiberuflichen Websites registrieren und Ihren ersten Kunden leicht finden. Es gibt so viele Websites, mit denen Sie arbeiten können. Zum Beispiel Freelancer.com, Fiverr, Upwork, 99designs, Dribbble, etc. Stellen Sie sicher, dass Sie sie überprüfen und herausfinden, welche Option für Sie am besten geeignet ist. 130. Wie du dein eigenes Unternehmen startest: Hallo an alle. Ich hoffe, es geht Ihnen gut. In diesem Video werden wir darüber sprechen, wie Sie Ihr eigenes Unternehmen gründen können. Ein Unternehmen zu gründen ist schwer, also müssen Sie das Niveau Ihrer Motivation bestimmen, bevor Sie in diesen Prozess einsteigen. Wenn Sie darüber nachdenken, ein Unternehmen zu gründen, sollten Sie wissen, dass es so viel Zeit, Energie und Geduld braucht , um Ihre Ziele zu erreichen. Wenn Sie all diese Aspekte kennen, sind Sie bereit, den nächsten Schritt zu machen. Zunächst sollten Sie Ihr Qualifikationsniveau bewerten und herausfinden, welche Art von Dienstleistungen Sie anbieten möchten, dann müssen Sie herausfinden, wer Ihre potenziellen Kunden sind. Darüber hinaus sollten Sie an Ihren Preisen arbeiten und Ihre Zahlen analysieren. Zweitens müssen Sie Ihr eigenes Unternehmen registrieren. In diesem Zusammenhang empfehle ich, sich von einem Anwalt beraten zu lassen und sicherzustellen, dass Sie alle rechtlichen Anforderungen im Zusammenhang mit der Registrierung eines Unternehmens verstehen. Nachdem Sie Ihr Unternehmen registriert haben, müssen Sie mit der Erstellung Ihrer eigenen Marke beginnen, ein Logo für Ihr Unternehmen entwerfen und Ihre Markenfarben auswählen. Zu guter Letzt sollten Sie auf jeden Fall Ihre eigene Website gestalten weil es der wichtigste Teil Ihres Unternehmens ist. Jetzt, da Sie Ihre Website bereit haben, ist es an der Zeit, über Ihre Marketing-Strategie nachzudenken. Wenn Sie Ihre Dienstleistungen und Fähigkeiten nicht den richtigen Leuten anbieten könnten, wäre Ihr Unternehmen nicht erfolgreich, egal wie professionell und nützlich Ihre Fähigkeiten sind. Stellen Sie also sicher, dass Sie einen großartigen Marketingplan haben und führen Sie ihn genau aus. 131. Wie du dein Unternehmen skalierst?: Hallo an alle. Ich hoffe, es geht Ihnen gut. In diesem Video werden wir darüber sprechen, wie Sie Ihr Unternehmen skalieren können. Jetzt, da Sie Ihr eigenes Unternehmen führen, fragen Sie sich vielleicht, wie Sie Ihr Unternehmen skalieren können, oder mit anderen Worten, wie Sie den Umsatz Ihres Unternehmens drastisch steigern können. Wenn es um Online-Unternehmen geht, konzentrieren sich die meisten Unternehmer in der Regel auf eine geografische Region aus Gründen der Einfachheit. Es ist eine großartige Idee, um Ihre Reise zu beginnen, aber es ist nicht genug, um ein profitables Geschäft zu entwickeln. Wie Sie vielleicht vermuten, die beste Lösung darin, Ihre globalen Optionen zu erweitern und Kunden aus der ganzen Welt zu gewinnen. Der nächste Schritt ist der Versuch, Ihre manuellen Prozesse zu automatisieren , um Ihre Zeit zu verschwenden, denn egal wie viele Kunden Sie haben, es gibt nur 24 Stunden am Tag. Sie können Puffer-Website verwenden, um Ihre sozialen Medien automatisch zu verwalten. Außerdem gibt es viele andere Tools, um Ihre Kunden in kürzester Zeit an ihre Rechnungen zu erinnern . Sie müssen nicht so viel Zeit für die Aufgaben aufwenden , die delegiert und automatisch ausgeführt werden können Stattdessen sollten Sie sich auf Ihren Inhalt und das Ergebnis jedes Projekts konzentrieren. 132. Kommunikation mit deinen Kunden.: Hi, alle. In diesem Video werden wir über die Kommunikation mit Ihren Kunden sprechen. Effiziente Kommunikation mit Kunden spielt in jeder Art von Unternehmen eine Schlüsselrolle, und für Designer gibt es keine Ausnahmen. Die Art und Weise, wie Sie mit Ihren Kunden interagieren, ist so wichtig, wenn Sie ein erfolgreicher Unternehmer sein wollen. Wie sollten Sie mit der Situation umgehen, wenn etwas schief geht? Nun, in jeder Art von Geschäft gibt es Zeiten, in denen etwas schief geht und es normal ist. Die Art und Weise, wie Sie mit diesen Schwierigkeiten konfrontiert sind, ist jedoch so wichtig. Angenommen, Sie legen eine Frist für die Übergabe des endgültigen Projekts an den Kunden fest, und in der Mitte des Entwurfsprozesses verstehen Sie, dass es länger dauern kann. Nun, in diesem Fall müssen Sie Ihren Kunden so schnell wie möglich darüber informieren und versuchen, eine gute Lösung zu finden, die für Sie beide funktioniert. 133. Vertrag: Hi, alle. In diesem Video werden wir über Verträge sprechen. Genau wie jedes andere Unternehmen sollten Sie einen richtigen Vertrag für den Start eines Projekts haben. Egal wie groß oder wie klein das Projekt ist, ein Vertrag hält alles klar und schützt beide Parteien Rechte. Was sollte in die Vereinbarung aufgenommen werden? Das Wichtigste, was Sie dem Vertrag hinzufügen müssen ist die Erklärung Ihrer Dienstleistungen in einer klaren Weise, und manchmal ist es auch noch besser zu erwähnen, was Sie für den Kunden nicht tun werden. Achten Sie darauf, die Frist für die Lieferung des Projekts und auch über den Zahlungsplan zu nennen . Denken Sie daran, dass der Vertrag nicht nur über die Dinge sein sollte, die schief gehen könnten. Es ist besser, sich auf das zu konzentrieren, was richtig gemacht werden sollte. Im Allgemeinen ist es eine gute Idee, sich im Voraus von einem Anwalt beraten zu lassen. 134. Wo findet du die World: Hallo, alle. In diesem Video werden wir über Inspiration und Ressourcen sprechen. anderen Designern inspiriert zu sein, ist absolut fein und wichtig. Sie müssen jedoch sicherstellen, dass Sie ihre Werke nicht kopieren. Wenn Sie an ihren Entwürfen interessiert sind und Teile davon in Ihrem Projekt verwenden möchten, müssen Sie zuerst um Erlaubnis bitten. Wie Sie sich vielleicht erinnern, haben wir in den vorherigen Abschnitten dieses Kurses über Behance und Dribbble gesprochen. Diese beiden Websites sind die beliebtesten Orte, um künstlerische Inspiration zu finden. Es gibt so viele Websites und Instagram-Seiten, die Sie als Inspirationsquelle bezeichnen können. Sie können Ihren Kunden auch zeigen, was Sie als Inspiration haben , um zu wissen, was ihre Erwartungen sind. 135. Bildquellen: Hallo, alle. In diesem Video werden wir über Bildressourcen sprechen. Wir als Designer arbeiten viel mit Bildern. Es könnte jede Art von Bildern in Form von Profilen, Produkten, etc.. Effiziente Ressourcen sind unabdingbar, um die am besten geeigneten Bilder für unsere Projekte zu erhalten. Es gibt so viele Websites, die Ihnen eine Vielzahl von Bildern bieten. Einige von ihnen werden bezahlt und einige von ihnen sind kostenlos. Wenn Sie jedoch nach lizenzfreien Bildern suchen, die Sie in Ihren Projekten ohne Zweifel über deren Lizenz verwenden können, empfehle ich Ihnen, Unsplash.com zu verwenden. Es ist eine der besten Websites da draußen, fast jede Art von Bildern in verschiedenen Kategorien zu finden. Denken Sie daran, dass Sie die Lizenzierung von Bildern, die Sie verwenden möchten, sicherstellen sollten. Andernfalls könnten Sie in Schwierigkeiten sein. 136. Was ist dein nächster Schritt?: Hallo zusammen. In diesem Video werden wir über den nächsten Schritt als UI UX Designer sprechen . Jetzt, da Sie so viel über das Design von Benutzeroberflächen gelernt haben , ist es an der Zeit, den nächsten Schritt zu tun. Sie sind jetzt bereit, erstaunliche mobile Apps und Websites zu entwerfen . Als Designer sollte man immer kreativ sein. Versuchen Sie also, sich jeden Tag selbst herauszufordern , um verborgene Geheimnisse des UI- und UX-Designs herauszufinden verborgene Geheimnisse des UI- und UX-Designs Sie müssen wahrscheinlich gehört haben , dass Übung den Meister macht, aber denken Sie daran, dass Ihr Design . Sie müssen wahrscheinlich gehört haben , dass Übung den Meister macht, aber denken Sie daran, dass Ihr Design sei nicht immer perfekt. Das einzige, was zählt, sind Ihr Fortschritt und Ihre Verbesserungen. Ich denke, es ist eine gute Idee, diesen berühmten Satz zu ändern, damit die Praxis Fortschritte macht. Vor diesem Hintergrund sollten Sie jeden Tag ein besserer Designer werden. Wenn Sie mehr über UI UX Design erfahren und Ihre Designfähigkeiten verbessern möchten. Ich habe gute Nachrichten für dich. Ich habe einen YouTube-Kanal, in dem ich Tonnen von kostenlosen Sachen stelle , die du vielleicht interessant findest. Abonniere also unbedingt meinen Kanal, um meine kommenden Tutorials nicht zu verpassen. Wenn du über Kursupdates oder neue Kurse informiert werden möchtest , kannst du mir auch auf Skillshare folgen. Viele von Ihnen haben mich gebeten, einen Kurs zu erstellen, der Ihnen hilft moderne Websites visuell ohne Code zu erstellen. Und ich möchte bekannt geben, dass ich kürzlich einen umfassenden Kurs veröffentlicht habe, in dem Sie alles lernen , was Sie wissen müssen, um ein erstklassiger Webdesigner und Webentwickler zu werden . Sie werden lernen, wie Wandeln Sie Ihr Figma Design visuell in benutzerdefinierte Websites um und werden Sie ein erfolgreicher Freelancer wenn Sie mehr über die Farbtheorie erfahren und verstehen möchten , wie Sie atemberaubende Farbschemata für Ihre UI UX erstellen Projekte entwerfen. Sie können meinen anderen Kurs namens Erstellen erstaunlicher Farbschemata für Ihre UI-UX-Designprojekte lesen. Wenn Sie außerdem lernen möchten, wie man 3D-Szenen und 3D-Illustrationen erstellt , können Sie meinen anderen Kurs lesen. Bringen Sie Ihnen bei, wie Sie mit Blender ein 3D-Illustrator werden . Letzt möchte ich Ihnen dafür danken, dass Sie sich dieses Tutorial angesehen haben. Es war eine lange Reise für uns beide und ich hoffe, es hat euch gefallen. Ich wünsche Ihnen viel Glück und kann es kaum erwarten, Ihre Kunstwerke zu sehen.