Typografie und vertikaler Rhythmus für UI-Designer und Webentwickler | Muhammad Ahsan | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

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

teacher avatar Muhammad Ahsan, UI UX Visual Designer 10+ Years

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

71 Einheiten (8 Std. 29 Min.)
    • 1. Was wir in diesem Kurs behandeln werden

      4:35
    • 2. Einführung in die Typografie

      4:40
    • 3. Über Schriftart und Schriftfamilien

      5:09
    • 4. Typografie Anatomie

      6:36
    • 5. Humanistische Alt und Übergangsteil

      6:45
    • 6. Sans Serif und Script

      5:34
    • 7. Über die Linienlänge

      3:14
    • 8. Text

      4:55
    • 9. Line-Height (Führen)

      6:39
    • 10. Letter (Kerning)

      4:47
    • 11. Designübungen zur Anwendung von dem, was wir so bisher gelernt haben.

      10:58
    • 12. Hyphen, die auf der Grundlage von dash

      2:28
    • 13. Quotation richtig verwenden

      2:52
    • 14. Rollen von Schriftarten

      4:37
    • 15. Typografische Skalen

      3:00
    • 16. Online-Tools für Typografische Skalen

      5:28
    • 17. Wie viele Ebenen der Typografische Hierarchie brauche ich mich?

      3:13
    • 18. Vertikaler Rhythmus

      5:13
    • 19. Vertikaler Rhythmus in Photoshop

      7:02
    • 20. Design für vertikales Rhythmus

      12:04
    • 21. Einführung in das modulare Raster

      11:07
    • 22. Raster für die Layout vorbereiten

      10:44
    • 23. Gestalte das erste Blog-Layout

      16:21
    • 24. Zweite Layout für Blog entwerfen

      10:02
    • 25. Das zweite Layoutdesign verfeinern

      3:10
    • 26. Das letzte Layout für das Blogdesign

      9:30
    • 27. Wie viele Schriftarten du auswählen kannst?

      5:18
    • 28. Stimmung/Stimmen der Schriftarten

      12:42
    • 29. Wirkung der Farbe auf Typeface (Stimme)

      3:57
    • 30. Einführung in die Font

      3:49
    • 31. x-height

      5:28
    • 32. Mit Pairing

      7:47
    • 33. Schriftarten auf ähnlichen Funktionen zusammenfügen

      10:04
    • 34. Vermeide zu viel Ähnlichkeit

      4:15
    • 35. Schriftarten von derselben Designer oder der Familie kombinieren

      5:15
    • 36. Online-Tools zur Font

      5:31
    • 37. Übungen für das Dribbble

      5:00
    • 38. Hero Design Teil 1

      16:19
    • 39. Hero Teil 2

      15:31
    • 40. Hero Design -2nd Thema

      3:52
    • 41. Hero – 2. Thema Teil 1

      7:42
    • 42. Hero – 2. Thema Teil 2

      5:34
    • 43. Die Übung für Social →

      3:59
    • 44. Media Teil 1

      6:38
    • 45. Media Teil 2

      14:26
    • 46. Abschließende Dinge

      2:54
    • 47. Juicy – Vorkenntnisse

      3:26
    • 48. Juicy Teil 1

      15:58
    • 49. Juicy Teil 2

      12:03
    • 50. Einführung in die Punkte (PT) in IOS-Geräte

      12:00
    • 51. IOS Typografie

      3:22
    • 52. Entwerfen mehrerer Auflösung IOS mit Photoshop

      13:57
    • 53. Studentenfrage zu den Auflösungen

      13:55
    • 54. Mirroring deines Photsshop auf Iphone spiegeln

      5:04
    • 55. Typography und Skalen

      4:16
    • 56. Entwerfen von mehreren for

      8:30
    • 57. Für Entwickler → Google Fonts verwenden

      3:36
    • 58. Für Entwickler → Verwendung von Premium

      5:38
    • 59. Für Entwickler → CSS Schriftgröße

      2:37
    • 60. Für Entwickler → em

      8:11
    • 61. Für Entwickler → Umfassende Schriftart

      4:34
    • 62. Für Entwickler → % Schriftart

      4:15
    • 63. Für Entwickler → vw Einheit

      4:09
    • 64. Für Entwickler:innen → Wie vertikaler Rhythmus in CSS funktioniert

      8:28
    • 65. Für Entwickler→ Gridlover Übung

      8:05
    • 66. Für Entwickler:innen→ Benutzerdefinierte Typografische Skala Bootstrap

      12:33
    • 67. Für Entwickler → verwende den Code von Typescale

      2:22
    • 68. Für Entwickler → Einführung in die Responsive Typografie

      6:55
    • 69. Für Entwickler→ Verschiedene Scales für mehrere Bildschirmgrößen

      9:44
    • 70. Für Entwickler → Angehende CSS Einheit für Responsive Typografie

      11:39
    • 71. Die Student → Wie du die Typografische Skala für die Responsive Typographic erweitern kannst.

      6:56
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

2.257

Teilnehmer:innen

11

Projekte

Über diesen Kurs

Hast du schon immer gefragt, warum die Designs von Dribbble and Behance so elegant aussieht Eine der Geheimnisse hinter diesem tollen Web- und Mobile App-Designs ist die perfekte Verwendung von Schriftkombinationen, mächtige Verwendung von weißen Raums und Raster

Um diese Superkraft der Typografie und Nutzung der Zeit und des Raums zu lernen und diesen Kurs zu nutzen. Nimm an diesem Kurs

In diesem Kurs geht es um die Typografie für Designer:innen und Entwickler:innen. Alle großartigen Designer:innen haben die Fähigkeit der Typografie, und ihre Nutzung des weißen Raums ist immer out

Nimm du für Designer:innen an

In diesem Kurs konvertieren wir deine langweiligen Designs in to indem wir mit dem Lernen

  • Grundlagen der Typografie und Anatomie
  • Lerne, wie du deinen Text mit variation interessant aussehen kannst.
  • Gestalte ein elegantes Design von Web- und Mobile App, indem du aussagekräftige Schriftarten auswählst und zusammenfügst.
  • Wie verschiedene Moods oder Stimmen der Schriftarten funktioniert
  • Die Schriftart Masters Paarung und erlernen jede Menge Online-Ressourcen automatisch
  • Wie du den weißen Raum effektiv verwendest, indem du Vertical und Modulares Raster verwendest.
  • Lerne über IOS App Typografie und verwende die verschiedenen Typography
  • Google Android Typografie, seine Skala und seine SP Einheit der Schrift
  • Kostenlose Apps zur Verbindung deines to mit IPhone oder Android-Gerät
  • Wie du dein Design mit LEGO Blocks ausgleichen kannst.
  • Übungen zum Dribbble zur Verbesserung deiner Designs

Nimm dir für Entwickler:innen

  • So verwendest du Polster, Ränder und andere Elemente zur Erstellung vertikaler Rhythmus in CSS
  • So verwendest du Vertical in Bootstrap
  • Was sind absolute und relative Schriftgröße z. B? bei em, rem, vm, % und wann man sie verwenden soll?
  • Übungen für Step für Entwickler
  • So zeigst du die Grundlinienraster mit nur einer Codezeile
  • Welche Schriftgröße sind die besten Standards wie die sizes
  • So richtest du die Typografie mit Online-Tools einfach
  • Viele Quiz zum Testament deines Kenntniss

Wenn du wirklich deinen Feldern immer wieder vorgehen möchtest, und dich aus der Masse herausholen möchtest.

Anforderungen für diesen Kurs :-

  • Muss ein gutes Wissen in Adobe Photoshop (für Designer)
  • Muss HTML und CSS kennen (für Entwickler)
  • Herunterladen und Installieren von Adobe Photoshop CC2015 oder der neuesten Version

Nimm jetzt in diesem Kurs an mich ein im Kurs

  • NICHT mit Anfängern (Muss ein paar for haben)
  • Webdesigner
  • Mobile App-Designer
  • Alle Designer:innen, die ihr Design fehlen
  • Web-Entwickler
  • Grafische Designer

Triff deine:n Kursleiter:in

Teacher Profile Image

Muhammad Ahsan

UI UX Visual Designer 10+ Years

Kursleiter:in

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

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 f