Typografie und vertikaler Rhythmus für UI-Designer und Webentwickler

1. Was wir in diesem Kurs behandeln werden: Mal sehen, was wir in diesem Kurs behandeln werden, und in diesem Kurs zu entwerfen und in diesem Kurs zu entwickeln. Dies sind keine Dribbble-Aufnahmen, sind tatsächliche Übungen dieses Kurses, also lassen Sie uns sie sehen. Das ist einer von ihnen. Noch einen. Lassen Sie uns die Gitter verstecken. Es gibt einen anderen, und einen anderen, einen anderen, einen anderen, einen anderen, und auch diesen. Wenige weitere Anzeigen, werden wir so gestalten, und es gibt ein weiteres Thema für diese Anzeige, können Sie hier sehen. Aber wie wir dies erreichen werden, werden wir die effektive Nutzung von Typografierastern mit Leerraum lernen. Wir werden die Zeit- und Raumfähigkeiten für Designer beherrschen, und eigentlich nennt man es White Space. Das ist alles für Designer. Wir werden auch lernen, wie man verschiedene Schriftarten anpasst, wie man sie paart, wie man effektive Schriftarten auswählt, wie man Ihre Nachricht mit Typografie vermittelt. Wie man Raster effektiv verwendet, um verschiedene Layouts und viele tolle Sachen zu entwerfen. Selbst für Entwickler habe ich eine Menge interessanter Sachen wie diese VW-Einheit, können Sie hier sehen, wie es erweitert und Verträge mit dem responsive Web-Design, und wir werden eine Menge von responsive Web-Design Typografie diskutieren oder es heißt im Grunde reaktionsschnelle Topographie. Sie können es hier in Aktion sehen, groß, mittel. Sie können sehen, wie sich die Schriftgröße verschiebt. Für kleine, können Sie sehen, die Überschriftengröße gerade verschoben. Dann werden wir diskutieren, wie benutzerdefinierte typografische Fähigkeiten in Bootstrap zu verwenden. Auch in Bootstrap, wie wir benutzerdefinierte typografische Fähigkeiten mit einem Blog-Beitrag wie diesem verwenden werden. Dies wird auch als vertikaler Rhythmus bezeichnet. In dieser Übung haben wir auch den vertikalen Rhythmus umgesetzt. Um also alles über diese Techniken und Standards für Typografie in CSS und HTML zu erfahren, werden Sie diesen Kurs wirklich genießen. Es gibt mehr spannende Sachen in diesem Kurs wie mobile Bildschirme und ihre Schriftgrößen und PT, SP, DPI, DIP, alle verschiedenen Bildschirmauflösungen Chaos und wie wir mit diesem Chaos entwerfen werden. Das sind also wenige IOS-Geräte, alle verschiedenen Geräte, die den gleichen Blog-Post für sie entwickelt haben. Dies ist eine der Übungen. Außerdem werden wir nach Google Android Typografie Fähigkeiten suchen und wie man es effektiv nutzen kann. Außerdem werde ich mit Ihnen ein Geheimnis teilen, wie Sie Ihren Bildschirm verbinden oder wie Sie dieses Design auf Ihren mobilen Bildschirmen sehen können, so dass Sie einfach wählen und wählen Sie Schriftarten , Design und Farben und alles andere. Sehen ist also glauben. Wenn Sie Ihr Design direkt auf einem mobilen Bildschirm sehen können, können Sie viel besser gestalten. Okay, jetzt ist die Frage, wer sollte diesen Kurs nehmen? Ich empfehle nicht sehr unerfahrenen Designern oder Designern, die gerade erst mit Photoshop begonnen haben, um diesen Kurs zu absolvieren. Dies ist ein mittlerer Schwierigkeitsgrad, so dass alle Designer, die bereits ein bisschen Photoshop kennen und sie wissen, wie man es benutzt, sie kennen die Verknüpfungen, sie sollten diesen Kurs nehmen. Auch alle Entwickler, die Grundlagen von HTML und CSS kennen, sind willkommen. Wenn Sie gerade angefangen haben, CSS und HTML zu lernen, denke ich, dass dieser Kurs nicht für Sie ist. Du verstehst vielleicht nicht wenige Dinge. Außerdem benötige ich Sie, um die neueste Version von Photoshop CC herunterzuladen und zu installieren. Jeder Designer, der denkt, dass sein Design etwas fehlt oder etwas Seltsames hat, dann sollte er wirklich diesen Kurs nehmen, um Ihr Design zu verbessern. Ich bin mir sicher, dass dieser Kurs Ihre Entwürfe sogar auf die Dribbble- oder Behance-Level-Designer verbessern wird. Also lasst uns eingraben und loslegen, und wir sehen uns im Kurs. 2. Einführung in die Typografie: Ob wir für eine mobile App oder eine Website oder Web-Design oder sogar Werbung entwerfen , 95 Prozent jedes Designs ist grundsätzlich Typ, das ist Text. Um diesen Text zu Ihrem Vorteil nutzen zu können, müssen Sie ein sehr guter Designer sein und Sie sollten sehr gut in Typografie sein. All die guten Designer, die sie besitzen die Fähigkeit. Text ist ein wichtiger Teil jeder Art von Medien, ob es sich um Anzeigen, TV, Websites, Blogs, Bücher, Filmtitel, Apps, alles, es gibt immer eine Menge Text, den Sie sehen oder konsumieren müssen. Was ist Typografie? Wenn Sie diesen Text verwenden können, oder richtig geschrieben geschrieben, kann er für jeden Designer als Duell umrandetes Samurai-Schwert oder vielleicht mehr als ein Samurai-Schwert fungieren. Was ist der Zweck der Typografie? Wann immer Sie etwas entwerfen oder eine Anzeige oder App oder irgendetwas entwerfen, machen Sie zwei Dinge mit Ihrem Typ. Nummer 1, müssen Sie es effektiv für Lesbarkeit und Lesbarkeit arrangieren. Wenn Ihr Benutzer es nicht lesen kann, hat es keinen Sinn, eine solche Anzeige oder mobile App zu entwerfen. Die zweite ist, Sie müssen Ihre Stimmung, Ihre Nachricht an den Leser oder Betrachter kommunizieren . Dies sind die beiden grundlegenden Zwecke der Verwendung von Typografie in Ihren Designs. Nun, Typografie für Web und Mobile Apps, werden wir eine Menge Dinge in diesem Kurs behandeln. Also nur einige Grundlagen, dass die Leute nur Websites und Blogs scannen. Sie lesen es nicht wirklich, es sei denn, es ist sehr wichtig. Die zweite Sache ist, dass wir eine Menge Fragen in Bezug auf Website-Topographie beantworten, wie zum Beispiel, welche Schriftart wir verwenden werden, ob ich diese Schriftart für Business-Website oder Blog oder eine Web-App verwende. Für mobile Apps werden wir behandeln, wie Typografie auf kleinen Bildschirmen verwendet wird, weil es sehr schwierig ist , Typografie auf kleinen Bildschirmen zu verwenden und es gibt verschiedene iOS und Android, verschiedene Spezifikationen der Schriftarten und Größen, die Apple und Android haben angegeben. Wann immer Sie etwas entwerfen, sollten Sie sich Fragen stellen, welche Schriftart wird schneller geladen oder sollte ich fünf Schriftarten oder drei Schriftarten oder 10 Schriftarten für meine Website verwenden? Manchmal machen wir Designer so etwas: „Proxima Nova ist heutzutage im Trend. Leute, ich sollte es überall benutzen.“ Also, egal welche App oder Website Ihr Design, Sie setzen einfach Ihre Proxima Nova Schriftart hinein. Das ist sehr merkwürdig. Jede Website hat ihre eigenen Spezifikationen, Business-Typ und alles, so ist dies nicht klug. Wir werden in diesem Kurs viel abdecken, keine Sorge. Mal sehen, was wir als Nächstes haben. Nun, wenn Sie ein Anfänger Designer oder Entwickler sind, denken Sie vielleicht, wie Sie verschiedene Formen kombinieren, welche Schriftart eignet sich für lustige Websites, für Business-Websites oder einen Mode-Blog. Auch viele Entwickler, die ich gesehen habe, verwenden sie nur Open Sans, weil es der einzige ist, den ich leicht kombinieren kann. Tun Sie solche Entscheidungen oder diese Designentscheidungen nicht. Diese können Sie wirklich in Schwierigkeiten bringen wenn Sie weiterhin mit der gleichen Schriftart für wie 10 Websites entwerfen. Ich werde Sie durch viele Beispiele führen, sogar mit Bootstrap, um Ihnen zu zeigen, wie wir verschiedene typografische Techniken auch für Entwickler und Designer verwenden können . Beginnen wir also mit dem Kurs und fahren Sie mit der nächsten Lektion fort. 3. Über Schriftart und Schriftfamilien: Jeder Designer sollte mit einigen der typografischen Begriffe wie Schriftart, Schriftfamilien und was Schriftart ist vertraut sein. Mal sehen, was im Grunde eine Schriftart ist. Schriftart ist im Grunde eine Reihe von Zeichen mit spezifischem Stil und Größe. Eigentlich war die Größe in den alten Tagen relevant für Schriftart oder Typ Stil oder Typ Gesicht. Heutzutage ist eine Schriftart in verschiedenen Größen verfügbar, so dass Sie jede Größe wie 72 Punkte, 12 Punkte, 100 Pixel oder was auch immer Sie wollen die Größe verwenden können , da es digital ist müssen Sie keinen Block aus Metall Stück Schrift Zeichen machen. In den alten Tagen wurden die Schriftarten und Zeichen mit bestimmten Metallblöcken hergestellt. Lassen Sie uns einige der Beispiele von Schriftarten sehen. Ich zeige hier zwei verschiedene Schriftarten, eine ist Amsi Pro-Familie und die zweite ist Crique Grotesk Schriftart. Dies sind verschiedene Größen, wir können jede Größe verwenden, es gibt keine Begrenzung für Größen. Wir können von einem Punkt bis unbegrenzt verwenden, Größe ist in diesen Tagen nicht relevant mit Schriftarten. Nun, was ist ein Schriftstil? Oder wir können es auch font-face nennen. Für die moderne Verwendung, denken Sie nur daran, dass es Schriftart Stil ist. Spezifischer Stil einer Schriftart, Sie haben es richtig erraten. Beispiele hierfür sind „Fett“, „Kursiv“, Normal“, „Mittel“, „Kondensiert , „ Schwarz“, „Halbfett“, „Fettdruck“ und „Extrafett“. Heutzutage gibt es viele verschiedene Stile von Schriftarten. Hier sind einige Beispiele für Schriftarten, ich verwende Amsi Pro Ultra Style , der momentan extrem fett ist. Es gibt einen weiteren Stil hier, die Amsi Pro Light 48 Punktgröße ist, und wir haben Proxima Nova Condensed, die Zeichen werden verdichtet oder zusammengedrückt, und dann haben wir Proxima Nova Extrabold. Dies sind verschiedene Stile, wie dieser ist kondensierter Stil, dieser ist Extrabold, dieser ist Pro, Ultra Pro, und dieser ist leichter Stil. Was sind Schriftfamilien? Schriftfamilie bedeutet also, dass es eine große Familie der gleichen Schriftart geben sollte, so dass es im Grunde verschiedene Schriftarten , die auf einer gleichen Geometrie, Form oder Stil ausgelegt sind. Zum Beispiel ist Helvetica eine sehr große Familie, sie hat sich zu Stilen verdichtet und hat eine Menge kühner Stile als viele abgerundete Stile. Helvetica hat mehr als 30 oder 44 verschiedene Schriftarten in einer einzigen Familie, es ist eine sehr große Familie. Sie können auch verschiedene große Familie Google-Schriftarten von dieser Seite finden , die ich Ihnen jetzt zeigen werde. Dies ist Website besser Google-Schriftarten, und Sie können hier sehen wir haben diese Raleway-Familie, und Sie können sehen, wir haben 1, 2, 3, 4, 5, 6, 10, 15, 16, 17, 18, verschiedene Stile einer einzigen Schriftart. Dies ist im Grunde eine sehr große Familie, viele Stile, die Sie hier sehen können, diese Source Sans Pro ist auch eine sehr große Familie, Roboto, auch eine sehr große Familie. Auch wenn Sie sehen können, dass wir Roboto kondensiert haben, wenn wir hier drüben haben, können Sie diesen Roboto Mono sehen, das gehört auch zu dieser Roboto-Familie. Es hat einen anderen Stil, aber sie sind tatsächlich die gleiche Familie, sie sind Cousins. Dann haben wir Source Code Pro, die auch mit der Source Sans Pro verwandt ist, und wir haben diese Roboto Condensed, es ist auch mit Roboto Familie verwandt. Dies sind verschiedene Google-Schriftarten, die sehr große Familien haben. Schauen Sie und sehen Sie hier exO, eXo 2 und Kanit, sie haben auch sehr große Familien, viele verschiedene Stile. Der Vorteil einer großen Familie ist, dass Sie eine einzelne Familie verwenden können und Sie viele verschiedene Stile zur Auswahl haben können , wenn Sie entwerfen. Hier geht es um Schriftart, Schriftgröße und Schriftfamilien. Fahren wir mit der nächsten Lektion fort. 4. Typografie Anatomie: Nun, in dieser Lektion werden wir einige der Typographiebegriffe und ein bisschen über Typ-Anatomie lernen . Diese sind also sehr wichtig, weil wir leicht Kraft paaren können, indem wir diese typografischen Begriffe lernen. Also lasst uns anfangen. Zunächst einmal werden wir über Basislinie, Mean-Line und Cap-line lernen. Cap-Linie bedeutet Großlinie, also ist es die Linie, imaginäre Linie sitzt oben in Großbuchstaben. Dann haben wir Basislinie, was sehr wichtig ist. Basislinie ist die Linie, auf der alle unsere Briefe sie darauf sitzen. Die Mittellinie ist im Grunde an der Spitze unserer kleinen Buchstaben oder wir können x-height sagen. Dies ist im Grunde die Höhe unserer Kleinbuchstaben. Das ist also im Grunde Mean-Line. Das Wichtigste ist diese Grundlinie. Stellen Sie also sicher, dass Sie wissen, was diese Baseline ist. Eine weitere Sache, dass einige dieser Buchstaben über diese Großlinie gehen und einige wie diese y, p und andere, sie gehen über diese Grundlinie. Also bedenken Sie einfach. Lassen Sie uns über die x-Höhe und Großbuchstabe jeder Schriftart lernen. Also im Grunde ist die Höhe des kleinen Buchstabens x im Grunde die x-Höhe einer beliebigen Schriftart oder eines beliebigen Typs. Die Großbuchstaben Höhe ist im Grunde die Großhöhe. Jetzt ist x-height sehr wichtig und das Verhältnis zwischen x-Höhe und Großbuchstabe ist auch ein sehr wichtiger Faktor für die Lesbarkeit der Schriftart. Wenn wir also eine gute x-Höhe haben, kann es einfacher sein, auf kleinen Geräten oder kleinen Booklets oder so etwas zu lesen. Wenn Sie also für mobile Apps entwerfen, müssen Sie eine Schriftart mit größerer x-Höhe in Betracht ziehen. Auch die effizienten Schriften wie Helvetica und wenige andere, sie haben x-Höhe von 67 Prozent bis 69 Prozent der Kapitalhöhe. So sind sie fast 65-70 Prozent der Höhe eines Großbuchstaben. Dies ist also auch ein weiterer Faktor, dies ist ein Faktor zwischen verschiedenen Schriftklassifizierungen. Die älteren Schriftarten, die alten Schriftfamilien oder alte Schriftarten wie Garamond haben eine geringe x-Höhe. Lasst uns jetzt etwas über Aufsteiger und Absteigungen erfahren. Aufsteiger sind im Grunde der Buchstabenabschnitt, der über die mittlere Linie verlängert wird , oder Sie können hier die Spitze des d sehen. Dann haben wir Abstieg , der im Grunde nach unten von der Basislinie ausgedehnt wird. Also alles, was von der Basislinie fällt, ist im Grunde Abwärter. Zähler ist ein weiterer sehr großer Faktor bei der Erkennung oder Lesbarkeit jeder Schriftart oder Typ. So gibt es zwei Arten von Zählern, offen und geschlossen. Offener Zähler ist im Grunde der offene Teil des lustigen Buchstabens wie dieser. Es ist nicht vollständig von allen Seiten geschlossen. Der Abstand zwischen diesem Buchstaben e ist im Grunde der offene Zähler und dann haben wir geschlossen Zähler. Geschlossener Zähler ist im Grunde der Raum in jedem Buchstaben wie diesem o und der obere Teil dieses e. Warum lernen wir darüber? Weil sie bei der Lesbarkeit helfen können, wenn wir sehr große Zähler haben, ist diese Schriftart oder dieser Typ oder Stil sehr gut lesbar. Nun ist dies auch ein weiterer Faktor, um diese x-Höhen zu schreiben. So spielen diese beiden eine sehr große Rolle in der Lesbarkeit oder Schriftarten Zähler und x-Höhe. Lassen Sie uns einige andere typografische Begriffe lernen, so dass wir leicht jeden Typ identifizieren können. Also hier gehen wir haben diesen Schnabel, der ein bisschen spitz Ende aus jedem Großbuchstaben oder kleinen Buchstaben ist. Sie werden normalerweise am Anfang und am Ende des Buchstabens gefunden. Dann haben wir diesen Schlaganfall. Sie können den oberen Teil dieses p-Buchstabens sehen, es gibt zwei verschiedene Striche. Man ist am Start sehr schlank und in der Mitte ist es sehr dick. Also im Grunde wird dies der Strichunterschied genannt scheinen zu nehmen und es ist ein sehr wichtiger Teil bei der Identifizierung verschiedener Klassen von Schriftarten. Dann haben wir die untere Schleife, die im Grunde der untere Teil von g ist. Sie können hier sehen. Auch verschiedene Klassen von Schriftarten. Sie haben unterschiedliche diesen Loop-Stil. Dann haben wir das Ohr. Ohr ist im Grunde dieser spitzen Ohr-Art-Knopf, der aus diesem aus g Buchstaben herauskommt. Dies ist auch ein sehr wichtiger Faktor. Es unterscheidet sich in verschiedenen Schriftarten. Dann haben wir diesen Scheitel. Apex ist im Grunde der obere Teil eines jeden Buchstabens, wo wir diesen Stift-Stil Rest von so etwas wie Bauchnachbar hier oder so etwas haben. Dann haben wir einen Schwanz. Dies ist im Grunde der untere Teil des Buchstabens y. Dann haben wir dieses Terminal, das auch wie Schwanz ist, aber es erstreckt sich nicht unten. Es ist im Grunde auf der linken oder rechten Seite eines Buchstabens wie dieser erweitert a. Dann haben wir serif. Serif ist im Grunde jede Zeile oder irgendetwas, das im Grunde die Schriftarten getrennt ist, wie wir diese Serifenschriftarten haben, sie haben diese Platten am Ende ihrer Buchstaben wie folgt. Sie können hier sehen y. also auch am unteren Rand des y Buchstabens. Das ist also im Grunde serif, und hier geht es um verschiedene typografische Begriffe. Ich hoffe, dass Sie Ihren Vortrag genossen haben. Fahren wir mit der nächsten Lektion fort. 5. Humanistische Alt und Übergangsteil: In dieser Lektion werden wir verschiedene Klassifizierungen von Typen sehen , damit wir sie effektiv nutzen können. Bevor wir verschiedene Klassen von Typen sehen, werden wir etwas über die diagonale Spannung lernen. Sie können unten von hier sehen, die O, Ich habe eine diagonale Spannung gezeigt. Sie können sehen, dass dieses O unterschiedliche Schläge hat, so dass es hier an den Seiten ein bisschen dick ist, und wo ich die diagonale Spannung gestellt habe, ist es im Grunde der schlankste Schlag. Wo der Strich am schlanksten ist, zeichnen Sie einfach die Linie von schlankster bis schlankster und es zeigt die Diagonalspannung an. Dies ist einer der Faktoren bei der Identifizierung verschiedener Schriftarten. Jetzt sind die ersten Humanisten. Humanist, wie der Name schon vermuten lässt, ist es im Grunde, wie Menschen mit dem Stift in den alten Zeiten schreiben. Sie können die Striche sehen und der Schreibstil sieht aus wie menschliches Schreiben mit einem Stift. Nun, es hat zwei grundlegende Faktoren, um es zu identifizieren, eine ist diese sehr geneigte Querbalken von e. Sie können sehen, es ist wie 30 oder 40 Grad Winkel, und Sie können hier in dem Buchstaben Bear sehen, wie es geschrieben wird. Zweitens ist, Sie können die Serifen an der Unterseite dieses n sehen, habe ich darauf hingewiesen. Sie können sehen, dass die Serifen wie ein menschlicher Fuß etwas gekrümmt sind, also ist dies ein weiterer Faktor. Das sind also drei Faktoren. Es hat eine sehr gute diagonale Spannung, sehr schräg, und dann haben wir geneigte Querstange und dann haben wir Fuß Stil Serifen. Jetzt habe ich dir alten Stil oder Garalde gezeigt. Dies sind zwei verschiedene Klassen, alter Stil und Übergangszeit. alte Stil war ein bisschen alt und übergang wurde auf, oder man kann sagen, improvisierte Version dieses alten Stils gebaut. Nun, der alte Stil hat sehr wenige Faktoren, um es zu identifizieren, eine ist diese diagonale Spannung, es hat eine gute diagonale Spannung, weniger als die Humanisten, aber es hat eine gute diagonale Spannung. Dann die Spitze dieser können Sie diese Aufsteiger und Abstieg sehen, sie haben diese Steigung serif Ende, und dann haben wir dieses W, es ist sehr einzigartige Eigenschaft dieses alten Stils oder Garamond Garalde Stil. Sie können hier sehen, die W haben Version gekreuzt, also überlappen sie sich, es ist wie zwei V, V Buchstaben überlappen sich miteinander. Sie können sehen, ich habe dieses e hervorgehoben. Im Inneren des e, es ist im Grunde Zähler, so dass sie sehr weniger Gegenraum haben. Sie können hier sehen wir innerhalb der e-Buchstaben, dann haben sie an der Spitze des T, können Sie sehen, dass Schnäbel sind etwas schräg, und dann, wenn wir uns die Serifen betrachten, können Sie am Ende des h Buchstaben sehen, sie sind nicht total gerade, sie sind ein bisschen kurvig. Dies ist alles über alten Stil, Hauptfaktoren sind dieses W und der Schnabel, und diese schrägen Spitzen von d Buchstaben und ein bisschen von dieser diagonalen Spannung in allem, was Sie hier sehen können. Sie können auch sehen, dass der R-Buchstabe am Ende einen Höhlenstrich hat, und wenn Sie sich den Übergang ansehen, gibt es viele Unterschiede damit. Sie können an der Spitze des d sehen, die Serif ist ein bisschen sehr spitz, dann ist die diagonale Spannung fast gerade. Sie können sehen, diagonale Spannung ist fast gerade, und Sie können auch in diesem e-Buchstaben sehen, der Zähler ist ein bisschen breiter oder ein bisschen größer als der alte Stil, dann haben wir diese W. W ist nicht überlappend, es ist ein bisschen anders, und dann auch die Schnäbel dieses T-Buchstabens, sie zeigen auch nach unten ein bisschen strukturell. Man kann ein bisschen strukturell sagen. Außerdem gibt es noch einen Unterschied, den ich vergessen habe. Wenn Sie den Strichunterschied im alten Stil sehen, ist der Strichunterschied, dass, wenn Sie diesen Buchstaben h sehen, können Sie hier am Ende des h sehen, wir haben ein bisschen weniger Strichkontrast. Die dicken und die dünnen sind sehr nahe beieinander, aber im Übergang können Sie sehen, die Striche sind sehr viel, dünn ist sehr dünner und die Dicke ist ein bisschen dicker. Dies ist auch ein Unterschied zwischen altem Stil und Übergangsstil. Hier sind einige Beispiele für alten Stil. Dies ist Adobe Devanagari Schriftart, und Sie können hier sehen, wie diese Schriftart angelegt hat, es ist eine kursive Version der Schriftart. Dennoch können Sie sehen, dass T ein wenig schräg ist, und in dieser Schriftart können Sie sehen, dass es sich um eine andere Version handelt, weshalb in verschiedenen Schriftarten einige Funktionen nicht gefunden werden können. Wie hier haben wir W. W ist genau wie die Übergangsschriftart, so dass manchmal diese Typhus-Designer, sie mischen verschiedene Eigenschaften von zwei Schriftarten. Dann haben wir diesen Minion, Pro, es ist auch alten Stil Schriftart. Sie können hier noch sehen, die W ist anders, aber andere Eigenschaften wie dieses Ende dieser r und die oberen Schlampen und Top-Seriifs, sie sind fast wie der alte Stil. 6. Sans Serif und Script: Lassen Sie uns nun über moderne Schriftarten sprechen. Diese werden im Grunde Bodoni genannt, und ihr Hauptmerkmal ist die Strichbreite. Der Hubunterschied ist zu viel, sehr schlank bis sehr dick. Dann ist die andere, dass diese Serifen wie Platten sind, sehr dünne Streifen, wie ich es nenne. Dies ist das Haupteigenschaft dieses Bodoni. Auch die Spannung, die Sie in der o sehen können, ist es sehr gerade, 90-Grad. Jetzt wird die Platte Serif oder es wird auch ägyptische Platte genannt. Sie können erraten, dass sie Serifen wie dicke Platten haben, und deshalb werden sie Plattenserifen genannt. Hier ist die gebräuchlichste Schrift, die wir verwenden, die serif ist. SANS-Serifen haben keine Serifen, keine Platten oder keine Endung am Ende. Sie sind sehr sauber und sehr modern. Hier dreht sich alles um diese serifenlose. Sie haben viele andere Klassen von Sanserifen-Serifen. Verschiedene Schriftdesigner, sie mischen die Qualitäten des alten Stils oder manchmal humanistischen Touch in der sans-serifen-Schrift. Jetzt ist das nächste Skript oder Handschrift. Es sind verschiedene Arten von Skript- oder Handschrift-Schriftarten, aber ich werde sie alle in einem kombinieren. Möglicherweise haben Sie dieses Skript oder Handschrift-Schriftarten gesehen. Sie werden nicht viel im Web verwendet, weil ich nicht denke, dass, wenn Sie einen Absatz in Skript oder handschriftliche Schriftart schreiben, und es kann leicht gelesen werden. Jetzt habe ich dir auf der vorherigen Folie gesagt, dass serif ein paar andere Änderungen haben, wie diese ist humanistischer Sanserif. Nun hätten Sie vermutet, dass es die Merkmale dieses humanistischen Typs teilt , den wir zu Beginn dieses Vortrags besprochen haben. Humanistischer Sans-Seriif, Sie können sehen, der oberste ist Gill Sans. Sie haben dieses Ende am a, und dann haben sie ein bisschen Schlaganfall Unterschied. Auch, wenn man sich diese Open Sans anschaut und die Schrägen in der Theke in der a sind nicht sehr geometrisch. Sie sind ein bisschen schräg. Wenn man sich das g anschaut, ist es auch ein bisschen wie humanistische Schrift. Sie können sehen, ich bin Open Sans-Serif und ich bin auch Humanist Sans-Serif, und ich sehe toll aus. Wenn man sich das g anschaut, ist es der gemeinsame Faktor in allen humanistischen Sans-Serif. Sie sind ein bisschen wie humanistisch oder altmodisch. Auch dieses ein weiteres Beispiel ist diese Calibri Schriftart, Open Sans, Gill Sans. Sie sind eine Art humanistischer Sans-Seriif. Deshalb sehen Sie, dass Open Sans heutzutage sehr beliebt ist. Eine weitere Variante der serifenartigen ist geometrische Sans-Seriifs, und sie basieren auf einer sehr spezifischen Geometrie, wie sehr spezifischen Dreiecken, Rechtecken oder vielleicht Kreisen. Sie basieren auf Geometrie. Sie können hier sehen wir die erste Schriftart haben, ein erstes Beispiel ist Futura. Sie können die os und die es sehen, sie sind fast ein perfekter Kreis. Hier können Sie sehen. Nun, wenn Sie sich diese Proxima Nova Schriftart ansehen, ist es sehr beliebt. Es ist auch geometrisch. Wenn man sich seine o und es anschaut, sind sie fast der perfekte Kreis. Das Museo Sans ist auch geometrisch. Wo das Wort geometrisch ist, können Sie sehen, wie sie gebaut werden. Der Buchstabe c ist auch auf perfektem Kreis aufgebaut. Dann gibt es noch eine andere Schriftart am Ende, Texta. Es ist auch ein geometrischer Sans-Seriif. Sie können dem Humanisten ähneln oder eine kurvige Natur haben, aber sie müssen auf bestimmten geometrischen Formen aufgebaut sein. Es kann nicht nur Kreise oder Quadrate sein, es könnte vielleicht eine verformte Form des Quadrats oder so etwas sein. Dies rundet unsere geometrische Sans-Serif und all die verschiedenen Klassen ab. Ich werde nicht auf zu viel Detail gehen, um 16 oder 17 verschiedene Schriftklassen zu zeigen. Ich denke, die sind gut genug, um dich anzufangen. Ich werde einige der Ressourcen teilen, wenn Sie weiter gehen wollen als diese, wie eine groteske und andere sans-serif. In der nächsten Lektion werde ich Ihnen eine Übung geben, um zu sehen, wie viel Sie eine Schriftart erkennen können. Ich gebe Ihnen vielleicht geometrische, humanistische und andere Schriftarten. Dies wird Beispiele sein, und lassen Sie uns sehen, wie gut Sie bei der Erkennung verschiedener Typklassen tun. Fahren wir mit der nächsten Lektion fort. 7. Über die Linienlänge: Einer der größten Faktoren für die Lesbarkeit ist die Zeilenlänge, es wirkt sich wirklich auf Ihre Lesbarkeit aus. Nun stellt sich die Frage, wie viel Länge eine Zeile in einem Absatz für ein optimales Lesen haben sollte? Nun, einige sagen, es sind 65, 70 Zeichen pro Zeile und 40 Zeichen pro Zeile, so etwas. Ich habe viele Artikel und verschiedene Bücher gesehen, und der Bereich liegt zwischen 45 und fast 85 Zeichen pro Zeile. Sie sind optimal. Nun, warum diese optimale Zeilenlänge? Das Problem ist, wenn Sie zu lange Zeilen haben, dann muss der Benutzer oder Leser seinen Kopf von links nach rechts bewegen, um diese Zeile zu lesen. Nun, wenn Sie eine sehr kurze Linie haben, dann müssen sie von oben nach unten springen, Zeile zu Zeile immer wieder. Dies wird Müdigkeit in Ihrem Benutzer zu produzieren, sogar ihre Augen oder Kopf oder vielleicht einige ihrer Muskeln. Aus meiner Erfahrung, wenn wir Zeichen in Wörter übersetzen, dann sind fast 10-17 Wörter pro Zeile optimal. Sie können je nach Länge des Wortes 19 oder 20 sein, aber es ist fast der Durchschnitt. Nun, ein weiterer Faktor ist die Schriftgröße. Wenn Sie eine gute Zeilenlänge haben und die Schriftart auf die kleinere Schriftart umstellen, haben Sie viele Wörter im gleichen Raum und Sie müssen die Zeilenlänge erneut ändern. Nun, wenn Sie versuchen, zu einer kleinen Schrift zu wechseln, dann ist die Zeilenlänge sehr groß und Sie müssen die langen Zeilen lesen. Dies ist ein weiterer Faktor, also wählen Sie Ihre Schriftgröße mit Bedacht, damit die Zeilenlänge optimal ist. Nun, was ist mit Mobile und Websites? Die Handys haben kleine Bildschirme, also denke ich, dass der Text im Allgemeinen etwas größer sein sollte, Textkörper sollte größer sein. Nun, in der Regel auf Handys ist der Haupttext oder die Absätze im Grunde 120 Prozent der Größe der Absätze auf unseren Desktop-Websites. Wenn Sie eine Website entwickeln und verschiedene Ansichten dieser Website auf Mobilgeräten, Desktop und Tablet anzeigen , dann sollten Sie sich um diese kümmern. Auch auf Mobiltelefonen werden die Leitungen weniger länger sein, da wir weniger Platz haben. Einige der Leitungslängenprinzipien gelten dort nicht. Außerdem müssen Sie auch die Überschriftengröße und die Zeilenhöhe verschieben. All diese Faktoren, die Sie für die Handys abdecken müssen. Wenn Sie auf dem Desktop Entwickler sind, müssen Sie Medienabfragen verwenden, um die Größe für die optimale Zeilenlänge und Lesbarkeit anzupassen . Hier geht es um die optimale Leitungslänge und wie wir sie auf Handys und Desktop-Design verwenden werden, wenn Sie für Mobilgeräte oder Desktop entwerfen. In den letzten beiden Abschnitten unseres Kurses werden wir uns mit all diesen Dingen auf mobilen und Desktop-Größen auseinandersetzen . Fahren wir mit der nächsten Lektion fort. 8. Text: Lassen Sie uns über die Textausrichtung diskutieren. Nun, viele Designer sagen: „Okay, ich weiß, Textausrichtung, was ist Textausrichtung, ich weiß,“ aber es gibt spezifische Verwendungen für jeden von ihnen. Wenn Sie sie richtig verwenden können, können Sie Ihr Design und Ihre Lesbarkeit wirklich verbessern. Lassen Sie uns verschiedene Beispiele und verschiedene Verwendungen von Text-Alignment sehen. Nun, erste ist die sehr gebräuchlichste Linksausrichtung und Linksausrichtung wird nicht für Rechts-nach-Links-Sprachen verwendet. Wir sprechen über Englisch und andere Sprachen, die von links, rechts sind. Jetzt wird die linke Ausrichtung im Grunde für Artikel, Absätze, Bücher, Überschriften und viele andere Dinge verwendet . Also meistens ist es die am häufigsten verwendete Ausrichtung. Stellen Sie sicher, dass es sich nicht um Rechts-nach-links-Sprachen handelt. Rechts nach links sind im Grunde entgegengesetzt. Für die linke Ausrichtung wird es die rechte Ausrichtung sein. Als nächstes wird rechts ausrichten und rechts ausrichten Text wird für normalerweise kleine Textmenge verwendet. Wenn Sie es auf einem Absatz verwenden, dann ruinieren Sie wirklich Ihren Benutzer und Ihren Leser. Stellen Sie also sicher, dass Sie rechts ausrichten für sehr kleine Zeilen oder sehr wenige Wörter verwenden. Nun, hier haben wir den Faktor ist im Grunde rechts-links-Sprachen. Für Rechts-nach-links-Sprachen ist Rechtsausrichten die beste Option. Jetzt, in die Mitte kommen ausrichten. Zentrierausrichtung sollte nur für wichtige Linien verwendet werden und nicht auf Absätze angewendet werden. Ich habe einige Designer gesehen, die center ausrichten auf vier oder fünf Linien verwenden. Ich denke, es ist nicht sehr klug. Vielleicht können Überschriften und Taglines eines Produkts zentriert oder vielleicht eine weitere Zeile sein, aber nicht über drei, denke ich. Also hier haben wir Lesbarkeitsfaktor. Unsere Augen sprangen von einem in die nächste Zeile, und sie sagen normalerweise voraus, dass sie an die gleiche Stelle gesprungen werden sollten. Jetzt, in der Mitte ausrichten, springen sie von einem Ort zum anderen, so dass es keine gerade Linie ist. Ausrichten ist im Grunde, wenn Ihre linke und rechte Seite fast gleich sind. Es gibt keine Leerzeichen auf der rechten Seite. So gerechtfertigt align wird normalerweise in Büchern und Zeitschriften und Zeitungen verwendet . Ich empfehle ihnen nicht, für Websites oder Blogs zu verwenden. Es ist schwierig, sie zu kontrollieren. Möglicherweise müssen Sie Ihren Text oder Ihren Textkörper ändern oder Ihren Kopiertext bearbeiten, um Ihre Absätze wirklich auszurichten. Lassen Sie mich Ihnen einige der Beispiele von links- und rechtsbündig ausrichten zeigen. Sie können auf der rechten Seite sehen, Ich habe Ihnen gezeigt, richtig ausrichten, richtige Verwendung von rechts ausrichten. Ich zeige nur drei Zeilen, und Sie könnten sehen, dass dieses Recht auf vielen Visitenkarten ausgerichtet ist. Jetzt erinnern Sie sich, warum die E-Mail, Telefonnummer ist fast richtig auf vielen Visitenkarten ausgerichtet, weil es sehr weniger Text ist und Sie sehen können, dass es richtig ausgerichtet ist, die Lesbarkeit nicht schadet. Nun, auf der linken Seite ist ein Absatz, also sollten sie auf der linken Seite ausgerichtet sein. So verwenden wir links- und rechtsbündig ausrichten. Dies ist die richtige Verwendung von links- und rechtsbündig ausgerichteten Texten. Hier haben wir das Beispiel für Ausrichten ausrichten und zentrieren ausrichten. Sie können auf der linken Seite sehen, ausrichten, wir haben verschiedene Räume oder Flüsse im Inneren laufen. Einige Wörter sind mehr Abstand zum nächsten. Manche haben weniger Platz zwischen ihnen. Also werden diese im Grunde Flüsse genannt. Dies ist, wenn Sie versuchen, den Text auszurichten. Stellen Sie also sicher, dass es nicht zu breite Flüsse oder sehr prominente Flüsse in Ihrem Text gibt. Jetzt, in die Mitte kommen ausrichten. Nun, center align Sie verwenden es auf sehr wenigen Textzeilen oder vielleicht Poesie, wie ich hier verwendet habe. Ich weiß nicht, wie ich das geschrieben habe, aber so sollten wir center align verwenden, sehr wenige Zeilen und vielleicht Poesie oder so etwas. Vielleicht ein Zitat aus zwei Zeilen. Also nicht mehr als zwei oder drei Zeilen, schätze ich. 9. Line-Height (Führen): In dieser Lektion werde ich über Zeilenhöhe sprechen und es wurde auch führend genannt. In den vergangenen alten Tagen setzten sie geschmolzene Bleiblöcke zwischen zwei verschiedenen Linien ein, um sie zu trennen. Das hieß führend. Was ist im Grunde führend? Der Abstand zwischen einer Basislinie und der nächsten Basislinie. Wie wir zwei oder drei Textzeilen haben, dann ist der Abstand von einer Basislinie zur nächsten Basislinie im Grunde die Zeilenhöhe. Wie viel Zeilenhöhe sollten wir haben? Es variiert von 120 Prozent bis 60 Prozent für Textkörper. Body Text ist im Grunde die Absätze und Text, wo wir eine Menge von Texten haben. Wir müssen es lesen. Nun sollten Sie für Überschriften nicht mehr als 120 Prozent in Überschriften festlegen. Sehr großer Text, normalerweise, ist die Zeilenhöhe fast von 100 Prozent bis, oder manchmal vielleicht 90 Prozent bis 120 Prozent. Für Textkörper variiert er von 120 Prozent bis 160 Prozent und für Überschriften ist er etwas kleiner als unsere normale Zeilenhöhe. Hier sind einige Beispiele für die Zeilenhöhe des Textkörpers. Textkörper ist im Grunde Absatz, also machen Sie sich keine Sorgen, wenn Sie nicht wissen, was Textkörper ist. Es ist eine Menge von Texten, die gelesen werden sollen. Auf der linken Seite haben wir eine Zeilenhöhe von 133 Prozent, oder wir nennen es auch 1,33 Prozent. Achtunddreißig Pixel ist die Größe unserer Texte. Im Grunde, was wir hier tun, ist, dass wir 38 Pixel mit 1,33 multiplizieren, und was wir bekommen, ist im Grunde unsere Zeilenhöhe. Es könnte 42 Pixel, 46 Pixel oder was auch immer es ist. Auf der rechten Seite haben wir eine etwas größere Zeilenhöhe, die 1,45 Prozent beträgt. Sie können sehen, wie sich dies auf die Lesbarkeit auswirkt. Auch wenn Sie eine sehr enge Zeilenhöhe haben, können Sie den unteren Rand der oberen Schwänze und Schwänze verschiedener Zeichen sehen , und der untere Teil der verschiedenen Zeichen wird den oberen Rand der nächsten Zeile berühren. Dies ist ein sehr großes Lesbarkeitsproblem. Versuchen Sie, die Zeilenhöhe an der Stelle anzupassen, an der Sie denken, dass sie leichter lesbar ist. Nun, hier ist ein Beispiel für Überschriftentext. Sie können auf der linken Seite sehen, ich habe es auf 110 Prozent eingestellt, und die Größe unseres Textes ist 60 Pixel Überschrift. Auf der linken Seite kann man sehen, dass es gut genug ist. Aber wenn Sie auf der rechten Seite sehen, habe ich die Textgröße mehr erhöht. Es ist 72 Pixel-Überschrift, und ich habe es auf 1,05 Prozent eingestellt. Wie werden wir es berechnen? Zweiundsiebzig multiplizieren mit 1,05, und es ist fast 75-76 Pixel. Sie können es auch auf 100 Pixel einstellen. Wenn Sie 72 Pixel haben, können Sie auch die Zeilenhöhe festlegen, 72 Pixel für größere Überschriften. Lassen Sie mich Ihnen zeigen, wie wir die Zeilenhöhe in Photoshop für Überschriften und Absatztexte einstellen können. Wie wir es kontrollieren können. Ich habe diesen Text hier drüben. Dies ist eine Überschrift, und Sie können sehen, Ich werde diesen Text auswählen, und ich werde dieses Zeichenfeld zu bekommen. Ich habe bereits dieses A-Zeichen-Panel hier drüben. Sie können hier sehen wir haben 72 Punkt, die unsere Textgröße ist, und dies ist die Steuerung, wo wir die Zeilenhöhe steuern müssen. Ich kann es auch auf 72 Pixel einstellen. Sie können sehen, dass es gut aussieht. Selbst ich kann darunter gehen, 70 Punkte sieht auch gut aus. Aber wenn ich zu 65 gehe, scheint es ein bisschen problematisch, oder vielleicht zu nah an. Sie können hier sehen, das i der Zeit berührt die g. Ich denke 70 Pixel als das letzte, was wir gehen können und 72 Pixel ist, denke ich, optimal, oder vielleicht 75, wie wir es vorher hatten. Dies wird immer die Zeilenhöhe eingestellt. Lassen Sie uns ein anderes Beispiel sehen, das ich Ihnen mit dem Absatz gezeigt habe. Hier hatten wir den Absatz. Ich werde diesen Absatz auswählen und, Sie können jetzt sehen, es ist 38 Punkt Textgröße, Schriftgröße, und die Zeilenhöhe beträgt 55 Punkte. Wenn ich versuche, es auf 60 zu erhöhen, können Sie sehen, es sieht immer noch gut aus, aber wenn wir über 60 gehen, wie 72, können Sie sehen, unsere ist nicht so weit springen, darunter ist es ein bisschen zu viel Entfernung. Wenn Sie diese 90 oder 100 weiter erhöhen, können Sie sehen, dass sie nicht wie ein Absatz, sondern separate Zeilen aussieht. Dies ist ein sehr großes Problem in der Lesbarkeit und Lesbarkeit, Sie sollten sie im optimalen Abstand halten. Ich werde es auf 50 setzen. Mal sehen, wie es aussieht. Es ist immer noch ein bisschen nah für mich, ich schätze, 55 war besser. Jetzt ist es hier. Hier geht es darum, wie wir die Zeilenhöhe in Photoshop einstellen können und welche Zeilenhöhe wir für den Textkörper verwenden sollten und welche Zeilenhöhe für die Überschrift als nächstes verwendet werden soll. Selbst in HTML, können Sie es auf Line-Height Eigenschaft mit Line-Height Eigenschaft setzen. Einer ist 100 Prozent, 1,2 ist 120 Prozent, und das gleiche wie dieses. Hier geht es um Zeilenhöhe, fahren wir mit der nächsten Lektion fort. 10. Letter (Kerning): Sie haben vielleicht gehört, dass verschiedene Designer sagen, okay, diese, Fehler oder diese Art Kerning ist ein bisschen aus, oder diese beiden Wörter müssen kerned werden. Kerning ist also im Grunde der Abstand zwischen zwei einzelnen Buchstaben jeglicher Art, einer beliebigen Schriftart oder einem beliebigen Wort. So können Sie hier den Raum zwischen o und t sehen, es ist im Grunde das Kerning. Wenn wir uns dieses Wort ansehen, habe ich die Kerning erhöht, also haben sie im Grunde ein bisschen größeren Abstand zwischen den beiden Buchstaben, oder sogar alle Buchstaben. Grundsätzlich bedeutet es, dass manchmal einige der Buchstaben, wenn man hier im Wort Topographie sehen kann, einige Buchstaben wie g und r ein bisschen näher beieinander sind als wenige andere Buchstaben wie p und o und andere Buchstaben. Das heißt also im Grunde Kerning. Mal sehen, wie sich diese Kerning auf unsere Typografie auswirken wird. Was bedeutet es, ist, wenn wir versuchen, guten Platz unter unseren verschiedenen Buchstaben zu haben, dann ist es luftiger, Offenheit, modern, elegant, stilvoll mit Technologie verwandt. Wenn wir weniger Buchstabenabstand haben, dann ist seine Stimmung in Richtung Intimität, und Sie könnten gesehen haben, dass die sehr nahe Buchstaben zueinander in verschiedenen Logos verwendet werden. Grundsätzlich wird weniger Buchstabenabstand meist in Logos verwendet , weil es wirklich ein Problem in der Lesbarkeit und Lesbarkeit schafft. Lassen Sie mich Ihnen einige Beispiele für Buchstabenabstand oder Unterschneidung zeigen. Ich werde Ihnen das schlechte und das feste Beispiel zeigen. Hier haben wir den FedEx in zwei verschiedenen Formen geschrieben. Auf der linken Seite können Sie sehen, dass e und x sehr nahe beieinander sind. Ich habe keinen Buchstabenabstand geändert. Es ist die Standardeinstellung der Schriftart. Unten sehen Sie, dass ich den Abstand zwischen e und x angepasst habe, also ist Kerning im Grunde der Abstand zwischen zwei getrennten Buchstaben. Ich habe die Kerning zwischen E und X fixiert. Auf der rechten Seite sieht man die E, D und E, sie sehen aus, als hätten sie mehr Platz. Also unten habe ich das korrigiert. Ich habe die Unterschneidung zwischen diesen drei Buchstaben reduziert und es schaut uns mehr sogar in die Augen. So verwenden wir Kerning. Meistens wird es in Logos verwendet. Sie haben FedEx Logos gesehen, es ist im Grunde sehr eng Kerning, die meisten Buchstaben berühren sich. So haben sie das FedEx Logo hergestellt. Aber so beheben wir Kerning und was sind die schlechten und guten Beispiele für Kerning. Lassen Sie mich Ihnen zeigen, wie Sie auf dieses Kerning in Photoshop zugreifen werden. In Photoshop, wenn Sie dieses A-Zeichen-Panel hier nicht sehen, können Sie zum Fenster gehen und klicken Sie auf dieses Zeichen hier drüben, und dies wird hier angezeigt. Sie können hier sehen, wir haben diese V/A und es gibt einen kleinen Spalt Schrägstrich zwischen zwei Buchstaben. Das ist im Grunde das Kerning. Wir können zwei Optionen haben, wie optisch. Sie können sehen, dass sich diese Buchstabenabstandskernierung verschoben hat. Optisch steht also im Grunde mit Ihren Augen zusammen, was Ihre Augen sehen, und Metrik ist im Grunde maschinelles Kerning, also ist dies softwarebasiert. Dann haben wir Null und andere Optionen sind für diesen Fehler nicht verfügbar. Das sind jetzt zwei Optionen. Wenn Sie den Abstand zwischen bestimmten Buchstaben ändern möchten, wählen Sie diesen Buchstaben aus, und verwenden Sie stattdessen dieses Steuerelement, wie dieses. Nun, wenn ich es auf 200 Prozent erhöhe, können Sie sehen, dass der Abstand zwischen a und c erhöht wurde. So verwende ich dieses Zeichenbedienfeld, um das Kerning zu erhöhen. Wählen Sie einen Buchstaben, und Sie können dieses Tracking-Steuerelement verwenden, aber ich benutze es für einzelne Buchstaben wie diese. Hier geht es darum, wie Sie Kerning in Photoshop verwenden. 11. Designübungen zur Anwendung von dem, was wir so bisher gelernt haben.: Hallo an alle. In dieser Lektion werden wir diese fantastisch aussehende Blog-Seite entwerfen. Jetzt haben wir gelernt, Zeilenhöhe, Buchstabenabstand, Kerning, Tracking, alles. Also lassen Sie uns das in diesem Design anwenden und loslegen. Ich werde Google-Schriftart für diese Übung verwenden, die Source Sans Pro ist, dies ist einzelne Google-Schriftart und auf der rechten Seite, Ich bin mit Bild von einer kostenlosen Website kann Pixabay oder so etwas sein. Sie können jedes Bild hier verwenden. Ich werde die Links im Ressourcenbereich teilen also stellen Sie sicher, dass Sie die Links verwenden, um diese Schriftart, Source Sans Pro, zu erhalten. Lassen Sie uns beginnen und ich werde eine neue Datei öffnen und die Breite sollte 1400 x 1800 Pixel, 72-Pixel-Auflösung transparent sein. Dieses Dokument nicht mit Farbe verwalten. Klicken Sie auf „OK“ und hier haben wir unsere leere Leinwand. Ich werde „Alt+Entf“ drücken, um es zu füllen. Wir werden weiße Farbe als Hintergrund verwenden. Wählen Sie hier „Weiß“, dann wieder, drücken Sie „Alt+Entf“ und hier haben wir unsere Option Löschen auf Ihrem Mac. Jetzt haben wir unsere leere Leinwand. Jetzt können wir anfangen zu entwerfen, aber zuerst aber zuerstwerden wir hier drüben ein Gitter bekommen, um unsere Sachen auszulegen. Über das Raster werde ich es im nächsten Abschnitt erklären , also mach dir jetzt keine Sorgen darüber. Tu einfach, was ich gerade tue. Wechseln Sie zu Ansicht und Neues Hilfslinienlayout und verwenden Sie in den Spalten Benutzerdefinierte Voreinstellung. In den Spalten können Sie auch diese 8 Spalte und Rinnenbreite 20 verwenden oder wenn Sie mehr als das wollen, können Sie 30 so verwenden und klicken Sie auf „OK“. Jetzt ist unsere Leinwand fertig. Lassen Sie uns anfangen und ich benutze Real Lorem Ipsum Website, um den Text hier drüben zu bekommen, also werde ich Chrome verwenden, um das zu bekommen. Hier sind die beiden Ressourcen, die ich für diese Übung verwende. Dies ist Real Ipsum Website und ich mag wirklich , wie sie echten Text hier drüben mit den Überschriften haben, alles andere und wir verwenden die Source Sans Pro Google-Schriftart. Wenn Sie es in Google-Schriftarten öffnen möchten, können Sie hier klicken und auf diese Seite gehen und eine beliebige Schriftart hier auswählen, wie fett, halbfett, oder vielleicht alle auswählen und von dieser Schaltfläche herunterladen. Klicken Sie hier, Sie können hier sehen, es steht, Zip-Datei. Laden Sie die ZIP-Datei herunter und installieren Sie sie auf Ihrem PC oder Mac. Dies sind die beiden Ressourcen, die wir verwenden. Dies ist die, die wir für die Überschrift verwenden, kopieren Sie diesen Überschrifttext, und wir werden ihn in unserem Photoshop einfügen. Lassen Sie uns diese eine Quelle Sans Pro reguläre Schriftart, Größe, Ich werde 64 Punkte oder 64 Pixel auswählen und ich werde hier über auswählen, Control V. Ich habe den Text hier drüben. Verwenden wir diese gräuliche schwarze Farbe hier drüben. Wir werden Source Sans Pro regelmäßig verwenden, aber wir brauchen ein kühnes Gesicht hier drüben. Das ist eine sehr lange Linie. Lassen Sie uns mit der rechten Maustaste darauf , in Absatztext konvertieren und diesen hier hierher ziehen, wie folgt. Jetzt haben wir ein Problem der Zeilenhöhe, also werden wir diese Zeilenhöhe oder führende 64 verwenden und ich denke, 72 wird mehr als genug sein, wenn es geht. Wir werden in der Nähe von 64 oder es ist 66. Lassen Sie uns den Begrenzungsbereich des Absatzes etwas größer machen. Unsere Überschrift ist alles gesetzt. Als nächstes werden wir diesen Donnerstag, Juli so etwas, dieses Datum kopieren . Wenn Sie das vor neun Minuten wollen, können Sie es kopieren. Ich mag das einfach nicht, also werde ich das hier benutzen. Einfach hier drüben kleben. Jetzt werden wir 18 Punkte Text verwenden und es sollte regelmäßig sein. Gerade jetzt regelmäßig und wir müssen seine Farbe in eine gräuliche Farbe ändern, so etwas, bräunlich grau. Es ist 808080. Weil dieser hier nicht sehr wichtig ist, werden wir so etwas tun. Dann müssen wir diesen ganzen Text kopieren, drei Absätze, kopieren und wir müssen ihn hier einfügen. Unser Textwerkzeug ist bereits ausgewählt, so dass wir es in diesem Bereich wie dieses und Control V ziehen werden . Jetzt haben wir eine Ausgabe der Zeilenhöhe hier drüben, also haben wir jetzt 18. Warum nicht 18 multipliziert mit 1,5, 27. Vielleicht brauchen wir ein bisschen größeren Text, also werden wir 21 multipliziert mit 1,5, 32. 32 Punkte in der Zeilenhöhe und 21 Punkte für die Textgröße so. Es sieht schon gut aus. Wählen Sie dieses, oberste, wir müssen es ein bisschen größer sein, also werden wir 24 Punkte verwenden und in Bezug auf 24 Punkte verwenden, verwenden wir 1,5. Seine Zeilenhöhe sollte 36 Punkte betragen. So werde ich alles berechnen. Ich benutze Zeilenhöhe 1.5, und ich benutze diese Deckgröße, um 21 zu sein , diese ist 24, und diese ist 18, und diese ist 64. Lassen Sie uns sie alle nach links ausrichten. Wählen Sie alle diese durch Klicken bei gedrückter Strg-Taste oder Umschalttaste aus. Klicken Sie auf die letzte und die erste und drücken Sie dann „V“ und richten Sie so links aus. Sie sind alle linksbündig und sehen gut aus. Lassen Sie uns dieses Datum ein bisschen langweiliger machen wie dieses, diese gräuliche Farbe. Sie können jede Farbe verwenden, vielleicht können Sie so etwas hier verwenden B6B6B6 und das ist die Farbe, die ich bekam. Jetzt ist unser Text alles eingerichtet. Sie können sehen, wie ich es auslege, ich verwende 1, 2, 3, 4 Spalten, diesen Begrenzungsbereich für diesen Text, und wir werden diesen Bereich für das Bild verwenden. Zeichnen wir hier die orangefarbene Linie, wählen Sie einfach das Rechteck-Werkzeug aus und wir werden eine orangefarbene Linie von 15 Pixeln hierher ziehen. Es ist jetzt weiß, also werden wir darauf doppelklicken und die orange Farbe auswählen. Das ist f7a94a. Nun, das ist alles bereit. Machen wir es ein bisschen größer von dieser Seite, die nach außen ausgedehnt ist. Lassen Sie uns nun die Rasterlinie ausblenden, Steuerpunkt, und unser Raster ist ausgeblendet. Wählen wir diesen aus. Es sieht schon sehr schön und cool aus, also ziehen wir das Bild hier rüber. Ich werde das gleiche Bild verwenden, so dass ich es nicht immer wieder finden muss. Hier haben wir Fenster, Anordnen, Fliesen Alle Vertikal, und das ist unser ursprüngliches Design. Ich werde das hier benutzen, es hier rüber ziehen und das hier schließen. Jetzt haben wir ein sehr großes Bild, also müssen wir es in einer Box binden. Lassen Sie uns dieses Bild zuerst ausblenden. Erstellen Sie hier ein Rechteck, aktivieren Sie Ihre Führungen, Control Doppelpunkt, und ich werde diesen Bereich für das Bild verwenden. Das ist mein Rechteck. Verschieben Sie einfach das Rechteck unter dieses Bild und wir werden eine Maske erstellen. Ich werde zwischen diesem Bild und diesem Rechteck klicken und hier haben wir unsere Maske. Dieses Rechteck wirkt im Grunde als Maske. Wir können auch die Größe dieses Rechtecks reduzieren, wenn wir wollen. Vielleicht müssen wir beide auf die rechte Seite bringen. Geben Sie einfach 1, 2, 3 Pixel, also 30 Pixel. Ich habe ein bisschen mehr auf der rechten Seite bewegt. Unser Design sieht fast toll und komplett aus. Lassen Sie uns eine Vielfalt hinzufügen und wir werden Italic für den Staat verwenden , und so richten wir unser Design ein. Es ist wirklich cool und sieht schon aus, sehr nett und ich denke, nicht viele Designer können so entwerfen. Das ist sehr einfach. Ich habe alle Techniken verwendet, die wir in den vorangegangenen Lektionen gelernt haben. Wir werden dieses Design am Ende des nächsten Abschnitts verbessern. Bleiben Sie dran und warten Sie auf weitere Übungen. Vorher, kümmern Sie sich einfach und tschüss. Fahren wir mit der nächsten Lektion fort. 12. Hyphen, die auf der Grundlage von dash: Heute lernen wir etwas über Bindestriche und Bindestriche. Es gibt zwei Bindestriche, em und en Bindestriche und Bindestriche. Jetzt werden wir alles über sie lernen. Zuerst werden wir über Bindestrich sprechen. Bindestrich ist der kürzeste und befindet sich auf der Tastatur links neben dem Pluszeichen. Nun wird der Bindestrich auf drei Arten verwendet. Nummer eins, es wird verwendet, wenn ein Wort am Ende einer Textzeile geteilt wird, wie Sie hier im Wort unrealistisch am Ende sehen können. Es wird auch verwendet, um zwei Wörter zusammen zu kombinieren, um zusammengesetzte Wörter zu erstellen , wie Sie hier sehen können, Spaß liebend. Es gibt einen Bindestrich zwischen Spaß und Liebe. Außerdem wird es mit zwei Wörtern Zahlen wie 20-42 verwendet. Dies sind alle Möglichkeiten, wie wir Bindestriche verwenden können. Jetzt werden wir über en dash sprechen. En Bindestrich ist der zweitlängste in der Länge und wird verwendet, um Raum der Zeit oder numerischen Bereich anzuzeigen. Sie können die Beispiele sehen wie 9:00 AM- 17:00 PM, Juli-September, Urlaub ist vom 5-9 Juni. Dies ist, wie wir en dash verwenden. Jetzt, Em Strich. Em Strich ist der längste in der Länge aller drei Striche, und wird verwendet, um eine Pause in Gedanken zu zeigen. Wie Sie hier in den Beispielen die Straße hinunter und entlang kurvenreicher Straße sehen können, war es. Es gibt eine Pause im Denken, und so trennten sie es. Außerdem können Sie im nächsten Beispiel sehen, dass wir unsere Vorräte gesammelt haben. Es gibt eine Pause, alle acht LKW-Ladungen und begann langsam. Dies ist, wie wir em dash verwenden. Jetzt werde ich diesen Vortrag über Bindestrich und Bindestrich zusammenfassen , nur um sicherzustellen, dass Sie sich erinnern. Denken Sie daran, dass em für mega. Em Bindestrich ist der längste und en Bindestrich ist der zweitlängste, und Bindestrich ist der kürzeste. Beachten Sie auch, dass Sie sie dort verwenden müssen, wo sie richtig verwendet und benötigt werden. Benutze sie nirgendwo, wo du willst. Selbst viele Typografen oder sogar auf verschiedenen Webseiten, ich habe viele Leute gesehen, die immer wieder dieselben Fehler machen. Hier geht es um Bindestriche und Bindestriche. Fahren wir mit der nächsten Lektion fort. 13. Quotation richtig verwenden: Heute werden wir über Anführungszeichen sprechen. Viele Leute, die ich gesehen habe, kennen die richtige Verwendung von Anführungszeichen nicht. Jetzt werden wir in dieser Vorlesung sehen, wie man Anführungszeichen richtig wie ein Profi benutzt. Das erste, was Sie wissen müssen, ist, dass alle Schriftarten keine geschweiften Anführungszeichen unterstützen. Im ersten Beispiel können Sie sehen, dass diese Markierungen überhaupt nicht geschweift sind. In der zweiten sind sie rein lockig, und in der dritten sind sie ein bisschen wie geschweifte Anführungszeichen im Schreibmaschinenstil. Stellen Sie sicher, dass Sie eine Schriftart verwenden, die geschweifte Anführungszeichen unterstützt, und geschweifte Anführungszeichen werden grundsätzlich in guten Typografie verwendet. Hier können Sie sehen, dass ich einige Beispiele gezeigt habe. „ Hallo da“, sagte sie. Die geschweiften Anführungszeichen werden hier richtig verwendet. Ich habe viele Designer und Entwickler gesehen , dass sie die richtige Verwendung von Anführungszeichen und die Arten von Anführungszeichen nicht kennen . Es gibt zwei Arten von Anführungszeichen. Eines sind gerade Anführungszeichen, andere sind geschweifte Anführungszeichen. Jetzt werden die geraden Anführungszeichen normalerweise für Füße und Zoll verwendet, und sie werden auch Fuß- und Zollmarkierung oder Sekunde und Minute Markierung genannt. Diese sind im Grunde gerade, und die geschweiften Anführungszeichen werden im Grunde verwendet, wenn Sie zeigen, dass jemand spricht. Das ist der richtige Gebrauch. Sie können im ersten Beispiel sehen, ich verwende geschweifte Anführungszeichen, die am Ende und am Anfang geöffnet und geschlossen werden. Sechs Fuß wird mit nur einem geraden Anführungszeichen angezeigt, und Zoll wird mit zwei Anführungszeichen angezeigt, die gerade sind. Die anderen beiden sind die falschen Verwendungen von Anführungszeichen. Jetzt, auf dem Bildschirm werde ich Ihnen die Tastenkombinationen zum Anzeigen dieser oder Verwenden dieser Anführungszeichen in Photoshop, oder einem anderen Programm, Word-Bearbeitungsprogramm, Öffnen einzelnes Anführungszeichen, Alt plus 0145. Wir müssen das drücken, während Sie die Alt-Taste drücken. Für Mac-Benutzer, Option plus rechte Klammer. Auch das schließende einfache Anführungszeichen, Alt plus 0146, und für Mac, Option plus Shift plus rechte Klammer. Jetzt müssen Sie für die doppelten öffnenden Anführungszeichen Alt plus 0147 in Windows verwenden, und unter Mac müssen Sie Option plus linke Klammer verwenden. doppelte Anführungszeichen zu schließen, müssen Sie Alt plus 0148 verwenden, und auf dem Mac müssen Sie Option plus Shift plus linke Klammer verwenden. Hier geht es darum, Anführungszeichen richtig zu verwenden und wann man welches, gerade oder das geschweifte verwendet. Wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 14. Rollen von Schriftarten: Was sind nun die Rollen verschiedener Schriftarten? Tatsächlich haben Sie innerhalb einer einzigen Familie vielleicht einige Schriftarten mit Namen wie Anzeige, Beschriftung, Unterkopf, Regular, Kursiv, so etwas gesehen . Eigentlich sind diese Anzeige, Beschriftung und Unterkopf im Grunde die Rollen dieser Schriftart oder Schriftart. Was im Grunde Anzeigetyp ist, wird der Anzeigetyp nur für Überschriften oder sehr großen Text gemacht. Texttyp ist für normale Textabsätze oder eine Menge Text, wo Sie es viel lesen müssen. Nun gibt es auch wenige andere Rollen von Schriftarten wie Beschriftung. Wenn wir ein Bild im Internet gesehen haben, können Sie sehen, dass es eine graue Beschriftung unten. Das ist im Grunde manchmal einige Schriftfamilie Beschriftungsschriftart darin, also müssen Sie diese Beschriftung verwenden, weil sie im Grunde für diesen Zweck konzipiert ist. Die Anzeigeschriftarten sind für Überschriften konzipiert, sodass Sie sie nicht für Textschriftarten oder einen sehr großen oder großen Absatz verwenden können. Unterposition: Unterposition. Anzeige bedeutet, dass Sie sie normalerweise für Überschriften verwenden können. Hier geht es um die Rollen von Schriftarten. Verwenden Sie die Rolle immer und definieren Sie sie richtig. Wenn Sie eine Schriftart für den Anzeigetyp verwenden, verwenden Sie diese nicht für den Texttyp. Lassen Sie uns einige der Beispiele sehen. Jetzt können Sie hier sehen, dass ich im Grunde einen Anzeigetyp in einer guten Art und Weise verwendet habe. Auf der rechten Seite sehen Sie, dass ich eine Schriftart verwendet habe, die für Anzeigetypen im Absatz vorgesehen ist. Sie können sehen, dass es alle Kappen ist, und ich denke, Sie können es nicht sehr leicht lesen. Es wurde im Grunde für Anzeigetyp oder im Grunde Überschriften entwickelt. Auf der linken Seite können Sie sehen, dass ich es richtig benutzt habe, und ich benutze es grundsätzlich für Überschriften. Vielleicht kennen Sie die Schriftart Bieber neu und/oder Bieber, im Grunde ist es sehr hohe Schrift, gleiche wie die, die ich gerade benutze. Dies ist im Wesentlichen für Anzeigetypen ausgelegt. Manchmal, wenn Sie eine Schriftart kaufen oder sie online sehen, müssen Sie möglicherweise einen Teil des darunter liegenden Textes lesen. Wenn es sagt, dass es für die Anzeige ist oder es ein Anzeigetyp ist, dann Benutzer für Überschriften. in Ihrem gesamten Design Verwenden Sie esin Ihrem gesamten Designnur für Überschriften, verwenden Sie es nicht für Absatztext. Definieren Sie es Rollen. Diese Schriftart wird meine Überschrift Schriftart oder Anzeigeschrift sein, und sie für die Anzeige verwenden. Dies ist ein weiteres Beispiel für die falsche Verwendung von Schriftarten. Sie können auf der linken Seite sehen, dass ich eine Übergangsschriftart verwende, und es ist Anzeigetyp als Überschrift, und auf der rechten Seite verwende ich es als Absatz, was falsch ist. Verwenden Sie keinen Anzeigetyp einer Schriftart als Absatz. Versuchen Sie, es nur für Überschriften oder vielleicht Unterüberschriften zu verwenden, nicht für den Absatztext. Hier sind ein paar weitere Beispiele für Rollen von Schriftarten. Ich benutze hier PT Sans Google-Schriftart auf der rechten Seite und auf der linken Seite ist es Chapel pro Font. Ich weiß nicht, dass es kostenlos ist oder ich habe es gekauft, irgendwann erinnere ich mich nicht. Auf der rechten Seite können Sie sehen, Googles PT Sans kommen in vielen Geschmacksrichtungen wie Bildunterschrift, regelmäßig und fett oder so etwas. Ich benutze alle drei, um Beschriftungen zu stylen. An der Unterseite und in der Mitte benutze ich regelmäßig und oben benutze ich fett. Auf der linken Seite ist es die gleiche Geschichte. Ich verwende den Anzeigetyp als Überschrift, regulär als Absatz und Beschriftung als Beschriftung unten. Hier geht es um Rollen von Schriftarten. Definieren Sie die Rolle Ihrer Schrift, wenn Sie etwas entwerfen , und verwenden Sie sie in Ihrem Entwurf. Halten Sie es konsistent und Ihr Design wird großartig und genial aussehen. Fahren wir mit der nächsten Lektion fort. 15. Typografische Skalen: Ich habe viele Designer gesehen, die noch nie typografische Hierarchie oder Skala verwendet haben. Das passiert jetzt mit vielen unerfahrenen Designern oder Designern, die aus verschiedenen Tutorials oder so etwas lernen. Die typografische Hierarchie kommt also im Grunde aus der visuellen Hierarchie, wo wir ein Konzept haben, wie wichtige Dinge größere Größen bekommen. Wenn Sie also Überschriften oder Unterüberschriften oder Taglines haben, werden sie größer als der normale Text oder Absatz sein. Sie also daran, dass die Größe sich mit der Wichtigkeit unterscheiden wird. Mal sehen, wie wir eine Skala erstellen werden. Kommen zu dem Schritt, wie eine typografische Hierarchie oder Skala zu erstellen. Also zunächst einmal, was wir tun werden, ist, dass wir eine Basisgröße auswählen. Zum Beispiel betrachten Sie, dass 16 Pixel meine Basisgröße oder Absatzgröße oder die Basis meiner typografischen Hierarchie sein sollten . Dann wählen Sie ein Skalierungsverhältnis oder wie viel Sie es skalieren werden. Wie in jedem Schritt werden Sie es um 1,5 oder 1,25 oder das goldene Verhältnis, das 1.618 genannt wird, skalieren oder das goldene Verhältnis, das 1.618 genannt wird, . Also unten gebe ich Ihnen ein einfaches Beispiel dafür, wie man es berechnet. Zum Beispiel beträgt meine Basisgröße 18 Pixel. Der nächste Skalierungsschritt wird also 18 Pixel multipliziert mit 1,5 sein, was 27 Punkte oder 27 Pixel Schriftgröße sein wird. Denken Sie also daran, dass dies ist, wie wir Skala berechnen werden. Das ist also der erste Schritt. Wenn Sie den zweiten Schritt möchten, multiplizieren Sie 27 mit 1,5, um den nächsten Schritt zu erhalten. Also lassen Sie mich Ihnen ein Beispiel zeigen. Jetzt haben wir hier ein Beispiel der Hierarchie. Auf der rechten Seite zeige ich Ihnen, dass wir ein Skalenverhältnis von 1,44 haben, und Sie können mit diesem Verhältnis sehen, wir haben Überschrift auf 54 Pixel und dann Untertitel 37 Pixel. Überschrift vier ist 26 Pixel und Überschrift vier ist 18 Pixel und kleiner Text ist 13 Pixel. Sie können auf der linken Zeit mit dieser Skala für den Slogan sehen, ich verwende Überschrift drei Größe, die 26 Pixel für die Überschrift 54 war , und für den Textkörper verwende ich 18 Pixel. Das ist also im Grunde das Konzept, wie wir im Grunde jeden Schritt harmonisieren werden. Dies wird so berechnet, dass es gut aussehen wird. Wenn Sie nur Zufallswerte auswählen, passen sie nicht zusammen. 16. Online-Tools für Typografische Skalen: Jetzt werde ich Ihnen einige der Online-Tools zeigen, um diese Hierarchie automatisch zu erstellen oder die Werte zu erhalten. Selbst wenn Sie ein Entwickler oder Designer sind, wird es Ihnen viel helfen. Mal sehen, was diese versteckten Edelsteine sind. Die erste Seite, die ich Ihnen zeigen werde, ist diese modularscale.com. Sie können hier sehen wir, auf der linken Seite, ist Basis und dann das Verhältnis. Sie können das Verhältnis daraus einstellen. Dies ist die wichtigste dritte und diese basieren auf, denke ich, Musik. Ich benutze vielleicht dieses goldene Verhältnis. Sie können diese verwenden oder Sie können Ihre benutzerdefinierte festlegen. Ich kann wie 1,35 setzen, so etwas oder vielleicht 1.4, die gerade Zahl ist. Für die Designer könnten sie verwirrt sein, was diese em-Werte sind. Grundsätzlich handelt es sich um eine relative Messung. So ist 1em gleich im Grunde 16 Pixel. Sie können alle diese Werte mit 16 Pixel multiplizieren, wie 7,53 multiplizieren mit 16, um Ihren Pixelwert zu erhalten. Die andere Methode ist, dass hier drüben 18 Pixel. Sie können zusammen mit diesem em sehen, es zeigt Ihnen mit der Basisgröße von 16, dass der Pixelwert im Grunde dies ist. Jetzt, 18 Pixel, dann 25 Pixel, 35 mit diesem Verhältnis. Wenn ich das Verhältnis ändere, können Sie sehen, dass dies zunehmen wird. Ich werde 54 benutzen. So etwas wie das. Vielleicht 618. Das ist ein goldenes Verhältnis: 18, 29, 47 , 76, 123 und so weiter und so weiter. Der Vorteil dieser Seite ist, dass wir auch in den kleineren Größen gehen können. Nach 18 Pixeln haben wir 11 Pixel. Normalerweise mag ich es, näher an dieser 1,33 oder so etwas zu sein. Es gibt Ihnen eine Menge gute Reichweite wie 18, dann 24, 32, 42, 56, so etwas. Auch in den kleinen Größen ist es nicht sehr klein. Ich habe 14 Pixel hier drüben. Nun, so werden wir diese modulare Waage nutzen. Dann gibt es noch einen, der diese ist. Es ist auch sehr cool und Sie können leicht greifen die CSS. Es wird automatisch generiert. Für Entwickler ist es ein sehr schönes Werkzeug. Es kann leicht die relativen Messungen und alles für Sie generieren. Auch hier beträgt die Basisgröße 16 Pixel gleich 1em. Es zeigt dir. Dann können Sie diese verwenden. Ich glaube, ich mag diesen hier. Dann können Sie auch eine sehr schöne Ansicht sehen, wie es aussehen wird. Hier ist die Überschrift und dann haben wir die Absätze und Überschrift 1, 2, 3, 4, denke ich. Hier haben wir den kleinen Text oder vielleicht Beschriftung. Das ist ein weiteres Werkzeug. Dies ist sehr cooles Werkzeug. Sie können hier sehen wir die Werte in em haben. Wenn Sie in Pixeln möchten, multiplizieren Sie es einfach mit 16 Pixeln. Ich werde es jetzt auf 18 Pixel setzen. Es hat sich wieder mit 18 Pixeln verschoben. Jetzt ist mein Text ein bisschen größer. Das letzte Werkzeug, das auch sehr schön ist und es hat einen anderen Faktor, der diese Linienhöhe ist. Wenn Sie diese Skala verwenden, wie ich 1,33 verwende, gibt es einen weiteren Faktor, der hier gesteuert werden muss, nämlich die Zeilenhöhe. Sie können sehen, es zeigt Ihnen, wie diese Zeilenhöhe aussehen wird. Ich habe es auf 1,45 gesetzt. Lassen Sie uns eine Vorschau anzeigen. Sehr nett. Schließen Sie die Vorschau. Es gibt einige gute Dinge darüber und einige paar Nachteile über diese Website oder dieses Tool. Es kann den Code in Pixelwerten erstellen. Sie können hier die Schriftgröße, die Zeilenhöhe, alles sehen. In der RAM-Einheit, die für Entwickler gedacht ist. Also, wenn Sie ein Designer sind, sich keine Sorgen darüber. Verwenden Sie einfach diesen Pixelwert hier drüben und Sie werden gut gehen. Hier haben wir Körpertexte, das ist Absatz 18 Pixel, dann Überschrift 1 42 Pixel. Wenn Sie ein Entwickler sind, können Sie diesen Code einfach hier kopieren und in Ihrer Entwicklung verwenden. Hier ist der HTML, den sie verwendet haben, hier ist das CSS. Dies sind alle Werkzeuge, die ich euch zeigen wollte, wie man Gitterwaagen oder typographische Skalen in einer guten Art und Weise benutzt und eure Entwürfe verbessert. Ich hoffe, Sie haben in diesem Vortrag gute Lektionen gelernt. Fahren wir mit der nächsten Lektion fort. 17. Wie viele Ebenen der Typografische Hierarchie brauche ich mich?: Wir haben bereits über typografische Hierarchie und was es ist gelernt. Nun müssen wir wissen, wie viele Hierarchieebenen ich brauche? Vielleicht hängt es von Ihrem Projekt ab, aber normalerweise sind 4-6 Levels mehr als genug. Was bedeutet nun 4-6 Levels? Ich werde es Ihnen in den nächsten Minuten zeigen. Nun haben Sie vielleicht gesehen, dass kleine Überschriften wie Rubrik 5 oder Rubrik 6. Wenn Sie ein Entwickler sind, könnten Sie verstehen, was ich jetzt sage. Also, wenn Sie ein Designer sind, machen Sie sich keine Sorgen. Ich werde es dir in ein paar Sekunden zeigen. Kleine Positionen werden selten verwendet, wie z. B. Position 5 oder Position 6. Einige Leute mögen zustimmen oder einige stimmen mir vielleicht nicht überein, aber ich denke, dass sechs Hierarchieebenen mehr als genug sind. Nun müssen wir zunächst Überschriften benötigen, die Überschriften 1, 2, 3, 4. Also vier Ebenen für Rubriken oder vier verschiedene Größen für verschiedene Rubriken, wie die Rubrik 1 und dann die Unterposition und die Unterposition, so etwas. Dann brauchen wir eine Größe für den Körpertext, die 18 Pixel, 20 oder 16 Pixel sein könnte . Dann brauchen wir einen kleinen Text. Manchmal müssen wir einen sehr kleinen Text schreiben, wie Beschriftungen oder sehr gräulichen Text, irgendwo so, wie Sie vielleicht einige Datumsangaben in sehr kleinen Zahlen oder sehr kleiner Größe gesehen haben . Aus meiner Sicht sind sechs Hierarchieebenen mehr als genug, wenn Sie für Mobile und Web entwerfen. Ich rede nicht von Büchern. Bücher oder Zeitschriften benötigen möglicherweise mehr als diese Ebenen. Mal sehen, wie ich fünf Hierarchieebenen verwendet habe, oder Sie können fünf verschiedene Größen des Skalierungsverhältnisses in meine Hierarchie sagen und wie ich es implementiert habe. Du hättest das vielleicht schon mal gesehen. Das ist die gleiche Übung. Sie können auf der rechten Seite sehen, ich verwende fünf verschiedene Größen; 54, 37, 26, 18 und 13. Jetzt auf der linken Seite verwende ich einen Slogan und eine Überschrift und einen Absatztext. So können Sie für die Überschrift 4 und den Textkörper sehen, die Größe ist die gleiche, nur die Überschrift ist ein bisschen fett. Überschrift ist fett formatiert, und der Textkörper ist eine normale Schriftart. Dann verwende ich 26 Pixel, die 3 Größe für meinen Slogan überschreiben. Wenn Sie also entwerfen, sind Sie der Designer oder ein Webdesigner oder mobile App-Designer, sollten Sie dies in Erwägung ziehen. So können Sie die gleichen fünf Ebenen in Ihre Taglines, Überschriften, Textkörper, Listen oder so etwas verwenden. Es geht also um Hierarchieebenen, oder wie viele Ebenen brauchen wir wirklich in unserem Web- oder Mobildesign. Ich hoffe, Sie haben diesen Vortrag genossen. Gehen wir zur nächsten Vorlesung. 18. Vertikaler Rhythmus: Lassen Sie uns nun darüber sprechen, was vertikaler Rhythmus oder Grundlinienraster ist. Einige von Ihnen verwenden vielleicht Baseline, aber ich weiß, dass die meisten Designer, die Photoshop aus den letzten Jahren verwenden, nicht wissen, was ein vertikaler Rhythmus oder Grundlinienraster ist. Grundsätzlich werden wir Harmonie in verschiedene Gestaltungselemente schaffen , indem wir einen gleichmäßigen vertikalen Abstand verwenden. Dies ist im Grunde, um unseren Text zu gestalten. Auch Sie können es auf verschiedene Design-Elemente wie Schaltflächen, Grafiken und einige andere Dinge anwenden . Es schafft im Grunde eine vertikale Harmonie zwischen unseren Designelementen und unserem Typ. Jetzt, wie die Grundlinienrastergröße zu berechnen. Grundsätzlich basiert die Grundlinienrastergröße auf Ihrer Basisschriftgröße multipliziert mit Ihrer Zeilenhöhe. Wenn ich also eine Basisschriftgröße wie 18 Pixel habe und meine Zeilenhöhe 1,5 beträgt, erhalten Sie 27 Pixel-Baseline-Rastergröße. Nun, das ist im Grunde Grundlinienrastergröße. Sie können auch Vielfache Ihrer Basisschriftgröße verwenden, z. B. wenn Sie 27 Pixel-Baseline-Gitter haben, können Sie auch neun Pixel oder vielleicht 18 Pixel verwenden. Manchmal müssen Sie möglicherweise neun oder vielleicht mehrere von 27 verwenden. Dieses Grundlinienraster ist im Grunde die Einheit der Harmonie. Wenn Sie es also verwenden möchten, können Sie es in all Ihren Designelementen verwenden. Wie wenn Sie eine Taste Größe wollen, so können Sie sie wie 27 multiplizieren mit 2, es ist 54, denke ich. Jetzt können Sie die Höhe von 54 Pixeln für Ihre Tasten verwenden. Gleiches gilt für die Breite. Dies ist im Grunde vertikaler Rhythmus, so dass es eher auf die Höhe der Elemente als auf die Breite der Elemente angewendet wird. So wenden Sie es auf Ihr Design, Ihren Typ und alles an. Lassen Sie mich Ihnen das Beispiel des Grundlinienrasters von 26 Pixeln zeigen. Auf der linken Seite benutze ich ein Wort ohne vertikalen Rhythmus. Ich bin nur mit meinem Instinkt. Sie können auf der linken Seite sehen, sie sind nicht vertikal sehr gut ausgerichtet. Auch der Absatz ist ein wenig falsch ausgerichtet. Dann auf der rechten Seite sehen Sie, dass ich das Grundlinienraster verwende und ich richte alles vertikal nach meinem vertikalen Rhythmus und meiner Grundlinie aus. Sie können sehen, dass die Unterüberschrift Roboto Condensed 26 Pixel auf der rechten Seite in der Mitte der beiden Basislinien ausgerichtet ist . Außerdem ist unsere Hauptüberschrift zwischen drei Basiseinheiten ausgerichtet, und unser Absatz befindet sich auch innerhalb jeder Basislinie und in der Mitte davon. Sie können es auch am unteren Rand des Textes ausrichten. Anstatt Absätze in der Mitte dieser Baselines auszurichten, können Sie sie setzen oder Sie können sie auf den unteren Rand Ihrer Force-Baseline setzen. Passen Sie die Kraftbasislinie mit dem Grundlinienraster , und das kann Ihnen auch helfen, alles perfekt auszurichten. In diesem Abschnitt werde ich Ihnen zeigen, wie Sie die Vielfachen von Grundlinienraster, Vorwärtsrändern, Abständen und/oder anderen Designelementen verwenden können . Wie ich Ihnen bereits in der vorherigen Folie gesagt habe, können Sie auf der linken Seite sehen, dass ich die 26 Pixel als Basislinie verwende, also 13 Pixel ist auch eine Einheit dieser Grundlinie ein Vielfaches dieser Grundlinie dann 52.78.104 und 130. Wie ich das bekam, 26 multipliziert mit 2 ist 52, und dann multiplizieren Sie mit 3, 78, multiplizieren Sie mit 4.104. Auf der rechten Seite können Sie sehen, dass ich dieselben Vielfachen verwende, um zwei Abschnitte auszuräumen. Der obere Absatz und Überschrift und neuer Abschnitt am unteren Rand können Sie sehen, ich bin sie mit 104 Pixeln, die auch ein Vielfaches von 26 Pixeln ist. So schaffen Sie im Grunde Harmonie und vertikalen Rhythmus in Ihren Entwürfen. Dies wird Ihr Design wirklich auf die nächste Ebene zu verbessern. Wenn Sie eine sehr gute typografische Fähigkeit zusammen mit diesem Grundlinienraster verwenden, dann können auch nur die Art Ihres Designs, nur der Typ, die Überschrift und die Texte den Benutzer wirklich beeinflussen Verwenden Sie sie also mit Bedacht und lassen Sie uns zur nächsten Lektion übergehen. 19. Vertikaler Rhythmus in Photoshop: Lassen Sie mich Ihnen nun einige der Möglichkeiten zeigen, wie wir diesen vertikalen Rhythmus in Photoshop erstellen können. Ich werde eine neue Datei öffnen und ich werde sie 1400 mal 972 Pixel groß machen. Dieses Dokument wird nicht mit Farbe verwaltet. Hier haben wir die leere Leinwand. Ich werde „Alt Delete“ drücken, um es mit einer Vordergrundfarbe zu füllen. Jetzt werde ich 18 Pixel-Basis-Modular-Skala verwenden. Diese, Ich benutze diese Seite 18 Pixel-Basis und 1,5 ist mein Verhältnis. Grundsätzlich ist meine Grundlinie 27 Pixel. Ich werde Ihnen zeigen, wie Sie diese 27 Pixel-Linien zeichnen , damit Sie sie einfach in Ihren Designs verwenden können. Was ich tun werde, ist, ich werde Ihnen zeigen, wie es in Photoshop zu tun. Zuerst werden wir hier drüben einen Text verwenden. Vielleicht werde ich diese gräuliche Farbe wählen. Ich werde hier drüben einen Absatz benutzen. Die Größe sollte 18 Pixel betragen. Unsere 18 Punkte Website Notiz ist 18 Punkte. Ich werde gehen, um Lorem Ipsum hier drüben zu tippen und einzufügen. Die Zeilenhöhe, die ich verwenden werde, beträgt 1,5. Also werde ich 27 Pixel hier drüben sagen. Denken Sie daran, dass Sie die Zeilenhöhe wie eine Basislinie verwenden. Also 27 Pixel ist im Grunde Ihre Zeilenhöhe für 18-Punkt-Schriftart. Nun, das ist unser Paragraph Text. Entschuldigung, ich sollte eine normale Schriftart anstelle eines Mediums verwenden. Dies ist meine Basisschriftart, Basistyp, und ich werde eine Überschrift verwenden. Mal sehen, was die Größe der Überschrift ist, 41 Pixel. Ich werde jetzt 41 Pixel verwenden. Ich werde mal hier drüben klicken, 41 Punkte hier drüben. Ich werde hier drüben ein kühnes Gesicht benutzen. Ich werde Ihnen zeigen, dass dies unsere Überschrift sein wird. Verwenden wir hier drüben eine Unterüberschrift. Verwenden wir dafür Medium. Es ist eine Unterüberschrift. Die Unterposition ist hier. Dies ist nur ein Dummy-Text, also mach dir keine Sorgen. Ich werde seine Farbe jetzt in ein bisschen gräuliche Farbe ändern, so, nur um etwas Abwechslung zu bekommen. Mal sehen, was die nächste Größe fällt, 27. Ich werde 27 für diesen hier verwenden, so. Im Moment verwende ich kein Gitter, um all diese auszurichten. Also, jetzt werden wir ein Gitter verwenden. Lasst uns anfangen. Wir werden eine neue Datei mit der Breite von 100 Pixeln erstellen und unsere Rastergröße war 27. Stellen Sie also die Höhe des Dokuments auf 27 Pixel ein, drücken Sie OK. Wählen Sie dann in diesem Menü „Formen “ dieses Linienwerkzeug aus. Vergrößern Sie ein wenig, steuern Sie Plus und ziehen Sie ein Pixel. Stellen Sie sicher, dass es sich oben um eine Punktlinie handelt. Also verwende ich diese eine Punktlinie und ziehe sie unten. Wir können auch etwas dunklere schwarze Farbe verwenden. Kontrollieren Sie nun A marschierendes S, wählen Sie alles aus. Wir werden definierten Schirmherr verwenden. Hier nennen wir es 27 Pixel-Baseline-Gitter. Drücken Sie OK. Wechseln Sie zu diesem Dokument. Wählen Sie diese Ebene, und ich werde drücken und gehen Sie zu Ebenenstilen. Dann werden wir dieses Muster-Overlay verwenden. Wir werden dieses letzte verwenden, das unser Grundmuster war. Nun, das ist unser Grundmuster. Sie können sehen, dass unser Text nicht ausgerichtet ist. Es gibt zwei Möglichkeiten, wie wir es so ausrichten können, setzen Sie sich am unteren Rand der Grundlinie. So mache ich es normal, so. Die Unterposition sollte hier drüben sein, so. So werden wir alles ausrichten. Wenn Sie wollen, können Sie gehen, zum Beispiel, wenn ich möchte, dass die Unterposition näher an dieser Stelle ist, wie viel ich hier hinüberziehen kann, wissen Sie? Erinnern Sie sich? Ich kann neun Pixel darunter bewegen. Also jetzt werde ich 1, 2, 3, 4, 5, 6, 7, 8, 9. Es ist immer noch im Verhältnis, weil neun auch das Vielfache von 27 und 18. So wird unser Text auf einer Grundlinie und unter Verwendung eines Grundlinienrasters aussehen . Eine weitere Sache ist normalerweise, einige Designer verwenden es auch so im Web, verwenden es in der Mitte so und richten es auch so aus. Unterposition sollte hier drüben sein, so. Das ist also eine andere Arrangement. Ich richte alles in der Mitte aus. Dies ist eine weitere Anordnung, die von vielen Web-Entwicklern empfohlen wird. Also im Moment werden wir dieses benutzen, folgen Sie diesem. Es sieht professioneller für mich aus. Nun, wenn wir versuchen, diese Musterüberlagerung zu verbergen, können Sie sehen, dass unser Text perfekt angelegt ist. Hier ist die nächste Herausforderung für euch. Erstellen Sie so etwas. Verwenden Sie eine modulare Waage. Du erstellst eine typografische Hierarchie und verwendest diese und richtest sie mit dem vertikalen Rhythmus aus und zeigst sie mir. Fahren wir mit der nächsten Lektion fort. 20. Design für vertikales Rhythmus: In dieser Lektion werden wir die letzte Lektion, die wir in Abschnitt eins gemacht haben, verbessern. Dies ist die Lektion, die wir in Abschnitt eins gemacht haben. Nun, was wir tun werden, ist, dass wir die erworbenen Fähigkeiten anwenden, typografische Fähigkeiten, die wir darauf anwenden werden. Dann werden wir Grundlinienraster auf dieses Design und die Zeilenhöhe und alles anwenden. Lasst uns anfangen. Dies ist unser Blog-Artikel aus der vorherigen Lektion, also speichern wir ihn als eine andere Datei. Vielleicht behoben oder so etwas. Nun zuerst werden wir diese Website verwenden, die gridlover.net ist und unsere Basisschriftgröße ist 20 Pixel, Zeilenhöhe, ich werde 1.6 verwenden, Skalierungsfaktor ist 1.3. Skalierungsfaktoren bedeutet im Grunde, wie groß der Unterschied von einer Überschrift zur anderen ist. Unser Unterschied zur Skalierung der Schriftgröße. Das ist das Verhältnis. Ich benutze ein sehr niedriges Verhältnis. Mischen Sie diese Linienhöhe nicht mit dem Skalierungsfaktor. Der Skalierungsfaktor ist unterschiedlich, die Linienhöhe ist unterschiedlich. Also 20 multipliziert mit 1,6 ist 32, so dass unsere Zeilenhöhe 32. Lassen Sie uns zuerst die Zeilenhöhe auf diese Seite oder diesen Entwurf anwenden. Was ich tun werde, ist, dass ich diesen Hintergrund duplizieren werde. Zuerst werden wir das Muster schnell anwenden. In den vorherigen Lektionen habe ich Ihnen gesagt, wie Sie dieses Muster erstellen, also möchte ich es nicht noch einmal wiederholen. Ich habe bereits ein Muster für diese 32 Pixel erstellt. Ich werde es auf dieses Dokument anwenden. Sie können sehen, dass dieses Dokument oben und unten nicht gut passt. Was wir tun werden, ist, dass wir die Bildgröße bearbeiten. Mal sehen, teilen Sie 800 durch 32 und es ist 25, so ist es fast perfekt. Lasst uns anfangen. Lassen Sie uns den Hintergrund etwas nach oben verschieben. Zoomen Sie es, 1, 2 , 3, 4, 5, 6, 7, 8. Das sieht perfekt aus. Jetzt passt es unser Pattern-Overlay von 32 Pixeln. Wenn Sie sich nicht erinnern, wie Sie dies erstellen, sehen Sie den Abschnitt eins, ich habe dies für Sie erstellt. Jetzt werden wir zuerst die Einstellungen und Größen für unseren Text und alles verschieben . Das ist unser Text. Zuerst werden wir 20 Pixel verwenden, da 20 Pixel unsere Grundliniengröße ist. Gehen wir zu 20 Pixel und die Zeilenhöhe betrug 1,6, also ist es gleich 32 Punkte. Lassen Sie uns das auf 32 Punkte verschieben. Lassen Sie uns unseren Text entsprechend den Grundlinien hier drüben verschieben, Raster hier drüben. So sieht es aus. Lassen Sie uns den Donnerstag bewegen. Donnerstag Größe ist 18. Jetzt haben wir das Problem. Wir brauchen eine andere Skala, die auch unseren kleinen Text zeigt. Wir werden modulare Skala und 20 Pixel und 1.3 verwenden. Dies ist bereits ich gespeichert habe, also geben Sie 20 Pixel, 1,3 Verhältnis. Ich werde die Größe kleiner als diese 20 Pixel sehen, es ist 15. Wenn Sie möchten, können Sie hier 15 Punkte verwenden, und verschieben Sie es über und unter dieser Überschrift. Warum benutze ich das hier? Weil diese Rasterebene mir nicht die Größe für den kleinen Text anzeigt. Wenn Sie zu diesem Code gehen, können Sie hier keinen kleinen Text sehen. Überschrift fünf ist 20 Pixel und keine Größe liegt unter 20 Pixel. Wir brauchen eine Größe, die unter 20 Pixel liegt, also verschiebe ich sie auf diese modulare Skala. Nun, wenn Sie sehen, unsere Schriftgrößen ist 20, 26, 34 und 44. Dasselbe ist hier drüben. Sie können sehen, Überschrift 1 ist 44 Pixel. Sie können hier sehen Schriftgröße 44 Pixel, dann haben wir 34, dann haben wir 26, und 20. Skala ist die gleiche, nur wir haben nicht die kleine Größenberechnung hier drüben. Unser nächster Schritt wird sein, diese Überschrift perfekt zu dimensionieren. Wir werden vielleicht 57 oder 44. Sie können entscheiden, was Sie verwenden möchten. Ich werde mit diesem 44 Pixel gehen. Jetzt wähle ich diese Überschrift aus und setze sie auf 44 Pixel. So sieht es gerade aus. Lassen Sie uns noch ein paar Text hinzufügen, damit es auf zwei Zeilen passt. Wir wollen keinen zweiten ein oder zwei Buchstaben am Ende hinterlassen. Es ist keine sehr gute Typografiepraxis. Größe ist 44. Jetzt werde ich auch die Zeilenhöhe auf 44 setzen, weil ich nur eine gleich der Zeilenhöhe, eine für Überschriften möchte. Wenn Sie sich an meine letzte Übungslektion oder Lektion erinnern, können Sie sich daran erinnern, dass die Zeilenhöhe für Überschriften fast 100 Prozent oder 110 Prozent beträgt, sodass sie näher bei 100 Prozent liegt. Sie können sehen, dass ich diese drei Zeilen hier drüben benutze, um diese Überschrift auszugleichen. Sie können sehen, dass ich diese drei Zeilen benutze, also lassen Sie es ein bisschen mehr nach unten ausrichten. Lassen Sie uns die Größe dieses gleich 20 Pixel haben, so dass es leicht lesbar ist. Wir sind nicht auf der Suche nach viel Abwechslung. Wir brauchen den Benutzer, um es zu lesen und alles ist jetzt eingestellt. Ich schätze, wir werden nur die Größe dieses hier ändern. Höhe ist 15, also machen wir es gleich acht, was auch mit unserer Grundliniengröße zusammenhängt und wir platzieren es einfach in der Mitte des C wie folgt. Noch eine Sache. In der vorherigen Lektion haben wir diese Rasterlinie angewendet. Stellen Sie daher sicher, dass Ihre Elemente an dieser Rasterlinie ausgerichtet sind. Wenn Sie sich nicht erinnern, wie Sie diese Rasterlinie erstellen, wechseln Sie zu Ansicht, Neues Hilfslinienlayout, und verwenden Sie dann acht Spalten, 30 Pixel-Dachrinne und alles andere. Lassen Sie es einfach Ränder. Wenn Sie keine Marge wollen, lassen Sie sie einfach so und drücken Sie OK. Sie werden etwas Ähnliches wie mich erzeugen. Acht Spalten, 30 Pixel Rinne, und bis jetzt denke ich, dass Sie vielleicht nicht wissen, was Rinne ist, weil es in der nächsten Lektion sein wird. Also mach dir keine Sorgen darüber. Behalte einfach die Einstellungen so. Ich habe mein Raster mit diesen Steuerspalten aktiviert , um zu sehen, wo meine Sachen aufgereiht sind. Diese orangefarbene Bar ist genau aufgereiht. Alles andere sieht toll aus. Dies ist unser erster Meilenstein. Lassen Sie uns die Musterüberlagerung ausblenden und sehen, wie unser Dokument aussieht. Es sieht wirklich schön aus. Der Abstand zwischen den Elementen ist großartig, alles sieht gut aus. Wir haben typographische Skala und Grundlinie angewendet, um unsere Entwürfe zu verbessern. Jetzt der zweite Schritt. Der zweite Schritt ist, dass, wenn Sie genau zwischen diesen beiden Absätzen und den unteren Absätzen sehen , ich denke, es ist ein bisschen größer Raum zwischen all diesen Absätzen. Warum machen Sie sie nicht näher? Wir werden in diesem Text zu Control J gehen. Das ist unser alter Text, also werde ich diese Ebene duplizieren. Was wir tun werden, ist, dass wir ein Leerzeichen entfernen oder hierher zurückkehren werden. Ich habe die Eingabetaste gedrückt oder zurückgekehrt. Jetzt sind sie aufgereiht. Wählen Sie nun die erste Zeile und sehen Sie, was die Zeilenhöhe ist es 32. Wir brauchen etwas zwischen 48 oder 64. Der nächste Schritt ist 64, aber wir werden unsere Basislinie auf die Hälfte teilen, also beträgt die Hälfte der Basislinie 16 Punkte. Ich füge 32 plus 16 hinzu, also sind es 48. Ich werde dies auf 48 anstatt 64 verschieben, was die vorherige Einstellung war. Auch dieses ein bis 48. Ich werde Ihnen den Unterschied zeigen, wenn es fertig ist. Lassen Sie mich die Musterüberlagerung für unser Grundlinienraster aktivieren. Das ist unser Grundriss. Sie können hier sehen, dass unsere Baseline wie in der Musik aus dem Takt kommt, aber sobald es zum nächsten Punkt geht, ist es wieder innerhalb des Musters. Es ist wieder auf unser Grundnetz ausgerichtet. Warum? Weil unsere Basisskala, die 48 Punkte beträgt, im Grunde ist, was ist das? Es ist im Grunde das 1,5-fache unserer Basisgröße, also 32. Sagen wir Ihnen das Geheimnis hier, 32 multipliziert mit 1,5, 48. Wann immer Sie versuchen, schlagen gehen Sie einfach so etwas, multiplizieren Sie es mit 1,5 oder 1,25, 32 multiplizieren Sie mit 1,25, so etwas. 1,25 und 40, es könnte auch gut gehen, aber ich denke, 1.5 ist gut genug. So haben wir unser Grundlinienraster verwendet und dies ist der vorherige Text. Dieser ist vorangegangen und dieser ist ein bisschen nach oben verschoben. Hier können Sie ein bisschen weniger Lücke zwischen den Absätzen sehen und es sieht sehr schön aus. Dies sind die Geheimnisse der Linienhöhe und Maßstäbe, typographische Maßstäbe, Grundlinienraster. Auch wenn Sie die Wörter in dieser Zeile zählen, denke ich, dass sie näher an etwas wie vielleicht 70 Zeichen sind. Ich denke, es ist näher an 70 oder 80 vielleicht. Ich denke, optimale Strichlänge. Ich will deine Zeit nicht damit verschwenden, hier drüben zu zählen. So haben wir unsere Linienhöhe mit zwei verschiedenen Methoden angewendet. Man verwendet eine perfekte Zeilenhöhe, die 32 Pixel oder 32 Punkte beträgt. Dann gingen wir ein wenig unschlagbar mit der Multiplikation unserer Zeilenhöhe auf 1,5, indem wir zwei Absätze näher zueinander verschoben haben. Das sind zwei Techniken, die wir getan haben. Ich hoffe, Sie haben diese Übung gefallen, laden Sie ihre Dateien aus den Ressourcen und sehen Sie bald mit mehr bei solchen Übungen. Das ist eine weitere Herausforderung für Sie. Versuchen Sie, das zu replizieren, was ich hier getan habe. Mal sehen, was Sie sich einfallen können und hoffen, Ihre Entwürfe sehr bald zu sehen. Fahren wir mit der nächsten Lektion fort. 21. Einführung in das modulare Raster: In dieser Lektion werden wir über modulares Gitter lernen, und wir werden sehen, wie es verwendet wird, was die verschiedenen Teile davon sind und wie Module, Ränder, Streuungen und Rasterlinien verwendet werden, um fantastisch aussehende Designs zu erstellen. Unser erster Schritt ist, dass wir bereits über Baselines wissen. Dies ist unsere 30 Pixel-Baseline. Was ich getan habe, ist, dass ich dieses Dokument mit der Größe erstellt habe, die mehrere von 30 Pixeln ist. Höhe ist 810, daher ist die Höhe im Grunde mehrere meiner 30 Pixel-Baseline. Sie können im Ebenenfenster sehen, Ich habe eine Ebene erstellt, die 30 Pixel-Baseline genannt wird. So, wie ich Ihnen in früheren Lektionen gezeigt habe, ein Muster mit 30 Pixel-Baseline erstellt und ich habe es auf eine Ebene angewendet. Von hier aus können Sie sehen, dass wir diese Baseline-Sachen bereits kannten, dies ist der erste Schritt. Der zweite Schritt ist, dass wir dieses Design in horizontale und vertikale Teile aufteilen werden. Hier kommt also die Dachrinnen. Wie ich diese Dachrinnen erstellt habe, können Sie hier sehen, das ist im Grunde mein Gitter. Wenn ich meine Rasterlinien gesteuerte Spalte in Photoshop einschalten. Gitter sind im Grunde Leerzeichen zwischen verschiedenen Spalten. Sie können hier sehen, der weiße Teil ist die Säule und der graue ist die Rinne. Also Rinne ist im Grunde innere Ränder zwischen verschiedenen Spalten, das ist nur, um verschiedene Gegenstände zueinander zu platzieren, so dass sie nicht berühren Ohren oder Nase, usw. sich nicht berühren Ohren oder Nase, usw. Also, wenn ich etwas entwerfe und ich etwas hier über So, die nächste Sache ist, dass ich eine andere hier drüben so platzieren werde. Dies ist im Grunde die Marge zwischen ihnen. Es schafft wirklich eine Eleganz in Ihrem Design, wenn Sie diesem folgen. Wenn Sie ein Webentwickler sind, wussten Sie bereits über 12 Spalten oder 60 Spalten Rasterlinien. Darauf basieren sie auch. Sogar Bootstrap verwendet 30 Pixel Rinne. Diese Rinne in Bootstrap ist also gleich 30 Pixel. Wie ich diese Dachrinnen in Photoshop erstellt habe, ging ich gerade zu diesem neuen Leitfaden Layout und ich habe 30 Pixel Rinne und acht Spalten. Im Moment habe ich dieses Layout in acht Spalten unterteilt. Du kannst 12, 16 benutzen, was immer du willst. Auch der dritte Teil, den ich in meinem Design verwende, was sehr wichtig ist, ist, dass Sie etwas Spielraum um Ihr Design verlassen. Also lassen Sie mich zuerst den Rand klären, Ihnen die Marge zeigen. Also ist dieser gelbe Teil im Grunde mein Rand. Also, wenn Sie es hier in Rasterlinie sehen, können Sie sehen, ich habe 90 Pixel oberen Rand, links 30, 90 unten und rechts bei 30. Hier ist das Geheimnis: Warum ich 30 Pixel und 90 Pixel Ränder verlasse, ist das Geheimnis unsere Grundlinie. Unsere Grundlinie beträgt 30 Pixel, also habe ich alles um diese Zahl herum gesetzt; 30 Pixel, dann 90 Pixel, Vielfaches unserer Grundlinie. So habe ich alles eingerichtet. Wir haben unser Grundlinienraster eingerichtet, das ist es, und dann haben wir Rinnen, dann haben wir Margen und dann den nächsten Schritt. nächste Schritt ist, dass wir den Raum in diesem Bereich haben, wir haben es in horizontale Spalten und vertikale Spalten unterteilt, acht Spalten, aber jetzt werden wir eine andere Sache schaffen, die Module genannt wird. Wir werden dies in separate verschiedene Boxen oder Module unterteilen. Sie können hier sehen, dass dies ein Modul ist, dieses ein Modul ist, und dieses ist ein anderes, oder wir können auch Module wie dieses verwenden; wie wir 1, 2, 3, 4, so etwas haben , aber die Höhe, die wir verwenden werden, wird gleich diesem Modul sein. Also eigentlich, was wir getan haben, ist, dass wir das gesamte Design in verschiedene Teile teilen , die mathematisch berechnet werden so dass es Harmonie und Eleganz in die Augen Ihres Benutzers bringt. Also, wenn ich zum Beispiel diese beiden für mein Bild verwende, dann werde ich zum Beispiel ersten vier Module wie das oder vielleicht diesen Teil für meinen Text verwenden. Für einen weniger bestandenen Lorem Ipsum hier drüben so, lasst uns die Größe ändern, vielleicht 72 ist gut. Ändern wir diese Zeilenhöhe auf 72 und erhöhen Sie die Größe auf 100, vielleicht so. Zeilenhöhe sollte 90 sein, und lasst uns hier so 10 verwenden. Dennoch denke ich, dass wir ein Problem mit der Zeilenhöhe haben. Dieser sieht gut aus, erstellen Sie einfach ein einfaches Layout wie dieses. Also das war unser Bild, lassen Sie uns das hier verstecken. Wo ist das Bild? Okay, das hier. Lassen Sie uns diese Ebenen sperren, die unsere Grundlinie und alles sind, lassen Sie uns sie einsperren. Gutter, ich werde es sperren, Ränder, ich werde das hier sperren, damit wir sie nicht versehentlich auswählen. Dieser war ein bisschen abscheulich, also werde ich es in diese Farbe umwandeln und wir werden seine Grenze entfernen. Wo sind die Immobilien? Hier haben wir die Formeigenschaften, wir brauchen keine Grenzen. Wir haben ein einfaches Layout erstellt. Lassen Sie uns einfach diese Ränder und alles verstecken, damit Sie sehen können , wie wir es mit dem Wort Design machen. Lassen Sie uns das und alles verstecken. So können Sie sehen, wie wir Margen verwenden und alles, um unsere Sachen und alles auszulegen. Lassen Sie uns hier eine andere Textebene erstellen. Nun, ich werde den ganzen Bereich oder vielleicht diesen ganzen Bereich nutzen, um hier drüben Text zu erstellen. Lassen Sie uns Raum Lorem Ipsum, und dieses Mal werden wir sehr kleine Größe verwenden, wie vielleicht 24 Pixel. Lassen Sie uns die Höhe von 30 Pixeln wie folgt verwenden, wir werden Null oder vielleicht weniger als Null, minus 10 so verwenden, und wir sind fast da mit unseren Rändern wie diesem. Lassen Sie uns die Farbe in etwas Schwarz oder etwas grau-ähnliches ändern, lassen Sie uns unsere Ränder, Rinne und alles andere verstecken, um zu sehen, was es aussieht. So sieht unser Design gerade jetzt aus. Es gibt noch eine Sache, die wir tun können, wir können die Ränder hier ein bisschen mehr nutzen , damit es nicht so aussieht, als würde es auf der rechten Seite berühren. Vielleicht können wir also seine Größe auf 30 Pixel reduzieren. Mit 30 Pixeln, lassen Sie uns hier ein bisschen mehr Spielraum schaffen. Auf der rechten Seite habe ich hier eine Schachtel mit 30 Pixeln erstellt. Das sind also 30 Pixel, dann werde ich es mit meiner Alt-Taste duplizieren. Das sind wieder 30 Pixel, so haben wir jetzt 90 Pixel Rand hier drüben. Also lassen Sie uns diesen Absatz wieder auf diesen 90 Pixel-Rand wie folgt skalieren, und lassen Sie uns diese Ränder und alles andere ausblenden. Sie können sehen, wie wir das Layout so erstellt haben, Sie haben diese Art von Layouts in Zeitschriften gesehen. Selbst wenn wir es ein bisschen mutiger machen können, so etwas, vielleicht ein bisschen weniger Abstand zwischen Buchstaben, weniger Abstand zwischen 72 wie diesem. Sie könnten diese Art von Layouts in Zeitschriften gesehen haben so dass Sie wissen, dass die Zeitschriften-Designer, sie sind sehr gut bei der Erstellung dieser Layouts oder diese modularen Gitter. Denken Sie daran, wie Sie dieses Raster verwenden. Das sind die Grundlagen. Wir haben Dachrinnen, die sich zwischen unseren verschiedenen Säulen befinden. Sie können sehen, dass meine Inhalte nicht in irgendeiner Gosse sind. Ich breite sie wie hier, lassen Sie uns es auf der linken Seite unserer Rinne so berühren, und Sie können sehen, selbst mein Inhalt berührt keine Marge, es ist weg vom Rand. Es gibt zwei Dinge, die Sie beim Entwerfen beachten sollten. Eine ist, dass modulares Gitter verwenden, und in der nächsten Übung werden wir viele verschiedene Themen erstellen , wie Sie hier sehen können, dieses, dieses und dieses mit unserem modularen Raster. Jetzt haben Sie alles über modulare Gitter gelernt, also fahren wir mit der nächsten Lektion fort. 22. Raster für die Layout vorbereiten: In dieser Reihe von Übungen werden wir etwas Ähnliches entwerfen. Lassen Sie mich hier drüben zu Details verstecken, damit Sie sehen können, wie es sein wird. Dies ist ein Beispiel. Ich tausche viele verschiedene Layouts und Designs für den gleichen Inhalt. Das ist unser Inhalt. Das ist eine Arrangement, das ist die zweite. Sie können sehen, wie sich dies auf unser Design auswirkt. Das ist der dritte. Wir werden Module, Ränder, Basislinie, alles in dieser Übung, sogar vertikalen Rhythmus verwenden . Das ist der letzte. Es gibt eine Menge Dinge, die Sie zuerst einrichten müssen. In dieser Übung werde ich Ihnen sagen, wie Sie diese Baseline, diese Streugröße, diese Ränder und wie Sie diese Module erstellen. Das ist unser Dokument. Lassen Sie uns zuerst sehen, welche anderen Ressourcen wir für dieses Dokument verwenden werden. Der erste Schritt, den wir machen werden, ist, dass wir unsere Google-Schriften auswählen. Die beiden Schriftarten, die ich hier auswählen möchte, sind Lato und Source Sans Pro. Wenn Sie sich an meine letzten Übungen erinnern, wissen Sie bereits, dass eine Schriftart für Überschriften sein wird und eine für Textkörper sein wird. Ich verwende Source Sans Pro für Überschriften und Lato für meinen Text. Dies sind zwei Schriftarten. Wenn Sie sie herunterladen möchten, können Sie sie von hier herunterladen, dieses Symbol hier drüben und installieren Sie sie auf Ihrem PC oder Mac und verwenden Sie sie. Dann werden wir Gridlover oder Modular Scale verwenden, je nachdem, was Sie verwenden möchten. Wir werden einen Skalierungsfaktor 1.3, Zeilenhöhe 1,5 und Basisschriftgröße ist 20 Pixel verwenden . Die Höhe der durchgezogenen Linien entspricht 20 multipliziert mit 1,5, 30 Pixel. Dreißig Pixel, Zeilenhöhe, Schriftgröße werden 20 Pixel sein, Skalierungsfaktor beträgt 1,3, so dass unsere Überschrift 1 44 Pixel beträgt. Sie können hier sehen, Schriftgröße 44 Pixel. Wenn Sie zur modularen Skala wechseln, können Sie die Werte leichter abrufen, da sie nur Verhältnisse und Basisgröße aufweist. Wir haben 44 hier drüben. Sie können diese 57 auch verwenden, wenn Sie möchten, aber 44, 34, 20, dann 15. Dies ist unsere Waage, wenn Sie hier Tabelle verwenden möchten, können Sie zu dieser Tabelle wechseln, um alle Größen anzuzeigen. Wir haben unsere Skala, typografische Skala, unsere Schriften und ihre Rollen ausgewählt typografische Skala, unsere Schriften , welche Schriftart welche Rolle spielen wird. Dies sind die Schritte, die wir behandelt haben. Dann werden wir die Daten von dieser Website, den Inhalt von dieser Website, ReaLipsum verwenden. Für Bilder können Sie Bilder von diesem picjumbo.com oder Pixabay oder einer anderen guten Website herunterladen . Ich mag diese Website wirklich. Wenn Sie zu Kategorien gehen, können Sie zu Menschen, Natur, Liebe wechseln, was auch immer oder welche Kategorie Sie bevorzugen, Sie können zu Architektur gehen. Es sind sehr schöne Bilder, Sie hier sehen können. Sie können eine von ihnen auswählen, gehen Sie zur nächsten Seite. Für Bilder, verwenden Sie diese picjumbo.com, Kategorie, Personen oder eine beliebige Kategorie, die Sie mögen, RealIPsum für Text. Wir haben unsere Schriftarten und Schriftzeilen sowie unsere modulare Skala und unsere Rastergröße ausgewählt, die Baseline-Grade ist, die 30 Pixel beträgt, und die Basisschriftgröße 20 Pixel. Nun, unser erster Schritt wird sein, dass wir so etwas erschaffen werden. Lassen Sie uns anfangen und öffnen Sie eine neue Datei. Was wir tun werden, ist, dass wir die Breite auf 1400 setzen und die Höhe wird 810 Pixel betragen. Warum? Weil 810 durch unsere Baseline, die 30 Pixel ist, leicht teilbar ist. Wenn Sie versuchen, 810 geteilt durch 30 zu teilen, wird es ein ganzer Wert sein, der 27 ist. Achthundertzehn und drücken Sie OK. Das ist unsere Dokumentengröße. Jetzt lass uns hier drüben ein Raster aufstellen. Zuerst, was wir tun werden, ist, dass wir neue Leitfaden Layout erstellen. Wir werden nicht 12 Spalten verwenden, wir werden acht Spalten verwenden. Wenn Sie Zeilen erstellen möchten, liegt es an Ihnen. Sie können Zeilen erstellen oder acht Zeilen erstellen. Ich denke, hier haben wir acht Reihen, 1, 2, 3, 4, 5, 6, 7, 8. Dies ist im Grunde die Erstellung unserer Module. Jetzt werde ich es verstecken. Rinnengröße wird 30 Pixel betragen. Jede Spalte hat ein Leerzeichen dazwischen, das 30 Pixel beträgt. Das ist unsere Gosse. Jetzt für Ränder ist der obere Rand 90, was unserer drei Grundlinienhöhe entspricht. Das wird 30 sein, unten wird wieder 90 sein, und rechts wird 30 sein. Es gibt keine harten und schnellen Regeln, wenn Sie mehr Marge setzen wollen, wie 120 oder vielleicht rechts und links Sie 45 oder 60 sein wollen, liegt es an Ihnen. Stellen Sie sicher, dass es mit Ihrer Baseline-Höhe, die 30 Pixel beträgt, synchronisiert ist. Jetzt habe ich mein Gitter erstellt. Drücken Sie OK. Das ist mein Gitter und Rinnen und Ränder oben und unten und rechts und links hier drüben. Dies ist nur ein Anfang meines Dokuments. Was wir nun tun werden, ist, dass wir einige Module erstellen werden. Wie wir einige Module erstellen werden. Aber der erste Schritt ist, wir brauchen ein Basisraster. Lassen Sie uns ein Grundlinienraster erstellen, das 30 Pixel sein wird. So Gewicht 100 Pixel, Höhe 30 Pixel. Lassen Sie uns 1.200 Prozent vergrößern und verwenden Sie dieses Linienwerkzeug, drücken Sie „Shift“ und erstellen Sie hier eine Linie, ändern Sie die Farbe in etwas Grau. Eine Pixellinie, stellen Sie sicher, dass es sich um eine Pixellinie handelt. Sehen Sie oben hier, wo die Höhe ein Pixel ist. Stellen Sie sicher, dass die Höhe ein Pixel beträgt , da es ein Problem erzeugt, wenn Sie eine Linie mit zwei Pixeln haben. Steuern Sie A und definieren Sie Muster 30 Pixel Basislinie. Was wir tun werden, ist, dass wir einen neuen Layer für unser Baseline-Raster erstellen. Steuern Sie A oder Alt + Löschen, um diese Ebene mit grauer Farbe zu füllen. Wir werden Pattern Overlay diese Ebene, die unsere 30 Pixel so sein wird. Unser Gitter ist ein bisschen abseits. Wir werden es anpassen. Keine Sorge, stellen Sie sicher, dass dies auf 100 Prozent An Ursprung ausrichten skaliert ist, und ich denke, es ist bereits behoben. Drücken Sie OK, und Control D. Dies ist unser Grundlinienraster, es ist eingerichtet. Jetzt werden wir einige Module in diesem Dokument erstellen. Was wir tun werden, ist, dass wir 1, 2, 3 schaffen werden, was 90 Pixel hoch sein wird. Machen Sie es 90 Pixel. Dies wird ein bisschen andere Farbe wie diese sein, oder vielleicht diese. Dies ist unser einziges Modul oder im Grunde eine Reihe. Grundsätzlich, Zeilen und Spalten, sie mischen sich zusammen, um diesen modularen Gitterstil zu schaffen. Ich werde das gruppieren und G. kontrollieren. Wir werden sie im Grunde so miteinander ausrichten. Ich werde es schnell tun. Überspringen Sie diesen Schritt, damit Sie verstehen, was wir hier tun. Hier haben wir alle Module. Wir können jetzt so etwas verwenden. Wir können drei wie diese verwenden, drei Module hier drüben auf vielleicht vier Spalten und drei Reihen hier drüben. Das ist, wie wir nutzen werden. Grundsätzlich haben wir hier drüben einige rechtliche Blöcke geschaffen. Lasst uns sie ganz zusammenfassen. Kontrollieren Sie G und machen Sie seine Deckkraft 50 Prozent. Wir können unsere Rasterlinie sehen, unsere Module sind Reihen. Das ist unser Gitter. Unser Dokument ist fertig. Sie wissen bereits, dass der obere Teil oder die linke und die rechte, es ist im Grunde der Rand. Wir haben 30 Pixel-Baseline-Gitter mit Modulen erstellt, verschiedene Teile sind Zeilen und Spalten. Dies ist im Grunde modulares Gitter und wir werden es verwenden , um drei verschiedene Layout in der nächsten Lektion zu erstellen. So habe ich mein Design vorbereitet und Sie sollten diese Schritte auch befolgen, wenn Sie Ihre Websites oder Typografie in mobilen Apps entwerfen und auslegen. Fahren wir mit der nächsten Lektion fort, in der wir drei verschiedene Layouts aus diesen Modulen erstellen werden. Fahren wir mit der nächsten Lektion fort. 23. Gestalte das erste Blog-Layout: Jetzt, zuerst, werden wir dieses Layout erstellen, so oben werden wir unsere Überschrift setzen, links, unser Datum dieses Artikels, und auf der rechten Seite, 147 Likes. Auf der linken Seite werden wir Lato verwenden, eine schräge kursive Version, kursiv Stil von Lato, um ein Zitat oder Zitat Text hier drüben zu haben, zitiert Text. Das heißt, wir werden 1, 2, 3, 4 Blöcke, vier Spalten verwenden , um den ersten einleitenden Absatz zu gestalten, und für den nächsten Text werden wir diese drei Blöcke verwenden. Drei und Blöcke, oder drei Zeilen und Spalten für dieses, dieses Modul für dieses Bild. Im Grunde versuchen wir zu tun, ist, dass wir dieses Layout ausbalancieren. Lassen Sie uns etwas von der Balance hier besprechen. Wie Sie diese blaue Farbe sehen können, bekommt die Farbe normalerweise mehr Aufmerksamkeit und es ist schwerer. So balancieren wir mit diesem Bild und dieser Farbe hier drüben aus. Dieser leere Raum balanciert im Grunde mit diesem ganzen Text hier drüben. In der Mitte haben wir Text, auf der linken Seite haben wir wieder Farbe, um das Design Gesamtgewicht auszugleichen. Es ist genau so, als ob Sie Dinge in Ihren beiden Händen ausbalancieren oder wiegen oder vielleicht wie Sie auf der Wippe balancieren. Hier haben wir schwerere kleine Objekte, und hier haben wir weniger schwerere große Objekte, wie eine Tüte Luftballons oder so etwas. Hier haben wir zwei Steine. So versuche ich, mein Design auszugleichen. Dies ist ein sehr, man kann sagen, grundlegender Tipp, von dem viele Designer vielleicht nicht wissen. So balancieren wir unser Layout, das ist die grundlegende Technik zwischen diesem Design. Lasst uns anfangen. Zuerst werden wir die Skala verwenden, wenn Sie sich erinnern, die Überschriftengröße betrug 44 Pixel und die Textgröße betrug 20 Pixel. Im Moment werde ich diese beiden Größen verwenden. Ich ignoriere alle anderen. Lassen Sie uns unsere Module langweiliger oder mehr in den Hintergrund bringen, damit wir sehen können, wie wir verschiedene Dinge auslegen werden. Zuerst werde ich diese drei Zeilen verwenden, um meine Überschriften zu erstellen, vielleicht diesen ganzen Block, und ich werde wieder Real Ipsum verwenden. Mal sehen, wo es ist. Hier ist das Real Ipsum. Kopieren wir das alles und fügen Sie es hier drüben so ein. Die Textgröße verwende ich 44 Punkte und Source Sans Pro fett. Wenn Sie mit Schwarz gehen wollen, können Sie auch schwarz gehen, so. Nur um den Raum zu füllen, mach dir keine Sorgen darüber, welchen Text ich verwende. Ich werde seine Zeilenhöhe auf 44 setzen, so. Wenn wir über 44 gehen wollen, können wir so 50 gehen. Stellen Sie einfach sicher, dass es zwischen diesen drei Zeilen so ist. Auch es ist berührend, Sie können diese Spalte hier sehen. Das ist die Rinne, wir sind nicht in der Rinne, wir sind in diesen 1, 2, 3, 4 Spalten. So verwende ich das, wenn Sie das erweitern möchten, können Sie vielleicht fünf so verwenden. Nicht viel erweitert, weil es eine Überschrift ist, also brauchen wir weniger Platz zwischen den Buchstaben. Jetzt werden wir hier etwas Text verwenden, vielleicht können wir diese Zeile verlassen, diese Zeile hier drüben, und unseren Text beginnen und diese vielleicht vier Spalten in diesem Modul verwenden, und wir werden es über so etwas einfügen. Dies ist unser Startabsatz oder Intro Absatz. Ich werde hier 20 Pixel verwenden. Wir können ein bisschen mehr Zeilenhöhe verwenden, vielleicht die 45, so etwas, und wir werden regelmäßig verwenden, und das wird Lato sein, nicht Source Sans Pro. Lato nicht Haaransatz, aber wir werden regelmäßig verwenden. Jetzt können Sie sehen, dass ich diesen Textblock oben in diesem Modul setzen kann, oder vielleicht unten, es liegt an Ihnen. Wenn wir es jetzt so einrichten, könnte es so sein, oder vielleicht ganz unten. Ich denke, ich werde es an die Spitze stellen. Lassen Sie uns einen anderen Textblock wie diesen erstellen, den gleichen, Control J. Ich werde diesen kopieren, und wir werden darauf doppelklicken und die Breite und Höhe dieser drei Spalten anpassen, und wir werden verwenden Sie dies oder vielleicht können Sie darüber hinausgehen, weil es sich um eine kontinuierliche Webseite handelt. Ich werde 30 Pixel Zeilenhöhe verwenden, und wir werden diese beiden Absätze verwenden. Kopieren Sie das zuerst, fügen Sie es hier ein . Ich denke, es ist ein sehr langer Absatz. Vielleicht müssen wir es etwas nach unten verschieben, oder vielleicht auf der Linie so. Es spielt keine Rolle, während Sie entwerfen, wenn Sie Ihre Texte auf der Baseline setzen möchten, können Sie es passieren, aber wenn Sie codieren, denke ich, dass es nicht leicht möglich ist, also können wir vielleicht es so, und auch diesen werde ich es so verwenden. Lassen Sie uns es verstecken, es sieht nicht sehr gut aus, vielleicht werden wir einige verschiedene Einstellungen verwenden. Das ist Lato 20 und vielleicht können wir hier auch die gleiche Zeilenhöhe verwenden, oder vielleicht ändern Sie die Farbe in eine dunklere Farbe wie diese. Machen Sie diesen einleitenden Absatz schön aussehen. Wenn Sie mit zwei Zeilen trennen möchten, ist es in Ordnung, aber ich denke, dass zwei Zeilen zwischen dieser Einleitung und diesem Absatz zu viel sind. Lassen Sie es uns jetzt, lassen Sie uns das Bild und andere Texte hier drüben. Wir werden hier einen Text schreiben. Zuerst werden wir hier rüber bringen. Lassen Sie es uns von hier kopieren. Freitag, 30. September 2010, ich werde es hier drüben einfügen, und wir werden die Farbe zu dieser grauen Farbe ändern, vielleicht ein bisschen dunklere graue Farbe wie diese. Der nächste Schritt war, denke ich 15. Wenn Sie die Größe auf 15 festlegen möchten, können Sie die Größe auf 15. Im Moment versuche ich, diese beiden Spalten zu verwenden und diesen Text hier zu zentrieren. Jetzt hat dieses Datum alle gesetzt, also werden wir diese 147 Likes hier verwenden, also 147 eingeben und Likes. Lassen Sie uns es nahe beieinander machen, und ich werde Mittellinie dafür verwenden, weil es ein sehr kleines Stück Text ist, kann es leicht mit Zentrum ausrichten gelesen werden. Reduzieren Sie es auf Auto, und ich werde 34 Pixel hier verwenden. Die Schriftart wird Source Sans Pro sein. Wenn du zu diesem „Licht“ gehen willst, kannst du zu diesem Licht gehen und einfach dieses auswählen, benutze die Farbe, vielleicht dieses. Ich werde es in dieser Spalte zentrieren, so. Wenn Sie mit Bold gehen wollen, ich denke, wir können Bold oder vielleicht Semi fett verwenden. „ Semi bold“ sieht gut aus. Wir haben unsere 147 Likes, unser Datum und unsere Überschrift und unseren Text festgelegt . Lassen Sie uns etwas mehr Text hier schreiben, weil es sehr seltsam aussieht. Vielleicht können wir eine Zeile von hier „kopieren“ und „Einfügen“ hier drüben so. Entfernen Sie einen Teil des Textes, damit er so gut aussieht. Lassen Sie uns eine stumpfe Farbe für diese verwenden, weil es alle gleich aussieht. Ich verwende Farbe für diese Variation. Vielleicht „50 Prozent“ und ich werde in Richtung der grauen Farbe gehen. „ Dunkelgrau“ so. Es sieht jetzt toll aus. Wir können hier ein Bild hinzufügen und auf der linken Seite werden wir ein Zitat hinzufügen. Es wird die erste Designiteration beenden. Lassen Sie das Bild bekommen. Ich habe eine Menge von Bildern. Lassen Sie uns einen von ihnen von hier aus verwenden, anstatt Zeit herunterzuladen und zu verschwenden. Vielleicht benutze diesen Jungen hier drüben mit einem Football. Ich werde es hier rüber ziehen und „Größe“ es so. Ich werde diese drei Module hier benutzen. Ich habe es hier drüben so geklebt. Wenn Sie möchten, dass dieses Bild genau in diesem Modul ist, dann werden wir es hier in dieser Box clippen. Erstellen Sie eine Box Begrenzungsrahmen und wir werden „Clip“ dieses Bild, drücken Sie „Alt“ und „Clip“ es. So werden wir dieses Bild so zuschneiden. Lassen Sie uns „verstecken“ unsere Module und alles, um zu sehen, wie das aussehen wird. So sieht es gerade aus. Sieht toll aus, Räume sind großartig und alles sieht gut aus. Lassen Sie uns hier ein Zitat hinzufügen. Ich werde mein Raster wieder benutzen und es so von hier „ziehen“. Ich werde diese drei Zeilen für dieses Zitat verwenden, und ich werde hier etwas Text verwenden, könnte so sein. Das ist das Zitat. „ Kopieren“ und „Einfügen“ es hier drüben. Es ist sehr klein. Vielleicht brauchen wir noch etwas mehr Text. Machen Sie so etwas. Es ist ein langes Zitat, ich ändere den Text, um dieses Design auszugleichen, also mach dir jetzt keine Sorgen darüber. Lets „Entfernen“ die Anführungszeichen, weil wir sie nicht brauchen. Vielleicht müssen wir es etwas drücken, weil ich hier einen blauen Balken benutzen werde. Lasst uns diese drei Reihen dafür benutzen und ich werde hier so einen blauen Balken benutzen. Zehn Pixel. Ich werde „Ändern“ die Farbe zu diesem Feuerzeug blau. Die meisten dieser Farben sind flach, also mach dir keine Sorgen, wenn du nicht verstehst, welche Farben ich verwende. Sie können sehen, dass ich sehr wenige Farben verwende. Meistens Grau- und Schwarz- und Blues. Sonst nichts. So werde ich dieses Zitat auslegen. Wenn Sie sich erinnern, haben wir Kursivüberschrift. Vielleicht können wir Schlagzeile Kursiv oder vielleicht Light Italic verwenden. Ich denke, „Light Italic“ sieht gut aus. Es ist ein bisschen schwierig zu lesen, also ist „Regular Italic“ vielleicht gut. Vielleicht können wir die Farbe in dieses Blau oder dieses Weiß ändern, oder vielleicht in diese graue Farbe. Ich „Double Module“ und diese Linien und Sie können sehen, wie das aussieht. Sobald Sie Ihre Design-Elemente eingestellt haben, versuchen Sie, alles andere zu verstecken, um zu sehen, wie es aussieht oder welches Ergebnis es bekommt, so dass Sie die „Farbe“ von hier ändern können. Ich habe es gerade in diese „gräuliche“ Farbe verschoben. Ich finde, das ist großartig. Vielleicht benutze das gleiche „Gray“ hier drüben wie dieses. Jetzt können Sie sehen, wie wir Module und Grundlinienraster verwenden, um unser Design zu gestalten. Wir werden mehr Layouts aus demselben Design erstellen indem wir unsere Module neu anordnen oder unsere Designelemente neu anordnen. Dies ist das erste Element. Sie können hier sehen, wie ich all diese Module benutzt habe, wenn ich das Gitter so aufbringe. Dies ist das Ende der ersten Übung und Sie können sehen, wie gut es aussieht. Wenn Sie einige Dinge wie das Verschieben dieses Bild ein wenig unten ändern möchten , weil unser Text nicht mit diesem Bild aufgereiht ist. Dies sind nur wenige Einstellungen. Du kannst mit diesem Ende gehen. Wählen Sie dieses Bild und dieses Rechteck aus und verschieben Sie es ein wenig nach unten wie folgt und reduzieren Sie Ihre Rechteck-Größe ein wenig, so dass dieses Bild fast parallel zu Ihrem Absatz aussieht. Blenden Sie diese Zeilen und alle Module aus. Das ist fast perfekt. Dies ist das erste Layout. Lassen Sie uns in der nächsten Lektion einige weitere Layouts erstellen. Bleiben Sie dran und ich werde eine Menge dieser Übungen machen. Keine Sorge, Sie werden viele tolle Dinge von hier bekommen. Entfernen Sie einfach dieses Zitat. Es irritiert mich so. Bleiben Sie dran und fahren wir mit der nächsten Lektion fort. 24. Zweite Layout für Blog entwerfen: Jetzt in dieser Lektion werden wir dieses Layout mit nur dieser grauen und roten Farbe als unsere Highlight-Farbe erstellen und auch, ich denke, wir werden das Bild und dieses Zitat Orte miteinander ersetzen. Lasst uns anfangen und sehen, was wir uns einfallen lassen werden. Das ist der letzte Teil, in dem wir abgereist sind. Was wir tun werden, ist zuerst, wir werden eine andere Gruppe zu schaffen. Das ist unser Design zweitens, also war das erste Design. Was wir jetzt tun werden, ist, dass wir hier ein paar Dinge ändern werden. Erstens ist, dass ich nicht alle Großbuchstaben verwenden werde, aber ich werde verwenden, Sonntag, gefällt Ihnen das, und wählen Sie dieses th, und gehen Sie zu diesem Textfeld und verwenden Sie dieses tiefgestellte oder hochgestellte, was auch immer es heißt . Auch werden wir die Größe auf 20 Pixel so ändern. Auch wir werden hier kursiv verwenden. Dies wird eine Menge Verschiebung in Korrektor sein, und einige Dinge. Jetzt werden wir diesen nicht hervorheben. Wir werden eine gräuliche Farbe für diese 147 verwenden und, mag, die gleiche Farbe wie diese verwenden. Ich schätze, es ist dasselbe, nein. Was wir tun werden, ist, dass wir 44 Pixel für dieses Top verwenden, fett verwenden. Was wir versuchen zu tun, ist, dass wir versuchen, die Breite dieses und mit der zweiten übereinzustimmen . Sie können diesen Tracking-Wert verwenden. Wir können 30, 50, 150 einstellen. Ich denke, 150 ein bisschen mehr. So 100 sieht gut aus, 147 Likes. Wenn Sie die Breite von Likes ändern möchten, können Sie hier wie folgt Null verwenden. Das ist alles geregelt. Vielleicht können wir die Zeilenhöhe reduzieren. Das ist die 30 und wir können sie auf 45 verschieben. Ich denke, es sieht nicht sehr gut aus, vielleicht können wir stattdessen 30 verwenden. Ändern Sie auch diese Farbe zu dieser Farbe. Sie sehen jedoch gleich aus. Jetzt ist der nächste Schritt, wir werden dieses Bild durch ein anderes Bild einer lächelnden Frau oder eines Mädchens ersetzen. Ich werde dieses Bild auswählen und wir werden das Bild und den Container hier so verschieben. Lassen Sie uns unser Gitter einschalten. Im Moment ignoriere ich meine Ränder und ich werde die Größe dieses auf all diese drei Module hier oder Zeilen einstellen , denke ich, vier Zeilen. Mal sehen, wie viele diese sind; eins, zwei, drei, vier, fünf, sechs, sechs, sechs, ich setze die Größe und alles hier drüben ein. Verschieben wir es etwas nach unten, gleich diesem Text hier drüben. Das hier ist unser Zitat, also lasst uns das alles hierher bringen. Nun für das Zitat, werden wir diesen Bereich verwenden, diese beiden Spalten und diese drei Zeilen. So arrangiere ich alles hier drüben. Lassen Sie uns dieses Bild kopieren. Das hier, ziehen Sie es hierher und kopieren Sie es so. Wir werden es hier rüber ziehen, entfernen Sie diese und wählen Sie diese aus. Es ist hier, bewegen Sie es nach links. Irgendwann können Sie das Bild nicht sehen, wenn Sie es einfügen da es sich außerhalb des Containers befindet, Sie darin abgeschnitten haben. Ich werde „Shift and Alt“ drücken, um dieses Bild so zu ändern. Lassen Sie uns das Gitter verstecken, es ist fast perfekt, aber hier haben wir etwas anderes benutzt. Also lasst uns den Stil ändern. Verwenden Sie hier einige Anführungszeichen. Dies ist, wie wir einige Anführungszeichen mit kursiv verwenden, und lassen Sie uns eine größere Größe verwenden, die die Größe 74 Pixel war. Also werde ich 74 Pixel verwenden. Fügen Sie die Anführungszeichen so hinzu. Lass es uns drehen. Ich habe „Shift“ gedrückt, um es in einem bestimmten Winkel zu drehen. Lassen Sie es uns so hier rüber stellen. Lass es uns ein bisschen näher beieinander machen, so. Ist hier noch etwas übrig? Vielleicht können wir diesen Text kursiv ändern. Nur eine Stiländerung, vielleicht. Wir können es auch ein bisschen erweitern, 15, sieht gut aus. Gibt es noch etwas, das wir ändern müssen? Lassen Sie uns ein paar weitere Details hinzufügen. Es gab eine Zeile nach diesem Text hier drüben. Lassen Sie uns eine Linie erstellen, schlanke Linie, Linienwerkzeug. Ich werde diesen Bereich hervorheben, das ist unsere Linie. Es sollte vielleicht diese Farbe sein. Lassen Sie uns es auf der linken Seite bewegen und es zwei Pixel in der Höhe machen, so dass. Auch werden wir eine andere Farbe verwenden, markieren Sie diesen Text. Wir werden diese Farbe verwenden, um diesen Bereich hervorzuheben, nur um ihn auszugleichen. Auch werden wir eine stumpfe Farbe für diesen Bereich verwenden. Vielleicht diese 7a7d80. Außerdem werde ich hier zwei separate Absätze verwenden , weil es sehr seltsam aussieht. Lassen Sie uns zwei Absätze erstellen, indem Sie hier etwas Platz geben, so habe ich „1" hier eingeben gedrückt und wir haben jetzt zwei Absätze. Auch wenn Sie genauer sein möchten, können Sie so etwas verwenden, aber ich denke, das ist auch gut. Wir können hier noch mehr machen und 20 hier drüben so benutzen. auch in diesem Text Verwenden Sieauch in diesem Text15 oder vielleicht 20 so. Entfernen Sie eine Linie, damit wir eine gute Balance aus unserem Design haben. Vielleicht können wir hier etwas Farbe verwenden, um unseren Link so darzustellen. Es sieht gut aus und ich denke, das fasst unsere zweite Iteration auf diesem Design zusammen. Auch ich schätze, es gibt hier eine Linie. Ich glaube, wir haben hier drüben vergessen. Lasst uns so einen Block der Zeile hier drüben setzen. Lasst es uns so benutzen, in unserem Gitter. Das sieht gut aus und ich denke, das fasst das zweite Design zusammen. Dies ist die Iteration, die ich mir ausgedacht habe. Ich denke, das ist es, und wir sollten mit der nächsten Lektion fortfahren. 25. Das zweite Layoutdesign verfeinern: Lassen Sie mich Ihnen zeigen, dass ich am Ende nur wenige Anpassungen an diesem Design vorgenommen habe, weil ich mich diesem Bereich hier nicht gut gefühlt habe. Also, was ich getan habe, ist, dass ich das ein wenig nach unten verschoben habe und diese Zeile auf dieser Grundlinie verschoben habe. So, dass diese Linie, legte sie auf unsere Grundlinie. Außerdem können Sie hier sehen, ich habe diese Anführungszeichen zwischen diesen beiden Baselines verwendet, und auch ich habe es ein bisschen in dieser Rinne verschoben. Wenn du es mehr bewegen willst, kannst du es auch hier drüben bewegen, so. Ich denke, wir müssen diesen Text hier ändern. Wir werden Source Sans Pro Regular dafür verwenden, und wir werden im Grunde kursiv verwenden. Dies sind einige Einstellungen oder Änderungen, die ich an diesem Design getan habe , weil ich mich nicht sehr gut mit diesem Bereich fühlte. Auch, wenn Sie zurück zu regulären wechseln möchten, können Sie zurück zu regulären wechseln, und vielleicht können wir mehr Platz zwischen verschiedenen Buchstaben verwenden und etwas Ähnliches haben. Auch wenn du willst, kannst du seine Farbe ändern und sie etwas dunkler machen, wie wir es in unserer ersten Übung getan haben. Lassen Sie uns sehen und verstecken unsere Module und alles. Sehen Sie, wie es aussehen wird. Es sieht jetzt ausgeglichener aus, weil ich diesen Teil verschoben habe, dieses Anführungszeichen ein wenig darunter, weil wir eine gute Menge an Platz zwischen diesen beiden Absätzen und diesem Teil benötigen. Es ist fast perfekt. Ich denke, diese Linie bekommt zu viel Aufmerksamkeit, also wenn Sie wollen, können Sie seine Farbe ändern, um vielleicht dieses Rot oder etwas Grau, denke ich, das sieht auch gut aus. Vielleicht diese, und ändern Sie die Anführungszeichen Farbe rot, nur um Aufmerksamkeit zu erregen. Ich denke, das sieht besser aus, und es ist gut und besser als das Design vorher. Außerdem denke ich, es sieht sehr langweilig aus, also werde ich ein bisschen dunkelgraue Farbe verwenden, um dieses Datum zu zeigen. Nun, warum ich eine etwas dunklere Farbe verwendet habe, weil Lesbarkeit ist unsere erste Priorität. Verwenden Sie also ein bisschen dunklere graue Farbe. So habe ich das letzte Design angepasst und ein paar Dinge verschoben und verändert. Stellen Sie immer sicher, dass Design eine progressive Sache ist. Wenn Sie etwas einmal entwerfen, müssen Sie es öffnen und immer wieder verfeinern, bis Sie die perfekte Balance und perfekte Farben und den perfekten Sinn finden . Hier geht es darum, wie ich den zweiten Teil verfeinert habe. Gehen wir zum dritten Teil über. 26. Das letzte Layout für das Blogdesign: Nun, in dieser dritten Lektion, werden wir diese und auch diese erstellen. Diese unterscheiden sich nicht vom zweiten Teil, Sie können sehen, dass dies ein bisschen anders ist, diese Top-Lesezeichen-Stil. Außerdem habe ich nur zwei Blöcke für dieses Bild verwendet, nicht das ganze Gebiet hier drüben, alles andere ist fast gleich. Ich änderte die Farben hier von rot zu blau und dann werden wir auch dieses Layout erstellen. Hier haben wir verschiedene Dinge hier drüben, ich werde sie erklären, als hätten wir diese gelbliche Farbe und diese violette Farbe hier drüben. Lassen Sie uns beginnen und diese beiden Layouts in diesem Entwurfsteil C erstellen . Dies ist, wo wir gegangen sind, also werden wir alles gleich halten. Hier, wir haben das Bild, und ich werde ein anderes Bild greifen, könnte dieses sein. Ich glaube, wir hatten das hier rüber und wir werden es hier drüben so benutzen. Außerdem können Sie diesen ganzen Bereich wie diesen für das Bild verwenden, dies ist auch ein anderes Layout. Im Moment werde ich dieses Bild benutzen und es in den Block schneiden. Nun, was wir tun werden, ist, dass wir unsere Module hervorheben werden. Hier haben wir unsere Module und ich werde es in diesem Bereich benutzen und ausbauen, und wir werden den ganzen Bereich hier drüben verlassen. Nur um sicherzustellen, dass wir dieses Mädchen so groß machen, dass wir ihre Haare und einige andere Dinge wie ihre Kleidung sehen können , vielleicht so. Es sieht jetzt besser aus. Wir können ein paar andere Dinge verstecken, ich denke, das sieht seltsam für mich aus. Vielleicht werde ich eine blaue Farbe von ihrem Hemd verwenden, diese lila blaue Farbe und machen es ein bisschen gesättigter wie diese. Für die Links, und ich werde das gleiche Grau verwenden. Was ist die Farbe dieses Textes? Es ist 7a7d80. Jetzt haben wir unsere Farben hier drüben gesetzt, wir können auch Farben von ihrem Hemd probieren. Vielleicht wieder, verwenden Sie diese Farbe, 147 mag, vielleicht können wir diese Farbe hier verwenden, vielleicht ihre Haarfarbe oder diese lila Farbe. Ich denke, es ist sehr dunkel, also vielleicht sehr scharf, also lass es so. Wir werden unsere Module verstecken. So habe ich gerade dieses Design geändert. Vielleicht müssen wir das auch ändern. Ich kann hier eine sehr dunkle Farbe verwenden um die Aufmerksamkeit auf diese scharfe Farbe hier zu lenken, um die Aufmerksamkeit auf den Titel zu lenken. Ich werde mein Stiftwerkzeug verwenden, um hier einen Ankerpunkt hinzuzufügen. „ Drücken Sie A“ und verschieben Sie diesen Ankerpunkt. Was ist los? Sie können das Auswahlwerkzeug dehnen. Das ist seltsam. Ich denke, ich sollte A und dann Stiftwerkzeug verwenden, um hier einen Ankerpunkt hinzuzufügen. So wie das hier. Lassen Sie uns hineinzoomen und klicken Sie darauf mit diesem Konvertierungspunkt-Werkzeug einmal, um es scharfe Kante zu machen, nicht die abgerundete. Das ist unsere Hauptform, also habe ich diese Form und alles andere verändert. Es sieht gut aus. Vielleicht muss ich Lato hier drüben benutzen. Lato Bold. Mal sehen, wie es aussieht. Es sieht gut aus. So habe ich hier alles verändert. Das ist ein anderes Design. Lassen Sie uns kopieren und speichern Sie es als Design 3.1. Jetzt gehen wir weiter und wir werden Design 3.2 erstellen. Speichern wir es zuerst mit dem anderen Namen, 3.2. Nun, was wir hier getan haben, ist, dass wir diesen Bereich erweitern werden. Lassen Sie uns dieses Mädchen hier löschen. Erweitern Sie dieses Rechteck so auf die volle Größe. Okay, also holen Sie etwas Farbe hier drüben, vielleicht diese, jede Farbe, die Sie mögen. Es muss ein bisschen schärfere Farbe sein. Wo ist unser Date? Date, hier ist es, bringen Sie es an die Spitze dieser Schicht, ändern Sie die Farbe zu weiß und wir haben fast die ganze Arbeit hier getan. Fügen wir hier drüben etwas hinzu? Nein. Also lasst es uns entfernen. Es schafft nur mehr Nuance. Wir wollen mehr offenes und leeres Gefühl. Dies ist unser Datum und lassen Sie uns unser Raster hervorheben. Lassen Sie uns ein weiteres Rechteck hier mit diesem Bereich erstellen und es unter diese 147 Likes verschieben, lassen Sie uns die Farbe zu diesem ändern, oder vielleicht zu diesem, und ändern Sie seine Farbe von diesem zu vielleicht diesem schwarzen oder Vielleicht weiß. Lassen Sie uns das verstecken und Sie können sehen, dass unser Design fast perfekt ist, also lasst uns die Farben dazu ändern. Unsere neue Farbe, Highlight-Farbe. Vielleicht können wir diese graue Farbe verwenden. Das sieht gut aus und wenn Sie hier lila verwenden möchten, können Sie lila, blau, lila oder lila oder dieses lila verwenden . Das sieht toll aus, lila und diese cremige Farbe, sie sehen toll aus. Wenn Sie wirklich wollen, können Sie diese Überschrift verwenden und sie hierher verschieben. Es wird auch eine weitere Layout-Überschrift hier in diesem Bereich erstellen, und Datumsangaben und Likes hier drüben und vielleicht den Text oben verschieben. Es gibt viele Variationen, die Sie mit diesen Designs tun können. Wir haben dieses Gitter und Modul-Setups. Wir müssen nur die rechtlichen Teile ändern und das Design in Einklang bringen. Sie können sie mit dem fett gedruckten Text und vielleicht Farben verwenden. So verwenden wir Farben und fett Text und Layout und modulares Gitter, um verschiedene Layouts zu erstellen. Das fasst meine letzte Übung zusammen, ich werde sie speichern, sie ist bereits gerettet. Ich habe dir eine Herausforderung gegeben, die ein Layout wie dieses schafft. Das ist der letzte. Verwenden Sie einige Bilder von diesem picjumbo.com, verwenden Sie einen Text von Real Ipsum, Google Fonts, wählen Sie zwei beliebige Google Fonts Sie mögen. Verwenden Sie einen modularen Maßstab, verwenden Sie Ihren eigenen Skalierungsfaktor, aber halten Sie ihn konsistent in Ihren Designs und erstellen Sie etwas Großartiges und zeigen Sie es mir. Sie können es in den Fragenantworten posten. Geben Sie mir den Link und ich werde mit Ihnen meine Ideen teilen wie man es verbessert oder wie man es ändert oder so etwas. Ich sehe, dass es so etwas gibt, also macht es nichts aus. Ich werde mehr Übungen erstellen. Aber das fasst diese modulare Konstruktionsübung zusammen. Das ist der letzte. Ich denke, dass Sie viele gute Fähigkeiten haben, um Elemente zu verkleinern und wie Sie diese Topographie effektiv mit dieser Basislinie Höhe und vertikaler Harmonie und wie Sie Zeilen und Spalten und modulare Gitter verwenden können. Fahren wir mit der nächsten Lektion fort. 27. Wie viele Schriftarten du auswählen kannst?: Wenn es um die Auswahl von Schriftarten geht, die schwierigste Frage, ist die schwierigste Frage, die erste, wie viele Schriftarten auszuwählen? Ich habe viele unerfahrene Designer und Entwickler gesehen, sie machen viele Fehler. Sogar ich habe einige Websites gesehen und Anpassungen vorgenommen, wo die Programmierer vielleicht fünf oder sechs verschiedene Google Fonts ausgewählt haben, und wenn es um das Laden geht, kann es wirklich beeinflussen oder verlangsamen Ihre Website. Denken Sie also immer daran, dass Sie nicht zu viele Schriftarten auswählen sollten. Sie sollten nur mit maximal zwei oder drei gehen, wenn Sie wirklich wissen, wie man sie kombiniert. Ich bestehe immer noch darauf, nur zwei Schriftarten auszuwählen. Sie sind fast genug für Ihre gesamte Website. Stellen Sie außerdem sicher, dass Sie nicht zu viele Stile aus einzelnen Schriftarten auswählen. Auch hier wird es sich auf Ihre Ladezeit und Seitengröße auswirken. Nun, überprüfen Sie die Schriftgröße, wie viel Ladegröße in Kilobyte, Ich werde Ihnen nur in wenigen Augenblicken auf Google Fonts zeigen. Nun, der zweite Schritt ist, nachdem Sie die Schriftarten ausgewählt haben, haben Sie eine oder zwei Schriftarten ausgewählt und ihnen Rollen zugewiesen. Wir haben bereits über Rollen gesprochen. Wählen Sie eine Schriftart für Überschriften, Unterüberschriften und/oder Taglines und alles und eine Schriftart für Textkörper, da Textschriftart viel gelesen werden wird und sie leicht lesbar und sichtbar sein sollte. Stellen Sie also sicher, dass Ihre Textschriftart lesbar ist und die Lesbarkeitsstufe gut ist. Hier ist ein Beispiel für die Auswahl von Schriftarten für die Anzeige und den Körper. Sie können hier sehen, ich wähle eine Schriftart für die Anzeige. Nun, auf der linken Seite, können Sie sehen, dass ich eine sehr hohe Schriftart verwendet habe, eine Großbuchstaben Schriftart, wie Bebas Neue Font und Sie können sehen , dass Text oder Textkörper lesbar und sehr einfach Sensory Font ist. Jetzt gibt es noch einen Trick dazu. Wenn Sie Schriftart für Ihre Überschrift oder Anzeigetext auswählen, werden wir es einfacher als Überschrift nennen, also halten Sie einfach in der Überschrift. Also eins für den Weg, einer für den Körper. Wenn Sie nun versuchen, Schriftart für Ihre Überschrift auszuwählen, können Sie ein bisschen kreativ sein, da Überschriften etwas größer als der Textkörper sein werden. Selbst wenn es sich um eine sehr schräg Schriftart oder eine sehr hohe Schriftart oder so etwas handelt, können sie aufgrund ihrer Größe leicht gelesen werden, aber über die Körperschriftart muss es lesbar sein, sein x- Höhe sollte gut sein, und es kann leicht in großer Menge gelesen werden, zum Beispiel, ein großer Absatz, versuchen Sie zu sehen, ob es geht, um leicht zu lesen oder nicht. Dies sind also ein paar Überlegungen, die Sie im Hinterkopf behalten müssen. Lassen Sie mich Ihnen Google Fonts zeigen und wie wir unsere Ladegeschwindigkeit interpretieren werden. Denken Sie also daran, dass, wenn Sie zum Beispiel auswählen, wenn ich diese Schriftart wie diese, eine ausgewählte Familie und die nächste, wählen wir diese Source Sans Pro mit dieser. Also werde ich Source Sans Pro und über eins auswählen. Zwei Familien wurden ausgewählt, so dass Sie sehen können, dass ihre Ladezeit hier oben schnell ist. Nun, wenn ich versuche, es anzupassen und ich versuche, einige ein mehr auszuwählen, wo es ist wie, Ich will fett, Sie können sehen, die Ladezeit ist moderat. Auch wenn ich zu dieser säkularen Schrift gehe, hat es nur ein Gesicht, also hat es nur einen Stil, regelmäßig 400 ist, was sein Gewicht ist. Vielleicht können wir zu dieser regelmäßigen Kursivschrift kommen, denke ich so. Ladezeit ist moderat. Jetzt können Sie es von hier herunterladen und auf Ihrem PC oder Mac installieren , um sie in Ihren Designs zu verwenden. Sie können diese Sky-Schriftarten verwenden. Ich habe es vorher noch nicht benutzt. Wenn Sie es ausprobieren möchten, können Sie es versuchen. Dies ist eine Sache, die Sie beachten müssen, während Sie Ihre Schriftart auswählen. Wenn Sie zu viele Schriftarten auswählen, wenn ich dazu mehr als drei oder vier, fünf, sechs Stile gehe, können Sie sehen, dass es langsam sein wird, also stellen Sie sicher, dass Ihre Ladezeit schnell oder moderat ist. Gehen Sie nicht mehr als drei Stile. Ich denke, zwei Stile, wie reguläre und regelmäßige Kursivschrift, sind gut für unseren Körpertext und dieser ist gut für unsere Überschriften. Hier geht es also darum, wie man Schriftarten auswählt. Fahren wir mit der nächsten Lektion fort. 28. Stimmung/Stimmen der Schriftarten: In diesem Vortrag werden wir Ihr Bauchgefühl über die Schriftarten und Topographie trainieren, was die Schrift sagt, was Ihr Darm hört, und Ihr Gefühl über diese Schrift, wir werden diese Skala erhöhen und ich werde Ihnen sagen Sie, wie man sich daran gewöhnt. Jede Schrift hat also unterschiedliche Stimmen oder Stimmungen. Wenn Sie für einige vielleicht Hafen oder Bio-Produkt entwerfen, werden Sie bestimmte Schriftart wählen , die die Stimmung dieser Marke oder so etwas leitet. Also zuerst müssen Sie die Stimmung finden, ob die Stimmung dieser Schriftart mit Ihrem Projekt zusammenhängt, ist es gut für Ihre Geschäftsseite oder Ihr Modemagazin oder es ist elegant? Ist es lustig? Ist es gut zum Lesen? Dies sind also verschiedene Situationen, in denen Sie sehen müssen , welche Stimmung verschiedene Schriften haben. Nun, ich werde Ihnen verschiedene Stimmungen zeigen, ich habe zufällig einige Schriftarten aus meiner Sammlung ausgewählt und ich werde Ihnen zeigen, wie Sie sich an sie gewöhnen können, oder Sie können sagen, trainieren Sie Ihr Auge für die Stimmungen von Schriften. Also lasst uns anfangen. Der erste ist Spaß Thema. Jetzt können Sie alle diese Schriftarten sehen, die ich ausgewählt habe, einige sind Spritzer Spaß für Ihre Kinder, gesund essen, Spaß mit Olivenöl haben. Sie sind nicht zu sehr kantig, so dass sie keine sehr scharfen Kanten oder so etwas haben. Das ist also ein bisschen Spaß Thema, ein bisschen entspannt. Top eins ist eine Sans Serif Schriftart und die zweite ist ein bisschen Slab Serif Schriftart, aber seine Ecke ist etwas abgerundet. Dann unten haben wir wieder Sans Serif Schriftart und seine Ecken sind ebenfalls rund. Auch Sie können am Rande der Schule sehen, zurück zur Schule, Wortschule, es hat eine sehr kurvige Note, um es am Ende. Sie müssen einige Dinge sehen, Sie müssen es in einer Farbe schreiben, die Spaß macht, also ist dies der erste Schritt und versuchen, ich versuche verschiedene Schriftarten, wenn Sie eine mögen, dann gehen Sie zum nächsten. Ich glaube nicht, dass es zu meinem Thema passt, also fahren Sie mit dem nächsten fort. Keine Schriftdesigner, vielleicht gibt es nur wenige Experten, die sehr Experte in dieser Typographie-Matching-Übung sind. Aber für mich versuche ich normalerweise, verschiedene Schriftarten zu iterieren , bis ich diejenige finde, die perfekt für mein Thema aussieht. Als nächstes ist das Liebesthema. Sie können sehen, dass ich hier einige verschiedene Schriftarten ausgewählt habe, wenige sind sehr kurvige und Skriptschriftarten, handschriftliche Schriftarten, und eine ist Slab Serif und die obere ist ein bisschen Übergangsschrift, die einen sehr ausgeprägten Stil haben. Das hängt also alles von Ihrer Situation ab. Wenn Sie für eine Eheschließung schreiben oder so etwas, könnten Sie für Skript-Schriftart gehen, vielleicht genau wie ich in John und Jenna heiraten. Wenn Sie in einem glücklichen Liebesthema sind, könnten Sie auf die letzte Option gehen, die alles mit Liebe erreicht werden kann, so dass es auch einige Hoffnung, es zu zeigen. Das sind also verschiedene Themen. Wenn Sie die süßeste Sensation Thema sehen, die ich habe, Liebe ist die süßeste Sensation, die ich benutze, Cyan oder grünlich blaue Farbe, um es und Sie können sehen, auch es ist eine sehr schlanke Slab Serif Schriftart, aber es sieht sehr schön aus. Das Top ist ein Thema wie Liebe zu verlieren oder vielleicht es für immer zu haben oder so etwas wie das, was mit der Zeit oder so etwas verwandt ist. Also habe ich es verwendet, ein Thema, in dem einige der Teile meiner Schriften entfernt werden, so dass dies vielleicht mit der Zeit verbunden ist. So wie wir Liebeserinnerungen haben oder so etwas. So kommt dies mit der Praxis, müssen Sie eine Menge von Schriften zu iterieren, schreiben Sie die Zeile, Sie wollen das Thema, zum Beispiel, ich habe diese Liebe ist die süßeste Empfindung in meinem Herzen. Also das ist die Theme-Zeile Schreiben Sie die Theme-Zeile und dann halten Sie verschiedene Schriftarten einzeln zu iterieren, bis Sie die beste finden. Hier ist das Gesundheitsthema, erste ist Süßigkeiten, können Sie sehen, dass für Kinder und Süßigkeiten ausgewählt, es ist sehr unterschiedliche Schriftart, haben große Platten, sehr lustige Note. Dann haben wir Cupcakes sind die süßeste Sensation für Kinder. Sie können sehen, dies ist die gleiche Schriftart, die ich in der letzten Übung verwendet, die Liebe Thema war. Nun, hier haben wir wieder wenig zu süß, so ist es wenig zu Süße, so können wir es mit Cupcakes zu verwenden, dann haben wir Obst und Gemüse sind gesünder als Junk-Food. Nun, Obst und Gemüse, das ist eine sehr breite Schrift. Es hat eine gewisse Integrität, oder Sie können etwas Gewicht sagen , um Ihnen zu zeigen, dass dieses Ding gut ist. So ist es Abstieg, Ich kann sagen, oder sehr rundy, wo ich einige sehr regelmäßige Formen, die verwandt ist, können Sie sagen, geometrische Sans Serif Schriftart, perfekte Geometrie, und es sieht gut aus zu diesem Thema. Dann haben wir alle natürlichen, biologischen, gentechnikfreien Süßigkeiten für gesunde Kinder. Obwohl es sehr kantige Ecken haben, wie Sie sagen können, dass k und h und alles. Aber die Winkel sind sehr unterschiedlich. So sieht es aus wie ein Kinder-Stil Schriftart, so dass es wirklich gut für natürliche organische und so etwas funktionieren kann. Dann haben wir reines, organisches, GVO-freies Gesundheits Tonic 500 ml, können Sie unten sehen. auch daran, dass ich Farben mit Mix mit meinem Thema verwende. So das Pop-up besser als nur einfache graue oder schwarze Farbe. Hier haben wir wieder organisches Thema, aber es ist anders, vielleicht ist es ein Tonikum für Erwachsene oder so etwas, so habe ich eine Schriftart verwendet. Auch hier hat es sehr runde Formen, es ist Sans Serif und es sieht gut aus mit diesem Thema. Als nächstes haben wir Technologie Thema Drohne Rover Version diese 2.5 groß für Jugendliche, können Sie den Unterschied zwischen x-Höhe und Kapitalhöhe sehen ist groß, so ist es gut für Technologie Websites suchen, vielleicht moderne Techniker, etwas wie diese. Für Kinder oder vielleicht Teenager, dann haben wir eine andere, wie moderne Technik ist gefährlich für Kinder, sagt ich. Das ist nur unsere lustige Überschrift. So ist es auch einige geometrische Sans Serif mit sehr runden Formen, nicht perfekte Runden, aber ovale Art runden Formen. Dann haben wir an der Unterseite, wir sind innovativste Design-Studio in New York. Dieser ist ein bisschen ernst und geometrische Sans Serif und es ist mit Designstudio verwandt, also wollen wir vielleicht etwas Ernsthaftigkeit mit unserer Arbeit Innovation sagen, so etwas wie diese, also benutze ich diese Schriftart vielleicht, Sie könnten eine andere Schriftart wählen, so hängt dies von jedem Designer und seinem Geschmack ab, aber das ist nur, um Ihre Augen zu trainieren. Jetzt haben wir Business-Thema. Geschäft ist mit Ernsthaftigkeit oder vielleicht Macht oder so etwas verwandt, so dass diese Schriftarten, auch sie suchen sehr ähnlich zueinander, sie sind Sans Serif. Sie haben sehr ernstes Thema, sie zeigen keine viel Rundheit, Sie können hier sehen, die Kanten sind völlig flach. Ich habe viele neue Designer gesehen, die sehr moderne Art von Schriftarten mit Business-Themen verwenden, also ist dies nur Ihr Urteil, das ist nur, um Ihr Auge zu trainieren, wenn Sie wollen. Gehen Sie mit einer modernen Art von Schriftart, Sie können damit gehen, das ist kein Problem. Dies ist das Mode-Thema, einige elegant aussehende Schriftarten oder Schriftarten hier, einige sind sehr schlank und langweilig wie Modelle, Supermodels. Obwohl ich persönlich nicht sehr schlanke Modelle mag, sehen sie aus wie Stöcke und vielleicht Kleidung, die an den Stöcken hängen, also ist das meine eigene Meinung, nehmen Sie es nicht persönlich. Nun, die zweite ist ein bisschen klassisch, vielleicht Armbanduhren, also benutze ich einige humanistische Schrift, Sie können die e in den Uhren sehen und die neueste, Sie können sehen, e ist sehr schräg, es hat eine sehr schräge Steigung. Also ist es im Grunde eine humanistische Schrift und es ist mit dem klassischen alten Typ verwandt, also haben wir diese benutzt. Dann haben wir sehr geometrische Schrift an der Unterseite, die Modedesign ist nicht nur über Kleidung, es geht um Sie. Es ist mit etwas Geometrie verwandt, es ist sehr geometrisch, sehr dünn und schlank, die Punkte sind das, was Sie sehen können, die Punkte auf den Augen sind vertikal und genau wie schlanke Rechtecke. So wähle ich verschiedene Schriftarten für verschiedene Themen aus. Lassen Sie uns einige weitere Beispiele für Mode-Thema sehen, können Sie wieder sehen, Ich bin mit Bodoni modernen Schriftarten, Sie könnten es auf einer Menge von Websites gesehen haben. Bodoni-Schriftarten sind moderne Schriftarten wie diese, Modedesigner sind heutzutage Idioten. Sie sind keine Idioten, es ist genau das, was ich manchmal denke. Super-Modelle sind sehr dünn, genau wie Besenstiele, ja, das stimmt. Vivaldi 2.0, die neueste in klassischen Armbanduhren zum Verkauf. Also versuche ich, dieses Mal verschiedene Schriftarten zu verwenden, die meisten von ihnen sind Bodoni, sie haben eine sehr dicke und dünne Veränderung der Striche. So verwenden wir Bodoni-Schriftarten in Modethemen. Jetzt haben wir Sport-Thema. So können Sie hier sehen, ich habe vier verschiedene Themenlinien. Kannst du wie ein Gepard rennen? Es ist sehr schlank, schräg , um wie ein Gepard zu laufen, also zeigt es mir Geschwindigkeit, wenn es kursiv ist. Dann haben wir 69 Liegestütze, um Ihren Bauch schlank heute zu bekommen, so ist es sehr harte Übung, Liegestütze. Ich glaube, ich kann nicht mehr als 10 in meinem aktuellen Zustand gehen. Nun, also verwende ich sehr harte oder sehr harte texturierte Schrift auf dieser. Dann haben wir, wenn ein Elefant schlank werden kann, kannst du es auch. Jetzt können Sie sehen, wie ich [unhörbar] in dieser Zeile verwendet habe, um mein Thema zu zeigen, es ist ein lustiges Thema, aber Sie können sehen, ob ein Elefant ist fett und dann schlank ist ein bisschen schlanker. So habe ich verschiedene Gewichte verwendet, um meine Botschaft zu vermitteln. Dann haben wir Fantasy Football ist hier. Das ist eine Ankündigung. So ist es in sehr dicken fett Buchstaben. Ich sah diese Schriftart, die auf Yahoo Werbung auf yahoo.com verwendet wurde, also habe ich gerade diese hier ausprobiert. 29. Wirkung der Farbe auf Typeface (Stimme): Nun ist der nächste Stopp Effekt der Farbe auf Schriftarten. Nun, Sie können in der vorherigen Lektion sehen, Ich habe Ihnen verschiedene Schriftmodi gezeigt. So haben Farbe einen Create-Effekt auf den Schriftmodus. Wenn Sie eine Farbe verwenden, die sich sehr von Ihrem Thema unterscheidet, kann es wirklich ändern oder seine Stimmung oder Stimme ändern. Siehst du, kannst du wie ein Gepard rennen? Ich benutze Gepardenfarben und ein bisschen eine braune Farbe, die mit Boden, vielleicht Sand oder so etwas verwandt ist . Dann können Sie in der nächsten Zeile sehen, 69 Liegestütze, ich benutze grau-schwarze Farbe, die mit Zähigkeit oder etwas Ähnlichem zusammenhängt. Dann in der Elefantenlinie, verwende ich Farbe, die mit Elefanten verwandt ist und schlank ist die Hauptschwerpunkte, also verwende ich rote Farbe, die Sie schlank werden können. Fantasie ist mit lila Farbe verwandt, es ist Magie, es ist spirituell. Oder so etwas, also verwende ich lila Farbe für Fantasy-Fußball ist hier. Wenn Sie also eine Schriftart entwerfen oder auswählen, stellen Sie sicher, dass Sie die richtige Farbe für das richtige Team auswählen und nicht zu viel in diese Farben kommen. Wenn Sie bereits eine einzelne Farbe für Ihre Überschriften verwenden, verwenden Sie diese in Ihrer Schrift für Überschriften. Wenn Sie eine andere Farbe für Ihren Textkörper haben, verwenden Sie diese auf Ihren Körpertexten. Also korrigieren Sie nicht Ihre Meinung, versuchen Sie, zwei verschiedene Farben auszuwählen, vielleicht haben Sie eine andere Farbe für Ihre Unterüberschrift oder Ihren Slogan und eine andere Farbe für Ihre Überschrift, also etwas wie diese. Lassen Sie mich Ihnen ein paar Beispiele aus meiner Arbeit zeigen, wo ich diese Farbe verwendet habe. Sie können hier drüben Mentholgeschmack sehen. Ich benutze Mentholfarbe für diese und Sie können hier sehen, wir haben drei traditionelle Tabakgeschmack, wo ich braune Farbe für diesen Tabakgeschmack verwende. Sie können auch sehen, diese Boxen sind auch die gleiche Farbe, die ich hier drüben verwende. Sie können hier sehen Ich habe Überschrift, dann eine Unterüberschrift, dann sind dies Abschnittsüberschriften, und wir haben zwei Funktionen wie diese in diesem Produkt. Dies ist also ein Beispiel für die Verwendung von Farben mit Ihrer Schrift. Mal sehen, ob ich noch ein anderes finden kann, ein anderes Beispiel hier. Hier haben wir ein weiteres Beispiel, Sie können sehen, dass ich hier drei Farben für verschiedene Symbole auf der linken, in der Mitte und der rechten Seite verwende . Ich verwende die gleiche Farbe für jeden Schritt, wie für diesen, unsere Schrittnummer 1, 2, 3. So verwende ich zwei Farben. Dann wieder, ich benutze hier zwei Farben, um einige Interessen zu zeigen, wie, lassen Sie uns Ihnen helfen zu erwerben, und dann ist die Nummer für den Anruf in einer anderen Farbe, nur um es zu betonen. Jetzt können Sie hier sehen, ich benutze wieder zwei Farben, eine ist für Überschrift und die zweite ist ein bisschen gräuliche Farbe, weil ich nicht möchte, dass es sehr prominent ist. Auch hier verwende ich A+-Bewertung mit Better Business Bureau in rot, weil ich es hervorheben oder leistungsfähiger machen wollte, vielleicht leistungsfähiger aussehen. So verwende ich verschiedene Farben auf verschiedenen Schriftarten. Hier geht es also darum, wie man Farben für verschiedene Schriftarten verwendet. Gehen wir also zur nächsten Lektion über. 30. Einführung in die Font: Hier ist eine kurze Einführung zu Schriftpaarungen, also nur, um Ihre Meinung von einigen Annahmen oder einigen Gedanken darüber zu klären, wie Sie Schriftarten koppeln. erster Linie gibt es keine harten Regeln, um Schriftarten zu koppeln, also müssen Sie Ihre Augen und Eingeweide dafür trainieren. Versuchen Sie, Ihr Bauchgefühl zu entwickeln, dass, okay, diese beiden Kombinationen sehen schrecklich Mann, es ist hässlich oder so. Diese beiden Schriftarten sehen zusammen gut aus. So trainierst du dein Augen- oder Bauchgefühl, aber es kommt mit der Zeit. Du siehst immer wieder verschiedene Kombinationen von verschiedenen Designern, und dann werden deine Augen und deine Eingeweide automatisch trainiert. Es gibt ein paar Grundregeln. Erstens ist es, zu viel Ähnlichkeit zwischen Schriftarten zu vermeiden. Wenn es Schriftarten gibt, die gleichmäßig rund sind und die X-Höhe gleich ist und Kurven gleich sind, dann sind sie identisch mit der Installation von [unhörbaren] Schriftarten. Dann ist die zweite Regel suchen Sie nach Kontrast. Selbst in der Natur, können Sie sehen, Kontrast ist überall, auch in Pflanzen, Blumen, Farben, alles. Also zwei verschiedene Schriftarten, die sich sehr voneinander unterscheiden, wie Serif und Sans Serif, oder Slab serif und sans serif, sie funktionieren großartig miteinander. Jetzt ist die dritte Regel suchen Sie nach ähnlichen Funktionen. Sie müssen nach Geometrie dieser Schriftart, Rundheit, offener Zähler oder geschlossener Zähler suchen. Ob die Zähler sehr viel Platz haben oder sie haben sehr wenig Platz. Dann suchen Sie auch nach der X-Höhe. Wenn sie die gleiche X-Höhe teilen, könnten sie gut zusammenkommen. Wir werden all diese Regeln in der nächsten Lektion im Detail sehen, also mach dir keine Sorgen darüber. Hier sind ein paar wichtige Punkte, die Sie beachten müssen, wenn Sie versuchen, Schriftarten zu koppeln. Die erste ist die Lesbarkeit. Es ist sehr wichtig. Wenn Sie Text für Ihren Körper auswählen, dann ist die Lesbarkeit unsere oberste Priorität. Die zweite ist die Schriftart der Anzeige oder der Überschrift. Sie können hier ein bisschen kreativ sein, Sie können jede Schriftart auswählen, vielleicht sehr breit, sehr dick, sehr schräg oder so etwas. Nun, die dritte ist die Stimme der Schrift. Sie werden beide Schriftarten erscheinen oder beide Schriftarten auswählen, wobei Sie Ihr Thema oder den Zweck Ihres Designs berücksichtigen. Wenn es sich um ein organisches Design oder etwas im Zusammenhang mit der Natur handelt, sollten Sie bedenken, dass beide Schriftpaare das widerspiegeln sollten. Es gibt letzte Sache, die ich löschen muss, was einige Schriftarten sind, die nur gespeichert passen überhaupt. Wenn Sie also das Gefühl haben, dass diese Schriftarten nicht übereinstimmen, dann versuchen Sie nicht, sie zu vergleichen. Einige Schriftarten, die sie wirklich gegenseitig abstoßen. Der letzte ist, dass weiterhin verschiedene Schriftarten miteinander kombiniert werden. Sie werden mit Experimentieren lernen. Niemand sagt dir diesen Trick. Es ist die beste, um Typografie Paarung zu lernen. Öffnen Sie die Schriftarten, wählen Sie eine für den Textkörper aus, und iterieren Sie dann für die Überschrift in Ihrem Design. Halten Sie weiter zu iterieren, bis Sie die beste finden. So trainierst du deinen Darm und trainierst dein Auge für die Kombination verschiedener Schriftarten. Dies ist ein kleines Intro über Schriftpaarungen, also lasst uns loslegen und in den nächsten Lektionen eintauchen , wie man Schriftarten paart. 31. x-height: wir einen Blick auf eine andere Typographie-Matching- oder Paarungstechnik, die X-Height Matching genannt wird. Sie wissen bereits über x-height. Wenn Sie die Kleinbuchstaben x-Höhe von zwei Schriftarten anpassen können, werden sie wahrscheinlich sehr gut zusammen passen. Ich werde Ihnen ein paar Schriftart-Übereinstimmungen zeigen, die ich ausgedacht habe, nur um Ihre Augen zu trainieren. Es ist keine Voodoo-Magie oder so. Es ist nur harte Arbeit. Sie müssen ein x mit einem anderen x einer anderen Schriftart übereinstimmen. Also fahren Sie fort, verschiedene Schriftarten zu iterieren und auszuwählen, bis Sie die x-Höhe fast genau übereinstimmen. So können Sie diese Schriftarten einfach kombinieren. Das ist der Erste. Dies sind die Schriftarten auf der rechten Seite, Andron und Chaparral Pro Regular. Dies ist die erste Kombination. Ich biete alte Schriftart oder Garamond-Stil Schriftart mit Slab Serif. Oben links sehen Sie, dass beide x oben sind, sie haben die gleiche Höhe. Nur sie unterscheiden sich in den Schlaganfall und den Serifenenden. Also die Serifenenden, eine ist Slab Serifen-Stil, eine ist alter Stil. Es hat ein bisschen kurvige Platten an der Spitze. Sie können unten links sehen, ich habe diese abgestimmt. Eine wird für die Überschrift verwendet. Die andere ist für Körpertext und sie sehen zusammen gut aus. Es scheint nicht immer, dass sie wirklich perfekt sind oder sie zusammen gut aussehen. Manchmal sehen sie zusammen normal aus. Sie könnten dich überraschen : „Das ist großartig. Sie sehen toll aus.“ Aber manchmal, wenn Sie x-Höhen von zwei Schriftarten übereinstimmen, passen sie manchmal sehr perfekt. Schauen wir uns ein anderes Beispiel hier an. Wieder habe ich die gleiche x-Höhe. Einer ist alter Stil mit Slab Serif und alten Stil Dicke. Sie können sehen, dass es einen sehr dicken und dünnen Wechsel hat. In diesem Beispiel verwende ich Chaparral Pro mit Garamond Schriftart und Sie können sehen, dass sie zusammen gut aussehen. Wenn Sie variieren möchten, können Sie voran gehen und wählen Sie andere Stile wie ich in diesem Kapitel 25 hier auf der linken Seite in der Überschrift verwendet habe. Ich habe hier kursiv benutzt. So können Sie eine dritte Schriftart einführen. Verwenden Sie einen anderen Stil der gleichen Schriftart. Wenn Sie Chaparral Pro als Überschrift ausgewählt haben, können Sie Chaparral Pro kursiv als Unterzeile, Unterüberschrift oder Datum verwenden oder Kapitelnummer anzeigen. Das ist also ein sehr grundlegender Trick. Hier ist ein weiterer, übergangsweise mit altem Stil. Sie, wieder, teilen die gleiche x-Höhe und Sie können sehen, eine ist diese Plantagenet Cherokee. Eine andere ist MM Times, die aussehen, als wäre es ein bisschen Übergangsschriftart für mich. Hier verwende ich den Übergangstext als meine Überschrift und den anderen als meinen Textkörper. Hier ist noch ein Paar. Ich benutze MM mal fett als meine Überschrift und Inconsolata Medium, das ein bisschen Monospace-Schriftarten wie Schreibmaschinen unten ist. Sie sehen zusammen toll aus. Sie teilen die gleiche x-Höhe. Eine ist übergangsweise, eine ist Sans-Serif, oder man kann viel von einer Monospace-Schreibmaschine Schrift sagen, anstatt Sans-Serif. Schauen wir uns ein anderes Beispiel an. Hier haben wir ein sehr tolles Spiel. Ich weiß nicht, vielleicht fühlst du dich anders. Ich fühle mich so. Das stammt aus der gleichen Schriftart oder derselben Schreibtippfamilie, Droid Sans und Droid Serif. Auch hier ist die x-Höhe gleich. Nur ihre kühne ist anders. Einer ist Slab Serif oder einer ist Sans-Serif und sie sehen zusammen toll aus. Ich verwende einen Kursivstil für die Variation. Im nächsten Abschnitt erfahren Sie mehr über die Variation. Jetzt ist dies das letzte Beispiel. Ich habe dieses Beispiel vom Herumgoogeln und fand es sehr nützlich. Das eine ist Georgia und das andere ist Proxima Nova. Wirklich sehen sie gut miteinander aus, und warum? Weil ihre x-Höhe perfekt passt. So können Sie sehen, dass nicht einmal ein einzelnes Pixel nach oben oder unten ist. Sie passen perfekt zueinander. Also benutze ich Georgia als Überschrift und Proxima Nova als meinen Körpertext. Hier geht es also darum, Schriftarten mit ähnlichen X-Höhen zu vergleichen. Du musst sie finden. Sie werden nicht zu deiner Tür kommen. Du musst sie finden. Ich habe verschiedene Schriftkombinationen ausprobiert. Sie in Ihrer Freizeit, VersuchenSie in Ihrer Freizeit,diese Technik zu verwenden und versuchen Sie, einige Schriftarten zu koppeln. Hier geht es also um diese X-Höhe Matching-Technik. Gehen wir also zur nächsten Lektion über. 32. Mit Pairing: Lassen Sie uns nun über eine andere Technik sprechen, die als Kontrast in der Schriftpaarung bezeichnet wird. Vor ein paar Jahren war ich nur ein Anfänger und Anfänger im Typografie-Matching. Ich betrachte mich immer noch als Anfänger wie ihr. Was ist Kontrast bei der Schriftkopplung? Der Kontrast ist im Grunde von vielen Arten. Es könnte ein Kontrast in der Dicke von zwei Schriftarten sein, vielleicht Strichstärke, eine ist sehr schlank und die andere ist sehr dick. Es kann auch ein Unterschied im Stil sein, vielleicht weil man sehr rundlich ist und man sehr mutig und bulgarisch und solide ist, es ist nicht sehr rund. Beheben Sie nicht Ihre Meinung, dass es nur Kontrast zwischen vielleicht x-Höhe oder so etwas ist, es könnte Kontrast in allen Funktionen von zwei Schriftarten sein. Nun, Sie können hier sehen, ich habe drei Schriftarten abgestimmt Gadugi Regular, Colaborate-Regular, Aleo Regular, und ich habe Ihnen die x-Höhen all dieser drei gezeigt. Man kann sehen, dass eine etwas kleiner ist und die anderen beiden fast übereinstimmen. Ich habe einige Beispiele im Internet gesehen, ich habe einige Beispiele gegoogelt, wo die Designer drei Schriftarten abgestimmt haben. Nun, die häufigste Sache und das häufigste Geheimnis, das ich sagen würde , dass ich gefunden habe, ist, dass die meiste Zeit 90 Prozent der Zeit, die beiden Schriften, wie hier haben wir zwei Schriften, die die gleiche x-Höhe teilen, also eine ist anders. Meistens teilen sich die anderen beiden die gleiche x-Höhe. Das ist also der Schlüssel zu ihren drei verschiedenen Schriftarten zusammen. Dies könnte uns also auch helfen, Kontrast in unserer Font-Paarung zu verwenden. Hier haben wir drei Schriftarten, und zwei haben die ähnliche x-Höhe. Außerdem ist man etwas schlanker, die beiden haben mehr Dicke. Wenn Sie eine dickere Schriftart haben, können Sie sie nur für Überschriften verwenden. Das ist gesunder Menschenverstand. Wenn Sie mit einigen weiteren Details wie diesem Internet/Markt/Neueste Beiträge Unterabschnitt oder Slogan oder so etwas gehen möchten, können Sie eine andere verwenden. Wählen Sie für den Textkörper diejenige, die eine gute x-Höhe hat und es leicht zu lesen ist oder so etwas. So werden wir Kontrast in der Schriftpaarung verwenden. Hier haben wir ein anderes Beispiel. Auch hier haben wir drei Schriftarten: Garamond, Franklin Gothic und im Grunde Franklin Gothic Medium; dies sind zwei Stile aus der gleichen Schrift. Deshalb zeige ich euch nur zwei x-Höhen, weil diese Franklin Gothic die gleiche x-Höhe haben. Also hier, was ich getan habe, ist, dass ich Garamond als meine Überschrift benutze. Garamond ist ein bisschen kühner als andere Franklin Gothic Schriften, also habe ich es für meine Überschrift verwendet. Dann verwende ich im Subtext Internet/Markt/Latest Post Internet/Markt/Latest PostFranklin Gothic Medium, denke ich, und für den Körpertext benutze ich Franklin Gothic. So habe ich all diese Schriftarten kombiniert und sie sehen wirklich genial aus. Hier ist ein weiteres Beispiel, wo ich Garamond, Halifax Light und Georgia, drei verschiedene Schriftarten, und es ist schwierig, drei verschiedene Schriftarten zu entsprechen. Nun, die geheime Quelle, die ich Ihnen bereits gesagt habe, ist, dass zwei Schriftarten mit ähnlichen X-Höhen und eine andere von diesen beiden sind. So hat man eine kleinere x-Höhe, andere zwei teilen die gleiche x-Höhe. Hinblick auf den Kontrast haben sie viele ähnliche Eigenschaften, aber ihre Dicke und ihren Strich sind unterschiedlich. So wird Halifax Light als Slogan verwendet und Garamond wird als Überschrift verwendet, und Georgia wird für Textkörper verwendet. Hier ist ein weiteres Beispiel für Kontrast. Hier verwende ich Garamond, Garamond Italic und Georgia. Also im Grunde zwei Schriftarten, Garamond und Georgia. Sie können sehen, dass sie hier einen Kontrast haben, wenn Sie sich das X hier auf der linken Seite ansehen. Sie haben einen Kontrast in der x-Höhe. Also viel Kontrast in der x-Höhe, obwohl ihre Funktionen sehr gleich sind, ist man Old Style, einer ist Transitional, und immer noch sehen sie toll aus. Sie machen ein Thema eines Gedichts oder vielleicht eine spannende Geschichte oder so etwas. Dies ist also ein sehr gutes Beispiel für den Kontrast, der nur unsere x-Höhe und ein bisschen Kontrast zwischen Old Style und Transitional verwendet . Hier ist ein weiteres Beispiel, das zwei Schriftarten entspricht. Auch hier haben wir Transitional Fonts miteinander. Nur haben sie einen Unterschied in Schlaganfall und Stil ein wenig. Einer von ihnen, denke ich, ist alte Schrift Garamond Stil. Sie haben also nicht zu viel Kontrast, aber trotzdem können sie ein gutes Paar bilden. Plantagenet Cherokee, eine Schriftart ist, und die andere ist MMTimes. Aus meiner Sicht ist meine Bauchgefühle, dass es nicht eine sehr große Übereinstimmung ist, weil es nur Kontrast zwischen der Strichstärke. Andernfalls ist ihre x-Höhe ähnlich. Sie geben uns also kein Stichwort, dass sie perfekt aufeinander abgestimmt sind. Hier ist ein weiteres Beispiel. Hier haben wir einen guten Kontrast zwischen den x-Höhen, obwohl die Eigenschaften gleich sind. Beide sehen aus wie geometrische Schriftarten. Einer ist Monospace Inconsolata Medium, das ist Monospace Schriftart und andere ist Montserrat Regular, und dieser eine wirklich sehr genial aussehende Schriftpaar schafft. Dies ist also ein weiteres Beispiel. Hier habe ich x-height als meinen Kontrast und auch ein bisschen Strichstärke verwendet. Hier ist ein weiteres Beispiel für den Kontrast mit zwei Schriftarten aus der gleichen Familie, die Droid Sans und Serif ist. Obwohl sie die gleiche x-Höhe teilen, ihr Strichunterschied und auch ihre Platten und Sans und Serif im Grunde der Kontrast. Viele Male, Serifs und Sans Serifs, sie sind ein wirklich tolles Paar. Das ist das letzte Beispiel, das ich euch zeigen werde. Lassen Sie sich also nicht langweilig mit meiner langweiligen Stimme. Ich weiß, dass du meine Stimme sehr hasst. Das hier ist Ubuntu und Proxima Nova. Sie können sehen, dass Ubuntu ist sehr dick und ein bisschen Kurve in seinen Beinen von X. Sie können auch sehen, die x-Höhe von beiden ist ein bisschen anders, aber sie sehen sehr gut zusammen. Sie können ein sehr gutes, gesundheitsbezogenes oder vielleicht technisches Team bilden. Dies ist die letzte im Gegensatz, im Beispiel für Schriftpaarung. Ich denke, Sie könnten ein gutes Wissen und vielleicht gutes Gefühl aus dieser Sitzung gewonnen haben. Gehen wir also zur nächsten Lektion über. 33. Schriftarten auf ähnlichen Funktionen zusammenfügen: In dieser Lektion werden wir einen weiteren sehr einfachen Trick lernen, um die Schriftart anzupassen, nämlich die Funktionen von zwei verschiedenen Schriftarten zu entsprechen. Was bedeutet Funktionen? Lassen Sie mich das mit einigen wenigen Beispielen erläutern. Denn diese Technik kann nur erlernt werden, indem man Ihnen ein paar Beispiele zeigt. Ansonsten ist es nicht leicht zu erlernen. Hier habe ich, das ist ein Blog stored.org. Ich habe dieses Beispiel von dieser Website gefunden. Dies ist typ.io. Sie können hier sehen, wir haben eine Schriftart in der Überschrift. Es ist nur geführt Buchstaben zwei Überschrift. Dann haben wir Kopierschriftart, hier haben wir es. Wenn Sie genau hinsehen, auch Sie denken, dass diese Schriftart einen sehr dicken Strich hat. Aber wenn man sich die Features wie das E, die Neigung von E und das X anschaut, wie es geschrieben wird. Auch das ich, alles, was sie passen viel mit dieser Schriftart unten. Die Schriftart hier kann man sehen, ob man sich sogar den Q-Buchstaben anschaut. Wenn ich ein wenig hier unten gehe, können Sie am Ende sehen, Sie können sehen, dass Q, Sie können sehen, dass das Q ist fast ähnlich zu diesem, nur der Unterschied von ein bisschen Strich und Stil, die Form und die Platzierung, alles ist fast gleich. Auch wenn man sich A anschaut, ist das A, und hier haben wir wieder A, die Neigung dieses Gegenbereichs von A ist fast gleich. Sie haben also die gleichen Eigenschaften. Sie können hier drüben sehen. Wenn wir etwas mehr hineinzoomen können, können wir das vielleicht leicht sehen. Sie können die Ähnlichkeit zwischen A's sehen, auch die T, das Ende dieses T, Sie können hier sehen. Das ist fast das gleiche wie dieses. Es ist auch das gleiche Ende. Dies sind einige Funktionen, die Sie suchen werden. Sie haben diese Schriftarten mit ähnlichen Funktionen abgestimmt. Obwohl ich immer noch glaube, dass Sie Ihren Bauch oder Ihre Augen trainieren sollten, um die Schriftarten zu passen. Diese Merkmale können wahrgenommen werden. Sie können sie nicht so aussehen und mathematisch analysieren. Sehen wir uns ein anderes Beispiel an. Hier haben wir ein anderes Beispiel. Dies ist eine Schriftart. Es ist sehr mutig. Ich denke, es ist kreisförmig, der Name der Schrift ist kreisförmig. Dann haben wir hier eine andere Schriftart im Absatz, der gebratene Text ist. Jetzt kommen wir zu den Gemeinsamkeiten, lassen Sie uns hineinzoomen. Wenn Sie beide Schriftarten sehen, einige der Kurven, sie haben so, es ist fast das gleiche. Dann haben wir T's. Sie können die Spitze des T sehen, wie es sich hier in diesem Bereich trifft. Es ist fast das gleiche mit diesem T. Dies sind wenige Funktionen, die in diesen beiden Schriftarten ähnlich sind. Es scheint sehr nahe beieinander in Bezug auf einige der Kurven und einige Features. Dies ist ein weiteres Beispiel, dann haben wir, mal sehen, einige weitere Beispiele. Nun, wenn Sie sich Google Fonts Exemplare ansehen, in denen Google Fonts einige Schriftpaarung teilen, lassen Sie uns auf die neue Google-Kopplung gehen. Ich denke, es ist besser. Vielleicht können wir es auch hier sehen, also ist es kein Problem. Nun, wenn Sie sich diese erste Paarung ansehen, schlugen sie Open Sans und Roboto vor, Sie können sehen, dass es eine Menge Ähnlichkeit zwischen diesen beiden gibt. Beide sind Sans Serif, Sie können sich die A's im Absatz ansehen, und sie sind fast der gleiche Roboter ist ein bisschen schlank oder die O, O von Roboter sind ein bisschen, Sie können sehen, es hat weniger Zähler und ein bisschen vertikal anstatt diesen offenen Sans-Zähler, haben wir mehr Zähler in den Os. Trotzdem sehen sie sehr ähnlich aus, obwohl ich denke, dass sie zu viel Ähnlichkeit teilen, aber sie haben es immer noch als Paar gezeigt. Dann mag ich diese Open Sans und Source Sans Pro, sie teilen auch viele Ähnlichkeiten wie die Kurven, die Sie N und A's ein N und auch die O sehen können. Sie sind sehr ähnlich. Aus meiner Sicht sind sie ein sehr gutes Paar. Letzte Station ist, dass diese Website, es ist typeconnection.com und ich habe versucht, zwei Schriftarten mit ähnlichen Persönlichkeiten zu koppeln. Eine Schriftart ist dieser Adobe Garamond Pro, und die zweite ist Chaparral Pro. Es zeigt auch einige der Körperbau wie ein Trenchant, trimmen, solide, langlebig, agil mit definierten Formen. Wir wissen nicht so viel darüber. Ich bin kein Experte. Aber was ich euch zeigen möchte, ist diese passende Grafik hier drüben. Es ist sehr interaktiv und sehr schön. Im Moment habe ich auf diese Garamond Pro geklickt und Sie können sehen, dass diese hervorgehoben ist Adobe Garamond Pro Schriftart. Sie können die Grube im Hintergrund sehen, sehr leicht, das ist im Grunde Chaparral Pro. Sie können sehen, die Zähler sind fast die gleichen und so Labore sind Serifen, die sie die gleiche Länge haben. Obwohl diese Adobe Garamond Pro abgerundete Platten haben, sorry, Serifen Sie haben abgerundete Enden, sie sind nicht scharf oder kantig. Aber die Form oder die Winkel sind fast gleich. Sie können das L hier sehen, es geht fast in den gleichen Winkel und Richtung. Auch Sie können hier sehen, es zeigt keilförmige Kopf Serifen. Sie sind keilförmig für beide Schriftarten. Dann haben wir kleine Zähler. Dann haben wir eine lange Verzögerung. Ich weiß nicht, was es ist, aber sie haben es hier gezeigt. Nun, horizontale Querstange. Wir haben horizontale Querstange sehr gerade. Dann haben wir glatte Übergänge zu Fuß Serifen. Glatte Übergänge bedeuten, dass es einen sehr glatten Winkel für den Stiel zu diesem Fuß serif gibt. Das ist es, was sie zeigen. Wechseln Sie nun zu diesem Chaparral Pro. Jetzt ist Chaparral Pro an der Vorderseite, was etwas dunkel ist. Sie können sehen, dass die Enden ein bisschen dick und plattenförmig sind. Aber immer noch ist es sehr ähnlich wie Adobe Garamond Pro oder einige Funktionen, die Aktien in den gleichen Funktionen. Wie Sie sehen können, hat O kleine Zähler. Beide haben kleine Zähler, als sie eine leichte Modulation haben. Ich denke, das ist es, was sie versuchen, über den Winkel zu sagen. Dann keilförmige Kopf Serifen. Dies ist das gleiche, dann unbracketed Platten-Seriifs, es unterscheidet sich von der anderen Schriftart. Es hat Platten statt dieser kurvigen Serifen hier drüben wie dieser Adobe Garamond Pro. Aber das ist eine sehr schöne Seite, wenn Sie versuchen möchten , verschiedene Schriftarten mit Ähnlichkeiten zu verbinden, sollten Sie sich diese Seite ansehen. Ich werde alle Links dieser Seiten in den Ressourcen teilen. Sie können sie ausprobieren, spielen Sie dieses Spiel. Es ist sehr schön und sehr cool. Es wird Ihr Auge für passende Schriftarten verbessern. Außerdem möchte ich Ihnen noch ein Beispiel zeigen. Bebas Neue und Din kondensiertes Netz. Das erste, was, wenn ich mir diese beiden Schriftarten anschaue, ist, dass sie groß sind. Das hier ist ein bisschen groß. Auch das ist sehr hohe Schrift. Obwohl es dick ist, aber es sieht ein bisschen schlank und groß aus. Die gebaute ist hoch, die X-Höhe ist gut. Deshalb sehen sie sehr ähnlich aus, weil dies auch dick und groß ist. Dies ist auch dick und groß. Dies ist die einzige Ähnlichkeit, die ich sehen kann, weil gerade die Bebas Neue Font in allen Kappen ist und ich denke, sie ist nur in allen Kappen verfügbar. Dies sind einige Beispiele, die ich mit euch teilen wollte, Adobe Garamond Pro, Chaparral Pro und einigen anderen. Sie können die Websites durchsuchen, diese typ.io, und suchen Sie nach Ähnlichkeiten, nur um Ihr Auge zu trainieren und halten Sie Ihre Typografie Fähigkeiten zu verbessern. Fahren wir mit der nächsten Lektion fort. 34. Vermeide zu viel Ähnlichkeit: In dieser Lektion werden wir über zu viel Ähnlichkeit sprechen. In der vorherigen Lektion haben wir darüber gesprochen, ähnliche Funktionen unter verschiedenen Schriftarten zu finden, um sie zu kombinieren. Aber in dieser Lektion werden wir uns ansehen, wenn Sie versuchen, zu viel Ähnlichkeit zu finden, wird es Ihren Kontrast und Ihr Design verletzen, es kann leicht Ihr Design ruinieren. Denken Sie also daran, dass zu viel Ähnlichkeit den Kontrastaspekt unserer Forward-Matching-Technikleicht zerstören den Kontrastaspekt unserer Forward-Matching-Technik kann und es sich wirklich auf Ihr Design auswirken kann. Versuchen Sie also, zu viel Ähnlichkeit zu vermeiden. Hier zeige ich Ihnen zwei Schriftarten, Noto Sans und Open Sans. Während ich für einige Web-App für Ärzte entwarf, denke ich, ich kam mit dieser Kombination. Ich habe versucht, Noto Sans und Open Sans in dieser Anwendung miteinander zu verwenden und zu meiner Überraschung gab es überhaupt keinen Kontrast. Ich war einfach verwirrt, warum es immer wieder passiert. Ich sollte eine andere Schriftart verwenden, sie stimmen nicht sehr gut überein. Sie können oben sehen, dass x-Höhe ähnlich ist, sogar die Breite des Strichs ist ähnlich, sie haben fast ähnliche Strich. Unten sehen Sie, dass ich verschiedene Buchstaben zeige, foax wachsen, es bedeutet nichts, nur um Ihnen die Kurven und Winkel und Zähler zu zeigen, wie groß die Zähler sind? Wie ist die Form der Theke? Sie können innerhalb der O Buchstaben sehen, beide Schriftarten haben fast 99 Prozent Ähnlichkeit. Selbst wenn man sich A anschaut, sind die Kurven gleich, sogar die Zähler sind fast gleich, W ist gleich, nur der Unterschied ist dieser G-Buchstabe, ich denke, man ist humanistischer Sans-Serif und es gibt ein bisschen geometrisch. Das Problem, das ich Ihnen hier zeigen möchte, ist zu viel Ähnlichkeit, also versuchen Sie, zu viel Ähnlichkeit zu vermeiden. Hier ist ein weiteres Paar, das ich gefunden habe, die Euphemia Regular und Open Sans ist. Ich denke, sie sind nicht zu sehr ähnlich, aber immer noch teilen sie eine Menge von derselben Persönlichkeit. Wenn man sich Euphemia Regular anschaut, denke ich, es hat etwas kurvige Natur und endet und man kann einen Schwanz nach einem Brief hier drüben sehen. Auch F ist ein bisschen anders, aber die Grundstruktur des Buchstabens ist fast die gleiche. Dies ist ein weiteres Beispiel, versuchen Sie, solche Kombinationen zu vermeiden. Es ist besser, dass Sie so etwas wie zwei Zeilen in zwei verschiedenen Schriftarten schreiben und versuchen zu sehen, ob sie miteinander ähneln oder nicht. Jetzt hier ist eine weitere Kombination, die ich gefunden habe. Ich suchte viel und versuchte, viele Schriftarten zu mischen , dann erreichte ich diese beiden viel ähnlichen Kombinationen. Also, wenn Sie sich Droid Sans und Source Sans Pro ansehen. Es gibt viele Ähnlichkeiten zwischen diesen beiden Schriftarten. Wenn man sich das G und das Ohr von G, der Buchstabe R, es ist fast das gleiche, W ist fast das gleiche, man ist breiter, man ist ein bisschen weniger breiter, F ist fast gleich und dann die Kurven am A, der Zähler innerhalb des A-Buchstabens, schließen Zähler, das ist das gleiche, und das X ist fast das gleiche. X-Höhe ist ein bisschen anders zwischen diesen beiden Schriftarten, aber sie teilen immer noch viele Ähnlichkeiten. Es geht also darum, zu viel Ähnlichkeit zu vermeiden, wenn Ihr Darm das Gefühl hat, dass diese Schriftarten keinen Unterschied haben weil Ihre Augen und Ihr Gehirn besser trainiert sind, Unterschiede und Ähnlichkeiten zu betrachten. Wenn Sie eine Ähnlichkeit finden oder feststellen, dass es zu viel Ähnlichkeit zwischen zwei Schriftarten gibt, versuchen Sie, sie zu vermeiden. Gehen wir nun zur nächsten Lektion über. 35. Schriftarten von derselben Designer oder der Familie kombinieren: Zuerst werden wir sehr langsam abheben. Also werden wir uns Techniken anschauen, die mit dem einfachen Kombinieren verschiedener Schriftarten zusammenhängen. So, wie wir Schriftarten sehr einfach koppeln können. Jetzt ist die erste Regel, wenn die Schriftarten zu einer sehr großen Familie oder einem gleichen Designer gehören, dann passen sie sehr gut zusammen. Nun, warum ist das so? Denn der gleiche Designer oder die gleiche Familie bedeutet meist die ähnliche Geometrie. So die Formen und Winkel, die meisten von ihnen werden sie ihre Eigenschaften teilen. Jetzt gibt es Familien, die Superfamilien genannt werden, wie wir Roboto hier drüben haben. Lassen Sie mich Ihnen auf Google Fonts zeigen. Wenn Sie sich Roboto ansehen, wo ist Roboto? Hier. Einer ist Roboto hier drüben. Es hat 10 oder 15 verschiedene Größen. Dann Roboto Mono. Dies ist eine sehr große Familie, so dass es verschiedene Variationen wie Roboto Mono hat. Es gibt noch einen, Roboto Condensed. So können alle diese sehr leicht miteinander vermischt werden , weil sie von demselben Designer gebaut und entworfen wurden. Eigentlich ist es im Grunde sehr große Jimbo Mega Familie von Schriften. So könnte die gleiche Familie eine sehr große Familie sein oder es könnte eine Vermischung von Sansserif oder Serif des gleichen Typs sein. Droid Sans, vielleicht kennen Sie die Droid Sans und Droid Serif. Es sind auch zwei Familien, und sie sind im Grunde die gleichen. Dann sind Roboto und Lato einzelne große Familien. Denken Sie also daran, dass, wenn eine Schriftart eine sehr große Familie hat und sie Stile hat, zum Beispiel, lassen Sie mich Ihnen zeigen. So wie dieser Kanit. So hat es viele Variationen, viele verschiedene Stile, viele Dicken. So Strichstärke; 100, 200, 300 verschiedene. Auch diese Exo, Exo 2, hat es eine Menge Variation. Mit diesen Schriftarten können wir viele Variationen erstellen. Der erste Schritt ist also, dass Sie eine Familie finden, die viele Stile haben. So können Sie nur eine Familie verwenden und verschiedene Arten und Stile verwenden , um Variationen und Kontrast in Ihrem Text zu erzeugen. Das ist also der Erste. Dann ist die zweite, dass Sie Schriftarten aus dem gleichen Designer auswählen. Lassen Sie mich Ihnen ein Beispiel zeigen. Hier zeige ich Ihnen Beispiel von Justin Gravante Site of the Day. Es ist ab Januar und es verwendet Schriftarten FF Mark, Fracht Anzeige und Fracht Text. Jetzt werden Fracht Display und Fracht Texte im Wesentlichen von der gleichen Font-Gießerei entworfen , die GarageFonts ist. Sie können hier drüben meine Schriftarten sehen, Frachttext, GarageFonts. Der Designer ist im Grunde dieser Joshua Darden für beide Schriftarten. Das ist derselbe Designer. Wenn Sie auf das „Profil“ dieses Joshua Darden klicken, können Sie sehen, dass er viele verschiedene Designschriftarten wie Freight Text Pro, Freight Display Pro, Freight Sans hat . Also alle diese Schriftarten, sie können leicht miteinander vermischt werden, weil ich denke, dass sie fast die gleiche Geometrie teilen, weil sie vom gleichen Designer entworfen werden. Auch ihr Name ist derselbe, Freight Sans, Freight Sans. So passen wir verschiedene Schriftarten desselben Designers an. Dann haben wir noch einige Beispiele für diese Frachttext- und Frachtanzeige. Sie können hier sehen, sie haben vier verschiedene Schriftarten auf diesem Design verwendet. Sie können hier drüben sehen. Es ist sehr wunderbare Verwendung von Schriftarten. Ich glaube, er könnte sehr Experte für Typografie sein. Dann haben wir eine andere Seite. Das ist UrbansStems. Es wird auch nur Fracht Display und Fracht Sans verwendet. Sie sehen zusammen großartig aus. Eine ist serif und eine ist serifenweise Schrift. Dann hier ist dies eine Viaduct Rail Park Website und es wird auch auf Typewolf vorgestellt. Auch hier verwenden wir Freight Display und Freight Sans. Nicht wir, sondern dieser Designer. Sie sehen zusammen cool aus. Es ist auch eine ist ein bisschen mit sans serif Familie verwandt und man ist für serif. So werden sie vom gleichen Designer entworfen. Das ist im Grunde, ich möchte Ihnen hier zeigen. So verwenden Sie Schriftarten aus derselben großen Familie oder desselben Designers. Verwenden Sie diese Website, bessere Google-Schriftarten. Ich werde Ihnen diese Ressource teilen. Stellen Sie also sicher, dass Sie es behalten und suchen Sie nach verschiedenen Formen, die große Familien haben. Hier geht es also um die erste Regel, die ist, wie wir Schriften aus der gleichen Familie oder dem gleichen Designer leicht kombinieren werden. Gehen wir also zur nächsten Lektion über. 36. Online-Tools zur Font: In diesem Vortrag werde ich mit euch teilen einige der besten Websites, die wirklich Ihre Schriftpaarungstechniken verbessern, und Schriftpaarung Guard, und Ihre Schriftart Paarung Augen, und Ihre Schriftart Paarung, Ich weiß nicht, vielleicht Gehirn, so etwas. Ich weiß nicht, dass du es hast oder nicht. Nun, dieser erste ist Typ Verbindung. Dies ist ein sehr großes Spiel, um Paarung zu geben. Sie können verschiedene Schriftarten auswählen, wie wir diese alten Schriftarten haben, Garamond Pro, ITC Century Schriftarten, Univers, sehr strukturell, viele serifenartige Schriftarten. Dann haben wir einige Slab Serif-Stil Schriftarten, und das ist eine ganz andere Schriftart. Wenn Sie einen von ihnen auswählen, wie wenn ich diese wähle, dann gibt es Ihnen vier Optionen. Suchen Sie das ähnliche, Sie wollen die gleiche Ähnlichkeit in zwei Schriftarten verwenden oder Sie wollen den Kontrast zu bekommen, die Vergangenheit zu erkunden, oder Sie wollen mit den historischen Daten dieser Schriftart gehen wie die Schriftart im Jahr 1800 war und die in 1900 oder etwas war wie diese. Außerdem können Sie sich auf die Familie verlassen. Ob Sie aus der gleichen Familie wie diese Adobe Garamond Pro auswählen möchten. Das sind nur wenige Optionen. Wenn Sie auf diese wie „Umarme das Andere“ klicken, dann gibt es Ihnen Optionen, um drei weitere auszuwählen. Sie können eine dieser drei Optionen auswählen. Wenn ich zum Beispiel dieses auswähle, schauen wir uns an, wie sie miteinander übereinstimmen. Es zeigt Kopf über Herz. Sie passen wirklich zusammen, lassen Sie uns sie auf ein Date schicken. Vielleicht nicht, weil sind zu viel gleich, sie sind beide alten Stil serif, die Chips klein bleiben. So trainiert es Sie mit dem Typenabgleich. Du gehst zurück und versuchst, sie wieder zu kombinieren, wie hier drüben. Dies ist ein sehr cooles Spiel, Sie können es immer wieder spielen und trainieren Sie Ihr Auge. Zum Beispiel, wenn Sie dieses wählen und ich werde die andere umarmen, es ist sehr abgerundet, es ist sehr abgerundet, so dass wir mit Futura gehen, die sehr scharfe, kantige Schrift ist. Schicken wir sie zu einem Date, sehen, wie es passiert. - Ja. Sie haben ein sehr erfolgreiches Spiel gemacht. Mal sehen, wie gut du hier drüben tun kannst. Dann haben wir noch ein paar Seiten. Das hier ist sehr gut, Type Genius. Sie wählen eine Schriftart wie diese, und die Ansicht passt, und es wird Ihnen eine Menge von verschiedenen Übereinstimmungen wie Adelle, FF Dagny Pro zeigen. Dies ist eine Übereinstimmung, die es für diese Schriftart gefunden hat. Sie können andere wie vielleicht Bebas Neue auswählen und Spiele ansehen und Sie werden viele wie 1, 2, 3, 4 und 5 verschiedene Kombinationen finden . Dies ist sehr gut, ein weiteres Werkzeug, um vielleicht Ihr Auge zu trainieren oder schnell ein Schriftpaar zu finden. Dann haben wir diese Website, fontpair.co. Sie können hier suchen oder Sie können Schriftarten hier auswählen. Sie können auch mit san serif, san serif Kombination oder cursive mit san serif, oder serif und sans serif gehen oder cursive mit san serif, , so etwas. Eine ist für Überschrift, die zweite ist für Textkörper. Normalerweise zeigt es Ihnen, meiste Zeit, Google Fonts. Dies sind alle Google Fonts. Es wird Ihnen auch zeigen, wo Sie diese Schriftarten herunterladen können. Dann haben wir noch wenige andere Websites für Typ-Inspiration. Dieser ist create typewolf.com, und es wird Ihnen zeigen, dass neue Designs und Typografie Meister und ihre Meisterwerke und zusammen mit ihren Schriften erstellen . Sie können unten sehen, sie haben drei Schriftarten auf dieser Website verwendet. Wenn Sie darauf klicken, können Sie die Details hier sehen, wie diese. Unten und oben, wenn Sie auf diese Schriftarten klicken, können Sie zu dieser Schriftart Details gehen und wo sie verwendet wurde. Außerdem können Sie diese Schriftart herunterladen oder vielleicht kaufen Sie sie. Dann gibt es noch ein typ.io, es zeigt Ihnen Inspirationen von verschiedenen Schriftarten, auch die hier verwendeten Schriftarten. Auch die Tags, was bedeutet, dass, zu welcher Kategorie es gehört. Dann die Website Link, wenn Sie hier rüber gehen wollen, können Sie Ihr Selbst überprüfen. Dies sind einige Tools, die ich mehr finden könnte und ich werde eine PDF-Datei oder vielleicht eine andere Datei in die Ressourcen einfügen , um es herunterzuladen und selbst zu überzeugen. Üben Sie weiter und verbessern Sie Ihre Schriftpaarungsfähigkeiten. Ich werde euch in den nächsten Lektionen viele Herausforderungen geben, also lasst uns sehen, wie ihr euch verbessern könnt und wie viel ihr euch bereits verbessert habt. Fahren wir mit der nächsten Lektion fort. 37. Übungen für das Dribbble: In dieser Übung werden wir etwas Ähnliches wie diese erstellen. Zuerst zeige ich Ihnen die Ressourcen, die wir verwenden werden , und die Schriftarten, die wir verwenden werden. Lassen Sie mich Ihnen die Ressourcen zeigen. Für das Hintergrundbild habe ich diese pixabay.com verwendet. Sie können hier sehen, iPad-Tablet. Sie können hier suchen, iPad-Tablet und ich denke, dieses Bild wird erscheinen. Für die Schriftarten verwende ich drei Schriftarten. Einer ist Bitter von Google Fonts, dieser. Sie können hier drüben suchen. Dann haben wir Aller Schriftart, die eine freie Schriftart von Font Squirrel ist. Ich mag diese Schriftart wirklich. Dann verwenden wir Aleo Schriftart nur für das Logo. So wird es nicht im Design verwendet werden, nur für das Logo. Dann habe ich für die Modulskala eigentlich keine Modulskala verwendet. Ich habe gerade 42, 16 und 18 Pixel verwendet , drei Werte. Aber eigentlich habe ich eine Skala gefunden, die mit diesem Verhältnis zusammenhängt, 16 Pixel-Basis und 1,15 Verhältnis, und Sie können die gleichen Werte erhalten, die ich 16, 18 und 42 oder 43 verwendet habe . So können Sie diese Skala verwenden. Am Ende werden wir diese Galaxy Hand Mock Up Datei verwenden, kostenlose Datei von graphicburger.com, und wir werden es in unserem Design verwenden. Sie können jedes davon verwenden, da wir derzeit keine mobile App haben, also werden wir die gleiche Vorschau hier verwenden. Lasst uns loslegen. Zuallererst werden wir einfach unsere Leinwand aufstellen. Lasst uns weitermachen, neue Akte. Ich werde 1.920 von 1.080 Full HD auswählen. Nicht Farbe verwalten dieses Dokument, quadratische Pixel, und wir werden auf „OK“ klicken, so. Dann werden wir über dieses Bild in unseren Photoshop ziehen und versuchen, es so zu erweitern, dass es die gesamte Leinwand so bedeckt. Dann in der Mitte werden wir ein Rechteck erstellen. Klicken Sie hier einmal, und die Breite des Rechtecks sollte 1.360 mal 784 betragen. Also ist 784 grundsätzlich durch 16 Pixel teilbar, also betrachte ich diese Größe in der Höhe. Lassen Sie uns das schaffen. Lasst uns seine Grenze verstecken. Wählen Sie hier eine gräuliche Farbe aus, und wir werden sie in der Mitte bewegen, so. Nun, der erste Schritt ist, dass wir einige Hilfslinien, Spalten und einige Dachrinnen und all das Zeug um diese Ebene erstellen . Der beste Weg in dieser Situation ist, dass ich ein Plug-in namens GuideGuide verwenden werde. Zuerst werde ich eine Auswahl treffen, klicken Sie auf diese Ebene, und unser Rand ist 0, 0, 0 und 0, 12 Spalten. Anzahl der Zeilen, ich werde es in vier Abschnitte aufteilen. Hier haben wir 1, 2, 3 und 4, also vier Abschnitte. Dann haben wir keine Breite und hier ist unsere Rinne Größe 20 und lassen Sie uns die Führungen so hinzufügen. Wenn Sie dieses Plug-In nicht haben, machen Sie sich keine Sorgen, Sie müssen zuerst die Dokumentgröße erstellen . In diesem Fall erstellen Sie 1.360 und 784. Erstellen Sie einfach dieses Dokument zuerst und erstellen Sie einige Hilfslinien, wie diese, New Guide Layout, 12 Spalten, 20, und lassen Sie die Ränder um es herum so. Drücken Sie auf „OK“. Wenn Sie also dieses Plug-in nicht haben, wird Ihr erster Schritt dieser sein. Zuerst müssen Sie dieses Dokument erstellen, dann zu dieser Leinwandgröße gehen und Ihre Leinwandgröße auf 1.920 um 1.080 erweitern. Drücken Sie auf „OK“. Jetzt können Sie sehen, dass Ihre Leinwand erweitert wurde und Ihre Guides dort drüben haben. So können Sie diese Leitfäden so verwenden. Aber im Moment verwende ich dieses Plug-In. Also, nur um die Schritte zu erleichtern, verwende ich diese Methode. Lassen Sie uns ein bisschen mehr weiße Farbe, weißliche graue Farbe machen. Jetzt wurde unser modulares Gitter erstellt. Wir haben viele Spalten und vier Reihen. Wir werden all diese Zeilen verwenden, um unser Design zu erstellen. In der nächsten Lektion werden wir über diese Leinwand entwerfen. Gehen wir also zur nächsten Lektion über. 38. Hero Design Teil 1: Lassen Sie uns nun beginnen, sein Logo zuerst zu erstellen, wir werden Text Tool auswählen oder T auf der Tastatur eingeben, um dieses Werkzeug auszuwählen. Wir werden Aleo Schriftart auswählen. Ich denke, es war fett, und Größe muss 36 Punkte sein, und Farbe wird diese sein, ich denke aaafb2, drücken Sie „OK“. Klicken Sie auf eine beliebige Stelle und schreiben Sie F-A-S-T. Fast ist im Grunde der Firmenname, wir haben es uns nur vorgestellt. Da war etwas darunter, eine orangefarbene Linie, um zu betonen, dass es ein Logo ist. Es ist ein Dummy-Logo, also machen Sie sich keine Sorgen, wenn Sie sich zu viel darum kümmern und woher dieses Logo stammt. Ziehen Sie einfach eine Linie darunter. Entfernen Sie einfach diesen Strich und verwenden Sie diese Farbe orange. Diese orangefarbene Farbe, die wir hier verwendet haben, ist es ein bisschen flaches Orange, aber ein bisschen scharf wie das. Jetzt mach dir keine Sorgen um die Platzierungen. Erstellen Sie hier einfach eine Gruppe namens Logo, damit alles organisiert ist. Dies ist unser Hauptcontainer, also nennen Sie es Container. Dies ist unser Hintergrund, also mach es Hintergrund. Verwenden Sie immer Namenskonvention, die bedeutungsvoll und leicht zu verstehen ist. Andernfalls wird es am Ende ein sehr großes Chaos schaffen. Jetzt für diese Top-Navigation werden wir Schriftart verwenden, die Aller ist. Also im Grunde verwenden wir zwei Schriftarten: Aller und Bitter. Ich werde Aller regelmäßig verwenden und Schriftgröße wird 18 Punkte sein, verschieben Sie es auf 18 und Farbe wird ein bisschen dunkler grauer Farbe sein, vielleicht dieser, ich denke, es war nicht dieser, es war dieser, 333683, drücken Sie „OK“. Der erste war über uns. Warum ich nicht sehen kann, weil ich es nach oben bewegen kann, Über uns. Dann hatten wir Case Studies, Recent und Contact. Ich rate Ihnen, dass Sie eine andere Kopie verwenden. Fallstudien, jetzt sind alle diese erstellt worden. Lassen Sie uns den letzten Kontakt an das Ende bringen, wo wir ihn brauchen. Markieren Sie Ihre Zeilen und Spalten, indem Sie auf „Control Semikolon“ klicken, wählen Sie alle diese und wir werden sie so ausrichten. Dies ist im Grunde verteilen Sie es horizontal. Manchmal immer noch verteilt es es es nicht horizontal sehr schön. Sie können über uns sehen, wurde hierher bewegt. Ich muss es hier drüben sein, und dann werde ich es wieder so auswählen. Ich brauche Fallstudien, um hier drüben zu sein. Lass es uns nochmal arrangieren. Keine Sorge, wenn Recent hier drüben ist, also lassen Sie es uns so behalten. Jetzt werden wir diese drei Balken hier schaffen. Dafür werden wir dieses rechteckige Werkzeug verwenden, das unser Rechteck ist. Sie können dieses abgerundete Rechteck auch verwenden, wenn Sie möchten. Ich denke, ich habe abgerundetes Rechteck verwendet kann so sein. Es hat so etwas gräuliche Farbe. Hier drüben werden wir die Farbe auswählen, vielleicht diese, vielleicht hellere graue Farbe. Duplizieren Sie es, eins, zwei. So wie das. Gruppieren Sie sie und wir haben unsere Navigation hier drüben. Wenn du es nach oben bewegen willst, kannst du es hier rüber bewegen. Halten Sie einfach den Abstand , der 1, 2, 1, 2, 3, 4 sein wird . Wir können auch noch ein paar hinzufügen, vielleicht sechs weitere, 1, 2, 3, 4, 5, 6. Der Gesamtabstand von oben beträgt 30 Pixel. Ich bin jetzt nicht gerade, wenn man meine Grundlinie bedenkt, also bin ich im Moment frei von meiner Grundlinie. Manchmal, wenn Sie entwerfen, müssen Sie nicht zu viel über Baseline nachdenken, wenn Sie keine sehr langen Absätze oder sehr lange Texte zu bearbeiten haben oder Sie müssen für Blogs oder so etwas entwerfen. Im Moment entwerfe ich für den Header. Also verwende ich nur meine Legoblöcke, um alles zu arrangieren. Vier Reihen oder vier Abschnitte, horizontal und vertikal, ich habe 12 Spalten. Nennen wir es Menü oder Nav, Navigation. Lass es uns nach oben bewegen, damit ausrichten. Warum ich Gruppen verwende, weil ich sie leicht miteinander ausrichten kann. Dieser wurde leicht damit ausgerichtet. Außerdem können Sie darauf doppelklicken, und Sie können die Farbe der gesamten Gruppe gleichzeitig ändern. Color Overlay, und wir werden einige Farbüberlagerung hier so verwenden, sieht das gut aus, anstatt zu dunkel gräuliche Farbe. Auch wird dies Hamburger Menü genannt. Unsere Tab-Leiste ist fast fertig. Lassen Sie uns auch die Logos mit diesen ausrichten. Vielleicht brauche ich 1, 2, 3, 1, 2, 3, 4, 5, 6. Ich denke, 16 multipliziert mit 2 ist gleich 32. Also lassen Sie es vier Pixel hierher bewegen, 1, 2, 3, 1, 2. Also 32 Pixel, ich habe es von oben verschoben. Verschieben wir sie zwei Pixel unter, eins und zwei. Ein tolles Design ist im Grunde sehr berechnet. Denken Sie also nicht, dass Sie sehr kreativ sein müssen, um dies zu entwerfen. Ich denke, Sie müssen sehr analytisch sein, um das zu entwerfen. Lassen Sie uns das verstecken und sehen, was die Entfernungen zwischen unseren Elementen sind. Ich denke immer noch, dass es viel mehr Abstand zwischen About und Recent gibt. Nutzen wir unser inneres Bauchgefühl, um diese auszurichten. Ich werde es hierher schieben und das Letzte dorthin schieben. Lass es uns so bewegen. Lassen Sie uns den Inhalt zweimal hierher verschieben. Nun, es sieht perfekt aus. Sie können sehen, wie ich meinen inneren Sinn oder Bauchgefühl verwendet habe, um diese auszurichten. Verlassen Sie sich nicht immer auf diese Gitter. Im Moment verwende ich diesen Bereich für die Navigation, 1, 2, 3, 4, 5, 6 Spalten und zwei Spalten für dieses Logo. So richte ich alles auf. Ich brauche den Text hier drüben , der in Bitter sein wird. Ich werde diesen ganzen Block benutzen, 1, 2, 3, 4 Spalten. Lassen Sie uns ein paar Texte hier einfügen, die dieser war, sehen, wie Woo-Commerce und alles. Ich benutze Bitter hier drüben, und die Schriftgröße ist 43, wie ich bereits in unserer typografischen Fähigkeit erwähnt habe. Lassen Sie es uns kopieren. Ich werde Notepad verwenden, um es einzufügen, weil es den gesamten Stil einfügen wird. Ich möchte, dass du mich siehst, während du diesen Text formst. Lass es uns hier drüben kleben. Das hier ist eine gefälschte Schicht, diese war echt. Das ist unser Text. Was wir tun werden, ist, dass wir Bitter hier drüben auswählen werden. Das wird Bitter Bold sein. Ich weiß nicht, war es mutig oder so? Mal sehen. Nein, es war nicht mutig, es war regelmäßig. Jetzt 43 und ich wählte die Zeilenhöhe auf 60. Sie können hier drüben sehen. Jetzt sieht der Raum hier drüben etwas weniger aus. Ich weiß nicht, warum es hier drüben nicht passt. Lassen Sie uns das auf den nächsten erweitern. Also 1, 2, 3, 4, 5 Spalten, gerade jetzt verwenden wir hier drüben. Jetzt werde ich das auswählen und ich werde hier eine dunklere Farbe verwenden. Ich glaube, es war dieser hier. Geht es unter eine Schicht? Ich denke, es war in dieser Gruppe und ich hatte Farbüberlagerung auf diese Navigation angewendet. Also habe ich es ausgezogen. Ich werde ein bisschen bläulich-graue Farbe hier drüben verwenden. Ich finde, das sieht toll aus. Ich werde ein bisschen weniger sein. Das sieht gut aus, jetzt werde ich das verwenden. Wählen Sie diese zuerst und ich werde diese matte grau-blaue Farbe verwenden. Dieser Bereich ist fertig. Jetzt lassen Sie uns unsere Schaltfläche hier erstellen. Also für die Schaltfläche werde ich abgerundetes Rechteck verwenden, und wir werden eine gewisse Größe verwenden. Lassen Sie uns 240 von 36. Versuchen wir es, und unser Radius wird 30 sein. Nehmen wir 30 hier drüben, 30 hier drüben, 30 und 30 hier drüben und 30 hier drüben. So ist es sehr schlank. Lassen Sie uns ein bisschen mehr Höhe, ein bisschen mehr große Taste. Vielleicht können wir 16 multiplizieren mit 3 ist 48, denke ich. Ja. Ich denke, 48 ist näher. Mal sehen, was die Größe war, die ich hier benutzt habe. Control D, und die Höhe betrug 60 Pixel. Also denke ich, 64 werden in unserem Sortiment für unsere Grundlinie Höhe oder alles sein. Lass es uns hier drüben benutzen. Also werde ich 64 Pixel verwenden. Lassen Sie es jetzt etwas anderes färben. Jetzt haben wir ein Problem mit Rundheit. Ich habe es auf 32 Pixel verschoben. Jetzt ist es perfekt rund. Wir haben unseren Button erstellt. Lassen Sie uns es etwas nach unten bewegen, vielleicht in diesem Bereich, oder vielleicht, wenn wir es ausräumen müssen, können wir 1, 2, 3 und 1, 2 verwenden . Also 32 Pixel von diesem Bereich entfernt. Mal sehen, wie viel es aus dieser Gegend war. Ich glaube, es war in der Mitte dieser beiden, oben und unten. Vielleicht solltest du deinen inneren Darm hier drüben benutzen müssen, also mach dir keine Sorgen. Auch, ich denke, Sie können hier sehen, ich habe es in zwei Spalten fixiert. Also gerade jetzt ist es von dieser Spalte erweitert. Wir werden es von hier aus abschließen. Wir werden es in zwei Spalten reparieren, so. Verschieben wir es etwas mehr unter 10 Pixel und eins, zwei. Es ist jetzt 48 Pixel von oben entfernt. Also werden wir Aler hier verwenden, so 16 Pixel-Punkte, Erfahren Sie mehr. Es sieht wirklich cool aus. Lassen Sie uns seine Farbe in Weiß ändern, so. Was ist mit mir los? Für das Symbol hier drüben, das Pfeil-Symbol, Ich habe dieses Plug-in namens Font Awesome PS verwendet. Ich werde hier drüben suchen Pfeil, und es wird mir alle Pfeile in dieser Font Awesome zeigen. Das ist der Pfeil, den ich benutzt habe, weil ich ihn letztendlich an Programmierer geben werde. Das wird also eine sehr große Hilfe sein, wenn sie diesen Pfeil hier drüben benutzen können. Lassen Sie uns diesen Pfeil bewegen. Es legt einen sehr kleinen Pfeil, also verwirren Sie nicht, wo mein Pfeil ist oder er irgendwo entführt wurde. Verwenden wir jetzt Weiß und verschieben Sie die Größe nach oben. Ich werde zoomen und Control T, und drücken Sie „Shift“ und „Alt Shift Option“, und wir werden die Größe so erhöhen. Ich denke, die Größe ist fast perfekt. Jetzt haben wir unseren Button erstellt. Lassen Sie uns den Text hier rüber bringen. Im Moment machen Sie sich keine Sorgen über diese Knopffarbe. Wir werden am Ende einige letzte Schliff geben. Das ist also der Text. Ich denke, ich hätte es kopieren sollen, bevor ich diesen Kurs beginne; irgendwo so, irgendwo hier. Das ist ein bisschen Unannehmlichkeiten für Sie, aber ich denke, Sie sollten es mit mir ertragen. Jetzt können Sie hier drüben sehen, das ist der Bereich, den ich benutze. Sobald dieser Bereich hier endet, dieser Block, werde ich meinen Text hier drüben setzen. Ich werde hier Text wie dieses Control V einfügen. Das sind zwei Ebenen, lasst uns es jetzt mit diesem Grau färben. Ich denke, sie haben eine Menge Trennung aufgrund dieser Zeilenhöhe. Also habe ich die Zeilenhöhe auf 24 festgelegt, und ich denke, wir müssen diesen etwas gräulicher machen. Also habe ich diese Knopffarbe verwendet. Wenn Sie entwerfen, ist es besser und klug, dass Sie zuerst graue Farben verwenden. Versuchen Sie also, Grauschattierungen auf all Ihrem Design zu verwenden, anstatt eine beliebige Farbe zu verwenden. Sie dann am Ende eine oder zwei Farben, VerwendenSie dann am Ende eine oder zwei Farben,um alles hervorzuheben. Dies ist ein weiterer toller Tipp, um Ihnen den Einstieg zu erleichtern und ein sehr tolles Design zu kreieren. Fahren wir mit der nächsten Lektion fort, in der wir diesem Design einen letzten Schliff geben werden . 39. Hero Teil 2: Okay, jetzt ist das die letzte Sitzung. Wir werden zuerst unseren Handy-Bildschirm hierher bringen. Gehen wir zum mobilen Bildschirm, den wir heruntergeladen haben. Lasst es uns hier rüber extrahieren. Wir werden das erste benutzen. Das ist der Erste. Was ich tun werde, ist nur diesen Hintergrund zu verstecken. Sie können alles wie dieses bringen, Control G und gruppieren Sie dies, Fenster anordnen und gehen Sie zu Tile Up Vertikal und verschieben Sie es hier so. Wir werden diese 1.psd schließen. Lassen Sie uns die Fenster wieder anordnen. Konsolidieren Sie alle auf Registerkarten wie folgt. Nun, das ist sehr groß. Lass es uns mobil bleiben, verkleinern, Control T , Okay, und wir werden es so bewegen. Drücken Sie „Enter“. Jetzt wird es mir leid tun. Jetzt werde ich diese Gruppe auswählen. Wir werden unsere Shift- und Pfeiltasten benutzen, um es so zu bewegen. Nun, was ich verwenden werde, ist, dass ich 1, 2, 3, 4, 5 Spalten für dieses Telefon verwenden werde . Im Moment benutze ich fast sechs, also mach dir keine Sorgen. Es wird fast hier sein. Ich denke, die Größe ist fast perfekt. So wie das. Jetzt können Sie sehen, dass ich die Hand unten etwas ausgestreckt habe und Sie sehen, wie die Hand herauskommt. Was wir tun werden, ist, wir werden es in Smart Object konvertieren, es nach unten in den Container verschieben. Dieser weiße Hintergrund ist speziell der Container und schneidet ihn so ab. Diese Hand wurde behoben. Lassen Sie uns [unhörbar] verstecken. Alles sieht im Moment gut aus. Es gibt wenige Dinge wie wir brauchen, um das Gebiet hier zu reparieren. Was ich tun werde, ist, dass wir diese Schaltfläche auswählen, Erfahren Sie mehr Schaltflächenhintergrund, gehen Sie zu Layer-Stile Gradient Overlay. Ich werde diese Orange verwenden, um sich nicht zu vermehren, sondern normal. Das wird orange bis gelb sein. Es sollte nicht radial sein, es sollte linear sein. Ich werde 180 von links verwenden, der Winkel ist von links, also kommt diese Farbe von links. Sie können diese Methode verwenden, um was auch immer Sie möchten. Ich benutze es gerade so. Wenn Sie die Farben fixieren möchten, können Sie voran gehen und mehr Sättigung hier verwenden, wie 95 vielleicht. Auch für diese Farbe ist es vielleicht sehr leicht, lassen Sie uns es ein bisschen langweilig machen. Vielleicht 95 und Sättigung 100. Nein, ich denke, es ist sehr nah an dieser Farbe, also werde ich eine andere Farbe verwenden, vielleicht im gelben Bereich so. Ein bisschen gelber. Okay, jetzt sieht es toll aus. Grundsätzlich kombiniere ich Gelb mit orange Farbe. Sie sind sehr nah im Spektrum, so dass sie wirklich schön und lebendig aussehen. Das ist im Grunde, wie ich das erstellt habe. Verwenden wir 1, 1, 2, 3, 4, 5, 6 und 1, 2, 1, 2, 3, 4. Ich habe 24 hier drüben benutzt, also lassen Sie uns auch 24 schaffen. Also 1, 2, 1, 2, 3, 4. Also 24 von beiden Seiten. Wenn Sie möchten, können Sie Ihre eigene Phantasie und Ihr eigenes Bauchgefühl nutzen, um diese auszurichten. Wenn ich versuche, es hier vielleicht 1, 2, 3, 4 Pixel zu bewegen , sieht es gut aus. Auch dieser Pfeil, wenn Sie es nach oben verschieben wollen, oder vielleicht auf der linken Seite, vielleicht auf der rechten Seite. Es sieht jetzt besser aus. Wenn Sie etwas Schatten um diese Schaltfläche bekommen wollen, wählen Sie diese aus und ich werde hier einen diffusen Schatten verwenden, so dass. Was ich verwende, ist, dass ich 20 Prozent Deckkraft für den Schatten verwende 20 Prozent Deckkraft für und den Schatten etwas näher erstellen. Die Entfernung beträgt drei Pixel. Sie können neun oder was auch immer verwenden, wenn Sie diesen Abstand unten so verschieben möchten. Ich denke, vielleicht sechs werden gut genug sein oder vielleicht acht, es ist das Medium Ihrer Grundlinie Höhe, also 16. Nun, es sieht toll aus. Wenn Sie die Farbe subtiler verschieben möchten, können Sie so gehen. Sehr subtiler Schatten, sehr hell, sehr diffuser Schatten. Drücken Sie auf „OK“. Ich denke, wir haben diese Übung beendet. Wenn Sie jedoch das Gefühl haben, dass dieser Bereich weniger Platz hat als dieser, können Sie diese Taste etwas nach unten verschieben. Lassen Sie uns diese Achsen erstellen. Wir werden unser inneres Bauchgefühl nutzen, um dies zu verändern. Ich werde hier drüben benutzen, 1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8. Es ist fast mit diesem Bereich oder diesem Handyboden hier oben ausgerichtet. Außerdem können wir diesen Pfeil und diese Schaltfläche verschieben. Lassen Sie uns sie zu Schaltfläche gruppieren. Verschieben wir es nach unten, oder ein bisschen nach unten, 10 Pixel nach unten. Also ist das jetzt besser. Sie können hier drüben sehen, aber wenn Sie das Gefühl haben, können Sie den Knopf so nach unten bewegen, ich denke, es war besser hier drüben. Vielleicht 1, 2, 3, 4, Pixel nach unten. Öffnen Sie Ihre Phantasie, fixieren Sie nicht Ihr Denken, dass wir Baseline verwenden werden, und es wird nicht in der Grundlinie sein. Nutzen Sie einfach Ihre Phantasie. Stellen Sie einfach sicher, dass dies in diesem ganzen Bereich sein wird, und Sie können auch mit der Zeilenhöhe spielen, wenn Sie möchten. Wenn Sie möchten, können Sie mit der Linienhöhe Licht 64 oder vielleicht 68 spielen, etwas Ähnliches. Sie können hier mehr Platz nutzen und Sie können den Button ein bisschen nach unten schicken. Das ist ein Weg. Eine andere Sache ist, Sie können hier sehen, dass unsere visuelle Ausrichtung ein bisschen abgeschaltet ist. Warum? Weil diese Kanten haben und das ist rund. Wenn Sie es betrachten, können Sie sehen, dass es ein bisschen in diesem Bereich aussieht, so dass sie nicht mit dieser Linie ausgerichtet aussehen. Wie Sie das korrigieren können, können Sie diesen Absatz und diesen hier verschieben. Ich denke, es ist ein bisschen mehr. Ich werde 64 verwenden, und ich kann es auch acht Pixel nach unten verschieben. Ich habe es acht Pixel nach unten verschoben, es ist mir einfach gefallen. Ich möchte hier mehr Platz schaffen, also schiebe ich ihn nach unten. Auch, wenn Sie dieses Mobiltelefon auswählen möchten und wir werden es ein bisschen mehr so verschieben. Vielleicht bewegen Sie das Samsung nach innen. Lass es uns ein bisschen nach oben und ein bisschen nach links bewegen. Manchmal müssen Sie Ihre Noten und Führer verstecken, um zu sehen was das Design kommt und die Dinge frei bewegen. Nun, um diese beiden Probleme zu beheben, haben wir unsere beiden Textbereiche, wir werden sie so hierher schicken. Es waren 10 Pixel, also lassen Sie sie zurück 1, 2, 3, 4, 5. Ich denke, fünf Pixel oder vielleicht vier Pixel werden mehr als genug sein, um sie in Ihrer visuellen Ausrichtung zeigen zu lassen. Dies wird im Grunde als visuelle Ausrichtung bezeichnet, obwohl sie mathematisch ausgerichtet sind, aber visuell für unsere Augen sehen sie nicht sehr ausgerichtet aus. Außerdem denke ich, dass ich hier drüben ein bisschen normale Schriftart verwendet habe, also lasst uns es auf reguläre verschieben. Wenn Sie fett verwenden möchten, ist es Ihre Wahl. Ich denke, das ist eine großartige Übung. Ich habe viele meiner ganz besonderen Design-Tipps oder geheime Tipps mit Ihnen geteilt, wie ich entwerfe, wie man Noten verbirgt. Manchmal müssen Sie Ihr Design von weit weg sehen. Verkleinern Sie, und sehen Sie, wie es aussieht. Sie können, dass dieser Text zu viel auseinander schaut. Vielleicht muss ich seine Zeilenhöhe zurück auf 60 ändern. Jetzt ist es besser. Vielleicht kann ich es runterziehen. Im Moment können Sie sehen, dass zwischen diesem orangefarbenen Knopf und diesem Text viel Abstand besteht. Ich kann es hier runterschieben, oder vielleicht kann ich den Knopf etwas nach oben bewegen. Das ist alles deine Wahl. So wie das. Ich denke, jetzt sieht es besser aus. Das sieht aus wie ein Block, dieser ist kontinuierlich. Das ist getrennt. So erstellen wir Designs, die näher an der Dribble-Ebene sind. Üben Sie weiter, verlieren Sie nicht Ihren Fokus. Ich denke, dieser hat ein bisschen verschwommen, weil ich diese andere Technik benutzt habe. Ich denke, das nächste Mal, wenn du es hierher schieben willst, siehst du, dass es hier klarer ist. Verwenden Sie dies nicht, ziehen Sie die gesamten Ebenen, sondern kopieren Sie und fügen Sie sie hier ein. Lassen Sie mich es Ihnen zeigen. Ich denke, es ist besser, wenn ich es dir so zeige. Verstecken Sie dies, Control A, Control Shift C oder Copy Merge grundsätzlich. Das ist jetzt unser Design, und lass es uns hier drüben einfügen. Halten Sie F5, konvertieren Sie es in Smart Object. Lets verstecken die erste, die verschwommen ist. Lass es uns hier rüber bewegen. Ihr Design sollte perfekt sein, also müssen Sie es so bewegen. Das ist die Verschiebung mit dem Container. Du siehst auch, dass ich es fast in der Mitte mit diesem Bereich ausrichte. Mal sehen, wo unsere Hand gerade ist. Lass es uns ein bisschen unten so bewegen. Nun, ich denke, es ist perfekt ausgewogen. Wenn Sie etwas hinzufügen möchten oder versuchen, etwas Ähnliches zu erstellen, können Sie jetzt sehen, dass es nicht von Bereichen hier oben verschwommen ist. So erstellen Sie ein sehr cooles Design, ein Design näher am Dribble-Level-Design. Nun für diese vier Auswahl, das ist das Hauptthema hier drüben. Jetzt können Sie sehen, ich habe diese Beta-Schriftart ausgewählt, die ein bisschen ist, Sie können kurvig sehen und haben sehr Platten. Es zeigt eine solide Form. Wir haben eine sehr solide Form und sehr innovativ wie wir haben eine sehr gute Kurven, kurvige Oberflächen. Es sieht sehr modern, solide und sehr einstellbar und vielleicht flexible Unternehmen. Deshalb habe ich dieses benutzt, ich habe versucht, Aleo zu verwenden, ich denke, vor A-L-E-O denke ich, ja. Ich habe auch versucht, Aleo hier zu benutzen. Wenn Sie verschieben möchten, können Sie sehen, wie die gesamte Nachricht gerade nach oben verschoben wurde. Sie können jetzt sehen, es sieht nicht sehr solide oder mutige Firma aus. Wenn Sie versuchen, regelmäßig zu verwenden, können Sie hier den Effekt sehen. Wenn ich auf die Schriftart zurückspringe, die ich ausgewählt habe, hat die Beta, die Sie sehen können, mehr Gewicht und mehr Wert. So habe ich für diese Übung eher die Beta als Aleo ausgewählt. Sie können auch sehen, diese Aleo Schriftart hat sehr abgerundete Oberfläche, ist gut abgerundete Ecken, und es ist sehr lesbar. Ich habe diese Schriftart ausprobiert und ich denke, sie sieht perfekt aus. Lassen Sie uns das letzte ein bisschen hierher bewegen. Ich sehe den Raum ein bisschen abseits zwischen diesen beiden Elementen. Lassen Sie uns speichern Übung ultimative 1. Ich denke, Sie haben diese Lektion genossen. Ich werde eine Menge solcher Übungen erstellen. Bleiben Sie dran und beobachten Sie die Updates. Ich werde Ihnen die Updates schicken, also achten Sie auf sie. Fahren wir mit der nächsten Lektion fort. 40. Hero Design -2nd Thema: Nun, in dieser Lektion werden wir etwas Ähnliches wie diese entwerfen. Es ist sehr elegant und sehr leistungsstark aussehende Business-Website oder Business-to-Business-Website mit vielen Lösungen für andere Unternehmen zur Verfügung gestellt. Von der letzten Lektion an werden wir unsere letzte Übung in diese umwandeln. Lassen Sie mich Ihnen zunächst zeigen, was die Schriftarten und Farben sind, die ich verwende. Sie können sehen, dass die dominante Farbe hier rot ist, und der Hintergrund ist ein bisschen strukturiert, diese Architektur. Jetzt können Sie sehen, dass das gesamte Thema geändert wurde, indem nur den Hintergrund und einige Farben und wenige Schriftarten ändern. So werden wir also unsere Design-Thinking- oder Typografie-Kombinationen kreieren und nutzen und ein Design in ein anderes völlig anderes Thema umwandeln. Berechnungen, Höhe und Breite, alles ist gleich, nur ich habe durch Schriftarten geändert, die im Grunde Topographie und wenige Bilder hier drüben, die diese Organisation widerspiegeln. So konvertiert man also ein Thema in ein anderes. Lassen Sie mich Ihnen einige der Schriftarten und Ressourcen zeigen, die ich in dieser Lektion verwende. Nun ist die Schriftart, die ich für das Logo verwende, diese ARCHIVE TYPEFAC Ich liebe es wirklich. Es ist sehr mutig, sehr dick und sehr Techno-Seite oder vielleicht kann man sagen, technologiebasiert, sehr abgerundet und gerade. Dann haben wir diese Clear Sans. Es ist moderne Sans Serif, denke ich, und es hat einige Kurven darin. Ich verwende Clear Sans für kleineren Text. Dann ist dies eine Premium-Schriftart, die ich verwende, die Amsi Pro ist. Ich kaufte es, ich denke, vor einem Jahr zu dieser Zeit wurde es gestartet und ich denke, ich habe es für vielleicht 26 oder $30. Im Moment ist es für $300. Also werde ich Ihnen eine andere Alternative für diese eine geben, wenn Sie diese nicht haben. Hier ist eine Alternative für diese Amsi Pro. Wenn Sie diese Amsi Pro nicht haben, können Sie diese Google-Schriftart verwenden, die Muli ist. Sie können leichte Version oder extra leichte Version davon für den Text verwenden. Also werde ich Ihnen das Dokument zeigen, das wir entwerfen werden. Hier ist unser Amsi Pro, und hier ist Muli. Also zeige ich euch beide Beispiele. Sie werden nicht viel von dem Unterschied bemerken. Also, was ich tat, ist eigentlich, ich habe diese Schriftart ausgewählt, einen Teil des Textes hier drüben und ich habe Photoshop-neueste Sache verwendet, die diese Match-Schriftart ist. Wenn ich mit dieser Schriftart übereinstimme, habe ich Muli hier gefunden. Es war also sehr nah. Ich denke, es wird einige Zeit dauern, um Schriftarten anzupassen. Also geben Sie ihm etwas Zeit und wenn Sie eine ähnliche Schriftart oder meine haben, können Sie voran gehen. Sie können hier sehen, sind einige Schriftarten, die es übereinstimmt. Außerdem ging ich zu Google-Schriften, um mit meinen Augen zu sehen, welche Schriftart wird helfen, und es war dieses Muli. Also kannst du Muli hier benutzen. Es ist sehr elegant, sehr einzigartig. So können Sie Muli anstelle von Amsi Pro verwenden. Also in diesem Beispiel werde ich Amsi pro verwenden. Es hat einige Kurven und sehr schöne abgerundete Kurven um ihn herum, um den Text herum. Also liebe ich das wirklich. Also für diesen Bereich verwenden wir Clear Sans, das ist auch Clear Sans, das ist auch Clear Sans. Für dieses Logo verwenden wir Archiv und einige Farben hier drüben, ich habe sie bereits zusammengebaut. Lassen Sie uns also beginnen und sehen, was wir in dieser Entwurfssitzung einfallen können. 41. Hero – 2. Thema Teil 1: Nun, in dieser Lektion, werden wir etwas Ähnliches erstellen. Wir werden von unserem bisherigen Design beginnen. Dies ist völlig anderes Thema, es ist sehr Business-wie elegant, oder Business-Premium-Thema. Dies ist ein bisschen energisch und kreativ Thema, so gibt es nur wenige Unterschiede wie der Text, die Farben und die Schriftarten. Die Kurven der Schriftarten, Ich habe sehr verschiedene Schriftarten ausgewählt. In dieser Situation hier drüben können Sie sehen, dass sie sehr gerade sind, man kann irgendwann mutig und ein bisschen ernst sehen , wie technologiebasierte Schriften sehr ernst. Lassen Sie uns anfangen, und ändern Sie dieses Thema in dieses. Zuallererst werden wir den Hintergrund ändern, wir haben diesen Bildhintergrund. Ich habe diesen Hintergrund von irgendwo, an den ich mich nicht erinnere. Hier ist mein Hintergrund. Es war von einer freien Websites. Ich werde es ziehen und es in meinen Photoshop hier drüben so ablegen. Es ist fast perfekt fit und ich werde es einfach so bewegen. Shift und Alt, um es in der Mitte so zu machen. Du kannst hier ein paar spitzige Dinge besorgen, wenn du willst. Das zweite, was wir tun werden, ist, dass wir diesem Container etwas Deckkraft hinzufügen. Ich benutze 90 Prozent dieses Containers. Lassen Sie uns vergrößern und einige andere Änderungen vornehmen, wie das Ändern dieser Schriftarten hier drüben. Zuerst werden wir dieses Logo ändern und die Schriftart dieses Logos ändern, das Archiv war. Archive Regular ist die Schriftart und die Größe ist 36. Ich werde es in Userable ändern. Dies wird in der roten sein, also werde ich es zu dieser roten Farbe ändern, die matt rot ae5240 Farbe ist. Du kannst es etwas schärfer machen, so. Kann die Sättigung ein bisschen nach oben erhöhen. Ich benutze diese Farbe, dann entferne diese orangefarbene Linie von hier. Dann ist die zweite Sache, dass wir die Schriftarten all dieser Texte hier ändern werden, dieser Text Links oder Navigation. Ich werde Charakter auswählen und ich werde alle Links auf einmal ändern. Die Schriftart, die wir verwenden werden, ist Clear Sans Regular. Es wird 18 Pixel sein, vergessen Sie nicht über diese Zeilenhöhe, und dann werden wir einige Text hier drüben ändern, einige Tasten und einige andere Dinge hier drüben, auch dieses Bild. Die endgültige Anpassung der Feinabstimmung erfolgt im nächsten Schritt oder in der nächsten Lektion, also mach dir jetzt keine Sorgen darüber. Die Entfernung und alles, was wir werden, um sie in der nächsten Lektion anzupassen. Der Text, den wir hier einfügen werden, wird der Text sein , den ich bereits für diese Übung geschrieben habe. Ich werde das kopieren, wir bieten leistungsstarke Lösungen, kopieren und ich werde es hier einfügen. Strg+V oder Befehl+V, doppelklicken Sie zum Hervorheben und ich werde es in Amsi Pro Light ändern, und die Schriftgröße war 36, und die Zeilenhöhe ist 48. So wie das. Jetzt gehen wir zu dieser Schaltfläche, entfernen Sie den Farbverlauf, also haben wir das. Dann gehen Sie zu diesen Eigenschaften, und wir werden vier Pixel für die Rundheit verwenden. Gut zu gehen, gut auszusehen. Erfahren Sie mehr, die Schriftart ist Aler, also werde ich sie in Clear Sans ändern, die unsere Schriftart für Textkörper ist. Dann für diesen Bereich werden wir auch die Schriftart zu Clear Sans Regular ändern, und wir werden den Text auch ändern. Gehen wir zu dem Text oder Inhalt hier drüben, und wir werden das kopieren, und wir werden es hier im Photoshop einfügen. Fügen Sie es so ein. Dann werden wir dies unterstreichen, weil es ein Link ist, dies ist ein weiterer Schritt. Es wird ein Link sein, ich werde stumpfe blaue, graue Farbe verwenden. Wir verwenden hier im Grunde stumpfe Farben, das ist 376899. Auch wir werden es unterstreichen. Ich benutze dieses Textil, um es zu unterstreichen. Sie können auch Unterstreichungen verwenden, indem Sie eine Linie darunter setzen und ich denke, es ist effektiver, jetzt können Sie sehen, es ist ein wenig verschwommene Linie von Photoshop. Der bessere Weg ist, dass Sie hier ein Linien-Werkzeug verwenden und eine Linie manuell wie diese zeichnen. Im Moment ist seine Größe 10 Pixel, also werde ich seine Höhe auf ein Pixel ändern. Lassen Sie die Unterstreichung aus diesem Text entfernen, können Sie hier sehen. Ändern Sie nun die Farbe, um diese, und Sie können sehen, es sieht mehr live und genauer. Ich werde dies auswählen, bewegen Sie es ein bisschen so, Sie können sehen, dass es scharfer aussieht, und Sie können auch die Farbe dieses ändern. Dieser Text dazu, auch dafür denke ich, etwas vermasselt. Jetzt sind wir mit den meisten Änderungen fertig. Wir werden das Bild hier ändern, wenn Sie das Bild ändern möchten, oder Sie können etwas hier drüben setzen, wie vielleicht jetzt werde ich diesen Bereich hier drüben kopieren und ich werde es kopieren, kopieren zusammengeführt, und ich werde es einfügen Hier drüben. Nur um Ihnen eine Demonstration zu bekommen, ist es eine andere App, die ich entworfen habe. Ich bin nicht wirklich stolz darauf, aber es war eine sehr seltsame Arbeitslinie. So haben wir das Bild hier verändert. Eigentlich ist dieses Bild wirklich wichtig. Was auch immer Sie entwerfen, das Thema, das Sie entwerfen, sollte dieses Bild einige Farben oder Farbschema ähnlich wie dieses Thema haben. Wenn ich in Blues und Rot entwerfe, können Sie sehen, dass dies unsere Blau- und Rottöne sind. Das stimmt wirklich damit überein. Das ist der Hauptgrund, warum wir hier alles benutzen. Sie können sehen, dass dies die Übung ist, die wir entwerfen, ich denke, ich sollte diese schließen. Um Fehler zu vermeiden, habe ich das geschlossen. Wir arbeiten an diesem Bereich. In der nächsten Lektion werden wir den gesamten Abstand feinabstimmen und ändern, und ich werde Ihnen zeigen, wie ich dieses Raster verwenden werde, um diese drei Bereiche zu platzieren. Diese drei sind sehr wichtig. Auch werden wir einige Abstände um diesen und diesen Bereich verwenden. Gehen wir also zur nächsten Lektion über. 42. Hero – 2. Thema Teil 2: Nun, in dieser Lektion werden wir dieses Design fein abstimmen. Passen Sie einige Abstände und Leerzeichen an, was, können Sie sagen, ein sehr wichtiger Teil Ihres Designs ist . Grundsätzlich wird Ihr Design zu verbessern und mehr Aufmerksamkeit oder mehr Form und Form mit diesem Whitespace-Probleme bekommen . Was ich tun werde, ist zuallererst, dieser Bereich oder dieser Text, unsere Hauptüberschrift, wir werden ihn auf diese oberste Flusslinie verschieben. Diese werden im Grunde Fließlinien genannt. Diese Zeilen. Dies sind im Wesentlichen Module oder räumliche Bereiche. Sie können hier sehen, das sind nur wenige Module. Das hier ist eins. Nun, was ich tun werde, ist, dass ich es oben entlang dieser Linie ausrichte. Nun, für diesen, diesen Knopf, werde ich ihn in der Mitte dieses Moduls ausrichten. Dieser Bereich hier drüben, ich werde die Mitte drauf kriegen. Das ist wirklich hilfreich. - Warum? Denn Sie können sehen, dass dies diesen ganzen Raum einnimmt, und das nimmt diesen ganzen Raum ein. Nun, wieder, ich werde diesen Bereich wiederholen, denselben Schirmherr, und was ich tun werde , ist, dass ich das zusammen mit dieser, wieder, Flusslinie ausrichten werde. So habe ich meine Texte perfekt ausgerichtet, um einen besseren Abstand zu erzielen. Hier haben wir einen solchen Raum. Wenn wir versuchen können, es zu verbessern, können wir es vielleicht mit etwas mehr Zeilenhöhe verbessern, vielleicht 52, so etwas. Oder vielleicht können wir das auf 38 erhöhen, so etwas. Lassen Sie uns die Fließlinien und unsere Leitfäden verstecken und sehen, wie es aussieht. Vielleicht sollte das 36 sein. Achtunddreißig sah gut aus. Lassen Sie uns es auf 54 verschieben, lassen Sie uns die Linien aktivieren und sie sehen gut aus. Die Entfernungen zwischen diesen beiden sehen großartig aus. Selbst wenn Sie 48 verwenden möchten, wird es trotzdem großartig aussehen. Die ganze Distanz wird harmonisch sein. So habe ich diesen Bereich behandelt. Für diesen Bereich können Sie hier drüben sehen, wir müssen den gleichen Raum hier haben. Lassen Sie uns unsere Leitfäden aktivieren und entfernen Sie diese Anleitung hier drüben. Außerdem werde ich diesen Leitfaden an die Spitze so verschieben, und eine Anleitung werde ich hier drüben platzieren. Jetzt werden wir diesen Container auswählen, Control und klicken Sie auf oder Befehl klicken Sie darauf, und wir werden Griddify verwenden, um einen Abstand von 42 um ihn oben zu bekommen, wie dies, und auch von hier so. Ich denke, 42 sieht vielleicht zu viel aus. Versuchen wir es einfach. Nun, was wir tun werden, ist, dass wir unsere Navigation mit diesen Linien hier ausrichten werden, so. Also 42 ist der Raum, den ich oben und unten verwende, so sieht gut aus. Außerdem werde ich das Gleiche für diese benutzerbare tun. Ich werde es am Kreuz ausrichten. Jetzt können Sie sehen, wie es wirklich cool aussieht, Sie können den Raum um diesen Bereich sehen. Es ist sehr überschaubar, sehr schön. Dies ist der Vorteil von Lebensmargen rund um Ihr Design. Nun, alles scheint gut zu sein. Es gibt ein bisschen kleines Problem, das ist, man kann sehen, diese Hand ist ein bisschen transparent im Hintergrund und auch in diesem Architekturhintergrund hinter. Was hier passiert ist, ist, dass dieses Telefon in diesem Container abgeschnitten ist und der Container im Grunde eine Deckkraft von 90 Prozent hat. Es ist ein bisschen transparent, 10 Prozent Transparenz. Es nimmt die Eigenschaften dieses Containers. Was wir tun werden, ist, dass wir das so aufheben werden, und wir werden eine Maske verwenden. Befehl klicken Sie auf diesen Container, dann gehen Sie zum Telefon, und klicken Sie darauf. So sind wir fertig, wir haben dieses Design abgeschlossen. Wenn Sie Fragen haben, fragen Sie mich. Wenn Sie weitere Übungen wollen oder etwas, das Sie im Sinn haben, können Sie mir eine Nachricht schicken. Wenn etwas gut aussieht, werde ich wirklich versuchen, diesen Kurs zu aktualisieren. Ich werde diesem Kurs noch eine Übung hinzufügen und dann werde ich aufhören, weil ich fast viele Design-Tipps und Techniken im Zusammenhang mit Abständen und Grid-Nutzung vermittelt habe. Wenn Sie weitere Fragen haben, fragen Sie mich. Sag es mir Bescheid. Wenn Sie mit Problemen konfrontiert sind, können Sie mich jederzeit fragen. Bei Bedarf können Sie mit mir einen Videokonferenzanruf einrichten. Einer der Schüler hat das schon getan. Gehen wir also zur nächsten Lektion über. 43. Die Übung für Social →: In dieser Übung werden wir etwas Ähnliches entwerfen. Sie können es als Social-Media-Anzeige, als Rabattanzeige oder als Print-Anzeige bezeichnen. Sie können es sogar in Illustrator oder Photoshop oder in welchem Werkzeug Sie möchten, aber die Grundlage dieses Designs bleibt gleich. Was ich tun werde, ist, dass ich ein einziges Muster im Hintergrund verwende. Dann habe ich diesen Overlay-Hintergrund oben auf diesem Muster. Es ist ein bisschen transparent. Dann haben wir Text in drei verschiedenen Schriftarten und wenigen Farben wie diese, blassorange und diese gelbe Farbe. Zunächst einmal werde ich Ihnen alle Ressourcen zeigen, die ich in diesem Vortrag verwendet habe. Sehen wir uns die Ressourcen an und wo Sie all diese Schriftarten bekommen können , weil ich hier drei Schriftarten gemischt habe. Einer ist ein bisschen, man kann sagen, sehr breit und sehr groß wie dieses. Es ist Aileron, und daher ein bisschen, können Sie sagen, script-ish font, und dann haben wir diese abgerundete, sehr fett Schriftart Signika. Lassen Sie mich Ihnen all diese Ressourcen zeigen. Zuerst werden wir sehen, welche anderen Schriftarten ich verwende. Dies ist Google Fonts Signika Negative. Das ist die oberste, die ich benutze. Sie können hier drüben sehen, es ist sehr kurvig und sehr verspielt Natur. Dann haben wir diese Antre Schriftart, die von einem Kerl stammt, Taner Ardali, Istanbul, Türkei und es verbindet sich wirklich mit dem nächsten Brief sehr schön. Sie können hier drüben sehen. Das hier ist noch eine. Dann ist die dritte Schriftart, die wir verwenden, von TipoType Aileron, und es ist eine kostenlose Schriftart, Sie von hier herunterladen können, geben Sie 'Null' hier und in den Warenkorb und Sie können all seine Größe herunterladen. Das sind drei Schriftarten. Dann bewegen Sie sich zu den anderen Elementen. Ich habe dieses süße Splash-Typ Ding hier benutzt, diese Blumenkunst oder wie auch immer Sie es nennen können. Dann gibt es diesen Hintergrund hier drüben, dieses Muster. Ich habe sie kostenlos heruntergeladen und ich werde Ihnen eine Seite zeigen , wo Sie all diese Dinge kostenlos herunterladen können. Es ist im Grunde diese Seite. Creative Market zeigt Ihnen immer sechs kostenlose Downloads jede Woche und gibt Ihnen diese kostenlosen, genial toll aussehenden Hintergründe, Symbole, irgendwann Pinsel, Schriftarten. Das ist das Paket dieser Woche. Ich habe diese paar Wochen zurück wie dieses heruntergeladen, dieses Ditsy Floral Digital Pattern von, ich weiß nicht, von JSquarePresents, und dann habe ich dieses heruntergeladen. Ich habe sie kostenlos, so dass ich nicht empfehlen, dass Sie sie kaufen, aber Sie können abonnieren oder ein Konto auf dieser Website erstellen und Sie können kostenlose Downloads jede Woche erhalten. Vielleicht können Sie solche Dinge online auf Google finden, indem Sie suchen. Vielleicht können Sie sie frei finden, aber ich benutze diese beiden Elemente. Ditsy Floral Digitalmuster und handgezeichnete Blumen-Design-Elemente. Lasst uns loslegen. Fahren wir mit der nächsten Lektion fort, in der wir mit dieser Lektion beginnen und entwerfen werden. Fahren wir mit der nächsten Lektion fort. 44. Media Teil 1: In der letzten Lektion haben wir uns die Ressourcen dieser Entwurfsübung angesehen. Lasst uns anfangen. Ich werde eine neue Datei öffnen und die Größe wird 1.400 Breite und 900 Pixel Höhe sein. Drücken Sie „OK“ und das ist unser Kunstboard. Um diese Ebene in Hintergrund zu konvertieren, nennen Sie es einfach Hintergrund und wir gehen auf Ebene, neue und Hintergrund von Ebene. Wir können die Dinge damit ausrichten, weil es gesperrt ist. Jetzt werden wir innere Box darauf erstellen, weil wir diese und diese gelbe Ebene hatten und dann den Text im Inneren haben. Wir haben eigentlich ein und zwei Rechtecke auf diesem Hintergrund. Wir werden ein weiteres Rechteck erstellen. Klicken Sie auf das Rechteck-Werkzeug, während Sie „U“ auf Ihrer Tastatur drücken und drücken Sie einmal so und die Größe sollte 1.200 mal 725 betragen. Sie können auf Ihrer Seite anpassen, wenn Sie wollen, aber ich habe alle diese Größen vorher berechnet, so dass wir schnell einrichten können. Richten Sie sie in der Mitte aus und jetzt brauchen wir den dritten. dritte Rechteck wird innerhalb dieses Rechtecks sein, das unser gelber Hauptpfad sein wird. Es wird tatsächlich 900 mal 500 Pixel sein. Diese wurde erstellt, aber Sie können die Layer nicht sehen , da sie jetzt eine andere Farbe hat. Wir werden es in der Mitte dieses Rechtecks ausrichten. Lassen Sie uns sie entsprechend benennen. Das ist unsere transparente Rückseite. Es wird ein bisschen transparent sein, dann ist dies unsere wichtigste gelbe Grenze. So werden wir diesen Bereich entwerfen, eigentlich hatten wir dieses Rechteck als unser Gelb, es hatte einen gelben Strich. Lassen Sie uns den gelben Strich auf Ebene gehen, Ebeneneffekte, und wir gehen zu Strich, und die Farbe ist F-F-E-E-9-9, drücken Sie „OK“. Die Strichgröße beträgt sechs. Ich setze es auf der Außenseite und das ist alles, was Sie auf „OK“ klicken können, dann können Sie gehen, um zu füllen, drücken Sie Null, und hier haben wir unser gelbes Rechteck. Nun, für das Muster im Hintergrund können wir erstellen, was ist das, eine neue Ebene hier drüben, füllen Sie es mit allem, was Sie wollen. Steuerung+Alt löschen, um es zu füllen, wie folgt. Ich füllte es mit dieser Farbe. Nun, was wir tun werden, ist, dass wir ein Muster aus dieser Datei erstellen. Ich werde es in Photoshop so fallen lassen, ignorieren Sie einfach die Farben und wir werden ein Muster erstellen. Steuerung A, wählen Sie all dies, und gehen Sie zu bearbeiten, definieren Sie Muster und das ist unser Muster, lassen Sie es schließen, und auf dieser Ebene 1, die unsere Hintergrundebene war, nur eine Ebene. Wir werden diese Ebene für unser Muster verwenden, also Muster-Layer. Lassen Sie es etwas anderes färben, damit es sich nicht sehr seltsam anfühlt. Vielleicht das hier, also fühlt es sich anders an als das andere. Sie sich keine Sorgen um die Farbe, denn unser Muster wird sich auf diesem Design überlagern. Gehen Sie zum Ende und Sie werden dieses Muster sehen. Lassen Sie es uns auf 100 Prozent zurückskalieren. Deckkraft sollte voll sein und sie sieht sehr groß aus. Vielleicht können wir uns in eine Region einschnappen. Wir können seine Größe auf 50 Prozent oder 25 Prozent reduzieren, 25 Prozent sehen toll aus. Drücken Sie „OK“ und wir haben unser Muster. Lassen Sie uns die Farbe dieses in diesen Erdton ändern. Das ist ein bisschen Erdton, Sie können hier drüben sehen. Vielleicht diese Farbe oder diese. Es ist eine Mischung aus Rot und Fett. Um diesen Erdton zu bilden, können Sie diesen verwenden. Ich denke, dieser hier ist näher. Jetzt werden wir es ein bisschen transparent machen, indem wir diese Deckkraft auf 90 Prozent ändern. Sie können sehen, dass unser Hintergrund bereits abgeschlossen ist. Lassen Sie uns hier ein Muster erstellen. Mustergröße wird 500 mal 110 Pixel sein, es wird auch hier drüben ein Rechteck sein. Lassen Sie uns es über dieses Fenster bewegen, und wir werden es mit einer orangefarbenen Farbe färben, vielleicht dieser, einer schärferen Orange oder dieser Orange. Was auch immer Sie mögen, ich denke, es sieht hier nicht sehr gut aus. Vielleicht brauchen wir eine etwas schärfere Farbe. Irgendetwas wie das hier drüben. Lassen Sie uns verkleinern und sehen, wie es jetzt aussieht. Ich denke, diese orangefarbene Farbe sieht etwas seltsam aus. Das sieht besser aus. Ich werde hier eine etwas schärfere Farbe verwenden. Auch diese Farbe sieht mir etwas seltsam aus. Ich weiß nicht warum, aber es fehlt etwas. Nun, es sieht toll aus. Sie sich keine Sorgen um die letzten Details, wir können es am Ende fein abstimmen. Wir können die Farben für eine Stunde ändern, damit ich nicht will, dass du deine Zeit hier drüben verschwendest. 45. Media Teil 2: Zunächst einmal werden wir unsere Überschrift erstellen, die in Signika negativ sein wird. Wählen Sie die Schriftart aus. Sie haben die Schriftart bereits installiert, suchen Sie hier Signika. Es gibt zwei Schriftarten, Signika regulär und Signika negativ. Ich werde Signika negativ fett verwenden, und die Größe wird 170 Punkte betragen. Das ist nicht schwer und schnell Regel, keine Sorge, wo ich kam mit dieser Größe, eigentlich. Ich habe gerade experimentiert und ich fand heraus , dass dies die beste Größe ist, die der nächsten Zeile entspricht, lassen Sie mich Ihnen zeigen 35 Prozent AUS. Nun, in dieser Übung, werde ich diese Größe nicht zusammenziehen. Ich werde es nicht etwas kleiner bewegen. Lass es uns in die Mitte bewegen. Lassen Sie uns eine andere Ebene erstellen und wir werden die Schriftart Andre regelmäßig verwenden. Wir werden die Linie Sommer Überraschungverwenden die Linie Sommer Überraschung und die Größe sollte 83 Punkte sein. Jetzt können Sie sehen, dass es fast die gleiche Größe wie die Oberseite hat. Sie können sehen, die Kanten sind ein bisschen aus, es passiert wegen dieser Verfolgung, denke ich. Wir werden es auf Null setzen. Nun, sie sind tatsächlich der nächste Brief erfüllt. Das ist gut, so weit, so gut, wir werden eine andere Ebene erstellen. Das wird der Text Eile sein. Was war der Text? Eile läuft am 31. Juli ab. Wir werden hier drüben schreiben, Eile. Die dritte Schrift, die wir verwendet haben, war Aileron Regular und wir werden seine Größe auf 50 Punkte reduzieren. Sie können hier sehen, es ist fast die Passgröße hier drüben, es ist tatsächlich gleich der Größe über Sommerüberraschung. Nun, die nächste Zeile, die Sommer-Coupan-Code war, sagt einige Gutschein-Code. Ich sage Coupan-Code, also mach dir keine Sorgen. Sommer16. Es wird breit sein und wir sollten es über diesen Knopf bewegen. Ich werde jetzt eine leichtere Version dieser Schriftart verwenden. Das müssen alle Kappen sein, also werden wir diesen benutzen. Lassen Sie es uns in diesem bewegen, ich werde es in der Mitte ausrichten. Sie können diese benutzen. Ich habe benutzerdefinierte Tastenkombinationen erstellt, die ich in meinem anderen Kurs erklärt habe, wo ich viele benutzerdefinierte Tastenkombinationen für Photoshop erstellt habe. Es gibt noch eine Sache, wir müssen es hochgestellt machen. Nennen wir es hochgestellt? Ja, hochgestellt. Jetzt, nur um sicherzustellen, dass es sich mit allen Top ausrichten wird, werden wir sein Tracking erhöhen, es ist fast gleich der Spitze. Sommer-Überraschung. Warum haben wir zu sommerlichen Überraschungen hier drüben? Lassen Sie uns sie ausrichten und diesen vertikalen Abstand verwenden. Trotzdem ist es ein bisschen weg, also werden wir alles in der Mitte so bewegen. Es liegt an Ihnen, Sie können diese Nachricht näher an dieser Stelle lassen, oder Sie können sie mit dem gleichen Raum trennen. Es liegt an dir, was du willst. Sie können auch so etwas erstellen, wie ich zwei Hauptförderungsnachrichten oben und dann die Aktion unten habe. Also habe ich beide in zwei verschiedene Bereiche unterteilt. Auch wenn Sie dieses Rechteck runden möchten, können Sie zu diesem Eigenschaftenfenster gehen und etwas Rundheit erhalten. Vielleicht ist es näher an dieses Team. Es ist eigentlich Sommerüberraschung, oder Sie können sagen, Sommerverkauf. Ich werde noch eine Sache hinzufügen. Ich werde diesem Muster etwas Schlagschatten hinzufügen. Es wird näher an dieses Muster sein. So können Sie hier drüben sehen, ein bisschen Schatten herauskommen und Sie können die Deckkraft dieses Schattens erhöhen. Vielleicht ist das gut genug. Wir haben diese Übung fast beendet. Wenn Sie etwas ändern wollen, tut mir leid, ich habe die falsche Schreibweise des Sommers. Nun, es ist Sommerüberraschung und vielleicht müssen wir die Größe auf 81 Punkte verschieben, entsprechend Ihren Bedürfnissen anpassen. Noch ein kleines Detail. Ich habe das Swoosh Ding verlassen. Das ist diejenige, die ich benutzt habe. Es ist die ClipArt. Ich habe Ihnen die Ressourcen vor, also werde ich es einfach in Photoshop so ziehen. Wir werden seine Größe reduzieren. Drehen Sie es so. Ich drücke Shift, so dass es sich mit den Winkeln dreht, die ich in Photoshop angegeben habe. Wenn Sie das nicht wissen, dann sollten Sie zu diesen Einstellungen gehen und Sie sollten die Größen hier einstellen. Wir haben hier drüben, ich erinnere mich nicht, aber ich denke, es ist in diesen Einstellungen. Sie können sie hier finden. Mein Photoshop verlangsamt sich. Es sieht sehr groß aus, also werde ich es ein bisschen mehr drücken. Das sieht fast perfekt aus. Wir werden es Farbüberlagerung geben, weil wir hier keinen schwarzen Swoosh wollen. Farbüberlagerung, vielleicht können Sie dieses verwenden. Es liegt an dir. Sie können weiß oder grau oder was auch immer Sie wollen verwenden. Stellen Sie sicher, dass die Farbdeckkraft 100 Prozent beträgt. Das ist ein Control J, und ich werde es hierher bringen. Ich gehe zu Control T oder Command T auf Ihrem Mac. Ersetzen Sie also, wenn ich Kontrolle sage, ersetzen Sie es durch Befehl Flip horizontal und drücken Sie OK, und machen Sie es ein bisschen näher an diesem. Nun eine Sache, stellen Sie sicher, dass dieser Raum von dieser Linie, dieser Rand zu diesem, dieser Raum ist gleich Raum um hier herum. Dies ist eine Sache, die Sie sicherstellen müssen. Jetzt können Sie sehen, dass wir unsere Übung fast abgeschlossen haben. Vielleicht brauchen wir einen etwas größeren Knopf, weil er für mich etwas kleiner aussieht. Auch, wenn Sie wollen, können Sie sie näher oder vielleicht geräumiger machen, es liegt an Ihnen so. Vielleicht machen Sie es also etwas geräumiger. Außerdem denke ich, dass der Knopf für mich etwas kleiner aussieht , also werde ich seine Größe vergrößern. Ich denke, es ist zu viel. Vielleicht Höhe wird 120 Pixel sein, es ist gut. Nun, vielleicht muss ich es verschieben. Das sind nur die letzten Details. Sie können sie verwenden, wann immer Sie möchten, oder probieren Sie sie aus und sperren Sie sie einfach. Ich werde dieses auswählen, es ein bisschen nach oben bewegen, oder vielleicht näher dran. Also macht es Sinn. Ich werde diese beiden auch ein bisschen mehr nach oben ziehen. Lassen Sie uns also eine Gruppe all dieser Top-Elemente erstellen. Bewegen Sie sie ein bisschen nach oben. Ich denke, hier haben wir die perfekte Balance. Nun, wenn Sie etwas mehr zu diesem Design hinzufügen möchten, können Sie gehen. Dies ist nur eine Übung, um etwas Ähnliches zu erstellen, könnten Sie eine Menge von Social-Media-Anzeigen wie diese gesehen haben, so dass Sie wissen, wie Sie sie erstellen. Jetzt sehen Sie, ich sehe, dass hier drüben weniger Platz ist als dieser hier. So können Sie hier sehen, es ist ausgewogen. Wir haben mehr Platz hier drüben. Ich habe das absichtlich hinzugefügt, also werden wir es hier hinzufügen. Also machen Sie es ein bisschen größer wie dieses. So können Sie sehen, ist ein bisschen ausgeglichener Raum. Wir brauchen vielleicht mehr Inkrement in der Größe. So nutzen wir unsere eigenen Urteils- und Bauchfertigkeiten, um Dinge auszurichten und Dinge zu entwerfen. Vielleicht brauchen wir eine schärfere orangene Farbe wie diese. Das ist besser, schätze ich. Das hier ist besser. Außerdem brauchen wir mehr Erdtöne, also müssen wir uns vielleicht etwas bewegen. Vielleicht hier drüben sieht dieser gut aus. Das kommt also mit Übung. Farbsinn ist nicht einfach zu entwickeln. Auch diese Typografie Matching-Fähigkeiten sind nicht einfacher zu entwickeln. Sie können sehen, dass alle diese Schriftarten gut zusammen aussehen. Dieser ist ein bisschen ernst, oder man kann ein bisschen lesbar, lesbarer sagen, weil ich wollte, dass der Benutzer genau das liest, was es ist. Das ist sehr groß, so dass ich mit diesen Bereichen kreativ werden kann. So Sommer Überraschung, wie es in einer sehr großen Schrift verwendet wird. So ist es gut, mit der Skript-Schriftart zu gehen, so einfacher zu lesen. Stellen Sie sicher, dass Sie nicht zu viel Tracking im Brief haben. Daher sollte es immer ein Skript anstelle einer defekten Skriptschriftart füllen. Jetzt haben wir diesen inneren Inhaltsbereich. Also lasst uns sie alle zusammen machen. Auch dieser hier, bewegen Sie das hier rüber. Also lasst uns sie zusammenfassen. Noch einmal, ich drücke Shift. Das ist also unser Hauptdesign Inhalt. Ich mache das immer, weil wir das bewegen und ausrichten müssen. Ich weiß also nicht, was passiert, warum es nicht mit unserem Hintergrund ausgerichtet ist. Also lassen Sie es uns nach oben bewegen. Also haben wir eine gesperrte Schicht in dieser einen. Also entsperren Sie das einfach und wir werden es bewegen. Jetzt ist es fast perfekt, also ist es sehr näher an diesem Design. Ich glaube, ich hatte hier mehr pfirsichige Farbe. Was ist die Farbe, was ist diese Farbe? B10. So ist es mehr im oranglichen Farbton und es ist in grau-orange Mischung. So können Sie hier sehen, hier haben wir Farbschieber. Also hier haben wir ein bisschen dunklere Farbe. Ich denke, es ist nicht immer perfekt, sagen, dass kopieren Sie alles aus dem gleichen Design. Also versuche ich jedes Mal etwas anderes zu schaffen. Das sieht also ein bisschen mehr aus. Vielleicht brauche ich etwas hellere Farbe wie diese. Also haben wir diese Übung geschaffen. Wir werden eine neue Abwechslung oder eine neue Variante für diese schaffen, die, ich denke, diese war. Also werden wir es in der nächsten Lektion tun. Wir werden diese Sian, sehr Sian scharfe Farbe verwenden . Also werden wir es in der nächsten Lektion tun. Bleiben Sie also dran für solche Übungen und sammeln Sie weiter verschiedene Schriftarten, versuchen Sie, sie zu kombinieren und einige Designs mit dieser Hintergrundmuster-Technik zu erstellen. Fügen Sie einfach einen Kontext in Ihrem Design hinzu. Das sieht also aus wie ein Kleidungsmuster oder dein Hemd oder Damenhemd, so etwas. Gehen wir also zur nächsten Lektion über. Eine weitere Sache, vergessen Sie nicht, die Übungsdateien herunterladen, PSD-Dateien, Originaldateien, die ich einschließen werde. Also werde ich auch alle Links zu all diesen Design-Ressourcen wie all diese Schriftarten, die ich verwendet habe, einfügen . Gehen wir also zur nächsten Variante in der nächsten Lektion über. 46. Abschließende Dinge: Hallo, Jungs. Dies ist das gleiche Design, das wir in der letzten Lektion gemacht haben. Ich habe nur einige der feinen Anpassungen vorgenommen. Ich schätze, ich sollte sie mit dir teilen. Das erste ist, dass ich all diese Elemente in der Mitte verschoben habe. Ich reduziere die Größe dieses Textes von 50 Punkte auf 45, nur ein bisschen größer als dieser Button. Wenn du es mit dem Knopf ausrichten willst, denke ich, es ist okay, aber es fühlt sich besser für mich an wie dort. Folgen Sie auch diesem Hintergrund, es war etwas näher an diesem Bereich. Gräulich und orange. Ich bewegte es in ein bisschen mehr oberen Teil, wo es mehr pfirsichige Farbe ist. Etwas, das näher dran ist, oder vielleicht dieses. Dann das dritte, was ich getan habe, ist, dass ich einen Effekt editiere, Sie können hier sehen, es ist orange und hier ist es eine rötliche pfirsichige Farbe. Sie sind wie pfirsichiges Farbschema insgesamt. Rötliche und orangefarbene Farben, wenn Sie jemals einen pfirsichigen gesehen haben, sind alle diese Farben aus dem pfirsichigen, ich denke, gelb, diese Farbe und diese Knopffarbe. Was ich getan habe, ist, dass ich einen inneren Schatten mit dieser Farbe hinzugefügt habe, e55f50. Was ich getan habe, ist, dass ich den Schieberegler ein wenig nach unten bewegt habe, und das ist alles, was ich getan habe. Ich benutze die Einstellungen-Distanz 81, weil ich einen sehr guten Bereich hier drüben brauche. Sie können dies auch mit Verlaufsüberlagerung tun. Es gibt viele Dinge, die Sie tun können, um den gleichen Stil anzuwenden. Die Größe ist 128. Das ist es, was ich getan habe. Außerdem habe ich die Größe dieses geändert, ich denke, ein bisschen 81 Punkte. Ich habe es von 83 auf 81 Punkte verschoben. Das ist alles, was ich glaube. Ich denke, es sieht perfekt aus. Ich habe Ihnen das gezeigt, weil ich glaube, dass Design progressiv ist. Sie versuchen, es immer wieder zu verbessern. Wenn Sie etwas entwerfen und es nicht sehr gut aussieht, stehen Sie von Ihrem Sitz auf und kommen Sie vielleicht später nach 30 Minuten wieder und beginnen Sie Ihr Design erneut. Ich habe hier ein paar Dinge hinzugefügt. Ich werde diese PSD mit Ihnen teilen, vergessen Sie nicht, diese PSD herunterladen. Hier geht es um dieses Design, in der nächsten Lektion werden wir die alternative Version dieses Designs entwerfen. Nur werden wir einige Farben ändern. Das ist alles, das gesamte Design wird gleich bleiben. Fahren wir mit der nächsten Lektion fort. 47. Juicy – Vorkenntnisse: In dieser Reihe von Lektionen, werden wir diese fantastisch aussehen frisch und saftig, gesunde Mahlzeit Rezept Header erstellen . Ich werde viele Variationen machen, also lassen Sie mich Ihnen die Variationen zeigen. Sie können sehen, dass das der ist, den ich Ihnen gezeigt habe. Dann haben wir das mit dem Oval Button und verschiedenen Schriftarten hier drüben. Dann haben wir die dritte, die mit einer anderen Schriftart wie dieser von Venessa Malik oder so etwas geteilt ist. Dies sind im Grunde vier verschiedene Schriften kombiniert und ich bin mir immer noch nicht sicher über die vierte, aber ich bin sehr viel - wie diese Kombination, diese drei Kombination. Man ist sehr fett und man kann sagen, quetschigen Typ, abgerundete Ecke und spielerisch und lustig, lustig aussehende Schrift, diese. Dies sieht gut aus für dieses Thema, das frisch und saftig ist. Also erinnere dich an die Übung, die ich dir erzählt habe, ich habe eine frühere Übungen, wo wir diese thematische Schriftauswahl hatten. Diese Schriftauswahl basiert auf diesem Thema. Dann haben wir gesunde Mahlzeiten, also ist es nur um offener und maßgeblicher zu sein, dass dies wirklich gesunde Mahlzeiten sind. Dann haben wir diese Skript-Schriftart hier für Browse Recepie verwendet. Vielleicht ist es für Intimität oder vielleicht Nähe zu Ihrem Kunden oder so etwas. So sieht es im Grunde wirklich schön aus mit diesen drei Kombinationen. Ich werde Ihnen in dieser Lektion zeigen, dass, wo die Ressourcen, die ich für diese Übung bekommen? All das sind freie Schriftarten, ich werde Ihnen diese drei zeigen. Okay, eine Schriftart ist dieses Blenda-Skript. Ich habe diese Schriftart verwendet, dies ist eine freie Schriftart und Sie können hier sehen, Lizenz; Kostenlos für den persönlichen und kommerziellen Gebrauch. Sie können diese Schriftart herunterladen und installieren. Dann haben wir diese Damion Schriftart, also auch herunterladen und installieren Sie diese. Ich werde die Links für diese Ressourcen teilen, also laden Sie sie herunter. Dieses ist Gilroy, Es ist eine Premium-Schriftart, aber sie haben zwei freie Schriftarten zusammen mit ihm. Wenn Sie nach unten blättern, können Sie sehen, dass dieser Null ist, Gilroy Light und es gab eine weitere, Gilroy Extra Bold, das ist auch Null. Also laden Sie diese beiden Schriftarten herunter oder Sie können zu Font Squirrel gehen und diese Gilroy herunterladen. Es hat auch die gleichen zwei Schriftarten. Dann haben wir dieses Bild. Ich habe es von picjumbo.com und das ist der Link, frische Orangen auf Kleinbauern Markt. Ich denke, eine weitere Schriftart war dieses Dutzend Free Font und ich habe es von diesem freedesignresources.net heruntergeladen. So können Sie hier persönlich und kommerziell sehen, es ist kostenlos und entworfen von Kenny LKC. Laden Sie also alle diese Ressourcen herunter, bevor Sie mit dieser Übung beginnen. Lassen Sie uns voran und graben in die Gestaltung dieser fantastisch aussehenden Übung. 48. Juicy Teil 1: Lassen Sie uns jetzt beginnen und erstellen Sie diese fantastisch aussehende, frische und saftige Übung. Wir werden mit einer neuen Datei beginnen. Die Größe beträgt 1920 x 1080, und Hintergrundinhalt, nicht Farbe verwalten dieses Dokument, klicken Sie auf „OK“. Zuerst werden wir unser Bild hierher ziehen, also ziehen wir das Bild. Wir ziehen das Bild in den Photoshop und lassen Sie es fallen. Es wird in ein intelligentes Objekt umgewandelt und wir werden es so skalieren. Skalieren Sie es nicht zu viel, es ist schon an den Grenzen. Wir werden die Eingabetaste drücken, und das ist unsere Zeichenfläche oder Haupthintergrund, die jetzt fertig ist. Wählen Sie diese Ebene und wir werden es in Hintergrundebene konvertieren. Dies ist ein Fehler mit diesem Photoshop hier, also ist es mein Hintergrund verschwunden. Das ist im Grunde die Zeichenfläche. Ich habe die Zeichenfläche gelöscht, indem ich sie ausgewählt habe, und mein Hintergrund ist zurück. Jetzt werden wir einige Schriftarten darauf werfen, und zuerst werden wir dieses Dutzend Schriftart auswählen, die unsere Hauptschriftart war. Die Größe wird 96 Punkte betragen. Ich benutze fast diese Skala, so Größe wird diese, frisch & saftig sein. Steuerung A, Kontrolle Alt H, um es zu zentralisieren. Dies sind meine benutzerdefinierten Verknüpfungen. Wenn Sie nicht wissen, wie Sie sie erstellen, sollten Sie sich meinen anderen Kurs ansehen, UI-Design in Photoshop. Dieser wird erstellt, jetzt als nächstes werden wir dieses abgerundete Rechteck oder vielleicht dieses Rechteck erstellen. Erschaffe es so. Verwenden Sie einfach Ihre Kopfbreite für die Proportionen, wie diese. Wir werden es weiß färben, und lassen Sie uns diese frisch & saftig nach oben bewegen. Zuerst werden wir den Eckenradius ändern. Wechseln Sie zu diesem Eigenschaftenfenster für dieses Rechteck, und diese Ecke wird 60 sein, und entsperren Sie sie. Wir werden verschiedene Einstellungen für sie wählen, wie das, 60, 60, 0 und 0. Jetzt lass mich es einfach etwas anderes färben, damit du weißt, dass es da drüben ist. Nun, was wir tun werden, ist, dass wir das zuerst in diesem Rechteck platzieren, so. Es sieht ein bisschen nach oben, also benutze dein visuelles Zentrum. Es gibt zwei Zentren in einer Neugestaltung. Eine wird maschinell berechnet und eine wird von Ihren Augen berechnet. Ich schiebe es jetzt nach unten. Meine Augen denken, dass es in der Mitte ist. Jetzt ist es fast in der Mitte. Das ist fast perfekt. Nun, was wir tun werden, ist wir gehen, um Control klicken Sie auf diese Ebene Auswahl, diese Schriftart auszuwählen. Dann werden wir dieses Rechteck auswählen, das Rechteck darunter, und invertieren Sie die Auswahl, Control Shift I, und klicken Sie dann auf diese Maske. Sie können hier sehen, es hat eine Maske erstellt. Dies ist diese Ebene, die unsere für die Auswahl ist fast transparent. Wenn du es nicht verstehst, werde ich diesen Schritt noch einmal wiederholen. Der erste Schritt war, dass wir diese Ebene auswählen. Steuerung klicken Sie auf diese, um diese Auswahl auszuwählen, dann invertieren Sie die Auswahl, Control Shift I. Wir haben alles andere ausgewählt, diesen Bereich innerhalb dieses Textes. Umgekehrte Auswahl, klicken Sie dann auf diese Ebene, und klicken Sie darauf. Jetzt können Sie diese Schriftart ausblenden und Sie können sehen, dass diese Ebene geleert wurde. Noch eine Sache, die ich vergessen habe, wir werden hier ein modulares Gitter benutzen. Wir werden all diesen Hintergrund in sieben Divisionen aufteilen. Warum sieben? Da unser Design im Grunde zentralisiert ist, ist alles zentralisiert, also verwenden wir im Grunde zwei Module oben für den Raum und zwei unten und drei in diesem Bereich. Drei Module hier nach oben, lassen Sie uns es Ihnen zeigen, damit Sie es besser verstehen können. Mit Griddify werde ich es so in diese Richtung damit teilen. Ich gehe zu Control Colon, um meine Note zu zeigen. Wenn Sie Griddify nicht haben, können Sie diese Ansicht hier und ein neues Führungslayout verwenden . Lassen Sie mich Ihnen einen anderen Weg zeigen. Lassen Sie uns diese klarstellen, klare Canvas-Richtlinien, und wir werden ein neues Guide-Layout erstellen. In diesem Beispiel benötigen wir keine Spalten, da alles zentralisiert ist. Was wir tun werden, ist, dass wir Reihen brauchen, sieben Reihen ohne Dachrinne. So wie das. Auch wenn Sie die Ränder entfernen möchten, ist es besser. Sieben Zeilen, können Sie Führungslinienlayout so erstellen. Hier haben wir dieses Rechteck fast fertig. Lassen Sie es nach unten auf diese Orangen so bewegen. Ich denke, es ist besser. Jetzt werden wir die zweite Schriftart auswählen, die unser Gilroy sein wird. Es ist im Grunde eine geometrische Schrift. Ich werde Gilroy hier drüben benutzen, und wir werden GESUNDE Mahlzeiten in alle Kappen schreiben. Wenn Sie sich erinnern, haben wir alle Kappen für Überschriften verwendet, also werden wir es verwenden es weiß färben. Wir müssen es etwas abnehmen, vielleicht 60. Bewegen Sie es hier in der Mitte, Control A machen wir es in der Mitte, so. Noch eine Sache, wir werden ein paar Tracking benutzen, um es zu öffnen, so. Ich denke, 75 werden gut sein, so. Es sieht ein bisschen klein für mich aus, vielleicht denke ich, wir sollten 72 benutzen. Zweiundsiebzig ist gut, 72 und 96, das sind zwei Schriftgrößen, die wir gerade verwenden. Ich werde es ein bisschen nach unten bewegen, so. Die nächste Sache ist, dass wir hier drüben einen Knopf erstellen werden. Für die Schaltfläche werden wir abgerundetes Rechteck verwenden, oder vielleicht nur das Rechteck, reguläres Rechteck, und wir werden eine Schaltfläche wie diese erstellen. Jetzt vergessen Sie einfach die Farbe jetzt, die wir hier verwenden, Strich von vier Pixeln. Es sollte weiß sein, und es sollte zu 100 Prozent undurchsichtig sein. Wir werden es draußen benutzen. Nun, eine Sache werden wir diese Füllung auf Null verwenden. Ich werde dir jetzt noch einen Trick zeigen. Jetzt werden wir die dritte Schriftart für diese Schriftart hinzufügen, die Damion war, schätze ich. Ja, es war Damion. Diese hier, Damion regelmäßig, und wir werden hier schreiben suchen Rezept. Ich habe gerade ein S hier drüben hinzugefügt. Jetzt werden wir es auf 36. Nein, ich denke, 36 ist zu klein. 48, 48 ist zu groß, dann werden wir einen Mittelweg finden, vielleicht 42. Mach dir keine Sorgen um die Waage. Im Moment nutzen wir unsere eigene Phantasie oder was auch immer Sie sehen können. Nun, wir haben fast unseren Knopf hier drüben. Fügen Sie nun einen Pfeil am unteren Rand hinzu. Noch eine Sache, die Sie sehen können, dass unser Text nicht sichtbar ist. Nun, es ist ein einfacher Trick. Da unser Hintergrund gefüllt ist, haben wir die Füllung auf Null Prozent verschoben, oder wir verwenden hier etwas füllen. Sie können nicht bemerken, dass diese Füllung gerade jetzt, aber es ist da. Wir haben den Hintergrund ein wenig unter diesem Text verdunkelt und Sie können sehen, dass es großartig aussieht. Das ist der Trick, den ich hier drüben benutzt habe. Sie werden es vielleicht nicht bemerken, aber Sie können hier drüben sehen, fünf Prozent füllen. Im Moment verwende ich 12 Prozent Füllung. Du kannst es dort einrichten, wo es dir gefällt, also mag ich es hier drüben. Jetzt werden wir hier einen Pfeil hinzufügen. Dafür werden wir unsere tolle Schriftart verwenden. PS diese Erweiterung. Wenn Sie nicht wissen, wie es zu installieren, sollten Sie gehen und so für sie, Schriftart genial PS Erweiterung und installieren Sie es. Ich habe über all diese Erweiterungen und geheime Erweiterungen in meinem anderen Kurs gesprochen , der UI-Design für Photoshop ist. Also, was wir tun werden, ist Pfeil, also müssen wir vielleicht aufschreiben. Das ist, was wir brauchen. Lasst es uns ein bisschen größer machen. Vielleicht hier, bewegen Sie es nach unten, kontrollieren Sie einen Zug, es in der Mitte. Auch müssen wir das koppeln. Das ist ein Knopf. Also benennen Sie es Taste. Wir werden Farbüberlagerung für diesen Pfeil verwenden, wir werden weiße Farbe verwenden. Ich werde alles in der gleichen Mitte ausrichten. Jetzt können Sie sehen, wir haben bereits eine Menge Güte geschaffen. Nun, es gibt noch ein paar zusätzliche Dinge, die ich getan habe, oder du kannst. Du kannst es jetzt nicht sehen, lass mich es dir zeigen. Wenn man sich diese gesunden Mahlzeiten anschaut, gibt es einen roten Schatten um ihn herum. Dann können Sie in diesen saftigen Mahlzeiten sehen, dass es hier in diesen Bereichen etwas Schatten gibt. Also diese kleinen Berührungen oder Details wirklich beeinflussen oder erzeugen eine sehr große Wirkung auf den Benutzer. Sie fühlen es vielleicht nicht sehr sofort, aber es ist da. Also für diese Mahlzeiten, werde ich einige Schlagschatten verwenden und die Farbe wird dieses Lesen bf 4.000 sein. Sie können auch die Farbe von hier, hier, oder vielleicht hier drüben, es liegt an Ihnen. So wie das. Sie können eine Farbe aus dem Bild wie folgt abtasten. Ich habe es jetzt von hier aus probiert. Nun, so können Sie 30 Prozent multiplizieren, den Abstand auf mindestens zwei und drei Pixel beibehalten. Nicht zu viel, aber es ist nach Ihren Wünschen. Wenn Sie es erhöhen möchten, können Sie es erhöhen. Das ist also, wie wir verwendet haben. Wenn Sie einen weiteren Schatten hinzufügen möchten, fügen wir einen weiteren Schatten hinzu. Nun, was wir tun werden, ist, dass wir hier einen dunklen Schatten hinzufügen und wir werden ihn so verbreiten. So wie das. Was wir tun, ist eigentlich, lassen Sie mich Ihnen den Effekt zeigen. Wenn ich versucht habe, das zu verbergen, können Sie sehen, wie der Effekt zurückgeht. Eigentlich machen wir es hier noch deutlicher. Wenn ich also einen Schlagschatten oder einen sehr weit verbreiteten Schlagschatten um ihn herum hinzufüge, wirst du nicht das Gefühl haben, dass Schlagschatten da ist, aber es wird deine Texte klarer und leichter zu lesen erscheinen lassen. Sie können sehen, ob ich versuche, die Multiplikation dieses Effekts zu erhöhen, Sie können es so fühlen. Auch ich werde dies ein bisschen erhöhen. Es sieht wirklich toll aus. Vier. Lassen Sie uns es auf die Normalität verschieben, anstatt zu multiplizieren. Drücken Sie OK. Jetzt sieht es toll aus und ich denke, wir haben es fast abgeschlossen, wir brauchen nur noch einen hier drüben. Also auf dieser Schicht, das ist unsere wichtigste frische und saftige Schicht, frische saftige Schicht und wir werden einen anderen Schatten hier hinzufügen, Schlagschatten so. Es wird nicht dieses sein, es wird dieser rote sein. Nun, was wir tun werden, ist, dass wir es so klein halten werden. Abstand wäre ein Pixel oder zwei Pixel, etwas näher daran. Machen Sie es 35 Pixel, und machen Sie es zwei und diese eine drei. So verwende ich diesen Effekt. Vielleicht kannst du diesen Effekt mehr aufhellen, ihn so leichter machen. 15, nein, 15 ist zum Licht. 25 ist gut. Wenn Sie es versuchen möchten, können Sie so etwas versuchen. Sie können sehen, wie dieser Effekt ausgeht. Halten Sie diese Größe also auf ein Minimum. Vielleicht sind zwei Pixel gut. Auch diese Entfernung, können Sie sehen, wie es den gesamten Bereich über und ab bewegt. Halten Sie es auch zu minimal, ich denke, zwei Pixel sind mehr als genug, Sie können nicht darüber hinausgehen, weil es hier unten mehr verzerrte Bereiche zeigen wird . Das ist also gut. Ich denke, wir haben unsere Übung fast beendet. In der nächsten Übung werden wir einige Variationen machen und auch wir werden es für die feinen Details wieder anbringen. Gehen wir also zur nächsten Lektion über. 49. Juicy Teil 2: In dieser Vorlesung werden wir einige letzte Retusche machen , die wirklich wichtig sind, um die reale Form Ihres Designs zu erhalten. Wir haben fast alles abgeschlossen, aber es schaut wegen einiger Probleme aus. Ich werde das Raster erstellen, ich weiß nicht, warum es mein Raster nicht zeigt. Wo ist mein Gitter? Entschuldigung. Ich will nur meine Rasterlinien hier drüben. Jetzt können Sie den Abstand oben sehen, das ist ein Problem mit vielen neuen Designern, es ist mehr als der Abstand unten. Das ist es, was unser Design ein bisschen macht, man kann sagen: „Nicht in Harmonie.“ Wir werden unseren Kopf in diesem Spiel benutzen. Nun, dieser Pfeil, ich werde ihn um 1, 2, 3, 4, okay, 24 Pixel nach unten verschieben . Wir werden diesen Knopf hier bleiben lassen, wo immer er ist. Wir werden diese obersten beiden Schichten oben ein bisschen nach oben verschieben. Vielleicht so. Nun, das nächste, was Sie tun werden, ist, weiterhin Ihre Gitterlinien zu verstecken und anzuzeigen und zu sehen, ob dieses Design ausgewogen aussieht oder nicht. Wenn Sie es nach unten verschieben möchten oder vielleicht müssen Sie es nach oben verschieben, so funktioniert es. Du wirst es nach oben und unten bewegen. Sie können auch so etwas tun. Nimm nur die Hälfte der Briefe und den Rest der Briefe so. Du kannst diesen Schatten verstecken, einfach den roten Schatten behalten. Auch manchmal färben die Leute diese, andere Farbe Hälfte, und die andere ist in eine andere Farbe gefärbt. Auch können Sie hier sehen, dass wir ein Problem haben wie wir ein anderes Element haben, das in diesem kommt. Was wir tun werden, ist, dass wir unsere Ebene, diese Hintergrundebene duplizieren , und wir werden sie anpassen. Wir werden es nach oben bringen. Wir haben ein Problem hier drüben, weil das Originalbild jetzt verloren geht. Lass es uns ein bisschen größer machen, näher und größer. Bewegen Sie es so nach oben, und wir haben unsere frischen und saftigen Orangen wieder im Rahmen. Nun, lassen Sie uns diese gesunden Mahlzeiten ein bisschen hier rüber bringen, ich denke, es sieht gut aus. Vielleicht denke ich, dass wir diesen Knopf und diesen Pfeil etwas nach oben bewegen können, vielleicht 1, 2, 3, 4, 5 , 6, 60 Pixel unten. Auch das sollten wir messen. Also 1,2, 1,2,3,4, wir haben 24 und 60 Pixel hier drüben. Trotzdem denke ich, es sieht etwas fehlt aus. Also werde ich es ein bisschen so zurückschieben, und wir werden es wieder mehr nach oben bewegen, ein bisschen mehr nach oben. Ja, ich denke, es sieht jetzt besser aus. Wenn Sie es schlanker machen wollen, weil dieser Knopf mehr Platz in Anspruch nimmt. Also werden wir es ein bisschen schlank machen. Gehen Sie zu dieser Höhe und machen Sie es 85 Pixel, so etwas. Es sieht besser aus. Wir brauchen mehr Fokus und mehr Energie hier drüben in diesem Bereich, nicht auf diesen Knopf, also mach es schlank. Außerdem werde ich sehen, ob dieser Text mit dieser Schaltfläche aufgereiht ist. Nun, ich denke, wir haben diese Übung fast abgeschlossen. Vielleicht müssen wir diesen Hintergrund ein bisschen nach oben verschieben. Machen Sie es so größer. Ich denke, wir haben diese Übung gemacht, wir haben den endgültigen Effekt fast abgeschlossen. Auch, wenn Sie es größer machen wollen, können Sie es größer machen. Es hat also mehr Wirkung wie diese. Eine andere Sache, die Sie tun können, können Sie diese gesunde Mahlzeiten an der Spitze bewegen und Sie können diesen Pfeil ein wenig oben so bewegen. Vielleicht können wir den Knopf bewegen, vielleicht haben wir 1 und 1, 2 so. Wenn Sie versuchen, die Größe dieses Blocks zu erhöhen, wird er proportional an Größe zunehmen, also machen Sie sich keine Sorgen darüber. Jetzt gehe ich zu meinen vorherigen Einstellungen zurück. Ich will nicht, dass es zu groß aussieht. Ich denke, wir sollten die Größe dieses hier etwas tief bewegen. Nun, es sieht ausgeglichener aus. Gesunde Mahlzeiten sind ein bisschen kleiner, es ist 60 Pixel, das ist 96, und das ist, denke ich 42. Machen wir es 40, 42 ist ein bisschen größer für meinen Geschmack. [ unhörbar] und ich werde ein bisschen nach unten gehen. Nur visuell zentrieren. Nun, das ist unsere letzte Übung. Diese sind wirklich wichtig, diese letzten Schliff. Jetzt für die Schaltfläche werde ich den Knopf ändern, und wir werden den anderen Knopf hier drüben verwenden, wie wir es vorher getan haben, und das war unser Eclipse-Button, 190 mal 190, und ich werde es über hier. Jetzt werden wir die Blenda Script-Schriftart verwenden, also werde ich Blenda-Skript auswählen. Nun, ich werde es zentralisieren, hier drüben so, und auch ich werde die Größe ein bisschen kleiner machen, 32 Pixel, den Knopf unten verstecken. Auch ich denke, es sieht sehr klein aus, also mach es ein bisschen größer. Lassen Sie uns bei der Größe sperren und seine Höhe auf 200 Pixel erhöhen. Auch wir werden diesen Winkel-Down-Pfeil brauchen, also werde ich diesen Pfeil hier drüben verwenden, und wir werden ihn in dieser Finsternis nach oben verschieben. Das ist unser Pfeil. Sie können einen Pfeil verwenden, Sie können ihn duplizieren, es liegt an Ihnen. Jetzt kommen wir zu diesem Browse-Skript haben wir eine Menge Tracking hier drüben, also lassen Sie uns sie in der Nähe halten, weil es eine Skript-Schriftart ist. in den Skriptschriftarten immer sicher, dass Sie nicht zu viel Tracking verwenden, es wird ihre Wirkung so trennen. Sie können sehen, dass sie gut aussehen, wenn sie so nah sind. Sie also immer sicher, dass es bei Skriptschriftarten auf 0 gesetzt ist. Wenn du es größer machen willst wie 36, okay 36 sieht besser aus. Lassen Sie mich Ihnen hier noch einen Trick zeigen. Wenn Sie zu diesem S gehen, und Sie können sehen, haben wir einige weitere Funktionen zur Verfügung. Diese werden Ligaturen oder mehr Features in offener Schriftart genannt. Wenn ich zu diesem alternativen Stil wechseln, können Sie sehen, wie dieser Swash unter meinen Rezepten S passiert ist . Auch Sie können diesen gleichen Effekt zu diesem E geben, wenn Sie dies auswählen, können Sie hier sehen. Auf diese Weise können wir alternative Effekte und alternative Zeichen für die gleiche Schrift verwenden. Diese Funktion ist nicht in allen Schriftarten oder Schriftarten verfügbar, sie steht in einigen von ihnen zur Verfügung. Also suchen Sie immer nach diesen Optionen hier drüben. Wenn einer aktiviert ist, können Sie es verwenden. Ich werde sofort wieder zurückkehren. Vielleicht sieht das besser für mich aus, ich mag es nicht in sehr kleiner Größe, also wenn Sie eine sehr große Schriftart haben, können Sie diese alternativen Effekte verwenden. In der kleinen Größe empfehle ich nicht, diese Schwärme von floralen Endungen zu verwenden. Das ist also unser Nächstes. Wir können diesen Pfeil duplizieren und ihn nach unten verschieben und seine Deckkraft auf 50 Prozent oder vielleicht 30 Prozent reduzieren, was immer Sie wollen und wie Sie möchten. Ich denke, ein Pfeil ist mehr als genug hier drüben, also benutze das so. Nun, warum diese Farbe auf diesem gut aussieht, weil ich es von hier abprobiert habe. So können Sie die Farbe von hier aus probieren. Vielleicht ist dieser Korb hier drüben. So habe ich also die zweite Abwechslung für dieses Design erstellt, und ich denke, das wird meine Arbeit hier beenden. Ich empfehle nicht, dass wir hier eine weitere Schriftart hinzufügen. Wenn du wirklich eine andere Schriftart willst, habe ich diese benutzt. Das ist mein Student Saqib Ameen. Also Rezept von Saqib Ameen und Schriftart Ich benutze wirklich. Eine geometrische Schrift und diese ist auch geometrisch, so dass zwei geometrische Schriftarten ein Skript und eine etwas rundlich und lustig Schriftart. Sie können hier eine geometrische Schriftart hinzufügen, wenn Sie möchten, und Sie werden es im letzten Modul hier in diesem Bereich hinzufügen. Halten Sie mich über dieses Design auf dem Laufenden. Ich werde diese PSD mit dir teilen. Also werde ich es zu saftigem Teil 2 speichern und mir sagen, ob du so etwas kreieren kannst. Dies ist auch eine Übung, versuchen Sie, so etwas zu erstellen. Sie können auch den Titel hier ändern, wie vielleicht saftigen Mixer, oder so etwas. Ich hoffe, Sie haben diese Lektion genossen, und wenn Sie Probleme oder die Tastenkombinationen nicht kennen, sollten Sie mich kontaktieren oder meinen anderen Kurs absolvieren, der UI-Design in Photoshop ist. Achten Sie darauf, und fahren wir mit der nächsten Lektion fort. 50. Einführung in die Punkte (PT) in IOS-Geräte: Zuallererst müssen Sie verstehen, was diese Punktgrößen sind weil alle Größen für das iPhone-Design in Punkten sind. Also müssen Sie hier zwei Konzepte verstehen. Einer ist Punkte und einer ist dieses 1x, 2x und 3x, also wird es grundsätzlich Pixeldichte genannt. Nun, das ursprüngliche iPhone, wenn es kam, hatte es einen kleinen Bildschirm und die Pixeldichte war 1x, also bedeutet es, dass, wenn die iPhone-Spezifikationen 320 mal 480 sind, es bedeutet, dass das gleiche in den Pixeln sein sollte. Wenn Sie unten sehen, wird es in Pixel übersetzt. Also 1x bedeutet, dass es das gleiche ist, und was sind Punkte? Punkte sind im Grunde relative Messeinheiten für Android. Sie haben verschiedene DPs und SPs und für iPhone sind es Punkte. Dies ist die Bildschirmgröße, 320 ist die Breite, 480 ist die Höhe. Nun, wenn Sie zu iPhone kommen, das iPhone 5 ist, können Sie sehen 320 Breite ist gleich und die 568 ist die Höhe. Wenn Sie nun tatsächliche Pixelgrößen sehen, ist die tatsächliche Pixelgröße doppelt so hoch wie die Punkte. Also 320 multiplizieren mit 2 ist gleich 640, 568 multipliziert mit 2 ist gleich 1.136. Jetzt ist ein Punkt im Grunde gleich zwei Pixel. Hier hatten wir im ursprünglichen iPhone, ein Punkt ist gleich einem Pixel, jetzt haben wir einen Punkt gleich zwei Pixel. Dies geht weiter, bis wir dieses iPhone 6 plus erreichen, das 414 Punkte hat. Also 414 multipliziert mit 3, so ist es 3x. Jeder Punkt enthält 3 Pixel, so dass jeder Punkt gleich 3 Pixel ist, also ist es 1242 Pixel tatsächlich, und es wird von iPhone 6 Gerät auf 87 Prozent heruntergesampelt auf 1080 x 1920 High-Definition-Größe. Denken Sie daran, all diese Beziehung, die wir haben Punkte, die tatsächlich iPhones eigene relative Maßeinheiten sind. So wird alles in Punkten sein, auch Ihre Textgröße, die wir in der nächsten Vorlesung diskutieren werden, wird in Punkten sein. Wenn Sie für diese Größe, 320 x 480 in Photoshop,entwerfen 320 x 480 in Photoshop, müssen Sie keine Schriftgröße ändern. Sie sollten die gleiche Schriftgröße verwenden und es wird 320 mal 480 sein , da Ihre Pixel und Punkte übereinstimmen. Also, wenn Sie versuchen, für iPhone 5 zu entwerfen, dann werden Ihre Punkte anders sein. Auch in diesem, weil unsere Pixel, jetzt Pixel haben ein anderes Verhältnis in diesem Bildschirm. Hier haben wir die Pixel verdoppelt, hier haben wir die Pixel im gleichen Bildschirm verdreifacht. Bevor Sie also eine iPhone-App oder irgendetwas entwerfen, sollten Sie all diese Beziehung zwischen Punkten und Pixeln verstehen. Hier ist eine weitere sehr gute Bildschirmgröße Erklärung von diesem Kyle Kerl. Ich habe es online gefunden. Kyle Larson. Sie können hier sehen, ist die tatsächliche Bildschirmgröße, 5,5 Zoll, dann haben wir Bildschirmgröße in Punkt, multiplizieren mit 3x, und die gerenderten Pixel sollten 1,242 mal 2.208 Pixel sein. Dann wird es von physikalischen Pixeln heruntergesampelt, das ist Gerätepixel, auf dem Gerät werden sie 1080 von 1920 angezeigt. So werden all diese Punkte und Punkte in tatsächliche Pixel umgewandelt. Dies sind die Pixel, die wir für 1.242 mal 2.208 entwerfen werden. Hier ist ein relativer Vergleich in Photoshop, also werde ich diese PSD-Datei mit Ihnen teilen, also mach dir keine Sorgen darüber. Das sind vier verschiedene Zeichenflächen. Wenn Sie nichts über Zeichenflächen wissen, sollten Sie meinen anderen Kurs zum UI-Design für Anfänger sehen. Dies ist original iPhone, das sind 320 Pixel. Also berechne ich gerade jetzt die Breite. Ich zeige keine Höhe. So 320 Pixel auf dem ursprünglichen iPhone ist 320 Punkte. Das ist also die Bildschirmgröße. Dann auf dem iPhone 5 haben wir 2x, so dass es fast ein Doppel ist. Also 320 Punkte, aber die Bildschirmgröße auf unserem Photoshop-Dokument ist 640 Pixel Breite. Dann haben wir 375 Punkte und 750 Pixel Breite, es ist ein Doppel. Dann auf dem iPhone 6 Plus ist das iPhone 6 Plus, also haben wir 1.242 Pixel, was auf 1.080 Pixel heruntergefahren ist. Die tatsächliche Punktgröße beträgt 414 Punkte. Lassen Sie mich Ihnen ein Beispiel in Photoshop zeigen, wie wir all diese Dinge skalieren werden , all diese Bildschirme. Zuerst öffnen wir den ersten Bildschirm, Original-iPhone. Der Standard ist, mit diesem Bildschirm zu entwerfen. So ist es 1x. Entwerfen Sie also immer in 1x statt 2x oder 3x. Also werde ich hier rüber klicken. Das ist unser Kunstboard. Also werde ich Sensitive Compact Display verwenden, halb-fett, 32 Punkte sagt meine Überschrift. Das ist meine Überschrift. Lassen Sie uns einen Dummy-Text hier drüben schreiben. Lassen Sie uns den Dummy-Text setzen. Ich werde 16 Punkte hier drüben setzen und ich werde Typ verwenden, Lorem Ipsum einfügen. Lassen Sie uns seine Linienhöhe auf 24 einstellen. Lassen Sie uns die Farbe ändern, damit sie nicht so anders aussieht als unsere Überschrift. Jetzt haben wir diese Zeichenfläche eingerichtet, die unser ursprüngliches iPhone ist. Nun, wie wir unseren zweiten Bildschirm oder dritten Bildschirm entwerfen werden, also gehen Sie zu dieser Bildgröße. Sie können es leicht verdoppeln 640 und stellen Sie sicher, dass alles so ausgewählt ist. Das ist auf Schloss. Also sind diese beiden verschlossen. Sie werden miteinander zunehmen. Die Auflösung beträgt 72 Pixel, das gleiche Resample plus klicken Sie auf „OK“. Nun, das ist unser iPhone 5 Bildschirm, also ist es 2x. Ich habe es auf 2x multipliziert. Sie können hier 640 x 960 sehen. Unsere tatsächliche Höhe ist anders, aber machen Sie sich jetzt keine Sorgen. Lassen Sie uns nun die Schriftgrößen überprüfen. Ich habe diese Schriftart doppelt geklickt, es sind 32 Punkte. Sie können sehen, dass Photoshop meine Schriftgröße automatisch verdoppelt hat. Bevor es 16 Punkte für meinen Text war, jetzt sind es 32 Punkte. Stellen Sie sicher, dass die Skalierung auf diese Weise erfolgt. Wenn ich wieder auf die ursprüngliche Größe zurückkehre und ich gehe zum dritten 3x, und was ich hier brauche, ist 3x bedeutet 320 durch, es war etwas wie 1.080 vielleicht. Es waren 1.242. Also werde ich 1.242 benutzen und „Okay“ drücken. Dies ist mein iPhone 6 Plus Bildschirm. Mal sehen, wie die Größen waren. So können Sie sehen, dass meine Überschriftengröße auf 124 Punkte erhöht wurde und meine Deckgröße 62 beträgt. Ich denke, es sollten 64 sein. Nun liegt das Problem zwischen dieser Multiplikation dieser vier Größen. Was hier passiert ist, ist, dass Photoshop versucht, unsere Schriftgrößen zu multiplizieren und anzupassen. Stellen Sie sicher, dass es sich bei den Schriftgrößen um Vielfache von zwei handelt. Wenn sie mit drei oder etwas wie zwei oder drei multipliziert werden, sollte ein ganzer Wert vorhanden sein. Jetzt sollte 16 3 mit 3 multipliziert werden, 16 Dreier sind 48. Ich denke, es ist die richtige Größe. Dann sollte es für die Überschrift 32 multipliziert werden mit 3 ist 96, also sollte es 96 sein. Das ist unsere Überschrift, und es sollte 96 Punkte betragen. So etwas. Nein, ich weiß nicht, warum Photoshop es anders skaliert hat, aber es gibt eine andere Möglichkeit, dies zu skalieren. Ich werde alles wieder auf meine ursprüngliche Größe ändern, was diese ist. Jetzt habe ich einige Aktionen heruntergeladen , die mit der Skalierung durch B Django-Skala-Aktionen zusammenhängen. Sie können hier drüben sehen. Wenn Sie nicht wissen, wie Sie die Aktionen installieren, sollten Sie sich meinen anderen Kurs ansehen, in dem ich alle Grundlagen von Photoshop besprochen habe. Jetzt skalieren wir es auf 300 Prozent. Ich wähle das aus und spiele es. So wurde es auf 300 Prozent skaliert. Jetzt können Sie sehen, dass die Größen perfekt sind, also bevorzuge ich, dass Sie diese Aktionen verwenden sollten. Ich werde den Link einschließen, um nach oben oder nach unten zu skalieren. Also lasst es uns so skalieren. Nun, hier geht es um Punkte und Pixel und wie wir verschiedene Typen Größen verwenden und wie sie von einer Größe zur anderen verschoben werden. So multiplizieren wir unsere Größe, wenn wir in welcher Auflösung entwerfen? Siebzig zwei Pixel pro Zoll. Es gibt einen anderen Weg, den ich in den nächsten Lektionen besprechen werde , wie man verschiedene Schriftgrößen anpasst. Wir werden hier 144 und 216 Pixel Auflösung pro Zoll verwenden. Für diese Lektion wollte ich nur, dass Sie ein Verständnis davon bekommen, wie diese Pixel und Punkte miteinander funktionieren und wie wir unser 1x-Design skalieren werden, das war, dieses war tatsächlich Design, das auf 320 x 480 war. Wir haben es in 200 Prozent und 300 Prozent erhöht und versuchen, diese B Django-Aktionen zu verwenden. Das sind wirklich großartige Aktionen. Hier geht es um Skalierung, Punkttyp, physische Pixel und Punkte und Rendering bei 2x oder 3x Retina oder 3x Retina, was auch immer es ist. Fahren wir mit der nächsten Lektion fort. 51. IOS Typografie: In dieser Lektion betrachten wir menschliche Schnittstellenrichtlinien von Apple, und diese werden als iOS Human Interface Guidelines bezeichnet. Wir werden uns den Bereich Typografie ansehen. Hier können Sie alles darüber lesen. Wenn Sie herunterladen möchten, können Sie zu Resources gehen und die Schriftarten für die Leute herunterladen, die Mac verwenden, ich denke, sie haben möglicherweise bereits diese San Francisco-Schriftarten installiert, also gibt es im Grunde zwei Schriftarten. Eine davon ist die San Francisco UI Text und San Francisco UI Display. Die Anzeige ist für Überschriften und UI-Text ist für Absätze und Text mit geringer Größe. Ihre Spezifikation ist, wenn Sie 19 Punkte sind kleiner als Sie San Francisco UI-Text verwenden sollten und wenn wir 20 Punkte oder größer als wir Display-Schriftart verwenden sollten , weil sie für größere Textgrößen gemacht werden. Hier sind einige weitere Punkte zu iOS-Richtlinien. Wichtige Informationen hervorheben. Wir wissen bereits, wie man Schriftgewicht, Größe und Farbe verwendet. Verwenden Sie dann, wenn möglich, eine einzelne Schriftart, da das Mischen zu viele Schriftarten ein bisschen schlampig sein kann, es kann auch Ihre App oder so etwas verlangsamen, also ist dies der Vorschlag. Wenn Sie diese San Francisco-Schriftart verwenden können , sollten Sie sie verwenden, da es sich um Systemschriftart handelt. Es wird einfach in Ihre App geladen werden. Für Windows-Benutzer sollten Sie Ihre San Francisco-Schriftart von hier herunterladen. Dies ist ein GIT-Repository. Auch können Sie Google darüber dann herunterladen San Francisco Schriftart für Windows. Sie werden sicherlich viele Links finden, laden Sie es einfach herunter und installieren Sie es auf Ihrem PC. Hier sind ein paar Spezifikation, wenn Sie San Francisco UI-Anzeige verwenden, die für Überschriften ist, gibt es eine Zeile hier, die Schriftgröße bei 2x, 144 P PI ist. Grundsätzlich heißt es, dass bei 2 x, bei Retina-Bildschirmen für iPhone 55 S, 6, nicht 6 plus. Dies sind Größen für hinzufügen 2x Bildschirme Ich denke, wir haben all dies in der vorherigen Lektion diskutiert. Dies sind die Schriftgrößen in Punkt. Das ist Tracking. Tracking ist im Grunde, wie viel Buchstabenabstand wir in unserem Text oder Absatz haben. Wir werden dies anpassen, indem wir Foto-Shops Tracking verwenden und dies sind ein paar Schriftgrößen für unsere Überschriften. Jetzt kommen zu diesem San Francisco UI-Text, gibt es viele verschiedene Größen in Punkten. Auch hier haben wir eine Menge Tracking. Sie können sehen, dass, wenn die Größe sehr niedrig ist, Verfolgung sehr hoch ist, da sehr kleiner Text nicht lesbar ist , wenn die Buchstaben sehr nah beieinander liegen. Als nächstes werden wir so etwas für die ursprüngliche iPhone-Größe 1 X, 2 X und 3 X entwerfen . iPhone, altes iPhone regionales iPhone, iPhone 4, ich denke, iPhone 5,6 und iPhone 6 Plus. Fahren wir mit der nächsten Lektion fort. 52. Entwerfen mehrerer Auflösung IOS mit Photoshop: Lassen Sie uns ein Artboard mit all diesen verschiedenen Größen erstellen. Wir werden eine neue Datei mit diesem Kunstboard erstellen. Wir werden unsere Größe 320 mal 480 verwenden. Drücken Sie auf „OK“. Jetzt werden wir einen weiteren Bildschirm hier hinzufügen. Dies ist iPhone vier oder alte iPhones. Dann werden wir auf dieses Plus-Symbol klicken und wir werden iPhone fünf hier auswählen und hier klicken. Dies wird iPhone 5s Bildschirm sein. Dann werden wir hier noch einen hinzufügen. Lasst uns hier noch einen erstellen. Ich werde auf iPhone 6 klicken und hier einmal klicken. Dann werde ich hier ein weiteres erstellen, das iPhone 6 Plus ist. Der letzte wurde ausgewählt. Ich werde auf diese klicken und ich werde so drücken oder markieren. Jetzt verkleinern und Sie können sehen, das sind alle Bildschirme. Lasst uns sie aufstellen. Dies ist eine Linie zu dieser einen Sekte dieses hier. Ich kontrolliere diese, um sie auszurichten. Dann sind alle unsere Kunstboards fertig, also lasst uns anfangen. Zuerst werde ich mit unserem kleinsten Bildschirm beginnen, der 1x ist. Ich werde meinen San Francisco UI-Text verwenden. Zuerst werde ich ein paar Ränder um ihn ziehen. Jetzt werde ich Photoshops verwenden, Standard, GridLayout und lassen Sie uns die Spalten entfernen. Wir werden einige Ränder an der Spitze verwenden, 20, 20 und 20. Das ist unser Rahmen. Wir werden darin entwerfen. Ich habe alle anderen Kunsttafeln versteckt, damit wir leicht darin entwerfen können. Ich werde den Text hier drüben auswählen. Ich werde klicken und ziehen Sie wie folgt. Das ist unsere Hauptüberschrift. Unsere Überschrift sollte 32 Pixel oder 32 Punkte betragen. Ich werde die 32 Punktgröße von hier aus einstellen, hier haben wir eine andere Punktgröße ist 32 und 12 Punkte Tracking. Hier habe ich, lassen Sie uns auf 100 Prozent vergrößern. Jetzt ist unser Dokument fertig, wir haben die Ränder um ihn herum gesetzt. Wir werden das Textwerkzeug verwenden und hier eine Linie ziehen, um unsere Überschrift zu erhalten. Wir werden 32 Punkte mit dem San Francisco UI-Display verwenden. Wir werden halb fett verwenden. Ich werde hier schreiben, meine große und lange, lange Überschrift, und es ist nur zum Spaß. Ich werde die Zeilenhöhe auf 1,5 verschieben. Ich denke, wenn das Tracking 12. war, war das Tracking wohl 12 Punkte. Tracking ist auf 12 eingestellt, und ich werde dies auf 36 Pixel als Zeilenhöhe setzen, also ist dies meine Überschrift. Lassen Sie uns die Farbe in diese blaue Farbe ändern. Jetzt werden wir noch etwas mehr Text hier hinzufügen. Ich werde diesen Lorem Ipsum auswählen, Lorem Ipsum. Wir werden 14 Punkte mit 21 Punkt Linienhöhe verwenden, und es ist minus 11 in San Francisco IS menschlichen Schnittstellenrichtlinien. Wir werden es auf vielleicht brauchen wir ein bisschen dumpfe Farbe, so etwas. Lassen Sie uns nun etwas mehr vergrößern, damit wir den Abstand sehen können. ein mehr Text, der am 6. Mai 2016 veröffentlicht wird. Ich werde dieses t und h auswählen, und ich werde diesen Befehl verwenden, um es hochgestellt oder tiefgestellt zu machen. Ich weiß nicht, was das gesagt hat. Es hochgestellt. Jetzt werden wir die Farbe für diese Überschrift ändern. Dieses Datum. Sie haben die Farbe in ein bisschen stumpfes Grau geändert. Lassen Sie uns es so an dieser Linie ausrichten. Modus, jetzt werden wir 12 Punkte hier für das Datum verwenden , und ich werde sehen, was sind die Spezifikationen für das Tracking für 12. Wir werden hier Zeroover verwenden, so. Mal sehen, wie das hier ist. Ich denke für 14 Punkte, es ist minus 11, also sollte es minus 11 sein. Alles ist so eingerichtet, lassen Sie uns diese auf unsere anderen Kunsttafeln kopieren. Jetzt werden wir all diese Einstellungen und all diesen Text verwenden, und wir werden ihn auf unsere anderen Kunsttafeln duplizieren, also lasst uns verkleinern. Ich werde mein Kunstbrett hierher ziehen und sie damit ausrichten. Jetzt werde ich den ganzen Text auswählen, diese leere Ebene löschen, auch diese in eine Gruppe. Du nennst ihn einfach Text, und ich werde Alt benutzen und ihn zum nächsten ziehen. Lassen Sie uns andere, alle anderen Kunstbretter wie das verstecken. Zoomen Sie einfach auf diese 100 Prozent. Nun, wenn Sie sich erinnern, wir sind jetzt im iPhone 5. iPhone 5, was wir tun werden, ist, dass wir diese Texte Größe und wir werden „Kontrolle T“. Wir werden auch die Breite davon ändern. Machen wir es Prozent und wir werden es auf 200 Prozent ändern. So passen wir alles hier drüben an. So, und wenn Sie die Ränder festlegen möchten, können Sie die Ränder Overhead festlegen. Nun, wenn Sie die Größen der ganzen Kraft überprüfen, können Sie sehen, dass es perfekt verdoppelt ist. Die 64 Punkte und alles andere ist gleich. Wenn Sie wollen, weil wir mehr Höhe haben, können Sie dies so ziehen, und wir können mehr Texte hier drüben haben. So werden wir andere Bildschirme mit diesem verwenden, also haben wir zwei Bildschirme abgeschlossen. Ich verwende keine Ränder, Sie können die Ränder verwenden, Sie können Ränder auf jedem dieser Bildschirme verwenden. Vielleicht verdoppeln Sie die Ränder oder erhöhen Sie sie um 10 Pixel, was auch immer Sie am besten mögen. Gehen wir nun zum nächsten, dem iPhone 6. Jetzt werden wir das noch einmal kopieren und wir werden es hier auf unserem iPhone 6 Bildschirm ziehen. Sie können sehen, die Größe unseres Textes sollte gleich sein. Nur haben wir ein bisschen mehr Bildschirmgröße in Pixeln oder physischen Bildschirmgröße. Wir werden nur unsere Größen, Absatzgrößen in der Breite und auch in der Höhe erhöhen . Auch können wir auf die Überschrift gehen und wir können es ziehen und es unserem Absatz gleich machen. Jetzt haben wir hier mehr Platz, damit wir ihn nach oben verschieben können. Jetzt können Sie sehen, wie dies auf verschiedenen Bildschirmen ändern wird , weil unsere Bildschirmgrößen und Bildschirmabmessungen, haben wir mehr Platz auf einigen Bildschirmen und einige auf einem Schema haben wir weniger Platz. Lasst uns alles gleich halten. Versuchen Sie, alle Abstände zwischen verschiedenen Elementen gleich zu kopieren. Wenn Sie vertikalen Rhythmus anwenden möchten, werden Sie es anwenden, denn wenn ich versuche, vertikal anzuwenden, dann nein, Ich denke, dieser Vortrag wird 30 Minuten lang sein. Ich will nicht, dass es so langwierig wird. Hier haben wir den letzten Bildschirm, der iPhone 6 plus ist. Jetzt werde ich das wieder auswählen und ich werde „Alt“ drücken und es so hierher ziehen. Nun, das ist unser iPhone 6 Plus. Ich werde diese Kunsttafel umbenennen. Jetzt können Sie diese Überschriften sehen und alles sieht etwas kleiner aus, also werden wir es auf 150 Prozent erhöhen. Warum 150 Prozent? Weil dieser 200 ist und dieser 300 Prozent ist. Wir werden es erhöhen, um auf 150 Prozent zu multiplizieren, also ändern Sie die Breite auf 150. Warten Sie eine Minute. Stellen Sie zunächst sicher, dass Sie „control T“ haben und drücken diese Sperre, weil wir wollen, dass alles proportional erhöht wird. Machen wir es zu 150 Prozent. So passt unser Text auf den Bildschirm, iPhone 6 Plus Bildschirm. Jetzt können Sie alles entsprechend anpassen, wenn Sie die Überschrift und den Abstand anpassen möchten, können Sie es so anpassen. Alle unsere Bildschirme sind bereit, jetzt können Sie sehen, wie ich all diese Techniken verwendet, um alles zu kopieren. Wir haben eine einfache Berechnung der Multiplikation unserer iPhone-Dimensionen und Pixelauflösungen durchgeführt. Wir haben uns all dieses Design ausgedacht. Für eine nächste Stunde. Alles war gleich für 2x. Es wurde mit zwei multipliziert, wir erhöhen die Größe dann ist dies auch 2x, also kein Größenunterschied. Das ist 3x. Wir multiplizieren diese 2x mit 1,5, um diese 3x Größe zu erhalten. Auch können Sie diesen Text kopieren und ziehen Sie ihn hierher und multiplizieren Sie ihn mit 300 Prozent verschieben Sie ihn auf 300 Prozent. Es wird Ihnen den gleichen Effekt geben. Nun, wenn Sie die Schriftgröße überprüfen. Dieser sollte 96 sein. Dieser sollte 64 sein. Dieser sollte 32 sein. Wenn wir gehen, um dieses zu wählen, ist dies 32. Sein ist, wie wir Textgrößen verwenden, weil ein iOS-App-Entwickler, er wird die Entfernungen und Textgrößen in Punkten benötigen. Du wirst ihm so etwas geben. Zeilenhöhe, diese Punkte und Schriftgröße, Schriftart. Sie haben diese eine Farbe verwendet, Sie haben diese verwendet. Abstand zwischen den Elementen ist so viel. So entwerfen Sie iOS-Geräte und verwenden Typografie in iOS-Geräten. Hier geht es um diese iOS-Praxis in dieser Lektion, wir haben vier verschiedene Bildschirme iPhone 6 plus iPhone 5 und iPhone vier erstellt. Es gibt eine Herausforderung, die ich möchte, dass Sie etwas Ähnliches wie dieses entwerfen. Versucht zu entwerfen, erstellen Sie vier Art Boards wie diese. Versuchen Sie, Ihr Design auf allen von ihnen zu replizieren. Zeig es mir. Sie können es in den Fragen posten. Stellen Sie eine Frage, zeigen Sie mir Ihre Arbeit und ich werde versuchen, sie zu verbessern. Wenn Sie vertikalen Rhythmus anwenden möchten, werden Sie vertikalen Rhythmus anwenden, Sie können Basislinie und alles einstellen. Selbst wenn Sie nur einen Bildschirm entwerfen möchten, können Sie nur einen Bildschirm auswählen und ihn richtig gestalten. Ich wollte nur sicherstellen, dass Sie verstehen, dass, wenn Sie iOS-App in verschiedenen Größen entwerfen müssen, wie Sie es verwalten werden. Dies ist die schwierigste Sache in, während Sie Ihre iOS-App oder Android-App oder etwas Ähnliches entwerfen. Fahren wir mit der nächsten Lektion fort. 53. Studentenfrage zu den Auflösungen: Heute fragte mich einer meiner Schüler nach iOS-Lösung und es war eine wirklich gute Frage. Ich habe nie darüber nachgedacht, dass dies von einem meiner Schüler kommen wird. Lassen Sie mich Ihnen die Frage zeigen. Er fragte, warum Sie bei einem X entwerfen, das 32 Pixel auf einem iOS mit den vier Spezifikationen bei 2x ist. Ich benutze hier im Grunde 32 Punkte und er fragt, warum ich 32 Punkte anstelle von 16 Punkten auf 1x verwende. Also, um all dieses Problem oder Konzept zu klären, denke ich, dass wir Designer zuerst experimentieren sollten. Wir lernen immer mit Experimenten. Was ich tun werde, ist, dass ich Ihnen in Photoshop zeigen werde, wie wir das angehen werden und wie wir all dieses Chaos verstehen. Lasst uns anfangen. Ich werde eine neue Photoshop-Datei öffnen. Datei und Neu. Was wir dieses Mal tun werden, ist, dass wir Zeichenfläche von hier aus auswählen und wir werden iPhone 6 oder vielleicht iPhone 5 auswählen, die im Grunde hohe Auflösung oder 2x Geräte sind. Nun, was ich tun werde, anstatt 72 Punkte Lösung zu verwenden, was unser Standard ist, werde ich 144 verwenden. Im Grunde, was ich getan habe, ist, dass ich diese 144 auf 2x verschoben habe. Jetzt ist mein Dokument bereits Retina. Es ist 2x, also werde ich „Okay“ drücken. Das ist unsere Zeichenfläche. Nun, damit dieses Problem gelöst wird, wähle ich meine Überschriftengröße auf 32 aus. Sie können hier sehen, dies ist eine der Skala der iOS-Geräte. Was ist dein Spiel? Lass uns so etwas haben und ich werde es in der Mitte ausrichten. Lassen Sie es einfach auf Punktgröße verschieben, in Punktgröße konvertieren, um es besser auszurichten, weil es eine einzelne Linie ist. Jetzt können Sie sehen, es ist 32 Punkte bei 2x Bildschirmen. Wenn Sie zu Bild, Bildgröße gehen, können Sie sehen, ignorieren Sie diese Zoll. Unsere Auflösung beträgt im Grunde 144 Pixel pro Zoll. Nun, was wir tun werden, ist, dass wir dieses resample deaktivieren und wir werden zurück zu unserer 1x-Lösung zurückkehren, die 72 Pixel pro Zoll ist. Dies ist nur, um Ihre Meinung zu klären, wie wir mit unserer Punktgröße gehen. Grundsätzlich sollten unsere Entwickler diese 32-Punkt-iOS-Schriftgröße verwenden. Aber während wir nur aus Einfachheit entwerfen, verwenden wir normalerweise 72 Pixeldokumente in allen unseren verschiedenen Bildschirmen. Drücke einfach auf „Okay“. Wenn Sie nun Ihre Schriftart auswählen, können Sie sehen, dass sie auf 64 Punkte verschoben wird. Warum ist das so? Weil wir von 2x auf 1x Auflösung zurückkonvertiert haben. Jetzt haben wir weniger Pixel pro Zoll, deshalb ist unsere Schriftgröße gerade erweitert und weil auf den größeren Bildschirmen, wird dies kontrahiert werden. Auf einem größeren Bildschirm werden diese 64 32 Punkte sein. Warum? Weil wir mehr Pixel pro Zoll anzeigen müssen. So werden in Retina-Bildschirmen in weniger Raum mehr Pixel gegeneinander gedrückt. Dies wird sein, Sie können sagen, komprimiert auf 32 Punkte. Deshalb wird auf 72 Pixeln die volle Größe vergrößert. Sie können hier sehen, wie dies vergrößert wurde. Manchmal, wenn Sie entwerfen, wie er gefragt, warum ich 32 Punkte auf diesem Bildschirm verwendet, denn wenn ich versuche zu verwenden, können Sie 64 hier sehen, lassen Sie uns 64 verwenden, das ist meine Überschrift, nur Kopf ist genug. Ich glaube, wir können es hier nicht reparieren. Wenn wir versuchen, so etwas zu verwenden und dann verschieben wir unsere Bildgröße auf 144. Lassen Sie uns die Pixelwerte auf den Punkt ändern, an dem sich das Pixel befindet. Ich werde es nochmals ausprobieren. Lasst uns die Pixel haben. Ich denke, es waren 750, etwa 750 oder 760 so etwas. Lassen Sie uns die Größe unseres iPhone 5 sehen, weil ich mich nicht an sie erinnere. 640 von 1136. Ich werde die Breite hier auf 640 ändern. Lasst uns hier drüben resample haben, 144 und Pixel. Es ist bereits auf 640 verschoben, also habe ich gerade die Auflösung geändert und Sie können sehen, dass es 640 ist. Wenn Sie die Höhe ändern möchten, können Sie die Höhe ändern, indem Sie hier 1140 verwenden, so. Ich denke, du solltest so dabei bleiben, 144. Wir verschieben uns in unserer Entschließung nach oben, also drücken Sie „Okay“. Jetzt können Sie sehen, dass dies bereits auf 64 verschoben ist. Es verschiebt sich nicht in der Größe. Das ist sehr seltsam. Versuchen Sie immer, die Schriftgröße zu verwenden, das heißt, Sie können realistisch sagen, und ich denke, 64 ist hier zu groß. Vielleicht brauchen wir 32 Punkte. Das ist, denke ich, eine gute Überschriftengröße. Lassen Sie uns versuchen 32 mit unserem 1x Bildschirm wie folgt. Das ist meine Überschriftengröße. Ich werde 32 Punkte verwenden. Lasst es uns jetzt einfach so lassen. Mach dir keine Sorgen darüber. In der Bildgröße werde ich bis zu 144 verschieben. Mal sehen, was es tun wird. Wieder ist es 32 Punkte. Grundsätzlich bedeutet es, dass bei 1x, wenn Sie 32 Punkte verwenden, es 32 Punkte sein wird. Wenn Sie Ihre Bildgröße auf 2x verschieben. In diesem Beispiel habe ich, wie Sie sehen können, bis zu 144 Auflösung verschoben, auf der die iOS-Spezifikationen sind und unsere Schriftgröße verschoben war die gleiche. Dies ist das eigentliche Problem, der Schüler, der sein Name ist Antonella, Ich weiß nicht, dass er ein er oder sie ist, aber Antonella fragte mich, dass, warum ich 32 Punkte auf einem 1x-Bildschirm verwenden? Das ist die Antwort. Wiederholen wir es noch einmal. Ich werde 320, 480, 72 Pixel verwenden. Dies ist der 1x iPhone 4 Bildschirm. Drücken Sie „Okay“, und ich werde 32 Punkte hier drüben für meine Displaygröße und hallo Antonella verwenden . Wie war sein Name? Antonella. Verwenden wir Auto hier drüben. Jetzt können Sie sehen, dass wir diese Einstellungen verwenden, 320, 480, 72 Pixel Auflösung, und ich verwende 32 Punkte. Jetzt werden wir bis zu 144 Auflösung verschieben und drücken Sie „Okay“, es ist im Grunde Retina-Bildschirm bei 2x. Drücken Sie OK und wenn Sie diese Größe wählen, können Sie sehen, es ist immer noch 32 Punkte, weil wir unsere Auflösung verschoben. So werden wir unseren Entwicklern mitteilen, dass wir 32 Punkte für die Größe verwenden. In meinem vorherigen Beispiel habe ich keine Größen wie diese verschoben, wir haben nur 72 Pixel Auflösung verwendet. Wir haben hier etwa 32 benutzt. Lassen Sie mich Ihnen dieses Beispiel zeigen. Das ist eine Überschrift. Wenn wir versuchen, hier drüben eine neue Zeichenfläche zu erstellen, wenn wir auf diese Zeichenfläche gehen und versuchen, eine neue hier mit dieser Größe zu erstellen, ist das im Grunde iPhone 6 Größe, und ich denke, es ist eine mittelgroße. Lass es uns einfach löschen, iPhone 5. Lassen Sie uns dieses iPhone 5 hier erstellen und drücken Sie dieses Plus und klicken Sie hier drüben. Dies ist iPhone 5 und es ist ein Bereitschaftsbildschirm. Wenn wir versuchen, es hier rüber zu ziehen, können Sie sehen, es ist im Grunde 32 Punkte. Was wir tun werden, ist, dass wir es mit 2 multiplizieren und es wird 64 sein. Dies ist im Grunde die tatsächliche Größe. Wenn wir es hier in dieser Zeichenfläche zurückschieben, sollten es 32 Punkte sein. Hier ist die Regel, dass Sie, wenn Sie mit den 72 Pixeln pro Zoll entwerfen, Ihre Schriftgröße in größeren Bildschirmen wie Retina und 3x Bildschirm multiplizieren müssen, was iPhone 6 plus ist. Bei 1x werden Sie diese Punktgröße verwenden. Was auch immer Sie auf Ihrem 1x-Bildschirm verwenden, während Sie mit dieser 72 Pixel-Auflösung entwerfen, wird dies Ihre tatsächliche Größe sein Sie werden Ihren Entwicklern sagen, dass wir 32 Punkte, Anzeigegröße, Überschriftengröße, und für die einfache Arbeit, die wir mit 72 Pixeln pro Zoll entworfen haben, so dass wir nicht brauchen, um Pixel überall oder Auflösung zu verschieben. Sie sind alle in der gleichen Entschließung. Diese Schriftgröße war tatsächlich eingeschaltet, diese war für 144, also multiplizieren wir sie mit zwei, weil wir bei 72 entwerfen, was die Hälfte dieser Revolution ist. Unsere Spezifikationen waren bei 144, aber wir sind an der Hälfte, also haben wir es mit zwei multipliziert, um es gleich zu unseren Spezifikationen zu bekommen. Ich denke, das haben Sie Ihren Geist klar über diese Auflösung und diese Bildschirme Chaos. Ich glaube, das war's. Wenn jemand anderes ein Problem wie dieses hat, bin ich bereit, dafür einen neuen Vortrag oder ein neues Video zu erstellen. Versuchen Sie nicht, meinen Kurs schlecht wie zwei oder drei Sterne zu bewerten. Stellen Sie zuerst Fragen. Ich habe eine Menge von Studenten gesehen, die Fragen stellen, sie haben viele große Verbesserungen in ihren Designs, und die Studenten, die keine Fragen stellen und manchmal schlecht lesen, und dann habe ich ihnen mitgeteilt, dass, was der Grund war und Überraschenderweise sagen sie: „Wir hatten dieses Problem.“ Ich sage: „Warum haben Sie mich nicht zuerst dieses Problem gefragt, bevor Sie meinen Kurs schlecht bewerten und mir einen Herzinfarkt geben?“ Bevor Sie meinen Kurs schlecht bewerten oder frustriert werden, sollten Sie mir zuerst Fragen stellen. Ich versuche immer so schnell wie möglich zu antworten, und wenn nötig, werde ich ein neues Video für Sie erstellen. Also pass auf und lass uns zur nächsten Lektion übergehen. 54. Mirroring deines Photsshop auf Iphone spiegeln: In dieser Lektion zeige ich Ihnen, wie Sie Ihren Photoshop mit Ihrem iOS-Gerät verbinden , um dieses Kunstboard auf Ihrem iPhone anzuzeigen. Zuerst gehen Sie zu dieser Editier- und Remote-Verbindungen. Was wir führen, ist dieser Serverdienstname. Es wird von so geschrieben wie Photoshop Server und machen Sie ein Passwort hier. Es muss sechs Zeichen lang sein. Machen Sie es nicht sehr komplex, nur eine einfache. Dann werden Sie diese IP-Adresse benötigen. Kopieren Sie dies oder denken Sie daran, dass Sie dieses Passwort und diese IP-Adresse und den Dienstnamen benötigen. Lasst uns anfangen. Jetzt werde ich zu meinem iPhone-Bildschirm wechseln. Die App, die ich gerade verwende, ist diese. Dies ist iTunes Store, Apple Store, Ps spielen für Photoshop. Ich werde Ihnen diese App zeigen, und auch ich werde Ihnen zeigen, diese Photoshop-Gerät bewiesen Vorschau App. Diese zwei Apps können Sie verwenden, um Ihr iOS-Gerät mit Ihrem Photoshop zu verbinden und Ihre Designs anzuzeigen. Lassen Sie uns zum iPhone-Bildschirm wechseln. Dies ist mein iPhone-Bildschirm, und wie Sie in der dritten Reihe sehen können, Ich habe diese App Ps spielen. Sie können darauf klicken und Sie können sehen, dass es bereits verbunden ist. Also werde ich zurückgehen und Ihnen zeigen, wie Sie es mit Ihrem iPhone verbinden werden. Es zeigt erkannte Verbindungen und einige gespeicherte Verbindungen. Also höchstwahrscheinlich werden Sie mit diesem entdeckten gehen, es wird sich damit verbinden. Es erfordert die IP-Adresse oder das Passwort, aber Sie müssen es kopieren und einfügen Sie es hier. Ich werde neue hinzufügen. Aus irgendeinem Grund auf meinem Computer wird es mir nicht angezeigt. Es lässt mich nicht mit neuen Verbindungen zu diesem iPhone-Server verbinden, vielleicht ist es meine Firewall. Also, wenn Sie solche Probleme 79.1 haben, und hier werden Sie Ihr Passwort eingeben, meins war Microsoft. Wenn Sie alle diese Informationen eingegeben haben, drücken Sie OK und es wird mit Ihrem Bildschirm verbunden. Im Moment habe ich bereits eine Verbindung, also werde ich diese benutzen. Sie können sehen, dass es aktualisiert und zeigt mir den Bildschirm. Wenn Sie tippen, sobald Sie sehen, alle diese Funktionen sind verschwunden. Sie können einen Screenshot machen, erweitern und auch gibt es einige diese Option von 101, eins nach dem anderen Verhältnis, ich denke, Bildschirmverhältnis. Sie können es auch aktualisieren, wenn Sie möchten. Ich benutze diese App nicht, um Screenshots zu machen oder andere Dinge zu tun. Ich benutze es einfach, Sie können sagen, mein Design hier drüben zu sehen und zu sehen, wie viel Räume ich brauche, oder vielleicht muss ich ein Element hier oder da drüben bewegen. So verwende ich diese App. Lassen Sie mich Ihnen eine andere App zeigen, die unsere Photoshop sein wird, Adobe Photoshop App, die dies letzte über Vorschau ist. Sie müssen bei Photoshop Server angemeldet sein, dem es sich im Grunde um Photoshop CC handelt. Sie können sehen, dass es bereits verbunden ist. Es zeigt mir die Kunsttafel eins. Es zeigt also den Namen des Kunstbretts zwei. Dies ist, wie diese App verbunden ist. Normalerweise müssen Sie sich nur bei Ihrem Adobe-Konto, Ihrem Adobe CC-Konto anmelden und es wird mit Ihrem Photoshop-Server verbunden. Ich erinnere mich nicht, wie ich es verbunden habe und es zeigt mir keine Optionen. Sie können hier drüben sehen. Es gibt mir nur dieses iPhone Art Board fünf und Dokument Canvas, dieses. Dies sind zwei Methoden, mit denen Sie Ihr iPhone mit Ihrem Photoshop verbinden werden. Stellen Sie sicher, dass Ihr WLAN ausgeführt wird, da es WLAN-Verbindung verwendet, um eine Verbindung mit diesem Server herzustellen. Dies fasst diesen Vortrag zusammen, wie Sie Ihre Geräte mit Ihren iPhones oder Android-Geräten verbinden können . Irgendwie auf meinen Android-Telefonen aufgrund meiner Firewall-Einstellungen, denke ich, dass ich mich nicht mit dem Photoshop-Server verbinden kann. Also war nur ich mit dieser Option übrig, um Sie auf den iOS-Geräten zu zeigen. Also denke ich, es wird den Trick tun. Wenn Sie also Probleme haben oder Probleme haben, lassen Sie es mich wissen und stellen Sie sicher, dass Sie keine Firewall haben. So verwenden Sie verschiedene Apps, um sich mit Ihrem iPhone zu verbinden und diese Bildschirme anzuzeigen. Dies endet diese Vorträge, und gehen wir zur nächsten Vorlesung. 55. Typography und Skalen: Jetzt entwerfen Sie für Android-System. Es gibt also zwei Dinge, die Sie verstehen müssen. Was ist DPI und was ist SP, das ist die vier Größe Skalierungseinheit für Android-Systeme, die die Skalierung unabhängige Pixel oder skalierbare Pixel wie diese genannt wird , die Sie hier sehen können. Nun, wenn Sie zu diesem Material gehen, Google.com Typografie Stile, können Sie sehen, dass sie alles ausgelegt haben und nicht in einer Art und Weise wie Apple tut, aber ich denke, es ist besser als sie, weil es zeigt eine Menge verschiedener Möglichkeiten für Display 4,3 ,2,1. Hier haben sie einige Maßstabstypen hier drüben. Sie können hier die typographische Skala 12, 14, 16, 20 und 34. Also können Sie all diese verwenden, ich denke, sie haben zwei oder manchmal Lücken von vier. Hier haben sie einige Beispiele wie Titelüberschrift Anzeige 2, 3, 4, Unterüberschrift, Körper 2, Körper 1, Untertiteltaste. Sie verwenden 12sp dafür. Sie erwähnen auch alle Größen hier drüben, 112sp, 56, 45. Dies ist eine sehr schöne Skala. Es hat eine Menge, man kann unbegrenzte Variationen sagen. Hier sind einige Bildschirme, die Sie zeigen Ihnen zum Beispiel, wie wir alle Größen in unserem Photoshop interpretiert verwenden , während Sie für Android entwerfen. Nun, es gibt zwei Dinge. Einer ist, was ist DPI? DPI ist im Grunde die verschiedenen Bildschirmgrößen Auflösungen, die von Google unterstützt werden. Dies sind LDPI niedrig, DPI, mittlere DPI, hoch, extra hoch, extra hoch, extra hoch, extra hoch, extra extra hoch DPI. Im Gegensatz zu Apple haben sie viele Auflösungen, 1,5x, 2,0x, 3x, 4x, Originalgröße und 0,75x, was sehr in Ordnung ist. Nun, wie diese berechnet werden, wenn Sie zu diesem kleinen Werkzeug gehen können, können Sie hier sehen, es ist sehr einfach Rechner, um verschiedene Größen und Skalen zu berechnen. Wenn Sie nun zu diesem MDPI wechseln und einen Zoll hier drüben setzen, ist es im Grunde ein Zoll auf dem Bildschirm und es enthält 160 Pixel, was gleich diesem MDPI ist, der ebenfalls 160 ist. Also bei mittlerer DPI, Ihrer Bildschirmauflösung und Ihren Pixelgrößen werden sie abgestimmt. So werden wir mit dieser Bildschirmgröße MDPI entwerfen. Mach dir jetzt keine Sorgen um diese 160. Okay, jetzt skalieren unabhängige Pixel auch 160, so dass unsere alle Einheiten auf dieser Bildschirmgröße gleich den tatsächlichen Werten sind . Sie können auch Dichteunabhängiges Pixel sehen sie sind auch 160. Alles andere ist 160, 160 und 160. Wenn Sie nun zu diesem HDPI gehen, können Sie jetzt sehen, dass die Bildschirmgröße innerhalb dieses 1 Zoll 240 Pixel beträgt. Also versuchen Sie einfach, dieses Konzept in einem Zoll eines Bildschirms zu verstehen , jetzt haben wir 240 Pixel gepackt. Also alle anderen Dinge haben sich geändert, aber die skalierbaren unabhängigen Pixel sind die gleichen und Dichte Pixel unabhängige Pixel sind die gleichen, weil sie unabhängig von den Pixelwerten sind. Um Verwirrung zu vermeiden, werden wir für dieses MDPI entwerfen und wir können unsere Ressourcen und alles extrahieren. Wir können unseren Programmierer sagen, dass dies die Größe ist, die ich verwendet habe, wir brauchen nichts zu berechnen. Jetzt für vier Größen verwenden wir diesen SP. Also unsere Programmierer oder Android-Entwickler, werden sie die vier Skala oder vier typographische Skala in diesen Größen benötigen. 56. Entwerfen von mehreren for: Lassen Sie uns einen einfachen Bildschirm entwerfen, vielleicht etwas sehr Einfaches. Jetzt werden wir mit einer Datei von 320 x 480 Höhe beginnen. Sie können die Höhe erhöhen, vielleicht 600, und drücken Sie „Okay“. Lassen Sie die Auflösung auf 72, da unsere skalierungsunabhängigen Pixel die gleiche Größe haben werden. Dies ist die Größe, die wir entwickeln werden, das ist MDPI. Sie können es auch auf 40 ändern, wenn Sie wollen, aber 320 von 600 scheint mir gut. Drücken Sie „Okay“, färben Sie mir dieses Dokument nicht aus, und das ist unsere Größe. Vergrößern wir uns ein wenig. Nun, für die Überschrift, werden wir Googles Schriftart verwenden, die Roboto ist. Lassen Sie uns diesen Roboto fett vielleicht verwenden, und 56 Punkt. Ich glaube, sie haben 56 da drin. Ich werde 56 hier drüben benutzen. Dies ist eine sehr große Überschrift für uns und wir werden 56 verwenden, gleich. Lassen wir es Auto so überlassen, oder vielleicht können wir 56 hier drüben benutzen, 56. Sie haben kein Tracking angegeben, also werden wir unsere eigenen Augen und das Bauchgefühl benutzen. Grundsätzlich Bauchgefühl oder vielleicht können wir hier Null verwenden, vielleicht haben sie eine Schriftart wie diese entwickelt. Das ist eine Überschrift, und dann gehen wir zu der Unterposition. Unterposition sollte etwas 24 Schlagzeile sein, 24 sp, also wird dies 24 sein. Die Berechnung ist so einfach. Lasst uns das nach oben bewegen. Wir werden nicht Bold, sondern vielleicht Light Schriftart für diese verwenden. Nun vielleicht werden wir diese graue Farbe so verwenden. Lassen Sie es uns näher dran bringen. Verkleinern Sie, um zu sehen, wie es aussehen wird. Wir können _do _it, das ist unsere große Überschrift und wir können auch Ja sagen, nur um sicherzustellen, dass es gut aussieht. Das ist unsere große Überschrift und dann werden wir einen Text hier drüben einfügen. Wir werden den Typ Lorem Ipsum verwenden. Die Größe, die wir verwenden werden, ist, dass wir 40 sp gehen, so 14 sp ist für Körper 14 Punkte. Lassen Sie uns 18 Punkte für die führenden verwenden, so. Vielleicht, ich denke, vielleicht mehr als 18 ist gut, 20 ist gut. Wir haben unsere führende alles auf dieser Bildschirmgröße eingestellt. Für dieses MDPI handelt es sich um vier MDPI. Alle Größen sind gleich. Vielleicht können wir diese 56 auf 45 reduzieren, weil 56 zu groß aussieht. Das hier ist 56, bewegen wir es zurück auf 45. Ja, ich denke, es ist besser, 45 und 45. Halten Sie es einfach so, vielleicht ist Rot gut. Lassen Sie es uns ein bisschen darunter bewegen. Verschieben Sie den Text so weiter unten. Lassen Sie uns die Farbe für diesen in diese dunkle schwärzliche Farbe ändern. Das ist unser Kunstboard. Lassen Sie uns die Überschrift oben bewegen, vielleicht so. Sieht gut aus. Jetzt haben wir unsere Rubrik, Unterposition und alles nach dem Maßstab diesertypografischen Skala nach Materialdesign, Google Material Design, verschoben und alles nach dem Maßstab dieser . Ich glaube, das war's. Wenn Sie für einen größeren Bildschirm entwerfen möchten, sollten Sie Ihre Schriftgrößen anpassen und mit den jeweiligen Auflösungen multiplizieren . Mal sehen, ob sie hier ein paar Größen haben. Dies ist HDPI, die 800 mal 480 ist, also lassen Sie uns für dieses Design entwerfen. Oder vielleicht können wir unsere Bildgröße auf die 150 erhöhen. Ich glaube, es sind 150. Es wird 150 mal 150 sein, und so sind wir auf die andere Bildschirmgröße gegangen. Nun, wenn Sie zu diesem gehen, können Sie die Pixel sehen. Die Höhe beträgt 900 und die Breite 480. Es ist sehr einfach, von einem zum anderen zu wechseln. Wenn Sie zum nächsten gehen möchten, können Sie auch zu diesem 720 gehen. Ändern 720 in der Breite hier drüben, so, und Sie können sehen, dies ist, wie wir in Richtung der nächsten Bildschirme XXHDPI verschieben , 960 von 1600. Grundsätzlich ist es die Breite, mach dir keine Sorgen um die Höhe. Wir werden auf 960 umsteigen. Jetzt können Sie sehen, dass alle unsere Textgrößen auch mit ihm zunehmen. Wir sollten uns keine Sorgen machen, weil wir in unseren Photoshop-Einstellungen Punktgrößen haben. Wie Sie es einstellen können, können Sie zu diesen Einstellungen gehen und zu Einheiten & Lineale und Ihren Typ auf Punkte setzen. Es ist empfehlenswert, es auf „ Punkte eingeben“ zu setzen , weil Sie beim Entwerfen für mobile Bildschirme verwenden. So haben wir auf verschiedene Bildschirmgrößen gewechselt und das sind 100 Prozent. Sie können sehen, wie es sehr schön aussieht. Es ist Roboto Schriftart. Sie können andere Variationen von Roboto verwenden, wenn Sie möchten, aber ich bleibe gerade mit einer Roboto-Schriftart. Hier geht es um DPIs und SPs, skalierbare Pixel und verschiedene Größen. Sie sollten Ihren Entwicklern diese Größen geben. Im Moment haben wir, ich schätze, das hier ist okay. Ich denke, ich sollte zu meinem ursprünglichen Format zurückkehren. Schritt rückwärts, Schritt rückwärts, Schritt rückwärts. So funktioniert es nicht. Vielleicht sollten wir die Bildgröße wieder auf 320 ändern, und so ist unsere tatsächliche Textgröße im Grunde angelegt. Mal sehen, was das war. Es sind 14 Punkte, dann 24 Punkte oder im Grunde 45 Punkte. Wir werden ihnen sagen, dass 45, 24 und 14 sp verwendet werden. Hier geht es um die Typografie auf Ihren Android-Apps und Mobiltelefonen. Ich habe Ihnen gesagt, wie Sie das auch in Photoshop tun und wie Sie verschiedene Bildschirmgrößen berücksichtigen können. Das ist es. Wenn ich etwas anderes einfälle oder du meine Hilfe brauchst, stelle mir immer Fragen. Ich denke, wir sollten jetzt zum nächsten Vortrag übergehen. 57. Für Entwickler → Google Fonts verwenden: Die erste und wichtigste Wahl für jeden Entwickler ist die Verwendung von Google Fonts. Sogar Designer lieben es, sie zu verwenden, weil sie leicht gehostet werden können und sie für Designer und Entwickler einfacher zu verwenden sind. Sie müssen sie nur mit nur einer Zeile Code einbetten und Sie sind bereit zu gehen jetzt gibt es 804 für Familien, die völlig kostenlos sind und für Sie gehostet werden. Gehostet bedeutet, dass sie sich auf einem anderen Server auf Google-Servern befinden. Das Problem mit diesen Google Fonts ist auch die Schriftqualität. Manchmal ist das Kerning deaktiviert, manchmal Anti-Aliasing-Probleme. Anti-Aliasing bedeutet, dass Kanten gezackt sind und nicht glatt sind. Dies geschieht mit vielen Google Fonts. Manchmal sind die meisten von ihnen gute Qualität, aber einige von ihnen haben sie gezackte Kanten. Es gibt noch wenige von den guten Dingen über Google Fonts. Lassen Sie uns zu Google Fonts wechseln, jetzt gibt es noch eine Sache, Sie können einfach eine Familie auswählen und wenn Sie es anpassen, müssen Sie nur diese Codezeile einbetten und Sie sind bereit, diese Familie zu verwenden. Dies ist der Code zeigt Ihnen auch die Ladezeit, die schnell ist, wenn Sie versuchen, es anzupassen, es hat nur eine [unhörbar] jetzt. Lassen Sie uns eine andere versuchen, wie diese, eins mit diesem, wir werden einige mehr auswählen. Sie können sehen, es zeigt Ihnen, wie die Ladezeit sein wird. Auch wenn Sie ein Designer sind, sollten Sie Ihre Schriftarten einfach aus dieser Google New Fonts Preview auswählen. Eine weitere Sache ist, wenn Sie versuchen, diese Ansicht Exemplar auszuwählen, können Sie wirklich viele tolle Dinge hier sehen, wie all die verschiedenen Stile, so verschiedene Stile hier drüben dann haben wir Lager, was sehr schön ist. Warum die Mühe, Stunden zu verbringen, versuchen Sie, verschiedene Schriftarten zu entsprechen. Warum sollten wir nicht nur integrierte oder bereits übereinstimmende Formulare verwenden, wählen Sie eine, die Sie hier mögen oder die wirklich näher an Ihren Projekten ist. Versuchen Sie, dieses zu verwenden, auch es zeigt Ihnen Nutzung wie viel es in verschiedenen Ländern oder verschiedenen Bereichen verwendet wird, und das ist, wie viele Websites es dient. Es ist ein großartiges Werkzeug, um Ihnen den Einstieg zu erleichtern, eine Codezeile zu kopieren, von hier aus entblößt zu werden. Es gibt eine Menge guter Dinge daran. Aber trotzdem können Sie sehen, wenn Sie einige der Schriftarten sehen, sie haben könnten, einige der gezackten Kanten, wie Sie hier sehen können, ist dies nicht sehr glatt auf meinem Bildschirm. Auch können Sie sehen oder hören Merriweather Sans, Sie können sehen, zwischen A und M Verdunkelung ist ein bisschen aus. Das sind also einige Dinge, und ich denke immer noch, dass es eine sehr gute Option ist, mit Google Fonts zu beginnen, weil Entwickler es lieben werden, weil es für sie sehr einfacher ist, es zu benutzen. Kopieren Sie einfach eine Codezeile und sie sind bereit zu gehen Wenn Sie ein Entwickler sind, sollten Sie mit Ihrem Designer kommunizieren. Wenn Sie ein Designer sind, sollten Sie mit Ihrem Entwickler kommunizieren, um zu beginnen und zu wissen, was die Möglichkeiten. Fahren wir mit der nächsten Lektion fort. 58. Für Entwickler → Verwendung von Premium: Lassen Sie uns nun über Premium-Schriftarten sprechen und warum sollten wir diese Premium-Schriften kaufen und was sind die Edelsteine in ihnen versteckt? Nun, das erste, was ist tolle Qualität, okay? Sie sind wirklich großartig. Sie haben ein tolles Kerning. Sie wurden von großen Typografen und typografischen Unternehmen, Typengießereien, entworfen. Kerning ist großartig, und sie haben viele Verknüpfungen und einige zusätzliche Optionen. Anti-Aliasing ist gut. Sie haben keine gezackten Kanten, ihre Webschriftarten sind großartig. Jetzt ist der größte Rand, den Sie haben, ein benutzerdefiniertes Aussehen, okay? Jetzt haben Sie eine Marke, Sie haben ein Team im Kopf, also wenn Sie eine Premium-Schriftart verwenden, wird es eine Menge Einfluss auf Ihre Zuschauer und Benutzer geben, okay? Wählen Sie mit Bedacht, Sie können Premium-Schriftarten kaufen und Sie können sie in Ihrem Branding, auf Ihren Websites, in Ihren mobilen Apps überall verwenden. Kunden werden Ihre Firma oder Ihr Unternehmen oder Produkt sofort von ihrem Typ erkennen , okay? Jetzt gibt es einige Nachteile, die damit verbunden sind. Die Probleme, die wir haben, ist, dass sie teuer sind. Einige Schriftarten, wenn Sie versucht, sie zu kaufen, sie sind $700 die ganze Familie, so ist es sehr teuer. Sogar, Ich mag wenige Telefone, die vier oder $500 sind und manchmal denke ich, dass jemand mir solche Schriftarten geben sollte, weil ich sie nicht kaufen kann. Okay, die andere Sache ist, dass sie vielleicht nicht umsonst gehostet werden, okay? Wenn Sie eine Schriftarten von dieser Website kaufen, myfonts.com, ist dies meine Lieblings-Website. Sie können hier sehen, ich bin eingeloggt. Ich habe eine Menge Schriftarten von hier gekauft, viele Familien, die Sie hier sehen können. Jetzt ist der Vorteil solcher Websites, dass Sie Ihr Team genau das finden oder abstimmen können , wonach Sie suchen. Du kannst hier drüben verschiedene Buchstaben sehen, es gibt Formen, okay? Es verwendet, die Sie hier sehen können. Britannica, dann Storytelle, okay? Es gibt Millionen von Themen. Sie können nach großen Künstlern suchen, Sie können nach speziellen Angeboten suchen. Sie können sie mit einem gewissen Rabatt kaufen. Außerdem können Sie nach einigen freien Schriftarten suchen, wenn Sie möchten. Ich schlage wirklich vor, dass Sie auf dieser Website abonnieren sollten und sie werden Ihnen einige kostenlose Schriftarten senden. Wenn Sie einige kostenlose Schriftarten suchen möchten, können Sie solche hier drüben und sie in Ihren Warenkorb legen und sie im Web oder Ihren Designs verwenden. So habe ich eine Menge von kostenlosen Premium-Schriftarten. Wie auch immer, das ist die Seite, die ich wirklich liebe. Es gibt auch viele Gestaltungsideen. Wenn man sich diese Schriften und ihre Präsentation anschaut, gibt es auch viele Ideen, also kaufen Sie einige gute Schriftarten von hier aus und kaufen Sie sie mit Bedacht. Vielleicht brauchen Sie nur ein, zwei oder drei Stil, nicht die ganze Schriftfamilie. So beginnen Sie mit Premiumschriftarten. Es gibt noch eine, die Typekit ist, die mit dieser Fotoshop-Lizenz verwandt ist. Sie können Typekit auch kaufen, Abonnement-basierte Website mit vielen Schriftarten. Ich weiß nicht, dass es typekit.com oder was auch immer ist, aber ich denke, es ist von der Firma Adobe und da ist es. Ich glaube, ich bin davon abgemeldet, schätze ich. Wie auch immer, jetzt bin ich eingeloggt. Okay, jetzt können Sie hier sehen, gibt es eine Menge von Klassifikationen, die Sie jeden hier auswählen können und wie mono handschriftliche, dekorative geschabte Platten aus, wenn dies sehr gut ist und Sie können sie hinzufügen. Sie können diese Schriftarten in Ihrer Webleiste, mobilen Apps oder sogar in Ihren Designs in Photoshop verwenden. Ich habe jetzt, ich denke, einige 276 Schriftarten und wenn Sie zu einem anderen Plan arbeiten, könnten Sie viel mehr Optionen haben. Das ist ein anderer Weg. Diese Schriftarten werden auf Adobe Typekit gehostet, so dass sie auch wie Google funktionieren, denke ich. Auf diese Weise gibt es verschiedene Optionen, um Premium-Schriftarten zu verwenden. Es könnte mehr Websites wie diese geben. Wir haben dieses Adobe Typekit. Hier kaufen Sie verschiedene Schriftarten und Webschriftarten. Okay, dann können Sie hier Web-Fonts sehen, auch wenn Sie zu einer Schriftart wie dieser gehen. Sie können ihre Webschriftarten sofort einsehen. Wenn Sie hier klicken, können Sie sehen, wenn Sie hier klicken, können Sie sehen, wie diese Schriftart im Web aussehen wird, hier ist sie und Sie können hier sehen. Wenn Sie kaufen möchten, können Sie in den Kaufoptionen sehen. Wir haben Desktop- und Web-Fonts, so müssen Sie immer auf Web-Schriftart klicken, wenn Sie gehen, um es im Web zu verwenden, wenn Sie gehen, um es in der App oder Veröffentlichung wie Buch oder so etwas verwenden, dann müssen Sie mehr Lizenzen kaufen. Hier geht es um Premium-Schriftarten und ihre verschiedenen Methoden, Abonnementbasierte zu kaufen, oder Sie müssen die gesamte Schriftart ihrer Lizenzen erwerben, damit Sie möglicherweise ein gutes Verständnis haben und gehen Sie mit der nächsten Lektion über. 59. Für Entwickler → CSS Schriftgröße: Wenn es um die Größenänderung von CSS-Einheiten von Webschriftarten geht, gibt es eigentlich zwei Kategorien. Eine davon sind absolute Einheiten wie Pixel, die wir in der Vergangenheit oft benutzt haben, vielleicht vier oder fünf Jahre zurück. Nun gibt es eine andere Kategorie, die relativ ist. Sobald dies reaktionsschnell und adaptiv ist, wird Web Design immer beliebter und es ist jetzt in diesen Tagen. Es ist wirklich wichtig, Websites zu entwickeln, die relative Pixel-Haupteinheiten haben. Wir haben; em, rem vw und%. Pixel wird heutzutage sehr weniger verwendet. Vielleicht im Körper oder so etwas in der Basisschriftart müssen wir dies möglicherweise verwenden. Andernfalls gibt es sehr weniger Verwendung für Pixelwerte, Nun, zuerst werden wir sehen, dass em und% sind beide relativ zu den Eltern. Sie sind tatsächlich ähnlich miteinander. Wenn sie übergeordnete div und dann ein anderes übergeordnetes div haben, kann es einige Probleme verursachen. Ich werde es in einem Programmier-Übungsvideo erklären, also mach dir keine Sorgen, wenn du es jetzt nicht verstehst. vw bedeutet die Breite des Ansichtsfensters, sodass es relativ zum Ansichtsfenster ist, welches das Browserfenster ist, das unser Benutzer geöffnet hat. Es ist sehr reaktionsschnell, wenn Sie versuchen, Ihre Ansichtsfenstergröße oder Ihren Browser zu drücken, Ihre Überschrift oder Schriftart wird auch gequetscht. Es wird seine Größe so verschoben, dass es relativ zum Ansichtsfenster ist. Wir werden sein Beispiel mit dem Code sehen. Ich werde Ihnen nur einen kurzen Überblick geben. Nun, der letzte ist Rem. Rem ist relativ zur Schriftgröße des Basiskörpers. Wenn Sie Ihre Körperschriftgröße auf 18 Pixel eingestellt haben, ist ein rem gleich 18 Pixel. Es ist nicht abhängig von einem Eltern-Div oder irgendetwas. Also in Ihrer gesamten Website, Ihr ganzes WordPress Blog. Wenn Sie rem als Schriftgröße verwenden, wird es immer nach der Schriftgröße des Textkörpers suchen und die Berechnung entsprechend durchführen. Zwei Rem werden 36 Pixel sein. Dies ist sehr großartige Funktion, wenn Sie Konsistenz behalten möchten. Lassen Sie uns in den Codierungsabschnitten ausgraben. Fahren wir mit den nächsten Codierungsstunden fort. 60. Für Entwickler → em: Zuerst werden wir auf em Einheiten schauen, also, wie wir spezifizieren werden. Mal sehen, hier ist ein Beispieldokument, das ich für Sie erstellt habe. Auf beiden Seiten verwenden wir Em Einheiten, aber in verschiedenen Situationen und verschiedenen Eltern. Mal sehen, wie das vermasseln kann, so ein Problem wie wir auf der linken Seite haben. Auf der rechten Seite haben wir die richtige Verwendung. Bleiben wir in die Codierung. Es gibt nichts Ausgefallenes. Mal sehen, was wir in unserem HTML-Dokument haben. Ich habe diese Normalisierung importiert, um zu normize.min.css. Wenn Sie nicht wissen, was normalisieren ist, ist es im Grunde, alle Browser-Stile und andere Probleme zu beseitigen, Unübereinstimmungsprobleme, die wir haben. Es wird Ihre Stile zurücksetzen. Dann haben wir diese Google API. Wir importieren diese em im Grunde. Wir haben diese Source Sans Pro-Schriftart importiert, und dann haben wir ein Stylesheet damit verknüpft. Das war's. Dies ist meine Überschrift für den Header, es hat nichts mit dem Beispiel zu tun. Min Code ist hier drüben. Dies ist ein Container Überschrift 1, 2, 3, body tags, span. Dann haben wir einen kleinen Text, klein, und dann haben wir einen weiteren Container, der auf der rechten Seite hier drüben ist. Dieser ist ein weiterer Container. Links ist der Container. Wir haben zwei Container, rechts und links auf der linken und rechten Seite. Nun, was hier passiert, ist, wenn Sie sich diesen Container ansehen, gehen wir zu der CSS style.css. Hier habe ich alle Größen angegeben. Jetzt, in meinem HTML-Element, sage ich für Größe 18 Pixel, also Zeilenhöhe 1,5. Wenn Sie Ihre Basisschriftart einrichten möchten, verwenden Sie immer HTML oder Ihre Körper-Tags. Sie können auch init verwenden, aber ich bevorzuge es hier drüben. Sie können in beiden verwenden. Sie können diese Schriftgröße verwenden. Wir stellen unsere Basisschriftgröße fest. Die Basislinie ist jetzt 27. Wenn Sie 18 mit 1,5 multiplizieren, ist es 27. Jetzt können Sie hier sehen unsere Absatzgröße ist 0.9 em. Wenn wir 18 Pixel multipliziert mit 0,9, 16,2 Pixel berechnen , ist die Zeilenhöhe 1,25. Gleich wie die anderen Berechnungen wie drei em, 18 Pixel multipliziert mit 3, und so weiter und so weiter. Was wir tun, ist, dass wir unsere Basisschriftart mit unserem em-Wert in jedem Element multiplizieren. Wenn wir Absatzelement haben, multiplizieren wir seinen Wert mit dem HTML. Unser em funktioniert in gewisser Weise, als hätten wir diese Em Einheit. Es sucht nach dem unmittelbaren Elternteil. Wenn sich der Absatz in diesem Körper und HTML-Tag befindet, gibt es kein anderes div, dann wird es 18 Pixel sein. In diesem Fall, wenn Sie sich unseren Container-Code ansehen, zeigen wir Ihnen, was meine Container haben. Wenn Sie sich diesen Container auf der linken Seite ansehen, ist dies der linke. Fügen wir hier drüben hinzu. Jetzt können Sie sehen, linken Behälter hat eine gewisse Größe für die Größe, die zwei em ist. Aber dieser auf der rechten Seite, dieser Container hat keine Schriftgrößenangabe. Was hier passieren wird, ist, dass alle Elemente in diesem div mit 18 Pixel-HTML-Basisschriftart berechnet werden . Das wird hier drüben passieren. In diesem Container, jede Überschrift, jedes Absatzelement, alles, was wir sehen, können Sie auf der rechten Seite sehen, es wird auf der Ebene unseres HTML-Element-Basisschriftgröße berechnet. Wenn Sie darauf klicken und Element inspizieren, können Sie dies auch in Chrome tun. Wenn wir zu diesem berechneten Box-Modell gehen, dann wird dies berechnet, Sie können Schriftgröße sehen 16,2 Pixel. Also 18 multiplizieren mit 0,9, es ist die richtige Schriftgröße. Aber wenn wir uns den Absatz innerhalb dieses Containers ansehen , der der linke ist, ist es 32.4. Wie kommt es, dass dieses 32,4 Pixel berechnet wurde? Mal sehen, wie das berechnet wurde. Alles, was ein bisschen anders ist, ist in diesem Container. Wir haben zwei Em. Dieser Container hatte ein übergeordnetes Element, das HTML war. Unsere Grundschriftgröße war 18 Pixel multipliziert mit 2, ist gleich 36 Pixel. Nun, in dieser Situation haben unsere Eltern die Basisschriftgröße geändert hat. Alles, was sich in diesem Container befindet, wird diese 36 Pixel als Basisschriftart verwenden, da ihr Container jetzt eine andere Basisschriftart hat. Ich verwende Tastenkombination für meinen erhabenen Text. Also 18 multipliziert mit 36 Pixel ist unsere Basisschriftart für dieses Container untergeordnete Elemente. Grundsätzlich bedeuten untergeordnete Elemente, dass alles in diesem Container sein Kind ist. Hier können wir sehen, ob Sie sich das ansehen, warum dies als 32.4 berechnet wurde, weil unsere Absatzgröße 0,9 war. Wenn wir 36 Pixel multipliziert mit 0,9 multiplizieren, werden es 32,4 Pixel sein. So wurde unser Absatz berechnet. So wird unsere Absatzgröße berechnet und auch alle unsere Überschriftengrößen. Drei em in dieser Situation bedeutet jetzt, dass wir 36 Pixel multipliziert mit 3, ist gleich 108, 108 Pixel ist unsere Überschrift 1 in dieser Situation. Mal sehen, ob diese Überschrift 1 108 Pixel ist oder nicht. Lassen Sie es uns inspizieren und Sie können hier drüben sehen. Schriftgröße, 108 Pixel, auch die Zeilenhöhe beträgt 108 Pixel. So funktioniert em. Hier haben wir nur ein Elternteil, das HTML ist. Dieser Container, es hat keine Schriftspezifikation. In diesem Fall haben wir Container in diesem HTML-Element und wir haben zwei Ebenen dieser Berechnung. Em ist im Grunde relativ zu seinem unmittelbaren Elternteil. Sein unmittelbares Elternteil war dieser Container. Wir hatten diese Schriftgröße zwei em, so dass sich nun seine Grundschriftgröße geändert hat. Wenn Sie es verwenden möchten, verwenden Sie es sorgfältig und stellen Sie sicher, dass Sie gute relative Berechnungen verwenden. Hier geht es um Em Einheiten. Gehen wir zum nächsten. 61. Für Entwickler → Umfassende Schriftart: Lassen Sie uns über Rem Unit oder CSS Schriftgröße Spezifikation sprechen. Dies ist mein Favorit, es ist relativ zum Körper. Mal sehen, wie es funktionieren wird. Ich setze meine Basisschriftgröße auf HTML und nicht auf Körper. Zweiundsechzig Punkt fünf Prozent bedeutet 10 Pixel, die 16 Pixel multiplizieren 0,625, was gleich 10 Pixel ist, so wird es gleich 10 Pixel sein. Dies ist manchmal Designer tun Designer oder Viertel Sie verwenden diese Technik, es ist sehr alt, um Ihre Berechnungen einfacher zu machen, aber die empfohlene ist vier Größe 100 Prozent, so verwenden Sie immer diese. Ich benutze nur für diese Übung, nur um Ihnen einige Konzepte zu erklären. Jetzt wird rem immer nach diesem HTML oder innerhalb dieses Body-Tags suchen, je nachdem, was die Basisschriftart ist. Wenn wir kein HTML haben, wird es im body-Tag aussehen. Es wird nach dieser Größe suchen, die 10 Pixel ist, und alle seine Berechnung wird darauf basieren, also 10 Pixel. Unser Absatz hier ist 1,6 rem, das 10 multipliziert mit 1.616 Pixeln ist. Dann unsere Spannweite 2,4 rem, die gleich 24 Pixel sein wird, warum? Es ist einfacher zu berechnen, weil wir hier drüben eingestellt haben. Dann innerhalb des h_2 es 36 Pixel, das sind 24, 2016, 14 Pixel so weiter und so weiter. Jetzt innerhalb des Containers, wenn Sie versuchen, eine Schriftgröße anzugeben, wie ich gerade angebe, 24 Pixel. Mal sehen, ist es für diese Größe als unsere Basisgröße zu suchen oder es wird für diese Größe zu suchen. Ich habe es jetzt in Chrome geöffnet, nur um Ihnen einen Vorgeschmack auf die Chrome-Ebenen zu geben. Jetzt können Sie sehen, es ist ein effektives und unsere Schriftgröße ist, dieser wird sein, mal sehen, was die Schriftgröße berechnet wird. Mal sehen. Die Zeilenhöhe beträgt 48 Pixel. Dann gibt es unsere Schriftgröße, es wird in der f, c, d, e, f. Hier haben wir. Schriftgröße 48 Pixel. Es war ein bisschen schwierig, diesen Wert in Chrome zu finden , weil er viele andere Werte wie flex hat, ein anderer der versteckte. Dies ist schwierig, es zu finden, aber hier haben wir Schriftgröße 48 Pixel. Wir haben 4,8 rem angegeben. Das bedeutet, dass es nach diesem Wert berechnet wird. Es ist nicht auf der Suche nach diesem Wert oder nicht einmal in Erwägung ziehen. Wir sollten immer sicherstellen, dass dies mit dem Basisschriftelement funktioniert. Es wird immer konsequent sein. Wenn ich alle Größen ändern möchte, werde ich einfach Ihre hier ändern. Eine Änderung steuert alles andere. Das ist die Sache, die ich liebe, erfrischen. Das ist wirklich magisch und ich liebe diese Funktion, dass Sie alle Schriftgrößen relativ zu einem Element steuern können , das dieses HTML ist, oder wenn Sie Körper haben, so verwenden wir diese HTML CSS Rem Sizing Unit, und wir verwenden HTML als unsere Basisgröße und ändern Sie alle Werte entsprechend. Normalerweise versuche ich, rem in meinen Projekten zu verwenden, wenn ich eine Zielseite habe, die ich versuche, rem zu verwenden , weil ich dann weiß, dass alle meine Schriftgrößen relativ zu diesem sind. Wenn ich mich ändern möchte, kann ich mich hier ändern und alles wird auf allen Seiten oder im ganzen Thema geändert. Stellen Sie sicher, dass Sie diese Übungen durchführen und die Beispieldateien herunterladen. Ich werde alle diese Dateien hochladen, damit Sie sie auschecken können. Fahren wir mit der nächsten Lektion fort. 62. Für Entwickler → % Schriftart: In dieser Lektion werden wir die prozentuale Einheitenverwendung in CSS-Schriftgrößenspezifikationen betrachten . Wenn Sie Prozentsatz verwenden, ist es auch ähnlich zu emulieren, deshalb habe ich vorher emulieren diskutiert. Nun, hier in meinem Körper, was meine Hauptgrundschriftgröße ist. hier gebe ich die Basisschriftgröße gleich 100 Prozent an, was 16 Pixel bedeutet. Für fast jeden Browser Standard, 100 Prozent ist 16 Pixel Wert. Es wird auch als Standard betrachtet. Stellen Sie also sicher, dass Sie die Schriftgröße 100 Prozent in Ihrem Körperelement oder Ihrem HTML-Element angeben. Jetzt haben wir linke und rechte Container. Im linken Container können Sie sehen, dass ich die Schriftgröße 140 Prozent angebe. Im richtigen Container gibt es keine Schriftart, daher wird alles in diesem Container auf der Basis dieses Körpers berechnet, da dies ihr übergeordnetes Element ist. Es gibt keine Spezifikation der Schriftgröße in den anderen übergeordneten Eltern wie diesem, aber dieser hat eine Schriftgrößenspezifikation von 140 Prozent. Also wird alles in diesem linken Behälter auf die gleiche Weise behandelt wie wir berechnet M. Lassen Sie mich Ihnen hier ein Beispiel zeigen. Dies ist die Verwendung von Prozenteinheit, und Sie können auf dem linken Container sehen, alles größer ist, und auf dem rechten Container ist alles die richtige Größe. Warum haben wir dieses Problem? Es ist auch das gleiche Problem mit M-Einheit, dass das unmittelbare übergeordnete Element dieses linken Viertels, dieses, H1, H2 und H3, sie haben ihre übergeordnete Größe auf 140 Prozent festgelegt. Es bedeutet, dass die übergeordnete Größe 16 multipliziert mit 1,4, das ist 140 Prozent. Also 22.4 ist ihre Grundgröße. Jetzt haben wir hier 22.4 Pixel als unsere Grundgröße. Wenn wir 22.4 haben, dann beträgt die Schriftgröße 100 Prozent 22,4. Sie können hier sehen, wenn wir zu diesem Absatz gehen und mit der rechten Maustaste und inspizieren Element, wird es gleich 22.4 sein, weil es jetzt nach seinem Elternteil berechnet wird, der dieser linke Container ist, dieser über hier. Nun, das ist auch das gleiche wie M, also werde ich Ihnen keinen sehr detaillierten Vortrag über diesen hier zeigen. Sie können hier für die anderen Größen sehen, die ich rem verwende, also lassen Sie es jetzt entfernen, um Verwirrung zu vermeiden. Also Rubrik 1, 2, 3. Jetzt können Sie hier auf meiner Überschrift 3 sehen, ich verwende den absoluten Wert 36 Pixel. Lassen Sie uns in beiden Beispielen sehen, rechts und links können Sie Überschrift Ebene 3 fest sehen, also ist es 36 Pixel, aber alles andere ist in relativer Einheit, die Prozentsatz ist. So haben sie unterschiedliche Größen in beiden Behältern. Jetzt sehen Sie hier drüben, ich benutze 400 Prozent, 350 Prozent und so weiter und so weiter. Für kleine, ich verwende 90 Prozent. Ok. Es gibt eine weitere Verwendung dieses Prozentsatzes, über den ich in den späteren Vorträgen diskutieren werde , wenn wir uns die ansprechende Typografie ansehen werden Gehen wir also zur nächsten Lektion über. 63. Für Entwickler → vw Einheit: Hier ist ein bisschen Einführung in diese VW awesome Einheit und ich liebe es wirklich, wie es erweitert und Verträge auf responsive Websites. Hier sind drei Überschriften und dann haben wir einen Absatz hier drüben und Sie können sehen, Absatz ist sehr groß. Lassen Sie mich erklären, warum es sehr groß ist. Nun, wenn wir zu diesem Container gehen, sorry, Stil CSS. Also, was passiert hier drüben? Das erste, was ist HTML-Schriftgröße ein 100 Prozent, auch diese Containerbreite ist 80 Prozent und Schriftgröße in diesem übergeordneten Container ist auch 24. So können Sie hier oben sehen diese VW-Einheit, relativ zur Größe dieses Browserfensters. Es hat also keinen Einfluss auf diese 100 Prozent oder diese Schriftgröße 24 Pixel. Was also passiert ist, ist, dass ich für eine Absatzschriftgröße auf 4,5 vw eingestellt habe. Sie können damit experimentieren. So können Sie sehen, dass es sehr groß ist. Diese Absatzgröße auch die Überschriften sind sehr groß. Überschriftengrößen sind auch in vw 15 Ansichtsfensterbreite und dann haben wir Zeilenhöhe, andere Dinge, Ränder und Setup alles. Auch Überschrift zwei, Überschrift drei und kleiner Text ist im RAM oder Sie können sehen, ob ich versuche, dieses vw zu verwenden, dann können wir vielleicht 2.5 vw hier verwenden, so. Mal sehen, wie es wie unser kleiner Text aussehen wird. Also, kleiner Text ist so. Jetzt für Überschriften ist es sehr gut, aber für Absatztext ist es nicht wirklich schön. Lassen Sie uns also zu unserer reaktionsfähigen Ansicht wechseln. Jetzt können Sie sehen, wie ich meine Ansichtsfenstergröße erweitern und zusammenziehen, Sie können hier oben sehen 623 Pixel, Ich drücke „Strg+Umschalt+M“ auf meinem Firefox. Wenn Sie Chrome verwenden, denke ich, Sie können „Shift“ und drücken Sie „F12" und wählen Sie dieses ein Toggle Gerät. Es ist auch „Control“, „Shift, M“. So können Sie es auf verschiedenen Größen wie diese sehen , und so. Also gerade jetzt verwende ich diesen Firefox-Browser. Jetzt können Sie sehen, dass unsere Überschriftengröße relativ zu unserer Ansichtsfensterbreite ist und sie wirklich reagiert, sobald wir sie zusammenziehen. Gehen wir zu dieser 320 Pixel Breite, die iPhone fünf oder vier ist, denke ich. Okay, so wird unser Text aussehen. Aber Sie können sehen, dass der kleine Text wirklich leidet. Es ist sehr klein und Überschriftengröße ist gut auf kleinen Geräten, aber es ist sehr groß, sorry, Absatztext ist sehr groß auf großen Bildschirmen. Das ist also keine sehr gute Praxis. Wenn Sie also diesen VW verwenden, versuchen Sie es nur auf den Überschriften zu verwenden, wie Überschrift 123, nicht die kleinen Überschriften, weil sie sehr klein werden. So können sehr große Rubriken einen guten festen Nutzen bekommen. Wenn Sie einen Absatz verwenden, denke ich, dass Sie RAM-Wert oder etwas näher daran verwenden sollten, wie 1,2 RAM hier drüben. So wird es auch für den kleinen Text gut aussehen. Wir werden RAM hier drüben verwenden. Also werde ich hier einen RAM für den kleinen Text verwenden. Es gibt drei Facetten. So können wir diese VW-Einheit nutzen und versuchen, die Dinge zu vermeiden, die ich hier erwähnt habe. Verwenden Sie es nicht für Absatztext. Okay, also lasst uns zur nächsten Lektion übergehen. 64. Für Entwickler:innen → Wie vertikaler Rhythmus in CSS funktioniert: Jetzt sind Sie mit vertikalen Abständen oder vertikalen Rhythmus vertraut, aber wie diese Berechnungen tatsächlich in CSS funktionieren werden. Um Ihren vertikalen Abstand in CSS von verschiedenen typografischen Elementen oder sogar von anderen grafischen Elementen, Bildern oder Schaltflächen oder so etwas zu steuern verschiedenen typografischen Elementen oder sogar von anderen grafischen Elementen, , müssen Sie Ränder, Padding und Zeilenhöhe verwenden . Denken Sie nun daran, dass all diese Dinge relativ zu unserer Grundlinie Höhe sein werden. Wenn Sie eine Basislinie von etwa 27 Pixeln haben, Ihre Ränder und Füllstände und Zeilenhöhen Vielfache von 27 Pixeln oder vielleicht die Hälfte dieser Grundlinienhöhe. Nun, wie dies berechnet wird, ist, dass wir eine Gesamthöhe benötigen , die ein Vielfaches unserer Grundlinie sein muss. Hier können Sie sehen, dass der Rand oben 27 Pixel ist, da meine Grundlinie 27 Pixel beträgt. Der untere Rand ist ebenfalls gleich der Basislinie, und die Linienhöhe ist ebenfalls gleich der Basislinie. Die Gesamthöhe beträgt 81 Pixel. Wenn es sich um eine einzelne Zeile handelt, wird unsere Textzeile gleich 81 Pixel Höhe sein. So wird die Höhe in unserem Browser berechnet. Es kann mehrere dieser Baseline-Höhe sein, oder es sollte ein Vielfaches der Baseline-Höhe oder gleich der Baseline-Höhe sein, die auch funktionieren kann. Hier ist ein weiteres Beispiel. Irgendwann können Sie die Hälfte Ihrer Baseline-Höhe verwenden. Wenn Sie die Hälfte Ihrer Baseline-Höhe verwenden, empfehle ich nicht, diese 13,5 Pixel- oder Halbpixelwerte zu verwenden. Sie können stattdessen 13 Pixel und 14 Pixel verwenden. Die Gesamthöhe wird wieder 54 Pixel betragen. Vierundfünfzig ist auch ein Vielfaches der Grundlinie, also werden wir uns nicht darum kümmern. Es wird sehr schön in unseren vertikalen Rhythmus passen. Stellen Sie sicher, dass Sie diese 0,5 oder 0,5 Halbpixelwerte nicht verwenden . Sie können 14 Pixel und 13 Pixel verwenden. Noch eine Sache. Manchmal, wenn Sie versuchen vielleicht einen Slogan oder einige Überschriften zu erreichen, so etwas und Sie nicht die gleiche Schriftgröße verwenden möchten , die Sie bereits in Ihrem Skalierungsfaktor verwendet haben, möchten Sie von hier abweichen, wie Sie vertikalen Raum, das Element. Zum Beispiel ändere ich die Zeilenhöhe. Ich mag die Zeilenhöhe meiner Tag-Zeile nicht. Man kann sagen, sehr geräumig. Vielleicht nehmen Sie zu viel Platz ein. Ich werde es auf 32 Pixel setzen. Ich habe die Zeilenhöhe geändert und brauche tatsächlich die Gesamthöhe, die dem Vielfachen der Basislinie entsprechen muss. Was ich tun werde, ist 54 minus 32, und ich bin mit 22 Pixeln übrig. Ich teilte sie in oberen Rand und Rand unten, das ist 11 Pixel, 11 Pixel. Insgesamt ist wieder 54 Pixel. Wir haben wieder das Wort gleichen Rhythmus erreicht. Hier ist ein Beispiel für vertikale Abstände, wie wir diese Technik verwenden werden. Wenn Sie meine Überschrift sehen können, verwende ich Rand oben und Rand unten für die Überschrift und die Zeilenhöhe. Fügen Sie alle diese drei hinzu und der gesamte Block ist, wo alles grau ist. Das ist dieser Raum, der nehmen wird. Dann haben wir unseren Absatz Text. Sie können sehen, dass es alles rot ist, so dass eine Zeilenhöhe 27 Pixel entspricht. Es wird 27 Pixel für jede Zeile sein. Der Rand unten, ich benutze hier nur den Rand unten. Einige Experten schlagen vor, dass Sie nur Randunterseite für alle Ihre Elemente verwenden sollten , um vertikale Abstände zu erreichen. In dieser Situation verwende ich nur margin-bottom und ich verwende nicht weil der Rand oben im Grunde ist, dass ich von meiner Überschrift bekomme. Überschrift hat bereits viel Polsterung oder Rand am unteren Rand, also brauche ich hier nicht mehr Platz. So verwenden wir verschiedene Berechnungen. Lassen Sie mich Ihnen ein Beispiel zeigen. Hier ist Bootstrap Custom Typographic Scale. Dies ist die letzte Übung, die wir mit Bootstrap machen werden. Obwohl es sehr, sehr schwierig ist, sie vertikal in Bootstrap zu erreichen , weil es zu viele Elemente gibt, um die Polsterung und alles zu verketten. Bootstrap saugt wirklich in typografischen Skalen oder typographischen Rhythmus. Hier habe ich diese Überschrift an der Spitze. Es geht um eins. Wenn ich mit der rechten Maustaste klicken und das Element inspizieren, können Sie den Abstand um es sehen. Seine Gesamthöhe beträgt 135, was auch ein Vielfaches von 27 Pixeln ist. Momentan beträgt meine typografische Skalen-Baseline 27 Pixel. Sie können sehen, ich habe Padding oben, die 27 Pixel ist, und dann habe ich Padding unten , der auch 27 Pixel ist. So habe ich Polsterung oben und unten in dieser Überschrift verwendet. Meine Zeilenhöhe ist gleich 81 Pixel. Dies ist im Grunde die Höhe. Wenn Sie hier sehen berechnete Stile, können Sie sehen, Schriftgröße ist 61 und Zeilenhöhe 81. Sie können hier drüben sehen. Dann haben wir keinen Rand oben und unten. Wir haben Polsterung unteren und oberen Rand , der gleich 27 Pixel ist, was meine Grundlinie ist. Nun, wie Sie unten alle diese Elemente sehen können, unsere Absätze Überschrift 3, dieser ist Überschrift 2, sie sind alle perfekt mit unserem vertikalen Rhythmus oder Grundlinie ausgerichtet. Sie können sogar das Bild sehen, das ich verwendet habe, die Höhe des Bildes, das ich auf die Grundlinie gesetzt habe mehrere 1,2,3,4,5,6,7,8,9, 27 multipliziert mit neun, ich weiß nicht, was es ist, aber es ist gleich diesem. Nun, so habe ich meine Margen und alles andere verwendet. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen, das ein unschlagbares Beispiel ist. Dies ist 32 Pixel, Zeilenhöhe Text 32 Pixel. Mal sehen, wie das angelegt ist. Schriftgröße beträgt 32 Pixel, Zeilenhöhe beträgt 32 Pixel, untere Rand ist 27 Pixel. Sie können sehen, Polsterung unten und Polsterung oben ist 11 Pixel. Sie können hier 11 Pixel sehen. So habe ich meine eigenen benutzerdefinierten Einstellungen verwendet, um den vertikalen Rhythmus zu erreichen, können Sie im selben Kontext sagen. So 11 und 11 und 32 ist gleich 54. Grundsätzlich 54 ist wieder das Vielfache unserer Grundlinie, die 27 Pixel beträgt. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen, wo ich eliminiert habe, dieses hier. Das ist auch 54, aber hier mache ich keine Polsterung, keineMarge oder irgendetwas, Marge oder irgendetwas, nur die Zeilenhöhe, um dies zu erreichen. Warum habe ich Zeilenhöhe verwendet? Weil ich diesem Absatz nicht zu nahe kommen wollte. Ich benutze die Zeilenhöhe, um diesen Rhythmus oder diesen Abstand, vertikalen Abstand zu erreichen. So verwenden Sie Ihre Ränder, Padding und Zeilenhöhe, um vertikalen Rhythmus und vertikalen Abstand zu erreichen. So verwenden wir CSS, um vertikalen Rhythmus oder vertikalen Abstand zu erreichen. Fahren wir mit der nächsten Lektion fort. 65. Für Entwickler→ Gridlover Übung: In dieser Lektion werden wir so etwas erstellen. Wir werden vertikalen Rhythmus mit diesem Tool Grade-Level und Lüfter erstellen [unhörbar] diese Basehold.it. Also lasst uns anfangen und wir werden so etwas schaffen. Ich werde Sublime Text verwenden. Sie können alle Codierungsdaten verwenden, Sie können sogar Notepad verwenden. Ich werde schnell Doc verwenden, das eine Verknüpfung für HTML-Dokument ist, und ich werde es speichern, Control S verwenden, also werde ich es verwenden und es jetzt nur für Übungszwecke auf dem Desktop speichern. Dies ist unser vertikaler Rhythmus HTML. Sobald ich HTML verwende, kannst du hier drüben sehen. Jetzt werde ich diesen Bootstrap entfernen, den wir jetzt nicht brauchen Bootstrap. Was wir verwenden werden, ist, dass wir Stylesheet und einige andere Dinge wie Link rel verwenden werden. Wir werden Stylesheet für die Normalisierung Zweck verwenden. Also werden wir CDNJS normalisieren verwenden. Mal sehen, was sich mit diesem hier ausdenken wird. Ich werde mein CSS normalisieren, kopieren und zu diesem gehen. Hier haben wir unsere Normalisierung CSS und wir brauchen einige Beispieltext. Ich werde meine geheime Symbolleiste öffnen, und ich werde dieses HTML Ipsum verwenden, um Code hier drüben zu bekommen. Also, was wir brauchen, ist vielleicht brauchen wir einige Überschriften. Wo sind die Überschriften? Hier haben wir keine Überschriften. Das ist ein bisschen Gold. Es sind Überschriften und alles andere. Ich werde es hier drüben entfernen und es so einfügen. Vielleicht brauchen wir hier mehr Absätze wie diesen, und vielleicht Überschrift Ebene drei. Vielleicht können wir einen Container gebrauchen. Ich benutze MX. Deshalb ist es alles in der Abkürzung und ich fülle alles andere. Also, wenn Sie CSS kennen, werden Sie die Idee bekommen. Was ich versuche zu tun, ist, dass ich das nur auffülle und ich benutze diese Normalisierung und ich werde verknüpfen und dann auch andere Stylesheet verknüpfen. Ich werde es als, style.css verwenden. Ich werde eine andere Datei erstellen, tatsächlich ist es die erste. Das ist also die CSS-Datei, die ich hier erstellt habe. Jetzt werden wir etwas von hier benutzen, Grade-Level. Also das ist meine Einstellungen 4 Größe ist gleich 18 Pixel, Zeilenhöhe 1,5, Skalierungsfaktor 1,44, und ich verwende Pixelwerte. Sie können auch REM oder M verwenden. Also was wir tun werden, ist, dass wir alles von hier kopieren werden , 1.44 ja. Dies funktioniert besser in Chrome. Einige Funktionen funktionieren in Firefox nicht. Ich weiß nicht, aus welchem Grund. Also werde ich REM verwenden und ich werde alles kopieren und kopieren und in mein CSS einfügen . Mal sehen, wie es in unserem Browser aussehen wird. So funktioniert meine momentanen Überschriften und alles. Mal sehen, ob es angewendet wurde oder nicht. Lassen Sie uns den vertikalen Rhythmus mit unserem Basehold.it anwenden, und unser vertikaler Rhythmus ist 27. Ich werde 27 hier drüben so benutzen. So ist unser aktueller Typografierhythmus. So sieht es schön aus. Vielleicht brauche ich mehr Platz um diese HTML-Überschrift 1. Sie können sehen, wie das alles wirklich schön aussieht in diesem Setup. Also mal sehen, vielleicht braucht Rubrik 1 etwas mehr Wicking. Vielleicht kann ich einen Rand unten von 1,6 hinzufügen, eine Trimmung wie diese. Es sieht jetzt besser aus. Dann können wir auch etwas für die Absätze verwenden. Mit der Größe für die Absätze, denke ich, es nimmt die Körpergröße. Jetzt für die Schriftgröße im Körper werde ich es auf 18 Pixel fixieren. Die Zeilenhöhe wird entsprechend dieser Schriftgröße sein. Wir können es so lassen oder wir können auch 27 Pixel hier drüben verwenden und alles so ruhen lassen. So verwenden wir Grade-Level, um unseren vertikalen Abstand und Ausrichtung und alles zu erhalten. Das ist deine nächste Aufgabe, die du mir so etwas erschaffen wirst. Vergewissern Sie sich, dass sie vertikal an der Basislinie ausgerichtet ist. Sie können Grade-Level verwenden und etwas Ähnliches wie dieses erstellen. Sie können auch hier oben sehen, dass ich diesen Header verwende, der die Höhe meiner drei Baselines ist. So ist es fast 81 Pixel. Wenn Sie ähnliche wollen, hier drüben, können Sie Header verwenden und Sie können dieses Ding hier verwenden. Was ich benutze ist, dass es nur drei Dinge gibt, die ich benutzt habe. Einer ist, dass normalize.css nur um Ihre Einstellungen Stylesheets kühl zu halten, so verkörpern, dass an der Spitze, dann verwenden wir unser benutzerdefiniertes Stylesheet, das ist dieses, wo wir gerade kopiert und eingefügt, unsere Grade-Level-RAM-Code. Das ist also der Code, den er generiert hat und wir benutzen ihn hier drüben. Dann haben wir Basehold.it verwendet, um uns 27 Pixel Baseline zu zeigen, und das ist alles, was wir brauchen, um zu verwenden, ein schön aussehender vertikaler Rhythmus. Ich werde nicht verschiedene Google-Kraft importieren. Wenn Sie etwas Kraft haben möchten, können Sie das importieren. So verwenden wir vertikale Ausrichtung in unserem Code, und um eine vertikale Ausrichtung in HTML und CSS zu erreichen. Ihre nächste Herausforderung besteht darin, etwas Ähnliches zu schaffen dieses oder dieses, den Sie Dummy-Text verwenden können oder was auch immer, zeigen Sie mir Ihre Fähigkeiten und ich werde warten. Gehen wir also zur nächsten Lektion über. 66. Für Entwickler:innen→ Benutzerdefinierte Typografische Skala Bootstrap: Heute werden wir lernen, wie Bootstrap benutzerdefinierte typografische Skala zu verwenden, so wie Basisschriftart und andere Dinge für Bootstrap zu bearbeiten. Jetzt sollten Sie wissen, dass Bootstrap wirklich im vertikalen Rhythmus saugt , weil es zu viele Elemente und Polsterungen und alles gibt. Du kannst hier nicht alles ändern. Auch es ist reaktionsschnell, so dass es für verschiedene Bildschirme und verschiedene Größen gerecht wird so sollten Sie Standard-typografische Skala verwenden, die Bootstrap bereits haben. Was ich getan habe, habe ich gerade Bootstrap heruntergeladen und Bootstrap gestartet. Im Moment ist es Version 3.3.6. Wenn Sie nun die Quelle herunterladen möchten, können Sie die Quelle in Sass oder Less herunterladen. Ich benutze weniger. Sass und Less, wenn Sie es nicht wissen, sind sie im Grunde CSS-Vorkompressoren. Wenn du sie noch nicht kennst, solltest du anfangen, einen von ihnen zu lernen, Sass oder Less. Sass ist ein bisschen beliebter und weniger ist ein bisschen weniger, aber sie sind auch fast die gleichen. Jetzt können Sie hier klicken und die Quelle herunterladen. Sie können beides verwenden. Wenn Sie Less wollen, können Sie Less oder dieses herunterladen. Ich habe das hier heruntergeladen, und ich habe es hier rüber herausgeholt. Der Ordner, den ich wirklich brauche, ist dieser Weniger. Das ist der Ordner, den ich brauche. Ich habe diesen Ordner gerade kopiert und in diesen Blog-Beitrag oder typografischen Maßstab Dokument eingefügt. Beide verwenden alle diese Less Dateien. Lassen Sie mich Ihnen zeigen, wie das alles funktioniert. Jetzt hier haben wir unsere HTML-Datei, und Sie können hier sehen, ich habe Link rel="stylesheet/less,“ also verwende ich „less.js“. Sie können am unteren oder hier Skripttyp, JavaScript und CDN sehen. Dies ist die „less.js“, die Sie einschließen müssen, damit das letzte Skript oder Code es in CSS kompiliert werden kann. Wenn Sie nichts über Less wissen, gehen Sie einfach zu dieser „less.js“ und lesen Sie darüber. Es ist sehr einfach, wie Sie hier sehen können. Es ist nicht schwer zu bedienen. Sie müssen nur eine Codezeile in Ihr Frontend einfügen und, und Sie können das Stylesheet rel in dieses Stylesheet/less anstelle von CSS ändern, und Sie beginnen, Less Dateien zu verwenden. Hier habe ich diese weniger/Bootstrap-Datei, die hier importiert wurde. Ich glaube, ich habe es zweimal importiert, also lasst uns einfach dieses entfernen. Lassen Sie uns es im Browser öffnen und sehen, dass alles gut funktioniert. Wir haben diese Überschrift Ebene 1, 2, 3, 4, 5, und diesen Absatz Schriftart, und diese. Mal sehen, wie ich diese benutzerdefinierten Größen für meine Schriften verwendet habe. Das erste ist, dass wir diese gridlover.net bereits kennen, und ich benutze wieder die gleiche Einstellung, 18, Zeilenhöhe 1.5, Skalierungsfaktor 1.44. Nun, was wir von hier brauchen, sind diese em-Werte dieser Schriftarten. Drehen Sie dies zu em, und wir werden sie in Bootstrap verwenden. Also lassen Sie uns Bootstrap-Dateien öffnen. Grundsätzlich ist die Hauptdatei, die Sie hier aus diesem Less-Ordner einfügen müssen , diese bootstrap.less-Datei. Es hat alle verschiedenen Dateiimporte, und die Dateien, die wir ändern werden, sind diese „variables.less“, und eine andere, wenn Sie wirklich damit anlegen müssen, ist diese „type.less“. Ich empfehle, dass diese „Type.less“ nicht durcheinander bringen. Es hat andere Einstellungen. Nur gehen wir zu diesem „variables.less“, und gehen Sie zu diesem Abschnitt, wo wir Typografie, Schriftart, Zeilenhöhe und Farbe haben . Jetzt für die Schriftfamilie Sans Serif. Wenn Sie eine andere Schriftart wollen, wie ich Source Sans Pro haben wollte, habe ich sie in Source Sans Pro geändert, und ich habe auch diese Source Sans Pro in meine HTML-Dokumente importiert, damit wir sie hier verwenden können. Dann Schriftfamilie Serif ist diese, Schriftfamilie Mono-Raum. Jetzt Font-Familienbasis ist im Grunde unsere Schriftfamilie Sans Serif, also ist unsere Grundschrift im Grunde diese, Source Sans Pro. Sie ersetzen Werte durch diese Variablen. Es ist nicht sehr schwer zu verstehen. Jetzt war die Schriftgrundgröße 18 Pixel, wie wir hier sehen. Es ist 18 Pixel. Ich setze es auf 18 Pixel. Dies sind verschiedene Funktionen, ceil und floor, um diese Werte aufzurunden. Sie können jede von ihnen verwenden. Eine rundet auf die nächste Ziffer und eine auf die vorherige. Sie können es auschecken, wenn Sie es ändern möchten. Nun, wie dieser Wert kommt, das ist im Grunde meine Skala. 1.44 ist meine Skala. Sie können diese Modularscale auch verwenden, um all diese Werte zu erhalten, also werde ich diesen verwenden. Lassen Sie mich Ihnen zeigen, wie Sie dieses verwenden, 18 Pixel und unser Verhältnis ist 1,44. Dies ist unsere erste Schriftart, die 18 Pixel, dann 1,44, dann 2,074, dann 2,968, dann 4.3 ist . Im gleichen Sinne, wenn wir zu diesem gehen, hat es verschiedene Berechnungen, Schriftgröße 3 em, 2.05, oder so etwas. Was wir also tun werden, ist, dass wir diese Werte kopieren und sie dort einfügen, wo wir sie brauchen. Wie 4.3 wird unsere, zum Beispiel, Überschrift 1 Größe sein. Also, was wir tun werden, ist Überschrift 1 Größe ist 4.3, dann haben wir 2.986. Ich werde schnell alles überspringen, damit Sie jede Größe verwenden können, die Sie wollen. Ich benutze Überschrift 5, die bei 18 Pixeln die gleiche Größe hat. Überschrift 6 ist etwas kleiner. Ich denke, wir sollten beide die gleiche Größe für diesen haben. Überschrift 6 ist etwas kleiner, vielleicht können wir eine kleine Größe für diese verwenden, die 0.694 hier drüben ist, aber wir werden kleinere Größe verwenden, die 694 hier ist. Es ist 694. Dann haben wir 2.074, und dann haben wir 1.44. Ich muss eine Menge Bildschirme wechseln, 1,44. Dann haben wir 1 em, diesen und dann diesen. Wir sind alle für die Überschriften eingestellt. Zeilenhöhe. Sie können die Zeilenhöhe ändern, wenn Sie möchten. Ich habe es auf 1,25 gesetzt, weil, wenn Sie sich erinnern, Überschriften weniger Zeilenhöhe benötigen. Wir setzen also weniger Zeilenhöhe für Überschriften ein. Sie können auch 1 oder vielleicht 1.1 verwenden, so etwas. Lass es uns speichern und sehen, wie unser Beitrag aussehen wird. Dies ist unsere typografische Skala, die in Bootstrap festgelegt ist. Dies ist im Grunde die benutzerdefinierte Skala für Bootstrap, vertikaler Rhythmus, also werden wir uns nicht mit dem benutzerdefinierten vertikalen Rhythmus von Bootstrap anlegen. Wenn Sie wirklich wollen, gehen Sie voran und verwirren Sie sich damit. Lassen Sie mich Ihnen ein Beispiel zeigen. Sie müssen im Grunde die Datei „type.less“ ändern. Also hier haben wir eine Überschrift für Familie mit Zeilenhöhe und alles, was für alle Überschriften eingestellt ist. Was wir tun werden, ist, dass wir die Ränder ändern werden, oben, unten und alles für jede Überschrift, sogar Absatz und alles. Lassen Sie mich Ihnen die Beispieldatei zeigen. Ich werde es in diesem Beitrag aufnehmen. Diese Vorlesung Übungen Quellen, überprüfen Sie sie. Lassen Sie mich Ihnen zeigen, wo es ist. Das ist auch eine Übung für euch, Leute, also habe ich es nur ein bisschen schwierig gemacht. Dies ist der Beitrag, den ich Ihnen Blogbeitrag mit Bootstrap unter Verwendung benutzerdefinierter typografischer Skala und Größen gezeigt habe, und ich verwende 27 Pixel als Basislinie. Wie ich es gemacht habe, lassen Sie mich Ihnen die Variablen in dieser Typdatei zeigen. Lassen Sie mich Ihnen zeigen, wie es ist. Jetzt kannst du hier drüben sehen, ich habe Zeilenhöhen und alles für h2 geändert. Es ist anders. Sie können Rand oben, unten, Polsterung, 0 sehen, aber Zeilenhöhe ist Zeilenhöhe multipliziert mit 2. Dann haben wir Überschrift 3, alles ist 0, Zeilenhöhe um zwei. Dann haben wir Überschrift 3 Test, das ist die oberste Überschrift hier drüben, diese hier. Es hat [unhörbar] sie aus Beat, also ist es padding-top 11, dann padding-bottom 11, Zeilenhöhe 32, also alle diese gleich 54, Schriftgröße 32, und Schriftfamilie ist auch benutzerdefiniert. Dies sind die benutzerdefinierten Einstellungen aus Bootstrap-Standardeinstellungen, also machen Sie sich keine Sorgen um sie. So habe ich alles hier drüben gesetzt. Sie müssen jede Überschrift oben, untere Ränder und alles, und Zeilenhöhe anpassen , um wirklich vertikalen Rhythmus in Bootstrap zu verwenden. Also rate ich das nicht, weil dies nur den Text setzen wird. Aber was ist mit Schaltflächen, modalen Fenstern, anderen Steuerelementen? Sie werden unter dieser Einstellung leiden, daher schlage ich vor, dass Sie sich einfach an die Standardeinstellungen von Photoshop halten und einfach die Variablen ändern. Spielen Sie einfach mit ihnen. Was wir heute gelernt haben, ist, dass wir unsere Modularscale verwenden , um diese Werte zu erhalten und sie in unseren Überschriften 1, 2, 3 und 4 zu verwenden, oder Sie können diese Werte auch verwenden, wenn Sie möchten, wenn Sie möchten, wenn Sie sie mögen. So verwenden wir benutzerdefinierte typografische Skala in Bootstrap. Das endet meine Vorlesung. Außerdem möchte ich, dass Sie damit spielen, versuchen, es herunterzuladen und ein paar Einstellungen zu ändern und sehen, wie diese aussehen. Versuchen Sie auch, diese Schriftfamilien zu ändern und damit zu spielen. Das ist also das Ende dieses Abschnitts. Ich werde versuchen, alles neue, was ich erfunden habe, wie Schriftwechsel oder typografische Skalierung für mobile Geräte und mittelgroße Geräte wie iPads und andere mittelgroße Geräte. Gehen wir zur nächsten Vorlesung. 67. Für Entwickler → verwende den Code von Typescale: Hallo an alle. Ich habe Ihnen von einem Tool erzählt, das typescale.com ist. Heute habe ich sein CSS ausprobiert, dieses und es ist kläglich gescheitert. Versuchen Sie also nicht, es ist CSS oder Werte von hier in Ihrer Skala zu verwenden. Das beste Werkzeug ist wieder diese gridlover.net. Also benutze diesen Code von hier drüben. Jetzt benutze ich diesen Code und lass mich dir zeigen, wie mein Zeug herauskam. Lassen Sie mich Ihnen das Beispiel in der Demo zeigen. Okay, jetzt ist die Zeilenhöhe, sie haben es nicht gezeigt, aber ich habe es berechnet, es sind 29 Pixel. Sie können sehen, dass unsere Überschriften in der Höhe der drei Grundlinien sehr schön aufgestellt sind. Aber das Problem ist mit unseren Absätzen, sie stehen nicht in der Reihe. Nun gibt es noch ein weiteres Problem, das mit unserer Rubrik Level 2 und 3 ist. Wenn Sie also Überschrift 2 und dann Überschrift 3 verwenden, gibt es eine Menge Lücke. Da dieser Code den gleichen Rand oben verwendet, den Sie hier sehen können, ist Rand oben 1.4144, Überschrift 1, 2, 3 und 4. Alle diese Überschriften haben also einen oberen Rand, der viel ist, also werden sie zu viel voneinander getrennt sein. Ich denke nicht, dass du das hier benutzen solltest. Sie können Werte von hier aus in Ihrer Skala verwenden. Wenn Sie also etwas wie 1.44 verwenden, so dass Sie sehen können, dass der niedrigere Wert oder kleiner Textwert 0,694 ist, können Sie das verwenden, aber ich empfehle nicht, sein CSS zu verwenden oder zu greifen. Für mich erzeugt es einige Probleme. Es ist nicht genau aufgereiht. Ich weiß nicht, wofür der Werkzeugmacher oder Programmierer es benutzt hat oder was er im Sinn hatte. Aber für mich steht es nicht an. Dies ist also ein weiterer Tipp, keinen Typskalierungscode zu verwenden und Rasterebene zu verwenden. Ich schätze, wir sollten mit der nächsten Lektion fortfahren. 68. Für Entwickler → Einführung in die Responsive Typografie: Lassen Sie uns über responsive Typografie für diejenigen sprechen Coder und Front-End-Designer oder Programmierer sind, die sie wissen, dass dies ein sehr großes Problem ist. Es gibt zwei Möglichkeiten, dass es viele wenige Plugins von jQuery oder so etwas gibt, aber ich benutze normalerweise diese beiden Lösungen. Responsive Topografie bedeutet, dass Ihre Schriftgrößen entsprechend der Bildschirmgröße angepasst werden sollten. Wenn Sie eine sehr große Schriftgröße wie 80 Pixel oder 61 Pixel Schriftart oder vielleicht 70 Pixel Schriftart auf einem großen Bildschirm haben. Denkst du, dass es auf einem kleinen Gerät wie vielleicht 480 Pixel breit gut oder relevant ist? Nein, da Ihre Schriftgröße für diesen kleinen Bildschirm zu groß ist, wird vielleicht der gesamte Bildschirm nur mit Ihrer Überschrift gefüllt. Willst du das wirklich? Nein, okay. Wir werden sehen, was die Lösungen für dieses Problem sind. Die erste Lösung, über die ich sprechen werde, ist die Verwendung von HTML-Schriftgröße Prozentwert. Was wir hier tun, ist, dass wir die Schriftgröße unserer Basisschriftgröße und Zeilenhöhe in HTML-Element fixieren . HTML ist im Grunde das oberste Element. Es wird alles die Größe jeder Schriftart oder jeden Text auf Ihrer Seite steuern. Für kleine Bildschirme oder vielleicht mittlere Bildschirme legen Sie die Schriftgröße auf einen gewissen Prozentsatz fest, so dass sie für Ihren Desktop-Bildschirm relevant ist. Wenn Sie wie 18 Pixel Schriftart auf Ihrem Desktop-Bildschirm oder groß für große Bildschirme für kleine Bildschirme haben, setzen Sie sie auf 80 Prozent. Sie können auf mittleren Bildschirmen auf 90 Prozent einstellen. Es ist eine etwas billige Lösung für diese, weil unsere Polsterungen, Margen und alles andere gleich sein werden, es könnte ein Problem erzeugen, aber es ist eine gute Lösung. Verringern Sie die Schriftgröße von der Basisgröße auf 80 Prozent. Wenn Ihre Überschrift 60 Pixel entspricht, kann es zu 50 Pixeln oder vielleicht weniger als auf kleinen Bildschirmen werden. Das ist ein Weg. Ich werde Ihnen Beispiele zeigen, die Beispiele für diese beiden Lösungen codieren. Dies ist die erste Lösung. Werfen wir einen Blick auf die zweite Lösung. zweite Lösung ist fortgeschrittener oder Sie können sagen, dass sie effizienter ist als die vorherige. Hier verwenden wir zwei separate Typskalen für unsere verschiedenen Bildschirme. Für meinen mobilen Bildschirm oder kleine Bildschirme verwende ich möglicherweise Typskala, die beim Upgrade von 18 Pixel auf eine andere Überschriftengröße weniger skaliert . Für den Desktop-Bildschirm könnte ich eine sehr abrupte Skala haben , die mit einer Menge von Änderungen von einer Schriftgröße zur anderen skaliert wird. Lassen Sie mich Ihnen ein Beispiel mit der Verwendung von modularen Maßstab Website zeigen. Hier haben wir die modulare Website. Ich werde 18 Pixel und meine Basis verwenden. Mein erstes Verhältnis wird 1,5 sein oder Sie können 1,44 haben , die wir in unseren vorherigen Übungen verwendet haben. Was Sie tun können, ist, dass Sie den zweiten wie 1.2 zu so etwas verwenden können. Sie können sehen, B-Größe und A-Größe, diese sind zwei verschiedene Größen. Auf mobilen Bildschirmen wird unsere erste Schriftgröße 18 Pixel sein, dann wird es 22 Pixel sein dann wird es ungefähr 27 Pixel sein, dann wird es 32 Pixel oder 33 Pixel sein. Oder wenn Sie mehr voraus gehen möchten, können Sie zu 40 Pixel gehen. Aber Sie können unser Top-Verhältnis sehen, das blau war hier. Sie können sehen, 18 Pixel ist unsere Basis, die in schwarz ist und der nächste Stopp ist 26 Pixel, dann 37 Pixel, dann 54 Pixel oder vielleicht wie die 77 Pixel. Wir haben eine sehr große Bandbreite an Veränderungen in einem Verhältnis und in dem anderen Verhältnis, das wir für unsere mobilen oder kleinen Geräte festlegen werden , werden wir ein geringeres oder kleineres Verhältnis verwenden. Ein weiterer Rat ist, dass ich auf verschiedenen Websites oder Experten gesehen habe, sagen sie, dass, wenn Ihr Verhältnis 1,5 ist, versuchen Sie, das andere Verhältnis zu erhalten, das wie mit der Differenz von 0,25 ist. Dies wird im Grunde nicht abrupt das Skalierungsproblem ändern, also ist es im Grunde eine Schritt-für-Schritt-Änderung, ein Schritt wird 0,25 sein. Wir erhöhen oder verringern im Grunde das Verhältnis mit 0,25, das ist die Hälfte von 5,5. Wenn ich 1,44 habe, könnte ich zu etwas wie 1,2 zu so etwas gehen. Es scheint rationaler und so gibt es zwei Modulskalen für verschiedene Bildschirme. Sie können ein drittes haben, aber ich denke, für Tablets und große Bildschirme ist ein Verhältnis genug und man ist gut für Ihre mobilen und kleineren Bildschirme. Dies sind die Lösungen, die wir für die reaktionsschnelle Topographie verwenden. Möglicherweise finden Sie viele JavaScript-Tools oder vielleicht Plug-Ins. Ich werde ein Ressourcendokument teilen, das alle Links oder vielleicht die JavaScript-Plugins enthält , die ich zu diesem Thema gefunden habe, aber im Moment bin ich mehr besorgt über CSS-Lösungen, anstatt eine weitere JavaScript-Zusatzdatei einzuschließen. Hier geht es um reaktionsschnelle Topographie. In den nächsten zwei Lektionen werden wir die Beispiele für beide sehen. Wir werden diese Waagen verwenden, also lasst uns anfangen und mit der nächsten Lektion fortfahren. 69. Für Entwickler→ Verschiedene Scales für mehrere Bildschirmgrößen: In dieser Lektion verwenden wir die zweite geheime Ninja-Technik für unsere Schriftgröße, für responsive Webdesign. Was es ist eigentlich, wir werden nur den Skalierungsfaktor ändern weil unsere Schriftgröße auf kleinen Bildschirmen sehr groß aussieht. Zuvor haben wir 1.44 als Skalierungsfaktor verwendet, jetzt werden wir 1.22 verwenden. Was wir tun werden, ist, dass wir alles von hier kopieren werden. Lassen Sie uns es in Pixel und dann REM ändern, nur um zu sehen, dass die Größen aktualisiert wurden. Ich werde von hier nach oben kopieren, STRG+C, und was ich tun werde, ist, ich werde zu meinem kleinen Bildschirm gehen, der dieser ist, also nur Medien Bildschirm, das ist kleiner Bildschirm, ich werde diesen HTML-Prozentsatz entfernen Controlling-System, und wir werden es hier einfügen. Lassen Sie uns dies durch unsere 18 Pixel ersetzen. Für die Zeilenhöhe haben wir 27 Pixel verwendet, sorry, es waren 27. Ich kann meine Tastatur nicht von der Rückseite meines Mikrofons sehen, sie ist direkt vor meinem Gesicht. HTML. Das ist wirklich schlimm. Der erste Schritt ist, ich versuche immer, meine Schriftgröße zu HTML-Element zu verwenden. Es ist besser für mich und manchmal denke ich, dass es von den meisten Experten empfohlen wird. Wenn Sie mehr Experte als ich sind, können Sie darüber in der Frage oder irgendetwas, was Sie darüber vorschlagen können, schreiben. Nun, was wir tun werden, ist, mal sehen, wie es auf unserem kleinen Bildschirm aussehen wird. Zuerst werden wir diese HTML-Schriftgröße entfernen und auf unseren mittleren Bildschirmen verschieben, weil wir sie nicht brauchen. Mal sehen, wie unsere Schriftarten aussehen und Größen sind. Shift mit diesem großen, okay, Medium, es ist das gleiche, wir brauchen nichts zu ändern. Gehen wir dazu. Hier haben wir den Kleinen. Sie können sehen, dass die Größe dramatisch verschoben wird, aber unsere Linienhöhen sehen etwas seltsam aus. Außerdem gibt es viel Abstand zwischen diesen beiden Absätzen. Unsere Rubrik 2 ist gut, Rubrik 3 ist auch gut, aber die Rubrik eins hat ein bisschen Problem. Lasst uns das reparieren. Gehen wir zur Überschrift eins in unserer Medienabfrage, also ist dies unsere Medienabfrage Start, und das ist unsere Überschrift eins. Schriftgröße ist diese, Zeilenhöhe ist etwas über der Schriftgröße, also denke ich, dass es ähnlich sein sollte. Vielleicht können Sie so etwas verwenden, nur Zeilenhöhe eins. Lass es uns speichern und aufgefrischt. Es sieht jetzt besser aus, aber wir haben jetzt ein anderes Thema, das heißt, dass dieser Absatz dieser Überschrift zu näher gekommen ist. Lassen Sie es uns von der Überschrift eins wegbewegen. Wir werden das hier benutzen. Wir werden kopieren und einfügen Rand, unten und oben sind die gleichen. Im Moment, mach dir keine Sorgen über vertikale mit ihnen, nur wir werden mit unserem Bauchgefühl gehen, also mach dir jetzt keine Sorgen darüber. Es sieht besser aus. 70. Für Entwickler → Angehende CSS Einheit für Responsive Typografie: In dieser Lektion über responsive Typografie betrachten wir das erste Beispiel, das wir in unserer vorherigen Vorlesung gesehen haben, die prozentuale Wertänderung für das HTML-Element, um die Schriftgröße zu steuern. Nun ist dies die Datei, die wir in unseren vorherigen Beispielen verwendet haben. Lassen Sie mich Ihnen zeigen, welche Einstellungen wir haben. Schriftgröße, die 18 Pixel ist, gridlover.net. Wir verwenden diese Einstellungen,1,5 Zeilenhöhe, und Skalierungsfaktor ist 1,44. Was ich getan habe, ist, dass ich diesen REM-Code von hier in die CSS-Datei kopiert habe. Dies ist die gleiche CSS-Datei. Es gibt nur wenige Dinge, die ich damit gemacht habe. Eins, ist, dass ich importiert normalisieren, versuchen Sie immer, diese normalisieren zu importieren, um Ihre CSS-Stile oder Standardstile von Ihrem Browser und alles andere zurückzusetzen . Dies ist also ein Must-Have, nehmen dies immer in Ihre Projekte ein. Zweite ist dieses Meta-Ansichtsfenster. Sie sollten diese für Ihre mobilen Bildschirme oder Geräte, kleine Geräte haben. Dies ist unser Stylesheet und so sieht es gerade aus. Lassen Sie mich Ihnen das hier zeigen. Öffnen wir es im Browser. Hier haben wir, Sie können auf der rechten Seite sehen, es zeigt großen Bildschirm. Wie ich es gemacht habe, habe ich body: after tag verwendet. Wenn Sie mit diesen Pseudo-Tags oder Pseudoelementen von HTML nicht vertraut sind, sollten Sie darüber studieren. Geben Sie in der Google- oder W3C-Website ein, um mehr darüber zu erfahren. Dies ist im Grunde das Hinzufügen einer Schaltfläche nach meinen Körper-Tags. So zeigt es sich hier drüben. Die Position ist fest und die Textausrichtung zentriert. Grundsätzlich zeige ich eine Schaltfläche nach dem Körper an. Also, als meine Körperelemente anfingen, zeigt sich dieses weiter danach. Das sind also alle Einstellungen. Dies ist die Hintergrundfarbe. Warum benutze ich es? Weil, lassen Sie mich Ihnen zeigen, wenn ich zu meiner responsive Ansicht wechseln, können Sie sehen, wie der Bildschirm zu klein geht, ändert es den Text und die Farbe für kleine. Ich habe es für den Testzweck unserer responsiven Topographie verwendet. Dies ist ein mittlerer Bildschirm und das ist groß. Hier haben wir so. Sie können klein, mittel und dann groß sehen . Lass es uns ein bisschen größer machen. Nun, das ist eine Sache, wie ich es schnell erreicht habe? Ich habe diesen Körper in meinem einfachen normalen CSS deklariert. Dann ging ich zu dieser Medienabfrage bei Medien nur Bildschirm maximale Breite 600 Pixel. An dieser Stelle, jeder Bildschirm, der 600 Pixel oder weniger als 600 Pixel ist, füge ich einen Inhalt von klein zu diesem Körper hinzu: nach Tag und Hintergrundfarbe ist dieser. Das hier ist ein bisschen grünlich. Das ist ein sehr kleines Snippet, das ich online von einem Kerl ausgewählt habe. Ich bin mir nicht sicher, wie sein Name war, aber es ist sehr praktisches Werkzeug, wenn Sie Ihre Medienabfragen testen müssen. Das ist alles bereit. Im Moment ändert sich unsere Schriftgröße nicht. Wenn Sie zu mittleren oder kleinen Bildschirm gehen, können Sie sehen, ob ich zu dieser kleinen Bildschirmgröße gehe, die wie 360 ist, so etwas, es ändert sich überhaupt nicht. Also die Überschrift ist, dass Sie einen Buchstaben sehen können, sorry, ein Wort pro Zeile, es sieht sehr seltsam aus für mich. Ich schätze, es sollte nicht so aussehen. Nun, was wir tun werden, ist, lassen Sie mich sehen, ob die richtige Datei im Browser geöffnet ist. Ja, es ist derselbe. Nun, was wir tun werden, ist, dass wir eine andere Skala, Entschuldigung, einen Prozentsatz für unsere HTML-Dokumente verwenden . Was ich getan habe, ist, dass ich diesen ganzen Code kopiert habe. Lassen Sie es uns nochmals kopieren, nur um sicherzustellen, dass Sie alles abholen. Also „Kopieren“ das und ich werde es so in meine style.css einfügen. Löschen Sie einfach alles andere, was ich vorher hatte. Nicht dieser Körper: nach Tag und Kontrolle V. Das ist, was ich benutze. Aktualisieren Sie einfach die Datei, und Sie können sehen, dass dies die Einstellungen sind, die ich verwendet habe. Sie können hier sehen, ich habe einige Probleme mit dem Rand unten in dieser Überschrift 1, lassen Sie uns es jetzt ignorieren. Die erste Änderung, die wir tun werden, ist, dass wir unser HTML-Modell aufschreiben, weil wir die Elemente kontrollieren müssen. Also HTML, und wir werden Schriftgröße und Zeilenhöhe in diesem zu verwenden. Ich werde anstelle von 1,25 REM verwenden, ich werde 18 Pixel verwenden. Dies ist unsere Basisschriftart, und die Zeilenhöhe wird 27 Pixel betragen. Also erster Schritt ist, ich werde diese Schriftgröße von meinem Körper zu diesem HTML-Element entfernen, und wir haben dies gespeichert lassen Sie es aktualisieren. Nichts wird sich ändern. Lassen Sie uns diesen Rand unten gleich diesem Rand oben für die Überschrift ändern , die es aus meiner Sicht sehr unterschiedlich aussieht. Jetzt ist es besser. Auch Sie können in diesem Bereich hier sehen, dieser Überschrift 2-Tag, es hat eine Menge von Zeilenhöhe, die diese ist. Lassen Sie uns die Zeilenhöhe gleich diesem machen, gleich dieser Schriftgröße, die zwei Punkte ungefähr so ist. Jetzt ist es besser. Das sind die wenigen Anpassungen, die ich vorgenommen habe. Ich benutzte mein inneres Gefühl oder wie du es nennst, um sicherzustellen, dass alles gut aussieht. Nun, wenn wir Schritt zu den kleinen und mittleren, und dann groß, es zeigt sehr große Schrift auf dem kleinen Bildschirm, denke ich. Mal sehen, was die Größe dieser Schriftart ist. Ich denke, es werden 61 Pixel sein, bevor wir es berechnen. Ja, es sind 61, 60,75, das ist 61 Pixel. Also lassen Sie es uns jetzt ignorieren. Jetzt werden wir unseren HTML-Prozentsatz verwenden, um die Größe auf den Bildschirmgrößen zu steuern. Also werden wir diesen Code kopieren und wir gehen zu diesem Medium nur Bildschirm. Ich werde es in das einfügen, weil dieser hier verwandt ist... lassen Sie es hier rüber bewegen. Ich werde es hier drüben so einfügen. Nun, für die kleinen Bildschirme, werden wir unsere Schriftgröße auf 80 Prozent oder vielleicht 85, 80 Prozent verschieben. Setzen wir es auf 80 Prozent. Für unsere mittleren Bildschirme werden wir Systemmedium verwenden, wir werden 90 Prozent verwenden. Mal sehen, wie das aussieht oder sich anfühlt. Ja. Jetzt auf dem kleinen Bildschirm können Sie sehen, wir haben mindestens zwei Wörter auf uns, eine einzige Zeile und es sieht besser aus als zuvor. Bevor es nur ein Wort in einer Zeile war, und es nahm eine Menge Bildschirm auf dem Medium, können Sie sehen, die Größe wird nach oben verschieben. Sie können sehen, wie sich die Größe auf den verschiedenen Bildschirmgrößen ändert. Das Problem mit dieser Technik ist, dass Sie sehen können, dass sich die Absatzschriftgröße auch verschiebt und auf Ihrem kleinen Bildschirm etwas kleiner aussieht. Also, wenn Sie das anpassen möchten, können Sie Ihre Absatzschriftgröße hier so anpassen. Schriftgröße: 120 Prozent. Vergrößern Sie die Größe, da Ihr HTML-Code bereits abnimmt. Lasst uns kopieren, tut mir leid. Wir müssen es hier drüben einfügen, so. Mal sehen, wie es aussehen wird. Jetzt ist es besser. Sie können hier drüben sehen, auf dem mittleren Bildschirm, es sieht besser aus. Auf dem kleinen Bildschirm ist unsere Absatzgröße wieder besser als zuvor. Dies ist eine schnelle Lösung für Ihre ansprechende Typografie Wenn Sie keine Medienabfragen kennen, lesen Sie diese oder erfahren Sie mehr über sie. Es ist nicht sehr schwierig. Mal sehen, was die Wirkung davon ist. So verwenden wir Prozentwerte für unsere HTML, sorry, HTML-Schriftgröße und verschiedene Elemente, wie ich auf Absatz verwendet habe. Sie können auch Ihre Überschriften-Tags wie H1, H2, H3, H4 ausrichten und sie mithilfe von Prozentwerten vergrößern. Ich denke, es ist eine sehr gepflegte Technik. Aber das Problem ist mit diesen Rändern, sie werden auf allen Bildschirmen gleich aussehen, wie Sie hier sehen können. Also, wenn Sie sie anpassen wollen, brauchen wir die zweite Technik. Ich werde alle diese Dateien in die Ressourcen aufnehmen, also stellen Sie sicher, dass Sie sie herunterladen und den Code selbst sehen. Wenn Sie in ein Problem geraten, wenn Sie nichts verstehen, stellen Sie einfach Fragen. Mach dich nicht darum. Ich werde jede Ihrer dümmsten Fragen beantworten. Also widerstehen Sie nicht, keine Sorge, fragen Sie einfach. Gehen wir also zur zweiten Technik über, bei der wir zwei verschiedene typografische Skalen für verschiedene Bildschirme verwenden werden. Fahren wir mit der nächsten Lektion fort. 71. Die Student → Wie du die Typografische Skala für die Responsive Typographic erweitern kannst.: In dieser Lektion werde ich über Modulare Waagen sprechen, und ich werde über speziell modulare Waagen für Web, Handys und Tablets sprechen. Einer meiner Schüler, ihr Name ist Sandra, und ich denke, sie hat ein Problem zu verstehen, wie sie eine modulare Waage verwenden kann , die anders für ein Handy und für Tablet ist, denn auf Tablets und Handys kann man keine sehr große Größe verwenden wie Desktops. Ich werde Ihnen mit modularen Maßstab dot com zeigen, wie wir verschiedene Skalen wählen können, oder vielleicht können wir mehrere Skalen haben, so dass wir sie in jedem Gerät verwenden können; vielleicht kleinere Geräte, verschiedene Skalen und dann Tabletten, unterschiedliche Skala, und für Desktops werden wir eine andere Skala verwenden. Lasst uns loslegen. Nun, wie Sie auf diesem modularen Maßstab dot com sehen können, ist meine Basis auf 16 Pixel eingestellt und das Verhältnis beträgt 1,5, also ist dies der Standard. Nun empfehle ich, dass Sie nicht zu viel größerem Verhältnis wählen, weil Sie hier sehen können, haben Sie diese 81 Pixel, also können wir vielleicht verwenden, es ist sehr groß. Dann haben wir diese 54, dann 36, 24, 16 ist unsere Basisgröße. Nun, wenn wir zu diesen kleinen Größen gehen, sind sie fast unbrauchbar, so dass wir diese 11 Pixel oder 10 Pixel nicht verwenden können, weil es wirklich klein ist. Nun, wie kann man dieses Problem lösen? Nun, wenn Sie zu diesem Verhältnis gehen, werden wir hier ein anderes Verhältnis verwenden oder hinzufügen, also was wir tun werden, ist, wir werden verwenden, entfernen Sie das einfach; und wir werden verwenden, notieren Sie diese Größen Hier drüben , 81, 54, 36, 24 und 16. Nun, was wir tun werden, ist, dass wir das fünf durch die Hälfte teilen, also werden wir die Hälfte davon verwenden, was 0,25 sein wird. Jetzt haben wir einen separaten Satz von Größen, die 61 und 49, 39 Pixel, 31 Pixel, 25, 20, 16, und dort haben wir eine andere Größe, die 13 Pixel oder 13 Punkte ist. Das ist ein bisschen schöne Größe, jetzt haben wir eine sehr große Skala, wir hatten vier Größen aus der vorherigen Skala, wo wir das 1,5-Verhältnis verwendet haben, also eins, zwei drei, vier, fünf, also 16 ist üblich, also Ich werde diese drei, 54, 36 und 24. Dann können wir auch 0.25 verwenden und wir können auch diese verwenden, 49, 39. Wenn Sie beispielsweise ein Handy verwenden, möchten Sie die mobile Größe für Ihre Überschrift eins, also die größte Überschrift, können Sie diese verwenden. Denn wenn Sie dieses oder vielleicht 54 Pixel verwenden, wird es zu groß sein, also gehen wir hier. Wir haben viele verschiedene Größen Optionen alle hier so, und wenn Sie mehr wollen, können Sie auch zu 1,75 gehen und Sie werden verschiedene Größen wie 49, 28. Sie können sehen, dies ist eine neue Größe, 28, auch, Sie können dies sehen 85 oder 86. Dies sind die Methoden, die ich verwende, um Skalierung mit einer Menge unterschiedlicher Größe zu erhalten. Wenn ich zu diesem hinzufügen gehe, jetzt können Sie sehen, ich habe zwei Bildschirme hier hinzugefügt, ich habe dieses Plus verwendet, also habe ich zwei verschiedene Skalen, 1.5 mit diesem, und wenn ich zu diesem gehe, kann ich verwenden Sie 1.25. Nun, sie sind Seite an Seite, jetzt können Sie hier sehen, wenn ich zu diesem Tisch gehe, können Sie sehen, dass wir viele Größen haben, die wirklich nutzbar sind, und Sie können diese 61, 48, eins, zwei, drei, vier, fünf, sechs und sieben; Sieben Größen hier drüben, eins, zwei, drei, Größen hier drüben, also sieben und drei, wir haben eine Menge Flexibilität von 16 Pixeln, dann haben wir 20, 24 oder 25, dann können Sie Verwenden Sie 31, 36, 54, 40 Pixel und 49 Pixel, dann können wir 61 verwenden, und dann können wir 81 verwenden. Sie können hier sehen, wir haben eine andere Skala, dann können Sie auch eine weitere hinzufügen, die 1,25 sein wird, und Sie können hier sehen, wir haben einige weitere Größen, also 1.75, jetzt können Sie sehen, wir haben 28, Das ist eine neue Größe, 49. Wir haben bereits 49, Sie können hier drüben sehen. Wenn Sie erhöhen oder verringern Sie Ihre Werte in diesem Bereich, wie Schritte von Ihnen können gleiche Mengen sagen, wie wenn wir, zum Beispiel, 1,8 als Verhältnis. Zum Beispiel, dieser hier ist 1,8, also werde ich diesen auf 1,6 verschieben, und diesen auf 1.4. Sie können sehen, wie ich das alles benutze, also ist es 22 dann haben wir 26, dann hatten wir 29, drei verschiedene Größen. 32, 41 und 52. Auf diese Weise können Sie mehrere modulare Waagen, eine breite Palette von verschiedenen Größen haben und Sie können sie beliebig verwenden, Sie können sie auf Handys verwenden. Sie können drei oder vier Größen für Mobiltelefone auswählen, und Sie können nur zwei oder drei für den Desktop So können Sie diese modulare Waage anwenden und für jede Anwendung erweitern. Hier dreht sich alles um modulare Waagen und wie Sie es für Handys, Tablets und Smartphones erweitern können . Ich glaube, das ist es, und wenn es immer noch nicht zu Ihrer Verwirrung führt oder Ihre Verwirrung wegnimmt, können Sie mir jederzeit Fragen stellen. Wir sehen uns bald in einer anderen Lektion. Passen Sie auf und verabschieden Sie sich.