UI-Design in Photoshop – Erste Schritt mit UI-Design-Karriere

1. Was geht in diesem Kurs aus?: Hallo und herzlich willkommen zu meinem Kurs über Photoshop und UI-Design. In den letzten acht Jahren habe ich als UI-Designer gearbeitet und hatte viele Probleme. Dann dachte ich, dass ich etwas kreieren sollte, das Anfänger und Neulinge in diese UI-Design-Karriere bringen kann . Also habe ich diesen Kurs über UI-Design in Photoshop erstellt. Es wird Sie von den Grundlagen zu allen Erweiterungen, Tricks, Tipps, Verknüpfungen und alle Werkzeuge, die UI-Designer in ihrer täglichen Routine verwenden. Mal sehen, was in diesem Kurs ist. Wir beginnen unseren Kurs, indem wir Photoshop-Präferenzen für bessere Leistung und Geschwindigkeit einrichten . Insbesondere werden wir Photoshop für das UI-Design einrichten. Dann werden wir die Noten und Anleitungen beherrschen und wie man sie sofort mit wenigen Erweiterungen und Plug-Ins anlegt. Dann werden Sie Photoshop-Ebenenstile wie Schlagschatten, Pinseleffekte, Einschub und gedrückter Effekt beherrschen . Also werden wir all diese Ebenenstile tief abdecken damit Sie verstehen, wie Sie die Licht- und Schatteneffekte und all diese Dinge erstellen können. Dann gibt es einen fantastischen Abschnitt für Studentenanfragen über Dashboard-Design-Elemente. Wir werden all diese fantastisch aussehenden Liniendiagramme, dunkle Graphen, Balkendiagramme entwerfen . Wir werden auch eine wirklich genial aussehende Header-Designs oder Hero-Header-Bereiche erstellen. Dies ist wirklich wichtig, wenn Sie Ihre Website entwerfen. Dies ist der erste Eindruck bei jedem Website-Besucher. Außerdem erfahren Sie mehr über das Design der iOS-App. Wir werden einen Bildschirm der iOS 6 App zu entwerfen. Wir werden auch dieses Login-Pop-up-Formular erstellen, damit Sie wissen, wie Sie die Eingabefelder und alles entwerfen können. Dann haben wir einen großartigen Abschnitt über Wireframes, wie man Wireframes erstellt, was sind die Werkzeuge zum Erstellen von Drahtmodellen erforderlich? Ich werde Ihnen die ultimative Herausforderung geben, eine Website zu entwerfen, die auf diesem Wireframe basiert. Jetzt werde ich Ihnen in einem Augenblick zeigen, was meine Schüler bisher erstellt und entworfen haben, damit Sie wissen, was der Fortschritt dieser Kurs macht. Hier ist die Arbeit meiner Schülerin, Betty. Sie entwarf dieses Shopify-Thema und es sieht wirklich toll aus. Also hat sie das erstellt, nachdem sie meinen Kurs gesehen hatte. Sie können hier drüben sehen, sehr schönes Thema, sehr elegant, sehr edel. Dann haben wir das hier. Dies basiert auf dem Mockup, das ich meinen Schülern gegeben habe. Dies wurde von meiner Schülerin Antonella Spagnoli entworfen. Sie können hier verschiedene Abschnitte, unsere Dienstleistungen sehen. Das ist eine weitere Arbeit meiner Schüler. Dann siehst du hier drüben, das ist ein weiterer von Saqib Ameen, meinem Schüler. Sie können sehen, wie er alles wirklich schön angelegt hat. Es basiert auf dem letzten Drahtmodell, das ich ihnen für die Herausforderung gegeben habe. Sie können hier sehen, hier sind die paar Kopfzeilen, die von meinen Schülern erstellt wurden. Sie können hier auf eine Weise sehen, dass es an der Zeit ist, zusammenzuarbeiten und Ideen zu machen. Dann dieser von Darryl Haynesworth. Dann sind hier einige iOS-App-Bildschirme. Die Ideen, die ich von meinen Schülern bekommen habe, ist eine Arbeit des Schülers, Darryl Haynesworth. Dann ist das von Neil. Dies ist auch eine weitere Übung, die er getan hat. sind also all die großartigen Dinge, die meine Schüler tun. Wenn Sie als Student beitreten möchten, sind Sie mehr als willkommen. Dieser Kurs eignet sich sowohl für Anfänger als auch für Experten. Auch wenn Sie aus den letzten acht Jahren oder sechs Jahren entwerfen, werden Sie die Tipps und Tricks, die ich in diesem Kurs geteilt habe, wirklich mögen. Sie werden die Erweiterungen und beliebten Skripte lieben, die ich in diesem Kurs geteilt habe. Verpassen Sie also nicht diesen Kurs. Schauen Sie sich das Curriculum an und lassen Sie uns Sie in diesem Kurs sehen. 2. Die Einrichtung Photoshop CC2017 Voreinstellungen für UI-Design: Zunächst müssen wir unsere Photoshop-Einstellungen für eine bessere Leistung und Haftung sowie einen guten Arbeitsablauf einrichten . Wir werden Photoshop-Einstellungen einrichten, indem wir zu diesem Menü „Bearbeiten“ gehen und dann zu „Einstellungen“ und „Allgemein“ gehen. Sie können auch die Tastenkombination Control K oder Befehl K verwenden. Nun, das erste, was Sie sehen werden, ist dieses. Wir müssen hier nicht viel überspringen oder hier drüben einrichten. Wenn Sie möchten, können Sie auf diese klicken oder diese Option deaktivieren: Arbeitsbereich „Start“ anzeigen , wenn keine Dokumente geöffnet sind oder „Zuletzt verwendete Dateien“ anzeigen. Das ist es, was es diesem zeigen wird. Jedes Mal, wenn Sie Ihren Photoshop starten, werden Sie so etwas sehen. Das sind im Grunde aktuelle Dateien hier drüben. Jetzt gehen Sie zur Schnittstelle. Interface, wir werden dieses Farbthema auswählen, was auch immer Sie mögen, wenn Sie dieses mögen, dieses noch dunkler, es liegt an Ihnen. Nun, die Hauptsache, die wir hier einrichten werden , ist , dass dieser Vollbildmodus und für Zeichenflächen, wir brauchen keine Linie oder Schlagschatten. Also habe ich es einfach auf keines gesetzt, beide. Dann brauchen wir in dieser UI-Schriftgröße die große Schriftgröße hier drüben. Mach dich nicht mit anderen Dingen hier drüben an. Alles andere ist nur Standard und lassen Sie es so. In diesem Arbeitsbereich-Panel werden wir einige Dinge wie offene Dokumente als Registerkarten festlegen. Ich habe in den neuesten Versionen von Photoshop wie 2017 oder 2015 gesehen, dass diese nicht markiert ist. Wenn Sie Photoshop installieren, werden Ihre Registerkarten in verschiedenen Fenstern geöffnet. Stellen Sie sicher, dass Sie diese in den großen Registerkarten überprüfen. Diese beiden Optionen sind aktiviert. Jetzt haben wir in diesem Werkzeugfenster nicht viel zu wählen. Wenn Sie das Häkchen deaktivieren möchten, sollten Sie diesen animierten Zoom deaktivieren. Es wird nur etwas Druck auf Ihre Grafikkarte ausüben. Überspringen Sie dieses HistoryLog. Wir brauchen sie nicht. Dateihandhabung. Jetzt, in der Dateiverarbeitung, müssen wir sicherstellen, dass unsere Dateien im Hintergrund gespeichert werden und dass sie nach alle fünf Minuten gespeichert werden. Stellen Sie es also auf fünf Minuten ein. Dann in diesem maximieren PSD-und PSB-Dateikompatibilität, wählen Sie „Immer“. in den letzten Dateien sicher, Siein den letzten Dateien sicher,dass es nicht mehr als 10 Dateien oder fünf Dateien ist, denn wenn Sie diese Anzahl erhöhen, wird es mehr RAM-Nutzung und es wird Ihre Photoshop verlangsamen. Jetzt in diesen Exporteinstellungen, Export ist im Grunde, wenn Sie schnell Ihre PNG-Dateien oder Ihre Grafiken exportieren müssen, es auf PNG setzen und sicherstellen, dass Transparenz hier gesetzt ist. Ich empfehle normalerweise nicht, in sRGB zu konvertieren, also lassen Sie es. Jetzt müssen Sie bei dieser Leistung Ihre RAM-Auslastung auf fast 70 Prozent einstellen. Ich habe fast 16 GB RAM, also habe ich 9-10 GB zu diesem Photoshop eingestellt. Dann haben sie aus diesem Verlauf und Cache vor kurzem dieses Web- und UI-Design hinzugefügt. Sie müssen dieses auswählen, lassen Sie es so, wie es ist, und in diesem Bereich, Grafikprozessoreinstellungen, müssen Sie diesen verwenden Grafikprozessor verwenden. Ich empfehle wirklich, dass in den neuesten Versionen von Photoshop, sollten Sie eine gute Grafikkarte wie NVIDIA GeForce installiert haben, ich habe diese NVIDIA GeForce GT 710, und es hat zwei GB RAM. Also müssen Sie diesen überprüfen. Es wird Ihre Photoshop-Leistung viel verbessern. Jetzt auf diese Scratch Disks zu bewegen, so dass dies im Grunde, wo Photoshops seine temporären Dateien speichert. Stellen Sie sicher, dass es sich nicht um eines Ihrer Systemlaufwerke handelt. Wählen Sie ein anderes Laufwerk und deaktivieren Sie dann Ihr Systemlaufwerk, wie mein System auf Laufwerk C ist, also werde ich E oder G oder H, oder jemand anderes auswählen. nun zu diesem Einheitenbereich kommen, müssen wir festlegen, dass unsere Lineale in Pixeln sind , weil wir alles in Pixeln gestalten werden. Der Typ sollte Pixel oder Punkte sein, beide sind gut genug. Nun, in den Rastern und Hilfslinien Setup, erste Sache ist, dass Ihre Hilfslinien und Raster separat gefärbt werden sollten , wie Canvas-Hilfslinien sind in Cyan Farbe, Zeichenflächen sind hellblau. Inaktive Zeichenfläche ist auch hellblau und intelligente Führungen sind grundsätzlich grüne Farbe. Auch Ihre Scheiben sind magentafarben. nun in Richtung Raster kommen, muss Ihr Raster immer in geraden Zahlen sein, und es sollte durch gerade Zahlen teilbar sein. Also habe ich es auf 64 Pixel und vier Unterteilungen eingestellt. Es ist im Grunde, das ist meine große Schachtel eines Gitters und es wird in vier kleinere Boxen unterteilt werden. So habe ich mein Raster eingerichtet. Sie können es auf 32 Pixel oder 16 Pixel einstellen, was auch immer Sie möchten. Jetzt hier sind unsere Erweiterungen und Plug-Ins Abschnitte. Stellen Sie sicher, dass Sie diese Option Generator aktivieren, Remoteverbindung aktivieren aktiviert haben. Wählen Sie einen Service-Namen oder setzen Sie Ihr Passwort hier drüben, und lassen Sie dieses so und verwenden Sie ein Passwort hier drüben. Nun müssen Sie diese Ladeerweiterungsfelder überprüft haben und Erweiterungen zulassen, dass eine Verbindung zum Internet hergestellt werden kann. Manchmal fragen mich viele Studenten, dass meine Erweiterungen nicht geladen werden und sie nicht angezeigt werden. Sie müssen dieses ein oder zwei Mal deaktivieren und Ihren Photoshop neu starten. Ich denke, das wird funktionieren. Stellen Sie also sicher, dass der Generator aktivieren und diese beiden Optionen aktiviert sind. Jetzt, im Abschnitt Typ der Einstellungen, werden wir nach diesen beiden Einstellungen suchen. Eine davon ist die Anzahl der vorhandenen Schriftarten, die angezeigt werden sollen. Stellen Sie sicher, dass sie fünf oder sieben sind. Ich habe gerade die Zahl auf sieben erhöht, weil ich die Schriften nicht immer wieder durchsuchen möchte, die ich kürzlich verwendet habe. Dann diese Show Font Names Englisch, stellen Sie sicher, dass diese eine aktiviert ist. Aktivieren Sie die Typ-Layer-Glyphe Alternativen, stellen Sie sicher, dass diese Option aktiviert ist. Grundsätzlich müssen Sie all diese überprüfen. Dies sind alle Einstellungen und Einstellungen für Photoshop neueste Version CC 2017, und ich denke, diese werden auch für ältere Versionen funktionieren, und es gibt keinen großen Unterschied, aber ich denke, sie haben ein paar weitere Dinge in den neuesten Versionen hinzugefügt. Gehen wir also zur nächsten Lektion über. 3. Benutzerdefinierte Tastaturkürzel in Photoshop erstellen: Heute werden wir benutzerdefinierte Photoshop-Verknüpfungen einrichten. Nun, was benutzerdefinierte Verknüpfungen tun, ist, dass, wie als UI-Designer, der bestimmte Workflows und bestimmte Elemente oder Werkzeuge von Photoshop Zeit zu Zeit verwenden , und wir brauchen keine anderen. Was wir tun werden, ist, dass wir benutzerdefinierte Verknüpfungen für die Dinge, die wir schnell tun müssen, während wir für Web oder mobile Apps entwerfen. Jetzt gehen wir zu einem Edit zu gehen. Für die Einstellung dieser Einstellungen gehen wir zu Bearbeiten und dann Tastaturkurzbefehle. Hier haben wir das Tastaturkürzel Menü. Es gibt nur wenige Dinge, die wir hier aufstellen müssen. Nun, zuerst gehen wir zu diesem Edit und wir gehen nach unten zu Suchen. Dies ist eine sehr neue Funktion in Photoshop CC 2017. Standardmäßig gibt es keine Tastenkombination dafür. Was wir tun werden, ist, dass wir Control F oder Befehl F drücken und die Eingabetaste drücken. Dies wird hier eine Tastenkombination hinzufügen. Dies ist unsere erste Tastenkombination. Nun ist der zweite Schritt, dass wir einige benutzerdefinierte Tastenkombinationen in diesem Ebenenbedienfeld einrichten . Wir werden diese erweitern, und Sie müssen diese Ebene umbenennen finden. Sobald Sie dies gefunden haben, ist F1 normalerweise für Photoshop-Hilfe, aber wir verwenden normalerweise nicht die Funktion 1 Taste, also habe ich sie auf F1 als Umbenennungsebene gesetzt. Ich kann meine Ebene schnell umbenennen, indem ich einfach F1 drücke, und es führte mich, meine Ebene umbenennen. Dies ist eine Tastenkombination und die zweite ist in dem Abschnitt, in dem wir intelligente Objekte haben. Gehen Sie zu diesem Convert to Smart Object und ich habe es auf Alt F5 gesetzt. Sie können jeden verwenden, den Sie mögen, Option F5 oder was auch immer Sie möchten. Aber stellen Sie sicher, dass Sie sich daran erinnern, alles, was Sie wissen, dass sie leicht zu merken sind. Wenn Sie diese aufstellen und Sie sie vergessen, dann wird es Kopfschmerzen sein. Jetzt im Layer-Menü müssen Sie dieses finden, Ausrichten von Ebenen an Auswahl. Wir müssen zwei Verknüpfungen für diese vertikalen Zentren und horizontalen Zentren festlegen. Sie können es einrichten, was auch immer Sie möchten, aber ich habe auf Alt Control V oder Option Befehl V eingestellt, für vertikal, nur um daran zu denken, dass es vertikale Zentren sind. Dann für Alt Control H für horizontale Zentren. Dies sind einige Einstellungen, die wir in diesem Ebenenbedienfeld benötigen, Tastenkombinationen für Ebenen. Jetzt müssen wir zu diesem Fenster wechseln. Erweitern Sie dieses Fenster-Bedienfeld und wir müssen die Tastenkombination für diese Kachel alle Vertikal Alt Control F10 einstellen . Wir brauchen das wirklich sehr viel. Dies sind alle Tastenkombinationen, die wir in unserem Photoshop einrichten werden. Es gibt noch ein paar Optionen, die nützlich sein können, und ich muss sie jetzt erklären. Jetzt können Sie hier zwei Knöpfe sehen, wie Sie hier sehen können. Dies ist, um alle diese Tastenkombinationen in einem Satz zu speichern. Wenn Sie die Tastenkombinationen in einem neuen Satz speichern möchten, möchten Sie einen neuen Satz von Tastenkombinationen erstellen . Sie können einstellen, Speichern Sie es hier drüben. Wenn Sie alle Tastenkombinationen zusammenfassen möchten, wenn Sie hier klicken, wird eine HTML-Datei generiert. Wenn Sie versuchen, es hier auf dem Desktop zu speichern, so. Sie können sehen, dass es alle Tastenkombinationen HTML-Datei generieren kann. Sie können diese HTML-Datei überprüfen und lernen Sie alle Verknüpfungen, die Sie festgelegt haben. Dies ist nur eine andere Möglichkeit, diese Verknüpfungen zu lernen. Es gibt noch wenige Dinge wie Verknüpfungen für: Anwendungsmenüs. Sie können hier rüber gehen und auch die Panel-Menüs einstellen. Sie können hier sehen Farbe, Pinsel, alle Werkzeuge, die Sie brauchen, um hier zu zugreifen. Wenn Sie Tastenkombinationen für sie festlegen möchten, können Sie hier festlegen. Sie können auch die Tastenkombinationen für Extras festlegen. Also Werkzeuge sind hier drüben. Auf der linken Seite können Sie Lasso Tool, Polygon Lasso sehen , sie haben L, und dann haben wir W, W, C, C, C, C, C. Dies sind alle Tastenkombinationen, die Sie in Photoshop einrichten können. Fahren wir mit der nächsten Lektion fort. 4. Skripte in Photoshop installieren: Jetzt in dieser Lektion werde ich darüber sprechen, wie Photoshop-Funktionen erweitert werden oder wie neue Funktionen zu Photoshop hinzugefügt werden, die derzeit nicht in Photoshop vorhanden sind. Es gibt zwei Möglichkeiten, dies zu tun. Eine davon ist, dass Sie Custom Scripts installieren können , die von verschiedenen Profis und Programmierern erstellt wurden. Die zweite ist, dass wir Photoshop-Erweiterungen installieren können, die von Programmierern erstellt wurden. Sie verwenden auch die gleichen Skripte, aber sie können über Panels zugegriffen werden. In dieser Lektion werden wir Photoshop Custom Scripts mit meinem PC installieren. Wenn Sie auf einem Mac arbeiten, müssen Sie die nächste Lektion sehen, um den Pfad zu finden und wo Sie Photoshop Scripts auf einem Mac installieren möchten. Also lasst uns anfangen. Zuerst, was wir tun werden, ist, dass ich Ihnen die Website zeigen werde, ein Skript hier drüben. Das ist also ein Skript, das intelligente Objekte von diesem Kerl Kamile erweitert. Was es tut, erweitert es tatsächlich die von Photoshop erstellten Smart Objects, was in Photoshop es nicht möglich ist, wieder auf normalen Ordner oder eine Gruppe oder Ebenen zurückzusetzen , nachdem Sie Smart Objects erstellt haben. Wenn Sie nichts über Smart Objects wissen, machen Sie sich keine Mühe. In den nächsten Abschnitten über Smart Objects wird es einen Vortrag geben. Im Moment müssen Sie wissen, dass diese Funktion in Photoshop nicht vorhanden ist. Was wir tun werden, wir werden dieses Skript hier herunterladen. Skripte sind grundsätzlich im JSX JS-Format. Sie können am Ende JSX- oder JS-Format sehen. Dies sind im Grunde JavaScript-Dateien und wir werden es herunterladen. Speichern Sie die Datei. Jetzt haben wir das benutzerdefinierte Skript „Intelligente Objekte erweitern“ heruntergeladen. Wir werden es kopieren und wir werden es im Photoshop-Installationsordner installieren. Ich werde Photoshop jetzt schließen. Stellen Sie sicher, dass Sie Photoshop schließen, wenn Sie es installieren, da es nicht angezeigt wird. Sie müssen Ihren Photoshop neu starten, um den Ordner „Scripts“ zu aktualisieren. Ich werde es schließen. Ich werde mit der rechten Maustaste klicken und zu Eigenschaften und Dateispeicherort öffnen gehen. Also im Grunde, was wir tun, ist, dass wir gehen , um Photoshop Presets Ordner in Photoshop Installation. Sie können hier sehen, es gibt verschiedene Ordner, Plugins, voreingestellte Ressourcen. Wir müssen diese Voreinstellungen Ordner finden. Doppelklicken Sie und wir werden Scripts Ordner darin finden, Scripts. Hier ist es. Sie können sehen, sobald ich den Skriptordner geöffnet habe, gibt es viele Skripte, aber diese Skripte sind die Standardskripte, die zusammen mit der Photoshop-Installation kamen. Dies sind alle Skripte und automatisierte Task-Management-Skripte, die mit Photoshop ausgeliefert werden. Ich werde hier einen neuen Ordner erstellen, Meine Skripte, so etwas, und ich werde ihn hier einfügen. Jetzt werden wir unseren Photoshop neu starten, um zu sehen, wie wir dieses aktualisierte Skript hier drüben haben. Jetzt gehen Sie zu Datei und gehen Sie zu Skripten und Sie können hier sehen, haben wir neues Skript hier, KAM Expand SmartObjects. Lassen Sie es uns testen. Lassen Sie uns ein neues Dokument jeder Größe erstellen. Ich habe ein sehr kleines Dokument erstellt. Moment, nur ein Beispiel, werde ich hier ein paar Ebenen erstellen. Okay, also zweitens, lass es uns etwas kleiner machen als das hier. Ich habe zwei Schichten. Ich werde ein intelligentes Objekt aus diesen beiden erstellen. Jetzt ist dies ein intelligentes Objekt und es gibt keine Möglichkeit, dass ich meine beiden Ebenen zurückbekommen kann. Ich werde diese Ebene auswählen und ich gehe zu Datei, Skripte, und ich gehe zu KAM Expand SmartObjects mit diesem Skript. Sobald ich darauf klicke, wird es einige Aktionen ausführen und Sie können hier sehen, hier ist der Ordner und es hat mir beide meine Ebenen zurück gegeben. Dies ist also eine Möglichkeit, Photoshop-Funktionen zu erweitern , die nicht in Photoshop vorhanden sind Sie können neue Funktionen hinzufügen, neue Funktionalitäten, es gibt viele Skripte, die von Programmierern oder Photoshop-Benutzern geschrieben wurden. Es gibt noch eine Sache, die Sie mit diesen Skripten tun können, können Sie Photoshop benutzerdefinierte Tastenkombinationen dafür einstellen. Wir gehen zu Bearbeiten, Tastaturkürzel und Datei. Dann müssen wir zu Scripts gehen. Wo sind die Skripte? Wir haben die Skripte und Sie können sehen, dies ist unser Expand Smart Object. Ich werde ihm eine Taste von Control Shift E geben . So wird es mir geben, dass es bereits zugewiesene Ebene zusammenführen, so etwas wie diese, Alt Control, Alt F4, Alt Befehl Option F4 auf Ihrem Mac. Aber im Moment zeige ich Ihnen, wie Sie Tastenkombinationen einrichten. nächste Mal, wenn wir es verwenden, werden wir einfach Alt Control F4 drücken, um unser Smart Object zu erweitern. Hier geht es um Custom Scripts, wie man sie installiert und Tastaturkürzel für sie einstellt. Fahren wir mit der nächsten Lektion fort. 5. Photoshop auf MAC installieren: In dieser Lektion werde ich Ihnen zeigen, wie Sie in den Ordner Preset gehen und Skripte unter Mac OS installieren. Gehen Sie zu Go, und wir gehen zu Anwendungen, und doppelklicken Sie auf dieses Photoshop-Symbol. Sie können sehen, es gibt verschiedene Ordner wie Plug-Ins, Preset. Jetzt interessieren wir uns für diesen Presets-Ordner. Doppelklicken Sie darauf und Sie können sehen, dass Sie eine ganze Reihe von Ordnern haben. Wenn Sie nun einige Skripte installieren möchten, können Sie auf s klicken und Sie können zu den Skripten gehen. Sie können Ihre Skripte hier einfügen und so installieren wir Skripte unter Mac OS. Jetzt gibt es viele Photoshop-Voreinstellungen wie Aktionen. Wir haben verschiedene Aktionen. Sie können Aktionen hier installieren. Wenn Sie sie online finden können, dann können Sie hier verschiedene Gradienten haben, verschiedene Gradienten installieren. Dann haben wir verschiedene Gönner. Sie können hier drüben Gönner haben. In verschiedenen Lektionen habe ich verschiedene Dinge gezeigt, um zu installieren. Dies ist im Grunde, wie Sie gehen, um Photoshop Preset Ordner zu finden , um verschiedene Arten von Dingen wie Stile, Trauben , Muster und Formen, benutzerdefinierte Formen, manchmal Symbole, sie kommen mit benutzerdefinierten Formen, Photoshop csh Datei. Sie können die csh-Datei hier kopieren, und Sie können diese benutzerdefinierten Shapes in Ihrem Photoshop-Workflow verwenden . Nun, das ist das Problem, das viele Schüler hatten. Sie können hier auch Farbfelder sehen. Wenn Sie Ihre benutzerdefinierten Farbfelder haben und Sie sie gespeichert haben, wäre es hier drüben. Wenn Sie ein benutzerdefiniertes Musterfeld hierher bringen möchten, können Sie es hier kopieren und einfügen. Auf diese Weise installieren wir verschiedene Voreinstellungen in Photoshop mit Mac OS. Wenn Sie Fragen haben, lassen Sie es mich wissen. Ich werde in der Lage sein, mehr solche Videos für Mac OS-Benutzer zu erstellen. Lasst uns weitermachen und mit den nächsten Lektionen fortfahren. 6. Photoshop für for: Heute werde ich Ihnen das größte Geheimnis von Photoshop und UI-Design geben, das Photoshop-Erweiterungen ist. Jetzt viele UI-Designer, sie verlassen sich nicht wirklich voll auf die Photoshop-Funktionen, aber sie erweitern ihre Photoshop-Funktionen durch die Verwendung von Photoshop-Erweiterungen und Skripts. Heute werden wir über Photoshop-Erweiterungen sprechen. Jetzt gibt es viele Hunderte von Photoshop-Erweiterungen, aber ich werde Ihnen einige von ihnen zeigen , die wirklich beim UI-Design helfen und unseren Workflow wirklich beschleunigen und wir können ohne sie nicht leben. Es gibt nur wenige, die in kostenlosen Photoshop-Erweiterungen sehr gut sind. Dann haben wir Premium-Erweiterungen. Ich habe eine Menge gekauft wie vielleicht etwa 10 verschiedene Photoshop-Premium-Erweiterungen und ich werde Ihnen beide zeigen. Es liegt an Ihnen, ob Sie es kaufen wollen oder nicht. Lassen Sie uns zuerst einige der kostenlosen Photoshop-Austausch sehen. Die erste, die ich werde Ihnen zeigen, ist diese Photoshop-Erweiterung, die im Grunde zufällige Benutzergenerator ist, die auf dieser Website-Engine randomuser.me basiert. Denn momentan in Photoshop neueste Version, CC 2017, funktioniert es nicht. Ich habe den Autor dieses Plug-Ins gepostet, das Problem, dass es nicht funktioniert, ich weiß nicht, wann sie es aktualisieren werden. Aber das ist das Problem mit freien Erweiterungen, so dass sie im Grunde nicht zu gut verwaltet werden. Nun, seine Alternative ist diese UberFaces, und ich habe auch diese. Es sind nur $5. Es ist im Grunde Premium und es basiert auch auf Zufallsgenerator Website oder Engine, aber es hat einige mehr Fähigkeiten. Sie können darüber hier lesen, uberplugins.cc. Was es tatsächlich tut, ist, dass ich Ihnen die Macht dieser Plug-Ins und Erweiterungen in der nächsten Lektion zeigen werde. Ich werde Ihnen einige der Plug-Ins zeigen, die ich verwende und wie sie im UI-Design hilfreich sein können. Dann haben wir diese Font Awesome PS, die leicht jedes Symbol in Photoshop bringen kann. So können Sie hier sehen, müssen Sie es von hier herunterladen. Es ist für Mac und Windows verfügbar, beide. Jetzt noch ein paar mehr. Dies wird Griddify genannt. Dies ist ein weiteres Photoshop-Panel und es ist wirklich cool Erweiterung. Es kann wirklich verschiedene Führungen und Gitter schnell und sehr schnell zeichnen. Also das ist einer von ihnen, das ist auch kostenlos. Dann haben wir Ofen. Dies ist im Wesentlichen, um Photoshop-Assets in verschiedene Größen zu exportieren. Dies ist auch einer von ihnen, die ich manchmal verwende, obwohl Photoshop-neueste Version eine eigene Export-Engine hat, also brauchen wir nicht so viel, aber Sie können es sich ansehen. Dann haben wir diese Tinte, um verschiedene Spezifikationen zu generieren, wenn wir unsere Web-Design-Dateien oder unsere mobilen App-Design-Dateien an die Entwickler liefern . Sie müssen die Größen kennen, also die Höhe und die Breite, welches Element ist, welches die Größe hat oder welche Größe dieses Elements hat. Das ist also im Grunde das Plug-in. Dies wird helfen, und das ist im Grunde kostenloses Plug-in. Eine andere, die ich benutze, ist diese Markly. Es ist sehr wunderbar, wirklich einfach zu bedienen, und viele Firmen wie Microsoft, Disneyland, sie verwenden es. Ich benutze es auch, ich bin einer von ihnen. Es ist im Grunde ein Premium-Plugin und es ist $50 gerade jetzt. Diese sind also auch für die Generierung Spezifikationen für die Webentwicklung und die Übergabe an Entwickler. Dann ist das auch kostenlos, Fontea. Es verwaltet alle Google-Schriftarten und es kann viele Funktionen haben. Ich habe es noch nicht benutzt, aber ich denke, du kannst es versuchen. Es hat alle Google-Formulare in ihm und es kann leicht verwalten und Sie können verschiedene Schriftarten auf Text leicht anwenden. Dann dieses, Craft, es hat viele, man kann verschiedene Funktionalitäten sagen. Es ist ein Plugin mit vier oder fünf verschiedenen Unterabschnitten und es ist wirklich toll, aber es funktioniert nur auf Mac. Das ist also ein bisschen ein Nachteil. Es funktioniert nur für Mac. Wenn Sie Photoshop und Mac haben, dann haben Sie Glück, können Sie es verwenden. Dann haben wir eine andere, die auch für die Erstellung von Leitfäden ist. Dies ist ein Premium-Plugin. Ich liebe es wirklich, wenn Sie es für $10 kaufen können, ich denke, Sie sollten es kaufen. Dies ist eine der besten, die ich für die Verwendung von Hilfslinien und das Erstellen von Rastern gesehen habe. Dann ist dieses ColorKit und es ist im Grunde, dass Sie Farben in Photoshop verwalten , die mit verschiedenen Ebenen in Photoshop-Designelementen verknüpft sind. Wenn Sie beispielsweise die Farbe von zwei oder drei Elementen gleichzeitig ändern möchten , können Sie dies tun. So können Sie es überprüfen. Ich werde die Links zu all diesen Plugins geben, also mach dir keine Sorgen darüber. Dann bewegen wir uns auf eine andere großartige Website, die viele Premium-Plugins haben. Ich habe viel von ihnen gekauft. Also ist man CSS Hat 2, ich empfehle das wirklich. Wenn Sie ein Front-End-Entwickler sind, sind Sie ein Coder, Sie können in HTML codieren , Sie brauchen das wirklich. Dann habe ich auch diesen PNG Express. Dann habe ich bereits diesen Guide Guide und dieses perspektivische Mockup. Viele von ihnen benutze ich gerade nicht. Social Kit Pro ist auch einer von ihnen. Es kann soziale Grafiken wie Facebook-Avatare und verschiedene Größen und Social-Media-Vorlagen einfach in Photoshop mit nur wenigen Klicks erstellen. Dann ist das ColorKit, ich habe bereits diesen Fontea. Subtile Muster. Es kann viele tolle, Subtile Patterns, sehr helle Muster in Photoshop mit nur einem Klick bekommen. Das sind also viele verschiedene Plugins. Sie können alle ausprobieren, wenn Sie ein iOS-Entwickler sind oder Sie entwerfen für iOS und Apple eine Menge, Sie brauchen dieses Plugin. Dann haben wir UberFaces, UberColumn, UberFrames. Es gibt Tonnen von verschiedenen Photoshop-Plugins. Sie können sie ausprobieren und Sie können sie kaufen, wenn Sie wollen, dann gibt es eine letzte Ressource, die ich mit Ihnen teilen möchte, ist diese pspanels.com. Es hat jede Menge Plugins jeden Tag, es wird aktualisiert. Wenn Sie auf dem Laufenden bleiben möchten, können Sie sich hier per E-Mail anmelden. Es ist nicht meine Website. So zeigt es viele verschiedene Photoshop-Plugins, Panels, sogar einige von ihnen arbeiteten mit Adobe Illustrator. Nur wenige von ihnen sind frei, wie Sie hier sehen können. Also diese sind wirklich großartig, Sie können sie ausprobieren. Ich werde die Links mit all diesen Plugins und Erweiterungen in die Quellen dieser Vorlesung teilen . Also schaut sie euch an. Nun, in der nächsten Vorlesung, werde ich Ihnen die Macht all dieser Plugins in Aktion zeigen. Gehen wir also zur nächsten Lektion über. 7. Die Macht der of: Nun lassen Sie mich Ihnen einige der Superkräfte dieser Photoshop-Plugins zeigen. Nun, das ist eine Beispieldatei. Diese Vorlesung dient nur der Demonstration, dass diese Plugins auf diese Weise verwendet werden können. Also werde ich Ihnen einige der Verwendungen der Plugins zeigen, die ich habe. Ich habe dieses Panel hier erweitert. Ich habe Color Kit, FontAwesome, Tinte, PNG Express, QuickGuide, Griddify, GuideGuide, Subtle Patterns, UberFaces und Gerätevorschau. Beginnen wir mit diesem Color Kit. Was es tut, speichert es im Grunde die Farben dieser Elemente in Gruppen, so können Sie hier sehen. Wenn ich die Farbe dieses ändern möchte, und ich eine andere Farbe wähle, können Sie sehen, dass es sowohl die Tasten als auch die Ovale gleichzeitig aktualisieren wird. Sie können hier drüben sehen, das ist sehr praktisch. Ich kann das Farbschema mehrerer Elemente gleichzeitig mit sehr Geschwindigkeit aktualisieren und sogar ich kann das gesamte Farbschema der gesamten Website oder des Webdesigns oder eines ganzen Dokuments ändern . Dies ist die Macht dieses Color Kit. Es hat dieses Beispielprojekt. Sie erstellen ein Projekt und verknüpfen im Projekt verschiedene Layer damit. Wenn ich diese Ebene damit verknüpfe, können Sie sehen, dass sie die Farbe dieser Ebene ändert. Wenn ich die Farbe auf eine dunkle Farbe wie diese ändere, können Sie alle diese drei sehen, diese beiden Ovale und das hat sich geändert. Dies ist sehr praktisch, sehr mächtig, aber es ist ein Premium-Plugin. Sie können es kaufen. Dann haben wir FontAwesome. Was es tut, kann es all die verschiedenen Symbole in diese bringen. Ich kann Pfeil sagen. Sie können hier sehen, gibt es verschiedene Arten von Pfeilen. Jetzt ist es der Pfeil und es ist eine Form. Sie können es so erweitern. So können Sie es erweitern, Sie können seine Farbe so ändern. Sie können sehen, dies ist sehr mächtig, sehr einfach, und es ist sehr gut für Entwickler auch. Dann kommen wir zu dieser Tinte, Tinte und diesem Markly. Ich habe Markly hier drüben. Lass es uns öffnen. Das ist Markly. Diese beiden sind im Wesentlichen für die Entwicklung unserer Konstruktionsspezifikationen. Was bedeutet das? Wenn ich dieses Rechteck auswählen und seine Maße zeigen werde, können Sie in nur einem Moment sehen. Jetzt ist es 97 Pixel in der Höhe und 802 Pixel in der Breite. Meine Entwickler, sie müssen wissen, wie sie dieses Design-Element in HTML produzieren werden. Im Webdesign, Webentwicklung, benötigen sie genaue Größen. Das ist es, was es ihnen geben wird. Dann lassen Sie mich Ihnen zeigen, wie es die Details dieser geben wird. Ich werde dieses Symbol hier drüben klicken, Schaltfläche. Sie können sehen, es zeigt Namen, Superkraft, Deckkraft eins, und der Name der Schriftart, Museosans-300, Stil ist 300. Dies sind alle Details von CSS-Werten wie RGBA-Farben und viele Dinge, die Entwickler von Designern benötigen. Im Moment werde ich diesen Ordner hier drüben löschen. Dann lassen Sie mich Ihnen die Macht des anderen Plugins zeigen, das ist im Grunde dieses Markly und es ist ein Premium-Plugin, also werde ich das Dokument darin importieren. Jetzt wurde das Dokument in diesem Markly Plugin importiert, und Sie können hier sehen, wenn ich einfach hier drüben klicke, können Sie sehen, es zeigt mir die Größen in diesem. Lassen Sie uns das löschen. Ich werde all die Dinge hier drüben löschen. Lassen Sie uns die Informationen rund um alle diese Layer schnell löschen. Nun, warum dieses eine Premium ist und das andere nicht, weil Sie einfach auf eines davon doppelklicken können und Sie alle Dinge hier anzeigen können. Ich klicke einfach so. Es ist sehr schnell und sehr einfach. Sie können hier sehen, ich kann einfach weiter klicken und ich kann alles hier zeigen, wie es Position, x, y Position und viele andere Informationen. Es ist sehr einfach, sehr schnell. Selbst wenn Sie darauf doppelklicken, können Sie hier sehen, dass alle Schriftartinformationen angezeigt werden , indem Sie einfach auf ein beliebiges Element doppelklicken. Dies ist wirklich cool, wirklich schnelle Möglichkeit, Entwickler-Spezifikationen zu generieren. Als nächstes kommt zu diesem PNG Express, es fügt verschiedene Tags zu diesen Schaltflächen und diesen verschiedenen Elementen oder Gruppen, und wir brauchen sie, um in PNG Express zu exportieren. Im Moment haben Photoshop einen sehr guten Export als Overlay und es hat ein sehr gutes Werkzeug. Es kann in mehrere Formate unterschiedlicher Größe exportiert werden. Wir brauchen diesen PNG Express nicht viel. Dann dieser, QuickGuide und Griddify. Was QuickGuide nun tun wird, ist, dass es schnell Hilfslinien um diese Ebene generieren wird. Sie können hier drüben sehen, dies sind alle Führungen, die um dieses Quadrat mit nur einem Klick erzeugt wurden. Also, wenn ich so etwas möchte, vielleicht in der Mitte und so, kann ich einfach auf diese beiden klicken und die Guides in der Mitte generieren. Wenn ich also etwas in die Mitte legen möchte, weiß ich, dass dies die Mitte dieses Kreises ist. Es kann auch diese Ebene schnell sperren und diese Ebene ausblenden, die Hilfslinien ausblenden. Verriegeln Sie die Führungen, verstecken Sie die Führung und zeigen Sie die Führungen hier drüben. Jetzt werden wir Griddify benutzen. Griddify können wir das gesamte Dokument in verschiedene Abschnitte mit Hilfslinien und Rastern aufteilen . Es ist sehr gut, ein Gitter rund um unser Design zu entwerfen. Ich werde das auswählen. Ich habe die Auswahl getroffen, und ich werde sie in vier Abschnitte unterteilen , vertikal und auch horizontal, horizontal und vertikal. Also habe ich das hier so geteilt. Wenn ich Abstand Null setze und wickle es, können Sie hier sehen, dass es mir um diese herum gibt. Es umhüllt dies mit verschiedenen Leitfäden wie diese. Sie können hier drüben sehen, ich habe hier ein ganzes Gittersystem vorbereitet. Das ist echt cool. Dann haben wir diesen GuideGuide. Was dieser GuideGuide tun wird, ist, dass er jedes Grid-System in nur wenigen Sekunden generieren kann. Ich werde hier acht Spalten Gittersystem generieren, und es wird es in nur Sekunden so erzeugen. Sie können hier drüben sehen, das sind die Polsterungen. Sie werden mehr über die Verwendung dieses Rasters in den späteren Übungen und Lektionen erfahren. Also mach dir keine Sorgen darüber. Ich zeige Ihnen nur die Verwendung dieser Plugins und wie sie helfen und unseren Workflow beschleunigen können. Jetzt werde ich die Guides hier rüber klären. Jetzt gibt es noch einen, das heißt Subtile Patterns. Ich habe Ihnen gezeigt, wie dies mit nur einem Klick viele tolle Muster in Photoshop bringen kann. Ich werde ein subtiles Muster mit diesem Hintergrund anhängen. Also lasst uns mit diesem Subtile Patterns beginnen. Ich habe Papiere, Schriftgelehrte, Mauer, verschiedene Dinge hier drüben. Ich werde dieses überprüfen und Sie können sehen, dass es dies als Musterüberlagerung hier drüben angewendet wird. Ich kann hier drüben einen Papiereffekt mit diesem Hintergrund bekommen. Ich werde es jetzt löschen. Das ist also ein anderer Weg. Dann haben wir diese UberFaces. Das ist echt cool. Ich werde dir zeigen, wie es dich überraschen wird. Eins, 2, 3, los. Sie können sehen, dass es vier Avatare in diesen vier Finsternis mit nur einem Klick erzeugt. So hat es wie die nächsten 30 oder 40 Sekunden oder vielleicht zwei Minuten vor Ihrer Arbeit gespart. Gehen wir zurück und das ist, wie wir dieses Plugin verwenden. Sie können Frauen, Männer generieren, und Sie können einfach klicken Sie auf diese und es wird die Maske in all diesen Formen gehen. Dann diese Gerätevorschau, Ich kann es nicht jetzt zeigen, aber es ist im Grunde zu verbinden und verwalten Sie Ihre Photoshop-Design-Bereich auf Ihrer iPhone-App. Also, wie Sie tun werden, ist, dass Sie diese Remote-Verbindungen hier verwenden werden. Sie können hier in diesen Einstellungen sehen. Dieser Dienstname und dieses Kennwort und diese IP-Adresse. Dies sind die drei Dinge, die Sie verwenden werden. Ich habe gezeigt, wie man dies in meinem zweiten Kurs, Typography for UI Designers, verbindet , was etwas fortgeschritten ist. In dieser Lektion denke ich, dass ich es Ihnen nicht zeigen werde, aber Sie können es leicht bekommen. Wenn du meinen anderen Kurs belegen willst, bist du mehr als willkommen. Dies sind alle Superkräfte dieser UI Design Photoshop Erweiterungen. Ich glaube, dir hat diese Lektion wirklich gefallen. Gehen wir also zur nächsten Lektion über. 8. So installierst der to: Jetzt werde ich Ihnen die Möglichkeiten zeigen, verschiedene Photoshop-Erweiterungen zu installieren. Es gibt zwei oder drei verschiedene Arten von Photoshop-Erweiterungen und ihre Dateien, die Sie installieren müssen, sind in verschiedenen Formaten. Also werde ich Ihnen verschiedene Formate zeigen. Auch, Wenn Sie Photoshop-Version haben, die wie 2014 CC oder unter 2014 ist, dann müssen Sie Photoshop Adobe Extension Manager induzieren , die Sie von der Adobe-Website herunterladen müssen. Wenn Sie Photoshop neueste Version, CC 2017 oder CC 2015 oder 15.5 haben , müssen Sie eine Software namens ZXPInstaller verwenden. Ich werde Ihnen zeigen, durch alle Dinge und verschiedene Probleme zu gehen, die Sie während des Stylings dieser Plug-Ins oder Erweiterungen konfrontiert werden können. Lassen Sie mich Ihnen den ersten Adobe Extension Manager zeigen. So sieht es aus. Wenn Sie vorhaben, etwas zu installieren, müssen Sie Erweiterung installieren, klicken Sie hier, und Sie müssen die Datei mit der Erweiterung finden. Sie können hier drüben sehen, ZXP. Es wird nur ZXP Dateien öffnen und es wird mit Photoshop Version CC 2014 oder niedriger arbeiten. Für CC 2015 und höher benötigen Sie diese Software nicht. Sie können es sogar deinstallieren, wenn Sie es nicht benötigen. Lassen Sie mich Ihnen nun verschiedene Dateiformate zeigen, die Sie während der Installation von Photoshop-Erweiterungen sehen werden. Der erste Typ, den ich Ihnen zeigen werde, ist dieser, ZXP. Das Symbol wird wie dieses aussehen. Dies ist die Erweiterung PNG Express.zxp. Sie können hier im Ordnerpfad sehen, es ist für CC 2014. Nun, wenn Sie CC 2015 oder die neueste haben, dann werden Sie etwas näher daran sehen. Das ist ColorKit 1.5. Nun, was Sie sehen werden, ist, dass Sie etwas wie diese, installer.jsx-Datei sehen werden. Nun, was Sie tun werden, sind die meisten Plug-Ins wie ich Ihnen eine weitere zeigen werde, guideguide.ps. Also, das habe wieder installer.jsx. Normalerweise, was Sie tun, ist, ziehen Sie Ihre Installationsdatei in diese Photoshop und es wird ausgeführt und installieren Sie das Photoshop-Plug-In und Sie müssen Photoshop neu starten, und das war's. Jetzt habe ich bereits die Installation geführt. Wenn ich hier drüben klicke, können Sie sehen, dass es mir einen Fehler gegeben hat. Nun, die zweite Methode ist, dass, wenn es nicht funktioniert, dann müssen Sie zu „Datei“ gehen und zu „Scripts“ gehen und dann „Durchsuchen“, und dann müssen Sie diese Skriptdatei, Installationsdatei finden , und Sie müssen es von hier aus ausführen. Sie können hier sehen, es läuft JSX-, JS-, JSXBIN-Dateien. Was Sie tun werden, ist, dass Sie die gleiche Datei aus dem Photoshop-Menü Datei ausführen . Gehen Sie zu dieser Datei „Datei“, „Skripts“ und „Durchsuchen“ durch diese Installationsprogramm-Skriptdatei, wählen Sie die Installationsskriptdatei in diese und laden Sie sie. Es wird diese Erweiterung in Photoshop installieren. Jetzt zeige ich Ihnen die dritte Methode zur manuellen Installation von Photoshop-Erweiterungen. Manchmal, wenn Ihre Skriptdateien oder irgendetwas, sie vermasseln oder Sie Photoshop-Erweiterungen manuell installieren müssen, dann müssen Sie dies mit dieser Methode tun. Die meiste Zeit müssen Sie die Bedienungsanleitung von der Plug-in-Firma lesen , wenn sie so etwas haben. So können Sie hier für Mac OS sehen, sie sagten, dass Marklyps Ordner zu Anwendungen kopieren und Photoshop CC 2015 Plugins und Generator. Für CC 2017 haben sie den gleichen Weg hier drüben gegeben, Sie können damit sehen. Ein Ordner, den Sie zu diesem Pfad gelangen. Es gibt hier im Grunde zwei Pfade: einer, dieser, und der zweite ist dieser. Unterstützung von Bibliotheksanwendungen, Adobe, CEP und Erweiterungen. Wenn Sie diesen CEP-Ordner nicht finden, müssen Sie ihn manchmal selbst erstellen. Dies sind zwei Pfade für Mac OS. Die meisten Plugins, die Sie manuell installieren, entweder müssen Sie diese in diesen Ordner kopieren, diese oder diesen. Dies sind die beiden Teile, die Sie im Hinterkopf behalten müssen. Ich werde den Link zu diesem Installationshandbuch teilen, damit Sie sich selbst sehen können. Dann haben Sie für Windows auch diese beiden Pfade. Sie können hier sehen, Windows 32, wenn Sie 32-Bit haben, und wenn Sie 64-Bit-Windows haben, dann müssen Sie zu diesem Pfad gehen, Plug-ins und Generator. Dann gibt es einen anderen Pfad, der diese C, Program Files, X86, Common Files, Adobe, CEP und Extensions ist . Ich werde dieses Dokument freigeben, damit Sie diese beiden Pfade kennen müssen, um diese Plug-Ins und alle Erweiterungen zu installieren, die Sie in Photoshop installieren müssen. Wenn Sie Fragen haben oder Ihre Photoshop-Erweiterung nicht installiert haben, benötigen Sie meine Hilfe, Sie können mich jederzeit Fragen stellen. Wenn Sie Mac-Betriebssystem haben, gibt es zwei weitere Vorträge im Voraus, wo ich Ihnen zeigen werde , wie Sie mit ZXPInstaller installieren. Sie müssen die nächsten Vorträge für eine andere Methode sehen, die im Grunde ZXPInstaller ist. Es kann ZXP-Dateien auch in den neuesten Versionen wie 2015 und 2017 installieren , die ZXPInstaller-Dateien in der Regel nicht unterstützen. Hier geht es um die Installation von Photoshop-Erweiterungen. Fahren wir mit der nächsten Lektion fort. 9. Erweiterungen mit ZXP Installer Photoshop CC2017 installieren: Hallo an alle. Ich habe einige Studenten gesehen, die Probleme der Installation ihrer Photoshop CC 2015-Erweiterungen haben, die im Grunde ZXP-Erweiterungen sind. Also dachte ich daran, eine weitere Vorlesung zu machen, um ihnen zu helfen weil ich denke, dass andere Schüler das gleiche Problem haben könnten. Hier ist die Lösung. Nummer 1. Zunächst einmal müssen Sie diesen ZXPInstaller für Windows herunterladen oder wenn Sie auf OS X sind, laden Sie diese Version herunter. Gehen Sie zu dieser zxpinstaller.com und laden Sie dieses Installationsprogramm herunter. Das Problem ist im Grunde die neuere Version von Photoshop, die CC 2015 ist, ich habe bereits beschrieben, dass diese Version ZXP-Erweiterung nicht unterstützt. Wenn Sie ZXP-Erweiterungen in Photoshop CC 2015 installieren möchten, müssen Sie diese drei Schritte ausführen. Nummer 1, laden Sie diesen ZXPInstaller von zxpinstaller.com herunter, dann zeige ich Ihnen die Erweiterungen , die Sie mit Hilfe dieses installieren werden. Laden Sie dieses herunter und installieren Sie es dann und Sie werden so etwas haben, ZXPInstaller. Es öffnet sich dieses Fenster. Installieren Sie dieses und Sie werden dieses Fenster erhalten und Sie können einfach Ihre ZXP-Datei hierher ziehen und es wird installiert. Sie können hier klicken, um die Datei auszuwählen, unabhängig davon, ob sie sich auf dem Desktop befindet oder wo auch immer sie sich befindet. Ich gehe zu meinem Erweiterungsordner und jetzt werde ich diese Griddify Beta 3 ZXP Datei hierher ziehen und es installiert meine Erweiterung. Stellen Sie sicher, dass Sie Photoshop vor der Installation herunterfahren , da dies einige Probleme haben kann. Fahren Sie Ihren Photoshop herunter, bevor Sie eine Erweiterung installieren. Auch diese Erweiterung, die im Grunde Kurzanleitung ist, können Sie hier sehen. quickguide.zxp, ich werde es extrahieren. Es ist eine ZIP-Datei, doppelklicken Sie. Ich werde das hier auch hier rüber ziehen. Alle Ihre Erweiterungen, die mit dieser ZXP-Datei enden, müssen Sie sie mit diesem Adobe ZXPInstaller installieren. Es ist nicht im Grunde von Adobe Unternehmen, es wird mit Hilfe dieser beiden Unternehmen gemacht, Creative DO und GuideGuide. Sie haben dieses kleine Tool erstellt, um ZXP-Installation in Photoshop neueste Version, CC 2015 zu installieren . Um alle ZXP-Erweiterungen zu installieren, können Sie dieses kleine Tool verwenden und ich werde seinen Link in eine PDF-Datei einfügen. Einige Studenten, die sich auch über PDF-Dateilinks beschweren. Grundsätzlich, warum ich Links bereitstelle, weil diese Software oder diese Plug-Ins, sie immer wieder selbst aktualisieren. Wann immer Sie die aktuellste Version verwenden müssen, müssen Sie die URL aufrufen, da meine Version möglicherweise nicht aktualisiert wird. Wenn ich es auf Dropbox oder so etwas hochlade, dann haben Sie möglicherweise Probleme bei der Installation, da es sich möglicherweise nicht um die neueste Version handelt. Wenn Sie wirklich die neueste Version wie diesen ZXPInstaller installieren möchten, wurde sie aktualisiert. Lassen Sie mich Ihnen den letzten zeigen, den ich hatte. Der letzte war so etwas. Sie können sehen, dass das Symbol anders war. Jetzt haben sie es in dieser fünften Zahl aktualisiert, die letzte, die ich heruntergeladen habe, war im Juli. Auch die Größe ist anders. Es ist 45,298 KB und diese 45,464 KB. Sie haben diesen wirklich aktualisiert. Das macht Sinn. Wenn ich Ihnen den Link geben, so dass Sie die neueste Version herunterladen. Ich muss mir keine Sorgen machen, dass meine Schüler die alten Versionen einer Erweiterung oder eines Tools bekommen. Hier geht es darum, wie Sie den ZXPInstaller verwenden, um Photoshop-Erweiterungen zu installieren. Jetzt werde ich den Photoshop laufen lassen. Stellen Sie sicher, dass sich Ihr Photoshop während der Installation dieser Erweiterung nicht im Arbeitsmodus befindet Sie es herunterfahren müssen. Lassen Sie mich einfach etwas Zeit zum Laden geben. zuerst diese Erweiterung herunter und installieren Sie sie dann. Das sind nur wenige Schritte. Klicken Sie auf dieses und der Installer wird dieses kleine Tool weiter installieren. Sobald es installiert ist, dann können Sie gehen und installieren alle diese drei sehr guten Photoshop-Erweiterungen. Das hier ist Font Awesome. Grundsätzlich sind Creative DO diejenigen, die diesen ZXPInstaller erstellt haben. Es ist sehr hilfreiches Werkzeug. Laden Sie den ZXPInstaller herunter und installieren Sie diesen für tolle Photoshop-Erweiterung, Quickguide und Griddify. Ich werde ein neues Video zur Verwendung von Griddify in meinem Pro-Tipp Abschnitt aktualisieren oder erstellen, das bald verfügbar ist. Also bleib dran. Ich hoffe, Sie haben diesen Vortrag genossen und Sie werden in der Lage sein, Photoshop ZXP-Erweiterungen zu installieren, nachdem Sie dieses Video gesehen haben. Vielen Dank und wir sehen uns in der nächsten Vorlesung. 10. Photoshop auf MAC installieren: Viele meiner Schüler haben mich gefragt, wie man die Erweiterung in Photoshop installiert, während man Mac OS benutzt. Also ist dieses Video speziell auf Studentenwunsch. Ich werde Ihnen den Ordner zeigen, wie Sie diesen Ordner finden, in dem die Erweiterung installiert wird, wenn Sie sie manuell installieren möchten. Es gibt zwei Möglichkeiten, sie manuell zu installieren, oder Sie können diesen ZXPInstaller verwenden. Dies ist ein Open-Source-Installationsprogramm für die Adobe-Erweiterung. Sie müssen diese OS X-Version herunterladen. Ich habe es bereits heruntergeladen, Sie können es hier sehen. Lassen Sie uns das installieren. In der Zwischenzeit werde ich Ihnen zeigen, wo der Ordner unseres Haupt-Photoshop-Erweiterungs-Installationsordners sein wird . Lasst uns zu diesem Ordner gehen. Nun, zuerst gehen wir zu unserem Computer, dann zu unserem Hauptantrieb, das ist meine Festplatte. Gehen Sie zu diesem Hauptlaufwerk, und gehen Sie dann zu dieser Bibliothek, dann diese Anwendungsunterstützung, und dann Adobe und der Ordner ist dieser, CEP, Wenn Sie darauf doppelklicken, können Sie hier den Erweiterungsordner sehen. Wenn Sie nun versuchen, eine Erweiterung manuell zu installieren, werden Sie den Inhalt hier in diesem Ordner „Erweiterungen“ kopieren . Also gehen wir zurück und wiederholen Sie noch einmal, Library, Application Support, Adobe und CEP. Dann haben wir diese Erweiterungen. Dies ist der Pfad, in dem sich alle Erweiterungen befinden, auch wenn Sie sie automatisch installieren, werden sie immer noch hier sein. Lassen Sie uns die Griddify-Erweiterung für Mac finden und herunterladen. Sie können sehen, dass sie gezeigt haben, dass herunterladen und installieren ZXPInstaller. Wir werden diese Griddify herunterladen. Lassen Sie uns diese Griddify-Erweiterung herunterladen, hier haben wir. Dann werden wir unsere ZXPInstaller-App ausführen und wir werden diese ZXP-Datei in diese ziehen. Mal sehen, es wird es installieren. In der Zwischenzeit werden wir Photoshop-App zu schließen. Lassen Sie es uns verlassen. Beenden Sie Photoshop CC. Ich gebe mein Passwort ein. Jetzt hat mir gezeigt, dass Ihre Erweiterung erfolgreich installiert wurde. Ich weiß nicht, warum viele Benutzer und meine Schüler Probleme bei der Installation haben. Jetzt werden wir unseren Photoshop betreiben. Also werde ich es hier einfügen und wir werden diese Photoshop CC laufen. Wenn ich eine neue Datei öffne, mal sehen. Wir werden jetzt eine neue Datei öffnen, genau jede Datei. Im Moment bin ich aus dieser 3D-Karte, weil es VMware-Fenster ist. Also werde ich Ihnen zeigen, die Erweiterungen hier haben wir auf Griddify klicken, und Sie können sehen, es wird hier laden. Jetzt haben wir Griddify hier drüben, lasst es uns ausprobieren. Kontrolle A, ich werde alles auswählen. Befehl A, das ist interessant. Befehl A, und wir werden das in fünf Divisionen vertikal aufteilen. So teilen, Wir haben unsere Griddify perfekt funktioniert. Ich weiß also nicht, warum viele Schüler Probleme bei der Installation haben. Lassen Sie mich Ihnen zeigen, wo es gerade ist. Wenn Sie es nicht mit ZXPInstaller installieren können, können Sie zu dieser Datei gehen. Kopieren Sie diesen Ordner, Griddify, kopieren Sie es, und wir werden es die manuelle Methode einfügen, die ist, dass wir gehen, um zu diesem Ordner wieder, Erweiterungen und Sie können sehen, hier bereits wir Griddify, weil es einwandfrei installiert. Aber wenn Sie es irgendwie nicht installieren können und Sie sehr frustriert sind fügen Sie einfach Ihren Griddify-Ordner hier drüben und starten Sie Photoshop neu und alles wird wieder gut. Dies ist, wie wir Erweiterungen auf Photoshop installieren und so finden wir Photoshop-Erweiterungsordner auf einem Mac OS. Ich hoffe, Sie haben diese Übung gefallen, weil ich viele Mac-Benutzer Anfragen hatte , dass sie diesen Speicherort von Mac-Resets und Macs-Erweiterungsordner nicht finden können, also bleiben Sie dran und lassen Sie mich wissen, wenn Sie irgendwelche Probleme haben. 11. Richte Panels und Arbeitsbereich für die UI-Design ein.: Heute werden wir Photoshop-Panels einrichten. Wir brauchen nur die Tools, die wir während unseres UI-Entwurfsprozesses wirklich benötigen. Wir brauchen nur Ebenen, Farben und wenige Plugins. Die zusätzlichen Dinge, die wir werden sie aus unseren Photoshop-Panels und Photoshop-Schnittstelle entfernen . Lasst uns anfangen. Wir werden nur jede Datei öffnen. Umgehen Sie diesen Bereich, erstellen Sie eine beliebige Datei. Nun, wenn Sie den Photoshop zum ersten Mal ausführen, werden Sie so etwas sehen, was im Wesentlichen hier ist. Also Ihre Panels, alle Panel-Einstellungen werden hier gespeichert. Moment sind wir im Wesentlichen. Wenn Sie zu 3D wechseln, werden die Werkzeuge auf 3D-Setup verschoben und dann Grafiken und Web, wie diese, sowie Bewegung und Malerei und Fotografie usw. Nun, zuerst werden wir mit dieser Grafik und Web beginnen. Was wir tun werden, ist, dass wir hier drüben einen neuen Arbeitsbereich schaffen werden. Ich werde es neue UI nennen. Auch werden wir diese Tastenkombinationen und alles andere verwenden. Sparen. Nun, was wir tun werden, ist, dass wir unsere Farbfelder hier drüben brauchen, also werden wir das oben oben bewegen, so dass. Also Ebenen und Musterfelder. Wir brauchen keine Farben, also schließen wir sie, klicken Sie mit der rechten Maustaste und schließen Sie so. Musterfelder und hier sind das unsere wichtigsten zwei Dinge. In diesem Bereich brauchen wir ein paar Panels oder Plugins, die hier drüben geladen sind. Wir gehen zu Fenster und Erweiterungen und wir werden unsere GuideGuide Erweiterung laden. Ich werde all diese Plugins in den nächsten Lektionen zeigen, also mach dir keine Sorgen darüber. Dann werden wir diese Kurzanleitung verwenden. Was auch immer Plug-in Sie gehen, um zu verwenden, meist werden wir Leitfäden verwandte Plugins und diese Font Awesome Plugin verwenden, dies ist kostenlos ein. Diese Kurzanleitung ist auch kostenlos. Dieser GuideGuide wird für einen bezahlt. Im Moment brauchen wir nur Griddify, GuideGuide und Font Awesome. Lassen Sie uns auf diese „Griddify“ klicken. Im Moment brauchen wir all das. Dann werden wir noch ein paar Dinge wie Zeichenstile oder Charaktere wie diese laden. Wir werden es auch so in diesem Bereich bewegen. Ich werde es wieder so anbringen. Wir haben diesen Charakter hier drüben, dann brauchen wir auch Info-Panel hier drüben. Wir werden es auch an der Spitze verschieben, Info-Panel so. Dann brauchen wir auch diese Absatz- und Absatzformate, wenn Sie möchten, dann werden wir diesen Absatz damit verschieben. Vielleicht schieben Sie es in diesen. Absatz- und Zeichenformate sind zwei miteinander verbundene Registerkarten. Dann brauchen wir auch vielleicht Eigenschaftenfenster, so werden wir es immer wieder verwenden, Eigenschaftenfenster vielleicht verschieben Sie es über diese Plugins, vielleicht verschieben Sie dieses Plug-In am unteren Rand, so Eigenschaften und Info Panels. Dann könnten wir diese Stile verwenden, damit wir sie hier rüber bekommen, so wie das mit Mustern. Stile sind grundsätzlich Ebenenstile wie Schlagschatten, ihre Farbe ist, Farbverläufe usw. Wir können unsere Schaltflächenstile hier speichern und wir werden sie immer wieder auch mit den Farben verwenden. Ich werde auch diese Layer-Comps hier drüben verwenden. Ich werde Bibliotheken schließen und ich denke, dies sind die meisten Werkzeuge, die wir verwenden werden, Absatz, Absatzeinstellungen und Zeicheneinstellungen. Gibt es noch etwas, das wir hier drüben brauchen? Manchmal brauchen wir diese Aktionen, vielleicht können wir sie hier rüber laden. Verschieben Sie diese Aktionen so unter dieses Info-Bedienfeld. Auf diese Weise werden wir unsere Photoshop-Oberfläche einrichten. Im Moment haben wir Farbfelder, Stile dann Layer und eine weitere Sache, die wir hier hinzufügen werden, ist Pfade, also lasst uns nach Pfaden suchen. So und wir werden sie mit Layern kombinieren. Fast wir sind alle aufgestellt. Wir brauchen noch ein paar Dinge wie Herrscher hier drüben. Sie können hier drüben sehen. Wenn Sie zu Ansicht gehen und dann Lineale, Control R. Wir brauchen Lineale hier drüben, weil wir einige Richtlinien wie diese ziehen und ablegen werden. Das ist nur von hier und platzieren Sie unsere Elemente hier drüben. Sie können hier oben sehen, jetzt ist es an einigen Pixeln hier oben positioniert, Sie können sehen, wenn ich es schiebe, es zeigt 33 Pixel, 52, 67, so etwas. Wir könnten unsere Objekte nach diesen Richtlinien so platzieren. Wir brauchen unser Lineal-Setup. Wir müssen auch sehen, dass dieses Fangwerkzeug aktiviert ist, an Hilfslinien ausrichten, Ebenen nicht kommentieren über Slices und Raster. Außerdem gehen wir zu dieser Show und stellen sicher, dass diese Guides, Canvas Guide, Smart Guides und Pixelraster, alle diese überprüft werden. Das ist alles, was wir in unserem UI-Entwurfsprozess brauchen werden. Vielleicht brauchen wir vielleicht noch ein paar Plug-Ins, die Sie in den nächsten Lektionen finden könnten. Sie können voran gehen und sie installieren. Das war's. Wir haben unsere Panels in diesem neuen UI-Panel-Arbeitsbereich gespeichert. Wir haben jetzt Farbfelder, Stile, Ebenen, Pfade und einige Plug-Ins, Eigenschaften und Zeichenstile, und einige Absätze Dinge, die hier geladen sind. Wenn Sie irgendeine Frage stellen möchten, fragen Sie mich, wenn Sie nicht in der Lage sind, sie zu bewegen oder so etwas, vielleicht müssen Sie es üben. Sie können hier sehen, wie es sich von seinem Panel gelöst hat. Hier geht es um Panels, Einrichten von Photoshop-Panels. Im Moment verwenden wir eine und die zweite ist grundsätzlich minimiert. Wenn Sie es erweitern möchten, können Sie es hier so erweitern. Ich mag es minimiert, weil wir hier mehr Arbeitsraum haben. Wenn Sie es so erweitern möchten, können Sie es hier erweitern. Sie können alle meine Plugins sehen und alles ist hier geladen und Sie können voran gehen und auf die anderen unten so zugreifen. Aber ich mag es hier drüben so, weil ich nicht gleichzeitig auf mehrere Panels aus diesem Bereich zugreifen muss . Hier geht es um Panels, fahren wir mit der nächsten Lektion fort. 12. Was ist Farbkalibrierung?: Heute werden wir über die Farbkalibrierung sprechen. Dies ist im Grunde, um Ihren Monitor oder LCD- oder LED-Farben auf Standardfarben zu kalibrieren . Wenn Sie ein Gerät kaufen, egal ob es sich um eine LED oder einen Monitor handelt, sind die Farben nicht standardisiert. Sie können einen Farbton von roter Farbe oder grüner Farbe oder blauer Farbe zeigen. Außerdem zeigen sie möglicherweise nicht alle Weißen und Schwarzen genau. Dann gibt es diese Farbkalibrierung. Es gibt zwei Arten der Kalibrierung. Man benutzt etwas Hardware, was so ist. Dies sind nur wenige Geräte, um Ihre Farben zu kalibrieren. Dieser ist ColorMunki Display und ColorMunki Smile. Dann haben wir diese, eine andere Firma, die Spyder5Pro ist. Dies sind verschiedene Farbkalibrierungsgeräte. Was sie tun, ist, dass Sie sie so an Ihren Monitor anschließen und ihre Software installieren. Sie testen die Farben, Helligkeit, Kontrast und Gamma Ihres Bildschirms und passen ihn entsprechend an. Dies ist im Wesentlichen hardwarebasiert, hardware- und softwarebasiert. Nun, zu der einfachen Lösung kommen, haben wir diese Website, die lagom.nl/lcd-test genannt wird. Es zeigt eine Vielzahl von Farbkalibrierungs-Test. Was die Farbkalibrierung ist, werden wir unsere Weißen, Schwarzen und unsere Farbtöne auf den standardisierten Modus anpassen . Wir müssen überprüfen, ob unsere Weißen und Grautöne und Schwarzen und sogar unsere anderen Farben genau zeigen. Es gibt viele verschiedene Tests, aber normalerweise benutze ich diesen Kontrast. Sie können hier sehen, gibt es verschiedene Bänder von Farben, bis zu 32. Sie sollten in der Lage sein, alle von ihnen separat zu sehen. Jede Farbe sollte von der anderen Farbe getrennt sein. Sie sollten sich nicht vermischen. Das ist ein Test. Sie können sie in der Mitte des Bildschirms ausrichten und sie gerade sehen, nicht von oben oder unten schauen, da einige Bildschirme nicht sehr guten Betrachtungswinkel haben. Hier ist eine Beschreibung, die Sie ausstrahlen können, wenn Sie wollen, dann haben wir diese Gamma-Kalibrierung. Ich verstehe nicht viel davon, aber was Sie tun müssen, ist, dass Sie sich ein paar Schritte von Ihrem Bildschirm zurücklehnen müssen und Sie werden Ihre Augen drücken, und Sie können hier drüben diese grauen und schwarzen Balken in all diesen Farben sehen. Sie müssen mit diesen Balken überprüfen, sind im Grunde Blending. Wenn Sie Ihre Augen drücken, werden sie irgendwann verschmelzen, wie 1,8, 1.9, 2.0 oder 2.2, so etwas. Standardeinstellung ist 2.2 und 1.8, zwischen all diesen, denke ich, ist genau. Lehnen Sie sich zurück, ein paar Schritte, drücken Sie Ihre Augen und sehen Sie, wo diese Linien sich mischen. Ein weiterer Test, den ich benutzt habe, dieser hier, schwarze Niveaus. Sie sollten die Schwarzwerte überprüfen. Wie du sie überprüfen wirst, gibt es hier verschiedene Schattierungen von Schwarz, 1, 2, 3, 4. Dies ist hellschwarz, so dass es sich mit dem Hintergrund vermischt. Es gibt verschiedene schwarze bis graue. Dann gibt es diese weiße, die die schärfste Farbe hier drüben ist. Sie sollten in der Lage sein, alle von ihnen separat zu sehen. Wenn Sie die ganze schwarze Farbe hier sehen, bis zu drei oder vier, dann gibt es ein Problem mit Ihren Schwarzen. Sie müssen gehen, um die Einstellungen Ihres Kontrastes zu überprüfen. Wenn Sie hier mehr Blackboxen sehen, dann sollten Sie Ihre Helligkeitsstufe und vielleicht auch den Kontrast überprüfen . Dann kommen Sie den Test für die weiße Sättigung. Dies sind verschiedene Schattierungen von Grau- bis Weißtönen. Sie sollten in der Lage sein, alle von ihnen zu sehen. Wenn Sie sich ein paar Schritte von Ihrem Bildschirm zurücklehnen, sollten Sie in der Lage sein, alle von ihnen zu sehen. Das ist ein weiterer Test. Dann haben wir Gradienten-Banding. Sie sollten in der Lage sein, dieses Weiß bis Schwarz zu sehen, und Sie könnten einige Bänder dazwischen sehen. Ein sehr guter Farbmonitor oder sehr guter Bildschirm sollte keine Bänder dazwischen zeigen. Das sind verschiedene Linien, die zwischen dem Kommen liegen. Diese werden Bands genannt. Sie sollten glatt sein. Sie sollten keine Bands wie diese zeigen. Sie haben Beispiele für schlechten Bildschirm und guten Bildschirm gegeben. Andere, ich weiß es nicht, und ich benutze nicht viel. Dieser ist wichtig, Betrachtungswinkel. Der Bildschirm, den ich gerade verwende, unterstützt keine sehr guten Betrachtungswinkel. Dies ist eine Samsung LED 23 Zoll, so ist es wie 2-3 Jahre alt. Nun, was Sie tun werden, ist, Sie werden dieses Bild von ein wenig oben und ein wenig unten zu sehen. Dann von der linken Seite des Bildschirms und der rechten Seite, und Sie sehen, die Farben werden sich viel ändern. Selbst mit diesem lila, könnte es blau oder rötlich in ihm aussehen, wenn Sie es aus einem anderen Blickwinkel betrachten. Auch dieser, dies zeigt einige Zeit rosa und irgendwann rote Farbe. Dies ist sehr wichtig, denn wenn Sie etwas in Photoshop oder einer anderen Software entwerfen, und wenn Sie es von einer anderen Seite betrachten oder Ihr Client von links oder rechts sucht, sieht er möglicherweise nicht die richtigen Farben. In der nächsten Lektion werden wir verschiedene Arten von LED-Bildschirmen sehen, die gut für Designer sind. Außerdem werden wir unser System Kalibrierung Tool für Windows oder sogar Macs verwenden , um Ihren Bildschirm mit nur Ihren Augen und der Software zu kalibrieren, die in jedem Betriebssystem integriert ist. Also nur eine Zusammenfassung, was wir in dieser Lektion behandelt haben, dass es zwei Möglichkeiten gibt, Ihre Farben mit Ihrem Monitor zu standardisieren. Sie können das Bild hier drüben sehen, vorher und nachher. Wir benutzen unsere Augen. Eine Methode ist unsere Augen und Farbkalibrierung Werkzeug im Betriebssystem gegeben, um die Farben zu ändern. Standardisieren Sie die Farben. Die zweite Option ist, diese verschiedenen Geräte zu verwenden, wie diese ColorMunki Lösung gibt, zwei oder drei. Sie können Ihren Bildschirm automatisch kalibrieren. Ich werde dieses ColorMunki Smile sehr bald kaufen. Es ist fast $90 von Amazon, denke ich, $89 oder $90. Ich habe noch keine davon benutzt. Mal sehen, was sie tun werden. Nun, hier geht es um die Farbkalibrierung und diese Lagom-Website. In der nächsten Lektion werden wir sehen, wie das Betriebssystem Ihnen helfen wird. Integrierte Funktionen des Betriebssystems helfen Ihnen, Ihre Farbkalibrierung auf den Standardisierungsmodus einzustellen. Fahren wir mit der nächsten Lektion fort. 13. Die besten Monitore (LED) für Designer:innen: In dieser Lektion werde ich über einige der LED-Bildschirme oder Monitore sprechen , die Sie wirklich für ein UI-Design oder irgendwelche Designer benötigen. Wenn wir eine LED kaufen, normalerweise ist es TN-Panel. Es gibt also im Grunde drei Arten von Paneelen. Wenn Sie eine LED oder einen Monitor für Sie kaufen, sollten Sie nach diesen Funktionen suchen. Es gibt TN-Platten, die im Grunde alte Technologie waren, drei oder vier Jahre alt. Es steht für verdrehte Nematic. Sie sind ein bisschen preiswert. Dann gibt es IPS-Panels, In-Plane-Umschaltung. Diese Technologie zeigt und zeigt bessere Farben als die TN-Panels. Wie IPS und PLS, sollten Sie für diese gehen. PLS ist eine Technologie, die von Samsung eingeführt wurde. Also meistens, wenn Sie einen Samsung-Bildschirm wie diesen sehen, könnte es PLS geschrieben werden, es ist fast wie IPS. Also alles, was IPS oder PLS ist, sollten Sie es kaufen, anstatt TN-Panels zu kaufen. Wenn Sie gerade in Ihrer Karriere beginnen, dann sollten Sie bei TN-Panels bleiben. Aber wenn Sie sehr genaue Farben wollen, dann sollten Sie für IPS- oder PLS-Bildschirme gehen. Ein sehr wichtiger Faktor, der dieser Betrachtungswinkel ist. Sie also immer sicher, dass der Bildschirm, den Sie kaufen einen maximalen Betrachtungswinkel von 178 Grad hat. Meistens diese IPS-Bildschirme und PLS-Bildschirme bieten sie eine große Vielfalt an Betrachtungswinkel. Selbst wenn Sie von links nach rechts und oben und unten betrachten , sollten Farben und alles gleich sein. Ok. Für die Jungs, die Macs verwenden, denke ich, Mac-Bildschirme sind auf IPS-Technologie gebaut, also mach dir keine Sorgen darüber. Aber ich habe sogar Mac-Benutzer gesehen, die LG oder Dell oder andere Unternehmen Bildschirme oder sehr breite Monitore verwenden. Hier geht es also um Monitore oder IPS- und PLS-Bildschirme. Also, das heißt, lasst uns zur nächsten Lektion übergehen. 14. Operating Farbkalibrierung: In dieser Lektion werde ich darüber sprechen, wie Sie Ihr Display mit Mac OS oder Windows kalibrieren können, indem Sie Ihre eigenen Betriebssystemkalibrierungs-Tools verwenden. Beginnen Sie zunächst mit OS X oder Mac. Was ich tun werde, ist, ich jetzt keinen Mac habe, ich nehme auf Windows auf. Wie Sie Ihre Anzeige kalibrieren, werden Sie die Systemeinstellungen verwenden. Wenn Sie zu den Systemeinstellungen gehen und dann auf „Anzeigen“ klicken , sehen Sie möglicherweise die Farbe auf der rechten Seite. Klicken Sie also darauf, und Sie können dort eine Kalibrierungsschaltfläche sehen. Wenn Sie diesen Kalibrierungsprozess durchlaufen, sehen Sie möglicherweise am Ende dieses Kalibrierungswerkzeugs etwas anderes, wenn Sie Ihr Farbprofil kalibriert haben. Dann zeigt es Ihnen am Ende die alten Farbprofile. Wenn Sie zu einem alten wechseln möchten, können Sie zu allen alten wechseln, also machen Sie sich keine Sorgen. Außerdem gibt es einen Experten-Modus. Wenn Sie ein Experte sind, können Sie dies überprüfen und weitere Optionen darin sehen. Hier geht es um die Kalibrierung Ihres Displays. Lassen Sie mich sehen, ob ich ein Bild auf Google finden kann. Aber ich schätze, normalerweise ist es so etwas. Wenn Sie den Expertenmodus nicht auswählen, möglicherweise dieser Weißpunkt des Ziels angezeigt. Normalerweise wählte ich diesen Eingeborenen. So kalibrieren Sie in OS X Yosemite oder einem anderen OS X-Betriebssystem. Mit Windows, was wir tun werden, ist, dass wir in Windows-Suche hier eingeben, Farbe kalibrieren und Sie könnten sehen, diese nur kalibrieren Farbanzeige. Dies ist ein Assistent. Wenn Sie auf Weiter klicken, möglicherweise verschiedene Optionen angezeigt, um die Anzeige zu kalibrieren. Wenn Sie auf Weiter klicken, sehen Sie möglicherweise diese Gamma zu niedrig, Gamma gut, Gamma zu hoch. Was du tun wirst, ist, dass du dein Gamma so anpassen wirst , dass du keine Punkte dazwischen siehst, wie diese weißen oder schwarzen Punkte. Ich werde auf „Weiter“ klicken und gerade jetzt ist es auf fast genau das eingestellt , was ich brauche, also werde ich zum Ende überspringen. Dann haben wir Helligkeits- und Farbanpassungen. Stellen Sie sicher, dass Sie die Farben, die Helligkeit und den Kontrast in Ihrem Anzeigemenü anpassen müssen . Wenn Sie Samsung oder einen anderen Bildschirm haben, haben Sie möglicherweise verschiedene Tasten und Regler auf dem Bildschirm. Sie müssen sie verwenden, um Ihre Helligkeit und Kontrast einzustellen, da dies im Wesentlichen mit Ihrem Display und Ihrer Hardware zusammenhängt. Ich werde einfach als Nächstes überspringen. So werden Sie Ihren Kontrast setzen, dass Ihr Hemd sichtbar sein sollte, diese Falten sollten auf Ihrem Hemd sichtbar sein und auch diese beiden schwarzen und grauen Hintergrund hier drüben. Dann ist die andere Sache, dass Sie die Verunreinigungen von Ihrer gräulichen Farbe entfernen werden. Wenn Sie auf Weiter klicken, werden auf einigen Monitoren möglicherweise rote oder grüne Flecken oder vielleicht blaue Flecken angezeigt . Sie werden also Ihren Schieberegler zurückbewegen und Ihr Grün etwas zurück bewegen. Lassen Sie mich sehen, ob ich das Blau entfernen muss. Nein, Blau ist okay. Grün und Rot, es gab keine grünen und roten Farbtöne auf meinem Bildschirm, also werde ich weiter klicken. Sie können Ihre frühere Kalibrierung und neue Kalibrierung überprüfen. Dies ist die vorherige, das ist die aktuelle. Ich werde zu diesem vorherigen wechseln. Wenn Sie den ClearType-Assistenten beenden, wird möglicherweise dieser ClearType-Assistent angezeigt. Es wird Ihnen verschiedene Texte zeigen und sehen, welche Sie am besten für Sie suchen. Dieser sieht gut aus und dieser sieht gut aus. Dann sieht dieser gut aus. Das sieht besser aus. Sie beenden diesen Assistenten und Ihre Kalibrierung ist eingestellt. Nun gibt es eine weitere Möglichkeit, dieses Gamma und andere Farben zu steuern, die zu Ihrer Grafikkartensoftware gehen. Ich habe Intel. Wenn Sie zur Anzeige wechseln, ist dies möglicherweise nicht für jede Grafikkarte identisch, aber Sie können zu den Einstellungen und dem Bedienfeld wechseln. Sie können hier Helligkeit, Kontrast und Gamma sehen. Wenn ich versuche, mit diesem Gamma zu modellieren, können Sie sehen, dass sich die Farben auf meinem Bildschirm ändern und Sie können auch diese Helligkeit und Kontrast ändern. Sie können es anwenden. Auch sie sind verschiedene Beispielbilder, die sie hier gegeben werden. Wenn ich versuche, die Helligkeit so zu ändern, können Sie hier drüben sehen. Im Moment werde ich es absagen. Ich möchte die Einstellungen meines Bildschirms nicht ändern, weil es oft gedauert hat , um es näher an die genauen Farben zu machen. Weil manchmal meine Kinder, sie drücken einfach eine beliebige Taste auf meinem Samsung-Bildschirm und alle Farben sind weg. Im Grunde werde ich es absagen. Sie können hier auch verschiedene Kontrast- und Helligkeits- und Gammaeinstellungen ändern. Das ist ein anderer Weg. Ich werde es sofort absagen. Hier geht es darum, wie Sie Ihr Display mit Ihrem Betriebssystem OS X oder Windows kalibrieren . Was sie Ihnen zeigen werden, werden sie Ihnen zeigen und durch einen Zauberer gehen und halten Sie einfach die Farben, die am besten für Ihre Augen aussieht. Am Ende, wenn Sie die Einstellungen testen möchten, können Sie immer auf diese Website kommen und Ihre Einstellungen erneut testen. Sie können hier drüben sehen, jetzt kann ich diese 254 fast nicht sehen. Wenn ich etwas weiter von meinem Bildschirm gehe, sehe ich vielleicht diesen. Stellen Sie immer sicher, dass Ihre Farbkalibrierung genau durchgeführt wird. Etwas über Bildschirme, ich werde Ihnen in der nächsten Lektion zeigen, welchen Bildschirm Sie für Grafikdesign oder Webdesign oder UI-Design benötigen. Lasst uns weitermachen. 15. So funktioniert die Benutzeroberfläche von Photoshops: Lassen Sie mich die Oberfläche von Photoshop vorstellen und wie es funktioniert, wie auf verschiedene Optionen und Werkzeuge in Photoshop zugegriffen wird. Also lasst uns anfangen. Ich habe hier drüben eine Beispieldatei geöffnet. Ich habe eine Ebene und eine Textebene und eine Formebene, also zuerst, diese auf der linken Seite, haben wir diese Symbolleiste, also haben wir verschiedene Werkzeuge wie Verschiebenwerkzeug und viele Werkzeuge. Wenn Sie ein Werkzeug auswählen, können Sie die Optionen oben im Zusammenhang mit diesem Werkzeug sehen, also ist dies im Grunde Optionsleiste Wenn wir also auf eines dieser klicken, wenn wir zu einem anderen Werkzeug wechseln, können Sie diese Optionen ändern sich im Wesentlichen. Dies sind weitere Optionen im Zusammenhang mit diesem Tool. Wenn Sie die Maus halten oder den Mauszeiger über dieses Werkzeug bewegen, können Sie den Namen des Werkzeugs, das Werkzeug „Zuschneiden“, sehen. Auch können Sie es hier so erweitern und es so umleiten. Es ist dir nach eigenen Wünschen. Sie können diese Symbolleiste von hier aus anpassen. Halten Sie Ihre Maus auf diese und Sie können es hier über bearbeiten und Sie können es so ziehen. Auf diese Weise können Sie die gesamte Symbolleiste ändern. Dies ist Ihre aktuelle Symbolleiste, dies ist im Grunde zusätzliche Symbolleiste, wenn Sie etwas entfernen möchten, können Sie hier entfernen. Sie können auch Voreinstellungen verschiedener Werkzeugleisten speichern und laden. Also für weitere Optionen, können Sie hier sehen, gibt es detaillierte Navigationen hier drüben, Menüs. Sie können sehen, diese sind bildbezogen, Bildmanipulation dann Layer, Geben Sie Werkzeuge im Zusammenhang mit der Auswahl, gibt es verschiedene Filter. Dann haben wir 3D, wir werden es nicht verwenden, aber das ist nur zur Information. Dann haben wir Ansicht und verschiedene Einstellungen wie unsere Gitter, Hilfslinien, Lineale. Sie sind alle in dieser Ansicht Panel, dann haben wir Fenster oder Panels, Erweiterungen, alles in diesem Fenster hier drüben. Stellen Sie also sicher, dass Sie sie nur einmal sehen. Versuchen Sie nicht, sie zu erinnern, Sie wissen, dass diese Dinge hier sind wie diese Erweiterungen Arbeitsbereich hier drüben. Dies ist unsere detaillierte Navigation. Dies ist unsere Optionsleiste für diese Werkzeuge, also wählen wir ein beliebiges Werkzeug aus und die Optionen kommen hierher. Dann müssen Sie für weitere Optionen manchmal zu dieser Symbolleiste hier gehen. Dies ist im Grunde Panel, also Panel-Leiste. Wenn ich eines davon wähle, lassen Sie mich jetzt eine Form zeichnen, um Ihnen zu zeigen, wie es funktioniert. Wenn ich also eine Form hierher ziehe, können Sie sehen, dass dieses Live-Shape-Eigenschaftenfenster geöffnet wurde. Es hat viele Optionen, die damit zusammenhängen. Es gibt hier oben Optionen, aber es gibt auch hier drüben Optionen. Sie können auch Breite, Höhe, x- und y-Koordinaten und Position dieses Objekts gemäß diesem Dokument sehen. Jedenfalls gibt es nur wenige Werkzeuge. Sie füllen Pop-Panels, auf die Sie hier zugreifen können , bezogen auf jedes Objekt oder jede Grafik, die Sie hier entwerfen. Wenn ich versuche, dieses zu wählen, können Sie hier sehen, Ich habe eine Textebene ausgewählt und ich kann zu dieser Leiste gehen und ich kann Zeichen, Absatz und einige andere Dinge hier drüben auswählen . Wenn Sie das hier nicht geladen sehen, müssen Sie es von hier aus laden, Fenster, und Sie können es von hier wie Layer, Layer-Comps laden. Absatzvorlagen, Absatzvorlagen. So laden Sie diese Panels, aber sie werden aktiviert, sobald Sie diesen Layer- oder Objekttyp ausgewählt haben. Grundsätzlich nennen wir sie hier drüben Schichten, also ist dies Schicht eins, Schicht zwei, Schicht drei. So wenige Optionen, Sie können sie von hier zu greifen dann die dritte Möglichkeit ist, dass Sie mit der rechten Maustaste auf einen dieser Layer und Sie können mehr Optionen und mehr Operationen zugreifen , die Sie auf diesen Ebenen tun können. So greifen Sie auf verschiedene Bereiche von Photoshop zu. Es gibt eine neue Funktion, die soeben hinzugefügt wurde, nämlich die Suchsymbolleiste. Sie können hier sehen, wenn ich zu Suchen gehe und versuche, etwas wie Beschneiden zu suchen, können Sie sehen, es zeigt mir Beschneidwerkzeug und andere Dinge im Zusammenhang mit Zuschneiden wie Trimmen, Reveal all. Wenn ich diese Option auswähle, wird mein Zuschneidewerkzeug ausgewählt. Dies ist sehr praktisch, ich habe die Tastenkombination dafür eingestellt, Befehl F oder Control F. Standardmäßig ist diese Tastenkombination nicht da drüben, also wenn Sie es versuchen möchten, müssen Sie die Tastenkombination zuweisen von hier aus und das ist alles über diese Photoshop-Schnittstelle und wie es funktioniert, wo Sie auf verschiedene Optionen und Werkzeuge und Dinge zugreifen und mehr Optionen im Zusammenhang mit jeder Ebene oder Text, die Sie zeichnen oder entwerfen. Gehen wir also zur nächsten Lektion über. 16. Neues Dokument fotografieren: In dieser Lektion werde ich über das neue Document Setup von Photoshop sprechen und wie wir verschiedene Voreinstellungen für mobile Apps und Webdesign verwenden werden. Also lasst uns anfangen. Gehen Sie zu „Datei und Neu“, und Sie werden dieses Fenster Neues Dokument sehen und Sie können sehen, dies in dieser neuesten Version von Photoshop CC 2017 viel geändert wurde. Sie können sehen, die Details jeder Voreinstellung befindet sich auf der rechten Seite und die Voreinstellungen, die Sie hier auswählen. Also, wenn ich dieses wähle, können Sie sehen, es ist 1440 Pixel breit und 880 ist seine Höhe. Sie können den Zoll oder alles ändern. Aber für Webdesign und mobile App-Design, werden wir Pixel verwenden. Jetzt können Sie sehen, dass es eine Auflösung gibt. Für die digitale Auflösung für mobile Apps und Webdesign gehen wir meistens für 72 Pixel pro Zoll. Farbmodus wird RGB, acht Bit weißer Hintergrund und in den erweiterten Optionen können Sie hier sehen, Farbprofil, setzen Sie es auf Nicht Farbe verwalten und quadratische Pixel. Dies werden Ihre Dokumenteinstellungen für fast jedes Dokument sein. Nun, wenn Sie oben sehen, können Sie sehen, gibt es verschiedene neue Dokumentoptionen wie gespeichert, was mir einige meiner gespeicherten Voreinstellungen zeigen wird, die ich gespeichert habe. Dann wird es zu dieser Fotografie wechseln. Wenn Sie ein Fotograf sind, können Sie diese verwenden. Diese sind alle in Zoll und 300 PPI, die für Druck und Fotografie ist. Dann gibt es auch Fußabdruck. Auch hier können Sie diese anderen Einstellungen sehen. Wenn Sie darauf klicken, wird es in Millimetern sein. Dies sind Druckdokumente, Kunst und Illustration sowie Web und Mobile. Wenn Sie möchten, können Sie hier sehen, Sie können auf mehr Presets zugreifen, indem Sie hier auf dieses Pluszeichen klicken. Sie können hier sehen, iPhone 6 Plus, iPad Pro, Microsoft Surface Pro 3, iPhone 5. Es gibt viele verschiedene Vorlagen. Sie können sehen, dass sich unten ein neues Feature befindet. Sie können sehen, dass es sich um kostenlose Vorlagen von Adobe Stock handelt. Wenn Sie darauf klicken möchten, können Sie sehen, dass es Ihnen einige der Größe zeigt, 32 MB und es wird es von Adobe Stock herunterladen. Stellen Sie sicher, dass Sie mit dem Internet verbunden sind und sich für dieses Konto Ihrer Photoshop angemeldet haben . So verwenden Sie verschiedene Vorlagen. Diese sind für Film und Video. Die meiste Zeit für Web, Ich benutze nicht diese Vorlagen Größen oder Web-Medium, Web-Minimum, Web groß. Normalerweise benutze ich dieses, was ich hier gespeichert habe, das 1280 Pixel breit Bootstrap ist. Wie können Sie nun eine Voreinstellung speichern? Sie können jede Voreinstellung hier wie Neu speichern benennen. Stellen Sie sicher, dass Sie die Höhe so ändern, als ob ich die Breite für 1200 und die Höhe auf vielleicht 2000 Pixel ändern werde. Die Orientierung wird so sein. Ich will kein Porträt. Es wird immer im Hochformat sein, wenn Sie Kunsttafeln auswählen möchten, es ist eine neue Funktion in den neuesten Versionen von Photoshop. Sie können es hier nachsehen. Andere Optionen, die Sie brauchen, um das gleiche zu zeigen, die ich hier verwende, müssen Sie sie verwenden. Sie können diese Option hier auswählen und die Voreinstellung speichern. Sobald es gespeichert ist, wird es nach dem Namen fragen. Ich werde es 1200 Pixel breit nennen. Lassen Sie uns diese Voreinstellung speichern und Sie können hier sehen, dass es diese Voreinstellung gespeichert hat. Dies sind meine heruntergeladenen Vorlagen. Dies sind meine gespeicherten Voreinstellungen. Wenn ich also versuche, es zu erstellen, können Sie sehen, dass es mir ein neues Dokument mit einer Art Board-Option geben wird, die Sie hier sehen können. Was sind Kunstbretter? Wir werden in der nächsten Lektion mehr über sie erfahren. Fahren wir mit der nächsten Lektion fort. 17. Was sind Zeichenflächen?: Nun, in dieser Lektion, werden wir über Photoshop-Zeichenflächen sprechen. Also lasst uns anfangen. Wir werden eine neue Datei öffnen und sicherstellen, dass Sie in diesen Optionen diese Zeichenfläche überprüfen müssen, wenn Sie möchten. Ohne Zeichenflächen können Sie ohne sie gehen. Also überprüfe Zeichenfläche und ich werde jetzt erstellen. So können Sie sehen, dass dies tatsächlich 1.200 Pixel breit und 2.000 Pixel der Höhe ist, und das ist im Grunde meine Zeichenfläche 1. Ich werde es umbenennen, indem ich auf dieses Ebenenfenster doppelklicke. Sie können sehen, dass ich es in WebDesign umbenennen werde. Das ist WebDesign. Dann können wir eine weitere Zeichenfläche hinzufügen. Sie können hier sehen, gibt es eine Zeichenfläche Werkzeug, wenn Sie hier klicken, und Sie können sehen, dass wir Zeichenfläche Werkzeug V haben, und Sie können sehen, dass es verschiedene Optionen hier gibt, wie Sie die ausgewählte Zeichenfläche ändern können jede Zeichenflächengröße, die Sie mögen. Also, wenn ich zu sechs wechseln möchte, können Sie sehen, dass es auf sechs gehen kann oder es kann auf 1.200 Pixel Breite zurück gehen. Außerdem können Sie eine neue Zeichenfläche erstellen. Durch Klicken hier, so kann ich eine neue Zeichenfläche erstellen, und ich kann eines davon auswählen, und ziehen Sie es einfach hier. Klicken Sie hier einmal, und Sie können sehen, es hat eine neue Zeichenfläche erstellt, die iPhone 5 Vorlage ist. So ist es im Grunde iPhone 5 Dimensionen. Wenn Sie nun weitere Zeichenflächen erstellen möchten, können Sie weitere Zeichenflächen erstellen. Es ist sehr hilfreich, wie Sie eine Website oder vielleicht eine mobile App entwerfen, und es hat 10 Bildschirme oder 12 Bildschirme. Sie können weitere Bildschirme hinzufügen, indem Sie hier auf diese Schaltfläche klicken, und Sie können mehrere Bildschirme und Webansicht alles auf einem Canvas haben. So verwenden Sie Zeichenflächen. Nun, es gibt noch wenige Optionen. Sie können hier drüben sehen, Sie können sie ausrichten. Sie können verschiedene Zeichenflächen auswählen und sie bei Bedarf ausrichten. Vielleicht können Sie ihre oberen Kanten ausrichten, wenn Sie sie irrtümlich bewegt haben. Um sie zu verschieben, müssen Sie zu diesem Verschiebenwerkzeug gehen, und Sie müssen diese automatische Auswahl deaktivieren, wenn Sie es ausgewählt haben, und Sie können jede der ausgewählten Zeichenfläche verschieben, wie ich diese ausgewählt habe. Ich kann mich so bewegen, und wenn ich es unten bewegen will, kann ich es näher bewegen, so. So bewegen Sie sich also auf Ihren Zeichenflächen. Dann können Sie sie auch löschen. Sie können mit der rechten Maustaste klicken und Zeichenfläche löschen. Sie können sie hier duplizieren, wenn Sie ein Design erstellt haben und Sie die gesamte Zeichenfläche mit allen Ebenen duplizieren müssen . Also jede Zeichenfläche, die Sie hier sehen können, ist es im Grunde eine Gruppe und es kann eine Menge von Ebenen, Textebenen, Ihr gesamtes Design darüber sitzen. So verwenden Sie also verschiedene Zeichenflächen und so löschen Sie sie. Ich habe die Entf-Taste auf meiner Tastatur gedrückt, um jede ausgewählte Zeichenfläche zu löschen. Jede Zeichenfläche, können Sie es hier auswählen. Stellen Sie sicher, dass Zeichenflächenwerkzeug ausgewählt und hervorgehoben ist. So können Sie sehen, es gibt einige weitere Optionen wie Auto-Nest-Layer, Auto-Größe Canvas. In früheren Versionen gab es nur wenige Probleme, bei denen Canvas-Größe und die Zeichenflächengröße nicht übereinstimmten. Also haben sie das erschaffen. Nun, wenn Sie Ihren mobilen Bildschirm drehen möchten, wie Sie Landschaftsmodus benötigen, können Sie jede Zeichenfläche wie iPhone auswählen, die letzte, die ich ausgewählt habe, und Sie können es so drehen. So drehen Sie die Ansicht Ihres Mobiltelefons. Das ist also Porträt, das ist Querformat. Lassen Sie mich nun die Magie dieser Zeichenflächen demonstrieren. Wenn ich zum Beispiel einen Knopf hier drüben habe , so ist dies ein alles eingebaut und ich möchte es auf andere kopieren, also werde ich nur Alt und ziehen Sie hier. Sie können auf der rechten Seite sehen, es wird auf eine andere Zeichenfläche kopiert. Das Gleiche ist die Sache, die ich hier tun kann. Diese Ebene oder diese Schaltfläche wurde also auf alle diese anderen Zeichenflächen kopiert. die gleiche Weise können Sie Gruppen kopieren oder Ihr Design hierher oder darüber ziehen. Jetzt können Sie sehen, ob Sie eine alte Version Ihrer Canvas-Größe haben, dann können Sie sehen, ob Sie zu dieser Canvas-Größe gehen, es wird Ihnen zeigen, dass Leinwand des gesamten Bereichs, den Sie abdecken, die im Grunde 3.408 Pixel ist. Also, wenn ich versuche, hier drüben eine Auswahl zu treffen, denke ich, es wird 3.176 sein. Es wird also ungefähr gleich der Größe der gesamten Leinwand sein. Nun ist die Canvas-Berechnung anders. Wenn Sie also alles auf Canvas berechnen, sollten Sie keine Ausgaben verwenden, und wenn Sie löschen möchten, können Sie einfach die Zeichenfläche hier löschen. Also werde ich nur Zeichenfläche löschen, und Sie werden mit dem Inhalt hier drüben verlassen. So können Sie so etwas gehen, wenn Sie nur den Canvas verwenden möchten. Ich werde alle Zeichenflächen löschen und Sie können sehen, dass wir unsere Leinwand zurück haben. Das ist also unsere Hauptleinwand. Also, wenn ich versuche, es jetzt zu ändern, kann ich es in der Größe ändern. Das ist also eines der Probleme, eine der Ängste meiner Schüler, also werde ich das klären. Wenn Sie keine Zeichenflächen verwenden möchten, wenn Sie versuchen, eine neue Datei zu erstellen, wählen Sie diese nicht aus, aktivieren Sie dieses Kontrollkästchen nicht. Also dann wirst du dieses alte Dokument einrichten, was heißt, ich vermisse das wirklich und ich liebe es wirklich. Das ist also alles über Zeichenflächen und wie Sie mehrere Zeichenflächen verwenden, um Ihre mobilen Apps oder Webdesign oder verschiedene Ansichten oder verschiedene Versionen Ihres Designs zu erstellen . Fahren wir mit der nächsten Lektion fort. 18. Wie Ebenen in Photoshop funktioniert: In dieser Lektion werde ich über Ebenen und im Grunde das Konzept der Ebenen und ein wenig über dieses Ebenenfenster sprechen. Lassen Sie mich zuerst ein paar Schichten aufstellen. Ich werde dieses Formwerkzeug greifen, und ich werde hier etwas Finsternis ziehen. Q 1, 2, 3 und 4. Jetzt habe ich vier Sonnenfinsternisse. Lassen Sie mich ihre Farben ändern, damit Sie verstehen, welche ihre Farben verändert oder verändert. Jetzt habe ich vier Sonnenfinsternisse. Nun, wie Sie sehen können, dass im Ebenenbedienfeld die schwarze am meisten unten ist. In dieser Darstellung ist es auch unten. Sie sind im Grunde in einer Stapelreihenfolge. Unten, dann dieser graue oben und dann blau, und dieser orangefarbene ist oben. Grundsätzlich verwenden wir diese Stapelreihenfolge, um verschiedene Objekte und verschiedene grafische Elemente und verschiedene Designs zu erstellen . Manchmal verschmelzen oder verschmelzen wir diese beiden Schichten, oben auf den unteren Ebenen. Manchmal subtrahieren wir sie, irgendwann fügen wir sie hinzu. Lassen Sie mich zu diesem Ebenen-Panel kommen. Hierbei handelt es sich um verschiedene Mischoptionen. Das ist normal. Wenn ich zu diesem abgedunkelten wechseln, können Sie sehen, dass es sich im Grunde mit der darunter liegenden Ebene vermischt. Die darunter liegende Schicht ist im Grunde blau. Wir haben verschiedene Optionen hier drüben wie multiplizieren. Es multipliziert sich mit den darunter liegenden Schichten, Farbverbrennung und all diesen verschiedenen Optionen. Grundsätzlich ist es das Hinzufügen oder Subtrahieren von Farben oder Multiplizieren oder Binden von Farben, und das sind unterschiedliche Multiplikation oder Sie können Mischoptionen sagen. Jetzt sind dies im Grunde Mischoptionen. Normalerweise verwenden wir Multiplikation, Farbverbrennung, vielleicht Screen oder Overlay die meiste Zeit. Wir benutzen keine anderen. Vielleicht mal färben. Aber ich werde sie in meinem nächsten Kurs intensiv einsetzen. Für diesen Kurs reicht nur die Einführung, dass es sich um Mischoptionen handelt. Jetzt zu dieser Deckkraft kommt, ist die Opazität im Grunde die Transparenz jeder Ebene. Wenn ich sie also mache, die erste transparent, können Sie sehen, dass sie jetzt halbtransparent ist. Das ist im Grunde Transparenz. Jetzt kommt zu dieser Füllung, füllen ist im Grunde die Farbe, die in dieser Finsternis oder Ebene gefüllt ist. Um es besser zu verstehen, werde ich einen Schlaganfall-Effekt darauf anwenden, so dass Sie sehen können, was passiert. Jetzt können Sie sehen, dass diese Fülloption nur auf die Farbe oder Füllung innerhalb dieser Finsternis angewendet wird. Es erhält oder macht keinen Effekt auf den Rand oder Stricheffekt um ihn herum. Wenn ich die Deckkraft ändere, wird alles reduziert, einschließlich aller Ebenenstile oder Stile, die auf diese bestimmte Ebene angewendet werden. Sie können den Unterschied zwischen der Deckkraft sehen, es macht das gesamte Objekt transparent, einschließlich aller Stile. Aber die Füllung macht nur den Inneninhalt transparent. Dies ist der Unterschied zwischen Füllung und Deckkraft. Jetzt kommen zu dieser Sperre Optionen. Dies ist im Grunde, um die Bewegung zu sperren, so dass wir jetzt nicht die Position dieser Ebene ändern können. Es wird hier statisch bleiben. Nun ist der Vorteil, diese Position zu sperren, dass wir verschiedene Ebenenstile oder verschiedene Optionen und andere Elemente auf diese Finsternis anwenden können, aber wir können sie nicht verschieben. Nun, wenn wir zu diesem Sperrwerkzeug wechseln, wenn wir das sperren, dann können Sie nichts damit tun. Sie können nicht einmal Layerstile anwenden. Sie können sehen, dass alle Layerstile deaktiviert wurden. Dies ist der Unterschied zwischen diesem Schlosssymbol und diesem Sperrpositionssymbol. Nun, es gibt noch wenige Optionen hier. Sie können sehen, ob ich versuche, das einzuschalten. Dies ist im Grunde die Filterung dieser Ebenen, also vielleicht, wenn wir wie 100 Ebenen haben und wir müssen nur die finden, lassen Sie mich eine Textebene erstellen, ich bin ein Text hier drüben, und dann werde ich ein intelligentes Objekt erstellen. Denken Sie daran, dass intelligentes Objekt so orange war. Ich werde ein kleines Objekt erstellen. Ich habe es gesehen, wo ist es hingegangen. Das intelligente Objekt ist hier, dieses hier. Jetzt habe ich eine Textebene, wenige Eclipse- oder Formebenen, und dann habe ich eine intelligente Ebene oder ein Smart-Objekt. Wenn ich nun die intelligenten Objekte schnell durchsuchen möchte, klicke ich auf dieses und du kannst sehen, dass es mir das Smart-Objekt zeigt. Oder wenn Ihr Dokument fünf oder sechs Smart-Objekte enthält, werden diese hier aufgelistet. Im Grunde ist dies ein schneller Filter, um Ihre Layer zu lokalisieren. Wenn ich auf dieses Formwerkzeug klicke , werden mir die Formebenen angezeigt. Wenn ich auf beide klicke, werden mir Formebenen und die Smart-Objekte angezeigt. Dies ist im Grunde, um Ihre Layer herauszufiltern. Dies ist ein Text und ich kann alle meine Textebenen sehen und dann habe ich diese anderen Optionen. Normalerweise benutzen wir diese drei. Hier geht es um das Ebenenbedienfeld und wie all diese Ebenen miteinander funktionieren und wie ihre Stapelreihenfolge stattfindet und wie wir sie verwenden, um verschiedene Objekte und Auswirkungen anzuzeigen oder zu erstellen. Wenn ich einen Teil von diesem lösche, lasse ich es uns zuerst versuchen. Jetzt können Sie sehen, ich kann durch die anderen Schichten von dieser einen sehen, weil es ein Loch darin hat. So funktioniert dieser Layer. Ich hoffe, Sie haben einige grundlegende Schritte gelernt, wie diese Ebenen- und Ebenenfelder im Grunde funktionieren und hoffen, Sie in meinem nächsten Vortrag zu sehen. 19. Textfeld in Photsohop: In dieser Lektion werde ich zeigen, wie wir unser Textwerkzeug verwenden, um unser UI-Design zu entwerfen und wie wir verschiedene Optionen von Absatz- und Zeichensätzen verwenden werden. Lassen Sie uns beginnen und gehen Sie zu diesem T-Symbol in diesem Werkzeugfenster oder Sie können T für die Tastenkombination drücken. Ich werde hier klicken und ziehen, um einen Absatz gebunden zu zeichnen und ich werde einige Loren Ipsum Text hier einfügen. Jetzt werde ich seine Schriftgröße vergrößern, damit Sie es ein bisschen besser sehen können. Nun, einige der Optionen dieses Textfelds sind hier drüben. Wir haben diese Schriftart gewählt, die Open Sans war. Ich kann zu jeder anderen Schriftart wechseln, wenn ich möchte, wie diese. Dann sind dies im Grunde seine Einstellungen. Zum Beispiel, Schriftgewicht, wir haben fett und fett kursiv gerade in ihm. Dann ist dies die Schriftgröße. Wir werden es in Pixeln verwenden. Dies ist im Grunde Font-Rendering-Option. Wir werden normalerweise scharf, knackig und glatt verwenden. Oder vielleicht Windows LCD. Wenn Sie sich auf dem LED-Bildschirm befinden, sehen Sie dies möglicherweise. Sogar auf einem Mac können Sie Mac LED hier oder so etwas sehen. Nun sind dies im Grunde Ausrichtungsoptionen; zentriert ausrichten, rechtsbündig ausrichten oder linksbündig ausrichten. Hierbei handelt es sich um Absatzeinstellungen. Dies ist im Grunde die Farbe des Textes. Wenn ich es in so etwas ändern möchte, kann ich es von hier aus ändern. Dies ist im Grunde der Umbruch von Text, aber wir verwenden ihn möglicherweise nicht in unserem UI-Entwurfsprozess. Wenn Sie auf diese Schaltfläche klicken, werden weitere Optionen in diesem Korrekturfenster geöffnet. Deshalb habe ich in unserer vorherigen Vorlesung diese Charakter- und Absatzeinstellungen hier drüben aufgenommen. Nun, zu diesem Zeichenfeld kommt, ist dies im Grunde die Schriftgröße, und das ist im Grunde die Zeilenhöhe zwischen diesen beiden Zeilen. Wenn ich versuche, es zu erhöhen, können Sie die Textzeilen vertikal sehen, sie erweitern. Dann ist dies im Grunde der Abstand zwischen zwei Buchstaben. Sie können sehen, dass die Buchstaben hier mehr Platz bekommen und mehr Platz in ihnen haben, so. Normalerweise verwenden wir die meiste Zeit etwas, vielleicht 25. Nun haben wir diese verschiedenen anderen Optionen hier für Schriftart und Typografie wie fett, kursiv, und dann alle Großbuchstaben und tiefgestellt, hochgestellt; das sind verschiedene Optionen. Wir benutzen sie vielleicht die meiste Zeit hier drüben nicht, aber vielleicht können sie irgendwann nützlich sein. Jetzt werde ich etwas über diese Absatzeinstellungen erklären. Jetzt, in den Absatzeinstellungen, haben wir diese mehr Optionen der Ausrichtung von Text. Dies ist für gerechtfertigte Einstellungen gerechtfertigt, und dies sind normale drei Einstellungen: linke Linie, Mittellinie und Rechtsausrichten. Nun, diese drei sind Einrückungsoptionen. Wenn wir unseren Absatz von links einrücken wollen, wie 50 Pixel, könnten wir dies verwenden. Sie können sehen, dass dieser Absatz 50 Pixel von links verschiebt. Wenn ich nur die erste Zeile Einzug will, dann kann ich diese verwenden. Jetzt können Sie sehen, dass die erste Zeile von 100 Pixel von links beginnt. Nun, das sind im Grunde oben und unten Polsterung unseres Absatzes. Wenn ich hier 500 eintrage, können Sie sehen, wie mein Absatz nach unten verschoben wurde. Dies sind alle für die Absatzeinstellungen, aber die meiste Zeit verwenden wir diese Einrückungsoptionen oder diese Abstandsoptionen möglicherweise nicht , da wir verschiedene Absätze mit unserer Tastatur verschieben werden, wie Shift und Pfeile mit unseren Tastenkombinationen. Hier geht es um Absatz- und Absatzeinstellungen.s Gehen wir mit der nächsten Vorlesung über. 20. Formwerkzeug in Photohsop: In dieser Lektion werden wir unser Formwerkzeug verwenden, um neue Formen zu erstellen und verschiedene Formen zu kombinieren und wenige Formen zu subtrahieren. Ich werde mich nur auf die Dinge konzentrieren, die wir hauptsächlich im UI-Design tun werden. Lasst uns loslegen. Klicken Sie auf dieses Shape-Icon, Werkzeug-Icon oder Sie können U über Ihre Tastatur drücken. Klicken und ziehen Sie, um sie zu erstellen. Sie können sehen, dass diese Breite und Höhe kommt, Breite diese 537 und so etwas, ich benutze dieses. Sobald ich dieses zeichne, können Sie sehen, dass Live-Shape-Eigenschaften auftauchen. Hier ist unsere Breite und diese ist Höhe. Wenn ich die Höhe in 330 Pixel einstellen möchte, können Sie die Höhe sperren, wenn Sie diese Box so proportional zusammendrücken möchten. Dann haben wir seine x-Achsenposition, wie weit es von der linken Seite ist und wie weit es von oben ist, die y-Achse ist. Dies ist seine Hintergrundfarbe und dies ist seine Umriss- oder Strichfarbe. Sie können hier sehen, wenn ich das erhöhen, können Sie sehen, wie es skizziert wird. Nein, wir werden das nicht verwenden, also werde ich nicht über diese wenigen Einstellungen aus dem Umriss diskutieren, wir werden es mit unseren weniger Zeiten verwenden. Eine weitere, was sehr wichtig ist, ist dieser Grenzradius. Sie können hier klicken oder ziehen, wenn Sie es auf einen Radius des Rahmens setzen möchten, oder Sie können hier Ihren eigenen Wert eingeben. Wenn Sie auf dieses Schlosssymbol klicken, können Sie auch benutzerdefinierte Werte für jede Ecke festlegen. Wenn ich es einfach so hierher ziehe, wird es diese Art von Form schaffen, und diese Art von Formen sind im CSS-Design und neuen CSS3-Spezifikationen möglich. Eine Sache ist dies, wir werden die meiste Zeit diese rechteckigen Formen für unsere Knöpfe und viele andere Dinge verwenden. Lassen Sie uns nun eine neue Form erstellen, indem Sie zwei Formen kombinieren. Manchmal haben Sie diese Art von Informationsdialogfeld gesehen oder Pop-up. Ich werde eine andere benutzerdefinierte Form aus unserer Shape-Werkzeugleiste verwenden. Hier werde ich alle Formen hier laden, sie ersetzen und eine weitere Einstellung entfernen, große Miniaturansicht. Ich setze es auf ein großes Thumbnail. Jetzt wollen wir herausfinden, wo dieses Rechteck ist. Wir können das benutzen, oder vielleicht diesen, oder diesen. Ich werde hier drüben ein Rechteck zeichnen. Es ist nicht im Grunde ein Rechteck. Jetzt können Sie sehen, dass ich einen Ballon Pop-up oder Tooltip gestylt von Box gemacht habe. Wenn Sie sich nun auf das Ebenenfenster konzentrieren, ist diese Form von dieser getrennt. Wenn ich seine Farben ändern möchte, bleibt der andere so, wie er ist. Nun, wie ich diese beiden kombinieren kann, ist es sehr einfach. Sie können beide auswählen, indem Sie die Strg-Taste drücken und klicken, und dann können Sie die Strg-Taste und E. drücken. Es handelt sich um eine Verknüpfung zum Kombinieren von zwei Formen, jetzt zusammengeführt werden. Sie können sehen, dass sie jetzt im Grunde zusammengeführt werden. Wenn ich die Farbe ändern möchte, kann ich sie ändern und T steuern Wenn ich sie skalieren möchte, werden sie proportional skaliert. Auf diese Weise erstellen Sie Shapes in Ihrem UI-Design. Manchmal mussten wir Formen wie diese erstellen. Nun, wenn Sie eine Form davon subtrahieren wollen, müssen wir sie meistens nicht die meiste Zeit verwenden, aber es ist immer noch etwas, das Sie lernen können. Sie können jetzt sehen, da ich diese Subtraktion von der Frontform ausgewählt habe, wird mein Cursor auf dieses Negativ- oder Minuszeichen geändert. Nun, wenn ich hier einen Kreis zeichne, drücke ich Shift damit, du siehst, dass er diese Form nur subtrahiert hat. Noch eine Sache, wenn ich es verschieben muss, kann ich es nicht mit diesem Verschiebungswerkzeug bewegen. Sie können sehen, dass ich die Form verschieben kann, aber wenn ich diesen kreisförmigen Kreis innerhalb meiner Form verschieben möchte, die ich gerade subtrahiert habe, muss ich dieses Pfadauswahlwerkzeug oder das Direktauswahlwerkzeug drücken. Wenn ich darauf klicke, können Sie jetzt sehen, dass diese ovale Form in dieser anderen Form hervorgehoben wird. Wenn ich alle seine Seiten oder die gesamte Form auswählen möchte, werde ich diesen schwarzen Cursor hier klicken „Pfadauswahlwerkzeug“. Jetzt kann ich es bewegen, jetzt ist es in der Mitte. Wenn ich seine Größe oder Form ändern möchte, kann ich sie nach unten skalieren oder nach oben skalieren. Dann werde ich wieder Verschiebenwerkzeug auswählen, und das war's. Wir haben eine Form mit der Kombination von zwei Formen erstellt und dann haben wir diesen Bereich von über diese kombinierte Form subtrahiert. Das ist es, und ich denke, das ist es für unser Formwerkzeug. Ich hoffe, Sie haben etwas gelernt und genossen. Gehen wir zur nächsten Vorlesung. 21. Grundlagen des Stift-Tools: In dieser Lektion werde ich Ihnen schnell zeigen, wie wir unser Stiftwerkzeug in unserem UI-Design verwenden werden. Wir werden hier keine Symbole erstellen. Machen wir es einfach schnell und einfach. Du hättest so etwas gesehen. Lassen Sie mich es einfach erklären. Das ist mein Heldenbereich auf meiner Website. So wie das. Ich werde seine Farbe, Hintergrundfarbe ändern , damit Sie es richtig anzeigen können. Außerdem werde ich seine Größe ein bisschen mehr erweitern. Möglicherweise haben Sie eine Variation dieser Form gesehen. Die meisten der Zeit einige wenige Designer, sie verwenden diese völlig quadratische Form nicht. Wir werden hier etwas Abwechslung hinzufügen, wählen Sie Ihr Stiftwerkzeug und klicken Sie auf diese Linie dieses rechteckigen Werkzeugs hier drüben so. Klicken Sie hier und klicken Sie hier. Im Grunde, was wir tun, wir einige weitere Ankerpunkte hinzu, um unsere Form zu verändern. Wechseln Sie nun zu diesem Direktauswahl-Werkzeug. Wählen Sie es aus, wählen Sie dann die mittlere und verschieben Sie sie mit Pfeil und Umschalttaste, Shift, Pfeil, Shift, Pfeil, Pfeil, Shift, Pfeil, Shift, Pfeil. Ich drücke die Umschalttaste und klicke auf den Pfeil. Dieses Shape wurde erstellt. Wenn Sie möchten, dass die Pfeile etwas nicht kurvig und ein bisschen spitz sind, können Sie zu diesem Konvertierungspunkt-Werkzeug gehen und einmal hier klicken. Sie können sehen, wir haben Grundform eines Pfeilkopf-Held Header Bereich. Sie haben vielleicht gesehen, wie Pfeil oder Inhalt als nächstes hier drüben angezeigt werden, Pfeile, die hier nach unten zeigen. Dies ist eine Verwendung. Ich habe diese Form mit meinem Stiftwerkzeug verändert und geändert, um einen ästhetischeren Wert zu schaffen. Es gibt auch einige andere Dinge, die wir hier benutzen können. Sie können sehen, dass das unsere Grundform war. Wenn Sie dieses Direktauswahl-Werkzeug auswählen, können Sie hier auswählen und Ihre Form so verschieben. Sie können sehen, dass wir hier verschiedene Formen geschaffen haben. Um mit unserem Header als Header-Bereich oder Heldenbereich zu beginnen. Dies sind verschiedene Verwendungen von Stift-Werkzeug und wir verwenden sie in Kombination mit unserem Formwerkzeug. Denken Sie daran und hoffen, dass Sie diesen Vortrag genossen haben. Fahren wir mit der nächsten Lektion fort. 22. Mehr zur Verwendung von Stiften Tool: Heute bat mich einer meiner Schüler, einen detaillierteren Vortrag über Stift-Werkzeuge zu erstellen. Heute werden wir mehr über Pen Werkzeug zu erkunden und am Ende werden wir so etwas wie diese Augenform zu schaffen. Sie können auf dem Bildschirm sehen. Ich denke, ich werde Ihnen einige der Techniken zeigen, wie Sie Kurven erstellen und wie Sie verschiedene Formen mit Ihrem Stiftwerkzeug erstellen. Lasst uns anfangen. Zuerst wählen wir unser Stiftwerkzeug drücken Sie „P“ auf der Tastatur, so dass Ihr Stiftwerkzeug ausgewählt ist. Sie können oben sehen, dass Sie zwei Optionen haben: Form und Pfad. Wenn Sie die Form auswählen, sehen Sie, wenn Sie versuchen, einen Pfad in einem Shape-Modus zu erstellen, dass es sich um eine vollständige Form wie diese und geschlossene Form handelt. Was ich tue, ist, dass ich nur klicke, und dann klicke ich zurück an der ersten Stelle, wo ich angefangen habe und es wird umschlossen Form sein. Dies ist eine geschlossene Form. Wenn Sie etwas wie diese, geschlossene Form möchten, werden Sie diese erste Option Shape auswählen. Wenn Sie nur einen Pfad möchten, sollten Sie diese Form nicht auswählen. Wenn Sie nur ein paar Linien oder Pfeile wollen, brauchen wir es nicht. Ich werde auf das Stift-Werkzeug und den Pfad drücken und ich werde einen Weg hier drüben so zeichnen. Klicken und ziehen Sie in die Richtung, in die der Pfad als nächstes gehen soll. In diese Richtung bedeutet es, dass ich in diese Richtung gehen werde. Sie können sehen, wie es meine Kurve nach meiner Richtung berechnet. Auf dieser Seite habe ich ihm keine Richtung gegeben, also wird es sehr scharf sein. Es ist nicht abgerundet. Wenn Sie möchten, dass es gerundet wird, gehen Sie zu diesem Konvertierungspunkt-Werkzeug, klicken Sie hier und ziehen Sie nach außen. Sie sehen zwei Griffe an beiden Seiten und Sie können sie so ziehen. Wenn Sie möchten, dass es ausgerichtet wird, sollten Sie die Umschalttaste drücken. Ich habe diesen gekrümmten Pfad erstellt. Ich sehe keinen Pfad, wenn ich irgendwo anders klicke. Was ich tun werde, ist, dass ich meine Pfade hier so aktivieren werde, und Sie können sehen, ist es in dieser Ebene? Ja. Es ist in dieser Schicht. Lassen Sie uns diesen löschen. Ich habe diesen Weg. Lassen Sie uns ein neues erstellen, weil es mit meinem letzten Pfad zusammengeführt hat. Ich werde hier drüben einen neuen erschaffen. Nur ein schneller Weg wie dieser. Nur eine Welle. Wenn ich einen gestrichelten Pfad wie folgt möchte, werde ich zuerst eine neue Ebene erstellen und dann A drücken, mit der rechten Maustaste klicken und Sie können sehen, dass Sie Füllpfad und Strichpfad haben. Klicken Sie auf den „Strichpfad“ und wenn Sie Druck simulieren möchten, werde ich später sagen, was es bedeutet. Eigentlich simuliert es, wie der Bürstendruck funktioniert. Wenn wir darauf klicken, können Sie hier sehen. Es ist ein Pinselstrich mit dem weniger Druck auf den Start und am Ende. Es zeigt dir wirklich wie ein Pinsel. Wenn Sie keinen Pinselstrich wünschen, können Sie hier klicken, zuerst diese Ebene auswählen und mit der rechten Maustaste klicken und den Strichpfad ausschalten. Sie können sehen, ich habe eine konsistente Zeile oder Sie können Pfad sagen. Es zeigt mir keine Winkel oder Sie können sagen, dass ich keinen Druck ausgeübt habe, also ist es nur eine konsistente Linie. So erstellen Sie eine Welle. Der Hauptpunkt hier ist, dass, wenn Sie Stiftwerkzeug verwenden, dies der erste Klick ist. Wenn Sie den zweiten Klick ausführen, müssen Sie Photoshop mitteilen, wohin Sie gehen möchten. Sie wollen in diese Richtung oder in diese Richtung gehen. Wenn ich hier klicke, können Sie sehen, wie es berechnet, dass ich in diese Richtung gehen werde. Wenn ich ihm sage, dass ich in diese Richtung gehen werde, dann wird es so berechnen. Sie können sehen, dass dies ein bisschen nach oben ist und das ist ein bisschen schräger. An diesem Punkt, wenn ich nicht sage, dass wir diesen Weg oder diesen Weg gehen werden, wird es sehr steil sein. Wenn Sie eine sehr steile Kurve wie diese wollen, nur einen Winkel, 90-Grad-Winkel oder 80 Grad, sollten Sie Photoshop nicht sagen, dass Sie in diese Richtung gehen werden. Geben Sie Richtungen nicht, und es wird steil sein. So bauen wir Formen. Einer ist gekrümmt, einer ist nicht gekrümmt. So schaffen wir Formen und Pfade. Lassen Sie uns diesen iPath erstellen. Ich denke, es ist mehr als genug. Lassen Sie mich hier noch eins erklären. Ein weiteres Beispiel. Ich werde hier drüben ein weiteres Beispiel erstellen, so hier drüben , wie dieses hier drüben, und so. Du siehst, dass ich hier drüben keine Kurven habe. Wenn ich die Kurven möchte, sollte ich zu diesem Convert Point Tool gehen und hier klicken und ziehen. Es wird Griffe hier haben und es kann Kurven erstellen. Nun, was ich tun werde, ist, wenn Sie auf „A“ klicken und Sie auf dieses Direktauswahl-Tool klicken können. Sie können einen dieser Ankerpunkte auswählen, der über zwei Griffe verfügt. Wenn Sie versuchen, einen Ziehpunkt wie diesen zu ziehen, können Sie dies unabhängig tun. Wir haben genau diesen ausgewählt und wir können haben, was wir wollen. Auch können Sie diesen Winkel hier oben einstellen, so. Sie können dies auch nach oben oder unten verschieben. Sie können diesen Ankerpunkt sehen. Ich benutze Shift- und Pfeiltasten, um es nach oben und unten zu bewegen. Sie können es auch nach oben und unten ziehen, wo Sie wollen. So steuern Sie diese Ankerpunkte, und dies sind ihre Griffe. Wenn Sie das Handle wollen, können Sie sie so steuern, kann so sein. So steuern Sie diese Stiftwerkzeugformen und -pfade. Dies ist das Pfadauswahlwerkzeug. Wenn Sie diese Option auswählen , werden alle Ankerpunkte auf diesem Pfad ausgewählt. Du kannst es vielleicht so bewegen, oder hier rüber oder hier drüben. Außerdem wählen Sie diese und klicken Sie mit der rechten Maustaste, und Sie werden sehen, dass diese Auswahl treffen. Wenn Sie diese Option auswählen, wird die gesamte Form statt nur die Linie ausgewählt. Stellen Sie sicher, dass Sie, wenn Sie versuchen, einen Pinselstrich auf dieser Ebene zu haben, eine Ebene in diesem Kunstboard haben müssen. Erstellen Sie zuerst eine neue Ebene, dann mit der rechten Maustaste darauf, und Sie sehen einen Strich-Subpfad oder was auch immer es ist. Es wird es streicheln. Wenn wir so etwas erschaffen wollen, brauchen wir hier drüben nur Augenform. Ich werde hier ein neues Dokument erstellen und diese Augenform erstellen. Es ist sehr einfach Übung. Ich werde hier rüber klicken. Als nächstes werde ich hier rüber klicken, ziehen. Wir gehen in diese Richtung. Drücken Sie Shift, wenn Sie es so ausrichten wollen, dann klicke ich hier rüber, dann hier drüben, so und dann hier drüben. Sie können sehen, dass diese obere und die untere nicht ausgerichtet sind. Was ich tun werde, ist, ich werde dieses Auswahlwerkzeug auswählen, und ich werde dieses auswählen und es so mit meinen Pfeiltasten verschieben, und vielleicht brauche ich ein bisschen kleineres Auge, es ist sehr geöffnet oder vielleicht großes Auge. Ich brauche so etwas. Vielleicht muss ich es in die Formen umwandeln. Ich werde Shape drücken. Ich weiß nicht, was passiert ist. Vielleicht sollten wir voran gehen und es noch einmal versuchen, weil wir ausgewählt hatten. Es gibt eine andere Möglichkeit, wenn Sie diese Ebene füllen möchten, können Sie A auswählen und OK drücken und so eine Auswahl treffen, und Sie können G, Shift G für die Grundfarbe drücken . Ich kann diese Farbe auswählen, vielleicht diese. Es ist, was hier passiert, ich habe die Auswahl invertiert. Was ich tun werde, ist, dass ich es umkehren werde. Nur dieses Auge auszusuchen, ist okay. Ich habe Control Shift I gedrückt, um die Auswahl zu invertieren und ich klicke hier. Meine Augenpartie ist komplett. Ich werde ihm einen Layer-Stil geben. Nicht den Schlagschatten, ich werde ihm einen inneren Schatten geben. Fünfzig Prozent multiplizieren die Entfernung, die Sie wollen, und dann so etwas. Dann werden wir einige Finsternis in der Mitte so erstellen. Ändern Sie die Farbe, was Sie wollen, vielleicht diese, und dann können Sie G steuern und diese Ebene duplizieren. Wir werden es so duplizieren. Lassen Sie uns einfach zwei weitere so erstellen. Ich denke, das ist mehr als genug. Wenn Sie mehr Layer wünschen, können Sie diese so viele erstellen, wie Sie möchten. Vielleicht können Sie eine andere Farbe im Auge haben. So erstellen Sie Formen, wie Sie Photoshop sagen, in welche Richtung Sie gehen. Sie können benutzerdefinierte Griffe und benutzerdefinierte Bereiche auswählen, auch wenn Sie mit einem Shape beginnen möchten. Wenn Sie hier nur Finsternis ziehen, können Sie sehen, dass ich eine Sonnenfinsternis gezogen habe. Wenn Sie A drücken, können Sie alle Ankerpunkte sehen. Wenn Sie jemanden löschen möchten, wenn Sie jemanden ändern möchten, wie ich es hier so ziehen möchte. Ich werde auf „Ja“ klicken, und wenn Sie es so bewegen, drücken Sie Umschalttaste A, um zum nächsten Werkzeug zu gehen, ich werde das mögen. Sie können sehen, dass es der Anfang des Symbols ist. Oder Sie können sehen, das Symbol, das wir eines Benutzerprofils erstellen, es ist der Leiter des Benutzerprofils. Wenn Sie mehr so wollen, können Sie voran gehen und A drücken und wir können es ein bisschen mehr so machen, anstatt nur einen ovalen [unhörbaren] 100 Header an der Spitze. Dann können wir von hier aus eine andere Form zeichnen. Wir brauchen eine Form, also werde ich hier rüber klicken. Ich benutze kein Gitter, deshalb passiert es. Ich habe keine Berechnung, wie es gehen wird. Normalerweise, wenn Sie einige Symbole entwerfen, schalten Sie Ihr Raster so ein. Es ist Kontrolle und Zitat Zeichen auf Ihrem Brett. Einfaches Anführungszeichen und doppeltes Anführungszeichen sind nur der nächste Schlüssel aus Ihrem Semikolon. Sie schalten Ihr Raster ein, und wenn Sie zeichnen, zeichnen Sie entsprechend Ihrem Raster. Ich werde diese ganze Form löschen, und wir werden nach diesem Raster zeichnen. Fangen wir von hier an. Ich werde so zu diesem Punkt gehen, und ich werde hier rüber gehen. Dann wird das 1, 2, 3, 4, 5, 6, 7 sein, denke ich. 1 ,2, 3, 4, 5, 6, 7. Ich denke, vielleicht müssen wir hier rüber gehen, und am selben Ort hier drüben, so, und wieder hier drüben. Jetzt können Sie sehen, es ist die gleiche Form, aber es hat mehr Genauigkeit. Ich muss diese Form so schließen. Sie können sehen, ich kann voran gehen und die Farbe des Kopfes so ändern, und es über diese Form machen. Sie können sehen, wie ich diese beiden Symbole erstellt habe. Wenn Sie es über ein bisschen mehr so oder so bewegen möchten. Hier geht es darum, wie Sie mit dem Stiftwerkzeug Symbole erstellen. Ich habe zwei Symbole erstellt. eine ist dieses Auge, und das andere ist dieses Profil, oder ich nenne es den Alien. Ich weiß nicht, was es ist. Gehen wir zur nächsten Lektion. 23. Ausrichtung in Photoshop: In dieser Lektion werde ich über Ausrichtungen sprechen und wie wir sie in unserem UI-Entwurfsprozess verwenden werden. Lasst uns loslegen. Ich habe meine Leinwand bereits mit drei Formen bevölkert. Lassen Sie mich Ihnen zeigen, wie wir sie ausrichten und wie Sie das Ausrichtungswerkzeug verwenden. Zunächst einmal müssen wir sie manchmal horizontal und manchmal vertikal ausrichten, oder manchmal verwenden wir Gruppen, um all diese Objekte auszurichten. Damit das Ausrichtungswerkzeug funktioniert, benötigen wir grundsätzlich mindestens zwei Objekte oder zwei Ebenen. Manchmal haben wir nur eine Ebene, also lassen Sie mich Ihnen zeigen, wie Sie es ausrichten. Wenn ich es in der Mitte unserer Leinwand ausrichten möchte, werde ich diese Ebene von hier aus auswählen, das Ebenenfeld und dann werde ich Strg+A drücken. Sie können sehen, dass meine gesamte Leinwand ausgewählt ist. Jetzt habe ich zwei Objekte. Eine ist meine Leinwand und eine ist diese Ebene. Jetzt werde ich sie mit meiner Tastenkombination ausrichten, die ich in unserer letzten Vorlesung verwendet habe, die benutzerdefinierte Verknüpfungen waren. Wir werden es zuerst horizontal ausrichten, Control, Alt und H. Jetzt können Sie sehen, dass es horizontal in der Auswahl positioniert ist , diese Leinwand Auswahl. Jetzt werde ich es vertikal ausrichten, also werde ich Alt , Control und V drücken . Jetzt können Sie sehen, dass es vertikal in dieser Leinwand und auch horizontal ausgerichtet ist, also ist es in der perfekten Mitte. Nun, wenn ich zwei Objekte wie diese habe. Nun, wenn ich sie beide ausrichten möchte, werde ich beide auswählen und dann werde ich drücken, also muss ich auf dem Verschiebungswerkzeug sein. Drücken Sie V oder verschieben Sie das Werkzeug von hier aus. Jetzt können Sie diese Ausrichtungsoptionen oben sehen, sie sind aktiviert. Sie können sie horizontal so und vertikal wie folgt ausrichten. Sie sind in Bezug zueinander positioniert. Ich habe dir schon gesagt, dass wir zwei Objekte brauchen, um sie auszurichten. Sie positionieren sich in Bezug zueinander. Wenn ich sie in Bezug auf die Leinwand ausrichten möchte, muss ich auch die Leinwand auswählen. Im Moment erkläre ich nur, wie dieses Tool funktioniert. Lassen Sie mich es Ihnen zeigen. Jetzt werde ich beide auswählen und wenn ich diese Ausrichtung oben drücke, werden sie an der oberen Position ausrichten. Unten ausrichten wird das Gleiche tun. Jetzt noch eine Sache. Dies ist nach links ausrichten und rechts ausrichten. Richten Sie rechts aus. Nun, wenn sie zu diesen anderen Ausrichtungsoptionen kommen, die jetzt versteckt sind, benötigen sie im Grunde drei Objekte. Wenn ich alle so anklicke, muss ich sie zuerst so ausrichten. Sie sollten in einer Zeile sein. Zum Beispiel sind sie so. Nun, wenn ich möchte, dass all diese Objekte oder Ebenen den gleichen Raum zwischen ihnen haben, werde ich diese Verteilung horizontale Zentren drücken und Sie können sehen, jetzt sind sie perfekt ausgerichtet und sie haben gleiche Räume zwischen ihnen. Was ist, wenn ich sie in der Mitte ausrichten möchte, die gleiche Weise in Bezug auf die Leinwand? Ich werde zuerst eine Gruppe von all diesen drei Ebenen erstellen. Lassen Sie mich es Layer-Gruppe nennen. Ich werde diese Hintergrundebene auswählen. Ich kann Alt, Control, und H und dann V drücken . Jetzt können Sie sehen, alle von ihnen sind sie in Bezug auf die Leinwand in der perfekten Mitte ausgerichtet. Dies sind einige der Techniken, die wir normalerweise in unserem UI-Design verwenden , wie die Auswahl der Leinwand oder die Auswahl dieser Hintergrundebene, um all diese auszurichten. Manchmal haben wir hier zum Beispiel Richtlinien wie diese und ich möchte dies in der Mitte dieser Leitfäden ausrichten. Was ich tun werde, ist, dass ich diese Ebene auswählen und dann werde ich M oder Rechteckiges Marquee Tool drücken und ich werde hierher ziehen und dann werde ich es horizontal ausrichten. Jetzt können Sie sehen, und dies ist die meiste Zeit, die wir in unseren Raster verwenden, wenn wir unterschiedliche Ausrichtungsraster haben. Stellen Sie sicher, dass Sie alle diese Tricks kennen, um sich an dieser Auswahl auszurichten, um entsprechend dieser Leinwand auszurichten. Zwei Methoden richten dann alle diese drei Objekte in Bezug aufeinander aus. Dies sind drei Ausrichtungen, die wir normalerweise tun. Denken Sie daran, all diese drei Ausrichtungen und wir werden sie Zeit zu Zeit in den nächsten Klassen und vielleicht in meinem nächsten Kurs verwenden . Ich denke, es geht darum, Ebenen auszurichten und sie zu verteilen. Ich hoffe, Sie haben etwas Neues gelernt. Fahren wir mit der nächsten Vorlesung fort. 24. Auswahl in Photohsop: In dieser Lektion werden wir sehen, wie die Auswahl an unserem UI-Entwurfsprozess teilnimmt. Lassen Sie loslegen. Das erste, was Sie hier tun möchten, ist, manchmal müssen wir Ganze unsere Leinwand auswählen oder Auswahl um den gesamten Zeichenbereich auswählen. Dafür werde ich Control A drücken. Sobald ich Control A drücke, die Auswahl um all das unsere Leinwand Bereich herum. Dies ist das erste Szenario. Manchmal müssen wir eine Auswahl um eine Ebene oder um eine Form treffen. Lassen Sie mich dafür einfach die Auswahl aufheben, drücken Sie M und klicken Sie einmal auf die Leinwand, und Ihre Auswahl ist verschwunden. Nun, um diese Form auszuwählen, wählen Sie sie zuerst aus diesem Ebenenfenster und dann Control aus, und klicken Sie auf diese Ebenenminiatur. Sobald Sie auf diese Ebenenminiatur klicken, können Sie eine Auswahl um diese Ebene sehen. Dies ist eine andere Möglichkeit, bei der wir eine Auswahl um eine Ebene oder eine Form benötigen. Nun, wenn ich eine weitere Auswahl hinzufügen oder in dieser Auswahl einige weitere Ideen hinzufügen möchte, kann ich hier oben oben gehen, wo ich diese Option Zur Auswahl hinzufügen auswählen muss. Dann kann ich hierher ziehen und irgendetwas innerhalb des Abschnitts auswählen. Sie können jetzt sehen, dass die Auswahl vergrößert wurde. Wenn ich die Auswahl verschieben möchte, kann ich zuerst zu dieser ersten Option gehen und dann kann ich sie verschieben. Jetzt können Sie sehen, dass ich diese Auswahl verschoben habe. In einer anderen Ebene habe ich eine neue Ebene erstellt, und ich kann sie mit einer anderen Farbe wie dieser füllen. Ich werde eine andere Farbe auswählen. Jetzt können Sie sehen, dass ich diese Auswahl verwendet und eine neue Ebene erstellt und mit einer anderen Farbe gefüllt habe. So fügen wir Auswahlen hinzu oder erstellen komplexe Selektionen wie diese. Wenn ich nun eine Auswahl oder einen Bereich von einer Auswahl subtrahieren möchte, zeige ich Ihnen, wie das geht. Zuerst müssen Sie eine Auswahl wie diese treffen. Nun, ich möchte nur den 70 Prozent oberen Bereich dieser Form. Ich werde hier auf Von Shape subtrahieren drücken, diese auswählen, und Sie können den Bereich ziehen, in den Sie nicht möchten, dass er ausgewählt werden soll, und loslassen. Sie können sehen, dies ist, wie wir machen oder von der Auswahl subtrahieren. Das ist ein anderer Weg. Lassen Sie mich Ihnen diese letzte Option zeigen, die Kreuzung ist. Lassen Sie mich Ihnen zeigen, was es tun wird. Es wird im Grunde sowohl die Auswahl schneiden und den Bereich verlassen, der zwischen ihnen gemeinsam war. So funktioniert dieser Schnittpunkt. Die meiste Zeit brauchen wir diese Interaktion nicht. Interaktion verwenden wir nur diese Add oder Subtrahieren Auswahl. Es gibt auch einige Tastenkombinationen, die Sie verwenden können , um eine Auswahl von diesem hinzuzufügen oder zu subtrahieren. Ich habe diese Auswahl. Wenn ich hinzufügen möchte, kann ich die Umschalttaste auf der Tastatur drücken und halten und diese Auswahl so weiter hinzufügen. Wenn ich nun subtrahieren möchte, kann ich die Alt- oder Wahltaste auf Ihrer Tastatur drücken und Sie können Bereiche aus Ihrer Auswahl entfernen. Umschalttaste zum Hinzufügen einer Auswahl und Alt- oder Wahltaste, um eine Auswahl zu löschen oder Teile Ihrer Auswahl zu entfernen. Manchmal brauchen wir auch einige der unregelmäßigen Auswahlen, daher verwenden wir dieses Lasso-Werkzeug. Wenn Sie dieses Polygon- oder Lasso-Werkzeug auswählen, können Sie sehen, wie das im Wesentlichen funktioniert. Es ist so. Sie klicken und kombinieren die Start- und Endpunkte, und es macht eine Auswahl. Wenn ich beispielsweise die rechte untere Ecke dieses Shapes löschen möchte , werde ich zuerst mit der rechten Maustaste klicken und diesen Layer rastern. Da es sich um eine Formebene handelt, kann sie bei der Auswahl nicht so subtrahiert werden. Dann wähle ich mein Polygon-Lasso-Werkzeug aus. Ich werde diesen Bereich entfernen und auf „Löschen“ drücken. Stellen Sie sicher, dass Sie die richtige Ebene ausgewählt haben, andernfalls funktioniert sie nicht. Ich habe diesen Teil dieser Ebene oder dieser Form entfernt. Sie können sehen, wie es jetzt aussieht. Dies sind verschiedene Möglichkeiten, wie wir Auswahlen verwenden und sie verwenden, um zu subtrahieren, hinzuzufügen oder verschiedene Auswahlen wie diese zu treffen. Manchmal brauchen wir eine Auswahl, um Richtlinien zu zeichnen. Wenn ich eine solche Auswahl mache und eine Richtlinie von hier ziehen kann, wird sie automatisch an ihrem Rand gefangen. Ich werde es so lassen, so und so. Dies ist eine andere Möglichkeit, bei der unsere Auswahl im UI-Design sehr praktisch ist. Ich denke, das geht alles um Auswahl und seine Verwendung im UI-Design. Ich denke, ich habe fast alle Szenarien besprochen, in denen wir diese Auswahl benötigen. Gehen wir zur nächsten Vorlesung. 25. Häufige Tastaturkürzel in Photoshop: In dieser Lektion werde ich mit euch einige der Photoshop-Verknüpfungen teilen , die wir viel Zeit verwenden werden. Ich habe meine Leinwand bereits im Grunde gefüllt, da dies eine Textebene ist und dies Formwerkzeuge sind. Eine gängige Verknüpfung ist dieses V-Werkzeug, das Verschiebenwerkzeug ist. Sie können hier drüben sehen. Wann immer ich einen Teil der Ebene verschieben möchte, drücke ich diese V. Die Ebene, die sich bewegen wird, wird diejenige sein , die ich aus diesem Ebenenfenster ausgewählt habe. Stellen Sie sicher, dass Sie hier die richtige Ebene ausgewählt haben. Um die Ebene auszuwählen, können Sie Control Klicken Sie darauf, oder Sie können diese automatische Auswahl einrichten. Wenn Sie dieses Auto Select-Setup haben, können Sie einfach auf die Ebene klicken und es wird wie folgt ausgewählt. Sie können im Ebenenfenster sehen, sobald ich eine andere Ebene auswähle, es bewegt sich einfach zu dieser Ebene. Sie können beide Optionen verwenden. Sie können die automatische Auswahl verwenden oder Sie können sie deaktivieren und Control Plus-Auswahl verwenden, was meiner Meinung nach genauer ist. Nun, eins ist, dass wir die hier bewegen wollen. Zweitens ist, dass, wenn ich eine der Ebenen duplizieren oder replizieren möchte, so werde ich diese Ebene replizieren und ich werde Control J auf meiner Tastatur drücken. Sie können sehen, dass es konvertiert und in eine andere rechteckige Ebene gleicher Größe repliziert wird. Zweitens ist, dass, wenn ich all diese Gruppen gruppieren möchte, die wir viel Zeit verwenden werden, Elemente zu gruppieren. Übernehmen Sie die Kontrolle und klicken Sie auf alle diese, damit diese ausgewählt werden. Drücken Sie Control G, um sie zu gruppieren. Jetzt sind sie in einer Gruppe und wenn ich versuche, sie zu bewegen, sie sich zusammen. Zweites Problem ist, dass, wenn Sie automatische Auswahl haben, wählen Sie es hier drüben und auf Ebene zurücksetzen. Wenn Ihre Gruppe ausgewählt ist und Sie hier klicken, um sie zu verschieben, können Sie sehen, was das Problem ist. Sie wählen diesen Layer im Grunde automatisch in dieser Gruppe aus. Das ist ein weiteres Problem. Wenn so etwas passiert, müssen Sie sicherstellen, dass Sie Gruppe von hier ausgewählt haben. Dann kannst du dich so bewegen. Manchmal ist es besser, diese automatische Auswahl zu deaktivieren. die gleiche Weise, wie wir es duplizieren oder unsere Ebenen replizieren, können wir auch eine Gruppe replizieren. Sie können sehen, jetzt Gruppe hervorgehoben ist. Ich kann Control G drücken, was der gleiche Befehl ist wie das Replizieren einer Ebene. Ich habe die Gruppe repliziert. Es gibt zwei Gruppen. Dies ist eine der häufigsten Verknüpfungen, die wir viel Zeit verwenden werden. Nun, wenn ich eine Auswahl um ein Element oder eine beliebige Ebene treffen möchte. Damit dies geschieht, drücken wir die Steuerungstaste auf meiner Tastatur und wenn ich meine Maus auf einer der Ebenen schwebe, dreht es sich zu diesem marschierenden Ameisen Cursor. Wenn ich darauf klicke, können Sie sehen, dass dieses Eclipse-Werkzeug ausgewählt wurde, diese Form wurde ausgewählt. Wenn ich nun die Auswahl verschieben möchte, muss ich die M-Taste auf der Tastatur drücken oder das ist im Grunde die Verknüpfung für rechteckiges Auswahlwerkzeug. Wenn Sie Auswahlrahmen ausgewählt haben, stellen Sie sicher, dass Sie diese erste Option haben Die zweite und dritte Option kombiniert und subtrahiert die Auswahl. Erste Option ausgewählt und Sie können es so bewegen. Manchmal müssen wir vielleicht Richtlinien wie diese ziehen. Ich brauche diese Auswahl, um einige Richtlinien zu zeichnen. Dann werde ich es aufheben, indem ich einmal so klicke. Dies sind ein paar Verknüpfungen, dann einige der Verknüpfungen, die mit dem Ausrichten einiger der Ebenen zusammenhängen, die sehr notwendig sind. Wir müssen sie sehr benutzen. Lassen Sie mich einfach einige Ebenen bewegen und die Form ändern. Jetzt siehst du, dass ich es gerade verkleinert habe. Was ich tatsächlich gedrückt habe, ist, dass ich Control T gedrückt habe, um es zu skalieren, was eine Tastenkombination zum Skalieren oder Drehen von Objekten ist. Ich drückte Control T und ich schnappe einen der Griffe und ich drückte ihn einfach so. Wenn Sie sie proportional skalieren möchten, können Sie die Umschalttaste auf der Tastatur auswählen. Wenn ich einen dieser Griffe auswähle, sehen Sie, dass ich die Umschalttaste drücke, damit er sich proportional bewegt. Es ist Skalierung im Verhältnis. Wenn Sie Alt und Shift auswählen und dann skalieren oder nach oben oder unten skalieren, können Sie den Effekt sehen. Es hat die Skalierung von einer Seite zu einer zentralen Position geändert. Im Moment skaliert es von überall um die Form, von allen Seiten gleichermaßen. Drücken Sie Alt und Umschalttaste auf der Tastatur und ziehen Sie sie dann so. Dies sind die Tastenkombinationen für die Skalierung. Wenn Sie weitere Verknüpfungen aktivieren möchten oder etwas mehr tun müssen, können Sie mit der rechten Maustaste darauf klicken, während diese Griffe aktiv sind. Sie können diese Spiegeln horizontal, vertikal spiegeln, 180 drehen, oder schief, verzerren, und so etwas mehr Optionen verwenden. Aber die meiste Zeit benutzen wir sie vielleicht nicht. Jetzt habe ich zwei Ebenen wie diese und ich möchte sie von oben ausrichten, ich werde beide auswählen. Diese Ebene und diese Ebene können Sie sie von hier aus auswählen, indem Sie die Strg-Taste drücken. Ich werde diese Top benutzen, um sie auszurichten. Grundsätzlich verwenden wir diese oberste Zeile die meiste Zeit nicht, aber wir verwenden die Tastenkombinationen, wenn Sie sich erinnern, ich habe in meinem benutzerdefinierten Kurzbefehls-Tutorial eingerichtet, das etwas früher in dieser Lektion ist. Jetzt beide nicht ausgewählt Ich werde einen von ihnen auswählen und ich werde es bewegen. Wenn ich nun beide auswähle und möchte, dass sie in der Mitte oder horizontal ausgerichtet sind, drücke ich „Control“, „Alt“ und „H“. Jetzt können Sie sehen, dass beide in der Mitte dieser Leinwand oder Kunsttafel ausgerichtet sind. Wenn ich nun einen von ihnen verschieben möchte, wähle ich die Ebene von hier aus aus, und ich kann sie verschieben. Wenn Sie möchten, dass sie sich in einer Zeile bewegen, können Sie „Shift“ drücken und Sie können sehen, dass es seinen Platz behält. Es bewegt sich nicht in einer zufälligen Position. Drücken Sie „Umschalttaste“, während Sie nach oben oder unten ziehen, damit die aktuelle Position beibehalten wird, oder wenn sie sich in der Mitte befindet, bleibt sie in der Mitte Ihrer Leinwand. Dies ist eine Option. Jetzt können Sie sehen, ob ich will, dass sie in den vertikalen Zentren sind, ich werde sie gruppieren. Jetzt können Sie sehen, dass ich hier keine Hintergrundschicht habe. Alle diese Achsen arbeiten mit zwei Objekten. Ich muss noch ein anderes Objekt haben. Was ich tun werde, ist, dass ich „Control A“ drücken werde, um die gesamte Leinwand auszuwählen, und jetzt werde ich diese Gruppe ausrichten. Sie können sehen, sobald ich dies ausgewählt habe, sind die oberen Ausrichtungsoptionen aktiviert. Ich werde „Control“, „Alt“ und „V“ drücken. Jetzt können Sie sehen, dass sie vertikal ausgerichtet sind. Ich werde diese verstecken, damit Sie sie deutlich sehen können. Beide sind vertikal in der Mitte dieses Kunsttafels ausgerichtet. Jetzt werde ich es deaktivieren, indem ich M drücke und einmal hier drüben klicke. Dies sind die häufigsten Verknüpfungen, die wir die meiste Zeit verwenden werden. Jetzt einige der Verknüpfungen können Sie sie von hier lernen, Sie können einfach hier klicken und Sie können Lasso Tool sehen. Dies wird auch für die Auswahl verwendet. Sie können sehen, wir werden einige von ihnen wie dieser Stift Werkzeug, Textwerkzeug, und dann dieses Pfadauswahlwerkzeug, das ist eine Tastenkombination, diese Formwerkzeuge, die wir werden sie viel verwenden, Rechteckiges Werkzeug für Sie. Dies sind alle Verknüpfungen. V für dieses Move Tool, zurück zu diesem Cursor. Dies sind die Abkürzungen, die wir viel Zeit verwenden werden. Jetzt noch eine Abkürzung. Wir richten es in unserer benutzerdefinierten Photoshop-Kurzbefehlsstunde ein. Jetzt werden wir es benutzen. Zum Beispiel, wenn ich diese beiden Ebenen in ein Smart-Objekt konvertieren möchte. Ich werde das Smart-Objekt später besprechen, also mach dich nicht verwirrt oder besorge dich darüber. Sie sind im Grunde ein bisschen entgegengesetzte Farben und sie vibrieren. Jetzt sind sie gut zu gehen. Jetzt sind das die beiden Schichten, die ich mit beiden ein intelligentes Objekt machen werde. Ich werde beide auswählen. Ich werde „Alt F5" für intelligentes Objekt drücken. Es war unsere Tastenkombination. Jetzt können Sie sehen, sein Symbol wurde hier geändert, dieses Thumbnail-Symbol. Sie können die Miniaturansicht von hier aus erhöhen, indem zu Panel-Optionen gehen und Sie können die Größe so vergrößern. Jetzt können Sie sehen, dass ich die Größe vergrößert habe, aber wenn wir UI-Designs entwerfen, haben wir viele Ebenen, vielleicht mehr als 100 Ebenen. Wir verwenden nicht zu viel größere Thumbnail-Größe. Wir könnten diesen oder vielleicht diesen benutzen. Jetzt einige der zusätzlichen Optionen können Sie sie von hier erhalten, rechten Maustaste auf eine der Ebenen wie diese; Quick Export als PNG, Export als, Convert to Smart Object. Aber ich ziehe es vor, einige der Tastenkombinationen zu verwenden , die sehr praktisch sind und wir verwenden sie sehr viel. Eine weitere verbleibende, die wir in unseren benutzerdefinierten Verknüpfungen eingerichtet haben, die Tile All Vertical war. Nun, wie werden wir es benutzen? Wir müssen ein oder zwei Dateien für Photoshop geöffnet haben. Ich werde eine neue Akte öffnen, eine neue Kunsttafel hier drüben. Grundsätzlich arbeite ich jetzt in zwei Kunsttafeln. Wenn ich von hier nach hier gehe, kann ich nicht sehen, was ich in diesem hatte. Nun, um sie klar zu sehen oder ein Objekt von einer Leinwand auf eine andere zu ziehen, werde ich Alt, Control und F10 verwenden, und Sie können sehen, wie Photoshop sie vertikal gekachelt hat. Wenn ich nun auf dieses Artboard klicke, können Sie diese Ebene sehen oder dieses Smart-Objekt wurde ausgewählt. Wenn ich es hierher ziehen möchte, kann ich es ziehen und einfügen. Jetzt können Sie sehen, dass es auf dem nächsten Kunstboard kopiert wurde. Aber das Problem ist, dass es seinen aktuellen Standort verloren hat, und dieses Kunstboard ist, wo es war. Dieser Ort war etwas höher. Wenn ich nun die gleiche Position behalten möchte, drücke ich beim Ziehen „Shift“. Drücken Sie „Umschalttaste“, während Sie es ziehen und loslassen. Jetzt können Sie sehen, dass es seine aktuelle Position erreicht hat. Nun, so arbeiten wir in mehreren Leinwänden, und wenn ich einige Bilder oder etwas von einer Leinwand oder einem Kunstboard auf eine andere ziehen möchte. Jetzt denke ich, ich habe diese Tastenkombinationen fast fertig. Zum Vergrößern drücken Sie zum Vergrößern die Strg-Taste plus, und drücken Sie zum Verkleinern die Strg-Taste Minus. Zum Beispiel habe ich mein Design vergrößert und möchte es ein wenig nach rechts oder links ziehen. Wenn ich versuche, mit dem Mauszeiger zu ziehen, wird es diese Ebene oder Smart-Objekt herum verschieben. Ich will das nicht, ich will hier rüber kommen, diesen Bereich sichtbar machen. Ich werde die Leertaste drücken und es weiter drücken und dann werde ich es so ziehen. Jetzt können Sie sehen, dass ich in die obere linke Ecke meiner Kunsttafel gezogen bin. So bewegen wir uns manchmal, wenn wir in unserem Design gezoomt haben. Dies ist auch sehr häufig Zoomen, Verkleinern und dann verschieben Sie Ihre Leinwand. Jetzt denke ich, die meisten dieser Verknüpfungen wurden diskutiert. Ich denke, wir sind bereit, zur nächsten Vorlesung zu gehen. 26. Die Masken in Photoshop verwenden: In dieser Lektion werde ich über Ebenenmaske sprechen. Ebenenmaske ist eine weitere Technik, um verschiedene Teile Ihrer UI-Design-Elemente zu verbergen, oder manchmal Hero-Bereiche oder Bilder, die in Hero-Bereichen von Websites verwendet werden. Fangen wir an, es zu lernen, okay? Ich habe bereits ein Bild hier in Photoshop geöffnet. Jetzt werde ich auf die „Hintergrundebene“ doppelklicken, um es einfache Ebene zu machen. Ich werde auf dieses kleine Symbol klicken, hier ist es „Hinzufügen“, wenn Sie den Mauszeiger darüber zeigen, wird es als Ebenenmaske hinzufügen angezeigt. Was es tut, ist, dass, sobald Sie diese Ebenenmaske aktivieren, stellen Sie sicher, dass Sie darauf geklickt haben. Also dieser hier ist aktiv, nicht dieser. Sie können sehen, dass es rechteckige Seitenleisten über. Also sollte es hier drüben so aktiv sein. Dann können Sie Ihr Pinselwerkzeug oder ein anderes Werkzeug greifen und Sie können hier anfangen zu malen. Sie können sehen, dass meine Primärfarbe auf „Schwarz“ und meine Hintergrundfarbe Vordergrundfarbe ist „Schwarz“ und die Hintergrundfarbe ist „Weiß“. Im Moment male ich mit Schwarz. Was auch immer ich mit Schwarz malen werde, denken Sie im Grunde daran, dass Schwarz alles verbergen wird. Also verbirgt Dunkelheit alles und Weiß zeigt alles. Ich werde meine Pinselgröße ein bisschen mehr einstellen. Ich drücke „Klammertasten“ auf der Tastatur. Es ist eine Abkürzung zum Vergrößern und Verringern der Größe des Pinselwerkzeugs. Okay, noch eine Sache, die Sie sehen müssen, dass diese Deckkraft auf „70 Prozent“ gesetzt ist. Also, wenn Sie sich total verstecken wollen, dann müssen Sie es auf „100 Prozent“ setzen. Also, wenn ich hier drüben gebürstet habe, wird es alles verbergen. Jetzt noch eine Sache, wenn ich sehen möchte, welche Pinselspitze ich verwende, muss ich hier rüber klicken. Sie können sehen, es ist kein harter Pinsel, es ist ein weicher Pinsel mit gefiederten Ecken. Also werden wir zu „Wählen“ eines dieser harten. So können Sie jetzt den Unterschied sehen. Okay, lassen Sie uns den ganzen Bereich hier drüben auslöschen , Stuhl auch. Okay, ich werde nicht im Detail gehen, um ein Bild völlig bereit für Ihren Heldenbereich oder Bildbearbeitung und Reinigung es Hintergründe. Aber das ist die grundlegende Technik. Sie können vergrößern und verschiedene Bereiche anzeigen, und Sie können die Pinselgröße erhöhen oder verkleinern, um eine höhere Genauigkeit wie diese zu erzielen. Eine weitere Sache ist, dass es bei der Verwendung von Ebenenmaske zerstörungsfrei ist. Zum Beispiel, wenn ich einfach versehentlich hier drüben klicke und diesen Bereich entfernen und ihn zurückhaben möchte, dann werde ich nur diese Farben wechseln und ich werde es mit Weiß malen. So können Sie sehen, dass mein Stuhl wieder da ist. Ich kann das Bild so klären. Sie können „X“ drücken, um die Farben zu verschieben. Sie können hier drüben sehen, während ich „X“ drücke, sie wechseln miteinander. Also werde ich wieder auf die „Schwarze Farbe“ klicken und es auswählen und so malen. Dies ist eine sehr grundlegende Technik, um Bilder wie diese zu bereinigen. Dies wird im Grunde als Ebenenmaske bezeichnet. Sie können Ihr Bild sehen, indem Sie Ebenenmaske deaktivieren und Sie können das ganze Bild wie folgt sehen und Sie können es wieder aktivieren. Dies hilft uns wirklich einige Male, wenn wir Bilder bereinigen oder einige Teile der Bilder verstecken müssen. Wir können auch so etwas wie dieses tun, ich werde diesen Bereich auswählen, zum Beispiel, dieses hier bis hier. Ich kann mein „Paint Eimer Tool“ auswählen und einfach hier drüben klicken und alles ausblenden. Also, im Grunde habe ich einfach die schwarze Farbe hier rüber fallen gelassen. Manchmal müssen wir so etwas tun, um den rechteckigen Bereich zu verbergen oder einen Bereich von einem Bild oder so etwas zu subtrahieren. Dann verwenden wir schnelle Technik. Wir greifen nicht unser Pinselwerkzeug und malen und malen weiter. Wir treffen eine Auswahl und holen unser Paint Eimer Tool und lassen die schwarze Farbe hier drüben fallen. Also denke ich, es geht um Layer-Maske und hoffe, Sie in der nächsten Vorlesung zu sehen. 27. Verwendung von Clip-Maske: In dieser Lektion werde ich über Clipping Mask sprechen. Mal sehen, was Clipping Mask ist und wie wir es in unserem UI Design Workload Prozess verwenden. Im Grunde funktioniert Clipping Mask wie eine Ebenenmaske. Sein Zweck besteht also im Grunde darin, einige Teile der Ebene oder eines Bildes zu verbergen. Lassen Sie mich Ihnen an einem Beispiel zeigen, wie es funktioniert. Ich habe dieses Eclipse-Tool genommen, „U“ gedrückt, und ich habe diese Finsternis gezeichnet, indem ich Shift drücke, um es proportional zu halten. Ich werde es so zentrieren. Jetzt werde ich ein kostenloses Bild für die Demonstration mitbringen. Zum Beispiel, dieses Bild, ich werde es einfach in Photoshop wie folgt ziehen. Im Grunde ist es jetzt ein intelligentes Objekt, also werde ich es ändern, drücken Sie „Enter“. Nun, dieses Bild befindet sich oben in der Finsternis, die Finsternis befindet sich hinter dieser Ebene. Was also im Grunde Clipping Mask tun, wird es dieses Bild in dieser Finsternis enthalten. Wie werden wir es tun? Drücken Sie auf der Tastatur „Alt“ und bewegen Sie den Cursor hier zwischen diesen beiden Ebenen. Der untere ist also im Grunde der Container und der obere ist im Grunde der Teil, den wir zeigen möchten. Also, zwischen dem Container und der Basisschicht, werden wir „Alt“ halten und einmal klicken. Jetzt können Sie sehen, dass es nur den Teil dieses Bildes zeigt, der sich im Grunde in dieser Finsternis befindet. So kann ich das einfach bewegen, ziehen und bewegen, und so erstellen wir verschiedene Avatar-Bilder und verschiedene Profilbilder auf unseren Websites in unserem UI-Design. Also im Grunde Eclipse-Tool, können wir jede Form hier verwenden. Wir können dieses Werkzeug in dieser Technik der Clipping Mask in vielerlei Hinsicht verwenden. Ich hoffe, Sie haben meine Lektion genossen und etwas Neues gelernt. Fahren wir mit der nächsten Vorlesung fort. 28. Challange → Schnittmaske: Hallo an alle und willkommen zu meiner neuen Herausforderung. Es ist im Grunde eine Übung Herausforderung für Clipping Maske. Ich habe nur Clipping-Maske in diesem Beispiel verwendet, also versuchen Sie, den gleichen Effekt mit Clipping-Maske zu erstellen. Lassen Sie mich Ihnen ein paar Hinweise geben. Dies ist im Grunde ein Bild in einer Clipping-Maske, und diese schwarze Farbe, die Sie sehen können, es ist eine andere Form dahinter. Nun ist dies Open Sans Schriftart und dies ist eine Schaltfläche und dieser Bereich ist auch abgeschnitten. Versuchen Sie, so etwas mit Clipping-Maske zu produzieren, und ich werde die Lösung in der nächsten Vorlesung posten. Wir sehen uns bald. 29. Die Verwendung von Smart Objects in Photoshop: In dieser Vorlesung werde ich Ihnen die Verwendung von intelligenten Objekten zeigen und wie wir sie in unserem UI-Design verwenden werden und welche Vorteile es uns beim UI-Design bieten kann. Lassen Sie mich zuerst mit der Erstellung der Symbolschaltfläche beginnen. Wenn ich eine Schaltfläche wie diese mache, lassen Sie mich seine Farbe in Blau ändern, damit sie leicht sichtbar ist. Jetzt werde ich Shift drücken. Nun, das ist ein einfacher Knopf. Ich werde beide auswählen, um sie auszurichten. Nun, eine Möglichkeit, es zu gruppieren, wir werden Control G drücken, um es zu gruppieren und zu bewegen. Wir können es auch duplizieren, indem Sie die Alt-Taste drücken und es bewegen. Wir haben zwei doppelte Gruppen, und sie sind im Grunde gleich. Was ist, wenn ich möchte, dass sich beide gleichzeitig ändern? Wenn ich drei oder vier Tasten habe und ich ihre Farbe ändern möchte, muss ich zu jeder Ebene gehen und ihre Farbe immer wieder ändern. Um dies in unserem UI-Design zu vermeiden, wo wir vielleicht einfach einen primären Controller oder eine primäre Taste haben , die rund um unsere UI-Schnittstelle dupliziert wird , können wir diese Gruppe konvertieren, mit der rechten Maustaste über hier im Ebenenbedienfeld und in Smart Object konvertieren, oder verwenden Sie Alt F5, die unsere benutzerdefinierte Tastenkombination war. Grundsätzlich wurde es jetzt in ein intelligentes Objekt verwandelt. Nun, wie werden wir es in unserem UI-Design verwenden? Zuerst werden wir es drei oder vier Mal duplizieren. Du verstehst die Idee, wenn ich etwas ändere. Wenn ich all diese vier Schaltflächen ändern möchte, die sich beispielsweise in meinem Webdesign oder Web-App an verschiedenen Orten befinden, werde ich auf jeden klicken, jemanden auswählen, auf diesen Ebenenbereich doppelklicken und Jetzt können Sie sehen, dass ich beide Ebenen hier drüben habe. Nun, wenn ich etwas ändern möchte, zum Beispiel, ändere ich seine Farbe in vielleicht gelb oder orange oder dunkelblau, matt blaue Farbe, drücke ich „OK“, und ich werde es schließen und speichern, „Ja“. Jetzt haben alle kopierten oder duplizierten Smart-Objekte die gleiche Farbe wie die Schaltfläche. Dies ist eine Möglichkeit, unsere Schaltflächen zu verwalten, wo wir vier oder fünf haben, oder vielleicht unterschiedliche gleiche Tasten Ebenen. Wenn die Schaltflächen gleich sind, können wir dieses Smart-Objekt verwenden, um sie einfach zu verwalten. Ein weiteres Beispiel oder die Verwendung dieser intelligenten Objekte ist, zum Beispiel, wir haben Inhalt Box wie dieses und wir haben Text darin geschrieben, zum Beispiel, „Ich bin eine Content-Box“, so etwas. Lassen Sie mich noch etwas hinzufügen, wie dieses. Jetzt können Sie sehen, dass es zu einer Content-Box wird. Ich werde sie gruppieren und ich werde ein intelligentes Objekt erstellen, indem ich Alt und fünf drücke. Nun, es ist ein intelligentes Objekt. Wenn ich es dupliziere, vielleicht dreimal so, lass mich einfach alle anderen löschen, damit wir nicht verwirrt werden. Jetzt habe ich es in drei verschiedene Content-Boxen dupliziert. Sie könnten dieses Muster auf vielen Websites gesehen haben, auf denen wir drei vorgestellte Boxen oder drei Funktionen unseres Produkts oder so etwas haben. Die meiste Zeit haben sie nur ein Element wie Symbol, das sich in allen von ihnen ändert und das Muster ist fast das gleiche. Die Farben und die Schriftgrößen, alles ist gleich. Nur um Beispiel zu veranschaulichen: Wenn ich den Inhalt dieses oder die Farbe dieses ändern möchte , werde ich dies auswählen und einfach seine Farbe in gelb oder vielleicht grau oder hellgrau ändern . Ich drücke „OK“ und „Ja“, speichern Sie es. Da gehen wir hin. Dies ist eine weitere Verwendung von Smart-Objekten. Normalerweise wird es vielleicht wegen des Problems nicht verwendet , dass wir keinen anderen Inhalt in den Smart-Objekten haben können. Ich rate Ihnen, dass Sie keinen Text oder anderen Inhalt verwenden , der in den Smart-Objekten geändert werden soll. Wenn Sie ein Smartobjekt erstellen müssen, behalten Sie einfach die Hintergrundebenen und Stile bei und löschen Sie den Text, damit der Inhalt in allen von ihnen geändert werden kann. Nun, sie sind gut zu gehen. Ich denke, Sie verstehen die Idee, dass kein Element oder eine Ebene verwendet , die in anderen Objekten anders sein wird. Eine Verwendung ist dies. Eine andere Sache ist, dass Sie auch eine Kopie dieses Objekts erstellen können, indem Sie mit der rechten Maustaste klicken und „Neues Smart Object via Copy“ drücken. Wenn Sie ein neues Smartobjekt per Kopie erstellen, werden diese nicht miteinander verknüpft. Sie sind irrelativ. Wenn Sie hier die Farbe ändern, wie diese, wird es nur in diesem geändert werden. Alle drei, sie sind verknüpft, aber dieses ist anders, weil es von diesem neuen Smart Object per Copy erstellt wurde. Wir haben eine weitere Kopie erstellt und es war ein neues Smart-Objekt, so dass sie nicht verknüpft sind. Hier geht es um intelligente Objekte und wie wir sie in unserem UI-Design verwenden. Setzen Sie niemals Ihre Inhalte, die editierbar sind, ändern oder ändern oder in alle anderen Smart-Objekte geändert werden. Halten Sie einfach die Hintergründe, und Hintergrundfarben und Stile oder Schatten in diesem intelligenten Objekte. Sie sind nützlich und Sie können sie in Ihren UI-Entwurfsprojekten verwenden. Hier geht es um intelligente Objekte. Ich hoffe, Sie haben etwas Neues gelernt. Gehen wir zur nächsten Vorlesung. 30. Verknüpfte Smart-Objekte in Photoshop: In dieser Lektion werde ich über Verknüpfte Smart Objects sprechen und wo sie nützlich sind. Normalerweise, wenn wir Linked Smart Objects verwenden, sind sie im Grunde für die Apps oder Websites, auf denen wir vier oder fünf verschiedene Seiten derselben App oder derselben Website entwerfen müssen. Was wir sie im Grunde nutzen werden, ist zum Beispiel, ich habe diese Website und ich entwerfe die Hauptseite davon. Zum Beispiel, ich erstelle einfach einen Header hier drüben schnell. Ich habe diese Header-Datei und ich habe verschiedene Links hier über uns. Lassen Sie mich einfach diese Schicht töten. Jetzt werde ich mein Textwerkzeug verwenden, drücken Sie die Umschalttaste, damit es dieser Ebene nicht folgt. Es ist unabhängig von dieser Schicht. Klicken Sie einmal und hier haben wir, über uns, dann kontaktieren Sie uns, und dann Produkte. Es ist nur eine Dummy-Website, also machen Sie sich keine Sorgen um Layout oder irgendetwas anderes. Es ist nur, um Ihnen das Konzept zu geben, wie wir Linked Smart Objects in unseren Projekten einsetzen werden. Das sind drei Links. Lassen Sie mich einfach ein Dummy-Logo hier drüben platzieren. Das ist unser Logo. Nun, zuerst, was wir tun werden, ist, dass wir diesen Header, all diese Links und diesen Hintergrund in einem Smart Object speichern . Zuerst müssen Sie es in ein Smart Object konvertieren, dann müssen Sie es in verknüpfte Smart-Objekte konvertieren. Sie sehen die Option „In verknüpft konvertieren“. Wenn Sie darauf klicken, wird es Ihnen eine Option geben, diese Datei zu speichern. Grundsätzlich speichern wir diesen Teil unseres Designs in eine andere Datei, damit wir ihn in alle von uns entworfenen Dateien einbetten können. Wenn wir Änderungen in einem von ihnen vornehmen, wird es in allen von ihnen geändert. Lassen Sie mich Ihnen nur an einem Beispiel zeigen. Ich habe es mit dem Namen Ellipse 1 gespeichert. Jetzt werde ich diese Photoshop-Datei speichern. Zum Beispiel werde ich es jetzt auf dem Desktop speichern. Mein Desktop ist sehr chaotisch, aber du musst es mit mir ertragen. Wir nennen es nur Hauptseite. Hauptseite ist in Ordnung. Geben Sie mir einen Titel hier drüben, damit wir wissen, dass es Hauptseite ist. Hauptseite hier drüben. Wir werden es schwarz färben. Also Hauptseite oder maing-Seite, es spielt keine Rolle. Jetzt werde ich eine neue Datei mit den gleichen Dimensionen öffnen und ich werde hier verlinkt platzieren. Ich möchte den gleichen Header hier drüben platzieren. Nun ist dies die Datei, die ich Ellipse 1 gespeichert habe, die im Grunde der Header war. Jetzt können Sie sehen, dass es hier drüben platziert wurde. Ich kann es oben bewegen, weil es oben war, und ich werde drücken „Enter“. Jetzt können Sie sehen, dass es hier drüben importiert wurde. Wenn ich das als unsere Produktseite speichern werde, okay, jetzt ist dies im Grunde Produktseite. Lassen Sie mich beheben, dass r. Nun, dies ist unsere Produktseite, und das sind einige Produktbilder. Das ist ein bisschen hässliche Seite, aber ich denke, es ist in Ordnung zu bekommen, was es jetzt tun wird. Jetzt werde ich es als unsere Produktseite speichern. Während meines Designs dachte ich, dass ich diese Farbe auf vielleicht grün ändern sollte. Mein Logo wurde geändert. Ich werde es speichern, drücken Sie „OK“. Jetzt können Sie sehen, dass es bereits automatisch in der anderen Datei geändert wurde. Aber was, wenn ich nur verwende oder nur eine Datei geöffnet habe? Ich arbeite an der Hauptseite und die andere Datei ist, gerade jetzt, nicht öffnen Sie den Photoshop. Ich klicke darauf, und ich ändere die Hintergrundfarbe zu blau oder vielleicht gelb, oder vielleicht grau oder vielleicht grau dunkel, ein bisschen grau. Ich werde die Ellipsenfarbe auf diese ändern, vielleicht auf diese. Jetzt werde ich es speichern und klicken Sie auf „Ja“. Sie können sehen, dass es in dieser Datei geändert wurde, die bereits geöffnet wurde, es ist mainpage.psd Datei. Wenn ich es schließe und dann meine Produktseite öffne, lassen Sie mich meine Produktseite öffnen. Jetzt können Sie sehen, hier haben wir das alte Design, es wurde nicht aktualisiert. Aber Sie können ein gelbes Symbol hier in Ihrem Ellipse Linked Smart Object sehen. rechten Maustaste darauf, nicht auf der Miniaturansicht, sondern auf der Ebene, und Sie können die Optionen anzeigen : Geänderten Inhalt aktualisieren oder Alle geänderten Inhalte aktualisieren. Klicken Sie darauf und Sie sind gut zu gehen. Nun, das ist eine sehr hübsche Funktion von Photoshop. Sie können es in Ihrem Kopfzeilendesign oder im Fußzeilendesign Ihrer Websites verwenden, da sie normalerweise auf allen Seiten gleich bleiben. Oder selbst wenn Sie eine App entwerfen, haben Sie fast die gleichen Kopf- oder Fußzeilenhintergründe oder einige der Ebenen von allen. Dies ist im Grunde die Verwendung von verknüpften Smart Objects. Fahren wir mit der nächsten Vorlesung fort. 31. Die Nutzung von Layer in Photoshop: Heute werden wir etwas über Layer-Comps lernen. In diesem Kurs habe ich gerade vergessen, diese Lektion aufzunehmen. Lassen Sie uns also lernen, was Layer-Comps sind und wie wir sie im UI-Design verwenden werden . Lasst uns loslegen. Was Layer-Comps ist, im Grunde, sie sind verschiedene Layer-Kompositionen und wir können von einem zum anderen wechseln. Wenn Sie kein Layer-Comp-Fenster sehen, gehen Sie zu Fenster und klicken Sie hier auf Layer-Comps. Dies ist im Grunde Layer Comps Fenster Panel hier drüben. Nun, was wir tun werden, ist, dass wir eine einzelne Schaltfläche mit verschiedenen Zuständen erstellen. Wie wenn Sie eine Schaltfläche auf einer Website bewegen, ändert sie ihre Farbe. Also jede Schaltfläche, wenn Sie beliebige UI-Daten in verschiedenen Zuständen wie deaktivierte Schaltfläche entwerfen, und schweben, und gedrückte Taste, werden wir drei Zustände erstellen. Eine ist eine einfache Schaltfläche, dann, Hover, und dann deaktivieren. Ich habe ein abgerundetes Rechteck verwendet. Verwenden Sie diese Farbe, jede Farbe, die Sie mögen. Dann werden wir nur einen Text darüber verwenden, Button Normal. So, und dann werden wir sie ausrichten. Lassen Sie uns sie so ausrichten. Bewegen Sie es einfach in die Mitte. Sie gruppieren sie so, dass sie einfach auszurichten sind. Nun, das ist unser Button Normal, BTN-normal. Dann duplizieren Sie diese Gruppe, Control G, dann haben wir den Hover-Zustand. Nun, im Hover-Zustand, wählen Sie diese Ebene und wir werden ihre Helligkeit ein bisschen nach oben ändern, 100 Prozent, so. Sie können sehen, hier ist die normale, hier ist die Hover-Schaltfläche. Dann werden wir die deaktivierte Schaltfläche verwenden. Manche benutzen das Semikolon so. Bewegen Sie den Schaltflächenstatus so, und normaler Schaltflächenzustand wie dieser. Jetzt werden wir Layer-Comps verwenden. Ich denke, ich habe vergessen, diesen deaktivierten Button zu stylen. Wir werden diese graue Farbe für deaktivierte Taste verwenden, und ich denke, alles sieht gut aus. Dies ist deaktiviert und dies ist Hover und das ist normal. Nur, ich denke, wir sollten den normalen Knopf etwas dunkler machen, weil er sich nicht sehr von unserem Hover-Zustand unterscheidet. Jetzt haben wir drei Knöpfe. Jetzt werden wir einen Layer-Comp wie diesen erstellen. Wir können Sichtbarkeit, Position und Aussehen, drei Eigenschaften von Layern einschließen . Wenn ich die Position ändere, wird sie in einer anderen Ebenenkomp angezeigt. Im Moment denke ich für Sichtbarkeit und Aussehen sind mehr als genug. Wir werden verwenden, dies ist normaler Zustand. Dann werden wir eine weitere mit dem Hover-Zustand erstellen. Dann werden wir, Hover Zustand hat so etwas, also werden wir es so aktualisieren. Das ist unser Hover-Status. Dann werden wir eine deaktivierte verwenden, und dies wird deaktiviert Zustand sein. Das ist also deaktiviert, das ist Hover, und das ist normal. Sie können sehen, wenn ich von einer Ebene comp zu einer anderen wechseln, es ändert oder verbirgt die anderen beiden Ebenen. Also muss ich sie nicht von hier verbergen, einander. Auf diese Weise werden wir Layer-Comps im UI-Design verwenden. Wir können ein Drop-Down-Menü wie das haben. Wenn jemand so auf unser Menü klickt und dann zeigen wir das Drop-down-Menü an. Das ist normal, und dann ist das Drop-down-Menü, so etwas. Wenn Sie nun Ihre Layer-Comps in verschiedene Dateien exportieren möchten, können Sie auch zu dieser Datei wechseln und exportieren. Dann können Sie auf diese Ebene Comps in Dateien klicken. Jetzt können Sie das Ziel auswählen, an das Sie sie exportieren möchten. Ich kann sie auf dem Desktop exportieren und „OK“ drücken. Dann werde ich es benennen Tasten und Dateityp PSD sein, und drücken Sie „Ausführen“. Alle drei Zustände wurden in PSD-Dateien konvertiert. Sie können hier sehen Button 000 normal, Button 0001 Hover Status und Button 0002 deaktivierter Zustand. Also, wenn ich das öffne, können Sie sehen, dass es nur den deaktivierten Zustand hat. Eine weitere Sache ist, dass Photoshop alle anderen Ebenen damit speichert. Stellen Sie also sicher, dass dies nicht das ist, was Sie wollen. Ich denke, sie sind unnötig, aber ich weiß nicht, was die Logik dahinter ist. So funktionieren diese Layer-Comps und wie Sie verschiedene Layer-Comps in verschiedene PSD-Dateien exportieren. Hier geht es heute um Layer-Comps, und ich hoffe, Sie haben diesen Vortrag genossen. Fahren wir mit der nächsten Lektion fort. 32. Drop Schatten-Effekte meistern: In dieser Lektion zeige ich Ihnen, wie Sie Ihre Schlagschatten-Ebeneneffekte verwenden und wie Sie damit Schaltflächen erstellen. Also werde ich ein abgerundetes Rechteck mit vier Pixel-Eckenradius erstellen. Ich werde einen großen zeichnen, damit Sie die Effekte leicht sehen können. Ich werde diese grüne Farbe auswählen. Jetzt habe ich diese Ebene ausgewählt. Ich gehe zu Ebene, und dann Ebeneneffekte , oder Sie können auf diese Ebene klicken und dann können Sie das FX-Symbol hier sehen, klicken Sie darauf und klicken Sie auf „Schlagschatten“. Jetzt können Sie sehen, dass ich meinen Schlagschatten so gesetzt habe. Es ist ein sehr subtiler Schlagschatten. Nun, im Grunde ist dies der Mischmodus Ihres Schlagschattens. Wir verwenden nicht anders als normal. Es ist besser, weil wir unsere Ebenen in CSS konvertieren müssen. Dann haben wir Global Light, das ist im Grunde das Photoshop Global Light, wo das Licht an der Spitze 90 Grad kommt. Also, wenn ich es hier ändere und ich eine andere Ebene habe, werden alle Schatten an dieses globale Licht angepasst. Wenn Sie also eine benutzerdefinierte Schaltfläche erstellen möchten, deaktivieren Sie diese Option, und Sie können den Schatten an die gewünschte Stelle verschieben. Ich werde den Schatten hervorheben, damit du sehen kannst, wie er sich bewegt. Wenn ich nun den Abstand des Schattens ändere, können Sie sehen, wie weit er von oben auf dieser Ebene geht , weil das Licht hier drüben ist. Wenn ich also die Lichtrichtung ändere, ändert sich auch der Schatten. Außerdem ist dies verbreitet, was im Grunde ist, wie viel es sich ausbreiten wird. Also unsere Größe ist 25 und die Verbreitung beträgt 100 Prozent. Es ist also ein undurchsichtiger Schatten. Daher verwenden wir diese Spread-Option normalerweise nicht. Wir passen nur den Abstand, Größe und den Winkel an. Am wichtigsten ist diese Deckkraft, um verschiedene Schatteneffekte zu erstellen. Also werde ich die Größe ändern. So können Sie jetzt sehen, dass es ein bisschen verschwommener ist. Ich werde es nach oben bewegen und Opazität ein bisschen mehr, und ich werde den Winkel auf 85 ändern. Jetzt können Sie sehen, wie nur dieser Schlagschatteneffekt eine Menge Tiefe in Ihren Schaltflächen und verschiedenen Grafikdesignelementen erzeugt . Nun, noch eine Sache in Photoshop CC 2015, können Sie mehr Schlagschatten anwenden, wie ich jetzt einen anderen angewendet habe. Ich werde es etwas dunkler machen. Ich werde den Winkel auf 90 ändern. So etwas wie das. Jetzt können Sie sehen, dass ich mehrere Schatten habe und sie erzeugen einen sehr deutlichen Effekt, und Licht kommt von oben. Okay, hier geht es um Schlagschatten, und ich schätze, du hast etwas Neues gelernt. Fahren wir mit der nächsten Vorlesung fort. 33. Verwendung von Innerer Shadow: Hallo, Jungs. In dieser Lektion werde ich Ihnen etwas über innere Schatten erzählen. Lassen Sie uns sehen, wie diese inneren Schatten mit unseren Schaltflächen an verschiedenen UI-Elementen funktionieren. Jetzt beginne ich mit der letzten Vorlesung. Ich werde einen neuen Effekt anwenden, der innere Schatten ist. Nun, im Grunde ist es der innere Schatten, aber wir verwenden es auf verschiedene Arten. Jetzt können Sie hier sehen, haben wir Mischmodus auf Bildschirm eingestellt, aber Sie können normal verwenden, wenn Sie möchten. Sie können die Deckkraft ändern. Sie können sehen, ich habe die weiße Farbe ausgewählt. So kommt es im Grunde aus 145 Winkel hinein. Ich werde den Winkel auf 90 ändern, was meistens in unserem UI-Design verwendet wird, fast 99,99 Prozent. Lassen Sie mich also die Deckkraft und die Größe auf 2 Pixel reduzieren. Jetzt können Sie sehen, dass es einen etwas kantigen Effekt hat, es ist ein bisschen erhöht hier drüben. So benutzen wir unseren inneren Schatten. Ich muss die Größe auch auf Null reduzieren, weil die Größe im Grunde die Unschärfe ist, können Sie die Unschärfe in unserem inneren Schatten sehen. Also verwende ich im Grunde 1 Pixel oder weniger als das, und ich verwende weiße Farbe. So habe ich meinen inneren Schatten angewendet. Alle anderen Dinge sind im Grunde die gleichen, wie ich Ihnen in meiner vorherigen Vorlesung erzählt habe, die Schlagschatten ist. Also Opazitätswinkel und alles andere ist gleich. Die Unterschiede, dass innere Schatten es wird von innerhalb der Form kommen. Es wird nicht von der Form fallen. Okay, hier geht es nur um inneren Schatten. Fahren wir mit der nächsten Vorlesung fort. 34. Die Wirkung der Stroke verwenden: Hallo an alle. Jetzt werde ich jetzt über den Strich-Layer-Effekt diskutieren. In unserem UI-Design verwenden wir üblicherweise innere Schatten-, Schlagschatten- und Stricheffekte in Kombination, um verschiedene Schaltflächen und verschiedene UI-Elemente von Effekten zu erstellen. Jetzt werden wir einen weiteren Effekt hinzufügen, der im Grunde Schlaganfall ist. So Schlaganfall haben eigentlich drei verschiedene Arten, außen und innen und dann haben wir in der Mitte. Normalerweise verwenden wir draußen und einige Zeit im Inneren. So können Sie jeden Effekt verwenden, den Sie wollen. Sie können eine Farbe auswählen, die etwas heller oder dunkler ist als Ihre ursprüngliche Tastenfarbe. Also im Moment werde ich hier eine etwas dunklere Farbe auswählen. Ich habe die Helligkeit der Farbe im Wesentlichen reduziert. Zuerst waren es 65 Prozent, und jetzt habe ich es auf fast 60 Prozent reduziert. Wenn Sie es auf 55 Prozent reduzieren, wird es eine viel deutlichere Darstellung des Stricheffekts sein. Wenn ich also die Größe vergrößere, können Sie sehen, dass die Größe innerhalb der Schaltfläche zunimmt. Dies sind verschiedene Mischmodi und wir werden die meisten von ihnen nicht verwenden. Also könnten wir diese Deckkraft verwenden, aber ich denke, Sie sollten sich nicht mit diesem Mischmodus und Opazität verwirren. Nun verwenden einige Leute diesen Farbverlauf in diesem Stricheffekt. Ich empfehle es nicht, weil ich denke, dass wir diesen Gradienteneffekt nicht in unserer CSS- oder HTML-Codierung darstellen können . Es wird also sehr schwierig für die Programmierer sein, rein CSS oder codierte Schaltfläche so zu entwickeln. Vermeiden Sie also, Farbverläufe zu verwenden, verwenden Sie einfach Farbe und setzen Sie sie auf zwei oder vier Pixel und ich denke, es wird sehr schöner Effekt sein , wenn ich den inneren Schatten etwas mehr in sich schiebe, so. Jetzt können Sie sehen, wie es sich herausstellt. Das ist alles über Schlaganfall von Effekten, jetzt gehe ich zur nächsten Vorlesung über. 35. Die Verwendung von Ebenenstilen wiederverwenden: Lassen Sie uns über die Wiederverwendung von Ebenenstilen sprechen. Also habe ich einige Ebenenstile auf dieses Feld angewendet. Wenn ich sie also wiederverwenden oder auf eine andere Ebene oder in anderen Projekten anwenden möchte, muss ich diesen Schatteneffekt möglicherweise immer wieder erzeugen. Ich muss diesen Layerstil speichern. Also, wie kann ich das machen? Wechseln Sie zu diesem Ebenenfenster und wählen Sie die Ebene aus, auf die ich die Ebenenstile angewendet habe Doppelklicken Sie auf diese Effekte. Nun können Sie sehen, dass hier drüben eine Schaltfläche „Neuer Stil“ ist. Wenn Sie also darauf klicken, kann ich es wie Soft Shadow benennen, und ich kann einfach darauf klicken „OK“, und es wird zu meinen Stilen hinzugefügt. Also, wie ich darauf zugreifen kann, sollte ich zu den Styles gehen. In der letzten, wenn Sie den Mauszeiger darüber bewegen, können Sie sehen, dass dies der eine weiche Schatten ist, den ich gerade gerettet habe. Also, wenn ich es auf eine andere Ebene anwenden möchte, werde ich einfach eine andere Ebene zeichnen, nur um Ihnen zu zeigen, wie Sie es auf diese anwenden. Ich werde darauf klicken und Sie können sehen, wie dieser weiche Schatten auf diese Ebene angewendet wurde. Dies ist also sehr wichtig, wenn Sie Ihre Stile speichern möchten , die Sie immer wieder verwenden werden wie diese Schatten und inneren Schatten. Also benutze das. Ein Tipp, bedenken Sie, dass immer Schwarz-Weiß in Ihren Farbstilen verwenden, um zu speichern. So können sie auf jede Schicht aufgetragen werden. Wenn Sie Farben wie Blau, Grau, Orange oder Ähnliches verwenden , können Sie nicht auf eine Ebene anwenden. Nun haben Sie gelernt, die Ebenenstile wiederzuverwenden, gehen wir zur nächsten Vorlesung über. 36. Was sind Gradienten?: Lassen Sie uns zuerst über einige Steigungen sprechen. Also, was unsere Steigungen? Farbverläufe sind einfach die Mischung aus zwei Farben oder vielleicht mehr als zwei Farben. Also hier habe ich eine Website geöffnet, nur um Ihnen das Konzept zu erklären. Jetzt haben wir blaue Farbe auf der linken Seite und eine weitere dunkelgraue Farbe auf der rechten Seite. Also lassen Sie mich sie mischen. Jetzt ist das der Farbverlauf. Ich habe einen Farbverlauf mit diesen beiden Farben erstellt. Dies ist im Grunde Gradienten Stopp, wo wie viel Verwendung der linken oder der rechten Seite Farbe. Also, wenn ich es hierher ziehe, können Sie sehen, dass die richtige gräuliche Farbe dominant ist und dominant wird. Wenn ich versuche, es hier rüber zu ziehen, dann ist die linke hellere Farbe von Blau ein bisschen dominant. So können Sie diese Website ausprobieren. Ich werde den Link in die Ressourcen aufnehmen. So können Sie im Grunde verschiedene Farbschemata wie diese ausprobieren. Eine scharfe und eine stumpfe Farbe, ich mische jetzt. Mischen Sie nicht zwei entgegengesetzte Farben oder zwei sehr unterschiedliche Farben. Als ob ich diese Grüns miteinander vermischt habe. Sie können von blau zu grau gehen, und sogar wie diese langweilig, und man ist orange Farbe. Sie können sehen, dass es eine sehr seltsame Kombination ist. Also, wenn ich wie die beiden Farben mischen, werden sie eine sehr ziemlich gute Kombination wie diese machen. Also habe ich diese Verwendung auf vielen Websites gesehen. Lassen Sie uns also in der nächsten Lektion diskutieren, wo viele UI und professionelle Web-Designer und UI-Designer diese Mischung oder Farbverläufe in ihren Designs verwenden. 37. Verwendung von Farbverläufen in UI-Design: Sehen wir uns nun einige Beispiele für die Verwendung von Farbverläufen in Webdesign und Lernseitenentwürfen an. Also das ist im Grunde Stripe Website und Sie können sehen, sie haben diese beiden orange und lila Farben gemischt und es sieht toll aus. Das ist also eine Verwendung und lassen Sie mich Ihnen einige weitere Beispiele zeigen. Nun, hier haben wir diesen Button „Starten Sie kostenlos.“ Jetzt hat der Designer diesen Farbverlauf von dieser scharfen blauen Farbe zu etwas dunkleren blauen Farbe verwendet . So sieht es sehr einzigartig aus. Ich habe ein paar weitere Beispiele wie diese, QuickBooks Online-Website. Also, wenn Sie auf diese insgesamt klicken, diese „Try It Free“, gibt es auch eine Verwendung von Gradienten hier in diesen Schaltflächen. Dann haben diese Schaltfläche auch einen Farbverlauf. Auch dieser weiße Knopf hat einen Farbverlauf von weiß zu grau. So verwenden Designer Farbverläufe und sie sehen in Designs sehr schön aus und ziehen Anwenderaugen an. Also hier haben wir eine weitere sehr einzigartige Verwendung von Farbverläufen. Sie können auf dieser Sprout Video-Website sehen, sie haben Farbverläufe in einer sehr kreativen Art und Weise verwendet und es kommt wirklich in das Design. Dies ist also eine Verwendung auf den Schaltflächen. Dann können Sie in diesem Inhaltsbereich sehen, sie haben diesen Farbverlauf aus dieser Richtung verwendet, aus diesem Blickwinkel. Also haben wir hier eine scharfe Farbe und einige etwas stumpfe Farbe hier drüben. Dies ist die gleiche Technik, die ich Ihnen in der vorherigen Lektion erzählt habe. Wenn Sie zwei Farben mischen möchten, gehen Sie nicht in eine Vielzahl von Farben, mischen Sie einfach die Farben, die bereits näher beieinander sind. Auf dieser Website haben sie zwei Grüns verwendet. Eine ist ein bisschen gelblich-grün, und eine ist ein bisschen stumpf grün. So können Sie sehen, wie dramatisch und wie schön es wirken kann. Also für den Anfang, denken Sie nur daran, dass Sie nicht viele Farben mischen oder wild mit Ihren Farbverläufen gehen. Denken Sie nur daran, einfachen Tipp, dass Sie nur die Farben verwenden müssen , die korreliert sind und sehr nahe beieinander. Wir haben einige Beispiele wie dieses gesehen. Was ist der Trick hier drüben? Sie haben sehr scharfe zwei Farben verwendet, sehr scharf orange hier drüben und sehr scharfes lila hier drüben. Es ist also nicht vollständig orange, es ist im Grunde rötlich orange. So sind sie näher beieinander. Aber für den Anfang denke ich, dass Sie diese Techniken wie diese verwenden können. Sie haben beide blauen Farben hier verwendet, und in diesen haben sie beide Schattierungen von Orange und dann dunklere Orange, scharfes Orange und dunkleres Orange, scharfes violettes Blau und dann hellviolett blau, matt violett blau verwendet scharfes Orange und dunkleres Orange, . Das ist also im Grunde nur ein Starter-Tipp. Sie daran, und in der nächsten Lektion, lassen Sie uns die Methoden zum Erstellen von Farbverläufen in Photoshop erstellen. Gehen wir also zur nächsten Lektion über. 38. 3 Möglichkeiten zur Erstellung von Farbverläufen in Photoshop: In Photoshop gibt es viele Möglichkeiten, Farbverläufe zu erstellen. Aber im UI-Design werden wir nur die Methoden verwenden, die wir leicht steuern und manipulieren können. Mal sehen, wie viele Möglichkeiten es gibt. Ich werde die erste Methode diskutieren, die dieses „Verlaufswerkzeug“ auswählt Ich werde jetzt nicht in die Optionen des Gradienten gehen, also stellen Sie sicher, dass Sie einen Farbverlauf von hier ausgewählt haben. Ich habe hier nur eine Hintergrundebene, ich habe nur ein neues Dokument geöffnet. Ziehen Sie es einfach von links nach rechts oder in einer beliebigen Richtung, und es wird ein Farbverlauf erstellt. Ich werde „Control Z“ drücken. Wenn ich so aus dieser Richtung ziehe, können Sie sehen, dass der Farbverlauf in diese Richtung kommt. Dies steuert im Grunde den Winkel des Gradienten. Dies war die erste Methode zum Erstellen von Verläufen, bei der dieses Verlaufswerkzeug aus diesem Werkzeugkastenmenü verwendet wurde. Diese ist also schwer zu kontrollieren, wir werden es nicht für Farbverläufe in unserem UI-Design verwenden, also lassen Sie uns über andere zwei Methoden sprechen. Lassen Sie mich einfach einige Ebenen hier erstellen, und unter Rechteck-Werkzeug werde ich hier eine Ebene, abgerundetes Rechteck erstellen , ändern Sie die Farbe in dieses blaue. Okay, jetzt, die zweite Methode, die am beliebtesten ist und wir werden es sehr verwenden, ist die Verwendung dieses Layer-Stils. Gehen Sie also zu Ebenenstilen, und dann werden wir diesen Farbverlauf Overlay-Effekt verwenden. Sie können sehen, sobald ich diese ausgewählt habe, Ich habe bereits einen Farbverlauf hier ausgewählt, Sie können es ändern, wenn Sie wollen. Auf diese Weise wenden wir Layer-Stil-Verläufe an, und was ist der Vorteil? Warum werden wir zu dieser oder einer anderen Methode wechseln? Das Problem ist dieser Steuerungseffekt. So können wir es einfach kontrollieren, es hier ausschalten und hier drüben einschalten. Wir können doppelklicken und leicht ändern Sie es in einen anderen Farbverlauf. Dies ist im Grunde die Leichtigkeit der Kontrolle. Wenn wir im UI-Design Layer-Stile oder irgendetwas haben , das einfach zu steuern ist, dann gehen Sie mit ihnen. Dies ist eine andere Methode. Jetzt ist die dritte Methode die Erstellung einer Anpassung Farbverlaufsebene, so dass wir zu diesem Symbol gehen hier im Ebenenfenster, kleines Symbol. Sie können sehen, „Erstellen Sie neue Feld-Anpassungsebene“ klicken Sie darauf, und dann werden wir diesen Farbverlauf von hier aus auswählen, und Sie können den Farbverlauf sehen, der gerade jetzt ausgewählt ist von diesem transparent zu weiß. Lassen Sie mich einen anderen wie diesen auswählen. Jetzt können Sie diese Farbverlaufsfüllung sehen, nur die gesamte Leinwand mit dieser Farbe gefüllt hat. Jetzt in unserem UI-Design brauchen wir meistens solche Dinge nicht, also werden wir diesen Farbverlauf in diese Muster-R-Form einschneiden. Dazu werden wir auf „Hinzufügen“ klicken und zwischen diesen beiden Ebenen klicken, und jetzt können Sie sehen, dass diese Farbverlaufsfüllung angewendet wurde. Jetzt Farbverlaufsfüllung wird auf diese Ebene angewendet, so dass dies eine andere Möglichkeit ist, können wir einfach hier klicken, doppelklicken Sie auf dieses Symbol „Gradient Stil“ hier drüben, und wir können es leicht von diesem ändern. Sie sind sehr einfach zu steuern, deshalb verwenden wir vielleicht diese Verlaufsfüllungstechnik und diesen Verlaufseffekt Overlay. Denken Sie daran, dass diese beiden Methoden immer wieder verwendet werden. Aber ich dachte nur, dass Sie alle Methoden zum Erstellen von Farbverläufen in Photoshop kennen sollten . Hier geht es um das Erstellen von Farbverläufen in Photoshop. In der nächsten Vorlesung werden wir uns mit den Optionen und den verschiedenen Optionen des Gradienten Editors und diesem Gradient Overlay Layer-Stil beschäftigen. Bleiben Sie einfach in Kontakt und fahren wir mit dem nächsten Vortrag fort. 39. Verwendung von Gradient in Photoshop: In dieser Vorlesung werden wir diesen Gradienten Editor diskutieren. Wenn Sie die Farben ändern und einen neuen Farbverlauf erstellen möchten, können Sie darauf doppelklicken, und Sie können hier sehen wir haben Gradient Overlay Fenster. Wir haben hier ein paar blaue Voreinstellungen, aber im Moment werden wir hier einen benutzerdefinierten neuen Farbverlauf erstellen. Lassen Sie mich jetzt nur einige der hier dargestellten Optionen besprechen. Wir werden die meiste Zeit solide Gradient und Glätte wird in der 100 Prozent sein, also nicht mit diesen Einstellungen durcheinander bringen. Jetzt sind das im Grunde Farbstopps. Sie können sehen, dass diese Farbe auf der Position ist Null Prozent, die oben links und die meisten linken Seite. Wenn ich es hierher ziehe, können Sie sehen, dass sich seine Position ändert. Die beiden unteren Optionen sind im Grunde der Ort, an dem sich die Farben befinden. Dies kann die Richtung unseres Gradienten ändern. Diese beiden sind Stopps, wenn ich darauf klicke, können Sie sehen, dass die Position auf 100 Prozent für diese Farbe eingestellt ist. Wenn ich versuche, es hierher zu bewegen, ist dies der gleiche Effekt, den ich in meinem ersten Vortrag über Steigungen erwähnt habe, wo ich die Spannweite der Steigungen änderte. Wenn ich es hierher schiebe, sehen Sie, dass die blaue Farbe scharf ist. Blaue Farbe ist sehr weniger dominant als diese ist dominant. Ich werde es rückgängig machen. Sie können hier einen sehr kleinen Rechteck-Formpfeil sehen. Dies ist im Grunde die Angabe, wo die Spannweite dieser Farbe ist. Wenn ich versuche, es hier zu bewegen, können Sie sehen, dass die Spanne der dunkelblauen Farbe abnimmt und Sie können sehen, dass die Verschiebung dieser Farbe in den Farbverlauf steigt. Sie können auch die Span-Position ändern. Sie können es jetzt auf 50 Prozent setzen. Sie können es auf 70 Prozent oder so etwas ändern. Dieses Symbol zeigt im Grunde die Spanne an, wie viel diese Farbe sein wird und wie lange diese Farbe im Farbverlauf sein wird. Dies sind all die Dinge, die ich hier diskutiert habe, wenn Sie mehr Farben hinzufügen möchten, können Sie darauf klicken und klicken Sie einmal hier. Sie können sehen, dass ich die gleiche Farbe hier hinzugefügt habe. Ich kann seine Farbe so ändern, vielleicht eine gräuliche violette Farbe oder vielleicht etwas mehr helle Farbe wie diese. Nur um die Farbverläufe zu erklären, können wir hier so viele Farben hinzufügen, wie wir möchten. Sie können sehen, diese Farbe hat die Spanne so. Wenn ich versuche, es hier rüber zu ziehen, und Sie können jetzt sehen, wie diese Farbe im Grunde in diesen Farbverlauf addiert. Nun, wenn wir die untere Seite dieser Farbverlaufsleiste gemeistert haben, lassen Sie uns über die obere Leiste sprechen. Jetzt haben wir einige Stopps Type-Icons hier drüben wie dieses und dieses hier. Sie können das hier auch hinzufügen. Was im Grunde die Spitze ist, machen diese Bars hier drüben. Dies sind im Grunde die Deckkraft, wie undurchsichtig Ihr Farbverlauf sein wird. Wenn wir manchmal einen Farbverlauf erzeugen müssen, der auf einer Seite transparent und auf einer Seite undurchsichtig ist. Wenn ich diese weiße Farbe transparent machen möchte, werde ich ihre Deckkraft auf null Prozent reduzieren. Jetzt können Sie sehen, dass diese Häkchen erscheinen, die im Grunde die Transparenz sind. Diese oberen Balken steuern im Wesentlichen die Transparenz der Farben unten. Wenn ich die Deckkraft dieses hier ändern möchte, kann ich es auf 50 Prozent verwenden. Sie können die Farben sehen und die Transparenz hat sich geändert. Sie können auch die Symbole hier sehen, sie haben sich auch geändert. Hellgrau bedeutet seine undurchsichtig, 50 Prozent oder 40 Prozent undurchsichtig nicht ganz undurchsichtig. Es ist ein bisschen transparent. Weiß bedeutet, dass es völlig transparent ist, schwarz bedeutet, dass es völlig undurchsichtig ist. Das sind alle Optionen hier drüben. Nun, um Ihren Farbverlauf zu speichern, wenn ich es speichern möchte, kann ich es hier drüben transparent zu blau nennen, und ich kann hier auf diese Neu klicken, und Sie können sehen, dass ich diesen Farbverlauf hier gespeichert habe. So erstellen wir Farbverläufe, aber für den Anfang werde ich nicht viele Farben verwenden. Ich werde diese Farbe löschen und wir werden hier eine weitere dunkelblaue Farbe verwenden und die Deckkraft auf 100 Prozent einstellen. Entfernen Sie diesen Transparenzstopp, Löschen. Jetzt können wir vielleicht seine Sättigung ein wenig ändern, es zu einer scharfen blauen Farbe machen. Ich werde auch seine Spannweite ändern und dann werde ich diese Farbe zu blauen Knopf erstellen. Jetzt erstellen Sie es so, Speichern, Neu. Wenn Sie dieses ganze Farbverlaufsset speichern möchten, können Sie auf diese Schaltfläche Speichern klicken, und Sie können diesen Farbverlauf speichern. Sie können sehen, dass ich es wie vielleicht flache UI-Farbverläufe nenne, so etwas. Wenn Sie viele Farbverläufe erstellen und sie nur speichern möchten, können Sie sie so speichern. Wenn Sie sie später laden möchten, können Sie sie von hier aus laden, sodass Sie Ihre Farbverläufe nicht verlieren. Hier geht es um den Verlaufseditor und um das Erstellen neuer Farbverläufe und deren Verwendung. Wenn Sie Fragen oder irgendetwas in Ihrem Kopf haben, fragen Sie mich in der Diskussion. Ich dachte, dieser Gradiententeil ist sehr, sehr wichtig im UI-Design, weil er eine große Verwendung in Tasten, Hintergründen, sogar im Heldenbereich hat . Das ist alles über Farbverläufe. Ich werde die nächsten Übungen zur Verwendung von Farbverläufen und wenigen Herausforderungen hochladen. Bleiben Sie dran und sehen Sie sich in der nächsten Vorlesung. 40. Verwendung von Gradient: Ich werde zuerst diese Gradienten Overlay-Effekt-Optionen diskutieren. Doppelklicken Sie hier auf diesen Effekt und dieses Ebenenstil-Fenster wird angezeigt. Zunächst einmal haben wir diesen Mischmodus, der momentan auf normal eingestellt ist. Was es im Grunde tut, ist, dass nur wir die Farbverläufe sehen können , aber wir können die Hintergrundfarbe dieser Ebene nicht sehen. Ich setze die Hintergrundfarbe der Form auf diese dunkle wo Sie sie in der Miniaturansicht sehen können, die gerade nicht angezeigt wird. Wenn ich versuche, es wie multiplizieren mit dem Hintergrund zu mischen, können Sie jetzt sehen, dass die blauen Farben multipliziert oder zu diesem grauen Hintergrund hinzugefügt werden. In diesem Farbverlaufs-Overlay-Mischmodus verwenden wir möglicherweise nicht alle von ihnen, wir werden nur diese vielleicht verdunkeln oder diese multiplizieren, Farbverbrennung und vielleicht Bildschirm und vielleicht Overlay verwenden . Dies sind im Grunde nur wenige Effekte, die wir die meiste Zeit verwenden werden. Sie sich keine Sorgen um alle, versuchen Sie einfach, zu jedem zu wechseln, den Sie mögen, oder wechseln Sie weiter, bis Sie den besten Effekt erzielen. Sie sich keine Sorgen über das Erlernen all dieser Mischeffekte, sind im Grunde nur das Mischen von Farben. Wie die Verlaufsfarben mit der Hintergrundfarbe gemischt werden sollen. Werden sie so brennen? Sie können die Deckkraft hier ändern, können Sie sehen. Lassen Sie mich es jetzt einfach auf normales Licht umschalten. Für Webdesign und CSS empfehle ich nicht, diesen Mischmodus zu verwenden, also halten Sie ihn einfach normal. Das ist ein weiterer Tipp. Nun, für diese Deckkraft können Sie sie ändern, wenn Sie möchten, aber stellen Sie sicher, dass alles auf 100 eingestellt ist. Wir brauchen die Hintergrundfarbe dieser Ebene nicht. Jetzt werde ich nur die Optionen hier besprechen. Danach werde ich den Gradient-Editor besprechen. Wenn ich hier doppelklicke, können Sie sehen, dass der Verlaufseditor geöffnet ist. Im Moment werde ich nur diese Optionen dieses Ebenenstil-Farbverlaufs-Overlays diskutieren. Nun, das ist im Grunde die Richtung, ich werde die Richtung umkehren. Wenn wir diesen Farbverlauf von haben, können Sie dunkelblau zu einer scharfen blauen Farbe sehen, Sie können es so umkehren, wenn Sie die Richtung umkehren möchten. Dann wird dies immer überprüft, also verwirren Sie dies nicht mit der Option mit Ebene ausrichten, ist im Grunde, wie die Ausrichtung dieses Gradienten sein wird. Es wird sich mit der Ebene ausrichten. Nun, das sind im Grunde Stile, wie der Farbverlauf funktionieren wird. Wird es im linearen Modus von sein, können Sie in einer Zeile von oben nach unten sehen. Im Moment haben wir diesen Winkel von 90. Moment arbeitet dieser Farbverlauf in dieser Richtung in einem linearen Modus in ausrichten. Wenn wir in den radialen Modus wechseln, können Sie sehen, wie sich das geändert hat und jetzt ist es im radialen Modus wie dieser in einem kreisförmigen Modus. Wir verwenden vielleicht nicht diese Winkel und diesen reflektierten oder vielleicht Diamanten, aber ich denke, wir werden hauptsächlich lineare und radiale verwenden. Denken Sie daran, dass Sie sich nicht mit allen anlegen. Wir werden nur linear und radial verwenden, weil wir im CSS und Webdesign möglicherweise nicht in der Lage sind, diese Effekte zu erzeugen, denke ich. Diese lassen sich leichter linearen und radialen Effekten erzeugen. Wir könnten dieses generieren, aber es liegt an Ihnen, wenn Sie es verwenden möchten. Als nächstes ist der Winkel. Wenn ich den Winkel ändere, können Sie sehen, wie sich die Farbverläufe ändern werden. Es ist nur die Richtung des Gradienten, der von links nach rechts kommt, oder der Winkel, den ich spezifiziert habe. Denken Sie daran, dies ist nur der Winkel. Dann ist die Skala im Grunde, wie breit und Sie können sehen, wie eng die Farben sein werden. Sie können sehen, wie ich im Skalenabschnitt zu weniger umschalte und Farbverläufe schmaler werden. Wenn ich zu mehr als 100 Prozent gehe, können Sie sehen, dass Farbverläufe dicker werden und sie haben eine größere Spanne von Farben. Die Spannweite nimmt zu. Dies sind alle Optionen über Ebenenstile der Verlaufsüberlagerung. In der nächsten Vorlesung werden wir diesen Gradienteneditor besprechen. Gehen wir zur nächsten Vorlesung. 41. Was sind Muster und wie verwenden sie im Webdesign im Webdesign?: In dieser Lektion werden wir sehen, wie Muster im Wesentlichen in UI und Webdesign verwendet werden. Beginnen wir also mit dem, was Muster sind. Muster sind also im Grunde wiederholte Hintergründe. Sie können hier drüben sehen, sind einfache Bilder, die immer wieder wiederholt werden. Dies ist eine Website, subtlepatterns.com. Sie können diese Website besuchen und viele Muster sehen, Sie können sie auch herunterladen. Das sind also einige der sehr guten Muster. Wir können sie in unserem UI-Design und Webdesign verwenden. Sehen wir uns einige der Beispiele online an, um zu sehen, wie Muster von Webdesignern verwendet werden. Lassen Sie mich Ihnen einige der Beispiele zeigen. Wir haben bereits diese Website gesehen, sproutvideo.com. Aber wenn Sie sich die linke und rechte Seite hier drüben ansehen, können Sie sehen, dass einige Polygone Stil Muster hier auf dem Hintergrund angewendet werden. Dann haben wir, wenn wir zu diesem kreativen Markt bewegen, haben sie dieses Bündel gezeigt, aber im Hintergrund können Sie sehen, dass sie ein Muster für die Herbstsaison verwenden oder was auch immer das ist. Dann haben wir, lassen Sie mich Ihnen noch ein Beispiel zeigen. Du kannst es dir ansehen. Es ist nur ein nahtloses Muster eines Holzes. Es ist also kein sehr großes Bild. Es ist nur ein kleines Bild, kann 100 x 100 Pixel breit und 100 Pixel hoch sein. So haben sie es angewendet, um diesen hölzernen Hintergrund zu schaffen. So können Sie sehen, wie diese Muster wirklich in Ihrem Webdesign und UI-Design zählen. Das Problem ist, verwenden Sie sie immer weise, verwenden Sie kein sehr großes Dateimuster wie 500 x 500 Pixel oder manchmal habe ich Leute gesehen 1.000 Pixel x 1.000 Pixel Bilder für ihre Muster verwenden. So ist es nicht ratsam. Verwenden Sie immer Muster, die nahtlos sind und eine sehr geringe Dateigröße haben. Also, das geht es um die Muster. In der nächsten Lektion werden wir untersuchen, wie Sie neue Muster in Photoshop herunterladen und installieren, die in Ihrem UI-Design verwendet werden können. Gehen wir also zur nächsten Vorlesung. 42. 2 Methoden zum Anwendung von Mustern: In dieser Lektion werde ich diskutieren, wie wir Muster in Photoshop anwenden können. Eigentlich gibt es zwei Möglichkeiten, Photoshop-Muster anzuwenden. Lassen Sie uns eins nach dem anderen besprechen. Ich habe dieses Rechteck hier schon gezeichnet. Die erste Methode besteht darin, Layerstile anzuwenden. Wechseln Sie zu Layer, Layerstile und Musterüberlagerung. Sobald Sie dieses Fenster sehen, sehen Sie, dass bereits Muster auf Ihr Design angewendet wurden. Zuallererst müssen Sie einige der Optionen sehen. Sie kennen diese Fülloptionen und die Deckkraftkontrolle bereits. Lassen Sie uns diese Muster-Bibliothek diskutieren. Das sind die Bibliotheken, die jetzt hier drüben geladen sind. Ich habe eine Menge benutzerdefinierter Muster hier drüben geladen. Also, wenn ich versuche, sie so anzuwenden, werden sie auf meine Hintergrundfarbe angewendet, was auch immer es ist. Nun, das Problem ist, wenn ich meine Hintergrundfarbe zeigen möchte und das Muster darauf überlagert werden sollte. Sie können dies tun, indem Sie diese Opazitätssteuerung steuern. Bewegen Sie das hier. Sie können jetzt sehen, dass unser Muster nicht undurchsichtig oder transparent ist. Wenn Sie also einen sehr subtilen Effekt wünschen, können Sie das Opazitäts-Steuerelement verwenden, um es zu verwenden. Wenn Sie diesen einfach verwenden und zu einem anderen Effekt wie multiplizieren wechseln möchten, können Sie sehen, wie sich dies wirklich auf die Hintergrundfarbe auswirkt. Es ist nur addiert sich im Hintergrund. Dies sind verschiedene Optionen, die Sie hier verwenden können, können Sie normale Multiplikation oder sogar farbige Verbrennung verwenden, so etwas. Selbst manchmal wählen wir einfach Farbe oder Farbton. Meistens verwenden wir normal, multiplizieren oder vielleicht Overlay. Dies sind die drei Effekte, die wir die meiste Zeit verwenden. Denken Sie also daran, dass Sie diesen Effekt mit diesen Mischoptionen verwenden , Overlay, normal, multiplizieren. Das ist es um Ebenenstile. Lassen Sie uns nun die zweite Methode besprechen. Es ist sehr einfach zu steuern, Sie können einfach ausschalten und einschalten. Jetzt, wenn wir zur nächsten Methode kommen, werden wir diesen Effekt hier löschen. Die zweite Methode besteht nun darin, Muster mit Ihren Anpassungsebenen anzuwenden. Es gibt die Einstellungsebenen, die sich direkt in der unteren Ecke des Ebenenbedienfelds befinden. Klicken Sie auf dieses Symbol und gehen Sie zu diesem Muster. Klicken Sie darauf, und Sie können sehen, wie dieser Dialog zum Füllen von Mustern erschienen ist. Hier haben wir sehr weniger Optionen wie Deckkraft und andere Dinge. Wir können sie hier drüben nicht kontrollieren. Wir werden nur eines der Muster auswählen, wie vielleicht dieses, Tupfen. Ich werde auf „Okay“ drücken. Jetzt ist das Muster, wenn Sie eine Einstellungsebene verwenden, wird es auf die gesamte Arbeitsfläche angewendet. Denken Sie also daran, dass Sie es schneiden müssen, wenn Sie möchten, dass der Effekt auf einem bestimmten Bereich sein wird. Wir hatten dieses Rechteck hier drüben auf der rechten Seite in unserem Ebenenbedienfeld. Also werden wir dieses Muster in dieser Ebene so zuschneiden, und das war's. Wenn Sie die Deckkraft steuern möchten, können Sie sie von hier aus steuern, das Ebenenbedienfeld Opazität so. Wenn Sie einen Mischmodus verwenden möchten, können Sie diese Ebenen-Mischmodi hier verwenden, wie folgt. Jetzt haben wir die volle Reichweite. Wir können diese Ebene leicht erweitern und Sie können sehen, dass sich das Muster damit ausdehnt. Dies sind im Grunde die beiden Möglichkeiten, Muster in Photoshop anzuwenden. Nur eine Zusammenfassung. Die erste besteht darin, Layerstile in der Layer- und Musterüberlagerung zu verwenden. Die zweite ist, dass Sie eine Einstellungsebene verwenden werden. Beide Methoden sind also gut zu verwenden. Sie können jede von ihnen verwenden. Das ist es, wie Muster in Photoshop mit zwei verschiedenen Methoden angewendet werden. Gehen wir also zur nächsten Vorlesung über. 43. Muster aus einer Bilddatei erstellen: Lassen Sie uns diskutieren, wie wir Muster aus Bildern erstellen können oder wie wir Muster verwenden oder sie aus dem Internet herunterladen und in Photoshop verwenden können. Also lasst uns dieses Tutorial beginnen. Zuallererst werde ich Ihnen diese Seite subtlepatterns.com zeigen. Es ist sehr beliebt. Sie haben ein Plugin, das Premium-Plugin ist, müssen Sie es kaufen. Also, was wir jetzt tun werden, ist zuerst, dass wir ein Muster von hier herunterladen, und mal sehen, wie wir ein Muster aus einer Bilddatei erstellen werden. Also lade einfach dieses Muster hier rüber herunter. Okay, pink_rice, es ist heruntergeladen, und lass mich die Datei holen. Hier ist die Datei, ich werde sie extrahieren. Also lass uns sehen, was drin ist. Wir haben eine PNG-Bilddatei darin. Ziehen wir es einfach in unserem Photoshop, so. Jetzt können Sie sehen, dass es sich nur um eine PNG-Datei handelt. Wir werden unser Muster in Photoshop aus dieser PNG-Datei erstellen. Also werden wir Control A drücken, um den gesamten Canvas auszuwählen, gehen Sie zu Bearbeiten und definieren Muster. Also werde ich es in pink_rice umbenennen, OK drücken, und das war's. Unser Muster wurde erstellt. Wenden wir es auf etwas an. Ich werde Eclipse-Tool wie dort verwenden. Jetzt werde ich es mit unserer Layer-Stil-Methode anwenden, okay, wo ist es? Musterüberlagerung. Gehen Sie nun zu dieser Musterbibliothek, bewegen Sie sich zum Ende und Sie werden am Ende dieser Musterhaftung die letzte oder die letzte erstellte Musterbibliothek sehen . Wenn Sie also ein Muster aus einer Bilddatei erstellen, wird es unten und am letzten liegen. Also klicken Sie hier und Sie können sehen, ich habe es bereits angewendet, aber wir werden den normalen Modus verwenden. So können Sie sehen, wie das funktioniert. Jetzt haben wir unser Muster hier angewendet und das war's. Dies ist die Art und Weise, wie Sie Ihr Muster aus einer Bilddatei erstellen. Gehen wir also zum nächsten Vortrag über, wo wir sehen werden, wie man neue Pattern mit.pat-Dateien für Photoshop installiert. 44. Installation und Verwenden von .pat: Lassen Sie uns nun die zweite Möglichkeit besprechen, Muster in Photoshop zu verwenden und sie zu installieren. Wir werden in dieser Vorlesung die PAT-Datei verwenden. So basically.pat Datei ist die Sammlung von verschiedenen Mustern für Photoshop. Jetzt werden wir diese premiumpixels.com/freebies verwenden, die ein Muster ist, sehr schöne Muster. Laden Sie sie einfach von hier herunter. Ich klicke auf den „Download“ und lade uns diese herunter. Dies werden nur Pattern-Dateien sein und wir werden sie zuerst installieren. Also werden wir zuerst in den Photoshop-Installationsordner wechseln. Wir haben es bereits heruntergeladen. Gehen wir zum Photoshop-Installationsordner. Ich habe hier eine Menge Dateien geöffnet. Nun, klicken Sie mit der rechten Maustaste auf den Photoshop und gehen Sie zu Eigenschaften und Open File Location, und wir werden diesen Presets Ordner verwenden. Gehen Sie zu diesem Presets-Ordner und hier finden Sie mich, um den Ordner „Patterns“ zu finden. Für Mac-Benutzer, ich denke, der Pfad ist von der Anwendung und Adobe Photoshop und Presets. Ich werde den eigentlichen Pfad in den Kommentaren oder in der Diskussion oder vielleicht in einem anderen Vortrag posten , aber im Moment ist dies für PC. Sie können es Google, dass, was ist der Pfad Ihres Photoshop-Installationsordners auf Mac. Klicken Sie nun auf diesen Pattern-Ordner und Sie werden alle Muster hier sehen. Dies sind die vorgefertigten oder Standardmuster von Photoshop. Nun, wenn ich hier ein Muster installieren möchte, muss ich nur die Pattern-Datei kopieren und einfügen. Das ist keine sehr schwierige Sache, also lasst uns das tun. Wir werden die gleichen subtilen Muster hier verwenden, ich werde sie extrahieren, also werden wir diese Pattern-Datei verwenden. Kopieren Sie und wir werden es in unserem Patterns-Ordner hier einfügen, Weiter. Nun, damit dies geschieht, müssen Sie Photoshop-diejenigen herunterfahren und schließen und erneut ausführen. Lassen Sie es einfach ein bisschen anfangen. Es dauert einige Zeit, um in meinen RAM geladen zu werden. Es wird also einige Zeit dauern. Komm schon. Ja, ich werde die neu installierte Pattern-Datei verwenden. Also werden wir hier so etwas zeichnen, und wir werden hier ein Muster anwenden, Pattern Overlay. Jetzt sehen wir bereits unsere alte Musterbibliothek Um auf das neue zuzugreifen, klicken Sie darauf und klicken Sie auf eines der Muster, die hier waren. Dies ist das Muster, das wir gerade installiert haben, klicken Sie darauf. Es wird sagen: „Ersetzen Sie das aktuelle Muster durch ein Muster aus Mustern.“ Wenn Sie also alle Ihre Bibliothek ersetzen möchten, können Sie auf OK klicken, oder Sie können auf Anhängen klicken. Wenn Sie also auf Anhängen klicken, wird es letztendlich hinzugefügt, so dass. Sie können hier drüben sehen. Zur Klarheit, lassen Sie uns einfach die Muster ersetzen, damit wir nichts anderes haben. Ich weiß nicht, was passiert, vielleicht waren es subtile Muster. Sie können auf jedes der Muster hier klicken. Dies waren die Muster, ich habe auf den falschen Dateinamen geklickt, also klicken Sie einfach auf sie. Sie können sehen, das sind verschiedene Muster, sehr schöne subtile Muster, genau wie Papiertextur. Also werde ich es erweitern, so dass Sie die Textur leicht sehen können. Dies ist im Grunde die Methode, die wir verwenden, um .pat Photoshop-Pattern-Dateien herunterzuladen und zu installieren. Sie sind sehr einfach zu installieren, wenn Sie das gleiche Muster für Internet verwenden möchten oder vielleicht, sorry, für die Entwicklung oder Website-Entwicklung, können Sie diese Muster hier verwenden. Diese sind für die Verwendung in der Web-Entwicklung, da die PNG-Datei, Sie können sie leicht wiederholen, und für Photoshop können Sie diese einfach in Photoshop anwenden. Das ist es, Photoshop-Musterdateien anzuwenden und zu verwenden. Gehen wir zur nächsten Vorlesung. 45. Wie Licht und Schatten in UI-Design funktioniert: Hallo an alle. In dieser Vorlesung werde ich Ihnen im Grunde das Geheimnis hinter oder das Konzept hinter allen UI-Designs zeigen . Sie können jede Art von UI-Element mit diesem Konzept erstellen, oder mindestens 80 Prozent davon. Also, was ist das für ein Konzept? Es ist das Konzept von Licht und Schatten. Jetzt habe ich fast alle UI-Designs gesehen , bei denen das Licht immer aus diesem Winkel fällt, der 90 Grad beträgt. Nehmen Sie zuerst nur für eine Sekunde an, dass das Licht von oben kommt, so. Wenn das Licht oben ist, sollte der Schatten unten sein. Licht ist hier und Schatten ist da. Wenn wir das Licht woanders bewegen, so. Lassen Sie mich Ihnen ein Beispiel zeigen. Das hier. Jetzt können Sie sehen, dass das Licht auf der linken Seite ist und der Schatten auf der rechten Seite ist. So bewegt sich der Schatten mit dem Licht, während wir das Licht bewegen. Das ist das Grundkonzept. Jetzt, wenn etwas im UI-Design erhöht ist oder einen Bibereffekt oder so etwas hat. Sie haben Licht an der Spitze und Sie können Licht sehen, es wird auf diesen Bereich fallen. Im Grunde, was wir Designer tun, schaffen wir Licht hier und ein bisschen Dunkelheit hier drüben, und dann schatten wir hier drüben und voila. Unser erhöhter Knopf ist da. Google-Materialdesign, es gibt eine Menge von Verwendungen dieses Konzepts, die Schatten. Kommt man zu diesem besten Effekt, was passiert jetzt hier drüben? Wenn wir einen Knopf drücken oder etwas drücken, wird der Schatten auf der Innenseite sein. Sie also immer daran, dass wir hier Schatten brauchen , um es gedrückt zu machen und noch eine Sache, es gibt ein sehr kleines Detail, das Sie einfach nicht verpassen müssen. Lassen Sie mich es für Sie vergrößern, wenn Sie hier drüben genau hinschauen, haben wir hier Schatten und wenn etwas gedrückt wird, wird das Licht auf diesen Bereich fallen. Weil dieser Bereich nach innen gedrückt wird, so wird es das ganze Licht überspringen. Licht wird von hier und hier runter fallen. Wenn ich auf diese Ebene klicke, können Sie sehen, dass ich einen sehr leichten Schlagschatten verwendet habe. Wenn ich die Größe vergrößere, kannst du jetzt hier drüben sehen. Sie können den Schlagschatten hier sehen, es ist ein weißer Schatten , der im Grunde ein weißer Glanz ist, aber ich werde es jetzt einen Schatten nennen. Lassen Sie mich die Hintergrundfarbe für Sie ändern, damit Sie sie deutlich sehen können. Jetzt können Sie es deutlich sehen. Hier drüben ist ein weißer Schatten oder Glanz. Das ist im Grunde dieses Licht, das hier auf diesem Gebiet herumfällt, um es zum Leuchten zu bringen. Dies sind die zwei grundlegenden Dinge, die wir brauchen, um in allem , was wir als gepresstes Objekt zeigen oder nach innen gedrückt. Lassen Sie mich Ihnen ein weiteres Beispiel zeigen, hier habe ich das gleiche Konzept auf einer Typografie verwendet oder Sie können auf einem Text sehen, Sie können sehen, wie es hier gedrückt wird. Dies ist der gedrückte Effekt, es war sehr beliebt, UI-Designer verwenden es immer noch in allen Tasten. Fast alle diese haben diese beiden Stäbchen, einer ist erhöht und einer wird gedrückt. Denken Sie daran, sehr grundlegendes Konzept, dass UI-Design, alle UI-Elemente, die sie drehen sich um diesen Licht- und Schatteneffekt. 46. Beispiele für Licht und Schatten: In dieser Lektion zeige ich Ihnen einige Beispiele von Dribblern, die Licht und Schatten am besten verwenden. Dies ist ein Beispiel, das Sie hier sehen können. Dieser Knopf ist erhöht und sie haben Licht hier drüben benutzt und Schatten hier drüben, dann haben sie Schatten hier drüben und ein bisschen Licht hier drüben. Dies ist für den gedrückten Effekt und dies ist für den erhöhten Effekt. Jetzt haben sie selbst in diesem Höheneffekt den gedrückten Effekt für dieses Häkchen verwendet. Trotzdem wird dies wieder gedrückt und dann in den gepressten gedrückt. Das ist also ein sehr einzigartiger Effekt, aber es sieht sehr gut aus. Jetzt noch ein Beispiel. Dies ist auch ein weiteres Beispiel. Dies ist nur durch das Licht und Dunkel sie haben zwei sehr große UIs verwendet und sie haben das Licht und Schatten auf der gedrückten Ebene verwendet. Hier siehst du Licht und hier drüben Schatten. Dann sieht man auch Licht hier drüben, Schatten hier drüben. Dann kann man im gedrückten Effekt Licht hier unten sehen. Sie können sehen, die Farbe dieser Schaltfläche variiert von den letzten beiden. Die Farbe dieser Schaltfläche ist also dunkler als die linken und rechten Tasten. Jetzt kommt zu einem anderen Beispiel. Jetzt wird dies im Grunde die dunklen UI-Themen genannt, ich mag sie nicht sehr. Sie können hier den gleichen Effekt von Licht und Schatten sehen. Nun, Licht ist hier drüben. Hier sieht man sehr langweiliges Licht. Dann haben wir Schatten , der hier ein bisschen diffuser Schatten ist. Dann haben wir diesen gedrückten Knopf und erraten, was, der gedrückte Knopf ist dunkler. Das ist das Hauptkonzept. So können Sie sehen, dass diese Tasten einen etwas helleren Grauton haben und dieser Knopf einen dunkleren Grauton hat. Also hier haben wir dunkleres Grau und helleres Grau. Dies ist wieder das Konzept von Licht und Schatten. In den nächsten Vorträgen werde ich diskutieren, wie Typographie-Farben zu wählen, und einige andere Tipps für Anfänger. Also bleiben Sie dran und sehen Sie in der nächsten Vorlesung. 47. Farbschemata für Anfänger:innen: Lassen Sie uns über Farbschemata sprechen. Farbschemata sind ein wesentlicher Bestandteil des UI-Designs, egal ob Sie eine Website, eine App oder irgendetwas anderes entwerfen. Also, wie wir diese Farbschemata entwerfen oder wie man diese für Anfänger erstellt, werde ich es auf einfache Weise erklären. Also vor allem die Faustregel. Verwenden Sie niemals mehr als zwei andere Farben als diese Grautöne. Verwenden Sie also maximal zwei Farben für Anfänger. Andernfalls wird es schwierig sein, diese Farben zu kontrollieren oder zu manipulieren. Halten Sie sich einfach an zwei Farben und verwenden Sie so viele Schattierungen von Schwarz oder Grau hier drüben. Sie können im ersten Farbschema sehen, Ich habe nur zwei flache Farben verwendet, grün und orange. Dann habe ich zwei Grautöne verwendet. In der zweiten habe ich wieder zwei Hauptfarben für mein Farbschema verwendet. Dann sind alle drei im Grunde die Grautöne. Dies ist im Grunde sehr beliebt. Die Grautöne werden sehr populär. Die meisten der UIs dominieren sie mit diesen Grautönen. Um die meiste Aufmerksamkeit des Benutzers Ihre Benutzeroberfläche zu lenken und wenn Sie verschiedene Teile entwerfen müssen, müssen Sie diese beiden Hauptfarben verwenden. Diese Farben werden hauptsächlich für Text verwendet. Ich habe es hauptsächlich in den meisten UIs gesehen, selbst auf Dribbble verwenden sie die meisten Grautöne für Texte. Verwenden Sie keine schwarze Farbe, es wird Ihr UI-Design ruinieren. Denken Sie also daran, erhalten Sie einige Grautöne und erhalten Sie zwei Farben und beginnen Sie mit der Gestaltung Ihrer Benutzeroberfläche. 48. Die Hue und Helligkeit für Farbschemata verwenden: Es gibt eine andere Methode, um die Farben zu erhalten, die von Ihren Logos stammt. Wenn Sie bereits Logo haben, können Sie dieses Farbschema sehen, ich habe es von diesem Logo hier und wie ich das gemacht habe, Ich klicke einfach auf die Ebene und Probe die Farbe von hier. Der Farbwähler, probieren Sie es von hier aus und dann probiere ich diese Farbe von hier aus. Wie ich diese rote Farbe erzeugt habe, ist es sehr einfach Methode. Klicken Sie einfach auf eine beliebige Farbe, die Sie benötigen, wie diese und bewegen Sie diesen Farbtonschieber nach oben, wie ich diese rote Farbe habe. Dies bleibt in der gleichen Sättigung und Helligkeit und der Farbton ist anders. Dies ist eine sehr einfache Methode. Manchmal habe ich es so angewendet. Sie können sehen, dass diese drei Farben sehr gut zusammen passen, weil sie die gleiche Helligkeit und Sättigung der Farbe teilen. Dies ist eine sehr einfache Methode. Ich benutze es die meiste Zeit. Wenn Sie es ausprobieren möchten, können Sie es versuchen. So habe ich diese dritte Farbe bekommen. Ich empfehle nicht, zu viele Farben zu verwenden, aber manchmal brauchen Sie im Dashboard-Design viele Farben, vielleicht mehr als fünf Farben. So erhalten Sie mehr Farben. 49. Online-Tools zum Erstellen von Farbschemata: Lassen Sie mich Ihnen nun schnell zeigen, wie viele Werkzeuge oder welche Werkzeuge für die Farbschemagenerierung im UI-Design verwendet werden. erste Werkzeug ist die 0to255.com. Es ist sehr handliches Werkzeug. Es erzeugt verschiedene Schattierungen jeder Farbe. Wenn ich zum Beispiel diese graue Farbe auswähle und den hexadezimalen Wert kopiere, muss ich seinen hexadezimalen Wert in diese Pick Color einfügen, hier und diese Pick Color drücken, und Sie können sehen, dass es alle verschiedenen Schattierungen dieser Farbe, von weiß bis schwarz. Es ist ein sehr praktisches Werkzeug, um schnell verschiedene Farbtöne zu erzeugen. Sie können sie von hier aus benutzen. Wenn Sie eine andere Farbe wählen möchten, können Sie eine andere Farbe auswählen und sie hier übersetzen und auch ihre Schattierungen erzeugen. Das ist ein Werkzeug. Wenn Sie dann flache Farben verwenden möchten, können Sie zu diesen beiden Websites gehen, FlatuiPicker.com und Flatuicolor. Wählen Sie auf dieser Website diesen hexidezimalen Wert hier, vielleicht diesen, und klicken Sie einfach auf eine der Farben. Dies ist eine sehr gute Website, aber wir haben sehr begrenzte Farben. Auf dieser Website haben wir viele Farben, wie Rosa. Wenn Sie auf Rosa klicken, werden Sie verschiedene Schattierungen von Rosa als unsere flachen UI-Design-Farben sehen. Es hat eine Menge von Sorten. Wenn Sie zu Grau gehen, können Sie sehen, dass es viele Grautöne gibt. Es ist ein sehr gutes Werkzeug. Wenn Sie nun bereits erstellte Farbschemata durchsuchen möchten, gehen Sie auf diese Website, color.adobe.com, und starten Sie von hier. Wenn Sie von blau und orange suchen können, kann ich zu bestimmten Farben wie diese gehen. Das ist sehr praktisch, wenn ich weiß, dass ich aus diesen beiden Farben wählen muss. Sie können alle verschiedenen Schattierungen und Farbschema für diese beiden Farben erhalten. Dies ist ein sehr grundlegendes Werkzeug, das ich benutze. Ein ähnliches Tool zu diesem Adobe Color ist diese coolors.co, und gehen Sie zu diesem Browser, und beginnen Sie, diese zu durchsuchen. Aber das Problem hier ist die Suche. Hier haben wir eine sehr gute Suchoption, und ich denke, Sie sollten sich an dieses Adobe Color CC-Tool halten. Es ist sehr gut. Dann der dritte Teil, wenn Sie schnell Farbschemata auf eigene Faust erstellen möchten, dann gehen Sie zu diesem paletton.com oder verwenden Sie diese Adobe CC Color Create, klicken Sie darauf und wählen Sie eine Grundfarbe hier. Wenn ich diese Farbe als meine Grundfarbe wähle, diese grüne Farbe, doppelklicken Sie darauf, kopieren Sie den hexadezimalen Wert, und fügen Sie ihn hier im Adobe-Farbschema-Generator ein. Sie können sehen, wie es Farbschema erzeugt hat. Gehen Sie zu dieser Farbregel Optionsleiste und klicken Sie auf Analog, Sie können sehen, es ist die Erstellung verschiedener Farbschemata. Ich möchte nicht in verschiedene Technikalitäten gehen, aber Sie können so viele Farben bekommen, wie Sie von hier wollen; monochromatische Triade, kostenlos. Wenn Sie eine Farbe mögen, kopieren Sie einfach den Hexadezimalwert und verwenden Sie ihn in Photoshop. Gehen Sie dazu, klicken Sie hier, fügen Sie das Farbschema so und gehen Sie zu den Farbfeldern, klicken Sie auf das neue Farbfeld, und so werde ich meinen Farbfeldern eine grüne scharfe Farbe hinzufügen. Sie können jetzt sehen, dass es zur letzten Farbe hinzugefügt wird. Legen Sie zuerst Ihre Farbe hier drüben und fügen Sie sie dann von hier aus hinzu. So erstellen Sie Farbschemata und bringen sie in Photoshop. Ein weiteres gutes Werkzeug, um Farbschema zu erstellen, ist dieses, Paletton, und es funktioniert auf die gleiche Weise wie Photoshop Creation Tool, Adobe Farbschema. Sie müssen Ihre Grundfarbe hier drüben einfügen. Es ist eine seltsame Kiste. Es lässt mich nur eine beliebige Farbe hier auswählen. Ich muss die Rücktaste drücken. Wenn ich diese Farbe wähle, diese rote, kopieren Sie den Code und fügen Sie ihn hier ein , und drücken Sie „OK“. Sie können sehen, dass es verschiedene Schattierungen hier erzeugt hat. Das ist Tetrad. Dann haben wir wenige andere; drei Farben, zwei Farben. Hier können Sie verschiedene Farbschemata auswählen. Das sind einige Werkzeuge, die ich viel Zeit benutze. Manchmal sammle ich immer wieder verschiedene Farbschemata und verwende Farben aus verschiedenen Farbschemata, die gut zusammenkommen. Aber für Anfänger und Anfänger empfehle ich diese Methode nicht. Verwenden Sie wenige Farben, und erhalten Sie gute Grautöne von dieser Website, und beginnen Sie, einige gute UIs zu entwerfen. 50. Auswahl von Schriftarten und Typografie: In dieser Vorlesung werden wir über Schriftpaarung sprechen, und wie Sie Topographie und Schriftarten für Ihr Web- oder Mobil-App-Design wählen. Schriftpaarung oder das Finden der perfekten Topographie ist im Grunde eine sehr schwierige Fähigkeit zu erlernen. Es dauert Jahre, um die Fähigkeit zu meistern. Für den Anfang, oder sogar für mich, verwende ich diese Websites, um Punkte zu koppeln. Lassen Sie mich Ihnen einige der Websites und Online-Ressourcen zeigen, die ich verwende. Der erste ist dieser typegenius.com. Wenn Sie eine beliebige Schriftart auswählen möchten, können Sie hier auswählen. Sie können viele Schriftarten eingeben, wie, wenn ich diese Open Sans wähle ich diese, und klicken Sie dann auf „Ansicht Übereinstimmungen“. Sie können hier ein paar Spiele mit den Open Sans, Futura PT Condensed sehen. Das ist der Link. Dies ist eine Typekit-Schriftart. Dann haben wir diese Open Sans und Minion Pro. Dieser ist auch eine Typekit-Schriftart. Dann haben wir dieses Open Sans und Museo. Museo ist eine sehr große Schrift, und es kann gekauft werden, oder sogar Sie können es von Typekit verwenden. Dann haben wir diese Open Sans und Source Sans Pro. Dies sind beide Google-Schriftarten. Dies ist eine Website, dann sollten wir auf dieses eine Font Pair gehen. Es ist auch sehr schöne Website, und wir können eine Menge von Schriftkombinationen von hier zu finden. Sie können so sehen, Sans-Serif- und Serifen-Schriftarten. Sie können hier sehen wir Kabine für Überschrift und Old Standard TT für Körpertext. Sie können sehen, dass es viele verschiedene Paarungen gibt. Sie können sehen, dies sind beide Google-Schriftarten Lato und Merriweather und Montseratt und Cardo. Hier können Sie Cursive und Serif sehen. Kursive Schriftarten sind im Grunde so, einige von etwas stilvollen Schriftarten wie diese, und Serif ist im Grunde die Schriftart mit ein wenig Endung oder Zeilen am Ende jedes Buchstabens. Dies sind im Grunde Serifen-Schriftarten und Sans-Serif bedeutet ohne Ende. Wenn wir zu diesem Sans-Serif gehen, können Sie sehen, dass es einfache Schriftarten wie diese gibt. Dies sind Sans-Serif-Schriftarten. Sie können diese Hilfslinien verwenden, um die Schriftarten zu koppeln. Dann können wir zu diesem typ.io/libraries/google gehen, und Sie können hier viele tolle Kombinationen und Inspiration für Google sehen. Schriftkombination für die Kopplung. Sie können hier sehen, dass es benutzt wird, Raleway. Dann im nächsten Beispiel sind es Proxima Nova und Libre Baskerville und was auch immer. Es ist eine Google-Schriftart und es ist eine sehr beliebte Schriftart von Typekit. Dann haben wir noch wenige andere Kombinationen wie diese. Sie können sie sehen und Inspiration bekommen und sogar Sie können diese Kombinationen in Ihren Designs verwenden. Dann fahren Sie mit dem nächsten Werkzeug fort. Es ist ein sehr praktisches Tool, Web Font Blender. Nun, was sein Zweck ist, können Sie eine dieser Überschriften, Zeilen oder irgendetwas auswählen , und Sie können Schriftart dafür wählen. Als ob ich Lato hier drüben benutzen kann. Ich werde Lato 900 für diesen hier verwenden. Dann werde ich Lato regelmäßig benutzen, vielleicht für diesen und 300, und ich werde Open Sans für diesen Bereich verwenden. Öffne Sans regelmäßig. Jetzt können Sie sehen, dass dies ein sehr gutes Werkzeug ist. Es kann Ihnen auch einen Code für diese Mischung geben, oder Optionen, die Sie eingerichtet haben, und auch die Größen in ems und anderen Sachen, die rein zur Programmierseite hin sind. Jetzt können Sie hier sehen, dass wir Lato und Open Sans kombiniert haben, und sie sehen sehr schön zusammen aus. Dies ist die Kombination, die Sie verwenden können, eine Überschrift, dann Untertitel und dann den Absatz. Meistens braucht man meistens nur drei Stile. Auch Sie können nur zwei von diesen wie kombinieren, Überschrift und den Absatztext. Nun, dies ist auch ein sehr praktisches Werkzeug, das typewonder.com ist. Was es tut, ist, dass Sie die URL einer beliebigen Website angeben, wie ich meine eigene Website, learnuxid.com, und klicken Sie auf „Go“. Dann können Sie eine beliebige Schriftart auswählen, die Sie auf dieser Website anwenden möchten, Live-Website. Ich möchte, dass meine Website in diesem Arvo ist. Ich werde es benutzen. Es wird meine Website-Vorschau mit dieser Schriftart zeigen. Sieh es dir an. Schauen Sie und sehen Sie, hier ist es und es sieht nicht sehr gut aus. Ich kann die Schriftart ändern, wenn ich will, wie diese. Es gibt viele andere Schriftarten, wenn Sie unter diese Zeile gehen. Ich werde diesen Vollkorn wählen, und ich werde ihn benutzen. Mal sehen, was es tut. Ich denke, es hat sich bereits beworben. Wir haben noch ein paar Artikel, und ein paar hilfreiche Werkzeuge und verschiedene Kombinationen, die viele Designer bereits gemacht haben, so dass Sie sie finden können. Ich werde die Links in die Ressourcen für all diese Tools und Artikel einfügen, die ich gezeigt habe. Dies sind wenige Google-Kombinationen. Wenn Sie den Mauszeiger über sie bewegen, können Sie den Link zu diesem Schriftstil sehen. Das ist im Grunde Raleway. Wenn Sie sich die linke untere Ecke meines Bildschirms ansehen, können Sie sehen, dass der Link angezeigt wird. Dies ist auch zwei Schriftarten, die im Grunde Playfair plus Anzeige Google-Schriftart ist. Dies ist auch eine andere Google-Schriftart, Quando. Dies ist eine weitere dritte Form. Das ist Signika. Es ist sehr schwierig, drei verschiedene Schriftarten zu kombinieren, auch für Leute, die verwenden, und versuchen, typographische sogar seit Jahren zu koppeln. Ich würde sagen, lasst uns bei zwei bleiben. Wenn Sie eine sehr gute Kombination finden, die für Ihr Projekt geeignet ist, können Sie sie von hier finden, und Sie können sie verwenden. Sie können hier sehen, wir haben einen anderen Sans Source Pro. Dies ist alles Sans Source Pro einzelne Schrift, und mit einer großen Familie. Dies sind alle hilfreichen Tools, die Sie online erhalten können. Es gibt 100daysoffonts.com und es zeigt auch viele tolle Typographie-Experimente. Die meisten von ihnen sind Google-Schriftarten. Sie können Lora und Roboto sehen, und sie werden sehr gut zusammen. Dies sind Kombinationen von sehr professionellen Topographiemeistern. Ich denke, es ist eine sehr, sehr einzigartige Fähigkeit und sehr schwierig, Fähigkeiten zu erlernen. Es dauert Jahre, um diese typographische Kombinationsfertigkeit zu meistern. Dann haben wir noch einen Artikel, den ich sehr mag. Dies ist The Ultimate Guide Font Peering von canva.com. Ich werde alle diese Links in die Ressourcen einbeziehen. Sie können das PDF herunterladen und diese Artikel und diese Tools sehen. Sie können hier sehen, es hat einige Einführung in die Topographie wie Cap-Height, X-Height, Terminal, Baseline. Dann haben sie verschiedene Arten von Typographie-Klassen wie Script Serif, Sans Serif, Slab Serif, Alignment, Hierarchie. Dann hatte es viele verschiedene tolle Kombinationen. Sie können sehen, auch es zeigt die Größen hier drüben, wie diese, 57 PT Großbuchstaben, 27 PT Kursiv. Sie können all diese verschiedenen Kombinationen verwenden und diesen Artikel weiter lesen. Dies ist sehr guter Artikel für Anfänger. Das ist es um die Schriftpaarung. Hoffe zu sehen, dass ihr Jungs besser in der Gestaltung und Anwendung dieser typografischen Fähigkeiten auf eure Entwürfe. 51. Raster im Webdesign verwenden: Lassen Sie uns über Gitter sprechen und wie wir nach Rastern entwerfen. Gitter sind im Grunde verschiedene Spalten mit spezifischer Breite und sie haben ein wenig Abstand dazwischen. Sie können in diesem Beispiel sehen, ich zeige Ihnen hier drüben, das ist ein Web-Design, Lernen, Design, das ich für einige Unternehmen getan habe. Sie können sehen, wie ich alles angelegt habe. Lassen Sie mich Ihnen zeigen, wie Sie sie verwenden und die Grundlagen des Grid-Systems. Normalerweise im Web-Design oder wenn Sie eine mobile App entwerfen, müssen Sie wirklich Grid-System kennen. Es hilft Ihnen, auszurichten und legen Sie Ihre Seite sehr schön und es hilft bei der Gestaltung viel. Mal sehen, wie wir nach Gittern entwerfen und wie sie erstellt werden. Der erste Schritt ist, was sind Gitter und was sind die Räume an allem? Das sind Spalten, ich zeige sie in Grau. Sie sind 12 Spalten. Raster haben unterschiedliche Spalten; 12, 16, 24. Die beliebtesten sind 12 und 16. Die Zwischenräume zwischen den einzelnen Spalten, beginnend von hier, beachten Sie diese beiden an den beiden Ecken. Das sind im Grunde Dachrinnen. Wir nennen sie Dachrinnen. Das sind Räume. Wir können eine gewisse Trennung zwischen Inhalt und Layoutabschnitten haben. Lassen Sie mich Ihnen ein Beispiel zeigen, wo ich das verwendet habe. Wenn Sie sich auf diesen Bereich konzentrieren, können Sie sehen, dass dieses Video und dieses Aufzählungszeichen, sie sind durch diese Rinne getrennt. Sie können hier drüben sehen, dass ich diese Gosse verlassen habe. Dieser Teil nimmt ein, zwei, drei, vier, fünf, sechs Spalten ein. Dieser Teil nimmt auch sechs Spalten. Wenn ein Entwickler versucht, Ihr Design in einige Codierungssachen zu verwandeln, ist es sehr einfach für sie, dieser Spalte oder dem System im Entwicklungs- und Codierungsprozess zu folgen . Sie werden sechs Spalten für diese eine und sechs Spalten für diese eine verwenden. Die beliebtesten Gitter, die Sie vielleicht als Bootstrap und Foundation bekannt haben, all dies. Dies ist die Basis von Grid-Systemen. Wenn Sie hier schauen, dieses Logo dieses Webseiten-Design, es ist in ein, zwei, drei Spalten enthalten, aber es ist auch berühren diese vierte Spalte und es ist innerhalb der Rinne der vierten Spalte. Es wird im Grunde vier Spalten dauern. Wir können nicht sagen, dass es nur drei Spalten braucht. Wenn ein Konstruktionselement einen Dachrinnenabschnitt einnimmt, wird es die nächste Spalte darin enthalten. Dies ist im Grunde, wenn Sie sich diese Telefonnummer ansehen, können Sie sehen, dass es zwei Spalten nimmt, aber es nimmt tatsächlich drei Spalten. Da sich dieses Symbol in der Dachrinne der nächsten Spalte befindet, werden die Programmierer es so programmieren, als würden sie drei Spalten für diese Telefonnummer aufnehmen. So verwenden wir Gitter. Nun, diese Guides am Ende, sie sind kleiner. Sie sind im Grunde Margen. Sie werden normalerweise in der Programmierung verwendet. Während der Gestaltung werden wir uns nicht um die Margen kümmern, aber wir werden nichts davon bekommen. Wir werden nur die linke und rechte Seite der Spalten oder zwischen ihnen berühren. Nun, wenn ich das verstecke, können Sie das eigentliche Design sehen. Lassen Sie mich die Guides verstecken. Das war das eigentliche Design. Jetzt können Sie sehen, dass es mit Hilfe von Guides wirklich gut aussehen kann. Wenn ich sie anschalte, sehen Sie diesen Teil. Ich habe eine, zwei, drei, vier, fünf, sechs, sieben, acht Spalten für diesen Bereich und eine, zwei, drei, vier Spalten für diesen Bereich verwendet. Hier habe ich diese eine Spalte benutzt, um hier drüben mehr Platz zu bekommen. Das ist ein Trick. Beschränken Sie sich nicht, wenn Sie Spalte hier, Rasterspalte sehen und nicht versuchen, sie immer zu verwenden. Du könntest es hier lassen, um mehr Platz zu haben. Sie können sehen, dass zwischen diesem Inhaltsbereich und diesem Inhaltsbereich viel Platz vorhanden ist. Dies ist die Grundlagen des Grid-Systems. Das sind Dachrinnen zwischen ihnen. Sie sind, denke ich, 30 Pixel. Sie können im Titel hier sehen, 15-Pixel-Rand und Rinne ist 30 Pixel. Hier geht es um Gitter und darum, wie man sie benutzt. Was sind die Grundlagen der Gitter, dass wir Spalten, Rinnen und Ränder im Raster auf beiden Seiten haben, rechts und ganz links. Gehen wir zum nächsten Vortrag, wo ich Ihnen zeigen werde, wie Sie diese Raster in Photoshop erstellen und einige Erweiterungen verwenden. Fahren wir mit der nächsten Vorlesung fort. 52. Raster in Photoshop erstellen: In der letzten Vorlesung haben wir über Gitter und das Design mit Rastern gelernt, so wie wir verschiedene Dinge mit unterschiedlichen Spaltengrößen anlegen. In dieser Lektion werde ich Ihnen zeigen, wie Sie verschiedene Typen und verschiedene Raster mit Photoshop erstellen, lassen Sie mich zuerst Photoshop-Standard-Rastersystem verwenden. Nun, was wir verwenden werden, ist, dass wir eine benutzerdefinierte Dokumentgröße 1280 verwenden, die im Webdesign üblich ist, und Höhe ist 1000, 72, nicht Farbe verwalten dieses Dokument, drücken Sie „OK“. Jetzt haben wir unsere Kunsttafel. Nun werden wir das Standard-Guide-System von Photoshop verwenden, um das Raster zu erstellen. Neues Guide-Layout, und wir werden 12 Spalten mit den Rinnen von 20 Pixeln verwenden, Ränder, wenn wir sie wirklich brauchen, können Sie Ränder hier verwenden oder Sie können sie auslassen. Also werde ich Null oberen Rand, Null unteren Rand, und links 10 und rechts 10, drücken Sie „Okay“, jetzt ist Ihr Grid-System bereit. Wenn Sie es wirklich verbessern möchten, können Sie hier verschiedene Rechtecke hinzufügen und sie kopieren und in der Alt-Taste duplizieren, weil dies Ihrem Design wirklich helfen kann. Am Ende werden Sie diese Führer, blaue Führer, ausräumen. Was am Ende bleiben wird, werden diese grünen Linien, diese Spalten sein. Kopieren Sie sie so, ich werde alle von ihnen auswählen und sie in einem Gittersystem zusammenführen, und hier haben wir unser Rastersystem, Sie können jetzt Ihre Führungen löschen, „Clear Guides“. So entwerfen wir ein Gitter, es ist 12 Spalten und mit 20 Pixel Rinne und 10 Pixel Rand. Wenn wir also versuchen, etwas zu entwerfen, werden wir so gestalten wie Logo hier sein wird. Lassen Sie mich einfach die Farbe ändern, und für unser Beispiel wird die Navigation hier drüben so sein. So gestalten wir Dinge, ich verwende zwei Spalten für dieses Logo und 10 Spalten für diese Navigation, und dasselbe gilt für andere Elemente Ihrer Webseite. Dies ist eine Möglichkeit, Gitter zu erstellen, dann haben wir dieses GuideGuide Plugin, zuerst war es kostenlos, jetzt habe ich es für nur $5, und ich mag es wirklich, es ist sehr schön. Sie können die Raster, verschiedene Raster speichern und sie erstellen und ihre Sätze speichern. Also das ist GuideGuide Plugin Erweiterung, und ich werde nur diese 12 Spalten verwenden, das sind die Anzahl der Spalten, die Sie sehen können, sie haben verschiedene Felder, Ränder, oben, unten, verschiedene Ränder, dann Spalten, Zeilen. Ich werde nicht in Details des Grid-Systems gehen, ich werde in meinem nächsten Kurs ins Detail kommen , der auf sehr fortgeschrittenes Web-Design und verschiedene Techniken des Web-Designs ist. In diesem Kurs werde ich tiefer über Gitter sprechen und vertikal und Spalte sind beide Gitter. Also im Moment werden wir mit 12 Spalten bleiben, und da wir diese Breite nicht verwenden werden, wissen wir nicht die Breite, also verwenden wir nur 12 Spalten. Lasst uns diesmal 16 Spalten machen. Ich werde den Raum von 15 Pixel hier bekommen, und ich werde auf „Add Guides“ drücken. Jetzt haben wir 16 Spalten Grid System mit diesen 15 Pixel Lücke, und ich denke, wir können es speichern, „Raster speichern“. Wir werden es speichern 16 Spalte, 15 Pixel Rinne, „Raster speichern“. Sie können hier in meinem Saved Guide sehen Sie 16 Spalten, 15 Pixel Rinne sehen, so dass dies ein sehr praktisches Werkzeug ist, das Sie erstellen und viele verschiedene Rastersysteme speichern können. Jetzt können Sie sehen, dass ich viele verschiedene Leitfäden gespeichert habe, die ich erstellt habe, so dass Sie jede Art von Guide erstellen und sie hier speichern können. Es gibt wenige andere Verwendungen dieses Plugins, die linken Rand, Mittelpunkt, rechten Rand, klare Führungen sind , können Sie leicht löschen Sie die Führungen mit diesem Knopf hier über. Lassen Sie mich Ihnen die anderen Dinge zeigen, die wir mit diesem Plugin tun können, lassen Sie mich einfach dieses Rechteck auswählen und die Auswahl um sie herum bekommen, dann können wir leicht Führungen haben: Mittelpunkt, links, rechts , oben, Mittelpunkt, unten, also ist dies eine weitere Verwendung dieser Plugin, und es ist ein sehr schönes Plugin, GuideGuide. Dies sind zwei Möglichkeiten, wie Sie Hilfslinien und Raster in Photoshop mit Photoshop Standard, neuen Hilfslinien und neuen Hilfslinien erstellen Raster in Photoshop mit Photoshop Standard, können. Sie können auch dieses GuideGuide-Plugin verwenden. Das war alles, wie man Leitfäden und Raster in Photoshop erstellt, und lassen Sie uns zu einigen neuen großartigen Vorträgen übergehen. 53. Weiche Shadow Challange: Hallo an alle. Das ist meine erste Herausforderung für alle meine Schüler. Grundsätzlich müssen Sie eine Schaltfläche ähnlich dieser erstellen und ich werde Ihnen einige Hinweise geben, was im Grunde genommen zwei Schlagschatten und einen Strich verwendet habe. Also ein Stricheffekt und zwei Schlagschatten. Nun, lass die Herausforderung beginnen. 54. Shadow: Dies ist die Lösung für die Herausforderung. Ich werde diesen Knopf wieder vor dir machen, damit du lernen kannst, wie ich doppelte Schlagschatten und diesen Stricheffektbenutzt und diesen Stricheffekt und wie ich diesen Knopf gemacht habe. Lasst uns anfangen. Zuerst werden wir ein Formwerkzeug abgerundetes Rechteck verwenden. Wir können den Radius verwenden, um so etwas wie acht vielleicht, und ziehen Sie einfach ein Rechteck hier drüben, das ist genug. Nun, ich werde ein bisschen gräuliche Farbe wählen oder etwas näher an blau-grau, wie dieses. Jetzt ist unsere Baselayer fertig. Ich habe hier etwas abgeschnitten, also ist das im Grunde ein Rechteck. Holen Sie sich ein Rechteck hier rüber, und wir werden Rechteck wie dieses erstellen, und wir werden seine Farbe in etwas ändern. Dies sind im Grunde Farbton, Sättigung und Helligkeit. Normalerweise benutze ich diese, um verschiedene Schattierungen von Farben zu erhalten, also werde ich die Helligkeit reduzieren, die der helle Teil unserer Farbe ist, oder vielleicht können wir von, ja, so gehen. Jetzt werde ich Clipping-Maske verwenden, Alt und klicken Sie zwischen diesen beiden Ebenen. Jetzt haben wir unsere Clipping-Maske so. Dieser Knopf war in einer anderen Farbe, ich erstelle dies in ein bisschen Obsidian und medizinisch. Vielleicht haben Sie diese Farbe in Medizin- und Medizinunternehmen gesehen. Nun, im Grunde ist unsere Basis abgeschlossen, jetzt werde ich einige Stile hinzufügen. Dies war unser Container, für Containerbasis können wir es nennen. Sie können hier auf das kleine Fx-Symbol klicken und Drop hinzufügen, beginnende Schlagschatten. Dieser erste Schlagschatten ist im Grunde die Deckkraft beträgt 20 Prozent. Wenn ich versuche, die Deckkraft zu erhöhen, können Sie sehen, dass unser Schatten dunkler wird. Also werden wir so etwas haben, 24 oder vielleicht 20 ist okay. Dann beträgt die Entfernung 21 Pixel. Wenn ich die Entfernung verkleinere, können Sie sehen, dass wir Schatten auf der Oberseite dieser Ebene haben, die wir nicht wirklich wollen. Wir wollen nur den Schatten unten. Ich werde diese Distanz erhöhen, bis ich das Gefühl habe, dass es gut aussieht, 15 wird gut sein. Nun, ich werde einen weiteren Schatten hinzufügen, klicken Sie hier. Im Grunde habe ich hier einen weiteren Schatten hinzugefügt, der etwas näher an der Ebene war, und etwas undurchsichtiger anstatt transparent. Ich werde die Deckkraft ein wenig erhöhen. Wir können auch die Distanz erhöhen. Wenn ich diese Ebene verberge, können Sie nur sehen, was mit unserem Schatten passiert. Jetzt ist es weg und jetzt ist es eingeschaltet. Dies ist im Grunde der Effekt, den wir suchen. Wir fügen hier im Grunde zwei Schlagschatten hinzu. Man ist etwas dunkler und näher an der Schicht, man ist etwas heller und es hat eine gute Spanne um die Formschicht, also ist es im Grunde ein breiter Schatten. Sie können sehen, dass die Größe 25 und die Entfernung 15 Prozent beträgt. Dies ist, wie wir diese Schatten hinzugefügt haben, und lassen Sie uns die Deckkraft auf 25 reduzieren, die Entfernung ein bisschen mehr reduzieren. Jetzt ist es ein bisschen weich. Vielleicht fünf, weil wir Schatten an der Spitze bekommen, und wir werden das reduzieren. Machen wir es zehn. Jetzt sieht es fast gleich aus. Sie können diese Farbe auch hier für den Schatten ändern. Wir können ein hellgrau haben, Sie können sehen, dass es nur seine Wirkung ändert. Wenn Sie nicht sehr harten Schatten wollen, können Sie eine andere Farbe wie diese verwenden. Grundsätzlich geht es darum, diese Deckkraft, diese Entfernung und Größe zu kontrollieren . Wenn wir diesen Spread verwenden, können Sie sehen, dass er diesen Schatten im Grunde ein bisschen solide macht, so dass wir wirklich nicht wollen. Wir werden die Ausbreitung jetzt nicht benutzen. Drücken Sie „Okay“ und jetzt haben wir nur noch eine Sache, die im Grunde der Schlaganfall ist. Ich werde auf diese Effekte klicken und ich werde einen Schlaganfall hinzufügen. Ich werde die Farbe des Strichs aus dieser Farbe auswählen, oder ich kann eine etwas dunklere Farbe bekommen, indem ich die Helligkeit auf 85 Prozent reduziere, vielleicht sind 90 Prozent gut genug. 90 Prozent sehen gut aus. Jetzt habe ich diesen weichen Schatteneffekt erstellt, jetzt werden wir hier Text hinzufügen. Im Grunde, was ich getan habe, ist, dass ich diese Schriftart genial Plugin verwendet habe, um dieses Symbol hier drüben zu bekommen. Wir können jedes Symbol wie vielleicht dieses Ambulanz-Symbol wird den Trick tun. Jetzt können Sie sehen, sobald ich das zwischen diesen beiden Ebenen hinzugefügt habe, unsere Clipping-Maske verschwunden, also ist dies der Grund, warum dies passiert. Ich werde dieses Symbol oben über ziehen, ich werde die Clipping-Maske wieder erstellen. Ich gehe zu „Control D“ zu transformieren, und ich werde drücken „Shift“ und „Alt“, um die Größe zu erhöhen, ich halte Shift und Alt-Taste. Ich schätze, das ist gut genug. Ich werde es in die Mitte bringen. Jetzt können wir auch ein bisschen eine stumpfe Farbe wählen, weil es sehr scharf für unsere Augen ist, 50 Prozent so. Ich wähle nur diese Farbe und ich reduziere die Helligkeit auf 50 Prozent oder vielleicht mehr, wir können auf 30 Prozent gehen oder vielleicht 25 Prozent. Ich schätze, 30 Prozent waren gut genug. Jetzt ist der Icon-Teil fertig, ich werde jetzt etwas Text hier hinzufügen. Ich benutze diesen offenen, regulären Schriftstil, und ich verwende diese 36 Pixel-Schriftgröße. Sie können „Shift“ drücken, so dass es sich nur in diesem Feld befindet. Drücken Sie „Shift“ und klicken Sie, und wir rufen einen Krankenwagen, Krankenwagen ist gut. Grundsätzlich ist unser Text ein bisschen länger, so dass wir die Größe dieses Basiscontainers, „Control D“, vergrößern können und ich werde diese Ecke einfach so hierher ziehen. Ich werde hier klicken: „Rufen Sie einen Krankenwagen.“ Jetzt ist hier unser grundlegendes Problem die Ausrichtung. Lassen Sie uns einige Hilfslinien verwenden, um diese auszurichten. Ich werde auf „Steuerung und Doppelpunkt“ klicken, um meine Guides herauszubringen, ich werde dies löschen. Ich werde auf diese klicken, „Control“ klicken. Ich verwende keine automatische Auswahl, also kontrolliere ich, indem ich auf eine beliebige Ebene klicke, um sie auszuwählen. Ich werde steuern, klicken Sie auf diese, und ich werde die Ebene so ziehen. Jetzt werden wir im Grunde einige Leitfäden setzen, um unser Symbol und unseren Text in der Mitte dieses Buttons auszurichten. Ich habe einen hier drüben gesetzt, und einen brauche ich hier drüben, so. Lassen Sie uns unser Plug-in hier verwenden, das QuickGuide war, und ich werde die Führungen rund um diese Schaltfläche schnell erstellen. Jetzt ist es im Grunde auch in den Schatten zu bekommen, also lassen Sie diese Effekte deaktivieren und diese erstellen. Nun, die sind gut. Ich schalte diese Effekte ein. Wir haben diese beiden Teile hier drüben, ich werde „M“ drücken oder im Grunde dieses Festzelt Werkzeug. Ich werde dieses rechteckige Festzelt Werkzeug auswählen, und wir werden eine Auswahl zwischen diesem treffen. Wir haben eine Auswahl und dann werden wir auf diese klicken Rufen Sie einen Krankenwagen. Jetzt haben wir zwei grundsätzlich Objekte auszurichten. Wir werden dies ausrichten Rufen Sie einen Krankenwagen nach dieser Auswahl. Ich werde „V“ drücken und auf dieses mittlere Symbol klicken, jetzt ist es ausrichten, auch dieses. Wir werden hier eine weitere Auswahl erstellen, und wir werden dieses Fa-Ambulanz-Symbol auswählen und wir werden es in der Mitte ausrichten. Ich schätze, es ist fast in der Mitte, ich werde sehen. Nein, es ist nicht in der Mitte. Ich denke, wir haben eine Richtlinie, die nicht genau ist, was diese ist, denke ich. Jetzt sind wir gut zu gehen. Ich kann so auswählen und „V“ drücken und in der Mitte ausrichten. Manchmal, selbst wenn Sie es nach Ihrer Mathematik ausrichten, sieht es nicht zentralisiert auf Ihre Augen oder menschliche Augen aus. Um es visuell zentriert zu machen, können Sie es wie anpassen, ich denke, ich muss es ein Pixel oder vielleicht zwei Pixel hier über bewegen , weil diese Form im Grunde anders ist. Nun schätze ich, es sieht in der Mitte, fast in der Mitte, und wir haben diese weiche Schattenübung abgeschlossen. Ich hoffe, ihr habt von hier etwas Neues gelernt. Gehen wir zur nächsten Vorlesung. 55. 3D-Knopf-Design Challange: Okay, Leute, hier ist eine weitere Herausforderung für euch. Es ist auch eine Taste, aber es ist eine 3D-Taste. Versuchen Sie, etwas Ähnliches zu erstellen. Ich werde Ihnen hier ein paar Hinweise geben. Dieser ist Schatten und man kann hier einen sehr leichten und subtilen Schatten sehen. Ich habe zwei Schatten benutzt. Es gibt auch eine sehr dünne Schicht des Strichs innerhalb des Strichs und dies ist nur eine Linie, die Sie von hier aus verwenden können, Line Tool. Nur eine Linie mit der Farbe, die ein bisschen dunkler ist als dieser Hintergrund. Dies sind alle Hinweise und ich hoffe, dass Sie etwas Ähnliches schaffen können. Ich werde uns bald eine Lösung in einem anderen Video veröffentlichen. So können Sie leicht solche Muster erstellen. Ich hoffe, Sie haben diese Herausforderung genossen und lassen Sie mich sehen, was Sie erreichen können und zeigen Sie mir Ihre Links und Diskussionen und ich denke, das ist es über diese Herausforderung. 56. Gepresste Effekt in Photoshop: Hallo an alle. Heute werden wir diesen gedrückten Effekt erzeugen. Es ist sehr wichtig in allen UI-Designs zu zeigen, dass es gedrückte Zustände von Tasten gibt, und es wird an vielen Orten verwendet. Sie sollten diese Technik immer beherrschen. Lassen Sie uns das schnell erstellen. Öffnen Sie eine neue Datei. Ich werde diese öffnen, Alt, löschen, um die Leinwand mit der Vordergrundfarbe zu füllen. Wir werden dieses abgerundete Rechteck-Werkzeug verwenden, um ein abgerundetes Rechteck wie dieses zu zeichnen. Ich werde ein bisschen größeres erstellen, damit Sie es leicht sehen können. Ich habe das hier erschaffen. Lassen Sie uns die Hintergrundfarbe ändern. Ich verwende ein einfarbiges Farbfeld für den Hintergrund. Ändern Sie es in so etwas wie dieses. Jetzt haben wir dieses abgerundete Rechteck erstellt. Lassen Sie uns so einige Leitfäden erstellen. Zeichnen Sie nun ein weiteres abgerundetes Rechteck von der Mitte zu diesem Abschnitt. Das wird gedrückt werden. Deaktivieren Sie in den Eigenschaften dieses, und wir werden die linke zu rundlos für diese entfernen. Wir sind gut zu gehen. Lassen Sie uns diesen Knopf in so etwas ändern, vielleicht wird ein schärferes blaues Aussehen gut aussehen. Jetzt ist unsere Grundstruktur fertig. Lassen Sie uns einige Effekte um sie herum erstellen und einige Ebenenstile darauf setzen. Lasst uns zuerst einen Text darüber legen. Text sollte etwas sein. Ich werde eine andere Technik zeigen. Ich gehe, wähle den Fetttext aus und ändere gleichzeitig ihre Größe. Dies ist eine andere Technik, viele Designer wissen es nicht. Wir werden sie wieder auf diese Weise mit unseren Führern ausrichten. Alt Control H, da ist etwas Seltsames. Nun, hier dieser hier, tut mir leid. Wählen Sie diese und wir werden es wieder in der Mitte ausrichten. Das war's. Jetzt werden wir diesen Druck auf weiße Farbe ändern, nur um sicherzustellen, dass es gut aussieht. Entfernen Sie die Hilfslinien, blenden Sie die Hilfslinien aus. Zuerst werden wir Stile auf diese innere Ebene anwenden. Dies ist die Ebene im Inneren, wir werden Layer-Stile in einem Schatten anwenden. nun im inneren Schatten sicher, dass Sie multipliziert und Farbe schwarz ausgewählt haben. Verwenden Sie keine andere Farbe. Sie können auch dunkleren Farbton für dieses Blau verwenden, aber ich denke, Schwarz ist besser. Dann verwenden Sie diese Deckkraft. Wenn Sie mehr dunklere Wirkung wollen, können Sie von hier aus gehen. Vielleicht sollten wir es auf 50 Prozent setzen. Distanz, es liegt an Ihnen, Sie können wählen, welche Entfernung Sie wählen, aber gehen Sie nicht zu weiter, weil es Ihren Effekt ändern wird. Es wird nicht manchmal gedrückt aussehen. Halten Sie es kurz, wie fünf oder drei Pixel ist mehr als genug. Die verschwommene Größe sollte etwas höher als diese Größe sein. Machen Sie es neun oder 10 oder so etwas näher an diese. Wir brauchen keine anderen Dinge, Licht sollte aus dem 90-Grad-Winkel sein. Drücken Sie „OK“, und das ist fast die Hälfte unseres gepressten Effekts. Jetzt schaffen wir noch eine Sache. Nun, wenn das Licht von hier fällt, sollte es etwas Glanz auf diesem Bereich haben. Um dies zu erstellen, werden wir diese Ebene auswählen, die andere, die der Container tatsächlich war, und wir werden ein paar Stile darauf anwenden. Zuerst werden wir Schlaganfall anwenden. Denken Sie daran, dass der Schlaganfall dunkler sein sollte als dieser Hintergrund. Ich werde diesen Hintergrund auswählen, und ich werde die Helligkeit auf 65 Prozent reduzieren. Jetzt ist unser Schlaganfall fertig. Nun lasst uns zum Schlagschatten gehen. Jetzt brauchen wir dieses globale Licht nicht, weil wir es auf der anderen Seite nutzen werden. Neunzig Grad, ja, wir werden es an der Spitze verwenden, und wir werden weiße Farbe verwenden, und entfernen Sie diese multiplizieren, wir werden es normal verwenden. Jetzt können Sie sehen, wie es hier auf diesem Gebiet den Glanz bekommt. Dann werden wir es reduzieren, weil es einen sehr großen Glanz bekommt. Eins für diesen einen und zwei für diesen. Ich schätze, das ist gut genug. Eins für die Entfernung und zwei für die unscharfe Größe. Das ist im Grunde, wie wir hier drüben dieses gepresste Licht erschaffen werden. Das Zeug sah wirklich gedrückt aus. Jetzt sind wir mit diesem Effekt fast fertig. Lassen Sie mich Ihnen zeigen, indem Sie hineinzoomen, Sie können sehen, wie das funktioniert. Wir zeigen eine sehr schlanke Strichlinie um sie herum und dann zeigen wir hier drüben Glanz und im Schatten hier drüben. Wenn Sie den inneren Schatten reduzieren möchten, können Sie ihn auf drei Pixel reduzieren. Ich werde rauszoomen. Sie können sehen, wie dieser gedrückte Effekt funktioniert. Hier geht es darum, diese gedrückten Effekte und gedrückten Tasten und gedrückten Zuständen für verschiedene Objekte zu erstellen. Es hat eine Menge Verwendung UI. Wir sehen uns in der nächsten Vorlesung. 57. Modernes Header Teil 1: Heute werden wir diese modern aussehenden Header entwerfen. Lasst uns anfangen. Ich werde eine neue Datei öffnen, oder Sie können ein neues Kunstboard öffnen. Ich werde die Breite und Höhe auf maximal 1920 einstellen und die Höhe auf etwa 700 Pixel einstellen. Hier ist unser Kunstboard. Jetzt werde ich eine kostenlose Datei verwenden, die ich von dieser Seite heruntergeladen habe, unsplash.com. Sie können auch viele kostenlose Bilder von hier herunterladen. Lassen Sie mich Ihnen jetzt die Bilder zeigen, die ich bereits heruntergeladen habe. Das Bild ist dieses, 6H. Jetzt ziehe ich es in meine Leinwand, so. Nun, um dieses Bild zu enthalten, brauche ich ein paar Container, also werden wir hier drüben einen Container benutzen. Lassen Sie uns unseren Container mit diesem Rechteck-Werkzeug zeichnen. Ein Klick auf dieses Kunstbrett hier drüben, geben Sie die Breite 1920 und Höhe 700 ein. Wir werden den Container in voller Größe verwenden, so. Drücken Sie „V“ und bewegen Sie diesen Container so hierher. Benennen Sie ihn Container im Ebenenbedienfeld. Verschieben Sie dieses Bild nun über diesen Container, weil wir es in diesem Container abschneiden werden. Lassen Sie mich seine Farbe ändern, damit sie sichtbar ist. Wählen Sie nun die obigen Ebenen, die im Grunde die Bildebene ist, und versuchen Sie, die Größe so zu ändern. Das war's. Jetzt werden wir dieses Bild zuschneiden, damit wir es in diesem Container bewegen können. Klicken Sie auf „Alt“ oder „Wahltaste“, wenn Sie auf einem Mac sind. Wenn Sie sich auf einem PC befinden, klicken Sie auf „Alt“ und drücken Sie zwischen diesen, klicken Sie einmal. Jetzt ist dieser beschnitten. Ich kann es hier drüben so bewegen. Wenn wir es wirklich anpassen müssen, bewegen wir es vielleicht so, nach oben oder unten. Nun, der zweite Schritt ist, dass wir unser Farbverlaufs-Overlay verwenden, um einen dunklen oder weißen Bereich zu erstellen , so dass unser Text leicht angezeigt wird und auf unserer modernen Kopfzeile lesbar ist. Lass uns das machen. Klicken Sie auf den Container und klicken Sie auf das FX-Symbol. Wir werden Gradienten Overlay verwenden. Denken Sie daran, wir werden den Farbverlauf multiplizieren. So wird es einige seiner Farben im vorherigen Hintergrund hinzufügen, der bereits hier ist. Stellen Sie nun den Mischmodus auf Multiplikation ein. Kommen Sie zum Farbverlauf, klicken Sie darauf. Jetzt verwende ich im Grunde eine graue oder dunkelgraue Farbe nahe an Schwarz, und ich verwende ihre Deckkraft zu 100 Prozent. Auf der anderen Seite verwende ich weiße Farbe und Deckkraft ist Null. Grundsätzlich ist es ein schwarzer bis transparenter Farbverlauf. Das war es, was ich dir wirklich zeigen musste. Nun, was das im Grunde tut, ist, es wird einige Bereiche hier zu schaffen, um den Text einfach hier zu schreiben. Nun, das sind die Einstellungen. Halten Sie den Winkel auf 90 und den Stil auf linear. Das war's. Wir werden diesen Ebenenstil anwenden, der Verlaufsüberlagerung ist. Nun, dieses Farbverlaufs-Overlay ist sehr beliebt. Viele Designer benutzen es die meiste Zeit. Dies ist sehr praktische Technik, wenn Sie einige Teile oder die Kopfzeile erstellen müssen, in der Sie den Text schreiben möchten. Manchmal ist der Text möglicherweise nicht sichtbar oder kann aufgrund der Hintergrundfarbe nicht lesbar oder sichtbar sein. Wir verwenden also Gradientenüberlagerungen, um diese Aufgabe zu erfüllen. Lassen Sie uns Typografie wählen. Ich verwende Montserrat bold font und Source Sans Pro für diese Übung. Jetzt können Sie Mons Typ hier wählen. M-O-N, sehen wir, wo es ist. Hier ist es, Montserrat mutig. Jetzt werde ich hier rüber ziehen. Das ist ein weiteres Problem. Drücken Sie „Shift“ und klicken Sie hier, damit wir aus diesem Problem von Photoshop und Eingabe innerhalb der Ebenengrenzen. Lassen Sie uns auf den Weg des Erfolgs gehen. Der Text kann nicht angezeigt werden, da sich der Layer hinter dem Bild befindet. Lassen Sie es das Bild nach oben verschieben und seine Farbe in ein dunkleres Schwarz ändern, etwas so. Lassen Sie mich die Texte sehen, die ich wirklich in meiner Übungsdatei verwendet habe, die auf dem Weg des Erfolgs fliegen war. Es war fliegen auf dem Weg des Erfolgs. Bitte entschuldigen Sie mein Gedächtnis, ich bin sehr kurzgedankliche Person. Ich vergesse wirklich eine Menge Dinge. Fliegen Sie auf dem Weg des Erfolgs. Jetzt machen wir es regelmäßig und wir werden Middle Align verwenden. Verschieben Sie es nun in die Mitte des Bildes. Control A und Control Alt und H für horizontale, dies war unsere benutzerdefinierte Tastenkombination, so denken Sie daran. Jetzt werden wir einige der Größen festlegen. Dies ist Dummy-Schicht. Doppelklicken und sehen, welche Größe wird uns hier helfen. Ich denke, 48 Pixel sind mehr als genug. Wenn wir die Linienhöhe ändern müssen, können wir sie hier so ändern. Ich schätze, 78 sieht perfekt aus. Erstellen Sie nun einen Begrenzungsrahmen um ihn herum, wie wir in unserer Übungsdatei haben, erstellen Sie so etwas. Nur ein Rechteck hier drüben. Jetzt werden wir einige Stile anwenden, die im Grunde Strich auf dieses Rechteck ist. Lassen Sie den Strich einfach auf etwa fünf oder vielleicht acht Pixel. Position sollte außerhalb sein, kein Innen, denn wenn wir die Außenseite setzen, zeigt es etwas abgerundetes Rechteck. Wir brauchen jetzt kein abgerundetes Rechteck, wir brauchen ein perfektes Rechteck mit Kanten. Jetzt haben wir das eingerichtet. Jetzt werden wir zu dieser Füllung gehen und sie auf Null reduzieren. Jetzt haben wir unser transparentes Rechteck hier drüben. 58. Modernes Kopfdesign Teil 2: Das ist es, und jetzt werden wir eine weitere Grundfarbe verwenden. Sie können unsere Haupt-Call-to-Action-Schaltfläche sehen. Lassen Sie mich einen Knopf hierher ziehen. Wir werden seine Farbe auf Gelb setzen. Lassen Sie uns dieses Gelb ein bisschen heller in der Farbe machen, bewegen Sie sich in diesen Bereich hier drüben. So etwas wie das. Das war's auch. Nun fügen wir diesem Muster Schatten hinzu, Schlagschatten, und verwenden Sie diese Einstellungen. Multiplizieren Sie, 35 Prozent Deckkraft, Abstand drei und Größe sieben Prozent. Unsere Schattenunschärfe wird auf sieben Pixel um den Boden verteilt und der Abstand beträgt drei Pixel. Wenn Sie es reduzieren möchten, können Sie es wie fünf oder so etwas reduzieren. Nun, da der Schatten fertig ist, lasst uns etwas drauf schreiben. Werden Sie jetzt erfolgreich. Wir werden diese Schriftgröße reduzieren. Wir werden es reduzieren, indem wir unsere Schriftart hier drüben verwenden, was einfacher und schneller ist, denke ich, als die Tastenkombination zu verwenden. Ich habe seine Größe auf 24 Pixel eingestellt, und wir sind jetzt gut. Vielleicht können wir es dunkler machen, tiefschwarz. Wählen Sie nun diese beiden Ebenen und Control G aus, gruppieren Sie sie und erstellen Sie eine Schaltfläche. Wir benennen alle Schichten. Benennen Sie es in Grenze um, so etwas. Das war's für diesen Teil. Jetzt gehe ich zum nächsten Teil, der hier und hier war. Das ist im Grunde, wir werden hier weiße Farbe verwenden. Vielleicht vollweiß oder so etwas in einer grau-weißen Farbe. Ich werde die Schriftart verwenden, die Source Sans Pro Regular ist, denke ich, vielleicht Light. Schließen Sie sich dem Erfolg von 14.532 anderen Idioten an, genau wie Sie. Das ist eine gute Linie, um der Community beizutreten. Nun, eine Sache, die wir am Anfang verpasst haben, nämlich im Grunde unsere Margen zu bekommen, ist Raum um unser Design. Das werde ich schnell zeichnen. Klicken Sie dazu auf „Control“. Klicken Sie auf den Container und klicken Sie hier, „QuickGuide“, klicken Sie in der Mitte, um Führungen um ihn herum zu erstellen. Dann werden wir Griddify verwenden und zu Spacing gehen. Ich werde 60 Pixel um mein Design so verwenden. Ich werde die Richtung nach oben und unten ändern. Dies ist im Grunde, um Ihr Design in Einklang zu bringen. Jetzt werde ich meinen Text nach diesen verschieben. Sie können sehen, wie ich dieses Griddify und diese beiden Plug-Ins zu meinem Design, Control J verwendet habe und die gleichen Texte hier drüben kopieren und so hierher verschieben. Jetzt werden wir hier ein Bild hinzufügen, das so jemand war, lesen Sie die neueste Geschichte von Johns Erfolg. Lassen Sie es uns zuerst neu formulieren. Lassen Sie uns Johns Erfolgsgeschichte auf unserer Plattform lesen Johns Erfolgsgeschichte . Jetzt sieht das gut aus. Für das Bild werden wir eine Website verwenden, die UI Faces genannt wird. Ich schätze, da ist der Name, uifaces.com. Gehen Sie zu dieser Website und verwenden Sie ein Bild von hier. Lasst uns das hier benutzen. Ich habe diesen benutzt. Sie können jede andere verwenden. Können Sie gehen zurück und ziehen Sie dieses Bild in Photoshop so. Wir werden es hier rüber bringen. Um dieses Bild zu enthalten, benötigen wir nun auch ein Eclipse-Tool oder einen Eclipse-Container. Ziehen Sie es so und wir werden dies in dieser Finsternis behalten. Sonst nichts. Wir müssen nur unsere Sonnenfinsternis etwas größer anpassen. Passen Sie dieses Bild an. Noch ein Tipp. Erstellen Sie so ein Smart-Objekt aus diesem Bild. Ich habe Control Alt F5 gedrückt, um dieses Bild in ein Smart-Objekt zu konvertieren. Machen wir es etwas kürzer oder kleiner. Nicht kürzer, vielleicht könnte diese Person wütend werden, um kürzer zu werden. Vielleicht so drücke ich Shift und Alt damit, so. Jetzt werden wir es in der Mitte ausrichten, also gruppieren Sie sie zusammen und erstellen Sie eine Bildgruppe. Ich werde es in der Mitte so ausrichten. Lassen Sie uns die Ebenen Control Doppelpunkt ausblenden. Nun, hier haben wir das Problem, dass unser Bild weniger Platz in diesen Bereichen hat. Lasst uns zu diesem Punkt kommen. Reduzieren Sie das ein bisschen. Bewegen Sie Ihren Knopf ein bisschen nach oben, so. Reduzieren Sie außerdem den Strich auf fünf Pixel und die Farbe auf ein bisschen dunkleres Grau anstatt auf bläulich-grau. Reduzieren Sie diese Tastenhöhe, die für mich etwas seltsam aussieht. Machen Sie es 85 so. Außerdem werden wir sehen, ob die Kanten so abgerundet werden müssen. Ja, vier Pixel Rundheit in Ihren Eigenschaften. Legen Sie dies für die Schaltfläche fest. Ich schätze, das ist eher das, was wir entworfen haben. Wenn Sie wirklich sehen müssen, wie unser Design aussieht, können Sie sehen, dass ich gleiche oder ähnliche Räume um mein Design herum gelassen habe, was Ränder genannt wird. Dies sind 60 Pixel, 60 Pixel, 60 Pixel und 60 Pixel. Lassen Sie uns einfach diese Grenze und den Knopf ein bisschen in unserem 60 Pixel-Bereich so bewegen. Ich schätze, es fühlt sich immer noch ein bisschen breiter an. Machen wir es kürzer und bewegen Sie den Knopf ein bisschen nach oben. In der nächsten Lektion werden wir die nächste Variante dieses modernen Designs machen. Wir sehen uns in der nächsten Vorlesung. 59. Moderne Header: Nun lassen Sie uns eine Variation dieser Header mit abgerundeten Schaltfläche hier erstellen. Beginnen wir mit dem Entfernen dieser Grenze zuerst. Wir werden es löschen. Drücken Sie also „Löschen“ auf Ihrer Tastatur, indem Sie diese Ebene auswählen und diese auswählen, und wir werden es abgerundete Taste machen. Verwenden Sie ein Menü wie 30 Pixel hier drüben. Nun, vielleicht mehr als 30, ziehen Sie es so. Fünfzig Pixel werden ausreichen. Es ist auf 42,5 gesetzt und es ist gerade jetzt abgerundet. Jetzt zuerst an dieser Schaltfläche arbeiten. Wir werden einige Stile wie diesen anwenden, inneren Schatten. Wir können den 3D-Button-Look mit Innenschatten und Schlagschatten erreichen. Ich werde jetzt inneren Schatten verwenden. Deaktivieren Sie dieses globale Licht. Bewegen Sie das Licht nach unten minus 90 und die Größe auf Null. Sie können sehen, es ist bereits Shaping in 3D-Taste, so dass der Abstand zu fünf so. Jetzt werden wir etwas Farbe verwenden, vielleicht im orangefarbenen Farbton, vielleicht hier drüben, etwas dunkler. Ich schätze, das ist gut. Verschieben Sie es auf 40 Prozent. Jetzt können Sie sehen, wie ich Innenschatten verwendet habe, um eine 3D aussehende Schaltfläche zu erstellen. Dies ist sehr praktische Technik, denken Sie daran. Jetzt werde ich den Text in der Mitte ausrichten. Nun, wenn Sie sehen, habe ich den Text in der Mitte horizontal und vertikal ausgerichtet, aber das Problem ist unsere 3D-Effekte. Wir werden den Text so oben verschieben und vielleicht seine Farbe in ein bisschen gräulich ändern. Vielleicht können wir die Größe der Taste erhöhen, „Shift“ drücken und so hinzufügen. Es sieht jetzt besser aus. Wir können auch den Abstand zwischen den Buchstaben auf Null ändern, es etwas weniger breiter machen. Dies ist im Grunde der Abstand zwischen den Buchstaben. Sie können sehen, ob ich es hierher ziehe und zurück auf Null ziehe. Das war's. Jetzt werden wir diese Textebene verschieben. Lassen Sie uns unsere Führer wieder einschalten. Verschieben Sie diesen mittleren Text hier oben, so oder vielleicht ein bisschen niedriger als dieser. Lassen Sie uns diese führende oder grundsätzlich die Zeilenhöhe ändern. Es sieht gut aus, 62 könnte gut genug sein. Nein, 66 war besser. Jetzt werde ich hier eine Textzeile hinzufügen, die wir den Leuten helfen, ihre Träger zu formen. Lassen Sie uns das vorerst entfernen und eine Text-Absatzebene erstellen, indem Sie es so ziehen. Das wäre leichter zu kontrollieren. Wir gestalten das Schicksal der Menschen indem wir ihre DNA und andere verwandte Sachen verändern. Ändern Sie nun seine Größe auf 18. Nein, 18 ist etwas kleiner, 24 wird okay sein, schätze ich. Jetzt müssen wir seine Farbe in ein bisschen niedrigeres Grau ändern, so dass es ein bisschen ansprechender und ein bisschen weniger wichtig aussieht . Wir können hier auch weißen Text verwenden, schätze ich nein. Wir können keinen weißen Text verwenden, der schrecklich aussieht. Zuerst lassen Sie uns einfach die Zeilenhöhe ändern. Wir brauchen etwas Ähnliches wie dieses, 32 Pixel sieht gut aus. Bewegen Sie es ein bisschen mehr in der Mitte, so. Ändern Sie die Schriftart in Source Sans Pro Regular, und wir verschieben Ihre Karriere nach oben. Das ist ein zweizeiliges Intro von Ihrer Website. Jetzt können Sie Farben von hier aus verwalten , oder vielleicht von hier oder hier. Sie können sehen, wie ich das Bild verwende, um einige Farbtöne für mein Design zu erhalten. Sie sehen wirklich schön aus, wenn Sie etwas aus diesem Hintergrund verwenden. Dies ist ein weiterer Trick, vielleicht sieht diese Farbe gut aus. Zentrieren wir es in unserer Leinwand. Drücken Sie „Control A“, „Control, Alt, H“, und das war's. Drücken Sie „Control D.“ Jetzt sehe ich ein paar Probleme in meinem Abstand. Lass es uns ein bisschen nach oben bewegen, 52 und alles fett machen . Ich habe „Control, Alt, Z“ gedrückt , um zurück zu treten. Ich brauche es, um so zu sein. Reduzieren Sie es nun auf 62, und bewegen Sie es etwas nach unten. Entfernt eure Grenzen, und wir haben unsere Aufgabe fast erfüllt. Bewegen Sie den Knopf einfach etwas nach unten. Bewegen Sie das auch ein bisschen nach unten. Mal sehen, wie viele Pixel wir von dieser Spitze entfernt sind, fast 1, 2, 3, 4, 5. Sie sind gut genug, 1, 2, 3, 4 und 5. Wir haben fast sogar Platz, und wenn wir das wirklich etwas nach unten bewegen müssen, sollten wir alles so nach unten bewegen. Verschieben Sie diesen Text ein wenig nach unten. Ich denke, es sieht so gut aus. Jetzt haben wir unseren zweiten modernen Header erstellt, und wir haben einige neue Techniken wie das Erhalten von Farbe aus Ihrem Hintergrundbild und die Verwendung des inneren Schattens, um diese 3D-Schaltfläche zu erstellen diskutiert , denke ich. Ich schätze, Sie haben diesen Vortrag wirklich genossen. Viele Studenten haben darauf gewartet. Ich werde in Zukunft viel machen. Gehen wir zu den nächsten Vorträgen. 60. Color für den Hero: In dieser Lektion werden wir diesen fantastisch aussehenden modernen Header erstellen. Eine andere, aber das wird mit einer anderen Technik sein, die im Grunde Farbüberlagerung ist. Wir werden Farb-Overlay-Anpassungsebene verwenden, um diesen tollen Effekt zu erstellen. Lassen Sie uns anfangen, diesen Header zu erstellen. Öffnen Sie eine neue Datei. Ich werde diese Zeichenfläche Web am häufigsten verwendet verwenden. Ich werde Größe von 700 dafür verwenden. Drücken Sie auf „OK“. Jetzt haben wir das Kunstbrett. Jetzt werden wir eine andere Ebene erstellen, die Größe unserer Zeichenfläche für unseren Container für das Bild und den Kopfzeilenhintergrund. Wir haben diesen erschaffen. Lasst uns so die Größe unserer Leinwand machen. Jetzt habe ich diese Website namens picjumbo.com für die kostenlosen Bilder verwendet. Sie können es verwenden und jedes kostenlose Bild von hier herunterladen, um es in dieser Übung zu verwenden. Ich habe bereits einen von ihnen heruntergeladen, was dieser ist. Also werde ich es hier in meinem Photoshop rüber ziehen, so. Ich werde es etwas erweitern, um das zu mögen. Ich werde es nach unten ziehen und wir werden es in unseren Container stecken. Mal sehen, nennen Sie es Container und machen seine Farbe zu weiß. Was wir tun werden, ist, dass wir eine andere Farbe auf diesem Hintergrund überlagern , um diesen Effekt zu erzeugen. Also werden wir Farbüberlagerung auf diesem Container verwenden. Sie können es von hier aus verwenden. Wechseln Sie zu diesen Einstellungsebenen und wählen Sie Solid Color. Drücken Sie auf „OK“. Wir werden einen Effekt wie vielleicht Multiplizieren, Normal verwenden und die Deckkraft auf 90 Prozent ändern. Es ist deine eigene Wahl. Sie können hier eine beliebige Deckkraft verwenden. Klicken Sie auf eine dunkle Farbe wie diese. So schaffen wir diesen Effekt. Wir können mehr senken. Achtzig Prozent sind gut genug. Wir können auch die Farbe von hier zu einem etwas dunkleren, blauen Farbton ändern. Jetzt ist unser Hintergrund fertig. Wir können jetzt weitermachen und hier drüben eine Logodatei und ein paar andere Dinge besorgen. Ich habe zwei Schriftarten Typografie verwendet. Einer ist Work Sans Regular, es gibt auch Google Font, ein anderer ist Montserrat Bold. Wir werden unseren Titel hier schreiben. Schreiben wir den Titel hier drüben. Lassen Sie mich sehen, was ich über das ursprüngliche Design schrieb, Lernen Sie Papierprototypen zu erstellen. Lassen Sie mich es neu formulieren, Lernen Sie zu erstellen, und dann in der nächsten, Ich werde es duplizieren, Papierprototypen. Auf den Papierprototypen verwende ich Montserrat Bold. Machen wir es auf 64 und vielleicht 48. Achtundvierzig ist gut genug und lasst uns einfach diese Größe auf 32 und 48. Ich werde sie miteinander ausrichten, beide auswählen, sie bewegen. Noch eine Sache, die ich brauche, um einige Ränder auf der linken und rechten Seite zu bekommen. Also werde ich Griddify 130 Pixel auf beiden Seiten so verwenden. Jetzt Control D, um die Auswahl aufzuheben, und ich werde diese mit dieser Linie ausrichten. Ich werde den gleichen Text hier drüben kopieren , den ich im Originalbild verwendet habe. Jetzt werde ich wieder Text auswählen und ich werde ihn so ziehen und ihn hier einfügen. Also das ist Montserrat Regular, 16 Pixel Schriftart, nur um im Auge zu behalten, und das ist 32 oder Sie können es auf 36 zu erhöhen. Es war nicht regelmäßig, aber leichte Schrift. Wir haben unseren Text erstellt. Lassen Sie uns unseren Call to Action Button hier erstellen. Also werden wir einen Geister-Button oder einfach einen weißen Knopf hier drüben verwenden, nur um einen guten Fokus auf diesen Bereich zu haben. Also lassen Sie uns unsere, wieder, Work Sans Regular 20 Pixel und wir werden anfangen zu lernen. Ändern Sie einfach seine Farbe in eine scharfe Farbe wie diese Orange. Ich werde es verwenden, ausrichten, die beiden Ebenen auswählen, mit Alt Control H und Alt Control V ausrichten, einfach etwas nach unten bewegen, einen Schritt nach unten. Wählen Sie beide Ebenen aus, und richten Sie sie an dieser linken Randlinie aus. Außerdem sieht es hier etwas weniger Platz aus. Lassen Sie einfach den Hintergrund und erweitern Sie diese Breite so. Jetzt ist unser Knopf fertig. Lasst uns ein Logo hierher ziehen. Ich werde meine Alt Control F10 benutzen. Also jetzt verwende ich alle drei Bildschirme. Lass es uns einfach schließen. Ich werde mein Logo aus dieser Akte hierher ziehen. Unser Logo ist hier drüben. Machen wir es etwas kürzer. Das ist gut genug. Lass es uns hierher bringen. Ich werde hier den Farb-Overlay-Effekt verwenden. Sie können zu Effekten und Farb-Overlay gehen und Sie können hier eine graue Farbe verwenden, weil wir nicht wollen, dass mehr es prominent machen. Also benutze hier graue Farbe. Unser Logo ist fertig. Wir brauchen einen Login-Button auf der rechten Seite. Verwenden Sie also einfach einen Text-Login oder wir können diese beiden Ebenen verwenden. Wir können sie in btn gruppieren und dann Control J kopieren, kopieren und dann hierher bewegen. Aber wir werden den Stil ändern. Dies wird weiß sein und der Hintergrund wird einen weißen Strich haben, ein Pixel und wir werden die Füllung auf Null reduzieren. Nun, wenn wir unseren Login-Button gemacht haben, aber wir müssen es kurz machen. Sie nennen es, um sich einzuloggen. Login, Login, Login. Nun, es gibt ein bisschen Problem. Unser Login-Button hat auch fast die gleiche Höhe und Breite. Also werden wir es reduzieren, weil wir hier nicht viel Aufmerksamkeit wollen und auch wenn wir die Schriftgröße auf 18 Pixel reduzieren können, ist das gut genug. Nun, lassen Sie uns es in Login btn für Login Button umbenennen, verschieben Sie es mit dieser Zeile, unsere Randlinie. Wir werden diesen Login-Button mit diesem Logo ausrichten. Wählen Sie beide und Mittellinie so aus. Ich denke, sie sind schon mittig gesäumt. Jetzt haben wir fast alle unsere Header erstellt. Es gibt noch eine Sache, die Sie hier hinzufügen können. Sie können hier drüben ein anderes Rechteck zeichnen. Sie haben dies vielleicht auf vielen Websites gesehen. Ändern Sie die Farbe in fast Schwarz und ändern Sie die Deckkraft auf 70 Prozent oder was auch immer Sie möchten, wie 50 Prozent. Für mich sind es 50 Prozent. So können Sie sehen, diese Technik wird viel Zeit auf vielen Websites verwendet. So können wir auch seine Größe reduzieren und den Login-Button und unser Logo so etwas nach oben verschieben. Jetzt sieht es ausgeglichener aus. Nun, auf diese Weise erstellen wir Farbüberlagerungs-Header-Effekte. Also, wenn wir versuchen, es zu verstecken können wir hier jede Farbe verwenden, als ob ich diese orange oder diese Farbe oder diese oder vielleicht diese oder wir können eine dunklere Farbe wie diese verwenden, dunklere graue Farbe. Sie könnten einen solchen Effekt auf vielen Websites gesehen haben, ein sehr langweiliges gräuliches Farb-Overlay. Das ist also sehr beliebte Technik. Sie können es mit jeder Farbe verwenden. Sie können eine beliebige Farbe von hier auswählen, und es wird wirklich schön aussehen. So geht es darum, Farbüberlagerungen und Farbüberlagerungsfüllung zu verwenden , um fantastisch aussehende Header-Designs zu erstellen. Wenn Sie Fragen oder andere Wünsche haben, starten Sie einfach eine Diskussion. Ich denke, ich erstelle heutzutage viele Vorträge, also bleib dran und halte mich auf dem Laufenden. 61. Transparente Maskeneffekte: In den letzten Tagen sehe ich diese Bluehost-Anzeige auf Facebook, also dachte ich, dass ich diesen Effekt mit Ihnen teilen sollte. Als ich viele Jahre anfing zu entwerfen, wusste ich nicht, wie dieser Effekt möglich ist. Sie haben einen Farbverlauf, der von einer Seite kommt, und es macht Ihr Hintergrundbild ein wenig undurchsichtig und an manchen Stellen ist es allmählich undurchsichtig und transparent zugleich. Lassen Sie mich Ihnen in dieser Lektion zeigen, wie wir das entwerfen werden. In dieser Lektion werden wir dieses Design tatsächlich entwerfen. Es ist ein bisschen anders, aber ich denke, es ist besser als sie. Lassen Sie uns anfangen und sehen Sie in dieser Übung, wenn Sie Fragen haben, fragen Sie mich jederzeit. Lasst uns anfangen. Zuerst werden wir eine neue Datei öffnen. Klicken Sie auf „Neu“ und die Größe, die wir verwenden werden, ist 1280 mal 650. Drücken Sie „Okay“, und das ist unsere Leinwandgröße, und dann werden wir ein paar Gitter darauf anlegen. Gehen Sie zu Ansicht, New Guide Layout und wir werden 12 Spalten verwenden, Rinnengröße wird 20 Pixel und Ränder werden 20, 20, 20 und 20. Drücke auf „Okay“, damit unsere Leinwand fertig ist. Das nächste, was ich tun werde, ist, dass ich Ihnen einige der Ressourcen zeigen werde, die ich verwendet habe. Gehen wir zu diesem Fenster. Dies sind die Schriftarten, die ich verwende, die von TipoType hinzugefügt wurden. Es ist eine meiner Favoriten Schriftarten, Sie können es kostenlos zu bekommen, drücken Sie einfach „Null“ darin und in den Warenkorb, und kaufen Sie diese, einfach kostenlos. Dann gibt es eine Schriftart, dieses Archiv, freie Schrift. Dies ist auch eine Schriftart, die ich verwendet habe. Dies sind zwei Schriftarten, die ich verwendet habe, beide sind kostenlos. Das dritte ist das Bild, das ich benutzt habe, das ist dieses. Ich erinnere mich nicht, wo ich es gefunden habe, aber wenn Sie wollen, ich denke, es war frei und Arbeitsplatz-1245776. Wenn Sie versuchen, online mit dem gleichen Namen hier zu suchen, denke ich, Sie können es finden. Sie können jedes Bild verwenden, das Sie mögen, lassen Sie mich Ihnen eine Website zeigen. Gehen Sie zu diesem Bild, picjumbo.com und suchen Sie hier, Arbeitsplatz und Sie werden viele tolle Bilder wie diese sehen. Diesen können Sie auch verwenden. Auch dieser, oder vielleicht dieser hier. Ich denke, das hier ist auch perfekt. Verwenden Sie ein beliebiges Bild von hier, sind alle kostenlose Bilder. Das erste, was wir tun werden, ist, dass wir unser Hintergrundbild, dieses in Photoshop ziehen und es einfach so lassen. Dann werden wir es entsprechend dimensionieren, so. Jetzt haben wir unser Hintergrundbild. Jetzt kommt zum Effekt dieser Gradientendeckkraft und Verlaufsmaske. Wir werden diese Maske hier anwenden, Ebenenmaske hinzufügen. Wählen Sie nun diese „Maske“ auf der rechten Seite, und wir werden dieses Gradient-Tool greifen. Drücken Sie „G“, „Farbeimerwerkzeug“ oder „Farbverlaufswerkzeug“. Stellen Sie sicher, dass der Farbverlauf auf diesen Schwarz-zu-Weiß eingestellt ist. Was wird nun passieren? Das Schwarze wird auslöschen, damit du hier drüben sehen kannst. Was hier geschieht, ist, dass dieser Farbverlauf von Schwarz-zu-Weiß ist, also macht Schwarz-zu-Weiß-Maske im Grunde einige der Teile unseres Bildes transparent. Grundsätzlich zeigt sich dieser weiße Hintergrund auf der Rückseite. Wenn du einen anderen Hintergrund willst, kannst du jede Farbe auffüllen, die du magst, wie ich es dir jetzt zeige. Jetzt ist mein Hintergrund ein bisschen Cyan Farbe, es ist damit gefüllt. Wenn Sie eine schwarze Farbe wünschen, können Sie auf eine schwarze Farbe klicken. Blau, schwarz, was auch immer du willst, du kannst es hier drüben setzen. Im Moment werde ich dieses Weiß benutzen. Ziehen Sie diese Linie Ihres Farbverlaufs weiter. Sie können sehen, wenn ich versuche, es zu lange zu bewegen, es wird auch transparent machen einige von diesem Teil. Wenn Sie viel Text oder viel Textlesbarkeit wünschen, können Sie diesen Effekt anwenden. Nun, zuerst werden wir die Schriftart „R“ verwenden, diese Archive Regular, und ich werde diese Farbe wählen, ich denke, es war diese Farbe, 31414D. Stellen Sie sicher, dass Ihre Schriftgröße 72 ist. Ich werde hier drüben schreiben: „Empower“. In der nächsten Zeile werde ich „Your Startup Now“ verwenden. Keine Sorge, wir werden die Schriftart danach ändern. Das sind die Worte. Es ist besser, wenn Sie sie auf der separaten Ebene verschieben, also werde ich diese „Empower“ darin entfernen, und ich werde auch den unteren Text aus diesem Bereich entfernen. Jetzt haben wir zwei verschiedene Ebenen mit diesem Text und dieser. Der nächste wird diese rote Farbe sein. Hier ist CA4930. Es ist eine flache Farbe. Grundsätzlich sind diese beiden, denke ich, flache Farben, und einer von ihnen ist auch meine Markenfarbe, laufen UXID. Es wird in My Run UXID Logo verwendet. Jetzt werden wir Aileron verwenden, ich werde jetzt dieses „Regular“ auswählen. Lassen Sie mich sehen, denke ich, Ihr Start war nicht Kapital. Jetzt werde ich 48 Größe verwenden und ich werde Licht verwenden. So, und dafür werde ich semi-fett, kursiv verwenden , und ich werde auch 48 verwenden, so. Ich denke, hier hatten wir auch 48 halbfett. Lass es uns hier weißer machen, weil wir in der letzten Übung mehr Weiß hatten. Auf diese Weise erreichen wir diesen Effekt. Sie können sehen, dass ich weiterhin experimentiere. Die Richtung dieses Gradienten funktioniert auch, wenn Sie etwas in linearer Plusverschiebung so wollen, dies wird linear auf dem gesamten Bild sein. Wenn Sie etwas direktionales wie dieses möchten, können Sie in dieser Richtung so etwas verwenden. In der Anzeige, die ich Ihnen gezeigt habe, Bluehost hat diese Richtung von links oben nach unten rechts verwendet. Jetzt werden wir hier drüben einen Knopf benutzen. Ich denke, diese Größe ist gut, und wir werden nur zwei Pixel um den Radius hier im Eigenschaftenfenster dieser Form verwenden . Ändern Sie es, und wir werden weiß verwenden, und wir werden einige Schatten hier hinzufügen. Schlagschatten 1. Dies ist eine neue Technik. Sie können sie leuchtende Schatten nennen und sie sind heutzutage sehr beliebt. Einer ist ein schwarzer Schatten mit Multiplikationseffekt, sehr geringe Deckkraft, so dass Sie es 20 oder vielleicht 16 machen können , so etwas, sehr geringe Deckkraft. Dann haben wir Abstand von 10, auch die Größe ist 18. Dies ist die Spreizgröße. Dann haben wir Schlagschatten , der diese rote Farbe ist, oder Sie können diese Farbe von hier aus wählen. Es hat auch eine sehr geringe Deckkraft, normal, es ist nicht multipliziert und Entfernung ist 10 und 20. Fast 10 bis 20 Pixel von A. Nun haben wir dies ausgewählt. Dann werden wir hier drüben ein Rechteck benutzen und es so hier drüben platzieren. Wir werden es rot färben die gleiche Farbe dieses Textes, und wir werden es zu schneiden, Clipping-Maske, so verwenden wir Clipping-Maske und sie werden viel Zeit in User Experience Design und UI-Design und Gestaltung all dies verwendet Zeug. Jetzt werde ich hier drüben drücken Sie „Shift“, so sind wir einfach hier zu klicken. Ich werde „Join UXID verwenden. LearnUxID.“ Ich werde die Größe 24 benutzen und Aileron benutzen. Ich werde Licht benutzen. Sie können jede Schriftart verwenden, die Sie mögen, aber ich benutze Licht regelmäßig. Lassen Sie uns regelmäßig verwenden, und es gibt einen weiteren Trick. Ich werde nur vorerst auf Arial Schriftart wechseln. „ Arial“, und jetzt werden wir Alt- oder Wahltaste verwenden und drücken Sie „26.“ Also „R 26" und das wird Ihnen einen Pfeil zeigen. Ich liebe diesen Pfeil, es ist sehr einfach, diesen Effekt zu bekommen. Stellen Sie sicher, dass Sie eine Schriftart wählen, die diesen Wert unterstützt. Dies sind im Grunde ASCII-Wert, A-S-C-I-I-Werte. Das sind Pfeile. Sie können sie auch in HTML tun. Wenn Sie es etwas geräumiger machen möchten, versuchen Sie, diesen Tracking-Wert auf diesem Zeichenfeld zu ändern. Vielleicht 25 oder 30 so, also ist es offener. Mal sehen, wie unser Design aussieht. Es sieht toll aus. Jetzt, wenn ich zu diesem Gitter komme, benutze ich im Grunde diese vier Spalten; 1, 2, 3, 4. Lassen Sie uns alle diese in dieser Spalte zentrieren. Was passiert hier drüben? Lassen Sie uns die Auswahl aufheben, Kontrolle D oder Befehl D. Wir werden sie alle zusammen bewegen, vielleicht ein bisschen hier rüber. Unser Knopf und alles ist auf dem Platz. Wir werden einige Navigation hier hinzufügen, und dafür werden wir das Linientool verwenden. Ich werde Zeilenwerkzeug verwenden. Vergewissern Sie sich, dass die Gewichtung außerhalb des Zeilenwerkzeugs zwei oder drei Pixel beträgt, da ein Pixel sehr dünn ist und daher möglicherweise nicht sichtbar ist. Also mach es zwei Pixel so. Ich werde diese Farbe hier drüben färben und dann werden wir sie so duplizieren, 1 und 2. Wenn Sie so etwas wollen, ist es gut. Verschieben Sie es einfach in dieser Spalte. Ich spreche von dieser Kolumne, also ist dies im Grunde eine Spalte, das ist Streuung. Wenn Sie möchten, können Sie es so ausrichten, aber ich habe einige der Designs gesehen, wo sie so etwas haben und dann haben sie so etwas. Lassen Sie uns nur die Breite ändern. Gehen Sie zu dieser Breite und wir werden hier 32 Pixel verwenden, und wir werden alle diese nach links ausrichten, so dass. So haben wir diesen Entwurf fertiggestellt. Ich werde meine PST-Ressourcendatei für diesen Entwurf freigeben. Wenn Sie Fragen haben oder keine Verknüpfung oder irgendetwas während dieser Lektion verstanden haben, stellen Sie mir Fragen. Ich hoffe, Sie haben diese Lektion genossen. Fahren wir mit der nächsten Lektion fort. 62. Tabs in Photsohop entwerfen: Jetzt in dieser Lektion werden wir etwas Ähnliches schaffen. Dies sind im Grunde Tabs. So Tabbed Navigation, Sie haben es auf vielen Websites gesehen. Einer meiner Schüler hat diese Vorlesung angefordert, dass ich einige UI-Design-Elemente wie Tabs oder Drop-Downs erstellen muss . Das ist, was wir in dieser Lektion erstellen werden. Es gibt eine andere Version für diese, die Box-Version ist. Sie können hier drüben sehen. Dies ist im Grunde Box-Version oder gefüllte Version und das ist im Grunde eine andere ist nackte Version. Dies sind zwei Versionen, die wir in dieser Lektion entwerfen werden. Sie können hier sehen, dass es subtile Schatten auf diesen beiden Bereichen gibt. Hinter diesen drei Bildern befinden sich auch subtile Schatten. Lassen Sie uns anfangen und sehen, was wir in der nächsten Lektion einfallen können. 63. Tabs entwerfen: Vor ein paar Tagen fragte mich einer meiner Schüler, dass er diese Art von Tabs erstellen muss. Also in dieser Lektion werden wir die schnellste nackte Version erstellen. Lasst uns anfangen. Ich werde eine neue Datei öffnen, ein neues Dokument und ich werde dieses Medium verwenden, 1440 x 900, erstellen. Wir werden zuerst die rote Linie erstellen. Wir werden dieses rechteckige Werkzeug greifen und wir werden einmal auf diese Leinwand klicken. Sie können sehen, wie Sie dieses Rechteck erstellen. Wir werden ihm eine Breite von 1065 und die Höhe von 2 Pixeln geben. So wie das. Es ist eine sehr schlanke Linie. Lassen Sie uns hier eine andere Ebene erstellen. Also Ebene eins, und ich werde zur Ebene gehen und eine Hintergrundebene erstellen , so dass ich leicht alles nach dieser Kunst ausrichten kann. Kommandooption H. Jetzt ist es in der Mitte. Jetzt werden wir unsere Schaltflächen erstellen. Also zuerst diese Farbe zu diesem Rot ändern, ca4930 ist die Farbe, die ich hier drüben benutze. Jetzt werden wir dieses abgerundete Rechteck-Werkzeug greifen und wir werden noch einmal klicken und die Breite wird 165 und die Höhe dieser Schaltfläche wird 55. Wir sollten den Radius auf vier, vier, vier, vier und vier. Drücken Sie OK. Also haben wir diesen Knopf hier drüben. Jetzt können Sie sehen, dass die unteren beiden abgerundeten Ecken nicht abgerundet werden sollten , weil sie an dieser Linie befestigt werden. Also werden wir das entfernen und Null, Null am unteren Rand verwenden . So wie das. Jetzt können Sie sehen, wir haben eine Tab-Taste hier drüben. Lasst uns etwas Text drauf setzen. Wir werden Open Sans verwenden, oder Sie können Clear Sans verwenden. Dies sind beide kostenlose Schriftarten von Google. Jetzt Textgröße Ich werde 20 Punkte oder 20 Pixel und Shift verwenden und klicken Sie hier. Wir werden Filme hier drüben benutzen. Jetzt weiße Farbe, und wir werden sie so miteinander ausrichten. Jetzt fügen wir diesem Schatten hinzu. Wir gehen also zu Ebenenstilen, greifen zuerst diese Ebene und gehen zu Ebenenstilen und Schlagschatten. Nun sollte der Schlagschatten, den wir verwenden werden, auf der rechten Seite und auf der linken Seite sein, so dass wir nicht brauchen, dass der Schlagschatten unten. Zuerst werden wir hier ein bisschen gräuliche Farbe verwenden. Wählen Sie eine beliebige gräuliche Farbe auf dieser Seite. Dann werden wir eine sehr geringe Deckkraft wie 30 Prozent verwenden, und die Entfernung sollte 9 sein und dieser Pixelwert wird 12 sein. Wir haben einen Schatten, aber wir müssen ihn auf der rechten Seite sein, also werden wir den Winkel nach links ändern, also 180. Wenn das Licht von hier kommt, wird der Schatten auf dieser Seite sein. Das ist das Konzept, das wir in der vorherigen Vorlesung studiert haben. So haben wir also einen Schatten erschaffen. Wir werden auf diesen Plus-Button klicken und wir werden einen weiteren Schatten hinzufügen. Dieses Mal wird der Schatten auf der anderen Seite sein, was Null sein wird. Vergewissern Sie sich, dass Sie dieses globale Licht deaktivieren weil es Ihre Lichter hier drüben durcheinander bringen wird. Wir werden zwei Lichter benutzen. Einer wird auf Null sein und der andere wird sein, stellen Sie sicher, dass dieser nicht markiert ist, 180. Wir haben also einen subtilen Schatten auf beiden Seiten. so ist dies getan. Lassen Sie uns nun andere Registerkarten erstellen. Vielleicht können wir dieses Control G duplizieren und aktiv, nennen Sie es aktiv Tab. Das ist unser Separator. Benennen Sie sie richtig, aktive Registerkarte und wir gehen zu Control J oder Befehl J, um eine andere Ebene zu erstellen. Wir werden es auf dieser Seite bewegen. Stellen Sie sicher, dass sich diese Ebene am unteren Rand dieser Ebene befindet, da sie nicht aktiv sein wird. Es ist passiver oder inaktiver Zustand. inaktive Zustand ist also dieser. Nun lassen Sie es uns ein wenig dahinter bewegen. Jetzt werden wir seine Farbe in Weiß ändern, so und zweitens werden wir alle Schatten daraus entfernen. Wir werden einen Teil des Schlaganfalls verwenden. Also werden wir zwei Pixel Strich darauf verwenden und seine Farbe sollte ein bisschen gräulich sein, so. Es muss innen sein, setzen Sie den Strich auf innen. Drücken Sie OK. Wir werden es in diesen Zustand verschieben. Wir brauchen den Separator, um an der Spitze zu sein. Deshalb wird es es hinter sich verstecken. Eine andere Sache, die wir hier tun müssen, ist, dass wir ihre Größe reduzieren müssen. Ich werde seine Höhe auf 50 Pixel reduzieren, fünf Pixel darunter, und wir werden es ein bisschen nach unten bewegen, so. Okay, so wie das. Jetzt ist es fast perfekt. Zweite Sache ist, dass wir es ein bisschen weit von hier bewegen müssen, so. Du kannst es so bewegen oder so, es liegt an dir. Sie können es trennen oder Sie können es hinter dieser aktiven Registerkarte behalten. Jetzt werden wir diese Filme duplizieren. Also müssen wir die Farbe dieses Textes ändern. So wird es ein bisschen dunkel gräulich sein. Wir werden es Dramas nennen, und wir müssen es so etwas nach unten bewegen. Vielleicht brauche ich hier drüben einen knackigen Knick. So Dramen. Dies sind wenige Einstellungen, Rendering-Optionen meines Displays haben einige Probleme, so dass mein Text nicht wirklich scharf ist. Das ist also eine Option. Dann werden wir das hier verschieben, das duplizieren, und wir werden es hierher bringen. Es wird also Anime sein. Jetzt haben wir eine aktive Registerkarte und zwei passive Tabs oder inaktive Tabs. Sie können sehen, wie dieser subtile Schatten auf diesen Registerkarten fällt. Es gibt viele Variationen, die Sie tun können, wie Sie können den Schatten entfernen und Sie können ein wenig hellgraue Farbe verwenden, um diese Farbe zu färben. Sie haben diesen Stil vielleicht in Google gesehen, also können Sie so etwas tun. Schnappen Sie sich die Farbe von hier. Sie sehen wirklich cool aus, wirklich nett. Schatten sehen sehr subtil aus und man kann hier auf beiden Seiten sehen. Es gibt einen weiteren Effekt, den wir hinzufügen können , der Gradientenüberlagerung ist und ich werde hier auf dieser Schaltfläche eine Gradientenüberlagerung verwenden . Was wir tun werden, ist, dass wir einen sehr langweiligen Farbverlauf verwenden, also ist es im Grunde schwarz bis weiß transparenten Farbverlauf. Es sollte auf der einen Seite weiß sein. Sie können so etwas verwenden, und Sie können auch multiplizieren oder andere Effekte wie diesen verwenden, und Sie können es oder so etwas umkehren. Lassen Sie es uns so verwenden, also ändern Sie den Winkel des Lichts auf 90 Grad, und Sie können hier sehen, wie sich dies auf unser Design auswirkt. Sie können sehen, vielleicht können wir es auf eine graue Farbe verschieben und wir können den Schieberegler ein wenig zurückbewegen, nur um nur einen subtilen Effekt zu erhalten. Sie können sehen, wie der Unterschied ist, das ist wirklich schöne Wirkung. Sie können einfach eine sehr subtile Verlaufsüberlagerung auf diesem erstellen und so machen wir es. Jetzt werden wir diesen Bereich füllen, es liegt an Ihnen. Andernfalls hätte ich es nicht in diese Übung aufnehmen sollen. Sie können es auf eigene Faust tun. Aber wenn Sie wollen, dass ich hier ein paar Bereiche zeige, was wir tun werden, ist, dass wir einige Leitfäden erstellen werden. Wir werden diesen Separator einwickeln. Was ich getan habe, ist, dass ich 50 Pixel Raum von hier auf beiden Seiten erstellt habe, und ich werde meinen Inhalt darin platzieren. Jetzt werden wir ein weiteres Rechteck erstellen 285 Breite und Höhe wird 350 sein. Wir werden hier ein bisschen mehr abgerundete Ecke verwenden, drücken Sie „Okay“, und wir haben diese wirklich schöne Ebene hier drüben und Sie können sehen, dass wir jedes Bild hineinlegen können. Jetzt fügen wir zuerst Schlagschatten hinzu. Schlagschatten wird der Erste sein. Wir können einen Schlagschatten 90 Grad verwenden, und es sollte sehr subtil sein, wie 9, 12, es sieht gut aus. Drücken Sie „Okay“ und stellen Sie sicher, dass es eine Farbe von Grau ist. Ich werde es hier drüben so grau färben. Jetzt schieben Sie es aus diesem Bereich. Wir werden dies mit einem anderen replizieren, Control+G, und es wird unser aktives Bild sein, aktives Bild oder Thumbnail. Lasst es uns etwas dunkler färben. Sein Schatten wird ebenfalls hervorgehoben oder intensiver wie 60 Prozent. Außerdem werde ich es etwas weiter bewegen, vielleicht sind 70 Prozent gut. Wir können die Entfernung auch etwas nach unten erhöhen. So werden wir diesen aktiven Zustand nutzen. Außerdem werden wir einen Schlaganfall um ihn herum hinzufügen. So streicheln drei Pixel oder zwei Pixel innerhalb dieser Form. Die Größe aller drei Formen ist ähnlich. Drücken Sie „Okay“, und lassen Sie uns das hier am Ende noch einmal duplizieren, so und kleben Sie es mit der rechten Seite. Jetzt werde ich alle drei packen und sie horizontal ausräumen. Sehr schön, sieht toll aus. Jetzt können Sie jedes Bild hier hinzufügen, ich werde es sehr schnell tun. Ich werde Bilder per Drag & Drop und ich werde sie in diese Boxen schneiden. Dies sind im Grunde Container, wir werden unsere Option oder Alt-Taste verwenden, um das gesamte Bild darin zu schneiden. Wir sind fertig mit diesen Schatten, jetzt werden wir etwas Text hier hinzufügen. Ich werde eine Überschrift mit den Open Sans fett verwenden. Ich werde Open Sans fett auswählen und die Größe wird 48 Pixel betragen. Lassen Sie uns hier etwas Text hinzufügen, wie Filme oder aktive Filme. Ich werde hier drüben ein bisschen dunklere Farbe verwenden, es mit dieser Linie hier drüben ausrichten, so wie diese. Auch können Sie einige Titel um diese Bilder hinzufügen nur um sicherzustellen, dass dies gut aussehende Titel sind, und ich werde einige Titel hier hinzufügen, wie gebrochene Fenster. Ich werde 20 oder 24 Pixel verwenden, 20 Punkte hier drüben und sicherstellen, dass die Schriftart Semibold Italic ist, so. Richten Sie sie alle mit diesen aus. Ich werde es sehr schnell machen. Keine Sorge, ich denke, Sie wissen bereits, wie das geht, richten Sie es mit diesen Formen an der Unterseite aus, also Container. Ich werde diesen Container greifen und ich werde die Textebene greifen und ich werde es in der Kopfzeile so ausrichten. Grundsätzlich richte ich alle Texte damit aus, das und das. Jetzt habe ich alle Texte ausgerichtet, Sie können hier sehen, dass es wirklich cool aussieht, wirklich schön, wirklich offen, offen, sehr offen gestaltet, sehr gute Nutzung von Leerraum. Dies ist das Ende dieser Lektion. Wir haben sehr schöne, sehr subtile Tab-Leiste erstellt , und das sind die Informationen in dieser Tab-Leiste. Stellen Sie sicher, dass Sie einige aktive und passive Zustände verwenden, wie Sie hier sehen können, haben wir sehr inaktive Schaltfläche. Sie sollten sich nicht mischen. Aktive Buttons sollten deutlich sichtbar sein und der Benutzer sollte wissen, dass diese Farbe mit dieser übereinstimmt, dass ich in einem aktiven Fenster bin. Damit wird dieser Vortrag beendet. In der nächsten Lektion werden wir eine andere Version davon erstellen, die gefüllt ist, wir werden hier eine Box verwenden. Fahren wir mit der nächsten Lektion fort. 64. Tabs entwerfen: Jetzt in dieser Lektion werden wir diese Box-Version dieser Registerkarten erstellen. Es wird wenige Unterschiede geben, wie Sie eine sehr dünne Linie hier über sehen können, auch Sie können sehen, es gibt einen erhöhten Effekt hier, 3D-Effekt, und auch Sie können einige Symbole hier hinzugefügt sehen. Die einzige Sache ist, dass wir das Farbschema umkehren, jetzt ist der Hintergrund sehr hell mit Übereinstimmung mit diesen Tabs und ich denke, es zeigt wirklich deutlich, dass dieser aktiv ist. Lassen Sie uns einfach anfangen und wir werden von der vorherigen Version beginnen, wo wir gegangen sind, also habe ich einige Filmtitel hier drüben hinzugefügt, nur um es dramatischer zu machen und schön aussehen. Nun, einige Dinge, die wir tun werden, Nummer eins, die wir einige der Effekte entfernen werden, wie Sie hier sehen können Dieser weiße Rand sieht in dieser Situation sehr seltsam aus, also werden wir ihn so entfernen. Außerdem werden wir die Schatten, Schlagschatten, von beiden entfernen , also werde ich die Schlagschatten entfernen. Sie können jetzt sehen, dass dieser sieht deutlich aus, als wäre er erhöht und es ist im Grunde ausgewählt, so dass es einen Schatten um ihn herum gibt. Dann werden wir diese Zeile hier entfernen, also verstecken Sie diese Linie und die wenigen Dinge, die wir tun werden, Nummer eins, zu diesen inaktiven Tabs, jetzt werden wir einen Strich von Grau hinzufügen, können Sie hier sehen, grau Schlaganfall und wir werden ihre Farbe weiß zu machen, so dass es mit dem Hintergrund vermischt wird. Also die gleiche Farbe wie der Hintergrund, können Sie hier sehen und wir haben einen Strich von hinzugefügt, denke ich, zwei Pixel, mal sehen, wie viele Pixel, ja, zwei Pixel innerhalb von 100 Prozent und es ist eine graue Farbe cb, cb, cb. Wir haben fast erreicht, was wir wollen. Nun, die Sache ist, dass wir hier drüben ein Rechteck erstellen werden und es wird so sein, vielleicht so. Jetzt haben wir dieses abgerundete Rechteck und es wird an der Spitze sein. Nicht ganz oben, ich denke, es sollte vor diesen stehen. Nun lasst uns seine Farbe zu dieser ändern, also haben wir die Farbe geändert, also diese war aktiv, wir werden die Verlaufsüberlagerung entfernen, die wir in der letzten Übung setzen, also Gradient, wir brauchen keinen Farbverlauf und auch wenn Sie wollen, können Sie auch diese Schlagschatten entfernen, so sieht es wirklich ein bisschen flach und sehr schön hier drüben. Jetzt werden wir die Farben dieser Texte verschieben, also werde ich den ganzen Text auswählen. Es gibt einen Trick, den ich Ihnen in nur wenigen Sekunden zeigen werde, gehen Sie zum Zeichen-Panel und wählen Sie die Farbe hier drüben, also verschieben Sie es auf weiß und ta-da, wir haben alle Farben Text in weiß jetzt. Anstatt also jede Farbe einzeln zu ändern, ändern wir einfach die Farbe an einem Ort und alles wird verändert. Außerdem müssen wir es ein bisschen größer machen und diesen Inhalt verschieben. Dies ist unsere Überschrift und das ist unser Inhalt hier drüben, also ist das unsere Film-Inhalte, also nennen Sie es Film-Inhalte, so. Jetzt schieben Sie es ein paar Pixel nach unten, vielleicht 10, 20 so. Jetzt werden wir einige Symbole hier hinzufügen, aber davor werden wir eine Zeile hier drüben brauchen, Trennlinie, also zeigt es, dass wir hier ein Trennzeichen haben und wir so etwas wie Titel und so etwas haben. Ich habe gerade eine Linie wie diese gezeichnet, machen die Farben gleich und dann werden wir die Helligkeit reduzieren, um es ein bisschen dunkler zu machen, 75 so und reduzieren seine Größenkontrolle T oder Befehl T und wir werden zwei Pixel verwenden so und stellen Sie sicher, dass es die gleiche Größe wie Ihr dieser Hintergrund ist, also war es 1,115 und es wird die gleiche Größe wie dieser Balken hier drüben haben, also wird es 1.115 sein. Stellen Sie sicher, dass Ihre Größen gleich sind, müssen Sie sie so anpassen, passen Sie einfach den Abstand an. Ich werde dieses Trennzeichen auswählen, jetzt sieht es gut aus. Sie können den Raum über diesem Titel sehen und unter diesem Titel ist der gleiche, also versuche ich, diesen Bereich zu zentralisieren. Jetzt haben wir fast damit fertig, es gibt eine weitere subtile Veränderung wie diese Dramen, seine Farben sollten ein bisschen langweiliger sein, also so, grau. Mach es nicht zu langweilig, damit es nicht wie ein inaktiver aussieht, also mach es ein bisschen so, damit es zeigt, dass du hier drüben klickst. Es sollte nicht die Nachricht vermitteln, dass Sie hier nicht klicken können. Das ist gut. Jetzt gibt es noch wenige Dinge, die wir hinzufügen können, können wir hier jetzt Symbole hinzufügen. Sehr einfacher Trick, wie ich diese Symbole gemacht habe, nur eine einfache Berechnung, 12 x 12 Pixel Breite und Höhe Rechteck, aber ich denke, es ist ein Quadrat, es ist kein Rechteck und was ich getan habe, ist es einfach an der Spitze zu bewegen. Ich habe diese so dupliziert und dann werden wir diese duplizieren und sie so unten verschieben. Ein Symbol ist fertig, ich werde alle auswählen, steuern oder Befehl E, um eine Form zu erstellen, also jetzt ist es ein einziges Symbol. Lass es uns hier rüber bringen. Jetzt wird das zweite Symbol das gleiche sein, nur brauchen wir eine kleinere Größe Rechtecke auf der linken Seite, so wird es sechs Pixel von sechs Pixeln Quadrat wie folgt sein und dann sind wir mit sechs und 26 war insgesamt, so dass wir mit 20 links Pixel und 20 Pixel. Entschuldigung, es war nicht 20 mal 20, es sollte 20 mal sechs so sein. Jetzt werden wir es hier rüber bewegen und so etwas Distanz bekommen. Sie können den Abstand später anpassen. Jetzt werden wir diese Ebenen zusammenführen und wir werden sie eins, zwei duplizieren, also haben wir zwei Symbole in nur wenigen Minuten erstellt und das ist nur gruppieren sie als Symbole. Jetzt werden wir sie mit dieser Marge hier ausrichten, Margenlinie oder Leitlinie hier drüben, also richten wir es so aus. Wir haben beide Registerkarten abgeschlossen und sie sehen großartig aus. Eine ist die nackte Registerkarte und diese ist die Registerkarte mit sehr aktivem Zustand und mischen den Inhalt und die Registerkarte die gleiche Farbe. Das ist alles für diese Übung. Ich hoffe, Sie haben diese Übung genossen. Gehen wir nun zur nächsten Lektion über. 65. Ressourcen für das IOS App sammeln: Jetzt in dieser Lektion der Serie, werden wir diese fantastisch aussehende iPhone App erstellen. Dies ist ein täglicher Deal für unser Essen und vor allem für Lebensmittel. Zunächst einmal werde ich Ihnen in dieser Lektion zeigen, was die verschiedenen Ressourcen sind, die ich verwendet habe, die Bilder, diese Gabeln und Farben, alles andere. Lassen Sie mich es Ihnen zeigen. Für die Bilder habe ich diese sehr nette Leute abonniert, die Death to Stock Photos sind, und sie liefern mir sehr atemberaubende Fotos und qualitativ hochwertige Bilder kostenlos fast jede Woche. Das ist also sehr nett. Wenn Sie sie abonnieren können, werden Sie eine Menge von Bildern hier bekommen. Lassen Sie mich Ihnen ein paar von ihnen hier zeigen. Das ist einer von ihnen, sie sind Serie. Also habe ich eine Menge Bilder von diesen Jungs. Sie können auch einige andere kostenlose Websites wie verwenden, Ich denke, hier habe ich einige der Links. Splash ist sehr beliebt, diese auf splash, können Sie online suchen, picjumbo, Pixabay. So können Sie jede Website verwenden, die Sie mögen, und dann die Schriftart, die ich benutze, ich benutze diese Martina Regular Schriftart, die ich denke, frei ist, fontzone.net. Sie können online nach Martina Regular suchen, diese Schriftart herunterladen und installieren. Dann verwende ich diese Google Font Lato, die sehr beliebt ist. Eine andere Google-Schriftart, die Maven Pro ist, die ich in diesem Button verwendet habe, wenn ich den Text hier setze, Maven Pro regelmäßig. Dies ist also nur für die Schaltfläche. Dann benutze ich diese markierte Schrift, die im Grunde Martina ist, und Lato ist überall sonst. Also das ist Lato, Chicken Biryani, und in diesem Preis. Insgesamt sehen sie zusammen sehr gut und schön aus. Das sind alle Ressourcen. Also lasst uns anfangen. Die Farben, die ich verwende, sind im Grunde diese beiden Farben, die diese lila Farbe und grüne Farbe ist. Das ist also 211637 lila. Dies ist im Grunde grün, was 22a372 ist. Ich denke, meistens wähle ich diese Farben aus diesem Bild im Grunde. Lassen Sie mich Ihnen zeigen, wie ich diese Farben auswähle. Es gibt eine Farbverlaufsmaske über ihnen. Dies ist im Grunde das Bild. Ich wählte die Farben aus dem Bild wie zum Beispiel dieses Grün. Es ist näher an diesem Grün. Lassen Sie uns die Sättigung auf 70 Prozent reduzieren. Es ist also fast näher an diesem. Sie können auch versuchen, andere Farben von hier zu probieren, wie diese oder diese. Also, im Grunde habe ich es von hier aus ausgewählt. Das hier 030f66. Dies ist im Grunde, wie Sie Farbe aus Ihrem Bild abtasten. Dann die violette Farbe, die ich hier drüben ausgewählt habe. Deshalb gehen sie sehr gut mit diesem Gesamtdesign zusammen. Jetzt fangen wir an. Hier habe ich das Bild, das dieses war. 66. Beginne das IOS App Design: Lassen Sie uns eine neue Datei erstellen und wählen Sie iPhone 6 oder iPhone 5. Zuerst müssen Sie Mobile App Design hier auswählen und dann zum Untermenü gehen, das iPhone 5, 6 oder iPhone 6 Plus ist . Lets wählen Sie dieses iPhone 6 jetzt. „ Dieses Dokument nicht farbig verwalten“, stellen Sie sicher, dass diese ausgewählt ist, und drücken Sie „OK“. Nun, das ist unser Kunstboard. Lassen Sie uns dies als Hintergrundebene erstellen. Ich habe diese ausgewählt, und Ebene aus dem Hintergrund habe ich eine Hintergrundebene erstellt. Lassen Sie uns eine Hintergrundfarbe erstellen, die diese sein wird. Ein bisschen gräulich, f4f4f4 Farbe. So verwende ich im Grunde Hintergründe. Nun, lasst uns unsere Datei hier drüben importieren, was diese war. Ziehen wir es hierher im Photoshop, so. Es passt fast perfekt hier drüben. Nun, das ist im Grunde iPhone 6 Bildschirm, also haben wir viel Platz darunter. Wenn wir wollen, können wir die Größe dieses Bildes vergrößern, wenn wir es wirklich brauchen. Wir können Control T auswählen und versuchen, die Größe so zu erhöhen. Ziehen Sie es ein wenig nach unten. Lassen Sie uns die Größe wieder erhöhen. Ich drücke und halte UMSCHALT- und ALT-Tasten, während ich die Größe davon vergrößere. Grundsätzlich geht es nach draußen. Ich glaube, es waren Photoshop-Bugs. Sobald ich angefangen habe, die Größe anzupassen, versuchten sie, die Größe um sie herum anzupassen. Lassen Sie uns ein Overlay über dieses Bild erstellen. Grundsätzlich können Sie in diesem Design hier sehen, wenn ich hier drüben klicke, habe ich dieses und lila-ish-Overlay erstellt, so dass wir den Text leicht sehen können. Zunächst einmal werden wir eine Gradientenüberlagerung erstellen, damit wir den Text hier sehr leicht sehen können. Das ist im Grunde das, was ich hier getan habe. Zunächst einmal, was wir tun werden, ist, dass wir diesen Bereich auswählen und wir werden eine andere Ebene erstellen. Dieses, und wir werden G drücken und es mit dieser violetten Farbe füllen. G und drücken Sie so. Nun, was wir tun werden, ist, dass wir eine Maske auf diesem Bild erstellen und wir werden Gradienten Overlay verwenden. Sie wissen, dass das Weiß alles zeigt und Schwarz alles verbergen wird. Wenn wir versuchen, Verlaufsüberlagerung über dieses Bild so zu verwenden, können Sie das Bild dahinter sehen, weil jetzt, das Weiß entfernt all diese lila Farbe hier drüben. Tun Sie so weiter, bis Sie so eine nette Note bekommen , vielleicht so. Das sieht ein bisschen schön aus. Wenn Sie es wirklich anpassen möchten, können Sie diese Ebene wählen, Control T, und Sie können transformieren und anpassen nach Ihrem Geschmack. Nun, das ist der Trick, wie ich diesen Overlay-Farbeffekt gemacht habe. Ich benutzte Gradient und Maskierung Effekt für diesen. Der Rest der Vorlesung werden wir in der nächsten Lektion tun. Fahren wir mit der nächsten Lektion fort. 67. Das Hinzufügen von Menüpunkten zur IOS App: Lassen Sie uns hier noch ein paar Bilder hinzufügen. Dies ist im Grunde unser Hintergrund, also Control G und gruppieren Sie sie im Hintergrund. Jetzt lassen Sie uns Bilder hier hinzufügen. Dafür werde ich ein abgerundetes Rechteck verwenden, um dieses Bild zu enthalten , vielleicht ein bisschen quadratisch. Lassen Sie uns ein quadratisches Bild von 200 Pixeln x 200 Pixeln und vier Pixel-Radius erstellen. Wir können sicherstellen, dass wir ein Leerzeichen von 1, 2 und 1, 2, 3, 4, 24 Pixel von diesem oberen Bereich entfernt haben. Lassen Sie uns Bilder von Lebensmitteln bekommen. sind all die kostenlosen Bilder, die ich gesammelt habe. Wir können jeden davon wie diesen verwenden. Es ist immer noch gut. Das hier sieht gut aus. wir die Eingabetaste. Ich werde es in diese kleine Schachtel stecken. Ziehen wir es ein wenig, skalieren Sie es ein wenig, so dass es ein bisschen schöner aussieht. Konzentrieren wir uns auf diese. Nun, Control G und duplizieren Sie diese Gruppe. Nennen wir es kleine Daumenkopie. Ich werde es hier rüber ziehen. Entschuldigung, ich habe im Grunde Kunst damit gedrückt und es hat eine Menge Kopien erstellt. Wir brauchen nur vier. Vielleicht denke ich, das hier ist extra. Lassen Sie uns das hier auch hier rüber bewegen, und der erste hier drüben so. Lassen Sie uns diese 100 Pixel innerhalb dieses verschieben. Wir wissen, dass sie von beiden Seiten gleich verteilt sind, 1, 2, 3 ,4, 5, 6, 7, 8, 9,10. Das ist ein bisschen viel, also lassen Sie uns auf diese Höhe gehen. Ich werde sie so einräumen. Dies ist, wie ich dieses Bild Thumbnails Auswahl Teil erstellt. Lassen Sie uns eine Anleitung in der Mitte dieser erstellen, damit wir wissen, wo der Mittelpunkt dieses Bildes ist. Ich werde so eine Kurzanleitung verwenden. Jetzt wissen wir, wo das Zentrum ist, also werde ich es schnell so ausrichten. Ja, es ist fast in der Mitte. Wählen wir den ersten und den letzten und alle aus und lassen Sie uns sie wieder ausräumen. Jetzt ist es richtig ausgerichtet. Ja, Ausrichtung ist ein Schlüssel zum Erfolg in Ihrem Design. Ihr Alles und jedes Bild sollte richtig ausgerichtet sein. Der Bildbetrachter stellt dann Bilder wie dieses dar. Wir sind fast fertig mit diesem Bereich. Jetzt werden wir all dies in Thumbnails wie diese gruppieren . Wir können hier drüben einen guten Platz haben. Dieser sieht auch nicht sehr schlecht aus, aber die Lücke zwischen diesen Bildern sieht hier etwas geräumiger aus. Weltraum hier. Lassen Sie mich überprüfen, was die Höhe hier war 1 , 2, 3 ,4, 5, 6, 7, 8, 9,10, 11, 12. Jetzt sind es 32 Pixel entfernt. Lassen Sie uns die Oberseite dieser Bilder ausrichten. Es sieht jetzt gut aus. Gehen wir zum nächsten Vortrag, wo ich den Text auf diesem Bild oder auf diesem Kunstboard hinzufügen werde . Fahren wir mit der nächsten Lektion fort. 68. Text zum IOS App hinzufügen: Lassen Sie uns diesem Entwurf in dieser Lektion etwas Text hinzufügen. Lassen Sie uns dieses auswählen und zuerst werde ich es speichern, weil ich es noch nicht gespeichert habe. Speichern wir es jetzt auf dem Desktop. Jetzt zuerst werden wir diese Martina Schriftart wählen, regelmäßig, und ich werde die Größe von 52 Punkte oder 52 Pixel verwenden und Farbe wird weiß sein. Klicken Sie hier irgendwo und es war Sandwich-Café. Nun, ich sage schicken Sie das Café her und lassen Sie es uns so etwas runter schieben. Lassen Sie uns es an der Spitze bewegen und die Hintergrund-Overlay anpassen, weil ich es nicht lesen kann. Das hier sieht besser aus. Gehen wir zu diesem Kollektorfeld und entfernen Sie diese Unterstreichung. Dann werde ich unsere andere Schriftart auswählen, die Lato war, regelmäßig. Das hier ist schlimm. Lassen Sie es uns duplizieren und wählen Sie die Schriftart Lato. Ich hatte die Schriftart ausgewählt, so dass sie auf eine andere Schriftart umgestellt wurde. Das passiert manchmal mit mir. Jetzt werden wir 28 oder vielleicht 32 für den Standort dieses Cafés verwenden . Dafür werde ich Lahore benutzen. So wie das. Lass sie uns ein bisschen bewegen. So sieht es jetzt besser aus. Ich denke, lass es uns 20, 1, 2, 3, 4 oder 24 Pixel machen und dieser wird eins und zwei sein. Zwanzig Pixel davon entfernt, sieht das gut aus. Lassen Sie uns es ein bisschen kleiner machen, Ich habe dies auf 30 Pixel verschoben, jetzt dieser Teil, wo wir spezielle Deal für heute hatten. Wieder müssen wir diese Schriftart auswählen. Klicken Sie hier einmal, klicken Sie auf diese Schriftart, wählen Sie wie diese, und wählen Sie dann diesen Text und Sie können diese Größe sehen und alles ist bereits ausgewählt. Klicken Sie hier und der Text war ein besonderes Angebot für heute. Doppelklicken Sie hier und Sonderangebot für heute. Jetzt werde ich die Farbe dieser Schriftart zu dieser lila Farbe auswählen, die unsere Grundfarbe für dieses Design war. Lassen Sie uns es bewegen und 1, 2, 3, 4, 5 und 6, 60 Pixel davon entfernt. Die nächste Zeile, die Hühnchen Biryani und der Preis ist. Lassen Sie uns hinzufügen, dass die Schriftart Lato ist. Ich werde zuerst diese Ebene auswählen und dann „D“ drücken und Lato ist ausgewählt. Ich werde Huhn Biryani schreiben und der Preis war $2,99 nur. Das ist der Text. Du kannst die Texte nicht sehen, weil ich schwarze Voodoo-Magie mache. Der weiße Text. Lass es uns grau für diese Farbe machen, schätze ich. Nun, lassen Sie es uns in die Mitte bewegen. Wir werden uns mit diesen Ausrichtungen beschäftigen. Neutron, aber wenn Sie es schnell ausrichten wollen Steuerung A, Kontrolle Alt H und es ist bereits horizontal in der Mitte. Nun, für dieses Hühnchen Biryani, ich denke, es ist ein bisschen sehr dunkel. Was ich tun werde, ist, dass ich diese lila Farbe auswählen werde und ich werde in diesem Bereich hier drüben so bewegen. Das hier war ein bisschen gute Farbe. Es ist etwas gräulich und ein bisschen violett. 63, das ist manchmal ich tun, also kombiniere ich diese beiden Farben, um die graue Farbe so zu erhalten und dann werde ich diese auswählen, und ich werde diese grüne Farbe hier drüben auswählen. Wir werden die Schriftgröße für diese grüne Farbe erhöhen. Machen wir es 36, so, und sehen bis jetzt perfekt aus. 69. Knöpfe zum IOS App hinzufügen: Dann haben wir eine Telefonnummer, die meine Telefonnummer ist. Schreib es uns hier drüben. Zuerst werden wir abgerundetes Rechteck auswählen, und Radius sollte 10 oder vielleicht 12 sein, ich denke, 12 wird in Ordnung sein. Lassen Sie uns hier eine Schaltfläche wie folgt erstellen, und Farben sollten lila sein, und Rundheit sollte 20 Pixel betragen. Das sieht gut aus. Jetzt für das Symbol des Telefons, Ich werde meine Font Awesome PS Erweiterung hier verwenden, so lassen Sie uns ein Symbol Telefon hinzufügen. Das hier sieht perfekt aus, ein bisschen hier drüben. Also lasst es uns weiß färben, machen es ein bisschen größer. Dies ist im Grunde 42 Pixel ist gut genug. Hier drüben, lassen Sie es 1, 2 und 330 Pixel von links weg bewegen . Dann schreibe ich meine Telefonnummer hier drüben. Sie können es auch ein bisschen grün machen. Wenn Sie eine Farbe schärfer machen möchten, können Sie hier die Sättigung erhöhen. Ich werde es auf fast 86 erhöhen, so. Jetzt werde ich verwenden, nennen wir es das Muster-Telefon. Hier werde ich meine Telefonnummer hier hinzufügen, die seitlich sein wird. Lassen Sie uns die Farbe in Weiß ändern. Näher an Weiß, was im Grunde ein bisschen gräuliche Farbe ist. Verschieben wir es 1-330 Pixel von rechts und 40 Pixel. Nun, was ich im Grunde tun werde, ist, dass ich diese beiden durch ein und 220 Pixel trennen und diese Telefonnummer gruppierenund sie in der Mitte dieses Knopfes so ausrichten werde 220 Pixel trennen und diese Telefonnummer gruppieren . Jetzt habe ich diesen inneren Inhalt gruppiert und dann in die Mitte verschoben. Nun schätze ich, wir können auch diesen Bildschirm färben oder vielleicht ein bisschen gräulich. Ich denke, es zu sehr hervorzuheben, ist nicht gut genug. Ich benutze dieses Wort sehr gut genug. Nun, was wir tun werden, werden wir einen sehr großen Buch-Button hier drüben verwenden, und das war im Grunde der Button. Lassen Sie uns hier ein Rechteck erstellen. Diese große und Farbe es dieses hier. Wenn Sie den flachen Look mögen, können Sie diesen Knopf so verwenden. Aber wenn Sie ein wenig erhöhtes Aussehen mögen, können Sie inneren Schatten verwenden. Was wir tun werden, ist, dass wir diese Farbe auswählen, dann werden wir die Helligkeit reduzieren, um ein bisschen dunklere Farbe hier drüben zu bekommen. Sie können die Höhe hier schon sehen. Ich werde hier 16 Pixelhöhe und Null Pixelgröße verwenden. Winkel ist minus 90. Also im Grunde ist es der innere Schatten von dieser Richtung von unten nach oben. Klicken Sie auf „OK“. Wenn Sie wirklich möchten, können Sie auch ein bisschen Farbverlaufsüberlagerung auf dieser Schaltfläche hinzufügen. Wenn du es wirklich willst. Ich benutze dieses transparente Weiß zu Schwarz. Sie können so auswählen und Sie können es auch so multiplizieren. Ich werde hier ein bisschen graue Farbe verwenden, weil es sehr scharf und etwas dunkler aussah . Ich denke, es sieht gut aus ohne dieses Gradienten Overlay. Lassen Sie uns diese Farbverlaufsüberlagerung entfernen. Ich werde wieder diese Font Awesome PS verwenden, um einige Kalender hier drüben zu bekommen. DA ist gut für einen Kalender, also werde ich diesen auswählen. Dies ist das Symbol für den Kalender. Wir müssen das hier von dieser Telefonnummer entfernen. Wo ist dieser Kalender? Vergrößern wir die Größe und bewegen sie hier rüber. Farbe es weiß. Dann werden wir unsere letzte Schriftart verwenden, die Maven Pro war. Es war Maven Pro nicht Maven. Ich werde diese Maven Pro Regular benutzen und ich werde es hier benutzen und jetzt buchen. Was ich getan habe, ist, dass ich dieses Zeichenfeld benutzt habe, um es auszuräumen. So sind es 36 Punkte, also 36 Pixel im Grunde. Sie können die Verfolgung hier einstellen. Ich habe dies verwendet, um die Größe von 225 Pixel zu erhöhen. Lassen Sie uns das hier rüber bewegen. Wählen Sie diesen Kalender, ich werde seine Größe zu reduzieren. Es ist im Grunde 55 mal 59 Pixel. Verschieben wir es auf 50, und verschieben Sie es jetzt in die Mitte dieses Bereichsbuches. Wir werden auch diesen Text unterstreichen, Buch jetzt. Die Leute wissen also, dass dies im Grunde ein Knopf ist. Selbst wenn Sie es entfernen möchten, können Sie es so entfernen. Also mach dir keine Sorgen darüber. Ich kann auch die Größe erhöhen, und wir sollten auch die Größe auf 40 erhöhen, denke ich, weil es etwas größer aussehen sollte als dieser Bereich. Lassen Sie uns diese Telefonnummer etwas kleiner machen. Lassen Sie uns es 30 Pixel machen und auch reduzieren. Ich denke, 32 Pixel sieht gut genug aus und reduzieren auch diese Telefongröße dieses Symbols auf 36 Pixel. Machen Sie es näher an diesen ein und zwei, und machen Sie es auch ein bisschen kürzer so. Ich werde meine Tastenkombinationverwenden meine Tastenkombination um sie richtig auszurichten. Dann werde ich all dies in Telefonmuster gruppieren und es in der Mitte dieses App-Bereichs ausrichten, der unser Kunstboard ist. Ich denke, es sieht fast perfekt aus. Lassen Sie uns ein wenig Abstand genau bekommen. Das ist unser Telefonknopf. Mal sehen, wie viel es weiter von diesem 1, 2, 3, 4, 5 ist. Fünf ist gut genug. Hier haben wir Hühnchen Biryani. Spezielle Angebote. Lass es uns mittendrin schaffen, ein bisschen so runter. Es sieht perfekt aus, und ich denke, richten Sie dies mit diesem Kalender aus. Es ist fast ausgerichtet, aber ich fühle mich ein bisschen. Eins und zwei, 1, 2, 3, 4. Vierundzwanzig Pixel hier drüben. Lassen Sie uns gruppieren, Inhalt des Buches jetzt Schaltfläche. Dies ist unser Hintergrund des Buches jetzt. Lassen Sie uns gruppieren sie in Schaltfläche, buchen Sie jetzt Schaltfläche. Lassen Sie uns diesen Inhalt so in der Mitte ausrichten. Lassen Sie uns alles in der Mitte dieser Leinwand ausrichten. Unsere Pakistans Special Deals Sandwich, und lassen Sie es in der Mitte ausrichten. Alles ist in der Mitte. Ich denke, wir können die Größe dieses Textes erhöhen, weil er diesen Sonderabschlüssen fast näher schaut. Ich habe die Größe auf 64 Punkte erhöht, Martina regelmäßig. Ich denke, das macht das Ende dieser Lektionsreihe. Was ich tun werde, ist nur ein letzter Effekt. Ich werde die Größe dieses $ Zeichens erhöhen. Machen wir es 40 Pixel oder vielleicht 38, ein bisschen größer als der andere Text. Es ist perfekt und ich werde es jetzt retten. Unser iPhone 6 App-Bildschirm ist komplett. In der nächsten Lektion erstellen wir die Markierung für den Bildschirm, also fahren wir mit der nächsten Lektion fort. 70. Using zum Präsentiere deiner Designs: Jetzt lassen Sie uns schöne Mockup dieses Designs erstellen. Was wir tun werden, ist, dass wir „Control A“ und „Control C“ für Kopie oder „Control Shift C“ drücken , wenn Sie alles kopieren möchten, und ich benutze dieses iPhone 6 Mockups von Pixeden. Wenn du willst, kannst du hier drüben sehen. iPhone 6 Pixeden Mockups Dies sind im Grunde Mockups von Pixeden für iPhone 6, und ich benutze sie. Was ich tun werde, ist, wenn ich diese Datei öffne, gab es im Grunde drei weitere iPhones, also habe ich dieses, weiße ausgewählt. Dies ist im Grunde die Vorderansicht. Sie müssen einfach hier doppelklicken und Sie müssen Ihr Design hier einfügen. Lassen Sie mich das hier verstecken. „ Control V“ hier und Statusleiste, ich benutze im Grunde diesen Farbüberlagerungseffekt. Ich habe dieses Color Overlay dazu hinzugefügt. Wenn ich versuche, es zu verstecken, können Sie sehen, dass es bereits weiß ist. Aber wenn Sie eine andere Farbe wollen, wie wenn ich lila Farbe an dieser Leiste möchte, kann ich sie verwenden oder sogar wenn ich diese grüne Farbe möchte, kann ich sie verwenden. Ich kann hier drüben jede Farbe benutzen. Dies ist einfacher, auf diese Weise zu steuern. Ich benutze jetzt Weiß. Jetzt müssen Sie nur „Control S“ speichern, und Sie können hier sehen, wir haben unser Mockup. Es sieht sehr schön aus, und dann gab es zwei weitere Mockups, die dieses Viertel Ansicht waren. Es ist ein bisschen beiseite Blick. Ich habe dieses schwarze ausgewählt und hier sieht unser Design in dieser Seitenansicht sehr ordentlich aus. Ich habe mich für dieses schwarze entschieden und die anderen beiden versteckt, die diese beiden waren. Lassen Sie uns einfach diesen einen Doppelklick auswählen, klicken Sie auf „OK“, „Control B“. Verschieben Sie die Statusleiste über diese Ebene nach oben. Ich denke, es ist bereits weiße Farbe. Wenn Sie möchten, können Sie Layerstile verwenden und Farbüberlagerung anwenden, die weiß ist. Dies ist im Grunde, wir können leicht, die Farbe zu kontrollieren. „ Control S“, speichern Sie es, und Sie können hier sehen, so verwenden wir diese Modelle. Diese helfen unseren Kunden und anderen Menschen wirklich , Fall Ihr Design zu zeigen, und es ist eine gute Praxis zu zeigen, immer zeigen Sie Ihre Designs so. Dies ist die endgültige Version, in der ich Ihnen zeigen wollte, wie Sie diese Mockups verwenden. Lass uns auch hier drüben hinzufügen. Verschieben Sie diese Statusleiste nach oben. Oder lasst es uns einfach hier drüben lassen. Sehen Sie, wie das aussehen wird. Ich werde diese PSP-Dateien zu schließen. So sieht unser Design aus, und ich denke, wir brauchen auch die Statusleiste. Warum es schwarz ist, brauchen wir hier drüben eine weiße Statusleiste. Machen wir es weiß Color Overlay weiß und das war's. Nun, es sieht gut aus, und das endet das Finale dieses iPhone-Design. Ich werde mehr iPhone-App für das Android erstellen, schätze ich. Bleiben Sie dran und kümmern Sie sich, und wir sehen uns bald in anderen Vorlesungen. 71. Einfaches Trick, um weiße Hintergründe zu entfernen: Hallo, alle. Wir werden einige Bilder bearbeiten Dinge in diesem Abschnitt zu tun. In der ersten Vorlesung geht es um das Entfernen des weißen Hintergrunds mit einem einfachen Trick. Das ist das Endergebnis, das ich bekommen habe. Viele von Ihnen, wenn Sie in Photoshop entwerfen, haben Sie möglicherweise einige Bilder. Sie haben einen weißen Hintergrund wie diesen. Es gibt einen sehr einfachen Trick, um diesen Hintergrund zu entfernen, und ich werde Ihnen das Geheimnis erzählen. Lasst uns jetzt anfangen. Was wir tun werden, ist, dass wir diesen weißen Hintergrund mit Mischoptionen schnell entfernen werden. Ich werde auf Neu klicken, 1440 von 900 Transparent, OK. Alt Löschen, um die Ebene zu füllen. Ich werde dieses Rechteck-Werkzeug aufgreifen und ein Rechteck hier drüben so zeichnen. Lassen Sie uns seine Farbe in sehr stumpfes Blau wie diese ändern. Dieser Trick funktioniert nur mit sehr hellen Hintergründen. Wenn Sie versuchen, einen dunkleren Hintergrund zu verwenden, dann werden wir den nächsten Vortrag darüber zu sehen, wir werden diesen weißen Hintergrund entfernen. Lassen Sie uns mein Bild hier rüber ziehen, ich habe von Dreamstime heruntergeladen. Es war ein Bild, als ich es für einen Klienten von mir benutzte. Lass es uns hier herumziehen. Lassen Sie uns dieses Hintergrundrechteck ein bisschen größer machen, weil es weniger Platz um es herum hat. Bewegen Sie es nach unten, und lassen Sie es in der Mitte ausrichten, ich werde Alt Control H. Was ich tun werde, ist jetzt werde ich schnell den weißen Hintergrund entfernen, also lassen Sie uns zu dieser Ebene gehen. Vergewissern Sie sich, dass Sie im Ebenenbedienfeld diese Bildebene ausgewählt haben, und wählen Sie diese Option „Verdunkeln“. Dies ist ein sehr gepflegter Zaubertrick. Sie können sehen, dass dieser weiße Hintergrund gerade verschwunden, und Sie können auch diese dunklere Farbe verwenden, beide funktioniert sehr gut beim Entfernen von weißen Hintergründen auf helleren Farben. Wenn ich versuche, die Farbe von so etwas, hellem Hintergrund zu ändern , wird es sehr gut funktionieren. Das ist ein sehr netter Trick. Sie können Hintergründe wie diesen leicht entfernen und weiße Hintergründe zu jedem weißen oder sehr hellen Hintergrund zusammenführen . Wenn Sie entwerfen, versuchen Sie, Bilder mit weißen Hintergründen zu finden. Sie sind sehr einfach zu justieren und sehr leicht zu entfernen. Das ist der Trick, den ich mit euch teilen wollte. Gehen wir zur nächsten Lektion über, in der wir den weißen Hintergrund schnell mit einer anderen Methode entfernen werden. Also bleib dran und stelle mir Fragen. Fahren wir mit der nächsten Lektion fort. 72. Kleine Objekte aus dem Bild mit Spot entfernen: Hallo an alle. In dieser Lektion werden wir einige weitere Photoshop-Arbeiten mit einigen Bildern durchführen. In dieser Lektion, was ich tun werde, ist, dass ich dieses Bild säubern werde. Sie können das Bild unten sehen, es ist das Bild von einem meiner Kunden. Sie können die Drähte hier drüben sehen, hier drüben, einen hier drüben, und dann gibt es hier einen Ast. Also, was wir in dieser Lektion tun werden, das ist der erste Schritt, wir werden alle diese Details entfernen, und in der nächsten Lektion werden wir es einige dramatische Wirkung wie diese Wolken und einige Farbanpassungen geben . Ich bin kein Meister der Farbanpassungen, aber ich werde Ihnen einige Bits eines Leitfadens geben, damit Sie einige Ihrer Bilder leicht manipulieren können, denn wenn Sie UIs entwerfen, gibt es viele Male, in denen Sie Bilder bearbeiten müssen. Zuerst werde ich mit diesem Bild beginnen, also gehen wir zu „Alle in Tabs konsolidieren“. Das ist unser letztes Bild, das ist das Bild, mit dem wir arbeiten werden. Nun, was wir tun werden, ist, dass wir dieses Spot Healing Prush Tool verwenden werden. Die Tastenkombination ist J. Wenn Sie Spot Healing Brush Tool hier nicht sehen, können Sie zu dieser drei Punktleiste gehen und Sie können Ihre Werkzeugleiste bearbeiten. Dies ist die neue Funktion in der neuesten Version von Photoshop. Versuchen Sie, auf diese Bearbeitung zu klicken und ziehen Sie die Werkzeuge, die Sie wollen hier rüber. So funktioniert diese benutzerdefinierte Symbolleiste. Ich wähle das Tool „Spot-Heilungspinsel“ aus. Sobald ich das mag, können Sie sehen, dass wir hier einen Pinsel haben, das ist die Größe der Bürste, Härte, stellen Sie sicher, dass es 100 Prozent ist. Wir wollen keine sehr weiche Bürste. Dann haben wir den Modus Normal, lass es so sein. Jetzt ist die Hauptsache dieser Typ. Wählen Sie den Inhaltswert aus. Wählen Sie weder diese Näherungsübereinstimmung noch Textur erstellen aus. Wählen Sie diesen Inhalt aus und beginnen Sie mit dem Pinseln auf die Objekte, die Sie weggehen möchten. Erstens, was wir tun werden, ist, dass wir diese Ebene duplizieren , damit wir nicht unser Hauptbild verlieren. Ich werde es einfach so anputzen. So wie das hier. Wenn Sie viel Perfektion wünschen, sollten Sie die Ansicht vergrößern. So arbeiten wir hier drüben. So wie das hier. Ein Draht wurde magisch entfernt und einfach so überbürsten. Ich werde auch diesen Ast überbürsten, und zuletzt werden wir diese zwei Drähte hier drüben so aufbürsten . Sie können sehen, dass alle Drähte weg sind. Es gibt noch eine Sache, die Sie hier sehen können, ist es ein Licht oder ein Sprinkler? ein Ding wie das. Erhöhen Sie die Pinselgröße, indem Sie die Klammertasten auf der Tastatur drücken und einfach einmal drücken. Auf diesem Klick einmal, und Sie können alle zusätzlichen Dinge sehen, die wir hier entfernen wollten, haben wir sie entfernt. Selbst wenn Sie weiter gehen wollen, können Sie dieses kleine Gebäude hier entfernen, aber ich denke, es gibt uns einige Probleme, also lassen Sie uns unsere Bürste kleiner machen. Sie können sehen, dass ich dieses Gebäude auch hier entfernt habe. So funktioniert dieses inhaltsbewusste Flecken-Heilpinsel-Werkzeug. In der nächsten Vorlesung werden wir einige der Farben und Helligkeit und Lebendigkeit dieses Bildes anpassen . Gehen wir also zur nächsten Vorlesung über. 73. Farben in Bildern auftauchen: In dieser Lektion werden wir dieses Bild in näher an dieses konvertieren, ein bisschen dramatische Wolken, verschiedene Farben und ein bisschen mehr Anpassungen hier drüben. Also lasst uns loslegen. Was wir tun werden, ist, dass wir unsere Kurven hier benutzen werden. Diese Kurven werden also im Grunde Ihre Töne Ihres Bildes komprimieren oder dekomprimieren. Also, was wir tun werden, ist, dass wir hier einen Punkt verwenden werden, klicken Sie einfach über diese Linie, einen Punkt hier und einen Punkt hier drüben. Nun, was ich tun werde, ist, dass ich diesen Punkt ein bisschen nach oben ziehen werde, diesen ein bisschen nach unten, so wie dieser. Auch dieser hier. Lassen Sie uns das hier ein bisschen näher bringen, so. Bewegen Sie die obere ein wenig auf der linken Seite, und Sie können sehen, dass wir fast den gleichen Effekt erreicht haben, den wir auf diesen Wolken wollten. Nun, was ich tun werde, ist, dass ich dieses duplizierte Bild konvertieren werde. Lassen Sie uns es duplizieren und ich werde es in Schwarz-Weiß konvertieren, gehen Sie zu Anpassungen und Entsättigen. Ich werde es entsättigen und ich werde lineares weiches Licht wie dieses verwenden. Sie können auch die Deckkraft des weichen Lichts auf 50 Prozent verringern. Auch ohne Kurven funktioniert dieses weiche Licht wirklich gut. Sie können den Unterschied hier sehen. Sie können es mit jedem Bild tun, duplizieren Sie es einfach und entsättigen Sie es mit dieser Einstellung und verschieben Sie diese Mischoptionen auf weiches Licht und verwenden Sie die Deckkraft, um das weiche Licht zu steuern. Dies ist der Effekt, den wir leicht in jedem Bild bekommen können. Wenn Sie verschiedene Töne ändern möchten, können Sie diese Kurven verwenden, und oben darauf, können wir auch diese Vibrance verwenden. Dies sind im Grunde die Farben. Sie können sehen, manchmal sagen wir, dass ich etwas Pop in diesem Bild brauchen, sollten Farben ausgetauscht werden, also wenn Sie diesen Schieberegler auf den richtigen Maximalwert bewegen, können Sie sehen, dass die Farben wirklich knallen. Also, was ich tue, ist, dass ich normalerweise diese Sättigung auf 5 minus 5. Sättigung ist auch, wie intensiv die Farbe ist und Lebendigkeit ist auch damit verbunden. So ändere ich das Bild hier drüben. Jetzt sehen Sie vielleicht einen bläulichen Farbton am Himmel. Das ist sehr einfach, klicken Sie einfach auf diese Hintergrundebene, und ich habe eine Einstellungsebene verwendet, was im Grunde ist, können wir einfarbig, eine Art von blauer Farbe hier so verwenden , und wir werden , um seine Deckkraft auf 20 Prozent zu reduzieren und es so zu halten. Sie können den Effekt dieser blauen Farbfüllung sehen. Wenn ich es ändern will, kann ich es hier drüben so ändern. Jetzt gibt es ein bisschen bläulichen Effekt auf das ganze Bild. Das ist also Color Fill, auch wenn ich die Kurven entferne, können Sie immer noch diese Farbfüllung und sogar diesen weichen Lichteffekt mit dieser entsättigten Schicht sehen , haben wir hier eine sehr gute Wirkung. Wenn ich diese Kurven aktiviere, okay jetzt, wenn Sie die Deckkraft reduzieren möchten, können Sie auch die Deckkraft dieses Kurvenkanals oder der Kurvenebene reduzieren. Also werde ich es auf 40 Prozent reduzieren und Vibrance, ich werde diese Vibrance auswählen und auch werde es auf 80 Prozent reduzieren. Okay, jetzt ist dies der letzte Effekt für diesen Vortrag, also nur um zusammenzufassen, was wir getan haben, ist, dass wir dasselbe Bild auf eine andere Ebene dupliziert haben und dieses Bild, Anpassungen und Desaturate verwenden. Befehl ist Control Shift und U, und Optionsbefehl U für max. Also habe ich das verwendet, und dann vergessen Sie einfach all diese, und dann habe ich diese obere Schwarz-Weiß-Schicht ausgewählt und diese weiche Lichtmischoption verwendet und die Deckkraft auf 50 Prozent reduziert. Dann habe ich Einstellungsebene von hier aus verwendet, die einfarbig ist. Sie können den Farbverlauf auch verwenden, wenn Sie zwei Farben in diesem Bild haben möchten, verschiedene Farben von oben nach unten. Jetzt habe ich diese Farbfüllung verwendet, stellen Sie sicher, dass ich diese mit dieser Ebene beschneide, also Alt, klicken Sie zwischen diesen beiden Ebenen, um sie zu schneiden, und dieses Blau wird nur auf diese Ebene angewendet, und dann habe ich einige der Kurven verwendet. Ich habe diese Kurven angepasst, nur um sie herum gespielt, so dass ich den gewünschten Effekt erzielen kann. Dann mit der Vibrance habe ich nur Vibrance benutzt, um die Bilder auftauchen zu lassen oder was auch immer du gesagt hast. Jetzt ist das das Ende. Ich habe Ihnen zwei oder drei Techniken gesagt, um Ihre Bilder zu verändern. Sie können sie auf Porträtbildern, Ihrem Gesicht oder auf welchem Bild auch immer Sie haben. Ich denke, das deckt die Grundlagen der Bildbearbeitung für alle UI-Designer ab, und wenn ich etwas anderes einfalle, werde ich neue Vorträge erstellen, also bleiben Sie dran und achten Sie darauf und gehen Sie einfach zum nächsten Vortrag. 74. Hintergrund mit magnetischem Lasso-Tool entfernen: Heute werden wir den Hintergrund von diesem Kerl entfernen. Eigentlich war der Hintergrund, den er hatte, so etwas und wir haben ihn in sehr kurzer Zeit entfernt. Diese Techniken beinhalten im Grunde die Verwendung von Lasso-Werkzeug, das ist dieses magnetische Lasso-Werkzeug, Photoshop-Werkzeug. Lassen Sie uns anfangen und entfernen Sie den Hintergrund von diesem Kerl und verwenden Sie jeden anderen Hintergrund, den wir mögen. Diese Auswahl im Grunde haben wir auch Haarteil und ein paar andere Bereiche wie diese, dies, also werden wir dieses Lasso-Werkzeug verwenden, um all dies zu entfernen. Lasst uns anfangen. Ich werde das Bild importieren, das ich habe. Dies ist ein freies Bild. Ich erinnere mich nicht, woher ich dieses Bild bekam, aber ich werde sicher danach suchen und es ist schon offen. Ich fange wieder an. Ich werde diese Ebenen löschen. Das ist im Grunde das Bild, das wir hatten. Nun, zuerst, ich werde tun, ist diese Ebene duplizieren und dann werden wir dieses Lasso-Werkzeug, Magnetic Lasso Werkzeug aus Werkzeugen von Photoshop-Werkzeuge auswählen . Sobald Sie dieses Lasso-Werkzeug auswählen, und Sie können sehen, gibt es verschiedene Optionen hier drüben, so ist dies Fütterung Optionen. Feeder bedeutet, dass es die Ecken ein wenig verwischen wird, also denke ich, dass wir es jetzt nicht brauchen, also halten Sie es auf Null. Stellen Sie sicher, dass Anti-Alias aktiviert ist. Diese Breite ist im Grunde die Breite des Auswahlwerkzeugs Wenn also die Breite sehr kleiner ist, können Sie erraten, dass es im Grunde die Genauigkeit dieses Magnetic Lasso Werkzeugs ist. Im Grunde geht es auf den Kontrast des nackten Bodens und dieses Typen hier drüben. Sie können sehen, wie es so funktioniert. Ich benutze gerade eine sehr grobe Auswahl nur um sicherzustellen, dass Sie wissen, wie es funktionieren wird. Lassen Sie uns diese Auswahl entfernen. Breite ist im Grunde, wie viel Genauigkeit Sie in der Auswahl wollen. Wenn Sie eine sehr genaue Auswahl wünschen, können Sie sie und dann den Kontrast reduzieren. Es ist der Kontrast zwischen diesem nackten Boden und dem Arm dieses Kerls, Sie hier sehen können. Auch hier haben wir viel Kontrast, aber hier haben wir sehr weniger Kontrast. Diese Farben sind fast ähnlich, also werde ich den Kontrast auf fünf oder 10 Prozent reduzieren, fünf Prozent. Frequenz ist im Grunde, wie viele Punkte dieser Photoshop wird für Ihr Magnetic Lasso Werkzeug setzen. Wie Sie hier sehen können, haben wir 10 oder 15 Punkte, also Frequenz, wenn Sie es hoch einstellen möchten, können Sie es hoch einstellen. Wenn Ihr Objekt sehr kantig ist und viele [unhörbare] Kanten hat, dann denke ich, dass die Frequenz auf hoch eingestellt werden sollte. Abgesehen davon denke ich, dass alle Einstellungen gut genug sind. Das ist für den Stiftdruck. Wir verwenden kein Tablet oder ein anderes Gerät, also benutze ich meine kleine Maus, also werden wir dies nicht nur zum Simulieren verwenden. Nun, lassen Sie uns dieses Magnetic Lasso Werkzeug verwenden, um die Auswahl tatsächlich zu treffen. Ich werde hier klicken und einfach den Photoshop tun es ist Trick. Wann immer ich das Gefühl habe, dass es etwas gibt, das ich genau machen muss, kann ich manuell einen weiteren Ankerpunkt hinzufügen, indem ich hier so klicke, so dass es genauer ist. Hier haben wir die Hand dieses Kerls, dann das Ohr und Sie können sehen, wie ich klicke und wie ich diesen manuellen Ankerpunkt für meinen eigenen Gebrauch oder Vorteil verwende. Sie sich keine Sorgen über die Bereiche, die aus dieser Auswahl herauskommen. Wir werden es mit einer anderen Technik anpassen, die die Kante verfeinern ist. Unsere Auswahl ist fast erledigt. Jetzt haben wir die Auswahl. Wenn wir zum ersten Punkt kommen, wird es diese ovale Form zeigen. Klicken Sie einfach darauf und Sie können sehen, dass die Auswahl getroffen wird. Nun, der zweite Teil, müssen wir diese Bereiche von der Auswahl subtrahieren, also werden wir diese Subtraktion von Auswahl auswählen und wir werden diese Bereiche hier auswählen, die wir in unserer Auswahl nicht brauchen. So wie das. Auch dieser hier. Wenn Sie einen Fehler haben und zurückgehen möchten, drücken Sie einfach die Rücktaste zwei oder drei Mal und so geht es zurück. Nun, die Auswahl wird auch getroffen, dann haben wir diese innere Auswahl in dieser Hand. Ich denke, wir müssen den Kontrast ein wenig erhöhen und auch diese Breite, weil es in diesen Bereichen viel Kontrast hat. Ich steigere den Kontrast. Sie können zoomen, wenn Sie möchten. Sie können die Steuerungstaste plus drücken und vergrößern. Wenn Sie mehr Zoom wollen, können Sie so gehen. Wenn Sie Ihr Bild verschieben möchten, während Sie dieses Lasso-Werkzeug ausgewählt haben, können Sie die Leertaste drücken und sich so bewegen und die Leertaste loslassen. Sie können genau sehen, wie diese Auswahlen magisch funktionieren. Dies sind einige unserer letzten Auswahlen, und dann werden wir das verlassen. Hier drüben gibt es noch eine sehr kleine Auswahl. Es ist besser zu vergrößern, wenn Sie sehr kleine Bereiche haben, die Sie auswählen müssen. Nun, ich werde verkleinern und wir werden diese Verfeinerung verwenden, und Sie können hier drüben sehen, drücken Sie das. Jetzt gibt es verschiedene Modi. Passende Ameisen. Ok, Overlay. Ich mag es besser, weil ich es auf einem roten Hintergrund sehen kann und ich sehe, wo die Kanten und Sachen sind , die ich genau machen möchte. Manche Leute mögen so etwas, so etwas wie auf Weiß, aber ich mag das hier. Dies ist, wie Sie sehen oder präsentieren, während Sie die Technik dieses Raffiners verwenden. Nun, was Sie tun werden, im nächsten Schritt werden Sie den Smart Radius auswählen und Sie können hier drüben sehen, Ich habe etwas mit einem Pinselstil plus Zeichen hier. Wenn Sie die Größe reduzieren möchten, können Sie diese Klammern auf Ihrer Tastatur so drücken. Machen Sie es etwas kleiner für genauere Ergebnisse. Was ich tun werde, werde ich Photoshop meinen Umriss oder Rand dieses Bildes geben, das ich bearbeite, also werde ich einfach drücken und ziehen und malen am Rand dieses Bildes wie folgt und wir werden nur geben Photoshop der Rand dieses Bildes. Sie sich keine Sorgen, wir können es danach mit unseren Maskiertechniken reparieren. Sie können bereits sehen, dass es unser Image viel besser gemacht hat. Nun, diese Bereiche, wir müssen sie auch reparieren, eins und dann dieses, zwei. Hier haben wir ein kleines Problem. Es hat unser Problem ausgelöscht. Wir werden uns mit diesem weißen kleinen Punkt mit einer anderen Technik beschäftigen, also mach dir jetzt keine Sorgen darüber. Also, jetzt haben wir ein bisschen Problem mit diesen Haaren. Lassen Sie uns unsere Auswahl ein wenig in diesem Haar machen. Nun, dieses Weiß hinter diesen Haaren hier wurde entfernt. Jetzt kommen Sie zu diesen Optionen. Wir sind mit dieser Kantenerkennung Smart Radius fertig, so dass der nächste Schritt ist, wie Sie die Kante anpassen. Wir können es glätten, wenn wir wollen, wenn es sich sehr verzerrt anfühlt. Wir werden es nicht benutzen. Feather, wenn ich diese Feder anschalte, siehst du, dass es um diese Auswahl herum ein verschwommenes Feld gibt. Manchmal haben wir keine sehr genaue Auswahl, und wir wollen eine Feder, damit wir sie leicht anpassen können. Im Moment werden wir die Feder nicht benutzen. Vielleicht sind zwei Pixel gut genug. Wenn Sie nun versuchen, den Kontrast zu erhöhen, können Sie sehen, dass sich dieser Kantenkontrast im Wesentlichen verbessert. Sie können hier drüben sehen, die Hand und alles, also machen wir es auf fünf Pixel. Ich denke, wir brauchen nicht zu viel Kontrast, vielleicht 10. Umschaltkante bedeutet, wenn ich Ihnen den Radius zeige, dies ist der Radius, den wir für unseren intelligenten Radius zeichnen , um Photoshop die Kanten dieses Fotos zu geben. Wenn ich nun versuche, die Kante zu verschieben, wird es tatsächlich die Kante dieses intelligenten Radius verschieben, den wir hier zeichnen. Wenn ich also versuche, es nach außen zu wechseln, können Sie sehen, dass es äußere Pixel auswählt. Vielleicht können wir so etwas plus fünf auswählen , weil sich unsere Hand tatsächlich darin bewegt hat. Nun, die letzte Ausgabe. Was wir also tun werden, ist, dass wir eine neue Ebene mit Ebenenmaske verwenden , um diese Auswahl auszugeben. Also im Grunde, was wir tun, war, dass wir unsere Auswahl verfeinern. Jetzt werden wir „Okay“ drücken, und hier haben wir unser neues Bild mit dieser Auswahl und dieser Maske. Jetzt werde ich eine neue Ebene erstellen und sie mit jeder Farbe füllen, die ich mag, wie diese dunkle. Siehst du, trotzdem haben wir ein paar Probleme hier drüben. Es ist im Grunde das Problem mit unserer letzten Maskierung, wo wir die Kante nach außerhalb seiner Haare bewegt. Jetzt haben wir diese Ebenenmasken, also gehen Sie zu dieser Ebenenmaske und wählen Sie die schwarze Farbe X. Sie können hier sehen, wir haben schwarz. Drücken Sie das „B“, bürsten Sie. Drücken Sie das Weiß. Grundsätzlich müssen wir das Weiß als Vordergrundfarbe auswählen und wir wollen, dass dies seine Hand zeigt , weil es im Original so versteckt ist. Hier haben wir auch einige Probleme hier. Die Hand, wir brauchen sie, um sichtbar zu sein. Wenn Sie den Pinsel kleiner machen möchten, können Sie die Tasten drücken, die ich Ihnen erzählt habe, die Klammertasten. Jetzt können wir auch diesen Pinsel auswählen. Kehrt die Auswahl um. Wenn Sie etwas ausblenden möchten, wählen Sie Schwarz wie folgt aus. Du siehst, dass ich gerade Schwarz benutze. Wir können die Haare entfernen, wenn du willst, also mach dir keine Sorgen um die Frisur dieses Kerls. Das Entfernen von wenigen Haaren wird dieser wow Person nicht schaden. Wir sind fast fertig. Wir müssen diesen äußeren verschwommenen Bereich entfernen, diesen hier und einige hier. Was ich benutze ist, dass ich nur ein Pinselwerkzeug benutze, um diese Maske ein bisschen mehr zu verfeinern, und ich denke, wir sind damit fast fertig. Wählen wir eine andere Farbe für diesen Hintergrund aus. Lassen Sie uns gelb wählen, weil dieser Kerl ein bisschen auf dem gelblichen Schatten Hintergrund war, also funktioniert das großartig. Das ist also das Endergebnis, das wir mit diesem Bild bekommen haben, und ich hoffe, dass Sie die Arbeit dieses magnetischen Lasso-Werkzeugs verstanden haben. So entferne ich normalerweise den Hintergrund der meisten Bilder. Sie können auch dieses Stift-Werkzeug verwenden, aber ich denke, es ist sehr zeitaufwendig, alles manuell und jede Kurve und alles hier drüben so auszuwählen . Also die meisten der Experten Jungs oder die Jungs, die Bildbearbeitung viel und Bildretusche tun, sie sind sehr Experte mit diesem Stift-Werkzeug, und ich denke, sie verwenden dies normalerweise. Es ist sehr präzise. Aber für den Haarteil, ich denke, dieses magnetische Lasso-Werkzeug und verfeinern Kante funktioniert sehr gut. Hier geht es um die heutige Vorlesung. Wenn du nichts verstehst, stelle mir Fragen, und ich schätze, lass uns zu neuen Vorträgen übergehen. 75. Mit der Auswahl und Maskenwerkzeug bereinigung: Heute werden wir eine neue Funktion von Photoshop CC 2015.5 erkunden, die diese Select and Mask ist. Es hat viele neue Funktionen. Ich denke, sie haben diese Verfeinerungskante im Grunde in dieses neue Werkzeug umgewandelt. Also heute werden wir über dieses Thema diskutieren. Der Hintergrund, den wir entfernen werden, ist dieser Hintergrund von diesem Kind. Sie können hier diesen Hintergrund sehen. Sie können sehen, dass dieses Kind viel Haar hat und es ist schwierig, alle Details in den Haaren leicht zu extrahieren. Lasst uns anfangen. Jetzt werde ich diese vorherige Auswahl löschen. Zuallererst, was wir tun werden, ist, dass wir zu diesem Lasso-Werkzeug gehen, also habe ich gesehen, dass es wirklich gut mit diesem normalen Lasso-Werkzeug funktioniert. Was wir tun werden, ist, dass wir weiter unsere linke Maustaste drücken und so weiter ziehen. Ich werde eine Auswahl bekommen und sicherstellen, dass die Auswahl nicht zu weit von den Haaren entfernt ist. Sie können sehen, dass ich so ein paar Haare draußen auslasse. Behalten Sie Ihre Auswahl im Inneren. Nimm nicht zu viel Außenbereich hinein. Dies ist eine sehr grobe Auswahl. Sie können hier sehen, drücken Sie die Umschalttaste, um eine gerade Linie zu erstellen. Ich werde es mit diesem kombinieren. Eine weitere Sache, wenn Ihr Bild zu groß ist, gibt es einen Trick, den Sie weiterhin die Lasso-Taste drücken und die Leertaste drücken und das Bild nach oben oder unten verschieben sollten . In der Zwischenzeit halten Sie die Maustaste gedrückt. Wenn Sie die Maustaste loslassen, wird der Pfad geschlossen. Während Sie sich in diesem Lasso-Werkzeug befinden, Sie die Maustaste nicht los, was auch immer Sie tun. Jetzt werden wir diese Auswahl und Maske drücken. Hier haben wir, es gibt verschiedene Vorschaumodi. Sie können hier sehen, gibt es eine neue, die Zwiebelhaut genannt wird. Es zeigt im Grunde den Hintergrund mit etwas Transparenz, wenn Sie sehen können. Das ist, was wir jetzt haben, Sie können hier drüben sehen. Auch andere Optionen sind fast die gleichen wie die Kante verfeinern. Sie können hier oben sehen Shift, Edge, Kontrastvorschub, Glatt. Stellen Sie sicher, dass Sie auf diese tiefe Verschmutzung Farben klicken. Stellen Sie sicher, dass es aktiviert ist und die Ausgabe immer neue Ebene mit Ebenenmaske sein sollte. Ich mag diese Zwiebelhaut nicht. Normalerweise mag ich diesen roten Hintergrund, so dass ich leicht sehen kann, was ich bei dieser Auswahl habe. Hier sind einige Werkzeuge. Sie können hier sehen, die obere ist im Grunde Quick Selection Tool, es ist das gleiche, das wir zuvor verwendet. Dann haben wir diese Verfeinerung Edge. Es ist der gleiche Verfeinerungskantenpinsel, den wir zuvor verwendet haben. Dann ist dies das Pinselwerkzeug. Was es also tut, ist, dass Sie sehen können, wenn ich hier drüber klicke, es ändert sich im Grunde meine Ebenenmaske. Ich habe diesen Bereich bereits maskiert, aber wenn ich einen Bereich zeigen möchte, kann ich diesen immer nutzen. So wie das. Sie können hier sehen, hier haben wir etwas übrig und ich werde dieses Pinselwerkzeug verwenden , um die Kleidung wieder so zu bekommen. Wenn Sie einen Teil entfernen möchten, drücken Sie Alt- oder Wahltaste und es wird diesen Teil aus Ihrer Auswahl entfernen. Sie können hier sehen, wenn ich diesen und auch diesen Bereich entfernen möchte, und auch diesen Bereich, Ich drücke jetzt, Alt-Taste zusammen mit diesem Pinselwerkzeug. Sie können hier sehen, hier ist die Größe und Härte der Bürste, immer stellen Sie sicher, dass es zu 100 Prozent hart ist. Die zweite Sache ist jetzt gehen wir zu diesem Pinsel verfeinern Kante Pinsel Werkzeug. Außerdem haben wir das Lasso-Werkzeug hier drüben. Dies ist im Grunde Quick Selection und Lasso Werkzeug. Dies sind die gleichen Werkzeuge, die Photoshop bereits haben, aber sie sind in dieser Auswählen- und Maskenansicht enthalten. Wir müssen nicht zurückwechseln. Dies ist unser Handwerkzeug und das ist Lupe Zoomwerkzeug. Sie können Steuerelement oder Befehlsplus verwenden, um zu vergrößern und zu verkleinern. Befehl Plus und Minus oder Steuerung plus Minus. Jetzt gehen wir zu diesem Werkzeug „Kante verfeinern“, das unser Hauptwerkzeug ist. Ich werde die Größe des Pinsels so vergrößern. Jetzt werde ich um die Ränder dieses Kindes bürsten. Stellen Sie sicher, dass Sie sehen können, wie ich gerade putze. Das Pluszeichen ist fast am Rande dieses Kindes. Hier bürste ich in den Haaren. Sie können sehen, wie es magisch alle Haare und den Hintergrund hinter diesen dünnen Haaren entfernt . Ich denke, ich liebe dieses neue Werkzeug und neue Technik fast wirklich. Sie können auf magische Weise sehen, es hat den schwierigsten Teil entfernt, der Haar ist, und der Hintergrund hinter diesen Haaren. Es hat sie alle in einem Augenblick entfernt. Nun, wenn Sie den Kontrast erhöhen wollen, können Sie hier so erhöhen. Sie können auch hier sehen, jetzt werde ich zum Pinselwerkzeug wechseln. Ich werde hier drüben putzen. Ich werde ein bisschen hineinzoomen. Ich kann ein bisschen roten Hintergrund in dieser Jacke sehen, also werde ich hier drüben so putzen. Auch in diesem Bereich. Ich werde hier drüben putzen, nur um zwei Dinge hier zu reparieren. Wenn Sie sehen, dass etwas anderes ausläuft oder ein Problem hat, können Sie auch darauf bürsten. Sie können hier drüben sehen, ich putze gerade an den Rändern. Ich glaube, sie sind fast fixiert. Jetzt können Sie sehen, wie es mit diesem neuen Auswahl- und Maskenwerkzeug so einfach ist, den Hintergrund zu ersetzen oder den Hintergrund zu löschen. Stellen Sie sicher, dass Sie wissen, was all diese Werkzeuge auch, dies ist Quick Selection, dies ist Lasso Werkzeug. Dies sind im Grunde Werkzeuge für die Auswahl und dieses ist „Kante verfeinern“. Sie werden es immer an Ihren Rändern Ihres Bildes bewegen. Dies ist im Grunde das Pinselwerkzeug zum Ausblenden und Anzeigen Ihrer maskierten Bereiche, maskierten Bereiche oder hier jetzt. Lassen Sie mich mit Ebenenmaske auf eine neue Ebene ausgeben und drücken Sie „OK“. Jetzt können Sie sehen, hier ist es sehr klar und sauber Hintergrund. Ich habe alle leicht die Haare und den Hintergrund entfernt, sie leicht voneinander getrennt. Hier sind ein paar weitere Anwendungen. Sie können hier drüben sehen, ich habe dieses Mädchen aus dem Hintergrund extrahiert. Lassen Sie mich es Ihnen zeigen. Dies war der eigentliche Hintergrund. Ich benutze die gleiche Technik und extrahierte sie. Sie können hier drüben sehen, ich habe auch diesen gefälschten Schatten hier drüben produziert. Sie können auch dieses Mädchen sehen, das eigentliche Bild ist dieses. Was ich getan habe, ist, dass ich den Hintergrund entfernt und das Stadtbild im Hintergrund hinzugefügt habe. Nun, dieses Tool ist wirklich cool. Sie können die Bereiche einfach steuern und leicht entfernen. Eine Sache ist, dass, wenn Ihr Bildbereich sehr verschwommen ist, wie Sie hier sehen können, es einige Probleme hier drüben hat. Stellen Sie sicher, dass Ihr Bild ein bisschen scharf ist und Sie hier sehen können, alles ist gestochen, es gibt nichts viel verschwommen. Es kann leicht zu entfernen. Nun, wenn Sie diese gefälschte Schatten-Technik lernen wollen, ist es sehr einfach. Ich habe gerade einen Schatten, Schlagschatten mit Schicht hier hinzugefügt . Ich habe diesen Schatten hinzugefügt, Sie können hier sehen, Entfernung 20.111 Größe und multiplizieren 13. Es wird im Grunde einen Schatten, einen Schlagschatten hinzufügen. Ich werde das hier verstecken, damit du sehen kannst, wie es ist. So wie das. Lassen Sie uns die Entfernung und die Ausbreitung ein bisschen mehr bewegen. Nun, was ich tun werde, ist, während diese Ebene ausgewählt ist, ich gehe zu Ebene, und ich gehe zu Ebenenstilen. Ich gehe zu diesem Layer erstellen. Grundsätzlich war es Layer aus Ebenenstilen erstellen, aber ich weiß nicht, warum sie es Layer erstellen umbenannt haben. Sie können hier drüben sehen, dass „Okay“ drücken. Sie können sehen, dass dieser Schlagschatten von meiner Ebene getrennt ist. So trennen Sie den Schlagschatten. Jetzt gehe ich zu Befehl+D oder Strg+D meinen Schlagschatten. Ich werde mit der rechten Maustaste klicken und es verzerren. Ich werde es so bewegen. Jetzt ist mein Schatten hier drüben. Wenn Sie es weiter verzerren möchten, können Sie es nach Belieben verzerren. Sie können die Beine näher an das Thema, das Mädchen und auch diesen Bereich so bewegen . Sie können sehen, dass dies ein sehr perfekter gefälschter Schatten ist. Es war nur eine sehr praktische Technik. Ich dachte, ich sollte es mit euch teilen. Hier geht es um die Verwendung dieses neuen Auswahl- und Maskenwerkzeugs. Es ist wirklich schön und es ist wirklich schnell, sehr schwierige Hintergründe zu entfernen und schwere oder sehr schwierige Bilder von ihrem Hintergrund zu trennen. Wenn Sie Fragen haben, lassen Sie es mich wissen. Fahren wir mit der nächsten Lektion fort. 76. Was sind wireframes?: Heute werden wir über Wireframes sprechen, was unsere Wireframes und welche Rolle sie im UI-Design spielen. Jedes UI-Design beginnt mit einem Wireframe. Was ist Wireframe? Wireframe ist im Grunde der Grundriss Ihres digitalen Designs. Wenn Sie eine App oder eine Webseite oder eine Lernseite haben, müssen Sie zuerst ein Drahtmodell erstellen, also ist der erste Schritt ein Drahtmodell. Wireframe kann von Ihrem Client erstellt werden. Geben Sie ihnen einfach Stift und Papier und lassen Sie sie ihre Ideen auf dem Papier skizzieren. Sie können Photoshop auch zum Entwerfen von Drahtmodellen verwenden. Sie können auch viele andere Werkzeuge verwenden. Ich werde es Ihnen in wenigen Minuten zeigen. Lassen Sie mich Ihnen zunächst einige der Beispiele von Drahtmodellen zeigen. Sie können sehen, dies ist das Drahtmodell eines Spiels und es war ein Wettspiel. Ich habe es mit Photoshop entworfen. Sie können sehen, das ist, wie es aussieht. Es hat viele Bildschirme, aber das ist einer des Bildschirms. Dies ist ein weiterer Wireframe und ich entwarf es mit einer anderen Software, die XOR BR genannt wird. Es ist sehr kostspielig. Jedenfalls habe ich es entworfen, denke ich vor ein paar Jahren. Dies ist ein weiteres Beispiel für eine Warenkorb-Website. Dies ist ein weiteres Beispiel für einen mobilen App-Wireframe. Es wird mir von einem Klienten gegeben. So sieht es aus. Dies ist einer des Bildschirms. Dann ist dies eine andere, die mir auch von einem Klienten gegeben wurde. Ich denke, es wurde auch in Photoshop entworfen. Alles ist in Grau. Die meisten der Zeit sind diese Wireframes Graustufen, sie haben nur Schwarz und Grau und Weiß. Der Designer hat die volle Autorität am Ende und volle kreative Kraft, dass er jede Farbe hier verwenden kann. Wenn ich versuche, eine Farbe im Drahtmodell anzugeben, dann könnte der Designer denken, dass dies die Primärfarben sind und er es in seinen Entwürfen verwenden sollte. Dies ist einer der Wireframe, den ich vom Client bekommen habe. Dies ist ein weiterer Wireframe, den ich für meine eigene Website entworfen habe. Sie können hier drüben sehen, das sind die wenigen Abschnitte. Ich glaube, Sie haben meine Website gesehen. Es ist ein bisschen anders jetzt, aber es ist das erste Drahtmodell, das ich für meine Website gemacht habe, es ist in einer anderen Software namens Balsamiq Mockups entworfen. Hier geht es um Wireframes. Die Dinge, die Sie im Auge behalten müssen, sind nicht zu viele Farben zu verwenden, nur betonen, was so ist, dass dies eine Schaltfläche ist. Ich habe hier drüben Grün benutzt. Sie können auch auf der Seite kommentieren, wie ich in kommentiert habe, lassen Sie mich Ihnen zeigen. Dies ist der einzige Wireframe, den ich für einen Kunden gemacht habe. Sie können hier sehen, ich habe kommentiert, warum ich diese Technik verwende oder warum dieses UI-Element hier ist. Sie können hier auch diese Abschnitte sehen, alle Abschnitte, sie haben Kommentare wie diese. Sie können auch Kommentare verwenden, sogar in Photoshop und zeichnen Sie hier eine Box mit rotem Hintergrund oder gelbem Hintergrund und setzen Sie etwas Quitte da drüben. Hier geht es um Wireframes. In der nächsten Lektion werden wir einige der Werkzeuge überprüfen, die wir für Drahtmodelle verwenden. Was sind die Online-Tools und was sind die anderen Software und Apps? Fahren wir mit der nächsten Lektion fort. 77. Tools zur Erstellung von Drahtrahmen: Nun werden wir über einige der Werkzeuge sprechen, die wir für das Wireframing verwenden. Sie wissen bereits, was Wireframes sind. Gehen wir auf die Webseite, wo ich alle Links habe. Dies ist eines der Werkzeuge, die ich verwendet habe, Axure RP und es ist ein bisschen wie ein sehr fortschrittliches Werkzeug. Es erstellt auch Prototypen. Prototypen sind funktionierende Drahtmodelle, bei denen Sie auf die Links klicken und zur nächsten Seite gelangen. Es kann auch Ihre Prototypen in HTML exportieren, also ist dies gut für große Projekte wie E-Commerce ein Projekt oder etwas sehr Großes. So können Sie diesen verwenden. Es ist ein bisschen teuer. Ich denke, vielleicht 3, 400, ich erinnere mich nicht. Ich denke, es ist 495 pro Benutzer und Team hat 895. Ich denke, es ist gut für große Software-Unternehmen oder Firmen. Ich wollte Ihnen zeigen, dass Sie wissen, dass das einer von ihnen Axure RP 8 ist. Dann haben wir ein weiteres Tool, das unter verschiedenen UI-Designern sehr berühmt ist. Ich habe diesen wirklich geliebt, Balsamiq Mockups. Es ist sehr einfach. Seine Wireframes sind sehr skizzenhaft, also haben Sie keine sehr spezifischen Ecken oder so etwas. Lassen Sie mich Ihnen einige Beispiele zeigen. Wo sind die Beispiele? Das ist eins. Sie können sehen, wie diese Website angelegt wurde und dieses Modell gebaut wurde. Ich mochte diese Software sehr, Balsamiq Mockups. Ich denke, es kostet ungefähr $90. Ich denke, es ist ein bisschen in der Reichweite. Aber wenn Sie bereits Photoshop haben, ist dies die beste Option. Sie können Photoshop verwenden, um Ihre Drahtmodelle zu erstellen, und dies ist das nächste Thema, das ich behandeln werde. Wenn Sie Photoshop haben, können Sie viele kostenlose Mock-up Kits herunterladen. Also gib hier drüben, „Free Mock-up Kits“, und du wirst erstaunt sein, viele Wireframing-Kits zu finden. Sie können sehen, dies ist einer von ihnen Material Mockups und 15 E-Commerce-Bildschirme. Obwohl sie für mobile Bildschirme sind, denke ich, dass Sie diese Komponenten auch in Ihren Webseiten verwenden können. Das ist sehr nett. Sie können hier sehen, gibt es diese anderen Komponenten. Sie können sie auch in Ihrem Webseitendesign verwenden. Dies ist einer von ihnen, es ist in Photoshop, Sketch, und alles. Ein weiteres Wireframe-Kit, das ich wirklich liebe, ist von diesem Kerl Rafal Tomal, ich denke, Sie müssen auf seiner Website abonnieren, um dies herunterzuladen, aber es ist ein sehr guter Wireframe für Websites. Solche Boxen, viele große Elemente; Überschrift, Unterposition, Absätze, Listen. Es hat eine Menge Zeug. Sie können hier sehen, erhalten Sie freien Zugang. Sie müssen abonnieren, um es herunterzuladen. Ein weiteres Wireframe-Kit ist von diesem Pixeden, kostenlos von Website. Ich werde den Link hinzufügen, also mach dir keine Sorgen. Sie können sehen, dass es viele Elemente, Video-Steuerelemente, QuickInfos, Symbole , Kalender und viele UI-Elemente enthält. Das Online-Tool, das ich wirklich mag, ist dieses Moqups. Ich werde dieses Modell in der nächsten Lektion mit Ihnen teilen, weil es Ihre ultimative Webdesign-Herausforderung sein wird , damit Sie wissen, welche Fähigkeiten Sie in diesem Kurs erworben haben. Wenn Sie ein UI-Designer sind, ein Web-Designer, erhalten Sie einen Wireframe von Ihrem Kunden oder Ihrem Kunden, dass ich dieses Website-Design brauche. Wenn es sich um eine sehr gute Firma handelt, haben sie einige User Experience Recherche durchgeführt. Das Endprodukt jeder User Experience Forschung wird dieser Wireframe sein. Ultimative Webdesign-Herausforderung. Ich benutze dieses Moqups Tool, moqups.com. Erstellen Sie hier ein kostenloses Konto. Sie können sehen, dass Sie eine Menge von Schablonen hier haben, wie diese, Schaltfläche, Links , Kontrollkästchen, Einzellink, Beschriftung , Knoten und Avatare, Raster, Symbole. Das ist die, die ich hier drüben benutzt habe. Sie können dieses Symbol sehen. Wenn ich hier drüben klicke, können Sie sehen. Wenn ich einmal klicke, wird es ausgewählt und wenn ich zweimal klicke, zeigt es mir die Optionen an. Dies ist ein sehr gutes Werkzeug. Sie können einige der Optionen hier sehen, wie vorwärts bringen, nach vorne bringen, rückwärts bringen. Dies sind Layering-Optionen. Dann haben wir diese Ausrichtungsoptionen. Sie können zwei Elemente auswählen und ausrichten. Dies ist eines der Elemente, die ich von hier aus verwendet habe. Sie können die Füllfarben hier ändern, wenn Sie möchten, vielleicht so. Dies ist ein sehr schönes Werkzeug. Der erste Schritt in allen UI-Designs in jedem Webdesign-Projekt, in jedem mobilen App-Projekt, müssen Sie zuerst herausfinden, was Sie entwerfen werden, also ist der erste Schritt Ihr Wireframe. Das ist ein Drahtmodell, den ich für euch entworfen habe. Ich werde den Link mit Ihnen teilen, und ich sollte dieses Herausforderungswort in der nächsten Lektion sagen, oder sollte ich es jetzt sagen? Ok. Hier ist die ultimative Herausforderung für Sie. Sie müssen eine sehr schöne Website mit diesem Wireframe entwerfen. Ich werde Ihnen ein paar Tipps geben, wie Sie sich diesem Design nähern werden. Nummer 1 ist, wählen Sie zuerst ein Farbschema. Verwenden Sie ein beliebiges Logo oder setzen Sie einfach ein paar Texte hier drüben wie Logo. Beachten Sie, dass eine Farbe, die Sie für Links und diese Schaltflächen verwenden werden. Vielleicht müssen Sie hier einige Farben ändern, wie die Größen von verschiedenen Texten. Denken Sie daran, dass, wenn wir diesen Abschnitt haben, dies der erste Abschnitt ist, der Abstand zwischen zwei Abschnitten wie diesem und diesem einen sollte gut sein und sollte gleich sein. Wenn Sie Abschnitt 1, Abschnitt 2, Abschnitt 3 haben , ist dieser Abschnitt 3, sollte der Abstand zwischen all diesen Abschnitten gleich sein. obere Rand und der untere Rand sollten also gleich sein. Eine andere Sache ist, wenn Sie ein Mock-up von einem Kunden bekommen. Wireframe oder Mock-up im Grunde ist es ein Lo-Fi-Mock-up. Wir nennen es Low-Fidelity-Mock-up. Low-Fidelity-Mock-up ist, wenn Sie einen Wireframe von Ihrem Client wie diesen erhalten, was Sie tun werden, um den ersten Schritt ist, dass Sie den Inhalt haben sollten. Wenn sie den Inhalt nicht haben, wird es ein bisschen Schmerz sein. Die zweite Sache ist, dass Sie nicht immer alles folgen, was Sie im Mock-up sehen. Sie sind ein Designer, Sie können auf andere Weise denken, wie Sie das hier rüber bewegen müssen. Sogar das Mock-up sagt, dass es hier sein sollte. Sie können sie hier oder vielleicht auf der rechten Seite benutzen und dann diesen Anruf hierher verschieben. Sie können diese auch verschieben, wenn Sie das Video auf der rechten Seite wollen, können Sie es verwenden. Oder selbst wenn Sie das Video in der Mitte wollen, können Sie es platzieren. Dieser Wireframe ist im Grunde nicht die ultimative Designrichtlinie für Sie, sondern zeigt Ihnen nur, dass diese Elemente in diesem Abschnitt vorhanden sein sollten. Die sollten hier drüben sein. Diese Dienste sollten so sein, und wir brauchen eine Schaltfläche unter ihnen. Unsere jüngsten Projekte werden diese drei Kategorien umfassen. Wenn wir hier klicken oder auf dieses klicken, wird es zum nächsten und dritten gehen. Lassen Sie uns die Farbe des Textes ändern. Es wird nur grau und das wird weiß sein. Es ist das gleiche Muster, das ich in dieser oberen Navigationsleiste verwendet habe. Dies ist im Grunde eine Tab-Leiste. also wechseln, werden hier neue Registerkarten erstellt oder diese Bilder neu angeordnet. Stellen Sie auch sicher, dass, wenn Sie einige Bilder in Ihrem Profil oder Ihrem Portfolio oder diesem Design verwenden , erwähnt ihren Namen und Titel hier drüben, damit der Benutzer wissen kann, worum es geht. Jetzt unten können Sie sehen, dass Sie frei sind sie zu bewegen oder einen beliebigen Stil zu verwenden, den Sie mögen. So verwenden wir Wireframes in verschiedenen Situationen. Wenn Sie eine sehr große Website hatten oder einen interaktiven Prototyp benötigen, können Sie diesen verwenden. Außerdem können Sie Webseiten-Wireframe-Schablonen verwenden, habe ich euch gezeigt. Dies ist die Software Balsamiq Mockups. Wenn Sie viele Mock-ups oder Wireframes entwerfen, sollten Sie dieses kaufen. Abgesehen davon denke ich, dass Sie gut mit diesen kostenlosen Optionen sind. Sie können dies nicht exportieren. Außerdem können Sie in diesen Einstellungen sehen, wir haben 960 Raster. Ich habe dir das Gitter gezeigt. Wenn Sie ein Programmierer oder Designer sind, können Sie Ihr Drahtmodell bereits von Anfang an mithilfe eines Rasters entwerfen. Sie können zu diesem oder keinem Raster wechseln. Sie können auch sehen, die Breite ist 960, Sie können die Höhe auch erhöhen. Dies ist der Projekttitel. Erforschen Sie weiter. So machen Sie Dinge rückgängig und wiederholen Sie sie. Dies sind alle Elemente, Schablonen, die Sie verwenden können. Sie können hier auch Bilder importieren und sie hierher ziehen. Diese anderen Seiten, wenn Sie mehrere Seiten derselben Website wollen, vielleicht Lernseite, kontaktieren Sie uns Seite, Blog-Seite. Sie können hier eine neue Seite hinzufügen und hier weiter gestalten. Sie können hier auch Elemente gruppieren, wenn Sie möchten. Dies ist eine Gruppensteuerung G oder sperren ihre Position. Erforschen Sie dieses Tool weiter. Ich denke, du wirst dieses Draht-Framing-Ding wirklich lieben. Es ist immer der erste Schritt in allen UI-Designs. Denken Sie daran, dass dies die Herausforderung ist; Ich möchte, dass Sie diese Website für mich entwerfen, damit ich beurteilen kann, was Sie in meinem Kurs gelernt haben. Teilen Sie mit mir einen Link in den Fragen oder Nachricht gesondert gepostet. Ich werde versuchen, Ihnen Tipps zu geben, wie Sie zu verbessern, wenn Sie mir das Design zeigen, sonst, Ich weiß nicht, wie Sie verbessern können. Zeigen Sie Ihre Arbeit immer Ihren Ausbildern oder Lehrern oder Ihren Kollegen, dass Sie denken, dass dies großartig aussieht? Oder muss ich etwas verbessern? Lasst uns anfangen. Versuchen Sie, dieses Drahtmodell zu entwerfen. Ich brauche eine sehr gute Website. Sie sind offen, um freie Bilder oder Symbole aus jeder Quelle, jeder freien Quelle zu verwenden. Mal sehen, was du dir einfallen kannst. Fahren wir mit der nächsten Lektion fort. 78. Übung → die →die Aufnahme der →Redesign Teil 1 Teil: Heute bekam ich eine wirklich interessante Frage von einem meiner Schüler, und was er fragte, ist, wie man diese leuchtenden Teile auf diesen Knöpfen kreiert und wie man diese leuchtenden Lichter hier rüber bekommt. Es gibt viele Techniken, um dies zu tun. Im Grunde ist es ein Dribble Short. Lassen Sie mich Ihnen zeigen, was er mir mitgeteilt hat. Eigentlich hat er mir dieses Dokument mitgeteilt. Dies ist das Design von unserem Dribbler, und es ist eine sehr schöne gedrückte und erhöhte Tasten Zustände. Von gestern Abend habe ich versucht, diesen Effekt zu erstellen und zu replizieren, und ich habe diese beiden Dateien erstellt, die Sie hier sehen können. Dies ist eine leichte Version und diese ist dunkle Version. Ich werde beide PSTs mit euch teilen, also vergiss nicht, den Download herunterzuladen. Jetzt in dieser Serie werde ich nur diese dunkle Version erstellen. Das wird eine Herausforderung für Sie sein. Sie müssen so etwas erstellen. Also werde ich Gerechtigkeit dunkle schaffen. Lasst uns anfangen. Nun, während dieser Vorlesung, mein ultimatives Ziel ist nicht, diesen fantastischen Effekt zu erzeugen, sondern um Sie zu verstehen, wie der Designer diesen Effekt erzielen und wie er verschiedene Effekte verwendet, um diese ganze fantastische beste und erhöhte Zustände zu erhalten. Nun zuerst werde ich eine Datei mit dem 1440 x 900 Pixel öffnen. Nun, der erste Schritt wird Ihre einfarbige Farbe sein. Wir brauchen eine Hintergrundfarbe, die unsere 3-2, 3-2, 3-2, 3-2 sein wird, was im Grunde Helligkeit ist 20 Prozent, und Null Sättigung, Null Farbton. Es ist eine dunkelgraue Farbe. Dann werden wir ein abgerundetes Rechteck erstellen. Wählen Sie ein abgerundetes Rechteck, klicken Sie einmal hier, und wir werden es erstellen, um 620 Pixel Breite und 100 Pixel Höhe, und Radius könnte acht oder 10 oder fünf sein, es liegt an Ihnen. Also werde ich es jetzt so einstellen. Jetzt wird die Farbe für diesen 18 sein, so etwas. Oder vielleicht 16. Es liegt an dir. Ich denke, 18 ist gut. Wann immer Sie versuchen, etwas zu replizieren, müssen Sie sehr genau beobachten, was sich in diesem Design befindet. Lassen Sie uns hineinzoomen und wir werden dieses Design sezieren. Zuerst können Sie sehen, es gibt eine äußere Schicht, Sie können sehen, dies ist ein Container, der wie die beste Wirkung hier aussieht. Nun, was wir hier drin haben, ist ein dunkler bis weißer Farbverlauf hier drüben im Hintergrund. Sie können hier drüben sehen, dann gibt es eine weitere Ebene an der Spitze. Sie können hier drüben sehen, dies ist im Grunde die Ebene in diesem Hintergrundcontainer. Es gibt also im Grunde zwei Container, und oben auf diesen beiden Containern sind dies die drei Knöpfe. Im Grunde haben wir fünf Schichten übereinander. Lassen Sie mich noch einen erstellen. Wir werden ein weiteres in diesem Raum schaffen, und dieses Mal wird es 604 Pixel breit sein und es wird 84 Pixel hoch sein. Stellen Sie sicher, dass Sie acht Pixel oder was auch immer verwenden können. Das wird darin sein und seine Farbe wird etwas dunkler sein. Also werde ich hier 14 drücken, und wir werden diese beiden ineinander ausrichten. Jetzt, um den besten Effekt zu erzielen, diese äußere Schicht, der Hintergrund äußere VG werde ich es nennen, und es wird innere VG für inneren Hintergrund sein. Jetzt im äußeren Hintergrund werden wir Gradientenüberlagerung verwenden. Dies ist der Farbverlauf, den ich verwenden werde, und es ist im Grunde von dunkler, schwarzer Farbe, die diese schwarze Farbe zu diesem Weiß sein wird. Es ist umgekehrt und stellen Sie sicher, dass es auf multiplizieren ist, oder Sie können es auf normal setzen, denke ich. Was wir tun, ist, dass wir diesen Schwarz-Weiß-Kurven-Effekt mit diesem erstellen. Vielleicht können wir es eher so anpassen. So können Sie hier sehen, wir haben weiße Bereiche und hier haben wir dunkle Bereiche. Wir haben unsere beiden Baselayer erstellt. Jetzt werden wir unsere Schaltflächen erstellen. Klicken Sie also erneut, und wir brauchen unsere Schaltfläche, um 200 Pixel breit mit einer Höhe von 80 Pixel zu sein . Jetzt ist das unser Hauptknopf. Das ist unser Knopf, btn, und lass es uns hier oben drüber bewegen. Sie richten es einfach so aus. Sie können sehen, wie ich all diese drei Ebenen erstellt habe. Diese ist grundsätzlich zwei Pixel breit von jeder Seite. Das sind die Knöpfe. Wir verwenden keinen Stricheffekt, um dies zu decken. Dies ist unsere Basisschicht, die diese Tasten bedeckt, um diesen abgerundeten Effekt rund um diese Knöpfe zu erzeugen. Jetzt werden wir einige Höhen und einige weitere Effekte auf diese Schaltfläche zu bekommen. Nun, der Trick ist, dass wir das mit vielen Fakten erreichen können. Wir können diese innere Abschrägung benutzen, und wir können eine 100 Prozent Tiefe oder vielleicht weniger als das, vielleicht 20 Prozent, und wir können die Größe reduzieren, und vielleicht das, so. Wir können diese Größe hier reduzieren, und auch wir können diese Größe erhöhen. Es gibt eine Technik, die diese bivalente Prägung beinhaltet. Das Gleiche können wir mit diesem Gradienten Overlay erreichen. Jetzt in der Gradientenüberlagerung werde ich dies verwenden, was unser Mischmodus ist. Normal und Deckkraft beträgt 15 Prozent. Was ich hier mache, ist, dass wir drei Farbenstopps verwenden. So können Sie sehen, wie dieser gekrümmte Effekt hier rüber gegangen ist, was diese beiden Farben sind. Wenn Sie also auf einige Farben klicken, können Sie sehen, dass dies im Grunde der Stopp ist, der steuert, wie breit dies wird sich erstrecken. Machen Sie es nah an der anderen Farbe und Sie werden diese Beule in Ihren Knöpfen oder was auch immer Sie entwerfen sehen . Wenn man es weit von hier entfernt macht, ist es immer weniger sichtbar. So erstellen wir diesen erhöhten oder Druckknopf-Effekt mithilfe von Farbverläufen. Das ist ein sehr kniffliger Teil. Wenn du es lernen kannst, denke ich, es wird dir viel Nutzen bringen. Ich werde diesen Effekt auf 23 oder 20 Prozent reduzieren. So wie das. Jetzt können Sie sehen, wie dieser Effekt gegangen ist. Sie können Abschrägung und Prägung verwenden. Du kannst es vielleicht so reduzieren. Ich habe hier 40 Grad benutzt und Sie können die Tiefe auf 15 oder vielleicht so etwas reduzieren, oder Sie können diese Gradientenüberlagerung verwenden. Es gibt viele Möglichkeiten, diese Effekte zu erzeugen. Jetzt mit Gradientenüberlagerung, werde ich einen inneren Schatten geben, weil Sie hier drüben sehen können, haben wir kein erhöhtes Licht hier drüben. Das ist unser innerer Schatten und ich werde hier für inneren Schatten weißliche Farbe verwenden. Es sollte oben sein, also wird der Abstand zwei oder eins sein. Wir werden diese Größe reduzieren. Wir werden es nicht multiplizieren, also werden wir normal verwenden. Wir werden die Deckkraft reduzieren, um den Effekt so zu erzielen. Dies ist ein sehr minimaler Effekt. Sie können die Größe erhöhen, wenn Sie möchten. Es liegt an dir, was auch immer du magst. Sie können auch die Größe und Weichheit reduzieren. Wir können die Weichheit so ändern. Vielleicht drei sind gut. Sie können sehen, wir haben einen erhöhten Knopf hier drüben. Vielleicht können wir etwas Schlagschatten hinzufügen. Wir können einige Schlagschatten hinzufügen, 90-Grad, multiplizieren Abstand sollte zwei sein und Größe sollte vier, fünf, oder vielleicht acht ist gut. Mal sehen, wie dieser Schatten von hier kommt. Lassen Sie uns die Entfernung und auch das erhöhen. Ich werde 20 hier drüben benutzen. Sieht gut aus. Wir haben etwas Schatten. Wenn Sie mehrere Schatten hinzufügen möchten, liegt es an Ihnen. Sie können hier mehrere Schatten hinzufügen. Vielleicht können wir etwas hellgrauen Schatten hinzufügen und erweitern oder mehr. Vielleicht so. Wir können es so einstellen, dass es multipliziert wird, um mehrere Schatten zu haben und es wird kühler und besser aussehen. Wir haben diesen Knopf. Wir können die Farbe hier drüben verwenden, vielleicht so. Gradient Overlay, vielleicht können wir multiplizieren. Das wird großartig, sieht gut aus und vielleicht können wir hier den Multiplikatoreffekt erhöhen. Wir werden hier etwas Text hinzufügen. Fügen wir einen Text hinzu, einen. Ich werde einen benutzen. Lassen Sie es uns weiß oder vielleicht grauweiß so färben. Vielleicht bewegen Sie es in der Mitte so. Jetzt haben wir den normalen erhöhten Effekt fast abgeschlossen. Jetzt kommen wir zu dem Effekt, wo wir hier einen Glanz brauchen. Es gibt viele Möglichkeiten, dieses Glühen zu erzeugen, aber ich werde eine zerstörungsfreie Methode erstellen. Duplizieren Sie diese Schaltfläche, Schaltfläche Layer. Duplizieren Sie es, Control J. Was ich tun werde, ist, dass ich alle Effekte entfernen werde. Dann werden wir das Feld entfernen, damit wir seine Farbe nicht brauchen. Wir brauchen nicht die mittlere Farbe. Wir werden zwei Farben, zwei Methoden oder zwei Ebenenstile mischen . Der obere, der obere Knopf, ich werde einen Schlaganfall geben. Ich werde uns Farbstrich dieser gräulichen Farbe CACA geben, zwei Pixel breit. Wir haben diesen Effekt. Grundsätzlich unsere Base-Taste und oben haben wir nur den Strich mit einem leeren Knopf. Es ist im Grunde ein leerer Knopf mit nur einem Schlag. Jetzt ist der nächste Schritt mit der rechten Maustaste und wir werden es über Smart Object in Smart Object konvertieren , weil wir einige Teile davon entfernen müssen. Nach der Umwandlung in dieses Smart Object, werden wir unser Maskierungswerkzeug verwenden. Erstellen Sie eine Maske über dieser Ebene und rufen Sie dieses Pinselwerkzeug ab. Drücken Sie „B“ auf Ihrer Tastatur und „Rechtsklick“ und stellen Sie sicher, dass Sie diesen Tipp haben, diese verschwommene Spitze. Verwenden Sie keine harte Bürste. Legen Sie die Deckkraft auf 50 oder 60 Prozent fest, und beginnen Sie, diese Bereiche zu entfernen. Wir werden diesen Bereich entfernen. Sie können sehen, wie wir diesen Effekt erzeugen werden. Grundsätzlich werden wir einige der Portionen so ausbürsten. Für dieses Licht hier drüben, bürsten Sie in diese Richtung. Geben Sie so einige Striche des Pinsels. Sehr leichte, sanfte Striche. Sie können sehen, dass wir dieses Licht hier haben. Ein sehr schönes Licht. Sie können immer zurückgehen oder Sie können mit weißer Farbe malen , wenn Sie hier mehr Licht bekommen wollen. Dies ist sehr cool, sehr einfach und zerstörungsfrei, um dieses Licht zu erzeugen. Jetzt haben wir das Licht erschaffen. Sie können es mit den Pfeiltasten anpassen, wenn Sie möchten, dass es unten, vielleicht ein bisschen unten oder oben, es liegt an Ihnen. Ich werde es hier verschieben und ich werde etwas weniger Deckkraft verwenden , wie 50 Prozent oder vielleicht 75 Prozent. Dieses Licht sieht gut aus und das ist sehr schöne Wirkung haben wir hier drüben, und wenn Sie etwas mehr Schatten oder mehr Tiefe hinzufügen möchten, können wir diese Abschrägung und Prägung Farbeffekt verwenden. Vielleicht können wir hier drüben multiplizieren, diese Dunkelheit hier erhöhen und vielleicht diesen weißen Bereich oder die Deckkraft reduzieren. Es sieht toll aus, sehr schön erhöhten Knopf. Diese Schaltfläche und die dritte, sie sind die gleichen. Ich werde sie in eine Schicht bringen. Das ist unsere Layer-Gruppe, das ist im Grunde unser Licht, und das ist eine Taste. Ich gehe zu Control J und ich werde es am Ende hierher bringen. Wir haben zwei Schaltflächen abgeschlossen. Einer ist der erste Knopf und dieser letzte Knopf ist drei. In der nächsten Lektion werden wir diesen gedrückten Button erstellen. Die Schaltfläche Einfügen, die gedrückt wird und es leuchtet Effekte. Sonst wird dieser Vortrag zu lang sein. Fahren wir mit der nächsten Lektion fort. 79. Übung → die →die Einstellung des Dribbble Teil 2 Teil 2: Jetzt werden wir den leuchtenden Effekt und den besten Button in dieser Lektion erstellen . Lasst uns anfangen. Was wir tun werden, ist, dass wir diesen gleichen Knopf kopieren und wir werden ihn zwischen diesen Schaltflächen verschieben. Es ist in diesen Tasten und was wir tun werden, ist zuerst, wir werden dieses Leuchten entfernen, hier oben. Wir brauchen das Glühen nicht. Dann wird der nächste Schritt unser Gradienten sein. Wir müssen den Farbverlauf umkehren, also wird er im Grunde gedrückt. Wir werden diesen Farbverlauf auch ein wenig ändern , weil er oben sehr scharf aussieht. Vielleicht können wir es so bewegen oder vielleicht so. Es sollte dunkler sein, weil es gedrückt wird. Dann werden wir diesen inneren Schatten entfernen und ihn in einen dunklen inneren Schatten verwandeln . So wie das. Oder Sie können es auch völlig entfernen, oder vielleicht verschieben wir den Abstand auf Null und verwenden dies zu vier, und wir werden die Größe auf 100 erhöhen. Grundsätzlich geben wir überall einen dunklen Schatten um diesen Knopf herum. Ich denke, wir haben einige Raumprobleme, also lasst uns sie zuerst beheben. Es ist unser zweiter Knopf. Verschieben wir den dritten Knopf ein bisschen hierher, vielleicht noch ein Pixel. Dann auch das hier, lassen Sie es hier rüber bringen, so. Wir werden den Hintergrund und die Dinge nach einiger Zeit anpassen. Im Moment sind wir mehr besorgt über diesen gedrückten Knopf hier drüben. Vielleicht können wir diesen Abschrägeeffekt entfernen, und wir werden ihn auch bewegen. Lassen Sie uns seinen Text in zwei ändern. Jetzt können Sie sehen, dass es schon ein bisschen gedrückt aussieht. Jetzt muss es eine Sache geben, die wir ändern müssen und wir werden einen weiteren inneren Schatten hinzufügen. Dieser innere Schatten, wo Sie etwas mehr Tiefe geben. Wir werden hier etwas Abstand bekommen, seine Größe sollte Null sein. Wir erschaffen zwei innere Schatten. Lassen Sie uns die Farbe etwas dunkler ändern, vielleicht so. So, und machen wir es ein bisschen weicher. Jetzt sind wir gut. Jetzt unten brauchen wir einen Schlagschatten. Es wird alle Schlagschatten entfernen, und wir brauchen einen weißen Schlagschatten hier drüben. Dies wird im Grunde gedrückt, daher sollte sein Licht hier reflektiert werden. Es wird dunkler von oben, diesem oberen Bereich, und es wird heller aus diesem Bereich sein. Wir werden einen Schlagschatten hinzufügen, der ein bisschen weißlicher Schlagschatten sein wird, und wir werden seine Größe reduzieren. Wir werden seinen Verschmelzungsmodus in Overlay ändern. Hier siehst du ein bisschen Schatten. Lassen Sie uns die Größe auf 12 reduzieren, und die Entfernung sollte acht Pixel betragen, denke ich, ist gut. Wir können den Effekt erhöhen, indem Sie diesen Schieberegler nach oben und unten bewegen. Es ist nach Ihren Wünschen, was auch immer Licht Sie wollen hier drüben. Ich glaube, ich mag es, bei 75 Prozent zu sein, es ist gut. Vielleicht muss ich den inneren Schatten etwas mehr ändern. Im Moment sieht es für mich etwas langweilig aus. Vielleicht brauche ich mehr inneren Schatten , der so sein wird. Ich werde hier noch etwas dunkler Schatten geben, und vielleicht kann ich die Größe vergrößern. Lass es uns ein bisschen nach oben bewegen. Es ist sehr schön gedrückter Effekt. Wenn Sie möchten, können Sie auch diesen oberen dunklen Bereich hier drüben reduzieren. Dies sind feine Anpassungen, Sie können sie die ganze Nacht tun. Ich werde diesen Button jetzt schnell für Sie erstellen. Lassen Sie uns die Farbe zu diesem Blau ändern, und dann werden wir es Outer Glow Effekt geben. Äußerer Glow-Effekt, stellen Sie sicher, dass die Farbe, die Sie verwenden, sehr scharf ist. Sie können hier sehen, Sättigung ist 100 Prozent, Helligkeit ist ein 100 Prozent. Stellen Sie sicher, dass diese beiden 100 Prozent sind und verwenden Sie eine beliebige Farbe, die Sie mögen. Es wird wirklich glänzen und diese Werte anpassen. Das ist im Grunde verbreitet. Ich denke, zwei oder drei Prozent Spread ist gut. Dann haben wir die Größe, 10 Pixelgröße. Äußeres Glow ist so. So werden wir verwenden, stellen Sie auch sicher, dass es ein bisschen undurchsichtig und ein bisschen transparent ist. Es wird in der Mitte sein. Auf diese Weise werden wir diesen Glüheffekt geben. Jetzt kommen zu den anderen Glüheffekten, hier und hier drüben. Das sind sehr alte Techniken, aber ich zeige dir hier drüben. Es gibt viele Möglichkeiten, diese leuchtenden Effekte zu erzeugen. Wir werden diesen Bereich hier auswählen, und wir können Pinsel verwenden. Dies ist die älteste Technik, leichte Bürste. Nun, was wir tun werden, ist, dass wir unser Pinselwerkzeug auswählen und seine Größe ein wenig erhöhen. Wählen Sie die Farbe aus, mit der wir gerne bürsten möchten, wie diese. Stellen Sie sicher, dass es ein bisschen scharfe Farbe ist. Halten Sie Ihren Pinsel wieder, und wir werden Pinsel so verwenden. Sie können hier sehen, dass es uns ein glühendes Licht gibt und wir werden Overlay verwenden, oder vielleicht können wir hellten so verwenden. Nun, was wir tun werden, ist, dass wir den Rest des Lichts entfernen. Wir brauchen es nur, um hier drüben in diesem Bereich zu sein. Wir werden Control klicken oder Befehl klicken Sie auf diese Schaltfläche, und wir müssen alles von dieser Schaltfläche entfernen. Halten Sie Ihren Radiergummi, oder wählen Sie diesen Lichtpinsel aus und drücken Sie „Löschen“. Was ist los? Vielleicht muss ich hier den Radiergummi benutzen. Hoppla. Jetzt habe ich meinen Radiergummi. Lassen Sie uns das so entfernen und drücken Sie M und wir haben diese Arbeit hier getan. Jetzt werden wir diesen Bereich und Kontrolle Shift I oder Befehl Shift i wählen , um die Auswahl zu invertieren, und dann wieder werden wir unser Radiergummi Werkzeug greifen und wir werden dieses zusätzliche Licht hier löschen. Drücken Sie M oder die Steuerungstaste oder den Befehl D, um die Auswahl aufzuheben. Sie können hier sehen, dass wir ein sehr scharfes Licht haben. Wenn Sie das Licht reduzieren wollen, können Sie die Deckkraft verwenden oder vielleicht wieder, Sie können diese Maskierung verwenden und wir können wieder die Bereiche putzen, die wir hier nicht brauchen. Das ist das ganze Spiel, um unsere Effekte hier zu verstecken und zu entfernen. Sie können sehen, wie wir das leicht so machen können, vielleicht können wir den Effekt hier so reduzieren, und wir können es steuern JS multiplizieren, um den Effekt zu verstärken. Wenn Sie den Effekt reduzieren möchten, können Sie so etwas verwenden. Dieselbe Technik wird hier unten verwendet werden, oder die zweite Technik, die ich Ihnen zeigen werde, ist diese. Wir werden hier einen abgerundeten Balken verwenden, vielleicht ein paar Pixel breit. Control D stellen Sie sicher, dass es in der Höhe ist, wird es 2-4 Pixel sein, machen es nicht zu viel groß, so dass. Wir haben diese Linie Bar hier drüben und wir werden eine wirklich schöne Technik verwenden , die Unschärfe, Gaußsche Unschärfe sein wird. Davor werden wir dies in Smart Object so konvertieren, also werde ich die Unschärfe so verwenden. Sie können sehen, dass es zu viele Techniken gibt, um den gleichen Effekt zu erzeugen, also kann ich vielleicht eine andere Unschärfe verwenden, die Bewegungsunschärfe ist. Ich möchte, dass es in diese Richtung geht, damit ich so etwas verwenden kann. Sie können sehen, wie cool dieser Effekt sein wird. Es ist wie Licht, das von dieser Unterseite dieser Taste emittiert. Sie können das Licht einstellen, wo immer Sie es wollen, und Sie können Opazität wie 50 Prozent oder 20 Prozent oder 30 Prozent verwenden oder vielleicht denke ich, 450 Prozent waren gut, sonst sieht es sehr langweilig aus. Sie können Overlay-Effekt verwenden oder vielleicht können Sie Farbverbrennung verwenden , es liegt an Ihnen oder vielleicht normal. Ich denke, normal sieht gut aus und ich muss den Effekt auf 75 Prozent erhöhen , es sieht gut aus. Wenn Sie die Größe reduzieren möchten, können Sie dies auch transformieren und die Höhe verwenden und die Höhe auf drei Pixel reduzieren. Sie können jetzt sehen, es ist ein bisschen schlank und schlanker. die gleiche Weise werden wir den Glanz auf diesen beiden Seiten geben, also wenn Sie sich das hier ansehen, können Sie sehen , dass hier drüben Lichter auf diesem Gebiet und in diesem Bereich sind. Das ist die gleiche Art und Weise, wie wir das nutzen werden. Vielleicht können wir wieder das gleiche Rechteck verwenden oder vielleicht können wir es duplizieren, T kontrollieren und wir können es so drehen, seine Größe so reduzieren und wir zoomen hinein, benutzen die Griffe hier drüben, reduzieren seine Größe auf etwas wie diese vielleicht mehr. Jetzt müssen wir die Bewegungsunschärfrichtung ändern, also wird es in diese Richtung sein. Es sollte 90 so sein, also müssen wir vielleicht die Größe mehr reduzieren oder vielleicht können wir die Größe der Bewegungsunschärfe so reduzieren. Jetzt kannst du es hier rüber bewegen. Sie können sehen, wie die Folie gut aussieht. Wenn Sie die Teile ausblenden möchten, können Sie diese darin einschneiden oder Sie können die Maskierung erneut verwenden und so ausbürsten. Ich werde es sofort ausbürsten. Sie können sehen, wie dieser Effekt großartig und cool und sehr geeky aussieht. Ich dupliziere es und lege es auf die linke Seite. Nun, ich denke, unsere beste Wirkung ist fast erledigt. Vielleicht können wir es etwas mehr von dieser Gegend und auch von dieser Gegend verdunkeln . So erstellen Sie verschiedene Lichteffekte oder wachsende Effekte um die Tasten oder an den Rändern der Tasten, oder Sie können glühende Lichter mit Pinseln erstellen und die Teile dieser Pinsel ausblenden. Maskierung ist unsere Schlüsseltechnik und wir haben meistens die intelligenten Objekte verwendet. Sie müssen wissen, wie ich das alles erstellt habe, wir haben Farbverläufe verwendet, dann verwenden wir Abschrägung und Prägung, wir verwenden diese Lichter. Ich habe diese Lichter mit drei Techniken erschaffen. Eine war Pinsel, eine war mit Ebenen Strich-Effekt, und eine war nur durch die Verwendung einer intelligenten Objektebene mit, so ein Effekt war diese Bewegungsunschärfe. Ich vergesse eine Menge Dinge. So kreieren wir diesen coolen Effekt. Ihre Herausforderung ist, dass Sie mir so etwas geben werden. Nun, der Tipp ist, dass, wenn Sie versuchen, etwas zu erstellen oder zu replizieren, Sie müssen vergrößern und sehen alle Pixel und kleine Details hier drüben, wie Sie hier sehen können, gibt es einen Rand von Schwarz, eine Linie über Hier haben wir dann diesen inneren Schatten und oben haben wir Glühen. Dasselbe ist hier drüben, das Gleiche hat hier drüben getan. Der einzige Unterschied ist, dass sie hier weiche Schatten haben und die Farben ein bisschen heller und heller sind. Dies ist das Ende dieser großartigen Lektion, um diesen Dribble-Effekt zu erzeugen. Ich werde bald eine Menge neuer Vorträge erstellen, also bleiben Sie dran und wenn Sie Fragen haben, fragen Sie mich. Fahren wir mit der nächsten Lektion fort. 80. PSD in die Programmierung umsetzen: Viele von Ihnen fragen sich vielleicht, wie Sie eine Ebene konvertieren oder wie Sie ihre CSS-Eigenschaften kopieren , wenn Sie sie in ein HTML- oder ein Webseitenelement konvertieren möchten. Lassen Sie mich Ihnen einen ganz einfachen Trick zeigen. Es ist nur ein Photoshop und Standard-CSS-Kopierbefehl, den ich auf Pixelstrich auf diese Ebene angewendet habe, dieses abgerundete Rechteck und dann einige Schlagschatten. also einfach mit der rechten Maustaste auf diese Ebene und klicken Sie auf CSS kopieren. Ich habe hier drüben eine Beispieldatei erstellt, also lassen Sie es uns testen. Wir werden dies als Testklasse einfügen. Testen Sie also. Wenn Sie nicht aus einem Programmierhintergrund sind, keine Sorge, nur ich werde Ihnen zeigen, dass, wie wir diese CSS-Werte verwenden werden. Grundsätzlich sind dies die CSS-Werte. Die meiste Zeit brauchen wir diese Position absolut links oben Sache hier drüben nicht , auch diesen Z-Index. Ich werde das auskommentieren. Öffnen wir unsere Datei in einem Browser und sehen, okay, wo sind unsere Stile? Ok. Das Problem war diese Anzeigeeinstellung. Ich habe begonnen, Block anzuzeigen. Hier ist unser Block. Mal sehen, wie es aussehen wird, wenn ich absolut verwenden werde. Es bewegt sich aufgrund dieser HTML-Seite und in Bezug auf diese HTML-Seite. So werden wir unsere CSS und PST Dateien in CSS konvertieren. Also kopieren Sie das hier drüben so. Jetzt werde ich diesen Text hier drüben kopieren. Ich werde mit der rechten Maustaste CSS kopieren und ich werde die Stile in meine Überschrift 2-Stil einfügen , h2. Mach dir keine Sorgen, wenn du kein Coder bist, wenn dein Coder oder Entwickler HTML wollen, gib ihnen einfach diesen Code und das wird gut genug für sie sein. Also mach dir keine Sorgen, wenn du nicht viel von der Codierung weißt. Stellen Sie sicher, dass Sie diese Z-Indizes und diese absolute Positionierung von hier entfernen. Absolute Position links und oben, entfernen Sie sie immer, weil wir sie nicht brauchen. So werde ich es dir zeigen. Das ist unser Text : „Hallo, ich bin ein Text hier.“ Gleiche Schriftart, gleiche Farbe, alles. Im Grunde, was wir wirklich von unserem CSS brauchen, ist diese Schriftgröße, Schriftfamilie, Farbe, Zeilenhöhe und die Breite und Höhe, wir nicht für Schriftgrößen benötigen, also lassen Sie es entfernen. Was ist das? Ok. Dies ist ein Weg und der zweite Weg ist dieses Plugin, das CSS Hat genannt wird. Ich habe es gekauft. Es ist ein Premium-Plug-in. Es konvertiert Ihre Stile in CSS Less und Sass und Stylus. Beton hat ein Problem, meinen Schlagschatten hier drüben zu zeigen. Sie können sehen, ob ich zu dieser Ebene wechseln, es zeigt keinen Schlagschatten. Aber für den CSS-Teil zeigt es sehr gut wie Grenze zwei Pixel, einfarbig und Farbe, Hintergrundfarbe in hexadezimalen Werten. Wir können hier ihre Optionen festlegen. Dies ist ein sehr gutes Plug-in und wenn Sie ein Entwickler sind, denke ich, es ist ein Muss Plug-In. Jetzt gibt es ein weiteres Werkzeug, das sehr neu ist und es ist dieses Avocode. Ich benutze nur seine Testversion und ich denke, es ist sehr gute App. Aber das Problem ist, es ist ein bisschen teuer für meinen Geschmack. Sie können hier sehen, ob ich dieses Upgrade hier wähle. Jetzt hat es Online-Integration mit diesen Desktop-Apps. Wenn Sie eine Datei von hier wie Open Design hochladen und laden Sie Ihre PST-Datei hier über, wird es Ihnen Größen zeigen. Sie können hier Werkzeuge wie Messen auswählen und auf eine beliebige Ebene klicken. Es zeigt Ihnen die Größe dieser Box. Jetzt zeigt es, dass es eine Textdatei ist und das sind die Einstellungen. Es zeigt auch die Entfernungen von allen Ecken an. Es ist sehr genial. Zusammen mit diesem zeigt es den gesamten Code auf der rechten Seite, einige Exportoptionen. Dann habe ich die Schriftart, die ich verwende, die Oblik Bold hier drüben ist und wenn ich zu diesem Ebenenbedienfeld gehe, kann ich alle verwendeten Ebenen wie diese sehen. Das ist sehr großartig. Ich mag es wirklich, aber ich würde es wirklich kaufen, wenn sie einen Plan hätten, wie ich es für ein Jahr kaufen kann. Sie haben es für einen Monat, wie einen Monat Nutzung wie Garage, haben Sie unbegrenzte Designs Business-Unternehmen. Wenn Sie in einem sehr großen Team oder in einem Team arbeiten, denke ich, das ist eine sehr gute Option. Sie können voran gehen und kaufen diese Avocode und ich denke, es ist wirklich gut bei der Konvertierung Ihrer PST-Dateien in CSS. Aber jetzt werde ich mich an diesen Photoshop Standard Copy CSS Befehl halten. Das ist der Tipp, den ich euch heute wirklich zeigen wollte. Einer meiner Schüler stellte die Frage, etwas in CSS zu konvertieren, und das ist die Antwort. Dies ist ein Anforderungsvideo. Bleiben Sie dran und ich werde Sie sehr bald aktualisieren. Lassen Sie uns zu einigen neuen Vorträgen übergehen. 81. Bilder für Web exportieren: Lassen Sie uns über das Speichern von Bildern für ein Web- und UI-Design sprechen. Wenn Sie also versuchen, Ihr Bild für Webdesign zu exportieren oder zu speichern, oder Sie könnten in eine Menge Probleme, wie Sie möglicherweise verschiedene Farben beim Export sehen. Es gibt eine sehr einfache Problemumgehung. Lassen Sie mich Ihnen also den Prozess und die Dinge zeigen, die Sie beachten müssen , während Sie Ihre Bilder für Webdesign und UI-Design exportieren. Das ist ein Bild. Wenn Sie es exportieren möchten, verwenden Sie zunächst diesen Exportbefehl. Verwenden Sie nicht „Speichern unter“ oder „Als JPEG-Datei speichern“. Wir werden Export und Save For Web Legacy verwenden. Klicken Sie auf diese und die Verknüpfung ist Alt Control Shift und S. Stellen Sie nun in diesem Panel sicher, dass Sie PNG ausgewählt oder sogar JPEG ausgewählt haben. Beide sind gut. Sie können die Qualität der JPEG-Datei reduzieren, um die gewünschte Größe zu erhalten. Sie können hier sehr winzige Größe JPEG-Dateigröße sehen. Es sind 151,5 Kilobyte. Also, wenn Sie sehr kleines Bild wollen, können Sie es wie 70 Prozent reduzieren. Jetzt sind es 124.8 KB. Während Sie Websites entwerfen, sind Sie sehr besorgt über die Größe der Bilder, um Ihre Website zu beschleunigen und die Ladezeit zu reduzieren. Nun, so speichern wir ein JPEG-Bild. Sie können auch auf diese progressiven klicken. Was es tun wird, ist es wird Ihr Bild in verschiedenen Sitzungen zu laden. Wie zuerst wird es ein verschwommenes Bild sein, dann wird es langsam und langsam erscheinen, wenn Sie diese Option möchten. Stellen Sie sicher, dass auf Optimieren geklickt wird. Das sehr, sehr wichtig ist diese Konvertierung in sRGB. Stellen Sie immer sicher, dass dies nicht aktiviert ist. Die meiste Zeit Es wird eine Menge von Farbprofil-Probleme zu schaffen. Stellen Sie also sicher, dass es deaktiviert ist und die Vorschau auf die Monitorfarbe eingestellt ist. Sie können auch diesen Internet-Standard RGB verwenden. Kein Farbmanagement. Ich werde diesen einstellen und dann „Speichern“ drücken. Wenn Sie diese Bildgröße ändern möchten, können Sie es hier ändern, wie ich es 1024 wollte. Die Höhe wird also so sein, und die Breite wird dies sein. Diese Sperre bedeutet, dass sie relativ zueinander nivelliert sind. So wird es im Verhältnis zunehmen und abnehmen. Meistens müssen wir das Häkchen nicht deaktivieren. Also zum Beispiel, wenn ich versuche, Höhe 900 zu verwenden und Sie sehen können, dass es verzerrt ist. So verwenden wir dieses Panel. Die meiste Zeit für Web, empfehle ich diese PNG 8 oder PNG 24, transparentes Bild. Meistens verwenden wir PNG 24. Also, wenn Sie sehr niedrige Farbniveaus haben, ist es kein sehr buntes Bild, dann können Sie zu dieser PNG 8-Datei gehen. Sie können die Vorschau hier sehen. Lassen Sie uns das wieder proportional machen. Jetzt können Sie hier sehen, haben wir eine Farbtabelle. Es zeigt 256 Farben und ich denke, sie sind genug, um mein Bild und alles genau zu zeigen. Also verwende ich das, stelle sicher, dass diese Transparenz. Wenn Ihr Bild etwas Transparenz hat, überprüfen Sie dieses. Manchmal zeigt das PNG 8-Format möglicherweise keine Transparenz sehr schön an. Sie müssen also zu PNG 24 wechseln. Es ist die beste Option, um Transparenz zu zeigen. Also, wenn wir zu PNG 8 Datei gehen, sich keine Sorgen über diese Einstellungen, nur stellen Sie sicher, dass diese eine ewig ist und dies auf Diffusion eingestellt ist. Diffusion erzielt bessere Ergebnisse. Sie können die Farben reduzieren, wenn Sie die Dateigröße reduzieren möchten. Sie können hier sehen, es sind 31 K. Wenn ich versuche, die Farben auf 64 zu reduzieren, ist die Dateigröße 24 K, aber Sie können sehen, dass mein Bild ein wenig verzerrt ist. Lassen Sie mich zoomen. Klicken Sie hier. Sie können sehen, dass ich hier drüben ein verpixeltes Gesicht habe. Also, wenn ich auf 128 und dann zurück zu 256, zeigt es sehr schön. Das sind also verschiedene Einstellungen hier drüben. Sie können Ihre Voreinstellungen auch hier speichern. Wenn Sie einige Optionen ausgewählt haben, können Sie Einstellungen speichern und sie wie UI-Design, PNG 8, UI-Design, PNG 24 so etwas benennen PNG 8, UI-Design, . So geht es darum, Ihre Bilder zu speichern und sicherzustellen , dass ihre Farben die gleichen sind wie Sie sie entworfen haben. Die andere Sache ist, stellen Sie sicher, dass Ihre Farbe auf diesen RGB 8 eingestellt ist. In Ihrer Ansicht ist Ihr Proof-Setup so eingestellt, dass der RGB überwacht wird, und Ihre Prooffarben sind deaktiviert. Also das ist eine andere Sache, die Sie im Auge behalten müssen. Wenn Sie also Ihre Prooffarbe auf beispielsweise CMYK eingestellt haben , kann dies beim Exportieren viele Probleme verursachen. Außerdem sollte es nicht auf dem Internetstart und Standard-RGB oder sRGB sein. Stellen Sie sicher, dass es Monitor RGB ist, Proof-Farben deaktiviert ist, und verwenden Sie dann immer diesen Export Für Web speichern. Sie können diesen Schnellexport auch verwenden, aber stellen Sie sicher, dass Ihre Exporteinstellungen auf den Punkt gesetzt sind, an dem Sie die Option deaktiviert haben. Hier haben wir Export. Stellen Sie sicher, dass die Option PNG-Transparenz aktiviert ist und in sRGB konvertieren deaktiviert ist. Das sind also die Dinge, die ich wirklich brauchte, um euch zu sagen , Jungs und den meisten Webentwicklern und Webdesignern, wenn sie dazu neigen, ihre Bilder und Slices zu exportieren, müssen sie all diese Dinge im Hinterkopf behalten. Dies war ein Anfragevideo und einer meiner Schüler hatte Probleme in dieser Angelegenheit. Ich werde viele neue Tipps und Tricks hochladen. Also bleiben Sie dran und lassen Sie uns zu einigen fantastischen Design übergehen. 82. Tipps zur Verwendung von Raster in Photoshop: Ich werde Ihnen einen sehr einfachen Trick zeigen, wie Sie Ihre Gitter beim Entwerfen verwenden, also ist dies ein Tipp, lassen Sie mich Ihnen zeigen. Wenn Sie ein Gitter wie dieses haben, wie ich es Ihnen in meinen vorherigen Vorträgen gezeigt habe. Während Sie entwerfen, müssen Sie es manchmal ausblenden und wieder anzeigen, wenn Sie es in voller Deckkraft wie diese haben. Das sieht also wirklich schlecht aus, wenn Sie entwerfen. Was ich mache, ist, dass ich sie färbe oder sie überlage, wie diesen dunkelgrauen Farbton, und ich reduziere die Deckkraft auf 10 Prozent so. Dann versuche ich es hier zu sperren. Sie können diese kleine Sperre im Ebenenbedienfeld sehen. Ich sperre es, damit ich es nicht versehentlich bewegen kann. Während Sie entwerfen, können Sie leicht Ihre Raster zeigen und Dinge besser ausrichten und es sehr schön tun. Die andere Sache, die ich mache, ist, dass ich dieses Gitter an die Spitze schiebe. Verschieben Sie alles über alle Ebenen und halten Sie es dort und halten Sie es in sehr geringer Deckkraft wie fünf Prozent oder 10 Prozent und halten Sie es weiter entwerfen. Das ist also ein sehr gepflegter und einfacher Trick. So bleiben Sie dran für so mehr Tricks. Ich werde sie viel teilen. Gehen wir zu einigen neuen großartigen Vorträgen. 83. Schriftart → Neue Funktionen in Photoshop CC2017: Es gibt eine weitere neue Funktion in Photoshop CC 2015.5, und die im Grunde entspricht Schriftart. Wo wirst du es finden? Hier im Typ können Sie Match Font sehen. Es ist eine sehr neue und sehr coole Funktion. Sie können Schriftarten ganz einfach zuordnen. Dies ist ein Dribbble-Schuss von jemand anderem UI-Designer. Es ist Arbeit von jemand anderem, so dass ich sowieso nicht weiß, wer für diese Art von Arbeit verantwortlich ist. Nun, was ich tun werde, ist, dass ich einfach einen zufälligen Dribbble-Schuss von Dribbble eröffne. Ich werde Schriftarten zuordnen, wenn ich sehen kann, dass ich dieselben Schriftarten wie diese habe. Zuerst werde ich tun, ist ich werde einen Teil auswählen, stellen Sie sicher, dass es sehr klein ist, verwenden Sie nicht zu viel oder zu breit. Vielleicht können Sie zu diesen vier Buchstaben gehen und Schriftarten eingeben und übereinstimmen. Jetzt wird es nach einigen Schriftarten suchen. Auch wird es Schriftarten von Typekit synchronisieren. Wenn Sie Typekit abonniert haben, wird es einige Schriftarten von dort erhalten. Es hat 1, 2, 3, 4, 5, 6, 7, 8,9, 10 Schriftarten gefunden 4, 5, 6, 7, 8, , die fast ähnlich sind. Jetzt ist das beste Telefon, das ich hier drüben mag, dieses Tw Cen MT Regular. Wenn ich darauf klicke und „OK“ drücke, ist es jetzt ausgewählt. Jetzt gehe ich zu meinem Type-Werkzeug. Wenn ich versuche, hier zu tippen, die gleichen Worte, Zahlung, können Sie sehen, wie eng es meine Schriftart übereinstimmt. Ich denke, sie sind identisch. Dieser Designer verwendete die gleiche Schriftart, die ich gerade benutze, es ist Tw Cen MT. Es ist im Grunde geometrische Schrift. Weitere Informationen zu Schriftarten finden Sie in meinem anderen typografischen Kurs. Dies ist ein weiteres Feature, das sehr cool ist. Sie können auf einfache Weise Typ, Gesichter und Schriftarten zuordnen. Sie können feststellen, ob Sie bereits eine Schriftart installiert haben, die näher oder eng mit der Schriftart in diesem Bild übereinstimmt. Also, anstatt auf Websites zu gehen, welche Schriftart oder was auch immer, um die Schriftart verwendet zu finden, können Sie dieses Photoshop-Tool verwenden und sehr schön hinzufügen, können Sie es verwenden und finden Sie die näher Schriftarten, die Sie verwenden möchten. Dies ist eine neue Funktion in Photoshop CC 2015.5. Wenn Sie Fragen haben, lassen Sie es mich wissen. Nur wenige meiner Schüler haben diese neuen Funktionen in Photoshop in der neuesten Version angefordert, also erstelle ich diesen Vortrag und einen anderen. Fahren wir mit der nächsten Lektion fort.