Grundlagen von Adobe Illustrator für Webentwürfe: Erste Schritte mit den Grundlagen (I) | Ryan Clark | Skillshare

Playback-Geschwindigkeit


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

Grundlagen von Adobe Illustrator für Webentwürfe: Erste Schritte mit den Grundlagen (I)

teacher avatar Ryan Clark, Creative Director at Virb

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

6 Einheiten (1 Std. 5 Min.)
    • 1. Erste Schritte mit Illustrator

      9:24
    • 2. Erstellen und Bearbeiten von Formen

      18:13
    • 3. Typografie und Farbe

      13:19
    • 4. Hinzufügen von Stilen und Effekten

      7:29
    • 5. Bilder hinzufügen

      15:48
    • 6. Entdecke Design auf Skillshare

      0:37
  • --
  • 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.

4.445

Teilnehmer:innen

12

Projekte

Über diesen Kurs

d5174298

Adobe Illustrator kann ein wunderbares und effektives Tool zum Entwerfen für das Web sein. In diesem Anfängerkurs lernst du, wie du mit Illustrator beginnst, um deine eigene Website zu entwerfen.

Dieser Kurs ist perfekt für alle, die mehr über Adobe Illustrator erfahren möchten, mit dem Webdesign beginnen möchten oder für diejenigen, die Illustrator bereits kennen, es aber auch für das Webdesign verwenden möchten.

Was du lernen wirst

  • Erste Schritte  Wir gehen durch die Einrichtung von Zeichenflächen, des Arbeitsbereichs und bestimmter Bedienfelder, die für Webdesign-Aufgaben hilfreich sind.
  • Formen! Formen! Formen!  Wir gehen darauf ein, wie du Formen erstellen, bearbeiten und anordnen und sie dann mit verschiedenen Tools wie Ausrichtung, Gruppen und Pfaden in Website-Elemente umwandelst.
  • Typografie und Farbe.  Anschließend tauchen wir in Typografie und Farbe ein, was im Web am besten funktioniert und wie du beides in deinen Entwurf integrieren kannst.
  • Stile hinzufügen.  Hier behandeln wir Stile für Ebenen, Rahmen, Glühen, Schatten, abgerundete Ecken und mehr.
  • Arbeiten mit Bildern  Und schließlich integrieren wir einige Symbolik in unseren Entwurf und erörtern, wie Bilder in Illustrator verwaltet werden.

9b9e356e

Was du machen wirst

In diesem Kurs erstellst du deine eigene einseitige Website. Dies kann eine Homepage für ein freiberufliches Projekt oder ein Entwurf für deine eigene Portfolio-Website sein. Du verwendest während des gesamten Prozesses Adobe Illustrator, um dein endgültiges Projekt zu erstellen.

4521a14a

Triff deine:n Kursleiter:in

Teacher Profile Image

Ryan Clark

Creative Director at Virb

Kursleiter:in

Hi, I'm Ryan--a product designer and Creative Director at Virb. In my spare time I'm also an illustrator and typographer. My first font, Liberator, has been used in campaigns by ESPN, Old Spice, Monday Night Football, UFC, and Marriot. When the days seemed a lot longer I dabbled in screenprinting and taught at two local universities.

I hail from the rolling cornfields of southwestern Ohio, where I live with my beautiful wife and family. I do what I love for a living, and for that (and a million other reasons) I count myself blessed.

I believe in hard work, honesty, kindness, and optimism. My work has been featured by Adobe Site of the Day, FWA, Designworklife, Lost Type, Grain Edit, HOW's Design Annual, WMC Fest, The French Paper Sample Room, and Awwwards.

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. Erste Schritte mit Illustrator: Hey, alle. Das ist Ryan Clark. Willkommen beim ersten Projekt in der Klasse Adobe Illustrator für Web Design. Dieses erste Projekt sollte wirklich einfach sein. Wir gehen einfach durch und wir werden ein neues Dokument erstellen, dieses Dokument bearbeiten, unsere Zeichenfläche ansehen, uns einfach im Illustrator positionieren und ein paar Tools sehen , die uns bei unserem Workflow helfen, ein paar Dinge, die Sie einfach ignorieren können, da wir nicht wirklich mehr von den zentrischen Funktionen von Illustrator verwenden, und einfach loslegen und sich bequem machen. Also, lasst uns wirklich anfangen. Das erste, was wir tun werden, ist ein neues Dokument zu erstellen. Um ein neues Dokument zu erstellen, gehen Sie im Grunde zum Menü Datei und wählen Sie Neu. Alternativ können Sie einfach den Befehl N verwenden, um dies zu öffnen. Dies ist das neue Dokumentfenster. Hier werden Sie Ihre Zeichenfläche konfigurieren und alles für Ihre Website einrichten. Es gibt eine Reihe von Voreinstellungen, aus denen Sie wählen können. Einige von ihnen sind bereits für Web eingestellt. 1280 von 800 ist das am nächsten zu dem, was wir wollen, um zu bekommen, nicht wirklich ausgemerkt, dass 80. Also, ich gehe normalerweise einfach mit 1.200, weil es ein bisschen einfacher ist, Guides einzurichten, zu denen wir später kommen. Sie möchten sicherstellen, dass Ihre Einheiten auf Pixel anstelle von Zoll oder Pica oder eine der stärker druckdesign-zentrierten Maßeinheiten festgelegt sind . Was die erweiterten Einstellungen angeht, möchten Sie sicherstellen, dass Sie sich in RGB befinden. Alles, was wir tun müssen, ist RGB, weil es über einen Bildschirm angezeigt wird. Raster-Effekte, ähnlich wie die gleiche Idee. Da wir im wirklichen Leben nichts davon ausdrucken werden, muss es nicht die volle Druckqualität bei 300 PPI sein. Sie können das also auf Bildschirm ändern und dann bis zum Vorschaumodusauf Pixel setzen, auf Pixel setzen, so dass alle unsere Formen, die wir in späteren Projekten erstellen, super scharf und ausgerichtet sind. Das erkläre ich, wenn wir dran sind. Aber lassen Sie uns weitermachen und einfach dieses neue Dokument nennen. Wir fangen an. Also, das Dokument wird angezeigt. Sie können hier im Grunde auf der linken Seite sehen, Sie haben eine wirklich einfache Symbolleiste. Hier befinden sich die meisten Werkzeuge. Ganz oben in diesem Bereich haben Sie im Grunde einen kontextabhängigen Satz von Optionen. Diese Optionen ändern sich je nachdem, welches Werkzeug Sie ausgewählt haben. Also, wenn Sie nur das Direktauswahl-Tool an haben, wie ich es jetzt getan habe, werden Sie eine Reihe von Optionen erhalten. Wenn Sie sagen, Typ erstellen und einen Typ ausgewählt haben, dann werden Sie Zeichen-Dropdown-Liste, Absatz-Dropdown-Liste, andere Dinge wie das haben . Dies ist praktisch, wenn Sie tatsächlich mit einzelnen Elementen auf Ihrer Seite arbeiten. Hier drüben haben wir eine Reihe von Paletten. Sie werden sehen, dass, soweit wie Sie diese Pellets verwenden, Sie im Grunde einfach klicken, um sie zu öffnen. Sie können sie erneut anklicken, um sie zu schließen. Wenn es einige gibt, die Sie öfter verwenden oder nie verwenden, können Sie sie bewegen, ziehen Sie sie heraus und dann loswerden. Es ist eigentlich unglaublich einfach, diese Seitenleisten im Grunde anzupassen , um nur die Werkzeuge zu erhalten, die Sie wirklich brauchen. Also, das ist das allgemeine Setup. Dies ist die Anwendung selbst. Es ist ziemlich einfach. In Ordnung. Nun, da wir unseren Weg kennen, gehen wir weiter und fügen einige Leitfäden zu unserem Dokument hinzu. Dies wird uns im Grunde nur ein wirklich einfaches Layout oder ein Raster geben , mit dem wir unsere Website-Elemente arrangieren können. Es wird ein wenig praktischer sein, wenn wir anfangen einige der Ausrichtungswerkzeuge in späteren Projekten zu verwenden. Aber vorerst werden wir mit einer wirklich soliden Grundlinie beginnen. Also, wir werden das Lineal verwenden, um mit zu beginnen. Sie können ein Lineal verwenden, indem Sie entweder den Befehl R drücken oder zu Ansicht, Lineale, Lineale anzeigen gehen . Das wird das Lineal einschalten. Dies lässt Sie genau wissen, welches Pixel oder welche Größe Ihre Zeichenfläche ist und können Sie wirklich in die Nitty-Gritty, wo Ihre Elemente platziert werden. Also, wir werden voran gehen und zoomen nur ein wenig. Da unser Dokument auf 1.200 Pixel breit eingestellt ist, wissen wir, dass unsere Mittellinie genau hier bei 600 liegen wird. Ich möchte, dass mein Website-Design etwa 800 Pixel breit ist. Das ist einfach wirklich willkürlich, aber nur eine wirklich einfache Faustregel, von der ich losgehe. Das bedeutet, dass wir 200 Pixel von jeder Seite festschreiben müssen. Also, ich werde voran gehen und eine von denen hier auf 200 setzen, und dann hier drüben um 1.000. Also, jetzt, wenn wir verkleinern, können Sie sehen, dass wir nur eine wirklich einfache Mittellinie haben. Wir haben unseren linken Rand, und wir haben unsere rechte Marge alle eingerichtet. Das ist wirklich alles, was Sie tun müssen, was Führer betrifft. Es gibt viele verschiedene Rastersysteme, die existieren. Es gibt eine Tonne, die darüber geschrieben wurde. Ich werde etwas davon im Projekt extra posten , damit ihr das sehen könnt und auf ein paar Artikel verlinken könnt. Du kannst so kompliziert werden, wie du wirklich sein willst. Für etwas so einfaches wie nur eine wirklich schnelle Website auf einer Seite, alles, was Sie wirklich brauchen, ist eine wirklich solide Mittellinie und dann sind Sie Marge da draußen gesetzt. Also, jetzt, wo wir das alles eingerichtet haben, können wir weitermachen und wir können eine letzte Sache tun, die ist, unsere Zeichenfläche schnell zu bearbeiten. Also, sagen Sie, dass Sie an einem Projekt arbeiten und Sie erkennen, dass Ihre Zeichenfläche tatsächlich zu klein ist. Die, die wir erschaffen haben, ist vier mal drei. Also, es wird abhängig davon, wie lange unsere Website geht eingeschränkt werden, besonders wenn es sich um eine einseitige Website handelt, wie typische einseitige Landing Sites, die immer und immer und immer weitergehen. Also, wenn Sie mehr Platz zu Ihrer Zeichenfläche hinzufügen müssen, können Sie im Grunde hier auf die Zeichenfläche oder Umschalt+O kommen. Gehen Sie voran und klicken Sie darauf und es wird Sie in diesen Zeichenflächenmodus setzen. In diesem Zeichenflächenmodus sehen Sie hier oben die Breite und Höhe Ihrer Zeichenfläche. Es ist wirklich einfach zu ändern. Also, sagen wir, wir wollen, dass es tatsächlich 2.000 Pixel ist, Sie gehen und wählen 2.000 Pixel und plötzlich sind Sie jetzt 2.000 Pixel hoch. Sagen Sie, eine Sache, die Sie über dieses Tool beachten müssen, ist, dass dieses Symbol hier im Grunde bestimmt, woher alle Ihre Pixel kommen. Also, wenn wir wollen, dass die Pixel an der Unterseite der Zeichenfläche hinzugefügt werden, dann müssen wir es hier aufstellen, so dass der Bezugspunkt der obere ist. Das wird im Grunde alles nach oben sperren und Inhalte darunter hinzufügen. Dasselbe mit der Unterseite, wenn wir mit der Fußzeile oder so etwas arbeiten und wir darüber Raum hinzufügen möchten, dann würden wir dies auf den Boden verweisen, und wenn wir unsere Pixel hinzufügen, wären sie über den Elementen, die bereits auf unserer Zeichenfläche waren. Das ist eigentlich das für das erste Projekt. Jetzt, da wir eine Zeichenfläche haben, haben wir ein Arbeitsdokument, wir gehen weiter und im nächsten Projekt beginnen, mit Formen in Illustrator zu arbeiten. Danke. 2. Erstellen und Bearbeiten von Formen: Hey, hier ist wieder Ryan Carter, und wir werden unser Projekt mit Formen beginnen. Formen sind wirklich der Kern von Illustrator und ermöglichen es Ihnen Ihre Web-Design-Elemente mit großer Leichtigkeit zu erstellen, sie zu verwalten und zu gruppieren, und sie unglaublich einfach auszurichten. Ich denke, dass wirklich in seinem Kern der größte Grund ist , Illustrator für Webdesign zu verwenden , ist, wie einfach es ist, mit all diesen Elementen umzugehen. Also, was wir tun werden, ist im Grunde beginnen zu lernen , wie man einige Formen erstellt und dann, wie man diese Formen bearbeitet, dann wie man sie bewegt, skaliert, rotiert, alle Arten von Dingen, die Sie tun können , um Art von all den verschiedenen kleinen Bits und Stücke Ihres Website-Designs. Also, zuerst beginnen wir im Grunde mit dem, beginnen wir mit dem Rechteck-Werkzeug. Sie werden feststellen, dass wir hier drüben das Rechteck-Werkzeug haben. Wenn Sie es gedrückt halten, können Sie alle diese verschiedenen Arten von Shapes auswählen, die erstellt werden sollen. Sie können Shapes auf zwei verschiedene Arten erstellen. Sie können entweder klicken und ziehen, um eine Form zu erstellen, oder Sie können doppelklicken, um ein Eingabefeld zu erhalten , in das Sie bestimmte Dimensionen eingeben können, wenn Sie genau wissen, wie groß die Form sein muss. Sie werden feststellen, dass, wenn Sie klicken und ziehen, um eine Form zu erstellen, die Sie jede Art von Proportionen erstellen können, es völlig flüssig ist, Sie können jede Art von Form erstellen, die Sie wollen. Wenn Sie Shift gedrückt halten, was passiert, ist, dass die Seiten in perfektem Verhältnis zueinander bleiben , so können Sie perfekte Quadrate, perfekte Kreise, alles, wo die Seiten alle ausgerichtet sind, erstellen . Sie können Shapes auf zwei Arten bearbeiten. Sie können entweder den von Illustrator bereitgestellten Begrenzungsrahmen verwenden, um die Seiten zu ändern, zu ziehen, zu verschieben, zu formen , zu bewegen, klicken und zu ziehen, ihn so zu ändern, oder Sie können einzelne Elemente einer Form ändern mithilfe des Direktauswahlwerkzeugs. Das direkte Auswahlwerkzeug ist dieser Typ hier, es ist der kleine weiße Cursor. Während das Auswahlwerkzeug diese gesamte Form als Ganzes packte, wählt dieses Werkzeug einzelne Punkte oder Linien aus. So wird es Ihnen ermöglichen, einzelne Elemente dieser Form herum zu ziehen, und so werden Sie einige komplexe Formen erstellen. Lassen Sie uns voran gehen und löschen Sie diese Formen und dann gehen wir weiter , um diese ein wenig mehr zu bearbeiten. Also, abgesehen von der Bearbeitung und Erstellung von Formen, können Sie sie auch mit ein paar integrierten Tools bearbeiten, und ich werde Ihnen nur ein paar von denen zeigen, die ich am häufigsten verwende. Also, die erste ist das Drehwerkzeug, und das Drehwerkzeug ist genau hier, Sie können auch einfach R drücken, um es auszuwählen. Was es Ihnen erlauben wird, ist, eine Form herum zu drehen und irgendwie schwindlig zu werden. Die coole Sache daran ist, dass, wenn Sie Shift gedrückt halten, dann wird es dies in 45-Grad-Art von Rotationspunkten sperren , so dass Sie wissen, dass, wenn Sie ein perfektes Quadrat haben und Sie wollen, dass es ein perfekter Diamant ist, dann wissen Sie, dass Sie es nur um 45 Grad drehen wollen. Dies ist super praktisch für kleine Punkte auf Dinge, kleine Nubbins, kleine Pfeile, Dreiecke, all das. Um ein Dreieck wie dieses zu erstellen, drehen Sie einfach ein Quadrat, löschen Sie einen der Punkte, dann können Sie Ihr Stiftwerkzeug verwenden, um hierher zu kommen und sie wieder zu verbinden, dann haben Sie ein Dreieck. Also gehen wir voran und löschen diese Art von Übergang zur Skalierung. Daher ist die Skalierung eines der anderen nützlichen Werkzeuge zum Bearbeiten von Formen. Es ist genau hier, das Skalierungswerkzeug, ich normalerweise nur mit dem Hotkey S. Also was das tun wird, ist es uns zu erlauben , die Größe dieser Form um Größenordnung zu erhöhen oder zu verringern, und halten Sie Shift wie die anderen Werkzeuge gedrückt, wird die Proportionen sperren und uns ermöglichen, sicherzustellen, dass, obwohl es größer wird, wir nicht seine ursprüngliche Art von Shaper-Proportionen verlieren. Dort, super nützliches Werkzeug. Das wird uns helfen, Dinge größer oder kleiner zu machen , wenn wir wirklich irgendwie mit Designs basteln, irgendwie das Logo größer machen, es ist, wie wir es tun werden. Aber das wollen wir nie machen, ich will es kleiner machen. sind also im Grunde die grundlegenden Möglichkeiten, wie wir Formen bearbeiten werden, wir werden Dinge bewegen. Eines der anderen Dinge, die in Illustrator wirklich nützlich sind, ist die Idee, Formen zu kopieren. Also gehen wir weiter und löschen das und dann werden wir daran arbeiten, Dinge zu bewegen und kopieren und einfügen. Also, manchmal ist Ihr Element nicht an der richtigen Stelle. Offensichtlich müssen Sie es platzieren. Sie können entweder Dinge mit dem Auswahlwerkzeug so ziehen , als würde ich es gerade verschieben, oder wenn Sie möchten, können Sie das Umschaltwerkzeug gedrückt halten, während Sie ziehen, und das wird nur Ihre Form um eine horizontale oder vertikale Achse oder eine diagonale Achse, und das ist wirklich nützlich, um Dinge zu bewegen, wenn wir vielleicht nur ein wenig zur Seite oder nur ein wenig nach unten gehen müssen. Wir wollen nicht verlieren, wo wir vertikal oder horizontal ausgerichtet sind, aber wir müssen nur etwas an Ort und Stelle finden, Super-Nützliches. Ein weiteres wirklich nützliches Werkzeug ist nur die Verwendung der Pfeile, die Dinge überall bewegen können und dann auch gedrückt halten Shift während der Bewegung der Pfeile, wird Dinge 10 Pixel auf einmal bewegen, was schön ist, nur eine Art Schuben Dinge, wenn Sie etwas beäugt, so weit wie es zu positionieren. Abgesehen von der Bewegung, wir auch, Sie wissen von Zeit zu Zeit, werden wir wollen, um Formen zu kopieren oder wiederholen Formen immer und immer wieder für Elemente, die wirklich ähnlich sind. Der einfachste Weg, dies zu tun, ist in der Bearbeitung mit Kopieren und Einfügen. Also Tastenkombinationen sind nur Befehl C, Befehl V, das wird ein Element kopieren und es irgendwo anders auf der Kunsttafel platzieren , normalerweise ziemlich nah. Wir können auch etwas kopieren und direkt an der gleichen Stelle platzieren, irgendwie auf dem anderen Element mit Befehl F , der von Zeit zu Zeit auch wirklich praktisch ist. Eine der anderen super nützlichen Verknüpfungen ist die Fähigkeit, gleichzeitig zu ziehen und zu kopieren. Also, wie Sie sehen können, habe ich diesen netten kleinen Kreis, und ich habe Ihnen vorher gezeigt, dass Sie die Schicht gedrückt halten und ihn bewegen können, und er wird ihn auf dieser Grundlinie bewegen. Nun, wenn ich die Umschalttaste gedrückt halte und auch die Wahltaste gedrückt halte, können Sie sehen, dass sich der Cursor in den Kopiercursor ändert, und was das tun wird, ist dieses Element direkt hier oder hier zu kopieren und eine perfekte Kopie davon in der neuen Ort, wo ich gesagt habe, dass es gehen soll. Dies ist der absolut schnellste Weg, um Elemente zu kopieren und ich benutze es die ganze Zeit. Nun, der Nachteil beim Kopieren von Elementen wie diesem ist, dass sie nicht immer gleichmäßig verteilt sind, und das ist ein Problem, weil wir wollen, dass die Dinge gleichmäßig verteilt und super schön sind. Zum Glück hat Illustrator dieses Problem für uns mit einem meiner Lieblings-Panels in dieser ganzen Sache gelöst , und es ist das Ausrichten-Panel. Also gehen wir hier runter zu Ausrichten, vielleicht haben Sie es bereits in Ihrem Werkzeugfenster. Was dies tut, ist, dass es mehrere Formen nimmt und sie auf bestimmte Weise ausrichtet. Sie können mit dieser Art von ein wenig herumspielen, nur um zu sehen, wie sie funktionieren. Ich zeige Ihnen ein paar der nützlichsten. Normalerweise oft, was passiert, ist, dass wir mehrere Elemente haben und wir müssen sie sperren oder irgendwie alle links an der gleichen Zeile ausrichten, und das ist genau hier. Es wird horizontal ausgerichtet sie alle nach links, was sie bewegen wird. Ein besseres Beispiel ist die Verwendung von Formen, die alle gleich groß sind. Lassen Sie mich weitermachen und einige davon machen. Ehrfürchtig. Also, jetzt können Sie sehen. Wir haben diese Formen, sie sind ein wenig weg. Wenn wir sagen wollten: „Nimm alle diese Elemente und zentriere sie alle in einer Mittellinie, dann könnten wir diesen horizontalen Ausrichtungsmittelpunkt verwenden.“ Dasselbe gilt, wenn sie nach rechts ausgerichtet und sie auch nach links ausgerichtet werden. Nun, ein noch kühleres Werkzeug, das in diesem Panel ist, ist die Verteilung. Also, was das perfekt ist, ist etwas, wo ich drei Elemente habe und ich möchte, dass sie perfekte Abstände dazwischen haben, einander. Sie können sehen, dass ich drei Kreise habe. Dieser hat ein wenig Platz, dieser hat viel Platz. mein Design betrifft, möchte ich, dass diese gleichmäßig sind, ich möchte, dass sie perfekt sind. Also, was ich tun werde, ist, ich werde alle drei davon ergreifen und ich werde die Distributionsobjekte verwenden. Was dies tun wird, ist, dass es diese Objekte in perfekten Intervallen verteilen wird , so dass sie alle genau den gleichen Abstand voneinander haben. Ich benutze das eine absolute Tonne. Es ist perfekt, wenn Sie ein Design haben, das sagt, vier Testimonials oder für Symbole, die Sie brauchen, um diese so auszurichten, dass sie alle gleichmäßig verteilt aussehen. Dies ist das Werkzeug, um das zu tun und es ist super hilfreich. Also, das ist es im Grunde zum Erstellen, Bearbeiten, Ausrichten von Formen. Was wir jetzt tun werden, ist, zu etwas komplexeren Formen zu übergehen , die sich mit zusammengesetzten Formen und mit Gruppen beschäftigen. So ist es ziemlich einfach, einfache Formen zu erstellen und sie auszurichten. Wo wir in ein wenig komplexere Situationen geraten, ist, wenn wir viele Formen, viele Grafiken, viele Elemente, die wir alle brauchen, um miteinander in gewisser Weise zu interagieren. Also, lasst uns weitermachen und ein paar Szenarien erstellen und euch zeigen wie man mit vielen Formen umgeht, die zusammen sind. Eines der ersten Dinge, die Sie bemerken werden, ist, dass, wenn ich eine neue Form erstelle es immer auf der Form sitzt, die ich zuerst erstellt habe. Nun, das ist nützlich, wenn Sie immer wollen, dass diese Form oben ist, aber manchmal tue ich es nicht. So hat Illustrator im Grunde ein schnelles kleines Werkzeug, mit dem Sie ein Element in Bezug auf alle anderen Elemente um es herum positionieren können . All das wird über das Arrange-Menü verwaltet. Also, im Arrange-Menü haben wir nach vorne bringen, vorwärts bringen, rückwärts schicken, nach hinten schicken. Was diese im Grunde tun, ist dies erlaubt Ihnen, zu ändern wo ein Element in Bezug auf alle Elemente um es herum so weit wie die Tiefe sitzt. Es gibt auch kurze Schlüssel, so dass Sie es den ganzen Weg nach hinten senden können, senden Sie es den ganzen Weg nach vorne, Sie können es nur einen nach unten bewegen. Das ist wirklich einfach. So können Sie Elemente vor und hinter andere Elemente schieben, die sich um sie herum befinden. Also, sagen Sie, dass ich diese schöne Form geschaffen habe, aber ich wollte sie überall zusammen bewegen. Die einfache Möglichkeit, alle diese Elemente zusammenzuhalten, besteht darin, im Grunde eine Gruppe zu erstellen. Also, was Sie im Grunde tun können, ist hier zu Objekt zu gehen und Sie können das Gruppen-Werkzeug verwenden, oder auch einfach Befehl G. Also was das tun wird, ist, es wird all diese Elemente nehmen, es wird sie kombinieren in eine Gruppe, so dass ich, wenn ich eine von ihnen wähle, werde ich alle von ihnen auswählen. Wenn ich einen von ihnen verschiebe, werde ich sie alle bewegen. Dies ist wirklich, wirklich nützlich, wenn Sie wirklich komplexe Gruppen von Elementen haben , die Sie erstellt haben, oder Symbole, und in Containern und Sie möchten es überall bewegen , ohne einzelne Elemente von etwas zu bewegen. Neben der Gruppierung von Elementen können wir Elemente auch zu komplexen Formen kombinieren. Also, sagen Sie, dass ich eine Sprechblase erstellen wollte. Ich kann das mit einem Rechteck und einem perfekten Quadrat tun. Also, ich werde das perfekte Quadrat nehmen. Ich werde das seitlich drehen. Ich werde das hier runterbringen. Sagen Sie, ich hatte es wild platziert und ich wollte, dass es perfekt zentriert ist, ich konnte das wirklich einfach mit dem Ausrichtungstool, das wir vorher gezeigt haben, tun. Schnappen Sie sich die und säumen Sie sie zusammen. Wenn ich will, dass das etwas kleiner wird, werde ich das da oben verschieben. Offensichtlich ist diese Gesamtform richtig, aber wir haben ein Problem, wenn es sich um zwei Formen handelt. Um das zu ändern, können wir im Grunde zum Pathfinder gehen und das Formmodus-Bedienfeld verwenden. Formmodi ist ziemlich hilfreich, wenn Sie komplexe Formen mit Dingen erstellen möchten. Der Pathfinder ist hier unten. Sie werden diese wahrscheinlich nicht eine Tonne verwenden, aber Sie werden definitiv dieses Unite-Werkzeug die ganze Zeit verwenden. also auf Unite klicken, werden diese beiden Formen im Grunde genommen genommen und es kombiniert sie einer komplexen Form, die ich dann bewegen kann, und anstatt zu vollständig kombiniert zu sein und die Sprechblase zu machen, die ich machen wollte. Also, das ist genau wie ein einfacher schneller Durchlauf, weit wie man komplexere Formen erstellt, wie man mit vielen Formen umgeht, die zusammen sind. Also, du sagst vielleicht zu dir „Brian, wie gehen all diese Dinge zusammen? Warum hast du das alles superschnelle durchgeblasen?“ Nun, ich werde euch zeigen, wie das alles zusammen funktioniert , um ein einfaches Website-Design zu erstellen. Also, lassen Sie uns fortfahren und löschen Sie diese und gehen Sie zurück zu unserer Projektdatei. Also, was ich tun wollte, ist im Grunde führen Sie Jungs durch, wie ich die allgemeinen Formen erstellen würde, die eine prototypische Landingpage Homepage bilden. Also, lassen Sie uns das gemeinsam durchlaufen. Also, wir werden mit einem Header-Bereich beginnen. Ich möchte jetzt nicht super kompliziert werden, ich möchte nur diesen Header-Bereich bezeichnen, indem ich ein großes Rechteck mache. Ich werde das ändern. Ihr könnt sehen, dass wir später viel mehr in die Farben kommen, aber nur für den Moment werden wir voran gehen und dieses grau machen, weitermachen. Also, im Moment werde ich das in Position bringen , so dass es wirklich schön aussieht und wirklich schön ausgerichtet ist. Ich werde mich hier unten auf diesen Abschnitt konzentrieren. Also möchte ich einen Testimonials Bereich machen. Als Teil dieses Testimonials Bereichs möchte ich eine Form erstellen, die ein Bildschirmgriff von jemandes Website mit einer kleinen Sprechblase ist, die wie ein Avatar darin hat. Um dies zu tun, können wir eine Reihe von verschiedenen Formwerkzeugen kombinieren. Also werde ich mit dem abgerundeten Rechteck beginnen. Ich werde so einen runden Rechteck Gürtel machen. Das ist ein bisschen zu groß. Also, wir werden das hier überziehen. Ich möchte, dass das drei breit ist. Also, mach weiter und mach so etwas. Cool. Das sollte definitiv funktionieren. In Ordnung. Gehen Sie weiter und richten Sie das hier mit meiner Regel so aus. Nun, diese Avatare. Ich will einen Kreis-Avatar. Ich denke, es wäre cool, vielleicht eine kleine Blase aus dem Boden ein wenig zu haben , um ein wenig komplexer Form zu machen. Lassen Sie uns das versuchen. Um sicherzustellen, dass diese Dinge völlig aufgereiht sind, werde ich mein Zeilenwerkzeug verwenden, starkes Zeilenwerkzeug. Ja, die Jungs sind alle ziemlich perfekt aufgereiht. Bewegen Sie das nur ein bisschen nach oben. Bewegen Sie das nur ein bisschen nach oben. Ich werde diese beiden miteinander vereinen. Das ist cool. Wir haben diesen kleinen Kerl, aber ich habe gerade einen. Also, ich werde das hier bewegen. Ich werde mir die schnappen. Ich werde sie zusammenfassen, damit ich sie miteinander bewegen kann, und ich werde diesen Befehl zum Verschieben und Kopieren verwenden, wie ich euch zuvor gezeigt habe. Ich werde einen den ganzen Weg hierher nach rechts bewegen. Dann werde ich eins in die Mitte schieben. Sie können sehen, dass diese nicht gleichmäßig verteilt sind. Also, dann werde ich alle drei schnappen. Gehen Sie zurück zum Ausrichtungswerkzeug und verwenden Sie diesen horizontalen Verteilermittelpunkt. Ich habe drei Elemente aus meinem kleinen Testimonials Bereich, und alle drei Elemente sind perfekt aufeinander abgestimmt. Das ist nur ein wirklich schnelles Tutorial, das zeigt, wie Sie die Formen verwenden können, um kleine komplexe Elemente zu entwerfen und sie um Ihr Design wirklich einfach zu platzieren. 3. Typografie und Farbe: In dieser Tranche der Klasse werden wir über Typ und Farben sprechen, und ich denke, ich werde dies im Zusammenhang mit dieser Website tun, an der wir zuvor von Projekt zwei gearbeitet haben. Der Typ ist im Illustrator großartig. Ich denke, der Illustrator behandelt Typ unglaublich gut. Ich denke, es behandelt es besser als in Photoshop. Ich denke, es ist wirklich eine der Stärken des Programms, da so viel von einem Webdesign Typ ist. Ich denke, dass es unglaublich nützlich ist, ein Werkzeug zu haben, das es gut schafft, und ich habe immer meinen Kopf gegen die Wand versucht, Photoshop dazu zu bringen, das Zeug zu machen, das ich wirklich wollte. Lassen Sie uns zuerst darüber sprechen, wie wir in Illustrator Typ erstellen. Zunächst verwenden wir das Type-Werkzeug. Du siehst hier draußen sehr schnell. Es ist hier drüben. Sie können die Tastenkombination T verwenden, um darauf zu gelangen. Durch Klicken, erhalten Sie einen, einen Bereich oder geben Sie einen Cursor, um dann Ihren Typ einzugeben. Also, dann können wir: „Das ist eine Schlagzeile.“ Diese Schlagzeile ist mutig, hässlich, und ich möchte sie in etwas anderes ändern. Also, Sie können hier oben sehen, wir haben einige wirklich schnelle Voreinstellungen für Ihren Charakter. Das ist die Schriftfamilie. Dies ist die spezifische Schriftart, Größe, Absatz. Dies ist wirklich alles, was Sie in der Regel brauchen es sei denn, Sie haben mit voll über Absätze und Dinge zu tun, aber wenn Sie individuelle Anpassungen vornehmen müssen , können Sie hier auf das Zeichenfeld klicken. Dies ist, wo Sie alle Ihre Charakterelemente erhalten werden. Es gibt Größe, Zeilenhöhe, Skalierung, die nie, nie, jemals, jemals, Type-Skalierung verwenden, weil es Ihre Schriften verzerren wird, und es wird super hässlich sein, und das ist das Kerning, wenn Sie aus. All das wird wahrscheinlich in anderen Klassen behandelt. Dies ist genau hier unten, das ist der Absatz. Dies ist, wo Sie gehen, um alle Ihre Ausrichtungsoptionen, Rechtfertigung, Raum oben, Raum unten zu sehen , dies ist, wenn Sie wirklich gehen, um mit Tonnen von Typ zu tun. Möglicherweise benötigen Sie dies für einige Projekte, möglicherweise nicht. Eine andere Sache, die man unbedingt beachten muss, ist die Silbentrennung. Also, automatische Silbentrennung ist großartig, wenn Sie an einem Buch arbeiten oder etwas, das Sie ausdrucken werden, aber es ist nicht großartig, wenn Sie mit Websites arbeiten, weil Websites keine Silbentrennung von Wörtern machen. Die meisten Browser haben nichts wirklich integriert, die meisten Websites nicht automatisch Silbentrennung Dinge, wenn sie zu lang werden. Also, um den echten Lappen Ihres Typs zu sehen, und haben eine wirklich genaue Darstellung dessen, was ein Besucher sehen wird. Sie möchten sicherstellen, dass die Silbentrennung deaktiviert ist. Also, zuerst möchte ich eine Schlagzeile für unsere Website nur meine allgemeine Website machen. Ok. Also, zuerst werde ich mich mit meiner Schlagzeile beschäftigen. Ich werde die Schriftart hier oben in Museo sans ändern, was wir benutzen. Gehen Sie weiter und ändern Sie dies wie die neun Hunderte, schön und groß. Das ist eine Schlagzeile. Eine große tolle Schlagzeile. Sie werden feststellen, dass Sie die gleichen Skalierungswerkzeuge, Bearbeitungswerkzeuge und Auswahlwerkzeuge verwenden können , wie wir im Lernprogramm zu Shapes übergegangen sind. In den meisten Fällen wird Ihre Textzeile als Form behandelt. Sie möchten sicherstellen, dass Sie es beim Skalieren nicht skalieren, indem Sie einfach klicken und ziehen, weil das Ihren Typ wirklich verzerren wird. Sie möchten sicherstellen, dass Sie immer die Umschalttaste gedrückt halten, um sicherzustellen, dass der Anteil des Typs gleich bleibt. So. Ich werde voran gehen und eine kleine zentrierte Schlagzeile erstellen. Mal sehen. Okay, jetzt, da wir unsere Schlagzeile haben, wir weiter und machen uns vielleicht einen Untertext. Also, lasst uns das machen. Also, wir werden das Typ-Tool verwenden. Wenn ich auf das Typ-Tool wie zuvor klicke und eine ganze Reihe von Lorem ipsum kopiere, wird es ein Problem sein, weil das normale Typ-Tool ganz von selbst keinen Container hat. Also, wir werden voran gehen und das löschen. Was wir tun möchten, ist das Textwerkzeug zu verwenden und klicken und ziehen, um einen Begrenzungsrahmen für unseren Typ zu definieren. Sobald wir diesen Begrenzungsrahmen definiert haben wird der gesamte Typ darin beibehalten. Also, ich werde Befehl A drücken, um alles zu schnappen. Offensichtlich möchte ich nicht, dass all diese Kopie 48 Punkte hoch ist, noch möchte ich, dass sie super fett ist. Also, wir werden es auf 500 verschieben. Also, dass es schön und lesbar ist. Niemand in seinem rechten Kopf will so viel direkt an der Spitze einer Website lesen, zuerst wird es vortäuschen, um so groß zu sein. Sie werden feststellen, dass Sie den Begrenzungsrahmen ändern können. Wenn etwas nicht in den Begrenzungsrahmen passt sehen Sie dieses kleine rote Plus, um zu bezeichnen, dass es mehr Typen gibt, die nicht passen. Also, Sie können das im Grunde ändern und bewegen. Dies wird uns nur eine super einfache Überschrift und Unterkopie geben. Sagen Sie, unsere Linien waren vielleicht ein bisschen dicht beieinander, vielleicht wollen wir sie ein wenig weiter auseinander schieben. Dort wird sich etwas wie die Zeilenhöhe als nützlich erweisen. Als allgemeine Faustregel behalte ich normalerweise die Dinge etwa einen Punkt fünfmal so groß wie die Schriftgröße, aber für etwas, wo es ein bisschen größer ist, vielleicht ist es eine Unterkopie, Überschrift. Ich halte es gerne fest, also vielleicht 30. 30 ist ein bisschen besser als 28. Gib ihm einfach ein bisschen Atemraum. Also, Sie können sehen, ob wir verkleinern. Wir haben jetzt eine wirklich schöne Schlagzeile. Da oben, behalte unseren Untertyp, da oben. Lassen Sie uns zu diesen Zeugnissen gehen. Also, ich möchte nur einen wirklich schönen Typ-Stil für diese Testimonials erstellen. Sagen Sie, ich möchte ein paar Dinge tun, was die Person sagte, vielleicht woher sie kamen, wer sie sind. Das hört sich nach einem großartigen Zeugnis an. Also, wir werden all diese nehmen, machen es einfach normale Körperkopie-Größe sagen 12, vielleicht stoßen Sie es auf die 300 Größe. Offensichtlich ist dies die Vermietung hier viel zu viel. Wir wollen das auf 18 stoßen, nehmen Sie all das. Offensichtlich wollen wir auch nicht wirklich, dass sie zentriert sind, es sitzt ein wenig lustig da unten, also werden wir das nehmen. Kommen Sie hier rauf zur Ausrichtung. Links ausrichten, ich denke, vielleicht ein bisschen größer, das scheint klein. 14, 21. Bot-a-thing-bot-a-boom, los geht's. Also, lassen Sie uns das abschneiden, damit sie nicht unglaublich lang sind. Nun, was wir tun können, ist hierher zu kommen und zu sagen, dass die von einem Kerl gemacht wurden. Soll der Kerl ein wenig auffallen. Ich mache das 900 und vielleicht ist er wie ich. Er ist aus Dayton Ohio. Ich will nicht, dass das auch super fett ist, also werde ich das zurück auf 500 drücken, und vielleicht stoßen Sie es in der Größe, nur so dass es kein Super in Ihrem Gesicht ist. Sie können auch ein paar coole Dinge hier oben machen . Wenn Sie in der Dropdown-Werkzeug suchen. Sie können die Dinge alle Kappen machen, was großartig ist, wenn Sie wollen, dass etwas immer in allen Kappen ist. Sie können auch einige andere Optionen ausführen. Ein wenig komplizierter, hochgestellter, tiefgestellter, vielleicht möchten Sie kleine Großbuchstaben. Normalerweise sind alle Kappen diejenige, die ich am häufigsten verwende. Also, das ist da oben. Ok. Also, jetzt, wo wir das haben, wollen wir es vielleicht etwas ändern. Ich will nicht wirklich, dass es den ganzen Weg so weit fließt. Um vielleicht Dinge nicht so hässlich zu machen, werde ich dieses Wort nur ein wenig abschneiden, aber so ähnlich wie unsere Formen, die wir früher erstellt haben, können Sie die gleichen Werkzeuge verwenden , um sicherzustellen, dass diese sind gleichmäßig mit dem Rest des Typs verteilt. Also, wir wollen, dass diese links an den Blöcken der Grafik darüber ausgerichtet sind. Also, ich werde all diese Elemente nehmen, und ich werde meine ausgerichteten Werkzeuge sicher hier oben verwenden, und dann bewegen und sie ein wenig ausrichten, und das wird einen wirklich schönen Testimonial Bereich schaffen Hier unten. Also, jetzt, wo wir einige Inhalte gefüllt haben, wie machen wir es cool aussehen, weil ich möchte, dass meine Website tatsächlich einige Farben verwendet. Farben sind wichtig und Farben sind auch, sind wirklich genial in Illustrator, und einer der Gründe, warum ich liebe es mit diesem Programm. Also, die Farbpalette ist wirklich, wo Sie gehen, um die meiste Ihrer Arbeit zu tun. Ändern Sie Ihre Farben, basteln Sie mit ihnen, um sicherzustellen, dass sie absolut perfekt sind. Die eine Sache, die ich darauf hinweisen möchte, die für später super hilfreich sein wird, ist dieses Hex-Tool genau hier. Nun, dieses Werkzeug, RGB typische Farben alles auf einem Bildschirm ist ein RGB-Wert. Also, das wird der einfachste Weg sein, nur herauszufinden, welche Farben Sie verwenden möchten, aber wenn Sie diese Farbe nehmen, können Sie einem Entwickler normalerweise keine RGB-Farbe geben, es sei denn, sie verwenden einige extra komplizierte CSS 3-RGBA-Werte. Also, worauf Sie sich verlassen möchten, ist der Hex-Wert. Der Hex-Wert ist, was der Browser verwendet, um herauszufinden, was diese Farbe ist. Also, lasst uns tatsächlich anfangen, einige von ihnen zu färben. Also, was, wenn ich will, dass dieser obere Bereich blau ist. Gehen wir voran und wählen Sie ein wirklich schönes Blau. Ich benutze das Blau, das meinem Herzen am nächsten ist, 0093da. Das ist sehr blau. Also, wir haben einen großen schönen blauen Kopfbereich. Vielleicht möchte ich, dass die Schlagzeile auftaucht und stattdessen weiß ist. Vielleicht möchte ich, dass das eher ein Schlitten ist, statt klassisches Schwarz. Sie können diese Elemente also verschieben und ziehen um die Farben zu ändern, um die gewünschten zu finden. Nun, das eigentliche Problem ist, was, wenn ich diese Farben immer und immer wieder verwenden möchte? Nun, die Antwort ist ziemlich einfach. Sie können auf ein beliebiges Shape klicken, dessen Farbe , klicken und ziehen und zu den Farbfeldern hinzufügen. Nun, was das tun wird, ist, dass diese Farbe gespeichert wird, damit wir sie referenzieren und sie immer und immer und immer wieder verwendenkönnen und sie immer und immer und immer wieder verwenden . Also, ich möchte diesen Schlitten retten, und ich möchte auch dieses Blau retten. Sie haben das letzte Mal bemerkt, als ich es von hier geschnappt habe. Sie können es auch von hier rüber holen und es auch dort rüber ziehen. Also, das wird wirklich hilfreich sein, um eine Palette zu erstellen, die Sie immer und immer wieder verwenden , um sicherzustellen, dass die Farben, die Sie verwenden, alle genau die gleichen sind. Wenn das hier ein bisschen zu überladen wird, was es manchmal tut, können Sie hier runter gehen und einfach alle ungenutzten auswählen. Das wird jedes Farbfeld greifen, das du nicht benutzt. Und dann können Sie Farbfelder in den Papierkorb ziehen, um sie zu löschen. Also, das wird im Grunde nur uns Schwarz-Weiß und die zwei Farben , die wir als unsere Farben für unser Design definiert haben. Also werde ich hier runterziehen und ich werde dasselbe mit diesen machen. Ich werde diese Kerle schnappen. Ich werde sie zu dieser schlauen Farbe machen. Jetzt, wenn ich einen ganzen Textblock packe , wird es tatsächlich alles in ihm eingefärbt. Wenn es ein bestimmtes Element des Textes gibt, das Sie eine bestimmte Farbe haben möchten, dann können Sie mit Ihrem Typwerkzeug kommen und genau das auswählen, und dann gehen Sie nach oben und geben Sie an, welche Farbe Sie denken, es sollte stattdessen sein. Also, ich werde voran gehen und diese blauen machen, vielleicht will ich nicht, dass das so auffallen, also werde ich es vielleicht ein bisschen heller grau machen. Also, hoffentlich all das gibt Ihnen einen Griff, wie Sie Farben und Typ verwenden , um eine Menge Persönlichkeit hinzuzufügen und einige echte Inhalte in Ihre Website-Designs zu bekommen. 4. Hinzufügen von Stilen und Effekten: Hallo nochmals, und willkommen zum vierten Projekt in dieser Klasse. Bei diesem Projekt dreht sich alles um Stil und das Hinzufügen von Stil zu den verschiedenen Elementen Ihrer Website. Also, um all diese Punkte zu veranschaulichen, werden wir anfangen, indem wir einfach einen wirklich schönen Button an der Spitze unserer Website machen , um jedem einen allgemeinen Aufruf zum Handeln zu geben. Also werde ich voran gehen und nur mit einem einfachen Quadrat beginnen. Ich werde es hier aufbauen, es in die Mitte bringen, damit es wirklich schön sitzt. Also denke ich, ich werde etwas aussuchen, lass uns einfach mit unserem Schiefer weitermachen. Nur damit es schön und schwer ist. Wir geben diesem Knopf ein Etikett, das nur sagt: „Tun Sie etwas Tolles“, Lassen Sie uns es weiß machen , so dass es absteht und wir werden nur Ausrichtungen zentrieren als auch. Ehrfürchtig. Also, jetzt haben wir unseren Knopf hier sitzen, aber er sieht nicht so toll aus. Also, lasst uns damit beginnen, ihm eine Grenze zu geben. Also, Boarders sind genau hier, es wird technisch gesehen ein Schlaganfall genannt. Sie können Ihren Strich wie jede normale Form mit dieser Farbpalette hier oben einfärben . Also, ich werde voran gehen und es nur weiß machen. Um tatsächlich die Art und Weise zu ändern, wie der Strich aussieht, um jede Art von zusätzlichen Elementen hinzuzufügen, können Sie hier kommen, der wichtigste Teil davon ist im Grunde das Gewicht, wo Sie die Art und Weise ändern können, wie Ihre Grenze funktioniert, wie dick es ist und wie es das Objekt umgibt, auf dem es sich befindet. So können Sie den Rahmen entweder an der Mitte ausrichten, ihn nach innen ausrichten oder nach außen ausrichten. Aber Sie können sehen, weil ich eine quadratische Form habe, die Punkte aller meiner Grenzen sind quadratisch. Eine Sache, die ich tun kann, ist im Grunde dieses Eckwerkzeug zu wählen Illustrator zu sagen, dass ich nicht möchte, dass diese Elemente einen super, super scharfen Eckpunkt haben , ich möchte, dass sie ein wenig abgerundet sind. Das funktioniert wirklich gut, und gibt nur einigen Ihrer quadratischen Elemente ein wenig weicheres Gefühl. Ich will wirklich nicht, dass das weiß ist, weil es ein bisschen zu viel abhebt. Also, ich werde gehen, vielleicht wählen Sie eine benutzerdefinierte Farbe. Lassen Sie uns voran und wählen Sie die Hintergrundfarbe und dann, vielleicht möchte ich, dass es ein wenig dunkler als der Hintergrund ist. Ja, das ist nett. Lassen Sie uns also voran und fügen Sie unseren Knöpfen einen Farbverlauf hinzu , nur damit es ein wenig absteht. Wir gehen auf die Farbverlaufs-Symbolleiste, wir werden die Schaltfläche auswählen, die wir ein wenig Tiefe geben möchten. Wir werden die Art des Gradienten auswählen, die wir wollen, wir werden einen linearen Farbverlauf verwenden, so dass es eine negative 90 ist, also das ist einfach schön und geht nach oben und unten. Sie können diese Farben im Grunde nehmen und sie nach unten in Ihr Element ziehen , um die verschiedenen Farben zu ändern, die Ihren Farbverlauf bilden, in welche Farbe es übergeht. Sie können mehrere Schritte dazwischen erstellen, indem Sie auf andere Punkte entlang dieses Farbverlaufs klicken und sie herausziehen, um sie zu entfernen, das sieht gut aus. Es ist nur ein wirklich einfacher Farbverlauf, um diese Schaltfläche ein wenig Tiefe zu geben , so dass Leute, die Ihre Website besuchen , definitiv auf diese Sache klicken wollen. Neben dem Hinzufügen von Verläufen zu Dingen können Sie jetzt auch eine Reihe von Ebenenstilen und Effekten verwenden , die Ihnen helfen, Ihre Formen zu bearbeiten und ihnen ein wenig Stil zu verleihen. Lassen Sie uns also ein paar davon erkunden. Einer von denen, die ich am häufigsten verwende, ist eigentlich Grenzradius. So können Sie sehen, dass wir eine einfache quadratische Taste haben. Aber ich persönlich liebe einen schönen abgerundeten Eckknopf. Also, ich werde hier rauf gehen, um stilisierte runde Ecken zu beeinflussen. Jetzt wird mir das ein kleines Dialogfeld geben, das mich fragt, wie gerundet ich möchte, dass diese sein sollen. Sie können voran gehen und eine Vorschau dieser nur durch Klicken auf diese kleine Vorschau-Schaltfläche direkt hier. Normalerweise mache ich irgendwo um fünf Pixel, das fühlt sich normalerweise nett zu mir an. Also jetzt haben wir einige abgerundete Ecken auf unserem Knopf, lassen Sie uns einige der anderen Effekte erkunden, die uns helfen, etwas Tiefe hinzuzufügen. Wir gehen hier runter zum Testimonials Bereich, um das wirklich auszuprobieren. Also, ich werde all diese Formen nehmen, gehen wir weiter und machen sie weiß. Ich möchte sie ein wenig von der Seite abheben lassen. Also, um das zu tun, werde ich sie alle benutzen. Ich werde das äußere Glühen benutzen. Nun bevorzuge ich äußere Schein als Schatten fallen, nur weil es ein wenig einfacher zu verwalten ist, und weil mit äußeren Glühen das Leuchten gleichmäßig ist und in der Mitte einer Form beginnt , anstatt so auszusehen, als hätte es gerichtetes Licht. Also, für mich ist dies der bevorzugte Weg, um ein wenig Glanz nach außen hinzuzufügen. Also, ich möchte voran gehen und den Modus ändern, um sich zu vermehren, das wird uns einen schönen Glanz geben den ganzen Weg herum. Normalerweise mag ich das nicht, um super dunkel zu sein, also gehe ich normalerweise runter zu irgendwo um 25 oder 15, vielleicht ziehe ich die Unschärfe ein wenig fest. Ich will wirklich, dass es subtil ist, also gehe ich voran und mache das, dann zieh das aus. Dann können Sie sehen, dass, indem das kleine bisschen Glanz an der Außenseite dieser Elemente hinzufügen, sie wirklich beginnen, von der Seite ein wenig zu springen, und das ist eine super einfache Möglichkeit, eine minimale Tiefe zu geben, ohne Dinge zu weit auszublasen. Wenn du diese Effekte zu Dingen hinzufügst, kannst du sie später ganz einfach bearbeiten, indem du das Darstellungsfenster hier drüben verwendest. Also, was das Erscheinungsbild Panel tut, ist, es sagt Ihnen alles über eine Form und was darauf angewendet wird. So können Sie sehen, dass es keinen Strich gibt, er hat eine weiße Füllung, es hat ein äußeres Leuchten, es hat Standarddeckkraft. Sie können diese Dinge in einer Vorschau anzeigen, indem Sie sie aus- und einschalten Sie können auch auf einen Effekt doppelklicken, um sie schnell zu bearbeiten und zu ändern. Vielleicht war das etwas leichter und ich wollte, dass es dunkler wird, also konnte ich reingehen und das sofort anpassen. Sie können auch alle Effekte nehmen und sie einfach vollständig löschen , indem Sie sie greifen und sie hier in den Papierkorb verschieben. Das wird die Dinge wieder auf das zurückversetzen, was sie waren, bevor sie Stile auf sie angewendet hatten. Das ist also der schnelle Durchlauf von Ebenenstilen, Verläufen, Rändern und genau wie Sie Ihre Elemente verschönern können, um sie interaktiver aussehen zu lassen und ihnen ein wenig mehr Tiefe zu verleihen. 5. Bilder hinzufügen: Also, mit den letzten vier Projekten, die wir übergegangen sind, wie Sie Ihr Dokument einrichten, wie Sie Formen erstellen und wie Sie die Elemente Ihres Website-Designs erstellen, aber dies lässt eine der größten Teile des Webdesigns aus und das ist Bilder. In diesem Projekt geht es darum, Bilder in Ihr Dokument zu importieren, Bilder zu verwalten und sie einfach allgemein zu verwenden. Das erste, was wir übergehen werden, ist, wie man Bilder tatsächlich in Ihr Dokument bringt. Die einfachste Möglichkeit, Bilder zu greifen und sie in Ihr Dokument zu ziehen , besteht darin, sie einfach in Ihr Dokument zu ziehen. Ich habe das mit ein paar Bildern hier gemacht, die wir im Tutorial verwenden werden, und das sollte auch in der Illustrator-Datei sein, die ich später zur Verfügung stelle, aber das ist wirklich der einfachste Weg, um Sachen hier reinzuwerfen. Der andere Weg, wie Sie es tun können, ist, hier zum Befehl Platzieren zu kommen, und Sie können ein Bild von einer anderen Stelle auf Ihrem Computer auswählen, und dies wird es einfach in Ihrem Dokument platzieren. Also, sobald Sie ein Bild haben, das Sie verwenden möchten, wie ich dieses ausgegrautes Café als nur einen allgemeinen Hintergrund für meinen Header-Bereich verwenden werde. Also, ich werde es ein wenig skalieren, so dass es passt. Ich werde den Befehl benutzen, um ihn nach hinten zu schieben. Also, das ist der ganze Weg in den Rücken und dann werde ich ein super cooles Werkzeug verwenden , das eine Clipping-Maske genannt wird. Was eine Clipping-Maske im Grunde tut, ist, sie ein großes Illustrationsbild benötigt, alles, dass sie ein großes Illustrationsbild benötigt, alles,was wirklich groß ist, und verwendet eine andere Form, um es im Grunde in diese Master-Form zu schneiden. Also, der einfachste Weg, dies zu tun, ist im Grunde nur zwei Boxen. Ich werde voran gehen und dies mit dem Header tun. Also, Sie tun dies im Grunde, indem Sie die beiden Formen greifen. Stellen Sie sicher, dass sich das Shape, das Sie zuschneiden möchten, hinter dem Shape befindet , das Sie tatsächlich als Maske verwenden möchten. Wir gehen hier rauf zu Objekt, Clipping Mask und Make. Jetzt können Sie sehen, was das getan hat. Es dauerte das ganze große Bild, schneidete es auf die Größe dieser Kopfzeilenform, die ich zuvor erstellt hatte. Also, was Sie tun können, um tatsächlich zu bearbeiten, ist, dass Sie das Direktauswahlwerkzeug verwenden können, Sie das Element selbst greifen können, und Sie können Dinge wie das Einfärben tun. Aber im Moment hat es, dass dieses Bild darin sitzt. Also, ich möchte ein bisschen von diesem Blau durchscheinen. Also, ich werde tatsächlich das Direktauswahl-Tool verwenden, um dieses Bild auszuwählen, und dann werde ich hierher kommen und vielleicht die Deckkraft ändern. Gehen wir einfach mit etwas wie 30, das ein bisschen besser aussieht. Sie können es da hinten ein wenig gespendet sehen, geben ihm einfach ein bisschen Persönlichkeit. So können Sie Clipping Masken in etwas vielleicht etwas komplizierter hier unten sehen. Also werde ich einige meiner Lieblingskollegen nehmen und sie in die Avatare verwandeln. Also zuerst, wie zuvor, geht jemand weiter und schickt das nach hinten. Ich werde diese Form annehmen, da es Teil einer Gruppe ist. Ich werde voran gehen und die Gruppierung aufheben, damit es ganz von alleine sein kann. Dann werde ich es als Maske verwenden, und Sie können sehen, dass es das braucht, und Sie können es sogar für zusammengesetzte Formen als auch verwenden, was ich denke, ist wirklich cool. Also will ich das mit all den anderen Typen machen. Steck ihn, schick nach hinten, Gruppe, die es uns einfach [unhörbar] lassen. Jetzt können Sie sehen, dass ich das Direktauswahl-Tool verwende, und ich kann dieses Bild tatsächlich bewegen, um einfach alles dort zu platzieren, wo ich es will Ich kann das Bild dort hinten skalieren, die Pfeilwerkzeuge verwenden, um wirklich Position, dass, wo ich denke, es sollte gehen und wo es wirklich am besten aussieht. Sie müssen nicht alle Bearbeitungsschritte durchführen, bevor Sie Dinge in die Ausschnittsmasken bringen. Also, jetzt haben wir drei coole Kerle, in unserem Testimonials Abschnitt chillen. Sie sind alle ein paar Jungs, und sie haben ein paar Dinge gesagt, die nett sind, was auch immer meine gefälschte kleine Website ist. Ich werde voran gehen und tatsächlich eine andere coole Sache über Clipping Maske zu illustrieren, und das ist, dass Sie tatsächlich Clip Masken innerhalb einer Masken. Sie können alle Clipping tun, die Sie wollen, Sie können sehen, dass dies tatsächlich eine Clipping-Maske ist auch. Es ist nur eine Schnittstelle, die in diesem, wirklich schönen kleinen abgerundeten Quadrat abgeschnitten wurde . Was ich tun werde, ist eigentlich, diesen gleichen Container hier oben zu verwenden, um das auch in den Header zu setzen. Also, sehen Sie, ich werde diese Begrenzungsbox von meinem Coffee-Shop-Bild holen . Ich werde das kopieren und es dann tatsächlich einfügen, und Sie können sehen, dass es es es genau dort einfügt, wo es vorher war. Dann werde ich diese Form als Clipping-Maske für meine Schnittstelle verwenden. Jetzt kann ich das tatsächlich nehmen und ich kann es so weit bewegen , wie es die Tiefe betrifft. Dann, wenn ich will, kann ich andere Dinge tun, wie hier reinkommen, um das ein bisschen nach oben zu bringen. Es hat einen schönen kleinen Rand am unteren Rand, ich werde vielleicht, ich kann hier doppelklicken, um tatsächlich zu bearbeiten, was in einer Clipping-Maske ist. Dies wird mich nur mit dem beschäftigen, was in dieser einen Clipping-Maske ist, und ich kann das irgendwie nehmen, ich will nicht, dass es so hoch ist, um wirklich in den Abfall zu kommen. Also werde ich das nach unten verschieben oder vielleicht meinen Knopf etwas weniger enorm machen, weil er ziemlich groß ist. Nehmen wir das hier, im Laufe der Gestaltung Ihrer Website, werden Sie am Ende mit vielen Bildern hier drin, und es ist leicht, sie aus den Augen zu verlieren. Die wirklich schönen Dinge, die Illustrator darin integriert hat, ist ein Link-Panel. Sie können hier sehen, ich werde es einfach hier rüber ziehen. Dadurch werden alle Bilder angezeigt, die innerhalb des Dokuments verlinkt sind. Nun gibt es zwei Arten von Bildern in einem Illustrator-Dokument. Es gibt eingebettete Bilder und es gibt verknüpfte Bilder. Eingebettete Bilder sind großartig, da sie tatsächlich in Ihr Dokument eingebettet sind. Aber das ist auch eine Art von ihrem Untergang, denn je mehr eingebettete Bilder anstelle eines Dokuments desto größer wird die Dokumentdatei. Wenn Sie Ihre Dateigröße klein halten möchten, dann können Sie einfach mit externen Bildern verknüpfen , wie wir es mit unserem Coffee-Shop-Bild gemacht haben. Das zeigt sich genauso wie ein Bild, während eingebettete Bilder, Bilder, die direkt in unser Dokument platziert werden, mit diesem kleinen eingebetteten Werkzeug zeigen. Eine weitere coole kleine Sache über dieses Panel, ist, dass es eine echte Link-Taste und auch eine Go to Link Taste hat. Mit der Schaltfläche „Gehe zum Link“ können Sie tatsächlich ein Bild auswählen und es wird Sie direkt dorthin bringen, wo sich das Bild in Ihrem Dokument befindet, und wählen Sie es für Sie aus. Wirklich hilfreich, wenn Sie Tonnen von Bildern haben, und Sie versuchen, auszutauschen sagen, eines von ihnen und Sie wollen nur finden, wo es wirklich schnell ist. Das ist wirklich der Kern, wie Bilder in Illustrator funktionieren und wie Sie sie zu Ihrem Dokument hinzufügen können, um die Dinge ein wenig persönlicher zu machen. Also, jetzt, da wir irgendwie diese Bilder da drin haben, lasst uns schnell den Rest dieses Website-Designs herausgreifen und ich werde euch zeigen, wie ich Dinge mache, während ich mitmache. Also, unser Schlagzeilenbereich ist ziemlich eingestellt. Wir haben eine schöne große Schlagzeile, Art Subtyp, und im Allgemeinen werden Sie einige Erklärung Zeug da oben haben, wann immer, Call to Action, coole Grafiken, einen kleinen Testimonial Bereich bekommen. Ich werde voran gehen und eine kleine Regel erstellen, um dies im Grunde vom Rest abzuschneiden. Anstatt weiß zu sein, möchte ich, dass diese Art von unserer schlauen Farbe wahrscheinlich machen. Nein, viel zu dunkel. Lassen Sie uns das wirklich hellgrau machen. Fertig. Das sieht toll aus. Also, ich mag diese Boxen wirklich, also werde ich diese Boxen wieder für vielleicht einen kleinen Bereich hier unten verwenden , der ein paar sagen, Ihre Funktionen meiner App, die ich baue, ruft. Ich wollte diesen Typ wieder verwenden, weil es nur Lorem ipsum ist. Kann im Grunde, mal sehen, das ausbreiten, so dass es in zwei Punkten geht. Wir können unsere Guides wieder einschalten, damit wir wissen, wie das geht. Gehen wir weiter und machen das. Fügen Sie hier einige Zeilen hinzu. Ich werde sagen, dass dies ein Merkmal irgendeiner Art ist. Nun sagen wir, ich möchte, dass es einige der anderen Typen, die um mein Dokument herum sind, nachahmt. Was ich mit Pipettenwerkzeug tun kann, ist im Grunde gehen und einen anderen Satz von Typ finden und indem ich darauf klicke, kann ich diesen Typ vollständig nachahmen. So können Sie sehen, dass es alles von der Schriftart über den Abstand bis zur Ausrichtung kopiert. Also werde ich voran gehen und das wieder ändern, um es ein wenig Ausrichtung zu geben. Jetzt ist das hier, aber diese Dinge sind ziemlich weit für meinen Geschmack verteilt, also werde ich das nehmen, ich werde es löschen, und ich werde eine Absatzfunktion verwenden. sicher, dass ihr diese Sorte habt. Also, dies ist das Leerzeichen nach Absätzen und dies ermöglicht es Ihnen, im Grunde eine Menge an Speicherplatz einzugeben , die Sie nach nur einer bestimmten Zeile oder einer Textmenge, die Sie ausgewählt haben, kommen möchten . Ich benutze das viel für diese genaue Sache, das heißt, du nimmst einen Titel, du willst ein wenig mehr Platz hinzufügen, du willst deinen großen Titel nicht, und all deine kleine Körperkopie einfach direkt nebeneinander sitzen. Also, im Grunde können wir das benutzen. Wir können auch andere coole Dinge tun, wie das Greifen und kommen, vielleicht seine Farbe ändern, so dass alle diese Funktionen mit Blau aufgerufen werden. Vielleicht wollen wir das ein bisschen enger ziehen, damit es passt und dann diese Dinge horizontal zentrieren, nur damit wir diesen flippigen Raum hier unten nicht haben. Wir können das hier oben mit unserer Ausrichtung tun. Verwenden Sie die horizontal ausgerichtet vertikal und dann wissen wir, dass alles richtig schön nebeneinander sitzt. Nun, wenn ich das sagen wollte, dass Sie vielleicht einen zweiten Satz von diesen erstellen möchten, können wir diesen Drag & Shift verwenden, um alle erlauben, die Optionstaste gedrückt zu halten, um im Grunde einen weiteren Satz von diesen zu erstellen, der genau die gleichen Leerzeichen ein wenig in der Nähe ist. Also, ich werde das hier unten ein bisschen fallen lassen. Alle guten Websites haben eine Fußzeile. Also, ich werde das vielleicht bezeichnen. Lassen Sie uns ein wenig schaffen. Lassen Sie uns eine diese ein fitterer Bereich erstellen. Schnappen Sie sich das mit dem Abstand so ziemlich wie das, was oben ist, also ziehen Sie das vielleicht nach unten. Ehrfürchtig. Das funktioniert ziemlich gut. Ich werde hier mit meinem Typ kommen, und lassen Sie uns gehen und geben Sie es einfach ein schönes, mal sehen, Copyright 2014, Ryan Clark, Alle Rechte vorbehalten. Kopieren Sie keine Dinge. Gehen wir weiter und benutzen diesen Typ hier drüben, um den Tippfehler weiß zu machen. Also, Farbwähler. Jetzt brauchen wir ein Urheberrecht. Alle Urheberrechte benötigen ein echtes Copyright-Symbol. Also, ich zeige euch Jungs, wie ihr Zugang zu den Glyphen eures Typs bekommen könnt. Grundsätzlich willst du hier rauf zu einem Fenster gehen. Ich möchte hier nach unten tippen, Ihre Glyphen öffnen, und das öffnet Ihr Glyphenfeld. Dies zeigt Ihnen im Grunde alle Zeichen Ihrer gesamten Schriftart, so dass Sie durchgraben können, es sei denn, Sie kennen die Verknüpfungen und finden genau das, was Sie wollen. Also, was willst du? Urheberrecht. Doppelklicken Sie so, wie es sich direkt in Ihrem Typ befindet. Super nett. Lass uns einfach weitermachen und das schließen. Urheberrechte müssen nicht 24 Punkt hoch sein, also können wir voran gehen und diese 11 machen. Es wird sich hier in unserem Fußzeilenbereich entspannen. Schön, zentriert. Also, das geht nur auf super einfache Website Skelett. Wenn ich fortfahren würde, diese eine Stunde weiter zu bewegen, wahrscheinlich werfen Sie wie einige Beispiele für vielleicht diese Leute Websites oder eine kontextuelle, andere Art von Bildern, um dort wieder hinzuzufügen, eine Sache, die ich Ihnen zeigen kann, wie wenn Sie vielleicht machen diese Pop off aus dem Hintergrund ein wenig, Sie könnten gehen und fügen Sie nur eine wirklich schöne kleine weiße Grenze, vielleicht geben Sie ein wenig zusätzliche Größe, so dass es abhebt ein wenig. Du kannst wieder reingehen, und ich hole diesen Kerl. Sie können auch die Pipette verwenden, um Formstile zu kopieren, die einfach super, super hilfreich sind. Also, ich werde die packen und ihnen die gleiche Grenze geben. Also, jetzt knallen diese Typen diese Hintergrundformen ein wenig ab , damit sie nicht so oben drauf sind. Also, wie gesagt, das ist nur ein wirklich, wirklich allgemeines Site-Skelett. Ich werde das tatsächlich in die Datei für die Klasse aufnehmen , nur damit Sie es haben und es verwenden können und damit umgehen, wenn Sie wollen. Das ist besser. Niemand mag sowieso super helle Filter. Also, hoffentlich, habt ihr diesen Kurs genossen, ein paar Dinge daraus gemacht. Hoffentlich habe ich nichts zu schlecht überholt, aber das sind wirklich die Werkzeuge, die ich jeden Tag benutze um Websites für Ferb und für andere Leute, für meine Kunden zu erstellen. Ich denke, Illustrator ist ein absolut fantastisches Tool für Web-Design, das nur auf der Art und Weise basiert, dass es sich um Formen und mit Typ handelt, die wirklich der Kern jeder Website sind. Hoffentlich werden wir diese Klasse in Zukunft entwickeln, um einige erweiterte Funktionen hinzuzufügen und einige noch kühlere Dinge zu durchlaufen, die Illustrator tut. Aber das ist nur ein wirklich großartiger Ausgangspunkt. Also, arbeiten Sie weiter. Schmeißt mir alle Fragen, die ihr habt. Ich bin immer da. Ich bin auf Twitter bei ryanvsclark. Ich kann es kaum erwarten zu sehen, was euch einfällt, was eure Projekte für die Klasse sind , und danke, dass ihr mitverfolgt. Tschüss, Jungs. 6. Entdecke Design auf Skillshare: Art und Weise.