Figma für UI/UX Design 2021: Learning by Doing Ansatz

1. Einführung in den Kurs: Hey Freunde, willkommen zu diesem Kurs. Mein Name ist Samira und ich bin UX und Product Designer. Ich habe diesen Kurs für Anfänger entwickelt, die Sigma für UI UX Design lernen möchten. In diesem Kurs werde ich Sie auf eine Reise von der Anforderung des Kunden zu verstehen, was ein Wireframe ist, was die Anforderung ist, die illustriert wird. Und dann entwerfen Sie diese Website absolut von Grund auf neu. Wir werden das Lernen verwenden, indem wir Methodik machen, was bedeutet, dass Sie, wenn ich dies erstelle, diesem exakten Design des Kurses folgen können. Und abscheulich, dass du das tust, wirst du alle Funktionen und Funktionen von Sigma lernen. Ein Vorschlag, den ich an dieser Stelle machen möchte , ist, diesen Kurs zu machen und nebeneinander zu üben. Wenn Sie zwei Monitore wie diesen haben, dann können Sie einen Fichman einen Monitor feuern und den anderen verwenden, um den Kurs zu laufen. Wenn Sie dies nicht tun, können Sie ein Handy oder ein Tablet verwenden und den Kurs in der mobilen App ausführen und mit Ihrem Computer an Sigma arbeiten. Ich freue mich sehr auf deine Reise, Sigma zu lernen. Ich werde diese Einführung kurz bekommen und fangen wir an. Wir sehen uns in der nächsten Klasse. 2. Die Umgebung einrichten: Lassen Sie mich ins eigentliche Lernen springen. Lassen Sie uns die Umgebung an erster Stelle setzen. Ich möchte Ihre Aufmerksamkeit auf zwei Akten lenken, die ich in den Links dieser Vorlesung verweisen werde. So eine ist die Arbeitsmappe Datei, ausgezeichnete Studie im Ausland. Die Arbeitsmappendatei. Dies ist die Datei ist etwas, das Sie verwenden werden, um mit zu arbeiten. Es hat die Client-Kurzbeschreibung, es hat den Wireframe. Ich habe die Wireframes zur Verfügung gestellt, so dass es für das endgültige Design ein wenig einfach wird. Und dann erhalten Sie Arbeitsmappenbereiche, um Ihre eigene Farbpalette zu erstellen, um die eigene Typografie festzulegen. Ich habe auch die Bilder hier drüben aufgenommen. Und dann können Sie hier das eigentliche Design beginnen. Und die zweite Datei, die ich in den Ressourcenabschnitt aufgenommen habe ist die Referenzdatei, in der dies die Datei ist, die ich verwendet habe, um dieses Design zu erstellen. So sehen Sie diese Farbpalette, die ich entworfen habe, um den Kurs gleich zu arbeiten, die Sie auch mit mir gestalten können. Sie können die Topografie sehen, die ich gesagt habe, und Sie können das endgültige Design in das sehen. Also im Grunde habe ich zwei Links zur Verfügung gestellt. Also, was ich tun wollte, ist, auf einen Link zu klicken. Das wird also so etwas passieren. Sobald Sie also auf einen Projektlink klicken und Sie einfach eingeben, müssen Sie sich bei FISMA anmelden. Fisma arbeitet in einem Browser. Fisma hat auch Anwendung. Ich werde Ihnen empfehlen, die Anwendung herunterzuladen. Also ok, sobald Sie die Ressourcen nach unten geklickt haben, wird sich etwas wie dieses öffnen. Es sollte eine reine Ansicht Datei sein. Dies ist also die Arbeitsmappendatei, die Sie haben. Also, was Sie tun müssen, ist, dass Sie hier in der Rechnung nur Abschnitt gehen müssen und Sie müssen das in Ihre Entwürfe duplizieren. Also, was passieren wird, wenn Sie diese Datei duplizieren, wird diese Datei auf Ihre Feige kopiert meine Entwürfe und es wird ein Teil Ihrer letzten Dateien oder jedes Projekt, das Sie gerade haben. Also werde ich das einfach in meine Entwürfe duplizieren. Und wenn das passiert, kann ich das einfach öffnen. Und Sie werden sehen, dass es jetzt geöffnet wurde und das vollständig editierbar ist. Es hat eine kleine geführte Annäherung als auch. Ich kann das vorerst einfach ignorieren. Aber dann werde ich in der Lage sein, Änderungen an der Art und Weise vorzunehmen, die ich in diese Datei möchte. Also im Grunde möchte ich, dass Sie diese Links verwenden, um zu den Dateien zu gelangen. Alternativ werde ich die Dateien herunterladen und auch eine ZIP-Datei bereitstellen, damit Sie diese Dateien physisch herunterladen und vielleicht sogar hochladen oder in Sigma importieren können. Okay, dann denke ich, dass das genug ist, um die Umwelt einzurichten. Wir sehen uns in der nächsten Klasse. 3. Wenn du Probleme mit dem Importieren von Dateien hast.: Der Alarm aus, Sie können die Arbeitsmappendatei nicht öffnen , nachdem Sie sie aus der vorherigen Vorlesung heruntergeladen haben. Ich versuche, dafür eine schnelle Lösung zu finden. Mittlerweile können Sie aber immer die Links, die in der vorherigen Vorlesung zur Verfügung gestellt werden, sowie diese Vorlesung in der Beschreibung verwenden sowie diese Vorlesung in , um die Arbeitsmappendatei oder die Referenzdatei direkt zu öffnen. Wie Sie wissen, für sigma ist Online-kollaboratives Werkzeug. Sie müssen die Dateien nicht herunterladen und ausschließlich importieren. Sie können einfach diese Links verwenden und erhalten, lernen Sie alles Gute. 4. HELLO WORLD: In dieser Lektion werden wir die grundlegenden Funktionen von Sigma erkunden und versucht, die Sigma-Benutzeroberfläche zu verstehen. Aber davor möchte ich, dass Sie sicherstellen, dass Sie diese Datei verwenden, die ausgezeichnete Studie im Ausland ist, die Arbeitsmappendatei. Aus Gründen der Wiederholung möchte ich Ihnen noch einmal sagen, dass dies die Datei sein wird , die Sie während des gesamten Kurses verwenden werden, um zu entwerfen. Zum Beispiel hat diese Datei diese Seiten hier. Es hat die Client-Kurzbeschreibung, es hat das Drahtmodell, die Farbpalette. Dies ist nur eine Struktur. Du wirst in der Lage sein, mir in den Zielen zu folgen und deine eigene Farbpalette zu erstellen. Gleiches für Typografie, einige Bilder. Und das wird eine leere Leinwand sein, auf der Sie entwerfen. Also möchte ich Sie auffordern, diese Datei offen zu halten und mir einfach zu folgen und lassen Sie uns versuchen, die Feige, meine Schnittstelle zu verstehen. Wenn wir das Programmieren lernen, ist das allererste Programm, das lehrt, dass der hallo Welt. Hallo Welt ist nichts anderes als nur eine einfache Einführung in die Welt der Codierung. Wir werden etwas Ähnliches für Design tun. Bisher möchte ich nur ein paar Bildschirme von einer App entwerfen. Und ich werde versuchen, so viel wie möglich die Funktionen zu verwenden. Also mal sehen. Ich stelle dir Sigma vor. Das ist also der gesamte Arbeitsbereich. Damit müssen wir arbeiten. Diese werden als Regions-Tools bezeichnet. Ich wähle das erste Legion Dual aus, das einen Rahmen hat. In FISMA wird der ungerade Modus als Frame bezeichnet. Wir haben alle diese Optionen auf der rechten Seite. Sie können beispielsweise einen Rahmen für ein Telefon auswählen. Sie können einen Rahmen für ein Tablet im Vergleich zu Desktop-Präsentation, Uhr, Papier usw. wählen. Ich werde nur wählen, sind der Rahmen für das Telefon. Lassen Sie uns iPhone 11 pro machen. Sobald ich darauf klicke, bekomme ich diesen Rahmen hier drüben, der auch zu meinem Kunstboard wird. Dies wird also genau in das iPhone schauen, sobald wir das Design der App abgeschlossen haben. Wenn ich kann, kann ich hier doppelklicken und ich kann ihm vielleicht diese Kunst vorlesen. Ich möchte es Anmeldebildschirm für jetzt umbenennen. Anmeldebildschirm. Also für unsere App, die wir gerade gerade für unsere Hello World App entwerfen. Dies wird der Anmeldebildschirm sein. Jetzt gehe ich zum Textwerkzeug und klicke einfach irgendwo, und ich schreibe einfach Login. Es funktioniert wirklich sehr einfach. Es ist ziemlich unkompliziert. Und jetzt werde ich seine Schrift ändern. Um das zu tun, kann ich zu diesem Design-Panel hier gehen, und dann kann ich Text sehen. Also dieser Bereich bezieht sich auf die, alle Manipulationen, die wir durch den Text tun wollen. Ich werde nur die Schriftgröße von 12 auf 80 erhöhen. Sobald ich, sobald ich das tue, können Sie sehen, dass die Schriftgröße erhöht wurde. Ich gehe wieder zu den Formwerkzeugen. Ich wähle die Linie aus und dann werde ich einfach beiläufig Linie darunter zeichnen. Nun, wenn ich die Linie zeichne, siehst du, dass es ziemlich Hayward läuft. Aber wenn ich beim Ziehen die Umschalttaste drücke , rastet die Linienart in 4590-Grad-Winkel ein. Ziemlich cool. Feature dies. Also werde ich nur eine Linie zeichnen, richtig? Machen Sie es ein wenig, wissen Sie, haben Sie einen Anschein eines Login-Bildschirms. Nun wollen wir dasselbe tun, um auch den Passwort-Appell zu erfassen, oder? Also ein schneller Weg, dies zu tun, da ich beide dieser Elemente wie folgt auswählen werde, werde ich nur ziehen und ich werde einfach die Eingabetaste auf meiner Tastatur drücken. Und dann duplizieren wir es einfach so. Ich ziehe es einfach. Und dann schreibe ich einfach das Passwort hier. Ziemlich einfach. Also mach dir keine Sorgen, wir basteln nur irgendwie an der Schnittstelle. All das wahre Lernen wird in den nächsten Vorträgen passieren. Und ich werde viel detaillierter sein und ich werde auch ein wenig langsam sein, so dass Sie es einfach ausarbeiten können, während Sie lernen. Das wird Ihnen helfen, die Fähigkeiten aufzubauen und nicht viel Zeit später zu verbringen, sie zu überarbeiten. Okay, also komm zurück zu diesem, was ich jetzt tun kann, ist, dass ich hier einen Knopf hinzufügen muss, der sagt, vielleicht geben Sie ein. Also, wie geht man das? Also werde ich zu den Formwerkzeugen als Akteurrechteck gehen. Und ich werde nur zufälliges Rechteck zeichnen. Also das Gute an Sigma ist, wenn ich beginne, dieses Rechteck zu verschieben, wird es mir nur den Leitfaden für die Ausrichtung zeigen, diese rote Linie, die Sie sehen. Also werde ich es hier ausrichten. Und ich will, dass ich jemals die Farbe davon ändern will. Um also die Farbe zu ändern, gehen wir wieder zum Designpanel und wählen auf dem gefüllten aus. Also, sobald ich darauf klicke, bekomme ich, um jede Farbe, die ich will, zu wählen. Verwenden Sie diesen Schieberegler, um eine beliebige Farbskala zu durchlaufen. Ich wähle das aus. Okay, das klingt viel Gehirn, also schließe ich das einfach. Wie Sie sehen können, wurde die Farbe nicht geändert. Damit es irgendwie wie eine Schaltfläche aussieht, ich einen Eckenradius hinzu. Das wird nur hier passieren. Ich werde es nur spät 20 Pixel machen, so dass es wie ein Metall aussieht. Vielleicht mache ich 30. Es wird ihm ein abgerundetes Aussehen geben. Okay, und jetzt, um Text darauf zu setzen, gehe ich wieder zum Text-Werkzeug und ich werde hier und wieder schreiben , indem ich es einfach entlang ziehe. Und so haben wir bisher einen sehr rudimentären Login-Bildschirm erstellt. Nun ist eine sehr coole Sache über Sigma ist, dass Sie mit Sigma eine Menge Plugins herunterladen können , die Ihnen mit dem Workflow helfen. Ich zeige Ihnen, wie Sie die Plugins herunterladen. Also, wenn Sie nur in die Statusleiste gehen, gibt es bereits eine Bar gottlose Plugins. Ich habe alle diese Plugins Futter für diesen Kurs und für meine FISMA heruntergeladen. Um also ein Plugin herunterzuladen, müssen Sie zu Plugins verwalten gehen. Und dann, wenn Sie, das sind die Plugins, die ich installiert habe, werde ich Ihnen empfehlen, Web-Gradienten zu installieren. Quantifizierer und splash diese drei Plugins. Der grundlegende Weg, dies zu tun, ist, hierher zu gehen. Und dann suchen Sie einfach nach dem Plugin. Wie zum Beispiel, wenn ich herunterladen und spritzen möchte, werde ich einfach danach suchen. Und Sie sehen sie Splash Plugin. Im Moment ist es installiert, dass mein System. Aber wenn Sie einfach darauf klicken, wie zum Beispiel, wie Sie eine solche Schaltfläche sehen, wenn Sie sie nicht installiert haben, wird sie mit einem einzigen Klick installiert. Du musst gar nichts tun. Und sobald Sie zu Ihrem Arbeitsblatt zurückkehren, wird es dort sein. Also werde ich einfach das Symbol öffnen, wenn ich mich jetzt einstecke. Also und ich werde nur ein Symbol finden, Symbol, wenn ich Plug-in können Sie ein beliebiges Symbol finden. Also werde ich das irgendwie herunterladen. Ich mag das wirklich. Ich werde das für 200 Pixel herunterladen. Ich werde das schließen und es einfach hier platzieren. Kühle Hälfte. So haben wir es gerade geschafft, einen sehr rudimentären Login-Bildschirm einiger Art zu entwerfen. Also lassen Sie uns nur Gene diese Farbe, in die wir sie ändern können. Wenn Sie dies mit der Farbe der Schaltfläche abgleichen möchten, können Sie einfach den Farbwähler auswählen. Sie können hier klicken, da Sie sehen, wie sich die Farben ändern. Wenn Sie etwas lebendigeres wollen, können Sie sich für einen linearen Farbverlauf entscheiden. Und Sie können eine Art von zwei verschiedenen Farben verschiedener Familien wählen und dann versuchen, Sie wissen schon, nur jazzy Cup, wissen Sie. Ok. Das sieht also cool aus, oder? So in Ordnung. Also lasst uns voran gehen. Lassen Sie uns einen weiteren Bildschirm entwerfen. Nur zum Spaß. Wir versuchen nur, herumzubasteln. Es gibt keinen richtigen Weg, es gibt keinen falschen Weg für den Moment. Also werde ich voran gehen und jetzt möchte ich ein anderes an Bord erstellen. Also der Weg, das zu tun, ist, dass ich vielleicht auch dieses Kunstboard duplizieren kann indem du Befehl D drückst und du wirst das gleiche an Bord hier rüber springen sehen. Ich kann dies einfach löschen, indem Sie auf die Rücktaste klicken oder die Tastatur löschen, die Sie verwenden. Also, um eine weitere Geschichte hinzuzufügen, und ich gehe zurück zum iFrame-Tool. Und ich füge das iPhone 11, Bruce grün wieder hinzu. Und jetzt wird das eine Art Produktseite sein, wissen Sie. Das wird also jedes Bild haben. Also wieder gibt es dieses schöne Plugin namens Splash. Ich zeige Ihnen nur, wie einfach es ist, ein Bild hinzuzufügen. Also werde ich zu Plugins gehen. Ich wähle und spritze. Okay, also, aber vorher werde ich hier einfach Rechteck zeichnen , damit ich mein Vorgestelltes direkt auf dieses Rechteck setzen kann. Also gehe ich von den Formwerkzeugen zum Rechteck-Werkzeug. Ich werde hier einfach ein Rechteck behalten, zentral ausgerichtet. Und dann werde ich in diesem Plugin suchen. Ich suche nach Schuhen. Und oh, das ist großartig. Ich denke, ich werde dieses Bild verwenden. Also, dieses Bild auf dieses Rechteck zu setzen ist so einfach und einfach darauf zu klicken und sehen Sie Ihr Bild hier zu bekommen. Und nur, ich werde ein Textfeld verwenden, um nur einen Preis zu erwähnen. Ich sehe aus wie hier. Ich schreibe 350 Dollar. Klingt über richtig, für so lebendige Schuhe Rate, sind Nike wie Okay, also keine Ablenkungen. Okay, dann muss ich vielleicht nur eine sehr große Knöpfe machen, aber es ist gerade jetzt. Also werde ich in das rechteckige Dual Wieder gehen. Ich wähle das Rechteck aus. Und dann werde ich wieder das große Rechteck auswählen. Ich werde die Kanten abrunden, um Toddy aus diesem Bereich. Und um diese Farbe aufzugeben, werde ich jetzt ein anderes Plugin verwenden. Das nennt man Webgradienten. Verläufe, und dieses Plug-In hat bereits einige Gradienten in der Masse. Also werde ich einfach weiter scrollen, bis ich ein Plug-in finde, das ich wirklich mag. Vielleicht mag ich diesen hier. Also werde ich einfach darauf klicken und Sie können sehen, dass wir einen Gradienten dazu haben. Ich werde ein Textwerkzeug verwenden. Und jetzt werde ich das in der Mitte ausrichten. Und so haben wir keine allzu rudimentären Bildschirme unserer App. Ich werde schnell versuchen, das zusammenzufassen. Ich füge einen weiteren Frame über die Regionswerkzeuge hinzu. Und ich werde hier nur Erfolg schreiben. Und ich werde das einfach ausrichten. Okay, so haben wir gerade etwas zusammengestellt, indem wir mit Sigma basteln. Um an einem beliebigen Teil zu zoomen. Was Sie tun werden, ist, Sie können Z oder Z drücken und dann können Sie einfach ein Quadrat wie dieses ziehen, und dann wird es nur auf diesen Bereich gezoomt. Wenn Sie Ihr Scrollrad auf der Maus verwenden möchten, können Sie den Befehl drücken und dann nach oben scrollen, nach unten scrollen, um zu vergrößern und zu verkleinern. Und dann, wenn Sie das greifen wollen und wie es gleiten, dann können Sie den Griff verwenden. dem Handwerkzeug können Sie einfach die Kunstbretter greifen und schieben und Sie können einfach die Escape-Taste drücken, um loszulassen. Eines der coolen Eigenschaften von Sigma ist auch das Fig Geiz Prototyping. Mal sehen, was wir damit meinen. Also, so ein Benutzerereignis, der Benutzer kommt zu diesem AP Hill, er oder sie wird diesen Bildschirm zuerst sehen und dann werden sie eingeben und auf die Seite gehen. Und dann, wenn sie auf „Kaufen“ klicken, erhalten sie diese Erfolgsbotschaft. Dies ist der grundlegende Fluss, den wir derzeit vor uns haben. Um das zu tun, ging ich zum Abschnitt Prototyp. Und dann muss ich nur die Tasten mit den Zielen verbinden. Wie zum Beispiel, wenn ich möchte, wenn der Benutzer auf die Eingabetaste klickt, sollte der Benutzer zu dieser Bildschirmrate gehen. Also werde ich nur mal dieses Kunstboard Zeit. Und wenn der Benutzer auf diese Schaltfläche klickt, sollte er zu diesem Bildschirm gehen. Und das war's. Lassen Sie uns jetzt einfach überprüfen, was wir bisher getan haben. Einfach herumbasteln, indem Sie auf den aktuellen Tab hier drüben klicken. Wenn ich auf Gegenwart klicke, wird es mir nur die App zeigen. Mal sehen, wie es aussieht. Ok, also ist das eigentlich in einem iPhone-Rahmen. Wenn ich also auf Enter klicke, zeigt es mir diesen Bildschirm. Wenn ich auf Jetzt kaufen klicke, zeigt es mir Erfolg. Das ist also die sehr grundlegende Operation von Sigma. Während der nächsten Lektionen werden wir viele Nuancen hinzufügen. In der UI UX entwerfen Sie dieses Tool. Es ist nur ein Teil davon. Verständnis des Prozesses ist die Mehrheit des Wissens und Übens von UI-UX-Design. In den nächsten Vorträgen werden wir also den Prozess des Verständnisses der Schritte durchlaufen, von der Client-Briefung über das Wissen des Drahtmodells bis hin zur Einstellung der Farbpaletten-Topographie und dann Springen in ihr Design. Ich freue mich sehr auf eure Reise ins Sigma und sehe euch in der nächsten Klasse. 5. Verstehe die Kundenanforderungen und Wireframe: Jetzt werden wir einen Blick auf den Client Brief für Benutzerfreundlichkeit nehmen, Ich habe den Client Brief in dieser Seite in die ausgezeichnete Studie im Ausland Arbeitsmappe aufgenommen. Um in der Client-Kurzbeschreibung zu zoomen, können Sie entweder den Befehl auf dem Mac oder die Steuerung unter Windows drücken und das Mausrad verwenden. Oder es gibt einen ordentlichen Trick, bei dem Sie Z oder Z drücken und dann einfach eine Auswahl ziehen und dann sehen Sie es auf die Auswahl gezoomt, die Sie machen. Eine Projektbeschreibung ist im Wesentlichen etwas, das der Kunde Ihnen sendet, der Kunde schickt einen Designer. In der Regel handelt es sich um ein Word-Dokument. Zum Beispiel spricht dieses Dokument über den Namen des Unternehmens, das ausgezeichnete Studium im Ausland ist. Ziel ist es, eine Landingpage für die neue Unternehmenswebsite zu erstellen. Es gibt Komponenten auf der Hero-Seite. Es ist alles da in dieser Anforderung. Um dies zu schieben, können Sie es mit dem Handwerkzeug greifen und Sie können sich irgendwie um den Karton bewegen, wie Sie möchten. Nun wurde dieser Client Brief in ein Drahtmodell konvertiert, und ich habe diesen Wireframe in diese spezielle Datei aufgenommen. Am Ende des Kurses nehmen wir kurz zehn Minuten Zeit, wie man ein Drahtmodell erstellt. Aber für Ihr Lernen jetzt, ich denke, Sie können diese Landing Page Bagram verwenden, die ich bereits enthalten habe. Lassen Sie uns durch den Wireframe gehen wirklich schnell. Und dann starten wir den eigentlichen Entwurfsprozess. Ich werde z benutzen und dann werde ich nur eine Auswahl treffen. Also im Grunde sprechen wir über die Titelseite der Website. Es wird hier ein Logo geben. Es wird diese Navigationsleiste geben. Dies ist die Kopie in zwei Schriftgrößen, um Gesichter zu sterben. Dies sind die sozialen Symbole, die in der Kundenübersicht erwähnt werden. Das bedeutet, dass es hier ein Bild geben wird. Der Kunde hat bereits in der Kunden-Briefung erwähnt, dass sie ein Foto von einem Mädchen, das College geht , weil dies wird wie sein, weil dies wird studieren im Ausland Website. Dies sind die Dienste, die sie derzeit haben. Auf der Website. Es gibt auch Details zu einigen bevorstehenden universitären Veranstaltungen. Dies sind die Länder, die sie abdecken. Es wird geben, wenn Zeugnis und dann gibt es diesen letzten Aufruf zum Handeln genannt, wie Sie bereit sind, Ihre Träume zu verwirklichen? Und dann ist der Button nicht anwendbar, für Sie oder wenn ich jetzt zum Client kurz gehe, werden Sie sehen, dass genau alle Dinge in diesem abgedeckt sind. Ich habe diese sehr Client-Kurzbeschreibung verwendet, um diesen Wireframe zu erstellen. Und nur um Ihnen einen Einblick zu geben, was kommen wird, wenn Sie die ausgezeichnete Studie im Ausland Referenz-Sigma-Datei öffnen, die ich gegeben habe. Das ist also das endgültige Design, das ich aus diesem Drahtmodell erstellt habe. Und das wird das ganze Glas sein, worin du lernen wirst, wie man dieses Drahtmodell umwandelt. Sie werden lernen, wie Sie dieses Drahtmodell konvertieren und ein Design wie dieses erstellen. Das war's vorerst. Wir sehen uns in der nächsten Klasse. 6. Farbpallete und Grundfarben: Es wird eine sehr interessante Lektion geben. In dieser Lektion werden wir unsere Farbpalette entwerfen. Was ich getan habe, ist, dass ich eine Vorlage in diese Seite aufgenommen habe, die Farbpalettenseite. Schauen wir uns an, worum es bei dieser Vorlage geht. Das ist also die Vorlage. Dies ist im Wesentlichen ein automatisches Layout. Wir werden das behandeln, während wir in diesem Kurs mitmachen. Und das hat eine Farbe, gerade jetzt, diese hier. Und dann hat es zehn Dosen der Farbe. Wenn Sie also Biss zu einer Farbe hinzufügen, wird es zu ihrem Zelt. Der Zweck dieser Vorlage ist zum Beispiel, sagen wir, wenn ich die Farbe ändere, indem ich zu den Auswahlfarben gehe und vielleicht Rot wähle, dann werden Sie sehen, dass Sie alle roten Sehnen bekommen, die wir haben, für die wir geplant haben. Ich erzähle dir den Zweck dahinter. Die Zwecke vielleicht, während Sie entwerfen, werden Sie feststellen, dass vielleicht diese spezielle Lektüre für Gaudi oder zwei in Ihrem Gesicht ist. Und du würdest so etwas wie einen milderen Widerstand wollen. Vielleicht möchten Sie vielleicht, dass dies auf Ihrem Dokument geht. Also, um eine sehr visuelle Wahl zu treffen, was wir tun, ist im Grunde nehmen wir Farbe und dann machen wir Dutzende Puppet. Ich mache einfach Befehl Z oder Control Z, um dies rückgängig zu machen. Und jetzt reden wir mehr über Farben. Wir werden vier Arten von Farben, Primärfarben, Sekundärfarben, Tertiärfarben machen . Und dann werden wir grasen lassen. Lassen Sie uns sehen, wie wir das tun können. Also werde ich nur duplizieren diese, die zwei Primärfarben sein werden weil das Logo für Excellence Studie im Ausland Unternehmen hat einen linearen Farbverlauf. Lassen Sie uns das einfach schnell überprüfen. Ich werde dieses Logo von der Bildseite auf die Farbpalettenseite kopieren. Ich werde es hier einfügen. Und wenn ich den Film hier drüben analysiere, wirst du sehen, dass es ein linearer Farbverlauf ist. Und der lineare Farbverlauf stammt von dieser bestimmten Farbe, die dieser Wert ist, zu dieser bestimmten Farbe, die dieser Wert ist. Was wir also tun werden, ist unsere Primärfarben werden die zwei Farben sein, die den Farbverlauf des Logos bilden. Dies wird synchron zu den Markenrichtlinien oder den Markenfarben, die das Unternehmen hat. Mal sehen, wie wir das tun können. Zuallererst werde ich diesen Satz von Farben auswählen. Und dann werde ich es einfach duplizieren, indem ich Befehl D drücke, weil es zwei Farben geben wird. Ich benenne dies in Primärfarben um, indem ich hier doppelklicke und Primärfarben schreibe. Okay, Gitter. Es wird auch zwei sekundäre Farben geben. Also y no, lassen Sie uns einfach die ganze Template-Sache erstellen. Ich werde das beschleunigen. Ich werde dieses noch mal duplizieren. Und ich sehe die Primärfarben hierher kommen. Ich werde es einfach runterlegen. Ich schnappe es einfach an Ort und Stelle, ist wirklich großartig damit. Sie erhalten Raster, wenn Sie versuchen, Elemente zu verschieben. Ich benenne dies in sekundäre Farben um, um dies umzubenennen. Nun, wenn ich das auswähle, wird der entsprechende Augapfel hier hervorgehoben. Ich kann dies in sekundäre Farben umbenennen. Jetzt möchte ich das weiter duplizieren. Also, was ich tun werde, ist, dass ich die Wahltaste oder die Alt-Taste unter Windows drücken werde. Und wenn ich das tue, werden Sie plötzlich sehen, dass der Cursor, gibt es jetzt zwei Cursor. Sie wissen, Sie werden den gespiegelten oder Bein Doppelcursor sehen. Das bedeutet nur, dass jedes Mal, wenn Sie etwas ziehen, es nur duplizieren wird. Los geht's. Ich benenne das schnell in tertiäre Farben um. Jetzt Tertiärfarben, da es zwei Primärfarben gibt, gibt es zwei sekundäre Farben, wird das nur ein wenig abdecken. Aber tertiäre Farben sind im Grunde Akzentfarben und wir verwenden typischerweise für Symbole. Warum also nicht jede Menge Tertiärfarben haben? So wird möglicherweise sechs tertiäre Farben haben. Ich dupliziere nur durch Kommando D. und es passiert. Und dann machen wir etwas Platz für unsere Grautöne. Ich werde die Wahltaste oder die Alt-Taste unter Windows drücken. Und ich werde diese Weide machen. Fantastisch. Also, wenn ich zu den Primärfarben komme, werde ich Zed drücken und diese Auswahl einfach ziehen, so dass sie zu unserem Vorteil gezoomt wird. Die Art und Weise, wie ich tun werde, ist, dass ich den blauen Farbcode von hier kopieren werde. Und ich werde es in die Auswahlfarbe einfügen. Nachdem Sie diese erste Zeile ausgewählt haben. Ich werde es hier einfügen. Und wir haben unsere erste Grundfarbe. Für sekundäre Farbe werde ich das Gleiche tun. Ich werde den anderen Farbcode wählen. Und ich werde es hier einfügen. Also haben wir unsere Primärfarben. Lassen Sie uns überprüfen, wie die sekundären Farben, Tertiärfarben und die Anmut in der nächsten Klasse zu machen . 7. Sekundäre Farben und Tertiärfarben: In der letzten Lektion haben wir diese Grundfarben erstellt. Und während wir sie erstellen, stützen wir sie auf das Farbschema von diesem Logo. Lassen Sie uns jetzt verstehen, warum wir das getan haben? Also im Grunde Primärfarben von den meisten Elementen in der visuellen Gestaltung. Das gilt für Überschriften, das gilt für alle Links, alle wichtigen Komponenten, jeden Aufruf zu Aktionen usw. Und es ist gut, dass das synchron zu den allgemeinen Markenrichtlinien auf die Markenfarben ist , so dass es gut aussieht. Und das ist der Grund, warum wir die Primärfarben aus unserem Logo gewählt haben. Fangen wir an, über die sekundären Farben zu sprechen. Es ist eine Faustregel, dass Primärfarben und Sekundärfarben einander ergänzend sind. Und damit meine ich, dass die Sekundärfarben und Primärfarben diesen harmonischen Look kreieren. Nun, wie Sie Farben finden, die zu diesen beiden Farben ergänzend sind. Also im Grunde, was ich tue, ist, dass ich ein wirklich gutes Werkzeug namens Adobe Color verwende. Lassen Sie uns also schnell überprüfen, was getan werden kann. Also werde ich einfach das Farbrad auswählen. Ich gehe zum Farbrad des Farbpunkts adobe.com navigieren. Und während das geladen wird, ok, also hat das geladen. Der schnellste Weg zu tun, ist der schnellste Weg, um eine kostenlose Farbe zu erhalten, indem Sie diese Methode befolgen. Also werde ich diesen Farbcode auswählen. Und dann werde ich es hier drüben einfügen. Und dann habe ich vorgestellt, es zeigt mir, dass dies die Farbe ist. Und hier drüben hat es viele Möglichkeiten, die Farbharmonie-Regel anzuwenden. So kann ich monochromatisch gehen, wobei es mir nur Schatten Satz der gleichen Farbe zeigen wird. Ich kann zur Triade gehen, die eine dreifarbige Kombination ist. Und dann komme ich kostenlos. Also, wenn ich kommen, um kostenlos, so dass alle anderen Farben sind kostenlos zu diesem. Also werde ich vielleicht diese Farbe als meine erste ergänzende Farbe wählen. Also werde ich diesen Farbcode hier drüben kopieren. Und ich werde es in der Auswahlfarbe hier drüben einfügen. Und voila, wir haben unsere erste sekundäre Farbe. Ich werde den Vorgang für die zweite sekundäre Farbe wiederholen. Ich kopiere das und füge es hier ein. Und dann nehme ich diesen Farbcode und ich habe in die Auswahlfarbe und Wallah eingefügt, wenn Sie denken, dass diese Farbe ein wenig zu grün ist, vielleicht ist es zu fluoreszierend, dann können wir immer mit dieser Option ändern. Und vielleicht ist das eher ein Mac-Look, und vielleicht wähle ich das aus. Also gehen wir hin. Also jetzt haben wir zwei Primärfarben und dann haben wir zu sekundären Farben. Lassen Sie uns also über die tertiären Farben sprechen. Aber vorher lassen Sie uns schnell verstehen , wo wir die Sekundärfarben verwenden? Wir werden die Sekundärfarben hauptsächlich für Akzentstücke verwenden. Und ich werde die Akzentstücke wiederherstellen und ich werde auf diese sekundären Farben zurückweisen , wie und wenn wir in den nächsten Lektionen entwerfen, kommen zu den tertiären Farben, werden Tertiärfarben wirklich sparsam im gesamten Design verwendet. Wir werden sie hauptsächlich für die Gegenstände verwenden. Also die Wellenbreite, die ich die tertiären Farben erstelle, ist, dass ich das gleiche Adobe-Farbrad verwende. Also werde ich das kopieren und vielleicht füge ich es hier ein. Und dann werde ich für eine Verbindung Farben gehen. Und dann werde ich für eine Verbindung Farben gehen. Also wähle ich die Farben aus, die ich mag. Und ich fange an, die Würfel drei Farben zu machen. Sie können frei wählen, welche Farben Sie wollen. Stellen Sie nur sicher, dass dies nicht die Schattierungen oder Dosen der Primär- und Sekundärfarben sind. Grundsätzlich werden wir sie nur für Symbole verwenden. Also gibt es das. Ich werde das ein bisschen beschleunigen und wir sehen uns in der nächsten Klasse. 8. Tertiär und Graublau: Das sind also die tertiären Farben, die ich mit genau dem gleichen Prozess erstellt habe , den ich in der vorherigen Vorlesung gezeigt habe. Sie können die gleichen Farben in Ihrem Design verwenden. Sie können auf diese der Referenzdatei verweisen, die ich als Teil dieser Klasse geteilt habe. Oder Sie können den gleichen Prozess verwenden und Ihren eigenen Kalender erstellen. Ich würde Ihnen sehr empfehlen, zu versuchen, so viele Farbideen zu finden, die Sie mit der Adobe Farbe B verwenden können und sie zu Ihren tertiären Farben machen können. Diese werden nur für Icons für wenigstens unser Design verwendet. Und mal sehen, was ihr euch einfallen könnt. Jetzt reden wir über das Fett. Grasen. - Es. Dies ist, in unserem Fall, werden wir sie für unsere Formen Antiphasen verwenden. Grundsätzlich ist diese erste Farbe total schwarz, wie wir sehen können. Und jetzt sind das wie die Dinge der gleichen Farbe. Wie Sie sehen können, reduzieren wir die Deckkraft dieser Farbe um jeweils 10%. Also, im Grunde, was ich gerne tun, ist, dass ich die ursprüngliche graue Farbe in meinen Designs eine Funktion meiner Primärfarbe haben möchte . Also lass mich dir zeigen, was ich tue. Das ist nicht sehr schwer und schnell, aber ich denke, es ist ein sehr nettes kleines neues zu haben. Also, was ich jetzt tun werde, ist, dass ich hier drüben ein Rechteck machen werde. Und dann werde ich, ich werde meine Primärfarbe als Kern dieses Rechtecks verwenden. Also werde ich das kopieren und ich werde es hier drüben einfügen. Okay, also haben wir ein Rechteck in Primärfarbe. Ich werde das duplizieren. Ich kann das entweder mit Befehl D tun oder ich kann die Option auf dem Altarschlüssel verwenden. Ich werde das duplizieren. Und dann werde ich das schwarz machen. Ok? Und jetzt, wenn ich die beiden super auferlegen werde. Also, wenn du jetzt klar siehst, werde ich das einfach vergrößern. Wenn ich also die Deckkraft des Schwarzen reduziere, dann beginnt es wie eine Fusion zwischen der schwarzen und der blauen Farbe auszusehen. Ich werde das bei 50% tun, damit du es siehst, es ist fast, du siehst 50% des Blaus, das es gibt. Das ist also zu viel, dass das nicht großartig ist. Aber wenn ich 90% mache, dann ist das großartig genug. Und das ist definitiv ein Schatten heller als das 100% Schwarz. Also gehen wir hin. Also möchte ich diese Farbe für meinen grauen Bereich verwenden. Und was ich tun werde, ist, dass ich mich dafür entscheiden werde. Ich werde den Farbwähler verwenden. Und ich werde nur hier rüber klicken. Also da haben wir es. Das ist also nicht alles schwarz, das sind nicht alle sechs Nullen, aber das ist 000318. Das wird also unsere graue Farbe sein. Ok? Alles klar, in diesem Abschnitt haben wir unsere Farbpalette komplett entworfen. Wir haben Primärfarben, wir haben Sekundärfarben, Tertiärfarben und Fett. Dies sind wir bereit mit unserer Farbpalette. Und ab der nächsten Lektion werden wir tief in den eigentlichen Designprozess eintauchen. Wir sehen uns in der nächsten Klasse. 9. Typeface und Selection: Wir haben diese schöne Farbpalette entworfen. Lassen Sie uns unsere Aufmerksamkeit auf die Typografie richten. Typografie ist im Wesentlichen alles mit der Art von Text, Schriftarten und Schriftarten zu tun , die wir in unserem Design verwenden werden. Hier drüben wirst du sehen. Und natürlich zoome ich hinein, indem ich Zag drücke und dann einen Abschnitt ziehe. Also im Grunde ist dies ein seltsames Wort , in dem wir unsere Schrift für Überschriften auswählen werden. Ich verkleinere durch Drücken von Befehlstaste. Und dann benutze ich das Scrollrad an meiner Maus. Und dann ziehe ich das durch Drücken der Leertaste, und dann ziehe ich einfach mit dem Linksklick auf Memos. Also im Grunde werden wir zwei Arten Gesichter nehmen, eine für Überschriften und eine für Körpertext, so dass es eine natürliche Vielfalt und welche Ionen im Design gibt. Dann werden wir etwas tun, das als Typskala bezeichnet wird, was die Schriftgrößen so anordnet, dass alles harmonisch aussieht. Und dann werden wir uns mit Überschriftenformatvorlagen und Absatzüberschriften befassen. Sie wissen, was werden wir genau verwenden oder Absatzbearbeitungen sowie für Absatztext. Lassen Sie uns wirklich schnell eintauchen, um zu skalieren. Um einfach auf 100% der Skalierung zu verkleinern. Was Sie tun können, ist, dass Sie eine Verknüpfung namens US Schiff 1 verwenden können. Also, wenn ich Shift und eins mache, zoomt es, um zu passen. Okay, fangen wir jetzt an. Wir werden also eine Schriftart für unsere Überschriften auswählen. Lassen Sie mich das einfach aus dem Weg nehmen. Ok, großartig. Eine der Hauptfragen ist also, Hey, welche Art von Schrift betrachten wir? Was sollten wir suchen? So finden Sie die Schriftart, wie Sie die Telefone auswählen. Jeder hat also seine eigene Methode. Ich möchte Ihnen meine Methode zeigen. Ich gehe immer auf die Website Google-Schriftarten, um die Schriftarten zu wählen. Lassen Sie uns auf Google-Formulare setzen. Also gerade jetzt vor mir, ich habe Fonts dot google.com, das ist die Google Fund Website. Und auf dieser Seite können Sie eine Vorschau vieler Schriftarten anzeigen. Eine lustige Sache an Schriftarten ist, wenn Sie in die Kategorien gehen, dann sind die Serif und die Sans-Serif, was ohne Serifen bedeutet , die beiden grundlegenden Arten von Schriftarten, aus denen wir wählen müssen. Lassen Sie uns schnell verstehen, was eine Serife ist und was ist, was ist eine Sans-Serif? Also, wenn ich einfach das alles abwähle, dann lassen Sie mich einfach dieses Bein wirklich in BC zoomen, diese Basis bei, unter diesem Buchstaben a oder diesem l. Sehen Sie diese Basis? Diese Basis wird also Serif genannt. Also in allen Schriften, Serifen-Familie, das basiert immer da. Auch wenn Sie sorgfältig die Dicke des Strichs, den Pinselstrich des Stiftstrichs beobachten , variiert es, oder? C. Also ist diese Zeile. Ein wenig dünner als diese Linie, und so weiter, so weiter. Grundsätzlich verwenden wir als Faustregel Serifenschriftarten, wenn wir etwas auf Papier drucken, besonders bei sehr lesbarer Schriftgröße. Serifen, verbesserte Lesbarkeit, wenn es auf Papier ist. Aber wenn wir über etwas sprechen, das auf dem Bildschirm angezeigt werden soll, sollten wir immer für serif gehen. Wieder, wie man definitiv serifen-Schriften auf Papier und Serifen-Schriftarten auf dem Bildschirm verwenden kann. Es gibt keine harte und schnelle Regel, aber so etwas wie Rubato, das ziemlich modern ist, sans-serifen-Schrift oder Schrift. Es sieht wirklich gut auf dem Bildschirm aus. Also im Grunde können Sie auf jeden Fall durch alle diese Schriftarten gehen, um die Wahl für das Formular zu treffen , das Sie in Ihr Design aufnehmen möchten. Ich werde Poppins für meine Überschriften auswählen. Entweder ich persönlich mag diese Schriftart und vielleicht ist das der Grund, aus dem ich wählen werde, dass Sie jede andere Schriftart wählen können, Schriftart, die Sie mögen. Und für den Körper, für die Schrift, die ich für den Körper tun werde. Ich werde den offenen Song wählen. Also lassen Sie uns zurück zu für Sigma und Pi Phase von den Überschriften. Ich werde Poppins benutzen. Also lass mich Poppins für die Überschriften schreiben. Das ist etwa richtig. Und lassen Sie mich die Schriftart auswählen. Lassen Sie mich eine Schrift auswählen, Poppins. Okay, es hat sich geändert, und dann werde ich es einfach 55 behalten, so dass es die richtige Überschriftengröße hat. China ist eine sehr visuelle Aktivität. Also möchte ich mir zuerst vorstellen, zuerst die verschiedenen Stile von Schriften zu sehen. Wie sehen sie aus, um eine Vorstellung zu bekommen, was und wann und wie werde ich diese spezielle Schrift in meinem Design verwenden? Dafür werde ich das vielleicht dreimal duplizieren. Ich werde das tun, indem ich Befehl Z oder Kontrolle G drücke, entschuldige mich, Befehl D und Kontrolle D. Okay, jetzt ist dieser Stil hier drüben mittel. Ich habe mich in reguläre umgewandelt, und das wird halb fett sein. Also, wenn Sie sehen können, gibt es drei Hierarchien in den Gewichtungen der Schrift. Und ich denke, ich würde es lieben, dass dies als meine Hauptposition für das Alte weitergeht. Ok, jetzt machen wir den gleichen Prozess für den Textkörper. Für den Körpertext habe ich mich entschieden, für Open-Source-MS. Also werde ich nur hier schreiben, dass. Und ich wähle die Schrift auf OK aus. Großartig. Eine Sache, an die man sich hier erinnern sollte, sind diese beiden, beide Schriften sind ziemlich üblich und sie wurden vorinstalliert. Und sie kommen mit Sigma. Wenn Sie sich für eine andere gewöhnte TI-Phase entscheiden, müssen Sie diese Schriftart zuerst auf Ihrem System installieren. Okay, also für Lesbarkeit und Frauen, blaue Jeans ist 255. Und ich werde wieder daran interessiert sein, Debatten gegeneinander visuell zu bekämpfen, nur um zu sehen, wie es aussieht. Also werde ich das durch gewöhnlich duplizieren. Und lassen Sie mich einfach von spät wechseln. Zwei, normale halbfett, mutig , extra fett, metallisch vielleicht. Ok, aber ich habe eine Idee. Also die meisten der Male werde ich entweder mit diesem Gewicht bleiben, das Leichtgewicht. Okay, also geht es um die Überschriften und den Text, den ich gesicht habe, den wir gewählt haben. Das hier drüben ist Poppins. Dies wird für Überschriften verwendet werden. Und das ist, wenn dies ein offenes Lied ist, das für Körper verwendet werden wird. Okay, bewegen Sie sich weiter. Also jetzt lassen Sie uns über etwas sprechen, das als Typ Haut ist Typ Skala genannt wird. Lass es uns herausfinden. Lassen Sie mich Sie zu dieser wirklich guten Web-Ressource namens Typ scale.com bringen. Es ist ein visueller Taschenrechner. Wie Sie sehen können, sind alle diese Schriftarten auf eine bestimmte Art und Weise ausgelegt. Jetzt lasst uns einfach erforschen, was das ist. Lassen Sie uns das für Poppins tun, was unsere Überschrift Schrift ist. Und nehmen wir die Basis als 1818 Punkte. Und die Skala wird groß sein. Drittens, das ist 1,25. Also, wenn Sie beobachten, jeder der Progressionen sind 1,25 mal die frühere. Das schafft also diese schöne Harmonie der Zeitskalen. Und dann ist es sehr angenehm für das Auge. Alles ist nicht proportional. Sie müssen sich keine Sorgen machen, ist meine Überschrift proportional zum Körper , der proportional zum Subtext ist. Also ist alles hier abgedeckt. Das ist also genau das, was als Zeitskala bezeichnet wird. Und dann werden wir dies nutzen, um die Fort-Hierarchie für unser eigenes Design festzulegen. Ich werde das tun, indem ich das auf meine Sigma-Arbeitsmappe kopiere. Und ich werde es einfach zufällig hier einfügen. Und wie Sie sehen können, sind dies die Schriftgrößen, die wir wirklich suchen. Lassen Sie mich einfach darauf hineinzoomen. So 54, die fünfundfünfzig vierunddreißig, achtundzwanzig, zweiundzwanzig Punkt fünf und achtzehn sein wird . Ich mag Event 24 dazu. Lassen Sie mich Ihnen zeigen, wie wir diese Änderungen vornehmen können. Also in der Zeitskala Art Board, was ich tun werde, ist, dass ich nur jeden zufälligen Text schreiben werde. Lassen Sie uns ein ausgezeichnetes Studium im Ausland schreiben. Und dann werde ich das zu unserer Haupttypphase machen , die Poppins ist. Und dann werde ich das sechs Mal duplizieren. Also werde ich die sechs Mal kombinieren. Und dann werde ich den Schriftartenaspekt ändern. Also lass mich das bei 255 machen. Das wäre 43. Und ich verkleinere einfach ein bisschen. Das wird 35 sein. Das wird 28. Ich werde das auf 2422,5 überprüfen. Es ist eine persönliche Vorliebe. Sie können sich strikt daran halten. Und das wird 80 sein, das sind 80. Das ist also unsere Zeitskala. Nun ist dies der sehr schöne harmonische Fortschritt wir mit unseren Augengesichtern und den Schriftgrößen haben. Und das wird definitiv in ein besseres Design übersetzen. Lassen Sie mich das einfach löschen und in der nächsten Lektion werden wir diese drei Dinge verwenden. Unsere ausländische Auswahl oder Taipei Auswahl für Überschriften, Textkörper, sowie die Zeitskala. Und wir werden das verwenden, um die Überschriftenformate und Absatz, Absatztext zu erstellen. Wir sehen uns in der nächsten Klasse. 10. Zeichenstile: Willkommen zurück. In der letzten Lektion haben wir uns zum Ziel gesetzt, ob die Schriftart die Überschriften, den Textkörper sowie das Typschema bildet. Jetzt haben wir gesehen, dass die Typskala die harmonische Progression der Fremdgrößen ist, was eine sehr gute visuelle API ergibt. Nun, was wir tun werden, ist, dass wir diese Pipes konvertieren, Kills Überschriften sind die Überschriften Ebenen. Lassen Sie uns sehen, wie das geht. Also werde ich diese auswählen. Dann auf ein paar Möglichkeiten zur Auswahl, kann ich entweder gehen Sie halten Shift halten und dann gehen, klicken Sie auf. Aber ich kann AR einfach so kontrollieren. Und jetzt, was ich tun muss, ist, dass ich von Bayes zurück in die Überschriftenstile hier drübenbeginnen muss Bayes zurück in die Überschriftenstile hier drüben , weil das ihr ausgewiesener Bereich für die Überschriftenstaaten ist. Also mal sehen, wie das gemacht werden könnte. Also werde ich die Alt-Taste oder die Wahltaste gedrückt halten. Du wirst diesen Nobel Carson sehen. Und dann wirst du in der Lage sein, das auszuschalten. Aber um das in diese Überschrift Stile einfügen, um mit dem automatischen Layout einzufügen. Ich habe das Kommando Jasmine aufgezeichnet, und dann halte ich sie fest, komm schon. Sie können sehen, dass es plötzlich blau gemacht hat. Es fragt mich, ob es unter oder über der hinzufügenden Haltung ausgebrochen ist. Ich werde in Blau fallen und ich werde es verlassen. Sie werden sehen, dass es Bart bindet und die Überschrift Staaten zu tun. Also werde ich voran gehen und das löschen , so dass ich jetzt das, was ich getan habe, im Wesentlichen dupliziert habe. Aber jetzt sind diese bereit, unsere Überschriftenstile zu sein. Zum Beispiel könnte dies die Überschrift sein. Überschrift eins. Ich möchte ein Leaderboard sein. Das ist ein Poppins 55. Aber ich würde wandern, wird wie Boulez dies sein. Also werde ich nur die Eigenschaften kopieren und ich werde es hier einfügen. Das wird also meine Überschrift sein, MAN. Ich mache noch einmal diese Rubrik zwei. Ich denke, Rubrik zwei sollte auch mutig sein. Also werde ich wieder ihre Eigenschaften kopieren. Ich werde Ihren TA stützen. Dies ist die Überschrift h3. Überschrift drei kann normal sein. Das geht vorerst auf den Weg. Wir können so viel in die Überschriften eingehen, die wir nicht waren. Aber im Grunde, was wir versuchen zu tun, ist, dass wir versuchen, eine harmonische Progression der fremden Größen zu bekommen . Und das könnte endlich die Rubriken sechs sein. Also, so ja, das sind die Überschriftenstile, die ich Schöpfer habe. Sie haben absolute Freiheit, Ihre eigenen Überschriftenformatvorlagen zu erstellen. Stellen Sie einfach sicher, dass diese absolut in sind. Wie nennen wir den Lehrer, dass oh, warte, ich glaube, ich habe dieses Zifferblatt verpasst. Also ja, das sollte nicht 55 sein, das sollte nach dieser Zeitskala 43 sein. Also werde ich nur, ich, nur obwohl, gebildet vor D3. - Großartig. So können Sie mit ihm herumspielen, jede Progression, die Sie mögen. Sie können auf die Zeitskalen-Website gehen und dann können Sie mit den verschiedenen Optionen spielen, die ich ein wenig habe. Aber für Designzwecke werde ich diese verwenden. Stattdessen. Es kommt nun auf den letzten Teil der Typografie, die wir behaupten müssen, als das, was wir tun, um weitere Absatzüberschriften zu tun. Batygin haben Überschriften sind entweder nicht die tatsächlichen Überschriften dieses Punktes auf der beachteten Hündin gesucht, dann BBN in ihr Design. Also werde ich Überschrift drei wählen, die Stil-Überschrift drei Foto Maya Absatz Überschriften. Ich werde die Eigenschaften und die Eigenschaften hier kopieren. Körnung. Und dann werde ich aus diesem Absatztext die Schriftart 24 wählen. Ich kopiere die Eigenschaften und füge sie hier ein. Aber wenn Sie sehen können, dass ich gerade die Überschrift Stile für die Poppins gemacht, aber ich möchte öffnen Song in meiner Tasche genug Text. Also werde ich nur das Gesicht des Schrifttyps ändern, um Song zu öffnen. Und dann gehst du. Es geht also um die Topographie, die wir uns um die Art und Weise kümmern werden, wie wir uns um das Projekt gekämpft haben. Wir sehen uns in der nächsten Klasse. 11. Anpassen und Raster: Nun, da wir sortiert haben, wird die Topographie in das Design übergehen. Bitte beachten Sie, dass ich auf der Bildseite alle Bilder aufbewahrt habe, die wir in unserem Design verwenden werden. Später im Kurs werde ich natürlich darüber sprechen, wie man Bilder von externen Quellen hinzufügen kann. Und wir haben bereits gesehen, was wir mit Plugins machen können, und wir werden auch einige Plug-Ins verwenden. Also ohne weiteres, lassen Sie uns auf die Design-Seite gehen und lassen Sie uns unser Design beginnen. Zunächst einmal möchten wir ein Kunstboard oder einen Rahmen für diese Angelegenheit machen. Dazu können Sie entweder in diesen Bereich gehen, um den Rahmen auszuwählen, oder Sie können F auf der Tastatur drücken. Und dann erhalten Sie diesen Cursor, mit dem Sie einen Rahmen ziehen können. Bevor wir das tun, können wir sehen, dass es viele Optionen gibt hier weitere Rahmengrößen über Telefon und Tablet und Desktop und was auch immer. Zu diesem Zweck werde ich eine zufällige Frames wählen. Also werde ich ein zufälliges Rechteck zeichnen. Und ich werde in diese Region gehen, in der ich die Breite auf 1600 Pixel einstellen werde. Ich nehme 1600 Pixel. Vor diesem Projekt können Sie wählen, direkt einige, einige tatsächliche Voreinstellungen wie einen Desktop oder ein Tablet oder ein Handy basierend auf Ihrer Anforderung für dieses Projekt, wir nehmen 1600. Nun werde ich die Länge dieses Kunstboards auf 5 Tausend einstellen, weil dies eine lange scrollbare Website, Website-Seite sein wird. Und so dachte ich, dass lassen Sie uns nur zu Beginn, lassen Sie uns mit Fülle beginnen. Ok? Jetzt, da das Kunstbrett getan hat, werden wir ein Gitter auf diesem Kunstboard platzieren. Auch hier verwende ich Zed und ziehe, verwende ich meine Maus zum Vergrößern. Der Zweck des Gitters ist es, die Elemente im Inneren auf eine sehr angenehme Art und Weise auszurichten . Ich gehe zum, Ich wähle dieses R und dann gehe ich zum Layout-Gitterabschnitt hier drüben. Und ich werde einfach darauf klicken. Wie Sie sehen können. Im Moment ist das Layout-Raster hier sichtbar. Ich zoomen einfach rein und verkleinern. Sie können das Raster sehen. Für den Zweck dieses Projekts. Ich werde für das vertikale Gitter gehen. Also werde ich hier klicken. Und ich werde ein Säulenraster bekommen. So wie Sie sehen können, dass dies die Spalten sind. Ich werde die Deckkraft weiter auf 5% reduzieren, damit dies nicht aufdringlich wird. Und ich werde diese Säulen zentrieren. Lassen Sie uns 12 Spalten wählen, um zu beginnen, weil es wirklich einfach wird, Elemente auszurichten. Die Breite jeder Spalte könnte 72 Pixel betragen. Das ist synchron mit dem, was wir versuchen zu tun. Und die Rinne, die der Abstand zwischen zwei Säulen ist. Das könnte also 32 sein. Okay, also sind wir alle bereit mit dem Gitter. Der Grund dafür, warum ich 12 Spalten gewählt habe, ist, dass ich, wenn ich 12 Spalten verwende, vielleicht zwei Objekte, drei Objekte für Objekte und sechs Objekte in einer Zeile anordnen kann drei Objekte für Objekte . Das ist also der Hauptvorteil, 12 als Anzahl der Anzahl der Spalten zu wählen . Sie können das Raster offensichtlich ein- und ausschalten, indem Sie entweder auf dieses Symbol klicken, um es herunterzufahren und es erneut zu starten. Oder Sie können die Tastenkombination Control G verwenden. Es hat den gleichen Effekt. Ok, jetzt sind wir mit unserem Ad Board und dem Raster fertig. Also zunächst einmal, was wir tun möchten, ist das Logo zu platzieren. Wenn Sie also auf die Bildseite gehen, werden Sie dieses typografische Logo sehen. Ich werde diesen Befehl C kopieren, und ich werde ihn hier mit Befehl V einfügen Und ich möchte das Logo oben behalten, oben links. Aber ich möchte es wie in einer richtigen Weise an den Rändern ausrichten, also werde ich 64 Pixel wählen. Der Grund für die Verwendung von 64 ist, dass der Getter 32. Also zweimal, desto besser wäre 64. Also werde ich einfach die X- und Y's von diesem ändern. Dies bedeutet, dass dieser X-Wert den Abstand von dieser Kante zu diesem Logo bedeutet. Wenn Sie auf Alta klicken, dann können Sie sehen, ob Sie es einfach auf Papier legen und dann einfach mit der Maus bewegen, Sie werden das anders sehen. Sieh mal, ob du sehen kannst, es sind 90 und die Achsen 90. Also mein D ist diese Distanz. Also werde ich es 6464 Tage m machen, damit haben wir unser Logo an Ort und Stelle platziert. Wir sehen uns in der nächsten Klasse. 12. Die Navigation erstellen: In der letzten Lektion haben wir gelernt, wie man den Außenbordrahmen einstellt, die Gitter einzurichten , und dann platzieren wir dieses Logo , 6464 Pixel gleich weit vom x und demy entfernt. , 6464 Pixel gleich weit vom x und dem was wir brauchen, um mehr hinzuzufügen. Lassen Sie uns also über diese Navigationsleiste sprechen. Diese Navigationsleiste wird also oben auf ihrer Designseite angezeigt. Also, was ich tue, ist, dass ich diesen Befehl C kopieren und ihn auf mein Design einfügen werde. Und dann kann ich es einfach in Bezug auf das Logo ausrichten, das Sie gerade platziert haben. Das ist eine Art, es zu tun. Aber ich werde Ihnen eine Welle zeigen, die wiederverwendbar ist und vielleicht ein besserer Weg für die allgemeine Ästhetik, die wir wollen. Also werde ich das Textwerkzeug von hier aus wählen. Ich kann auch einfach auf P auf meiner Tastatur klicken und das Tool erscheint. Und dann werde ich einfach schreiben, die Namen der Elemente in die Navigationsleiste schreiben. Das geht also um uns. Wir haben ein Element. Jetzt werde ich das duplizieren. Ich könnte das mit Befehl li machen und es dann einfach nach unten ziehen. Oder ich könnte einfach, ich wollte es noch drei Mal duplizieren. Ich könnte einfach auf die Wahltaste oder die Taste drücken. Und wenn ich dann den Nobel-Cursor sehe, zitiere ich, wieder, ziehe ihn nach unten. Und dann könnte ich einfach kopieren und einfügen mit Befehl C, Befehl D. Und so hier sind die vier Elemente, im Wesentlichen diese Elemente, von denen Sie sprechen. Also werde ich sie einfach ausschreiben. Das sind die Dienste. Dies sind die Testimonials und dieser Button ist für die gelten. Großartig. Also jetzt, wenn wir sind, so sind diese derzeit einzelne Elemente, wie Sie sehen können, aber wir wollen sie zusammen als Gruppe. Der Weg, das zu tun, ist, dass ich einfach alle auswählen kann. Das könnte ich individuell machen. Und nachdem ich das getan habe, benutze ich entweder mit der rechten Maustaste und klicke auf Auto-Layout hinzufügen. Oder ich kann Shift und Hilfe verwenden, um Ordnung Layer hinzuzufügen. Sobald ich das mache, können Sie sehen, dass alle diese Elemente in einem Layout sind. Jetzt ist Auto-Layout die coolste Funktion von Sigma, die Sie wie fast für jedes Element verwenden können und es spart eine Menge Zeit. Nun, wie Sie sehen können, dass diese übereinander gestapelt sind. Diese sind vertikal, aber wir wollen, dass sie für unseren Fall horizontal sind. Also, wenn ich zum Auto-Layout-Abschnitt hier gehe und ich auf diese Schaltfläche klicken kann. Hier steht die horizontale Richtung. Und voila, wir haben diese in unserer horizontalen Richtung. Hier geht es um den Abstand zwischen den Elementen. Im Moment ist es 46, es ist ein wenig willkürlich, aber ich kann es wählen, um 64 zu sein und sehen, wie gleichmäßig verteilt das aussieht. Ich kann auch experimentieren mit kann vielleicht 32, weil das die Rinnenbreite ist. Aber ich denke, 32 ist ein wenig vollgestopft, also werde ich bei 64 bleiben. Ich mache nur Befehl Z, um es rückgängig zu machen. Und jetzt, wenn Sie beobachten, wenn Sie diese Elemente beobachten, dann verwenden diese die rubato-Schrift, aber das ist nicht die Schriftart, die wir ausgewählt haben. Also, was wir tun können, ist, dass wir zu dieser Topographie gehen können. Und vielleicht möchte ich die Überschrift für verwenden, die mittel und 28 für meine Navigationsleiste ist. Also werde ich diese Eigenschaften kopieren. Und ich gehe zum Entwurf. Ich wähle alle Elemente aus. Der coole Teil daran ist jetzt, dass es ein automatisches Layout ist. Es, Sie versuchen, alles in ihm auszuwählen. Aber wenn Sie auf Befehl drücken und einfach die Maus an etwas auf einem Element halten, dann haben Sie die Möglichkeit, es individuell zu wählen. Also, so werde ich alle Innenseiten des Elements mit Befehl a auswählen. Nun, das wird alles auswählen und dann werde ich die Eigenschaften einfügen. Also dann gehen wir, bevor wir es tatsächlich platzieren, würde ich gerne die Farbe überprüfen. Es ist jetzt rein schwarz, wenn Sie hier sehen können. Aber da wir in unserer Topographie entschieden haben, dass wir eine einzigartige verwenden werden, oder vielmehr haben wir uns in unserer Farbpalette entschieden, werden wir eine sehr einzigartige Shared von Black verwenden. Also im Grunde ist das dieser Schatten. Also, und so ist dieser Farbton hier drüben. Und dann geht es bei 90% durch. Also werde ich das einfach kopieren und ich gehe zum Design. Und ich werde es einfach hier einfügen. Lesen Sie es wird nur die Farbe ändern, indem Sie nur buchstäblich nur ein wenig viel. Aber das wird kongruenter zu unserem ursprünglichen Farbschema sein. Ich werde dies auch bei 90% tun, also gibt es eine wirklich gute Wirkung. Und jetzt kann ich diese Navigationsleiste platzieren und sie entsprechend den Gitternetzlinien ausrichten , die uns Sigma bereits zur Verfügung stellt. Also ja, also geht es darum, die Navigationsleiste einzurichten. Ich werde das löschen. Ok dann sehen wir uns in der nächsten Klasse, wo wir beginnen, den Text zu füllen. 13. Überschriften und Textstile: Willkommen zurück. In der letzten Lektion haben wir diese Navigation angewendet, aber eine Sache, die ich verpasst habe, ist, dass wir diese Navigationsleiste so ausrichten müssen , dass dieses Ende 64 Pixel von diesem Ende entfernt ist. Der Weg, dies derzeit zu tun, ist, wenn ich die Alt-Taste oder die Wahltaste C drücke, kann ich sehen, dass es 184 Pixel davon entfernt ist. Lassen Sie mich einfach hineinzoomen, indem Sie Zag und das drücken. Ok. Wenn ich also die Wahltaste auf der Alt-Taste drücke, sehe ich, dass es 184 Pixel entfernt ist. Und jetzt, wenn ich die Richtungstaste auf meiner Tastatur drücke, wenn ich rechts drücke, dann können Sie sehen, dass es hat, wenn es drei tat. Nun, wann immer Sie 101 tun, ähnlich, wenn ich weiter nach links drücke, wird es nur in einem Pixel Hindernisse verschieben. Wenn Sie jedoch die Umschalttaste drücken und dann die Richtung q0 drücken, wird es in den zehn Pixel-Schritten geändert. Also, wie wir wollen, dass dies 64 ist, bin ich bereit, nur einen zu machen, der den 64-Volume gemacht hat. Also werde ich einfach kontrollieren G, das Gitter entfernt und nur einen Blick werfen. Und das sieht definitiv ordentlich aus. Okay, also der Größte wieder auf. Und nun gehen wir zum Drahtmodell, um tatsächlich die Textelemente, die Überschriften in dieses endgültige Design zu setzen . Und dafür müssen wir zum Drahtmodell gehen. Dies ist, das wird das Thema dieser Lektion sein. Also wird uns diese Kopie gegeben. Wir helfen Ihnen, Ihren Traum zu bauen. Und dann steht es uns frei, sich zu beraten, etcetera. Also, was ich tun werde, ist, ich werde die Dinge kopieren und ich werde es zufällig einfügen. Hier drüben. Dies ist ein anderes Element. Dies ist ein anderes Element. Also kopiere ich das einfach und füge den Text auch ein. Ok. Was wir jetzt tun müssen, ist, dass wir dies so am Anfang des Rasters ausrichten müssen. Und das wird unser erster Kurs sein. Wenn wir also unsere erste Überschrift machen, haben wir den Wert dafür bereits in unserer Topographie zugewiesen. Wenn Sie also zur Typografie gehen und wenn ich diese Überschrift wähle, dann werde ich diese Eigenschaften kopieren. Und dann werde ich zum Design kommen und ich werde diese Eigenschaften darauf einfügen. Und dann haben wir sehr mutige 55 Bind Bump in Semi-Grenze. Dies wird unsere wichtigste Überschrift sein, der Haupttext. Das heißt, und das wird der Subtext davon sein. Also dafür werde ich den Hauptbaum wählen, der 35 Barnes mittelgroße Kürbisse ist. Und ich kopiere. Ich kopiere die Eigenschaften. Und dann gehe ich zum Design und füge die Eigenschaften hier ein. Und wie Sie sehen können, dass es sich bewegt hat, hat Stimmung sowie es Gene hat, der Fremdbegriff, dann werde ich diesen Overhead behalten. Es gibt eine andere Möglichkeit, dies zu tun, indem Sie nur Eigenschaften kopieren und Eigenschaften einfügen. Lassen Sie uns schnell überprüfen, was das ist. Also werde ich diese ganze Sache rückgängig machen. Ich mache Command Z. Also, wie Sie sehen können, gibt es hier eine Menge Rückgängigmachen. Ok. Also ja, also habe ich nicht alles getan. Der andere Weg, den ich Ihnen zeigen wollte, ist, wenn ich zur Typografie gehe und wenn ich weiß, dass dies meine Überschrift sein wird. Was ich also tun kann, ist, dass ich einen Textstil erstellen kann. Ich zeige dir, was ich damit meine. Diese Überschrift wird also Textil bekommen. Also für das, was ich tun kann, ist, dass ich auf dieses Stil-Icon klicken und ich kann auf dieses Pluszeichen klicken, das sagt Stil erstellen. Und ich schreibe das als Überschrift eins. Und wenn ich diese Kachel erstelle, dann wird das zum Stil. Also im Grunde gibt es eine Komponentenerzeugung eine Art Sache, die darin die Überschrift eins als US-Textil speichert, so dass ich jeden Text auswählen und ihn dann darauf anwenden kann. Ich werde auch für Rubrik drei Rate tun. Also gehe ich einfach hierher. Normalerweise komme ich plus ein Irate Rubrik drei. Cool. Der einfachste Weg, das zu tun, ist, dann gehe ich zum Design. Ich wähle meinen Text aus, und dann gehe ich einfach zu diesem Stilsymbol. Und dann werde ich einfach darauf klicken und sehen wir haben 55 Poppins. Ich gehe hierher, ich klicke einfach auf Rubrik drei, und dann haben wir das auch. Und ich kann es einfach hier behalten und wir sind gut zu gehen. Okay, also haben wir im Grunde über Überschriftenformate in dieser Lektion gesprochen. In der nächsten Lektion fügen wir ein automatisches Layout hinzu und fügen das Bild hinzu. Und darunter werde ich dich in der nächsten Klasse sehen. 14. Hintergrund erstellen: - Zurück. Bevor wir weiter gehen, lassen Sie uns einfach das Drahtmodell für diejenigen überprüfen. Also im Grunde, was wir getan haben, ist, dass wir das Logo, die Navigationsleiste, und diese beiden Textzeilen sind das, was wir in unser Hauptdesign gesetzt haben. Dieses Zeitschlitz-Bild, wir müssen ein Bild hier einfügen, und dann gibt es einen Aufruf zur Aktion Cortes jetzt anwenden. Und das müssen wir auch tun. Und dann wird diese Lektion genau das tun. Also gehen wir jetzt auf die Designseite. Okay, also habe ich gerade das Bild untersucht, das ich einfügen wollte. Das ist also das Bild, das wir auf die Design-Sache kopieren wollen. Bevor wir das tun, lassen Sie uns einfach versuchen, diese Seite nach oben zu jazzen, indem wir einige Farbelemente einbinden. Ich werde tun, wenn Sie frei sind, einen anderen Sky Linear dieses Schiff zu wählen. Sie, Sie werden, Sie werden das Muster sehen und dann können Sie Ihre eigene Kreativität anwenden , um Ihre eigenen Hintergründe zu erstellen. Was ich derzeit tun werde, ist, dass ich das Ellipsen-Tool wählen werde. Ich könnte sogar auf meine Tastatur drücken. Und mit diesem Werkzeug kann ich einen Kreis zeichnen. Der Weg, dies zu tun, ist, klicken und ziehen. Also, während ich zeichne, können Sie sehen, dass es eine Ellipse zentriert, die das Schiff nimmt, je nachdem, wie ich ziehe. Aber wenn ich Shift auf meiner Tastatur drücke, dann schafft es einen perfekten Kreis. Es gibt also keine harte und schnelle Regelmessung dafür. Ich werde einen Kreis wie diesen erstellen. Und dann, um es zu füllen, werde ich einen linearen Farbverlauf erstellen, dem Logo übereinstimmt, dem Sektor der Farben, die das Logo hat, die im Grunde Primärfarben sind, wie wir es getan haben erstellen Sie sie in unserer Farbpalette. Also, wenn ich darauf zurückkomme, werde ich das füllen, werde ich tun, ich werde einen linearen Farbverlauf machen. Und wenn ich den linearen Farbverlauf mache, gehe ich einfach auf die Farbpalette, Wählen Sie die Primärfarbe. Komm her, kleben Sie es hier ein. Okay, also haben wir eine Farbe und ich gehe zurück zur Farbpalette. Ich wähle die sekundäre Farbe. Und du kommst hierher zurück und ich werde den Farbcode noch einfügen. Und wir haben unsere Steigung. Aber Gradienten, wo bekommen wir zu dieser Achse, die wir haben, gibt uns die Wahl, die Art und Weise zu wählen, dass Gradienten, dass die Interaktion mit allem. Dieses Ende ist also MyTime, wie wir sehen können, dass dies die leichtesten zehn dieser Farbe Overhead ist. So können Sie mit diesem so viel spielen, wie Sie wollen und wählen Sie einen Farbverlauf, von dem Sie denken, sieht schmeichelhafter aus. Okay, also denke ich, das wird es für mich tun. Ich mag das irgendwie. Okay, das ist also mein Farbverlauf. Also, was ich jetzt tun werde, ist, dass ich es ein wenig transparenter machen werde. Also werde ich es 60% undurchsichtig machen. Wir, ich werde das zu einer Passage hinzufügen oder zu 60%. Ok? Was ich also tue, ist, dass ich nur versuchen werde, ein Element zu schaffen, oder was er gehört hat , wird uns helfen, einen Akzent zu setzen. Tun Sie den anderen Weg ist trübe Bild. Ich werde das nur mit dem Truthahn duplizieren. Ich werde das nochmal duplizieren. Ich werde das Ding auf der absoluten Spitze halten. Ich bringe es nach vorne. Und um nur einen Akzent hinzuzufügen, was ich tun werde, ist, dass ich die Steigungen umkehren werde, die nicht bereit sind, das Blau als die leichte Schlacht Sache zu machen. Und so, okay, also ist das nur ein Akzentstück und du kannst es definitiv so machen, wie du willst. Ich denke, ich mag das und wir können damit jetzt mit diesem als Tasche allein spielen, was ich tun werde ist, ich werde einfügen, ich werde dieses Bild kopieren Befehl C und fügen Sie es ein. Und kleben Sie es hier drüben. Und ich denke, das bietet ein wenig ausgewogenes Aussehen. Also, wenn ich jetzt zurück zum Drahtmodell gehe, kann ich sehen, dass ich dieses Logo, die Navigationsleiste, diese beiden Zeilen Text und Bild gesetzt habe. Nun lassen Sie uns einfach den Aufruf zur Aktion hinzufügen, die jetzt angewendet wird. Und das machen wir in der nächsten Klasse. Wir sehen uns in der nächsten Klasse. 15. Aufruf zu der Action: Bisher haben wir so viel entworfen. Und eine Sache, die ich normalerweise folge, ist, dass ich auf diesen Play Button oben hier drüben klicke. Das gibt mir die eigentliche Live-Ansicht oder den Prototyp dessen, was ich entworfen habe. Und es sieht bisher so aus. Ich neige dazu, das zu tun. Ich neige dazu, das auf der großen Leinwand zu sehen, damit ich als mein visuelles Urteil existieren kann. Wenn ich das finde, wenn irgendetwas ausgeschaltet ist, wenn ich nur etwas hinzufügen wollte, wenn ich ein spontanes Feedback für mich habe, kann ich das einfach einbinden. Also ging es darum, auf die Vorschau zu schauen. Kommen wir nun zu unserem Hauptdesign zurück. Und jetzt werden wir einen Call to Action hinzufügen, wie wir im Laborrahmen gesehen haben. Es gibt einen sauberen Call-to-Action, der als Planet bezeichnet wird. Und dann gibt es diese sozialen Symbole. Also in dieser Lektion werden wir boo, fügen Sie diese beiden Elemente hinzu. Lassen Sie uns auf das Design gehen sie, um diesen Knopf zu entwerfen. Ich möchte einen Prozess wählen, der sehr Basis ist. Ich könnte einfach diesen Knopf kopieren, ihn hier einfügen und dann einige oberflächliche Anpassungen vornehmen. Aber ich möchte von vorne anfangen. Und dafür, ich denke, ich werde auf das Textwerkzeug gehen nimmt Tool kann auch aktiviert werden , indem Sie T auf der Tastatur eingeben und ich schreibe jetzt bewerben Sie sich hier. Wenn Sie sehen, die Jetzt bewerben ist derzeit in der Roberto I Gesicht. Ich werde zu meiner Typografie gehen und ich denke, ich werde Poppins Medium wählen, diese Überschrift für zwei b. Ich werde Überschrift für es wählen, um den Stil für meinen Aufruf zur Aktion, die jetzt angewendet wird, werde ich nur einfügen, dass. So jetzt können Sie sehen, dass diese Schaltfläche jetzt anwenden , die die Texteigenschaft von Poppins und Medium dort hat. Um das in eine Schaltfläche zu konvertieren, kann ich einen sehr sauberen Hack des Auto-Layouts verwenden , den ich durch Drücken von Shift tiny aktivieren kann. Oder ich könnte einfach mit der rechten Maustaste klicken und auf Auto-Layout hinzufügen klicken. Wenn ich also ein automatisches Layout hinzufüge, passiert dieses Stück Text, diese Textzeichenfolge, es wird in eine Komponente konvertiert, es wird in eine Schaltfläche konvertiert. Und das sind die Auto-Layout-Einstellungen. Was ich tun kann, ist, dass ich ein Padding von 32 Pixeln hinzufügen kann. Also, wenn Sie sehen können, gibt es jetzt 32 Pixel von allen Seiten auf diese Schaltfläche. Aber Knöpfe sind normalerweise nicht so sperrig. Also gehe ich zu diesem Abschnitt, Ausrichtung und Polsterung. Und dann werde ich irgendwie die Polsterung 16 an den vertikalen Kanten und 30 zu einer der horizontalen Kanten machen . Drücken Sie die Eingabetaste. Das sieht also richtig aus. Um diesem eine Grenze zu geben, denn im Moment ist es nur eine Form, aber es hat keine Grenze. Also gehe ich zum Schlaganfall, Schlaganfall Abschnitt. Ich werde darauf klicken und dann vielleicht zwei Pixel-Grenze zu haben. Also, okay, also haben wir jetzt einen rudimentären Knopf damit. Es ist ziemlich ähnlich wie die im Drahtmodell. Aber um es wie eine richtige Taste mit einem Call to Action zu machen, Was ich tun werde, ist, dass ich die Ecken der KI um sie herum auf möglicherweise eine 100 runden werde . Und diese Art einer Schaltfläche wird als Pillenknopf bezeichnet. So, wie Sie sehen können, nimmt die Last Gestalt an. Dies ist ein Aufruf zum Handeln. Ein Aufruf zum Handeln. Grundsätzlich müssen wir die Primärfarbe verwenden. Also werde ich die Textfarbe wählen, um die Primärfarbe zu sein. Ich kann das aus der Farbpalette auswählen. Dies ist die Viertel-Primärfarbe. Ich werde das kopieren und zu ihrem Entwurf kommen. Und dann füge ich es hier drüben ein. Und da haben wir es. Das ist unser Knopf. Mit Blick auf die Schaltfläche jetzt, ich fühle, dass ein paar Möglichkeiten, um dieses Zeug zu verbessern. Alles, was ich möchte die Deckkraft dieses Typhus herausfordern. Ich bringe es auf 80%. Okay, jetzt hat das ein sehr erfreuliches Register und das ist ähnlich dem Hintergrund, den Sie sehen. So ist das jetzt kongruenter. Und dann möchte ich einfach einen Pfeil hineinwerfen, nur einen kleinen Gegenstand. Also, dafür werden wir I quantifizieren. Wir haben das in den früheren Lektionen behandelt. Also werde ich zum Plug-in gehen und dann werde ich auf das Symbol klicken. Ich werde einen Pfeil für ein Symbol wählen, ich möchte einen Pfeil nach rechts. Dies ist also der rechte Pfeil und keine 36 Pixel Höhe scheint geeignet. Also werde ich nur den Artikel importieren. Okay, jetzt, da das Symbol wichtig ist, werde ich die Farbe in den Call-to-Action selbst ändern. Ich habe das bereits kopiert und dann werde ich dies in ein d konvertieren. Okay, jetzt, um dies in diesen Button einzufügen, ist dies eigentlich ein automatisches Layout. Was ich tun werde, ist, dass ich das schleppen werde. Aber während ich das ziehe, wenn ich die Befehlstaste drücke, kann ich es direkt in das einfügen. Also, wenn ich es einfach reinlasse, dann gehst du. Das sieht also ziemlich ordentlich aus. Hmm. So haben wir unseren Button und den Call-to-Action erstellt. Nun, was wir tun müssen, ist, dass wir eine Ebene hinzufügen müssen , um diese jetzt alle diese Texte sind ziemlich willkürlich platziert und es gibt keine echte Beziehung zwischen den Abständen zwischen ihnen. So kann das leicht aussortiert werden. Was wir tun könnten, ist, dass wir einfach alle drei Elemente auswählen können. Und dann können wir ein, ein weiteres Auto-Layout durch Verschiebung hinzufügen . Und wenn ich das tue, können Sie sehen, dass dieses Ding bereits hat, es hat jetzt eine feste Linienbreite. Und dann kann ich den Abstand zwischen den Elementen auf 6060 Pixel anpassen. Und vielleicht sehen 60 Pixel ein wenig Grat aus. Also, wenn ich das auf 72 Pixel mache. Und jetzt gibt es wie einen harmonischen Blick auf unsere Seite. Nun, an diesem Punkt kommt alles irgendwie zusammen. Also, das ist es für diese Lektion. In der nächsten Lektion werden wir die Social-Media-Symbole hinzufügen und dann beginnen wir, für die nächsten Abschnitte zu entwerfen. Wir sehen uns in der nächsten Klasse. 16. Nächster Abschnitt und Autolayout: Zurück. Bevor wir voran gehen, lassen Sie uns einige Schlagschatten auf diese Call-to-Action-Schaltfläche anwenden , so dass es tatsächlich wie ein anklickbarer Link aussieht. Hier ist, wie es geht. Sie müssen die Schaltfläche auswählen. Ich habe das getan, indem ich in dieses automatische Layout doppelklicke. Und dann gehe ich zu Effekten. Und der Effekt ist der Schlagschatten. Moment behalten wir es bei den Standardeinstellungen, was wie 44 Unschärfe ist. Und vier auf der y-Achse des Schattens, wie ist, die in der vertikalen Richtung, aber nach unten fällt. Das ist also, es wird es einfach auf der Standardebene halten. Und wenn Sie jetzt sehen können, sieht diese Schaltfläche tatsächlich wie ein anklickbarer Link aus. Also werde ich Shift eins drücken, zoomen, um zu passen. Und dann werde ich wieder drücken und ziehen und davon hören. Nun, da wir mit dem Bau dieses Abschnitts fertig sind, lassen Sie uns schnell zum Drahtmodell gehen und sehen, dass wir diese sozialen Symbole hinzufügen müssen. Und nachdem wir das getan haben, werden wir zum nächsten Abschnitt der Heldenseite gehen, bei der die vorgestellten Universitäten handelt. Lassen Sie uns die Symbole hinzufügen. Jetzt. Was ich getan habe, ist, dass ich diese Symbole auf der Bildseite behalten habe. Normalerweise müssen Sie diese Icons von jedem herunterladen , das ich sehen kann und sie dann in das Bild verwenden. Zur Benutzerfreundlichkeit habe ich sie gerade auf der Bildseite aufbewahrt. Ich füge die Symbole so ein. Ich bringe sie runter. Und jetzt, wieder, um all diese Symbole horizontal auszurichten, werden wir das magische Werkzeug des Auto-Layouts verwenden. Ich wähle sie alle aus. Ich verliere verschoben. Also entschied sich ein automatisches Layout, und ich gehe einfach zu den Auto-Layout-Einstellungen und ich werde auf die horizontale Richtung klicken. Und Sie haben alle Symbole in horizontaler Richtung. Ich ändere den Abstand zwischen den beiden Eigen Abstand zwischen den Elementen auf 32 Pixel. Und das hat ein einheitliches Aussehen und Gefühl dafür. Und voila, ich kann sogar auf das Gitter setzen, indem ich die Kontrolle g um zu sehen, dass ich die Zustimmung zum Raster so ausrichte. Oder vielleicht ist dies dies in Bezug auf die diese Last nicht symmetrisch. Also gehe ich einfach wieder zurück und wähle die zentrale Symmetrie zu diesen beiden Elementen. Ich werde das Gitter wechseln und ich werde auf den Play-Button klicken , nur um zu sehen, wie der Prototyp ist, sind die, wie die Designer gestalten. Und ich denke, es kommt auf eine wirklich gute Art und Weise. Okay, Note dann gehe ich auf die Arbeitsmappe und lassen Sie uns jetzt für den nächsten Punkt entwerfen, die in Universitäten Registerkarte aus dem Drahtmodell vorgestellten ist. Also, dafür werde ich auf die Design-Seite gehen. Was ich jetzt tun werde, ist, dass ich Abschnitte innerhalb dieser Seite selbst erstellen werde. Um das zu tun. Ich versuche zuerst, etwas auf dem Bildschirm zu tun und dann versucht, es zu erklären, während wir weitergehen. Ich werde ein Rechteck bauen. Und Rechteck wie dieses. Also dieses Rechteck, aber es wird tun, wird diese Ebene des Bildes abdecken. Weil wir möchten, weil dies, diese Crawford die Bilder ziemlich gut und Standard jetzt. Also werde ich nur diese zusätzliche Schicht, zusätzliche Form eines Rechtecks verwenden , um die Seite in lesbare Laminate zu zerlegen. Und dann werde ich darüber arbeiten. Also lassen Sie uns sehen, was jetzt getan werden muss, wenn ich zum Drahtmodell gehe,werde ich sehen, dass es geschrieben hat wenn ich zum Drahtmodell gehe, , die Universität, also muss ich vorgestellten Universitäten dort schreiben. Aber vorher, was ich tun werde, ist, dass ich die Füllung dieses Rechtecks ändern werde , das die Farbe ist. Und ich werde es in etwas schmackhafteres wie dieses ändern. Dies ist eigentlich ein Dokument und Farbe. Dieses E phi, wenn ich sogar E5 ist eines der Grautöne , die wir bereits in unserer Farbpalette definiert haben. Das sieht also etwas düster aus. Und jetzt, um hier vorgestellte Universitäten zu schreiben, gehe ich zum Textwerkzeug, um in dieses Rechteck zu klicken , so dass es ein Teil dieses ganzen Rechtecks wird. Und ich werde Feature-Universitäten schreiben. Also, während ich Feature-Universitäten schreibe, richten Islands Center es so aus. Das ist gut genug. Überschrift Stil für unsere Funktion Universität. Dies ist unmittelbar der Unterposition dieses Elements entnommen. Obwohl ich es gerne etwas weniger undurchsichtig machen möchte. Also werde ich die Deckkraft auf 80% ändern. Mal sehen, wie es aussieht. Ich denke, das sieht in Ordnung aus. Wenn wir die Schrift und eine Schriftgröße optimieren können , wie wir weitergehen, wenn wir nur weiter beweisen, was wir gemacht werden. Darüber hinaus müssen wir jetzt noch die vier Logos der Universitäten hinzufügen , die vorhanden sind. Also wähle ich sie einfach so aus. Ich kopiere sie. Ich bringe auf ihre Designseite. Ich kopiere mit Befehl C. Ich werde hier einen Befehl v machen, also habe ich sie eingefügt. Also, jetzt diese vier Bilder, normalerweise vor FISMA, was wir tun müssen, war, manuell zu sortieren, sie zu senden, und dann um den Abstand zwischen den Bildern und allem kümmern. Aber dank Feige, meins, dank Auto-Layout, ist es so einfach. Jetzt lass mich es dir zeigen. Ich wähle alle vier aus. Und ich mache Auto-Layout entweder durch Klicken mit der rechten Maustaste und Klick hier, oder ich kann auch die Shift EIA Sache verwenden. Also klicke ich einfach hier. Und automatisches Layout erstellt. Ich gehe zu den Einstellungen für das automatische Layout. Ich mache die horizontale Reaktion. Und da haben wir es. Und Central und ich machen eine Mittelausrichtung. Jetzt, wo ich darüber nachdenke, möchte ich eine kleine Trennung zwischen den beiden Bildern. Also alles, was ich tun muss, ist, dass ich hierher gehen muss, was Abstand zwischen den Elementen ist. Ich linspace sie 16 Pixel zwischen den Elementen. Es sieht etwas weniger aus. Also kann ich das bis zu 32. Ok? Und ich finde, das sieht ziemlich anständig aus. Ich werde einfach hinzufügen, gerade jetzt getan. Was getan werden kann ist, kann ich auch ein Auto-Layout dieser Form machen , so dass alle anderen Abstände und kümmert sich um, aber das ist jetzt nicht notwendig. Wir werden uns möglicherweise alles neu ansehen. Und wir werden alle Komponenten gruppieren und alle Abstände am Ende dieses Projekts standardisieren , sobald wir das vollständig entworfen haben. Also, ja, so, bisher haben wir zwei Hauptelemente entworfen. Eine ist die Hero-Seite und die zweite ist der Abschnitt für Feature-Universitäten. Werfen wir einen kurzen Blick darauf, indem wir auf Play klicken. Dies ist eine wirklich gute Praxis, um dies zu tun weil es Ihnen eine faire Vorstellung davon gibt, was Sie zu bauen versuchen. Und ich denke, dass das jetzt zu einer wirklich guten Form kommt. Das war's also für diese Lektion. Wir sehen uns in der nächsten Klasse. 17. Musterkarten mit automatischem Layout entwerfen: Ich hoffe, Sie folgen bis jetzt durch. In dieser Lektion werden wir weiter entwerfen. Lassen Sie uns schnell auf die Wireframe-Seite gehen und sehen, was wir vor uns haben. Also im Grunde haben wir diesen Abschnitt für jetzt und lassen Sie uns sehen, was wir damit machen. Grundsätzlich ist meine Idee, all diese Eigenschaften, die Exzellenz hat, in Karten darzustellen. Und wir werden die Karten mit automatischem Layout machen, was die beste Funktion von FISMA ist. Fangen wir an. Ich beginne mit der Auswahl alles und ich werde nur kopieren, dass auf Bord Designseite. Also war ich nur sehr schmutzig Copy-and-Paste Job. Hier drüben schalte ich vorerst das Netz aus, indem ich G. abschließe . Jetzt wird dies unsere Dienstleistungen unsere Überschrift für den Abschnitt sein. Die Abschnittsüberschrift wird, wie wir bereits beschlossen haben, eine Überschrift drei sein. Also, wenn wir zu einer Überschrift drei gehen, Dies dient als unsere Abschnittsüberschrift. Dies wird der Untertext zu dieser Überschrift sein. Also werden wir dies als Überschrift für zuweisen. Es ist sehr einfach, wenn Sie diese Textilien auswählen. Und wenn ich nur auf dem Weg nach und voila, wir haben das Hinzufügen voll c hier drüben. Sie können sehen, dass dies ist, das passt ganz schön hinein. Okay, jetzt ist es die Aufgabe, diese in Karten umzuwandeln. Und im Grunde werde ich den Prozess für diese Karriereberatung machen. Und dann wiederhole ich das auch für die Universitätszulassungen und dann kannst du für den Rest tun. Und das wird eine Menge kreativer Freiheit in der Welt sein. Also lassen Sie uns voran und im Grunde werde ich damit beginnen, dies zu duplizieren. Also drücke ich den Altar auf der Tastatur. Ich werde das einfach duplizieren und dann werde ich all diese Textkörper daraus entfernen. Ich werde einfach den ganzen Raum entfernen, den ganzen leeren Raum davon. Und ich mache die Autobreite hier drüben. Das wird nun die Überschrift des Bären mit mir sein. Ich bin mir sicher, dass Sie derzeit nicht in der Lage sind, zu visualisieren, wie die Kurve aussieht, aber wir werden dorthin kommen. Also werde ich das auf die gleiche Weise wie dieser Stil zuweisen. Und das geht auf, für uns. Also mache ich einfach eine Überschrift für hier. Ich werde zum Text gehen und ich werde hier auswählen. Ich werde Überschrift vier machen. So okay. Also haben wir unsere Karriereberatung hier rüber. Und dann haben wir das kopiert, richtig? Also, jetzt werde ich die Karriereberatung Bit daraus entfernen. Entfernen Sie auch den zusätzlichen Platz. Und das wird der Haupttext oder der Absatztext sein. Wenn Sie nun zu unserer Topographie gehen, werden wir sehen, dass der Absatztext der offene Song bei 24 Warte, 2446 ist. Also werde ich das einfach kopieren. Ich werde die Eigenschaft kopieren und ich füge einfach die Eigenschaft dafür ein. Und sehen wir haben die Open Sans und bei 24, Ich werde eine schnelle automatische Breite dafür tun, indem Sie hier am 8. Oktober klicken. Und dann werde ich einfach auf die Breite abschneiden und Sie können den Textfluss sehen. Dies ist eine coole Funktion. Es kommt mit Auto-Layout. Und ich werde drei Zeilen Text behalten, so dass es Einheitlichkeit gibt. Also gibt es das. Jetzt wollen wir hier einen Call-to-Action. Es fehlt im Wireframe, aber dieser Wächter wird auf eine Seite auf der Website verlinken. So wird es ein mehr Call-to-Action lernen. Also werde ich zum Design gehen, ich gehe zum Design, werde ich. So richtig? Deshalb müssen wir einen Call-to-Action entwerfen. Erfahren Sie mehr. Und ich werde das mit dem Textwerkzeug tun. Ich verwende T auf der Tastatur, und ich tippe einfach Erfahren. So wie Sie sehen können, die Learn More ist nicht in Open Science hatte 24. Dies wird eine CPA Tasten sein, also würde ich es vorziehen, in Poppins zu sein, die unsere primäre Schrift ist, die Sie entschieden haben. Also werde ich nur vier 1s Typ Poppins hier drüben. Vier Pins bei mittlerer Größe sieht gut aus. Ich reduziere nur das Gewicht um, ich mache die Schriftgröße auf 22. Ich denke, das sieht etwas besser aus. Da dies ein Aufruf zum Handeln ist, sollte dies die Primärfarbe haben. Also werde ich füllen, und dann werde ich diese Farbe auswählen, die übrigens unsere Primärfarbe ist, die Sie ausgewählt haben. Das coole Ding an Sigma ist in dieser Box, meine großen Schuhe, die Dokumentenklasse. Und in den Dokumentfarben behält es alle Farben, die in diesem Dokument vorhanden sind. Wenn Sie also beobachten, sind dies genau die Farben, die wir in unserer Farbpalette erstellt haben. Jetzt, da die Primärfarbe ausgewählt ist, werde ich nur die Deckkraft auf 80% reduzieren und dann einfach ein bisschen Schlagschatten hinzufügen. Also werde ich zu Effekten gehen und ich werde den Schlagschatten 44. Das sieht also tatsächlich wie eine anklickbare Schaltfläche aus. Nun, was ich tun werde, ist, dass ich auch einen Pfeil hinzufügen werde, nur die Art von Pfeil, die wir auf die ursprüngliche CTA gehalten haben, gilt jetzt Call-to-Action. Um das zu tun, was ich tun werde, werde ich auf das Plugin-Icon klicken. Wenn ich, werde ich nach einem Pfeil suchen, werde ich im Wesentlichen wieder für einen Schriftsteller gehen. Aber dieses Mal, da die Schriftgrößen 22 sind, werde ich auch die Höhe des Pfeils 222 behalten. Und ich werde nur dieses Symbol importieren. Wie Sie sehen können, wird das Symbol importiert und importiert. Also ja, sobald das Symbol wichtig ist, werde ich nur bringen, dass ich in den Rahmen ein komme. Dies ist nur eine kleine Sache zu tun, um zu sehen, dass alles nicht durcheinander ist. Das ist nicht so wichtig. Jedenfalls. Ich werde diesen Pfeil nochmal geben, die Farbe der Marke, die Farbe des CTA, das hier genau hier ist. Also gehen wir hin. Also haben wir unseren Pfeil sowie die in Farbe mit Disziplin übereinstimmt, erfahren Sie mehr CDA, oder? Um dies nun zu einer Karte zu machen, haben wir am Anfang gesagt, dass es sich um Karten handeln werden. Also, was ich tun werde, ist, dass ich diesen Learn More CPA in eine automatische Layout-Stil-Taste machen werde . Also werde ich nur die Umschalttaste ein drücken so dass das automatische Layout mit hinzugefügt wird, ich werde 16 hier drücken, 16 für die Polsterung auf allen Seiten. Nun, was ich tun werde, ist, dass ich diesen Pfeil nehmen werde, diesen kleinen Pfeil, ich werde ihn in der Größe ändern. Ich werde 22, 10-22 Höhen machen , damit es ein wenig größer wird. Und dann werde ich es einfach in dieses Layout ziehen, indem ich Befehl drücke. Wenn ich also den Befehl drücke, kann ich Elemente in die automatischen Layouts einfügen. Nun, da Sie sehen können, dass dies zu einer Schaltfläche, einem Layout wird. Obwohl Sie sehen können, dass der Pfeil etwas höher ist als die Weitere Informationen. Das kann also aussortiert werden, indem man hier auf dieses Menü geht und dieses drückt. Also denke ich, dass dieser Learn More CTA bereit ist. Also, um dies jetzt in Karte zu konvertieren, was wir tun werden, ist, dass wir ein weiteres automatisches Layout all dieser Elemente erstellen. Und dann füllen wir es mit Weiß und setzen dann Schlagschatten. Mal sehen, wie das geht. Also werde ich mit der Auswahl dieser drei Elemente beginnen. Ich bin bereit, Shift a zu tun, das ist für das automatische Layout. Das automatische Layout wird hinzugefügt. Jetzt, nachdem ich das automatische Layout hinzugefügt habe, gehe ich zum Padding-Abschnitt, und ich werde 16 Pixel-Padding hinzufügen, damit Sie sehen können, dass es Leerzeichen um den Text herum gibt. Und dann als nächsten Schritt werde ich ein paar Filter es vorstellen. Also, wenn ich auf füllen klicke, ist der Standard-Phil die von weiß. Also, jetzt hat diese ganze Sache eine weiße Füllung, füllen. Und dann werde ich zu Effekten gehen und ich werde den Schlagschatteneffekt anwenden. Jetzt, wie Sie sehen können, sogar mit einem sehr minimalen Schlagschatten-Standardeffekt können Sie sogar mit einem sehr minimalenSchlagschatten-Standardeffekttatsächlich sehen, dass es eine Form einer Karte annimmt. Das müssen wir nur noch mehr betonen. Also werde ich zum Schlagschatten-Menü gehen und ich werde die Unschärfe auf 30 ändern. Und dann werde ich den Draht 215 wechseln. Und da gehen wir. Also haben wir unsere erste Karte bereit für die Karriereberatung. Ein paar Punkte für diese Karte verbessert werden, die mir in den Sinn kommen, ist dies mehr lernen muss nach links ausgerichtet werden. Also werde ich einfach dieses Element auswählen. Und das ist ein Problem der Polsterung selbst. Also werde ich hier gehen und ich werde die linke Polsterung auf 0 ändern. Und während ich das tue, können Sie sehen, dass sich der Learn Moodle auch nach links verschiebt. Es ist viel mehr als ich. Eines der Dinge, die wirklich einen wirklich guten Geschmack zu diesem Design hinzufügen könnte , wird ein Symbol sein. Also, und Gezeiten und Ikonen, sie passen wirklich gut zusammen. Für diese Berufsberatung müssen wir ein kontextuelles Icon finden. der Berufsberatung geht es um das Gespräch. Es geht um einen Dialog. Also gehe ich zu meinem Plug-in-Icon-Effekt. Und ich werde nach so etwas wie einer Nachricht suchen. Eine Nachricht. Ich kann, ich denke, das kann ich, ich mag das. Könnte ich. Du kannst wählen, was ich will. Und dann werde ich das Symbol wählen itis 64 Pixel. Und wenn ich das mache, werde ich das Symbol hier drüben importieren. Wir Symbol wird importiert, wie Sie sehen können. Siehst du. Also das Symbol ist hier in diesem Element und dieses Auto-Layout, das war, weil wir dieses ausgewählt hatten, dann haben wir das Symbol importiert. Lci hätte irgendwo auf dieser Seite gelandet. So cool. Nun, wenn Sie sich erinnern, während wir die Farbpalette entwarfen, hatten wir beschlossen, dass all ihre tertiären Farben etwas sind, das wir für Symbole verwenden werden. Tertiäre Farben sind Flare-Farben. Also werde ich zurück zum Design gehen und ich werde eine tertiäre Farbe für dieses kleine Symbol wählen. Also lassen Sie mich zur Farbpalette gehen. Ich denke, ich werde mit dieser Farbe gehen. Also werde ich den ColorCode auswählen. Und ich gehe zu Design. Und ich werde es hier einfügen. Und es ändert die Farbe. Und ich werde es zu 80% undurchsichtig machen. Und alles, was ich tun muss, ist Auto-Layout-Box, also muss ich es einfach ziehen und es einfach dort sitzen lassen. So ist das Archiv bereit, um das Aussehen der Karte weiter zu betonen. Was ich tun kann, ist, dass ich 20 Pixel Koordinatenradius löschen kann. Das wird also nur die Wache zum Aufprall bringen. Also, hier geht's. Dies ist die Karte, über die wir entworfen haben. Jetzt müssen wir die Karte auf dem Bildschirm platzieren. Also, dafür werde ich das Raster wieder durch Kontrolle g aktivieren und ich werde diese Karte nehmen und ich werde es auf dem Gitter ausrichten. So haben wir diese Karte erstellt. Was ich jetzt tun werde, ist, dass ich den gesamten Prozess auch für den Hochschulaufnahmestützer wiederholen werde . Und dann werde ich diese Lektion beenden. Und dann können Sie den gleichen Prozess für den Rest der Karten machen. Also fangen wir an. Ich werde die ausschalten, desto größer durch Drücken von Kontrolle G und ich werde das duplizieren, diese Box. Also werde ich auf „Alter“ drücken und ich werde nur duplizieren. Übrigens, wenn Sie den Hang des Prozesses bekommen haben, dann können Sie dieses Video jetzt stoppen und an Ihren Karten arbeiten oder Sie können auch das nächste Video starten. Jetzt komme ich zurück zu dem Prozess, werde ich diese Zeilen löschen. Ich werde einfach den ganzen Leerraum entfernen und ihm eine automatische Breite geben. Und ich werde den Textstil als Überschrift für geben. Mit der Überschrift für Textstil. Ich werde das nehmen und ich werde die Überschrift daraus entfernen. Ich werde auch den zusätzlichen Platz beseitigen, als es gibt. Ich werde ihm eine automatische Breite geben. Ja, das geht über die Grenzen hinaus. Und dann werde ich ihm den Absatz-Textstil geben, den wir genommen haben, was die Open Sans Schriftart ist. Ich kann also, was ich tun kann, ist, dass ich diese Eigenschaften auswählen und diese Eigenschaften kopieren kann. Ich füge es einfach hier ein und die Eigenschaften werden eingefügt. Was ich auch tun kann, ist, dass ich das nehmen kann und Schöpfer stapel aus diesem. Ich kann das als mein Absatzformat benennen. Und das Absatzformat wird erstellt. Wir werden das in drei Zeilen machen. Also im Grunde, was ich tun werde, ist, dass ich einfach die Größe ändern und es in drei Bahnen machen werde . Ich werde verkleinern, indem ich die Steuerung und mein Scrollrad drücke. Und wenn sie das tun, dann werde ich dieses Element einfach kopieren. Ich dupliziere das andere nur. Ich werde drücken und dann werde ich es einfach rausnehmen. Ich werde es hier und am Wochenende behalten. Fügen Sie dazu einfach ein automatisches Layout hinzu. Ich werde Shift a tun, um das automatische Layout hinzuzufügen. Das ist sehr viel Elaine. Ich werde 16 Pixel Polsterung auswählen. Das kommt schön raus. Ich werde es geben, füllen Sie die Standardeinstellung. Phil wird weiß sein. Und dann werde ich zu den Effekten gehen und ich werde den Schlagschatteneffekt mit der Unschärfe als 30 und y-Wert 15 Pop . Dann werde ich auch den Gärtner-Radius auf 20 Pixel nehmen und die Wache ist fertig. Aber warten Sie eine Minute, wir haben den Artikel nicht hinzugefügt. Also, um das Symbol hinzuzufügen, was ich tun werde, ist, dass ich zu meinem Plug-in gehe, ikonischen Phi, und ich werde nach Universität suchen. Also denke ich, das ist ein anständiger Universitätsgegenstand. Ich kann es für die 64 Höhe bekommen. Und ich werde das einfach importieren. Also, wenn ich dieses Symbol importiere, was ich tun muss, ist dieses Symbol kommt in seinem eigenen, seinem eigenen Kunststiefel. Also muss ich, und das ist die Icon-Rate, also muss ich dies dem Frame 29 hinzufügen. Und dann kann ich das einfach von hier nach außen löschen. Ich kann einfach die Farbe in eine der tertiären Farben ändern, die ich mag. Ich gehe in die Farbpalette und vielleicht wähle ich eine Universität verfärbt. Und wir werden das kopieren. Und ich werde es hier einfügen. Ich werde die Deckkraft zu 80% tun. Und dann werde ich dieses Symbol einfach an den Anfang der Zeile verschieben. Und so haben wir eine kleine zweite Karte. Bereit. Ich werde diese Lektion in München beenden. Und ich bitte Sie, all diese drei Karten selbst zu machen. Wenn eine der Möglichkeiten, dies wie möglich zu tun, um nur diese Ebene so zu duplizieren, und dann versuchen, es einfach auszugeben , so dass Sie nicht mit irgendeiner der Arbeit, die wir getan haben. Was auch getan werden kann, ist, dass Sie sich auf diese Schichten in dem Referenzmaterial beziehen , das ich zur Verfügung gestellt habe, so dass Sie nehmen können, können Sie direkt die Karten referenzieren, die bereits gemacht worden waren und möglicherweise Reverse Engineering sie und von ihnen lernen. Also denke ich, ich werde diese Lektion vorerst beenden. 18. Hintergrund hinzufügen: Willkommen zurück. Ich nehme an, Sie sind auf einer ähnlichen Seite und Sie haben tatsächlich gearbeitet, Gott diese Wachen für sich selbst zu verbieten. Es ist in Ordnung, wenn es einen kleinen Unterschied zwischen dem, was Sie gerade auf dem Bildschirm sehen, und Urinausscheidung. Es gibt definitiv kreative, autonome kreative Freiheit bei uns mit den glänzenden Tertiärfarben in Bezug auf die Schriftgrößen, etc. Der wichtige Teil ist also, dass du jetzt alle fünf Karten vor dir hast, damit wir fortfahren können und wir unsere Akzentstücke hinzufügen können. Lassen Sie uns ein wenig über Hintergrund als Akzentstück sprechen. Wenn also, wenn es nicht für diesen Hintergrund der Farben ist, die drei Kreise, die wir mit diesem Farbverlauf setzen, würde dieses Bild wirklich, wirklich gemacht aussehen. So VOD, diese Farben derzeit tun, ist sie bieten einen Hintergrund und sie bieten einen Akzent, der sehr angenehm für das Auge ist. Also werden wir hier drüben etwas von der gleichen Art tun. Und nur um es spielerisch zu halten, war das Bild auf der rechten Seite der Achse. Also setzen wir unser Akzentstück auf die linke Seite. Um dieses Akzentstück zu setzen, werde ich das Kreiswerkzeug auswählen, das Ellipsenwerkzeug, das ist. Und ich werde klicken und ziehen. Wie Sie sehen können, ist es wie frei fließend. Es bildet eine frei fließende Ellipsenform, aber in dem Moment, in dem ich Shift drücke, hängt es nur auf eine Form ein und das ist ein Kreis. Also werde ich diesen Kreis nehmen und ihn hier drüben platzieren. Nun, um einen Farbverlauf hinein zu setzen, hatten wir das letzte Mal alle Primärfarben gewählt. Dieses Mal werden wir ein wenig effizienter Weg zu nutzen. Es gibt also dieses Plug-in, das als Webgradienten bezeichnet wird. Und ich werde auf Web-Farbverläufe klicken und ich werde nur die Farbverläufe überprüfen, die sie in der Datei haben. Ich denke, der regnerische Ashwin ist ziemlich Kongruenz zu unserem primären Farbschema. Also werde ich nur darauf klicken. Und voila, wir haben die Ash Villa hier. Ich füge nur die Transparenz zu diesem hinzu. Ich füge nur die Deckkraft hinzu. Das heißt, ich mache es zu 50% undurchsichtig. Und dann dupliziere ich das einfach für einen Effekt. Ich werde ältere oder Kontrolle oder Option drücken. Und dann werde ich das einfach duplizieren. Und nur zum Spaß, werde ich auch den Farbverlauf auf diesem ändern. Ich öffne das gleiche Plug-in. Und lassen Sie uns jetzt ein wenig freie Farbe für das Plugin haben. Ich denke, wir können uns damit begnügen. Verlockend wie Ihre, Das ist ziemlich ähnlich zu einer der tertiären Farben, die Sie ausgewählt haben. Also, wenn ich das tue, kommt es dazu. Ich werde die Deckkraft wieder auf 50% ändern. Ich nehme die Füllung vielleicht auch auf 80%. Und jetzt, was ich tun muss, ist, dass ich auf beide Teile klicken und ich muss sie zurück schicken. Und genau sohaben wir gerade die Art und Weise verändert , haben wir gerade die Art und Weise verändert wie dieser Bildschirm aussieht, indem wir diese beiden Akte und Stücke hinzugefügt haben. Wir sehen uns in der nächsten Klasse. 19. Karten erstellen: Bevor wir in das nächste Bit eintauchen, lassen Sie uns schnell eine Vorschau, was wir bisher getan haben. Wir werden auf diese Schaltfläche klicken. Und dann werden wir sehen, dass man zu einer tatsächlichen Vorschau unserer Arbeit ist. Ich sah so weit aus, so gut. Ha, okay, das ist unsere Heldenseite, die du entworfen hast. Alles sieht ziemlich ordentlich aus. Die, Dies ist ein zweiter Abschnitt, den wir taten, die weiter vorgestellten Universitäten als ein paar Universitätslogos gleichen Abstand zwischen jedem von ihnen. Und das ist der dritte Abschnitt, den wir entworfen haben , der über unsere Dienstleistungen verfügt. Und dann haben wir diese Wachen von Grund auf neu entworfen. Und dann haben wir auch dieses visuelle Element hinzugefügt. Lassen Sie uns nun mit der Arbeit an dem nächsten Abschnitt beginnen. Und dafür lassen Sie uns schnell zum Drahtmodell gehen und verstehen, was als nächstes kommt. Also haben wir für diesen Abschnitt in erster Linie entworfen, das sind unsere Dienstleistungen. Der nächste Abschnitt kommt also in USD Events. Also werde ich das ziemlich ähnliche Muster von Operationen verwenden, die ich früher benutzte. Ich werde alles auswählen. Und ich werde das einfach kopieren. Ich gehe in die Entwurfsphase und ich werde es irgendwo hier einfügen. Okay? Okay, jetzt, die Aufgabe zur Hand ist es, dies in wie wirklich visuell ansprechende Abschnitt dieser Website zu konvertieren . zunächst Dafür werde ichzunächstein Rechteck und ein Rechteck dieser Farbe machen. Also im Grunde die Einstellung, die wir für uns gehen. Es gibt einen weißen Abschnitt mit bunten Akzentstück, und dann gibt es einen rechteckigen grauen Abschnitt, der keinen Akzent hat. Dann wieder, da, da ist dieses weiße Stück. Und jetzt gehen wir wieder für einen Greenpeace hier drüben. Also werde ich auf klicken und einfach zufälliges Rechteck zeichnen. Ich bin nicht bereit, den Dimensionen vorerst viel Aufmerksamkeit zu schenken. Und ich kann den Farbwähler benutzen. Und ein Farbwähler wählt einfach die Farbe, auf die Sie klicken. Also klicke ich hier rüber. Und so haben wir große diese Farbe. Also, was ich tun werde, ist, dass ich dieses Element auf dieses Rechteck kopieren werde. Ich ziehe das einfach. Ich muss das zuerst zurück schicken, damit die Schichten nicht störend sind. Aber jetzt werde ich das hier drüben kopieren. Ich benutze die Mittelausrichtung. Und dann ist das im Grunde Rubrik 3, die wir hier für unsere Dienste genutzt haben. Wir können das auch benutzen, was nicht gerade drei ist, das sind Poppins und 28. Das muss also eine Rubrik vier sein. Lassen Sie mich einfach die Topographie überprüfen. Ja, tut es. In der Tat, Überschrift vier, können Sie Poppins auf 28 sehen. Also lassen Sie mich einfach diesen Stapel erstellen, der als Überschrift bezeichnet wird, damit wir diesen nahtlos nutzen können. Okay, und dann, also werde ich Überschrift für, dafür verwenden. Großartig. Und ich werde diesen Stil verwenden , der wieder für den Text darunter steht. Also werde ich es hier nehmen. Und dann werde ich einfach auf Stil klicken. Und ich werde auf den Weg gehen. Obwohl jetzt das Problem hier ist, was passiert ist, ist sowohl die Überschrift als auch ein Subtext haben die gleiche Schriftgröße, gleiche Farbe, das gleiche Bit. Vielleicht möchte ich diese Größe vergrößern, denn das wird wie ein Abschnittskopf sein. Also mache ich es zu einer Rubrik drei. Ich richte es in der Mitte aus. Und ich werde es ein wenig runter nehmen, damit es nicht überfüllt ist. Gut. Wir gehen über die Auto-Layout-Sache, vielleicht am Ende, so dass wir den Raum standardisieren können. Okay, jetzt geht es weiter, das sind die Informationen, die wir hier darstellen wollen. Und das muss in einem sehr optisch ansprechenden Format sein. Deshalb können wir eine Karte entwerfen, aber wir werden nicht den gleichen Prozess verfolgen, den wir verwenden, um diese Karten zu entwerfen. Lassen Sie uns einen anderen Weg sehen, mit dem wir eine Karte erstellen können. Ich beginne mit dem Textwerkzeug. Also werde ich einfach T auf meinem Computer drücken. Und dann werde ich den 24. April hier drüben schreiben. Okay? Am 24. April, dann können wir das in eine Art Ding umwandeln. Also werde ich tun, ist eine Verschiebung, die das automatische Layout macht. Und sobald das automatische Layout fertig ist, kann ich die Füllung auswählen. Und dieses Mal werde ich eine der tertiären Farben verwenden. Wir haben beschlossen, dass wir tertiäre Farben sowohl für Icons als auch für kleine Akzente verwenden werden. Lassen Sie uns das als Gegenstand behandeln. Also werde ich zur Farbpalette gehen. Und vielleicht möchte ich diese Farbe verwenden. Diese Farbe klingt gut. Also werde ich diese bestimmte Farbe bei 30% Deckkraft verwenden. Ich werde das kopieren. Ich gehe zum Design, und dann klicke ich das in den Film. Und ich werde diese 230 füllen. Ich denke, ich könnte es etwas leichter gebrauchen, also mache ich vielleicht 20%. Okay, das sieht gut aus. Obwohl ich jetzt das Gefühl habe, dass es etwas Raum zum Atmen braucht. Es ist, als fühle ich mich ein wenig gefangen. Also werde ich die Polsterung auf 16 Pixel erhöhen und dann den Radius auf vielleicht zehn Pixel kurven. Klasse. Das sieht gut aus. Das sieht absolut gut aus. Okay? Also voran, was ich tun werde, ist, dass ich den Text von hier nehmen werde und ich werde diesen Text neben diesem einfügen. Wir wollen das nicht von 10:00 bis 14:00 Uhr. Für jetzt. Wir werden es besser präsentieren. Und dafür werde ich einfach auf die automatische Breite klicken , so dass es die Größe der Box ändert und die Box geändert wird. Und jetzt, was ich tun werde, ist, dass ich die Rubrik zwei ändern werde. Also gehe ich hierher und klicke auf Rubrik vier. Okay, meine Überschrift hat sich geändert. Und dann nur für Symmetrie werde ich versuchen, das so zu bringen. Und während ich die Box verschiebe , fließt dieser Text hinein. Und da gehen wir. Also haben wir diesen 24. April und die University of Western Australia. Also haben wir diese beiden Komponenten der Karte geschrieben, die wir erstellen wollen. Ich werde beide auswählen. Gehen Sie für eine automatische Layoutverschiebung. Ok, wenn Sie sehen können, dass diese Einheit von Westaustralien etwas über der Symmetrielinie für diese. Um das anzugehen, klicke ich hier auf, was die Ausrichtung und Auffüllung Option ist. Und ich werde es in die Mitte bringen. Das war's also. So haben wir diese spezielle Komponente erstellt. Wir haben eine Menge Text darunter. Also, was wir tun werden, ist, dass wir einen ähnlichen Prozess verwenden. Ich werde diesen Text kopieren. Ich werde diesen Text hier drüben einfügen und ihn einfach so ziehen, dass sie lesbar sind. Okay? Und dann werde ich die Absatztext-Option verwenden. Siehe, wir haben Paragraph Text Option hier auch verwendet, die die Open Sans Schriftart bei 24 Legler ist. Also werde ich den Absatztext auf diesem verwenden. Also werde ich zu den Textstile gehen und ich werde Absatzstil zu tun. Und okay, Sie haben das sagt, okay, also im Grunde, wenn ich diese Schaltfläche visualisieren, sind diese Karte, Ich möchte, dass diese Karte mit einem Kalender oder vielleicht E-Mail-Liste oder so verknüpft wird. Sie benötigen also einen Call-to-Action. Ich doppelklicken Sie einfach hier und dann klicke ich hinein. Und dann werde ich das einfach duplizieren. Ich drücke die Wahltaste. Und dann bringe ich es hierher. Und wir haben unseren kleinen Aufruf zum Handeln, um dies zu ergänzen. Und jetzt ist das letzte, was noch übrig ist, die Zeit hinzuzufügen, die von 10:00 bis 02:00 Uhr ist. Also werde ich das einfach kopieren und es hier einfügen. Nämlich, ich werde die automatische Breite auf diesem machen, so dass es überschaubar wird. Ich werde das hier drüben ausrichten. Und ich werde dafür wieder den Absatzstil verwenden. Obwohl jetzt, obwohl jetzt darüber nachdenken, könnte ich dieser Schrift vielleicht ein wenig Gewicht hinzufügen. Aber wenn Sie hier sehen, ist die Option weg, weil wir ein vorausgewähltes Textil gewählt haben. Also, um diese Option zurück zu bekommen, was wir tun werden, ist, dass wir hier klicken, was besagt, lösen Sie den Stil. Also, wie wir diesen Stil verabscheuen, wieder, kommt die ganze Textoptionen Sache heraus. Und dann werde ich es nur halb fett machen, okay? Und ich denke, das sieht ein bisschen besser aus als das vorherige Liniengewicht. Okay, um diesem etwas mehr Flair hinzuzufügen, was ich tun werde, ist, dass ich ein Symbol einer Uhr bekommen werde, die Zeit bedeutet. Also, dafür werde ich zu ikonischem Phi gehen. Ich werde auf ein Symbol klicken. Wenn ich aus der Liste der Plugins, werde ich nach Uhren suchen. Und vielleicht möchte ich das wählen, 24 Pixel Höhe hinzufügen. Und dann werde ich einfach das Symbol importieren und ist hier. Schließlich, was ich tun kann, ist, dass ich dieses Symbol auswählen kann. Und dann ziehe ich es und lege es neben meinen Zeitabschnitt. Und nur um es ein wenig einheitlicher zu machen, werde ich ein Auto-Layout verschoben hinzufügen. Wenn Sie beobachten können, hat sich die Uhr nach oben geneigt. Also, was ich tun werde, ist, ich werde zu diesem Abschnitt gehen und versuchen, es zu senken und alles zentriert und ausgerichtet. Ich richte das einfach an, ich werde dieses Element an unseren Aufruf zum Handeln ausrichten. Los geht's. Es sind also noch ein paar Schritte übrig. Um also eine tatsächliche, tatsächliche Karte daraus zu machen , werden wir ein weiteres Rechteck verwenden. Also wähle ich ein Rechteck. Bekomme ich sogar R drücken? Und dann werde ich einfach ein Rechteck wie dieses zeichnen. Was ich tun werde, ist, dass ich das mit Weiß füllen werde , weil das ist, was ich tun will. Und dann werde ich es rückwärts schicken. Also, wenn ich es Schicht für Schicht rückwärts schicke, können Sie sehen, dass alles begonnen hat, zu springen und nach vorne zu kommen. Tun Sie das weiter, bis alle Elemente vor mir erscheinen. Und Voila. Hier passiert also die gesamte Navigation. Und in den zukünftigen Klassen werde ich Ihnen beibringen, wie wir das besser organisieren können, wie wir Elemente zusammenfassen können. Aber für jetzt, was ich nur für diesen Zweck tun werde. Also werde ich das auswählen und ich werde alle Ebenen im Inneren auswählen. Und dann werde ich Befehl G tun, um eine Gruppe zu erstellen. Jetzt, da ich diese Gruppe erstellt habe, werden sich all diese Elemente zusammenbewegen. Okay, da dies eine Karte ist, was wir tun werden, ist, dass wir einen Eckenradius von 20 Pixeln geben , so dass es um sie herum an der Ecke erscheint. Und dann werde ich auch den Effekt eines Schlagschattens geben. Für Schlagschatten, Ich werde 30 wie die Unschärfe und 15 als die y. genau wie wir für diese Karten getan haben. So haben wir eine Wache geschaffen. Um diese Karte in dieses Design zu platzieren, kann ich das Gitter reaktivieren, indem ich die Kontrolle G mache. Und dann noch einmal, vielleicht richten Sie es am Anfang des Rasters aus. Ich deaktiviere das Raster erneut mit der Steuerung G. Jetzt, da wir hier sind, werde ich diese Lektion in einer Minute stoppen, und ich werde Sie bitten, ein ähnliches Auto für diese Veranstaltung von der Monash University zu machen und uns in der nächsten Vorlesung zu sehen. 20. Den nächsten Abschnitt mit Bildern und Karten erstellen: Ich nehme an, Sie haben eine solche Karte erstellt, über die wir in der letzten Vorlesung gesprochen haben. Also lasst uns jetzt voran gehen. Aber bevor wir weitermachen, möchte ich Sie darauf hinweisen, dass wir den Scroller , der im Wireframe vorhanden ist, nicht in unser Design implementiert haben. Dieser Scroller gibt dem Benutzer tatsächlich die Idee , dass es mehr zu kommen und somit der Benutzer scrollen kann. Ich könnte diese Schriftrolle hier drüben kopieren und es einen Tag nennen. Aber ich möchte dies von Grund auf neu entwerfen, damit wir eine weitere Methode sehen können, Elemente zu verwenden, Formen zu verwenden, sowie das automatische Layout zu verwenden. Um dies von Grund auf neu zu erstellen, werde ich das Ellipsen-Tool wählen. Ich hätte auch einfach auf meine Tastatur klicken können. Und ich werde eine Ellipse zeichnen, vielmehr werde ich Kreis zeichnen. Also, um einen Kreis zu zeichnen, werde ich weiterhin Shift drücken. Und dann würde ich vielleicht irgendwo anhalten. Nun, das sieht so aus wie humungous sagt, ich werde diese 16 Pixel machen. Sobald ich diese 16 Pixel mache, sieht das ein bisschen winzig und möglicherweise die Größe, die wir gerade suchen. Was ich jetzt tun werde, ist, dass ich dies mit meinem Optionstaste duplizieren werde. Und ich mache nur vier so kleine Kreise, die ziemlich analog zu dem sind, was wir zu entwerfen versuchen. Nun, ich möchte diesen Kreis verdunkeln und ich werde vielleicht eine Primärfarbe dafür verwenden. Also werde ich hier rüber gehen und ich werde diese Primärfarbe jetzt aus meiner Dokumentfarbe auswählen . Und als letzter Schritt werde ich alle auswählen. Und ich werde einfach Auto-Layout hinzufügen. Ich drücke die Umschalttaste a und ein Auto Layout wird hinzugefügt. Ich werde den Abstand zwischen den Elementen auf 16 Pixel auswählen. Und ich werde dies zentrieren, indem ich einfach auswähle. Und so bekommen wir einen Scroller. Großartig. Gehen wir nun weiter und gehen wir zum Drahtmodell, um zu sehen, was der nächste Abschnitt für uns bereithält. Wir haben also bei weitem die bevorstehenden Universitätsveranstaltungen behandelt. Wir haben auch den Scroller hinzugefügt, und jetzt haben wir eine Länder-Tab, die vor uns entworfen werden soll. Das wird sein, es wird drei Bilder geben. Nun, diese drei Bilder würden über die Länder , die der Kunde will, dass wir auf der Seite behalten. Und dann wird es noch einen Scroller geben. Also lasst uns einfach reinspringen. Wie immer werde ich das einfach kopieren. Und ich gehe, und ich werde das auf mein Design einfügen. Ich nehme das hier. Ich werde das löschen, weil wir das entworfen haben. Jetzt scheint Länder wie eine Abschnittsüberschrift zu sein. Also denke ich, ich werde es hier platzieren und ich werde diesen Textstil von Überschrift drei verwenden. Damit es wirklich herausspringt, da es wirklich als Abschnittskopf herausspringt. Danach möchte ich, dass du dich hier drüben konzentrierst. Also müssen diese drei Elemente im Tandem sein. Dafür muss es eine Karte geben. Und das wird ein Element sein, wenn es sein wird, wenn Bild hier drüben. Also lassen Sie uns das einfach von Grund auf neu gestalten. Dafür werde ich im Wesentlichen das Gitter durch Kontrolle g aktivieren. Also möchte ich das nach links ausrichten. Also, was ich tun werde, ist, dass ich jetzt ein Rechteck zeichnen werde. Und ich werde ein Rechteck von hier zeichnen. Hier werde ich ein Rechteck zeichnen, das vier Rasterlinien umfasst. Ich mache vier, weil wir Dwell Gridlines haben. Und dann werden wir auf diese Weise in der Lage sein, für drei Rechtecke zu entwerfen. Jetzt wird dieses Rechteck sein, wo unser Bild untergebracht werden wird. Es gibt also mehrere Möglichkeiten, Bilder in ein Rechteck zu setzen, aber im Moment werde ich das Plugin als Splash verwenden. Und ich werde einfach auswählen und spritzen. In einem nicht gespleißten Plug-In. Es beschleunigt nur den Workflow, wenn Sie versuchen, Bilder zu importieren. Also werde ich nur nach Kanada suchen. Ich kann nicht mal nach einem Satelliten suchen, Toronto oder Vancouver, oder so etwas. Aber dieses Bild sieht etwas kühler aus. Also, was ich tun werde, ist, ich werde nur auf dieses Bild klicken. Und dann wirst du sehen, wie das Bild hierher kommt. Ich werde das einfach schließen und das Plug-in spritzen. Nun muss ich den Rest der Elemente bauen, die Kanada studieren. Und ich werde es hier rüber ziehen und den Subtext hinter dem Studium Kanada. Um mein Leben einfacher zu machen, was ich tun werde, ist, dass ich diese Stile direkt nehmen werde. Ich werde diese Kacheln sowohl aus der Überschrift als auch für den Subtext kopieren. Und ich werde es hier drüben einfügen. Also lasst uns das machen. Ich werde die Eigenschaften kopieren. Ich füge die Eigenschaften hier ein. Ok? Und ich werde auch die Eigenschaften dieses Subtextes kopieren. Und ich werde es hier einfügen. Ok? Also jetzt, um diese drei Elemente in eine Karte a zu konvertieren, werden wir das gleiche Verfahren verwenden, das wir für unsere Servicekarten verwendet haben, das heißt, wir werden alle diese drei in ein Auto-Layout kombinieren. Ich werde Shift a dafür verwenden, damit Sie sehen, dass alles neu angeordnet ist. Jetzt werde ich 16 Pixel-Polsterung hinzufügen. Und dann werde ich einen Film hinzufügen. Und der Film wird aus weißer Farbe sein. Also, wenn ich eine Füllung hinzufüge und ich die Polsterung mache, beginnt es bereits wie eine Karte zu sehen. Ich werde nur einen 20 Pixel Eckenradius machen, so dass es von den Ecken hell braun wird. Und ein Effekt, ich werde einen Schlagschatten hinzufügen. Und für den Schlagschatten wird die Unschärfe 30 Pixel und der y-Wert wird 15 sein. Und genau so ist unsere Karte fertig. Ich werde einfach das GRID_WIDDT-Steuerelement G deaktivieren und Sie können sehen, dass wir eine Karte haben. Also werde ich diese Lektion jetzt beenden. Und ich fordere Sie auf, den Rest der Karten neben der Bildlaufleiste unten selbst zu erarbeiten . Und dann lassen Sie uns in der nächsten Vorlesung neu gruppieren, um die weiteren Abschnitte zu gestalten. Wir sehen uns in der nächsten Klasse. 21. Mach es selbst für den anderen: Ich nehme an, dass Sie alle diese drei Karten selbst aus dem Titel entworfen haben , den ich in der vorherigen Sitzung entworfen habe. Ich hatte einige Modifikationen an diesen Wachen gemacht, vor allem mit den Polsterungen, so dass es ein wenig zusammenhängend aussieht. Ich werde Sie bitten, das auch zu versuchen. Nun, dies ist der Abschnitt, in dem der Hintergrund weiß ist und wir müssen ein visuelles Element hinzufügen. Also im Grunde, was ich tun werde, ist, dass ich nur das visuelle Element kopieren werde , das ich früher entworfen habe. Lassen Sie mich Ihnen zeigen, wie. Also rede ich von diesen beiden Kreisen. Also klicke ich auf sie. Ich wähle beide Kreise aus und ich werde sie mit der Optionstaste duplizieren. Und ich werde sie einfach hier rüber ziehen. Und ich werde sagen, drucken Sie sie und ich behalte einen so, den anderen so. Und ich denke ja, ich glaube, wir sind fertig. Sie würden nicht glauben, wie viel der Unterschied es gemacht hat , nur ein kleines Akzentstück im Design zu haben. Und das macht den Job wirklich gut. Ich werde die Umschalttaste drücken, um zu zoomen. Und wenn Sie sehen können, ist das so harmonisch. Also alle diese Akzentstücke auf dem Helden messen auf der rechten Seite, dann auf der nächsten Karte, auf der linken Seite, auf der nächsten Karte auf der rechten Seite. Also, da ist das. Bevor wir also in die nächsten Abschnitte des Designs gehen, möchte ich, dass du alles ausprobierst. In den nächsten paar Abschnitten. Dies werden die gleichen Techniken sein, die wir bisher verwendet haben, um so viel zu entwerfen. Also werde ich Sie einfach zu dem Referenzblatt bringen, das ich bereits enthalten habe. Und wir gehen einfach über das, was getan werden muss. Und ich werde Sie bitten, es selbst zu tun. Nehmen Sie sich etwas Zeit, um über das zu üben, was wir gelernt haben. Und du kannst mich immer erreichen, wenn es irgendwelche Schwierigkeiten gibt. Wenn du eine Anleitung willst, kannst du mir eine Nachricht schicken und ich werde dir helfen, deine Hürde zu überwinden. Also werde ich einfach auf dieses Referenzblatt klicken und ich werde einfach vergrößern. Also im Grunde, was wir getan haben, ist, dass wir wie das Design zusammen bis zum Tab „Länder“ abgeschlossen haben . Wir haben auch diese beiden Kreise für visuelle Element aufgenommen. Im nächsten Abschnitt wird es also ein Zeugnis geben. Für das Zeugnis, wir werden dieses Muster dieser bieten großen grauen Hintergrund folgen . Die, das ist das sind unsere Überschriften und das sind unsere Unterpositionen. Und das ist eine Karte, die wir entworfen haben. Wenn Sie also zum Drahtmodell gehen, werden Sie sehen, dass das Zeugnis dort bereits gegeben ist. Es ist dieselbe Zeugenaussage, dieselbe Person. Also alles, was für die endgültigen Designer getan wurde. Ich habe dieses Bild von einem Spritzer hinzugefügt, und ich habe das als Überschrift und das als Körper gewählt. Das ist derselbe Scroller, das heißt, sie sind überall vorbei. Das ist also dieser Abschnitt von Zeugnissen. Im nächsten Abschnitt gibt es einen sehr kurzen Abschnitt und es gibt einen Aufruf zum Handeln, der als bereit bezeichnet wird, Ihren Traum zu verfolgen. Das wird unsere Überschrift eins sein, Poppins 55. Und dann ist dies die Schaltfläche Jetzt anwenden, die wir hier auf der ersten Seite entworfen haben. Dies ist also die gleiche Schaltfläche Anwenden. Und dann dieser Abschnitt, es nur die Fußzeile. Das Photon wird in den Drahtmodellen angegeben. Es ist nicht in der tatsächlich die Fußzeile im Client-Anforderungsdokument angegeben ist. Es ist nicht im Wireframe, aber trotzdem ist dies nur ein einfaches Rechteck, das mit primären Farbtext als Einladung gemalt wurde. Und das sind die Elemente. Damit wird das gesamte Design der Webseite, die wir erstellt haben, effektiv vervollständigt. Und ich möchte Sie bitten, all diese Elemente selbst zu machen und das auszuprobieren. Gehen Sie zurück zu mir, wenn Sie Schwierigkeiten haben. Und wir sehen uns in der nächsten Klasse. 22. Vielen Dank: Hey Freunde, danke, dass du diesen Kurs absolviert hast und das bisher gesehen hast. Ich hoffe aufrichtig, dass Sie etwas von Wert gelernt haben und Sigma verwenden, um UI- und UX-Design zu machen. Ich bin dabei, Ergänzungen zu diesem Kurs zu erstellen. Zunächst einmal bin ich auf Kunden-Feedback und Änderungen Aspekt der Dinge ausgerichtet. Ich habe diesen genauen Entwurf fünf bis sechs Personen gezeigt, die gerade in der Branche sind. Und ich habe dieses Feedback gesammelt und bin dabei Videovorträge als Teil des Kurses selbst zu erstellen. Und ich plane, das bis zum 28. Februar 2021, also in diesem Jahr, abzuschließen. Und ich werde auch den Kurs mit einem weiteren Projekt erweitern, das von unbewegt durch Lampe. Dieses mobile App-Projekt wird bis zum 15. März 20211 was Besonderes, dass dieses mobile App-Projekt haben wirdabgeschlossen sein was Besonderes, dass dieses mobile App-Projekt haben wird , ist, dass wir gehen, um die Komponenten Teil, die wiederverwendbaren Komponenten, die einmalige Sigmas, Kern Stärken. Also werden wir diesen Teil vollständig in diesem mobilen App-Projekt abdecken. Und wir werden auch ein paar Prototyping machen. So sehen Sie in der nächsten Klasse ist.