Lerne UI-UX-Design mit Adobe XD

1. Einführung in Adobe XD: Hallo zusammen und willkommen zu unserem Kurs über Adobe XD zum Lernen I. Wenn Sie planen, Benutzeroberfläche und Benutzererfahrung von Anfang an zu lernen , dann sind Sie hier genau richtig Weil wir in diesem Kurs alles von den Grundlagen bis hin zu den Fortgeschrittenen behandeln werden. Das ist ein Anfängerkurs. Wenn Sie noch keine Erfahrung haben, können Sie an diesem Kurs teilnehmen. Schauen wir uns an, was Sie in diesem Kurs gelernt haben. Einführung, Arbeitsbereich und Oberfläche. Dann lernen wir die grundlegenden Tools und Low-Fi-Wireframe in Adobe So verwenden Sie die Textoption in XD mithilfe von Formen in XD Stroke. Kopieren Sie kostenlose Symbole und fügen Sie sie ein, um sie in Projekten und vorhandenen UIKits zu verwenden Gruppieren und Bearbeiten von Symbolen, Prototyping in Adx D, Animation, wie Sie Ihren Wortrahmen und Kommentare teilen können Außerdem werden wir lernen, Moodboard-Farben in AdobXD und Bilder in oobXD zu erstellen AdobXD Abschließend ein Projekt zur Gestaltung von Webseiten. Nach Abschluss dieses Kurses können Sie Ihre eigene mobile App und Ihr eigenes Webdesign erstellen . Erstellen Sie Ihre eigenen Farbverläufe und Farbpaletten erwerben Sie gute Kenntnisse in der Farbgebung im Webdesign Machen Sie das Prototyping, wählen Sie Bilder aus, um Schaltflächen zu erstellen, und legen Sie auch den Stil der Webseite fest Dies ist ein Projekt, das während des Lernens stattfindet Sie werden Unterrichtsprojekte haben Was Sie lernen, können Sie an Unterrichtsprojekten teilnehmen, sodass Sie während des Lernens üben können. In diesem Kurs stehen Ihnen unterstützende Ressourcen zur Verfügung, sodass Sie es während des Lernens leicht lernen können. Wenn ihr ein Problem habt oder Fragen habt, mich gerne fragen. Ich bin immer für dich da, um dir zu helfen. Lass uns gemeinsam anfangen, XD für YU X zu lernen. 2. Einführung, Arbeitsbereich und Schnittstelle: Hallo zusammen und willkommen zum Tutorial auf Adobe XD. Hier ist das erste Kapitel, und hier lernen wir etwas über UX-Design von Benutzeroberflächen. Okay, also im ersten Kapitel werde ich euch erzählen, was Adobe XD ist und wie es sich von jeder anderen auf dem Markt erhältlichen UX-Designsoftware für Benutzeroberflächen unterscheidet jeder anderen auf dem Markt erhältlichen UX-Designsoftware für Benutzeroberflächen , okay? Dann werde ich euch etwas über den Arbeitsbereich und auch über die Oberfläche dieser speziellen Anwendung erzählen , okay? Wie Sie tatsächlich lernen können, wie Sie arbeiten und wie Sie mit der Erstellung Ihrer ersten mobilen App oder Webseite beginnen können. Okay, lassen Sie uns keine Zeit verschwenden und lassen Sie uns gemeinsam mit dem UX-Design dieser Benutzeroberfläche beginnen. Hier könnt ihr sehen , dass ich auf der Homepage von Adobe XD bin. Hier könnt ihr sehen, ob ihr mit anderen Anwendungen von Adobe vertraut seid . Ihr kennt diesen Arbeitsbereich, okay? Egal, ob es sich um ein Hotelgeschäft oder um Design, Illustrator oder After Effects handelt Illustrator oder After Effects Diese spezielle Homepage, es ist ziemlich dasselbe Okay. Oben in der linken Ecke könnt ihr, das ist das Logo von Adobe XD. Okay? Also das ist das Logo danach. Von hier aus könnt ihr eine neue Datei erstellen falls ihr schon einmal gearbeitet habt und diese gespeichert habt. Wenn Sie auf Öffnen klicken, wird diese Art von Menüleiste angezeigt, von der aus Sie auf Ihr System zugreifen können. Und von hier aus können Sie grundsätzlich auswählen, welche Sie öffnen möchten. Okay, ich werde als eine schließen und hier ist eine Option , mit der Sie zu einer Webseite gelangen, von der aus Sie wissen, wie Sie mit dieser speziellen Anwendung beginnen können. Okay, von hier aus könnt ihr sehen, dass es ein paar Dinge gibt , die wir lernen können. Hier finden Sie Tutorials, einige Benutzerhandbücher und einige der häufigsten Probleme, mit denen Sie konfrontiert werden können. Sie haben auch die Lösung für all das. Okay, lassen Sie uns danach wieder zu meiner DE-Seite zurückkehren. Wenn Sie unter die Dateioption fallen. In der Dateioption könnt ihr sehen, ob ich etwas bearbeitet habe oder ob ich hier etwas gespeichert habe. Wie ihr sehen könnt, habe ich hier eine Datei, an der ich zuvor gearbeitet habe. Wenn jemand dieses spezielle Werk mit dir teilt , er möchte an diesem X D zusammen mit dir arbeiten , damit du auch arbeiten kannst, könnte er es mit dir teilen, zum Beispiel eine Datei mit dir teilen. Von hier aus könnt ihr auf all diese zugreifen. Ihr könnt Links verwalten, wenn ihr schon einmal Links in eure Arbeit eingefügt habt. Von hier aus könnt ihr es sehen, aber ich habe momentan keine. nur auf eine andere Seite weitergeleitet, um mir zu zeigen , dass ich keine Links geteilt habe. Okay. Ich gehe einfach wieder zurück. Kommt von hier zu meinem X D, ihr könnt sehen, ob ihr irgendwelche Dateien von hier gelöscht habt. Okay. Von hier aus seht ihr die gelöschte Datei. Wenn ihr euch also erholen wollt, könnt ihr euch erholen. Aber innerhalb von 30 Tagen wird es dauerhaft gelöscht, wenn Sie Ihre Arbeit hier mit der Option Löschen ablegen. Okay? Also musst du das vor 30 Tagen zurückholen, okay? Da ich den Startplan verwende, wird mir gesagt, dass ich das Upgrade durchführen soll Von hier aus können Sie auf alle Dateien zugreifen, an denen Sie zuletzt gearbeitet oder die Sie sich angesehen haben. Okay, von hier aus werde ich euch zeigen, wie ihr eine neue Datei öffnen oder wie ihr eine erstellen könnt. Okay, hier, nehmen wir an, ich möchte eine neue Datei erstellen. Ich kann einfach auf diesen klicken, okay? Hier, das ist der Arbeitsbereich. Aber da ich gerade dieses ausgewählt habe, dieses Web 1920 mal 1.000 ATP. Das ist die Standardrahmengröße oder die Größe der Zeichenfläche, okay? Von wo aus wir anfangen können zu arbeiten. Aber für mich im Grunde genommen, wenn ich in diesem Fall etwas tun möchte , zum Beispiel, ob ich eine bestimmte Größe im Sinn habe , für die ich eine mobile App oder eine Web-App für das, was ich gerade erstelle. In diesem Fall kann ich nur wieder auf meine Startseite zurückkehren. Auf meiner Homepage könnt ihr sehen dass ich hier verschiedene Arten von Voreinstellungen habe Sie können sehen, dass ich hier etwas anderes habe, wie für das iPhone, für das Google Pixel iPad Wenn ihr es für eine Webseite macht, könnt ihr es auch für eine Webseite tun. Okay, komm wieder her. Wenn ich das hier runterziehe, kannst du auch auf der Webseite sehen, dass ich verschiedene Größen habe kannst du auch auf der Webseite sehen, . Wenn ihr eine Instagram-Story oder irgendeinen Twitter-Post, Facebook-Beitrag oder ein Youtube-Video erstellt oder irgendeinen Twitter-Post, , könnt ihr diese spezielle Voreinstellung von hier aus verwenden. Wenn Sie bereits eine Größe haben, kennen Sie die Breite und den Hype bereits Es gibt viele Websites. Von wo aus ihr die Bildschirmgrößen bekommen könnt. Von dort aus kann man die Breite und Höhe sehen , die ihr auch hier angeben könnt. Sie können diese benutzerdefinierte Größe auch von hier aus speichern. Okay, ich zeige euch hier, wie man eine Zeichenfläche erstellt Wie ihr sehen könnt, bin ich jetzt hier im Arbeitsbereich, okay, das ist der grundlegende Arbeitsbereich von dem aus ihr arbeiten werdet Wenn ihr zu eurer Startseite zurückkehren wollt, könnt ihr hierher zurückkehren oder auf diese Home-Schaltfläche klicken. Okay, ich werde diese danach schließen. Lass uns herausfinden, welche Seiten ich hier alle habe. Okay, hier könnt ihr sehen, dass dieser als Werkzeugleiste bezeichnet wird. Von hier aus werde ich euch von all diesen Tools erzählen, was wir danach alles verwenden können. Ihr könnt sehen, dass ich die Möglichkeit habe, Prototypen zu entwickeln Okay, ich werde euch auch sagen, wie man Prototypen erstellt. Neben meiner Seite hier könnt ihr sehen, ob ich einfach rauszoome. Okay, lassen Sie mich hier weitere Voreinstellungen vornehmen. Okay, lassen Sie mich die Zeichenfläche nehmen, lassen Sie mich eine von hier aus erstellen Lass mich herkommen und ich möchte eine Zeichenfläche erstellen. In diesem Fall wähle ich aus, ich kann im Grunde eine andere Zeichenfläche erstellen Lassen Sie mich es Ihnen zeigen, indem Sie eine erstellen Sie zu Ihrer Designdatei zurück der Designdatei hier könnt ihr die Option Artboard sehen Sobald ich diese Zeichenfläche hier ausgewählt habe, könnt ihr sehen, dass ich verschiedene Vorlagen oder verschiedene Voreinstellungen habe verschiedene Vorlagen oder verschiedene Voreinstellungen Lassen Sie mich das iPhone 14, Pro Max hier nehmen. Ihr könnt sehen, dass ich hier eine Zeichenfläche habe. Im Grunde sind Zeichenflächen wie Rahmen oder dasselbe. Okay, wenn ihr Figma benutzt oder wenn ihr mit einer anderen UI-UX-Designanwendung vertraut seid , dann werdet ihr hier in X D eine Zeichenfläche rahmen . Es ist ziemlich dasselbe Dieses Tool verwenden. Ich werde diesen einfach hierher verschieben. Dies ist die Option für das Prototyping. Angenommen, ich möchte das mit diesem prototypisieren. Ich kann das so machen. Okay? Danach kann ich diesen einfach wieder löschen. Gehe zur Designoption. Okay, ich hoffe ihr habt verstanden, wie man im Grunde Zeichenflächen erstellen kann Hier könnt ihr sehen, dass das die Ebene der Zeichenfläche ist , okay Von hier aus kann ich im Grunde alles sehen, okay. Das nennt man das Panel, okay? Das kann also als Design-Panel bezeichnet werden. Hier. Sie können auch Prototypen erstellen und wenn Sie die Datei teilen möchten, können Sie die Datei auch teilen Danach ist das Design-Panel. Hier könnt ihr sehen, dass ich verschiedene Möglichkeiten habe. Okay. Hier. Das ist die Bibliothek , aus der wir verschiedene Farben herausnehmen können. Wenn ich eine Farbe hinzufügen möchte, kann ich sie hinzufügen. Wenn ich Zeichenstile hinzufügen möchte, kann ich sie von hier aus hinzufügen. Okay, verschiedene Komponenten, Videos, was auch immer ich hier in dieses Feld lege, wird hier angezeigt. Okay, schauen wir uns die verschiedenen Plug-ins an. Okay, hier könnt ihr sehen, dass ich hier zu Plug-ins kommen kann. Plugins sind im Grunde ein Ort, von dem aus ihr verschiedene Arten von Bildern, Symbolen, Webdesign und so viele Dinge importieren könnt , die wir tun können. Lass uns sehen und lass uns unsere Plug-ins entdecken. Was wir alles haben, ist hier. Okay. Wenn ich darauf klicke, könnt ihr sehen, dass ich hier zur Auto-Seite weitergeleitet werde. Von hier aus könnt ihr sehen, was ich alles habe, okay? In welcher ganzen Anwendung. Ich kann sie verwenden, wenn ich will. Were Frame, eine Menge Wire-Frame-Vorlagen. Ich kann den Were-Framer hier mitnehmen. Sie können sehen, ob ich eine Ikone haben möchte, dreitägige Illustration, ich kann diesen Icon Scout nehmen Ich hole mir das. Und hier bitten sie mich um eine Empfehlung, oder sie bitten mich um eine Erlaubnis. Ich klicke auf. Okay. Weil ich diesen Can Scout hier benutzen möchte. Okay. Hier könnt ihr noch viel mehr sehen. Ich habe hier ein paar Icons für Design, ihr könnt sehen, ihr könnt sie tatsächlich herunterladen , je nach Bedarf. Okay? Was auch immer ihr braucht, ihr könnt es von hier aus nehmen. Dies sind einige der Ressourcen. Wenn ich jetzt hierher gehe oder wieder zurückkomme, ist dies das Symbol Scout. Von hier aus kann ich auf Weiter klicken, wenn ich mich anmelden möchte, oder wenn ich mich registrieren möchte, kann ich das auch von hier aus tun. Jetzt habe ich mich erfolgreich angemeldet. Auch nachdem ihr euch angemeldet habt, könnt ihr sehen, wie es tatsächlich aussehen wird. Okay, das ist die Seite hier. Von hier aus könnt ihr wählen. Okay, wenn du nur das kostenlose von hier willst, wenn du auf kostenlos klickst, hier sind alle Icons , die du kostenlos verwenden kannst. Okay, hier sind verschiedene Symbole, die du einfach einfügen kannst. Lass mich einfach einen setzen und euch zeigen und das. Es gibt viele Pakete, wenn ihr Charakter haben wollt, wenn ihr irgendwelche Social-Media-Symbole haben wollt, irgendein Thema wie Valentinstag oder Weihnachten, irgendwelche NFTs, ihr könnt hier auf all das zugreifen Dies ist die Verwendung von Plug-ins, wir je nach Verwendung unterschiedliche Symbole erhalten können Ich gehe einfach wieder zu Einzelpersonen. Von hier aus werde ich es mit einem aufnehmen. Angenommen, ich möchte das einfügen. Okay, jetzt fragen sie mich, möchte ich eine kleine PNG-Datei oder nur eine einfache PNG-Datei importieren? Okay, hier arbeitet der Scout. Also das importiert mein Bild in die AutoBxdBox oder in meinen Stattdessen könnte es eine Weile dauern. Ich stoppe das und nehme das und füge einfach das kleine PNG ein. Okay, hier könnt ihr sehen, dass ich dieses Symbol auf meinem Rahmen habe. Ich kann die Größe ändern. Und wenn ich hineinzoome, könnt ihr sehen, dass ich im Grunde so trainieren kann Wenn ich Seiten oder Webseiten zu WhatsApp erstellen möchte , kann ich dieses Symbol verwenden. Okay. Ich kann auch nach verschiedenen Arten von Symbolen suchen, wenn ich hier relevante Suchanfragen habe. Ich hoffe ihr habt auch die Verwendung von Plug In hier verstanden. Okay, hier habe ich auch die Ware Frames. Wenn ich etwas herunterladen möchte, kann ich tatsächlich loslegen. Wenn ich hier auf Start klicke, könnt ihr sehen, dass ich hier verschiedene Frames habe, die ihr auch für eure Arbeit verwenden könnt. Okay, ihr könnt die bearbeiten. Kommen wir von der Plug-In-Option zurück. Ich werde diesen einfach schließen. Ich hoffe, ihr habt auch drei dieser Dinge verstanden . Dies ist die grundlegende Werkzeugleiste. Kommen wir jetzt her und gehen wir zur Kunsttafel. Okay, von hier aus wird das im Grunde das Bedienfeld genannt. Okay? Welchen Charakter oder welches Objekt ich auch auswähle, das sich in diesem Rahmen befindet, ich kann diese Breite und Höhe tatsächlich verändern. Wenn ich es einzeln ändern möchte, kann ich diese Rotation durchführen. Und so viele Dinge , die wir in den späteren Phasen des Unterrichts lernen werden . Wir können auch die Opazität ändern. Erhöhen Sie die Deckkraft, den Mischmodus und verschiedene Arten von Effekten sind Okay, wenn ich dieses spezielle Ding exportieren möchte, kann ich einfach auf Für Export markieren klicken und ich exportiere auch die Dateien Oder wenn Sie einfach eine Seite von hier aus auswählen möchten , wie Sie sehen können. Wenn ihr eine bestimmte Seite auswählt, könnt ihr auf all das zugreifen, okay? Wenn ich etwas ändern möchte oder wenn ich die Breite, Höhe oder die Farbe ändern möchte, kann ich das von hier aus tun. Okay, so werden wir an dieser Seite arbeiten. Lass mich einfach wieder zurückgehen. Ich möchte das in weißer Farbe behalten, ich hoffe, ihr habt auch so viel über das Bedienfeld verstanden . Hier habe ich die Share-Option, okay, also kann ich ihnen über die Share-Option tatsächlich den Link schicken. Okay, ich kann im Grunde einen neuen Link erstellen. Von hier aus kann ich auch die Ansichtseinstellungen festlegen. Okay, von hier aus, wie ich sie verwenden möchte, werden sie also hier arbeiten können? Werden sie zum Beispiel entwerfen können und wer wird alle Zugriff auf den Link haben? Okay, nur eingeladene Leute. Nur einer mit Passwort. Ich kann auch ein Passwort setzen. Wenn ich danach einen Link erstelle, wird ein Link erstellt , den wir an meine Kollegen oder meinen Kunden weitergeben können . Okay, hier kann ich diese Option verwenden, wenn ich eine Vorschau vom Gerät erhalten möchte . Wenn ich zum Beispiel von hier aus mit der Erstellung einer mobilen App fertig bin, kann ich die Vorschau abrufen oder sie testen. Okay hier. Eine weitere Option ist die Zoom-Option, okay, da mein Bildschirm jetzt auf 30 Grad eingestellt ist. Wenn ich es 100 mache, könnt ihr sehen, wie es aussehen wird. Wenn ich es zu 50% mache, sieht es tatsächlich so aus. Mach es 33, so wird es von hier aus tatsächlich aussehen. So können wir im Grunde arbeiten. Hier ist eine weitere Option wie die Desktop-Vorschau. Okay, wenn du das auf einem Desktop oder einer Webseite sehen willst , okay, ich kann auch hier klicken. Wenn ich dieses Dokument in meinem Creative Cloud-Bereich oder in meiner Creative Cloud speichern möchte, kann ich dieses Dokument auch von hier aus speichern. Okay, es ist der einfache Weg, das zu tun. Wenn ich jetzt hier klicke. Okay. Von hier aus kann ich auch den Namen ändern. Okay, lass mich herkommen, lass mich das hier einfach demarkieren Kommen Sie zur Designoption. Von hier aus kann ich auch den Namen ändern. Okay, wenn ich hier klicke. Ja, von hier aus können Sie das speichern, wie Sie möchten. Ich hoffe, ihr habt jetzt den Workspace und das Interface verstanden. Jetzt seid ihr ziemlich vertraut damit, wie man mit der Arbeit an dieser Anwendung anfängt. Ich habe Ihnen den Arbeitsbereich, die Benutzeroberfläche und das, was dieses Adobexd ist, erklärt Benutzeroberfläche und das, was dieses Adobexd ist, Im Grunde kann ich, wie ich euch bereits gesagt habe, UI-UX-Design erstellen und es auch von hier aus testen Mach das Prototyping. Nach dem Ende dieses Tutorials werde ich dafür sorgen, dass ihr wisst, wie ihr euer eigenes Design erstellt, wie ihr eure eigene mobile Anwendung erstellt Da wir auch ein Klassenprojekt haben, werden wir lernen und gleichzeitig wir lernen und gleichzeitig diese Dinge auch üben. sehen uns alle in der nächsten Klasse , in der wir alle grundlegenden Werkzeuge hier in der Werkzeugleiste kennenlernen werden alle grundlegenden Werkzeuge hier in der , die Sie sehen können. Ich werde euch sagen, wie ihr sie benutzen könnt. Danach werde ich euch auch von Low-Fi und High-Fi-Rahmen erzählen . Okay? Sag ihnen, passt auf euch auf und wir sehen uns alle in der nächsten Klasse. 3. Grundlegende Tools und Lofi- und Hifi-Wireframe in Adobe xd: Hallo zusammen und willkommen zu einem weiteren Kapitel des Adobe einem weiteren Kapitel des Okay, hier in unserem zweiten Kapitel werden wir etwas über das grundlegende Tool lernen. Und ich werde euch auch sagen, was ein Low-Fi - und ein Hi-Fi-Glasrahmen sind. Okay, ich habe also zwei davon. Ich habe eine Low-File-Anwendung, und ich werde dir in diesem speziellen Tutorial auch einen Hi-Fi-Wer-Frame zeigen . Verschwenden wir also keine Zeit und beginnen wir gemeinsam mit diesem UIUX-Design Hier, wieder zurück am Arbeitsplatz. Okay, jetzt wollen wir versuchen, all diese grundlegenden Tools zu verstehen , die ich in meiner Werkzeugleiste habe. Okay, lass uns anfangen. Das ist der erste. Dies wird als Auswahlwerkzeug bezeichnet Tastenkombination für das Auswahlwerkzeug ist V auf unserer Tastatur. Angenommen, wenn ich das auswähle und jetzt auf meiner Tastatur auf V klicke, wird es in ein Auswahlwerkzeug umgewandelt. Okay, von hier aus. Wie Sie sehen können, können wir uns danach mit dem Auswahlwerkzeug mit dem Auswahlwerkzeug im Grunde bewegen. Außerdem können wir einen bestimmten Artikel auswählen , wenn wir ihn auf unserer Seite haben. Ich kann auch die Größe des Arbeitsbereichs ändern, wie ich es beibehalten kann. Und hier kannst du sehen, dass ich von hier aus die Höhe ändere. Und wenn ich die Breite ändere, wird es so aussehen. Okay? Sobald wir hier arbeiten, können wir uns nicht mehr bewegen, wenn ich einfach hier tippe. Okay, wenn ich hier irgendeinen Inhalt oder ein Objekt in meinem Frame habe, okay, in diesem Fall muss ich dieses hier auswählen. Ich kann mich grundsätzlich, okay, von dem Namen aus bewegen , den ich auswähle und ich kann mich von hier aus in meinem Rahmen bewegen. Das ist einer. Und ich kann es auch von hier aus umbenennen. Nehmen wir an, um nicht zu verwechseln, in welchem Frame oder auf dieser Folie ich einen Prototyp mit einem anderen erstellen werde. In diesem Fall kann ich sie entsprechend umbenennen. Nun hoffe ich, dass ihr das Auswahltool verstanden habt . Und Sie können dies auch skalieren, wenn Sie möchten. Okay? Nun, das nennt man das Rechteckwerkzeug, direkt unter dem Auswahlwerkzeug. Die Tastenkombination dafür ist R auf der Tastatur. Okay, wenn ich herkomme, kann ich hier eine rechteckige Box machen. Sie können hier sehen, dass ich eine rechteckige Schachtel gemacht habe. Ich werde das auswählen, ich kann das löschen. Jetzt habe ich das Auswahlwerkzeug. Damit können wir grundsätzlich etwas ändern oder ändern. Wie ihr hier sehen könnt, könnt ihr die Veränderung der Form sehen. Wir Leute können das im Grunde von hier aus mit diesem Rechteckwerkzeug machen . Okay? Ich kann auch die Größe verringern, die Größe erhöhen. Wenn ich das vergrößern möchte, kann ich das hier tun. Wenn ich rotieren möchte, kann ich das auch drehen. Okay, so können wir hier grundsätzlich mit diesem Tool arbeiten. Ich hoffe ihr habt viel verstanden. Gehen wir nun zum nächsten Werkzeug über, dem Kreis- oder dem Ellipsenwerkzeug, okay? Das ist das Ellipse-Werkzeug, und ihr habt bereits verstanden, dass ihr mit dem Ellipse-Werkzeug einen Kreis erstellen könnt, okay? So könnt ihr einen Kreis erstellen. Wenn ihr einen neuen Kreis wie proportional erstellen wollt, müsst ihr nur die Umschalt-Taste drücken und ihr könnt hier einen proportionalen Kreis erstellen Jetzt werdet ihr die Form nicht mehr ändern können. Wie ihr sehen könnt, ist dieser proportional und dieser nicht, okay? Dieser ist es nicht. Ich werde das löschen und Kreis hier auf eine Seite verschieben. Okay? Mit all diesen können wir unsere Knöpfe machen. Alle Designs, wenn du willst, wir können das machen. Hier ist auch eine andere Form, nämlich das Polygon. Okay? Im Grunde kann ich hier ein Polygon erstellen Wie du an den Optionen sehen kannst, gibt es , wie du siehst, ein paar Optionen Damit kann ich die Stärke der Ecken ändern oder einfach die Stärke der Ecken verringern. diese Weise möchte ich das einfach nach unten verschieben oder verkleinern . Das kann ich machen Wenn ich es so mache, diese Art von Symbolen, kann ich das von hier aus machen. Ich kann das mit dem Auswahlwerkzeug vergrößern. Ich werde diesen hier platzieren. Ja, das ist in Ordnung. Lassen Sie uns danach versuchen, hier etwas über das Linienwerkzeug zu erfahren. Okay, das Linienwerkzeug wird hauptsächlich zum Erstellen von Linien verwendet. Wenn ich zum Beispiel eine Linie von der Ecke aus erstellen möchte, kann ich tatsächlich die Länge oder die Positionierung ändern. Okay, wenn das einmal in der Mitte ist, zeigt es mir so, aber jetzt weiche ich von der Linie ab Es wird mir so zeigen. Okay. So können wir von hier aus tatsächlich eine Linie ziehen. Wenn wir unser Auswahlwerkzeug nehmen, kann ich mit diesem Tool von hier aus grundsätzlich auch ein - oder ausziehen. Nun, das ist eine Möglichkeit, das Linienwerkzeug von hier aus zu verwenden. Ich werde euch hier ausführlich über all das erzählen, zum Beispiel, wie ihr den Strich ändern könnt oder wie wir die Strichfarbe, die Feldfarbe und auch die Stärke oder die Feldfarbe und auch die Stärke oder Breite dieser bestimmten Linie ändern können. Wie du dich ändern kannst. Okay, ich wähle das alles von hier aus, ich lösche es, ich hoffe, das war alles klar bis so viel. Okay, jetzt werde ich euch vom Pin-Tool erzählen, okay? Mit dem Stiftwerkzeug könnt ihr verschiedene Arten von Animationen und auch verschiedene Arten von Logos erstellen , okay? Aber das Pin-Tool ist ziemlich knifflig. Lassen Sie uns hier das Stiftwerkzeug verwenden. Okay? Nur, ich zeige euch eine grundlegende Verwendung, die ihr verstehen könnt, wie ihr sie hier in eurem Wort verwenden könnt. Ich mache mir nur eine Form, die mir selbst entspricht. Ich mache hier eine Form. Und hier habe ich eine bestimmte Form. Okay. Was ich auch tun kann, ist die Größe zu ändern, Länge hier zu erhöhen, den hier irgendwohin zu bringen. Die kann ich auch hier machen. Wie Sie sehen können, habe ich von hier aus bereits ein Logo erstellt. Okay? Das ist eine Möglichkeit, wie wir das machen können. Und wir werden von hier aus auch lernen, wie wir das im Grunde mit Farben füllen können . Dies sind einige Optionen, Sie können es nach Ihren Wünschen oder nach Ihren Wünschen gestalten . Pento ist sehr hilfreich. Danach habe ich auch die Option für den Text. Okay. Wie ihr sehen könnt, habe ich hier die Textoption oder das Textwerkzeug ausgewählt. Jetzt habe ich meinen Cursor hier und ich habe auf diesen Rahmen geklickt Und jetzt kann ich Dinge nach meinen Bedürfnissen schreiben . Von hier aus. Was ich tun kann, ist, diese bestimmte Ebene hier auszuwählen und ihre Größe zu ändern, oder ich kann die Größe ändern Angenommen, ich möchte 60, dann klicke ich auf Enter, und hier können Sie die Buchstabengröße oder meine Schriftgröße sehen Hier kann ich es so schreiben. Hier kannst du sehen, welche Objekte ich hier in diesem speziellen Rahmen oder auf der Zeichenfläche Sie werden diese Ebenen hier haben. Okay? Wenn ich einfach wieder hierher gehe, kannst du dir das hier ansehen. Ich kann diese spezielle Zeichenfläche auch begrünen. Von hier aus kann ich quasi hierher kommen, und wenn ich das ausgewählt habe, habe ich auch alle Objekte darin Okay. Hier, wenn ich das verstecken will, kann ich darauf klicken. Wenn ich das protokollieren möchte, kann ich die Positionierung oder ähnliches nicht ändern . Hier mache ich das auch, wenn ich nur diese spezielle Schrift von hier exportieren möchte . Ich kann das auch exportieren. Wenn ich zum Beispiel genau dasselbe Ding oder dieselbe Schaltfläche oder dasselbe Design auf einer anderen Seite verwenden möchte, kann ich das auch tun. Wenn ich es zum Beispiel bei der Erstellung eines Posters in anderen Anwendungen verwenden möchte, kann ich diese auch verwenden. Ich hoffe, diese Textoption war auch klar. Ich werde das auch hier löschen. So kannst du Db machen, was ich dir hier schon gezeigt habe. Sie haben all diese Voreinstellungen. wollen keine Voreinstellung, Sie können einfach herkommen und selbst eine Zeichenplatte in Ihrer eigenen Größe machen Ihrer eigenen Größe Hier habe ich das Board von hier, ich kann den Namen im Grunde ändern. Okay, das kann ich auch machen. Okay, danach ist die letzte Option in unserer Werkzeugleiste die Option zum Vergrößern. Okay, wenn ich hier klicke, könnt ihr sehen, dass ich einfach hineinzoomen kann. Okay? Das ist die Option zum Heranzoomen. Von hier aus. Ich kann alles kopieren, oder ich kann mich einfach bewegen. Ich kann mich auch bewegen. Okay, das ist die Option zum Heranzoomen. Wenn ich hier klicke, könnt ihr sehen, dass ich euch auch verschiedene Möglichkeiten zum Heranzoomen gezeigt verschiedene Möglichkeiten zum Heranzoomen Auszoomen, okay, hier ist eine weitere Option. Oder wenn Sie einfach auf Ihrer Tastatur und auch mit der Maus drücken , können Sie einfach hinein- und herauszoomen. Es hängt von Ihnen Okay? Sie haben auch dasselbe zu tun hier in dieser Anwendung unterschiedliche Funktionen , um dasselbe zu tun. Wenn ihr den Rahmen verschieben wollt, ganz wie den ganzen Rahmen oder die ganze Seite, müsst ihr einfach auf der Tastatur auf Shift klicken. Und mit der Maus könnt ihr jetzt hier auf meiner Tastatur hineinziehen . Ihr könnt es sehen. Jetzt habe ich ein Handzeichen. Okay. Das nennt man das Handwerkzeug. Okay. Mit dem Handwerkzeug kann ich mich im Grunde mit meinem Auswahlwerkzeug bewegen. Ich kann das nicht machen. Okay. Mit dem Auswahlwerkzeug kann ich einen bestimmten Rahmen auswählen und ihn auf der Seite verschieben. Aber um die Positionierung der gesamten Seite zu ändern , kann ich sie verschieben. Und danach kann ich mich mit meiner Maus einfach bewegen. Okay. Ich kann auch mit Steuerung und Maus herauszoomen. Ich hoffe, ihr habt alle grundlegenden Tools verstanden . Okay, jetzt lass es mich euch zeigen. Hallo. Und was ist ein Low-Fi-Wertrahmen? Okay, es gibt im Grunde zwei Arten von Tragesystemen. Die erste ist Low-Fi, die Vollform ist Low-Fi. Wir rahmen Hii für High Fidelity, wo Frame. Okay, lass mich einfach eine Datei öffnen. Komm her. Und von hier aus, wie du sehen kannst, habe ich diese Seite hier, okay? Jetzt wird dieser geladen. Dies wird ein Beispiel dafür sein, wie eine niedrige Seite hier aussieht. Ich habe all diese Frames hier, okay. Zoomen Sie jetzt ein Bild hinein, okay? Und ich werde euch sagen, warum sie diesen als die Low Five bezeichnen. Okay, ich habe diesen hier gerade erhöht. Im Grunde haben sie nichts hingestellt. Das ist nur ein Prototyp . Wenn ihr wollt, nehmt an, ihr könnt hier sehen, dass ich die Nebenoptionen habe, Anmeldeoptionen hier wenn euch das Design und alles gefallen, ihr könnt diesen nur als Hi-Fi-Rahmen machen. Okay, das ist nur ein Überblick, falls euch der Stil und alles hier gefallen könnt euch die Stile und alles hier ansehen. Wie ihr sehen könnt, hat er nach der Anmeldung Optionen hier und das alles hier. Sie können oben sehen, dass er dies auch beim Einsteigen umbenannt hat. Okay, das wird das Profil hier sein. Im Grunde musst du diese Dinge nur so platzieren , wie ich es dir gezeigt habe. Dieser hier ist der Low-Fi-Modus. Sie können das alles auch bearbeiten. Wenn ich das nicht möchte, kann ich einfach hier klicken und löschen. Ich kann auch verschiedene Stile verwenden. Hier kannst du sehen, dass ich auch die Kurvenfahrt von hier aus in diesem Symbol sehen kann , wenn du siehst Oder ich kann auch die Größe ändern. Okay, das ist eine Möglichkeit , viel zu reparieren. Erstens, wenn Sie ein Lo-Fi erstellen, das Sie zeigen oder es nur als Empfehlung behalten , können Sie sich ein besseres Wissen über das Entwerfen aneignen. Okay, hier kommt der L-Typ. Okay, jetzt lass mich euch High oder High Fidelity zeigen. Wir, wenn ich es euch zeige, werdet ihr in der Lage sein, Hi-Fi- und Low-Fi-Drahtgitter zu verstehen und zu unterscheiden . Lassen Sie mich jetzt wieder auf meine Homepage gehen. Von hier aus öffne ich eine Seite. Ich gehe zu Downloads oder ich gehe hier zu meinem Desktop. Ich habe diesen. Wenn ich jetzt zu einer Datei gehe, ist dies eine PSD-Datei. Lass mich es einfach suchen und es euch zeigen. Jetzt kann ich euch den High-Fidelity-Drahtrahmen zeigen. Dieser ist ein dunkler High-Fidelity-Drahtrahmen. Ihr könnt von hier aus sehen, dass es sich um den High-Fidelity-Were-Rahmen handelt. Im Grunde genommen haben sie hier, wie Sie sehen können, all diese Schaltflächen und all diese Designs und Symbole gemacht. Das basiert also einfach auf dem Low-Fidelity-Rahmen oder wurde auf der Grundlage dieses Frames hergestellt. Okay, durch die Verwendung eines Low-Fidelity-Modus wurden Frames verwendet. Dieser ist gemacht, okay. Nun, dieses eine hohe Design, okay. Von hier aus kann ich dieses auch grundsätzlich bearbeiten. Die Hauptsache ist, dass sie ein Low-Fi-Gerät genommen haben und hier das Hi-Fi haben, wo der Frame eine direkte Verbindung zwischen dem Benutzer und dem Werk darstellt. Okay? Sie werden also dieses spezielle Ding und die Benutzeroberfläche sehen, UX-Designer wird versuchen, es benutzerfreundlicher zu gestalten und sich direkt mit der Oberfläche oder der Erfahrung des Benutzers befassen , okay? Das werden sie sehen können, okay? Der Benutzer bekommt nie das Low Fi Okay, den Kunstrahmen oder den Arbeitsbereich zu sehen . Okay. Dies basiert auf einem Low-Fidelity-We-Frame. Aber jetzt ist das das Endprodukt. Es befasst sich mit der jeweiligen Kundengruppe oder den Zielpersonen. Von hier aus kann ich tatsächlich verschiedene Schaltflächen hinzufügen. Jetzt ist dieser fertig und jetzt können Sie Ihrem Programmierer diese spezielle Arbeit geben diese spezielle Arbeit und ihm erklären, was er tun soll Okay, ich hoffe ihr habt es verstanden. Wie Sie sehen können, handelt es sich wohl nur um einen kleinen Teil einer Kryptowährungs-App. Ja, ich hoffe ihr habt diesen Kurs verstanden. Ich hoffe, wir sehen uns alle im nächsten Tutorial, in dem wir lernen werden , wie Sie Adopt Were Frames eingeben können. Okay. Ich hoffe, wir sehen uns alle in der nächsten Klasse. Bis dahin, pass auf dich auf und auf Wiedersehen. 4. So verwendest du die Typoption in Xd: Hallo zusammen und willkommen zu einem weiteren Kapitel des Adobe XD-Tutorials. Okay, hier in diesem Kurs werden wir lernen, wie Sie die Textoption in X D verwenden können , zum Beispiel, wie Sie im Grunde ein Textfeld schreiben oder erstellen können . Wie wir diese tatsächlich verwalten können. Wie wir die Unterschneidung, auch die Leertaste und auch andere Schriftgrößen ändern können auch die Leertaste und auch andere Schriftgrößen Und auch die Schriftstile. Okay, wir werden in diesem Kurs alles über diese Dinge im Detail lernen . Lass uns jetzt mit dieser speziellen Klasse beginnen. Wie ihr sehen könnt, bin ich hier in meinem Arbeitsbereich oder auf dem Startbildschirm, aber jetzt gehe ich von hier aus zu meinem Arbeitsbereich. Wie ihr sehen könnt, habe ich hier standardmäßig eine Seite. Okay, ich wähle diesen aus und lösche ihn einfach. Jetzt werde ich von hier aus selbst kreieren . Okay, ich komme zum Artboard. Lass mir dieses Samsung Galaxy S Größe zehn. Mit diesem Auswahlwerkzeug. Ich werde diesen bewegen. Ich werde vier davon erstellen. Okay, ich behalte den wieder hier. Ich lege noch einen hier hin. Ich werde hier vier Bildschirme haben, wie ihr sehen könnt. Ich kann es auch von hier aus umbenennen, wenn ich möchte. Okay? Ich werde das einfach als eins zusammenfassen. Dieser hat zwei, dieser hat drei. Dieser hat vier. Okay? Ich habe das auch benannt. Vorerst. Versuchen wir nun zu verstehen, wie wir hier unsere Textoption verwenden werden. Okay, lass mich das ein bisschen wissen, es gibt zwei grundlegende Möglichkeiten, okay? Die erste ist also, wenn Sie einfach mit der Maus hier klicken, sobald Sie die Textoption ausgewählt haben, okay, von hier aus können Sie einfach alles eingeben, was Sie wollen. Okay? Also kann es auch über den Tellerrand hinauslaufen. Okay, das ist also eine Möglichkeit. Nun, eine andere Möglichkeit ist, wenn ich ein Textfeld erstelle. Okay, lass mich einfach zurückgehen und das abwählen. Nun, wenn ich hier eine Textspalte erstelle, wie ihr sehen könnt, kann ich hier eine Seite erstellen Okay? Oder ein Textfeld. Jetzt kann ich tatsächlich Text in dieses spezielle Feld einfügen. Sobald es das bestimmte Level erreicht hat , auf dem ich das Feld erstellt habe, wird es automatisch sinken. Okay, hier könnt ihr sehen, okay, ich fülle meine Kiste hier. Es wird sich nur auf der vertikalen Seite erstrecken. Dies ist eine Option, wie Sie das tun können. Jetzt wähle ich dieses Textfeld erneut aus und lösche es. Okay, also nochmal, lass mich hier einfach etwas schreiben. Also vielleicht schreibe ich Roberts Toy World. Okay, also ich schreibe Roberts Toy, Robert, Toys Toys World Toys Jetzt habe ich diesen speziellen Satz hier. Was ich tun kann, ist mit meinem Auswahlwerkzeug, ich kann es hier auswählen. Sie können sehen, dass ich es in die Mitte bringen kann. Okay, vielleicht behalte ich das hier von hier aus. Nochmals, ich werde, während ich hier eine Spielzeugwelt-Seite mache, einfach meine Marketingbotschaft posten. Okay, von hier aus erstelle ich vielleicht eine Box. Ich wähle die Größe von hier aus. Wie Sie hier sehen können, habe ich auch eine Schachtel gemacht. Okay, ich gebe einfach Marketingnachrichten Marketingnachrichten , damit sie hier unten angezeigt werden. Okay, ich habe das und jetzt wähle ich das aus. Danach könnt ihr hier sehen, dass es verschiedene Optionen gibt. Okay. Hier. Wenn ich es in den Mittelpunkt stellen will, kann ich das tun. Und wenn ich es nach rechts ausrichten oder es nach rechts ausrichten möchte , kann ich das auch tun. Okay. Ich komme wieder her. Ich kann die Größe auch von hier aus erhöhen. Ich werde die Größe der Box ändern. Ich wähle diesen Text aus. Jetzt kann ich auf Strg+Shift klicken und die Größe dieser Marketingbotschaft entsprechend erhöhen . Okay, ich behalte das einfach bis hier. Ich werde die Größe auch hier verringern. Okay, das ist eine Möglichkeit, wie wir das hier in diesem speziellen Moment machen können , ich werde das dafür ändern. Zuerst muss ich diesen hier auswählen, ihr könnt sehen, dass ich den Schrifttyp ändern kann. Okay. Hier habe ich verschiedene Schrifttypen, hier könnt ihr sehen, ob ich das auswähle, ich werde diese Typen bekommen können. Okay, ich nehme diesen. Ich nehme das Basic Calibri. In Calibri wähle ich die fett gedruckte Kursivschrift. Jetzt kann ich auch die Größe von hier aus ändern. Okay, lass mich hier 30 nehmen. Sie können sehen, hier ist der Titel. Okay, ich wähle diesen hier aus. Ich lege es in eine Ecke oder oben drauf. Okay, von diesem Ende aus. Im Grunde kann ich wenn ich den gesamten Text erneut auswähle, diesen erneut auswählen. Von hier aus kann ich darauf doppelklicken und hier könnt ihr sehen, dass ich hier nur wenige Optionen habe. Okay. Hier. Hier siehst du, wenn ich herkomme und 50 tippe. Okay, wähle zuerst aus und ja, 50, ich klicke auf. Okay. Also hier kannst du sehen, dass das die Option ist, der Zeilenabstand, wenn ich hier zwei Zeilen habe, okay? Oder ich werde mich hier bewerben . Wenn ich diesen Zeilenabstand von hier aus auswähle. Okay, 18 hier, Sie können sehen, wie der Zeilenabstand dazwischen vergrößert wurde. Okay, hier ist eine weitere Option wie der Wasserabstand. Ich kann das erhöhen, wenn ich es um fünf erhöhe. Hier könnt ihr es sehen. Aber wie Sie sehen können, habe ich diese Option. Ich frankiere das einfach nochmal. Nun, hier habe ich auch viel mehr Optionen. Okay. Auto, Wind. Sie können sehen , wie sich mein Textfeld ändert, wenn ich auf Auto klicke. Okay, wenn ich es hier in der Mitte anklicke, könnt ihr es hier sehen. Wie ihr auch sehen könnt. Okay, hier sind verschiedene Optionen. Ich hoffe ihr habt verstanden, dass dies der Absatzabstand ist. Angenommen, ich habe diesen hier. Jetzt möchte ich den Absatzabstand vergrößern. Ich kann es von hier aus machen. Wenn ich hier nur ein weiteres Textfeld mache. Ich fülle das einfach mit einfachem Text, okay? Und jetzt werde ich einen weiteren Absatz erstellen. Nun, wie ihr hier sehen könnt, okay, hier habe ich das und hier könnt ihr es sehen. Jetzt möchte ich den Absatzabstand festlegen. In diesem Fall kann ich dieses Feld aus diesem Feld hier auswählen , ich komme runter und jetzt können Sie sehen, dass es zehn sind. Ich mache 30. Okay? Hier kannst du sehen, wie sich der Abstand zwischen den Absätzen hier geändert hat, okay? Ich kann die Größe auch erhöhen. Der Abstand zwischen den Absätzen wird derselbe sein, aber die Wörter werden verschoben. Wie ihr sehen könnt. Ich werde diesen wieder löschen. Ich hoffe ihr habt bis jetzt so viel verstanden. Okay, also das Erste, was ihr tun müsst, ist, dass ihr nicht viel an euren Worten ändern solltet , okay? Aber wähle einfach die Größe und alles, okay? Beispiel, welche Schriftgröße du für den Titel verwenden wirst und was du hier alles verwenden wirst. Ich habe das jetzt. Ich werde diesen speziellen Text hier noch einmal kopieren. Okay. Aber hier werde ich das Produktset platzieren und jetzt dieses spezielle Textfeld von hier aus auswählen. Und jetzt kann ich es in die Mitte bringen. Okay? Wie ihr sehen könnt, ich das in den Mittelpunkt. Also, hier habe ich auch diesen. Jetzt werde ich meinen alten Button nehmen und auch einen hier ablegen. Okay? Aber das schreibe ich bis, und ich nehme eine weitere Kiste von hier und schreibe Weitere Informationen. Jetzt werde ich hier Learn More schreiben. Ich werde mehr schreiben, wie ich es hier schon gesagt habe. Ich werde diesen auswählen und jetzt kann ich diese Höhe tatsächlich verringern. Okay. Also ich behalte 010 ist in Ordnung. Ich gebe einfach 20 an. Mal sehen, wie es aussieht. Ja, der ist in Ordnung, ich schätze, jetzt kann ich ihn tatsächlich hierher bringen und so können wir auch hier unsere Knöpfe machen. Eine weitere gute Sache daran ist, ihr C hier sehen könnt, ihr könnt sehen, dass es mich am oberen Rand des anderen Buttons ausrichtet oberen Rand des anderen Buttons Und hier richtet es mich auf die Mitte aus. Und hier, von hier unten, kann ich auch die Breite hier sehen Okay? Zwischen den Absätzen hier kann ich auch die Breite sehen. Okay, hier, was ich im Grunde tun kann, ist, dass ich das auch drehen kann. Hier können Sie sehen, dass sich mein Symbol geändert hat. Damit kann ich es drehen und ich kann es auch entsprechend meinem Bild platzieren. Okay? Aber in diesem Fall möchte ich diesen nicht rotieren. Ich werde es in die Mitte stellen. Ihr könnt es auch hier sehen. Hier ist die Rotationsoption. Von dort aus könnt ihr grundsätzlich abwechseln, okay? Von hier aus kann ich die Positionierung sehen oder überprüfen. Ich werde diesen hier behalten. Ich hoffe, ihr habt diese Klasse von dem, was wir hier gelernt haben, verstanden . Okay? Nach diesem Kurs werden wir lernen, wie man tatsächlich Formen erstellen kann. Okay? Ich werde euch sagen, wie man ein Rechteck macht oder ich gebe hier nur einen Überblick über diese Boxen. Okay? Ich gebe die. Ich werde die auch hinzufügen. Wir sehen uns alle im nächsten Tutorial-Ticker und auf Wiedersehen. 5. Verwenden von Formen in Xd: Hallo zusammen und willkommen zu einem weiteren Kapitel des Adobe XD-Tutorials wir gerade das UX-Design von Benutzeroberflächen lernen. Dies ist unser viertes Kapitel und wir werden lernen, wie wir Formen verwenden können. Also hier in diesem Kurs werde ich euch erklären, wie ihr Formen verwenden könnt, wie ihr den Eckenradius dieser Formen ändert und wie ihr jede Form auch proportional gestalten könnt Ich werde euch sagen, wie ihr ihn grundsätzlich auch individuell verringern könnt ihn grundsätzlich auch individuell verringern Ich werde euch sagen, wie ihr euren Text vor eine Form bringt . Okay? Angenommen, Sie haben Ihre Takes rückwärts, wie können Sie sie formieren Ich werde euch auch erklären, wie man das gruppiert , während man Buttons oder ein beliebiges Icon erstellt, was in diesem Fall die endgültige Vorschau ist , und wie man das voranbringt Okay, lass uns hier keine Zeit verschwenden und lass uns mit diesem Kurs beginnen Wie ihr sehen könnt, bin ich bereits in dem Arbeitsbereich, in dem ich in der letzten Klasse gearbeitet habe. Okay, jetzt zeige ich euch, wie ihr im Grunde kreieren könnt. Ich habe euch alles über die grundlegenden Tools erzählt, Ich habe euch alles über die grundlegenden Tools erzählt in denen ich meine Werkzeugleiste habe. Okay? Von hier aus können Sie eine rechteckige Box erstellen. Okay? Ich möchte eine rechteckige Box erstellen. Zuallererst werde ich den Abstand von hier aus vergrößern. Okay, ich bringe das hier runter. Produktbild, willst du hier reinpassen? Was ich jetzt tun werde, ist, eine Kiste hierher zu stellen. Okay. Dass ich meine Arbeit an die erste Stelle setzen kann. Was ich tun werde, ist das rechteckige Feld auszuwählen. Von hier aus werde ich eine Kiste machen. Okay. Nun, wie ihr hier sehen könnt, ist es abgedeckt. Ich habe meinen Text hier behandelt. Okay. Einfach in diese Kiste , um die hier nach vorne zu bringen. Es gibt so viele verschiedene Möglichkeiten, wie wir diesen Text vor dieses Rechteck bringen können. Aber ich werde euch die grundlegendsten zeigen und was ihr verwenden könnt. Im Grunde genommen ist die einfachste, die ich verwende, wenn Sie hier einfach mit der rechten Maustaste klicken. Sie können sehen, dass die Option Rückwärts senden heißt, okay? Also die Tastenkombination, offene Klammer hier. Wenn Sie das voranbringen möchten, Beispiel, wenn ich in diesem Fall etwas voranbringen möchte , kann ich auf die Option Strg plus Bc schließen klicken. Okay. Ich schicke das zurück oder ich muss den ganzen Text von hier aus auswählen Ich habe „Rückwärts senden“ ausgewählt. Hier war meine Steuerung oder mein Katzenschloss an, deshalb funktionierte es nicht Im Grunde. Hier klicke ich auf Dieses Produkt rückwärts senden So können Sie es im Grunde machen, Sie können dieses Produkt in der Mitte platzieren, oder die andere Art, das zu tun, ist, wenn Sie beide auswählen, nehmen wir an, ich stelle das hier irgendwo hin Jetzt möchte ich beides in den Mittelpunkt stellen. In dem Fall komme ich her. Und was ich wählen werde, ist hier. Wie Sie sehen können, kann ich das in den Mittelpunkt stellen. Okay, ich gehe zur Ausrichtungsoption. Von dort aus kann ich hier mit der Tastenkombination wählen. Ich habe diesen in der Mitte gekauft. Okay. Das ist eine andere Art, es zu tun. Jetzt hoffe ich, ihr habt verstanden, wie ihr im Grunde damit herumspielen könnt . Okay? Ich komme auch hier und hier runter. Jetzt kann ich tatsächlich auch die Breite ändern. Okay, für diesen kann ich das im Grunde machen , wenn ich hierher komme, wenn ich hierher zurückgehe, nehme an, ich möchte diese Seite auswählen, okay? Also, was ich tun werde , ist hier, wie Sie sehen können, die kleinen Punkte hier, okay? Damit kann ich tatsächlich den Radius ändern, wie ihr von hier aus sehen könnt. Und die andere Art, das zu tun, ist, wenn wir herkommen, okay? Im Grunde kann ich auch von hier aus den Eckradius ändern, lassen Sie mich 50 nehmen, lassen Sie mich 50 nehmen, Sie können sehen, dass er um 50 geändert wurde. Wenn ich den Radius für jede Ecke einzeln ändern möchte, nehmen wir an, ich gebe hier 80 ein, dann nehme ich 70. Hier 20 und hier 40, okay? So wird es tatsächlich aussehen. Okay? Aber ich will es nicht, ich werde wieder zurückkehren. Jetzt werde ich hier einfach den Eckenradius verringern. Jetzt kann ich mich im Grunde einfach bewegen. Okay. Wenn ich hier irgendwelche Änderungen an der Form vornehmen möchte, kann ich das von hier aus tun. Okay. Ihr werdet das sehen können. Ich habe auch diese Ecken. Von dort aus kann ich die Größe bis hier beibehalten. Ich hoffe ihr habt es verstanden. Okay, jetzt mache ich hier eine weitere Kiste, genauso. Ich nehme das hier und lasse es ins Auswahlwerkzeug kommen. Wählen Sie von hier aus das aus und senden Sie es rückwärts. Ich habe meine Nachricht hier, ich passe sie einfach in dieses spezielle Feld Ich ändere auch den Eckenradius von hier aus. Okay, ich habe das hier. Ich behalte diese Knöpfe hier unten und stelle auch Kisten dafür auf. Okay. Ich hoffe, ihr könnt sehen, wie es tatsächlich aussieht. Ich mache hier einfach die Plus-Option. Okay? Bei dieser Plus-Option mache ich von hier aus einen Kreis. Okay? Vielleicht lege ich es hier in die Mitte, sodass ein Kreis entsteht. Ich werde euch zeigen, wie das geht. Sobald ich die Ellipsenschaltfläche ausgewählt habe. Damit kann ich den Kreis erstellen oder damit herumspielen. Ich kann die Breite und die Höhe wählen. Aber hier habe ich so etwas, aber wenn ich einen perfekten Kreis oder eine perfekte runde Form haben möchte, kann ich in diesem Fall nur auf Strg+Shift klicken. Jetzt könnt ihr sehen dass es mir einfach einen perfekten Kreis geben wird. Ich kann hier nicht mit der Breite und der Höhe herumspielen. Es wird mir einen proportionalen Kreis geben. Ich hoffe ihr habt das verstanden. Ich wähle das aus und ich werde es löschen. Ich werde die Größe einfach wieder verkleinern. Ich klicke auf Strg+Shift. Jetzt habe ich hier diesen Button. Ich werde diesen Knopf hier platzieren. Jetzt setze ich ein Pluszeichen. Okay. Plus-Zeichen. Oder ich kann einfach etwas anderes wählen. Okay. Lass mich einfach eine Zeile nehmen oder ich nehme nur ein Plus. Ich gehe aus dem Textfeld zur Textoption. Ich werde hierher kommen, um diesen bestimmten Buchstaben von hier aus auszuwählen. Und stell diesen in die Mitte. Okay, ich werde versuchen, diesen in die Mitte zu stellen. Nun, da du dieses besondere Ding hier in der Mitte haben kannst , werde ich es hier so platzieren. Sie können die Plus-Option auch hier sehen. Und jetzt ist es ziemlich sichtbar. Okay, ich werde mehr Boxen machen. Angenommen, ich will diese Box, dann wähle ich sie aus. Ich kann einfach jedes Feld kopieren, wenn ich will. Okay? Vielleicht ist das das rechteckige. Oder ein rechteckiges hier. Und weitere Seite. Dieser. Diese Seite hier. Okay? Vielleicht nehme ich dieses Rechteck von hier. Okay? Was ich jetzt tun werde, ist, diesen zu kopieren, indem ich die Steuerung verwende. Ich kann hierher kommen und auf Steuerung V klicken . Hier können Sie sehen, dass ich eine Box mit derselben Größe habe. Von hier aus werde ich die Skalierung oder Größe dieser Box verringern . Jetzt passe ich das einfach rein. Okay, für meine Knöpfe hier, wie ihr sehen könnt, macht dasselbe. Rückwärts senden oder einfach zuerst diesen Text auswählen. Wenn du ihn rückwärts sendest. Und es gibt andere Möglichkeiten, das zu tun, okay? Wenn ich das Feld einfach entferne, kann ich das auch tun. Okay? Ich kann das hier auswählen. Das ist eine Möglichkeit, dieses Ding zu tun. Nochmals, genauso wie ich hierher komme, vielleicht hierher, rechteckig, ich kopiere diesen. Und ich werde es einfach hier einfügen. Okay, ich habe diese Kiste auch. Okay, damit werde ich einfach umziehen, sofort. Ich werde das hier hin verlegen. Ihr könnt jetzt sehen, dass ich auch diesen Brief habe. Okay, auch von hier aus ich es ändern, wenn ich etwas ändern will kann ich es ändern, wenn ich etwas ändern will, aber ich hoffe ihr habt das verstanden. Okay, ich habe das und ich kann es auch verkleinern, wenn ich es so in die Mitte bringen will. Ja, in Ordnung. Ja, ich habe diese Seite fertig. Okay, ich hoffe ihr habt dieses C hier verstanden. Ich habe euch gezeigt, wie man eine solche Seite tatsächlich machen kann , wie man die Formen verwenden kann und wie man diese Seite in den Vordergrund stellt. Wenn ihr also zwei habt, könnt ihr sie auch gruppieren. Okay, wenn ich diese beiden hier auswähle, kann ich im Grunde wählen, oder wenn ich die Breite ändern möchte , kann ich das tun. Wenn ich rotieren möchte, okay, das kann ich auch tun. Okay. Wenn ich es hier um 5% rotieren will, könnt ihr sehen, dass die Rotation mit beiden stattgefunden hat. Okay? So können wir uns also grundsätzlich gruppieren. Klicken Sie hier mit der rechten Maustaste und hier sehen Sie die Gruppenauswahl. Okay, wenn ich von hier aus nur einen der verschiebe, wird der gesamte Text entfernt. Okay? Das ist der Sinn von Gruppierung, damit ihr euch tatsächlich zwischen Seiten oder einer Schaltfläche bewegen könnt. Okay, ich hoffe, ihr habt diesen Kurs und jetzt könnt ihr anfangen, ihn selbst so zu gestalten In der nächsten Lektion, Kopieren, Einfügen und Striche, erfahren Sie, wie hilfreich das ist und was wir mit diesen Optionen in Adobe XD alles tun können . Ich hoffe, wir sehen uns alle im nächsten Tutorial. Bis dahin, pass auf dich auf und auf Wiedersehen. 6. Kostenlose Symbole zur Verwendung in Projekten und bestehendem UI-Kit: Hallo zusammen und heiße euch alle zu einem weiteren Kapitel von Atop XD willkommen , in dem wir lernen werden, mit UY Ux zu designen Okay, jetzt sind wir bei unserem sechsten Kapitel. Und wir werden lernen, wo ihr alle kostenlose Icons bekommen könnt, die ihr in euren Projekten verwenden könnt während ihr eine neue mobile Anwendung erstellt. Oder du fängst gerade mit dieser Anwendung an. Von wo aus Sie diese Ressourcendatei abrufen können. Okay. Ich werde euch auch sagen, wie ihr bestehende UI-Kits finden könnt, die ihr verwenden könnt, um Symbole oder Farben, Größen und verschiedene Farben zu verwenden. Primäre, sekundäre Hintergrundfarbe, wie Sie Vorschläge von Mitarbeitern annehmen können. Und ich werde euch von einigen Websites erzählen , auf denen ihr das alles kostenlos bekommen könnt und wie ihr diese auch in eurer Arbeit verwenden könnt. Verschwenden wir keine Zeit und beginnen wir hier mit diesem speziellen Kapitel. Wie Sie sehen können, bin ich jetzt wieder in meinem Arbeitsbereich. Und jetzt zeige ich euch, wo ihr einige der kostenlosen Icons herbekommen könnt, die ihr für eure Arbeit verwenden könnt. Okay, als Erstes werde ich euch eine Website zeigen , die als Icon Finder bezeichnet wird. Okay, hier suche ich vielleicht nach dem Homepage-Symbol für Seite eins. Hier könnt ihr sehen, dass ich verschiedene Möglichkeiten habe. Wenn ich eine Illustration oder eine dreitägige Illustration oder irgendeinen Aufkleber haben möchte, kann ich mir das alles von hier aus besorgen. Wenn ihr einfach ein bisschen nach unten scrollt, könnt ihr hier verschiedene Empfehlungen verschiedener Werke sehen . Okay, hier sind ein paar der Aufkleber oder Illustrationen. Sie können dies auch herunterladen und entsprechend verwenden. Komm zu den Icons und suche nach Zuhause. Es wird mir von hier aus einen Vorschlag für ähnliche Home-Icons geben. Okay, hier sind einige der Icons, die geladen sind. Okay, nehmen wir an, ich habe das hier, okay, aber lassen Sie mich Ihnen die Preise, die Prämie und alle Lizenzen erklären. Okay, also hier, erster Stopp. Wenn ihr sowohl die Premium-Produkte als auch die kostenlosen Produkte sehen wollt , könnt ihr hier klicken und das sehen. Okay? Aber für dieses Projekt werde ich von hier aus die kostenlose Schaltfläche auswählen. Okay, jetzt habe ich alle drei Symbole, die sich unter der Option Home-Icons befinden. Okay, hier kann ich alle Stile auswählen. Ich habe kein Problem mit dem Styling. Okay, hier können Sie Action Call alle Lizenzen von hier aus sehen . Im Grunde könnt ihr wählen, wofür ihr verwenden werdet. Okay, hier siehst du keinen Link zurück, Basislizenz. Wenn Sie eine Basislizenz erwerben möchten und diese verwenden möchten, können Sie diese hier erwerben. Ich werde den No-Link zurück wählen. Ich muss ihren Namen oder so etwas nicht erwähnen , das kann ich tun. Und dieser ist für kommerzielle Zwecke, wenn wir ihn für kommerzielle Zwecke verwenden, wie zum Beispiel die Erstellung einer Firmenwebseite oder so. In diesem Fall können Sie diesen geben und sie zeigen Ihnen die Optionen. Okay. Ich will alles umsonst haben, also lass mich herkommen und das hier nehmen. Okay. Hier gibt es zwei grundlegende Möglichkeiten, wie Sie herunterladen können. Kostenloses Symbol. Okay, hier ist das PNG-Formular und das ist das SVG-Formular. Ich hoffe, ihr wisst , was das PNG-Formular ist, aber jetzt werden wir hier sehen, was auch das SVG-Formular ist. Okay, ich werde beide gleichzeitig herunterladen , Seite an Seite. Okay, ich klicke auf 48 Pixel. Zuerst lade ich das PNG herunter. Wie ihr sehen könnt, wird mein PNG heruntergeladen. Jetzt komme ich zur SBG-Option und von SVG lade ich auch das SBG-Symbol herunter Okay. Es gibt auch andere Symbole. In welchem Format? Wenn ich es herunterladen möchte, wenn ich es in einem Illustrator-Format herunterladen möchte, z. B. wenn ich an Auto Illustrator arbeiten werde, dann kann ich dieses hier herunterladen Wenn ich es im ICO-Format herunterladen möchte , kann ich das auch tun Von hier aus können Sie sehen dass Sie auch das CNS-Format verwenden können Dieses Format kann nur verwendet werden , wenn Sie ein Apple-Produkt haben Okay. Jetzt habe ich beide heruntergeladen. Ich zeige es euch von hier aus. Okay, ich gehe von hier aus zu den Downloads. Ich habe zwei. Okay, ich zeige euch , was wir von hier aus machen können. Okay. Der einfachste Weg , Ihre Arbeit hier abzulegen , ist die Dateioption. Okay, von der Datei kommst du zur Importoption. Die Tastenkombination dafür ist Shift plus Strg plus I. Auf Macs oder PC ist es Shift Strg oder Command plus I. Okay, ich importiere das einfach und alle meine Dateien werden in den Downloads heruntergeladen Jo, ich bringe das hier her oder ich wähle das aus Ich werde versuchen, diesen zu importieren. Okay, hier, so gut ihr könnt. Ich habe dieses Bild jetzt hier. Ich importiere noch eins. Von dort aus werde ich gehen und die Eigenschaften von hier aus überprüfen. Das ist die PNG-Datei. Wie ihr sehen könnt, werde ich das vorerst einfach kürzen oder ich werde es löschen. Okay? Ich werde die SVG-Datei herunterladen, okay? Ich werde das SVG-Format von hier herunterladen. Okay, schauen wir uns das von hier aus an. Hier könnt ihr sehen, dass ich hier das SVG-Format habe. Wie du jetzt sehen kannst, habe ich das. Ich werde das Gleiche auch hier in mein X D importieren. Kommt zur Datei, geht zu ihr und sie, diese hier, ihr könnt sehen, dass das das SVG-Format ist. Arbeite hier, okay? Lass mich das Seite an Seite stellen und euch den Unterschied zwischen dem SVG-Format und dem PNG-Format zeigen , okay? Lass mich mehr heranzoomen, okay? Also werde ich jetzt mehr heranzoomen. Hier kannst du sehen, dass das die PNG-Datei ist, die kaputt geht, okay? Und hier habe ich die SVG-Datei, okay? Hier, wenn ich die Größe erhöhe, okay, von hier aus wähle ich das aus oder mache es zu einer Gruppe, okay? Ich kann das einfach von hier aus ändern, okay? Das ist also eine Gruppe. Ich kann es verschieben, okay, ganz nach meinem Wunsch. Und ich kann das auch teilen, wenn ich will. Okay? Das ist die PNG-Datei. Ich kann die Größe von hier aus auch erhöhen, aber die Qualität ist nicht so gut. Okay. Wie ihr von hier aus sehen könnt, kann ich das auch beibehalten, wenn ich es rund machen will. Okay, ich gehe zurück. Ich hoffe, ihr habt den Unterschied zwischen einer SVG-Datei und einer PNG-Datei verstanden , okay? Was ich jetzt tun werde, ist , dass ich diesen wieder löschen möchte . Von hier aus werde ich das löschen und ich werde auch diese PNG-Datei löschen. Okay, von hier aus habe ich Zugriff. Ihr könnt auch auf all diese Symbole zugreifen von. Okay, also werde ich die SVG-Version ab jetzt nur noch hier herunterladen . Okay, ich suche nach einem Bildsymbol. Okay, ich suche nach einem Bild und klicke auf Hier eingeben. Sie können hier sehen, dass ich ein anderes Bildsymbol habe. Angenommen, ich möchte dieses installieren oder dieses herunterladen. Ich werde hier klicken und hier wurde es heruntergeladen. Jetzt komme ich wieder zu meiner XD-Datei hier draußen. Wie Sie sehen können, werde ich diese Zeilen einfach von hier löschen. Okay, ich werde diese Zeile auch löschen. Ich werde das auch löschen , zwei Seiten. Okay, was ich hier habe. Ich lösche das. Jetzt komme ich mit meinem Handwerkzeug. Zoomen Sie jetzt hinein, um dies auszuwählen. Jetzt werde ich von hier aus die SVG-Datei hier ablegen. Okay, ich komme von hier aus wieder zur Importoption. Vielleicht wähle ich diesen aus. Dies ist der erste und ich möchte ihn importieren. Okay, ich habe meine Datei hier oder ich kann einfach von hier wählen. Okay, vielleicht entscheide ich mich für diesen. Nun, wie ihr sehen könnt, kann ich das tatsächlich aufschlüsseln und verschieben. Okay. Nun, wie Sie sehen können, habe ich diese SVG-Datei hier gekauft, aber wie Sie auch von hier aus sehen können, kann ich die Ebenen einzeln auswählen. Angenommen, ich möchte in dem Fall nur den mittleren Teil importieren . Wählen Sie von hier aus nur den Mittelteil aus. Und von hier aus kann ich das im Grunde auswählen und es tatsächlich hier runterbringen. Okay, der Ort, den ich will, das ist eine Art, hier zu arbeiten oder zu arbeiten. Jetzt importiere ich einfach nur diesen. Oder zuerst werde ich die Verknüpfung einfach aufheben. Okay, ich werde es jetzt einfach hier platzieren und versuchen, das in der Mitte zu halten Okay. Jetzt werde ich diesen löschen. Mir bleibt von hier nur noch dieser übrig und ich werde ihn in die Mitte bringen. So könnt ihr im Grunde eine Bildoption einstellen, wenn ihr nichts anderes mögt. Wenn ihr ein anderes Symbol aus einem anderen Frame nehmen wollt, könnt ihr das auch tun. Okay, ich werde dieses SVG von hier herunterladen. Ich werde an derselben Stelle importieren. Okay, komm nochmal zum X D und spiele beim Dateiimport. Danach könnt ihr es von hier importieren. Okay, ich habe diese Datei jetzt hier. Ich kann grundsätzlich auch die Größe oder Form davon ändern , okay? Wie du siehst, kann ich mich von hier aus ändern. Wenn ich nur eine bestimmte Ebene auswählen möchte, kann ich hierher kommen und eine bestimmte Ebene wie diese auswählen. Ich kann einfach 23 Dinge gleichzeitig implementieren. Dies ist eine Möglichkeit, dies zu tun. Ich kann mit Shift herkommen. Wenn ich Shift drücke, kann ich beide auswählen, nur diese inneren Ebenen. Ich kann darauf klicken und sie einfach in Ordnung bringen. Wenn ich nun versuche, ein Symbol von hier zu verschieben , nehme ich an, dass ich dieses auswähle. Ich kann das im Grunde auch verschieben. Okay, das ist eine Möglichkeit, wie wir hier arbeiten können. Ich hoffe, ihr habt bis jetzt verstanden , wie wir euer Icon importieren und verwenden können importieren und verwenden , von wo ihr alle hierher kommen könnt. Kostenlose Icons, die Sie in Ihrer Arbeit verwenden können. Es gibt eine Vielzahl für verschiedene Zwecke, die Sie verwenden können. Wenn ihr etwas Buntes wollt, könnt ihr es auch von hier bekommen, okay? schon in anderen Kursen gezeigt, Ich habe euch schon in anderen Kursen gezeigt, wie ihr einige Ressourcen, Icons aus eurem Dob-Bestand nehmen könnt Icons aus eurem Dob-Bestand Okay? Dafür muss ich zu Plug Ins kommen, und hier kannst du zu Scout gehen. Und unter dem Icon Scout, er auch, habt ihr viele Möglichkeiten. Okay, wenn ich nur die kostenlosen will, dann kann ich hier suchen. Ich suche hier einfach nach Icons. Außerdem haben Sie Animationen, drei D-Illustrationen. Ihr könnt von dort aus suchen. Welche Art von Format benötige ich hier? Ihr könnt auch sehen, ob ich es im PNG- oder SVG-Format haben möchte? Für mich persönlich empfehle ich euch, das SVG-Format zu verwenden. Okay? Weil ich die Röhre benutze und das ist gut, nicht schlecht. Okay. Jetzt werden wir lernen, wie du eine andere Art von kostenlosen UI-Kits bekommen kannst, wenn du versuchst zu üben, okay? Oder kopieren Sie einfach ihre Textilien oder fertigen Textilien und verwenden Sie sie in Ihrer Arbeit, um eine neue Webseite oder eine mobile App zu entwerfen. Okay, fangen wir zuerst damit an. Okay, dafür komme ich wieder zu meinem Chrome. Okay. Ich füge eine neue Webseite hinzu. Von hier aus werde ich nach X DUI Kids suchen. Okay. Also das ist eine Seite namens Xd Guru.com Also von hier aus bekommt ihr vielleicht ein paar der kostenlosen UI-Kits, aber jetzt kriege ich den Gebührenbetrag von hier, damit ihr wirklich auf ihre Gemeinschaften aufpassen könnt und von hier aus könnt ihr ihrer Gruppe beitreten Wenn ihr sie nach etwas fragen wollt, könnt ihr auch euren Kommentar einreichen Okay. Hier sind die wenigen UI-Kits , die Sie sich selbst besorgen können. Vielleicht musst du einen kleinen Betrag für mich bezahlen. Was ich empfehlen werde, ist, dass ihr zuerst mit kostenlosen UY-Kindern anfängt. Und danach, wenn Sie gerade Ihr Arbeitsniveau auf dieser Plattform verbessern, können Sie sich einfach eine Premium-Version besorgen, was eine großartige Investition für Ihre Arbeit sein wird. Hier seht ihr einige der Premium-Kits , die verwendet werden können. Ich gebe einfach kostenlose UI-Kits ein. Okay. Vielleicht nehme ich den und kann versuchen, ihn zu bekommen. Jetzt. Lass mich sehen, was sie mich hier fragen. Bitten sie mich um etwas Derartiges? Hier könnt ihr einige der Kits sehen . Okay. Ihr könnt diese Farbe hier verwenden. Ihr. Ikonen. Jetzt kann ich das in meinem Moodboard speichern. Okay, dafür muss ich ein Konto erstellen. Ich gehe einfach zurück und kann hier kostenlose Testversionen bekommen. Okay? Wie du siehst, kann ich das bei der Arbeit benutzen. Das ist eine Möglichkeit, wie wir das alles bekommen können, okay? Von hier aus könnt ihr das bekommen , denn das sind ein paar der Hands-Webseiten, die ihr benutzen könnt. Okay? Lassen Sie mich jetzt wieder zu meinem E zurückkehren und ich werde versuchen, eine andere Datei zu bekommen. Okay, ich werde versuchen, von hier aus zu importieren, innerhalb des Imports hier. Sie können hier sehen, dass ich bereits eine Datei importiert habe. Vielleicht wurde sie wieder gelöscht, ich muss sie erneut herunterladen, Lippendownload. Ich werde wieder auf eine andere Website gehen, die von The Adors from a Stock ist . Außerdem könnt ihr verschiedene Arten von UI bekommen, okay? Aber dafür müsst ihr etwas bezahlen. Ihr könnt auch die Premium-Version benutzen. Von hier aus könnt ihr hier verschiedene Dinge sehen. Okay. Also das ist eine E-Commerce-Plattform, also lass mich das einfach hier herunterladen. Ihr könnt sehen, dass das heruntergeladen wird. Okay. Dies ist eine XD-Ressource. Ich werde einfach versuchen, das hier in meiner Datei hier zu öffnen. Ich lade das Kit herunter. Okay, lass mich zu meinem X D zurückkehren und die Datei von hier importieren. Okay, ich komme von hier aus zur Importoption. Diese, die E-Commerce-Seite, werde ich importieren, ich glaube nicht von hier. Im Grunde muss ich das stornieren. Ich werde herkommen. Von hier aus kann ich die Datei tatsächlich öffnen, okay. Im Grunde werdet ihr jetzt eine Webseite sehen können , die von jemand anderem entworfen wurde. Von hier aus könnt ihr sehen dass er einige der Seiten erstellt hat, er hat sie auch benannt. Okay? Die Anmeldeseite, die Anmeldeseite und die Seite „ Passwort vergessen“. Hier sind die Startseite und die Kategorien. Okay? Aber die Hauptsache , auf die ich mich konzentrieren werde, sind Komponenten. Okay, lasst mich einfach hineinzoomen und euch zeigen, welche Komponenten er alle verwendet hat. Okay, hier könnt ihr sehen, dass er verschiedene Arten von Symbolen oder Logos verwendet hat. Im Grunde genommen könnt ihr die Logos nehmen, vielleicht etwas ändern oder es so nehmen und tatsächlich die Farbe für mich ändern. Im Moment kann ich von hier aus die Home-Taste nehmen. Was ich tun kann, ist, dass ich die Gruppierung aufheben kann. Jetzt kann ich eins einzeln auswählen und auf Control Plus klicken, was die Basiskopie ist Komm her, komm runter und tippe, oder klicke einfach auf die Option Tempo. Okay, hier könnt ihr sehen, dass ich dieses Ding hier habe. Vielleicht stelle ich das hier irgendwo hin. Denk einfach daran, dass es das Logo ist, okay? Das ist also das Logo der Räuberspielzeugwelt von hier aus. Ihr müsst keine Farben angeben, aber wenn ihr irgendwelche Farben oder so etwas hinzufügen wollt , hier in dieses Symbol Also lasst mich hier einfach noch einen nehmen. Komm auf diese Seite und kontrolliere V. Jetzt werde ich nur die Größe dieser Seite vergrößern. Und nehmen wir an, ich möchte die Farbe ändern. Dann komm von hier aus zur Feldoption. Wähle die Farbe deinem Geschmack und ihr könnt diese Farbe verwenden, okay? Und Sie können von hier aus auch die Deckkraft wählen. Und du kannst auch die Rahmengröße wählen, okay? Vielleicht ändere ich die Breite ein bisschen, also mache ich drei draus. Und ich gebe diesem eine gelbe Farbe. Oder vielleicht etwas in Rot. Okay, etwas in Rot. Und ich ändere auch die Größe, vielleicht sechs. Okay, das ist das Symbol, das ich will. Ich werde die Größe von hier aus verringern. Okay, ich kann die Größe von hier aus verringern. Im Grunde kann ich auch von hier aus darauf doppelklicken, wenn ihr sehen könnt, dass ich die kleinen Knöpfe hier habe, okay? Im Grunde kann ich von hier aus die Größe des Symbols verringern. Ich kann auch grundsätzlich alle Änderungen vornehmen, wenn ich möchte. Okay, hier kannst du verschiedene Punkte sehen. Mit diesen Punkten kann ich mich tatsächlich bewegen und herumspielen, aber hier wird es hässlich aussehen. Dafür werde ich wieder hierher kommen und dieses Loch löschen. Okay, so können wir tatsächlich auch Farben oder Details in unser Symbol einfügen . Als ob wir es auch bearbeiten können nachdem wir es von jemand anderem bekommen haben. Es gibt nur wenige kostenlose oder nützliche Websites, auf denen Sie Ihre UI-Kits sowie verschiedene Arten von Symbolen erhalten können sowie verschiedene Arten von Symbolen , die Sie bei der Entwicklung Ihres Webdesigns oder Ihres Designs für mobile Anwendungen verwenden können . Ich hoffe, wir sehen uns alle in der nächsten Klasse , in der wir etwas über Gruppen lernen werden. Und ich werde mit euch auch über einige der Probleme sprechen , mit denen ihr konfrontiert sein könnte , wenn ihr einfach das Symbol bearbeitet. Okay, bis dahin, kümmere dich um alle und hoffe, wir sehen uns alle in der nächsten Klasse. 7. Gruppieren und Bearbeiten von Symbolen: Hallo zusammen und heiße euch alle zu einem weiteren Tutorial von Adobe X D hier willkommen einem weiteren Tutorial von Adobe X D hier Jetzt sind wir bei Kapitel Nummer sieben und ich werde euch erzählen , wie ihr Gruppieren und Gruppieren machen könnt Und auch in der letzten Klasse, wie ich euch gesagt habe, dass ihr verschiedene Arten von Icons von verschiedenen Orten nehmen könnt von Icons von verschiedenen Wenn ihr diese Icons habt, wie könnt ihr diese Icons grundsätzlich nach euch selbst bearbeiten und was ist die genaueste und beste oder die einzigartige Art, diese Icons nach euren eigenen Vorstellungen zu bearbeiten. Okay, ich werde euch hier in diesem Kurs alles zeigen , also lasst uns keine Zeit verschwenden und lasst uns mit dem Entwerfen beginnen. Wie ihr hier sehen könnt, bin ich wieder an meinem Arbeitsplatz. Jetzt höre ich zuerst auf, ich werde mich um die Icons kümmern . Okay, hier könnt ihr sehen, dass ich auf Seite Nummer eins bin. Sie können sehen, dass ich diese Seite hier habe, einige Symbole, und ich habe sie entsprechend benannt, damit ich nicht verwirrt werde, wenn ich sie vergrößere. Okay, ich werde arbeiten und zeigen, wie man Gruppen entsprechend gruppiert. Okay, zuerst einmal, ihr kennt die grundlegende Verwendung von Gruppierungen, da ich Dinge gruppiert habe während ich auch an anderen Kursen teilgenommen Okay, zuerst komme ich her, um es zu archivieren. Angenommen, ich möchte mehr als eine Seite importieren. In diesem Fall kann ich nur Steuerung auswählen. Und danach kann ich zwei oder drei Bilder gleichzeitig auswählen. Okay, ich werde das auswählen, ich werde all diese drei Symbole hierher importieren. Okay, danach kann ich die von hier importieren. Okay, vielleicht wähle ich hier mit meinem Auswahlwerkzeug aus. Hier. Ihr könnt sehen, dass dies die wenigen Icons sind, die ich gerade in meinem Arbeitsbereich gekauft habe. Jetzt habe ich es auf Seite Nummer zwei importiert. Sehen wir uns nun zunächst das Gruppieren und Aufheben der Gruppierung an. Der einfachste Weg, das herauszufinden, ist, wenn ihr hier den ganzen Frame oder das ganze Icon ausgewählt habt und hier rechten Maustaste geklickt habt, ihr seht die Option, okay, hier kann ich die Gruppierung wieder aufheben, das Ganze auswählen, das Ganze auswählen Wenn ich nun versuche, einen Frame von hier aus zu verschieben, nehmen wir an, wenn ich diesen auswähle, möchte ich diesen jetzt verschieben, okay? Oder wenn ich nur die äußere Ebene auswähle, kann ich diese Ebene unabhängig verschieben. Okay? Hier. Genauso, wenn ich hier klicke und ich auf diesen klicken kann, kann ich mich im Grunde auch bewegen. Okay, lassen Sie mich dafür einfach die Größe erhöhen. Okay? Ich gruppiere das einfach nochmal. Ich werde jetzt versuchen, das zu vergrößern, okay? Wie Sie sehen können, skaliere ich das. Wenn ich es richtig, also proportional, skalieren möchte , kann ich nur hierher kommen, es auswählen und auf Strg+Shift klicken Dann versuche, das Haus hierher zu verlegen. Sie können sehen, dass es proportional zunehmen wird. Okay? Vielleicht mache ich noch ein Bild, das ich schon mal hier hatte. Importiere jetzt und nimm diese Karte hierher. Der Warenkorb wird hier ausgewählt, wie Sie sehen können. Okay, vielleicht lege ich diese Karte irgendwo hier hin. Und jetzt zoome ich einfach rein, damit ihr es besser versteht. Okay, wie Sie sehen können, habe ich diese Karte hier draußen. Wenn ich von hier aus Änderungen vornehmen oder etwas bearbeiten möchte. Zuerst muss ich auf diesen klicken. Und von hier aus könnt ihr sehen, dass ich das Verhältnis ändern kann, aber ich will mehr tun, okay? In diesem Fall doppelklicke ich hier. Du siehst, dass ich die Größe ändern kann, okay? Aber wie ihr sehen könnt, nachdem ich mehrmals geklickt habe, könnt ihr sehen, dass es hier ein paar Optionen gibt, okay? Im Grunde genommen, wenn ich von hier aus eine bestimmte Größe vergrößern oder verkleinern möchte , wenn ich einfach von hier zurückgehe, nehme ich an, ich wähle einfach dieses Ende aus, okay? Ich möchte von hier aus etwas ändern. Okay? Vielleicht lege ich das hier hin. Genauso werde ich diesen Deal hierher bringen. Okay? Also ich kann das machen, das ein bisschen herunterfahren oder einfach. Überprüfe das oder tu es so. Das ist eine andere Art, wie wir hier tatsächlich arbeiten können. Okay, das ist eine Möglichkeit. Wenn ich es nun einzeln auswähle, okay, ich kann hier klicken, oder ich wähle einfach den ganzen Rahmen aus. Ich wähle mit der rechten Maustaste. Und ich werde von hier aus weiter auf Gruppenoption klicken. Okay, ich werde immer wieder klicken, ich werde auf Gruppe klicken. Jetzt habe ich hier keine Gruppenoption mehr. Ihr könnt sehen, dass all diese nicht gruppiert sind, schätze ich. Okay? Ich kann es auch einzeln auswählen. Hier. Jetzt habe ich nicht die Option „Untergruppe“. Wir müssen verstehen, dass das hier nur eine einfache Sache ist. Okay? Was ich tun kann, ist, die Größe hier zu verringern. Vielleicht nimm diesen, wenn ich hier eine Zeile hinzufügen möchte . Okay. Dann füge ich hier eine Zeile wie diese hinzu. Vielleicht von demselben. Ich kopiere von dieser Seite. Okay, vielleicht klicke ich mal auf Alt und bringe eins her. Okay? Und ich werde diesen hier auswählen. Ihr könnt im Grunde sehen, wie es hier tatsächlich aussieht. So wird es tatsächlich aussehen. Ich kann von hier aus auch die Strichgröße ändern. Okay, komm zur Rahmenoption, ändere den Rand. Ich nehme eine Fünf. Dieser auch. Ich klicke hier, Kopieren. Ich füge einfach das Aussehen hier ein. Ich werde einfach das Erscheinungsbild einfügen. So wird mein Icon tatsächlich aussehen. Wenn ich noch etwas hinzufügen möchte, kann ich das tun. Ich hoffe, ihr habt verstanden, wie wir mit den Optionen umgehen können . Okay, im Grunde kann ich von hier aus arbeiten, okay, ich kann die Größe auch von hier aus verringern. Hier könnt ihr euch diese Optionen ansehen. Okay? Also so können wir das im Grunde umgehen. Oder wenn ich die Farbe hier ändern möchte, kann ich die Farbe auch hier ändern. Vielleicht möchte ich hier Rot nehmen, ich möchte Grün nehmen. Okay? Das Feld, die Grenze, okay, hier. So können wir das im Grunde umgehen. Komm wieder zur Grenze, nimm eine gelbe Farbe, wähle eine aus, und das hast du auch hier. Sie können diesem speziellen Symbol auch verschiedene Farben hinzufügen . Wähle die blaue Farbe, vielleicht nehme ich hier ein blaues Symbol. Okay, das ist also mein Einkaufswagen , der ganz anders aussieht als zu der Zeit, als ich diesen heruntergeladen habe. Okay, so können Sie im Grunde genommen mit Ihrem Design umgehen. Angenommen, ich möchte das zusammenfassen oder zu einer Gruppe zusammenfassen. Ich wähle das aus und klicke auf Control. Okay, jetzt kann ich das verschieben. Okay, jetzt kann ich es hierher bewegen. Ich habe das gerade nochmal kopiert . Ich zoome einfach ein bisschen heraus und versuche zu sehen, wie das im Grunde aussieht. Okay, also ich werde diesen. Ich kann das auswählen und jetzt kann ich es hierher verschieben, okay? Oder statt der Kaufoption hier, vielleicht kann ich, wenn ich das einfach lösche, einfach diese einfügen. Ich habe das. Ich werde es hier dazwischen legen. Okay. So können wir also auch arbeiten. Aber jetzt möchte ich dieses Logo nicht hier platzieren. Okay. Dafür lösche ich es. Ich gehe zurück. Ja, ich hoffe ihr habt verstanden, wie ihr euer Icon bearbeiten könnt , egal welches Icon es ist. Okay, also wenn ich zum Icon Finder gehe, gibt es verschiedene Symbole , aus denen du wählen kannst. Okay, hier kann ich beliebige Icons nehmen und ich verwende sie tatsächlich für mich selbst. Okay. Lass mich diesen Sonderpreis runterladen. Und nochmal, komm von hier aus zu meinem X D. Jetzt kann ich tatsächlich Shift Control importieren, okay. Außerdem kann ich Shift Control verwenden. Ich werde zu dieser Seite weitergeleitet und hier könnt ihr sehen, dass ich auch das Verkaufslogo habe. Okay? Das hier, das möchte ich proportional zur Kontrollschicht erweitern Und ich wähle diesen aus, du könntest ihn irgendwo in eine Ecke stellen Okay? Oder irgendwo hier. Also können wir das alles auch umgehen. Okay? Wenn ich darauf klicke kann ich auch die Gruppierung aufheben, okay? Jetzt kann ich mich von hier aus grundsätzlich ändern, ihr könnt es sehen, okay So können wir euch also im Grunde vorstellen , dass ihr sehen könnt , das ist, wie wir das umgehen können . Okay? Aber ich werde diesen vorerst löschen. Ich will das nicht, ich hoffe, ihr habt diesen Kurs zur Verwendung dieser Gruppierung verstanden diesen Kurs zur Verwendung dieser Gruppierung Okay, das ist also eine der wichtigsten Sachen, wie wir all diese Symbole bearbeiten können , die wir bekommen Okay, ich habe euch auch gezeigt, wie man Gruppierungen macht, quasi um die andere Art herum gruppieren kann um die andere Art herum alles von irgendwo anders zu importieren Angenommen, ich habe diese Komponentenseite hier. Ich kann hier einfach hineinzoomen und mich mit meinem Handwerkzeug bewegen. Okay, von hier aus kann ich im Grunde dieses Symbol für dieses Symbol haben wollen. Was ich tun kann, ist, auf Steuerung zu klicken. Gehen Sie jetzt zurück zu dieser Seite und wählen Sie vielleicht diese Seite aus. Und jetzt klicken Sie auf Steuerung V. Okay, hier könnt ihr also sehen, dass ich hier eine Komponente habe, okay? Also diese Komponente kann ich hier platzieren. Oder wenn ich die Größe erhöhen möchte, kann ich die Größe erhöhen. Wenn ich es proportional vergrößern möchte, kann ich es von hier aus tun Okay? So wie das hier. Ich kann diesen grundsätzlich auch vergrößern. Okay? Dieser ist im Grunde eine Komponente und ich kann ihn einfach von hier aus auswählen. Ich kann grundsätzlich die Gruppenoption auswählen , wenn ich diese gruppieren möchte. Aber hier kannst du sehen, dass das aus all diesen Dingen besteht, okay? Von hier aus können Sie sehen, ob ich die Gruppierung der Komponente aufheben möchte Ich kann das hier tun Jetzt siehst du, dass ich dieses anders habe. Dieser Teil ist anders. Ich kann diesen einfach verschieben, ich nehme an, ich will ihn nicht. In diesem Fall kann ich das auswählen und auch dieses löschen. So können wir eine Komponente tatsächlich zerlegen. Komm einfach her und woher weißt du, dass es sich um eine Komponente handelt, im Grunde genommen um etwas Grünes. So wie ich es euch vor einiger Zeit gezeigt habe, wenn ihr es noch einmal sehen wollt, wird der Rand für eine Komponente so aussehen Von hier aus kann ich einfach diese bestimmte Komponente auswählen, hierher kommen und die Gruppierung der Komponente aufheben, oder die Abkürzung dafür ist Für Mac ist es Shift plus Command Plus. Okay, ich lösche. Okay, ich lösche das auch. Hier könnt ihr knutschen. Ich wähle das aus, lege das hier hin. Und diesen werde ich löschen. Okay. Nun, wenn ich das hier auch bearbeiten möchte, kann ich das auch bearbeiten. Okay? Also kann ich einfach hineinzoomen. Je besser ich die Ansicht habe, desto besser kann ich das machen. Okay, von hier aus wähle ich vielleicht das hier. Ich nehme das. Komm her. Ja, wähle diesen. Komm nochmal her. Und jetzt könnt ihr so etwas machen. Okay. Hier, wo ihr so etwas machen wollt, könnt ihr es auch machen. Okay? Vielleicht ist das eine Art, die Dinge zu erledigen, wenn ich von hier aus eine verringere. Ich hoffe, ihr habt diesen Kurs verstanden , wie man hier umgeht, okay? So können Sie Ihr Logo tatsächlich erstellen und Sie können es entsprechend machen. Wenn ihr diese Optionen nutzen wollt, könnt ihr diese Optionen jederzeit für euch selbst verwenden. Darauf habe ich gemacht. Okay, lass mich einfach zurück. Wenn ich es irgendwo in der Mitte platzieren möchte , kann ich das auch tun. Okay, aber vorerst lösche ich auch dieses Symbol. Das ist also eine Möglichkeit, das zu tun. Okay, wir sehen uns alle im nächsten Kurs, wo wir lernen werden , wie Sie mit Ihrem Prototyping beginnen Okay, Prototyping ist im Grunde so, dass ich dieses Symbol mit dieser Seite verbinde oder hier, wenn ich auf dieses Symbol klicke, gehe ich zu einigen anderen Seiten hier Da ich vier Seiten habe, wie Sie sehen können, habe ich erst auf der ersten mit der Arbeit hier angefangen , okay Also werden wir auch das Prototyping durchführen, damit ihr versteht, wie ihr euer IBX-Design macht Okay. Bis dahin, kümmere dich um alle und wir sehen uns alle in der nächsten Klasse. 8. Prototyping in Adobe Xd: Hallo zusammen und willkommen zu einem weiteren Kapitel des Adobe XD-Tutorials, in dem wir etwas über UX-Design für Benutzeroberflächen lernen Jetzt sind wir bei unserem achten Kapitel und werden etwas über Prototyping in Adobe XD lernen Beim Prototyping werden im Grunde Seiten mit Seiten verbunden , in denen beschrieben wird, wie das Erscheinungsbild aussehen wird Okay, hier in diesem Kurs werden wir etwas über das Prototyping lernen Und ich werde euch auch verschiedene Arten zeigen, wie Interaktionen zwischen euren Bildern platzieren Und ich werde euch auch zeigen, welche Animationen ihr damit machen könnt. Okay, also lasst uns keine Zeit verschwenden und lasst uns mit diesem Kapitel hier beginnen. Also hier könnt ihr sehen, dass ich in meinem Arbeitsbereich bin und ich habe hier vier Seiten. Okay, ich habe euch gezeigt, wie man die Seiten macht, also habe ich auch diese speziellen Rahmen hier gemacht, okay. Also ihr könnt sehen, ob ich As will, okay, jetzt sind sie alle aufeinander abgestimmt. Also hier könnt ihr sehen, dass ich vier Frames habe, aber was ich machen will, ist Prototyping, ich möchte diese Seiten miteinander verbinden Okay, lassen Sie uns zunächst versuchen zu verstehen, wie wir damit beginnen können oder wie wir mit dem Prototyping beginnen können Also hier in diesem speziellen Panel könnt ihr neben der Designoption sehen, ich die Prototyp-Option habe und die Tastenkombination dafür ist Alt plus zwei auf unserer Tastatur Ich werde auf diese Prototyp-Seite kommen. Wie Sie sehen können, sehe ich, wenn ich auf einer Prototyp-Seite bin und auf ein beliebiges Symbol klicke, direkt daneben ein solches Schild. Okay. Wenn ich auf die Startseite klicke, habe ich diese auch hier. Okay? Aber genauso, wenn ich zur Designdatei gehe und hier klicke, kannst du sehen, dass ich hier im Design-Panel nicht dieselbe Option zur Verfügung habe . Also gehe ich zur Prototyp-Option. Schon wieder. Hier kann ich mich mit Seiten verbinden. Okay, vielleicht möchte ich diese spezielle Homepage mit dieser verbinden . Okay? Diese Seite hier. Diese besondere Seite. Ich möchte es mit dieser und diese Seite mit der letzten verbinden . Okay? Hier könnt ihr sehen, dass ich das alles hier habe. Wenn ich euch ein Beispiel zeige, wie es aussehen wird. Also gehe ich zum Dekstop-Vorschaufenster , wenn ich eine Vorschau anzeigen möchte, aber ich gehe von hier aus zur Gerätevorschau Okay, wie ihr sehen könnt, habe ich den Rahmen hier. Okay, wenn ich einfach darauf klicke, bin ich auf meiner zweiten Seite. Wenn ich jetzt hier klicke, könnt ihr sehen, dass das die dritte Seite ist. Dies ist die letzte Seite da ich etwas Bestimmtes spezifiziert habe. Das ist also die Vorschau , die ich hier haben werde. Okay, hier könnt ihr sehen, dass ich nicht zurück kann. Und eine andere Möglichkeit, was Sie tun können, ist von Ihrer Tastatur aus, Sie können einfach auf die Schaltfläche klicken, die Pfeiltasten. Von hier aus klicke ich auf den Linkspfeil. Und ich kann hier auf den Rechtspfeil klicken, wie ihr sehen könnt. Aber das ist nur die Grundlage dessen, was Sie hier tun können, okay? Nur das Grundlegende. Wenn ich hierher komme, wenn ich darauf klicke, lösche ich das. Ich werde das auch löschen. Ich werde das auch löschen. Okay, ich hoffe ihr habt eine Vorstellung davon , wie das im Grunde ist, ich habe diese Nachricht auch gelöscht. Okay, aber ich möchte das nur löschen. Okay? Nicht die Botschaft hier. Ich komme her. So können wir anfangen, hier zu arbeiten. Okay, ich hoffe, ihr habt eine kurze Vorstellung. Jetzt erzähle ich euch von einigen der einfachen Möglichkeiten, euer Prototyping durchzuführen, okay, sobald ich hier bin. Jetzt möchte ich auswählen, dass ich diese bestimmte Option Nach auswählen möchte diese bestimmte Option Nach auswählen Und ich möchte direkt zur Checkout-Seite gehen , okay? Wenn ich jetzt auf diese klicke und diese Seite mit dieser verbinde, okay? Mit der Checkout-Seite von hier. Wie ihr unter der Option Mehr erfahren sehen könnt, werde ich diese Seite mit dieser hier verbinden. Wie ihr sehen könnt, habe ich hier die Home-Taste. Ich verbinde die Seite. Diese, vielleicht diese Homepage. Ich verbinde es mit dem ersten. Wie Sie sehen können, habe ich dieses Symbol hier. Was ich tun kann, ist, wenn ich dieselbe Funktion auch auf eine Seite stellen möchte, kopiere ich diese einfach von hier. Lösche das, komm her, ich füge das hier ein. Sie können sehen, dass das gleiche Feature auch hier eingefügt wird, sobald ich es eingefügt habe. Okay? Wie ihr seht, die gleiche Weise, wenn ich herkomme, okay, in diesem speziellen Button und ich will einfach alles abgeben, was ich auch machen kann. Okay, ich hoffe, ihr habt die Grundlagen verstanden wie ihr hier auf dieser Seite arbeiten könnt. Okay, klar, das hier auch hin, ich komme auch her, ich werde, ich werde, , ich werde darauf klicken, ich werde Strg C drücken und ich werde Strg V hier einfügen. Okay, also du kannst die Funktion auch hier sehen. Okay, lassen Sie mich jetzt einfach von hier aus zur Vorschau-Option gehen. Okay, hier habe ich nur diesen Button ausgewählt, okay? Und wenn ich jetzt auf die Option Von klicke, können Sie hier sehen, dass ich auf meine Checkout-Seite weitergeleitet werde. Wenn ich wieder zu meiner Startseite zurückkehren möchte, muss ich nur auf dieses Symbol oben klicken. Dies ist eine Möglichkeit, dies zu tun. Und wenn ich mich jetzt einfach bewege und von hier zur Startseite gehen möchte, kommen wir zu dieser Seite hier. Von hier aus kann ich auch zur Startseite zurückkehren, da ich es einfach kopieren und einfügen muss. Das ist dieselbe Funktion, wenn wir so viele Seiten haben und Dinge tun müssen, wie ich in gewisser Weise Prototypen mache oder Prototypen mache, als ob ich 500, 600 Frames habe In diesem Fall kann ich diese Methode verwenden , die sehr hilfreich ist Sehen wir uns jetzt noch einmal die Vorschau an. Wenn ich hier auf die Option Weitere Informationen klicke, können Sie sehen, dass ich hier zur Produktseite wechseln kann. Okay, ich klicke darauf, ich komme her. Ich wähle diese Option inzwischen aus. Und dieser bringt mich zur letzten Seite. Okay, hier habe ich das Ganze und ich hoffe, ihr habt verstanden, wie dieses Prototyping funktioniert Okay, ich hoffe, bis dahin war es für euch alle klar. Versuchen wir nun, die Animation zu sehen. Was für Animationen wir beim Prototyping einfügen können. Okay, deine Seite springt einfach rein oder sie springt dafür Wie ihr sehen könnt, habe ich ein Menü hier auf meinem Bedienfeld geöffnet, so wie ich all diese Dinge hier habe Vor allem, wenn ich klicke, ihr sehen könnt, wo alles verbunden ist Wenn ich hier auf diese Seite komme, könnt ihr sehen, wenn ich zur Checkout-Seite hier komme, könnt ihr all diese Linien oder Verbindungen sehen. Okay, hier könnt ihr das tatsächlich von hier aus erledigen. Wenn Sie weitere hinzufügen möchten, können Sie dies auch tun. Okay, wenn ich tippe, kann ich es überall hinstellen, wo ich will. Okay, ich kann die Platzierung ändern. Versuchen wir es jetzt zu verstehen. Nehmen wir an, mit diesem Knopf mehr kommt er hierher, aber ich möchte, dass er in einem bestimmten Stil kommt, okay? Dafür werde ich vielleicht diesen auswählen, okay? Diese besondere Linie hier, du kannst den Übergangsmodus von hier aus sehen, okay? Hier kannst du verschiedene Arten von Übergängen sehen, okay, wenn ich auf Auto Animate klicke Und wo ist das Ziel, okay, von hier aus. Und wenn ihr es nicht von hier aus auswählen oder verlinken wollt, seid ihr hier, okay, hier. Wie ihr sehen könnt, könnt ihr, sobald ich hier auf meiner Startseite bin, von hier aus sehen, wohin die Seite verlinkt werden soll , die Produktseite, die Checkout-Seite oder die Seite mit der aufgegebenen Bestellung. Außerdem können wir das machen. Wir haben hier eine Option für Easure Out, Raus, Schnappwind. Ich werde euch das alles zeigen, okay? Dies ist eine weitere Option, die als Trigger bezeichnet wird. Okay? Der Auslöser ist im Grunde die Art und Weise, wie sich Ihre App bewegt, okay? Angenommen, ich habe diese Schaltfläche hier ausgewählt. Wenn ich Ziehen auswähle, muss ich die Taste drücken Und dann werde ich nur zur nächsten Seite oder zum nächsten Ort weitergeleitet, den ich ausgewählt habe Okay, ich wähle hier. Lass mich euch ein Beispiel von hier zeigen. Okay, lassen Sie mich von hier aus die Größe verringern. Lass mich das in einer Ecke aufbewahren. Okay, hier habe ich die automatische Animation ausgewählt. Und tippe hier. Wenn ich einfach darauf klicke, wird es langsam ruhiger Okay. Ich kann auch die Dauer wählen, wie lange ich die Animation haben möchte. Okay, nehmen wir an, ich will 2 Sekunden, also gebe ich ihr 2 Sekunden. Öffnen Sie die Vorschau erneut und klicken Sie auf Weitere Informationen. So wird es im Grunde aussehen, okay? So wird es nachlassen. Wenn ich diesen hier auswählen möchte, nehme ich an, jetzt dieses Futter, okay, oder diese Verbindung hier, in diesem Fall hier, Sie können sehen, dass es mit der Checkout-Seite verknüpft ist. Und ich werde von hier aus die Option „ Auflösen“ wählen. Und ich werde auch den Zeitpunkt wählen, okay? Ich nehme mir 0,5 Sekunden Zeit. Ich will einen Übergang, okay? Ich möchte währenddessen keinerlei Audio- oder Sprachwiedergabe anbieten. Wenn ich das alles auswähle, muss ich eine Audiodatei auswählen. Und das alles kann ich auch tun. Denn an vielen Stellen, die ihr vielleicht gesehen habt, wenn ihr zum Beispiel auf die nächste Seite geht, werden sie euch sagen, sobald ihr auf eine Schaltfläche klickt. Sobald sie auf diese Seite gehen, sagen sie Seite Nummer zwei oder Willkommen auf der Bestellseite. Willkommen bei Amazon. Willkommen im Tesla, so ähnlich. Okay, das können wir Jungs auch. Okay, von hier aus werde ich kommen und zur automatischen Animationsoption wechseln Von hier aus werde ich mich für diese Option entscheiden, anstatt mich zu entspannen. Jetzt wähle ich aus. Okay, sehen wir uns die Vorschau noch einmal an. Ab hier wird es so kommen. Okay, jetzt schauen wir uns auch andere Optionen an. Okay, das habe ich gemacht. Kommen wir nun zu dieser Option. Okay, es wird mich zu dieser Seite führen. Jetzt werde ich diesen animieren. Ich werde euch die ganze Animation zeigen. Okay, von hier aus können Sie die Option Auflösen auswählen. Aus heiterem Himmel wähle ich vielleicht Snap. Okay, sehen wir uns die Vorschau noch einmal an. Hier kannst du mit einem Schnappschuss sehen, ich bin wieder am selben Ort, okay? Anstatt aufzulösen, wenn ich hier zur Option Slide Right komme , wenn ich auf Bounce klicke, okay, jetzt schauen wir uns die Vorschau von hier Hier kannst du sehen, dass das der Bounce ist. Ich kann das Timing von hier aus wählen. Nehmen wir an, ich möchte 1 Sekunde, dann kann ich hier klicken. Und jetzt klicken Sie hier auf diese Option oder gehen Sie zur Vorschau-Schaltfläche. Klicken Sie jetzt, Sie können sehen wie meine Seite oder die Animation aussieht, es ist anders. Okay, ich hoffe, ihr habt verstanden, was Trigger ist. Okay, ich zeige euch einfach ein Beispiel für Drag. Angenommen, ich habe mich für diesen entschieden, vielleicht auch nicht. Dadurch wird dieser ausgewählt. Oder ich gehe wieder hierher zurück. Ja, ich werde einen wählen. Jetzt wähle ich statt irgendwas und ich werde die Lockerungsoption wählen Von hier aus geht es rein und raus. Jetzt gehe ich zur Vorschau-Option. Wenn ich jetzt ziehe, kann ich zur nächsten Seite wechseln. Okay, aber ich habe hier nicht dasselbe angewendet. Okay, wenn ich herkomme. Also das ist eine Möglichkeit, wie ich das Ding schleppen kann. Okay. Auch hier wähle ich Drag. Und jetzt bin ich auf dieser Seite. Wenn ich es mit der Maus ziehe. Okay. Also hier in diesem Fall, vielleicht habe ich hier einen Fehler gemacht, denn das ist ganz, ja, ich hoffe ihr habt es verstanden. Wenn ich einfach weiterziehen muss und wenn ich auf diese Seite komme und wenn ich diese hier gebe, setze ich Drag, okay, schauen wir uns die Vorschau an. Okay, ich ziehe es hierher. Komm zurück, zieh, zieh. So können wir im Grunde auch diese Arbeit erledigen. Okay, ich werde das löschen. Ich werde diesen auch löschen. Okay, ich hoffe ihr habt bis dahin verstanden, was wir alles tun können. Ich hoffe, ihr habt den Optionstrigger verstanden, den Typ, also wie ich es zum Animieren machen möchte oder ob ich ein Overlay haben möchte Wenn ich eine Wiedergabe oder eine Audiowiedergabe durchführen möchte, gibt es manchmal ein Geräusch, sobald Sie auf etwas klicken Wenn ich das hinzufügen möchte, kann ich auf Audiowiedergabe klicken. Wenn ich etwas sagen möchte, kann ich auf die Sprachwiedergabe klicken. Okay? In diesem Fall muss ich die Audiodatei hier hochladen. Okay? Das ist ungefähr der Typ, okay? Und das ist das Ziel. Wo soll meine Seite enden? Okay. Dies ist eine weitere Option, die als Scrollen bezeichnet wird Okay. Wenn ich beim Scrollen die Position korrigieren möchte, können wir diese einfach markieren Okay. Ich habe auch diese Lockerungsoptionen. Wenn ich keine möchte, kann ich einfach keine auswählen, nichts wird angewendet, okay Dies ist eine Möglichkeit, wie wir hier im Grunde unser Prototyping durchführen können hier im Grunde unser Prototyping durchführen Wenn ich das hinzufügen möchte, okay, füge dieses hinzu, dann kann ich quasi jede Interaktion hinzufügen Wenn ich etwas hinzufügen möchte, kann ich es hinzufügen indem ich von hier aus auf die Plus-Option klicke. Ich hoffe ihr habt verstanden, dass es wirklich so viele Möglichkeiten gibt hier in der ganzen Anwendung wirklich so viele Möglichkeiten gibt, eine einfache Sache zu tun, besonders in X D, das ist sehr nützlich und ziemlich gesund. Ich hoffe, ihr habt verstanden, wie ihr mit dem Prototyping beginnen könnt Wie Sie gleichzeitig auch Prototyp-Animationen erstellen können. alle auf euch auf. In der nächsten Lektion werden wir etwas über Animationen in AutoBXD lernen Okay? Wir werden mehr über Animation lernen. Wie Sie animieren können, wie jedes Objekt, nehmen wir an, dass dieses Objekt hier ist. Sobald ich auf diese Seite komme, wird es einfach irgendwo abgelegt, oder es wird einfach hier erscheinen, oder diese spezielle Schaltfläche, es wird einfach angezeigt werden wir auch etwas über Animation lernen Nach diesem speziellen Kurs werden wir auch etwas über Animation lernen. Tag für Tag, wenn wir weiter in die Lektion einsteigen, wird die Klasse immer aufregender und ich hoffe ihr versteht diesen Kurs auch. Bis dahin seid vorsichtig und hoffe, euch alle im nächsten Kapitel zu sehen. 9. Animation in Adobe Xd: Hallo Leute und willkommen zu einem weiteren Kapitel des Adobe X-Tutorials, in dem wir etwas über UX-Design von Benutzeroberflächen lernen. Jetzt sind wir bei unserem neunten Kapitel und werden lernen, wie Sie Animationen in dieser speziellen Anwendung hinzufügen können . In der letzten Klasse habe ich euch von Prototyping erzählt. Und jetzt werde ich euch im selben Kriegsmodus zeigen, wie ihr eure Animation machen könnt Wie ein bestimmtes Objekt von selbst auf Ihrem Bildschirm auftauchen kann . Sobald Sie einfach auf diese bestimmte Seite gegangen sind, zeige ich Ihnen, wie Sie ein bestimmtes Objekt oder ich aus dem Feld oder sogar einer Schaltfläche auswählen und es in Ihrem Stil in Ihren Rahmen animieren können und es in Ihrem Stil in Ihren Rahmen animieren Okay, lassen Sie uns mit diesem speziellen Kapitel hier beginnen Nun, wie ihr sehen könnt, bin ich hier im selben Arbeitsbereich. Okay? In der letzten Klasse habe ich euch etwas über Prototyping gezeigt Okay, hier habe ich diese Seite mit meinem Handwerkzeug. Was ich tun werde, ist, einfach ein bisschen herauszuzoomen. Okay, mit meinem Handwerkzeug werde ich mich von hier aus bewegen. Was ich jetzt machen werde , ist zuerst aufzuhören. Wenn ich eine Animation machen möchte, werde ich das hier tun, da Sie dieses Symbol genau hier sehen können. Ich möchte, dass dieses Symbol einfach so auftaucht. Wenn ich zuerst zu dieser Seite komme, muss ich diese Seite von hier aus duplizieren. Okay? Es gibt viele Möglichkeiten zu duplizieren, wobei alle zwei dupliziert werden können, ansonsten kann ich einfach diese kopieren, okay? Ich kopiere das und füge es hier mit Steuerung V ein. Okay? Hier kannst du sehen, dass ich das habe. Lass mich hier einfach auf beide Seiten zoomen, okay? Jetzt möchte ich, dass dieses Symbol hier ist. Ich möchte, dass dieses Symbol hierher kommt. Okay, das ist eine Möglichkeit, wie wir das machen können. Zuerst müssen wir sicherstellen , dass wir, sobald ich auf dieser Seite bin, zuerst dieses Symbol auswählen. Hier heißt es Pfeilsymbol. Okay. Jetzt komme ich nochmal auf diese Seite hier. Okay? Auf dieser Seite werde ich auswählen, okay. Dieser Name ist auch ein Pfeilsymbol. Diese beiden Namen sollten ähnlich sein , damit dies möglich ist oder damit es funktioniert. Okay? Das ist die aufgegebene Bestellung, Seite eins. Ich nenne das mal zwei. Okay, ich habe diese beiden Seiten hier. Ich möchte , dass meine Animation hier stattfindet. Okay. Zuerst werde ich diese Seite einfach hier belassen. Ich werde diesen hier mit diesem verbinden. Okay, hier in dieser Aktionsoption. Standardmäßig bleibt es immer ein Übergang. Aber ich werde nur diese automatische Animation ändern , die vorher da war Ich kann auch die Dauer wählen , wie lang meine Animation sein soll Okay, lassen Sie mich hier 1,2 Sekunden Zeit nehmen. Und welche Art von Lockerung möchte ich? Okay, ich möchte, dass es sich hier entspannt. Okay, versuchen wir jetzt, die Vorschau von hier aus zu sehen. Okay, da ich auf dieser Seite bin wenn ich auf dieses ganze Symbol klicke, könnt ihr sehen, dass es sich hierher bewegt, okay? Das ist eine Möglichkeit, das zu tun, okay? Wenn ich wieder zurückgehe, wenn ich hier klicke, Leute, geht es einfach weiter auf diesen Pfad. Okay. Ich hoffe ihr habt bis jetzt verstanden, wie ihr mit eurer Animation beginnen könnt. Aber im Grunde will ich, dass ich nicht hier klicken muss. Angenommen, ich bin auf meiner Seite. Okay, ich werde einfach zu dieser letzten Seite hier gehen. Ich will nicht, dass meine Seite so aussieht, ich muss diese nicht drücken, um diese Animation hier drüben zu bekommen. Okay, was ich tun werde, ist jetzt, also lass uns jetzt damit weitermachen. Okay, dafür müssen wir sicherstellen , dass wir uns hier nicht mit diesem Symbol verbinden. Okay, wie das Symbol mit der Seite. Wenn ich dann herkomme, okay, ich kann nur diese Art von Vorschau machen. Wenn ich darauf klicke, kommt es hierher, es wird so aussehen. Aber was ich will, ich möchte automatisch animieren, okay? In diesem Käfig muss ich die ganze Seite auswählen. Sobald ich die ganze Seite ausgewählt habe, verschiebe ich diese hier her, okay? Sobald ich diese Seite mit dieser ausgewählt habe, wenn ich zur Trigger-Option komme, Leute. Ich habe auch die Option „ Zeit“. Okay, aber ich nehme an, ich lösche das hier. Ich lösche das hier. Lassen Sie mich jetzt eine Verbindung zu dieser Seite herstellen. Lassen Sie uns versuchen, hier in der Trigger-Option zu sehen, ich habe keine Zeitoption, aber um automatisch zu animieren, muss ich das tun. Ich werde das löschen Ich wähle diese Bestellung auf der ersten Seite aus. Wählen Sie diese Seite mit dieser Seite von hier aus. Sobald ich hierher komme, kann ich die Zeitoption wählen. Okay, wie viele Sekunden Verzögerung möchte ich? Okay, wie Sie sehen können, werde ich hier nichts verzögern. Und ich habe die Option für automatische Animationen. Jetzt habe ich hier die Dauer von 0,3 Sekunden, die ich auf 0,5 ändere. Okay, ich wähle hier 0,5. Ich klicke auf Enter. Kommen Sie jetzt zu dieser speziellen Seite hier und lassen Sie uns jetzt die Vorschau von hier aus sehen. Okay, jetzt gehen wir zurück. Ja, ich komme auf diese Seite. Ich werde versuchen, die Vorschau zu sehen. Wenn ich hier auf die Schaltfläche Von klicke, kannst du sehen, dass es hier nur automatisch animiert wird Okay, wenn ich noch einmal mit der Option „Auschecken“ zurückgehe, klicke ich hier und Sie können die automatische Animation von hier aus sehen Ich hoffe, ihr habt diesen speziellen Teil von hier aus verstanden. Mit diesem kann ich tatsächlich wählen, wie das aussehen soll, wie ich es möchte? Das kann ich auch machen. Komm auf diese Seite, sieh dir die Vorschau an. Klicken Sie jetzt auf. Hier siehst du die Option hier. Okay, auf derselben Seite kann ich vielleicht wollen, dass diese Seite einfach eingeblendet wird. Okay, jetzt möchte ich, dass dieses Symbol eingeblendet wird. Ich komme her, gehe zur Designoption. Von hier aus könnt ihr in der Designoption sehen, dass meine Opazität hier 100 ist Was ich tun werde, ist, dass ich meine Opazität ändern kann. So etwas, so wie das, ich kann tatsächlich arbeiten Okay, jetzt schauen wir uns die Vorschau von hier an. Okay, komm auf diese Seite hier. Sehen Sie sich die Vorschau an. Okay, ich klicke darauf. So wird es im Grunde aussehen. Okay, hier kann ich die Deckkraft ändern. Oder wenn ich nur diesen drehen möchte, kann ich diesen auch drehen Okay? Angenommen, ich möchte das rotieren lassen, etwa so. Von hier aus. Außerdem kann ich die Rotation machen. Okay, hier habe ich das. Lassen Sie uns jetzt versuchen, die Vorschau von hier aus zu sehen, okay? Klicken Sie auf die Option Nach So wird es angezeigt, okay? Wenn ich möchte, dass es langsam wird, muss ich die Prototyp-Option von hier aus verwalten . Okay? Aber von hier aus werde ich einfach weitermachen. Jetzt habe ich das, schauen wir uns die Vorschau noch einmal an. Von hier aus hoffe ich, dass ihr verstanden habt, wie ihr von hier aus eure intelligenten Animationen machen könnt. Okay, wenn ich nun auch diese Symbole intelligent animieren möchte, nehme ich an, ich möchte, dass dieses spezielle Symbol hier unten angezeigt Insbesondere diese Seite werde ich hier behalten. Jetzt kann ich im Grunde von hier aus wählen. Nehmen wir an, ich gehe mit dieser Seite noch einmal zum Prototyp, hier wähle ich das aus. Okay, von hier aus kann ich tatsächlich wählen, vielleicht erstelle ich hier einen weiteren Prototyp. Sehen wir uns die Vorschau von hier an. Okay, klicken Sie auf Inzwischen, so wird es herunterfallen. Okay, so können wir das machen. Oder wenn ich hier eine Bounce-Option angeben möchte, kann ich das auch tun Angenommen, ich habe diesen hier ausgewählt. Ich habe diesen Keyframe hier. Ich habe die Interaktionen. Ich komme her und tippe das ein. Ich tippe, komme hier zur automatischen Animation. Von hier aus können Sie die Bounce-Option wählen. Gleichzeitig kann ich hier drei Interaktionen platzieren hier drei Interaktionen Okay? So können wir im Grunde hinzufügen. Wenn ich noch einen hinzufügen möchte, kann ich das auch von hier aus tun. Derzeit habe ich zwei. Okay, hier sind ein paar der Aktionen. Wenn ich eine automatische Wiedergabe hinzufügen möchte ich euch bereits erzählt habe. Okay, jetzt versuchen wir, von hier aus eine Vorschau zu sehen. Klicken Sie jetzt auf. Hier kannst du sehen, dass das hier gerade herunterfällt, okay? Oder nehmen wir an, ich möchte, dass all diese drei Symbole einfach hier auf meinem Bildschirm erscheinen. In diesem Fall werde ich wieder zur Designoption zurückkehren. Das, bring das her. Jetzt werde ich das hier, hier und hier aus dem Bildschirm nehmen . Lassen Sie uns jetzt versuchen, eine Vorschau zu sehen. So wird es aussehen. Das können wir auch tun. Ich hoffe, ihr habt diese Klasse verstanden , wie man eure intelligenten Animationen macht. Okay, jetzt werde ich einen anderen Weg zeigen , wie Sie in der Animation tatsächlich vorankommen können. Okay, dafür werde ich dieses spezielle Symbol hier auswählen. Okay. Da ich bereits in meiner Designoption bin, ändere ich hier die Deckkraft gleich hundert. Aber hier in diesem möchte ich, dass das verschwindet. Okay, ich werde das Symbol hier verkleinern. Jetzt möchte ich diese Seite kopieren. Okay, lassen Sie mich vorher einfach raus, ich kopiere diese Seite einfach hierher. Ich habe diese Seite hier. Okay, wie Sie sehen können, wird sie einfach verblassen. Also lasst mich euch zeigen und eine Vorschau davon sehen, wie es verblassen wird. Okay, so wird es also ausgeblendet. Aber ich kann hier grundsätzlich mit dem Timing arbeiten. Okay, vielleicht werde ich die Zeit auf 1 Sekunde erhöhen. Versuchen wir nun, die Vorschau zu sehen. Komm her. Oder bewege dich einfach mit meiner Hand, um diesen zu sehen. Klicken Sie darauf und so wird es aussehen. Es sieht ziemlich schnell aus. Ich komme wieder her, tippe darauf. Dieser ist 1 Sekunde. Ich werde es hier nur zwei, 2 Sekunden schaffen. Ja, der ist in Ordnung. Ich schätze, so wird es hier aussehen. Komm her und wähle das aus. Löschen Sie jetzt einfach einen von hier. Okay, ich lösche diesen von hier. Lass uns jetzt sehen. Okay, hier habe ich diese Sekunde, wähle diese Seite aus, sieh dir die Vorschau an. Klickt hier, ihr könnt sehen, wie es so verschwindet. Okay, jetzt, wo ich hier eine weitere Seite erstellt habe, okay, werde ich jetzt ein Symbol hierher importieren. Okay, aus der Datei gehe ich zur Importoption. In der Importoption könnt ihr sehen, dass ich SVG habe. Hier ist mein Symbol, wie ihr hier sehen könnt. Okay, also werde ich von hier auswählen. Ich werde auch die Größe dieses bestimmten Symbols verringern. Gehen Sie von hier aus erneut zur Designoption. Von hier. Grundsätzlich können Sie mit der Control-Shift-Taste und mit der Maus die Größe einfach nach Ihren Wünschen verringern. Okay, jetzt habe ich dieses Zeichen hier. Was passieren wird, ist, dass ich dieses hier habe, sobald es hier ist, dieses Bild diesem speziellen Bildschirm verschwinden wird. Dieser wird einfach hier erscheinen, sobald das erledigt ist. Okay, lass mich einfach eine Verbindung herstellen, zur Prototyping-Option kommen, diesen platzieren und diese Seite damit verbinden Hier kannst du den Intrigger sehen. Sie haben auch die Zeit. Okay, vielleicht werde ich hier eine Sekunde warten. Und ich werde hier auf Enter klicken. Jetzt werde ich versuchen, die Vorschau von hier aus zu sehen. Okay, jetzt schauen wir uns die Vorschau an, wie ich es bereits gesagt habe. Okay, komm her auf diese Seite. Klickt hier, ihr werdet die Animation hier sehen können. Okay? Oder fangen wir einfach von vorne an, okay, wählen Sie diese Seite hier aus, um zur Option Nach zu gelangen. Und zu dieser Checkout-Seite, sobald ich mit dem Kauf fertig bin. Hier kannst du die Animation sehen. Okay, hier können Sie sehen, dass meine Bestellung eingegangen ist, und hier habe ich die Animation gemacht. Ich hoffe, ihr habt verstanden, wie ihr eure Arbeit hier auf fortgeschrittenem Niveau animieren könnt eure Arbeit hier auf fortgeschrittenem Niveau animieren Wie ihr sehen könnt, habe ich hier drei Kunsttafeln. Okay. Du kannst 20 haben, du kannst 15 haben. Wenn ihr so viele Animationen habt, könnt ihr das mit dieser speziellen Option machen. Okay? Also ich hoffe, ihr habt diese Animation jetzt im Detail verstanden. Okay, ich werde euch hier ein paar Dinge über die Probleme erzählen , auf die ihr stoßen könntet , wenn ihr mit ArtBoard arbeitet Okay, ich komme her, gehe zu Artboard. Ich möchte von hier aus eine Zeichenfläche auswählen oder erstellen. Ich nehme an, ich habe das. Ich werde das nur mit Al duplizieren. Ich habe diese Zeichenfläche dupliziert. Nun, hier habe ich zwei Seiten. Okay? Nehmen wir an, ich möchte hier ein rechteckiges Feld erstellen. Lassen Sie mich das einfach mit einer roten Farbe füllen. Was ich jetzt mit meinem Auswahlwerkzeug machen möchte, ich werde dieses auch hier duplizieren. Aber was ich will, ist, dass ich das hier draußen hinstellen möchte. Jetzt will ich Prototypen bauen, okay? Ich möchte das Prototyping machen, okay? Von hier aus wird es hierher kommen , wenn wir uns so entscheiden. Wenn wir jetzt versuchen, die Vorschau hier zu sehen, könnt ihr hier alles Mögliche sehen . Okay. So wird es also automatisch animiert, aber wir sollten diese Dinge nicht auswählen oder nach innen oder außen verschieben diese Dinge nicht auswählen oder nach innen oder , bevor sie schon da sind Okay, jetzt schauen wir uns die Vorschau an. So wird es im Grunde aussehen, okay? Aber der richtige Weg, das zu tun , ist nur, wenn ich diesen nach dem Prototyping verschiebe Nehmen wir an, ich habe das hier gemacht, okay, ich lösche alles Ich habe von Anfang an angefangen, okay? Da ich diesen hier habe, wie Sie sehen können, habe ich jetzt, nachdem ich zur Prototyp-Option gegangen bin, nachdem ich diesen hierher verschoben habe, und vielleicht lösche ich ihn jetzt einfach, wenn Sie möchten, dass er ausgeblendet wird ihn jetzt einfach, wenn Sie möchten, dass er ausgeblendet wird Okay, das kann ich machen. Okay? Ich kann auch die Deckkraft ändern. Gehe zur Designoption. Ändern Sie hier die Opazität. Wir können das im Grunde tun, oder vielleicht die Opazität ändern, die Kapazität von hier aus ändern Sehen wir uns jetzt die Vorschau an. Okay, so wird es also im Grunde aussehen. Ich hoffe ihr habt diese verschiedenen Teile verstanden. Wie du im Grunde alles animieren kannst , wenn du einen Übergang machen willst Ihr könnt den Übergang also von hier aus machen. Okay? Ich habe diesen von hier ausgewählt. Und nehmen wir an, ich ändere hier zuerst die Opazität. Lass mich das kopieren, C kontrollieren, komm her, kontrolliere V, okay Jetzt mache ich das Prototyping von hier aus, wie Sie sehen können. Komm her, gehe zur Designoption, ändere die Opazität. Wenn ich jetzt von hier aus zur Wiedergabeoption gehe, können Sie die Animation sehen Es sieht jetzt gut aus, aber wenn ich es direkt nach draußen stelle oder bevor ich das Prototyping mache, wird es hier nicht angezeigt. Okay, das ist eine Möglichkeit, das zu tun. Von hier aus könnt ihr sehen, dass ich von hier aus auch die Pin-Tool-Optionen verwenden kann . Okay. Als ob ich einfach mein eigenes Logo machen könnte oder so. Ich kann das alles auch von hier aus machen. Das ist eine Möglichkeit, das zu tun, okay? Wenn ich also herkomme, kann ich das auch von hier aus machen. Schauen wir uns die Vorschau von hier noch einmal an, so wird sie im Grunde aussehen. Ich hoffe ihr habt diese Klasse auch verstanden, was ihr alles hier in dieser Klasse machen könnt. Ich habe euch alles über Animation erzählt, alle Probleme, mit denen ihr während der Animation konfrontiert werden könnt, und auch, was die fortgeschrittenen Methoden sind. Okay, ich hoffe, wir sehen uns alle in der nächsten Klasse, in wir lernen werden, wie man teilt und kommentiert Angenommen, Sie haben Ihre Arbeit an Ihren Kunden geschickt, dann möchte Ihr Kunde einen Kommentar abgeben und eine Vorschau davon geben Oder dein Feedback, das dir vom Teilen erzählt, zum Beispiel, wie du mit dem Teilen beginnen kannst, wie sie Kommentare hinzufügen können und alles im Detail. Wir sehen uns also alle im nächsten Tutorial. Bis dahin, pass auf dich auf und auf Wiedersehen. 10. So teilst du dein Wireframe und kommentierst: Und sei eins. Und ich heiße Sie alle zu einem weiteren Tutorial von AutoBXT willkommen, in dem wir etwas über das UX-Design von Benutzeroberflächen lernen Jetzt sind wir bei unserem zehnten Kapitel angelangt und hier werden wir lernen, wie Sie Ihren Drahtrahmen mit anderen teilen können Okay, im letzten Kurs habe ich euch gezeigt, wie Prototypen gebaut werden, also euer Drahtgestell Jetzt zeige ich dir, wie du es teilen kannst. Angenommen, Sie haben Ihren Kunden oder vielleicht jemanden, der eine Vorschau Ihrer Arbeit sehen möchte. Sie möchten sie nur wie Ihr Mentor zum Auschecken geben Sie können ihnen das geben und ihnen sagen, dass sie überprüfen sollen, wie es tatsächlich aussieht. Ich werde euch von Anfang an zeigen, wie ihr mit dem Teilen beginnen könnt und auch bei Kommentaren, die ihr als Redakteur einsehen könnt . Okay, lass uns jetzt mit diesem Kurs beginnen. Ihr könnt schon auf meiner Seite sehen, dass ich hier bin, okay? Dies ist derselbe Arbeitsbereich , in dem ich meine Seite hier erstellt habe, okay, die Seite für mobile Anwendungen. Was ich tun werde, ist , das mit anderen zu teilen. Okay? Direkt neben dem Prototyp siehst du die Share-Option. Sobald ihr auf diese Option zum Teilen geklickt habt, könnt ihr hier einige Dinge sehen. Okay, sind die Link-Einstellungen hier. Ich habe die Links. Wenn ich einen neuen Link erstellen möchte, kann ich das tun, nur Sie müssen es verwalten. Das ist es. Okay, hier ist eine Option, hier ist eine weitere Option , nämlich die Ansichtseinstellung. Das bedeutet im Grunde, dass die Person, die du an deiner Arbeit teilst , mit dem, was sie tun können, in der Lage sein wird, die Bewertung zu entwerfen oder wird sie auch in der Lage sein sich weiterzuentwickeln, also sie bearbeiten zu dürfen? Als ob sie dein Design präsentieren oder Nutzertests durchführen oder das Zuschauererlebnis personalisieren Du kannst hier klicken, wenn du anpassen möchtest , was sie alles können sollen. Dürfen sie Kommentare hinterlassen oder möchtest du, dass sie es im Vollbildmodus öffnen und Designspezifikationen hinzufügen? Ich kann das von hier aus machen. Ich klicke dann auf diesen, Design Review. Ich möchte eine Bewertung meines Designs erhalten. Hier, direkt darunter, siehst du eine kleine Vorschau dessen, was diese Option bewirken wird . Okay, hier bekommst du Feedback zu deinem Design und Prototyp. Hier kannst du diesen mit dem Entwickler teilen. Jetzt hast du dein Design mit dem Entwickler geteilt. Jetzt werden sie versuchen, die Website oder die Anwendung zu erstellen. Okay, das ist für die Präsentation und das ist zum Testen Ihres Prototyps. Also werde ich das Design überprüfen. Und jetzt ist das Letzte hier der Linkzugriff. Okay, also im Grunde bedeutet das hier , wer alle auf diesen Link zugreifen können und was werden ihre Aufgaben sein? Okay? Erstens kann jeder, der den Link hier auf mein spezielles Design zugreifen. Okay, ich hoffe, ihr habt es verstanden, und jetzt gibt es bei dem zweiten nur geladene Leute. Okay, also wenn ich auf Nur eingeladene Personen klicke, okay, also kann ich diese Leute einfach hierher einladen und nur diese Leute können mein Design von hier bekommen. Ich kann auch ein beliebiges Passwort wählen. Angenommen, ich wähle ein Passwort und teile danach das Passwort und auch den Link auf dem Klick mit. Sobald sie das Passwort festgelegt oder das Passwort eingegeben haben, können sie sich einen Überblick über meine Arbeit verschaffen. Okay, ich wähle einfach hier den Link und greife auf jeden zu, der den Link hat. Jetzt erstelle ich einen Link, und hier könnt ihr sehen, dass sie hier einen öffentlichen Link erstellen. Okay, jetzt dauert es ein paar Zeit. Also hier könnt ihr sehen, dass ich meinen Link hier habe. Okay. Also hier siehst du ein paar Optionen. Wenn ich den Link kopieren möchte, kann ich hier klicken. Und hier habe ich noch eine weitere Option wie Embedded Cut kopieren. Wenn ich den eingebetteten Code kopieren möchte, kann ich das von hier aus tun. Die andere Option ist Share on Hands. Okay. Wenn Sie dieses Projekt auf der Hand-Website teilen möchten, können Sie Ihr Projekt einfach in den Händen teilen. Dies ist ein öffentlicher Prototyp, wie bei dem Sie von hier aus verschiedene Arten von Warerahmen erhalten können. Wenn Sie Ihren Link aktualisieren möchten, können Sie den Link von hier aus aktualisieren. Okay, vielleicht komme ich auf Chrome hierher. Ich werde diesen einfach hinter mir lassen und auf Enter klicken. Okay, es bringt mich zum Kriegsgefändnis. Jetzt bin ich hier und es ist gerade dabei, die Arbeit zu erledigen. Okay, hier kannst du sehen, dass ich es von hier aus auf einer Seite habe. Im Grunde kann ich sehen, wie es tatsächlich funktioniert. Okay, hier klicke ich auf die Biografie. Im Moment wähle ich das aus und ich kann mir die Animation dessen ansehen, was sie getan haben. Okay, und ich klicke auf. Schon wieder der Robert. Okay, ich habe mich nicht dafür entschieden. Geh wieder her. Ja, ich bin wieder auf dieser Seite. Klicke hier. Von hier aus könnt ihr die gesamte Vorschau hier sehen. Okay, so kann Ihr Kunde oder Ihr Mentor Ihre Arbeit sehen und sie können hier auch Kommentare abgeben. Dies ist die grundlegende Art und Weise, wie sie Kommentare abgeben können. Okay, wenn sie sagen die Hintergrundfarbe ändern soll, sagen sie mir, ich solle die Hintergrundfarbe ändern. Und ich kann es einfach von hier aus einreichen. Wie ihr von hier aus sehen könnt, kann ich grundsätzlich einen Kommentar hinzufügen. Es gibt zwei Möglichkeiten, wie ich mich mit einer AdobID anmelden kann. Das ist professioneller. So können sie sich mit einer Adobe ID anmelden und hier einen Kommentar hinzufügen. Aber wenn ich als Gast einen Kommentar hinzufügen möchte, kann ich Darren schreiben, ich kann von hier aus weitermachen Okay. Hier kannst du sehen, was Darren gesagt hat, dass er eine Nachricht bekommen hat Bitte ändern Sie hier die Hintergrundfarbe. Hier können Sie auf meiner Creative Cloud sehen, hier sehe ich Popup-Menü, das neue Aktivitäten in der Adobe Eggs D-Klasse anzeigt , die ich meine Klasse genannt habe. Hier können Sie sehen, wie Darren den Adobe Eggs-Kurs kommentiert hat. Okay, von hier aus kann ich im Grunde sehen, wenn ich diesen Kommentar pinnen möchte, kann ich diesen Kommentar auch Okay, jetzt, wo ich hier bin, kann ich hier einen Kommentar hinzufügen. Sie können Notizen von hier aus verstecken. Sie können entsprechende Kommentare abgeben. Okay, wenn du die Lösungsoption sehen willst, wenn du löschen willst, was die Kommentare für heute sind und alles, was ihr sehen könnt, und ihr könnt sehen , wer alle eure Rezensenten sind Okay, das ist eine Möglichkeit, wie Ihr Kunde Ihre Arbeit grundsätzlich überprüfen kann Sie können Ihnen sagen, ob Sie etwas ändern müssen oder ob die Arbeit in Ordnung ist, sie können Sie auch schätzen. Okay? Das ist ungefähr von der Kundenseite, okay? So wird Ihr Kunde Ihre Arbeit sehen und entsprechend kommentieren. Aber wenn Sie hierher kommen, wie werden Sie dieses Problem lösen? Okay, kommen Sie in der Designoption her, gehen Sie zum Prototyp, und von hier aus können Sie im Grunde auf die Kommentare zugreifen. Okay, jetzt komm vielleicht wieder von hier her, ich werde hierher kommen, okay, gehe zu den Designoptionen, da sie mir sagen, dass ich die Hintergrundfarbe ändern soll. Vielleicht wähle ich diese Seite aus. Gehen Sie von hier aus zur Fülloption. Ich kann die Farbe entsprechend wählen. Okay. Wie Sie sehen können, kann ich die Farbe entsprechend wählen. Sobald mein Ding ein Ergebnis ist, als ob ich alles getan habe , kann ich hier wieder zur Share-Option gehen. Sobald Sie mit dem Aktualisieren eines Links fertig sind, teilen Sie diesen Link auf die gleiche Weise. Okay, Sie können diese Kommentare von Ihrer Creative Cloud-Box aus ansehen . Okay, von hier aus erhalten Sie eine Benachrichtigung. Okay, von hier aus können Sie sehen, was der Kommentar in X D ist, die Hintergrundfarbe ändern. Von hier aus kann ich, ich kann das einfach abweisen. Andernfalls kann ich wieder zu dieser speziellen Datei gehen. Okay. Vielleicht möchte ich hier auf diese Seite gehen. Ich habe viel geschaffen. Viele. Ich kann auf diese Seite kommen und Darren antworten, dass, ja, ich mit deinem Wort fertig bin, indem ich mich einfach anmelde Okay. Da ich mich angemeldet habe, habe ich keine Option zum Ansehen. Okay. Ich hoffe ihr habt verstanden, wie ihr grundsätzlich teilen könnt, wie ihr euren Link aktualisieren könnt, wie ihr Feedback erhalten könnt und auch, wie ihr diese bearbeiten könnt, sobald ihr dieses Feedback erhalten habt. Okay, in der nächsten Lektion werden wir lernen, wie wir grundsätzlich ein Moodboard erstellen können und was ein Moodboard Okay, wir werden also lernen, wie wir unser eigenes Moodboard erstellen können. Kümmere dich bis dahin um alle und hoffe, wir sehen uns alle in der nächsten Klasse 11. Ausmalen in Adobe Xd: Hallo zusammen und willkommen zu einem weiteren Kapitel von Adobe X Diutorial Hier lernen wir etwas über das UX-Design von Benutzeroberflächen. Und wir sind bei Kapitel Nummer 12. Hier in unserem Kapitel Nummer 12 werden wir also alles über das Färben in dieser Anwendung lernen. Okay? Also werde ich euch erzählen, wie ihr eure eigene Farbpalette erstellen könnt, wie wir mit eurer Farbgebung herumspielen können, wie wir euren eigenen Farbverlauf für jede Schaltfläche oder jede Hintergrundfarbe erstellen können. Und ich werde euch auch zeigen, wo ihr alle eure Farbinspiration bekommen könnt. Okay, all das werden wir in diesem speziellen Tutorial erfahren. Fangen wir also mit diesem Kurs an. Also, was ich jetzt tun werde, ist, wie Sie sehen können, ich bin hier in meinem Arbeitsbereich. Jetzt zeige ich euch zuerst, wie ihr eure eigene Farbpalette erstellen könnt. Und warum benutzt du grundsätzlich eine Farbpalette? Okay, nehmen wir an, ich möchte jetzt meine eigene Webseite erstellen und habe dort ein Farbthema ausgewählt. Okay, nehmen wir an, ich habe euch hier in Moodboard gezeigt, dass das einige der Farben sind Und jetzt nehme ich die Boxen von hier oder die Schachtel mit Farben, okay Angenommen, ich möchte so etwas machen. Okay? Also lass mich das mal genauer betrachten. Und nehmen wir an, ich möchte diese Farbe auf meiner Webseite verwenden. In diesem Fall werde ich zuerst hier eine Box erstellen. Okay, ich habe diese Box erstellt. Und jetzt wähle ich mit der Pipette eine bestimmte Farbe Angenommen, ich möchte diese Farbe, und ja, ich habe diese Farbe, das wird meine Grundfarbe sein Okay. Jetzt habe ich hier diese Grundfarbe. Mit diesem Tool werde ich diese Ebene einfach duplizieren. Okay, ich habe diese Ebene von hier aus dupliziert. Ich komme dann zur Fülloption und ändere die Intensität der Farbe Wie Sie sehen können, habe ich die Intensität der Farbe erneut geändert . Wählen Sie das jetzt erneut aus, kopieren Sie dieses hier. Jetzt werde ich auch die Intensität dieser speziellen Box ändern . Okay, komm her zur Fülloption. Vielleicht diese Farbe oder so etwas im Dunkeln, okay? So können wir tatsächlich unsere eigene Farbpalette erstellen. Okay, jetzt noch einmal, nimm diesen und wir wiederholen den Vorgang wie viele Farbsätze wir haben möchten. Es hängt im Grunde von uns ab. Okay, alles fügt es hier ein. Kommen Sie jetzt zu diesem und ändern Sie die Füllung von hier aus. Vielleicht möchte ich ein bisschen dunkel sein. Okay, jetzt habe ich diese Farbpalette. Nehmen wir an, ich möchte von hier aus auch das Farbthema von diesem Bild übernehmen. Okay, in diesem Fall werde ich vielleicht ein bisschen auf diese Seite kommen. Okay, ich werde hier eine Farbpalette erstellen. Ich wiederhole einfach den gleichen Vorgang und erstelle hier eine Box. Okay, jetzt mit deiner Pipette , um diese Pipette hier aufzubewahren. Jetzt können Sie von hier aus eine Farbe auswählen. Okay, vielleicht habe ich diese Farbe ausgewählt. Was ich jetzt tun kann, ist, dass ich das jetzt kopieren kann, oder ich kann einfach ein Duplikat davon machen. Okay? Ich mache ein Duplikat davon. Jetzt kann ich die Intensität der Farbe von hier aus ändern . Von hier aus. Wie Sie sehen können, ändere ich wieder die Dichte. Wiederhole den gleichen Vorgang. Nehmen wir an, ich möchte hier eine bestimmte Farbe von dieser Pipette zwei, vielleicht kann ich hier etwas. Okay, das ist der dunklere. Wieder mit Al. Dupliziere diese Ebene und ändere jetzt die Intensität von hier aus. Okay? Vielleicht etwas Dunkles, ändere die Positionierung von hier aus. Okay, ich habe auch diese Farbpalette. Okay. Jetzt können wir diesen im Grunde gruppieren und uns bewegen. Angenommen, ich möchte diesen hier behalten. Okay, das ist eine andere Farbpalette. Angenommen, das wird meine Hauptpalette sein und das wird meine zweite Umfärbungspalette sein So viele Farben ihr auf eurer Webseite verwenden möchtet, ihr könnt sie zusammenfügen oder stapeln Ich hoffe ihr habt verstanden, wie ihr eure eigene Farbpalette erstellen könnt. Jetzt werde ich euch sagen, wie ihr euren Farbverlauf erstellen könnt. Nehmen wir an, ich komme jetzt her und erstelle hier eine Box. In diesem speziellen Feld werde ich hier zur Ausfülloption kommen. Unter der Ausfülloption könnt ihr oben sehen, dass ich eine Option habe. Okay. Ich lasse das Menü aufklappen. Okay, hier kannst du sehen, ob ich eine Volltonfarbe nehmen möchte. Ich kann es von hier aus machen. Wie ihr von hier aus wisst, kann ich die Intensität beliebig ändern. Das ist das Augentropfenwerkzeug. Von hier aus können Sie die Farbe tatsächlich speichern. Okay? Lassen Sie mich jetzt zuerst zum linearen Gradienten kommen. Okay? So sieht ein linearer Farbverlauf aus. Okay? Ich wähle diesen aus. Okay? Diese Seite werde ich machen, diese von hier, ich kann die Farbe ändern. Okay? Angenommen, ich möchte diese Farbe wieder nehmen. Ich werde diesen wählen. Und auf dieser Seite möchte ich eine andere Farbe haben. Sie können sehen, dass dies die Kombination der beiden Farben ist, Grün und Rot. Wenn ich irgendwo eine andere Farbe hinzufügen möchte, kann ich eine andere Farbe als hinzufügen. Okay, ich kann die Positionierung ändern und so viele Farben hinzufügen, wie ich möchte. Es hängt davon ab, welcher besser aussehen wird. Und ich kann von hier aus auch die Positionierung ändern. Okay, lassen Sie mich verschiedene Farben auswählen. Okay? Ich werde hier eine andere Farbe wählen. Okay? So können Sie im Grunde Ihren eigenen Farbverlauf erstellen. Sie können so viel eingeben, wie Sie möchten. Sie können auch die Deckkraft ändern, wie ich Ihnen bereits gesagt habe. Lass mich das hier nehmen. Ich bin fertig mit dem Gradienten und so kann man hier im Grunde arbeiten. Du kannst diesen tatsächlich ändern. Kommen Sie insbesondere wieder zur Feldoption. Und wenn du das von hier aus ändern möchtest, kannst du auswählen, wie die Farbe fließen soll, okay? Im Grunde genommen habe ich einen Farbverlauf erstellt, wenn ich die Farbe so bewegen möchte und welcher Teil das haben soll , was sie mir hier zeigt welcher Teil das haben soll, was sie mir hier zeigt. Das war das Beispiel für einen linearen Farbverlauf. Aber lassen Sie uns jetzt sehen, wie Sie im Grunde einen radialen erzeugen können . Okay? Ich wähle hier ein anderes Feld aus. Kommen Sie nun zur Fülloption. Auch hier habe ich unter der Fülloption diesen radialen Farbverlauf, okay? Es wird in einer radialen Form kommen. Das ist auch dasselbe. Vielleicht wähle ich eine rote Farbe. Ich werde die Deckkraft ein wenig ändern. Jetzt wähle ich die grüne Farbe aus. Okay. Von hier aus kannst du sehen, dass das Rot draußen ist. Ich habe das Grün hier. Okay? Ich kann auch die Positionierung ändern wenn ich will, oder ich kann einfach mehr Farben hinzufügen. Okay? Wie Sie sehen können, kann ich die Opazität von dem ändern Das ist radial. die gleiche Weise wähle ich aus wie viel Farbe und welche Farben ich benötige. Ich werde hierher kommen. Okay, ich werde hier einen anderen auswählen. Okay, ich setze hier eine andere Farbe ein. Ich werde diesen auswählen. Ich hoffe, ihr habt auch die radiale Sache verstanden . So könnt ihr, wenn ihr irgendein Logo oder irgendein Design macht , das machen. Ich kann das auch ändern. Ich kann es umgehen. Ich kann das auch wechseln, wenn ich will. Okay, nehmen wir an, ich möchte diesen drehen. Ich kann es mit meinem Auswahlwerkzeug nach meinen Wünschen drehen . Ich werde diesen hierher verschieben. Ich habe euch auch hier gezeigt, wie ihr euren eigenen Farbverlauf erstellt. A Jetzt werde ich mich mit dem letzten Farbverlauf befassen, den Sie erstellen werden. Lass mich Ellipse nehmen oder ich nehme diese. Okay? Auch eine Polygonform. Ich erstelle hier ein Polygon, verschiebe es hierher und behalte dieses Wählen Sie nun dieses Werkzeug aus der Feldoption aus. Kommen Sie von hier aus zum Winkelgradienten. Genauso wie ihr im Grunde wählen könnt , welche Farbe ihr wollt. Wenn ich weitere Farben hinzufügen möchte, kann ich sie von hier aus hinzufügen. Okay, ich werde mehr Farben hinzufügen. Ich werde noch ein paar hinzufügen. So können wir diesen Gradienten grundsätzlich erzeugen. Ja, ich hoffe, ihr habt diesen Kurs verstanden wie ihr eure eigene Farbpalette erstellen könnt. Wie Sie Ihren eigenen Farbverlauf erstellen können. Okay. Vor allem beim Ausmalen gibt es nicht so etwas, dass du dieses Ding verwenden musst, du musst diese bestimmte Farbe für dieses Ding verwenden. Es gibt nichts als solches. Aber ich werde euch immer empfehlen Arbeiten anderer anzusehen, zum Beispiel, wie sie ihre Farben auf ihren Webseiten verwenden , damit ihr euch inspirieren lassen könnt. Und deshalb ist das Moodboard so wichtig. Okay, jetzt kommen wir zu meinem Chrome und ich werde euch zeigen, wo ihr einige der Farbideen nehmen könnt. Okay, wenn ihr euren Farbverlauf von hier aus benutzt, könnt ihr im Grunde sehen, dass das einige Farbverläufe sind, okay, die hier hauptsächlich verwendet werden. könnt euch ansehen, welche Farbverläufe die Leute im Grunde verwenden, und ihr seht euch hier Nun, die Frage, die ihr vielleicht habt, ist, okay, ich sehe, dass all diese Farben in Ordnung und gut genug sind Aber die Sache ist, wie ich diese Farben nehmen kann , wenn ich diese bestimmte Farbe hier haben möchte, wie ich sie auf meinen Arbeitsplatz bringen werde. Okay, hier könnt ihr sehen, dass ein Code geschrieben ist. Diese werden als Farbcode bezeichnet. Und ich werde diesen speziellen Farbcode von hier kopieren und zu meinem X-Defile gehen Angenommen, ich möchte dieselbe Farbe haben, kann ich hier ein Feld anklicken und komme dann zu meiner Feldoption oder zur Farboption hier. Ihr könnt sehen, dass ich einen Code habe, dem ich gesagt habe , dass ich euch später davon erzählen werde. In diesem Fall können Sie einfach kommen und diesen bestimmten Farbcode hier einfügen. Okay, also werde ich das zuerst löschen. Fügen Sie es jetzt ein. Ich habe hier einige Schwierigkeiten, das einzufügen. Okay? Ich nehme diese Kopie hier in das Ei T, wir können einfach diese bestimmte Farbe einfügen. Okay? Oder ich muss einfach diesen nehmen. Okay, nicht die Hash-Technologie. Ich kann hier klicken. Lösche das. Jetzt kann ich das einfügen. Oder ich kann es auch manuell machen. Als ob ich was sehe, 99? Also komme ich zur X, D, D Neun. Okay. Und ich kann hier auf Enter klicken. Ihr könnt die besondere Farbe sehen , die ich hier habe, meine Bank, E. Ich komme wieder her. Okay. Ich klicke hier auf Enter. Sie haben die bestimmte Farbe. Ihr könnt euch nicht einfach irgendwas aussuchen. Okay? Das sind im Grunde Codes, wenn ich eine Palette davon erstellen möchte, kann ich das genauso machen wie zuvor. Okay, komm her, ändere die Intensität. Vielleicht kopieren zwei von diesen noch einmal, ändern die Dichte von hier auf diese. Komm her, nimm einen. Ich habe meine Farbpalette hier. Okay, ich kann das als meine andere Farbpalette verwenden. Wir sollten immer die Farben behalten , die Sie immer verwenden. Ich hoffe ihr habt die Verwendung von Farben verstanden, wie man hier grundsätzlich malen kann. Wenn ihr das gruppieren wollt, könnt ihr hierher kommen, hier klicken und ihr könnt auf Gruppe klicken. Nein. Wenn ich diesen verschiebe, bewegt er sich entsprechend. Okay? Das ist die Farbpalette. Ich kann es auch benennen. Okay, anhand der Boxen kann ich dieser Datei einen Namen geben. Okay? Nehmen wir an, ich habe diese besondere Farbe hier. Okay? Komm zur Fülloption. Aus dieser Fülloption kann ich grundsätzlich diese auswählen. Okay? Ich habe das hier, ich kann diese Farbe tatsächlich speichern. Okay? Wenn ich auf diesen klicke und hierher komme, wird er gespeichert. Diese spezielle Farbpalette wird gespeichert. Hier in diesem Kurs geht es ums Ausmalen. Im nächsten Kurs werde ich euch erklären, wie ihr mit Bildern spielen könnt und was der Unterschied ist, wenn ihr Bilder verwendet eure eigene Webseite zu erstellen oder euer eigenes Design für Mobilgeräte zu entwickeln. Okay, wir sehen uns alle in der nächsten Klasse. Bis dahin, passt auf euch auf und auf Wiedersehen. 12. Bilder in Adobe Xd: Hallo zusammen und willkommen zu einem weiteren Kapitel des OBX-Tutorials Okay, hier, während wir UX-Design lernen, sind wir am Ende dieses Tutorials angelangt Und danach zeige ich euch nur ein Projekt, wie ihr euer eigenes Design erstellen könnt. Okay, ich habe euch bereits von der mobilen Anwendung erzählt, wie man einen niedrigen Fünf-Draht-Rahmen bekommen kann. Jetzt kannst du es nach Belieben füllen. Empfehlen Sie viele Werke , wie ich es getan habe. Aber ich werde euch auch ein Projekt zeigen und wir werden euch auch Klassenprojekte geben. Okay, hier werden wir jetzt lernen, wie Sie Bilder verwenden können. Okay? Dies ist unser letztes Kapitel , das Kapitel Nummer 13. Okay? Bilder. Wir werden lernen, wie Sie Maskierungen durchführen können, wie Sie Ihr Stiftwerkzeug verwenden können, während Sie Bilder verwenden Fangen wir wieder mit diesem Kurs hier an, zurück am selben Arbeitsplatz Wie Sie sehen können, bin ich jetzt hier in diesem Arbeitsbereich. Also werde ich jetzt einfach versuchen, ein paar Bilder von hier hochzuladen. Ich werde zur Importoption gehen. Vom Import gehe ich zur Ressourcendatei, okay, oder ich gehe zu einigen meiner Screenshots, die ich hier habe. Ich komme hierher und das sind die wenigen Bilder , die ich habe, okay? Das Einfachste ist, dass Sie es einfach per Drag & Drop ziehen können. Andernfalls können Sie einfach importieren. Aber die Sache mit dem Import ist, dass ihr sehen könnt , dass es hier in einer Gesamtgröße erhältlich ist, okay? Die Größe ist hier ziemlich groß, okay? Wie ihr sehen könnt. Wenn ich rauszoome, damit ihr es sehen könnt, entspricht das der Größe des Bildes. Aber was ich tun kann, ist, dass ich von hier aus einfach die Größe des Bildes verringern kann . Angenommen, das ist die Webseite. Ich kann die Größe entsprechend verringern, und ich kann diese hier einfügen. Okay? Vorher werde ich die Größe verringern. Von hier aus. Ich kann von meiner Tastatur aus wechseln und die Größe wird entsprechend angepasst. Okay, nehmen wir an, ich lasse diese oben und wähle jetzt beide Ebenen aus Was ich jetzt tun kann, ist, wenn ich diese Ebene hier auswähle und diese Ebene nach hinten schicken kann. Jetzt kann ich die Größe hier verringern. Ich habe das hier. Ich habe auch mein Bild. Nun, ich kann es jetzt nicht sehen. Dies ist eine Möglichkeit, wie Sie das im Grunde tun können. Okay? Sie können einfach jedes der Bilder aufnehmen, wie Sie es sehen können. Ändern Sie von hier aus die Breite oder Höhe. Sie können die Positionierung des Bildes ändern. Okay? Das ist eine Möglichkeit, es zu maskieren Angenommen, ich möchte, dass dieses Bild zuerst da ist. Was ich tun muss, ist , das auszuwählen. Komm jetzt her, um das nochmal zu maskieren, vielleicht mache ich ein anderes Bild von oben, okay. Oder gehen Sie zur Dateioption Import. Ich kann auch die Umschalttaste drücken und ich komme hierher, vielleicht nehme ich dieses Bild. Okay, von hier aus habe ich dieses Bild ausgewählt. Ich werde das importieren, aber die Größe ist zu groß. Was ich tun kann, ich kann die Größe wieder verringern , indem ich dieses Bild hier behalte. Was ich jetzt tun werde, ist, diese beiden Ebenen auszuwählen. Okay, mein Down-Box ist ebenfalls ausgewählt. Was ich jetzt tun kann, ist diese Dinge im Grunde zu gruppieren oder die Gruppierung dieser Dinge auch einfach aufzuheben Okay, nehmen wir an, ich habe jetzt diese Ebene hier getrennt Du kannst sehen, dass das nicht nach draußen geht, okay. Das ist eine Möglichkeit, das zu tun. Hier könnt ihr es sehen, okay. Jetzt kann ich auch die Größe verkleinern und versuchen, hier reinzupassen. Eine grundlegende Methode, dieses Ding zu tun, ist hier. Ich habe das, um beide Ebenen auszuwählen. Jetzt könnt ihr herkommen. Und ihr könnt das auswählen und versuchen, daraus eine Komponente zu machen. Okay, das ist eine Möglichkeit, oder ich kann diese einfach mit einer Form maskieren. Wenn ich nur diesen vergrößere, nimmt auch mein Bild zu. Das ist jetzt in einer Form, genauso wie ihr jedes Bild hier runterbringen könnt. Angenommen, ich will ControlShift I. Okay, ich habe diese Seite wieder hier. Ich komme her und möchte ein Bild hochladen. Ich kann Import auswählen. Und hier könnt ihr sehen, dass ich einfach auf Shift klicke und die Größe verkleinere. Behalte dieses Bild hier. Shift, verkleinern. Bewahren Sie das irgendwo hier auf. Jetzt können wir diese beiden Ebenen auswählen und diese Maske mit Form verwenden. Von hier. Im Grunde können wir uns tatsächlich ein Bild davon machen, wie wir es wollen. Wenn wir so viel wollen, kann ich so viel hineinlegen und du kannst das Maskieren von hier aus machen Dies ist eine grundlegende Methode , wie Sie Maskierungen vornehmen und Bilder entsprechend verwenden können Maskierungen vornehmen und Bilder entsprechend verwenden Okay? Das sind ein paar Optionen. Und von hier aus kannst du auch die Deckkraft ändern, okay? Wenn Sie es hier, hier, ändern möchten , haben Sie diese Option Okay? Im Grunde kannst du auch die Grenzen ändern. Okay? Angenommen, ich möchte einen gelben Rand nehmen, ich möchte diese drei nehmen. Okay? Ich kann das von hier aus machen. Hoffe ihr habt verstanden, wie ihr Bilder verwenden könnt. Es gibt verschiedene Möglichkeiten, Bilder zu verwenden. Nehmen wir an, ich komme her und mache noch ein Bild. Nehmen wir an, dieses Bild von hier, Steuerung C. Ich füge dieses Bild hier ein, oder ich nehme dieses Bild von hier. Okay, bei diesem speziellen Bild möchte ich mit meinem Stift zuerst hineinzoomen. Jetzt möchte ich von hier aus einfach diese Form beibehalten. Ich möchte das Shapen von hier aus machen. Okay? Ich will nur diesen Teil. Ich will den Hintergrund nicht. Stattdessen möchte ich hier einen grünen Hintergrund einfügen. Okay. Ich kann das im Grunde alles gleich hier machen. Ich habe das, ich habe bis jetzt so viel gemacht. Okay. Jetzt kann ich im Grunde diesen bestimmten Rahmen auswählen. Ich kann die Striche skizzieren, okay? Ich kann diesen speziellen Schlag hier skizzieren. Wie Sie sehen können, kann ich grundsätzlich von hier aus wählen. Ich kann die Grenze tatsächlich ändern. Ich kann die Grenze stärken. Sechs, ja, hier könnt ihr es sehen. Und ich kann auch ein bestimmtes Bild aufnehmen. Okay, ich komme hierher, klicke hier, und du kannst auch Mark für den Export auswählen. Sie können einfach einen bestimmten Teil des Bildes auswählen , wenn ich zu einem anderen Bild komme. Also lass mich diesen löschen. Ich werde es euch in einem einfachen Bild zeigen. Okay, lass mich hierher oder hierher kommen. Dieses Bild werde ich einfach kopieren und hier einfügen. Okay, hier habe ich ein Bild. Ich werde es einfach mit meinem Stift vergrößern , um anzunehmen, dass ich nur, äh, so viel will . Okay? Ich möchte nur so viel von diesem speziellen Bild hier aufnehmen . Okay? Das ist die Gliederung. Okay? Also, was ich jetzt tun will, ist ins Schwarze zu nehmen, okay? Ich möchte nur diese Markierungsoption von hier bekommen. In diesem Fall kann ich im Grunde genommen diesen exportieren. Okay, diese spezielle Option hier, so können wir sie im Grunde nehmen und markieren und sie einfach entfernen und einen anderen Hintergrund hier einfügen. Hoffe ihr habt das mit Bildern verstanden. Jetzt zeige ich euch, wie ihr im Grunde ein Bild aufnehmen und dieses exportieren könnt. Angenommen, ich habe das aufgenommen und dieses als Export markiert. Komm her in der Dateioption, exportiere das. Und wenn Sie alle Zeichenflächen auswählen möchten, können Sie alle Zeichenflächen auswählen Und Sie können die Exportgröße sehen. Ich werde die Größe dieser Zeichenfläche auf der Webseite anpassen. Und wo ich das speichern möchte, speichere ich es vielleicht einfach in meinen Downloads hier, ich kann die Inhalte einfach von hier exportieren Wenn ich jetzt hier auf diese Seite gehe, okay, also lass mich hierher kommen, zu den Downloads gehen. Hier können Sie sehen, dass meine Zeichenfläche auf meinen Schreibtisch exportiert wird So können wir jeweilige Zeichenfläche tatsächlich auswählen Hier können Sie sehen, dass all diese Seiten, Bild für Bild, heruntergeladen werden Okay? So können Sie im Grunde genommen herunterladen, um eine Vorschau Ihrer Arbeit zu erhalten. Okay, so könnt ihr, ich hoffe, ihr habt das ganze Tutorial verstanden , wie ihr an dieser speziellen Anwendung arbeiten und euer eigenes Design erstellen könnt . In der nächsten Klasse werde ich euch anhand eines Projekts auf einer Webseite zeigen , wie ihr eure eigene Webseite entwerfen könnt, wie ihr die Farben und das Prototyping machen könnt. Wir sehen uns alle in der nächsten Klasse. Bis dahin, passt auf euch auf und auf Wiedersehen. 13. Kursprojekt 1: Hallo zusammen und heiße euch alle wieder beim Atop X D Klassenprojekt willkommen wieder beim Atop X D Klassenprojekt Hier, das ist unser Klassenprojekt Nummer eins. Jetzt werden wir unsere eigenen Zeichenflächen für mobile Apps entwerfen. Und wir werden entsprechende Prototypen erstellen. Also im Grunde müsst ihr eure eigenen Design-Zeichenflächen erstellen eure eigenen Design-Zeichenflächen Okay? Vielleicht vier bis fünf erstellen und danach die entsprechend prototypisieren. Verwenden Sie die Ease-in-Ease-Out-Methode, verschiedene Arten von Übergängen und auch verschiedene Arten von Effekten. Okay, lassen Sie uns sehen, was Sie in diesem Kurs alles tun müssen. Wie Sie sehen können, lautet der Name des Klassenprojekts das Entwerfen Ihrer Zeichenflächen für mobile Apps und das entsprechende Prototyping Okay, du kannst die Beschreibung sehen, was ich geschrieben habe. Dies ist eine mobile App in Adobe XD, die das Erstellen von Zeichenflächen, das Entwerfen von Benutzeroberflächen und das Prototyping von Interaktionen umfasst und das Prototyping von Interaktionen Sie bietet Ihnen eine Reihe von Tools Sie bei diesem Prozess unterstützen, und erstellt eine benutzerfreundliche und visuell ansprechende mobile Okay, hier könnt ihr sehen, was die verschiedenen Schritte sind, denen ihr folgen werdet Zunächst müssen Sie alle erforderlichen Symbole und Farbpaletten sowie verschiedene Schriftgrößen für Ihre Zeichenfläche sammeln Farbpaletten sowie verschiedene Schriftgrößen für Ihre Zeichenfläche Danach müssen Sie in allen Zeichenflächen Ihr eigenes Design erstellen in allen Zeichenflächen Ihr eigenes Design Gleichzeitig können Sie vier Zeichenflächen erstellen und zur Prototyping-Option wechseln und das Prototyping entsprechend durchführen Ich habe euch gezeigt, wo das Prototyping stattfindet. Wenn ihr irgendwelche Probleme habt, könnt ihr immer mindestens auf das Tutorial zurückgreifen, vier Zeichenflächen verwenden, okay, um die Verknüpfung zu erstellen Erstellen Sie mindestens vier Zeichenflächen und verwenden Sie auch Animationen in den Zeichenflächen, denen auch intelligente Animationen und auch die Basisanimation gehören und auch die Basisanimation Als letztes kopieren Sie den Link Ihrer speziellen Datei und laden Sie ihn in unser Projektpanel Nach diesem Kurs verfügen Sie über ein voll funktionsfähiges App-Design , das Sie in der Vorschauoption überprüfen können. Und es wird ein klar definiertes interaktives und vom Benutzer getestetes Design sein, das als Grundlage für den Entwicklungsprozess dienen wird . Okay, lass uns sehen, wie das gemacht wird. Wie Sie sehen können, bin ich in meinem Arbeitsbereich, und von dieser Prototyp-Option werde ich danach hierher kommen. Ihr könnt sehen, sobald ich hier auf eine bestimmte Sache klicke, diese Art von Symbol erscheint, das ich bereits im Tutorial auf dieser Seite gezeigt habe. Ich wähle nicht die ganze Seite aus, ich wähle diese bestimmte Schaltfläche aus. Wenn ich auf diese spezielle Schaltfläche klicke, werde ich auf diese Seite weitergeleitet. Hier kann ich den Übergang ändern. Okay? Ich gebe hier Auto Animate. Ich werde das Timing ändern. Ihr könnt es ganz nach euch selbst machen. Okay? Ihr ergreift verschiedene Maßnahmen. Wenn ihr eine Audiodatei auswählen wollt, mache ich das als Tap. Danach, diese bestimmte Seite, vielleicht wähle ich diese aus. Und diese, ich verlinke sie mit der ersten Seite. Ich werde das Gleiche tun. Dieser. Ihr solltet es miteinander verbinden. Ich habe euch von verschiedenen Abkürzungen erzählt , die ihr auch hier verwenden könnt. Okay? Also das ist eine Möglichkeit, das zu tun. Jetzt werde ich diese spezielle Seite verlinken, weitere Informationen finden Sie hier. Ich werde diese Seite hier mit dieser Seite verbinden. Okay. Also, wie Sie sehen können, habe ich diesen gemacht. Was ich jetzt tun werde, ist, da dies die intelligente Animation ist, die bereits in meinem Tutorial enthalten Ich habe euch gezeigt, wie man die intelligente Animation macht. Okay, komm her oder wähle die ganze Datei hier aus. Danach mach weiter. Dieser hier, wähle die Zeitoption und ich werde nichts verzögern. Okay, danach werde ich auch das auswählen, wie die ganze Seite von hier aus, kein bestimmtes Symbol. Und das lasse ich fallen, vielleicht brauche ich hier zwei oder 1,5 Sekunden. Okay, 1,5 Sekunden. Ich klicke hier auf Enter, ich gebe eine automatische Animation. Im Grunde wird es so aussehen und ihr könnt es vom Panel aus überprüfen. Okay, lassen Sie mich zuerst von hier aus auf diese Seite gehen. Okay, wie ihr sehen könnt, könnt ihr die Verbindungen dazwischen erkennen. Wenn ihr von hier aus etwas ändern wollt , könnt ihr das tun. Okay, lass uns auf diese Seite kommen. Klicken Sie auf diese Vorschauoption. Lassen Sie mich hier auf diese Option inzwischen klicken. Es geht auf diese Seite hier. Auch hier habe ich einige Schwierigkeiten, zu spät auf diese Seite zu kommen. Nun nochmal zum Prototyping von hier aus. Jetzt kannst du sehen, dass ich mit dieser Option hergekommen bin. Wenn ich diese Option anklicke, werde ich einfach hierher weiterleiten. Okay, jetzt lass uns sehen. Wie Sie die Animation auch hier sehen können. Ich hoffe ihr habt verstanden, wie ihr das Prototyping im Grunde machen könnt Aber dieses Design, so wie ich es selbst gemacht habe, bitte ich euch, es selbst zu machen Diese speziellen Designs könnt ihr verwenden, wenn ihr ein Problem habt. Was ist mit der intelligenten Animation ich euch in der Klasse alles im Detail gezeigt habe Erstelle eine solche Seite. Danach ist das Letzte, was ihr tun werdet , dass ihr hierher kommen und auf diese Share-Option klicken könnt . Okay, das ist alles schon ausgewählt. Okay, Sie können den Link von hier aus aktualisieren. Okay, ihr müsst es nicht aktualisieren, werde einen Link für euch erstellen und ihr könnt einfach diesen Link kopieren und diesen Link in unserem Projektpanel teilen. Okay, hier kannst du es einfach als Bewertung abgeben und du kannst es einfach jedem mit dem Link oder nur eingeladene Personen hinzufügen. So könnt ihr eure Arbeit mit mir teilen, sodass ich eure Arbeit rezensieren kann. Okay, danke euch allen, dass ihr an diesem Tutorial zum Klassenprojekt teilgenommen habt. Ich hoffe , dass ihr euer Projekt so schnell wie möglich einreicht. Ich bin wirklich daran interessiert, Ihre Arbeit und Ihr Design zu sehen Ihre Arbeit und Ihr Design , wie Sie Ihre Webseite gestalten. Okay, wir sehen uns in einem der nächsten Tutorials. 14. Kursprojekt 2: Hallo alle zusammen. Und jetzt ist es Zeit für unser Klassenprojekt. Und jetzt machen wir hier unser Klassenprojekt Nummer zwei. Sie müssen Ihr eigenes Moodboard erstellen und Sie müssen Ihre eigenen Farbpaletten erstellen Okay, dafür müssen Sie zuerst einige Bilder importieren und danach Ihre Farbpaletten erstellen Haben Sie Fragen dazu, wie geht das? Ich habe diese in meinem Tutorial behandelt. Ihr könnt das wieder für euch selbst empfehlen. Okay, lassen Sie uns sehen welche Schritte Sie dabei alle befolgen müssen. Hier oben könnt ihr den Namen der Klasse sehen. Project erstellt ein Moodboard und erstellt Ihre eigenen Farbpaletten Okay, hier kannst du die Beschreibung sehen. Wie lautet die Beschreibung, ein Moodboard zu erstellen und warum sollte man nicht ein Moodboard und eine Farbpalette erstellen Okay, ihr könnt also sehen, hier ist es. Integrierte Tools, mit denen Sie diese Entwurfselemente bequem und effektiv erstellen, verwalten und implementieren können. Okay, der erste Schritt, dem Sie folgen werden, ist, dass Sie sich Ihre Farbinspiration von verschiedenen Websites holen müssen , die ich Ihnen gezeigt habe. Ich habe dir verschiedene Websites wie Hads Awards gezeigt , so ähnlich Von dort aus könnt ihr euch eure Farbinspirationen holen. Danach können Sie diese Bilder in die Seite importieren. Später stapeln Sie all diese entsprechend und erstellen Farbpaletten mit mindestens drei Farben Und passen Sie all diese Elemente in einer Zeichenfläche an, exportieren Sie die ausgewählte Zeichenfläche in Ihr System und öffnen Sie anschließend Ihre Zeichenfläche in Danach erhalten Sie eine Reihe von Bildern und einige Farbpaletten in Ihrer Zeichenfläche, was optisch sehr ansprechend sein wird Von hier aus können Sie auch benutzerdefinierte Farbpaletten erstellen und so Ihr Moodboard erstellen Es verbessert den gesamten Entwurfsprozess, was zu einheitlicheren, visuell ansprechenderen und effektiveren Designergebnissen für Ihr Projekt führt visuell ansprechenderen und effektiveren Designergebnissen Es hilft Ihnen, organisiert und inspiriert zu bleiben und sich an Ihren Projektzielen auszurichten, sobald Sie dieses spezielle Moodboard und auch einige Farbpaletten erstellt dieses spezielle Moodboard und auch einige Okay, lasst mich euch jetzt zeigen, wie das gemacht wird. Jetzt bin ich hier an meinem Arbeitsplatz und von hier aus komme ich zur Zeichenfläche Ich werde hier eine Zeichenfläche erstellen. Okay, auf dieser Zeichenfläche werde ich verschiedene Formen verwenden Okay, lassen Sie mich hier Formen erstellen. Okay, vielleicht eher so. Ich kann diesen hier tatsächlich. Und jetzt kann ich auch diese Ebenen duplizieren. Okay, von hier aus kann ich das einfach duplizieren. Okay? Ich werde das auch duplizieren. So kann ich grundsätzlich duplizieren, oder wenn ich viel mehr Boxen erstellen möchte, kann ich sie entsprechend erstellen. Okay, hier werde ich die Farbpaletten platzieren. Vielleicht behalte ich das hier. Ich setze hier einfach ein paar Farben und ein Bild ein, oder ich mache das einfach draußen. Okay, keine Sorge, auch damit werde ich hier einfach ein weiteres rechteckiges Feld erstellen. Von hier aus werde ich einfachste Weise versuchen, die Bilder hier in dieser speziellen Box zuerst zu importieren. Hier. Okay, wenn ich hierher komme, importiere ich die Schrittdatei und gehe zu den Ressourcendateien. Von hier aus können Sie verschiedene Bilder aufnehmen. Okay, du kannst Bilder herunterklappen. Ich habe momentan sechs Bilder Wenn ich dieses importiere, habe ich all diese Bilder hier auf meiner Box. Okay, wenn ich rauszoome, könnt ihr hier sehen, es gibt all diese Bilder , die ich hier habe. Im Grunde kann ich nur ein bestimmtes Bild auswählen und die Größen verkleinern. Dann könnt ihr dieses Bild tatsächlich vergrößern und dieses Bild dann hier ins Moodboard bringen . Okay, nehmen wir an, wenn ich hier bleibe, wenn ich einfach nach oben gehe, habt ihr das Board hier irgendwo. Ich habe ein Board erstellt. Andernfalls erstelle ich von hier aus einfach eine weitere Kunsttafel. Vielleicht wähle ich die Größe der Zeichenfläche trotzdem so stark aus. Jetzt kann ich diese Bilder einfach hier hochladen. Vielleicht die Größe verringern. All diese Bilder , die ich hier habe, kann ich so behalten. All diese Rahmen, von denen ich meine Farbinspirationen genommen habe , kann ich sogar vergrößern , je nachdem, was ich hier möchte. Außerdem habe ich verschiedene Bilder, die ich hier platzieren kann. Okay, verkleinern Sie die Größe. Komm her an die Ecken. Und verkleinern Sie auch von hier aus. Ich kann mehr Bilder importieren. Angenommen, ich möchte den ganzen Rahmen, den ich erstellt habe , hierher importieren . Okay? Dieser ganze Rahmen. Ich kann diesen Rahmen von hier aus auswählen, und ich kann auch diesen einfügen. Okay, das kann ich machen, aber jetzt werde ich das hier einfach erweitern Ihr könnt sehen, dass ich hier verschiedene Dinge habe, also kann ich die auch dorthin verschieben Okay, die verschiedenen Optionen hier. Sie können sehen, dass es sich um Bilder in voller Größe handelt , die ich im Grunde auch für mich selbst kopieren kann. Ich behalte das hier in einer Ecke. Vielleicht werde ich diesen auch vergrößern. Wählen Sie die zusätzlichen Dinge aus und legen Sie sie irgendwo hier zur Seite. Vielleicht kannst du die Größe so erhöhen . Du kannst es hier hinstellen. So können Sie ein Moodboard für sich selbst erstellen. Versuchen wir nun zu verstehen, wie Sie eine Farbpalette erstellen werden. Okay, komm her, wähle ein Feld aus. Angenommen, Sie möchten sich von hier farblich inspirieren lassen. Kommen Sie hier zum Eye Pipette Tool. Und mit dem Lidpipper-Werkzeug wählen Sie diese Farbe hier auf die gleiche Weise Dann kopiere das. Kommen Sie jetzt hierher in das Feldfeld und ändern Sie die Intensität der Farbe auf die gleiche Weise. Wiederhole diesen Vorgang vier bis fünf Mal. Wählen Sie nun dieses Feld hier und ändern Sie die Intensität ein wenig mehr. Okay? Nochmals, komm her, wähle dieses Feld aus, komm zu diesem und ändere die Intensität. So könnt ihr die Intensität grundsätzlich ändern. Wie oft ihr wollt, ihr könnt das auch machen. Okay? Angenommen, ich möchte im Vergleich dazu mehr helle Farben. Komm her und geh irgendwohin hier. So können Sie Ihre eigenen Farbpaletten erstellen. Ihr kreiert so eine Farbpalette, drei davon, okay? Wie Sie hier sehen können, gibt es verschiedene Farben. Sie können auch mit verschiedenen Farben experimentieren. So können Sie Ihr eigenes Moodboard erstellen. Als letztes wählst du hier beide Frames aus. Danach komm her, gehe zur Dateioption. Gehen Sie von hier aus zum Exportieren und wählen Sie den ausgewählten aus. Exportieren Sie diese. Wie Sie sehen können, wird es exportiert. Wenn ihr jetzt zum System geht, wenn ihr hier zur Download-Option geht, könnt ihr sehen, okay, zuerst denke ich, dass ich das gruppieren muss. Okay, ich werde das zusammenfassen. Wähle dieses einzige Moodboard aus. Jetzt kann ich diesen hier markieren , um einen zu exportieren. Exportieren, ausgewählt. So können Sie also im Grunde Ihre Zeichenfläche exportieren. Hier, wieder zurück. Okay? Und hier kannst du sehen, dass ich meine Zeichenfläche habe, also so könnt ihr eure Zeichenfläche und auch eure Farbpalette auf die gleiche Weise nehmen und exportieren auch eure Farbpalette auf die gleiche Okay, wie Sie hier sehen können, habe ich die Farbpaletten Gruppieren Sie diese und nur die ausgewählten. Und hier, so könnt ihr im Grunde exportieren. Ja, ich habe auch die Farbpaletten, also könnt ihr mir eure Arbeit so schicken und sie in unserem Projektpanel ablegen Und ich freue mich sehr, Ihre Arbeit zu überprüfen und Ihnen die entsprechenden Anweisungen zu geben Okay, bis dahin, pass auf dich auf. Leute, ich hoffe, wir sehen uns alle im nächsten Tutorial. 15. Projekt zur Erstellung eines Web-Seiten-Designs: Hallo Leute, und willkommen euch alle zu einem weiteren Tutorial von Adobe XD. Dies wird also die letzte Lektion sein, in der es sich im Grunde nur um eine Projektklasse handelt. Ich habe euch alles über X D erzählt, wie ihr die jeweilige Anwendung verwenden könnt, wie ihr mit dem UX-Design der Benutzeroberfläche beginnen könnt. Also hier in diesem Kurs werde ich euch von Grund auf zeigen euch von Grund auf , wie man eine Design-Webseite erstellt. Ich werde euch all das zeigen. Und lass uns mit der Klasse beginnen und lass uns anfangen, eine Webseite zu entwerfen. Nun, wieder auf derselben Seite, okay? Und jetzt werde ich von hier aus ein Kunstwerk schaffen. Okay? Von hier aus wähle ich die Zeichenfläche aus, und wie Sie sehen können, habe ich eine andere Webdectop-Größe Ich wähle hier die Größe 1920, 5.080 aus und verschiebe sie an eine andere und Okay. Ja, der ist in Ordnung. Nun, die einfachste Art, wie ich ein Bild auswähle. Okay, dafür habe ich ein Bild gespeichert. Ich werde diese Seite mit einem Bild abdecken, dann werde ich meine Sachen schreiben und ich werde sie nach meinen Wünschen bearbeiten. Okay, von hier aus gehe ich zur Importoption. Importieren. Ich gehe zu meinen Downloads. Aus Downloads habe ich ein Bild von Pixels heruntergeladen. Ich lege das hier mit meiner Schicht hin. Ich werde die Größe dieser speziellen Bildverschiebung hier verringern , ich werde die Größe verringern. Okay. Ich habe diesen speziellen Rahmen hier. Wie Sie sehen können, habe ich das hier. Okay. Ich kann die Größe jetzt im Grunde verringern, wenn ich will. Okay, aber ich behalte es bis so lange. Nun, sehen Sie, die Schicht davon ist startklar, damit ich meine Arbeit hier beginnen kann. Okay, vielleicht wähle ich das aus , wenn ich es zu einer Komponente machen möchte oder wenn ich es im Photoshop bearbeiten möchte, das kann ich tun. Okay, damit kann ich grundsätzlich auch arbeiten. Wenn ich es bewegen möchte, kann ich es einfach nach mir selbst bewegen. Okay, jetzt ist der Hintergrund meiner Webseite fertig. Jetzt muss ich diese spezielle Seite hier bearbeiten. Dafür werde ich zuerst zu dem Textfeld hier im Textfeld gehen, ich werde hier ein bestimmtes Textfeld erstellen, ich werde hier ein bestimmtes Textfeld erstellen in das ich einfüge, was ich hier schreiben werde Nehmen wir an, ich werde kommen und die Größe erhöhen. Ich gebe 30 und trete ein. Okay, ich komme wieder her. Auswahlwerkzeug. Mit diesem Auswahlwerkzeug habe ich diese Seite hier, erstelle ein Textfeld. Wie soll ich das nennen? Okay, lass mich diese Box 45 Home for Everyone nennen diese Box 45 . Ich habe diese kritische Webseite hier. Klicken Sie darauf und ändern Sie jetzt die Größe von hier aus. Angenommen, ich möchte 45 nehmen, und hier habe ich es in dieser Größe genommen. Ich kann die Größe auch von hier aus ändern, oder ich kann sie von hier aus vergrößern. Okay, wenn ich hierher komme, werde ich die Größe der Box erhöhen. Wählen Sie diesen Text erneut aus. Jetzt werde ich von hier aus kommen, auf Enter klicken und auswählen. Das hängt im Grunde von so vielen Dingen ab, wie Sie es wollen. Ich werde es in die Mitte stellen. Jetzt möchte ich den Texttyp ändern. Okay, der Stil, den ich ändern möchte. Okay. Vielleicht nehme ich etwas. Ich nehme das Basic Collaborate. Ich möchte meine Arbeit ganz einfach halten. Okay, vielleicht nehme ich die fett gedruckte Kursivschrift und ändere die Größe auf 90. Ja, ich muss auch die Größe der Box erhöhen. Wählen Sie von hier aus das aus. Ich habe diesen hier. Wählen Sie diese aus und wählen Sie eine Farbe, die Ihnen entspricht. Okay, ich nehme an, ich werde es tun. Äh, etwas, das mit dieser speziellen Farbe hier zusammenpasst . Okay, ich nehme diese Farbe. Nehmen wir an, ich wähle auch den Rand dieser Farbe als Rot oder etwas Dunkles. Aber hier ändere ich den Rand auf zwei und klicke hier auf Enter. Sie können sehen, dass das Logo hier fertig ist. Jetzt kann ich verschiedene Bilder oder verschiedene Arten von Symbolen einfügen, wenn ich Symbole verwenden möchte. Ich werde hier noch einmal zu diesem gehen. Im Finder von hier aus kann ich also viele Arten von Illustrationen nehmen, viele Sticker, wie ich will. Okay, vielleicht gebe ich Home ein. Ich klicke hier. Hier siehst du, dass es viele Drei-D-Animationen gibt, die ich nehmen kann und keinen Link zurück. Und ich will die kostenlosen von hier. Es kann einige Zeit dauern, bis sie hier geladen sind. Wie Sie sehen können, kann ich es entsprechend auswählen. Angenommen, ich möchte diesen nehmen, suche aber nach den kostenlosen. Ich werde zu den Illustrationen der Sticker-Option gehen. So können wir grundsätzlich okay annehmen. Die Bilder, aber sie versuchen, mir eine Kiste zu berechnen, aber ich möchte eine kostenlose Version davon. Okay, ich nehme einfach diesen. Ich lade die Datei gerade herunter. Ich habe heruntergeladen. Geh zurück zu meinem X D. Komm von hier her, ich werde das hier importieren. Ihr könnt das haben. Okay, vielleicht kann ich das mit Shift einfach vergrößern. Okay, ich wähle das aus und bringe es hierher. Okay. Und von hier aus kann ich die Rahmengröße auf zehn wählen. Und ich werde hier auf Enter klicken. Sie können sehen, dass ich hier ein Symbol habe. Okay, ich wähle das hier aus und ich werde es einfach gruppieren. Ich habe das jetzt hier. Dieser ist fertig. Und alles, was ich hier reinstellen will, okay, ob ich irgendwelche Bilder oder andere Bilder über die Gruppe posten will. Okay, ich kann es hier eintragen , nehmen wir an, ich möchte die Speisekarte oder so etwas aufstellen . Erstellen Sie erneut das Textfeld oder bringen Sie Ihr Textfeld einfach hierher. Erstellen Sie hier ein Textfeld. Ich reduziere das auf 30. Ich klicke hier auf Enter, komm her und schreibe Menu. Nun, was ich mit diesem machen werde, ist, dass ich verschiedene Boxen erstellen kann. Okay? Nehmen wir an, mit Al werde ich hier eine andere Box erstellen. Angenommen, ich möchte hier fünf Boxen haben. Etwa fünf Optionen, okay? , ich werde hier weitermachen, aber später werde ich euch erklären, wie ihr im Grunde hier sein könnt. Hier habe ich noch fünf Optionen , okay? Ich werde jetzt schreiben, okay, zuerst schreibe ich uns, als nächstes schreibe ich Arbeit. Dann komme ich zu diesem Menü und wir, was soll ich hier über unsere Arbeit schreiben? Und wir schreiben hier Ereignisse. Ich komme her und schreibe, okay, all diese Optionen sind hier ganz anders. Das Letzte, was ich schreiben werde, ist, zu uns zu kommen. Ich versuche hier eine NGO-Seite zu erstellen, okay? Ich werde sicherstellen, dass der Abstand zwischen all diesen angemessen ist, okay? Ich werde einen guten Abstand zwischen allem und jedem einhalten. Hier habe ich. Ich richte mich auch an derselben Stelle aus. Okay. Ja. Wie Sie jetzt sehen können, habe ich einen guten Abstand zwischen diesen und sie können verstehen, dass das so ist, das ist die Menüleiste, von der aus sie im Grunde umgehen können. Okay, ich bin mit diesem fertig und jetzt kann ich von hier aus etwas erstellen. Ich möchte kurz darlegen, worum es hier geht. Ich kann einen Untertitel verwenden, wenn ich hierher komme und hier eine weitere Box erstellen möchte. Also werde ich hier ein Textfeld erstellen. Jetzt schreibe ich in dieses Textfeld, ich werde schreiben, was zu Veränderung und Hoffnung inspiriert. Das wird mein Untertitel sein, okay? Oder das Motto von hier. Ich werde einfach die Größe ändern, vielleicht auf 60. Ich klicke auf Jetzt eingeben, ich kann die Farbe auch von hier aus ändern Angenommen, ich möchte einen Kontrast dieser Farbe und ich möchte auch den Rand überprüfen. Okay, vielleicht die Grenze. Ich nehme etwas in Grün. Ich ändere diesen Strich auf zwei, das ist in Ordnung. Okay. Ich behalte das hier mit meinem Auswahltool. Ich werde es auswählen und entsprechend platzieren. Jetzt kann ich hier auch eine Box erstellen. Okay. Eine Box für eine Box für die Suche. Okay. Oder ich, irgendein Symbol. Komm hier zum Icon-Finder und ich werde hier eine Suchschaltfläche erstellen. Okay, ich komme her. Wie Sie sehen können, habe ich hier verschiedene Suchschaltflächen. Ich kann eine von hier nehmen, ich kann das tun und von hier aus wieder zu meiner XD-Datei zurückkehren, ich kann die im Grunde irgendwo hier platzieren. Okay, geh wieder zur Importdatei. Von hier aus werde ich das importieren und verkleinern. Dieser, manchmal ist es ziemlich schwierig, ihn einfach zu verschieben. Ich werde diesen hier einfach um diesen speziellen Kreis bewegen . Jetzt kann ich das einfach verkleinern . Ja, habe ich. Ja, das ist der Surge-Button hier. Ich kann im Grunde ein paar Bilder von dieser speziellen NGO hochladen Okay? Der Name der NGO ist das Zuhause für alle Der Slogan inspiriert zu Veränderung und Hoffnung. Okay, wenn ich nun eine Seite erstellen möchte, nehmen wir an, ich möchte hier bestimmte Boxen erstellen. Als ob ich möchte, dass sie ihre Namen eintragen. Hier, okay, hier. Und dieselbe Kiste. Ich werde diesen duplizieren. Okay, komm her, sieh dir das Auswahlwerkzeug an. Klicke darauf. Dieser. Diesen hier kannst du auswählen. Ich nehme hier ein anderes Feld, und hier werde ich mit meinem Textfeld hier schreiben. Ich werde Don schreiben. Okay, wähle diesen speziellen Text aus. Damit bringe ich diesen hier her. Dazwischen. Ich ändere auch die Farbe. Okay, vielleicht werde ich schwarz färben. Ich will keine Grenzen. Okay. Ich möchte, dass das breit ist. Ich behalte den hier. Vielleicht kann ich einfach fett schreiben. Jetzt werde ich die gleiche Box hierher kopieren. Okay, jetzt werde ich das auswählen. Mit diesem werde ich ihn hierher bringen. Hier, hier. Also im Grunde kann ich es so ausdrücken. Okay? Also von hier aus, also jetzt werde ich hier den Namen eingeben. Ich gebe Telefonnummer, Betrag, E-Mail-Adresse, E-Mail ein. Okay. Also ich habe diesen hier, Leute können sehen, dass meine Webseite hier fertig ist. Okay. Ich kann hier noch ein paar Dinge hinzufügen, spende uns von hier aus. Sie können sehen, dass ich die Textoptionen hier habe, aber wenn ich hier das fett gedruckte Metallic nehme, können Sie sehen, dass es im Grunde so aussehen wird. Okay. Hier kannst du sehen, dass meine Webseite fast fertig ist, aber ich möchte ein paar der Buttons hier platzieren. Okay. Ich werde wieder herkommen. Okay, hier möchte ich mich anmelden, einloggen oder ich werde schauen , welcher besser aussieht. Okay, vielleicht kann ich den nehmen. Dieser sieht ziemlich gut aus. Ich werde das SVG-Formular von hier herunterladen. Komm hier zu meinem X. Jetzt werdet ihr das sehen können. Ich werde es wieder importieren. Von hier aus werde ich es tun. Wie Sie hier sehen können, habe ich diesen speziellen Button. Okay. Klickt auf Shift, und nachdem ihr Shift geklickt habt, könnt ihr ein bisschen herkommen. Wählen Sie hier aus. Sobald Sie auf diese klicken, werden Sie zu einer anderen Seite weitergeleitet. Okay, ich hoffe ihr habt es verstanden. Und jetzt kann ich auch einige der Bilder importieren. Vielleicht stelle ich es hier hin und schreibe unsere Kampagnenkampagne. Wähle das aus, platziere es irgendwo hier. Schieb diesen, ein kleines Oberteil unter diesen. Ich werde ein paar Bilder hinzufügen. Okay, hier, ich möchte ein paar Bilder dafür hinzufügen, ich werde dieses spezielle Feld hier auswählen. Zuerst werde ich diese Box erneut duplizieren. Okay, hier habe ich auch hier wieder eine bestimmte Box ausgewählt. Von hier aus werde ich das an derselben Linie ausrichten. Komm her, geh zur Importoption. Aus dem Import werde ich einige der Bilder importieren. Okay, von hier aus werde ich wieder dieses Bild auswählen. Ich werde dieses importieren, aber das Bild ist zu groß. Mit meiner Schicht werde ich die Größe des Bildes verringern und auch eine weitere Datei importieren. Ich hätte es sofort machen sollen, aber vielleicht mache ich dieses Bild. Ich werde das hier importieren. Okay. Ja, ich habe dieses Bild. Ich werde versuchen, diesen hier und diesen hier her zu bringen. Jetzt zoome ich wieder an meinen Arbeitsplatz heran. Nun, wie Sie sehen können, habe ich beide Bilder, aber was ich tun möchte, ist, dass ich das in das Bild einfließen lassen möchte. Okay? Angenommen, ich habe diesen und diesen. Was ich jetzt tun kann, ist vielleicht, dass ich das zusammen auswähle. Ich möchte beide zusammen auswählen. In diesem Fall, was ich tun kann, werde ich hierher kommen und hier klicken. Ich werde daraus eine Gruppe machen. Nun, ich habe hier zwei Bilder, wie Sie in meinem Hintergrund sehen können. Ich habe auch Bilder. Was ich hier tun kann, ist , okay, lass mich das löschen. Anstatt meine Bilder in dieses Feld selbst zu legen, gruppiere ich dieses, wenn ich hierher komme, und jetzt kann ich dieses auswählen und löschen. Und wähle das aus. Und lösche auch diesen. Okay, das wird der letzte Schritt sein, wo ich alles anbringen werde und ich werde Seite hier sein. Okay, nochmal, komm her. Gehe zur Importoption. unter den Importoptionen Wählen Sie unter den Importoptionen beide Bilder aus. Importiere es. Und wie Sie sehen können, zoome ich einfach ein bisschen heraus. Und jetzt kann ich einfach Bilder entsprechend auswählen. Angenommen, ich möchte nur dieses Bild hier auswählen. Und jetzt möchte ich die Größe dieses bestimmten Bildes hier verringern . Okay? Und genauso möchte ich auch die Größe dieses Bildes verringern. Okay, jetzt lass uns her kommen. Lass uns dieses Bild mit meinem Handwerkzeug aufhängen. Ich komme her und mit dem alten zoome ich rein. Bring das hier hin. Sie können sehen, dass ich dieses Bild hier habe. Okay. Von hier aus, einfach auf Shift klicken, kann ich mich im Grunde in diesem Bild bewegen , wo ich dieses Bild platzieren möchte. Nehmen wir an, wenn ich dieses Bild hier platzieren möchte, kann ich das hier platzieren. Und ich habe auch ein anderes Bild hier. Okay, ich werde dieses spezielle Bild auch hierher bringen. Ihr könnt es hier sehen. Ich habe das Bild auch hier, damit ihr sehen könnt ich die Bilder grundsätzlich ändern oder vergrößern kann . Ja, jetzt ist meine Webseite fertig. Wie ihr sehen könnt, habe ich eine Webseite für NGO Okay. Der Name der NGO ist also das Zuhause für alle und das ist das Motto und das sind einige der Bilder ihrer Kampagne Und hier kannst du spenden, gib deinen Namen an, wenn du etwas wissen willst So können Sie also grundsätzlich Webdesign machen. Okay, ich hoffe, du hast den einfachsten Weg verstanden. Und jetzt ist das Letzte , was du tun wirst, hierher zu kommen und du kannst diese Gruppe im Grunde gruppieren. Wenn ich das jetzt verschiebe, bewegt es sich alles auf einmal, okay? Wenn ich das hier auswähle, wie Sie sehen können, sobald ich diese ausgewählt habe und hierher gekommen bin, können Sie sehen, dass es verschiedene Gruppen gibt. Okay? Das ist Gruppe eins, Gruppe vier, okay? Hier können Sie sehen, dass es hier verschiedene Arten von Dingen gibt. Das ist die Webseite , an der ich gearbeitet habe. Ich werde diese von hier löschen. Das ist die Kunsttafel. Ich hoffe, ihr habt alles über diesen Kurs verstanden. Endlich habe ich euch gezeigt, wie ihr unser eigenes Design von euch selbst erstellen könnt, während ihr eine Webseite erstellt. Okay, ich habe euch den einfachsten Weg gezeigt , wie ihr tatsächlich mit dem Entwerfen beginnen könnt. Ich hoffe, wir sehen uns alle im Klassenprojekt, und ich habe euch allen einige Projekte gegeben. Und ich hoffe, dass ich sie von euch allen zurückbekomme , okay. Dass ich sie überprüfen und euch Feedback geben kann, wie ihr es schaffen könnt. Okay. Also hier habe ich hier gerade eine ganz einfache Webseite erstellt. Ihr könnt das sogar verbessern, indem ihr einige der drei D-Animationen benutzt. Und so können Sie andere Webseiten sehen und sie entsprechend sehen. Und ich habe euch Prototypen gezeigt, damit ihr auch Prototypen erstellen könnt , indem ihr mehr Seiten erstellt Okay, also wenn ihr mehr Seiten schickt, habe ich kein Problem damit, diese auszuchecken Ich würde mich wirklich freuen , dass ihr geschickt habt. Bis dahin, seid vorsichtig und hoffe, euch alle in einem anderen Kurs zu sehen . Wenn ihr irgendwelche Probleme mit diesem Tutorial habt, wenn ihr nichts versteht, jedes Mal da sein, wenn ihr euch bei mir melden könnt werde ich jedes Mal da sein, wenn ihr euch bei mir melden könnt, um euch zu helfen. Passt auf euch auf, Leute und auf Wiedersehen.