Wie man macOS für Webdesign einrichtet

1. Willkommen beim Kurs: In dieser Klasse werde ich Ihnen zeigen, wie Sie Ihren Mac für das Webdesign einrichten. Fangen wir an. He, alle. Willkommen. Mein Name ist Adi Purdila, und ich bin Webdesignerin und -entwickler. Wenn Sie gerade erst mit dem Webdesign beginnen, zeigt Ihnen diese Klasse alle Tools, die Sie benötigen, um schnell und effizient zu sein. Wenn Sie ein erfahrener Designer sind, dann finden Sie möglicherweise einige Apps, die tatsächlich sehr nützlich sind, aber Sie hatten keine Ahnung von. In dieser Klasse werde ich Ihnen die Apps zeigen, die ich fast täglich verwende. Sie haben einen bedeutenden Unterschied für mich bewirkt, und ich glaube, es wird dasselbe für Sie sein. Ich werde Ihnen zeigen, welche Design-Software ich verwende und auch ein paar Alternativen, sowie kurze Vor- und Nachteile für jeden. Sie werden einige erstaunliche Apps zum Auswählen von Farben, Erstellen von Farbpaletten und Überprüfen des Kontrastes zwischen den Farben , damit Sie sicherstellen können, dass Ihre Designs zugänglich sind. Ich werde Ihnen auch zeigen, wie Sie Ihre Schriftarten viel einfacher organisieren, als Lesezeichen markieren und eine Vorschau anzeigen Dies ist für Designer so nützlich, weil es eine enorme Zeitersparnis ist. Sie werden auch lernen, wie Sie Ihre Symbole verwalten und organisieren , so dass Sie immer schnell die gewünschten finden können. In den letzten zwei Lektionen werde ich Ihnen zeigen, wie Sie jede Entfernung oder Dimension auf dem Bildschirm messen und wie Sie tolle Screenshots machen und sie mit Ihrem Team oder Kunden teilen können. Nun, diese Klasse richtet sich hauptsächlich an Mac-Benutzer, aber ich denke, Sie sollten sie immer noch beobachten, selbst wenn Sie Windows verwenden, weil Sie möglicherweise einige überzeugende Gründe für den Wechsel zu macOS für Webdesign finden . Lektion Nummer 2 ist Ihnen gewidmet, dem Windows-Benutzer, und das ist, wo ich meine Argumentation für Auswahl von macOS über Windows für diese Art von Arbeit. Wenn Sie ein Mac-Benutzer sind, können Sie direkt in Lektion 3 springen, wo ich Ihnen zeigen werde, welche Designsoftware ich verwende, um alle meine Designs heute zu erstellen. Bist du bereit? Fangen wir an. 2. Ein Quick Word für Windows-Benutzer: Hey, willkommen zur ersten Lektion dieser Klasse. Bevor ich in den Hauptinhalt komme, wollte ich dieses schnelle Video an alle Windows-Benutzer richten, die uns beobachten. Wie Sie wahrscheinlich mittlerweile erkennen, dieser Klasse darum, macOS für das Webdesign einzurichten. Das heißt nicht, dass ich Windows nicht mag, oder ich mag dich nicht, das stimmt nicht. Ich bin mit Windows und PCs aufgewachsen und habe zwei PCs zu Hause unter Windows und Linux, und insgesamt liebe ich es. Ich glaube jedoch, dass für diese Art von Arbeit, für das Webdesign, macOS besser ist als Windows. Das bedeutet nicht, dass Sie Windows nicht dafür verwenden können, das können Sie absolut. Sie können jede Schnittstelle, jede Benutzeroberfläche, die Sie auf beiden Plattformen wollen, entwerfen . Aber ich denke, Sie werden eine einfachere und angenehmere Zeit haben, das auf macOS zu tun. Das ist alles, was es dazu gibt. Ich habe tatsächlich einige sehr gute Gründe, das zu glauben. Der Hauptgrund ist die Vielzahl von Apps, die Sie herunterladen und verwenden können, von denen die meisten kostenlos sind. Alle diese Apps sind unglaublich nützlich und die meisten von ihnen sind einzigartig, was bedeutet, dass sie kein Windows-Gegenstück haben, oder wenn sie es tun, ist es normalerweise nicht so gut. Mit den macOS-Apps, die ich benutze, funktioniert alles wie erwartet und das ist etwas, was ich sehr schätze. Ein weiterer guter Grund für die Verwendung von macOS ist die Sketch-Anwendung, die nur für Mac ist. Dies ist immer noch die Lieblings-Digital-Design-App für viele Leute, und ich finde mich immer noch darauf zu greifen obwohl ich heute in erster Linie ein Figma-Benutzer bin. Ich werde in der nächsten Lektion mehr über Sketch sprechen. Ich liebe auch die Zuverlässigkeit von macOS- und Mac-Computern im Allgemeinen. Ich denke, die Leute sollten mehr darauf achten weil es sehr wichtig ist, dass Sie ein Stück Ausrüstung haben, auf das Sie sich verlassen können, besonders wenn es für Ihr Geschäft ist. Ich bekomme selten Abstürze in macOS. Wie ich bereits sagte, funktioniert alles aus Hardware- und Softwaresicht nur wie erwartet. Apropos Hardware, ich denke, Apple hat derzeit die besten Verbraucherdisplays auf dem Markt. Hier, ich spreche von ihren berühmten Retina-Displays. Derzeit habe ich zwei Macs mit Retina-Displays, und das ist einer von ihnen. Lassen Sie mich Ihnen nur eins sagen. Sobald Sie an einem Retina-Display arbeiten, werden Sie nie wieder ein anderes Display verwenden wollen, verspreche ich Ihnen. Dies gilt vor allem für das Design. Diese Displays sind sehr hell, und sie sind auch sehr hohe Auflösung, so dass Text und alles andere auf ihnen wirklich unglaublich scharf ist. Nun, wenn Sie darüber nachdenken, zu macOS zu wechseln, gibt es eigentlich keine Zeit besser als die Gegenwart. Ich nehme diese Klasse im Januar 2021 auf. ein paar Monaten hat Apple gerade seinen neuen M1-Chip und drei Computer angekündigt, die es verwenden. Einer davon ist ein Mac Mini mit einem Preis von rund $700. In Anbetracht des Preis-Leistungs-Verhältnisses ist dies eigentlich ein Schnäppchen und das ist, was ich Ihnen empfehlen würde , wenn Sie mit der Mac-Plattform beginnen möchten. Nun, wenn Sie ein Windows-Benutzer und Sie nicht wechseln möchten, sprechen wir darüber. Posten Sie einen Kommentar im Diskussionsbereich und vielleicht kann ich Ihnen in irgendeiner Weise helfen. Vielleicht kann ich ein Tool für Windows empfehlen , das Ihr Leben ein wenig einfacher macht. Wenn es genug Interessen gibt, werde ich sogar eine separate Klasse zum Einrichten von Windows für das Webdesign in Betracht ziehen. Mit diesem gesagt, lasst uns in das Fleisch und die Kartoffeln dieser Klasse kommen. Der allererste Schritt, den Sie tun müssen, ist die Installation Ihrer Designsoftware. Das ist die App, die Sie verwenden werden, um Ihre Entwürfe zu erstellen. Aber welche sollten Sie bekommen? Weil es ein paar würdige Optionen gibt. Nun, lassen Sie uns das in der nächsten Lektion herausfinden. 3. Design-Software: Hey, willkommen zurück in der Klasse. In dieser Lektion geht es um Designsoftware und wir werden uns ein paar verfügbare Optionen ansehen. Ich werde schnell durch die Vor- und Nachteile für jeden gehen. Ich werde dir sagen, was du vermeiden sollst. Und auch, was ich empfehle. Klingt gut. Lass uns gehen. Ich werde damit anfangen, dir zu sagen, was du vermeiden sollst, okay? Wenn es um UI-Design oder Interface-Design geht, sollten Sie sich von Adobe Photoshop und Adobe Illustrator fernhalten. Und es gibt noch ein paar mehr da draußen, aber das sind die wichtigsten. Und versteh mich nicht falsch. Photoshop und Illustrator. Fantastische Apps für das, was sie entworfen wurden, nicht für diese Art von Arbeit. Also für das Erstellen oder Entwerfen von Websites und mobilen Apps und so, sie sind nicht sehr gut darin. Ich weiß, dass viele Leute begonnen haben, Websites in Photoshop zu entwerfen. ein paar Jahren. Ich selbst eingeschlossen. Aber wir haben das getan, weil es dort draußen keine echte Alternative gab. Ok. Aber heute, komm schon. Es gibt so viele Apps, aus denen Sie wählen können. Und ich werde Ihnen drei von ihnen nur in dieser Lektion zeigen. Ich denke, technisch gesehen können Sie natürlich jede beliebige Schnittstelle in Photoshop und Illustrator entwerfen, aber das wird Ihnen schwer sein. Deshalb würde ich empfehlen, dass du gehst. Oder Sie verwenden Photoshop Illustrator für das, was sie ursprünglich entworfen wurden, nämlich die Bildbearbeitung und das Erstellen von Illustrationen. Weil wir effizient arbeiten wollen. Wir möchten Tools verwenden, die speziell für diese Art von Arbeit für UI-Design entwickelt wurden. Und wir werden mit Skizze beginnen. Jetzt Skizze ist ziemlich genial. Dies ist eigentlich das Tool, das ich benutzt habe oder direkt nachdem ich von Photoshop umgeschaltet habe. Ich glaube, damals war es Skizze Version drei. Jetzt ist es Skizze Version fünf etwas. Nun, skizziere Version 50 etwas, weil sie ihre Versionsnummer vor einer Weile multiplizieren. Aber normalerweise wäre es eine Version fünf Skizze war wie diese super leichte Version zu Photoshop, wo ich eine Website oder eine Schnittstelle so viel einfacher entwerfen konnte, half es eine Menge von Steuerelementen, die speziell dafür entwickelt wurden. Offensichtlich hat sich diese App mit der Zeit entwickelt, wurde besser und besser. Es hat jetzt eine Reihe von Funktionen, die Sie verwenden können um Ihren Workflow in Bezug auf die Benutzeroberfläche zu optimieren, Dies ist ziemlich einfach. Sie haben eine obere Symbolleiste, die Sie auch anpassen können, um Ihre wichtigsten zu halten. Werkzeuge. Hier haben Sie einen Abschnitt für den Wechsel zu den verschiedenen Seiten. Dies ist eine Ebene Panels, so dass ich jede Form erstellen kann, die ich will. Es wird gleich hier auftauchen. Und auf der rechten Seite haben Sie ein Inspektorfenster, mit dem Sie auf die verschiedenen Eigenschaften der Objekte zugreifen können, die Sie auf dieser Arbeitsfläche ausgewählt haben. Wenn es um Vor- und Nachteile geht, denke ich, das größte ist, dass eine native Mac-App skizziert. Es ist also sehr schnell, das auf macOS unglaublich gut läuft. Und es hat sogar Unterstützung für macOS, Big Sur, das neueste Betriebssystem von Apple zum Zeitpunkt dieser Aufnahme auf diesem Computer ist, ich benutze Catalina, das ist die vorherige Version. Es sieht also wie die Standard-Skizzenschnittstelle aus. Aber in Big Sur hat es tatsächlich eine leicht aktualisierte Schnittstelle und meiner Meinung nach sieht es brillant aus. Ich liebe auch die Tatsache, dass es einen dunklen Modus hat. Und ich kann leicht zwischen dunklem Modus und Licht-Modus von der Erscheinung hier wechseln. Und so sieht es im Lite-Modus aus. Und das ist eigentlich die einzige App, die einen dunklen Modus von allen Apps unterstützt, die ich Ihnen heute zeigen werde. Sketch hat auch eine riesige Gemeinschaft dahinter. Sie haben eine Menge von Websites mit verschiedenen Ressourcen für Skizze gemacht. Viele Plugins, die von Community-Mitgliedern entwickelt wurden. Und im Grunde hat es alles, was man braucht. In einer Design-App. Mit Skizze können Sie alles erstellen, von Symbolen über App bis hin zum Website-Design. Und es ist wirklich ein sehr komplettes Toolkit. Nun, wenn es um die Nachteile geht, denke ich, der größte ist die Tatsache, dass es nicht kostenlos ist. Sketch ist derzeit bei $99. Also, wenn Sie es benutzen wollen, müssen Sie das im Voraus bezahlen. Und dann, wenn Sie weiterhin die aktualisierte Version der App erhalten möchten, müssten Sie weitere $79 pro Jahr ausgeben. Also im Grunde zahlen Sie $99 im ersten Jahr. Sie haben die Updates in der App enthalten. Aber nachdem dieses Jahr vergangen ist, wenn Sie die aktualisierten Versionen wollen, müssten Sie im Grunde Ihr Abonnement für $79 pro Jahr verlängern. Also das ist Betrüger, Nummer eins. Spalte Nummer zwei ist, dass es die Tatsache gibt, dass dies nur Mac ist. Offensichtlich kein Problem für diese Klasse, weil es darum geht, macOS für Webdesign einzurichten. Wenn Sie jedoch weiter unten sind, denken Sie vielleicht darüber nach, zu Windows zu wechseln oder von einem anderen Betriebssystem aus auf Ihre Entwurfsdateien zuzugreifen. Verwendung von Sketch ist nicht für Sie, da dies nur unter macOS ausgeführt wird. Und wenn Sie interessiert sind, erhalten Sie die App auf sketch.com. Jetzt ist das nächste Werkzeug auf der Liste Adobe XD. Dies ist eine weitere leistungsstarke App und eine, die tatsächlich unglaublich beliebt in Bezug auf die Schnittstelle. Es ist ziemlich ähnlich wie Skizze. Sie haben eine Symbolleiste hier auf der linken Seite. Sie können auch das Ebenenfenster hier und das Inspektorfenster rechts hier sehen . Und wenn es um Adobe XD geht, gibt es viele Profis. Zuallererst ist es absolut kostenlos. Es gibt auch eine kostenpflichtige Version, aber wenn Sie gerade erst anfangen oder Sie nicht wie alle Collaboration-Tools benötigen. Dies ist ein kostenloses Tool. Ein weiterer Vorteil ist, dass es sowohl unter Mac OS als auch unter Windows funktioniert. Wenn Sie also vielleicht zwei Computer haben, einen im Büro, einen bei Ihnen zu Hause, können Sie mit der Arbeit an einem Projekt im Büro beginnen und Sie können es zu Hause auf einem anderen Betriebssystem beenden , kein Problem überhaupt. Außerdem können Sie Ihre Dokumente in der Cloud speichern , damit sie von überall aus zugänglich sind. Adobe X D hat auch eine riesige Community dahinter, mit vielen Assets, die zum Download zur Verfügung stehen, wie UI-Kits und vieles mehr. Es stehen viele Plugins zur Verfügung. Und genau wie die Skizze, hat es alles, was Sie von einem Design-AP benötigen, plus tatsächlich einige einzigartige Features wie das Wiederholraster. Wenn ich beispielsweise ein Rechteck hier habe, kann ich ein Raster erstellen, indem ich auf eine einfache Schaltfläche klicke und so ziehe, und es geht in mehrere Richtungen und ich kann den Abstand zwischen den Rasterelementen leicht anpassen. Das ist also eine Funktion, die ich nirgendwo anders gesehen habe. Es verfügt auch über ein sehr cooles Asset-Panel, mit dem Sie Farben, Zeichenstile und Komponenten für die Wiederverwendung Ihrer Projekte speichern können. Oder zum Beispiel, Ich kann dieses Element auswählen x D weiß, dass es zwei Farben auf sie angewendet und für eine Füllung lesen, zustimmen für einen Rahmen. Und es schafft automatisch diese beiden Farben für mich. Auch wenn ich ein Textelement habe, kann ich diese Zeichenstile wirklich einfach speichern. Also lassen Sie mich Ihnen hier kurz ein Beispiel geben. Ich kann auf diese Schaltfläche klicken und es wird als helvetica neue unregelmäßige 20 Pixel speichern. Es bekommt seine Informationen von hier. Und weiter unten kann ich mit der rechten Maustaste darauf klicken, das kann ich bearbeiten. Und ich kann diese Eigenschaften und alle Texte auf einem ändern , der diesen Zeichenstil hat, um es anzuwenden, wird auch aktualisiert, was ziemlich genial ist. Und natürlich, wie der Name schon sagt, es ist ein Adobe-Produkt. Wir wissen also, dass es sich um ein Qualitätsprodukt handelt, das sehr oft aktualisiert wird. Was ich an XD wirklich mag, ist die Tatsache, dass es sehr schnell ist und eine sehr saubere Benutzeroberfläche hat. Auch Spaß Tatsache, Sie können Skizzen- und Photoshop-Dateien in Adobe XD importieren. Also, wenn Sie vielleicht von einer dieser Apps für Ihre Web-Design-Anforderungen wechseln. Dann können Sie alle Ihre alten Dateien in XD importieren. Kein Problem. Nun, wenn es um die Nachteile der Verwendung von Adobe XD geht, Um ehrlich zu sein, kann ich mir keine vorstellen. Ich denke, das ist eine wirklich, wirklich gute App für jeden, der versucht, in. Webdesign. Vielleicht ist die Tatsache, dass es keinen dunklen Knoten hat, obwohl das ziemlich subjektiv ist, nicht jeder mag einen dunklen Modus. Oder vielleicht die Tatsache, dass seine Schnittstelle nicht so anpassbar ist wie die Benutzeroberfläche von Skizze, zum Beispiel. Vielleicht können wir das als Betrüger betrachten. Ich weiß es nicht. Meiner Meinung nach. Ich sehe keine echten Nachteile oder Autos, die für Adobe XD erwähnenswert sind. Wenn Sie Adobe XD jetzt erhalten möchten, können Sie es in der Creative Cloud-App abrufen. Wenn du das hast. Oder wenn Sie dies nicht tun, können Sie einfach zu Adobe.com Slash Produkte Slash XD gehen. Und hier können Sie einfach auf den Start-Button klicken und Sie können ihn von dort herunterladen. Nun, für Sigma, Nun, das ist diejenige, die ich täglich benutze. Und ich liebe diese App wirklich in Bezug auf die Benutzeroberfläche. Nichts Besonderes wirklich. Es ist sehr ähnlich zu allen anderen Design-Apps da draußen. Wir haben eine Symbolleiste hier oben, Ebenen und Assets auf der linken Seite, Inspektor auf der rechten Seite, und die Leinwand und die Mitte. Was ich wirklich daran liebe, herauszufinden, ist die Tatsache, dass es kostenlos ist. Es funktioniert unter Windows, Mac OS und Linux. Und es funktioniert auch im Browser. Also hier bin ich eigentlich in Safari. Und ich habe eine FISMA Datei geöffnet. Aber ich habe auch die Desktop-App installiert und jede Änderung, die Sie an Ihren Dateien vornehmen, wird automatisch in der Cloud gespeichert. So kann ich zum Beispiel ein Rechteck in meiner Desktop-App zeichnen. Und wenn ich auf die Web-App oder die im Browser basierte wechseln, werden Sie sehen, dass die Änderung hier sofort angezeigt wird. Und ich liebe die Tatsache, dass alle meine Dateien online sind und sie von überall aus zugänglich sind, wo ich will. Jetzt, genau wie die anderen beiden, hat sigma alles, was Sie brauchen, in einer Design-API kann jede Schnittstelle damit erstellen. Aber Sie können auch Symbole, Vektoren, Illustrationen entwerfen , selbst es ist sehr, sehr mächtig. Nun, abgesehen von den üblichen Dingen, die Sie in einer solchen Software finden würden, hat sigma auch einige einzigartige Funktionen, zum Beispiel Auto-Layout. So kann ich zum Beispiel ein automatisches Layout zu einem bestimmten Objekt hinzufügen. Und dann kann ich es. Fangen Sie an, das Objekt so herum zu bewegen. So wie das. Ich kann meinen Hauptrahmen auswählen, ich kann eine andere Ausrichtung wählen. Ich kann den Abstand zwischen den Elementen ändern. Und auch kann ich die Polsterung des Hauptcontainers ändern. Und auch etwas, das ich in keiner anderen App gesehen habe. Und das ist eigentlich eines meiner Lieblingsmerkmale in Sigma ist Auswahlfarben. Wenn Sie also eine Gruppe von Elementen auswählen und auf diese Elemente unterschiedliche Farben angewendet haben, finden Sie alle unter einer einzigen Gruppe im Inspektor. Und Sie können den Hex-Code sehen. Sie können sie wirklich einfach ändern, ohne tatsächlich dieses Element auszuwählen. Nur von dieser Schnittstelle. Sie können auch die Deckkraft dieser Farbe ändern und sie kann auch einen Farbstil erstellen. Und wenn Sie sich nicht sicher sind, welche Elemente diese Farbe verwendet haben, haben Sie hier eine kleine Schaltfläche, mit der Sie das Element mit dieser Farbe auswählen können. Ein fantastisches Feature. Ich benutze es die ganze Zeit. Und ich wünschte, eine andere Design-Software würde so etwas implementieren. Sigma ist wirklich schnell. Es hat eine sehr saubere Benutzeroberfläche. Und ich erwähnte, dass es kostenlos ist. Ja, es ist kostenlos. Es hat auch einen bezahlten Plan, aber das ist für Teams. Wenn Sie also mehr Teams erstellen möchten, würden Sie dafür extra bezahlen. Aber wenn du es nicht tust, dann ist es völlig kostenlos. Und jeder auf jeder Plattform, jedem Browser kann Sigma verwenden, was in Bezug auf Nachteile fantastisch ist. Die einzige, die ich bisher getroffen habe, ist, dass es manchmal beim Importieren von SVGs Fehler gibt. Aber abgesehen davon habe ich nichts Schlechtes über meine Hand zu sagen. In der Tat ist dies meine persönliche Empfehlung für eine Design-Software, unabhängig von Ihrem Qualifikationsniveau. Also, wenn Sie gerade erst anfangen, empfehle ich, Fatma zu verwenden. Wenn Sie vielleicht ein Veteran sind, empfehle ich Ihnen, auf Sigma zu wechseln. Ich bin so zuversichtlich, dass dies ein gutes Produkt ist. Also gut, diese drei Apps sind das, was wir Mainstream nennen könnten. Jeder weiß von ihnen. Sie sind in Bezug auf Funktionen am vollständigsten. Und sie alle haben wirklich große Gemeinschaften hinter sich. Damit gibt es eine weitere App, die Sie interessieren könnten , und das heißt Studio. Dies wird von einem japanischen Unternehmen namens Studio Inc. mit Sitz in Tokio gemacht. Diese App ist ziemlich anders als das, was Sie gewohnt sind, weil Sie jede Art von Interface-Design erstellen können. Aber die Erfahrung ist die eines visuellen Builders. Die Elemente sind in der Regel gestapelt, so dass sich das Ändern eines auf die anderen auswirkt. Sie können Ränder und Füllstände zu Elementen hinzufügen und es ist fast so, als würde man an einer Live-Seite arbeiten. Das Coole an Studio ist, dass es eine codierte Version dieses Designs erstellen kann, die Sie dann auf Ihren eigenen Server hochladen können. Mit ihm. Sie können Ihre gesamte Website im Grunde entwerfen und codieren, ohne selbst eine einzige Codezeile zu schreiben. Ein Nachteil könnte die Tatsache sein, dass Studio funktioniert nur im Chrome-Browser für jetzt, und es hat nicht alle Schnickschnack dieser anderen, wie ich sie Mainstream-Design-Apps nennen. Ich werde nicht auf viel Detail über diese App gehen. Aber wenn Sie daran interessiert sind, eine Klasse über Studio zu sehen, lassen Sie es mich unter Diskussions-Tab wissen, ich würde Ihnen gerne einen tieferen Blick auf diese Anwendung geben. Alles klar, jetzt ist es an der Zeit zu beschäftigen. Ihre Aufgabe ist es, herauszufinden, welche Designsoftware Sie verwenden möchten. Wenn Sie bereits einen bevorzugten haben. Das ist großartig. Wir können weitermachen. Wenn nicht, gehen Sie weiter und laden Sie eine davon herunter und installieren Sie es auf Ihrem System, spielen Sie damit herum, sehen Sie, ob es Ihnen gefällt. Es spielt keine Rolle, welche. Wichtig ist, dass Sie es mögen und Sie sich wohl fühlen, damit zu arbeiten. Wenn Sie nicht wissen, welche Sie bekommen sollen, dann gehen Sie einfach mit meiner Empfehlung und wählen Sie Sigma. Erstellen Sie ein kostenloses Konto und Sie sind gut zu gehen. Sie müssen nicht einmal alles herunterladen, was Sie in den Browser loslegen können, oder einfach alle von ihnen herunterladen und spielen, bis Sie die finden, die Sie mögen. Gehen wir nun zur nächsten Kategorie von Werkzeugen, die Vierfarbmanagement ist. Und in der nächsten Lektion werde ich Ihnen drei sehr nützliche Apps zeigen. Also sehe ich dich dort. 4. Farbmanagement: Hey, willkommen zurück in der Klasse. In dieser Lektion geht es um Farbmanagement, und ich zeige Ihnen die Apps, die verwendet werden, um Farben von überall auf dem Bildschirm auszuwählen , um auf Farbkontrast zu überprüfen und auch Farbpaletten zu erstellen. Nun, ich bin wirklich aufgeregt darüber, weil Farbe einer der grundlegenden Aspekte des Designs ist , und Werkzeuge zu haben, die mich dazu befähigen, dies zu tun, ist einfach fantastisch. Lassen Sie uns beginnen, indem Sie sich eine App namens ColorSnapper ansehen. Sie können die App von colorsnapper.com abrufen. Dies ist nur ein Mac. Sie können es kostenlos testen und Sie können es auch für ca. €12 kaufen. Ich bin mir nicht sicher, was das in Dollar ist, wahrscheinlich um $15 oder so etwas. Nun, dies ist eine App, die schön in Ihrer Menüleiste in macOS sitzt, und Sie können ihm eine Tastenkombination zuweisen, meins ist Befehls-Option C, und erhalten Sie diesen großen Farbwähler, den Sie damiterhalten Sie diesen großen Farbwähler, den Siekleiner oder größer mit Ihr Mausrad. Es ist wie eine Lupe. Sie können überall auf dem Bildschirm gehen und Sie können jede Farbe abtasten. Sehen Sie, wie es den Hex-Wert dort ändert? Sobald Sie die Farbe finden, die Sie erhalten möchten, klicken Sie einfach, und das wird automatisch in der Geschichte der App hier gespeichert werden, und auch in Ihre Zwischenablage, so dass Sie schnell zu einer App springen und Sie können diese Farbe direkt hier anwenden. Es ist so einfach, und wie gesagt, es funktioniert überall auf dem Bildschirm. Jetzt können Sie auch das Format der Farbe ändern, die Sie auswählen Wenn Sie also zu Farben & Formate gehen, ist es jetzt auf CSS Hex gesetzt, aber Sie können einen generischen Hex ohne das Hash-Zeichen vorne bekommen oder vielleicht möchten Sie ein RGB-Format mit roten , grünen, blauen Werten oder RGBA mit einem Alphakanal, HSL und einigen anderen Formaten. Eigentlich ist die Liste hier ziemlich groß. Das Fenster Farben & Formate ist auch über eine Tastenkombination zugänglich, meins ist Shift Command C, und Sie können auch einen Verlauf der Farbe sehen, die Sie hier ausgewählt haben. Sie können dies mit dem Scrollrad Ihrer Maus scrollen. Wenn Sie eine Farbe haben, die Sie als Favorit speichern möchten, können Sie einfach auf das kleine Symbol klicken, und jetzt können Sie darauf klicken und zwischen Verlaufsmodus und Favoriten-Modus wechseln. Das ist sehr praktisch. Wenn Sie nun eine Farbe ändern möchten, die Sie ausgewählt haben, können Sie zu Farben & Formate gehen, Sie können die Farbe auswählen, die Sie ändern möchten, zum Beispiel diese, und Sie können hier auf dieses kleine Symbol klicken, das Edit Farbe. Das wird diesen Editor öffnen, wo Sie die Deckkraft ändern, die Sättigung oder tatsächlich die Helligkeit der Farbe ändern können, oder es kann den Farbton vollständig ändern. Sie haben auch einige zusätzliche Optionen hier, Sie können zwischen dem Farbrad oder einem Graustufen RGB, HSB Schieberegler wählen. Sie können auch zwischen einigen vordefinierten Farben im System wählen, oder Sie können zwischen diesem Spektrum wählen. In Bezug auf die Präferenzen für die App ist das ziemlich unkompliziert, Sie können sich für die Tastenkombinationen entscheiden, die Sie für die Auswahl der Farbe und auch die Anzeige von Farben und Formaten möchten . Es gibt auch einen Präzisionsmodus , den ich dir nicht gezeigt habe. Wenn Sie die Farbauswahl öffnen und die Strg-Taste drücken, können Sie sich mit viel mehr Präzision bewegen. Dies ist ohne den Präzisionsmodus aktiviert, dies ist mit aktiviertem Präzisionsmodus. Sie können dort wirklich hineinzoomen und die genaue Farbe auswählen, die Sie wollen. Sie können das Erscheinungsbild auch wie die Vergrößerungsstufe der Schleife, den Erfassungsbereich ändern , Sie können wählen, ob Sie ein dunkles Design verwenden oder nicht, und Sie können auch einige der Formate ändern, die Sie verwenden können, um die Farbe zu speichern, wie Großbuchstaben bei der Auswahl des Hex oder des CSS Hex usw. Wenn Sie nach einem guten Farbwähler suchen, ist dies eigentlich meine Empfehlung. Wir haben noch einen, über den ich ein bisschen reden werde, das heißt Sip. Das ist auch ein großartiger Farbwähler, aber es ist ein bisschen kompliziert für die Auswahl von Farben. Stattdessen ist ColorSnapper eine App, die ich seit langem verwende und ich kann sie Ihnen von ganzem Herzen empfehlen. Die nächste App, die ich Ihnen zeigen möchte, heißt Kontrast, und dies wird verwendet, um den Kontrast zwischen zwei Farben zu überprüfen und sicherzustellen, dass sie zugänglich sind, und um festzustellen, dass sie die WCAG-Farbkontrastverhältnisse verwenden. Nun, wie funktioniert das? Nun, sagen wir, Sie möchten eine Schaltfläche erstellen, und Sie geben ihm eine, sagen wir eine Füllfarbe, so etwas, und dann wählen Sie den Text aus und Sie geben ihm eine Textfarbe. Sagen wir so etwas. Wenn Sie nun den Kontrast zwischen der Textfarbe und der Hintergrundfarbe überprüfen möchten, in diesem speziellen Fall feststellen, Sie in diesem speziellen Fall feststellen,dass es nicht zugänglich ist, so dass Menschen mit eingeschränkter Sehkraft eine harte Zeit haben Lesen dieses Textes. Um dies zu tun, Contrast ist eine App, die wieder, sitzt in Ihrer Menüleiste, und Sie klicken einfach auf die kleine Pipette Werkzeug, wählen Sie eine Farbe, klicken Sie darauf und wählen Sie die andere Farbe. Dies bestimmt das Kontrastverhältnis zwischen den beiden Farben, in meinem Fall ist es 2,04, und es ist ein Fehler. Nun, wenn ich die Helligkeit dieser Farbe erhöhen werde, und ich versuche es erneut Sie werden sehen, dass ich jetzt ein viel höheres Kontrastverhältnis habe, 9,26, und das ist ein Erfolg in Bezug auf Zugänglichkeit. Menschen mit Sehstörungen können diesen Text lesen. Es ist wirklich so einfach wie eine App. Zu jedem Zeitpunkt können Sie Farben tauschen, indem Sie auf diese Schaltfläche klicken, und Sie können auch eine Live-Vorschau dieser Farben direkt in der App sehen, was eine große Bereicherung ist. In Bezug auf die Vorlieben gibt es hier nicht viel zu wählen. Es ist eine sehr einfache App, aber Sie können bestimmte globale Schlüssel für die Auswahl der Farben und was nicht definieren. Aber ich habe keine von ihnen eingerichtet, weil es keine Operation ist, die ich sehr oft mache; und das Klicken auf das Menüleistensymbol und nur das Abtasten der Farben so ist eigentlich sehr einfach. Also mache ich das normalerweise einfach. Sie können die App auf usecontrast.com bekommen, und Sie können mehr darüber lesen. Sie erklären auch, was WCAG ist, wie Sie sehen können, es sind die Web-Inhalte und Barrierefreiheitsrichtlinien. Um es herunterzuladen, gehen Sie einfach in den Mac App Store wo Sie sehen, es hat einen Preis von $6 und 99, was ich denke, es ist ein sehr fairer Preis für diese App ist, dass es so nützlich ist. Die letzte App, die ich Ihnen vier Farbmanagement zeigen möchte, heißt Sip, und es wird als eine bessere Farbauswahl für Ihren Mac genannt. Nun ist dies in vielerlei Hinsicht sehr ähnlich dem ersten Farbwähler, den ich Ihnen gezeigt habe, ColorSnapper. Aber zur gleichen Zeit ist viel komplexer. Mit Sip, können Sie im Grunde das gleiche tun, erhalten Sie unsere Farbauswahl auf dem Bildschirm, Sie können Ihr Mausrad verwenden, um dies größer oder kleiner zu machen, und Sie können jede Farbe abtasten. Jetzt, gleich neben der Fledermaus, können wir einen Unterschied sehen. Die Farben hier sind tatsächlich benannt. Siehst du da, elektrisches Lila, und wenn wir ins Blau gehen, heißt es Buntstiftsblau. Gehen wir hier hoch, tiefer Himmel, azurblau. Ich finde, das ist cool, weil es diese Namen gibt. Sie können auch den Hex-Code und eine Vorschau dieser Farbe direkt dort sehen. Wieder einmal, wenn Sie auf eine bestimmte Farbe klicken, kopiert es automatisch Ihre Zwischenablage und auch in Ihrem Farbverlauf direkt hier. Sobald die Farbe kopiert wurde, können Sie natürlich zu Ihrer Designsoftware gehen und sie dort einfügen. Sie können auch auf eine bestimmte Farbe klicken, um sie in die Zwischenablage zu kopieren. Sie können das kopieren und es kann dies auswählen und Sie können die Farbe so ändern. Es kann auch auf diese kleine Schaltfläche klicken, um diese Farbe zu bearbeiten, und wieder haben Sie Zugriff auf einen Schieberegler für den Farbton, einen für die Deckkraft. Sie haben auch diesen Picker direkt hier auf der Seite. Sie können die RGBA-Werte auch manuell eingeben. Sobald Sie fertig sind, drücken Sie das Zeichen „OK“, und die neue Farbe wird automatisch in Ihre Zwischenablage kopiert. Sie haben auch Zugriff auf Farbformate. Im Moment ist es als CSS Hex gesetzt, aber hier sind alle Formate, aus denen Sie wählen können. Nun, wenn Sie früher darauf geachtet haben, sagte ich, dass diese App, Sip, ist viel mehr als nur ein Farbwähler. Das können wir sofort sehen, weil wir Farbpaletten erstellen können. Tatsächlich verwende ich das, um Farbpaletten zu erstellen, wenn ich auf einem Mac arbeite. Erstellen einer Palette ist sehr einfach, Sie klicken Sie einfach auf dieses kleine Menü-Symbol und wählen Sie Neue Palette, und dann können Sie mit dem Sampling verschiedener Farben beginnen. Vielleicht werde ich hier eine Farbe aus meinem macOS-Dokument ausprobieren, vielleicht noch eine von hier. Dann kann ich mit diesen Farben einfach klicken und in meine Farbpalette ziehen. Es ist so einfach, und ich kann dieses Fenster natürlich etwas größer machen, damit ich alle meine Paletten sehen kann. Jetzt hat Sip auch einen Kontrastprüfer integriert. Sie können auf diese Schaltfläche klicken, zu Kontrast prüfen gehen, und Sie können zwei Farben auswählen. Es wird Ihnen den genauen Kontrast geben, sehr ähnlich wie die Kontrast-App, die ich Ihnen zuvor gezeigt habe. Wenn Sie zwei Farben wählen, die Ihnen einen Fehler geben, können Sie auch auf „Fix“ klicken, und das wird die Farben so ändern, dass sie Ihnen einen guten Kontrast geben. Ich benutze diese Funktion nicht wirklich, aber wenn du es willst, ist es da. Jetzt ist eines der Features, die ich wirklich mag über Sip ist dieses Farbdock, das Ihnen die Farbgeschichte und ein paar der Farbpaletten, die Sie erstellt haben, gibt. Dies kann auf beiden Seiten des Bildschirms verschoben werden, je nachdem, wo Sie es wollen. Es funktioniert ziemlich ähnlich wie die Menüleisten-App, außer es ist ein wenig einfacher zu sehen, aus welchen Farben Sie wählen können. Vielleicht suche ich nach einer blauen Farbe. Ich weiß sofort, dass ich es hier finden kann, oder ich finde es hier. ich auf der Suche nach einem hellrosa? Nun, ich kann es hier finden und ich kann auf diese Farbe klicken, um es in meine Zwischenablage zu kopieren, und dann kann ich es wirklich schnell in meine Design-App einfügen. Das ist Sip. Sie können es auf sipapp.io bekommen Es ist nicht kostenlos, leider kostet es rund 10 Euro pro Gerät. Es ist jedoch auch in Setapp enthalten. Setapp ist ein Abonnementdienst für Ihren Mac, mit dem Sie auf viele Apps zugreifen können. Grundsätzlich zahlen Sie eine Pauschalgebühr monatlich oder jährlich, und Sie haben kostenlos Zugriff auf eine Reihe von Apps, von denen eine Sip ist. Auf diese Weise verwende ich es in meinem Setapp-Abonnement. Dort haben Sie es, drei fantastische Apps, die Sie verwenden können, um einfacher mit Farben zu arbeiten. Jetzt sind Sie dran, das auszuwählen, von dem Sie denken, dass am hilfreichsten wäre, wenn Sie es wollen, natürlich, oder wenn Sie es brauchen. Alle Apps, die ich Ihnen in dieser Klasse zeige, sind Apps, die ich verwende. Es bedeutet nicht, dass Sie sie auch verwenden müssen. Aber ich denke, sie könnten dir helfen, und du solltest sie ausprobieren. Ein weiterer wichtiger Aspekt des Designs ist die Typografie. Als Designer durchlaufen wir Dutzende von Schriftarten, bis wir genau die richtige für unser Projekt finden. Aber wie können wir alle diese Schriftarten verwalten, die auf unserem System installiert sind? Wie können wir einfach eine Vorschau anzeigen und die richtige Typphase für unser Design auswählen? Nun, ich möchte Ihnen zwei Apps zeigen, die uns helfen werden, das sehr leicht zu machen. Das kommt in der nächsten Lektion. Wir sehen uns dort. 5. Font: Hey, willkommen zurück in der Klasse. In dieser Lektion geht es um die Schriftverwaltung. Ich zeige Ihnen die App, mit der ich alle Schriftarten verwalten kann, die auf meinem System installiert sind. Jetzt hat macOS bereits eine App dafür, sie heißt Font Book. Sie können es verwenden, um zu sehen, welche Schriftarten Sie installiert haben, sehen, wie sie aussehen und auch Sammlungen erstellen. Aber das können wir besser machen. Ich habe eine bessere Alternative gefunden, die Schriftart genannt wird. Während es der Standard-App sehr ähnlich ist, die ich Ihnen früher gezeigt habe, hat es einige zusätzliche Funktionen, die es wirklich nützlich machen. Schauen wir es uns an. So sieht die App aus. Auf der linken Seite haben wir diese Seitenleiste, die uns erlaubt, die Schriftarten zu filtern, die auf der rechten Seite angezeigt werden. Für jede Schriftart können wir eine Vorschau sehen. Übrigens, dieser Text ist völlig anpassbar. Wir können den Schriftnamen hier sehen, und auch dieser blaue Punkt lässt uns wissen, dass diese Schriftart aktiviert ist. Wenn ich aus irgendeinem Grund eine Schriftart deaktivieren möchte, kann ich einfach hier klicken und diese Schriftart deaktivieren. Derzeit handelt es sich um eine Systemschriftart, die nicht deaktiviert werden kann. Aber wenn ich selbst einige Schriftarten installiere, kann ich diese Funktion verwenden, um zu aktivieren oder zu deaktivieren. Irgendwann kann ich eine Schriftart in einem größeren Fenster öffnen, indem ich darauf klicke, und es wird mir eine größere Vorschau aller Zeichen zeigen. Ich kann auch einige Informationen über diese bestimmte Schriftart sehen. Außerdem kann ich wählen, die Größe dieser Vorschaufelder zu erhöhen oder sie so zu verringern. Von hier aus kann ich wählen, diese Seitenleiste zu verstecken, und von hier aus kann ich die Schnellsammlung ein- und ausschalten. Mit der Schnellerfassung kann ich einfach mit der rechten Maustaste auf eine Schriftart klicken und Quick Collect auswählen. Nehmen wir an, Sie arbeiten an einem Projekt, Sie durchsuchen Ihre Liste von Schriftarten, sagen Sie, dieser funktioniert wirklich gut, also werde ich es schnell sammeln. Vielleicht funktioniert das wirklich gut und ich werde das auch sammeln, und vielleicht auch das hier. Nachdem Sie all das getan haben, können Sie einfach darauf klicken und es wird Ihnen die Sammlung von Schriftarten geben. Jetzt beschränken Sie sich im Grunde nur auf die Schriftarten, die Sie ausgewählt haben. Dies wird Ihnen helfen, Ihre Entscheidung viel schneller zu treffen. Nun, auf der linken Seite, haben wir ein paar Kriterien für das Filtern dieser Schriftarten. Wenn ich nach Monospaced suche, kann ich darauf klicken und es wird mir alle Schriftarten zeigen, die diesen Kriterien entsprechen, oder vielleicht möchte ich ein paar Skripte oder Sans, Ornamental und so etwas. Sie können jederzeit auf diese kleine Schaltfläche klicken und Sie können ein neues Tag erstellen, oder Sie können Schriftarten importieren. Nehmen wir an, ich möchte ein neues Tag erstellen, das WordPress-Theme genannt wird. Nehmen wir an, ich arbeite an einem WordPress-Theme und ich möchte bestimmte Schriftarten, die gut für mein WordPress-Theme funktionieren würde auswählen . Mal sehen, vielleicht werde ich dieses zu wählen, so dass ich Tags mit der rechten Maustaste klicken und ich kann WordPress-Theme auswählen. Was sonst noch? Vielleicht dieser hier sein. Nun, wenn ich wählen WordPress-Theme, es zeigt mir, welche Schriftarten ich mit diesem Tag markiert. Dies ist sehr nützlich für die Organisation Ihrer Schriftbibliothek, da wir diese Tags verwenden können , um die Schriftarten für verschiedene Verwendungszwecke zu markieren. Nehmen wir an, Sie markieren bestimmte Schriftarten mit serif oder andere mit, sagen wir, sehr lesbar oder so ähnlich, die Kriterien oder die Tags oder die Kategorien, die Sie verwenden, ganz Ihnen überlassen, aber Sie können die -System, um Ihre Schriftarten zu kategorisieren, und das wird es Ihnen viel einfacher machen, sie später zu finden. Jetzt, mit Schriftart, mit dieser App, haben Sie auch Zugriff auf Google Fonts. Grundsätzlich, wenn Sie die Einstellungen öffnen und Sie zu.Library gehen, können Sie Google Fonts direkt hier importieren. Dies wird tatsächlich die gesamte Bibliothek von Google-Schriften herunterladen, so dass Sie nicht manuell auf die Google Fonts Website gehen und bestimmte Schriftarten von dort herunterladen müssen. Sie können es direkt von der App aus tun. Sie können auch Adobe Fonts importieren. Wenn Sie Schriftarten von Adobe in die App importieren möchten, ist dies der richtige Weg. Ein weiteres großartiges Merkmal der Schrift ist der Glyphe Vergleich. Nehmen wir an, Sie haben diese beiden Schriftarten. Sie können mit der rechten Maustaste auf eine der beiden klicken und vergleichen auswählen. Das überlappt sich tatsächlich in der anderen Schriftvorschau, und Sie können die Unterschiede zwischen den einzelnen Glyphen sehen. Sie können dies auch viel größer machen, so dass Sie sehen können, wie Avenir Heavy in diesem Fall mit Apple SD Gothic Neo Light verglichen wird. Dies ist eine sehr nützliche Funktion. Jetzt können Sie die App, Schriftart, auf typefaceapp.com. Dies ist nicht kostenlos, aber Sie können eine kostenlose Testversion erhalten. Es kostet 2.199 Euro im Mac App Store, oder wenn Sie Setapp verwenden, das ist der Abonnement-Service, von dem ich Ihnen erzählt habe, das ist enthalten, so dass Sie nicht wirklich etwas bezahlen müssen außer dem Abonnement für Setapp , was, wenn ich mich richtig erinnere, ist etwa $10 oder €10 pro Monat. Es ist wirklich nicht so groß von einer Sache. Außerdem hat die App einen dunklen Modus als auch, so dass Sie den dunklen Modus oder den Nachtmodus deaktivieren können, wie es hier genannt wird, indem Sie diese Tastenkombination verwenden oder indem Sie auf Ansicht, Nachtmodus gehen. Ziemlich cool. Wenn Sie aus irgendeinem Grund diese App nicht mögen, habe ich einen anderen Vorschlag für Sie. Es ist eine App namens RightFont, und es ist viel komplexer als Schrift, aber es ist auch viel teurer. Lassen Sie mich Ihnen schnell zeigen, worum es geht, und dann können Sie selbst entscheiden , ob eines davon für Sie nützlich sein wird. Sie können die App auf rightfontapp.com erhalten. Es ist auch eine Mac App. Preisweise kostet es $49 für eine einzelne Lizenz, aber Sie erhalten auch eine kostenlose Testversion. Die App ist in vielerlei Hinsicht ähnlich wie Schriftart. Hier haben Sie die Liste aller Schriftarten, die in Ihrem System installiert sind. Sie können die vorherige Größe ändern, Sie können den Vorschautext hier ändern. Sie können dies auch als Liste, eine Karte oder ein Raster anzeigen . Sie können auch Schriftarten nach Familie gruppieren, was ich nicht auf der anderen App gesehen habe, und Sie können auch aus vier verfügbaren Themen wählen. Wie ich schon sagte, das ist ein bisschen komplexer. Hier haben Sie Zugriff auf die Systemschriftarten in einer separaten Kategorie, und Sie haben auch Zugriff auf einige Icon-Schriftarten. Es gibt tatsächlich eine Menge von ihnen, die einige sehr beliebte Icon-Schriftarten wie Font Awesome und Ironicons, Foundation, Enypo enthalten . Sie können dies verwenden, um diese Symbole tatsächlich in einer Vorschau anzuzeigen und sie in Ihren Projekten zu verwenden. Sie haben auch Zugriff auf Google Fonts. Sie können mit Google Fonts synchronisieren, so dass Sie nicht manuell herunterladen müssen. Sie haben auch Zugriff auf die Adobe Fonts, die derzeit auf Ihrem System installiert sind. Sie können auch mit SkyFonts synchronisieren , einem anderen Dienst zum Verwalten von Schriftarten. Dies ist ein Online-Dienst. Dann können Sie verschiedene Listen erstellen, wie alle aktivierten oder deaktivierten Schriftarten und so weiter und so weiter. Aber wie ich schon sagte, das ist eine Alternative. Meine Empfehlung wäre, Schriftart zu verwenden, weil das die ist, die ich verwende. Ich denke, es ist einfach genug, aber gleichzeitig ermöglicht es mir, meine Schriften viel besser zu verwalten. Wenn eine dieser Apps Ihr Interesse weckte, dann gehen Sie vor und laden Sie die eine, die Sie fühlen, wäre am hilfreichsten oder die eine, die Ihnen am meisten gefällt. Sie sind nicht die einzigen Font-Manager da draußen. Wenn Sie eine Google-Suche durchführen, werden Sie sicher noch viel mehr finden. Das sind die, die ich dir gezeigt habe, weil es die sind , mit denen ich gearbeitet habe, vor allem Schriftart. Ich weiß es, ich weiß, dass es gut ist, und ich kann es Ihnen empfehlen. Bisher haben wir Tools für Designsoftware, Farbmanagement und Schriftverwaltung behandelt . Aber was verwenden Designer sonst noch regelmäßig? Symbole. Ich erinnere mich, als ich ein Symbol brauchte, ich ging jedes Mal online und ich würde es von dort herunterladen, oder ich würde durch eine Reihe von Ordnern auf meinem Computer sieben, um den richtigen zu finden. Glücklicherweise ist die Dinge heutzutage viel einfacher, dank bestimmter Icon-Management-Apps, die ich Ihnen zeigen möchte. Das werde ich in der nächsten Lektion tun. Ich seh dich dort. 6. Icon: Willkommen zurück in der Klasse. In dieser Lektion geht es um Icon Management und lassen Sie mich Ihnen dies sagen; eine App, die alle Ihre Symbole speichern und kategorisieren kann , ist fantastisch, erstaunlich. Bevor ich anfing, eine App zu verwenden, ging ich online, suche nach einem Symbol, lade es herunter und benutze es oder suche in meinen [unhörbaren] Ordnern auf meinem Computer, bis ich das richtige gefunden habe. Aber nicht mehr, dank einer App namens Iconset. Ich kann jetzt jedes Symbol in Sekunden finden und es in meiner Design-App ziehen. Lassen Sie mich Ihnen zeigen, wie. Dies ist die App, die ich Ihnen zeigen möchte. Auf der linken Seite sehen Sie die Icon-Sets, die verfügbar sind. Hier können Sie die Liste der Symbole aus diesem Set sehen und hier haben Sie im Grunde ein Inspektorfenster und das wird Ihnen den Namen des Symbols, einige Tags und einige Details sagen . An jedem Punkt können Sie zum Beispiel dieses Icon als Symbol oder als SVG kopieren. Sie können den SVG-Code kopieren oder Sie haben hier einige zusätzliche Optionen. Wenn Sie es einfach kopieren, können Sie es einfach einfügen, oder Sie können einfach klicken und ziehen und es wird eine Kopie dieses Symbols in Ihrer Designsoftware erstellen. Dies ist ein Vektor, so dass Sie es so groß oder klein machen können und es wird seine Qualität zu erhalten. Jetzt können Sie ganz einfach ein Icon-Set hinzufügen. Sie können, indem Sie auf diese Schaltfläche klicken und „Neues Set“ auswählen und das wird Ihnen erlauben, ihm einen Namen zu geben und nach den Symbolen zu suchen. Dies funktioniert nur bei SVG-Dateien, also müssen Sie diese Symbole zuerst auf Ihren Computer herunterladen und sie dann in Iconset importieren, und sie werden direkt hier verfügbar sein , damit Sie nicht immer online gehen und das rechte Symbol. Sie können auch nach Symbolen suchen Wenn Sie also nach einem Pfeil suchen, können Sie diesen in eingeben. Es werden alle Symbole angezeigt , die diesen Suchkriterien entsprechen. Diese Suche basiert auch auf dem, was Sie hier in der Seitenleiste ausgewählt haben. Jetzt können Sie jederzeit einen Symbolsatz mit dieser Option direkt hier exportieren. Dadurch wird es auf Ihrem Computer als Punktsatzdatei gespeichert, die Sie dann mit anderen Personen teilen können, die das Iconset eingerichtet haben und diese in ihre eigene App importieren können. Aber das Feature, das mir am meisten gefällt, ist die Tatsache, dass ich meine gesamte Icon-Bibliothek synchronisieren kann. Hier wird dies Icon Set Library genannt. Derzeit ist es lokal, weil dieser Computer nicht mein täglicher Treiber ist, also verwende ich ihn nicht für die Arbeit. Aber wenn ich würde, würde ich diese Bibliothek an einem freigegebenen Ort speichern, an einem freigegebenen Ort wie Dropbox zum Beispiel. Wenn ich dann die App auf einem anderen Computer installiere, kann ich einfach diese Bibliothek öffnen und alle meine Symbole werden zwischen Geräten synchronisiert. Sehr cool. In Bezug auf die Einstellungen haben Sie auch einen dunklen Modus, den Sie aktivieren können. Sie können wählen, ob Sie den Symbolnamen und auch ein Symbolraster ausblenden oder einblenden möchten. Nun der Grund, warum ich diese App so sehr mag, ist, dass sie kostenlos ist und es funktioniert sowohl auf macOS als auch Windows. Sie können es unter iconset.io bekommen und hier können Sie die Mac- und Windows-Versionen herunterladen, und wie ich schon sagte, es ist völlig kostenlos. In meinem Fall ist dies sehr nützlich, weil ich bei der Arbeit einen Mac-Computer habe, zu Hause habe ich einen PC Wenn ich also von zu Hause aus arbeite und Zugriff auf meine Symbolbibliothek brauche, kann ich die Windows-Version herunterladen und weil die Bibliothek synchronisiert ist, alle meine Symbole sind verfügbar und ich kann jede von ihnen zu jeder Zeit verwenden, die ich mag. Ich habe auch einige Alternativen, die ich Ihnen zeigen möchte, falls Sie Iconset nicht mögen. Aber ich muss Ihnen sagen, dass ich nicht weiß, wie gut sie sind, weil ich nicht mit ihnen gearbeitet habe, außer einer von ihnen, die ich kurz getestet habe. Aus den Bewertungen, die ich online gelesen habe scheinen sie einen tollen Job zu machen, aber Sie müssen sie selbst herunterladen und testen , um festzustellen, ob das wahr ist oder nicht. Werfen wir einen Blick auf die vier Alternativen. Das erste heißt iconJar, und Sie können es auf geticonjar.com finden. Dies ist nur für Mac und es ist nicht kostenlos. Dies ist tatsächlich ein 20 oder 30€ jährlich oder 60€ pro Lebensdauer. Wie Sie aus dieser Vorschau hier sehen können, ist es ziemlich ähnlich wie Iconset. Vielleicht hat es noch ein paar Schnickschnack hier und da, aber ich glaube nicht, dass es für mich persönlich zumindest nicht wert war, das über Iconset zu bekommen. Die andere heißt Nucleo App. Auf nucleoapp.com. Dies ist ein Icon-Organizer und eine Icon-Bibliothek mit über 30.000 Icons. Sie laden grundsätzlich die App herunter und Sie haben auch Zugriff auf die Nucleo-Bibliothek, aber Sie können auch Ihre eigenen Icons hinzufügen. Dies funktioniert auf Mac und Windows, und es hat auch eine kostenlose App. Der dritte wird das Nomen Project genannt. Sie können hier nach Symbolen suchen, und es gibt auch eine Mac-App, die Sie herunterladen können. Dazu gehören auch einige Add-Ins von Adobe für Illustrator, Photoshop und InDesign. Schließlich gibt es Iconscout, das etwas Ähnliches macht. Jetzt sind Sie an der Reihe, Ihre Symbole zu organisieren. Warum? Weil es dir das Leben leichter machen wird und dir eine Menge Zeit erspart, und das ist immer eine gute Sache. Ich empfehle Ihnen, Iconset zu verwenden, weil das das ist, das ich verwende und ich weiß, dass es gut ist, plus es ist kostenlos, es funktioniert auf beiden Plattformen, aber fühlen Sie sich frei zu verwenden, was Sie denken, funktioniert am besten für Sie. Hoffentlich werden die vier Alternativen, die ich Ihnen gezeigt habe, Sie auf den richtigen Weg bringen. Nun Frage: Was sollten Sie als Designer immer tun? Messen Sie, Sie werden selten einen Designer finden, der geht, lassen Sie uns das 23 Pixel machen. Nein, Designerson misst immer Sachen. Persönlich, wenn ich zwei Tasten mache und eine davon wie ein Pixel größer ist, es mich einfach verrückt, ich kann es nicht aushalten. Messen ist sehr wichtig, weil wir in Bezug auf Abstände und Dimensionierung konsistent sein müssen . In der nächsten Lektion möchte ich Ihnen eine App zeigen, die ich fast täglich verwende, oder zumindest wenn ich entwerfe, um alles zu messen, was ich auf dem Bildschirm möchte. Das kommt als Nächstes. 7. Messen: Hey, willkommen zurück in der Klasse. In dieser Lektion geht es um das Messen. Ich werde Ihnen eine App zeigen, die ich viel verwende, um jede Entfernung oder Dimension irgendwo auf dem Bildschirm zu messen. Sie können diese App auch verwenden, um vertikale oder horizontale Hilfslinien zu erstellen und auch Screenshots Ihrer Messungen zu machen. Die meisten Design-Software, die Sie verwenden, hat ein Messsystem integriert, aber normalerweise funktioniert es nur innerhalb dieser Designsoftware. Wenn Sie etwas von, sagen wir, einem Bild oder einer Website messen möchten , oder Sie müssten dieses Bild importieren oder einen Screenshot dieser Website in Ihre Design-Software importiert und Ihre Messungen vornehmen. Nun, was ich Ihnen zeigen werde, funktioniert jetzt auf Systemebene, was bedeutet, dass Sie überall auf dem Bildschirm messen können , unabhängig davon, welche App gerade aktiv ist. Ich mag dieses Tool wirklich, also lassen Sie mich Ihnen zeigen, was es tun kann. Die betreffende App heißt PixelsNap und Sie können sie auf getpixelsnap.com erhalten. Wie funktioniert es? Lassen Sie mich Ihnen ein kurzes Beispiel zeigen. Dieser lebt direkt hier in Ihrer Menüleiste, und Sie können eine Tastenkombination festlegen, um es zu aktivieren. Meiner ist Shift Command F. Wenn ich „Shift Command F“ drücke, bekomme ich diese coolen roten Linien auf meinem Bildschirm. Nehmen wir an, ich möchte die Abmessungen dieser Schaltfläche „Kaufen“ finden. Sie werden feststellen, dass, sobald ich mich innerhalb der Schaltfläche bewegen, die Kanten dieser Linien an den Rändern des Knopfes schnappen und direkt daneben, es gibt mir die Maße, 122 mal 52. Ich kann hier reingehen und es wird sagen, es ist 211 mal 48. Ich kann auch den Abstand zwischen diesen Tasten messen. Dann ist der, nach dem ich suche, natürlich der kleinere. Wie Sie sehen können, ist es sehr, sehr nützlich. Nun, während Sie diesen Abstand messen, können Sie H gedrückt halten, um diesen Abstand auf dem Bildschirm zu halten. Wie Sie sehen können, selbst wenn ich H loslasse, ist diese Distanz immer noch da. Ich kann sogar den Cursor nach innen bewegen und ich kann hier „H“ drücken, oder ich kann „V“ drücken, es wird mir meinen vertikalen Abstand geben, wo in diesem Fall Dimension. Wie cool ist das? Ich kann auch eine genaue Messung eines Objekts erhalten indem ich ein Rechteck um sie ziehe und das wird automatisch an den Rändern gefangen. Hier sagt er mir: „Hey, das ist 95 mal 35.“ Sie haben gesehen, dass, wenn ich auf dieser Messung schwebte, es mir ein Kamera-Symbol gibt und wenn ich es drücke, gibt mir das einen Screenshot, den ich kopieren oder als Datei speichern kann. Ich kann sogar diesen Screenshot bearbeiten, was ziemlich cool ist. Nun, während dieses Werkzeug aktiv ist, kann ich „Shift V“ oder „Shift H“ drücken, um eine Snapable Guide hinzuzufügen. Sie können sehen, dass das Blau jetzt eine Anleitung ist, und ich kann meinen Mauszeiger verwenden, um diese Anleitung zu jedem Element auf dem Bildschirm zu fangen. Nehmen wir an, ich werde einen dort schnappen und Shift V wieder, um einen anderen hier zu schnappen, und das gibt mir eine Messung hier, 122 zwischen diesen beiden Führungen. Dann habe ich von diesem bis zum Rand des Bildschirms 534 und 783 für diesen Teil hier. Ich kann auch die Umschalttaste H gedrückt halten, um eine horizontale Führung hinzuzufügen, die ich genauso einrasten kann. Jetzt kann ich jederzeit mit der rechten Maustaste klicken, um auf einige kontextbezogene Optionen zuzugreifen, damit ich die Hilfslinien hier hinzufügen kann. Ich kann die Entfernungen halten, wie ich Ihnen zuvor gezeigt habe. Ich kann auch das Screenshot-Tool öffnen, oder ich kann in den Hintergrundmodus wechseln. Der Hintergrundmodus hält diese Messungen im Grunde auf dem Bildschirm, während ich weiter arbeiten kann. Wenn ich das beenden möchte, kann ich einfach wieder „Command Shift F“ drücken und dann „Escape“ und ich bin raus. Eine weitere coole Option; wenn das Werkzeug aktiv ist, kann ich Shift gedrückt halten, und das wird mir einen Fadenkreuz-Modus geben. Ohne die Abmessungen kann ich dies einfach verwenden, um visuell auf die Ausrichtung bestimmter Optionen genau so zu überprüfen. Wenn ich dann zum Beispiel einige Messungen mache, werde ich H hier und dann ein V machen, und vielleicht werde ich diese Entfernung hier speichern. Ich kann „Befehl S“ drücken und das wird einen Screenshot machen, und es wird es in der Datei speichern. Dieser Screenshot enthält, und Sie können hier eine Vorschau sehen, es enthält meine Maße und meine Entfernungen, ziemlich genial. Ich empfehle dieses Tool sehr. Es ist super nützlich, unabhängig davon, wo Sie arbeiten. Wenn Sie Figma geöffnet haben, vielleicht tauchen Sie in ein Design ein und Sie möchten den Abstand zwischen zwei Objekten finden , ohne die Elemente einzeln auszuwählen und in dieser App zu messen, können Sie einfach das Messwerkzeug öffnen und Sie können den Abstand zwischen den Objekten sehr einfach finden, oder Sie können einfach klicken und ziehen und die Bemaßungen finden. Das kann manchmal pingelig sein, weil ich hier zum Beispiel auch einen Teil dieser Linie abgeschnitten habe, aber versuchen wir es auf diesem Logo. Siehst du, dass es einen viel besseren Job macht. Wenn Sie dies tun, müssen Sie sicherstellen, dass der Hintergrund um das Element ungefähr dieselbe Farbe hat und keine anderen Elemente um ihn herum hat. Übrigens, wenn Sie neugierig auf dieses Design sind, ist dies eine Zielseite, die ich für meine erste Skillshare Klasse entworfen habe. Wenn Sie mein Profil hier auf Skillshare öffnen, finden Sie die Klasse, die Sie durch die Gestaltung dieser gesamten Seite in Figma führen wird . Jetzt, wie ich schon sagte, können Sie die App auf getpixelsnap.com bekommen. Dies ist für Mac, und leider ist es nicht kostenlos. Es sind $39 für einen Computer. Wenn Sie bereits die CleanShot X App verwenden, die von derselben Firma gemacht wird, erhalten Sie einen Rabatt. Aber auch diese PixelsNap, diese App ist auf Setapp verfügbar. Ich habe Setapp in diesem Kurs viel erwähnt, und ich werde noch einmal erklären, was es ist. Setapp ist eine abonnementbasierte App, die Ihnen Zugriff auf eine Menge Software, viele Apps zu einem festen monatlichen oder jährlichen Preis gibt, und PixelsNap ist in Ihrem Abonnement enthalten. Das ist PixelsNap, eine fantastische App, um alles zu messen, was Sie auf Ihrem Bildschirm wollen. Es ist ein bisschen auf der teuren Seite, aber wenn Sie Setapp verwenden, dann können Sie es genauso gut installieren, weil es Ihnen beim Entwerfen oder sogar beim Schreiben von Code viel helfen wird, weil es Ihnen erlaubt, diese kritischen Messungen wirklich schnell und übersetzen sie in CSS-Code. Nun, für unser endgültiges Tool, werden wir einen Blick auf einen werfen, der Screenshots erstellt oder Screenshots erstellt. Ich denke für Webdesign, das ist auch sehr wichtig, weil es Ihnen helfen kann, besser mit potenziellen Kunden oder Ihren Teamkollegen zu kommunizieren , indem Sie tolle Screenshots machen. Oder es kann Ihnen helfen, indem es Ihnen erlaubt, schnelle Screenshots von den Dingen, die Sie mögen, zu machen. Wir werden diese App in der nächsten Lektion genauer ansehen. Ich seh dich dort. 8. Screenshots: He. Willkommen alle in der Klasse. In dieser Lektion geht es um die Bildschirmaufnahme. Ich werde Ihnen die App zeigen, die ich die ganze Zeit verwende, um Screenshots zu machen, kommentieren und sie zu teilen. Dies ersetzt tatsächlich das Standard-Bildschirmaufnahme-Tool in macOS, und obwohl es alle die gleichen Dinge tun kann, hat es einige zusätzliche Funktionen, die Sie sehr ansprechend finden könnten. Lassen Sie mich Ihnen die App namens CleanShot X zeigen. Sie können die App auf cleanshot.com finden. Es ist nur für Mac. Es ist nicht frei. Es kostet $29. Es wurde von der gleichen Firma gemacht, die PixelsNap erstellt hat, der App, die ich Ihnen in der vorherigen Lektion gezeigt habe. Natürlich erhalten Sie einen Rabatt, wenn Sie diese App haben, oder wenn Sie Setapp haben, können Sie es kostenlos herunterladen, weil es in Ihrem Abonnement enthalten ist. Aber mit CleanShot kann es im Grunde eine Tastenkombination festlegen, die aktiviert werden soll. In meinem Fall ist es Befehlstaste-Umschalt-4. Ich habe Ihnen gesagt, dass dies das Standard-Bildschirmaufnahme-Tool von macOS ersetzt. Dies gibt Ihnen ein Fadenkreuz mit den x- und y-Koordinaten Ihres Cursors auf dem Bildschirm, und Sie können einfach klicken und einen beliebigen Bereich auf dem Bildschirm ziehen und einen Screenshot machen. Dies öffnet sich direkt hier, und Sie können es in Ihre Zwischenablage kopieren. Sie können sie als Datei speichern oder das Werkzeug „Beschriften“ öffnen. Hier können Sie zum Beispiel Pfeile, Kreise hinzufügen. Sie können das Zeichnen freigeben, indem Sie das Zeichnen Werkzeug wählen. Du kannst so etwas tun. Sie können verschiedene Farben wählen. Sobald Sie fertig sind, können Sie es als Datei speichern oder Sie können „Fertig“ drücken, und das ist jetzt aktualisiert. Sie können es kopieren oder speichern, genau wie zuvor. Sie können auch auf diese kleine Schaltfläche klicken, die besagt, dass es auf dem Bildschirm anheften, und Sie können das überall bewegen. Es wird auf allen anderen Anwendungen bleiben, und Sie können sogar seine Größe ändern. Wenn Sie an etwas arbeiten, das Sie brauchen, um einen Teil des Bildschirms zu erfassen und ihn dort als Referenz für die spätere Verwendung zu haben , können Sie das sehr, sehr einfach tun. Jetzt mit CleanShot haben Sie ein paar Optionen. Sie können die App öffnen, indem Sie auf das Menüleistensymbol klicken, und es kann auch den Vollbildmodus erfassen. Sie können ein einzelnes Fenster aufzeichnen. Sie können darauf klicken, und das wird einen Screenshot Ihres gesamten Fensters erstellen. Sie können auch erfassen oder scrollende Capture durchführen. Wenn Sie den Inhalt eines Bereichs beim Scrollen erfassen möchten, können Sie dies sehr einfach tun. Sagen wir mal, ich will diesen Bereich hier erfassen. Ich kann auf „Start Capture“ klicken und dann kann ich scrollen. Ich bin da ein bisschen zu schnell gegangen. Versuchen wir es nochmal. Ich kann scrollen. Wie Sie auf der rechten Seite sehen können, erfasst es den Inhalt der Seite. Sobald ich fertig bin, drücken Sie einfach „Fertig“, und jetzt hat das die ganze Seite gespeichert, was ziemlich cool ist. Mit CleanShots können Sie auch einen Timer durchführen, und es wird die Bildschirmaufnahme nach einer bestimmten Zeit auslösen. Es kann auch den Bildschirm aufzeichnen, und Sie haben auch eine sehr praktische Möglichkeit, die Desktop-Symbole zu verstecken. Vielleicht möchten Sie Ihren gesamten Desktop erfassen, aber Sie möchten nicht, dass die Benutzer Ihre Symbole sehen Sie können auf diese Option klicken, und sie werden verschwinden. Die Funktion, die mir am meisten gefällt, ist CleanShot Cloud. Lassen Sie mich Ihnen ein Beispiel geben. Nehmen wir an, ich möchte diesen Teil hier festhalten. Ich kann auf diese Schaltfläche klicken, die zum Hochladen in CleanShot Cloud steht, und das wird hochgeladen. Es kopiert den Link in meine Zwischenablage. Jetzt kann ich diesen Link öffnen, und hier ist mein Screenshot. Dies ist eine sehr einfache Möglichkeit, einen Screenshot zu teilen. Vielleicht senden Sie jemandem eine E-Mail und anstatt diesen Screenshot an die E-Mail anzuhängen, können Sie ihm einfach einen Link senden. So können Sie bessere Screenshots in macOS machen. Wie ich schon sagte, ist dies eine Ersatz-App für das Standard-Bildschirmaufnahme-Tool in macOS, und während es ein bisschen auf der teueren Seite ist, ist es auch in Setapps enthalten. Also, wenn Sie das haben, dann könnten Sie es genauso gut nur noch, weil es ein sehr, sehr nützlich ist. Das war das letzte Werkzeug, das ich dir zeigen wollte. Also, um diese Klasse abzuschließen, bitte begleiten Sie mich in der nächsten Lektion für das Klassenprojekt und den Abschluss. Ich seh dich dort. 9. Das Kursprojekt und Schlussbemerkung: Hey, herzlichen Glückwunsch, dass du diese Klasse beendet hast. Ich hoffe wirklich, dass es Ihren Erwartungen entspricht und dass Sie etwas Nützliches gelernt haben. Wenn dies nicht der Fall ist oder Sie nicht, lassen Sie es mich bitte in den Kommentaren wissen. Lassen Sie mich wissen, wie ich mich verbessern kann, denn Ihre Meinung ist mir sehr wichtig. Wenn Sie möchten, dass ich ein bestimmtes Thema in einem der Skillshare Klassen abschließe, zögern Sie bitte nicht, mich Bescheid zu geben. Schreiben Sie einen Kommentar im Diskussionsbereich und sagen Sie mir, was Sie in zukünftigen Klassen von mir sehen möchten. Ich habe eine Menge Ideen für neue Klassen, aber was Sie lernen möchten, ist auch sehr wichtig, also lassen Sie es mich bitte wissen. Bitte nehmen Sie sich einen Moment Zeit und schreiben Sie die wichtigsten Takeaways aus dieser Klasse auf. Nun wegen des Themas dieser Klasse ist das Klassenprojekt ein wenig anders. Dafür möchte ich, dass Sie Ihr Web-Design-Toolkit beschreiben. bedeutet, was sind die Apps, die Sie für das Webdesign verwenden, und wie Sie sie verwenden. Tun Sie das in Ihren eigenen Worten, es gibt keine Vorlage zum Ausfüllen. Sie können einfach eine Liste aufschreiben oder uns eine kleine Geschichte geben , damit wir den Kontext ein wenig besser verstehen können, und ich denke, das wird als Inspiration dienen und allen anderen Leuten helfen, die diese Klasse beobachten. Denn, wer weiß, finden wir vielleicht eine App, von der wir noch nicht gehört haben, und das ist super nützlich. Lassen Sie uns wissen, wie diese Apps Ihnen helfen. Wenn Sie weitere Fragen oder Kommentare haben, posten Sie diese bitte im Diskussionsbereich, Tab, wie auch immer Sie es nennen möchten. Ich würde gerne von dir hören. Mit dem gesagt, vielen Dank, dass Sie diese Klasse beobachtet haben. Ich hoffe, Sie in der nächsten wiederzusehen. Kümmern Sie sich.