So gestaltest du eine Website in Photoshop

1. Einführung: Hi, mein Name ist Dan. Ich führe Sie durch diesen Kurs, wie Sie professionelle Website-Mockups mit Photoshop erstellen können. Dies sind die Fähigkeiten, die Arbeitgeber wollen, und UX/UI-Design-Fähigkeiten sind, wo die hoch bezahlten Arbeitsplätze sind. Ich begann mein Leben als Grafikdesignerin und fand schnell heraus, dass es ziemlich wettbewerbsfähig war und die Bezahlung nicht super spannend war. Erst als ich mich in die Welt des Webdesigns einsetzte, bevor meine Karriere wirklich losging. Ich habe diesen Kurs für Anfänger, für Leute, die nervös sind, ihre Karriere in Web-Design zu ändern, für Menschen, die neu in der Web-Welt, sowie Entwickler, die keine vorherige Design-Training. Wir decken alles ab, was Sie brauchen, um Ihre ersten Web-Mockups zu entwerfen , ohne zu technisch zu werden. Während des Kurses erstellen wir eine Website für eine Mock Creative Agentur, die ihre mobilen, Tablet- und Desktop-Ansichten entwickelt . Mit den Übungsdateien kannst du herunterladen und mit mir arbeiten. Mit einem Principal PDF können Sie folgen und Ihre eigenen persönlichen Notizen erstellen. Ich werde Ihnen beibringen, wie Sie neue Dokumente einrichten und wie Sie mit mobilen, Tablet- und Desktopansichten arbeiten . Sie können ganz einfach Website-Farben und Schriftarten auswählen und auf Ihrem iPhone oder iPad eine Vorschau anzeigen. Sie lernen, wie Sie Bilder zuschneiden und vollständige Hintergründe erstellen, bis hin zum Exportieren der richtigen Dateien, die Sie für eine Website benötigen. Aber das werde ich da sein, um zu helfen. Wenn Sie bereit sind, können Sie mir Ihre Akten schicken und ich werde einen Blick werfen und Vorschläge machen. Jetzt ist es an der Zeit, Ihre Fähigkeiten zu verbessern, das Gebot der Arbeit zu erhalten und Ihre Kunden zu beeindrucken. 2. Was sollten wir am Ende unseres Projekts abliefern: Um ein kommerzieller Webdesigner zu sein, gibt es mehr zu machen als nur ein durchdachtes Website-Mark-up. Es gibt einige endgültige Ergebnisse, einige greifbare Dateien und Informationen, die Sie übergeben müssen, bevor die Codierung Ihrer Website beginnen kann. Unser Ziel ist es, vor dem Ende dieses Kurses einen Ordner mit webfähigen Bildern zu haben , die den Crickweb Namenskonventionen folgen. Sie werden auch ein CSS-Blatt produzieren, das von einem Entwickler verwendet wird, um zu wissen, welche Schriftarten Sie verwendet haben, die Höhen und Breiten Ihrer Navigationsbox oder Ihrer Fotobox. Sie werden lernen, wie Sie die richtigen Farbcodes, die Zeilenhöhe und den Abstand für Ihre Website weitergeben, so dass die schöne Person, die Ihre Website baut, schnell arbeiten kann und keine großen Vermutungen von Ihrem Mark-up machen müssen. 3. Welche Rolle spielt Photoshop bei der Gestaltung einer Website: Photoshop ist erstaunlich in vielen Dingen. In Bezug auf die Gestaltung von Websites, ist es das am häufigsten verwendete Tool und wenn Sie Beschäftigung in der Web-Design-Welt suchen, ist es wichtig. Jetzt Website baut mit Mockups. Dies sind Visuals, wie Sie denken, dass eine Website aussehen sollte. Sie tun dies, bevor Sie die Website tatsächlich codieren. Warum? Weil es viel schneller geht. Bei Änderungen in Photoshop geht es nur darum die richtige Ebene auszuwählen und die Seitenelemente zu ziehen. Im Code kann es viel mehr Auswirkungen geben, um einfach Dinge zu bewegen. Photoshop erledigt alle Planungs- und Designarbeiten. Dann wird Ihr Mockup als Website erstellt und codiert. Wenn Sie daran interessiert sind, die Entwicklungsarbeit selbst zu erledigen und Sie unsicher sind, wo Sie anfangen sollen, schreiben Sie mir eine Zeile in der Diskussion oder im Forum, ich bin wirklich glücklich, Ihnen dabei zu helfen, in die richtige Richtung zu zeigen. 4. Was sind die Produktionsvideos: Was sind die Produktionsvideos, die in diesem Kurs sind? Dies sind die Sitzungen, in denen ich damit beschäftigt bin, die Konzeptseite mit den Tools zu erstellen , die wir bereits gelernt haben. Diese können kleine Nuggets von Workflow enthalten, Gold und andere können ich nur die Arbeit machen und ein wenig langweilig werden. Ich werde nicht beleidigt sein, wenn du nicht alle beobachtest, den ganzen Weg durch. 5. So bereitest du deinen Arbeitsbereich für UI-Aufgaben vor: In diesem Video werden wir uns mit dem Zurücksetzen Ihres Arbeitsbereichs beschäftigen. Jetzt würden Sie Ihren Arbeitsbereich zurücksetzen, wenn Sie Photoshop geöffnet haben und es sich von meiner Version unterscheidet und Sie möchten, dass es gleich aussieht, damit Sie folgen können. Jetzt verwende ich Photoshop CC 2015. Wenn Sie andere Versionen verwenden, kann es etwas anders aussehen. Aber sagen wir, Sie haben es für andere Dinge verwendet und Sie haben diese Paletten verschoben, Sie ziehen herum oder Sie haben es versehentlich getan. Sie haben dies während des Tutorials getan. Sie können zu diesem Video zurückkommen. Alles, was Sie tun müssen, ist es wieder normal zu machen, um es richtig aussehen zu lassen, es ist hier oben, es sagt Essentials. wir sicher, dass es zuerst auf Essentials gesetzt ist, und klicken Sie dann auf die Stelle, an der es „Essentials zurücksetzen“ steht. Dann lege ich alles wieder an seinen Platz und sehe aus wie meins für dieses Tutorial. 6. So stellst du deinen Photoshop Voreinstellungen ein: Hi. In diesem Video werden wir auf die Änderung Ihrer Präferenzen, um mit dem Web zu arbeiten. Jetzt kommt Photoshop standardmäßig bereit, um viel mehr druckorientierte Arbeit zu erledigen. Was wir tun müssen, ist in unsere Präferenzen gehen und es für das Web ändern. Nun, das erste, was wir tun werden, ist, unsere Herrscher einzuschalten. Wir gehen zu Ansicht und runter zu Herrschern. Das wird mir zeigen, wie breit dieses Dokument ist. Meiner ist auf Zentimeter gesetzt, weil ich in Europa bin und dein auf Zoll gesetzt wird, wenn du in Amerika bist. Was hier passiert ist, ist, dass man sehen kann, dass es etwa 16 Zentimeter hängt. Nun, wenn wir es mit Web zu tun haben, wollen wir nicht wissen, was der Zentimeterwert ist, wir wollen wissen, was die Pixel sind. Wir müssen diese Maßeinheit in Pixel ändern. Um dies zu tun, gehen wir auf einem Mac zu Photoshop CC, gehen Sie zu Einstellungen und gehen zu einem mit der Bezeichnung Einheiten & Lineale. Nun, wenn Sie auf einem PC sind, ist es an einem etwas anderen Ort. Sie gehen zu Bearbeiten, dann rechts unten unten hier, es würde eine, die „Einstellungen“ sagt, und dann gehen Sie zu Einheiten & Lineale. Egal, was auch immer, lass es uns zu Einheiten und Herrschern schaffen. Was wir tun wollen, ist, meine auf Zentimeter gesetzt ist, Ihre auf Zoll oder Millimeter eingestellt sein könnte. Lassen Sie uns die Lineale in Pixel ändern. Die andere Sache, die wir ändern müssen, ist der Typ. Typ verwendet Punkte in der Regel, wenn wir es mit Druck zu tun haben. Aber was wir tun wollen, ist, dass wir jetzt auf Pixel wechseln wollen , denn das ist die Messung, die wir im Umgang mit Web verwenden. Wenn ich auf „OK“ klicke, werden Sie feststellen, dass es jetzt ungefähr 1.200 Pixel breit ist. Wenn ich zum Type-Werkzeug gehe, das hier T ist, werden Sie feststellen, dass ich es mit Pixeln anstelle von Punkten zu tun habe. Eine Sache zu beachten ist, dass, wenn Sie eine Person sind, die sich von Print zu Web bewegt, Sie müssen zurückgehen und diese Provinzen jedes Mal ändern , wenn Sie an einem anderen Dokumenttyp arbeiten möchten. Um es auf einem Mac zu tun, gehen wir zu Photoshop unten zu Einstellungen und gehen zu Einheiten & Lineale, denken Sie daran, dass Sie ein PC sind, es unter Bearbeiten, Einstellungen, Einheiten und Lineale, und Sie werden es wieder auf entweder Zoll oder Zentimeter, und der Typ geht zurück zu Punkt. Aber ein Schmerz, aber das ist es, was wir tun müssen. Ich werde auf „Abbrechen“ klicken, weil ich es so belassen möchte, wie es war, auf Pixel gesetzt. 7. Lade die Übungsdateien herunter: Hallo, in diesem Video werden wir uns ansehen, wie Sie die Übungsdateien herunterladen , die zu diesem Kurs gehören. Jetzt müssen Sie diese Dateien nicht haben, aber es ist wirklich hilfreich, wenn Sie Schritt für Schritt folgen möchten. In den Dateien, legen Sie Ihre E-Mail-Adresse hier in der Mitte, und ich maile Ihnen die Bilder, die zusammen mit dem Kurs gehen, zusammen mit Dingen wie die Schriftarten und Farben, die wir verwenden. Was ich auch getan habe, ist, dass ich am Ende jedes Videos ein Photoshop-Dokument gespeichert habe, das darstellt, wo wir vorhaben. Wenn Sie also verloren gehen oder Ihre Datei nicht so funktioniert, wie sie durch die Videos funktioniert, können Sie Ihre Datei mit der heruntergeladenen Datei vergleichen, damit Sie sehen können, wo Sie möglicherweise falsch gelaufen sind. Im Laufe des Kurses habe ich auf viele verschiedene Referenzen und Ressourcen, Dinge wie Syntax und Websites verwiesen , sie werden alle Teil dieser Übungsdateien hier sein. Alles klar, lassen Sie uns weitermachen. 8. So verstehst du dynamisches Design für Mobilgeräte und Tablets: Responsive Webdesign ist eine Möglichkeit, eine Website in Abhängigkeit von der Browsergröße zu ändern. Jetzt zeige ich ihm das „Smashing Magazine“. Smashing Magazine ist eine Website, die ich viel gelesen habe und ich mag die Mühe, in die sie gingen, um die verschiedenen Seiten je nach Browsergröße neu zu gestalten. Im Moment betrachten wir es, wie Sie es sagen würden, einen großen Bildschirm wie ein iMac oder ein 4K-Monitor oder etwas wirklich Großes und High Definition. Sie können sehen, es gibt ein nav auf der linken Seite, ein Sub-nav, Hauptinhalt und einige Anzeigen. Aber sobald ich kleiner werde, sagen Sie zu einer normalen Desktop-Ansicht, können Sie sehen, es ändert sich, es geht auf diese Navigation hier, unsere Hauptinhalte und Anzeigen, aber wie es kleiner wird, sagen wir, Tablet-Ansicht. Änderungen ziemlich viel, Gräben ist die Anzeigen, die Navigation kommt ein bisschen kleiner, dies ist entlang der Spitze hier, jetzt. Wenn ich in kleinere, bis in die mobile Ansicht komme , ändern sich die Dinge wieder ziemlich viel. Nun, was Sie davon nehmen müssen, ist, dass, wenn Sie in Photoshop entwerfen, ist Photoshop ästhetisches Medium. Es ist nicht skalierbar, dehnbar, wie Sie es bekommen können, wenn es endlich als Website veröffentlicht wird. Der Trick für Designer beim Verspotten eines Prototyps in Photoshop ist, dass Sie die verschiedenen Ansichten so entwerfen müssen, dass sie, wenn Sie sie an den Entwickler übergeben, wissen, was die Website tut, wenn es auf Mobilgeräte kommt. Was passiert, wenn sich das Menü in der Tablet-Ansicht befindet? Und all diese Fragen müssen in Ihrem Mock-up beantwortet werden. Was Sie nicht wollen, sind viele Fragen hin und her zwischen Ihnen und Entwickler, die versuchen , Fragen zu beantworten , die in der Konzeptphase hätte ausgearbeitet werden sollen. Und das ist eine schnelle Einführung in Responsive Webdesign. 9. So verstehst du Rastersysteme und Bootstrap: Jetzt ist die beliebteste Lösung, um verschiedene Browsergrößen im Moment zu handhaben , das Grid-System. Von den Grid-Systemen ist etwas, das Bootstrap genannt wird, bei weitem das häufigste. Nun, egal, ob Sie Bootstrap oder eine andere Möglichkeit verwenden, Ihre Website zu erstellen, werden Sie wahrscheinlich das Grid-System verwenden. Das ist, was wir in unserem Photoshop-Dokument verwenden. Das Gittersystem ermöglicht es Designern, von einem Basis 12-Säulen-Raster zu arbeiten. Designer können jede Menge dieser Spalten ausgeben, um ihre Website anzupassen. Werfen wir einen Blick auf dieses Beispiel von Grid-System hier auf Edward Robertson Website. Sie können es hier oben sehen, es heißt responsivegridsystem.com. Nun, was Sie sehen werden, wenn ich hier den ganzen Weg nach unten scrolle, beginnt es bei einer Basisspalte von 12. Nun, ich bin noch nicht zu sehen, dass jemand genau alle 12 von ihnen benutzt , es sei denn, es gibt Aufzählungspunkte oder Listen oder etwas Ähnliches. Was dazu neigt, ist, dass Designer am Ende ein paar dieser Spalten ausgeben. Unten unten sehen Sie, dass es auf einer Basisebene von 12 Spalten beginnt. Oben hier können Sie sehen, dass wir diese 12 Spalten leicht überspannen können, sagen wir sechs von ihnen und sechs wieder, um unsere Website in zwei Hälften zu kurven. Das ist ein wirklich schöner Weg. Zwölf ist eine wirklich schöne Zahl, weil wir sie in Drittel und Viertel und Sechs schneiden können , alle sehr leicht mit dem 12-Säulen-Raster. Dies ist ein weiteres Beispiel hier auf Edward Website. Sie können ein paar Beispiel-Layouts für Responsive sehen. Nun, diese Intro-Seite hier, vergiss die Höhen, weil die Höhen wirklich kurz sind. Aber sehen Sie die verschiedenen Kürzungen in Bezug auf die Navigation. Sie können hier sehen, das ist, wo mein Logo geht und dieser andere Brocken hier, diese anderen zwei Drittel wären, wo meine Navigation geht. Das ist überhaupt eine Spannweite und das könnte ein rotierendes Karussell sein, wie sie hier geschrieben haben. Dies sind Feature-Boxen, die alle in Drittel gekrümmt sind Vier Spalten, vier Spalten, vier Spalten, und dann würde meine Fußzeile alle drei umfassen. Sie können hier ein paar verschiedene Beispiele für Möglichkeiten zum Ausschneiden von Websites sehen. Ich habe hier zu der Photoshop-Datei gewechselt, die Sie als Teil der Übungsdateien herunterladen können , und wenn Sie das nicht getan haben, tun Sie das über den folgenden Link. Andernfalls können Sie Ihre eigenen Seiten erstellen. Nun, was ich getan habe, ist, wenn ich zu „Ansicht“ gehe und zu „Anzeigen“ gehe und zu „Guides“ gehe, wirst du sehen, dass es in Spalten von 12 mit etwas Polsterung und zwischen ihnen allen geschnitten wurde . Ich habe es für Desktop-, Tablet- und Mobilgeräte getan. Jetzt werden Sie hier auf dem Handy feststellen, das Handy nicht wirklich 12 Spalten wie das Tablet und Desktop hat. Wir tun dies, weil 12 Spalten auf einer so kleinen Größe zu dieser dichten Masse von Spalten werden und niemand tatsächlich schneidet eine mobile Website in 12 verschiedene Spalten. Wenn Sie nun entscheiden, welche Seiten und welche Größen sie haben sollen, können Sie sehen, dass der Desktop hier 960 Pixel breit ist. Wenn Sie entscheiden, welche Größe Desktop sein soll, und Tablet sein soll, und mobil zu sein, Sie sich nicht allzu über tatsächlichen Pixelabmessungen informieren, da es so viele verschiedene Bildschirmgrößen gibt, ist es unmöglich, sie zu gruppieren alle zusammen in einer exakten Pixelgröße. Sie wählen eine generische Größe, die für Mobilgeräte, Desktops und Tablets passt , die derzeit üblich sind, und das wird sich im Laufe der Zeit auch ändern. Seien Sie bereit für in ein paar Jahren, wenn die Bildschirmauflösungen alle geändert werden, oder es gibt eine neue feblety, desktopy, mobile Version, die Sie möglicherweise durchgehen müssen, und entwerfen Sie einen separaten Stil, um diese Bildschirmgröße gerecht zu werden. Wenn Sie nach exakten Abmessungen suchen, können Sie die Photoshop-Vorlage herunterladen, die ich in den Ressourcen habe. Oder wenn Sie sagen Bootstrap verwenden, können Sie Bootstrap überprüfen, um zu sehen, was die Medien Sternansichten brechen. Was sie als mobil betrachten, ist, was sie halten Tablet ist. Wenn wir einen Blick werfen können. Jetzt bin ich drüben bei Bootstrap, bei getbootstrap.com. Ich bin auf der leicht Preview-Version in Version vier. Im Moment sind wir bis zu Version drei, aber Version vier wird bald verfügbar sein, also werden wir das für diesen Kurs verwenden. Klicken Sie auf „Dokumentation“, dann gehe ich zu „Layout“ und wähle „Raster“. Wenn ich jetzt hier nach unten scrolle, sagt dieser hier Rasteroptionen. Sie können hier sehen, hier ist mein kleiner Fall, der mobil im Portrait sein würde. Dann habe ich klein, die als Telefon im Querformat, Medium Tablet, groß ist sagen, ein Laptop-Bildschirm und extra groß ist eine wirklich große sagen IMAX-Bildschirm. Sie sehen, dass die Größen hier in dieser Messung namens REM geschrieben sind, die ein Wurzel-EM ist. Wenn Sie diese Messung noch nie verwendet haben, machen Sie sich keine Sorgen. Im Wesentlichen nehmen Sie die 45 und Sie mal es um 16. Sixteen wird als Standardgröße in einem Browser betrachtet. Also 45 mal 16 gibt uns 720 Pixel. Wenn wir zurück zu Photoshop gehen, werden Sie sehen, dass ich 720 Pixel für dieses Tablet verwendet. Jetzt, wenn wir Bootstrap fünf und Bootstrap sechs erreichen, wird das gehen und passen diese Dinge je nachdem, was die gängigsten Größen sind. Sie könnten größer werden, sie könnten kleiner werden, was zu der Zeit wirklich beliebt ist. Das ist ein guter Ort für uns, um unser Photoshop-Mock Up zu starten. Nun, was ich auch für Sie hier getan habe, ist, dass diese Führer auch ein wenig schwer zu arbeiten sein können , weil sie sich über die Seiten erstrecken. Was ich hier getan habe, ist, sagen Sie, dass Sie an Ihrer Desktop-Ansicht arbeiten, Sie können diese Ebenen nach unten umschalten, und Sie werden feststellen, ich diesen als hilfreiche Spaltenlinien bezeichnet habe. Wenn ich das umschalte, habe ich ein paar grundlegende Spaltenraster angelegt. Sieh dir das an. Ich werde meine Ansicht, Show, Guides ausschalten und ich ziehe es vor, auf diese Weise zu arbeiten. Wenn ich etwas mache, das drei Spalten sein soll, klicke ich auf meine drei Spalten und es ist nur der transparente Hintergrund, so dass ich weiß, wann ich mit meinem Dokument arbeite. Ich ziehe es herum und ich weiß, dass ich in diesen drei Spalten hier arbeite. Wenn Sie mit der Spalte fertig sind, können Sie den Augapfel ein- und ausschalten, um an einem etwas anderen Layout oder einem anderen Rastersystem zu arbeiten. Jetzt werden Sie in diesem Tutorial feststellen, dass wir nur drei der Größen verwenden. Wir verwenden die kleinen, weniger als 34ems für Portrait Handy, Tablet und Desktop. Jetzt haben wir das nicht getan, das dazwischen ist, das ist unser Landschaftstelefon. Wir haben nicht den wirklich großen oder extra großen Desktop als auch gemacht. Es ist vor allem nur, um die Zeit von diesem Tutorial zu halten, und es hängt davon ab, dass ich denke, das Niveau der Komplexität Ihrer Website hat. Wenn es sich um eine schnelle Wurf-Website handelt, können Sie nicht so viel Zeit mit dem Excel oder der kleinen Version verbringen, die die kleine Landschafts-Telefon-Version ist, und bis vielleicht die Website ein wenig reifer ist. Wenn Sie an einem größeren Projekt arbeiten, dann werden Sie definitiv alle fünf Medienabfragen und alle fünf Größen hier in Photoshop betrachten . 10. Tipps zum Zoomen und Navigieren deines Dokuments: Hi. In diesem Video werden wir uns das Zoomen und Verschieben in einem Dokument ansehen. Nun gibt es viele Möglichkeiten, ein Dokument zu vergrößern und zu verkleinern. Ich werde Ihnen den schnellsten und einfachsten Weg zeigen. Halten Sie auf einem Mac die Befehlstaste gedrückt und tippen Sie auf „Plus“ auf Ihrer Tastatur. Wenn Sie nun auf einem PC sind, halten Sie die Strg-Taste gedrückt und tippen Sie auf „Plus“, um die Ansicht zu vergrößern. Sie nun dieselbe Taste gedrückt halten und auf das „Minus“ tippen, wird das Verkleinern verkleinert. Was wir wollen, ist, dass wir sicherstellen wollen, dass wir unser Photoshop-Modell in der gleichen Größe sehen , wie es in einem Webbrowser gerendert wird. Weil ein Webbrowser, offensichtlich, können wir nicht vergrößern und verkleinern, wie wir es in Photoshop tun können, also was wir tun wollen, ist es in der tatsächlichen Größe zu sehen. Um dies zu tun, wenn Sie sich auf einem anderen Computer als einem neuen MacBook Pro befinden, ist der einfachste Weg, zu Ansicht zu gehen und wählen Sie 100 Prozent. Das wird es in seiner tatsächlichen Größe zeigen. Jetzt können Sie auf meiner hier sehen, es ist etwa die Hälfte der Größe, die es sein sollte, weil ich ein MacBook Pro mit einem Retina-Display in verwende. Lange Geschichte kurz, es zeigt Ihnen im Wesentlichen alles in etwa halber Größe. Was wir jetzt tun müssen, mit jedem, der ein MacBook Pro hat, ist, dass Sie auf diese 200 Prozent zurücksetzen müssen, die doppelt so groß sind. Photoshop wird in der gleichen Größe angezeigt, die Ihnen auf einer Website angezeigt wird, sodass Sie etwas klarer darüber sein können, welche Schriftgrößen Sie auswählen möchten. Also, um klar zu sein, wenn Sie auf einem Computer außer einem MacBook Pro Retina-Display sind, verwenden Sie diese 100 Prozent. Wenn Sie sich auf einem Netzhautdisplay befinden, verwenden Sie 200 Prozent. Jetzt, da wir uns in dieser näheren Zoomstufe befinden, wollen wir uns bewegen. Der lange Weg ist, dass ich diese kleinen Schieberegler herumziehen konnte und das funktioniert. Eine schönere Art zu arbeiten ist, wenn ich meine Leertaste auf meiner Tastatur gedrückt halte, sehen Sie, wie sich mein Cursor vom Verschiebenwerkzeug zu dieser kleinen Hand ändert und diese Hand ermöglicht es mir, meine Maus zu klicken, zu halten und zu ziehen und sich in meinem Dokument zu bewegen. Ich halte meine Leertaste die ganze Zeit gedrückt und klicke und ziehe und lasse dann mit der Maus los. Dies ist eine nette, einfache Möglichkeit, sich im Dokument zu bewegen. Das ist das Zoomen und Navigieren in Ihrem Dokument. 11. Tools zum Messen und zur Einstellung von Abständen: Hallo, in diesem Video werden wir uns Regeln beim Messen von Dingen ansehen. Wir tun dies aus zwei Gründen. Eine ist, dass wir einen gleichmäßigen Abstand zwischen Boxen haben wollen und wir könnten dies auch tun, weil die Person, die die Website erstellt, wenn es nicht wir ist, die Messungen wissen wollen, wie weit die Dinge auseinander liegen sollten oder die Polsterung zwischen Objekten. Um dies zu tun, gibt es zwei Möglichkeiten, es gibt den offiziellen Weg und dann gibt es den Weg, den ich benutze. Jetzt ist die offizielle Art, dies zu tun, das Lineal-Tool zu verwenden. Jetzt versteckt sich das Linealwerkzeug hier unter dem Pipettenwerkzeug. Wenn ich auf Halten, Halten, Halten, halten, da ist es da, greifen Sie das Lineal-Werkzeug. Angenommen, ich möchte den Abstand zwischen dieser Schaltfläche „Mehr“ und der darunter liegenden Box messen. Was ich mache, ist, dass ich klicke und halte und ziehe. Was Sie sehen werden, ist in der oberen linken Hand in der App-Leiste, dass sich die Messungen ändern, während ich das herumziehe. Jetzt geht seine Dehnung standardmäßig überall hin. Ich möchte die Umschalttaste gedrückt halten, um sie in dieser vertikalen Position zu sperren, damit ich sie nach unten scrollen kann. Sie werden dort sehen, dass es auf 77 Pixel zwischen diesem und diesem gesetzt ist. Nun, was Sie tun müssen, ist ein wenig heranzoomen, nur um sicherzustellen, dass es tatsächlich sehr nah ist. Sie können sehen, weil ich so weit draußen war, war es nicht perfekt. Ich kann auf Halten klicken und ziehen, nur um es zu bereinigen und tatsächlich sagen, dass ich will, dass es da ist. Jetzt ist es mehr wie 81 Pixel. Nun, das ist der offizielle Weg. Ich werde meine Herrscher löschen, um es loszuwerden, werde ich verkleinern, indem ich Befehl oder Kontrolle minus gedrückt halte. Nun, das ist das offizielle Messwerkzeug und es ist großartig. Was aber besser ist, ist das Rechteck-Werkzeug zu verwenden, das Rechteck-Werkzeug hier hat einen großen Vorteil darin, dass es an den Rändern der Dinge auf der Seite einrastet. Während wir danach einige Anpassungen mit dem Lineal Tool vornehmen mussten , um sicherzustellen, dass alles richtig gemessen wurde. Schau dir das an, ich werde den Abstand zwischen hier und hier messen. Ich werde auf Halten klicken und ziehen und sehen, dass es wie rosa Linien, die überall erscheinen. Das liegt daran, dass es versucht, sich mit vielen verschiedenen Dingen auf den Seiten zu befassen. Meine ist eine ziemlich komplexe Seite, also gibt es viele Dinge, die versuchen, sich zu stellen, aber es ist ziemlich gut darin, nur zu schnappen, schau dir das an. Wenn ich es hier runter ziehe, ist es ziemlich gut, dass es 81 Pixel rauskam. Ich werde hineinzoomen und nochmals überprüfen. Lasst uns anknallen, es ist perfekt. Jetzt ist das Rechteck-Werkzeug wirklich gut, um Objekte als auch abzusprechen. Ich werde diese Ebene hier unten löschen. Ich verkleinere ein wenig und halte meine Leertaste gedrückt, klicke und ziehe nach unten. Ich werde hier auf meine kleine Portfolioliste hineinzoomen. Jetzt habe ich einige gleichmäßige Abstände zwischen diesen beiden Objekten. Ich verwende Spaltenbreiten, also lassen Sie uns Anzeigen, Anzeigen, und ich werde Hilfslinien aktivieren. Sie können dort sehen, dass ich den Abstand zwischen diesen Spalten verwendet habe. Nun, was ich tun möchte, ist sicherzustellen, dass der Abstand zwischen hier genau der gleiche ist und es offensichtlich nicht ist. Um es perfekt zu machen, was ich tun kann, ist mit meinem Rechteck-Werkzeug, ich kann klicken Sie halten und ziehen Sie das Rechteck zwischen diesen beiden und Sie werden feststellen, dass, Sie sehen, dass es an der Kante ist perfekt. Aber Sie werden feststellen, dass ich will, dass es perfekt quadratisch ist. Ich werde das rückgängig machen, indem ich zu Bearbeiten gehe, Schritt rückwärts gehe. Was ich tun werde, ist, dass ich die Umschalttaste gedrückt halten werde, während ich mein Rechteck ziehe, wenn ich die Umschalttaste gedrückt halte, werden die Einschränkungen gesperrt. Sie können jetzt sehen, dass es 30 Pixel mal 30 Pixel sind. Wenn ich nun mein Werkzeug „Verschieben“ verwende, klicken, halten und ziehen Sie sie nach unten, und wir verwenden sie wie ein Abstandshalter. Ich werde das in den Grund schneiden, jetzt ist es da. Jetzt werde ich dieses Bild nach oben verschieben. Manchmal schnippt es nicht, also ist es in diesem Fall nicht. Was Sie tun können, ist, dass Sie die Pfeiltasten auf der Tastatur verwenden können. Ich werde nur die Pfeiltasten benutzen, die es hochstoßen. Verwendung von Rechtecken ist eine gute Möglichkeit, um sicherzustellen, dass der Abstand zwischen diesen Bildern und dem gleichen darunter ist. Das einzige Problem mit ihnen ist, dass sie physisch sind, was bedeutet, dass dieses Ding hier wird drucken oder gehen Sie auf Ihrem Mock up. Wenn Sie fertig sind, müssen Sie sicherstellen, dass Sie es im Ebenenbedienfeld auswählen und löschen. Alles klar, und so messen Sie die Dinge in Photoshop. 12. Shortcuts für Ebenen, die du kennen musst: In diesem Video werden wir uns einige der wesentlichen Verknüpfungen ansehen , die Sie für den Umgang mit Ebenen benötigen. Nun, mit Ebenen-Panel, das Sie hier unten sehen, arbeite ich an einem endgültigen Bild hier. Sie können sehen, dass die Ebenen im Laufe der Zeit aufgebaut werden, und es gibt jetzt Hunderte von ihnen. Es ist also nicht wirklich praktisch, sich an die Namen aller zu erinnern, damit Sie wissen, auf welcher Ebene Sie arbeiten. Du brauchst also einen Trick. Die beste und die, die ich ständig verwende, ist sicherzustellen, dass Sie in Ihrem Verschiebungswerkzeug sind und stellen Sie sicher, dass Ihr Verschiebungswerkzeug auf Ebene eingestellt ist. Nun, was passieren wird, ist, dass du eine kleine Abkürzung lernen wirst. Wir befinden uns im Moment auf einer zufälligen Ebene. Ich möchte auf dieses Wort klicken. Das ist More. Jetzt werde ich ein wenig zoomen, wählen Sie Mehr. Was ich tun muss, ist die Befehlstaste auf einem Mac oder die Steuerungstaste am PC gedrückt zu halten. Was Sie bemerken, ist, dass, können Sie in der oberen EPA sehen? Es ändert dieses Ding namens Auto-Select. Es schaltet es nur ein, während Sie es brauchen. Wenn ich die Befehlstaste gedrückt halten und ich auf das Wort mehr klicken, können Sie in meinen Ebenen Panel sehen, es sprang zum Mehr. Ich kann das hier bewegen. Dann sag ich, dass ich auch die grüne Box verschieben möchte. Ich halte meine Befehlstaste gedrückt und das kleine Auto-Auswahl-Tool kommt an, ich klicke darauf. Obwohl es einen zufälligen Namen namens Rectangle 2 hat, kann ich ihn immer noch bewegen. Okay, also kann ich auf Mehr klicken und ihn hinüberbewegen, auf das Rechteck klicken und ihn hinüberbewegen. Halten Sie gedrückt, lasst uns großartig machen. Es ist nur eine sehr einfache Möglichkeit, die Ebenen auszuwählen und sie zu verschieben und wirklich wichtig, wenn Sie an einem solchen Dokument mit hoher Ebene arbeiten. Ich werde gehen, um zu bearbeiten. Schritt rückwärts, und ein Schritt rückwärts, und ein Schritt rückwärts. Eine weitere nützliche Verknüpfung ist, wenn Sie einen wirklich komplexen Satz von Ebenen alle übereinander haben , ist es wirklich schwer, die gewünschte auszuwählen. Was Sie tun können, ist, lassen Sie uns für eine Sekunde so tun, als ob wir dieses Bild hier im Hintergrund sehen? Ich möchte diesen kleinen Bereich hier auswählen, aber ich kann nicht, weil es eine Blackbox davor gibt. Wenn ich meinen Befehls-Klick-Trick verwende, wird es jedes Mal dieses rechteckige wählen. Natürlich kann ich hier runterholen, aber das ruiniert mein Beispiel. Was ich tun kann, ist, wenn ich mit der rechten Maustaste klicke und wenn Sie auf einem Mac sind und Sie keinen Rechtsklick haben, klicken Sie bei gedrückter Ctrl-Taste. Wenn Sie auf einem PC sind, ist es einfach, mit der rechten Maustaste zu klicken und Sie werden feststellen, dass es hier alles in meiner kleinen Layer-Reihenfolge auswählt. Das ist das schwarze Rechteck. Darunter befindet sich etwas, das Layer 2 genannt wird und das ist mein kleines Bild. Eine weitere nützliche Verknüpfung, die Sie benötigen, ist, wenn Sie meine Vorlage verwenden und die Spaltenraster verwenden. Sie müssen in der Lage sein, Show Guides anzuzeigen. Diese können wirklich toll sein, wenn Sie Dinge aufstellen, aber echte Schmerzen, wenn Sie versuchen, die Dinge visuell zu betrachten , weil es das Aussehen von allem mit den Linien überall ruiniert. Also die Verknüpfung dafür, wenn Sie auf einem Mac sind, ist es Befehl und verwenden Sie die Doppeltaste auf Ihrer Tastatur. Wenn Sie sich auf einem PC befinden, ist es Kontrolle und Doppelpunkt, und Sie schalten diese ein und aus. Ich mache das ziemlich viel, wenn ich mit diesen Gittern arbeite, wenn ich Dinge ausrichten möchte und dann schalte ich es wieder aus, wenn ich versuche, Dinge zu betrachten und zu sehen, wie sie sich aufstellen. 13. Das Pipettenwerkzeug: Jetzt wird das nächste Werkzeug in Ihrem Web-Designer-Toolkit Eye Dropper Tool sein. Das ist ein einfaches Werkzeug, um zu wissen, mit welcher Farbe Sie arbeiten. Es versteckt sich unter dem Linealwerkzeug und sollte standardmäßig auf das Pipettenwerkzeug eingestellt werden, aber wir haben das früher benutzt, erinnerst du dich? Ich werde Pipettenwerkzeug verwenden und es ist einfach wirklich gut für die Auswahl von Farbe. Ich möchte wissen, welche Farbe dieses Grün ist. Ich werde darauf klicken und Sie werden feststellen, dass hier oben, meine Farbfelder, die darauf zeigen und hier meine Vordergrundfarbe es es auswählt. Lassen Sie uns doppelklicken Sie hier unten auf die Vordergrundfarbe und Sie werden feststellen, dass wir unsere hexadezimale Zahl erhalten, und dies ist die Zahl, die in der Regel im Webdesign verwendet wird, um Farbe zu etablieren. Es gibt einige andere Möglichkeiten, mit RGBA umzugehen, die wir später betrachten werden, aber Sie können diese RGB-Farben auch verwenden, wenn Sie müssen. Lassen Sie uns auf „OK“ klicken. Das ist das Pipettenwerkzeug zum Auswählen von Farbe. Nehmen wir an, wir wollen diese Farbe immer und immer wieder in unserem Dokument verwenden. Was Sie tun können, ist, dass Sie ein so genanntes Musterfeld erstellen können. Nun, um ein Muster zu machen, sagen wir, ich will diese Pfirsichfarbe hier. Wenn ich es auswähle, kann ich es in meinen Musterfeldern verschieben und ich kann diese kleine Flagge hier verwenden, die „New Swatch“ sagt und es verwendet meine Vordergrundfarbe, die mit dem Algebra-Tool ausgewählt wurde und ich kann diesen BYOL Peach nennen. Klicken Sie auf „OK“. Nun, was Sie tun werden, ist, dass Sie ihn gerade am Ende meines kleinen Musterfelds hier erscheinen sehen. Das bedeutet, dass ich das wiederverwenden kann, wenn ich es muss. Angenommen, ich möchte es zurück auf Schwarzweiß wechseln, ich werde mein Rechteck-Werkzeug verwenden und ich werde ein Rechteck zeichnen und es wird schwarz sein. Aber was ich tun kann, ist, dass ich dieses kleine Drop-down-Menü benutzen kann und du wirst sehen, dass meine Pfirsichfarbe am Ende meiner Farbfelder ist, und ich kann diese Farbe immer wieder verwenden. 14. Das Transformationswerkzeug: Eines der nützlicheren Werkzeuge ist Ihr „Transformationswerkzeug“. Nun, ich benutze das viel durch diese Klasse und viel für meine eigene Arbeit. Es wird oft als Abkürzung verwendet. Der lange Weg wird bearbeitet, und es ist dieses kostenlose Transformationswerkzeug hier genannt. Nun, ich werde die Abkürzung während dieses Kurses verwenden, und es ist wirklich gut für Sie, auch zu lernen. Sie können auf einem Mac sehen, es ist Command T, und auf einem PC ist es Control T. Also werde ich Befehl T auf meiner Tastatur drücken. Sieh dir das an, denn ich habe mein Gitter hier gesehen, okay? Wenn Sie nicht haben, sind Sie Raster zeigen, haben eine Ansicht, zeigen und gehen Sie zu Führungen. Sehen Sie sich das an, weil meine Guides draußen sind, wird es an ihm schnappen und sagen, ich möchte, dass es etwas größer wird und ich möchte es herausschnappen, damit es vier Spalten hier für diesen Knopf erweitert. Großartig, so dass es an den Führungen schnappt, wenn es nötig ist. Du könntest die Guides ausschalten, und das wird es nicht. Nun ist ein paar andere praktische Modifikatorwerkzeuge sagen wir die Flucht. Die Flucht wird von unserer Transformation loswerden und lassen Sie uns auf einem PC zu Command T oder Control T gehen und uns das ansehen. Wenn ich die Umschalttaste gedrückt halte, während ich eine dieser Ecken ziehe, können Sie sehen, dass die Höhe und Breite genau gleich sind? Wenn ich das rückgängig mache, wenn ich die Umschalttaste nicht gedrückt halte, kann ich mich an allen alten Seiten bewegen, die ich mag, was praktisch ist, aber auch sehr gut ist, wenn Sie die Umschalttaste gedrückt halten. Jetzt habe ich wieder Escape gedrückt, schauen wir uns eine der Modifikatortaste an, also Befehl T und es ist die ALT-Taste. Also, wenn wir die ALT-Taste gedrückt halten und sagen, ich möchte diese vier Spalten machen, um die ALT-Taste auf diese eine Seite zu halten. Sieh zu, was passiert? Kann sehen, die gegenüberliegende Seite kommt für die Fahrt. Das ist die ALT-Taste, wenn ich die gedrückt halte, während ich sie ausstrecke. Wenn Sie fertig sind und Sie die Transformation beendet haben und Sie mögen drücken Sie „Enter“ auf Ihrer Tastatur oder „Return“ und das wird begehen. Das wird die Transformation beenden, du bist bereit zu gehen. 15. Die 'f'-Taste: Jetzt ist dieses Tool wirklich praktisch, wenn Sie ein Gefühl davon bekommen möchten , wie die Website aussehen wird, ohne dass alle Müll sind auf der Außenseite, alle Photoshop-Werkzeuge und Tabs und Symbolleisten. Nun, um dies zu tun, gehen Sie zu „Ansicht“, es gibt einen namens Bildschirmmodus und Sie verwenden diesen hier. Jetzt aus irgendeinem Grund weiß ich, dass es die Tastenkombination von F ist, aber irgendeinem Grund auf dieser Marke hier bin ich mir nicht sicher, ob auf einem PC, aber es hat nicht die Abkürzung, also werden wir das kleine bisschen ignorieren und die schnelle kleine Abkürzung verwenden -Taste. Wenn ich einmal auf die F-Taste tippe, wird die Hälfte davon ausgeblendet. Geben Sie die F-Taste erneut auf meiner Tastatur ein, es wird alle Symbolleisten außer den Linealen entfernt. Nun, was ich tun möchte, ist, dass ich noch einen zurückschalte und die Lineale ausschalten werde, Lineale schalten sie aus. Dann denken Sie daran, einmal für die F-Taste, zweimal für die F-Taste und ich kann mein Dokument sehen und ich kann es bewegen und ich kann meine Leertaste halten. Ich kann es bewegen und es gibt mir nur ein bisschen Sinn dafür meine Website im Moment aussieht. Ein F-Taste ein drittes Mal, bringt Sie zurück zum Quadrat eins. Das ist also eine drei Sitzungen. Da ist dieser hier, und dann der nächste und dann dieser Vollbildmodus. Sie fahren mit der F-Taste herum. Nun, eine andere nette Sache, die ich mag, ist, dass ich die F-Taste zweimal bekomme, um in den Vollbildmodus zu gelangen, ist, dass ich diesen weißen Hintergrund nicht mag, besonders wenn ich es mit solch einer dunklen Website zu tun habe. Ich will, dass dieser Hintergrund hier nicht weiß ist. Also, was Sie tun können, können Sie mit der rechten Maustaste darauf klicken und entweder dunkelgrau auswählen, mit der rechten Maustaste darauf klicken und Schwarz auswählen, und es ändert nur die Hintergrundfarbe. Wenn ich verkleinere, werden Sie feststellen, dass es für immer meine kleine Hintergrundfarbe ändert. Wenn ich F-Taste zurück habe, liegt es an dir, wie du es vorziehst, zu arbeiten. Ich arbeite gerne auf einem dunklen Bildschirm oder dunkelgrau , nur damit ich schönere Szenen meiner Website bekommen kann. 16. Bildschirmgrößen für Desktop, Tablet und Mobilgeräte: Hi. In diesem Video werden wir die Bildschirmauflösung im Vergleich zu unserer tatsächlichen Pixelgröße betrachten. Das kann ein wenig verwirrend sein, wenn du anfängst , du denkst: „Toll, ich werde ein Mock Up für ein iPhone 6 machen.“ Sie gehen in Photoshop und hier sind die Dimensionen. Sie googeln es, und es sagt, es ist diese Pixelbreite von dieser Pixelhöhe, und Sie entscheiden, „Ich werde das machen. Ich werde in Photoshop gehen, ich werde ein neues Dokument zu machen, dass es 750 durch diese 1.334 sein wird.“ Du schaffst es und du landest mit dieser Größe hier. Nun, das ist nicht die wahre Größe, es wird sein. Schauen wir uns diese Website hier an und wir werden sehen, dass es die CSS-Breite ist , die wir wirklich beobachten müssen, wenn wir für Mobiltelefone entwerfen, weil wir alle wissen, dass Mobiltelefone, abgesehen von einigen von ihnen, alle sehr ähnlich in der Größe. Aber was passieren wird, ist dieses Pixelverhältnis hier, Sie können sehen, wenn es eins zu eins ist, dass unabhängig von der physischen Größe, die die tatsächliche Größe des Bildschirms hier ist. Es gibt keine echte Dichte, und wenn Sie ein altes iPhone 3 gesehen haben, werden Sie feststellen, dass die Grafik nicht großartig ist, aber es ist die physische gleiche Größe wie ein iPhone 6. Aber was passiert, ist, wenn Sie dieses dichtere Pixelverhältnis erhalten, die gleiche physische Größe, die wir sehen, wird hier verdoppelt. Die tatsächlichen Pixel werden viel größer, aber die tatsächliche Größe des Telefons ist genau die gleiche. Sie werden feststellen, dass dieses LG G4, dieser hier hat ein Bildverhältnis von vier, so ist es ein ziemlich kleines Telefon, so dass die Größe wie das iPhone 6, aber Sie können sehen, es ist enorm groß in Bezug auf seine physikalische Breite. Aber wir schauen uns das hier im Vergleich zueinander an, sie sind eigentlich nicht so verschieden. Etwas größer, ist das iPhone 6 etwas größer, aber kein großer großer Sprung wie in dieser Indikation hier. Sie können also ziemlich verwirrend sein, wenn Sie neu sind. Die Grundlagen sind, dass beim Entwerfen eines Photoshop, Entwerfen für diese physische Größe wird Ihnen die beste Darstellung des tatsächlichen Telefons geben , anstatt diese physikalischen Pixelbreiten über in der Folie hier zu folgen . 17. Tests auf iPhone und iPad mit Adobe-Gerätvorschau: Adobe Preview oder Device Preview ist eine Möglichkeit Arbeit an Photoshop direkt auf einem mobilen Gerät zu zeigen, entweder auf einem iPhone oder einem iPad, während Sie arbeiten. Dies bedeutet, dass Sie ein Mock-ups auf Ihrem Computer machen könnten, aber tatsächlich sehen, wie es auf einem mobilen Gerät aussieht. Nun, diese App funktioniert nur für iPhone und iPad im Moment, es gibt kein Android-Äquivalent noch und wird wahrscheinlich nicht sein, aber halten Sie zu überprüfen, ob Adobe etwas für Android veröffentlichen. Als nächstes müssen Sie die App für Ihr iPhone und iPad herunterladen. Nun, ich habe auf dem iPhone hier, ignoriere die Tapete dort meines sehr hübschen Sohnes. Sobald Sie es getan haben, öffnen Sie es, und dort müssen Sie sich mit der so genannten Adobe ID anmelden. Wenn Sie jetzt keine Adobe ID haben, wissen Sie wahrscheinlich, Sie wissen einfach nicht, was es ist. Der Weg, um herauszufinden, ist, zu hier zu gehen und zu Hilfe zu gehen. Ich bin in Photoshop, gehen Sie zu Hilfe und Sie können hier sehen, meins ist DANIEL @BRINGYOUROWNLAPTOP. Klicken Sie jetzt nicht auf „Abmelden“. Dies ist nur ein Leitfaden, um zu erfahren, was Ihre E-Mail-Adresse für Ihre Adobe ID ist. Wenn Sie sich an Ihr Kennwort nicht erinnern können, versuchen Sie es, diese E-Mail-Adresse in Adobe.com zu verwenden und sich anzumelden. Wenn Sie sich nicht mehr an Ihr Kennwort erinnern können, klicken Sie auf die Schaltfläche „Neues Kennwort senden“. Sobald Sie das haben, melden Sie sich bei Ihrer App an. Von dort muss ein oder zwei Dinge passieren, Sie müssen es entweder wie ich an Ihren Stecker angeschlossen haben, dies ist nur ein Stecker, der über Ladegerät kommt, stecken Sie es in Ihren Computer und verwenden Sie, um es zu verbinden; oder Sie kann Wi-Fi ohne den Stecker verwenden. Jetzt bedeutet die Verwendung von Wi-Fi nur, dass dieses Telefon mit dem gleichen Router verbunden sein muss, der Ihr Computer ist, muss an das gleiche Netzwerk angeschlossen werden und dann funktioniert es drahtlos. Was wir jetzt tun müssen, ist, dass wir unsere Gerätevorschau geöffnet haben müssen. Sie können es hier sehen, dieses kleine Symbol. Wenn Sie es dort nicht sehen können, ist es unter Fenster und es heißt Gerätevorschau. Wenn sie nun beide miteinander verbunden sind, sehen Sie auf Ihrem Bildschirm, es wird den Namen Ihres Telefons und Ihrer App haben Sie hier verbunden. Als Nächstes müssen Sie sicherstellen, dass Sie unsere Datei auf Photoshop geöffnet haben. Ich werde die Datei öffnen, die wir in diesem Kurs verwenden oder erstellen werden , das ist die endgültige Version. Sie können hier auf meinem Handy sehen, es wird alles angezeigt. Jetzt ist das wirklich schöne Sache hier, es ist, dass es nutzbar ist, ich kann durch sie blättern und sehen, wie das gesamte Design auf diesem Telefon aussieht. Es ist unabhängig von Photoshop. Sie können sehen, dass es nichts tut, aber es wird hier angezeigt. Nun, eine wirklich schöne Sache ist, dass es dynamisch ist, was bedeutet, dass, wenn ich etwas in Photoshop aktualisiere, es sofort auf meinem Handy aktualisiert wird , ohne dass ich etwas tue, also schau dir das an. Ich habe auf meinem Handy bemerkt, dass sowohl BYOL als auch die Navigationsleiste ziemlich groß ist, also was ich tun werde, ist, dass ich es kleiner machen werde. Ich werde diesen obersten Teil hier vergrößern. Sie werden bemerken, wenn ich meine Navigation finde und ich es schön und klein mache, Sie werden sehen, ob ich meine Navigation schnappe und ich mache es ein bisschen kleiner, klicken Sie auf „Enter“, Sie werden sehr schnell feststellen, dass es auf dem Telefon aktualisiert wird, dauert etwa ein oder zwei Sekunden, aber völlig nutzbar. Das Gleiche mit diesem Bringen Sie Ihren Laptop hierher, die Schrift ist zu groß. Schnappen Sie sich die Schrift, machen Sie sie kleiner, drehen wir sie auf etwas wie 45, bewegen Sie sich entlang, bewegen Sie sich und Sie werden feststellen, dass sie aktualisiert wird, wenn ich mich mit etwa ein oder zwei Sekunden Verzögerung bewegen. Sagen wir das gleiche für diesen Text hier. Dieser weiße Text sieht hier ein wenig klein auf meinem mobilen Gerät aus, also werde ich das Type-Tool greifen, ich werde alles auswählen und ich werde es von 16 verschieben, es bis zu 18 stoßen und Sie werden in meinem Telefon bemerken, dass es automatisch aktualisiert wird. Ein paar Dinge, die Sie mit der Gerätevorschau tun können, ist, wenn Sie es einmal klicken, oben hier gibt es ein Dropdown-Menü und es bedeutet, dass Sie durch die verschiedenen Kunstboards mischen können , die Sie haben. Für mich ist es nicht so nützlich, denn ich habe die verschiedenen Zeichenflächen sind Tablet und Desktop und es ist interessant, es unten auf den Folien zu sehen, aber nicht wirklich werde mir helfen, meinen Workflow. Was wirklich gut war, ist sagen, dass Sie eine App entwickeln oder sagen , dass Sie in dieser Konzeptphase für Mobilgeräte sind und Sie haben ein paar verschiedene Versionen. Das bedeutet, dass Sie die verschiedenen Zeichenflächen durchschalten und anklicken können, um sie im Vergleich zueinander zu sehen. Eine Sache zu beachten, ist, dass Sie nicht tatsächlich Artboard in Photoshop eingerichtet haben , damit dies funktioniert, können Sie jede alte Datei öffnen und es wird in der App geladen. Nun, ich bin der Erste, wenn es irgendeine Technologie gibt , die mein Telefon und meinen Computer verbindet und Demoing und so macht, und oft funktionieren sie nicht sehr gut und ich werde mit ihnen für eine ganze Weile kämpfen, aber das besonders, Adobe Preview ist brillant. Es funktioniert, es ist schnell und es hilft wirklich meinem Workflow. Nun, wenn Sie für Mobilgeräte und Tablets entwerfen, sollten Sie jetzt so etwas während Ihres Builds verwenden , weil so viele Designer bis zum Ende warten, so dass die Website tatsächlich gebaut wird, bevor sie wirklich runter kommen und testen, was es auf Mobilgeräten und Tablets tun wird, und das ist viel zu weit entlang des Designprozesses, um so etwas zu tun. Testen Sie, lassen Sie es offen, haben Sie es die ganze Zeit, so dass Sie sehen und überprüfen können, während Sie gehen. Nun, wahrscheinlich das Wichtigste, was Sie bei der Verwendung von Adobe Preview beachten sollten, ist sicherzustellen, dass Sie ein paar Telefone, ein paar iPads verbinden und sie überall auf Ihrem Bildschirm anheften, damit es so aussieht, als wären Sie super wichtig und es wird auch aussehen, als ob Sie an der Minority Report arbeiten, wie Tom Cruise, bewegen Dinge herum, wischen Sie sie herum und es wird völlig beeindrucken Ihre Kollegen. In Ordnung, das war's für Adobe Preview. 18. Was im Webdesign technisch möglich ist: In diesem Video werden wir uns mit Möglichkeiten beschäftigen, wie wir uns selbst helfen können , wenn wir unsere Website nach Photoshop bauen. In Photoshop haben wir eine unendliche Menge an Dingen, die wir tun können. Wir könnten ein tolles Thema haben mit einem Schlagschatten mit Einhörnern, die aus ihm fliegen, Feuer und alles. Wir können das in Photoshop tun, das ist diese Art von Programm, aber wenn es um Web-Design geht, sind wir ziemlich begrenzt in Bezug auf die Arten von Dingen, die wir auf einer Website auf ihren Code setzen können, und kommt hauptsächlich auf die Browser und wie alt die Browser sind abhängig davon, was sie unterstützen können und was nicht können. Fliegende Einhörner, nein, dafür gibt es keine CSS-Funktion, aber es gibt Funktionen für Farbverläufe und Schlagschatten. Was wir tun können, ist, dass wir diese Website namens caniuse.com verwenden können. Jetzt gibt es noch andere Seiten wie diese. Ich mag diese Seite sehr, und sagen wir, wir wollen mit Farbverläufen arbeiten. Wenn ich hier einen Farbverlauf eintippe, sagt es mir, dass der CSS-Gradient auf allem außer Opera Mini funktioniert. Nun, wenn Sie Opera Mini unterstützen müssen, müssen Sie zweimal darüber nachdenken, CSS-Farbverläufe zu verwenden, glücklicherweise sind Verläufe im Moment draußen und es geht um flaches Design. Aber sagen Sie, dass Sie einen Farbverlauf haben müssen, wenn Sie diese Opera Mini unterstützen müssen, dann müssen Sie keine CSS-Farbverläufe verwenden. Eine andere Sache, die Sie möglicherweise benötigen, um herauszufinden , ob Sie einige ältere Browser unterstützen müssen. Wenn Sie eine Website erstellen und die Regel ist, dass wir mindestens ein Minimum von Internet Explorer 9 unterstützen müssen, werden Sie keine CSS-Verläufe haben. Das bedeutet nicht, dass du es nicht benutzen kannst, es bedeutet nur, dass sie nicht erscheinen werden. Sie können es so gestalten, dass, wenn der Farbverlauf nicht angewendet wird, es nur eine flache Hintergrundfarbe gibt und das in Ordnung sein könnte, weil es im Hintergrund ist, es kein großer wichtiger Teil davon ist. Sagen wir etwas wie, schauen wir uns Schatten an. Es gibt ein paar verschiedene Schatten, Kastenschatten. Box-Schatten, sie sind Schatten, die von den Seiten von div-Tags hängen , die ziemlich konsequent funktionieren. Schauen wir uns Text-Schatten an. Es wird in IE9 nicht wieder unterstützt. Nun könnte dies wichtiger sein, weil Sie vielleicht entscheiden, dass ich diesen sehr hellblauen Text auf diesem weißen Hintergrundhaben werde diesen sehr hellblauen Text auf diesem weißen Hintergrund aber er ist völlig nicht lesbar, es sei denn, es gibt einen Schlagschatten dahinter. Sie verlassen sich auf diesen Schlagschatten für den Text, der gelesen werden soll. Was das tun wird, ist, dass Internet Explorer 9 dieser wirklich ausgeblendete Text auf weißem Hintergrund sein wird, so dass es ein bisschen wichtiger ist. Nur um einen Blick auf diese Seite zu werfen, manchmal denken Sie, Ich frage mich, ob ich das auf einer Website tun kann oder nicht. Das kann ich verwenden. Nun, ein weiteres nettes kleines Extra für die Website ist hier. Es ist zu nehmen, dass ich in Irland bin, wo ich im Moment filme. Wenn ich auf „Importieren“ klicke, gibt es mir dieses nette Zeug. Im Moment hat es mir standardmäßig das globale Zeug gegeben und jetzt gibt es mir tatsächlich, was in Irland passiert. Sie können weltweit sehen, dass es zu 90 Prozent unterstützt wird, aber in Irland werden es 97 Prozent unterstützt. Global nimmt in alle Länder, während Irland technologisch ziemlich modern, so viel mehr wird unterstützt werden, ziemlich moderne Browser und moderne Computer. Nun, wenn Sie eine Website machen, die speziell für sagen, eine Entwicklungsnation ist , werden Sie hier ein anderes Verhältnis haben. Du wirst viel tiefer haben. Sie werden nicht in der Lage sein, einige dieser Funktionen so sehr zu nutzen , wie sagen, dass wir hier in Irland gekommen sind. Alles klar, und das ist die Website „Kann ich verwenden“. 19. Verwendung von Zeichenflächen: Hi. In diesem Video schauen wir uns Artboards an. Zeichenflächen ist eine neue Funktion, die in Photoshop CC 2015 herauskam. Wenn Sie jetzt eine spätere Version verwenden, wird es gut funktionieren. Wenn Sie jedoch eine frühere Version verwenden, gab es 2014 keine Art Boards. Was Sie tun müssen, ist, dass Sie nur separate Seiten verwenden müssen. Aber wenn Sie meine Version oder höher verwenden, ist im Wesentlichen alles, was sie sind, eine Möglichkeit, mehrere Seiten in einem Dokument zu haben , anstatt sie in separate Photoshop-Dokumente zu trennen. Um es zu tun, gehen wir zu Datei, gehen wir zu Neu und lassen Sie uns Art Board aus dem Fenster Neues Dokument wählen und lassen Sie uns in unseren Breiten setzen, die wir früher in Bezug auf die physikalischen Größen unserer besprochen haben , beginnen wir mit unserem -Desktop-Ansicht. Unser Desktop wird 960 Pixel sein, jetzt ist die Höhe nicht wirklich wichtig weil Websites die Höhe ändern, je nachdem, was der Inhalt ist. Ich werde in setzen, sagen wir 1500 und klicken Sie auf OK. Das ist meine erste Zeichenfläche. Es heißt Artboard eins und Sie können meine Ebenen hier sehen. Es ist ein etwas neues. Wenn Sie Photoshop vorher verwendet haben, gibt es ein etwas neues Gruppierungssystem mit Kunsttafeln. Also werde ich auf Art Board eins doppelklicken, um es umzubenennen. Dieser wird Desktop genannt, und er wird 960 Pixel breit sein. Großartig. Hier können Sie sehen, wie sich der Name oben ändert. Um eine weitere Ansicht hinzuzufügen, so lassen Sie uns alle arbeiten an einer Tablet-Ansicht als nächstes. Es gibt ein paar verschiedene Möglichkeiten, es zu tun. Der einfachste Weg, den ich gefunden habe, ist die Verwendung von Layer, New, und mit diesem, das Artboard sagt. Dieser wird Tablets heißen, und es wird 720 Pixel breit sein. Ich werde sicherstellen, dass es 720 Pixel hier unten sagt und die gleiche Höhe verwenden. Klicken Sie auf OK, und es schiebt es daneben. Die letzte Ansicht, die wir tun werden, ist die mobile Ansicht. Wir gehen weiter zu Layer, Neu. Wir gehen zum Kunstbrett und wir werden Handy auswählen und dieser wird 360 Pixel sein. Das ist nur der Name an der Spitze. Ich muss tatsächlich die Pixel unten hier ändern und wir verwenden die gleiche Höhe und wir werden auf OK klicken. So haben wir Tablet-Ansicht, Desktop-Ansicht und mobile Ansicht alle nebeneinander. Nun, wo es sehr nützlich wird, ist, wenn Sie beginnen über alle drei zu entwerfen und Sie möchten sicherstellen, dass sie alle konsistent sind. Nehmen wir an, ich werde mein Rechteck-Werkzeug verwenden. Ich werde hier eine Musterfarbe auswählen, jede zufällige Farbe und nicht diese Farbe. Einer der großen Vorteile für die Verwendung von Kunstboards ist die Tatsache, dass ich hier etwas zeichnen kann, das eigentlich ziemlich weit über den Rand liegt. Sie sehen, es ist ganz am Rand hier, und ich lasse los, Sie sehen, es schneidet es auf meine Desktop-Ansicht. Es ist ein nettes kleines Feature. Nun, das nächste, was ich tun werde, ist, dass ich dasselbe will. Sagen wir, das ist meine Navigationsleiste. Also werde ich dies als meine große Navigationsleiste oben doppelklicken. Ich habe den Namen unten doppelt geklickt und ihn umbenannt. Ich möchte es jetzt überqueren. Jetzt werde ich zurück zum Verschiebenwerkzeug wechseln, es ist standardmäßig dieses Zeichenflächenwerkzeug ziemlich viel, wenn Sie mit Zeichenflächen arbeiten. Ich habe das Verschiebenwerkzeug verschoben und was ich tun möchte, ist, dass ich Navigationsleiste duplizieren werde. Ich werde mit der rechten Maustaste darauf klicken und auf diejenige klicken, die Duplikat sagt. Ich nenne es Nav Bar. Ich habe jetzt zwei von ihnen, ich werde das Verschieben-Tool verwenden und ich werde auf Halten klicken und ziehen Sie es über das Tablet. Was passieren kann, wenn Sie es ziehen, ich werde das rückgängig machen, nur um es Ihnen wieder zu zeigen, ist ich werde nav bar Kreuz ziehen. Anfangs bewegt es sich nicht wirklich über. Manchmal muss man ihnen ein bisschen ein Wackeln geben, nur um es in der Tablet-Ansicht erscheinen zu lassen, dann kann ich loslassen und es ist da drin. Sie können jetzt sehen, dass es Navigationsleiste in meiner Desktop-Ansicht gibt, und ich habe es in meiner Tablet-Ansicht. Also, der letzte, ich werde es nochmal duplizieren. Duplicate Layer, ich werde es Navigationsleiste nennen und in der mobilen Ansicht werde ich auf Halten und ziehen Sie es, und geben Sie es dann ein Wackeln und es wird auf meiner mobilen Ansicht angezeigt. Jetzt können Sie die Vorteile dafür sehen. Ich werde sie dort einlegen und wenn Sie an einem separaten Dokument arbeiten und zwischen ihnen wechseln müssen, ist es wirklich schwer zu wissen, ist es die gleiche Farbe? Ist es auf die gleiche Weise aufgereiht? Ist es konsistent über all die verschiedenen Ansichten und Kunsttafeln aussehen , ist ein wirklich netter kleiner neuer Vorteil für Photoshop. Und das ist Artboards. 20. Seitenhöhen: Als wir anfingen, unsere Zeichenflächen zu erstellen machten wir sie alle eine Höhe von 1500 Pixel hoch. Schauen wir uns jetzt meine endgültige Version hier an und Sie werden das bemerken, sagen Sie meine Desktop-Ansicht hier gegen mein Handy. Mein Handy war viel länger und meine Desktop-Ansicht ist eigentlich länger als das, was ich jetzt auch ursprünglich gemacht habe. Also, während Sie mit arbeiten, werden Sie am Ende ändern die Höhe Ihrer Website ziemlich viel, um den Inhalt, den Sie hinzufügen, in es aufnehmen. Was du noch nicht weißt, also wird es sich ändern, während du weitergehst. Nun, um diese Höhen zu ändern, wie Sie gehen, möchten Sie das Zeichenflächenwerkzeug verwenden. Um die Zeichenfläche zu finden, klicken Sie und halten Sie das Verschiebenwerkzeug gedrückt und dort ist es. Da ist mein Werkzeug für die Zeichenfläche. Nun, um meinen Desktop zu sagen, um es länger zu machen , indem Sie auf die Mitte klicken, es funktioniert nicht wirklich, richtig? Ich muss hier auf diesen Rand klicken und es ein wenig länger machen. Also klicke auf die Kante, du bekommst die Zeichenfläche und ich kann sie nach unten ziehen, und das war's. Okay, das hat meine Desktop-Ansicht so viel länger gemacht. Sie können es natürlich auch kontrahieren. Jetzt bleiben diese kleinen Griffe auf der Außenseite und bis Sie auf etwas anderes als diese hohe Zeichenfläche hier glatten, klicken Sie auf meine Navigationsleiste und sie werden verschwinden. Offensichtlich können Sie es für jede der Seiten tun. Ich kann dann zu meinem Zeichenflächen-Tool gehen, stellen Sie sicher, dass ich auf den Rand hier meines mobilen Geräts klicke und ich kann dies viel länger sagen, wie ich arbeite, ich werde zu beenden, klicken Sie auf alles andere in meinen Ebenen und diese kleine Transformationsfenster werden verschwunden sein. In Ordnung, so ändern Sie die Größe Ihrer Webseite mit dem Zeichenflächen-Tool. 21. Seitenraster, Spalten und Lineale: Wenn Sie in Photoshop mit einem reaktionsfähigen Layout arbeiten, habe ich den Begriff Spaltenraster und Hilfslinien sehr austauschbar verwendet. Weil der Gesamtbegriff als Raster bezeichnet wird, aber wirklich, wenn Sie sie betrachten, sind es nur Spalten. Um diese Spalten in Photoshop zu definieren, verwenden wir Hilfslinien. Verwirrend? Ja, irgendwie. In Ordnung. Werfen wir einen Blick auf die fertige Version dieses hier. Sie können hier sehen, diese kleinen blauen Linien, diese hellblauen Linien sind Hilfslinien und sie helfen mir, meine Spalten in meinem responsive Layout zu bilden. Wenn ich zu meinem leeren Dokument zurückgehe, wie erstelle ich einen Leitfaden? Wie machen Sie Ihren eigenen Führer? Gehen Sie einfach zu Ansicht, und Sie müssen sicherstellen, dass etwas, das die Lineale genannt wird, eingeschaltet ist. Was Sie bemerken werden, ist, an den Seiten hier, oben und unten, dass sich diese kleinen Lineale wiederholen. Was wir tun können, ist überall in diesem Bereich, hier können wir klicken halten, ziehen, ziehen, ziehen, ziehen, ziehen. Das würde einen Leitfaden für unser Layout ausgeben. Wir springen auch einmal von oben. Was passiert ist, wenn Sie mit der heruntergeladenen Vorlage arbeiten, die ich Ihnen gegeben habe, ist, dass Sie sie möglicherweise verschieben oder deaktivieren oder sperren müssen. Schauen wir uns das an. Standardmäßig ist Ihre Vorlage wahrscheinlich gesperrt. Die Hilfslinien in Ihrer Vorlage sind wahrscheinlich gesperrt. Weil ich nicht wollte, dass du die Guides zerstörst. Wenn Sie sie jedoch verschieben oder sperren oder freischalten möchten, gehen Sie zu Ansicht, wechseln Sie zu Hilfslinien sperren. Was das bedeutet, ist, dass ich diese nicht bewegen kann. Ich werde sie nicht viel bewegen können. Sie stecken alle dort fest. Wenn ich sie freischalten möchte, deaktiviere ich das. Dann, weil es sich ein wenig ändert, und ich kann sie nachher bewegen. Sagen Sie, es gibt einen Führer, den ich nicht mehr brauche. Was Sie tun können, ist, dass Sie es auswählen können. Um die Datei zu löschen, klicken Sie auf „Halten“ und ziehen Sie sie. Sie ziehen es einfach zurück in das Lineal, wo Sie es haben, und es verschwindet für immer. Ich werde das löschen und wieder da rüber gehen. Wenn Sie arbeiten, werden Sie feststellen, auf, sagen Sie diesen hier, diese Führer können ziemlich ablenkend sein. Hilfreich, wenn Sie das erste Mal auslegen, aber später ziemlich ablenkend. Sie können sie ein- und ausschalten. Gehe zu Ansicht, es gibt eine unter Show, und es ist dieser hier namens Guides. Nun, Sie sehen das [unhörbar] hier, es ist Command und Semikolon oder Control Semikolon auf einem PC. ( unhörbar) ziemlich viel. Wenn ich arbeite, überlege ich Command Semikolon ein und aus, um sie ein- und auszuschalten, wenn ich arbeite, weil es viel einfacher ist, ohne die Hilfslinien zu sehen und ein wenig visuell zu bekommen. Aber strukturell gehen die Guides voll aus. Dies wird [unhörbar] beim Erstellen, Ändern und Löschen von Hilfslinien. 22. Auswahl der Farben für die Website: In diesem Video werden wir uns die Verwendung von Farbe ansehen. Jetzt können Sie Farbe auf ein paar Arten angreifen. Wenn Sie Ihre Kartons zeichnen und Dinge einfärben, können Sie dieses kleine Farbfeld hier verwenden. Was du tust, ist, dass du das nach oben und unten ziehst, um den Farbton zu erhalten. Dann bewegen wir diesen kleinen Kreis, indem wir ihn anklicken und ziehen, um die Farbe auszuwählen. Sie werden feststellen, dass hier im Vordergrund meine Vordergrundfarbe ist. Da ist es auch hier unten. Wenn ich mein Typwerkzeug habe, können Sie hier sehen? Es wird die gleiche Farbe verwenden. Wenn ich mein Rechteck-Werkzeug verwende, wird es verwenden, was in dieser Vordergrundfarbe ist, weil ich dies beobachten kann, ich kann es ändern und all diese Dinge würden sich gleichzeitig ändern und ich kann anfangen, Dinge zu zeichnen und Farbe zu machen. Sie an einer Marke eines Unternehmens arbeiten, WennSie an einer Marke eines Unternehmens arbeiten,die bestimmte Farben hat, müssen Sie diese eingeben, und Sie können dies tun, indem Sie ein so genanntes Farbfeld erstellen. Um ein Farbfeld zu machen, gehen wir zuerst eine Farbe, und was wir tun werden, ist, anstatt Dinge herumzuziehen, was wir tun werden, ist hier auf das Musterfeld doppelklicken und wir werden es eingeben. Wenn Sie mit einer Marke arbeiten, die über vorhandene Farben verfügt, können Sie die Details eingeben, die Sie kennen. Wenn Sie die RGB-Farbe kennen, können Sie sie eingeben, sagen Null, sagen, es ist 200, und 220, es wird mir diese Farbe geben, hellblau, also weiß ich genau, dass das die richtige Farbe ist. Sie können diese Zahl auch hier neben den Hashes, der Hexadezimalzahl, abrufen. Sie können dies also eingeben, und es kann drei- oder sechsstellig sein, je nachdem, was Ihnen gegeben wird. Jetzt funktionieren beide. Wenn Sie die CMYK-Details erhalten, können Sie sie auch hier einblenden. Um diese Farbe auszuwählen, sagen wir, dass wir dieses magische Farbfeld haben, das wir brauchen Wir können auf dieses Feld klicken, das „Zu Mustern hinzufügen“ steht. Wir geben ihm einen Namen und nennen dies das Beispiel blau. Was Sie bemerken, ist, dass ich auf „Okay“ klicke, ist in meinem Farbfeld-Panel rechts unten in dieser Liste hier. Jetzt gibt es diese Farbe hier genannt Beispiel blau, die ich immer wieder wiederverwenden kann. Sagen Sie, wenn ich zu einer anderen Farbe wechseln, weil ich es benutze und es wird zu dieser rosa, violetten Farbe gehen, wenn ich mein Typwerkzeug jetzt bekomme und ich einen Typ machen muss, der blau ist, muss ich nur sicherstellen, dass ich auf „Blau“ klicke bevor ich mit der Eingabe beginne, und es wird es ändern. Wenn ich es danach ändern muss, kann ich den Typ auswählen und dann ein beliebiges Farbfeld auswählen, und es wird sich ändern, sobald ich zum Verschiebenwerkzeug zurückgehe. Großartig. Für die Leute, die nicht nach einer wirklich großen Anleitung für Farben und Sie sind in der Lage, Ihre eigenen Farben zu wählen, können Sie offensichtlich Ihre eigenen wählen, aber manchmal können Sie sich verfangen, nicht zu wissen, welche Farbe zu wählen, was mit was funktioniert. Was Sie also tun können, ist etwas namens Adobe Color zu verwenden. Jetzt ist es in Photoshop integriert. Lassen Sie uns zu Fenster gehen, bis zu Erweiterungen, und dieses hier genannt Adobe Color Designs. Öffnen Sie es, Sie müssen mit dem Netz verbunden sein, und Sie müssen in Ihrem Creative Cloud-Konto angemeldet sein. Sobald Sie hier drin sind, und dies ist eine hier könnte erkunden. Zur Inspiration gehe ich gerne zu diesem, der am beliebtesten sagt, und das ist diejenige, die von Menschen durch dieses kleine System hier am meisten benutzt wird. Ziemlich oft an die Spitze hier ist eine nette Gruppe von fünf Farben, die Sie verwenden können, um Ihre Website zu gestalten. Als Teil der täglichen Farbthemen, können Sie gehen und laden Sie Ihre eigenen Farbfelder als auch. Wenn Sie also ein Corporate Theme erstellt haben und es mit anderen Designern im gesamten Unternehmen teilen möchten , können Sie es in Farbthemen hochladen. Ich werde es in diesem Tutorial nicht behandeln, aber Sie können Ihre eigenen Farbfelder zu diesen Adobe Color-Designs hochladen. Was ich für Sie getan habe, wenn Sie B-Y-O-L eingeben, „Enter“ drücken, finden Sie die Farben, die ich in diesem Tutorial verwende , die Sie herunterladen und verwenden können. Jetzt, um sie herunterzuladen und sie zu Ihren Mustern hinzuzufügen, Musterfelder im Vergleich zu Aktionen hier, legen Sie diese unten und sagten: „Zu meinen Farbfeldern hinzufügen“, und Sie werden sie sehen. Sie erscheinen alle nur von unten hier in meinem Farbfeld-Panel. Was Sie auch sehen werden, ist, können Sie sehen, dass sie zu meiner Bibliothek hier hinzugefügt wurden? Wenn Sie eine frühere Version von Photoshop verwenden, wird dieser erste Teil funktionieren, aber die Option dieser Bibliothek wird nicht sein, wir sind im Jahr 2015, diese Bibliotheksoption ist eine wirklich gute Möglichkeit, Farben auszuwählen. Also werde ich das reinbringen und wir alle sollten jetzt an diesen Farben arbeiten. Offensichtlich können Sie durch den Laden Ihre eigenen Farben auswählen, aber wenn Sie genau folgen möchten, ist das der Weg, es zu tun. 23. So strukturierst du deine Website mit Vektorformen: Alles klar, in diesem Tutorial werden wir einige der großen Art von strukturierten Bereichen mit dem Rechteck-Werkzeug verspotten . Das Rechteck-Werkzeug, für die Leute, die Web-Designer sind, wissen, dass es im Wesentlichen div-Tags erstellt, die Sie den Stil und die Größe und Farben und Dinge von später ziehen können . Sie müssen sicherstellen, dass Sie dieses Rechteck-Werkzeug hier verwenden. Wenn Sie das Rechteck-Werkzeug nicht finden können, klicken, halten Sie es gedrückt, ziehen Sie es nach unten und Sie können die letzten beiden U mit dem Ellipsenwerkzeug finden, müssen Sie es möglicherweise gedrückt halten und das Rechteck-Werkzeug greifen. Was wir tun werden, ist, wenn Sie zusammen mit meiner Vorlage folgen, Ich werde, es gibt eine Option hier, es heißt Löschen Sie mich. Ich werde das tatsächlich löschen, weil es diese kleinen grünen Kisten loswird. Das sind meine kleinen Werbeteile. Ich werde ihn in den Bin und ich werde ein wenig zoomen, Befehl plus und ich werde zoomen, damit ich die Kanten meiner Desktop-Ansicht sehen kann. Was ich tun werde, ist, dass ich anfangen werde zu kreieren. Ok. Also meine erste Box wird meine große Art von Haupt-Helden Bild und ich werde dieses lila hier verwenden, also werde ich klicken, dass oder wählen Sie es aus diesem Farbfeld-Panel, und ich werde klicken Sie halten und ziehen. Was Sie bemerken, ist, dass ich über die Ränder ziehen kann, es ist mein Problem und in Ruhe, die Ränder dort. Wenn Ihre hat die falsche Farbe wie meins hat, erinnerte sich an die letzte Farbe, obwohl meine Vordergrundfarbe sagt, diese schöne neue Bring Your Own Laptop Purple sein. Was Sie tun können, ist, klicken Sie einfach wieder darauf und es wird zeichnen und ändern, oder wenn ich gehen, um rückgängig zu machen, kann ich hier klicken und wählen Sie die Farbe aus meinem Farbfeld-Panel. Großartig. Das wird meine große Art von Helden Grafikbild sein. Was jetzt tun wird, ist, dass ich meine Navigationsleiste hinzufügen werde. Also werde ich das Rechteck-Werkzeug wieder verwenden und ich werde hier halten und über die Spitze ziehen, und ich vermute ein wenig. Dies wird meine Navigationsleiste sein. Was ich tun möchte, ist, es mit Schwarz zu füllen. Schwarz ist irgendwo oben auf Ihren Mustern hier und oder Sie können es von hier oben verwenden. Ich wähle dies als meine Vordergrundfarbe aus. Toll, also wird das meine Navigationsleiste sein. Was wir am Ende tun werden, ist, dass wir ein Bild unter der Navigation haben , das wir noch sehen können. Was wir tun werden ist, wir werden diese Navigationsleiste auswählen lassen. So wie ich weiß, dass es ausgewählt ist, kann ich es hier in meinem Layer-Teil sehen. Was ich tun werde, ist auf das Wort Rechteck doppelklicken und dieses nennen, nav bar. Ich nenne das hier, Hero Graphic. Auf der Navigationsleiste hier habe ich diese Deckkraft genannt. Wenn ich die Deckkraft ein wenig senke, bin ich vielleicht auf etwa 80% runter. Was Sie bemerken werden, ist, dass, wenn ich es nach unten absenke, können Sie sehen, dass es tatsächlich ziemlich transparent über den oberen Rand des Hintergrunds ist und das liegt an Ihnen und wie viel durch Sie sehen wollen, dass es sein soll. Wir werden es wahrscheinlich später ändern, wenn wir unser Bild darunter bekommen, aber im Moment ändern Sie so die Deckkraft eines Ihrer Rechtecke. Das nächste, was ich tun werde, ist, dass ich hier rüber schlurfen werde. Für dieses Tutorial werden wir Tablet überspringen, nur so dass das Tutorial nicht 10 Stunden lang ist. Ich werde eine mobile Version machen. Auf Handy, wie ich weiß, bin auf Handy, Sie können ihn hier in meinem Ebenen-Panel sehen, ist die extra kleine Version. Ich gehe in das und lösche, wo mein Name und meine Website ist, lösche das, das brauchen wir nicht. Was wir aber tun werden, ist, dass wir verkleinern werden. Also werde ich das schließen, es reinwerfen, ein wenig verkleinern. Was ich tun möchte, ist, diese Rechtecke zu nehmen und sie über zu bewegen. Ich werde zu meinem Bewegungstool wechseln. Ich werde meinen Trick verwenden, den wir im frühen Video gelernt haben, über das Halten des Befehls. Ich werde auf das Rechteck klicken, das meine Navigationsleiste ist, und ich werde es über die O-Taste ziehen und was das O-Tastenelement ziehen, das tun wird, ist es wird eine Kopie erstellen, während es sich bewegt. Um es in die richtige Funktion und das richtige Bit zu bekommen, müssen Sie vielleicht ein wenig wackeln, aber es sieht so aus, als wäre es perfekt aufgereiht. Richtig. Ich werde dieses auch über bewegen so dass dieses lila hier [unhörbar] Taste nach unten hält. Es ist die Heldengrafik ausgewählt. Halten Sie die O-Taste und ziehen Sie es über und ich werde es bewegen, so dass es perfekt ausgerichtet ist. Großartig. Es gab ein leichtes Problem, bei dem die Heldengrafik oberhalb der Navigationsleiste steht. Alles, was wir tun müssen, ist, um die Reihenfolge dieser ändern, wie klicken Sie halten und ziehen Sie den Helden unter dem Nav. Okay, also habe ich meinen Desktop und meine mobile Ansicht mit meinen zwei Rechtecken. Diese Rechtecke werden als Struktur oder div-Tags für meine Website verwendet. 24. Produktionsvideo – so strukturierst du dein Webdesign: In diesem Video haben wir uns die Grundlagen unseres Rechteck-Werkzeugs angesehen , um die strukturierten Boxen für unsere Website zu erstellen. Was wir jetzt tun werden, ist ein bisschen eine Sitzung zu machen, in der ich durchgehe und alle Boxen hinzufüge. Sie können uns mit doppelter Geschwindigkeit beobachten oder überspringen, wenn Sie wollen. Was ich tun werde, ist, dass ich meine erste Box hier habe. Was ich tun werde, ist, diese Box immer und immer wieder für die verschiedenen Bereiche zu duplizieren . Ich werde meinen Trick verwenden, um es auszuwählen, Hero Graphic. Ich halte Alt gedrückt und ziehe es nach unten. Ich werde Shift zur gleichen Zeit halten, und es schnappt es den ganzen Weg darunter. Mit dieser Grafik hier werde ich das hier nennen. Ich werde dieses Tool hier öffnen, mein Eigenschaftenfenster. Ich werde mir das hier aussuchen. Das ist eine Art pfirsichige Farbe. Dieser hier, der wird die Box genannt werden - Wer wir sind. Ich füge Box an der Vorderseite hinzu, nur um es aus der Ferne klar zu machen. Was? Ich schaue mir die strukturierten Boxen an. Ich werde das Gleiche mit diesem machen. Ich ziehe ihn darunter, und er befindet sich im Eigenschaftenfenster. Hier ist das dunkelviolette, und hier ist die Kiste. Hier ist die Service-Box. Ich werde ihn festhalten, ihn runterziehen und er wird die Box für unser Portfolio sein. Wir sind vom Rand unserer Seiten ausgegangen. Lasst uns zuerst die Farbe von ihm ändern. Hier ist diese Farbe. Jetzt sind wir an den Rand gelaufen. Was wir tun können, denken Sie daran, unsere Zeichenfläche Werkzeug zu greifen, stellen Sie sicher, dass wir auf der Desktop-Version auswählen, und ich werde es nach unten ziehen. Nun, wie weit man es nach unten ziehen kann. Ich werde das ein bisschen zoomen. Wer weiß es am Anfang? Erst wenn du all deine Inhalte drauf hast, weißt du, wie groß es sein wird. Ich werde es für den Moment überdimensionieren, es schön und groß machen. Dann gehen Sie zurück in mein Move-Werkzeug, Ich werde auf ihn klicken, ist die Box Portfolio, und ich werde halten Sie die Alt-Taste gedrückt, ziehen Sie es unter. Eigentlich wird dieser Brocken hier ein großer weißer Bereich sein. Es muss meine Leute oder Team-Bereich haben. Das letzte Stück hier wird das Grün sein. Dieser hier wird mein Kontaktformular genannt. Dann einfach darunter, ziehen Sie es nach unten, ich werde haben, diese letzte ist eine der nicht-offiziellen Farben, wie ein dunkelgrau für meine Fußzeile. Nun, es ist ein wenig groß, also was ich als mein Transformationswerkzeug verwenden werde, also Befehl T, erinnere dich. Kommando T. Ich werde es etwas kleiner machen. Das wird meine Fußzeile sein. Jetzt habe ich eine grobe Vorstellung von der Seitenhöhe. Ich werde es mit dem Zeichenflächen-Tool sichern, klicken Sie hier oben, und es sollte nach unten rasten. Zurück zum Verschieben-Werkzeug, wenn Sie fertig sind. Jetzt, da ich einen Desktop fertig habe, könnte ich alles auf meine mobile Version verschieben und anfangen, diese zu legen. Was ich finde, ist es viel einfacher, an einem zu arbeiten und dann, wenn Sie einen abgeschlossen haben und alle Fehler aus einer der Ansichten gesehen haben, ist es, dann mit dem nächsten zu beginnen, sagen wir, und dann in auf Mobilgeräte. Nun, viele Leute, die zuerst mit Handy beginnen, wenn das die Priorität für ihre Website ist, ist es definitiv der Weg zu gehen. Es gibt definitiv noch viel mehr Herausforderungen, um alles für Mobilgeräte vorzubereiten. Für mich werden in erster Linie meine Websites als Desktop verwendet, also beginne ich mit dem Desktop. 25. Textfelder in Photoshop, die sich anpassen oder fixiert sind: In diesem Video werden wir uns den Typ oder den Text ansehen. Das erste, was wir tun müssen, ist das Type-Werkzeug zu greifen und dann werden wir auf ein paar Dinge achten. Es gibt einige Formen, in die sich der Cursor ändern kann, auf die Sie sich bewusst sein möchten. Standardmäßig ist es dieses Quadrat hier, und das ist großartig. Beobachten Sie, was mit dem Cursor passiert, wenn ich vor diese Box komme , weil ich das Hieroglyphen hier ausgewählt habe, es ändert sich in den Kreis um ihn herum. Diese andere, die die gepunktete Linie ist. Nun, das ist wirklich das, was ich suche. Ich möchte ein bisschen Zecken auf einer Ebene selbst ablegen, an der ich mich bewegen und arbeiten kann. Wenn ich auf diese „Ebene“ klicke, wird es mein Rechteck, mein Hieroglyphen, in eine Formbox verwandeln, damit es hineinpasst. Sieh dir das an. Wenn ich auf „Inside“ klicke, wird es weiter tippen, und es wird die Kanten dieser Box verwenden, was ein wenig verwirrend sein kann, wenn Sie neu sind. Um rauszukommen, werde ich „Flucht“ drücken. Das wird meine SMS loswerden. Also, was ich tun möchte, ist entweder etwas anderes ausgewählt zu haben, wie die Navigationsleiste, dann ist es nichts ausgewählt oder einfach den Typ niedriger eingeben und ihn einfügen, wenn Sie fertig sind. Also, was ich tun werde, ist nur die gesamte Kunsttafel ausgewählt zu haben , und das lässt mich überall mit dem quadratischen Cursor tippen, und ich werde Ihnen zwei Möglichkeiten zeigen, Text anzuwenden. Eins ist ein erweiterbares Textfeld und eines ist eine feste Breite. So erweiterbar bedeutet, dass ich etwas eingeben kann und du wirst sehen, dass es für immer weitergeht. Es wird sich einfach weiter nach rechts dehnen. Nun, eine andere Möglichkeit, es zu tun, werde ich „Escape“ auf meiner Tastatur drücken, wird diesen Text loswerden und ist, klicken Sie auf „Halten“ und ziehen Sie diesen Text. Was das bedeutet, ist, dass es die Breite fixiert. Das bedeutet, dass, wenn ich an die Kante komme, es auf zwei Linien oder so viele Linien brechen wird, die passen. Das sind also die beiden Boxen, die wir verwenden werden, wenn wir mit Photoshop arbeiten. Also das erste, das wir tun werden, ist, dass ich wieder „Escape“ drücken werde. Ich werde einmal klicken und ich werde unser Logo eingeben. Das wird das Kapital B-Y-O-L sein. Ich werde es mit meinem Verschiebungswerkzeug in die Navigationsleiste hier verschieben. Wenn Sie es dort versteckt finden, wo Sie es nicht sehen können, liegt es wahrscheinlich daran, dass es sich auf einer niedrigeren Ebene befindet. Um die Ebenen zu verschieben, klicken Sie auf „Halten“ und ziehen Sie sie über die gewünschte Position. Um die Schriftart zu ändern, ist es schön und einfach. Vergewissern Sie sich, dass Sie sich auf das Textwerkzeug befinden. Vergewissern Sie sich, dass Sie sich auf Ihrem Type-Layer befinden und spielen Sie mit den Schriftarten hier herum. Wenn Sie jetzt nicht auf Pixel gesetzt und auf Punkte festgelegt sind, müssen Sie dies möglicherweise in Ihren Einstellungen ändern, die in einem früheren Video enthalten sind. Es gibt also zwei Möglichkeiten, es zu tun. Sie können die Dropdown-Liste verwenden und einige dieser Größen auswählen. Nun, ich finde sehr nützlich ist, dieses hier zu ziehen, können Sie sehen, ob ich hier über diesem Symbol schwebe, klicken Sie darauf, ziehen Sie es rechts oder links, Sie können die Schriftart ändert sich je nachdem, wo Sie ziehen. Rechts, um höher zu gehen, links, um tiefer zu gehen. Nehmen wir an, ich werde 40 für den Moment auswählen, Sie können es eingeben. Also sagen wir, ich wähle 40 Pixel im Moment, und ich werde das Verschiebungswerkzeug verwenden und es hier verschieben. Um die Farbe des Textes zu ändern, werde ich sicherstellen, dass ich auf meinem Type-Werkzeug bin, ich stelle sicher, dass ich auf meiner Ebene bin, die ich ausgewählt habe, hier ist meine Type-Ebene, und hier oben ist, wo die Schriftfarbe ist. Ich klicke darauf, ich klicke auf „Halten“ und ziehe diese herum, um die gewünschte Farbe auszuwählen. Ich will weiß, also ziehe ich es den ganzen Weg in die obere linke Ecke, du kannst sehen, dass ich es vorbei gezogen habe, wo es hingehen muss, damit es mehr in der Ecke dort zusammengefügt wird. Definitiv auf weiß gesetzt, fff. Klicken Sie auf „OK“. Wenn Sie eines Ihrer speziellen Farbfelder verwenden möchten, klicken Sie auf diese und hier sehen Sie die Pipette erscheint und er wird die Farbe auswählen, die Sie aus den Mustern benötigen. Ich gehe zurück und wähle Weiß aus und klicke auf „Okay“. 26. So erstellst du Web-geeignete Schriftarten über Google Fonts: Das nächste, was wir tun werden, ist, unsere Schriftarten zu ändern. Standardmäßig hatten Sie beim alten Webdesign nur einige grundlegende Schriftarten zur Auswahl, wie Arial, Georgia und Times. Was wir jetzt aber tun können, ist, dass wir jetzt eine große Auswahl an Schriftarten auswählen können. Es gibt ein paar Methoden, um es zu tun. Wahrscheinlich die häufigste zu tun ist etwas namens Google Fonts und das ist, was wir hier tun werden, weil es schnell ist, es ist einfach, es ist kostenlos. Sie können auch Typekit, Adobe Edge Web Fonts oder Squirrel Fonts verwenden. Es gibt viele verschiedene Arten von [unhörbaren] Schriftarten sowohl auf Ihrem Desktop als auch auf Ihrer Website. Das große Ding zu wissen ist, dass nicht alle Schriftarten, die Sie auf Ihrem Computer haben , konvertieren und in der Lage sein, online verwendet werden. Der Weg zum Überprüfen besteht also darin, einen Dienst wie Google Fonts zu verwenden , um eine Schriftart zu finden, die Sie verwenden möchten. Also lasst uns das machen. Lassen Sie uns zu Google-Schriftarten wechseln. So google.com/fonts. Google hat eine ganze Menge kommerzieller Verwendung Schriftarten, die wir verwenden. Was ich tun werde, ist, dass ich nach einer Schriftart suchen werde. Also werde ich Vorschautext von BYOL verwenden, weil das die Schriftart ist, nach der ich suche. Ich gehe durch und wähle eine Schriftart aus. Nun werde ich Roboto als meine Schriftart für Textkopien verwenden. Es gibt noch einen Roboto Slab, den ich für meine Überschriften verwenden werde. Um diese Webschriftarten auf Ihrem Desktop über Photoshop verwenden zu können, die sie später auf Ihrer Website verwendet werden können, müssen Sie eine auswählen, klicken Sie auf „Zur Sammlung hinzufügen“. Ich werde eine andere Schriftart verwenden. Ich werde Roboto hier eingeben. Es gibt eine andere Schriftart namens Roboto Slab, die ich verwenden möchte, und ich werde das zur Sammlung hinzufügen. Also habe ich zwei hinzugefügt, die normale Roboto und diese Roboto Platte. Nun, was wir tun werden, ist auf „Verwenden“ zu klicken. Nun, lassen Sie uns einfach die Grundlagen auswählen, die normale Version. Was ich will, ist, dass ich eine leichte Version möchte und ich möchte eine kühne Version. Ich hätte diese hier gerne, eine leichte Version. Eine leichte Version und eine kühne Version. Je mehr Schriftarten Sie hinzufügen, können Sie alle diese hinzufügen und herunterladen. Das ist völlig in Ordnung, während Sie an Ihrem Photoshop Mock up arbeiten. Aber was passieren wird, ist, wenn sie alle auf Ihrer Website verwendet werden müssen, wird es die Seite ein wenig langsam laden. Wie Sie hier genau hier sehen können, gibt Google mir einen kleinen Geschwindigkeitszähler, wissend, dass der eine ist, den ich habe, im grünen Bereich ist, da er schnell genug geladen wird. Wenn Sie anfangen, orange zu werden, wird es es verlangsamen, und rot ist viel zu viele Schriftarten, die für eine Seite heruntergeladen werden, und es wird sich auf die Ladezeit Ihrer Seite zu stark auswirken. Sobald Sie sie haben, was wir tun werden, ist dass wir sie herunterladen, um sie auf unserer Maschine zu verwenden. Um das zu tun, da ist dieser kleine Pfeil oben hier. Hier ist ein kleiner Download-Button. Ich werde diese Sammlung als Zip-Datei herunterladen, und ich werde sie auf meinem Desktop kleben. Nun, für euch, wenn ihr mitverfolgen wollt, habe ich schon die Schriftarten bereit für euch und schon in den Übungsdateien heruntergeladen. Laden Sie also die Übungsdateien herunter und Sie sollten sie im Schriftartenordner finden. Um nun die Schriftarten auf Ihrem Computer zu installieren, hängt es davon ab, ob Sie sich auf einem Mac oder PC befinden. Im Wesentlichen sind sie die gleichen. Wenn Sie einen modernen PC oder einen modernen Mac haben, doppelklicken Sie einfach auf die Schriftarten und sie werden installiert. Das ist also die Schriftart, die ich gerade von Google Fonts heruntergeladen habe. Wenn Sie nach den gleichen Dingen suchen, sind sie alle hier drin, in Ihren Beispieldateien, wenn Sie nicht die Mühe machen möchten, diese herunterzuladen. Ich werde auf die Zip-Datei doppelklicken, sie öffnet sie. Hier ist mein kleiner Schriftartenordner und hier die beiden Schriftartengruppen. Ich werde das runterwirbeln. Was ich tun möchte, ist, dass ich alle diese auswählen werde, und ich werde auf sie doppelklicken. Dann klicke ich auf „Installieren“. Mein kleiner Mac wird alle diese Schriftarten hier installieren. Könnte jetzt mit einem Fehler kommen, nur um zu sagen, dass die bereits installiert, weil ich es vorher vor diesem Tutorial getan habe. Deiner wird sie nicht haben. Schließen Sie meinen Schriftartenordner. Ich werde dasselbe für Roboto Slab tun müssen. Wählen Sie alle diese aus, doppelklicken Sie darauf, und sie werden alle installiert. Jetzt, auf einem PC, ist es ein wirklich ähnlicher Prozess. Wenn Sie sich nicht sicher sind, wie Sie sie auf Ihrem Computer installieren, Sie mir entweder eine Nachricht oder haben ein wenig Google und sehen, wie Sie sie auf Ihrem Computer installieren können. Lassen Sie uns jetzt einen Blick in Photoshop werfen. Das Gute an Photoshop ist, dass Sie es nicht neu starten oder Ihren Computer neu starten müssen , oder so etwas, Photoshop wird Ihre neuen Schriftarten abholen. Sie können hier sehen, ist meine Roboto-Schriftarten, und sie sind bereit, in meinem Design verwendet zu werden. Da wir Google Fonts verwenden, ist es eine Schriftart, die wir am Ende online für unsere Website verwenden können. 27. Platzhaltertext mit Lorem Ipsum: Dieses Video schauen wir uns etwas an, das Lorem Ipsum genannt wird. Die ganze Zeit, wenn Sie eine Website entwerfen, der Text vielleicht nicht geschrieben, oder er wird gleichzeitig geschrieben. Es ist ziemlich oft müssen Sie Dummy-Text oder Platzhalter Text. Was die Leute dazu neigen, ist etwas namens Lorem Ipsum zu verwenden, und es ist in Photoshop integriert, damit wir das hinzufügen können. Ich werde auf meinem Desktop und in der Umgebung zoomen. Was ich tun werde, ist, dass ich in eine Box mit fester Breite legen werde, und ich möchte, dass es meinem Spaltensong entspricht, und ich gehe zu „Ansicht“ und schalte meine „Show“, „Guides“ ein. Verkleinern Sie ein wenig. Ich wollte vielleicht vier davon in der Mitte erweitern, vielleicht sechs. Ich werde das Typwerkzeug greifen, und klicken Sie dann auf Halten und Ziehen. Ich werde ein Typfeld hinzufügen, das sechs meiner Spalten umfasst. Ich werde eine geeignete Schriftgröße und vielleicht 16 Pixel auswählen. Was ich tun möchte, ist zu „Type“ gehen und ich gehe zu „Paste Lorem Ipsum“. Im Wesentlichen ist das, was es tut, nur in einem verwirrten Stück lateinischer Wörter abgibt. Es gibt tatsächlich lateinische Wörter, aber sie bedeuten nichts im Fluss von Texten dort. Es ist eine gute schnelle Möglichkeit, viele zusätzliche Texte abzulegen. Was Sie jedoch bemerken werden, ist, dass die Box über sechs ist. Es bedeutet, dass es mehr Texte ist ein wenig freundlich, ein wenig plus Sie können nicht wirklich unten in der unteren Ecke sehen hier. Aber wissen Sie, wenn ich das lösche, können Sie sehen, dass es viele zusätzliche Sachen über den Rändern gibt. Je nachdem, wie viel Sie benötigen, müssen Sie möglicherweise einige von ihnen löschen. Sie können nicht wirklich in einem bestimmten Betrag abladen, es wird nur in einem vordefinierten Betrag abgelegt. 28. Produktionsvideo – so fügen wir unseren kompletten Text hinzu: Dies ist ein Prozessvideo, also werde ich durch gehen und beginnen, meine Website zu stylen. Zunächst einmal die Bring Your Own Laptop Ebene hier, das Logo. Sie haben ein Logo, offensichtlich werden Sie im Firmenlogo dimmen.. Was ich tun werde, ist, dass ich diesen Kerl neben dieser Kolumne hier sitzen lassen werde. Nun, wenn Sie die Dinge bewegen und es versucht, zu viele Dinge schnappen, es auf die andere Führung dort in Ordnung geschnappt, können Sie Ihre linke und rechte Pfeiltasten auf Ihrer Tastatur nur ein Tippen Dinge entlang und sie an der richtigen Stelle. Ich werde mir eine Schriftart aussuchen. Wählen Sie die Ebene aus, und greifen Sie auf das Typenwerkzeug. Ich werde meinen Roboto benutzen. Ich werde die Platte verwenden, ich werde die fett Version dafür verwenden. Wie groß ist die Schriftgröße? Es gibt keine garantierte Schriftgröße. Ich werde dieses hier benutzen, tippe es ein wenig mit meinen Pfeiltasten nach unten. Jetzt werde ich mir das Hinzufügen meiner Navigationsleiste ansehen, die hier drüben ist. Ich werde das Typwerkzeug greifen, ich werde es bekommen, so dass es sich überspannt. Wir haben viel Platz, mit dem wir arbeiten können, also werde ich es bekommen, damit es diese Spalte den ganzen Weg lang überspannt. Wie viele sind das? Ungefähr neun Säulen. Hier drinnen werde ich ein wenig zoomen und ich werde nach Hause tippen. Wenn du wie ich deinen Text nicht sehen kannst und ihn verschwunden ist, liegt das daran, dass die Schriftart wirklich groß ist. Erinnerst du dich an die Schrift von der letzten Sache, die wir getan haben? Deswegen expandiere ich es hier draußen. Hier, da ist er. Aber wenn er klein ist und Sie ihn nicht sehen können, weil das Textfeld zu klein ist, erweitern Sie einfach das Feld aus, wählen Sie den gesamten Text aus und machen Sie es zu einer angemessenen Größe. Ich werde meine auf 12 setzen, eigentlich, vielleicht 16 Pixel für den Moment, und dann kann ich es wieder nach oben verschieben, damit ich es sehen kann. Für den Text hier werde ich Großbuchstaben verwenden. Dieser erste hier wird SERVICES sein, dann werde ich einen Raum zwischen ihnen setzen. Ich werde zwei Tabs zwischen meinen setzen. Der nächste wird PORTO sein, zwei Registerkarten. Nun, in Bezug auf sollte ich Tabs oder Leerzeichen verwenden oder sollten sie in separaten Boxen sein, es wirklich egal, weil dies nur ein visuelles ist. Wenn es um Webdesign geht, müssen sie richtig getrennt werden, aber im Moment liegt es an Ihnen, was Sie verwenden, um sie zu platzieren. Jetzt können wir vielleicht 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Ich werde das kopieren, wählen Sie es durch kopieren, damit ich weiß, dass der Abstand hier genau 10 ist. Dann werde ich TEAM verwenden, den gleichen Abstand einlegen, und dann werden wir einen KONTACTUS haben. Was ich auch tun möchte, ist, dass ich all diesen Text auswählen werde und ich werde es oben bilden, um links ausgerichtet zu sein , so dass es immer entlang dieses Spaltenrasters dort ausgerichtet ist. Schriftgröße ist in Ordnung, aber die Schriftart werde ich zurück zu unserem einfachen alten Roboto wechseln. Ich werde diesen Text hier auswählen, Roboto eingeben, und jetzt werde ich nur Medium für den Moment verwenden. Ich werde meine Gitter mit Command, Semikolon ausschalten. Um ein Gefühl davon zu bekommen, werde ich ein wenig verkleinern. Ich mag den Text nicht. Anstelle von Medium, werde ich die Lichtversion wählen. Ich mag das netter. Nun, das nächste, was wir uns ansehen werden, wir hier eine große Schlagzeile über diesem Stück Lorem ipsum setzen. Ich werde das Lorem ipsum in meinem Menü finden, es nach unten ziehen. Ich werde mein Typ-Tool verwenden. Ich werde eine Box mit fester Breite zeichnen, weil ich möchte, dass es hier drin sitzt. Selbst wenn Sie Textfelder herausziehen, sollten Sie die Raster verwenden, um Dinge auszurichten, indem Sie diese Spalten verwenden, nur dass es viel einfacher macht , wenn es um Entwicklungszeit geht. Was ist das hier? Ich werde sicherstellen, dass es zentriert ist. Das hier wird sein, lasst uns das großartig machen. Auswählen des Textes, machen Sie es eine schöne Größe. Wenn ich sage nett, passend für diese eine, eine schöne, große, super Grafik. Ich werde Roboto aussuchen, und ich werde die Platte benutzen. Ich werde Dünn für diesen hier verwenden. In Bezug auf die Farbe werde ich eines meiner Farbfelder verwenden, die ich verwende. Hier unten unten, werde ich diese Farbe hier verwenden. Wie es geht, mit ihm ausgewählt, Ich habe hier auf „Swatch“ geklickt und das hat die Farbe ausgeschaltet. Ich werde meine Guides ausschalten. Ich werde das runterziehen. Dieser Text hier, ich möchte, dass er auch zentriert ist. Ich werde gehen, um mein Typwerkzeug zu greifen, klicken Sie hinein, und ich werde Sie zentriert machen. Wenn Sie Probleme mit dieser Silbentrennung feststellen, können Sie hier auf dieses Symbol klicken, wodurch Ihr Zeichenbedienfeld geöffnet wird, Sie können zu Absatz wechseln und die Silbentrennung deaktivieren, wenn Sie Probleme haben mit Silbentrennung. Ich hasse Silbentrennung. - Wieder reinspringen. Sagen wir einfach, für dieses Stück Text es eigentlich nur drei Zeilen sein. Ich werde versuchen, den Texter dazu zu bringen, drei Zeilen für diese eine zu arbeiten, und ich werde ihn ein wenig nach oben bewegen, „Lasst uns Make“ runter nehmen. Eigentlich habe ich ein kleines bisschen vergessen, ist, dass ich hier einen schönen, großen Call-to-Action-Button hinzufügen werde. Ich gehe zu meinem Typ-Tool und ich werde einmal klicken, und diese wird aufgerufen werden die Mehr, ich habe ein Plus. Welchen Text werde ich auswählen? Ich werde es etwas kleiner machen, vielleicht etwa 30. Ich werde es viel schwerer machen, mutig. Ich werde es weiß machen, das Ding hier oben platzieren. Ich werde mein Rechteck-Werkzeug greifen. Es wird über diesem Kerl sein, aber wir können die Schichten in einer Sekunde ändern. Aber was ich tun möchte, ist, meine Guides einzuschalten, Kommando, Doppelpunkt. Ich werde das hier zwischen diesen beiden Mittelpunkten stecken lassen. Welche Farbe wird es sein? Ich wähle mein Grün aus. Ich möchte sicherstellen, dass More über diesem Rechteck liegt. Ich werde diesem Rechteck einen Namen geben und diesen einen BT nennen, also weiß ich, dass es ein Knopf ist. Dieser wird der More Button sein. Ich werde meinen More Text greifen, mein Bewegungstool packen und ihn bewegen. Denken Sie daran, wenn Sie nicht in die Zeile kommen können, verwenden Sie einfach den Cursor, um sie herum zu bewegen. Alles muss ein wenig nach oben bewegt werden. Um das zu tun, kann ich meine Befehlstaste gedrückt halten und ich habe bereits mehr ausgewählt. Halten Sie die Befehlstaste gedrückt, klicken Sie auf die Schaltfläche „Mehr“. Lasst uns diese Awesome und Loren ipsum machen. Das sind die vier Teile, die ich verschieben möchte, und ich werde klicken und ziehen Sie es nach oben. Denken Sie daran, wenn Sie unsicher sind, ob es an den falschen Punkten rastet, vielleicht können Sie einfach Ihre Pfeiltaste verwenden, nur um es nach oben zu tippen und tippen Sie es nach unten. Mach meine Guides aus. Wir sind fast da. Das More ist ein bisschen groß. Lasst uns meine More Ebene zurückgreifen, mein Type-Werkzeug greifen und es auf 24 drehen. Schön. Bewegen Sie es ein bisschen hoch, da gehen wir. 29. So passt du deine Seitenkannten an: Bevor wir in Bilder kommen, werde ich Ihnen zeigen, ich finde es schwierig, auf die genaue Messgröße zu arbeiten, die 690 Pixel breit. Genau das sollten wir auch arbeiten, aber ich muss einen kleinen Puffer an den Rändern sehen, ein bisschen Alterung, nur um zu sehen wie es ist, wenn es in einem größeren Bildschirm sitzt. Um dies zu tun, werde ich das Zeichenflächenwerkzeug greifen, das sich unter dem Verschieben-Werkzeug versteckt. Ich werde auf diese hier klicken, wo es sagt LG Desktop, und ich werde nach unten scrollen, bis ich in die Mitte komme, aber ich werde dies ein wenig ziehen. Ziehen Sie das ein bisschen. Es spielt keine Rolle, wie weit, denn was passieren wird, ist, wenn ich meine Guides wieder anschalte, wirst du den Guide sehen, wo sie sein sollten. Sie sind immer noch 960 breit, einschließlich der Polsterung auf der Außenseite. Das nächste, was wir tun müssen, ist, dass wir viele Boxen hier haben, die nicht die richtige Größe haben. Was ich tun werde, ist, dass ich nach unten scrollen und meine Nav Bar finden werde. Ich halte die Befehlstaste auf meinem Mac oder die Steuerungstaste auf einem PC und wähle alle Felder aus, die ich wechseln muss. Da ist die Fußzeile. Ich werde ziemlich viel verkleinern, damit ich alles sehen kann, und was ich tun werde, ist, dass ich meine transformierten Werkzeuge verwenden werde erinnern Sie sich an Befehl T auf dem Mac und steuern T auf einem PC. Dann ziehe ich die raus, um die Seiten aller erledigten Alt zu entsprechen, es wird beide Seiten gleichmäßig mit mir ziehen, okay. Stellen Sie einfach sicher, dass sie sich dort ein wenig über den Rand überlappen. Wenn Sie fertig sind, drücken Sie die Eingabetaste auf Ihrer Tastatur, und gibt uns nur ein bisschen mehr Atemraum. Ich werde unsere Guides ausschalten, was immer noch perfekt ist. Ich werde ein bisschen zu zoomen. Das wird mir nur einen kleinen Atemraum geben bevor ich mit der Arbeit am nächsten Teil anfange. 30. So findest du kostenlose Bilder für kommerzielle Zwecke: In diesem Video schauen wir uns an, woher wir Bilder bekommen können. Nun, wenn Sie Ihre Konzepte tun, könnte man sagen, dass Sie für sich selbst arbeiten und Sie haben kein Budget für bezahlte Bilder oder um einen Fotografen zur Arbeit zu bringen, können Sie kostenlose Bilder, kommerzielle Verwendung Stockbilder finden . Dies ist wahrscheinlich die beste Seite hier heißt es freeimages.com. Nun, wenn ich ein Bild von Ziegeln sagen will, habe ich es richtig buchstabiert? Hier finden Sie viele kostenlose Bilder für Ziegel. Jetzt musst du vorsichtig sein, dass diese hier drüben, na ja, nicht vorsichtig, diese hier drüben bezahlt sind. Diese sehen also immer sehr hübsch und sexy aus, aber diese werden von iStock heruntergeladen. Aber du musst bezahlen. Die Preise sind vernünftig, aber wenn Sie frei wollen, brauchen wir diese hier drüben. Was ich gerne tun, ist keine Relevanz, aber wahrscheinlich die meisten heruntergeladenen neigt dazu , diejenigen, die an die Spitze kommen, sind diejenigen, die besser geschossen, bessere Qualität, vielleicht diejenigen, die Sie vielleicht mehr verwenden möchten. Sie müssen sich einloggen, um sie herunterzuladen und zu kaufen. Sagen Sie, dass Sie das mit einem Ziegel-Look wollen. Ok. Sie können sie herunterladen Abhängig von der Größe, die sie ursprünglich hochgeladen wurden, können Sie sie herunterladen. Sie müssen sich also anmelden und herunterladen. Es ist kostenlos, sich anzumelden und es ist eine gute Möglichkeit, kostenlose Bilder zu erhalten. Nun, wenn Sie bezahlte Bilder wollen, ist iStock wahrscheinlich der beste Ort, um zu gehen. Es gibt viele Konkurrenten zu iStock. Adobe hat im Moment eine eigene namens adobe.stock, aber dieser hier ist ein echtes typisches für viele Leute. Bisher auf Ziegeln hier, werden Sie feststellen, dass die Qualität viel besser ist, Sie werden feststellen, dass die Auflösung ziemlich höher ist als das freie Bild. Jetzt sagen, ich will diese Ziegelarbeit hier, ich habe beschlossen, das ist der Hintergrund, den ich verwenden möchte. Es wird sich vorstellen, wie viele Kredite nehmen wird. Dieser hier wird mich drei Kredite kosten. Während sagen, wenn ich zu so etwas hier ging, ist dieser hier, den ich zu diesem hier ging, ein Kredit. Ok. Etwa C3 Kredite sind 24 Euro. Wenn Sie jetzt in den USA sind, ist der Euro im Moment ungefähr gleich, nicht genau, aber nahe genug zum Vergleich. Es gibt im Budget für die meisten kleinen Unternehmen. Also, um es einfach zu machen, habe ich eine Reihe von kostenlosen Bildern heruntergeladen , die Sie für dieses spezielle Tutorial verwenden können. Laden Sie diese also herunter, wenn Sie es nicht aus den Übungsdateien gemacht haben, und wir werden mit dem Import fortfahren. 31. Solltest du deine Bilder einbetten oder verlinken?: In diesem Video werden wir uns ansehen, wie man Bilder einbringt. Nun gibt es viele Möglichkeiten, Bilder aus verschiedenen Programmen einzubringen. Am einfachsten ist es, zu Datei zu gehen, und Sie haben diese beiden: Platzieren Sie Eingebettet oder Verknüpft platzieren. Jetzt werden wir Place Embedded verwenden. Es ist definitiv eine bessere Art zu arbeiten, wenn Sie neu im Webdesign sind oder neu im Design in Photoshop sind. Verknüpfte Dateien können sehr praktisch sein, wenn Ihre Dateigröße wirklich hoch wird. Sie neigen nicht dazu, super hoch zu werden, wenn Sie mit Webdesign zu tun haben, weil die Auflösung nicht riesig ist und einige der Effekte, die Sie tun, nicht viel Detail. Aber lassen Sie uns einfach einen kurzen Blick auf den Unterschied werfen. Rufen Sie Ihre Photoshop-Webübungsdateien auf. Ich werde dieses Bild öffnen, das Bildbücher genannt wird, und ich werde es hineinlegen. Er kommt rein, du kannst ihn ändern, ich lasse ihn genau so, wie er reinkam und „Return“ getroffen hat. Jetzt sehen Sie ihn in meinem Ebenenfenster, er nennt sich Bildbücher. Was aber passiert ist, ist, dass es in dieses Dokument gelegt wird und herumgetragen wird. Wenn ich jemandem mein Photoshop-Dokument schicke, kommt es zur Fahrt. Nun, wenn ich es anders mache, wenn ich zu Place Linked gehe, was passieren wird, ist, dass das Bild hereinkommt, es wird gleich aussehen, ich drücke „Enter“, ich habe zwei Bilder gleich. Sie werden sehen, dass sich das Symbol ändert, dieses hat ein kleines Verknüpfungssymbol. Es bedeutet nur, dass, wenn ich das jetzt, sagen wir, an meinen Designer oder meinen Webentwickler schicke , sie werden die Bilder nicht haben, es sei denn, ich schicke sie separat. Ich werde dieses Bild books.JPEG benötigen, um mitzusenden, während das eingebettete in der Datei stecken bleibt und es ein wenig einfacher zu teilen ist. Das andere Problem, das Sie für verknüpfte wie diese aufpassen müssen , ist, wenn ich jetzt auf meinen Desktop gehe und Bildbücher lösche, können Sie hier sehen, es gibt ein kleines Fragezeichen. Es bedeutet, dass, hey, ich flippe aus, weil ich das Bild hier drin verloren habe. Es kommt mit dem Fehler, der sagt: „Ich kann es nicht finden, ich weiß nicht, wo es ist.“ So ist es am Anfang ein bisschen einfacher, embedded zu verwenden. Der Grund, warum Sie verknüpfte Bilder verwenden würden, ist , dass, wenn Sie dasselbe Bild immer und immer wieder in vielen Dateien verwenden . Sie möchten nicht wirklich viele Kopien davon haben, die viel Dateigröße in Anspruch nehmen. Es kann auch sein, dass wir an wirklich komplexen Dokumenten mit vielen eingebetteten Bildern arbeiten, es kann wirklich langsam laufen. Wenn Sie einen schrecklichen alten Laptop haben, den Sie verwenden, ist das etwas, das Sie vielleicht in Betracht ziehen möchten. Im Moment werde ich diese Ebene hier löschen und die eingebettete Schicht belassen. 32. So verwendest du eine Schnittmaske: In diesem Video werden wir uns ansehen, wie man eine Clipping-Maske verwendet. Nun ist eine Clipping-Maske eine wirklich gute Möglichkeit, ein Bild zu beschneiden, um zu verwenden. Mal sehen, wie das Endprodukt aussehen wird. Es ist das quadratische Bild hier. Ich werde Ihnen zeigen, wie man das mit einer sogenannten Clipping-Maske macht. Als erstes schalten wir diesen Augapfel auf unserer Bildbuchebene aus, und was wir tun, ist, dass wir mit einem Rechteck beginnen. Ich werde meine Guides wieder anschalten, Command Colon. Ich will, dass es sich erstreckt, sagen Sie vier Führer hier. Ich möchte ein perfektes Quadrat sein, also was ich tue, ist, dass ich die Umschalttaste gedrückt halte, während ich es ziehe, und kannst du sehen, dass es die Höhe und Breite entlang sperrt. Ich werde es ziehen, so dass es über diese vier passt. Nun, es spielt keine Rolle, welche Farbe wir im Moment verwenden werden, denn Clipping-Maske spielt keine Rolle. Ich werde mein Move-Werkzeug verwenden und ich werde es ein wenig nach unten verschieben. Es ist in der Mitte meiner Box, und was ich jetzt tun möchte, ist, ich werde es einschalten und ich werde mein Bild wieder einschalten. Nun, mein Bild muss etwas mehr von einer geeigneten Größe für dieses Quadrat sein. Mit einem Layer-Selektor werde ich mein Transformationswerkzeug verwenden, Befehl T. Nun, Control T auf einem PC und ich werde die Umschalttaste an den Ecken gedrückt halten, um die Höhe und Breite zu sperren. Andernfalls streckt es es und verzerrt es. Ich werde die Umschalttaste nach unten benutzen. Ich bin nicht allzu besorgt, dass es hier perfekt sein wird, ich werde es für die Wirkung beschneiden. Ich werde eingeben, wenn seine Transformation abgeschlossen ist. Was ich tun muss, ist, dass ich sicherstellen muss, dass das Bild über meinem Rechteck liegt. Ich werde dieses Rechteck umbenennen und das nennen wir das Who-Bild, also meine Who Yeah Seite. Das hier unten, jetzt, was ich tun will, ist, diesen Kerl zu beschneiden, was das Bild über die Bücher auf den Platz ist. Um dies zu tun, ist der einfache Weg, wenn die Bildebene ausgewählt ist, halten Sie die Alt-Taste gedrückt. Kannst du dieses kleine Symbol hier mit der Box mit dem Pfeil sehen? Dies wird das obere Bild und das untere Bild drehen, und verbinden Sie sie zusammen und machen Sie eine Clipping-Maske. Sie können sehen, was in der Struktur passiert ist, hier in den Ebenen, und Sie können sehen, was hier passiert ist in meinem tatsächlichen Bild. Ich werde meine Guides ausschalten, um es hübsch zu machen. Das Schöne daran ist, dass diese Who-Box darunter und dieses Bild, sie sind tatsächlich getrennt, damit ich sie bewegen kann. Was ich tun kann, ist, sagen wir, dass die Box, die ich etwas anders zuschneiden möchte, und ich habe hier nicht ausgewählt. Sieh dir das an. Mit meinem Werkzeug „Verschieben“ kann ich es bewegen und Sie sehen, dass ich es bewegen und anpassen kann. Es ist wie ein kleines Fenster. Ebenso kann das Bild darunter bewegt werden, die Box kann bewegt werden, um zu finden, wohin wir gehen müssen. Nun, was Sie vorsichtig sein möchten ist, wenn Sie beide zusammen verschieben möchten, müssen Sie Befehlstaste gedrückt halten und auf beide klicken. Mit ihnen beide ausgewählt, kann ich sie bewegen. Nun, wenn du sie dauerhaft zusammen bewegen willst, nun, jetzt muss ich sie beide auswählen. Ist, können Sie mit der rechten Maustaste auf diese beiden. Nach dem ausgewählten und es gibt eine hier ist dies Link Layer. Sie sehen dieses Verknüpfungssymbol erscheint, bedeutet nur, dass, wenn ich, sagen Sie, meinen Hintergrund zurück ausgewählt, und dann gehen Sie zurück und klicken Sie nur auf einen dieser beiden Jungs, Sie können nur eine von ihnen ausgewählt sehen, sie beide kommen für die Fahrt, weil die miteinander verbunden sind. Wenn Sie die Verknüpfung aufheben müssen, klicken Sie mit der rechten Maustaste darauf, und hier steht die Verknüpfung von Layern aufheben. Ich werde meinen Link für den Moment verlassen. 33. So verwendest du Masken für abgerundete Ecken und Kreise: Dieses Video ist die gleiche Technik, aber ein etwas anderer Geschmack. Wir werden uns die Verwendung einer Clipping-Maske ansehen, aber mit Kreisen und abgerundeten Ecken. Nun, siehe unten unten, hier ist mein fertiges Beispiel. Ich mache es unten unten in diesem weißen Teil, wo ich die Fotos meines Teams habe. Was ich tun werde, ist, dass ich hier nach unten scrollen werde, indem ich meine Leertaste benutze. Ich werde mit meinem Befehl plus vergrößern. Langsam den Boden runter. Ich klicke auf das Rechteck-Werkzeug gedrückt halten. Klicken Sie, und halten Sie es gedrückt, bis ich zum Ellipsenwerkzeug komme. Nun, das Ellipsenwerkzeug, wenn ich darauf klicke und ziehe, wird es mir Ellipse geben, die überall hingeht. Wenn ich nun die Umschalttaste gedrückt halte, erinnere dich daran, ich die High-End-Breite auf eine Größe gesperrt habe, die ich brauche. Was ich tun werde, ist, dass ich meine Guides einschalten werde und das werde ich löschen. Ich werde eine zeichnen, die, sagen wir, drei Spalten überspannt. Ich werde Shift halten, runter und ich werde es bekommen, damit es zu diesen drei schnappt. Ich gehe zu meinem Move-Werkzeug, ich werde es ein wenig nach unten bewegen. Nun, es spielt keine Rolle, welche Farbe es ist, denn genau wie wir das letzte Bild gemacht haben, wird durch das Bild vertuscht werden. Gehen wir zu Datei und gehen Sie zu Platzieren Eingebettet. Wir greifen den Desktop, wir greifen Push-Up-Übungsdateien. Dieses Team 1, das wird das erste sein. Ich werde auf Place gehen. Nun, ich werde es so verschieben, dass es hier oben ist, und ich werde Shift halten, skalieren Sie es, bevor ich Enter drücke, nur um es auf die richtige Größe zu bekommen. Ich werde es ungefähr dort hineinschieben. Wir können die Größe danach ändern. Denken Sie daran, hier ist eine Ellipse, und diese wird Team Circle1 sein. Ich werde, denken Sie daran, halten Sie meine Alt-Taste auf einem PC oder Wahltaste auf einem Mac, und es wird sich den beiden anschließen. Wenn Sie mit der Ernte unglücklich sind, denken Sie daran, ich klicke auf diese, das ist Team-1, und ich kann meine Pfeiltasten verwenden, um es zu bekommen, wo ich will. Ich kann es mit meinem Kommando T. umwandeln. Drücken Sie die Eingabetaste Benutze meine Schlüssel, um es noch einmal zu tippen. So schneidet man zu einem Kreis. Ich werde schnell tun, wie Sie zu einem abgerundeten Ecken schneiden. Wenn Sie abgerundete Ecken verwenden, klicken Sie auf das Rechteck-Werkzeug oder das Ellipsen-Werkzeug, und halten Sie es gedrückt, und es gibt hier eine abgerundete Ecken genannt. Bevor Sie beginnen, wählen Sie einen Radius aus. Wenn Sie sich unsicher sind, machen Sie sich keine Sorgen, Sie können es danach ändern. Ich werde klicken und ziehen. Diese kleine Box hier erlaubt es mir, die Radiusecken zu ändern. Ich werde die Radiusecken ändern, um so etwas wie 30 zu sagen. Großes Durcheinander von abgerundeten Ecken. Dann kann ich ein anderes Bild einbringen. Ich kann zu Datei gehen, Place Embedded. Ich werde Team 2 mitbringen. Legen Sie es über die Oberseite, skalieren Sie es nach unten, drücken Sie die Eingabetaste. Denken Sie daran, die Alt-Taste oder Wahltaste gedrückt zu halten, je nachdem, ob Sie ein Mac oder PC sind, und es wird auf die abgerundeten Ecken Rechteck zugeschnitten. So schneidet man zu einem Kreis und einem Rechteck mit abgerundeten Ecken. 34. So erstellst du große Hintergrundbilder: In diesem Video werden wir uns ansehen, wie man ein Hintergrundbild erstellt. Nun neigen Hintergrundbilder dazu, ziemlich ausgewaschen oder verdunkelt zu werden. Im Moment ist es ziemlich stilvoll, und sie scheinen den ganzen Hintergrund zu füllen, indem 100% CSS dehnen und abdecken. Schauen wir uns das an. Ich werde meine Guides ausschalten, ich gehe zu Datei, Place Embedded, unter unseren PS Web Exercise Files, finden Sie diejenige, die besagt, Background-Brick-Building und bringen Sie diese. Jetzt in Bezug auf die Größe, wird es passen, aber es ist nicht ganz groß genug. Was ich tun werde, ist, dass ich es skalieren werde. Es in Photoshop zu skalieren ist eine schreckliche Sache zu tun. Aber ich werde Ihnen ein paar Techniken zeigen, um sich zu verstecken, wenn es nicht spekuliert. Das ist nicht, weil es ein ziemlich gutes Bild ist und es mehr auf etwa 120 Prozent skaliert, also wird es okay sein. Ich klicke auf die Eingabetaste. Das nächste, was ich tun möchte, ist, dass ich es clippen will, damit es hier auf diese lila Box abgeschnitten wird. Ich werde das hier überlagern, und ich werde feststellen, dass mein Hintergrund das Hero-Bild genannt wird. Was ich tun muss, ist, ziehen Sie es so, dass es über diesem Feld hier genannt Box-Hero Graphic. Ich werde es nach unten ziehen, skalieren, skalieren. Jetzt werden Sie feststellen, dass es ein bisschen schmerzhaft sein kann, um es zum richtigen Teil zu bringen. Was Sie tun können, ist, dass Sie diese hier zusammenbrechen können, wie diese Bibliothek, die ich seit einer Weile nicht benutzt habe. Ich werde auf die Registerkarte Bibliotheken doppelklicken, ich werde auf den Typ Farbfelder doppelklicken, nur dass meine Ebenen schön und groß sind. Ich kann an ihnen arbeiten und es ist einfacher, sie herumzuziehen. Mein Background-Brick-Building befindet sich über meiner Box hier auf Grafik, und dann werde ich die Wahltaste auf einem Mac oder Alt-Taste auf einem PC gedrückt halten, um es zu beschneiden. Was ich gerne tun würde, ist, dass, bevor ich das mache, ich werde das rückgängig machen, also ist es ein Schritt rückwärts. Ich werde diese Ebene ausschalten, und anstatt dass diese lila ist, werde ich sie schwarz machen. Mit diesem ausgewählt, gehe ich zu diesem Panel hier heißt die Eigenschaften, und ich werde schwarz aus meinen Farben auswählen. Ich werde das tun, denn wenn ich dieses anschalte, werde ich es tatsächlich ein wenig transparent machen, also beginnt es, die Farbe darunter zu zeigen. Früher, als wir Clipping Videos, Ich sagte, es spielt keine Rolle, welche Farbe die Boxen, weil Sie ein Bild oben verwenden , um es zu schneiden. Es spielt keine Rolle. In diesem Fall liegt es daran, dass ich dies etwas transparent machen werde. Ich werde Alt oder Option gedrückt halten, und es wird zu dieser Grafik hier zuschneiden. Diese Box hier, unser Grafik-Labor. Was ich aber gerne tun würde, ist, diesen etwas transparent zu machen. Drehen Sie die Transparenz nach unten, bis sie zu einem Punkt kommt, an dem ich anfangen kann , die Tics ganz klar darüber zu sehen. Es liegt an Ihnen, und es wird von dem Bild abhängen, das Sie verwendet haben und wie undurchsichtig Sie es machen, aber stellen Sie sicher, dass die grafische Farbe darunter schön solide schwarz ist, und es wird es durch zeigen. Offensichtlich kommst du runter auf Null. Das Bild ist vollständig durchsichtig und wir sehen die Box darunter, also werde ich es aufschneiden, damit es immer noch sichtbar ist. Was ich auch tun möchte, um diesen Hintergrund noch fantastischer zu machen, ist, dass ich es gerne ein wenig verschwommen machen würde. Es gibt viele verschiedene Möglichkeiten, den Hintergrund zu verwischen, weil ich nicht will, Ich mag den Effekt, das alte Backsteingebäude im Hintergrund zu sehen, aber ich möchte nicht wirklich in der Lage sein, Körnersamen zu lesen. Was ich tun möchte, ist Filter zu verwenden. Es gibt viele Dinge unter Blur. Es gibt eine ganze Weichzeichner-Galerie und es gibt eine weitere Weichzeichner-Galerie. Es gibt eine Menge von ihnen. Gaußsche Unschärfen sind wirklich beliebt. Ich benutze gerne diesen hier, der jetzt Field Blur genannt wird. Ich mag Field Blur hauptsächlich, weil es mir erlaubt, Unschärfe zu machen. Sie können sehen, es geht zu gehen und seine Unschärfe zu tun, Unschärfe auf Standard von 15 Pixel. Es ist wahrscheinlich ein wenig zu stark, also werde ich es auf etwas wie 10 zurückstellen. Es wird es neu zeichnen. Jetzt können Sie sehen, dass es da ist, ich kann sehen, was es ist, aber ich kann nicht anfangen, die Namen sehr gut zu lesen. Der Grund, warum ich das mag, ist, weil es diese kleine Option hier sagt Noise. Ich klicke auf Noise, nun, ich muss es hier erscheinen lassen, und ich werde auf Mount treten, und wenn ich rechts klicke, wird es ein bisschen verrückt, aber du würdest in der Lage sein zu sehen, was ich meine. Ich werde ein bisschen hineinzoomen. Siehst du, es ist dieser Geräuschhintergrund, also schalte ich Geräusche aus, ein, aus, ein. Es gibt uns etwas geringes Lichtgeräusch, das einige der glatten Tage unseres Lebens Effekt verbirgt , dass es am Ende geschieht. Wie viel Sie sich bewerben, liegt ganz bei Ihnen und Ihrem Image. Ich werde vielleicht nicht so viel anwenden, es ein bisschen abdrehen, 20 Prozent. Je nachdem, wie gut Ihr Computer ist, kann es eine Weile dauern, bis es neu gezeichnet wird. Wenn Sie fertig sind, müssen Sie hier oben klicken, wo „Okay“ steht. Das Schöne daran, diese Art von Methode zu verwenden, ist, dass es etwas ist, das in einen sogenannten Smart Filter verwandelt wird. Wir können es ein- und ausschalten. Sagen Sie, ein Kunde kommt zurück und sagt: „Ich mag es, aber es ist nicht verschwommen genug oder zu verschwommen.“ Was Sie tun können, ist, Sie können auf das Wort Blur Gallery doppelklicken, gehen Sie zurück und sanktionieren oder drehen Sie es ein wenig auf vielleicht sechs. Ich werde das Korn ein wenig auf 40 drehen und dann auf „OK“ klicken. Es ist völlig wiederverwendbar, wenn Sie die Technik verwendet haben, die wir in diesem Kurs hier gemacht haben. Nun, das ist, wie man einen fantastischen Hintergrund macht, wo wir ein bisschen Deckkraft verwendet haben , um durch die Box darunter zu zeigen, wir haben auch eine bessere Unschärfe und ein besseres Rauschen verwendet, um es in den Hintergrund zu schieben. 35. Produktionsvideo – Hinzufügen unserer Bilder: Willkommen beim Bildproduktionsvideo, in dem ich ein paar der manuellen Dinge oder monotone Dinge durchgehen werde. Ich habe meinen ersten Kreis. Was ich tun möchte, ist zwei weitere Kreise zu machen und dann möchte ich diese abgerundeten Ecken loswerden. Zuerst werde ich meinen Trick verwenden, indem ich auf die Ebene klicke, das ist mein Typ hier. Was ich tun möchte, ist, dass ich diese Schicht biegen möchte, eine abgerundete Eckschicht bekommen, ich habe mein Team 2. Jetzt möchte ich die gleiche Kreisgröße verwenden. Wenn ich dieses Team Circle1 und ich mit der rechten Maustaste darauf und gehe zu duplizieren. Ich nenne es Team Circle2, es wird es zerstören. Warum? Weil dieses Team circle2 zwischen dieser Clipping-Maske erschienen ist, die ich hatte. Es hat es auseinander gespalten und alles zerstört. Was ich tun muss, ist, den Kerl wieder nach unten zu bewegen und sie wieder nach oben zu verbinden, indem Sie die Alt-Taste auf einem PC oder Wahltaste auf demMac gedrückt halten die Alt-Taste auf einem PC oder Wahltaste auf dem und diese beiden erneut klicken, um meine Clipping-Maske zu erhalten. Nun, dieser Mannschaftskreis 2, und er sitzt hier ganz oben. Was ich tun werde, ist mein Verschieben-Werkzeug zu verwenden, halten Sie die Umschalttaste gedrückt, so dass es gerade gezogen wird, und ich werde es ziehen, also ist es ungefähr in der Mitte meines Dokuments. Mit der Mitte werde ich diese Ebene ausschalten, ziehen Sie in dieser Mitte. Ehrfürchtig. Großartig. Jetzt mache ich diesen Kerl wieder an und mache eine Clipping-Maske. Vielleicht halten Sie die ältere Optionstaste gedrückt. Ich werde dieses Top mit Control T skalieren . Ich werde es bekommen, damit er so viel wie möglich mit diesem beschnittenen Bild füllt. Das gleiche, um den Kreis zu duplizieren. Wieder das gleiche Problem. Wenn ich diesen Kerl dupliziere, klicken Sie mit der rechten Maustaste, duplizieren, ich möchte, dass es Team Circle3 ist. Es ist die beiden getrennt. Ich werde ihn wieder da raufschleppen. Ziehen Sie die beiden nach oben, Circle3. Ziehen Sie sie an den Rand. Ich werde mein nächstes Bild einbringen. Ich gehe zu Datei, Place Embedded. In meinen Übungsdateien heißt man Team-3. Bringen Sie das hier. Ich werde es unten skalieren, indem ich Shift gedrückt halte und es aufrichte. Drücken Sie Enter, wählen Sie eine Clipping-Maske, Bit rund, meine Tastatur. Das ist genau das Richtige für mich. Was Sie bemerken, ist, dass diese Jungs überhaupt nicht gesäumt sind, obwohl ich dachte, ich würde es tun, war es zwei Spalten auf der Seite, eine Spalte auf der Seite. Was mit passiert, ich versuche, es in drei zu brechen. Was ich tun werde, ist, dass ich meine Hilfskräfte einschalten werde, wo ist es? Hier unten unten unten sind meine hilfreichen Spaltenführer. Ich werde es in drei Spalten aufteilen, das werde ich einschalten. Sie werden feststellen, dass dies eine einfachere Möglichkeit ist, Dinge auszurichten , anstatt zu versuchen, sie zu zählen. Eine neue, wählen Sie diese Ebene, so Team-1 und Team-1 Kreis und Team-1 wird in die Mitte dieser gehen. Lassen Sie mich das hier benutzen. Teammitglied 2 und ich werden Teammitglied 3 greifen und sie in die Mitte der Ebene bekommen. Ich werde ihnen einen Typ hinzufügen. Eigentlich werde ich dich auswählen, du, du, du, du, ich werde sie ein wenig oben bewegen. Fügen Sie einen Typ hinzu, greifen Sie auf das Textwerkzeug. Ich werde dort auf Escape klicken, ich klicke einmal hier. Ich werde sicherstellen, dass es zentriert ist und ich werde meinen Namen eingeben, Daniel Walter Scott. Ich wähle den Text aus, mache ihn schwarz, klicke auf OK und verschiebe ihn mit dem Verschieben-Werkzeug ein wenig hinein. Verschieben Sie es um den Zoom, dann ist es in der Mitte von dort, und das wird schwarz sein. Das ist richtig. Die Größe, ich werde diese Ebene duplizieren. Ich werde diesen kniffligen Weg verwenden, indem ich mein Verschiebenwerkzeug verwende, die Alt-Taste gedrückt halte, klicke und ziehe es, und dann wirst du sehen, dass es ein Duplikat macht. Ich werde das ändern und ich bin der Gründer. Ich mache Kappen zu dem GRÜNDER. Ich werde es Roboto schaffen. Aber ich werde nur Regular benutzen. Größenweise, lass es uns ein wenig kleiner machen. Machen Sie es auf 17 runter. Ein bisschen oben. Als nächstes setzen Sie einen Text und setzen Sie sie auf Twitter-Adresse. @danlovesadobe. Eigentlich werde ich es in Kappen tun. Dieser hier wird der kühne sein. Schön. Ich möchte diese duplizieren, also benutze ich sie immer wieder. Ich werde alle drei davon schnappen. Ich halte die Alt-Taste auf meiner Tastatur gedrückt. Ich bin auf meinem Move-Werkzeug und werde es über ziehen. Halten Shift als auch, Shift danlove aber ein Finger Gymnastik. Was es bedeutet, dass es ein Duplikat dieses ganzen Stückes gemacht hat, können Sie sehen, dass es eine Originalkopie ist, das ist die neue. Ich werde das ändern und zu meinem Tag-Tool wechseln. Dieser hier, es ist John Smith, er wird sein, sich leicht hier bewegen, er wird vielleicht unser Entwickler sein, und seine Twitter-Adresse wird @johnsmith sein. Wieder, das gleiche für diese Dame hier zu tun. Ich werde alle drei dieser Typen schnappen, Alt gedrückt halten, hinüberziehen, zentriert. Sie ist definitiv nicht John Smith. Sie wird Jane sein, ich will es nicht Doe nennen, bedeutet, dass sie tot ist. Nennen wir sie Jane Smith, Jane sogar. Sie wird unsere Designerin sein, @janesmith. Der Text für die, Ich werde meine ausschalten, wir sind hier unten fertig, Ich werde meine Hilfreiche Spalte Guides ausschalten, vor allem nur die dritte dort. Als nächstes werden wir tun, ist es ein bisschen Portfolio hier. Es wird so aussehen mit vielen verschiedenen Bildern um dieses kleine Rechteck. meine Guides eingeschaltet sind, wird es helfen. Ich werde mein Rechteck-Werkzeug greifen. Ich möchte, dass meine Portfoliobilder in vollen Spalten enthalten sind. Ich möchte nur drei von ihnen jeweils ausgeben, es spielt keine Rolle, welche Farbe die Rechtecke haben, weil Sie Clipping Master die Bilder verwenden werden, aber es ist schmerzhaft, wenn sie die gleiche Farbe wie der Hintergrund haben. Ich werd es auf Rot umschalten. Verschieben Sie Ihre Hilfslinien nicht, ich möchte rückgängig machen. Wenn Sie feststellen, dass sich Ihre Guides bewegen und sie nicht sollten, haben sie eine Lock-Guides, die sich nicht bewegen. Ich habe mein erstes Rechteck. Anstatt sie nacheinander so zu machen, wie ich die Kreise gemacht habe, hatte ich das Problem mit den Kreisen, wo ich die Ellipsen immer wieder dupliziere und es brach meine Clipping-Maske. Ich werde es auf diese Weise etwas anders machen. Ich werde die Rechtecke duplizieren, bevor ich durchgehe und meine Bilder hinzufüge. Ich habe beide Bilder. Ich werde beide schnappen. Ich wünschte, sie gehen da rüber. Schnapp dir die. Lasst uns das schnappen. Lasst uns das letzte Stück schnappen. Schließen Sie es. Ich werde meine Bilder einbringen. Nennen wir diese, bevor wir zu weit kommen, mit welchen wir es zu tun haben. Das ist die Nummer 1 da, nein, das war Nummer 1. Dieser wird Portfolio 1 genannt, kopieren. Es wird Portfolio 2, Portfolio 3, Portfolio 4, Portfolio 5, Portfolio 6, Portfolio 7 und Portfolio 8. Um ehrlich zu sein, wenn ich alleine arbeite und ich diese Benennung nicht bis zum Ende mache. Ich tue es jetzt, um dir ein wenig leichter zu folgen. Aber oft habe ich als nur ein Rechteck Kopie 15 verlassen, wie ich mitmache. Ich werde ein paar Bilder bringen, ich werde zu Datei gehen und ich werde Place Embedded gehen. Ich werde Thumbnail 1 einbringen. Dies ist ungefähr die richtige Größe. Ich werde sie herunterskalieren. Geben Sie ein. Ich werde sicherstellen, dass er über Portfolio 1 steht und sie abklemmen. Wieder dasselbe. Eingebettet platzieren. Sie kommen auf die richtige Größe, ungefähr. Ziemlich. Ich werde sie über Portfolio 2 kleben, klappen Sie es. Bringen wir noch einen. Wenn Sie feststellen, dass es ewig dauert, Dinge zu tun , oder zumindest ziemlich eintönig und Sie wollen Abkürzungen. So Place Embedded ist etwas, das ich ziemlich viel benutze. Es wird bearbeiten, Verknüpfungen erstellen. Du kannst hier nicht hineingehen und sagen, ich hätte gerne diesen, der „File“ sagt. Dieser hier drin, der Platz Embedded sagt und eine Abkürzung machen. Ich werde Command Shift I gehen. Es ist bereits in Gebrauch, Ich wähle Inverse. Eigentlich mag ich das, also werde ich das nicht tun. Ich werde Command Option Shift E ausprobieren. Es wird bereits von Merge eine Kopie aller sichtbaren Ebenen verwendet. Ich benutze diese Abkürzungen nicht. Ich werde es akzeptieren. Geh einfach mit der Spitze von dem hier. Es bedeutet, dass ich jetzt Befehl Option Shift E gehen kann. Wir gehen zu meinem Place Embedded. Zusammenfassend zu was? Ungefähr die dritte. Damit Sie nicht einschlafen und Superboard bekommen, ist dies im Wesentlichen das gleiche über und über acht Mal. Ich werde weiterspringen, bis wir zu diesem letzten hier sind. Hier drüben. Jetzt ist es hier. Alles klar zurück auf reguläre Geschwindigkeit. Das ist das Ende dieses Produktionsvideos, in dem wir durchgemacht haben, wir haben einige Clipping-Maus gemacht, einige Texte hinzugefügt und uns auf die Geschwindigkeit gebracht. 36. So findest du kostenlose Symbole zur kommerziellen Verwendung für dein Webdesign in Photoshop: In diesem Video werden wir uns die Symbole ansehen. In diesem Video benötigen wir vier Symbole, die für unsere Dienste verwendet werden. Wenn Sie nach Symbolen suchen, sagen wir, in diesem Fall suchen wir nach kostenlosen Symbolen. Es gibt viele kostenlose Icons online. Oft ist es jedoch schwer, gute Sachen zu finden, wenn man nach ihnen sucht . Ich mag diese Seite hier namens iconfinder.com sehr, und diese Seite ist wirklich gut, um kostenlose kommerzielle Nutzung sowie kommerzielle Ikonen zu finden . Also werde ich in diesem Fall Kunst eingeben, was wir tun wollen, ist, dass wir es auf kostenlos umschalten wollen, und statt keine Lizenzierung, werden wir zurück zu keinem Back-Link, okay. Das bedeutet nur, dass wir es verwenden können und wir müssen keine Links hinzufügen, also können Sie offensichtlich einen Back-Link hinzufügen, es gibt ein bisschen mehr zur Auswahl und was ich tun werde, ist, dass ich diesen hier verwenden werde. Das Beste an Icon-Finder ist oft, wenn Sie eine finden, die Sie mögen, es ist Teil dieses größeren Satzes, das auch kostenlos ist. Ich werde diese Kamera benutzen, diese Desktopkamera, und ein paar andere. Nun, wenn Sie möchten, können Sie überspringen, und in den Übungsdateien habe ich vier Symbole, mit denen Sie beginnen können. Wenn Sie mit diesem spielen wollen, was Sie tun, ist Sie, sagen wir, wir wählen diese Kamera hier. Bevor Sie es herunterladen, was Sie tun möchten, ist wählen Sie eine Größe, die Sie wollen. Jetzt wähle ich gerne die größte Größe aus, die ich finden kann. Also, wenn ich es später für etwas anderes oder eine Supergrafik oder eine große Kachel für etwas verwenden muss, habe ich eine große Version davon. Also und dann zum Herunterladen, werden wir die PNG-Version verwenden und es auf Ihren Desktop herunterladen und dann in Photoshop importieren. Was ich für Sie getan habe, ist, lassen Sie uns zu Photoshop gehen und können die Bilder importieren, die ich bereits heruntergeladen habe. Also gehen wir zu Datei, Place Embedded, und es gibt Symbol 1, 2, 3 und 4. Also werden wir all diese einbringen. Also zuerst, ich werde den ersten platzieren. Okay, ich werde es nur in der Größe belassen, in der es kam, und drücken Sie die Eingabetaste. Der Grund, warum ich dies tue, ist, dass ich sie alle zusammen skalieren werde, also möchte ich sie alle auf der Seite, wähle sie alle aus und skaliere sie alle genau die gleiche Größe nach unten, und anstatt zu versuchen, es separat zu tun und zu versuchen, sie anzupassen. Also gehen wir zu Datei, Place Embedded, lassen Sie uns auf Symbol 2 bringen, drücken Sie die Eingabetaste. Datei, Place Embedded, Icon 3, drücken Sie Return. Datei, Platzieren Sie eingebettet, und lassen Sie uns die letzte einbringen. Toll, also habe ich hier vier Symbole. Sie können sie alle in meinen Ebenen sehen. Ich werde Befehl, wählen Sie alle diese oder halten Sie die Steuerungstaste gedrückt, wenn Sie auf einem PC sind, klicken Sie einfach einzeln. Nun, sie sollten sich zusammen bewegen und wir werden unseren Shortcut-Befehl T oder Kontrolle T verwenden, und ich werde sie alle auf die gleiche Art von Größe skalieren. Nun, bevor ich das mache, werde ich Escape treffen, und was ich tun möchte, ist, dass ich meine vollständige com-Anleitung sehen möchte , nur um ein Gefühl davon zu bekommen, welche Größe sie haben sollten. Der Führer ist an. Ich habe die vier Icons ausgewählt. Ich werde mein Transformationswerkzeug verwenden. Ich werde sie herunterskalieren, bis ich passe. Okay, sie passen über 1, 2, 3 Spalten, also über drei Spalten in vier kleinen Gruppen. In Ordnung, also werde ich ein wenig hinauszoomen. Ich werde sie im Grunde verteilen, nur um sie in eine raue Position zu bekommen, um loszulegen und dann die letzte. Der Weg, ein wenig Sinn in den Guides zu bekommen, worauf Sie achten werden, ist, sagen wir, ich wähle Symbol 1, ist, dass Sie feststellen, dass, wenn ich es herumziehe, können Sie bemerken, sehen, dass kleine blaue Linie, die erschien? Ok. Wenn ich es wieder und zurück bewegte. Wir suchen nach denen, sagen uns, dass es in der Mitte von etwas ist. Also werde ich das Symbol 2 greifen, drehen Sie es um, so dass es in der Mitte dort ist, weil es eine Tendenz hat , sich auf viele verschiedene Dinge im Dokument zu sperren, was Sie tun können, ist, wenn es weit weg ist, verwenden Sie einfach Ihre Pfeiltasten , um es entlang zu tippen, bis Sie das Gefühl haben, dass es ziemlich nah am Ende ist. Nun, was wir tun müssen, ist, dass sie in den Mittelpunkt stellen. Also werde ich alle diese Typen auswählen, einen, indem ich die Befehlstaste gedrückt halte. Es gibt tatsächlich vier davon, und ich habe diese Optionen an der Spitze hier können Sie sehen, ich kann sie an der Spitze ausrichten, sie entlang der Unterseite ausrichten oder ich kann sie entlang ihrer Zentren ausrichten, und das ist, was ich tun werde, richten Sie sie entlang ihrer Zentren. Das nächste, was ich tun muss, ist, sie zu färben. Also werden wir zuerst eine Farbe einfärben, damit wir zuerst das Symbol eins färben. Schalten Sie meinen Guide aus, zoomen Sie ein wenig hinein. Ich werde diesen Kerl färben. Ich werde diese Option hier unten verwenden, die als Ebenenstil bezeichnet wird, okay. Also mit dem Symbol eins ausgewählt, klicken Sie auf FX, und dann gehen Sie hinein und wählen Sie Farbe Overlay. Nun, Farbüberlagerung, im Moment, können Sie sehen, dass es es mit Grau überlagert. Was ich tun kann, ist, dass ich auf diese kleine Farbe klicken und ich werde eine meiner Farben aus meinen Farbbibliotheken auswählen. Jetzt hat dieser kleine Farbwähler nicht Ihre Farbfelder. Also, was ich tun werde, ist, dass ich oben hier sicherstellen werde , dass ich meine Farbfelder sehen kann, vor allem die drei, die ich importiert habe. Also die Grüns und diese Jungs, so dass, wenn ich grau klicke, kann ich mein Pipettenwerkzeug verwenden, um die Farbe auszuwählen, die ich will. Klicken Sie dann auf OK, klicken Sie erneut auf OK, und Sie können sehen, dass die Farbe überlagert wurde. Jetzt möchte ich den Farbeffekt auf alle verschiedenen Symbole anwenden. Es gibt verschiedene Möglichkeiten, wie Sie mit der rechten Maustaste darauf klicken und sagen, kopieren, Ebenenstil, und fügen Sie es dann auf die verschiedenen ein. Oder das ist ein netter einfacher Trick, ist, dass, wenn Sie Ihre Symbole sehen können, was besagt, ich kann halten und ziehen Sie es, ziehen Sie es einfach auf das Telefon. Ok. Ziehen Sie es auf die Kamera, und ich klicke und halte es gedrückt und ziehe es auf das Fernsehgerät dort. Großartig, das ist eine Möglichkeit, Symbole für unser Design einzubringen. 37. Produktionsvideo – Hinzufügen unserer Symbole: Es wird ein Produktionsvideo sein. Wir werden nur etwas Text unter unseren Icons hinzufügen. Ich werde mein Typwerkzeug greifen, klicken Sie einmal und stellen Sie sicher, dass es in der Mitte ist. Ich werde mir eine Farbe von Weiß aussuchen. Ich werde Schriftart oder Roboto fett auswählen, und die Größe weise, ich werde es bis zu stoßen, ich werde Ihnen zeigen, etwa 30 vielleicht. Der erste Service wird drucken, es wird alle Kappen sein. Das nächste Bit ist, dass ich mein Typwerkzeug schnappen werde. Ich werde ein bisschen Körperkopie darunter legen. Ich werde meine Guides öffnen, um sicherzustellen, dass ich über die Spitze gehe. Es wird gemustert und ein bisschen extra, und ich werde etwas Text hinzufügen. Denken Sie daran, wir gehen zu tippen, Paste Lorem Ipsum. Es wird jede Menge Lorem Ipsum da reinbringen. Wenn ich nun alle Lorem Ipsum auswählen und die Größe ändern möchte, wenn ich eine Box ziehe, leider, wenn ich die Größe dieses auf etwas wie 12 ändere, haben Sie nur diesen Teil ausgewählt. Was Sie tun möchten, ist ein dreifacher Klick, also 1, 2, 3, 4. Wenn ich sagte, dreifach klicken, meine ich vier Klicks, also 1, 2, 3, 4, packt es jedes Bit Text und es wird den Text greifen, den Sie nicht gut sehen können. Ich werde das auf 14 Pixel stoßen. Wir bringen es zu, sagen die Stammgäste. Wie viele Zeilen möchte ich in diesem Fall? Ich werde es aufstoßen, weil ich das Aussehen von drei Zeilen mag. Denken Sie daran, auch wenn ich hier mit meinem Typ-Tool klicke, werde ich meine Silbentrennung ausschalten. Klicken Sie dazu hier auf dieses kleine Kästchen. Klicken Sie auf Absatz, deaktivieren Sie Silbentrennung, und wir entfernen die Silbentrennung, die mir nicht gefällt. Was ich gerne mache, sind diese beiden Textfelder hier,]. Ich habe drucken gehen und Lorem ipsum ausgewählt. Ich werde die Alt-Taste gedrückt halten, meine Hilfslinien zuerst einschalten, meine Alt-Taste gedrückt halten und das Verschiebenwerkzeug verwenden, um eine Kopie herauszuziehen. Ich halte die Umschalttaste gedrückt, während ich sie ziehe, um sicherzustellen, dass sie hier perfekt zur Seite kommt. Ich werde das für all diese tun. Ich werde sie rüber ziehen. Ich habe vier Sets, und ich gehe rein und ändere es. Das hier heißt App Dev. Dieser hier wird Fotografie sein, das wird Video sein. Ich werde das Lorem ipsum verlassen, weil es sowieso nichts bedeutet. Schalten Sie meine Wachen aus, stellen Sie sicher, dass alles aufgestellt ist. Linien sind okay, Linien sind in Ordnung. Was ich tun könnte, ist, dass ich all die Lorem-Ipsums schnappen und sie einfach ein bisschen hochstoßen werde. Da gehst du. Es gibt alle vier von ihnen, und benutze meine Pfeiltasten nur, um sie zu tippen, damit sie ein bisschen beitreten. Was ich auch tun könnte, ist meine Symbole zu schnappen, ich habe Symbol 1, 2 und dieser andere Kerl, da ist er unter meinem Text. Ich mag es entlang der Basis. Glücklich genug. Das ist das Ende des Produktionsvideos. 38. So schaffst du ein sauberes Bild mit Gruppierung der Ebenen: In diesem Video werden wir uns die Verwendung von Layern ansehen. Jetzt werde ich langsam dokumentieren, was sicher überall in ein verrücktes Chaos von Dingen wird. Es wird ein wenig schwer sein, damit zu arbeiten, besonders wenn wir es jemandem schicken, sagen wir, wir entwerfen es und wir schicken es an jemanden, sagen wir, ist ein Entwickler und nutzt Photoshop nicht sehr viel und muss damit arbeiten, es kann für sie wirklich kompliziert sein zu verwenden. Es wird sogar ein bisschen zu kompliziert für uns zu verwenden. Was wir verwenden werden, ist etwas namens Layer-Gruppen. Nun ist Layer-Gruppen eine Möglichkeit, alles zusammenzufassen, und es lässt unsere Ebenen ein wenig aufgeräumter aussehen. Was wir tun werden, ist, dass wir mit unserer Gruppe unserer Navigation beginnen. Es gibt ein paar Tricks, die wir verwenden können, um alles zu finden. Was ich tun wollte, ist, dass wir diese Heldenbox hier benutzen. Ich werde einen kleinen Trick gebrauchen. Schalten Sie die „Automatische Auswahl“ ein. Automatische Auswahl ermöglicht es uns, einen Rahmen um alles hier zu ziehen, und es wird alles auswählen, was es kann unter dieser kleinen gepunkteten Linie. Sie werden feststellen, dass in meinem Ebenenbedienfeld hier unten alles ausgewählt wird, was es in dieser Ebene versteckt gefunden hat. Schalten Sie „Automatische Auswahl“ aus und geben Sie ihm ein Wackeln, nur um sicherzustellen, dass es alles hat, was wir brauchen, und nichts, was es nicht tut. Dann gehe ich zu Bearbeiten, Rückgängig oder Bearbeiten, Schritt rückwärts und lege es zurück, wo es war. Jetzt weiß ich, dass alles an der richtigen Stelle ist. Alles, was Sie tun, ist auf diese Schaltfläche „Gruppieren“ klicken. Photoshop ist ziemlich clever, und es klebt sie alle in einer netten kleinen Gruppe. Die Gruppe ist über unserer Navigation gelandet, aber das ist etwas, was wir später beheben können. Wir nennen das eine Box Hero. Das ist das hier. Ich schalte es im Moment aus. Das nächste, was ich tun werde, ist wählen Sie die Navigation. Ich werde meine „Auto-Auswahl“ einschalten, alles hier mitnehmen, und Sie werden sehen, dass es diese drei Elemente hier ausgewählt hat, was perfekt ist. Wenn ich „Auto-Select“ ausschalten und es wackeln lasse, nur um sicherzustellen, dass es alles hat, was ich will und nichts, was ich nicht. Drücken Sie die Schaltfläche „Gruppieren“. Nennen wir das eine Box Navigation. Ich werde ihn über diesen Kerl ziehen. Ich habe ihn hineingeschleppt. Also seien Sie vorsichtig, wenn Sie ziehen. Ich ziehe das, siehst du die kleine Linie, die draußen herumläuft? Das wird es in meine Heldenbox ziehen. Was ich tun möchte, ist tatsächlich über ziehen, und Sie werden den Unterschied sehen. Siehst du die kleine Linie, die zwischen ihnen erscheint, anstatt über ihnen? Das wird bedeuten, dass es gerade oben ist. Ich werde beide ausschalten. Jetzt werde ich wieder mein Werkzeug greifen und diese beiden Typen auswählen. Es hat alles ausgesucht, was ich brauche. Gruppieren Sie sie. Dieser wird Box heißen, und dieser war unsere „Wer wir sind“ -Box. Ich werde sie jetzt ausschalten. Wir machen das aus. Jetzt sind wir auf unserer Seite „Unsere Dienste“. Ich werde das gleiche Werkzeug greifen, Auto-Auswahl auf, wählen Sie sie alle. Ich mag es, sie auszuschalten. Geben Sie ihm ein Wackeln. Stellen Sie sicher, dass sie alles sind, was wir ausgewählt haben, nichts, was wir nicht tun. Dann gruppieren Sie sie. Das hier ist unsere Box Services. Automatische Auswahl an, schnappen Sie sich alle diese Jungs, und dann gruppieren. Nennen wir das eine Box, und diese wird es sein, Portfolio. Schalten Sie das aus. Das ist unsere Teams eins. Also alle diese auf. Schalten Sie es aus. Ein gutes Wackeln. Wir werden das hier zusammenfassen. Dieser wird „Team Box“ genannt. Team, großartig. Schalten Sie das aus, und wir sind auf nichts anderes dran. Wir haben unser Kontaktformular und unsere Fußzeile. Was wir tun werden, ist, dass wir diese auch in eine Gruppe setzen können, diese hier. Wenn es nicht in der Gruppe landet, können Sie auf Halten klicken und es in die Gruppe ziehen, wie ich es dort getan habe. Dieser wird Box-Kontaktformular genannt. Das letzte, wir werden es hier reinlegen. Wir ziehen es hinein. Dieser wird Box genannt werden, und das wird aufgerufen, Footer. Dreh das alles auf. Deaktivieren Sie die Layer mithilfe der Layer. Du wirst diesen Kerl sehen, ein kleiner einsamer Ranger hier, der ein Typenlayer ist, aber er heißt Schicht 1. Wenn es einen Typ-Layer gibt, der Layer 1 heißt, bedeutet dies, dass es einen Typ-Layer ohne Typ gibt. Eigentlich hat dieses Ding keinen Zweck in der Welt. Es ist etwas, das ich angefangen habe zu schreiben, und ich habe es nicht geschafft, es zu tun und vergessen und es dort gelassen. Dieser Typ hier ist ein einsamer Ranger, also taucht er nirgendwo auf. Wenn es hier ein Wort enthält, wird es ein Wort sein, das irgendwo in Ihrem Dokument versteckt ist, das Sie suchen müssen. In diesem Fall werde ich es löschen. Klicken Sie auf „Löschen“. Sie können jetzt sehen, dass ich alles durchgemacht und gruppiert habe, es wird viel einfacher zu arbeiten, besonders wenn wir anfangen, unser mobiles Design zu machen. Ich kann alles aktivieren, und was ich möglicherweise tun muss, ist mit der Ebenenreihenfolge zu spielen , abhängig davon, auf welchen Ebenen sie sich befinden. Ich werde meine hilfreichen Spaltenführungen ausschalten. Aber alles andere ist schön übereinander gestapelt, und wir sind bereit zu gehen. 39. So findest du schnell, was du brauchst, mit der Ebenensuchfunktion: In diesem Video zeigen wir Ihnen, wie Sie Ebenen ein wenig mehr verwenden. Jetzt wird es Zeiten geben, in denen Sie an einem Dokument arbeiten und wirklich etwas besonders auf dem Dokument finden möchten. Anstatt durch zu gehen und zu versuchen, es durch die Suchelemente zu finden, was Sie tun können, ist, dass Sie einige dieser Suchfilter verwenden können. Einige dieser Layer-Filter entlang der Spitze hier. Was Sie tun können, ist sagen, dass Sie alles in diesem Dokument finden möchten, das eingegeben wird, weil Sie sagen, dass Sie den Körper geändert haben, könnte aus irgendeinem Grund Schriftart von Roboto zurück zu Arial sein. Was Sie tun können, ist nur die Ebenen zu filtern, Sie sehen, dass diese nur den Typ haben, und was ich tun könnte. Klicken Sie auf die obere, halten Sie die Umschalttaste gedrückt, klicken Sie auf die letzte und gehen Sie hier in mein Textwerkzeug und ändern Sie sie alle in Arial. Ich wähle Arial mutig aus. Jetzt siehst du, dass alles jetzt Arial ist. Das ist eine nette einfache Möglichkeit, das zu tun. Ich werde das rückgängig machen, weil ich Arial nicht mag. Sie wollen also durchgehen und anfangen, mit den Farben zu spielen. Was Sie tun können, ist, können Sie auf diese hier klicken, es ist nur eine Form Ebenen. Alle unsere Rechtecke erscheinen. Angenommen, Sie haben eine Gruppe von Dingen, die einen Schlagschatten darauf haben, und Sie wollen gehen und den Schlagschatten ändern. Was Sie tun könnten, ist, dass Sie zu diesem gehen, zu einer Lösung gehen und dieses Drop-down-Menü hier verwenden und sagen, dass alles, was einen Schlagschatten hat, erschienen ist. Ich habe ein Ding mit Schlagschatten in diesem Fall. Ich habe nichts in meinem letzten Panel hier. Wenn Sie zu einem Punkt kommen, an dem Sie nicht bemerkt haben, dass Sie dies geändert haben oder Sie ein anderes Dokument geöffnet haben und dieser Ebeneneffekt auch angewendet wurde, können Sie den Schalter einfach dorthin drehen, um zu deaktivieren. Es geht wieder normal, und Sie können ein- und ausschalten, um zwischen der letzten Suche und allem wieder ein- und auszuschalten. 40. So benennst du deine Ebenen wie ein Profi: Eine der anderen netten Dinge, die Sie tun können, wenn Sie mit Ihrem Ebenenbedienfeld arbeiten, und Sie versuchen, Dinge bereit zu machen, um an Ihren Designer oder Entwickler zu senden. Möglicherweise finden Sie viele Male, in denen Sie viele Dinge haben, die als Rechteck bezeichnet ein oder geben Sie eins oder Feld zwei ein und sie sind nicht wirklich so nützlich für den Entwickler. Aber was Sie tun können, ist, lassen Sie uns auf unsere Symbole gehen , die unsere Dienstleistungen sind. Ich werde das aufmachen. Angenommen, Sie möchten anfangen, diese zu benennen, sagen Sie Symbol eins, drei und zwei. Es ist ein Video, Fotografie und unsere App. Wir gehen runter und machen den letzten hier unten. Eigentlich werden wir ihn für den Moment rausschleppen. Bringen wir ihn dazu, bei seinen Freunden zu sein. Was wir gekommen sind, ist eine nette kleine Möglichkeit, Dinge zu benennen. Andernfalls können Sie auf alles doppelklicken, um darauf zu gelangen , und Sie können Ewigkeit damit verbringen, es zu tun. Der Weg, dies zu tun, besteht darin, zwischen ihnen zu wechseln. Ich werde auf diese ein Doppelklick klicken, ich werde dieses Symbol Bindestrich nennen und ich werde dieses eine Video nennen. Ich werde Tab nach unten, Sie können Icon-Fotografie sehen. Anstatt auf jeden einzelnen klicken zu müssen, um es zum Laufen zu bringen, können Sie einfach zwischen ihnen wechseln, okay? Symbol-Bindestrich. Dieser wird App genannt werden, und dieser wird Icon Bindestrich Print genannt werden. In Ordnung. Nette kleine Abkürzung für die Benennung Ihrer Layer. 41. So gestaltest du ein Formular für deine Website: Hi. In diesem Video werden wir uns ansehen, wie man ein Formular startet. Formen sind im Wesentlichen nur eine Gruppe von Rechtecken. In diesem Fall werden wir ein Rechteck-Werkzeug verwenden. Wir werden eine Füllung Weiß ziehen. Nun, die große Sache, die Sie mit Strichen überprüfen müssen, ist, dass sie standardmäßig zwei Punkte gesetzt sind, was eher ein Druckbegriff ist. Was wir tun wollen, ist, dass wir ein Pixel, zwei Pixel oder drei Pixel machen wollen. Sie können es einfach dort eingeben, oben von dem, was da drin ist. Ich werde mein Rechteck zeichnen. Jetzt werde ich meine Guides einschalten, um sicherzustellen, dass sie in allem sind, und so habe ich es von diesem äußeren Führer, über die Mitte. Ich werde meine Guides ausschalten und dann einen Blick werfen und sehen, was ich denke, sind die Ränder hier. So können Sie hier sehen, es hat eine dunkelgraue Kante mit einem weißen Zentrum. Gefällt es mir? Ja, es ist in Ordnung. Ich werde etwas Text hinzufügen. Also werde ich das Type-Werkzeug greifen. Denken Sie daran, ich werde nicht in das Innere klicken , weil es dieses Rechteck in eine Box verwandeln wird, also ist das nicht wirklich, was ich will. Was ich tun möchte, ist hier unten zu klicken und das hier wird mein Name sein. Ich wähle alles aus und ich werde es Roboto machen. Ich werde es Roboto hell machen und ich werde es hier eine dunkelgraue Farbe machen. Gehen Sie zurück zu meinem Verschiebenwerkzeug, zoomen Sie hinein. Es ist eigentlich, er ist groß, also werde ich es auf 20 zurückstellen und es einfach da drin sitzen lassen. Jetzt, Raster sind wieder eingeschaltet, ich werde sowohl den Namen als auch das Rechteck auswählen. Eigentlich wird das mein Formularname sein, Kleinbuchstaben. Ich wähle beide aus und halte meine „Alt-Taste, meine Wahltaste “ gedrückt und ziehe sie nach unten. Ich werde mir drei davon geben. Dieser wird Name sein, dieser wird E-Mail sein und dieser hier wird Telefonnummer sein. Ok. Ich werde sie alle dazu bringen, sich auf der linken Seite zu stellen. Also werde ich Telefon, E-Mail und Name ausgewählt haben und ich gehe zurück zu meinem Verschiebungstool und dann kann ich dieses hier verwenden, was linke Kanten ausrichten soll, sie sollten sich aufstellen. Okay, ich werde eine der Schachteln machen. Ich gehe zum Rechteck-Werkzeug und stelle sicher, dass alles noch gesetzt ist. Ich komme zurück zu meiner vollen Farbe der weißen Box, es wird hier anfangen und es wird bis zum Ende meiner Telefonbox gehen. Ich werde einen dieser Jungs schnappen, vielleicht Telefon, eigentlich Namen, weil es aufgereiht ist, halten Sie meine Alt-Taste gedrückt und ziehen Sie sie über die Verschiebung gedrückt. Das ist dahinter, wo ich es brauche, also ziehe ich es nach oben und ziehe es ein wenig zurück. Eigentlich werde ich dies zuerst ändern und ich werde diese eine Nachricht aufrufen, Werkzeug bewegen und es entlang bewegen, so dass es dort oben ausgerichtet ist. Versuchen Sie, alles zu benennen. Also habe ich diese Box, die Form E-Mail ist, diese ist Form Telefon und diese hier wird Form Nachricht genannt. Als Nächstes werde ich eine Schaltfläche zum Senden hinzufügen. Also wird mein Submit-Button nur ein weiteres kleines Rechteck sein. In diesem Fall geht es hier runter. Es wird drei von ihnen überqueren. Ich werde es eine Füllfarbe von dunkelviolett geben und ich werde mein Tab-Tool greifen, klicken Sie einmal hier unten. Ich werde das hier einreichen nennen. Ich werde es zum Roboter machen, aber ich werde diesen einen Roboto-Blatt fett machen. Eigentlich, was haben wir hier oben verbraucht? Hier werde ich mein Typ-Tool greifen und einfach hier klicken und zu überprüfen. Ich habe mein Werkzeug geschnappt, hineingerutscht, das hier war Roboto Slab 24. Also werde ich das Gleiche mit diesem machen. Schnappen Sie sich meine Art Werkzeug, klicken Sie in roboto Platte fett 24 und ich werde es eine Farbe weiß machen. Verschieben Werkzeug, ziehen Sie es nach oben, wenn es dahinter ist, nein, es ist an der richtigen Position. Schalten Sie meine Guides aus, schließen Sie das. Großartig. Es gibt eine kleine Kontaktbox und sie alle in ihre eigene Gruppe. Denken Sie daran, unseren Trick zu verwenden, wählen Sie automatisch ein, ziehen Sie ein Feld über alle von ihnen, verschieben Sie sie alle innerhalb der Kontaktbox. Drehen Sie das auf, auf ein Aus. Hier sind sie alle. Alles klar, und so verspottet man ein Formular in Photoshop. 42. So erstellst du einen Fußzeile für deine Website: In diesem Video werden wir unsere Fußzeile mock-up. Es ist ziemlich einfach, wir werden eine Gruppe von Symbolen einbringen, wir werden unsere Datei bekommen, „Place Embedded“ und ich habe dieses hier namens „Icons-Social“, es ist eine Illustrator-Datei. Ich werde das hier platzieren. Großartig, bewegen Sie es nach unten, ich werde es so platzieren, dass es sich mit einem der Spaltencodes hier angibt. Vergrößern Sie, um zu überprüfen, nehmen Sie es über, drücken Sie „Enter“, wenn ich bereit bin. Ich werde verkleinern. Was ich gerne tun würde, ist sicherzustellen, dass es an der richtigen Stelle ist. Ich werde sicherstellen, dass es in meiner Fußzeile ist. Alles andere, ich werde die gleichen Farben wie mein Symbol zu machen, also werde ich meine Symbole finden. Ich werde das Symbol hier auswählen. Was ich tun werde ist, klicken Sie mit der rechten Maustaste darauf und gehen Sie zum Kopieren des Layerstils. Geh runter, finde meine Grafik und meine Fußzeile. der rechten Maustaste auf ihn und gehen Sie zu dem, der „Ebenenstil einfügen“ sagt , und es wird das gleiche sein. Fügen Sie eine letzte Sache zu meinem Foto hinzu, ich werde das Typ-Tool greifen und ich werde mein Copyright hinzufügen. Ich werde einmal klicken und ich werde meine alle Rechte vorbehalten einfügen, wählen Sie eine Schriftart, die ein wenig besser für uns geeignet ist. Also wird es Roboto sein, es wird mittlerer sein. Das wird ziemlich klein sein, also wird es auf 12 Pixel hinunter sein. Toll, und das wird meine Fußzeile sein. 43. Produktionsvideo – Fertigstellung unserer Desktop-Version: Alles klar, in diesem letzten kleinen bisschen werden wir aufräumen. Ein letztes bisschen fehlt ist, dass ich hier oben meinen Typ noch nicht für das, was wir sind, also werde ich das tun. Ich habe mein Typwerkzeug, und ich werde sicherstellen, dass ich auch in der richtigen Box bin. Im Moment muss ich in dem sein, der „Wer“ sagt. Einmal ausgewählt, wenn ich einmal klicke, werden Sie feststellen, dass meine Eingabe drinnen ist, es ist zumindest ein guter Ausgangspunkt. Okay, das wird das sein, was wir sind. Ich werde Text auswählen. Ich werde meinen Roboto benutzen, aber ich werde Slab benutzen und meine Bolds benutzen. Es wird weiß sein, größenweise, das wird für mich funktionieren, mein Bewegungstool, bewegen Sie sie rüber, rückgängig machen. Ich wollte sie über eine fügen Sie meine „Lorem ipsum.“ Also werde ich klicken Sie halten und ziehen. Dieser wird gehen, denke ich, in der letzten Spalte hier, und lassen Sie uns zu Type gehen, und ich werde gehen Einfügen „Lorem ipsum“. Die Schriftarten offensichtlich wirklich groß, wenn ich vier Klicks benutze und es auf mehr überschaubare Größe von vielleicht 14 Pixel. Ich werde linke Linien machen, ich werde Roboto auswählen, ich werde Regular benutzen. Wählen Sie diesen Fall aufhellen. Großartig, und das wird es für diesen sein. 44. So gestaltest du die mobile Version: In diesem Video werden wir uns das mobile Design ansehen. Wahrscheinlich der wichtigste Teil beim Aufbau einer mobilen Website ist wahrscheinlich die Navigation, wie Sie sich bewegen. Aufgrund des begrenzten Platzes können Sie nicht so große Menüs haben, wie wir es auf unserer Desktop-Ansicht haben. Zu wissen, welche zu wählen ist, kann schwierig sein. Eine wirklich gute Seite hier ist diese exisweb.net Seite. Es ist ein unglaublich langer Link, also benutze den Link auf dem Bildschirm jetzt, um all die verschiedenen nützlichen Links überall zu finden. Jetzt werden wir keine Chance haben, sie durchzugehen, weil es so viele verschiedene Möglichkeiten gibt , mobile Menüs in Betracht zu ziehen. Aber schauen wir uns die Hauptgruppen an. Das hier, wo wir das Ding namens Burger oder Sandwich haben. Das Sandwich oder die drei horizontalen Linien, wie auch immer Sie es nennen wollen. Dieses Ding hier klickt und die ganze Seite verschiebt sich nach rechts, und dieses Menü erscheint. Es gibt eine andere Option hier, wo sie stapeln. Sie können hier sehen, dies ist die Desktop-Ansicht, aber wenn es auf Handy kommt, stapeln sie als schöne große Tasten übereinander mit einigen anderen. Dieser hier mag ich, nur der Burger selbst, wenn er klickt, gibt es ein Drop-Down-Menü davon. Es gibt viele verschiedene Möglichkeiten. Sie einen Blick durch die Website, es gibt eine verrückte Menge zu wählen. Sie sind alle Aromen einer ähnlichen Sache. Die große Sache zu entscheiden ist, ob du zum Burger gehst oder keinen Burger. Wie Smashing Magazine haben wir uns das vorhin angesehen. Sieh dir das an, wenn ich das zusammenbringe, haben sie keinen Burger entschieden, sie haben dieses Wort „Menü“ und das ist total cool. Aber Sie können sogar in meinem Chrome-Plug-in sehen, Ich habe den Burger verwendet. Lass uns einen kleinen Stunt machen. Es kann eine Modeerscheinung sein. Ich glaube, es ist wahrscheinlich da, um zu bleiben. Es ist ein schönes neues Symbol für mobile Menüs. Lass uns gehen und einen bauen. Was wir tun werden, ist, dass wir mit der mobilen Seite beginnen werden. Wir werden also damit beginnen, ein paar Teile davon zu erstellen, Teile des Desktops hinüber zu ziehen und dann das Menü neu zu erstellen. Die Dinge, mit denen ich anfangen möchte, ist die Navigation hier und die Heldenbox. Ich habe beide ausgewählt, indem ich Befehlstaste gedrückt halte und auf beide oder auf Steuerung auf einem PC klicke. Was ich tun werde, ist klicken, halten und ziehen, aber halten Sie zuerst die O-Taste gedrückt, klicken und halten und ziehen, bewegen Sie es über, holen Sie es das gleiche hier über. Richten Sie es auf. Sie werden feststellen, dass sie alle auf meine mobile Version verschoben haben. Ich werde heranzoomen. Es gibt viel Arbeit, um es zu reparieren. Also werde ich ein bisschen hineinzoomen. Was ich tun will, ist, dass ich das benutzen muss. Also gehe ich zu meiner Navigationsbox und bringen Sie Ihr eigenes Laptop-Logo. Ich werde mich überziehen. Ich kann es nicht sehen, weil es hier drüben ist. Aber ich weiß, wenn ich Shift halte und es hinüberziehe, wird es sich in einer schönen, perfekten Linie bewegen. Es geht perfekt. Meine Heldenbox muss ein bisschen raufkommen. Schön. Bringen Sie Ihren Laptop, er wird da sein. Ich werde es nach oben bewegen, um zentriert zu sein. Diese Navigation wird jedoch verschwinden, weil Dienste einfach nicht passen. Also werde ich das ausschalten. Ich werde meine drei horizontalen Linien zeichnen. Es ist wirklich einfach. Verwenden Sie einfach das Rechteck-Werkzeug. Stellen Sie sicher, dass Ihre Füllung auf Weiß eingestellt ist. Ich werde meinen Schlag auf keinen setzen lassen, und ich werde zeichnen. Sie könnten es auch mit einem Linien-Werkzeug tun, wenn Sie es tun wollten, ich finde, es ist einfach genug, das Rechteck-Werkzeug zu verwenden, ich mache sie sich wie Linien fühlen. Es ist ein bisschen groß, also werde ich hineinzoomen. Sie finden, wenn Sie nett und nah sind, wenn Sie arbeiten, es wird ein wenig einfacher zu arbeiten. Wenn ich weit draußen bin und ich diese Linien herumschleppe, scheinen sie zu schnappen, aber es ist viel einfach, wenn sie in der Nähe sind. Ich werde Alt halten und meinen Burger ziehen. Sie können hier sehen, dass mein intelligenter Führer mir sagt, dass er der Entfernung von der oberen, von der Unterseite übereinstimmt. Großartig. Nun, der Burger ist ziemlich groß. Also werde ich sie alle auswählen, sie transformieren und sie ein wenig skalieren, vielleicht etwas kürzer machen. Das ist also mein mobiles Burger-Menü. Großartig. Was ich gerne tun würde, ist, wenn auf diese Schaltfläche geklickt wird, ich möchte das ganze Zeug hier mit einem neuen div-Tag überlagern. Ich werde das Rechteck-Werkzeug verwenden, und ich werde ein schönes großes Rechteck für mein Menü zeichnen, und ich werde es hineinlegen. Ich werde ihm eine Farbe geben. Ich werde Purple benutzen. Jetzt werde ich ein bisschen Transparenz nutzen. Es gibt keinen Grund, dass du es tun musst, es sieht einfach cool aus. Also werde ich es auf 90 Prozent ändern, nur damit Sie schwach bewusst sind, sehen Sie die Sachen dahinter, also wenn es nach unten gleitet, wissen Sie, dass es möglicherweise Schiebesicherung sein kann und es ist keine neue Seite. Schauen wir uns an, etwas Benennung zu tun. Lassen Sie uns meine bringen Sie Ihren Laptop in das Navigationsmenü. Dieser wird Box-Navigation sein. Was ich tun werde, ist, dass ich eine zweite beginnen werde. Dieser wird als mobile Dropdown bezeichnet werden. Ich werde alles getrennt halten. Ich werde das Rechteck-Werkzeug greifen. Ist das mein Rechteck? Das ist oben. Ich habe ihn da reingebracht. Ich werde diese drei Typen schnappen. Diese Typen hier sind meine Burger-Speisekarte. Was ich tun werde, ist, sie zusammenzufassen oder sie zu verknüpfen. Der einfache Weg, dies zu tun, besteht darin, mit der rechten Maustaste darauf zu klicken und sie in ein so genanntes Smart-Objekt zu konvertieren. Dann benenne ich es um, ich werde es Burger Menu nennen. Ich werde das in Mobile Dropdown schieben. Großartig. Jetzt habe ich das, das habe ich. Was ich jetzt tun werde, ist, dass ich mein Burger-Menü ausschalten werde, damit ich zwei haben werde. Also das ist Burger Menu Inaktiv, und ich werde eine zweite haben, die mein Burger Menu Active sein wird. Denn was ich tun möchte, ist zu tun, was ich auf dieser Seite hier getan habe. Wenn ich das herunterskaliere. Dies ist, was ich auf meiner neuseeländischen Seite getan habe, wo ich meinen Burger bekam, und ich klicke darauf und es gibt ein kleines Kreuz zu wissen, dass man darauf klicken und danach schließen kann . Also lasst uns wieder dahin wechseln. Oder um es zu kreieren, könnte ich ein paar verschiedene Tricks gebrauchen. Der einfachste Weg, um ein perfektes Kreuz zu bekommen, ist einmal klicken. Haben Sie ein Plus. Ich benutze nicht X, weil sie wie Xs aussehen, sie sehen nicht wie ein Kreuz aus. Was ich will, ist ein Plus auf seiner Seite, also werde ich Plus verwenden. Einige Schriftarten sehen mit dieser Technik nicht gut aus, weil sie ziemlich stilisierte Pluspunkte sind, daher ist Arial Regular großartig für diese. Was ich tun möchte, ist es zu transformieren. Also werde ich mein Command-T oder Control-T auf einem PC verwenden. Ich drehe ihn um, sagen wir, um 45 Grad. Klicken Sie auf „Übernehmen“. Sieht aus wie ein schönes, gutes Kreuz. Ich werde es ein wenig skalieren, Control-T, machen es ein bisschen größer, nur um meinem Navigation-Burger zu entsprechen. Cool. Ich werde das kopieren und ich werde das hier einfügen. Er wird aktiv sein. Was passieren wird, ist, dass sich ausschalten und sie werden zwischen einander wechseln. Eigentlich, was ich tun könnte, um es klarer für den Web-Designer zu machen , ist, dass ich das Burger-Menü in die eigentliche Navigation selbst setzen werde , also wenn Leute das ein- und ausschalten, ist es hinten und dieser Kerl ist an der Front. Als nächstes muss ich die Zecken hinzufügen. Also werde ich mein Type-Werkzeug greifen, und ich werde klicken und ein Feld herausziehen, und ich werde mein Bit eingeben. Es wird SERVICES sein, ich werde es in Großbuchstaben tun. Ich werde PORTO tun, ich werde TEAM tun, und ich werde KONTAKT tun. Ich wähle sie alle aus, ändere die Schriftart und ziehe sie nach unten. Ich werde meinen Roboto benutzen. Ich werde Roboto Light benutzen. Nun, was Sie tun möchten, ist sicherzustellen, dass zwischen diesen Wörtern genügend Platz ist. Sie möchten nicht, dass Personen auf eine klicken und dann versehentlich auf die andere klicken. Ein gutes Stück Zeilenabstand ist also großartig. Meins hat es standardmäßig, weil ich schon damit herumgespielt habe. Wenn Sie das Type-Werkzeug greifen und alles auswählen, was Sie suchen möchten, klicken Sie auf dieses Symbol hier, bringen Sie Ihr Charakterfeld heraus. Diese Option hier, Ihre ist wahrscheinlich auf Auto gesetzt, das ist 28. Es wird wahrscheinlich ungefähr 30 in Bezug auf den Zeilenabstand sein. Ich werde meine auf etwa 60 kurbeln. Abhängig von der Schriftgröße, die Sie verwenden, welche Art von Schriftart, liegt es an Ihnen. Nun, das wird für mich funktionieren. Eigentlich, vielleicht sogar ein bisschen größer bis 70. Nur so gibt es eine schöne große Lücke zwischen ihnen, so dass große fette Finger auf sie wirklich leicht klicken können. Das wird mein Nav-Dropdown sein. Schön. Das wird meine Dropdown-Navigation sein. Jetzt muss ich durchgehen und alle Dinge, die ich auf dem Desktop gemacht habe, übertragen und sie auf Mobilgeräten funktionieren lassen. Das machen wir im nächsten Video. 45. Produktionsvideo – Fertigstellung unserer Version für Mobilgeräte: In diesem Video werden wir für eine Weile bei diesem hier sein, denn wir werden alles von unserem Desktop auf unser Handy übersetzen. Vielleicht erstellen Sie zuerst Mobilgeräte, vielleicht tun Sie das Gegenteil, entpacken Sie es, geben Sie ihm Platz zum Arbeiten und Verwenden auf einem Desktop. Wir machen es andersherum. Ich habe meinen ersten Block entlang bewegt, der Box-Navigation und Box-Held genannt wird. Ich werde die Kopie loswerden, und ich werde anfangen, an diesem hier zu arbeiten. Es gibt viel Dehnung, die passieren wird, es gibt einige Schriftgrößen, mit denen ich spielen muss, und einige Ausrichtung zu tun. Lasst uns da reingehen. Ich werde hineinzoomen, „Control Plus“, benutze meine Leertaste, um sich zu bewegen, vielleicht habe ich ein wenig zu viel gezoomt. Großartig. Das erste ist, ich werde verwenden, lassen Sie uns das passieren, greifen Sie die Schriftgröße und ziehen Sie sie nach unten. Das ist in Ordnung. Was ich tun könnte, ist, dass es tatsächlich auf zwei Zeilen bricht, weil es dort ziemlich klein wird. Ich werde es auswählen, es wieder auf unsere Schriftgröße bringen, es wird zu dem zusammenbrechen, wenn es auf Mobilgeräten ist. Dieses bisschen Lorem ipsum muss runterkommen und muss viel bekommen. Die Box muss viel kleiner werden, um in dieses Hindernis an den Seiten zu passen. Es wird auf fünf Zeilen brechen, das ist okay. Schriftgröße, ich werde verlassen, wie es ist, es ist auf 16 Pixel eingestellt, was eine groß genug Schriftart ist. Wenn Sie mit der Schriftgröße auf Mobilgeräten zu tun haben, müssen Sie wirklich testen. Aber als Vermutung, ihre ist etwa so klein, wie ich will, und 16 ist eine ziemlich große Schrift, aber ziemlich lesbar. Weil dies mehr Art von Umsatz dauert, ist es glücklich, dass kleine Größe zu sein, also werde ich es nur ein kleines bisschen klein machen. Meine weitere Box muss runter kommen und dieser ganze Container wird größer werden müssen. Ich habe zwei Teile zu erledigen. Ich habe meine Box, die unter meinem Clipping-Pass liegt. Ich schließe es, um es einfacher zu machen. Ich werde das zuerst größer machen. Sie werden sehen, dass es tatsächlich weit weg von den Seiten der Seiten ist. Es liegt an dir. Es spielt keine Rolle für unser Mock Up, aber nur um alles andere als nutzbarer zu machen, werde ich es hineinziehen und es wird ungefähr so viel größer sein. Möglicherweise müssen Sie auch die Größe des Ziegelbildes ändern oder es je nachdem, wo es sein soll, neu positionieren oder es nach unten skalieren. Ich habe „Control T“ verwendet und ich werde es nach unten skalieren, um zu passen. Sie können ein bisschen mehr sehen. Sie werden feststellen, dass die Unschärfe verschwunden ist, aber wenn ich auf „Enter“ klicke, wird die Unschärfe irgendwann wiederkommen . Ich zoomen Sie hinein. Ich werde beide bewegen, ich halte „Shift“ gedrückt, um beide von ihnen alle zu klicken und sie zu bewegen. Das wird die Heldenbox sein, die sich über bewegt hat. Der nächste ist mit der Haarbox zu tun. Ich werde ihn greifen, halten Sie „Alt“ gedrückt, während ich es hinüberziehe, bewegen Sie es über. Wo soll ich es positionieren? Ich werde anfangen, damit ich es überhaupt sehen kann. Ich werde es unten rauf schlagen, die Heldenbox, ich werde hineinzoomen. Wie soll ich das machen? Was Sie tun müssen, ist, einige harte Entscheidungen zu treffen, wenn es um Handy geht. Was wird für eine tolle Erfahrung machen? Für mich habe ich beschlossen, dass ich die Kopie loswerden werde und ich werde entscheiden, dass diese beiden tatsächlich weg sind, das ist das Rechteck und das Bild, das oben drauf sitzt. Ich werde nur benutzen, wer wir sind und das Lorem ipsum dort. Wer wir sind, muss kleiner werden, schnappen Sie sich mein Typwerkzeug klicken Sie hier, ich werde alles auswählen, und bringen Sie es herunter, dieses, greifen Sie dieses. Bewegen Sie es in und ich greife die „Lorem Ipsum“ bewegen Sie es hinein, benutze mein Typwerkzeug, um die Seiten zu verkleinern. Wie nah an der Kante, die Sie bekommen möchten? Ich mache nur um mich, wer wir sind, diese Polsterung. Es wird für mich funktionieren. Jetzt muss diese Box etwas kleiner werden oder ist er da. Hier ist mein Transformationswerkzeug und was ich tun könnte, ist zu tun, was ich auf der anderen Box getan habe. Verkleinern Sie es und verkleinern Sie es einfach, damit es etwas passender ist. nächste, die wir tun werden, ist die Service-Box. Ich werde meine Servicekiste finden, da ist sie da. Ich werde verkleinern und ich werde zu „Alt“, ziehen Sie es über. Mein Maulkorb fängt an. Es spielt keine Rolle, wo du anfängst. Los geht's. Wir haben hier viel zu tun. Ich werde mir die lila Schachtel schnappen. Es heißt also Box-Services und eine Transformation. Es ist großartig. Wir werden ein paar Sachen für diese Ikone tun müssen. Zuerst möchte ich die Symbole übereinander stapeln lassen, dann arbeite ich an dem Text. Alle meine Symbole, da sind sie. Nun, diese kleinen Kisten hier, ich werde runter, nur um sie aufgeräumt zu machen. Es ist das Farb-Overlay, also werde ich es einfach noch hochmachen. Das heißt nur, es sieht ein wenig hübscher aus, alle meine Schichten. Ich werde sie alle auswählen. Was ich zuerst tun könnte, ist eigentlich nur ein wenig nach unten zu skalieren. Ich werde mein Transformationswerkzeug verwenden. Wie groß? Es ist wahrscheinlich sehr klein, weil ich sie übereinander stapeln möchte. Um grob dort zu sein. Klicken Sie auf „Enter“. Nun, was ich tun werde, ist, dass meine Worte in Bezug auf mein Dokument überall geflogen sind. Wo sind sie alle? Da ist eine, da ist eine. Es liegt daran, dass ich sie gezogen habe, auf verschiedenen Zeichenflächen aufgerundet, und das ist eines der häufigsten Probleme mit seinen neuen Zeichenflächensystemen. Vorsicht, was Sie tun müssen, ist, sie neu zu ziehen, nur bringen Sie sie zurück an den gleichen Ort. Sieh dir das an. Ich werde sie einfach dorthin schleppen, wo es war, und sie alle gruppieren sich zurück. Ich habe meinen Druck, ich habe meine App dort und meine Fotografie Minute Video. Also wird der oben dorthin gehen, dann der darunter, und die Fotografie, wo ist er? Da ist er, da drüben. Komm zurück, und dann das Video, wo ist er? Da ist er da. Es ist ziemlich gut, so weit draußen zu sein, wenn Sie Symbole ziehen, die ich ein wenig in der Zeichenfläche verloren gehen kann , weil Sie vorher bemerken, wenn ich das rückgängig mache, als ich anfing, es dort oben zu ziehen und wenn Sie in die Nähe gezoomt haben, Sie werden es nie sehen und Sie werden nie wissen, auf welche Weise Sie es ziehen. werde sie nur aufstellen, ich werde drucken gehen, um dort zu sein , und ich werde all diese Jungs schnappen und es gibt eine Option hier, die sagt, ausrichten, alles aufstellen. Ändern Sie die Distributionszentren, es gibt diese Option hier. Nun, es funktioniert nie perfekt verteilen Zentren. Du fühlst, wenn ich hineinzoomen, für mich fühlt es sich an, als wären diese Lücken eben, aber dieser hier ist viel größer. Obwohl Sie das getan haben, werde ich sie einfach ein bisschen größer machen. Ich mache Video, bring ihn runter. Ich gehe zur Fotografie, bring ihn runter. Ich nehme ihn auch mit meiner Tastatur und der App unter Verwendung des Tap-down. Jetzt kommt die Zecke. Ich werde den Druck behalten. Ich habe in diesem Fall entschieden, dass das Lorem ipsum hier unten, der Text tatsächlich zu klein sein wird, um in diesem Feld nutzbar zu sein. Ich werde die High-Level-Bits von Text verwenden, also Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, ich werde in den Bin gehen. Also werde ich nur diese vier benutzen und versuchen, sie alle auf dem Bildschirm zu bekommen, ich werde sie nach links ausrichten. Was ich tun werde, ist zu drucken , nach oben, nach oben zu gehen. Fotografie, nach unten, Video nach unten bewegen, und ändern Sie die Größe. Sie sind so ziemlich von dieser Fotografie bestimmt, das ist die größte der Bande und er hängt von der Seite. Ich werde ein paar Dinge tun. Ich werde sie alle auswählen. Dann über ein bisschen, Ich möchte alle meine Symbole greifen. Ich schiebe sie ein bisschen rüber. Zurück zu meinem Druck, diesen Jungs, quer, und ich werde jetzt mein Typwerkzeug packen. Weil ich die meisten ausgewählt habe, werde ich in der Lage sein, sie alle gleich zu ändern. Ich werde klicken und „Halten und ziehen“ und ich werde sicherstellen, dass sie alle links ausgerichtet sind. Gehe zurück zu meinem Move-Tool, richte sie alle wieder links aus. Ich gehe zurück zu meinem Type-Tool und wähle eine Schriftgröße aus. Eigentlich zurück zu meinem Move Tool, bewegen Sie ihn rüber. Das geht um mich für die Größen. Ich bin damit zufrieden. Es ist bei was? Dreiundzwanzig Punkte und alles richtet sich. Es passt alles, ist schön, klare Entfernungen zwischen ihnen in der Lage sein, sie zu tippen, um zu den Serviceseiten zu springen. Als nächstes wird Portfolio sein. Nun, Sie werden in meiner Desktop-Ansicht feststellen, dass ich eine ganze Reihe von Portfolios habe. Wir haben acht verschiedene Blöcke. Was ich tun werde, ist, ich werde die Hälfte von ihnen verstecken , wenn es mit dem Handy gemacht wird, um ein gutes Gefühl von dem zu geben, was wir tun, aber nicht diese apisch scrollende Seite haben, weil ich eine Box übereinander gestapelt haben werde. Du könntest versuchen, zwei zu machen. Sie können ziemlich klein sein, ich bevorzuge in diesem Fall eine zu tun. Ich werde nur vier übereinander sein und die anderen vier ausschließen. Was wir tun werden, ist, sie hierher zu bringen. Zuallererst, was ich tun werde, ist, anstatt den ganzen Haufen von ihnen zu ziehen, werde ich eins nach dem anderen ziehen, um es mir ein bisschen einfacher zu machen. Dieser hier ist, oben auf meiner Desktop-Ansicht, das ist unter meinem Portfolio. Das erste, was ich tun werde, ist, dass ich hier ganz unten bin. Es ist das hier, die Box Portfolio, die diese farbige Box im Hintergrund auf Halten „Alt“ ist , ziehe ich es über, bekomme es aufgereiht, transformiere ihn, um ihn dort hinein zu bekommen. Sie werden feststellen, dass meine mobile Ansicht zu kurz ist, also werde ich mein Artboard Tool greifen, klicken Sie einmal darauf. Wenn das nicht funktioniert, musst du den Vorteil bekommen. Wenn das aber nicht funktioniert, klicken Sie einfach auf die „High-Level-Liste“ hier in der Navigation, ziehen Sie sie nach unten, denn wie groß wird das sein? Es wird wahrscheinlich ein wenig länger sein als meine tatsächliche Desktop-Ansicht. Wenn Sie fertig sind, kehren Sie einfach zum Verschiebenwerkzeug zurück. Wie groß sollte diese farbige Box sein? Wahrscheinlich ziemlich lang. Es passt zu all meinen Portfolios da drin. Gehen wir nach oben, was wir tun, ist Portfolio 1, ich werde ihn hinüberziehen, also habe ich die Box darunter und das Bild ausgewählt , das darauf abgeschnitten ist. Ich halte meine „Alt-Taste“ gedrückt, ziehe sie hinüber. Das ist der Typ. Ich werde zwei schnappen und ich werde „Alt“ halten, ziehen Sie es über. Ich bin sie noch nicht skaliert, ich werde versuchen, sie alle zur gleichen Zeit zu tun. Schnapp dir drei, ich ziehe es rüber und dann vier, ziehe ich ihn rüber. Sie sind alle hier drin. Was wir jetzt tun müssen, ist, sie alle so zu transformieren, dass sie ungefähr die gleiche Größe haben. Ich habe sie alle hier ausgewählt und ich klicke auf die „Bottom one“ und ich halte „Shift: und klicke auf die „Oben“ und es stapelt alles dazwischen. Verwenden wir das Transformationswerkzeug und halten Sie I „Shift“, um sicherzustellen, dass alles perfekt ist. Ich werde sie auf eine Größe bringen. Es sieht so aus, als würde es passen, da drüben. In der Nähe. Ok. Schön und groß, um in die mobile Ansicht passen. Also, jetzt muss ich sie nur alle aufstellen. Also werde ich Nummer zwei greifen und vergrößern, und hoffentlich reinkommen, um zusammenzuschnappen oder zumindest Linie zentriert. Ich greife Portfolio 3, kurz davor zentriert zu werden, und das gleiche mit Portfolio 4. Toll, ich werde sicherstellen, dass das etwas kürzer ist, also passt es zu allem. Ich habe sie mechanisch bewegt. Wenn Sie sie verbinden wollen, damit Sie Dinge wie Zentren verteilen können, denn wenn ich all diese auswähle und Zentren vertreibe, wird es nicht tun, was wir wollen. Es verschiebt die Boxen getrennt von den Bildern. Also, was Sie tun müssen, ist wählen Sie jede von ihnen, klicken Sie mit der rechten Maustaste darauf, oder wenn Sie auf einem Mac oder einem MacBook Pro ohne Rechtsklick, ganze Steuerung in Ihrer Tastatur und klicken Sie dann auf sie, und gehen Sie zu Konvertieren in Smart Object, und klebt sie zusammen. Es ist wie Gruppierung, aber was Sie später tun können, wenn Sie sie wieder auseinander bringen möchten, klicken Sie mit der rechten Maustaste und es gibt eine, die „Inhalt bearbeiten“ sagt, und was passiert ist, ist, Photoshop zu sehen, es zu bearbeiten. Es öffnet sich eine separate Registerkarte mit diesen kleinen zwei Jungs allein. Das kann ein wenig verwirrend sein, wenn Sie neu sind, also verwenden Sie vielleicht nur intelligente Objekte wenn Sie etwas mehr Erfahrung mit Photoshop haben. Konvertieren Sie zu Smart Object und diese Jungs, Convert to Smart Object, und nächsten Schritt, großartig. Jetzt sind sie Kern zusammengeschlossen, ich kann jetzt diese Distributionszentren verwenden. Schauen wir uns das nächste Stück an, das sind unsere Teams. Also werde ich die hier rüber bringen. Ich werde tatsächlich die ganze Sache über die Team-Box bringen, und ich werde es über ziehen, halten Alt und bringen es den ganzen Weg über zu Mobile View. Ich fange mit diesem ersten an. Dann in unserer Teambox, was ich tun könnte, ist, all diese Jungs zu gruppieren. Also wähle ich sie alle aus, ich gehe zur Gruppe, und dieser hier ist mein Box Portfolio. Okay, Box Team Exemplar. Werde das Team mit dem OCD los, und hier drin haben wir und wir werden Entwickler John Smith und sein Gesicht packen. Da ist also unser Circle Team, Kreis 2. Ich glaube, das ist alles der Kerl. Toll, ich werde diese Größe nicht ändern, weil es gut in Mobile passt und obwohl ich die Seite noch länger machen muss, aber denken Sie daran, auf den Rand zu klicken und dann verkleinern und ich werde es wirklich groß machen. Ich komme zurück zum Move-Werkzeug und was ich jetzt tun möchte, ist Jane, die Designerin Jane Smith, zu finden , und sie war Team drei. Bringen Sie sie rüber, und da geht sie, zoomen hinein und macht sie in die Mitte. Okay, es sieht so aus, als hätte ich den Text für unseren Mann hier weggelassen, also wo ist er, er ist John Smith. Wo ist der Text, bringen Sie ihn rein. Was ich tun könnte, ist, den Text ein bisschen zu machen, denke ich. Also stecken wir fest, dass Daniel der längste ist. Dann greifen Sie, Jane Smith und John Smith, und ich schnappen mein Tag-Tool und ziehen sie ein wenig größer. Das funktioniert, Daniel passt immer noch da rein. Dann gehen wir zu Designer, Entwickler, Gründer, lassen Sie es vielleicht bis zu 20 machen, machen es einfach ein wenig lesbarer in Handy, und dann greifen Sie alle Twitter-Griffe, nehmen wir ihn von 17, lasst es uns aufstellen. Nicht 204, lasst uns einfach 24 machen. Correct Move Tool, tippen Sie ihn ein wenig nach unten, nur machen es ein wenig einfacher für Handy. Toll, alles ist in seinen kleinen Kisten. Werfen wir einen Blick auf unser Kontaktformular. Also wähle ich Kontaktformular in dieser Draufsicht und verkleinere, halte Alt gedrückt, ziehe es hinüber. Ich fange mit all diesen Typen an. Schnappen Sie sich die grüne Schachtel. Green Box muss größer und so breit werden. Jetzt alle diese Jungs, so gibt es Form Name, Form E-Mail, Form iPhone, Ich werde sie verwandeln und zoomen sie in ein wenig. Was ich tun könnte, ist, sie rüber zu stoßen, nur damit wir so viel Platz wie möglich nutzen. Ich habe sie alle ausgewählt, ich habe sie alle in einem großen Schritt übertragen, es bedeutet, dass alle werden sich aufstellen und sich dann Sorgen machen, um Formular Nachricht. Also werde ich Formular-Nachricht greifen müssen, ihn nach unten ziehen. Okay, Verwandeln Sie ihn, bringen Sie ihn dazu, sich mit diesen Typen zu befassen, Nachricht zu schnappen. Er ist irgendwo da und da ist er, er bringt ihn dazu, sich mit diesen Typen zu befassen. Diese sind jetzt wohl alle etwas zu weit nach links. Also werde ich Sie schnappen, E-Mail, Name, Telefon und lassen Sie über. Da gehst du. Letzte Sache ist diese Submit-Button, ich habe vergessen, es zu nennen und das wird mein Button sein, ich greife die Submit, und was ich für diesen tun könnte, ist nur die volle Breite zu machen. So wählen Sie nur die Schaltfläche, machen Sie es breiter. Submit-Button über, schrumpfen Sie das grüne Bit, genial. Das wird meine Form sein. Letztes Bit ist die Fußzeile. Wenn ich verkleinere, habe ich meine Fußzeile hier bekommen. Also werde ich die Fußzeile greifen, wo ist er, da ist sie da. Alt, ziehen Sie es rüber. Ich fange mit dieser Seite an, weil dort kleine Symbole sind. Schnappen Sie sich diese Symbole, bewegen Sie sie über, großartig. Machen Sie die Fußzeile ein wenig größer, bringen Sie sie hinein, damit sie nicht so breit ist. Was auch immer, wir haben Social Icons und es gab etwas anderes da es gibt die Privatsphäre und Stücke. Also zoomen Sie hinein, großartig. Also könnte ich das in zwei Zeilen brechen und die Schrift auf Mobilgeräten etwas lesbarer machen. Das ist wahrscheinlich zu groß, machen wir es einfach 16, es ist nicht super wichtig. Bringen wir es auf eine schönere Größe. Verwandeln Sie meine Fußzeile und machen Sie ihn in der richtigen Größe. Jetzt holen wir meine Artboard rein, kommen auf Artboard, und bringen ihn einfach, da unten zu schnappen. Zurück zum Verschieben-Werkzeug, klicken Sie an einer anderen Stelle aus. Sehen Sie die kleine weiße Linie dort sehen, ich werde das klopfen, ausgezeichnet. Das ist meine mobile Version. Jetzt ist dies ein ziemlich schnelles Mock Up unseres mobilen Layouts. Jetzt ist dieses Video wirklich ein, wie man eine mobile Version zu machen. Nun, wenn Sie sich ansehen möchten, warum Sie verschiedene Dinge auf Mobilgeräten im Vergleich zum Desktop erstellen, möchten Sie sich mit der Dev-Welt der Benutzererfahrung oder dem UX-Design auseinandersetzen. Sie müssen auch anfangen, mit der Website zu arbeiten und sie zu prototypisieren, so dass Sie sehen können, wie es tatsächlich aussieht auf einer Website. Es ist eine Sache, in Photoshop zu entwerfen, und es ist eine andere, zu sehen, dass es auf einem mobilen Gerät und den verschiedenen Arten von mobilen Geräten funktioniert . Ob es sich um ein wirklich großes Huawei G7 wie ich habe, oder eines der kleinen Mini Samsung ist, die es gibt. Sie müssen mit beiden spielen, um sicherzustellen, dass Ihre Website tatsächlich nutzbar ist. Letzte Dinge, die ich tun werde, bevor ich diese Version verlassen, ist, ich werde aufräumen meine Ordner. Also habe ich meine Fußzeile, er sollte da drin sein. Mein Absenden-Button sollte darin enthalten sein, das sollte alles in meinem Kontaktformular sein, und es gibt alle meine Schaltflächen mit meinem mobilen Dropdown, die ein- und ausgeschaltet werden können. Alles klar, das war's für dieses Video. 46. So exportierst du deine Webbilder: In diesem Video werden wir uns nun ansehen, wie Sie Ihre Bilder aus Photoshop holen können , damit Sie sie Ihrem Entwickler übergeben können, um mit dem Aufbau der Website zu beginnen. Nun, was sie wollen, sind einige webfähige Bilder, nicht nur die große Photoshop-Datei. Wenn Ihr Entwickler Photoshop verwendet, dann könnten Sie möglicherweise nur übergeben Sie diese PSD und überlassen Sie sie es. Aber oft ist es die Rolle des Designers, die Bilder für das Web bereit zu machen. Es gibt so ziemlich zwei Formate, mit denen wir arbeiten werden. Es wird ein JPEG und ein PNG geben. Jetzt sind im Wesentlichen JPEGs ideal für Fotografien und PNGs sind wirklich großartig für jede Art von linearen Icons, Logos, Ticks, diese Arten von Dingen. Es ist ziemlich einfach zu wissen, welche zu verwenden ist, da es auf die Dateigröße im Vergleich zur Qualität ankommt. Wenn es gut aussieht und klein ist, sollten Sie dieses Format verwenden. Sie überprüfen beide, JPEG gegen PNG, sehen, was der kleinste ist, sehen, was am besten aussieht und verwenden Sie das dann. Wir verwenden eine neue Funktion in Photoshop CC 2015. Wenn Sie eine frühe Version verwenden, müssen Sie etwas namens Slice-Tool verwenden. Aber weil wir die neuere Version verwenden, werden wir diesen fantastischen Weg verwenden, der Export As genannt wird. Um es zu tun, schauen wir uns zuerst an, dieses Bild zu machen. Also schlüpfte ich in meine Ebenen, da sitzt dieses Bild oben auf der Schachtel. Es spielt keine Rolle, welche Sie exportieren, ob es die Box oder das Bild ist, es funktioniert für beide. Was wir tun werden, ist mit der rechten Maustaste darauf zu klicken und wir werden zu diesem gehen, der „Export As“ sagt. Wenn wir an die Spitze kommen, wenn wir wissen, dass es ein PNG ist, können wir Quick Export verwenden, aber im Moment weiß ich, weil es ein Bild ist, wird es ein JPEG sein. Also werden wir Export As bekommen. Es sagt mir also die Größe und es sagt mir, dass dieses als PNG auf 76 Kilobyte eingestellt wird und das ist ziemlich groß. Sie haben also eine relative Skala. Sobald Sie an 100 herankommen, ist das viel zu groß für ein Bild dieser Größe. Wenn Sie also bei 100 Kilobyte sind, sind Sie weit über dem, was es sein sollte. Also, was wir tun können, ist, es zu JPEG zu wechseln. Dann haben Sie diese Qualität Schieberegler. Sehr selten geht es auf eine 100 Prozent. Sie möchten es nach unten ziehen, bis Sie diese Balance haben dass es in Bezug auf Dateigrößen sehr klein ist, aber es gibt fast keine merkliche Verschlechfung des Bildes. Also, was du tust, ist, dass du es direkt runter zu etwas Dummem ziehst. Also sind wir bei 15 Prozent unten und es ist schwer zu wissen, ist es gut? Ist es schlimm? Was ich gerne mache, ist hier oben zu klicken und wieder nach unten zu klicken und zu entscheiden, wie niedrig Sie gehen können. Jetzt kann es in diesem Fall ziemlich niedrig werden, weil das Bild selbst ziemlich laut ist und es schwarz und weiß ist. Wir können mit ziemlich viel geringer Qualität davonkommen, aber Sie können sehen, dass die Größe ziemlich niedrig wird. Also, wenn es bei einer 100 ist, ist es bei ziemlich guten 38 Kilobyte, aber ich kann es viel niedriger bekommen. Nun meine Regeln, ich hänge da drin zwischen 30 und 60, je nach Bild. Dieser kann ziemlich niedrig gehen, weil es ziemlich laut ist, also bei 30 Prozent seiner ursprünglichen Qualität sind wir bei 12 Kilobyte und das ist eine schöne feine Größe für mich. Ich werde „Export“ treffen. Das letzte, was Sie tun müssen, ist, wenn Sie dies exportieren, ich werde diese kleine Option hier treffen, damit ich sehen kann, ich werde es auf meinem Desktop setzen. Ich werde es in einem speziellen Ordner namens Web Ready Images, die ich erstellt habe, ablegen. Die andere Sache, die Sie wissen müssen, dass Sie beim Benennen Ihrer Bilder sicherstellen müssen, dass es keine Leerzeichen gibt, und Sie müssen sicherstellen, dass Sie keines der verrückten Zeichen verwenden , die sich entlang der Oberseite Ihrer Tastatur befinden. Also halten Sie es einfach an Zahlen und Buchstaben, und stellen Sie sicher, dass es keine Leerzeichen gibt. Ich werde Export drücken, und das ist mein JPEG raus. Jetzt können wir uns bewegen, sagen wir, es ist mein Portfolio hier. Es spielt keine Rolle, welche dieser beiden Boxen ich auswähle, aber ich kann mit der rechten Maustaste darauf klicken und Exportieren als sagen und hoffentlich wird es sich daran erinnern, was ich zuletzt getan habe, also 30 Prozent. Sie können sehen, in diesem Fall 30 Prozent ist nicht groß für mich. Wenn ich bis zu 100 ziehe, es schwierig sein, auf dem Video zu sehen, das du gerade siehst, es sei denn, du bist in HD. Aber mit 30 Prozent ist es nicht großartig. So können Sie verschiedene Bilder höher und niedriger gehen , abhängig von der Qualität von ihnen und was in ihnen stopft. Also, ich sagte Ihnen, ich gehe zu etwa einem Hoch von 60, in diesem Fall könnte ich nur ein bisschen höher gehen, weil der Kompromiss ist, können Sie hier unten sehen, bei 5 Kilobyte ist etwas, das ziemlich klein ist. Also werde ich Export treffen, und das wird Portfolio 1 sein. Es wurde der Name des Layers übernommen. Wenn Sie also Ihre Layer benennen und Sie später etwas Zeit sparen möchten ist es, Bindestriche anstelle von Leerzeichen zu verwenden. Ich verwende gerne Kleinbuchstaben. Es spielt keine Rolle, wenn es um Webdesign geht, aber ich mag es, konsistent zu sein. Klicken Sie auf Exportieren. Das ist also das, und Sie können sich durchziehen, diesen exportieren. Nun, was Sie tun können, ist, dass Sie Lose gleichzeitig exportieren können. Also werde ich auf Portfolio 2, 3 und 4 klicken, mit der rechten Maustaste klicken, zu Exportieren als gehen und was passieren wird, ist, dass es auf dieser linken Seite hier kacheln wird. Also, Sie haben diesen ausgewählt, 70 Prozent sind in Ordnung, es ist klein, dieser hier, dieser hier endet bei 7 Kilobyte. Kannst du den Unterschied sehen? Sie haben die gleiche Größe, aber es gibt viele verschiedene Inhalte in diesem Bild. Viel mehr verschiedene Farben und Farbvariationen. Also, dieser ist viel höher und Sie könnten in der Lage sein, ein wenig niedriger in Bezug auf die Qualität zu gehen. Es hängt von Ihrem Image ab, damit wir durch sie warten können. Das sieht toll aus. Das sieht gut aus. Das sieht gut aus bei 40, vielleicht nicht, 60. Wir werden auf Exportieren klicken, und das einzige Problem dabei ist, dass Sie sie benennen, es wird sie alle in diesem Ordner ablegen, ohne unsere kleinen Bindestriche zu setzen, und so können wir das später tun. So exportierte es sie. Ich werde gehen und finden Sie es auf meinem Desktop und Web ready Bilder, es gibt Portfolio 1, 2 und 3. Sie sparen sich später viel Zeit indem Sie Kleinbuchstaben verwenden und sicherstellen, dass Bindestriche anstelle von Leerzeichen vorhanden sind, oder Sie können Unterstriche verwenden, das spielt keine Rolle. Jetzt ist das nächste Format, das wir uns ansehen werden, PNG. So wird das PNG-Format verwendet, wenn es eines von zwei Dingen passiert, dass es wirklich flache Grafiken wie diese Symbole gibt, nette Dinge wie Symbole und Schriftarten und Logos, alles, was wirklich ästhetisch, flaches Design hat kommt wirklich gut als PNG heraus. PNGs haben eine wirklich gute Möglichkeit, schöne, gestochen scharfe Kanten bei wirklich kleinen Dateigrößen zu halten . Der andere Vorteil eines PNG ist, dass es Transparenz verwendet, während ein JPEG dies nicht tut. Also möchte ich, dass diese Symbole hier durchsichtig sind, damit ich die Hintergrundfarbe so ändern kann und es immer noch durchsichtig ist. Also kann ich durchgehen, die Hintergrundfarbe ändern und es gibt Löcher in der Mitte von hier, um es durch zu zeigen. Wenn ich ein JPEG verwende, erlaubt es mir nicht, es muss eine solide Hintergrundkopie geändert werden. Es ist das gleiche hier für diese Grafiken. Obwohl es ein Bild gab und ich sagte: „JPEGs sind großartig für Bilder“, in diesem Fall werde ich den Treffer auf die Dateigröße nehmen müssen, um ein wenig größer zu sein , weil ich transparenten Hintergrund möchte und ich werde Ihnen zeigen, warum. Dies ist ein wirklich gutes Beispiel, um Ihnen zu zeigen. Also werde ich Team 1 finden, ich werde mit der rechten Maustaste darauf klicken und es gibt Quick Export als PNG. Jetzt, wenn Sie neu sind, sind Sie nicht zu sicher, ob es ein PNG sein sollte oder nicht, Sie können den Export als verwenden, der der etwas lange Weg ist. Also habe ich das JPEG-Format und Sie können in JPEG sehen, dass die Qualität, ändern Sie es bis zu etwas wie 70, die Qualität ist was, 10 Kilobyte, schön und klein, aber es hat diesen weißen Hintergrund. Das JPEG wird keine Transparenz zulassen, es ist nicht in seinem Make-up. Also müssen wir ein PNG machen und wir haben zwei Arten. Es gibt PNG 8, was in Ordnung ist und diese Dateigröße ist ziemlich klein, aber die tatsächliche Farbpalette, die sie verwenden kann, ist eigentlich ziemlich klein, es sind nur 256 Farben. Wenn Sie also ein vollfarbiges PNG verwenden möchten, müssen Sie dieses hier oben verwenden, was PNG 24 genannt wird. Sogar dann schreibe ich es dort. Also PNG 8 gegen PNG 4. Sie werden sehen, dass die Dateigröße erheblich unterschiedlich ist. Das hier, bis PNG 24. Das ist wirklich groß. Aber das ist der Kompromiss, Transparenz zu haben, JPEGs sind wirklich klein, aber Grafiken müssen sie transparente Hintergründe haben und Vollfarbe verwenden, müssen diese PNG hier verwenden. Also werde ich Vollfarb-PNG verwenden, Export drücken und Team 1, klicken Sie auf OK. Also sollte ich jetzt durcharbeiten und dasselbe für die anderen beiden Köpfe und den Rest der Bilder hier tun, schauen wir uns das für dieses Symbol an der Spitze an, und es wäre genau der gleiche Prozess, dieses Bild entlang der Unterseite zu exportieren hier. Ich habe mein Symbol, und ich weiß, dass es ein PNG sein muss. Warum? Weil es einen transparenten Hintergrund benötigt, der es standardmäßig zu einem PNG macht, und es ist eine schöne flache Grafik, was bedeutet, dass es schön und klein sein wird. Rechtsklick. Ich könnte meinen Quick Export jetzt als P&G verwenden, weil ich weiß, dass es ein PNG sein wird, weil es flache Grafiken die Transparenz benötigt, es ist definitiv ein PNG. Also werde ich Export als PNG treffen und ich werde direkt zu hier gehen und ich werde es auf meinem Desktop unter meine Web-fähige Grafik setzen und ich werde es dort hineinlegen. Jetzt arbeite ich einfach durch die verschiedenen Symbole und um Export As PNG zu sagen, lassen Sie uns einen kurzen Blick auf die PNG-Größe werfen. So können Sie dieses hier sehen, 90 Kilobyte wirklich groß, weil es PNG versucht, das zu tun, was JPEGs tun. Aber Sie können sehen, dass PNGs mit Transparenz tun, was es gut macht, sehen, es ist bis zu 2 Kilobyte schön und klein. Dies sind die Arten von Grafiken, die Sie an Ihren Webentwickler für Ihren Website-Build übergeben werden müssen . 47. So exportierst du CSS aus Photoshop: In diesem Video werden wir uns ansehen, wie Sie etwas, das CSS genannt wird, aus Ihrem Dokument herausbekommen . Der Webentwickler wird sagen: „Welche Farbe hat das? Welche Größe ist das? Welche Schriftart ist das? Wie groß ist der Abstand zwischen den Zeilen?“ Sie könnten mit dem Type-Tool durchgehen und sie alle ausschreiben und erklären, was sie alle sind. Eine nette kleine hilfreiche Sache, die Sie tun können, um es wenig einfacher für sie zu machen , ist, das CSS zu exportieren. Nehmen wir an, dass sie wissen wollen, welche Schriftart das ist und welche Schriftgröße es ist. Was wir mit meinem Cursor machen können, da ist es, hier sind wir. Was ich ausgewählt habe, ist eines hier, das CSS kopieren sagt. Wenn ich CSS kopiere, scheint nichts zu passieren. Was es getan hat, ist es kopiert und in Ihre Zwischenablage, wie Sie es bei Kopie erhalten haben. Jetzt können Sie öffnen, und [unhörbar] bei einem Wort oder Überprüfung an einer E-Mail und drücken Sie Einfügen. Was es getan wird, ist, dass es diese Klasse an der Spitze dort erstellt hat, die wir wahrscheinlich nicht brauchen. Es hat alle wichtigen Sachen wie Schriftgröße, Schriftfamilie, Schriftfarbe, Schriftgewicht, Zeilenhöhen mit dem zentrierten. Diese Art von Sache, Position, links, oben, schicken Sie es sowieso zu entwickeln. Wahrscheinlich werden sie das alles ignorieren. Wenn Sie Web-Designer sind, werden Sie nur wissen, was Sie aus diesem auswählen und was Sie nicht brauchen. Jetzt kann ich meinem Webentwickler erklären, dass der Heldenüberschriften-Text dies ist. Sie werden in der Lage sein, ihre magischen Webdesign-Fähigkeiten zu nutzen um den Text so zu gestalten, dass er genau wie Ihr Photoshop-Modell passt. Schauen wir uns einige der strukturierten Teile voll zu tun. Ich mag diese Navigationsbox oben, denn was wir brauchen, ist vielleicht die Höhe und wir brauchen, welche Farbe es ist und was die Alpha-Transparenz ist oder die Deckkraft ist. Ich werde sie als meine Nav Bar auswählen. Ich gehe zu Layer, ich gehe zu CSS kopieren, und ich werde in Notepad springen. Das wird meine Nav Bar sein. Ich werde auf „Einfügen“ drücken. Es gibt Bits, die sie verwenden können, und Bits, die nicht sind. Wenn Sie kein Web-Designer sind und Sie keine Ahnung haben, was dieser Müll ist, senden Sie einfach die ganze Menge und sie können es durch. Ich weiß, dass wir die Klasse nicht brauchen, und wir werden Hintergrundfarbe verwenden, wir werden die Deckkraft verwenden, aber wir brauchen nichts davon, aber wir brauchen die Höhe. Das sind die Dinge, nach denen ich wahrscheinlich als Webdesigner suche , die ich gehen und stylen muss, um sicherzustellen, dass es das gleiche ist, und dann braucht es eine Menge von dem Rätselraten von mir als Webentwickler, um zu sagen: „Es ist so hoch und es ist über diese Transparenz“, und um sie dir als Design zurückzusenden, damit du zurückkommst und sagst „Hey, es ist nicht das Richtige, und was ist es?“ Dies wird dazu beitragen, eine Menge davon zu entfernen. Das ist eine der netten neuen Funktionen und Photoshop CC. Wenn Sie CS6 oder CS5 verwenden, ist es leider keine Funktion für Sie. Sie müssen viel mehr von dem Zehen und Zuckern tun und austippen und erklären, was die Schriftart ist, was die Schriftgröße ist, Farbe es ist, welche Deckkraft es ist, und das Beschriften für sie, oder wenn sie selbst etwas Photoshop-Fähigkeiten haben, können sie in sie gehen und es tun. Das nutzt CSS von Photoshop aus. 48. So verwendest du Adobe Generate, damit deine Bilder optimal exportiert werden: Nun ist dieses Video eine sehr ähnliche Technik, die wir gemacht haben, als wir die Funktion „Export als“ gemacht haben. Also haben wir mit der rechten Maustaste auf die Ebene geklickt und wir sagten, Export als oder verwenden Sie die Quick Export. Dieser macht einen ähnlichen Job, aber es ist viel automatisierter und es ist wirklich toll, wenn Sie arbeiten, besonders mit sich selbst, Sie entwickeln Sachen aus Photoshop als Mock Up und dann bekommen Sie Essays bereit und Entwickeln Sie es als Website und Sie können ziemlich schnell hin und her kommen mit diesem Adobe Generate. Das erste, was Sie tun müssen, ist Adobe regenerieren zu aktivieren. Wenn Sie Adobe Generate hier nicht haben, bedeutet dies, dass Sie eine frühe Vision verwenden, entweder CS6 und früher, und Sie werden diese Funktion nicht haben. Aber wenn Sie in einer der späteren Versionen sind, können wir eine Datei bekommen und wir können diese drehen, die Bild-Assets sagt. Du machst es an und es passiert nichts, okay. So Datei generieren und er sieht ein wenig Techniken, um es. Also weiß ich, dass es an ist, es tut etwas. Was ich tun werde, ist mein Dokument an einem speziellen Ort zu speichern , nur damit ich weiß, wo es ist, und ich speichere auf meinem Desktop Ich werde einen neuen Ordner für euch erstellen, nur damit ihr es sehen könnt. Dies wird mein generierter Exportordner sein. Ich speichere nur die PSD in diesem Ordner hier Version davon. Klicken Sie auf „OK“. Also zeige ich Ihnen hier auf dem Desktop. Auf meinem Desktop heißt es Exportordner generieren und das ist die PSD, an der ich arbeite, nur von alleine sitzt. Stellen Sie sicher, dass „Generieren“ aktiviert ist. Für mich ist es wegen der Option „Speichern unter“ deaktiviert, stellen Sie sicher, dass es aktiviert ist. Nun, was ich tun möchte, ist, sagen wir, dieses Bild hier möchte ich es retten. Mit ein wenig Erfahrung wissen Sie, dass es ein JPG sein wird weil es keine Transparenz benötigt und es ist ein Bild. Also, was ich tun werde, ist, dass ich diesen hier benennen werde, Dot JPG. Ich habe Bild Bindestrich Bücher dot JPG. Was Sie bemerken, ist, zurück in demselben Ordner, sehen Sie magisch, es ist erstellt dieser Ordner namens Export generieren Essenz. Hier ist mein Bild, mein Layer-Export als JPG. Ok, es ist erledigt, alles automatisch. Das Gleiche ist, sagen Sie, wenn ich wollte, dass es tatsächlich ein PNG ist. Ich kann es einfach, in meinem Layer-Menü hier, ein PNG nennen. hier drüben, es hat tatsächlich das JPG entfernt und es für ein PNG ausgetauscht. Okay, das ist also eine wirklich schnelle und einfache Möglichkeit, Dateien zu exportieren, aber es ist auch eine wirklich schöne Möglichkeit, wenn Sie Anpassungen vornehmen, weil es ein dynamischer Link ist, der sich immer anpasst. So löscht es das JPG und fügt ein PNG hinzu. Also habe ich dieses Bild Buchungen Punkt PNG ausgewählt und was ich tun werde, ist, Ich werde eine Ebeneneffekte hinzufügen und ich werde ein Farb-Overlay hinzufügen und ich werde mit spielen, statt normal, die [unhörbar] Ich werde wechseln Sie es, um zu multiplizieren , wählen Sie eine Farbe, und ich werde es wie ein alter CPS-Stil machen. Sie werden feststellen, sobald ich auf „OK“ klicke, wenn ich zu meinen Bildern wechseln, können Sie sehen, dass es neu gemacht wurde, als ich auftauchte und es ist ein neues PNG mit dem neuen Farbschema da drin. Wenn ich durchgehe und es wieder ändere, ändert sich in etwas ein bisschen mehr, ein bisschen stärker. Ok, es ist grün. Sieh es hier drin an, es macht es wieder im Grün, also ist es ein dynamisches Glied. Sie können weiter in Bewegung bleiben, es macht immer die Bilder. Also weiß ich, dass man ein JPG sein muss. Okay, wenn es um JPGs geht, weiß ich, dass es durch JPG kommt, schau dir das an, da ist es. Jetzt JPG, das ist ziemlich groß, es ist 56. Also, was ich tun kann, ist da, ist ein bisschen Syntax, die ich diesem Kerl hinzufügen kann, um es zu einer anderen Auflösung zu machen. Am Ende, kannst du hier unten in meinem letzten Panel sehen, ich könnte das ein bisschen größer machen, damit du auf dem Bildschirm sehen kannst, ist, dass ich am Ende hier eintippen kann. Wenn ich eine eintippe und es wird es zu einem 10 Prozent JPG machen und es neu machen. Sehen Sie sich das an, es macht es 10 Prozent neu, es ist wirklich kleine Dateigröße, aber es ist wahrscheinlich schlechte Qualität. Also, wenn Sie wissen, nach ein wenig Erfahrung, fangen Sie an, das zu wissen. Ich weiß, dass, wenn ich wahrscheinlich bei etwa 40 gehe, kurz vor dem Ende, es wird es neu machen, es ist eine vernünftige Größe, die Qualität ist in Ordnung. Das Gleiche passiert, wenn ich will, dass es ein PNG ist. Wenn ich will, dass es ein PNG ist und ich weiß, dass ich ein PNG Acht sein möchte, oder wenn Sie wissen, dass Sie es eine 24 sein wollen, können Sie beide eingeben und es wird die PNG acht gegen 24 machen , was auch immer Sie brauchen. Jetzt gibt es eine Reihe verschiedener Syntax, die Sie zum Ende und zum Anfang für Qualität hinzufügen können , betonen Sie, ich habe nicht Zeit, jeden einzelnen von ihnen hier durchzugehen. Also, wenn Sie ein druckbares Blatt für all die verschiedenen Syntax wollen, laden Sie sie von diesem Link hier herunter. Eine letzte Sache, bevor wir gehen, ist, dass du anfangen kannst, Gruppen zu machen. Nehmen wir an, Sie haben hier ein Logo, aber es hat einen Kreis als Teil davon, okay, es gibt einen anderen Teil zu Ihrem Logo und Sie wollen es als einen großen Klumpen exportieren, okay. Also ist es ein weißer Fleck mit dem Wort, bringen Sie Ihren Laptop. Nun, was Sie tun können, ist, sehen Sie sich das an, ist meine Ellipse und da ist mein Laptop mitzubringen, sie sind da. Denn wenn ich diese separaten Namen gebe, wird es sie separat exportieren. Also, was ich tun möchte, ist mit ihnen ausgewählt, gruppieren sie, und in dieser Gruppe hier kann ich diese Gruppe nennen. Also dieser wird BYOL-Logo genannt werden und es wird ein Punkt PNG sein und es wird eine Acht sein. Toll, wenn ich hier rausspringe, sollte ich Logo haben, PNG und es ist eine acht, [unhörbar], Transparenz, tolle Größe, winzig. Es ist ein weiterer großartiger Trick, mit Adobe Generate zu verwenden. 49. Ich will nicht, dass das schon vorbei ist. Was kommt als Nächstes, Dan?: Wohin gehen wir von hier aus? Sobald Sie Ihr Mock-up abgeschlossen haben, senden Sie mir bitte einen Screenshot oder eine JPEG-Version über das Forum oder die Diskussion auf dieser Seite. Ich würde gerne sehen, was du gemacht hast. Video-Training kann wirklich One-Way-Verkehr sein. Ich bekomme meinen Nervenkitzel, wenn ich sehe, was Studenten gemacht haben. Um diesen Kurs so gut wie möglich zu gestalten, geben Sie bitte Anregungen weiter und stellen Sie Fragen. Bei hartnäckigen Fragen füge ich dem Kurs neue Videos hinzu, um ihn noch größer zu machen. Platzieren Sie bleiben über Ihre Lieblings-Social-Media-Kanal verbunden. Es gibt viele tolle Dinge kommen in zukünftigen Versionen von Photoshop und ich würde sie gerne mit Ihnen teilen. Das war's für mich. Tschüss für jetzt.