Lerne Adobe Xd Webdesign: Entwirf professionelle Websites von Grund auf – UI/UX-Design

1. Adobe Xd Webdesign: Professionelle Websites von Grund auf – UI UX Design: Willkommen beim Adobe XD Mastery Kurs, wo Sie lernen, wie Sie eine schöne Website für Web und Mobile von Anfang bis Ende erstellen eine schöne Website für Web und Mobile , während Sie einen großartigen Workflow haben. Hey, ich bin Reno und ich werde dein Lehrer für diesen Kurs sein. fast 10 Jahren entdeckte ich meine Leidenschaft für Design und deshalb ging ich auf die Designschule, wo ich die Grundlagen zum Thema Design erlernte. Ich startete einen YouTube-Kanal, wo ich alles, was ich gelernt hatte, teilte. Dieser YouTube-Kanal gab mir genug Engagement, um meine erste Designfirma mit meinen Freunden zu gründen, und wir arbeiten für viele kleinere Unternehmen, aber auch für einige große Marken wie Coca-Cola, Microsoft und Adobe. Das war echt cool. Derzeit verbringe ich den Großteil meiner Zeit online zu unterrichten, denn das ist es, was ich wirklich gerne mache. Ich habe diesen Kurs für alle entworfen, die lernen möchten, wie man Websites mit Adobe XD entwirft. Es gibt viele ausgefallene Adobe XD-Kurse zum Thema App-Design, aber in diesem Kurs werden wir uns auf Webdesign konzentrieren. Denn realistisch, dort beginnen die meisten von uns als UI-Designer, die mit unseren Fähigkeiten Geld verdienen wollen. Aber wir werden eine vollständige Website mit vier Seiten und ein paar separaten Designs entwerfen, und ich werde Ihnen alle Bilder, die Symbole und die Schriftarten, die verwendet werden, um diese Websites zu erstellen, so dass Sie mit mir folgen können. Wir beginnen einfach und arbeiten nach und nach schneller, damit Sie genug Zeit haben, sich mit Adobe XD vertraut zu machen. Am Ende dieses Kurses können Sie mit Adobe XD Web- und Mobilseiten erstellen. Die Methode, die ich lehren werde, ist sehr mächtig, weil sie Ihnen erlaubt , bestimmte Elemente wiederzuverwenden, die Sie nur einmal erstellen müssen. Nachdem Sie mit der Homepage fertig sind, würde es wirklich einfach und schnell werden. Ich werde Ihnen auch einige der Design-Tricks zeigen , die verwendet werden, um meine Entwürfe besser aussehen zu lassen. Das bedeutet, dass wir nicht wirklich auf die Designtheorie eingehen werden, denn das Ziel dieses Kurses ist es, Ihnen Adobe XD beizubringen. Dieser Kurs richtet sich an alle, die Interesse an Webdesign haben und Adobe XD lernen möchten, aber er eignet sich besonders gut für Leute, die gerade Photoshop oder Illustrator verwenden , um ihre Websites zu entwerfen. Denn wenn Sie eine Website in Adobe XD entworfen haben, denke ich, dass Sie nicht zu Photoshop oder Illustrator zurückkehren werden. Schauen Sie sich zum Beispiel einfach das Werkzeug Wiederholungsraster an. Adobe XD können Sie Bilder einfügen, die Farbe ändern oder ganze Seiten mit dem Prototyping-Tool anklickbar machen. Es ist nur ein erstaunliches Tool für das UI-Design. Wenn Sie also daran interessiert sind, Adobe XD zu lernen, dann hoffe ich, Sie im nächsten Video zu sehen. 2. Willkommen zum Kurs! Was du erwarten kannst: Alles klar, willkommen in der Gore. Vielen Dank für die Anmeldung. Ich freue mich sehr darauf, anzufangen. Ich habe eine Menge Dinge für dich vorbereitet. Ich möchte ein paar Dinge sagen, bevor wir zuerst anfangen werden. In Kapitel 1 geht es um die Grundlagen. Wir werden wirklich langsam in Kapitel 1 gehen, denn ich möchte wirklich sicherstellen, dass Sie die Schlüssel zu kurzen Tasten kennen und wie Sie sich bewegen, wie Sie die Dinge ausrichten, denn das wird Ihnen in Zukunft viel einfacher machen. Die Art, wie ich meine Tastenkombinationen wie ich Zoom verwende, die Art und Weise, wie ich Elemente auswähle. Wenn du nur versucht hast zu lernen, was ich tue, wird es für dich so viel einfacher sein. Deshalb ist Kapitel 1 wirklich ein tiefer Einstieg in die Kontrolle, die Ausrichtungen, die Farben und alles. Sobald Sie dann mit der Gestaltung der Homepage beginnen, wird die Homepage einige Episoden nehmen. Aber dann, wie ich im Trailer sagte, werden die anderen Seiten wirklich schnell gehen, weil die Methode, die ich in diesem Kurs unterrichten werde, wirklich effizient ist. Sie bereiten eine Menge Dinge im Voraus vor und dann können Sie viele Elemente kopieren und wiederverwenden, um Ihre Seiten schneller zu erstellen. Nachdem Sie diesen ganzen Kurs abgeschlossen und alle Schritte durchgeführt haben, können Sie diese Elemente sogar für ein anderes Projekt verwenden. Denn für jedes Projekt brauchst du Dinge wie Titel, du brauchst Text, du brauchst Knöpfe. Wenn Sie dann ein neues Projekt haben, ändern Sie einfach die Stile und können diese dann in anderen Projekten wiederverwenden. Ich möchte sicherstellen, dass Sie sich daran halten, weil ich wirklich möchte, dass Sie ein Ergebnis bekommen. Wenn Sie Fragen haben, können Sie sie einfach unten lassen. Dann hoffe ich, dass Sie den Kurs wirklich genießen werden. Ich hoffe, Sie in der nächsten Episode zu sehen. 3. Hier die Downloads (nicht zu installieren: In Ordnung, Jungs. Ich freue mich sehr darauf, in Adobe XD einzutauchen. Das erste, was ich gemacht habe, ist sehr einfach für Sie, so dass Sie mit mir folgen können. Ich habe diesen Ordner erstellt, den Sie herunterladen können. In diesem Ordner finden Sie die erste Übungsdatei, die wir im nächsten Video öffnen werden. Ihr werdet mein endgültiges Design finden. Sie finden viele kostenlose Schriftarten, die Sie installieren können, und alle Dateien, die Sie benötigen, um die Website zu erstellen. Was ich möchte, dass Sie tun, ist auf den Link unten gehen und dann werden Sie zu einer Seite gehen. Was Sie tun werden, ist, dass Sie auf Download klicken, laden die ZIP-Datei auf Ihren Computer und extrahieren Sie sie auf Ihrem Computer. Wenn Sie auf einem Mac sind, können Sie einfach mit der rechten Maustaste klicken und auf Extrahieren klicken. Wenn Sie auf einem Windows sind, können Sie dies auch tun, wenn Sie WinZip oder WinRAR auf Ihrem Computer installiert haben. Auf den meisten Computern ist es bereits installiert. Sie können sehen, Extrakt mit WinRAR oder WinZip. Wenn Sie das noch nicht auf Ihrem Computer haben, können Sie das kostenlos herunterladen, indem Sie einfach Google, WinRAR oder WinZip eingeben. Sobald Sie das haben, können Sie alle Dateien im Inneren sehen. Dann ist das erste, was, bevor Sie auf eine XD-Datei klicken , dass Sie die Schriftarten installieren, weil ich bestimmte Schriftarten in meinen Designdateien verwendet habe. Wenn Sie dies vor der Installation der Schriftarten öffnen, können Sie die verwendeten Schriftarten nicht sehen. Ich möchte, dass Sie hier den Schriftartordner durchgehen und alle Schriftarten auswählen. Wenn Sie auf einem Windows sind, klicken Sie mit der rechten Maustaste und klicken Sie auf Installieren. Wenn Sie auf einem Mac sind, müssen Sie Schriftarten Buch öffnen. Gehen Sie einfach zu Ihrem Schriftartenbuch, öffnen Sie Ihr Schriftbuch, und ziehen Sie dann einfach alle Schriftarten hierher. Fügen Sie sie einfach in diese Liste ein. Ich habe das schon getan, also mache ich es nicht wieder. Dann sind Sie bereit, zur nächsten Episode zu gehen, wo wir unsere erste Übung öffnen, eine Grunddatei. Installieren Sie die Schriftarten und ich werde Sie im nächsten Video sehen. 4. Adobe Interface: Willkommen zurück in der vorherigen Episode, wir haben alle Dateien heruntergeladen, die wir brauchen und jetzt gehen wir in die Basic-Datei. Dies ist der Startbildschirm, wenn Sie Adobe XD zum ersten Mal öffnen. Ich sehe alle meine Gründe Dateien hier drüben, Sie werden wahrscheinlich nicht sehen, dass, wenn Sie noch nie XD geöffnet haben und sie Ihnen auch einige Optionen geben, um ein neues All-Teil zu erstellen. Aber vorerst habe ich eine sehr einfache Basic-Datei erstellt, die wir abdecken werden, also doppelklicken Sie einfach auf die „ Basic-Datei “ und das erste, was Sie sehen werden, ist dies. Die Grundlagen der Grundlagen. Ich gehe davon aus, dass die meisten Leute, die diesen Kurs gesehen haben, bereits ein wenig Erfahrung in der Erstellung einer Software haben. Vielleicht haben Sie in Photoshop, in Illustrator, vielleicht sogar in Werkzeugen wie Premiere Pro oder After Effects gearbeitet. Dann sind viele Dinge in Adobe XD gleich, aber es gibt ein paar wichtige Unterschiede, also selbst wenn Sie völlig neu sind, um eine Software zu erstellen, und dies wird leicht zu folgen sein. Aber wenn Sie ein wenig Erfahrung haben, werden Sie das wirklich schnell verstehen. Zunächst einmal ist die „Leertaste“ die Verschiebungswerkzeuge. Wenn Sie diese „Leertaste“ drücken, wenn Sie gehen, um zu sehen, dass sich Ihre Maus in einer Hand ändert und Sie können sich auf dem Bildschirm bewegen, so einfach klicken und ziehen, um sich zu bewegen. Wenn Sie dann vergrößern möchten, gibt es verschiedene Optionen, gibt es verschiedene Optionen, aber die einfachste Option und die Option, die ich immer verwende und meiner Meinung nach am schnellsten ist, ist das „Alt“ plus „Scroll“, wenn Sie also eine Maus haben, Sie können „Alt“ und dann „Scrollen“ drücken, und wo Sie Ihre Maus platzieren, ist dort, wo sie zu zoomen wird. Wenn Sie keine Maus haben, werde ich Ihnen auch einige Optionen zeigen, aber das ist die einfachste Option. Jetzt drücke ich „Alt“ und scrolle mit der Maus, also werde ich zu diesem Kreis zoomen. Dasselbe, wenn ich in diesen Teil zoomen möchte, aber ich bewege meine Maus und zoomen Sie auf diesen Teil hinein. Wenn Sie keine Maus haben und ein Trackpad haben, können Sie nur den Zoom verwenden, wie Sie auf einem Smartphone zoomen, um ein Foto zu vergrößern, können Sie zwei Finger verwenden und dann einen bestimmten Bereich vergrößern. Wenn Sie sich nicht bewegen möchten, können Sie auch die „Leertaste“ verwenden und sie so verschieben oder zwei Finger verwenden und dann einfach zu zwei Finger in die gleiche Richtung bewegen und auf diese Weise können Sie sich auch sehr reibungslos innerhalb Ihrer Leinwand bewegen, also ist das auch ein netter Weg. Nehmen wir an, Sie haben kein Trackpad und Sie haben keine Maus, was ich nicht empfehlen kann. Ich empfehle Ihnen, während Sie entwerfen, eine Maus zu verwenden. Sie können auch das Werkzeug hier auf der linken Seite verwenden und Sie können einfach ein Teil wie dieses auswählen und dann zoomen, und dann, wenn Sie „Alt“ drücken, können Sie zurückzoomen. Aber ich habe nie als Werkzeug verwendet, ich habe nur die Maus verwendet, also gehen Sie zurück zum Auswahlwerkzeug und drücken Sie dann „Leertaste“ und drücken Sie „Alt“, um zu vergrößern, drücken Sie „Alt“, um zu vergrößern, und machen Sie sich einfach mit dem Zoomen vertraut. Probieren Sie es einfach selbst aus und stellen Sie sicher, dass Sie verstehen, wie das funktioniert. Es gibt noch drei Kleinigkeiten, die ich dir zeigen möchte. Zunächst einmal ist das Verschiebenwerkzeug Wenn Sie also ein Element verschieben möchten, können Sie einfach auf das Element klicken und an eine beliebige Position ziehen. Klicken Sie und ziehen Sie, und es wird aus Zeiten, dass Sie ein Element beim Ausdehnen verschieben. Du wolltest das nicht tun, also musst du einen Schritt zurück gehen. Sie können das hier tun, „Bearbeiten“ und dann „Undo Move Object“ wie folgt und Sie können es wieder tun. Boom, und dann bist du zurück und wie du sehen konntest, gibt es hier eine Verknüpfung und es heißt Befehl Z oder auf einem Windows ist es Control Z. Wenn du es einfach so bewegst und du „Befehl Z“ oder „Control Z“ drückst, wird es einfach zurückgehen. Wenn Sie wie nein waren, war es besser in diesem alten Ort, Sie drücken einfach „Befehl Z“, aber dann mit „Shift“ und dann wird es wieder gehen, wie Sie hier sehen können, also ist das alles, was Sie wissen müssen für alles in diesem Raum. Wir haben auch eine Bar hier drüben. Wir haben über das Auswahlwerkzeug gesprochen Wenn Sie also das Auswahlwerkzeug ausgewählt haben, können Sie Dinge auswählen. Wenn Sie über das Rechteck-Werkzeug verfügen, können Sie Rechtecke wie folgt erstellen. Wenn Sie Rechteck perfektionieren möchten, verwenden Sie einfach „Shift“, so erstellen Sie ein perfektes Rechteck. Wenn Sie es dann loslassen möchten, stellen Sie sicher, dass Sie zuerst die Maus loslassen und dann die „Shift“ loslassen. Dies ist wichtig, denn wenn Sie es umgekehrt machen, so dass Sie zuerst die „Shift loslassen, dann wird es zurück springen, also zuerst die Maus loslassen und dann die „Shift“ loslassen, um ein perfektes Rechteck zu machen. Dies funktioniert das gleiche für Kreis, also klicken Sie einfach auf den Kreis, wenn Sie einen perfekten Kreis erstellen möchten, drücken Sie „Shift“, Boom. Zuerst eine Maus freigegeben und dann die „Shift“ loslassen, und dann werden Sie einen perfekten Kreis haben. Dasselbe für Rechtecke, ziemlich einfach und mit Linien, wird es nur eine horizontale oder eine diagonale oder eine vertikale Linie erstellen. Wenn Sie die „Shift“ verwenden und andernfalls können Sie einfach eine beliebige Richtung verwenden, die Sie wollen. Der Bleistift, über den wir in einem zukünftigen Video sprechen werden. Das Textwerkzeug, wenn Sie auf das „Text-Tool“ klicken, können Sie einfach überall drücken und Sie können mit der Eingabe beginnen, was Sie wollen, und dann, wenn Sie zurückgehen möchten und Sie einen Text auswählen möchten, müssen Sie zum Auswahlwerkzeug zurückkehren und dann können Sie es auswählen. Dies ist für alle anderen Werkzeuge gleich Wenn Sie sich zum Beispiel innerhalb des Rechteck-Werkzeugs befinden und Sie sich im Inneren von hier befinden. Wenn Sie dieses Rechteck verschieben möchten, müssen Sie zurück zum Verschiebenwerkzeug gehen, und als Abkürzung dafür, das „V“ ist, ist dies einer der Schlüssel, die Sie immer und immer wieder verwenden werden, so dass Sie diese runter, wenn Sie wollen. Aber das ist eines der Dinge, die Sie sehr oft verwenden werden. Mein Cursor ist momentan kein normaler Mauszeiger. Wie Sie sehen können, das ist kleine Rechtecke, also dann wissen Sie, dass Sie auf einem Rechteck sind, um zu sehen, ob Sie jetzt sehen, ist ein Kreis, gerade jetzt ist Rechteck, und dann, wenn ich drücke „V“, Ich werde zurück zu der Bewegung Tool und ich kann diese Dinge bewegen. Ich kann sogar verschiedene Dinge auswählen, indem ich so drücke und halte und dann das Löschen mit dem Backspace-Tool wie folgt, ziemlich einfach. Dann ist die letzte Sache der Grundlagen, die ich zeigen wollte, das Property Panel, denn jetzt haben wir über diesen Teil gesprochen. Jetzt gibt es auch einen großen Teil hier drüben mit vielen Optionen Wenn Sie also auf ein Element klicken, erhalten Sie viele Optionen für diesen Artikel. Das Element, das einen blauen Umriss hat, jetzt ausgewählt ist, und Sie können diese Einstellungen jetzt hier ändern. Dies ist beispielsweise die Schriftgröße. Wenn Sie auf diese Schaltfläche klicken und zum Beispiel 60 eingeben , wird dieser Text größer sein. Im Moment werde ich es um 52 Uhr zurücklegen. Wenn Sie die Farbe der Texte ändern möchten, gehen Sie hier rüber, um Farbe zu füllen. Sie können einfach die Farbe hier ändern, um eine andere Farbe, die Sie wollen, also vielleicht so etwas, lila, aber Sie können auch das Puppenwerkzeug hier drüben verwenden und das ist wirklich schön. Sie haben endlich einen kurzen Schlüssel für diese Bearbeitung, weil sie dies in einer früheren Version nicht hatten, es ist jetzt unter „I“ oder klicken Sie einfach darauf und hier können Sie eine Farbe auswählen, die Sie wollen, also zum Beispiel, diese Farbe, und dann wird es sich ändern. Wenn Sie nur das „I“ verwenden, können Sie einfach „I“ drücken und so sein, oh, vielleicht ist diese Farbe schön, vielleicht ist diese Farbe schön, und vielleicht ist diese Farbe schön, also in diesem rechten Panel können Sie die Farbe auf jede andere Farbe, die Sie wollen. Hier drüben ist dies die Position, also wenn Sie dies auf 300 ändern, wird die Position ändern. Ich bin eher wie ein visueller Designer, also möchte ich nur Dinge auf der Zeichenfläche bewegen und nicht wirklich einen Blick darauf werfen. Aber manchmal, wenn Sie einen Kreis erstellen wollen, der zum Beispiel 50 mal 50 Pixel ist , können Sie das hier ändern. Dies ist die Breite, das ist die Höhe, die X- und die Y-Position auf der Leinwand. Das ist wirklich alles, was Sie über diese Seitenwand wissen müssen. Das sind die Grundlagen für das Verschieben und Wechseln von Objekten. Im nächsten Video werden wir über das Ebenenfenster sprechen. 5. Ebenen in Xd verstehen: In Ordnung. Also in diesem Video werden wir in das Ebenen-Panel eintauchen. Dies ist wichtig zu verstehen. Du wirst nicht wirklich viel Zeit hier verbringen aber wenn du das nicht verstehst, wirst du in Schwierigkeiten geraten. Klicken wir also einfach auf das Ebenenbedienfeld. Sie werden es öffnen, indem Sie hier drüben klicken, und jetzt können Sie nur eine Zeichenfläche und eine Pasteboard sehen. Wenn Sie innerhalb Ihrer Zeichenfläche klicken, gehen Sie in alle Ebenen, die sich innerhalb dieser Zeichenfläche befinden. Sie können verschiedene Dinge hier zum Beispiel sehen, all diese Kreise, die Sie hier sehen können, Sie können die Textebenen sehen, und Sie können die, ein paar Ordner hier sehen . Wenn du auf einen Gegenstand klickst, leuchtet er hellblau. Wenn Sie mehr Elemente als einmal auswählen, leuchtet sie auch blau, damit Sie wissen, was die Ebene ist. Wenn Sie also zum Beispiel entwerfen und sehen möchten, wie Ihr Design ohne diese Box aussieht, können Sie hier rüber gehen und das Auge drücken, und das wird diese Ebene verbergen. Es wird also nicht anklickbar sein, aber es wird immer noch innerhalb des Ebenenbedienfelds gespeichert. Was Sie auch tun können, ist diese Ebene zu sperren, dies ist auch eine nette Funktion, weil dann wird es sichtbar sein, aber es wird diese Sperre geben. Wenn Sie zum Beispiel viele andere Elemente überlappen, und Sie möchten nicht, dass sich dieses Element bewegt, wenn Sie andere Dinge bewegen , so dass Sie zum Beispiel eine Menge Elemente hier auswählen, die Sie verschieben möchten, und dann wird der Layer, der gesperrt ist, ebenfalls ausgewählt, aber er wird nicht verschoben, da er gesperrt ist. Dies ist also auch eines der netten Dinge, die Sie tun können, und ich schlage nicht vor, dass Sie in das Ebenenbedienfeld gehen und auf Sperre klicken, weil Sie auch Befehle oder Steuerung L verwenden können . Das ist, was ich immer tue, ich drücke einfach Befehl L, um zu sperren oder entsperren Sie es. Was Sie auch sehen können, ist, dass diese Ebene oder diese Gruppe, die ich sagen sollte, ist über dieser Box visuell. Dies gilt auch für das Ebenenbedienfeld. Wenn Sie also dieses Feld unter das Hauptfeld verschieben möchten, klicken Sie auf das Bildfeld und verschieben Sie es dann unter. Stellen Sie also sicher, dass Sie diese blaue Linie sehen, mit einem Kreis am Anfang und dann lassen Sie sie los, so jetzt, dies ist unter der Hauptbox. Eigentlich befindet sich dieses Feld jetzt unter allen Ebenen. Selbst wenn wir es nach oben verschieben, werden Sie sehen, dass es sich unter allen Ebenen befindet. Also, wie gesagt, wenn Sie dieses Feld ganz nach oben verschieben möchten, können Sie es so tun, aber ich rate nicht, das Ebenenbedienfeld zu verwenden, und verwenden Sie einfach kurze Tasten, weil Sie dies auch mit kurzen Tasten tun können. Wenn Sie also Befehlstaste und dann die Klammern drücken , können Sie es auch langsam einen Schritt nach dem anderen nach hinten bringen. Ich werde das Ebenenfenster öffnen, um Ihnen zu zeigen, was ich tue. Also, wenn Sie die rechte Klammer Taste verwenden, wird es mit Befehlen gehen, so Befehle rechte Klammern oder links, dann werden wir nach oben oder unten gehen. Testen Sie das also selbst und sehen Sie, wie es funktioniert. Wenn Sie es dann ganz nach oben verschieben möchten, Sie auch Umschalttaste hinzu. Sie drücken also die Strg-Taste oder Befehle, dann die Umschalttaste und dann die rechten Klammern. So bewegen Sie es den ganzen Weg nach oben oder den ganzen Weg nach unten. Ich benutze das die ganze Zeit, also rate ich, dass Sie auch diesen aufschreiben. Ok. Das ist es also für das Ebenenbedienfeld. 6. Auswahl und Vermehrung: Willkommen zurück. In diesem Video werden wir in die Auswahl eintauchen. Bei der Auswahl von Elementen ist das Verschieben von Elementen ein wesentlicher Bestandteil von Adobe XD. Lassen Sie uns zuerst einige der Grundlagen abdecken. Zum Beispiel, wenn Sie dies kopieren möchten, zwei Mal. Sie können die Alt-Taste drücken und sie dann nach links ziehen. Drücken Sie Alt, klicken Sie darauf, und ziehen Sie. Auf diese Weise können Sie ein Duplikat erstellen, wie Sie sehen können. Tun Sie das noch einmal und lassen Sie es los. Um es noch einmal zu üben, werde ich es löschen. Stellen Sie sicher, dass Sie beim Duplizieren zuerst den Mausklick und dann die Alt loslassen. Wenn Sie nun zum Beispiel testen möchten, wie es aussieht, wenn Sie diese beiden Felder nach unten ziehen, können Sie sie so nach unten ziehen oder Sie können es gleichzeitig tun. Das kannst du mit Shift machen. Wenn Sie auf ein Element klicken und die Umschalttaste gedrückt halten, können Sie zwei Elemente auswählen. Wie Sie jetzt im Ebenenbedienfeld sehen können, sind zwei Elemente ausgewählt, sodass Sie diese nach unten ziehen können. Wenn ich Shift halte, geht es nicht außerhalb der vertikalen Linie. Dies ist das gleiche für die Horizontale. Ich gehe zurück. Wenn Sie diese drei auswählen möchten, Sie auf Umschalttaste, klicken Sie auf, klicken Sie auf. Halten Sie nur die Umschalttaste gedrückt und klicken Sie auf die gewünschte Auswahl, um sie zu verschieben. Ein weiterer Trick, den ich Ihnen zeigen möchte, ist die Auswahl mit Befehl. Wenn sich etwas in einer Gruppe befindet, zum Beispiel haben wir hier eine Bildbox, und dann können Sie den Button sehen, der auch ein Ordner ist. Wenn Sie beispielsweise diesen Text markieren möchten, möchten Sie normalerweise auf klicken, doppelklicken, doppelklicken, doppelklicken und dann den Text haben. Das bedeutet, dass Sie achtmal klicken müssen. Wenn Sie das überspringen möchten, drücken Sie einfach Befehl, wie Sie sehen können, können Sie einfach durch alle Ordner oder Gruppen auswählen. Kürzlich haben sie eine neue Funktion hinzugefügt, die wirklich schön ist. Angenommen, Sie möchten die Farbe des gesamten Textes hier ändern. Normalerweise konntest du das nicht tun, aber jetzt kannst du es. Wenn Sie die Befehlstaste drücken und dann zu diesem gehen, drücken Sie die Umschalttaste, so dass Sie UMSCHALTTASTE und Befehlstaste drücken, weil Befehl Sie durch alle Ebenen klicken und mit der Umschalttaste mehrere Elemente auswählen können. Jetzt können Sie verschiedene Elemente auswählen, auch wenn sie sich in verschiedenen Ordnern oder Gruppen befinden. Dies war vorher nicht möglich, also ist das super nett. Jetzt können Sie zum Beispiel die Deckkraft ändern. Wir werden das in diesem Design nicht tun, aber das wollte ich Ihnen zeigen. Wie ich bereits gezeigt habe, können Sie auch die verschiedenen Elemente durch Ziehen auswählen, aber manchmal haben Sie einen Hintergrund. Zum Beispiel, wenn wir diesen Ordner haben und dies oben auf hier, und Sie gehen, um es so zu wählen, wählen Sie auch den Hintergrund, das ist nicht, was Sie immer wollen. Klicken Sie einfach auf Umschalttaste, klicken Sie auf und klicken Sie auf. Jetzt können Sie die nach unten ziehen. Nehmen wir an, Sie möchten diese Funktion verwenden, und Sie haben auch den Hintergrund ausgewählt. Sie können die Auswahl des Hintergrunds aufheben. Lassen Sie mich einfach den Ordner schließen, damit Sie sehen, was wir hier tun. Ich werde all diese auswählen. Wenn ich nun die Umschalttaste drücke und auf die große Hauptbox klicke , wird die Auswahl des Hauptfeldes aufheben. Jetzt kann ich diese drei Teile einfach verschieben, obwohl ich mit der ganzen Auswahl so angefangen habe. Wieder wählen Sie alles aus und drücken dann die Umschalttaste für das Ding, das Sie nicht innerhalb dieser Auswahl möchten , und dann können Sie alle anderen Teile verschieben. Alles klar, jetzt werde ich es zurückschieben. Ich wähle die aus. Ich werde Shift drücken, gehen und ich werde es so lassen. Das ist für die Auswahl, sehr einfach, aber eine sehr wichtige Sache zu wissen. 7. Alignment: Willkommen zurück. In dieser Episode werden wir über Ausrichtung sprechen, auch sehr wichtig in Adobe XD, aber im Web-Design im Allgemeinen. Wenn Sie Ihre Objekte nicht richtig ausrichten und Sie keinen weißen Abstand verstehen, werden Ihre Entwürfe unordentlich aussehen. Was ich Ihnen jetzt zeigen werde, ist, wie Sie sich in Adobe XD richtig ausrichten können. Wie Sie wahrscheinlich bereits gesehen haben, ist, dass, wenn Sie ein Element in Adobe XD verschieben, viele lila Zahlen erscheinen und manchmal sogar diese Felder. Diese Boxen sind sehr schön, weil sie Ihnen sagen , wie weit der Abstand zwischen diesen Elementen ist. Adobe XD wird den Abstand zwischen den Elementen betrachten und dann wird er Ihnen sagen, hey, wollen Sie den gleichen Abstand hier drüben haben? Viele Male möchten Sie das, also ist es sehr schön, diese Funktion zu verwenden. Gehen wir einfach zu diesem Text hier drüben. Zum Beispiel, wenn ich diesen Text ziehen werde, wird Adobe XD irgendwann wie, hey, wollen Sie auch 10 Pixel von diesem in diesen Text, das gleiche, wie Sie hier drüben haben. Das ist es, was Sie tun können. Die Zahlen, die Sie auf dem Bildschirm sehen werden, sind die Pixel. Die Position eines Elements, können Sie sehen, dass hier drüben, also wenn Sie vorhaben, dies zu ändern wird sich die Zahl hier auch ändern. Jetzt werde ich es nur bei 30 belassen, denn das ist der gleiche Abstand wie wir hier drüben haben. Aber ich muss Ihnen eine Sache zeigen und das ist, dass es den Abstand von unten in Ihren Textfeldern zählt . Zum Beispiel wird ein Leerzeichen berechnet, wie Sie nicht am Ende dieses Textes sehen können, sondern am Ende dieser Textfelder. Wenn ich dieses Textfeld ein wenig kleiner mache, wird es neun Pixel mehr sein, wie Sie sehen können. Das ist eines der wichtigsten Dinge, die Sie über das Ausrichtungswerkzeug wissen müssen. Was ist auch ein wirklich nettes Feature ist, dass Sie Elemente sehr schnell ausrichten können , ohne tatsächlich versuchen, es so zu tun. Zum Beispiel, wenn Sie ein Designer sehr chaotisch wie folgt haben, was Sie tun können, ist, dass Sie alle Ihre Elemente auswählen und dann können Sie sie nach oben verschieben. Hier sind die Ausrichtungswerkzeuge. Zum Beispiel, wenn Sie dieses Element in der Mitte Ihrer Leinwand haben möchten, klicken Sie einfach darauf und klicken Sie auf diesen. Jetzt ist es perfekt in der Mitte ausgerichtet. Was Sie auch mit diesem Tool tun können, ist sicherzustellen, dass sich diese Schaltfläche zum Beispiel in der Mitte dieser ganzen Box befindet. Zum Beispiel, wenn Sie eine lange Schaltfläche wie diese haben und Sie möchten, dass die Schaltfläche genau in der Mitte ist oder sagen wir einfach diese Texte, wollen Sie diesen Text in der Mitte dieses Buttons haben. Was Sie tun können, ist, Sie können einen Text auf der Schaltfläche auswählen und dann können Sie das Ausrichtungswerkzeug verwenden. Ich zeige Ihnen, Sie werden Befehl drücken, klicken Sie auf den Text, drücken Sie Shift und klicken Sie dann auf die Schaltfläche. Jetzt muss ich Text und die Schaltfläche ausgewählt, und wenn ich darauf klicke, wird es meinen Text genau in der Mitte ausrichten. Dies ist eines jener Dinge, die einfach super schön zu arbeiten ist. Auch wenn ich diesen Knopf in der Mitte dieser Box ausrichten möchte, kann ich das auch mit dem gleichen Trick tun. Aber für dieses Beispiel, wenn ich das ausrichten werde, dann wird es nicht an meinen Texten und dem Titel ausgerichtet. Für dieses Beispiel möchte ich nur wissen, was der Abstand zwischen diesem ist, und ich möchte es auch hier anwenden. Sie können einfach die Schaltflächen auswählen, also doppelklicken Sie darauf und stellen Sie sicher, dass Sie die Schaltfläche mit dem Text haben. Wenn Sie nun die Größe verkleinern oder vergrößern möchten, weiß XD automatisch, dass dieses Element in der Mitte sein soll. Woher weiß XD das? Nun, sie wissen das, weil Sie gerade diesen Text in der Mitte ausgerichtet haben. Obwohl dieser Text links ausgerichtet ist, wird XD sogar verstehen, dass Sie dies in der Mitte haben möchten. Wenn Sie den Abstand von diesem zu diesem Badge erhalten möchten, drücken Sie Alt und dann werden Sie sehen, dass dies 50 Pixel ist. Wenn Sie nur das gleiche auf der anderen Seite wollen, was Sie tun können, ist, dass Sie es mit der Maus erhöhen können, um es 50 zu machen. Oder wenn du weißt, dass dies 50 ist und du weißt, dass es 62 ist, dann weißt du, dass du nur 12 Pixel mehr brauchst. Also kannst du einfach hier rüber gehen und plus 12 und Boom tippen. Jetzt ist es auf 290 und jetzt wissen Sie nur, dass dies perfekt ausgerichtet ist. Okay, also sagen wir, Sie wollen, dass diese Gegenstände perfekt unter dieser Hauptbox ausgerichtet sind. Was Sie tun werden, ist, dass Sie gehen, um sicherzustellen, dass einer dieser Elemente ist nur berühren die Außenseite der Box, spielt keine Rolle, und die andere, die Sie auch wollen, dass haben. Sie können es sogar so haben, solange es an der Außenseite der Box ausgerichtet ist. Jetzt, selbst wenn dieses Element wie hier ist, können Sie alle auswählen und sie so an der Spitze ausrichten, so dass sie alle ausgerichtet werden und dann dies verwenden. Wenn Sie auf „Horizontal verteilen“ klicken, wird der Abstand zwischen den Elementen berechnet. Du wirst es so haben, also ist das super nett. Jetzt können Sie einfach alle von ihnen greifen und sie auch 50 Pixel zu dieser Hauptbox machen, und jetzt sieht Ihre Ausrichtung ziemlich schön aus. Noch ein Mal, um das zu üben. Nehmen wir an, dies ist überall an der Stelle, an der Sie sie auswählen , Sie machen sie zum Beispiel in der Mitte ausrichten und dann klicken Sie auf diesen und der Abstand zwischen diesen Elementen wird gleich sein. Wenn Sie immer noch denken, dass dies schwierig ist, hat Adobe XD eine neue Funktion veröffentlicht, die heißt Rulers. Wenn Sie Photoshop oder Illustrator verwendet haben, wissen Sie dies bereits. Aber wenn Sie auf die Seite Ihres Kunstboards gehen, zum Beispiel, haben wir die gleiche Situation wie diese hier drüben und Sie sehen diese Zeile nicht wirklich, was Sie tun können, ist, dass Sie auf diesen Artikel klicken können, dann zur Seite gehen und dann in einem Lineal verfolgen und machen Sie es einfach an der Seite zu klappen. Tun Sie das auch auf dieser Seite so. Boom, es wird einfach so bleiben, wie du siehst. Dann können Sie es einfach sehr einfach an diesen Teilen ausrichten, sie auswählen, sie so machen, wie es bereits war, und dann setzen Sie es so, wählen Sie alle aus und machen Sie sie 50 Pixel zum anderen Element. Übrigens können Sie auch Elemente verschieben, die Pfeiltasten sind. Mit einem Klick wird es auf Pixel bewegen. Wenn Sie diese Verschiebungen verwenden, können Sie 10 Pixel verschieben. Jetzt ist das 44, also muss ich es jetzt nur 50 Pixel so machen. Das war's, wenn du die entfernen willst, kannst du sie einfach von der Seite lenken und boom, jetzt sind sie weg. Ziemlich einfach zu bedienen und es wird Ihr Design viel besser aussehen lassen. Okay, das war's also für diese Episode.Ich werde dich im nächsten Video sehen. 8. Das nützliche Assets Panel: Willkommen zurück. In dieser Folge werden wir einen Blick auf die Asset-Spalte werfen. Die Asset-Spalte finden Sie hier. Wenn Sie auf klicken, werden Sie es öffnen. Dies ist auch eines der Dinge, die beginnende Designer nicht so oft verwenden. Aber es ist so wichtig, denn wenn Sie dies verwenden, wird es Ihr Design viel besser aussehen lassen. Weil Sie nicht überall mit Ihren Schriftarten und den Farben gehen. Was ich Ihnen zeigen möchte, ist etwas sehr Nettes. Zum Beispiel, wenn Sie Ihre Farben hier haben, ist dies eine Farbpaletten. Es ist super schön, dies irgendwo in Ihren Designs zu haben, so dass Sie einfach das Auge verwenden können , um eine Farbe zu wählen. Aber was noch schöner ist, ist die Nutzung der Vermögenswerte. Zum Beispiel, wenn ich alle diese Ebenen auswählen werde, kann ich hier klicken und eine Farbe, ich kann auf das Plus klicken. Nun werden alle Farben mit den tatsächlichen Hex-Codes Änderungen an den Farbanteilen sein. Das bedeutet, dass, wenn ich hier eine Farbe ändern werde, sie sich in den gesamten Dokumenten ändern wird. Zum Beispiel haben wir dieses Lila hier drüben. Dies ist das gleiche lila auf allen Titeln und den Schaltflächen. Mal sehen, es ist 7768CC, wie Sie 7768CC sehen können. Nehmen wir an, Sie arbeiten für einen Kunden oder Sie haben eine eigene Website und Sie haben entschieden, dass Sie das Design nicht mehr mögen und Sie wollen blau als Ihre Hauptfarbe haben. Nun, wenn Sie eine große Website haben und Sie nur alle Farben ändern möchten, müssen Sie nur alle diese Ebenen finden. Sie müssen nur innerhalb von 100 verschiedenen Schichten oder vielleicht sogar mehr als das gehen. Es ist schrecklich. Deshalb verwende ich die Vermögenswerte. Nun, wenn ich hier in den Assets auf Bearbeiten klicken und ich weiß, dass diese Farben alle Sätze auf die gleiche Farbe sind. Jetzt kann ich es ändern und alle Elemente in meinem Dokument ändern sich, wie Sie hier sehen können. Dies ist eine sehr schnelle Möglichkeit, die verschiedenen Farben in Ihrem Design zu testen. Jetzt werde ich nur außerhalb davon klicken und Control Z drücken, um zurück zu gehen. Aber ich schätze, du verstehst, warum das jetzt so nützlich ist. Dies gilt auch für die Textebenen. Zum Beispiel, wenn ich hier einige Textblöcke vorbereitet habe und ich möchte, dass dieser Text die Texte auf allen Haupttexten auf meiner Website ist. Dies ist 18 Pixel und seine 28 Pixel in der Zeilenhöhe. Das ist übrigens die Höhe zwischen den Zeilen. Wenn ich das abnehme, wirst du sehen, dass es sich ändern wird. Ich bin auch glücklich mit der Farbe. Was ich jetzt tun kann, ist, dass ich einen Charakterstil hinzufügen werde. Jetzt wird es einen Zeichenstil hinzufügen. Nun, wenn ich zu diesem hier gehe, lass uns sehen, was das ist. Das ist 16. Sagen wir mal, ich will dasselbe hier drüben haben. Ich kann einfach darauf klicken und jetzt wird es sich ändern. Jetzt sind diese alle mit den Charakteren hier verbunden. Es ist das gleiche Prinzip. Wenn ich auf Bearbeiten und sogar klicke, sagen wir einfach, ich will eine andere Schriftart arial, es wird sich in den gesamten Dokumenten ändern. Ich werde es jetzt bei Montserrat zurücklegen. Sie können sogar die Farbe des Textes ändern, wenn Sie möchten, da die Farbe auch innerhalb dieses Zeichenstils gespeichert wird, wie Sie hier sehen können. Jetzt zeige ich Ihnen ein echtes Lebensbeispiel. Wenn Sie zurück zum Finder gehen, können Sie mein endgültiges Design öffnen, Rino Datei. Klicken Sie einfach darauf und es öffnet sich. Wie Sie sehen können, habe ich viel mehr Zeichenstile in diesem Dokument hier hinzugefügt. Wenn Sie hineinzoomen, werden Sie sehen, dass ich verschiedene Stile für diese Website habe. Zum Beispiel, dieser Titel hier drüben ist 36. Sie können das auch hier sehen. Es ist das gleiche für diesen Titel. Aber ich habe auch Charakterstile hinzugefügt, 40 verschiedene Farben, wie Sie hier sehen können. Es gibt eine letzte Funktion, die ich jetzt nicht anzeigen werde, aber das sind Komponenten, es ist auch Teil der Asset-Spalte. Dies ist zum Beispiel, wenn Sie einen Fußzeilenentwurf haben, den Sie auf allen Seiten wiederholen möchten , und Sie möchten das gleiche Design auf allen Seiten verwenden, verwenden Sie die Komponenten. Aber das war's vorerst. Sie müssen nur die Charakterstile und die Farben kennen. Wir sind fast fertig mit den Grundlagen, also werde ich Sie im nächsten Video sehen. 9. Kunstwerke. Alles, was du wissen musst.: Zeichenflächen, warum verwenden Sie Zeichenflächen? Gut vor allem für Seiten. Wenn ich zu meiner endgültigen Entwurfsdatei zurückgehe. Wie Sie in diesem Design sehen können, wenn ich diesen schließen werde. Ich habe meine Zeichenflächen benannt. Dies ist die Zeichenfläche für meine Homepage. Dann habe ich eine andere Zeichenfläche für die Designseite Home Mobile und dann für die Portfolio-Seite und wie Sie sehen können, sind dies die Zeichenflächen, die ich erstellt habe und ich ihnen einen Namen gegeben habe. Sie können den Namen Ihrer Zeichenfläche einfach ändern, indem Sie darauf doppelklicken, zum Beispiel ist dies die V1. Ich habe es genannt, aber Sie können das auch in Vietnam ändern, zum Beispiel, und dieses nach Indonesien. Auf diese Weise können Sie einfach Ihr Design strukturieren. Eine Sache, die Sie wissen müssen, wenn Sie zu weit hinauszoomen, werden Sie diese Punkte sehen. Sie müssen ein wenig vergrößern, um die tatsächlichen Namen zu sehen. Sie möchten mit den Namen für Ihre Zeichenflächen arbeiten. Es ist nicht nur schön für Ihren eigenen Workflow, sondern auch wichtig, wenn Sie in Zukunft mit dem Prototyp arbeiten. Denn auch mit dem Prototyp können Sie einfach mit der rechten Maustaste klicken und dann den Namen der Zeichenfläche durchsuchen , zu der Sie einen Link erstellen möchten. Ich schlage vor, dass du immer nur gute Namen auf deinen Zeichenflächen verwendest. Wie erstellen Sie eine neue Zeichenfläche? Gehen wir zurück zur Übungsdatei. Sie können es einfach auf die gleiche Weise kopieren, wie Sie Elemente kopieren , indem Sie Alt gedrückt halten und es dann verfolgen, so etwas und dann können Sie den Namen in Zeichenfläche 2 ändern, zum Beispiel, oder Sie können auf die Zeichenfläche klicken Sie hier drüben. Ich werde das hier schließen und dann siehst du alle Optionen für die Zeichenfläche hier drüben. Sie können ein Web verwenden, z. B. 1366. Das kannst du tun. Sie können eine Zeichenfläche ziehen, wenn Sie möchten. Aber was ich die meiste Zeit mache, ist nur eine gute Zeichenfläche zu machen und dann habe ich nur dupliziert. Aber wenn ich ein mobiles Design will, gehe ich einfach auf die Zeichenflächen und gehe zu iPhones 6/7/8 und dann kann ich die Zeichenfläche einfach viel größer machen, wenn ich muss. Was Sie auch sehen werden, ist diese blaue Linie hier drüben. Dies ist die Scroll-Position. Wenn Sie zu meiner endgültigen Entwurfsdatei zurückkehren, können Sie das auch hier sehen. Auf der mobilen Designseite können Sie sehen, dass die Linie hier drüben ist. Dies ist nur die Standardposition und Sie werden dies benötigen, wenn Sie gehen, um auf spielen hier klicken. Lassen Sie uns ein wenig hinauszoomen und wenn Sie auf Play klicken, erhalten Sie eine Vorschau Ihres Designs. Jetzt ist die Bildlaufposition unten hier drüben, und das scheint ziemlich normal zu sein, aber wenn ich diese Position ändere, aber wenn ich diese Position ändere,werde ich den Wert kopieren, damit ich ihn nicht vergessen werde. Wenn Sie die Position so ändern und dann auf Play drücken, werden Sie eine Vorschau wie diese bekommen und das ist natürlich nicht das, was Sie wollen. Sie wollen ein normales Telefondesign und das ist, warum Sie es an, dass halten sollten und das ist super nett, wenn Sie gehen, um einen Prototyp zu machen oder Sie wollen einfach nur Ihr Design jemand anderen zeigen. Sie können dies auch für Ihre Homepage tun, zum Beispiel, ich habe es nicht wirklich auf dieser Homepage hier, weil es eine keine setzt, aber Sie können es auf vertikal setzen und jetzt ist es auf 4.000 Pixel. Das ist natürlich nicht gut, denn dann werden Sie die ganze Seite sehen und Sie können nicht durch sie blättern. Jetzt werden Sie es nur bei 800 zum Beispiel setzen, vielleicht so etwas und dann, wenn Sie auf die Vorschau klicken, können Sie Ihre Website im Vollbildmodus wie folgt sehen. Alles klar, das ist alles, was Sie über Zeichenflächen wissen müssen. Gehen wir zur nächsten Episode. 10. Wo du die neuesten Vorgefertigten Vorlagen bekommen: Willkommen zurück. In diesem Video werde ich Ihnen zeigen, wo Sie vorgefertigte Vorlagen erhalten können. Lassen Sie uns zuerst die Haupt-Übungsdatei für jetzt bereinigen. Ich werde das einfach löschen und jetzt in der Datei speichern. Wenn Sie also kein sehr erfahrener Designer sind oder gerade keine Inspiration für ein Design haben, können Sie auf die vorgefertigten Template-Kits zugreifen , wenn Sie auf Datei klicken und dann gehen Sie, um UI-Kits zu erhalten, sie haben verschiedene UI Kits von Apple, Google und Microsoft. Ich habe bereits die richtigen für Sie innerhalb des herunterladbaren Ordners heruntergeladen. In diesem Ordner, Vorgefertigte Kits. Wenn Sie also zum Beispiel auf „Google Material Design“ klicken und diese Datei öffnen, erhalten Sie eine große Datei mit vielen verschiedenen Design-Elementen von Google. Also lassen Sie uns einfach ein wenig hineinzoomen. Sie werden alle Schriftarten sehen, die sie verwenden, Sie werden ihre Symbole sehen, und Sie können einfach einen Blick auf diese Symbole werfen, wenn Sie ein Symbol zum Beispiel für Ihre Website benötigen und Sie können es einfach kopieren, weil dies nur eine XD-Datei ist, super nett. Schlage ich vor, dass du einfach alles von Google oder von jemand anderem kopierst? Nein. Ich schlage vor, dass Sie dies zur Inspiration verwenden. Aber zum Beispiel, wenn Sie eine Checkbox erstellen möchten, hier ist die Checkbox von Google. So kann diese Datei Ihnen nur ein paar nette Inspiration geben. Dies konzentriert sich hauptsächlich auf App-Design, wie Sie sehen können, aber es gibt ein paar nette Dinge, die Sie auch für Websites verwenden können. So zum Beispiel Checkboxen, Radio-Boxen und Schaltflächen wie diese. Aber Sie könnten einfach auf klicken und Sie können sie in Ihre eigene Datei kopieren. Mac OS hat auch ein schönes Kit. Klicken Sie auf die UI-Elemente und klicken Sie dann auf diese Datei. Wie Sie hier sehen können, sind die Mac OS-Dateien für Adobe XD. Natürlich werden Sie nicht nur eine Nachricht wie diese auf Ihrer Website setzen, aber Sie können diese zur Inspiration verwenden. Hier sind einige nette Dinge zum Beispiel, eine Tab-Leiste mit verschiedenen Elementen, eine Sternbewertung, ein Schieberegler wie dieser oder vielleicht ein Dropdown-Menü. Wie entwerfen Sie ein Dropdown-Menü? Der letzte, den ich Ihnen zeigen möchte, ist von Microsoft. Das ist auch ein netter. Wenn Sie auf die WindowsUIXD klicken. Dies ist ein ziemlich interessanter Moment, weil ich denke, dass Windows die nützlichsten Optionen für ein Website-Design hat . Wenn Sie die Ansicht vergrößern möchten, sehen Sie alle Schaltflächen, z. B. einen Hyperlink. Dies ist auch eines der Dinge, die die meisten Designer sie wollen nur eine Schaltfläche für alles verwenden, weil ein Button sieht hübsch aus. Aber manchmal möchte man nur einen Link verwenden, um auf eine bestimmte Seite zu verlinken. Also hier ist ein Designbeispiel dafür. Dies ist, was Sie beispielsweise für Eingabefelder verwenden können. Hier sind weitere Schieberegler und Checkboxen. Das ist auch ziemlich schön. Manchmal müssen Sie ein Dropdown-Menü mit einer Baumansicht wie dieser entwerfen. Hier können Sie einen Blick darauf werfen, wie viel Abstand beispielsweise Windows verwendet. Was ist ein schöner Abstand, zum Beispiel. Also sind diese Dateien auch super schöne Eingabefelder für ein Passwort. Manchmal müssen Sie sich entwerfen und einloggen. Werfen Sie einen Blick auf sie selbst. Wenn Sie jedoch die neueste Version erhalten möchten, verwenden Sie go to file, Get UI Kits, und klicken Sie dann zum Beispiel auf Microsoft Windows. Dann gehen Sie zu einer Website und Sie können die neueste Version der Design-Toolkits wie hier, Adobe XD Toolkit herunterladen die neueste Version der Design-Toolkits wie hier, und Sie können es herunterladen. Das ist schon super nett, aber im nächsten Video wird noch schöner sein. Ich werde Ihnen die Website zeigen, die ich benutze, um kostenlose Schriftarten, kostenlose Bilder und freie Symbole zu bekommen . Also werde ich Sie im nächsten Video sehen. 11. Kostenlose Schriftarten und Bilder und Bilder und Farbpaletten und filler: In diesem Video werde ich Ihnen zeigen, wo ich all meine kostenlosen Sachen bekomme , die ich für Design verwende. Zum Beispiel, wenn ich zu meinem Design für hier gehe, können Sie eine ziemlich coole, kreative Schrift hier sehen , es heißt RB Sets von RB Jets und das ist von der Website dafont.com. Auf dafont.com können Sie verschiedene Schriftarten erhalten. Die meisten von ihnen sind frei zu verwenden, aber nicht alle von ihnen. Wie Sie sehen können, ist diese Schriftart zum Beispiel nur für den persönlichen Gebrauch kostenlos Wenn Sie also eine Schriftart erhalten möchten, die kostenlos ist, auch für kommerzielle Zwecke, müssen Sie Ihre Suche anpassen. Zum Beispiel, wenn wir in eine Kategorie gehen handgeschrieben, ich denke, das ist eine coole Kategorie. Wie Sie eine Menge von kreativen Schriften hier sehen können, die Sie verwenden können. Aber wenn Sie suchen möchten, gehen Sie zu mehr Optionen und Sie werden auf 100 Prozent frei oder Public Domain klicken und wenn Sie auf Senden klicken, dann wird es Ihnen nur die Schriftarten, die Sie verwenden können 100 Prozent kostenlos. Sie können sogar diese Texte hier verwenden, also zum Beispiel, wenn Sie wissen möchten, wie diese Wörter erkunden aussehen, als würden Sie es einfach hier eingeben und Sie werden nur sehen, wie Wörter erkunden aussehen, und dann können Sie einfach klicken darauf, und dann können Sie die Schriftart hier herunterladen und installieren Sie sie auf Ihrem Computer und dann in Adobe XD verwendet, dies ist eine super, super, super schöne Website für alle kreativen Schriftarten. Eine weitere Website, auf der nur kostenlose Schriftarten verwendet werden können, ist Google Fonts. Diese Schriftarten hier sind nicht so kreativ. Obwohl Sie hier drüben einige kreative Schriftarten haben, tatsächlich viel, aber nicht so viel wie Adobe-Schriftarten, also was Sie hier tun können, können Sie auch einfach einen Text verwenden. Erkunden Sie zum Beispiel Vietnam. Wenn Sie das hier eingeben und auf „Auf alle Schriftarten anwenden“ klicken, werden Sie auch sehen, wie dieser Text aussieht. Sie können die Größe hier anpassen und Sie können Kategorie auswählen, also zum Beispiel, wenn Sie nur handschriftliche Schriftarten wollen, können Sie einfach alle von ihnen abwählen und Sie werden die handschriftlichen Schriften von Google Fonts bei einem Download sehen die handschriftlichen Schriften von Google Fonts bei Erfahrung in diesem als ein wenig anders, wenn Sie diese Schriftarten haben möchten, werden Sie auf Plus klicken, und dann wird es genau hier sein. Wenn Sie es aufheben, können Sie auf „Anpassen“ klicken. Manchmal hat es mehr Versionen, so dass Sie die auswählen können, die Sie wollen, und dann klicken Sie auf „Download“ hier, so dass ist, wie Sie Schriftarten von Google Fonts herunterladen. Nun, für Symbole „, wenn Sie gehen, um auf ein Symbol klicken auf dies ist die Icon-Website, die ich verwende. Wenn Sie zu diesem Design zurückgehen, können Sie hier Symbole sehen. Zum Beispiel ist dieses Toursymbol ein Berg. Dieses Hotel Symbol ist ein Pfad und dieses Essen ist ein Glas. Hier sind die Symbole, die ich verwendet habe, und ich habe sie gerade hier in der Suchleiste, flaticon.com gesucht Wenn Sie also zum Beispiel ein Symbol für ein Haus wollen, werden Sie nach Haus suchen und es gibt viele kostenlose Symbole, die Sie verwenden können. Einige von ihnen sind Bates, wie Sie mit der Krone sehen können und er Download Erfahrung genau hier ist auch ein wenig anders. Sie können einfach auf das Plus drücken und es wird es zu Ihrer Bibliothek hinzufügen. Lassen Sie mich die alten löschen. Wenn Sie ein paar Symbole wie dieses ausgewählt haben, können Sie die Auswahl herunterladen und wenn Sie sie in Adobe XD verwenden möchten , würde ich vorschlagen, dass Sie die SVG-Option verwenden, und dann können Sie sie hier herunterladen. Ich meine, alle Informationen, 40 Credits sind im Download-Ordner, aber die SVG sind Vektorsymbole oder wie Sie hier sehen können, ist es egal, wie viel ich es vergrößern wird immer scharf und das ist natürlich, was Sie wollen, also immer SVG verwenden, aber Sie können auch PNG verwenden, und dann zum Beispiel eine größere Größe auswählen, so etwas, so dass es auch scharf ist, aber nicht so scharf wie SVG, weil dies Vektor ist, also Dies sind keine Pixel und PNG ist immer Pixel, also müssen Sie das für die Symbole tun. Jetzt für die Bilder, die Website, die ich immer benutze, ist unsplash.com und es gibt viele coole Hipster Fotos auf Splash, also wenn Sie zum Beispiel ein Bild von einem Fahrrad brauchen, weil es viel passieren wird Zeiten, wenn Sie mit einem Client arbeiten, dass sie die Bilder noch nicht haben und Sie wollen nur ein Füllerbild für Ihren Hintergrund, für Ihre Bilder, also was Sie tun werden, können Sie nach Fahrrad suchen und dann können Sie auf diese Datei wie diese in Ihren Download-Ordner. Sie wählen drücken „Enter“ und jetzt haben Sie diese Datei in Ihrem Download-Ordner. Super hochwertiges Bild, wie Sie hier sehen können, so dass das super schön ist. Eine andere Website, die ich oft benutze, ist pexels.com, das gleiche Prinzip wie auf Splash. Sie können auch nach Fahrrad suchen und Sie werden verschiedene Bilder zu bekommen. Es gibt viele dieser Websites, aber wenn Sie anfangen, speichern Sie diese einfach und Sie können einfach mit dem Entwerfen beginnen, und dann eine andere Website, die Sie speichern müssen, ist color.adobe.com. Dies ist eine schöne Website, um eine Farbpalette zu erstellen. Wie ich in meinem Design-Film hier erstellt hatte, verwende ich die Adobe-Website als Inspiration, also kannst du das einfach so ziehen und es zum Beispiel auf lila legen und dann eine Palette erstellen, die du willst und du kannst tun verschiedene Optionen hier drüben. Zum Beispiel, monogrammisch, das ist eine, die ich für diese Website verwendet habe, und dann können Sie einfach eine Palette hier erstellen. Dann können Sie es kopieren. Zum Beispiel können Sie einen Screenshot erstellen. Sie können es innerhalb von Adobe XD bringen, aber nur eine Basis, und dann verwenden Sie einfach das Augentropfen-Tool, um die Farben in Adobe XD zu erstellen und dann natürlich, bearbeiten Sie Ihre Asset-Spalte, so dass ist, wie ich diese Website. Ich benutze es nur zur Inspiration und wandle es dann in Adobe XD in Asset Color um. Die letzte Website, die Sie speichern möchten, ist diese Website, loremipsum.nl und auf dieser Website können Sie nur einige gefälschte Füllstoff Text bekommen. Auch oft, wenn Sie an einer Website arbeiten, haben Sie den Text noch nicht Sie können also einfach einen Text wie diesen kopieren und dann zu Adobe XD gehen, so zu Ihrer Datei gehen, die Texte hier einfügen, und dann haben Sie einige Texte, mit denen Sie arbeiten können. Dies sind die Website, die ich Ihnen zeigen wollte. Speichern Sie sie auf Ihrem eigenen Computer, denn auf fast jeder Website benötigen Sie Schriftarten, Sie brauchen Symbole, Sie brauchen Bilder, und Sie brauchen Füllungstext, und natürlich brauchen Sie auch Farben, also ist das für diese Episode. Ich hoffe, dass du das hilfreich gefunden hast, und dann lasst uns einfach zur nächsten Folge springen. 12. Vorbereitung unserer ersten Zeichenfläche: Hallo und willkommen zurück. In dieser Folge bereiten wir unsere Zeichenfläche vor. Was wir tun werden, ist, dass wir die beiden Dateien, die wir hier geöffnet haben, lassen , weil wir unsere eigene Datei erstellen werden. In dieser Folge werden wir die eigentliche Datei erstellen, die wir verwenden werden, die Sie verwenden werden, um die gesamte Website zu erstellen. Wie erstellen Sie eine neue Datei? Es ist sehr einfach. Sie gehen einfach zu „Datei“ und klicken Sie auf „Neu“. Dann erhalten Sie ein paar Optionen. Die Optionen, die Sie hier sehen werden, sind nicht die Optionen, die Sie oft für eine Web-Desktop-Website verwenden. Wir müssen es etwas ändern. Moment werden wir es einfach machen und wir werden auf dieses Web-Symbol klicken, und jetzt erstellt es eine Zeichenfläche. Wie ich schon sagte, die Zeichenflächen sind hier drüben. Wenn du also auf die Zeichenflächen klickst, siehst du hier ein paar Einstellungen. Aber bevor Sie nur auf eine der Optionen klicken, möchte ich Ihnen erklären, wie das Web funktioniert, weil dies wirklich wichtig ist. Weil die Vorschau, die sie Ihnen gegeben haben. Jetzt sind wir auf unserer Zeichenfläche, die 1920 ist, aber das ist viel zu groß für eine Website, weil Sie verstehen müssen, dass meisten Websites mit dem Inhalt der eigentlichen Website. Gehen wir einfach für eine Minute zu meiner Designdatei zurück. Die Hauptbox, in der sich der gesamte Inhalt befindet, also auf dieser Website, ist dies von diesem linken Teil zum rechten Teil hier drüben. Auf der modernen Website, die meiste Zeit ist das 1140. Dies ist eine dieser Zahlen, die Sie aufschreiben möchten. Ich weiß nicht, ob ich das schon mal gesagt habe, aber das ist fast immer 1140. Manchmal sind es 1200. Zurück in den Tagen der Website waren 1960 und dann wurden unsere Bildschirme größer. Jetzt ist der Hauptinhalt der Website 1140. Warum ist das wichtig? Dies ist wichtig, da Sie innerhalb dieser Spalte entwerfen möchten. Denn wenn Sie dies nicht tun, werden Sie wahrscheinlich auf einer Website landen, die nicht auf allen Geräten gut aussieht. Sie möchten auch, dass Ihre Website auf kleineren Bildschirmen sichtbar ist. Zum Beispiel ein Laptop, der nur 11 Zoll ist. Deshalb müssen Sie zwischen diesen Grenzen bleiben. Adobe XD hat dafür eine großartige Funktion und es wird als Raster bezeichnet. Wenn Sie auf das „Grid“ klicken und Sie es in meiner Datei hier sehen können, können Sie sehen, dass die Rinnenbreite, die die Breite zwischen dem Inhalt ist 1140. Das ist es, was wir auch für unsere eigene Datei erstellen werden. Okay, Leute, ich muss etwas sagen. Das ist Rino, aus deiner Zukunft. Adobe XD hat die Rasterfunktion geändert. Jetzt ist es nicht mehr möglich, das Grid für jede einzelne Zeichenfläche einzuschalten. Wenn Sie nun das Raster in einer Zeichenfläche ausschalten, wird es in allen Zeichenflächen ausgeschaltet. Bitte jetzt, wenn du dieses Video ansiehst, denn dieses Video wurde vor ein paar Monaten aufgenommen. Wie Sie an den Seiten hier sehen können, ist noch etwas Platz übrig, und Sie brauchen nicht viel mehr, wie Sie sehen können, weil der Platz an den Seiten hier, ist genug für eine Website und diese Zeichenfläche ist nur 1400. Das ist die Größe, die ich oft benutze. Gehen wir zurück zu unserer neuen Akte. Wir werden diese Zeichenfläche nicht benutzen. Wie Sie gehen, um wieder auf „Zeichenfläche“ klicken. Sie können besser für eine Website mit dieser, die 1366 ist, starten . Ich werde verkleinern. Ich werde das löschen und boom, hier sind wir. Wir werden es tatsächlich auf 1400 ändern, aber Sie können es auch einfach auf die 1360 setzen, weil es nicht wirklich wichtig ist. Moment werden wir das Grid einschalten, weil wir sicherstellen wollen , dass unsere Spalten perfekt sind, und ich habe die Informationen bereits hier eingefügt. Sie müssen überprüfen, ob Sie die gleichen Nummern haben. Ich arbeite immer so. Sie haben zwei Säulen und Sie haben 1140 hier drüben. Das ist der Raum dazwischen. Dann haben Sie 130 auf beiden Seiten. Wenn Sie das bei zwei mal 130 addieren, und diese Zahl, werden Sie mit 1400 enden. Auch hier habe ich gehört, dass es für einige Leute nicht funktioniert, wie ich hier gezeigt habe. Sie müssen dann versuchen, zuerst die Spalten und die Rinnenbreite hinzuzufügen, dann die Spaltenbreite zu überspringen und dann zur letzten zu gehen, und dann wird die Spaltenbreite automatisch hinzugefügt. Wenn das für Sie nicht funktioniert, ändern Sie die Reihenfolge, in der die Zahlen eingegeben werden. Einige Designer entwerfen gerne innerhalb eines Rasters. Also wirst du hier eine Menge zusätzlicher Zeilen haben. Aber das tue ich nicht, weil die meisten Websites, Sie haben nur eine drei oder eine vier Spalte, vielleicht eine Zwei-Spalte, manchmal eine Fünf-Spalte, und Sie brauchen nicht wirklich die zusätzlichen Zeilen dafür. Sie können auch einfach die Ausrichtungswerkzeuge in Adobe XD verwenden. Ich benutze nur das Außenraster so. Das ist die einfachste Lösung. Wenn Ihre Seite nun länger wird, können Sie einfach auf den Namen klicken und ihn dann herausziehen, wie Sie sehen können. Dann wird diese Zeile angezeigt, und diese Zeile ist der Bildlaufrahmen. In Ordnung, dann eine andere Sache, die Sie vorbereiten müssen, was ich für wichtig halte, ist die Spalte für Ihr Mobiltelefon. Wenn Sie zurück zur Zeichenfläche Funktion hier drüben gehen und Sie nach unten scrollen, benutze ich immer das iPhone 6. Sie haben auch Android-Handys hier drüben. Wie Sie sehen können, das iPhone 6, 7, ist das iPhone 6, 7, 8 etwas breiter als das Android-Handy, so dass Sie ein wenig mehr Platz haben. Ich schlage vor, dass du diesen auswählst oder diesen auswählst. Ich wähle immer das iPhone aus. Warum verwende ich das neueste iPhone nicht? Nun, weil das neueste iPhone sehr lang ist und die meisten Leute einen Bildschirm haben, der so aussieht, zumindest im Dimensionsverhältnis. Deshalb schlage ich immer vor, dass Sie dieses benutzen. Ich werde das in mobil ändern. Hier ist auch das gleiche, wenn Sie gehen, um zu scrollen, Sie werden auch diese Zeile sehen. Wenn Sie dann auf „Play“ klicken, sehen Sie eine normale Telefongröße und Sie können zu der Website blättern, wenn Sie einige Inhalte darin haben. Auf der mobilen Zeichenfläche werden wir auch das Gitter einrichten, also Markieren Sie dieses Kästchen hier drüben. So habe ich es eingerichtet, und vielleicht sind die Standardfunktionen auf Ihrem Bildschirm nicht die gleichen, aber Sie möchten mindestens 20 Pixel auf beiden Seiten haben. Wie Sie sehen können, erhalten Sie, wenn Sie dies auf 10 ändern, weniger Platz auf beiden Seiten, aber Sie möchten ihm etwas Platz geben. Gehen wir jetzt zurück zu meinem Handy. Klicken Sie auf „Mobile“, klicken Sie auf „Grid“ und wie Sie sehen können , habe ich hier sogar 30 verwendet, was es ein bisschen schöner aussieht, aber Sie brauchen mindestens 20. Aber die meisten Designer mögen mehr Leerzeichen, also werden wir für dieses Projekt auch auf 30 setzen. Denn mehr Weißraum auf der linken und der rechten Seite wird es einfach sauberer aussehen lassen. Zumindest 20 verwenden, aber ich bevorzuge 30. Jetzt sind wir bereit, mit dem Design zu beginnen. Nun möchte ich, dass Sie zu „Datei“ gehen und zu „Speichern“ gehen, weil wir diese Datei speichern werden. Dies ist auch etwas, wenn Sie XD-Abstürze sind und Sie Ihre Datei nicht gespeichert haben, ich denke, Sie wissen, was das bedeutet. Ich speichere es immer auf meinem Computer, weil ich möchte, dass sich die Dateien in meiner Dropbox befinden, aber Sie können auch die Adobe Cloud verwenden. Aber wenn Sie keine Adobe Cloud haben, schlage ich vor, dass Sie einfach Ihren eigenen Computer verwenden. Jetzt möchte ich es nicht auf meinem Desktop speichern. Ich möchte es nicht im selben Ordner speichern. Ich werde es jetzt in den Ordner Course Files“ legen, und ich werde ihm einen Namen geben, Xd Course Exercise File, und ich werde auf „Speichern“ klicken. Jetzt denkst du vielleicht, okay, warum müssen wir uns so viel vorbereiten? Weil ich einfach anfangen will. Nun, es ist sehr wichtig, dass Sie Ihre Zeichenflächen in einer guten Art und Weise vorbereiten , denn wenn Sie es zum Beispiel zu groß entwerfen, und Sie arbeiten mit einem Entwickler oder Sie machen die Website selbst, Sie bauen sie in WordPress oder Sie 're Codierung der Website selbst, wenn Sie es in den richtigen Eigenschaften entworfen, können Sie einfach auf ein Element klicken, und Sie können nur sehen, oh, das ist 46. Wenn Sie es zu groß entworfen haben, müssen Sie Vorhersagen machen, wie groß alle Elemente in einer echten Website sind. Deshalb ist es so wichtig, Ihre Zeichenflächen so vorzubereiten, wie wir es jetzt getan haben. Ich weiß, das ist etwas langweilig, aber es ist sehr wichtig. Gehen wir einfach zur nächsten Episode, wo wir unsere Farben vorbereiten werden. 13. Vorbereitung: Willkommen zurück. In diesem Video zeige ich Ihnen, wie Sie Ihre eigenen Farbpaletten mit der Farbe Ihrer Wahl erstellen können . Wir werden die Farben zu unserer Asset-Spalte hinzufügen, die tatsächlichen Farben, die wir für unsere Website verwenden werden. Für diese Website habe ich diese Palette hier drüben, und ich fange immer mit so etwas an. Ich habe einen weißen Hintergrund, ist nur ein reines Weiß. Dann habe ich eine fast weiße, die wie ein gebrochenes Weiß ist, wie Sie sehen können. Dann ein helleres, dann eine super helle Farbe und dann ein paar dunkle Töne. Alle diese Farben liegen innerhalb desselben Farbbereichs. Was ich damit meine, ist, dass alle diese Farben den gleichen Farbton Wert haben, werde ich Ihnen zeigen, was ich meine. Moment werde ich nur diese ganze Farbpaletten meines endgültigen Designs kopieren, Rino Datei. Wir gehen zurück zu unserer Akte, und wir werden diese Farben hier drüben aufbauen. Denn jetzt ziehen wir sie außerhalb der Kunstbretter. Wie ich bereits im Assets-Video sagte, können Sie alle auswählen, und fügen Sie sie dann zu den Assets hier drüben. Auf diese Weise, wenn wir die Farbe hier ändern, wird es auf der gesamten Website geändert werden. Ab sofort sind wir bereit für den nächsten Schritt. Aber sagen wir einfach, Sie entwerfen eine andere Website, denn diese Website, die wir gemeinsam erstellen werden, ist natürlich ein Beispiel, und Sie werden Adobe XD für viele verschiedene Projekte verwenden. Was ich Ihnen zeigen wollte, ist, wie Sie Ihre eigenen Farbpaletten erstellen können. Nehmen wir einfach an, dass Sie einen Kunden haben, und Ihr Kunde hat ein Logo, also sagen wir einfach, Sie arbeiten für die Firma Nikon. Das wäre ziemlich cool. Dies ist das Kundenlogo, also wie können Sie eine Palette aus diesem Logo erstellen? Was Sie tun werden, ist, vor allem, Sie werden ein Duplikat von diesem machen, wo Sie einfach Ihre eigenen Kreise mit diesem Werkzeug hier erstellen. Dann müssen Sie ein weiteres Duplikat machen, und Sie müssen wissen, was die Farbtonfarbe ist, von der Farbe dieser Hauptmarke. Sie haben einen der Kreise, die Sie als Referenz verwenden werden, und Sie werden das Pipettenwerkzeug hier drüben nehmen. Sie können darauf klicken oder Sie können auf I klicken, also klicken Sie darauf und legen Sie es dann so ab. Klicken Sie nun auf die Füllung, und wir werden den Hex-Code , der hier der Farbcode ist, in HSB ändern . Jetzt können Sie den Farbtonwert hier sehen, also ist dies der Farbtonwert. Dies ist die Sättigung, und das ist die Helligkeit. Wenn du das hier runterbringst, wird es eine dunklere Farbe sein. Wenn du das hier runterbringst, wird es mehr in Richtung Grey gehen. Wenn Sie dies ändern, wird es die tatsächliche Farbe ändern. Wieder, lassen Sie es einfach mit dem Auge fallen, klicken Sie darauf, öffnen Sie es, und dann werden Sie sehen, dass der Farbtonwert dieser Farbe 52. Das hier ist weiß, das müssen wir nicht ändern. Aber für diesen, öffnen Sie es einfach, und tippen Sie einfach 52 hier drüben ein. Ich werde das auch für diesen hier tun, 52. Nun habe ich eine neue Palette aus diesem Logo erstellt, so dass diese Farben immer schön aussehen neben dieser Hauptfarbe hier drüben. Sie können diese Farbe natürlich auch zur Palette hinzufügen , wenn Sie möchten. Aber so können Sie Ihre eigenen Paletten aus einem Logo oder einem Bild erstellen. Manchmal müssen Sie einige Anpassungen vornehmen, denn bei Gelb das Gelb im Vergleich zu diesem Wert nicht so hell aus. Die Sättigung ist hier 94 und 100, und das ist auch das gleiche. Aber das sieht nicht so hell aus wie diese Farbe, also muss man sie manchmal etwas ändern, damit sie übereinstimmt. Ich empfehle das nicht immer, aber wenn es wirklich anders aussieht, können Sie die Werte ändern und eine Palette erstellen, die fast gleich aussieht wie diese. Oder eine andere Palette, die Sie online finden können, oder verwenden Sie Adobe Farbe, oder vielleicht ein Bild von Pinterest, oder etwas anderes. Das ist alles, was ich für die Farbpalette zeigen wollte, jetzt werde ich das alles löschen. Wir werden jetzt auf Speichern klicken, und das Letzte, was ich tun möchte, ist, ein neues Kunstboard für alle Elemente unserer Marke zu erstellen . Jetzt klicke ich einfach auf den Titel des Kunstboards, drücke Alt und ziehe ein neues Kunstboard hierher. Gib ihm einfach eine kleine Distanz wie diese. Schalten Sie das Raster und greifen Sie Ihre Farben und legen Sie sie in dieses Kunstboard. Wir werden dieses Kunstboard auch für die nächste Episode verwenden , wo wir alle unsere Textebenen vorbereiten werden. Das wird wirklich schön sein, denn wenn wir hier schon viele Elemente vorbereitet haben, können wir einfach ein Element von hier nach hier ziehen. Dann können wir die Seite wirklich schnell aufbauen. Ich werde dieses Kunstboard in Styleguide umbenennen, und ich werde die Hintergrundfarbe etwas dunkler machen , damit ich tatsächlich alle Farben hier sehen kann. Das sollte vorerst gut sein. Ich werde es wieder speichern, und dann werden wir in der nächsten Episode alle unsere Schriften vorbereiten. 14. Vorbereitungen: Willkommen zurück. In dieser Folge werden wir alle unsere Textebenen vorbereiten. Dies ist auch ein wichtiger Schritt, bevor Sie tatsächlich beginnen, alle Seiten auf Ihrer Website zu erstellen. Ich sehe oft Designer, die sich nicht an Schriftgrößen, Schriftabstand, Zeilenhöhe halten , und dann beginnt es nach einer Weile wirklich chaotisch zu werden. Bereiten wir einfach alle Hauptelemente vor. Wir werden nicht alles vorbereiten, sonst hätten wir nicht viel kreative Freiheit. Aber du brauchst immer einen großen Titel, einen mittleren Titel, einen eindeutigen Text, du brauchst zwei Schaltflächen, du brauchst diese auf jeder Website. Das ist ein Vorteil, und was ist auch Vorteil ist, dass Sie bereits sehen können, ob alles zusammen schön aussieht, bevor Sie tatsächlich beginnen, die Seite zu entwerfen. Das werden wir tun. Wie Sie sehen können, ist dies zum Beispiel ein sehr großer Titel und dies ist ein mittelgroßer Titel. Also geh zurück zu unserer Übungsdatei. Wir gehen zu den Style-Guide-Artboards, und wir werden das Textwerkzeug greifen. Stellen Sie übrigens sicher, dass Sie die Schriftarten installiert haben. also im Ordner Schriftarten sicher, dass Sie alle diese Schriftarten auf Ihrem Computer installiert haben. Aber natürlich können Sie auch Ihre eigenen Schriftarten verwenden, wenn Sie ein anderes Zeichen üben möchten , als ich gerade erstelle. Okay, für den Moment werde ich das Textwerkzeug greifen und ich werde zuerst den großen Titel machen. Klicken Sie nicht nur auf, sondern erstellen Sie ein Feld, weil wir die Zeilenhöhe sehen möchten und das ist die Höhe zwischen den verschiedenen Zeilen. Ich werde das hier auf der linken Seite setzen. Ich werde nur schreiben : „Das ist ein großer Titel mit mindestens zwei Textzeilen.“ Klicken Sie auf Ihr Auswahlwerkzeug. Wir werden ein paar Einstellungen hier ändern. Zuerst werden wir die Farbe ändern, also drücken Sie „I“ und gehen Sie dann zur dunklen Hauptfarbe und klicken Sie darauf, also ist es jetzt die richtige Farbe. Ändern Sie diesen Wert auch in 54 und diesen Wert auf 64, und dies hängt von den verwendeten Schriftarten ab. Aber ich benutze fast immer etwas um 50 für meinen großen Haupttitel. Also lassen Sie es einfach so und machen Sie jetzt eine Kopie davon mit „Alt“ und „Shift“ und dann ziehen, zuerst die Maus loslassen, und dann „Alt“ und „Shift“ und machen jetzt unseren zweiten großen Titel. Jetzt erstellen Sie unser h2, das ist der nicht so große Titel, aber immer noch ziemlich groß. Ich benutze immer etwas um 36 und jetzt müssen Sie sich an die Zeilenhöhe auf etwas wie 44 anpassen. Dann sieht es aus wie ein kleiner Bruder von diesem. Sie können den Text sogar in so etwas ändern. Dann habe ich auf der Website auch einen weiteren noch kleineren Titel verwendet. Wir haben diesen Titel, dies ist ein großer, und Medium-Titel, und einen kleineren Titel für meine Portfolioelemente, zum Beispiel, das ist 24. Ich werde das auch vorbereiten. Erstellen Sie eine weitere Kopie mit Alts, machen Sie dies 24, und ändern Sie dann die Zeilenhöhe in 32. Jetzt können Sie zwei Linien sehen, weil diese Box zu groß ist, also machen Sie diese eine kleiner, und jetzt können Sie die Zeilenhöhe sehen. Sie können sehen, dass diese korrigiert. Diese Zeile, wir brauchen diese Zeile jetzt nicht weil wir nicht innerhalb dieses Art-Board scrollen werden. Klicke auf dein Artboard, gehe zu „Scrollen“ und setze dies auf „Keine“. Diese Linie wird verschwinden. Jetzt brauchen wir für die Körpertexte, wie ich bereits sagte, einen Lorem ipsum-Text , der nur Fülltext ist, den jeder Designer verwendet. Gehen Sie einfach zu loremipsum.nl oder ich habe eine neue Erweiterung, die Lorem Ipsum Generator heißt und Sie können einen Lorem ipsum Text wie folgt erstellen. Vorerst werde ich das hier kopieren. Kopieren Sie es, und gehen Sie zurück zu Ihrem Adobe XD. Wir werden eine Kopie von diesem zu machen, „Alt“ klicken und „Shift“, machen eine Kopie, wählen Sie alle Texte und fügen Sie Ihren gesamten lorem ipsum Text, spielt keine Rolle, dass es zu lang ist. Klicken Sie außerhalb davon und machen Sie diese 16. Für Körpertexte, die der Hauptteil Ihres großen Textes ist. Große lange Texte wie diese, ich benutze immer 16 und manchmal sogar 18. Denn auf den meisten Websites und den meisten Bildschirmen sieht das gut genug aus. Ich würde 18 oder 16. Für diese Website ist 16. Bold sieht nicht so gut aus für Textkörper, was bedeutet, dass Texte, die lange für diese Website sind, ich habe das Medium verwendet. In vielen Schriftarten wird es manchmal auch als regulär bezeichnet und das sollte gut genug sein. Vielleicht manchmal leicht, aber ich bleibe immer bei regulären oder mittleren. Dort für die Zeilenhöhe verwende ich so etwas wie 25 und dann sieht es so aus. Okay, jetzt haben wir die Textstile vorbereitet, und für die Haupttexte, was auch schön aussieht, wenn der Haupttext nicht so schwarz wie die Titel, sondern ein wenig grau ist . Deswegen habe ich diese Farbe benutzt. Legen wir die beiden nebeneinander, und ich werde die Farbe hier ändern. Lasst uns vorerst mit Grau arbeiten. Wie Sie sehen können, fügt es sich ein wenig besser ein, wenn Sie einen Grauton wählen. Für meine Website sieht das grau aus, aber es ist nicht grau, es ist eigentlich lila gemischt mit Grau. Deshalb fügt es sich so gut mit dem Hintergrund und dieser Farbe und diesem Titel, und es sieht einfach sehr schön aus. Klicken Sie auf diesen Text und jetzt werde ich die Farbe auswählen, die ich für den Text verwendet habe, was dieser ist. Auf diesem Hintergrund sieht es nicht so gut aus, aber auf einer Website sieht es wirklich gut aus, also hat es richtig ausgerichtet, und dann werden wir unsere Haupttaste erstellen. Für Schaltflächen verwende ich nicht den Textblock, ich benutze nur eine einzelne Zeile. Klicken Sie auf das „T“, klicken Sie darauf und geben Sie dann etwas wie „Lorem ipsum“ oder „Dies ist eine Schaltfläche“ ein. Gehen Sie zurück zu Ihrem Auswahlwerkzeug, und für Ihre Schaltflächen verwende ich die meiste Zeit halb fett. Die Textfarbe für Schaltflächen auf dieser Website ist weiß, und der Hintergrund ist ein Rechteck. Ich greife dein Rechteck und mache ein großes Rechteck wie dieses. Heben Sie die Grenze nicht aus. Stellen Sie sicher, dass Ihre Farbe auf die gewünschte Tastenfarbe eingestellt ist. Platzieren Sie es nun unter Ihren Schaltflächentexten, aber jetzt ist es über dieser Textebene. Verwenden Sie also Befehle und dann linke Klammern, wenn Sie noch nicht an die kurzen Tasten gewöhnt sind, gehen Sie zu Ihren Ebenen und ziehen Sie es dann einfach so, stellen Sie sicher, dass es sich unter der Textebene befindet. Nun Position bei so machen es noch ein wenig größer halten „Alt“, so dass der Seiten proportional skaliert werden, so etwas sollte gut sein. Für den Text selbst, Ich benutze immer 15, Es ist ein wenig kleiner für die Tasten. Ich werde vorerst 15 benutzen. Ergreifen Sie die Auswahl erneut und richten Sie sie in der Mitte aus. Das letzte, was ich getan habe, ist, dass ich die Knöpfe, abgerundete Ecken gegeben habe. Für diese Website habe ich vier verwendet. So können Sie die Koordinaten hier greifen und dann auf vier setzen, Sie können die Zahl hier sehen, oder Sie könnten es einfach eingeben und Ihre Pfeiltasten verwenden, um etwas zu schaffen, das gut aussieht. Aber vier ist, was ich für diese Website verwendet. Nun gruppieren Sie diese beiden zusammen, so klicken Sie auf den Text halten Sie „Shift“, klicken Sie auch auf den Hintergrund. Nun sind diese beiden ausgewählt und drücken Sie einen Befehl „G“ oder klicken Sie mit der rechten Maustaste und dann „Gruppe“. Jetzt ist dieser Button eine Gruppe und wir können ihn so bewegen. Auch eine letzte Sache, stellen Sie sicher, dass Sie einen Text auswählen, doppelklicken Sie darauf, und stellen Sie dann sicher, dass dieser in der Mitte ausgerichtet ist. Das ist schön, denn jetzt, wenn Sie den Knopf vergrößern möchten, bleibt er automatisch in der Mitte dieses Buttons. Das ist also auch ein netter kleiner Trick. Jetzt haben wir die meisten wichtigen Textebenen vorbereitet, aber dies ist nur für Web. Lassen Sie mich Ihnen zeigen, was ich meine. Für das Web habe ich hier einen 54 Punkt-Titel verwendet, aber auf einem Mobiltelefon, das viel zu groß aussieht, weil das 64. Ich werde Ihnen zeigen, was ich meine, denn wenn ich die gleiche Titelgröße auf Handys verwenden und lassen Sie mich einfach auf ein die mobilen Texte klicken, und ich werde dies auf 54 setzen, es wird viel zu groß auf Mobiltelefonen aussehen. Sie möchten, dass Ihre Titel auf Mobilgeräten etwas kleiner werden. Gehen Sie zurück zu Ihrer Entwurfsdatei, und Sie müssen dies nur für diese Titel tun. Denn Körpertexte sehen oft auch auf Mobilgeräten gut aus. Schnappen Sie sich alle Ihre Titel, ziehen Sie sie zu den Rechten, lassen Sie es vielleicht Ihre Kunsttafeln ein wenig größer zu unserem Kommentar klicken Sie auf den Hintergrund der Kunsttafel, machen Sie Ihre Kunsttafel ein wenig größer, und dann werden wir dieses Feld ein wenig kleiner machen. Sie können nicht den gleichen Trick wie für Bilder verwenden, zum Beispiel, und verwenden Sie einfach die „Shift“, weil sich dann die Schriftgröße nicht ändert. Wir müssen es auf eine andere Art und Weise tun, was notwendig ist, um die Werte hier zu ändern. Zum Beispiel, machen Sie es ein wenig kleiner. Für meine Website habe ich 46 und 52 für diesen Titel verwendet, ich habe 30 und 36, 38 verwendet , und dieser Titel sieht eigentlich nicht so schlecht auf Handy aus. Weißt du was? Wir werden nur benutzerdefinierte Titel für die großen Titel hier drüben haben. Dies ist die mobilen Websites und dies ist die Desktop-Sites. Lassen Sie mich schnell einen Titel erstellen. Ein Desktop, ich werde eine andere Schriftart verwenden, sonst ist es verwirrend. Ich werde etwas ganz anderes benutzen, so etwas wie Helvetica. Gehen, um es kleiner zu machen und es eine andere Farbe zu machen. Wir werden es nicht mit unserem eigenen Design, Desktop und Handy verwechseln. Jetzt wissen wir was, was ist. Das letzte, was wir tun möchten, ist, sie dem Asset-Panel hinzuzufügen. Öffnen Sie Ihr Asset-Panel erneut, wählen Sie alle Ihre Desktoptext-Ebenen, und drücken Sie dann das Plus auf „Zeichenstile“, und jetzt auch diese beiden und drücken Sie auch Plus. Aber für diese beiden wollen Sie wissen, dass sie mobil sind. Sie können den Namen hier ändern. Klicken Sie außerhalb davon und benennen Sie diese auch um, und legen Sie vielleicht ein m dahinter, damit Sie wissen, es ist für Mobilgeräte. Sie können sie auch neu anordnen, wenn Sie möchten, so. Ihre Mobiltelefone sind hier zusammen. Alles klar, das ist alles, was wir tun mussten, um alle Telefone vorzubereiten. Jetzt wird es wirklich einfach sein, unsere Seite aufzubauen. Wir haben bereits eine Schaltfläche, wir haben einen Textkörper, und wir haben ein paar Titel und alle unsere Farben. Ich hoffe, Sie im nächsten Video zu sehen, wo wir anfangen werden den Header zu bauen, den wir hier sehen werden. Jetzt sind wir bereit, die eigentliche Website zu entwerfen. Ich hoffe, Sie in der nächsten Folge zu sehen. 15. Das große Kopfbild und das Menü: Hey und willkommen zurück zu diesem neuen Kapitel. Jetzt werden wir endlich anfangen, unsere Seite zu bauen. Wir haben dieses Design auf eine sehr professionelle Art und Weise vorbereitet. In diesem Video werden wir diesen Abschnitt erstellen, den wir hier sehen werden. Es ist ein schöner sauberer Abschnitt mit einer transparenten Kopfzeile und ein paar verschiedenen Textebenen. Lasst uns einfach loslegen. Wir sind hier in der Übungsdatei, und das ist das Kunstbrett, das wir vorbereitet haben. Wir haben unser Raster eingerichtet, wie wir sehen können, das wir für den Umriss verwenden werden. Wir brauchen jetzt eine Menge Dateien aus diesem Ordner, der Website-Datei, also stellen Sie sicher, dass Sie diese geöffnet haben. Das erste, was wir brauchen, ist das Foto, also ist das Foto, das ich für den Header verwendet habe. Aber zuerst werden wir eine Form erstellen, also lassen Sie einfach das Rechteck-Werkzeug für jetzt greifen und eine Form erstellen, weil wir den Hintergrund zuerst erstellen werden. Erstellen Sie eine große Form wie diese und machen Sie es auf den Bildschirm passen , so etwas, und jetzt werden wir ihm eine Hintergrundfarbe geben. Deaktivieren Sie zuerst den Rahmen. Jetzt ist es weiß und geben Sie ihm jetzt eine Hintergrundfarbe, die diese dunkle Farbe ist. Jetzt gibt es ein nettes Werkzeug innerhalb von Adobe XD und das ist, dass Sie ein Bild auf eine Form ziehen können und dann wird es automatisch maskiert. Ich zeige Ihnen, wie das funktioniert. Aber zuerst müssen wir eine Kopie erstellen, denn wenn Sie das Bild jetzt so ziehen, wird es automatisch eine Form erstellen, aber dann ist die dunkle Farbe verschwunden. Wir brauchen diese dunkle Farbe, denn in unserem endgültigen Design gibt es eine dunkle Farbe unter unserem Bild, und dieses Bild hat eine Transparenz von 30%. Gehen wir zurück zu unserer Datei und löschen Sie das Bild vorerst mit dem Befehl Z. Zuerst werden wir ein weiteres Duplikat dieser Ebene erstellen, also werde ich Alt ziehen, und jetzt habe ich zwei dieser Ebenen, legen Sie sie auf sich gegenseitig. Jetzt greifen Sie Ihr Bild und ziehen Sie es auf die Leinwand, also habe ich jetzt ein Bild und einen Hintergrund. So mache ich es immer. Sie können auch einen Hintergrund für Ihre gesamte Kunsttafel festlegen, aber ich möchte diese weiße Farbe für den Hintergrund meiner Website haben, deshalb mache ich eine separate Form für den Hintergrund. Jetzt habe ich ein Bild, und ich werde dieses Bild auf eine 30% Deckkraft setzen. Schnappen Sie sich einfach die Deckkraft hier oder drücken Sie zum Beispiel einfach 3 oder 4, abhängig von Ihrem Bild und Ihrem Hintergrund, natürlich. Für den Moment werde ich es auf 30% setzen. Jetzt schnappen Sie sich beide. Wir werden sie gruppieren, also klicken Sie mit der rechten Maustaste und klicken Sie auf Gruppe. Jetzt werden wir sie mit Befehls-L sperren oder mit der rechten Maustaste sperren und dann sperren, denn dann können wir es nicht mehr verschieben und wir können einfach Elemente darauf platzieren. Das ist der erste Teil, und jetzt werden wir das obere Menü erstellen, also brauchen wir ein Logo. Das Logo ist die weiße Version, die Sie hier sehen können, das ist dieses. Jetzt ziehe ich es auf meine Leinwand, und wenn ich ein anderes Bild auf eine Leinwand ziehe, die nicht gesperrt ist, wird es auch dieses Bild ersetzen. Das ist eines der Dinge, auf die du vorsichtig sein musst. Manchmal haben Sie viele Bilder auf Ihrer Kunsttafel und möchten dann ein Logo außerhalb Ihrer Kunsttafel ziehen, damit es nicht in der Form ersetzt und maskiert, auf die Sie es ziehen. Das ist nur ein kleiner Tipp. Moment ziehen wir dies einfach und verwenden Sie das Raster , das wir erstellt haben, und machen es ein bisschen kleiner wie folgt. Schnappen Sie es einfach, zoomen Sie heraus, und das ist gut für jetzt. Jetzt werden wir das Menü erstellen. Schnappen Sie sich das Textwerkzeug hier drüben und wir werden es danach perfekt ausrichten, also spielt es keine Rolle, wo Sie klicken. Klicken Sie einfach irgendwo an und geben Sie die Startseite ein. Jetzt für die finale Website haben wir auch oft Semibold verwendet. Wie Sie sehen können, haben wir hier einen Text, und das ist Semibold, aber wir haben nicht Semibold zu unseren Zeichenstilen hinzugefügt. Was ich dir raten zu tun, um dein Leben ein bisschen einfacher zu machen, ist, hier drüben einen anderen Stil zu machen, den wir oft benutzen werden. Kopieren Sie einfach diesen Titel, zum Beispiel, machen Sie einen anderen, setzen Sie ihn einfach auf 16 auf Semibold, Zeilenhöhe wird ein wenig anders sein, 22 vorerst. Wir werden diesen Stil auch zu unserer Abstimmung hinzufügen, und ich werde ihn auf den Boden ziehen. Jetzt haben wir zwei Stile von 16. Dies ist für den Textkörper und dies ist für Titel. Jetzt gehen Sie zurück zu Ihrer Datei und jetzt können wir den gleichen Stil verwenden. Wenn wir auf unsere Heimtexte klicken und wir auf diesen klicken, wird es jetzt genau der gleiche Stil sein. Aber wie Sie jetzt sehen können, ist es schwarz, also können wir es nicht wirklich sehen. Jetzt werden wir auf Weiß klicken, und jetzt haben wir diesen Stil, aber dann mit einer weißen Farbe. Jetzt werde ich ein paar Duplikate für alle meine Seiten machen, also werde ich Alt und Shift halten und dann zuerst Maus loslassen und dann Alt und Shift loslassen. Tun Sie dies erneut und tun Sie dies erneut, und doppelklicken Sie dann, und ändern Sie den Text. Klicken Sie draußen, draußen, boom, und jetzt bin ich fertig. Wie Sie in meinem endgültigen Design sehen können, gibt es auch einen aktiven Zustand unter diesem Home-Symbol. Ein aktiver Zustand bedeutet, dass der Benutzer weiß, auf welcher Seite er ist, also werden wir das auch bei unserem Design tun, aber lassen Sie uns zuerst ein wenig ausrichten. Ich werde sie alle so packen, und ich werde sicherstellen, dass es in der Mitte auf diese ausgerichtet ist. Wie ich das machen werde, werde ich auch ein Logo auswählen und auf dieses klicken, so dass es jetzt perfekt in der Mitte ausgerichtet sein wird. Jetzt ziehe ich diese vier, lege sie hier nach rechts, gib ihm ein wenig Abstand, wähle sie alle aus und greife dann dieses Werkzeug. Jetzt ist der Abstand zwischen ihnen genau der gleiche. Jetzt müssen wir nur eine Zeile erstellen, also gehen Sie zu Ihrer Startseite, greifen Sie das Zeilenwerkzeug und erstellen Sie einfach eine kleine Zeile unter Ihrem Home-Text. Ich glaube, ich habe zwei oder drei in der Größe verwendet. Gehen, um es auf zwei für jetzt und die Rahmenfarbe ist die lila Farbe, die ich verwendet. Gehen Sie nun zurück zu Ihrem Auswahlwerkzeug, verschieben Sie es ein wenig nach oben, das sieht gut aus. Nun, was Sie tun möchten, ist Ihre ganze Kopfzeile zu greifen und zu gruppieren, weil wir diesen Header natürlich auf vielen Seiten benötigen , also haben wir jetzt eine kleine Gruppe mit allen Elementen darin. Jetzt müssen wir diese Texte erstellen, und jetzt wird das wirklich einfach sein. Aber das einzige, was wir sicherstellen müssen, ist, dass wir diese Schriftart installiert haben, die Abuget genannt wird. Wenn Sie zu Ihrem Finder gehen und Sie zu den Ordnerschriftarten gehen, stellen Sie sicher, dass Sie Abuget installiert haben, und jetzt können wir ein Design erstellen, das so aussieht. Dies ist der große Titel, 54, das ist das 16 Semibold, und es ist nur ein normaler Text. Das wird wirklich einfach sein, weil wir unsere Styles hier vorbereitet haben. Schnappen Sie sich diesen Titel, machen Sie ein Duplikat, halten Sie Alt so , und lassen Sie ihn los, greifen Sie einen Ihrer Körpertexte wie diesen, und greifen Sie eines Ihrer Semibolds wie dieses, und dann brauchen wir nur das Abuget, aber wir brauchen nicht wirklich einen Stil dafür, denn es gibt nur einen Ort auf der Website, wo Abuget verwendet wird. Nun lasst uns das zuerst ausrichten. Ich wähle die unteren zwei und mache sie weiß und wähle die obere und mache sie lila. Ich werde nicht alle Textebenen in dieser Tutorial-Serie perfekt machen , weil es nicht wirklich wichtig ist, also manchmal werde ich einfach die Standardtexte lassen, wie Sie hier sehen können. Für die Abuget-Texte, was Sie tun können, ist, dass ich nur eine neue Textebene erstellen würde. Klicken Sie hier, geben Sie einfach Ihren Namen ein, gehen Sie zurück zum Auswahlwerkzeug, wählen Sie die Schriftart aus, machen Sie sie weiß und machen Sie sie viel größer. Für diese Art von kreativen Schriftarten können die Schriftgrößen sehr unterschiedlich sein, da sie viele verschiedene Formen haben. Ich würde nicht empfehlen, die gleichen Größen zu verwenden wie wir für dieses verwendet haben, weil es bei kreativen Titeln sehr unterschiedlich sein wird. Wie Sie jetzt sehen können, muss ich es ein wenig besser ausrichten, damit es schön aussieht. Für die Ausrichtung können Sie natürlich alle diese greifen und dann dieses Werkzeug drücken, um sie richtig auszurichten. Aber Xd wird es am unteren Rand des eigentlichen Textfeldes ausrichten Wenn ich also das Textfeld bis hierher ziehen werde, und dann werde ich das gleiche Werkzeug verwenden, wie Sie jetzt sehen können, wird es sich ändern. Das ist nicht immer perfekt. Wenn Sie dieses Werkzeug auf Textebenen ausrichten und verwenden, würde ich vorschlagen, dass Sie versuchen, es so anzupassen. Auch für diesen, machen Sie es so klein wie möglich und verwenden Sie dann das Ausrichtungswerkzeug, weil es dann besser auf dem Auge aussehen wird. Das ist es für dieses Tutorial. Ich werde das Raster für jetzt deaktivieren, um zu sehen, was wir erstellt haben. Wie Sie sehen können, da wir die Stile vorbereitet haben, war dies ein wirklich einfacher Prozess. Sie ziehen es einfach hinein, ändern Sie die Farben, ändern Sie den Text, und jetzt können wir zum nächsten Abschnitt gehen , der dieser Abschnitt mit einer benutzerdefinierten Form und dieser Leiste oder Box hier mit unseren benutzerdefinierten SVG-Vektorsymbolen sein wird . Ich hoffe, Sie im nächsten Video zu sehen. 16. Der wave: Hallo und willkommen zurück. In diesem Video werden wir diese benutzerdefinierte Form und diese Überlagerungsleiste erstellen , die wir hier sehen. Wie ich bereits sagte, diese Symbole sind Effekttür, also egal wie weit Sie zoomen, sie werden immer scharf sein. Unter dieser Bar befindet sich ein schöner weicher Schatten. Du siehst es nicht wirklich, aber wenn ich es ausstelle, siehst du es. Das macht es ein bisschen schweben. Jetzt werden wir diese Teile erstellen, gehen wir einfach zurück zu unserer Datei. Was wir tun werden, ist, dass wir zuerst die benutzerdefinierte Form erstellen. Die benutzerdefinierte Form hat diese Farbe, sie sieht weiß aus, aber es ist nicht wirklich weiß. Schnappen Sie sich das Zeichenstift-Werkzeug, da Sie mit dem Zeichenstift-Werkzeug eine beliebige Form erstellen können. Wenn Sie in Photoshop oder Illustrator gearbeitet haben, bevor Sie dieses Tool kennen, aber wenn Sie dieses Tool nicht kennen, müssen Sie zwei Dinge wissen. Sie können klicken, klicken, klicken, klicken, klicken, klicken, klicken, um eine Form zu erstellen und eine gekrümmte Form zu erstellen, auf die Sie klicken und halten. Auf diese Weise können Sie benutzerdefinierte Formen wie folgt erstellen, und wenn Sie es schließen möchten, gehen Sie zurück zu Ihrem ersten Punkt und dann können Sie es mit einer Farbe füllen, Sie jetzt nicht sehen können, weil weiß ist. Sie können beispielsweise eine Form wie diese erstellen. Gehen Sie zurück zu Ihrem Auswahlwerkzeug, klicken Sie außerhalb des Auswahlwerkzeugs, klicken Sie darauf, und löschen Sie es dann. Gehen Sie zurück zum Stiftwerkzeug über das P auf Ihrer Tastatur, und lassen Sie uns diese Form erstellen. Schauen wir mal, wie das funktioniert. Zuerst niedrig, dann hoch und dann wieder tief. Klicken Sie hier, und das ist das erste, dann klicken Sie irgendwo hier und ziehen Sie es. Große Welle hier drüben, so etwas, und wir können das später anpassen, wenn du willst. Jetzt können Sie ein wenig außerhalb Ihrer App gehen, es spielt keine Rolle oder einfach nur auf der Seite und ich mache nur die letzte Form. Es sieht nicht perfekt aus, aber für den Moment, das ist, was wir tun werden, klicken Sie hier und dann zurück und klicken Sie hier und schließen Sie es dann so. Jetzt geben wir ihm eine Farbe, die wir sicherstellen müssen, dass sie eingeschaltet ist, und wir werden die Grenze löschen. Klicken Sie außerhalb davon, gehen Sie zurück zu Ihrer Form und verschieben Sie sie nach oben. Wie Sie jetzt sehen können, sieht es wie eine ziemlich schöne Welle aus. Es ist nicht perfekt. Wenn Sie also die Form anpassen möchten, können Sie darauf doppelklicken und dann auf Ihre Ankerpunkte klicken. Das nennen sie Ankerpunkte, und Sie können die Formen so anpassen. Ändern Sie das ein wenig, weil ich eine Form möchte, die meinem Design etwas ähnlicher aussieht . Außerdem hängt es davon ab, so dass Sie später weitere Punkte hinzufügen können. Wenn Sie zum Beispiel eine weitere Beule hier haben möchten, können Sie einfach klicken und einen weiteren Ankerpunkt hinzufügen, diesen nach oben verschieben und dann die Ziehpunkte hier verwenden, wenn Sie es wollen. Wenn Sie dann einen dieser Ankerpunkte löschen möchten, klicken Sie einfach auf den „Ankerpunkt“ und klicken Sie auf „Löschen“, und jetzt sind Sie wieder bei Ihrem ursprünglichen Design, zumindest hat es sich ein wenig geändert. Manchmal müssen Sie es ein bisschen so anpassen. Jetzt sieht das schön aus. Nun, was ich auch tun werde, ist klicken Sie auf die ganze „Zeichenfläche“ und ändern das Hintergrundbild in eine Farbe, die an meinem Gaumen ist. Jetzt sieht es so aus, dass diese Form und der Hintergrund nur ein Stück ist. Wieder werde ich diese Ebene sperren, also klicken Sie darauf und klicken Sie dann mit der rechten Maustaste und klicken Sie auf „Sperren“ oder „Befehl L.“ Jetzt werden wir die benutzerdefinierte Form erstellen. Gehen Sie zurück zu diesem Werkzeug, und erstellen Sie eine Form. Wir wissen nicht, wo die Größe der Zeichenfläche gerade ist, also klicke ich wieder auf „Zeichenfläche“, schalte das Gitter ein, gehe dann zurück zu meinem Auswahlwerkzeug, klicke auf „Zurück“ auf dem Rechteck und platziere das Rechteck so. Ich werde es in die Mitte dieser Linie legen. Wenn wir jetzt auf „Play“ klicken, werden wir die Hälfte dieser Box sehen, was wirklich schön aussieht. Das ist gut für jetzt, schalten Sie die Grenze aus und machen Sie es zur dunklen Farbe. Jetzt für das Innere dieser Box haben wir den Semi Bold Montserrat wieder verwendet, und wir haben vier Symbole. Beginnen wir einfach mit dem Importieren der Symbole. Gehen Sie zurück zu Ihrem Finder, gehen Sie zu Website-Dateien, und gehen Sie dann zu Home-Icons. Dies sind die vier Symbole. Bevor Sie sie hineinziehen, stellen Sie sicher, dass Sie irgendwo außerhalb Ihrer Zeichenfläche sind, und richten Sie sie einfach so ein, weil sie wirklich groß sein können, jetzt sind sie wirklich klein, aber manchmal sind sie riesig und dann vermasselt sie deine Zeichenfläche. Dann kann man sie manchmal nicht wirklich finden, weil sie sich in eine Zeichenfläche stecken. Stellen Sie sicher, dass Sie sich außerhalb der Zeichenfläche befinden, wenn Sie Elemente einfügen. Jetzt wähle ich sie aus und ziehe sie so auf deinen Canvas. Manchmal können Sie sie nicht wirklich so auswählen, es ist wirklich frustrierend, weil Sie wirklich auf die tatsächlichen Formen Ihrer Symbole klicken müssen . Wie Sie jetzt sehen können, wenn ich all diese ziehen möchte, funktioniert es jetzt, aber es funktioniert nicht immer. Sie müssen wirklich sicher sein, dass Sie diese blauen Linien sehen und dann können Sie die Symbole ziehen. Wenn Sie das Ziehen nicht mögen, was Sie auch tun können, ist wählen Sie alle und drücken Sie dann „Befehl X“ und scrollen Sie zu dem Teil, wo Sie sie wollen, dann drücken Sie „Befehl V“ Befehl X ist für Schnitt und dann V ist für Einfügen. Oder Sie können auch mit der rechten Maustaste klicken und dann ausschneiden, wie Sie hier sehen können. Jetzt werde ich diese richtig ausrichten und natürlich werden wir dafür die Ausrichtungswerkzeuge verwenden. Zuerst, um unser Leben ein wenig einfacher zu machen, werde ich diese Bar sperren und jetzt einfach die Symbole so platzieren. Stellen Sie sicher, dass Sie genug Platz für die Texte hier haben. Wählen Sie nun alle Ihre vier Symbole aus. Verwenden Sie dieses Werkzeug, und dann verwenden Sie dieses Werkzeug, und bringen Sie es jetzt in Position. Jetzt gehen wir zurück zu unserem Styleguide und wir werden diesen Titel greifen, weil wir ein halb fett so alt brauchen, und dann ziehen, machen es breit, und dann haben wir unsere Titel. Wie Sie jetzt sehen können, ist meine Ausrichtung nicht so gut. Manchmal möchten Sie mit dem Text beginnen, manchmal möchten Sie mit den Symbolen beginnen, und dieses Mal möchten Sie mit diesem Text beginnen. Wenn ich beispielsweise eine Oberfläche habe, die Web Design genannt wird , kann ich es so machen. Im Moment brauche ich dieses Textfeld nicht, weil ich keine zwei Zeilen verwende, ich werde nur auf den „Punkttext“ klicken und das erleichtert das Ausrichten. Stellen Sie auch sicher, dass Sie auf die „Ausrichtung zentrieren“ klicken. Denn wenn Sie es kopieren und einen neuen Text erstellen, wird er innerhalb der Mitte ausgerichtet. Ich habe jetzt vier Oberflächen gemacht, Website-Updates, Backups, Entwicklung und Webdesign, und jetzt möchte ich es richtig ausrichten. Wenn Sie beispielsweise diese beiden auswählen, richten Sie sie wie folgt aus und gruppieren Sie sie jetzt. Klicken Sie erneut auf diesen, verschiebt, klicken Sie auf diesen, richten Sie sie in der Mitte aus und klicken Sie dann mit der rechten Maustaste und gruppieren Sie sie. Das ist nicht eins. Das war nicht wirklich praktisch. Wenn Sie auf Ihr Symbol und Ihre Texte klicken und dann „Befehl G“ drücken, müssen Sie nicht rechten Maustaste klicken, weil Sie manchmal falsch klicken, wie ich es jetzt getan habe. Jetzt möchte ich, dass der Abstand zwischen diesen Symbolen gleich ist, und ich möchte, dass der Raum von dieser Seite gleich ist. Was ich tun werde, ist, dass ich dieses an einem Ort ausrichten werde, der schön aussieht, und jetzt zähle ich die Pixel zur Seite, also sind es 130. Ich werde es auf 110 setzen. Wir werden sicherstellen, dass dieser auch 110 Pixel von der Seite entfernt ist, so. Jetzt werde ich alle vier Symbole ziehen und ich werde sie in der Mitte ausrichten. Sieht das schön aus? Lassen Sie uns das Raster für jetzt deaktivieren. Nein, es sieht wirklich schön aus, ich will, dass sie näher beieinander sind. Ich werde es mehr in die Mitte so machen, 160, und auch für diese 160. Wählen Sie erneut vier von ihnen aus und richten Sie sie so aus. Das sieht ein bisschen besser aus. Jetzt müssen wir den Schatten hinzufügen. Gehen Sie zurück zur Hintergrundebene, entsperren Sie sie mit „Befehl L“, und fügen Sie dann einen Schatten wie diesen hinzu. Vergrößern Sie, damit wir sehen können, was wir tun, und wie Sie jetzt sehen können, ist es ein sehr kleiner Schatten, und wir wollen, dass dieser große Schatten ihn schweben lässt. Sie tun dies, indem Sie diese Zahl erhöhen, was den Schatten nach unten bringt. Wenn Sie dies zum Beispiel auf 30 setzen, können Sie sehen, dass es zum Schatten bringt und wenn Sie dann diese Zahl auf 30, 60 erhöhen , was Werte, die ziemlich oft verwendet werden. Sie können sehen, dass es zu diesem sehr weichen und schönen Schatten wird. Sie können sogar die Farbe des Schattens ändern, wenn Sie möchten. Aber die meisten Schatten in Schwarz sehen gut aus oder Sie können die Intensität des Schattens so verringern. Jetzt sind wir mit diesem Teil fertig. Lassen Sie uns einfach überprüfen, was wir bisher geschaffen haben. Klicken Sie auf Ihre „Zeichenfläche“ und klicken Sie auf „Play“ und wie Sie jetzt sehen können, beginnt es wie eine echte Website aussehen. Das ist ziemlich nett. Lass uns zur nächsten Episode springen. 17. Schatten: Willkommen zurück. In diesem Video werden wir die schwebenden Bilder Abschnitt erstellen, die so aussieht. Es sieht kompliziert aus, aber es ist tatsächlich eine der einfachsten Dinge zu tun. Wir werden diese Schatten wieder verwenden, und wir werden auch ein benutzerdefiniertes Symbol erstellen. Wie Sie hier sehen können, erstellen wir dieses Symbol innerhalb von Adobe XD. Wenn Sie wirklich in das Icon-Design einsteigen möchten, schlage ich vor, dass Sie Illustrator verwenden, da dies ein Software-Tool von Adobe ist , das sich wirklich auf die Erstellung von Faktorformen konzentriert. Aber wenn es nur für ein einfaches Symbol wie dieses ist, können wir das auch in Adobe XD erstellen. Mal sehen, wie schnell wir diesen linken Teil erstellen können. Wir gehen zurück zu unserer Übungsakte, und wir werden natürlich unsere Vermögenswerte nutzen. Jetzt brauchen wir einen mittleren Titel, also halten Sie Alt gedrückt und machen Sie eine Kopie davon. Vergiss übrigens nicht, dein Gitter einzuschalten, damit wir wissen, was diese Seite ist. Wir brauchen auch ein Bolzen-Deck, also mache ich auch eine Kopie davon. Richten Sie es richtig aus, und das ist eigentlich alles, was ich brauche. Für diesen Text habe ich drei Zeilen hoch gemacht, ja. Wie Sie jetzt sehen können, sieht diese Textebene fast wie grau aus, aber es ist tatsächlich dunkelviolett gräuliche Farbe. Vor diesem Hintergrund sieht die Kombination dieser beiden Spalten wirklich schön aus. Also ja, jetzt werden wir zwei Dinge erschaffen. Zuerst werden wir diese kleine Zeile erstellen, und dann werden wir die benutzerdefinierten Symbole erstellen. Vergrößern Sie Ihren Titel, greifen Sie die Zeile zwei hier drüben und erstellen Sie eine Zeile wie diese. Halten Sie es, und dann machen Sie es ein wenig dicker. Ich schlage vor, dass die Dicke der Linie die gleiche sein sollte wie die Elemente um sie herum. Also jetzt haben wir diesen großen Text hier drüben. Wenn Sie das Design schön aussehen lassen möchten, stellen Sie sicher, dass es fast so dick ist wie dieses. Also vielleicht vier oder fünf. Das sollte gut für die Farbe sein. Natürlich werden wir das Purple benutzen. So sieht es jetzt im Einklang mit diesem Design. Jetzt werden wir unser benutzerdefiniertes Symbol erstellen. Lassen Sie uns zuerst eine Textzeile erstellen. Moment werde ich nur eine Textzeile wie diese erstellen. Jetzt möchten wir unser Icon erstellen. Also zoomen Sie ein wenig hinein. Nehmen Sie nun das Stiftwerkzeug unter P, und lassen Sie uns ein Kontrollkästchen erstellen. Ein Kontrollkästchen ist nicht wirklich schwer. Also folgen Sie mir einfach in diesem. Sie können es jederzeit später anpassen, so dass es nicht perfekt sein muss. Versuchen Sie einfach, ein schönes Kontrollkästchen wie dieses zu erstellen. Vielleicht willst du einen flachen Boden haben, vielleicht nicht. Sieht nur nett aus. Also lassen Sie uns einfach testen, ob das ist, was wir wollen. Schalten Sie den Rahmen aus und für die Füllfarbe wählen wir unsere eigene violette Farbe wie folgt aus. Ich mag den flachen Boden nicht wirklich, also werden wir einfach darauf doppelklicken und ich werde diesen löschen und diesen einfach in die Mitte bringen. Ja, das sieht ein bisschen schöner aus. Jetzt passen Sie einfach ein paar Punkte an, damit es wie ein realistisches Häkchen aussieht. Das sieht ziemlich gut aus, also werde ich wieder außerhalb davon klicken. Nun, was ich tun möchte, ist es richtig auszurichten und vielleicht etwas kleiner wie folgt zu machen, halten Sie Shift gedrückt. Richten Sie es dann an der Mitte des Textes aus. Richten Sie den Text so aus. Weißt du was? Ich werde es ein bisschen größer machen. Wenn wir zu unserem endgültigen Design zurückkehren, können Sie sehen, dass ich hier abgerundete Koordinaten verwendet habe. Ich werde Ihnen auch zeigen, wie das geht. Wenn Sie beispielsweise einen abgerundeten Boden wünschen, doppelklicken Sie einfach auf diesen Ankerpunkt, und dann können Sie den Boden so anpassen. Vielleicht tun Sie das auch für diese Seite. Geben Sie ihm ein wenig benutzerdefiniertes Gefühl, das zu Ihrer Website passt. Es ist nicht perfekt und Sie können natürlich viel Zeit mit Symbolen verbringen. Aber ich möchte Ihnen nur die Grundlagen zeigen, wie Sie ein cooles Symbol erstellen. Nun, was ich tun möchte, ist sicherzustellen, dass es auf nur einer Zeile gut aussieht. Wählen Sie nun einfach beide aus, gruppieren Sie sie und halten Sie dann Alt und Umschalttaste gedrückt und erstellen Sie eine weitere Checkbox wie diese. Jetzt haben wir drei davon. Richten Sie sie richtig aus, Boom. Vielleicht geben Sie ihm ein bisschen mehr Platz. Wieder einmal messen manche Leute gerne jeden kleinen Balken zwischen all ihren Gegenständen. Ich entwerfe nur gerne auf meinem Auge, weil Messungen schön sind, aber manchmal muss man die Ausrichtung anpassen, um sie schön aussehen zu lassen, obwohl sie nicht perfekt ausgerichtet ist. Verwenden Sie also einfach Ihr Auge und Ihre Phantasie, um es schön aussehen zu lassen. Also lasst uns jetzt gehen und das Gitter ausschalten. Also werde ich wieder auf die Kunsttafel klicken. Schalten Sie das Gitter aus. Gehen Sie zurück zu unserem endgültigen Design. Wie Sie sehen können, ist diese Linie ein wenig länger. Also werde ich das hier dehnen, um es so etwas zu machen. Das sind drei Zeilen und ich sah, dass diese ein wenig länger ist, und vielleicht ein bisschen weniger gefälscht, aber das hängt natürlich von Ihrer Website ab. Also, jetzt sind wir mit diesem Teil fertig, und jetzt werden wir in unsere Bilder ziehen. Also, was Sie tun möchten, ist, gehen Sie zu Ihrem Finder, zoomen Sie heraus und stellen Sie sicher, dass Sie es außerhalb Ihrer Kunsttafel ziehen. Jetzt, wie Sie sehen können, ist dieser etwas kleiner. Also werde ich das die gleiche Größe wie die anderen machen, wie diese, und stellen Sie sicher, dass sie gleichmäßig groß sind wie diese. Wählen Sie nun beide aus, wählen Sie alle aus und machen Sie sie viel größer. Jetzt müssen wir sie nur in einer Weise neu anordnen, die schön aussieht und sie einfach darauf lenken, das übereinander zu machen, oder wir können Kommentare verwenden, und dann linke Klammer oder rechte Klammer. Das ist etwas, das ich gerne benutze, weil es viel schneller ist. In Ordnung. Das sieht schön aus. Ich werde sie alle wieder ein bisschen größer machen. Jetzt werden wir Schatten hinzufügen. Wählen Sie also alle aus und gehen Sie dann zu Ihren Schatten. Dann werden wir die Einstellungen für alle von ihnen anpassen. Also setzen Sie das wieder auf 30 und setzen Sie das auf 60. Jetzt, wie Sie sehen können, sind diese Gegenstände wirklich schön schweben. Vielleicht ist es etwas zu intensiv, also verkleinern Sie diese bringen Sie sie auf 12, zum Beispiel. Jetzt, wenn Sie weg klicken, schauen Sie sich dieses Design an, sieht wirklich cool aus. Also ja, das ist eigentlich alles, was ich für diesen Entwurf getan habe. Probieren Sie es auf eigene Faust aus. Dann in der nächsten Folge gehen wir zum Kundenbereich, wo wir mit einem neuen Werkzeug arbeiten werden, genannt die Wiederholungsraster, wo wir viele verschiedene Dinge ändern können, indem wir einfach so ziehen. Also hoffe ich, Sie in der nächsten Episode zu sehen. 18. Logo mit dem Raster: Hallo und willkommen zurück. In dieser Episode werden wir mit einer neuen Funktion namens Repeat Grid arbeiten, und wir werden einige Logos einfügen. Es wird wirklich Spaß machen. Ich möchte, dass du zu unserer Übungsdatei gehst und unsere Zeichenfläche etwas größer machst. Ihre Zeichenfläche wie zuvor auswählen, können Sie einfach auf den Namen klicken, aber wenn Sie wirklich vergrößert sind, und Sie wollen einfach nicht nach oben auf Ihrer Zeichenfläche scrollen, können Sie auch Befehl, und klicken Sie dann auf Ihre Zeichenfläche, oder sagen wir einfach, klicken Sie auf den Hintergrund. Denn wenn Sie auf ein Element mit Befehl klicken, gehen Sie natürlich, wählen Sie das Element aus, so dass Sie auf den Hintergrund klicken müssen, und dann können Sie Ihre Zeichenfläche länger so machen. Jetzt lassen Sie uns diesen neuen Abschnitt einfach schnell erstellen. Wir können natürlich immer zurück zu unserem Styleguide und ein ziehen Sie einen neuen Titel von hier. Aber da dies der gleiche Titel ist, können wir diesen Titel auch so verfolgen, ihn in der Mitte ausrichten und dann eine unserer Körpertextzeilen hier kopieren und auch in der Mitte ausrichten. Ich möchte diese beiden Schichten in der Mitte meiner gesamten Zeichenfläche ausrichten. Ich klicke einfach auf die Schicht, boom, klicke auf diesen, boom. Nun, ändern Sie den Text, so etwas. Dieser Text, ich will, dass er lila ist, also geh zurück zu deinem Vermögen, und mach den einen lila. Richten Sie es setzen 15 Pixel von oben, und jetzt werden wir mit den Wiederholungsrastern arbeiten. Was ich möchte, dass du eine Form mit deinem Rechteck erstellst. Wir werden ein Rechteck wie dieses erstellen. Lassen Sie uns zuerst das Gitter einschalten. Kommen Sie wieder und klicken Sie auf den Hintergrund, und schalten Sie das Gitter ein, weil wir wirklich brauchen das Gitter jetzt, um dies auszurichten. Weil auch Ihr Wiederholungsraster ein großartiges Werkzeug ist, weil Sie oft das gleiche unterschiedliche Element hintereinander haben. Wir könnten auch ein Wiederholungsraster für dieses verwenden. Lasst uns einfach so schnell üben. Ich werde diese beiden löschen, und wenn Sie auf dieses klicken und auf Raster wiederholen klicken, was passiert, ist, dass XD weiß, dass diese Gruppe in einer Richtung wiederholt werden muss. Sie können es so nach unten wiederholen, oder Sie können es zur Seite wiederholen. Viele Male haben Sie ein Raster innerhalb Ihrer Website, und das ist, wo Sie Ihr Werkzeug Wiederholen Grid verwenden können, und jetzt können Sie wirklich einfach die Ausrichtung so ändern. Für diese Vorteile benötigen wir nur drei Reihen. Wir können es so machen, unser Leben ein wenig einfacher machen, aber für den Kundenbereich wollen wir das auch tun. Denn wenn wir dieses Werkzeug „Raster wiederholen“ nicht verwenden. Übrigens Jungs, die Abkürzung für den Wechsel zwischen XD-Datei ist Kommentar, und dann das Wellen-Symbol eines Kitt-Textes auf dem Bildschirm, und unter Windows ist dies halten und tippen. Wenn wir dieses Werkzeug „Raster wiederholen“ nicht verwenden und wir den Schatten ändern möchten, müssen wir den Schatten auf all diesen einzelnen Ebenen ändern, und dann müssen Sie die Gruppierung aller Ebenen aufheben, oder klicken Sie einfach auf alle und das ist nicht wirklich nett. Auf diese Weise, wenn Sie den Schatten hier ändern, wird es sich überall ändern, wie Sie hier sehen können. Gehen Sie zurück zu unserer Datei, klicken Sie auf diese, und klicken Sie dann auf Raster wiederholen, und jetzt erstellen Sie einfach drei Blöcke wie diese, und auch nach unten, und jetzt müssen wir es an das Raster hier ausrichten. Sie können einfach den Abstand zwischen den Blöcken erhöhen. Wow, das ist 50, was fast perfekt ist, aber man kann natürlich auch die Blöcke ein bisschen größer machen. Kommen Sie und klicken Sie auf Ihren „Block“, und machen Sie es dann ein bisschen größer wie folgt. Ich möchte den gleichen Abstand hier drüben haben, also wird das 36. Dies spielt nur mit den Werten, bis Sie bekommen, was Sie wollen. Jetzt haben wir sechs Boxen perfekt ausgerichtet, und jetzt werden wir sie stylen. Klicken Sie auf Ihr erstes Feld, und löschen Sie dann den Rahmen, und wir werden einen Schatten wie diesen hinzufügen. Ich denke, ich habe den Standardschatten dafür verwendet. Kann ich erhöhen oder ich sollte sagen, verringern Sie die Intensität der es, so sieht es ein wenig schöner. Aber ich glaube, das ist alles, was ich getan habe. Jetzt für das Innere habe ich alle Logos im Client-Logo-Ordner vorbereitet, und ich habe gerade einige Logos des Internets heruntergeladen, wie Sie sehen können. Übrigens, das ist nur ein Beispiel, ich habe nicht für diese Unternehmen gearbeitet. Aber eigentlich habe ich für Coca Cola gearbeitet. Das ist die einzige Firma, für die ich wirklich in dieser Liste gearbeitet habe. Aber das ist nur ein Beispiel. Was ich getan habe, ist, dass ich sie bereits mit einem weißen Hintergrund exportierte. Denn wenn Sie nur alle Logos in Ihrer Zeichenfläche so ziehen, werde ich alle auswählen, nicht den Exportordner, ich ziehe sie alle so, Sie werden immer noch die Schatten, die wir gerade angewendet haben. Die Bilder werden sich von links nach rechts erstrecken, und das ist nicht das, was wir wollen. Was ich in meiner endgültigen Entwurfsdatei getan habe, ist, dass ich separate Zeichenflächen für meine Logos erstellt habe, denn sonst wirst du dieses Problem bekommen. Als ich wusste, dass meine Boxen diese Größe hatten, kann ich es tatsächlich 160 in der Höhe machen, das wäre schön, 360 und 116 in der Größe. Was ich getan habe, ist, dass ich eine neue Zeichenfläche erstellt habe. Ich greife nur, zum Beispiel, dieses, machte eine Kopie davon, und machte das 360 von 180, und dann nannte, dass unser Logo zum Beispiel, schalten Sie das Gitter aus. Ich habe das dupliziert, wie Sie sehen können, und dann habe ich die Logos nacheinander eingefügt , weil Sie es natürlich richtig ausrichten wollen. Dann habe ich all diese Bilder exportiert, und die Bilder, die Sie hier sehen können. Wir werden in einer weiteren Episode in den Export gehen, aber das ist, was ich getan habe, um diese Bilder zu erstellen. Ich habe zuerst alle Ports erstellt und dann die Bilder exportiert. Aber jetzt, um Ihr Leben ein wenig einfacher zu machen, können Sie einfach meine Bilder verwenden und sie so auf die Leinwand ziehen, oder Sie können Ihre Logos einzeln einziehen und sie dann auf die Zeichenfläche legen. Aber dann sind sie kein Teil dieses Wiederholungsrasters. Nur wenn Sie alle auf diese Weise hineinziehen, funktionieren die Wiederholungsraster mit diesen Bildern. Denn dieses Bild steht jetzt nur noch oben auf unserem Werkzeug „Gitter wiederholen“. Wenn Sie dieses Werkzeug „Raster wiederholen“ verwenden möchten, müssen Sie zuerst alle Bilder exportieren, die ich Ihnen in der kommenden Folge zeigen werde, und dann können Sie einfach alle Bilder wie diese einfügen, und dann haben Sie ein perfektes Repeats Grid Logo -Abschnitt. Was ist auch wirklich schön daran ist, dass, wenn Sie Ihr mobiles Design erstellen möchten, Sie es einfach so ziehen und es dann ändern können, und es wird sich an die Daten erinnern, die sich darin befinden, wenn Sie sich nur erinnern die Logos, wie Sie hier sehen können. Aber das ist auch für eine kommende Episode. Dies war die Grundlagen des Werkzeugs „Wiederholungsraster“. Ich hoffe, Sie haben diese Episode gefallen, und dann werde ich Sie in der nächsten Episode sehen wo wir diesen Umriss in Nummernfeld erstellen werden. 19. Statistikbereich mit leeren Kästchen: Willkommen zurück, in dieser Episode werden wir den Statistikteil erstellen. Dies wird ein sehr einfaches Video sein, aber das ist nur ein schöner Abschnitt, um die Seite zu brechen. Sonst wird es nur diese eine große Farbe sein. Auf meiner echten Website habe ich diesen Teil verwendet, um diese Zahlen zu animieren. Ich kann Ihnen das Endergebnis auf meiner Website zeigen. Wie Sie hier sehen können, ist dies die Idee für diesen Teil, wo diese Zahlen beginnen zu animieren. Lassen Sie uns einfach anfangen, diesen Teil zu erstellen. Wir gehen zurück zu unserer Übungsdatei, und wir werden diese Rs Board zur Entscheidung bewegen weil wir unsere R Board viel länger machen müssen. Komm und klicke auf dein R-Board, mach es länger und lass uns jetzt das Gitter ausschalten , weil wir das für diesen Teil nicht wirklich brauchen. Beschneiden Sie Ihr Rechteck, erstellen Sie eine große Form wie diese, deaktivieren Sie den Rahmen, wählen Sie die dunkelsten Hintergründe aus, und drücken Sie dann V für das Auswahlwerkzeug. Wählen Sie diese Option, um sie mit Alts kopieren zu lassen, und dann werden sie unter unserer Ebene sein, und das liegt daran, dass, wenn Sie eine neue Ebene erstellen, sie oben angezeigt wird und dies eine Kopie einer alten Ebene ist. Legen Sie sie hier rüber und drücken Sie dann Befehl X und drücken Sie dann Befehl V. Dann werden sie oben sein. Sie sehen den Titel nicht, aber das liegt daran, dass er eine andere Farbe hat. Klicken Sie nun außerhalb dieses Titels, klicken Sie auf den Titel, machen Sie ihn breit und klicken Sie dann auf beide und richten Sie sie richtig aus. Dann richten Sie sie auch links aus. Oh, sagte rechts, ich meinte links, natürlich. Richten Sie sie nun am Raster aus und wir werden einige Hilfslinien haben, wie diese. Das sieht gut aus. Mein Design und dieser Text sind etwas kürzer, so etwas, vielleicht sogar kürzer. Auch hier werde ich diese Hintergrundebene sperren. Was ich jetzt tun werde, ist, zwei Formen zu erstellen. Wählen Sie einfach zu Ihrem Rechteck-Werkzeug und erstellen Sie zwei Formen wie folgt; die Breite der Formen, wir werden das an diesem Teil ausrichten. Dann wird es ein bisschen schöner aussehen. Drücken Sie erneut V und machen Sie sie dann so groß wie die anderen beiden. Wir kennen bereits die Breite, das ist 360 und 40 Höhe. Wir wollen das ein bisschen größer sagen, vielleicht zu 40, so etwas. Das sieht gut aus. Bevor wir es duplizieren, aber zuerst werden wir die erste stylen. Heben Sie die Auswahl der Füllung auf, und für die Rahmenfarbe wählen wir das Lila aus, und so erstellen Sie einen Umriss. Nun, es ist nur eine Frage von zwei Zahlen. Nur eine Textebene, die eine mittlere Ausrichtung hat und weiß ist. Es ist nur ein Titel, der nur ein Punkttext ist. Es ist eine große Zahl. Diese Größe ist nicht Teil meiner Styleguide, aber ich habe das gerade auf dem Auge entworfen. Wenn Sie alle diese Elemente in der Mitte ausrichten möchten, stellen Sie sicher, dass Sie zuerst das gewünschte Element und dann Ihren Hintergrund auswählen und dann diesen Punkt drücken, um es in der Mitte auszurichten. für diesen beiden Wählen Siefür diesen beidenund Boom aus. Es war bereits ausgerichtet, wie Sie sehen können. Ich glaube, ich benutzte so etwas wie Kunden, die surfen. Ich benutze vorerst keine Textbox, richte das richtig aus und mache jetzt eine Kopie davon. Aber zuerst gruppieren wir es so, Befehl G, und klicken Sie dann auf die ganze Gruppe und duplizieren und machen es rechts von unserem R-Board ausgerichtet. Wir sehen nicht, wo es endet. Endet es hier drüben? Ich glaube nicht, dass es so ist. Klicken Sie erneut auf Ihr R-Board, schalten Sie das Raster ein und wie Sie sehen können, ist dies nicht das Ende unserer 1140. Nun, kommen Sie einfach und klicken Sie und ändern Sie die Nummer hier für Schecks gemacht oder so etwas. So habe ich diesen Teil hier erschaffen. Ziemlich einfacher Teil, aber ein dunkler Hintergrund. Es bricht einfach die Website auf eine schöne Art und Weise. Diese Episode war ziemlich einfach. Gehen wir zur nächsten Episode, in der wir den Testimonial Abschnitt aufbauen werden. Das ist ein bisschen kompliziert, weil wir eine benutzerdefinierte Form mit einem Schatten brauchen und wir auch ein Wiederholungsträgerwerkzeug hier verwendet haben. Ich hoffe, Sie im nächsten Video zu sehen. 20. Testimonial Abschnitt mit dem Stiftwerkzeug: Hallo und willkommen zurück. In dieser Episode werden wir einen Abschnitt D Testimonial erstellen. Ich denke, das ist ein wirklich netter Abschnitt. Es hat den gleichen Schattenstil wie das Logo hier drüben. Fangen wir einfach an. Lassen Sie uns zuerst einen Titel erstellen. Schnappen Sie sich diese und greifen Sie diese, alt, alt und Shifts und dann lassen Sie sie los und dieser Titel ist diese Farbe. Ich werde das Brett ein wenig größer machen indem ich gemeinsam auf die Hintergründe klicke und es dann nach unten ziehe. Lassen Sie uns nun unseren ersten Testimonial Abschnitt erstellen. Eine Sache, die Sie verstehen müssen, ist, dass Sie keine Schatten zu einer Gruppe hinzufügen können. Der einfache Weg, den Sie denken würden, dass wir eine Form wie diese erstellen würden, ist, ein Rechteck wie dieses zu erstellen. Erstellen Sie dann ein anderes Rechteck wie dieses. Drehen Sie dann das Rechteck um 45 Grad auf so etwas und platzieren Sie es dann übereinander, wählen Sie beide aus, wählen Sie beide aus, heben Sie die Auswahl eines Rahmens auf und gruppieren Sie sie. Wie Sie sehen können, können Sie nicht wirklich einen Schatten hinzufügen. Dies ist keine Lösung für diesen Teil. Was du willst, ist, dass du die Pensils benutzen willst. Erstellen Sie zuerst ein Rechteck wie dieses und stellen Sie sicher, dass es die Breite des Logo-Abschnitts hier hat , so dass wir die gleiche Art von Abstand verwenden können, also war das 360. Nun, was Sie tun möchten, ist ein paar Ankerpunkt hinzuzufügen. Wenn Sie auf direkten Winkel doppelklicken, können Sie sehen, dass wir die Ankerpunkte auswählen können und die gleiche Weise wie wir diese benutzerdefinierte Wellenform erstellt haben, können wir nun weitere Ankerpunkte hinzufügen. Um eine Form wie diese zu erstellen, benötigen wir drei weitere Ankerpunkte. Weil wir anfangen müssen, brauchen wir einen Abwärtspunkt und wir brauchen einen anderen ernennen. Wenn Sie nun auf dieses klicken und dieses in einer geraden Linie verfolgen, versuchen Sie es gerade zu machen, so etwas. Jetzt gehst du zurück, klickst du außerhalb davon. Du deaktivierst die Grenze. Jetzt können Sie der Form einen Schatten hinzufügen. Das ist es, was du tun willst. Klicken Sie auf Schatten und verringern Sie die Kapazität ein wenig und machen Sie es ein wenig schöner. Wie Sie sehen können, haben wir jetzt eine Form besprochen. Bevor wir mit der Duplizierung beginnen, lassen Sie uns zuerst diese beenden. Wir brauchen ein Profilbild und einen Titel. Schnappen Sie sich den Kreis oder das Eclipse-Werkzeug und halten Sie die Umschalttaste gedrückt, und erstellen Sie dann einen Kreis für Ihr Foto. Ja, drücken Sie die Gebühr und starten Sie sie richtig aus. Vielleicht ist das ein bisschen zu groß, also werde ich ein bisschen kleiner machen. Jetzt lassen Sie uns einen Titel erstellen. Dies ist der Name der Person, wählen Sie es und dann links ausrichten und machen, dass die Schüssel-Version, machen Sie eine Kopie davon, machen Sie, dass T kleine Version und das wird der Titel der Version sein. Ich möchte diesen Titel machen, ich möchte diesen Geburtszug ein wenig nach links ausrichten, so etwas wie dieses. Klicken Sie auf Ihr Bild und deaktivieren Sie den Rahmen. Jetzt haben wir unsere erste Form geschaffen. Wir werden noch nicht in unsere Bilder ziehen, weil wir noch eine Sache brauchen, und das ist der Text im Inneren von hier. Ich möchte, dass Sie einen unserer Haupttexte hier drüben kopieren. Ziehen Sie einfach das hier, wie Sie sehen können, Boom, so. Manchmal haben wir nicht die Form gemacht. Sie möchten die Schriftgröße um 1 Punkt kleiner ändern, da sie manchmal ein wenig groß aussieht, weil sie sich innerhalb einer Form befindet. Für jetzt werde ich es um 15 Uhr setzen. Stellen Sie außerdem sicher, dass Sie genügend Leerraum auf der linken und rechten Seite haben. Vielleicht bedeutet das, dass Ihre Box ein bisschen größer sein muss. Ziehen Sie es nicht einfach so, denn dann sind Sie, eine Form auf der Unterseite wird sich ändern. Dann müssen Sie auf Ihre Shape-Ebene doppelklicken, beide Ankerpunkte auswählen und dann mit den Pfeiltasten nach oben verschieben. Dann geh zurück zu deinem Text und richtete dieses in der Mitte aus, bis es schön aussieht. Ich finde, das sieht ziemlich cool aus. Jetzt werde ich all das auswählen und das Wiederholungsraster-Tool starten und es dann nach rechts duplizieren , bis es auf diese Seite unseres Rasters passt, wie folgt. Der Abstand zwischen den Elementen ist jetzt wegen des additiven Schattens anders. Mach dir keine Sorgen darüber, sorgt nur dafür, dass es hier nicht über diese Seite geht. Der einzige Ort, wo es außerhalb unserer 1.140 sein wird, ist unser Board für diese Bilder, aber das ist nur ein kreativer Teil der Website. Das ist in Ordnung für diesen Teil. Wir werden den gleichen Trick wie für den Kundenbereich hier verwenden, wir werden unsere Bilder importieren. Wenn Sie zurück zu Ihrem Finder gehen und in den Ordner „Testimonials“ gehen. Ich habe drei Bilder von nur Mils hier vorbereitet. Wenn Sie sie auf den Kreis ziehen, überschreiten dann wird sie automatisch füllen und maskieren sie innerhalb dieses Kreises lassen Sie uns das Raster für jetzt ausschalten und schauen Sie sich dies an. Es sieht absolut wunderschön aus. Ja, das war es für diesen Teil. Jetzt werden wir die letzten beiden Balken der Website zu erstellen, dass es die Fußzeile sein wird, die wir wiederholen werden und alle Websites. Und, dieser Teil, der ein Bild oben auf einem Bildknopf und D-förmigen Teiler hat. Ich hoffe, Sie im nächsten Video zu sehen. 21. Aufruf mit den Abschnitten mit Farbverläufen: Hey, und willkommen zurück. In diesem Video werden wir diesen Abschnitt nach unten erstellen. Es wird nicht wirklich schwer sein, also lasst uns einfach anfangen. Also zuerst werden wir unser Artboard ein wenig größer ziehen, und wir brauchen den gleichen Hintergrundstil, wie wir in der Kopfzeile verwendet haben. Also werde ich durch meine Kopfzeile scrollen und es dann so sperren, und dann kopieren und dann wieder sperren, und dann gehen Sie nach unten und fügen Sie das ein. Zuerst muss ich ein Bild schreiben, also gehen Sie zurück zu unserem Fotobereich, und ziehen Sie dann in das rechte Bild. Ich habe dieses Bild verwendet, und ich werde es einfach so ersetzen. Übrigens, wenn Sie das Bild innerhalb der Maske verschieben möchten, können Sie darauf doppelklicken, und dann können Sie das Bild innerhalb der Maske verschieben. Also, jetzt ist das gut für jetzt. Wir brauchen auch den Formteiler, aber wir haben das bereits erstellt, also kopieren wir einfach den, den wir hier erstellt haben. Es ist hier drüben, also müssen wir das wieder entsperren und dann eine Kopie wie diese und dann wieder zum oberen Schloss gehen. Gehen Sie dann zum unteren, verschieben Sie es mit der Befehlshalterung rechts oben, oder gehen Sie einfach zu Ihrem Ebenenfenster, und verschieben Sie es dann nach oben, ziehen Sie es nach oben, und drehen Sie es dann. Wenn Sie also einfach mit der Maus zur Seite gehen, können Sie es so drehen, und dann, wenn Sie Shift halten, zum Beispiel, machen Sie es gerade oder machen Sie einfach wieder eine Wohnung. Oder Sie können natürlich auch über 180 eingeben, um es zu drehen. Aber im Moment werde ich nur die Form so erstellen. Stellen Sie sicher, dass es unter Ihrem Zeugenausweis steht. Also werde ich Befehl und linke Klammern verwenden, um sicherzustellen, dass es sich unter diesem Abschnitt befindet. Nun für dieses Bild, das ist eine Gruppe, verschieben Sie das nach oben, und jetzt ist es oben auf unserer Formebene. Also werde ich das auch runterziehen. Wie Sie jetzt sehen können, sieht das ziemlich cool aus. In meinem endgültigen Design haben wir einen Titel und eine Schaltfläche, und wir haben diese Elemente bereits erstellt, also ziehen wir einfach eines davon, wie diesen, einen der Haupttext und eine Schaltfläche. Das ist alles, was ich jetzt brauche. Ich werde diese beiden Texte zu Weiß machen. Diese Texte müssen in der Mitte, Mitte ausgerichtet sein. Mach dasselbe für diesen, richte es in einer Mitte aus, zentriere es. Ich habe einen anderen Text verwendet, so etwas sieht gut aus. Halten Sie Alt gedrückt, um es ein wenig kleiner zu machen. Bewegen Sie diese nach oben, auch für die Schaltfläche, bewegen Sie das in der Mitte. Wenn Sie den Text halten Befehl ändern möchten, klicken Sie darauf, und passen Sie dann den Text an. Wenn Ihre Schaltfläche nun zu breit ist, klicken Sie mit dem Befehl auf den Hintergrund der Schaltfläche, halten Sie dann die Alt-Taste erneut und machen Sie sie dann etwas kleiner. Ich weiß, dass ich viele Verknüpfungen benutze, aber Verknüpfungen machen Ihr Leben so viel einfacher, wenn Sie sich daran gewöhnen. Also weiß ich, dass es manchmal ein bisschen frustrierend sein kann, aber benutze einfach diese Abkürzungen. Es macht die Dinge wirklich einfach. Nun, bewegen Sie alle ein wenig nach oben, also halten Sie Shift, und bewegen Sie sie dann ein wenig nach oben. Wir brauchen hier viel Platz auf dem Boden, also schnappen Sie sich unsere Schicht, und jetzt möchte ich das Foto etwas größer machen. Wie Sie sehen können, wird es automatisch skaliert, da es sich um eine Maske handelt. Wir werden also keinen Hintergrund haben, der nicht mit dem Bild gefüllt ist. Also denke ich, das ist das, was ich jetzt will. Gehen Sie zurück zu Ihrem Finder und wir fügen unsere beiden Portfolioelemente ein. Ja, wähle einfach zwei von denen aus, die du willst. Ich glaube, ich habe diese beiden benutzt. Ja. Stellen Sie also sicher, dass Sie sie außerhalb Ihrer Kunsttafel ziehen, denn wenn Sie sie hierher ziehen, wird es ersetzen, wie ich bereits sagte. Also, was Sie tun möchten, ist, außerhalb Ihrer Kunsttafel zu gehen, ziehen Sie sie auf hier, und stellen Sie sicher, dass Sie sie so oben auf Ihrem Kunstboard platzieren. Stellen Sie dann sicher, dass Ihr Raster aktiviert ist, da Sie für die Site nicht erneut erstellen müssen. Wählen Sie beide aus, machen Sie sie so viel größer. Wenn Sie mehr Abstand in der Mitte haben möchten, erstellen Sie mehr Abstand wie dieser könnte etwa 50 sein. Wählen Sie dann beide aus und stellen Sie sicher, dass sie sich innerhalb des Rasters befinden. Nun, wenn Sie sie abschneiden möchten, müssen Sie auch eine Maske verwenden. In Überschreitung der Maske funktioniert so. Wenn Sie ein neues Rechteck erstellen, können Sie Ihre rechteckige Form als Maske verwenden. Was Sie jetzt tun können, ist eine Form wie diese zu erstellen, die die Entwürfe wie diese abschneidet, den Rand deaktivieren und es zu einer seltsamen Farbe machen, weil wir das nicht sehen werden. Wählen Sie nun beide Ihre Portfolioelemente und eine neue Maske aus, und drücken Sie dann Befehlshalt M, oder klicken Sie einfach mit der rechten Maustaste, und klicken Sie dann auf Maske. Nein, es ist nicht mal hier, oder? Maske mit Form, wie Sie sehen können, Befehl shift M. So erstellen Sie eine Maske, und dann wird es innerhalb dieses Rechtecks maskieren. Nun in meinem endgültigen Entwurf, wie Sie sehen können, gibt es auch einen Schatten im Inneren von hier, und dieser Schatten ist in der Maske. Also, was du jetzt tun willst, ist, diesen Schatten zu erschaffen. Um einen Schatten zu erstellen, benötigen Sie auch ein Rechteck. Lasst uns vorerst einen Schatten außerhalb unseres Brettes erstellen. Lass es uns so etwas machen. Schalten Sie den Rahmen aus, gehen Sie zu Ihrer Füllung, gehen Sie zu linearen Verläufen. Jetzt mach es von schwarz nach schwarz. Aber der obere Abschnitt muss natürlich eine geringe Transparenz sein, denn dann schafft es einen Schatten. Dann gehen Sie auch zu dieser Farbe und machen Sie das schwarz. Wie Sie jetzt sehen können, haben wir eine schwarze 100 Prozent Deckkraft zu einer schwarzen Null Prozent Deckkraft. Dies ist eigentlich das Verlaufswerkzeug, aber Sie können es auch für Schatten verwenden. Stellen Sie sicher, dass dies auf Ihren Bildern steht, und wie Sie sehen können, ist dies viel zu intensiv. Sie könnten es einfach so lassen, aber wenn Sie es in Ihrer Maske haben wollten, drücken Sie einfach Befehl x, dann doppelklicken Sie auf Ihr Bild wie folgt, und drücken Sie dann den Befehl V, und dann wird es auch im Inneren Ihrer Maske. Denn wir sind immer noch, wie Sie sehen können, in der Maske hier drüben, und manchmal wirst du das auch wollen, deshalb erkläre ich es. Es ist viel zu intensiv, also machen Sie es vielleicht 40 Prozent Deckkraft, so etwas. Jetzt erzeugt es ein wenig Tiefe innerhalb dieses Abschnitts. Also haben wir etwas vergessen? Das glaube ich nicht. Vielleicht ist die Deckkraft des Hintergrunds hier ein bisschen anders, weil das Bild anders ist, vielleicht habe ich es auf 20 gesetzt, wie Sie sehen können, vielleicht habe ich auch die Form geändert, um es ein bisschen weniger intensiv zu machen. So können Sie das auch tun, wenn Sie die Ankerpunkte ändern möchten, ziehen Sie alle Elemente und machen Sie es in die gewünschte Weise passen. Also jetzt sind wir mit der Homepage fertig, und das letzte, was wir tun müssen, ist die Fußzeile zu erstellen. Aber mal sehen, was wir bisher erschaffen haben. Also werde ich auf mein Kunstbrett klicken, und ich werde auf Play klicken. Wenn Sie die Seite bisher erstellt haben, sollten Sie wirklich stolz sein, denn dieser Artikel können Sie bereits diesen Artikel in Ihrem Portfolio verwenden. Ich schlage vor, dass Sie den Stil natürlich ändern, und die Bilder, weil dies nur mein Gesicht und meine Logos ist, aber wenn Sie einen Strand wie diesen erstellen können, können Sie einfach Unternehmen zeigen wie „Hey, schau dir das an, ich kann erstellen eine neue Homepage für Sie.“ Wenn Sie also nur die Elemente und die Schaltflächen im Text ändern, können Sie bereits eine ziemlich anständige Homepage erstellen. Das ist also ziemlich nett. Ich hoffe, dass Ihnen dieses Video auch gefallen hat, und dann im nächsten Video werden wir die Fußzeile erstellen, die Sie auf allen Seiten duplizieren werden. 22. Fußer: Willkommen zurück. In diesem Video werden wir die Fußzeile erstellen, wie Sie hier sehen können. Es hat einen grünen Umriss. Das liegt daran, dass es eine Komponente ist. Dies ist eine der Asset-Kategorien, die Sie hier haben. Was an einer Komponente schön ist, ist, dass Sie dieses Element auf verschiedenen Seiten verwenden können. Wie Sie hier sehen können, hat dies auch einen grünen Umriss, und wenn ich etwas in der Hauptkomponente hier ändere, wird es sich auch in allen anderen ändern. Zum Beispiel, wenn ich dieses Logo so nach unten ziehe , werden Sie sehen, dass es sich auf allen Seiten ändert. Ich habe dies nicht für das Menü getan, denn im Menü möchte ich diese Zeile ändern, um dem Besucher zu zeigen, auf welcher Seite er ist, das ist nicht wirklich eine Komponente. Wie in dieser Datei habe ich es zu einer Komponente gemacht, aber ich brauche das nicht wirklich, denn auf der Portfolio-Seite, wie Sie sehen können, ist es keine Komponente, weil es anders ist. Wenn ein Element auf allen Seiten gleich ist, möchten Sie diese Komponente verwenden, wie Sie hier sehen können. Das ist es, was wir jetzt erschaffen werden. Machen Sie unser Board ein wenig länger, holen Sie unser Rechteck, um ein großes Rechteck zu machen, deaktivieren Sie den Rahmen, geben Sie ihm eine Hintergrundfarbe, heben Sie es an und richten Sie es dann aus. Ich werde diese Zelle nicht wieder erstellen, ich werde sie nur aus dem Menü kopieren. Kopieren Sie einfach das ganze Menü, gehen Sie nach unten und sperren Sie dieses, und drücken Sie dann V und ist schon fast eine Fußzeile. Klicken Sie auf diesen Punkt und heben Sie die Gruppierung auf, klicken Sie mit der rechten Maustaste, und heben Sie die Gruppierung auf. Sie können die einzelnen Zellen in eine sauberere Linie ändern. Ich möchte, dass ein Logo in der Mitte ist. Auf den meisten Fußzeilen ist das Logo auf der linken Seite und es gibt nur ein paar Artikel hier auf der rechten Seite. Aber für diese Fußzeile möchte ich es nur wirklich einfach halten. Ich habe es einfach so. Ich habe einen Artikel hier drüben, Artikel hier drüben und einen Gegenstand hier drüben. Ich ändere den Text einfach in so etwas. Es ist nicht die perfekte Fußzeile, weil die Ausrichtung nur ein wenig peinlich ist weil einige Wörter länger sind als andere Wörter. Ich liebe diese Fußzeile nicht wirklich, lass es uns jetzt ein bisschen anders machen, lass uns einfach den Stil ändern und einfach das Logo auf der linken Seite hier setzen. Es wird ein wenig anders sein als die eigentliche Website, die ich erstellt habe. Lassen Sie uns alle auswählen, sagen Sie es so, und jetzt müssen wir es zu einer Komponente machen. Entsperren Sie es wieder und wir müssen alles auswählen und zu Komponenten gehen und das Plus drücken. Jetzt wird es den grünen Umriss erstellen, so dass Sie wissen, dass es eine Komponente ist und das ist die Master-Komponente, weil Sie sehen können, dass es hier drüben dieses Saturndreieck hat. Wenn wir in Zukunft eine andere Seite erstellen, können wir einfach diese Komponente ziehen, die wir umbenennen müssen, sonst wissen wir nicht, was das ist. Wir könnten diese Komponente einfach wie diesen Boom lenken, und vielleicht auf eine andere Seite, Boom. Wenn wir die erste ändern, wird es auch andere zwei ändern, wie Sie sehen können. Dies ist der Komponententeil auch eine sehr schöne Funktion in Adobe XD. In der nächsten Folge werden wir eine weitere Seite erstellen, die die About Seite wird wirklich einfach sein. Ich denke, wir können diese Seite in einer Episode erstellen, in etwa ein paar Minuten. Das sollte wirklich lustig sein. Ich hoffe, Sie in der nächsten Episode zu sehen. 23. Die Portfolio-Seite: Alles klar, willkommen zurück. In dieser Folge werden wir die Portfolio-Seite erstellen, wie Sie in der endgültigen Entwurfsdatei hier sehen können. Es ist eine ziemlich einfache Seite, also lasst uns einfach anfangen. Ich gehe zurück zu meiner Akte und mache ein Duplikat meines Hauptplatzes. Lass uns das auch ein bisschen runterlegen. Ich werde auf die drei Punkte klicken. Ich werde Alt und Shift halten, und ich werde ein Duplikat von meinem Hauptkunstbrett machen, und das war's. Jetzt werde ich alles löschen, was auf dieser Seite ist, während zumindest fast alles wie dieses gelöscht. Dieser wurde gesperrt, also werden wir es entsperren, mit der rechten Maustaste entsperren und dann auch löschen. Wir werden hier hineinzoomen und das ist nur der Hintergrund, also brauchen wir all diese Symbole. Wir müssen Shift halten und dann auf die Symbole und den Hintergrund klicken, und jetzt ist das auch weg. Der Header auf dieser Seite ist etwas kürzer, also müssen wir auch diesen freischalten, etwas nach oben verschieben, so etwas, das gut sein sollte. Wir werden auch den Text ändern. Ich habe die 36 hier drüben benutzt. Ich habe es weiß gemacht, ich habe es zentriert ausgerichtet und zentriert es auf die gesamte Kunsttafel ausgerichtet. Wie Sie sehen können, war das ziemlich schnell. Löschen Sie all dies, weil wir das nicht brauchen , und wir werden auch das Menü ändern, da wir jetzt auf der Portfolio-Seite sind. Jetzt werde ich Befehl drücken und ich werde diese Zeile halten, dann werde ich Shift halten. Lassen Sie die Befehle los und halten Sie einfach Shifts, um es auf der Horizontalen zu verschieben , und dann werde ich es einfach ziehen und machen es länger. Verwenden Sie nun keine Umschalttaste oder Befehl, sondern ziehen Sie sie einfach. Jetzt haben wir einen kleinen Hinweis darauf, dass wir auf der Portfolio-Seite sind. Alles klar, was brauchen wir auf dieser Seite? Wir brauchen ein Bild, wir brauchen einen Titel, einen Text und einen Link. Mal sehen, wie schnell wir das schaffen können. In Ordnung, gehen wir zurück zu unserer Akte. Gehen Sie nun zu Ihrem Finder, gehen Sie durch die Website-Dateien und dann Portfolio-Elemente und hier sind Ihre vier Elemente. Lassen Sie uns einfach ziehen und unser erstes Bild, stellen Sie sicher, dass Sie es nicht über dieses ziehen nur auf dem Hintergrund wie folgt. Das ist gut. Es ist ein bisschen zu klein. Meine Exporte sind nicht perfekt, aber das ist kein großes Problem für den Moment. Wir brauchen einen Titel, der 24 ist. Ich gehe zurück zu meinem Styleguide. Ich wähle das aus, und ich werde diesen aussuchen. Ich halte die Umschalttaste gedrückt und wähle dann beide aus. Ich drücke Kopieren oder komm und sieh. Ich gehe zurück zu meiner Kunsttafel. Ich klicke in die Kunsttafel und dann mit der rechten Maustaste Einfügen, und jetzt haben wir einen Titel und wir haben eine Beschreibung. Der Titel für ein Projekt, ich möchte nur, dass es eine Zeile ist. Dann will ich ein wenig Abstand. Nehmen wir an, 20 Pixel machen vielleicht diese drei Zeilen, und jetzt wollen wir einen Link. Wie werden wir einen Link erstellen, indem wir ein Duplikat machen, also halte ich Alt wieder auf die Texte. Ich werde einfach doppelklicken und diesen Text ändern, um die Projekte zu entdecken. Ich mache es nur zu Punkt X, weil wir dieses ganze Textfeld nicht brauchen. Ich werde es lila machen, und jetzt werde ich hier auf dieses Tool klicken und doppelte erstellen eine Unterstreichung auf Texte. Dies wird es wie ein Link aussehen lassen. Jetzt möchte ich es ausrichten, also werde ich sicherstellen, dass es auch 20 Pixel von diesem Boden sind und wie ich bereits sagte, stellen Sie sicher, dass Ihre Boxen an den unteren Rand der Texte zugeschnitten sind, und jetzt sieht das cool aus. Aber jetzt ist die Dimensionierung nicht gut, also müssen wir ein paar Dinge ändern. Zuallererst muss das Bild viel größer sein. Sagen wir einfach, dass unser Bild, wir wollen, dass es so groß ist wie dieses. Aber bevor wir die Texte ziehen und es auch weiß machen und das Repeat Raster verwenden, um, jetzt zuerst zu überprüfen, ob dies tatsächlich die Breite ist, die ich will. Ich werde ein Duplikat von diesem machen. Halten Sie Alt und Shift, und was gibt es jetzt? Es sind nur 21 Pixel in der Mitte. Ich denke, das ist ein bisschen zu weniger, also werde ich das ein bisschen kleiner machen, also halten Sie es von dieser Seite, so etwas wie dieses. Machen Sie wieder ein Duplikat, und dann in der Mitte ist 55. Das ist viel besser. Sie können natürlich mit diesen Einstellungen spielen, aber das ist gut genug für jetzt. Jetzt ziehe ich alle meine Texte und ziehe sie einfach, und das ist eine nette Sache mit dem Textwerkzeug. Stattdessen können Sie sie einfach ziehen und der Text wird länger sein. Löschen Sie dies vorerst. Alles klar, das Letzte, was ich getan habe, ist, dass ich einen kleinen Schatten hinzugefügt habe , wie Sie sehen können, es ist sehr weich. Es ist der gleiche Schatten wie ich für die Logos verwende, also ist es nur drei, sechs, und dann ist die Deckkraft 16. Denken Sie daran, dass drei, sechs und 16. Wir gehen zurück zu unserer Akte. Klicken Sie auf unseren Artikel, klicken Sie auf Schatten drei, sechs und dann 16. Alles klar, nicht, Sie haben sich daran erinnert. Adobe XD erinnerte sich an die Einstellungen. Nun, was wir tun können, ist wählen Sie alle Ebenen und klicken Sie jetzt auf das Repeat Raster. Jetzt brauchen wir das Raster auf der Website, um zu sehen, wie groß der Raum zwischen diesen beiden Elementen sein wird. Wir müssen es an der Seite ausrichten. Ich ziehe es einfach. Ich werde sicherstellen, dass diese Linie so auf die blaue Linie trifft. Jetzt verzweifelte Wirkung und ich werde es auch auf den Boden erweitern. Stellen Sie einfach sicher, dass Sie vier Artikel für jetzt haben. Ich werde auch drinnen klicken und dann dieses ziehen, um es viel größer zu machen. Für jetzt werde ich es auf 80 setzen, weil ich denke, das sieht gut aus. Ich werde das Raster ausschalten und ich werde einige Bilder importieren. Ich gehe zurück zu meinem Finder, wähle alle meine Portfolioelemente und ziehe sie nun so hinein. Jetzt können Sie sehen, dass wir fast schon mit dieser Seite fertig sind, das ist super nett. Jetzt ist das Einzige, was wir brauchen, ich denke, eine Fußzeile. Wie ich in einer der vorherigen Episoden erklärt habe, können Sie jetzt einfach die Komponente von hier ziehen, boom. Platzieren Sie es einfach so, stellen Sie sicher, dass sich darunter eine gesunde Marge befindet. Ich werde 100 Pixel auswählen, und ich werde einfach auf den Hintergrund klicken und dann diesen ein wenig kürzer ziehen und sicherstellen, dass er unten passt. Jetzt, wie Sie innerhalb weniger Minuten sehen können, haben wir diese Seite entworfen, sieht wirklich schön aus und das ist auch wirklich einfach in eine responsive Seite zu konvertieren. In der nächsten Folge werden wir die über Seite aufbauen, die etwas komplizierter ist. Ich nannte es Dienste, das ist nicht gut. Dies ist die Übersichtsseite. Aber auf der Über Seite gibt es Tabs, wie Sie hier sehen können, gibt es eine Bildergalerie und es gibt diesen FAQ-Abschnitt. Wir sehen uns in der nächsten Folge. 24. Über den Teil 1: Ein kurzer Anfang: Beginnen wir mit dem Erstellen der About Seite, das sieht ziemlich kreativ aus. Als ich gerade anfange, werden wir versuchen, es so schnell wie möglich zu tun und versuchen, ein wenig zu beschleunigen, denn dies ist auch ein Kurs, um Ihren Workflow ein bisschen schöner zu machen. Die oberen Abschnitte hier oben sind ziemlich einfach, das wird ziemlich schnell gemacht werden, und dann werden wir auf diesen Abschnitt gehen, der ein wenig kompliziert ist. Dieser ist einfach und dieser ist auch ein bisschen kompliziert, aber es wird nicht so schwer sein, mal sehen, wie schnell wir diese Seite erstellen können. Was ich tun werde, ist ich werde ein Duplikat der Portfolio-Seite machen, ich werde auf die nach oben klicken, ich werde Alt und Shift halten und dann ein Duplikat wie folgt machen, werde ich alle Inhalte auf der Innenseite löschen. Zunächst werde ich kommen und klicken und es für jetzt viel länger machen, ziehen Sie die Fußzeile nach unten. Jetzt ist das erste, was wir tun müssen, die drei Spalten zu erstellen , die wir dafür brauchen unsere Über, ich möchte Ihnen einen kleinen Trick zeigen, wie Sie das tun können. Nehmen wir einfach Ihr Rechteck für jetzt, und ich werde ein Rechteck wie dieses erstellen. Jetzt werde ich ein weiteres Rechteck erstellen, indem ich Alt gedrückt halte, das ist perfekt. Es sind bereits 50 Pixel im Unterschied, das war nur Glück für mich. Jetzt haben wir auch 50 Pixel im Unterschied, Sie möchten ein wenig Leerraum zwischen diesen Blöcken haben, weil wir dieses Leerzeichen auf der ganzen Seite verwenden werden. Mal sehen, ob wir im Raster sind, das ist perfekt, das war nur Glück, denn jetzt werden wir ein paar helfende Linien oder Lineale erstellen, wie es heißt, wenn Sie Ihre Maus auf die Seite der Oberseite bewegen, erhalten Sie diesen Hover-Effekt, Wenn Sie dann klicken und ziehen, können Sie eine Linie auf Ihrem Oberteil aufstellen, die nicht Teil Ihres Designs ist, aber es wird Ihnen helfen, bestimmte Dinge auszurichten, ich werde hier eine Linie setzen. Jetzt kann ich all diese Blöcke so löschen, und wir werden ein paar Zeilen haben, die uns helfen, unsere Elemente auszurichten. Gehen wir zurück zu meinem endgültigen Entwurf, schauen wir uns zuerst an, was wir hier haben. Dies ist ein 36 Titel, 16 und 822, was wir tun werden, ist, dass wir ein paar Titel von hier ziehen. Das ist 24, sehen Sie, ich habe hier einen Fehler gemacht, das sollte 24 sein. Auch wir werden dieses verwenden, und wir werden dieses verwenden, wir werden auch das Fett verwenden und wir werden Text verwenden, ich werde all das kopieren,zu meiner Datei zurückgehen, zu meiner Datei zurückgehen, und lassen Sie uns Setzen Sie einfach den Text hier zuerst, kopieren Sie ihn und fügen Sie ihn einfach ein, löschen Sie diesen, jetzt lassen Sie uns zuerst die Spalten erstellen. Richten Sie jeden Text an diesen Spalten aus, wie Sie hier sehen können, schauen wir uns das endgültige Design an, ich brauche hier einen fett Titel und eine 36 hier für alle Titel. Zuerst gibt es eine kleinere Version und dann gibt es eine größere Version, lasst uns einfach die kleinere Version so greifen. Dies wird nur eine Textzeile sein, ich werde es zu einem Punkt Texte machen, ich werde das lila machen. Jetzt wird das nur ein großer Titel wie dieser sein, ich werde das auch an Punkt X machen, denn wie Sie sehen können, gibt es nur eine Textzeile, weil ich es einfacher machen werde, zu ziehen und auszurichten, ich gebe, dass 10 Pixel Leerraum zwischen diesen beiden Gegenständen. Nun, wie Sie sehen können, das endgültige Design, wir haben auch nur eine Textzeile hier drüben, ich werde diese auch in einen Text konvertieren, in einem Punkt Texte wie diesem. Geben Sie auch, dass 10 Pixel Abstand zwischen vielleicht ein wenig mehr, vielleicht etwas wie 15. Was ich jetzt tun werde, ziehe ich es hier hoch, stelle sicher, dass es nach oben ausgerichtet ist und mache eine Kopie davon. Jetzt haben wir die Grundlagen für diese ganze Seite und dies wird es einfach machen, eine Seite zu erstellen. Was wir jetzt tun werden, ist, dass wir uns unser Design ansehen werden. Wie Sie sehen können, ist dieser Header wirklich groß also was ich tun möchte, ist zuerst diese nach unten zu ziehen. Vielleicht machen Sie so etwas, ziehen wir diesen ein wenig nach unten, ich werde zuerst den Hintergrund vorbereiten, ich werde die Hintergrundebene entsperren, und ich werde auch die Gruppierung aufheben, weil es zwei Ebenen gibt drinnen, drücke ich „Comment Alt G“ oder einfach mit der rechten Maustaste und heben die Gruppierung auf. Jetzt gehe ich zu meinem Finder, füge das Foto ein, das wir brauchen, so und ich werde es viel dunkler machen, indem ich die Deckkraft verringert, ich werde es bei 20 Prozent setzen, ich werde zwei oder vielleicht sogar eins drücken, so der Text wird wirklich sichtbar sein. Wählen Sie nun beide Hintergrundebenen aus, gruppieren Sie sie erneut, und klicken Sie dann mit der rechten Maustaste und sperren Sie sie, und auf diese Weise können wir sie verschieben. Außerdem werde ich das auch für diesen hier tun. Jetzt schauen wir mal, wie schnell wir das machen können. Schnappen Sie sich alle Ihre Titel, klicken Sie auf alle und machen Sie ein Duplikat, machen Sie jetzt diesen, machen Sie sie weiß. In meinem endgültigen Entwurf gibt es sogar einen einleitenden Text, wie wir hier sehen können, tut mir leid, diese Texte müssen nicht weiß sein, sondern müssen lila sein , weil das auf diesem dunklen Hintergrund wirklich schön aussieht, wir haben einen kleinen einleitenden Text, wie Sie hier sehen können. Was ich tun werde, ist, dass ich das ein wenig nach unten ziehe und dann eine davon ziehe, eine Kopie davon machen, es kleiner machen, und ich mache es länger. Jetzt brauchen wir mehr Abstand, also habe ich es einfach so ausgedrückt, das sieht gut aus, mal sehen, was wir bisher erstellt haben, klicken Sie oben und klicken Sie auf Spiel und das sieht absolut schön aus. Lassen Sie uns einfach das Bild für jetzt und dann gehen wir zu den anderen Abschnitten zu bewegen, gehen Sie zurück zu Ihrem Finder. Das Foto über ist, was wir brauchen, um es außerhalb Ihres Upboards zu nehmen, um sicherzustellen , und ziehen Sie es dann innerhalb Ihres Upboards und skalieren Sie es, wie Sie sehen können, Ich habe die Bilder nicht groß genug exportiert, aber sie sind immer noch scharf genug. Ich denke, nun, es ist nicht perfekt, aber Sie sollten immer scharfe Bilder verwenden, natürlich, nicht zu scharf, weil sonst Ihre Websites langsam sein werden, aber dieses Bild überlappt, wie Sie hier sehen können. Lassen Sie mich sehen, es gibt auch einen sehr weichen schönen Schatten, das werden wir auch schaffen. Klicken Sie auf den Schatten, wir werden dies bei der 30 und dann auf 60. Jetzt haben wir diesen sehr weichen und schönen Schatten, vielleicht verringern Sie diesen ein wenig, und mal sehen, was wir bisher geschaffen haben, klicken Sie wieder in Ihrem Upboard und drücken Sie dann Play. Absolut schön, ich mag dieses Ergebnis, lassen Sie uns jetzt mit diesem Teil im nächsten Video fortfahren. 25. Seitenteil 2: Tabs + Galerie: Willkommen zurück. In diesem Video werden wir die DEP-Funktion erstellen, die Sie hier sehen können. Dies ist eine der Funktionen, die häufig in großen Websites verwendet wird, um beispielsweise einen Prozess anzuzeigen , bei dem es mehrere Schritte gibt und Sie die Seite nicht zu lang machen möchten. In diesen Schritten werden Informationen zwischen ausgeblendet. Es ist wirklich einfach. Es ist nur ein Haufen von Texten und ein Umriss. Lassen Sie uns einfach wie für jetzt erstellen. Ich gehe zurück zu meinem Film. Ich werde sicherstellen, dass die Farbe hier gut ist. Ich werde das auf Purple setzen. Welche Farbe habe ich hier benutzt? Ich glaube, ich habe diese Farbe benutzt. Ja. Ich benutze diese Blöcke nicht. Wir benutzen hier keinen Titel. Wir verwenden nur ein weißes Textfeld wie dieses. Richten Sie es nach oben aus. Stellen Sie sicher, dass es oben in einer Textzeile ausgerichtet ist. Das sieht gut aus. Vielleicht setzen Sie ein wenig Enter, um es ein bisschen schöner aussehen zu lassen. Jetzt verschieben Sie diese einfach so nach oben, und lassen Sie uns zuerst den Umriss erstellen. Was ich tun werde, ist, dass ich das Linien-Werkzeug greifen werde, wie Sie hier sehen können. Ich werde nur einen sehr groben Umriss erstellen. Jetzt müssen Sie wirklich die Shift verwenden. Also, wenn Sie Shift halten und Sie können sehen, dass eine andere Linie gerade bleibt und das ist, was Sie wollen. spielt keine Rolle, ob es beim ersten Mal nicht perfekt ist. Lassen Sie zuerst die Maus los und lassen Sie die Umschalttaste los. Mach dir keine Sorgen um die Farbe hier. Jetzt beginnen Sie nicht an diesem Punkt, denn dann werden Sie die erste Zeile ziehen. Jetzt müssen wir an einem anderen Punkt beginnen und so rückwärts gehen. Mach dir vorerst keine Sorgen um die Linien. Ich möchte Ihnen nur die Grundform zeigen. Erstellen Sie eine Zeile wie diese. Ich werde auch eine Zeile wie diese erstellen. Stellen Sie sicher, dass Sie die blauen Linien verwenden, um sich so zu helfen. Aber ich weiß, dass ich es etwas größer für den Text machen werde. Ich werde es so beenden. Jetzt drücken Sie V. Jetzt werden wir die ganze Box so ausrichten, dass sie zu unserem Design passt. Zuallererst, was ich tun werde, ist, dass ich alles ziehen werde, es nach links verschieben und es ein bisschen größer machen werde. Wie wir jetzt sehen können, wird es unser Design durcheinander bringen. Aber das ist keine große Sache, weil wir die Linien von Hand ändern müssen. Also stellen Sie sicher, dass es auf dieser Seite ist. Stellen Sie sicher, dass es groß genug ist. Also werde ich eine meiner Textebenen greifen und sie nach innen verschieben und ausrichten, vielleicht machen Sie diese vier Zeilen wie diese und sehen, ob es genug Platz auf der linken Seite, oben und unten. Vielleicht will ich etwas mehr Platz auf der Unterseite. Also werde ich alles auswählen, die Texte deaktivieren und ich werde Shift halten und dann auf den Text klicken. Ich werde es ein bisschen größer machen, um ihm ein bisschen mehr Platz zu geben. Jetzt steht uns die blaue Linie im Weg, also werde ich das vorerst löschen. Ziehen Sie es einfach und bewegen Sie es auf die Seite und dann ist es weg. Ich werde auch das Gitter ausschalten, wie Sie sehen können. Also können wir sehen, was wir tun. Klicken Sie nun auf Ihren Text und richten Sie ihn einfach aus. Vergessen Sie nicht, die Umschalttaste zu halten, damit Ihre Linien gerade sind. Stellen Sie einfach sicher, dass alle Leitungen verbunden sind. Markieren Sie erneut alles, halten Sie die Umschalttaste gedrückt, heben Sie die Auswahl des Textes auf, und machen Sie ihn nun violett oder die gewünschte Farbe. Ich glaube, ich habe Purple benutzt. Nein, ich benutzte hier Hellviolett, das normale Lila und Dunkelviolett. Mach das hier zum hellvioletten. Wir möchten einen Titel ziehen. Lasst uns das einfach ziehen. Machen Sie diesen Schritt Nummer eins, zum Beispiel Design. Jetzt machen Sie eine Kopie von diesem. Ändern Sie den Text, machen Sie ihn ein wenig dunkler. Dies ist auch eines der Dinge, die im Web-Design wirklich wichtig ist, ist, dass Sie Ihre Farben verwenden, um die Erfahrung besser zu machen. In diesem Fall, wenn ich auch diese eine lila machen würde, der einzige Hinweis, dass wir auf diesem Schritt sind, wäre diese Zeile und das ist genug. Aber wenn Sie eine weitere Tiefenebene hinzufügen können, können Sie jetzt sehen, dass diese hervorgehoben ist. Selbst wenn jemand keinen guten Bildschirm hat und diese Zeilen nicht haben, können Sie sehen, dass dieser hervorgehoben ist, weil er leichter ist. Also, das wollte ich dir nur zeigen. Ich denke, diese Box ist ein bisschen zu klein, also werde ich es anpassen und es ein bisschen größer machen. Ich werde zwei weitere Titel machen. So etwas wie das. Lassen Sie uns diese Zeilen für jetzt löschen. Wie Sie hier sehen können, sieht es im Vergleich zu meinem Endergebnis ähnlich aus. Sie können es natürlich ein bisschen mehr ändern, um es ein bisschen mehr passen zu lassen. Aber ich mag dieses Design, es ist einfach und es funktioniert. In dieser Episode möchte ich auch diesen Teil erstellen. Es wird wirklich einfach sein, aber weil dies nur ein paar Bilder sind und es ist der gleiche Stil, den wir zuvor verwendet haben. Mal sehen. Ich werde mir das hier schnappen. Machen Sie ein Duplikat davon. Stellen Sie nun sicher, dass Sie den gleichen Platz von hier nach hier haben, dann von hier nach hier. Das sind 100. Jetzt möchten Sie sicherstellen, dass Sie 100 Pixel am unteren Rand dieser Zeile haben. Wie Sie sehen können, ist diese Linie nicht perfekt ausgerichtet, aber 990.9 ist gut genug. Gehen Sie nun zu Ihrem Finder, greifen Sie die Software, die ich benutze. Schnappen Sie sich alle und legen Sie sie einfach in Ihr App-Board. Ich werde zwei Zeilen verwenden, jeweils drei Spalten. Richten Sie sie aus, damit es gut auf dem Auge aussieht. Jetzt gruppieren Sie sie einfach und platzieren Sie sie in Ihrem App-Board. Jetzt können Sie einfach den Abstand ändern, um ihn ein wenig besser aussehen zu lassen. Mal sehen, was wir bisher erschaffen haben. Ich werde auf Plus klicken. Das sieht wirklich schön aus und Kontrast sieht gut aus. Wir müssen hier vorbeikommen und wir haben eine kleine Fotogalerie mit ein paar Logos. Das sieht ziemlich schön aus. In der letzten Folge dieser Seite werden wir diesen Abschnitt erstellen. Es wird nicht sehr schwierig sein, aber wir werden das Form-Werkzeug für diese Rechtecke verwenden. 26. Über die Seite 3: Häufiges Abschnitt: Willkommen zurück. In diesem Video werden wir diesen FAQ-Abschnitt erstellen, der aussieht, wie dieser Teil tatsächlich durch Klicken auf direkten Winkel geöffnet wird. Es tut mir Leid. Das Dreieck hier drüben. Lassen Sie uns einfach mit diesem Design beginnen. Zunächst werden wir es natürlich den Titel duplizieren und sicherstellen, dass es den gleichen Abstand hat. Löschen Sie diese Zeile vorerst. Was ist dieses Design, eigentlich, ist nur ein Titel, der nur eine Halbschraube 16 Punkte ist. Dann ist es dieses kleine Dreieck und Inline. Wir haben diese Zeile bereits erstellt, also können wir diese Zeile einfach von hier aus lenken und sie einfach hier platzieren. Für die Textebene möchte ich ein Textfeld wie dieses erfassen, es nur eine Zeile machen und dann 16 in Schrauben machen. Ich verwende zwei Farben für die aktive. Ich habe das hellviolette und für das nicht aktive verwendet, habe ich das dunkle lila verwendet, das ist der gleiche Stil wie wir hier drüben verwendet haben. Stellen Sie sicher, dass Sie den gleichen Stil auf Ihrer Website haben, auf Ihren verschiedenen Seiten. Denn dann sieht es einfach konsistent aus, was im Design wichtig ist. Wie Sie sehen können, habe ich hier sogar eine dunklere Version benutzt. Das stimmt nicht vollkommen damit überein. Jetzt bleiben wir einfach bei dieser Farbe hier drüben. Nun, was Sie tun möchten, ist zu vergrößern und erstellen und klicken Sie auf das Dreiecks-Werkzeug und wir werden nur ein winziges Rechteck erstellen. Halten Sie Shift gedrückt, um ein perfektes Dreieck zu erstellen. Deaktivieren Sie jetzt den Rahmen, machen Sie es dunkel. Wenn nun die Frage nicht angeklickt wird, muss sie nach rechts zeigen. Drücken Sie einfach „V“ und gehen Sie dann nach rechts, bis Sie die Drehung sehen, halten Sie die Umschalttaste gedrückt und drehen Sie sie und richten Sie sie aus. Ein bisschen zu groß. Lass es uns ein bisschen kleiner machen, es wieder ausrichten und los geht's. Lasst uns das alles schnappen. Machen Sie eine Gruppe, wie wir leicht duplizieren können als halten Alt und Shift und machen Sie zwei Duplikate davon wie folgt. Geben Sie ihm ein wenig Platz, denn wir brauchen auch eine Frage, die offen ist. Machen Sie ein weiteres Duplikat, um die Gruppierung aufzuheben. Klicken Sie mit der rechten Maustaste, heben Sie die Gruppierung auf, legen Sie diese nach unten. Wir werden ein wenig Platz für unsere Texte haben. Ich denke, wir brauchen mehr Platz. Vergrößern Sie einfach diesen Raum hier drüben. Ich nehme einfach eines Ihrer Textfelder wie folgt. Halten Sie Alt und machen Sie es zum Design passen. Wenn wir das zu einem leichten machen, können Sie sehen, dass der Kontrast nicht wirklich schön ist. Ich bevorzuge das Design, das ich hier benutzt habe. Ich werde mir nur das, diesen und diesen Titel schnappen . Ich halte Befehl und Shift und werde das zur dunklen Farbe machen. Das hier, ja, es ist dieser, der 6A6680. Ich werde das auch für diese Titel tun, weil ich denke, das sieht ein bisschen besser aus. Nun gibt es noch einen größeren Unterschied zwischen dem aktiven Zustand und den nicht-aktiven Zuständen. Ja, das sieht ein bisschen besser aus. Jetzt brauchen wir nur einen kurzen Einleitungstext wie diesen. Ich bin sicher, es ist eine Zeile an der Spitze des kleineren Titels. Nun, greifen Sie all das, gruppieren Sie es, verschieben Sie es nach oben und das einzige, was wir tun müssen, ist das Rechteck zu ändern. Entschuldigen Sie, das Dreieck hier drüben und drehen Sie es so, als würde es sich öffnen. Nun, das letzte, was wir brauchen, ist die Fußzeile. Schnappen Sie sich Ihre Komponenten, ziehen Sie Ihre Fußzeile. Ich hatte schon eine Fußzeile. Lassen Sie uns jetzt unseren Vorstand verringern und jetzt sind wir fertig. Schauen wir uns unsere Ergebnisse an. Wir werden auf unsere Tafel klicken, auf „Play“ klicken, und ich bin wirklich zufrieden mit den Ergebnissen. Ich hoffe, Ihr Design sieht auch ziemlich schön aus. Aber das ist eine solide About Seite. Speichern wir unsere Akte vorerst. Dann gehen wir auf die nächste Seite, die eine super einfache Seite sein wird. Wir werden das in einer Episode bauen. Wird die About Seite mit unseren benutzerdefinierten Social-Media-Symbolen, die betroffen sind und super scharf. 27. Kontaktseite: Willkommen zurück. In diesem Video werden wir die Kontaktseite erstellen. Was werden Sie jetzt tun, wenn Sie Ihr Design hier haben, werden Sie ein Duplikat dieser Seite oder dieser Seite erstellen? Das ist auch, woran ich denke, bevor ich mit dem Duplizieren beginne. Sie müssen sich die Seite ansehen und sieht sie dieser Seite ähnlicher aus oder sieht sie dieser Seite ähnlicher aus? In diesem Fall spielt es keine Rolle, da der obere Abschnitt dieser Seite ähnlicher aussieht und der Abwärtsbereich eher dieser Seite ähnelt. Aber ich wollte dir nur diesen Tipp geben. Duplizieren Sie einfach nicht Ihre letzte Seite und beginnen Sie dann, sie anzupassen. Vielleicht gibt es eine andere Seite, die schon so aussieht, zumindest ein bisschen und dann musst du nicht so viel ändern. Für jetzt werde ich nur diese Seite so greifen, löschen Sie das Innere davon. Ich werde auch ein Duplikat dieses Teils machen, also kopieren Sie es, klicken Sie auf die Neue Zeichenfläche und fügen Sie es ein. Dann, wie Sie hier sehen können, haben wir diesen unteren Teil, der wie dieser obere Teil aussieht, aber dann mit verschiedenen Farben. Also werde ich diesen Teil greifen, indem ich Shift gedrückt halte, Befehle gedrückt halten, Kopieren drücken zu unserer neuen Zeichenfläche gehen und ihn einfügen, Shift halten und nach unten bewegen, und dann die Farbe hier so ändern. Jetzt ändern wir das Bild wieder. Entsperren Sie es, heben Sie die Gruppierung auf, und gehen Sie dann zu Ihrem Finder, gehen Sie zu Fotos und ziehen Sie das neue Foto wie folgt. Ich werde das ein bisschen größer machen, um es ein bisschen mehr Abwechslung zu geben. Jetzt ist die eine Sache, die wir für dieses Design brauchen, eine riesige Google Map. Für jetzt werde ich nur einen Screenshot verwenden. Wenn Sie möchten, dass die Google Map in Ihrem Design implementiert, sollte ich zu Google Maps gehen, und dann mache ich nur einen Screenshot des tatsächlichen Ortes. Aber Sie wollen nicht, dass dies Teil Ihres Designs ist. Sagen wir mal, du wohnst hier drüben. Geben Sie einfach Ihren Standort ein und klicken Sie auf diese weg, und jetzt können Sie einen großen Screenshot machen. Wenn Sie möchten, können Sie einen Screenshot der gesamten Seite erstellen. Aber für Ihr Design denke ich, es sieht ein wenig sauberer aus, wenn Sie nicht alle diese Tasten enthalten, aber Sie können natürlich einen Screenshot dieses Teils und dieses Teils auch erstellen. Übrigens, habe ich Ihnen gezeigt, wie man einen Screenshot erstellt? Dies ist für Windows anders als auf Mac. Aber auf dem Mac heißt es „Befehl“, „Kontrolle“, „Shift“, „4. Es ist keine einfache Abkürzung, aber es ist super nett, weil Sie dann einen Screenshot wie diesen erstellen können. Wenn Sie dann Platz halten, können Sie diese Box sogar so verschieben. Ich benutze das die ganze Zeit. Es ist so super nett. Unter Windows können Sie einfach die Schaltfläche „Bildschirm drucken“ verwenden, aber ich denke, unter Windows 10 gibt es eine neue Option, bei der Sie auch einfach einen Screenshot eines Teils einer Seite erstellen können . Jetzt werde ich klicken, und jetzt ist es in meiner Zwischenablage gespeichert. Jetzt kann ich in Adobe XD gehen und ich kann einfach auf eine Paste oder Befehls-v klicken und dann einfach die Karte hier drüben verringern und es so zu Ihrer Zeichenfläche passen. Ich werde wieder einen Schatten hinzufügen, Sie kennen bereits die Zahlen 30, 60 und vielleicht verringern Sie die Deckkraft ein wenig. Verschieben Sie nun diese ganze Box nach oben und setzen Sie das auch bei 100 Pixeln Leerzeichen aus. Nun ist das letzte, was wir tun müssen, den Text einfügen. Wie Sie hier sehen können, habe ich zwei Farben innerhalb einer Textebene. Wie Sie das tun können, ist ziemlich einfach, wenn Sie nur den Text zum Beispiel so eingeben, dann können Sie einfach den Text auswählen und dann eine Farbe drücken. Dies ist in den meisten Werkzeugen nicht möglich, da Sie in anderen Werkzeugen beide das gesamte Textfeld auswählen, aber in XD können Sie es einfach so machen. Es ist ziemlich einfach. Nun lassen Sie uns einfach unsere Social-Media-Symbole einfügen, die übrigens Vektor sind. Jetzt gehen wir in den Ordner, Social Icons, SVG, Sie können ein paar Social Icons von hier wählen. Ich werde zum Beispiel YouTube, Instagram und LinkedIn platzieren . Ziehen Sie sie einfach so außerhalb Ihrer Zeichenfläche. haben wir bereits mit den SVG-Symbolen auf der Homepage gespielt Natürlichhaben wir bereits mit den SVG-Symbolen auf der Homepage gespielt, so dass Sie bereits wissen, wie das funktioniert. Sie werden es einfügen, verkleinern, indem Sie die Umschalttaste gedrückt halten und sie noch kleiner machen. Verkleinern Sie, um zu sehen, ob es nicht zu groß ist. Ich mag es, die Icons wirklich klein zu machen, weil ich denke, das sieht wirklich schön aus. Geben Sie ihnen nun ein wenig Abstand, wählen Sie alle aus, richten Sie sie so und geben Sie ihnen dann eine Farbe, so etwas, das gut aussieht. Es ist sogar zu groß für meinen Geschmack. Ich werde sie noch kleiner machen. Ich finde, das sieht ziemlich anständig aus. Jetzt müssen wir diese nur nach oben ziehen und schließen, indem wir die Größe der Zeichenfläche verringern. Mal sehen, was wir erschaffen haben. Ich werde auf Play klicken. Das sieht ziemlich gut aus. Vielleicht muss der Titel ein wenig hochstehen. Wir haben diese große Google Map mit super schönen weichen Schatten, und wir haben unsere Icons und unsere Texte. Sieht wirklich gut aus. Ich werde das hier wegklicken. Ich werde auf Speichern klicken. Jetzt haben Sie gesehen, dass die erste Seite viel Zeit in Anspruch genommen hat, aber die anderen Seiten wurden ziemlich schnell erstellt, also stellen Sie sicher, dass Sie viel Mühe auf Ihre Homepage legen, denn wenn Ihre Homepage gut ist und Sie auf Ihren Text geachtet haben und zu Ihren Buttons , zu Ihren Farben, die anderen Seiten sind einfach zu erstellen. Jetzt gehen wir auf andere Dinge im Voraus. Zum Beispiel haben wir den Hintergrundunschärfe-Effekt nicht verwendet, wie Sie hier in diesem Design sehen können. Dies ist auch ein beliebter Effekt, um einige Dinge ein wenig mehr herauskommen zu lassen. Das ist, was ich Ihnen in der nächsten Episode beibringen und auch ein Design wie dieses erstellen möchte, das einen Ausschnitt mit einer Maske, eine andere Art von Knopf und auch hier diese Hintergrundfarbe Unschärfe Farbe hat . Das ist, was ich in den nächsten Episoden tun möchte. Wenn Sie diese Techniken kennen, sind Sie sicher, dass Sie fast jedes Design erstellen können, das Sie in Adobe XD möchten. Ich hoffe, Sie in der nächsten Episode zu sehen. 28. Eine Reisewebsite mit der background: Willkommen zurück. In diesem Video werden wir dieses Design erstellen, das Sie hier sehen können. Das ist ein bisschen anders als das Projekt, an dem wir bisher gearbeitet haben. Aber ich möchte Ihnen einige Effekte zeigen, die nicht Teil dieses Designs waren, aber mit denen Sie Ihr Design interessanter gestalten können. Zum Beispiel dieser Hintergrundunschärfe-Effekt, den Sie hier sehen können. Dies ist ein sehr moderner Effekt, Sie können einen hellen wie diesen machen, oder Sie können einen dunkleren erstellen, wie Sie hier sehen können. Oder wie ihr hier drüben sehen könnt, werden wir das im nächsten Video machen. Dieser Effekt ist wirklich schön, um Ihre Gegenstände ein wenig mehr erscheinen zu lassen, denn ohne diesen Hintergrund werden sie einfach in das Bild eingeblendet. Dies ist eine gute Möglichkeit, die Elemente vom Hintergrund zu trennen. Lasst uns einfach loslegen. Ich möchte, dass Sie zu Ihrem Finder gehen und sicherstellen , dass Sie die Abuget Schriftart installiert haben. Es gibt zwei Ordner über einem hier und jetzt werden wir uns auf die Reise-Seite konzentrieren. Lassen Sie uns einfach anfangen, wir gehen zu unserer Übungsdatei, und wir werden ein Duplikat unserer Seite erstellen. Lassen Sie uns diese Fußzeilen für jetzt löschen. Wir werden ein Duplikat machen und wollten alles löschen, was auf der Seite ist. Lassen Sie uns hier eine kleine Distanz schaffen. Löschen Sie alles, was sich auf der Seite befindet, so. Wir brauchen nicht, dass die Seite so lang ist. Weißt du was? Wir werden es so hoch wie der Aussichtshafen machen. Wir werden diese Nummer kopieren und sie hier über die Höhe einfügen. Auf diese Weise haben wir eine kleinere Seite. Ich werde nicht in jedes kleine Detail gehen, wie man diese Seite erstellt , weil Sie mittlerweile bereits wissen, wie man ein Menü erstellt, wie es ist, also werde ich bestimmte Dinge überspringen. Der Schatten zum Beispiel, Sie könnten einfach diesen Schatten von der Unterseite unseres Designs hier drüben kopieren, was wir bereits getan haben, weil wir diesen Schatten bereits erstellt haben. Sie wissen auch bereits, wie Sie die Symbole so einfügen, aber es gibt einige andere Symbole, die ich in diesem Design verwendet habe. Wenn Sie dieses Design neu erstellen und vielleicht in Ihr Portfolio einfügen möchten, ist das möglich, weil ich die Reise-Icons, die ich verwendet habe, enthalten habe. Hier sind die SVG-Akten, hier ist der Cocktail, das Bett und der Schnee. Lassen Sie mich diese Seite sehr schnell erstellen. Ich bin fast fertig mit dem Seitendesign, wie Sie hier sehen können. Es kommt dorthin, ich habe gerade das Menü von meiner eigenen Website eingefügt , es spielt keine Rolle. Aber es gibt eine Sache, die ich dir noch nicht gezeigt habe , und das ist, wie man eine Hamburger-Symbol wie diese kreiert. Ein Symbol wie dieses wird Hamburger genannt, weil es drei Schichten hat, und dieses Menü wird oft auf mobilen Geräten verwendet, um ein Menü zu öffnen und sieht wirklich sauber aus. Diese Website wieder, es ist nicht wirklich praktisch, aber es ist nur, um unsere Design-Fähigkeiten auszuüben. Lassen Sie uns einfach dieses Hamburger-Symbol in unserer Datei schnell erstellen. Was ich tun werde, ist zu vergrößern, greifen Sie Ihr Rechteck und erstellen Sie ein winziges Rechteck wie dieses. Dann um Ihre Ecken, stellen Sie sicher, dass es nicht zu groß ist, oder vielleicht ist das ein bisschen zu groß. Machen Sie es ein wenig kleiner, greifen Sie einfach Ihr Wiederholungsraster Werkzeug und stellen Sie sicher, dass Sie drei dieser kleinen Burger Dinge haben . Dort haben Sie Ihre Hamburger-Symbol. Vielleicht ist es ein bisschen zu gefälscht, spielen Sie einfach ein bisschen damit, bis Sie zufrieden sind. Jetzt habe ich alle Elemente vorbereitet und jetzt werden wir den Hintergrund Unschärfe-Effekt erstellen. Es ist eigentlich nicht so schwer, greifen Sie einfach Ihr Rechteck, erstellen Sie ein großes Rechteck wie dieses, und legen Sie es auf den Hintergrund, zuerst machen wir es eine andere Farbe wie diese, damit wir sehen können, was wir tun, Drücken Sie die Befehlstaste und die linken Klammern, um sie in den Hintergrund zu bringen. Wie Sie sehen können, brauche ich vielleicht ein wenig mehr Abstand zwischen den Spalten. Geben wir ihm ein wenig viel Platz wie diesen, und machen wir es für jetzt schwarz und schalten Sie die Grenze aus. Was Sie jetzt tun können, ist, die Hintergrundunschärfe einzuschalten. Wenn Sie dies tun, wird die Standard-Hintergrundunschärfe erstellt, die ziemlich schwer ist, wenn Sie sehen können. Sie können mit diesen Einstellungen hier herumspielen. Was ich in meinem Design getan habe, ist, dass ich die Hintergrundunschärfe verkleinere. Wenn Sie es auf Null setzen, können Sie einfach durchschauen und es ist nur eine weiße Ebene mit Deckkraft, aber wenn Sie Ihre Unschärfe erhöhen, können Sie den Hintergrund immer noch ein wenig sehen. Dann können Sie auch mit der Beleuchtung spielen, und natürlich mit der Transparenz der gesamten Schicht. Dies hängt natürlich von Ihrem Design ab und es hängt sogar vom tatsächlichen Hintergrund ab. Denn jetzt werde ich die Unschärfe ein wenig mit diesen wenigen erhöhen, ein wenig nach unten, ihnen ein wenig mehr Abstand geben und diese Blöcke so duplizieren und einen anderen für den letzten verwenden. Auch hier ist dies kein perfektes Design und ich habe nicht alle Elemente hier gemessen, aber es ist nur, um Ihnen zu zeigen, wie der Effekt funktioniert. Wie Sie sehen können, sieht mein endgültiges Design ein bisschen schöner aus. Es gibt einige abgerundete Ecken an den Rändern, ich werde Ihnen auch zeigen, wie das geht. Wenn Sie auf ein Rechteck wie dieses klicken, haben Sie hier die abgerundeten Ecken. Wir haben bereits im Schaltflächenbereich darüber gesprochen, aber Sie können auch eine Ecke booten, zum Beispiel nur auf der linken Seite nach oben. Wenn ich jetzt nur acht drücke, wirst du sehen, dass ich nur eine Ecke auf dieser Seite bekomme und nicht auf allen anderen Seiten. Auf diese Weise können Sie ein sehr schönes Rechteck mit abgerundeten Ecken erstellen. Sie können auch beide auswählen und es dann so tun. Da gehst du. Dies ist der Effekt und jetzt möchte ich Ihnen auch die dunkle Version zeigen, ich werde mein Design duplizieren, und klicken Sie dann auf das erste, halten Sie Shift gedrückt, halten Sie Shift gedrückt und klicken Sie auf die anderen beiden. Jetzt spielen wir mit der Beleuchtung hier drüben. Wie Sie sehen können, können Sie auch die Leichtigkeit verringern. Dann wird es irgendwann dunkler als der eigentliche Hintergrund. Wenn Sie es auf eine Pluszahl setzen, wird es leichter, und das ist der Effekt, den Sie heutzutage im modernen Design sehen können. Ich sehe die dunklere Version nicht oft, aber das ist auch ziemlich nett. Natürlich hängt das von Ihrem Hintergrund ab, Sie müssen mit den Einstellungen spielen, damit es schön aussieht, aber das sieht nicht so schlecht aus. Testen wir es einfach mit ein paar verschiedenen Hintergründen. Ich werde meine Hintergründe freischalten und sehen, wie das funktioniert. Gehen Sie zurück zu Ihrem Finder, und greifen Sie zum Beispiel ein anderes Bild und legen Sie es so auf den Hintergrund. Wie Sie sehen können, sieht die dunkle Version auf diesem Hintergrund sehr schön aus. Das sieht nicht auch so schlimm aus, aber ich mag die dunkle Version hier viel mehr. Lassen Sie uns mit einem helleren Hintergrund wie diesem testen. Wie Sie hier sehen können, ist das ein bisschen zu leicht. Vor diesem Hintergrund funktioniert die dunkle Version auch ein bisschen besser. Sie können mit den Hintergründen, die ich hier aufgenommen habe, versuchen : „Oh, ich mag diesen hier wirklich, das ist wirklich sauber.“ Das war der Hintergrundunschärfeeffekt, ich hoffe, das hat dir gefallen, das ist ein sehr moderner Effekt. In der nächsten Episode werden wir dieses Design erstellen, das ein wenig komplizierter ist, es hat eine Maske und es hat diesen Schieberegler, vertikalen Schieberegler-Effekt und eine seltsame Taste. Ich hoffe, Sie im nächsten Video zu sehen. 29. Eine book mit Masken: Willkommen zurück. In diesem Video werden wir dieses schöne Design erstellen. Unsere Hintergrundunschärfe ist wieder da und wir haben eine Maske, wir haben einen seltsamen Knopf, also lasst uns einfach mit diesem beginnen. Auch hier werde ich Ihnen nicht zeigen, wie Sie einen Hintergrund einfügen und wie Sie ein Menü erstellen, weil Sie das inzwischen wissen. Geben Sie mir eine Minute, um dieses Design neu zu erstellen. Ich bin fast fertig, diese Seite neu zu erstellen. Es gibt ein paar Dinge, die auf dieser Seite anders sind als die Explore Indonesia. Zunächst einmal ist die Hintergrundunschärfe viel intensiver und es gibt auch eine Hintergrundunschärfe in der Ecke, die nur eine kleine mit einem Suchsymbol ist. Wie ich das gemacht habe, ist, dass ich gerade das Rechteck mit der Unschärfe kopiert habe, ich löschte all das, machte es nur ein scharfes Rechteck. Ich habe es hier drüben in eine Ecke gesetzt und jetzt sieht das viel dunkler aus als dieses Rechteck und das ist wegen des Hintergrunds. Aber nur für Ihr Design, dann können Sie einfach die Leichtigkeit erhöhen, um es aussehen zu lassen , als ob es dem tatsächlichen Hintergrund entspricht. Dies ist ein Albtraum für Entwickler, aber das ist nur, um Ihnen zu zeigen, wie Sie es visuell vielleicht für Ihr Portfolio attraktiv machen können. Aber wenn Sie mit Entwicklern arbeiten, setzen Sie einfach nicht andere Werte auf alle Ihre Elemente. Sonst werden sie nicht sehr glücklich sein. Die Linien hier oben werden nur mit dem Linien-Werkzeug erstellt. Es ist weiß und dann 20 Prozent Deckkraft auf, so dass Sie auf diese Weise die schönen Linien bekommen, die Sie hier sehen können. Ich werde auch eine auf der linken Seite setzen und jetzt lassen Sie uns die Maskeneffekte erstellen. Sie können hier drüben einen 02 sehen, der abgeschnitten ist. Was wir tun werden, ist, dass wir unseren großen Titel duplizieren werden, was übrigens die Grendel-Schrift ist , die Sie auch in den Downloads finden können. Ich werde eine große 02 erstellen, ich werde es zu einem Punkttext machen, es größer machen, und dann werde ich es an die Zeile setzen. Lassen Sie uns einfach eine weitere Helpline hier hinzufügen. Das sieht gut aus, und jetzt will ich die beiden irgendwo hier abschneiden. Was ich tun werde, ist, dass ich ein neues Rechteck schnappen werde und dann werde ich eins erstellen und es auf den beiden überlappen, den Rand löschen und eine sehr seltsame andere Farbe auswählen , weil wir diese Maske nicht sehen werden. Jede Maske funktioniert so. Sie brauchen ein Element, um oben zu sein und dann, wenn Sie beide mit Shift auswählen und dann drücken Sie „Maske“, Ich benutze immer den Befehl „Shift M“, aber vielleicht können Sie es auch von hier aus tun. Ich denke, Sie können es von hier aus tun, Maske mit Form. Hier verwenden Sie die Form, um eine Maske zu erstellen , und das bedeutet, dass wir nur sehen, was in dieser roten Form ist. Wenn ich das jetzt mache, können Sie sehen, dass wir diesen Effekt haben und jetzt können wir die Deckkraft hier anwenden. Wenn Sie den Text ändern möchten, können Sie dies nicht durch Doppelklicken tun. Sie müssen auf die tatsächliche Textebene klicken. Dies ist die Maske, Sie können immer noch darauf klicken und ändern, wenn Sie möchten, und dies ist die Textebene. Wenn ich wollte, dass die Textebene eine andere Farbe hat, muss ich es hier tun. In meinem Design setze ich es auf, ich weiß nicht, 40 Prozent Deckkraft, und wie Sie jetzt sehen können, haben wir diese schöne Maske erstellt. Löschen Sie dieses Hilfe-Lineal für jetzt und das sieht ziemlich ordentlich aus. Ich denke, könnte in meinem tatsächlichen Design tun, ist noch größer also werde ich die Größe erhöhen, wie Sie sehen können. Stellen Sie sicher, dass es sich in Ihrer Maske befindet und wenn sie sich nicht in Ihrer Maske befindet, können Sie die Maske so ändern. Das sieht ziemlich schön aus und jetzt lassen Sie uns den Button erstellen, den Sie hier mit einem kleinen Pfeil und einigen diagonalen Ecken sehen können . Das ist auch nicht wirklich schwer zu tun. Lassen Sie uns einfach eine Schaltfläche erstellen schnell. Schnappen Sie sich Ihr Rechteck-Werkzeug, erstellen Sie eine Schaltfläche, wählen Sie eine Farbe, die Ihrem Design entspricht. Das sieht vorerst in Ordnung aus. Löschen Sie den Rahmen, fügen Sie Text in Ihre Ebene ein. Ich habe einen Pfeil erstellt, indem ich das Linienwerkzeug wie folgt verwende, eine weiße Linie mache und dann das Dreiecks-Werkzeug packe und ein kleines Dreieck wie dieses mache, deaktiviere den Rahmen und drehe ihn. Stellen Sie sicher, dass es nicht zu groß ist. Das sieht ziemlich cool aus. Nun, was Sie tun können, wenn Sie auf das Rechteck doppelklicken, können Sie den Ankerpunkt ändern. die gleiche Weise wie wir den Welleneffekt auf unserer Website geändert haben, können Sie diese Ecke und diese Ecke gleichzeitig greifen , indem Sie „Shift“ gedrückt halten und dann klicken, und jetzt können Sie einfach die Position dieser Ankerpunkte ändern. Auf diese Weise können Sie eine Schaltfläche erstellen, die ein wenig kreativer aussieht. Wenn Sie diese drei Elemente so gruppieren, klicken Sie auf den Text und klicken Sie auch auf den „Button“, und Sie klicken auf diesen, jetzt ist er in der Mitte ausgerichtet. Auch hier sieht es nicht genau gleich aus, aber das ist die Technik, die ich verwendet habe. Ich denke, auf meinem Design hier gibt es auch eine Menge Abstand zwischen den Buchstaben, wie Sie sehen können. Das werde ich vorerst auch sehr schnell machen. Erhöhen Sie die Abstandsinformationen der Schriftart, wenn Sie wirklich mit dem Design übereinstimmen möchten. Ich denke, mein Hintergrund ist etwas dunkler in meinem endgültigen Design. Lassen Sie uns den Text für jetzt ändern, shoppen Sie jetzt. Das sieht ziemlich cool aus. Das Letzte, was ich für diese Seite tun möchte ist, diesen Effekt zu erstellen, den Sie hier sehen können. Wie Sie das tun, ist, indem Sie die Maske verwenden und zwei Ebenen übereinander verwenden. Lassen Sie uns das einfach schnell erstellen. Was ich tun werde, ist, dass ich hineinzoomen und den Kreis greifen werde, einen kleinen Kreis wie diesen machen und ihn duplizieren werde. Dann für die obere, bewegen Sie es ein wenig mehr nach oben und machen Sie dann eine Kopie davon, indem Sie „Alt“ gedrückt halten, vergrößern Sie es durch Halten von „Alt“ und „Shift“, dann legen Sie den Rand an und füllen Sie ihn aus. Nun, zieh das auf Weißen, mach es viel größer, und jetzt siehst du, dass meine Punkte viel zu groß sind. Ich muss alles auswählen, lass uns alles ein bisschen kleiner machen. Wie Sie hier sehen können, gibt es einen weißen Umriss darüber und dann gibt es eine dunklere Version darunter. Was ich getan habe, ist, dass ich ein Duplikat von diesem gemacht habe, damit der weiße oben sein muss. Um sicherzustellen, dass es oben ist, klicken Sie einfach auf bringen Sie es nach vorne. Das wird die weiße bleiben. Dafür wollen wir graue Versionen, also werde ich das auf 50 Prozent Deckkraft setzen. Aber jetzt, wenn ich diesen überlege, werden wir den Hintergrundring nicht sehen, also gibt es zwei Möglichkeiten, das zu tun. Wir können auf dieser Maske eine Maske erstellen, die so aussieht, oder wir können eine Maske auf dieser eine erstellen und sie überlappen, so dass es dann so aussieht , als ob die weiße oben ist, aber in Wirklichkeit ist diese eine oben. Das werde ich tun, denn das ist ein bisschen einfacher. Schnappen Sie sich Ihr Rechteck für jetzt, erstellen Sie ein Rechteck und stellen Sie sicher, dass es in der richtigen Position ist, dann klicken Sie auf beide und klicken Sie auf „Objekt“ und dann auf „Maske“. Jetzt ist der graue oben, ich werde das weiße darunter bewegen, jetzt drücken Sie „Befehl“ und linke Klammer, um es nach hinten zu bringen. Jetzt ist es darunter, aber wir können das nicht sehen , weil wir die Deckkraft verwendet haben, weshalb. Wir können in diesem Fall keine Deckkraft verwenden. Wir müssen die Deckkraft erhöhen und die Farbe in etwas ändern , das ein wenig mehr wie der Hintergrund aussieht, machen Sie das ein wenig heller. Sie können es tatsächlich sehen, und jetzt, wenn Sie verkleinern, können Sie sehen, dass dies ziemlich cool aussieht. Das einzige, was hier anders ist, ist, dass es viel mehr Spielraum zwischen allen Punkten gibt und die Punkte hier unten eine Deckkraft haben, so etwas. So erstellen Sie diesen Effekt, sieht wirklich schön aus, dies kann für einen Schieberegler verwendet werden, der das Bild im Hintergrund ersetzt. Dieses Design funktioniert auch ziemlich gut mit verschiedenen Hintergründen. Nehmen wir zum Beispiel einen anderen Hintergrund und legen Sie ihn hier ein. Wie Sie sehen können, sieht es ziemlich gut aus. Vielleicht ist dies ein wenig zu intensiv, so verringern Sie die Deckkraft wie diese, setzen Sie es auf 50 oder auf 60 und jetzt haben Sie Ihr Design. Das einzige, was ich vergessen habe plus das Suchsymbol hier drüben, das ich auch enthalten habe. Wieder, wenn Sie diesen Artikel in Ihrem Portfolio verwenden möchten, mir egal, das ist okay. Es gibt das Suchsymbol. Das sieht ziemlich gut aus. Ich hoffe, Sie haben auch diese Episode gefallen. Dies war eine weitere nette Technik, ich hoffe, Sie in der nächsten Episode zu sehen , weil wir einige andere coole Effekte erstellen werden. 30. Responsives mobiles Design Teil 1: Willkommen zurück. In dieser Episode werden wir etwas wirklich Spaß machen. Wir werden ein ansprechendes mobiles Design erstellen. Das ist unser Board schon eine ganze Weile leer. Ich wollte dieses Design mit dem Inhalt auf dieser Seite füllen wird ein wirklich einfach sein, weil wir bereits einige Stile für unsere Titel vorbereitet. Die Webseite ist nicht so schwer, reaktionsschnell zu machen , weil sie nicht viele schwierige Spalten hat. Das sind also nur zwei Spalten. Es gibt drei Säulen hier, drei, drei , zwei, vier und nur eine große. Wenn Sie also sicherstellen möchten, dass Ihr mobiles Design einfach wird, dann wird es nicht schwer sein, wenn Sie eine Seite haben, die so aussieht. Was ich jetzt tun möchte, ist, dass ich die mobile Seite erweitern möchte, weil es wahrscheinlich länger sein wird als diese. Jetzt müssen wir ein paar Dinge freischalten, um es zu kopieren. Das erste, was ich tun möchte, ist den Hintergrund für jetzt freizuschalten, und ich werde es einfach so kopieren. Klicken Sie auf unseren mobilen Hintergrund und fügen Sie ihn dann ein. Dann legen Sie es einfach in unser Brett, vielleicht machen Sie es ein bisschen kleiner so. Jetzt auch für unsere Speisekarte, wollen wir ein Hamburger-Symbol verwenden, wie ich es dir in einer vorherigen Folge gezeigt habe. Ich werde nur die Logos kopieren. Doppelklicken Sie auf Ihr Logo, gehen Sie auf Mobilgeräte und fügen Sie es ein, und stellen Sie sicher, dass Ihre Raster mit 30 Pixeln von den Seiten eingerichtet sind. Manchmal benutze ich auch 20. Aber 30 Pixel sehen ein wenig schöner aus, denn je mehr Weißraum Sie haben, desto schöner sieht es aus, aber es ist nicht immer praktisch. Für meine tatsächlichen Websites verwende ich bei der Erstellung der Wechselrichter meiner Website 20 Pixel an den Seiten. Also lasst es uns vorerst auf 20 setzen. Was mache ich denn? Ich werde die Hamburger-Symbol zu greifen, die ich in einer anderen Episode erstellt habe , die wirklich schöne Ikone ist. Ich werde das kopieren, gehen Sie zu meinem mobilen Design und fügen Sie es hier drüben. Boom, ich habe es hier drüben. Das sieht ziemlich dope aus und es ist nicht perfekt ausgerichtet, weil ich immer noch die Wiederholungsraster habe. Ich brauche es hier nicht wirklich, also werde ich die Gruppierung der Wiederholungsraster aufheben. Ich könnte einfach eine Gruppe daraus machen und mich am Gitter ausrichten. Lassen Sie uns jetzt unsere Titel einfügen. Wie wir hier vorbereitet haben, wird der große Titel dieser sein. Ich werde nur alles kopieren, und ich mache ein Duplikat und füge es hier drüben ein, setze es so aus. Ich werde nur auf den Titel klicken. Wir haben das schon vorbereitet. Jetzt gehen wir einfach zum mobilen Titel. Ich mache es einfach weiß. Jetzt sind es 46 und dieser war 54. Jetzt müssen Sie nur sicherstellen, dass Ihr Textfeld das Raster nicht so erweitert. Stellen Sie einfach sicher, dass genug Platz für Ihre Texte ist. Das ist vielleicht ein bisschen zu viel in meiner eigentlichen Website. Es gibt nicht viele Texte im großen Titel. Aber Sie können hier sehen, ich habe Websites entworfen und bauen, die kein sehr langer Text ist. Wenn Sie eine große Schriftart wie diese verwenden, stellen Sie sicher, dass Ihr Titel nicht zu lang ist. Jetzt werde ich auch nur dieses hier benutzen. Wie Sie sehen können, sind es nur drei Zeilen. Das ist auch gut für eine mobile Ansicht. Lassen Sie uns einfach diesen Titel kopieren und einen echten Text verwenden. Das sieht ziemlich schön aus. Ich werde den Hintergrund nochmals protokollieren, das ein bisschen oben platzieren. Ich werde auch die Welle kopieren, die gesperrt ist. Ich werde es wieder entsperren mit Kommentar L, und klicken Sie dann auf mein Handy, oder Brett und fügen Sie es ein. Stellen Sie sicher, dass Sie die Welle noch sehen können, vielleicht machen Sie es ein wenig intensiver auf Handy. So können Sie tatsächlich einen Teil der Welle sehen. Mach es nicht zu intensiv. Sonst wird es billig aussehen. Also so etwas, das in Ordnung sein sollte. Nun der Hintergrund, wir wollen auch den gleichen Füllhintergrund wie wir auf diesem haben. Für die Füllung werden wir einfach den F5, F5, F7 Hintergrund auswählen. Nun, das sieht viel besser aus. Mal sehen, wie schnell wir dieses mobile Design erstellen können. Für diese Box, was ich tun werde, ist, dass ich die Box so packen und sicherstellen, dass es in der rechten Seite unseres Brettes ist. Stellen Sie sicher, dass wir noch ein wenig von der Welle sehen können, denn das wäre schön. Ich werde nur meine ersten beiden Symbole wie diese nehmen, kopieren Sie sie, gehen Sie zu meinem Luftbrett und fügen Sie es dann ein. Ich denke, dass so etwas, das gut sein sollte. Natürlich ist es auf einem Mobiltelefon schwer, vier Spalten zu haben. Manchmal müssen Sie nur Ihr Design ein wenig brechen um es auf die Mobiltelefone passen, so etwas, das gut genug ist. Gruppieren Sie es und jetzt ist es nur eine Gruppe. Nun für diesen Teil, vielleicht möchte ich hier nicht vier Bilder verwenden, weil das vielleicht ein bisschen zu viel sein wird. Was ich tun werde, ist, dass ich all das zuerst greifen werde, ich werde das in mein mobiles Design so verschieben. Der zweite Titel, wir brauchen den zweiten mobilen Titel so. Machen Sie es ein bisschen kleiner. Stellen Sie sicher, dass es in das Gitter passt. Alle Ihre Textebenen, und richten Sie sie richtig aus. Jetzt vier Bilder, vielleicht sind wir ein bisschen zu viel. Natürlich können Sie so etwas tun. Gruppieren Sie es, kopieren Sie es, fügen Sie es hier und machen Sie einfach ein großes Bild daraus, wenn Sie das mögen. Eigentlich sieht das viel besser aus. Denn auf meiner Website habe ich zwei Bilder ausgewählt und übereinander gelegt, aber ich denke, das sieht eigentlich ziemlich gut aus. Aber was ich auf meiner Website gemacht habe, habe ich gerade zwei Bilder ausgewählt. Zum Beispiel diese beiden. Also habe ich Kommentare angeklickt und ich kopiere diese Bilder und fügte sie hier drüben ein. Sie können sie in voller Größe sehen. Ich denke, ich werde sie in der Mitte ausrichten, so etwas. Auch hier möchten Sie vielleicht nicht alles auf einem mobilen Design zeigen. Manchmal müssen Sie nur ein paar Teile überspringen und löschen. Auf echten Websites passiert das oft, weil es auf einem Mobiltelefon sonst so riesig werden würde. Tun Sie so etwas oder die andere Lösung, die ich entworfen habe. Moment werde ich diese Lösung verwenden, weil ich sie sehr mag. Nun für diesen Teil, das ist wirklich schön über die Wiederholgrate denn jetzt können Sie sehen, wie schön wiederholen Grillplatte ist. Zuerst werde ich meinen Titel kopieren. Stellen Sie sicher, dass Sie Ihren Titel kopieren, geben Sie ihm ein wenig Abstand, und stellen Sie sicher, dass er passt, ist ein wirklich langer. Ich weiß nicht, wie viel Text ist, vielleicht zwei Zeilen, das sollte gut sein. Nun, wenn wir die Wiederholungen Griddle kopieren und auf unser Handy gehen und es einfügen, können wir hier nur eine Box setzen. Zuallererst müssen wir die Größe jedes Rechtecks verringern. Lassen Sie uns das zuerst tun, verringern Sie es, halten Sie die Verschiebung. Jetzt wird es wirklich nett sein. Denn gerade jetzt, wenn wir die Seite des Wiederholungsrasters verringern, wird es sich an alle Bilder erinnern, die sich auf der Innenseite befinden , und es wird die gleichen Bilder zeigen. Also mussten Sie die Bilder nicht so neu anordnen. Das einzige, was Sie neu anordnen müssen, ist der Rand zwischen den tatsächlichen Rechtecken. Denn für Ihren Kundenbereich weiß ich nicht, ob Sie bereits ein paar Clients auf Mobilgeräten überspringen möchten. Deshalb habe ich es so gestaltet. Alles klar, der Teil sieht ziemlich nett aus. Stellen Sie sicher, dass zwischen den Spalten genügend Leerraum vorhanden ist. Wieder für Ihren Titel wählen Sie die mobile. Nochmals, jetzt mache ich es ziemlich schnell, weil ich nicht viel Zeit damit verbringen will , alles zu messen. Aber bei einem echten Projekt werde ich wirklich jeden Abstand zwischen allen Titeln messen, um sicherzustellen, dass er auf der gesamten Website sehr konsistent ist, weil das wichtig ist. Lassen Sie uns einfach dieses mobile Design im nächsten Video beenden. 31. Responsives mobiles Design Teil 2: Ok, willkommen zurück. Wir werden diese Seite mit einem mobilen Design fertig stellen also stellen Sie sicher, dass Sie Ihre Hintergrundebene wie folgt kopieren. Dieser Teil wird wirklich schnell sperren Sie es und sperren Sie es für Web. Greifen Sie Ihren Titel so, machen Sie eine Kopie. Stellen Sie sicher, dass es die richtige Größe wie diese hat. Machen Sie es breit. Richten Sie Ihre Texte aus, ändern Sie die Größe Ihrer Textfelder, und greifen Sie jetzt eines davon, kopieren Sie sie wie folgt. Klicken Sie auf den Rahmen und vergewissern Sie sich, dass Sie die Größe der tatsächlichen inneren Spalte so verringern . Wenn Sie nun sicherstellen möchten, dass Sie genau die gleichen Maße in dieser Spalte haben, müssen Sie diese kopieren und dann den Text ändern. Manchmal mache ich das, weil ich sicherstellen möchte, dass die Größe der Boxen gleich ist. nun die Größe Ihres Hintergrunds und jetzt sind wir für diesen Teil fertig. Für den Abschnitt „Testimonial“ werde ich Ihnen zeigen, wie Sie diesen Teil machen, weil Sie die Titel mittlerweile kennen. Wenn Sie eines dieser Testimonials greifen, wird es zu groß sein, also stellen Sie sicher, dass der linke Teil auf Ihrem Raster ausgerichtet ist, und verringern Sie dann die Größe der Hintergrundebene. Stellen Sie sicher, dass Sie nicht auf das Ganze klicken, aber Sie kommen und klicken Sie nur auf die Hintergrundebene, verringern Sie diese, und klicken Sie dann auch auf Ihre Textebene und geben Sie ihr auch ein wenig viel Platz. Auf diese Weise sieht es fast gleich aus und jetzt können Sie Ihre Wiederholungs-Grillplatte verwenden und die anderen Kommentare im Inneren von hier haben. Nun für den letzten Teil, wie sollten Sie diesen Teil hier lösen? Auf meiner Website habe ich gerade diesen ganzen Teil übersprungen. Meine gesamte mobile Website sieht einfach ohne das aus, weil ich wirklich nicht wusste, wie ich es lösen soll. Natürlich können Sie ein wirklich kleines machen oder nur eines dieser Bilder zeigen, aber ich werde Ihnen zeigen, wie es auf meiner Website aussieht. Was ich tat, ist, dass ich die Welle packte und den Hintergrund packte, den ich kopiert habe und ihn eingefügt habe. Ich kopierte alle Textebenen wie diese, fügte sie ein, passte sie an die mobile Größe an, vielleicht änderte ich die Welle ein wenig nach oben und das ist eigentlich alles, was ich für den Abwärtsbereich getan habe. Du willst es manchmal nicht zu schwer für dich selbst machen. Jetzt für die Fußzeile, da dies eine Komponente ist, müssen wir die Komponente für die Fußzeile ändern. Ich möchte, dass Sie eine Kopie der Komponenten erstellen, mit der rechten Maustaste klicken und dann die Gruppierung der Komponenten aufheben. Das ist immer noch unser Hauptbestandteil, den wir hier sehen können. Aber jetzt müssen wir eine Komponente für unsere mobile Fußzeile erstellen. Wir werden nur diese Fußzeile ändern, sie ganz schnell gruppieren. Gehen Sie in Ihr Kunstboard, heben Sie die Gruppierung wieder auf, und stellen Sie dann sicher, dass es zu Ihrem mobilen Design passt. Für Fußzeilen, was Sie immer tun möchten, ist es, Ihre Elemente auszurichten, stellen Sie sicher, dass sie sich alle innerhalb Ihrer Fußzeile befinden. Es ist nicht immer links ausgerichtet, aber für die meisten Fußzeilen ist es links ausgerichtet, weil Sie viele Texte haben. Dies ist eine wirklich einfache Fußzeile. Vielleicht können Sie auch einen Mittelentwurf für diese Fußzeile erstellen. Aber in den meisten Fußzeilen möchten Sie nur eine linksbündige Fußzeile. Das sieht gut genug aus. Dies ist, wie Sie es für große Websites tun möchten. Aber für jetzt werde ich nur das Center Design verwenden , weil das für diese Website ein bisschen schöner aussieht. Nun greifen Sie alles, gehen Sie zu Komponenten, drücken Sie das Plus, und benennen Sie es dann in Fußzeile m um, weil das die Fußzeile für unser Handy ist. Jetzt können wir einfach die Fußzeilenkomponenten von mobile auf allen Seiten einfügen. Jetzt ist das letzte, was wir tun müssen, die Größe des Kunstboards zu verringern und klicken Sie auf unser Kunstboard und klicken Sie auf Spiel und lassen Sie uns sehen, was wir bisher geschaffen haben. Das mobile Menü sieht ein bisschen zu groß für meinen Geschmack aus, aber wie Sie sehen können, sieht das ziemlich schön aus. Alles sieht mobil optimiert aus. Ich muss arbeiten, ich habe den Titel hier drüben, ich muss an den Rändern arbeiten, aber Sie können sehen, wie schnell es ist, ein mobiles Design zu erstellen, wenn Sie alles für den Desktop vorbereitet haben. Nehmen wir an, jetzt sind Sie fertig mit Ihrem Design und möchten Ihr Design anderen Menschen zeigen. Das ist, was ich in den kommenden Videos zeigen möchte weil Sie einige Dinge wissen müssen, um Ihr Design zu teilen, einen Prototyp zu erstellen und es an Ihren Kunden zu senden, oder vielleicht sogar in Ihrem eigenen Portfolio hochladen. Ich werde Sie im nächsten Video sehen. 32. Zeichenfläche und Artboard: Hallo und willkommen zurück. In dieser Folge werde ich Ihnen zeigen, wie Sie Ihre Entwürfe exportieren können. Vielleicht möchten Sie Ihre Entwürfe mit Ihrem Kunden teilen oder sie in ein anderes Prototyping-Tool hochladen oder einen Export machen , um diese Designs in Ihr Portfolio zu integrieren. Der einfachste Weg, dies zu tun, ist, indem Sie einfach Ihre Kunsttafeln auswählen und sie dann exportieren. Sie können auch die Markierung für Export-KE verwenden. Aber ich benutze das nicht wirklich, weil Sie oft an einer Seite arbeiten und Sie diese Seite an einen Client senden müssen oder Sie drei oder vier Bildschirme exportieren möchten und selbst wenn Sie 10 Bildschirme exportieren möchten, ist es nicht wirklich schwer auf sie zu klicken, also verwende ich nicht wirklich die Markierung für den Export Funktion. Ich klicke einfach auf die Elemente, die ich möchte und exportiere sie. Das ist, was ich Ihnen zeigen möchte und wenn Sie wirklich ein Video auf Mark für den Export wollen, dann sagen Sie es mir, aber das ist nur der Fall, wenn Sie in wirklich großen Dateien arbeiten. Ich denke, dass die meisten Leute, die diesen Kurs ansehen, noch keine großen Projekte haben werden. Dass es nur besser ist, auf die Dinge zu klicken, die Sie einen Export wollen, ist es viel einfacher. Was Sie wissen müssen, wenn Sie Dinge exportieren möchten, ist, dass die Namen Ihrer Kunsttafeln und der Ebenen ebenfalls exportiert werden. Das ist ziemlich schön, weil man manchmal eine Situation wie diese hat, in der man diese vier Bilder separat exportieren möchte. Wie Sie das tun, ist, indem Sie alle so auswählen, so dass Sie kommentieren klicken Sie auf den ersten, weil dies innerhalb einer Gruppe ist, Sie kommentieren Verschiebungen klicken Sie auf die zweite. Jetzt haben Sie vier Elemente ausgewählt, einschließlich des Schattens und um alles organisiert zu halten, können Sie zu Ihrem Ebenenfenster gehen und hier können Sie die Benennung sehen. Dies hat bereits einen schönen Namen, also wenn ich diese in JPEG oder PNG exportieren werde, werden Sie diese Namen sehen. Lasst uns das vorerst versuchen. Ich gehe zur Datei und ich klicke auf Export und dann auf ausgewählte klicken, weil ich diese vier Bilder ausgewählt habe. Ich werde einen neuen Ordner erstellen und diesen Export für jetzt nennen, genau wie ich es testet. Hier haben Sie also einige Optionen, um Ihre Entwürfe zu exportieren. Im Moment exportiere ich Bilder, die Schatten haben und das bedeutet Transparenz. Deshalb brauchen wir PNG, denn PNG ist das einzige Pixelformat, das Transparenz mit JPEG verarbeiten kann , erhalten Sie einen weißen Hintergrund. Wenn Sie zum Beispiel Transparenz verwenden oder das Symbol ausnutzen und sie in Pixel exportieren möchten, benötigen Sie PNG, sonst erhalten Sie einen weißen Hintergrund. Lassen Sie uns PNG für jetzt und dann wählen Sie ein paar Optionen genau hier. Die meiste Zeit verwende ich nur Design, das ist nur 1x oder Web und das ist 1x und 2x und das bedeutet, wie groß das Bild wird in Ihrem Board sein, dieses Bild kann ein 300 mal 400 Pixel breit und wenn Sie Wählen Sie diese Option, dann wird ein Bild mit einer Breite von 300 und 400 Pixel, aber auch eine Version, die 600 mal 800 ist, exportiert. Dies kann schön sein, wenn Sie echte große Bilder importiert haben und die Auflösung beibehalten möchten, oder Sie wollen nur wissen, wie scharf Ihr Export sein wird. Klicken Sie einfach auf dieses und jetzt wird es acht Exporte erstellen, weil wir vier Bilder ausgewählt haben. Lassen Sie uns auf Export für jetzt klicken, wie wirklich schnell, gehen Sie zu Ihrem Finder, gehen Sie zu den Exporten und wie Sie sehen können, hat es die gleichen Layer-Namen und eine 2x Versionen haben diese @2x am Ende. Wenn Sie dies öffnen, können Sie sehen, dass es viel Leerraum gibt, aber das ist für den Schatten und diese Bilder sind überhaupt nicht scharf weil ich auf scharfe Bilder importiert habe und jetzt exportieren wir es wieder. Das ist nicht wirklich scharf, aber wie Sie sehen können, ist die normale Version weniger scharf als die 2x-Version und das ist eine schreckliche Menge, aber ich möchte Ihnen nur zeigen, wie diese Funktion funktioniert. Dies ist die normale Version und dies ist die schärfere Version. Lassen Sie uns das jetzt auch für Kunstboards tun, also lassen Sie uns diese Art Boards in Home final v1 und dann Home final Mobile v1 umbenennen . Klicken Sie also auf das erste Art-Board, das Raster spielt keine Rolle, dass es immer noch an ist und wird nicht das Raster exportieren und auch Shift klicken Sie auf die Grafik Board Ihres Desktops. Jetzt gehen Sie wieder zur Datei, gehen Sie zu exportieren, wählen Sie es aus und jetzt wollen wir auch die 1x und 2x testen und jetzt werde ich JPEG auswählen , weil ein Vorteil mit JPEG ist, dass Sie eine Komprimierung auf Ihre Bilder anwenden können. Zum Beispiel können Sie es bei 60 Prozent Qualität setzen, es wird immer noch super scharf sein. Wenn Sie jedoch Elemente für Ihre Kunden freigeben, möchten Sie keine JPEG senden, die etwa 10 Megabyte sind. Sie möchten ein wenig Kompression hinzufügen. Ich zeige Ihnen, wenn Sie es als bei 60 Prozent Kapazität setzen, wird es immer noch super scharf sein und wir werden 1x und 2x Sache sehen. Wir werden auf Export klicken und dann gehen wir zum Finder zu gehen. Wie Sie jetzt sehen können, wurden die Bilder exportiert. Es gibt eine mobile Version, die 260 Kilobyte ist. Die 2-fache Version ist fast 700. Lassen Sie uns einfach die Version eins für jetzt öffnen und ich werde zoomen und sehen, ob es immer noch scharf genug ist. Wie Sie sehen können, ist dies immer noch ziemlich scharf für eine 60-prozentige Kompression bei der 1x es ist nicht super scharf. Lassen Sie uns einfach auf die 2x klicken für jetzt. Ich schicke oft die 2x-Version an meinen Client. Wie Sie für ein Mobiltelefon sehen können, ist dies mehr als scharf genug, um mit Ihren Kunden zu teilen oder sogar in Ihr Portfolio zu setzen. Lassen Sie uns auch die 2x Version der Homepage überprüfen. Lassen Sie uns ein wenig vergrößern und wie Sie sehen können, ist dies ziemlich scharf für ein Bild, das nur 1,5 MB und fast 10.000 Pixel hoch ist . Dekompression in Xd ist also ziemlich gut. Das letzte, was ich Ihnen zeigen möchte, ist, wie man Vektor-Symbol exportiert. Zum Beispiel haben wir einen Knopf entworfen. Zum Beispiel haben wir diesen Knopf oder diesen kleinen Pfeil entworfen. Wenn wir den Pfeil exportieren möchten, haben wir ein Problem, da dies eine Zeile ist und aus irgendeinem Grund, wenn Sie ihn exportieren, es nicht die Linien umreißt. Sie müssen ein Rechteck verwenden, wenn Sie ein Vektorsymbol erstellen möchten. Das ist nicht wirklich nett und vielleicht mache ich es falsch, aber so mache ich es. Dies sind zwei separate Elemente Um sie als ein Symbol zu exportieren, müssen Sie sie verschieben,beide auswählen und dann gruppieren,undrufen Sie einfach diesen Pfeil scharf lang auf beide auswählen und dann gruppieren, und . Zum Beispiel habe ich die Gruppe ausgewählt. Dies ist wichtig, um eine Gruppe auszuwählen und nun zu Datei und Export zu gehen. Wenn Sie beide Layer wie diese auswählen und zu ausgewählten Dateiexporten wechseln, wird die Linie separat und das Dreieck exportiert. Deshalb müssen Sie auf die Gruppe klicken und dann zur Datei gehen, zum Export gehen und sie dann auswählen und jetzt müssen Sie SVG verwenden. SVG ist das Format, das auf Websites verwendet wird , und Sie können dieses auch innerhalb von Adobe XD importieren, wie Sie es mit unseren sozialen Symbolen gesehen haben. Dies ist eine wirklich schöne Formate, um Vektorsymbole zu exportieren. Wenn Sie nun das SVG auswählen, weil es sich um ein Vektorsymbol handelt und Sie es exportieren, haben Sie jetzt eine Vektordatei, die Sie in jeder anderen Adobe XD-Datei verwenden können, die Sie möchten. Wie Sie hier sehen können, wenn Sie es skalieren, sieht es immer noch ziemlich gut aus und es ist unbegrenzt scharf. Mein Rat wäre, wenn Sie Symbole mit einem Illustrator entwerfen, da Adobe XD kein perfektes Werkzeug ist, um Ihre Symbole zu entwerfen. Aber manchmal kann man ein kleines Symbol wie dieses mit einem Rechteck und einem Dreieck entwerfen und es in anderen Projekten wiederverwenden. Das war alles, was ich für die Exportfunktion zeigen wollte. Wir sehen uns im nächsten Video. 33. Das klebrige Menü: Willkommen zurück. In dieser Episode werden wir den Sticky-Header-Effekt erstellen. In allen Designs, die wir in diesem Kurs erstellt haben, haben wir den transparenten Header-Effekt verwendet. Das sieht sehr modern aus, aber Sie brauchen ein schönes Hintergrundbild. Für viele Projekte ist dies ein Blick, der zu modern ist und die Kunden mehr nach so etwas suchen, nur einen sehr sauberen, einfachen Header auf dieser Website. Es sieht nicht so hübsch aus, weil der Hintergrund hier nicht weiß ist. Aber auf den meisten Websites werden Sie eine Kopfzeile haben, die so aussieht oder ein Menü mit einem Hintergrund. Sie haben ein schwarzes Logo oder ein dunkleres Logo, und Sie haben fast schwarze Menüpunkte. So werden die meisten Ihrer Menüs auf der Website aussehen, die Sie entwerfen werden. Was Sie damit tun können, ist, dass Sie in das Prototyping-Tool gehen können , weil Sie in Situationen laufen, in denen Sie Ihre Website einem Kunden präsentieren müssen und wie es aussehen wird, wenn Sie scrollen. Denn auf einer Website wie dieser, wenn Sie auf ein tatsächliches Kunstboard klicken, klicken Sie auf Play und Sie scrollen, dann bleibt das Menü einfach oben. Bei vielen Websites wird das Menü an der Spitze bleiben und das ist, was Sie tun können. Wir sind im Prototyping-Modus, aber das ist sehr schwer mit dem transparenten Header zu tun, weil es dann auf den anderen Elementen oder darunter sein wird, funktioniert nicht wirklich. Was Sie tun müssen, ist ein Menü zu erstellen , das so aussieht, wenn Sie diese Effekte tun möchten. Jetzt gehen wir in den Prototyping-Modus. Der Prototyping-Modus ist, wo Sie einen gefälschten Prototyp erstellen können, und dann können Sie eine Erfahrung für das tatsächliche Produkt, das Endprodukt, wenn es codiert wird, bekommen . Was Sie jetzt tun können, ändert sich nichts, aber Sie können bestimmte Elemente miteinander verknüpfen. Das einzige, was ich in dieser Episode tun möchte, ist zeigen Sie die feste Position beim Scrollen Effekt. Dies ist im Konstruktionselement nicht möglich. Suchen Sie also nicht nach dieser Option, wenn Sie sich im Entwurfsmodus befinden. Sie müssen in den Prototyping-Modus wechseln und dann auf diese klicken, eine feste Position beim Scrollen. Behoben bedeutet, dass es in dieser Position bleibt. Nun, wenn wir auf den Namen des Kunstbretts klicken und auf Play klicken, und wir werden mit dem Scrollen beginnen. Sie werden beginnen zu sehen, dass unser Menü an Ort und Stelle bleibt, aber jetzt können Sie sehen, dass es unter den meisten der Elemente ist, und das ist nicht, was wir wollen, natürlich. Also dann müssen wir auf unseren Hintergrund klicken und ihn nach vorne bringen, oder drücken Sie einfach Shift-Befehl und rechte Klammer. Wenn wir nun wieder auf Play klicken, können Sie sehen, dass das Menü auf der ganzen Website oben bleibt. Sie können sogar einen Schatten hinzufügen, wenn Sie möchten. Ein bisschen Schatten hier drüben, denn oft wirst du hier drüben einen weißen Hintergrund haben, werde ich es dir zeigen. Wenn Ihr Hintergrund Ihrer Website weiß ist, so. Nehmen wir an, das ist auch weiß. Sie haben eine Website, die so aussieht, weil die meisten Websites einen weißen Hintergrund haben und Sie den Scroll-Effekt ausführen und Sie auch einen weißen Header haben. Sieht nicht so perfekt aus. So können Sie zwei Dinge tun. Sie können eine sehr kleine subtile Linien verwenden, so etwas. Wählen Sie einfach das Linienwerkzeug aus, erstellen Sie eine Linie, die den gesamten Bildschirm von links nach rechts ausfüllt, und platzieren Sie es einfach am unteren Rand Ihres Menüs und stellen Sie sicher, dass es sich innerhalb der Gruppe befindet. Befehlen Sie x, um sicherzustellen, dass Sie es haben. Gehen Sie dann innerhalb der Gruppe, so dass Sie doppelklicken können. Sie können sehen, dass ich jetzt in der Gruppe bin. Der Header wird tatsächlich Gruppe 305 genannt. Nennen wir es Menü für jetzt. Also sehen wir, was wir tun. Gehen Sie in die Gruppe, wir sind jetzt innerhalb dieses Ordners und drücken Sie dann Befehl v. Dann platzieren Sie Ihre Zeile so und setzen Sie sie dann auf eine niedrigere Deckkraft, zum Beispiel etwa so. Wenn wir dann auf Play klicken, werden Sie sehen, dass es einen kleinen Unterschied zwischen diesem Abschnitt gibt. Aber ich denke, das ist schon zu intensiv, also lassen Sie es uns vorerst auf 15 Prozent setzen. Klicken Sie auf Play, und das sieht schon ein bisschen schöner aus. Was Sie auch tun können, ist einen Schatten zu verwenden. Nehmen wir an, Sie mögen diese Zeileneffekte nicht. Was Sie tun können, ist zu kommen und klicken Sie auf Ihren Hintergrund. Also auf dem weißen Hintergrundrechteck, fügt dann einen sehr kleinen Schatten hinzu. Vielleicht ist das schon zu intensiv. Lassen Sie uns das vorerst testen. - Ja. Nun, das ist ein bisschen zu intensiv, also weißt du, wie es funktioniert. Sie können die Intensität des Schattens verringern und dann auf Wiedergabe klicken. Das wird auch eine schöne Effekte für Ihr Menü erstellen. Nun, in der nächsten Folge, möchte ich Ihnen zeigen, wie Sie diese Seiten tatsächlich verlinken können. Wenn Sie auf diese Elemente klicken, werden Sie tatsächlich zu diesen Seiten gehen. Dann fängt es wirklich an, wie eine echte Website aussehen. 34. Einen Prototyp für Web und Handy erstellen: Willkommen zurück in diesem Video werden wir alle Seiten miteinander verknüpfen. Wir sind hier im Entwurfsmodus. Ich habe alle Header geändert und ich habe dafür gesorgt, dass die Unterstreichung auf der guten Seite ist. Dies ist die Portfolioseite, Info Seite und die Kontaktseite. Was Sie tun möchten, ist in Ihren Prototyping-Modus zu gehen, klicken Sie hier weg, weil wir das jetzt nicht brauchen, zoomen Sie hinein und beginnen Sie dann mit dem Zoomen in Ihrem Menü. Du kannst zwei Dinge tun. Sie können auf das eigentliche Element doppelklicken, das Sie verknüpfen möchten, und dann einfach klicken und auf die eigentliche Zeichenfläche ziehen, die Sie verknüpfen möchten. Dann haben Sie einige Einstellungen hier drüben. Sie möchten darauf tippen, denn wenn Sie darauf klicken, bedeutet das, dass ich tippe, es wird ein Übergang zu einem anderen Bildschirm sein. Sie können sogar die Bildlaufposition beibehalten, da Sie manchmal von einem Abschnitt hier auf eine andere Seite gehen und Sie auch auf der gleichen Höhe bleiben möchten. Wenn Sie beispielsweise eine Schaltfläche erstellen und auf diese Schaltfläche klicken, ändert sich die Farbe der Schaltfläche. Dann wollen Sie nicht auf eine ganze andere Seite gehen, Sie wollen in dieser Position bleiben. Sie wechseln tatsächlich Bildschirme, aber Sie müssen es sich anfühlen, als würden Sie nicht die Bildschirme wechseln. Aus diesem Grund würden Sie diese Funktion verwenden. Wir gehen auf diese Seite. Ich habe meine Seiten nicht richtig benannt. Der Auflösungseffekt bedeutet, dass es eingeblendet wird und Ihre Fade-Einstellungen sind hier drüben Erleichtern Sie sich also und es dauert 0,3 Sekunden. Lasst uns das vorerst testen. Wir gehen zum Finale zu gehen, klicken Sie auf Play. Wenn wir auf Portfolio klicken, werden wir sehen, was passiert, dies war ein Fade wir können nicht zurück, weil wir auch von der Portfolio-Seite auf Ihre Homepage verlinken müssen . Es gibt auch im Übergang auf der Registerkarte auflösen. Mal sehen, was wir bisher erschaffen haben. Klicken Sie auf Play Portfolio, zu Hause. Das ist schön. Das funktioniert und sie blättern beide. Sie müssen auch diese anderen Seiten verbinden. Manchmal wird es ein Chaos, weil Sie alle Seiten verkleinern und verbinden müssen und es wird wirklich klein sein, sonst möchte ich Ihnen einen Trick zeigen. Was ich tun würde, wenn Sie alle Seiten miteinander verknüpfen wollen, nennen Sie zuerst Ihre Artikel. Zum Beispiel, endgültige v2-home. Ich habe alle meine Seiten bis zum endgültigen v2 benannt. Wenn ich zum Beispiel auf die über Seite gehe, und ich auf diesen Artikel klicke, kann ich meine Zeichenflächen von hier aus auswählen und dann kann ich zu gehen, dies muss endgültig V2 über sein, und dann wird es automatisch diesen Link erstellen, so Sie müssen sich nicht mit dem Ziehen herumschleichen. Aber für jetzt möchte ich nicht die Wirkung auflösen, weil auf einer Website Seiten nicht auflösen sie einfach klicken und es ist nur sofort. Wenn Sie einfach auf keine klicken, und wir werden auch tun, dass für diese Animationen hier drüben. Klicken Sie auf diese beiden und stellen Sie sie auf unserer Homepage hier. Gehen Sie also zurück zu Ihrer Portfolio-Seite, klicken Sie auch auf diese, legen Sie sie auf keine. Mal sehen, was wir erstellt haben, so weit ich werde auf meiner Homepage klicken, klicken Sie auf Play. Dies ist, wie es ohne Fade-Animation funktionieren sollte, da die meisten Websites nicht verblassen. Die über Seite, wieder funktioniert es auch. Alles, was Sie tun müssen, ist, alle diese Menüseiten miteinander zu verknüpfen. Klicken Sie darauf, wählen Sie Ihre Zeichenfläche, die Sie wollen, v2 und es wird sich an die gleichen Einstellungen erinnern. Portfolio, klicken Sie darauf, klicken Sie auf Portfolio, Kontakt. Dies ist eine wirklich einfache Möglichkeit, Ihre Website so zu verlinken. Es sieht ziemlich realistisch aus. Wenn Sie einem Kunden präsentieren, sagen Sie ihm nicht, dass dies real ist, weil das alles gefälscht ist. Natürlich können Sie dies nicht in HTML exportieren. Na ja, zumindest noch nicht. Vielleicht wird das in Zukunft gehen, dass Sie bestimmte Elemente in echte Website-Elemente exportieren können , aber im Moment ist dies nur für Ihre Präsentation. Wenn Sie alle Ihre Elemente verknüpft haben, werden Sie viele dieser verknüpften Elemente haben, wie ich bereits jetzt erstelle. Ich habe alle verknüpften Elemente fertig gestellt. Egal, wo ich mich auf der Seite befinde, ich kann einfach auf alle diese Seiten klicken. Das ist ziemlich cool für Ihre Präsentation. Es gibt noch eine nette Funktion, die ich Ihnen zeigen möchte , dass Sie verwenden können, um Ihre Arbeit im nächsten Video zu präsentieren. 35. Ein Video und teilbaren Link erstellen: Alles klar Jungs, wir sind fast fertig. Zwei Dinge , die ich Ihnen zeigen möchte, zur Präsentation der Arbeit, zuerst ist die mobile Funktion in Adobe XD. Sie können die App Adobe XD auf Ihr Smartphone herunterladen. Wenn Sie Ihr USB-Kabel an Ihr Telefon anschließen, können Sie auf dieses Symbol hier klicken, verbinden Sie iOS- oder Android-Geräte mit XD über USB, um Ihre Designs oder Prototypen in Echtzeit vorschauen.Dies ist wirklich schön, weil manchmal, wenn Sie 're auf einem Bildschirm zu entwerfen, Dinge auf dem Bildschirm gut genug aussehen. Aber in Wirklichkeit haben Sie es zu klein gestaltet oder die Taste ist einfach zu klein für Ihre Finger oder die Entfernung ist zu groß oder zu klein, das ist ein Tipp, den ich Ihnen geben möchte, aber Sie können den Adobe XD von der App auf im Play Store und verbinden Sie Ihr Telefon über USB. Probieren Sie es einfach aus, wenn Sie entwerfen und überprüfen Sie, ob Ihr Design auf Ihrem eigenen Handy gut aussieht. Vielleicht versuchen Sie ein paar verschiedene Telefone. Das ist nur etwas, das ich dir auch zeigen wollte. Das letzte Feature, das ich Ihnen zeigen möchte, um Ihr Design zu teilen ist die Video-Funktion all mein Prototyp hier. Wenn ich meinem Kunden zeigen möchte, wie die Website funktioniert? Wie sieht es aus, wenn ich auf die Seite scrolle? Wie sieht es aus, wenn ich auf diese Seiten klicke? Dann, wenn Sie sich innerhalb des Spielmodus befinden , den wir gerade mit allen verknüpften Elementen vorbereitet haben. Sie haben diese Schaltfläche hier drüben, und ich werde nicht darauf klicken, weil ich bereits meinen Bildschirm aufnehme und ich denke, dass ich meinen Computer abstürzen werde , wenn ich darauf klicke, weil ich nicht weiß, ob mein Computer zwei Aufnahmen auf einmal, aber das liegt daran, dass ich diesen Kurs aufnehme. Das ist eine Funktion, die Sie nur diesen Teil Ihres Bildschirms aufzeichnen können. Sie können auf die Website scrollen, auf verschiedene Dinge klicken, die Sie über das Prototyping-Tool verbunden haben und dann einfach ein MP4 senden. Ich denke, es exportiert ein MP4 an Ihren Client und es sendet das Video. Wir übertragen oder laden ein Video auf YouTube hoch. Sie können auch das Design Ihres Kunden ganz einfach teilen. Sie können Aufnahmesoftware kaufen, die ich benutze, um diesen Kurs zu machen. Ich verwende Screen Flow, um diesen Kurs aufzuzeichnen. Ich kann mein Audio auch mit einem Mikrofoneingang aufnehmen , denn das mache ich im Moment, um diesen Kurs aufzunehmen. Für Menschen, die kein Mikrofon haben oder sie nicht lesen, im Inneren des Mikrofons und der Blade-Funktion sprechen möchten, ist diese Taste perfekt, um Ihre Designs und die tatsächlichen Interaktionen mit Ihren Kunden zu teilen . Es gab zwei Features, die ich Ihnen auch zeigen wollte. 36. Glückwunsch-+ Hast du mehr?: Alles klar Leute, herzlichen Glückwunsch, ihr seid fertig mit dem Kurs. Dies ist eine erstaunliche Leistung, weil die meisten Leute nicht bis zum Ende des Kurses bekommen. Das zeigt wirklich, dass du wirklich lernen willst und ich weiß es wirklich zu schätzen. Deshalb möchte ich Ihnen in diesem Video danken. Was dann jetzt? Vielleicht willst du noch mehr. Wenn Sie etwas online gesehen haben, das ich erklären soll und zu diesem Kurs hinzufügt, lassen Sie es mich bitte wissen. Schicken Sie mir eine DM auf Instagram. Mein Name ist Rinodeboer oder einfach einen Kommentar hier unten hinterlassen. Ich möchte auch wissen, was ich auf diesem Kurs verbessern kann , weil ich einfach neue Episoden erstellen und die Kernshow verbessern kann. Wenn Sie eine Rezension für diesen Kurs hinterlassen können, wird das wirklich hilfreich sein und das wird mir erlauben, den Kurs zu verbessern. Sie haben jetzt Zugriff auf diesen Kurs. Wenn ich neue Episoden hinzufüge und dann werden Sie diese neuen Episoden sehen, wenn ich sie hochlade. Noch einmal, herzlichen Glückwunsch. Was auch eine Möglichkeit ist, dass Sie wollen, dass ich einen anderen Kurs mache, vielleicht über einige tiefere Themen wie Designtheorie, das ist ein Kurs, den ich erstellen möchte. Oder vielleicht können einige andere Werkzeuge zum Beispiel Symbole in Illustrator erstellen. Bitte lassen Sie es mich wissen und dann hoffe ich, Sie im Internet zu sehen. Wieder kannst du mir auf Instagram bei rinodeboer folgen, oder du kannst den Links von [unhörbar] auf YouTube oder auf Instagram folgen. Ich werde diese Links unten setzen. Dann möchte ich Ihnen nochmals dafür danken, dass Sie diesen Kurs besucht haben. Na gut, Leute, ich sehe euch hoffentlich irgendwo im Internet. Vielen Dank.