UI-Design und Webdesign in Adobe Illustrator CC

1. Einführung: Hallo, da. Mein Name ist Dan und ich bin Adobe-zertifizierter Dozent für Illustrator. In dieser Videoserie werden wir Adobe Illustrator verwenden, um gemeinsam ein Web- und UI-Design-Projekt zu erstellen. Wir werden echte Projekte benutzen. Wir fangen mit unserem Portfolio an. Du kennst das Portfolio, das, das du für immer aufbauen willst, aber nicht zu dran bist. Lasst uns das jetzt zusammen bauen. Ich habe diesen Kurs für Anfänger gemacht. Sie benötigen keine Vorkenntnisse von Illustrator oder andere Designerfahrungen. Wir fangen mit den Super-Basics an. Es spielt keine Rolle, ob Sie Illustrator für App- oder Webdesign verwenden möchten, die Techniken sind die gleichen. Wir werden den vollständigen Benutzeroberflächenprozess durchlaufen. Ich zeige Ihnen, wie Sie Illustrator verwenden, um Sitemap zu erstellen und dann Ihre ersten Wireframes zu erstellen. Dann beginnen wir mit der Gestaltung unserer mobilen Tablet- und Desktop-Site mit Website-Schriftarten, Farben und reaktionsfähigen Bildern. Wir werden unsere eigenen benutzerdefinierten Symbole und Logos erstellen und lernen, wie man das Stiftwerkzeug und das erstaunliche Shape Builder-Tool verwendet. wir fertig sind, wissen Sie genau, was von Ihnen als UI-Designer erwartet wird liefern reaktionsschnelle Retina-Bilder und CSS-Code , so dass Ihr wunderbares Webdesign perfekt als Website wiedergegeben wird. Am Ende dieser Tutorialserie gibt es ein Projekt. Es hat eine festgelegte Aufgabe, die Sie für einen passenden Client tun müssen, und Sie können dies als Teil Ihres Portfolios verwenden, um das aufzubauen. Es ist wie Hausaufgaben, außer ich werde es Carrier Development nennen. Es ist Zeit, Ihre Fähigkeiten zu verbessern, einen besseren Job zu bekommen und den Heck aus Ihren Kunden zu beeindrucken. Ich weiß nicht, sie fangen an, herumzuwinken, wenn ich anfange zu reden, als wäre ich in einem Musical. 2. Bin ich jetzt eine UX-Designerin?: Jetzt ist die Frage, ob ich nach diesem Kurs ein UI Slash UX Designer sein werde? Man sieht es überall, sie gehen Hand in Hand. Es sind sehr unterschiedliche Dinge. Nach diesem Kurs können Sie sagen: „Ja, ich bin ein UI-Designer.“ Ich kann Benutzeroberflächen erstellen, wie Websites, die es tun würden, und App-Design, das Benutzeroberfläche ist. - Ja. Wir verwenden Tools wie Illustrator, unter anderem, die Sie möglicherweise als UI-Designer verwenden könnten. Jetzt in Bezug auf die UX, Benutzererfahrung, das ist ein völlig größerer Kessel Fisch oder eine andere Sache. Sie werden UI-Design als Teil eines UX-Designers verwenden, aber es gibt viele andere Dinge, die einen UX-Designer machen. Es gibt viel mehr, wie Ziele zu setzen, es gibt Forschung, es gibt Tests, und dann geht es auch durch die gesamte Build-Phase eines Projekts. Jetzt werden wir das UX-Design in diesem Kurs nicht abdecken. Ich habe einen vollen weiteren Kurs darüber, ein UX-Designer zu sein, also sieh dir das an. Dies konzentriert sich mehr auf die Benutzeroberfläche, die ein Teil von UX ist, aber nicht das Ganze. 3. UI-Design Photoshop vs. Illustrator vs: Skizze vs. InDesign vs. Adobe: In diesem Video werden wir darüber sprechen, welche Produkte was tun, denn Adobe hat viele davon. Es gibt einige andere Konkurrenten auch über das Web im UI-Design. Lassen Sie uns über die wichtigsten Adobe-Produkte sprechen. Wir werden über InDesign im Vergleich zu Photoshop und Illustrator sprechen, welches Sie verwenden sollten. Die, die Sie verwenden sollten, ist entweder Photoshop oder Illustrator. Photoshop hat einen kleinen Vorteil gegenüber Illustrator, vor allem für mich ist es etwas, das Gerätevorschau genannt wird. Wenn Sie Photoshop-Fähigkeiten haben, habe ich einen vollständigen Photoshop-Kurs, es ist genau wie dieser Illustrator 1 tut UI-Web-Design, so gehen Sie, dass überprüfen. Aber wir sind hier, um Illustrator zu lernen. Photoshop hat den leichten Vorteil für vor allem Webdesign gegenüber Illustrator, aber nicht genug, um zu sagen, verwenden Sie keine von ihnen, sie sind beide ziemlich genial. Illustrator wir werden es diesen vollen Kurs betrachten, und es ist perfekt für Web und UI, aber es gibt Ihnen auch Fähigkeiten in Bezug auf die Gestaltung von Logos und Symbolen. Viele Leute werden Illustrator lernen, weil es zwei Zwecke hat. Sie erhalten, um es für eine Reihe von verschiedenen Sachen zu verwenden, sowie Druck, sowie Web. Lassen Sie uns über InDesign sprechen. InDesign wäre ein No-Go für mich. Sie können Webdesigner tun, es gibt eine Datei, ein neues Dokument, und Sie können einige Web-Funktionen auswählen, aber es fehlt so viel von den Goodies, die Ihnen helfen, UI für Web und Apps zu entwickeln , die ich es verwenden würde, wenn Sie jemand sind, der nur InDesign -Fähigkeiten, das Problem dabei ist, dass Sie keinen Job als Webdesigner mit InDesign bekommen konnten. Also ja, InDesign fehlt zu viel die Funktionen. Es ist nur für Dokumente. Es ist mehr wie eine große Version von Word. Die nächste Gruppe von ihnen ist etwas namens XD, Experience Design von Adobe, es ist neu, es ist immer noch in der Vorschau, es ist wirklich cool, aber es ist immer noch in der Vorschau und es fehlen viele Funktionen. Ich habe es ein paar Mal benutzt und es ist wirklich gut, aber es ist noch nicht wie ein komplettes Produktionsprodukt. Ich benutze immer noch Dinge wie Illustrator und Photoshop, während XD letztendlich das Gefühl hat, dass es vielleicht das Produkt sein wird, das für Webdesign verwendet wird. Das ist definitiv eine, die sich intensiv mehr auf die App-Entwicklung als auf das Web konzentriert. Ich denke, das wird seine Heimat sein. Es wird für App-Entwickler oder App-Designer sein. Dinge wie Illustrator und Photoshop bleiben für die Web-Design-Community. Das letzte Produkt, über das man sprechen sollte, ist etwas namens Sketch. Es ist außerhalb des Bereichs von Adobe. Es ist ein weiteres konkurrierendes Produkt. Das Produkt, mit dem es am meisten konkurriert, ist Experience Design Adobe XD, da es sich eher um ein App-Design handelt. Wenn ich jetzt ein vollwertiger Besitz Adobe tun Apps sein würde, würde ich sicherstellen, dass meine Sketch Fähigkeiten waren ziemlich gut als gut. Sie können alles in Illustrator tun, ist völlig in Ordnung, Ihre App-Entwickler werden es nicht hassen, aber Sketch ist ganz im Moment in Bezug auf die Suche nach Jobs. So Sketch ist ein ziemlich cooles Produkt zu verwenden, aber es ist speziell für App. Sie können es für das Web verwenden, es ist kein Problem damit, aber ich habe das Gefühl, Photoshop und Illustrator sind besser darin, diese Web-Sachen zu machen. Es gibt viel mehr reife Produkte und sie haben viele andere Möglichkeiten, andere Dinge zu tun. Sketch ist nur wirklich speziell für App- und Web-Design, während diese anderen beiden Produkte haben viel mehr Spielraum in Bezug auf andere Dinge, die Sie mit diesen Fähigkeiten tun können. 4. Welche Rolle spielt Illustrator bei der Gestaltung einer Website: Was ist die Rolle der Illustratoren in diesem ganzen Geschäft? Okay, als Webdesigner können Sie entscheiden, dass Sie an den Grenzen der Stelle, wo Illustrator stoppt, und was Sie zu tun haben, sagen Sie, Sie sind der Designer, Sie müssten mit dem Entwickler oder Webdesigner oder Front-End-Webdesigner arbeiten, jemand, der HTML und CSS macht, weil Illustrator selbst keine Website erstellt. Es entwirft es, das Aussehen und Gefühl, bringt alles in die richtige Position, die Farben, die Schriftarten, und wir verwenden das als Vorlage, um es in Code zu erstellen. Okay, jetzt, da könnten Sie fertig sein. Du könntest einfach am Ende hier abgeben. Wenn ich dein Webdesigner wäre, würde ich eine Reihe von JPEGs, PNGs und SVGs erwarten , also nur Bilder. Ich möchte, dass Sie mir sagen, welche Schriftarten sie sind, welche Farben sie sind, welche Größen sie sind, was die farbigen Boxen sind, wie weit sie voneinander entfernt sind. Ich werde dieses Zeug wollen und das kommt von dir als CSS zu mir, und wir werden in diesem Kurs schauen, wie das gemacht wird. Okay, also könnten Sie sich entscheiden, ein wenig weiter zu gehen und Sie wollen den gesamten Webdesign-Prozess durchführen. Was ich tun werde, ist, dass ich dieses spezielle Design, das wir hier in Illustrator machen, drehen und wir werden es tatsächlich auch in Dreamweaver bauen, nur um es zu einer schönen kompletten Serie zu machen. Also, wenn Sie mehr Print-basiert sind und wenn Sie nur diese Seite bleiben wollen, Illustratoren, wo Sie beenden. Aber wenn Sie ein wenig mehr weitermachen und vielleicht eine kleine Einführung in Code bekommen wollen, ist es vielleicht nicht so beängstigend, wie Sie denken, ich hoffe, Sie werden es in so etwas wie Dreamweaver verschieben und die gesamte Website darin aufbauen. Das ist also die Rolle von Illustrator. 5. Lade die Übungsdateien, die fertigen Dateien und die Spickzettel herunter: In Ordnung. Das erste, was wir tun müssen, ist, die Übungsdateien zu bekommen. Es wird einen Link in der Beschreibung oder auf den Seiten hier irgendwo geben. Wir können losgehen und die Übungsdateien holen, und das sind nur die Bilder, die wir verwenden werden, jeden Text, den wir verwenden, alle Ressourcen, über die ich spreche. Also laden Sie diese herunter, und die andere Sache, die auf jedem bestimmten Video da sein wird, wird es einen Link zu etwas geben, das die fertige Datei genannt wird, und es bedeutet nur, wenn wir etwas in einem Kurs machen, wenn ich bis zum Ende komme, werde ich“ Speichern“, und ich werde es in einem speziellen Ordner, und nennen Sie es das gleiche wie das Video, so dass, wenn Sie es tun und Ihre sieht nichts dasselbe, Sie können meine Version herunterladen, überprüfen Sie es, öffnen Sie Illustrator und gehen, „ Oh, so hat er das gemacht“. Also vergleichen Sie einfach die beiden, sie werden als abgeschlossene Dateien bezeichnet und sie sind nur auf Videos, in denen ich tatsächlich etwas mache. Das Letzte, was ist der Spickzettel. Das Spickzettel ist etwas, das ich mache und es wird einen Link auf dem Bildschirm über hier, Taylor, gehen, und Sie können dorthin gehen und es ist ein herunterladbares PDF, drucken Sie es aus. Es gibt auch eine Video-Version, teilen Sie es herum und es ist nur das Zeug. Sobald du diesen Kurs beendet hast, wirst du sagen: „Mir geht es jetzt gut. Ich möchte schneller gehen, was sind alle Verknüpfungen“. Dafür ist dieser kleine Spickzettel. Los und lade das alles herunter und dann gehen wir zum nächsten Video. 6. So richtest du deinen Arbeitsbereich und deine Illustratoreinstellungen für die UI-Arbeit ein: Hi. In diesem Kurs werden wir uns mit der Einrichtung unseres Illustrators für die Arbeit mit Web- und App-Design beschäftigen. Es gibt ein paar Dinge, die wir ändern müssen, weil der Moment standardmäßig, wenn Sie es installieren und während Sie es verwenden, es geht davon aus, dass Sie es mit druckbasierten Dingen zu tun haben. Es wird also physikalische Messungen verwendet und wie Millimeter, Zentimeter oder Zoll. Also müssen wir losgehen und ein paar Dinge ändern. Das erste, was wir tun werden, ist, dass wir ein neues Dokument öffnen. gehen wir zu Datei Neu und es gibt eine Menge entlang der Spitze hier gehen wir zu Web und wir werden mit Common beginnen und klicken Sie einfach auf „Erstellen“. Cool und was passieren wird, ist, dass es auf ein paar Dinge zurückgeht, die wir ändern müssen. Um dies zu tun, gehen wir zu Illustrator CC und gehen zu Einstellungen und wir gehen zuerst in Einheiten. Wenn Sie auf einem PC sind, ist es unter Editieren Preferences, also seine Bearbeiten und den ganzen Weg unten unten hier wird es Preferences sagen. Also unter Mac, es ist hier und wir gehen zu Einheiten. Dies ist das erste, was zu ändern, ist General, Ihre wird wahrscheinlich auf Zoll gesetzt werden, wenn Sie in Amerika sind und wenn Sie irgendwo sind , die nicht verwenden Zoll wird es auf Millimeter oder Zentimeter gesetzt werden. Wir müssen es in Pixel ändern. Das ist die Messung, die wir verwenden, wenn wir es mit UI-Design zu tun haben, Lassen Sie uns Pixel wählen. Gleich mit dem Strich befasst es sich traditionell mit Punkten, aber wir müssen mit Pixeln und dem gleichen mit dem Typ umgehen. Die Schriftarten sind so konzipiert, dass sie Pixelgrößen verwenden, anstatt, sie sind nicht weit entfernt, Pixel und Punkte sind in Bezug auf die Maße nicht so weit entfernt , sondern verwenden Pixel. Okay und lasst uns auf „OK“ klicken. Die andere Sache, die wir tun müssen, ist, dass unsere Dokumente in Bezug auf unseren Arbeitsbereich gleich eingerichtet werden. Sie können hier sehen, dass meine alles durcheinander ist, weil ich damit rumgemacht habe. Was Sie tun müssen, ist hier oben zu gehen, gehen Sie zum Fenster, gehen Sie zum Arbeitsbereich und Ihre ist wahrscheinlich auf Essentials gesetzt und es sieht so aus, aber wir gehen zu Fenster, gehen zu Workspace und lassen Sie es auf Web nicht überraschend setzen, nicht nicht überraschend. Sie können sehen, ob Ihre immer noch wie meine verwechselt ist, was wir tun können, ist, dass wir zurück zum Web gehen können, und ich sehe, das ist Web, aber wir werden sagen, Reset Web bitte. Was es tut, ist, es setzt es zurück, ein Webspace, dieses Ding erscheint immer und es ist ein bisschen ärgerlich, geh weg. Das ist die Schnittstelle, um sicherzustellen, dass deine wie meine aussieht, damit wir weitermachen können. 7. Sitemap vs. Wireframe: Hey, in diesem Video werden wir schnell darüber reden, was eine Sitemap im Vergleich zu einem Wireframe ist. Die beiden können sich vermischen, wenn ich mit Leuten rede, also ist es wirklich einfach, es dir zu zeigen. Das, meine Freunde, ist eine Sitemap. Es ist wie ein Flussdiagramm, in dem Sie zeigen, welche Seiten wo auf Ihrer Website gehen. Ein Drahtmodell ist ein Mockup Ihrer Seite, aber nur mit wirklich grundlegenden Grafiken, also Platzhalter für Bilder, Platzhalter für Text, und wir sind nicht wirklich mit dem Logo, sondern schreiben es nur dort. Es ist nur, um Ideen in einer Art von Reihenfolge darüber wohin die Dinge gehen könnten, anstatt sofort an Designs, Farben und Schriftarten zu arbeiten. Das ist ein Wireframe, und das nennt man Sitemap. Gehen wir zum nächsten Video. 8. So erstellst du eine Sitemap in Illustrator: He. In diesem Video werden wir uns die Erstellung einer Sitemap ansehen. Jetzt können wir das in ein paar Programmen machen. Ich werde Ihnen zeigen, wie Sie es in Illustrator machen, weil es eine Illustrator-Klasse ist, aber dann werde ich Ihnen zeigen, warum ich es nicht in Illustrator mache , hauptsächlich weil es so lange dauert. Lassen Sie uns schnell abmelden. Lassen Sie uns zunächst darüber sprechen, wie ich es traditionell mache. Ich mache eine Sitemap einfach von Hand in meinem Notizbuch. Nun, wenn ich es mit meiner eigenen Website zu tun habe, ist es nur von Hand; das war's, Spiel vorbei. Ich ziehe es auf. Nun, wenn ich es für einen Kunden mache, erwarten sie eine höhere Ebene der Präsentation, also werde ich es entweder in Illustrator tun oder ich mache es in etwas namens Muse, was ich Ihnen in einer Sekunde zeigen werde. Aber es gibt kein wirkliches Werkzeug speziell dafür. Wir werden Illustrator verwenden, um loszulegen. Wir gehen zu Datei, Neu, und wir werden machen, wahrscheinlich, weil es gedruckt und an den Client gesendet wird, es A4 sein und ich werde es Querformat machen. Ich werde erstellen, wenn Sie in den USA, gehen Sie zu Brief. Alles, was Sie tun, ist es nicht besonders aufregend, es ist Greif-Rechteck-Werkzeug. Ich werde meine Füllung entweder weiß oder keine Füllung geben, und ich werde eine schwarze Linie um die Außenseite legen. In Bezug auf den Strich werde ich es auf ein Pixel setzen. Deiner könnte auf Stillstand gesetzt werden. Mach dir keine Sorgen, benutze nur einen Punkt für den Moment. Wir werden das in ein bisschen ändern. Sitemap soll dem Kunden den Fluss der Website zeigen, wohin die Dinge gehen werden, wie es strukturiert werden soll. Also, was Sie tun können, ist eine Box zu zeichnen und greifen Sie ein Type-Werkzeug und Sie sagen, das ist Ihre Homepage. Ich werde diese beiden zusammen zentrieren, indem ich sie beide auswähle, und oben oben hier habe ich einige Optionen und da ist die eine, die Mitte sagt. Jetzt werde ich meine nächste Seite zeichnen. Ich werde das wahrscheinlich ein wenig verschieben und ich werde sie kopieren und einfügen. Also bearbeiten Sie kopieren, bearbeiten , einfügen, ich werde es ausrichten. Dieser hier wird meine Produktseite sein. Großartig. Ich tippe das über meine Tastatur. Nächste Seite, und Sie können sehen, es ist ein bisschen eintönig. Es ist nicht so schlimm, hängt davon ab, wie groß die Struktur sein muss. Ich werde hier hineingehen und das wird meine „Über uns“ -Seite sein. Ich sollte diesen Text wahrscheinlich zentrieren, um es einfacher zu machen, aber Sie bekommen die Idee. Nun, ich muss diese verbinden, und es gibt ein Liniensegment-Tool hier. Jetzt könnte Ihre unter einigen dieser versteckt sein. Klicken Sie also und halten Sie gedrückt und greifen Sie das Liniensegment. Ich werde auf Halten und Ziehen klicken. Sie können sehen, dass es diese beiden verbindet. Dieser hier, es ist ziemlich gut darin, Dinge auszurichten. Wenn Ihr Ding nicht ausgerichtet ist, können Sie meins sehen, es hat diese schöne Kreuzung, all diese wie, sehen Sie diese rosa Linien springen überall. Sie können das unter der Ansicht ein- und ausschalten, und es gibt einen sogenannten Smart Guides. Also habe ich das im Moment an, du kannst sehen, dass meine eigene hier nicht wirklich eine Linie zeichnet, du siehst, dass sie dort hinter sich gelassen wird . Denn als ich anfing zu zeichnen, kannst du sehen, dass ich keinen Strich habe, keine Füllung, und das kann dich ausschneiden. Also werde ich meinen schwarzen Pfeil holen. Ich habe sie noch ausgewählt, und ich werde sagen, dass du mein Freund einen schwarzen Schlag brauchst. Sie können sehen, dass der Hub der Liner auf der Außenseite ist. Diese erste hier ist die Füllung, und da dies eine Zeile ist, hat sie keine Füllung. Dieser Typ gibt es noch, aber er hat keinen Strich, keine Füllung, also druckt er nicht, also ist er nicht sehr nützlich. Ich werde diesen Kerl anmachen. Das ist in Ordnung. Jetzt wollen wir das aufbauen. Also wollen wir das Liniensegment-Tool greifen und beginnen, dieses zu zeichnen. Das war's. Es gibt nur eine Menge von Boxen, viel Kopieren und Einfügen, viele Linien mit ihnen verbinden, um sicherzustellen, dass sie einrasten. Es ist also nicht super gehabt. Aber wenn ich ein Drahtmodell machen werde, werde ich es wahrscheinlich nicht auf diese Weise bauen. Ich werde in etwas namens Muse springen weil es super einfach ist und es Teil der Creative Cloud-Lizenz ist. Wenn Sie also diese neueste Version hier haben, haben Sie Muse, und wenn Sie sie verwenden, können Sie Illustrator völlig verwenden. Fahren Sie mit Illustrator fort, bauen Sie dieses Ding aus. Dann wahrscheinlich, wo das größte Problem kommt, ist nicht so viel Gebäude, es ist, wenn wir Dinge ändern müssen, wir müssen das hier rüber bewegen. Das muss auch kommen, also wählen wir all diese aus, und diese Anpassungen werden ein bisschen schwieriger. Also lasst uns in Muse springen und warum ich es liebe, nur das Wireframing zu machen. Downloaden und installieren Sie Muse, das müssen Sie nicht. Ich werde eine neue Seite erstellen. In Bezug auf die Seitenbreite machen wir uns darüber im Moment keine Sorgen. Ich klicke einfach auf OK, und wir bleiben hier eigentlich. In Muse, nur damit Sie es wissen, ist es ein Web Design-Programm, ohne Code zu verwenden. Es ist wirklich cool und ich habe einen Kurs darauf, wenn du es machen willst. Aber wir werden es nur in diesem Fall benutzen. Es ist Teil des Illustrator-Prozesses und des UI-Designs aufgrund dieser schönen Draufsicht. Also stellen Sie sicher, dass Sie im Plan sind. Sie können hier sehen, ich habe bereits eine Homepage, die praktisch ist. Dann kann ich auf diesen kleinen Plus-Button klicken und Sie können sehen, hey, ich kann in meine Produktseite setzen. Wenn ich Produktseite sage, ist es, als ob wir eine Website für Widgets erstellen, das ist, wo die Widgets dorthin gehen würden. Jetzt werde ich es auf meiner Seite „Über uns“ setzen und Sie können sehen, wie schnell dieser Workflow ist. Kontaktieren Sie uns. Dann, wenn wir zu Produkten gehen, können wir sagen,, Ich möchte, sagen Produkt, und buchstabieren Produkt A. Sie können es tun Produkt A, und beobachten Sie dies. Hier ist es schön. Sie können sehen, dass es das getan hat, diese Zeilen beigetreten ist, ein cooles kleines Flussdiagramm in Gang gebracht hat. Es wird einfach sehr einfach, eine Sitemap zu erstellen. Du kannst das weiter ausbauen. Sie können weiterhin Bits hinzufügen, Sie können sie verschieben. Also schau mal, die sagen Über uns Seite muss da sein. Sie können sehen, dass dieser Schalter rund ist und das ist wahrscheinlich, warum ich es am meisten mag. Abhängig von der Art des Flussdiagramms oder der Standortkarte, die Sie erstellen, können Sie es hier oben tun. Sie können horizontal oder vertikal gehen, was auch immer es für Ihren Kunden oder für sich selbst deutlicher zeigt. Also werde ich zurück zu diesem, der Größe. Sie können es groß oder klein machen, um in viele verschiedene Stücke zu passen, und das war's. Sie sind bereits beschriftet. Sie haben nette kleine Linien und Flussdiagramme. Nun, die Frage könnte sein, was mache ich jetzt damit? Es gibt kein Export-PDF der Sitemap, was in Muse eine wirklich coole Funktion sein sollte, ist es nicht. Alles, was ich mache, ist einen Screenshot zu machen und dann auch im Design oder Illustrator nur als Bild zu bearbeiten . Das ist also mein Workflow. Du magst diesen Schwarzen hier vielleicht nicht. Du kannst ein paar grundlegende Sachen machen. Sie können durch die Installation der Schriftarten und alles gehen, aber Sie können einige Dinge tun. Sagen Sie, dass dies setzen wollen, Ich gehe zu Adobe Muse an der Spitze und gehen Sie zu Einstellungen. Wenn Sie sich auf einem PC befinden, werden diese Einstellungen unter Bearbeiten unten unten hier ausgeblendet. Also werde ich zu den Vorlieben gehen. Was Sie tun können, ist die Kulisse für diese hellere Farbe hier auszuschalten. Dann können Sie einen Screenshot auf einem PC machen. Es gab tatsächlich einen Button namens Screenshot. Es ist dort, wo sich Ihre Home- und End Page Up Buttons befinden. Auf einem Mac wird es Command Shift 4 sein, und klicken Sie dann einfach auf Halten und ziehen Sie es heraus. Ich werde einen Screenshot machen. Dann öffne ich Illustrator. Seid los, Jungs, weil ihr zu lange dauert. Dann gehe ich zu Datei, Ort, und von meinen Screenshots, hier bist du, lege sie dort hinein. Dann entwerfe ich es. Ich könnte Dinge wie den Job-Namen, den Client-Namen, diese Version der Sitemap einfügen. Es ist ziemlich wichtig. Also gibt es eine, die ich fast fertig gemacht habe, Zuweisung der Benutzeroberfläche dort gemacht habe. Also habe ich einen Screenshot der schwarzen Version gemacht. Ich habe gerade meinen Kundennamen, meinen Namen der Designagentur hinzugefügt . Ich gab ihm eine Version, und ich habe mein Logo angezogen, nur um es zu brandmarken und es ein bisschen zu geben, denke ich, schauen und fühlen für Ihren Kunden, an den Sie es liefern. Also denken Sie daran, von Hand ist völlig in Ordnung, wenn Sie mit Ihren Freunden zu tun haben, und Ihre Freunde, und Ihre Eltern. Ich finde, ich gehe nicht weiter als das, aber wenn es einen zahlenden Kunden gibt, wäre oft diese Erwartung oder dieses Niveau bei einem Treffen zu erwarten. Sie können entweder Illustrator verwenden, Felder ziehen, sie verbinden. Nichts falsch daran, oder du kannst zu Muse springen und einfach dieses coole kleine Tool benutzen, einen Screenshot machen, es hier hineinwerfen. Das ist also die Einrichtung einer Sitemap für Ihr Website-Design. 9. Welche Bildschirmgrößen verwendest du am besten für Desktop, Tablet und Mobildesign: Hey, da. In diesem Tutorial werden wir diese Zeichenflächen in Illustrator erstellen. Dies wird unsere Desktop-Größe sein, dies wird unsere Tablet-Größe sein, und das wird unsere mobile Größe sein. Lassen Sie uns herausfinden, welche Größen wir zuerst benötigen, um diese zu erstellen, und dann werden wir sie in Illustrator erstellen. Wir müssen herausfinden, welche Größen zu verwenden sind und das kann ein bisschen hart sein , weil es sich im Laufe der Zeit ändert und es so viele Gerätegrößen gibt, aber ich habe einige Grundlagen für Sie, um das zu verwenden, was die meisten Leute verwenden, und wenn Sie mehr informiert werden wollen über das, was herauskommt, oder welche Geräte da sind, gibt es wirklich coole Website namens mydevice.io/devices. Also gehen Sie zu dieser ganzen URL dort in einem Rutsch. Es gibt Ihnen nur interessante Sachen darüber, welche Größen. Ignorieren Sie nun diese physikalischen Höhen und Breiten, verwenden Sie die CSS-Breiten. Dies ist, was wir als unsere Designer verwenden, das ist Pixel breit, und wir können sehen, dass das neue iPhone 7 375 Pixel breit ist. Das gibt Ihnen eine gute Spur von vielleicht mein Handy muss über das sein oder zumindest es einschließen, weil es eines der beliebtesten Telefone ist. Sie können sehen, die 6 plus, das große riesige Telefon ist noch größer und ich ignoriere, dass ein, Ich ließ ihn mit der Tablet-Größe umgehen, weil es so ein großes Telefon ist, es ist, dass große Lieblings Sache. Deckt iPhone 6 und Sie können sehen, dass alle früheren auch nicht über 375 sogar. Also wähle ich oft einfach meine Handygröße auf 400 aus, um all diese einzubeziehen, aber Sie werden ein Paar ausschließen. Der große Riesenliebling, ich glaube, da ist jemand hier unten wie Nixes 6. Es war etwas größer, es ist ein großes Telefon. Es deckt die meisten von ihnen ab. Blackberry Passport, es ist massiv. Also, das ist für Handy. Sie können hier unten für Tablet direkt unter sehen. Sie können anfangen, sich diese anzuschauen. Ich habe das iPad Pro ignoriert. Warum? Weil es so groß ist wie ein Desktop. Wenn Sie jemals in einem Apple Store gegangen sind und das MacBook, iPad Pro sehen, sind sie massiv. Ich entwerfe nicht für die Tablet-PC. Ich überlasse diese, um die Desktop-Größe zu verwenden, aber ich bedecke diese. Das ist also die Größe, die ich für Tablet 768 verwende. Jetzt gibt es keinen Grund, warum Sie nicht speziell andere Größen auswählen können. Wenn Sie nach diesem Projekt mit einem Entwickler oder Webdesigner arbeiten, fragen Sie ihn. Sag mal, hey, ich entwerfe die Website, welche Größen du brauchst, und sie könnten dir geben, dass die verschiedenen, die ich dir hier gebe, aber diese werden wirklich typisch sein. So 400 für das Handy, 768 für das Tablet, und dann stehen Sie auf dem Desktop. Desktop ist ein bisschen anders, es ist das, wofür Sie entwerfen möchten, und ich gebe Ihnen, was ich tue. Gehen wir und machen Datei, Neu. Wir beginnen mit dem Desktop ist unser erstes Design, und Sie können sehen, ob wir ein Web haben. Wir haben hier viele verschiedene Größen. Es gibt Web, Minimum, große Größe, gemeinsam, Sie können jede von ihnen auswählen, es ist nicht wirklich wichtig. Was ich anfange, ist 1200 breit, hauptsächlich weil es durch unsere Gitter teilbar ist, über die wir ein wenig später lernen werden. Es ist immer noch eine gemeinsame Größe. Die Höhe wird sich viel ändern, wenn wir arbeiten, also werden wir sie in jeder Höhe belassen, die sie standardmäßig hat, und wir werden sie danach ändern, weil sie vom Inhalt abhängt. Orientierung wird Landschaft sein, und wir werden keine Klinge oder irgendetwas hinzufügen, und wir werden sicherstellen, dass seine RGB. Lassen Sie uns auf „Erstellen“ klicken. Großartig. Also das ist Seite 1, ich werde ein wenig herauszoomen, indem ich Befehl minus halte, es zoomt aus. Jetzt werde ich mich bewegen, indem ich die Leertaste gedrückt halte, klicke und ziehe. Wenn Sie also die Leertaste auf Ihrer Tastatur gedrückt halten, klicken Sie und ziehen Sie, oder Sie können diese kleinen Schieberegler verwenden. Ich habe diese erste und sie werden Zeichenfläche anstelle von Seiten genannt. Was ich jetzt tun muss, ist eine weitere Zeichenfläche für meine Tablet-Größe zu erstellen. Was ich tun werde, ist, dass es ein paar Möglichkeiten gibt, der einfachste Weg ist, hier oben zu sein. Es gibt eine, die das Zeichenflächenwerkzeug genannt wird, klicken Sie auf ihn. Das erlaubt mir, die Größe davon zu ändern, wenn ich will. Aber was ich tun werde, ist, dass ich diese kleine Option hier klicken werde , es heißt neue Zeichenfläche. Sie können sehen, dass mein Cursor mit einem Duplikat von diesem Kerl geladen wird. Sie können überall klicken. Es wird sagen, du gehst da. Ich werde mit meiner Leertaste rüber gleiten. Nun, wie groß sollte das Tablet sein? Wir werden die Breite und Höhe tun, nicht die x- und y-Koordinate, in diesem Fall sind wir auf der Breite und Höhe. Jetzt haben wir vorher darüber geredet. Wie breit wird es sein? Es wird 768 sein. Wie groß wird es sein? Es wird abhängig vom Inhalt sein. Wir werden es wahrscheinlich ein bisschen länger gestalten, aber wir machen uns im Moment keine Sorgen, also betonen Sie nicht, wie groß das ist. Ich werde es ein bisschen überlegen. Also ist es neben meinem Desktop, und jetzt werde ich meine mobile Version machen. Jetzt kann ich kein neues bekommen, aber das ist einfach, das hast du getan. Wenn Sie die Wahltaste auf Ihrem Mac oder die Alt-Taste auf Ihrem PC gedrückt halten und Sie sehen können, dass der Cursor zu diesem kleinen Doppelpfeil wechselt, bedeutet, dass er ihn dupliziert, und ich finde, das ist der einfachste Weg, um eine andere Version. Sie können die Alt-Taste halten und viele Versionen herausziehen. Ich will im Moment nur drei. Also werde ich meinen Desktop, mein Tablet und jetzt mein Handy haben. Meine mobile Version, wir haben vorher darüber gesprochen. Wir verwenden Breite. Die Breite wird in diesem Fall 400 betragen. Umfasst alle neuen iPhone-Versionen gibt es bis zu sieben jetzt, aber wer weiß, was es sein wird? Es gibt uns ein wenig Spielraum. Wenn es am Ende etwas Dummes wie 380 ist, müssen wir nicht zurückgehen und unsere Website für Mobilgeräte neu gestalten. Die Höhe wieder, es wird sich je nach Inhalt ändern. Es ist also viel dünner. Was wir tun werden, bevor wir uns davon wegziehen. Wir haben unsere Seiten erstellt, wir haben eine mobile Tablet- und Desktop-Version, lassen Sie uns sie nennen, und wir müssen Sie Zeichenflächen Tab finden. Wenn Sie es nicht finden können, gehen Sie zu Fenster und gehen Sie zu Zeichenflächen. Meine erste, Artboard 1, ich werde auf ihn doppelklicken, und dieser wird meinen Desktop genannt, und ich werde ihm einen Namen geben, damit jeder weiß, dass ich 1200 Pixel verwende. Es ändert nichts, es ist nur ein Etikett. Artboard 2 ist mein Tablet und 768 Pixel breit, und mein Handy wird 400 Pixel sein. Großartig. Ich werde verkleinern. Denken Sie daran, Command Minus oder Control Minus auf einem PC, Leertaste zu bewegen. Wir kommen dorthin. Wir werden es speichern, Datei, Speichern. Jetzt für diesen Kurs werde ich alles auf meinem Desktop setzen, ich werde einen neuen Ordner erstellen, und das wird mein Dan's Portfolio sein, und ich werde ihm V1 geben. Eigentlich bemerken Sie den Ordnernamen, also nennen wir es Dans Portfolio zu erstellen, und jetzt der eigentliche Name davon, also wird dies Dans Portfolio genannt. Gib ihm deinen Namen, denn wir werden dir einen bauen, während wir mitmachen und ihm V1 geben. Es braucht eine Versionsnummer, kann Zahlen oder Buchstaben sein, nennen Sie es nie endgültig. Finale ist der Kuss des Todes. Sie haben wahrscheinlich Dateien namens final 2, final revisited, final new, also nur V1 und Sie werden mit vielen verschiedenen Versionen enden. Lassen Sie uns auf „Speichern“ klicken. Lassen Sie alles standardmäßig hier, und klicken Sie auf „OK“. Dass meine Freunde ist, wie man die Größen auswählt und Ihre ersten Zeichenflächen für unser Design kreiert. 10. Was ist ein Rastersystem und dynamisches Design für Mobilgeräte und Tablets: Hey, da. In diesem Video werden wir über Grid-Systeme und Responsive Webdesign sprechen. Wenn die Leute also über reaktionsschnell sprechen, bedeutet alles, dass ich eine Website entwerfen werde , die auf das unterschiedliche Gerät reagiert, das ich verwende. So könnte es sein, dass, wenn ich sehe, sagen, diese Website hier, meine Website, bringyourownlaptop.com auf einem Desktop, es sieht so aus. Aber wenn es auf eine mobile Größe kommt, sagen Sie so etwas, Sie können sehen, dass Website ändert sich am besten die Bildschirmfläche oder die Bildschirmgröße für diese Ansicht verwenden . Sie können sehen, dass sich diese Typen ein bisschen verändert haben. Diese gehen nebeneinander, aber wenn sie auf dem Desktop sind, gibt es vier hintereinander statt zwei hintereinander. Wenn es auf Mobilgeräte kommt, ändert es sich sogar wieder. Die große Veränderung ist auf dem Handy. Ich habe beschlossen, dass dieses große Bild oben, dieser smiley hübsche Mann hier verschwindet. Er ist auf dem Handy nicht nützlich. Ich laufe auf einem Bildschirm Immobilien. Also komme ich direkt zu den Grundlagen und benutze hier ein paar Nägel. Also, das ist übereinander in einer Spalte gestapelt, aber Tablet, es ist um zwei und wenn es auf dem Desktop ist, ist es vier. So können diese Anpassungen am besten die Bildschirmgröße verwenden, ist das, was als responsive Web-Design bezeichnet wird. Was wir also tun, wenn wir den Illustrator verwenden , ist, dass wir für diese drei Ansichten entwerfen müssen. So dass, wenn die Website wird entweder von Ihnen selbst oder von Entwickler gebaut, sie wissen, was sie brauchen, um die Größe auf alle ihre Website anpassen , um wie auf diese verschiedenen Bildschirmgrößen aussehen. Nun ist das nächste, was man sich ansehen muss, was ein Gittersystem ist. Denn das ist die häufigste Art, diese Website aufzuteilen, ist, was passiert ist, dass es ein zugrunde liegendes 12-Spalten-Raster gibt, das entlang aller Webseiten läuft, und so teilen Sie den Inhalt auf. Was passiert ist, ist es sehr ähnlich, wenn Sie im elterlichen Magazin-Design sind, ein 12-Säulen-Raster auf einer Zeitung verwendet wird, um Ihnen zu helfen, Konsistenz über viele Seiten zu erhalten. Es ist das gleiche hier im Webdesign. Der einfachste Weg, es zu sehen, ist in unserer endgültigen Version. Das ist also unser endgültiges Design. Es gibt die Desktop-Version, Fernseher und Handy. Was am Ende passiert, ist dies zu beobachten, wenn ich die Gitter einschalte, die ich habe, können Sie sehen, dass ich den Desktop geteilt habe, indem ich sogar sicherstellen, dass ich diese 12 Spalten im Auge behalten habe. Ich würde es nicht auf halbem Weg durch hier oder auf halbem Weg durch diese Spalte haben, sie alle erstrecken sich auf gleich 12. Also dieser Typ hier ist vier von ihnen. Also 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, alle addieren bis zu 12 Ich hoffe. Meine Mathematik ist schlecht. Aber es bedeutet, dass dieser Typ an der Spitze hier, diese Linie tatsächlich alle 12 überspannt, und das ist in Ordnung. Diese Typen hier oben müssen ein bisschen angepasst werden. Mein Entwurf, sie überspannen diese beiden Säulen hier. Ich muss sie etwas besser aufstellen, und dieser Kerl hier, er überspannt die ganze Sache, weil hier nichts ist. Schauen wir uns an, was wir getan haben, und gestalten Sie das Tablet neu. Nun, was wir tun, ist, dass ich 12 Spalten hier reinlegen könnte, aber Sie können sich vorstellen, wenn ich 12 dieser Spalten bis hierher komprimiere, obwohl das technisch alles etwas schwieriger wird, mit Hunderten von Linien quer zu entwerfen, es wird noch schlimmer, wenn es auf Handy kommt. Sie können sehen, was ich getan habe und was Sie als Designer tun werden, ist, ich nicht alle 12 brauche. Diese endliche Anpassung ist zu viel für mich. Sie könnten es mögen und Sie können Ihre 12 Spalten behalten. Ich habe gerade sechs hier gesteckt, also 1, 2, 3, 4, 5, 6 und ich habe sie gleichmäßig aufgeteilt. Also gibt es dieses eine erstreckt sich über drei, das eine erstreckt sich über drei. So ist es immer noch teilbar durch 12. Sie können sehen, dass dies wie die Hälfte davon umfasst, das wäre sechs und das wäre sechs. Also verwenden wir immer noch das 12-Säulen-Raster. Aber einfach visuell ist es zu schwer, so viele von ihnen zu sehen. Was wir hier entschieden haben ist, dass ich die Gitter ausschalten werde, ist, wie ich möchte, dass es aussieht, wenn es auf einem Tablet-Gerät. Wenn es auf einem Handy erledigt wird, möchte ich es erneut ändern. Also haben wir es in diesem etwas geändert, die Navigation hat sich hier unten geändert, und wir haben so ziemlich den ganzen Weg nach unten benutzt. Wir haben die komplette Breite verwendet, die die ganzen 12 Spalten sind. Ich möchte die Gitter wieder einschalten. Wenn ich von Handy aus arbeite, beschäftige ich mich oft nur mit zwei Spalten. Also, das sind sechs auf der Seite, sechs auf der Seite. Ich habe nur zwei benutzt, um es ein wenig einfacher zu machen. Sie können 12 dort setzen, aber es wird ein echter Kopfschmerz, um die Dinge aufzurichten. Das ist also das Grid-System und das ist, wie Webdesigner auf der anderen Seite, teilen Sie Ihre Inhalte auf. Sie können nicht 13 machen, weil es wirklich schwer ist, die Mitte zu teilen, weil es eine ungerade Zahl ist. Also sogar Zahlen, die meiste Zeit ist es 12 Spalten. Schauen wir uns im nächsten Video an, wie Sie diese Spalten erstellen können, damit Sie sie entwerfen können. 11. So erstellst du ein dynamisches 12-Spaltenraster in Illustrator: Hallo wundervolle Leute. Was wir in diesem tun werden, ist, dass wir diese Leitfäden tatsächlich zu unseren Ansichten hinzufügen , damit wir dieses schöne 12-Säulen-Raster verwenden können und mit unserem Design beginnen können. Lass uns gehen und es tun. Jetzt werden wir unsere Gitter erstellen, bevor Sie es tun, wenn Sie das App-Board bewegen, kommen die Gitter nicht einfach für die Fahrt. Lass sie einfach so anlegen, wie du willst. Es spielt keine Rolle, wie Sie Ihre App-Boards haben, aber ich werde meine auf diese Weise ausrichten, vielleicht ein bisschen näher. Jetzt verschiebe ich es auch mit dem App-Board. Es ist dieser Typ unten bewegt Ihre Seiten um. Das erste, was wir tun müssen, ist unser Rechteck-Werkzeug zu greifen, klicken Sie auf diesen Kerl hier. Sie könnten auf dem Kreiswerkzeug oder abgerundeten Rechteck-Werkzeug unter dem Rechteck-Werkzeug stecken bleiben . In Bezug auf die Größen möchte ich entweder eine weiße Füllung oder keine Füllung. Das ist die Mitte der Box und das ist die Linie um die Außenseite und ich möchte, dass dies alles andere als etwas ist, das wir auf einem weißen Hintergrund sehen können, also Schwarz funktioniert für mich. Ich werde auf „Halten und Ziehen“ klicken, und Sie können sehen, meine versucht, zu schnappen. Sie können sehen, es ist klar, dass das kleine Wort sein Intersect ist. Wenn Ihr nicht an ihm rastet, gehen Sie zu Ansicht, und aktivieren Sie dieses Ding namens Smart Guides oder Befehl U auf einem Mac oder Control U auf einem PC. Es ist eine wirklich praktische zu verwenden, vor allem in diesem Stadium. Ich werde ein wenig hineinzoomen, erinnere mich an Befehl Minus oder Control Minus und ich werde eine Box über die ganze Sache zeichnen. Es ist ein bisschen wie ein Faff, ein bisschen. Wir haben eine große Kiste, und jetzt werden wir sie in Spalten aufteilen. Wir finden das unter Objekt und dann unten unter Pfad, und dann gibt es eine, die sagt aufgeteilt in Raster, und diese lustige Box Peers, wir wollen keine Zeilen, wir wollen Spalten, die Höhen und Tiefen. Wir werden es auf 12 setzen und in Bezug auf die Breite wir uns keine Sorgen darüber, worum wir uns Sorgen machen, ist die Rinne. Die Säulen, die Sie dort am Anfang gesehen haben, gibt es Lücken zwischen ihnen, und es gibt eine wirklich gemeinsame Größe für sie. Möglicherweise müssen Sie sich an den Entwickler oder das CMS wenden, das Sie verwenden. Die meiste Zeit ist die Rinne zwischen ihnen auf jeder Seite der Spalte 15 Pixel. Das ist auf beiden Seiten, wenn sie nebeneinander sind, summieren sie sich bis zu 30. Ihre Dachrinne ist auf 30 Pixel eingestellt und wir werden auf „12" klicken und sicherstellen, dass Sie Hilfslinien hinzufügen aktivieren. Ich werde in der Vorschau zeigen, damit Sie sehen können, wovon wir reden. Das wäre einfacher gewesen. Sie können sehen, ich habe 15 Pixel und dann 15 Pixel auf beiden Seiten dieser Spalten, zusammen machen sie 30. Lassen Sie uns auf „OK“ klicken. Was ich jetzt tun möchte, ist, was ich wirklich möchte, dass ich meinen schwarzen Pfeil, mein Auswahlwerkzeug, und ich klicke auf diese Hilfslinien, die erstellt wurden, dann werde ich mit der rechten Maustaste darauf klicken und zu Gruppierung aufheben gehen. Ich will diese horizontale nicht, ich möchte nur, dass die Spalte nicht diese Zeilen hier ist. Was wir jetzt tun können, ist, dass wir durchmachen können Eigentlich werde ich diese Typen hier auswählen. Wenn Sie Illustrator verwendet haben, bevor Sie denken, großartig sind sie Führer. Sie sind wie physische Linien, die auf dem Ding sind, verwenden diese Führer. Was ich jetzt tun muss, ist, dass ich sie absenken werde, nur damit sie nach oben schnappen. Sie stochen hier unten und ich werde sie nach unten ausstrecken. Ich habe sie alle ausgewählt. Der einfachste Weg, sie alle auszuwählen, wenn Sie neu sind, Black Arrow, wählen Sie alle nur die kleinen Spitzen von ihnen, weil wir die Gruppierung aufgehoben haben, es ist diese Jungs hinter sich gelassen. Ich werde sie ziehen, um oben zu messen, dann unten unten hier, werde ich nach unten scrollen, und ich werde das ziemlich weit nach unten ziehen. Ich habe keine Ahnung, wie lange diese Seite sein wird und es ist einfacher, es hier zu tun, wenn ich sie nach unten ziehe. Ich habe all die erledigt, ich habe sie noch ausgewählt. Mach dir keine Sorgen, dass man dunkler ist als die anderen. Ich habe zufällig darauf geklickt, immer noch zur Arbeit und wir gehen runter, um zu sehen. Wir gehen zu Guides. Es gibt einen hier, der „Führer machen“ sagt. Ich weiß, dass wir das schon getan haben, keine Sorge. Das sind jetzt wirklich richtige Führer. Was Ich jetzt tun kann, ist, Ich kann zu Meine Ansicht gehen und Ich kann zu Guides gehen. Ihre ist möglicherweise standardmäßig bereits gesperrt. Wenn hier Aufheben von Hilfslinien angezeigt wird, klicken Sie nicht darauf. Aber deine ist wahrscheinlich wie meine und sagt Lock Guides, was bedeutet, dass ich sie jetzt nicht bewegen kann. Ich konnte sie schnappen, aber jetzt kann ich es nicht. Nun, all dieser Müll, den das hier zurückgelassen wird, gibt es einiges davon. Vergangen. So verwandeln Sie es in ein 12-Säulen-Raster. Du könntest zurückspulen und dieses Ding ein paar Mal durchspielen, tat es für mich, als ich anfing, es zu tun, also schwitzen Sie es nicht. So richten Sie Ihre Spalten ein. Nun, was wir auch tun werden, ist, weil ich es hasse, hier bis an diesen Rand zu entwerfen. Was ich mache, ist, dass ich mein Whiteboard schnappe, wie ich es ein wenig ausdehne, nur damit ich einen Spielbereich habe. Es bedeutet nur, dass es schwieriger ist, innerhalb dieser kleinen Box zu entwerfen, und Sie sind so gemeint, dass es alles bis zu diesem Alter kollidiert und es sieht einfach nicht richtig aus. Ich zeige dir, wie es hier aussieht. Sie können hier sehen, ich habe diesen Bereich hier und es ist Leerzeichen. Ich weiß, es ist nicht immer da, aber es ist oft da. Ich habe es als Designer erweitert, nur damit ich einige zusätzliche Bits sehen kann. Ich weiß, dass die Breite zwischen diesen beiden Führungen 1200 ist, was perfekt ist und ein kleiner schneller Tipp für dich ist, wenn du das herausziehst, sag diesen Kerl links rechts hier, wenn ich meine Wahltaste auf dem Mac gedrückt halte, nun, die Alt-Taste auf einem PC, können Sie sehen, es gibt beide Seiten, gibt mir nur ein wenig Wackelraum. Obwohl ich gesagt habe, dass Sie sie nicht bewegen, werden wir sie mitbringen. Es gibt hier keine Führer, also sind wir okay. Es ist steif und wiederholen Sie für den Rest von ihnen. Wir machen das nächste für Tablet und wir werden das zusammen machen. Ich werde es rausziehen, wir machen es ein bisschen schneller, wir gehen zu Object. Wir werden den Pfad bekommen, wir gehen nach Split Into Grids und ich werde sagen, lass uns 12 von diesen Jungs machen. Ich habe früher darüber gesprochen, 12 ist einfach zu viele, also habe ich es auf sechs reduziert, weil es durch 12 teilbar ist. Du kannst 12 reinlegen, ich mag sechs, um es abzuschneiden. Die Gosse zwischen diesen Jungs wird immer noch 30 sein und ich werde auf „Okay“ klicken. Nein, ich werde sagen, „Guides machen“. Ich klicke auf „Okay“, und ich habe das. Wissen Sie, was wir tun werden, ist, dass ich sie auswähle. Ich werde mit der rechten Maustaste auf sie klicken und sagen, Gruppierung aufheben, und ich werde nur auf die kippigen Spitzen zu diesen Jungs klicken, und ich werde sie laden und dann werde ich sagen, Ansicht , ich gehe zu Führungen, ich werde sagen Machen Sie Guides, und ich muss nicht gehen und sie wieder sperren, sie sind alle standardmäßig gesperrt. Es ist, als ob Sie insgesamt bestimmte Jungs nicht sperren, Sie sperren die alle Führungen auf allen Seiten. Wenn ich jetzt zu Guides gehe, können Sie sehen, dass ich sie freischalten kann, aber ich kann sie nicht sperren, weil sie bereits gesperrt sind. Ich kann das ganze Zeug auf Wiedersehen auswählen. Schnappen Sie sich das App-Board-Tool, halten Sie Ihre Alt-Taste auf dem PC, oder Wahltaste auf dem Mac ziehen Sie die Seiten heraus, nur geben Sie mir ein wenig wie ein Spielzimmer und wir gehen, um die nächste zu tun. Nun, ich möchte, dass du losgehst und den nächsten alleine machst. Sie können das Video pausieren und sehen, dass Sie es einen Riss geben können. Ich werde es hier tun und Sie können schnell zum nächsten Film vorwärts, wenn Sie die Idee haben. Ich habe dieses ausgewählt, es muss nicht wirklich auf den Grund gehen. Das ist meine OCD und denken Sie daran, wir gehen zu einem Objekt und wir gehen auf den Pfad, und wir gehen runter, um in Raster zu teilen. In diesem Fall werden wir nur zwei benutzen. Ich könnte vier setzen, wenn du es vorziehst, wenn du ein paar coole Dinge hier auf dem Handy machen willst, bin ich es nicht. Ich werde die Gosse in 30 setzen. Ich denke immer weiter, okay, du wirst es auch tun. Stellen Sie sicher, dass Sie auf „Hilfslinien hinzufügen“ klicken. Vergessen Sie das jedes Mal, klicken Sie auf „OK“. Wir haben unsere 10 Leitfäden, wir werden sie auswählen, mit der rechten Maustaste darauf klicken. Ich benutze meinen schwarzen Pfeil. Wechseln Sie zu Gruppierung aufheben. Ich werde nur die Tippy Tops zu ihnen auswählen, einen von ihnen zu schnappen und ihn nach unten ziehen. Es richtet sich an der Spitze. Großartig. Jetzt werde ich sie ein wenig länger machen. Ich muss für diese Jungs tun, dafür werde ich später bezahlen. Es ist in Ordnung. Ziehen Sie das nach unten. Jetzt gehen wir zu Ansicht, wir gehen zu Guides, und wir gehen zu Make Guides und dann ist es bereits gesperrt, so dass wir all diesen Müll greifen können, der übrig ist, drücken Sie „Löschen“ und wir haben jetzt ein 12-Säulen-Raster über alle, dass wir genau nach unten sechs und zwei auf diese hier. Ich werde das App-Board-Tool dazu verwenden, und gehe einfach ein wenig aus. Ich werde „Speichern“ drücken. In Ordnung, Jungs? Und so erstellen Sie ein 12-spaltiges Raster in Illustrator. Wenn du faul bist wie ich, würdest du eine Vorlage herunterladen und es wird genau hier sein. Ich lasse das in den Übungsdateien. Ich werde es 12-Säulen-Raster in Illustrator, Vorlage oder so etwas nennen . Es wird da drin sein. Du kannst das einfach öffnen und mit diesem fortfahren. 12. So erstellst du einen unpräzises handgezeichnetes Rastermodell: In diesem Video werden wir uns mit Wireframes beschäftigen, aber wir werden einige Low Fidelity handgezeichnet machen. Ich fange immer damit an, ich zeichne es in mein Buch und fange an, so zu arbeiten. Oft, wenn es meine eigene Arbeit ist, komme ich nicht weiter als das. Ich verspotte keine schönen in Illustrator, weil es keinen Sinn hat, es gibt niemanden zu beeindrucken, außer mir selbst, und es ist ein bisschen Idee ist Wireframing, und ich arbeite von denen. Aber wenn Sie es an die Kunden schicken wollen, wäre es seltsam, sich mit nur handgezeichneten auszutauschen. Sie wollen es ein wenig Sex mit Illustrator machen, um Ihre Wireframes wirklich gut aussehen zu lassen. Lassen Sie mich Ihnen zeigen, wie ich es mit meinen nur handgezeichneten machen , zuerst und dann das nächste Video, das wir Illustrator machen werden. In Bezug auf die Wireframes ist dies die Ebene, die wir betrachten. Das ist ein Drahtmodell. Werfen wir einen Blick auf einige andere Wireframes und andere Dinge. Aber Sie können das Niveau von ihnen sehen, es ist nur, um Ideen runter zu bringen. Manchmal habe ich ein bisschen mehr Sorgfalt in sie gelegt, aber nicht viel. Es gibt solche, die ich mag, es ist jetzt auf dieser Ebene. Würde ich das an den Kunden liefern? Angenommen, ich schaue in einem Prozess, in dem ich als dieser UX-Berater angestellt wurde und ich mit Wireframing eingehe, würde ich ein wenig mehr Mühe machen, nicht eine riesige Menge, denn was ich nicht tun möchte, ist, ich Diskussionen wo Board in Photoshop Mockups, und es ist die Zeit, über grundlegende Funktionen und Layout zu sprechen, wo Leute begonnen haben, die Auswahl von Farben und Kommissionierung Schriftarten oder was ich nicht mag. Wir können es nicht so nennen, also halten Sie die Sprache draußen, verwenden Sie Lorem ipsum, verwenden Sie zerquetschige Zecken Valin, lassen Sie uns einen wirklich guten Sinn dafür bekommen, aber ohne in zu viel Detail zu geraten. Wenn du super-speziell bist, erhältst du vielleicht ein bisschen Farbe. Nun, schauen Sie, Hervorhebung, aber das war's. Das sind meine Wireframes, und das funktioniert für mich wirklich in Bezug auf Ideen. Die andere Sache ist, dass sie nicht nur einen Wireframe machen, Sie gehen zu Ihrer Featureliste, und Sie beginnen, sie hier hinzuzufügen, machen Sie nicht nur einen Wireframe, ich finde, ich muss fünf machen. Selbst wenn dein erster, du das machst, das war cool, dann der zweite, dann der dritte und der vierte, und es ist nicht, bis du ein paar durchmachst dass du tatsächlich ein paar Bugs ausarbeitest, weil du könnte hierher kommen, das ist großartig. Du zwingst dich, einen zweiten zu machen, weißt du, dass es Mist ist, denn das war der gute. Dann machst du die dritte und du sagst : „Ich durchmache den Prozess.“ Aber ich weiß oft, wenn ich alle fünf mache und ich mich dazu zwinge, Nummer 3 ist der Gewinner. Wenn Sie in Nummer 2 gestoppt hätten, hätten Sie nie dieses erstaunliche Layout für Nummer 3 bekommen, also zwingen Sie sich, durch zu gehen und etwas mehr als nur ein Layout zu tun. 13. So erstellst du ein präzises Rastermodell in Illustrator: In diesem Video machen wir dies zu einem Drahtmodell. Es ist ein Drahtmodell. Es ist auch nur graue Kästen und irgendeine Art. Schön und einfach. Lasst uns dran kommen. Beginnen wir mit dem Bau eines Drahtmodells. Es ist ganz wie unsere Sitemap, wir haben gerade viele Rechtecke und einen Typ. Es wird ein paar Tricks und Tipps geben. Aber wenn Sie schon ziemlich zuversichtlich sind mit illustrierten, möchten Sie vielleicht diesen überspringen, aber okay, also zuerst werde ich ein Rechteck-Werkzeug greifen. Und ich werde damit anfangen, wir könnten einfach weiße Kästchen benutzen, okay. Ich benutze gerne nur ein wenig Grau in der Box okay, und ein schwarzer Strich sind auf der Außenseite mit einem Pixel. Und es bedeutet nur, dass ich die Box zeichnen werde, die mein Logo repräsentieren wird. Ich mag diese Art von off-white, nur um es irgendwie einfach und klar mit den verschiedenen Elementen zu machen. Okay, jetzt in Bezug auf Elemente, um Menschen zu beeindrucken, wenn Sie bei Ihrem Treffen sind, nennen Sie es „Seite Möbel“ und halten Sie ein gerades Gesicht. Ok. Es ist eine Art Name für diese Art von Dingen. Ok. Dass die [unhörbar] auf der Seite. Ok. Irgendwie aus dem Druck gestohlen, aber es beeindruckt die Menschen. Du klingst, als wärst du im Geschäft. Okay, die andere Sache ist, versuchen Sie nicht, so weit weg zu entwerfen. Ich werde um 50% verkleinern, okay, nur damit ich die verschiedenen Außenbordwände sehen kann, aber du willst dieses Ding entwerfen oder es zumindest in der tatsächlichen Größe verspotten, okay. Also, wie es auf einer tatsächlichen Website aussehen wird, die nicht irgendwie vergrößert oder verkleinert zu weit, weil Sie gehen, um einige schlechte Entscheidungen in Bezug auf Design zu treffen. Um es zu tun, drücken Sie „Command One“, oder „Control One“ auf einem PC, oder der lange Weg, „View“, und es gibt eine auf hier sagt „Tatsächliche Größe“. So wird es auf einer tatsächlichen Website aussehen. Also habe ich das Gefühl, dass dieses Logo jetzt ein bisschen zu groß ist. Ok. Und Sie müssen sicherstellen, dass, wenn Sie diese Felder ziehen , dass Sie es innerhalb der Spalten tun. Versuchen Sie nicht, das zu tun. Ok. Wo es eine dieser Dachrinnen überspannt. Ok. Es muss sich an der Kante einer dieser Säulen ausrichten und kann nicht über eine der Dachrinnen gehen. Okay, also Spalte zu Spalte, und ich werde ein bisschen Typ hinzufügen, nur um anzuzeigen, dass dies, Ich werde einmal hier unten klicken und Logo eingeben. Okay, Schriftgrößen. Es spielt keine Rolle. Sechzehn Pixel sind etwa 12 Punkte im wirklichen Leben. Also, wenn du das ausdrucken musst, okay, es ist nett und berechtigt. Und ja, ich werde anfangen, das herauszuziehen. Ich werde diesen Kerl kopieren und einfügen, indem Sie beide auswählen „Shift“ halten und dann „Kopieren“ und „Einfügen“ gehen. Das ist es, es kopieren und einfügen oder „Control V“, „Control C“. Und ich werde das zu meiner Navigation machen, okay, aber nicht in den Spalten. Ok. Und in Bezug auf den Text hier. Ich ziehe es einfach rüber. Kann ein wenig schwer sein, diesen Text zu ziehen, vor allem, wenn Sie ein wenig verkleinert sind, beobachten Sie dies, Sie am Ende irgendwie wie ziehen Sie die Ränder davon. Je mehr Sie vergrößern, desto einfacher ist es, Dinge zu bewegen. Oder Sie können einfach Ihre Pfeiltasten auf Ihrer Tastatur verwenden, wenn Sie „Shift“ halten, während Sie zeichnen, ich verwende die Pfeiltasten auf der Tastatur, so wie es in großen Brocken tut. Also werde ich eins in die Mitte stecken. Und tatsächlich lassen Sie mich den Text ändern. Und ich werde es ein bisschen rüber stoßen. Zurück zu „Command One“ auf meinem Mac oder „Control One“ auf Ihrem PC, „Tatsächliche Größe“. Nun, manchmal ist es wirklich schwer, mit all diesen Spalten auch zu sehen. Es gibt also eine wirklich schöne Abkürzung, um die Spalten ein- und auszuschalten. Der lange Weg ist unter der „Ansicht“. Und das hier ist eine und „Guides“, okay, und „Hohe Führer“. Okay, aber Sie können hier sehen, das ist der Shortcut-Befehl und das Semikolon oder Steuersemikolon auf einem PC. Ich gehe nur an, ich halte den Befehl gedrückt und tippe nur das Semikolon ein. Ich benutze das die ganze Zeit, wenn ich Ursache wie Notwendigkeit entwerfe, es auszurichten, es zu sehen und Sie es ordentlich aufstellen, um es zu sehen. Gut. nächste Teil wird eine schöne große, was man eine Heldenbox nennt. Okay, also werde ich mein Rechteck-Werkzeug hier packen, all meine Farben und Dinge auswählen, okay, also off-white schwarz auf der Außenseite ein Pixel. Und ich werde herauszeichnen, was man als Heldenboxen nennt, diese Art von großer Platte in der Mitte. Manchmal dreht es sich. Ok. Aber es ist die große Art wie: „Hey, das sind wir, das ist, was wir tun und begrüßen“. Okay, das ist also diese Box und ich werde ein bisschen Typ hinzufügen. Und dieser Fall, was ich zuvor getan habe, ist der Klick einmal und tippte „OK“ und es tippt auf für immer. Okay, was ich will, ist, was man eine Box mit fester Breite nennt. Also werde ich das mit dem „Löschen“ auf meiner Tastatur löschen. Ok. Und was ich tun werde, ist mein Typwerkzeug wieder zu schnappen, das ist dieser Typ hier, okay, die Hauptstadt T und ich werde sicherstellen, dass ich auf dieser Seite meiner Kolumne beginne. Und ich werde klicken und ziehen. Und wenn Sie eine Box herausziehen, bedeutet das, dass es wie eine feste Breite nur bedeutet, wie sehen, dass es irgendwie bis zum Rand knallt und dann wieder herumschleifen wird. Nun ist dieser Text viel zu klein. Ich will das wie groß, wie inspirierend kommen, um mit uns zu arbeiten, und wir werden dort hinstellen. Und ich werde nur die Dateigröße erhöhen, tut mir leid, die Schriftgröße auf etwas ziemlich Großes. Okay, eine coole kleine Abkürzung ist mit allem ausgewählt, wie es hier ist. Halten Sie die „Befehlshalt“ -Taste gedrückt und tippen Sie auf die vollständige Stopp-Taste. Okay, also „Control Shift“ auf einem PC und geben Sie die Full-Stop-Taste auf der Tastatur ein. Okay und es macht es einfach schön und groß. Und Doppelpunkt, tut mir leid, Komma macht es kleiner. Also oben, sie sind irgendwie neben jedem, oben und unten. Etwas, das so aussieht. Wenn du Bindestriche hasst, wie ich, so wie jeder. Ok. Sie können tun, ist wählen Sie alles. Also habe ich dreifach darauf geklickt und es hat alles ausgewählt. Und Sie können hier zu Ihrem Absatz-Tab gehen und die Silbentrennung abstimmen. Verschwinde die Silbentrennung. Und ich werde wahrscheinlich einen Dreifachklick darauf machen müssen und meine Schriftart ein wenig kleiner machen, also sitzt sie da drin. Und ich schnappe meinen schwarzen Pfeil, hebe diese Kiste hoch, nur zu einer Art, das ist, was ich will. Das nächste, was ich will, ist, es hier unten einen Call-to-Action-Button gibt. Warum es da hingeht, weiß ich nicht. Es ist Stil geworden, dass Sie große inspirierende Zitate brauchen, die Sie definieren. Und dann brauchst du einen Knopf darunter, okay, das ist dein Call-to-Action, wie: „Komm, kaufe dieses Ding oder kontaktiere mich oder so etwas wie [unhörbar]“. Also gibt es meinen Knopf und Sie können sehen, wie meins irgendwie in der schwarzen Mitte kommen, aber kein Zucker auf der Außenseite. Ich wollte wie die restlichen Knöpfe sein. Was Sie also tun können, ist, dass Sie mit dem „Pipettenwerkzeug“ beginnen können. Also habe ich das mit dem „Pipettenwerkzeug“ gezeichnet. Okay, weil es ausgewählt ist, und ich klicke auf diesen Kerl und du sagst , er wird das Styling von diesem Kerl stehlen. Okay, diese Navigation oben. Also werde ich darauf klicken, mein Logo schnappen, kopieren und einfügen. Und du wirst meine Zeitschrift „Action“ sein. Ich würde wahrscheinlich kein Magazin drauf setzen, wenn du es einem Kunden schickst. Ich bin sehr professionell in allem. Das nächste, was ich tun möchte, ist, dass ich hier unten ein paar Thumbnails einfügen möchte. Ich werde drei von ihnen setzen, okay, und sie werden jeweils vier Spalten überspannen, okay, um die 12 zu bilden. Aber die Unterseite der Seiten steckte hier unten. Also werde ich das Rechteck nehmen, tut mir leid, das Zeichenflächenwerkzeug. Okay, und ich werde ein wenig hinauszoomen, damit ich alles sehen kann, ziemlich weit raus. Und ich werde es ein bisschen größer machen. Also werde ich nur den Boden greifen. Du kannst es schaffen, solange du weißt, ich mache es oft wirklich lange. Und wenn Sie fertig sind, ziehen Sie es nach oben, anstatt es weiterhin Lasten nach unten verschieben zu müssen. Okay, zurück, um eins zu befehlen, um auf die richtige Größe zu kommen, das bist du da. Also Rechteck-Werkzeug, ich werde eine Füllung von meinem Off-White haben. Ich werde es haben. Ich habe das ausgewählt. Kannst du mein Häkchen sehen, als ich das geändert habe? Ok. Und es bedeutet, dass es meine Zecken geändert hat, um diese off-white Farbe zu haben, also ist es da, aber es ist die falsche Farbe. also nicht. Es hatte „Rückgängig“. Okay, ich werde nichts ausgesucht haben. Schwarzer Pfeil auf den Hintergrund klicken, fertig. Okay, schnappen Sie sich mein Rechteck-Werkzeug. Und ich werde etwas in etwa dieser Größe herausziehen. Es wird volle Spalten ausgeben. Okay, [unhörbar] perfekt. Nun, um anzuzeigen, dass es nicht wie, das ist eine Schaltfläche, irgendwie um anzuzeigen, dass es ein Bild ist. Die Leute haben ein Kreuz hindurchgesetzt. Oder sie verwenden diese spezielle Bildgröße. Du kannst es da drüben sehen, diese Art von Landschaft, die du aussiehst. Was wir also tun werden, ist das Liniensegment-Tool zu greifen und wir werden das zeichnen. Jetzt könnte ich anfangen, das hier über zu ziehen, aber ich werde den Winkel nicht richtig bekommen, also ist es einfacher, den schwarzen Pfeil zu greifen, abzuklicken, sicherzustellen, dass gerade dieser Kerl ausgewählt wurde. Ich werde gehen, um zu bearbeiten, kopieren Sie es, einfügen, und oben oben hier können wir gehen zu „Objekt“, „Transform“ diese sie genannt „Reflect“. Ich werde horizontal verwenden, klicken Sie auf „OK“, und es ist einfach irgendwie umgedreht es jetzt, ich werde es nur in der Nähe davon blockieren. Nicht zu sehr besorgt, weil ich alle drei auswählen werde. Und es gibt einen hier oben, der sagt, horizontal und vertikal ausrichten. Richten Sie meine Rechteck-Sicherung aus. Ich werde sie gruppieren und dann zu „Objekt“ der obersten Kopfgruppe gehen. Und ich werde die „Alt“ -Taste gedrückt halten und klicken und eine herausziehen. Und es macht es irgendwie duplizieren, während wir ziehen. Halten Sie also „Alt“ gedrückt und Sie werden feststellen, dass, wenn Sie „Alt“ halten, es sich nur irgendwie bewegt und oft aufgereiht. Sie können es zwingen, während Sie ziehen. Also halte ich „Alt“. Sie können auch „Shift“ halten. Und es macht einfach alles aufgereiht, gerade nach oben und unten. Großartig. Und so viel Zeit habe ich gerade diese Kreuze gemacht, die Leute mögen es. Sie können diese Grafik hier mit dem Licht sehen, das ist irgendwie wie ein universelles „Ich bin ein Bild“. Okay, Sie können diese zusätzliche Komplexität hinzufügen. Es gibt kein wirkliches Drama dafür. Sie könnten es mögen, und Sie verwenden einfach das Liniensegment-Tool und fangen an, Berge zu zeichnen, okay? Sie können die Strichbreite entsprechend erhöhen. Und wenn Sie nach dem Ellipsenwerkzeug suchen, ist es direkt unter dem Rechteck-Werkzeug hier. Und Sie können Ihre eigene Version davon verspotten. In Ordnung, also habe ich meine Bilder. Was ich jetzt tun möchte, ist, dass ich ein paar Dinge erledigen möchte. Dies ist, wo Sie vielleicht überspringen, weil es nur ein wenig repetitiv sein wird. Und was ich eigentlich tun werde, ist, dass ich wahrscheinlich dieses Video jetzt stoppen werde. Und das nächste Video können Sie überspringen, weil, es ist mir nur das Ausfüllen und ich werde die Tablet-Version als auch ausrichten. Ja, ich werde nicht super aufregend sein, aber dann sehe ich dich im nächsten Video oder im Video danach. 14. So erstellst du Rastermodelle für Tablets und Mobilgerähte: Schöne Leute, das ist, was wir in diesem Tutorial bauen werden. Wir werden diese Spitze beenden, die Tablet- und mobile Versionen unseres Wireframes erstellen . Ich werde nicht beleidigt sein, wenn Sie einfach zum nächsten Video springen weil es buchstäblich nur dasselbe tut, aber an einem anderen Raster arbeitet. Lernen wir mehr Haufen? Wir lernen hier, wie man eine gestreifte Linie macht. Wenn du für eine gestreifte Linie herumhängen willst, lass uns hineingehen. Wir müssen unsere Desktop-Ansicht beenden, also werden wir nur noch eine Reihe von Bildern hinzufügen. Ich wähle alle drei dieser Typen aus. Halten Sie meine Alt-Taste gedrückt, ziehen Sie sie nach unten, nett. Wir werden in einigen sozialen Symbolen auf der Unterseite hinzufügen, also mein Rechteck-Werkzeug, da ist es. Es wird keine Füllung haben, [unhörbar] weiße Füllung und einen schwarzen Strich, und meine sozialen Symbole werden hinübergreifen, nicht genau sicher. Aber das wird meine sozialen Symbole sein. Ergreifen Sie diese Kopie nur so, dass die Schriftarten genau gleich sind. Wie ich schon sagte, wie man schnappt, wenn man auf bestimmten Ebenen ist, muss man das direkt in der Mitte packen. Das wird mein soziales Symbol sein. Sozial, ich kann sozial nicht gut buchstabieren. Soziale Symbole und steckte es in die Mitte, meine Mitte war hier. Kopieren Sie das und fügen Sie es ein, und das wird mein Copyright sein. Was ich tun könnte, nur um einige Zeit zu sparen, kann ich tippen und bekommen, um eine Zeile zu schreiben, so dass es Urheberrecht, Copyright 2017 geht. Interessante Sache ist unter „Typ“, das Copyright-Symbol ist unter etwas namens „Glyphen“. Um es zu verwenden, doppelklicken Sie darauf, Sie werden sehen, dass es dort angezeigt wird, schließen Sie Glyphen. Hilfreiche Panel, das war. Ich werde in Musterfirma setzen. Großartig. Schwarzer Pfeil, bewegen Sie ihn so, dass er auf dieser Säule sitzt. Schön. Das ist mein Desktop-Finish. Was ich tun werde, ist, dass ich ein wenig verkleinern werde und ich werde auch meine Zeichenfläche greifen. Ich werde dich von unten hier schnappen, es nach oben ziehen, und ich möchte es für die Polsterung unten dort aufteilen, großartig. Zurück zu meinem Auswahlwerkzeug, und wir werden mit der Tablet-Version beginnen. Der einfachste Weg, den ich finde, um loszulegen, ist einfach den Kurs zu kopieren und einzufügen. In meinem Fall könnte ich diese Typen schnappen. Sie können kopieren und einfügen und ziehen oder ich halte Alt-Taste oft, wenn ich ziehe, richten Sie sie dort nach oben. Meine Haarkiste muss als erste reinkommen. Großartig, und diese Logo-Box wird wahrscheinlich genau die gleiche Größe auf dieser Seite und meine Navigation sein; Ich weiß, dass meine Navigation ziemlich klein ist. Es wird hier reinpassen. Möglicherweise müssen Sie die Größe Ihres Logos auf dem Tablet anpassen. Es ist nur eine Frage der herauszufinden, was gut aussieht bei Tablet-Größe, das unterschiedliche Layout, das Sie verwenden möchten. Ich werde durchmachen, die große Veränderung für mich ist, dass ich gerne zwei von diesen Jungs machen würde , damit ich sie rüber bringen werde. Eigentlich, was ich tun könnte, ist, eine herzu bringen , weil sie in der Größe geändert werden müssen. Ich werde nur einen von ihnen machen und sie dann duplizieren. Das steht mit allem, Zoom ein wenig, Befehl 1, nur um sicherzustellen, dass es perfekt aufgereiht ist, und ich werde sie nur ein wenig ziehen, und ich werde Alt halten, und ich werde zwei von diesen Jungs machen. Ich werde meine Zeichenfläche größer machen. Verkleinern Sie ein wenig, ich will größer. Ich habe meine Netze hier unten verloren. Es ist ein bisschen nervig, aber ich werde es klappen können. Ich will, dass sie drei mal drei gehen. Du hast eines der netten Dinge gesehen, die passiert. Kannst du da rechts sehen? Hier kann ich meine Maus nicht loslassen, aber auf der rechten Seite steht da: „Möchtest du, dass die Lücken gleich sind.“ Einige der coolen Dinge, die Sie mit Illustrator tun können. Cool, das nächste, was ich will, sind die sozialen Symbole, ich werde wieder verkleinern. Das ist nur, dass es hier drüben wieder aufgebaut wird. Ich kann meine Guides nicht sehen also muss ich Ihnen zeigen, wie das funktioniert. Ich werde die aufstellen. Ich kann wahrscheinlich einfach davonkommen, können Sie sehen, dass es tatsächlich an die Jungs an der Spitze dort schnappt. Aber Sie haben vielleicht die Frage: „Wie kann ich das beheben?“ Was ich tun muss, sind zwei Dinge, es ist einfacher, wenn ich diese Bits für eine Sekunde hier drüben schiebe. Gehen Sie dann zu „Ansicht“, gehen Sie zu „Guides“ direkt hier und gehen Sie zu „Guides entsperren“. Jetzt kann ich all diese Typen aussuchen. Mit dem schwarzen Pfeil ist es nicht so nützlich wie der weiße Pfeil. Der weiße Pfeil, und ich wähle alle aus. Ich schnappe diese kleinen Endankerpunkte, über die du später mehr erfahren wirst. Sie können sehen, dass ich sie jetzt alle nach unten ziehen kann. Du willst sie gerade nach unten ziehen. Vielleicht können Sie die Umschalttaste gedrückt halten, um sie gerade zu ziehen. Perfekt. Ich gehe zurück, um unsere Guides zu sperren. Verriegelungsführungen, bitte. Ich hole den Stapel zurück. Führt zurück in Position, die ich die gleiche Lücke bekomme. Schön. Meine Zeichenfläche wird etwas kleiner werden müssen. Was ich wahrscheinlich tun werde, ist meine sozialen Symbole wird kleiner werden, wenn es auf Tablet kommt, und vielleicht werden sie den Raum hier teilen. Ich muss das vielleicht ein wenig ändern, wenn ich die tatsächlichen Symbole in der Szene habe, je nachdem, wie viel der Client hat. Jetzt habe ich ein paar kleine Arbeit. Letztes Bit ist die mobile Version. Ich komme vielleicht früh rein und bekomme, dass dieser Leitfaden viel größer wird. Was ich in diesem Fall tun werde, ist, Ich habe mit Desktop begonnen und zog auf Tablet und dann auf Handy. Ich finde, so arbeite ich am besten. Es ist sehr üblich und cool, fühle ich, zuerst mobil zu starten. Es ist das schwierigste zu entwerfen und ich stimme zu, aber ich finde die Leute, die auf meine Website kommen, Desktop ist eine große Mehrheit, also verbringe ich mehr meiner Zeit auf dem Desktop und ich schaue zurück für Handy. Es gibt viele Leute, die argumentieren, dass das der falsche Weg ist, es zu tun. Wenn Sie App-Design machen, hat es keinen Sinn, eine Desktop-Version zu tun, so dass Sie mit diesem kleineren Bildschirm beginnen, und es ist der schwierigste zu entwerfen, so ist es an Ihnen. Ich werde mir ein paar Bits schnappen, die ich brauche, und ich werde wahrscheinlich all diese Typen schnappen. Ich werde Alt halten, sie rüber ziehen. Du kannst deine eins nach dem anderen machen, und was ich definitiv tun muss, ist, die Navigationen nicht passen, also werden wir es nach unten bewegen, im Grunde wird es ein Nav-Sandwich genannt. Ich werde mein Logo schnappen und es hinüberschieben. In diesem oberen Teil, entlang der Spitze hier, werden wir uns ein Hamburger-Menü oder ein Nav-Sandwich zeichnen, also diese drei gestreiften Linien, und wir werden nur drei gestreifte Linien verwenden. Ich werde einen zeichnen, ich werde zwei zeichnen, ich werde drei zeichnen, könnte keinen Kampf auf sie angewendet haben. Bevor Sie mit dem Zeichnen beginnen, sollten Sie wahrscheinlich überprüfen, ob eine schwarze Linie ausgewählt wurde. Ich werde meins getrennt machen. Sie sind immer noch da. Ich werde euch schnappen, euer Schwarzes und ich werde den Schlag größer machen. Seien Sie auf der tatsächlichen Ansicht, damit Sie ein Gefühl davon bekommen können, welche Größe sie haben sollten, es gibt keine bestimmte Größe für sie. Ich werde sicherstellen, dass sie richtig getrennt sind. Hier oben oben steht eine, die „Zentren verteilen“ sagt und sie alle aufreißt. Das ist, was ich für mein Nav-Sandwich tun werde. Gitter aus, Gitter an, es ist ungefähr die richtige Größe, vielleicht ein bisschen groß, aber das ist okay. Was hier passieren wird, ist, dass das zu meinem Gitter zurück kommt. Mein großes Heldenbild wird viel kleiner und der Text hier sein, obwohl ich die Schriftgröße hier nicht geändert habe, weil ich etwas mehr Platz erlaubt habe. Wenn es mobil wird, muss ich definitiv die Schriftgröße auf etwas kleineres ändern . Was ich tun könnte, ist eigentlich nur sicherzustellen, dass ich habe, also endet es bei diesem „diam“. Ich werde es etwas kleiner machen, und Sie werden feststellen, dass ich hier nicht mit dem Gitter aufstellen werde. Es gibt ein paar Tricks, die wir tun können, um das zu zwingen. Wo ist sie? Diam, also werde ich löschen, gucken [unhörbar], also ist das alles weg und vielleicht schön ausrichten. Die andere Sache, die ich tun werde, ist alles auszuwählen, und ich werde das Format hier ändern. Es gibt Dinge, die Sie leicht tun können, wie wenn es von Tablet zu Handy geht, werde ich sicherstellen, dass es in der Mitte ausgerichtet ist, und das wird in Ordnung sein. Es ist eine nette, einfache Sache zu tun. Gleiches mit diesem Kerl wird er hier als großer Knopf zentriert sein. Er ist da, schön, und die Schriftgröße wird etwas kleiner. Das nächste, was ich tun möchte, ist sicherzustellen, dass das aufgereiht ist, ich habe das nicht getan. Was ich tun werde, ist dass diese einfach übereinander stapeln, also werde ich kopieren und einfügen, bewegen Sie es über und bringen Sie zu kommen, um die Seiten dort zu treffen. Es wird tatsächlich größer auf Mobilgeräten sein, als es auf jeder anderen Ansicht ist. Ich kann hier aus dieser Sicht sehen, ich muss sicherstellen, dass diese Dinge perfekt anstehen. Geh da rein, nett. Zurück zu Kommando 1. Was ich auch tun werde, ist, anstatt sechs zu haben, ich werde es abschneiden, so dass wir eigentlich nur vier davon haben. Warum? Vor allem, weil ich Ihnen zeigen möchte, wie es aussieht, wie Sie sie ausschalten, wenn wir unsere Website bauen. Wir können diese im Code ausschalten, damit wir nur vier davon haben, und nur damit es nicht so episch lang ist. Sie können hier sehen ich habe vier von ihnen bereits und die Seiten sind auch schon viel länger als die Tablet-Version, es ist eine Menge Scrollen. Was ich hier unten tun werde , ist, dass ich dieses soziale Symbol packe und ich werde diese Jungs anders stapeln, also werde ich sie übereinander haben, weil sie einfach nicht Seite an Seite hier gehen konnten und das ist etwas, das Sie auch im Code tun können. Leicht genug. Vergewissern Sie sich, dass Sie sie kopieren, wenn Sie sie ziehen. Tippen Sie es ein wenig herum, greifen Sie dieses, und sie werden übereinander zentriert sein. Abstand ist gut, Zeichenflächenwerkzeug. Alles klar, und das wird unser Drahtmodell sein. Dies könnte das größte, längste, langweiligste aller Tutorials hier auf Illustrator sein. Ich verspreche, wir werden in einige super fantastische bekommen, Spaß Gestaltung Farbe mit Bild Geist Blowingness als nächstes, Ich verspreche. Alles klar, nächstes Video. 15. Inspiration für dein Webdesign: Jetzt gehen wir in die Entwurfsphase ein. Wir haben einige Sitemaps und Wireframes gemacht, und sie sehen nicht sehr sexy aus. Jetzt ist es sexy Zeit. Wir gehen durch und schauen uns an, wo ich meine Inspiration bekomme. Vielleicht haben Sie Ihre Plätze. Dies, ich finde, es ist wahrscheinlich die beste aller Websites. Es heißt Awwwards, aber mit Dub, Dub, Dub da drin. Guter Knebel. Es gibt Sites des Tages. Wenn Sie eine brillante Website erstellen, senden Sie sie, Sie könnten vorgestellt werden, fahren etwas Verkehr, und Sie bekommen süße Designer-Kudos. Es hat einfach wirklich hübsches Zeug, viele und viele hübsche Sachen. Verbringen Sie einfach etwas Zeit damit, hier durchzusehen. Vielleicht haben Sie einen bestimmten Look, nach dem Sie suchen. Sie könnten ein Illustrator sein, gehen Sie und schauen Sie sich die Illustrationen anderer Leute an. Du musst das kleine Symbol dort benutzen, oder? - Ja. Überall sonst, wenn Sie klicken, öffnet es nur eine Seite in Awwwards, was in Ordnung ist. Es gibt Leute Rankings und so, aber Sie wollen tatsächlich auf die Seite selbst schauen. Es ist eine ziemlich coole Seite, Mitchlana. Tut mir leid, Michelle Lana. Awwwards.com ist eine großartige Website. Ich benutze behance.com ist ein weiterer brillanter. Ich verbringe meine Zeit damit, durchzugehen und zu gehen, „Ich mag das“, und fange an, Ideen anzueignen , um etwas zu bauen oder ein Gefühl für das zu bekommen, mit dem ich arbeiten möchte. Das ist Inspiration für Ihr Webdesign. 16. So erstellst du dein Webdesign mit Illustratorvorlagen: In diesem Tutorial werden wir uns ansehen, wie man von Vorlagen beginnt. Sie könnten wirklich neu im Design im Allgemeinen sein, Sie könnten ein Student sein, Sie könnten jung sein, Sie könnten älter sein und Sie haben es noch nie getan, aus welchem Grund auch immer Sie ein wenig mehr durch das gesamte Design entmutigt werden könnten Prozess, wie wird es aussehen? Es ist gut, mit einer Vorlage zu beginnen, und es gibt viele Vorlagen. Einige der einfachsten sind in die neue Version von Illustrator integriert, wir sind im Moment 2017. Wenn wir zu Neu oder Datei Neu gehen, gibt es dieses kleine Fenster Neues Dokument Wenn Sie zum Web gehen, werden Sie sehen, dass unten hier eine Reihe von Vorlagen sind, können Sie sehen, ob ich nach unten scrollen. Sie sind für alle möglichen Dinge. Das ist eine Zielseite eins, das sind einige Präsentationsgrafiken, einige Social-Media-Symbole, es gibt alle möglichen verschiedene. Aber in Bezug auf ein Webseiten-Design, können Sie dies in Wireframes sehen, schauen Sie sich das an. Durch Seitenentwürfe können Sie mit einem von diesen beginnen und einfach anfangen zu wechseln, sie sind hier, um verwendet zu werden, sie werden kommerziell verwendet. Du könntest entscheiden, ich werde mit diesem hier anfangen , weil es dem entspricht, was ich tun möchte. Sie doppelklicken darauf und Sie beginnen einfach durchzugehen und spielen mit den Farben, den Schriftarten, es lädt es schließlich herunter und Sie ändern es mit Ihren Bildern. Angenommen, Sie verkaufen keine App, Sie verkaufen Cookies, Sie könnten es mit Ihrem Bild hier wechseln und das ist ein guter Weg um loszulegen und hat nur die Bits, über die Sie vielleicht nicht nachgedacht haben, also können Sie einfach diese Homepage verwenden und dann alle der Rest von diesen. Das ist ein großartiger Weg. Da sind noch ein paar andere Vorlagen drin. Ein weiterer cooler Ort, an dem Sie gehen können, ist unter diesem hier, unter Ihrer Creative Cloud-Lizenz, Ihre Creative Cloud-App. Es gibt eins, Assets, und es gibt eine hier drin namens Market. Wenn Sie auf „Markt“ und hier die Suchoption klicken, können Sie Web-UI sagen. Hier ist eine Reihe von vorgefertigten Sachen, die kommerziell verwendet werden dürfen, so dass Sie mit diesen beginnen können, es ist eine gute Möglichkeit, pro wirklich schnell aussehen. Es gibt eine Menge App-Zeug hier und eine Menge Web-Sachen als auch. Einige von ihnen sind wirklich groß, einige von ihnen nur kleine Komponenten, aber diese Linie scheint für immer weiterzugehen. Um sie zu benutzen, sagen wir, Sie mögen diese Web-UI-Sache hier, wie das Aussehen und das Gefühl dieser für Ihre Website, Sie können darauf klicken und sagen, Download zu, oft Leute werden es einfach in ihre Bibliothek herunterladen, es heißt Meine Bibliothek, Was ich tun werde, ist, dass ich darauf klicken und es auf eine herunterladen, die ich gemacht habe genannt, Sie können hier sehen, Erstellen Bibliothek, Ich habe diese eine namens Dan's Portfolio erstellt. Was passieren wird, ist hoffentlich, Sie können sehen, dass es hier unter Fenster, Bibliotheken passiert , das ist da. Es lädt diesen Kerl herunter, den ich verwenden könnte, es dauert eine Weile, um es mit dem Netz herunterzuladen, und dann ziehen Sie es auf. Sie können hier sehen, das ist eine Benutzeroberfläche, die Sie verwenden und ändern und hinzufügen, um Ihr Design, ändern Sie Ihre Schriftarten, verwenden Sie Ihre Farben, es ist eine gute Möglichkeit, von einer Vorlage zu beginnen. Das ist es für unseren Start von Vorlagen. Wir werden unser eigenes machen und es wird großartig sein. 17. So fügst du ein Vektorlogo in dein Layout ein: Hey, da. In diesem Video werden wir in unser schönes, sexy Vektorlogo bringen und wir werden es auf Navigationsleiste fallen lassen, mit der Deckkraft spielen und ein bisschen Typ für unsere Navigation hinzufügen. In Ordnung, lassen Sie uns hineingehen. Sie können offensichtlich beginnen, indem Sie Dinge ersetzen, die ich oft gerade durchmache. Dies ist, was ich verwendet habe, um meine Ideen an den Kunden zu bringen, aber es ist nicht etwas, mit dem ich anfangen kann. Ich habe mehr über das Produkt nachgedacht und ich werde meine y-Frames in der Nähe halten, ich drucke sie aus und klebe sie fest, aber ich mag es nicht, sie wörtlich auszutauschen, es ist nicht diese Art von Designprozess. Was ich tue, ist, dass ich aufhören werde. Ich werde sie als Leitfaden benutzen, versteh mich nicht falsch. Ich werde nur den Inhalt schieben und bewegen und wackeln lassen, wie er braucht. Weil ich jetzt Bilder vom Kunden habe und Logos von ihnen habe, und alles hat sich nur ein wenig verändert. Ich werde mein Logo mitbringen. Nur um mir mein erstes bisschen zu geben, und es wird wahrscheinlich eine Menge der Designs fahren, vor allem Farben, vielleicht Schriftarten. Also werden wir sie zuerst bringen. Wenn Sie nun Logos von Ihrem Client finden, stellen Sie sicher, dass es sich um eine Vektorversion handelt. Was wir tun werden, ist, dass wir zu „Datei“ gehen und wir gehen zu „Place“, diesem hier. Jetzt, Übungsdateien, ich habe viele Logos. Es gibt fünf Versionen. JPEG und ein PNG sind also schlecht, SVG, EPS oder eine AI-Datei sind gut. Ich zeige Ihnen den Unterschied zwischen den beiden. Nehmen wir an, alle diese drei sind sehr ähnlich, ziemlich gleich. Diese Jungs haben eine sehr ähnliche Arbeit als auch. Lassen Sie uns das PNG einbringen und bringen wir, sagen wir, die EPS-Version, oder sagen wir das SVG. Sehen wir uns den Unterschied zwischen den beiden an. Etwas namens Pixel im Vergleich zu Vektor oder Bitmap im Vergleich zu Pfaden. Was ich tun werde, ist, dass ich meine Wachen abreiße, und ich werde hineinzoomen. Sie sehen genau gleich aus. Aber sieh dir an, was passiert, wenn ich beginne, beide zu skalieren. Wenn ich diese Typen schnappe und sie hochskaliere. Jetzt ist es groß. Man kann sehen, dass man anfängt zu pixeln, sieht schrecklich aus, und dieser andere hier bleibt schön und kristallklar. Wenn Sie die Option haben, sagt der Client: „Welche Version möchten Sie?“ Stellen Sie sicher, dass Sie die Vektorversion erhalten. Der Vektor ist SVG, EPS oder AI. Manchmal kann es sich um eine PDF-Datei handeln. Aber bleib weg von PNGs. PNGs sind praktisch, weil sie Transparenz haben. Wenn Sie nur, sagen wir, ein JPEG und ein PNG haben , erhalten Sie die PNG-Version, es wird nicht sehr skalieren, das wird uns nicht mit unserer Reaktionsfähigkeit helfen. Es ist nicht das Ende der Welt. Vergleichen wir es mit der JPEG-Version. JPEG ist ein klarer Verlierer, weil er einen weißen Hintergrund hat. Er ist immer noch die gleichen Pixel, er pixelt immer noch, aber man kann sehen, zumindest hat das PNG einen transparenten Hintergrund. Oft, nicht immer. Auf Wiedersehen, Leute. Ich werde unsere SVG wieder einbringen, nur weil es durch die richtige Größe kam. SVG, großartig. Das wird mein Logo für meine Folie sein. Denken Sie daran, arbeiten Sie ein Command 1 tatsächliche Pixel. Sie werden feststellen, dass das L-Logo einen weißen Hintergrund hat, weil ich meine Wachen wieder anschalten möchte. Wenn Sie vergessen haben, das ist Command Doppelpunkt oder Control Doppelpunkt, ich werde es bekommen, um zu knallen vielleicht nur ein wenig weiter in, weil was ich tun werde , ist, dass ich mein Rechteck-Werkzeug greifen und ich werde eine Navigationsleiste auf die Oberseite setzen. Ich werde es später halbtransparent machen damit du darunter sehen kannst und alles cool machen kannst. Ich werde es überqueren, damit ich beide Seiten sehen kann. Da gehen wir. Ich werde hier ein Rechteck zeichnen, es wird über 12 Spalten gehen. Ich werde ihm eine Füllfarbe von Schwarz geben, und ich werde ihm keinen Strich geben, so dass die kleine rote Linie durch sie keinen Strich bedeutet. Ein wenig von der Deckkraft ein wenig. Es wird ein bisschen grau und ich werde Sachen dahinter stecken. Wenn wir unsere Website erstellen, werden wir sie an die Spitze anheften, also bedeutet es, dass es nach unten scrollen wird, wenn wir anfangen zu scrollen, und es wird nach oben bleiben und wir werden immer in der Lage sein , das Logo in der -Navigation. Es ist cool. Nun, in dem Moment, in dem das Logo auf der falschen Seite ist, ist diese Box oben, also klicken wir einfach mit der rechten Maustaste darauf. Wenn du auf einem Mac bist, hältst du die Steuerungstaste gedrückt und klickst mit den vorhandenen Schaltflächen. Auf einem PC ist es ein fauler Rechtsklick, und gehen Sie zu dem, der „Anordnen“ sagt, und gehen Sie zu „An Zurück senden“. Siehst du, ich habe mein Logo im Voraus. Cool. Ich werde darauf tippen, damit es da drin sitzt, meine Guides ausschalten und gut aussieht. Nun, was ich tun möchte, ist, dass ich es in den Text für meine Navigation einfügen möchte. Ich werde das Type-Werkzeug greifen und ich werde einmal klicken. Es spielt keine Rolle, wohin es geht, und ich werde über uns gehen. Es wird über mich sein, weil es mein Portfolio ist. Was ich tun werde, ist, dass ich es kopieren und in die Spalte neben ihm einfügen werde, und es wird eine weitere Seite namens Kontaktieren Sie mich. Ich habe vielleicht auch meinen Portfolio-Button. Ich habe beschlossen, die Bilder, die wir hatten, auf dem Boden zu halten, um zu unserem Portfolio zu gelangen. Das ist genau wie diese Typen hier. Ich werde sie weiß machen. Mit diesem schwarzen Pfeil haben wir beide ausgewählt. Ich kann jetzt mein Type-Werkzeug greifen. An der Spitze hier kann ich gehen und die Farbe in Weiß ändern. Eigentlich, was ich verwenden werde, ist dieses off-white den ganzen Weg durch sie. Ich wusste nicht, warum ich es mag, es ist nur ein kleiner Hinweis auf das Weiß. Es sieht im Grunde weiß aus. Wir haben unseren Typ hinzugefügt, wir werden in Stil-Schriftarten in einem Film kurz nach diesem einen gehen, wir werden nur Arial für den Moment verwenden. Das nächste, was ich tun möchte, ist, dass ich mit ein wenig Farbe arbeiten möchte. Lass uns das im nächsten Video machen. 18. So verwendest du Farbe in Adobe: In diesem Video werden wir über das Hinzufügen von Farbe zu Ihrer Website sprechen. Wir werden anfangen, etwas namens Adobe Color CC zu verwenden. Früher hieß es kühler, wenn Sie sich an ihn erinnern, aber wenn Sie auf color.adobe.com gehen und sich mit Ihrer Creative Cloud-Lizenz anmelden, gelangen Sie zu hier. Wenn Sie eine raubkopierte Version haben, wird das nicht auch funktionieren, Teile davon werden funktionieren, okay. Aber wir hoffen, dass Sie eine legitime Version haben. Was wir tun werden, ist zu überspringen erstellen und zu einem namens Explore gehen. Was das wirklich ist, ist für Leute, die, selbst erfahrene Designer, wie ich mich jedes Mal auf die gleichen Farben lehnte, wenn ich ein Design mache. Wenn du zu mir kommst und ein Bäcker bist und eine Website brauchst, wird es wahrscheinlich im Moment grün und grau sein. Wenn Sie, ich weiß nicht, eine internationale Fluggesellschaft sind und Sie Arbeit erledigen müssen, werde ich sie wahrscheinlich grün und grau machen. Ich stecke in einer Falle der Verwendung von Grün und Grau fest. Um meiner Falle zu entkommen, verwende ich diese „Explore“ -Funktion in Adobe Color. Was es bedeutet, ist, dass ich hier reingehen und wandern und erkunden kann. Ich denke, standardmäßig ist es an, ich bin mir nicht sicher, aber gehen Sie zu „Most Popular“, Ich mag es aller Zeiten, vielleicht in diesem Monat. Es ist nur gehen, um Ihnen die Dinge, die andere Leute herunterladen, die beliebtesten Farben und oft ziemlich cooles Zeug kommt an die Spitze. Gehen wir mit „All Time“ und diesen hier, ja, jede Menge Farben. Was passiert, ist, weil Sie sich eingeloggt haben, was Sie tun können, ist sagen, dass Sie „Tech Office“ mögen. Sie können auf diejenige klicken, die besagt, ist „Speichern“, und es wird sagen, wie, Sie können es umbenennen, wenn Sie möchten. Sie können sagen, eigentlich möchte ich, dass Sie es in meine stecken, denken Sie daran, dass wir diese Bibliothek [unhörbar] namens Dans Portfolio gemacht haben. Sie können hier eine neue erstellen, rechts nach unten, „Create New Library“ wird es einfach in Ihre, wo ist es, meine Bibliothek stampfen. Aber ich werde meins als Dans Portfolio setzen, du könntest es ändern. Das ist okay, aber ich werde auf „Speichern“ klicken und die coole Sache darüber, ist magisch, hoffentlich, wenn ich jetzt Illustrator und Dans Portfolio gehen, manchmal können Sie klicken, dass. Ich werde das etwas kleiner machen. Es gibt da, es gibt die Farben und ich kann anfangen, sie zu benutzen. Ich kann entscheiden, dass ich das eigentlich für die Farbe verwenden werde. Es ist nur eine gute Möglichkeit, Dinge zu zeichnen, und Sie sagen: „Okay, jetzt fangen die Dinge an, wie viele Farbe haben zu funktionieren.“ Weil ich mit dieser Template-Farbremutung angefangen habe. Es ist ein guter Weg, um mit Ihren Farben in Gang zu kommen. Was Sie für diese Klasse tun können, ist, dass Sie genau auf die gleiche Website gehen und zu „Erkunden“ gehen und zu „Suchen“ gehen und BYOL eingeben. Hoffentlich finden Sie einige von denen, die ich benutze. Die, die ich in dieser Klasse verwende, heißt BYOL Portfolio Illustrator. Laden Sie das hier herunter und wir werden das für diesen Kurs verwenden. Wenn Sie in einer größeren Agentur arbeiten, ist es eine gute Möglichkeit, Markenfarben zu gestalten. Sie können sie hochladen und es gibt ein paar verschiedene Möglichkeiten, wie Sie zu „Erstellen“ gehen können, und Sie können hier unten gehen und tatsächlich sagen, also CMYK, Sie können beginnen, diese einzugeben und sie zu ändern, und dann auf „Speichern“ und sie enden auf dieser Erkundung Ding. Die Menschen können suchen und teilen und es macht es wirklich einfach, ja teilen helle Farben. Also lassen Sie uns die Bring Your Laptop ein, Art von vergessen, dass überprüfen BYOL, und ich klicke auf „Speichern“, legte es in Dans Portfolio. Großartig, nett. Illustrator klicken Sie auf das kleine kreative Cloud-Icon, und da ist er da. Ich werde auf diesen Kerl klicken Sie mit der rechten Maustaste auf ihn und sagen, Löschen, brauche Sie nicht. Cool und großartig, also haben wir unsere Farben in. Lassen Sie uns jetzt weiter und schauen Sie uns an, sagen wir, denn dies wird eine Marke für dieses spezielle gefälschte Unternehmen oder gefälschte Portfolio sein , das wir tun, und wenn Sie tatsächlich bestimmte Farben und ein Logo haben , von dem Sie arbeiten können, werde ich , um dir zu zeigen, wie du das im nächsten Video machst und diese Farben durchziehst. 19. So passt du Markenfarben mit Adobe Illustrator an: Hey, in diesem Video werden wir uns eine Art von Farben aus bestehenden Markenlogos ansehen , die in Ihrem UI-Design verwendet werden können. Nehmen wir an, wir machen etwas Arbeit für ein Unternehmen und Sie haben ihr Logo. Sie können es in bringen und wir gehen, um File Place gehen, und in diesem Beispiel, wir werden nur die Google Logo.png verwenden, bringen Sie ihn in. Nehmen wir an, ich möchte einige Elemente zeichnen, sagen wir, es ist unsere Heldenbox im Hintergrund hier. Aber ich möchte, dass es den Google-Farben entspricht, lassen Sie uns so tun, als wäre es eine zufällige Farbe zu beginnen, nicht zufällig genug. Mit ihm ausgewählt, was Sie tun müssen, ist greifen Sie die Pipette Werkzeug, die Pipette ist Werkzeuge Art von verstecken sich hier unten. Alles, was Sie tun müssen, ist mit allem, was Sie ausgewählt haben, wählen Sie einfach eine Farbe aus, und Sie können sehen, dass es aufhören wird, die Markenfarben daraus zu ziehen. Wie genau wird es sein? Ziemlich genau. Nehmen wir an, Sie möchten sie irgendwie hinzufügen, aber später verwenden anstatt jedes Mal das Pipettenwerkzeug verwendet zu haben, müssen Sie zu Ihrem Farbfeld-Panel wechseln. Wenn Sie das Farbfeldbedienfeld nicht finden können, ist es unter Fenster unten zu Farbfeldern, schalten Sie es ein und betrachten Sie die Schalter als vorgefertigte, vorgemischte Farben, die Sie verwenden können. Was wir tun werden ist, lassen Sie uns dieses Blau wählen, also hier ist es dann, was Sie tun können, ist oben oben hier, Dropdown-und ist eine Option, die New Swatch sagt. Okay, gib ihm einen Namen, ich rufe mein Google Blue an und klicke auf. Sie können sehen, dass es beides in meiner Bibliothek ist, und es ist hier unten, meine Musterbibliothek. So arbeiten Sie einfach Ihren Weg durch die Farben, ich schnappe das Pipettenwerkzeug. Rot, hier, neues Google Red ist da, und es ist hier unten die Farbfelder Panel. Der Grund, warum es irgendwie gut ist, sie in deinen Mustern zu haben, werden wir das etwas später finden. Sie werden feststellen, dass diese Bibliothekssache für die meisten Dinge genial ist. Es ist neu und es ist noch nicht perfekt für alles, also manchmal brauchen Sie sie auch in Ihrem Farbfeld-Panel. Ok, genial. So ziehen Sie Markenfarben aus vorhandenen Logos, um zu verwenden anstatt zu versuchen, herauszufinden was all diese Farben sind. Ok. Da gehst du. 20. So verwendest du die richtigen Webschriften, Googleschriften und Schriftsätze: In diesem Video werden wir auf das Einbringen wirklich spezifische Web sichere Schriften von Google Fonts und Typekit, wie dieser kleine sexy Kerl hier und diese kleinen Plain Jane, aber sehr coole Schriften oben hier. Also, was wir haben, und wir verwenden einfach einfachen alten Text. Möglicherweise haben Sie Arial verwendet, aber standardmäßig liebt Illustrator Myriad Pro. Was wir jetzt tun müssen, ist, es für die Schriftart auszuschalten, die wir verwenden möchten. Nun, Sie können nicht einfach durch Ihre Liste gehen und gehen, ich möchte all diese Schriftarten auswählen, die ich auf meinem Computer habe. Vielleicht haben Sie Hunderte, vielleicht haben Sie nur ein paar. Du kannst nicht einfach einen von ihnen aussuchen. Sie müssen speziell Schriftarten sein, die online verwendet werden können, im Wesentlichen nur online lizenziert werden, und wenn sie für die Bezahlung dieser Lizenz bezahlt werden und wenn sie nicht kommerziell nutzbar sind, gehen Sie für und verwenden Sie sie. Es gibt zwei Hauptorte, die Sie tun werden, wenn Sie Illustrator-Person sind. Es gibt einen namens Google Fonts oder Typekit. Nach meiner Erfahrung hängt es davon ab, was du tust. Bei Google Fonts finde ich das einfach einfacher. Sie sind ein bisschen schwieriger zu implementieren, aber sie sind besser in Bezug auf die Lizenzierung. Was passiert ist, ist Google Fonts sind kostenlos für den kommerziellen Gebrauch, die großartig sind. Typekit kann kostenlos mit Ihrer Creative Cloud-Lizenz verwendet werden, was perfekt für mein Portfolio hier ist, weil ich es für nichts anderes verwende. Das heißt, es ist für mein Portfolio. Aber sagen wir, ich baue sie für einen Kunden und sie haben keine Creative Cloud-Lizenz, ihre Website muss diese Schriftart lizenzieren, oder ich muss meine Creative Cloud-Lizenz verwenden, um ihre Website mit der richtigen Schriftart zu halten. Wenn ich mich dazu entscheide, in den Himalaya zu ziehen und mein ganzes digitales Leben einzuschließen, bedeutet, dass ihre Schrift nicht mehr funktioniert, weil ich nicht für meine Creative Cloud-Lizenz zahle. Wir schauen uns beide an. Sie sind beide cool, beide einfach genug zu bedienen. Schauen wir uns zuerst Google Fonts an. Gehen Sie zuerst auf fonts.google.com, und Sie kommen hier. Ich mag Google Fonts wirklich. Es gibt jede Menge von ihnen. Ein paar coole Dinge, die Sie mit ihnen tun können, ist hier auf der Seite, also brauchen Sie eine Handschrift. Sie können wirklich schwer zu finden sein. Lassen Sie uns nur Handschrift haben und beaufsichtigen, nur gehen, um Ihnen Listen für Handschriftarten zu geben. Also werde ich sie alle einschalten. Einige der anderen netten Dinge unten unten hier sind, können Sie mit spielen, sagen, wie die Breite. Breite kann wirklich nützlich sein, wenn Sie es nach unten senken können, so dass Sie eine schöne kompakte oder komprimierte Schriftart oder komprimierte Schriftart erhalten können. Es ist nur ein bisschen dünner. Es bedeutet nur, besonders wenn Sie online arbeiten, wenn Sie einige dieser wirklich dünnen erhalten, können Sie es niedrig in einen Titel bringen , ohne dass es auf zwei Zeilen bricht. Sie können hier sehen, dass Sie ziemlich viele Wörter auf diese passen können, während wenn Sie nach einer Einheit mit einer wirklich breiten Schriftart suchen, können Sie sehen, dass es viel weiter auseinander ist. Egal, es gibt zwei Dinge, die Sie tun müssen. Man ist wählen Sie eine Schriftart, also Roboto und wahrscheinlich Open Sans. Wenn Sie nach einer Schriftart für Textkopien suchen, sind diese am häufigsten. Open Sans ist wahrscheinlich die häufigste. Das ist der neue Arial. Jeder verwendet Open Sans, weil es klar ist, es ist schön, es hat viele verschiedene Gewichte und es funktioniert gut in verschiedenen Sprachen. Was ich tun werde, ist, dass ich aussuchen werde. Ich habe tatsächlich nur einige Zeit damit verbracht, einen Blick durch und ich habe beschlossen, und ich werde diesen hier namens Playfair verwenden. Ich mag es wirklich. Es ist dieser hier. Es hat ein paar gute Gewichte. Manchmal wählt man eine Schriftart aus und sieht nicht gut aus. Man könnte denken, dass es hier gut aussieht, aber dann sieht es schrecklich aus in den Worten, die man braucht. Sie können sehen, ich kann einfach über die Spitze tippen, nur um zu sehen, wie mein Name aussieht. Eigentlich, bevor Sie durch gehen, können Sie auf den Namen klicken und nur gibt Ihnen eine größere Probe von allem und all den verschiedenen Gebrauch, und eine der nützlichen Dinge sowie es gibt Ihnen eine passende entsprechende Schriftart ist wir werden dies für unsere Titel in unseren großen Überschriften verwenden, aber dann brauchen wir eine einfachere Schriftart für die Textkopie oder unseren Absatztext. Sie können hier unten sehen, dass es mir eine Option gegeben hat, die sagt, versuchen Sie Raleway , oder diesen oder diesen. Ich habe mich für diesen entschieden, Open Sans Condensed. Wahrscheinlich nicht die leichten Versionen, vielleicht ein bisschen zu schwer, um online in Bezug auf Benutzerfreundlichkeit zu lesen. Aber es gibt Ihnen nur Optionen, also, wenn Sie neu sind oder Sie alt sind und Sie brauchen nur etwas Hilfe beim Auswählen einer schönen Schriftart. Was wir tun, ist, wählen wir dieses und dann finden es oben und wir sagen „Wählen Sie diese Schriftart“, oder wenn Sie wieder in dem anderen Bildschirm hier klicken Sie auf diese kleine „Plus“ Schaltfläche, und das fügt einfach diese unten hier genannt Sammlungen, und Sie können fügen Sie die Schriftarten hinzu. Wie viele fügen Sie hinzu? Wirklich, du brauchst nur zwei. Es kommt auf mehr an. Es ist eine Mischung aus nur Schriftregeln. Wenn Sie 10 Schriftarten auf Ihrer Website haben, wird es schrecklich aussehen. So halten Sie es auf ein Minimum. Sie benötigen nur zwei, eine Überschrift-Schriftart und eine Textkopie-Schriftart. Du kannst drei haben, wenn du sie brauchst. Ich werde das hinzufügen und dann werde ich hier oben Open Sans finden, und da ist Condensed hier, und ich drücke „Plus“. Sie sind beide zusammen. Ich werde das aufmachen. Es gibt ein paar Dinge, die ich tun muss. Ich werde auf „Anpassen“ klicken, weil ich mich diese Schriftarten entscheiden muss, welche ich möchte. Was ich eigentlich will, ist, dass ich das kühne will und ich werde nicht den regulären in meinem Design verwenden. Was du tun könntest ist, dass du sie alle anschalten könntest , weil wir jetzt in der Konzeptphase sind. Wir zeigen nicht, welche wir verwenden werden, sondern laden sie einfach alle herunter. Sie möchten sie nicht alle verwenden, obwohl in Ihrem tatsächlichen fertigen Design, wählen Sie einfach ein oder zwei, weil Sie sehen können, die mehr Zeit, die benötigt wird, um Ihre Seite zu laden, und eine langsame Ladeseite ist aus mehreren Gründen schlecht, es ist Ihr Benutzer verbringen Ewigkeiten mit dem Versuch, Schriftarten herunterzuladen, während Ihre Seite nicht geladen wird, kümmern sich nicht um Ihre erstaunliche Schriftauswahl, und Google mag es nicht, so dass sie Sie in Bezug auf Ihre Suchanfragen bestrafen. Versuchen Sie, nicht zu viele Schriftarten auszuwählen. Aber in meinem Fall lade ich sie alle herunter, weil ich im Moment gerade in meiner Entwurfsphase bin. Ich werde nur ein oder zwei auswählen. Aber hier drüben, das ist wie obskure kleine Pfeil, dieses Ding, das sagt, laden Sie diese Auswahl. Das coole daran ist, dass es heruntergeladen wird, und ich werde es in meine Übungsdateien einfügen. Das wird für Sie da sein damit Sie diesen Prozess nicht durchlaufen müssen. Sie können anfangen, sie zu verwenden. Aber wir haben sie heruntergeladen. Da sind sie. Öffnen Sie den Reißverschluss, und auf beiden tatsächlich Mac und PC jetzt sind diese ziemlich einfach zu implementieren. Ich werde Open Sans öffnen, und ich werde auf alle diese doppelklicken. Es wird geöffnet und ich kann auf „Installieren“ klicken. Ich habe sie bereits früher auf meinem installiert. Tun Sie es für beide. Wählen Sie alle diese aus , doppelklicken Sie auf die Installation, und Sie können sie in Illustrator verwenden. Illustrator muss nicht neu gestartet werden. Sie werden nur feststellen, dass sie erstaunlich erscheinen. Öffnen Sie Sans Condensed und ich werde die kühne verwenden. Ich denke, ich benutze Condensed Bold. Cool. Was wir dort getan haben, ist, dass wir sie heruntergeladen haben, um auf unserem Computer zu verwenden, und hinterhältige coole Sache ist, dass Sie sie für alle möglichen Sachen verwenden können. Es muss kein Webdesign sein. Sie haben gerade eine ganze Reihe coole Schriftarten zu verwenden. Google ermöglicht es Ihnen, kommerziell zu verwenden. Nun, was Sie tun sollen, ist, diese auszuwählen und wenn Sie später Ihre Dateien einem Designer, einemWebdesigner oder einem Webentwicklerübergeben Webdesigner oder einem Webentwickler , oder Sie es selbst tun, verwenden Sie diese Schriftarten auf besondere Weise, wenn die Website erstellt wird. Sie rufen Google an und sagen: „Wir verwenden diese Schriftarten bitte“, und Google sagt, „Keine Sorge,“ und lässt sie auf Ihrer Website funktionieren. Also haben wir sie gerade heruntergeladen, um sie auf unserem Desktop zu verwenden. Perfekt. Gehen Sie zu typekit.com, und klicken Sie hier auf „Fonts“. Sie müssen sich mit Ihrer Creative Cloud-Lizenz anmelden, Sie können mein kleines Gesicht dort oben sehen, und Sie können ein wenig Beispieltext eingeben. Die einzige Sache, die Sie sicherstellen müssen, ist, dass Typekit einige hat, die nur Desktop verwenden, und einige, die auch Web verwenden. Sie wollen nicht sicherstellen, dass dies Tick ist, um zu sagen. Ich möchte diejenigen, die auf einer Website verwendet werden können, weil es keinen Sinn hat, eine zu entwerfen, sie können nicht sein. Hier drüben, die gleichen Dinge wie Google. Sie können auf klicken, sagen, ich möchte nur Skriptschriftarten, und es trennt diese nur zu den Skriptschriftarten. Ich will vielleicht eine Slab Serif finden. Sie können das Gleiche mit dem machen, wie breit sie sind, wie schwer sie sind, alle möglichen coolen Sachen. Ja, es wird ein wenig einfacher, mit der Implementierung zu beginnen. Sagen Sie, ich liebe diese Schriftart hier, dieses Sutro, und ich klicke darauf. Ich entscheide, welche ich verwenden möchte. Ich möchte diese Deluxe-Füllung verwenden, ich liebe es. Klicken Sie auf „Synchronisieren“. Was passiert, ist im Hintergrund, es installiert tatsächlich auf Ihrem Computer, was ziemlich verrückt ist. Sie können sehen, dass es gerade dort installiert ist, also Sutro. Es ist ein bisschen einfacher als die Google Fonts. Großartig. Ich kann anfangen, sie zu benutzen. Denken Sie daran, das einzige Problem mit Typekit ist es eine kostenpflichtige Lizenz. Sie erhalten es kostenlos für Ihre Creative Cloud. Also für Ihr eigenes Personal, es ist perfekt. Aber wenn Sie zu einem Kunden gehen, müssen Sie erklären, dass diese Schriftarten lizenziert sind. Es sind pro Jahr Kosten, und Sie werden das zu Ihrem Webdesign hinzufügen, nur um sicherzustellen, dass sie wissen, dass es zusätzliche Kosten für diese Schriftarten gibt. Oft gehe ich einfach zu Google Fonts, weil keine zusätzlichen Kosten. Die Schriftbibliotheken sind unterschiedlich. Wenn es eine Schriftart gibt, die sie lieben und sie in Typekit ist, können Sie ihnen sagen, ja, Sie können sie verwenden, aber sie muss lizenziert sein. Ich bin jetzt bummeln. Es gibt also andere Websites, auf die man gehen kann. Eine andere ist Font Eichhörnchen. Es ist ziemlich wie beide, aber dazwischen mag ich Google Fonts obwohl. Cool. Das war eine besonders lange Erklärung für die Verwendung von Schriftarten. 21. Produktionsvideo: so stellst du die Navigation, die Hero Box und die Schriftarten fertig: Howdy da. In diesem Produktionsvideo bedeutet Produktionsvideo nur, dass ich nicht wirklich etwas Neues mache, ich werde nur die Löcher für unser Design füllen. Sie können zuschauen oder Sie können es überspringen, es ist in Ordnung. Dies ist, was wir am Ende dieses Videos bekommen werden, wir werden einige Ticks und einige farbige Boxen setzen, aber wir wissen, wie man Zecken und farbige Boxen setzt, und so lasst uns gehen und das jetzt tun. Cool. Lassen Sie uns zuerst unsere kleinen Knöpfe oben zeichnen. Du könntest sie einfach als Text belassen, aber was ich tun möchte, ist mein Rechteck-Werkzeug zu greifen und eine Knopf-Ding auszuzeichnen, die dort hineinpasst. Jetzt werde ich meine Farben verwenden, die wir heruntergeladen haben, die BYOL Portfolio Farben. Welche Farbe soll es haben? Grün ist cool. Ich werde mit der rechten Maustaste reinklicken. Nun, bevor wir überhaupt arrangieren, was hinten ist, schicken wir sie nach hinten. Auf Wiedersehen. Er ist hinter der Navigation und sieht ihn dort. Also habe ich es rückgängig gemacht. So wird es rückgängig gemacht. Was ich tun werde, ist, es gibt hier eine Option, die „Anordnen und senden“ sagt, anstatt „zurück“ zu was ganz hinten ist, rückwärts zu schicken, genau zurück wie der Kerl vor ihm. Was ist hier los? Ja, ich habe die richtige Größe. Ich werde eine Kopie von diesem Kerl machen und sie zusammenknallen lassen, aber ich werde diese rote Farbe dafür verwenden. Ich Rechtsklick, „Anordnen“, „Rückwärts senden“. Manchmal sind ein paar Kerle dazwischen und Rückwärts funktioniert nicht. Du musst weitermachen, „Rückwärts schicken“. Sie können sehen, dass es eine Verknüpfung gibt, Rückwärts senden. Ich werde das tun, bis ich alles erledigt habe. Großartig. Der Typ muss in der Mitte sein. Cool. Lassen Sie uns ein wenig herauszoomen, „Befehlstaste-1", um es auf die tatsächliche Größe zu bekommen. Eigentlich werde ich noch einmal verkleinern. Ich werde es in meine große Heldenbox oben hier stecken. Ich werde meine Guides wieder einschalten, das Rechteck-Werkzeug greifen, und wir werden uns Bilder in einem separaten Video ansehen, aber ich bringe jetzt mein Bild ein, aber wir werden nur in eine große farbige Box setzen, schicke es nach hinten, und sieh dir den Rest meines Typs an. Also lasst uns es ausbauen. Ich werde mein Type-Werkzeug greifen. Ich werde meine Box rausziehen, es wird decken, nicht genau sicher, wie viele noch, aber ich weiß definitiv, es hat meinen Text, meine inspirierende, erstaunliche, engagieren mich als Trainer. Natürlich ist es uneben. UX Designer. Großartig. Schriftgröße, ich mag es. Es sieht in Ordnung aus. Es wird weiß sein, weil ich ein ziemlich dunkles Bild dahinter setzen werde. Eigentlich wird es das Off-White sein, das ich benutzt habe. Das gebrochene Weiß ist auch hier drin. Es ist in der Farbe, so dass Sie einen von ihnen verwenden können. Großartig. Was ich tun möchte, ist, dass ich es wahrscheinlich um eine dieser Spalten einfügen möchte. Sie können das im Webdesign einfach genug tun. Sie können sagen, lassen Sie das leer und starten Sie dann dieses Textfeld ein wenig weiter entlang. Ich werde ein bisschen Typ darüber haben, ich werde das später im Tutorial verlassen. Der Typ muss etwas tiefer werden. Ich benutze meinen schwarzen Pfeil, nur um ihn ein wenig nach unten zu ziehen. Ich werde eine weiße Linie darunter legen. Warum? Nur weil ich die Idee davon mag. Also werde ich mein Liniensegment-Tool bekommen. Im Moment ist es nicht wirklich wichtig, welche Füllung es hat, aber es ist definitiv wichtig, welchen Farbstrich wir haben. Ich benutze das Off-White wieder. Ich werde darauf klicken. Es wird über diese gehen. Ich werde „Shift“ halten, um sicherzustellen, dass es gerade geht. Wie viele Pixel? Wahrscheinlich wird nur ein Pixel gut aussehen. Wenn ich die Gitter aus- und anschalte, nur um ein Gefühl für alles zu bekommen. Ja, ich mag es dort. Jetzt werde ich einen Knopf darunter machen. Es wird genau so aussehen, also werde ich es stehlen, kopieren und einfügen. Es wird meine Berufung zum Handeln sein. Stellen Sie mich ein, bitte. Ich werde ein bisschen heranzoomen. Ich werde wahrscheinlich die gleiche Schriftgröße verwenden. Dieser wird sagen: „Lass uns reden.“ Ich glaube, jeder schreibt Dinge wie : „Lass uns einen Kaffee holen“, „Lass mich dir helfen.“ Sie können sich Ihre eigene umgangssprachliche Entwaffnungsversion vorstellen. Eine Sache, die mir aufgefallen ist, wenn ich hier drin bin, siehst du, dass das draußen ein Stroker ist? Ich habe darauf geklickt. Da ist eigentlich das gebrochenes Weiß um die Außenseite herum. Es hat die grüne Füllung, aber ich werde das Off-White auf eine rote Linie drehen, was bedeutet, dass es keinen Strich hat und es richtet sich nach oben. Steht immer noch nicht perfekt auf, oder? Manchmal ziehen Sie es aus und ziehen Sie es zurück. Das sieht jetzt perfekt aus. Schön. Möchte ich sonst noch etwas tun? Nein, das hat eine Menge von den Kernsachen, die ich da drinnen will. Eine letzte Sache, während wir Ewigkeiten damit verbringen , ist, dass ich diesen Text kopieren und einfügen werde. Ich werde es hier aufstellen und es gibt ein besseres Exemplar, das ich da reingehen möchte. Ich werde dieses kleine Ding haben, das sagt: „Ich bin momentan für die Arbeit verfügbar.“ Ich werde diese gelbe Farbe verwenden und ich werde sie weiterziehen. Ich werde hier eine Ellipse einlegen, wie ein kleiner Kreis. Ich werde ein Häkchen setzen. Wir speichern das Häkchen für später, weil ich Ihnen zeigen werde, wie das in den Symbolen Teil der Videoserie zu tun. Aber für den Kreis, halten Sie das Rechteck-Werkzeug gedrückt, greifen Sie das Ellipsen-Werkzeug, und wenn Sie nur eine zufällige ziehen, wird es in Ordnung sein. Wahrscheinlich wirst du es abhauen. Aber wenn Sie die Umschalttaste gedrückt halten, während Sie es herausziehen, wird es zu einem perfekten Kreis machen, während Sie fahren. Wenn du gefahren wärst. Es war ein langer Tag. Also wird es hier ein Kreis sein. Wir werden es mit diesem helleren Grün füllen. Es wird mehr Sinn machen, wenn wir dieses Bild im Hintergrund ändern. „ Befehlstaste-1". Alles ist die richtige Größe, denke ich. Ich glaube, es könnte sein, dass der Kreis ein großer ist, aber wir werden ihn später ändern. Das reicht für das Produktionsvideo. Gehen wir los und fangen an, das nächste Stück zu machen. 22. Kostenlose Bilder vs. lizenzfreie Bilder: Hallo, da. In diesem Video schauen wir uns an, woher Sie kostenlose Bilder bekommen können und was lizenzfreie Bilder sind. Wir fangen mit den kostenlosen Bildern an. Gute Orte, um zu gehen. Der beste Ort ist wahrscheinlich dieser freeimages.com genannt. Es gibt eine Menge Sachen hier drin, und Sie brauchen nur einen Login und Sie können sie kommerziell verwenden, was ziemlich cool ist. Wenn ich ein Bild von einer Rose brauchte, müssen Sie diese Premium hier ignorieren. Das ist, wie, ich denke, die Seite macht ihr Geld, ist es zeigt Ihnen ein paar Sachen, die halb anständig sind und dann geht, was ist mit diesen? Das sind diejenigen, für die du am Ende bezahlen wirst , und damit gibt es kein Problem. Aber wenn Sie kostenlos suchen, mein großer Tipp für die Verwendung einer der kostenlosen Websites offensichtlich. Auf der Seite hier sagen sie Relevanz. Die meisten von ihnen werden damit beginnen. Sie möchten zu dem gehen, der Most Heruntergeladen sagt. Ich finde, dass die Creme der Ernte an die Spitze bringen wird. Diejenigen, die am meisten heruntergeladen wurden. Sie können sehen, dass sie alle unterschiedlich groß sind. Einige von ihnen sind wirklich groß und einige von ihnen sind ziemlich klein, wie dieser hier ist ziemlich schön, es ist ein Ehering, der auf Weiß geschnitten wird, und hier freeimages.com. Jetzt noch eine coole Seite zu gehen, das ist eigentlich genau wie ein Verzeichnis für viele andere der kleineren, freien Bilder, und ich weiß, das ist ein großer langer Link nach oben hier, ich werde einen Link in der Beschreibung irgendwo hinterlassen, aber wenn Sie nur Google „Shopify 22 awesome Websites für atemberaubende kostenlose Stock Bilder“, werden Sie am Ende hier. Was ist wirklich cool daran ist, dass ganz Nische wie einige der Websites, die sie ein freies Bild pro Tag aufstellen werden, aber einige von ihnen sind wirklich schön. Ich habe diese Typen hier angeschaut, Gratisography. Dieser Typ, er ist Fotograf, Ryan McGuire. Er macht einige echte coole Sachen und er lässt sie kommerziell verwendet werden. Gut gemacht, Ryan. Ja, du kannst durchmachen. Es gibt mehr kommerzielle Sachen hier mit Modellen, während, sagen wir, freeimages.com oft nur eine echte standardisierte Aktienbibliothek ist. Sie einen Blick durch diese Liste und es gibt viele verschiedene Dinge hier drin, aber Free Images ist der Hauptort. In Bezug auf die lizenzfreie, gebührenfreie bedeutet nicht kostenlos, es bedeutet nur, dass Sie dafür einmal bezahlen und Sie bekommen, um es immer wieder zu verwenden. Sie werden zwischen $20 und $40 US zu kaufen und dann können Sie sie wiederverwenden. Sie sind drei Hauptakteure: iStock, Shutterstock, und dieser hier namens Adobe Stock. Sie alle haben eine sehr ähnliche Bibliothek, die eine ähnliche Sache macht. Ich benutze Adobe Stock hauptsächlich leicht, weil es so gut mit der Creative Cloud zusammenhängt, und das ist wahrscheinlich der größte Vorteil gegenüber den anderen. Sie alle haben etwas unterschiedliche fantastische Schnittstellen und verwenden Sie daher die, die Ihnen am besten gefällt. Ich verwende Adobe Stock, um für draußen zu speichern. Ich möchte in einigen Designern Bilder setzen. Also habe ich gerade einen Designer eingetippt. Eigentlich, lassen Sie uns in Grafik-Designer, und so kommt es. Ziemlich ähnlich. Also, was ich tun werde, ist, dass ich inspirierend aussehende Designer-Dinge schnappen werde, und was ich tun werde, ist, erinnern Sie sich, früher in diesem Tutorial, Ich habe diese Bibliothek genannt, oder ist es da Illustrator? Keine Ahnung, Dans Portfolio ist das, was ich es nenne. Also habe ich eine Vorschau in Dans Portfolios gespeichert. Wenn ich jetzt in Illustrator springe, in Ordnung. Wir haben Illustrator, und ich habe diesen kleinen Update-Button gedrückt, da ist er. Das Schöne daran ist, dass ich noch nicht dafür bezahlt habe, Sie können sehen, dass es das Wasserzeichen hat, aber es ist eine schöne große Kopie und ich kann beginnen diese meinem Kunden zu präsentieren und sagen, das sind die Bilder, ist, was ich bin darüber nachzudenken und ihnen auch Kosten für diese Bilder zu geben. Was wirklich schön ist, ist, wenn ich beginne, dies zu entwerfen, und ich beginne es anzupassen und es zuschneide und die Farben zu ändern, was ich tun kann, ist hier, kann ich mit der rechten Maustaste darauf klicken und einfach Lizenzbild sagen, und wenn ich, sagen wir, ein Abonnement für Adobe Stock und ich kann 10 Bilder pro Monat für etwas wie $20 US bekommen, etwas um das, und es würde nur lizenzieren und diese Sache aktualisieren. Ich muss es nicht lesen oder neu verknüpfen oder neu importieren oder irgendeinen von diesem Jazz, also ist es ziemlich cool. Was ich dafür tun werde, ist, dass ich durchgehe und einige Designer-Bilder schnappen werde. Ich werde Ux eingeben, mein Lieblingswort. Ich werde ja sagen, ich möchte, dass dieser Teil davon ist, und Sie können sehen, dass es einen Kauf gibt, aber es gibt auch nur eine Speicher-Vorschau. Ich werde diese Vorschau speichern und ich werde diese Vorschau speichern. Ich werde das retten. Ich werde dich retten, und ich werde dich retten. Ich tue so, als wäre das mein Portfolio. Ich habe diese Dinge total nicht gemacht, ich lade sie einfach herunter. Sie werden hier sehen, hoffentlich sollten wir ein paar kleine Bilder bekommen, damit wir anfangen können mit zu arbeiten. In Ordnung. Egal, ob Sie Adobe Stock verwenden, es gibt einen Link auf dem Bildschirm, um zu Adobe Stock zu gelangen. Wenn du es noch nie benutzt hast und dich anmelden möchtest, benutze meinen kleinen Link. Warum? Weil ich einen Schnitt von Adobe bekomme. Es kostet Sie nichts anderes, aber sie geben mir ein bisschen einen Schnitt Ihres Abonnements. Es ist Win-Win, gewinnen Sie vor allem für mich. Aber ja, versuchen Sie Adobe Stock oder iStock ist wirklich gut und Shutterstock ist eine andere. Vielleicht gehen Sie und vergleichen Sie diese und sehen Sie, welche Sie verwenden möchten. Kostenlose Bilder kamen zu freeimages.com, und wenn Sie lizenzfreie erhalten möchten, die Sie immer und immer wieder für viele verschiedene Projekte kaufen und verwenden können , gehen Sie zu stock.adobe.com. 23. Hinzufügen, Linken, Zuschneiden und Maskierung von Bildern in Illustrator: In diesem Video, was wir tun werden, ist, dass wir einige Bilder einbringen und wir werden sehen wie man sie in diese kleinen Thumbnails hier zuschneidet. Wir schauen uns sowohl die Quadrate als auch die Kreise an. Lass uns gehen. Zunächst einmal schalten wir unsere Guides ein, denken Sie daran, es ist Befehl, Semikolon oder wenn Sie auf einem PC sind, es ist Control, Semikolon. Ich werde ein wenig nach unten scrollen, ich werde ein wenig verkleinern. Was ich tun möchte, ist, dass ich meine kleinen Thumbnails hinzufügen möchte, wie wir es in unserem Wireframe getan haben. Ich werde das Rechteck-Werkzeug greifen und ich werde meine Faust ausziehen. Es gibt mein erstes Thumbnail, es wird 1, 2, 3, 4 Spalten umfassen und jetzt möchte ich ein Bild darin einfügen. Eigentlich, was ich tun könnte, ist, ich ihm eine Füllfarbe geben könnte, braucht keine Füllfarbe, ich mache es nur, also ist es hilfreich für Sie zu sehen. Ich werde diese Typen hier duplizieren. Ich werde 1, 2, 3 haben. Schön. Ich halte Shift gedrückt, wählen Sie all das aus. Ich habe meinen schwarzen Pfeil. Ich halte meine Alt-Taste gedrückt, denken Sie daran, um gleichzeitig zu ziehen und zu kopieren, oder Sie können einfach Control C, Control V gehen . Was ich tun möchte, ist, dass ich jetzt in diese Bilder einfügen möchte. Um ein Bild in Illustrator zu importieren, gehen wir zu Datei und wir gehen nach unten zu etwas namens Ort. Sie verwenden Platz statt Import, nur um alle zu verwirren. Wechseln Sie zu Datei, Platzieren und dann zu Ihren Übungsdateien. Ich habe ein paar Bilder. Ich habe sie in der früheren Tutorial und anderen Versionen mit Wasserzeichen heruntergeladen, offensichtlich. Wenn Sie diese verwenden möchten, müssen Sie gehen und sie bei Adobe Stock bezahlen, aber hier ist ein Wasserzeichen diejenigen. Was ich tun werde, ist, dass du sie eins nach dem anderen mitbringen kannst. Ich kann Miniaturbild 1, Platzieren, klicken Sie auf eins, es wird durchkommen, da es in voller Größe ist. Das ist in Ordnung für diese kleinen Thumbnail-Versionen oder diese Wasserzeichen-Versionen, aber manchmal können sie ziemlich groß sein. Was Sie tun können, ist zu Datei, Ort zu gehen und was ich bevorzuge, ist, wählen Sie die erste und ziehen Sie sie einfach heraus. Es wird die Höhe und Breite einschränken. Um es auf eine grobe Größe zu bringen, die Sie wollen, dass es zuerst sein. Sie können in viele zu einer Zeit bringen Datei, Ort, und Sie können all diese Jungs, all unsere Thumbnails und Sie können gehen Sie klicken, können Sie klicken, klicken Sie können Sie, Sie, Sie, Sie, Sie, Sie, Sie, Sie, Sie bekommen die Idee. Sie können sie anbringen, alle nacheinander oder wenn Sie getan haben was ich getan habe und einige Miniaturansichten aus Ihrer Bibliothek erhalten haben, können Sie sie einfach von hier aus ziehen. So oder so, wie Sie Ihre Bilder einbringen. Ich werde meine Stock Library Bilder von hier drüben ziehen und wir werden uns ansehen, sie auf dieses Rechteck zuschneiden. Ziehen Sie sie hinein, richten Sie sie nach oben und passen Sie sie an, wie ich sie in die Box passen möchte. Denn jetzt werden wir sie auf dieses Thumbnail zuschneiden. Ich werde die Umschalttaste halten und das macht es reaktionsschnell skalieren , so dass die Höhe und Breite kommen und ich werde es grob bekommen. Ich kann das nachträglich anpassen. Was ich dann tun muss, ist, dass ich ihn und die Box hinter ihm auswählen muss. Der einfachste Weg zu tun ist, weil es hier nichts gibt, kann ich halten und ziehen. Siehst du, ich kann einfach über diese beiden ziehen und ich bekomme beide. Die Verknüpfung ist Befehl 7 oder Control 7, und Sie werden diese für das Zuschneiden lernen. Der lange Weg befindet sich unter Objekt und befindet sich unter Schnittmaske und Make. Es wird ein bisschen hart, Sie denken, ich werde es beschneiden, oder ich werde es maskieren. Es wird in Illustrator als Clipping-Maske bezeichnet. Sie können dort sehen, es gibt eine Verknüpfung Befehl 7. Was passieren wird, ist, es wird nicht funktionieren. Denn eigentlich muss das hinter unserer Form stehen, die wir beschneiden wollen. Ich werde mit der rechten Maustaste auf ihn klicken und zu Anordnen und An Zurück senden gehen. Ich werde so tun, als ob ich das absichtlich getan habe, aber ich habe es nicht vergessen. Jetzt Befehl 7. Sieh dir das an, glatt. Lasst uns noch einen machen. Lasst uns ihn reinziehen. Halten Sie Shift gedrückt, skalieren Sie ihn so, dass er ungefähr die richtige Größe hat. Bringen Sie ihn da rein. Ich bin okay mit einigen leichten interessanten Zuschnitt, so dass es mir nichts ausmacht, dass es nicht perfekt ist da drin, und denken Sie daran, vergessen Sie nicht, es muss auf der Rückseite sein. Wählen Sie beide und dann Befehl 7 oder Control 7 auf einem PC aus. Sagen Sie, Sie mögen diese Ernte nicht, wie Sie sind, ja, ich dachte, es wäre cool, aber es sieht aus, als wäre es aus. Was Sie tun können, ist, lassen Sie uns nichts mit dem schwarzen Pfeil auswählen, klicken Sie auf den Hintergrund und klicken Sie einmal darauf und Sie erhalten das Quadrat. Wenn Sie auf ihn doppelklicken, was passiert, ist, dass Sie in dieses Ding namens Isolationsmodus gehen, und es bedeutet nur, dass ich drin bin. Denken Sie daran, Layer 1 ist Home-Base, das ist wieder hier, aber wenn ich auf etwas doppelklicke, gehe ich in diese Gruppe. Es wird eine Clip-Gruppe genannt. Es bedeutet, dass ich damit beginnen kann, getrennt von dem Platz auf der Außenseite zu arbeiten. Es ist gut, vorsichtig zu sein, wie Sie es ziehen. Sie können sehen, ich kann das Bild um die Außenseite ziehen oder ich kann die Mitte davon ziehen oder ich kann den Rand des Rechtecks ziehen. Sie können beide Bits in dieser Ansicht ziehen, was ein wenig verwirrend ist. Denken Sie daran, wenn Sie die Mitte greifen, Sie ziehen das Bild und wenn Sie die Kante greifen, ziehen Sie dieses Quadrat auf der Außenseite. Es liegt also an dir, was du tun willst. Ich werde das hier herziehen. Sie können die Größe noch von hier aus ändern. Lass mich für einen großen Clip gehen. Das wird ein Vektorbild sein, es wird sein. Wie auch immer, um auf die Rückseite zur Home-Basis zu gelangen, können Sie diesen Pfeil ein paar Mal klicken oder einfach doppelklicken in diesem keinen Raum um hier, diesen weißen Bereich. Großartig. Wir gehen durch und machen diese. Wir werden dich schnappen. Ich werde es jetzt durchzoomen. Wir werden keine Kreise für diesen speziellen machen, aber ich mache es in der zweiten. Bringen wir dem Kerl den hinten, Clip vielleicht hier, Kommando 7. Schön. Nehmen wir an, ich möchte einen für Kreis oder gerundeten Kreis oder Polygon oder einen Stern machen, es spielt keine Rolle. wir einfach so, als würde ich eine Kreisversion machen. Ich zeichne an meinem schönen Kreis. Ich gebe ihm eine Füllfarbe. Es braucht keins. Macht es uns einfach leichter zu sehen. Ich werde dieses Bild ziehen, legen Sie es über. Schwarzer Pfeil, legen Sie ihn über oben, stellen Sie sicher, dass er darunter ist, wählen Sie beide, Befehl 7, Sie können sehen, dass Sie genau den gleichen Effekt erhalten. Wenn Sie mit einem Stiftwerkzeug bereits praktisch sind, schauen wir uns das Stiftwerkzeug später an. Aber Sie können jede Form zeichnen und genau dasselbe tun, verwenden Sie das als Zuschneidebox. Aber wenn Sie in Notwendigkeit gelehrt werden, keine Sorge, wir werden es in einer anderen Episode tun, auch ein anderes Video zumindest. Lasst uns die letzten Teile machen. Welche, die ich benutze. Ich mag diesen Kerl nicht mehr. Wir haben ihn. Befehl 7. Sie können sehen, Sie können ein bisschen fließen nach einer Weile. Du bist ein bisschen groß, geh runter. Du bist zurück, du, du. Befehl 7 sogar. Der letzte war der Typ dort. Wir wollen ein bisschen größer sein. Welche Abkürzung verwende ich dort? Nur um Dinge hinter einander zu bekommen, und wir sahen es früher ist es die, wenn ich etwas auswähle, das ich nicht will, um es hinter, Arrangieren, Send to Back kannst du es dort sehen? Es ist Befehl, Shift, Square Bracket, Send to Back. Sie können diese eckige Klammer sehen. Auf einem PC wird es Shift and Control, Square Bracket sein. Einige der Abkürzungen, die Sie auswendig lernen, und einige werden Sie nicht. Das letzte, was ich tue, ist, dass ich ein bisschen einen Schlag auf der Außenseite hinzufügen möchte , nur um ihnen eine bessere Konsistenz zu geben. Ich habe meinen schwarzen Pfeil ausgewählt alle von ihnen ausgewählt. Sie werden feststellen, dass der Strich hier oben nicht erschienen ist, weil jetzt als Clip-Gruppe anstelle unserer regulären Boxen bezeichnet wird. Wir können Fenster öffnen und zu Stroke gehen. Da ist es da und ich werde ihm einen Stroke von vielleicht geben, es muss ein Pixel oder höher sein, kann nichts niedriger sein als das, es kann nicht drucken, weil wir es hier mit Pixeln zu tun haben. Großartig. Welche Farbe sollte es sein? Ich werde tun, wo ist meine Strichfarbe? Ich öffne Fenster und gehe zu Farbe. Hier ist es unten unten hier. Meine Strichfarbe ist schwarz. Ich werde wahrscheinlich nur auswählen, ich möchte keine graue Farbe wählen. Sie stoßen wahrscheinlich auf dieses Problem, wenn Sie ein erfahrener Illustrator-Benutzer sind, ist RGB schwer, grau zu wählen, wenn Sie alle übereinstimmen müssen. Die einfachste Möglichkeit, ein Grau auszuwählen, besteht darin, Ihre Farben von RGB zu diesem einen Code Farbton Sättigung und Helligkeit zu wechseln . Das ist wirklich einfach. Es bedeutet, dass nur die Helligkeit nach oben und unten gleitet. Ich werde ein bisschen grau verwenden. Schön. Zu meinen Guides ab, wie sieht es aus? Sieht schön aus, außer das Kunstbrett muss erweitert werden und ich werde den Geist ein wenig nach unten beenden, weil ich meine Fußzeile und Dinge habe, um dort zu bleiben. Das ist es für unsere Beschneidung beim Maskieren von Bildern. Lasst uns das nächste Video durchgehen. 24. So erstellst du verwaschene Bilder in Illustrator mit farbigem Hintergrund: Hey, da. In diesem Video machen wir dieses kleine Bild im Hintergrund hier, wo es ein voller dehnbarer Hintergrund ist, und es ist ausgewaschen, und es hat einen grünen Ton. Wir werden uns ansehen, wie Sie das in Illustrator tun. In Ordnung, zuerst, lasst uns unser Image einbringen. Jetzt gibt es zwei Möglichkeiten, es hereinzubringen, wir können es aus unserer Bibliothek ziehen, wenn wir da drin sind, oder wir können zu Datei, Ort gehen. Nun wird das ändern, wie wir es machen, sagen wir, schwarz und weiß. Ich bringe das Bild ein, ich ziehe es schön und groß, großartig. Wenn ich es so mache, wird es sehr einfach, in Schwarz-Weiß umzuwandeln. Ich zeige Ihnen, dass wir ab und zu einige dieser anderen Bilder betrachten, die mit Ihrer Bibliothek verknüpft sind, und sie werden nicht schwieriger, sie sind nur ein zusätzlicher Schritt. Wir werden es dort beschneiden, wo wir es brauchen. Machen wir es zuerst schwarz-weiß, bevor wir gehen und es in das Quadrat im Hintergrund zuschneiden. Um dies zu tun, ist es ganz einfach, lassen Sie es auswählen und gehen Sie zu „Bearbeiten“, „Farben bearbeiten“ und „In Graustufen konvertieren“. Jetzt gibt es nicht viel Kontrolle in Illustrator, wie Sie in Graustufen konvertieren, es geht einfach, Ihre Graustufen und hoffen auf das Beste. Wenn Sie ein wenig mehr Kontrolle über das, was geht, verschiedene Farben unterschiedliche Grautöne, können Sie dies in Photoshop tun. Jetzt ist dies kein Photoshop-Kurs, also werden wir das auslassen. Aber wenn Sie diese Kontrolle wirklich brauchen, wenden Sie sich an Photoshop und machen Sie eine Einstellungsebene, es ist unter Ebene, Einstellungsebenen und es wird schwarz-weiß genannt. Sie erhalten viel Kontrolle darüber, wie Sie es in Schwarz-Weiß konvertieren, speichern Sie es und bringen Sie es dann in Illustrator. Das ist in Illustrator ziemlich einfach und ich bin glücklich genug mit den Ergebnissen. Wenn ich genau das Gleiche machen will, werde ich dich dort auftauchen. Ich möchte genau das Gleiche tun, sagen wir, diese Grafik hier drin. Weil es an meine Bibliothek gebunden ist, lässt es mich nicht so viel tun. Wenn ich also doppelklicke, doppelklicken Sie erneut darauf, ich habe mein Bild. Wenn ich genau das Gleiche gehe, „Bearbeiten“ und zu „Farben bearbeiten“ gehe, wirst du feststellen, dass es ausgegraut ist. Es ist nur eines der Dinge, die passiert, wenn Sie Sachen aus Ihrer Bibliothek verwenden, weil es verbunden ist. Wenn Sie Ihr Bibliothekselement aktualisieren , wird es hier aktualisiert, so dass Sie es nicht wollen. Um sich mit ihm zu verwirren, ist, Sie müssen nur auf „Einbetten“ klicken. Doppelklicken Sie darauf, bis Sie Ihr Bild erhalten haben. Dann gehen Sie zu „Einbetten“ und dann werden Sie feststellen, dass Sie „Bearbeiten“, „Farben bearbeiten“ und „In Graustufen konvertieren“ können. Ich werde rückgängig machen, weil ich ihn nicht in Graustufen umwandeln will. Ich möchte Sie nur wissen lassen, wenn Sie dieses Problem haben, es könnte ein Logo sein, für das Sie versuchen, es zu tun, alles, was Sie importiert haben. Also haben wir in Graustufen. Ich werde ihn grob dahin bringen, wo ich ihn will, und erinnere mich daran, dass er hinten sein muss. Dann wähle ich beide aus und ich werde meine Verknüpfung verwenden, Befehl, sieben auf einem Mac, und Control, sieben auf einem PC. Es ist, was ich will. Aber was ich tun möchte, ist, ihm diesen grün-dunklen Look zu geben, und es gibt zwei Stufen. Sie greifen Ihr Rechteck-Werkzeug. Ich werde ein Rechteck zeichnen, das das gesamte Dokument dort abdeckt, und ich werde ihm eine Füllung von Schwarz geben, und ich werde ihm einen Strich von keinem geben , der bereits ist, großartig, und wir werden die Deckkraft senken . Sie können die Deckkraft ein paar verschiedene Möglichkeiten in Illustrator senken, wir werden diese hier entlang der Spitze verwenden. Wir gehen einfach runter, bis wir mit dem Hintergrund zufrieden sind, es hängt davon ab, was Sie wollen. Nun offensichtlich ist dies über die Spitze von allem, also was ich tun werde, wird mit der rechten Maustaste gehen und ich werde „Anordnen“ gehen, anstatt den ganzen Weg nach hinten zu gehen, kann ich den ganzen Weg nach hinten gehen. Jetzt steht es hinter diesem Bild. Also werde ich auf dieses Bild klicken und sagen, Sie sind auf der Rückseite. Da gehen wir. Okay, also sieht es besser aus. Ich möchte diesen grünen Farbton hinzufügen. Du könntest es hier lassen und entscheiden, dass ich die Deckkraft hochdrehen werde. Ich werde diesen Hintergrund auswaschen, schwarzen Look, und das ist in Ordnung. Das nächste, was ich tun möchte, ist aufhören, mit den Farben herumzuspielen, Dan, ist, dass ich ein neues Rechteck über all dem erstellen werde. Ich werde die Auswahl zuerst im Hintergrund deaktivieren. Also schwarzer Pfeil in den Hintergrund klicken und dann mein Rechteck-Werkzeug greifen, macht es einfacher. Zeichnen Sie oben ein Rechteck. Ich werde das zu meinem Grün machen. Jetzt muss ich es hinter sich bringen, okay, mit Sandwiches. Ich will es vor der Blackbox und dem Bild, aber hinter dem ganzen Text. Es gibt ein paar der verschiedenen Möglichkeiten. Verschiedene Trainer zeigen Ihnen verschiedene Möglichkeiten. Was ich am einfachsten finde, ist, es einfach abzuziehen, weil es einfacher ist, wieder zusammenzureißen , ist, eigentlich, ich werde diesen Kerl nach hinten schicken. Also, du, die grüne Box, du gehst nach hinten. Dann wollte ich es über diese beiden bringen. Also werde ich dich schnappen. Ich habe sie alle aufgekachelt, damit ich sie alle sehen kann, also kann ich Sie anklicken, „Shift“ halten, um die schwarze Box zu greifen, mit der rechten Maustaste auf beide zu klicken und sie zurückschicken. Die grüne Box ist jetzt hinten. Diese Typen sind hinter der grünen Box, aber vor diesem Text. Okay, so mache ich es. Es gibt verschiedene Wege. Ich benutze das Ebenenbedienfeld. Das ist mein Weg. Nun, was ich tun möchte, ist, offensichtlich, dass das nicht ganz funktioniert. Ich verstehe nur alles. Wir werden etwas verwenden, der als Layer-Modus bezeichnet wird, und das erlaubt uns, Sie könnten einfach die Deckkraft senken, und das funktioniert. Aber es gibt mir nicht den Look, den ich will. Ich will wirklich dieses starke Schwarz mit grüner Füllung in den Rändern. Okay, also würde das funktionieren. Aber was ich tun werde, ist etwas, der als Layer-Modus bezeichnet wird. Sie tun dies, indem Sie auf das Wort „Deckkraft“ oben dort klicken. Also schwarzer Pfeil, klicken Sie auf das grüne Feld, klicken Sie auf „Deckkraft“, und hier oben, wo es Normal sagt, das tut genau das, was Sie denken, es war. Sie können mit diesen herumspielen, so dass Sie sehen können. Es ist eine Art, dass die grüne Box mit dem Zeug dahinter interagiert. Anstatt nur Deckkraft zu verwenden, können Sie diese anderen Modi verwenden. Sie sind alle etwas anders, und wenn Sie ein anderes Bild mit verschiedenen Farben haben, werden Sie einen anderen Ebenenmodus finden, der funktionieren wird. Ich werde Soft Light hauptsächlich verwenden weil ich damit schon herumgespielt habe und es mir gefällt. Aber weiches Licht ist ein wenig stark, also was ich tun werde, ist, dass ich nur die Deckkraft davon senken werde. Also verwende ich Layer-Modus und Opazität und es sieht aus, ich mag es viel besser, als nur die Deckkraft zu senken. Sie können sehen, dass es immer noch die leuchtenden Schwarzen im Hintergrund hat, aber es ist auch getönt, so dass ich immer noch das Grün dort bekommen kann, füllen Sie die Löcher mit Grün. In Ordnung, meine Freunde, so wäscht man einen Hintergrund aus und fügt ihm gleichzeitig ein bisschen Farbe hinzu. Alles klar, auf das nächste Video. 25. So verwendest du Ebenen in Illustrator 2017: Wie geht es Ihnen auf dem Campus? In diesem Video werden wir uns Ebenen in Illustrator ansehen und was wir tun werden, ist, dass wir am Ende so aussehen, wo wir eine Ebene mit all unseren Grafiken haben, okay, und eine Ebene mit der Hintergrundebene. Die coole Sache an der Hintergrundebene ist, dass sie gesperrt ist. Es gibt hier ein Sperrsymbol, also können wir es nicht bewegen. Also gehen wir und machen das jetzt. Ok. Das erste, was ich tun möchte, ist, dass ich hier nicht das Weiß des Hintergrunds verwenden werde, das ist ein reines Weiß von Illustrator. Was ich tun möchte, ist eigentlich, dass ich es wie mein Off-White einfügen möchte, das ich hier benutzen würde. Ok. Also werde ich das Rechteck-Werkzeug greifen und Sie können die Art-Board-Farbe aktualisieren. Ok. Also müssen wir tatsächlich manuell eine Box zeichnen und ihm die Füllung geben, dann werde ich meinen schwarzen Pfeil verwenden, mit der rechten Maustaste darauf klicken, arrangieren, zurückschicken und nur sicherstellen, dass es keinen Strich auf der Außenseite hat, ich benutze nur dieses graue hier. Ok. Das wird also meine Hintergrundfarbe sein. Du könntest es hinter alles stecken, nur um sicherzugehen, dass es alles bedeckt. Ok? Ja, ja. Es gibt keine Möglichkeit, dieses Artboard neu zu färben. Also, was ich jetzt tun möchte, ist mit den Ebenen zu spielen. Weil es mir jetzt wirklich schwer fällt, Dinge zu bewegen, und ich habe versehentlich die Hintergründe ergriffen. Ok. Also ist es einfacher, weil ich nie will, dass sich diese Dinge bewegen. Also möchte ich dieses Glas dazu bringen, dort zu bleiben, wo sie sind und sich nicht bewegen und der einfachste Weg, es zu tun, ist, sie auf ihre eigene Schicht zu kleben, okay und sperren Sie diese Schicht. Ok. Wechseln Sie in Ihrem Ebenenbedienfeld zu Fenster, wechseln Sie zu Ebenen, wo sind Sie Ebenen? Da bist du ja. Ok. Standardmäßig ist es bei einer Ebene üblich, in Illustrator zu arbeiten und nur dann, wenn sie eine Ebene haben. Schwitzen Sie es nicht, wenn Sie nur eine haben, Sie alle wissen, aus Photoshop werden Sie mit Hunderten von Ebenen enden, aber in Illustrator, wenn Sie wissen, ich meine, das wäre nur die eine, das ist nicht schlecht, okay? Es ist also nichts falsch daran. Wir werden jedoch eine neue Ebene erstellen. Diese kleine aufgetauchte Seite hier, okay? Wir werden darauf doppelklicken und es Hintergrund nennen, okay und es gibt nichts im Hintergrund. Sie können das kleine Thumbnail dort sehen, es hat nichts drauf. Was ich tun möchte, ist alles auszuwählen, was ich dorthin bewegen möchte , und weil ich eine Box um all diese ziehe, hat es meine grüne Box, die schwarze Box, das Bild dahinter und diese graue Box alle zusammen in einem großen Schritt, das ist genial. Was wir tun wollen, ist ziehen Sie sie auf diese Hintergrundebene, okay und der einfachste Weg, Sie sehen diesen kleinen Punkt hier, okay, dieses kleine Quadrat, klicken und ziehen Sie es, das alles, was ich ausgewählt hatte, in meinen Hintergrund bewegt -Layer. Cool. Jetzt werde ich es abschließen. Jetzt soll das Verriegelungssymbol nur zufällig wissen, dass das das Verriegelungsloch ist, okay? Klicken Sie darauf, okay, und ich sperre diese Schicht und sie können jetzt nicht verschoben werden, okay? Das einzige Problem ist das und dass es oben ist, okay? Sie können die Hintergründe über meiner Ebene eins sehen. Doppelklicken Sie auf Ebene eins und lassen Sie uns dieses ein Kunstwerk oder Artword nennen und dann ziehen Sie einfach diesen Kerl klicken Sie halten, ziehen Sie, so dass er darunter ist. Jetzt. Ok? Ich klicke auf das Artwork, also ist das meine aktive Ebene. Meine Hintergrundebene ist jetzt, okay, unwählbar, also kann ich gehen und alle diese Jungs auswählen, sie bewegen, ohne den Hintergrund auszuwählen. Ich denke, das ist der Sinn, die Schichten hier zu verwenden. Das andere Schöne daran ist, dass du die Schicht ausschalten kannst, du siehst den Augapfel. Du könntest alle deine Hintergrundebene ein- und ausschalten, okay, indem du einfach auf den kleinen Augapfel klickst. In Ordnung. Meine Freunde, so verwenden Sie Ebenen in Illustrator. Weiter zum nächsten Video. 26. So verwendest du Adobe Market für kostenlose Symbole: In diesem Video werden wir betrügen. Wir brauchen ein Häkchen und wir werden es einfach stehlen, stehlen ist das falsche Wort, wir werden es vom Creative Cloud Marketplace anpassen und es gibt viele gute Sachen drin, die wir verwenden können und wir dürfen legal und es ist alles skalierbar, um dies zu vektorieren. Es erspart uns nur davor, es zu zeichnen. Schauen wir uns das jetzt an. Um zum Adobe Market zu gelangen, haben wir diese Creative Cloud-App installiert. Wenn Sie sie nicht installiert haben, gehen Sie auf adobe.com/downloads und rufen Sie die Creative Cloud-App ab. Das ist diejenige, die Sie herunterladen möchten. Es ist wahrscheinlich bereits auf Ihrem Computer installiert und auf einem Mac ist es oben oben oben auf diesem Symbol. Wenn Sie auf einem PC sind, ist es unten rechts, unten unten unten hier. Sie suchen nach dieser indirektionalen Wolken-Sache. Sie wollen zu Assets gehen und Sie wollen zum Markt gehen. Wir haben uns das vorhin angesehen. Der Markt ist wirklich, wirklich gut für Icons. Also werde ich hier reinklicken und sagen, dass wir ein Häkchen brauchen. „ Ich bin momentan für die Arbeit verfügbar“, könnten Sie ein Häkchen und ein Kreuz haben. Also möchte ich ein Häkchen setzen und durchgehen und einfach das Häkchen auswählen, das ich will, und es gibt viele Möglichkeiten hier drin. Die coole Sache an ihnen ist, dass sie skalierbare Vektoren sind. Dieser hier sieht gut aus für mich, ich werde es in mein Dan's Portfolio herunterladen, perfekt. Da ist es, Download dort. Ich werde ihn hineinziehen. Ich werde ihn wieder hineinziehen. Der Grund, warum er nicht hineinzieht, ist, dass Sie möglicherweise auch auf dieses Problem gestoßen sind, ist, dass ich auf der Ebene namens Hintergrund bin und sie gesperrt ist. Ich tue so, als hätte ich das absichtlich reingesteckt, nur um es dir zu zeigen, aber ich habe es nicht getan. Passiert mit den Besten von uns. Jenseits Ihrer Artwork-Ebene , der freigeschalteten Version, werde ich es auf diese Lay hier ziehen. Was wir sehen werden ist, dass wir ein Bild heruntergeladen haben und Sie sehen können, dass es kein sehr gutes ist, weil es pixelnd ist, wenn ich größer werde. Also, wenn Sie sie herunterladen, gehen Sie zu Marketplace, und wenn Sie auf sie klicken, wurde diese in Photoshop gemacht, nicht gut. Klicken wir hier auf dieses, das ist ein SVG. Denken Sie daran, SVG ist fantastisch skalierbare Vektorgrafiken, es muss AI, EPS oder SVG sein und er wird arbeiten. Auch wenn ich das nicht brauche, ist das in Ordnung. Ich werde zu Download gehen und ich werde es in Dans Portfolio herunterladen, schön. Hier kommt er. Warte, bis er runterlädt, da ist er. Ok, da ist er da. Die coole Sache daran ist jetzt, dass Sie sofort sehen können, dass es die blaue Linie um sie herum hat, aber Sie können sehen, dass es skalierbar ist, was wirklich cool ist. Was ich jetzt tun möchte, ist, ich werde mit der rechten Maustaste darauf klicken, Gruppierung aufheben und mit der rechten Maustaste aufheben, Gruppierung wieder aufheben. Je nachdem, wie diese Gruppe sind, werde ich diese löschen, [unhörbar] und jetzt habe ich mir ein kleines Häkchen. Also habe ich es zweimal aufgehoben. Ich werde ihm eine Füllfarbe meines Off-White geben und ich werde es nach unten skalieren und als meine Grafik verwenden. Ich zoomen hinein, halte Shift in den Ecken gedrückt, erinnere dich daran, und da ist mein kleines Tick-Aroni. Das coole an der Verwendung von Adobe Market ist, dass Sie Vektormaterial dort finden können und Sie es kommerziell verwenden können und Sie Ihr eigenes Häkchen zeichnen können. Wir werden dies in ein wenig tun und Ihnen zeigen, wie man den Pinto benutzt, Dinge wie diese, ich benutze es für alle Arten von Symbolen, einfach einfacher, sie dort zu finden. In Ordnung, so können Sie Adobe Market verwenden, um Symbole für Ihre Entwürfe auszuleihen. 27. So verwendest du Icon Finder für kostenlose Symbole für Websites und UI: Hallo, in diesem Video, was wir tun werden, ist, dass wir diese Bilder bekommen, diese Symbole, diese sozialen Symbole, und wir werden sie kostenlos von einem Ort namens Iconfinder bekommen. Dann gehen wir los und ändern die Farben passend zu unserem Design. Lass uns gehen. Erster Schritt müssen wir Iconfinder verwenden, und gehen Sie los und finden Sie unsere Symbole. Ich liebe Iconfinder, und es gibt viele kostenlose Symbole online, aber es gibt so viele echte schlechte Sachen da draußen, dass es schwer ist, durchzuschauen und die Leute bei Iconfinder haben das für uns getan. Also werden wir eintippen, sagen sozial. Dies könnte Ihr Zuhause sein, es könnte Produkte sein, Symbol, das Sie tun möchten. Was Sie sicherstellen müssen, ist es hängt davon ab, als ob ich meine auf freie und kommerzielle Nutzung habe . Kein Link zurück. Das bedeutet nur, dass ich dafür bezahlen muss, ich muss keinen Link hinzufügen, der sie denkt, das liegt ganz an dir, wie du arbeiten willst. Ich möchte sicherstellen, dass meins auch Vector ist, weil ich keine Pixelation möchte, ich möchte schön skalieren. Aber die Preise sind ziemlich billig, wie wenn ich Any schaue, die Symbole sind für einen Dollar kaufen. So werden sie nicht die Bank zu brechen, wenn es nicht eine, die Sie in der kostenlosen Option telefonieren können , gehen Sie für Bezahlung dafür und dass die Seite als auch unterstützen. Was ich suche ist Vector, Free, No back link. Also kann ich losgehen und es benutzen. Das coole Ding daran ist, dass es nicht nur viele Icons hat. Wenn Sie auf einen von ihnen klicken, hat es oft einen Teil einer größeren Gruppe und das ist, was wirklich praktisch ist. Es macht sie alle gleich aussehen und haben ein ähnliches Aussehen und Gefühl für sie alle, also liebe ich das an dieser Folie hier. Das ist ein Test für Sie. Wir werden, sagen wir, eine Gruppe von diesen herunterladen . Welche Version sollte ich das SVG, das PNG die AI oder das CSH bekommen? Die DW-Shape. Welchen will ich? Entweder die SVG, AI wird perfekt für uns sein. Diese Photoshop-Version funktioniert auch, aber die PNG-Version ist nicht skalierbar. Also wollen wir diese Verengung innen und außen weitermachen, und diese SVG und AI werden uns erlauben, sie neu zu färben. Weil das die meiste Farbe nicht für mich tut und auch nicht dieses Blau ist, passt es nicht zu unseren Farben. Was Sie tun können, ist, dass Sie durchgehen und alle herunterladen können, die Sie wollen. Ich habe einige für uns für Nischen heruntergeladen, sie sind in deinen Übungsdateien, und wir werden sie jetzt herbringen und die Farben ändern. Danke Iconfinder, du bist genial. Was ich tun werde, ist zuallererst, ich werde meinen Guides auf einer kleinen Linie sagen, die hier über den Boden läuft, ist nur ein Teil meines Designs. Ich halte Schicht, um es gerade zu gehen, und dieser hat keine Füllung, keinen Strich und ich werde vielleicht das Grün verwenden , das wir benutzt haben. Wo ist das Grün? Oder vielleicht ein dunkelgrau oder hellgrau. Los geht's. Führt ab. Also jetzt auf meine sozialen Symbole hier unten zu sein. Lassen Sie uns alle unsere Formen einbringen. Gehen wir zu Datei und gehen Sie zu Platzieren. Auf Ihrem Desktop rasieren Sie Ihre Übungsdateien, und hier sind all die sozialen, die ich einbringen möchte, und es sind SVGs, die ich verwenden wollte, das spielt keine Rolle. AI oder SVG. Ich werde gehen, klicken, alle übereinander, nur damit, wenn ich sie alle auswähle, ich die Umschalttaste gedrückt halten und sie alle skalieren kann. Jetzt coole kleine Abkürzung ist, wenn Sie Shift halten, es beschränkt die Höhe und Breite, perfekt, wir wissen bereits, dass. Aber wenn Sie Ihre Alt-Taste auf einem PC oder Wahltaste auf einem Mac gedrückt halten, ist es von der Mitte, oft ist das ziemlich nützlich. Anstatt es zu versuchen, ja, könnten Sie Glück haben, wissen Sie vielleicht. Wie groß werden sie sein? bin mir noch nicht sicher, aber das war's. Was wir tun werden, ist, dass wir sie alle auswählen , weil ich zuerst die Farben von ihnen ändern möchte, und das ist ein schöner schneller Weg, es zu tun. Was wir tun werden, ist, diese im Moment alle zusammengefasst sind. Aber lassen Sie uns sagen, ich möchte eine Übereinstimmung einige meiner Farben ändern. Was ich tun kann, ist zuerst zu zoomen. Ich werde diese Facebook zuerst machen, und es gibt ein paar Möglichkeiten, es zu tun. Der einfachste Weg ist, dass wir die Gruppierung voll von diesen Kerlen aufheben könnten , weil wir im Moment zusammengeschlossen sind. Ich möchte diesen blauen Hintergrund ändern, aber ich würde sie oder die Bühne ändern. Kleiner Trick ist, dass wir diesen schwarzen Pfeil ziemlich benutzt haben. Wir werden den weißen Pfeil benutzen. Der schwarze Pfeil bewegt die Dinge physisch herum, und der weiße Pfeil bewegt sich um kleine Stücke innerhalb dieser kleinen Gruppe. Also sieh dir das an. Ich werde im Hintergrund abklicken und dann klicke ich nur auf diesen kitschigen. Sie können sehen, dass ich anfangen kann, mit ihnen herumzuspielen, obwohl sie eine Gruppe sind, die diesen weißen Pfeil benutzt. Klicken Sie also auf den Hintergrund, klicken Sie einmal auf den Kreis, Sie werden sehen, dass er hier ausgewählt wird. Was ich tun kann, ist, dass ich etwas ganz Cooles machen kann, und diese verfolgen und sagen, weil ich möchte, dass sich all diese Farben ändern, anstatt sie alle einzeln zu machen. So kann ich zu Auswählen, Gleiche, Füllfarbe gehen. Ich werde alles auf diesem Dokument auswählen, das die gleiche Füllfarbe hat, ist er. Sie können sehen, dass er all diese Kerle ausgesucht hat. Es bedeutet, dass ich schnell und einfach gehen und die Farben ändern kann. Wählen Sie die Farbe aus Ihren Farben, und wenn dies ein mehrfarbiges Symbol war, können Sie einfach den weißen Pfeil verwenden und auf verschiedene Teile klicken, und entscheiden und gehen und sie alle ändern. Das Problem wäre, wenn ich die Farbe des weißen und des Twitter-Logos hier ändern wollte , wenn ich auf „Weiß“ klicke und gehe Select Same, wird es weiß auswählen, die irgendwo anders im Dokument verwendet haben. Ich glaube nicht, dass ich weiß benutzt habe, ich habe das gebrochenes Weiß benutzt, aber es wird alles in einem großen Schritt ändern. Es gibt einige Einschränkungen, wenn Sie das Select Same verwenden. Wir haben diese Jungs, wir werden sie im nächsten Video bestellen, wir schauen uns das Ausrichten und Verteilen von L-Symbolen in Illustrator an. 28. So richtest du Symbole in Illustrator für Webdesign aus und verteilst sie: Hallo UI-Designer. Was wir jetzt tun werden, ist diese Symbole nur schön und ausgewogen in diesen Spalten zu bekommen . Alles klar, lass es uns tun. Zuerst möchte ich meine Guides wieder einschalten, das ist Befehlshemikolon oder Steuersemikolon auf einem PC, und zoomen Sie es ein wenig. Ich werde gehen, um eine zu befehligen oder einen auf dem PC zu steuern , um einen Vollbildmodus zu bekommen, weil ich ein Gefühl davon bekommen möchte, wie groß ich diese sein soll. Ich denke, diese Jungs sind ein bisschen zu groß für soziale Symbole , weil das ist, wo die Größe wird auf für eine Website angezeigt werden. Ich werde meins etwas kleiner machen. Ok. Die Reihenfolge von ihnen. Die Art und Weise, wie dies funktioniert, lassen Sie uns Facebook sagen, ist mein wichtigstes, und sagen wir, Twitter ist der nächste und nur bekommen sie in einer groben Reihenfolge. muss nicht schön sein. Dann dein letztes. Es ist der erste und der letzte, der wichtig ist. Ok. Ich werde diese Kerle dazu bringen, eine ganze Spalte zu überspannen, okay? Wir haben sie in irgendeiner Reihenfolge nacheinander. Ich werde alle auswählen, dann oben hier, wenn Sie das nicht sehen können, sagen Sie, dass Sie auf einem wirklich winzigen Bildschirm arbeiten, müssen Sie möglicherweise zu Window Align gehen, und es gibt ein ganzes Panel, das sich öffnet, oder Sie können die Hier oben, es liegt an dir. Was ich gerne tun möchte, ist es wahrscheinlich, dass sie horizontal ausgerichtet sind. Ich werde jedes Mal vertikal und horizontal verwechselt, du könntest gleich sein. Ich werde darauf klicken, nur so dass sie alle aufstellen. Siehst du das? Alles liebevoll aufgereiht. Dann gibt es diese, die horizontal verteilen heißt, nur weil ich es von der Symbolleiste dort lese, aber lassen Sie uns sie horizontal verteilen, und klicken Sie darauf. Es breitet sie einfach gleichmäßig aus. Das ist die Art, wie man sie aufstellt und verteilt. eine letzte Sache, bevor du gehst. Es ist nicht relativ zu dem, was wir hier tun , aber es wird für Sie zu irgendeinem Zeitpunkt nützlich sein. Im Moment ist es standardmäßig an der Auswahl ausgerichtet, was cool ist. Es tut genau das, was wir wollen, aber sagen wir, dass wir es an der App ausrichten wollten, denken Sie an diese Ausrichtung auf die Seite. Sagen Sie, dass ich diese Typen gruppieren werde, also sind sie zusammengefasst. Jetzt möchte ich sagen, ausrichten, aber es wird es auf der Zeichenfläche tun, es bedeutet, wenn ich auf die Mitte horizontal ausrichten klicke, wird es an der Mitte meiner Zeichenfläche ausgerichtet, und Sie können sehen, dass es auch sehr nützlich ist. Es wird sich an das Letzte erinnern, was Sie tun, also werde ich meinen Rücken zur Auswahl wenden, ich werde ein Rückgängigmachen bekommen, um sie wieder dort zu platzieren, wo sie waren, und ich könnte sie wieder aufheben, weil ich sie nicht gruppiert brauchte. In Ordnung, also ist das Ausrichten und Verteilen in Illustrator. 29. So passt du Vektorformen in Illustrator an: In diesem Video werden wir uns die Bearbeitung von Vektoren ansehen , die bereits existieren, die wir heruntergeladen haben, und wir wollen aufhören, mit herumzuspielen und sie ein wenig anzupassen. Wir werden es zu diesem kleinen einfachen Pfeil hier unten tun, wir werden die Stielgröße ändern und es ein wenig zusammen mit der Farbe anpassen, und wir werden auch mit ihnen herumlaufen, sie irgendwie abgerundet machen und alle möglichen lustiges Zeug. Alles klar, also gehen wir und machen das jetzt. Beginnen wir also mit der Bearbeitung eines schönen einfachen wir werden diesen Pfeil verwenden, den ich heruntergeladen habe. Ich habe meins hier in der Bibliothek, weil ich es vom Marktplatz herunterlade, aber ich habe ein Beispiel in den Übungsdateien, die Sie herunterladen können sieh es dir an, es heißt Icon-Pfeil , der nicht schwer zu finden sein sollte. Gehen Sie also zu Datei und platzieren Sie das in, stellen Sie sicher, dass sein Vektor, und wir haben den schwarzen Pfeil verwendet, denken Sie daran, Dinge zu bewegen, und wir haben begrenzt den weißen Pfeil verwendet , um Anpassungen vorzunehmen, also werden wir uns das ansehen. Dies ist der weiße Pfeil, so passen Sie vorhandene Vektoren an. Nehmen wir an, dass ich das etwas kürzer machen möchte, also was ich tue, ist, dass ich hier auf diese Ecke klicken kann, also zuerst in den Hintergrund klicke, stelle sicher, dass nichts ausgewählt ist, klicke in diesen Ankerpunkt, den ich möchte bewegen Sie diese kleinen Punkte an den Ecken werden als Ankerpunkte bezeichnet. Jetzt möchte ich ihn auswählen und kann ihn bewegen, kann ich es anpassen und sagen, das ist, was ich tun möchte, mein schöner Pfeil. So können Sie einige grundlegende Anpassungen mit dem weißen Pfeil vornehmen. Ich werde das rückgängig machen, und sagen wir, ich möchte das irgendwie in ein bisschen stecken damit es ein kürzerer Stiel ist. Also werde ich auf diese erste klicken, also werde ich im Hintergrund klicken, auf den ersten klicken und dann die Umschalttaste gedrückt halten, und dann werden wir zu Ihrer Auswahl hinzufügen, Sie haben zwei Bits ausgewählt und ich klicke und ziehe runter und ich werde nur den Stiel senken, so dass es viel kürzer ist. Wenn du das gleiche dafür machst, kann ich diesen Kerl reinziehen, ich werde ihn ein wenig hineinziehen, diesen Kerl schnappen und ihn ein wenig hineinziehen. Also passe ich meinen Pfeil an und eine andere Sache, die du tun kannst , ist im Moment, dass es scharfe Kanten hat und ich denke, ich will das, ich werde das lassen, also werde ich eine Kopie davon erstellen, mit meinem schwarzen Pfeil, Auswählen, Kopieren einfügen, Ich werde ihn da oben lassen und Sie werden feststellen, dass ich hier in diesem grauen Bereich schaue, es ist ein wirklich einfacher schöner Ort, um zu arbeiten, ohne die Art von durch all die Grafiken und Führungen und Zeug hier drüben behindert zu werden. Also mit diesem ausgewählten, werde ich zurück zu meinem weißen Pfeil und was Sie bemerken werden , ist, dass Sie diese kleinen weißen Punkte hier sehen können, sind, wie man Ecken runden, was heißt, ich werde ein wenig zoomen, Wenn ich diesen Kerl runter schnappe und sie hineinziehe, weil ich die ganze Ecke ausgewählt habe, werden sie alle abgerundet. Das ist, wie man rundet, es muss kein Pfeil sein, es könnte ein Rechteck sein. Sie zeichnen ein Rechteck, greifen den weißen Pfeil, greifen die Ecken und Sie können Ecken auf diese Weise runden. Was Sie auch tun könnten, ist zu sagen, dass Sie jemanden um eine der Ecken wollen , ist, den weißen Pfeil zu greifen, und klicken Sie auf, es wird das direkte Auswahlwerkzeug genannt, ich nenne es immer den weißen Pfeil, weil das am einfachsten ist herauszufinden, aber es heißt das direkte Auswahlwerkzeug, aber wenn Sie auf einen von ihnen klicken, können Sie sehen, ich habe nur einen Punkt auf einem von diesen und ich kann um diese Ecke hier und diese Ecke schneiden , aber er liebt diese Art von Tränen factoid Boxen. So kann man Sachen in diese abgerundeten Ecken umwandeln. Eine andere Sache, die wir tun werden, ist, dass wir sie umwandeln , weil der Moment, in dem es so ist, als wäre es eine ganz einzigartige abgerundete Ecke, was wir tun werden, ist, dass wir diesen Kerl schnappen, wir kopieren und einfügen ihn und was ich gerne zu tun ist, es in ein bisschen mehr Freihand-Stil anzupassen. Also werde ich meinen weißen Pfeil greifen, ich werde hier auf diese Ecke klicken und anstatt es nur diese abgerundete Ecke zu machen, die wirklich symmetrisch ist, mit dem es hier oben geklickt wird, können Sie es im Moment konvertieren es ist eine Ecke, man kann sagen, es ist eine schöne scharfe Ecke, Sie können hier auf diese klicken und das wird es glätten. Es wird nur unserem Ankerpunkt diese Griffe geben, so dass Sie sehen können der Pfad noch tatsächlich durch den Ankerpunkt geht, es war da, jetzt wurde es von diesen kleinen Griffen hier ausgestreckt, ich denke an sie wie kleine Schwerkraft Dinge Diese Art von, die Linie muss immer noch durch den Ankerpunkt gehen, aber diese kleinen Griffe passen an, wie sie durchläuft und Sie können damit anfangen zu spielen, um ihm irgendwie ein bisschen mehr von einer freien Form zu geben. Sie können dies auch brechen, weil in dem Moment, in dem sie die Wippe sind, wo Sie eine Seite tun, wird es die andere reparieren. Also, was Sie tun können, ist Sie wollen, um sie zu schnappen, halten Sie die Alt-Taste auf Ihrem PC oder Wahltaste auf einem Make gedrückt und beobachten Sie dies, Ich klicke auf eine von ihnen sie Art von Snap. Also gibt es immer noch Biegen der Linie, aber sie tun nicht mehr Wippe Option und so gibt es ein paar kleine Dinge, die wir hier gelernt haben, eine ist, dass wir diese Ecken durch Greifen diese Punkte umrunden können, aber wenn wir mehr wollen einer Freiformform, klicken wir auf die Ecke, und wir sagen, ich möchte, dass Sie eine glatte sein, und wenn Sie es brechen wollen , weil es im Moment ist eine Art Ursache Glättung auf quer, aber es gibt eine Interaktion zwischen den beiden, die hält es glättet, aber sagen Sie, dass Sie das nicht wollen, können Sie die Alt- oder Wahltaste gedrückt halten, sie brechen und Sie können aufhören, mit diesen Dingen ein wenig mehr Details herumzulaufen. Also das nächste, was ich tun möchte, ist es zu färben. Jetzt habe ich normalerweise heruntergeladen, klicken Sie einfach auf Ihre Farben hier und es wird funktionieren, aber dieses spezielle Beispiel, und das ist wahrscheinlich, was Sie von Icon-Finder oder vom Marktplatz erhalten werden, ist diese Vektorecke beobachten und gehen Sie eine Farbe. Es wird diese beobachten diese hier unten wierdly fühlt sich wie ein Fehler im Illustrator als alles andere, ich mache rückgängig, um die Farben loszuwerden ist, können Sie eines von zwei Dingen tun, eine ist, Sie können es weiter doppelklicken, gehen Sie hinein diesen Pfeil, doppelklicken Sie erneut, um in den Pfad zu gehen, und dann kann ich es färben. Wir würden diese Art von leichtgewichtiger Kombination verlassen, dass jemand gespeichert wird, ich werde das rückgängig machen, kommen Sie zurück, indem Sie auf den Hintergrund doppelklicken. Ich finde den einfachsten Weg ist diese Farb-Themes hier, ich werde mit der rechten Maustaste darauf klicken und gehen Sie zu Farbfeldern hinzufügen und Sie werden unten unten feststellen, hier meine Farbfelder Panel, meine vorgefertigten kleinen Farben sind die Farben, die Sie sehen können kleine Versionen von, und ich klicke auf diese und sagen unten unten hier, Bereiche, die sie hatten die Farben, doppelklicken Sie darauf, bis Sie direkt in es zu bekommen und dann ändern Sie die Farbe. Dann vergewissern Sie sich, dass Sie auf den Hintergrund doppelklicken, um den ganzen Weg zurück hierher zu kommen, und wir werden diesen Kerl benutzen. Also werde ich ihn kopieren, ich lasse die Kerle da drüben, ich werde zoomen und ich werde diesen kleinen Pfeil hier benutzen. Er ist ein bisschen groß, halten Sie Shift gedrückt, denken Sie daran, proportional zu skalieren und was ich tun werde, ist, ich werde es nach unten skalieren und ich werde es drehen. Jetzt gibt es ein Rotationswerkzeug und da ist es, Sie können darauf klicken und einfach drehen Sie sie um. Was die meisten Leute tun, ist nur mit dem schwarzen Pfeil, wenn ich heranzoomen, wenn Sie über einem dieser schweben, haben wir die Altersgruppen viel für die Größenänderung verwendet, aber beobachten Sie dies, wenn ich einen Hover gerade draußen habe, können Sie sehen, dass dies wie die Hand eines Menschen ist, so dass Skalierung, Drehung, nichts anderes, Rotation, Skalierung, so dass wir die Rotation mit dem kleinen gebogenen Pfeil wollen, und Sie können es drehen und wenn Sie die Umschalttaste gedrückt halten, während Sie es drehen, können Sie sehen, es sperrt es in 45-Grad-Winkel und das wird für meinen Pfeil funktionieren, wir wollen diesen Weg gehen. Ordnung, da ist mein kleiner Pfeil, und ich habe das ein bisschen angepasst, nicht viel den Stiel reingesteckt, aber wir haben ein bisschen über das Anpassen von Vektorgrafiken gelernt , die wir vielleicht nicht erstellt haben, gehen wir in der nächsten Episode weiter und schauen uns an, unsere eigenen Grafiken zu erstellen. Alles klar, ich seh dir das nächste Video. 30. So erstellst du benutzerdefinierte Symbole und Logos mit dem Shape Builder Tool in Illustrator: Hallo, da. In diesem Video werden wir diese Logoform hier mit dem Shape Builder erstellen. Wir werden auch all diese lustigen kleinen Jungs bauen. Gehen wir und tun Sie das und lernen, wie Sie das Shape-Builder-Werkzeug verwenden. Lasst uns zuerst diese Kerle löschen. Sie stammen aus einem früheren Tutorial, und wir werden diesen Einfügebereich auf der Seite hier verwenden, aber Sie können ein neues Dokument verwenden. Das Form-Builder-Werkzeug, das Sie lieben werden. Als sie mit diesem als Trainer herauskamen, sprang ich um glückliche Tage denn das nächste, was wir danach tun müssen, ist das Stift-Werkzeug. Wenn Sie bereits versucht haben, Illustrator zu lernen, und Sie zum Stiftwerkzeug gegangen sind und versuchen, Teile zu verbinden. Es ist ein Schmerz im Hintern. Jetzt Shape Builder wird Sie zu einem Profi ziemlich schnell machen. Was wir tun werden ist, dass ich ihm einen Schlag auf der Außenseite von Magenta geben werde, nur weil ich ihm einen schönen dicken Schlag geben werde, damit du es sehen kannst. Halten Sie „Shift“ gedrückt, um einen perfekten Kreis zu erhalten. Ich werde dasselbe mit dem Rechteck-Werkzeug tun. Rechteck-Werkzeug, ich werde das zeichnen. Ich baue nur eine zufällige Form, um Ihnen ein bisschen ein Beispiel zu zeigen, ich werde das Sternwerkzeug greifen. Sie können sehen, dass hier alle möglichen seltsamen Dinge vor sich gehen. Wenn ich diese Dinge füllen möchte, wenn du Illustrator noch nie benutzt hast, bist du vielleicht nicht so beeindruckt, aber wenn du herumfummelst und versucht hast, dich selbst zu lehren, wird das überwältigend sein. Ich habe alle drei ausgewählt. Ich werde dieses unschuldig aussehende Werkzeug hier unten holen. Es wird das Shape Builder-Werkzeug genannt. Was es mir erlaubt, ist ein paar nette Dinge. Es erlaubt mir, diese Lücken zu füllen. Sie sind nicht wirklich beigetreten, aber das wird sie dazu bringen, es für uns zu tun. Ich werde eine Füllfarbe auswählen. Ich werde sagen, ich will, dass du dich mit füllst, ich weiß es nicht. Wo sind meine Farbfelder, das sind die Farbfelder, die ich hier gekauft habe. Ich werde mir das Grün schnappen und mir das ansehen. Schließen Sie das wieder. Ich kann sagen, ich möchte, dass du grün bist und vielleicht grün bist. Aber ich möchte, dass der Rest von Ihnen, sagen Sie, dass das Stück orange ist, oder die rote Farbe. Sie können sehen, wie schnell und einfach es ist, diese Dinge zu färben. Was Sie auch anfangen können, ist, sich ihnen anzuschließen. Sagen Sie, dass ich möchte, dass diese Jungs die gleiche Form haben, nicht zwei separate Farben mit einem Strich um sie herum. Was Sie tun können, ist, ich habe diese Farbe hier ausgewählt. Ich werde rüber ziehen. Kannst du sehen, dass ich eine Linie gezeichnet habe, indem ich meine Maus über diese beiden drückte, und beobachten, es macht es verschmilzt es. Also, wenn Sie jemals mit dem Pathfinder-Tool herumgeschaut haben, verabschieden Sie sich auch Pathfinder-Tool. Schöne Sache ist auch, dass du Dinge trimmen kannst, sagen, dass du diese Kiste nicht hier oben willst. Sie können die Alt-Taste auf einem PC oder die Wahltaste auf dem Mac gedrückt halten, sehen Sie dies, und klicken Sie darauf, und hey, trimmt es, schön. Also kann ich sagen, dass ich das nicht will, das will ich nicht. Du kannst ein paar Dinge beschneiden, ich will keins von diesen beiden. Sie können das Erstellen von Shapes beenden, während Sie vorhandene vorgefertigte Shapes verwenden. Ja, es macht es wirklich einfach, Dinge zu erstellen. Sie können sehen, dass sie alle getrennt sind. Ich habe ein cooles bisschen, ich weiß nicht, was das ist. Aber das ist der Anfang damit. Ich weiß nicht, woher er er übrig war. Schauen wir uns eines der Dinge an, die Sie damit machen können. Nehmen wir an, lassen Sie uns das Linienwerkzeug verwenden und zeichnen uns ein kleines Home-Symbol, wie eine Home-Schaltfläche. Ich ziehe es frei. Alles, was du tun musst, ist sicherzustellen, dass sie sich überlappen. Hier siehst du mein kleines Stockhaus. Kleines Haus unten hier, um sicherzustellen, dass sich alles überlappt. Wenn nicht, greifen Sie Ihren weißen Pfeil, klicken Sie auf einen der Punkte, klicken Sie auf „Aus“ auf den Hintergrund, klicken Sie auf einen der Punkte und Sie können ihn bewegen. Stellen Sie sicher, dass sie sich alle überlappen. Wählen Sie alles aus, greifen Sie meinen Form-Builder. Wählen Sie eine Farbe, mit der ich sie füllen werde. Eigentlich legen wir ein Dach auf dieses Ding. Lasst uns ein Dach drauf legen. Schnappen Sie sich meinen Formbauer. Eigentlich, wählen Sie sie alle zuerst aus. Greifen Sie Shape Builder, wählen Sie eine Füllfarbe. In einer meiner Farben habe ich Grün für das Dach ausgewählt. Cool, hey, du kannst es einfach ausfüllen und dann kann ich gehen, was ich noch hier drin habe, eine andere Farbe wählen, Orange. Füllen Sie das Haus und die Tür wird gelb sein. Es ist einfach, hier benutzerdefinierte Formen zu erstellen. Jetzt denkst du vielleicht : „Was ist mit all den hässlichen Stokes?“ Es gibt ein paar Dinge, die wir tun könnten. Ich habe gerade meinen schwarzen Pfeil benutzt. Klicken Sie im Hintergrund auf „off“. Klicken Sie auf die Umschalttaste, wählen Sie alle drei davon aus. Das könnte ich einfach gebrauchen. Ich habe immer noch den Schlag draußen. Ich könnte sie alle auswählen und sagen: „Kein Schlaganfall“. Sie können dort sehen, dass ich all diese Formen gemacht habe, oder Sie können anfangen, solche Sachen zu machen. Sagen Sie, ich möchte nur Bits der Striche, aber ich möchte diese Kanten mit dem Shape-Builder-Werkzeug wieder abschneiden, indem Sie Alt gedrückt halten. Denken Sie daran, dass standardmäßig Formen hinzugefügt werden. Ich kann klicken und hinzufügen, aber wenn ich Shapes entfernen möchte, halte ich die Alt-Taste auf einem PC oder Wahltaste auf dem Mac gedrückt, beobachte dies, Ich kann über diese Jungs ziehen. Auf Wiedersehen. Wie cool ist das? Ich liebe dieses Werkzeug. Sie können die loswerden, die Sie wollen. Behalte die, die du nicht tust. Das ist ein bisschen mehr vom Shape Builder-Werkzeug. Sie können auch solche Dinge tun. Du kannst sagen, „Typ“, und ich werde tun, „Dan“. Nein, ich will kein Diktat. Klicken Sie auf und geben Sie das Wort „Dan“ ein. Ich werde es schön und groß machen. Wo sind meine Schriftgrößen? Sogar noch größer. Halten Sie Shift gedrückt, benutzen Sie meinen schwarzen Pfeil, machen Sie ihn schön groß. Wählen Sie eine Schriftart, die nicht super lahm ist. Museo Slab irgendwie ein Mann. Jetzt wird der Shape-Builder nicht so funktionieren, während er bearbeitbarer Typ ist. Was wir tun müssen, ist, dass wir zu Type und diesem gehen, und hier ist das Erstellen von Umrissen. Okay, jetzt ist es nicht mehr bearbeitbarer Typ. Ich kann weder die Schreibweise noch die Schriftart ändern. Möglicherweise möchten Sie es duplizieren, bevor Sie dies tun. Aber jetzt ist es eine Form wie diese anderen Formen hier, und wir können anfangen, mit ihnen herumzuspielen. Standardmäßig sind sie alle gruppiert. Ich werde mit der rechten Maustaste darauf klicken, Gruppierung aufheben. Hoffentlich kann ich jetzt anfangen, etwas cool zu machen. Wenn ich cool sage, wird es ziemlich lahm sein, kann ich schon sagen. Das ist ein gutes Beispiel. Wählen Sie alle diese Jungs, ich werde mein Form-Builder-Tool greifen. Stehen Sie zurück, Form-Builder. Was ich tun werde, ist vielleicht einfach die Bits zu löschen, die Crossover, um eine Art zu tun, ich weiß nicht einmal, was ich tue. Wählen Sie eine Füllfarbe aus. Wir holen hier eine Farbe aus meinen Mustern. Du und du. Oh, ja, schrecklich. Eigentlich könnte ich das Form-Builder-Tool greifen und das einfach dort löschen. Ich will ihn nicht. Oh ja, wir sind funky. Shape Builder Werkzeug, immer besser. Schauen wir uns an, unser Logo wieder aufzubauen, denn das ist wirklich, was ich tun wollte, ist so etwas zu machen und man könnte aufhören. Du wirst wahrscheinlich in der Lage sein zu sehen, dass das ziemlich einfach wird, oder? Ist es. Um diese Form dort zu machen, greifen wir mein Ellipsenwerkzeug. Ich habe „Shift“ gedrückt, um sicherzustellen, dass es perfekt sphärisch geht. Ich könnte es tatsächlich dazu bringen, dass es draußen einen Schlaganfall hat, es gibt keinen Grund, das zu tun, nur um es euch leicht zu verstehen. Draußen ist nur ein schwarzer Schlag, ich bin jetzt wieder auf meinem schwarzen Pfeil. Ich will zwei dieser Wahrscheinlichkeit, also werde ich sie kopieren. Wenn ich es einfüge, fügen Sie es Illustrator einfach in der Mitte des Bildschirms ein. Wenn Sie zu „Bearbeiten“ gehen und zu „Einfügen in Front“ gehen, sieht nichts so aus, als ob es passiert, aber es gibt eine andere Kopie genau vor der, die wir vorher hatten. Wenn ich eine der Ecken packe, kann ich sie kleiner machen. Wenn ich „Shift“ halte, während ich es greife, wird es es vollkommen kleiner machen, wie in der Höhe und der Breite. Denken Sie daran, dass Abkürzung, die wir vor ein paar Videos gelernt haben, wenn wir die Option auch gedrückt halten. Also Shift und Option oder wenn Sie auf einem PC sind, ist es Shift und Alt, und es wird es von der Mitte aus tun. Wir haben zwei kleine Kreise. Sie können sie einfach separat zeichnen, beide auswählen und ausrichten. Das nächste, was ich tun möchte, ist, dass ich mein Zeilenwerkzeug greifen und weil ich intelligente Guides an habe. Wenn du es nicht tust, stelle sicher, dass das angekreuzt ist, kann ich von der Mitte hier aus gehen. Wenn ich versuche, eine andere Linie von der Mitte zu zeichnen, beginnt es, die anzupassen, die ich habe. Also, was Sie tun können, ist zurück zum schwarzen Pfeil, klicken Sie im Hintergrund, dann greifen Sie Ihr Linien-Werkzeug, starten Sie ein neues. Zurück zum schwarzen Pfeil. Klicken Sie im Hintergrund auf „off“. Etwas schmerzhaft. Ich mache das nur wie Liniensegment-y Sache für unsere Marke, um eine Art Infografik-y aussehende bisschen zu sein. Sie können sehen, wie einfach es sein wird, zu füllen. Schwarzer Pfeil, wähle sie alle aus und ich mache so etwas. Denk dran, [unhörbare] riesige Version. Vielleicht habe ich ein zu viele Segmente. Ich bin mir nicht sicher, wie ich das machen soll. Färben Sie sie, wir klären es aus. Mit diesem ausgewählten Werkzeug „Shape Builder“. Was ich tun werde, ist hier unten, ich werde mir ein Musterfeld aussuchen. Es spielt keine Rolle, ob du es hier oder hier unten abholst. Es spielt eine Rolle, wenn Sie auf diese klicken, es füllt nur die ganze Sache. Fühlt sich wie ein kleiner Käfer an. Die Bibliotheken sind fantastisch, aber es gibt ein paar Kleinigkeiten. Denken Sie daran, wenn Sie selbst in dieses Tutorial springen, müssen Sie möglicherweise mit der rechten Maustaste auf diesen Kerl klicken und sagen: „Fügen Sie die Farbfelder hinzu“, damit Sie sie hier unten haben. Diese Farbe wird diejenige sein, die eine wird diese sein. Das wird das sein. Es geht vor einem dunklen Hintergrund, deshalb kann ich das Weiß benutzen. geht's mir gut. Ehrfürchtig. Was ich tun möchte, ist, dass ich diese Typen löschen könnte. Es gibt ein paar Möglichkeiten. Aber was ich tun könnte, ist nur klicken Sie auf diese, halten Sie, „Shift“, um alle diese Teile auszuwählen und einfach zu verschieben. Wählen Sie alle aus. Sie bekommen immer noch einen schwarzen Schlag um sie herum. Sag: „Keine Bitte“. Jetzt habe ich mir eine coole kleine formschöne Sache für mein Logo. Was ich tun könnte, ist, weil sie alle getrennt sind, was cool ist, wählen Sie sie alle, klicken Sie mit der rechten Maustaste auf sie und gehen Sie zu „Gruppe“. Wenn Sie auf einem Mac arbeiten und versuchen, mit der rechten Maustaste zu klicken, und es wird nicht mit der rechten Maustaste klicken, gehen Sie zu „Objekt“ und es gibt „Gruppe“ hier. Sie werden sich mit den Shape Builder Tool Lots finden. Es ist mein Weg, um alle möglichen interessanten Formen zu bauen, ohne zum Stiftwerkzeug gehen zu müssen . Aber das Stift-Werkzeug ist eine Notwendigkeit, und wir werden das im nächsten Video lernen. Also gehen wir und machen das. 31. So zeichnest du Symbole und Logos in Illustrator mit dem Stiftwerkzeug: In Ordnung. In dieser Übung werden wir diesen kleinen Kiwi und dieses Kleeblatt hier unten ziehen, und wir werden eine Krone zeichnen. Sie sind alle Vektoren. Sie sind schön in Siegesbetten, und wir werden Ihnen zeigen, wie Sie dieses schöne, schöne Stift-Werkzeug dort zu verwenden . Lass uns das machen. Erster Schritt, was wir tun werden, ist, dass wir diese auf ein eigenes Dokument zeichnen und kopieren und einfügen sie später, nur um nicht zu verwirren mit diesem Dokument. Gehen wir zu Datei, gehen wir zu Neu. Es spielt keine Rolle, wir werden auf Print sein. Lassen Sie uns A4 oder Letter verwenden. Ich mache mir keine Sorgen um die Größe. Wir werden einige Dinge zum Zeichnen einbringen. Nun, die meiste Zeit, wenn es eine ziemlich komplexe Form ist, werde ich es mit Hand in mein Notizbuch zeichnen und dann ein Foto davon machen und es reinbringen, denn ich bin viel besser im Zeichnen mit meinen Händen als mit dem Stiftwerkzeug. Wenn es sich um eine einfache Form wie ein Herz oder einen Stern oder so etwas oder einen Pfeil handelt, versuche ich es einfach mit dem Stiftwerkzeug freizulegen. Aber schauen wir uns ein paar Sachen an, die wir gezeichnet haben. Also Datei, Ort. Sie in Ihren Übungsdateien LadenSie in Ihren Übungsdateiendie Übungsdateien des Stiftwerkzeugs herunter. Wenn Sie diese Übungsdateien nicht haben, gibt es irgendwo einen Link auf der Seite, um sie herunterzuladen. Ich werde klicken und ziehen Sie es heraus, so dass es hier passt. Das ist das Zeug, das wir zeichnen werden. Sie sind nette, kleine progressive Dinge zu zeichnen. Also habe ich die von Hand gezeichnet. Wenn du dich fragst, was das ist, dann ist das ein Kiwi. Es ist ein kleiner heimischer Vogel. Es ist eine schreckliche Kiwi, und ich brauchte Ewigkeit, um das auch zu zeichnen. Kiwis sind schwer zu zeichnen. Sie sind wie Fußbälle mit Beinen. Wie auch immer, also hast du dein kleines Ding von Hand gezeichnet, das du willst. Nun, was wir tun wollen, ist darüber zu zeichnen, und wir möchten diese Hintergrundebene sperren, damit sie sich nicht auf halbem Weg durch das Zeichnen bewegt. Der einfachste Weg, wir haben dies zuvor in Ebenen getan. Aber siehe Schicht 1, wir werden es sperren. Dieses kleine Symbol erscheint hier in diesem kleinen leeren Feld. Wir werden das einen Hintergrund nennen. Großartig. Wir werden eine neue Ebene erstellen. Ich werde nur sicherstellen, dass wir diese Ebene ausgewählt haben und dies wird unsere Zeichnungsebene sein. Stellen Sie einfach sicher, dass wir auf dieser Ebene sind, wir werden das Stift-Werkzeug greifen. Wo ist unser Pen Tool? Da ist es da. Wir wollen das hier, das Stift-Werkzeug genannt wird. Also die grundlegenden sind, lassen Sie uns hineinzoomen. Wenn ich jetzt mit dem Zeichnen beginne, schau dir an, was passiert. Sie enden mit dieser weißen Box füllen sie. Das passiert oft, wenn Menschen anfangen. Geben wir ihm keine Füllung. Das ist also der erste hier, keine Füllung, und der Strich auf der Außenseite, etwas, das diesen Hintergrund kontrastiert. Es spielt keine Rolle, welche Farbe es ist, weil wir es später ändern werden. Ich werde ein leuchtendes Grün benutzen. Der Strich wird ein Pixel sein. Das Zeichnen solcher Formen, wie Pfeile und Kronen, ist sehr einfach, denn wenn wir das Stiftwerkzeug verwenden, klicken Sie einfach einmal für eine Ecke. Wir machen Kurven in einer Sekunde. Alles, was du tun wirst, ist sich zu arbeiten. Also klicken Sie einmal. Sie können sehen, dass dieses Ding daran befestigt ist. Hey, mach dir keine Sorgen, schau nur in der Vorschau, wohin die Leitung gehen wird. Ich werde noch einmal hier klicken, klicken Sie noch einmal hier. Sie können sehen, dass die grüne Linie beginnt zu erscheinen. Klicken Sie noch einmal hier, noch einmal hier. Wieder da, da, da, da. Wir haben eine schreckliche unregelmäßige Krone. Aber es ist wie eine Zeichenübung, also lassen Sie uns nicht zu viel darüber sorgen. Geben wir ihm eine Füllung. Also greifen wir unseren schwarzen Pfeil mit dem ausgewählten. Klicken Sie im Hintergrund auf, klicken Sie darauf. Ich kann ihm eine Füllfarbe oder mein Cue geben. Geben Sie ihm eine volle Farbe und geben Sie ihm einen Strich von vielleicht keiner. Ehrfürchtig. Wir haben eine Krone. Um es von selbst zu sehen, können Sie den Augapfel auf dieser Hintergrundschicht ausschalten und das ist unsere wirklich hübsche Krone. Schauen wir uns unser Klee an. Es ist, als würde ich jetzt in Irland leben, ich bin ein Kiwi, du verstehst es. Wir werden das zeichnen, und wir werden sie als drei getrennte Teile zeichnen und sie dann kombinieren, weil ein Kleeblatt offensichtlich nicht diese Lücken hat. Aber wir machen es in eine Zeichenübung. Was wir jetzt lernen werden ist, dass wir die Ecken ausgearbeitet haben, Sie klicken einmal. Um eine Kurve zu erhalten, klicken Sie und ziehen Sie. Es ist am besten, an einer Ecke zu beginnen, denn das macht es einfach. Also werde ich einmal klicken. Siehst du, dass die Linie noch angebracht ist? Aber anstatt erneut zu klicken, was uns eine Ecke geben wird, was ich tun möchte, ist, dass ich dann rückgängig gemacht habe. Also habe ich mal hier unten geklickt. Was wir tun wollen, ist auf halbem Weg durch diese Kurve zu finden. Diese Kurve geht von hier den ganzen Weg herum, und buchstäblich, auf halbem Weg ist etwa dort. Aber was Sie finden möchten, ist die Spitze, wo sie sich am meisten ändert. Sie können sehen, dass es so ist, Punkt der Ecke oder der Spitze. Schau dir das an, wenn ich klicke und ziehe, bekommst du diesen kleinen Griff, der herauskommt. Wir haben sie vorhin gesehen. Ich klicke und halte und ziehe, und wir können es herumwackeln. Also haben Sie keine Angst, es zu schleppen. Welches hier, ich kann es hineinziehen, so dass es wirklich enge und wirklich scharfe Ecke oder ich kann es herausziehen und es kann eine wirklich lange, übertriebene Ecke sein. Also rein und raus und wackeln Sie es herum, um es in den Winkel zu gehen, den Sie wollen. Was Sie finden, ist, dass Sie es beim ersten Mal nie richtig bekommen. Du wackelst herum, dein Spin altert. Keine Sorge, das ist Phase 1. Wir können es nachher mit dem weißen Pfeil reparieren. Ich werde es ziehen, bis ich es finde. Ist das dann eine Ecke oder Kurve? Das ist eine Ecke. Die Leute neigen dazu, diese auch zu klicken und zu ziehen, was nicht das ist, was ich will. Ich gehe hierher und klicke nur einmal, weil das eine Ecke ist, es ist ein großer Richtungswechsel. Kannst du hier den großen Reifen der Spitze sehen? Sie sind wie, oh nein, aufgestellt. Das ist nur Teil der Zeichnung mit dem Stiftwerkzeug. Wir können das später leicht genug beheben. Ich werde rückgängig machen. Es gab eine Ecke, klicken Sie einmal. Diese Sache hier ist eine Kurve, klicken und ziehen. Hier unten, ist das eine Ecke oder eine Kurve? Es ist eine Ecke, also klicken Sie einmal. Ich komme dorthin, oder? Ja, das haben wir gezeichnet. Sobald Sie die Ecken dort und die Punkte ungefähr am richtigen Punkt haben, können Sie es mit dem weißen Pfeil reparieren. Am Ende gibt es immer ein bisschen Berühren, und Sie klicken auf diesen Ankerpunkt hier. Das ist der Typ, der repariert werden muss, und schau dir das an, ich kann ihn herumwackeln, ja. Also repariere ich ihn. Aber dann hat dieser Kerl nicht ganz Recht, also schnappe ich diesen Griff und ich gebe ihm ein Wackeln. Ich kann es nach oben und unten bewegen, aber sehen Sie das? Ich kann es auch enger hineinschieben. Siehst du, dass es ein bisschen besser wird? Ich kann anfangen, das herumzuwackeln. Was Sie finden, ist, dass Sie das ganz perfekt bekommen, aber Sie werden diese andere Seite zerstören. Es gibt definitiv eine Menge Zehen und Zuckerguss. Es ist wie eine Wippe. Sie müssen ausbalancieren, um schön und glatt aussehen. Aber du wirst einen geraden Steven zwischen den beiden finden. Dieser Typ ist derselbe. Aber dieser Typ hier ist vielleicht nicht weit genug. Ich werde heranzoomen. Kannst du sehen? Es ist genau so, als ob es egal ist, diese Griffe zu biegen, um sie herauskommen zu lassen. Also körperlich muss ich diesen Kerl hier rausbringen. Dann kann ich ihn ein bisschen rausschleppen. Dieser Kerl hier, ich versuche es zu reparieren. Es gibt immer ein bisschen Zehen und Zuckern zwischen den beiden. Ich werde verkleinern. Ja, es sieht gut aus für meinen ersten. Gehen wir durch, und es ist nur dieser Schritt in Wiederholung. Also werde ich das Stift-Werkzeug greifen, klicken Sie einmal für eine Ecke. Klicken Sie hier, ziehen Sie für eine Kurve, klicken Sie einmal für Ecke, klicken Sie und ziehen Sie für eine Kurve, klicken Sie einmal für Ecke. Nach einer Weile siehst du, dass ich das nicht so sehr wie die letzte zerstören konnte, aber es gibt noch ein bisschen Nachbesserung zu erledigen. Schön. Jetzt versuchen wir es mit dem dritten. Hoffentlich wird dein erster schrecklich aussehen, wenn du mitmachst . Ich stelle mir vor, es wird so eine große tolle Sache sein. Das ist okay. Vergiss ihn einfach, du hattest einen Riss. Probieren Sie den nächsten aus, und durch den dritten wird es wahrscheinlich noch in letzter Zeit schlecht sein. Es hängt von Ihren Fähigkeiten zum Zeichnen mit einem Stift-Werkzeug ab, einige Leute greifen es. Nun, ich habe Tausende von Menschen mit einem Stift-Werkzeug beigebracht und ich verspreche Ihnen, jeder ist für eine lange Zeit schrecklich. Es braucht viel Übung mit dem Stift-Werkzeug, um den Dreh davon zu bekommen. Los geht's. Sie können sie anpassen. Jetzt finden Sie vielleicht, dass es einfacher ist. Also, wenn ich abklicke und wieder darauf klicke, und um tatsächlich zu sagen, ich möchte, dass es keine Füllung hat. Ich habe den grünen Strich auf der Außenseite, gerade während ich arbeite , um es ein wenig leichter zu machen, das Ding darunter zu sehen. Sie keine Angst, die Ankerpunkte auch zu bewegen , wenn Sie nicht feststellen, dass sie funktionieren. Sehen wir uns diesen letzten Teil an, den kleinen Stiel. Ich werde wieder zu meinem Stift-Werkzeug greifen, kommen Sie her Stift-Werkzeug. Sehen Sie sich das an, ich werde einmal klicken. Wenn Sie es wirklich schwer finden, können Sie sehen, dass es versucht, herumzuspringen und zu verbinden und zu verknüpfen und all das zu tun? Das kann hilfreich sein, aber in Bezug auf das Stiftwerkzeug ist es oft nicht. Also werde ich rückgängig machen, um diesen Punkt loszuwerden, und ich werde meine Smart Guides ausschalten. Wo sind Sie Smart Guides? Ich kann dich nirgendwo sehen. Da sind Sie, Intelligente Führer. Stift-Werkzeug. Klicken Sie einmal für eine Ecke. Sie können hier sehen, das ist nur eine wirklich langsame Kurve, also was ich tun muss, ist auf halbem Weg, über dort, ich werde klicken und ziehen. Hier wird es etwas seltsam. Sie können hier sehen, ich bringe es einfach rein. Klicken Sie einmal dort, ich werde dies zu einem flachen Ende machen. Dann gibt es hier nur eine leichte Kurve. Ich werde etwa auf halbem Weg warten, klicken und ziehen. Welchen Weg ziehen Sie? Leute machen das die ganze Zeit, sie ziehen es hierher, und ich versuche, dass es nicht funktioniert. Der Typ muss da rüber gehen. Wenn es schrecklich schief geht, wenn du das tust, und lass uns diesen hier gehen, und du bist wie, schließe dich ihm an und du bist so, das sieht nicht richtig aus. Was Sie tun können, ist weißen Pfeil zu greifen. Ich werde ein bisschen hineinzoomen. Ich werde sagen, dieser Kerl hier, du musst umgeschaltet werden. Sie können damit beginnen, es anzupassen. Ich werde diesen Kerl auswählen, ihnen die gleiche Füllfarbe geben, und Sie verwenden Pipettenwerkzeug, wir lernten ihn in der frühen Übung, Pipettenwerkzeug. Schön. In Ordnung. Der Typ ist ziemlich schrecklich. Du könntest betrügen. Ich werde es nicht wissen. Ich werde sie kopieren und einfügen. Wenn du einen von ihnen bekommst, gut. Geh einfach und wiederhole sie. Was wir jetzt tun werden, ist, bevor wir zum Kiwi gehen, werden wir uns diesen Jungs anschließen. Also holen Sie sie einfach so, dass sie sich überlappen. Dieser Kerl hier, ich will, dass er heraussteht, aber vielleicht nicht so. Hier geht's, so. Sie überschneiden sich alle und erinnern sich an unser erstaunliches Werkzeug, das die Dinge verbindet. Jetzt schmeiß sie alle. Das sind alle getrennte Formen. Du könntest es so lassen, es gibt kein wirkliches Problem damit. Aber sagen Sie, Sie möchten alle verbinden, verwenden wir das Form-Generator-Werkzeug, und Sie können über alle diese zeichnen. Kannst du die zweite ziehen, um diesen beiden beizutreten? Schließen Sie sich diesen Jungs an. Schließen Sie sich diesen Jungs an. Vielleicht müssen Sie ein wenig zoomen. Ich will, dass alle diese Typen Teil derselben Bande sind, zusammen mit dem Stiel hier. Sie können jetzt sehen, dass sie eine komplette Form sind. Schön, wie toll sind wir? Jetzt der hässliche Fußballvogel. Ich liebe diesen Vogel, aber nicht meine Zeichnung von ihm. Es hat einen seltsamen [unhörbaren]. Jedenfalls. Dieser Typ wird komplizierter sein. Es ist so ziemlich nur eine lange Version davon. Gehen wir und machen das. Schnappen Sie sich das Stift-Werkzeug und beginnen wir mit der Ecke. Ich fange mit diesem hier an. Klicken Sie einmal darauf. Welchen Weg werde ich gehen? Jetzt werde ich diesen Weg gehen. Jetzt hat dieser Kerl welche, er ist nicht nur ein kompletter Kreis hier drüben. Wenn ich versuchen würde, es einfach zu tun, das hier, würde ich meistens dorthin kommen. Aber weil er da wie ein Bogen und ein anderer Bogen hinten hat. Was wir vielleicht finden, ist, dass wir zwei kleine Griffe benutzen, um es zu drehen. Sei es nicht, was viele Leute tun, ist, dass sie so gehen und sie werden viele von ihnen hinzufügen, um die Kurve zu bekommen. Das ist in Ordnung, und es funktioniert. Aber du wirst mit einer Form enden. Lassen Sie mich die Hintergrundebene ausschalten. Sie werden mit einer Form enden, die nie so glatt ist. Da sind all das wie kleine Jinks drin. Ich werde die Hintergrundebene wieder aktivieren. Es ist immer besser, so wenig Ankerpunkte wie möglich zu verwenden, aber wenn Sie neu sind, ist es schwer, das Mindeste zu wissen, was Sie tun können. Aber in diesem Fall wird es wahrscheinlich zwei brauchen, also werde ich eins gehen, nur für Ecke, klicken Sie einmal. Dann hier drüben, werde ich vielleicht dorthin gehen, klicken und ziehen. Ich schicke es an, schieb. Ich komme hier runter und vielleicht noch eine Kurve bei seinem Hintern. Ich brauche dort nicht viel. Sie können sehen, dass es funktionierte und Sie haben die Neigung, nur einmal klicken zu gehen. Aber dann, weil er ein Eckpunkt ist, wird es sehr schwer sein, das da durchzusehen. Siehst du den kleinen Scherz? Mach dir keine Sorgen, wenn du hierher kommst, du brauchst nur ein wenig Griffe. Wir können das nachher beheben, indem wir ihn wieder einstecken, aber zumindest läuft es reibungslos durch die Kurve. Sie können hier einmal klicken. Du wirst so sein, das sieht hier enden würde. Das ist okay, denken Sie daran, den weißen Pfeil danach, wir können ihn reparieren. Nun, diese schrecklichen Füße, ich weiß nicht, was ich damit gemacht habe. Sie sind schrecklich. Kannst du sehen, was da drin ist? Was ich tun könnte, ist, dass ich ihn ausschalten werde, um keine Füllung zu haben und einen Schlaganfall zu haben, ich bringe den Schlaganfall nach vorne. Ich benutze das hier drüben, denn während du das Stiftwerkzeug verwendest, verschwindet das Ding, das wir lieben, also verwende ich das Farbfeldbedienfeld. Ich werde grün für meinen Strich verwenden und es wird immer noch mit dem Stiftwerkzeug fortgesetzt. Klicken Sie hier, das ist mein schrecklicher Fuß. Jetzt auf halbem Weg durch diese Kurve, [unhörbar] klicken und ziehen und hier ist meine Ecke. Klicken Sie einmal, klicken Sie und ziehen Sie. Klicken Sie einmal, ich meine zu den Füßen. Ich weiß nicht mal, wie viele Zehen mein Vogel hat, ich bin ein schrecklicher Kiwi. Viele Ecken. Jetzt ist das cool. Das geht so, dann geht es so, dann geht es so, also wird es drei geben. Es wird dieser sein, es wird dieser sein, und es wird dieser sein. Wenn Ihre nicht so aussieht, machen Sie sich keine Sorgen, bringen Sie sie in die richtige Position und wir können den weißen Pfeil danach benutzen. Hier unten ist eine Ecke, aber in der Mitte hier etwa Mitte. Großartig, gut. Klicken Sie einmal. Schnabelkurve, einmal klicken, Kurve, einmal klicken. Lass uns das reparieren. Es ist okay. Meine Zeichnung ist nicht gut, daher kann die Zeichnung darüber nicht viel schlimmer sein. Ich werde es mit meinem schwarzen Pfeil durchziehen. Da gehst du und ich werde ihnen keinen Schlaganfall geben. Ich werde ihm eine Füllfarbe geben. Ich habe meine Farbfelder aus der letzten Übung nicht, was ich tun werde, ist wahrscheinlich nur Farbe in zufälliger Farbe und dann ändern Sie ihn, wenn ich ihn in mein anderes Dokument ziehe, weil diese Farben dort existieren. Aber was ich jetzt tun werde, ist zu meinem weißen Pfeil gehen, klicken Sie auf einen dieser Ankerpunkte und beginnen, über das, was es zu versuchen, etwas Würde mein kleiner Vogel. Stattdessen werde ich versuchen, seinen Kopf zu reparieren, während wir da sind. Ich finde es immer einfacher, einfach über die Oberseite zu zeichnen, zuerst die Hand zu zeichnen und dann über die Oberseite zu ziehen und danach zu fixieren. Sie könnten anders sein, Sie können es einfach per Hand zeichnen. Aber ja, das Stift-Werkzeug, eine letzte Sache, die ich mit Ihnen teilen möchte, ist sagen, dass es eine Kurve gibt , wo es eine Ecke und Ecke geben sollte, wo es eine Kurve geben sollte. Wir haben das etwas früher gemacht, als wir angefangen haben vorhandene Vektoren anzupassen, schauen Sie sich das Video an. Aber sagen wir, ich will, dass das jetzt eine Ecke ist, er ist ein starrer Rückvogel. Ich habe versehentlich eine Ecke gesetzt, wo ich wollte, Entschuldigung, eine Kurve, wo ich eine Ecke wollte. Was ich tun werde, ist auf diese klicken. Sie können sehen, dass er jetzt einen netten Punkt hat. Er ist wie ein Kamelvogel-Sache. Wenn ich es auf eine Kurve zurückdrehen möchte, klicke ich auf „Kurve“. Ich lege es genau zurück, also muss ich ihn rausziehen. Schön, genial. Sagen Sie, es gibt einen Punkt, den Sie nicht wollen, sagen Sie, dass ich das alles in einem Punkt tun möchte, da gibt es diesen zusätzlichen, den ich nicht will. Sie können den Stift greifen oder Sie können, sorry, auf einem der Ankerpunkte auswählen. Sie können hier oben sehen, es heißt Anker und es gibt eine, die ausgewählten Ankerpunkt entfernen sagt und er wird verschwinden. Du könntest einfach versuchen, dieses hier zu bewegen und versuchen , es einen großen Sprung zu bekommen, weil es glatter ist. Sie können sehen, dass es funktioniert. Sieht eigentlich besser aus. Ich lasse ihn so zurück. Ich mag ihn nicht, ich gehe zurück. Das ist, wenn Sie einen Ankerpunkt hinzufügen möchten. Was Sie tun können, ist, dass Sie wieder zum Stift-Werkzeug gehen können und wenn Sie sich entscheiden, dass Sie einen weiteren Ankerpunkt über hier benötigen, sehen Sie mit nur dem Stift Tool ausgewählt, ich kann einfach auf dort klicken und ich habe einen zusätzlichen. Gibt mir ein bisschen zusätzliche Kontrolle, um aufzuhören, sich zu bewegen und aufzuhören, mit diesen Jungs zu spielen. Ich werde es rückgängig machen, weil ich es nicht will. Jetzt werden wir es in unser anderes Dokument verschieben, also werde ich verkleinern. Ich brauche die Krone nicht. Ich brauche nur diese beiden. Ich werde sie beide verpeitschen. Ich werde eine Kopie besorgen. Also bearbeiten, kopieren. Spring rüber zu Illustrator und was ich tun werde, ist, dass ich diese Typen in die Hand nehme. So schön sie waren, ich brauche sie nicht mehr. Ich habe mein Logo gezeichnet. Sie können Ihre wiederverwenden. Sie können das Logo löschen. Löschen Sie das Logo am Ende, verwenden Sie Ihr neues, das Sie erstellt haben. Aber ich werde diese Typen einfach reinkleben. Interessantes Ding. Siehst du irgendein bisschen davon kam? Weil ich glaube, ich hatte nur den weißen Pfeil, und er hatte das Stück ausgewählt. Schnappen Sie es mit Ihrem schwarzen Pfeil. Klicken Sie auf, wählen Sie beide Typen, Kopieren. Wählen Sie diese Jungs aus und fügen Sie sie dort ein, beide. Jetzt kann ich in meine Farbfelder gehen und meine Füllfarbe auswählen. Ich werde das Grün auswählen. Was ich tun werde, ist, dass ich sie nach unten richten werde. Es ist, als ob ich nicht einmal weiß, warum sie hier sind, sie sind eher eine Stiftwerkzeug-Übung. Liebe ich sie? Ich liebe die Kiwi mehr. Er ist mein Kiwi. Ich bin ein Kleeblatt. Es wird hier nicht den Boden runter gehen. Das ist wie eine coole kleine grafische Sache. Kiwi ist ein bisschen groß. Das ist es für das Stift-Werkzeug für den Moment. Vielleicht musst du das ein paar Mal nochmals ansehen. Stift-Werkzeug kann hart sein, nicht entmutigen, es ist schwer, ich verspreche dir. Sie fragen jeden Grafikdesigner, der das Stiftwerkzeug kennt, sie werden es für eine lange Zeit hassen, bis sie es für eine Weile benutzen mussten, und dann werden sie diese Lücke überbrücken und anfangen, es zu benutzen, und dann wird das ihr Bestes Freund. Ich liebe es. Du hasst es wahrscheinlich in diesem Stadium. Verwenden Sie dann einfach die Form ein wenig und Stift Werkzeug, wenn Sie müssen. Das war's für dieses Video. 32. So erstellst du eine Tablet-Version deines UK-Webdesigns in Illustrator: In diesem Tutorial werden wir unsere Tablet-Vision erstellen. Es wird sehr ähnlich aussehen. Wir werden mit einigen der Polsterung an den Seiten hier spielen, es ist nicht so lustig verbeult. Wir werden die Stapelreihenfolge dieser Thumbnails und ja, kleine Stücke und Stücke neu anordnen , aber wir werden volle Tablette fertig machen. Lasst uns anfangen. Jetzt habe ich bereits geplant, was ich in meinem Drahtrahmen machen wollte. Es wird leicht sein, dem zu folgen. Was ich auch finde, ist, die Drahtrahmen nah an dem, was ich will, aber ich ändere es tatsächlich ziemlich viel, da ich mit der tatsächlichen Kopie und den tatsächlichen Bildern arbeite. Zuerst werden wir meine Guides kennen. Ich verwende Befehlssemikolon oder Control Semikolon auf einem PC. Sie können sehen, dass ich mich entschieden habe, denken Sie daran, drei Spalten anstelle von 12 zu verwenden. Es soll 12 geben, aber optisch zu schwer, um mit zu arbeiten. Was wir tun werden, ist unsere 12 hier zu benutzen. Zuallererst, lässt den Hintergrund entlang verschoben. Was wir tun könnten, ist hier unten mein Ebenenbedienfeld zu sehen. Möglicherweise müssen Sie zu Fenster, Ebenen gehen, um dies zu sehen. Ich sperre die Bildungsebene und entsperre die Hintergrundebene. Was ich tun wollte, ist vielleicht alle drei dieser Typen auszuwählen. Was ich tun werde, ist die Alt-Taste gedrückt halten, während ich es ziehe, es erstellt eine Kopie. Du bringst es einfach hierher, und es wird auf diesem Kunstbrett enden. Was ich tun werde, ist, wie soll ich das so groß machen? Wahrscheinlich werde ich das später noch einmal anpassen müssen, wahrscheinlich. Was ich tun werde, ist, ich werde alle drei dieser Typen schnappen, ihn in die obere Ecke stecken, um es anzufangen und mich weiterzumachen. Dann werde ich sie nacheinander anpassen. Ich schnappe dich, schnippe dich an den Rand. Jetzt können Sie sehen, dass meins nicht schnappt, nur eine Sekunde, wie Fenster, das es nicht schnappt. Endlich hat es geklappt. Früher im vorherigen Tutorial habe ich Smart Guides deaktiviert. Smart Guides sind wirklich nützlich und es bedeutet, dass, wenn ich diese Dinge ausrichten kann, wie ein Doodle schnappen kann. Ja, ich sagte, ein Doodle schnappen. Wir ziehen das in diese grüne Box, ziehen die Blackbox, und wir ziehen in diese. Wenn ich das hier reinziehe, wirst du bemerken, dass es nur komprimiert wird. Das ist nicht das, was ich will. Ich werde darauf doppelklicken, um nach innen zu gehen, den Rand davon zu greifen, das ist meine Zuschnittbox. Ich bin jetzt reingefahren. Ich habe doppelt darauf geklickt, geh in diese Gruppe, wo ich es vorher abgeschnitten habe, ich habe eine Maske gemacht. Ich kann entscheiden, wie ich das will. Ich werde wahrscheinlich dieses Bild in der Mitte zu bekommen. Das ist, wie ich zumindest im Code tun werde. Ich brauche es wahrscheinlich kleiner zu sein. Es wird ein wenig Größe ändern, bis auf diese kleine Größe dort, und schön. Doppelklicken Sie auf den Hintergrund, um wieder raus zu kommen und wir sind zurück, quadratisch eins. Eine Sache, die es nicht getan hat, ist, was ich tun könnte, ist, das aufzuräumen. Los geht's. Heute ist meine Hintergrundgrafik. Ich werde das wahrscheinlich ein bisschen ändern müssen. Ich werde diese große graue Box greifen. Ziehen Sie ihn auch über. Nimm die Ecke, schließ sie ein. Die Höhe davon wird sich einiges ändern. Das war zu lang genug. Ich werde diese Kerle sperren, Kunstwerke freischalten und aufhören, das oben drüber zu bewegen. Ich werde mir vielleicht diese schnappen, die nicht alles packen, nur um das Leben leichter zu machen. Was ich für Tablet tue, ist, dass ich die Navigation dort verlassen werde. Ich werde diese drei Typen schnappen. Stell sicher, dass du Alt hältst und ich ziehe das Ganze rüber, wie ich es gerade getan habe. Ich hole das und kopiere es. Dann werde ich rückgängig machen und es wieder da hinlegen. Ich komme hierher und gehe zu Bearbeiten, Einfügen in Front. Halten Sie die Alt gedrückt, während Sie ziehen, ist es nicht einfach zu bewegen. Schön, ich werde diese drei schnappen. Ich habe sie alle geschnappt, einschließlich des Hintergrunds. Wenn ich Shift halte und diesen anklicke, wie ich nicht auswählen möchte, habe ich gerade diese Jungs übrig, kopiere sie und füge sie ein, komm her und sie passen immer noch gut genug dort. Ich werde damit fortfahren. All das Zeug wird rüber kommen, Alt halten, es aufstellen, schön. Alles sieht gut aus. Nicht viel ändern für das Tablet, das Sie sehen können. Ich werde das nur tun, dich ein- und ausschalten. Sie sehen den Unterschied, den ich mache, ist, dass es Polsterung in diesem gibt, weil ich ein bisschen Freiheit des Raums habe. Ich habe diese Einsicht auf Tablets wird es auf Linie bringen, den ganzen Weg hier oben. Die Höhe funktioniert für mich. Der Unterschied wird dieser Kerl sein. Ich werde alle sechs davon greifen, halten Sie alle, ziehen Sie sie einfach rüber. Der Unterschied dieser ist, dass ich sie zwei nach zwei stapeln werde. Sie müssen die Größe ein wenig ändern. Also wird dieser Typ hier raufkommen. Sie werden feststellen, dass Sie viele Dinge schnappen, Dinge auf diese andere Weise bewegen, weil meine Guides praktisch sind. Sie können sehen, dass es nicht übereinstimmt, weil es eine andere Größe hat, ich muss Shift halten und es nach unten ziehen. Wenn du zu viele Dinge schnappst, finde ich es immer am einfachsten. Nur um schön und eng zu kommen, und es wird viele andere Dinge vergessen, die versuchen, zu schnappen und sich zu konzentrieren. Ich mag diesen Kerl, aber wie kann ich all das zur gleichen Zeit passen? Es ist einfach, wie mit ihm ausgewählt, Sie können sehen, es ist eine Breite davon. Es sind 369,5 Pixel. Ich werde mir das schnappen. Schnappen Sie sich. Lass den Kleinen gehen, ich kann nicht. Ich werde dich tun, ich werde es auswählen. Ich werde sicherstellen, dass es verbunden ist. Wenn ich die Breite ändere, ändert es die Höhe. Geben Sie ein, Sie können es nach unten skaliert sehen. Zu Ihnen, mein Freund, werden die gleiche, Breite und Höhe sein. Sie können sehen, dass nur geben proportional kleiner. Du, du und du. Es wird ein wenig schwer, wenn Sie die Reihenfolge mischen wollen. Es ist offensichtlich einfach, einen Illustrator zu machen, aber wenn Sie zum Webdesign kommen, wird es hart. Versuchen Sie, es die gleiche Farbe zu halten, innerhalb dieses. Dann dieser Kerl, dann dieser Kerl, nett. Ich habe meine Linie unten hier, eigentlich wegen der grauen Box. Es ist [unhörbar], geh massiv, und wir können diese tolle Sache nachträglich anpassen. Ich bringe rein, ich bringe alles für dich. Du kannst da reingehen. Diese Linie muss viel kürzer sein. Es weiß, dass es schwer ist, diese Linie zu greifen und sie reinzubringen. Möglicherweise müssen Sie die Ansicht vergrößern. Ich finde, dass es einfacher ist, wenn Sie versuchen, einige dieser Punkte zu greifen. Ich schnappe dich. Eine Sache, die ich nicht im letzten Bit gesetzt habe, ist, dass ich den kleinen Copyright-Hinweis auf den Desktop und auch hinzufügen wollte. Es wird nur Copyright 2017 sagen. Wir werden hineinlegen. Wir haben das getan. Ich fühlte mich, als hätten wir das Urheberrecht schon früher gemacht. Tun wir es? Lass uns gehen. Wir müssen sie gelöscht haben. Geben Sie, Glyphen haben wir. Ich erinnere mich an dieses Debakel. Copyright es, mein erstes Mal, diesmal. Doppelklicken Sie darauf, und wenn er den Boden getan hat, haben sie massiv gelöscht. Das ist Dans Portfolio. Sie geben Ihren Firmennamen ein, wenn Sie einen haben, begrenzt. Ich werde eine Schriftart verwenden, die wir verwenden, die Open Sans Condensed ist, ich benutze fett, denke ich. Großartig. Ich werde euch schnappen, nicht nur die Schnur, kopieren, einfügen. Bewegen Sie sich, und Sie gehen dorthin. Was wir vielleicht tun müssen, ist die Bestellung. Diese beiden werden sich überspannen. Was wird sich sonst noch erstrecken? Nun, sechs jetzt? Wählen Sie alle aus, stecken Sie das in. Wir werden sechs umfassen und wir werden Zentren verteilen, horizontal oder vertikal, kann ich mich erinnern. So wird hier drüben aussehen. Das ist es für meine Tablet-Vision. Ich werde einfach die Art Board aufräumen, bevor wir fertig sind und zum Handy weitergehen. Das ist etwa richtig. Ich werde den Hintergrund freischalten, damit ich dieses graue Ding zum Rutschen bringen kann. Eigentlich gibt es hier eine große Lücke, die ich nachahmen möchte. Ich sperre den Hintergrund. Vielleicht geht es ein bisschen runter. Schön, das ist unsere Tablet-Vision. Gehen wir zum Handy. 33. So erstellst du ein dynamisches mobiles UI-Website-Design in Illustrator 2017: Hallo, schöne Leute. In diesem Tutorial werden wir unsere mobile Version machen. Sie können sehen, dass es ein bisschen anders ist. Wir haben viele Linksausrichten und Spalten gemacht. Im Mobiltelefon werden wir es zusammenbrechen. Wir werden ein paar Kisten entfernen. Sie können sehen, dass wir einige Zeilen fehlen und wir haben für einige zentrierte Bits und wahrscheinlich ist das Hauptbit ein schönes mobiles Menü oder ein Nav Sandwich oder unsere Hamburger Menü. Lass uns das Zeug bauen. Ähnlicher Prozess wie die Tablette. Ich werde das Kunstwerk sperren und den Hintergrund freischalten, damit ich das hinüberbewegen kann. Ich wähle alle diese Stücke aus, halte 'Alt', kopiere sie hinüber, versuche sie zum Schnappen zu bringen, sie tun es nicht, ich muss das nachher klären. Ich wähle alle drei davon aus, verbinde und raste in der Ecke ein. will immer noch nicht schnappen. Ich war in Ordnung, wenn Sie heranzoomen, es will viel besser schnappen. Mein Problem ist, ein paar davon sind nicht ganz aufgereiht. Jetzt sieht es gut aus. Alles klar, was wahrscheinlich sein wird, wird es viel kürzer sein. Ich weiß das, weil ich alles bereit habe, es für dieses Tutorial verspottet. Sie werden das wahrscheinlich im laufenden Betrieb tun, während Sie arbeiten. Ich werde es nur etwas kleiner machen, weil ich es weiß. Denken Sie daran, dass die Größe dieses etwas seltsam ist. Wenn ich nur die Ecke packe, wird es tatsächlich in diesem Fall funktionieren, Sie können sehen, dass es die Größe ändert, aber wenn ich so ein seltsames Zeug mache, macht es es lange und dünn. Was ich tun könnte, ist, „Shift“ zu halten, bis ich dort bin. Ich möchte, dass es sich neu verkleinert, jetzt doppelklicke ich, klicke auf die Außenseite, die der Clipping-Rahmen ist. Ich werde ihn ziehen, um das zu passen, und dann werde ich das Innere davon greifen und es einfach entlang bewegen, so dass es passt. Ich werde es ein bisschen herunterskalieren. In Ordnung, doppelklicken Sie auf den Hintergrund, um rauszukommen, und wir haben unseren netten, kleinen, verblassten Hintergrund. Dieser Kerl muss angepasst werden. Das hier wird viel länger dauern, nehme ich an. Wir müssen das anpassen, wenn wir da unten auf den Grund gehen. Cool, sperren Sie den Hintergrund, entsperren Sie das Kunstwerk und beginnen Sie dann, es über zu mischen. Wahrscheinlich die größte Änderung in diesem Fall wird sein, wie das Menü funktionieren wird. Wir haben nur zwei Knöpfe, also kommen wir wahrscheinlich davon, nur Knöpfe zu haben. Aber nicht viele Leute hätten nur zwei Knöpfe. Wir benutzen ein Hamburger Menü oder ein Nav Sandwich. Wir schalten meine Guides ein. Denken Sie daran, dass wir nur zwei der Spalten anstelle der ganzen 12 verwenden, nur damit es nicht verrückt wird, wenn wir es versuchen, wir haben nicht überall Spalten. Was ich tun werde, ist ein paar Dinge. Das Logo muss schrumpfen. Es blieb gleich am Tablet, aber ich treffe die Entscheidung, dies auf Handy zu schrumpfen. Es wird kleiner werden müssen, wie kleiner? Nur damit es mein Nav Sandwich hier reinpasst, damit es nicht so schlimm wird. Sie können Logos in verschiedene Formate ausschalten, das ist in HTML völlig möglich, Sie können eine Art von Logo ausblenden und Sie könnten einen anderen Stapel haben , vielleicht etwas, das oben für Mobilgeräte gestapelt ist, aber für in dem Moment, da ist mein kleiner Nav und wir werden ein Nav Sandwich zeichnen. Nun, das Nav Sandwich ist diese drei Riemchenlinien, es ist die universelle Sache geworden, um Nav Sandwiches oder mobile Menüs zu machen. Es sind nur drei Riemchenlinien in diesem Fall und Ihr Entwickler oder Sie als Designer, wenn Sie es bauen, sagen wir, Dreamweaver oder etwas anderes, können dies ziemlich leicht manipulieren. Um die Linie zu zeichnen, werde ich sicherstellen, dass ich meine Off-White verwenden und ich werde sicherstellen, dass es schön und dick ist. Wie dick? Denken Sie daran, gehen Sie, „Befehl 1“, um es in der tatsächlichen Größe zu betrachten, anstatt zu versuchen, Zippy Zoom. Ich dachte, es wäre eine gute Größe, in der Größe, als ich hineinzoomen, aber das ist offensichtlich zu breit. Ich werde 3 Pixel sein. Ich werde es wahrscheinlich anziehen und wieder, es ist wirklich schwer, das von hier aus zu tun. Wir werden wieder hineinzoomen und ich werde diese Linie anziehen. Halten Sie „Shift“ gedrückt, während ich es festziehe und stellen Sie sicher, dass es in einer geraden Linie bleibt. es ausgewählt ist, werde ich 'Alt' halten, ihn nach unten ziehen, ihn nach unten ziehen. Wie sieht das aus? Vollbildmodus? Es ist ungefähr richtig. Was ich tun könnte, während ich hier drin bin, ist nur sicherzustellen, dass sie alle gleich weit voneinander entfernt sind. Ist die Distribution Vertical', und sie sind alle in Ordnung. Schön, stell es da rein. Sie mögen diese, vielleicht mögen Sie die abgerundeten Ecken am Ende. Das hier hat flache Enden und das ist, was ich will, weil es alles andere passt, was ich mit den quadratischen Kanten gemacht habe. Wir sehen eine runde, kantige Person. Was Sie tun können, ist, dass Sie auf diesen Strichen hier auswählen können. Öffnen Sie Ihr „Stroke“ -Bedienfeld. Wo sind meine Schläge? Es ist nicht offen. Da ist meine eins, aber wenn Sie nicht finden können, hat das ein „Fenster“ und gehen Sie nach unten zu „Strikes“ und was Sie suchen, ist diese „Kappen“ hier. Im Moment ist es auf dem leider benannten 'Butt Cup', aber man kann auf runde Kappe wechseln. Sie werden feststellen, dass es macht sie rundy Hamburger Menü. Bis zu Ihnen. Verkleinern, großartig. Ich kann wahrscheinlich davonkommen, wenn mein Logo etwas größer ist. Auf dem Handy möchte ich nicht, dass es zu klein ist. Tatsächliche Größe, leitet ab, ausgezeichnet. Als nächstes werde ich etwas ganz anderes in Bezug auf das Layout tun. Ich werde diese Gruppe zuerst schnappen. Ich werde ihn rüber kopieren. Was ich tun werde, ist, dass ich sie gruppieren werde und ich möchte, dass es auf dieser Zeichenfläche zentriert wird. Wir haben uns das etwas früher angesehen. Wir gehen zu unserem „Fenster“, wir werden „ausrichten“ öffnen, hier unten gehen und ich möchte, dass es in die Mitte geht, aber was ich tun möchte, ist, dass Sie, mein Freund, Optionen zeigen und ich möchte, dass es an der Zeichenfläche ausgerichtet ist. Ich möchte, dass es auf dem Kunstbrett zentriert wird. Wenn ich sie nicht zuerst gruppiert hätte, schau dir an, was passiert. Ich gruppiere sie, sie alle sind zentriert, aber das ist nicht, was ich will. Ich gruppiere sie zusammen, „Befehl G“ oder „Control G“ auf einem PC, oder klicken Sie mit der rechten Maustaste auf „Gruppe“ und stellen Sie sicher, dass ich es an der Zeichenfläche, Mitte ausrichten werde. Cool, er geht dort an die Spitze. Ich werde die Schriftgröße gleich halten, denke ich. Dieses bisschen hier, ich werde ihn rüber kopieren und ich werde ihn bis an die Ränder stoßen. Aber was ich tun werde, ist, dass ich sicherstellen werde, dass die Schriftgröße herunterkommt. Es ist sehr einfach, die Schriftgröße zu ändern, wenn Sie ein Webdesigner sind. Ich werde das tun. Ich werde es zentriert machen und ich werde meinen schwarzen Pfeil greifen, Werkzeug ausrichten. Ich muss das nicht ausrichten, weil ich hier oben mit dem Text ausgerichtet habe. Er wird dort zentriert sein. Wie klein? Vielleicht nur ein kleines bisschen kleiner, da gehen wir schön. Nächstes bisschen in die Linie. Ich bringe diese ganze kleine Bande sofort rein. Halten Sie „Alt“ gedrückt, ziehen Sie ihn hinüber. Wir können ihn kopieren und einfügen und was ich tun werde, ist, eigentlich, was ich tun könnte, ist, diese Zeile für Handy auszuschalten. Es ist eines dieser schwachen skurrilen Dinge, bei denen ich schon mal mit ihm herumgespielt habe und mir die Linie nicht gefallen hat. Ich werde all das zusammen gruppieren, alle drei sind gruppiert und dann werde ich sicherstellen, dass es auf Zeichenfläche ausgerichtet ist, zentrieren Sie es, schalten Sie meine Spalten aus. Ich habe das Gefühl, das ist vielleicht ein bisschen zu groß eine Schrift. Ich werde alles auswählen und vielleicht die Schriftgröße auf etwas kleineres verschieben . Kleine Änderungen wie, dass der Webentwickler oder Sie selbst in der Lage sein wird, es zu überprüfen, aber wenn es visuell nicht anders aussieht, würden sie wahrscheinlich nicht gehen und überprüfen, so dass Sie möglicherweise eine Notiz an sich selbst machen müssen , um sicherzustellen, dass Sie sie, die eigentlich nur eine Schriftgröße kleiner ist. Keine Beschwerde. Möglicherweise müssen Sie nur für eine, die wir Schriftgröße haben, in CSS schreiben, aber deshalb ist Ihr Designer. Sie können die großen oder kleinen Schriftentscheidungen treffen. Na gut, ich drehe das wahrscheinlich ein bisschen unten auf, vor allem, weil es nicht ansteht. Ich werde den Hintergrund freischalten, ihn schnappen, da gehst du, nett. Alles klar, das nächste, was ich tun möchte, ist es zu retten. Schauen wir uns an, wie wir mit diesen Thumbnails zu tun haben. Jetzt bis jetzt haben wir getan, wir haben Stapel von gemacht, wir haben 3 Spalten, dann haben wir 2 Spalten und diese werden wir 1 Spalte nach einem Drahtmodell tun. Nun, ich habe mein Drahtmodell und gedruckt neben mir, und ich kopiere das gerade, wenn ich gehe. Was ich tun werde, ist, einen von diesen Typen zu schnappen, ihn zu bewegen, meine Guides einzuschalten, ihn auszurichten, ihn auszustrecken. Das Seltsame ist, dass er tatsächlich der größte ist, den er je auf Mobilgeräten seltsam war. Wie der Desktop ist er eigentlich der kleinste, er ist ein bisschen größer auf dem Tablet und er ist der größte auf dem Handy. Jetzt können Sie sehen, dass es viele Entscheidungen gibt, die auf dem Handy getroffen werden, viele Leute werden zuerst für Mobilgeräte entwerfen. Es ist nicht meine, als meine Erfahrung, dass es besser ist, mit dem am häufigsten verwendeten Bildschirm zu arbeiten , der in diesem Fall Desktop ist. Wir haben ihn ausgearbeitet und er ist wie breit? 399. Ich werde ihn schnappen und eigentlich werde ich all diese Typen rüber bringen. Ich bin Shift Klick auf sie alle, alle kommen über. Ich werde sie hier drüben in die Zeichenfläche einmarschieren und diese beiden schnappen, weil das 399,5 verbunden ist, genial. Ich weiß, dass wir sie vorher getrennt gemacht haben, aber wenn sie übereinander stehen, können Sie die Breite ändern, weil sie nebeneinander aufgereiht sind. Alles klar, jetzt geht es darum, sie zu stapeln. Wir werden den Stapel von Tablet kopieren, nett. du der Nächste? Du bist der Nächste. Uns geht der Weltraum völlig aus. Was wir tun werden, nur weil ich uns bis zum Web-Design-Tutorial drehen werde, wir werden Dreamweaver verwenden, das macht dies, anstatt es nur zu entwerfen, ist, dass wir diese zwei aus, nur so dass die Seite nicht wie dieses epische Scrollen, massive mobile Version ist , so dass es schön und schnell auf dem Handy lädt , falls die Leute nicht in WLAN-Reichweite sind. Ich mache es hauptsächlich, damit ich es in einem Web-Tutorial tun kann , um Ihnen zu zeigen, wie man Dinge ein- und ausschalten kann. Wir schalten diese Zeile ein und aus, und wir werden diese Jungs mit CSS ein- und ausschalten. Wir haben diese angepasst und wir bringen eine Fußzeile hierher. Wir haben das vielleicht etwas ausgedehnt. Wie weit? Nicht sicher. Mein Hintergrund, der Hintergrund war nicht gesperrt. Etwas tiefer. Hintergründe gesperrt. Schnapp dir drei, bring sie rüber. Was ich tun werde, ist, dass ich auch die sozialen bekommen werde. Ich werde sie zusammenfassen. 'Command G' oder 'Control G' auf einem PC. Es ist auf Zeichenfläche ausgerichtet, ich werde sie zentrieren, also habe ich sie dort zentriert. Ich werde die stapeln. Es ist etwas, das ich auch in HTML leicht machen kann, ist ich werde diese Jungs neu gruppieren. Ich habe sie so gruppiert, dass ich sie auf die Zeichenfläche schicken kann und ich werde ihn runterziehen. Ich verwende meine Tastenkombinationen, nur um es in diesem Fall herunterzubekommen. Sie waren keine Gruppen. Sie überlappen sich alle nur. Rückgängig machen, Zurück, Zurück, Rückgängig , Rückgängig, Rückgängig Da sind sie. Klicken Sie nun mit der rechten Maustaste auf sie und gruppieren Sie sie. Wenn man sie zentriert, sollten sie nicht übereinander stolpern. Schön. Ordnen Sie das Kunstbrett auf und da ist meine Freunde unsere mobile Version. Entsperren Sie ihn. Wenn Sie dies tun, wird es wahrscheinlich nicht gefallen, dies ist etwas, das ich zuvor für dieses Tutorial entworfen habe. Du wirst so verbringen, als ob ich eine erstaunliche Menge an Zeit mache, das herumschieben , diese Farben ändern, mit ihrer Schrift spielen, um alles so aussehen zu lassen, wie du es willst. Haben Sie keine Angst, wenn Sie drei oder vier Versionen Ihres Mobiltelefons haben , denn es ist das schwierigste zu tun, aber dass meine Freunde unser kleines Responsive Web-Design ist. Na gut, gehen wir zum nächsten Video über. 34. So exportierst du deine ganzseitigen Web-UI-Mockups aus Illustrator 2017: In diesem Tutorial werden wir unsere verschiedenen Bildschirme oder unsere verschiedenen Zeichenflächen zu erkunden , so dass wir sie in ein PDF einfügen können , damit wir sie an den Kunden senden können, um zu sehen oder für unsere Web-Designer uns vielleicht eine Kostenrechnung auf. Ja, nur eine nette Möglichkeit, direkt aus Illustrator ein PDF zu erstellen. Gehen wir und machen das jetzt. Also haben wir unsere super erstaunlichen Designs gemacht. Jetzt müssen wir sie zu unseren Kunden bringen, um sie zu zeigen oder vielleicht unseren Webdesignern, um ihnen das Mock-up zu zeigen, das wir tun möchten. Wir werden nur die Bildschirme oder die Zeichenflächen zuerst exportieren , anstatt die kleinen adb-Elemente. Es ist wirklich einfach, in der neuen Version von Illustrator zu tun. Wenn Sie eine frühere Version verwenden, ist es nicht zu schwer. Sie können gehen „Datei“ „Speichern unter“ und gehen Sie durch und speichern Sie alle verschiedenen Zeichenflächen, aber es gibt diese neue Version, Sie gehen zu „Export“ und es gibt diese Sache namens „Export für Bildschirme“, die wirklich cool ist. Wenn es auf „Assets“ ist, ist das nicht das, was ich will, ich will „Zeichenflächen“. Es wird nur diese drei verschiedenen Seiten separat exportieren. Sie können sie auch zusammen exportieren und was Sie entscheiden können, ist, welche Datei Sie wollen. Also möchte ich alle zusammen oder eigentlich, ich möchte ein vollständiges Dokument, na ja, vielleicht eine einseitige, die ich ihnen einfach schicke oder ich möchte sie separate Seiten auf einem PDF. Was ich will, dass sie sein, das ist Format, Sie können zu PDF gehen. Das ist wahrscheinlich die einfachste teilbare, die wir an jemanden senden können . Wohin wird es gehen? Oben bei, meins in den Übungsdateien, können Sie sehen, und ich werde auf „Exportieren“ klicken. Treten Sie zurück, entspannen Sie sich, und hoffentlich gibt es da. Ich habe auf einem Desktop, einer mobilen und einer Tablet-Version. Mach sie auf. Es bündelt die Namen von den Zeichenflächen, die ich ihnen gegeben habe. Ehrfürchtig. - Schön. Wenn Sie sie zusammenkleben möchten und Sie in so etwas wie Acrobat Pro hier sind, können Sie zu gehen, dies ist „Seiten organisieren“ und Sie können sagen „Einfügen“ „Aus Datei“ und finden Sie die anderen beiden Seiten. Sie Desktop Übungsdateien und Sie kleben sie hier, ordnen Sie sie neu an und ich werde diese speichern und das kann nur ein einseitiges Dokument sein. Jetzt, wenn die Leute es öffnen, können sie durch das Handy, Tablet gehen und einfach alle auf einen Schlag tippen. Also, das exportiert das ganze Aussehen und Feel. Das ist nicht das Ende davon. Dies ist gut für den Kunden zum Abmelden oder für den Webdesigner, um eine Vorstellung davon zu bekommen, was Sie tun, aber als nächstes müssen wir alle kleinen verschiedenen Stücke separat erkunden , damit wir sie auf unserer Website verwenden können. 35. Sollte ich SVG-Export in Illustrator 2017 für Webdesign verwenden: Okay, in diesem Tutorial wir über SVGs sprechen und sollte ich sie benutzen oder sollte ich nicht? SVGs ein einigermaßen neues Dateiformat. Es ist wie ein JPEG oder ein PNG, und es ist wirklich gut für die Verwendung online, weil es skalierbar ist. SVG ist eine Vektorgrafik, was bedeutet, dass sie ohne Verlust der Auflösung nach oben und unten skaliert werden kann. Während JPEG, wenn Sie es wirklich groß dehnen, wird es alles pixelig und eklig. Das erste ist, ist es großartig? Ja, es ist großartig für Dinge wie Symbole und Logos, Dinge, die wirklich einfache Farben haben. Werfen wir einen Blick auf Illustrator hier. Okay, also Dinge, die als SVG wirklich gut funktionieren würden, sind dieses Logo und dieses kleine Symbol. Hier ist ein kleiner Pfeil, den wir gemacht haben, diese kleinen Jungs unten hier, die sozialen Symbole, diese werden großartig als SVGs funktionieren. Die Dinge, die als SVGs nicht gut funktionieren, sind alles, was mehr als ein paar Farben hat. Okay, so wie dieses Bild hier, ist das, was man als Bitmap-Bild oder Rasterbild bezeichnet, und es kommt traditionell aus Photoshop. Während diese Jungs, können Sie sagen, wenn Sie auf sie zoomen, dass sie alle Vektor und Pods und all diese schöne SVG, Güte. Während dies nur ein Bündel von Pixeln ist. Diese Jungs müssen immer noch typischerweise ein JPEG sein. Diese Jungs werden als eine oder andere als PNG oder SVG exportiert. Sicher, dass Sie SVG verwenden? Ja. Wenn du mich vor einem Jahr gefragt hättest, hätte ich gesagt, vielleicht und ein Jahr zuvor hätte ich nein gesagt, wegen der Browser-Unterstützung. Aber was ich gerne tun möchte, ist ein Auge auf die Website namens caniuse.com zu halten. Sie geben SVG ein und es gibt Ihnen einige nützliche Informationen, im Moment hat es riesige Browserunterstützung, es sei denn, Sie unterstützen IE 8. Nun, Sie könnten für eine wirklich große Firma arbeiten und sie unterstützen wirklich alte Versionen dieses Browsers. Es ist jetzt fast zehn Jahre alt, IE 8, und ich kenne nicht viele Leute, die acht unterstützen, es sei denn, Sie arbeiten bei IBM oder großen Unternehmen, die mit wirklich beschissenen alten Computern noch zu tun haben. Wenn Sie Ihr eigenes Portfolio machen, überspringen Sie es definitiv, gehen Sie direkt zu SVG, es ist großartig. Wenn Sie mit einem Unternehmen arbeiten, überprüfen Sie einfach den Entwickler. Oder wenn Sie sich ein wenig unsicher sind und SVG nicht zu sicher sind, halten Sie sich einfach an PNG, es wird Ihre Website nicht töten, aber es macht es einfacher für die Reaktionsfähigkeit, wenn wir SVGs verwenden. Schauen Sie sich einfach hier an, wo Sie global sehen können, dass es 97 Prozent verwendet wird. Es gibt ein paar Leute, die es nicht gerne benutzen. Es gibt ein paar Tricks, die Sie tun können, um SVG und einige andere Dinge auszuschalten , wenn Sie ein bisschen mehr Hardcore in Ihre Web-Entwicklung sind. Wie auch immer, woher wissen Sie, ob andere Leute SVG verwenden? Ich habe Ihnen diese beiden vorhin gezeigt, sie waren Shutterstock und iStock, und Sie können sehen, dass sie beide toll aussehen. Zumindest sind sie Logos. Was passiert ist, wenn ich hineinzoomen, also halte ich nur den Befehl plus auf meiner Tastatur, wenn du auf einem PC bist, ist es Kontrolle plus, du siehst schließlich, dass es pixelig aussieht. Also, das ist ein PNG und es ist in Ordnung. Es sieht gut aus, weit hier draußen. Aber wenn ich es schön und groß skalieren müsste, müsste ich eine wirklich große Dateigröße in einem PNG machen, damit es in dieser Größe gut aussieht. Wenn ich mir iStock anschaue und darauf hineinzoomen, kann man das Logo sehen, je näher ich komme, desto knackiger ist es. Dies wird wirklich nützlich, wenn Sie mit geschriebenen Bildschirmen oder wirklich hochauflösenden Bildschirmen, 4K, 5K Bildschirmen zu tun haben. Denn obwohl das hier gut aussieht, verkleinert, könnte es auf einem wirklich hochauflösenden iMac oder auf meinem geschriebenen Mac hier oder auf einem iPhone oder einem iPad schrecklich aussehen . PDF's benutzen sie, sie sind in Ordnung, sie funktionieren überall, sie sind kugelsicher. Sie könnten Ihren Entwickler ausflippen und ihnen ein SVG schicken. Das ist eine Sache, die Sie tun könnten, ist, wenn Sie mit SVGs zu tun haben und Sie wirklich diesen Weg gehen wollen, weil Sie Vektor verstehen und es ist nicht so schwer. Vielleicht musst du die Person erziehen, mit der du arbeitest. Oder fragen Sie sie einfach am Anfang : „Kann ich Ihnen SVGs schicken?“ Wenn sie, wenn sie ausflippen, schicken Sie ihnen einfach PNGs, wenn sie sich nicht sicher sind und ein wenig mehr Rat wünschen, gibt es einen wirklich coolen Artikel über CSS-Tricks. Wie ist sein Name? Ich habe deinen Namen vergessen. Ihr Name ist Chris Coyer. Das war's. CSS - Tricks ist eine wirklich coole Seite für alles mit SVG. Okay, und dieser hier ist so ziemlich, wie ich auf die Geschwindigkeit gekommen bin. CSS - tricks.com, große SVG. Der Typ ist ein Genie. Wirklich gut erklärt. Ich habe dir die eine Video-Erklärung gegeben. Es gibt 32 Videos. Dies kommt in die Nitty Gritty von SVG, wenn Sie so weit gehen wollen. Alles klar, das wird also sein, wenn für SVGs. Wenn Sie sich nicht sicher sind, machen Sie PNGs und SVGs und senden Sie sie beide über, es ist wirklich einfach, beides zu tun. Wenn Sie Ihre eigenen Sachen machen und Dreamweaver verwenden, verwenden Sie SVGs. Es ist genial und Browser halten mit ihm Schritt. Wenn Sie mit Old-School-Zeug mit Old-School-CMS arbeiten, müssen Sie sich möglicherweise nur an PNGs halten. Aber fragen Sie einfach einen Webentwickler, was sie zuerst will. 36. So exportierst du Bilder und Bilder aus Illustrator 2017 für das Internet: Okay, in diesem Video werden wir uns ansehen, unsere Bilder zu exportieren , Dinge wie Fotos. Okay, und es gibt Hintergrundgrafik hier, Sie können sehen, dass wir in diesem Export-Panel landen, und dann werden wir mit dieser schönen Gruppe exportierter Großartigkeit enden. Alles klar, fangen wir an. Okay, zuerst, was wir tun müssen, ist, müssen wir alle drei davon erforschen? Wir tun es nicht, denn was in der Web-Design-Phase passieren wird, ist, dass Sie dieses eine Bild importieren, dieses Hintergrundbild hier und Sie werden es in allen drei Größen wiederverwenden , indem Sie es skalieren, anstatt es auszuschalten. Es gibt eine Möglichkeit, es für jedes andere Bild auszuschalten, aber es macht Ihre Seite lange geladen und es bedeutet, dass Sie viele verschiedene CSS-Dateien und Assets haben. Normalerweise importieren Sie diese eine Datei, und wie wir es in Illustrator getan haben, im Web skalieren wir sie für die verschiedenen Größen, für diese verschiedenen Haltepunkte oder die verschiedenen Bildschirmgrößen. Was Sie tun, ist, dass Sie die größte auswählen, weil Sie möchten, wie groß sie auch werden wird, Sie diese Version exportieren möchten, denn das gilt für dieses Hintergrundbild auf dem Desktop. Das ist so groß, wie es jemals sein wird, und wenn man runter kommt, um diese Jungs zu sagen, haben wir dieses Tutorial durchgearbeitet, obwohl der Typ auf dem Handy tatsächlich etwas größer als dieser Kerl ist. Er ist ein kleiner Prozentsatz größer. Wir werden dieses Hintergrundbild vom Desktop exportieren. Wir werden diese Jungs vom Handy exportieren, und dann schauen wir uns die Symbole im nächsten an, weil es einen etwas anderen Prozess gibt, um Symbole und Logos zu machen. Zuallererst müssen wir unsere Hintergrundebene freischalten und wir müssen dieses Asset Export-Panel öffnen. Sie können es von Fenster aus tun und Sie können zu Asset Export gehen. Was wir tun werden, ist, dass wir ein wenig heranzoomen, ich werde alle drei auswählen. Ich will das nicht verstehen, aber ich will nur alle drei von diesen Typen. Alles, was ich tun muss, ist, wählen Sie sie alle und halten Sie sie gedrückt und ziehen Sie sie in dieses Fenster hier, wir klicken einfach, halten, ziehen. Das wird das Bild für mich exportieren. Ich werde ihm einen Namen geben, denn es wird es für den Moment Asset 4 nennen. Lassen Sie uns einen guten Suchmaschinennamen geben. Wenn Sie Dateien benennen, geben Sie ihm einige gute Suchmaschinennamen. Das ist Daniel Scott. Ich verwende Bindestriche und keine Leerzeichen. Wenn Sie kommen, um dies später als Website-Entwickler zu erstellen oder sich selbst wird über diese Verwendung von Leerzeichen in dann ärgern, weil Browser sie nicht mögen, sie mögen einen vollständigen Pfad. Daniel Scott Portfolio. Welche Art von Format? In diesem Fall wird es ein JPEG sein. Nun, wie man weiß, welche man wählen soll. Wenn es um Bilder geht, können Sie nur JPEGs und PNGs auswählen. Sie können diese SVGs nicht verwenden, obwohl wir gerade fertig darüber geredet haben. Das ist gut für Icons und einfache Farben und Logos, aber nicht gut für diese Bilder. Wann sollte ich ein PNG und JPEG verwenden? So ziemlich JPEG die ganze Zeit, wenn es ein flaches Rechteck-Bild ist. Wenn Sie Transparenz benötigen, sagen Sie, dass Sie in Photoshop waren und Dinge maskiert haben und Sie möchten, dass es eine transparente dahinter haben, dann müssen Sie zu PNG wechseln. Das Problem mit PNGs ist jedoch, dass sie Transparenz enthalten, was großartig ist, aber sie machen die Dateigröße viel größer ist. Wir machen einen kleinen Vergleich. Wir exportieren dieses Ding als PNG, und wir fügen eine weitere hinzu, wir fügen eine weitere Skala hinzu und anstatt es zu skalieren, gehen wir einfach auf die gleiche Größe zurück. Es wird genau mal eins sein, aber wir werden eine JPEG-Version machen. Wie hoch in diesem JPEG? Es liegt an dir. Die meiste Zeit können Sie mit einem JPEG 50 davonkommen, aber Sie können es hier nicht anpassen, um jede gewünschte Größe zu haben, und denken Sie daran, dies als Qualitätsschieber. Wenn Sie es auf eine 100 verschieben, wird es super perfekt sein, aber wahrscheinlich eine wirklich große Dateigröße. Was wir tun müssen, ist ein bisschen ein Gleichgewicht zwischen Qualität und Größe zu finden, und Sie werden JPEG finden, vor allem dieses Hintergrundbild, es ist sowieso nicht sehr klar, weil es irgendwie in den Hintergrund gewaschen ist. Wenn es ein Bild von der Sache wäre, die ich verkauft habe, sagen wir, dass ich versucht habe, einen Bentley zu verkaufen, würde ich es wahrscheinlich ziemlich hoch haben, ungefähr 80, nur weil ich will, dass das ein schönes Bild ist, so kristallklar es sein kann wahrscheinlich über dem, wofür ich es wahrscheinlich brauche. Sie können niedriger als 50 gehen, kein Problem. Was wir tun werden, ist, dass wir beide exportieren und wir werden Export treffen. Es wird mich fragen, wohin es gehen wird, und ich werde es in eine zentrale Übungsdatei einfügen , damit Sie diese überprüfen können. Ich werde eine Datei dort machen genannt, Bilder exportieren. Ich werde sie da reinbringen. Sobald ich das getan habe, gehe ich los und überprüfe sie. Erkunden Sie Bilder, und Sie sehen den Unterschied zwischen diesen beiden. Dies ist das PNG, und es sind 450 Kilobyte und dieser hier ist eine 120, also viel kleiner. Schauen wir uns die Qualität im Vergleich zu den beiden an. Sie sich keine Sorgen darüber, dass sich Grau im Hintergrund ändert, wir machen uns mehr Sorgen um das eigentliche Bild selbst und es gibt keinen Unterschied. Sie werden feststellen, dass es schwer zu sagen ist, weil Sie ein Video wahrscheinlich sehen und, Sie sind auf jeden Fall ein Video, aber die Qualität von möglicherweise nicht HD, wo Sie es sehen. Wir verwenden ein niedriges Res-Image mit einem Wasserzeichen darauf, nur so dass ich keine Probleme bekommen, Ihnen Bilder zu geben, die ich bezahlt habe. Die Qualität ist nicht perfekt, weil ich das skaliert habe, weil es Wasserzeichen Version ist. Sie können sehen, dass der Unterschied ist, weil ich nicht brauche und ich keine Transparenz brauche, ich brauche kein PNG. Da das Bild fertig ist. Was wirklich cool daran ist, dass du sie da drin sehen kannst, ihre Art von angebunden. Ich entscheide, dass diese Top-Bild, und vielleicht wählen wir sie an der Spitze und wir wählen, dass grün. Angenommen, Sie entscheiden sich später, dass der Client einen eher orangefarbenen mag, Sie können sehen, dass er bereits da ist. Ich kann erneut auf Exportieren klicken und es geht los und aktualisiert sie. Wählen Sie, ersetzen Sie. Es macht es schön, wenn Sie es einmal getan haben und der Client kommt zurück oder der Wüste Web-Entwickler kommt zurück und sagt, können Sie ändern oder anpassen oder können Sie mir eine andere Version geben? Du musst sie nicht nochmal benennen. Sie können sehen, dass alle wieder exportiert wurden. Ich gehe zurück zu meiner schönen Farbe. Müssen Sie sie alle getrennt machen? Auf keinen Fall. Ich werde diese PNG-Version abnehmen, weil ich weiß, dass ich sie nicht brauche, und ich werde durch gehen und sagen, dass ich diesen Kerl will. Schwarzer Pfeil, schnapp dir diesen Kerl. Kannst du sie alle in einem großen Durchgang machen? Vermutlich. Das ist eine Zehn. Ich gehe durch und benenne sie alle. Taylor, du kannst das für mich beschleunigen, Kumpel. Ordnung. Jetzt werden wir auf Exportieren klicken, Auswählen, los geht es und Hoffentlich jetzt, alles hat funktioniert. Der Grund, warum ich sie nicht alle exportiert habe, ist, weil ich dieses ausgewählt hatte, weil es hervorgehoben wurde, habe ich ihn nur exportiert. Ich werde sie alle auswählen. Nun, vielleicht wählen Sie Keiner von ihnen aus. Ich habe nichts ausgewählt und nein, ich muss sie alle auswählen. Ich werde Shift halten und alle diese Jungs auswählen, und stellen Sie sicher, dass sie alle ausgewählt sind und jetzt zum Export gehen. Wählen, drücken Sie Ersetzen, und schön. Da ist dieser Typ hier drin, den ich loswerden werde, was mein PNG ist. Ich will ihn nicht, aber alle diese Typen wurden exportiert. Sie wurden mit dem Minus 50 angehängt, was nur sagt, dass das die Qualität ist. Ich würde das wahrscheinlich nicht tun, ich kann wahrscheinlich sein Suffix ergreifen. Das gefällt mir nicht, ich werde hier reingehen und all diese Typen löschen und dann in das Ding gehen. Es ist wie die erste, halten Sie Shift, greifen Sie die letzte, so dass sie alle ausgewählt sind, und gehen Sie zu Exportieren und wählen, Es wird gehen, um sie alle ohne dieses Suffix am Ende exportieren. Hier ist meine Grafik, sie werden alle klein genug. Also gut, so erforschen Sie Bilder. Was ich gerade erkannt habe, ist, dass ich mich am Anfang erinnere, um sicherzustellen, dass ich den größten exportiere. Ich entlasse das völlig. Keine Sorge, Sie können diese exportieren. Mein einziges Problem damit ist, dass ich mindestens vier dieser Bilder gelöscht habe, anstatt die ganzen sechs. Kein großes Drama, ich würde durchgehen und diese etwas größer machen und sie vielleicht als Platzhalter an den Rand hier festhalten , damit ich sie in diesem Exportfenster verwenden kann. Ordnung. Das ist gerade fertig, jetzt. Gehen wir zum Exportieren von SVG, Icons und Logos über. 37. So exportierst du Logos und Symbole aus Illustrator 2017 für UI: Hallo. In diesem Tutorial werden wir uns mit dem Exportieren von Logos und Symbolen aus Illustrator für die Web- oder App-Verwendung beschäftigen. Wenn wir es mit SVGs zu tun haben, haben wir in einem früheren Video darüber gesprochen, es ist super einfach. Sie öffnen das Bedienfeld „Asset-Export“. Sie greifen die Dinge, die Sie SVGs sein wollen, wie diese einige dieser sozialen Symbole hier. Klicken Sie auf sie, ziehen Sie sie, doppelklicken Sie darauf, geben Sie ihnen Namen. Es wird Social Facebook genannt werden. Stellen Sie sicher, dass hier SVG unten steht, weil ich möchte, dass es eine schöne scharfe SVG-Grafik ist. Diese hier, und du gehst durch und fügst ständig alle ihre Namen hinzu. Das ist es, um diese zu exportieren. Sie klicken auf Exportieren und Sie werden eine Reihe von SVGs haben. Nehmen wir an, dass Sie diese exportieren und PNGs verwenden, weil Sie die Transparenz benötigen. Du willst kein JPEG. Sie wollen Transparenz, so dass dieses Symbol hier, können Sie um den Rand des Kreises dort sehen. PNGs sind die Art, wie du gehst. Nun, das ist etwas, das Pixelperfekt genannt wird. Jetzt funktioniert es nicht bei jedem einzelnen Objekt, aber was es tut, ist, weil ein PNG kein Vektor ist, also ist es nicht diese knusprige Kante. Es besteht eigentlich aus diesen kleinen Pixeln, genau wie dieses Bild hier. Wenn ich nah genug zoomen, können Sie sehen, dass dieses Bild tatsächlich aus all diesen kleinen Würfeln besteht, und so wird PNG gerendert. Was wir tun müssen, ist sicherzustellen, dass, wenn es gerendert wird, es in diesen kleinen Pixeln so gut wie möglich gerendert wird. Ich habe diese kleine Beispielgrafik hier drüben. Was sie sind, ist, dass wir zuerst zur Ansicht gehen müssen, und in Illustrator können Sie Pixel fälschen. Es ändert nicht wirklich die Art und Weise, wie Ihr Dokument funktioniert. Es zeigt Ihnen nur eine Vorschau Vision von Pixeln. Wenn ich jetzt zoomen, können Sie beginnen zu sehen, wenn ich in der normalen Ansicht, es ist schön und scharf und vektorisch. Aber wenn es ein PNG sein wird, wird es etwa so aussehen. Was passiert, ist, wenn ich eine dieser Zeilen habe, sagen wir, sie ist nur ein Pixel breit, aber ich habe sie so positioniert, dass sie zwei Pixel überspannt. Kannst du sehen? Geht beide Seiten davon, also weiß es nicht, auf welchen Weg wir es anlegen sollen, also gibt es uns trübe Unschärfe, gleiche mit diesem L hier, gleiche mit diesem Kerl hier. Was passiert ist, wenn ich es exportiere, wird es nur ein bisschen unscharf sein. Das passiert ziemlich viel von Illustrator. Was wir tun werden, ist, dass wir sie auswählen und mit der rechten Maustaste gehen und „Pixel perfekt machen“ sagen. Was es tut, bewegt es tatsächlich die Linien, also seien Sie vorsichtig. Es ist gemacht, es heizt Knusprigkeit. Da ich sie tatsächlich physisch bewegt habe, verschieben wir sie ein wenig nach rechts oder ein halbes Pixel nach rechts, ich kann leicht erkennen, ob es pixelgenau sein wird. Siehe oben hier, die Breite beträgt 92,5 Pixel. Du kannst keine 0,5 haben. Sie müssen ganze Zahlen sein. Sie können Pixel perfekt manuell tun, indem Sie das tun. Sie können jetzt sehen, dass die Seiten schön sind, und wenn ich die Spitze mache, 26, wenn ich es tatsächlich ein wenig nach unten geschrumpft, aber jetzt versucht es nicht, unser Pixel zu überbrüten. Es ist definitiv auf der Linie jetzt. Wo ist es hin? Hier geht's. Dieses L hier ist das Gleiche. Schriftarten sind ein bisschen komisch. Das hier wird nicht so schlimm sein. Sehen Sie dies, wenn ich mit der rechten Maustaste darauf klicke, Make Pixel Perfect, es sieht tatsächlich besser aus. Es ist tatsächlich die Unterseite etwas nach oben getrimmt. Kannst du sehen? Früher war es etwas dicker unten. Seien Sie also vorsichtig, wenn Sie Pixel Perfect verwenden. Jetzt funktioniert Pixel Perfect hervorragend für horizontale und vertikale Linien oder die meisten [unhörbaren] Sachen. Aber wenn Sie Dinge wie diese Arten von Formen bekommen, hat es keinen Sinn, mit Pixel Perfect herumzuspielen. Bei diesen Jungs, sieh dir das an. Wenn ich zu Pixel Perfect gehe, kann es nicht tun. Nur zu viele Kurven, können es nicht ausarbeiten. Einige dieser haben gerade Linien. Wenn ich auf ihn klicke und ich mache Pixel perfekt, denke ich, es hat es noch schlimmer gemacht. Es hat sie überall gedrängt. Es sind einfach zu viele Formen los. Pixel Perfekt, ideal für wirklich Würfel, gerade Linien und Schriftarten. Stellen Sie also sicher, dass sie Pixel Perfect sind, bevor Sie sie in Ihr Asset Panel ziehen , um sie als PNG zu exportieren. Was wir tun werden ist, nur um zu beenden, ist, dass wir all diese Jungs hinzufügen, also schnappe ich alle drei davon, da gehst du. Eigentlich gruppiert sie alle zusammen. Das ist nicht das, was ich will. Du bist ein F. Du bist ein F. Du bist ein F. Ich gehe und benenne sie in einer Sekunde. Was muss noch gehen? Das wird eingetippt. Beide müssen gehen. Was muss noch gehen? Der Pfeil muss los. Stellen Sie sicher, dass Sie die Pixelvorschau deaktivieren können, wenn Sie fertig sind. Du brauchst es danach nicht. Manchmal ist es schwer, diese Typen zu schnappen. Du wirst hineinzoomen. Hier geht's. Was sonst noch? Dieser Kerl hier. Hier ist eine andere Möglichkeit, es zu tun. Anstatt zu versuchen, sie einzuziehen, wählen Sie einfach sofort aus, und es gibt eine hier drin, die besagt „Ausgewählte hinzufügen“. Sie können sehen, dass es einfach rüber kommt. Ehrfürchtig. Wir haben sie alle da drin. Jetzt möchte ich sie aussuchen. Ich halte Shift gedrückt und klicke auf sie alle. Denn was ich tun werde, ist, dass ich sicherstellen werde, dass ich für beide Optionen in Ordnung bin. Ich werde SVG plus PNG haben. Wir werden sie alle skalieren. Wir gehen zu mal eins, PNG, also werden wir beide haben. Nun, was ich tun sollte, ist, durchzugehen und diese zu nennen, bevor ich sie exportiere. Ich werde das jetzt tun. Taylor wird das mit seiner magischen Bearbeitung beschleunigen. Geh Taylor. Fertig. Jetzt werde ich Export treffen und hoffentlich werden sie alle exportieren. Also sieh es dir an. Geh. Ich habe einen Pfeil, zwei Versionen. Ich habe ein SVG und ein PNG. Sie können die Dateigrößen sehen. Der SVG ist eigentlich nur ein kleines bisschen größer, aber das PNG hier ist nur ein bisschen kleiner. Aber dieser hier ist so groß, winzig, du siehst es einfach da drin. Die SVG ist jedoch skalierbar, massiv. Gleiches mit dem Logo hier. Das Logo ist viel größer als JPEG. Eigentlich sind das die Falschen. Was ich will, ist, wo ein Logo, SVG, zwei Kilobyte, drei. Also kein echter großer Unterschied, außer dass dieser hier massiv ist. Großartig. So gehen Sie durch und exportieren Ihre PNGs und Ihre SVGs, wenn Sie Symbole und Logos exportieren. 38. So exportierst du Retina HiDPI und dynamische Bilder aus Illustrator 2017: Hallo, da. In diesem Video werden wir darüber sprechen, was wir tun, um Retina, hohe DPI, oder reaktionsschnelle Bilder, wie auch immer Sie es nennen wollen, es geht um die Qualität der Bilder. Die meiste Zeit sind wir an einem Punkt, an dem es keine klaren Regeln darüber gibt, was Sie tun sollten, es gibt ein paar Möglichkeiten, es zu tun, und einige Leute tun es nicht. Die meisten der Zeit nicht, was sie tun, ist, dass sie dir einfach ein Bild geben und es für die verschiedenen Auflösungen nach oben und unten skalieren und einfach damit leben. Da Retina Displays wie mein MacBook Pro vor mir und einige der Windows-Tablets und einige der neuen iPads, sie haben doppelt so viele Pixel, sie haben einige erstaunliche Qualität in ihnen vollgestopft. Was meistens passiert, ist, dass die Leute es ignorieren. Es ist traurig, aber wahr. Die Leute vergessen diese Jungs einfach, weil sie so ein kleiner Prozentsatz sind, und es gibt ein bisschen Arbeit auf der Web-Design-Seite, um zu versuchen, sie alle unterzubringen. Nun sagen, wenn ich eine große Website , werde ich sie natürlich aufnehmen. Aber oft, wenn ich es mit Menschen mit kleinen bis mittleren Websites zu tun habe, Leute einfach keine Sorgen darüber. Sie können sich keine Sorgen darüber machen und Sie müssen hinein. Wir werden jetzt darüber reden, aber wissen Sie, dass, wenn Sie es für Ihre erste Website wollen, es ist okay, Sie bekommen einen ganzen Beitrag. Sie dürfen nur Standarddefinitionsbilder für dieses erste verwenden. Aber nachdem Sie ein Paar gemacht haben und Ihre Webfähigkeiten besser werden, möchten Sie völlig in das einsteigen. Vor allem, wenn Sie es mit Kunden zu tun haben. Wie für mich unterrichte ich Webdesignern und Kreativen Dinge, also und Sie könnten argumentieren, dass ich hochauflösende Sachen machen sollte , weil viele Leute, die meine Kurse machen, einige Kick-ass Laptops haben, also könnte MacBook Pros mit den neuesten Bildschirmen und all dem Zeug verwenden. Lassen Sie uns darüber reden, was Leute normalerweise tun. Sie exportieren nur eine Vision, wie wir es hier tun. Ich werde das alles anheften. Nun, unsere schöne Arbeit. Ich werde mehr anheften, nur damit wir wieder anfangen können. Nehmen wir an, ich exportiere dies für meine Website, ich werde meine Hintergrundebene freischalten, nur diesen Teil beschneiden und ich werde es hineinziehen. Was meistens Leute tun, ist, dass es ein JPEG sein wird, und ich werde ihm das Suffix geben. Ich mag das dort nicht und es wird eine Skala von eins sein. Lassen Sie uns einfach damit leben. Wenn es auf einen Bildschirm kommt, der wirklich groß ist oder wirklich hohe Auflösung hat, wie ein Retina-Display für Mac, skaliert es einfach und pixelt es. Das tut es einfach. Es sieht nicht so schlimm aus, aber ich kann sagen, dass 90 Prozent der Bevölkerung nicht sagen können, dass sie nicht skaliert wird. Oft sage ich für so etwas, diese große Grafik hier, ist, dass ich sie größer machen werde, als es sein muss, also gehe ich hier runter und gehe zu dieser 1.5. Ich habe es so gemacht, als wäre es nicht doppelt so groß. Ich könnte ein Double machen, also ist es eigentlich doppelt so groß hier, so dass es bedeutet, wenn es auf einer Netzhaut gesehen wird, das ist wirklich klar. Das Problem dabei ist, dass Leute, die es nicht sind, oder sagen, jemand auf einem Mobiltelefon nicht mit diesem wirklich großen Bild zu tun , das genau nach unten skaliert wird, weil sie in Ordnung sind, aber sie müssen diese wirklich große Dateigröße laden. So oft, was ich tue, wie ich es in der Mitte schneide, sage ich, ich werde es 1,5 machen. Nun, das ist die billige, kitschige, einfache Art und Weise, wie ich es die meiste Zeit mache. Sagen wir, dass du es richtig machst, und lass uns so tun, als wären wir richtig. Was ich tun werde, ist, dass ich eine Vision erschaffen werde. Dann erstelle ich für die Netzhaut-Displays eine andere Vision. Also füge eine Skala hinzu und ich werde eine dickere machen, die mal zwei ist. Es bedeutet nur, dass ich zu JPEG gehen werde. Werde ich es anhängen? Ja, ich muss es anhängen. Sie könnten die manchmal 2X verwenden. Das funktioniert gut und das ist wirklich gut, wenn du besonders iOS-Entwicklung machst, die wir im nächsten behandeln werden. Aber normalerweise, wenn ich es mache, mache ich einfach mal zwei. Ich habe eine andere Version und es hängt davon ab, wie hoch Sie gehen. Ich nur davon, ernst zu werden, ich unterstütze wirklich Netzhaut, was doppelt so viel wie die Entschließung ist. Sie können viele Geräte in diesen Tagen finden, die die vierfache Auflösung haben. Diese vier werden riesig sein. Dann gut, Sie können diese großen Dateien unterstützen. Was Sie tun können, ist, wenn Sie Ihre Website erstellen, ist, dass Sie Dinge mit Medienabfragen ausschalten können. Es bedeutet nur, dass kann überprüfen, welche Größe der Bildschirm ist und dann das richtige Bild für sie anzeigen. Das ist perfekt und es funktioniert wirklich gut. Es ist eine Menge zusätzliche Arbeit für einen ziemlich kleinen Prozentsatz Ihrer Leserschaft oder Ihre Benutzer. Das ist also eine Möglichkeit, es zu tun und jetzt habe ich drei Versionen. Wenn ich jetzt auf Export klicke, klicke ich auf Export. Wie heißt dieser Typ? Besorgen Sie ihm einen richtigen Namen. Also werde ich einen neuen Namen geben. Ich werde es Hintergrund nennen, das ist aufregender Export. Bringen wir ihn rein, schauen wir uns mal, Hintergründe. Ich habe diese erste Version und es gibt eine andere Version und dann gibt es eine riesige Vision. Hier können Sie die Größen sehen. Einmal ist bei 1,1 Megabyte, 1,2, und dann springt man auf 0,7. So ziemlich groß, so groß, Chaos noch größer. Was passiert, ist, wenn Sie Ihre Website auf der anderen Seite erstellen, was ich mit der anderen Seite meine, ist codieren, es ist nicht super schwer zu durchlaufen und Medienabfragen zu erstellen , um diese bei verschiedenen Bildschirmgrößen auszulösen. Es sagt nur, mit meinem Browser schaut sich dies in einem Super-Retina-Bildschirm zu überprüfen, ob es ist, dann laden Sie dieses Bild herunter, um dieses Bild zu laden. Es ist ein Schmerz im Hintern, aber so kommen die Leute herum. So geht man mit Netzhaut um. Oft brauchen Sie nicht zwei Versionen. Sie werden eine normale Version machen und dann manchmal zwei, und schalten Sie sie einfach im Code aus. Nun, wenn ich sage, dass ich es nicht tue, ist alles, was ich tue, diesen Kerl zu schnappen es 1,5 in der Mitte zu machen und ich zwinge alle, sich die Version 1.5 anzusehen. Das bedeutet, dass Menschen, die Bildschirme verwenden, die keine Retina sind, stecken müssen, um eine etwas größere Dateigröße zu laden. Die Menschen, die auf der Netzhaut sind, bekommen ein wenig Bild. Niemand gewinnt oder jeder gewinnt, hängt davon ab, wie man es ansieht. So können Sie durch all diese Bilder gehen und einfach hochladen, ziehen Sie sie hier und ich habe zwei Versionen. Hoffentlich hilft dir das. Eine andere Sache ist, Leute nennen es manchmal hohe DPI in der Netzhaut, dass die gleiche Sache. Hohe DPI ist das, was keine Apple-Leute es nennen müssen. Retina ist das eine Marke Melodie von Apple. Also, wenn du es Netzhaut nennst, bist du in Schwierigkeiten. Es muss hoch DPI sein, denn das nennt man so hochauflösende Bilder. Jetzt noch eine andere Sache meine kleinen Extrakte am Ende hier ist, dass, seine 2017, ein Bild in ein paar Jahren. Wenn du dir das 2019 ansiehst, bist du wahrscheinlich [unhörbar] mit dir selbst in diese Dan, schlechte schlechte Sachen. Dinge könnten fortgeschritten sein, als sie entweder große Adoption der manchmal zwei gewesen sein könnten, oder es könnte eine andere Möglichkeit geben, es zu tun. Also dieser ist derjenige, der alles andere solide überprüft. Diese hier, überprüfen Sie einfach mit Ihrem Entwickler, was sie wollen. Alles klar, wenn du dich an nichts aus diesem Video erinnerst, bin ich hier ein bisschen durcheinander und lass es einfach mal eins, das ist, was jeder macht und du wirst nicht getroffen. Wenn Sie das tun, sieht es auf einigen Bildschirmen vielleicht nicht so gut aus. Also mach im Moment nur eine Skala. Alles klar, verbaler Durchfall, vorbei. Zurück zu deinen Videos. 39. So exportierst du deine UI-Designs für Apps aus Illustrator 2017: Dieses Video wird mehr über den Export für App sein. Lassen Sie uns so tun, als würden wir keine Desktop- und Tablet-Version erstellen, wir bauen nur eine mobile App, also haben wir einige Symbole erstellt, die hier verwendet werden können. Es ist sehr einfach, sagen wir, ich möchte diese beiden Typen zusammen exportieren, vielleicht getrennt. Ich werde die Gruppierung aufheben und du gehst rein, schleppst die Kiwi. Eigentlich benutzen wir die Kiwi im Moment, Sie könnten all diese in einem Zug ziehen. Wir werden nur diesen Kerl machen, also wird dieser Kerl die Kiwi genannt und was sie brauchen werden ist, lasst uns all das loswerden, ist alles, was du tun musst, ist dieses iOS und Android. Sie entwickeln wahrscheinlich für beide oder vielleicht nur für iOS oder nur für Android, aber sagen wir, wir machen es für ein Apple-Produkt und wir arbeiteten mit einem Apple-Entwickler und er braucht iOS-Grafiken. Klicken Sie auf iOS und was sie tun, ist, dass sie eine Skala von eins, zwei und drei benötigen. Also diese Größe, doppelt die Größe und dreimal so groß, um mit all den verschiedenen Größen zu arbeiten , die sie in Bezug auf ihre Bildschirme haben. Sie sind sehr streng auf die Namenskonventionen, wir müssen das Suffix dort lassen, dann werden wir auf Exportieren klicken. Wir werden es zu diesem hier exportieren und wir sollten Kiwi hier finden. Wir haben die drei Versionen, die sie brauchen werden, da ist das Standard-PNG, das ist, dass eine Größe, dann gibt es hier ein PNG in einer Skala dann mal zwei und dann mal drei und das sind die Dateien, die sie brauchen werden. So dass jede Grafik, die Sie machen, um Vollversionen benötigen, die wahrscheinlich nur diese drei verwenden, aber geben Sie ihnen die SVG als auch. Wenn Sie das gleiche Zeug für Android machen, ist es sehr ähnlich. Befreien Sie sich von diesen Jungs, klicken Sie auf Android, sie haben nur eine andere Namenskonvention und sie haben viele verschiedene Größen für ihre Apps. Sie können sehen, dass es sogar eine kleinere niedrige dpi, mittlere dpi, hohe dpi, extra große Höhe. Es geht bis zu xxx hohe dpi. So gibt es bis zu vier Skala, einige der LG-Handys haben einige riesige große geschriebene Bildschirme. Klicken Sie auf Exportieren, dasselbe, wir werden Kiwi haben. Es gibt bereits Kiwi svg, aber Sie werden ihnen diese Versionen geben. Dies sind die Versionen, die für Android geeignet sind. Vielleicht tun Sie beides, oder Sie tun vielleicht nur das eine oder andere, aber das ist, was sie erwarten werden. Jede Grafik wird all dies haben und es wird diese explizite Namenskonvention hier haben und ich weiß, dass Android, ich denke, funktioniert etwas anders, sie enden in verschiedenen Ordnern, also ist das etwas, das Sie möglicherweise mit Ihrem Entwickler darüber reden, wie sie sie wollen und wahrscheinlich können Sie sie einfach auf diese Weise geben und sie werden sie in die Ordner aufteilen, in die sie gehen müssen. Das ist die Ausnutzung für die App-Entwicklung und die einzige Sache, die man sich vorstellen sollte, wie wir es im vorherigen Tutorial getan haben, ist Pixel perfekt vor allem, wenn Sie eine dieser horizontalen und vertikalen Linien haben. Hauptsächlich, weil wir diese pngs verwenden, diese Pixel-Versionen. Alles klar, das ist es für das Video, wir sehen uns im nächsten. 40. So exportierst du CSS für Entwickler mit Adobe Illustrator 2017: Hallo, da. In diesem Video werden wir einen Teil des Codes von Illustrator auszunutzen. Code. Wenn Sie noch nie Code verwendet haben, dies etwas, das wirklich hilfreich für die Person wäre, die Ihre Website erstellt. Wenn Sie vorhaben, Ihre Website zu bauen, wird dies für Sie super hilfreich sein. Was wir tun werden, ist, dass wir uns die verschiedenen Elemente ansehen. Wir machen ein paar von ihnen, aber die Regeln sind für viele davon die gleichen. Was wir tun werden, ist, mit dieser Überschrift zu beginnen , weil es die größte und einfachste ist. es ausgewählt ist, gehen Sie zu Fenster und gehen Sie zu CSS-Eigenschaften. Das coole daran ist, dass es uns viele CSS-Zeichen erzählen wird. Ich werde dieses Eigenschaftenfeld herausziehen. Sehen Sie hier, ich habe gerade den oberen Rand der Registerkarte, das Wort da, damit ich alles sehen kann. Was es mir sagen wird, ist, dass es mir interessante Sachen über diese Schriftarten erzählen wird. Es wird mir sagen, welche Schriftfamilie es ist, ob es fett ist, welche Größe es ist, welche Farbe es ist. Dies ist die Art von Sachen, die ein Webdesigner lieben würde. Denn anstatt dass Sie ihnen nur das PDF geben, das wir zuvor gemacht haben und sagen: „Raten Sie die Schriftart. Raten Sie die Größe. Raten Sie die Farbe.“ Sie kommen zurück, um zu sagen, dass sie Ihre Website für Sie bauen und Sie sagen : „Gott, was für eine Schriftart ist das? Wer benutzt Comic Sans?“ Sie haben regelmäßig statt fett verwendet und all das Zeug, das Sie mit dem Versuch verbracht haben, herauszufinden. Es wird 80 Pixel oder 81 Pixel sein. Du kannst es ihnen wirklich sagen. Was Sie tun können, ist, dass Sie sie greifen, kopieren und mit dem Aufbau eines Spezifikationsblatts beginnen können . Du kannst Desktop sagen, und dieser hier wird mein sein, ich weiß, dass er h1 genannt wird, aber du könntest es einfach so etwas wie eine Überschrift nennen. Löschen Sie alles, was Sie nicht mögen, oder passen Sie es an, aber das wird meine Hauptüberschrift sein. Wenn Sie ein Webdesigner sind, wissen Sie ein paar. Sie könnten ihm Dinge wie Klassennamen oder Tag-Namen geben, aber es liegt wirklich an Ihnen. Das coole Ding daran ist, dass ich eine Desktop-Version haben werde, und was ich tun werde, ist, dass ich eine mobile Version sowie genau die gleiche Sache haben werde. Aber hier drüben, wenn ich es auswähle, können Sie sehen, dass die verschiedenen Schriftgrößen alles hier haben? Mobil wird das sein. Es ist genau das Gleiche. Er weiß, dass dies meine Überschrift eins ist, unsere Hauptüberschrift. Der Unterschied ist, Playfair, es ist immer noch fett, aber es ist jetzt diese Größe. Eine Sache, die man beachten muss, ist so großartig, es hat mir viele Informationen gegeben, aber in Illustrator hier können Sie sehen, dass es mir nicht die Text-Align-Syntax gibt. Es gibt ein paar Stücke, die es tut, gibt dir nicht. Es ist großartig. Es ist auch, es fehlt ein paar kleine Dinge, ärgerlich, aber das ist okay. Es spart den Tag für viele Dinge an Entwickler oder einfach nur für sich selbst weitergeben zu müssen . Ich benutze das die ganze Zeit selbst. Ich fummeln mit den Schriftarten hier drin und komm einfach rein und gucke nach. Ich werde wahrscheinlich kein solches Dokument für mich selbst erstellen. Ich werde wahrscheinlich nur Schritt für Schritt arbeiten, während ich die Website baue, um in Illustrator zu kommen und sie einfach herausziehen. Aber wenn Sie jemand anderen schicken, und eines der Dinge, sagen Sie diese Box hier unten, würden Sie das nicht als Grafik exportieren. Diese fertige Pfirsichdose hier. Sie würden es nicht als PNG-Grafik exportieren. Es wäre im Code, in CSS entworfen und würde ihm seine Höhe und Breite und Farbe geben. Sie können sehen, wenn Sie diese auswählen, gibt es kein CSS generiert. Du musst ihnen aus irgendeinem Grund Namen geben. Du könntest die lange Version machen und in dein Ebenenfenster gehen, Twill deine Ebenen runter, und was passiert ist, dass wir nur zwei Ebenen haben, richtig? Aber in diesen Layern werden alle diese Objekte aufgelistet. Was Sie damit machen können, ist es hier drüben auszuwählen. Kannst du dieses kleine Suchsymbol sehen? Es springt zu diesem Ding, das als Rechteck bezeichnet wird. Wir geben ihm nur einen Namen. Statt Rechteck können wir ihn nennen, ich weiß nicht, Call-to-Action. Ich versuche, Leerzeichen zu verwenden. Call-to-Action. Ich mache es mit Bindestrichen. Jetzt gibt mir einen Klassennamen namens Call-to-Action und die tatsächliche Farbe dafür. Ich mag es nicht, so zu machen. Ich mag es, denn deine Klassen hier als cool zu benennen, wenn du weißt, was du tust, aber ich finde es nicht super hilfreich. Sagen wir, es ist diese Kiste hier. Wieder, es wird mir nicht meinen Namen geben, bis ich losgehe und ihn gefunden habe und ihm einen Namen gebe. Es ist einfacher, nur in Ihre Einstellungen am unteren Rand von CSS generieren zu gehen. Nicht das. Einer von ihnen ist Exportoptionen. Das war's. Das erste Symbol. Dieser hier sagt: „Generieren Sie CSS für unbenannte Objekte.“ Es gibt es nur kalt st1 oh, st0. Ich werde das kopieren, und ich werde das in mein Dokument einfügen. Auf dem Desktop wird das mein sein, ich weiß nicht, wie ich es nennen werde, weil es nichts ist. Schwarze Schachtel. Ich werde es hier nennen. - Ja. Ehrfürchtig. Es fehlen jedoch ein paar Dinge, wie ich oft die Höhe und Breite brauche, aber ich habe mich hier entschieden. Es gibt ein paar Optionen in dieser ersten Art von Exportoptionen wieder, die ich gerne einschließen möchte. Es gibt eine, die sagt: „Dimensionen einschließen“. Ich werde das tun. Cool. Es sind auch Pixelmaße enthalten. Geben Sie ihm einfach eine Höhe und Breite. Ich finde, das ist sehr hilfreich. In Ordnung. Verwenden Sie jetzt Schnelllauf Ihr Dokument und sagen Sie den Leuten, wie groß die Dinge sind. Sie können diese grüne Box im Hintergrund greifen, geben Sie ihm die Höhe und Breite und Pixel. Ich muss diese Ebene hier freischalten. Da geht er hin. Ich weiß, dass dieser Typ eine Hintergrundbreite hat. Es ist vor allem die Höhe, mit der ich umgehen möchte. Ich will sicherstellen, dass er oder sie in der richtigen Höhe ist. Gleiches mit diesen Tasten an der Spitze, die richtigen Farben und die Höhe und die Breite, die ich verwende, dieses Logo. Ich konnte ihnen die Höhe und die Breite sagen, die ich wollte. Ja, nur wirklich sehr hilfreich, um das CSS für sich selbst herauszuziehen , wenn Sie es als nächstes bauen wollen. Das ist, was wir in einem meiner nächsten Tutorials nach diesem machen werden. Wir gehen und bauen das in Dreamweaver. Aber wenn Sie mit einem Webentwickler oder Webdesigner arbeiten, können Sie sie einfach abgeben Art eines Spezifikationsblatts, um ihnen eine grobe Spur zu geben. Sie müssen nicht jedes einzelne Ding und jeden einzelnen Bit Marge auflisten, aber ja, es könnte wirklich hilfreich sein. In Ordnung. So exportieren Sie das CSS aus Illustrator, um mit Ihrer Website zu arbeiten. 41. So lernst du die Sprache des UI-Benutzer Interaktionsdesigns: In Ordnung. Nachdem wir nun unser erstes Projekt erstellt haben, um es in Illustrator zu geben, können Sie sich jetzt stolz als User Interface Designer bezeichnen. Sind Sie der beste UI-Designer der Welt? Wahrscheinlich noch nicht. Die nächsten Schritte sind, so viel Erfahrung wie möglich zu sammeln. Dies kann natürlich getan werden, indem Sie Ihre eigenen Projekte machen und indem Sie andere Leute lesen und folgen, die fantastisch sind, ein bisschen geliehene Erfahrung. Sie müssen ausgehen, herausfinden, wer die erstaunlichen Menschen sind, ihrer Arbeit folgen, aus ihren Erfahrungen lernen. Die ganze Zeit lernen und wählen Sie Wörter und Sätze aus, die Sie verwenden können, um Ihre UI-Projekte zu kommunizieren, wenn Sie daran arbeiten. Es gibt ein paar wirklich gute Plätze, um loszulegen. Diese hier vor uns auf design.google.com ist eine erstaunliche Ressource. Dies ist mein Go-to für die UI. Es zielt speziell auf mehr Tablet und Handy, das ist die neueste neue Sachen. Mobile Web-Design ist erstaunlich und es ist schon lange her, aber eine Menge der neuen Sprache, die Sie lernen müssen , kommt von diesen Geräten. Wahrscheinlich ist das größte Wort, das man lernen muss, Material. Material ist das Wort, das wir verwenden, um darüber zu sprechen wie das Design mit der Person auf eine indirektere Weise interagiert , als es jemals zuvor getan hat. Es gibt so viele weitere Funktionen, die ein Telefon tun kann, als eine Website zu sagen. Dies ist der Ort, an dem Sie anfangen können. Fang einfach an zu lesen. Es gibt so viele gut kuratierte und geschriebene Artikel auf dieser Seite. Es ist ziemlich unglaublich, ich liebe diese Seite. Also fangen Sie einfach an, sich durch sie zu arbeiten. Diese Seite hat tolle Artikel. Die Ressourcen sind wirklich cool. Wenn ich hier auf die Ressourcen klicke, ist material.io Googles Erklärung, wie diese Interaktion funktioniert. Das coole Ding daran, es gibt dir die Sprache, die du verwenden könntest. Ich werde zu material.io springen. Es gibt Ihnen nur eine wirklich schöne Art, wenn Sie es lesen und anfangen, es zu verstehen und auszuarbeiten, das heißt, wenn Sie mit Ihren Kunden sprechen und mit Ihren Prozessen arbeiten, wird es Ihnen die Sprache geben, die Sie brauchen in der Lage zu sein, auszudrücken, was Sie meinen und ihm eine gewisse Glaubwürdigkeit zu geben, warum es getan werden sollte. Selbst wenn man sich die Symbole und einige dieser Materialkomponenten anschaut, gibt Ihnen nur Symbole und erklärt warum. Auch das ist nur eine einfache Ressource von Symbol, die vor allem für Dinge wie Apps, die wir mögen, was zur Hölle Art von Symbol sollte verwendet werden, ich weiß nicht oder ist es eine Ankündigung. Es ist einfach, wenn Sie es sehen, aber jemand ist lange und hart sklaviert und es wurde durch eine Menge von Apps, so dass es an Menschen kommuniziert. Das ist ein Verständnis, das ist eine Sprache, die bereits existiert. Du versuchst nicht, das Rad neu zu erfinden. Gleich wie Komponenten eins. Es gibt eine wirklich schöne Dokumentation darüber, wie das funktioniert. Sehen Sie bei Googles Ressourcen, seine Artikel sind erstaunlich. Eine andere, die ich sehr mag, ist auf Facebook's eins zu schauen. Ich habe einen namens Facebook.design. Es sind nur ihre Designer und sie können Dinge posten, an denen sie interessiert sind, Artikel, die sie geschrieben haben, woran sie arbeiten. Ich finde, das ist eine wirklich coole Ressource, um coole Ideen zu lernen und zu verfolgen und zu verstehen, wie die Dinge funktionieren. Ja, es ist eine andere coole Seite. Jetzt gehen wir los, finden Sie die besten UI-Designer, die Sie mögen. Folgen Sie ihnen auf Twitter, folgen Sie ihnen auf Facebook. Lesen Sie diese Artikel und es wird Ihnen wirklich helfen mehr Vertrauen zu bekommen, wenn Sie beginnen, Ihre Entwürfe zu liefern. Sie können diese Ihren Kunden mitteilen. In Ordnung. Wir sehen uns im nächsten Video. 42. So bekommst du deinen ersten Auftrag als UI-Designer: Wie bekommst du deine erste Arbeit als UI-Designer? Du hast den Kurs gemacht, und du bist wirklich gekommen, um loszulegen, aber wie bekommst du Arbeit? Es gibt zwei Ströme. Wenn Sie jung sind oder bereit für eine komplette Karriereänderung sind, werden Sie ein Bäcker sein, und jetzt werden Sie ein UI-Designer, oder Sie sind jung und Sie ein Student und Sie suchen, um in sie zu bekommen ist, dass die Richtung gerade als Junior-UI-Designer beginnt. Finden Sie einen Job, einen Job. Weil es wirklich schwer ist, in zu kommen, also, bauen Sie einfach ein gutes Portfolio, nutzen Sie das Projekt, das wir in dieser Klasse gemacht haben, und bauen Sie ein paar andere Projekte auf eigene Faust, für Freunde oder Kollegen und einfach einen Job. Nehmen Sie jede Bezahlung, nehmen Sie alles, und wissen Sie, dass Sie nach etwa einem Jahr eine verrückte Menge von wo auch immer Sie arbeiten lernen, und wissen, dass jeder Job, den Sie übernehmen, auch wenn es nicht der fabelhafteste Job ist, , um Ihnen diese Art von Erfahrung zu geben, die Sie für den zweiten Job benötigen. Hoffentlich blüht dieser Job in dieser Erstaunlichkeit, aber ich fand nach meiner Erfahrung, jeder seinen ersten Job, man wird eingestellt, man wird ein bisschen schlecht behandelt, man hat keine sehr guten Fähigkeiten, und nach einem Jahr oder zwei Sie beginnen tatsächlich ziemlich gut zu werden, aber das Geschäft sieht diese Person nie, deshalb behandeln sie sie als Junior, und der Lohnsatz bleibt ziemlich niedrig, und er bekommt ein wenig beschissene Jobs. Also machst du das für eine Weile, und dann bist du Jobsprung. Es ist sauer, aber es ist der Weg, um voranzukommen. Im Web-Design ist es, eine andere Agentur zu finden, ihnen zu zeigen, dass ich jetzt bin, ich bin zwei Jahre mehr Erfahrung, das ist alles, was ich gearbeitet habe. Ich habe in einer Agentur gearbeitet, also kennst du die Sprache ein bisschen mehr und du bekommst so einen besseren Job. Das ist ein Weg, um loszulegen. Nimmt nur einen Job in der Branche und geht los, aber Sie benötigen ein Portfolio, um loszulegen, also benötigen Sie einige Projekte, die Sie getan haben, wie dieses in diesem Kurs. Der andere Trend ist, wenn Sie sagen, ein Designer, oder eine kreative Agentur arbeiten, bereits Sie Ihre eigenen Sachen zu betreiben, oder Sie sind einfach gelangweilt mit dem Design, das Sie im Moment tun, das wird ein wenig anders. Du wirst wahrscheinlich alle Arbeiten auf der Seite nehmen müssen und du bist vielleicht wie ich, wenn ich jetzt Karriere ändere, ich bin 36, ich habe Kinder, es gibt keine Hypothek, um Miete zu bezahlen, aber es gibt Verantwortung. Also, was du tun musst, ist, sie rein- oder ausbrennen zu müssen. Gönnen Sie sich ein oder zwei Jahre und sagen Sie, ich werde jeden Montagabend, Dienstagabend, Mittwochabend benutzen , um an einem Projekt zu arbeiten. Am Anfang kann einfach Ihr Portfolio sein, bekommen Sie das wirklich schnell weg, Ihre eigenen Portfolios ist das schlimmer man dauert ewig, aber dann nehmen Sie jede Arbeit, die Sie können. Es könnte Freunde oder Familie sein, nur um dieses Portfolio in Gang zu bringen, dann können Sie anfangen, an anderen Nebenprojekten zu arbeiten. Sobald Sie Ihre Erfahrung gemacht haben, können Sie anfangen, Dinge wie diese Dinge wie Upwork zu betrachten. Du meldest dich dafür oder Freelancer.com oder 99designs an. Obwohl das Ihnen nicht den klaren Sprung geben wird, weil die Bezahlung in Ordnung ist, und es ist freiberuflich Zeug auf der Seite, aber es baut dieses Portfolio für sich selbst und baut diese Erfahrung auf, so dass, wenn Sie kommen zu einem Punkt, den Sie wirklich mögen, ich bin ziemlich gut darin jetzt. Ich habe ein paar Jobs gemacht, sie zahlen keine großen Beträge, sie sind wie bezahlte Studiengebühren. Sie haben keine Zeit zu gehen und ein Jahr Kurs zu machen, tun diese kleinere Arbeit nur für die kleineren bezahlt, nur um aufzubauen und es ist bezahlt und lernen, und dann, wenn Sie zu einem Punkt kommen, wo Sie sich wie fühlen, okay, ich habe meine Design-Fähigkeiten aus einem anderen Bereich und ich habe es tatsächlich hier angewendet, ich bin zuversichtlich, ich habe, dass die Sprache, dann können Sie mehr von einem Sprung in für einen anderen Job zu machen. Sie müssen auf einem mittleren Web-Level beginnen, Sie müssen 60 Riesen pro Jahr verdienen, die nicht bei der Band mindestens beginnen. Also springen Sie in diese Rolle als Middle Web Designer, und vielleicht weit oben gibt es keinen so großen Hit für die Familie, oder es könnte nur sein, dass Sie Ihr Geschäft als Grafikdesigner aufbauen, Sie immer noch nicht freiberuflich, aber Sie bekommen mehr und mehr UI arbeiten. Das ist jedenfalls mein Rat. Das ist mein Rat, in Ordnung, nächstes Video. 43. Nächste Schritte für deinen Weg zur fantastischen Ui-Designer:in: Nächste Schritte nach dem Kurs. Andere Dinge, die Sie tun können, ist, dass Sie möglicherweise in einen UX-Ansatz für das Design übergehen. Wir haben das gesamte UI-Design in Illustrator gemacht und um eine Interaktivität hinzuzufügen, können Sie sich etwas namens Adobe XD oder Experience Designer ansehen , weil wir im Moment eine Art Wohnungen haben. Sie können diese Wohnungen nehmen und sie anklickbar machen, um zu verschiedenen Seiten, Prototypen und App über das eigentliche Telefon zu springen . Adobe XD ist ein großartiger nächster Schritt für Sie, also schauen Sie sich meinen Kurs an, der UI im Webdesign mit Adobe XD heißt. Andere Werkzeuge oder Dinge, die Sie verwenden könnten, ist Photoshop. Photoshop für Web-Designer ist ein weiterer Kurs, den ich habe. Es ist nur, eine weitere Feder in Ihrer Mütze in Bezug auf ein UI-Designer zu sein. Der andere Teil, den Sie vielleicht untergehen, ist, dass Sie den gesamten Web-Design-Prozess durchlaufen könnten. Nicht nur das Entwerfen von Visuals, sondern das Erstellen der Website mithilfe von HTML und CSS. Schauen Sie sich meine Dreamweaver-Kurse an. Es gibt ein paar verschiedene. Diese, die mehr Designseite sind, und dann gibt es eine, die mehr Codierseiten ist. Sieh dir die an. Eine weitere Option, die Sie untergehen könnten, ist die gesamte UX-Erfahrung. Wir haben über UI gesprochen und kurz, was UX ist, und den Unterschied zwischen einer Benutzeroberfläche und User Experience Design aber ich habe einen Kurs, wie man ein UX-Designer wird. Überprüfen Sie das, wenn Sie in ein bisschen mehr UX-Design einsteigen möchten oder zumindest verstehen möchten, was es ist. Das wird es sein. Danke fürs Zuschauen. Ich bin mir nie sicher, was ich am Ende tun soll, ich murmele einfach mit. Murmeln. Murmeln. Tschüss, jetzt. 44. Nächste Schritte für deinen Weg zur fantastischen Ui-Designer:in: In Ordnung. Jetzt ist es Zeit für die nächsten Schritte. Was mache ich jetzt? Beendet den Kurs, ich beginne in der Benutzeroberfläche. Was kann ich als Nächstes tun? Jetzt können Sie als UI-Designer bleiben und diese Fähigkeiten einfach weiter ausüben. Holen Sie sich mehr Arbeit erstellen Sie ein Portfolio, machen Sie einfach die Design-Seite, bleiben Sie auf der Illustrator-Seite und liefern Sie Dateien und setzen Sie das CSS an unseren Webentwickler. Aber wenn Sie ein bisschen weiter gehen wollen, wäre der nächste Schritt, sich das Webmaterial selbst zu machen. Um mit seinem HTML und CSS zu beginnen, so dass Codierseite, können Sie es ziemlich visuell tun. Ich habe einen Kurs während des Hebel für Bootstrap , der es ziemlich visuell mit etwas wie Dreamweaver hält und wir werden nicht zu schwer im Code, so dass Sie das definitiv als Webdesigner tun können. Alles, was Sie vielleicht noch weiter gehen wollen und ein vollwertiges Front-End-Web-Design zu sein, müssen Sie wirklich den Code verstehen und es gibt einen anderen Kurs, den ich habe es ist wie Codierung für Designer oder Codierung Ihrer ersten Website. Das war's. Ich werde das überprüfen und das verwendet auch Dreamweaver. Das kann der nächste Schritt sein, in dem Sie es in Illustrator entwerfen in etwas wie Dreamweaver erstellen. Wenn Sie Dreamweaver nicht verwenden möchten, ist das in Ordnung. Es gibt andere Programme, in denen Sie lernen können, zu programmieren. Komodo ist einer. Wow, ich kann mir den Rest nicht einfallen. Sublime, K2 ist wahrscheinlich die beliebteste in meinen Kreisen im Moment. Es ist nur ein weiterer Code, wie Dreamweaver. Was kannst du sonst noch tun? Sie können Ihre Fähigkeiten in einem anderen Design-Programm wie Photoshop aufbauen. Ich habe einen Kurs, wie man genau das aufbaut, was wir hier in Illustrator so ziemlich getan haben , aber das in Photoshop zu tun. Sie haben beide Werkzeuge zu verwenden, Sie könnten feststellen, dass, wenn Sie nach Arbeit suchen, sie sich auf das eine oder andere stützen können Sie auch darauf gehen. Was kannst du sonst noch tun? Sie können anfangen, etwas wie Muse vielleicht zu verwenden. Sie können einige Sachen entwerfen und Muse verwenden, um die Website zu bauen. Es ist definitiv kein Code. Ich habe auch einen Kurs Om Muse. Natürlich auf alles. Eine andere Sache, die Sie in Betracht ziehen könnten, ist vielleicht, Ihre Design-Fähigkeiten zu nehmen, es zu entwerfen und es zu veranschaulichen, und dann vielleicht in WordPress aufzubauen. WordPress ist wahrscheinlich das größte CMS im Ganzen, ganz ins Web. Sie können sie in Illustrator entwerfen und dann etwas bauen, das in WordPress genannt wird, die eine Richtung sein könnten, die Sie gehen würden. Du könntest einfach als Webdesigner bleiben. Viele Leute tun es, und das ist völlig in Ordnung. Ich mag sowohl das Design als auch den Build, aber Sie könnten einfach die Designseite bleiben. Vielleicht haben Sie andere Dinge, an denen Sie arbeiten, und Sie tun nur einige Design-Dinge als Teil davon. Wahrscheinlich ist der krönende Ruhm, zumindest meiner Meinung nach im Moment, zumindest meiner Meinung nach im Moment,Sie UI-Arbeit zu nehmen und ein Niveau der Forschung und Tests hinzuzufügen, im Wesentlichen ein UX-Designer zu werden. Schauen Sie sich an, wie man ein UX-Designer wird und das ist ein weiterer Kurs, den ich habe. Aber es fügt eine Ebene hinzu, die ich in Bezug auf das Geschäftsverständnis liebe und sein UI-Design ist jetzt ziemlich oft bei UX-Design im Moment gesucht. Nutzt Ihre Fähigkeiten von UI, baut aber auf, dass mit anderen Tools und anderen Techniken und das ist im Moment in verrückter Nachfrage. Die meisten Leute sagen, ich will einen UX-UI-Designer. Es gibt einige ein bisschen anders, aber UX könnte ein Fortschritt für Einheiten sein und es zahlt sich im Moment wirklich gut aus. Das könnte die Sache sein, in die du gehst. 45. Dein erstes Projekt: Es ist Projektzeit, Hausaufgabenzeit, berufliche Entwicklungszeit, wie auch immer Sie es nennen wollen, dieses Bit ist super wichtig. Ich verspreche Ihnen, den Leuten, die ich unterrichte, ich unterrichte eine Menge Leute. Es sind die Leute, die dies wie ein zusätzlicher Schritt machen weil Sie mir Schritt für Schritt diesen Kurs folgen , der erstaunlich ist und Sie werden die Ideen bekommen , aber es ist nicht, bis Sie sie in Ihre eigene Praxis umgesetzt haben, wir müssen denken, für sich selbst in Ihre eigenen Probleme laufen. Also, dieses kleine Projekt werde ich es für Sie speichern. Die Leute, die das tun, sind diejenigen, die sich daran erinnern werden. Wenn du es ernst meinst, mach dieses kleine Projekt, saß in mich ein. Ich würde gerne sehen, was du tust, lass uns ein paar kleine Aufgaben sehen, die zu erledigen sind. Wir haben sie aufgeschrieben. Du wirst Sachen für einen Klienten tun. Es ist ein kleines Café, das in deiner Nachbarschaft eröffnet wird. Es heißt Craft Espresso. Was ich möchte, dass Sie tun, ist zu so etwas wie Auszeichnungen gehen, awwwards.com. Zur Inspiration möchte ich, dass Sie einen Desktop, ein Tablet und eine mobile Version für sie tun und ich möchte, dass Sie das Logo machen, ich möchte, dass Sie das Stift-Werkzeug verwenden oder die Form ein Werkzeug erstellen, um einige Victor-Logo zu bauen und ihren Namen daneben setzen. Ich möchte, dass Sie Farben für das Logo und für di