Grundlagen des Webdesigns in Illustrator | Dawid Tuminski | Skillshare

Playback-Geschwindigkeit


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

Grundlagen des Webdesigns in Illustrator

teacher avatar Dawid Tuminski

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

20 Einheiten (1 Std. 22 Min.)
    • 1. Webdesign in Illustrator :Willkommen in dem Kurs

      2:01
    • 2. Mein Web

      5:46
    • 3. Prinzipien des guten Webdesigns

      3:28
    • 4. 5 wichtigsten web

      3:48
    • 5. Erstellen eines webdesign

      3:28
    • 6. Erstellen von benutzerdefinierten Verknüpfungen

      3:09
    • 7. Erstellen eines neuen web

      3:47
    • 8. Responsive web

      5:19
    • 9. Erstellen einer responsiven template

      5:32
    • 10. Artefakte und Ebenen neu anordnen

      4:26
    • 11. Was ist Bbootstrap?

      1:51
    • 12. Responsives desktop

      3:55
    • 13. Responsive mobile Netze

      4:15
    • 14. Was ist ein Drahtgitter?

      3:28
    • 15. Wireframe Farbe und Bilder

      7:21
    • 16. Typografie und flexible Buttons

      6:56
    • 17. 2 Möglichkeiten der Verwendung von wireframe

      2:51
    • 18. Das Design an einen Kunden übergeben

      3:19
    • 19. Exportieren in Photoshop

      6:00
    • 20. Lassen Sie uns zusammenfassen, was wir gelernt haben

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

892

Teilnehmer:innen

5

Projekte

Über diesen Kurs

Dies ist ein toller Kurs. Es ist gut strukturiert und zeigt einen der besten Workflows, die ein Designer folgen sollte.

Sehr klar und gründlich, eine großartige Erklärung, die gesunde Arbeitsabläufe in Zukunft schaffen wird. Vielen Dank für die tolle Klasse Dawid, und freuen sich auf mehr!

Bist du ein web

Hast du Webseiten schon eine Weile gestaltet, aber nie in Illustrator?

Oder vielleicht hast du Illustrator schon seit einiger Zeit benutzt, aber nie gedacht, du könntest es für das Webdesign verwenden?

Verschwenden Sie die Zeit auf die Frage und die Raten.

Dank dieses Kurses erhältst du alle Kenntnisse, die du brauchst, anfangen erstaunliche Websites unabhängig zu gestalten.

Im Inneren findest du einzigartige Informationen auf:

  • So wandeln Sie Illustrator in ein Superwerkzeug für das Webdesign
  • So erstellen Sie einfach einen Drahtrahmen und eine Website – schnell!
  • So beherrschen Sie den Desktop, das Tablet und das smartphone – alles in einer Datei dank der Illustrator Grafikkarten
  • So machen Sie dein Design schneller und professioneller mit einem benutzerdefinierten Bootstrap wie 12-Spalten-Raster

Was du bekommst, ist ein exklusiver Anlass zum Entwerfen wunderbarer Websites, für die du Tausende von Dollar aufladen kannst.

Und ja, das kannst du mit Adobe Illustrator machen.

Also klicke auf die Schaltfläche Registrieren und nimm deinen ersten Schritt zur Erstellung sensationeller Webdesigns in Illustrator.

Bis drin.

Dawid

PS Wenn dir der Kurs gefällt, sende bitte dein Review und dein Kursprojekt ein. Es wird anderen Schülern helfen, genau wie du an dem Thema interessiert bist, das ich unterrichte, in der Suche nach meinen Kursen. Danke!

Triff deine:n Kursleiter:in

Teacher Profile Image

Dawid Tuminski

Kursleiter:in

Designer, coder and educational entrepreneur.
Adobe Certified Expert in Illustrator whose courses were listed in the Udemy's TOP 10 best reviewed courses.

Creating online courses on design tools like Adobe Illustrator and Adobe Photoshop, logo design, web design, graphic design freelancing, online teaching and digital marketing .

Teaching +30k students in 160 countries worldwide.

Loves the freedom of creating courses and prides in his teaching method, which is straight to the point and with a smile.

His motto: Boring instructors are worse than boring topics!

His students value his courses for their conciseness, professionalism and actionable tips and techniques they can apply in their day-to-day design tasks and online education businesses.

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. Webdesign in Illustrator :Willkommen in dem Kurs: Hallo und herzlich willkommen zum Kurs. Mein Name ist David für Musik, und in diesem Kurs möchte ich Ihnen die Grundlagen der Gestaltung von schönen und professionellen Websites mit Adobe Illustrator zeigen . Nun, dieser Kurs ist für alle neuen Designer, die verstehen wollen, wie Illustrator kann sie erstaunliche Websites entwerfen lassen , aber auch für diejenigen, die entweder neu im Konzept des Illustrators, ein Web-Design-Tool zu sein , oder diejenigen, die einen Übergang von der Print- zur digitalen Welt machen. Aber bevor wir in den Kurs eintauchen, lassen Sie uns schnell sehen, was tatsächlich darin ist. Wir werden mit meinem Webdesign-Workflow in seiner Messe beginnen, und ich möchte Ihnen meinen Prozess zeigen, eine Website zu erstellen, wo der eigentliche Designprozess kommt . Am Ende werden sie einen Blick auf die Prinzipien des guten Designs und zeitgenössischen Webtrends werfen. Danach ist es Zeit für die Einrichtung von Illustrator für einen Webdesignauftrag erstellt den richtigen Arbeitsbereich und erstellte Dokumente, die für das Webdesign geeignet sind. Wir werden auch Responsive Web-Design-Prinzipien entdecken, und basierend auf dieser Rechnung, sie sind responsive Vorlage. Sie lernen, wie Sie schnell und mühelos ein 12-Spalten-Bootstrap-Raster in Illustrator simulieren und es dann als Vorlage speichern. Wir werden sehen, wie eine Website Draht Friend Illustrator einrichten wird lernen, was ein Drahtrahmen ist. Warum es eine gute Praxis ist, es zu verwenden und wie man es endlich einrichtet, wird unser Design für einen Kunden geeignet machen , um eine Vorschau zu erstellen und diesen Entwickler die Website zu entwickeln. Aber das ist eigentlich nicht alles in den kommenden Bonusvorträgen. Wir werden einige tolle Tipps, wie Sie den richtigen Fonds für Ihr Projekt zu wählen und wie effektiv eine Nachrichtenschriftart erstellen und Zeichenstile werden das gleiche mit Bildern und Halsbänder für Web-Design tun . Jobs am Ende des Kurses werden über alle Werkzeuge und Kenntnisse verfügen, um fantastische Websites in Adobe Illustrator zu entwerfen . 2. Mein Web: in diesem Abschnitt werden wir einen Blick auf eine typische Web-Design-Arbeit Float später werfen, es wird uns mit Waffen und Prinzipien vertraut machen und die wichtigsten Trends entdecken, die beim Entwerfen einer Website zu wissen sind. Beginnen wir also mit dem Webdesign. Workflow würde Details aus dem Prozess von der Inspiration bis zum endgültigen Design sehen . Beginnen wir unser Abenteuer mit Webdesign und Illustrator, indem wir meinen Webdesign-Workflow erkunden . Es ist nicht so, dass ich prahlen möchte, aber im Laufe der Jahre entwickelt ein Arbeitsmuster, das es mir ermöglicht, viel schneller zu entwerfen und kohärentere Websites zu produzieren. es nur darum, die richtigen Werkzeuge mit geschlossenen Augen zu verwenden? Aber es geht mehr um ein Arbeitsmuster, also lassen Sie uns diese Schritte im Detail sehen. Die erste kommt Inspiration. Es ist nie eine schlechte Sache, sich anzusehen, was andere Designer bereits getan haben. Es dient zwei Hauptzwecken. Es ermöglicht Ihnen, sich der Trends bewusst zu sein, und es ermöglicht Ihnen auch, direkt von der Fledermaus zu sehen, was für Ihr Projekt funktionieren würde und was nicht. Und in diesem Tag und Zeitalter ist es unmöglich, nicht nach Web-Design, Inspiration gut online zu suchen . Es gibt eine Menge großartiger Websites mit fantastischen Designs, um sich inspirieren zu lassen. Mein typischer Arbeitsablauf. Ich habe sozusagen zwei Hauptquellen verwendet. Die 1. 1 ist Thema Wald. Hier finden Sie Tonnen und Tonnen von fantastischen WordPress-Themes im Alter von finden, gut , Vorlagen, etc. Ich in der Regel für WordPress-Themes gehen, aber vor allem, weil die Wahl der Dinge hier ist humongous, und ich habe alles, was ich brauchte. An einem Ort. Die andere Seite, an die ich mich gewandt habe,ist habe, Google. Es ist so einfach, einfach Web-Design-Trends einzugeben und Tonnen von Artikeln zu bekommen, Boote zu blockieren und alle neuesten und größten Webdesign zu sammeln. Nachdem die Inspiration kommt, dass Dokument eingerichtet, Ich arbeite in der Regel mit einem hübschen Find Vorlage oder Profil, und Sie werden lernen, wie man eine zu begrüßen später im Kurs. Was großartig ist, ein Projekt für von Ihrer eigenen benutzerdefinierten Vorlage zu starten, ist, dass Sie nicht nur die Art Boards und Führungen für Sie bereit, sondern auch die Ebenen und Einstellung der Ebenen Sorten wichtig in einem reibungslosen Web-Design Arbeit Float. Wir werden über die Ebenen sprechen, die im Responsive Webdesign Abschnitt des Kurses eingerichtet wenn das Dokument eingerichtet ist. Es ist Zeit, einen Website-Blueprint zu erstellen. Ein Drahtrahmen Illustrator ermöglicht es Ihnen, Markup-Elemente mit Leichtigkeit zu erstellen. Und in einem typischen Webdesign-Workflow ist dies ein großer Vorteil. Wird einen ganzen Abschnitt über Drahtrahmen in einem Illustrator haben, Übrigens, und nachdem der Drahtrahmen fertig ist, ist es Zeit für einige Schriftart und Farbinspiration, natürlich, wenn die Arbeit an einem Projekt würde wahrscheinlich mit einigen Kunden zu tun haben. Erwartungen in Bezug auf die Farben oder vielleicht die Mittel sogar. Aber es gibt einige allgemeine Regeln in Bezug auf die Verwendung von Farben und Frankreich und Web-Design. Nun, vor allem ist es eine gute Idee, Google Fonts Senior Project zu verwenden. Sie sind gut, kostenlos und einfach vom Entwickler zu implementieren. Natürlich müssen Sie sich nicht auf Google-Fonds beschränken. Zum Beispiel müsste man auch Eichhörnchen finden und dort auch Geld suchen. Sie bekamen einige tolle Mittel zur Auswahl, und ein Entwickler konnte leicht ein Webfondskind generieren. Aber wenn Sie Google-Fonds nutzen möchten, aber nicht in der Schriftauswahl ertrinken, gibt es großartige Tools im Web, mit denen Sie überprüfen können, wie bestimmte Mittel in Kombination mit anderen aussehen . Und was die Farben betrifft, sind Sie wahrscheinlich bewusst, die flachen Design Kinder bewerten im Web zur Verfügung. Aber wenn Sie diese Farbschemata nicht verwenden möchten, ist es eine gute Idee zu sehen, wie andere Websites bestimmte Farbkombinationen verwenden. Und der Regel versuchen Sie, den Benutzer nicht mit zu vielen Halsbändern zu überwältigen, versuchen Sie, sie harmonisch zu halten und den größten Kontrast für Hover und aktive Zustände von Menüelementen oder Schaltflächen zu lassen . Jetzt die richtige Verwendung von Fotos entscheidend für das zeitgenössische Webdesign. Viele Designs machen groß, mutig folgt den wichtigsten Teilen der Website. Und in einem typischen Waffen und Szenario, würden Sie entweder die Fotos von Ihrem Kunden geliefert haben oder Sie müssten sie selbst bekommen . Im zweiten Fall besteht eine Möglichkeit, für bezahlte Aktienfotos von kommerziellen Dienstleistungen zu gehen. Der andere Weg ist für kostenlose Stock Fotos gehen, und Sie können eine Tonne off Websites, die hohe Qualität bieten, stecken für Stunden kostenlos, und diejenigen, die ich besonders mag und nützlich finden, sind kostenlos wählen dot com und Pixel dot com. Nach all den Vorbereitungen. Endlich ist es an der Zeit, mit dem Design zu beginnen. Das Basiskonzept ist fertig in unserem Kopf. Wir haben die Schriftarten und Farben, die wir mögen. Wir haben den Drahtrahmen eingerichtet, also ist es jetzt an der Zeit, den eigentlichen Designprozess zu starten. Und wenn das Design fertig ist, zumindest die erste Version davon, ist es Zeit, es dem Kunden zu übergeben. Es wäre extrem ungewöhnlich, wenn Sie Phrasen sind und sofort akzeptiert werden. Machen Sie sich bereit für manchmal seltsame und fast immer zahlreiche Anpassungen. Aber wenn das Design schließlich vom Kunden akzeptiert wird, ist es bereit, entwickelt zu werden, wie Sie einräumen, ein ziemlich langer Prozess. Es erfordert ein gewisses Maß an Fähigkeiten und Wissen, aber es ist eigentlich eine gute Sache. Es bedeutet einfach, dass Sie mehr für Ihre Arbeit aufladen können, weil Sie nicht nur für das Design drin sind , richtig. Du willst auch dafür bezahlt werden, oder? Das dachte ich auch. Jetzt im nächsten Video, Videos werden tatsächlich einen Blick auf die Prinzipien des guten Designs und zeitgenössischen Web-Design-Trends werfen , so halten 3. Prinzipien des guten Webdesigns: Sag mir etwas, wenn du eine bestimmte Sache kaufen willst. Was ist der wichtigste Faktor, der Sie tatsächlich dazu bringt, es für mich zu kaufen? Das ist der Vorteil, den ich nach dem Kauf bekommen werde. Mit anderen Worten, was ist für mich drin? Denken Sie darüber nach, wenn der Benutzer sich ein Seitenlayout ansieht und er das Gefühl hat, dass er tatsächlich bekommt, wofür er hierher gekommen ist. Es spielt keine Rolle, ob er einige Kontaktinformationen bekommen will, wirklich Post blockieren oder etwas kaufen will, denn alles hängt davon ab, was die Seite vermitteln will Er muss immer die Fähigkeit haben, es schnell zu tun, ohne zu viel darüber nachzudenken. . Nun, das bringt uns zu der wichtigsten Regel im Webdesign heute. Benutzerfreundlichkeit durch Einfachheit. Es ist eine Implementierung von mehr als 50 Jahre alten Kuss Regel, die für halten Sie es einfach, dumm oder halten Sie es kurz und einfach. Kurz gesagt, eine gut gestaltete Website sollte nicht klappern, mit unnötigen Elementen überladen werden, und es sollte direkt auf den Punkt kommen. Was auch immer der Punkt ist. Dies gilt auch für die Halsbänder und gefundenen Stile. Wenn Sie eine Website entwerfen, müssen Sie daran denken, ein kohärentes Farbschema auf der ganzen Seite zu halten. Es geht nicht nur darum, harmonische Farben auf jeder Seite zu halten, was natürlichwichtig ist, wichtig ist, Aber es geht auch darum, vorsichtig zu sein, Farben zu verwenden, die für die Art des Projekts geeignet sind, an dem Sie arbeiten. Zum Beispiel wäre es extrem nicht in Ordnung, eine Anwaltskanzlei-Website in lebendigen rosa und gelb getönten grauen Blues zu entwerfen . Dass vielleicht Schattierungen von Gold viel angemessener wären. Aber wenn Sie eine Kindergarten-Website als Puppenmischung zu entwerfen, Farben würden nicht zeigen, die Fonds Kindergarten-Erfahrung auch, Und das gleiche gilt für Teiche. Sie sollten auch auf der gesamten Website und auf einzelnen Seiten konsistent sein. Die Kopfzeilen sollten die gleiche Schriftart verwenden und die Größe allmählich verringern. Die Textkopie sollte auf jeder Seite dieselbe Vorderseite verwenden, usw. Heutzutage die lustige Auswahl von Designern riesig. Früher war es nur aus der Luft. Verdana mal, New Roman und dergleichen. Wenn heute das Google Fonts Repository hat mehr als 700 Fonds allein. Schauen Sie zu meiner Wahl ist nicht immer eine gute Sache, aber zum Glück gibt es Größe, die Ihnen helfen kann, den richtigen Fonds zu wählen, und wir zeigen Ihnen, welche Mittel gut zusammen passen. Außerdem verweise ich nochmals auf die Anwaltskanzlei. Kindergarten-Analogie. Funky, spielerisch aussehende Front wird wahrscheinlich nicht schön in der Anwaltskanzlei-Website aussehen, aber es wird eine gute Wahl für die Tötung sein. Kindergarten Site-Bilder spielen eine wichtige Rolle in der zeitgenössischen Web-Design, so ist es wichtig, Daumen zu wählen Nun, ich meine, denken Sie daran, sie angemessen zu halten nicht nur den Charakter der Website, sondern auch das Gleichgewicht mit das Farbschema Ihrer Wahl. Außerdem, wenn die Stimmung der Website erhebend und lebendig ist, versuchen Sie, Bilder zu verwenden, die genau das widerspiegeln würden. Auf der anderen Seite, wenn beschlossen, Professionalität und Ernsthaftigkeit zu vermitteln, finden Sie die Nachrichten Bilder, die genau das betonen würde. Aber bitte vermeiden Sie käsige feststeckende Fotos. Sie fallen aus dem guten Design, einer Kategorieperiode. Im nächsten Video wir einen Blick auf fünf wichtigsten Webdesign-Trends im Jahr 2015, also schauen Sie 4. 5 wichtigsten web: Lassen Sie uns jetzt ein paar Minuten damit verbringen, die fünf wichtigsten Trends zu überprüfen, die Sie wissen sollten, wenn Sie die Website entwerfen. Laut dem aktuellen TechCrunch-Bericht werden bis Ende 2020 80% des mobilen Datenverkehrs von Smartphone-Nutzern generiert. Im Moment meldet sich jeder dritte Besucher von einem mobilen Gerät auf einer Website an, und wenn eine Website kein komfortables mobiles Erlebnis bietet, verliert sie ihre Besucher. Und das tut weh, dass die Konversionsraten. Legen Sie einfach einen Designer, ob er oder sie es mag oder nicht. Bei der Gestaltung des Layouts muss über die mobile Erfahrung denken, dass er mit dem Design erstellt , müssen Sie beantworten. Die Fragen wie wäre sichtbar genug auf einem Smartphone mit Scroll leicht werden leicht darauf tippen, usw cetera. Der beste Weg, um den Fokus auf einen bestimmten Aspekt der Website zu bringen, besteht darin, den Benutzer nicht davon abzulenken . Es ist nicht nur auf eine synthetische Form der weniger ist mehr Regel. Es ist auch eine Usability-Sache. Die raffiniertere einfache Entscheidung ist der Mawr. Es ist einfacher, vom Benutzer zu empfangen. Einfach gesagt, die letzten Ablenkungen. Je mehr Informationen von der Seite vermittelt werden könnten, weil der Benutzer weiß, worauf er sich konzentrieren . Er oder sie ist nicht verwirrt durch das, was ich sagen will oder von ihm erwarten will. Wahrscheinlich haben Sie diesen Trend bemerkt. Es ist schon eine Weile da, und anscheinend geht es nicht weg. Denken gebacken bedeutet, große, sogar sehr große Topographie zu verwenden , ist das erste, was der Benutzer auf der Seite sieht. Legen Sie es vor großen Hintergrund, strecken Sie es über den Bildschirm und beenden Sie den gesamten Effekt. Der mutige Aufruf zum Handeln Dieser Trend war so prominent, dass es eigentlich seltsam ist, nicht zu sehen, dass eine Website es benutzt. Aber Sie können Designs finden, die versuchen, dieser Regel zu folgen und sie ein wenig ändern. Und ich spreche über die Verwendung von fett Linie. Eine große Typografie ist der Schwerpunkt des Designs, aber es wird nicht mit Hintergrundfoto voll gebracht. Stattdessen erklärt der Hintergrund, dass der Benutzer nicht von der Hauptnachricht ablenkt. Dieser ist seit rund drei Jahren bei uns und hat sich zum wichtigsten und weit verbreitetsten Trend in der Designwelt im Allgemeinen entwickelt, nicht nur Webdesign. Der Schlüsselaspekt des flachen Designs besteht darin, die Aufmerksamkeit des Benutzers auf die Einfachheit des Inhalts zu lenken. Wir sprachen über, aber in einer etwas anderen Form, als Android Lollipop auf den Markt kam. Das Materialdesign von Google, das sich aus dem flachen Design ergibt, ist auch in der mobilen APP-Entwicklungsbranche weit verbreitet geworden , was keine Überraschung ist. Es stellt sich heraus, dass Benutzer es vorziehen, über das Klicken auf die Scrabble-Website zu crawlen. Sie ist auch einfacher, auf einem mobilen Gerät durch zu navigieren. Scrawling fühlt sich natürlicher an und lässt Sie nicht darauf warten, dass der Inhalt geladen wird, nachdem auf den Link geklickt wurde. Websites, die im Einzelseitengeist aufgebaut sind, sind voll mit Hintergründen, großen Fotos und Typografie gefüllt , die Informationen in großen Blöcken präsentieren, die unbemerkt bleiben können. So gibt es diese Air fünf wichtigsten Trends zu wissen, wenn Sie eine Website im Jahr 2015 entwerfen . Mobile erste Einfachheit Sache, großes flaches Design und einseitige Design. Es gibt viele andere Trends, die sich als neu oder immer Traktion entwickeln, wie zusammengefaltete Menüs, Storytelling oder Rasterlayouts. Die Liste, die wir gerade durchgegangen sind, zeigt Ihnen die Trends, die die Designer wirken, die derzeit am meisten arbeiten , und im nächsten Video werden wir anfangen, Illustrator für eine Waffen auf Jobs einzurichten, so halten Sie zu beobachten 5. Erstellen eines webdesign: in diesem Abschnitt erfahren Sie, wie Sie Webdesign, Workspace in Illustrator, So erstellen Sie Ihre eigenen Verknüpfungen und So erstellen Sie ein Dokument für ein Webdesign-Projekt. Beginnen wir also damit, den Illustrator-Arbeitsbereich so anzupassen, dass er unseren Webdesign-Anforderungen entspricht . Bevor wir mit der Behandlung von Web-Design-Dokumenten, Profilen und Vorlagen beginnen. Es ist eine gute Idee, den Illustrator-Arbeitsbereich einzurichten, und hier gibt es kein Richtiges oder Falsches. Es liegt an dir. Welche Panels und Toast werden eingeschaltet sein. Es liegt an Ihnen, wie Sie sie auf Ihrem Bildschirm auslegen. Ich wollte Ihnen nur zeigen, wie Sie basierend auf dem, was ich verwende, einen Arbeitsbereich für Webdesign einrichten können . Aber natürlich, Arbeitsbereich gehört Ihnen und passen Sie es nach Ihren Wünschen an. Das erste, was Sie vielleicht bemerken möchten, ist, dass Illustrator Ihnen tatsächlich einen hübschen Arbeitsbereich namens Web bietet , und das ist Illustratoren Idee, was Sie beim Entwerfen des Layouts verwenden möchten. Die meisten Werkzeuge, die ich behalten werde, aber es gibt tatsächlich eine ganze Menge Dinge, die ich nie benutze, und einige Werkzeuge, die ich benutze, fehlen. Zuallererst. Ich glaube nicht, dass ich das Aktionsfeld brauche, also ziehe ich es heraus und schließe es. Dasselbe gilt für Variablen. Attribute. Attribute sind mehr oder mehr von einer Drucksache. Ich werde auch keine Bürsten verwenden. Okay, Okay, der Rest sieht gut aus. Es gibt ein paar Kassen, die ich zu meinem Arbeitsbereich hinzufügen werde. Zuallererst, aus dem Fenstermenü, werde ich wählen. Das Ausrichtungswerkzeug tritt in einem typischen Waffen auf Workflow auf. Es gibt eine Menge von Ausrichtung. Ich werde auch für den Pathfinder gehen. Man weiß nie, wann man es benutzen möchte, also ist es eine gute Idee, es handlich zu halten, und ich werde den Navigator aktiv machen. Navigator hilft wirklich viel, wenn Sie mehrere unserer Ports navigieren. Ich werde diese Kerle mit den anderen Werkzeugen zerquetschen. Normalerweise mache ich die richtigen Panels in einer Spalte, aber für Aufzeichnungszwecke werde ich sie in zwei Spalten halten und nur schnell hier kippen, Leute, wenn Sie nicht wissen, was sich hinter diesen Symbolen verbirgt, aber Sie tun, um zu erweitern so dass Sie mehr Platz zum Arbeiten haben, können Sie einfach an der Kante eines Panels ziehen, um die Namen von den Werkzeugen anzuzeigen. Jetzt, da wir alle Werkzeuge an Ort und Stelle haben. Es empfiehlt sich, einen neuen Arbeitsbereich im Arbeitsbereich-Umschalter zu speichern. Also lassen Sie uns einfach einen neuen Arbeitsbereich wählen. Und in diesem Feld geben wir den Namen des neuen Arbeitsbereichs ein, und es ist eine gute Idee Ticket mit einem beschreibenden Namen, nur wir wissen, was wir speichern. Also werde ich benennen, während Sie arbeiten Raum als mein Web-Design-Arbeitsbereich. Okay, und wenn Sie sich entscheiden, dass Sie ein anderes Werkzeug treffen, das dem Arbeitsbereich hinzugefügt wurde, wählen Sie es einfach aus dem Fenstermenü und doc, es würde mit den anderen Jungs docket, und aus irgendeinem Grund massieren Sie versehentlich Ihren Arbeitsbereich nach oben. Gehen Sie einfach zum Arbeitsbereich-Umschalter und wählen Sie Resets und was auch immer Ihr Arbeitsbereichsname ist. Also, jetzt, wo wir unseren Arbeitsbereich erstellt haben, können wir es einen Schritt weiter und erstellen oder benutzerdefinierte, Verknüpfungen sagte, und das ist, was wir im nächsten Video tun 6. Erstellen von benutzerdefinierten Verknüpfungen: Die Sache über benutzerdefinierte Verknüpfungen ist genau so, wo sie Arbeitsbereich kosten. Alles hängt von Ihrer persönlichen Vorliebe ab. Zeigen Sie nur, welche Verknüpfungen. Ich habe meinen typischen Webdesign-Workflow verwendet. Ich wette, dass abgerundete Rechtecke eine der Formen sein werden, die Sie viel erstellen werden. Illustrator stellt uns, wie Sie sehen können, wie Sie sehen können, keine Standardverknüpfung für das abgerundete Rechteck zur Verfügung. Also lasst uns das reparieren. Also lasst uns auf das hinzugefügte Menü. Wenn Sie auf einem Mac sind, gehen Sie einfach zum Illustrator-Handbuch in der oberen linken Ecke und wählen Sie Tastenkombinationen aus. Hier können wir benutzerdefinierte Verknüpfungen zu den Werkzeugen und manu Befehlen hinzufügen. Wir möchten eine Verknüpfung zum abgerundeten Rechteck hinzufügen. Also in das Suchfeld werde ich gerundet eingeben. Und für die Abkürzung, Ich werde in den Buchstaben N eingeben. Jetzt Illustrator wird mich warnen, dass dieser Fall bereits von der Bleistift-Werkzeug verwendet, aber da ich es nicht in meinen Waffen und Workflow, Ich werde einfach nicht darum kümmern Jetzt. Ich möchte benutzerdefinierte Kurzbefehle erstellen, aber für den Befehl „Transformieren“ ist dieser Befehl sehr nützlich beim Erstellen von Menüs. Erstellen Sie einfach ein Menüelement und dann dynamisch klonen und verschieben Sie es, um ein Menü zu erstellen. Also werde ich Menübefehle aus diesem kleinen Switcher wählen. Ich tippe und transformiere mich. Und es ist dieser Typ hier, dass ich eine benutzerdefinierte Abkürzung haben möchte. Und dieses Mal werde ich ein bisschen aufwendiger und Typ und Kontrolle Shift und Q auf makellos Befehl statt Kontrolle zu verwenden. Das ist eine Abkürzung. Ich kam vor langer Zeit rauf. Es wird nicht mit einer anderen Abkürzung in Illustrator, und es tut Ihren Finger nicht weh, es tatsächlich zu tippen. Jetzt ist alles, was noch zu tun ist, meine benutzerdefinierten Verknüpfungen zu speichern. Und ich werde es tun, indem ich auf dieses kleine Ich komme und sie werden es meine Web-Design-Shortcuts nennen . nun Wenn wirnuneinen Blick auf das abgerundete Rechteck-Werkzeug werfen, können Sie sehen, dass ihm eine benutzerdefinierte Verknüpfung zugewiesen ist und das im Effektverzerrungs- und Transformationsmenü. Sie können unser Casting kurz sehen, aber auch. Natürlich waren dies nur Beispiele dafür, wie Sie Ihre eigenen Werkzeuge und Manu Command Shortcuts erstellen können. Alles hängt von Ihrem Workflow ab. Welche Werkzeuge verwenden Sie am meisten, was Manu Befehle Sie am meisten verwenden. Also viel Spaß damit, und es ist eine gute Idee, einfach ab und zu pausieren und zu bemerken, welche Werkzeuge oder Befehle aktiv sind. Ich würde kaufen Sie aktivieren, indem Sie klicken, und wenn sie keine Standardverknüpfung haben, erstellen Sie einfach eine. Und jetzt sind wir wirklich bereit für die Erstellung unseres ersten Webdesign-Dokuments in Illustrator, Sind Sie begeistert? Ich hoffe, Sie sind es. Also lasst uns anfangen. 7. Erstellen eines neuen web: Nachdem wir unseren Arbeitsbereich und die Verknüpfungen eingerichtet haben, ist es höchste Zeit, ein neues Dokument für die Arbeitsgestaltung zu erstellen. Gehen wir also zum Dateimenü und wählen Sie Neu. Sie können auch Steuerelement und Verknüpfung verwenden, um ein neues Dokument zu erstellen. Und natürlich, natürlich, auf einem Mac würden Sie für den Befehl gehen und und in diesem Dialogfeld, zuerst, was zu tun ist, geben Sie den Namen des Projekts, natürlich, und Sie versuchen, Web-Profil aus dem Profil zu wählen Mischer. Aber die Artwork-Größen, die wir bekommen, sind tatsächlich verschiedene Bildschirmgrößen, und keiner von diesen vielleicht, außer 10 24 mal 7 68, die die iPad-Größe entspricht der Stander Website-Größe. Der Haupttrend ist heutzutage, Websites zu erstellen, die 1200 Pixel in mit sind. Das liegt daran, dass alle Mutter-Monitore mindestens 12 80 von 10 24 unterstützen. Pixelauflösung plus 1200 ist leicht teilbar, was es sehr flexibel macht. Wenn ich ein typisches Web-Design-Dokument erstelle, habe ich daran gedacht, dass die meisten Wichtigkeit mindestens 12 80 Pixel Auflösung unterstützen, aber ich denke auch an die größten, am häufigsten verwendeten Schreie da draußen und kaufen größte Ich meine die höchste Auflösung die 1920 mal 10 80 Pixel oder Full-HD ist, wenn Sie so wollen. Natürlich sprechen wir nicht über fünf K i Mags oder vier K Monitore assed. Sie sind noch nicht weit angepaßt. Aber natürlich, wenn wir auf die ansprechende temperierte Erstellung bekommen, wird sehen, wie wir unser Dokument für diese Bildschirmauflösungen als auch vorbereiten . Aber vorerst bleibe ich bei der guten alten Full-HD-Auflösung und stelle sicher, dass meine Maßeinheiten auf Pixel eingestellt sind. Und im erweiterten Stempel möchte ich für den RGB als Farbmodell gehen. RGB steht für rot, grün und blau und ist das Standard-Farbmodell in der digitalen Welt im Gegensatz zu ihm y que zu sehen , die Standard-Kragenmodell im Druck ist? Nein, im Raster-Effekt-Switcher können Sie von 72 Seiten wechseln. Ich warf 150 den ganzen Weg bis zu 300 Leute ich die meisten Fälle wird völlig irrelevant sein, wie alle Ihre Kunstwerke, wenn ein sichereres Web wird bei 72 pp gespeichert werden. die Raster-Effekte auf 300 Personen festlegen, können Sie Ihre Schlagschatten und Unschärfen sehen, als wären sie nicht höher aufgelöst, aber ich lebe es normalerweise als 72 pp. Ich Vorschau-Modus. Ich werde als Standard verlassen und ich werde mit der Option „Neue Objekte an Pixelraster ausrichten“ fortfahren. Diese hier, denke ich, ist die wichtigste Wahl, die beim Entwerfen von Illustrator zu treffen ist, was diese Option Tanz ist, es schnappt alle Objekte an Pixelraster, Beibehaltung aller Dimensionen und Strich mit von Bruch in Bruchteile von Pixeln. Es soll eine Pixelumgebung für Ihr Kunstwerk simulieren. Wenn Sie es deaktiviert lassen, wird in der Lage sein, Objekte mit beliebiger Größe zu erstellen, die Sie wollen. Ihre Unterteile könnten beispielsweise beispielsweise 156,5 89 Pixel breit sein. Aber ich mag es, diese Art von kreativer Freiheit zu haben. Wenn ich Ah du I Elemente erstelle, von denen ich weiß, dass ich für Web als P G oder J Banks oder als Gemüse speichern werde, die später in mein tatsächliches Layout-Design importiert werden. Aber wenn ich das Layout selbst erstellen möchte, halte ich diese Option aktiviert, und das werde ich auch in diesem Fall tun und alles, was noch zu tun ist, ist, okay zu schlagen und weiter zu arbeiten. Im nächsten Abschnitt werden wir also über responsive Webdesign sprechen, und wir werden eine responsive Vorlage einrichten, also beobachten. 8. Responsive web: in diesem Abschnitt wird über responsive Webdesign im Zusammenhang mit der Gestaltung einer Website in Adobe Illustrator sprechen. Natürlich werden wir einen Blick auf einige responsive Web-Design-Prinzipien werfen, aber in diesem Abschnitt aus dem Fokus auf die Erstellung einer responsive Vorlage, Ich und Ihr eigenes Raster. Also lasst uns an die Arbeit gehen. Vielleicht haben Sie den Begriff ansprechendes Web-Design einen Wurf gehört. Das ist es. Nun, das Webdesign und die Webentwicklung geht es nun schon seit rund fünf Jahren. Aber es könnte einige Verwirrung geben, vor allem in Bezug auf Design, was responsive Webdesign eigentlich ist. Lassen Sie mich also versuchen, ein paar Dinge zu klären. Zunächst einmal Responsive Webdesign nicht darum, eine Website für alle Geräte optimal aussehen zu lassen. Ja, es geht nicht um Geräte selbst, sondern um ein Boot-Erlebnis, das Sie von einer Website auf einem bestimmten Gerät erhalten. Wenn Sie also eine Website entwerfen, sollten Sie nicht daran denken, was sich der Inhalt auf einem iPhone- oder Galaxie-Tab verhalten wird, sondern wie er sich auf einem Desktop, einem Laptop, einem Tablet oder einem -Smartphone. Mit anderen Worten, Responsive Webdesign dreht sich alles um inhaltsgesteuerte Layout es ist der Inhalt, der diktiert und das Aussehen des Designs, und was es bedeutet, ist, dass eine, die auf ist, wenn das Gerät geändert wird. der Inhalt sollte sich ändern. Es sollte sich verschieben. Es sollte neu anordnen oder sogar weggehen. Vor dem Responsive Web Design hatten wir feste Layouts. Die Websites wurden mit Blick auf Desktop-Computer konzipiert und entwickelt. Und niemand hat erwartet, dass in ein paar Jahren jeder online gehen wird, schauen Sie in einem winzigen Bildschirm von ihren Smartphones und sogar mit all dem reaktionsfähigen Web-Design-Hype , immer noch viele Websites verwenden feste Layouts. Das, was ihr Content-Erlebnis schadet, ihren potenziellen Kundenstamm mindert und ihre Conversion-Raten schadet. Und der Übergang von einem festen Layout zu einem responsive Layout ist ein Prozess, der Zeit in Anspruch nimmt und offenbar mehr darum geht, die Art und Weise zu verändern, wie Menschen über das Internet denken. Dann sieht nur eine Veränderung in den Sehenswürdigkeiten aus. Die ersten Bemühungen, die Ebenen auf verschiedenen Bildschirmen besser aussehen zu lassen, kamen mit den adaptiven und flüssigen Layouts, die versuchten, Prozentsätze als Maßeinheit anstelle von Pixeln zu verwenden . Aber die Ergebnisse waren nur in der Größe des Unternehmens Elemente nicht in der Struktur selbst, und es war responsive Web-Design, die Neuorientierung, der Design- und Entwicklungsprozess in Richtung der Content-Bereitstellung und als eine ähnliche gesehen -Erfahrung über verschiedene Geräte hinweg. Und das Ergebnis ist ein völlig veränderter Weg, über das Zählen der Lieferung nachzudenken. Einige Elemente mögen auf meinem Desktop und Laptop großartig sein, aber in Smartphones müssen sie möglicherweise geändert oder sogar entfernt werden. Alles ist einer großartigen Benutzererfahrung gewidmet. Es gibt noch eine äußerst wichtige Sache zu beachten, wenn Responsive Ebenen mit der Fülle von für verschiedene Geräte da draußen zu entwerfen , Sie nicht kontrollieren, was Sie nicht können. Es wird so aussehen wie bei jedem von ihnen. Und dieser Mangel an Kontrolle kann besonders für Designer sein, die oft diese besondere Verbindung mit ihren Entwürfen spüren . Es kann beängstigend sein, aber leider ist es unvermeidlich. Jetzt, wenn Ihr Design endlich an einen Entwickler übergeben wird oder Sie beginnen, Ihr Design selbst mit dem HTML und CSS in Bewegung zu bringen , können sich die Dinge zumindest in einigen Geräten unerwartet verhalten , und das ist Völlig gut. In den meisten Fällen müssen Sie das tun. Es ist nur das Layout später im Prozess, vielleicht an etwas mehr Leerraum oder entfernen Sie es. Vielleicht musst du einige Elemente loswerden oder den Boden größer machen. Beim Entwerfen einer reaktionsfähigen Ebene geht es darum, manchmal aus Sicht des Designs schwierig zu machen. Entscheidungen. Also, wie illustriert die Passform in dieser Art von Szenario? Und wenn wir nicht kontrollieren können, wie das Layout irgendwann auf verschiedenen Geräten aussehen wird , dann können wir weder HTML noch CIA's als Illustrator schreiben. Wie können wir also zumindest das Aussehen der Website auf verschiedenen Geräten simulieren? Nun, die Antwort ist einfach. Die Arctic ports Seit Illustrator CS fünf, können wir verschiedene unsere Boote in einem Dokument erstellen, bedeutet dies, dass wir eine Desktop-Tablet und Smartphone-Erfahrung mit dann nur einer Datei entwerfen können , erstellen Sie einen Satz Elemente und mit richtigen Anpassungen, verwenden Sie Daumen auf allen unseren Boards, um reaktionsschnelle Ebenen zu erstellen. So einfach ist es. es Abschließend gehtes bei Responsive Webdesign darum, neu zu denken, wie der Inhalt der Website auf verschiedenen Geräten geliefert wird . Es geht nicht um die Bildschirmgröße. Auch der Mangel an Kontrolle über ein gesamtes Aussehen und Gefühl des Designs über mehrere Geräte kann tatsächlich eine positive Sache sein. Dadurch können Sie Ihr Design auf die wichtigsten Aspekte des Inhalts fokussieren. Und wenn Sie diese akzeptieren, wird Frank's nichts Sie davon abhalten, fantastische, reaktionsschnelle Webdesign-Layouts in Illustrator zu erstellen . 9. Erstellen einer responsiven template: wenn eine Geschichte, Alle Web-Design-Projekt. Es ist eine gute Idee, eine ziemlich gute Dokumentvorlage zu haben. Es spart viel Zeit, die Sie für den tatsächlichen Konstruktionsprozess aufwenden können. In diesem Video möchte ich Ihnen zeigen, wie ich in Illustrator eine ansprechende Webdesign-Vorlage erstellen kann. Wir beginnen damit, in Ihrem Dokument zu erstellen. Ich gehe einfach zum Dateimenü und wähle Neu aus. Das erste, was ich tun möchte, ist, wie immer, meine Datei zu nennen, und tatsächlich ist dies wirklich eine gute Übung, um in kreative Datei zu gelangen, sie zu benennen und dann zu speichern. Dieser Prozess sagt viel Zeit und ist eine große professionelle Angewohnheit. So finden wir die Erstellung einer ansprechenden Web-Design-Vorlage. Ich schätze, ich werde es nennen, was es ist oder was es wird. Letztendlich möchte ich ein Glaubensbekenntnis, unser Board simuliert ein Schreibtischerlebnis, ein Tablet-Erlebnis und ein Smartphone-Erlebnis. Der Vorlagenname wird also genau das widerspiegeln. Also werde ich ansprechende Dash Desktop Dash-Tablet, Dash-Smartphone, Dash-Vorlage eingeben Dash-Smartphone, . Ich weiß, es ist irgendwie lang, aber ich möchte, dass der Dateiname klar und beschreibend ist. Und was das Profil angeht. Webbys, natürlich, ein guter Ort, um zu starten, aber es schafft ein großes Problem in der Sidestep. Ich kann nicht finden, wonach ich eigentlich suche, und der Wert, den ich brauche, ist 1920 x 10 80, was wir bereits wissen, warum ich mit dieser Größe oder Auflösung beginnen möchte , wenn Sie so wollen, weil ich wie ein großer Schreibtisch -Erfahrung. Oder wenigstens möchte ich so schnell anfangen. Hören Sie nicht, dass ich Illustratoren benutze, CIA. Sechs. Wenn Sie sich auf einem C C befinden, haben Sie möglicherweise unterschiedliche Werte im Größenstempel. Also, wenn Sie 1920 von 10 80 auf haben, wollen Sie entlang folgen. Wählen Sie einfach, dass der Rest von uns wird nur in 1924 mit und 10 84 Höhe wie so, und beachten Sie, dass die Orientierung geändert automatisch Zehe Landschaft, weil die meisten Menschen halten ihre Desktop-Bergleute horizontal. Und da Sie drei verschiedene Arten von Erfahrungen simulieren wollen, brauchen wir drei sind keine Boards, an denen wir arbeiten können. In unserem Brett Stempel zählen also die Kunstbretter bis drei, ordnen sie nach Reihe an und räumen sie ganz deutlich aus. die Kunstbretter bis drei, Ich schätze, 100 Pixel werden in Ordnung sein. Aber wenn Sie den Raum und den Wert auf etwas anderes ändern möchten, gehen Sie weiter. Es ist wirklich eine Frage der persönlichen Vorliebe. Das Webprofil, das wir vorher gewählt haben, kümmert sich wirklich um alle anderen Parameter, die ich brauche. Einheiten sind auf Pixel festgelegt, was ich möchte. Offensichtlich ist Kragen Modell festgelegt Toe RGB Raster wirkt sich auf die 72 pp. Ich Vorschaumodus wird auf Standard gesetzt und ich möchte, dass neue Objekte am Pixelraster ausgerichtet werden. Alles, was noch zu tun ist, ist natürlich gut zu schlagen , und was wir jetzt haben, sind drei Kunstbretter. Es sind 1920 mal 10 80 Pixel und 100 Pixel voneinander entfernt. Perfekt, genau das wolltest du. Lassen Sie uns nun eine Ebene mit unserem Ziel im Auge nehmen, nämlich drei verschiedene Arten von Erfahrungen zu simulieren. Lasst uns ändern. Die Zeichen der Langeweile sind nicht gelangweilt, also entsprechen sie diesen Erfahrungen. Nehmen wir an, dass mein erstes Kunstboard der große Desktop sein wird, also werde ich es verlassen, wie es der nächste ist, den wir Tablet-Erfahrung. Also mit meinem hörbaren Tool, das Sie über das Tool-Panel oder über Präsident Shift Oh Combinator auf der Tastatur zugreifen können . Ich werde die zweite müde, gelangweilt und in der Bedieneinheit beantwortet 10 24 4 der Höhe und 7 68 für die Woche. Und das ist eigentlich das erste iPad und iPad Mini. Und viele würden argumentieren, dass ich Boote die echte Tablet-Erfahrung sind, also lassen Sie uns daran halten. Okay, als nächstes ist das Smartphone, und mit dem dritten unser Board ausgewählt, Ich werde 11 36 für die Höhe und 6 44 die eingeben, mit denen, übrigens, Theo iPhone fünf Auflösung ist. Und da ich noch meine hörbare Zehe aktiv habe, werde ich meine Kunstboards als Smartphone, Tablet und Desktop benennen , bevor wir weitermachen. Lassen Sie uns eine kurze Pause machen und verstehen, warum ich diese exakten Abmessungen für meine Kunstboards gewählt habe . Mit der Fülle von verschiedenen Geräten, die unterschiedliche Bildschirmgrößen und Auflösungen haben, ist es unmöglich, sie alle anzusprechen. Ich meine, es ist physisch möglich, aber es ist nicht das, worum es geht. Ich habe das Wort Erfahrung bereits ein paar Mal erwähnt, und dieses Wort ist der Schlüssel zum Verständnis von gutem, reaktionsschnellem Webdesign. Es geht nicht um die Pixel und Übrigens, wenn Sie tiefer in das Thema graben, werden Sie schließlich Kopfschmerzen von allen Auflösungen und Pixeldichten da draußen bekommen. Es geht darum, wie ein Benutzer mit den Website-Inhalten auf einem Desktop, aufdem Laptop, aufeinem Tablet und auf einem Smartphone interagiert dem Laptop, auf . Und in diesem Sinne wird die Bildschirmauflösung weniger wichtig. Aber es war immer noch ein paar Dinge zu tun. Responsive, Vorlage weise, und wir werden es im nächsten Video weiter bauen. 10. Artefakte und Ebenen neu anordnen: in diesem Video werden wir weiterhin eine ansprechende Vorlage erstellen, und wir werden mit der Neuanordnung unserer Kunstboards beginnen. Lassen Sie mich Ihnen zeigen, was ich meine. Wenn wir die Kunst abbricht Panel aus dem Panel-Menü hatten, können wir diese letzte Option wählen, die besagt, Neuanordnen unsere Bretter wieder, genau wie beim Erstellen eines neuen Dokuments. Schwächung. Stellen Sie den Raum in und ich werde es auf 100 Pixel setzen, und ich werde sicherstellen, dass nach Zeile angeordnet ausgewählt ist. Und wenn ich auf OK klicke, alles, was schön reicht, wenn Sie sie mobile erste Herangehensweise in Ihrem Design nehmen möchten . Einfach den Kopf über den echten Grat sind Vögel Option wieder und änderte die Neuanordnung links nach rechts Layout, die tatsächlich Ihr Smartphone Art Board als erstes Assange wird angezeigt. Aber da ich das nicht will, werde ich diese Änderung einfach rückgängig machen. Lassen Sie uns nun zum Ebenenbedienfeld gehen und hier werde ich drei Ebenen erstellen Es wird mit meinen Kunstboards übereinstimmen, also werde ich zuerst sicherstellen, dass der Desktop unser Board ausgewählt ist und ich werde eine Ebene namens Desktop mit dem Tablet Art Board ausgewählt, Ich werde eine Ebene namens Tablet-Zelle erstellen, nur ein Kult oder Option auf dem Mac. Klicken Sie auf das Symbol „Neue Ebene“, und nennen Sie es Tablet. Und natürlich das Gleiche für die Smartphone-Kunst an Bord. Also nur ausgewählt alt oder Option klicken Sie auf ihre neue Ebenen-Symbol und benannte die Layer Smartphone. Jetzt werde ich meine Schichten richtig anordnen und wir sind fast fertig. Aber bevor wir unsere Vorlage speichern, lassen Sie uns unsere Arbeit noch einfacher und besser organisieren. Ich denke, Sie könnten sagen, dass es einfacher wird, weil wir es besser organisieren werden. Was ich tun möchte, ist, dass ich separate Unterebenen für alle Hauptkomponenten einer typischen Website erstellen möchte, die normalerweise Header Abschnitt, Artikel und Fußzeile sind . Also die Desktop-Spieler ausgewählt Ich werde wieder Old Eruption, klicken Sie auf das Creed New Sub Layer. Ich komme und alle nennen es als Header. Jetzt, mit den Desktop-Playern ausgewählt, das ist sehr wichtig. Wir wollen leider eine für den Desktop-Player erstellen, nicht die Heather Sub Layer. Ich werde ändern oder Option klicken Sie auf neue Sub-Layer erstellen und Abschnitt eingeben. Ich werde das gleiche für den Artikel tun, und ich werde das auch für die Fußzeile tun. Jetzt werde ich alle diese Unterschichten neu anordnen. Ich werde sie alle auswählen und aus dem Pfundmenü wählen Sie Duplikat ausgewählt. Und wie Sie sehen können, erhalten wir alle Unterebenen kopiert und was wir jetzt tun können, ist, dass wir sie so auf die Tablet-Ebene verschieben können . Und mit all diesen Kopien zu Sabliere ausgewählt, werde ich sie noch einmal kopieren und auf die Smartphone-Ebene verschieben. Das wirklich alte, was jetzt noch zu tun ist, ist, den Kopieanhang zu entfernen. Aber ich denke, du willst mir zusehen, wie ich das mache. Also würde ich nur ein bisschen vorwärts gehen. Nun, wirklich, alles, was noch zu tun ist, ist unsere Datei als Vorlage zu speichern. Und dazu gehe ich zum Dateimenü und wähle Speichern als Vorlage aus. Und wie Sie sehen können, haben wir bereits den Namen der Vorlage hier drin, so dass wir nur sparen müssen. Und da gehen wir hin. Wir haben unsere Vorlage jetzt erstellt, jedes Mal, wenn wir es verwenden möchten, ist es so einfach, wie in das Dateimenü zu gehen und neue aus der Vorlage auszuwählen und wählen Sie einfach Ihre Vorlage im nächsten Video. Ich möchte etwas Besonderes mit unserer Vorlage machen. Ich möchte ein Bootstrap-Gitterlayout simulieren. Es ist völlig fakultativ. Es macht nur das Erstellen von Layouts viel einfacher. Also, wenn Sie interessiert sind, schauen Sie weiter zu. 11. Was ist Bbootstrap?: beim Erstellen von Webdesign-Projekten. Es ist eine gute Idee, eine Art Gittersystem zu verwenden. Es macht das Gestalten einfach einfacher und schneller. Das beliebteste von ihnen ist ihr 12-Säulenraster. Es wird von Bootstrap verwendet, das ist das am weitesten verbreitete Front- und Website-Entwicklungs-Framework gibt. Rund fünf Millionen Websites wurden mit Bootstrap erstellt. Ich möchte Ihnen zeigen, wie Sie die Bootstrap-Umgebung Inside Illustrator neu erstellen können. Mit anderen Worten, wir werden ein 12-Säulen-Raster erstellen, das auf dem Bootstrap-Gitter basiert. Aber bevor wir beginnen, müssen wir über einige Grundlagen lernen, die wir im Auge haben müssen, wenn es ein Bootstrap wie 12 Spaltenraster erstellt . Ich möchte mit dem Desktop-Gitter-Layout beginnen. Es wird einfacher für mich sein, es dir visuell zu erklären. Also wird mein Desktop-Layout 1200 Pixel breit sein, und das ist die Regel Nummer eins Regel Nummer zwei ist, dass unser 1200 Pixel-Layout 15 Pixel nach links und rechts haben wird , was letztendlich unsere Arbeit im Raum 11 70 machen wird Pixel breit. 15 Pixel ist ein Standard-Bootstrap-Wert für den linken und rechten Marty. Gemäß Regel Nummer drei werden wir 30 Pixel Abstand zwischen den Spalten in beiden gestochenen Raster hinzufügen. Jede Spalte hat einen 15 Pixel-Rand links und rechts, die Regel Nummer vier. Wir werden 12 Spalten verwenden, um Tablet- und Smartphone-Körnungen zu erstellen, und der Abstand zwischen den Spalten wird auch drei Pixel betragen. Aber offensichtlich, wegen des kleineren Geräts, werden Größenspalten schmaler sein. Und mit all diesen Prinzipien im Auge, fangen wir an, unser erstes Raster zu erstellen, und wir werden das im nächsten Video tun. 12. Responsives desktop: Ich habe meine bisher sichere Vorlage geöffnet, und das erste, was ich tun möchte, ist, meine zukünftigen Entwürfe tatsächlich mit zu markieren, wie wir bereits wissen, was das mit des Layouts sein soll. 1200 Pixel. Soldaten schaffen ein bescheidenes Rechteck gegeben Augen schwarz. Füllen Sie ohne Strich, und wir machen es 1200 Pixel breit, und das Herz ist wirklich bis zu Ihren Vorlieben. Ich werde es so groß machen wie die Kunst an Bord, das ist 10 80, aber Sie können es kleiner oder größer machen. Worauf es ankommt, ist das With Off und lass mich dir zeigen, warum. Also werde ich sicherstellen, dass mein Rechteck in der Mitte der Kunstplatte positioniert ist, also werde ich mich ausrichten. Es ist richtig und mit meinen Herrschern an. Wenn Sie keine Lineale besitzen, drücken Sie einfach die Steuerungstaste oder den Befehl Plus sind auf der Tastatur. Ich ziehe eine Führung heraus, so dass sie an der Position am linken Rand des Rechtecks ausgerichtet . Wenn Sie nicht sicher sind, ob es richtig ausgerichtet ist, können Sie immer und ich denke, es ist eine großartige Übung. Übrigens, klicken Sie auf das Rechteck, gehen Sie zur Systemsteuerung und kopieren Sie einfach den Acts-Wert , den Sie jetzt als X-Wert aus der ersten Anleitung basieren. Natürlich für diese Technik Zehenarbeit sicherstellen, müssen Sie für diese Technik Zehenarbeit sicherstellen,dass Ihre Führungen nicht gesperrt sind. Jetzt machen wir das Gleiche mit dem Fahrführer. Ich werde eine herausbringen, stellen Sie sicher, dass Verbündete richtig mit dem rechten Rand des Rechtecks. Und da gehen wir hin. Wir haben mit unserem Layout markiert, so dass wir dem Erfolg einen Schritt näher kommen. Ich bin mir sicher, dass Sie sich an unsere Regel Nummer zwei erinnern. Wir Toe fügen 15 Pixel hinzu. Polsterung oder der Rand hängt davon ab, wie Sie es nach links und rechts betrachten. Also wirklich, alles, was wir tun müssen, ist, unser Rechteck auszuwählen. Und in der Systemsteuerung, stellen Sie sicher, dass der Transformationsreferenzpunkt auf Mitte gesetzt ist, so dass wir jetzt einfach subtrahieren 30 Pixel von der mit unserer eines Rechtecks. Und wir subtrahieren 30 Pixel, weil ich das letzte Mal 15 plus 15 Uhr 30 überprüft habe. Okay, jetzt haben wir das wahre mit unserem Design oder 11 und 70 Pixel, 1170 Pixel. Alles, was noch zu tun ist, ist zu schleppen. Fügen Sie 12 Spalten mit 30 Pixel klopfen zwischen ihnen hinzu. Und um das zu tun, Ich hätte nur Teoh zum Objektmenü, Pfad wählen und in Raster aufteilen. Und hier drin will ich 12 Spalten mit 30 Pixel Ghadir haben, und ich werde einfach okay. Was wir am Ende mit ist eine schöne 12 Spalte, Bootstrap wie Grid und was ich typischerweise zu beenden, bis es nicht natürlich ist, mache ich es deutlich größer. Ich lasse die Deckkraft nach unten fallen und ich werde ihre Farbe ändern, vielleicht in so etwas. Wenn Sie es eine Ebene aufheben möchten, können Sie alle Rechtecke auswählen und zur Ansicht wechseln. Menü und Schuhe erstellen Hilfslinien aus dem Untermenü Guides. Jetzt haben wir unsere Rechtecke in zwei Hilfslinien umgewandelt, aber das ist wirklich völlig optional. Es hängt alles von Ihrer Präferenz ab, und da gehen wir. Wir haben ein schön aussehendes 12-Säulen-Raster für unseren Schreibtisch erstellt, das den Bootstrap Trid simuliert . In dem netten Video werden wir mit dem Raster für das Tablet und Smartphone fortfahren. Also, wenn Sie interessiert sind, schauen Sie weiter 13. Responsive mobile Netze: in diesem schönen wie versprochen, werden wir weiterhin ein ansprechendes 12-Spalten-Bootstrap wie Gitter erstellen, so dass das Tablet und der Prozess genau der gleiche sein wird, wie es mit dem Desktop war, die einzigen Unterschiede in der Größe der Referenz Rechteck, das, natürlich, da in der kleineren Kunst an Bord passen. Beginnen wir also mit der Erstellung des Rechtecks. Und ich wollte 768 Pixel breit sein, minus 30 Pixel insgesamt Ursache. Denken Sie daran, dass das marschierende Bootstrapped als Standard verwendet. Die Höhe wird etwa 1000 Pixel betragen. Eine Opposition geht in die Mitte der an Bord, nicht bringen die Führung heraus. Stellen Sie sicher, dass die Option „Einrastend“ aktiviert ist. Nun, machen Sie einfach die Position in der Führung ist viel einfacher. Okay, und jetzt teilen wir unser Rechteck in 12 Spalten mit einem 30 Pixel Ghadir. Also eine Waffe werde ich rüber zum Objekt-Menü gehen. Juden wandern und spalteten sich wieder in Raster. Wie bei dem Desktop, wollen es 12 Spalten und haben 30 Pixel Rinne wie so alles, was noch zu tun ist, ist die Höhe auf die Kapazität und die Farbe anzupassen, wenn Sie wollen, und dann gehen wir, Wir haben unsere Tablette Körnungen eingerichtet. Es ist wirklich so einfach, wenn man die richtige Technik kennt. Jetzt ist die Situation des Smartphones genau die gleiche. Alles, was wir hier tun müssen, ist ein Rechteck mit den richtigen Abmessungen an Gewehren zu erstellen und das Rechteck in Gruppe zu teilen . Aber weißt du was? Ich habe mich entschieden, dass ich es nicht tun werde. Ich meine, ich möchte, dass du es selbst machst. Du kennst die Werkzeuge. Du weißt, was zu tun ist. In der Tat ermutige ich Sie, Screenshots Ihrer kompletten Körnungen mit dem Rest der Studentengemeinschaft zu teilen . Sicher, Ihre Inhalte auf einem Smartphone würden höchstwahrscheinlich über alle 12 Spalten ausgeben. Aber viele kleinere Elemente, wie Buttons oder Kulturaktionen, werden mit Hilfe der 12 Spalte in der Klasse einfacher erstellt . Also ich wieder, Ich ermutige Sie sehr, eine aktive Rolle in diesem Gitterschaffen zu nehmen. Aber natürlich wäre ich nicht ich selbst, wenn ich dir das Extra nicht geben würde. Also wollte ich Ihnen zeigen, wie Sie diesen ziemlich mühsamen guten Schöpfungsprozess ein bisschen schneller machen und auf dem Weg eine neue Fähigkeit lernen können. Also statt ständig gehen, um diese Aufteilung in Gitter und Eingabe von 12 Spalten und 30 Pixel Gardere. Lassen Sie uns eine Aktion oder ein Makro begrüßen, wenn Sie so wollen. Jetzt werden Aktionen nicht so häufig in Illustrator verwendet. Sie sind im Fotoshop, aber in diesem Fall werden sie unser Leben wirklich erleichtern. Das erste, was wir tun müssen, ist, das Aktionsfeld aktiv zu machen, indem Sie das Fenster Menü und Aktionen gehen , ich werde eine neue Reihe von Aktionen erstellen. Ich nenne es meine Taten. Warum nicht? Und jetzt werde ich nur ein 1200 Pixel erstellen, waren weit gewickelt und gehen und tun es wirklich schnell. Und mit seiner ausgewählten, werde ich eine neue Aktion erstellen. Ich nenne es 12 Spalte Grid und drücke einfach Datensatz und Illustrator wird meine Schritte nicht aufzeichnen, also gehe ich zur Split in Grid Option. Geben Sie 12 für die concount und 34 die Rinne ein. Ich werde in Ordnung schlagen und ich werde aufhören, die Aufnahme zu beenden. Und jetzt jedes Mal auf einem erstellten 12-Säulen-Korn mit einer 30-Pixel-Rinne, werde ich einfach spielen und OK, und das ist, wie wir unsere Arbeit innerhalb Illustrator vereinfachen können. Also, das ist es für die 12 Spalte guten Erstellungsprozess und Illustrator. Ich hoffe, Sie genossen es und sind begierig, zum nächsten Abschnitt zu gehen, die über Drahtrahmen ist, so halten Sie beobachten. 14. Was ist ein Drahtgitter?: in der Sektionalrede darüber, warum ein Illustrator Rahmen. Ich möchte Ihnen zeigen, was ein Drahtrahmen ist und warum es ratsam ist zu verwenden. Es wird auch unsere eigene Drahtrahmen-Shape-Bibliothek bauen, die Sie in verschiedenen Web-Design-Jobs verwenden können Mit diesen zuerst, lasst uns verstehen, was ein Draht ist und der Unterschied zwischen Drahtrahmen und mehr Cops. Nun, der Markt ist fast, dass sie das Design beendet haben. Es enthält die Farben des Unternehmens. Es verwendet Bilder, ausgewählte Topographie , etc. Mit anderen Worten, es ist eine visuelle Darstellung des Kunden. Kurz. Dies hier ist das gleiche Design, aber Sie können direkt von der Fledermaus sehen, dass es viel vereinfacht ist. Die Farben sind verschwunden, die Bilder wurden durch Platzhalter ersetzt und alles sieht viel einfacher aus. Und das ist der Zweck eines Drahtrahmens. Es soll Ihnen einen allgemeinen Sinn für das Design geben. Nun, es gibt einige Grundprinzipien bei der Montage von Drahtrahmen, also schauen wir uns sie jetzt an. Meine Drahtrahmen Arm onal chromatisch. Ich möchte mich mit Farbe ablenken, also benutzte ich Grautöne, legte hellere Weiden auf dunklere Hintergründe oder umgekehrt. Für einen größeren Kontrast baute ich eine gewisse Abstufung. Dunkler bedeutet wichtiger und heller, gemischster. Weniger wichtig, natürlich können Sie Ihr eigenes Farbschema verwenden. Es muss keine Schattierungen von Grau verwendet werden oder was auch immer Sie denken, ist am besten Ihre Bedürfnisse und hilft Ihnen bei der Schaffung der besten Kontrast und Beziehung zwischen den U I I 'll Elemente. Nun ist die Grundidee hinter Wire-Frames, sich auf den Inhalt zu konzentrieren und zu zeigen, wie der Benutzer mit dem Inhalt interagieren wird. Wird zwischen den Tasten genügend Platz vorhanden sein? Wo sollen also die Bilder oder die Icons hingehen? Ist der bewirtschaftet groß genug? Ist es lesbar, etcetera? Es geht darum, einen Blueprint der Website oder der App zu erstellen, nicht das fertige Design. Verwenden Sie einfache Formen wie Kreise oder Quadrate, die die Bilder oder Symbole darstellen könnten. Auch auf dieser Bühne verwendete Platzhaltertext wie Lauren Ipsum oder einen anderen Platzhaltertext Ihrer Wahl, nur um ein Gefühl davon zu bekommen, wie die Absätze aussehen werden, wenn Sie ein Mock über dem Draht erstellen. Frank, du könntest nicht die Extrameile für einen Klienten gehen und Lauren Gibson tatsächlich durch etwas angemesseneren Text ersetzen . Zum Beispiel, wenn eine Website soll über frisches Essen sein. Kommen Sie mit einigen einfachen Absätzen über frisches Essen. Dadurch fühlt sich der Aufstieg wie du, ob du dich um sein Geschäft kümmerst. Erstellen Sie eine Farbgruppe für Ihren Drahtrahmen. Ob Sie sich entscheiden, in Form zu arbeiten, ist in Grautönen oder einigen anderen Farben. Erstellen Sie eine Cholera-Gruppe, die aus 4 bis 5 Farben besteht, die Sie in Ihrem Drahtrahmen verwenden werden. Und wieder, es ist am besten, es monochromatisch zu halten. Es ist auch eine gute Idee, die richtige Schichtstruktur für Drahtrahmen einzurichten, wenn ich einen Drahtrahmen erstellen , eine Verwendung separate Schichten oder Unterschichten für Kopfzeilenabschnitte. Sidebar, Fußzeile, etcetera eine separate später voll Etiketten, die erklären würde, was bestimmte Teile der U. Y sind auch kommt in wirklich praktisch. Und es ist besonders nützlich, wenn Sie mit einigen anderen Designern oder Entwicklern an dem Projekt arbeiten . Nun, da wir wissen, was Drahtrahmen sind und was die wichtigsten Aspekte von ihnen sind, denke ich, es ist der richtige Zeitpunkt zu lernen, wie man tatsächlich einen zu bauen beginnt , genau das in der nächsten Lektionzu tun , genau das in der nächsten Lektion 15. Wireframe Farbe und Bilder: in diesem Video werden wir einen Blick auf die Erstellung von Drahtrahmenelementen werfen, um uns den Einstieg zu erleichtern. Werfen wir einen Blick auf dieses Layout der Landingpage, das ich für den Zweck dieser Vorlesung zusammengestellt habe . Es ist eine einfache Seite für eine gefälschte Firma mit Namen, ein Großstadtleben. Und wie Sie sehen können, haben wir eine große Heidekraut mit einem großen Hintergrundbild Woche in den Abschnitten, und wir haben die Fußzeile mit Links. Jetzt basierte dieses Design auf diesem Drahtrahmen, und ich denke, die häufigsten Elemente für diese Art von Drahtfransen. Ich habe Logo-Menü-Bild-Symbole verwendet und bemerkt, dass es hier rechteckige, elliptische und quadratische Bilder seiner Knöpfe und Hintergründe gibt. Wichtig ist hier auch die Layerstruktur, sowohl das Design als auch der Drahtrahmen mit Benennungskonvention, die dem entspricht, was Sie in einer typischen Website-Struktur sehen würden. Also haben wir dem Kopf eine Schicht bekommen, wir haben Abschnitte und die Fußzeile. Okay, jetzt, da wir alles erklärt haben, lassen Sie uns die gängigsten Drahtrahmenelemente erstellen. So wurde ich zu einem anderen Dokument bewegt, und bevor ich etwas auf einem Make die Kunst an Bord viel größer zu schaffen beginnen, als es breit ist, und ich werde erklären, warum in späteren Video. Für jetzt, lassen Sie uns einfach den Kopf über die Kunst des Boards Werkzeug und dehnen Sie den Artikel, um Seife zu mögen. Ich denke, das sollte es jetzt tun. Ich beginne mit den Farben für meine Frau Rahmen, und sie werden auch als meine Hintergründe arbeiten. Also werde ich das Rechteck greifen und ein Rechteck erstellen, genau wie ich es ohne Strich schwarz machen werde, und jetzt werde ich es fünfmal duplizieren. Tu das Recht, und der letzte von ihnen wird einen weißen Phil haben. Natürlich könnten wir jetzt einfach zum Musterfeld gehen und die Grace Kate Halsbänder auswählen, aber ich möchte Ihnen eine andere Technik zeigen. Schnapp dir all diese Kerle. Ich werde zu den Süchtigen hinzugefügten Farben gehen, und ich wähle Mischung horizontal, um eine schöne Abstufung von Schwarz zu Off-Weiß zu erhalten. Nun, der Vorteil dieser Technik ist sagen, dass, wenn Sie nicht wollen, eine Graustufen, weil Sie ein großer Fan der grünen Farbe sind und Sie wollen, dass Ihr Vater Drahtrahmen jetzt grün ist, können Sie es tun, anstatt mit Schattierungen von grün zu verwenden, könnten Sie einfach ein dunkelgrünes, fehlgeschlagen zum ersten Rechteck und helleres Grün zum letzten hinzufügen . Und, äh, gehen Sie zum Bearbeiten und Farben und mischen Sie horizontal, um in die Augen zu bekommen. Grüne Skala. Ja, das ist es, was es ist. Es ist eine grüne Skala, aber ich denke, ich war an die Grace Eigentumswohnungen alle auf Do diese letzte Modifikation. Okay, jetzt werde ich Landschaftsbilder für den Frauen-Rahmen erstellen. Also, was kann ich tun? Ich bin nur Aiken duplizieren dieses Rechteck, und wie Sie wahrscheinlich wissen, zeigen die meisten modernen Computermeilen das Bild im Seitenverhältnis von 16 mal neun an. Aber das Bild auf dem Bildschirm haben unterschiedliche Größen, oder? Also, um den Aspekt Rachel intakt zu halten, sondern auch die Freiheit der Bilder von Bildgrößen zu erhalten , die wir verwenden möchten, Lassen Sie uns in der Systemsteuerung. Stellen Sie sicher, dass unser Kleidungsrechteck sechs Pixel breit und neun Pixel gebührenpflichtig ist. Es ist, als ob wir das Seitenverhältnis von 16 mal neun simulieren, und jetzt ist die Option „Proportionen einschränken“ aktiviert. Geben wir einen Wert wie 100 und 50 Pixel ein, um ein größeres Rechteck zu erhalten. Nein, ich werde nur zwei sich schneidende Linien erstellen und, ah, ah, ich will, dass sie ziemlich dunkel sind. Ich gruppiere all diese Typen zusammen und kleide sie nach rechts. Machen Sie diesen Kerl größer. Einige mögen vielleicht320 Pixel breit vielleicht und erstellen auch den letzten. Und dieser Typ wird wie 400 Pixel breit klingen, jetzt tief geschnitten. Vermutlich machen die Bilder größer. Aber da ich in nur 77 20 p für Ihre Bequemlichkeit aufnehme, halte ich die Bilder klein und eine andere schnell bekannt hier. Wenn Sie möchten, können Sie mit nur einem Rechteck beginnen. Sie können seine Größe jederzeit später anpassen, wirklich, abhängig von Ihren Bedürfnissen. Okay, jetzt gehen Sie vor und erstellen Sie ein quadratisches Bild für meine Frau Rahmen, und ich werde das mit dem Rechteck-Werkzeug tun. Ich klicke einfach irgendwo im Dokument und gebe 50 Pixel für mit und Höhe ein. Erstelle jetzt wieder zwei sich schneidende Linien und ich benutze die Reflektoren, die übrigens gesagt wurden, um diese Kreuzungzu erstellen , um diese Kreuzung Ich gruppiere all diese Jungs zusammen, und ich denke, ich werde nur bei diesem einen Quadrat bleiben. Ich wollte eine begeisterte er Art von Symbol sein, und sie sind in der Regel eher klein. Ich könnte auch einen elliptischen Avatar, Avatar-Symbol oder ein Icon-Symbol erstellen. Und ich werde das tun, indem ich das Quadrat dupliziere. Ich werde die sich überschneidenden Linien etwas kleiner machen. Natürlich muss ich eine Gruppe haben, die diese Jungs zuerst und mit Quadrat ausgewählt, gehe ich zum Effekt-Menü. Ich werde stilisierte runde Ecken wählen, und ich werde um die Ecken herum, bis sie den Kreis aus meinem Quadrat bilden. Natürlich muss ich das Aussehen erweitern und ich gruppiere diese Jungs wieder. Ok, großartig. Aber natürlich sind zeitgenössische Websites, die nicht nur Bilder, sondern auch Videos enthalten, oder? Einige erstellen auch Videoplatzhalter . Alles, was wir tun müssen, ist ein von unserem Bild zu klonen, Platzhalter auf einer Gruppe es und löschen Sie die Linien und mit dem Polygon-Werkzeug, klicken und ziehen und auch drücken Sie die Nach-unten-Taste. Um ein Dreieck zu erhalten, wird jetzt einfach gedreht, bis es wie eine Wiedergabe-Schaltfläche aussieht. Und da gehen wir hin. Wir haben die Farben, Bilder und Videos bereit für unsere Frau. Frank. In der nächsten Vorlesung wird Typografie und flexible Schaltflächen hinzufügen. Also, wenn Sie interessiert sind, schauen Sie weiter 16. Typografie und flexible Buttons: Topographie. Elemente in unserer Frau aus der Bibliothek werden Titel oder Überschriften, einzelne Sätze und einzelne Absätze enthalten . Also würde ich mit den Überschriften beginnen. Ich werde einfach den Typ 2 klicken und das Dokument ziehen, um ein Textfeld zu erstellen. Ich werde in Überschrift eins eintippen. Ich werde den Fonds beträchtlich groß machen. Etwas wie 42 Pixel sollten tun, und ich werde es auch fett machen, da Überschriftenelemente normalerweise bowled sind. Jetzt klonen wir diesen Kerl einfach runter, wechseln zu und machen ihn auf etwa 32 Pixel kleiner. Ich werde dasselbe für die Rubrik drei tun. Keine Rubrik vier. Und ich denke, ich bleibe hier, wenn du gehst. Wenn du den ganzen Weg bis zur Position sechs gehen willst, liegt es an dir. Jetzt möchte ich einzelne Sätze und Absätze erstellen. Dafür brauche ich eine Platzhaltersteuer wie Lauren Gibson, richtig? Dafür brauche ich eine Platzhaltersteuer wie Lauren Gibson, Nun, leider Illustrator keine Option, nur Platzhaltertext zu verwenden, wie in einem Fotoshop oder im Design. Was wir also tun könnten, ist, dass wir die Sehenswürdigkeiten verwenden könnten, als Platzhaltertext zur Verfügung zu stellen. Oder wir könnten dafür einen Plug in verwenden und der Stecker, den ich benutze, ist kostenlos und eigentlich ziemlich praktisch. Leider erlaubt ihr Timmy nicht mehr, euch den direkten Link dazu zu zeigen. Also muss ich Sie nur zu Google beraten. Suchen Sie den Begriff Lauren Gibson Plugging Illustrator und klicken Sie auf das erste Suchergebnis. Alles, was Sie tun müssen, ist es zu installieren und dann können Sie es unter einem Fenster Erweiterungen finden. Und hier drin werde ich nur ein paar Lauren Epsom und mit dem Typ generieren. Es erstellt ein Textfeld, greift einen Satz von Lauren Epsom und fügt es ein. Jetzt möchte ich auch Absatz und drei Absätze sehen. Beenden Sie nicht hören Jungs beim Hinzufügen von Absätzen aus Text wie diesem, versuchen Sie nicht, Pausen zwischen den Absätzen durch Drücken zu erstellen, Geben Sie ein oder geben Sie zweimal hitter Andrew einmal zurück und gehen Sie dann zum Absatzbereich und setzen Sie das Leerzeichen nach Absatz auf das, was Sie wollen. Ah, normalerweise gehen Sie nicht über 20. Gehen wir nun zu flexiblen Schaltflächen. Ich klicke hier Sommer und tippe einfach etwas generisches wie Schaltfläche ein. Ich schätze, es kann es bekommen. Kann nicht mehr Dinari als das bekommen, Übrigens, wenn Sie diese Technik verwenden wollen, erstellen Sie keine besteuerte Box. Klicken Sie einfach auf und tippen Sie ein. Andernfalls diese Technik nicht funktionieren. Also, jetzt gehen wir rüber zum Erscheinungsbild Panel und hier drinnen werde ich einfach zu Phil erstellen. Der obere wird mein Off-White sein, so einfach es und der untere kann jetzt schwarz bleiben mit der schwarzen Füllung ausgewählt ganzen Kopf über zu diesem FX-Symbol. Wählen Sie, konvertiert in Form und wählen Sie Rechteck war extrem wichtig. Hier ist, um die Größe als relativ zu belassen, aber Sie können die zusätzlichen Werte für Breite und Höhe nach Ihren Wünschen einstellen. Lassen Sie mich Ihnen nun den größten Nutzen dieses Ansatzes zeigen. - Was? Ich möchte den Namen in etwas anderes ändern wie einreichen oder vielleicht mehr lesen. Unser Schaltflächenhintergrund ändert sich dynamisch. Ziemlich cool, was? Aber ich werde es auf eine Ebene nehmen und dynamischen lokalen Platzhalter erstellen. Ich lade die Schaltfläche hoch, dupliziere die untere Füllung und ändere die konvertierte Formoption in Ellipse. Ich werde die Größe Zehe absolut ändern und klicken Sie einfach auf OK, keine Dame Transformation, weil ich meine Lippen nach links bewegen möchte. Also bei einem negativen Wert in der horizontalen Bewegungsoption. Und hier sind meine Lippen. Jetzt kann ich ins Leben zurückkehren. Ich kann seine Größe ein wenig ändern, und ich gebe zum Beispiel etwas wie, ähm , Firmenlokal , Firmenlokalein. Und da gehen wir hin. Wir haben die flexiblen Tasten und lokale erstellt. Natürlich könnten Sie die Farben ändern, wenn Sie wollen oder mit der Größe spielen. Aber das ist die Schönheit flexibler oder dynamischer Knöpfe. Sie können sie in einem Augenblick so ändern, wie Sie möchten. Der letzte Draht von Element Ich möchte Ihnen zeigen Hier ist das Menü, und erstellen Sie es ist so einfach, wie einfach in Menüpunkt eingeben, als auf das verzerren und transformieren Transformationsmenü und die Besitzer Anzeigen, sagen wir, drei Kopien und Verschieben Sie sie horizontal. Und ich möchte es dynamisch halten, denn abhängig von meinem Designszenario möchte ich vielleicht ihre Elemente näher zusammenbringen oder sie vielleicht weiter voneinander ablegen. Oder fügen Sie Menüelemente hinzu oder subtrahieren Sie sie. Okay, bevor wir diesen Vortrag beenden, lassen Sie uns unsere Bibliothek organisieren. Also zuerst haben wir Farben und Bilder bekommen, also werde ich das eintippen. Jetzt werde ich diesen Kerl klonen und Typ und Typografie, und ich werde dasselbe für die Tasten und Menüs tun. Selbstverständlich könnte unsere Bibliothek um Formelemente oder Social Media erweitert werden. Ich Waffen oder Schaden Hamburger-Menü-Symbole, und ich ermutige Sie tatsächlich, das zu tun. Aber mittlerweile sollten Sie die Methode und den Zweck des Aufbaus einer Drahtrahmenbibliothek verstehen . Und im nächsten Video, lassen Sie uns untersuchen, wie sie tatsächlich in einem Webdesign-Projekt verwendet werden. 17. 2 Möglichkeiten der Verwendung von wireframe: in diesem Video, lassen Sie uns auf die Verwendung unserer von Frau Rahmenbibliothek konzentrieren. Wenn Sie mit mir zusammenarbeiten, hoffe ich, dass Sie bereits Ihre eigene Bibliothek erstellt haben oder Sie verwenden die, die ich Ihnen zur Verfügung gestellt habe . Nun, es gibt zwei Möglichkeiten, eine Drahtrahmen-Bibliothek zu verwenden. Die erste 1 besteht darin, eine Symbolbibliothek aus all Ihren Elementen zu erstellen, und die andere ist, was ich eine Split-Screen-Methode nenne. Wenn Sie eine Symbolbibliothek aus Ihren Raumelementen Ihrer Frau erstellen möchten, ist es so einfach, wie Sie eines Ihrer Objekte auswählen und zum Symbolfeld und aus dem Gefechtsmenü ein neues Symbol auswählen. Geben Sie ihm einfach einen beschreibenden Namen, und jetzt können Sie ihn jedes Mal, wenn Sie ihn verwenden möchten , einfach in Ihr Dokument ziehen. Nachdem Sie die Bibliothek erstellt haben, können Sie sie einfach speichern, damit Sie sie in jedem Ihrer zukünftigen Webdesign-Projekte verwenden können. Der größte Vorteil dieses Ansatzes ist die Tatsache, dass die Verwendung von Symbolen die gesamte Dateigröße reduziert , und der größte Nachteil ist, dass Sie verlieren, dass dynamische Effekte auf Ihre Objekte wie die flexiblen Schaltflächen angewendet werden. Nun, wenn Sie Wenn Sie eine Version von Pillen für CC verwenden, können Sie die Vorteile von etwas namens Bibliotheken nehmen. Die Arbeit funktioniert so ziemlich wie jede andere Bibliothek in Illustrator, behält aber auch die dynamischen Effekte Ihrer Objekte bei. Lassen Sie uns nun einen Blick auf die Split-Screen-Methode werfen, die ich zuvor erwähnt habe. Dafür werde ich einfach schnell ein neues Dokument erstellen. Und jetzt, von der Registerkarte Dokumente anordnen, wähle ich nach oben, damit ich meinen Bildschirm wie Seife teilen kann. Ich werde ein wenig angepasst, und jetzt können Sie sehen, warum ich mein breiteres Frame-Bibliothek-Dokument ein bisschen größer gemacht habe. Und im Moment muss ich nur mit Dragon Element tun. Ich brauche auf mein Drahtrahmendokument und bauen, sagen wir, ein Blawg prahlen Drahtrahmen, markieren Sie mit ein paar Klicks und zieht so. Das sind also nicht zwei Methoden aus. Ich benutze deinen Frauen-Rahmen. Wählen Sie diejenige, die Ihren Anforderungen entspricht, die am besten in Ihrem Workflow funktioniert. Also in diesem Abschnitt haben wir gelernt, was ein Drahtrahmen ist und warum es wichtig ist, Ihren eigenen Drahtrahmen zu bauen und schließlich, schließlich, wie es zu verwenden, um Web-Layout-Elemente im nächsten Abschnitt zu erstellen. wird einen Blick auf die Fertigstellung eines Web-Design-Projekt nehmen, wird einige Bilder Spardatei einbetten, Notizen und Experte zu Datei für Fotoshop erstellen. 18. Das Design an einen Kunden übergeben: in diesem Abschnitt erfahren Sie, wie Sie unser Web-Design-Projekt abzuschließen, bevor Sie es an den Client übergeben oder der Web-Entwickler wird sehen, wie Sie unsere Datei speichern, aber Bilder einbetten und wie Sie eine Illustrator-Datei in Fotoshop nach Ihrem schönen und exportieren glänzendes Design ist fertig, oder zumindest die erste Version davon. Es ist Zeit, es dem Kunden zu übergeben, und Sie bekommen hier zwei Möglichkeiten. Sie können Ihr Design so speichern, wie Sie jedes Bild für die Internetnutzung speichern würden. Und es ist so schnell und einfach wie gehen Sie zum Datei-Menü und wählen Sie sicher für Web. Sie könnten immer Alt plus Steuerung plus Shift Plus s auf der Tastatur verwenden und auf einem Mac würden Sie für die Option Befehl Shift s hier gehen. Wir können aus verschiedenen Bildformaten wählen, aber ich würde nur zwei von ihnen J, Pack und P und G 24 bleiben . Wenn Sie für J pad gehen, können Sie die Bildqualität anpassen. Und natürlich bedeutet schlechte Qualität eine kleinere Dateigröße. Wenn Ihr Design jedoch einige Bilder enthält, die Transparenz verwendet haben, geht es verloren. Wenn Sie Transparenz benötigen, gehen Sie für P und G P und J ist weit verbreitet, bietet gute Qualität und ein volles Farbspektrum. Aber die endgültige Größe ist etwas größer als J pic, also hängt alles von der Art von Design ab, die Sie dem Kunden präsentieren möchten. Auch, wenn es ein Drahtrahmen ist, wird schlicht alten Jay Peak ausreichen. Diese Methode hat einen großen Nachteil. Wenn Ihr Design mehrere Art-Boards mit mehreren Layouts wie Tablet-Layouts oder Smartphone-Layout enthält . Zusätzlich zu einem Standard-Desktop-Layout als Speichern für Web würde speichern, nur eine ist schlecht. Wenn Sie also das Beste aus beiden Welten erhalten möchten, speichern Sie alle Dorne in einer Datei und bewahren Sie die hohe Qualität Ihres Designs auf. Gehen Sie einfach zum PDF. PDF wird weit verbreitet unterstützt, und keiner Ihrer Clients sollte Probleme beim Anzeigen haben, auch wenn sie nicht über Adobe Reader Webbrowser wie Chrome oder Firefox Handle installiert haben. Pdf ist einfach in Ordnung. So sparen Sie Datei als PDF. Gehen Sie einfach zum Dateimenü, speichern Sie unter und wählen Sie aus. PDF und oben ist hier unten, dass Sie die Möglichkeit haben, alle unsere Boards zu speichern oder zu wählen, welche zu sagen. Nun, aus den Voreinstellungen, wähle ich die kleinste Dateigröße, die die meisten Optionen injiziert. Und eigentlich ist es eine gute Sache, weil wir es wirklich nicht tun. Sie brauchen nicht, dass unser Client die Möglichkeit hat, diese Datei selbst hinzuzufügen. Ich schlage nicht einfach, okay. Illustratoren Idee der kleinsten Dateigröße macht es nicht tatsächlich die kleinste Dateigröße möglich. Lassen Sie mich zeigen, dass Sie sehr, sehr hilfreiche Website wollen , wo ich meine PDF's jetzt noch mehr schrumpfen. Dieses Zeichen heißt kleine Periode dot com, und hier kann ich einfach meine Datei ziehen, lassen Sie es seine Magie tun, und die Ergebnisse sind absolut atemberaubend. Ich denke, die durchschnittliche Dateigrößenreduktion, die ich hier bekomme, beträgt etwa 50%, was einfach erstaunlich ist. Also nach der Komprimierung, alles, was Sie tun müssen, ist auf die Datei zu gehen, benennen Sie sie richtig wie eine neue Design-Version eins. Es ist immer eine gute Idee, Ihre Dateien Versionen zu geben, sie an den Client zu senden und auf das Feedback zu warten. Nun, im nächsten Video, werden wir einen Blick auf die Vorbereitung unserer entworfen, um an einen Web-Entwickler übergeben werden. So bleiben Sie dran 19. Exportieren in Photoshop: Wenn Ihr Kunde also mit dem Design zufrieden ist und vorausgesetzt, dass Sie die Website nicht selbst entwickeln , ist es an der Zeit, sie einem Entwickler zu übergeben. Und dafür müssen wir ein paar Dinge tun. zuerst Lassen Sie unszuerstzum Fenstermenü gehen und Links auswählen. Und hier können wir alle Linkobjekte in unserem Design sehen, und das Wort Länge ist hier wirklich wichtig. Wenn wir die Datei so übergeben, würde die Person, die sie öffnet, eine Warnung über fehlende Bilder bekommen, und das wollen wir definitiv nicht. Wenn Sie also auf ein Bild in der oberen linken Ecke klicken, sehen Sie die Wörter verknüpftes Bild. Und was wir tun wollen, ist schlecht sie in unserem Dokument zu schleppen. Der schnellste Weg, dies zu tun, besteht darin, einfach alle Bilder im Verknüpfungsfenster und im Bedienfeldhandbuch auszuwählen . Wählen Sie in schlechtem Bild. Gut. Hören Sie keine Jungs. Wenn Sie sich in Illustrator CS sechs und früheren Versionen fehlerhafte Bilder befinden, können Sie sie nicht einbetten. Aber das können Sie in Illustrator Assisi tun. Okay, jetzt, da wir haben, ist das Bild eingebettet. Lassen Sie uns einige hilfreiche Informationen für den Entwickler erstellen. Ich werde eine neue Ebene erstellen und es Notizen nennen, und was ich hier tun möchte, ist, dass ich angeben möchte, welche Schriftarten und Farben verwendet werden. Also geben Sie einfach die Mittel und für das Logo ein. Ich benutzte Hummer auch für den Körper. Kobe sind verwendet Kabine und für die Böden werden Kabine verwendet, auch. die Farben betrifft, was es normalerweise getan hat, um den Workflow schneller zu machen. Ich erstelle einfache Rechtecke mit Phil Farben, die den Farben entsprechen, die auf der gesamten Website verwendet werden , und es ist eine gute Praxis, nicht über Bord mit der Anzahl der Farben zu gehen. Es ist großartig, es unter sechs zu halten, also erstellen Sie die Rechtecke und probieren Sie die Farben. Ich werde von oben beginnen, also eine Probe, die lokale Farbe. Dann ist es diese Schaltfläche Farbe und diese Symbole Anrufer, wir müssen die Körperkopie Farbe hinzufügen, natürlich. Und dieser Teil des Essens er, der Copyright-Info-Hintergrund ist der gleiche. Cholera ist die Körperkopie. Nicht, dass wir das alles haben. Was ich tun möchte, ist, ein Rechteck zu einer Zeit auszuwählen, doppelklicken Sie auf den Film und kopieren Sie einfach den markierten Hack-Farbwert, und ich möchte es als Text verwenden. Ich werde ein paar Mal duplizieren und anfangen, den Rest der Farbe zu kopieren. Unflexibel. Der Grund, warum wir dies tun, ist, dass es für den Entwickler oder sich selbst so viel einfacher sein wird wenn Sie neben sich selbst entwickeln, um nur die Farbinformationen zu kopieren und im Code basiert. Anstatt die Farbe zu sampling, um den Hex-Code zu überprüfen und dann kopieren und einfügen, bevor wir die Datei auf eine PSD exportieren, lassen Sie uns schnell ihr Dokument organisieren. Wenn Sie die Datei über die Person behandeln, die sie erhält, wird es viel schneller arbeiten können, wenn die Namenskonvention des Designs logisch und unkompliziert ist. Also zusätzlich zu den wichtigsten Schichten richtig benennen, lassen Sie uns auch die Objekte nennen. Also, zum Beispiel, in der Gruppe diese Typen hier und rufen diese Gruppenkamera an, werden diese Typen Hut und diese Typen genannt. Nennen wir sie Kaffee. Ich setze dieses Verständnis während des gesamten Designs nicht fort Wenn wir also die Datei für den Fotoshop exportieren, wird es einfacher sein, das Element des Designs zu unterscheiden. Also lasst uns das jetzt tun , ja? Lassen Sie uns den Kopf über das Datei-Menü, wählen Sie Export und meine letzten vier Monate werden Photoshopped PST sein. Das Farbmodell wird natürlich natürlich RGB-Auflösung auf 72 ppI eingestellt und für die Optionen möchte ich für maximale Glaubwürdigkeit gehen . Also möchte ich die Schichten fahren und den Rest überprüfen. Nicht nur getroffen. Ok? Und jetzt werde ich zum Fotoshop gehen und meine Akte öffnen. Okay, so ist das unsere Datei im Fotoshop Wurden schnell Hintergrundschichten erstellt, so dass Sie alles besser sehen können. Wie Sie sehen können, Illustrator einen ziemlich guten Job gemacht, unser Design zu exportieren, dass wir alles hier haben. Wir haben unsere Notizen. Wir haben unsere Ebenen mit Eigennamen und wir können es noch hinzufügen. Die Steuer, wenn wir also wählen, wenn Sie mit einem Entwickler arbeiten, der absolut darauf besteht, eine PSD von Ihnen zu erhalten, hier ist, wie Sie es liefern können. Verwendung von Illustrator auf diese Weise gibt Ihnen das Beste aus beiden Welten. Sie können ein Layout mit leistungsstarken Illustrator-Tools frei entwerfen, aber Sie können immer noch alles für Fotoshop exportieren, wenn Sie möchten. Also, jetzt im nächsten Video, werden wir den Kurs einschließen, also bleiben Sie dran 20. Lassen Sie uns zusammenfassen, was wir gelernt haben: Also hier sind wir. Wir haben es durch den Kurs geschafft. Ich hoffe, Sie haben es genossen und haben viel gelernt. Inzwischen sollten Sie also zumindest mit der Entwicklung Ihres eigenen Webdesigns beginnen. Arbeitsablauf. Wie im ersten Abschnitt gezeigt, sollten Sie die Prinzipien des guten Designs verstehen, wissen, wie Sie Illustrator für einen Web-Design-Job einrichten, wie die Waffen und Arbeitsbereich und ein neues Dokument für Web-Design zu erstellen und wie zu bauen Ihre eigene responsive Web-Design-Vorlage. Sie sollten wissen, wie wichtig es ist, Drahtrahmen-Bibliothek zu erstellen, und wissen, wie Sie Ihr endgültiges Design einem Kunden präsentieren und wie Sie ein Dokument für einen Webentwickler vorbereiten können. Also alles, was Sie jetzt tun müssen, um mit dem Design zu beginnen. Aber wenn Sie nicht wissen, wie Sie das tun sollen oder Sie den eigentlichen Entwurfsteil in Illustrator sehen möchten, werfen in Illustrator sehen möchten, Sie einen Blick auf meine anderen Kurse, in denen ich genau das zeige. Also hoffe ich, Sie genießen diesen Kurs. Mein Name ist David Tomaszewski und habe ein schönes Design