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ähi