UI-Design in Photoshop – Erste Schritt mit UI-Design-Karriere | Muhammad Ahsan Pervaiz | Skillshare

Playback-Geschwindigkeit


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

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

teacher avatar Muhammad Ahsan Pervaiz, UI UX Visual Designer 15+ Years

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Was geht in diesem Kurs aus?

      4:04

    • 2.

      Die Einrichtung Photoshop CC2017 Voreinstellungen für UI-Design

      6:19

    • 3.

      Benutzerdefinierte Tastaturkürzel in Photoshop erstellen

      4:19

    • 4.

      Skripte in Photoshop installieren

      5:40

    • 5.

      Photoshop auf MAC installieren

      2:15

    • 6.

      Photoshop für for

      7:09

    • 7.

      Die Macht der of

      9:28

    • 8.

      So installierst der to

      5:46

    • 9.

      Erweiterungen mit ZXP Installer Photoshop CC2017 installieren

      6:29

    • 10.

      Photoshop auf MAC installieren

      5:07

    • 11.

      Richte Panels und Arbeitsbereich für die UI-Design ein.

      7:16

    • 12.

      Was ist Farbkalibrierung?

      8:24

    • 13.

      Die besten Monitore (LED) für Designer:innen

      2:21

    • 14.

      Operating Farbkalibrierung

      7:29

    • 15.

      So funktioniert die Benutzeroberfläche von Photoshops

      5:03

    • 16.

      Neues Dokument fotografieren

      4:12

    • 17.

      Was sind Zeichenflächen?

      6:22

    • 18.

      Wie Ebenen in Photoshop funktioniert

      7:53

    • 19.

      Textfeld in Photsohop

      4:38

    • 20.

      Formwerkzeug in Photohsop

      6:34

    • 21.

      Grundlagen des Stift-Tools

      2:53

    • 22.

      Mehr zur Verwendung von Stiften Tool

      15:52

    • 23.

      Ausrichtung in Photoshop

      6:02

    • 24.

      Auswahl in Photohsop

      6:21

    • 25.

      Häufige Tastaturkürzel in Photoshop

      14:35

    • 26.

      Die Masken in Photoshop verwenden

      5:26

    • 27.

      Verwendung von Clip-Maske

      2:48

    • 28.

      Challange → Schnittmaske

      0:50

    • 29.

      Die Verwendung von Smart Objects in Photoshop

      7:40

    • 30.

      Verknüpfte Smart-Objekte in Photoshop

      7:00

    • 31.

      Die Nutzung von Layer in Photoshop

      6:27

    • 32.

      Drop Schatten-Effekte meistern

      3:40

    • 33.

      Verwendung von Innerer Shadow

      2:17

    • 34.

      Die Wirkung der Stroke verwenden

      2:43

    • 35.

      Die Verwendung von Ebenenstilen wiederverwenden

      2:03

    • 36.

      Was sind Gradienten?

      2:03

    • 37.

      Verwendung von Farbverläufen in UI-Design

      3:41

    • 38.

      3 Möglichkeiten zur Erstellung von Farbverläufen in Photoshop

      4:49

    • 39.

      Verwendung von Gradient in Photoshop

      7:30

    • 40.

      Verwendung von Gradient

      5:34

    • 41.

      Was sind Muster und wie verwenden sie im Webdesign im Webdesign?

      2:28

    • 42.

      2 Methoden zum Anwendung von Mustern

      4:59

    • 43.

      Muster aus einer Bilddatei erstellen

      2:35

    • 44.

      Installation und Verwenden von .pat

      5:11

    • 45.

      Wie Licht und Schatten in UI-Design funktioniert

      4:01

    • 46.

      Beispiele für Licht und Schatten

      2:22

    • 47.

      Farbschemata für Anfänger:innen

      1:54

    • 48.

      Die Hue und Helligkeit für Farbschemata verwenden

      1:28

    • 49.

      Online-Tools zum Erstellen von Farbschemata

      5:29

    • 50.

      Auswahl von Schriftarten und Typografie

      8:55

    • 51.

      Raster im Webdesign verwenden

      5:51

    • 52.

      Raster in Photoshop erstellen

      6:14

    • 53.

      Weiche Shadow Challange

      0:25

    • 54.

      Shadow

      12:47

    • 55.

      3D-Knopf-Design Challange

      1:12

    • 56.

      Gepresste Effekt in Photoshop

      7:09

    • 57.

      Modernes Header Teil 1

      8:46

    • 58.

      Modernes Kopfdesign Teil 2

      8:49

    • 59.

      Moderne Header

      9:02

    • 60.

      Color für den Hero

      11:25

    • 61.

      Transparente Maskeneffekte

      13:15

    • 62.

      Tabs in Photsohop entwerfen

      0:58

    • 63.

      Tabs entwerfen

      14:14

    • 64.

      Tabs entwerfen

      8:08

    • 65.

      Ressourcen für das IOS App sammeln

      4:00

    • 66.

      Beginne das IOS App Design

      4:35

    • 67.

      Das Hinzufügen von Menüpunkten zur IOS App

      5:47

    • 68.

      Text zum IOS App hinzufügen

      5:30

    • 69.

      Knöpfe zum IOS App hinzufügen

      11:51

    • 70.

      Using zum Präsentiere deiner Designs

      4:12

    • 71.

      Einfaches Trick, um weiße Hintergründe zu entfernen

      3:20

    • 72.

      Kleine Objekte aus dem Bild mit Spot entfernen

      4:26

    • 73.

      Farben in Bildern auftauchen

      6:48

    • 74.

      Hintergrund mit magnetischem Lasso-Tool entfernen

      15:53

    • 75.

      Mit der Auswahl und Maskenwerkzeug bereinigung

      10:20

    • 76.

      Was sind wireframes?

      3:45

    • 77.

      Tools zur Erstellung von Drahtrahmen

      11:59

    • 78.

      Übung → die →die Aufnahme der →Redesign Teil 1 Teil

      15:11

    • 79.

      Übung → die →die Einstellung des Dribbble Teil 2 Teil 2

      14:43

    • 80.

      PSD in die Programmierung umsetzen

      6:18

    • 81.

      Bilder für Web exportieren

      6:59

    • 82.

      Tipps zur Verwendung von Raster in Photoshop

      1:30

    • 83.

      Schriftart → Neue Funktionen in Photoshop CC2017

      2:46

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.310

Teilnehmer:innen

2

Projekte

Über diesen Kurs

BESTE Verkaufskurs (ALLE in EINER Adobe Photoshop-Kurs)

Meineich dir, dass UI Photoshop auf die andere Designer:innen verwenden?

Weißt auch, was die Grundkonzepte, Einstellungen und Tools in the sind und du nicht zu wissen?

Wenn du das UI-Design mit Photoshop erlernen und dein Selbstvertrauen und deine Fähigkeiten in Photoshop verbessern möchtest, ist dieser Kurs genau das Richtige FÜR DICH. Dieser Kurs ist auch gut für Anfänger:innen und Experten geeignet, keine Sorgen, wenn du noch nicht mit Photoshop verwendet hast.

Die meisten von uns kennen die Grundeinstellungen und die beiden wichtigsten settings, Tools und Erweiterungen mit der wir in Photoshop benötigen, um ein UI-Designer:in zu werden, mache die gleichen Fehler und verschwenden immer die Zeit im Internet nach verschiedenen Einstellungen und Antworten auf gängige shortcuts,

Was wirst du lernen?

  • Mach dir die Grundwerkzeuge von Photoshop, die du speziell für das UI-Design entwickelst.
  • Anwendung von Kenntnisse auf Landing Web-App oder Mobile App Design
  • Verwende häufige Shortcuts, Tools und Secret Erweiterungen, um deinen Shortcuts, zu beschleunigen
  • Grundlagen der Licht- und Shadow in UI Design
  • So verwendest du Muster und Gradienten, um deine Designs zu verbessern
  • Lerne, wie User Photoshop in ihren täglichen Routinen verwenden
  • Verwendung von Leitfaden und Raster mit Guides
  • Installation und Verwenden von Photoshop für die for
  • Verwendung von Farbverläufen und Gradients zum Erstellen moderner Designs
  • Verwende alle von the verwendeten Plug-ins und Erweiterungen immer wieder über die Verwendung
  • Lerne, wie du GRIDS in Webdesign erstellst und verwende
  • Die mobile App in Photoshop entwerfen (Schritt für Schritt Übung)
  • Bildbearbeitungstechniken in Photoshop zum Entfernen von Hintergrund
  • Grundlagen zur Bildfarbkorrektur für basics
  • Was ist Wireframes, wie du Drahtrahmen und Tools für die Gestaltung von wireframes
  • Dribbble Shot re-design für Schritt

Kursstruktur

  • Mehr als 20 Übungsbeispiele und Designprobleme mit dir die UI Designing besser
  • Quizs zur Testversion deiner Kenntnisse in Photoshop in der UI-Design

Student

Viele Vorträge werden auf der Grundlage der aktuellen Kursteilnehmer:innen in der Anfrage meiner aktuellen lectures angebracht. Folge dir ein Designproblem oder etwas neues anfordern

  • So installierst Photoshop in CC2017 (Kursprojekt)

Nimm jetzt an diesem Kurs an und beginne deine Karriere als UI-Designer:in

44c88ead

Triff deine:n Kursleiter:in

Teacher Profile Image

Muhammad Ahsan Pervaiz

UI UX Visual Designer 15+ Years

Kursleiter:in

I started my Freelancing Career 10+ years ago and learned everything the hard way myself. I went from scratch to end up working for FORTUNE 500 companies like INTEL, PANASONIC and Coca-Cola.

In just 2 years of Serious UI Designing, I made my place on DRIBBBLE
Working with Art Directors from Coca-Cola and Project Managers from the UK, I learned a lot in short period of time.

Worked from App Icon Design to App UI Design, from wireframes, prototypes and Mockups Design. I have a hunger of perfecting User Interface from all aspects

What my students are saying about my Classes?

 

AWARDS & WINS

I am a multi-talented person who has won One Gold Medal, won a nationwide Poster Design competition from PANASONIC and won many Landing ... Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. 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ß