7 GIMP Webdesign-Projekt – Lerne GIMP Webdesign in der Praxis

1. Gimpwebdesign: - Hallo. Ich bin Chris Parker und bin seit 30 Jahren professioneller Grafikdesigner, und ich erinnere mich an mein erstes Website-Design im Jahr 2002. Es war furchtbar. Ich hatte keine Ahnung, was ich tat. Und nach 16 Jahren und Hunderten von Website-Designs später habe ich gelernt, was zu tun ist und was nicht zu tun ist. In diesem Kurs geht es also mehr als nur um Webdesign. Es geht darum, eine Website mit dem Endbenutzer und Geist zu gestalten, und es ist sogar noch besser als das. Es geht darum, weil du mich nicht nur entwerfen siehst. Ich ermutige Sie, das zu nehmen, was Sie lernen und genau das zu entwerfen, was ich geschaffen habe. Dann ist es Zeit, das zu nehmen, was ich entworfen habe, und es besser zu machen, es sich zu eigen. Wenn Sie diesen Webdesign-Kurs abgeschlossen haben, haben Sie sieben einzigartige Webdesigns für Ihr Portfolio. Nun, zusätzlich zum Entwerfen von sieben einzigartigen Websites, werde ich mit Ihnen meine 16 Jahre Erfahrung teilen und riel World Ratschläge zur Erstellung besserer Websites als die durchschnittlichen Designer-Tipps für den Verkauf zusätzlicher Dienstleistungen an Ihre Kunden und vieles mehr. Dieser Kurs wurde sowohl für Anfänger als auch für Fortgeschrittene konzipiert. Zu Beginn des Kurses werden wir alle grundlegenden Tools durchlaufen und Sie als Webdesigner benötigen. Nun, wenn Sie bereits vertraut sind, können Sie diesen Abschnitt überspringen und direkt in die Anatomie einer Website eintauchen. In diesem Abschnitt werden wir jeden Abschnitt einer Website sezieren, um Ihnen zu helfen, Ihre PSD-Dateien organisiert zu halten . Sie werden dann die beliebtesten Webdesign-Stile entdecken, das Grid-System, und dann können Sie mit den sieben Web-Design-Projekten beginnen. Ich zeige Ihnen Schritt für Schritt, wie Sie eine Website aus der Kopfzeile zum Heldenbereich erstellen, die verschiedenen Elemente, aus denen der Körper besteht und dann schließlich die Fußzeile. Jetzt, in jedem Projekt, werden Sie etwas Neues lernen, und jedes Projekt baut auf dem letzten auf. Hier sind nur einige der Dinge, die Sie in diesem Webdesign-Kurs lernen werden. Sie werden lernen, wie Sie Webdesigns erstellen, die eine hervorragende Benutzererfahrung bieten und warum Sie eine großartige Benutzererfahrung schaffen müssen. Sie werden auch erfahren, wie die Schaffung einer großartigen Benutzererfahrung Ihrem Kunden helfen wird, ihr Geschäft zu wachsen , und wiederum wird Ihnen helfen, mehr Geschäfte selbst zu machen. Sie werden auch lernen, zusätzliche Add-on Services, die Sie Ihre Kunden neben nur Web-Design verkaufen können. Und dann lernen Sie die Werkzeuge, um kreative Hintergründe zu erstellen, die helfen, die Aufmerksamkeit der Menschen durch die Verwendung von Strahlkraft, Ebenenmasken und mehr zu erregen. Sie werden auch lernen, was es braucht, um als Webdesigner erfolgreich zu sein und sich unter den Zehntausenden von anderen Webdesignern herauszustellen. Und dies wird dazu beitragen, dass Sie in Ihrer Web-Design-Karriere erfolgreich sind. Sie werden lernen, wie wichtig es ist, die richtigen Schriftarten und andere Topografie auszuwählen. Pro-Tipps. Sie werden auch zusätzliche Pro-Tipps lernen, nicht nur über das Design, sondern auch das Business End of Design und vieles mehr. 2. Einführung in die Anatomie einer Website: Hallo und willkommen zurück. In diesem Abschnittlernen wir alles über die Anatomie einer Website, denn als Webdesigner müssen Sie die Terminologie kennen,die die verschiedenen Teile einer Website beschreibt . In diesem Abschnitt lernen wir alles über die Anatomie einer Website, denn als Webdesigner müssen Sie die Terminologie kennen, die die verschiedenen Teile einer Website beschreibt Auf diese Weise können wir mit anderen kommunizieren, die an dem Projekt arbeiten, insbesondere mit dem Webentwickler, der für die Programmierung der Website verantwortlich ist. Und Sie müssen in der Lage sein, zeigen und Ihre Web entwirft die verschiedenen Abschnitte und dann benennen keine Abschnitte basierend auf der Terminologie, die ein Industriestandard ist. Also haben wir sechs Hauptabschnitte, die eine Website bilden, ihren Arm oder aber wir werden nur die wichtigsten sechs abdecken, die den Header, die Navigation, den Heldenbereich, den Körper, die -Fußzeile und die Seitenleiste. Also werden wir alle sechs von denen abdecken, die sich ein paar Beispiele ansehen würden, und ich werde Ihnen ein paar Pro-Tipps zu jedem der verschiedenen Abschnitte geben. Also, wenn Sie bereit sind, alles über die Anatomie einer Website zu erfahren, machen wir es 3. Überschrift: Der erste Abschnitt der Website ist als Header bekannt, die sich hier oben auf einer Website befindet, so dass die Kopfzeilen, die Zehe gehen, einige Informationen über die Website haben. Im Allgemeinen sind die häufigsten Arten von Inhalten in diesem Abschnitt ein Logo, ein Menü und möglicherweise einige Social-Media-Links. Du könntest auch Berg suchen, wie ich hier habe. Ich habe auch einen Link zu einigen Trendartikeln hier oben oben. Sie könnten auch einige grundlegende Kontaktinformationen tun, wie vielleicht eine E-Mail-Adresse oder vielleicht eine Telefonnummer. Sie können einige Links zu Mitgliederkontoseiten haben, daher haben wir hier eine Anmeldeoption. Sie können auch Dinge tun, wie die Aktionsschaltflächen genannt. Vielleicht haben Sie ein Software-Unternehmen, und Sie möchten Ihre Software für eine kostenlose Testversion für 30 Tage anbieten. Dafür könntest du einen kalten Action-Button haben. Oder vielleicht entwerfen Sie eine Website für eine Non-Profit-Organisation. Du könntest hier oben einen Spenden-Button machen. Die Möglichkeiten sind endlos für den Aufruf von Action-Buttons, die Sie dort einfügen können , und das sind nur ein paar Beispiele Jetzt, alles, was ich bisher erwähnt habe, sind nur Vorschläge für das, was Sie in den Header setzen könnten und Sie könnten Mawr-Informationen auch in den Header einfügen. Das Problem ist, Sie nicht zu viele Informationen angeben wollen. Sonst wird es zu beschäftigt. Und dann wird der Brennpunkt dieses Headers verwässert, weil der Betrachter zu viele Informationen verarbeitet , weil es zu viel zu sehen gibt. Mein Header ist wahrscheinlich zu beschäftigt, aber deshalb habe ich ihn in zwei verschiedene Farben aufgeteilt. Also dieser blaue Bereich hier haben wir nur das Logo in der Speisekarte und dann das dunkelgrau. Ich habe meine Social Media-Symbole, Suche und meine Trendartikel hier drüben, und es ist von diesem Teil hier unten getrennt, aber es ist immer noch Teil der Kopfzeile. Das ist also eine Möglichkeit, Ihre Header zu entwerfen und zu entfernen, wenn Sie viele Elemente haben, die Sie in den Header einfügen möchten. Aber es ist in der Regel am besten, nur etwas Einfaches zu tun, wie ein Logo, ein Navigationsmenü und dann einige Social-Media-Icons. bedeutet nicht, dass Sie nichts Kreatives tun können, aber Sie können es immer noch einfach halten, indem Sie etwas mit einer kreativen Art von Design tun. Denken Sie also daran, dass der Zweck der Kopfzeile ist es, Ihren Zuschauern die Möglichkeit zu geben , eine bestätigt, dass sie auf der richtigen Seite sind, wenn sie sich mit Ihrem Logo und Ihrer Markenidentität identifizieren , und ihnen die Möglichkeit zu geben, was es ist, wonach sie über Ihr Menü suchen oder ob sie ein bestehender Kunde sind, um leicht auf ihr bestehendes Konto zuzugreifen. Wenn es also zu beschäftigt ist und zu viele Informationen vorliegen, Sie es Ihren Zuschauern nur schwer machen, den Zugriff auf das, was sie brauchen. In den meisten Fällen würde ich empfehlen, Ihre Kopfzeile auf Ihr Logo, Ihr Menü und dann höchstens 1 bis 2 weitere Elemente jetzt zu beschränken , andere Aspekte Ihres Kopfzeilendesigns können eine sogenannte klebrige Kopfzeile enthalten. Wenn ich also beginne, auf dieser Website zu scrollen, können wir sehen, dass das Menü verschwunden ist. also in einer klebrigen Kopfzeile Wenn Siealso in einer klebrigen Kopfzeilemit dem Scrollen beginnen, bleibt die Kopfzeile an den Anfang der Browserseite. Das ist etwas anderes, das Sie als Teil Ihres Designs erstellen können, um Ihren Zuschauern einen einfachen Zugriff auf andere Teile der Website zu ermöglichen. Also, anstatt den ganzen Weg zurück nach oben scrollen zu müssen. Eine klebrige Kopfzeile erleichtert den Zuschauern den Zugriff auf zusätzliche Seiten, wenn sie im internen Teil dieser Webseite nicht finden, was sie benötigen. Okay, in der nächsten Lektion möchte ich ein wenig mehr über unser Menü sprechen, denn wir haben einige verschiedene Design-Optionen für diese Navigation oder das Menü basierend auf Platzierung sowie verschiedene Designstile für die -Menü selbst. Also gehen wir weiter und schauen uns das in der nächsten Lektion an. 4. Navigation: Hallo und willkommen zurück. Alles klar , in dieser Lektion werden wir nur einige verschiedene Aspekte Ihrer Navigation oder Ihres Menüs betrachten. Und an sich glaube ich, dass es ein vollständiger Abschnitt Ihrer Website ist, der von allem anderen getrennt ist. Obwohl Sie es die meiste Zeit in der Kopfzeile finden, muss es nicht unbedingt in die Kopfzeile gehen. Und ich werde Ihnen in nur einer Sekunde einige Beispiele dafür zeigen. Also für diese Website haben wir eine sehr einfache, klassische Art von Menü, wo wir drei Links zu drei verschiedenen Seiten haben. Eine andere Art von Menü ist eine, die Dropdown-Menüs hat. Wenn Sie also den Mauszeiger über einen bestimmten Link bewegen, erhalten Sie diesen Entwurf für zusätzliche Optionen. Dies gilt also als die primäre Navigation für diese bestimmte Website. Aber wir haben auch eine sekundäre Navigation, das ist dieser Punkt genau hier. Diese vier Links gelten als sekundäre Art von Menü und dann, indem Sie auf sie, erhalten Sie verschiedene Ergebnisse basierend auf den Kategorien für diese bestimmten Links, zumindest für diese Website. Nun, nicht alle Websites haben ein sekundäres Menü. Es hängt alles davon ab, wie viele Informationen sie haben, die Zuschauer auf ihrer jeweiligen Websitefinden können , die Zuschauer auf ihrer jeweiligen Website . Deshalb habe ich einige meiner Inhalte in ein zweites Menü aufgeteilt, das nur für bestehende Mitglieder zugänglich ist. Was ein weiterer Grund ist, warum ich diese Links nicht wieder in die primäre Navigation einfügen wollte. Dies ist eine klassische Art von Menü, und es gibt eine andere Art von Menüoption, genannt ein Mega-Menü, das die Menge an Informationen im Dropdown-Menü erweitern kann . Und das kann von dieser Website hier gesehen werden. Und wenn Sie den Mauszeiger über verschiedene Längen bewegen, erhalten Sie verschiedene Optionen. Das hier gilt also als Mega-Menü, weil es Bilder enthält, die mit Links zu dieser bestimmten Seite oder Artikel enthalten sind. Und das gilt auch als Mega-Menü, weil es mehrere Spalten unter einer Menüüberschrifthat Menüüberschrift und in verschiedene Kategorien unterteilt ist. Basierend auf diesen bestimmten Websites Inhalte in jeder Zeit. Sie haben viele Informationen wie diese, oder Bilder, die als Mega-Menü betrachtet werden. Nun, wie ich bereits erwähnt habe, müssen Sie Ihr Menü nicht innerhalb der Kopfzeile platzieren. Sie können es tatsächlich in einer Seitenleiste links oder rechts von der Website platzieren. Ich habe sogar Menüs am unteren Rand mit Links gesehen, um zu verschiedenen Teilen der Website zu navigieren . Nun, neun von 10 werden Sie Menüs sehen, die in der Kopfzeile vs in einer Seitenleiste oder unten unten platziert sind. Diese Art von Layout, wo die Navigation innerhalb der Kopfzeile ist, ist es Standardpraxis. Das ist es, woran die Menschen gewöhnt sind. Sie sehen nicht sehr viele Websites mit einem Menü in einer Seitenleiste oder sogar unten. Es ist noch seltener im Vergleich zu einer Sidebar. Sie möchten also den Benutzern den Zugriff auf Ihre Website und die verschiedenen Seiten Ihrer Website erleichtern , damit sie die gewünschten Informationen finden können. Und wenn eine Person auf Ihre Website kommt und sie mit einem Menü in der Seitenleiste nicht vertraut oder das Layout anders ist, weil sie daran gewöhnt sind, dass das Menü hier oben und nicht hier unten oder auf der Seite ist, dann können sie werden ein wenig frustriert, wenn sie nicht in der Lage sind, zu finden , wonach sie suchen, und sie können frustriert oder ausgeschaltet werden wegen dieses Design-Layouts, weil es verwendet, um etwas oben erscheinen. Das wird nicht sagen, dass es für alle das Gleiche sein wird. Aber einige Leute könnten ausgeschaltet werden, indem sie in diesem in der Seite oder unten. Sie müssen sich also Ihrer Zielgruppe oder Ihrer Kunden bewusst sein und feststellen, ob dies etwas ist , das das Design der Website und die Funktionalität der Website verbessern wird. Wenn es eine jüngere Menge ist, dann ist es wahrscheinlich keine große Sache. Aber wenn es eine ältere Menge ist, dann möchten Sie vielleicht mit Ihrer Navigation in der Kopfzeile bei etwas konventionelleren bleiben . Die andere Art von Option, die wir für unser Menü haben, ist es, es vollständig zu verstecken. Wir sehen hier keine Links in der Kopfzeile, in der Seitenleiste oder unten wieder, diese Art von Design wird von der erwarteten Zielgruppe für diese Website abhängen. Jetzt können Sie vertraut sein, wo das Menü ist, aber wenn Sie das noch nie gesehen haben und Sie nicht wissen, wo Sie nach dem Menü suchen, dann werden Sie die Website verlassen, so dass Sie die Dinge einfach machen wollen. für Zuschauer, um zu finden, was sie wollen, wenn sie auf die Website gelangen. Aber wie Sie wahrscheinlich wissen, sieht dieses kleine Ding hier mit diesen drei Zeilen irgendwie wie ein Hamburger aus, und manchmal wird es auf einen Hamburger, eine Hamburger Ikone bezeichnet . Sie wissen, dass Sie, wenn Sie darauf klicken, dann erhalten Sie Ihre Links zu den verschiedenen Seiten der Website. Also wieder, wir haben hier ein wirklich einfaches Menü, mit drei Links zu drei verschiedenen Optionen, plus ein paar Social-Media-Icons. Also, indem es es versteckt, ja, macht es alles sauberer. Und der Fokus liegt mehr auf dem, was in diesem Bereich hier ist, im Vergleich zu dem, was hier oben ist. Der Hauptvorteil, um Ihr Menü so zu verstecken, wäre, weil Sie wissen, dass das Publikum für diese bestimmte Website von Benutzern kommen wird, die ein intelligentes Tablet oder ein Smartphone verwenden . Und es ist viel sauberer, wenn Sie nicht viele Elemente auf kleineren Geräten anzeigen können und ganz zu schweigen davon, wie die Website beschichtet ist, könnten Sie die Seite tatsächlich schneller laden, indem Sie bestimmte Elemente wie das Menü oder sogar diese grafischen Elemente direkt hier auf die Rate, die wird, um die Benutzererfahrung zu verbessern, wenn jemand geht, um eine bestimmte Website zu besuchen . Das ist also der einzige Grund, warum ich diese spezielle Option verwenden möchte, ist es, sie sauberer zu machen , sich auf etwas Bestimmtes zu konzentrieren oder weil die Benutzer ein kleineres Gerät im Vergleich zu einem Desktop-Monitor verwenden . Die andere Sache, die ich erwähnen möchte, ist wieder auf dem Mega-Menü, das wird abhängig vom Publikum sein. Wenn Ihr Kunde erwartet, dass die Mehrheit seiner Kunden oder Besucher von einem Smartphone oder einem Tablet kommen , dann möchten Sie vielleicht kein Mega-Menü machen, weil es auf einem kleinen Gerät wie diesem zu groß sein wird . Aber wenn die meisten ihrer Kunden und Kunden einen Desktop Toe verwenden, auf ihre Website zugreifen, dann können Sie mit einem Mega-Menü-Typ-Design in Ordnung sein, und Sie können diese Informationen von Ihren Kunden erhalten. Wenn sie noch keine Website haben und Google Analytics auf ihrer Website installiert haben, können sie eingehen und Informationen darüber erhalten, wie viel Prozent der Besucher von einem Computer oder Smartphone-Tablet kommen und solche Dinge. So möchten Sie vielleicht herausfinden, dass zusätzliche Informationen über die bestehenden Besucher, die ihre Website zu diesem Zeitpunkt besuchen. Okay, also sind wir fertig mit der Navigation. In der nächsten Lektion werden wir einen Blick auf diesen Teil der Website werfen, den Heldenbereich genannt wird. Also werden wir das in der nächsten Lektion anpacken. 5. Hero: Als nächstes haben wir unseren Heldenbereich, sich unterhalb der Kopfzeile befindet und was als die oberste Falte bekannt ist, die hier unten ist. Also alles unten hier ist als unterhalb der Falte bekannt. Das geht im Grunde auf die Tage der Zeitungen zurück. Sie würden ihre Zeitungen falten und die Hälfte und dann, wenn sie es auf einem neuen Stand zeigten, konnte man nur den Teil der Zeitung über dieser Falte sehen. Also, um Sie zu locken, die Zeitung zu kaufen, würden sie die wichtigsten Informationen über die Falte setzen. Dann wäre alles unter der Falte nur sichtbar, wenn man die Zeitung öffnen oder entfalten würde. Das gleiche Konzept gilt also für Ihre Website. Sie möchten alle wichtigen Informationen über die Falte setzen, und wenn jemand den Inhalt unterhalb der Falte sehen will, muss er nach unten scrollen, um es zu sehen. Sie möchten also die wichtigsten Informationen in einer Webseite oberhalb der Falte, die Ihren Header enthält. Sie müssen ihnen eine einfache Möglichkeit geben, auf verschiedene Teile Ihrer Website zuzugreifen, um sich bei Ihrer Website anzumelden oder was auch immer andere Informationen in Ihrer Kopfzeile zur Verfügung stehen, und dann wird der Heldenbereich sie dazu verleiten, Ihre Website weiter zu erkunden oder sie dazu bringen, etwas zu tun. Anstatt also eine Zeitung zu kaufen, werden Sie sie dazu bringen, etwas mit einer sogenannten Zehenaktion zu tun. Was willst du, dass sie an dieser Stelle im Heldenbereich tun? Möchten Sie ihre E-Mail-Adresse im Austausch für Informationen erhalten, für die sie auf Ihre Website gekommen sind ? Wollen Sie, dass sie etwas kaufen? Möchten Sie, dass sie mehr über ein Produkt erfahren, damit Sie es dann beim Kauf dieses Produkts oder dieser Dienstleistung verkaufen können? Der Heldenbereich wird also Informationen enthalten, die auf dem Ziel Ihrer Website oder der jeweiligen Seite basieren . In diesem Fall wird die Homepage einen Heldenbereich haben, der definiert oder so gestaltet ist , dass der Betrachter etwas tun kann. Was ist es, dass Ihr Kunde möchte, dass dieser Besucher macht, sobald er auf seiner Homepage landet. Das wird bestimmen, wie Sie diesen Teil der Website zu entwerfen, so dass der Hero-Abschnitt kann als ein großes Featured Bild oder eine Reihe von Bildern definiert werden oder sogar eine leichte zeigte, dass prominent auf Ihrer Homepage angezeigt. Und wieder, es muss über der Falte sein, weil Sie wollen, dass Informationen oder das Bild oder Bilder oder Diashow, um die Zuschauer Aufmerksamkeit zu erregen, um ihre Aufmerksamkeit zu halten, sie daran interessiert, worum es auf dieser Website geht, und dann bekommen sie Tun Sie etwas. Forschungsstudien haben gezeigt, dass die Menschen eine Entscheidung über eine bestimmte Website treffen es sei denn, als eine Sekunde basierend auf diesem Heldenbereich. Es ist also einer der wichtigsten Aspekte des Webdesigns, weil Sie ihre Aufmerksamkeit bekommen und halten müssen. Andernfalls, wenn sie kein Interesse haben, basierend auf diesem Heldenbereich, dann gehen sie auf die Website von jemand anderem und Sie verlieren sie als Kunde oder Ihre Kunden, die sie als Kunde verlieren. Deshalb werden Sie ein Bild verwenden, um ihre Aufmerksamkeit zu erregen, weil sie nach etwas Bestimmtem suchen . Sie haben ein Problem und sie gehen auf eine bestimmte Website, die nach einer Lösung sucht. Ein Bild kann also diese Lösung darstellen, oder Inhalt oder Text kann eine Lösung für ihr Problem darstellen , und Sie werden sie gebeten, etwas zu tun, basierend darauf, wie Sie ihr spezifisches Problem lösen wollen , indem Sie eine aufgerufene Aktion hinzufügen. Also eine andere Sache, die Sie sicherstellen möchten, dass Sie tun, wenn Sie einen Helden Abschnitt zu entwerfen, ist es leicht zu lesen, es muss klar und verständlich von Anfang an sein. Sie müssen genau wissen, was diese Firma tut oder was sie anbietet, denn wenn es nicht klar oder leicht zu lesen ist und sie nicht ganz sicher sind, was das Unternehmen tut, dann werden Sie diesen Betrachter verlieren. Sie werden auf eine andere Website gehen, damit Sie dies mit mehreren verschiedenen Methoden erreichen können . Sie können Keywords basierend auf dem Ziel dieser Website hinzufügen, oder mithilfe von Schlüsselwörtern, die erklären, was das Produkt oder der Dienst ist, die ihre Probleme zu lösen . Inhalt oder Text ist also eine Methode, um die Klarheit für diesen bestimmten Besucher der Website zu erreichen . Oder Sie können ein Bild verwenden, oder Sie können sogar ein Video verwenden, das ihre Aufmerksamkeit erregen wird, denn wenn Sie es so einrichten, dass das Video automatisch abgespielt wird, dann wird das automatisch ihre Aufmerksamkeit zu erregen, weil Video beginnt als sobald sie auf die Website gelangen. Lassen Sie uns also voran gehen und werfen Sie einen Blick auf einige Beispiele verschiedener Arten von Heldenabschnitten, die Sie entwerfen können, um die Probleme der Menschen zu lösen. Also Apple verwendet ihr Hauptprodukt als Teil des Helden Bild, und sie haben einige Inhalte zu gehen zusammen mit ihm. So wissen wir genau, was dieses Produkt auf dem Bild oder dem Text oder beidem basiert, und wir wissen, dass es sich insbesondere um ein Smartphone iPhone 10 handelt. Dann müssen sie die Aktionen aufrufen. Sie möchten mehr darüber erfahren, oder sind Sie bereit, jetzt zu kaufen? Je nachdem, wo sich dieser Besucher befindet, wird der Kaufzyklus bestimmen, welche aufgerufene Aktion sie ergreifen werden, um den nächsten Schritt zur Fertigstellung der Lösung für ihr Problem zu unternehmen . Sie haben kein Handy, also wollen sie kaufen. Im Moment sind sie unsicher, ob das iPhone Tennis für sie, so dass sie auf klicken mehr erfahren. Sie bitten sie also, etwas zu tun, um den nächsten Schritt in diesem Kaufprozess zu machen. Also dieses Design, es ist klar, dass es prägnant ist. Es ist leicht zu verstehen, und es macht es den Besuchern leicht zu wählen, was als nächstes zu tun ist. Jetzt hat diese bestimmte Website auch ein Bild, aber es ist kein Bild über ein bestimmtes Produkt oder eine Dienstleistung. Es ist eher eine generische Art von Bild, und dieses Bild füllt den gesamten Heldenbereich von links nach rechts. In diesem Fall zeigt das Bild, was Sie haben oder erreichen können, basierend auf den Produkten oder Dienstleistungen, die dieses Unternehmen verkauft. Wohin möchten Sie hingehen? Das ist die genannte Aktion. Wohin willst du gehen Basierend auf dem, was du wählst, kannst du das Ziel erreichen, auf einem Campingplatz oder am Strand zu campen oder zu gehen und Sonnenuntergänge zu beobachten. Das ist das Ergebnis. Das ist es, was die Leute wollen. Sie wollen weg von der Großstadt, und sie wollen einen Ort finden, wo sie campen oder sein können. Und das ist, was dieses Bild porträtiert und gibt ihnen, was sie erwarten können, wenn sie einen Platz zum Campen oder Wohnmobil finden oder was auch immer der Fall sein mag. Eine andere Art von Helden Abschnitt würde als der Gründer Helden Abschnitt bekannt sein, so hier haben wir ein Foto des Gründers dieser speziellen Firma, die Glaubwürdigkeit und Autorität hinzufügt. Und diese Person ist ein bekannter Vermarkter in der S E o Industrie. So können Sie diese Person erkennen, wenn Sie auf dieser Webseite gelandet sind, und Sie können bereits wissen, was er nur basierend auf seinem Bild bietet. Also wieder bietet er etwas Freies an. Exklusive Traffic-Tipps für Ihre Website. Also der Anruf, dass Aktion ist Wenn Sie diese kostenlosen exklusiven Traffic-Tipps erhalten möchten, geben Sie Ihre E-Mail-Adresse ein, melden Sie sich an und dann werden Sie diese kostenlosen Tipps in Ihre E-Mail-Box bekommen. Auch hier geht es im Heldenbereich darum, das zu vermitteln, was du tust und eine Lösung für ein Problem zu geben, das der Besucher haben kann. Und er hat auch einige zusätzliche Glaubwürdigkeit für seine Firma hinzugefügt. Basierend auf diesen Tiefen geht hier runter. Nicht jeder kann sagen, dass sie im Entrepreneur-Magazin, Forbes Magazin, Huffington Post usw. zu sehen Forbes Magazin, Huffington Post sind. Also wieder, Glaubwürdigkeit als eine andere Möglichkeit, das Interesse der Menschen an Ihrem speziellen Unternehmen Produkt oder Dienstleistung oder Ihren Kunden, Produkten und Dienstleistungen zu halten oder Dienstleistung oder Ihren Kunden, . Diese nächste Website ist ein weiteres Unternehmen, das auf Marketing oder S CEO Traffic spezialisiert ist. Aber dieses Mal, anstatt ein Bild zu verwenden, ist es nur ein kontextabhängiger Heldenbereich. Aber es macht im Grunde das Gleiche. Ist der andere ohne Bilder? Wollen Sie mehr Verkehr? Natürlich. Ich möchte mehr Traffic auf meine Website und ich bin sicher, dass Sie das tun. Und ich bin sicher, dass Ihre Kunden mehr Traffic auf ihre Website wollen. Also, was Sie tun werden, ist, dass Sie Ihre Website-Adresse hier eingeben und dann wird dieses Unternehmen Ihre Website kostenlos analysieren und Ihnen Vorschläge geben, wie Sie mehr Traffic auf Ihre Website zu bekommen . Das ist also zu kalte Action. Wenn Sie also einen Heldenbereich entwerfen, müssen Sie die Ziele des Kunden herausfinden, der Sie angeheuert hat, um zu bestimmen, wie Sie den Heldenbereich sowie die kalte Aktion für diesen Heldenbereich gestalten werden. Dann müssen Sie sich entscheiden, ob Sie es kontextabhängig machen werden? Werden Sie ein Produktbild hinzufügen oder eine Bildschuld liefert ein Ergebnis und Gründerbild oder ein Video oder etwas anderes. Sobald Sie also diese Informationen kennen, die Sie von Ihrem Kunden gesammelt haben, möchten Sie sicherstellen, dass der Heldenbereich über der Falte zufrieden ist klar und prägnant ist, was das Unternehmen anbietet oder was sie tun und eine klare kalte Zehenaktion haben. Unser Hass. Das war's also für meine Tipps im Heldenbereich. In der nächsten Lektion beginnen wir mit der Arbeit an den Elementen unterhalb der Falte. 6. Körper: Der nächste Teil unserer Website ist der Inhalt unterhalb der Falte und beginnt entweder mit sekundären Inhalten, die den Heldenbereich ergänzen oder neuen zusätzlichen Inhalten. Zum Beispiel hat die Apple-Website zusätzliche Inhalte für zusätzliche Produkte, die sie dann mit der Campingplatz-Website anbietet . Es bietet sekundäre Inhalte für den Heldenbereich, indem es beliebte Orte für die Suche nach Campingplätzen im Vergleich zu einer generischen Suche anbietet. So wird der Körperabschnitt einer Website auf das Unternehmen selbst bestimmt werden, was sie anbieten und ob sie mehrere Produkte haben, die sie anbieten können. Das Designkonzept für diesen Abschnitt ist also ziemlich unbegrenzt, aber beschränkt auf das, was dieses Unternehmen jetzt anbietet. Zusätzlich zum Angebot von sekundären oder zusätzlichen Inhalten, können Sie tatsächlich tun, was als ein einseitiges Design bekannt ist, das wird zusätzliche Inhalte über das Unternehmen, aber nicht notwendigerweise einzelne Produkte enthalten . Aber stattdessen könnte es eine kleinere Website sein, die eine begrenzte Menge an Informationen hat. Anstatt es auf einzelne Seiten zu setzen, könnten Sie diese Informationen auf eine Seite setzen. Zum Beispiel, diese Website hier. Wenn wir zu der About Seite navigieren, scrollt es tatsächlich zu diesem Abschnitt für die Homepage. Also die über die häufig gestellten Fragen sind alle auf der Homepage und das wird als ein einseitiges Design bezeichnet . Und Sie können auch andere Abschnitte zum einseitigen Design hinzufügen, wie vielleicht einen Kontaktabschnitt oder vielleicht einen Testimonial Abschnitt. So wird der Körper Ihrer Website entweder sekundäre Informationen, zusätzliche Informationen oder alle Seiten auf der Homepage enthalten . Okay, das sind also meine Tipps für die Körperpartie. Es gibt eine Menge mehr Informationen, die wir für den Körper durchgehen können, da es so viele Informationen gibt, die Sie in diesem Bereich setzen können. Und die Designkonzepte, die Sie entwickeln können, sind ziemlich unbegrenzt, basierend auf den Inhalten für diesen Abschnitt. Also können wir nicht wirklich alles abdecken, was Sie im Körper bringen, aber das sind die Grundlagen des Körperabschnitts. Richtig? In der nächsten Lektion wir einen Blick auf den nächsten Abschnitt, der die Fußzeile ist 7. Fußer: der Abschnitt direkt unter dem Körper, die ganz unten auf einer Website ist, die dieser Bereich hier ist bekannt als die Fußzeile. Jetzt, genau wie die Kopfzeile, wird es von Seite zu Seite gleich bleiben. Und der Zweck der Fußzeile ist es, Ihren Zuschauern die Möglichkeit zu geben, das zu finden, was sie brauchen, und in der Lage zu sein, zu einem anderen Teil der Website zu navigieren, ohne zum Menü gehen zu müssen. Denn nicht jede Website hat ein klebriges Menü und wenn sie keinen einfachen Zugriff auf das Menü haben dann können sie tatsächlich von hier aus auf diese Informationen zugreifen. Zusätzlich zu Links zu verschiedenen Teilen der Website, gibt es zusätzliche Informationen, die normalerweise in der Fußzeile platziert werden, wie die Datenschutzrichtlinien , Nutzungsbedingungen, Nutzungsbedingungen, Verkäufe und Rückerstattungen, rechtliche Site-Map und zusätzliche Informationen. Wir haben Copyright-Informationen in der Fußzeile sowie einfachen Zugriff auf Apple und vieles mehr, was in der Fußzeile wieder geht hängt von der Firma, was sie erreichen wollen und die Ziele für ihre Website. Nun, insbesondere für meine Website, habe ich nicht viele Links im unteren Bereich meiner Fußzeile. Ich habe nur meine Datenschutzrichtlinien Unterstützungslängen und Social-Media-Symbole, was sich viel von dem unterscheidet, was wir hier haben. Ein Apfel. Das Design liegt also ganz an Ihnen, ob Sie nur Links tun möchten oder nicht, oder wenn Sie es kreativer oder mehr Bild basierend machen möchten, können Sie Bilder hier unten hinzufügen, um Menschen zu helfen, das zu finden, was sie brauchen. Sie könnten auch eine andere Suchleiste hier unten setzen. Wenn Sie eine oben in der Kopfzeile haben, können Sie eine hier unten setzen, ist gut, also gibt es eine Menge Informationen, die Sie in die Fußzeile einfügen können, und nur weil es unten ist, bedeutet das nicht, dass Sie an dem Design knausern möchten. Ja, es ist in Ordnung, wenn es nur kontextbasiert ist, aber Sie können auch einige Bilder in der Fußzeile hinzufügen, abhängig von der Website natürlich, um diesem Bereich etwas Interesse hinzuzufügen, es ist in Ordnung, wenn es nur kontextbasiert ist, aber Sie können auch einige Bilder in der Fußzeile hinzufügen, abhängig von der Websitenatürlich, um diesem Bereich etwas Interesse hinzuzufügen, erregen die Aufmerksamkeit der Menschen, um ihnen zu helfen, das zu finden, was sie brauchen, damit sie weiterhin zu verschiedenen Teilen der Website navigieren. Okay, das ist also die Fußzeile. Wir haben noch einen Abschnitt zu übergehen, also werden wir das in der nächsten Lektion tun. 8. Sidebar: der letzte Abschnitt, der die Banane mir von einer Website erstellt wird, ist bekannt als die Sidebar. Wenn Sie ein vertikales Menü erstellen, wie dieses Unternehmen hier hat, wird dies als Seitenleiste betrachtet. Es ist an der Seite, und es ist in einer Bar. Das ist also die Sidebar. Aber eine typischere Art von Sidebar ist eine, die Sie auf Blog oder Magazin oder E-Commerce-Art von Websites sehen . Und das wird zusätzliche Informationen auflisten, auf die Zuschauer zugreifen können, ob sie sich jetzt für einen Newsletter anmelden möchten, Links zu Social Media, Zugang zu aktuellen Beiträgen, Links zu Social Media, Zugang zu aktuellen Beiträgen, beliebte Beiträge und vieles mehr. In der Regel möchten Sie keine Sidebar auf Ihrer Startseite einfügen, wie ich es hier getan habe. Und wenn Sie sich Apple ansehen, können Sie sehen, dass sie überhaupt keine Sidebar auf ihrer Homepage haben, weil sie wollen, dass der Fokus auf die Produkte liegen und nicht unbedingt Informationen, die in der Seitenleiste enthalten sein könnten . Der andere Ort, an dem Sie keine Seitenleiste hinzufügen möchten, ist die eigentliche Zielseite für ein bestimmtes Produkt. Hier haben wir also eine Produktseite für das iPad Pro, und sie haben nicht unbedingt eine typische Sidebar mit den Informationen, die ich hier in meiner Sidebar habe . Wenn Sie also eine Seitenleiste entwerfen, können Sie und viele Informationen, aber Sie möchten sich auf den gesamten Designstil dieser bestimmten Seitenleiste konzentrieren. Zum Beispiel habe ich hier eine dunkle Farbe für den Hintergrund der Überschrift, ich wählte eine bestimmte Schriftart für die Titel, und das Gesamtdesign ist ziemlich sauber. So liegt der Fokus mehr auf dem Inhalt und nicht unbedingt auf dem Design. So können Sie oder nicht brauchen, um eine Sidebar zu entwerfen, um mit der Website zu gehen, und wieder, das hängt von der Website. Die Ziele für diese Website und Ihren Kunden. In Ordnung, das sind also Thesixties Gegenstände, die die Anatomie einer Website ausmachen. In den nächsten Lektionen möchte ich nur einige zusätzliche Design-Best-Practices durchgehen, bevor wir tatsächlich die verschiedenen Teile unserer Website entwerfen. 9. Einführung in den Abschnitt des design: Hallo und wieder willkommen. Alles klar, in diesem Abschnitt werden wir alles über Webdesign-Stile lernen, und das erste, was wir tun werden, ist, dass wir einen Schritt in die Speicherspur gehen und einen Blick auf einige Web-Designs werfen, die 15 bis 20 Jahre erstellt wurden vor. So können wir lernen, was Sie nicht tun, wenn Sie Websites entwerfen, sondern auch einige zusätzliche Profi-Tipps auf dem Weg geben. Danach werde ich mit Ihnen die sieben beliebtesten Webdesign-Stile jetzt im Jahr 2019 teilen. Wenn Sie dies in einem anderen Jahr als die beliebten Web-Design-Styles sehen, vielleicht anders. So möchten Sie sicherstellen, dass Sie jährlich über die beliebtesten Designstile auf dem Laufenden sind. Alles klar, nachdem wir das durchgemacht haben, wurden dann einen Blick auf einige Orte werfen, die schwächen, um Inspiration zu erhalten , damit wir ein paar Ideen bekommen können , wie man ein bestimmtes Projekt entwirft, an dem wir arbeiten. Also, wenn Sie bereit sind, Zehe, erfahren Sie alles darüber, welche Design-Stile dazu geführt 10. Meine Gedanken zu Designstil: hallo und willkommen zurück eine Rate. In dieser Lektion möchte ich nur kurz einige Informationen über Webdesign-Trends ansehen. Trends sind wie die Modeindustrie. Sie sind trendy, bis sie es nicht sind. Es gibt Dinge, die in den neunziger Jahren gemacht wurden, wie diese spezielle Website, die rein böse ist oder Dinge, die ich nie wieder tun würde. Das ist einfach schrecklich. Und Webdesign hat einen langen Weg seit der Einführung des World Wide Web und der Websites, die wir damals besucht haben, durch so viele Dinge, die mit diesem speziellen Webdesign falsch sind, zurückgelegt . Ich weiß nicht, wo ich anfangen soll, anders als zu sagen, wenn Sie jemals eine Chance bekommen, machen Sie einfach eine Google-Suche nach Webdesigns aus den neunziger Jahren und Sie werden Websites finden, die noch lebendig und aktiv sind, die in der Ende der neunziger Jahre, und du wirst eine Menge Dinge sehen, die du heutzutage nicht tun solltest. Aber wenn wir uns auf 2004 schnell vorwärts begeben, hatten wir immer noch Websites, die entworfen wurden, die viel zu viele Fehler begangen haben, und das ist so beschäftigt, ich weiß nicht, wo ich suchen soll. Sie verkaufen anscheinend eine Menge Zeug, anscheinend eine Menge Zeug, und ich bin mir nicht ganz sicher, was sie erreichen wollen. Aber es ist einfach so beschäftigt und das ist etwas, das ich empfehle. Wenn es um ein Webdesign geht, gibt es viele verschiedene Stile. Es gibt viele verschiedene Trends. Verschiedene Arten von Trends kommen und gehen. Sie werden veraltet, weil jeder anfängt, es zu tun. Und die Unternehmer, die diese Websites betreiben, wollen sich von ihrer Konkurrenz abheben . So werden sie ihre Website auf der Grundlage des neuesten Trends wiederholen. Und es ändert sich immer und immer wieder, weil sich die Trends ständig ändern. Aber die Websites, die weiterhin die gleiche Art von Grunddesign wie Media Temple verwenden. Dies ist eine modernere, klassisch saubere Website und obwohl sie gelegentlich die Dinge um ein bisschen ändern, bleibt die Gesamtmarke für ihr bestimmtes Geschäft gleich. Sie verwenden die gleichen Farbschemata. Sie verwenden einen sehr ähnlichen Designstil, der modern und sauber ist. Diese Art von Stil wird den Test der Zeit bestehen. Es wird nicht veraltet, weil es nicht viele grafische Elemente verwendet und sauber ist . Aber zur gleichen Zeit, wenn Sie einen Blick auf diese Website werfen, können Sie sehen, dass sie eine Menge Grafiken verwenden und wie Sie sehen können, ist es halb beschäftigt. Sie verwenden grafische Elemente aus den späten neunziger Jahren mit dem Grady Button hier und einigen anderen Elementen. Aber dieses Unternehmen ist ein riesiges Unternehmen und sie sind sehr beliebt in der Marketing-Welt für Social-Media-Experten und diejenigen, die Experten und Social Media werden wollen und ihr Geschäft durch Social Media wachsen wollen. So können Sie immer noch so etwas gestalten und eine erfolgreiche Website haben. So hat diese spezielle Website ein Thema, und das Design dieses Themas oder ihrer Marke ist entsprechend für das, was ihre Botschaft versucht zu porträtieren. So kommt es auf eine zu wissen, was Ihr Kunde versucht zu erreichen, was ihre Website, und dann müssen Sie entscheiden, was ihre Marke ist. Haben sie bereits eine bestimmte Marke an Ort und Stelle? Dann ist das, was Sie die Website um zu gestalten. Wenn Sie von einem Medientempel kontaktiert wurden, um ihre bestehende Website zu aktualisieren, und Sie diese Art von Designstil vorgeschlagen haben, werden sie es wahrscheinlich ablehnen, weil es nicht mit ihrer bestimmten Marke übereinstimmt, die sie bereits eingerichtet haben Aber Wenn Sie einen Kunden haben, der seine brandneue, die keine Marke an Ort und Stelle hat, dann ist das, was Sie zuerst entwickeln müssen und herausfinden, was sie versuchen zu sagen. Was ist ihre Botschaft und wie wollen sie das mit ihrer Marke darstellen? So kommt manchmal Webdesign nach der Entwicklung einer Marke und eines Logos. Aber oft werden Kunden zuerst ein Logo bekommen, das darauf basiert, was sie mögen, und dann wird das zu ihrer Marke, und dann wird ihre Website um sie herum gestaltet. Aber das bedeutet nicht, dass dieses spezielle Design mit ihrer besonderen Botschaft koexistiert. Zum Beispiel wird ein Arzt wahrscheinlich zuerst ein Logo bekommen, und dann wollen wir ein Webdesign. Aber sie mögen diese Art von Stil. Das ist, was sie persönlich mögen, aber es stimmt nicht mit dem, was sie versuchen, auf dem Markt zu tun. Sie versuchen, eine Praxis mit mehr Kunden aufzubauen. Diese Art von Stil wird nicht repräsentieren, was sie zu erreichen versuchen und die Art des Geschäfts, in dem sie sich befinden. Zumindest ist das meine persönliche Perspektive auf dieses besondere Design im Vergleich zu einer professionellen Branche. Ich würde diese Art eines Designstils nicht an einen professionellen Arzt oder jemand anderes in anderen Arten von professionellen Branchen einreichen . Das Design muss also mit der Branche übereinstimmen, in der sich diese Person befindet. Diese besondere Firma basiert auf Social Media und ihre Nachrichten Social Media, Dschungel und das koexistiert, was ihre besondere Branche. Denn wenn Sie etwas über Marketing und Social Media wissen, ist es ein Dschungel. Es gibt eine Menge Sachen los, und sie sind Marke, und ihr Design dieser bestimmten Website funktioniert für diese bestimmte Nachricht. Wenn es darum geht, Websites zu entwerfen, müssen Sie entscheiden, welche Art von Designer Sie sind? Sind Sie eine, die kreativer sein wird und Grafiken wie diese bietet? Ist das der Stil, den du magst? Dann müssen Sie Ihr Portfolio basierend darauf aufbauen, und dann müssen Sie Kunden finden, die Ihren Stil zu schätzen wissen. Aber wenn du versuchen willst, für jeden zu entwerfen, wirst du eine schwierigere Zeit haben, jeden zu besänftigen. Denn jetzt müssen Sie ein Portfolio mit diesem Stil modern, klassisch und sauber und andere Stile sowie im Vergleich zu diesem besonderen haben. Also, wenn Sie sich auf einen bestimmten Stil konzentrieren. Dann werden Sie in der Lage sein, die Kunden zu gewinnen, die, wie dieser Stil mich persönlich. Ich bevorzuge sauberere, klassische, moderne Designs im Vergleich zu dieser Art von Design. Also habe ich noch nie so etwas entworfen. Ich mache modernere und sauberere Designs im Vergleich zu Websites, die viele Grafiken haben, und die andere Sache, die ich nicht mag, ist die Anwendung von Grady INTS auf die Menüs. Ich mag meine Knöpfe, und meine Männer waren mal flach. Ich möchte nicht, dass Ablenkungen von Grafiken, anderen Elementen, Zutaten von dem ablenken, was meine Leser tun sollen. Und das ist, leicht zu navigieren, ohne jede Ablenkung. Auch das ist meine persönliche Vorliebe. In meinem persönlichen Stil mögen Sie vielleicht etwas ganz anderes, und basierend auf dem, was Sie in den Projekten in diesem Kurs lernen, ist nur ein Ausgangspunkt. Sie müssen Forschung zu digitalen Design-Trends machen. Führen Sie eine Google-Suche nach Web-Design-Trends, und Sie werden jedes Jahr sehen, dass neue Design-Trends direkt hier eingeführt werden. Wir haben 13 Web-Design-Trends zu beobachten, für 2017 müssen Sie auf dem neuesten Stand sein, was möglicherweise im Trend für dieses Jahr sein wird , weil Ihre Kunden sehen werden, dass diese Arten von Design-Elementen auf ihren Wettbewerbern Websites verwendet werden, und sie sind gehen, um das gleiche für ihre eigenen wollen. Und Sie müssen wissen, ob das etwas ist, das Sie anbieten möchten oder nicht. Und wieder, Sie müssen mit dem Kunden kommunizieren und ihnen mitteilen, dass ein Design-Trend nicht unbedingt bedeutet, dass sie mit dieser Website erfolgreich sein werden. Was versuchen sie mit ihrer Website zu tun? Gibt es versuchen, Kunden zu gewinnen oder ist es nur eine persönliche Website mit einer Blaspistole es? Wenn diese Design-Trends von Besuchern und Besuchern ablenken, die nicht in der Lage sind, zu navigieren, um die gewünschten Informationen zu erhalten , dann werden sie die Website verlassen und keine E-Mail-Adresse kaufen oder angeben. Und Ihr Kunde verliert an diesem bestimmten Kunden, weil Sie die Website mit Elementen entworfen haben, die dem Unternehmer nicht helfen werden, das zu erreichen, was sie wollen. Also, bevor Web-Design kommt Kommunikation mit Ihrem Kunden, um herauszufinden, was es ist wollen sie mit ihrer Website erreichen und dann ihre Marke herausfinden und dann die Website um diese Marke entwerfen . Wenn sie keine Marke oder kein Logo haben, dann haben Sie die Möglichkeit, Ihre Design-Services zu verkaufen, um ihnen ein Logo und eine Marke zu bieten und dann auf der Website passend zu dieser Marke. 11. 7 populäre Designstile: Hallo und willkommen zurück. Ordnung, also habe ich gesagt, wir werden einige verschiedene Arten von Designstilen durchgehen. Es gibt viele verschiedene Arten von Designstilen und wir werden nur über sieben verschiedene Designstile gehen . In dieser Lektion. Es gibt definitiv Mawr und diese Luft, die beliebtesten ab heute. Vor 15 Jahren gab es Designstile,die damals sehr beliebt waren, die heute nicht wirklich viel benutzt werden. 15 Jahren gab es Designstile, die damals sehr beliebt waren, die heute nicht wirklich viel benutzt werden Aber das bedeutet nicht, dass diese Designstile nicht wieder in Mode kommen und beliebter werden als das, was heute beliebt ist. Also werden wir nicht wirklich abdecken, was vor 15 Jahren beliebt war. Hoffentlich kommen einige dieser Designstile nicht zurück, weil sie abscheulich sind. Und ich würde sie nie in meinen Designs von Websites verwenden sowieso, so dass wir es nur auf diese beliebtesten Arten von Designs beschränken. Ab sofort. Nun, in Bezug auf Ihr Portfolio, sollten Sie Ihren Stil oder Ihren Designstil mit Designs repräsentieren, die Sie lieber erstellen . Sie sollten eine bestimmte Art von Designstil haben, und Sie können die sieben Haupttypen von Designstilen nehmen und daraus Ihr eigenes Design erstellen . Oder Sie können mit den Grundlagen jedes Designstils eng bleiben und sich auf Designs konzentrieren, die Sie lieber erstellen. Dann wird es einfacher sein, Kunden zu finden, die Ihren besonderen Stil schätzen, wenn Sie versuchen, alle sieben verschiedenen Designstile zu repräsentieren, als Sie versuchen, alle Arten von Kunden unterzubringen , und es wird viel schwieriger sein zu wachsen Ihr Unternehmen oder erhalten Sie mehr Jobs, weil Sie sich nicht auf eine bestimmte Art von Stil konzentrieren. Und das ist, weil, wenn Sie sich auf einen bestimmten Stil spezialisiert haben, es macht es einfacher, sich auf die Suche nach Kunden zu konzentrieren, die wie diesen spezifischen Stil im Vergleich zu versuchen, alles für jeden zu tun. Okay, in diesem Sinne, lassen Sie uns voran gehen und werfen einen Blick auf die sieben verschiedenen Arten von Designstilen. Also die ersten, die Stile zu entwerfen, die wir betrachten werden, sind bekannt als das flache Design und Realismus , oder auch als Spießmorphismus bekannt. Früh, in der Geschichte des Webdesigns, war Realismus das beliebte Design der Wahl nicht nur im Webdesign, sondern auch im Design der Benutzeroberfläche . Zum Beispiel können wir hier sowohl Designstile sehen, die Apple auf sein Betriebssystem für seine Smartphones angewendet hatte , auch Tablets zu verschiedenen Zeiten in der Geschichte. Hier drüben rechts haben wir das realistische Design und rüber nach links. Wir haben ein flaches Design, so dass wir im Realismus viel mehr Details in den Symbolen haben. Wir haben Texturen, Drop Shuttles, sogar realistische Fotos für einige der Symbole, dann auf der linken Seite. Die meisten dieser Details wurden herausgezogen, was uns unseren flachen Designstil verleiht. So können Sie sich diese Stile als visuelle Ästhetik der Elemente dieser Symbole oder der Webseite oder der Benutzeroberfläche vorstellen , oder was auch immer es ist, das Sie entwerfen. Hier ist ein weiteres Beispiel. Auf der linken Seite haben wir Realismus auf der rechten Seite. Wir haben ein flaches Design. Hier ist ein weiteres flaches Design, also gibt es nicht viel Detail. Es gibt keine Schlagschatten, Texturen oder Details innerhalb der Grafiken selbst. Dasselbe mit diesem. Es hat ein bisschen einen Schlagschatten hier auf dieser Ikone und dieser Ikone hier, aber insgesamt ist es eine ziemlich flache Art von Design, und bei 99 Designs, das ist ja, sie haben einen Blutposten über Schule, mehr FIC-Designs, und Sie können eine Vielzahl von Beispielen für diesen bestimmten Designstil sehen. Und Sie können sehen, dass es definitiv mehr Details in den Symbolen und den Bauchmuskeln und allem anderen . Für diese speziellen Designs gibt es eine detaillierte Textur. Es gibt Schlagschatten, Glanzlichter und vieles mehr, um ihm eine realistische Art von Aussehen zu geben. Wenn es darum geht, einen dieser Designstile gegenüber dem anderen zu wählen, bevorzuge ich das flache Design und nenne mich faul. Aber flüchtete Designs sind einfacher zu erstellen und weniger zeitaufwendig zu erstellen. jedoch Der größte Vorteil des flachen Designs istjedochdie geringe Zeit. Es dauert weniger Zeit, um eine Webseite in Ihrem Browser oder Ihrem Smartphone oder Tablet innerhalb dieses Browsers zu laden , Vergleich zu einem realistischen Design mit all seinen Texturen und Schatten und Fotos und Grady INts, etc. Daher hat ein flaches Design eine bessere Chance auf Ranking und Suchmaschinen, im Vergleich zu einem realistischen Design basierend auf der Geschwindigkeit, die diese Website lädt. Nun gibt es natürlichauch andere Faktoren, natürlich die in das Ranking einer Website gehen, aber die Geschwindigkeit ist einer von ihnen, so dass je schneller Ihre Website geladen wird, desto bessere Punktzahl erhalten Sie von Google oder einer anderen Suche -Engines basierend darauf, wie schnell diese Website geladen wird. Am Ende aber aber kommt es auf eine Frage der persönlichen Präferenz, Markenidentität Ihres Kunden und das Ziel der Website. In Ordnung, jetzt werfen wir einen Blick auf einen anderen Design-Stil auf diesem, den wir betrachten werden, heißt minimalistisch. Oft kann minimalistisch mit dem flachen Design-Stil verwechselt werden. jedoch Es gibtjedocheinen deutlichen Unterschied. Ein flacher Design-Stil und der Realismus Stil, für diese Angelegenheit bezieht sich auf die visuelle Ästhetik der Elemente einer Webseite die Menüs, Schaltflächen, Hintergründe und alle anderen Grafiken, die die Seite bilden. Minimalismus hingegen hingegen bezieht sich auf eine Designphilosophie. Weniger ist mehr als Designer, Ihr Ziel ist nur Zehe. Fügen Sie die wichtigsten und notwendigen Elemente hinzu, um das Ziel dieser Webseite zu erreichen, weshalb es manchmal mit flachem Design verwechselt wird, da es auch gut, minimal in seinem Design ist . jedoch Der Unterschied liegtjedochnicht in den grafischen Elementen selbst oder in der visuellen Ästhetik, sondern wie viele Elemente wieder in einem Design verwendet werden, weniger ist mehr. Werfen wir einen Blick auf einige Beispiele, so dass Apple uns ein perfektes Beispiel für Minimalismus bietet. Wir haben eine Kopfzeile hier oben mit einigen Menüpunkten. Wir haben Inhalte, die sehr direkt auf den Punkt kommen. Wir haben ein paar genannte Aktionstasten und dann haben wir ein Produkt sehr, sehr einfach. Es gibt wirklich keine Notwendigkeit, etwas anderes hinzuzufügen, weil Sie genau wissen, worum es auf dieser Seite geht. Das iPhone 10. Entweder möchten Sie mehr erfahren oder kaufen. Jetzt ist es sehr minimal. Gleiches mit dieser Website hier, obwohl sie ein Bild für den Hintergrund verwenden. Aber es ist immer noch sehr einfach und bis zu dem Punkt wissen Sie genau, was sie tun, basierend auf dem Bild und dem Inhalt genau hier. Und dann haben Sie Optionen, um zu anderen Teilen der Website sehr minimal zu navigieren, und dann ist die nächste Seite auch minimal. Es ist mit Inhalt auf der Seite Produkt in der Mitte und dann einige zusätzliche Informationen hier oben auf der rechten Seite, so ist es sehr minimal und auf den Punkt. Unser nächster Designstil ist ein wenig mawr Gegenteil von Minimalismus und vielleicht sogar das flache Design, denn die Ästhetik der grafischen Elemente hat viel mehr Informationen oder Details, so werden wir einen Blick auf ein Retro-Design werfen Stil. Dieser Stil umfasst also Mawr Vers weniger. Und wie ich bereits erwähnt habe, hat es auch ein wenig Realismus darin, die Elemente darzustellen, aus denen die Seite besteht , um hat es auch ein wenig Realismus darin, die Elemente darzustellen, aus denen die Seite besteht, umihr einen Retro-Look zu verleihen. Und dieser Designstil ist ein erworbener Geschmack, und er wird begrenzt sein, basierend auf der Markenidentität Ihres Kunden, seinen Zielen für seine Website und dem, was sie versuchen, mit ihrem besonderen Designstil oder ihrem Aussehen zu porträtieren . Alles klar, also lassen Sie uns einen Blick auf einige Retro-Designs werfen, nur um eine Vorstellung davon zu bekommen, was wir mit diesem besonderen Stil machen können und wie man ihn kreiert. So besteht ein Retro-Design aus verschiedenen Elementen, um ihm das Retro-Gefühl zu geben, und das kann Banner und Bänder, die Art des Textes und natürlich andere typografische Elemente, wie diese wenig Kante um den Inhalt, der ausgefranst ist und Art von sieht aus wie eine alte Schule Art von Papier und dann, natürlich, andere Elemente und Schriftarten als auch. Diese spezielle Website hat einen Realismus Art Gefühl, es sowie ein Retro-Gefühl, und das basiert auf den Bildern, die verwendet werden, um es zu geben. Dieser Retro-Look hat einen 1/2 Ton-Prozess. Wenden Sie sich auf die Bilder an, was am Tag beim Drucken auf einer Presse aufgetreten ist. Und dann, natürlich, die Verwendung von bestimmten Schriftarten und anderen grafischen Elementen fügt auch das Retro-Gefühl hinzu, so dass Sie verschiedene Stile mischen und anpassen können, um mit Ihrem eigenen Stil zu kommen. Das ist natürlich natürlich das Retro und der Realismus für dieses besondere Design gemischt. Dieser hat im Grunde das gleiche getan, was das Hinzufügen von Realismus mit einem echten Foto und dann bestimmte Arten von Schriftarten, um ihm ein Retro-Gefühl zu geben. Dieser verwendet eine Kombination aus Schriftarten, Farben und grafischen Elementen, um ihm das Retro-Gefühl zu verleihen. Diese besonderen Farben hier, die Grautöne und die Orangen, sind repräsentativ für das, was in den fünfziger und sechziger Jahren verwendet wurde. Natürlich gibt es auch andere Farben, je nach Zeitraum, Aber diese Luft einige beliebte Farben aus diesen Zeiträumen. Dieser verwendet eine Kombination aus grafischen Elementen, Text und verschiedenen Arten von Retro-Farben, um das Retro-Design zu vervollständigen, sowie das Hinzufügen einiger grafischer Elemente, die in der Natur fast realistisch sind, basierend auf der Menge der Textur und Detail in den Vögeln und die Hunde und Dinge wie das. Das sind also alle verschiedene Arten von Möglichkeiten, mit denen Sie ein Retro-Design erstellen können. Aber wieder, es ist ein erworbener Geschmack, und es wird etwas sein, das vielleicht Ihr Kunde will und speziell gefragt wird . Oder es könnte etwas sein, das Sie aufgrund ihrer Kundschaft und ihrer besonderen Markenidentität empfehlen können . Alles klar , der nächste Designstil, den ich mit Ihnen teilen möchte, ist als Illustrationsdesign-Stil bekannt . Es wird also hauptsächlich aus Illustrationen im Vergleich zu Fotos bestehen. So kann dieser Designstil aus Illustrationen bestehen, die entweder flach sind oder ein realistischeres Aussehen haben . Oder, wenn Sie sich wirklich kreativ fühlen, können Sie eine Mischung aus Flach und Realismus mit Ihrem illustrierten Webdesign machen. So geben diese Arten von Designs Art das Gefühl einer lustigen und entspannten Art von Umgebung und genau wie einige andere Designstile, Wahl dieser spezifischen Art von Design-Stil wird von Ihrem speziellen Kunden abhängen und ihre Markenidentität. Lassen Sie uns also voran und werfen Sie einen Blick auf einige Beispiele. Jetzt, wie alle unsere verschiedenen Designstile, können Illustrationen selbst in verschiedenen Arten von Stilen als auch kommen. Für diese spezielle Website haben wir also eine Illustration mit einigen Texturen über die Elemente, die für diese bestimmte Website gezeichnet wurden . Auch dieser nächste hat grafische Elemente, die Texturen in den Illustrationen oder Grady INts enthalten. Aber auch einige der Elemente sind flach und Design, so dass Sie diese auch mit Ihren Illustrationen kombinieren können. Und dann ist eine andere Art der Illustration, einen Drei-D-Typ-Effekt zu erzeugen. Oder, wenn Sie Old School sind und Ihr Kunde ist Old School und Sie mehr von einer illustrativen Art Bleistiftzeichnung Ihrer Charaktere tun möchten , können Sie das tun. Und diese Website enthält diese Art von Illustration zusammen mit realistischen Fotos für mehr Realismus, um ihr bestimmtes Produkt zu verkaufen. Aber auf der gesamten Website werden Sie feststellen, dass es viele andere Arten von Illustrationen, die in das Design der Website integriert sind . Und natürlich gibt es auch andere Arten von Medien. Insbesondere dieses verwendet eine Aquarell-Illustration als dominante Bildsprache für seine Website. So können Sie sich illustratives Design als ein weiteres Konzept vorstellen, das Sie für verschiedene Arten von Websites basierend auf der Kundenspitze und der Markenidentität für das jeweilige Unternehmen bewerben können verschiedene Arten von Websites basierend auf der Kundenspitze und der Markenidentität für das . Und dann natürlich müssen Sie sich natürlichfür den Stil dieser Illustration entscheiden. Sobald Sie sich entscheiden, dass Sie mit diesem besonderen Design-Stil für eine Website gehen möchten, so ist es nicht nur eine Frage der okay. Ich möchte illustrative Typentwürfe machen. Nun, welche Art von Illustrationen wollen Sie dio Aquarell Kohlestift Zeichnungen, drei D flache Designs? Es gibt also noch viel mehr Entscheidungen, die in die Erstellung eines illustrativen Webdesigns gehen . In Ordnung, also das nächste Design, also möchte ich mit dir teilen, ist bekannt als Grunge-Stil, , der, wie das Retro-Design, das Gegenteil von Minimalismus ist. Runge ist alles andere als minimal oder sogar symmetrisch oder ausgewogen. Grunge hat einen schmutzigen Look mit Ihren regelmäßigen, manchmal nicht so hübschen visuellen Elementen. Dies ist ein weiterer dieser Designstile, der sich auf den Geschmack Ihres Kunden oder deren Markenidentität oder sogar auf das Publikum beschränken wird, das sie verfolgen. So können Sie an Grunts Stil denken für vielleicht Rock oder sogar während Grungemusiker oder sogar andere Arten von Unternehmen, die für diese Musiker oder Künstler gerecht zu werden. So können sie eher geneigt sein, diese besondere Art von Design-Stil im Vergleich zu verwenden, Lassen Sie uns sagen, ein Arzt oder ein Zahnarzt. Werfen wir einen kurzen Blick auf ein paar Läufe Stil Designs, genau wie mit dem Retro-Design-Stil. Die Elemente, aus denen die Seite besteht, die Texturen und die verwendeten Bilder erzeugen diesen Grungeeffekt. Die verwendeten Schriftarten sind also eher ein Grunge-Typ einer Schriftart und die gesamte Textur und Überlagerung dieser Textur über Bilder sowie die anderen Designelemente. Geben Sie ihm diesen Grunge-Look oder das Grungegefühl auf dieser Website. Dieser ist gut, verwendet einige grafische Elemente, um das Grunge-Look und Feel zu schaffen, und das basiert auf der Hintergrundgrafik hier, wo es aussieht, als ob das Papier oder die Website tor oder zerrissen wird, und es hat ein Grungegefühl, zusammen mit den Schriftarten, die als Teil des Logos verwendet werden, schafft ein Grungegefühl. Unser endgültiger Webdesignstil wird als geometrischer Designstil bezeichnet , der darin besteht, Formen oder andere grafische Elemente in einer Weise zu verwenden, die optisch für das Auge angenehm ist . Und es kann sogar eine Komposition mit diesen geometrischen Formen liefern, die einen Besucher in die Richtung führt , die Sie sie nehmen möchten. Mit dieser speziellen Website verwenden sie verschiedene geometrische Formen, die nicht mit dem übereinstimmen, was wir in der Vergangenheit von anderen Websites in Form von Quadraten oder Rechtecken oder sogar Kreisen gesehen haben . Diese besondere geometrische Form wird nicht so viel verwendet wie diese anderen Formen, und es sorgt für ein interessantes Design und organisiert all diese verschiedenen Fotos und Texte und Inhalte in ihnen, um zu helfen, zu organisieren und zu machen, was wir finden wollen. Diese nächste Website verwendet auch geometrische Formen, um Inhalte in sie zu setzen, um sie von den anderen Inhalten zu trennen, und visuell macht es viel einfacher zu sehen, anstatt nur, dass alles über nur einige Rechtecke verstreut . Und das ist im Grunde, was Sie auf vielen Websites sehen, ist nur Inhalt innerhalb von Quadraten, Rechtecken oder Kreisen, und diese verwendet verschiedene geometrische Formen als Teil des Designs. Was viel interessanter ist, denke ich, als die konventionellen Formen, die wir in der Vergangenheit verwendet haben. Diese verwendet geometrische Formen, um Inhalt darin zu halten, aber es tut es auf eine einzigartige und rationellere Weise im Vergleich zu den anderen beiden Standorten. Aber es beschränkt immer noch diesen Inhalt innerhalb der geometrischen Formen. Und es macht es auf eine Weise, die uns dazu bringt, diesem Pfeil hier zu folgen, nach unten zu scrollen und unsere Reise basierend auf dieser geometrischen Form fortzusetzen, wo es diesen Zeiger nach unten zeigt , der eine gute visuelle Möglichkeit ist, Ihre , um mit dem Scrollen durch den Rest der Seite fortzufahren. Das ist also nur eine andere Möglichkeit, geometrische Formen in Ihren Entwürfen zu verwenden. In Ordnung, also haben wir sieben verschiedene Arten von Designstilen und die Designs behandelt. Wie Sie sich für ein bestimmtes Projekt entscheiden, hängt vom Kunden, der Markenidentität und deren Zielgruppe ab. All das muss man berücksichtigen, bevor man sich für einen Designstil entscheidet. Aber wenn Sie sich auf einen bestimmten Designstil spezialisiert haben, dann wissen Sie, dass Kunden, die zu Ihnen kommen, diesen besonderen Designstil erwarten werden . Und Sie müssen sich nicht zu sehr darum kümmern, sich auf den Designstil zu konzentrieren, da Sie sich für Ihre Spezialität entscheiden. Okay, das ist es also für unsere Webdesign-Styles im nächsten Abschnitt oder die nächste Lektion, die wir beginnen werden. Schauen Sie sich die Anatomie einer Website an, all die verschiedenen Abschnitte und Teile, aus denen eine Webseite besteht. Wir werden auf jeden dieser Abschnitte im Detail eingehen, und ich werde Ihnen einige Pro-Tipps und einige Best Practices geben, um jeden dieser verschiedenen Abschnitte zu entwerfen . Also, wenn du bereit bist, da zu kommen, lass es uns tun. 12. Lasse dich inspirieren: Lassen Sie uns darüber sprechen, als Webdesigner die Best Practices und Dinge zu vermeiden inspiriert zu werden. Also wahrscheinlich ist das einfachste, was zu tun ist, nur eine Google-Suche nach Web-Design-Ideen zu tun. Beste Web-Designs. Oder vielleicht, wenn Sie auf einem bestimmten Teil der Website stecken, könnten Sie Web-Design, Header-Ideen, Web-Design, Fußzeilenideen, Dinge wie diese tun Header-Ideen, Web-Design, Fußzeilenideen, , um einige Inspiration für Ihr aktuelles Projekt zu erhalten. Das ist eine Möglichkeit, Inspiration zu bekommen, ist Google. Die andere ist durch 99 Designs, und dies ist ein Crowd Sourcing Ort, wo Sie als Grafikdesigner gehen und auf Jobs bieten können. Also, was ist Ihr A-Designer und Sie sind ein Mitglied dieser Community. Sie können in Wettbewerben gehen, und Sie können nach unten filtern, was Sie brauchen Inspiration. Hier habe ich Web- und APP-Design-Projekte, und zu diesem Zeitpunkt gibt es über 14.000 Projekte, die geschlossen sind, die ich filtern und nach Hilfe suchen kann , mir Inspiration für mein aktuelles Projekt geben und auch fertige Projekte ausgewählt haben versus open, weil open Ihnen nicht immer Entwürfe für dieses bestimmte Projekt zeigen wird weil ah viele von ihnen blinde Projekte sind, also ist es besser, in den fertigen Status zu gehen und dann können Sie zu verschiedenen Wettbewerben navigieren , um diese verschiedenen Arten von Designs, um Inspiration von jetzt zu erhalten. Das Einzige, was Sie nicht tun möchten, ist, dass Sie ein Design nicht kopieren möchten. Genau. Also hier können wir für diesen speziellen Wettbewerb sehen. Dies war das gewinnende Design, das der Kunde ausgewählt hat. Und wenn Sie sich entscheiden, eine Website zu entwerfen, sei es auf eigene Faust oder über einen Service wie 99 Designs, vor allem, wenn Sie ein Designer auf dieser Crowd-Sourcing-Plattform werden, werden Sie von der Plattform gebootet weil Sie im Verhaltenskodex des Designers feststellen werden, dass originale Kunstwerke ein Muss sind. Wenn Sie dieses Design kopieren und versuchen, es an einen anderen Kunden zu verkaufen, werden Sie von dieser Community suspendiert und Sie werden nicht mehr in der Lage sein, durch dieses Unternehmen zu arbeiten, so dass sie eine Aussetzungsrichtlinie haben, die mit diesem Sie von dieser Community suspendiert und Sie werden nicht mehr in der Lage sein, durch dieses Unternehmen zu arbeiten Verhaltenskodex des Designers verknüpft ist . Das erklärt, dass man Originalarbeiten machen muss, da alle Designs standardmäßig vom ursprünglichen Künstler urheberrechtlich geschützt sind . Und indem Sie diesen Künstler kopieren, verletzen Sie ihr Urheberrecht, und Sie werden von diesen Crowdsourcing-Websites verboten. Nicht nur das, wenn zum Beispiel für Siezum Beispiel fürein Tech-Unternehmen arbeiten und auf Apples Website gehen und sagen: „ Weißt du was? Ich liebe ihr Layout und Sie kopieren ihr Layout genau. Nun, rate mal was? Irgendwann wird Apple herausfinden, weil Ihr Unternehmen wächst und Ihr Website-Design genau wie ihre ist . Sie werden dich kontaktieren, und sie werden dich verklagen, weil sie ihr Webdesign gestohlen haben. Jemand hat diese spezielle Website entworfen, ob es sich um ein separates Unternehmen oder jemand innerhalb des Unternehmens handelt. Apple besitzt dieses besondere Design, und Sie können dies nicht exakt kopieren. Andernfalls werden Sie gegen ihr Urheberrecht verstoßen, und sie werden Sie wegen Entschädigung für diesen Diebstahl verklagen. Also, was auch immer Sie tun, stehlen Sie nicht die Website-Designs anderer Leute. Die andere Sache, die Sie berücksichtigen müssen, sind die Bilder und jede Art von ClipArt, die Sie in Ihrem Webdesign verwenden . Beide sind urheberrechtlich geschützt, abhängig von der Lizenzierung für das jeweilige Kunstwerk. Die meisten Stockbilder, wenn Sie zu Stockfotos dot com gehen, zum Beispiel, alle diese Bilder haben ein Urheberrecht, und Sie müssen eine Lizenz bezahlen, um es zu verwenden. Aber Sie können diese Bilder mit einem Copyright-Wasserzeichen darüber als Teil Ihres Designs verwenden. Aber Sie müssen Ihrem Kunden mitteilen, dass diese bestimmten Bilder urheberrechtlich geschützt sind und wenn sie genau das gleiche Bild verwenden möchten, müssen sie die Rechte zahlen, es mit ClipArt zu verwenden . Wenn Sie einen clippard verwenden, der urheberrechtlich geschützt ist müssen Sie entweder eine Lizenzgebühr bezahlen. Oder manchmal, wenn es darum geht, ClipArt, der Schöpfer dieses Clipper wird nach einer Namensnennung fragen, die sagt, Diese bestimmte Website wurde mit ClipArt erstellt und dann stellen Sie einen Link zurück zu diesem Künstler. Also, das ist etwas, das Sie in die Fußzeile setzen würden. Sie möchten also die Lizenzvereinbarung für das jeweilige Kunstwerk herausfinden, das Sie für eine Website verwenden möchten , bevor Sie es tatsächlich auf einer Lebenswebsite verwenden. Also, zum Beispiel, dieses kleine Suchsymbol hier wurde von jemandem erstellt, das ein Designer erstellt hat, und wenn Sie diese spezielle Lupe online finden und Sie das bestimmte Bild gestohlen haben, ohne eine Attribution oder die Bezahlung einer Lizenz als dieser Grafikdesigner kann grundsätzlich zurückkommen. Und so hast du genau wie Apple es getan. Verwenden Sie also keine Art von Bildern oder ClipArt, ohne zuerst herauszufinden, was das Urheberrecht und die Lizenzierung für dieses bestimmte Kunstwerk ist, bevor Sie es tatsächlich verwenden. Das sind Best Practices. Also, was auch immer du tust, stehlen Sie nicht die Arbeit anderer Leute. Stellen Sie sicher, dass alles richtig lizenziert ist. Bevor Sie anfangen, es auf Lebensstätten oder sogar in Wettbewerben wie durch 99 Designs zu verwenden. Sie möchten kein urheberrechtlich geschütztes Bildmaterial verwenden. Andernfalls werden Sie von ihrer Community gebootet. Wenn Sie also auf verschiedenen Websites nach Inspiration suchen, müssen Sie sich fragen. Okay, ich mag das Layout. Ich mag die Farben. Ich mag die Schriftarten, aber was kann ich tun, um sie besser zu machen? Nun, die Firma, für die Sie arbeiten, wird eine andere Markenidentität haben als diese Firma hier. Sie werden verschiedene Farben haben und vielleicht verschiedene Schriftarten, die Teil ihrer Markenidentität sind , also wird das anders sein. Aber die andere Sache, die Sie anders machen können, ist, einige Elemente neu anzuordnen, die unterschiedliche Bilddaten verwendet werden . Sie möchten dieses Bild hier nicht verwenden. Sie möchten Ihren Heldenbereich vielleicht eine andere Größe machen. Vielleicht beschränken Sie sich anstelle des vollständigen Blutzugs auf das Bild auf die Größe dieses Inhalts, was diese Information hier unten ist. Vielleicht ist das 960 Pixel breit. Sie würden also dieses Bild so groß machen, dass es links und rechts neben dem Inhalt aufgereiht ist, und das macht einen Unterschied. Ich würde vielleicht das Menü hier oben oben verschieben, vielleicht platzieren Sie diese Inhaltsinformationen hier oben mit den Suchelementen erscheinen. Wenn ihre Suchelemente, vielleicht möchten Sie eine Suche Geburt hinzufügen, so dass wird einen Unterschied machen. Du willst es nicht genauso machen. Aber vielleicht gefällt Ihnen die Schattierung im Schlagschatten dieses Menübereichs hier. So könnten Sie das tatsächlich umdrehen und es nach oben bewegen. Sie können das Logo nach innen links vom Menü verschieben. Sie verwenden nur im Grunde die Schattierung für dieses spezielle Menü. Aber Sie ordnen die Elemente neu an, so dass Sie mit den Symbolen Ihre eigenen einzigartigen Designs gleich kommen . Sie möchten nicht das gleiche Symbol verwenden. Möchten Sie verschiedene Icons finden oder eigene Icons erstellen, um das Gesamtdesign anders zu gestalten ? So würde ich Inspiration für ein bestimmtes Projekt finden, an dem ich arbeite , indem ich die Markenidentität für meinen Kunden herausfinden , die Farben und die Schriftarten erarbeiten, die ich zuerst verwenden möchte, und dann Erstellen der verschiedenen Abschnitte von ihrer Webseite basierend auf dem, was sie benötigen. Brauchen sie eine Sidebar? Wenn nicht? Nun, du musst dir keine Sorgen um die Sidebar machen. Sie werden eine Kopfzeile brauchen. Sie werden Navigation brauchen. Und dann ist es nur eine Frage der Entscheidung, wie Sie alles auslegen werden. Plus die visuelle Ästhetik der Kopfzeile, die der Schlagschatten für den Menühintergrund und alles andere als Faras wäre. Das Styling bezieht sich auf den Text und alle anderen Arten von grafischen Elementen für diesen bestimmten Abschnitt 13. Einführung in das Raster: Alles klar. Ich weiß, dass Sie wahrscheinlich bestrebt sind, mit der Gestaltung unserer Projekte zu beginnen, aber es gibt noch eine Sache, die wir wissen und lernen müssen, bevor wir mit der Gestaltung von Websites und Gimp beginnen , und das ist das Grid-System. In diesem Abschnitt erfahren wir, was ein Grid-System ist und warum wir es mit unseren Webdesigns verwenden möchten. Und ich werde Ihnen zeigen, wo Sie verschiedene Arten von Grid-Systemen kostenlos bekommen können. Also, wenn Sie bereit sind, alles über das Grid-System zu erfahren, machen wir es. 14. Rastersystem: hallo und willkommen zurück. Bevor wir in unsere Web-Design-Projekte einsteigen, möchte ich zunächst mit Ihnen das Grid-System teilen, das wir für diese Web-Design-Projekte verwenden werden . Und ich möchte auch erklären, was ein Grid-System ist, falls Sie sich nicht sicher sind, was es ist. In dieser Lektion werde ich diese Informationen einfach mit Ihnen teilen. Und dann zeige ich Ihnen, wo Sie das Grid-System herunterladen können, damit Sie es in diesem Kurs mit den Webdesign-Projekten verwenden können . Also im Grunde, ein Rastersystem ermöglicht es Ihnen, Ihre Web-Designs zu optimieren, weil es häufig verwendete Dimensionen basierend auf einem bestimmten mit bietet . Nun der Industriestandard 960 Pixel breit, und es gibt zwei verschiedene Varianten dieses Rastersystems, das entweder 12 oder 16 Spalten ist. Warum werden wir also ein Gittersystem wie dieses verwenden? Nun, es hilft uns, indem wir die Spaltengrößen vordefinieren und ermöglicht es uns, gleichmäßig auseinander zu räumen, sind verschiedene grafische Elemente und bieten gleichen Abstand zwischen ihnen, um uns zu helfen, alle Elemente auszurichten und Symmetrie zu unseren Web-Designs zu geben. Zum Beispiel, wenn wir drei Spalten mit Inhalt haben. Dann wissen wir, dass ein 12-Säulen-Raster am besten für dieses spezielle Setup funktioniert. Und der Grund dafür ist, dass 12 Spalten in drei gleich vier geteilt sind. Und dann, wenn wir vier Spalten mit Inhalt haben, wäre es besser, zu einem 16-Spalten-System zu wechseln, da 16 geteilt durch vier ist vier, und insgesamt wird es besser Platz aus unseren Inhalten in dieser Hinsicht. Nun, das Grid-System, das ich benutze, kommt von dieser Website hier, die 9 60 Punkt gs ist. Also gehen Sie voran, navigieren Sie zu dieser Website, und wenn Sie hier nach unten scrollen und auf Show Raster klicken, werden Sie diese verschiedenen Spalten sehen, jede rote Überlagerung, und Sie werden feststellen, wie die verschiedenen Elemente der Seitenentwurfslinie nach oben, und wir können sehen, dass der Abstand zwischen diesem Inhalt ist sogar auf der gesamten Webseite . Durch die Verwendung dieses Rastersystems stellen Sie sicher, dass alle Elemente gleichmäßig aufgereiht sind, und dies am Ende wird Ihnen ein viel besseres Design geben, als wenn Sie es nur Flügel und Elemente haben verteilt über den ganzen Ort. Es wird keine Symmetrie geben. Es wird schwierig sein, durch die Seite zu navigieren, und es wird sehr chaotisch sein, wenn Sie kein Grid-System verwenden. Nicht nur das, aber die Verwendung eines Grid-Systems hilft definitiv, Ihren Workflow zu rationalisieren und macht es einfacher und schneller für Sie, alles zu entwerfen und alles in eine richtige Position zu bringen. Jetzt ist das einzige Problem mit dem 9 60 Grid-System, dass es ein wenig veraltet ist. Sie könnten es immer noch verwenden, aber es war nicht wirklich für responsive Websites für iPads Smartphones entwickelt, Dinge wie das. Also zurück in den Tag vor den Smartphones, die wir heutzutage und Tablets haben, war dieses System alles, was Sie wirklich brauchten. Aber jetzt, mit all den verschiedenen Größen von mobilen Geräten und der Größe der Monitore, brauchen wir ein größeres Gittersystem, und das, das ich empfehle, ist ein 1200 Rastersystem oder 1200 Pixel breit. Dies wird also mehr Geräte und mehr Monitorgrößen im Vergleich zu 9 60 aufnehmen, wird es auch perfekt sein. Erste Websites, die reaktionsschnell sein müssen. Der andere Vorteil ist, wenn ein Kunde eine bestimmte Größenanforderung hat, können Sie leicht auf das für dieses Projekt benötigte Gittersystem verkleinern. Jetzt werden wir das Grid-System von hier herunterladen. Aber das Problem ist, dass sie kein 1200 Grid System haben, so dass wir das leicht beheben können, indem wir das 9 60 Grid System von hier herunterladen. Klicken Sie einfach auf diesen großen alten Download-Button hier, um das 9 60 Grid System herunterzuladen. Öffnen wir die Datei und wandeln sie in ein 1200 Rastersystem um. Also lassen Sie uns in Vorlagen gehen. Wollten Sie sich für Photoshopped entscheiden? Lassen Sie uns einfach die 12 Grid-Spalte für den Moment machen. Mach es auf. Gehe zum Bild, gehe zur Bildgröße und jetzt sollte es 10 20 mal 10 20 sagen. Wir haben also extra 40 Pixel, also haben wir einen kleinen Atemraum auf beiden Seiten des Rastersystems. Also für die Bildgröße, lassen Sie uns 200 Pixel hinzufügen. Jetzt haben wir 1220 von 1220, die uns unser 1200 Gittersystem geben werden. In Ordnung, jetzt, da Sie die Größe des Rastersystems geändert haben, speichern Sie es als Masterdatei und dann werden wir das für alle Designprojekte in diesem Kurs verwenden und was Sie tun möchten, ist, wenn Sie mit einem Projekt beginnen, gehen, um zu speichern, wie so können Sie diese Datei für dieses bestimmte Web-Design-Projekt speichern und halten Sie sie getrennt von Ihren Stammdateien, so dass Sie immer zurück zu Ihrem Master-Datei für das nächste Projekt gehen können sind Hey, jetzt, wo wir endlich all diese Informationen aus dem Weg, ist es Zeit, mit der Gestaltung von Websites zu beginnen. Ich hoffe, du bist bereit. Ich bin aufgeregt und kann es kaum erwarten, mit Ihnen alle meine Tipps und Geheimnisse für die Gestaltung von Websites und Photoshopped zu teilen . Also, wenn du bereit bist, lass es uns tun. 15. Pixel-Perfekt: für diese Lektion. Ich möchte Ihnen nur noch ein paar Tipps geben, wenn Sie eine Website entwerfen, und die 1. 1 ist, organisiert zu bleiben. Wenn Sie Ihre Website entwerfen, werden Sie verschiedene Teile dieser Website basierend auf der Anatomie der Website erstellen , ob es die Kopfzeile, der Held, der Körper, die Fußzeile Sidebar, was auch immer Sie organisiert werden möchten. Und was ich damit meine, ist, dass Sie Ihre Ebenen und weg organisieren möchten, so dass es leicht zu finden und zu finden ist, was Sie brauchen. beispielsweise Diese bestimmte Webseite verfügtbeispielsweiseüber mehrere Abschnitte. Wie Sie sehen können, habe ich einen Gruppenspieler für die Kopfzeile, den Helden, den Körper und die Fußzeile. So kann ich leicht auf das zugreifen, was ich für diesen bestimmten Abschnitt innerhalb von hier brauche. Wir haben den Körper und ich habe ein paar verschiedene Teile des Körpers, sowie einen Abschnitt über und einen Review, und es ist alles innerhalb dieser gruppierten Ebenen jetzt innerhalb der Gruppenebene organisiert. Ich habe zusätzliche Gruppenspieler mit zusätzlichen Inhalten, so dass ich leicht auf diesen Teil der Website zugreifen kann. Es hilft auch mit dem Webentwickler. Wenn Sie diese Datei an den Webentwickler übergeben, müssen sie wissen, was wohin geht und indem sie alles in gruppierten Layern organisieren. Es macht es ihnen leicht, einen Zugriff auf diese Informationen zu finden, damit sie wissen, an welchem Schritt sie Nächstes arbeiten müssen. Die andere Sache, die Sie tun möchten, ist, dass Sie Ihre Web-Designs Pixel perfekt entwerfen möchten. Und was ich damit meine ist, dass du alles perfekt aufstellen willst. Also, wenn dieser Titel und dieser Inhaltsbereich um ein paar Pixel hier unten links waren , na ja, na ja, raten Sie was? Die Web-Entwickler denken, dass Sie das absichtlich gemacht haben und es wird nicht mit dieser Box hier aufstellen , und es wird weg nach links sein. Aber wenn Sie es pixelgenau tun, sollte der Webentwickler diese Elemente wie entworfen nach links ausrichten . Wenn Sie also Fehler in Ihrem Design machen, wird der Webentwickler nicht wissen, dass dies Fehler waren und tatsächlich die Website basierend auf dem, was Sie ihnen tatsächlich geben, codieren . So möchten Sie ein Pixel perfektes Web-Design erstellen und alles perfekt ausrichten, wie Ihr Design und bevor Sie es an den Web-Entwickler übergeben. Die andere Sache wird tun, ist es wird Sie in die Gewohnheit bringen, Pixel perfekte Designs von Anfang an zu erstellen , und es wird auch symmetrisch sein. Wir haben nicht einmal einen großen Abstand zwischen diesen drei Spalten. Und wenn diese Spalte weiter links war und die Lücke zwischen den beiden Säulen größer war als diese, dann wird sie nicht symmetrisch sein. Und es wird nicht ausgeglichen sein. Das wird absehen. Es wird nicht ein gutes Design wird ein schlechtes Design sein. Sie möchten in der Lage sein, ein Design zu schaffen, das angenehm für das Auge ist, ergreift das Interesse der Person, hält ihr Interesse, und dann, basierend auf den aufgerufenen Aktionen, bekommen Sie sie zu tun, was Sie wollen für dieses besondere Design. Wenn Sie nicht von Anfang an mit einer Pixel perfekten Absicht entwerfen, dann werden Ihre Entwürfe schlampig aussehen. Sie werden nicht in der Lage sein, einen hohen Preis für Ihre Designs zu kommandieren, und Sie werden weniger Geschäft bekommen, so stellen Sie sicher, dass Sie mit der Pixel perfekte Mentalität entwerfen. Haben Sie alles richtig symmetrisch ausgerichtet und haben Sie keine Fehler und Ihre Entwürfe bevor Sie an den Web-Entwickler oder sogar Ihr Portfolio gehen, weil jemand einen Fehler bemerkt und sich entscheiden kann, Sie nicht einzustellen weil Sie sich nicht die Zeit genommen haben, auf die feinen Details dieses speziellen Designs zu achten. Und sie werden jemanden einstellen wollen, der sich diese Zeit braucht, um auf diese kleinen Details zu achten , und sie zahlen eher einen höheren Preis für diese Liebe zum Detail. Wenn Sie also anfangen, Entwürfe für Ihr Portfolio zu entwerfen und dann Ihre Dienstleistungen zu bewerben, möchten Sie das im Hinterkopf behalten, alles organisieren und mit dieser perfekten Pixel-Mentalität gestalten. So verurteilen Sie und einen höheren Preis und erhalten mehr Arbeitsplätze in den Prozess. 16. Einführung in die 7 Projekte: In Ordnung. Also rate mal, wie spät es ist. Das ist richtig. Es ist der Moment, in dem du auf dein ganzes Leben gewartet hast. , Na gut, vielleicht nicht so lange, aber es ist Zeit, Websites und Gipp zu entwerfen. Ja, ja. In Ordnung. Wir haben also sieben Design-Projekte, an denen wir arbeiten werden, und wir werden viele Werkzeuge und Gimp verwenden, um diese Entwürfe zu realisieren. Und wir werden eine Menge der Werkzeuge immer und immer wieder verwenden, was großartig ist, was großartig ist, denn wenn Sie alle sieben Projekte erledigt haben, sollten Sie gemeistert haben oder zumindest eine sehr gute Idee haben, wie Sie die Gimp-Tools verwenden, die wir verwenden müssen, um unsere Websites zu entwerfen und Gimp. Okay, also wirst du nicht nur das Projekt übernehmen und mein Design neu erstellen, das ich als Praxis erfunden habe. Aber sobald Sie damit fertig sind, möchte ich, dass Sie diese Website in Ihrer eigenen kreativen Vision neu erstellen. Ich möchte, dass Sie sich etwas Besseres einfallen lassen, damit Sie dieses Design dann in Ihr Portfolio bringen können. Also, wenn Sie bereit sind, mit der Gestaltung von Websites und Gib gut zu beginnen, lassen Sie es uns tun 17. Projekt 1: Nike Briefing: Alles klar, lassen Sie uns einen Blick auf Nikes aktuelle Homepage werfen, und wie Sie sehen können, hat es ein schönes, sauberes, modernes Design. Die Navigation ist zentriert, und wenn Sie den Mauszeiger über jedes der Elemente bewegen, können Sie sehen, dass sich ein Mega-Menü präsentiert und alle verschiedenen verfügbaren Produkte zeigt . Wir haben auch einfachen Zugriff auf bestimmte Marken und Optionen für den einfachen Zugriff auf ein Konto. Wenn Sie bereits einen Zugang zu einem Shopping-Kurt haben, einige Hilfeoptionen und einen Such-Button, um etwas Bestimmtes zu finden. So wurde diese Website mit neuen und bestehenden Kunden und Verstand entwickelt, indem es ihren Besuchern leicht macht , genau das zu finden, was sie brauchen. Diese Seite braucht wirklich keine Neugestaltung, aber ich wollte Ihnen zeigen, wie Sie all diese verschiedenen Elemente in einem neuen Design zusammenstellen und Ihnen zeigen können, wie kreativ eine Seite mit zusätzlichem Interesse hinzufügen kann oder aber ich wollte Ihnen zeigen, wie Sie all diese verschiedenen Elemente in einem neuen Design zusammenstellenund Ihnen zeigen können, wie kreativ eine Seite mit zusätzlichem Interesse hinzufügen kann oder die Aufmerksamkeit und sie dazu bringen, das zu tun, was Sie wollen, dass sie in diesem Fall von einigen Schuhen oder anderen Produkten zu tun. Also wird nicht jede Website all diese verschiedenen Elemente haben. Nicht alle Unternehmen, sie werden mehrere Marken haben, und sie haben vielleicht kein Konto, weil sie vielleicht nicht etwas direkt auf ihrer Website verkaufen . Wie diese Website, die eher eine E-Commerce-Art von Website im Vergleich zu einem traditionellen Unternehmen oder Unternehmen Art von Website ist. Sie könnten immer noch Produkte verkaufen, aber vielleicht nicht in einem traditionellen E-Commerce-Stil eingerichtet haben. Diese Anfangsseite ist kein E-Commerce-Stil. Es ist eher ein Informationstyp von Webseite, aber wenn Sie zu ihren spezifischen Produkten navigieren, ist es eher eine E-Commerce-Art von Seitenlayout. Für die Neugestaltung wollen wir die Website wirklich nicht umbenennen, weil Nike bereits ein solides Branding an Ort und Stelle auf ihrer bestehenden Website hat . Wir können es einfach hinzufügen, indem wir verschiedene Elemente hinzufügen, um Besucher dazu zu bringen, was auch immer ihr spezifisches Ziel ist. Und ich denke, für sie ist ihr Ziel, mehr ihrer Produkte zu verkaufen. Also für das Redesign, ich habe keine Rebranding der Website gemacht. Ich wollte mich nur mehr auf ihre drei Top-Marken konzentrieren, nämlich die Air Jordan, die Hurley und Covers, und ich wollte ihre neuesten Schuhdesigns mitnehmen. Markieren Sie diese Produkte, um die Aufmerksamkeit der Menschen auf das spezifische Produkt zu lenken und es den Menschen leicht zu machen , sie über eine aufgerufene Aktionstaste zu kaufen. Aber er wollte auch diese Produkte in einer Weise platzieren, die sich von allem anderen unterscheidet , was Sie da draußen sehen werden. Und das ist, wo die Kreativität ins Spiel kommt, wenn Sie versuchen, Ihr Design von anderen Websites zu unterscheiden . Aber zur gleichen Zeit , wollte ich das Design nicht überlegen, und ich hielt es einfach, indem ich nur drei Hauptelemente hinzufügte. Wir haben den Inhalt mit der aufgerufenen Aktion, dem Hauptschuh und dann einer Person, oder ein Bild einer Person, die mit diesem Schuh interagiert. Also die wichtigsten drei Schuhe, sie alle haben ein bestimmtes Publikum, dass Jahrzehnte oder zwei in den meisten Fällen. Also die Air Jordans Air wird mehr für diejenigen, die, wie Basketball oder High Top Schuhe im Allgemeinen, dann wird Hurley eine Kombination von Schuhen und Sandalen haben. Also vielleicht Strandbesucher oder Surfer oder solche Dinge, und dann unterhalten, oder vielleicht beliebter bei Skateboardern oder anderen Arten von Menschen in dieser Menge. Oder vielleicht einfach oder vielleicht mögen sie einfach nur das Aussehen von Converse im Allgemeinen und hier kommunizieren Sie mit Ihrem Kunden über diese spezifischen Produkte, um zu bestimmen, wie Ihre Münze auch diese Produkte auchauf eine Weise präsentieren, die anders ist, kreativ, aber einfach genug, dass es nicht zu verwirrend ist und Sie immer noch in der Lage sind, die Aufmerksamkeit einer Person zu ergreifen und sie dazu zu bringen, was Sie wollen, dass sie tun, das ist, mehr zu kaufen. Kommunikation ist also von größter Bedeutung für jede Art von Webdesign. Also wählte ich eine bestimmte Art von Person für jedes dieser Produkte, um sie in Aktion mit den tatsächlichen Schuhen zu präsentieren . Also, natürlich, wir haben ein Foto von Michael Jordan für diesen speziellen Schuh, weil sie die Air Jordans sind , und ich wollte nicht nur das Design dieses neuen Schuhs präsentieren, sondern auch die Inspiration für Dieser Schuh. Also lassen wir Michael Jordan durch den Himmel fliegen, und es sieht so aus, als würde er in das Shooting eintauchen. Das allein ist anders, und es wird die Aufmerksamkeit eines Betrachters erregen, weil sie das noch nicht gesehen haben. Dann habe ich einen Surfer, der über die Spitze einer Sandale surft und dann entkommen Grenze, ihr Ding auf der Vorderseite des Schuhs zu tun. Also jede dieser Ideen. Ersatz des Bildes der Menschen auf den Schuhen hilft, visuelles Interesse für diesen bestimmten Schuh oder diese bestimmte Marke zu schaffen . Also für dieses Projekt wirst du lernen, wie er all diese Elemente genommen hat und sie zusammensetzt. Wie man das Bild retuschiert, ist, wie man die Ebenen organisiert, wie man das Mega-Menü erstellt und es so organisiert, dass der Entwickler verstehen wird , dass dies nicht nur ein typisches Navigationsmenü ist, und Sie werden mehr Pro-Tipps auch auf dem Weg. Das erste, was wir tun müssen, ist ein paar Bilder für dieses spezielle Design zu schnappen . Wenn du bereit bist, loszulegen, zeige ich dir, wo ich diese Bilder in der nächsten Lektion habe. Also lasst es uns tun. 18. Bilder: Wenn es um Bilder geht, erhalten Sie entweder die Bilder direkt von Ihrem Kunden oder Sie müssen Lagerbilder in Ihrem Design verwenden. besteht die Wahrscheinlichkeit, dass Ablehnung Ihnen Bilder gibt, als sie bereits die Lizenz für die Nutzung dieser Bilder auf der Website erworben haben . Wenn Sie gehen und Bilder von Aktienagenturen oder von Google-Bildern oder wo immer Sie das Bild finden, müssen Sie den Kunden mitteilen, dass dieses bestimmte Bild urheberrechtlich geschützt ist und sie es nicht auf ihrer Website verwenden können , bis sie eine Lizenz für die Nutzung auf ihrer Website zu erwerben. Andernfalls werden ihre Kunden in Schwierigkeiten geraten und sie können am Ende kommen, nachdem Sie für Schäden für die Verwendung eines Bildes, das urheberrechtlich geschützt war. Sie müssen also nur wissen lassen, dass alle Bilder, die Sie in Ihren Designs enthalten haben, unsere urheberrechtlich geschützt sind und sie müssen dieses bestimmte Bild kaufen, um es zu verwenden . Um das Projekt abzuschließen, müssen wir einige Bilder herunterladen, damit wir diese im Projekt verwenden können. Also habe ich alle Bilder auf Google-Bildern gefunden, und ich habe auch eine Textdatei mit einem Link zu allen Bildern erstellt, die ich verwende, damit Sie diese Datei aus dieser Vorlesung herunterladen und zu jedem der Bilder navigieren und sie dann zu Ihrem Gimp hinzufügen können -Dokument. Jetzt möchte ich darauf hinweisen, dass, obwohl ich direkte Links zu den Bildern bereitgestellt habe, die ich verwende , sie möglicherweise zum Zeitpunkt, zu dem Sie sich dieses Video-Tutorial ansehen, verfügbar sein können oder nicht. Da Bilder manchmal aus Google-Bildern entfernt werden, was in Ordnung ist, gehen Sie einfach weiter und suchen Sie ein anderes Bild, das dem ähnelt, das wir im Projekt verwenden . Da die Werkzeuge und Techniken, die Sie für die Retusche dieser Bilder verwenden jedes Bild angewendet werden können. Also möchte ich Ihnen nur ein paar schnelle Tipps zum Hinzufügen dieser Bilder zu Ihrem Geschenk-Dokument sowie Google-Bilder geben, bevor wir mit dem nächsten Tutorial fortfahren, wo wir diese Bilder retuschieren werden. Also zuerst, lasst uns in Google-Bilder gehen. Und wenn ich nach Bildern über Google-Bilder suche, Ich mag es, die höchste Qualität der Bilder zur Verfügung zu finden, und wenn wir zu Tools gehen, haben wir einige Sortieroptionen, also wenn wir unterdimensioniert schwächen, wählen Sie große und das wird uns viel größere Dateien mit der Arbeit geben, und sie neigen dazu, von höherer Qualität zu sein. Und so habe ich dieses erste Bild von Michael Jordan gefunden, und wir werden dieses Bild tatsächlich im Projekt verwenden. Also, um es dem Projekt hinzuzufügen, werden wir mit der rechten Maustaste klicken und wählen Bild kopieren. Dann gehen wir zu Gimp und öffnen die Grid-Datei, die wir aus einer vorherigen Lektion heruntergeladen haben , und dann mit ihrer Tastenkombination können wir Commander Control im Buchstaben V verwenden, um diese Datei einzufügen, oder Sie können gehen, um zu bearbeiten und Wählen Sie Einfügen von hier aus. Nun, wenn wir jetzt zu einem anderen Bild gehen, wenn es wie dieser Surfrand ist und wir dieses Bild in die Zwischenablage kopiert haben, gehen Sie wieder zu unserem Dokument, wir können sehen, dass diese Ebene hier hinzugefügt wurde, und es ist zurzeit ausgewählt. Nun, wenn ich voran gehe und das in einfügen, erhalten wir eine Ebene, die schwebende Auswahl sagt, also bevor eine tatsächliche später wird, müssen wir mit der rechten Maustaste auf diese Ebene klicken und auf eine neue Ebene auswählen, und dann wird es diese Datei zu einem hinzufügen neue Ebene, oder ich gehe voran und rückgängig machen, dass mit Befehl oder Steuerung und dem Buchstaben Z. Wenn wir zu unserem Auswahlwerkzeug oder einem Rechteck gehen, wählen Sie es aus und klicken Sie dann einfach irgendwo auf ihr Dokument. Das wird automatisch dem Layer hinzugefügt. Das einzige Problem ist, dass es zu der Schicht hinzugefügt wird, in der wir Michael Jordan hatten, also wollen wir das auch nicht tun. Also in diesem Fall, was ich tun werde, ist eine neue Ebene zu erstellen. Lass uns weitermachen und es Surfer nennen. Ich werde es Transparenz machen. Klicken Sie auf OK, und dann werde ich es einfügen und klicken Sie dann auf. Und dann wird es von selbst zu dieser Ebene hinzugefügt. Das sind also ein paar verschiedene Möglichkeiten, Bilder in Ihr Gimp-Dokument zu kopieren und einzufügen. Die andere Sache, die Sie tun möchten, wenn Sie alle Ihre verschiedenen Ebenen von neuen Bildern hinzufügen möchten, ist, dass Sie gehen und doppelklicken, um die Ebenen entsprechend dem Bild selbst umzubenennen, also möchten wir ihm eine Beschreibung dessen geben, was diese Ebene ist. Dies ist für uns und für den Webentwickler, um uns zu helfen, unsere Bilder besser zu organisieren. Also wissen wir, welches ist, was also, wenn Sie zu neuen gehen, gehen Sie voran und fügen Sie den Ebenennamen hier hinzu. Wenn Sie dies nicht so tun, doppelklicken Sie einfach und geben Sie diese Ebene dann basierend auf der Beschreibung für dieses Bild einfach im Namen . Die andere Sache, die wir tun wollen, ist, dass wir P- und G-Dateien für die Logos verwenden wollen. So können wir unter Werkzeugen zur Farbe gehen und transparent auswählen. Und das wird uns eine Liste aller PNG-Dateien für dieses spezielle Logo geben. Und das macht es viel einfacher im Vergleich zu versuchen herauszufinden, welches PNG aus all diesen Dateien ist , weil die meisten davon eine J-Peg-Datei sein werden, und Sie müssen auf alle klicken, um herauszufinden, welche sind transparent und welche sind diejenigen, die Sie verwenden möchten. So wie dieser hier. Hier ist eine J-Peg-Datei, und es ist nicht etwas, das wir für dieses bestimmte Projekt sowieso verwenden können. Also diese Luft einige Tipps, wie Sie Google-Bilder verwenden und diese Bilder zu Ihrer GIM-Datei hinzufügen. Also gehen Sie vor und und alle Bilder und dann im nächsten Tutorial wird voran gehen und retuschieren . Das Bild ist 19. Retouch: Hallo und willkommen zurück. Okay, Sie sollten also alle Ihre Bildebenen in Ihren Rasterdokumenten platzieren, und Sie sollten alle Ebenen entsprechend benennen. Wir müssen gerade ihre Ebenen ein wenig organisieren, so dass ähnliche Inhalte gruppiert werden . Also habe ich alle meine Logos hier oben zusammen, dann meine Schuhe und dann alle Bilder mit Menschen. Sie können Layer neu anordnen, indem Sie darauf klicken und an eine neue Position ziehen. Krieg. Sie können die Nach-oben- oder Nach-unten-Taste verwenden, um sie auf diese Weise zu verschieben. Gehen wir voran und schalten Sie alle Ebenen außer zwei aus. Und das wäre das Nike-Logo und unser weißer Hintergrund. Also gehen wir zuerst zu Reese Ice Logos und setzen ihn in Position, erscheinen oben. Dann werden wir den Hintergrund von unseren Produkten und die Bilder mit Menschen entfernen. Also, um die Größe zu ändern. Das erste, was wir tun müssen, ist, dass wir die Grenze der Ebene ändern müssen. Wenn Sie nach oben gehen, um die Layerbegrenzung anzeigen und auswählen, können wir sehen, dass die Grenze für diese Ebene die tatsächliche Größe des Dokuments ist. Das ist nicht das, was wir wollen. Wir möchten, dass diese Ebenenbegrenzung an der Größe des tatsächlichen Inhalts des Layers gefangen wird , der sich hier in diesem Bereich befindet. Also müssen wir dies zuerst tun, bevor wir neu skalieren. Andernfalls wird die Skalierung viel mehr sein, als wir wollen, da sie basierend auf der Größe des Dokuments und nicht der Größe des tatsächlichen Logos skaliert wird. Wir gehen also nach oben, um den Inhalt zu beschneiden, und jetzt wird die Ebenengrenze auf die Größe des Logos selbst und nicht auf das Dokument geändert. Okay, um dieses Logo kleiner zu machen, weil es viel zu groß ist, müssen wir unser Skalierungswerkzeug verwenden, das sich genau hier befindet. Und die Tastenkombination ist Shift Plus s. Jetzt müssen wir nur auf unser Logo klicken, stellen Sie sicher, dass es im Ebenenfenster ausgewählt ist, und dann werden Sie dieses Begrenzungsfeld um dieses Logo mit einigen Quadraten zu bekommen. Würden Sie klicken, um zu klicken und ziehen Sie in oder heraus, um die Größe zu ändern. Die andere Sache, die wir tun können, ist, dass wir tatsächlich die tatsächliche mit oder die Höhe eingeben können, und wir können es verknüpfen, so dass, wenn Sie eine eingeben, die Höhe oder die mit automatisch ändert , um sie proportional zu halten. Wenn Sie dies also hier deaktiviert haben, bedeutet dies, dass die Breite und die Höhe nicht miteinander verknüpft sind. Wenn ich also die Größe mit 2 50 ändere, ändert sich die Höhe nicht und es bleibt bei 418 Pixel hoch und es verzerrt das Logo. Das ist nicht das, was wir wollen. Also werden wir das einschalten und wir gehen voran und tippen 75 für die Breite Klick-Tab ein. Und jetzt ist die Höhe 27, was das Logo im Verhältnis hält. Wir werden auf Skala klicken, greifen Sie Ihr Verschiebungswerkzeug mit dem Buchstaben V Stellen Sie sicher, dass Sie zuvor ausgewählt oder Führer ausgewählt haben, so dass, wenn Sie darauf klicken , Sie tatsächlich diese Ebene auswählen und dann einfach nach oben verschieben. In Ordnung, machen wir dieses Mal dasselbe für das Converse Logo. Wir müssen den Text aus dem Logo entfernen, weil ich das nicht als Teil des Logos möchte. Also werden wir unser Rechteck-Werkzeug direkt hier oder mit dem Buchstaben m greifen. Zeichnen Sie einen Kasten um ihn herum, dann klicken Sie auf Ihre Löschtaste oder Ihre Rücktaste, und dann müssen wir de wählen mit Befehl oder Kontrolle und dem Buchstaben D. In Ordnung, vergessen wir nicht, Delayer-Grenze zu ändern. Wir gehen nach oben Ebene, wählen Sie den Inhalt beschneiden. Schnappen Sie sich Ihre Waage Werkzeug mit Shift plus s. Und dieses Mal werden wir tun 50 für die mit Klickskala. Zurück zum Verschieben-Werkzeug. Bewegen Sie es nach oben. Ich werde das eigentlich zum letzten machen. Also werde ich das da drüben setzen und ich werde das hier runterschieben, ein Air Jordan wird Zweiter sein. Lassen Sie uns also greifen, dass ein Lear zuschneiden, um Inhalt skalieren Werkzeug. Und wir werden auch 54 dieses in der letzten machen. Okay, lasst uns wieder unser Rechteck-Werkzeug mit dem Buchstaben M greifen und wir werden den Textbefehl oder das Steuerelement und den Buchstaben D zu de Select Crop, das Inhaltsskalierungswerkzeug und wieder 50 löschen . In Ordnung, die Logos sind fertig. Gehen wir weiter und schalten sie aus. Für den Moment. Dies ist wahrscheinlich ein guter Zeitpunkt, um Ihre Dateien zu speichern. Also traf auf Befehl oder Kontrolle und den Buchstaben und ich werde zuerst an meinen Nike Schuhen arbeiten, also werde ich voran gehen und die Schicht nach oben bewegen und Converse wird dritter. In Ordnung, lass uns immer noch wie die Nike Schuhschicht und lass es uns einschalten. Kayla, zoomen Sie jetzt mit dem Zoomwerkzeug. Was wir tun wollen, ist, dass wir einen rein weißen Hintergrund wollen. Im Moment ist es ein dunklerer Farbton von Weiß oder Grau. Was wir also tun müssen, ist, dass wir sowohl den Hintergrund als auch den Schatten auswählen müssen, denn ich möchte den Schatten loswerden und wir müssen eines unserer Auswahlwerkzeuge verwenden , um das zu tun. Und dann werden wir eine Ebenenmaske verwenden, um diesen Hintergrund zu entfernen. Also für diese Bearbeitung, werde ich mein unscharfes Auswahlwerkzeug greifen, und ich werde meinen Schwellenwert so einstellen, dass wir 20 für den Schwellenwert tun und dann auf den Hintergrund klicken , um Ihre Auswahl zu treffen. Also im Moment ist es so ziemlich alles im Hintergrund und nichts anderes ausgewählt. Wenn ich auf meine Löschtaste klicke, wird der Hintergrund entfernt, aber das ist nicht das, was wir tun wollen. Wir müssen also zu unserer Auswahl hinzufügen, da der Schatten nicht als Teil der Auswahl hinzugefügt wird, damit wir ein anderes unserer Auswahlwerkzeuge verwenden können. Aber meine bevorzugte Methode ist, den Schnellmaskenmodus zu verwenden , der sich direkt hier unten über dieses Symbol und dann die Tastenkombination befindet, um den Schnellmaskenmodus umzuschalten . Ehrenwert ist der Buchstabe Q. Also, sobald du es anmachst, bekommst du eine rote Maske über dem Schuh im Schatten. Also im Moment, das ist der Bereich, der nicht ausgewählt ist. Also lasst uns den Schuh hier heranzoomen, damit wir den Schatten ein bisschen besser sehen können . Und dann werden wir unser Pinselwerkzeug greifen, um die Auswahl hinzuzufügen oder zu entfernen . Daher möchten wir, dass unsere Vordergrund- und Hintergrundfarben weiß und schwarz sind. Ich werde nur eine Farbe hinzufügen, die schnell geschrieben wurde, weil ich Ihnen zeigen möchte, wie einfach es ist, die Farben für den Vordergrund und den Hintergrund zu ändern . Und das ist einfach, indem Sie den Buchstaben D auf Ihrer Tastatur drücken, und es wird es in Schwarzweiß ändern. Okay, also denken Sie daran, wir haben eine rote Ebenenmaske über dem Bereich, der nicht ausgewählt ist. So ist der Hintergrund ausgewählt und wir möchten aus der Auswahl entfernen. In diesem Fall wird Weiß aus der Auswahl entfernt oder es wird die rote Maske entfernen. Und wenn Sie dann aus diesem Schnellmaskenmodus wechseln, werden Sie nur den Hintergrund ausgewählt und nicht den Schatten oder die Schuhe. Also werden wir den Pinsel packen, und wir werden ihn entsprechend dimensionieren. Und dann können Sie je nach Bild die Härte zwischen 25 75 einstellen. Und gerade jetzt werde ich nur die Härte auf 75 eingestellt lassen, denn wieder werde ich hier nicht sitzen und versuchen, das perfekt zu machen, denn der Kunde kann mir später ein anderes Bild geben. Also werde ich hier reingehen und die rote Maske aus den Bereichen entfernen, die ich so nicht will . Es ist nicht Teil der Auswahl. Dann kann ich meinen Raum Barkey nutzen, um zu anderen Teilen des Bildes zu navigieren, nur um zu sehen, ob ich Tune meine Auswahl finden muss. Das sieht ziemlich gut aus. Also werde ich den Buchstaben Q drücken und dann werde ich mein Zoomwerkzeug benutzen und die Steuertaste gedrückt halten, wo die Befehlstaste ist , damit ich hinauszoomen kann. Sie können diese Auswahl auch direkt hier treffen. Vergrößern, verkleinern und Sie können sehen, dass die Tastenkombination genau hier ist. Es wird gesteuert, weil ich auf einem PC bin, und wenn du auf einem Mac bist, wird es Befehl sein, Alles klar, jetzt haben wir alles ausgewählt, was wir die Schatten und den Hintergrund entfernen wollen . Aber was wir tun müssen, ist, dass wir die Auswahl invertieren oder die Auswahl rückgängig machen müssen, damit der Schuh ausgewählt wird. Und dann, wenn wir Ebene betreten, maskieren Sie den Hintergrund und der Schatten wird entfernt. Also lassen Sie uns gehen, um invertieren auszuwählen Und jetzt ist nur der Schuh ausgewählt, und wenn ich ihn ausschneide, können Sie sehen, dass die Schuhe jetzt weg sind. Gehen wir also zu unserem Ebenenfenster und wählen Sie Ebenenmaske aus. Sie möchten sicherstellen, dass Sie die Auswahl ausgewählt haben, und klicken Sie auf Hinzufügen, und jetzt sind der Schatten und der Hintergrund verschwunden. Okay, wählen Sie mit Commander Control und dem Buchstaben D. Und wenn Sie sich Ihre Ebenenmaske genau hier ansehen, können Sie sehen, dass sie schwarz und weiß ist. So entfernt Schwarz weiße Ameisen und Sie können den Umriss des Schuhs genau dort in weiß sehen. Und wenn wir unsere Auswahl nicht umkehren würden, als es genau das Gegenteil getan hätte, Ordnung, jetzt, wo wir diesen Schuh gemacht haben, müssen wir jetzt die gleiche Bearbeitung an den anderen beiden Schuhen vornehmen. Okay, was wir tun werden, sind genau die gleichen Schritte, die wir für den Nike Schuh gemacht haben. Also, anstatt dass ich hier sitze und diese Bilder retuschiere und du mir zusiehst ,wie ich dasselbe , mache, lasse ich dich weitermachen und das alleine machen. Also mach weiter und bearbeite deine anderen beiden Schuhe, und ich lasse dich auf ein kleines Geheimnis. Wir werden genau die gleichen Schritte benutzen. Vier sind auch Bilder, mit Ausnahme des Auswahlwerkzeugs. Denn obwohl das unscharfe Auswahlwerkzeug wahrscheinlich funktionieren würde, müssten wir nur weiter daran arbeiten, den Schwellenwert zu erhöhen, um mehr von dem Bild auszuwählen . Also, was ich tun werde, ist, dass ich ein anderes Auswahlwerkzeug verwenden werde, um zu beginnen, und das wird mein kostenloses Auswahl-Tool sein, also werde ich nur klicken und ziehen und verfolgen um das Hauptthema hier, Das ist Michael Jordan. Dann, sobald wir unsere Auswahl haben, können wir in den Schnellmasken-Modus gehen, um unsere Auswahl zu optimieren. Um die Auswahl mit dem frei wählbaren abzuschließen, mussten wir zu dem genauen Punkt zurückkehren, an dem wir angefangen haben und den Mauszeiger über diesen Bereich bewegen, bis wir diesen kleinen Kreis bekommen . Sobald Sie das tun, können Sie die Maustaste loslassen und dann die Eingabetaste drücken, und dann erhalten Sie Ihre Auswahl von diesem Werkzeug. Jetzt können wir in den Schnellmaskenmodus gehen, indem Sie den Buchstaben Q drücken und dann unseren Pinsel verwenden, um die Auswahl nach Bedarf hinzuzufügen oder zu entfernen. Also werde ich weitermachen und das tun. Aber ich werde diesen Teil des Videos beschleunigen, damit du das nicht in Zeitlupe sehen musst , weil es nicht viel mehr gibt, was ich hinzufügen kann, dass ich es dir noch nicht gesagt . Das einzige, was ich empfehlen würde, ist, Ihre Hand nahe am Buchstaben X zu halten, und der Grund, warum ist, wenn Sie die Buchstaben-Taste X drücken, wird es die Vordergrund- und Hintergrundfarbe entsprechend wechseln. Und dann können Sie diesen Schlüssel einfach auswählen, wenn Sie außerhalb der Linie gehen, wo Sie gehen müssen . Also, wenn ich hier reingehe, vielleicht bin ich in seinem Gesicht und seinem Arm hier, komprimiere ich den Buchstaben X und dann kann ich die Maske schnell entfernen, wo sie nicht sein sollte. Und sie drücken erneut X, um die Ebenenmaske nach Bedarf hinzuzufügen. In Ordnung, also werde ich voran gehen und vorwärts gehen, während ich das fertig mache. Okay, jetzt, wo ich meine Auswahl verfeinert habe, drücke ich den Buchstaben Q, um aus dem Schnellmaskenmodus zu kommen. Nun, dieses Mal muss ich die Auswahl nicht invertieren, da das Thema ausgewählt ist. Also muss ich nur kommen und wählen Sie meine Ebenenmaske, machen Sie Ihre Auswahl ausgewählt ist und klicken Sie hier auf Hinzufügen und das entfernt den Hintergrund. Wie cool ist das? Ich liebe es jetzt. Ich habe ziemlich schnell diese spezielle Bearbeitung durchlaufen, und ich muss möglicherweise später nachlesen und finden. Wenn der Client dieses bestimmte Bild genehmigt, können Sie sehen, dass ich nicht sehr gut an den Rändern gefolgt bin. Und ich habe auch hier einen Teil des Hintergrunds hinterlassen. Und deshalb verwenden wir Ebenenmasken, weil es uns erlaubt, zerstörungsfrei zu arbeiten. Und dann kann ich einfach meine Ebenenmaske auswählen, um diese Bearbeitung zu verfeinern. Okay, also werde ich es vorerst so lassen. Nun, Ihre Aufgabe ist es, voranzugehen und die anderen beiden Bilder zu beenden, nur mit den gleichen Techniken. Verwenden Sie das Auswahlwerkzeug, von dem Sie denken, dass es am besten für dieses bestimmte Bild funktioniert. Verfeinern Sie die Auswahl in der Ebenenmaske im Schnellmaskenmodus. Und dann werden Sie alle setzen Zehe Arbeit an dem nächsten Tutorial, das am ersten Teil unserer Kopfzeile arbeiten wird . 20. Kopfseite Teil 1: Hallo und willkommen zurück. Ordnung, für dieses Tutorial werden wir anfangen, an unserem Header unserer Website zu arbeiten, und wir werden unsere Logos organisieren und einrichten und sie genau dort platzieren, wo sie sein müssen . So haben wir Pixel perfekte Platzierung. Wir werden unser Ausrichtungswerkzeug verwenden, das wir werden und einige Formen von Strichen usw. Und dann im nächsten Tutorial werden wir voran gehen und den Kopfteil des Designs einschließen und den Grund, warum ich es aufbreche, weil es ein wenig lang wird, weil ich eine Menge Dinge auf dem Weg erklären möchte , um Sie einige Pro-Tipps für die Gestaltung der Kopfzeile Ihrer Websites. Also lasst uns weitermachen und loslegen. Ich gehe weiter und zoomen, und so kann ich sehen, dass mein Logo ein bisschen besser ist. Und jetzt habe ich die Gitter ausgeschaltet, also werde ich die wieder einschalten. Aber ich möchte auch meine Führungen aktivieren, die in dieser Rastervorlage enthalten sind. Um sie zu sehen, können Sie nach oben gehen, um Guides anzeigen und auswählen. Hier ist die Tastenkombination für das, was Commander Control und die Semikolon Taste ist. Sobald Sie das eingeschaltet haben, werden Sie alle Ihre Guides sehen, und sie sind auch mit den Spalten ausgerichtet. Also ist diese erste Richtlinie rechts hier links von der Spalte. Und dann haben wir auch eine weitere Richtlinie rechts von der Spalte, die eine gleiche Menge an Abstand zwischen hier und hier ist. Und diese Richtlinie teilt im Grunde den Raum zwischen der ersten und der zweiten Spalte gleichmäßig und dasselbe mit der zweiten und 1/3. Wir haben eine andere Richtlinie, die das teilt usw. Dies räumt also alle Spalten gleich aus, so dass wir die Richtlinien als Leitfaden verwenden können, um unsere Elemente so auszurichten, dass alles perfekt aufgereiht ist und Symmetrie aufweist. Wir wollen also unsere Logos direkt in der Mitte der Spalten von links nach rechts platzieren . Aber ich möchte auch die Höhe des Header-Raums definieren. Und dann werden wir diese Logos auch zwischen der oberen und unteren Höhe der Kopfzeile ausrichten . Das wird also viel mehr Sinn machen, wie wir in diesem Tutorial gehen und wir beginnen alles richtig auszurichten. Lassen Sie uns also voran und definieren Sie zuerst die Höhe der Kopfzeile. Also, was ich tun möchte, ist, dass ich es größer als die Breite dieser Spalte hier machen möchte. Also haben wir auch etwas Abstand zwischen der Ober- und Unterseite der Logos. Also müssen wir zuerst bestimmen, was das mit für diese spezielle Spalte ist. Nun, wir können hier sitzen und wir können die Pixel zählen, aber wir haben tatsächlich ein Messwerkzeug, das sich genau hier befindet, das uns die Messung oder den Abstand zwischen der linken und der rechten Seite von die Spalte. Wenn wir also dieses Werkzeug greifen und dann auf diese zweite Anleitung klicken und dann auf die zweite Führung ziehen , sobald wir unsere Maustaste loslassen, wird es den Punkt dieses Messwerkzeugs direkt dort hinzufügen. Und dann, wenn wir einen Blick hier unten werfen, können wir die Anzahl der Pixel oder die Breite dieser Spalte sehen, die 90 Pixel beträgt. Die Höhe muss also mehr als 90 Pixel betragen, also müssen wir entscheiden, wie viele Pixel Platz wir oben und unten in den Logos haben wollen ? Sagen wir also 20 Pixel für den oberen und 20 Pixel für den unteren Bereich, also sind das 40 Pixel insgesamt. müssen wir dem mit hinzufügen. Das sind also 130 Pixel für die Höhe unseres Headers. So können wir voran gehen und drücken Sie die Escape-Taste auf der Tastatur, um diese Messung loszuwerden. Und dann können wir weitermachen und unser Werkzeug mit dem Buchstaben V packen und dann müssen wir hier unten nur eine Anleitung mit 130 Pixeln hinzufügen. Aber es ist irgendwie schwer zu sehen, es sei denn, Sie zoomen hinein oder versuchen, die Anzahl der Balken hier zu zählen, um 1 30 zu finden. Aber wir haben hier wieder ein kleines Werkzeug, das uns genau zeigt, wo die Platzierung dieses Führers ist, wie wir es herausziehen, sagte Toe, fügen Sie einen Leitfaden hinzu. Wir müssen auf das Lineal hier oben klicken und nach unten gezogen und unten dort. Wenn Sie einen Blick dort unten werfen, heißt es fügen Sie Guide 1 11 Also fügen wir diese Anleitung bei ah 111 Pixel nach unten hinzu. Wir wollen 30 Also gehen wir einfach weiter runter, bis wir 1 30 erreichten Okay, also ist das die Höhe unseres Headers. Und jetzt können wir weitergehen und loslegen. Sind Nike-Logo von links nach rechts und von oben nach unten. Um unser Logo in diesem Bereich auszurichten, müssen wir eine Auswahl erstellen und dann unser Ausrichtungswerkzeug verwenden, um es innerhalb dieser Auswahl auszurichten . Lassen Sie uns also unser Rechteck-Auswahlwerkzeug greifen und eine Auswahl im Raum zeichnen. Dann können wir unser Ausrichtungswerkzeug greifen, das sich direkt hier und dann in den Werkzeugoptionen befindet. Wir müssen sicherstellen, dass wir relativ zu haben und Auswahl ausgewählt haben. Wir wollen auch sicherstellen, dass unser Logo ausgewählt wurde, und jetzt müssen wir das Objekt definieren, das ausgerichtet werden muss. Und das können wir tun, indem wir auf unser Logo klicken. Sobald wir das tun, werden Sie diese vier kleinen Quadrate in jeder Ecke sehen und das lässt Nein geben, dies ist das Objekt oder das Element, das innerhalb der Auswahl ausgerichtet werden muss. Also kommen wir zurück zu unseren beiden Optionen und wir wählen eine Linie Mitte des Ziels und jetzt ist es perfekt von der linken und der rechten Seite ausgerichtet. Also ist es in der Mitte der Spalte zentriert, und dann müssen wir das gleiche für die Höhe tun. Also eine liegende Mitte des Ziels und jetzt ist es perfekt in der Mitte der Auswahl ausgerichtet. Gehen wir voran und wählen Sie mit Commander Control und dem Buchstaben D aus. Okay, wir müssen das Gleiche auch für unsere anderen drei Logos tun. Aber bevor wir das tun, möchte ich voran gehen und für jedes der Logos einen Kreis hinzufügen. Das erste, was wir tun müssen, bevor wir unsere Form erstellen, ist, dass wir eine neue Ebene erstellen müssen . Klicken Sie also hier auf dieses Symbol. Lassen Sie uns es nennen, Kreis eins, und stellen Sie sicher, dass wir Transparenz ausgewählt haben, und klicken Sie auf OK, jetzt können wir unser Ellipsen-Tool greifen, stellen Sie sicher, dass Sie fest und Seitenverhältnis ausgewählt haben, und dann einfach Klicken Sie auf eine Form, und ziehen Sie sie heraus. Und dann müssen wir es 90 Pixel breit und 90 Pixel machen, am höchsten, als wäre es dein klebriger und jetzt, wo du deine Form hast, können wir das mit einer weißen Farbe füllen, also veränderte den Vordergrund ein Weiß, schnappen Sie sich Ihren Eimer, Füllwerkzeug und klicken Sie dann auf die Innenseite. Ich möchte auch einen Strich um diese Form hinzufügen, also gehen wir nach oben, um die Strichauswahl zu bearbeiten und auszuwählen. Stellen Sie sicher, dass Sie einfarbig ausgewählt Anti Alias ing und dann für die Zeile mit Wir wollen eins. Wir möchten das Schwarz zurück in die Vordergrundfarbe ändern und dann auf Strich klicken. OK, also haben wir jetzt einen Strich um unsere Form, und wir müssen mit Commander Control und dem Buchstaben D auswählen. Lasst uns diese Form mit unserem Werkzeug packen und sie hier in die zweite Spalte verschieben . Wir möchten auch die Ebenenbegrenzung für diesen Kreis ändern, da er gerade die Größe unseres Dokuments selbst ist. Also, wenn ich hierher komme, brauche ich tatsächlich einen Zoom den ganzen Weg raus. Wir können die Ebenengrenze sehen, die diese gelbe und schwarze gepunktete Linie ist, und wir müssen diese auf die Größe unseres Kreises reduzieren. Lassen Sie uns also gehen, um den Inhalt zu beschneiden, und jetzt hat sich die Ebenengrenze geändert. Ich werde voran gehen und verstecken, dass Jetzt müssen wir diese bestimmte Form direkt in der Mitte dieser Spalte ausrichten , damit ich meine Pfeiltasten verwenden kann, um sie nach links, rechts oben oder unten ein Pixel nach dem anderen zu bewegen , um sie direkt nach links, rechts auszurichten . Aber jetzt müssen wir unsere andere Technik zum Ausrichten verwenden, indem wir eine Auswahl in diesem Bereich mit unserem Auswahlwerkzeug erstellen. Und dann können wir unser Ausrichtungswerkzeug greifen. Klicken Sie auf dieses Shape, stellen Sie sicher, dass relativ zur Auswahl noch ausgewählt ist und dass Ihre Ebene ausgewählt ist und dann eine Linie, die sich vom Ziel befindet. Okay, diese ausgewählten Kommandantenkontrollen in dem Buchstaben D. Jetzt müssen wir die bestimmte Schicht unter das Air Jordan Logo verschieben, und jetzt müssen wir dieses Logo nehmen und es direkt in der Mitte unseres Kreises ausrichten. Also gehen wir weiter und greifen Sie unsere Rechteck-Auswahl wieder und treffen Sie eine Auswahl. Und dann, mit ihrem Ausrichtungswerkzeug, möchten Sie auf das Logo klicken und dann den mittleren und mittleren Bereich ausrichten. Lassen Sie uns voran gehen und fügen Sie einen Kreis für unsere anderen beiden Logos sowie eine Zeile jedes der Elemente in ihrem Raum. Also lasst uns unsere Kreisschicht greifen. Und anstatt das von Grund auf zu tun, können wir die Ebene tatsächlich duplizieren, indem wir hier auf dieses Symbol klicken. Nennen wir es umkreist, und wir werden das unter das Hurley-Logo verschieben. Lasst es uns mit unserem Bewegungstool packen und überziehen. Dumme Kate, dieser hier. Okay, fangen wir damit an, das Hurley-Logo auszurichten, und dann machen wir jede Schicht danach. So Auswahl, Werkzeug, Ausrichtung, Werkzeug, Klicken Sie auf das Logo und dann ausrichten. Okay, da wir diesen Bereich bereits ausgewählt haben, müssen wir nur unseren Kreis zu Schicht greifen und dann mit unserem Limit-Tool auf den Kreis klicken und dann können wir diesen ausrichten. Kayla's tun die Ausrichtung für die letzten Schichten de Select. Gehen wir weiter und verwenden Sie unser Zoom-Tool, um zu verkleinern, nur um einen besseren Blick auf die Art und Weise zu werfen, wie alles ausgerichtet ist. Und das sieht ziemlich gut aus. Gehen Sie voran, schalten Sie die Rasterebene aus und der erste Teil unserer Kopfzeile ist fertig. In Ordnung, also gehen wir weiter und gehen zum nächsten Tutorial, dem auch der zweite Teil unserer Kopfzeile hinzugefügt wird, die die zweite Dairy Navigation hier drüben rechts ist. Und ich werde Ihnen auch einige zusätzliche Pro-Tipps geben, um Topographie oder bestimmte Arten von Schriftarten zu finden , die in Websites verwendet werden. Weil Ihr Kunde vielleicht eine bestimmte Art von Schriftart auf seiner Website gekauft oder verwendet hat und weil Sie sie neu gestalten, möchten sie dieselbe Schriftart verwenden, aber sie kennen den Namen des Fonds nicht. Nun, ich zeige Ihnen genau, wo Sie den Namen dieser Schriftart finden. Also, wenn du bereit bist, lass uns weitermachen und damit anfangen. 21. Organisieren: hallo und willkommen zurück in Ordnung, bevor wir auf der Mega-Menü beginnen. Wie ich in der letzten Lektion erwähnt habe, möchte ich Ihnen zunächst helfen, sich mit Ihren Webdesign-Dateien zu organisieren, und es gibt ein paar Gründe, warum Sie sich organisieren möchten. Die erste ist zu Ihrem eigenen Vorteil. Während wir an diesem Projekt arbeiten, werden wir den Ebenen, die wir bereits haben, noch viele weitere Ebenen hinzufügen. Und wenn Sie zurückgehen und Anpassungen an etwas vornehmen müssen, werden Sie viel Zeit damit verbringen, durch den Versuch zu scrollen, das speziell er so zu finden . Sie können die Layer in Gruppen-Layern organisieren, um das Finden der benötigten Elemente zu erleichtern . Der andere Grund, warum Sie organisieren möchten, ist, dass diese Datei höchstwahrscheinlich an einen Webentwickler geht , um beschichtet zu werden, wenn Sie es nicht selbst tun, also entweder werden Sie es direkt an einen Webentwickler senden . Oder vielleicht wurden Sie von einer Agentur angestellt, die es an einen Webentwickler auslagern wird. In beiden Fällen werden sie diese Datei an Sie zurücksenden und sagen, dass sie organisiert und gruppiert werden muss . Und wenn dir das jemals passiert, weil sie nicht organisiert waren, wirst du unprofessionell aussehen. Und die Chancen sind, dass Sie vielleicht nicht wieder mit dieser bestimmten Gruppe von Menschen arbeiten. Lassen Sie mich also voran gehen und Ihnen zeigen, wie Sie all diese Ebenen in Gruppenebenen organisieren können, damit Sie es für sich selbst und Zeh viel einfacher machen können. Schauen Sie professioneller aus, wenn Sie mit anderen Mitarbeitern in Ihrem Team arbeiten oder wenn Sie von einer Agentur angestellt werden. Eines der Dinge, die wir tun müssen, wie wir es bei einigen unserer Ebenen zuvor getan haben, ist, dass wir die Ebenen entsprechend benennen müssen basierend darauf, worum es bei dieser Ebene geht. Also genau hier haben wir primäre Box für unsere Navigationsbox, was in Ordnung ist, aber unser Warenkorb. Obwohl es einen Einkaufswagen hat, ist es einfacher, nur zwei Wörter zu tun. Einkaufswagen im Vergleich zu dem, was es vorher gab. Und dann hier können wir diese Ebene primäre Navigationsmenü umbenennen, und dann wäre dies unser sekundäres Navigationsmenü. Und was ich empfehle, ist, die Gewohnheit zu bekommen, Ihre Layer umzubenennen und zu gruppieren, während Sie arbeiten, nicht am Ende des Projekts, denn wenn Sie bis zum Ende des Projekts warten, dauert es viel mehr Zeit, um durch und finden Sie alle verschiedenen Schichten, die zusammen sein sollen und gruppieren. Also wieder, es ist viel besser und schneller, es zu tun, während Sie arbeiten, anstatt es am Ende zu tun. Also lassen Sie uns auf unsere oberste Ebene klicken Sie mit der rechten Maustaste und wählen Sie neue Layer-Gruppe. Also hier ist unser Gruppenspieler und wir werden diese primäre Navigation nennen. Und dann ziehen wir alle Layer, die Teil der primären Navigation sind, so dass sie gruppiert sind. Wir werden klicken und ziehen nach oben, sobald wir die Ebene loslassen, wird die Zehe rechts eingerückt, und das lässt Sie wissen, dass sich diese bestimmte Ebene in dieser Gruppenebene befindet. Wenn wir also diesen bestimmten Gruppenspieler schließen, verschwindet diese Ebene. So haben wir auch unser primäres Navigationsmenü. Ich werde sagen, dass die Rate oben erscheint. Okay, das ist es also für die primäre Navigation. Lassen Sie uns voran gehen und schließen, und wir werden eine neue Ebenengruppe über unserem Warenkorb erstellen. Er und wurde die sekundäre Navigation genannt, und wir werden da reinlegen, natürlich, den Warenkorb und das sekundäre Navigationsmenü. In Ordnung, jetzt haben wir ein paar Logos, also gehen wir weiter und fügen eine neue Ebenengruppe für die Logos hinzu, und lassen Sie uns jedes von ihnen hineinlegen. , Die andere Sache,die Sie tun können, um Ihre Layer weiter zu organisieren, ist, dass Sie Gruppen-Layer in andere gruppierte Layer einfügen können . Wenn wir also unsere Air Jordan Ebene mit der rechten Maustaste auswählen und eine neue Ebenengruppe erstellen, wird sie darüber hinzugefügt. Und dann können wir das Air Jordan Logo setzen und eins drinnen umkreisen. Und dann können wir diese Gruppe hier umbenennen Jordan Logo. Also lassen Sie uns das auch für die anderen beiden Logos tun. Und wieder, dies hält nur alles zusammen, was anderen Ebenen ähnlich ist. Jetzt, da wir alle diese Ebenen in drei Gruppen-Ebenen gruppieren, ist es nicht so schwer zu navigieren und zu finden, was wir brauchen. Wir müssen auch das Gleiche mit den Schuhen machen, aber wir gruppieren diese zusammen, wenn wir zu diesen Teilen des Projekts kommen. Moment gehen wir einfach voran und beginnen mit dem Mega-Menü im nächsten Tutorial. Also, wenn du dafür bereit bist, , dann lass es uns tun 22. Kopfseite Teil 2: Hallo und willkommen zurück. Alles klar , in dieser Lektion werden wir an unserer primären und sekundären Navigation arbeiten. Aber zuerst möchte ich schnell ein Tool mit Ihnen teilen, das Sie verwenden können, um bestimmte Schriftarten auf Live-Websites zu finden . Dies ist nützlich, wenn Ihr Kunde eine bestimmte Schriftart hat, die er entweder von seiner bestehenden Website oder einer anderen Website verwenden möchte , aber er kennt den Namen des Fonds nicht. Also dieses Tool, es ist ein Web-Entwickler-Tool und es ist kostenlos. Und es ist bereits auf den meisten modernen Browsern wie Chrome und Firefox installiert . Ich ziehe es vor, Chrom zu verwenden. Also gehen wir weiter und gehen zu Chrome. Und dann, wenn wir mit der rechten Maustaste auf mich ein Stück Text klicken, wählen wir dann inspizieren. Und dann bekommen wir diese beiden Spalten hier unten am unteren Rand des Browsers, und dann müssen wir nur navigieren und Spaß Familie finden, die genau hier ist. Und dann sehen Sie eine Liste aller Schriftarten, die für dieses ein Stück Text verwendet werden . Warum gibt es so viele? Nun, die erste 5-Familie hier, eine Nike Währung ist die primäre Schriftart, und die, die in Ihrem Browser geladen werden sollte, wenn es nicht in Ihrem Browser verfügbar ist, weil Sie vielleicht einen älteren Browser verwenden und es ist nicht unterstützt. Dann wird es die zweite Schriftart laden, die Trade Gothic ist. Wenn das nicht verfügbar ist, wird das Helvetica laden, und dann wird es Aereo ausprobieren, und deshalb gibt es mehr als einen. Also das, das wir verwenden wollen und unser Webdesign, wenn der Kunde es noch verwenden möchte, ist eine Nike Währung. Leider haben wir keinen Zugang zu diesem Funt, und dann Handel. Gothic ist eine Premium-Farm, die einen Kauf erfordert, und dann sind die letzten beiden kostenlose Schriftarten. Aber sie sehen völlig anders aus als diese beiden Fonds hier, so können wir entweder versuchen und zugreifen, die von unserem Kunden zu finden, wenn sie es noch zur Verfügung haben. Oder wir können versuchen, einen ähnlichen Funt zu finden, und wir können zu Fonts dot google dot com gehen, um zu versuchen, einen Fonds zu finden, der denen ähnlich ist, die auf der bestehenden Website verwendet werden. Jetzt sind all diese Mittel kostenlos. Es gibt andere Orte, an denen Sie kostenlose Schriftarten herunterladen können, also ist es nur eine Frage der Recherche zu machen und zu versuchen, einen Funt zu finden, der dem ähnelt den sie verwenden möchten, wenn Sie die tatsächliche Schriftart nicht bekommen können, die sie verwenden möchten. Es seidenn, denn, sie sind bereit, diesen speziellen Fonds zu kaufen. Also für dieses spezielle Webdesign werde ich eine völlig andere Schriftart verwenden. Und ich werde eine Schriftart namens Oswald für die primäre Navigation und für Titel und dann Eisenbahn für die sekundäre Navigation und einige andere Sachen als auch verwenden . So können Sie diese Mittel von hier herunterladen. Wenn Sie genau die gleichen Schriftarten verwenden möchten, spielt das keine Rolle. Sie können jede Schriftart verwenden, die Sie verwenden möchten, also gehen wir voran und beginnen Sie mit der sekundären Navigation zuerst, indem Sie eintippen, melden Sie sich an. Und dann fügen wir fünf Leerzeichen hinzu, um eine Trennung hinzuzufügen, geben Sie Hilfe und dann fünf weitere Leerzeichen ein. Und das liegt daran, dass wir ein Warenkorb-Symbol rechts davon hinzufügen. Ich muss auch nach Schriftart und Größe ändern, also doppelklicke ich einfach drinnen, um den Text auszuwählen, und dann muss ich nur den Namen der Schriftart eingeben, die ich hier verwenden möchte, was eigentlich Eisenbahn ist. Und dann werde ich 16 für die Schriftgröße eingeben. Sobald ich Tab geklickt habe, wird es die Größe dieser Inhalte für mich ändern. Gehen wir weiter und bewegen das nach oben. jetzt unser Werkzeug für Lasst unsjetzt unser Werkzeug fürden Umzug packen. Ich brauche einen Zoom in nur ein bisschen hier. Lassen Sie uns auch unsere Führer mit Commander Control und dem Sohn Michael und Key einschalten, damit wir sehen können , wo wir sie platzieren können. Also werde ich es hier rauf auf die rechte Seite dieser letzten Spalte verschieben. Wenn wir das Gitter einschalten, können wir es tatsächlich ein wenig besser sehen. Jetzt müssen wir nur ein Warenkorb-Symbol zu finden, und wir werden eine schnelle Google-Suche nach einem kostenlosen Warenkorb-Symbol machen. Nun, genau wie bei Bildern, können diese frei sein oder auch nicht, und sie können urheberrechtlich geschützt sein oder auch nicht. Wenn sie hier ein Wasserzeichen wie dieses haben, genau, wissen wir ziemlich genau,dass das eine urheberrechtlich geschützte Icahn sein wird. Also müssen wir entweder das Icon kaufen und dann unsere Kunden für diese Gebühr bauen, oder wir können unsere eigenen in Gimp erstellen oder wir können versuchen, ein kostenloses Symbol zu finden. Dieses Symbol hier ist kostenlos, aber es hat eine sogenannte ATTRIBUTION, die benötigt wird, um es zu verwenden. Also, was ist eine Zuordnung und Zuordnung ist eine Reihe von Code, den er auf Ihrer Website setzen musste ? Das ist ein Link zurück zu dieser Website insbesondere, So sagt es genau hier, freie Lizenz mit Namensnennung. Also, wenn Sie es verwenden möchten, müssen Sie einen Link zurück zur Website hinzufügen. Das ist in der Regel nicht etwas, was ich tun möchte. Ich möchte ein 100% freies Symbol finden, aber im Moment werden wir nur dieses spezielle Symbol herunterladen. Es spielt keine Rolle, jedes Symbol, das Sie verwenden möchten. Es ist nur zum Üben. Gehen wir also weiter und navigieren Sie zur Download-Seite. Wir werden PNG 16 für die Größe auswählen, und dann können Sie hier den Code sehen, den Sie der Website für eine Namensnennung hinzufügen müssen . Das ist nicht etwas, das ich empfehle. Deshalb möchten Sie ein 100% freies Symbol finden. Lassen Sie uns voran und laden Sie dieses für hin und wieder herunter, um es zu unserem Website-Design hier hinzuzufügen , ich werde nur klicken und ziehen Sie es über mein Dokument. Sobald ich freigegeben habe, wird es in einer neuen Ebene hinzugefügt. Das ist also nur eine weitere coole Möglichkeit, Ihrem Dokument zusätzliche Dateien hinzuzufügen. werde nur ein wenig hineinzoomen, damit ich dieses Symbol greifen und es an Ort und Stelle setzen kann. Alles klar, gehen wir weiter und greifen unsere Rechteck-Werkzeuge. Wir können alles genau dort ausrichten, wo sie sein sollten. Ich gehe über den Dachrinnenbereich und diese Spalte hier, um diese Ebene direkt in der Mitte, von oben nach unten, rechts,links auszurichten der Mitte, von oben nach unten, rechts, , um sicherzustellen, dass die Ebene ausgewählt ist. Ein Schwung. Schnappen Sie sich Ihr Ausrichtungswerkzeug Nun stellen wir sicher, dass wir hier auch auf unsere Ebene klicken, so dass Gimp weiß, dass das die Schicht ist, die wir wollen ah, Linie in den Raum. Stellen Sie sicher, dass Sie die Auswahl und dann einen Linienmittelpunkt des Ziels ausgewählt haben, und richten Sie die Mitte des Ziels aus . Lassen Sie uns voran und de wählen und tun das gleiche für unseren Warenkorb. Alles klar , der letzte Teil ist das Hinzufügen unserer primären Navigation. Gehen wir weiter und zoomen Sie hier ein bisschen raus. Ich werde meine Jungs mit Commander Control und dem Semi Doppelpunkt verstecken, dann zurück zum Textwerkzeug. Wir werden alles austippen, um Männer zu erledigen, und dann werden wir fünf Räume machen. Und wieder, dies gibt uns eine gewisse Trennung zwischen jedem Einzelposten. Wir halten unsere Umschalttaste gedrückt und benutzen dann unsere linke Pfeiltaste und bewegen uns über fünf Leerzeichen, so dass wir alle fünf Leerzeichen auswählen können, damit wir das kopieren und an das Ende jedes Elements einfügen können. Die Tastatur für Schnitt ist also Befehl oder Kontrolle und siehe. Und dann, wenn ich meine rechte Pfeiltaste drücke, gehe ich zum Ende, und ich kann weiter tippen und dann Befehl oder Kontrolle und V, um diese fünf Leerzeichen einzufügen. Okay, ich werde weitermachen und den Rest der Menüpunkte beenden. Ich werde alle auswählen mit Commander Control und dem Buchstaben A Ich werde die Schrift Toe Oswald und 24 für die Größe ändern . Beeilen Sie sich. Nehmen wir unsere Bewegung, Werkzeug, und lassen Sie es uns einfach hier nach oben verschieben, und dann werden wir unsere Ausrichtungswerkzeuge wieder verwenden, um es direkt in der Mitte unseres Dokuments auszurichten . Also lasst uns hier auf der linken Seite ganz nach rechts anfangen. Schuld es, Werkzeug, Werkzeug, klicken Sie darauf und dann eine Linie Mitte und Mitte des Ziels. Nun, das Letzte, was ich tun möchte, ist, dass ich das tatsächlich ein bisschen höher bewegen möchte, weil es zu weit unten ist. Und wenn wir unsere Führer mit Commander Control und dem Semikolon einschalten, können wir sehen, dass oben zu viel Platz ist und die Symbole, die wir brauchen, um es etwas näher zu bringen. Also dieser erste Leitfaden ist um 1 30 Ich denke, ich werde einen zweiten Führer bei 1 80 machen Also denken Sie daran auf die Unterseite Ihrer Schnittstelle jetzt zu schauen, um den Führer bei 1 80 zu bekommen Alles klar, lassen Sie uns voran und schalten Sie unser Raster aus. Das wird es einfacher machen, diese bestimmte Ebene auszuwählen und sie nach oben zu verschieben. Also, was wir tun werden, ist, dass wir diese Ausrichtung wiederholen, die wir gerade gemacht haben, damit wir sie direkt in der Mitte platzieren können , über ihn reden und links rechts von dieser neuen Größe, die wir für das Menü erstellt haben. Alles klar, lassen Sie uns voran und greifen unsere Rechteck-Werkzeuge, damit wir unsere primäre Navigation neu ausrichten können, haben das Limit-Tool, klicken Sie auf das Menü und dann eine Rate der Auswahl neu ausrichten können. nun Bevor wirnunauf den nächsten Teil dieses Projekts gehen, denke ich, dass wir ein paar Dinge tun können, um dieses Header-Design zu verbessern. Was ich tun möchte, ist, dass ich diese Logos hier greifen möchte und die Deckkraft senken möchte, damit sie nicht so dunkel sind wie sie jetzt sind. Weil dies das primäre Logo ist. Diese Luft sekundär und ich wollen nicht, dass diese Logos mit diesem konkurrieren. Und das können wir einfach tun, indem wir die Deckkraft dieser drei Schichten senken. Und ich werde sie auch fallen lassen . 30 für die Deckkraft auf allen drei. Nun, das letzte, was ich tun möchte, ist, dass ich eine Zeile oberhalb und unterhalb der primären Navigation hinzufügen . Dies wird helfen, ihm eine Trennung von der oberen Verletzung des Kopfes zu geben. Um das zu tun, werden wir hier nach oben gehen, und wir werden eine neue Ebene erstellen. Nennen wir es Primärbox. Wir werden es auf Transparenz für den Ausfüll-Klick setzen. OK, dann greifen wir unser Rechteck-Werkzeug und wir müssen auch unsere Führungen einschalten. Also lassen Sie uns hier eine Auswahl treffen, gehen Sie nach oben, um die Auswahl der Kontur zu bearbeiten und dann sollten alle Einstellungen, die wir für die Kreise erstellt haben , gleich sein. Und wir werden die wieder benutzen. Klicken Sie einfach auf Strich. Wählen wir Commander Control im Buchstaben D und Haider Guides aus und jetzt haben wir die Linie darüber und darunter. Okay, ich denke, wir sind bereit, zum nächsten Teil des Projekts zu gehen, der das Mega-Menü dieses Webdesigns sein wird. 23. Mega-Menü: Hallo und willkommen zurück. Alles klar, der nächste Schritt unseres Headers ist die Erstellung eines Mega-Menüs, so dass unser Webentwickler weiß, dass diese Links für die Navigation nicht nur Standardlinks sind, sondern Links, die zu einem Mega-Menü verlinken. Wenn wir also zurück zu dieser Nike Website gehen und ich den Mauszeiger über einen der Menüpunkte, können wir das riesige Mega-Menü mit zusätzlichen Links sehen, die alle verschiedenen Produkte in den verschiedenen Kategorien zeigen . Die andere Sache, die wir haben, ist diese kleine schwarze Linie direkt hier unter dieser bestimmten Kategorie, und wir sehen sie nirgendwo anders, bis wir zu diesen anderen Kategorien navigieren. Dies wird also als Hover-Zustand bekannt, und die andere Sache, die Sie bemerken werden, ist, dass es eine Hand gibt, und wenn ich mich davon wegziehe, ändert es sich in einen Pfeil, so dass die Hand auch Teil des Hover-Status ist. Wenn es um Ihren Hover-Zustand geht, gibt es viele verschiedene Dinge, die Sie tun können. Abgesehen davon, dass Sie nur eine Zeile am unteren Rand hinzufügen können, können Sie sie oben hinzufügen. Sie könnten eine Box hinzufügen. Sie können die Farbe des Textes oder des Hintergrunds oder beides ändern. Es gibt viele verschiedene Dinge, die Sie tun können, unabhängig davon, was Sie sich für Ihr Webdesign entscheiden. Sie müssen es in diesem Webdesign zeigen, damit der Webentwickler weiß, was passieren wird, wenn Sie den Mauszeiger über einen bestimmten Bereich bewegen. Also in diesem Tutorial werden wir unsere Hover-Zustände erstellen und unser Mega-Menü erstellen. Gehen wir weiter und zoomen Sie in unsere primäre Navigation, und das erste, woran ich arbeiten möchte, ist die Linie unter der Kategorie, die über die schwebt. Ich werde mich aus meinen Guides mit Commander Control und dem Semi Colon herausdrehen, und lassen Sie uns einen Führer bis zum Ende und zum Anfang dieses Wortes hier ziehen. Wir werden dann unser Auswahlwerkzeug mit dem Buchstaben M greifen Lassen Sie uns eine Auswahl zwischen diesen beiden Führungen und lassen Sie uns wie unsere primäre Box. Ordnung, verwenden Sie Ihre Tastaturen wurden geschnitten, um diesen bestimmten Bereich mit Kommandantensteuerung in dem Buchstaben C zu kopieren und dann mit Befehl oder Kontrolle zu tun und der Buchstabe V kommen zurück auf Ihre Ebenen weil wir eine schwebende Auswahl haben, wir müssen es auf eine eigene Ebene verschieben, so dass wir das tun können, indem Sie mit der rechten Maustaste klicken und wählen Sie eine neue Ebene. Kate. Lassen Sie uns diese Hover-Linie umbenennen, und das muss tatsächlich aus diesen Gruppenspielern kommen, oder wir werden das den ganzen Weg rausziehen. Und lassen Sie uns eine neue Ebenengruppe namens Hover State erstellen und ihre Hover-Linie nach innen setzen. Was ich jetzt tun möchte, ist, dass ich diese Linie etwas dunkler machen möchte. Ich verstecke meine Guides hier mit Commander Control und Semi Colon. Lasst uns unser Eimer-Füllwerkzeug greifen. Stellen Sie sicher, dass Sie Schwarz für den Vordergrund ausgewählt haben, und klicken Sie dann auf diese Zeile, um sie rein schwarz zu machen . In Ordnung, lassen Sie uns eine Google-Suche nach unserem Hand-Symbol machen. Lässt freie Hover-Hand-Symbole eingeben. Klicken Sie auf diesen PNG-Button, um Ihre Suchanfragen zu knien. Dieser hier sieht so aus, als würde es funktionieren. Wir gehen mit der rechten Maustaste auf Wählen Kopie Bild und dann Commander Control und V, um es in einfügen . Und lasst uns richtig. Klicken Sie auf die Ebene und wählen Sie eine neue Ebene aus. Alles klar, auf jeden Fall viel zu groß. Alles klar, lassen Sie uns voran und zoomen Sie mit Befehl oder Kontrolle und der Null-Taste heraus und lassen Sie uns unser Skalierungswerkzeug greifen war Shift plus s und lassen Sie uns das ein wenig nach unten bewegen, damit wir es ein wenig besser sehen können . Und lasst uns eine Ecke nehmen und sie runter auf, sagen wir, 91 fallen lassen . Moment müssen wir vielleicht kleiner werden. Werfen wir einen Blick, indem wir hineinzoomen. Es ist eigentlich ein bisschen zu groß, noch richtig. Also lasst es uns nochmals herunterskalieren. Wenn Sie die Mitte dieser Maßstabsbox direkt hier greifen, können Sie sie in die Position verschieben. Also werde ich es einfach dorthin bringen. Klicken Sie auf Skalierung. Und das andere, was ich tun möchte, ist, dass ich diesen Pfeil entfernen möchte, weil wir ihn nicht brauchen . Greifen Sie das Rechteck-Werkzeug mit dem Buchstaben m wählen Sie es aus und drücken Sie dann Ihre Rücktaste oder Löschtaste. Es ist kein sehr hochwertiges Symbol, aber es wird vorerst funktionieren. Wenn wir eine benutzerdefinierte Symbole wie diese verwenden, würde ich ein wenig mehr Zeit auf der Suche nach einem Symbol mit höherer Qualität verbringen. Um dies ein wenig einfacher zu machen, gehen wir zurück auf die Nike Website und wir werden den Inhalt jeder Spalte kopieren und eine neue Ebene für jede Spalte in unserem Webdesign-Projekt erstellen. Also lassen Sie uns zur ersten Spalte gehen, wählen Sie alle Commander Control und sehen, um zu kopieren und dann was? Ihr Textwerkzeug können wir mit Commander Control in den Buchstaben V einfügen. Wir werden alle auswählen und lassen Sie es auf 16 Pixel für die Schriftgröße ändern, und wir werden Eisenbahn für den Funt verwenden. Lasst uns wirklich mutig werden. Da diese erste Spalte ist fett auf ihrer Website wird voran gehen und passen, dass für jetzt. Ich wähle mein Bewegungstool aus, damit ich da rauskomme und einfach ein bisschen heranzoomen kann. Ordnung, gehen wir wieder rein und nehmen noch ein paar andere Anpassungen an unserem Text vor. Sofort. Der Text ist zu nah beieinander, und es macht es schwieriger zu lesen, also möchte ich etwas Leerzeichen zwischen jeder der Zeilen hinzufügen. Die andere Sache, die ich tun möchte, ist die Größe zu erhöhen, und ich denke, ich möchte den Stil der Schrift auch zu etwas mit einem schwereren Gewicht ändern . Ich werde mit ultra fett gehen und dann Zehe den zusätzlichen Platz zwischen jeder Zeile hinzufügen. Wir werden die Basislinie des ausgewählten Textes erhöhen, also denke ich, dass 14 ziemlich gut funktionieren werden. Sieht viel einfacher zu lesen aus, also lasst uns das machen. Gehen Sie weiter und zoomen Sie hier raus und lassen Sie uns die erste Spalte hier nach rechts setzen. Eigentlich, ziehen wir es aus dem Hover-Staat, weil es nicht Teil des Hover-Staates ist. Und gehen wir weiter und bewegen uns, dass wir hier nach links sind. In Ordnung, lassen Sie uns die nächste Spalte kopieren und im Grunde dasselbe dieses Mal. Ich werde nicht mit Ultra Bold gehen. Ich werde mit mittlerer gleicher Größe gehen, diese 16 Pixel und dann wieder 16 für die Grundlinie. Nun sollte der Titel der Schuhe etwas dunkler sein, da es sich um einen Titel handelt. Also lasst uns das in Ultra Bold ändern. Also mussten wir das nur noch drei Mal machen. Ich werde dieses Video-Tutorial beschleunigen, damit Sie das nicht in Zeitlupe sehen müssen , da ich es bereits zweimal gemacht habe. Und dann kannst du das auch selbst machen. In Ordnung. - Was? Das sind Gitter, die eingeschaltet sind. Ich gehe weiter und schiebe das hier in die rechte Spalte und dann diese hier drüben . Ich gehe rüber zur linken Spalte, Soda hängt mit unserem Nike-Logo hier drüben ab. Aber ich muss es auf die Pick a Layer oder Guide Option ändern. Sonst werde ich diese Schicht weiter hier verschieben. In Ordnung, wir werden eine neue Ebenengruppe erstellen. Nennen wir es Mega-Menu-Text, und wir werden jede dieser Spalten hineinlegen. Ich werde auch meine Ebene so organisieren, dass sie in der richtigen Reihenfolge sind, und lassen Sie uns sie umbenennen . So haben wir neue Releases, Schuhe und Kleidung. Alles klar, schalten wir die Guides aus. Alles klar, lassen Sie uns alle unsere Spalten so ausrichten, dass sie alle oben ausgerichtet sind, damit wir unser Rechteck-Werkzeug greifen können , um eine Auswahl zu erstellen, um uns einen Ausgangspunkt zu geben. Und dann müssen wir nur jede der Spalten einzeln mit unserem Ausrichtungswerkzeug greifen , und wir müssen sicherstellen, dass wir sie jetzt auswählen. Das Problem ist, wir den gesamten Gruppen-Layer auswählen und nicht den Layer, auf den wir geklickt haben. Wir müssen diese also außerhalb des Gruppen-Layers verschieben, damit wir sie ausrichten können und sie dann wieder einschieben können. Und dann werden wir eine Linie zum oberen Rand des Ziels auswählen. Und dann werden wir das für die anderen Spalten tun, während wir sicherstellen müssen, dass wir diese Ebene auch mit dem Ausrichtungswerkzeug auswählen müssen. Okay, lassen Sie alles auswählen und wieder einschieben. In Ordnung, ich schnappe mir die ganze Textgruppe, und ich werde sie nach unten verschieben. Bevor Sie versuchen, sie zu verschieben, stellen Sie sicher, dass Sie die aktive Ebene ausgewählt haben, und klicken Sie dann darauf und verwenden Sie die Pfeiltasten, um sie nach unten zu verschieben. Okay, das letzte, was wir tun müssen, ist, etwas zusätzlichen Platz zwischen den Spalten hinzuzufügen. Wir haben zu viel hier und nicht genug hier, also gehen wir weiter und schalten unser Netz ein und Spacey ist ein bisschen besser raus. Nun, bevor wir das tun, lassen Sie uns voran und vergrößern und fügen Sie einen Leitfaden an der Spitze unserer Spalten hier hinzu. So wissen wir genau, wo es gehen muss, um sich aufzustellen und lassen Sie uns den Shop nach Trends Schicht wählen . Aber sie werden verschoben Werkzeug und wieder, wir müssen sicherstellen, dass Bewegung aktive Ebene ausgewählt ist, so dass wir diese Ebene und nicht etwas anderes auswählen können . Ich werde es hier in diese Rasterspalte schieben und dann werde ich nur meine Pfeiltasten benutzen , um es an Ort und Stelle zu bewegen. Okay, lassen Sie uns weitermachen und das Mega-Menü direkt in der Mitte ausrichten. Alles klar, jetzt sieht alles viel besser aus. Das letzte, was ich tun möchte, ist, hier unten eine weitere Zeile hinzuzufügen, um zu zeigen, dass das das Ende des Mega-Menüs ist. Lassen Sie uns in unsere primäre Navigation gehen und wählen Sie unsere primäre Box und duplizierte endlose Umbenennen Sie es Mega-Menü. Unterm Strich, bewegen Sie das hier nach oben. Lasst uns unser Umzugswerkzeug packen und wir werden diese Linie hier unten nach unten rechts bewegen, da sollte es gut sein . Was ich tun möchte, ist, diese Spitzenlinie hier loszuwerden. Wir müssen nicht, also gehen wir zurück zum Rechteck-Werkzeug mit dem Buchstaben M, wählen Sie es aus und drücken Sie dann Ihre Lösch- oder Rücktaste. Alles klar, stellen wir sicher, dass wir einen geraden Abstand zwischen dem Ende dieser Zeile und dem oberen Teil dieser Zeile für unseren Mega-Menü-Text haben. Wählen wir es aus und verwenden Sie erneut unser Auswahlwerkzeug, um eine Auswahl für die Höhe zu treffen. Perfekt. In Ordnung, lassen Sie uns eine neue Gruppe erstellen, Layer. Eigentlich, nicht in diesem. Dieser Name, dieses Mega-Menü. Und wir werden diese Gruppenebene innerhalb und das Endergebnis sowie unseren Hover-Zustand setzen . Wir müssen auch diese speziellen Gruppenebenen in die richtige Reihenfolge bringen. Wir sollten die Logos an der Spitze haben, gefolgt von primären sekundären, und dann ein Menü machen. Okay, jetzt, da wir mit unserem Mega-Menü fertig sind, können wir mit der Arbeit am nächsten Teil unserer Website beginnen. Aber bevor wir das im nächsten Tutorial tun, möchte ich einige kleinere Anpassungen durchgehen, die wir für unsere Kopfzeile vornehmen sollten, bevor wir mit dem Heldenbereich beginnen . Also werden wir das im nächsten Tutorial abdecken. 24. Kleinere Anpassungen: Hallo und willkommen zurück. Alles klar, wir sind fast fertig mit unserem Header. Aber bevor wir zum Heldenbereich übergehen, möchte ich nur ein wenig mehr über den Header und das aktuelle Design sprechen, das wir haben, weil ich denke, dass es viel besser gemacht werden kann als das, was wir derzeit haben. Während ich entwerfe, kann ich feststellen, dass das aktuelle Design, das ich habe, nicht sehr gut ist und ich es besser machen kann . Zum Beispiel glaube ich, dass die primäre Navigation der prominenteste Teil unseres Headers aus diesen drei Elementen hier sein sollte . Aber im Moment haben wir die Logos, die viel größer sind als die primäre Navigation, und unsere Augen springen irgendwie hin und her zwischen diesen beiden. Und dann haben wir hier etwas und denken Sie daran, dass das Mega-Menü nicht sichtbar wäre , bis wir über die primäre Navigation schweben. Also ist es jetzt wirklich beschäftigt, und ich denke, wir müssen es reparieren, damit es nicht so beschäftigt ist und die Prominenz wieder auf die primäre. Navigation und Schwächung tun einfach das, indem Sie unsere Logos packen und sie kleiner machen. Also lasst uns voran gehen und das tun Lasst uns unsere Waage mit Shift Plus s packen und uns einfach eine Ecke schnappen und sie kleiner machen. So genau dort können wir sehen, dass definitiv den Fokus auf die primäre Navigation zurücksetzt. Das ist also das erste, was wir sehen, als ihre Augen hier drüben hinreißen, und dann können wir sehen, dass hier etwas ist, also ist es nicht so beschäftigt wie vorher. Die andere Sache, die wir wirklich schnell machen müssen, ist, dass wir die Logos neu ausrichten müssen. Also lasst uns die Logos greifen und sie wieder an Ort und Stelle entlang der linken Seite des Gitters setzen. Und wir greifen unser Rechteck-Werkzeug mit dem Buchstaben M und einer Linie von oben nach unten. Okay, das behebt diesen Teil des Designs. Das andere, was ich denke, müssen wir tun, ist, dass wir die Schriftarten ein wenig größer machen , und wir brauchen jetzt etwas zusätzlichen Platz. Das nächste, was ich denke, dass wir tun können, um das Gesamtdesign unserer Kopfzeile zu verbessern, ist den Abstand zwischen den Wörtern zu erhöhen und die Schriftgröße und vielleicht den Stil der Schriftarten zu erhöhen, um sie ein wenig fett zu machen, als sie derzeit sind, und das wird helfen, es viel prominenter zu werden. Und unsere Augen werden zuerst zu diesem Abschnitt heranziehen, mehr als jetzt. Das erste, was wir tun werden, ist unser Textwerkzeug zu greifen, und wir werden die fünf Leerzeichen dazwischen auswählen. Die Worte würden sie kopieren, und dann werden wir sie am Ende jedes der Wörter einfügen, damit wir den Abstand zwischen jedem Wort vergrößern können . Alles klar, gehen wir weiter und richten uns neu in den Mittelpunkt. Also lasst uns unser Rechteck-Werkzeug mit dem Buchstaben M packen Wir werden unsere Auswahl treffen, und wir müssen diese primäre Navigationsmenüebene tatsächlich aus dem Gruppen-Player holen , damit wir sie mit unserem Ausrichtungstool auswählen können, und dann können wir den Mittelpunkt des Ziels ausrichten. Lass uns weitermachen und das wieder reinlegen. Eigentlich denke ich, wir hätten die Schriftgröße zuerst erhöhen sollen, aber das ist in Ordnung. Lassen Sie uns fortfahren und wählen Sie alle aus und erhöhen Sie die Schriftgröße auf 28. Und lassen Sie uns auch Oswald fett wählen, um den Stil oder die Dichte dieser Schriftart zu erhöhen. In Ordnung, also müssen wir weitermachen und uns wieder neu ausrichten. Na gut, lass uns weitermachen und den Abstand zwischen diesen beiden Zeilen hier erhöhen, wir greifen unsere primäre Box. Wir müssen auf Ebene gehen und Zuschneiden auf Inhalt auswählen, so dass die Ebenenbegrenzung an den Linien selbst und nicht am gesamten Dokument gefangen wird. Jetzt werden wir unser Skalierungswerkzeug mit Shift Plus s greifen, und dann können wir einfach entweder die Oberseite des Bodens greifen und einfach nach unten ziehen oder es nach oben bringen um die Menge an Platz zu erhöhen, die etwas voran geht und 78 für die Höhe auswählen. Und jetzt müssen wir uns nur an der Mitte der oberen und unteren Ecke unserer Box ausrichten. Also werden wir das primäre Navigationsmenü wieder herausziehen. Schnappen Sie sich Ihr Rechteck-Werkzeug, treffen Sie eine Auswahl, stellen Sie sicher, dass Sie darauf mit dem Ausrichtungswerkzeug und dann eine Linie Mitte des Ziels klicken. Perfekte Commander Kontrolle Andy de wählen. Lasst uns das wieder reinlegen. Und ich denke, das ist zehnmal besser als vorher. Unsere primäre Navigation ist jetzt die prominenteste. Es hebt sich am meisten hervor. ziehen sich unsere Augen an. Erstens ist der Header nicht so ausgelastet wie zuvor. Wir erkennen immer noch, dass es hier drüben ein Logo gibt und diese Luftlinks, die uns woanders bringen . Und wir haben hier eine sekundäre Navigation, die viel kleiner ist als die primäre Navigation und Logos. Also haben wir im Grunde unsere Augen von hier nach hier und dann zurück zu unserer primären Navigation , wo wir wollen, dass sie hingehen, denn dort werden sie die Produkte finden, nach denen sie suchen. Jetzt haben wir ein weiteres Problem, da wir die Größe der primären Navigation und der primären Box angepasst haben , und dann schalten wir unser Mega-Menü ein. Alles hat sich verschoben. Wir brauchen und etwas zusätzlichen Platz für unsere Spalten hier, weil es zu eng ist und unsere Hover-Zustände jetzt auch hier in diese Kategorie verschoben werden müssen. Gehen wir also weiter und nehmen Sie diese Anpassungen vor, und wir sind fertig und bereit, zu unserem Heldenbereich weiterzugehen . Also das erste, was ich tun möchte, ist die Arbeit am Hover-Zustand. Also lasst uns den Schwebezustand finden und wir haben unsere Hand hier. Ich muss auch den Namen dieses zu Hover-Symbols ändern, und lassen Sie uns fortfahren und das über bewegen. Ich habe auch die Hover-Linie, die ich auch bewegen muss, und ich muss es tatsächlich ein wenig größer machen. Also werde ich mein Waagenwerkzeug mit Shift Plus S packen und ich werde das einfach nach rechts schieben, um mit unserem Wort übereinzustimmen. In Ordnung, jetzt, wo wir das haben, gehen wir weiter und zoomen wieder raus und wir werden das Endergebnis nur ein bisschen nach unten bewegen , damit wir ein bisschen mehr Platz haben können, damit unsere Säulen passen. Also lasst uns unser Mega-Menü Bottom Line Grammatik bewegen Werkzeug und einfach bewegen Sie es ein wenig nach unten . Lassen Sie uns unsere Mega-Menü Text gruppierte Ebene den Buchstaben M für unser Rechteck-Werkzeug greifen, so dass wir oben nach unten ausrichten können , und wir mussten auch diese Gruppenebene aus der anderen Gruppenebene ziehen, so dass wir es mit unserem Ausrichtungstool auswählen können Verbündete Mitte des Ziels und Lassen Sie uns es zurück in das Mega-Menü de Select. Und jetzt gehen wir weiter und fügen unseren Hintergrund zum Mega-Menü hinzu. Also greifen wir wieder unser Rechteck-Werkzeug und zeichnen eine Auswahl aus. Lassen Sie uns den Vordergrund ein Weiß ändern, und wir werden unser Eimer-Füllwerkzeug greifen. Wir müssen auch eine neue Ebene erstellen, um es in setzen, Lassen Sie uns nennen es Hintergrund, machen Sie ein Menü, und dann können wir es mit weiß füllen. Das ist de Select. Und jetzt gehen wir weiter und bewegen dies in die richtige Gruppenebene, die in unserem Mega-Menü unten sein wird. Perfekt. In Ordnung jetzt, die andere Sache ist, wenn Sie dieses fertige Webdesign an den Webentwickler senden, wollen Sie nicht das Mega-Menü eingeschaltet haben. Stattdessen willst du es ausschalten lassen. Während sie durch all die verschiedenen Gruppen, Schichten und Schichten arbeiten , werden sie auf die Mega-Männer stoßen. Sie werden feststellen, dass es ausgeschaltet ist, sie schalten es ein, und dann wissen sie, dass sie das auch für die primäre Navigation codieren müssen. Die andere Sache ist, wenn Sie einen Blick auf Nike Website werfen, sehen Sie alle diese verschiedenen Kategorien, und jeder hat sein eigenes einzigartiges Mega-Menü, so dass Sie ein Mega-Menü für jede Kategorie erstellen müssen alle verschiedenen Links für diese bestimmte Kategorie. Ansonsten wird der Web-Entwickler nur das eine Mega-Menü vier Männer codieren. Also werden wir das nicht tun, da Sie bereits wissen, wie es geht. Wenn du üben willst, kannst du das für jede Kategorie tun, und dann würde ich ihnen auch andere Namen geben. Also haben wir Mega-Menü Männer, und dann würde ich einen für Frauen, Jungen , Mädchen, etc. tun. Und dann würde ich das natürlich für den Webentwickler ausschalten , aber für sich selbst, weil Sie das nicht wollen, wenn Sie an Ihrem Heldenbereich arbeiten , der in diesem Bereich genau hier ist. Okay, jetzt, da wir unseren Header aktualisiert haben, sieht er viel besser aus als vorher. Also wieder, da ich an verschiedenen Abschnitten meiner Website arbeite, habe ich kein Problem, zurückzugehen und Anpassungen vorzunehmen, um das Design besser zu machen. Wenn ich etwas sehe, das nicht mit dem Gesamtdesign funktioniert Okay, also als nächstes werden wir an unserer Helden-Session arbeiten. Also, wenn du bereit bist, daran zu arbeiten, lass es uns tun. 25. Hero: Hallo und willkommen zurück. Alles klar, jetzt werden wir an unserem Heldenbereich arbeiten. Und wie Sie wissen, aus früheren Lektionen einer der wichtigsten Teile dessen, ist der Heldenbereich aus früheren Lektionen einer der wichtigsten Teile dessen,welche Seite wir brauchen, um das Interesse einer Person zu ergreifen und sie hoffentlich dazu zu bringen, etwas zu tun, bevor sie entweder zu einer anderen Seite navigieren oder bevor sie sich entscheiden, die Website vollständig zu verlassen. Wenn also eine Person auf einer Webseite landet, müssen sie zuerst entscheiden. Bin ich an der richtigen Stelle? Und wenn ja, wird mir diese Seite geben, was ich brauche? In diesem Fall werden wir Bilder auf kreative Weise verwenden, um sicherzustellen, dass diese Person genau weiß , wo sie sind, und um ihr Interesse zu wecken, weil sie an der neuen Air Jordan neun interessiert sind. Lassen Sie uns also voran und erstellen Sie unseren Heldenbereich, und es wird wirklich einfach zu tun sein, weil wir drei Hauptteile des Heldenabschnitts haben . Wir haben unsere Überschrift, die den Jetzt kaufen Button enthält, sind Schuh und Michael Jordan, der in den Schuh eintaucht . Also zuerst müssen wir die Höhe des Heldenabschnitts definieren und dieser Heldenabschnitt wird sich basierend auf dem Gerät oder der Computermonitorgröße ändern, die diese Person verwendet. Was Webentwickler heutzutage tun müssen, um sicherzustellen, dass dieser Hero-Sektion in der meisten Anzahl von Geräten sichtbar ist , ist zu erstellen, was als Antwort von Code bekannt ist. Aber für uns müssen wir den Heldenabschnitt definieren, die Höhe davon, die die größte Menge an Bildschirmgrößen aufnehmen wird. Und je nachdem, mit wem Sie sprechen, könnte es überall von 700 Tage 100 Pixel sein. Also halte ich gerne meinen Heldenbereich und diesen Bereich. Und dann lasse ich den einen Entwickler Nein, dass die Website muss reagieren, und der Heldenbereich muss verfügbar oder sichtbar sein und so viele Geräte und Bildschirmgrößen wie möglich. Also lassen Sie uns voran und schalten Sie unsere Führer mit Befehl oder Kontrolle und der Semikolon-Taste ein, und wir werden eine Führung nach unten ziehen 750 dies wird der Eindämmungsbereich für unseren Heldenbereich sein . Also gehen wir weiter und schnappen uns unseren ersten Satz Schuhe, die Nike Schuhe sind. Es muss nicht genau die gleichen Schuhe sein, die ich ausgewählt habe. Das ist nur zum Üben. Also gehen Sie weiter, greifen Sie den Schuh, greifen Sie Ihr Bewegungstool und bewegen Sie es in Position. Wir brauchen auch Michael Jordan. Also lasst uns ihn finden. Und bringen wir ihn auch zu diesem Teil der Webseite. Lasst uns unser Textwerkzeug greifen und unsere Hilfslinien ausschalten. Und lassen Sie uns unsere Inhalte für die linke Seite unseres Heldenbereichs erstellen. Und in allen Großbuchstaben werden wir den neuen Eingang korrigieren, um es ein J 9 in die zweite Zeile zu setzen und unseren Text schwarz zu machen . Ich möchte auch die Schriftart in Oswald Bold ändern und die Schriftgröße auf 100 erhöhen. Lasst uns unser Move-Werkzeug packen und zurück zu unserem Nike Schuh gehen, damit wir ihn drehen können , damit unser neuer Text in diesen Bereich ein bisschen besser passt. Ich werde meine Guides anmachen und dann die Schuhe drehen. Wir werden unser Drehwerkzeug greifen, das genau hier ist, und ich habe die Tastenkombination eingerichtet, um zu steuern oder Befehl plus T Also Ihre Tastenkombination, vielleicht anders, je nachdem, ob Sie oder nicht aktualisiert, dass am Anfang des Kurses. Sobald Sie das haben, gehen Sie voran und klicken Sie auf die Schuhe, und dann können Sie entweder den gewünschten Winkel eingeben, oder Sie können ihn manuell drehen, indem Sie irgendwo auf der Außenseite klicken und dann die Maus nach links oder rechts bewegen . Also werde ich es einfach auf so etwas bewegen, um 32 oder 34 für den Winkel. Wenn ich klicke, drehe und dann mit dem Verschiebenwerkzeug, kann ich es direkt dort in Position bewegen. Ich muss das vielleicht ändern, sobald ich alles andere eingerichtet habe. Also lasst uns unser Textil mit dem Buchstaben T packen. Lasst uns alles auswählen, denn was ich tun möchte, ist, dass ich den Abstand zwischen diesen beiden Linien reduzieren möchte. Es ist zu viel Platz. Um also den Abstand zwischen den beiden Zeilen zu reduzieren, können wir diese zweite Option hier verwenden, und wir wollen eine negative Zahl hinzufügen, um diese Menge an Speicherplatz zu reduzieren. Also werde ich minus 40 eingeben und das sieht jetzt viel besser aus, okay? Und lasst uns unsere Rechteck-Werkzeuge greifen, damit wir zuerst unseren Kauf-Button erstellen können. Lassen Sie uns voran und erstellen Sie eine neue früher. Lassen Sie uns es für Taste nennen und gehen wir voran und schalten Sie unsere Gitter ein, denn was ich tun möchte ist eine Kaufschaltfläche zu erstellen, die drei Spalten breit ist. Und dann schnappen wir uns unseren Eimer. Füllen Werkzeug, wählen Sie eine Farbe für Ihren Kauf-Button und dann gehen Sie voran und füllen Sie es aus und de wählen. Okay, ich werde mein Zoomwerkzeug hier schnappen, damit ich etwas hineinzoomen kann. Lassen Sie uns unseren Führer einschalten, damit wir alles ausrichten können. Gehen wir weiter und verschieben Sie zuerst unsere Inhalte, und das müssen wir eigentlich ein wenig aufstellen. Das ist Graham sind per Knopfdruck und bewegen Sie das in Position genau da drüben. Lassen Sie uns nun den Text für unseren Buy-Button erstellen. Gehen wir zurück zu Weiß für die Farbe des Textes. Und machen wir mittlerweile 75 für die Größe des Textes, und ich gehe zu Lasst uns Eisenbahn für den Knopf benutzen. Ich werde Railway ultra fett benutzen. Es ist ein bisschen zu groß, daher können wir unser Skalierungswerkzeug verwenden, um es so zu verdichten, dass es in die Box passt. Also mit Shift und s bekommen wir unser Skalierungswerkzeug. Lassen Sie uns den Link ausschalten, so dass wir einfach die mit unserer Inhalte anpassen können. Also werde ich das einfach in, wie, wie, also klicken Sie auf Skala. In Ordnung, lassen Sie uns weiterzoomen und lassen Sie uns Michael Jordan reparieren, damit er nicht so groß ist wie er jetzt ist , also gehen wir weiter und greifen Schuldenschicht. Okay, also lasst uns unser Skalierungswerkzeug greifen und sie nach unten skalieren. Also ist er nicht so groß, wahrscheinlich zu klein. Also werde ich hier etwas größer gehen. Ich werde meine Guides einschalten, weil ich sicherstellen will, dass sein Fuß hier am Rand der Gitterlinie ist . Lasst es uns skalieren. Lasst uns unser Bewegungstool packen und den Schuh ein wenig über bewegen, und ich werde diesen Inhalt hier greifen und ihn ein wenig größer machen. Aber bevor wir das tun, lassen Sie uns fortfahren und eine neue Ebenengruppe erstellen. Nennen wir es Inhalt. Ich werde unsere von Nagel Button Informationen dort sowie unseren Inhalt einfügen, und dann müssen wir die Ebenengrenze für diese bestimmte Gruppenebene ändern, indem wir auf die Ebene gehen und Zuschneiden auswählen. Der Inhalt kann. Gehen wir zurück zum Skalierwerkzeug. Und lasst uns dies erhöhen, um den Raum hier zu füllen. Klicken Sie auf Skalierung. Schalten wir unsere Führer und ihre Gitter aus. Alles klar, das sieht ziemlich gut aus. Gehen wir weiter und lassen uns hier fertig organisieren. Lassen Sie uns eine neue Ebenengruppe erstellen. Ich werde es Bilder nennen. Wir werden die reinlegen und den Schuh finden. Lassen Sie uns das auch reinlegen. Und dann noch eine Ebenengruppe für den Heldenbereich. Also nennen wir es Held. Zieh es raus. Wir werden unseren Inhalt und unser Bild dort hineinlegen. Und gehen wir einfach weiter und schieben das hier auch nach oben. Die andere Sache, die wir tun müssen, ist, was wir noch nicht getan haben, ist, alle diese Gruppen-Layer in eine eigene Gruppen-Schicht namens Header zu setzen . Also lassen Sie uns voran und tun das auch, damit Sie sehen können, indem Sie alles in ihre eigenen Gruppen-Layer setzen. Wir haben geholfen, das Ebenenfenster zu organisieren, so dass es einfacher ist, genau das zu finden, was wir brauchen. Also jetzt haben wir unsere Kopfzeile in unserem Helden in separaten Gruppen, Ebenen und unser Heldenbereich ist jetzt fertig. Also im nächsten Tutorial, werden wir anfangen, an der Körperabschnitt unserer Website zu arbeiten 26. Körper: Hallo und willkommen zurück. Ordnung, also für diesen Teil unseres Projekts werden wir anfangen, an dem Körperteil der Webseite zu arbeiten, und wir werden diesen vorhandenen Inhalt übernehmen und duplizieren, damit wir während unseres gesamten Designs konsistent sein können , und es macht es einfacher im Vergleich zum Neustart von Grund auf neu. Aber wir haben ein kleines Problem, und das ist, wenn wir diesen Text größer skaliert. In der letzten Lektion wurde der Text von einer Vektorebene in eine Grafikebene umformatiert, und Sie können sehen, dass der Text unscharf und nicht so scharf ist wie zuvor. Und wenn wir unser Textwerkzeug nehmen und darauf klicken, erhalten wir hier eine kleine Nachricht, die fragt, ob wir unseren Text weiter bearbeiten wollen. Wenn ich auf Bearbeiten klicke, wird der Text wieder auf die ursprüngliche Größe geändert, die er war, bevor er nach oben skaliert wurde. Und dann müssen wir alle auswählen und den Text so skalieren, dass er die Größe passt, die wir wollen. Und lassen Sie uns 130 für die Pixel tun. Und gehen wir weiter und verschieben diesen Text wieder nach oben. Also richtig über es sollte gut sein und lassen Sie uns voran gehen und das gleiche tun für diesen Inhalt hier für den durch Nagelknopf. Klicken Sie darauf. Und dann lassen Sie uns dieses Mal tatsächlich Neue Ebene erstellen auswählen und es wird diese Informationen nehmen und wir werden es auf eine neue Ebene für uns setzen. Also werde ich das hier reinbringen. Jetzt kündigen Sie. Werfen wir einen Blick auf unsere Schichten hier und wir können sehen, dass wir zwei verschiedene Arten von Schichten haben. Und wir sprachen über all die verschiedenen Arten von Schichten zu Beginn des Kurses in der Layer-Vorlesung, und wir sprachen über all diese verschiedenen Arten von Schichten. Diese Ebene hier ist also eine Textebene, und wir wissen, dass, weil sie dieses Symbol hier als Teil dieser Ebene hat, die Ebene sie sprengt, obwohl sie die gleichen Informationen enthält. Mittlerweile ist es nicht wirklich eine Textebene. Es ist jetzt eine Grafik-Layer Sorge Pixel-Ebene, und es wurde in eine Pixelebene umgewandelt, wenn wir es neu skaliert. Sie müssen also vorsichtig sein, wenn Sie Ihren Text neu skalieren, da er ihn von einem Vektor in eine Pixelebene ändert , und Sie können ihn einfach mit Ihrem Textwerkzeug zurückändern. Also werde ich fortfahren und das jetzt löschen. Layer hier, die Pixelebene, weil wir das nicht brauchen. McGahan hat diese entfernte Nummer eins umbenannt, und wir müssen das nur wieder in Position bringen. Alles klar, lassen Sie uns voran und eine Zeile unseren Text direkt in der Mitte des Knopfes entlang aller vier Seiten. Und um das zu tun, müssen wir das jetzt zuerst nehmen, Schicht und es nach oben verschieben. Es ist also aus dieser Gruppen-Ebene. Andernfalls können wir es nicht mit unserem Ausrichtungswerkzeug auswählen. Jetzt können wir das Rechteck-Werkzeug greifen, um die Auswahl und das Ausrichtungswerkzeug zu treffen. Wir werden darauf klicken und dann werden wir Mitte und Mitte des Ziels ausrichten. In Ordnung, hören Sie mit dem durch Nagel Text innerhalb der Gruppenebene. Lassen Sie uns das schließen. Wählen Sie den Player der Kontaktgruppe aus und duplizieren Sie ihn. Ordnung, lassen Sie uns das rausziehen, weil es in einem anderen Abschnitt sein wird, und jetzt können wir das mit unserem Werkzeug packen und es nach unten in Position bringen. Lassen Sie uns unsere Führungen einschalten, damit wir sie hier auf der rechten Seite ausrichten können. Alles klar, finde deine Hurley Sandalen. Gehen Sie weiter und schalten Sie die Ebene ein. Und lassen Sie uns auch unseren Surfer finden. In Ordnung, lassen Sie uns unsere Sandalen hier anbringen. Die Sandale sieht etwas zu klein aus mir. Also werde ich voran gehen und das mit meinem Skalierungswerkzeug neu skalieren, es ein bisschen größer machen und es an der linken Seite unseres Rasters ausrichten. Hier, schnappen wir uns auch unseren Surfer. Ich werde ihn an einen Ort bringen und wieder skalieren. Lassen Sie uns es so aussehen, als würde der Surfer über die Seite der Sandale hier . Es wird ihn ein wenig wund bewegen, genau da ist gut. Und ich möchte auch diesen Inhalt nehmen und ihn nach oben verschieben. Eigentlich, lasst uns etwas Raum zwischen dem Heldenbereich und unseren Inhalten herausfinden. Ich möchte diesen Inhalt nur in Inhalte und diese Inhaltskopie ändern. In Ordnung, lass uns Graham unser Messwerkzeug. Und lassen Sie uns 75 Pixel vom unteren Rand des Heldenabschnitts ausmessen, damit wir diesen Inhalt an den unteren Rand dieser 75 Pixel setzen können . Also werden wir hier auf unseren Guide klicken und ihn nach unten ziehen, bis wir 75 Pixel unten unten links in unserer Benutzeroberfläche sehen. Genau dort heißt es 75, wenn ich loslasse, und dann gratuliere ich einem Führer und ziehe ihn runter, wo das Fadenkreuz ist. Und dann weiß ich, dass es 75 Pixel vom unteren Rand des Heldenabschnitts entfernt ist. Gehen wir voran und greifen das Werkzeug zum Verschieben. Und lassen Sie uns unsere Inhalte so verschieben, dass die erste Zeile genau dort an dieser bestimmten Richtlinie steht , die wir gerade erstellt haben. Okay, lass uns verkleinern. Und ich denke, wir können auch unseren Sando und unseren Surfer hochziehen. Ich denke, unser Surfer ist immer noch ein bisschen zu groß. Also werde ich die Waage nochmal schnappen und ihn etwas kleiner machen. In Ordnung, lassen Sie uns eine neue Ebenengruppe für unsere Bilder erstellen. Und dann gehen wir weiter und schieben sie mit unserem Werkzeug zum Verschieben nach oben. Okay. Ich werde den Surfer ein bisschen mehr herunterskalieren, weil ich sicherstellen will, dass der Ellenbogen nicht über dieser bestimmten Linie liegt . Alles klar, das sieht ziemlich gut aus. Ich werde weiter gehen und einen weiteren Führer an die Unterseite der Sandalen legen, und dann werde ich noch 75 Pixel messen. Wir haben also gleich viel Platz zwischen hier und diesem Schuh und dem nächsten Produkt. Also schnappen Sie sich Ihr Messwerkzeug nochmal und messen Sie 75 Pixel aus und platzieren Sie dann Ihren Kerl dort . Und dann ist es nur eine Frage der Wiederholung der Schritte, die wir gerade für diese Sandalen unternommen haben und dasselbe auch für die Converse Schuhe tun . Also lassen Sie uns voran und schalten Sie unsere neben Bildern ein und erstellen Sie eine neue Lear-Gruppe für sie namens Bilder Nummer zwei. Ich werde einfach alles ein bisschen hier runterbringen und wieder unsere Skater ein bisschen zu groß. Also werden wir unsere Waage wieder nutzen. Und lasst es uns einfach so aussehen, als würde er hier über die Oberseite dieser Schuhe skaten. Also genau da sollte es gut sein. Ich möchte eigentlich beide Bilder aufnehmen und sie nach rechts verschieben, so dass sie an der rechten Seite der Gitter ausgerichtet sind . In Ordnung, nehmen wir unseren Inhalt hier und duplizieren ihn nochmals, und lassen Sie uns fortfahren und den ganzen Weg rüber auf die linke Seite dieses Rasters in Position bringen. Und dann müssen wir den Text so verschieben, dass er mit dem neuen Leitfaden übereinstimmt, den wir gerade erstellt haben. In Ordnung, lassen Sie uns weitermachen und unsere Bilder ein wenig nach oben bewegen. Okay, also haben wir jetzt gleich viel Platz zwischen jedem der Produkte, aber persönlich denke ich, dass es immer noch zu eng ist. Also gehen wir weiter und gehen zurück und fügen weitere 25 Pixel Abstand zwischen unseren Inhalten hinzu. Also werden wir dieses Messwerkzeug wieder benutzen und einfach 25 Pixel ausmessen und dann unseren neuen Leitfaden dorthin bringen. Und dann müssen wir nur alles bewegen, um sich mit diesem Leitfaden auszurichten, und wir müssen dasselbe für diesen einen tun. Aber dieses Mal werden wir den Kerl auf den Boden der Schuhe bringen. Wir müssen also sicherstellen, dass wir in zwei Optionen eine Ebene oder eine Führungslinie auswählen, damit wir diese Hilfslinie auswählen können , um sie zu verschieben. Und was dann? Das Messwerkzeug. Ich werde 100 Pixel messen, und ich werde diesen Leitfaden hier loswerden, wir brauchen diesen nicht mehr. Und dann müssen wir nur alles in Position bringen und sicherstellen, dass Sie zurückgehen, um den Akt der Ebenen zu verschieben . Er konnte den gesamten Inhalt des Gruppen-Layers verschieben. Okay, lassen Sie diese in ihrer eigenen gegriffenen Ebene gruppieren. So neue Ebenengruppe wieder. Nennen wir es Hayley Sando. Also, Inhalt, den man hier hinein geht, sowie diese Bilder und dann eine neue Ebenengruppe für diese eine namens Converse. Okay, ich werde mit Befehl oder Kontrolle NZ verkleinern und die Guides verstecken. Jetzt denke ich, dass das Hinzufügen von zusätzlichen 25 Pixeln definitiv das Gesamtdesign hilft. Es ist also nicht so eng wie vorher. Eine letzte Sache, bevor wir weitermachen, gehen wir weiter und nehmen unsere Sandalen und unsere Converse Schuhe und gruppieren sie in ihre eigene Gruppenschicht namens Körper. Okay, ziehen wir das raus und legen dann die Sandalen und die Schuhe und da, und das war's. Wir sind alle fertig mit der Leiche. Awesome! In Ordnung. Ich hoffe, Sie genießen das. Bisher haben wir einen weiteren Abschnitt für dieses Webdesign-Projekt, und das ist die Fußzeile. Also, wenn du bereit bist, damit anzufangen, nun, lass es uns tun 27. Fußzeilen Teil 1: Also lassen Sie uns voran gehen und Kopie dieser Spalten und Adam zu unserem Dokument beschrieben das Textwerkzeug eingefügt in wählen Alle We 're gonna Do 14 Punkte für die Schriftgröße. Ändern wir es in Eisenbahn, die Eisenbahn Bold auswählen. Es ist zu früh genau da, wo ich es brauche, also werde ich es einfach da lassen, denn die anderen Bomben würden eine Spalte von Raum zwischen ihnen lassen . Also lassen Sie uns fortfahren und den Rest der Informationen kopieren. - Das Einzige, was ich tun will, ist, dass ich die mitnehmen will. Das einzige, was wirklich fett ID in diesen beiden Spalten sein sollte, sind die Titel. Also gehen wir voran und greifen diese drei Linien und wählen Sie einfach Eisenbahn regelmäßig und dann das gleiche mit diesen fünf Linien. Wir werden das nur in die Eisenbahn umstellen. In Ordnung, wir haben noch eine Reihe von Inhalten, die wir kopieren müssen, und das sind die Copyright-Informationen. Lassen Sie uns Eisenbahnmittel kursiv machen, nur um es ein wenig zu vermischen, und dann werden wir das hier auf der linken Seite ausrichten. Lassen Sie uns verkleinern, weil wir eine horizontale Linie zwei Spalten erstellen müssen und diesen Inhalt hier drüben, lasst uns unser Rechteck-Werkzeug greifen. Und dann, was die Farbe angeht, bin ich nur ein bisschen heller als der Hintergrund. 34 34 34 34 sieht vorerst gut aus. Und dann lassen Sie uns jetzt alles machen, was wir ausfüllen können. Ok, sie wählen aus. Es gibt Lügen. Ich denke, es könnte ein wenig zu dick sein mit dem, also werde ich es tun. Also werde ich mein Skalierungswerkzeug mit Shift Plus s greifen. Das einzige Problem ist, dass die Ebenengrenze behoben werden muss. Also lasst uns mit der Escape-Taste aus diesem Werkzeug raus. Stellen Sie sicher, dass der Layer-Inhalt jetzt. Die einzige Sache ist, ich denke, diese Linie ist ein wenig zu dick, also stellen Sie sicher, und stellen Sie sicher, dass wir unsere richtige Schicht hier auswählen. Ich möchte auch meine Guides und mein Gitter ausschalten. Schnappen Sie sich Ihr Ausrichtungswerkzeug Klicken Sie auf diesen Inhalt hier, es funktioniert. Lassen Sie uns diese Ebene also ganz nach oben bewegen und irgendwann eine Linie in der Mitte des Ziels . Nun, manchmal wird Gimp uns dazu bringen, Lee zu bewegen, also können wir manchmal diese Elemente mit unserem Ausrichtungswerkzeug auswählen, wo sich die Ebenen befinden. Aber manchmal erkennt gimp nicht, wo wir klicken, also müssen wir die Ebene in eine neue Position verschieben, die am meisten wie oben im Ebenenfenster über allen anderen Ebenen, so dass Sie tatsächlich auswählen können. Es ist irgendwie schwer zu lesen. Also lassen Sie uns beginnen mit über Nike Graver Textual Select alle mit Commander-Steuerung und ein und dann erinnern Sie sich in zwei Optionen. Wir können hier runter kommen und die Menge von mit dieser Option hier erhöhen. Und dieses Mal werden wir die Menge der Abstände erhöhen. Es wird also positiv sein. letzte Mal mussten wir auch für diese sagen, Okay, Okay, ich werde mir wieder einen Blick auf meine Guides werfen, und das ist und lasst uns eine Schicht oder einen Führer auswählen, weil ich diesen Leitfaden hier loswerden will . Gehen wir weiter und legen Sie diese Spalten hinein, also lassen Sie uns fortfahren und kopieren Sie diese Spalten und Adam in unser Dokument, dass das Textwerkzeug es einfügen, wählen Sie alles, was wir tun werden 14 Punkte für die Schriftgröße. Lass es uns in die Eisenbahn wechseln. Das ist wählen Sie Eisenbahn fett und lassen Sie uns die Farbe von schwarz zu weiß ändern. Und lassen Sie uns weiter gehen und unseren Führer einschalten, damit wir voran gehen und das richtig ausrichten können. Es sieht so aus, als ob es schon genau da ist, wo ich es brauche, also werde ich es jetzt einfach da lassen, denn die anderen beiden Spalten würden eine Spalte mit Abstand zwischen ihnen lassen, also lasst uns weitermachen und den Rest der Informationen kopieren. Jetzt ist das einzige, was wirklich fett ID in diesen beiden Spalten sein sollte, die Titel. Also gehen wir voran und greifen diese drei Linien und wählen Sie einfach Eisenbahn regelmäßig und dann das gleiche mit diesen fünf Linien. Wir werden das nur in die Eisenbahn umstellen. In Ordnung, wir haben noch eine Reihe von Inhalten, die wir kopieren müssen, und das sind die Copyright-Informationen. Lassen Sie uns Eisenbahnmittel kursiv machen, nur um es ein wenig zu vermischen, und dann werden wir das hier auf der linken Seite ausrichten. Alles klar, lassen Sie uns verkleinern, weil wir eine horizontale Linie erstellen müssen, um eine Trennlinie oder Trennung zwischen den drei Spalten und diesem Inhalt hier drüben zu erstellen . Lasst uns unser Rechteck-Werkzeug greifen, damit wir eine Form erstellen können, und dann, soweit die Farbe, werde ich nur ein bisschen heller als der Hintergrund. 34 34 34 34 sieht vorerst gut aus. Und dann lassen Sie uns das mit unserem Eimerfilter füllen. Aber zuerst, Bevor Sie das tun, lassen Sie uns eine neue Ebene erstellen. Nennen wir es Divider. Alles klar, jetzt können wir weitermachen und das ausfüllen. Ok, sie wählen aus. Ordnung, ich denke, diese Linie ist ein bisschen zu dick, also lasst uns hier hineinzoomen und lasst uns unsere Waagenwerkzeuge schnappen, damit wir sie etwas kleiner machen können . Lassen Sie uns anders sein. Und lasst uns auch die Höhe ändern . Machen wir drei für die Höhe, und ich möchte es nur ein wenig nach unten bewegen. Also genau da sollte es gut sein. Jetzt müssen wir nur unsere Ausrichtung aller unsere Spalten und unsere Inhalte hier unten tun. Nehmen wir also unser Rechteck-Werkzeug mit dem Buchstaben M, und wir werden diesen Inhalt zwischen der Trennwand und der Unterseite der Fußzeile platzieren, und stellen wir sicher, dass wir hier unsere richtige Ebene auswählen. Ich möchte auch meine Guides und mein Gitter ausschalten. Schnappen Sie sich Ihr Ausrichtungswerkzeug Klicken Sie auf diesen Inhalt hier sieht nicht so aus, als ob er funktioniert . Lassen Sie uns diese Ebene ganz nach oben verschieben. In Ordnung. Jetzt können wir es und eine Linie Mitte des Ziels auswählen. Manchmal können wir diese Elemente mit unserem Ausrichtungswerkzeug auswählen, wo sich die Ebenen befinden. Aber manchmal erkennt gimp nicht, wo wir klicken, also müssen wir die Ebene in eine neue Position oben im Ebenenfenster über allen anderen Ebenen verschieben , so dass Sie sie tatsächlich mit dem Ausrichtungswerkzeug auswählen können. Okay, lass de wählen. Und dann nehmen wir unsere drei Säulen hier und richten sie nach oben aus. Fügen wir also unsere Richtlinien zurück, und dann müssen wir nur jede Spalte in diese Richtlinie verschieben. Es spielt keine Rolle, wo sich diese Richtlinie befindet, denn wir werden sie in nur einer Sekunde von der Spitze der Fußzeile und der Trennlinie ausrichten . Nun, bevor wir unsere Ausrichtung machen, möchte ich nur etwas zusätzlichen Platz zwischen den Zeilen hinzufügen, weil es jetzt zu eng und es irgendwie schwer zu lesen ist. Also beginnen wir mit über Nike Graver textuellen Wählen Sie alle mit Commander Control und a und dann erinnern Sie sich in zwei Optionen, wir können hier nach unten kommen und den Abstand zwischen den Zeilen mit dieser Option hier erhöhen . Und dieses Mal werden wir die Menge der Abstände erhöhen. Es wird also positiv sein. Das letzte Mal mussten wir es reduzieren und es war negativ. Also lasst uns sieben machen. Und dann werden wir das Gleiche auch für diese tun. Okay, ich werde mir meine Guides nochmal ansehen. Und lassen Sie uns eine Ebene oder Führung wählen, weil ich diesen Leitfaden hier loswerden möchte. Lassen Sie uns voran und legen Sie diese Spalten in ihren eigenen Gruppen-Layer, klicken Sie mit der rechten Maustaste und wählen Sie Neue Layer-Gruppe. Ich werde es benennen. Drei Säulen. Ok. Jetzt können wir diese Gruppen-Ebene und eine Linie sie in die Mitte der oberen und unteren rechts hier greifen . Also was? Sie sind Rechteck-Werkzeug. Wir könnten voran gehen und unser Auswahlausrichtungswerkzeug machen, auf eine der Spalten klicken, und wieder, es lässt uns nicht wählen. Also werden wir diesen Gruppenspieler den ganzen Weg nach oben bewegen, und wir werden versuchen, ihn nochmals anzuklicken. Dieses Mal lässt es uns wählen und dann können wir Mitte des Ziels ausrichten. So haben wir jetzt eine gleiche Menge an Raum zwischen hier und hier. Que de wählen mit Commander Control und D und lassen Sie uns voran und bewegen Sie diese zurück nach unten. Also müssen wir später eine neue Gruppe für die Fußzeile für all diese Informationen erstellen. Aber wir haben einige zusätzliche Inhalte, die wir auf unserer anderen Seite ihrer Fußzeile hier auf der rechten Seite hinzufügen müssen , die unsere Social-Media-Symbole enthalten wird. Aber das werden wir im nächsten Tutorial abdecken. Also, wenn du bereit bist, das alles zu tun, lass es uns tun. 28. Fußzeilen Teil 2: unser letztes Zeug für dieses spezielle Projekt ist das Hinzufügen einiger Social-Media-Icons. Aber bevor wir das tun, möchte ich Ihnen etwas mitteilen, von dem Sie vielleicht noch nie gehört haben, weil niemand darüber spricht, und das ist eine Urheberrechtsverletzung von Social Media Logos. Worüber rede ich jetzt? Nun, werfen wir einen Blick auf die Nike Website und werfen einen Blick auf ihren Fuß oder hier, und Sie können die sozialen Symbole sehen, die sie hier für Twitter, Facebook, YouTube und Instagram haben Facebook, . Und jedes dieser Logos wird innerhalb eines Kreises platziert, und wenn Sie den Mauszeiger über sie bewegen, sehen Sie den Hover-Zustand, sich als weiß herausstellt. Nun, rate mal was? Dies ist eine Urheberrechtsverletzung an diesen Logos. Wieder, du meinst, wovon rede ich? Nun, lassen Sie uns die richtige Verwendung von Social Media Logos herausfinden, damit Sie diese Unternehmen nicht verletzen . Urheberrecht. Also lassen Sie uns eine Suche nach Facebook-Logo machen. Wir werden keine Bilder machen, weil diese Luft alle Verstöße, außer vielleicht ein paar von ihnen, lassen Sie uns nach unten scrollen und Assets auswählen. So haben Facebook, Twitter, Twitter, Instagram und alle anderen Social-Media-Plattformen eine Ressource auf ihrer Website, die etwa so aussieht, die erklärt, wie Sie ihr Logo auf Ihrer Website verwenden sollen . Wenn wir also hier nach unten scrollen, können wir die Logos und die Badges sehen, die sie für Sie direkt von Facebook zur Verfügung stellen, die Sie auf Ihrer Website verwenden können. Und wenn Sie nach unten scrollen, werden Sie auch einige andere Elemente sehen, die erklären, wie Sie ihr Logo verwenden können, ohne deren Urheberrecht zu verletzen. Nun, wenn Sie dieses spezielle Logo-Symbol verwenden möchten, wenn Sie darauf klicken, werden Sie am Ende zu einer anderen Seite gehen. Und dann können Sie dieses spezielle Logo herunterladen, um auf Ihrer Website zu verwenden, so dass Sie Ihre Medien gut wählen müssen . Es gibt unterschiedliche Anforderungen an Online-Drucke und Verpackungen, TV und Film. Jetzt können Sie diese nicht einmal im Fernsehen und Film verwenden, ohne vorher schriftliche Erlaubnis von Facebook zu bekommen . Aber da wir online arbeiten, lassen Sie uns einen Blick auf die Richtlinien werfen und gehen Sie weiter und scrollen Sie nach unten und schauen Sie sich diese an, damit Sie Augen nicht ihr Logo stylen können. Sie können sie nicht verformen oder ihre Farbe oder Form ändern. All das ist nicht erlaubt, und es steht, wenn Sie aufgrund technischer Einschränkungen nicht in der Lage sind, die richtige Farbe zu verwenden. Nun, dann können Sie es in Schwarz-Weiß konvertieren, und es sagt, genau hier verwenden Sie keine Symbole oder Bilder, um Facebook anders als das, was auf dieser Website gefunden wird, darzustellen . Also hier auf der linken Seite, auf der rechten Seite nicht erlaubt. Wenn Sie also nicht tun, was Facebook sagt, dass Sie mit dem Logo tun können, dann brechen Sie das Gesetz. Sie verletzen ihre Kopie, richtig? Und sie können legal hinter Ihnen oder der Firma, für die Sie arbeiten, wegen Verletzung dieses Urheberrechts kommen . , Heißt das,dass sie tatsächlich gehen und Schadensersatz für die Millionen und Millionen von Websites suchen , die ihre Logos verwenden und korrekt? Ich bezweifle es, aber das bedeutet nicht, dass sie nicht das Recht haben, es zu tun. Und ich denke, zu diesem Zeitpunkt ist es akzeptabel, diese Logos mit verschiedenen Farben und verschiedenen Formen wiederzuverwenden und was Sie haben. Aber wieder, es gibt immer noch eine Chance, dass Facebook nach dem Website-Besitzer kommen kann, ob es Nike oder kleine Mama und Pop-Shop und sagen, dass Sie auf mein Urheberrecht verletzen, entweder ändern Sie es oder wir werden nach Ihnen für Schäden kommen. , Ich glaube nicht,dass sie die kleinen Mom und Pop-Shops verfolgen, aber vielleicht eine Marke wie Nike. Sie können nach einer Firma wie dieser gehen. Es ist ein $1.000.000.000-Unternehmen, und ich bin mir ziemlich sicher, dass Nike nicht glücklich wäre, wenn Sie ihr Logo nehmen und anfangen es zu ändern und die Farben zu ändern und es zu verziehen und es auf verschiedene Arten zu stylen, um etwas auf Ihrer Website zu fördern so dass wieder eine Verletzung auf Nikes Logo sein würde. Aber aus irgendeinem Grund ist es OK für Social-Media-Icons und Social Media-Logos, also das sind nur einige Informationen, die ich dachte, ich würde mit Ihnen teilen. Aber was wir für dieses Webdesign-Projekt tun werden, ist, dass wir ihre Urheberrechte verletzen , weil wir ihre Logos nehmen und sie in einen Kreisstecken einen Kreis und sie nur ein wenig ändern werden. Bit. Nicht eine ganze Menge, aber es ist nur für die Praxis, so können Sie lernen, wie Sie diese verschiedenen Formen erstellen und Gimp und Zehe lernen einige der anderen Werkzeuge, die wir haben einen Gimp, um verschiedene Dinge zu tun. Also, was wir tun werden, ist, dass wir weitergehen und herunterladen werden. Die Ressource ist direkt von Facebook und Instagram und Twitter und Pinterest oder was auch immer Social Media Plattformen Sie wollen. Laden Sie einfach vier Logos von jeder ihrer Websites herunter. Führen Sie einfach eine Google-Suche nach Facebook-Assets. Twitter Assets Dinge wie diese, und Sie werden feststellen, dass jedes dieser Unternehmen einen Ort haben, wo Sie ihre Logos herunterladen können , um auf Websites zu verwenden. Also werden sie Ihnen einige verschiedene Farben geben, die ursprüngliche Farbe, und dann sollten sie auch einige Farben für Schwarz und Weiß haben. Also lassen Sie uns gehen und alles in Weiß herunterladen, so dass alles konsistent ist. Und dann gehen wir weiter und gehen von dort bis zur Größe. Finden Sie etwas rund 50 bis 60 Pixel, weil wir die Größe trotzdem reduzieren werden. Aber fangen wir mit einem ziemlich hochwertigen Logo-Symbol an, denn wenn wir mit etwas kleineren wie 15 oder 20 Pixeln gehen und wir es größer machen müssen , wird es pixelig werden. Beginnen wir also mit etwas um 50 bis 60. Okay? Sobald Sie alle heruntergeladen haben, gehen Sie vor und fügen Sie sie Ihrem Dokument hinzu. Sie können sie einfach per Drag & Drop in das Dokument ziehen, und dann wird für jede Ebene eine neue Ebene erstellt. Okay, ich habe jetzt alle meine Logos in meinem Dokument, und ich habe ihn in diese Reihenfolge gesetzt Facebook, Instagram, Pinterest und Twitter. Sie können die gleiche oder eine andere Reihenfolge tun. Es liegt ganz an dir. Es spielt keine Rolle. Die andere Sache, die ich getan habe, ist, dass ich meine Show-Layer-Grenze aktiviert habe, weil ich Ihnen einige Dinge mit unserem Ausrichtungswerkzeug zeigen möchte . Wenn wir zu einer Zeile gehen, jeder der Logos. Und wenn er die Ausrichtungsübung zu Beginn des Kurses gemacht hat, dann sind Sie bereits vertraut mit dem, was wir behandeln werden, wenn wir zu dem Punkt kommen, wo wir unsere Logos ausrichten müssen und Elemente sind. Aber im Moment müssen wir alles ändern, so dass sie jetzt alle gleich hoch sind , je nachdem, was Sie heruntergeladen haben, können sie kleiner sein als das, was ich habe, was in Ordnung. Wir werden die Größe aller Logos auf eine Höhe von 30. Also lasst uns Graham, unser Skalierungswerkzeug, und ich werde mit meiner ersten Schicht hier anfangen, und ich bin eine neue 30 für die Höhe, und dann werde ich auch mit den anderen weitermachen. Nun, bevor ich das Twitter-Logo mache, gibt es eine Sache, die wir tun müssen, und Papa wird diesen grauen Hintergrund entfernt, den wir jetzt im Logo haben, weil wir sehen können, dass die Ebenengrenze um das Hintergrund und nicht das Logo selbst. Ich möchte die Ebenengrenze um das Logo herum, damit wir die Größe so ändern können, dass es die gleiche Höhe wie alle anderen Logos hat. Andernfalls wird der Twitter-Vogel viel kleiner sein. Also lasst uns unser Fuzzy Select-Werkzeug greifen. Und dann setzen Sie in den Tooloptionen einfach den Schwellenwert auf etwa 2018 auf 20 ist in Ordnung. Wählen Sie den Hintergrund aus und drücken Sie dann Löschen oder die Rücktaste, um diesen Hintergrund zu entfernen . Dann werden wir de wählen, und dann können wir gehen weiter und gehen Sie auf Ebene und wählen Sie abgeschnittenen Inhalt, und jetzt sind Ebene. Grenze ist, wo es sein sollte, also lassen Sie uns voran gehen und wieder skalieren Sie es auf 30 für die Höhe und lassen Sie uns voran gehen und bewegen alle kleinen geht hier runter an Ort und Stelle. Jetzt kann ich nicht ein paar davon sehen, weil sie rein weiß sind. Eigentlich ist hier die Facebook-hier, aber das ist OK, denn aber das ist OK, denn da ich den aktiven Führer bewegt habe, kann ich einfach irgendwo auf mein Dokument klicken und es wird sich bewegen, dass Schicht für mich. Also mache ich das einfach zum 1. 1. Lasst uns Instagram schnappen. Das wird Zweiter. Irgendwann haben wir Pinterest hier drin, und ich werde den dritten Platz machen. Okay, lasst uns unser Instagram schnappen, denn wenn dein schwarz ist wie meins, müssen wir es in Weiß umwandeln. Und wir können das tun, indem wir auf Farben Auswahl Farbe steigen und dann klicken Sie auf diese Farbleiste hier und wählen Sie Weiß. Also, das wird es für uns Zehenweiß ändern. Ordnung, als Nächstes müssen wir ein paar Kreise erstellen, in denen die Logos hineingehen können, also greifen wir unser Ellipsenwerkzeug im Werkzeugbedienfeld. Wir wollen ein festes Seitenverhältnis ausgewählt haben, und sie wollten nur klicken und ziehen eine Form heraus und lassen Sie es 50 für die Breite und die Höhe machen . Wir werden auch eine neue Ebene namens Kreis erstellen. Nennen wir es Logo Kreis mit einer Füllung mit Transparenz Wieder, klicken Sie. Okay. Und dann lasst uns unsere Farbe auf diese Zahl ändern. Genau hier. 333333 Klicken Sie auf. Ok, und dann greifen wir unser Eimer-Füllwerkzeug, um diese Farbe in de select zu füllen, und dann haben wir unsere erste Form. Okay? Mit meinem Umzugswerkzeug. Ich werde das hier überlegen. Und das andere, was ich tun muss, ist, dass ich die Layer-Grenze dafür ändern muss, weil sie zu groß ist . Und das ist wichtig, weil wir alle unsere Kreise gleichmäßig liegen gehen, von oben nach unten und verteilen und sogar Menge an Platz zwischen ihnen. Und wir müssen auf Ebene Crop to Content gehen, um diesen Prozess zu erleichtern. Okay, ich werde den Kreis direkt unter das Facebook-Logo legen, und dann werde ich diesen Kreis duplizieren. Verschieben wir es auf Instagram, und verschieben Sie es dann unter dieses Logo. Also lassen Sie uns das für jeden wiederholen. In Ordnung. Ich werde mit diesem Kreis hier und weg bewegen. So kann ich Ihnen zeigen, wie einfach es ist, diese Kreise nach oben auszurichten und einen geraden Raum zwischen allen zu verteilen . Wie Sie vielleicht wissen oder nicht, können wir im Ebenenbedienfeld nicht mehr als eine Ebene auswählen. Wie Sie vielleicht wissen oder nicht, können Aber zum Glück mit unserem Ausrichtungswerkzeug können wir mit unserem Ausrichtungswerkzeugmehrere Ebenen auswählen und dann die Optionen in den Werkzeugoptionen verwenden, um alles schnell auszurichten . Also klicke ich auf den ersten Kreis, und wir können diese vier Quadrate sehen, die zeigen, dass diese bestimmte Ebene ausgewählt wurde, um ausgerichtet zu werden. nun Wenn ichnundie anderen Kreise auswählen möchte, wenn ich auf sie klicke, wird es die anderen Auswahlen loswerden. Also, was wir tun müssen, um alle von ihnen auszuwählen, halten Sie auf unseren Show-Schlüssel und klicken Sie dann auf den nächsten Kreis. Nun, während ich meine Shift-Taste gedrückt halte, kann ich auf den nächsten Kreis klicken, um ihn auszuwählen, und dann halte ich immer noch meine Shift-Taste gedrückt, was mir immer noch erlaubt, die 4. 1 auszuwählen Das Problem ist, Die anderen drei wurden de ausgewählt, also ist es eine Art Bug. Ich denke, wenn Sie diese Umschalttaste gedrückt halten, während Sie verschiedene Ebenen auswählen, funktioniert es manchmal und ermöglicht Ihnen, alle Ebenen auszuwählen. Aber manchmal nicht, und es wird sie de auswählen. Also hier ist die Lösung. Wir wählen das 1. Halten Ihrer Umschalttaste aus. Klicken Sie darauf. Lassen Sie die Umschalttaste los. Halten Sie die Umschalttaste erneut gedrückt. Klicken Sie darauf. Lassen Sie die Umschalttaste wieder los und Sie haben es erraten. Halten Sie die Umschalttaste erneut gedrückt und klicken Sie dann auf die letzte Ebene. So können Sie fortlaufend beliebig viele Ebenen auswählen. Vielleicht haben Sie 67 10 12 Schichten. Auf diese Weise können Sie alle Ebenen auswählen. , da Nun, dawir alle Ebenen mit unserem Ausrichtungswerkzeug ausgewählt haben, möchte ich sie so ausrichten, dass sie alle ganz oben sind. Also gehen wir zu Tool-Optionen und wählen relativ zum ersten Element. Das wäre also der erste Punkt. Also wollen wir sie an der Kante des Ziels ausrichten. Und wir haben keinen Bekleidungsschlüssel, also wird das an der Spitze sein. Jetzt möchte ich einen geraden Raum zwischen allen Kreisen hier hinzufügen. Wir haben einen riesigen Raum. Also, wie machen wir das? So haben wir immer noch relativ zum ersten Element ausgewählt. Wir gehen zu den anderen Optionen hier, die sagen verteilen, so dass wir auf diesen Artikel klicken können hier, Verteilen horizontale Zentren des Ziels und wir bekommen eine gleichmäßige Menge an Platz. Sie können den Versatz auch in eine beliebige Zahl ändern. Wenn ich dies also auf fünf anstelle von 90 ändere und dann darauf klicke, beginnt es sich von Kreisen zu überlappen. Sie müssen also ein glückliches Medium finden und den Abstand zwischen den Kreisen finden, indem Sie eine Zahl für Offset X eingeben, die horizontal ist. Wenn Sie einen vertikalen Satz von Ebenen haben, dann werden Sie Offset tun. Warum? Also, jetzt werde ich 75 tun, dann fügt eine gerade Menge von 75 Pixel zwischen jeder Ebene hinzu, so dass ich weiterhin verschiedene Zahlen hinzufügen kann , um verschiedene Ergebnisse zu erhalten. Also im Moment haben wir 200, die nicht wirklich funktionieren, weil es außerhalb des Dokuments hier rechts geht . Also werde ich das mit Commander Control in dem Buchstaben Z rückgängig machen und 75 für Nagel machen. Und wir haben alles perfekt ausgerichtet. In Ordnung, jetzt werden wir unsere Logos innerhalb der Kreise online platzieren, und wir sind fertig. Also wähle ich in meinen beiden Optionen eine Ebene oder eine Führungslinie aus, damit ich einfach dieses Logo greifen und es an Ort und Stelle setzen kann , anstatt hierher zu kommen und die Ebene im Ebenenfenster auszuwählen. In Ordnung, gehen wir zu unserem ersten Logo-Kreis. Lassen Sie uns wählen sind unscharf, Select Tool, und wir werden auf der Innenseite klicken. Und dann holen wir uns unser Facebook-Logo, unser Ausrichtungstool. Wir werden auf das Logo klicken und dann richten wir es an der Mitte des Ziels aus. Aber zuerst müssen wir relativ zu zwei Auswahl ändern, da wir B der Auswahl ausrichten. Okay, also werden wir dasselbe für die anderen tun. Wir greifen den Kreis, den Fuzzy, wählen Werkzeug. Sie können die Tastenkombination verwenden. Ich habe w für die Tastenkombination für mich. Ich werde meine Auswahl treffen. So, wie das Ausrichtungswerkzeug. Wählen Sie das Logo und dann eine liegende Auswahl. Also lasst uns weitermachen und das auch für die anderen beenden. Lass uns weitermachen und alles organisieren. Wir werden eine neue Ebene erstellen, indem wir mit der rechten Maustaste auf die Kerngruppe klicken. Ich werde diesen Facebook nennen. Wir gehen, und dann erstelle ich für jedes Logos eine neue Ebenengruppe. - In Ordnung, lassen Sie uns weitermachen und eine Gruppen-Ebene auch für unsere Fußzeile erstellen. Leg alles hinein, was drinnen gehört. Und wieder. Wir organisieren nur alles, um es einfacher zu finden, was wir brauchen. Sieht so aus, als hätte ich hier eine zusätzliche Schicht, also werde ich das löschen. Ich werde nur einige meiner Schichten hier aufräumen. Ich denke, wir müssen uns ausrichten. Sind soziale Symbole als auch. Ich werde meine Guides einschalten und das rüberziehen. Ich will es genau hier setzen. Okay, schalten wir die Guides aus und was wir tun werden, ist, unsere Logos an der Spitze ihrer Spalten auszurichten . Also lasst uns unser Ausrichtungswerkzeug greifen. Lassen Sie uns das erste Element auswählen. Okay, lassen Sie versuchen, und wählen Sie diese Gruppen-Ebene. Es wählt es nicht aus. Also lasst uns bewegen. Die drei Spalten und soziale Symbole aus diesem Gruppen-Layer. Mal sehen, ob wir es jetzt auswählen können. Funktioniert immer noch nicht. Gehen wir nach oben. Los geht's. Also habe ich das ausgewählt. Nun möchte meine Umschalttaste gedrückt halten und auf die Logos klicken und dann relativ zum ersten Element verwenden und eine Linie nach oben drehte die Führungen wieder ein. Alles sieht ausgerichtet aus. Alles ist über den Rest der Webseite ausgerichtet, und ich denke, wir sind alle fertig. Lasst uns einfach voran gehen und diese wieder in die Fußzeile legen. Herzlichen Glückwunsch sind Hass. Ich denke, wir sind endlich fertig mit unserem ersten Webdesign-Projekt, und wenn Sie gefolgt und erstellt diese Website, während Sie die Tutorials beobachten, dann sind Sie alle fertig. Wenn nicht, ist es jetzt an der Zeit, durch dieses Projekt zu gehen und dieses Projekt selbst zu wiederholen, so dass Sie sich daran gewöhnen können , die Werkzeuge und Gimp zu verwenden und sich an die Gewohnheit zu gewöhnen, Dinge auszurichten und alles, was Sie haben, richtig zu verstärken gelernt, jetzt. Sobald Sie damit fertig sind, für zusätzliche Bonus-Credits können Sie für zusätzliche Bonus-Creditsdas Gelernte nehmen und es mit Ihrer kreativen Vision anwenden, um Ihre eigene Neugestaltung dieser Webseite zu erstellen . Also, was können Sie tun, um das zu machen? Welche Seite? Besser für den Benutzer und das Gesamtdesign der Website selbst. Du bist wahrscheinlich ein besserer Designer als ich, und du könntest wahrscheinlich etwas einfallen. Ah, viel besser und vielleicht kreativer als das, was ich mir selbst ausgedacht habe. Was auch immer Sie erstellen, können Sie das dann für Ihr Portfolio verwenden und damit beginnen, Ihre Dienste zu bewerben. Als Webdesigner müssen Sie ein Portfolio haben, um Menschen zu zeigen, was Sie tun können. Daher empfehle ich dringend, das zu nehmen, was Sie bei der Erstellung Ihres eigenen Designs gelernt haben. Du kannst das nicht benutzen, weil es mein Design ist. Ich besitze das Copyright daran, also erstellen Sie Ihr eigenes Design und beginnen Sie mit der Erstellung Ihres Portfolios. Und wenn Sie möchten, würde ich gerne Ihre endgültige kreative Vision sehen und Ihre Webseite sehen. Also, wenn Sie das mit der Community teilen möchten, gehen Sie weiter und posten Sie das im Abschnitt Q und A und lassen Sie mich wissen, wenn Sie Feedback wünschen, und ich würde gerne Feedback darüber geben, was Sie tun können, um es zu verbessern. Oder vielleicht ist es perfekt, wie es ist. Das liegt also ganz an dir. Wenn Sie beide bereits gut gemacht haben, dann sind Sie bereit, am zweiten Projekt zu arbeiten. Im zweiten Projektlernen wir Ah, lernen wir Ah, viel mehr über Designkonzepte und -ideen. Und wir werden das, was wir über die Werkzeuge und Gimp gelernt haben, weiter verstärken und dabei möglicherweise neue Werkzeuge lernen. Also, wenn Sie bereit sind zu beginnen, führte das nächste Projekt dazu. 29. Projekt 2: Manhatten 2:: Hallo und willkommen zurück. In Ordnung, wir werden an unserem zweiten Webdesign-Projekt arbeiten, diesmal für diese Firma namens Manhattan Bridge Capital. Jetzt, im Gegensatz zu Nike, das bereits einen gut definierten, markensauberen minimalistischen Stil hat, diese besondere Website oder Firma, es hat nicht wirklich eine starke Marke. Das Gesamtdesign oder das Layout der Website ist nicht sauber. Es ist veraltet. Es hat schlechte Qualität Grafiken und Bilder und braucht viel Hilfe. Obwohl diese Website ein Copyright von 2018 hat, sieht es nicht so aus, als ob diese Website in 20 Jahren mit einem neuen Design aktualisiert wurde . Dieser Grady int Hintergrund hinter der Navigation und entlang der Ränder und in der Fußzeile erinnert an Websites, die vor 20 Jahren auf die Szene kamen. Und es ist extrem veraltet. Nicht nur das, es ist sehr schwierig zu lesen, was auf dieser bestimmten Seite platziert wird, und das Layout des Inhalts ist überall verstreut, und wir sind nicht ganz sicher, wo wir anfangen sollen. Unsere Augen hüpfen von einem Element zum anderen herum, und insgesamt sieht die Website nicht sehr professionell aus. Dieses spezielle Unternehmen bietet Kredite an Investoren in der Gegend von New York City und wegen des Mangels an Professionalität ihrer Website. Ich denke, insgesamt wird das ihre Effektivität behindern und neue Kunden bekommen, nicht nur wegen der veralteten Elemente und der Nicht-Professionalität. Es ist sehr schwierig, diesen Inhalt zu lesen. Wir haben leuchtend rot für unsere Überschrift und dann ist das Styling und der Text für diesen Inhalt ausgewählt sehr klein und schwer zu lesen. Also eines der ersten Dinge, die ich für diese spezielle Firma tun möchte, ist die Aktualisierung ihres Logos. Es ist veraltet und insgesamt sieht es aus wie eine minderwertige Grafik und Text wurde verwendet, also würde ich etwas mit einer höheren Rez, Grafik und besserem Text verwenden möchten . Es sieht also nicht so pixelig aus wie jetzt. Und dieser Hintergrund im Header hier ist nicht notwendig und fügt der gesamten Website keinen Wert hinzu . Imagery als auch auf der gesamten Website ist nicht sehr gut und ich möchte die Bilder als auch aktualisieren , um eine bessere Geschichte davon zu erzählen, was dieses Unternehmen tut und warum Sie wollen, um Geschäfte mit ihnen zu machen oder tatsächlich allein durch sie zu bekommen. Es gibt andere Dinge, die wir tun können, um die Möglichkeit zu erhöhen, dass Investoren mit ihnen Geschäfte machen wollen , um ihr Darlehen über dieses spezielle Unternehmen im Vergleich zu anderen Quellen zu erhalten , wie eine Kreditunion oder eine Bank im traditionellen Stil. Es gibt auch keinen Riel Anreiz für jemanden, ich möchte diese Firma kontaktieren. Ja, wir haben ihre Kontaktdaten, aber warum sollten wir sie kontaktieren? Was für mich drin ist, wenn ich eine Website entwerfe, möchte ich mich in die Schuhe der Besucher setzen, und das erste, was ein Besucher wissen möchte, wenn er auf eine Website geht, ist warum, was ich mit Ihnen Geschäfte machen möchte. Was ist da drin für mich? Was bekomme ich, wenn ich mich entscheide, Geschäfte mit dir zu machen? Hier kommt also die aufgerufene Aktion im Heldenbereich ins Spiel. Was willst du ihnen anbieten, dass sie nicht ablehnen können? Weil es so genial ist. Sie müssen das jetzt haben, und sie werden Ihnen Informationen geben, ihren Namen, ihre Telefonnummer, ihre E-Mail oder was auch immer Sie wollen, im Austausch für etwas, das Sie Ich werde ihnen geben. Sie müssen diese Beziehung mit dem Kunden beginnen, indem Sie ihnen etwas geben. Es muss nicht immer so funktionieren, aber ich denke, in den meisten Fällen müssen Sie anfangen, diese Beziehung von Anfang an aufzubauen. Andernfalls navigieren sie zurück und suchen nach einem anderen Unternehmen, mit dem sie sich beschäftigen können, weil sie wahrscheinlich wegen des Entwurfslayouts ausgeschaltet sind. Vielleicht denken sie nicht, dass all dieses Design-Layout schrecklich ist. Ich mache keine Geschäfte mit ihnen. Stattdessendenken sie, denken sie, während diese Firma nicht so aussieht, als ob sie sich um ihr Image kümmern und dieser Ort unprofessionell aussieht und mein Umgang mit einem Kredit Hai, oder beschäftige ich mich mit einem professionellen Finanz- Institution, weil sie wissen wollen, dass sie es mit jemandem zu tun haben, der nicht hinter ihnen her ist und ihr Bein bricht oder ihr Leben nehmen wird, weil sie das Darlehen ausfallen? Ja, sie werden wahrscheinlich Ihr Eigentum nehmen, aber das sieht eher aus wie ein Kredit Hai Art von Unternehmen, zumindest für mich, denn insgesamt sieht es einfach nicht professionell aus. Nichts gegen Kredit Haie. Also, wenn du zuhörst, meine ich nichts Schlimmes. Sie müssen sich nur etwas professioneller einfallen lassen, damit Sie sicherstellen können, dass Sie MAWR-Interessenten erhalten, um Sie für Ihre speziellen Dienstleistungen zu kontaktieren. Es gibt also Dinge, die wir tun können, um sicherzustellen, dass wir ihre Informationen erhalten können, bevor sie die Website verlassen Außerdem möchten wir es ihnen ein wenig einfacher machen, uns zu kontaktieren und weitere Informationen über uns zu finden . Vielleicht wollen sie unsere Institution besuchen, bevor sie sich entscheiden, allein durch Sie zu gehen. Was natürlich natürlich das wohl die Schritte sind. Sie müssen eine Beratung haben. Finden Sie heraus, welche Art von Immobilien dieser potenzielle Investor will, und Sie müssen einige verschiedene Schritte durchlaufen. Nun, warum geben Sie ihnen nicht eine Möglichkeit, Ihre Büros zu besuchen, auch wenn Sie nur Termine nehmen? Onley Wenn eine Person bereit ist, sich die Zeit zu nehmen, in Ihr Büro zu kommen, zu besuchen, mehr Informationen zu finden und einen Termin zu vereinbaren, ist das an sich ein viel stärkerer Kunde gegenüber jemandem, der gerade anruft. Es gibt also eine Menge Kleinigkeiten, die wir für dieses spezielle Website-Design tun können, um sicherzustellen, dass wir unseren Interessenten jede Gelegenheit geben, einen Termin mit uns zu vereinbaren oder uns persönlich zu treffen , um ihr Geschäft zu bekommen. Also ist das Design, das ich entwickelt habe, genau hier, und ich habe meine aufgerufene Aktion und ich habe bessere Bilder, die Mawr mit ihrem Potenzial in Beziehung . Investoren im Vergleich zu einem einfachen Handschlag haben auch einige zusätzliche Elemente und einige zusätzliche Inhalte enthalten , die das Unternehmen verwenden kann, um ihre Dienstleistungen zu verkaufen. Warum Hauptstadt der Manhattan Bridge? Warum sollten Sie Geschäfte mit uns machen? Nun, hier sind alle Gründe, warum Sie Geschäfte mit uns machen sollten. Ich habe auch einige zusätzliche Informationen enthalten, wie häufig gestellte Fragen, die sie zum Zeitpunkt der Konsultation stellen möchten. Lassen Sie uns ihnen einige dieser Informationen geben, bevor sie uns kontaktieren. Und dann entwarf ich einen Connect-Abschnitt mit mehreren Möglichkeiten der Kontaktaufnahme mit dem Unternehmen sowie eine integrierte Karte, auf der Sie Anweisungen direkt zu ihrem Büro erhalten können. Vielleicht bist du in der Nähe, und du wolltest mal vorbeikommen und Hallo sagen. Stellen Sie sich vor, etcetera. Also will ich machen. Es ist für potenzielle Kunden einfach wie möglich, Geschäfte mit Manhattan Bridge Capital auf ihrer jeweiligen Website zu machen. Alles ist hier oben nach links zusammengefügt. Sie haben nicht einmal eine E-Mail-Adresse. Ja, sie haben hier ihre Adresse, damit ich diese Informationen in Google Maps oder so etwas ablegen kann, oder ich kann es direkt von hier aus tun. machen wir es unseren Kunden so einfach wie möglich, die gewünschten Informationen zu erhalten, anstatt sie außerhalb der Website und dann im Fußzeilenbereich zu versuchen. Ich habe unsere sozialen Links, zusätzliche Links hier unten unten unten auf Copyright-Informationen. Aber ich habe auch das Gesamtdesign aufgeräumt. Es ist also sauberer. Das ist amore, minimalistischer Stil, moderner sauberer. Und all diese verschiedenen Elemente sorgen für eine viel sauberere und einfachere Website zu navigieren und zu lesen. Das ist also unser Briefing zu unserem nächsten Webdesign-Projekt. Wir werden in der nächsten Lektion mit unserem Logo-Redesign beginnen. 30. Re-Design: Hallo und willkommen zurück. In Ordnung, wenn Sie also zitieren und für ein Webdesign-Projekt arbeiten, haben Sie eine goldene Gelegenheit, die Zehe hoch ist. Verkaufen Sie Ihre Dienstleistungen, um andere Grafik-Design-Dienstleistungen, und ich denke, in diesem Fall könnten sie neue Branding und ein Logo verwenden. Sie müssen also nur mitteilen, warum Sie denken, dass sie von einem neuen Logo profitieren können. Und dann können Sie das auch in Ihren Preis aufnehmen, aber halten Sie es getrennt vom Webdesign-Projekt selbst. Nun, da gesagt, diesem speziellen Kurs geht es nicht um niedriges gutes Design an und für sich selbst. Wir werden nicht auf viele Details eingehen, wie man Logos entwirft. Wir werden nur etwas ganz Einfaches und Grundlegendes schaffen, wie ich hier erstellt habe. Und selbst dann finde ich immer noch, dass dies 10-mal besser ist als das, was sie jetzt haben. Also lassen Sie uns zuerst an dem Logo arbeiten, und dann werden wir an der Kopfzeile des Webdesigns arbeiten. Also gehen Sie zuerst und holen Sie sich Ihre Rasterdesign-Masterdatei, und dann werden wir weitermachen und ein neues Dokument für das Logo erstellen. Lassen Sie uns 3 25 mal 1 25 und dann in erweiterten Optionen tun. Wir wollen mit Transparenz füllen. Gehen Sie voran und klicken Sie auf. Okay, jetzt gehen wir weiter und schnappen uns unser Textwerkzeug. Und in allen Hauptstädten werde ich Manhattan für die grüne Farbe tun. Ich werde nur eine schöne dunkelgrüne Farbe wählen. Jede Farbe ist in Ordnung und von der Größe wird 60. Und dann Oswald, mutig und wieder, können Sie jeden Spaß nutzen, den Sie wollen. Ich werde mein Logo verschieben, oben mit dem Verschiebungswerkzeug erscheinen und dann, mit dem Rechteck auswählbar, werde ich eine Auswahl treffen. Ich werde mein Ausrichtungswerkzeug auswählen, Klicken Sie darauf und dann eine Linie in die Mitte. Lasst uns voran gehen und Auswahl machen. Ordnung, jetzt, da es in der Mitte ist, lassen Sie uns voran gehen und unser Textwerkzeug wieder auswählen und greifen. Dieses Mal war zu Ende. Brückenkapital Wählen Sie alle aus. Und dann lasst uns 30 für die Größe machen. Wir werden die gleiche Schrift machen. Lasst uns keine Schüssel machen. Lasst uns einfach regelmäßig machen. Und ich denke, ich möchte auch die Deckkraft für diese Ebene nach unten fallen lassen. Ich werde um die 50. Alles klar, greifen wir unser Umzugswerkzeug. Damit wir es jetzt hier raufschieben können. Was ich tun möchte, ist, dass ich Brückenkapital strecken möchte, so dass es die gleiche Länge wie Manhattan . Jetzt könnten wir das Skalierungswerkzeug verwenden, aber es wird die Buchstaben ein wenig verzerren, und es wird es in eine Pixelebene konvertieren. Und das will ich nicht tun, weil ich später etwas ändern möchte. Stattdessen gehen wir zurück zu unserem Textwerkzeug mit dem Buchstaben T wählen Sie alle und dann in den Werkzeugoptionen. Wir haben hier unten die Möglichkeit, den Abstand zwischen jedem Buchstaben zu erhöhen. Also lasst uns weitermachen und es erhöhen, bis es die gleiche Länge wie Man Han hat. Also plus acht sieht ziemlich nah aus. Gehen wir weiter und greifen Sie wieder unser Rechteck-Auswahlwerkzeug und richten es an der Mitte aus. Ok, de wählen. Nehmen wir unsere Hintergrundebene, drücken Sie den Buchstaben D und stellen Sie dann sicher, dass Weiß auf die vier Gramm gesetzt ist, und dann werden wir diese Farbe zur Hintergrundebene hinzufügen und das war's. Unser Logo ist jetzt fertig, also lassen Sie uns fortfahren und unsere Ebenen organisieren, indem Sie sie zu einer neuen früheren Gruppe hinzufügen. Ich nenne es Logo und lass uns das mit Commander Control und dem Buchstaben s speichern . Ich werde es nur Logo nennen und sicherstellen, dass Sie X CF für die Erweiterung haben, so dass alle Ebenen gespeichert werden. Und das wird es uns leichter machen, in Zukunft Änderungen vorzunehmen, wenn unser Kunde das Logo mag , aber er möchte vielleicht ein oder zwei Änderungen vornehmen. Sie können jetzt ganz einfach einzeln auf die Layer zugreifen, da Sie sie als Ex-CF-Datei gespeichert haben. Alles klar, gehen wir weiter und Graham unsere Logo-Ebene hier, klicken und ziehen Sie es in Ihr Raster und lassen Sie es los. Das ist also eine gute Möglichkeit, ein neues Dokument oder Dateiebenen zu einem neuen Dokument hinzuzufügen. Ich werde es einfach hier oben platzieren, und unser Logo ist alles höherem Hass gemacht. In der nächsten Lektion werden wir fortfahren und die Kopfzeile zu unserer Webseite hinzufügen. 31. Überschrift: Okay, wir gehen weiter und beenden den Kopfbereich unseres Webseitendesigns, weil unser Logo technisch gesehen Teil der Kopfzeile ist. Das erste, was ich tun möchte, ist ein Zeichen, ein gewisser Abstand zwischen dem oberen Rand der Seite und dem oberen Rand des Logos. Also lasst uns voran gehen und unsere Führer einschalten. Abhängig vom Design und den grafischen Elementen werde ich zwischen dem Logo und dem oberen Rand der Webseite zwischen 20 und 50 Pixeln Platz hinzufügen . Aber dann wieder, es könnte sich ändern, basierend auf dem Design. Wenn Sie also klicken und ziehen, wie Sie sich erinnern können, können wir sehen, wie viele Pixel diese Richtlinie zu Basierend auf den Informationen, die hier unten angezeigt werden, es sagen „Guide hinzufügen“, und ich werde das nach unten ziehen bis 25. Okay, lassen Sie uns fortfahren und unser Logo verschieben, aber bevor Sie möchten sicherstellen, dass Sie aktiv oder ausgewählt haben. Andernfalls, wenn Sie auf das Logo klicken, wird es die Ebene auswählen, auf die Sie innerhalb dieses geklickt haben -Gruppen-Layer. Sobald wir das aktiviert haben, können wir alles zusammen bewegen und ich werde das nach oben in Position bringen. Lass uns weitermachen und verkleinern. Lassen Sie uns unsere Guides ausschalten und fügen Sie unsere Navigation hinzu. Erscheinen Sie rechts. Also schnappen Sie sich Ihr Textwerkzeug und dann gehen wir voran und tippen Sie die Navigation aus, damit ich nach Hause und dann sechs Leerzeichen machen werde . Ok, wählen wir aus. Alle sechs Leerzeichen wurden zu kopieren, so dass wir es am Ende jedes Menüpunkts hinzufügen können. Und lasst uns weitermachen und fertig tippen alles aus. Lassen Sie uns das tun. Ich werde zwei Bewertungen Paste Team und Connect einfügen. Alles klar, wählen Sie alles mit Commander Control und einem Lasst uns die Schrift auf 18 ändern und es ist irgendwie schwer zu sehen, jetzt gehen wir weiter und ändern die weiße Schrift in Schwarz. Wir werden das hintere Zehenweiß später ändern, aber ich möchte es einfach sehen können, anstatt es weg zu sehen. Hintergrund. Gehen wir weiter und ändern Sie die Schrift in Eisenbahn. Lassen Sie uns Eisenbahn fett auswählen und dann können wir voran gehen und bewegen Sie es hier nach rechts und dann mit unseren Führungen eingeschaltet, ich möchte es nur auf der rechten Seite dieser Spalte hier verbinden und jetzt muss ich es an der Spitze dieses Logos ausrichten so kann ich das entweder nach oben ziehen, was die einfachste Option wäre, oder ich kann meine Ausrichtungswerkzeuge verwenden. So haben wir jetzt eine schöne, perfekte Ausrichtung an der Spitze zwischen den beiden Elementen. Okay, ich gehe weiter und schalte meine Guides aus. Lassen Sie uns verkleinern. Und als nächstes müssen wir nur unsere Ebenen organisieren, indem Sie eine neue Gruppen-Ebene mit der rechten Maustaste und wählen Sie neue Gruppe Layer. Nennen wir es Header er und lassen Sie uns beides hineinlegen. Ich werde diese Navigation auch umbenennen, Ordnung. Unser Header ist jetzt fertig, und in der Nähe von Tora werden wir mit dem Heldenbereich der Webseite beginnen, und wir werden das wahrscheinlich in zwei verschiedene Teile aufteilen, weil es viele Informationen geben wird, die ich teilen Sie mit Ihnen, wie ich mit diesem speziellen Design kam und warum ich dieses Bild im Besonderen gewählt habe. Und ich werde dir auch ein paar zusätzliche Profi-Tipps geben. Also, wenn du bereit bist, damit anzufangen, lass es uns tun 32. Herde Teil 1: Hallo und willkommen zurück. Ordnung, also werden wir jetzt an der Heldenabteilung für diese Website arbeiten, und wir haben eine Menge coole Dinge, die wir in dieser speziellen Lektion lernen werden. Wir haben hier eine benutzerdefinierte Form in zwei verschiedenen Farbtönen, und dann haben wir ein Bild, das auf diese Form beschränkt ist. Wir haben auch einen Grady Int, den ich beantragt habe, um ein bisschen Tod hinzuzufügen. Und wir, natürlich, werden Aktion genannt. So ist die aufgerufene Aktion etwas, das ein Vorteil für den Besucher der Website sein sollte, und es sollte etwas sein, das schwer abzulehnen ist. Sie müssen also von Ihrem Kunden herausfinden, was ihre Kunden brauchen oder wollen und welche Probleme haben ihre Kunden? Und wie kann Ihr Kunde diese Probleme lösen? Nehmen wir an, zum Beispiel,dass zum Beispiel, Kreditgenehmigungen manchmal 23 oder fünf Werktage dauern könnten, um genehmigt zu werden. Aber sagen wir, ein Investor braucht das Geld viel früher, weil er zu einer Auktion für ein Gebäude, ein Lagerhaus oder ein Haus oder was auch immer sie investieren. Und sie brauchen dieses Geld an diesem Tag. Aber was wäre, wenn Manhattan Bridge Capital eine Kreditgenehmigung in 60 Minuten machen könnte? Nun, das Angebot, das die Aktion genannt hat, die um die 16-minütige Kreditgenehmigung gewickelt wurde, wird das Interesse der Investoren gewinnen. Und sie werden sich bewerben wollen, um herauszufinden, ob sie sich qualifizieren können, dieses Gebäude durch die Auktion zu kaufen , die an diesem Tag stattfindet gegen drei 45 Werktage oder wie lange es dauert, weil dieses Haus oder das Gebäude könnte schon weg sein, weil jemand anderes an diesem Tag das Geld hatte. Diese so genannte Aktion wird es diesem Unternehmen, Manhattan, ermöglichen , mehr Geschäft zu generieren, weil sie etwas anbieten, das ihre Konkurrenz nicht anbietet. Dies ist also eine andere Art von Service, den Sie zusätzlich zu Ihrem Webdesign-Service anbieten können , indem Sie Ihren Kunden helfen, eine aufgerufene Aktion zu entwickeln, die ihnen hilft, mehr Geschäft zu generieren . Also lasst uns weitermachen und anfangen, die Teile unseres Heldenabschnitts zusammenzustellen, und ich werde einige zusätzliche Profi-Tipps geben, während wir weitergehen. Das erste, was wir tun müssen, ist die Höhe unseres Heldenabschnitts zu definieren. Gehen wir also voran und schalten Sie unsere Guides mit Befehl oder Kontrolle im Semikolon ein. Und dann werden wir klicken und ziehen Sie einen Führer, bis wir 700 wir wissen, dass wir bei 700 basierend auf den Informationen unten und der Schnittstelle. In Ordnung, wir werden weitermachen und eine Hintergrundfarbe für den Heldenbereich hinzufügen. Lassen Sie uns also voran und erstellen Sie eine neue Ebene namens Hintergrund. Wir werden mit Transparenz füllen und dann klicken. Okay, wir werden das aus dieser bestimmten Gruppenschicht ziehen, weil sie sich in ihrer eigenen Gruppen-Ebene befinden muss . Und dann greifen wir unser Rechteck auswählbar mit dem Buchstaben M, und dann werden wir klicken und ziehen eine Auswahl basierend auf der Position des Helden Abschnitt. Wir werden dann eine schöne blaue Farbe wählen. Dies ist die Farbe, die ich verwendet habe. Sie können jedes Blau verwenden, das Sie wollen, und dann mit unserem Eimer Füllwerkzeug können wir mit unserem Eimer Füllwerkzeugdiese Farbe ausfüllen. Lassen Sie uns voran und verschieben Sie die Hintergrundebene früher unter den Kopf, damit wir alles andere sehen können . Alles klar, wir werden die Guides auswählen und ausschalten und das nächste, was ich tun möchte, ist, zurück in die Header-Gruppe zu gehen und meine Navigation auszuwählen. Und dann mit meinem Textwerkzeug klicke ich auf eines der Wörter und wähle alle aus. Und wir werden die Zehe weiß ändern. In Ordnung, ich denke, wir sind bereit, unser Bild als nächstes hinzuzufügen. Aber zuerst, werfen wir einen Blick auf dieses Bild, weil ich erklären möchte, warum ich dieses bestimmte Bild Vergleich zu einem anderen, das ich ursprünglich gewählt hatte, das war dieses Bild hier. Also unser Unternehmen, Manhattan Bridge Capital, bietet Kredite an Immobilieninvestoren. Und mein erster Gedanke war ein Bild von der Innenstadt von Manhattan, das die Skyline, einige Wolkenkratzer und einige Gebäude und solche Dinge zeigt . Und ich wählte dieses Bild, weil es eine schöne blaue Farbe bewölkt hat, und ich wollte etwas, das einen Kontrast in Bezug auf das Grün des Logos und der Schaltfläche hatte . Außerdem ist es nicht sehr überwältigend, weil es sich irgendwie mit den anderen Farben des Heldenabschnitts einfügt . Aber dann fing ich an zu denken, OK, wegen dieser blauen Farbe. Es ist irgendwie kalt und absetzend, und es sind nur Gebäude. Und wem arbeitet Manhattan eigentlich mit wem geben sie Kredite? Nun, am Ende, obwohl sie mit Immobilieninvestoren oder Immobilienkredite arbeiten, leihen sie nicht wirklich Geld an die Gebäude selbst. Sie leihen den Menschen Geld. Deshalb entschied ich mich, ein Bild von jemandem zu finden, der besser repräsentieren würde, wer sie sind und mit wem sie im Vergleich zu einem Gebäude selbst umgehen. Also, weil Gebäude können Kredite bekommen und die Menschen tun. Deshalb habe ich mich entschieden, ein Bild mit einer Person darin zu wählen, und am Ende fand ich dieses Bild hier. Und der Grund, warum ich dieses Bild über einige der anderen wählte, die ich mit Leuten fand basiert auf der Art von Investoren, mit denen dieser Kunde beschäftigt oder mit diesem Unternehmen beschäftigt. Sie beschäftigen sich mit Investoren, aber welche Art von Investoren? Es gibt also viele Möglichkeiten, wenn es darum geht, ein Bild mit Investoren auszuwählen. Wollen Sie jemanden in einem Anzug und Krawatte, oder wollen Sie jemanden in Shorts und es zeigt, dass sie zu Hause am Pool arbeiten? Oder wollen Sie jemanden in lässiger Business-Kleidung in einem lässigen Semite, Geschäftsumfeld oder vielleicht etwas ganz anderes gekleidet. Es hängt alles davon ab, was die Firma, für die Sie arbeiten, in ihrer Art von Kundenspitze verkauft . Wer war also ihre Hauptkundschaft? Nun, für dieses spezielle Unternehmen sind Investoren in einem Anzug und Krawatte nicht ihre Hauptkundenspitze. Es ist der einzelne Investor, der für sich selbst gegen ein Unternehmen arbeitet. Also fühlte ich, dass jemand in lässiger Business-Kleidung in einem lässigen, halbgeschäftlichen Umfeld besser geeignet war als jemand in einem Anzug und Krawatte oder einem formelleren Geschäftsumfeld. Hey, deshalb habe ich mich auf dieses Bild hier niedergelassen. Aber es gibt noch einen anderen Grund, warum ich dieses Bild gewählt habe, und das ist wegen der Richtung, in die sie schaut. Studien haben also gezeigt, dass man entweder möchte, dass Menschen, die direkt auf die Besucher schauen, Augenkontakt erzeugen. Oder, noch wichtiger ist, Sie wollen, dass sie etwas betrachten, denn wenn Sie diese Person betrachten, wollen Sie sehen, was sie sehen, und Ihre Augen neigen dazu, in die Richtung zu folgen, die sie 're schauen, was in diesem Fall ist und das richtig ist, werden die Aktion genannt. Also schaut sie in diesen Bereich, was uns zu diesem Aufruf die Aktion führt und wir wollen, dass unsere Besucher bemerken, dass angerufen Aktion und weil wir uns die Zeit genommen haben, unseren Kunden herauszufinden, was sie verkaufen und die Probleme ihrer Kunden, haben wir eine kalte Aktion geschaffen, die unwiderstehlich ist. Es löst ein Problem. Sie brauchen heute Geld. Lassen Sie uns Sie in 60 Minuten oder weniger genehmigt, und das wird eine gute Möglichkeit sein, jemandes Interesse zu ergreifen, weil niemand sonst in ihrer Gegend diese Art von Kreditgenehmigungsservice anbietet. Es wird also mehr Geschäft für den Kunden generieren, weil sie ein echtes Problem lösen , das ihre Kunden Luft haben. Also noch einmal, ich möchte nur die Tatsache verstärken, dass dies eine Marketing-Art von Service ist, die Sie von Ihren Kunden entfernen können , die andere Web-Designer nicht anbieten, und Sie können über und über das hinausgehen, was andere Web-Designer Luft tun und helfen Ihr Kunde mehr Geschäft verdienen. Und wen, glauben Sie, werden sie kontaktieren, wenn sie ihre Website aktualisieren müssen? Sie werden dich kontaktieren, also lasst uns das Bild hier schnappen. Und die coole Sache über diese Website hier Picks gehorchen dot com ist alle ihre Bilder sind nicht nur kostenlos, aber ihr Copyright frei, so dass Sie sie auf Ihren Kunden Live-Website ohne Zuordnung oder Zahlung einer Gebühr, um dieses Bild zu verwenden verwenden. Also, wenn Sie genau das gleiche Foto herunterladen möchten, gehen Sie zu wählen Subait dot com, erstellen Sie ein Konto und dann können Sie dieses bestimmte Bild in verschiedenen Auflösungsgrößen herunterladen . Also, um dieses Bild herunterzuladen, geben Sie einfach diese Nummer hier ein und nimmt ein Testament auf, finden Sie das Bild, und dann können Sie es herunterladen, und dann werden wir weiter an unserem Heldenbereich arbeiten. Na gut, lass uns weitermachen und unsere Formen machen, die auf der linken Seite unseres Bildes sein werden. Eigentlich habe ich mein Bild noch nicht hier drin, also werde ich mein Bild schnappen und es in mein Dokument ziehen. Ich mach es aus für Nagel, und wir werden Graham Ellipse Werkzeug. Dieses Mal wollen wir sicherstellen, dass in unseren Werkzeugoptionen haben wir ausgeschaltet und wir werden eine Größe von tun 5 40 von Lassen Sie uns tun 7 40 Für die Höhe. Wir müssen das tatsächlich ein bisschen runterbringen, damit wir das mit einer Farbe unserer Wahl ausfüllen können . Wir werden weitermachen und eine neue Ebene erstellen. Zuerst nennen wir es Form. Was fühlen? Transparenz Klicken Sie auf OK, und wählen Sie dann für unsere Farbe ein dunkleres Blau im Vergleich zum Hintergrund. Also denke ich, ich werde mit so etwas etwas etwas dunkler gehen. Sie können tun, was Sie wollen, jede Farbe Ihrer Wahl. Ich werde das einfach tun. Klicken Sie auf, okay. Und dann werde ich mit dem Eimerfüllwerkzeug mit dem Buchstaben G greifen, um das auszufüllen. Ich gehe voran und wähle aus, und ich werde es nur ein bisschen überlegen. Ich möchte auch zur Ebene gehen und zum Inhalt zuschneiden auswählen, um die Ebenengrenze zu ändern. Und lassen Sie uns voran und erstellen Sie eine neue früher. Wir werden es auch Form nennen, und dann mit unserem Ellipsenwerkzeug werden wir weitermachen und eine neue Form der exakt gleichen Größe erstellen. Also lasst uns 5 40 mal 7 40 machen. Lasst uns das runterziehen. Und ich möchte diesmal eine hellere Farbe wählen. Also werde ich einfach etwas anderes kleines Feuerzeug wählen, er und gehen Sie voran und füllen Sie das aus. Okay, lass uns de wählen. Ordnung, ich werde diese Ebene überlagern, damit sie die erste Form überlappt und direkt dort herumgeht. Lassen Sie uns auf Ebene gehen und zum Inhalt zuschneiden, um die spätere Grenze als auch zu ändern, tatsächlich gehen, um diese ein wenig besser auszurichten. Also werde ich meine Führung einschalten, damit ich eine neue Anleitung erstellen kann, um die zweite Form in Einklang mit der anderen zu bringen . Okay, bewegen wir den Kerl. Und da draußen brauchen wir das nicht mehr. In Ordnung, also sind wir fast fertig. Was wir jetzt tun werden, ist, dass wir die zweite Form annehmen und sie duplizieren. Denn was wir tun werden ist, dass wir das benutzen, um beide Formen auszuschneiden. Also haben wir die schöne Ellipsenkante entlang der linken Seite, und dann wird es auf dieser Seite transparent sein, also werde ich dir zeigen, wie cool und einfach das ist. Also werden wir das nur ein bisschen überlegen, dann gehen wir zu unseren Mischmodi und wählen Farbe oder Rennen und Boom aus. Wir haben jetzt unsere beiden Formen mit unserer Transparenz hier auf der rechten Seite. Jetzt gibt es ein Problem, dass es alle Farben darunter löscht. Also, wenn ich hier zurück zu meinem Bild gehe, wird es auch die Farbe oder die Pixel für diese Ebene herausnehmen. Also jedes Pixel unterhalb dieser Ebene, die diesen Füllmodus hat, wird es die Farben und die Pixel löschen und Ihnen Transparenz für das Endergebnis geben . Also werden wir das reparieren, und es ist wirklich einfach zu reparieren. Wir werden mit der rechten Maustaste auf eine neue Ebenengruppe klicken. Nennen wir das Formen. Und sobald wir diese Formebene in die Gruppenebene gelegt haben, entfernt sie diesen Füllmodus aus allen darunter liegenden Ebenen, da sie innerhalb der Gruppe enthalten ist. nun Wenn wirnundie anderen beiden Formen mitbringen und dann die darunter liegenden Pixel in der Gruppe gelöscht werden, wirkt sich dies nicht auf die Außenseite der Gruppe aus. Das ist also ziemlich cool. Ich mag das ziemlich genial. Alles klar, gehen wir weiter und bewegen das nach oben. Wir müssen sicherstellen, dass wir die ausgewählte aktive Ebene verschoben haben, und lassen Sie uns fortfahren und diese nach oben in Position bewegen. Genau da drüben, werde ich mein Bild nur für eine Sekunde auftauchen, damit ich sehen kann, wo ich das aufstelle. Also wollte ich außerhalb des oberen Teils der Seite, und es wird auch auf der Außenseite des unteren Teils des Helden Abschnitt gehen. Und dann werden wir eine Ebenenmaske erstellen, um sie vom unteren Rand des Heldenabschnitts zu entfernen . In Ordnung, ein sterneres Bild wieder an, weil wir das in Position bringen müssen. Wir müssen es auch umdrehen, weil sie, wie Sie sehen können, wie Sie sehen können,in die falsche Richtung schaut. Wir wollen, dass sie auf die aufgerufene Aktion schaut, also gehen wir voran und tun das zuerst, indem wir auf Ebene gehen, auswählen, transformieren und dann horizontal spiegeln. Leider hatte ich die falsche Ebene ausgewählt, also gehe ich unter, dass mit Commander Control und den Buchstaben. A Wählen Sie hier unseren Investor aus. Ich werde diesen Layer-Investor umbenennen, und dann gehen wir zurück nach oben, um die Layer-Transformation horizontal zu drehen. Jetzt wird sie sich die gerufene Aktion ansehen Lassen Sie uns unsere Skala greifen, um Shift plus s zu wünschen, und dann, für die Höhe, werde ich 700 eingeben, die die Höhe unseres Heldenabschnitts ist ,und dann mit der Tabulatortaste , es wird die Größe ändern. Und dann kann ich es in der Mitte packen und auf die rechte Seite schieben. Und ich will es den ganzen Weg rüber bringen. Also richtig über es sollte gut sein und dann klicken Sie Geschick. Ich habe ein bisschen Blau hier oben, also werde ich einfach mein Umzugswerkzeug packen und es mit meinen Pfeiltasten ein wenig nach oben bewegen, damit das funktionieren sollte. Jetzt müssen wir nur das Bild oben links und unten links hier loswerden. Und wir können das einfach tun, indem Sie eine Ebenenmaske hinzufügen und weiß auswählen, weil, wie Sie wissen, weiße Anzeigen und Schwarz entfernt. Also werden wir beginnen, indem wir das gesamte Bild mit einer weißen Ebenenmaske intakt halten. Wir werden unser Pinselwerkzeug mit dem Buchstaben B packen. Wir werden das in Schwarzweiß mit dem Buchstaben D umschalten und dann können wir mit Schwarz malen,um es zu entfernen. Wir werden unser Pinselwerkzeug mit dem Buchstaben B packen. Wir werden das in Schwarzweiß mit dem Buchstaben D umschalten und dann können wir mit Schwarz malen, Wie cool ist das? Ah, liebe es. Na gut, gehen wir weiter und machen das Gleiche für unsere Shapes-Gruppe später. Wir können tatsächlich, und eine Ebenenmaske zu einem Gruppenspieler. So das Gleiche. Ebenenmaske. Weiße Anzeige. Nun, dieses Mal, anstatt unseren Pinsel zu verwenden, um ihn zu entfernen, greifen wir unseren rechten Winkel mit dem Buchstaben M wählbar Wir treffen eine Auswahl, wo wir entfernen wollen, und dann sind wir gehen, um unsere Lösch- oder Rücktaste drücken. Aber leider ist nichts passiert. Und das liegt daran, dass es die Informationen aus der Hintergrundfarbe nimmt, um sie durch zu ersetzen . Also müssen wir den Hintergrund und die Vordergrundfarbe mit dem Buchstaben X wechseln und dann, wenn wir die Löschtaste oder die Rücktaste Kate drücken, entfernt es es. In Ordnung. Ich denke, das ist ein guter Punkt, um zu stoppen und weiter mit unserem Heldenbereich im nächsten Tutorial. Also, wenn Sie dafür bereit sind, tun Sie es immer. 33. Herde Teil 2: In Ordnung. Was wir für unseren Heldenbereich übrig haben, ist die gerufene Aktion und möglicherweise einige kleinere Änderungen am Gesamtlayout des Heldenabschnitts als auch. Also lassen Sie uns voran und beginnen mit unserem Text, damit wir einen Titel für unsere aufgerufene Aktion hinzufügen können. Ich werde nur die Kreditgenehmigung in 60 Minuten ausgeben. Lassen Sie uns alle Inhalte auswählen, damit wir die Schriftfarbe in Weiß ändern können. Ich möchte auch 50 für die Pixelgröße tun, und ich werde Railway fett für die lustige Familie verwenden. Und dann müssen wir das hier nur über die Zehe nach links bewegen. Also sind die Linien mit unserem Logo und es sieht ziemlich gut aus, genau da. Das einzige Problem ist, dass wir jetzt auf die Formen läppeln. Lasst uns die Schicht rausziehen, weil sie nicht da drin sein sollte. Bringen Sie das unter die Header-Gruppe, und ich denke, wir müssen die Form über und vielleicht auch das Bild verschieben. Nehmen wir also diese Formebene und verschieben sie nach rechts. Genau da sollte gut sein, und lassen Sie uns auch das Bild bewegen. Nun, wenn Sie den Ebenenmasken-Daumen jetzt und nicht die Ebene selbst. Dann verschieben Sie einfach die Ebenenmaske. Stellen Sie also sicher, dass Sie die Miniaturansicht des Bilds auswählen, damit Sie beide zusammen verschieben können. Also werde ich das Set spielen. Dann müssen wir diesen Teil des Bildes entfernen. Wir greifen also die Ebenenmaske, betrachten unseren Pinsel und stellen dann sicher, dass Sie Schwarz im Vordergrund gesetzt haben, damit Sie diesen Teil des Bildes entfernen können . Na gut, lassen Sie uns diese Layer-Überschrift umbenennen und bewegen Sie sie einfach ein wenig nach oben. Na gut, lasst uns weitermachen und einen kleinen Absatz von Informationen ausgeben. Schnappen Sie sich Ihr Textwerkzeug. Ich gehe weiter und füge einfach einen Absatz ein, den ein hübscher geschrieben hat, also spielt es keine Rolle, was du schreibst. Machen Sie einfach etwa drei Zeilen von Informationen, und dann lassen Sie uns die Schriftgröße auf 14 Weiß ändern, und ich denke, ich möchte mit einem anderen fot gehen. Nun, wenn es um einen Inhalt von drei oder mehr Zeilen geht, werde ich eine Schriftart wie Georgia oder Helvetica verwenden, und diese Arten von Schriftarten sind viel besser für die Augen ist es einfacher, sie im Vergleich zu einer Schriftart wie Eisenbahn oder Oswald. Also für jetzt, gehen wir weiter und gehen mit Georgia. Ich denke, ich muss den Text etwas größer machen, also gehe ich hier rauf und ändere ihn auf 18 und dann müssen wir ihn jetzt in Position bringen. Im Moment finde ich, dass der Absatz immer noch irgendwie mit der Schlagzeile konkurriert. Es hat die gleiche Intensität des Gewichts. Obwohl es eine andere Fondsfamilie ist, macht es immer noch irgendwie schwer zu lesen. Also lasst uns diese Ebene greifen und die Deckkraft auf 50% fallen lassen und das hilft definitiv, eine gewisse Trennung von den beiden zu schaffen und macht dies leichter zu lesen. Ich denke, wir können weitermachen und unsere Nagelknopf anwenden. Lassen Sie uns voran und erstellen Sie eine neue Ebene namens Jetzt anwenden Schaltfläche Transparenz, natürlich, Und dann, mit unserem Rechteck auswählbar, werden wir eine Form mit der folgenden Größe erstellen. Wir machen 3 75 für die mit und 10 für die Höhe. Nun, was ich tun möchte, ist, dass ich abgerundete Ecken erstellen möchte, jetzt haben wir kein Auswahlwerkzeug dafür . Aber wenn wir unter der Auswahlmenüoption gehen, haben wir hier keine Option genannt gerundetes Rechteck. Also, sobald Sie wählen, dass Sie verurteilen. Definieren Sie den Radius dieser abgerundeten Ecken, damit Sie ihn zwischen dem einstellen können, was Sie wollen. 0 bis 100. Also werde ich voran gehen und 35 klicken, OK, OK, und jetzt können Sie die abgerundeten Ecken sehen. Wie cool ist das? Ehrfürchtig. In Ordnung, hoffentlich lernt ihr neues Zeug, während wir mit neuen Lektionen weitermachen. Lassen Sie uns voran und wählen Sie eine der grünen Farben, die wir zuvor verwendet haben, und klicken Sie. OK, lassen Sie uns voran und füllen Sie es mit ihrem Eimer füllen, um uh und D Select sind richtig. Gehen wir weiter und nehmen Sie diese Ebene und duplizieren Sie sie, damit wir eine Art Schlagschatten erstellen können . Zieh das runter und ich werde es nennen. Jetzt bewerben, Knopfschatten. Nun, bevor wir diese Ebenen in Position verschieben, gehen wir weiter und gehen auf die Ebene und wählen Zuschneiden auf Inhalt, um die Ebenengrenze anzupassen. Und lasst uns dasselbe für die erste Ebene hier Inhalt tun und was dann? Sie sind zu einem verschoben wir können nach links und nach oben klicken. Okay, wir können jetzt weitermachen und den Knopfschatten einfärben. Wählen wir diese Ebene aus. Gehen Sie zwei Farben nach oben und wählen Sie colorize. Klicken Sie auf die Farbleiste und klicken Sie dann einfach auf die gleiche Farbe von Grün, die Sie für die obere Schaltfläche ausgewählt haben , und klicken Sie dann auf OK und macht es automatisch dunkler. Und ich will meins nur ein bisschen überlegen. Und ich werde nur meine Pfeiltasten verwenden, um es nach links zu bewegen, enden ein Pixel nach dem anderen. Genau da sieht ziemlich gut aus. Lassen Sie uns voran und legen Sie diese in eine Gruppenebene. Rufen Sie es an. Anwenden Sie jetzt Schaltfläche und lassen Sie uns voran und Linie es auf die anderen beiden Elemente als auch. Es ist eine Rate über da. Okay, ich gehe weiter und wähle meinen Absatz aus und lass uns weitermachen und unsere Pfeiltasten benutzen, um das auch auszuwählen. Und um Ihre Pfeiltasten darauf zu verwenden, müssen Sie zuerst mit Ihrem Verschiebungswerkzeug darauf klicken. Andernfalls verwenden Sie einfach die Pfeiltasten, um im Ebenenbedienfeld zu navigieren. Lassen Sie uns voran und benennen Sie diesen Absatz wir werden die Überschrift an der Spitze setzen gelten . Jetzt Schaltfläche unten unter diesen und wir können dann eine neue Ebenengruppe für diejenigen, die aufgerufen Aufruf zu Aktion erstellen . Okay, wir haben noch eine Sache, die wir vergessen haben zu tun, und das ist, dass wir unseren Text für unsere Schaltfläche hinzufügen. Also was? Sie sind textuell. Wir werden tippen, Bewerben Sie sich jetzt und lassen Sie uns weiß als auch alt auswählen und lassen Sie uns 70 Pixel für die Schriftgröße machen. Aber das genau da und lass uns voran gehen und eine Linie, die direkt in der Mitte unseres Knopfes ich das hier unten mit unserem Nagelknopf verschieben werde, und dann werden wir eine Auswahl mit unserem unscharfen Auswahlwerkzeug treffen. Stellen Sie sicher, dass Sie Ihre Schaltfläche jetzt anwenden ausgewählt haben, und dann können wir unser Ausrichtungswerkzeug verwenden, um es direkt in der Mitte auszurichten, und wir müssen diese ziehen. Übernehmen Sie jetzt, schichten Sie nach oben, so dass wir es mit ihrem Limit-Tool auswählen können und stellen Sie dann sicher , dass Sie relativ zur Auswahl und eine Linie Mitte und Mitte der Schaltfläche haben. Das einzige Problem ist, dass wir oben mehr Platz haben als unten, also lassen Sie mich Ihnen zeigen, warum das passiert ist. Schnappen Sie sich Ihr Textil und klicken Sie darauf und wir können innerhalb dieses Textfeldes sehen. Hier haben wir mehr Platz erscheinen als hier unten, und das ist, wo das Ausrichtungswerkzeug seine Ausrichtungen basierend auf der Größe dieses Quaders macht . Also, wenn wir hier oben klicken, können wir ein kleines gelbes Feld sehen, und wir können klicken und ziehen, dass nach unten, so dass es an den oberen Rand des Textes kommt. Das einzige Problem ist, dass es den Text nach unten und unter das Textfeld schiebt, so dass er abgeschnitten ist. Aber das ist okay für die Zwecke der Ausrichtung. Das ist in Ordnung. Gehen wir zurück zu unserer Anwendung Nagelknopf und er Auswahl mit unserem Fuzzy Select Tool. Und dann mit ihrem Ausrichtungswerkzeug können wir diese direkt in der Mitte wieder zentrieren. Jetzt müssen wir de auswählen und mit unserem Textwerkzeug zurückkehren und dieses Feld nach oben verschieben, bis wir den gesamten Text innerhalb dieses Textfelds sichtbar bekommen . Und jetzt sollte es perfekt ausgerichtet sein. Schön. Alles klar, gehen wir weiter und verkleinern. In Ordnung, also schauen wir uns unseren Heldenbereich an, um zu sehen, ob wir irgendetwas tun können, um das etwas besser zu machen. Wir haben also zwei Seiten, und das Image unseres Investors blickt auf diese Weise zurück, was wir wollen. Aber ich denke, es gibt zu viele konkurrierende Elemente hier, und es sieht zu beschäftigt aus. Was sind also die wichtigsten Teile dieses Teils der Heldenabteilung? Ich würde sagen, die Schaltfläche Jetzt anwenden ist die wichtigste, weil das der Aufruf zum Handeln ist. Dies ist das Angebot, aber die Anwendung Nagelknopf bringt Sie zu diesem nächsten Schritt, so dass sollte der größte sein. Was in Ordnung ist. Ist es. Aber es ist immer noch irgendwie konkurrieren mit dem Logo hier oben, weil Logo ziemlich groß ist. Das Logo konkurriert also mit dem Nagelknopf, und es ist eine Art, unsere Augen von diesem Abschnitt weg zu nehmen. Also denke ich, wir müssen das Logo nehmen und es kleiner machen. Gehen wir weiter und bewegen uns. Bewerben Sie sich jetzt, zurück in den richtigen Gruppenspieler. Lassen Sie uns unser Logo finden, das in unserer Kopfzeile sein sollte, und mit unserem Skalierungswerkzeug wir voran gehen und das auf eine Höhe von Let's go with 98 für die Höhe skalieren. Nun, wie Sie wissen, wurde diese nun in eine Pixelebene konvertiert. Und wenn wir diesen Inhalt aktualisieren möchten, müssen wir unser Textwerkzeug auswählen und die entsprechende Option auswählen, um ihn zu ändern. Aber das ist in Ordnung, denn wir haben das Logo in einem separaten Dokument entworfen und wir sagen, dass wir hoffentlich immer wieder zu diesem Dokument zurückkehren und es basierend auf dem Feedback unserer Kunden aktualisieren können . Wenn sie das Logo so mögen, wie es ist, ist das in Ordnung. Wenn sie jedoch Änderungen haben, können Sie zum Originaldokument zurückkehren und dann diese Ebene ziehen, anstatt sie von hier aus zu reparieren. Also, wie Sie sehen können, indem Sie das lokale kleiner machen, es ist nicht konkurrierend wie zuvor. Und jetzt ziehen unsere Augen zu diesem Bereich. Wir haben die Schlagzeile gelesen. Vielleicht möchten wir diesen Absatz hier für weitere Informationen lesen, aber wir wissen, was wir als Nächstes tun müssen, und das gilt jetzt. Und das sind kleine Dinge, an die Sie denken müssen, während Sie entwerfen was sind die wichtigsten Elemente? Was sollte das Größte in dem sein, was das kleinste sein sollte. Davon abgesehen denke ich, dass unser Text hier drüben und unsere Navigation ein wenig zu klein ist. Also werde ich mein Textwerkzeug greifen und alles auswählen. Das einzige Problem ist, dass ich auf die darüber liegenden Tooloptionen zugreifen kann, da es oben im Dokument ausgeblendet wird . Also lasst uns da rauskommen. Und dann können wir mit ihrem Bewegungstool einfach das nach unten federn und dann hineingehen und Änderungen vornehmen. Ich mache das 22 Punkte für die Größe und dann müssen wir nur sicherstellen, dass es nach oben und rechts neu ausgerichtet ist. Alles klar, ich mag die Größe der Navigation. Jetzt ist es nur ein bisschen zu nah an diesen Formen hier. Also werde ich voran gehen und all diese Gruppenspieler schließen und meine Formspieler über und links nur ein wenig bewegen . Also genau da sollte es gut sein. Und jetzt muss ich die Ebenenmaske des Bildes greifen, damit ich mit Weiß malen kann, damit ich das Bild in diesem Teil und diesem Teil des Heldenabschnitts zurückbringen kann , weil wir einen Teil davon früher gelöscht haben, und jetzt müssen wir es nur wieder hinzufügen in diesem Bereich. K so weiß und schwarz entfernt. In Ordnung, also ist unsere Heldenabteilung jetzt fertig. Oder ist es? Es gibt tatsächlich eine Sache, die wir tun können, um den Heldenbereich zu verbessern, um die Chancen zu erhöhen , dass ein Investor Nagel gegen Scrollen auf einen anderen Teil der Seite anwenden oder von der Seite navigieren, oder vielleicht sogar die Website verlassen. Und ich werde mehr darüber im nächsten Tutorial erklären. 34. Herde Teil 3: Wir werden weitermachen und unsere Heldenabteilung beenden. Jetzt brauchen wir hinzugefügte Zutat, was wir im vorherigen Tutorial nicht getan haben, und wir müssen auch unsere Ebenen für den Heldenbereich organisieren. Und dann möchte ich nur über eine andere Sache sprechen, die wir dazu bringen, den Heldenbereich zu verbessern , um die Chancen zu erhöhen, dass ein Investor diesen Aufruf zum Handeln nutzen und sich jetzt bewerben wird . Und wir werden das in nur einer Minute behandeln, weil wir es vielleicht zum Heldenbereich hinzufügen wollen oder nicht, und ich werde mehr darüber erklären. Sobald wir diese anderen Schritte durchlaufen haben, gehen wir weiter und arbeiten daran, ein Grady int zu unserem Hintergrund hinzuzufügen. Und um zu beginnen, werden wir weitermachen und eine neue Ebene erstellen. Wir werden Zutat mit einer Fülle von Transparenz nennen. Gehen Sie weiter und klicken Sie auf. Okay, ziehen wir es aus dieser Gruppenebene heraus. Also lassen Sie uns voran und schalten Sie die Layer-Grenze unter Ansicht und klicken Sie dann einfach auf Show Layer-Grenze und wir können sehen, dass diese bestimmte Ebene das gesamte Dokument bedeckt. Und wenn wir unsere Zutat hinzufügen, sind Zutat wird auch in diesem Bereich hinzugefügt werden, und wir müssten eine Ebenenmaske verwenden, um es aus diesem Bereich zu entfernen. Aber es gibt einen einfacheren Weg, es zu tun. Wir können diese bestimmte Ebene tatsächlich auf die Höhe des Heldenabschnitts skalieren, so dass wir uns keine Sorgen über das Hinzufügen der Ebenenmaske für hier unten machen müssen. das zu tun, werden wir mit der rechten Maustaste auf Ingredient Select Scale hier klicken. Wir möchten es entsperren und die Höhe auf die Höhe des Heldenabschnitts einstellen , der 700 ist. Wenn Sie dann auf Skalieren klicken, werden Sie feststellen, dass sich die Layerbegrenzung geändert hat. Wir können tatsächlich klicken und ziehen Sie diesen Teil der Ebene in den Heldenbereich und jetzt sind Ebene. Grenze ist um den Heldenbereich herum und Zutat wird nur auf diesen Bereich angewendet. Lassen Sie uns also voran und fügen Sie Zutat mit unserem Grußwerkzeug hinzu, das sich genau hier befindet. Ich habe keine Tastenkombination dafür, aber wenn Sie es viel verwenden, möchten Sie vielleicht und eine für sich selbst. Okay, in den Werkzeugoptionen haben wir hier einige Optionen, die wir für unsere Zutat unter Form einrichten müssen. Wir wollen sicherstellen, dass wir Radio ausgewählt haben, so dass wir eine kreisförmige Art Zutaten haben, also ist es irgendwie wie ein Scheinwerfer. Wir wollen auch die Mischung Farbraum, setzen Zehe lineare RGB, und dann müssen wir die Farben unserer Zutat ändern. Im Moment zeigt mir mein schwarzes Zehenweiß. Ihre können unterschiedlich sein, je nachdem, ob Sie dieses spezielle Tool vorher verwenden oder nicht. Also werde ich voran gehen und darauf klicken, und ich werde eine Liste mit all den verschiedenen gierigen INs bekommen, die wieder verfügbar sind. Ihre können anders sein als meine, weil ich zuvor benutzerdefinierte Zutaten erstellt habe und sie dann automatisch in diesem Panel speichert. Um die Farben zu ändern, müssen wir hier auf dieses kleine Symbol klicken, um die Grady int zu bearbeiten. Und dann wird uns hier oben ein neues Panel vorgestellt, das Degrading und Editor genannt wird, und dann können wir Anpassungen an dieser bestimmten Farbe vornehmen. Also haben wir hier ein paar Dreiecke und das mittlere. Wir können tatsächlich die Endpunkte verschieben, die wir nicht können, also kann ich einstellen, wie viel Schwarz-Weiß zum Grady int hinzugefügt wird. Ich möchte meine in der Mitte behalten, damit es 50 50 sind. Und dann, um die Farben zu ändern, müssen wir unsere Farbauswahl im Vordergrund und in den Hintergrundfarben treffen. Die Farbe Grady und ich wollen, ist weiß Zehenblau, und ich will eine bestimmte Farbe von Blau, die diese Farbe hier ist, der Hintergrund unserer Heldenabteilung. So haben Sie schon weiß eingerichtet. Also gehen Sie weiter und stellen Sie fest, dass, wenn es anders für Sie ist und dann für die Hintergrundfarbe, wir werden diese Farbe mit unserem Pipettenwerkzeug auswählen, das sich direkt hier befindet. Wenn Sie also darauf klicken, erhalten Sie eine kleine Pipette und dann können Sie auf diese Farbe klicken, und es wird diese Farbe hier hinzufügen. Okay, also haben wir jetzt diese Farbe. Wir können sehen, dass mein gieriger und Editor auch von blauem Zehenweiß automatisch geändert. Also werde ich Ihnen zeigen, wie Sie das etwas ändern können, weil wir weißes Zehenblau wollen und wir können auch Farbauswahl von hier machen. Also lasst uns das machen. Ich werde hier klicken. OK, wenn wir also zum Grady und Editor kommen und wir mit der rechten Maustaste klicken, bekommen wir ein Pop-up-Menü, und wir können hier für den linken Farbtyp sehen. Ich habe Hintergrundfarbe ausgewählt, und deshalb hat es sich automatisch im Grady geändert, einem Editor, als ich hier drüben ausgewählt habe. Deiner kann anders sein. Jahre können festgelegt werden, und es hat wahrscheinlich nicht die Farben geändert. Klicken Sie also mit der rechten Maustaste auf den Gitter-Editor und geben Sie dann Gimp an, welche Farbe Sie für die linke Seite verwenden möchten . Und in diesem Fall will ich weiß. Also werde ich Vordergrundfarbe auswählen und dann mit der rechten Maustaste klicken und den richtigen Farbtyp und Hintergrundfarbe dieses Mal auswählen . Jetzt habe ich mein weißes Zehenblau. Gehen Sie also voran und richten Sie Ihre Farben ein und gehen Sie dann zurück zu Ihrem Ebenenfenster. Stellen Sie sicher, dass Sie Gitter ausgewählt haben, und klicken Sie dann auf Ihre Zutat und ziehen Sie sie heraus. Sehen Sie sich an, wie es sich auf diese Layer-Grenze beschränkt. Wenn wir das nicht getan hätten, wäre es vertuscht gewesen. Hier unten ist gut, wir hätten mehr Zeit damit verbracht, diesen Grady Int zu bearbeiten, also wird es nicht hier unten angezeigt, weil wir nur wollen, dass es auf den Heldenbereich beschränkt ist. Je länger diese Linie ist, desto mehr weiß oder desto größer ist der Kreis für diesen bestimmten Grady int. Ich komme hier rein, es ist eher ein Scheinwerfer und es ist viel kleiner. Das ist nicht das, was ich will. Also werde ich auch rausziehen . Oh, ich weiß es nicht. Ich schätze, es sollte gut sein. Jetzt können wir voran gehen und klicken, eingeben oder zurückkehren, um dieses gierige int zu erstellen. Also wurde unsere Zutat angewendet, und jetzt müssen wir Anpassungen daran vornehmen, weil wir unser Bild nicht sehen können. Das erste, was ich tun möchte, ist, dass ich meine Deckkraft auf etwa 5 bis 10 für die Deckkraft herunterlassen möchte. Ich will es nicht zu hell oder zu intensiv. Und wenn ich mir das Vorher und Nachher anschaue, wird es mir eine bessere Vorstellung davon geben, wo ich diese besondere Deckkraft platzieren möchte. Und ich werde für mich zu sechs gehen. Sie können tun, was Sie entscheiden, Sieht am besten auf Ihrem Ende aus. Das andere, was wir tun müssen, ist, dass wir den Grady int aus dem Bild entfernen müssen. Ich will nicht das gierige int hier drüben auf der Seite, also müssen wir eine Ebenenmaske machen, um das zu tun. Also lassen Sie uns voran und fügen Sie eine Ebenenmaske mit Weiß hinzu und klicken Sie und dann mit meinem Rechteck-Auswahlwerkzeug Rechteck-Auswahlwerkzeug werde ich hier eine Auswahl treffen. Und dann möchte ich sicherstellen, dass ich Schwarz auf den Hintergrund gesetzt habe und dann Löschen oder die Rücktaste gedrückt habe, und das entfernt Zutat aus dieser Auswahl. Jetzt muss ich hier eine Auswahl treffen, um den Rest davon zu entfernen, damit wir in unsere Formen gehen können. Gruppieren Sie diese Ebene, und ich möchte die oberste Ebene auswählen, die diese hier ist und dann mit meinem unscharfen Auswahlwerkzeug kann ich in diesen Bereich klicken, um meine Auswahl zu treffen. Ich gehe weiter und schließe diesen Gruppenspieler und gehe zurück und wähle meine Ebenenmaske für diese Grady Int-Ebene aus und dann wieder, Löschen oder Rücktaste, um den Rest der Zutat loszuwerden. Werfen wir nun einen Blick auf das Vorher und Nachher. Es wird nur in diesem Bereich dort drüben angewendet. Wie cool ist das? Alles klar, so dass fügt ein wenig Tiefe in unseren Hintergrund, macht es ein wenig interessanter und nicht s flach. In Ordnung, lassen Sie uns eine neue Ebenengruppe erstellen, und nennen wir sie Heldenabschnitt oder einfach nur Hero. Und lassen Sie uns alle unsere Gruppenschichten hier in jede einzelne Luft einbringen. Okay, also haben wir unseren Header oder Heldenbereich, und alles ist schön und ordentlich und organisiert. In Ordnung, gehen wir weiter und arbeiten an der Heldenabteilung ein wenig mehr, weil wir vielleicht einen Abschnitt haben, den wir im Heldenbereich hinzufügen möchten oder nicht . Und im ursprünglichen Design fügte ich einige soziale Beweise hinzu, um die Wahrscheinlichkeit zu erhöhen, dass ein Investor dieses Angebot nutzen und die genannte Aktion nutzen würde , indem er sich jetzt bewerben würde. Der Grund, warum ich soziale Beweise hinzufügen möchte, ist, weil es Glaubwürdigkeit und Glaubwürdigkeit hinzufügt . Für ein Unternehmen wie dieses ist riesig, wenn Sie über Geld im Allgemeinen sprechen. Indem wir potenziellen Investoren zeigen, dass dieses spezielle Unternehmen in diesen speziellen Publikationen und Medien präsentiert wurde , zeigt, dass dieses bestimmte Unternehmen vertrauenswürdig ist und viele Investoren sicherstellen wollen, dass sie mit jemandem zu tun haben das ist vertrauenswürdig und kein Kredit Hai. Das könnte also dazu beitragen, die Möglichkeit zu erhöhen, dass jemand mit diesem Unternehmen Geschäfte machen will , anstatt diese Informationen nicht zu haben. Das einzige Problem ist, wo stellen wir es hin? Stecken wir es jetzt in den Heldenbereich? Der Heldenbereich ist hier oben, aber der soziale Beweis ist darunter. Also lasst es uns in den Heldenbereich verschieben und einen Blick darauf werfen, was passiert. Also jetzt ist der Heldenbereich viel beschäftigter. Wir haben noch viel mehr vor sich. Was wir tun können, ist, dass wir die Größe des Logos und die Schaltfläche „Jetzt anwenden“ senken und alles so verschieben können , dass diese Informationen passen. Oder wir nehmen diesen sozialen Beweis und wir können die Deckkraft der Logos anpassen, um die Intensität der Logos zu verringern . Sie sind immer noch sichtbar und sie zeigen immer noch Glaubwürdigkeit, aber es ist nicht so beschäftigt wie vorher. Die andere Sache, die wir tun können, ist, dass wir diese Logos nehmen und sie schwächen können, so dass sie nicht so groß sind wie jetzt, und dann konkurrieren sie nicht mit dem Rest des Inhalts. Also überlasse ich dir diese kreative Entscheidung. Wenn Sie es im Heldenbereich platzieren möchten, denken Sie daran, Ihre Elemente neu auszurichten und die Größe entsprechend anzupassen, so dass der Heldenbereich nicht so beschäftigt ist, wie er derzeit ist. Du musst auch das Bild bewegen und das nach oben bewegen. Oder du kannst tun, was ich getan habe, und sie so unter den Heldenbereich legen. Okay, das war's also für unsere Heldenabteilung. Es seidenn, denn, Sie stellen Ihren Social Media Beweis dort rein. So oder so, wir werden mit der Erstellung des sozialen Beweisabschnitts und dieser drei Spalten im nächsten Tutorial beginnen , das ist der Anfang der Erstellung des Körperabschnitts unserer Webseite. Also, wenn du bereit bist, das zu tun, lass es uns tun. 35. Social Proof: Hallo und willkommen zurück. Alles klar, in diesem Tutorial werden wir weitermachen und unsere soziale Proof-Abteilung erstellen, und wir werden auch drei Spalten mit Informationen erstellen. Und auf ihrer ursprünglichen Webseite hatten sie einen Link hier, Dienstleistungen, die auf eine andere Seite gingen, die die drei Haupttypen von Investoren erklärt, für die sie Kredite zur Verfügung gestellt haben. Also dachte ich, es wäre schön, Snippets dieser Informationen auf der Homepage zu platzieren, wenn sie sich entscheiden, dass sie mehr Informationen über eine dieser spezifischen Arten von Darlehen wollten als sie leicht über den Link navigieren können, der erstellt wird durch die Überschrift. Also werden wir weitermachen und diese drei Spalten auch erstellen. Gehen wir also voran und beginnen Sie mit unserem Social Proof Abschnitt zuerst. Wir brauchen also 4 bis 5 Logos. Das waren die, die ich gewählt habe, die Street Money Inc und CNBC, und wir werden sie zu unserem Dokument hinzufügen. Also habe ich gerade eine Google-Suche für jedes dieser Logos gemacht und ich habe transparent oder PNG ausgewählt was auch immer die Optionen sind, weil Sie sicherstellen möchten, dass diese bestimmte Datei, die Sie zu Ihrem Dokument hinzufügen, transparent ist. Also gehen wir mit der rechten Maustaste wählen Bild kopieren, und dann wieder in unserem Dokument, können wir mit Commander Control und dem Buchstaben V einfügen Wenn Sie diese Option nicht erhalten, wo fügt es automatisch zu einer neuen Ebene für Sie, können Sie stattdessen diese Option erhalten. Das heißt, schwebende Auswahl. In diesem Fall, Sie rechts, klicken Sie rechts,und wählen Sie eine neue Ebene aus, und dann wird es eine neue Ebene für Sie hinzufügen. Okay, ich brauche nicht beides, also werde ich einen entfernen, und dann müssen wir nur die Logos umbenennen, aufsteigen und die Größe jedes Logos ändern, und wir müssen auch die Logos umbenennen. Also lass uns Forbes machen. Ich habe ein paar verschiedene. Hier ist Nun, ich habe CNN Geld statt Geld. Es spielt keine Rolle. Dies ist sowieso nur zum Üben. Und ich werde zu dieser Zeit nur mit drei gehen. Gehen wir also zu Farben und wählen Sie colorize. Und dann wollen wir weiß wählen, um alles Zehe weiß zu ändern. Gehen wir also voran und machen Sie das für jedes der Logos. Okay? Mit unseren Guides eingeschaltet mit Kommandantensteuerung im Semikolon. Ich werde weitermachen und einen Führer zu 785. Lassen Sie uns unser Festzelt Werkzeug greifen, damit wir es mit einer Farbe ausfüllen können. Lassen Sie uns auch eine neue Ebene erstellen. Nennen wir es Hintergrund und lassen Sie uns eine dunkelblaue Farbe aussuchen und dann mit Ihrem Eimerfüllungswerkzeug , können Sie voran gehen und das ausfüllen. Okay, ich werde meine Guides auswählen und ausschalten. Lassen Sie uns die Hintergrundebene unter die Logos verschieben, und wir müssen auch die Größe unserer Logos ändern und auch die Ebenengrenze ändern. Gehen wir also auf Ebene und wählen Sie den Inhalt beschneiden und lassen Sie uns voran und machen Sie die anderen beiden ebenfalls. Nun, wenn die Ebenengrenze bereits auf den Inhalt zugeschnitten ist, erhalten Sie hier diese kleine Nachricht, also sieht es genauso aus wie für Forbes, also sind wir gut, dorthin zu gehen. Gehen wir voran und greifen Sie unser Skalierungswerkzeug und stellen Sie sicher, dass die Höhe und die Breite verbunden sind. Und dann, für die Höhe werden wir 50 Pixel machen. Ich sollte uns etwas tiefer gehen lassen. Machen wir 35 und dann gehen Sie voran und skalieren Sie es und bewegen Sie es einfach in Position. Okay, das machen wir auch mit den anderen beiden Logos. Wir sind, wie viele Logos Sie haben. Sie werden alle 35. Okay, lassen Sie uns unsere Gitter einschalten, weil ich sicherstellen möchte, dass alles richtig ausgerichtet ist. Sie müssen auch mein Raster über alle anderen Ebenen verschieben. Wir können es tatsächlich sehen. Lassen Sie uns voran und platzieren Sie dieses Logo hier direkt in die Mitte dieser beiden. Also lasst uns unser Rechteck-Auswahlwerkzeug greifen und eine Auswahl treffen. Und dann mit unserem Ausrichtungswerkzeug möchten wir mit unserem Ausrichtungswerkzeugauf diese Ebene klicken und sie bei Bedarf nach oben verschieben. Und dann werden wir uns an den Mittelpunkt des Ziels ausrichten. Okay, lass uns weitermachen und all diese Logos in eine Gruppenebene legen. Klicken Sie also mit der rechten Maustaste und wählen Sie eine neue frühere Gruppe namens Logo. Jetzt gehen wir weiter und verbinden unsere Logos direkt in der Mitte unseres Hintergrunds. Gehen wir zuerst zur Hintergrundebene und wählen Sie Ebene und erstellen Sie einen Inhalt, um die Ebenengrenze zu ändern , und dann mit dem Ausrichtungswerkzeug, werden wir darauf klicken. Aber es sieht so aus, als müsste ich das ganz nach oben bewegen. Also werden wir darauf klicken. Dann werden wir die Logos nach oben verschieben, halten Sie Ihre Umschalttaste gedrückt und klicken Sie auf die Logos. Dieses Mal werden wir uns an den ersten Punkt ausrichten, die der Hintergrund ist. Und dann werden wir Mitte und Mitte des Ziels ausrichten, um diese Logos direkt in der Mitte der Form auszurichten . In Ordnung, so dass ein Teil der was Seite getan wird, werden wir eine neue Ebenengruppe für sie namens Social Proof erstellen. Okay, das haben wir alles organisiert. Gehen wir weiter und bewegen das unter den Heldenbereich. Und jetzt lasst uns an unseren drei Spalten arbeiten. Nun, bevor wir das tun, möchte ich tatsächlich zurückgehen und die Logos auswählen und die Deckkraft auf etwa 50 fallen lassen, nur eine Art Ton es nur ein wenig nach unten. Alles klar , das macht es weniger beschäftigt als vorher. Also lasst uns jetzt weitermachen und an unseren Säulen arbeiten. Also in der ersten Spalte werden wir den Titel auf Vermieter setzen. Lass es uns in Oswald Bold umwandeln. Lassen Sie uns tun 30 für die Größe und dann für die Farbe, werden wir die grüne Farbe ihres Knopfes zu wählen. So beschreiben Sie Ihre Pipette Werkzeug hier und klicken Sie auf die Schaltfläche, um den Farbklick zu erhalten. OK, und wir müssen diese bestimmte Ebene tatsächlich außerhalb dieser Gruppe verschieben. Diese Schicht. Alles klar, lassen Sie uns das hier unten legen, und dann erstellen wir einen neuen Absatz mit neuen Informationen. Es spielt keine Rolle, was es sagt. Tippen Sie einfach etwas aus. 567 Linien ist in Ordnung. Und lassen Sie uns diesen Text 12 für die Größe und dann für die Farbe, die wir in 333 eingeben werden 333 Klicken Sie auf Ihre Tab-Taste Klicken Sie auf OK, und lassen Sie uns die Schriftart ändern Georgia sieht irgendwie klein aus. Vielleicht ein bisschen größer. Ich wähle alles aus und ändere es auf 14 und dann lass es uns einfach hier in Position bringen, okay? Ich denke, wir müssen unser Netz einschalten. Gehen wir also voran und schalten Sie das ein, und ich werde eine neue frühere Gruppe für diesen Inhalt erstellen. Es wird es Vermieter nennen und schauen wir uns unsere Spacing-Haare an. Ich denke, wenn ich tun möchte, möchte ich diesen Absatz nehmen und ihn so verdichten, dass er zwei Spaltenbreiten ausfüllt . Also gehen wir zurück zu unserem Textil mit dem Buchstaben T und dann müssen wir in unsere Gruppenebene gehen, um unseren Absatz auszuwählen, und dann können wir darauf klicken, um das Textfeld zu aktivieren, damit wir es ändern können. Also werde ich diese Ecke hier packen und sie nach links und unten ziehen, bis sie diese zwei Spalten füllt, um meinen Text hier ein wenig neu auszurichten . Also habe ich zwei Absätze. Das ist in Ordnung. Und jetzt ist es auf diese beiden Spalten verdichtet, was ich will. Und dann fügen wir ein paar Spalten Platz zwischen den Spalten hinzu, während wir auch die anderen Spalten erstellen. Und wir werden das wirklich einfach machen. Was wir tun müssen, ist unseren Vermieter gruppierten Layer zu schnappen, und wir werden es zwei Mal duplizieren, um Vermieter einen an die Spitze zu setzen, der diesen einen Flossen nennt , und wir werden das einfach neu nennen. Lasst uns diese Schicht packen und was dann? Sie sind in ein Testament versetzt. Bewegen Sie es einfach über ihre zu schreiben. Also stellen Sie sicher, dass Sie zwei Spalten von Raum und zwischen ihnen haben, da sie ich denke, das ist zu viele. Ich gehe weiter und schiebe es nach links, also haben wir eine Spalte Abstand zwischen ihnen und zurück zu unseren Textwerkzeugen. Wir können den Titel ändern, alle auswählen, auf 30 ändern und dann auch die Schriftart ändern. Wie Oswald Old und wir sicherstellen müssen, dass wir die Farbe hatten, und dann werden wir auch die andere Ebene bewegen. Also brauchen wir eine Spalte Raum. Es ist in Ordnung und lasst uns den Titel ändern. Jetzt müssen wir sie nur an der Spitze ausrichten, so dass sie perfekt entlang dieser Kante ausgerichtet sind . Gehen wir weiter und schalten Sie diese drei Top-Spieler aus, und wir sollten in der Lage sein, sie jetzt mit unserem Ausrichtungstool auszuwählen. Lassen Sie uns voran und klicken Sie auf Vermieter, halten Sie Ihre Shift-Taste gedrückt, klicken Sie auf Flossen und dann die Shift-Taste losgelassen, halten Sie die auf und klicken Sie dann auf Neu alles in Ordnung, wir gehen zu relativ zum ersten Element und wählen Sie dann eine Linie oberen Rand der Ziele, Alle rechts dort. Jetzt perfekt an der Spitze ausgerichtet. Wir müssen sie nur in der Mitte unseres Dokuments zentrieren. , Also,bevor wir diese drei Spalten direkt in der Mitte vereinen, lassen Sie uns einen Abschnitt für diese Spalten erstellen und eine bestimmte Höhe für sie angeben. Also lassen Sie uns unsere Führer mit Commander Control im Semikolon einschalten. Lassen Sie uns unser Messwerkzeug greifen und messen wir 300 Pixel hoch. Kate, nimm deinen Kerl und zieh ihn runter und es bis zum Fadenkreuz. jetzt Bevor wir diese mit ihrem Ausrichtungswerkzeug auswählen, lassen Sie unsjetzteine neue Ebenengruppe mit dem Namen drei Spalten erstellen, damit wir jede dieser Spalten hineinlegen können . Und dann können wir einfach diese bestimmte Layergruppe mit dem Ausrichtungswerkzeug im Vergleich zu jeder Spalte einzeln auswählen , und dann wird es einfacher und schneller, sie direkt in der Mitte auszurichten. Also mit unserem Lehman-Tool, müssen wir nur einmal darauf klicken und dann ah, der Mitte des Ziels liegen und Mitte des Ziels ausrichten. Okay, de, wählen und schalten Sie Führungen aus, und dann können wir weitermachen und die anderen Ebenen auch einschalten. Wir gehen weiter und halten uns vorerst fern. Jetzt gibt es noch eine letzte Sache, die ich tun möchte, bevor wir weitermachen, und das heißt, ich möchte die Titel direkt in der Mitte der Absätze ausrichten. Nun, wenn Sie so etwas tun und bereits alles gruppiert haben, wird es viel schwieriger sein, als es von Anfang an zu tun. Aber manchmal passiert das, weil der Kunde vielleicht eine Änderung vornehmen möchte und dies zentrieren möchte. Aber Sie haben es am Anfang nicht getan, wie wir es getan haben, und Sie müssen jede dieser Ebenen durchgehen, die Ebenen gruppieren und alle Ebenen herausziehen, um sie mit Ihrem Ausrichtungswerkzeug auszuwählen . Wir müssen diese Ebenen auch wieder deaktivieren, damit wir sie auswählen können, und dann können wir diese Ebenen mit unserem Ausrichtungswerkzeug auswählen, so dass wir dann eine Linie relativ zum ersten Element und einen Linienmittelpunkt des Ziels auswählen können . Nun, in diesem Fall der Absatz nach links verschoben, weil wir ihn am ersten Element ausrichten. Also, anstatt Vermieter zuerst auszuwählen, können wir den Absatz auswählen, weil ich möchte, dass der Vermieter nach rechts übergeht. Andernfalls verlieren wir diesen gleichmäßigen Abstand zwischen jeder Spalte und dann kann ich Vermieter auswählen, und das wird sich bewegen oder Okay, lassen Sie uns voran und legen Sie die wieder hinein und dann tun Sie das für die anderen beiden Spalten als gut. Ich werde diesen Titel mit dem Namen des Titels umbenennen, nur um ihm eine etwas bessere Beschreibung zu geben . Und dann als Faras der Absatzname für die Ebene. Ich werde voran gehen und es Absatz umbenennen, so dass der Client manchmal den Inhalt nicht zur Verfügung hat . Also verwenden Sie einfach einen Text wie diesen oder Dummy-Text , über den wir in einem kommenden Tutorial sprechen werden. Oder Sie können tatsächlich zu ihrer Website navigieren und einige der Inhalte, die sie bereits haben den Platz im Inneren von hier. Aber im Moment werden wir es einfach so lassen. Okay, wir haben drei Spalten. Lassen Sie uns den Schlag Social Proof Held und Header wieder eingeschaltet und alles kommt gut. In Ordnung, jetzt, wo wir das erledigt haben, werden wir im nächsten Tutorial an dem nächsten Teil unseres Körpers arbeiten 36. Körperteil 1: für unseren nächsten Abschnitt unserer Website. Ich wollte etwas schaffen, das erklärt, warum Sie Geschäfte mit dieser speziellen Firma machen sollten . So ist es irgendwie wie die „Über uns“ -Seite. Was ist los mit uns? Was tun wir? Das sind die Dinge, die wir diotieren. Also denke ich etwas, das viel mächtiger ist als und über uns. Seite zeigt die Vorteile, warum Sie Geschäfte mit einem bestimmten Unternehmen machen sollten, das Sie noch über uns Seite tun können . Aber ich würde lieber versuchen, meine Kunden Dienstleistungen an potenzielle Website-Besucher zu verkaufen, warum sie Geschäfte mit ihnen machen sollten. Und das ist es, was dieser spezielle Abschnitt darstellt. Warum Manhattan? Und dann listen wir 4 bis 7 Vorteile auf, warum Sie Geschäfte mit Manhattan Bridge Capital Now machen sollten . Dieser Inhalt ist nicht auf ihrer Website verfügbar, so dass es etwas, über das ich mit ihnen sprechen müsste und bestellt, um herauszufinden, was die Vorteile der Verwendung ihrer speziellen Firma im Vergleich zu anderen Kreditdienstleistungen in der Gegend sind. Dies ist etwas, auf das ich meinen Kunden Upsell, weil ich ihnen entweder helfen würde richtige Inhalte für diesen Abschnitt, oder ich würde ihnen erlauben, diese Informationen für mich bereitzustellen. Wenn ich es auf der Grundlage der Vorteile, die sie bieten, selbst in ihrem Namen schreiben würde, dann würde ich natürlich eine zusätzliche Gebühr dafür berechnen. Wenn sie die Informationen zur Verfügung stellen, bin ich es nicht. Dies ist also nur eine weitere Gelegenheit, über und darüber hinaus zu gehen. Nur ein weiterer Webdesigner zu sein. Du musst das Copyright nicht selbst machen. Wenn Sie nicht gut im Schreiben sind, wie ich es bin, können Sie es immer noch auslagern, aber markieren Sie die Kosten für den Erhalt dieses bestimmten Inhalts geschrieben , und dann verdienen Sie zusätzliches Einkommen. Aber zur gleichen Zeit, Sie tun einen Service für Ihre Art, indem Sie Ihre Berufserfahrung, um sie wissen zu lassen , dass sie die Anzahl der Kunden oder Interessenten, die gehen, um sie zu kontaktieren, erhöhen können , indem Sie sie auf, warum sie sollte Geschäfte mit Ihnen machen. Wenn Sie diese Informationen nicht haben, es nur allgemeine Informationen. Ja, wir bieten solche Kredite an. Wir können eine Kreditgenehmigung in 60 Minuten machen, aber es sagt nicht wirklich, warum Sie Geschäfte mit uns machen sollten. Ja, Sie können eine Genehmigung in 60 Minuten erhalten, aber es muss andere Vorteile über uns hinaus geben, die Menschen dazu verleiten werden, Geschäfte mit ihnen zu machen . Sie könnten niedrigere Zinssätze im Vergleich zu ihrer Konkurrenz bieten. Und sie können erklären, dass wir Ihnen Hunderttausende von Dollar sparen werden, weil unsere Zinssätze niedriger sind als alle anderen in der Gegend. Das wäre ein Vorteil. Ein anderer wäre Ihr bei einer Auktion. Sie bei der Immobilie. Sie wissen bereits, dass Sie für diesen Kredit zugelassen sind. Aber Manhattan Bridge Capital könnte es noch einen Schritt weiter gehen und das Geld automatisch an den Auktionator überweisen , wenn Sie Ihr Angebot bestätigen oder annehmen, so dass es keine Verzögerung gibt, die Gelder zu diesem Auktionshaus zu bekommen. So können Sie den Besitz dieser Immobilien heute gegen Warten auf Brückenkapital nehmen, um ihnen einen Scheck zu senden oder was auch immer der Fall für diese bestimmte Firma sein mag, müssen Sie mit Ihrem Kunden kommunizieren, um herauszufinden, was sind die Vorteile von tun Geschäft mit Ihnen. Warum sollten Interessenten, die nichts über Sie wissen? Warum sollten sie Geschäfte mit Ihnen machen? Wenn Sie ihnen keinen Grund geben, warum sie Geschäfte mit Ihnen im Vergleich zur Konkurrenz machen sollten ? Nun, die Chancen stehen, dass du ihr Geschäft nicht bekommst, weil vielleicht deine Konkurrenz das gerade jetzt macht . Und das ist Teil Ihrer Forschung. Sie werden sich die Konkurrenz in ihrer Gegend ansehen. Sie werden die 4 bis 5 Konkurrenten und ihre Gegend aussuchen und herausfinden, was sie auf ihren Websites tun . Und wenn sie auf ihrer Homepage Vorteile anbieten, , dann ist das ein weiterer Grund für Ihren Kunden, dies auch zu tun, damit sie ihre Chancen erhöhen können, neue Kunden zu bekommen. Ich möchte nicht, dass dies nur ein weiterer Web-Design-Kurs ist. Jeder kann eine Website gestalten. Ich möchte mit Ihnen Tipps und Ideen teilen, wie Sie Ihr Ergebnis erhöhen können, aber zur gleichen Zeit helfen, Ihre Kunden verdienen eine höhere Rendite auf ihre Investitionen als auch wenn sie bekommen eine neue Website fertig. Der einfache Teil dieses Webdesigns besteht also darin, diese drei Elemente zusammenzusetzen. Was wir haben, wir haben einen Text, wir haben eine Überschrift, und wir haben ein Foto. Es ist so einfach, so etwas zu entwerfen. Es ist schwieriger, mit Ihrem Kunden darüber zu kommunizieren, warum Sie die spezifische Webseite machen und warum sie es haben sollten und das Endergebnis ist, fragen Sie einfach Ihren Kunden. Möchten Sie die potenzielle Zehe mehr Einkommen verdienen, indem Sie mehr Kunden haben? Natürlich werden sie ja sagen, sie wollen mehr Geschäft. Deshalb haben sie eine Website gemacht. Sie wollen mehr Einkommen generieren. Nun, basierend auf meiner beruflichen Erfahrung ist dies eine Möglichkeit, Ihre Dienstleistungen zu verkaufen, damit Sie sicherstellen können, dass Sie eine höhere Rendite Ihrer Investition erzielen und mehr Kunden sichern können, indem Sie den Leuten sagen, warum sie Geschäfte machen sollten mit dir. Alles klar, jetzt, da wir das überstanden haben, lassen Sie uns diesen speziellen Abschnitt entwerfen. Ich wählte ein Bild von der Innenstadt von New York oder Manhattan, und ich wählte eine Skyline, die es mir erlaubte, Inhalte darin zu platzieren, die auch mit dem Rest des Bildes ausbalanciert , mit einem hohen Gebäude auf der rechten Seite und zusätzlichen Gebäuden. Blase es, weil das ist, wo Manhattan Bridge Capital ihre Geschäfte macht, Manhattan oder Downtown New York. Also wollte ich sozusagen ein Bild aus ihrem Hinterhof holen . Also für dieses bestimmte Bild, Ich ging, um sbeih dot com zu wählen. Ich habe im New Yorker Gebäude getippt. Ich wählte vertikal für die Orientierung, weil ich etwas wollte, das ein sehr hohes Gebäude und nicht so sehr eine Landschaftsorientierung bieten würde . Also, als ich dieses eingetippt und vertikal ausgewählt habe, packte das zweite Bild hier meine Absicht. Ich mag die Farbe des Bildes. Es bietet eine Menge Skyline für unsere Steuer. Wir müssen es nur so beschneiden, dass unser großes Hauptgebäude hier rechts abläuft und der Inhalt links davon ist. Also, wenn Sie dieses Bild herunterladen möchten, gehen Sie vor und erstellen Sie ein kostenloses Konto und dann werden wir die Größe 12 80 von 1920 herunterladen . Und Sie können auch zu diesem bestimmten Link gelangen, indem Sie diese Nummer eingeben. Und es wird Sie direkt zur URL für dieses bestimmte Bild bringen. Sobald es heruntergeladen wurde, können Sie es dann per Drag & Drop in Ihr Dokument, also ist es eine ziemlich große Datei, aber es deckt nicht die volle mit unserer Webseite im Moment, und was ich will, ist ein vollständiges Beschnittbild, mit anderen Worten, Kanten der Kante. Also werden wir dieses Bild neu skalieren, aber wir müssen auch unsere Leinwand größer machen, weil wir hier unten nicht genug Platz haben . Also gehen wir voran und machen das zuerst. Indem Sie zum Bild gehen und Campus-Größe auswählen, stellen Sie sicher, dass die innerhalb der Höhe freigeschaltet ist und wir werden 5000 für die Höhe tun. Sobald Sie auf Ihre Registerkarte Key klicken, werden Sie die Vorschau direkt hier sehen. Und es wird all den zusätzlichen Platz zeigen, der deiner Leinwand hinzugefügt wird. Gehen Sie weiter und klicken Sie auf Größe ändern. Die andere Sache, die wir tun müssen, ist, dass wir unsere Hintergrundebene und weiß auf den Rest dieser Leinwand als auch greifen müssen . Also werde ich den Buchstaben D und X treffen, um weiß im Vordergrund zu werden, und dann mit dem Eimer gefüllten Werkzeug mit dem Buchstaben G kann ich voran gehen und das ausfüllen. Das einzige Problem ist, dass unsere Layer-Grenze auf die vorherige Höhe unseres Campus beschränkt ist, also gehen wir auf Ebene und wählen Ebene zu Bildgröße, und das erhöht die Grenze für diese bestimmte Ebene, und dann können wir sie füllen in. In Ordnung, also ist unser Bild drinnen sind mindestens drei Spalten für mich. Ich will es nicht da drin, also ziehe ich das raus und lass es uns auch darunter ziehen. In Ordnung, lassen Sie uns weitermachen und unser Bild mit unserem Fähigkeiten-Tool skalieren. Und die Leinwand ist derzeit 1400 Pixel weiß. Das ist es, was wir auch für das Bild tun werden. Und wenn es gesperrt ist, wird es automatisch die Höhe tun, die 2100 ist. Gehen Sie voran und skalieren Sie, und dann müssen wir unseren Leitfaden aktivieren, damit wir ihn in Position bringen und ihn mit der Richtlinie ausrichten können , die wir zuvor in einer vorherigen Lektion erstellt haben. Alles klar , das ist jetzt die Spitze. Das einzige Problem ist, ich hier links keinen Platz für meine Inhalte habe. Also möchte ich das eigentlich größer machen, damit das Gebäude nach rechts übergeht und uns offeneren Himmel gibt. Also lasst uns wieder unser Werkzeug zur Waage greifen. Dieses Mal werde ich die obere rechte Ecke hier verwenden, um zu klicken und zu ziehen, um es zu vergrößern. Also genau da, gehen Sie weiter und skalieren, und die Lektion, die wir tun müssen, ist, einen Hintergrund für unsere drei Spalten zu erstellen, so dass das Bild nicht in diesen Abschnitt blutet. Also lasst uns hier in unsere drei Spalten gehen. Lassen Sie uns eine neue Ebene mit dem Namen Hintergrund erstellen Klicken Sie, OK, und ich muss sie aus dieser Gruppenebene ziehen und sie darunter legen. Und dann werde ich mit meinem Eimerwerkzeug füllen. Und schließlich werde ich voran gehen und mein Rechteck auswählbar, damit ich diesen Teil der Webseite auswählen und den ganzen Weg nach unten scrollen kann, so dass wir den Hintergrund aus diesem Bereich entfernen können und dann weiter gehen und einfach auf Ihr Löschen klicken -Taste oder die Rücktaste, um diesen Teil des Hintergrunds zu entfernen. Können wir unsere Guides auswählen und ausschalten? Und jetzt haben wir unser Image an Ort und Stelle. In Ordnung, lassen Sie uns weitermachen und unser Textfeld und Problem erstellen. Wir brauchen unsere Führer gegen Wir wissen genau, wo es auf der linken Seite auszurichten, weil wir mit allen anderen Inhalten ausrichten wollten, erscheinen auch im Heldenbereich. Also werden wir es direkt auf dieser zweiten Anleitung platzieren, klicken und ziehen Sie so genau dort herum. Und das ist die Größe meines aktuellen Textes, Box 600 mal 9 78 Es muss nicht genau so groß sein Justus, solange es in diesem leeren Raum unseres Bildes hier ist, das wird gut. Es könnte ein bisschen zu groß sein. Ich brauche ein bisschen mehr Platz für meine Schlagzeile. Also werde ich das nur ein bisschen runterbringen. Kaylas Krabbe, unsere Bild-Ebene und erstellen Sie eine neue Ebene namens Textfeld. Klicken Sie auf. Okay, und dann füllen wir es mit White aus. Ich denke, ich möchte das Textfeld nur ein wenig Zeh abfärben. Lassen Sie etwas von diesem Bild dahinter kommen. Lassen Sie uns die Deckkraft ein wenig runter fallen. Ich werde gleich um 80 machen, also genau da ist ziemlich gut. Ich will nicht zu viel tun. Andernfalls wird es schwieriger, den Text zu lesen. Gehen wir weiter und greifen Sie unser Textwerkzeug und tippen Sie den Titel aus und lassen Sie uns Oswald fett machen. Lassen Sie uns 75 für die Größe tun, also sollte es gut sein und lassen Sie uns alle unsere anderen Ebenen ausschalten , damit wir unser Ausrichtungswerkzeug verwenden können, um die Überschrift direkt in der Mitte des Textfeldes auszurichten . Und bevor wir das tun, müssen wir auf Ebene gehen und beschnittene Inhalte auswählen und dann die Umschalttaste gedrückt halten, um die Überschrift auszuwählen. Und dann können wir das Zentrum des Ziels ausrichten. In Ordnung, als Nächstes fügen wir unsere Vorteile in unser Textfeld ein. Wir werden 56 oder vielleicht sieben Absätze hinzufügen, und was wir tun werden, ist, was als Dummy-Text bekannt ist. Dummy-Text ist also Text, der von Webdesignern verwendet wird, um ein Leerzeichen auszufüllen, das Inhalt erfordert oder haben sollte. Und es wird verwendet, um diesen Raum zu füllen, weil der endgültige Inhalt nicht vom Client zur Verfügung gestellt wird . Vielleicht sind sie eine brandneue Firma. Sie haben den Inhalt noch nicht, Also statt zu versuchen, etwas zu finden, das dort für sie hineingehen sollte, werden wir stattdessen Dummy-Text verwenden. Es ist also nicht lesbar und soll nicht gelesen werden. Es wird nur als Füllstoff verwendet. Ein anderer Name für Dummy-Text ist Laura um, Ipsum. Es ist der Industriestandard für Design-Mock Ups und Prototypen wie Web-Designs und, wie ich bereits erwähnt, ermöglicht es Ihnen, Kunden Ziel oder vollständige Version Ihres Designs zu zeigen ohne tatsächlich Zeit investieren zu müssen und Riel-Kopie zu entwerfen. Aber trotz aller Vorteile von Warm ipsum ist es nur zufälliger lateinischer Text, und es kann im Laufe der Zeit langweilig werden, weil es nicht wirklich lesbar ist. Und in gewisser Weise ist das OK, weil Sie wirklich nicht wollen, dass sich die Kunden auf den Inhalt konzentrieren. Sie möchten, dass sie sich auf das Design konzentrieren. Aber wenn Sie einen Client haben, der einen guten Sinn für Humor hat, Sie zu einer Google-Suche nach Dummy-Textgeneratoren, und Sie werden viele verschiedene Websites finden, die verschiedene Arten von Inhalten im Vergleich zu nur zufälligen lateinischen Inhalten anbieten . Und hier ist eine Liste von einigen der Optionen, die verfügbar sind. Du wirst Dummy-Text im Speck haben. Wenn Ihr Kunde Katzen mag, können Sie nicht ipsum Cupcakes und viele mehr tun. Es gibt einen für Bob Ross. Wenn Sie nicht mit ihm vertraut sind, ist er aus den achtziger Jahren. Ah, es gibt eine für Harry Lips es gibt eine für Harry Lips und viele mehr. Also einfach eine Google-Suche nach vier Dummy-Text-Generatoren, und Sie können einige dieser Arten von Laura Um em einige Generatoren als Füllstoff für Ihre Inhalte zu verwenden bekommen. Also werde ich einfach weitermachen und eine Google-Suche nach Laura machen. Ähm, hippe ein paar. Und dieser 1. 1 hier ist einfach ein alter, langweiliger lateinischer Text. Also gehen wir weiter und greifen vier oder fünf Absätze dieses Dummy-Textes. Wir werden es kopieren, und dann greifen wir unser Textwerkzeug und fügen es ein. Nun, die andere Sache, die wir wirklich schnell machen können, ist, dass wir hier unsere Werkzeugoptionen anpassen können. Also haben wir die richtige Größe des Textes, anstatt es hier oben wiederholen zu müssen. Also werde ich meine Größe hier unten auf 16 ändern. Ich ändere die Schriftart in Georgia, und ich werde die Farbe in diese dunkelgraue Farbe ändern, die wir zuvor benutzt haben. Was all diese drei Zahlen hier nicht jetzt ist, sobald ich einfüge, wird es am Ende die Schriftarten hinzufügen, die wir hier eingegeben haben. Die andere Sache, die wir tun müssen, ist, dass wir eine dieser Ecken greifen und weiterhin die Größe des Textes neu anpassen müssen , bis er in dieses Textfeld passt. Drücken Sie Befehlstaste oder Steuerelement Ende Null, um den ganzen Weg hinauszuzoomen, und das wird es einfacher und schneller machen, die Größe dieses Textfelds zu ändern. Also werde ich es einfach hier reinlegen, und lass uns weitermachen und wieder hineinzoomen. Nun gehen wir voran und ein Liegen, dass Text direkt in der Mitte unseres Textfeldes, wir greifen das Textfeld zuerst mit unserem Ausrichtungstool, halten Sie Ihren Schiffskey gedrückt und klicken Sie auf den Text und dann eine liegende Mitte und Mitte des Ziels . Die andere Sache, die ich tun möchte, ist, dass ich hier wieder in unseren Text gehe und die Größe der Titel jedes Absatzes ändern werde. Also werde ich 20 für die Größe tun und ich werde auch ein fett machen Ich werde auch ein Leerzeichen zwischen dem Absatz und dem Titel hinzufügen . Also lassen Sie uns das für jeden Titel tun, macht es einfach ein bisschen einfacher zu lesen. Und ich bin nicht so sehr besorgt darüber, dass der Text den gesamten Bereich nicht ausfüllt. Wir haben hier zusätzlichen Text, der über den unteren Rand unseres Textfeldes liegt, aber das ist in Ordnung. Wenn dies der eigentliche Text vom Client war, dann würde ich ein wenig mehr Zeit damit verbringen, das Textfeld die richtige Größe in den Schriftarten zu bekommen, die richtige Größe Zehe hat alles passen. Aber vorerst wird das gut funktionieren. Okay, gehen wir weiter und schalten unsere anderen Schichten wieder ein. Es gibt eine letzte Sache, die ich denke, wir sollten tun, und ich denke, wir sollten die Farbe dieses bestimmten Bildes abfärben, so dass es besser mit dem Rest der Website übereinstimmt. Es ist ein wenig zu warm, also möchte ich es straffen, indem ich ein Farb-Overlay hinzufüge. Also gehen wir weiter und greifen diese Bildebene. Benennen wir es Trade Center um, das ist der Name des Gebäudes selbst, dieses große hier. Und dann erstellen wir eine neue Ebene namens Color Overlay. Lassen Sie uns eine schöne blaue Farbe aussuchen. Jede Farbe Blau reicht, und dann füllen wir sie mit dieser Farbe aus und lassen Sie dann die Deckkraft auf etwa 15 bis 20 fallen . Und ich denke, das hilft definitiv, das Bild ein wenig abzukühlen. Es ist also nicht so warm, und es passt besser zum Rest der Website. Also wieder, Gestaltung dieses Teils der Website Super einfach. Es ist nur eine Frage der Kommunikation mit unseren Kunden, warum sie diesen speziellen Abschnitt auf ihrer Website benötigen und wie er ihnen nicht nur auf lange Sicht zugute kommt, sondern es wird es den Interessenten leichter machen, zu entscheiden, ob sie Geschäfte mit sie gegen jemand anderen. Und wenn diese Vorteile, die sie zu bieten haben, nicht von der Konkurrenz angeboten werden, dann sind die Chancen gut. Sie werden jetzt ihr Geschäft sichern. In der nächsten Lektion erstellen wir einen weiteren Abschnitt für diese bestimmte Webseite, Besuchern hilft, festzustellen, ob sie mit diesem Unternehmen Geschäfte machen wollen oder nicht. Und in gewisser Weise wird es auch Manhattan Bridge Capital helfen. Denn was wir tun werden, ist ein F A Q Abschnitt hinzuzufügen, und wir werden ihre am häufigsten gestellten Fragen nehmen und sie jetzt für diese Interessenten beantworten , damit diese Fragen beantwortet werden, bevor sie Manhattan Capital kontaktieren, was in wiederum spart ihnen Zeit davon, diese Fragen nicht am Telefon oder persönlich zu beantworten. Also, wenn du bereit bist, damit anzufangen, lass es uns tun 37. Körperteil 2: Hallo und willkommen zurück. Alles klar, in dieser Lektion werden wir unsere häufig gestellten Fragen erstellen, und dies wird ein paar Vorteile für die Besucher der Website und Vorteile für Ihren Kunden bieten . Für die Besucher, es wird ihnen einfachen Zugang zu Antworten auf Fragen, die sie haben werden bevor sie diesen Schritt des Kaufs von diesem bestimmten Unternehmen. Und dann können sie entscheiden, ob sie auf der Grundlage der Antworten, die sie von hier bekommen, zum nächsten Teil des Kaufentscheidungsprozesses übergehen wollen. Soweit Ihr Kunde geht, hilft es ihnen, weil eine, die sie nicht haben, um diese Fragen persönlich oder am Telefon oder einer E-Mail zu beantworten , und irgendwie, in gewisser Weise prequalifiziert einen Interessenten. Denn wenn ein Interessent diese Antworten auf diese spezifischen Fragen bekommt und sich dazu entscheidet weiterzumachen, während er an dem interessiert ist, was Sie zu bieten haben, was Ihr Kunde zu bieten hat, weil er sich nicht entschieden , weiterzumachen, während er an dem interessiert ist, was Sie zu bieten haben, was Ihr Kunde zu bieten hat, weil er sich nicht entschiedenhat. Ich mag diese Antworten nicht. Ich werde ein paar Ergebnisse machen. Sie mögen die Antwort, also wollen sie mit dem Kaufentscheidungsprozess fortfahren, um Geschäfte mit Ihrem Kunden zu machen . Also für dieses Design ist es wirklich einfach. Wir haben einen Text. Wir haben eine Schlagzeile. Wir haben eine Schaltfläche, wir haben ein Textfeld, das die Frage enthält, und dann werden wir auch einen Hover-Zustand erstellen, der zeigt, was passiert, wenn Sie auf dieses kleine Symbol klicken hier. Es wird sich tatsächlich erweitern, um die Antwort darunter zu enthüllen, und wir werden es entwerfen und auf eine Weise einrichten. Der Entwickler weiß also, dass dies ein Hover-Zustand ist und was passieren wird, wenn auf die Schaltfläche geklickt wird, bevor wir mit dem FAA-Abschnitt beginnen, werden wir weitermachen und einige Anpassungen an unserem Raster vornehmen. Lier sowie organisiert sind Ebenen aus dem vorherigen Abschnitt, also müssen wir unser Raster bis zum Ende der Seite erweitern, und wir werden das mit unserem Skalierungswerkzeug tun. Ich werde 5000 für die Höhe eingeben, und wir müssen auch diese Schichten organisieren. Also lasst uns sie in eine neue Layergruppe namens „Warum Manhattan? In Ordnung, gehen wir weiter und beginnen mit dem FAA Abschnitt mit unserem Textwerkzeug. Wir werden unsere Überschrift erstellen, und wir werden Oswald Bowled 72 für die Farbe verwenden, ich werde unsere grüne Farbe wählen, die wir während dieses Projekts verwendet haben, und dann in allen Hauptstädten eines Q und Kleinbuchstaben s Alles klar, Lassen Sie uns dies hier auf der linken Seite ausrichten, um es mit allen anderen Inhalten im Heldenbereich auszurichten . In Ordnung, lassen Sie uns unsere erste Fragebox erstellen, und wir werden es sechs Spalten breit machen, weshalb wir das Raster erweitert haben, um es uns etwas einfacher zu machen. Also lassen Sie uns voran und greifen Sie unser Rechteck-Auswahlwerkzeug und deaktivieren Sie fest und erstellen Sie es dann einfach sechs Spalten breit, und ich möchte auch die Höhe ändern, so dass es 67 Pixel ist und wir eine neue Ebene erstellen müssen . Nennen wir es Fragetextfeld und lassen Sie uns das mit Weiß ausfüllen, und ich möchte auch einen Strich zur Auswahl hinzufügen. Also lassen Sie uns gehen, um zu bearbeiten und wählen Sie Strichauswahl. Ich werde eine Linie mit einem machen, und ich muss auch sicherstellen, dass ich schwarz in den Vordergrund gestellt habe und wir jetzt unseren Schlaganfall haben . Lassen Sie uns voran und zoomen Sie hinein und stellen Sie sicher, dass dies richtig mit allem anderen ausgerichtet ist . Es sieht so aus, als wäre es ein wenig aus, also werde ich mein Werkzeug greifen und darauf klicken und dann meine rechte Pfeiltaste verwenden, um es zu bewegen . Und mal sehen, ob sich die rechte Seite in dieser Spalte befindet. Ist es nicht. Wir wollen eine perfekte Pixelausrichtung, und wir werden die Größe mit unserem Skalierungswerkzeug ändern. Aber zuerst müssen wir auf Ebene gehen und den Inhalt zuschneiden auswählen, und dann können wir unser Skalierungswerkzeug in der Seite greifen, um es zu ziehen. In Ordnung, lassen Sie uns fortfahren und unsere Schaltfläche für dieses bestimmte Textfeld erstellen. Also zurück zum Rechteck-Auswahlwerkzeug. Dieses Mal gehe ich zurück und wähle ein festes Seitenverhältnis und lass uns voran gehen und tippen. Lassen Sie uns 42 für die Größe tun. Ich möchte auch abgerundete Ecken hinzufügen und wir gehen nach oben, um abgerundetes Rechteck auszuwählen, und ich werde 20 für den Radius für meine abgerundeten Ecken tun, und dann werde ich eine hellblaue Farbe greifen, um es auszufüllen. Und bevor wir das wirklich schnell machen, müssen wir eine neue Ebene erstellen. Nennen wir es Frage Taste die Auswahl und lassen Sie uns weiter gehen und unser Auswahlwerkzeug wieder greifen so dass wir es direkt in der Mitte dieser Spalte ausrichten können. Lassen Sie uns fixiert abschalten, damit wir das direkt in den Ort bringen können. Wir brauchen sie. Alles klar, lassen Sie uns diese Ebenen ausschalten. Hier können wir es mit unserem Ausrichtungswerkzeug auswählen. Und bevor wir das wieder tun, müssen wir auf Ebene gehen und ausgewählte Zuschnitt zum Inhalt. Und dann müssen wir sicherstellen, dass wir Auswahl ausgewählt haben und dann eine Linie Mitte und Mitte des Ziels. In Ordnung, gehen wir zurück zu unserem Textwerkzeug, damit wir ein kleines Symbol hinzufügen können. Ich tippe einfach ein Pluszeichen aus, und ich werde es auch auf Weiß ändern. Also wieder, ich benutze Oswald bowled 72 und jetzt müssen wir es nur in Position bringen. Also dieses Mal werde ich nur meine Pfeiltasten benutzen, um es direkt in die Mitte zu setzen. In Ordnung, lassen Sie uns weitermachen und eine neue frühere Gruppe für diese beiden Ebenen erstellen. Nennen Sie es Frage Taste. Und jetzt werden wir weitergehen und unsere Frage austippen. Ich werde die Schrift in Georgia ändern. Lassen Sie uns 18 für die Größe tun und dann sind dunkelgraue Farbe. Und dann tippen Sie einfach eine Frage aus, die ich tun werde. Wie hoch ist Ihr 90-Tage-Zinssatz? Willst du das eigentlich größer machen? Ich werde 24 Punkte machen. Okay, lassen Sie das einfach in Position bringen, genau da sollte es gut sein. Werfen wir einen Blick auf unsere Anleitung. Also ist es genau an diesem Rand dieser Spalte. Das ist perfekt. Ich muss nur sicherstellen, dass es perfekt zentriert ist, auch von oben nach unten. Lassen Sie uns also voran gehen und unsere Auswahl treffen, damit wir das tun können. Und wenn nötig, zog diese Schicht nach draußen, Sie können es wählen und dann eine liegende Mitte des Ziels. Okay, das ist also ausgerichtet. Geh weiter und stell das wieder rein. Ok. Der nächste Schritt besteht darin, unsere zusätzlichen Fragetextfelder zu erstellen, aber zuerst müssen wir diese in eine neue Ebenengruppe einfügen. Und nennen wir es Frage, die man kann. Wir werden all diese Schichten setzen und unterschreiben, außer dem F a Q das wollen wir nicht da rein, denn das ist getrennt. Also werden wir das eigentlich an die Spitze stellen und ich mache es vorerst aus . Und gehen wir weiter und greifen unsere Frage eine gruppierte Ebene und dupliziert dreimal. Ok, was? Sie sind zu was bewegt? Wir werden nur jede Ebene auswählen und nach unten. Ich denke, ich möchte diese etwas näher bringen, und dann werden wir unser Ausrichtungstool benutzen, um den Raum gleichmäßig zwischen ihnen zu verteilen . Aber ich denke, wir haben ein kleines Problem, weil ich an der Ebenengrenze jetzt feststellen kann, dass es außerhalb unseres Textfeldes liegt. Sollte hier oben und unten sein. Und ich denke, das liegt an unserem kleinen Pluszeichen, das wir geschaffen haben. Wir können sehen, dass es viel größer ist als der Rest der Box, also werden wir gehen und jede dieser Ebenen greifen und den Ebeneninhalt auf die tatsächliche Größe dieses bestimmten Elements zuschneiden . Gehen wir also in jede dieser Fragen ein und machen Sie das. In Ordnung, jetzt, da wir das getan haben, können wir sehen, dass die Layer-Grenze jetzt genau dort platziert ist, wo wir sie wollen. Gehen wir weiter und treffen Sie unsere Auswahl mit unserem Ausrichtungstool. Halten Sie die Umschalttaste gedrückt und lassen Sie los und drücken Sie erneut die Umschalttaste für jedes Element. Und dann gehen wir zu relativ zum ersten Element, und dann werden wir diese Option hier wählen, um vertikale Zentren zu verteilen. Das einzige Problem ist, dass sie sich alle überlappen und sich jetzt am selben Ort befinden. Also machen wir das rückgängig mit Commander Control und den Buchstaben A und was wir tun müssen, ist, dass wir Gimp sagen müssen, wie viele Pixel wir den vertikalen Raum versetzen wollen. Versuchen wir also 100 und wählen Sie dann diese Option hier erneut aus. Und jetzt ist es perfekt eine gleichmäßige Menge an Platz zwischen jeder Frage hinzugefügt. Wenn wir diese Zahl in etwas anderes ändern, das die Menge an Platz erhöhen wird, dann bleiben wir bei 100 für jetzt, weil ich denke, das wird gut funktionieren. Die andere Sache, die ich tun möchte, ist sicherzustellen, dass sich jeder dieser Gruppen-Layer an der richtigen Position befindet, und dann werde ich jede dieser Ebenen umbenennen. Frage zwei bis vier. nun Nehmen wirnundiese vier Schichten und legen sie in eine neue frühere Gruppe. Ich werde es jetzt nicht umbenennen, weil wir nur diese Gruppe nehmen und Zehe duplizieren werden. Fügen Sie vier weitere Fragen auf der anderen Seite hinzu. Fall nimmt diese Ebenengruppe, dupliziert sie und dann können wir sie nach rechts verschieben. auch mein Gitter eingeschaltet, damit ich sehen kann, wohin es geht. Also, genau da, da gehen wir. Ich werde diese Layer-Gruppe von oben setzen und tatsächlich, gehen wir weiter und ändern den Namen des hier auch. Fragen. Also haben wir unsere eins bis vier, und dann nehmen wir diese Ebenengruppen hierher und legen sie hier rein und benennen sie dann fünf bis acht um. Und das brauchen wir nicht mehr. Etwas geht voran und löscht das auch. Können wir hier nur ein bisschen unsere Schichten organisieren müssen? Ich werde hier auch einige meiner anderen Schichten einschalten. Lass uns sie alle für den Nagel einschalten. Wahrscheinlich ein guter Zeitpunkt, um es zu retten. Also werde ich mit Commander Control und dem Brief sparen. Jetzt müssen wir nur alles aufklären, weil wir hier oben zu viel Platz haben. Also werde ich den Raum hier messen, Toe Fügen Sie das auch unten auf der Manhattan-Seite hinzu. Also lasst uns unser Messwerkzeug greifen. Und lassen Sie uns eine Messung von hier bis hier machen, und es sieht aus wie 75 Pixel. Also werde ich die gleiche Menge an Platz hier hinzufügen. 75 Pixel. Ich war bei einem Führer dort, und dann sind wir einfach los und bewegen alles nach oben. Alles klar, gehen wir weiter und machen eine weitere Messung. Ich möchte herausfinden, wie viel Platz hier ist. Also lassen Sie uns das messen. Also habe ich 32 Pixel. Deiner könnte anders sein. Das ist in Ordnung. Messen Sie es einfach, finden Sie es heraus. Und dann von der Unterseite des Q. Messen Sie, wie viel Platz Sie brauchen. Ich hatte 32 und dann werden wir unsere Fragen direkt an diesem Leitfaden stellen. Okay, sind auch gefälscht. Ihr Abschnitt ist fertig. Wir müssen keinen Hover-Zustand erstellen, damit unsere Kunden und unsere Web-Entwickler wissen, was der Code. Wenn eine Person auf diese kleine Schaltfläche klickt, wird es ein Textfeld mit der Antwort auf die Frage öffnen. Und da dieses spezielle Tutorial ziemlich lang wird, werden wir es in der nächsten zwei Tour in Teil zwei aufteilen. Alles in Ordnung? Wenn Sie also dazu bereit sind, gehen wir weiter und fahren Sie in der nächsten Lektion fort. 38. Körperteil 3: Hallo und willkommen zurück. In Ordnung, also werden wir weitermachen und unseren F A Q Abschnitt mit unserem Hover-Zustand beenden, der die Antwort auf unsere Fragen anzeigt. Das erste, was wir tun müssen, ist eine neue Lear-Gruppe für den aktuellen Teil von R. F. F. A Q-Abschnitt zu erstellen. Nennen wir es F A. Q. Lassen Sie uns diese beiden hineinlegen, und gehen wir weiter und navigieren zu unserer ersten Frage und duplizieren sie. Benennen wir es „Antwort“ um, und wir werden es den ganzen Weg rausziehen. Hand über der F A Q. Gruppierte Schicht. In Ordnung, lassen Sie uns also einige Änderungen an dieser bestimmten Ebene oder den Ebenen vornehmen. Wir möchten das Plus-Symbol auswählen, das wir zuvor erstellt haben. Lassen Sie uns voran und zoomen Sie hier, damit wir sehen können, greifen Sie Ihr Textwerkzeug und klicken Sie darauf. Also bekommen wir eine kleine Nachricht von Gimp gefragt, ob wir unseren Text bearbeiten wollen. Wir klicken darauf und erinnern uns an den Grund, warum wir das bekommen haben, weil wir die Layer-Grenze geändert und auf das Symbol selbst zugeschnitten haben. Also lassen Sie uns voran und wählen Sie alle mit Kommandantensteuerung und einem Lasst uns es in ein Minuszeichen ändern und es in Weiß ändern und dann gehen wir einfach voran und greifen unser Move-Werkzeug und setzen es in Position. Also werde ich nur meine Pfeiltasten verwenden, um es visuell direkt in der Mitte zu platzieren. Genau da sollte es gut sein. Und jetzt müssen wir nur noch unser kleines Hover-Hand-Symbol in diesem Bereich hier hinzufügen. Also gehen wir zu Google und machen eine Hover-Zustand Hand Icon Suche. Und dann wollen wir etwas PNG und Zeiger. Und ich glaube, der, den ich gefunden habe, ist dieser hier. Es ist eine PNG-Datei, also werde ich voran gehen und das kopieren und einfügen. Also haben wir eine schwebende Auswahl, so brauchen wir toe und es auf eine neue Ebene, indem Sie mit der rechten Maustaste klicken und zwei neue Ebene auswählen. Lassen Sie uns dieses Hover-Symbol umbenennen. Es ist auch viel zu groß, Also werden wir es mit unserem Skalierungswerkzeug und für die Höhen nach unten skalieren. Gehen Sie voran und verknüpfen Sie dies für die Höhe. Ich werde 40. Ich werde Ebene auswählen, um den Inhalt zu beschneiden. Klicken wir auf die Skalierung. Alles klar, jetzt, da es verschwunden ist, lasst uns den ganzen Weg hinauszoomen mit Commander Control und Null da ist es. Solange Sie aktiv verschoben oder ausgewählt und mit dem Mauszeiger Lear ausgewählt haben, können Sie es finden. Setzen Sie es hier in Position und wir sind fast fertig. Lassen Sie uns voran und erstellen Sie unser Antwort-Textfeld. Wir erstellen ein Feld, füllen es mit Text aus und wir sind fertig. Gehen wir also weiter und gehen Sie nur für einen Moment außerhalb unserer Antwort gruppierten Ebene, und wir werden eine neue früher erstellen und nennen es Antwort-Textfeld und zeichnen Sie dann einfach ein Rechteck aus, das alle drei anderen Fragen darunter abdeckt. Und dann mit Weiß wird es ausfüllen, und wir wollen auch einen Strich um ihn herum hinzufügen. Also lassen Sie uns gehen, um zu bearbeiten und wählen Sie Strichauswahl. Ich ändere den Vordergrund zurück in Schwarz und füge meinen Schlaganfall hinzu. Kate. Lassen Sie uns de auswählen und ich muss mein Verschiebungswerkzeug auswählen und darauf klicken und dann meine Pfeiltasten verwenden , nur um es über ein wenig zu bewegen. Genau da sieht gut aus. Und jetzt bin ich etwas zu weit auf der rechten Seite. Lassen Sie uns also voran gehen und beschneiden, um die Layer-Grenze zu bedenken. Und dann mit unserem Geschicklichkeitswerkzeug, werden wir es nur ein wenig unter gehen voran und tippen Sie in 305 und , das zu versuchen, drei oder 43 oder vier Werke. Skalieren Sie es. Perfekt. Okay, lassen Sie uns hier rauszoomen, gehen wir weiter und legen das jetzt rein. In Ordnung. Vier. Unsere Antwort. Wir fangen mit einem großen Buchstaben an, einer ganzen Großbuchstaben, und ändern wir das in Grün. Setzen Sie ein wenig Zeit auf das Ende, und ich werde das einfach in Position bringen. In Ordnung? Lasst uns weitermachen und einen Dummy-Text finden. Ich möchte etwas Speck hinzufügen. Es ist, ähm, also werde ich zwei Absätze machen. Es wird alles Fleisch sein und lasst uns auf „ Gib mir etwas anfangen“ klicken . Alles klar, das ist wahrscheinlich zu viel Inhalt. Also werde ich voran gehen und den ersten Absatz beschreiben. Kopieren Sie das, und dann füge ich das hinzu. Also, anstatt einfach zu klicken und Tempo, lassen Sie uns ein Textfeld erstellen, in dem wir wollen, dass der Text sein soll, so werde ich klicken und ziehen Sie ein Textfeld direkt hier und jetzt kann ich das Tempo in und wir müssen uns keine Sorgen darüber machen, dass das Textfeld neu dimensioniert wird. So kleine Dinge. Ich werde dir neue Tipps und Techniken für die Arbeit mit Gimp vorstellen. Gehen wir weiter und ändern Sie die Zeichen auf 16. Lass uns etwas größer gehen. 17. Ich möchte es ausfüllen, um 18 zu versuchen. Perfekt. Also 18 funktioniert, aber es ist die falsche Schrift. Gehen wir nach Georgia und ich gehe hier runter und füge etwas oder Inhalt ein, was alles ausfüllt. Und sie will ich diese Kiste etwas kleiner machen. Es regnet dieses angefangene Ipsum, und jetzt müssen wir es nur ausrichten. Es befindet sich also direkt in der Mitte von oben und unten im Antworttextfeld. Sagen Sie das zehnmal schnell. Alles klar, lassen Sie uns eine Auswahl ausmachen. Also, genau da sollte gut sein. Lassen Sie uns unser Ausrichtungswerkzeug greifen und es in Auswahl ändern. , Ich bin mir nicht sicher,ob ich das auswählen kann, also werde ich es versuchen. Sieht nicht so aus. Also lasst uns das den ganzen Weg rausziehen. Versuchen Sie es noch einmal. Nein, wir müssen alle unsere Ebenen ausschalten, um unsere Ausrichtungsauswahl zu treffen. Und jetzt können wir voran gehen und eine Linie Mitte des Ziels. Wir wählen aus und lassen Sie uns alles andere wieder einschalten. Und dann gehen wir weiter und legen sie wieder rein. Jetzt habe ich ein bisschen eine blaue Farbkaste anstelle von reinem Weiß. Und das ist wegen der Farbebene, die wir innerhalb der Manhattan-Abteilung erstellt haben. Und was wir tun müssen, ist, dass wir eine Ebenenmaske hinzufügen müssen, damit wir diesen Farbstich aus dem Rest des Dokuments hier unten entfernen können . Oder wir können die Schichtbegrenzung zu diesem Abschnitt zerquetschen. Also lasst uns weitermachen und das tun. Stattdessen. Lassen Sie uns voran und erstellen Sie eine Auswahl um sie herum und gehen Sie dann auf die Ebene und wählen Sie Zuschneiden zur Auswahl de auswählen, und jetzt ist unsere Zuschneide-Layer-Grenze auf diese Größe festgelegt, und es hat diese Farbüberlagerung aus dem Rest des Dokuments entfernt. Jetzt möchte ich das nur ein wenig aufräumen, weil ich ein bisschen Text hier gezeigt habe . Gehen wir also zurück in diese Textebene und löschen Sie den gesamten Inhalt. Ok? Unsere Rubrik ist jetzt fertig. Wir haben unseren Schwebezustand. Wir haben alle unsere Fragen. Und wenn ich das meinen Klienten vorstelle, werde ich diesen Hover-Zustand sichtbar lassen, damit sie wissen, wie es aussieht, wenn jemand klickt Luft schwebt über diesen bestimmten Bereich. Und wenn wir es dann an den Webentwickler senden, werden sie auf diese gruppierten Ebenen stoßen und erkennen, dass dies ein Hover-Zustand ist und jede der Fragen entsprechend codiert, basierend auf den Informationen, die wir ihnen in unser Design. Ordnung, also im nächsten Tutorial, werden wir weitermachen und anfangen, an der Connect-Abteilung zu arbeiten. 39. Körperteil 4: Hallo und willkommen zurück. Alles klar, in dieser Lektion werden wir uns mit der Gestaltung des Abschnitts „Kontakt mit uns“ befassen. Jetzt. Sie hatten eine Kontakt-US-Seite, auf die Sie gehen konnten, um ein Formular auszufüllen, und dann rufen Sie zurück oder mailen Sie zurück und dann auf ihrer Homepage. Sie hatten sowohl die Adresse für ihr Büro als auch ihre Telefonnummer, aber es ist irgendwie hier unten auf der linken Seite gestopft. Es ist ziemlich schwer zu lesen, und insgesamt finde ich es für potenzielle Kunden sehr schwierig, dieses Unternehmen zu kontaktieren. Also wollen wir es so einfach wie möglich machen und ihnen eine Zeman E Optionen geben. Also habe ich alles an einem Ort platziert, anstatt es alles aufzuteilen, also haben wir eine Möglichkeit, sie zu mailen. Wir haben ihre Adresse. Wir haben ihre Telefonnummer und die beste Zeit, um anzurufen, weil ihre Büros zwischen diesen Zeiten geöffnet sind. Ich habe auch eine Google-Karte ihres Büros aufgenommen, so dass sie Anweisungen direkt von diesem Abschnitt der Website erhalten können . Also all diese Dinge, einschließlich dieses kleinen ehemaligen hier, wenn sie einfach eine E-Mail senden und eine oder zwei Fragen stellen wollen. Oder vielleicht wollen sie sie einfach nur kontaktieren. Hier, bitte. Rufen Sie mich zu diesem Zeitpunkt an. Was auch immer der Fall sein mag, ich möchte es nur für Interessenten oder bestehende Kunden so einfach machen, sie zu kontaktieren, anstatt sie in separate Seiten aufzuteilen, wie sie es hier getan haben, wo sie eine Kontaktseite haben. Und dann hier drüben haben Sie irgendwie die Suche nach den Kontaktinformationen. Es ist nicht wirklich ein guter Ort, um es auszudrücken, weil Sie hier auf der linken Seite nicht wirklich Kontaktinformationen erwarten. Du willst zuerst mehr über die Firma erfahren und dann okay, ja. Ich mag diese Firma. Ich möchte sie kontaktieren. Nun, ja, hier ist alles in Ordnung. Aber wieder, es ist nur ein sehr, sehr schlechtes Design und ein schlechtes Layout. Und ich finde das viel einladender und einfacher für Interessenten oder Kunden, die Informationen zu erhalten, die sie benötigen, weil sie vielleicht direkt das Büro besuchen wollen, anstatt anzurufen oder per E-Mail zu mailen. Vielleicht sind sie in der Gegend, und sie können einfach schnell eine Wegbeschreibung von der Website hier bekommen. Lassen Sie uns also voran gehen und dieses Design zusammensetzen. Es besteht größtenteils aus Formen, so dass es wirklich einfach zu entwerfen und zusammenzustellen sein wird. Wir müssen nur einige Symbole und dann ein Bild von Google Maps finden. Also gehen wir voran und machen das zuerst. Gehen Sie weiter und gehen Sie zu Google. Geben Sie kostenlose Business-Symbole ein und laden Sie einige Icons für E-Mail herunter. Finden Sie uns und rufen Sie uns an, so verwenden Sie die jeder ist Sie wollen. Ich empfehle die Verwendung von PNG-Dateien, da wir eine Farbüberlagerung im Vergleich zur Verwendung von Symbolen hinzufügen , die vorfarbige oder schwarz-weiße Symbole zeigen. Dann können Sie auf Google Maps gehen und 60 Fräser Straße Nummer 205 eingeben und hier ist die Postleitzahl genau hier. Also geh voran und tippe das ein. Du solltest so etwas bekommen. Und dann habe ich es etwas verdichtet, damit ich etwas in einem horizontaleren Format haben konnte . Und dann habe ich nur einen Screenshot Plug benutzt, um zu erfassen, und dann habe ich es kopiert und meinem Dokument hinzugefügt. Also gehen Sie los, laden Sie diese Bilder herunter und wir gehen weiter und beginnen. Okay, jetzt, da wir unsere Symbole und unsere Google-Karte haben, Lasst uns weitermachen und unseren Kontaktbereich beenden. Das erste, was ich tun möchte, ist, dass ich diese Symbole und eine Farbüberlagerung nehmen möchte, um die Farbe von Schwarz zu einer bestimmten Farbe zu ändern. Das Problem ist, und gimp, wir haben kein Farb-Overlay-Werkzeug. Aber das ist okay, denn ich werde dir zeigen, wie du deinen Icons ein Farb-Overlay hinzufügst. Also das erste, was ich tun werde, ist mein Kartensymbol oder mein Adresssymbol zu greifen und ich habe diese auch in der Reihenfolge platziert , je nachdem, wo sie positioniert werden, und ich habe sie entsprechend umbenannt. Also, wenn Sie das nicht getan haben, machen Sie das als Nächstes. Wir werden weitermachen und eine neue Ebene erstellen. Ich werde es Farbüberlagerung nennen. Und dann werde ich meine Farbauswahl hier verwenden, um das Blau von dieser Schaltfläche auszuwählen, und dann füllen wir es mit unserem Eimerfüllungstool aus. Alles klar, nächste Schritt ist, in unseren Mischmodus zu gehen und einen der Modi auszuwählen, und wir werden Addition und Bam wählen. Sieh dir das an. Wir haben jetzt eine Farbüberlagerung für jedes Symbol. Wie cool ist das? Das einzige Problem ist, dass die Farbüberlagerung zu allen darunter liegenden Ebenen hinzugefügt wird. Unsere Google Maps hat also auch dieses Farb-Overlay. Es gibt also eine einfache Lösung dafür. Und wir sprachen darüber, wie man dies macht. Zuvor, wie man eine bestimmte Farbe auf bestimmte Ebenen beschränkt . So erinnern Sie sich wahrscheinlich schon, wie Sie das tun. Was heißt, das ist richtig. Wir werden nach oben gehen und eine neue Ebenengruppe erstellen. Nennen wir es Farbüberlagerung. Und wenn wir dann alle Ebenen darin platziert haben, wird diese Farbüberlagerung nur auf die Ebenen innerhalb dieses Gruppenspielers angewendet. Wie cool ist das? Alles klar, ich liebe es. Okay, das nächste, was ich tun möchte, ist, dass wir diese Schichten greifen und sie einfach ein wenig nach unten bewegen . Ich möchte unsere Überschrift für diesen Abschnitt hinzufügen, also gehen wir in F.A . Q . Wir werden die F A Q-Textebene auswählen, und wir werden sie duplizieren. Lassen Sie uns voran und ziehen Sie das aus diesem Gruppenspieler und legen Sie es über die Farbüberlagerungen. Schließen wir F a Q und lassen Sie uns diesen Kontakt umbenennen. Und jetzt müssen wir nur unsere Ebene mit unserem Verschiebungswerkzeug greifen und sie nach unten verschieben. Ok. Jetzt, mit ihren Textilien wird voran gehen und diesen Kontakt umbenennen. Lass uns alle Hauptstädte machen, und ich denke, wir müssen an unserem Abstand etwas arbeiten. Ich möchte sicherstellen, dass wir für Konsistenz hier und hier einen gleichen Abstand haben. Aber ich möchte auch zu unserer Manhattan-Überschrift gehen, um die Messung hier zu finden weil ich denke, wir haben hier weniger Platz im Vergleich zu diesem Bereich hier unten. Und wir haben vorher eine Messung durchgeführt, aber ich möchte die Dinge etwas verschärfen, und ich möchte die gleiche Menge an Platz nutzen, die wir hier haben. Also lasst uns unser Messwerkzeug greifen und von oben in diesem Abschnitt bis zum Anfang dieses Buchstabens messen und ich habe 57 Pixel Platz. Deiner kann anders sein. Das ist in Ordnung. Messen Sie es einfach aus, denn wir werden es hier messen und eine neue Richtlinie hinzufügen . Ich gehe zurück zu meinem Umzugswerkzeug, und ich muss eine Ebene oder einen Führer auswählen, damit ich diesen Kerl loswerden kann, den wir zuvor hatten . Also werde ich das einfach nach oben ziehen. Ich kann das auch loswerden, denn wir werden jetzt alles auf diese Richtlinie bringen. Also zurück zum Verschieben, Werkzeug und wählen. Verschieben Sie die aktive Ebene, und stellen Sie sicher, dass Sie den F A Q Gruppenspieler ausgewählt haben. Also, wenn Sie das packen, können Sie voran gehen und das nach oben in Position bringen. Und wenn nötig, können Sie auch Ihre Pfeiltasten verwenden, um alles ausgerichtet zu bekommen, wo es sein sollte. In Ordnung, wir gehen weiter und gehen zurück zu unserem Messwerkzeug und machen eine weitere Messung von unten in diesem Abschnitt mit der gleichen Anzahl von Pixeln wie zuvor, um unseren Kontaktabschnitt Raid entlang dieser Linie zu platzieren . Also lasst uns weiter gehen und eine andere Richtlinie schnappen. Platzieren Sie es dort, und dann können wir unsere Kontaktebene in Position bringen. Okay, wir werden jetzt an unseren Formen arbeiten und an den Abständen arbeiten. Sobald wir alles aufgestellt haben, werde ich nur für einen Moment mein Gitter einschalten. Also, weil wir ein 12-Säulen-Gittersystem verwendet haben. Wir können jeden dieser Abschnitte in vier Spalten und mit teilen. Also lassen Sie uns unser Messwerkzeug verwenden, um das mit dieser vier Spalten in seinen 375 Pixeln herauszufinden . Jetzt, mit unserem Rechteck auswählbar, werden wir sicherstellen, dass wir mit Seitenverhältnis eingeschaltet haben, und wir werden eine Form zeichnen und dann 3 75 eingeben Wir müssen eine neue Ebene erstellen bevor wir sie ausfüllen mit Farbe. Also lasst uns das machen. Rufen wir diese eine Adresse an. Lassen Sie uns eine helle Farbe Grau auswählen. Jede Farbe ist in Ordnung. Gehen Sie einfach voran und wählen Sie eine aus und füllen Sie sie dann mit Ihrem Eimerfüllwerkzeug aus. Lassen Sie uns auch einen Strich hinzufügen, indem Sie nach oben gehen, um die Strichauswahl zu bearbeiten, und wir müssen sicherstellen, dass wir schwarz für die vier Gramm haben und dann diesen Strich hinzufügen. Okay, ich hole mir einfach mein Umzugswerkzeug. Ich muss zuerst mit Commander Control und D wählen und das rüber bewegen. Die andere Sache, die ich tun muss, ist, dass ich die Layer-Grenze beschneiden muss, also gehen wir weiter und tun das. Gehen Sie auf Ebene beschädigte Inhalte, und dann werden wir das direkt in Position bringen. Da wir hier sind, lassen Sie uns unsere Abstände messen, und ich möchte eine gleiche Menge an Platz, die wir von hier für hier haben. Also mit unserem Messwerkzeug, lassen Sie uns voran und messen Sie von unten im Q Teoh hier, und ich habe 34 Pixel, einige, um voranzugehen und das auszumessen. Gehen Sie weiter und zoomen Sie hinein, damit ich eine bessere Messung erhalten kann. Fügen wir ihren Führer hinzu, und dann können wir fortfahren und diese Box in Position bringen. Gehen wir voran und verschieben Sie diese bestimmte Ebene. Im Folgenden finden Sie auch Symbole. Okay, gehen wir weiter und nehmen unsere Adressform und duplizieren zweimal und dann gehen Sie einfach weiter und bewegen Sie sie in Position. Ich möchte auch die Ebenen so neu anordnen, dass sie in Ordnung sind. Und dann lasst uns vorhin umbenennen ist, dass ich E-Mail und Telefon machen werde. Alles klar, greifen wir unser Ausrichtungswerkzeug mit dem Buchstaben A und lassen Sie uns fortfahren und alle unsere Ebenen ausschalten , so dass es uns leichter macht, diese Ebenen auszuwählen und dann mit ihrer Umschalttaste die anderen zwei und Lassen Sie uns es von relativ zum ersten Element und ein nach oben liegendes ändern. Okay, lass uns alles andere wieder einschalten. Außer unserem Gitter. Okay, Jetzt müssen wir nur unsere Formen mit den Kontaktinformationen für jeden Abschnitt ausfüllen. Und ich denke, ich möchte nur diese Symbole bewegen, weil ich den Adressteil hier drüben setzen möchte . Es ist also direkt über den Google Maps, weil wir diese Google-Karte in nur einer Minute kleiner machen werden. Gehen wir also weiter und bewegen Sie diese Symbole um. Wir gehen in die Farbüberlagerung und bewegen ihn dann einfach rüber und ich nehme mein E-Mail-Symbol. Er ist hierher gezogen und dann in der Mitte telefoniert. Lassen Sie uns auch die Adresse nach unten verschieben, nur um ihnen eine Bestellung beizubehalten. Und jetzt können wir unser Textwerkzeug greifen, um diese Informationen hinzuzufügen. Also wird die 1. 1 E-Mail sein. Ich werde die Schriftart auf Eisenbahn ändern und dann für die Größe 36 tun. Und ich möchte auch die Farbe in eine dunkelgraue Farbe ändern. Also werde ich 333333 Nun das Problem ist, weil wir unsere Textebene innerhalb dieser Gruppenebene haben . Es wird uns nicht erlauben, Farben zu ändern, weil die Farbüberlagerung darauf angewendet wird . So werden wir es in Ordnung bringen. Wir werden diese Schicht nehmen, und wir werden sie über die Farbe oder Relais verschieben. Und jetzt, da es darüber liegt, wird es die Farbe hinzufügen, die wir mit dem Textwerkzeug ausgewählt haben. Okay, lassen Sie uns das duplizieren und nennen wir es Telefon und duplizieren das, und wir rufen es Adresse an und setzen sie dann einfach in die entsprechende Position. Lassen Sie uns voran und greifen Sie unser Textwerkzeug und benennen Sie jedes. Okay, gehen wir weiter und fügen einige zusätzliche Informationen hinzu. Nun, was das Textil ausgewählt? Ich möchte zu meinen Werkzeugoptionen gehen, um meine Auswahl von hier zu treffen, damit ich es nicht von H Layer einzeln machen muss . Also machen wir Georgia für die Schrift. Wir machen 16 für die Größe, und dann benutzen wir den gleichen dunkelgrauen Farbklick, OK, und wir tippen einfach eine gefälschte E-Mail-Adresse aus. Ich möchte diesen ganzen Text hier auswählen und an der Mitte ausrichten. Okay, gehen wir weiter und arbeiten an der Wieder Dimensionierung unserer Google Maps und fügen unser Formular hier auf der linken Seite. Und dann im nächsten Tutorial werden wir weitermachen und daran arbeiten, alles neu auszurichten und alles genau dort zu bekommen, wo sie sein müssen. Also für die Google Maps, was ich tun möchte, ist, dass ich es auf acht Spalten beschränken möchte, also werden wir eine Form dieser Größe machen und dann werden wir die Karte darin einfügen. Also lasst uns unser Messwerkzeug greifen und herausfinden, welche Größe wir brauchen, und es sieht aus wie 775 Pixel breit. Okay, lassen Sie uns aus dieser speziellen Gruppenebene raus und kommen hier zu Google Maps und erstellen Sie eine neue Ebene. Nennen wir es Google Maps und dann, mit unserem Rechteck auswählbar, wird voran gehen und eine Größe von 7 75 mal 500 erstellen. Stellen Sie also sicher, dass Sie deaktiviert haben. Und lassen Sie uns das in so 775 Tab Taste Oops ging zu weit. 500. Also denke ich, das ist ein bisschen zu groß. Gehen wir voran und ändern Sie die Größe auf 3 75, so dass es eher eine rechteckige Form ist, so dass diese Karte ein wenig besser in dort passt. Ich drücke die X-Taste, damit ich meine Vordergrundfarbe, Zehenweiß, wechseln kann , und dann gehe ich weiter und fülle sie mit meinem Eimerfilter aus, und ich möchte diesen Strich noch einmal hinzufügen. Also werde ich gehen, um Strichauswahl zu bearbeiten und dann schwarz im Vordergrund und Strich de wählen Commander Control und D und lassen Sie uns diese Ebene unter Google Maps setzen. Ich muss diesen Namen in Google Maps Box ändern. Okay, das nächste, was wir tun müssen, ist, dass wir die Ebenengrenze für unsere Google Maps-Box zuschneiden müssen . Also Ebene beschnitt einen Inhalt und lasst uns unsere Karte greifen und die Größe ändern. Es würde plus s verschieben und ich werde 3 75 für die Höhe eingeben, die zu unserer Box passt und dann zu dieser. Gehen Sie weiter und bewegen Sie es hier in Position. Okay, jetzt müssen wir unsere Karte auf diese Kiste beschränken. Also holen wir uns unsere Google Maps Box und sind dann unscharf. Wählen Sie das Werkzeug aus, um unsere Auswahl zurück zum Google Maps Layer zu machen, gehen Sie dann auf die Ebene und wählen Sie Zuschneiden zur Auswahl. Okay, gehen wir weiter und wählen Sie mit Commander Control und D. Alles klar, gehen wir weiter und arbeiten an unserem Formular. Jetzt wird dies das E-Mail-Einreichungsformular sein. Wir machen die Rose vier Säulen breit, wie wir es vorher getan haben. Lassen Sie uns voran und wählen Sie Hintergrund und erstellen Sie eine neue Ebene namens Formularname. Und dann, mit unserem Rechteck auswählbar, werden wir eine Form zeichnen und machen es 3 75 breit x 50 Pixel hoch. Und dann lassen Sie uns die gleiche graue Farbe auswählen, die wir zuvor verwendet haben, und füllen Sie sie dann aus. Lassen Sie uns auch diesen Strich hinzufügen. Wählen Sie und lassen Sie uns voran und duplizieren Sie diese. Lass es uns runterziehen. Lassen Sie uns es nennen, erstellen Sie E-Mail und lassen Sie uns fortfahren und beschneiden, um Inhalte für jede Ebene als auch. Nun, was ein Abstand reicht, möchte ich die gleiche Menge an Platz hinzufügen, die wir zwischen den Spalten vom unteren Rand dieses Formulars und dem oberen Rand dieses Formulars haben. Also lasst uns voran gehen und das messen. Also habe ich 25 Pixel. Ich werde das hier ausmessen. 25. Okay, gehen wir weiter und schalten unsere Guides aus. Also die nächste Form möchte ich die gleiche Menge an Platz haben, und ich möchte, dass es die Höhe dieses Bereichs hier ist, so dass der untere an der Unterseite von Google Maps ausgerichtet ist. Gehen wir also weiter und messen Sie wieder 25 Pixel aus. Und dann müssen wir von hier bis zum Ende von Google Maps messen. Also habe ich 224 Pixel gebührt. Also lasst uns den Hintergrund greifen und eine neue Ebene namens message erstellen. Und dann können wir mit unserem Rechteck-Auswahlwerkzeug fortfahren und das herauszeichnen. wir sicher, dass wir die richtige Größe haben. Hier. Wir haben 3 75 von 2 24 Okay. Dasselbe nochmal, wir werden uns mit dieser tollen Farbe ausfüllen, und dann fügen wir unseren Strich hinzu. Okay, das letzte, was wir tun müssen, ist und ein Titel für jeden Abschnitt. Wählen Sie hier meinen Formularnamen aus, damit ich sicherstellen kann, dass dieser Layer oben eingerichtet ist . Ich möchte auch meine Informationen und zwei Optionen ändern. Lasst uns zuerst Eisenbahn machen. Lassen Sie uns 30 für die Größe tun und dann sind dunkelgraue Farbe. Also wird dieser Name sein. Ich werde das wirklich zu fett ändern, und dann machen wir E-Mail für die nächste. So lässt der Besucher nur wissen, welche Informationen in jede Zeile eingefügt werden sollen. Und dann haben wir eine Nachricht. Okay, das war also der leichte Teil. Wir haben alle unsere Informationen. Wir haben alle unsere Formen. Das einzige, was wir jetzt tun müssen, ist, dass wir alles direkt in der Mitte unserer Formen ausrichten müssen . Stellen Sie sicher, dass alles perfekt miteinander verbunden ist, um sicherzustellen, dass wir nicht einmal viel Platz zwischen den verschiedenen Formen haben. Und das werden wir im nächsten Tutorial abdecken. 40. Körperteil 5: Okay, in dieser Lektion werden wir fortfahren und unseren Kontaktbereich beenden, und wir müssen auch unsere Schichten organisieren. Und im Moment habe ich ein riesiges Chaos verschiedener Schichten an verschiedenen Orten. Also werde ich anfangen, meine Ebenen zu organisieren und sie umbenennen, um es einfacher zu machen , was ich brauche, zu finden und sie auch zusammenzufassen, um uns online zu helfen. Sobald wir das getan haben, werden wir fortfahren und alle Elemente innerhalb der Formen ausrichten, den Abstand anpassen und dann sind wir bereit, zum Fußzeilenabschnitt zu gehen. - Okay , jetzt, wo ich alles zusammen habe, können wir weitermachen und anfangen, alle verschiedenen Elemente auszurichten. Okay, also für den Abstand, ich habe 29 zwischen dem Symbol und dem oberen Ende der E-Mail. Und dann habe ich die E-Mail-Adresse näher an die E-Mail gebracht. Also wissen wir, dass die beiden zusammen sind. Und dann werde ich den Rest der Symbole basierend auf dieser Menge an Abstand ausrichten. Also, jetzt gratuliere ich. Mein Ausrichtungstool mit dem Buchstaben A kann ich hier auf mein erstes Feld klicken, und dann werde ich auf meine E-Mail-Symbole klicken, basierend auf dieser Ebenengruppe, Ich werde das erste Element für den Verwandten festlegen, und dann werde ich ausrichten in der Mitte der Ziele. Kinder, geh und wende unsere Guides auf Pick, Layer oder Guide. Und wir werden das an den Anfang der E-Mail verschieben, damit ich alles andere ausrichten kann. Und wir werden auch einen Leitfaden hier über der E-Mail platzieren. Also, jetzt müssen wir nur diese Schichten greifen und sie in Position bringen. Jetzt, ganz schnell. Ich komme zurück zur E-Mail, weil ich sicherstellen möchte, dass jedes dieser Elemente auch in der Mitte der anderen Elemente ausgerichtet ist . Um das zu tun, bringen wir alles aus der Gruppe, dieser Ebene, dieser Ebene, und dann wählen wir jeden mit gedrückter Umschalttaste und dann ein Zeilenzentrum des Ziels aus. Okay, wir müssen alles wieder in die Mitte des Zentrums setzen und neu ausrichten, weil ich denke, das wird beeinflussen, wie es in dieser Form zentriert ist. Lassen Sie uns dasselbe für die Telefoninformationen tun. Wir werden all diese Informationen rausholen. Wir müssen auch unsere Messung hier von 29 Pixeln durchführen und dann lassen Sie uns alles in der Mitte ausrichten . Ok? Alles zurück in die Gruppe und dann eine im Hintergrund liegend. Jetzt wird es etwas höher verschieben, weil wir hier eine zweite Zeile im Vergleich zu unserer E-Mail-Adresse haben , was in Ordnung ist. Also gehen wir weiter und lassen es einfach so, weil ich will, dass es direkt in der Mitte der Box zentriert . Okay, wir werden das Gleiche auch für diese Information tun. In Ordnung, lassen Sie uns weiter gehen und unsere drei Textzeilen hier ausrichten. Ich möchte auch sicherstellen, dass dort auch perfekt von oben nach unten liegen. Also greifen wir unser Rechteck auswählbar, um eine Auswahl zu treffen und sie in der Mitte des Ziels auszurichten . Und dann müssen wir sicherstellen, dass wir Auswahl ausgewählt haben und dann eine Linie Mitte der Ziele . Okay, machen wir das Gleiche für die anderen beiden. Und dann wird für die letzte nur die Menge an Platz, die wir hier oben haben, messen , die 14 Pixel sind. - Okay , wir müssen jetzt unsere Symbole wieder in die Farb-Overlay-Gruppe setzen, damit wir sicherstellen können, dass diese die richtige Farbe haben. Okay, schauen wir uns mal mal hier an. Alles sieht ziemlich gut aus. Das letzte, was wir tun müssen, ist eine neue Ebenengruppe für den Abschnitt Kontakt zu erstellen. Okay, das war also sehr langweilig und sehr repetitiv. Aber es ist wichtig, dass wir alles richtig organisiert haben, damit wir wissen, wo die Informationen sind, wenn wir jemals wieder darauf zugreifen müssen. Und es hilft auch dem Web-Entwickler und finden Sie die Details der Webseite, wie sie zitieren die Website und mit allem, jede bestimmte Reihenfolge macht es einfacher für sie, auf diese Informationen zugreifen und rief die Website. Wenn alles überall ist, dann wird es viel länger dauern, um die Website und das Ende zu programmieren. Es wird am Ende Ihren Kunden mehr Geld kosten, um diese Website codiert zu haben, weil sie nicht richtig organisiert ist und die Chancen sind, dass Sie wahrscheinlich nicht zu wiederholen Geschäft von dieser bestimmten Firma oder Agentur, wenn Sie durch eine Agentur, weil Ihre Ebenen nicht richtig organisiert sind, ja, es ist langweilig und sich wiederholend, aber es ist zwingend notwendig, als Webdesigner organisiert zu werden. Es wird definitiv die Dinge einfacher für Sie und alle anderen, die in das Projekt involviert werden , und es wird Sie auf lange Sicht viel professioneller aussehen lassen. Nun, da der Abschnitt Kontakte im nächsten Tutorial abgeschlossen ist, werden wir dieses Webdesign-Projekt beenden, indem wir der Webseite eine Fußzeile hinzufügen. Wenn Sie also bereit sind, damit zu beginnen, lassen Sie es uns tun. 41. Fußer: Hallo und willkommen zum Fußzeilendesign für diese Website. Es ist wirklich einfach. Wir haben nur einige soziale Symbole, einige Links und einige Copyright-Informationen. Nun Regel wird in der Regel eine Fußzeile viele Links zu anderen Teilen der Website haben. Aber was wir im Grunde getan haben, ist, dass wir eine einseitige Website erstellt haben, obwohl es nicht vollständig eine Seite ist, weil wir einige Links haben, die zu anderen Seiten innerhalb der Websites navigieren, sowie einige Optionen für die Teambewertungen in einen Abschnitt über, wenn wir einen Abschnitt über machen, weil denken Sie daran, dass wir diesen Abschnitt hier gemacht haben, aber wir könnten eine andere Seite für den Abschnitt über erstellen, der vielleicht ein wenig mehr über das Unternehmen im Vergleich zu den Vorteilen der Verwendung der Unternehmen. Insgesamt handelt es sich also vor allem um ein einseitiges Webdesign, weil wir viele dieser einzelnen Seiten in die Homepage selbst kombiniert haben . Alles klar, lassen Sie uns voran und beenden Sie den Fußzeilenabschnitt und wird fast mit diesem Web-Design-Projekt fertig sein. Also lassen Sie uns voran und erstellen Sie eine neue Ebene für unseren Fußzeilenhintergrund namens Well, lassen Sie uns tun Fuß- oder Hintergrundklick. OK, dann mit Ihrem Rechteck auswählbar. Wir werden eine Auswahl von 1400 Pixeln breit und 200 für die Höhe zeichnen. Dann mit unserem Eimerfilter, wird Will voran gehen und füllen Sie es mit einer blauen Farbe, die wir zuvor verwendet haben und D wählen. Alles klar, lassen Sie uns unser Verschiebungswerkzeug greifen, so dass wir diese nach unten in Position verschieben war auch Ebene Zuschneiden auf Inhalt auswählen , um die Ebenengrenze zu beschneiden. Ich werde nur meine Pfeiltasten benutzen, um es nach unten zu bewegen. Also, genau da, also sieht das ziemlich gut aus. Also, hier ist der einfache Teil. Wir werden tatsächlich ein bisschen betrügen, und wir werden unsere Social-Media-Icons aus dem letzten Projekt holen. Es gibt keinen Grund, diese speziellen Social-Media-Symbole zu wiederholen, da wir sie bereits einmal gemacht haben . Okay, lass sie einfach da rein, aber ich bin mir nicht ganz sicher, wo sie sind. In Ordnung. Es sieht so aus, als wären sie hier unten, also lasst uns weiter gehen und den Lear-Inhalt beschneiden. Alles klar? Jetzt, da wir die dort unten haben, müssen wir diese Ebenen ausschalten, damit wir sie mit unserem Ausrichtungswerkzeug ausrichten können . Ich wähle zuerst den Hintergrund aus. und dann mit der Umschalttaste, wählen Sie diese und dann relativ zum ersten Element und einem Linienmittelpunkt des Ziels aus. In Ordnung, gehen wir weiter und fügen unsere Links hier unten unten hinzu. Gehen Sie voran und ändern Sie die Schriftfarbe, Zehe weiß, und dann werde ich fünf Leerzeichen machen und kopieren, damit wir es am Ende der anderen Links einfügen können . In Ordnung, lassen Sie uns weitermachen und auch das Zielzentrum ausrichten. Ich muss das tatsächlich ein bisschen höher bewegen, genau da sollte es gut sein und dann noch eins. Wir werden unser Copyright als nächstes machen, und dann werde ich die dunkelgraue Farbe für die Farbe des Fonds wählen und dann einfach eine Copyright-Information ausgeben . Und dann, genau wie zuvor, werden wir diese beiden Zielpunkte ausrichten und wir müssen es nach oben bewegen. Lassen Sie uns voran gehen und diese in eine neue Ebenengruppe einfügen. Nennen wir es Fußzeileninhalt, und wir werden dies noch einmal ausrichten. Eigentlich denke ich, dass mein Urheberrecht zu niedrig ist. Ich möchte das ein wenig höher bringen, weil ich mehr Platz auf den Boden beantworten möchte . Alles klar, gehen wir zurück zum Fußzeileninhaltsgruppen-Delayer und richten sie an der Höhe unserer Fußzeile aus. Also Linie Mitte des Ziels. Und dann schließlich werden wir eine Auswahl zwischen den Social-Media-Icons und die Copyright-Informationen zu tun , weil ich eine Liegen die Links hier direkt in der Mitte dieser beiden Elemente wollen. Also habe ich es aus der Gruppe herausgezogen. Ich wähle es aus und ändere es dann in Auswahl und dann eine Linie Mitte des Ziels. Ok, de Select. Lassen Sie uns das wieder hineinlegen, gehen wir voran und zoomen Sie heraus und schalten Sie unsere Inhalte wieder ein. Okay, also ist das Webdesign komplett. Aber was ich immer gerne tun, bevor ich meinem Kunden zur Überprüfung übergeben habe, ist, durch die Webseite zu gehen und zu sehen, ob es etwas gibt, das ich vergessen habe zu tun. Oder wenn es irgendetwas gibt, was ich tun kann, um die Webseite besser zu machen. Nun, es gibt ein paar Dinge, die wir nicht getan haben, und ich habe das absichtlich gemacht, nur damit wir zurückgehen und uns die Webseite ansehen und einige letzte Verbesserungen vornehmen und die Tatsache verstärken können, dass Sie Ihre Webseite noch einmal durchgehen müssen Zeit, bevor Sie es abgeben, weil Sie keine Webseite für die Überprüfung Ihrer Kunden übergeben möchten. Wenn es Fehler darin gibt, denn wenn sie die Fehler sehen, dann wird das Sie professionell dasselbe aussehen lassen. Wenn du durch eine Agentur gehst, wenn sie Fehler sehen, wird das nicht das Gute über dich widerspiegeln. Es gibt also ein paar Dinge, die wir tun müssen, um diese eine Seite besser zu machen und sie auch für unseren Webentwickler besser zu organisieren. Also werden wir darüber im nächsten Tutorial sprechen, und wir werden diese eine Seite nur ein wenig optimieren, um es nur ein bisschen besser zu machen und sicherzustellen, dass alles richtig ausgerichtet ist. 42. Letzte Optimierungen: Also sind wir fast fertig mit diesem Projekt. Wir haben nur einige letzte Verbesserungen, die wir tun müssen, um die Website nur ein bisschen besser zu machen und und ein paar Dinge, die wir vergessen haben. Also, was haben wir vergessen zu tun? Nun, wir haben hier ein Formular, aber wir haben keinen Absende-Button. Wir werden weitermachen und das hineingehen. Wir müssen unseren Abstand hier erhöhen und sicherstellen, dass der Abstand zwischen hier und hier gleich dem Abstand hier ist. Es sieht gerade ein wenig aus, deshalb möchten wir sicherstellen, dass unsere Ausrichtungen auf der gesamten Webseite konsistent sind. Also, zum Beispiel, der Abstand zwischen hier und hier gleich hier und hier. Also gehen wir durch und machen einige Messungen, um sicherzustellen, dass alles entsprechend ausgerichtet ist, und dann werden wir Anpassungen vornehmen, während wir gehen. Lassen Sie uns also voran gehen und beginnen, indem wir hier unsere Anpassungen vornehmen. Also gehen wir weiter und Graham sind Ausrichtungswerkzeug und machen ein paar Messungen. Ich habe 25 Pixel hier, was wir hier unten hatten, ist gut, also werde ich voran gehen und 25 Pixel hier messen und ich werde meinen Guide direkt dort hinzufügen . Jetzt muss ich nur alles nach oben bringen. Also lassen Sie uns diese Gruppen-Ebene finden. Es ist also in Kontakt. Wir haben hier unser E-Mail-Absendeformular und unsere Google-Inhalte, und wir können voran gehen und diese einfach einzeln verschieben. Und so werde ich nur klicken und ziehen Sie das nach oben. Dasselbe auch mit diesem hier. Stellen Sie sicher, dass alles eine Linie ist, die gut aussieht. Sieht so aus, als wäre unsere E-Mail hier ein bisschen zu lang. Etwas, um in das zurückzugehen und es mit meinem Skalierungswerkzeug zu ändern. Es wird 3 66 für die mit tun, die sich darum kümmern sollte. Und dann mit meinem Verschiebungswerkzeug werde ich es auswählen und mit der rechten Pfeiltaste um es über ein Pixel zu bewegen. Alles klar, das sieht also ziemlich gut aus. Jetzt gehen wir weiter und verkleinern, okay? Nun, da wir die richtige Menge an Platz zwischen all diesen verschiedenen Elementen haben, ist dieser Teil fixiert. Jetzt möchte ich durchgehen und sicherstellen, dass ich den richtigen Platz zwischen jedem der Abschnitte habe. Im Moment kann ich sehen, dass ich hier unten mehr Platz habe gegen hier. Also lassen Sie uns an den Anfang ihrer Seite gehen und werfen einen Blick auf die Abstände, die wir in diesem Abschnitt verwendet haben . Also, genau hier haben wir. Es sieht aus wie viel mehr Platz zwischen diesen Elementen und dem oberen Teil dieses Abschnitts im Vergleich dem, was wir unten getan haben. Also für die Konsistenz wurden zu messen und fügen Sie die gleiche Menge an Platz und es sieht aus wie 75 Pixel. Also werde ich diese Einstellung auch an diesem Abschnitt vornehmen, um noch mehr Atemraum zu geben und ihm diese Konsistenz zu geben. Gehen wir also voran und messen Sie 75 Pixel aus. Und wenn deine in diesem dreispaltigen Abschnitt anders ist, ist das in Ordnung. einfach die Messung heraus und verwenden Sie diese dann für den Rest der Website. Die andere Sache, die ich tun kann, ist Aiken besser organisieren diese Schichten. Hier haben wir zwei Elemente, die in einer neuen Ebenengruppe namens Vorteile gruppiert werden sollten . Und wir könnten auch den Titel dort hineinsetzen. Und das wird es uns leichter machen, alles zu bewegen. Okay, genau hier haben wir weniger Platz zwischen diesem Gebäude und diesem Inhalt im Vergleich zu dem, was wir vorher hatten , aber das ist in Ordnung. Dies ist die wichtige Information hier, und es ist sehr gut lesbar und leicht zu lesen. Also mache ich mir nicht wirklich Sorgen um diesen Raum da. Okay, wir werden weitermachen und weiter 75 Pixel Raum messen und jeden der Abschnitte anpassen . - Ordnung In Ordnung, also haben wir die richtige Menge an Platz zwischen den einzelnen Abschnitten hinzugefügt und wir haben noch einen leeren Platz am unteren Rand der Leinwand. Möglicherweise haben Sie mehr oder weniger als ich, basierend auf der Menge an Speicherplatz, die Sie zwischen den einzelnen Abschnitten hinzugefügt haben . Das ist in Ordnung. Was wir tun werden, ist, dass wir die Canvas-Größe reduzieren, und wenn ich meinen Cursor hier positioniere, zeigt es mir am unteren Rand der Schnittstelle, dass die Höhe 49 42 beträgt. Also muss ich zum Bild gehen und die Leinwandgröße auswählen und diese neue Nummer eingeben, 49 42. Sie müssen auch einen Blick werfen. Beantworten Sie hier eine Vorschau, um sicherzustellen, dass diese Informationen von der richtigen Stelle genommen werden. Es ist irgendwie schwer, mit dieser Länge eines Dokuments zu sehen, aber ich kann hier unten sehen, dass es den Bereich abschneidet, den ich beschnitten brauche. Also klicke ich auf Größe ändern, und wir sind jetzt im Geschäft. Okay, also sind wir fast fertig. Lassen Sie uns voran und erstellen Sie unsere Schaltfläche „Senden“. Lassen Sie uns voran und erstellen Sie eine neue Ebene namens Submit-Schaltfläche. Wir greifen unser Rechteck-Auswahlwerkzeug fixiert ist ausgeschaltet. Und dann, für die Größe, werden wir 100 für die Länge und 50 für die Höhe tun. Dieses Mal werde ich eine grüne Farbe auswählen, die wir zuvor verwendet haben. Und ich möchte auch die Ecken abrunden. also unter select abgerundete Rechteck aus, lassen Sie uns 20 tun und füllen Sie das dann mit Ihrem Eimerfüllungswerkzeug aus. Ich werde diesen Hintergrund ausschalten, damit ich meinen Knopf sehen kann. In Ordnung, lassen Sie uns weitermachen und unseren Submit-Button in Position bringen. Ich möchte es hier unten ausrichten, also werde ich einen Führer herausziehen, nur um sicherzustellen, dass er genau dort ist, wo ich ihn brauche. Und ich muss es auch ein wenig nach links bewegen, damit es mit diesem Leitfaden übereinstimmt und diese Einreichung stieg hier und jetzt werde ich voran gehen und diese Nachrichtenschicht einschalten, und ich werde voran gehen und einen dieser Guides an die Spitze der Feld, weil ich weitere 25 Pixel vom oberen Rand dieser Schaltfläche ausmessen möchte. Und ich werde nur einen neuen Hintergrund dafür ziehen, versus es neu zu dimensionieren, weil es manchmal ein wenig verzerrt wird. Also werde ich dort 25 Pixel machen. Neuer Leitfaden. Lassen Sie uns diese Nachricht löschen und eine neue Ebene namens Nachrichtenhintergrund erstellen. Und was dann? Sie sind Rechteck wählbar. Wir gehen weiter und treffen diese Auswahl. Und dann müssen wir unsere Farbe mit unserem Eye Tropper Color Picker Tool greifen klicken Sie auf OK, und füllen Sie es mit Ihrem Eimer-Füllwerkzeug und lassen Sie uns gehen und einen Strich zur Auswahl hinzufügen . Schwarz im Vordergrund, und klicken Sie auf Strich. Okay, das Letzte, was wir hier tun müssen, ist, in allen Hauptstädten einzureichen. Ich werde Oswald mutig für den Funt machen, und ich werde das auf 24 für die Größe fallen lassen. Und lasst es uns ändern, Zehenweiß. Okay, gehen wir weiter und bewegen Sie es nach oben, ziehen Sie das nach unten und dann müssen wir nur unser Ausrichtungswerkzeug verwenden, um das direkt in der Mitte unseres Knopfes auszurichten . Aber zuerst gehen wir zu unserem Submit-Button und wählen Sie Ebene aus. Beschneiden Sie den Inhalt und gehen Sie dann weiter und treffen Sie unsere Auswahl. Sieht so aus, als müssten wir alles wieder ausschalten und dann sicherstellen, dass Sie relativ zum ersten Element und dann zu einem Linienmittelpunkt von Zielen wechseln . Alles klar, lassen Sie uns das alles wieder einschalten. Kann neue Layer wieder gruppieren? Und dieses Mal ist es für die Schaltfläche „Senden“, und dann können wir das auch innerhalb unserer Kontaktgruppenebene platzieren. Okay, gehen wir weiter und zoomen raus. Ich glaube, wir sind fast fertig. Die andere Sache, die ich tun möchte, ich denke, dass dies viel besser machen wird, ist, dass ich die Symbole abfärben möchte, so dass sie nicht so intensiv sind , und ich möchte auch die sozialen Symbole in der Fußzeile abstraffen. Also lasst uns voran gehen und uns die zuerst schnappen. Ich werde die Deckkraft auf 50 fallen lassen. Auf diese Weise springen unsere Augen nicht überall über den Ort, weil wir so viele Dinge haben unsere Aufmerksamkeit konkurrieren. Wir wollen bestimmten Elementen mehr Bedeutung gegenüber anderen geben. Also lasst uns weiter gehen und unsere Symbole auch hier schnappen. Sie nehmen tatsächlich diese Gruppe diese Ebene und legen Sie sie auf 50 als auch, so dass es definitiv macht es viel einfacher für ihre Augen und fügen einige Bedeutung zu anderen Elementen im Vergleich zu den Symbolen. In Ordnung, lassen Sie uns einen Scroll nach oben nehmen und einen Blick auf den Rest der Website werfen, um zu sehen, ob wir noch etwas hinzufügen müssen . Okay, ich denke, das sieht ziemlich gut aus, und wir haben unsere Anpassungen vorgenommen. Alles ist richtig ausgerichtet. Wir twittern den Kontaktbereich, damit er ein wenig besser aussieht als vorher, sowie die sozialen Symbole. Und ich glaube, wir sind jetzt fertig. Herzlichen Glückwunsch zum Abschluss dieses zweiten Webdesign-Projekts. Wenn Sie dies noch nicht getan haben, gehen Sie weiter und gehen Sie durch und füllen Sie dieses Projekt für die Praxis und dann gehen Sie weiter und versuchen Sie herauszufinden, was Sie tun können, um dieses Webseitendesign einzigartig in Ihrem eigenen zu machen, so dass Sie es zu Ihrem -Portfolio. Das ist also Ihr nächster Auftrag. Gehen Sie weiter und kommen Sie mit etwas, von dem Sie denken, dass es viel besser ist als das. Und wenn Sie möchten, gehen Sie weiter und reichen Sie es im Abschnitt Q und A ein, um Feedback zu erhalten. Sobald Sie mit all dem fertig sind, können Sie im nächsten Abschnitt zu unserem dritten Webdesign-Projekt übergehen. Danke fürs Zuhören und einen tollen Tag haben. 43. Projekt 3: Seaside: Hallo und willkommen zu unserem Web-Design-Projekt Nummer drei für Seaside Audio und Video. Also machen wir nur einen kurzen Überblick über die bestehende Website Was Sie jetzt sehen können und dann zeige ich Ihnen das Design, das ich ausgedacht habe, und ich werde Ihnen einige Tipps geben, warum ich es so gestaltet habe, wie ich es gemacht habe. Das ist der Erste. Werfen Sie einen Blick auf die ursprüngliche Website, damit wir herausfinden können, was wir tun müssen, um diese Website zu verbessern . Also zunächst, das erste, was ich sehe, ist ihr Logo, Meer Audio und Video. Und es sieht so aus, als hätten sie einige kostenlose kitschige Clippard von Google-Bildern genommen und ein Logo zusammengeschlagen . Es sieht nicht sehr professionell aus. Es sieht veraltet aus, und insgesamt denke ich nur, dass es ein billiges Gefühl hat. Daher denke ich, dass ein neues, verbessertes, moderneres, schlichtes Design besser für ihr Logo wäre als das, was sie derzeit haben. Also wieder, dies gibt Ihnen die Möglichkeit, Ihre Dienstleistungen zu verkaufen, um Logo-Design einzuschließen. Also, wenn Sie einen Client haben, der zu Ihnen für Web-Design kommt und sie keine Website oder sogar nur ungeprüfte Stachel-Logo haben, möchten Sie vielleicht einen Blick auf das und sehen, ob Sie mit etwas noch besseres kommen können. Und dann können Sie versuchen, und Upsell sie auf Ihrem Logo. Design-Service. Vielleicht haben Sie einige Camp-Ideen im Voraus angelegt, bevor Sie ihnen tatsächlich ein Zitat geben. Vielleicht zeigen Sie ihnen einfach etwas Einfaches, nur um ihnen eine Vorstellung davon zu geben, warum Ihr Logo besser ist als das, was sie derzeit haben. Das ist eine weitere Option, die Sie berücksichtigen sollten, wenn Web-Design ist, zusätzliche Dienste zu verkaufen . So wie Sie in ihrer Navigation sehen können, ist es eine sehr einfache Website. Sie haben nicht viel Inhalt. Sie haben Audio, Video und kontaktieren Sie uns, und alle drei von ihnen gehen auf eine separate Seite, obwohl alle diese Informationen auch auf der Homepage sind. Es war also nicht ganz sicher, warum sie diese zusätzlichen Seiten hatten, wenn alles auf der Homepage ist , also werden wir das in nur einer Sekunde sehen. Also mein Gedanke ist, wenn wir zusätzliche Seiten machen wollen, würde ich zusätzliche Informationen im Vergleich zu dem hinzufügen, was wir auf der Homepage haben. mir nichts aus, einige grundlegende Informationen auf der Homepage zu setzen. Sie können hier sehen, dass sie Samples für ihre Audio und für ihre Videos haben, was in Ordnung ist. Aber wenn sie zusätzliche Informationen wollen, dann können wir das auf diese zusätzlichen Seiten setzen. Also werden wir die Navigation so ziemlich gleich halten. Alles klar, danach haben wir Social-Media-Front und Zentrum. Und wenn Sie noch nie von dieser Firma gehört haben und Sie ihre Website zum ersten Mal besuchen , sind Sie wahrscheinlich nicht bereit, sie auf Facebook und Twitter zu verfolgen. Warum willst du jemandem folgen, von dem du nichts weißt? Also würde ich das aus diesem Grund nicht prominent machen. Deshalb sind Sie besser dran, dies in der Kopfzeile zu entwerfen und es kleiner zu machen, also ist es nicht so prominent, aber die Leute können immer noch leicht darauf zugreifen, wenn sie bereit sind, Ihnen auf diesen Social-Media-Plattformen zu folgen , und Ich mag einfach nicht die Idee, es in den Mittelpunkt zu stellen. Also lasst uns anfangen. Beginnen Sie mit was? Es ist nicht wirklich eine sehr starke Schlagzeile. Wir haben auch ein sehr schlechtes Bild für den Hintergrund, und dann haben wir wieder ihre Kontaktinformationen. Ich bin noch nicht bereit, Sie zu kontaktieren. Ich weiß nichts über Ihre Firma? Warum sollte ich dich anrufen wollen? Sie haben mir noch keinen Grund gegeben, Sie anzurufen . Wenn Sie Ihre Telefonnummer dort einfügen wollen, würde ich sie in die Kopfzeile setzen und ich würde es klein machen. Es ist also nicht dominant, aber trotzdem leicht zugänglich. So können alle diese Informationen direkt hier in den Header kombiniert werden. Also, jetzt verstehen wir, warum ich Geschäfte mit Ihnen machen sollte, Audio und Video für Ihre Marke. Und dann erklärt es weiter, was sie tun. Und sie haben eine genannte Aktion, die gut ist. Dann erfahren Sie mehr. Wir haben zwei Links hier, die genau die gleichen Links sind, die zu den Audio- und Videoseiten navigieren , die hier oben in der Kopfzeile verfügbar sind. Also wiederholen sie diese Informationen noch einmal. Wir müssen diese Informationen nicht zweimal hier reinlegen. Es ist bereits in der Navigation, aber ich mag die Idee, Beispiele auf der Homepage zu setzen, weil von hier aus Sie die Art der Arbeit, die sie zuvor gemacht haben, probieren und sehen, welche Art von Arbeit sie zuvor gemacht haben. Und dann navigieren Sie zu den anderen Seiten. Wenn Sie mehr Informationen erfahren möchten, Also in diesem Fall, mit dem, was als klebrige Kopfzeile bekannt wäre, wäre von Vorteil, so dass, wenn eine Person scrollt nach unten, dass die Navigation noch verfügbar ist. Das wäre also etwas, das ich besonders für diese Website empfehlen würde. Die andere Sache, die ich tun würde, ist gerade jetzt haben sie nur ein Videobeispiel, und das Bild für dieses Video ist ziemlich hell. Es erregt Ihre Aufmerksamkeit, weil es sehr, sehr lebendig ist, aber ich glaube nicht, dass es ein sehr gutes Bild insgesamt ist, und ich würde das wahrscheinlich ändern. Aber noch wichtiger ist, wenn wir das Bild nicht ändern, würde ich empfehlen, eine Playlist mit Videos zu haben. Hier haben wir mehrere Audio-Samples. Ich würde gerne mehrere Videobeispiele sehen, vier, vielleicht fünf, vielleicht sieben oder acht Videos, Samples, die auch in diesem Bereich aufgenommen werden sollen, damit Sie unterschiedliche Zielgruppen je nachdem, wer Sie anvisieren, ob es sich um ein professionelles Unternehmen, das Sie zielen, oder vielleicht tun Sie Hochzeiten als auch, Sie gehen, um einige Videobeispiele davon sowie andere Arten von Lebensereignissen haben wollen . Sie werden einige Videobeispiele von jeder Art von Service oder Veranstaltungen haben, die Sie betreuen , und die Arten von Unternehmen, die Sie betreuen, egal ob es sich um Business to Business oder um eine Kombination aus Business to Business und Hochzeiten und andere Arten von Lebensereignissen. Also das ist eine andere Sache, die ich für diese spezielle Firma empfehlen würde. Und dann hier unten haben wir eine Kontakt-US-Abteilung haben wir eine Kontakt-US-Abteilung.Rufen Sie uns an, Harry. Rufen Sie uns an, Sie machen es einfach für Menschen, sie entweder durch Anrufen oder Absteigen einer Nachricht zu kontaktieren . Und dann in der Fußzeile haben wir einen riesigen Copyright-Bereich mit zusätzlichen Informationen, die nicht mit dem Urheberrecht zusammenhängen. Also wieder, Ich würde empfehlen, nur Copyright-Informationen und dann Links zu Datenschutzrichtlinien und Dinge wie diese. Denn wenn Sie hier nachschauen, haben sie eine Cookie-Richtlinie, also würde ich nicht unbedingt diesen Cookie-Richtlinien-Link in diesem Bereich hier setzen. Ich würde empfehlen, es in die Fußzeile zu setzen. Dann haben wir wieder einige Links zu sozialen Medien, was in Ordnung ist, und dann haben wir von Go Daddy Website-Builder angetrieben. So sagt dies Mai diese spezielle Firma gebaut ihre Website selbst, und es zeigt, dass es schlecht gestaltet ist, hat schlechte Layout, ein billiges Logo. Es gibt kein Styling des Textes, und insgesamt kann die Benutzererfahrung verbessert werden, indem eine Website professionell gestaltet wird. Also gehen wir jetzt über mein spezielles Design und warum. Ich denke, die Optionen und das Design, das ich erstellt habe, sind besser als das und wie es eine bessere Benutzererfahrung bieten wird. Also lasst uns voran gehen und einen Blick darauf werfen. Ich beschloss, ein neues, einfaches, modernes Logo zu kreieren. Es ist nichts Schickes. Es wird mir nicht helfen, irgendwelche Auszeichnungen zu gewinnen, aber es ist viel professioneller als dieses spezielle Logo hier. Ich habe ein paar weitere Elemente zur Navigation sowie einen Hamburger Icahn hinzugefügt, die Navigation ein- oder ausblenden wird, wenn sie angeklickt werden. Ich dachte nicht, dass es notwendig war, diese Navigation sichtbar zu haben, da viele dieser Inhalte und Links zu diesem Inhalt jetzt auf der Homepage verfügbar sind, als Teil ihres Logos und ihres Bildes, sie versuchten, am Meer zu integrieren Palmen, Meerblick Dinge wie diese, und ich fühlte, dass insgesamt, dass ihr Logo und ihr Branding besser mit Farben der Meerseite serviert werden . Deshalb wählte ich ein dunkelblau für das Wasser und dann eine schöne Orange zu einem rosa rötlichen Grady int Farbe, um die Sonne darzustellen. Deshalb wählte ich diese Farben und nicht Bilder oder ClipArt, wie sie es ursprünglich taten. Und dann im Heldenbereich. Ich habe nur eine riesige Textaussage, die Ihre Vision Wirklichkeit wird. Es sagt nicht wirklich viel, aber vielleicht ergreift es Ihr Interesse, weil Sie selbst eine Vision haben, und das ist, warum Sie zu diesem speziellen Unternehmen gehen und Sie sind kein Video AGA für oder Sie wissen nicht, wie man richtig Audio erfassen professionell. Also diese Aussage allein wird nicht wirklich dazu bringen, dass jemand seine Dienste kaufen will, aber es könnte sein Interesse jetzt greifen. Die einzige Sache, die ich für den Heldenbereich hinzugefügt habe, sind diese Logos von Unternehmen, für die diese spezielle Firma gearbeitet hat oder mit denen sie für Live-Events gearbeitet hat. Dies fügt sozialen Beweis oder Glaubwürdigkeit hinzu. Es erhöht die Glaubwürdigkeit dieses Unternehmens und macht es hier viel professioneller aussehen . Cheesy, kitschig. Es gibt keine echte Glaubwürdigkeit. Ja, also bist du in sozialen Medien, die keine Glaubwürdigkeit oder soziale Beweise sind. Es gibt keinen Beweis, dass Sie auf ihrer Facebook-Seite gehen können und sie haben möglicherweise nur 100 Fans. Eine große Sache. Das ist eine größere Sache. Sie haben tatsächlich mit diesen Firmen gearbeitet. Dieses Video AGA für hat mit diesen Unternehmen gearbeitet. Das ist viel beeindruckender als das. Also habe ich dies in den Heldenbereich aufgenommen, so dass es über der Falte ist und Besucher dieser Website werden diese Informationen sehen und wenn Sie können, was wäre noch besser. Ist mit Links, die zu einer Seite auf jeder dieser Websites gehen, die Ihren Kunden und die Arbeit, die sie getan haben, zeigt . Dann das erste, was wir sehen werden, nachdem wir anfangen zu scrollen, sind die Dienste , die sie anbieten. Und dann kann jeder von ihnen mit einer anderen Seite verlinken, um weitere Informationen zu erhalten. Also wieder, Sie müssen Ihre Dienstleistungen verkaufen. Warum sollte ich Geschäfte mit dir machen? Nun, wenn Sie nach jemandem suchen, der Video oder Audio für ein Live-Event macht, während Sie sich für Lebensereignisse oder Lebensereignisse interessieren, oder vielleicht brauchen Sie nur ein paar Beratungsdienste, damit jeder von ihnen auf eine andere Seite gehen kann , die sie auf verkaufen, warum sie Geschäfte mit Audio und Video am Meer machen sollten. Danach können wir dann einige Audio- und Videobeispiele sehen. Ich habe nicht wirklich viel für das Design für diesen bestimmten Teil der Website geändert. Es sieht sehr ähnlich zu dem, was sie derzeit haben, und das liegt daran, dass sie ihre Audio-Samples auf der Sound-Cloud gehostet haben. Und was Sie mit Sound Child tun können, ist, dass Sie einen Code oder einen Plug in nehmen und es auf Ihrer Website setzen können, und es wird dann eine Playlist mit all Ihrer Musik oder Audio für Leute zu sehen. Es gibt also nicht wirklich viel, was ich mit diesem speziellen Design ändern möchte. Ich habe es nur ein bisschen aufgeräumt. Ich habe die Bilder und die Play-Schaltflächen größer gemacht, aber all diese Design-Updates hängen davon ab, ob Sie das dürfen oder nicht, oder ob Sie sogar den Code ändern können, der von Sound Cloud bereitgestellt wird. Ich würde es vorziehen, diese Bilder zu sehen, und der Play-Button ist größer. Aber auch das hängt davon ab, ob es möglich ist oder nicht. Und wenn es das Budget des Kunden kann, weil dann der Coder muss gehen und anpassen dies basierend auf dem, was von Soundcloud verfügbar ist. Als nächstes haben wir unsere Videobeispiele. Und für dieses Design habe ich eine große rote Play-Schaltfläche, weil sie ihre Videos auf YouTube hosten und Sie können sehen, dass mit diesem kleinen Play-Button direkt hier. Das ist ein YouTube-Play-Button Logo, also dachte ich, es wäre besser, es größer zu machen. Aber was ich für diesen Client empfehlen würde, ist, es auf etwas anderes als YouTube für die einfache Tatsache zu hosten , dass, sobald das Video fertig ist, werden Sie beginnen, eine Playlist von anderen Videofilmern und anderen Arten von Veranstaltungen zu sehen. Und das kann den Besucher ablenken, denn dann werden sie anfangen, zu anderen Videos zu navigieren . Sie werden abgelenkt, und dann werden sie die Seite verlassen. möchten wir die Besucher auf unserer Website so lange wie möglich halten, also würde ich empfehlen, die Videos an anderer Stelle zu hosten, wenn Sie es auf Soundcloud tun können, als ich empfehlen würde, das zu tun oder einen anderen Dienst wie Video zu wählen. Die andere Sache, die ich für dieses spezielle Design getan habe, ist, dass ich eine Wiedergabeliste oder einen Schieberegler hinzugefügt habe , indem ich hier links und rechts einige Schaltflächen hinzufüge, und wir sind derzeit auf vier von fünf Video-Samples, und dann habe ich die Verbindung aktualisiert und ich habe zusätzlichen Text für eine kostenlose Beratung hinzugefügt. Warum sollte ich mich mit dir verbinden? Was für mich da drin ist, während ich dir eine kostenlose Beratung gebe, die die Wahrscheinlichkeit erhöht , dass dir jemand eine Nachricht schicken wird, während wir hier unten einfach Kontakt mit uns haben. Nun, lassen Sie uns eine Schlange. Warum sollte ich dir eine Schlange fallen lassen? Was ist für mich drin? Sie möchten also sicherstellen, dass Sie dem Besucher einen Grund geben, warum er Ihnen eine Nachricht senden soll, und Sie können dies tun, indem Sie ihm einfach etwas im Gegenzug für die Zusendung einer Nachricht geben. Und dann habe ich die Fußzeile mit einer einfachen Copyright-Zeile und einigen Social-Media-Symbolen vereinfacht. Die einzige andere Sache, die wahrscheinlich hinzufügen würde, ist eine Datenschutzrichtlinie und eine Cookie-Richtlinie, die auf diese Seiten für diesen Inhalt verlinkt. Und dann nahm ich auch den Hintergrund, den ich für den Header und den Heldenbereich erstellt habe, und fügte ihn in die Fußzeile ein, um das Gesamtdesign auszugleichen und alles miteinander zu verbinden. Insgesamt ist es also sauberer. Es ist moderner. Es ist mehr auf dem neuesten Stand. Es ist benutzerfreundlicher und sieht viel professioneller aus als das, was sie derzeit haben. Also für dieses Projekt werden wir dieses besondere Design neu erstellen. Ich werde dir zeigen, wie ich das gemacht habe. Grady int hat einige dieser Spezialeffekte angewendet, wie man mit Situationen umgeht, wenn Sie Inhalte von einer anderen Website haben . Wie man diese Bilder zu bekommen, weil es nicht einfach oder unkompliziert war, diese speziellen Bilder zu bekommen . Also werde ich Ihnen zeigen, wie ich diese Bilder bekommen habe, und dann werden wir einen einfachen modernen Schieberegler für unseren Videobereich erstellen , und dann werden wir es mit unserer Verbindung und Fußzeile abrunden. Also, wenn Sie bereit sind, mit diesem neuen Projekt zu beginnen, machen wir es 44. Logo: Hallo und herzlich willkommen zum ersten Tutorial für unser Projekt am Meer. Das erste, was wir tun werden, ist, dass wir unser Logo wirklich einfaches Design erstellen, so dass es nicht viel Zeit in Anspruch nehmen wird, um zu entwerfen. Also lasst uns weitermachen und loslegen. Also lassen Sie uns ein neues Dokument mit Befehl oder Steuerung und dem Buchstaben erstellen, und wir werden es 200 mal 100 Größe. Wir wollen auch die Hintergrundfarbe Zehe Weißklick setzen, OK, und wir werden neue Schriftarten verwenden, die wir noch nicht verwendet haben. Und Sie müssen diese möglicherweise herunterladen und installieren, wenn Sie genau das gleiche Geld verwenden möchten. Wenn nicht, ist das in Ordnung. Verwenden Sie einfach jede Schriftart, die Sie wollen. Es ist nur zum Üben. So ist die 1. 1 auf Google-Schriftarten. Es ist Fonts dot google dot com, und das ist der Spaß, den wir nutzen werden. Nicht sicher, wie man es ausspricht, aber gehen Sie einfach vor und machen Sie eine Suche nach dieser Schriftart bei Google Fonts und der andere wird als Kupferplatte bezeichnet , und es kann bei Fonts geek dot com gefunden werden, und Sie können diese Schriftart herunterladen für kostenlos, sobald Sie diese heruntergeladen und installiert haben. Wir werden Seaside für den ersten Teil des Logos austippen. Aber zuerst gehen wir in Tool-Optionen und geben Sie unsere Informationen für diesen Funt ein. Also möchte ich Kupferplatte wählen. Wir machen 36 für die Größe und dann für die Farbe, wir werden diese dunkelblaue Farbe verwenden. Also geben Sie einfach diese Nummer hier ein. Klicken Sie auf OK, und geben Sie dann Seaside ein. Also habe ich den ersten Brief in einem Großbuchstaben gemacht. Der Rest ist Kleinbuchstaben. Auch wenn sie wie Hauptstädte aussehen, sind sie etwas kleiner. Also werde ich voran gehen und alle auswählen, und ich werde auch diese Schriftart fett machen. Also lasst uns das einfach in Position bringen, und dann greifen wir wieder unser Textil, und dann geben wir den Namen des nächsten Fonds ein, den wir verwenden wollen. Lassen Sie uns 20 für die Größe tun und wir werden die gleiche Farbe verwenden, also tippen Sie einfach Audio und Video in allen Lagern. Lassen Sie uns das auch fett, und gehen Sie weiter und greifen Sie den Text und bewegen Sie ihn über eine Art von Linien mit der linken Seite und der rechten Seite des Meeres. Gehen wir weiter und greifen es und bewegen es nur ein wenig nach unten, weil wir eine Linie setzen , die sich hier in der Mitte teilt. Also lassen Sie uns voran und schalten Sie unsere GYNs ein und platzieren Sie dann einfach eine Anleitung auf beiden Seiten des Textes und dann, mit Ihrem Rechteck auswählen, wird voran gehen und eine Auswahl zeichnen. Und lassen Sie uns die Größe oder die Höhe zwei Pixel machen, greifen Sie Ihren Eimer. Füllwerkzeug, gleiche blaue Farbe. Wir müssen es ausfüllen. Aber bevor wir das tun können, müssen wir eine neue Ebene erstellen. Nennen wir es Divider de Select, und verwenden Sie dann Ihr Verschiebungswerkzeug, nur um es nach unten in Position zu bewegen. Lassen Sie uns voran gehen und schalten Sie unsere Show-Ebenenbegrenzung unter Ansicht ein und gehen Sie dann zur Ebene beschneiden den Inhalt, und dann gehen wir weiter und richten Sie ihn mit unserem Rechteck-Auswahlwerkzeug und unserem Ausrichtungswerkzeug aus. Lassen Sie uns auch den relativ zu zwei Auswahl und dann eine liegende Mitte des Ziels platzieren. Okay, gehen wir weiter und greifen unsere Audio- und Video-Ebene, und lassen Sie uns die Deckkraft nur ein wenig nach unten fallen. Gehen Sie runter auf etwa 80 für die Deckkraft. Lassen Sie uns die Gyn's verstecken und gehen Sie voran und platzieren Sie diese innerhalb einer neuen Ebenengruppe als auch Logo genannt. Und lassen Sie uns auch sicherstellen, dass wir diese Datei speichern, falls wir später Änderungen daran vornehmen müssen . Als Nächstes möchten wir sicherstellen, dass unser Master-Rasterdokument geöffnet ist, damit wir von einem leeren Schiefer für unser neues Design beginnen können . Sobald Sie das geöffnet haben, greifen Sie Ihre Logogruppen-Ebene und ziehen Sie es in das Dokument und verschieben Sie es dann nach oben in die Kopfzeile. Das ist also der Anfang der Kopfzeile. Unser Logo ist entworfen, und wir werden den entworfenen Teil der Kopfzeile im nächsten Tutorial vervollständigen. 45. Überschrift: Hallo und willkommen zurück. In Ordnung, wir werden weitermachen und an unserem Header und an unserem Heldenbereich arbeiten, weil wir Zutat erstellen müssen , die nahtlos vom Header bis zum Helden ist. Also werden wir weitermachen und den Heldenhintergrund erstellen. Bevor wir also diese Hintergründe erstellen, lassen Sie uns die Höhe der Kopfzeile und des Heldenabschnitts definieren, sowie die Logos, die der soziale Beweis sind, die dem Unternehmen auch in diesem Heldenbereich Glaubwürdigkeit verleihen . Und wir werden ein paar Guides für jeden hinzufügen. Also die erste 1 werden wir klicken und ziehen Sie eine Führung nach unten auf 150 dann erstellen Sie einen anderen Führer und 550 und dann wird die letzte bei 700 sein. Also gehen Sie weiter und fügen Sie diese drei Führer hinzu, und wir werden weitermachen und unsere Zutat erstellen. Lassen Sie uns voran und erstellen Sie eine neue Ebene. Nennen wir es Zutat. Ok. Zuerst müssen wir unsere Farbe definieren, also werde ich nur die Farben aus dem Dokument holen, das ich zuvor erstellt habe. Also gehen Sie vor und geben Sie diese Zahl für das leuchtend orange ein, und Sie müssen das in den Vordergrund stellen. Und dann für die Hintergrundfarbe wird es diese leuchtend rosa Farbe sein. Also gehen Sie vor und geben Sie diese Nummer hier ein. Ok? Sobald Sie diese Farben auf Ihre Vordergrund- und Hintergrundfarbe gesetzt haben, verurteilen wir. Gehen Sie weiter. Und Graham sind Zutat Werkzeug. Wir müssen zum Gitter-Editor gehen, auf den zugreifen können, indem Sie auf dieses Symbol hier und dann oben hier und Zutat Editor klicken, müssen Sie Ihre Farben definieren, wenn sie nicht automatisch eingestellt sind, und Sie können tun , indem Sie mit der rechten Maustaste klicken und den linken Farbtyp auswählen, Vordergrund auswählen und dann erneut mit der rechten Maustaste klicken. Und für den richtigen Farbtyp wählen Sie die Hintergrundfarbe und dann für unser weißes Dreieck hier aus. Wir wollen sicherstellen, dass das in der Mitte ist, genau um 0,50 Also kommen Sie einfach so nah wie möglich, und dann können wir unsere Zutat erstellen. Wir fangen Argh an! Strahlend oben links in der Kopfzeile. Und wir ziehen nach unten rechts unten im Heldenbereich. Klicken Sie also einfach auf, ziehen Sie die Freigabe heraus und drücken Sie dann Ihre Eingabe- oder Retur-Taste, um diesen gierigen int zu erstellen. Und jetzt ist es eine ID für unsere Ebene. Lassen Sie uns also voran und erstellen Sie eine Trennung zwischen dem Header und dem Heldenbereich, indem Sie einen Schlagschatten hinzufügen . Um dies zu tun, erstellen wir zuerst eine Auswahl mit unserem Rechteck, das direkt um den Header auswählbar ist. Wir werden das mit Befehl oder Kontrolle und dem Buchstaben C kopieren und dann mit Befehl oder Kontrolle und dem Buchstaben V und Ihre Ebenen Klavier einfügen . Sie erhalten eine schwebende Auswahl, klicken Sie mit der rechten Maustaste und wählen Sie eine neue Ebene aus. Okay, also haben wir jetzt unser Grady int für unseren Header. Nennen wir es einen Kopfzeilenhintergrund und lassen Sie uns diesen in Held Hintergrund ändern. Stellen Sie sicher, dass der Kopfzeilenhintergrund ausgewählt ist, da wir die Layergrenze dieser aktuellen Ebene erhöhen müssen . Im Moment wird es hier abgeschnitten, was in Ordnung ist, wenn das alles ist, was wir brauchen. Aber weil wir Anti-Schlagschatten brauchen, wird es nicht wirklich auftauchen, weil die Schlagschatten hier unten unter dieser Ebenengrenze kommen , also müssen wir die Ebenengrenze erhöhen, um den Schlagschatten zu zeigen. Und wir können das tun, indem wir zu später gehen und Ebene zu Bildgröße auswählen. Okay, jetzt werden wir nach oben gehen, um Licht und Schatten zu filtern und Schlagschatten auszuwählen. Von hier aus kann man schon sehen, dass der Schlagschatten angewendet wird. Und dann können wir diese Optionen hier verwenden, um den Schlagschatten anzupassen. Wenn der Schlagschatten nicht angezeigt wird, vergewissern Sie sich, dass die Vorschau aktiviert ist, damit die Menge des Schlagschattens, der über die Schieberegler X und Y angezeigt wird, erhöht werden kann. Und wenn Sie beide miteinander verknüpft haben, können Sie beide gleichzeitig anpassen. Also mehr oder weniger, ich werde weniger gehen. Ich gehe gleich um zwei. Ich werde auch die Deckkraft erhöhen, um sie dunkler zu machen. Und ich werde das gleich um eins machen. Sie können Ihre machen, wie Sie wollen. Ich werde diese Optionen hier nutzen und klicken. Ok. Und jetzt haben wir unsere Trennung zwischen dem Header im Heldenbereich. Okay, das nächste, was wir tun müssen, ist die Grady int zu definieren. Es erscheint also nur im Heldenbereich und nicht im restlichen Dokument. wir also sicher, dass wir unseren Heldenhintergrund ausgewählt haben. Und dann treffen wir eine Auswahl um diese Heldenauswahl. Und dann gehen wir nach oben und wählen Umkehren und Net wird die Auswahl invertieren , so dass es alles außer dem Heldenbereich auswählt. Also haben wir die Kopfzeile ausgewählt und wir haben den Rest des Dokuments ausgewählt. Also, jetzt werden wir eine Ebenenmaske zu erstellen, füllen sie mit Weiß, und dann müssen wir sicherstellen, dass wir schwarz auf die Hintergrundfarbe gesetzt haben und dann Ihre Lösch- oder Rücktaste drücken , um diese Grady int aus dem Rest des Dokuments zu entfernen. Nun, natürlich, es hat hier oben keinen Unterschied gemacht, weil wir auch unseren Header-Hintergrund dort haben . Lassen Sie uns voran in de Select mit Befehl oder Kontrolle und dem Buchstaben D Lassen Sie uns Haider Führer für einen Moment. Unser Header und ein Teil unseres Heldenabschnitts sind jetzt mit diesem strahlenden Effekt definiert, und es ist nahtlos. Anders als der Schlagschatten, der sie trennt. Die Farben sind nahtlos. Gehen wir weiter und bewegen Sie unser Logo nach oben und lassen Sie uns voran und richten Sie es direkt in der Mitte in dieser Kopfzeile von oben nach unten aus. Sie auch sicher, dass es auch links von der Spalte ausgerichtet ist. Wenn nicht, greifen Sie Ihr Werkzeug zum Verschieben. Stellen Sie sicher, dass Sie den ausgewählten aktiven Layer verschoben haben. Klicken Sie darauf und verschieben Sie es dann an Positionen auf der Linie in die erste Spalte des Rasters. Gehen Sie weiter und schalten Sie das Gitter aus. Ich werde das vorerst an der Spitze behalten, also habe ich leichten Zugriff darauf. Okay, lassen Sie uns jetzt unsere lokale Ebene und unser Rechteck-Auswahlwerkzeug greifen und eine Auswahl treffen. Ich werde mein Aufklärungswerkzeug mit dem Buchstaben A schnappen und auf mein Logo klicken. Ich werde relativ zur Auswahl und dann eine Linie Mitte des Ziels setzen. So ist es jetzt gleichmäßig zwischen oben und unten verteilt. Alles klar, gehen wir weiter und arbeiten als Nächstes an unserer Navigation. Wir haben es bereits ein paar Mal gemacht, und wir werden im Grunde das gleiche Konzept verwenden, das wir in den vorherigen Designs verwendet haben, indem wir fünf Leerzeichen nach jedem Menüelement hinzufügen, es kopieren und am Ende der anderen einfügen. Also mit Ihrem Textwerkzeug, lassen Sie gehen in zwei Optionen und setzen Sie die Schriftart Eisenbahn die Größe auf 24 die Farbe toe weiß. Und Sie möchten auch sicherstellen, dass Ihr Abstand auf Null zurückgesetzt wird, da wir keinen zusätzlichen Abstand zwischen den Buchstaben für unsere Navigation wünschen . Und gehen wir weiter und tippen Sie es aus. Kate. Als nächstes müssen wir unser Hamburger-Symbol erstellen, also werden wir das mit unserem Rechteck-Auswahlwerkzeug tun. Lassen Sie uns auch eine neue Ebene erstellen, die zuerst Hamburger genannt wird, und dann für die Größe werden wir 30 mal acht tun. Und dann werden wir unser Bucket-Tool verwenden, um das mit weißer Kamera zu füllen und zu zoomen nur ein wenig und de select. Und bevor wir vergessen, lassen Sie uns auf Ebene gehen und beschneiden auf Inhalt auswählen und diese Ebene zweimal mit Ihrem Verschiebungswerkzeug duplizieren . Wir werden die einfach in Position bringen. Okay, lasst uns unser Ausrichtungswerkzeug mit dem Brief schnappen. Halten Sie Ihre Umschalttaste gedrückt. Wählen Sie sie alle, die relativ zum ersten Element relativ zum ersten Element und einer Zeile links festgelegt sind. Die andere Sache, die wir tun wollen, ist zu verteilen und sogar Menge an Platz zwischen jedem von ihnen als auch. Lassen Sie uns also nach unten scrollen und den Offset einstellen. Warum? Um 12 und dann wählen Sie diese Option hier, um den Raum zwischen ihnen zu verteilen. Okay, gehen wir weiter und wählen die oberste Schicht aus, richtig? Klicken Sie auf und wählen Sie. Merge nach unten und dann mache es noch einmal und das dauert alle drei dieser Schichten und kombiniert es im Schlepptau. Eins. In Ordnung, gehen wir weiter und nehmen unsere neuen Elemente hierher und richten sie an der rechten Seite unserer Kolumne hier aus. Und dann lassen Sie es mit ihrem Rechteck-Auswahlwerkzeug und unserem Ausrichtungswerkzeug oben unten ausrichten. Wir brauchen auch ein Gramm, unsere Navigation zieht das heraus, wenn nötig. Und dann werden wir das einfach neben unserem Hamburger-Symbol gleich da drüben schieben. Und weil ich diese fünf Leerzeichen am Ende des Kontakts hinzugefügt habe, kann ich die Ebenengrenze direkt hier sehen. Und das gibt mir gleich viel Platz zwischen jedem der Worte und dem Hamburger. Ich komme. Ok. Ich werde weiter gehen und mein Rechteck-Auswahlwerkzeug wieder greifen, damit ich die Navigation direkt in der Mitte von oben nach unten ausrichten kann . Okay, alles ist an seinem richtigen Platz. Das letzte, was wir tun müssen, ist und ein Hover-Zustand-Symbol, um darzustellen, was passiert, wenn Sie auf das Hamburger-Symbol klicken, weil die Navigation selbst ausgeblendet wird, bis Sie darauf klicken . Also, was wir tun werden, ist, dass wir zu der vorherigen Datei gehen, an der wir gearbeitet haben, und wir werden dieses Hover-Icon aus diesem Dokument greifen, anstatt versuchen, es wieder online zu finden . Also werde ich es einfach ausfindig machen. Es geht zum F A Q Abschnitt, und dann einfach klicken und ziehen Sie die Ebene über unser aktuelles Dokument, verschieben Sie es in Position und das ist es, dass sie das Hover-Symbol über der Hamburger-Ebene verschoben hat, muss dies umbenennen. Ich werde die Kopie entfernen, und dann müssen wir nur unsere Schichten organisieren. Lassen Sie uns also voran und erstellen Sie eine neue Ebenengruppe für den Header und das war's. Unser Header-Abschnitt ist jetzt fertig. Okay, also im nächsten Tutorial, werden wir weitermachen und unseren Heldenbereich und die Logos für soziale Beweise erstellen 46. Hero: Hallo und willkommen zurück. In Ordnung, wir werden weitermachen und an unserer Heldenabteilung arbeiten und das Design dieses Teils des Projekts beenden . Es wird ganz einfach sein. Wir werden Text und Logos für unsere Social Proof hinzufügen und etwas Glaubwürdigkeit für das Meer Audio und Video hinzufügen. Also das erste, was wir tun müssen, ist ein paar Logos, Logos oder fein zu finden . Ich habe gerade fünf zufällige Logos ausgewählt, die die Dienste eines Audio- und Videoprofis benötigen . Muss nicht das gleiche Logo sein. Führen Sie einfach ein Google-Bild nach einigen Logos aus, laden Sie sie herunter und fügen Sie sie dann Ihrem Dokument hinzu. Denn alles, was wir tun werden, ist, sie mit unserem Ausrichtungstool auszurichten und einfach weiter mit einigen der Tools zu üben, die wir als Webdesigner verwenden müssen. Sobald Sie sie heruntergeladen und Ihrem Dokument hinzugefügt haben, können wir loslegen. Also werde ich meine Guides einschalten und mein Bewegungstool packen, und ich werde das erste Logo auswählen und es an der linken Spalte ausrichten. Dann werde ich mein letztes Logo schnappen und es auf der rechten Seite ausrichten, und das stimmt mit dem Hamburger-Symbol hier drüben und diesem mit dem Logo hier drüben. Lassen Sie uns dann einfach die anderen drei in Position bringen. Nun, die andere Sache, die Sie tun müssen, ist die Größe Ihrer Logos zu ändern. Also meine Logos, Ich bin mit dem Skalierungswerkzeug Shift plus s qualifiziert, und ich ändere die Höhe auf 75 Pixel. Nun, wenn Sie ein Logo wie dieses hier haben, müssen Sie es nicht auf 75 für die Höhe ändern, da die Breite viel, viel breiter sein wird als jetzt. Also werde ich das hier einfach so lassen, wie es ist, und ich werde es sowieso in der Mitte der Säule ausrichten und dann den Raum gleichmäßig zwischen ihnen verteilen. So einfach. Gehen wir also voran und machen Sie diese Ausrichtung zuerst, wo sie in diesem Bereich von oben nach unten ausgerichtet ist. Also werden wir unsere Auswahl mit unserem Rechteck-Auswahlwerkzeug treffen. Wir greifen unser Ausrichtungswerkzeug mit dem Buchstaben A und ich werde auf das erste Logo klicken . Sieht nicht so aus, als würde es mir erlauben, es auszuwählen, also muss ich möglicherweise die Kopfzeile ausschalten. Also lasst uns das versuchen. Da gehen wir. Jetzt, da ich habe, dass ich Auswahl ausgewählt vier relativ zu, und dann kann ich eine Linie Mitte des Ziels auswählen. Okay, ich mache das auch für jedes der anderen Logos. Okay, ich ändere das zurück zum ersten Element, und dann wähle ich mein erstes Logo mit meinem Ausrichtungstool aus, und dann halte ich meine Umschalttaste gedrückt, um die anderen Logos auszuwählen. Okay, Sie wissen wahrscheinlich, was als Nächstes los ist. Das ist richtig. Wir werden verteilen, und dann müssen wir sicherstellen, dass wir unsere Einstellungen für die X- und Y-Sets richtig haben. Ich werde weit zurück auf Null setzen. Ich bin mir noch nicht ganz sicher, was ich für die Ex brauche, also werde ich 250 ausprobieren und dann werde ich diese Option hier auswählen. Jetzt. Das Problem ist, dass es uns nicht den gleichen Abstand zwischen h Logo gab. Also manchmal wird das passieren. Basierend auf der Ebene und der Größe dieser Ebenen und der Anzahl der ausgewählten Ebenen ,wird es Ihnen , nicht immer genau das geben, was Sie wollen. Ich werde das mit Commander Control und dem Buchstaben Z rückgängig machen. Also was können wir tun, um diese Logos gleichmäßig zwischen ihnen auszurichten? Nun, anstatt Distribution zu verwenden, können wir dieses Logo in der Mitte ausrichten und dann unser Auswahlwerkzeug verwenden, um dieses Logo zwischen diesen beiden auszurichten und dann dieses Logo zwischen diesen beiden und das wird uns immer noch eine gleiche Menge der Verteilung. Es wird nicht genau die gleiche Menge sein, aber sie werden symmetrischer und näher an der gleichmäßigen Verteilung auf diese Weise sein. Und das liegt daran, dass dieses Logo hier länger ist als dieses, und es wird mehr oder weniger Basis haben als das andere. Also gehen wir weiter und greifen unser mittleres Logo mit unserem Ausrichtungstool. Wir gehen nach oben und wählen Bild und dann ein liegendes Zentrum des Ziels, so dass es direkt in der Mitte unseres Dokuments, die Breite unseres Dokuments. So können wir jetzt zu unserem Auswahlwerkzeug gehen und eine Auswahl zwischen den beiden treffen, und dann können wir dieses Logo greifen, es wieder zur Auswahl ändern und es dann in der Mitte dieser Auswahl ausrichten. Jetzt können wir das gleiche tun mit diesem Logo hier drüben mit unserem Auswahlwerkzeug de select mit Commander Control nd und schalten Sie die Führungen aus. Und jetzt ist alles perfekt ausgerichtet. Okay, das nächste, was wir tun müssen, ist und ein Schlagschatten, der dem Schlagschatten entspricht, den wir in ihrer Kopfzeile platziert haben . Also lasst uns weitermachen und das tun. Schalten wir unsere Guides wieder ein. Lassen Sie uns unsere Auswahl rund um diesen Abschnitt treffen. Ich wähle meine Hintergrundebene aus, weil ich möchte, dass der Hintergrund weiß bleibt. Wir werden es mit Commander Control kopieren und sehen und bezahlen mit Commander Control. Neid. Können wir eine schwebende Auswahl haben? Also werden wir das zu einer neuen Ebene hinzufügen. Lasst uns das nach oben bewegen. Das nennt man sozialer Beweis Hintergrund. Lassen Sie uns auf Ebene gehen und Ebene zu Bildgröße auswählen, und jetzt können wir nach oben gehen und Filter auswählen, Licht und Schatten und Schlagschatten, um diesen Schlagschatten zu erstellen, um dem zuvor entsprechen. Jetzt hätten wir die genauen Zahlen aufschreiben sollen, die wir zuvor verwendet haben, weil es standardmäßig auf die Standardeinstellungen gesetzt wird , und ich erinnere mich nicht an die genaue Zahl, die ich für das X und das Y verwendet habe, und die Deckkraft, die ich kenne, ist ziemlich nah auf eins für die Deckkraft. Aber ich bin mir nicht sicher, aber es ist nahe genug für den Moment. Denken Sie also daran, dass in Zukunft, wenn Sie einen Schlagschatten mehrmals in einem Dokument verwenden, es am besten ist, genau die gleichen Zahlen zu haben. So haben Sie genau den gleichen Schatten im gesamten Dokument. Okay, ich geh weiter und klicke. Okay, also haben wir unseren Schlagschattennagel, und wir haben die Trennung zwischen diesem Abschnitt und diesem Abschnitt hier unten. Das einzige Problem ist, dass wir auch einen Schlagschatten darüber haben. Was ich also tun werde, ist, dass ich eine Auswahl mit dem Rechteck treffen kann, das diesen Drop Shuttle ausschließt. Aber wir wollen sicherstellen, dass wir hier unten den Schlagschatten auswählen. Und dann, wenn wir nach oben gehen, um die Ebene zu beschneiden, das wird, um diese Ebenengrenze zu beschneiden und den Schlagschatten von oberhalb dieser Leiste entfernen. Wir wollen den Balken nicht darüber, weil es zu viel Trennung sein wird. Also haben wir unseren Heldenbereich und unsere Trennung von hier und hier und jetzt müssen wir nur unseren Text hinzufügen. Also lasst uns unser Textwerkzeug greifen und lasst uns die Schrift in Kupferplatte ändern. Wir machen 15 für die Größe und dann für die Farbe, wir werden diesen dunkelblauen Farbklick wählen. OK, stellen wir sicher, dass hier unten alles auf Null gesetzt ist, und dann können wir voran gehen und die erste Zeile eingeben, alle auswählen und fett machen. Es ist also ein bisschen zu groß. Ich möchte sicherstellen, dass ich in der linken Seite der ersten Spalte und der rechten Seite der letzten Spalte bleibe , also werde ich mein Textil wieder greifen, Hand wählen alles und ändern die Größe, bis es innerhalb dieser Grenzen passt. Also lasst uns 107 ziemlich nah versuchen. Also Text, um wieder alle auszuwählen und es sieht so aus, als ob 105 perfekt sein wird. Und dann in einer zweiten Zeile mit unserem Textwerkzeug wird eine Realität eingeben. Machen wir es mutig, genau da drüben. Lassen Sie uns voran und legen Sie sie in eine neue Ebenengruppe. Es wird Heldeninhalt genannt, und dann werden wir unsere Auswahl in diesem Bereich treffen. Also genau hier und dann mit unserem Ausrichtungstool wird voran gehen und es auswählen. Aber lassen Sie uns weitermachen und alles andere ausschalten. Das ist darüber. Wir können es tatsächlich packen. Und dann kam eine Linie zum Auswahlzentrum und zur Mitte von Target in a de select alle diese wieder an und diese organisiert sind Ebenen nur ein wenig hier. Ich werde eine neue Ebenengruppe namens Social Proof erstellen, und wir werden all unsere Logos hier drinnen setzen. Und dann noch eine neue Ebenengruppe namens Hero und das war's. Unser Heldenbereich ist jetzt in erledigt. Das nächste Tutorial beginnt mit der Arbeit am ersten Teil des Körpers, Also, wenn Sie bereit sind, damit zu beginnen, nun, lassen Sie es uns tun. 47. Body Teil 1: Hallo und willkommen zurück. Alles klar, der nächste Teil unseres Entwurfsprojekts besteht darin, vier Spalten mit Informationen zu erstellen, die helfen die Dienstleistungen ihrer Kunden an ihre Interessenten zu verkaufen. Also werden wir vier verschiedene Abschnitte gleichmäßig entlang drei Spalten unseres Rasters aufteilen. Wir werden einen Titel und einige Informationen hinzufügen, die ein Ausschnitt dessen sein werden, worum es bei diesem Dienst geht. Und wenn das den Interessenten verleitet, können sie auf den Titel oder das Bild klicken, um zur Live-Event-Seite oder zur Videoproduktionsseite zu navigieren , um mehr über die speziellen Arten von Diensten zu erfahren, die sie sind interessiert an. Und wie faras die Bilder gehen, werden wir sie in einen Kreis und einen Schlagschatten legen, einen Strich erzeugen, und in Bezug auf die tatsächlichen Bilder, die ich verwendet habe, verwende ich nur einige Bilder aus dem Verschlussmaterial. Wir können tatsächlich das Wasserzeichen auf den Bildern sehen, und das bedeutet nur, dass die Bilder urheberrechtlich geschützt sind. Und wie Sie wissen, um sie auf einer Lebensseite zu verwenden, müssen Sie,um sie auf einer Lebensseite zu verwenden,die volle Lizenz von diesen Bildern erwerben und dann von Ihren Kunden zurückerstattet werden. Also, wenn Sie genau die gleichen Bilder herunterladen möchten. Gehen Sie zu Shutter stock dot com und geben Sie diese Nummer ein, um nach dem ersten Artikel zu suchen. Diese Nummer für das zweite Bild, und dann dieses Foto ich d für dieses Bild. Und dann endlich, dieses Foto, das ich für dieses Bild d. Also gehen wir weiter und klicken Sie auf diese kleine Lupe, rechten Maustaste, wählen Sie Bild kopieren und fügen Sie es dann in unsere Dokumente ein. Okay, gehen wir weiter und machen das für jedes der Bilder. Ich habe eine schwebende Auswahl für diese, also werde ich mit der rechten Maustaste klicken und auf Neue Ebene auswählen. Okay, lassen Sie uns die umbenennen. Ich nenne das hier Konsultationen, Live-Audio-Videoproduktionen und Live-Events. Ich werde auch die Reihenfolge neu anordnen, dass sie in wollen Live-Events zuerst diese eine nächste und dann diese 1/3. Okay, jetzt haben wir unsere Bilder. Wir müssen fortfahren und beginnen, sie auf der Grundlage der Anzahl der Spalten, die wir haben, und der Anzahl der Bilder neu zu dimensionieren . Also haben wir 12 Spalten mit vier Bildern, also werden wir sie drei Spalten breit machen. Lassen Sie uns also unsere Messwerkzeuge greifen, damit wir herausfinden können, wie viele Pixel breit sind. Wir müssen unsere Bilder machen, und es sieht aus wie 275 Pixel breit. Also werde ich meine Bilder neu skalieren, so dass sie ein bisschen größer sind als das. Also lasst uns eigentlich 300 Pixel hoch machen. Lassen Sie uns also unser Skalierungswerkzeug mit Shift Plus s greifen. Stellen Sie sicher, dass sie miteinander verbunden sind, und wählen Sie 300 für die Höhe. Und lassen Sie uns das für jedes der Bilder tun. Okay, mit entfernt gesagt, bewegen Sie sie einfach nach unten in Position hier. Eigentlich sollte man zuerst diese eine zweite Hand sein, diese 1/3. In Ordnung. Das war der leichte Teil. Jetzt kommt das lustige Zeug. Also unser nächster Schritt ist es, einige Kreise zu erstellen, um unsere Bilder zu platzieren und zu schleppen. Fügen Sie ihnen auch einige Schlagschatten hinzu. Lassen Sie uns zuerst unsere Helden- und Kopfzeilenabschnitte ausschalten, und greifen Sie dann Ihr Ellipsenwerkzeug in den Werkzeugoptionen. Stellen Sie sicher, dass Sie ein festes Seitenverhältnis ausgewählt haben, und wir möchten unseren Kreis drei Spalten breit machen, also ziehen Sie einfach einen Kreis aus und wir wissen, dass die Größe bis 75. Also geben Sie das in und erstellen Sie dann eine neue Ebene namens Kreis und dann mit unserem Bucket Fill Tool, wir werden es mit Weiß füllen und dann de select. Lassen Sie uns auch die Layer-Grenze ändern, indem Sie auf Ebene gehen und den Inhalt zuschneiden auswählen. Und jetzt schaffen wir einen zweiten Kreis, der unser Bild halten wird. Wir werden diesen Kreis auch kleiner machen, so dass, wenn er in diesen Kreis passt, der untere Kreis unseren Gewichtsstrich für uns erzeugt. Also gehen wir voran und tippen Sie auf 65. Für die Größe erstellen wir wieder eine neue Ebene namens Image Circle, und dann füllen wir sie mit Weiß aus. Wir müssen auch den Inhalt von der Ebenengrenze abschneiden und dann mit unserem lahmen it-Werkzeug klicken wir auf die erste Ebene. Holden, Ihre Umschalttaste und klicken Sie auf die zweite Ebene. Dann wollen wir relativ zum ersten Element setzen und Mitte und die Mitte des Ziels ausrichten . Und jetzt ist unser Bildkreis in der Mitte des unteren Kreises. Alles klar, schalten wir den M-Kreis aus. Wir greifen diese Kreisschicht. Wir werden wieder auf Ebene gehen und Ebene zu Bildgröße auswählen, weil ich dieser Ebene einen Schlagschatten hinzufügen möchte . Und wenn wir die Ebenengrenze nicht erhöhen, werden Schlagschatten nicht so angezeigt, wie wir in den vorherigen Abschnitten gesprochen hatten. Lassen Sie uns also nach oben gehen, um Licht und Schatten Schlagschatten zu filtern und dann anpassen, um Ihre anderen Abschnitte zu passen . Oder zumindest bekommen Sie es nahe, weil es sich immer noch nicht erinnern, was ich verwendet habe. Ich denke, es war so etwas und dann, denn meine Deckkraft war 1.6 Jetzt können wir wieder auf Ebene gehen und wieder zum Inhalt zuschneiden und Ihren Bildkreis einschalten . Okay, lassen Sie uns unser Bild in den Kreis bringen. Jetzt greifen wir Live-Events und verschieben sie nach oben, und verwenden Sie auch Ihr Verschiebungswerkzeug, um es über diesen Kreis zu bewegen. Jetzt möchte ich dieses Bild auf eine bestimmte Weise komponieren, so dass der Vordergrund in der Mitte des Kreises ist . Nun, es ist schwer zu bestimmen, wie das geht, wenn wir unseren Kreis nicht sehen können. Aber wenn wir auf den Kreis klicken, sehen wir die Ebenengrenze und dann mit der Auswahl einer Ebene oder Führung, die mit unserem Verschiebungswerkzeug ausgewählt wurde, können wir auf das Bild klicken und dann innerhalb dieser Ebenengrenze positionieren, die wir sehen können . Sobald wir losgelassen haben. Es wird verschwinden, und wir können die Komposition nicht mehr bestimmen, es sei denn, wir klicken auf diesen Bildkreis und beginnen von vorn. Das werde ich mitmachen. Das ist in Ordnung mit mir. Jetzt werde ich mir meine unscharfe Auswahl holen. Stellen Sie sicher, dass Ihr Bildkreis ausgewählt ist, und klicken Sie in die Mitte, um eine Auswahl für diese Form zu treffen . Gehen wir voran und kehren die Auswahl zurück zu Live-Events um. Fügen Sie eine Ebenenmaske mit Weiß hinzu, stellen Sie sicher, dass Schwarz auf den Hintergrund gesetzt ist und drücken Sie dann Löschen oder Ihre Rücktaste und Boom ! Ihr Bild ist jetzt auf diese Form beschränkt. Wie cool ist das? Ich liebe es. In Ordnung. Das ist ziemlich genial. In Ordnung, wir weiter und gehen Sie zu Bild Kreis und erstellen eine neue Ebenengruppe namens Kreise. Lassen Sie uns beides hineinlegen, und jetzt müssen wir dies nur dreimal für die anderen Bilder duplizieren. Ich werde mein Bewegungstool greifen, den aktiven Lier verschieben, und ich werde ihn ganz rechts bewegen, und ich muss auch diese Gruppenebene nach unten verschieben, damit ich alles in der richtigen Reihenfolge habe . Machen wir diese 3. 1 und dann wird dieser die 2. 1 sein und lassen Sie uns diese Kreise eins bis vier umbenennen . Lassen Sie uns nun voran und erstellen Sie eine neue Ebenengruppe für Live-Events und die Kreise. Nennen wir es Bild eins, und lassen Sie uns unsere Hilfslinien einschalten, und dann werden wir diese Gruppen-Ebene so verschieben, dass sie links neben der ersten Spalte ausgerichtet ist . Also genau da sollte es vorerst gut sein. Und dann werden wir unsere anderen Kreise nehmen und sie dort platzieren, wo sie sein sollten. Und dieser sollte in der vierten Spalte auf der linken Seite sein. Und lassen Sie uns weitermachen und diese auch in Position bringen. Lassen Sie uns nun unsere Bilder in Position bringen, je nachdem, wo sich ihr Kreis befindet. Ich werde alle Kreise ausschalten, an denen noch nicht gearbeitet wurde, und wir werden unser Bild auf diese Form beschränken. Jetzt wählen wir einen Kreis aus, wählen Sie eine Ebene unserer Führung, und verschieben Sie dann Ihr Bild an Ort und Stelle. Jetzt müssen wir nur unsere Fuzzy greifen, wählen Sie Werkzeug, eine Auswahl in grün, und fügen Sie dann eine Ebenenmaske, um das Bild löschen oder Rücktaste und dann die Auswahl. Okay, also müssen wir das nur noch zwei Mal wiederholen. Okay, lassen Sie uns weitermachen und einige neue Ebenengruppen für jeden dieser Kreise hinzufügen. Jetzt, mit unserem Lehman-Tool, werden wir sie alle nach oben ausrichten. Wählen Sie also Ihre erste Umschalttaste und klicken Sie auf die anderen. Erstes Element noch und eine Linie nach oben. In Ordnung, also haben wir noch viel mehr zu tun. Wir müssen unsere Titel in unseren Absätzen hinzufügen, aber die Tutorials werden ein wenig lang. Gehen wir also weiter und fahren Sie mit dem Rest dieses Abschnitts im nächsten Tutorial fort. 48. Body Teil 2: Hallo und willkommen zurück. In Ordnung, wir werden diesen Teil unserer Körperabteilung fertig machen. Wir werden einige Inhalte hinzufügen, einen Hintergrund ausrichten, alles organisiert, sind Ebenen und wird gut zu gehen sein. Lassen Sie uns also voran und beginnen Sie mit unserem Textwerkzeug. Und lasst uns den Funt ändern. Ich mache es fett und lass es uns 24 für die Größe machen. Und ich will die dunkelblaue Farbe für diese Schlagzeilen. Also lasst uns voran gehen und die austippen. nun Wenn ichnunmeine Escape-Taste drücke, wird es mich aus diesem Textfeld holen und dann kann ich weitermachen und ein anderes Werkzeug greifen, ohne diese bestimmte Verknüpfung zum Textfeld hinzuzufügen. In Ordnung, lassen Sie uns Paul all diese Schichten aus. Lassen Sie uns sie auch so organisieren, dass sie in der richtigen Reihenfolge sind. Und dann schalten wir unser Raster wieder ein und benutzen unser Rechteck-Auswahlwerkzeug und unser Ausrichtungswerkzeug, um es an der Mitte dieser drei Spalten auszurichten. Lassen Sie uns weiter und schalten Sie unseren Helden und Header Abschnitt sowie, so dass wir weiter gehen und dies ausrichten können und wir müssen es wieder auf Auswahl und dann eine Linie Mitte des Ziels setzen . Gehen wir weiter und machen das Gleiche für die anderen drei Schlagzeilen. Alles klar, gehen wir weiter und greifen jede der Ebenen. Wir tun in Ihrem Schiff, K wählen Sie alle vier und dann eine Linie nach oben. Lassen Sie uns voran und legen Sie sie in eine neue Ebenengruppe sowie Schlagzeilen genannt. Ich werde es auch schnappen, damit ich es einfach etwas nach oben schieben kann, möchte einfach nur vergrößern. Also, was ich tun will, ist, dass ich das einfach nach oben ziehen will, ohne es weg von dort zu bewegen, wo es sein soll. Es ist also immer noch zwischen den Säulen zentriert. Ich werde hier nur einen Leitfaden hinzufügen. Auf diese Weise kann ich es einfach entlang dieses Leitfadens platzieren. In Ordnung? Ich kann diesen Kerl jetzt entfernen, weil ich ihn nicht mehr brauche, zumindest vorerst. Also für unseren Absatz, wir werden nur einen Dummy-Text greifen. Wir brauchen nicht viel. Ich nehme nur ein paar Zeilen hier, kopiere es, und dann erstelle ich mit meinem Textwerkzeug ein Textfeld und füge es dann einfach ein. Wir müssen auch die Schriftart selbst ändern. Also wähle ich alles aus und ändere es in Georgia 12 für die Größe, und dann werden wir die dunkelgraue Farbe verwenden, die wir zuvor benutzt haben. Ich werde das nur ein bisschen mitbringen, damit es mit unserem Text hier und hier übereinstimmt. Und dann können wir in unseren Werkzeugoptionen nach links und rechts auswählen, um es auszufüllen. Ich werde es nur ein bisschen auf beiden Seiten erhöhen. Und jetzt ist alles die Linie genau da. Ordnung, lasst uns da raus, indem wir unsere Fluchttaste drücken, und wir werden weitergehen und verkleinern und diesen Absatz dreimal duplizieren. Ziehen wir es aus der Schlagzeilengruppe heraus und duplizieren Sie es und bewegen Sie sie dann einfach über. Gehen wir weiter und schalten unser Gitter wieder ein. Und die Zeile sind Absätze in der Mitte dieser drei Spalten, genau wie wir es vorher getan haben. In Ordnung, halten wir die Umschalttaste gedrückt und wählen alle Ebenen aus, damit wir sie oben ausrichten können. Lassen Sie uns fortfahren und sie in Ordnung bringen und dann in Absatz eins bis vier umbenennen. Alles klar, wir müssen hier ein wenig Platz zwischen den Absätzen und unseren Bildern hinzufügen. Also lasst uns voran gehen und den Abstand zwischen hier und hier messen. Also habe ich 21 Pixel. Ich werde hier die gleiche Menge Platz hinzufügen, lass uns und ihr Führer. Und dann können wir uns einfach unsere Bilder hier schnappen. Lassen Sie uns alle vier in eine neue Ebenengruppe setzen, okay? Wir haben nur noch ein paar Dinge zu tun, und das ist, um unsere Schichten nur ein wenig zu organisieren. Und dann müssen wir all diesen Inhalt nehmen und ihn direkt in der Mitte unserer Dienste Hintergrund von oben nach unten ausrichten . Lassen Sie uns voran und greifen Sie unsere Paar Ruhe Ebene und erstellen Sie eine neue frühere Gruppe, um alles in es zu setzen war es Body Services nennen und dann werden wir all diese Inhalte innerhalb, außer für den Service-Hintergrund. Lasst uns das einfach für einen Moment auslassen. Nun, um dies auszurichten, wenn wir diese Körperservice-Schicht auswählen, werden Sie die Layer-Grenze bemerken und wir können sehen, dass es hier eine Menge Leerraum oder leeren Raum gibt, und es gibt keine an der Spitze. Wenn wir also das mit unserem Ausrichtungswerkzeug ausrichten, wird es es nicht perfekt in der Mitte unseres Ziels zentrieren. Aufgrund dieses zusätzlichen Platzes wird es mehr Platz in den Haaren geben als hier oben. Also, wie Sie wissen, was wir tun können, ist, dass wir die Ebenengrenze zuschneiden können, um genau unter unsere Bilder genau hier zu passen. Das einzige Problem ist, wie Sie wissen, dass es diesen Schlagschatten abschneiden wird, und wenn Sie dann die Ebenengrenze erhöhen, werden die Schlagschatten nicht zurückkehren. Also, im Grunde, wenn Sie es zuschneiden, wird es die Böden der Schlagschatten löschen. Und das wollen wir nicht, denn das wird diesen visuellen Effekt entfernen. Also hier ist, wie wir es umgehen werden. Wir werden diesen Gruppenspieler duplizieren und das Original ausschalten. Also jetzt können wir in diese Gruppenebene gehen und alle Ebenen finden, die zu groß sind und dann den Inhalt auf den unteren Rand der Kreise zuschneiden, und dann können wir unser Ausrichtungswerkzeug Zehenausrichtung verwenden, oben nach unten. Und dann können wir unsere andere Gruppen-Ebene greifen, schalten Sie es wieder ein und verschieben Sie es manuell in Position und es wird perfekt ausgerichtet. Du hast also nur ein bisschen Arbeit zu erledigen. Wir werden hier reingehen. Wir werden unsere Bilder finden. Lassen Sie uns zum 1. 1 gehen und wählen Sie unseren unteren Kreis und wir konnten sehen, dass die Ebenengrenze unterhalb des Kreises ist. nun Wenn wirnunzur Ebene gehen und beschnittene Inhalte auswählen, erhalten wir eine Nachricht. Aber sagen, dass es bereits auf seinen Inhalt zugeschnitten ist. Und das liegt an diesem Schlagschatten, die Schlagschatten sind tatsächlich bis zum Rand hier gefiedert. Was wir also tun müssen, ist, dass wir die Layer-Grenze manuell auf den Rand des Kreises selbst setzen müssen . Und das können wir mit unserem Rechteck-Auswahlwerkzeug tun. Und ich mache mir keine Sorgen um die Seiten. Also werde ich einfach hier anfangen und die Auswahl an den unteren Rand dieses Kreises senken, und dann können wir auf die Ebene gehen und Ausschneiden zur Auswahl auswählen und jetzt haben wir es genau dort, wo wir es wollen. Also müssen wir das für jeden der Kreise tun. Gehen wir also zu den anderen drei Ebenengruppen und machen das Gleiche. Okay, wir weiter und schalten Sie unseren Heldenbereich hier aus, wenn Sie es eingeschaltet haben, und es sieht so aus , als hätten wir den Platz reduziert. Aber wir haben noch etwas Platz dort, und das liegt wahrscheinlich an den Bildern oder den anderen Kreisen. Gehen wir also zurück in sie und klicken Sie auf jede Ebene, so sieht es so aus, als ob die Bildebene dort etwas niedriger ist. Dieser Kreis ist in Ordnung, also machen wir das Gleiche für jedes der Bilder. Alles klar, gehen wir weiter und greifen unsere Rechteck-Auswahlwerkzeuge, damit wir eine Auswahl der Höhe unseres Hintergrunds treffen können . Denken Sie nun daran, dass wir den Servicehintergrund nicht auswählen können, da die Layer-Grenze zu hoch ist, und wenn wir sie erneut zuschneiden, werden wir diesen Schlagschatten löschen. So ist es einfach einfacher, eine Auswahl zu treffen und dann unser Lame it Tool zu verwenden. Nehmen Sie es relativ zur Auswahl und dann eine Linie Mitte von Ziel K. Gehen Sie voran und wählen Sie Ihre andere Gruppen-Ebene einschalten und dann mit Ihrem Verschiebenwerkzeug aus. Gehen Sie einfach voran und klicken Sie darauf und verwenden Sie dann Ihre Pfeiltasten, um es nach unten zu bewegen. Lassen Sie uns voran und löschen Sie die Körperdienste. Kopieren und boom. Es ist jetzt perfekt von oben nach unten ausgerichtet. Wie cool ist das? In Ordnung, das ist also deine Arbeit für solche Situationen. Und wir müssen nur unsere Services-Hintergrundebene innerhalb dieser Gruppenschicht platzieren, und wir sind alle mit diesem Abschnitt ihres Körpers fertig. Herzlichen Glückwunsch. In Ordnung. Im nächsten Tutorial werden wir weitermachen und anfangen, an den Audio-Samples Teil des Körpers zu arbeiten. 49. Audio-Teil 1: Hallo und willkommen zurück. Der nächste Teil unseres Projekts besteht also darin, den Audio- und Video-Samples zu erstellen, und wir haben viel zu tun. Also werden wir das wahrscheinlich in drei, vielleicht vier verschiedene Vorträge aufteilen . Und in diesem Tutorial werden wir voran gehen und anfangen, unsere Bilder zu packen, vielleicht ein paar Knöpfe an einem Text zu machen und dann im nächsten Tutorial, beginnen, alles zusammen zu setzen. Lassen Sie uns also voran gehen und beginnen, indem wir unsere erste Überschrift für diesen Abschnitt erstellen. Lassen Sie uns die Schriftart auf Kupferplatte und die Größe bei 48 ändern, dann ist die dunkelblaue Farbe auch für diese. Und dann gehen Sie einfach voran und tippen Sie folgendes aus. Ich wähle alles aus und mache es auch fett. Ich mache mir keine Sorgen über die Ausrichtung. Wir gehen weiter und machen das im nächsten Tutorial, also werde ich es vorerst hier hochziehen. Die andere Sache, die wir tun müssen, ist, dass wir die Leinwandgröße vergrößern müssen, weil uns der Platz ausgeht . Lassen Sie uns also zur Bildleinwandgröße gehen und machen Sie es 5000 für die Höhe stellen Sie sicher, dass es entsperrt ist , und klicken Sie dann auf Größe ändern. Also das andere, was ich tun muss, ist, dass ich meine Hintergrundebene hier greifen muss, den Buchstaben D drücken als den Buchstaben X, der uns weiß für den Vordergrund gibt, und dann können wir es mit unserem Eimer-Füllwerkzeug ausfüllen. Aber wir müssen zuerst auf Ebene gehen und Ebene zu Bildgröße auswählen, um Delayer-Grenze zu ändern . Und jetzt können wir voran gehen und das mit Gewicht ausfüllen. Lassen Sie uns voran und erstellen Sie unseren Hintergrund für unsere Audio-Sektion. Im Audiobereich müssen wir also Hintergründe haben, weil wir einen Schlagschatten haben, der die oberste Wiedergabeliste von der unteren Wiedergabeliste trennt . Also werden wir zwei Formen für den Hintergrund erstellen. Also greifen Sie Ihr Rechteck auswählbar und stellen Sie sicher, dass Sie behoben haben ausgeschaltet und klicken Sie dann einfach heraus und zeichnen Sie eine Form, weil wir eine benutzerdefinierte Größe von 11 76 von 830 dann mit Befehl oder Kontrolle und dem Buchstaben Ctun mit Befehl oder Kontrolle und dem Buchstaben C werden Wir gehen kopieren, vergewissern Sie sich, dass Ihre Hintergrundebene noch ausgewählt ist und dann Befehl oder Steuerelement sowie den Buchstaben V, um sie nach rechts einzufügen. Klicken Sie hier auf Ihre schwebende Auswahl und wählen Sie eine neue Ebene aus. Okay, ich werde nur mein Umzugswerkzeug benutzen, um es ein bisschen nach oben zu bewegen. Und ich möchte auch die Ebenengrenze ändern, um das Bild anzupassen, da wir einen Schlagschatten hinzufügen müssen . Gehen wir also zu Ebene Ebene zwei, Bildgröße. Gehen wir weiter und machen unsere Drogen-Schattenfilter, Layton Shadow und Schlagschatten. Alles klar, wir machen noch eine Box für den oberen Teil der Playlist. Also zurück zum Rechteck wählbar. Und dieses Mal werden wir 11 machen. 76 für die mit und 360 für die Höhe. Stellen wir sicher, dass wir unsere Auswahl in unserem Dokument haben. Gehen Sie zurück zur Hintergrundebene kopieren und einfügen Sie erneut und klicken Sie dann mit der rechten Maustaste auf eine neue Ebene. Erhöhen Sie die Ebenenbegrenzungsgröße erneut, und fügen Sie diesem Layer dann einen Schlagschatten hinzu. Lassen Sie uns auch diese Ebene über die andere Ebene verschieben und lassen Sie uns diesen Hintergrund der oberen Wiedergabeliste in einen Audio-Sample-Hintergrund umbenennen . Wir können voran gehen und uns dieses Top holen und es einfach nach oben bewegen. Jetzt können Sie feststellen, dass der Schlagschatten hier, hier und hier im Vergleich zu hier in diesen Bereichen viel dunkler ist . Und das liegt daran, dass wir einen weiteren Schlagschatten auf einen anderen Schlagschatten legen, also macht es dunkler. Also lasst uns weitermachen und das reparieren. Wir greifen unser Rechteck-Auswahlwerkzeug und treffen eine Auswahl. Ich muss sicherstellen, dass ich den größten Schaden von diesem Schlagschatten bekomme. Also ist es direkt darüber. Und dann werden wir eine Ebenenmaske Weiß erstellen, stellen Sie sicher, dass schwarz auf den Hintergrund gesetzt ist und dann löschen oder Rücktaste Taste. Damit wird der Schlagschatten von den Seiten entfernt. Wir haben noch ein bisschen mehr hier, also gehen wir weiter und Graham sind richtig Kribbeln Auswahlwerkzeug hier wieder entlang der Schilder zu gehen und dann werden wir es auch von dort löschen. Und dann das Gleiche an der Seite. Okay, wir haben unsere Schlagschatten im Hintergrund. Lasst uns weitermachen und ein paar Bilder schnappen. Also das erste, was wir tun werden, ist eine Google-Suche nach einem Sound Cloud Logo. Ich werde dieses hier auswählen ist 300 mal 300 es ist ein PNG-Dateien, so stellen Sie sicher, dass Sie eine PNG-Datei haben und dann mit der rechten Maustaste auf das Bild, kopiert das Bild und dann gehen Sie weiter und fügen Sie es mit Commander Control und dem Buchstaben V und dann auf die verschiebbare Auswahl, wählen Sie eine neue Ebene aus. Und dann bekommen wir eine kleine Luftmeldung, die besagt, dass es zur Schicht Mass gehört , weil das ist, was ich ausgewählt hatte, bevor ich eingefügt. Also wollen wir das nicht tun. Und ich wollte Ihnen nur zeigen, dass, falls Sie dieses Problem jetzt oder in Zukunft haben, ich das mit Commander Control und den Briefen rückgängig machen werde. A. Wenn Sie also aus der Zwischenablage einfügen, möchten Sie keine Ebenenmaske oder eine Ebene haben, die die Ebenengrenze kleiner ist als das Element , in das Sie einfügen. Am besten ist es also, Ihre Hintergrundebene zu greifen, da sie eine Ebenengrenze hat viel größer ist als unser Bild. Und dann können wir das in ein Tempo einfügen und es zu einer neuen Ebene hinzufügen, und dann müssen wir diese Ebene nur über alles andere verschieben, damit wir sie sehen können. Lassen Sie uns dieses Logo umbenennen und gehen wir weiter und schieben es hier nach oben, richtig? Wir schnappen uns einfach all unsere Bilder und dann werden wir sie in nur einer Minute skalieren. Oder vielleicht im nächsten Tutorial, werden wir sehen, wie lange dieses Tutorial dauert. Alles klar, wir werden uns sechs Bilder schnappen. Wir gehen zu soundcloud dot com forward Schrägstrich am Meer dash audio, und dann werden wir nur ein wenig nach unten scrollen. Und für das erste Bild wählen wir dieses aus. Das einzige Problem ist, wenn wir mit der rechten Maustaste klicken, gibt es keine Option, dieses Bild zu kopieren. Lassen Sie mich Ihnen zeigen, wie Sie dieses Bild immer noch erhalten können, obwohl es in diesem Menü nicht verfügbar ist. Also hier unten haben wir einen Artikel, der „Inspect“ sagt. Ich glaube, wir haben vorher darüber gesprochen. In den meisten modernen Browsern wird diese Option haben. Und wenn Sie dies nicht tun, müssen Sie entweder Ihren Browser datieren oder einen anderen Browser verwenden. Also ist diese Option in Firefox Chrome und Safari verfügbar, und ich verwende derzeit Chrome. Sobald Sie das ausgewählt haben, wird es den Code für das Element markieren, auf das Sie mit der rechten Maustaste geklickt haben. Und dann hier drüben in der rechten Spalte. Sie werden eine Option für das Hintergrundbild sehen, das dieses Bild hier ist. Also, wenn ich das ausschalten, können wir sehen, dass das Bild verschwindet. Und dann haben wir hier eine URL, die uns zu diesem Bild führt. Kopieren Sie einfach die URL und fügen Sie sie dann in eine neue Registerkarte ein, und dann haben Sie Zugriff auf dieses Bild. Also gehen Sie voran und kopieren Sie das Bild. Wir gehen zurück zur Hintergrundebene und fügen sie ein und fügen dann zwei neue Ebenen hinzu. Jetzt müssen wir nur noch fünf weitere Bilder aufnehmen, und es spielt keine Rolle, welche Bilder du bekommst. Irgendwas davon wird funktionieren. Wir gehen nur mit der rechten Maustaste, inspizieren. Und dann müssen wir nur die URL bekommen. Und Sie können auch einfach mit der rechten Maustaste klicken und Linkadresse kopieren und einfügen. Also gehen Sie weiter, laden Sie fünf weitere Bilder herunter, Adam in Ihr Dokument, und dann fügen wir weitere Informationen hinzu. Und ich werde diesen Teil des Tutorials beschleunigen, damit du nicht zusehen musst, wie ich das mache und Zeitlupe mache. - Ok . Ich ging voran und benannte jedes der Bilder auch um. 01 Bild bis 06 Bild. Also, wenn Sie das noch nicht getan haben, machen Sie das. Und dann werde ich die hier auf die linke Seite schieben. Und dann möchte ich mein Textwerkzeug greifen, damit wir beginnen können, einige Inhalte für jedes der Bilder hinzuzufügen . Und wir werden den Fonds in Georgia umstellen. Eigentlich sollten wir stattdessen diese Schriftart verwenden. Und für die Größe werden wir 18 und dann sind dunkelgraue Farbe. Also gehen wir zurück auf unsere Website hier, und wir werden nur einige dieser Zeilen hier kopieren. Kopieren Sie also diese Informationen und fügen Sie sie dann mit Ihrem Text ein und kopieren Sie dann einfach fünf weitere Zeilen Inhalt und fügen Sie sie ein. Lassen Sie uns weitermachen und diese auch in die richtige Reihenfolge bringen, und dann werden wir sie in einen Inhalt durch 05 Inhalt umbenennen. Lassen Sie uns voran und erstellen Sie einige Inhalte erscheinen und greifen Sie unsere Wellenform Bild, und dann gehen wir weiter und fahren mit dieser Lektion im nächsten Tutorial. Ich denke, für diesen wird es ein wenig größer machen Lassen Sie uns 24 tun. Und ich möchte auch unsere zweite Zeile nehmen und genau das auswählen und in unsere dunkelblaue Farbe ändern . Okay, das letzte, was ist, eine Art Form zu nehmen, gehen wir zurück nach oben. Und dann wollen wir anfangen, diese Wiedergabeliste zu spielen, damit wir sehen können, wie der Timer und die Farbe Orange kommen. Also werde ich nur für fünf Sekunden tun, und dann werde ich meine Bildschirmaufnahme-Software greifen, die in den Mac integriert ist, und dann werde ich nur eine Auswahl treffen, sie erfassen und dann werde ich es in mein Dokument bringen. Also gehen Sie einfach voran und verwenden Sie jede Bildschirmaufnahme-Software, die Sie verwenden Capture auf diese Weise, Form Bild, und dann bringen Sie es in und lassen Sie es so Form umbenennen. In Ordnung, also haben wir noch viel zu tun. Wir müssen unsere Schichten organisieren. Wir müssen Schaltflächen erstellen, und wir werden weitermachen und anfangen, an etwas davon im nächsten Tutorial zu arbeiten. 50. Body Teil 2: Jetzt, da wir alle unsere Bilder und unsere Inhalte haben, lassen Sie uns die Größe der Bilder ändern und alles in Position bringen. Lassen Sie uns voran gehen und deaktivieren Sie diese drei Gruppen Ebenen, und dann werden wir das gesamte Dokument mit Befehl oder Steuerung und dem Buchstaben A auswählen so dass wir unsere Überschrift in der Mitte unseres Dokuments ausrichten können. Jetzt nehmen wir unser Logo und machen es kleiner. Also schnappen Sie sich Ihre Waage, Werkzeugverschiebung plus s und lassen Sie uns 100 für die Höhe tun und dann einfach wieder hier nach oben bewegen , richtig? Das wird das hier rüber bewegen, und ich möchte auch die Größe unserer Art und Weise erhöhen. Also Shift Plus s wieder, und ich werde nur füllen, so viel von der Gegend hier ist, kann ich so richtig über es sollte gut sein . Ich werde voran gehen und eine Auswahl in meinem Weg Form treffen, so dass ich die Ebenengrenze enger auf das eigentliche Bild machen kann . Also beschäftige ich mich mehr mit der unteren und der rechten Seite im Vergleich zur linken oben. Also werde ich einfach dort und dann unter Schicht gehen. Wir werden beschneiden zur Auswahl wählen De Select und ich möchte dies an der Unterseite unseres Bildes ausrichten und ich werde beide in eine neue Gruppenebene setzen. Gehen wir weiter und wählen Sie alle erneut, damit wir dies an der Mitte unseres Dokuments ausrichten können. Jetzt können wir sehen, dass es auf dieser Seite etwas mehr Platz gibt als auf dieser Seite, und das liegt daran, dass unsere Hintergrundbilder auch an der Mitte ausgerichtet werden müssen. Also lassen Sie uns voran und wählen, und wir werden das als nächstes tun. Ich möchte also nicht, dass Teoh die Ebene mit einer Ebenenmaske verbündet, weil wir die Ebenengrenze nicht bis zu diesem Hintergrund ablegen können . Also nehmen wir zuerst unseren Audio-Sample-Hintergrund den größeren, und dann gehen wir nach oben, um den Inhalt zu beschneiden und jetzt können wir unser Ausrichtungstool verwenden um ihn an der Mitte des Dokuments auszurichten. Und dann verschieben wir den anderen manuell. Also lassen Sie uns voran und schalten Sie diese Ebene aus, so dass wir diese eine wählen Sie alle wieder und dann de Select kann voran gehen und greifen Sie diese ein. Ich werde hier reinzoomen, damit ich es mir ansehen kann. Und dann werde ich nur meine rechte Pfeiltaste verwenden, um es nach rechts que Befehl oder Kontrolle in Null zu verschieben , um auf die Schnittstelle zu zoomen. Also müssen wir hier oben einen Knopf machen sowie einige Buttons besitzen hier. Aber lasst uns voran gehen und diese Bilder und den Inhalt zuerst reparieren. Also nehmen wir jedes dieser Bilder und skalieren sie auf eine Höhe von 60. Lassen Sie uns voran und legen Sie ihr oberes Bild hinein sowie unser unteres Bild, und dann werden wir sie alle nach links ausrichten und den Raum gleichmäßig verteilen. Ich muss voran gehen und schalten Sie meine Ebenenmaske hier ist gut, so dass ich sie auswählen kann. Nun, Daniel, umschalttaste und wähle jedes Bild aus. Okay, wir gehen zu einer Linie nach links. Lassen Sie uns nun voran und verteilen Sie den Raum zwischen ihnen im Offset. Warum? Wir werden 90 eingeben und diese Option hier auswählen, um vertikale Zentren zu verteilen. Und jetzt haben wir eine gleiche Menge an Raum zwischen allen von ihnen Jetzt. Sie können sich daran erinnern, als wir an unseren Logos arbeiteten, dass wir das nicht tun konnten, weil die Größe dieser Ebenen sich voneinander unterschieden . Aber wenn die Schichten alle gleich groß sind, sie dann gleichmäßig den Raum. Okay, gehen wir weiter und nehmen unsere Inhalte und verschieben sie in Position, zusammen mit einem der Bilder, denen es entspricht. Lassen Sie uns auch unser Logo in die oberen Bilder einfügen. Okay, jetzt werden wir unseren Inhalt nehmen und ihn an der Mitte unserer Bilder ausrichten. Schnappen Sie sich Ihr Rechteck-Auswahlwerkzeug, treffen Sie eine Auswahl, und dann werden wir die Mitte des Ziels ausrichten. Also lassen Sie uns das für alle verschiedenen Ebenen tun. - Okay , als Nächstes werden wir all diese Inhalte nach links vereinen, also Ausrichtungswerkzeug, Scheißschlüssel. Und dann klicken Sie auf jede der Zeilen. Es ändert sich zurück zum ersten Element und einer Zeile links. Ordnung, nehmen wir all diesen Inhalt, an dem wir gerade gearbeitet haben, und erstellen eine neue Ebenengruppe, die als Bottom Content bezeichnet wird . Geh weiter und nimm das und schieb es hier rüber ein bisschen nach rechts. Also haben wir etwas Platz für unsere Knöpfe. Und ich möchte auch eine Auswahl treffen, um all diese Inhalte direkt in der Mitte dieser Auswahl auszurichten . Und stellen Sie sicher, dass Sie die oberste Wiedergabeliste wieder deaktivieren, damit Sie diesen Inhalt auswählen, wieder in die Auswahl ändern und dann die Mitte der Ziele ausrichten können. Also de select, schalten Sie diesen wieder ein. Werfen wir einen kurzen Blick hier. Okay, also sind wir fast fertig. Wir müssen nur unsere Schaltflächen erstellen und ein paar weitere Elemente ausrichten und unsere Ebenen ein wenig mehr organisieren , aber wir werden das in der nächsten Lektion tun. 51. Audio-Teil 3: Okay, wir sind fast fertig. Wir werden weitermachen und einige Schaltflächen-Organisator-Layer erstellen, und dann werden wir sehen, ob wir noch etwas zu tun haben. Also lassen Sie uns voran und erstellen Sie unsere erste Schaltfläche, erscheinen oben und lassen Sie uns unser Ellipsen-Tool greifen, und wir werden eine Schaltfläche erstellen, die 60 mal 60 ist. Lassen Sie uns unsere dunkelblaue Farbe greifen und füllen Sie sie dann mit unserer Eimerfilterwolle. Aber zuerst müssen wir eine neue Ebene erstellen. Nennen wir es obere Taste. Füllen Sie es in der Auswahl aus. In Ordnung, lassen Sie uns weitermachen und unser Pfoten-Symbol erstellen. Lassen Sie uns unser Rechteck-Auswahlwerkzeug greifen Und im Inneren von hier werde ich nur ein Rechteck zeichnen , und wir müssen auch eine neue Ebene namens Pause-Symbol erstellen. Wir greifen unseren Eimer, füllen das Werkzeug und füllen es mit Weiß aus. Gehen Sie voran und wählen Sie aus. Gehen wir weiter und nehmen das Symbol und duplizieren es. Und dann, mit dem Umzug gesagt, wir werden es einfach hier nach rechts verschieben, nur um ihm ein wenig Platz zu geben und zwischen und dann rechts, klicken Sie auf das Symbol Pause und wählen Sie Zusammenführen nach unten. Ok, es gibt Pause-Symbol. Lassen Sie uns fortfahren und den Inhalt für diese Ebene und die obere Schaltfläche zuschneiden. Und dann gehen wir weiter und setzen sie in eine neue Ebenengruppe namens oberste Schaltfläche. Na gut, lasst uns das packen, damit wir weitermachen und es in Position bringen können. Lass uns voran gehen und es links von unserer Wegform ausrichten, die genau dort ist. So sieht das gut aus und dann die Oberseite des Bildes. Also werde ich einfach mein Bewegungstool benutzen und es nach oben bewegen, so dass es dort oben ausgerichtet ist. Ich muss auch meine Inhalte hier greifen und dann nach unten verschieben, so dass es auch nach oben ausgerichtet ist . Lassen Sie uns voran und erstellen Sie hier eine neue Ebenengruppe für diesen Inhalt. Nennen wir es Top Playlist. Ich werde auch mein Logo nehmen und es aus dieser Gruppenebene herausnehmen, damit wir diesen Inhalt auswählen und ihn am oberen und unteren Rand des Hintergrunds ausrichten können. Also werden wir das tun, indem wir unsere Auswahl treffen und dann, mit ihrem Ausrichtungswerkzeug, werden wir die Mitte des Ziels ausrichten. Ich nehme auch mein Logo und möchte es nur ein bisschen nach oben verschieben. Ich werde nur meine Pfeiltasten benutzen. So genau da drüben. Und dann könnten wir das früher wieder in die Gruppe stecken. Andy Select. Lassen Sie uns fortfahren und eine neue Ebenengruppe für diesen Abschnitt erstellen. Und nennen wir es Audio-Samples. Okay, wir werden den Rest unserer Inhalte hier beenden, und dann legen wir diese Schichten hinein. Alles klar, wir werden jetzt unsere Schaltflächen für unsere unterste Playlist erstellen und genau wie zuvor werden wir mit unserem Ellipse-Tool beginnen und es die gleiche Größe machen, die 60 mal 60 war. Lassen Sie uns eine neue Ebene namens Schaltfläche erstellen und dann greifen Sie Ihre dunkelblaue Farbe und füllen Sie sie in de select, so dass wir es jetzt sehen können. Und das liegt daran, dass es auch unter einigen der anderen Ebenen liegt. Okay, lassen Sie einfach ein wenig hineinzoomen. Lassen Sie uns voran und richten Sie es an der Spitze dieses Bildes, so dass es ziemlich gut aussieht genau dort. Lasst uns weitermachen. Schalten Sie die Führungen aus. Jetzt machen wir einen kleinen Pfeil auf der Innenseite. Das zeigt nach rechts. Also werden wir unsere Vordergrundfarbe hinten Zehenweiß ändern und dann mit unserem Rechteck-Auswahlwerkzeug Rechteck-Auswahlwerkzeug können wir eine quadratische Form machen. Also machen wir es 30 mal 30. Und lassen Sie uns eine neue Ebene namens Pfeil sieht noch nicht wie eine aus, aber es wird und dann gehen Sie voran und füllen Sie diese mit weiß und de select. Nun gehen wir auf Ebene und beschneiden Inhalt, und jetzt sind wir bereit, zu drehen. Also werden wir unser Drehwerkzeug von hier aus greifen, und sobald wir darauf klicken, können wir dann klicken und ziehen, um von hier aus zu drehen. Wir können dieses Feuerzeug hier oben verwenden oder schwächen Typ in einem bestimmten Winkel, und ich will 45 für die Winkel so eng, dass in Klick drehen Jetzt müssen wir nur einen Teil unserer Diamantform ausschneiden , um es mehr wie ein Pfeil aussehen zu lassen. Also werden wir Graham Ellipsenwerkzeug sind und eine ovale Form erstellen und sie dann einfach über diese Diamantform legen . Du bekommst also eine Vorstellung davon, wie es aussehen wird. Lassen Sie uns eine neue Ebene namens Ausschneiden erstellen und füllen Sie sie dann einfach mit einer beliebigen Farbe aus. Gehen Sie voran und de selektieren und erstellen Sie eine neue frühere Gruppe namens Pfeil. Und dann nehmen wir den Schnitt und die Luft vorhin und legen ihn hinein. Und jetzt können wir diese ausgeschnittene Schicht nehmen, um , Form auszuschneiden,indem wir unsere Mischmodi verwenden und ein Rennen auswählen. Okay, gehen wir weiter und greifen unseren Pfeil und zentrieren Sie ihn einfach manuell so genau, dass sie gut aussieht . Und jetzt werden wir eine neue Ebenengruppe für sie namens Hover Button erstellen. Und das liegt daran, dass die anderen Tasten, auf denen nicht schweben, eine andere Blautöne haben. Jetzt müssen wir diesen Hover-Button nur viermal duplizieren. Aber zuerst, lassen Sie uns ein paar dieser anderen Ebenen organisieren, bevor wir anfangen, Mawr zu unserem Ebenenfenster hinzuzufügen , weil es gerade ein wenig überfüllt wird. Ich werde diese Ebene nach oben verschieben, die dann unsere Audio-Samples folgen. Wir haben eine Top-Wiedergabeliste und Hilfe unten Playlist, also werde ich nur das hineinlegen für hin und wieder. Wir haben auch einige Hintergründe, die wir innerhalb jeder Ebenengruppe setzen können. Also lasst uns voran und die reingehen. In Ordnung. So hat das geholfen, unsere Ebenen Panel nur ein wenig zu bereinigen. Gehen Sie voran und bewegen Sie meinen Hover-Button über alles andere für jetzt, damit wir es tatsächlich sehen können. Und lassen Sie uns diese Ebene einmal duplizieren. Ziehen Sie es nach unten, und dann mit unserem Werkzeug zum Verschieben ziehen wir mit unserem Werkzeug zum Verschiebendie Ebene nach unten. Stellen wir sicher, dass es hier eine Linie nach oben ist, und lassen Sie uns fortfahren und die Farbe dieser Schaltfläche ändern. Und wir werden das einfach tun, indem wir die Deckkraft auf etwa 80 fallen lassen. Jetzt, bevor ich es vergesse. Gehen wir weiter und greifen Sie unseren Hover-Button und beschneiden Sie den Inhalt. Und lassen Sie uns das auch für diesen Knopf tun. Und lassen Sie es uns umbenennen Button eins. Lassen Sie es uns duplizieren, und dann fahren wir fort und bewegen es in Position, und dann wiederholen wir das noch zwei Mal. Alles klar, stellen wir sicher, dass alles richtig ausgerichtet ist. Gehen Sie weiter und fügen Sie hier eine Anleitung hinzu, die mit diesem Bild ausgerichtet erscheinen oben, und dann werden wir unsere Schaltflächen greifen und sie in Position bewegen. Okay, ich glaube, wir sind fast fertig. Gehen wir weiter und nehmen Sie alle unsere Schaltflächen und setzen sie in eine neue Ebenengruppe namens Buttons. Und das war's. Unser Abschnitt „Audio-Samples“ ist jetzt fertig, und wir sind bereit, zum Video-Sample-Abschnitt zu gehen, und wir werden das in der nächsten Lektion beginnen. Also, wenn du bereit bist, das zu tun , dann lass es uns tun. 52. Body: Hallo und willkommen zurück. In Ordnung, wir werden weitermachen und an der Video-Sample-Abteilung arbeiten, und wir brauchen ein paar Bilder, um uns anzufangen. Also lasst uns rüber gehen, um sabei dot com auszuwählen und eine Suche nach Live-Konzertbildern zu machen. Jedes Bild reicht. Also geh einfach weiter und wähle einen aus. Ich werde dieses auswählen, und ich werde 12 80 von 8 53 herunterladen. Gehen Sie voran und laden Sie das herunter und fügen Sie es dann zu Ihren Dokumenten hinzu. Wir müssen auch zu Google-Bildern gehen und eine Suche nach YouTube, Videoplattensymbolen und dann unter Tools machen. Ich wählte Medium für die Größe und transparent diese 1 800 von 800. Das ist ein bisschen zu groß, das ist immer noch zu groß. Aber ich denke, wir werden mit dem hier beginnen, und ich werde das hier kopieren und in mein Dokument einfügen. Und jetzt lassen Sie uns diese Ebenen umbenennen und gehen Sie auch voran und schalten Sie sie vorübergehend aus , denn zuerst müssen wir einen Hintergrund für diesen Abschnitt erstellen. Also gehe ich tatsächlich zu unserem Audiobereich und wähle diesen Hintergrund hier aus. Wenn Sie eine Ebene oder eine Hilfslinie auswählen, wird diese Hintergrundebene ausgewählt, wenn Sie darauf klicken, und dann öffnet es alle Gruppenebenen, in denen es sich befindet, und dann gratuliert Sie sie und dupliziert. Und jetzt können wir einfach klicken und ziehen Sie es heraus und benennen Sie es zurück hier nach oben und schließen Sie diese Gruppen-Ebene. Und jetzt muss ich zurückgehen, um die aktive Ebene zu verschieben, damit ich sie anklicken und nach unten ziehen kann . Also richtig über es sollte gut sein, so dass es viel einfacher macht im Vergleich zu versuchen, eine von Grund auf neu zu erstellen. Okay, lassen Sie uns die Größe unserer YouTube-Bildverschiebung plus s für das Skalierungswerkzeug ändern. Und dann, soweit die Größe, werden wir 680 für die Höhe gehen, und dann habe ich eine Breite von 10 20. Wenn Sie ein anderes Bild ausgewählt haben, es auf dem mit anders sein, daher müssen Sie möglicherweise hineingehen und es zuschneiden oder zurückgehen und dieses Bild herunterladen. Also werde ich das skalieren und es einfach hier in Position bringen. Lassen Sie uns voran und zentrieren Sie es innerhalb dieses Hintergrunds. Also mit unserem Ausrichtungstool, gehen wir voran und wählen den Hintergrund, tatsächlich müssen die Audio-Samples zuerst ausschalten. Jetzt kann ich diese Umschalttaste auswählen, auf das Bild klicken und dann eine Linienmitte in der Mitte des Ziels. Okay, lassen Sie uns weiter gehen und einige Schaltflächen auf der linken und rechten Seite des Bildes hinzufügen, die eine Möglichkeit darstellen, zwei verschiedene Videos zu navigieren, die Teil der Wiedergabeliste sind. Also gehen wir zurück zu unserer Audio-Samples-Gruppe zu Ebene, und wir werden eine dieser Schaltflächen auswählen. Gehen wir also zurück zu unserem Verschiebungswerkzeug, wählen Sie eine Ebenenführung aus und klicken Sie auf die untere. Also werde ich voran gehen und greifen Taste für und dupliziert und ziehen Sie es runter, und ich möchte das tatsächlich unter das YouTube-Bild setzen, so dass ein Teil davon dahinter versteckt ist . Also werde ich diesen Knopf umbenennen, richtig? Ich werde es duplizieren und dann nennen Button links. Okay, zurück, um die aktive Ebene zu verschieben. Setzen wir unseren linken Knopf hier rüber und dann unseren rechten Knopf hier drüben. Lassen Sie uns das schließen. In Ordnung, also müssen wir voran gehen und die Größe der Tasten ändern und sie vergrößern. Also greifen Sie Ihre linke Taste Shift plus s und lassen Sie es 90 für die Höhe und die Breite und dann das gleiche für die rechte Taste. Okay, gehen wir weiter und bringen das in Position. Ich möchte diese Tasten von oben nach unten mit dem Hintergrund zentrieren, also werde ich mein Ausrichtungstool wieder greifen und Audio-Samples ausschalten. Also, wie die Hintergrundverschiebung plus die Schaltfläche und dann eine Linie Mitte des Ziels, lassen Sie uns dasselbe für unsere andere Schaltfläche hier tun. Und das andere, was wir tun müssen, ist, dass wir diesen Knopf hier nehmen, den linken, und ihn horizontal drehen müssen den linken, , damit er in die andere Richtung zeigt. Also was? Sie sind linke Schaltflächen-Layer ausgewählt. Wir werden auf Ebene gehen, transformieren und horizontal spiegeln. Ich gehe weiter und klicke auch auf diese Ebene, damit ich den Pfeil und die Schaltfläche ein wenig nach links bewegen kann. Lassen Sie uns vergrößern und unser Messwerkzeug greifen, damit wir die Kante des äußeren Teils der Taste bis zum Rand messen können . des Bildes, so dass wir die gleiche Menge an Platz auf der anderen Seite als auch hinzufügen können. Es sieht also aus wie 67 Pixel. Nehmen wir auch dieses Bild und senken Sie die Deckkraft, so dass es nicht so intensiv ist. Das einzige Problem ist, dass wir einen Teil unserer Schaltflächen haben, die bis jetzt zeigen, was eine einfache Lösung mit unserem Auswahlwerkzeug ist. Ich werde mein Rechteck-Auswahlwerkzeug greifen und eine Auswahl treffen. Lassen Sie uns unsere Hilfslinien einschalten, weil wir hier eine Anleitung haben, die mein Rechteck-Auswahlwerkzeug auch einrastet . Also werde ich den Kerl einfach nach rechts bewegen, nur ein bisschen, um dort zu passen, wo der Rand der Bilder und lassen Sie uns auch die andere Seite überprüfen . Das sieht also gut aus. Jetzt kann ich voran gehen und meine Auswahl treffen. Lassen Sie uns unsere linke Taste greifen und und eine Ebenenmaske und weiß schwarz sagte, um den Hintergrund, und dann löschen oder Rücktaste. Okay, lassen Sie uns die Auswahl behalten. Die Gewichtung ist greifen Sie die rechte Taste und die gleiche Sache Ebene Maske und dann löschen oder Rücktaste Taste. Okay, das kümmerte sich um den Teil des Video-Players. Lassen Sie uns voran und finden Sie unsere YouTube-Play-Schaltfläche und lassen Sie uns voran und skalieren Sie es nur ein wenig rechts über es sollte gut sein, und dann gehen wir weiter und richten Sie es auf den Hintergrund. Okay, jetzt gehen wir weiter und erstellen unsere Kreise, die die Anzahl der Videos in der Wiedergabeliste darstellen . Wir werden ein paar mit einem weißen Kreis und einem orangefarbenen Strich erstellen, und dann eine weitere mit einer einfarbigen blauen Farbe, die das Video darstellt, das zu diesem Zeitpunkt wiedergegeben wird. Also lasst uns unser Ellipsenwerkzeug packen und einen Kreis zeichnen und ihn 26 mal 26 machen. Wir werden eine neue Ebene erstellen, die ich einen Wiedergabelistenkreis nennen werde. Ich möchte auch die orange Farbe aus unserer Kopfzeile auswählen. Lasst uns unser Pipettenwerkzeug greifen und eine Auswahl treffen, also werde ich das verwenden, um diesen speziellen Kreis auszufüllen. Lassen Sie uns de wählen und gehen Sie weiter und erstellen Sie eine neue Ebene, und dann ziehen wir einen kleineren Kreis aus dieser Zeit von 20 x 20. Gehen Sie voran und füllen Sie es in de select. Wir wollen auch beide Ebenen nehmen und den Inhalt zuschneiden. In Ordnung, lassen Sie uns unser Ausrichtungswerkzeug verwenden, das neu ist , um beides und einen Linienmittelpunkt und die Mitte des Ziels auszuwählen. Und dann, natürlich, eine neue Ebenengruppe. Lass uns das viermal duplizieren. Bringen wir sie in die richtige Reihenfolge. Gehen wir weiter und greifen sie und bewegen sie auseinander. Also nenne ich diesen einen Kreis fünf, weil er das Ende sein wird. Ich werde die 4. 1 hier setzen, was eine einfarbige blaue Farbe sein wird. So genau wie zuvor, lesen Graham sind Ellipse Tool. Wir werden bei 26 mal 26. Ich werde eine neue Ebene erstellen. Dann wählen wir unsere dunkelblaue Farbe aus und füllen sie mit dieser Farbe aus. Okay, gehen wir weiter und nehmen diese Schicht. Den Inhalt nageln und zuschneiden, und dann verwenden Sie Ihr Ausrichtungswerkzeug, um alle auszuwählen, damit wir sie ausrichten können. Wählen wir einen liegenden Zeh, unten oder oben. Entweder einer ist in Ordnung, und dann wollen wir verteilen und dann für den Offset werden wir setzen. Warum? Auf Null und x Zehe 100. Probieren wir das aus. Ich denke, das ist ein bisschen zu viel, also gehe ich auf 65 runter. Okay, das gefällt mir. Lassen Sie uns fortfahren und alle diese in eine neue Ebenengruppe einfügen. Sieht aus, als wäre es ein wenig außerhalb der Mitte. Also gehen wir weiter und greifen diese Gruppenebene. Wählen Sie alle aus. Und dann kann ein liegendes Zentrum des Ziels. Gehen wir voran und wählen Sie uns aus. Und schauen wir uns hier an. Wir müssen unsere Schichten hier etwas aufräumen. Lassen Sie uns also voran und erstellen Sie eine neue Ebenengruppe für den Videoplayer und die Schaltflächen. Okay, wir werden den Hintergrund für eine Sekunde rausführen, weil wir all diese Inhalte in der Mitte unseres Hintergrunds ausrichten müssen . Im Moment haben wir hier oben viel mehr Platz im Vergleich zu hier unten. Also werden wir diese Gruppen-Ebene hier greifen und dann Ihr Ausrichtungswerkzeug erneut verwenden, um auf den Hintergrund und dann auf eine Linie Mitte des Ziels zu klicken . Und dann gehen Sie weiter und setzen Sie Ihren Hintergrund auch rein. Ok. Ich werde auch unsere Audio-Samples einschalten. In Ordnung? Ich denke, wir sind alle mit den Audio- und Video-Samples am Meer fertig. Im nächsten Tutorial gehen wir voran und befassen uns mit den Kontaktabschnitten, Also, wenn Sie dafür bereit sind, machen wir es 53. Körperkontakt: Hallo und willkommen zurück. In Ordnung, wir werden an unserer Kontaktabteilung arbeiten, und was wir tun wollen, ist, dass wir ein Bestechungsgeld hinzufügen wollen. Wir möchten Besucher dazu verleiten, uns ihre E-Mail-Adresse mitzuteilen. Wenn sie wirklichInformationen über unser Unternehmen oder die Firma Ihres Kunden herausfinden wollen, dann werden sie diese Informationen frei geben. Wenn sie wirklich Informationen über unser Unternehmen oder die Firma Ihres Kunden herausfinden wollen, Aber einige Leute brauchen vielleicht einen zusätzlichen Schub oder einen Anreiz, diese Informationen zu geben, weil sie entweder nicht wirklich sicher sind, ob sie bereit sind, den nächsten Schritt zu machen, oder sie haben Angst , Spanne zu sein, weil sie ein zu oft Spammed. Ich weiß, wie sich das anfühlt. Ich bin sicher, Sie wissen auch, wie sich das anfühlt. Wenn ich also wüsste, wie man buchstabiert, hätten wir ein Bestechungsgeld, das sie dazu verleitet, uns diese Informationen zu geben. wollen wir es so einfach wie möglich machen, uns zu kontaktieren, ihnen aber auch etwas im Gegenzug geben. Die ursprüngliche Website hatte das nicht. Das Einzige, was sie wirklich hatten, war, uns zu kontaktieren und uns eine Schlange zu schicken. Aber warum? Was ist für mich drin? Also denke ich immer in Bezug auf das, was darin für die Person ist, die die Website besucht. Welche Vorteile werden sie bekommen, wenn sie etwas tun? Der Grund, warum ich das hervorsteche, ist, weil wir nicht nur unseren Besuchern unserer Kunden eine gute Benutzererfahrung bieten wollen . Wir möchten unseren Kunden auch dabei helfen, mehr geschäftliche oder mehr E-Mail-Adressen zu erhalten, damit sie später auf sie vermarkten können . Lassen Sie uns also voran und erstellen Sie unseren Kontaktbereich. Es ist nichts ausgefallenes oder extravagantes. Es wird uns keine Auszeichnungen gewinnen, aber es ist direkt auf den Punkt. Kontaktieren Sie uns für eine kostenlose Beratung oder etwas kostenlos. Also lasst uns weitermachen und das tun. Eigentlich, bevor wir in den Kontakt Abschnitt bekommen, müssen wir unseren Hintergrund für den vorherigen Abschnitt erstellen und all diesen Inhalt in eine eigene Gruppenebene zu setzen . Lassen Sie uns also unsere Hintergrundebene und unser Rechteck-Auswahlwerkzeug greifen und eine Auswahl treffen, damit wir unsere Hintergrundkopie erstellen und einfügen können, und dann die schwebende Auswahl in einen neuen früheren Audio- und Videohintergrund einfügen können. Lassen Sie uns auch die Ebenengrenze nehmen und die Größe erhöhen, indem Sie die Bildgröße auswählen und dann zu Filtern, Licht und Schatten Schlagschatten gehen , um den Schlagschatten für diesen bestimmten Hintergrund zu erstellen. Lassen Sie uns nun voran und erstellen Sie eine neue Ebenengruppe namens Audio Plus Video. Okay, jetzt, da wir das erledigt haben, können wir weitermachen und unseren Kontaktbereich erstellen. Also lassen Sie uns voran und beginnen mit unserem Hintergrund. Zuerst gehen wir weiter und schalten Sie unsere Führungen ein und lassen Sie uns unser Messwerkzeug greifen und 800 Pixel hoch zeichnen . Dann können wir mit unserem Rechteck-Auswahlwerkzeug wieder eine Auswahl treffen, die auf dieser Größe basiert. Und dann, wie zuvor, kopieren Einfügen setzen Sie es auf eine neue Ebene. Wir gehen auf die Ebene und erhöhen die Ebenengrenze, und dann fügen wir unseren Schlagschatten wieder hinzu. Ich werde es umbenennen Kontakt Hintergrund. Alles klar, wir sind bereit, unsere Inhalte hinzuzufügen. Jetzt lasst uns voran gehen und Graham sind Textwerkzeug für die Front. Ich werde Kupferplatte machen. Lassen Sie uns 60 für die Größe tun und sind dunkelblaue Farbe. Ich werde es auch zu fett setzen und dann für ein Bestechungsgeld, werden wir die Schriftart ändern. Lasst uns das auch fett machen. Ich werde auch die Deckkraft auf etwa 90 fallen lassen, nur um es ein wenig Trennung von unserem Titel zu geben . Und ich möchte auch den Text ungefähr die gleiche Breite wie unser Titel machen. Also werden wir die Abstands-Option verwenden. Ich werde nur voran gehen und eine Linie diese zuerst und dann mit unserem Textil-Wochenende, wählen Sie alle und dann erhöhen Sie den Abstand. Das sieht also ziemlich nahe aus, um voran zu gehen und 1.2 zu tun, vielleicht ein bisschen mehr. Versuchen Sie 1.4 und 1.6. Okay, das sieht gut aus. Lassen Sie uns fortfahren und diese Informationen in eine neue Ebenengruppe einfügen. Okay, gehen wir weiter und verschieben diese Informationen nach oben und richten sie dann mit ihrem Lehman-Tool aus. Wir werden zuerst alle auswählen, und wir müssen unsere anderen Ebenen hier oben ausschalten. Vergewissern Sie sich, dass Sie die Auswahl ausgewählt haben und dann einen liegenden Mittelpunkt des Ziels haben. In Ordnung, lassen Sie uns weitermachen und das Formular erstellen. Nagel war zuerst auf unserem Gitter drehen. Sieht so aus, als müssten wir die Größe vergrößern, damit wir sie tatsächlich sehen können, mit unserem Skalierungswerkzeug greifen und sicherstellen können, dass es freigeschaltet ist. Und lassen Sie uns 5100 für die Höhe tun und unsere Formen werden fünf Gittersäulen breit sein. Wir müssen es oben, und dann haben wir eine Spalte auf jeder Seite zur Verfügung, die uns eine symmetrische Form direkt in der Mitte gibt. Also lassen Sie uns voran und Graham sind Rechteck auswählbar, so dass wir unsere erste Formularzeile erstellen können. Lassen Sie uns eine neue Ebene namens Name erstellen, und so weit wie die Größe geht, werden wir die fünf Spalten machen, und wir werden es 50 Pixel tollend machen. Also 4 75 von 50. Lassen Sie uns eine schöne graue Farbe auswählen und dann gehen Sie voran und füllen Sie es in K d Select. Lassen Sie uns es duplizieren und seine E-Mail umbenennen. Nehmen wir auch beide Ebenen und beschneiden zum Inhalt. Lassen Sie uns E-Mail nach rechts bewegen, nur gehen, um sicherzustellen, dass wir alles nach oben ausgerichtet haben, so dass sieht gut aus. Und dann werden wir das Nachrichtenformular wieder mit unserem Rechteck-Werkzeug erstellen, und wir werden 10 Spalten breit machen, und dann, soweit die Höhe, machen wir 360. Erstellen Sie einen neuen Layer namens message und füllen Sie ihn aus. Okay, so weit wie die Abstände. Wir machen gleich viel Platz zwischen diesen beiden Spalten hier und dann dieser Reihe und dem Nachrichtenseil. Und es sieht so aus, als müsste ich meine beiden Rose hier oben oder ein Pixel nach rechts bewegen. Also werde ich wählen Sie eine Ebene oder Führung, so dass ich jede einzelne auswählen kann und dann einfach meine rechte Pfeiltaste, um sie über zu bewegen. Jetzt greifen wir unser Messwerkzeug, damit wir dort 25 Pixel haben. Gehen wir weiter und ziehen 25 Pixel hier runter. Gehen wir weiter und wir führen, und dann können wir diese Straße nach oben bewegen. Ich werde nur meine Pfeiltasten benutzen. Perfekte Dose. Wir brauchen das Gitter nicht mehr. Gehen wir voran und schalten Sie das aus und lassen Sie uns dann diese Ebenen hier organisieren. Jede Nukleargruppe, wir nennen es einfach Form. Lassen Sie uns ihre Etiketten für jeden Teil des Formulars hinzufügen und dann für die Mittel gehen, um diese Schriftart hier zu tun und lassen Sie uns 24 für die Größe tun, und dann werden wir die dunkelgraue Farbe wählen, die wir in früheren Teilen der -Projekt. Gehen Sie weiter und bewegen Sie sich. Nennen Sie ganz oben und wir geben hier den Namen ein. Lass es uns fett machen. Als Nächstes haben wir eine E-Mail, und indem wir die Ebene auswählen, die den Text hinzugefügt hat, wird diese neue Ebene darüber erstellt , was es , einfach einfacher macht, so dass wir uns keine Gedanken darüber machen müssen, sie danach zu verschieben. Okay. Wir werden jetzt alles ausrichten. Okay, nehmen wir hier eine Messung, damit wir die gleiche Menge an Platz auf der anderen Seite hinzufügen können. Also habe ich 18 Pixel. Also noch weitere 18 hier. Okay, wir werden die in die Mitte der oberen und unteren Zeile der Reihe einreihen. Also was? Das Rechteck-Auswahlwerkzeug lässt Krabben. Das sieht so aus, als müssten wir diese aus dieser Gruppen-Ebene verschieben, damit wir sie auswählen und dann eine Auswahl und eine Linie Mitte des Ziels können. Setzen wir das wieder rein, machen das Gleiche für den Namen. Nehmen wir eine Messung für die Spitze dieses Teils. Also habe ich 17 Pixel. Also 17 Pixel hier für Nachricht Kerzen. Geben Sie den Namen zurück, und dann nehmen wir die Form an, und ich werde es einfach ein bisschen nach oben bringen. Okay, geh weiter und schnapp dir dein Rechteck auswählbar. Und für diesen Knopf will ich abgerundete Ecken, wie wir es vorher getan haben. Und Sie können sich erinnern, wenn wir gehen, um zu wählen schwächen, wählen Sie abgerundetes Rechteck von hier. Aber es gibt auch eine Option innerhalb unserer beiden Optionen direkt hier sagt abgerundete Ecken. Und Sie müssen uns in auswählen. Fügen Sie Ihren Radius hinzu, bevor Sie Ihre Auswahl treffen. Gehen wir also voran und geben Sie 20 für den Radius ein. Und dann für die Größe, werden wir 200 mal 85 machen. Ich werde die gleiche orangefarbene Farbe verwenden, die ich zuvor verwendet habe, und ich werde das in de select ausfüllen. Ich möchte nur vergrößern, stellen Sie sicher, dass hier alles richtig ausgerichtet ist. Sieht gut aus. Und was dann? Ihr Textwerkzeug wird weitergehen und die Schriftart in Eisenbahn ändern. Ich werde fett verwenden, Lasst uns versuchen, 24 weiße machen das größer. Versuchen wir es 36, wenn ich 44 versuche. Mal sehen, ob das hineinpasst. Ich wollte nur so groß wie möglich, ohne zu nah an den Rändern zu gehen. Alles klar, das sieht ziemlich gut aus. Alles klar, gehen wir weiter und greifen unser Ausrichtungswerkzeug, damit wir uns ausrichten können. Senden Sie direkt in der Mitte der Schaltfläche. Aber zuerst müssen wir unsere Button-Layer greifen und den Inhalt beschneiden. Und dann können wir unsere Auswahl mit unserem Ausrichtungstool treffen, wenn Änderungen zurück zum ersten Element und dann zu einem Linienmittelpunkt von Zielen und Mitte des Ziels. Okay, also werden wir weitermachen und wieder eine neue Ebenengruppe namens Button erstellen. Lassen Sie uns den Rest dieser Schichten hier aufräumen. Also eine weitere neue Ebenengruppe namens Kontakt und das war's. Wir sind jetzt mit dem Kontaktbereich fertig. Also noch ein Abschnitt links und das ist die Fußzeile. Wir gehen weiter und beenden das im nächsten Tutorial. 54. Fußer: Hallo und willkommen zurück. In Ordnung, also ist der letzte Schritt für dieses Projekt, die Fußzeile zu machen. Wir werden es echt halten. Einfach, Riel sauber. Wir werden nur einen Copyrightvermerk hinzufügen. Einige Social-Media-Symbole und Zutaten Hintergrund für die Social-Media-Symbole verwende ich diejenigen, die wir aus einer vorherigen Lektion heruntergeladen. Also gehen Sie weiter, suchen Sie diese Dateien und bringen Sie sie in Ihr Dokument. Ich ging voran und legte sie in eine bestimmte Reihenfolge, und ich benannte auch jede der Ebenen, die dieses bestimmte soziale Media-Symbol darstellen. Jetzt, da Sie das eingerichtet haben, gehen wir weiter und machen den Grady int Hintergrund, und wir werden tatsächlich zu unserer Kopfzeile gehen und eine Kopie dieses Kopfzeilenhintergrunds erstellen , so dass wir ihn für den Fußzeilenhintergrund verwenden können. Gehen wir weiter und benennen Sie diesen Fußzeilenhintergrund um und ziehen Sie dann einfach diese Ebene ganz nach unten, und dann mit Ihrem Verschiebungswerkzeug klicken Sie auf den Hintergrund, so dass Sie ihn nach unten auf die Leinwand ziehen können . Jetzt, jetzt, an diesem Punkt, wird es ewig dauern. Also, wenn Sie einen Eichhörnchenknopf auf der Maus haben. Sie können das tatsächlich verwenden, um viel schneller zum Ende der Seite zu navigieren. Also, das ist etwas, das Sie in den Einstellungen einrichten müssen, wenn Sie eine Scroll-Taste haben. Also lasst uns voran gehen und das in Position bringen. Und wir haben jetzt eine Menge leeren Platz, also lassen Sie uns in Ernte gehen sind Leinwand bis zum Ende der Fußzeile, minus dem Schlagschatten. Also bin ich bei 42 Uhr. 21 und ich weiß, dass, weil ich meinen Mauszeiger rechts unten und hier unten platziert habe, es uns die Höhe unseres Campus an diesem Punkt sagt. Sobald Sie also die Höhe herausgefunden haben, müssen Sie zuschneiden, um zum Bild zu gehen, wählen Sie die Leinwandgröße und geben Sie sie ein. In Ordnung, ich werde die Ebenengrenze auch für diese bestimmte Ebene beschneiden. Jetzt zeigt es, dass es an diesem Punkt ist, genau hier, und das ist wegen des Schlagschattens, und das ist in Ordnung. Wir brauchen wirklich nichts anderes mit dem Hintergrund zu tun, also lassen wir es einfach da liegen. Lassen Sie uns voran und machen Sie unsere Urheberrechtsvermerk, und dann zum Spaß, Ich werde Railway fett tun und ich werde es auf 12 und weiß für die Farbe setzen. Okay, schalten wir unsere Guides ein und richten wir sie ganz links vom Gitter aus. Gehen wir weiter und schalten unsere Gitter hier ein, und es sieht so aus, als wäre es diese Linie hier. Das ist, wo ich es ausrichten möchte. Und dann lasst uns weitermachen und es ausrichten. Oben Sie auch den unteren Rand des Fußzeilenhintergrunds. Und mittlerweile sollten Sie wissen, wie das geht. Wir werden Graham sind Rechteck wählen Werkzeug Ausrichtungswerkzeug und dann eine Linie zur Auswahl Mitte des Ziels. Okay, können Sie de wählen und gehen Sie weiter und mehr auf den Social Media Icons. Und ich werde das YouTube-Logo den ganzen Weg hier drüben auf der rechten Seite platzieren. Und dann werde ich auch die anderen schnappen. Geh weiter und schalte die Jungs aus. brauche ich jetzt nicht. Alles klar, schnappen Sie sich Ihr Ausrichtungswerkzeug, damit Sie diese nach oben ausrichten können. Ich werde den Offset auf 100 ändern und es sieht so aus, als hätten wir hier mehr Platz als hier und wieder. Das liegt daran, dass dieses Logo größer ist. Wir müssen den Raum hier noch mehr ausgleichen. Aber anstatt zu versuchen, das manuell mit diesen Optionen hier unten herauszufinden, indem Sie Zahlen immer und immer wieder eingeben , bis wir es finden, ist es einfach einfacher, Ihr Messwerkzeug zu greifen und eine Messung zwischen diesen Symbolen hier vorzunehmen , das ist 46. Für mich könnte deine etwas anders sein. - Das ist in Ordnung. Und dann von hier nach hier gehen wir 46, also müssen wir alles nach links bewegen. Aber das machen wir in nur einer Sekunde. Ich möchte voran gehen und ein weißes Overlay für dieses Symbol. Also lasst uns Instagram greifen und eine neue Ebene namens Overlay erstellen. Füllen wir es mit Weiß, und dann müssen wir den Mischmodus von normalen zwei Addition ändern. Und dann mussten wir diese beiden in einer neuen Ebenengruppe platzieren. Sobald wir das tun, wird dann in der Lage sein, unser Symbol in Gewicht zu sehen. In Ordnung, gehen wir weiter und greifen diese vier Ebenen und setzen sie in eine neue Ebenengruppe namens Social Icons. Alles klar, wir sind fast fertig. Gehen wir weiter und schieben wir alles nach rechts. Wir müssen auch den Inhalt beschneiden, und jetzt können wir weitergehen und ihn mit unserem Ausrichtungstool über unsere Auswahl ausrichten. De Select. Lassen Sie uns voran und erstellen Sie eine neue Ebenengruppe für die Fußzeile, und das war's. Unser Webdesign ist jetzt erledigt, genau wie wir es im vorherigen Projekt getan haben. Wir müssen durch unser Webdesign gehen und sehen, ob es etwas gibt, das wir tun können, um das Gesamtdesign zu verbessern . Oder vielleicht haben wir ein paar Fehler gemacht und wir müssen diese korrigieren, bevor wir sie an den Kunden schicken . Also werden wir im nächsten Tutorial an den letzten Optimierungen dieses Webdesign-Projekts arbeiten. 55. Optimieren: Insgesamt denke ich, dass wir die bestehende Website erheblich verbessert haben. Mit unserem neuen Design. Es ist viel benutzerfreundlicher. Es ist viel professioneller. Der Inhalt ist einfacher zu lesen. Das Gesamtlayout ist viel besser als das, was sie auf ihrer ursprünglichen Website haben. Außerdem haben wir einige Informationen hinzugefügt, um Braut Menschen zu helfen, um zusätzliche Informationen einzureichen und ihre E-Mail-Adresse anzugeben. Und mit dem klebrigen Header würden wir es ihnen dann leichter machen, die nächste Seite mit Informationen zu finden, die sie benötigen wenn sie nicht von diesem Bereich aus navigieren. Und natürlich haben wir mit unserem Social Proof Banner hier im Heldenbereich etwas Glaubwürdigkeit hinzugefügt. Also denke ich, dass das Design insgesamt viel besser ist. Aber es gibt einige Fehler und Dinge, die wir tun müssen, um es zu optimieren, um es noch besser zu machen. Und im Grunde ist es der Abstand der verschiedenen Abschnitte sind nicht konsistent. Wir haben hier dieses Element, das nicht richtig mit dem Hintergrund zentriert ist. Wir haben hier eine riesige Menge an Leerraum. Das gefällt mir überhaupt nicht. Dieser Bereich ist unausgewogen und es ist einfach nicht gutes Design. Wir könnten verschiedene Dinge tun, um es besser zu machen. Eins. Wir könnten zwei Spalten mit Audio-Samples erstellen, oder wir könnten diesen Inhalt verschieben und hier ein großes Bild zeigen. In diesem Fall kann dieses Bild, das wir spielen, hier angezeigt werden, so dass Sie es einrichten können, vielleicht um das erste Video automatisch abzuspielen, sobald sie zu diesem Abschnitt navigieren und dann das Bild, welches Bild dem Audio entspricht, wird hier angezeigt. . Aber wenn sie genug Audio-Samples haben, könnten Sie mehrere Spalten im Vergleich zu einer tun, und das füllt nur diesen leeren Raum und gleicht alles aus. Die andere Sache, die wir nicht getan haben, ist das Hinzufügen unseres Hover-Status-Symbols, das wir in der Kopfzeile verwendet haben . Wir müssen es hier einfügen und gruppierte Ebenen erstellen, was darauf hinweist, dass dies in der Tat ein Hover-Zustand ist. Und wenn Sie den Mauszeiger über etwas bewegen, wird es zu dieser Art einer Schaltfläche oder dieser Farbtaste im Vergleich zu diesen anderen Schaltflächen hier unten ändern . Also denke ich, all diese kleinen Dinge sind Dinge, die du im Hinterkopf behalten musst. Denken Sie daran, dies zu tun, dass das gesamte Webdesign und Layout konsistent ist, und das wird Ihre Webseiten viel besser machen, weil Sie auf diese kleinen Details achten . Wir wollen Pixel perfekt. Wir wollen einen geraden Platz zwischen allen Abschnitten und ich sehe hier oben mehr Platz als hier unten. Und wir müssen hineingehen und den Abstand zwischen jedem Abschnitt messen und den gesamten Inhalt entsprechend anpassen . Also entweder ein. Sie können mir dabei zusehen oder B. Wenn Sie bereits alles an dieser Stelle durchgemacht haben und entworfen haben, wissen Sie wahrscheinlich schon, wie das geht, damit Sie voran gehen und gehen und die Abstandsmitte optimieren können alles richtig, wenn Sie es noch nicht getan haben und Sie können eine zweite Spalte erstellen oder ein eigenes Designkonzept erstellen. Insgesamt ist dieses Projekt nur für die Praxis und wieder, wie die anderen Projekte, können Sie dieses spezielle Design nicht in Ihrem Portfolio verwenden. Also das Beste, was zu tun ist, durch all das zu gehen und sich selbst zu denken, Wie können Sie dieses Webseiten-Design noch besser machen? Dies ist wahrscheinlich nicht das beste Webdesign. Du könntest dir wahrscheinlich etwas besseres einfallen als das, was ich erschaffen habe. und das ist das ganze Ziel zu schaffen. Websites, die benutzerfreundlich sind, werden mehr Geschäft für Ihre Kunden generieren und bieten das bestmögliche Gesamtwebdesign basierend auf Ihrer kreativen Vision. Nicht meine kreative Vision, deine kreative Vision. Sie werden sich von meiner Arbeit und von anderen Websites inspirieren lassen. Und dann wirst du diese Inspiration nehmen und etwas ganz Neues erschaffen, basierend auf deiner Vision und deiner Kreativität. Also bin ich ziemlich zuversichtlich, dass die ersten 2 Abschnitte perfekt sind. Alles sollte perfekt in der Mitte ausgerichtet sein, weil ich mich besonders daran erinnere, das Ausrichtungswerkzeug für jedes der verschiedenen Elemente zu verwenden . Lassen Sie uns also voran gehen und werfen einen Blick auf unseren nächsten Abschnitt , der der erste Teil unseres Körpers ist. Und ich denke, wir können das Design dieses Abschnitts ein wenig verbessern, indem wir die Länge unserer Absätze erhöhen . Ich denke, sie sind jetzt zu kurz, und der Text ist zu eng und es macht es irgendwie schwer zu lesen. Also müssen wir den Abstand zwischen jeder Zeile erhöhen. Also gehen wir weiter und tun das für diesen ersten Absatz hier, und wir werden es nur nach links und rechts von unserem Bild hier erweitern. Also über drei Rasterspalten. Und lassen Sie uns diese Informationen kopieren und in ein paar Mal einfügen, um sie auszufüllen. Gehen wir auch zurück zu unseren Werkzeugoptionen hier unten und erhöhen Sie die Linienbasis. Und ich werde zwei, vielleicht drei, für den Abstand machen vielleicht drei, . Einer traf meinen Fluchtschlüssel, um da rauszukommen, damit ich hier alles ansehen kann. Und ich denke, das ist definitiv ah, viel einfacher zu lesen als das hier. Deshalb möchten wir es den Besuchern so einfach wie möglich machen, unsere Inhalte zu lesen. Ansonsten werden sie einfach überspringen, weitermachen, vielleicht sogar die Seite verlassen. Also lassen Sie uns voran und ändern Sie die anderen drei Spalten, um diese auch zu passen. Ich werde einfach das Textfeld hier runter nehmen und es ein wenig nach oben bewegen, weil ich die Oberseiten der nächsten Zeile ein wenig sehen kann . Also will ich das einfach loswerden. Also werde ich diese drei Absätze löschen. Dann werde ich diesen Absatz nehmen und dreimal dupliziert. Lass uns weitermachen und sie in die richtige Reihenfolge bringen und sie dann einfach rüber bewegen. Was für ein Drag and Guideline hier unten ist gut, also kann ich sicherstellen, dass sie alle nach oben gesäumt sind. Lassen Sie uns voran und benennen Sie auch die Absätze um. Okay, ich denke insgesamt, das macht den Inhalt so viel einfacher zu lesen. Und wir haben definitiv die entworfene Qualität erhöht, nur indem wir das alleine tun. In Ordnung, gehen wir weiter und werfen einen Blick und unseren nächsten Abschnitt, und wir können sehen, dass der Abstand hier geringer ist als hier. Ich möchte auch den Speicherplatz hier erhöhen, der der Menge an Speicherplatz entspricht . Also lasst uns unser Messwerkzeug greifen und dies so messen, dass es wie 80 Pixel aussieht. Lassen Sie uns also voran gehen und ziehen Sie 80 Pixel hier oder welche Zahl Sie basierend auf Ihrem Design hatten . Lee raus. Ich muss auch den Abstand zwischen der Überschrift und unserem ersten Abschnitt hier erhöhen . Also werde ich noch 80 Pixel machen, und ich wette, wir brauchen hier unten auch einen Anson-Platz, und sieht auch so aus, als wäre es alles ein bisschen im Zentrum. Ich füge hier einen Führer hinzu. wir sicher, dass diese genau dort aufgereiht sind, wo sie sein sollten. Das hier ist ein bisschen zu weit nach rechts. Also gehe ich zurück und wähle das aus und bewege es so, dass es mit dem anderen Abschnitt darunter ausgerichtet ist. Es wird den Führer rüber bewegen, nur um sicherzugehen. Und ich denke, wir sind gut für die Abstände dort. Ich denke, der Abstand zwischen diesen beiden ist in Ordnung, aber ich möchte hier unten 80 Pixel Platz hinzufügen, also sieht so aus, als wären es mehr als 80 Pixel. Also gehen wir weiter und beschneiden nur ein bisschen. In der Tat müssen wir nicht mal ernten. Wir müssen nur hineingehen und die Hintergrundebene auswählen. Und dann werde ich nur meine Pfeiltasten benutzen, um es nach oben zu bewegen. Okay, gehen wir zum oberen Teil des Abschnitts, stellen Sie sicher, dass alles gut aussieht. Können wir noch einen Schlagschatten haben? Und alles sieht viel besser aus als vorher. Nein, wenn Sie sich mein Design hier ansehen, wenn ich hineinzoomen würde, könnte ich ein wenig lügen über die Spitze sehen, und ich bin mir nicht ganz sicher, was das ist. Ich gehe weiter und navigiere zu diesem Abschnitt die Audio-Samples, und lass uns weitermachen und es ein- und ausschalten. Okay, also verschwindet es, als ich diese Gruppe ausgeschaltet habe. Es muss also etwas im Inneren sein, und ich denke, es ist eigentlich der Hintergrund selbst. Ich gehe voran, navigiere und finde den Hintergrund. Also, das ist es definitiv genau dort. Sobald ich es ausgeschaltet habe, verschwindet die weiße Linie. Also werde ich mein Ebenenmasken-Symbol hier greifen , eine Auswahl treffen und dann werde ich es löschen. Ok? Ich muss schwarz auf den Hintergrund stellen. Also d und dann agiert und löscht dann auf der hinteren Leertaste, um diese Zeile zu entfernen, weil es Schwarz zu diesem Bereich hinzufügt und der Schlagschatten an Ort und Stelle bleibt. Okay, also haben wir das aufgeräumt. Das sieht viel besser aus. Dieser Abschnitt sieht jetzt besser aus. Wir müssen alles andere nach oben verschieben, da ich einen Teil des Abstands vom letzten Abschnitt entfernt habe . Also wieder, wir werden 80 Pixel messen, also muss ich die Kontaktinformationen nach oben verschieben, also werde ich da reingehen,sie finden, sie finden, und dann werde ich nur meine Pfeiltasten benutzen, um sie zu verschieben nach oben. Na gut, gehen wir weiter und greifen auch unsere Hintergründe. Gehen wir weiter und bewegen Sie das nach oben, um den Raum hier oben für den Abstand zwischen diesen beiden Elementen hier zu füllen . Ich nehme den Platz, den ich hier habe, und füge ihn hier hinzu. So fügt das nur Konsistenz in das Gesamtdesign. Also lasst uns voran gehen und das messen. Also bin ich bei 69 que greifen Sie Ihre Form Ebene und gehen Sie vor und bewegen Sie es nach unten. Katalysatoren und ein wenig Platz. Jetzt zwischen unserem Submit-Button und wir werden 25 Pixel verwenden, was der Abstand zwischen hier und hier, hier und hier ist . Also wieder, wir wollen nur Konsistenz zu unserem Design hinzufügen, indem wir gleiche Mengen an Abstand zwischen verschiedenen Elementen hinzufügen. Und schließlich brauchen wir 80 Pixel Platz unter der Schaltfläche. Okay, ich möchte den Hintergrund nach unten verschieben. Jetzt. Ich weiß, dass wir es gerade hochgezogen haben, also müssen wir wieder reingehen und es mit unserem Rechteck-Auswahlwerkzeug mit Weiß füllen . Also lasst uns weitermachen und das tun. Ihr Ich war sehr kurz davor, fertig zu werden. Wir müssen fortfahren und die Größe der Fußzeile erhöhen, so dass sie unserer Kopfzeile entspricht. Also lassen Sie uns voran und machen eine Messung ihrer Fußzeile. Ich bin bei 1 48 und dann ist mein Header selbst 150, also muss ich nicht zu viel enden. Ich gehe voran und gehe zur Bildleinwandgröße und erhöhe sie um zwei Pixel. In Ordnung, jetzt, wo unsere Fußzeile mit unserer Kopfzeile übereinstimmt, denke ich, es gibt noch eine Sache, und das ist der Spiel-Timer oben rechts hier, dass sie schön wären, einen Platten-Timer zu haben , der einen farbigen Balken hat, geht hier über die Spitze. Das passt zu unserer Art Form. Also lasst uns weitermachen und das schaffen. Wir werden es in Audio und Video und auch in Audio-Samples stecken. Also lasst uns da reingehen. Lassen Sie uns einen neuen Layer erstellen. Lassen Sie uns eine orangefarbene Farbe auswählen, die wir zuvor verwenden, und ziehen Sie sie dann mit unserem Rechteck-Auswahlwerkzeug heraus. Also werde ich das machen, denn es muss keine genaue Größe sein. Ich gehe einfach dorthin und dann werde ich das ausfüllen. Ich denke, das ist ein bisschen zu groß oder zumindest ein bisschen zu groß. Jemand geht voran und de select und dann mit meinem Skalierwerkzeug Shift plus s, kann ich voran gehen und die Höhe davon kleiner machen. Aber wir müssen zuerst den Inhalt davon beschneiden, also werde ich fünf wieder skalieren und lassen Sie uns voran gehen und einen Blick werfen. In Ordnung, also denke ich, das fügt nur ein bisschen hinzu. Extra Design zu diesem bestimmten Abschnitt macht es ein wenig ansprechender als es zuvor war . Lassen Sie uns voran gehen und schließen Sie alle diese Gruppen Ebenen. Okay, ich denke, es gibt noch eine Sache, die ich tun möchte, und das ist, fügen Sie unser Schwebe-Hand-Symbol über diesen Button. Gehen wir also zu unserer Kopfzeile und finden Sie das Hover-Symbol, das diese Ebene hier ist, und duplizieren Sie es und lassen Sie uns fortfahren und diese Ebene in diesen Abschnitt verschieben . Ich gehe weiter und klicke auf einen Führer oder Führer auswählen, und wenn ich dann auf diese Schaltfläche klicke, öffnet es automatisch alle Gruppenebenen und zeigt mir die Ebene, auf die ich geklickt habe, also ist dies der Bereich , auf die ich es ziehen möchte. So haben wir bereits den Namen der Ebene richtig als Hover-Schaltfläche beschriftet, und wir müssen nur das Hover-Symbol in Position verschieben. Jetzt. Das letzte, was ich empfehlen würde, um dies zu einem besseren Design zu machen, ist, diesen leeren Raum zu füllen . Im Moment ist es unausgewogen, und es ist nicht sehr gutes Design. Also, was ich empfehlen würde, ist die Erstellung einer zweiten Playlist und platzieren Sie sie hier auf der rechten Seite, und das wird nur den Besuchern mehr Gelegenheit geben, die Art der Arbeit, die sie dio zu probieren . Wenn wir also hier reingehen und uns unsere Playlist ansehen, die sich im unteren Inhalt befindet, könnten wir all diese Informationen entnehmen und duplizieren, sie nach rechts verschieben. Aber ich habe das Gefühl, wenn wir es tun, wird es zu breit sein und der Inhalt wird zu nah am Rand sein. Also lasst es uns schnell ausprobieren. Ich werde meinen Audio-Sample-Hintergrund packen und ihn aus der Gruppenebene herausziehen, und dann werde ich diesen Inhalt duplizieren. Ich gehe weiter und schiebe es nach unten und schiebe es dann nach rechts und es ist zu groß und dann haben wir uns überschneidende Inhalte hier und es ist zu eng hier drüben. Also, was ich dann tun würde, in diesem Fall ist, dass ich tatsächlich mein Geschicklichkeitswerkzeug verwenden und es nach unten skalieren würde. wir sicher, dass es zusammengeschlossen ist. Versuchen wir es mit 500 lassen Sie uns das gleiche für die andere Spalte tun. Und ich denke, das wird uns den zusätzlichen Atemraum geben, den wir jetzt brauchen. Wir müssen voran gehen und beide Spalten herausziehen, so dass wir sie an der Mitte des Hintergrunds ausrichten können . Um dies zu tun, müssen wir sie auch in eine temporäre neue Ebenengruppe einfügen, um sie leichter auszurichten. Lassen Sie uns alles andere ausschalten. Okay, jetzt mit deinem Lima-Werkzeug, mal sehen, ob wir auswählen können, dass der Hintergrund nicht so aussieht, als würde er Zeh arbeiten, also werden wir diese beiden Ebenen nehmen und sie nach oben verschieben. Na gut, versuchen wir es jetzt. OK, also das funktioniert, halten Sie die Umschalttaste gedrückt und klicken Sie auf die Spalten und ändern Sie sie dann erste Element und dann eine Linie Mitte des Ziels. Gehen wir weiter und nehmen Sie den abgetasteten Hintergrund und verschieben ihn zurück in seine gruppierte Ebene. Und jetzt können wir unser Rechteck-Auswahlwerkzeug in der Linie von oben nach unten nehmen. Okay, wir werden das jetzt wieder reinbringen. Dann müssen wir nur diesen Inhalt nehmen und ihn aus dieser temporären gruppierten Ebene entfernen. Lassen Sie uns das löschen. Schließ es auf. Eigentlich noch eine letzte Sache. Wir müssen zurückgehen und diese linke Spalte rechte Spalte erneut benennen, und wir müssen auch den Hover-Zustand von der ersten Schaltfläche entfernen. Also werde ich das löschen, und ich werde auch die Deckkraft dieses hier ändern, da es nicht gespielt wird und wir es auf 80% ändern müssen. Perfekt. Alles klar, lassen Sie uns das alles schließen und werfen einen weiteren Blick auf unser Website-Design. Ich möchte diese wieder auf Befehl oder Kontrolle und Null drehen, um den ganzen Weg hinaus zu zoomen. wir sicher, dass hier alles eingeschaltet ist. Es sieht so aus, als würde ich meinen Videobereich sehen. Da gehen wir. Perfekt. Herzlichen Glückwunsch. Wir sind jetzt fertig, unser Website-Design-Projekt zu verbessern. Und wie ich bereits erwähnt hatte, empfehle ich dringend, dieses Projekt durchzugehen und Ihr eigenes kreatives Design zu kreieren, damit Sie es zu Ihrem Portfolio hinzufügen können. Sobald Sie damit fertig sind, Sie bereit, zum Webdesign zu wechseln. Projekt Nummer vier. Danke fürs Zuhören und einen tollen Tag haben. 56. Projekt 4: Real: Hallo und willkommen zu unserem Webdesign Projekt Nummer vier. Also für dieses Design-Projekt, werden wir eine andere bestehende Website zu nehmen und es neu zu gestalten, um es benutzerfreundlich zu machen und dem Kunden helfen, mehr Geschäft zu verdienen. Und wenn ich dir das ursprüngliche Design zeige, wirst du eine Menge Ähnlichkeiten mit einigen der Projekte bemerken, die wir bereits gemacht haben. Es gibt viele schlechte Websites, die nicht benutzerfreundlich sind. Aber verzweifeln Sie nicht. Wir werden einige neue Dinge in diesem Projekt lernen. Ich werde dir zeigen, wie du etwas von einem Bild entfernst. Also werden wir tatsächlich einige Retusche auf dem Hauptbild machen. Und ich werde Ihnen auch zeigen, wie Sie Symbole aus Formen erstellen. Und natürlich werde ich einige zusätzliche Pro Web Design-Tipps auf dem Weg teilen. Also ohne weiteres, lassen Sie mich Ihnen das ursprüngliche Website-Design zeigen, dass wir Trommelrolle wiederholen werden, bitte. Hier ist es in seiner ganzen Pracht. Es ist die Mietimmobilien-Website und es ist schrecklich. Wir haben ein riesiges Logo und eine Telefonnummer mit ihrem Bürostandort genau hier. Ich weiß absolut nichts über diese Firma, als ich zum ersten Mal besucht habe, weil ich noch nie davon gehört habe. Und ich bin nicht bereit, dich anzurufen, weil ich nicht sicher bin, warum ich dich anrufe. Ich komme auf Ihre Website, weil ich einen Platz zum Mieten brauche oder ich möchte ein Haus oder eine Wohnung auflisten , die ich vermieten möchte. Aber ich bin mir noch nicht ganz sicher, ob ich mit dir Geschäfte machen will, also warum werde ich dich anrufen? Wir müssen unseren Perspektiven einen Grund geben, uns anzurufen. Und indem Sie die Telefonnummer vorne in der Mitte platzieren. Diese große wirklich keinen Vorteil für diesen Interessenten hinzufügen, es sei denn, sie besuchen die Website wegen einer Empfehlung. Und sie brauchen nur die Telefonnummer. Nun, Nun, in diesem Fall ist es leicht für sie zu finden. Insgesamt denke ich nur, dass der Kopfbereich zu groß ist, besonders für das Logo. Wir haben einige Knöpfe, die aus den neunziger Jahren entworfen wurden. Dieser Grady int Stil ist veraltet. Verschiedene Elemente der welche Seite Vereinen Sie sich nicht mit anderen Elementen. Wir können sehen, dass das Logo nicht mit der Navigation ausgerichtet ist. Bild hier unten stimmt nicht mit der Navigation usw. überein, so dass das Design insgesamt schlampig ist. Wir haben hier eine Schlagzeile, die im Grunde erklärt, worum es bei dieser Firma geht und was sie dio. Sie bieten Mietimmobilienangebote in der Region New England, genauer gesagt in der Gegend von Lincoln New England. Wenn Sie also nach unten scrollen, werden Sie hier ein Bild bemerken, das sehr pixelig ist. Sie verwendeten Bilder von niedriger Qualität, und dann sieht es so aus, als ob sie sie in der falschen Größe skalieren, was Pixelisierung erzeugt und das Bild unscharf aussehen lässt. Insgesamt ist die Qualität des Bildes schrecklich. Es ist ein Schieberegler, so dass Sie zwei verschiedene Eigenschaften schieben können, aber sie sind alle von der gleichen niedrigen Qualität. Und ich glaube, dass höhere Qualität, gut fotografierte Bilder besser sind als minderwertige Bilder. Und lassen Sie mich Ihnen ein kleines Beispiel geben. Warum haben Sie das letzte Mal einen Werbespot für McDonald's oder Burger King oder Wendy's gesehen? Und sie machen eine Nahaufnahme von ihrem Essen. Was auch immer sie fördern und du siehst es und das Essen sieht wunderschön aus. Die Brötchen sind von der richtigen Konsistenz. Sie können die Textur sehen. Es ist scharf. Sie können die Gewürze und die Tomaten und den Salat sehen. Es ist alles frisch und knackig und der Hamburger sieht plump und saftig aus, und du bist wie, Oh mein Gott, ich sehne mich gerade nach dem Essen. Ich muss es jetzt haben. Stellen wir uns vor, wenn sie benutzt haben, wie ihr Essen wirklich aussieht. Wenn Sie auf die Festplatte gehen, bestellen Sie etwas und Sie öffnen es und Sie sind wie, OK, OK, das Brot wird zerquetscht. Das Fleisch sieht ausgetrocknet aus. Der Salat ist etwas braun. Die Tomate sieht nicht frisch aus, sieht fast wie Tomatenmark aus. Nun, das ist wirklich schlechte Tomate, aber du verstehst die Idee. Wenn sie zeigten, dass tatsächliche Hamburger, die Sie durch die Fahrt durch in ihren Werbespots bekommen , werden Sie nicht so aufgeregt über gehen, um das Essen zu diesem Zeitpunkt zu greifen. Daher sind qualitativ hochwertige Bilder wichtig, um Interesse zu generieren, ihr Interesse zu behalten und diese Person über diese bestimmte Eigenschaft begeistert zu machen. Wenn das Bild scharf war, professionell aufgenommen wurde und vielleicht später am Tag gedreht wurde, so dass es wie ein Sonnenuntergang im Hintergrund ist, wird es so viel einladender aussehen. Dann ist dieses schlecht beleuchtete Bild hier, so dass Bilder sehr, sehr wichtig sind. Sie können die besten Bilder und Ihr Web-Design setzen, aber am Ende, wenn Ihr Kunde gibt Ihnen schlechte Bilder wie diese, um auf ihrer Website zu setzen, vielleicht codieren Sie die Website als auch. Es gibt nicht viel, was du tun kannst, oder du kannst deine Dienste verkaufen und bessere Fotos machen als das, was sie dir geben, und ihn für diesen Service in Rechnung stellen. Vielleicht bist du kein Fotograf. Du hast die Ausrüstung nicht. Sie wissen nicht, wie Sie professionelle Bilder aufnehmen, auslagern und dann eine Gebühr für die Koordination dieses Dienstes berechnen. Sie möchten es nicht auf Ihrer Rechnung trennen. Sie nehmen einfach alles, was der Fotograf Ihnen berechnet, und erhöhen dann den Preis um 10 oder 20% oder was auch immer Sie für diesen zusätzlichen Service in Rechnung stellen möchten weil Sie sich die Zeit nehmen, jemanden einzustellen und zu koordinieren und zu verwalten das Projekt. Du brauchst also eine Entschädigung dafür. Das ist also eine andere Art von Service, den Sie an Ihre Kunden verkaufen können. Alles klar, lassen Sie uns einfach nach unten scrollen und schauen ein wenig mehr auf dieser Website und dann zeige ich Ihnen das Design, das ich mir ausgedacht habe. Also haben wir diesen riesigen grauen Block von nichts. Dies mit ihrem Logo und einem Absatz, so dass sie in der Gegend seit fast vier Jahren. Aber ihre Website spiegelt nicht wider, dass, weil sie schlecht gestaltet ist, sie unprofessionell aussieht. Es sieht so aus, als wären sie ein Start-up, und sie porträtieren nicht, was ihre Marke ist. Also ich denke, sie tun sich selbst einen Bärendienst und schwächen definitiv erhöhen ihr Geschäft, was unser Endziel ist, weil ihr Ziel ist es, mehr Immobilien zu mieten, um mehr Einkommen zu verdienen, weil sie ein für Profit-Unternehmen, und wir können ihnen helfen, dies zu tun, indem wir eine gut gestaltete Website, die benutzerfreundlich und professionell ist , und das allein sollte ihr Geschäft zu erhöhen. Jetzt versuchen sie, einige soziale Beweise hinzuzufügen, zusätzlich zu sagen, dass sie in der Gegend seit fast 40 Jahren sind, und das ist über diese Box hier drüben, das ist ein Facebook-Code, den Sie zu Ihren Seitenleisten hinzufügen können, die Ihre , dass Sie gepostet haben, sowie die Anzahl der Likes, die Sie haben, während sie in der Gegend seit über 40 Jahren. Und ich weiß, dass Facebook erst seit 10 Jahren da ist ? Sie haben nur 99 Lichter. Dies ist keine Überschrift für die Glaubwürdigkeit dieses Unternehmens. Ich würde lieber sehen, was wir in früheren Projekten getan haben, und das ist das Hinzufügen von Logos von Unternehmen, mit denen sie zuvor gearbeitet haben. Und das wird mehr Glaubwürdigkeit als 99 Lichter hinzufügen. Ich würde das definitiv ausziehen, zumindest auf der Homepage. Wenn du einen Blawg hast,kannst du das da reinlegen, und das ist okay. Wenn du einen Blawg hast, kannst du das da reinlegen, Okay, jetzt haben wir einen Knopf hier unten, auf dem steht, rufen Sie R R E an. Ich bin mir nicht ganz sicher, warum ich dich anrufe. Ich brauche eine Immobilie. Aber ich habe noch keine anderen Eigenschaften als diese schlecht beleuchtet über pixelige, verschwommene Immobilienbilder gesehen . Daher müssen wir es für Interessenten einfacher machen, Immobilien zu finden, die zu vermieten sind und es einfacher für Vermieter, die Eigentum haben, um die Liste ihrer Immobilien zu mieten. Jetzt sind all diese Informationen hier drauf. Jetzt haben wir hier noch einen Abschnitt, um haustierfreundlich zu sein. Das ist also etwas, das wir als Vorteil hervorheben können, um mit diesem Mietimmobilienunternehmen gegen andere zu gehen , weil nicht jeder tierfreundlich ist. Aber zurück zu dem, was ich sagte Nur einen zweiten Schritt gibt es Möglichkeiten für Menschen, zu verschiedenen Teilen der Website zu navigieren , um die Informationen zu erhalten, die sie benötigen. Aber ich denke, wir können einige dieser Informationen tatsächlich auf der Homepage platzieren, um einige der Informationen, die sie bereits hier haben, zu ersetzen und ein besseres Website-Design mit einem besseren Layout zu schaffen, um es Interessenten einfacher zu machen, das zu finden, was sie brauchen, sowie um es den Eigentümern einfacher zu machen, ihr eigenes Haus aufzulisten, das sie mieten möchten. Lassen Sie mich Ihnen das Design zeigen, das ich ausgedacht habe, und das erste, was Sie bemerken werden, ist, dass ich das Logo neu gestaltet habe. Das Logo ist ein wenig veraltet, und ich habe auch die Größe des Logos sowie die Kontaktinformationen reduziert , nur um auf bestimmte Elemente Wert zu legen. Okay, also wollen sie sicherstellen, dass das Logo vorne und in der Mitte ist. Ich habe das immer noch getan, ohne es so groß zu haben, nur indem ich einen blauen Hintergrund erstellt habe, den ich aus den Farben ihres bestehenden Logos nahm. Also behielt ich ihre Markenfarben. Ich habe gerade die Schriftarten und das Logo selbst geändert, um es aktueller zu machen und ein bisschen professioneller oder viel professioneller als das. Das erste, was wir sehen werden, ist Logo als unsere Augen. Sie werden zur Navigation navigieren, und dann, wenn wir bereits wissen, was wir wollen oder wen wir reden wollen, um zu schwächen, sehen Sie, dass wir die Telefonnummer hier oben haben, und wir können uns auch jetzt bewerben. Wenn wir also an diese Firma weitergeleitet wurden und wir wissen, was wir wollen, können wir uns jetzt bewerben, anstatt sie woanders zu finden. Das andere, was Sie bemerken werden, ist ein qualitativ hochwertiges Bild für den Heldenbereich, darstellt, was dieses Unternehmen Immobilien tut. Wir wollen es auch für Interessenten leicht machen, Orte zu finden, um Front und Zentrum zu mieten. Im Heldenbereich. Wir haben eine Option, um die Art der Immobilie zu filtern, die sie wollen und wo, so können wir in einem Budget mit einem Drop nach unten die Stadt setzen. Wir wollen für Schlafzimmer und Bäder suchen, und dann können wir basierend auf diesen Auswahlen filtern, und das wird uns zu einer Seite mit allen auf diesem Filter basierenden Auflistungen wieder, wir wollen es benutzerfreundlich machen. Wir wollen es Interessenten leichter machen, das zu finden, was sie wollen. Sie sind nicht bereit zu filtern, also werden sie nach unten scrollen, und sie werden vier Vorteile finden, warum sie durch diese bestimmte Immobilien-Mietplatz im Vergleich zu anderen arbeiten sollten . Wenn sie ein Konto erstellen, erhalten sie eine E-Mail. Wenn neue Immobilien aufgelistet sind, sind die Menschen beschäftigt und wollen nicht ständig täglich nach Immobilien suchen . Also, wenn wir es den Menschen leicht machen können, das zu finden, was sie brauchen, und sie zurück zu unseren Kunden, Websites und nicht zu unseren Konkurrenten zu bekommen Kunden, , weil sie sich vielleicht nicht an die Website erinnern, die sie vor 20 Minuten und morgen besucht haben oder nächste Woche erinnern sie sich vielleicht nicht an die bestimmte Firma, die sie zuerst besucht haben, und sie werden nur jemand anderen finden, durch den sie mieten können. So werden wir es einfach machen, ein Konto zu erstellen und e-Mails von neuen Eigenschaften bereitzustellen. Und das wieder, diese Luftwege, die Sie nach oben können. Ihre Web-Design-Kunden lassen mich Ihnen helfen, mehr Einkommen zu generieren, und hier ist meine Idee, wie ich es tun kann. Also genau hier können Sie dies als Up-Selling hinzufügen. Ich möchte Ihnen helfen, mehr Geschäfte zu generieren, und so werden wir es tun. Hier ist ein weiterer Service, den ich für Ihr Unternehmen empfehle, um Ihnen dabei zu helfen, Ihr Geschäft zu steigern. Schaffen Sie weg. Oder jemand in der Firma kann Mieter helfen, ihre Dienstprogramme zu organisieren. Du wirst ihnen helfen, ihre neuen Bewohner mit Strom, Internetgas und mehr aufzubauen . So können Sie ihnen helfen, herauszufinden, wie das geht. Und du wirst ihnen die Anklage dafür erheben, dass sie ihnen dabei geholfen haben? Warum nicht Perspektiven für Mieter helfen? Suchen Sie eine Mitbewohnerin. Sie können ein Forum oder eine andere Methode erstellen, von der sich Menschen auf Ihrer Website finden können , Herr Kunde, um einen Mitbewohner zu finden. Und natürlich natürlich bieten Sie bereits eine haustierfreundliche Umgebung an. Und Haustiere sind an ausgewählten Orten willkommen. Filtern Sie einfach Ihre Suche, die wir werden und als ein weiterer Vorteil, werde ich Ihnen zeigen, wie Sie diese speziellen Symbole als auch mit unserem Formwerkzeug erstellen. Okay, vielleicht sind sie kein Mieter. Vielleicht sind sie ein Vermieter. Wenn sie nach unten scrollen, werden die Vermieter das sehen, weil es vorne und in der Mitte ist. Es ist zwischen allem anderen mit einem hellblauen Hintergrund unterteilt, basierend auf den Markenfarben dieses Unternehmens . Sind Sie Ein Vermieter stellte Ihr Angebot für kostenlose Liste. Nun, wenn wir eine aufgerufene Aktion für die Vermieter haben, um ihre Eigenschaften jetzt und dann unten aufzulisten , können wir dann beginnen, Eigenschaften basierend auf den vier oder fünf Arten von Filtern zu filtern, die Menschen verwenden. Und dann können wir automatisch neue Angebote in diesem Abschnitt hier platzieren. Wenn Sie mehr haustierfreundliche Vermietungen finden möchten, können Sie es navigieren, indem Sie auf diesen Link Seymour erneut klicken, wir machen es einfacher für die Menschen zu finden, was sie brauchen, Also haben wir verschiedene Arten von Kategorien für Menschen zu finden, was sie wollen. Dann würde ich für dieses Unternehmen eine andere Sache empfehlen, um sicherzustellen, dass die Leute weiterhin auf ihre Website zurückkehren oder einfach nur sie über Suchmaschinen entdecken, ist, einen Block zu erstellen, damit Sie ihnen helfen können, eine Blawg einzurichten und beginnen Sie mit der Erstellung von Inhalten für dass blawg und bieten Sie Ihre professionellen Dienstleistungen gegen eine zusätzliche Gebühr über und über das ursprüngliche Design hinaus . So eine andere Art von Service können Sie bis verkaufen, um Ihre Kunden, so dass ich zusammen einen kleinen Abschnitt für ihre neue blawg und dann über auf der rechten Seite, können wir zusammen eine Sidebar von zusätzlichen Inhalten oder Sie können sie mit einem anderen Idee, mehr Einkommen zu generieren. Und das ist, diesen Raum als Werbefläche anzubieten, damit sie hier Werbeflächen an Unternehmen in ihrem Gebiet verkaufen können . Versus das hier bietet keine Informationen und keinen Wert, keine Glaubwürdigkeit hier drüben. Das ist immer dieser Raum. Sie sind besser dran, eine Blawg mit Links zu den neuesten Artikeln anzubieten, sowie Werbeflächen zu verkaufen, um zusätzliches Einkommen zu generieren, so dass sie sich in der Gegend seit fast 40 Jahren verbiegen . Ich garantiere, dass sie Menschen in der Gegend kennen, die gerne jemals Bindungen in diesem Teil ihrer Website sein würden. Dies sind also alle Vorschläge, die Sie Ihrem Kunden geben können, um ihnen zu helfen, zusätzliches Einkommen zu verdienen und ihr Geschäft zu wachsen. Und das ist es, was wir als Webdesigner tun wollen. Wir wollen nicht nur ein weiterer Webdesigner sein. Hallo, Herr Mandant. Was willst du? Welche Art von Design-Stil magst du? Bla, bla , bla. Okay, hier ist das Design. Danke. Tschüss. Nein, lass uns etwas anderes machen. Lassen Sie uns besser sein als Ihr durchschnittlicher Webdesigner. Lassen Sie uns diesen Unternehmen helfen, ihr Geschäft auszubauen, denn am Ende, deshalb engagieren sie Sie für die Gestaltung ihrer Website. Sie wollen eine Website, auf der sie ihre Produkte und Dienstleistungen verkaufen können, und wenn Sie ihnen zeigen können, wie ihr Geschäft zu steigern, dann raten Sie, was. Sie werden Sie an andere Personen verweisen, die Websites benötigen, um mehr Geschäfte zu generieren . Und sobald du eine Überweisung bekommst, bekommst du eine weitere und eine andere, und bevor du es weißt, wirst du mehr Arbeit haben. Dann können Sie umgehen, und dann können Sie beginnen, Ihren Preis entsprechend zu erhöhen, weil Sie Menschen helfen mehr Geld zu verdienen, und Sie sollten dafür entschädigt werden. Und dann, indem Sie Ihre Preise erhöhen, steuern Sie auch die Menge an Volumen oder die Menge der Arbeit, die Sie tun. Wollen Sie 2025 Website-Designs pro Monat zu $200 eine Website tun, die $5000 pro Monat, Oder würden Sie lieber fünf Website-Designs pro Monat zu $1000 pro Website tun? Ich würde lieber fünf gegen 25 machen, weil ich die gleiche Menge Geld für weniger Arbeit verdiene . Jetzt. Ich sage nicht, dass es das ist, was ich anklage, oder was Sie anrechnen sollten. Ich möchte nur, dass Sie darüber nachdenken, wie Sie sich von all den anderen Zehntausenden von Webdesignern unterscheiden können. Sie müssen sich von ihnen mawr trennen, als nur basierend auf Ihrem Design-Stil. Sie müssen Dienstleistungen anbieten, die Sie von der Konkurrenz trennen. Schließlich haben wir auch eine einfache Fußzeile mit einigen Links zu Social-Media-Symbolen und dann einige Links zu anderen Teilen der Website. Wir haben unsere Datenschutzrichtlinie. Wir haben einige rechtliche Informationen. Wir haben eine Sitemap, die Links zu allen verschiedenen Seiten auf der Website zur Verfügung stellt. Wir haben auch eine Möglichkeit für Leute, mit ihnen zu werben, wenn Sie keinen Link zu einer Seite über Werbung haben , und dann werden die Leute nicht wissen, wie sie mit dieser Firma werben. Wenn Sie also Ihren Kunden auf dem Service verkaufen können, werden Sie einen Link irgendwo setzen wollen, damit die Leute wissen, dass sie auf der Website werben können . Wir brauchen auch ein Copyright. Wir brauchen auch einige Copyright-Informationen hier unten ist gut, ich habe es nicht in dieses Design aufgenommen, aber das ist nicht relevant. Also, was wir tun werden, ist, dass wir dieses spezielle Website-Design erstellen, beginnend mit der Retusche dieses Hauptbild hier, weil das Bild ursprünglich ein oder zwei Autos hatte, denke ich in diesem Bereich. Und ich hatte das Gefühl, dass es nicht mit dem Gesamtbild half. Und ich mag das Bild besser mit dem Auto gegen das Auto. Also werde ich Ihnen zeigen, wie Sie das Auto von diesem bestimmten Bild entfernen können, und dann arbeiten wir an dem Logo und dann gehen wir weiter und bauen die Seite von dort aus weiter. Ich kann es kaum erwarten, diese Informationen mit Ihnen zu teilen. Wenn du bereit bist, lass es uns tun. 57. Retusche: Hallo und willkommen zurück. Ordnung, also liebe ich dieses Foto für dieses spezielle Web-Design-Projekt, weil ich denke, es ist ein sehr starkes Bild. Es spiegelt wider, was unser Kunde tut, und das ist Immobilienvermietung. Nun, da gesagt, dieser spezielle Standort wird wahrscheinlich nicht für den Client funktionieren, weil sie wahrscheinlich nicht diese Auflistung auf ihrer Website haben. Und zwei, wegen der Lage, die jetzt auf den Palmen basiert. Wir können vermuten, dass dies wahrscheinlich irgendwo im Süden ist, und unser Mandant ist im mittleren Osten, weil sie für Lincoln New England sorgen. Aber ich denke immer noch, dass es in Ordnung ist, dieses Bild im ursprünglichen Design zu zeigen, weil es ein starkes Bild ist, und Sie Ihren Kunden ein starkes Bild darstellen möchten, damit sie den Unterschied zwischen einem großartigen Bild wie diesem im Vergleich zu sehen erste Bild zeigte ich Ihnen in der vorherigen Lektion, wo der Himmel ausgewaschen ist, seine pixelig. Es hat Müll in der Vorderseite des Bildes, und es reflektiert nicht wirklich gut über die Art von Immobilien, die sie entweder mieten wollen oder es nicht wirklich diesen bestimmten Standort sowie dieses Bild Dutzend wie ich hatte erwähnt zuvor für das ein Bild, das wir von ihrer Website hatten. Es würde einen großen Unterschied machen, dieses Bild später am Nachmittag oder am frühen Abend zu schießen . So haben Sie einen Sonnenuntergang im Hintergrund mit einigen Wolken und etwas Farbe am Himmel . Es wird diese Eigenschaft viel ansprechender aussehen lassen, wie dieses Bild hier mit Sonnenuntergang und die Beleuchtung und die Komposition und alles andere an diesem Bild ist viel professioneller als das andere Bild. Das heißt nicht, dass all ihre Eigenschaften solche Bilder haben werden. Aber Sie wollen ein starkes Bild im Heldenbereich haben, um die Aufmerksamkeit der Menschen zu erregen. Wenn Sie ein Bild mit Müll im vorderen Rasen zeigen und es wirklich sehen können, weil es pixelig oder verschwommen ist oder beides, dann sieht es nicht wirklich wie die Art der Website aus, von der Sie mieten möchten, weil sie Low End zeigen -Eigenschaften. ist nichts falsch. Vielleicht haben sie viele dieser Arten von Inseraten, aber Sie können immer noch jede Art von Standort viel besser darstellen, indem Sie auf das Detail im Bild achten , um das Bild an diesem Ort viel ansprechender aussehen zu lassen, als es vielleicht wirklich ist. Jetzt. Das Einzige, was ich an diesem Bild nicht mag, sind diese beiden Autos. Also denke ich, indem ich diese beiden Autos entfernt, wie ich es hier getan habe, wird es dieses Bild so viel stärker und viel ansprechender machen. Also lassen Sie uns voran und laden Sie dieses Bild herunter, indem Sie sabei dot com auswählen und dann einfach diese Nummer hier eingeben . 690086 und suchen und Sie werden direkt auf diese Seite weitergeleitet, wo Sie dieses Bild herunterladen können . Also werde ich das 1920 mal 10 82 Bild herunterladen, und dann werde ich diese Datei greifen und sie in meine Rastervorlage bringen. Sie möchten also voran gehen und diese Rastervorlage aus einer vorherigen Lektion öffnen, um bei diesem bestimmten Projekt von Grund auf neu zu beginnen , die Gitter zu schließen, und dann werden wir die Größe des Bildes so ändern, dass es voll Beschnitt ist oder mit anderen Worten, Kante Zehenkante. Also im Moment ist das Bild 1900 Pixel breit, also lassen Sie uns voran und skalieren Sie es mit unserem Skalierungswerkzeug Shift plus s. Und dann werden wir in die mit eingeben, die 1400 ist. Und dann sollte die Höhe sein 7 89 Sobald er Skelett Sache, bewegen Sie es einfach in Position hier, und dann gehen wir voran und retuschieren dieses Bild und entfernen beide dieser Autos. Nun, Beginn des Kurses, haben wir über zwei Arten von Werkzeugen gesprochen, die Sie für die Retusche verwenden können, und das war das Klonwerkzeug und das Heilwerkzeug für diese Art von Bearbeitung. Ich denke, das Klon-Werkzeug wäre die beste Option, um diese Autos zu entfernen. Also lasst uns voran und schnappen uns das Werkzeug, das sich genau hier befindet. Oder wenn Sie Ihre Tastenkombinationen wie am Anfang des Kurses erwähnt aktualisiert haben. Ich habe die Einstellung des Buchstabens s für die Tastenkombination. Sobald wir darauf klicken,können wir noch nichts tun. Sobald wir darauf klicken, Wenn wir einen Blick hier unten werfen, steht es, setzen Sie zuerst ein Quellbild. Was wir also tun müssen, ist, dass wir Gimp sagen müssen, wo wir vom Bild klonen wollen, um den Bereich, der retuschiert werden muss, zu retuschieren. also mit diesem Werkzeug Wenn ichalso mit diesem Werkzeugmeinen Befehl oder meine Steuertaste gedrückt halte und in diesen Bereich hier klicke und dann, wenn ich mich bewegt, wird der Werkzeugumriss auf diesen Bereich angewendet, so dass wir wissen, dass dieser Bereich überall angewendet werden wird. Ich klicke und ziehe meine Maus. jetzt ichjetztnach oben gehe, sehen Sie den Werkzeugumriss auf der rechten Seite. Es folgt meine Pinselbewegung, und es wird weiter hinzufügen von rechts nach links. Und das ist, wie wir mit diesem Tool wieder berühren. Jetzt ist der Schlüssel zur Verwendung dieses Werkzeugs mit Bildern wie diesem, die eine bestimmte Perspektive haben. Sie möchten sicherstellen, dass diese Perspektive nicht gebrochen ist, denn wenn Sie in den falschen Bereich klicken, der Anfang, dann ist diese Zeile, die hier bis zum anderen Ende treffen wird. Also, was ich empfehle, dafür zu tun, ist, auf diese Weise zu beginnen und dann nach rechts zu ziehen Jetzt haben Sie vielleicht bemerkt ,dass sich der Bordstein zu diesem Zeitpunkt in etwas anderes geändert hat, , und das liegt daran, wenn Sie nach unten ziehen, ist es gehen weiter ziehen die Daten oder die Pixel aus diesem Bereich und wenn Sie weit genug gehen. Es wird dann die Pixel aus dem Auto nehmen. Hier ist gut, also werden wir klicken und ziehen loslassen und dann klicken und ziehen Sie über alle Pixel, die wir in diesem Bereich nicht wollen. Also werde ich in diesem Bereich hier anfangen, und dann werde ich nur dieser Linie folgen, um zu versuchen, mich zu treffen, wo ich mit diesem Werkzeug angefangen habe . Also, jetzt habe ich das Auto in diesem Bereich angewendet. Also werde ich einfach hier rüber klicken und von vorne anfangen, und jetzt habe ich einen anderen Schlaganfall, der auf diesen Bereich angewendet wird. Okay, wir können auch die Größe ändern oder Pinsel mit unseren Klammertasten. Im Moment habe ich meine Brüste, ich habe mich auf etwa 14 eingestellt. Sie möchten es also basierend auf dem Bereich, in dem Sie arbeiten, erhöhen oder verringern, da Sie keine Pixel hinzufügen möchten, wo sie nicht benötigt werden, wenn sie dort nicht hinzugefügt werden müssen. Wenn ich also meine linke Klammertaste drücke, wird es die Brustgröße kleiner machen. Also, jetzt ist es näher an vier. rechte Klammertaste wird es größer machen, also ist es jetzt näher an 30, so dass es einfach einfacher und schneller ist, als hierher zu kommen und Ihre Pinselgröße anzupassen, während Sie arbeiten. So können Sie buchstäblich die Größe Ihres Pinsels ändern, während Sie arbeiten. Also genau in diesem Bereich hier habe ich ein bisschen extra von der Bordsteinkante, die ich nicht will, also werde ich meine Geburt kleiner machen mit dem linken Klammerschlüssel. Ich werde meine Steuer- oder Befehlstaste gedrückt halten, wenn Sie auf einem Mac oder PC sind, und dann werde ich zurücksetzen, wo ich klonen möchte. Und dann wird es den Bereich abdecken, wo ich nicht will, dass die Kurve in diesem Bereich ist. Also werde ich jetzt die Reifen und den Boden des Autos hier drüben machen, also wieder, Kontrolle oder Befehl, um Gimp zu sagen, woher er er klonen soll und dann einfach den Bereich übermalen. Die andere Sache, die wir als Webdesigner tun wollen, ist, dass wir Bilder nicht kostenlos retuschieren . Wenn Kunden Sie bitten, ein Bild zu retuschieren, sagen Sie ja, ich kann das tun. Ich kann diesen Service erbringen. Aber das ist, wie viel es kostet, also müssen Sie bestimmen, wie viel Sie für die Retusche Ihrer Bilder in Rechnung stellen werden. Und natürlich sind einige einfacher als andere. So müssen Sie in der Lage sein zu wissen, wie viel Sie für diesen bestimmten Service berechnen möchten. Wenn du es selbst machst oder wenn du auf den Fuß gehst, es auslagern. Sie müssen dann einen Preisplan für die Erhöhung dieser bestimmten Gebühr von der Person, die die Retusche macht, so dass Sie für die Verwaltung dieses bestimmten Projekts kompensiert werden können. Ich werde hier rüber kommen und das Gras schnappen. Ich werde den Schatten hier vertuschen, weil der Schatten aus dem Auto kommt. Und dann werde ich weiter gehen und weiter Gras in diesen Bereich hier hinzufügen, vielleicht ein wenig Bürgersteig hier hinzufügen und die andere Sache, die ich als Webdesigner tun werde, wenn ich ein Bild für das ursprüngliche Webdesign retusche, ich Ich bin nicht besorgt, 100% perfekt zu sein. Die Klienten werden wahrscheinlich keine Kleinigkeiten bemerken. Und dann, sobald sie alle retuschierten Bilder genehmigen, verurteilen Sie, gehen Sie zurück und erklären, dass das Originalbild retuschiert wurde. Dies ist, wie viel wird kosten, um es zu retuschieren, dass Sie sicherstellen, dass das Bild sein wird Sie wollen, um sicherzustellen, dass es ein qualitativ hochwertiges Bild ist, geht auf einer Live-Website. So werden Sie erklären, dass die Preise, die auf diesem speziellen Service basieren, diese Qualität und warum es wird X Betrag kosten. Dann können Sie einfach eine Pauschalgebühr für so etwas berechnen. Denn wenn man einmal gelernt hat, wie man es selbst macht und man weiß, wie man es macht, sollte es nicht so lange dauern, 10 15 20 Minuten, vielleicht einen halben Knauer, zu machen, um eine vollständige Retusche wie diese mit voller Liebe zum Detail zu machen. Also gehe ich einfach in und klicke auf meine Steuer- oder Befehlstaste, um den Verteidigungsbereich jetzt zu füllen. Großartig. Also denke ich, dass das Auto fertig ist. Gehen wir weiter und zoomen heraus, und wir könnten sehen, dass es einige Reste des Schattens des Bodens gibt, das Auto direkt in diesem Bereich, und das meine ich mit einer höheren Qualität Retusche. Ich würde ein wenig mehr Zeit damit verbringen, dies mit meinem Klon und meinem Fersenwerkzeug zu mischen , um das viel natürlicher aussehen zu lassen. und viel professioneller. Und weil dies das anfängliche Design ist und die Chancen sind, dass dieser spezielle Kunde wird dieses Bild nicht verwenden, weil es aus dem Süden und es ist nicht in ihrer lokalen Gegend, wo sie mieten. Es gibt wirklich keine Notwendigkeit, mit diesem bestimmten Bild in Perfektion zu gehen. Okay, also im Grunde dasselbe. Wir werden Gimp sagen, wo wir für dieses bestimmte Bild klonen wollen, und ich denke, ich möchte hier von vorne anfangen. Alles klar, damit der Bordstein fertig ist, gehen wir weiter und arbeiten hier an dem unteren Teil. Also für diesen speziellen Teil der Bearbeitung begann ich hier unten als der Punkt, an dem ich Gim sagte, er solle klonen, und es stimmt nicht wirklich mit dem Rest der Szene in diesem Bereich hier überein. In diesem Fall wäre ich besser dran, mein Klonen entweder von hier oben oder hier rüber zu starten. Ich werde es hier versuchen, und ich werde wahrscheinlich ein besseres Ergebnis bekommen. Und das liegt einfach an der Textur und der Beleuchtung in diesem Bereich im Vergleich zu dem, wo ich vorher war . Ich werde weitermachen, zoomen, damit ich ein bisschen besser sehen kann. Und jetzt habe ich hier auch ein Spiegelbild dieses Autos auf der Straße. Also werde ich meinen Startpunkt oder meine Klonquelle von hier drüben verschieben. Wenn wir also mit unserem Heilwerkzeug reinkommen und eine Quelle hinzufügen, klicke ich hier rüber und übermale dann den Bereich, an dem wir gerade mit dem Klon gearbeitet haben. Es wird alle diese Pixel viel besser zusammenmischen als das Klonwerkzeug von selbst . Okay, ich gehe zurück zu meinem Klon-Werkzeug mit dem Buchstaben s und ich bin bereit und arbeite an diesem Rasengebiet hier. Anstatt lange Striche zu machen, mache ich nur kurze Striche durch Klicken und Ziehen, weil ich hier in diesem Bereich bleiben möchte . Sonst gehe ich in diesem Bereich hoch und füge etwas von dem Bürgersteig hinzu. Und ich will noch nicht einen Bürgersteig beenden, also werde ich nur kurze Bursts sehr kurz anklicken und weiter über andere Teile des Autos ziehen , bis ich das Gebiet bedeckt habe. Okay, mal sehen, ob hier ein Stück Bürgersteig ist. Ich denke, wir können damit genau hier arbeiten. Also wieder, nur klicken und ziehen kurze Bursts. Und ich werde hier wieder etwas Gras hinzufügen, weil ich jetzt die Perspektive auf den Bürgersteig verliere, weil ich den Bürgersteig zu groß mache. Ich werde auch die Brustgröße etwas kleiner mit meinen Klammerschlüsseln machen. Okay, Okay, in diesem Bereich haben wir das Auto, das einen Teil unserer Bäume verdeckt. Dafür werde ich meine Klonquelle direkt hier in der Mitte des Baumes hinzufügen, weil wir einen langen Teil hier unten haben , der vertuscht ist. Und ich möchte nur klicken und in der Lage sein, nach oben zu ziehen und dieser Kurve entlang dieser Weise gefolgt. Nur brauchen und ein wenig Gras hier drüben. Jetzt können wir am Fechten arbeiten. Ich werde hier mit meiner Klonquelle anfangen. Also wieder, wir müssen vorsichtig sein, wo sind Klon-Quelle. Umriss Dort auf der rechten Seite ist in Bezug darauf, wo wir tatsächlich Pixel hier auf der linken Seite spielen . Denn jetzt habe ich eine Säule auf der linken Seite des Pinsels. Und auf der anderen Seite, wo der Klon Quellen diese Spalte ist viel weiter entfernt. Also werde ich nur ein paar dieser Büsche nach unten malen, Haare vorne, den Bürgersteig nur ein bisschen füllen, und dann werde ich an dieser Seite des Zauns arbeiten und mich jetzt so , Also gehe ich weiter und klicke einfach auf die Spalte hier für meine Klon-Quelle, und dann werde ich einfach diesen Weg nach links und dann nach rechts übermalen, also muss ich weiter gehen und einen anderen Teil des Zauns in der Mitte auswählen. Also werde ich zu diesem hier zurückkommen und mit diesem kleinen Pfosten hier in der Mitte anfangen und dann meinen ersten Brustschlag hier hinzufügen, und dann meinen ersten Brustschlag hier hinzufügen, was der Mitte dieses Zauns entspricht, wo auch ein kleiner Pfosten sein sollte. Okay, ich werde und meine enge Quelle jetzt an dieser Kolumne arbeiten und an dieser Kolumne arbeiten. Also wieder, kurze Striche und einfach nach oben ziehen, um in diesem Bereich zu füllen. Ich will nur sehen, wie diese Beiträge hier unten aussehen. Ok. Ich werde diesen Posten jetzt schnappen und wir sind fast fertig. Die andere Sache, die ich mache, ist, dass ich meine linke Hand auf der linken Seite meiner Tastatur habe, wo sich mein Befehl oder meine Steuertaste befindet. So kann ich schnell klicken und einen neuen Bereich auswählen, der von Cam geklont werden soll. Ich werde nur den Bürgersteig hier vorne aufräumen. Also ist der Bürgersteig ein wenig abseits hier. Wenn ich also dieses Bild für das fertige Produkt retuschieren würde, würde das wahrscheinlich etwas mehr Zeit auf dem Bürgersteig verbringen. Aber ich denke, für dieses spezielle Projekt und das ursprüngliche Design ist in Ordnung, weil sie wirklich nicht auf 769% zoomen und wie, OK , OK , der Bürgersteig ist aus. Es sieht nicht gut aus. Ich denke, im ursprünglichen Design werden sie es nicht einmal bemerken, besonders wenn wir einige Inhalte in diesem Bereich haben. Sie werden sich mehr darauf konzentrieren und erkennen, dass der Bürgersteig nicht zu 100% perfekt ist . Aber wieder, wenn sie für meine Dienste bezahlen, um dieses Bild zu retuschieren, werde ich mehr Zeit damit verbringen, es zu einem perfekten zu machen, anstatt nur eine Bearbeitung für den ersten Entwurf. Okay, das ist es also, um dieses bestimmte Bild im nächsten Tutorial zu retuschieren, wir werden mit dem Logo und dem Header-Bereich der Webseite beginnen Wenn Sie also dafür bereit sind, lassen Sie es uns tun. 58. Überschrift: Hallo und willkommen zurück. Ordnung, für diese Lektion werden wir an der Kopfzeile unseres Webdesign-Projekts arbeiten. Wir werden eine primäre und sekundäre Navigation hinzufügen. Wir werden ein neues Logo erstellen, das ganz einfach sein wird. Es wird sauber und professioneller aussehen als das Logo, das sie derzeit haben. Und die andere Sache, die ich wirklich schnell erwähnen möchte, ist, Sie, wenn Sie mehr und mehr Websites entworfen haben, finden Sie sich in neuen Projekten immer wieder die gleiche Art von Formen oder Elementen zu verwenden . Zum Beispiel in unserem vorherigen Projekt haben wir in unserem vorherigen Projektdiese primäre Navigation mit einem Hamburger-Symbol erstellt, um anzuzeigen oder darzustellen, dass die Navigation angezeigt oder ausgeblendet wird. Wenn Sie auf dieses bestimmte Symbol klicken. Jetzt mag ich diese Schrift. Ich mag die Größe, die ich das Hamburger-Symbol mag, also gibt es wirklich keinen Grund für mich, dies von Grund auf neu zu machen, wenn ich es bereits zuvor in einem anderen Projekt gemacht habe , also können wir diese Navigation tatsächlich nehmen und sie zu unserer aktuellen Projekt, das ich im ursprünglichen Design gemacht habe. Wir müssen nur ein paar der Längen ändern, weil es sich um Eigentümer oder Personen handelt die mieten wollen gegen Videofilmer oder ein Audiospezialist. Also lass uns hier rein gehen und das Logo herausziehen. Also gehen Sie weiter und öffnen Sie diese Datei und entfernen Sie dann auch den Kopfzeilenhintergrund. Und dann können wir klicken und ziehen Sie diese Gruppe, die Ebene zu unserem aktuellen Projekt und hinzugefügt in. Also lasst uns voran gehen und das hier in Position bringen. Es wird noch nicht genau sein. Wir kriegen es einfach aus dem Weg, und ich kann voran gehen und diese primäre Navigation umbenennen. Lassen Sie uns voran und definieren Sie unseren Header-Raum. Ziehen wir also eine Richtlinie nach unten 2 20 Pixel. Das wird uns also unseren Abstand an der Spitze geben. Und dann werden wir eine weitere 1 bis 20 runterziehen, die die Grundlinie für unsere primäre Navigation, den unteren Teil unseres Textes hier oder das Hamburger-Symbol und unser Logo sein wird. So können wir unsere primäre Navigation jetzt tatsächlich graham und in Position bringen. Also, genau so sind wir mit dem Header-Abschnitt fast fertig. Lassen Sie uns voran und machen Sie die primäre Navigation Ich werde Eisenbahn für die Schriftart verwenden. Ich werde 14 für die Größe machen. Und dann natürlich brauchen wirnatürlichWhite. Also tippe ich einfach eine Telefonnummer aus und dann fünf Leerzeichen, um Schrägstriche weiterzuleiten und dann wieder fünf Leerzeichen und dann bewerben Sie sich jetzt. Also werde ich das auswählen, weil ich diesen Inhalt fett machen möchte. Also mach voran und mach das fett. Und das hilft nur, dass abheben ein wenig mehr im Vergleich zu der Telefonnummer, weil ich denke, dass die Bewerbung jetzt wichtiger ist als die Telefonnummer, weil oft ich denke, dass die Leute sich bewerben wollen, um ihr Gebäude auf der Website aufgeführt zu haben. Oder vielleicht wollen sie eine bestimmte Eigentumswohnung oder eine Genehmigung oder ein Haus mieten oder was auch immer der Fall sein mag gegen Anrufe. Manchmal sind sie beschäftigt, und es ist einfach einfacher, ein Formular auszufüllen, um zu sagen, dass ich an dieser Immobilie interessiert bin oder ich habe diese Immobilie zu vermieten und hier sind meine Kontaktinformationen. Lassen Sie mich wissen, was der nächste Schritt ist. Deshalb würde ich jetzt bewerben gegen die Telefonnummer hervorheben und wieder, dass alles auf die Recherche zurückgeht und mehr über die spezifischen Perspektiven Ihres Kunden erfahren. Vielleicht ist es das Gegenteil für ihren Teil des Landes. Vielleicht bevorzugen die Leute anrufen oder sich online bewerben, und sie würden sich lieber per Telefon bewerben oder einen Termin vereinbaren, um hereinzukommen. Und in diesem Fall, basierend auf diesen Informationen, die ich von meinem Kunden zurückerhalte, würde ich dann die Telefonnummer fett machen und nicht anwenden. Jetzt meine ich nicht einmal setzen bewerben jetzt. Wenn ihre Kundschaft da ist, bewerben sich Interessenten nicht gerne online. In Ordnung, gehen wir weiter und bringen das in Position. Lassen Sie uns unsere Führer einschalten, Commander Control und Semi Colon, und ich werde es hier ganz oben in dieser Richtlinie platzieren. Das wird also im Einklang mit unserem Logo stehen, denn unser Logo wird die Höhe zwischen diesen beiden Linien abdecken . Also lasst uns weitermachen und damit anfangen. Ich muss das auch herausziehen und es sekundäre Navigation nennen. Okay, lassen Sie uns eine neue Ebene namens Logo-Hintergrund erstellen und dann, mit unserem Rechteck-Auswahlwerkzeug, lassen Sie uns ein Rechteck erstellen. Sagen wir 1 90 von Ich glaube, es ist 100 für die Höhe. Okay, bevor wir fragen können, füllen Sie diese Hintergrundfarbe aus, die wir brauchen, um ihre genaue Branding Farbe zu finden. Lassen Sie mich Ihnen zeigen, wie Sie das tun können. Wenn Sie auf der Website eines Kunden sind und sie nicht wissen, die genaue Farbe, um Ihnen zu geben, können Sie tatsächlich einen Farbwähler Plug in finden. Und ich denke, wir haben darüber in einer vorherigen Lektion gesprochen. Und wenn Sie diesen Stecker installiert haben, habe ich einen hier namens Color Picker. Ich kann darauf klicken und dann mit dem Mauszeiger über eine Farbe bewegen, die ich will, und es zeigt Ihnen rechts unten unten, der Hex. Eine Dezimalzahl. Wenn ich nun über das Logo gehe, ändert es sich, weil sie ein minderwertiges Logo verwenden, das pixelig ist, und es gibt verschiedene Blues drin. Also werde ich diese blaue Farbe hier wählen, und dann werde ich sie kopieren. Notieren Sie sich diese Zahl dort, weil Sie diese in das HTML-Notationsfeld direkt hier eingeben können. Sobald Sie das in eingeben, drücken Sie Ihre klebrige und dann erhalten Sie die genaue Farbe können wir jetzt gehen und füllen Sie das Feld in und d wählen. Geh weiter und schalte meine Guides aus. Ich brauche die nicht, und dann bis zur Fondsfamilie. Ich wählte eine Schriftart, die eine modernere, aktualisierte Art von Schriftart im Vergleich zu dem, was sie jetzt haben. Und es heißt Pfeil, so können Sie zu w Fonts dot com vorwärts Schrägstrich Schriftart Schrägstrich Pfeil gehen, um diese Schriftart herunterzuladen . Sobald Sie nicht heruntergeladen und installiert haben, müssen Sie Gimp neu starten, um die Installation des Fonds abzuschließen. Also, wenn Sie das eingerichtet haben, gehen Sie vor und richten Sie den Fonds und die Tool-Optionen hier und für die Schriftgröße, lassen Sie uns tun 80 und die Farbe weiß. Okay, lasst uns weiter gehen und unser E in allen Hauptstädten ausgeben und es dann einfach in Position bringen. Ich denke, ich will etwas kleiner drauf. Es ist ein bisschen zu nah am Rand, also werde ich gehen und 75 eingeben. Probieren Sie das aus. Okay, das gefällt mir viel besser, und dann werden wir ihren Firmennamen hier unten eingeben. Lassen Sie uns die Schriftart auf Eisenbahn ändern, und ich bin mir nicht sicher, was die Größe betrifft. Ich fange mit 16 an und wir müssen das erhöhen. Also Vermietung, Immobilien. Gehen wir weiter und machen es 18. Das sieht ziemlich gut aus. Ich glaube, es ist nur ein bisschen aus. Was wir also tun können, ist, den Abstand zwischen H. Funk zu erhöhen und der Grund, warum ist, weil ich das mit von R E übereinstimmen wollte. Also in zwei Optionen, lassen Sie uns 0.2 tun. Das ist eigentlich zu viel. Ich gehe eins runter, damit es 10.1 sein wird. Hey, lass uns weitermachen und ein neues Layer-Gruppen-Cold-Logo erstellen. Wir werden nur unseren Text hier reinbringen, weil ich dieses Logo den Inhalt nehmen und es mit dem Hintergrund ausrichten möchte . Gehen wir also weiter und nehmen Sie unseren lokalen Hintergrund und beschneiden zum Inhalt. Und dann mit unserem Ausrichtungstool können wir mit unserem Ausrichtungstoolvoran gehen und beides auswählen. Halten Sie die Umschalttaste gedrückt, klicken Sie auf das Logo und setzen Sie es dann auf das erste Element und richten Sie dann Mitte und Mitte des Ziels aus . Jetzt ist das Problem, wir ein größeres Textfeld haben, als wir tatsächlich brauchen, also müssen wir hier mit ihrem Textwerkzeug zurück in unseren Text gehen und oben auf dieses Textfeld klicken und es dann nach unten ziehen, bis es den oberen Teil der Buchstaben erreicht. Nun, nachdem es das getan hat, schiebt es diese Buchstaben nach unten. Aber wir haben jetzt die richtige Größe, die wir brauchen, um sie perfekt in der Mitte auszurichten. Also gehen wir zurück zu unseren Linemen. Werkzeuge werden neu ausgerichtet, und dann müssen wir wieder in unser Textfeld zurückkehren und diese wieder an die Stelle verschieben, wo es vorher war . Also denke ich, war ein bisschen höher als das. Okay, wir können weitermachen und unseren Hintergrund jetzt reinlegen. Das letzte, was wir tun müssen, ist, unsere primäre Navigation mit dem richtigen Inhalt zu aktualisieren , um voran zu gehen und doppelklicken Sie mit meinem Textil auf Audio, um es auszuwählen und geben Sie dann Immobilienbesitzer ein. Und dann können wir das letzte löschen. Die führenden diese zusätzlichen fünf Räume als auch. Drücken Sie Ihre Escape-Taste, und ich denke, wir sind fertig mit dem Header. Awesome! Ordnung, jetzt, wo wir den Kopf haben oder fertig in der nächsten Lektion, werden wir an unserem Heldenbereich arbeiten. Also, wenn du bereit bist, Star auf das zu bekommen, nun, lass es uns tun 59. Hero: Lassen Sie uns jetzt unseren Heldenbereich beenden, um es Interessenten einfacher zu machen, das zu finden, was sie brauchen . Und in diesem Fall brauchen sie eine Mietobjekt zu mieten. Und was wir tun werden, ist einen Filter zu erstellen, so dass sie ihre Suche basierend auf Standort, Budget und einigen anderen Filteroptionen eingrenzen Standort, können. Und dann können sie filtern und zu dieser Seite mit diesen Filtern für die Immobilien navigieren , die ihre Anforderungen erfüllen. Im Wesentlichenist das eine kalte Aktion, und wir machen es diesen Aussichten leicht. Im Wesentlichen ist das eine kalte Aktion, Teoh leicht finden, was sie brauchen, indem sie es direkt im Heldenbereich zur Verfügung stellen. Dies ist wirklich einfach zu entwerfen ist nur auf Formen und Text basiert, also lassen Sie uns voran und tun das. Lassen Sie uns also beginnen, indem wir unseren Hintergrund für den Aufruf zum Handeln und das erstellen. Erstellen Sie eine neue Ebene und lassen Sie uns unsere Anleitung zeigen, damit wir wissen, wo alles platziert werden soll . Ich werde mein Rechteck mit dem Buchstaben M auswählbar, und ich werde es 1230 Pixel breit und 200 Pixel hoch machen. Lass uns voran gehen und eine Schmutzfarbe aussuchen. Fangen wir vorerst mit Schwarz an. Schnappen Sie sich Ihren Eimer, füllen Sie das Werkzeug und gehen Sie voran und füllen Sie das in de select. Die andere Sache, die ich tun möchte, ist, dass ich die Deckkraft nur ein wenig herunterlassen möchte, damit Teil des Bildes dahinter durchkommt. Also werde ich gleich umhergehen. Lassen Sie uns versuchen, 75 und wir müssen dies auch in der Mitte ausrichten, also denke ich, wäre es am besten, es oben nach unten links und rechts auszurichten. Und wir können das, wie Sie wissen, mit unserem Rechteck-Auswahlwerkzeug tun . Also lassen Sie uns voran und greifen, dass und zeichnen Sie eine Auswahl, um es innerhalb von zentrieren. Und natürlich müssen wir es auch auf den Inhalt zuschneiden. Und was dann? Ihr Ausrichtungswerkzeug. Wir können es auf das Auswahlzentrum und die Mitte der Ziele ausrichten. Perfekt. Als nächstes erstellen wir unsere Filterboxen. Ich werde voran gehen und eine neue früher namens Budgetzeile erstellen und es drei Spalten breit machen . Und dann, für die Höhe werden wir 65. Lassen Sie uns unsere blaue Farbe aussuchen, die wir für das Branding verwendet haben, und füllen Sie dann das in Ordnung, gehen Sie voran und de Select Commander Control und den Buchstaben D. Alles klar, lassen Sie uns den Rest der Boxen machen und dann werden wir alles ausrichten nach, weil wir brauchen einen Text oben als auch. Das hier. Wir machen vier Spalten breit und machen es auf die gleiche Höhe von 65, dann die gleichen Farben, und ich werde einfach voran gehen und den Rest abschließen. Wir machen eine Spalte, eine andere an einer Säule und dann die letzten 13 Spalten, und sie werden alle 65 für die Höhe sein. Okay, gehen wir weiter und greifen alle davon und richten sie nach oben aus. Wir müssen auch auf Ebene gehen und den Inhalt jeder der verschiedenen Rose zuschneiden. Gott, du bist Lyman Tool. Nun, Daniel, Shift-Taste und wähle alle Zeilen aus. Ändern Sie es. Das erste Element und eine Zeile nach oben. Okay, wir fangen an, eine Menge Schichten hier zu bekommen, und es wird das hier in ein wenig chaotisch organisiert. Also lasst uns weitermachen und unsere Schichten organisieren, und wir müssen definitiv alles in eine Gruppenschicht für den Header setzen. Also lasst uns weitermachen und diese nukleare Gruppe namens Header machen. - Na gut, lass uns weitermachen und unsere Etiketten oben hinzufügen. Jetzt werden wir Eisenbahn verwenden 14 Punkte und weiß und Sie denken, ich will kursiv statt nur regulär tun . Also, ich sage es, kam jetzt, um alles andere auszuschalten, einschließlich des Hintergrunds, damit wir den Text nach oben ausrichten können. Und wir müssen diesen Text auch aus dieser Gruppenebene ziehen. Also wieder, mit unserem Ausrichtungswerkzeug, werden wir jedes von ihnen mit unserer Shift-Taste und dann eine nach oben liegende Taste auswählen. Okay, lassen Sie uns unsere Formularbeschriftungen hinzufügen, die hier im Inneren liegen. Wir werden die Schriftart 2 24 für die Schilder und Eisenbahn regelmäßig ändern. Okay, gehen wir weiter und nehmen das hier und machen es wirklich mutig. Also werde ich gut gebrauchen, zitterte. Okay, das letzte, was wir tun müssen, ist alles auszurichten. Also, für die Beschriftungstitel, lassen Sie uns sie an den Rand ihrer Zeilen ausrichten und wir können einfach gehen und jede Ebene greifen. Ich möchte diese auch in Ordnung bringen, und dann werde ich nur mein Verschiebungswerkzeug verwenden, um es zu verschieben. Also tun Sie das einfach für jeden. Und dann müssen wir unsere Etiketten innerhalb der Rose direkt in der Mitte ausrichten. Und ich möchte auch auf der linken Seite jeder Reihe ein wenig Platz geben. auch so aus, Siehtauch so aus,als wäre meine Zeile um ein Pixel ausgeschaltet. Also werde ich reingehen und das überziehen, und wir sollten die auch in der Reihenfolge organisieren, in der sie auch sein sollten. Ich werde es einfach ganz oben und unten neu ausrichten. Also was? Das sind Rechtecke Wahlkampf. Wir können eine Auswahl treffen und dann versuchen wir, sie mit unserem Ausrichtungswerkzeug auszuwählen. Es erlaubt uns, das zu tun, ändern Sie es in Auswahl und dann eine Linie Mitte des Ziels. Also werde ich einfach voran gehen und jede dieser anderen Ebenen packen und sie auch an der Mitte des Ziels ausrichten . Okay, gehen wir weiter und bringen alle diese über. Aber zuerst müssen wir eine Messung machen, um den Abstand zwischen dem linken Rand und unserem Text herauszufinden , so dass wir es alle gleich über die verschiedenen Rose machen können. Nun ist die eine Sache, die ich tun möchte , ist, dass ich diesen Inhalt nehmen und ihn nur ein wenig nach rechts schieben möchte, um ihm hier auf der linken Seite mehr Atemraum zu geben . Also habe ich 14 Pixel. Ich werde eigentlich das auswählen und es zu einem schönen sogar 15 Pixel machen. Und dann müssen wir nur jedes von ihnen messen, um diese zu realisieren. Also mach voran, mach deine Messungen und bewege alles entsprechend. Nun für diese beiden, werden wir sie tatsächlich direkt in die Mitte ihrer Kisten schicken, da sie quadratisch sind . Also lassen Sie uns voran und greifen das Rechteck wieder auswählbar, so dass wir in der Mitte so Mitte und Mitte des Ziels und dann das gleiche für diese letzte hier ausrichten können . Okay, lassen Sie organisiert sind Schichten ein wenig. Ich werde eine neue Ebenengruppe für unsere Titel erstellen, weitere Ebenengruppe für unsere Beschriftungen und dann eine weitere Ebenengruppe für den Hero-Abschnitt. Gehen wir weiter und verkleinern. Ich denke, wir müssen nur Zentrum sind Aktion genannt. Eigentlich haben wir die Höhe unseres Heldenabschnitts noch nicht definiert, also machen wir das und machen wir es 700 Pixel hoch. Lass uns voran gehen und eine Auswahl treffen, und dann werden wir unser Eigentumswohnung Bild herausziehen, damit wir alles andere in der Heldenabteilung in diesem Bereich ausrichten können . Und das letzte, was wir tun müssen, ist, dass wir unser Bild hier unten beschneiden müssen, damit es nicht unter dem Heldenbereich angezeigt wird. Also lasst uns das Bild schnappen. Lassen Sie uns eine Auswahl direkt um diesen Teil, den wir loswerden wollen und eine Ebenenmaske und weißen drücken, den Buchstaben D und dann den Buchstaben X und dann Ihre Lösch- oder Rücktaste, und das wird diesen Teil des Bildes entfernen. Und unsere Heldenabteilung ist jetzt fertig. Herzlichen Glückwunsch. Jetzt sind wir bereit, mit dem nächsten Teil fortzufahren, die Dienste oder den Benefits Abschnitt mit diesen vier Spalten erstellt. Aber zuerst werden wir daran arbeiten, unsere Symbole für diese Vorteile zu erstellen 60. Körperteil 1: Hallo und willkommen zurück. Ordnung, also werden wir jetzt anfangen, an diesem Teil unseres Körpers zu arbeiten, dem vier Hauptvorteile gehören. Und zuerst werden wir unsere Symbole für jeden dieser Vorteile erstellen. Nun, wenn es um Symbole geht, haben Sie zwei Möglichkeiten. Sie können sie entweder kostenlos online finden oder sie online von jemand anderem kaufen, oder Sie können Ihre eigenen gestalten, so dass es nicht allzu schwer wäre, Symbole zu finden, die mit diesen Vorteilen zusammenhängen . Aber was ist der Spaß daran? Was wir also tun werden, ist, dass wir diese ersten 2 Symbole von Grund auf neu erstellen, und dann werden wir diese beiden in der nächsten Lektion von Grund auf neu machen. Also lassen Sie uns voran und beginnen, indem Sie ein neues Dokument erstellen, Commander Control und den Brief in. Lassen Sie uns Größe bei 75 mal 80. Und füllen wir es mit Weiß, so dass unsere Symbole Luft einfach aus verschiedenen Formen gemacht werden . Also lassen Sie uns voran und erstellen Sie neue früher für die erste Form. Und für die Größe werden wir 70 mal 75 tun und wir werden nur einen Strich um die Auswahl hinzufügen, um zu bearbeiten und dann Strichauswahl auszuwählen. Machen wir zwei Pixel einfarbig und lassen Sie uns Black Que de Select Commander Kontrolle und den Buchstaben D Ich werde das hier einfach in Position bringen. Wir müssen auch die Layergrenzen beschneiden. Wir gehen Ebene, beschneiden den Inhalt, und lassen Sie uns auch unsere größeren Grenzen zeigen. Also lasst uns weitermachen und unsere nächste Form machen. Wir müssen auch eine neue Schicht Ford als auch erstellen. Das heißt nicht 101 und für die Größe, die wir acht mal acht machen werden, und dann werden wir einen Schlag um ihn wieder beenden. Gleiche Größe und D Select wurde auch den Inhalt beschneiden und lassen Sie es dreimal duplizieren. Dann ordnen Sie die Ebenen neu an und nehmen wir dann jede davon und ziehen Sie sie nach unten. Also genau da sollte es gut sein. Wir greifen unser Ausrichtungswerkzeug und wählen sie alle mit gedrückter Umschalttaste aus. Und dann werden wir es in das erste Element ändern, und dann lassen Sie es auf Null für X und 25 für warum es ein wenig zu viel ist. Versuchen wir es 10. Nicht genug. Versuchen wir es 18. Lass uns etwas weniger gehen. Da gehen wir. Das wird funktionieren. Ich werde die in eine neue Ebenengruppe legen, okay? Wir müssen jetzt nur noch ein paar Zeilen machen. Also wieder, wir verwenden einfach unser Rechteck auswählbar, um eine Linie zu erstellen. Und ich mache meine 40 mal zwei. Wir erstellen eine neue Ebene namens Lügen. Füllen Sie es mit Schwarz, die Auswahl und Zuschneiden auf Inhalt. Geh weiter und zieh das nach unten. Also ist es unten in dieser Box hier, und ich werde es dreimal duplizieren und sie als Mensch in Position bringen und einfach diese 01 bis 04 umbenennen und sie in ihre eigene Gruppenschicht legen. In Ordnung, gehen wir voran und nehmen beide und legen sie in eine andere Ebenengruppe. Auf diese Weise können wir sie alle nach unten bringen. Lassen Sie uns voran und treffen Sie eine Auswahl direkt hier, damit wir sie direkt in der Mitte des Umrisses selbst platzieren können . In Ordnung, lassen Sie uns eine neue Ebene für unseren Kreis an der Spitze erstellen. Wir greifen unser Lippenwerkzeug und ziehen uns einen Kreis aus. Lass uns 15 mal 15 machen. Eigentlich machen es ein wenig kleiner 13 mal 13 und wir werden einen Schlaganfall hinzufügen. Lassen Sie uns diesmal ein Pixel von der Linie mit De Select machen. Und dann schnappe ich mir einfach mein Textwerkzeug, um den Buchstaben X zu setzen und ich werde das etwas kleiner machen. Lass uns 12 zwei große machen. Versuchen wir es 10 und acht. Also werde ich meinen um acht machen. Setzen Sie das direkt in die Mitte und schließlich eine neue Ebenengruppe für diesen Inhalt. Okay, ein letzter Schritt. Wir werden eine neue Ebenengruppe namens Konto erstellen, was unser erster Vorteil ist, und dann nehmen wir das und fügen es unserem Dokument hinzu. So gibt es unsere erste Ikone. Gehen wir weiter und arbeiten an unserem zweiten Symbol. Ich werde voran gehen und das löschen, Okay, also war der 1. 1 ziemlich einfach. Die nächste, die wir tun werden, ist Plug und wir werden Rechtecke, abgerundete Ecken Rechtecke und einige Linien verwenden , um den Stecker zu erstellen. Also lassen Sie uns voran und erstellen Sie unseren ersten Teil unseres Plugs mit einer neuen Ebene, und wir werden unser Rechteck auswählbar auswählen. Wir möchten sicherstellen, dass wir abgerundete Ecken und eine Größe von 50 für den Radius ausgewählt haben. Nun, was die Größe für unseren ersten Teil unseres Steckers anbelangt, werden wir 80 mal 35 machen. Wir gehen zu Änderungen und fügen ihm auch einen Strich hinzu. Zwei Pixel für die Zeile mit Go ahead und tun Sie das de Select jetzt, weil die Auswahl auf der Außenseite meines Dokuments war hier. Es hat den Rand unserer Form direkt hier am Rand des Dokuments erstellt. Aber das ist in Ordnung, denn ich werde das beschneiden, damit ich etwas Platz für die Abschlussballteile des Steckers haben kann . Also gehen wir weiter und greifen das Rechteck-Auswahlwerkzeug wieder, weil ich eine Linie erstellen möchte und ich werde es auf eine neue Ebene setzen, falls ich eine Bewegung brauche. Später werde ich abgerundete Ecken ausschalten und dann werde ich es mit Schwarz füllen. Okay, ich gehe zurück zu meinem Stecker, damit ich das Teil rausschneiden kann. Also werde ich nur eine Auswahl treffen und dann unter Kontrolle kommen und den Buchstaben X, um es zu schneiden . Ich denke, ich möchte diesen Teil nur ein wenig überziehen und dann wieder schneiden. Okay, ich mag diese Größe. Also gehe ich voran und gehe zum Plug to Layer, rechten Maustaste und wähle Zusammenführen nach unten aus. Und jetzt wird das zu einem Stück, und ich werde auch weitergehen und beschneiden. Es könnte ein bisschen zu groß sein, aber wir werden das herausfinden, nachdem wir etwas mehr vom Stecker selbst gemacht haben. Lassen Sie uns voran und erstellen Sie die Zinken mit unserem Rechteck auswählbare neue Ebene und füllen Sie sie dann mit schwarz. Das ist auch duplizieren Sie diese Ebene und verschieben Sie sie nach unten. Lassen Sie uns auch auf Inhalt für beide Ebenen zuschneiden, klicken Sie mit der rechten Maustaste und wählen Sie wieder nach unten und dann lassen Sie uns es direkt in der Mitte des Steckers selbst. Okay, ich werde weiter gehen und mit der rechten Maustaste klicken und das auch ermordet. Ich werde es duplizieren und schalten Sie es aus und wieder Größe. Es ist kleiner, so dass ich vorerst mit einem kleineren Steckkopf arbeiten kann. Und der Grund, warum ich es dupliziert habe, ist, weil wenn ich beschließe, dass ich zu dieser Größe zurückkehren muss, muss ich es nicht von Grund auf neu wiederholen und ich werde das Original dort haben, wenn nötig. Sobald ich fertig bin. Wenn mir diese Größe besser gefällt, werde ich die, die ich nicht brauche, löschen. In Ordnung. Zurück zum Rechteck wählbare abgerundete Ecken Und lassen Sie uns 25 für den Radius tun. Und ich wollte hier eine kleine Form schaffen, um die Schnur zu beginnen, Teil unserer Form. Größe angeht, werde ich ein bisschen kürzer machen, werde ich 12 mal vier machen. Und wir werden eine neue Ebene erstellen und sie mit Schwarz füllen. Und dann werde ich das einfach nach rechts verschieben und dann lassen Sie uns auch zufrieden sein. Ich denke, das ist ein bisschen zu groß. Also werde ich voran gehen und mein Skalenwerkzeug mit Shift Plus s packen und es kleiner machen. Also neun mal drei sollten gut sein. Alles klar, wir müssen den Rest des Mais erschaffen. nun Lassen Sie unsnuneine neue Ebene namens Schnur erstellen, um Ihr Rechteck auswählbar Legen Sie den Radius auf 25 . Dann für die Größe werde ich 40 mal 18 machen und wir werden wieder einen Schlaganfall hinzufügen. Schwarz auch. Perfekt. Okay, lass de wählen. Gehen wir weiter und schneiden das Ende davon ab. Stellen Sie sicher, dass abgerundete Ecken ausgeschaltet sind, und gehen Sie dann weiter und schneiden Sie es aus. Lassen Sie uns voran und bewegen Sie dies in Position und beschneiden auch zum Inhalt. Also dieser erste Teil der Schnur möchte ich dicker machen. Also werde ich zurück zu Shift plus s gehen und die Höhe erhöhen. Also haben wir noch ein Stück von diesem Akkord übrig. Lassen Sie uns also eine neue Ebene namens Cord drei erstellen und wir werden wieder abgerundete Ecken machen. Mit einem Radius von 25 Kayla und einem Schlag. Wir werden den Inhalt wieder beschneiden und dann das Ende mit unserem Festzelt Tool Commander Control und X abschneiden Tool . Und unser Plug ist jetzt fertig. Wir müssen nur unsere Schichten ein wenig aufräumen. Lassen Sie uns weiter gehen und einige dieser Ebenen nach unten zusammenführen. Eigentlich bin ich es nicht. Gehen Sie weiter und tun Sie das für alle. Und rufen wir die Layer-Dienstprogramme auf und bringen sie dann in Ihr Dokument. Okay, das ist ein bisschen klein. Insgesamt werde ich voran gehen und meine Guides auf das andere Symbol bringen, und dann werde ich es mit unserem Drehwerkzeug drehen und es einfach drehen, so dass es in einem Winkel ein wenig ist, wenig ist, und das wird helfen, einige von diesen leeren Raum. Und jetzt ist unsere zweite Ikone fertig. Die andere Sache, die ich tun möchte, ist, dass ich die Deckkraft unserer Symbole senken möchte, weil ich denke, dass das Schwarz ein wenig zu dunkel ist. Lassen Sie uns also die Deckkraft auf nichts zu tun fallen. 50 für beides. Und da gehen wir. Wir haben zwei Symbole fertig, und wir gehen weiter und beenden die anderen beiden im nächsten Tutorial. 61. Körperteil 2: Also haben wir noch zwei weitere Symbole zu entwerfen, und wir werden unsere Formen wieder verwenden, sowie ein weiteres Werkzeug, das dieses Werkzeug hier ist, das Pfadwerkzeug. Also lassen Sie uns voran und erstellen Sie zuerst unser Heim-Icon. Und lasst uns weitermachen und mit einer neuen Schiefer beginnen. Lassen Sie uns voran gehen und erstellen Sie unsere erste Ebene für die Tür und greifen Sie Ihr Rechteck-Auswahlwerkzeug . Stellen Sie sicher, dass abgerundete Ecken deaktiviert sind. Und dann für die Größe, machen wir es 18 mal 30. Lassen Sie uns einen Strich mit Schwarz hinzufügen gehen, um für die Linie mit zu tun. Und stellen wir sicher, dass wir auch den Inhalt beschneiden. Und ich werde auch alle mit Commander-Steuerung und einem auswählen und dann int an der Mitte ausrichten . Okay, lassen Sie uns eine andere Ebene erstellen. Nennen wir es Haus, und wir werden dieses 1 54 mal 54 einen weiteren Strich de Select und beschneiden den Inhalt und lassen Sie es in Position bewegen. Dasselbe werden wir alle auswählen und unser Ausrichtungswerkzeug zu einer Linie in die Mitte und dann de wählen. Okay, jetzt werden wir das Dach für das Haus erstellen und wir werden dieses Werkzeug hier auswählen, welches das Pfadwerkzeug ist. Ich werde auch eine Führung ziehen 2 37 Pixel und dann schalten Sie Ihre Führung, so dass Sie es sehen können . Okay, wir werden unseren Weg hier oben links im Haus beginnen. Klicken Sie einfach rechts dort, dann kommen Sie auf die linke Seite des Dokuments, klicken Sie erneut, und dann erhalten Sie den kleinen Pfad dazwischen. Diese beiden Ankerpunkte würden zu unserem Guide hier oben im Dokument kommen und auf den Guide direkt dort klicken und dann wieder auf die rechte Seite. Und dann gehen wir weiter und klicken hier, um diesen Weg zu beenden. jetzt Bevor wir den Strich dem Pfad hinzufügen, lassen Sie unsjetzteinen neuen Layer namens Roof erstellen. Dann werden wir den Strich hinzufügen, indem Sie nach oben gehen, um den Strichpfad zu bearbeiten und auszuwählen. Okay, jetzt haben wir das Dach fertig. Gehen wir zurück zum Haus-Layer, damit wir diesen Teil des Shapes löschen können. Beschreiben Sie also Ihre Rechtecke. Wählen Sie Werkzeug wieder und dann mit Commander Kontrolle und X gelöscht. Okay, lassen Sie uns voran und erstellen Sie einen Schornstein wurde abgerundeten Ecken auf und setzen Sie es auf 10 für den Radius. Und dann für die Größe, machen wir es neun mal 17 und fügen Sie dann einen Strich hinzu. Ordnung, ich möchte diesen Teil des Schornsteins löschen, also werde ich mein Radiergummi mit dem Buchstaben e packen. Von hier aus kann ich diesen Teil des Schornsteins löschen, damit er sich nicht auf der Innenseite zeigt. Ich möchte auch diesen Teil des Daches entfernen lassen. Also lasst uns unsere Dachschicht greifen und dann innerhalb von hier löschen. Lassen Sie uns fortfahren und alle diese in eine neue Ebenengruppe einfügen. Es ist eine Mitbewohnerin gefangen. In Ordnung, lassen Sie uns weitermachen und das zu unserem Webdesign-Projekt hinzufügen. Lassen Sie es da rein und lassen Sie uns auch die Deckkraft auf 50% fallen. In Ordnung, noch ein Symbol links. Lassen Sie uns voran gehen und löschen Sie diese Ebene und deaktivieren Sie die Hilfslinien. Lasst uns unser Ellipsenwerkzeug packen und dann, für die Größe, werden wir es 18 mal 28 dimensionieren. Kate. Lassen Sie uns eine neue Ebene hinzufügen und dann und Ihre Strich de wählen. Lassen Sie uns sicherstellen, dass wir nicht vergessen, zu beschneiden, die Ebenengrenze und dann viermal dupliziert. Ich werde nur voran gehen und die in Position bringen, also so etwas wie das. Alles klar, gehen wir zurück zum Ellipsenwerkzeug und ich möchte meine und 42 mal 29 neue Ebene machen. Und dann fügen Sie den Strich de Select Commander Control und D. hinzu. Ich gehe zurück zu meinem Radiergummi Werkzeug, weil ich einen Teil davon hier löschen möchte. Und dann werde ich mein Pinselwerkzeug mit dem Buchstaben B packen und dann, soweit die Größe, werde ich vier für die Größe des Pinsels gehen und dann werde ich einfach in einem kleinen Bogen hier malen . Das sieht also ziemlich gut aus. Ich werde das in die neue Ebenengruppe setzen. Und der Grund, warum ich all dies in eine neue Ebenengruppe setze und sie alle zusammenführe, ist , weil ich später vielleicht einen Teil des Symbols vergrößern möchte. Und ich kann das einfach tun, indem ich die einzelnen Ebenen auswähle, die ich in der Größe ändern möchte, anstatt sie ganz von Grund auf neu machen zu müssen. Ok. Stellen Sie sicher, dass Sie die Deckkraft auf 50 fallen. Nun, es wird meine Ebenen hier aufräumen sie ein wenig umbenennen. Stellen Sie sie in Ordnung, und wir werden alle bereit sein, mit dem nächsten Tutorial fortzufahren. Okay, wir sind alle fertig mit unseren Symbolen. Im nächsten Tutorial. Wir gehen weiter und beenden diesen Abschnitt, indem wir Inhalte hinzufügen, alles zentrieren und die Ebenen organisieren. Also, wenn du dafür bereit bist, lass es uns tun. 62. Körperteil 3 Vorteile: Hallo und willkommen zurück. In Ordnung, also haben wir vier Vorteile, 12 Spalten. Also werden wir jede zwei Spalten in drei Spalten aufteilen. Lassen Sie uns voran und definieren Sie zuerst die Höhe des Abschnitts, 430 Pixel betragen wird. Also werde ich voran gehen und eine Messung von unten in meinem Heldenbereich nehmen und auf 4 30 gehen lassen und eine Richtlinie. Und das wird uns helfen, alles von oben nach unten zu zentrieren, sobald wir zu diesem Punkt gekommen sind. Okay, lasst uns weitermachen und einige Inhalte für die Titel ausgeben, die ich tun werde. Eisenbahn halb fett 24 für die Größe und eine dunkelgraue Farbe für die Farbe. Gehen Sie weiter und legen Sie diese Schicht hier oben. Ich tippe vorerst alles aus. Und dann organisieren und zentrieren wir alles entsprechend. Also, für einen Absatz, gehe ich einfach regelmäßig zurück zur Eisenbahn für den Inhalt, den ich 16 machen werde und die gleiche Farbe. Ich werde nur klicken und ziehen Sie ein Textfeld. habe bereits einige Informationen, die ich gerade einfügen werde. Sie können die gleichen Informationen eingeben oder Sie können einfach einen Dummy-Text verwenden. Ich denke, es macht dieses Textfeld tatsächlich die volle Breite aller drei Spalten, die auch das aufbringen werden. Und dann müssen wir nur einen Textlink hier unten erstellen. Ich werde es mutig machen, und ich werde die blaue Farbe aus dem Branding der Firma wählen. Okay, lassen Sie uns das in Position bringen. Ich werde meine Netze vorerst ausschalten. Nun, lassen Sie uns an einigen Abständen arbeiten. Also der Abstand zwischen unserem Symbol und unserem Titel, ich möchte, dass es 20 Pixel sein. Also werde ich voran gehen und das ausmessen. Lasst uns voran gehen und diese beiden ausrichten. Lassen Sie uns eine neue Ebenengruppe namens Konto erstellen, und ich werde meinen Titel und mein Symbol auf die Innenseite legen. Und dann werde ich mein Rechteck-Auswahlwerkzeug greifen, damit ich es zwischen diesen drei Spalten ausrichten kann , meine Noten zurückkehren und sicherstellen kann, dass ich alle Raster ausgewählt habe. Okay, schalten wir das Gitter aus und was dann? Die Ausrichtung geht weiter und greift diesen Inhalt und eine Linie zur Mitte oder zum Absatz sollte bereits zentriert sein. Da wir es über drei Spalten angewendet haben. Wir müssen nur Graham Profil-Link erstellen und das an der Mitte ausrichten. Okay, als nächstes müssen wir de wählen und weiter mit unserem Abstand zwischen dem Titel des Absatzes und dem Link hier unten. Also lasst uns wieder unser Messwerkzeug greifen und lasst uns 30 Pixel vom unteren Rand des Titels bis zum Absatz und dann 20 Pixel wieder für den unteren Teil des Absatzes und unseren Link machen. Okay, lassen Sie uns all diese Informationen in die Gruppenebene einfügen, die Konto genannt wird. Okay, das müssen wir nur noch drei Mal machen. Wir gehen weiter und schalten meine Waffen aus. Und um dies zu erleichtern, können wir diese Gruppe einfach duplizieren, verschieben und dann den Inhalt und das Symbol mit dem entsprechenden Symbol anpassen. Anstatt einfach alles von Grund auf neu zu schreiben, könnten wir den gleichen Inhalt verwenden. Wir können neuen Dummy-Text verwenden. Oder wenn Sie sich Zeit nehmen wollen, um etwas Neues zu schreiben, können Sie das auch tun. Also werde ich weitermachen und das fertig machen. Sie können beobachten, oder Sie können voran gehen und diesen Teil überspringen und es selbst beenden. Und dann vergessen Sie nicht, all diesen Inhalt auszurichten, sobald er in einer neuen Ebenengruppe namens Vorteile online es aus dem Heldenbereich unten im Abschnitt oben am unteren Rand des Abschnitts ist. Also werde ich voran gehen und meine Gitter einschalten und anfangen, alle meine neuen Inhalte auszurichten. - Alles klar, wir sind fast fertig. Ich werde alles ausrichten. Jetzt muss ich es in eine neue Gruppen-Ebene einfügen, und das war's. Unser Benefit Abschnitt ist jetzt fertig. 63. Body: Da unser Kunde zwei Hauptpersonen hat, die er anvisieren muss, müssen wir einen Abschnitt für diese zweite Gruppe erstellen, so dass ihr Hauptdienst die Bereitstellung von Angeboten zur Miete ist. Aber sie brauchen diese tatsächlichen Angebote von Immobilieneigentümern oder Vermietern zu kommen, so dass sie sicherstellen müssen, dass sie ständig neue Angebote hinzufügen können, hoffentlich auf einer täglichen Basis. Wir möchten also einen Abschnitt für die Eigentümer erstellen, um ihre Immobilie einfach aufzulisten. So erscheint es auf dieser Website. Das erste, was wir tun werden, ist die Höhe dieses Abschnitts zu definieren , der 150 Pixel hoch sein wird. Also lasst uns unser Messwerkzeug greifen und 150 Pixel ausmessen. Aber ein Kerl da unten und lassen Sie uns einen Hintergrund erstellen, um Ihr Rechteck-Auswahlwerkzeug zu greifen, treffen Sie Ihre Auswahl. Lassen Sie uns eine neue Ebene namens Hintergrund erstellen. Lassen Sie uns voran und wählen Sie die blaue Farbe, die wir von ihrem Branding verwendet haben, und dann gehen Sie vor und füllen Sie es mit Ihrem Eimer füllen Tool de select. Lassen Sie uns es Eigenschaft Eigentümer Hintergrund umbenennen. Als Nächstes werden wir uns unser Textil schnappen. Lasst es uns zurück Zehenweiß ändern. Wir werden Eisenbahn mutig machen. Lassen Sie uns 24 für die Größe tun und dann Disco voraus und geben Sie eine Textzeile ein. Ich werde es einfach dort platzieren. Ich bin mir noch nicht sicher, wo ich es will. Okay, lass uns voran gehen und unsere erstellen, aber jetzt, geh weiter und schnapp dir dein Recht. Kingo Selektionswerkzeug. Wir wollen abgerundete Ecken in 25 für den Radius und dann für die Größe, lassen Sie uns zu 75 100 tun. Wir werden jetzt eine neue Ebene namens Schaltflächenliste erstellen und dann gehen Sie voran und füllen Sie sie mit Weiß. Alles klar, lasst uns unser Textwerkzeug packen und wir werden die Pfeilgröße 50 verwenden, und wir werden die gleiche blaue Tapout-Liste jetzt verwenden. Dann müssen wir es nur innerhalb des Knopfes zentrieren. Lassen Sie uns jetzt unsere Schaltflächenliste greifen und die Ebenengrenze zuschneiden. Gehen Sie voran und wählen Sie es mit Ihrem lahm ein Werkzeug und eine Linie in die Mitte und Mitte. Okay, ich werde das in eine neue Ebenengruppe namens Les Nail Button setzen und uns voran gehen das von oben nach unten wählen. Lasst uns weitermachen und unseren Text nur ein wenig überlegen. Ich werde voran und zoomen. In Ordnung, lassen Sie uns weitermachen und 50 Pixel Abstand zwischen dem Werkzeug hinzufügen, also greifen Sie Ihr Messwerkzeug und messen Sie 50 Pixel aus. Ok? Ich muss dies auch im Hintergrund von oben nach unten ausrichten. Lassen Sie uns voran gehen und diese beiden in eine neue Ebenengruppe einfügen. Nennen wir es Immobilieneigentümer. Also werden die Schaltfläche und der Inhalt dort hineingehen. Der Hintergrund. Wir werden nur für eine Sekunde auslassen, weil wir das an der Mitte der Dokumente ausrichten müssen . So wählen Sie alle mit Commander Steuerung und ein dann wählen Sie den Inhalt und richten Zentrum des Inhalts de Select, dann legen Sie die Eigenschaft auf ihrem Hintergrund innerhalb dieser Gruppenebene. Wir müssen das tatsächlich wieder nach unten bewegen. Schließ das auf. Ich habe auch mein Eigentumswohnung Bild aus dem Heldenbereich hören, nicht in den Gruppenschichten. Also werde ich voran gehen und das auf die Innenseite legen und es nach unten schieben , und das war's. Unser Immobilieneigentümer Abschnitt ist jetzt fertig. Das war ein leichtes. In Ordnung. Im nächsten Tutorial. Wir werden weitermachen und anfangen, an den vier oder fünf Hauptkategorien zu arbeiten .Wenn Sie also dafür bereit sind,machen wir es. Wenn Sie also dafür bereit sind, 64. Listen: abhängig von der Phase, in der sich ein Interessent im Kaufzyklus befindet oder an dem Punkt, an dem sie bereit sind zu mieten. Etwas kann bestimmen, wie viel und wie weit sie auf einer bestimmten Website navigieren. So zum Beispiel landen sie zum Beispielauf der Startseite, und ihnen wird sofort die Möglichkeit gegeben, Eigenschaften basierend auf ihrem Budget, der Lage und einigen anderen Faktoren zu filtern . Aber sie sind möglicherweise nicht bereit, vier Immobilien von diesem speziellen Unternehmen zu suchen . Vielleicht möchten sie zuerst etwas mehr über das Unternehmen erfahren. Warum sollte ich Geschäfte mit dieser Firma machen? Also in diesem Fall können sie beginnen Scrollen nach unten oder navigieren zu einer der Navigationsoptionen erscheinen, so wie sie verdammt scrollen, werden sie mit vier Vorteilen für die Vermietung von Immobilien durch diese spezielle Firma präsentiert . Also verkaufen wir die Dienstleistungen dieses Unternehmens mit diesem Service-Bereich. Sie können dazu verleitet werden, ihre E-Mail-Adresse anzugeben, damit sie benachrichtigt werden können, wenn ein neues Angebot bereitgestellt wird. Sie mögen die Idee, dass diese Firma ihnen helfen wird, ihre Versorgungsunternehmen zu organisieren, weil sie sehr beschäftigt sind, und sie haben nicht wirklich Zeit dafür. Ja, sie könnten wahrscheinlich Zeit finden, aber sie sind so beschäftigt, es wäre schön, dass jemand anderes es für mich macht. Also, was ist für mich drin? Das sind die Dinge, die für diesen Mieter drin sind. Jetzt fangen sie an zu denken, OK, diese Firma hat meinen Rücken. Ich bin bereit, mit der Suche zu beginnen, damit sie entweder wieder hierher kommen und mit dem Filtern beginnen können. Oder wenn sie weit genug nach unten scrollen, werden sie dann Immobilieneinträge sehen, die auf den vier oder fünf beliebtesten Kategorien basieren, was ich hier entworfen habe. Der Gedanke ist, dass wir die beliebtesten Anfragen an die Spitze stellen wollen, gefolgt von jeder der weniger populären Arten von Kategorien. Also vielleicht für diese spezielle Firma, ihr größter Verkaufsargument ist, dass sie haustierfreundliche Vermietungen haben, und das ist ihre beliebteste Art von Filtern, die Menschen verlangen. Also möchten Sie, dass an der Spitze setzen, und jedes Mal, wenn ein neues Angebot hinzugefügt wird, es hier auf der linken Seite hinzugefügt und dann wird die eine auf der rechten Seite stoßen, so dass Sie frische Angebote immer auf der Homepage aufgelistet haben . Aber Sie werden immer auf Seymour zu gut klicken, Seymour Eigenschaften in dieser bestimmten Kategorie, Vielleicht ist das keine Kategorie, die Sie wirklich interessieren, weil Sie keine Haustiere haben, während vielleicht Lofts sind die Art der Immobilie, die Sie wollen und diese Luft die nächsten beliebtesten Arten von Mietanfragen. Und wieder, wir machen es einfach für Interessenten zu finden, was sie brauchen, und sie können nach unten scrollen und eine bestimmte Auflistung finden, die für sie funktioniert. Also werden wir diesen Teil der Websites entwerfen und ihn zusammenstellen. Es ist wirklich super einfach. Wir haben eine Schlagzeile. Wir haben zwei Formen, eine für einen Bildplatzhalter, eine für den Inhalt. Und dann platzieren wir unsere Inhalte innerhalb von dort. Und dann alles, was wir tun müssen, ist, wenn wir diese 1. 1 erstellen wird dreimal dupliziert und das Meer mehr Link. Und dann können wir diesen gesamten Inhalt noch 34 Mal dupliziert nehmen. Ändern Sie die Schlagzeilen und natürlich möchten wir hineingehen und verschiedene Bilder hinzufügen. Es ist nicht notwendig, das zu tun. Sie könnten technisch das gleiche Bild für jedes Angebot führen, da dies nur für eine Bewertung für Ihren Kunden ist . Und natürlich natürlich lassen Sie den Inhalt für jedes Angebot gleich. Aber ich gehe gerne die Extra-Meile und achte nicht nur auf die kleinen Details, sondern ich möchte meinem Kunden eine visuelle Darstellung dessen geben, was sie erwarten können wenn es live geht. Ja, sie können das mit diesem Haus in jeder einzelnen Kategorie Eintragung visualisieren. Aber ich denke, es hilft, es zu brechen und besser zu visualisieren, was für ihre neue Website vor sich geht , wenn sie tatsächlich verschiedene Bilder und verschiedene Angebote in verschiedenen Preisen sehen können. So ist es wirklich einfach zu tun, und es dauert nur 10 15 Minuten, um einige dieser Informationen zu ändern und die Bilder zu ändern . Es geht also nur diese kleine Extra-Meile, um unseren Kunden zu helfen, visuell zu sehen, wie ihre Website aussehen wird, sobald sie das endgültige Design genehmigt haben. Das erste, was Sie tun müssen, ist ein paar Bilder herunterzuladen. Also ging ich einfach, um sabei dot com zu wählen und habe eine Suche nach Immobilien Häuser gemacht. Sie können ein Bild herunterladen, oder Sie können 16 verschiedene Bilder basierend auf den vier verschiedenen Kategorien herunterladen, und dann, wenn Sie sie alle heruntergeladen haben. Fügen Sie sie Ihrem Projekt hinzu und platzieren Sie diese Bilder in die entsprechenden Kategorien. Und ich habe haustierfreundliche Loft-Mieten, Mieten mit Pools und Einfamilienhäusern und dann diese Gruppen Schichten entsprechend umbenannt. Und dann sollten Sie auch jede dieser Ebenen umbenennen, basierend auf der Kategorie, so dass wir haustierfreundlich eins bis vier haben und dann dasselbe für die anderen tun . Aber bevor wir das tun, möchte ich dir nur noch einen kurzen Tipp geben. Obwohl ich meine Layer basierend auf dem Inhalt dieser Ebene entsprechend umbenennen möchte,möchte ich einen Grund angeben, warum Sie diese Layer möglicherweise nicht umbenennen möchten. Obwohl ich meine Layer basierend auf dem Inhalt dieser Ebene entsprechend umbenennen möchte, Wenn Sie diese Bilder von Picks gehorchen herunterladen, haben sie einen bestimmten Dateinamen an sie angehängt. Also, wenn wir einen Blick auf diese 1. 1 hier und alle anderen werfen, haben wir Haus, dann eine siebenstellige Zahl, und dann ah, dreistellige Zahl. Wenn wir in gehen und wir wählen diese dreistellige Nummer und dann kopieren und einfügen wir in Picks, gehorchen Suche, es wird uns zu dem genauen Bild bringen, das wir heruntergeladen haben. Und das ist 6 40 sagt uns die Auflösung, die wir heruntergeladen haben, so 6 46 40 Nun, das macht es einfach, das genaue Bild, das Sie heruntergeladen, weil sagen wir, Sie haben dies umbenennen und dann Ihr Client sagt, ich liebe dieses Bild. Lassen Sie es uns auf der Live-Website verwenden. Nun, diese Auflösung, die Sie heruntergeladen haben, vielleicht zwei kleine, vor allem, wenn Sie vorhaben, ein großes Bild wie dieses zu machen. Also, jetzt müssen Sie zurück gehen, und Sie müssen dieses bestimmte Bild finden, damit Sie es und eine höhere Auflösung herunterladen können. Das Problem ist, dass Sie den Layer umbenannt haben, und Sie haben den Trakt der URL für dieses Bild nicht beibehalten. Dies ist ein Grund, warum Sie den Layer möglicherweise nicht umbenennen möchten, da es Ihnen bei Bedarf leicht macht, dieses spezifische Bild später zu finden . Nun, für dieses spezielle Projekt, ich weiß, dass dieser Client wird diese Bilder nicht verwenden, weil sie nicht hören diese tatsächlichen Häuser auf ihrer Website. Also in diesem Fall bin ich in Ordnung mit der Umbenennung dieser Schichten tierfreundlich eins bis vier. Und natürlich müsste ich das auch für die anderen Schichten tun und das werde ich später tun . Im Moment werde ich einfach voran gehen und diese vier machen, okay? Jetzt, da wir die Bilder an Ort und Stelle haben, müssen wir sie ändern. Wir müssen einen Hintergrund erstellen, damit wir Anti-Schlagschatten, um es für das Bild und für den Inhalt als auch. Aber zuerst muss ich meine Leinwandgröße vergrößern, weil mir der Platz ausgeht. Also werde ich zum Bild gehen und Cama Größe auswählen, stellen Sie sicher, dass es freigeschaltet ist, und dann , für die Höhe, werde ich nur 5000 machen und die Größe ändern. Ich muss dieser Hintergrundebene auch Weiß hinzufügen. Also werde ich eine Hintergrundebene auswählen und die Begrenzungsgröße auf die Bildgröße erhöhen. Und dann mit meinem Eimerfüllwerkzeug kann ich es mit Weiß füllen. Okay, jetzt können wir mit der Arbeit an unserem Titel und dem Schlagschatten für die Bilder und einem Platzhalter für den Inhalt beginnen . Lassen Sie uns voran und tun Sie unseren Titel zuerst, greifen Sie Ihr Textwerkzeug mit dem Buchstaben T Lassen Sie uns Railway Bold 36 für die Größe und dann dunkelgrau für die Farbe. Okay, wählen wir aus. Außerdem können wir diesen Titel direkt in der Mitte des Dokuments ausrichten. Ich werde dies auch nach oben verschieben, und ich muss auch die anderen Layergruppen deaktivieren. Okay, jetzt, mit meinem Ausrichtungswerkzeug kann ich es und Linienmitte des Ziels auswählen. Okay, jetzt, da das fertig ist, können wir anfangen, an unseren Bildern zu arbeiten. Also will ich hier in meine erste Gruppenschicht gehen. Ich werde einen neuen Hintergrund namens Hintergrund erstellen. Stellen Sie sicher, dass Sie auch mit Commander Control in D auswählen, um diese letzte Auswahl loszuwerden . Okay, wir können jetzt weitermachen und unseren Hintergrund für Bilder und Inhalte erstellen, und wir werden es drei Spalten breit machen, was 275 Pixel breit ist. Und das wird uns vier Bilder geben, die gleichmäßig verteilt und über diese drei Spalten verteilt sind. Also lassen Sie uns in 75 für die mit eingeben. Und dann für die Höhe, werden wir 270 machen. Lassen Sie uns voran und füllen Sie das mit Weiß mit unserem Eimerwerkzeug. Und wenn ich den Buchstaben D und dann den Buchstaben X drücke, bekomme ich weiß auf meinem Vordergrund Und dann kann ich das in que de select mit Commander Control und dem Buchstaben D füllen und einfach voran und schieben Sie es hier nach oben links, und dann wir kann voran gehen und fügen Sie unseren Schlagschatten. So filtert Licht und Schatten und Schlagschatten. Nun, im vorherigen Projekt, hatten wir viele Schlagschatten während des gesamten Designs, und ich möchte Ihnen einen weiteren schnellen Tipp geben, um Ihren Schlagschatten sowie andere Filter zu verwenden , weil wir haben etwas in diesen Filtern, das es uns leicht macht, die genauen Einstellungen zu merken, die wir zuvor verwendet haben. Und Sie erinnern sich vielleicht, dass ich sagte, ich erinnere mich nicht an die genauen Einstellungen, die ich verwendet habe, und ich habe das absichtlich gemacht, damit ich Ihnen in diesem Projekt zeigen kann, wie Sie sich leicht an die genauen Einstellungen erinnern können, die Sie verwenden, wenn wir Anpassungen vornehmen und wir wie diese Anpassungen, können wir diese Einstellungen für die zukünftige Verwendung speichern, indem wir eine so genannte Voreinstellung erstellen , ist ein Werkzeug oder eine Funktion, die alle Optionen speichert, die Sie auswählen, so dass Sie es später verwenden können, und wir können das einfach tun, indem Sie auf dieses Plus-Symbol klicken. Gib ihm 'ne Dame. Ich nenne es Schlagschatten Klicken Sie auf OK, und wenn Sie dann in dieses voreingestellte Dropdown-Menü gehen, scrollen Sie nach unten, Sie werden diesen Namen hier sehen. Ich habe auch noch einen hier namens Drop Shuttle. Also im Moment habe ich 11.795 für das X und das Y. Aber wenn ich meinen Lieblings-Schlagschatten auswähle, ändern sich diese Einstellungen basierend auf dem, was ich zu der Zeit gespeichert habe, nicht nur das, sondern speichert auch Ihre zuletzt verwendeten Schlagschatten. Also im vorherigen Projekt hätte ich einfach reingehen und dieses bestimmte Datum auswählen können, und es würde, und die Einstellungen, die ich zu dieser Zeit ausgewählt habe und es so viel einfacher machen, den zuletzt verwendeten Drop anzuwenden Schatten. Es gibt also keine Notwendigkeit, diese Einstellungen aufzuschreiben oder sich daran zu erinnern. Wenn Sie eine Voreinstellung erstellen können, können Sie auch Voreinstellungen auf einige der anderen Filter anwenden. Denken Sie also daran, wenn Sie einen bestimmten Filter erstellen und Ihnen diesen Filter gefällt, stellen Sie sicher, dass Sie eine Voreinstellung erstellen, damit Sie in Zukunft problemlos wieder darauf zugreifen können. Also gehe ich zu meinem Lieblings-Schlagschatten. Ich werde tatsächlich die Einstellungen ändern und die Deckkraft erhöhen. Ich werde es retten. Und weil ich diesen Namen schon einmal benutzt habe, wird es nur eine Nummer hinzufügen. Das macht es einfach, den Überblick über die verschiedenen Lieblings-Schlagschatten zu behalten, die ich jetzt erschaffe , wo ich einen Blick auf diesen Schlagschatten werfen. Ich denke, es ist zu intensiv für diese speziellen Designs. Ich werde das wieder auf 50 fallen lassen. Ich werde es nicht retten, weil ich von hier aus auf den zuletzt verwendeten Schlagschatten zugreifen kann. Und es gibt auch einen anderen Ort, an dem wir auch darauf zugreifen können. Also lassen Sie mich Ihnen zeigen, dass ich das anwenden werde, und lassen Sie uns das mit Commander Control und dem Buchstaben Z rückgängig machen, um es loszuwerden. Und sagen wir, ich möchte diesen genauen Schlagschatten wieder verwenden, ohne in dieses Filterfeld gehen zu müssen . Nun, wenn wir zu Filtern gehen, können wir hier eine Option sehen. Es heißt Schlagschatten wiederholen und dies ist die Tastenkombination. Also Befehl oder Kontrolle, es wird Befehl sein Wenn Sie auf einem Mac-Steuerelement plus F sind, damit ich an diesem Projekt arbeiten könnte , könnte ich meine Hintergrundebene auswählen und dann einfach die Tastenkombination anwenden, Commander Steuerung und F. Und dann wendet es es direkt auf diese Ebene an, ohne zum Menü gehen zu müssen, um es auszuwählen . Wie cool ist das? Das macht es so viel einfacher, den gleichen Schlagschatten während Ihres gesamten Projekts weiter zu verwenden , im Vergleich dazu, wie wir es im vorherigen Projekt gemacht haben, wo wir wiederholt in dieses Filtermenü gegangen sind, um diese speziellen Optionen einzurichten. In Ordnung, lassen Sie uns weiter gehen und unsere Hintergrundebene hinter unser erstes Bild hier verschieben, und wir werden dieses Bild auf das mit diesem speziellen Hintergrund beschränken. Ich werde hier nur ein wenig hineinzoomen und sicherstellen, dass mein Bild perfekt mit dem Hintergrund ausgerichtet ist . Also, was ist mein Verschiebungswerkzeug und meine Pfeiltasten? Ich werde es nur in Position bringen. Jetzt werde ich mein Rechteck-Auswahlwerkzeug greifen und lassen Sie uns eine Auswahl erstellen, die 275 Pixel breit ist, was die drei großen Spalten breit ist. Und dann für die Höhe, werden wir 100 und 80 machen. Dann können wir voran gehen und diese Auswahl nehmen und sie direkt an der Stelle verschieben, wo wir sie brauchen, indem wir einfach auf das Innere dieser Auswahl klicken und sie dann mit der Maus bewegen. Wir können auch unsere Pfeiltasten verwenden, um es genau dort zu platzieren, wo wir es jetzt wollen. Weil ich mein Bild noch ausgewählt habe. Ich kann hineingehen und eine Ebenenmaske hinzufügen. Stellen Sie sicher, dass Sie Auswahl haben, und klicken Sie auf Hinzufügen. Und dann wendet es diese Lira Maske auf das Bild an und beschränkt es auf diese Form. Okay, Jetzt können wir gehen und nehmen Sie diese Hintergrundebene und dupliziert dreimal für die anderen Bilder. Und dann werde ich die neu anordnen, damit sie in der richtigen Reihenfolge sind. Und dann müssen wir nur jeden von ihnen in die Position bringen, in der sie sein müssen, wird auch unsere Gitter einschalten, damit wir sicherstellen können, dass alles perfekt ausgerichtet ist, wo sie sein müssen. Okay, ich werde diese beiden Schichten hier gruppieren, damit ich sie überziehen kann. Nennen Sie es einfach Bild eins. Ich werde auch meinen Führer einschalten, damit wir Anti-Richtlinien nach oben, so dass ich alle anderen Schichten an der Spitze ausrichten kann . Das letzte, was wir tun müssen, ist, diese Rechtecke Auswahl zu erstellen, damit wir die Bilder auf die Hintergründe beschränken können . Lassen Sie uns voran gehen und schalten Sie unsere Führungen und unser Raster aus und lassen Sie uns weitermachen und unsere anderen Bilder in Position bringen, so dass sie über ihrem jeweiligen Hintergrund liegen. Dieses Bild muss in der Größe geändert werden, also werde ich voran gehen und mir das schnappen. Und mein Geschicklichkeitswerkzeug war Shift Plus s. Lassen Sie uns voran und tun 75 für die mit. Wir haben eine Höhe von 1 84, was in Ordnung ist, weil wir unsere Ebenenmaske verwenden, um sie auf 180 Pixel hoch zu beschränken. Wir müssen es nur in Position bringen, und ich werde auch meine anderen Bilder in Position bringen. Okay, ich kann meine Auswahl jetzt mit meinem Rechteck-Auswahlwerkzeug erstellen. Und wir werden zu tun 75 mal 1 80 Stellen Sie sicher, dass Sie die richtige Ebene ausgewählt haben. Ich brauche mein zweites Bild und dann muss ich meine Ebenenmaske hinzufügen. Also gehen Sie weiter und tun Sie das auch für die anderen Bilder. Okay, alles sieht ziemlich gut aus. Jetzt gehen wir weiter und fügen unsere Inhalte für unsere Angebote hinzu. Also was? Ihr Text wieder an? Wir werden Eisenbahn regelmäßig verwenden und lassen Sie uns tun 18 für die Größe und sind dunkelgraue Farbe wieder. Und dann geben Sie einfach eine Straßenadresse, die Quadratmeterzahl und den Preis des Hauses aus. Es sieht so aus, als hätte ich alles zentriert. Also werde ich alle mit Commander-Steuerung und einem auswählen und dann in zwei Optionen werde ich die Begründung ändern, so dass sie links ausgerichtet ist. Ich möchte auch diesen Preis nehmen und ihn fett machen und ein wenig größer machen. Also werde ich 20 dafür tun. Und dann muss ich nur diesen Inhalt greifen und ihn in Position bringen. Jetzt kann ich diese Ebene dreimal duplizieren und jede Ebene in Position bringen. Ok. Ich werde jeden von ihnen rausziehen, damit ich sie alle nach oben ausrichten kann, um sicherzustellen, dass sie alle richtig ausgerichtet sind. Also, was das Lehman-Tool und Ihre Shift-Taste gedrückt gehalten? Wir gehen voran und klicken auf jede Ebene, ändern sie in den ersten Gegenstand, und eine Linie nach oben kann voran gehen und diese in Position bringen jetzt und dann organisieren sie , so dass sie alle in der richtigen Position nach ihrer Auflistung sind. Ich werde auch jede dieser Ebenen nehmen und sie dann entsprechend nach ihrer Position gruppieren . Also Atomgruppe Bild vier und dann werden wir jede dieser Schichten hineinlegen. Also lasst uns weitermachen und alle unsere Schichten auf die gleiche Weise organisieren. - Okay , also sind wir fast fertig mit unserer ersten Kategorie. Die Lektion, die wir tun müssen, ist, einen Seymour-Link unten hinzuzufügen. Also, woran sie noch mal schreiben? Wir werden es auf 18 Pixel skalieren. Ich werde Eisenbahn fett machen und dann für die Farbe, werden wir unsere blaue Farbe verwenden, die wir zuvor verwendet haben. Und dann werde ich nur Seymour tapout machen. Lasst uns weitermachen und das rausziehen. Wählen Sie alles aus, damit wir unser Ausrichtungswerkzeug verwenden können, um es an der Mitte auszurichten, und wir werden auch diese nach oben verschieben. Ich werde nur meine Pfeiltaste nach oben verwenden. Nur um das in Position zu bringen, sollte es gut sein. Und dann kann ich das unten in diesem Gruppenspieler setzen. Jetzt, da unsere erste Kategorie fertig ist, sind die nächsten drei Abschnitte wirklich einfach. Alles, was wir tun müssen, ist, diese Gruppenebene zu nehmen und sie dreimal zu duplizieren und dann unsere Bilder zu ersetzen und den Inhalt zu ändern, um alle Inhalte anders zu machen. Ich werde diese Gruppe zurückziehen, und dann kann ich die Bilder von diesem Gruppenspieler nehmen, um sie in diese zu setzen, und dann kann ich hineingehen und alle Bilder entsprechend ändern. Kanada, lösche diesen Gruppenspieler, da ich diesen nicht mehr brauche. Und dann muss ich nur reingehen und diese Bilder löschen und sie dann durch die neuen ersetzen . Also werde ich voran gehen und beenden diese Kategorie und die nächste, aber ich werde den Rest des Tutorials beschleunigen, weil Sie bereits wissen sollten, wie diese Bilder auf diese spezifische Größe anzuwenden. Also gehen Sie weiter und beenden Sie die nächsten drei Abschnitte und dann im nächsten Tutorial wird weitergehen und an dem nächsten Abschnitt unseres Design-Projekts arbeiten, das wird ein Blawg-Abschnitt sowie Platzierungen für einige Anzeigen hinzufügen. Also gehen Sie weiter, beenden Sie die nächsten drei Abschnitte und ich sehe Sie im nächsten Tutorial. 65. Blog: nach meiner ersten Beratung mit meinem Kunden und nach einigen Nachdenken und Recherchen zu ihrem jeweiligen Projekt. Bei der Überprüfung ihrer Konkurrenz kann ich entscheiden, dass sie von einem Blawg und vielleicht sogar von einigen Werbeflächen auf dieser Blawg sowie auf ihrer Homepage profitieren können. Dann werde ich sie nicht unbedingt kontaktieren und sie danach fragen, bevor ich es entwerfe, denn dieser spezielle Abschnitt hier dauert nicht so lange, um 10 15 20 Minuten zu machen nur um es zusammenzustellen. Und wenn ich dann das Designkonzept bereitstelle, das meinem Kunden überprüft werden kann, werde ich dann mit ihnen über diesen speziellen Abschnitt der Website sprechen und wie er ihnen zugute kommt und mehr Traffic zu ihrer Website antreibt und zusätzliche Einnahmen über die Werbefläche für diese bestimmte Firma. Und am Ende, wenn sie die Werbefläche nicht machen, aber sie sind sich einig, eine Blawg zu machen, als der zusätzliche Verkehr schließlich mehr Einkommen generieren wird , weil sie mehr Traffic auf ihre Website treiben. Dies sind also zusätzliche Dienste, auf denen Sie Ihre Kunden verkaufen können, indem Sie ihnen helfen, ein Blawg einzurichten und es zu beginnen, indem Sie jemanden dazu bringen, für sie zu schreiben, egal ob Sie es sind oder vielleicht Sie es auslagern. Oder vielleicht haben sie jemanden in der Firma, der das Schreiben für sie erledigen kann. Aber was Sie tun können, ist, dass Sie sie darüber erziehen können, wie Sie für Suchmaschinen schreiben. Also wieder, das ist ein weiterer Dienst, den Sie bieten können, ist die Suchmaschinenoptimierung, wenn Sie nicht der Autor sein werden, oder vielleicht zusätzlich zu, so können Sie sicherstellen, dass diese Artikel gehen, um für ihre spezifische Keywords, um den Traffic zurück zu ihrer Website zu trocknen. So gibt es mehrere Arten von Dienstleistungen, die wir in dieser speziellen Website entwerfen , die wir versuchen und Upsell unseren Kunden auf, nachdem sie sehen, sind Konzept entworfen und nicht unbedingt versuchen und verkaufen sie auf sie vor. Es ist immer einfacher, jemandem visuell Ihr Konzept zu zeigen und dann zu erklären, wie und warum dieser Teil der Website seinem Unternehmen helfen wird. Davon abgesehen, lassen Sie uns voran und stellen Sie diesen Teil der Website zusammen, Also für diesen Abschnitt, Sie müssen fünf verschiedene Bilder finden und sie zu Ihrem Projekt hinzufügen. Diese beiden Bilder auf der rechten Seite. Ich wählte gerade zufällig aus einer schnellen Online-Suche und dann für diese drei Bilder, Ich habe sie direkt von Picks heruntergeladen. Gehorche. Und wenn Sie genau die gleichen Bilder verwenden möchten, beachten Sie diese siebenstelligen Zahlen und suchen Sie dann einen Köder, um genau diese Bilder zu finden . Sobald Sie diese heruntergeladen und Ihrem Projekt hinzugefügt haben, erstellen wir diese Trennlinie, um diese beiden Abschnitte zu trennen. Lassen Sie uns also voran zoomen, schalten Sie Ihre Hilfslinien ein und greifen Sie Ihr Messwerkzeug und messen Sie 40 Pixel Platz aus. Das ist, wo wir unsere Trennwand platzieren. Aber bevor wir diese Trennlinie erstellen, lassen Sie uns weiter gehen und weitere 40 Pixel Abstand zwischen der Oberseite des nächsten Abschnitts und der Trennlinie erstellen . Okay, wir können unsere Trennwand mit unserem Rechteck erstellen, das mit dem Buchstaben M auswählbar ist, und wir werden 1200 Pixel breit machen, was die Größe unseres Rastersystems ist. Erstellen Sie einen neuen zuvor genannten Teiler, greifen Sie dann eine dunkelgraue Farbe und füllen Sie ihn mit Ihrem Eimerfilter aus. All diese wählen mit Kommandantenkontrolle und dem Buchstaben D, und ich denke, das ist ein wenig zu dick. Also werde ich voran gehen und die Ebenengrenze beschneiden, und dann kann ich mein Skalierungswerkzeug mit Shift Plus s greifen und ich werde drei für die Höhe tun . Stellen Sie sicher, dass es nicht verknüpfte Klickskala ist, und das sieht besser aus, aber es ist ein wenig zu intensiv, also werde ich die Deckkraft auf etwa 20 senken und das ist definitiv viel besser jetzt. Alles klar, lass uns weitermachen und unsere Guides einschalten und unseren ersten Titel hinzufügen. Also werde ich mein Textwerkzeug mit dem Buchstaben T greifen. Ich werde Eisenbahn ultra fett und 24 für die Größe und dann wieder dunkelgrau für die Textfarbe machen . Drücken Sie Ihre Escape-Taste, um aus dem Werkzeug zu bekommen. Dann greifen Sie Ihr Verschiebungswerkzeug, um es in Position zu bewegen. Also wollen wir es auf der linken Seite dieser Spalte und nicht auf der äußeren Kante hier halten. Okay, wir können jetzt anfangen, Kunstbilder neu zu dimensionieren und sie dort zu platzieren, wo sie hingehen müssen, also gehen wir zurück zu unserem Messwerkzeug, damit wir 40 Pixel Abstand zwischen dem Titel und dem ersten Bild platzieren können , können wir dann unser Bild greifen und es setzen in Position zu bringen. Also nochmal, für diesen, werde ich sicherstellen, dass das Bild auf der rechten Seite dieser dritten Spalte ist, weil wir es drei Spalten breit machen wollen. Und wenn ich zu weit nach rechts gehe, dann wird ein Teil seines Gesichts abgeschnitten werden. Also mit meinem Rechteck auswählbar, werde ich voran gehen und 275 Pixel breit und 180 Pixel hoch machen. Stellen Sie sicher, dass Sie Ihre Bildebene ausgewählt haben und erstellen Sie eine Ebenenmaske mit einer Auswahl , um sie auf diese Größe zuschneiden K d Wählen Sie mit Commander Control und dem Buchstaben D. Gehen wir weiter und machen Sie weitere 40 Pixel Abstand zwischen den Bildern, und dann gehen wir weiter und wiederholen das Gleiche für dieses Bild. Also zu 75 von 1 80 und dann eine Ebenenmaske que die gleiche Sache, die wir messen werden, bewegen Sie es und beschneiden. Okay, gehen Sie weiter und wählen Sie aus. Schnappen Sie sich Ihr Messwerkzeug, und wir machen das noch einmal für das nächste Bild. 40 Pixel von Space Commander Control und D zu de wählen. Und dann werden wir unsere Inhalte für jeden unserer Kreise erstellen. Ich werde mein Textwerkzeug schnappen. Ich werde die Schriftgröße auf 18 ändern und nur normale Eisenbahn Bold. Ich werde auch klicken und ziehen Sie ein Textfeld, das vier Spalten breit ist. Gehen Sie weiter und tippen Sie Ihren Titel aus. Vergewissern Sie sich, dass es nach links ausgerichtet ist. Ich werde dieses Textfeld kleiner machen, damit es am unteren Rand des Textes steht. Drücken Sie Ihr Escape-Key-Text-Tool erneut. Klicken Sie und ziehen Sie heraus, und ich möchte, dass der untere Teil des Textes nicht länger als der untere Rand dieses Bildes hier drüben ist. Dann schnappe ich mir einen Dummy-Text, den ich hier einfügen kann. Ich werde alles auswählen, weil es zu groß ist. Ich werde es 14 machen und Eisenbahn regelmäßig, nicht mutig. Und dann hier unten, werde ich tippen,mehr lesen, mehr lesen, dann können Sie es auswählen und die Farbe ändern, um einen Link darzustellen. Ich denke, ich möchte das auch mutig machen, um es hervorzuheben, nur ein bisschen mehr Ich werde voran gehen und diesen Inhalt in eine neue Lear-Gruppe namens Article One setzen. Dann werde ich es zweimal duplizieren und dann werde ich es einfach in Position bringen. Und jetzt, da unsere Artikel Luft gemacht, sind wir fast fertig. Also werden unsere Bilder hier rüber auf der rechten Seite gehen, und wir werden sie vier Spalten breit machen. Gehen wir weiter und verschieben Sie das erste Bild an den Anfang des ersten Bildes und an die rechte Seite der rechten Spalte. Ich werde das auch bewegen. Also, Aiken, zentriere es etwas besser über vier Säulen. Also genau da, und dann werde ich mein Rechteck-Auswahlwerkzeug greifen, damit ich das Bild an diese Position zuschneiden kann . Ich möchte auch und eine Richtlinie direkt hier am unteren Rand des ersten Bildes. Und dann werde ich mein Bild direkt in diesem Bereich hier platzieren, und ich werde es noch einmal schnappen und es nur ein bisschen nach oben bewegen, damit ich es etwas besser zentrieren kann . Und dann kann ich mein Rechteck-Auswahlwerkzeug verwenden, um meine Auswahl und dann und eine Ebenenmaske . Okay, das ist also die erste Anzeige. Wir werden dasselbe für die zweite Anzeige tun, und für diese hier werde ich sie bis zum Ende unseres letzten Artikels beschneiden, und dann werde ich sie einfach neu zusammenstellen, also ist es ein bisschen zentriert und wir können mehr sehen der Informationen. Okay, zurück zum Rechteck, wieder auswählbar, um unsere Auswahl zu treffen und dann fügen Sie Ihre Ebenenmaske die ausgewählte Kommandantensteuerung und das okay, lassen Sie uns das Raster ausschalten. Lassen Sie uns die GYNs jetzt ausschalten Der Abschnitt ist fertig, aber wir haben noch einen Schritt mehr, und das ist Zehe organisieren unsere Schichten. So haben wir hier viele Ebenen sowohl für unseren neuen Abschnitt als auch für unseren vorherigen Abschnitt, der unsere Listen war. Also lasst uns zuerst unsere Angebote organisieren, und dann machen wir den anderen Abschnitt. Ordnung, Unser Blog Abschnitt ist jetzt fertig, und wir sind bereit, unser Design zu beenden, indem wir unsere Fußzeile hinzufügen, und das werden wir in der nächsten Lektion tun. 66. Fußer: neben der Fußzeile, die ich bereits die Freiheit genommen habe zu entwerfen, weil es nicht viel gibt , was wir für diese spezielle Fußzeile tun müssen, weil es nicht viele Links gibt. Ich habe hier ein paar eingeschlossen. Ich habe Social-Media-Symbole hinzugefügt und die Höhe der Fußzeile 1400 x 150 Pixel hoch erstellt . Und in diesem Fall habe ich ein dunkleres Blau verwendet, um ein wenig Kontrast zum gesamten Abschnitt hier unten am Ende der Website hinzuzufügen . Und insgesamt entspricht es immer noch dem Gesamtdesign der Website, die sauber, modern, modern, professionell und es gibt wirklich nicht viel mehr schwächen tun für diese Fußzeile. Und wenn wir es getan haben, wenn wir etwas kreativeres getan haben, ist es vielleicht nicht mit dem Rest der Website zusammenhängend. Also in diesem Fall und in den meisten Fällen bin ich OK mit einer einfachen, langweiligen modernen professionellen Fußzeile, weil ich lieber den Rest des Inhalts abheben würde und nicht so sehr die Fußzeile. Ja, die Fußzeile ist einsam und bekommt sehr wenig Liebe am unteren Rand der Seite, aber der Zweck der Fußzeile ist auf Lee, um den Zuschauern zu ermöglichen, leicht auf andere Teile der Website zuzugreifen , die wir hier mit unseren Medien Links und zwei Links zu anderen Seiten, die notwendigerweise in der primären oder sekundären Navigation verfügbar sind, wie in der Lage, mit diesem speziellen Unternehmen werben. Wenn Sie das Unternehmen davon überzeugen würden, Werbeflächen zu verkaufen, möchten Sie einen Link zu dieser bestimmten Seite haben. Wir benötigen auch Rechts- und Datenschutzseiten, insbesondere wenn das Unternehmen plant, Werbung auf Google oder Facebook oder anderen Arten von Plattformen zu machen. Diese Social-Media-Plattformen erfordern Datenschutz- und gesetzliche Richtlinien und manchmal Cookie-Richtlinien , die den Zuschauern zum Lesen zur Verfügung stehen. Sie wissen also, welche Art von Informationen beim Betrachten der Website gesammelt werden und wofür sie verwendet wird. Das ist deine typische Fußzeile. Wir könnten etwas kreativeres tun, aber wieder, es wird wahrscheinlich nicht mit dem Rest der Websites übereinstimmen. Bevor Sie also zum letzten Tutorial für dieses Projekt übergehen, gehen Sie weiter und beenden Sie hier. Fußzeile. Machen Sie es voll mit der dunkelblauen Farbe Ende Ihre Social-Media-Icons und Ihre zusätzlichen Links hier unten als auch. Und dann gehen wir weiter und machen unsere letzten Verbesserungen im nächsten Tutorial 67. Optimieren: Hallo und willkommen zurück jetzt, wie ich bereits in anderen Projekten erwähnt habe. Sobald ich ein Design abgeschlossen habe, geht es nicht sofort an den Kunden. Ich möchte das Design optimieren und sehen, ob ich irgendetwas tun kann, um es besser zu machen. Oder vielleicht kann ich einige Elemente finden, die nicht richtig ausgerichtet sind, die behoben werden sollten, bevor ich zum Client gehe. Aber eine andere Sache, die ich neben der Optimierung des Designs mache, ist, dass ich mich vom Projekt wegziehe und , wenn möglich, versuche ich, bis zu 24 Stunden davon zu gehen. Nun, wenn ich an einem engen Deadline bin und ich das früher als später an den Kunden bringen muss, möchte ich mir wenigstens ein paar Stunden von diesem speziellen Projekt entfernt geben, weil ich vielleicht an diesem Projekt gearbeitet habe Stunde, zwei Stunden, drei Stunden, was auch immer der Fall sein mag. Und dann finde ich, wenn ich vom Projekt weggehe und zurückkomme, es gibt mir einen neuen Blick auf das Design, und es ist einfacher, Dinge zu sehen, die ich verpasst habe, während ich entwarf, zum Beispiel Abstände und Ausrichten verschiedener Elemente, oder vielleicht könnte es etwas Einfaches sein, wie das Vergessen der Zehe. Fügen Sie einen Hover-Zustand wie hier unten in diesem Abschnitt hinzu. Ich habe vergessen, einen Hover-Zustand für diesen bestimmten Link hinzuzufügen. Jetzt werden sie gesagt. Die andere Sache, die ich entscheiden muss, ist, was passieren wird, wenn ein Benutzer oder Besucher auf diesen Link klickt. Geht es zu einer anderen Seite und öffnet eine weitere Seite mit all diesen Informationen? Oder ist etwas anderes passiert, wenn ich auf diesen Link klicke Jetzt werde ich Ihnen zeigen, was passieren wird, wenn Sie auf diesen Link in einem Moment klicken . Aber zuerst gehe ich für eine Minute zurück in die Heldenabteilung. Insgesamt bin ich mit dem Header und dem Heldenbereich zufrieden, aber ich denke, wir können diesen Filterbereich jetzt viel benutzerfreundlicher machen. Ich denke, dieser Filterknopf ist zu groß. Es sieht unausgewogen aus. Ich brauche wirklich keine Schaltfläche, die so groß ist, um diese verschiedenen Optionen zu filtern. Was können wir tun, um es besser zu machen? Nun, ich denke, wenn wir diese Schaltfläche kleiner machen und anstatt drei Spaltenraster zu verwenden, können wir zwei oder sogar eine Spalte für diesen Filterknopf verwenden. Und dann können wir in den anderen beiden Spalten zusätzliche Filteroptionen hinzufügen, damit der Betrachter seine Auswahl noch mehr auf der Grundlage dieser anderen Optionen einschränken kann. Aber die andere Sache, die hier wirklich fehlt, ist ein Hover-Zustand, denn was wird passieren, wenn sie über diese Optionen schweben? Werden sie erlaubt sein, ihr Budget in ihrer Stadt und in diesen anderen Optionen manuell einzugeben ? Oder möchten Sie ihnen vorgefertigte Optionen zur Verfügung stellen? Verfügbar jede Dropdown-Liste, so dass Sie vier oder fünf verschiedene Budgetoptionen haben können, und Sie können auch ein Dutzend oder mehr verschiedene Arten von Standorten. Dasselbe mit deinen anderen Optionen. Hier können Sie drei oder vier verschiedene Optionen für Schlafzimmer und Bäder haben, und dann haben Sie die Möglichkeit, hier zusätzliche Filteroptionen hinzuzufügen. Lassen Sie mich Ihnen das Design zeigen, das ich entwickelt habe, um unseren genannten Aktionsfilter zu verbessern. Das ist also das Original, und das ist das neue Design. Also habe ich den Filterknopf kleiner gemacht und zwei weitere Optionen hinzugefügt. Aber obwohl ich den Filterknopf 22 Gittersäulen beibehalten habe. Ich nahm die Stadt und machte sie auch kleiner. Bevor es vier Spalten breit war, und ich habe es stattdessen drei Spalten weiß gemacht, so dass ich diese zusätzliche Filteroption hinzufügen konnte. Wir könnten das Gleiche mit dem Budget machen. Wir können das zwei Spalten breit machen und dann eine weitere Option hinzufügen. Es hängt alles von den potenziellen Kunden ab und was Sie tun können, um es ihnen leichter zu machen, das zu finden, was sie wollen. Und dann, natürlich, ich habe diesen Hover-Zustand hier, der zeigt, dass, wenn Sie darauf klicken, etwas passieren wird. Also, was wird passieren? Wird es Ihnen eine Option geben, aus anderen Orten auszuwählen? Oder Sie erlauben es ihnen, es automatisch einzugeben? Oder wird es eine andere Seite gehen? Was genau wird passieren? Nun, um es unseren Perspektiven zu erleichtern, möchte ich sie auf der gleichen Seite im selben Abschnitt behalten. Also, was ich erstellt habe, war ein Dropdown, um zusätzliche Städte zu zeigen, aus denen man wählen kann. Dies zeigt also unserem Kunden und dem Webentwickler, was passiert, wenn Sie auf diesen Bereich klicken. Und wenn es mehr als vier oder fünf Optionen gibt, müssen Sie entweder diesen Teil des Drop-Downs zeigen, entweder nach unten kommen und vertuschen mehr diese Seite hier unten oder Sie werden eine Schriftrolle auf der rechten Zehe erstellen . Lassen Sie den Entwickler wissen, dass diese Person dann innerhalb dieses Menühintergrunds scrollen kann, anstatt den Browser nach unten scrollen zu müssen, was es wiederum erleichtert für den Interessenten. Nun ist die Frage, was ist mit diesen anderen Optionen? Nun, die Schlafzimmer und das Bad. Sie könnten das wahrscheinlich verlassen, wie es ist und nur dem Besucher erlaubt, seine Antwort für diese einzugeben. Aber was ist mit Haustierfreundlich? Möchten Sie, dass sie das eingeben, oder möchten Sie ihnen eine Option geben? Ja oder nein? Wenn Sie es auf diese Weise tun, müssen Sie ein Dropdown-Menü für diese Option erstellen. Dasselbe mit Pool, ja oder nein? Und dann für das Budget. Wahrscheinlich möchten Sie auch für diesen Teil des Filters ein Dropdown-Menü erstellen, da Sie nicht möchten, dass sie den To-Type in einer bestimmten Zahl enthalten sind. Vielleicht hat Ihr Kunde vier oder fünf Budgetbereiche, von denen er normalerweise mieten kann. In diesem Fall würden Sie also auch einen anderen Hover-Zustand oder ein anderes Dropdown-Menü für diesen Teil des Filters erstellen . Und Sie müssen all dies als Teil Ihres Designs tun, bevor Sie es den Web-Entwicklern geben , damit sie wissen, wie man jeden dieser verschiedenen Abschnitte richtig codiert. Was können wir noch tun, um dieses Webdesign noch besser zu machen? Nun, wenn wir nach unten zum Listing Abschnitt scrollen, können Sie sehen, dass der Abstand zwischen den Titeln, um mehr zu sehen, und die Bild-Hintergründe sind alle unterschiedlich. Ich habe mich nicht die Zeit genommen, um alle verschiedenen Elemente richtig voneinander zu platzieren, und ich habe es einfach zufällig und von I. Und es sieht jetzt auf professionell aus, obwohl einige Leute vielleicht nicht bemerken, dass Sie es immer noch bemerken wollen selbst, bevor Sie es dem Client und dem Webentwickler geben. Denn all diese kleinen Details, an denen Sie arbeiten, wird Ihr Website-Design besser machen als andere Web-Designer, die sich nicht die Zeit nehmen, alles Pixel perfekt auszurichten . Und Sie könnten einen Webentwickler bekommen, der dies genau basierend auf den Pixeln codiert , die Sie in Ihrem Design festgelegt haben, weil sie denken, dass Sie das wollen. So könnten Sie mit einer Live-Website enden, die unprofessionell aussieht, weil es keine Symmetrie zwischen den Abständen aller verschiedenen Elemente gibt. Nun eine andere Sache, die wir tun können, um diese Liste Abschnitt besser für den Benutzer zu machen, ist, einen Hover-Zustand zu erstellen , dass, wenn Sie darauf geklickt wird, es wird mehr Informationen für das, was sie zu finden versuchen. Also denken Sie daran, ich erwähnte, dass wir einen Hover-Zustand für unsere Seymour-Links haben sollten. Also, wenn ich es anschalte, haben wir jetzt unseren Hover-Zustand. Aber noch einmal, was wird passieren, ist unser Besucher, dass unsere Aussicht auf eine andere Seite weitergeleitet wird, um ihnen mehr von den Angeboten zu zeigen? Oder, besser noch, was wir tun können, ist, sie auf der Startseite zu behalten und diese zusätzlichen Angebote unter dieser Zeile von Inhalten zu laden . Jetzt denken Sie vielleicht, Was ist der Unterschied zwischen dem Gehen zu einer neuen Seite mit den Informationen im Vergleich zu haben, dass diese Informationen auf der Startseite angezeigt werden? Nun, wenn sie diese bestimmte Webseite auf einem mobilen Gerät anzeigen. Die Chancen stehen, dass ihre Internetgeschwindigkeit nicht so schnell sein wird wie, sagen wir, auf einem Desktop oder einem Laptop. Wenn Sie also zu einer anderen Seite navigieren, müssen viele Informationen, die bereits auf dieser Seite sind, wie die Kopfzeile und eine Fußzeile und einige andere Dinge auf dieser neuen Seite neu geladen werden. Außerdem müssen alle zusätzlichen Angebote auch auf dieser neuen Seite geladen werden. Das Laden dauert also viel länger, als sie auf der Homepage erscheinen zu lassen. Da Sie die Website so codieren lassen können, dass diese Bilder, auch wenn Sie sie nicht sehen können, werden sie im Hintergrund geladen, so dass, wenn sie auf diesen Link klicken, werden diese Angebote sofort angezeigt anstatt warten 5 10 20 Sekunden , damit sie auf eine neue Seite geladen werden können. Denn je größer diese Bilder und je mehr Auflistungen es gibt, desto länger wird es die Ladung nehmen. Und je länger es die Last braucht, desto höher ist die Chance, dass die Person diese Website verlassen und versuchen wird, von jemand anderem zu finden, wonach sie suchen. Am Ende wollen wir es den Interessenten so einfach wie möglich machen, das zu finden, was sie wollen. Und indem es so macht, hilft es, sie auf dieser Seite zu halten, denn wenn sie 20 Sekunden oder 10 Sekunden warten müssen oder was auch immer es ist, werden sie wahrscheinlich die Website verlassen und zu einer anderen Seite gehen, um zu finden, was sie brauchen. Sie haben nicht die Geduld, auf diese Information zu warten, die Ladung. Indem wir es auf diese Weise tun, erhöhen wir die Wahrscheinlichkeit, dass sie auf der Seite bleiben und Geschäfte mit unserem Kunden machen werden, was Teil unseres Ziels als Webdesigner ist es, unseren Kunden zu helfen, mehr Geschäft zu verdienen durch besseres Design. Wie würde das aussehen? Wie würden Sie das als Designer einrichten, um es Ihren Kunden zu zeigen? Und so weiß der Webentwickler, wie man es codiert. Nun, genau wie wir es im Heldenbereich getan haben. Wir müssen all diesen Inhalt und eine andere Gruppen-Ebene erstellen, um jedem zu zeigen, was passieren wird, wenn Sie auf diesen Link klicken, der zwei weitere Zeilen von Listen für diese Kategorie hinzufügen wird, und alle anderen Kategorien werden dann nach unten geschoben. Dies ist also der Hover-Zustand, und das passiert, wenn Sie auf diesen Link klicken. Nun ist die andere Sache, die wir tun können, um die Website noch besser zu machen, die Lesbarkeit der Listing-Inhalte zu verbessern . Also gerade jetzt verwenden wir eine Schriftart. Sie haben alle die gleiche Größe, und es ist irgendwie überfüllt und beschäftigt, also macht es ein wenig schwieriger zu lesen. Was können wir also tun, um die Lesbarkeit unserer Inhalte zu erhöhen? Nun, ich denke, wir können verschiedene Schriftarten, verschiedene Größenverwenden verschiedene Größen und vielleicht auch das Layout dieses Inhalts ändern, um bestimmte Elemente oder bestimmten Text im Vergleich zu anderen hervorzuheben, so dass es leichter zu lesen. Das war also die erste Option, die wir uns ausgedacht haben. Aber das ist, was ich als zweite Option entwickelt habe, um es einfacher zu machen, diese Inhalte zu lesen . Also änderte ich die Schriftart der Straße, und ich änderte auch die Größe von 22 16 und ich machte es auch fett, und ich benutzte den Schriftpfeil gegen Eisenbahn. Die andere Sache, die ich tat, war, dass ich das Quadratmaterial nahm und es 14 für die Größe gegen 20 hier drüben gemacht habe . Und dann nahm ich den Preis und zog ihn nach rechts unten, und ich entfernte auch das kühne Styling, und ich reduzierte die Deckkraft der Schicht von 100 auf 75, um den Preis zu betonen. So wird jetzt die Straße mehr als alles andere betont, basierend auf dem Styling und dem Funt. Das macht es also viel einfacher, dies zu lesen, als es dies tut, weil es weniger überfüllt ist und unsere Augen auf den Straßennamen zuerst gegenüber hier auf der rechten Seite gravitieren. Unsere Augen sind sich nicht ganz sicher, was sie zuerst betrachten sollen, obwohl wir den Text für den Preis fett gemacht haben, ist es immer noch viel geschäftiger als dieser Inhalt hier drüben. Es ist also immer eine gute Idee, sich für ein paar Stunden von Ihrem Design zu entfernen oder wenn möglich, und dann, wenn Sie zurückkommen, überdenken Wie kann ich dieses Design noch benutzerfreundlicher machen? Und dann werden all diese kleinen Dinge, die Sie tun, um das Design zu verbessern, es viel besser machen . Ihre nächste Aufgabe besteht also aus zwei Dingen. Man geht durch und macht all diese winzigen Anpassungen an das Design, um es besser sicherzustellen, dass alles richtig ausgerichtet ist und stellen Sie sicher, dass Sie einen angemessenen Abstand zwischen allen Elementen haben und stellen Sie sicher, dass Sie nichts ausgelassen haben. Wir müssen auch beschneiden sind Leinwand, um all diesen Inhalt hier unten loszuwerden. Und das andere, was Sie tun müssen, ist, dass Sie durch alle verschiedenen Hover-Zustände , die wir in diesem Vortrag behandelt haben, gehen und sie auf eigene Faust erstellen müssen . An diesem Punkt des Kurses sollten Sie wissen, wie Sie alle verschiedenen Formen erstellen, die Größe ändern und alle anderen Elemente gruppieren und wie Sie Ihre Leinwand zuschneiden. Daher ermutige ich Sie, sich die Zeit zu nehmen, um diese Aufgabe zu erledigen, und dies wird dazu beitragen, das, was Sie zuvor gelernt haben, zu verstärken, indem Sie es selbst tun. Wenn Sie stecken bleiben, gehen Sie einfach zurück zu früheren Vorträgen, um eine Auffrischung zu erhalten, wie Sie bestimmte Dinge tun können. Und indem Sie dies alleine machen, lernen Sie in Zukunft genau, wie Sie es für Ihre eigenen Projekte machen. In der Tat haben Sie tatsächlich 1/3 Zuweisung, und das ist, diese Website mit Ihrer eigenen kreativen Vision zu wiederholen, so dass Sie es für Ihr Portfolio verwenden können . Danke fürs Zuhören und einen tollen Tag 68. Projekt 5: Watkins Glen Briefing: Hallo und herzlich willkommen bei Webdesign Projekt Nummer fünf für diese Website. Wir werden diese Webseite aus dem Bundesstaat New York neu gestalten, und vor allem diese ist für Watkins Glen State Park. Wie so viele der anderen Websites, die wir neu gestaltet haben , ist auch diese , ist auch veraltet. Und obwohl es viele Informationen hat, ist es irgendwie schwer zu navigieren und zu versuchen, genau das zu finden, was wir wollen. Ja, wir haben hier einige Schaltflächen, um uns die Informationen zu geben, aber ich denke, dass das Gesamtlayout schlecht gestaltet ist. Es ist schwer zu lesen, da die Schriftauswahl und das Styling viel besser gemacht werden könnten , als es derzeit ist. Die andere Sache, die ich über diese Website finde, zumindest für diese bestimmte Website, ist, obwohl sie genau die Dinge beschreiben, die Sie in diesem Park sehen können. Es gibt eine Menge Text, der diese Informationen beschreibt, und ich denke, es wäre besser, ein Bild von all den verschiedenen Dingen zu zeigen, die Sie in Watkins Glen tun können gegen Lesen Was Sie tun können. Es gibt ein altes Sprichwort, dass ein Bild 1000 Worte wert ist, und ich würde denken, dass ein Bild besser beschreiben würde, was Sie sehen werden,weil , Sie tatsächlich einen Teil dessen sehen werden, was Sie im Park oder in Watkins Glen tun können Allgemeinen die Stadt oder die Stadt Watkins Glen. Ja, sie haben ein paar Bilder, aber dieses Bild hier ist nicht repräsentativ für diesen Park. Es ist ein schlechtes Bild. Es sieht verzerrt aus. Es sieht so aus, als ob es von oben nach unten gequetscht wurde. Die Beleuchtung ist nicht sehr gut, und insgesamt finde ich dieses Bild einfach nicht sehr einladend. Ich würde lieber ein professionelles Foto sehen und nicht etwas, das aussah, als wäre es von einem Touristen aufgenommen worden. Dieses Bild hier ist besser, aber es ist so winzig. Es ist wirklich schwer herauszufinden, was es ist. Und wenn Sie auf einem mobilen Gerät sind, wird das noch kleiner sein, es sei denn, es ist codiert, um größer zu sein. Aber es scheint, als wäre ihr gesamtes Webdesign mehr textbasiert im Vergleich zu bildbasierten. Also lassen Sie mich Ihnen zeigen, was ich für das Design von Watkins Glen State Park entwickelt habe, und es ist im Grunde ein fotointensiveres Web-Design im Vergleich zu textbasierten. Also beginne ich den Heldenbereich mit einem großen Bild des State Parks selbst. Wenn Sie den Park betreten, ist dies eines der ersten Dinge, auf die Sie stoßen. Wir haben einen kleinen Wasserfall, eine Steinbrücke, und es sieht sehr einladend aus. Wir haben einen großen Action-Button hier oben, um Watkins Glen zu entdecken , der zu einem anderen Teil der Website navigiert, um Ihnen die Dinge zu zeigen, die Sie in diesem Park begleiten. Ich habe auch alle Menüelemente innerhalb eines ausgeblendeten Menüs konsolidiert, um all diese Informationen zu konsolidieren und die Website zu bereinigen. Wenn Sie nach unten scrollen, werden Sie mit professionellen Bildern präsentiert, die all die Dinge zeigen, die Sie bei Watkins Glen tun können . Anstatt jedes dieser Elemente zu beschreiben, können wir tatsächlich die Dinge sehen, die wir tun können. Und wir könnten Mawr motiviert sein, den Park zu besuchen, basierend auf diesen Bildern vs Lesen. Ja, ich habe diese Informationen auch hier aufgenommen, um jede dieser Dinge zu beschreiben , die Sie tun können. Aber jedes dieser Bilder wird auch auf eine andere Webseite verlinken, die detaillierter über das, was Sie tun können, sowie eine Fotogalerie von jedem dieser Bilder. Das wäre also Teil meines Gesprächs, das ich mit dem Kunden zum Zeitpunkt der Enthüllung des anfänglichen Entwurfskonzepts habe. Ich werde nicht jede dieser Seiten einzeln gestalten, wenn der Kunde diese bestimmte Art von Designkonzept nicht billigt, sie alle auf verschiedenen Seiten haben, obwohl sie bereits alle diese Seiten haben. Ich möchte immer noch ihre Bestätigung erhalten, dass sie dieses Design-Konzept mögen, denn ich werde jede dieser einzelnen Seiten entsprechen, um diese Hauptseite als auch entsprechen , die Zehe große Bilder haben, die Philip den Browser von Rand an die Kante. dann Wenn Siedannnach unten scrollen, gibt es eine Liste mit vielen Informationen, die Sie möglicherweise über das Teil wissen müssen. Zum Beispiel Betriebsstunden. Ich habe hier einen Hover-Zustand, so dass, wenn Sie auf die Schaltfläche klicken, ein kleines Fenster mit diesen Informationen darin erscheint, und ich habe auch zwei Optionen hinzugefügt, um dieses Fenster zu schließen. So einfachen Zugriff auf alle Informationen, die Sie brauchen, genau hier. Es fehlt tatsächlich eine. Es sieht so aus, als ob wir hier gehen. Und dann haben wir auch eine einfache Möglichkeit, einen Campingplatz zu buchen. Es gibt Orte, an denen Sie im Park campen können, und Sie können schnell und einfach einen Campingplatz über diese Option hier buchen. Wenn Sie mit dem Park nicht vertraut sind, können Sie auf diesen Link klicken, um eine Karte des Campingplatzes zu erhalten, und es wird zu einer anderen Seite navigieren, um Ihnen weitere Informationen zu geben. Aber auch hier wollen wir es für Camper so einfach wie möglich machen, ihren Aufenthalt zu buchen, vor allem, wenn Sie bereits hier gecampt haben und Sie wissen, was Sie tun. Sie können dies direkt hier von diesem Teil der Webseite aus tun, ohne zu anderen Teilen der Website navigieren zu müssen. Und dann unten, haben wir eine aufgeräumte, aktualisierte Fußzeile mit all ihren Inhalten, die auf alle verschiedenen Seiten verlinkt sind. Alles ist jetzt gleichmäßig verteilt, obwohl es Fußzeile jetzt nicht so schlecht ist? Ich habe es gerade ein wenig mit neuen Schriftarten und verschiedenen Farben aktualisiert, um es einfacher zu lesen. Dies wird also ein ziemlich einfaches Webdesign zu erstellen sein. Aber wie vorher. Ich werde einige zusätzliche Pro-Tipps auf dem Weg teilen, während wir diese Website entworfen haben. Wenn Sie also bereit sind, mit diesem Projekt zu beginnen, lassen Sie es uns tun. 69. Kopf-+ Hero: hallo und willkommen zurück sind in diesen USA, und wir werden sowohl den Header als auch den Heldenbereich entwerfen. Also gehen Sie weiter, greifen Sie Ihre Rastervorlage, damit Sie von vorne beginnen können. Und wir müssen auch zu Bilddateien zu unserem Dokument hinzufügen, die beide dieser Lektion angehängt sind. Die 1. 1 ist also unser New Yorker Staatslogo. Also gehen Sie weiter, packen Sie das und bringen Sie es in das Dokument und bewegen Sie dann einfach das Logo nach oben links und greifen Sie dann das Heldenbild und bringen Sie es auch. Dieses Bild ist also eine Datei mit niedriger Auflösung, und wir müssen es vergrößern, um es mit von links nach rechts oder voller Beschnittzugabe voll zu machen. Und wenn wir das tun, wird es verpixelt oder verschwommen. Was in Ordnung ist, denn das ist nur für die Praxis und nicht für unser Portfolio. Lassen Sie uns voran gehen und wieder skalieren dieses Bild mit Shift Plus s und lässt tippen in 1400 für die mit , und dann wird die Höhe 9 38 ein Lied. Hat er es verschlossen? Gehen Sie voran und skalieren Sie es, und verschieben Sie es dann einfach in die linke und rechte Seite des Dokuments . Wir werden zuschneiden und dieses Bild in einer Minute zusammenstellen, sobald wir zum Heldenbereich gekommen sind, aber wir werden zuerst die Kopfzeile beenden. Okay, lassen Sie uns voran und erstellen Sie eine neue Ebene namens Header-Hintergrundklick. Ok. Und dann für die Breite, Ich wollte voll Beschnitt als auch links sein, Rechts, Also lassen Sie uns voran und erstellen Sie eine Auswahl mit unserem Rechteck-Auswahlwerkzeug. Es ist in Ordnung, wenn es darüber hinausgeht, weil es diese Auswahl auf die Grenzen des Dokuments beschränkt . Also die mit ich mache mir keine Sorgen um eine enge. Ich möchte 100 sein und dann für die Farbe möchte ich diese cremefarbene Farbe verwenden, die diese Hexi-Dezimalzahl hier ist. Also gehen Sie voran und geben Sie das in, und dann gehen Sie weiter und greifen Sie Ihren Eimer Filter wird mit dem Buchstaben G und füllen Sie es aus. Und vergessen Sie nicht, mit Commander Control und dem Buchstaben D zu wählen. Alles klar, gehen wir weiter und beschneiden die Ebenengrenze. Wechseln Sie nun zur Ebene, beschneiden Sie den Inhalt und verschieben Sie ihn dann einfach nach oben. Okay, ich gehe weiter und schiebe das unter beide Bilder runter. Lasst uns weitermachen und unser Logo ausrichten. Lassen Sie uns voran gehen und messen Sie 30 Pixel Abstand zwischen dem linken Rand und der linken Seite des Logos. Okay, lass uns weitermachen und unser Logo neu positionieren. In Ordnung. Als Nächstes richten Sie es an den oberen und unteren Rand unseres Hintergrunds aus. also mit meinem Ausrichtungstool Gehen Siealso mit meinem Ausrichtungstoolvor und klicken Sie zuerst auf meinen Kopfzeilenhintergrund und dann die Umschalttaste. Klicken Sie auf das Logo und dann auf eine liegende Mitte des Ziels. Lassen Sie uns nun an der Navigation arbeiten. Ich füge nur ein Hamburger-Symbol hinzu, das die Navigation darstellt. Zuerst müssen wir einen neuen Hintergrund erstellen, der Hamburger Hintergrund genannt wird. Und wir werden eine Auswahl von 100 mal 100 treffen. Und dann für die Farbe, werde ich diese dunkelgrünen Farben verwenden, um voran zu gehen und geben Sie diese Zahl ein. Und dann füllen wir es aus, stellen Sie sicher, dass Sie unter Kontrolle und D kommen und dann werde ich es einfach hier nach oben schieben , richtig? Okay, ich werde mir mein Hamburger-Symbol schnappen, das wir im letzten Projekt erstellt haben, also brauche ich nur das Schwebe-Symbol und das Hamburger-Symbol, also werde ich die beiden schnappen und sie in dieses Dokument bringen. Okay, lasst uns das jetzt aufstellen. Die Hamburger-Symbol ist ein wenig klein, also möchte ich nur das größer machen und nicht den Schweben, den ich selbst liebe. Also werde ich nur meine Hamburger-Symbol als Shift Plus s und ich werde es vergrößern. Also genau da, 50 für die mit 53 für die Höhe. Und dann werde ich einfach weitermachen und es hier in Position bringen. Eigentlich lassen Sie uns voran gehen und das Symbol direkt in der Mitte des Hamburger-Hintergrunds vereinen. Stellen Sie sicher, dass Sie Hamburger-Hintergrunde-Layer ausgewählt haben und auf Inhalte für die Layerbegrenzung zuschneiden . Ich werde weitermachen und das Hamburger-Symbol herausziehen, damit ich voran gehen und beide mit meinem Ausrichtungswerkzeug greifen kann und dann Mitte und Mitte des Ziels ausrichten kann. Setzen wir das Hamburger-Symbol wieder rein. Ich werde das Schwebe-Symbol nur ein bisschen nach rechts schieben. So genau da drüben. Gehen wir weiter und verkleinern. Lassen Sie uns unsere Führungen und unser Raster ausschalten, damit wir einen Blick auf den Header-Abschnitt werfen können, so dass der Header-Abschnitt fertig ist. Ich werde nur meine Ebenen hier aufräumen und eine neue Gruppenebene namens Header erstellen . Alles klar, gehen wir weiter und greifen unser Heldenbild und bewegen es bis zum Ende des Kopfzeilenabschnitts. Vergrößern Sie einfach und stellen Sie sicher, dass es Pixel perfekt ist. Sieht so aus, als müsste ich es nur noch ein paar Pixel nach oben verschieben, damit genau dort gut aussieht. Also haben wir noch ein paar Dinge übrig, und das ist Überschrift unseres Titels und rufen Sie die Action-Taste für den Heldenbereich. Wenn es also um die Schriftfamilien geht, die ich für ein Webdesign-Projekt wähle, mache ich es normalerweise vor dem Entwerfen. Und ich werde meine Schriftarten basierend auf einem von zwei Dingen wählen, entweder populäre Schriftarten zu der Zeit, dass ich die Website entwerfe. So zum Beispiel haben wir zum Beispieldie Eisenbahn in diesen Projekten sehr viel genutzt und ist zu dieser Zeit in der Zukunft beliebt . Es ist vielleicht nicht so beliebt, also werde ich es wahrscheinlich nicht so viel Krieg verwenden. Je nach Firma werde ich eine Schriftfamilie aus ihrem Branding verwenden. Also, wenn wir Watkins Glen austippen und das in Eisenbahn umstellen. Sie verwenden ultra fett. Es ist ein netter Fonds, aber es passt nicht wirklich zum Branding ihrer Firma. Stattdessen würde ich eine Schriftart wie Pfeil verwenden, die besser zu ihrem Branding passt. Und das sehen wir im Buchstaben W hier. Es ist dem W in ihrem Logo sehr ähnlich. Also werde ich entweder die exakt gleiche Front verwenden, die sie in ihrem Logo oder jeder anderen Art von Branding verwendet haben , oder ich werde eine Schriftart verwenden. Ähnlich. Jetzt stimmen die Kleinbuchstaben nicht wirklich überein. Aber wenn wir das in allen Hauptstädten tun, würden sie besser zu ihrem Branding passen. Deshalb würde ich eine Schriftart wie Pfeil für dieses spezielle Design wählen. Also werde ich voran gehen und das in die Mitte stellen und alles auswählen. Und dann kann ich mit meinem Ausrichtungswerkzeug voran gehen und es an dieser Auswahl ausrichten. Also geh weiter und tu das. Die Auswahl Kommen Sie in unsere Kontrolle und den Buchstaben D, und wir werden voran gehen und unsere erstellen, aber jetzt nennen wir es C T A Taste und C T A ist die Abkürzung für die Aktion genannt. Lassen Sie uns unser Rechteck-Auswahlwerkzeug greifen, und wir werden einige abgerundete Ecken hinzufügen. Lassen Sie uns 15 für den Radius tun und dann, soweit die Größe, die wir auf 35 mal 75 machen werden, dann werden wir es mit der gleichen dunkelgrünen Farbe füllen, die wir hier oben verwendet haben. Gehen Sie voran und füllen Sie Ihre Schaltfläche und de Auswahl, und dann möchte ich die Schaltfläche auf den rechten Rand unseres Titels ausrichten. Gehen wir also weiter und beschneiden die Ebenengrenze, und verschieben Sie sie dann einfach in Position. Okay, gehen wir weiter und schnappen uns unser Textil. Ich werde es in Railway ändern, aber ich möchte einen Kursivstil wählen. Lassen Sie uns voran und ändern Sie es zurück zu weiß und dann tippen Sie einfach aus entdecken und dann für die Größe. Gehen wir weiter und bringen das auf 48 runter. Alles klar, lassen Sie uns voran und die Linie es in unserem, aber neuen Okay, wir sind fast fertig. Das letzte, was ich tun möchte, ist, dass ich das Bild ein wenig neu zusammenstellen möchte, indem ich es nach oben schiebe. Also, was soll der Umzug? Ich werde das Bild schnappen und es nach oben bewegen. Ich will nicht nach oben gehen, weil ich Button nicht entdecken möchte, um hier unten in dieser Gegend zu sein . Ich möchte, dass es in diesem Teil des Bildes dort bleibt, wo es derzeit dunkel ist. Also werde ich gleich dorthin gehen, und Sie werden auch bemerken, dass die alte Diebstahllinie für diesen Heldenbereich ungefähr 700 bis 800 liegt . Aber das eigentliche Bild geht unter diese Faltlinie, und das ist in Ordnung für diese bestimmte Website, denn wenn sie auf die Schaltfläche Entdecken klicken, wird es automatisch nach unten zum nächsten Abschnitt scrollen. Also mache ich mir keine Sorgen darüber, dass das Bild über oder vorbei an diesem Heldenbereich blutet. Okay, gehen wir weiter und nehmen unsere Ebenen neu und gruppieren sie in neue frühere Gruppen. Lassen Sie uns voran und tun Sie unsere Taste zuerst C T eine Taste und dann eine neue Ebenengruppe für den Heldenbereich, und das war's. Unsere Header und Helden-Sektion sind Nagel fertig 70. Körper, Teil 1: Wenn ein Besucher dieser Website auf unsere aufgerufene Aktion klickt, die unseren Entdeckungs-Button ist, wird die Website automatisch zum nächsten Abschnitt navigieren, was die Dinge zu tun sind. Das ist also etwas, was wir unserem Klienten erklären müssen. Wenn wir das eigentliche Designkonzept präsentieren, wird dies nicht zu einer anderen Seite navigieren. Stattdessen wird es automatisch zum nächsten Abschnitt scrollen. Und sobald wir genehmigt haben, müssen wir auch den Entwickler dies wissen lassen, damit sie nicht denken, dass dies auf eine andere Seite geht oder dass es ein Pop-up gibt. Stattdessen müssen sie es codieren, um nach unten zu scrollen, und dann, wenn der Besucher darauf klickt und es nach unten zu diesem Teil scrollen, werden sie mit all den Dingen präsentiert, die Sie bei Watkins Glen tun können. Sie können entweder eine kurze Einführung von jedem Element lesen, oder sie können auf jedes dieser Bilder oder Texttitel klicken, um Grab oder Informationen zu navigieren . Also, bevor wir anfangen, die Website zu entwerfen , möchte ich nur ein wenig über Bilder sprechen, weil wir Bilder für jede dieser Dinge finden müssen , um ihre sieben und insgesamt einen meiner Lieblingsorte zu tun, um kostenlose Bilder ohne sich Sorgen zu machen über den Kauf einer Lizenz und die Möglichkeit, sie für kommerzielle Projekte zu nutzen. Und so was ist Plektren gehorchen. Wir haben schon einmal darüber gesprochen, also wenn wir hier reingehen und anfangen, nach Watkins Glen zu suchen, können wir sehen, dass es nicht so viele Bilder gibt. Es gibt nur sechs Bilder insgesamt, also müssen wir jetzt mit tieferen Suchen beginnen. Watkins Glen Hunting Watkins Glen Bootfahren Aber auch für diese Kategorien gibt es noch weniger Bilder. Also jetzt müssen wir allgemeine Suchen nach machen, Sagen wir, Wasserfällen, weil es nur einen Wasserfall gibt und wir kein vertikales Bild wollen. Wir benötigen ein horizontales Bild für jeden dieser Links, so dass dieses Bild nicht funktioniert. Ja, Sie können es zuschneiden und horizontal machen, aber ich glaube nicht, dass es ein sehr gutes Bild sein wird, das horizontal abgeschnitten wird, weil Sie einen Großteil des Bildes ausschneiden. Also wollen wir horizontale Bilder finden. Das einzige Problem ist keines dieser Bilder, oder sogar dieses Bild, ist ein Wasserfall im Watkins Glen Park. Dieser Wasserfall ist eigentlich etwa drei Stunden entfernt jeder völlig andere Vorteil. Wenn Sie also eine Website mit vielen Bildern oder nur ein paar Bildern im Allgemeinen entwickeln, was auch immer der Fall sein mag, möchten Sie sicherstellen, dass diese Bilder repräsentativ für den Standort dieses Unternehmens sind , oder dass Park, oder was auch immer der Fall sein mag, denn wenn man dieses Bild mit dem Watkins Glen Park reinstellt, während die Leute enttäuscht sein werden, wenn sie diesen Wasserfall sehen wollen und sie ihn nicht finden können, und dann sind wenn sie diesen Wasserfall sehen wollen und sie ihn nicht finden können, sie endlich Finden Sie heraus, dass es eigentlich drei Stunden entfernt ist. Also die Moral der Geschichte ist es, Ihre Bilder entsprechend zu wählen. Wenn wir also keine Picks verwenden können, gehorchen, müssen wir eine andere Seite finden, die wir verwenden können. Und es gibt Fotoagenturen mit mehr Bildern von Watkins Glen, die Sie tatsächlich gegen die Bilder von Picks verwenden können , gehorchen oder sogar Google-Bilder. Dieses Bild hier habe ich auf Google-Bildern gefunden, aber es ist nicht leicht für den kommerziellen Gebrauch verfügbar. Der Kunde muss für eine Lizenz bezahlen, um diese zu nutzen. Es ist in Ordnung, in Ihrem Design zu verwenden, aber Sie können sie erst auf einer Live-Website verwenden, wenn Sie Lizenzen für den kommerziellen Gebrauch erworben haben. Also, bevor wir mit diesem Projekt beginnen, müssen Sie sieben Bilder finden. Ob das durch Picks, gehorchen oder vielleicht ein Unternehmen wie Shutter Lager oder Google-Bilder ist. So oder so, finden Sie sieben Bilder für jede Kategorie. Laden Sie sie herunter und wir werden diesen Abschnitt der Website in der nächsten Lektion zusammenstellen . 71. Körper, Teil 2: Hallo und willkommen zurück. , da Nun, daSie Ihre Bilder heruntergeladen haben, gehen Sie weiter und fügen Sie sie Ihrem Dokument hinzu. Wenn Sie die Layer noch nicht entsprechend umbenannt haben, gehen Sie weiter und positionieren Sie sie in einer ähnlichen Reihenfolge. Und Sie müssen möglicherweise auch Ihre Leinwandgröße erhöhen, was ich bereits getan habe, indem Sie zur Bildauswahl der Leinwandgröße gehen und dann die Höhe entsprechend anpassen . Also geh weiter, tu das. Und dann können wir weitermachen und anfangen, unsere Bilder so zu dimensionieren, dass sie genau dort platziert werden, wo sie sein müssen. Was die Größe angeht, werden wir 400 in 67 Pixeln breit um 310 Pixel hoch machen. Für die ersten 6 Bilder wird das letzte Bild 1400 Pixel Weiß sein. Was füllt die linke Zehe rechts neben dem Dokument. Und dann werde ich meine Größe und 450 Pixel hoch. Nun kann das Bild, das Sie heruntergeladen haben, anders sein als dieses. In diesem Fall müssen Sie es möglicherweise größer oder kürzer machen, basierend auf der Zusammensetzung dieses Bildes. So werden Sie Ihr Bild unten hier vergrößern. Nach dem, was Sie heruntergeladen haben. In Ordnung, gehen wir zurück nach oben und lassen Sie uns weitermachen und unser erstes Bild hier skalieren. Jetzt ganz schnell. Sie fragen sich vielleicht, warum ich 467 Pixel breit gewählt habe. Nun, wie ich bereits erwähnt habe, möchte ich, basierend auf dem Designstil, den ich für dieses Webdesign-Projekt gewählt habe, dass die Bilder das Dokument von ganz links nach rechts füllen. Wir haben also drei Bilder, und die Zeichen unseres Dokuments sind 1400 Pixel breit. Wenn wir das teilen, bekommen wir 4 66.6 und ich habe gerade aufgerundet, um sicherzustellen, dass alles auf die Seite passt. Und das andere, was Sie bemerken werden, ist, dass wir uns nicht wirklich auf das Gittersystem oder die Spalten verlassen , die auszurichten sind. Unsere Bilder sind Text und andere Elemente wegen des Designstils, den ich gewählt habe. Und wenn wir zu gehen und Inhalt in diesem Abschnitt sind, verwenden wir die Spalten überhaupt nicht. Wir werden nur eine Auswahl treffen, um diesen Text direkt in der Mitte gegen die Verwendung der Rasterspalten auszurichten . In Ordnung, lassen Sie uns weitermachen und beginnen, unsere Bilder auf die Größe zuschneiden, die wir wollen. Wenn nötig, müssen Sie möglicherweise neu skalieren. Ihr Bild entspricht der Größe, die wir für jedes Bild verwenden werden. Daher würde ich empfehlen, Ihre Bilder so nah wie möglich an der Höhe oder dem mit für dieses bestimmte Bild zu skalieren . Also im Moment habe ich 3 11 für die Höhe, und wir werden 3 10 für die Höhe tun, also kann ich das nicht mehr wirklich skalieren. Also werde ich voran gehen und diese bestimmte Schicht greifen, die dieses Trail-Bild ist, und ich werde eine Auswahl treffen. Und dann werde ich eine Ebenenmaske hinzufügen, um sie auf diese bestimmte Größe zu schneiden, die wiederum für 67 mal 3 10 ist Und wenn ich will, kann ich mein Verschiebungswerkzeug mit dem Buchstaben V greifen und dann kann ich entweder meine Pfeiltasten verwenden, nachdem ich auf diese Ebene und verschieben Sie das Bild in Position, um das Bild entsprechend, wie ich es komponieren möchte, neu zusammenzustellen. Also, sobald ich das tue, Ich kann dann gehen und meine Ebenenmaske hinzufügen, stellen Sie sicher, dass Sie Auswahl ausgewählt haben und klicken Sie auf Hinzufügen und das Bild abgeschnitten ist. Also ist dieses Bild hier viel größer als das letzte. Wir müssen auch mit Commander-Steuerung und D. auswählen also werde ich diese bestimmte Ebene auswählen, und dann werde ich mein Skalierungswerkzeug verwenden, um es nach unten zu skalieren. Ich muss auch sicherstellen, dass ich alles hier eingesperrt habe, damit es bleibt und proportional. Und ich werde auf diese Zahlen hier oben achten, weil ich nicht will, dass eine dieser Zahlen niedriger als 4 67 oder 3 10 ist. Ich denke, das ist in Ordnung. Also werde ich voran gehen und es neu skalieren, und dann werde ich mein Rechteck-Werkzeug verwenden, um eine weitere Auswahl zu treffen. Aber was ich tun muss, ist sicherzustellen, dass ich dieses bestimmte Bild auf der rechten Seite dieses Bildes ausrichte , damit wir unsere Führungen einschalten und einige Hilfslinien entlang dieser Bilder hinzufügen können, um uns zu helfen, eine bessere Auswahl zu treffen, bevor wir diese Auswahl treffen. Andernfalls, wenn wir es beschneiden und es fehl am Platz ist und wir es wiederholen müssen, Okay, ich werde weiter gehen und mein Bewegungstool wieder schnappen, damit ich dieses Bild ein wenig nach oben verschieben und es neu zusammenstellen kann , weil ich wirklich nicht zuschneiden will aus diesem Teil des Bildes wieder. Diese Luft, die kleinen Details, an denen Sie arbeiten müssen, wenn Sie Ihre Websites entwerfen, um Ihre Designs besser als der durchschnittliche Grafikdesigner zu machen . Alles klar, lassen Sie uns voran und wieder eine Ebenenmaske. Und dann müssen wir das nur für alle anderen Bilder wiederholen. Also werde ich das wirklich schnell machen, und ich werde wahrscheinlich diesen Teil des Tutorials beschleunigen, damit du mir nicht zusehen musst, wie ich das mache und Zeitlupe mache. - In Ordnung, lassen Sie uns weitermachen und unseren Körperinhalt in diesem Abschnitt hinzufügen. Neu. Lassen Sie uns voran und erstellen Sie zuerst einen Farbhintergrund dafür. Und lassen Sie uns voran und erstellen Sie eine neue Hintergrundebene namens Texthintergrund. Lassen Sie uns voran und erstellen Sie eine Auswahl direkt hier, und dann werden wir es mit dieser cremefarbenen Farbe füllen, die wir in unserem Headerbereich hier oben verwendet haben . Ich hole mein Pipettenwerkzeug und wähle es aus, und dann kann ich das ausfüllen. Alles klar, lassen Sie uns voran und unsere Inhalte Nagel. Schnappen Sie sich Ihr Textwerkzeug. Lassen Sie uns die Schriftart auf Eisenbahn Ultra Bold ändern. Lassen Sie uns 72 für die Größe und dann unsere dunkelgrüne Farbe tun. Und lasst uns Dinge austippen, die wir tun müssen. Kann das jetzt einfach nach oben und aus dem Weg bringen, bevor wir und unsere Körperzufriedenheit, möchte ich, dass die Größe dieses Inhalts eine bestimmte Größe hat. Wenn ich also mein Textwerkzeug schnappen und ein Textfeld herausklicke, kann ich die Größe dieses Textfelds nicht wirklich definieren. Eine Möglichkeit, das zu umgehen, besteht darin, eine neue Ebene zu erstellen. Es wird eine temporäre später, weil wir es nur verwenden, um eine Form für die Größe zu erstellen , die wir wollen, und dann löschen wir es, wenn wir fertig sind. Also lassen Sie uns voran und machen die Form. Lassen Sie uns 600 Wein von 4 50 groß machen, und dann greifen wir einfach eine helle Farbe grau und füllen sie mit, und das ist die Größe des Textfeldes, das ich verwenden möchte. Geh voran und de selektieren und schnappen Sie sich Ihr Textwerkzeug, und bevor wir das tun stellen wir sicher, dass wir jetzt den richtigen Funt haben, wenn es um die Schriftfamilie für den Körperinhalt geht, verwende ich gerne eine Schriftart wie Georgia, Das ist viel einfacher zu lesen bei einer kleineren Größe von 14 oder 16 oder 12 im Vergleich zu einer Schriftart wie dieser, die bei einer viel größeren Größe viel einfacher zu lesen ist. Wir machen Georgia mit 16 für die Größe, und dann für die Farbe werden wir eine dunkelgraue Farbe machen. Jetzt können wir das Textwerkzeug nehmen und klicken und ziehen Sie eine Form um sie herum. Aber zuerst gehen wir voran und das Zuschneiden, den Inhalt dieser Lear-Grenze, um es einfacher zu sehen, wo dieses Textfeld platziert werden soll. Also, jetzt ist unser Textfeld die genaue Größe, die ich will. Also werde ich jetzt einen Dummy-Text greifen, je nachdem, welcher bereits von einem anderen Monitor ausgewählt wurde, und ich werde voran gehen und diesen einfügen. Okay, also habe ich hier unten einen zusätzlichen Text, der abgeschnitten wird. Also werde ich das Textfeld nur etwas kürzer machen und dann die Escape-Taste drücken, um aus ihm herauszukommen. Jetzt möchte ich den nächsten Satz von Absätzen auch zu einer bestimmten Größe machen oder zumindest auf eine bestimmte Größe beschränken. Also nehmen wir unsere Hintergrundebene hier, und wir werden sie mit unserem Skalierungswerkzeug skalieren. Und dieses Mal wird es 1 50 für die Höhe und es ist 600 für die mit. Stellen Sie sicher, dass Sie es zuerst entsperren, ändern Sie die Größe der Pfanne, und dann können wir dieses Feld nehmen und hier nach unten bewegen, so dass wir ein neues Textfeld basierend auf dieser neuen Größe erstellen können . Ich muss zu meinem Text zurückkehren und ein bisschen, weil ich dort noch einen kleinen Text sehen kann . Okay, jetzt, wo ich das getan habe, was ich tun möchte, ist, lassen Sie uns einen kurzen Blick und das alte Design werfen. Sie haben hier einen Abschnitt, der ein Update enthält, das Informationen über den Status des Parks gibt , und im Moment ist es aufgrund des Staates geschlossen. Das sind also einige wichtige Informationen, die wir über die Dinge einbeziehen sollten, denn wenn jemand sich die Dinge anschaut, die zu tun sind, wäre es schön zu wissen, ob der Park offen ist oder nicht. Also gehen wir weiter und die Informationen hier unten. Also habe ich diese Informationen aus einem vorherigen Dokument und einen anderen Monitor hier links, die Sie nicht sehen können. Also schnappen Sie sich einfach etwas Dummy-Text und greifen Sie dann einfach Ihr Textwerkzeug und erstellen Sie ein neues Textfeld basierend auf der neuen Größe unserer Form. Gehen Sie voran und fügen Sie das in drücken Sie Ihre Escape-Taste. Und jetzt können wir diesen Texthintergrund löschen, weil wir ihn nicht mehr brauchen. Und dann denke ich, dass wir auch einen Titel für diesen Abschnitt hinzufügen sollten. Ich werde es Park-Updates nennen, und ich möchte auch die Schriftart zurück auf Eisenbahn fett ändern. Lassen Sie uns auch die Schriftgröße größer machen. Machen wir es 20 und wählen Sie dann einfach eine dunkelrote Farbe. In Ordnung, ich werde jetzt meine Guides einschalten, damit ich alles nach links ausrichten kann . Was den Abstand hier angeht, lassen Sie uns voran gehen und 25 Pixel Raum messen. Lassen Sie uns 50 Pixel Abstand zwischen diesem Absatz und dem nächsten Titel machen, und es gibt wirklich keinen Grund, warum ich diese genauen Zahlen verwende. Ich finde nur, dass diese Zahlen gut für dieses Design funktionieren. Wenn Sie also entwerfen, müssen Sie entscheiden und wählen Sie den Abstand basierend auf dem, was Ihrer Meinung nach am besten aussieht . Okay, ich kann voran gehen und diese in Position bringen, und dann müssen wir 25 Pixel Platz für den nächsten Absatz schaffen. Na gut, lass uns weitermachen und anfangen, unsere Schichten hier zu organisieren. Also jetzt müssen wir diesen Inhalt nehmen und ihn perfekt in der Mitte dieses Bereichs hier ausrichten . Also werde ich voran gehen und eine weitere neue Ebenengruppe für all diesen Inhalt erstellen, die Körperinhalt genannt wird . Und dies wird es einfacher, alles direkt in der Mitte auszurichten. Ich werde hier eine Auswahl für diesen Bereich treffen. Nun, wir hätten es mit dem Texthintergrund tun können, aber ich glaube, der Texthintergrund ist eigentlich größer als dieser Bereich hier. Und deshalb verwende ich eine Auswahl, anstatt mich am Hintergrund auszurichten. So Linie die Mitte und Mitte des Ziels, de wählen Commander, Control und D, und das ist alles erledigt. Wir haben noch eine Sache zu tun, und das ist die Anzeige. Sind Titel für jedes Bild. Ich gehe voran und scrollen Sie hier nach oben, weil ich auf meine Trails Bild für den ersten Titel klicken möchte und ich werde Ihnen sagen, warum ich es so in nur einem Moment mache. Gehen wir weiter und greifen unser Textil mit dem Buchstaben T. Lasst uns die Schrift ändern, Teoh Arrow Für die Größe, werden wir 60 machen und es Zehe weiß ändern. Okay, ich klicke hier auf das Bild, und ich tippe den ersten Titel in allen Hauptstädten aus. Und hier ist, warum ich meine Bildebene ausgewählt habe, bevor ich den Titel hinzugefügt habe. Wenn Sie dies tun, wird diese Textebene direkt über der ausgewählten Ebene hinzugefügt. Wenn ich also zum Camping-Bild komme und Camping austippe , ist diese Campingschicht jetzt über dem Campingbild. Das macht es also einfacher, im Vergleich zu tun, alles hier unten oder woanders und dann zurück zu gehen und alle diese Titel in Position zu bringen. Also nur ein weiterer Tipp, der Ihnen hilft, schneller organisiert zu werden, indem Sie zuerst die Ebene auswählen bevor Sie Ihren Titel hinzufügen. Nun, da wir unseren weißen Text auf unseren Bildern haben, haben wir ein kleines Problem Einige der Bilder haben helle Farben und warten im Hintergrund, und es macht es schwierig, diese Titel zu lesen. Wir wollen es den Menschen leicht machen, den Inhalt zu lesen, deshalb müssen wir hier etwas mit unserem Text tun. Um das Lesen zu erleichtern, schwächen Sie entweder die Deckkraft der Bilder oder machen Sie das Bild dunkler. Oder wir könnten ein Textfeld hinter dem Inhalt erstellen und eine dunkle Farbe dahinter verwenden. Oder wir können dem Text einen Schlagschatten hinzufügen, um es leichter zu lesen, da es hilft, den Text vom Bild zu trennen. Und in diesem Fall, für dieses spezielle Design, mag ich die Idee des Schlagschattens im Vergleich zu den anderen Optionen, weil ich nicht will und irgendetwas anderes zu den Bildern, weil die Bilder von selbst abheben sollten. Und wenn ich einen Hintergrund für den Text selbst hinzufüge, nimmt er dem Bild irgendwie weg. Da dies also ein bildintensiver Designstil ist, möchte ich, dass diese Bilder so weit wie möglich hervorstechen. Gehen wir also weiter und wählen Sie hier unseren ersten Titel aus. Wir werden nach oben gehen, um Licht und Schatten Schlagschatten zu filtern. Gehen wir also weiter und spielen Sie mit unseren Einstellungen hier herum, um eine Option zu finden, die am besten für unsere Titel und die Bilder funktioniert . Ich gehe voran und lasse X und Y runter. Ich werde auch den Weichzeichnerradius fallen lassen , der diesen Schlagschatten schärft, und es hilft ihm, sich von dem dahinter liegenden Bild viel mehr zu trennen, wenn Sie diesen Radius entsprechend senken , basierend auf Ihrem eigenen persönlichen -Präferenz. Also gefällt mir diese Einstellungen hier, und ich kann entweder eine neue Voreinstellung erstellen, die darauf basiert und dann jedes Mal wieder in dieses Filter-Schlagschatten-Dialogfeld zurückkehren, wenn ich diesen Schlagschatten zu allen anderen Titeln hinzufügen möchte. Es ist wirklich nicht notwendig, es sei denn, ich möchte diesen bestimmten Jobschatten in einem anderen Projekt verwenden . Ich habe nicht vor, diese spezifischen Einstellungen für ein anderes Projekt zu verwenden, also bin ich in Ordnung mit dem Klicken auf OK, denn wenn Sie sich erinnern, wenn Sie eine andere Textebene auswählen und dann Ihre Tastenkombination verwenden, die Befehl oder -Steuerelement und F verwenden, wird diese Filtereinstellung automatisch direkt auf die Ebene angewendet. Wie cool ist das? Das macht es so viel einfacher und schneller, diese Tastaturen für den Schnitt zu verwenden, anstatt wieder in das Menü zu gehen , um es manuell zu tun. Also gehen Sie weiter und wenden Sie Ihren Schlagschatten auf alle Ihre Titel an. Jetzt, da wir unsere Schlagschatten zu allen unseren Titeln hinzugefügt haben, müssen wir dann alle unsere Titel und die Linie nehmen, dann perfekt in die Mitte unserer Bilder. Also lasst uns weitermachen und mit unserem ersten Bild hier beginnen. Ich werde Rechteck-Auswahlwerkzeug greifen, damit ich eine Auswahl um das Bild treffen kann, und dann kann ich mein Ausrichtungswerkzeug verwenden, um es an dieser Auswahl auszurichten. Also werde ich das für jeden der Titel und die Bilder tun. Okay, wir sind fast fertig. Das Letzte, was wir tun müssen, ist, alle unsere Ebenen zu organisieren, und ich werde alle Titel und Bilder nehmen und sie in einzelne Ebenengruppen namens Bild eins bis Bild sieben platzieren , und das ist es Dinge zu tun. Abschnitt ist jetzt in erledigt. Das nächste Tutorial geht weiter und beginnt mit der Arbeit an der Info-Abteilung unseres Körpers. Also, wenn du bereit bist, das zu tun, lass es uns tun. Ok? 72. Körperinformationen: Hallo und willkommen zurück. Ordnung, also haben wir einen weiteren Abschnitt für unsere Webseite, der zusätzliche Informationen für jeden bietet, der den Park besuchen möchte. Wir werden gut aussehende Inhalte oben und einige Schaltflächen am unteren Rand, die zusätzliche Informationen bieten , wenn Sie darauf klicken. Und dann werden wir auch einen kleinen Abschnitt hier unten hinzufügen für diejenigen, die einen Campingplatz im Park reservieren wollen . Das erste, was wir tun müssen, ist ein großes Bild für den Hintergrund des Abschnitts hinzuzufügen. Jedes Bild reicht. Also gehen Sie vor und wählen Sie Sabei, finden Sie ein Bild und dann gehen Sie voran und skalieren Sie es. Es ist also mindestens 1950 Pixel hoch, und es deckt das volle mit des Dokuments muss nicht genau die gleiche Größe haben. Stellen Sie einfach sicher, dass es zumindest so viel füllt. Na gut, gehen wir weiter und schnappen uns unser Textil mit dem Brief. T Spaß Familie wird Pfeil sein. Die Größe wird bei 95 sehr groß sein und wir werden weiß verwenden und das wird für unseren Titel sein. Alles klar, ich werde diese anderen Schichten abschalten. Auf diese Weise kann ich die Ebenen auswählen, die ich mit meinem Ausrichtungswerkzeug brauche, weil wir unseren Titel ausrichten werden . Also First Commander Control und ein, um alle auszuwählen. Dann bist du lahm, es Werkzeug und dann ein Linienmittelpunkt des Ziels. Ich möchte auch einen Schlagschatten zu diesem Titel hinzufügen, weil es gerade schwer zu lesen . Mit Commander Control und F können wir den Schlagschatten hinzufügen, den wir in früheren Teilen des Projekts verwendet haben. Das macht es definitiv viel einfacher zu lesen, anstatt den Schlagschatten zu haben. In Ordnung. Als Nächstes möchte ich zwei Textfelder erstellen, die den Inhalt für den oberen Teil enthalten. Also werden wir einen neuen Layer-Hintergrund namens Textfeld eins erstellen. Das nächste, was ich tun möchte, ist, dass ich zwei Textfelder hinzufügen möchte, die unsere Informationen enthalten. Lassen Sie uns also eine neue Ebene namens Textfeld eins erstellen. Okay, für die Größe, wir werden 700 mal 3 50 tun Dann füllen wir das mit Weiß, gehen Sie voran und wählen Sie mit Commander Control und D Wir gehen auf Ebene und beschneiden den Inhalt. Nur werde es nach oben bewegen, wählen Sie alle und dann eine Zeile in die Mitte des Dokuments wieder de auswählen. Und wir werden dieses Mal ein weiteres Textfeld erstellen, das auch Textfeld genannt wird . Für diesen hier werden wir 700 mal 700 groß und wir werden es wieder mit Weiß füllen. Vergrößern Sie einfach hier, damit ich die Ebene greifen und sie in Position bringen kann. Wir müssen auch die Layer-Grenze beschneiden, also vergessen wir nicht, das zu tun. Und ich denke, ich möchte auch die Deckkraft auf 30 senken und dies wird es ermöglichen, dass ein Teil dieses Bildes darunter durchkommen kann. Alles klar, geh weiter und schnapp dir einen Dummy-Text. Dann schnappen Sie sich Ihr Textwerkzeug und ändern Sie Ihre Schriftfamilie in Georgia. Lassen Sie uns es auf 16 fallen für die Größe und eine dunkelgraue Farbe. Ich werde nur ein zufälliges Textfeld herausziehen. Jede Größe ist in Ordnung. Gehen Sie weiter und fügen Sie Ihren Dummy-Text und bei Bedarf Filmebene über dem Textfeld ein. Ok. Ich werde weiter gehen und einen weiteren Absatz hier hinzufügen, um den Raum ein wenig mehr zu füllen, und dann werde ich mein Textfeld entsprechend anpassen, wenn das Texas abgeschnitten wird. Also werde ich voran gehen und greifen mein Ausrichtungswerkzeug jetzt mit dem Buchstaben ein greifen, dass Textfeld Hintergrundverschiebung und klicken Sie auf den Absatz und dann eine Zeile zum ersten Element. Alles klar, das sieht also ziemlich gut aus. Gehen wir weiter und fügen Sie unsere Schaltflächen hinzu. Jetzt werden wir weitermachen und eine neue Ebene namens Button erstellen. Lassen Sie uns abgerundete Ecken mit dem Radius von 15 hinzufügen und dann, für die Zeichen wurden 3 75 von 75. Schnappen Sie sich Ihren Eimer, füllen Sie das Werkzeug und dann stellen Sie sicher, dass Sie Ihre dunkelgrüne Farbe greifen und füllen Sie es aus. Gehen Sie voran und de Auswahl und lassen Sie uns gehen, um Ebene beschneiden zu Inhalt und verschieben Sie es in Position. Und dann müssen wir sie nur wieder in der Mitte des Dokuments ausrichten. Wählen Sie also alle aus. Schnappen Sie sich Ihr Ausrichtungswerkzeug, klicken Sie darauf und eine Linie zur Auswahl. Okay, wählen Sie Commander Control und den Buchstaben D aus. Hey, wir gehen wieder zu unserem Textil, und dieses Mal werden wir die Schrift auf Eisenbahn Bold ändern. Machen wir 34 für die Größe und wir machen Weiß für die Farbe. Und ich wette, du weißt, was wir als Nächstes tun müssen. Das ist richtig. Wir müssen unsere Inhalte in der Mitte unseres Buttons ausrichten, okay? Und lasst uns weitermachen und einige dieser Schichten organisieren. Jetzt gehen wir weiter und nehmen unseren Knopf und duplizieren ihn fünfmal, fünfmal, okay ? okay Und lassen Sie uns unser Ausrichtungswerkzeug verwenden und wählen Sie alle Tasten halten auf Ihre Umschalttaste und klicken Sie auf alle von ihnen und dann eine Linie links. Als nächstes möchte ich den Raum gleichmäßig zwischen allen Schaltflächen verteilen. Also lassen Sie uns Mädchen runter zu verteilen und dann für den Offset. Warum? Ich möchte das auf 100 ändern. Klicken Sie dann hier auf dieses Symbol, um vertikale Zentren zu verteilen. Okay, ich möchte alle diese Ebenen jetzt umbenennen Button eins bis Taste sechs und dann werde ich sie alle in ihre eigene Ebenengruppe setzen. Okay, gehen wir weiter und eine Zeile zum Textfeld und dann eine neue frühere Gruppe für diesen Abschnitt. Okay, also ist der erste Abschnitt ziemlich fertig. Ich denke, wir müssen nur diesen Titel hier in der Zeile es von hier nach hier nehmen. Also treffen Sie Ihre Auswahl und gehen Sie voran und richten Sie es so aus, dass der letzte Teil dieses Abschnitts eine genannte Aktion sein wird, die ein Ort sein wird, wo Besucher einen Campingplatz reservieren können. Also werden wir eine Art Filter wie im vorherigen Projekt erstellen, und wir werden zuerst mit einer Content-Box beginnen. Und ich möchte, dass diese Box voll mit der Seite ist. Lassen Sie uns also voran und erstellen Sie zuerst eine neue Ebene. In Ordnung, gehen wir weiter und treffen unsere Auswahl. Und lassen Sie uns diese Auswahl 525 Pixel hoch machen. Jetzt. Das einzige Problem ist, dass meine Auswahl unter das Bild geht. Ich möchte, dass es im Bild in diesem Bereich hier enthalten ist, so dass ich es einfach klicken und nach oben ziehen kann . Sobald wir fertig sind, wird dieser Abschnitt weiter gehen und es in der Mitte der Unterseite dieses Teils im unteren Teil unseres Bildes ausrichten . Lasst uns voran gehen und es mit Weiß ausfüllen. Lassen Sie uns die Deckkraft auf 75% auswählen und senken. In Ordnung, lassen Sie uns den Titel für diesen Abschnitt hinzufügen. Schnappen Sie sich Ihren Text mit dem Buchstaben T. Wir werden Pfeil aus der Schrift 95 von der Größe wieder verwenden, und dann sind dunkelgraue Farbe. Gehen wir voran und richten Sie es aus. Also werde ich einen weiteren Hintergrund für den Filter selbst erstellen. Dieses Mal möchte ich es voll mit basierend auf unserem Grid-System machen. Also habe ich hier eine zusätzliche Richtlinie. Ich gehe voran und schiebe das, damit meine linke Seite hier ist. Also lasst uns voran gehen und eine Auswahl bis zum Ende auszeichnen, und dann werden wir die Höhe ändern. 2175. Wir werden diese dunkelgrüne Farbe wieder benutzen. Wir müssen auch eine neue Ebene erstellen, die es zuerst Filterhintergrund nennen wird, und dann können wir voran gehen und füllen Sie es in de select. Und ich werde die Deckkraft dieser Hintergrundebene auf 10 fallen lassen. Ich denke, das ist ein bisschen zu viel. Versuchen wir es mit 20 und ich werde mit dem gehen. Und jetzt können wir unsere Formulare für diesen Filter erstellen. Beginnen wir mit den Titeln jeder Spalte, die wir erstellen werden. Also werden wir unseren Text zurück in Georgia ändern. Aber ich möchte kursiv für den Stil wählen. Die Größe ist 14 und dann wieder dunkelgrau, und die erste Spalte wird das Ankunftsdatum sein. Dann werden wir die Länge des Aufenthaltes haben und dann wird weniger Spalte wieder flexibel sein. Wir könnten viele weitere Spalten erstellen, basierend darauf, wie dieser Besucher ihre Auswahl einschränken kann. Aber wir bleiben vorerst bei drei Säulen. In Ordnung, lassen Sie uns jetzt an der Rose arbeiten. Ich nenne es nur Zeile Eins. Und dann für die Größe wird es unseren Knöpfen hier oben ähnlich sein. Vielleicht etwas kleiner. Machen wir 300 mal 75 und füllen Sie es mit dem dunkelgrünen. Okay, lassen Sie uns das zweimal duplizieren. In Ordnung, lassen Sie uns fortfahren und die Ebenengrenze für jede Ebene zuschneiden. Lassen Sie uns sie alle nach oben ausrichten, und dann werden wir Offset setzen. Warum? Zurück zu Null und alle Set X 23 50. Klicken Sie dann auf dieses Symbol, um horizontale Mittelpunkte zu verteilen. Lasst uns voran gehen und unsere Titel schnappen, nageln und in Position bringen. Okay, Zurück zum Ausrichtungswerkzeug, damit wir alle diese auswählen und nach oben ausrichten können. Kate, lass uns unsere Schichten organisieren. Alles klar, lassen Sie uns voran und eine Zeile ist Inhalt für den Filterhintergrund. Wechseln Sie zuerst zur Filterhintergrundebene, schneiden Sie den Inhalt zu Verwenden Sie dann das Ausrichtungswerkzeug, um beide auszurichten. Okay, ich möchte nur einige Informationen in diesen Zeilen hinzufügen, damit Besucher wissen, welche Informationen in jeder Zeile für die lustige Familie eingegeben werden müssen. Wir gehen zurück zur Eisenbahn, wählen Bold 24 und weiß aus. Nun, wie wir es bereits im letzten Projekt getan haben, möchten wir vielleicht einige Hover-Zustände für einige Dropdown-Boxen erstellen. Also überlasse ich das Ihnen, wenn Sie diese hinzufügen möchten, wenn Sie Ihr eigenes Design für Ihr Portfolio machen . Das letzte, was ich tun möchte, ist, einen weiteren Link hier unten hinzuzufügen, und dieser spezielle Link wird verwendet, wenn sie nicht mit dem verschiedene Optionen oder den Park selbst und nicht vertraut mit den verschiedenen Campingplätze. Wenn sie auf diesen Link klicken, gelangen sie zu einer anderen Seite, die ihnen zusätzliche Informationen über die verschiedenen Arten von Campingplätzen zur Verfügung stellen kann . Das letzte, was wir tun müssen, ist, unsere Schichten zu organisieren. - Herzlichen Glückwunsch . Wir sind jetzt fertig mit unserem Infobereich unseres Webseitendesigns. In der nächsten Lektion werden wir also an der Fußzeile dieser Webseite arbeiten. Also, wenn Sie bereit sind, damit anzufangen, nun, tut es das? 73. Fußer: Hallo und willkommen zurück. In Ordnung, also werden wir unser Webdesign-Projekt mit unserer Fußzeile beenden. Jetzt sieht es nicht zu sehr anders aus als die ursprüngliche Fußzeile, und sie haben derzeit insgesamt fünf Spalten mit ihren Social-Media-Symbolen hier unten und einer separaten Zeile. Und ich dachte, es wäre schön, alles in Spalten zu haben und es auszubreiten. Wir haben auch fünf Säulen hier oben. Plus das würde eine sechs Spalte machen, was schön ist, denn dann können wir eine Spalte über Gitterspalten setzen und das wird gleichmäßig alles auseinander . Und dann habe ich die Farben einfach ein wenig verändert, um es ein wenig leichter zu lesen. Lassen Sie uns also voran gehen und beginnen, indem wir unseren Hintergrund für den ersten Abschnitt der Fußzeile erstellen. Lassen Sie uns voran und erstellen Sie eine neue Ebene namens Fuß oder eine für die Höhe. Lassen Sie uns es auf 4 25 setzen, ich muss auch das nach oben bewegen. Sieht so aus, als ob mir der Platz auf meiner Leinwand ausgeht, also müssen wir das in einer Sekunde erhöhen. Lassen Sie uns voran und wählen Sie unsere dunkelgraue Farbe. Gehen Sie weiter und füllen Sie das aus, beschneiden Sie dann den Inhalt und verschieben Sie ihn nach unten. Okay, lass uns weitermachen und unsere Leinwandgröße vergrößern. Ich werde nur 800 Pixel zur Höhe hinzufügen, und dann werden wir sie neu einstellen, sobald wir fertig sind. In Ordnung, lassen Sie uns zu diesem Zeitpunkt einen neuen Hintergrund namens Footer erstellen. Wir werden die Größe kleiner, Also lassen Sie uns tun 1 25 und wählen Sie dann Ihre dunkelgrüne Farbe, um es mit De Select auszufüllen und den Inhalt zu beschneiden. Okay, jetzt, wo wir die Höhe der beiden Fußzeilen kennen, können wir weitermachen und beschneiden oder Leinwand. Ich bin wieder bei 51 81. Sie können abhängig von den ausgewählten Bildern unterschiedlich sein. Gehen Sie also voran, ermitteln Sie die Höhe Ihrer Leinwand und schneiden Sie sie dann für den ersten Titel ab. Wir setzen es auf Railway Bold 24 und machen es weiß. Also geh weiter. Geben Sie einfach einen Dummy-Text für Ihren Titel ein und lassen Sie uns fortfahren und ihn an der ersten Spalte auf der linken Seite ausrichten . Ich werde meinen Zweittitel erstellen, und dann für unseren nächsten Titel. Wir werden regelmäßig Eisenbahn benutzen, und wir werden es auf 18 ausrichten. Dann haben wir noch etwas mehr Text darunter zu platzieren. Ich werde ein Textfeld erstellen, das über zwei Spalten geht und dann nur einige Informationen einfügen , um es auszufüllen. Lassen Sie uns die Größe auf 14 ändern und ich möchte auch den Abstand zwischen jeder Zeile erhöhen, um es einfacher zu lesen. Also lasst uns nach unten gehen und den Abstand erhöhen. Und ich denke, 15 für diesen Zeilenabstand wird gut funktionieren. In Ordnung, lass uns da raus. Und die andere Sache, die ich tun möchte, ist, dass ich eine Zeile erstellen möchte, die zwei Spalten breit ist, also werde ich voran gehen und eine neue frühere genannte Zeile erstellen. Lassen Sie uns eine Auswahl über zwei Spalten zeichnen und gehen Sie voran und füllen Sie sie mit Weiß . Ich möchte diese Linie auch ein wenig dünner machen. Gehen wir auf die Ebene, beschneiden Sie den Inhalt greifen Sie dann Ihre Skala. Werkzeug war Shift plus s und lassen Sie uns die Höhe machen, auch. Gehen Sie weiter und bewegen Sie diese Linie nur ein wenig nach unten. Lassen Sie uns weitermachen und einige unserer Ebenen hier anordnen Okay , jetzt, da wir all das eingegeben und ausgerichtet haben, lassen Sie uns voran gehen und diese Ebene ein paar Mal duplizieren, damit wir den Rest der -Spalten. In Ordnung, gehen wir weiter und finden unsere Rasterebene hier. Stellen Sie sicher, dass es eingeschaltet ist, und lassen Sie es uns voran und skalieren, damit wir es tatsächlich unten auf unserem Campus sehen können . Das wird es uns leichter machen, unsere Säulen dort zu platzieren, wo sie sein müssen, kann. Lassen Sie uns am zweiten Teil unserer Fußzeile arbeiten. Wir werden es Eisenbahn behalten, aber ich mache es 14 für die Größe. Gehen wir weiter und fügen Sie unser Logo hier unten hinzu. Ich werde es aus dem Header-Abschnitt holen und duplizieren und den ganzen Weg nach unten bringen . Jetzt müssen wir es auch von hier oben holen. Kayla organisiert sind Schichten ein wenig. Die einzige Sache, die ich tun möchte, ist, dass ich dieses Logo nehmen und alles weiß machen möchte, also lasst uns voran gehen und eine neue Ebene namens Overlay erstellen. Füllen wir es mit Weiß aus, und lassen Sie uns diese beiden Schichten und eine nukleare Gruppe namens Logo Overlay setzen. Und dann müssen wir den Mischmodus für Overlay ändern und wir werden Edition Perfect auswählen . Das einzige, was noch zu tun ist, ist, die Social-Media-Symbole hinzuzufügen, und ich werde Sie das auf eigene Faust tun lassen. Es ist wirklich einfach. Erstellen Sie einfach Ihren Titel und fügen Sie dann Ihre Social-Media-Icons hinzu, wie ich es hier getan habe. Die andere Sache, die ich tun würde, ist, dass ich die Fußzeile aktualisieren würde, um verschiedene Titel und verschiedene Links darzustellen . Ich glaube nicht, dass du hier sitzen willst und zuschauen willst, wie ich all diese Informationen austippe. Wenn Sie üben möchten, es alleine zu tun, können Sie voran gehen und das tun. Und das wäre definitiv etwas, was ich tun würde, bevor ich es meinem Klienten zur Überprüfung gebe. Ich würde mich auch ändern. Die Links hier unten ist gut, anders zu sein, als alles genau gleich zu haben. In Ordnung, das war's also für unsere Fußzeile. Und wie Sie wissen, müssen wir die gesamte Webseite durchlaufen, bevor wir unseren Kunden geben, um sie zu aktualisieren und es besser zu machen, wenn möglich, und alles andere zu optimieren, was wir vergessen haben. wie Abstände und Ausrichtungen. Also gehen wir weiter und werfen einen Blick auf die allgemeine, was Seite im nächsten Tutorial. Und es gibt noch eine andere Sache, die wir tun müssen, die wir noch nicht getan haben. Und das ist das Hinzufügen unserer Hover-Zustände zu unserem Info-Bereich für diese Schaltflächen direkt hier. Wir werden die Namen ändern und dann ein kleines Pop-up-Fenster für den Hover-Staat erstellen . Und was passiert, nachdem Sie auf diesen Link geklickt haben? Also werden wir das im nächsten Tutorial behandeln, also wenn du bereit dafür bist, lass es uns tun. 74. Optimieren: Hallo und willkommen zu den letzten Optimierungen für Projekt Nummer fünf. Insgesamt denke ich, dass wir einen ziemlich guten Job gemacht haben. Es gibt nicht viel zu ändern oder zu beheben. Ich denke, wir haben so ziemlich alles richtig ausgerichtet, um alles richtig zentriert zu haben. Ich mag die Gelder, die wir verwendet haben. Das einzige, was wir nicht getan haben, war und ein Hover-Zustand für diesen speziellen Button hier. Und wir haben nicht die Namen der Titel für jede dieser Buttons geändert. sind also zwei Dinge, die wir auf jeden Fall tun müssen, bevor wir das Designkonzept an unsere Kunden senden . Also werde ich voran gehen und diese Tasten schnell aktualisieren. Die andere Sache, die ich erwähnen möchte, ist, dass es definitiv mehr Informationen auf ihrer gesamten Website gibt als diese fünf Buttons. Meine Empfehlung wäre also, diesen Abschnitt so zu erweitern, dass er Schaltflächen für alle Informationen enthält . Wir werden das nicht tun, weil es sich nur um Dinge handelt, die wir bereits getan haben. Sie wissen bereits, wie Sie eine Schaltfläche und ein Textcenter erstellen, es etcetera. Aber das ist etwas, das ich im Hinterkopf behalten würde, bevor ich ein Design zur Überprüfung oder Genehmigung einreiche , besteht darin, sicherzustellen, dass Sie alle Informationen in Ihrem Design enthalten sind. Sie wollen nicht knausern und etwas auslassen, weil der Client verwirrt sein kann und das Design nicht unbedingt basierend auf Ihrem Design ablehnt, sondern weil Informationen fehlen. Sie also sicher, dass Sie alle Informationen enthalten haben. Lassen Sie uns voran gehen und den Hover-Zustand entworfen , der ein Pop-up-Fenster sein wird, wenn Sie auf eine der Schaltflächen klicken. Eigentlich, bevor wir das tun, lasst uns weitermachen und eine Lügen sind zufrieden innerhalb der Schaltflächen. wissen, Wie Siewissen, aus früheren Lektionen können wir aus früheren Lektionendiese einzelnen Textebenen nicht auswählen, da sie in Gruppenebenen vergraben sind , zumindest in der aktuellen Version von Gamper, Das ist 2.10 verweisen auf Vielleicht hoffentlich, in einem zukünftigen Update von Gimp, werden sie uns erlauben, diese Ebenen mit ihrem Ausrichtungswerkzeug auszuwählen, obwohl sie in gruppierten Ebenen verschachtelt sind, und die einzige Möglichkeit besteht darin, die Ebenen oder die -Gruppen-Layer darüber. Aber selbst in diesem Fall kann ich meinen Text immer noch nicht auswählen, und dann können wir diese bestimmte Ebene mit unserem Ausrichtungswerkzeug auswählen, alle und eine Linie zu dieser Auswahl auswählen. Dann müssen wir diese Ebene greifen und sie den ganzen Weg zurück in die Gruppenebenen verschieben. Nicht sehr produktiv. Deshalb sollten Sie Dinge wie diese zum Zeitpunkt der Erstellung aktualisieren und nicht während des Optimierungsprozesses, da dies viel Zeit für die Produktion Ihrer Webdesigns hinzufügen wird. Ich werde den Rest dieser Titel beenden und sie an ihren Knöpfen ausrichten . Alles klar, gehen wir weiter und greifen unser HOVER-Status-Symbol aus unserer Kopfzeile und dupliziert und fügen Sie es der ersten Schaltfläche hinzu . In Ordnung, wir sind jetzt bereit, unser Hover-Status-Pop-Up zu erstellen, was der Zustand ist, nachdem Sie auf eine Schaltfläche geklickt haben. Also lassen Sie uns voran und erstellen Sie eine neue Ebene oberhalb der Schaltfläche, die Hover Pop up genannt wird. Wir werden einen Hintergrund erstellen, der alle unsere aktuellen Schaltflächen im Moment verdeckt , der all diese Informationen anzeigt. Also für die Größe, werden wir 5 25 mal 600 machen. Ich werde es hier rüber nach links bewegen und es nur ein bisschen zentrieren und dann werde ich es mit Weiß füllen. Ich möchte auch einen Strich hinzufügen. Also lasst uns gehen Um Strichauswahl zu bearbeiten, Ich werde meine Vordergrundfarbe auf das dunkelgrüne wechseln, eine Linie mit drei und klicken Sie auf Strich Que de select mit Commander Control und dem Buchstaben D . Gehen wir weiter und schnappen Sie sich unsere Textwerkzeuge. Wir können hier einen Titel von Stunden der Operation aufstellen. Ich werde die Farbe und Größe ändern und dann gehen Sie weiter und schnappen Sie sich etwas Dummy-Text, klicken und erstellen Sie ein Textfeld und fügen Sie einige Inhalte ein. Auf jeden Fall zu groß. Also werde ich 14 für die Größe machen. Wir werden es in Georgia ändern und wieder dunkelgraue Farbe haben. Ich habe zu viel Inhalt, also werde ich voran gehen und diesen Inhalt ein wenig kleiner machen. Machen wir es zu einer Größe 12 und das sollte funktionieren. Gehen wir weiter und bewegen es einfach ein bisschen nach oben. Und jetzt müssen wir eine Option erstellen, um dieses Fenster zu schließen. Ich gehe schnell in mein Textfeld und ändere die Größe des Textfelds auf eine Zeile unten rechts hier. Alles klar, lassen Sie uns gehen und ziehen Sie diese Ebenen aus der Schaltflächengruppe und lassen Sie uns ein neues Layer-Gruppen-Kalt-Hover-Pop-up erstellen . Ich denke, ich werde dieses aus der Schaltflächengruppe ziehen, da es ein Hover-Zustand ist und nicht wirklich eine Schaltfläche. Okay, lassen Sie uns diesen Hover nehmen, Pop-up und beschneiden den Inhalt und dann lassen Sie uns eine Auswahl des Hintergrunds machen und dann die Hover-Popup-gruppierte Ebene erneut auswählen. Es lässt mich nicht wählen, dass das Zuhause ist, gehen Sie weiter und ziehen Sie das den ganzen Weg raus, und wir werden es einfach auswählen, damit wir es an der Mitte des Dokuments ausrichten können. Okay, lassen Sie uns das wieder in de Select setzen. Und wir werden einen Link hier unten hinzufügen, der unseren Besuchern erlaubt, dieses Pop-up-Fenster zu schließen, wenn sie fertig sind, es zu lesen. Und dann lassen Sie uns unsere schöne blaue Farbe für die Farbe wählen. Und ich werde Basiswert auswählen, um einen zugrunde liegenden darunter hinzuzufügen, und ich werde es auf 16 für die Größe und Eisenbahn setzen. Mutig ist in Ordnung. Okay, ich werde das hier einfach wieder hinstellen. Ich werde das herausziehen, damit ich es an der Mitte ausrichten und eine Auswahl am unteren Rand dieses Textes treffen kann und die Auswahl um den Rest des unteren Teils dieses Abschnitts treffen kann, damit wir es direkt in der Mitte dieser Auswahl ausrichten können. Wenn ich das meinem Mandanten übergebe, lasse ich es ausschalten und dann kann ich ihnen zeigen, was passieren wird. Sobald sie auf eine dieser Schaltflächen Optionen klicken, um weitere Informationen zu erhalten, werden sie sehen, dass der Hover Status wird mit einem neuen Fenster mit den Informationen auf der Grundlage der Schaltfläche, die angeklickt wird angezeigt. Und natürlich natürlich wird unser Webentwickler das auch bemerken. Das einzige, was wir tun müssen, ist, Ihre Fußzeile zu reparieren und alle Ebenen zu organisieren, die richtig organisiert werden müssen . Und dann und dann werden Sie alle mit Projekt Nummer fünf fertig sein. Also gehen Sie weiter und beenden Sie dieses Web-Design-Projekt und dann, wie immer, gehen Sie voran und erstellen Sie diese Webseite mit Ihrer eigenen kreativen Vision neu, so dass Sie Portfolio Editor und dann werden Sie bereit sein, auf Projekt Nummer sechs überzugehen. Eigentlich ist dieses nächste Projekt mein Lieblingsdesign aus diesem ganzen Kurs. Es ist mein Favorit. Ich kann es kaum erwarten, mit Ihnen zu teilen, wie wir es gemacht haben. Das nächste Design hat ein bisschen ein Commerce-Gefühl, es mit einem Retro-Art von Stil zu ihm bekommen. Es macht also eine Menge Spaß, und wir werden ein paar neue Sachen in den Designprojekten lernen. Also, wenn du bereit bist, sehe ich dich in diesem Projekt. Bis dahin danke fürs Zuhören und einen tollen Tag haben. 75. Projekt: Hallo und herzlich willkommen zu unserem Webdesign Projekt Nummer sechs. Ich bin so aufgeregt, dass Sie es endlich geschafft haben, dieses Projekt zu erreichen. Das ist mein Lieblings-Webdesign. Das Projekt. In diesem Kurs gehen wir voran und werfen einen kurzen Blick auf ihre bestehende Website. Es gibt hier nicht eine ganze Menge los, außer viele schlechte Design-Entscheidungen. Ihr Logo ist pixelig, und es ist ein sehr minderwertiges Logo, nicht das Design selbst. Aber die eigentliche Datei, die verwendet wurde, ist von geringer Qualität und sieht nicht sehr professionell aus. Wir haben einen dunklen Hintergrund mit dunklem Text für das Menü, nicht leicht zu lesen ist, also werden wir es beheben, so dass das Menü viel einfacher zu lesen ist. Und wenn Sie sich fragen, was diese Firma gut macht, was sie tun, ist, dass sie alte Filmplakate verkaufen, und eines dieser Plakate wird hier im Heldenschrägkörper Abschnitt ihrer Website vorgestellt . Und dann haben wir einige Kontaktinformationen hier unten, also wenn Sie es bis zu diesem Teil ihrer Website machen, werden Sie feststellen, dass sie nach Vereinbarung persönlich oder bei verschiedenen Kunst- und Antiquitätenshows verkaufen , so dass Sie kontaktieren Sie sie, um herauszufinden, wo sie sein werden, um ihre Plakate zu kaufen. Aber mein Gedanke ist, wäre es nicht besser wären einfacher oder beides, die Plakate direkt auf ihrer Website zum Verkauf anzubieten . Sie haben bereits einen Login-Bereich für Kunden, aber sie verkaufen nicht direkt online, also bin ich mir nicht ganz sicher, warum sie sich anmelden. Sie haben ein Gästebuch, nicht sicher, was der Nutzen davon ist. Und dann haben sie einige Informationen über ihr Unternehmen und was sie dio und dann eine Kontaktseite, die im Grunde diese Informationen hier ist. Insgesamt können diese Website und dieser Kunde leicht ihr Geschäft wachsen, indem sie ihre Plakate online anzeigen und sie direkt online verkaufen, anstatt sich auf persönliche Verkäufe zu beschränken. Also lassen Sie mich Ihnen die E-Commerce-Homepage zeigen, die ich für Retro-Galerie-Bone erstellt habe. Es hat einen Retro-Design-Stil. Wir haben das Logo aktualisiert. Das Menü ist leichter zu lesen. Das Anmelden hat jetzt eine Zweckbestimmung. Kunden oder Kunden können ihre Bestellungen in ihrer Historie über ein Konto einsehen. Es gibt eine Shopping-Kurt, um sie direkt in ihre aktuelle zu bringen, um zu überprüfen The Hero Abschnitt bietet ihre beliebtesten Filmplakate, die Kunden können bis zu fünf verschiedene Filmplakate in der Helden-Sektion allein navigieren . Wir können immer mehr hinzufügen, wenn nötig, aber ich dachte, wir würden mit fünf beginnen. Wir haben eine Beschreibung des Filmplakats. Wenn sie mehr erfahren möchten, können sie auf diesen Mawr-Link klicken, und ein Pop-Up zeigt mehr Informationen über das jeweilige Poster. Und wenn sie bereit sind, jetzt genommen zu kaufen, dann, wenn sie mehr Optionen erkunden wollen, können sie nach unten scrollen. Und wir haben eine E-Commerce-Art eingerichtet, dass Kunden nach Preis Jahr Genre Qualität filtern können . Teoh finden leicht die Arten von Plakaten, die sie gerne sammeln, und, natürlich, sie können jetzt kaufen oder bekommen mehr Informationen zuerst. Dann natürlich beenden wir natürlichdie Homepage mit einer Fußzeile. Insgesamt nehmen wir dieses Webdesign-Konzept von ihrem bestehenden Logo und dem, was sie verkaufen. Und deshalb habe ich mich für dieses besondere Unternehmen für einen Retro-Design-Stil entschieden. Und ich liebe den Designstil, den ich kreiert habe, also werde ich Ihnen zeigen, wie Sie dieses Logo aktualisieren können. Aber Sie denken vielleicht schon gut, wissen, wie man das macht? Ich muss nur die Schriftart aussuchen und wiederholen. Wenn es so einfach war, ja, das ist alles, was Sie tun müssen. Aber was, wenn die Person, die dieses Logo entworfen hat, Ihrem Kunden nicht mitgeteilt hat, welche Schriftart er verwendet ? Alles, was sie haben, ist eine abgeflachte J-Peg-Datei, und sie haben keine Ahnung, den Namen dieser Schriftart. Du musst durch tausende von Schriftarten blättern, um das zu finden. Oder bist du Ah, er ist so aufgeregt, mit dir zu teilen, wie einfach es ist, herauszufinden, welche Schrift das unter Tausenden ist . Und Sie können es buchstäblich in ein oder zwei Minuten maximal tun. Also werde ich das Geheimnis in der nächsten Lektion mit dir teilen. Dann werden wir diesen Retro-Schieberegler erstellen. Ich gebe Ihnen einen Tipp und die Ressource, die ich für Hintergründe und Texturen verwende. Also haben wir eine Leinentextur für den Hintergrund, und ich kann das mit einem Klick hinzufügen und ich werde Ihnen zeigen, wie ich das mache. Und dann, natürlich, werden wir voran gehen und den E-Commerce-Bereich erstellen und ich werde Ihnen einige Tipps geben, wie ich einige der Effekte für diese Angebote erstellt habe Wir haben über Schlagschatten gesprochen, aber wir haben auch einen Tropfen Schatten auf der Innenseite des Knopfes diesmal statt der Außenseite . Also zeige ich dir, wie ich das gemacht habe. Und natürlich werde ich auf dem Weg weitere Tipps geben. Also, wenn du so begeistert bist wie ich über dieses Projekt bin, lass es uns tun. Beginnen wir mit dem Ermitteln der Schriftart, die in diesem Logo verwendet wird. 76. Logo: bevor wir unser Logo für diesen Kunden wiederholen können. Wir müssen herausfinden, welche Schriftart für das Logo verwendet wurde. Das Problem ist, der Client nicht weiß, welche Schriftart verwendet wurde oder der Name dieser Schriftart. Alles, was sie haben, ist eine abgeflachte J-Peg-Datei. Und wie Sie sehen können, ist das sehr pixelig. Haben Sie dieses Logo tatsächlich als Teil dieser Lektion enthalten, so können Sie es herunterladen und es selbst verwenden, um herauszufinden, welche Mittel. Lassen Sie mich Ihnen zeigen, wie das geht. Gehen Sie weiter und laden Sie es herunter. Dann müssen wir auf diese Website gehen. Meine Schriftarten dot com forward Schrägstrich w t f, und was diese Website tun wird, ist, dass sie die Datei von diesem Logo nehmen wird, und nachdem Sie es über diesen Browser hochgeladen haben, wird es diese Datei scannen, und es wird zu vergleichen es ist Tausende und Tausende. Eigentlich gibt es 130.000 Schriftarten und Zählen. Es wird diese Datei mit allen Schriftarten in seiner Datenbank vergleichen, um einzugrenzen, welche Schriftart in diesem Logo verwendet wurde. Es ist so einfach, es Geist weht. Wie einfach das sagt. Also hole ich meine Akte hier und ziehe sie in diesen Bereich ab. Dann müssen wir hier auf diesen kleinen blauen Button klicken, um den ausgewählten Funt und Boom zu identifizieren . Da gehen wir. Da ist ganz rechts, Plaza. Es gibt auch andere Versionen dieses Fonds, diese hier. Es gibt andere Stile dieser Schriftart, so dass Sie die Schriftart, die für dieses Logo verwendet wird, bestimmen können, ohne 130.000 Fonds durchsieben zu müssen . Wie cool ist das? Jetzt schauen Sie sich das an, und Sie können hier rechts sehen. Wir müssen diese Mittel kaufen. Oder tun wir? Es gibt tatsächlich kostenlose Versionen dieses Funts, die Sie in Ihrem Webdesign verwenden können, und dann können Sie entscheiden, ob Ihr Client diese freie Schriftart verwenden soll. Oder vielleicht wären sie besser dran mit einer hochwertigen Version der Originalschriftart. Und der Preis der Schrift ist nicht so viel. Dies ist eigentlich in kanadischen Dollar, so ist es wahrscheinlich näher an wie 25 zu $30 U. S. Also, wenn wir eine Google-Suche nach Plaza Free Fonds zu tun, unsere erste Option direkt hier von Fonts Geek dot com Sie können die reguläre Größe kostenlos. Also, was er hatte die lokale verdammt witted Gehen Sie voran und installieren Sie es in Gimp Restart Camp, um die Installation abzuschließen und dann wieder in Gimp zu kommen und wir werden weitermachen und das Logo neu erstellen , damit wir es zu unserem Projekt hinzufügen können. Also lasst uns weitermachen und loslegen. Wir erstellen ein neues Dokument mit Befehl oder Kontrolle und dem Buchstabenende. Dies ist die Größe, die wir wollen 80 von 68 dann werden wir die Vordergrundfarbe auswählen, und wir werden diese dunkelgraue Farbe wählen. Gehen Sie also voran und geben Sie Schuldennummer ein und klicken Sie dann auf. Okay, also werden wir weitermachen und ein paar Hintergründe erstellen, bevor wir Text eingeben. Also lassen Sie uns voran und erstellen Sie eine neue Ebene namens Retro-Hintergrund gefüllt mit Transparenz und dann, mit ihrem Rechteck-Auswahlwerkzeug, wird die Größe dieser Boxen erstellen, und die 1. 1 wird 1 1 sein 1 35 mal 58 und dann gehen Sie einfach weiter und bewegen Sie es nach oben und in das Dokument und dann greifen Sie Ihr Weiß und füllen Sie es mit Ihrem Eimer, füllen Sie das Werkzeug und dann de select. Gehen wir voran und duplizieren Sie diesen Hintergrund und nennen Sie ihn Galeriehintergrund. Ich möchte auch die Ebene bhandari für beide Ebenen und dann für den Galeriehintergrund zuschneiden . Wir werden es tatsächlich mit Schwarz füllen, also drücken Sie den Buchstaben D und dann greifen Sie Ihr Eimer-Füllwerkzeug mit dem Buchstaben G und gehen Sie voran und füllen Sie es aus. Wir möchten auch einen Leitfaden hinzufügen, der auf halbem Weg über das Logo liegt, also sind wir bei 80. Ziehen wir also eine Richtlinie bei 1 40 heraus und dann werden wir den Galeriehintergrund nach rechts verschieben . Großartig entlang dieser Anleitung und stellen Sie dann sicher, dass Ihr weißer Hintergrund auch mit dieser Richtlinie ausgerichtet ist . Okay, wir können den Guide jetzt verstecken und uns unser Textwerkzeug schnappen. Wir werden die Schriftart wählen, die wir heruntergeladen und installiert Plaza de Wreg und dann für die Größe, wir werden 60 tun und wir werden schwarz für Retro zu tun. Also gehen Sie vor und tippen Sie retro in allen Großbuchstaben und verschieben Sie es dann einfach in Position jetzt weil die Ebenengrenze auf der Außenseite des Retro-Textes oben ist und blasen Sie es. Entweder müssen wir hineingehen und die Größe dieses Textfeldes anpassen, bis es alles bedeckt, so dass wir können, dann eine Zeile, die direkt in das Textfeld Ich werde voran gehen und das tun. Halten Sie die Umschalttaste gedrückt, klicken Sie auf das Logo und dann eine Zeile zum ersten Element. Okay, wir müssen jetzt zurück in das Textfeld gehen und die Größe des Textfelds entsprechend ändern. Lassen Sie uns voran und fügen Sie Galerie auf der Seite, aber lassen Sie es ändern Zehe weiß, so dass ich voran und die Linie dieser Inhalt mit dem Retro-Logo jetzt mit ohne das Ausrichtungstool einfach durch Hinzufügen einer Richtlinie hier und stellen Sie sicher, dass es wird oben ausgerichtet. Ich kann visuell sehen, dass es auch auf beiden Seiten gleich ist. Also werde ich den Galerie-Text dort hinterlassen, und das war's. Unser Logo ist jetzt fertig. Lassen Sie uns voran und setzen Sie dies in eine neue Ebenengruppe namens Logo. Wir können dies jetzt zu unserem Projekt hinzufügen, und ich muss meine Grid-Master-Vorlage öffnen und ich sehe es hier gerade nicht wirklich . Was ich also tun kann, ist, dass ich hierher kommen kann, um die Geschichte zu dokumentieren, und das wird mir noch viel mehr Dateien zeigen, die ich in der Vergangenheit geöffnet habe. Und ich kann durch diese navigieren, um diese Grid-Master-Vorlage zu finden und sie dann direkt von hier aus öffnen , anstatt sie auf meiner Festplatte zu suchen. Also sehe ich es hier. Eigentlich ist das meine PST-Datei. Also hier ist es, Grid Dot Exe CF. Wenn ich also darauf doppelklicke, wird diese Vorlage geöffnet. Und jetzt kann ich mein Logo von hier nehmen und es zu den Dokumenten. Ich ziehe es einfach da hin und schiebe es einfach nach oben. In Ordnung? Jetzt, da wir mit unserem Logo fertig sind, werden wir weitermachen und an der Kopfzeile im nächsten Tutorial arbeiten. Also, wenn du bereit bist, das zu tun, lass es uns tun 77. Überschrift: Hallo und willkommen zurück. In Ordnung, wir werden weitermachen und an unserer Kopfzeile arbeiten. Jetzt fügen wir unsere primäre Navigation sowie eine sekundäre Navigation hinzu. Also werde ich Ihnen auf dem Weg einige neue Tipps geben und eine neue Tastenkombination für eine bestimmte Funktion erstellen, die wir in jedem Projekt verwendet haben . Und wir haben es immer und immer wieder benutzt. Also werden wir weitermachen und eine neue Tastenkombination dafür erstellen. Aber zuerst, lassen Sie uns voran und erstellen Sie unseren Header-Hintergrund. Erstellen Sie also eine neue Ebene mit dem Namen Header Hintergrund. Lass uns weitermachen und unsere Auswahl treffen. Wir wollen, dass es voll ist. Und dann für die Höhe, werden wir tun 1 50 Gehen Sie voran und greifen, sind dunkelgraue Farbe und füllen Sie es aus. Okay, gehen wir weiter in de Select, bevor wir das in Position bringen. Lassen Sie uns voran und erstellen Sie eine Tastenkombination für diese Tour, die Funktion, die wir immer wieder verwendet haben . Und das ist der Layer, der auf Content-Feature zugeschnitten werden soll. Also haben wir das bei jedem Projekt nonstop verwendet. Also, wenn wir gehen, um zu bearbeiten und wählen Sie Tastenkombinationen. Wir können eine Tastenkombination für diese bestimmte Funktion zuweisen. Also auf der Suche werden wir beschneiden. Von diesen zu dem, dem wir die Tastenkombination zuweisen möchten, ist die Ebenenoption. Wir müssen also hier klicken, um diesem speziellen Werkzeug oder Feature einen Tastenanschlag zuweisen zu können. Ursprünglich dachte ich vielleicht den Buchstaben C, aber das wird für das Ernte Werkzeug verwendet. Stattdessen können wir die Umschalttaste in Verbindung mit dem Buchstaben C verwenden Halten Sie also Ihre Umschalttaste gedrückt und drücken Sie dann den Buchstaben C. Und jetzt ist das die Tastenkombination für dieses bestimmte Werkzeug. Stellen Sie sicher, dass Sie Tastenkombinationen beim Beenden gespeichert haben, und drücken Sie auf Schließen. Jetzt können wir einfach Shift plus C verwenden, um die Ebenengrenze auf den Inhalt zuschneiden. In Ordnung, gehen wir weiter und bringen das in Position. Gehen Sie weiter und schalten Sie meine Raster für jetzt aus, und gehen Sie weiter und fügen Sie unsere primäre Navigation hinzu. Nun, den Fonds betrifft, versuchen wir die Plaza de Wreg, die wir für das Logo verwendet haben. Aber lassen Sie uns die Größe 24 und wir werden Weiß für die Farbe verwenden. Also lasst uns nach Hause tippen und dann kämpfen Räume Shop und lasst uns einen Blick darauf werfen. Also im Moment ist es irgendwie schwer zu lesen, also müssen wir vielleicht die Größe der Schriftart erhöhen. Also lasst uns voran gehen und versuchen 30 und sehen, ob das jetzt hilft, obwohl das ein wenig hilft, es ist immer noch schwer zu lesen, und der Text konkurriert irgendwie mit unserem Logo, da wir das bereits verwenden besonderen Fonds im Logo. Also möchte ich eine Retro-Typ-Schriftart für die Navigation verwenden, und in diesem Fall denke ich nicht, dass die Verwendung des Logo-Fonds Familie für die Navigation oder sogar für die Titel der Webseite funktioniert . Nun, im vorherigen Projekt, haben wir eine Schriftart verwendet, die dem Branding ähnelt, aber es konkurrierte nicht so sehr, da das Logo auf der linken Seite war und viel kleiner als die tatsächlichen Titel. Aber in diesem Fall sind sie zu nah beieinander, und selbst bei einer großen Größe ist es immer noch schwer zu lesen. Deshalb möchten wir sicherstellen, dass wir die Navigation und Titel sowie den Text leicht lesbar machen . Also werden wir reingehen und das in Oswald ändern und es auf 24 ändern weil ich denke, 30 ist zu groß. So ist es viel einfacher zu lesen im Vergleich zu dem, was wir zuvor hatten. Nun gehen wir weiter und fügen Sie unsere anderen Navigationsmenü-Elemente hier auf der rechten Seite. Aber bevor wir das tun, lassen Sie uns einfach hier runter gehen und Oswald eingeben, so dass es standardmäßig diese Schriftart ist, wenn wir mehr Text hinzufügen . Also gehen wir voran und tippen Sie über fünf Räume und in Kontakt. Jetzt stellt sich die Frage, wie richten wir all diese Informationen aus? Möchten wir es an den Rasterspalten ausrichten, oder müssen wir etwas anderes tun? Also lasst uns voran gehen und eine Zeile zur dritten Spalte und zur dritten von der letzten Spalte hier drüben. Und schauen wir uns an, was passiert, wenn wir das tun. Ich werde das da hinstellen, und dann muss dieser ein bisschen nach rechts gehen. Ich werde beide mit meinem Ausrichtungswerkzeug auswählen, damit ich sie unten ausrichten kann. Jetzt muss ich alle auswählen. Schnappen Sie sich meine Ausrichtungsspitze wieder, damit ich mein Logo in die Mitte dieser Auswahl online stellen kann. In Ordnung, gehen wir zurück zu unserem Lima-Tool und klicken Sie auf einen der Navigationselemente. Verschiebung. Klicken Sie auf Ihr Logo, damit Sie es am unteren Rand der Menüpunkte ausrichten können. In Ordnung, jetzt, wo wir alles richtig ausgerichtet haben, bin ich mir nicht sicher, ob Sie es bemerken können, aber das Layout ist momentan unausgewogen. Wenn wir hier hineinzoomen und genauer hinschauen, kann ich sehen, dass es auf dieser Seite mehr Platz gibt als auf der Seite. Obwohl wir alles in der Mitte und über die richtigen Säulen ausgerichtet haben. Es gibt noch zusätzlichen Platz hier, und wenn wir unser Messwerkzeug hier nehmen und ausmessen, habe ich 125 Pixel dort und dann auf dieser Seite habe ich 97, also gibt es 28 weitere Pixel Platz auf der Seite. Also, wie beheben wir das? Nun, das Problem ist, dass unsere Navigationsmenüelemente eine andere Anzahl von Zeichen in ihnen und verschiedene Zeichen im Allgemeinen, die unterschiedliche Größen haben , so dass das schafft das Ungleichgewicht. Die Frage ist also Verschieben wir die primäre Navigation hier rechts, weiter zum rechten Zehe, fügen Sie mehr Platz hinzu oder entfernen Sie diese oder nach rechts? Wenn wir das tun, wird alles nicht richtig im Browser selbst zentriert sein. Also wird es wieder unausgewogen sein. Und ich denke, das wird viel deutlicher sein als das aktuelle Abstandsdilemma, das wir gerade haben. Das würde ich also tun. Ich würde unser Logo nehmen und es direkt zwischen den beiden Seiten unserer primären Navigation zentrieren , und das wird es ausgleichen. Aber wenn Sie insgesamt verkleinern, werden Sie irgendwie sehen, dass das Logo nicht im Browser zentriert ist, sondern weil der Abstand hier oben auf der linken und der rechten Seite so viel weiter auseinander liegt, wird es nicht so auffällig sein, wie es ist jetzt, also ist es das kleinere Übel der drei Optionen. Also werde ich voran gehen und eine Auswahl treffen zwischen meiner Navigation und was dann? Das Ausrichtungswerkzeug Ich kann es auswählen und an der Mitte unserer Auswahl ausrichten, so dass es hier viel ausgeglichener wird. Und obwohl es im Browser nicht ausgewogen ist, ist es nicht so auffällig wie vorher. Wenigstens ist das meine Meinung. Also diese Luft Dinge, die Sie sich entscheiden müssen, basierend auf dem, was Sie sehen, und Ihrer kreativen Vision. Die andere Lösung besteht darin, alle unsere primäre Navigation auf eine Zeile zu setzen und dann mit unten , über nach links oder rechts, so dass Sie diese Option auch haben. In Ordnung, lassen Sie uns weitermachen und unsere sekundäre Navigation erstellen. Wir werden uns einloggen. Lassen Sie uns drei Leerzeichen machen Schrägstriche drei Leerzeichen vorwärts. Ich werde das hier in fünf Felder auf beiden Seiten ändern und dann deinen Fluchtschlüssel drücken . Und lasst uns das jetzt nach oben bewegen, denn das ist unsere zweite Molkereinavigation. Es sollte nicht so groß sein wie unsere primäre Navigation, also müssen wir wieder hineingehen und das verkleinern. In diesem Fall werde ich 14 für die Größe tun, wenn wir verkleinern und einen Blick darauf werfen, das Problem ist, es ist schwer zu lesen, Also diese Schriftart Oswald ist keine gute Schrift, um bei kleineren Größen zu verwenden, ist es viel einfacher, Lesen Sie bei einer größeren Größe. Also, was wir tun werden, ist, dass wir reingehen, doppelklicken Sie auf Anmelden, und dann hier untenkönnen wir es in und dann hier unten Eisenbahn ändern, und jetzt können Sie sehen, dass das viel einfacher zu lesen ist als vorher. Jetzt brauchen wir und ein Shopping-Kurt bis zum Ende davon. Und ich werde mir eins davon schnappen, die wir jedes frühere Projekt benutzt haben, was das erste Projekt ist. Und ich werde den Shopping-Kurt schnappen und ihn rüber bringen, damit du das Gleiche machen kannst . Oder Sie könnten einfach ein neues durch Google-Bilder finden. Jetzt, ganz schnell. Bevor wir das hier aufstellen und ausrichten. Ich habe jetzt noch einen kurzen Tipp für dich. Ich habe mein Verschiebungswerkzeug ausgewählt, und ich habe es früher ausgewählt oder Guide ausgewählt. Manchmal, wenn der Inhalt dieser Schicht Israel klein oder vielleicht gibt es eine Lücke zwischen verschiedenen Elementen. Manchmal ist es schwierig, den Inhalt dieser Ebene auszuwählen und zu verschieben Stattdessen werden Sie am Ende etwas anderes verschieben, denn wenn Sie eine Ebene oder eine Hilfslinie auswählen, wird die Ebene ausgewählt, auf die Sie klicken. Wenn wir zum Beispiel hierher kommen und ich versucht habe,diesen Teil unserer Navigation auszuwählen und ich in der Mitte klicke,dann wählt Ashley dieHintergrundebene aus und verschiebt sie stattdessen. zum Beispiel hierher kommen und ich versucht habe, Wenn wir zum Beispiel hierher kommen und ich versucht habe,diesen Teil unserer Navigation auszuwählen und ich in der Mitte klicke,dann wählt Ashley die Mitte klicke, Also, wenn ich hier runterkomme und versuche, darauf zu klicken , werde ich den Hintergrund verschieben. Manchmal ist es also schwierig, dieses Verschiebungswerkzeug mit dieser Option zu verwenden, um in einigen Fällen eine Auswahl zu treffen . Aber hier ist, wie Sie das umgehen können. Wenn ich diese Hintergrundebene nehme und hier nach oben komme und auf diese Sperroption klicke, wird die Ebene in Position gesperrt, damit ich sie nicht mehr verschieben kann. Also könnte ich das Gleiche mit meinem Kopfzeilenhintergrund machen, und so in Position. Und dann kann ich es nicht auswählen. Aber ich kann etwas anderes auswählen, auf das ich jetzt klicke. Eine andere Sache, die Sie tun können, ist, dass Sie Ihre Hintergrundebene hier und eine Farbe darauf nehmen können, obwohl es viel ist. Wenn Sie Ihre Ebene jedoch noch mehr schützen möchten, können Sie diese Option hier auswählen, der die Pixel dieser Ebene gesperrt werden. Jetzt kann ich dieser Ebene eine beliebige Farbe hinzufügen. Und es sagt sogar hier unten, dass diese aktiven Ebenen Pixel gesperrt sind. Also, wenn ich versuche, es zu bewegen, wirst du noch eine Nachricht bekommen. Die Position der aktiven Ebenen ist gesperrt, sodass Sie nicht versehentlich eine bestimmte Ebene oder Ebenen verschieben oder versehentlich zusätzliche Pixel hinzufügen können. Da Sie mit vielen Ebenen wie in früheren Projekten arbeiten, versuchen Sie manchmal, etwas zu verschieben, und vielleicht haben Sie die falsche Option ausgewählt und am Ende verschieben Sie eine Ebene, die Sie nicht verschieben möchten, und Sie erfahren es nicht wirklich, bis Sie in die letzte Phase kommen, wo Sie das endgültige Design optimieren und dann müssen Sie zurückgehen und es reparieren. Also wollte ich das nur mit Ihnen teilen, damit Sie wissen, wie Sie Ihre Ebenen schützen und die zusätzliche Arbeit am Ende Ihres Projekts minimieren können. In Ordnung, gehen wir weiter und gehen zurück zu unserem Shopping-Kurt-Icon und bewegen es in Position. Lassen Sie uns voran gehen und eine Linie dies mit unseren Guides und ihrer Spalte, so dass alles perfekt ist. Ich muss auch meine sekundäre Navigation hier greifen und sicherstellen, dass sie zwischen den Schrägstrichen und dem Anfang ihres Symbols richtig angeordnet ist . Da es nicht der Fall ist, muss ich es überlegen. Und deshalb haben wir die fünf Leerzeichen am Ende hinzugefügt, damit wir sehen können, dass die Layer-Grenze hier drüben ist und nicht hier. In Ordnung, lassen Sie uns weitermachen und beginnen, unsere Schichten zu organisieren. Wir müssen auch unseren Warenkorb hier nehmen und es Zehe weiß ändern, so dass Sie sich erinnern können, wie Sie dies tun. Was wir tun werden, ist einen neuen Overlay-Hintergrund zu erstellen. Wir werden es dann mit weißem Klick füllen. OK, lassen Sie uns eine neue Ebenengruppe namens Overlay erstellen und dann diesen übermäßigen Hintergrund erfassen und den Füllmodus in Addition ändern. Okay, wir haben jetzt unseren weißen Einkaufswagen. Werfen wir einen Blick auf unseren Header bisher. Sieht aus, als hätten wir noch eine Sache zu tun, und das ist, unsere sekundäre und primäre Navigation ein wenig mehr zu trennen, weil es irgendwie miteinander konkurriert, und es ist ein wenig unausgewogen, weil wir mehr Inhalt hier auf der rechten Seite, so dass diese Seite des Designs schwerer ist. Es ist irgendwie nach rechts gelehnt, weil es hier mehr Elemente oder mehr Inhalte gibt. Eine Möglichkeit, das zu beheben, besteht darin, einen anderen Hintergrund für die sekundäre Navigation zu erstellen diesen Inhalt darin zu enthalten, und das sollte dazu beitragen, ihn ein wenig mehr auszugleichen. Lassen Sie uns also eine neue Ebene namens sekundären Hintergrund erstellen und sie wieder in Transparenz ändern . Klicken Sie auf OK, und füllen Sie es mit derselben dunklen Farbe aus. Gehen wir weiter und machen die Höhe davon 40 und wir werden diese dunkelgraue Farbe verwenden. In Ordnung. Jetzt können wir unsere neuen Tastenkombinationen verwenden, also Shift plus C gehen voran und bewegen Sie das nach oben. Wir müssen dies unter diese Gruppenebene verschieben. Gehen wir weiter und vergrößern Sie hier, damit wir unsere sekundäre Navigation zwischen oben und unten ausrichten können . Hier greifen Sie Ihr Ausrichtungswerkzeug und gehen Sie weiter und klicken Sie auf die sekundäre Navigation. Das einzige Problem besteht darin, dass wir dieses neue Overlay erstellt haben. Wir müssen den Inhalt wieder zuschneiden, um sich mit dem Inhalt selbst zu vereinen. So greifen Sie Ihre sekundäre Navigation gruppierten Layer. Verwenden Sie Ihre neue Tastenkombination Shift plus C. Jetzt können wir es auswählen, und die Linie Mitte des Ziels kann voran gehen und de wählen. Was wir jetzt tun müssen, ist und ein Schlagschatten, um diese Trennung zu schaffen. Das einzige Problem war, dass wir uns ein wenig vor uns haben, indem wir den Inhalt auf diesen Inhalt zuschneiden. Also war ich wirklich aufgeregt über die Verwendung der neuen Tastenkombination. Lassen Sie uns also voran gehen und rückgängig machen, dass mit Ebene Ebene zwei Bildgröße. Lassen Sie uns gehen, um unsere Filter sind Schlagschatten und fügen Sie einen Schlagschatten. Das ist also ein bisschen zu groß für mich. Ich werde den X- und Y-Zugang fallen lassen, und das sieht ziemlich gut aus. Es ist eine Art von Zoom hier und sehen, wie es den Rest des Designs beeinflusst, so dass es alles ziemlich gut aussieht. Also werde ich alles andere auf der Standardeinstellung belassen und jetzt auf OK klicken Wenn Sie möchten, können Sie fortfahren und Ihre Tastenkombination verwenden, um den Inhalt zu beschneiden. Aber wie Sie wissen, schneidet es den Boden an den Rand oder den Boden dieses Schlagschattens, so dass definitiv dazu beigetragen hat, es ein wenig auszugleichen. Es ist immer noch ein wenig aus dem Gleichgewicht. Es ist immer noch ein bisschen schwer hier, aber nicht so viel wie vorher. Und es gibt definitiv Trennung zwischen sekundärer und primärer Navigation. Das Einzige, was ich nicht wirklich mag, ist der Abstand des Logos, weil wir hier unten mehr Platz haben als hier oben. Also lassen Sie uns voran und die Linie das Logo in die Mitte der oberen und unteren hier gehen. Alles klar, das sieht jetzt viel besser aus, und ich denke, wir sind alle fertig. Alles, was wir tun müssen, ist unsere Ebenen hier zu organisieren und sie in eine neue Ebenengruppe namens Header zu setzen . Herzlichen Glückwunsch. Wir sind jetzt mit dem Kopfteil dieses Entwurfsprojekts fertig. Im nächsten Projekt werden wir mit der Arbeit an dem Schieberegler des Heldenabschnitts beginnen, und das wird viel Zeit dauern, dies zu tun. Wir werden das wahrscheinlich in zwei, vielleicht drei verschiedene Tutorials aufteilen . Also, wenn du bereit bist, damit anzufangen, lass es uns tun 78. Herde Teil 1: Hallo und willkommen zurück. In Ordnung, also werden wir weitermachen und anfangen, an der Heldenabteilung zu arbeiten, die unseren Schieberegler mit verschiedenen Produkten enthält. Aber bevor wir tatsächlich auf Schieberegler beginnen, möchte ich zuerst über den Hintergrund sprechen, weil ich einen strukturierten Hintergrund auf der Rückseite habe , und ich möchte Ihnen zeigen, wie und diese verschiedenen Arten von Texturen oder Mustern in Gimp indem Sie vorgefertigte Muster in den Gimp installieren, die Sie dann mit Ihrem Eimer-Füllwerkzeug verwenden können. Sie können es sogar mit Ihren Pinselwerkzeugen, Ihrem Pfad, Werkzeug und vielem mehr verwenden. Also werde ich Ihnen die Ressource zeigen, die ich verwenden möchte, um diese Arten von Mustern kostenlos zu bekommen . Also lasst uns voran gehen und das überprüfen. Und hier ist die Seite hier. Top Schwanz Punkt com vorwärts Schrägstrich Designer Schrägstrich subtile Muster. Jetzt habe ich eine Suche nach Leinen gemacht, die die Anzahl der Muster für diese Art von Textur oder dieses Muster insgesamt einschränkte . Moment hat die Website 491 Muster, und sie fügen immer mehr Muster auf einer regelmäßigen Basis hinzu. Erst vor ein paar Monaten gab es nur etwa 470 Muster. Es ist also eine großartige Ressource, um freie Muster zu finden, die Sie für Ihre Webdesign-Projekteverwenden können , die Sie für Ihre Webdesign-Projekte , insbesondere für Hintergrundtypmuster, da sie eine Datei bereitstellen, die ziemlich klein ist, etwa 50 Pixel x 50 Pixel oder 100 Pixel mal 100 Pixel. Aber die Art und Weise, wie dieses Muster entworfen wurde oder diese Datei entworfen wurde, wird es nahtlos, wenn Sie es von 100 Pixel auf 1400 Pixel vergrößern, und es wird automatisch für Sie durchgeführt, basierend auf der Art, wie die Datei erstellt wird. Lassen Sie uns also voran gehen und laden Sie eines dieser Muster herunter. Ich zeige Ihnen, wie Sie es installieren und Gim, und dann beginnen wir mit der Arbeit an der Farbe dieses bestimmten Musters, weil , wie Sie sehen können sie, wie Sie sehen können, meist dunkelgrau, schwarz und weiß sind und keine Farbe haben. Aber ich werde dir zeigen, wie du Farbe in dieses Muster hinzufügst. Also lassen Sie uns voran und laden Sie Bettwäsche mit niedrigem Kontrast herunter. Also entweder eine Suche nach diesem hier oder nur Lenin oder einfach nur Leinen und General. Gehen Sie weiter und laden Sie es herunter, und dann müssen wir die Datei entpacken. Im Inneren von hier finden Sie drei Dateien, lesen Sie mir Text und dann zwei Dateien für dieses Muster. Also diese Datei hier zu X das eigentliche Muster ist doppelt so groß. Das ist nicht das, was wir wollen. Die, die wir wollen, ist diese hier. Also werde ich fortfahren und das in mein Dokument ziehen, um zu sehen, welche Größe es ist. Und es sieht so aus, als wäre es etwa 250 mal 250 Pixel hoch. Und im Moment wird es nicht einfach sein, das voll zu machen und den gesamten Heldenbereich mit dieser einen Datei zu füllen . Und deshalb wollen wir in unsere Muster eingehen und es so anwenden. Wenn Sie also zu Ihrem Eimer gefüllten Werkzeug gehen, werden Sie hier unten verschiedene Optionen sehen, um mit dem Vordergrund, dem Hintergrund und dann einer Musterfüllung zu füllen. Also habe ich diese bereits installiert. Lassen Sie mich Ihnen zeigen, wie Sie dies installieren, damit Sie es dann mit Ihrem Eimerfüllungstool anwenden können. Also haben wir einen bestimmten Ordner, in den wir unsere Muster einfügen müssen, und das ist das Verzeichnis, das Sie folgen müssen, um das Muster in Gimp zu installieren. Sie möchten also zu Ihren lokalen Datenträgerbenutzern gehen? Dein Benutzername? AP-Datenroaming gimp 2.10 und dann Muster. Also nehmen Sie diese Datei, die Sie heruntergeladen haben, Sie gehen nach rechts, klicken und kopieren und dann zu diesem Musterhalter gehen und fügen Sie sie ein. So installieren Sie es für PC-Benutzer. jetzt Wenn Siejetztauf einem Mac sind, gehen Sie zu den Benutzern. Benutzername, Bibliotheksanwendungen, Unterstützung gimp 2.10 und dann Muster. Und dann können Sie diese Datei direkt in diesen Ordner einfügen. Und dann, wenn Sie das im richtigen Ordner haben, müssen Sie zurück zu Gimp gehen und zu Ihrem Pattern-Panel gehen, das von Windows Doc Kable Dialogen zugegriffen werden kann und dann Muster auswählen. Sie werden ein Fenster wie dieses erhalten, und dann möchten Sie auf diese Schaltfläche zum Aktualisieren von Mustern klicken, die alle Muster aktualisiert, die Sie zu diesem Ordner hinzugefügt haben, und dann müssen Sie nur dieses bestimmte Muster hier finden , um sicherzustellen , dass Sie es im richtigen Ordner haben. Also meine taucht hier auf, und ich kann den Namen dieser Datei hier sehen. Es wurde also erfolgreich installiert. Okay, jetzt, da Sie das erledigt haben, müssen Sie nur eine neue Ebene erstellen. Ich nenne es Heldenhintergrund, fülle es mit Transparenz, dann schnappe dir deinen Eimer. Füllen-Werkzeug. Wechseln Sie zu Ihren Werkzeugoptionen. Wählen Sie das Muster Phil. Klicken Sie auf dieses Icon. Suchen Sie das Muster, wählen Sie es aus und dann können Sie diesen Hintergrund mit diesem Muster füllen. Das ist also der erste Schritt, um Ihr Muster in Ihr Designprojekt zu bringen. Jetzt müssen wir dieses Muster einfärben, so dass es nicht diese einfache langweilige graue Farbe ist, und es ist mehr von dieser orangefarbenen Farbe hier, und wir werden das mit einer Reihe von verschiedenen Overlays tun. Lassen Sie uns also voran und erstellen Sie eine neue Ebene namens Overlay eins. Wir werden mit diesem leuchtend orangefarbenen Farbtyp in dieser HTML-Nummer direkt hier ausfüllen und dann mit dieser Vordergrundfarbe ausfüllen. Sie möchten zu den Werkzeugoptionen zurückkehren und sicherstellen, dass Sie die Vordergrundfarbe ausgewählt haben . Jetzt müssen wir den Mischmodus dieser Ebene zu weich ändern, Licht und Wir wollen auch die Deckkraft der Hintergrundebene ändern, so dass wir es viel leichter machen können . Ich will es nicht so dunkel. Also in diesem Fall werde ich 90 machen und ich werde ein weiteres Overlay namens Overlay erstellen, um es mit der gleichen Farbe auszufüllen . Und das wird mir erlauben, diese Farbe viel heller Orange zu machen, als sie jetzt ist . Also werden wir den gleichen Mischmodus machen, ein weiches Licht, und dieses Mal werden wir die Deckkraft auf 30 fallen lassen. also das zweite Overlay hinzufügen, können wir diese Farbe viel heller machen, als es mit einem einzigen Overlay war. Wenn Sie also Ihre Farben mit Ihren Mustern mischen, können Sie experimentieren und verschiedene Kapazitätseinstellungen sowie verschiedene Mischmodi ausprobieren , um verschiedene Farbschemata und verschiedene Effekte zu entwickeln, indem Sie verschiedene Mischmodi und verschiedene Kapazitäten. Das ist also etwas, mit dem Sie selbst experimentieren müssen, um zu sehen, wie Sie verschiedene Arten von Farben und Intensitäten dieser Farben finden können. Aber das ist das Farbschema, das wir vorerst für unseren Heldenhintergrund verwenden werden. Sobald Sie dies getan haben, gehen wir weiter und beginnen mit der Erstellung des Schiebereglers im nächsten Tutorial. Wenn du dafür bereit bist, lass es uns tun. 79. Herde Teil 2: Hallo und willkommen zurück. Ordnung, das ist der Moment, in dem du auf dein ganzes Leben gewartet hast. Nun, vielleicht nicht so lange, aber wir werden jetzt endlich anfangen, an der Erstellung unseres Retro-Schiebereglers zu arbeiten. Also lasst uns weitermachen und loslegen. Wir werden das wahrscheinlich in zwei Teile aufteilen, weil es eine ganze Weile dauern wird, um all die verschiedenen Elemente zu erstellen, die wir für den Schieberegler benötigen. Lassen Sie uns also voran gehen und beginnen, indem Sie unseren Hintergrund für den Schieberegler erstellen. Also lassen Sie uns eine neue frühere S E erstellen. Ich werde diese Schichten nehmen und sie zusammenfassen, um sie aus dem Weg zu bringen. Nennen wir es Held Hintergrund. Jetzt haben Sie vielleicht bemerkt, wenn wir diese drei Ebenen, jede Gruppenebene, die Farbe und die Kapazität des gesamten Hintergrunds geändert haben. Und das liegt daran, dass die Mischmodi nicht unbedingt so funktionieren, wie sie es zuvor getan haben, weil wir diese Hintergrundebene nicht auch dort haben. Wenn wir das also reinlegen, bekommen wir dann das Ergebnis, das wir wollen. Aber wir wollen nicht unbedingt die Hintergrundebene in diese Gruppe die Ebene einfügen, da es andere Abschnitte darunter geben wird, und sie werden ausgeblendet werden. Also lassen Sie uns rückgängig machen, dass mit Commander Control und dem Buchstaben Z. Also die Lösung dazu ist, Ihren Helden Hintergrundgruppe Delayer zu greifen, der in den Mischmodus geht und dann durchgegangen ist. Das wird also alle Elemente innerhalb dieser Gruppe übergeben. Schichten Sie es durch, so dass die Hintergrundebene so angewendet wird, wie wir es mit den anderen Ebenen wollen . Lassen Sie uns auch die Höhe unseres Heldenabschnitts definieren, indem Sie eine Richtlinie auf 700 ziehen und wir müssen auch unseren Hintergrund hier auf diese Höhe eingrenzen. Lassen Sie uns also unser Rechteck-Auswahlwerkzeug greifen und eine Auswahl in diesem Bereich erstellen. Und dann werden wir eine Ebenenmaske zu der Held Hintergrund gruppierten Ebene hinzufügen. Stellen Sie sicher, dass Sie eine Auswahl ausgewählt haben, klicken Sie auf Que de Select mit Commander Control Andy hinzufügen und schalten Sie Ihre Führungen aus. Okay, jetzt können wir weitermachen und mit dem Schieberegler beginnen, also das erste, was ich tun möchte, ist einen neuen Hintergrund zu erstellen, der als kleinerer Hintergrund bezeichnet wird. Und lassen Sie uns die Größe dieses Hintergrunds acht Spalten breit machen. Also, gehen wir einfach voran und tippen Sie die Dimensionen ein, die 775 mal 4 75 Es wird das hier oben bewegen, also ist es neben der Heldenabteilung, und dann werden wir uns hier eine leichte Cremefarbe holen. Dies ist der Hex, eine Dezimalzahl, die ich ausgewählt habe. Also gehen Sie weiter, tippen Sie das ein und dann gehen Sie weiter und füllen Sie es aus. In Ordnung, jetzt müssen wir die Ebenengrenze beschneiden, damit wir das mit Shift Plus C tun können Machen wir eine Auswahl um unseren Heldenbereich und wählen wir unsere Hintergrundebene mit unserem lahmen it-Werkzeug, und dann können wir die Mitte und Mitte des Ziels. Als Nächstes möchte ich einen Bildplatzhalter erstellen, der als Leitfaden für die Dimensionierung unserer Produktbilder dient, damit wir eine neue Ebene mit dem Namen Bildplatzhalter erstellen können. Und dann, für diesen werden wir es 7 20 mal 3 60 dimensionieren und lassen Sie uns voran gehen und es mit Schwarz füllen , und vergessen Sie nicht, den Inhalt auch zu beschneiden. Shift plus C. Also lassen Sie uns voran und messen eine bestimmte Menge an Abstand für den oberen, und dann richten wir es an der Mitte aus. Also werde ich 20 Pixel für den Abstand an der Spitze tun. Und was dann? Ihr Ausrichtungswerkzeug. Lassen Sie uns voran und wählen Sie unseren Hintergrund, klicken Sie dann auf den Bildplatzhalter, ändern Sie es in das erste Element und dann eine Linie Mitte des Ziels. Wir werden in einer Minute unser Bild hinzufügen. Ich möchte nur zuerst ein paar andere Elemente hinzufügen. Okay, wir werden jetzt unseren Kauf-Button erstellen. Lasst uns unser Ellipsenwerkzeug greifen, eine Auswahl treffen. Lassen Sie uns die Größe 1 25 mal 1 25 Lassen Sie uns auch eine neue Ebene für sie erstellen, und dann werden wir es mit einer dunkelgrauen Farbe füllen. Also werde ich diese Farbe hier verwenden. Gehen Sie voran und füllen Sie es jetzt aus, bevor wir de select. Was ich tun möchte, ist, dass ich einen Strich um ihn herum hinzufügen möchte, der die gleiche Farbe wie ihr Hintergrund hat, und das wird uns einen Effekt geben, wo es aussehen wird, als würde es einen Teil des Bildes ausschneiden . Also gehen wir nach oben, um die Auswahl der Kontur zu bearbeiten. Versuchen wir vier, und wir müssen auch sicherstellen, dass wir diese Farbe ausgewählt haben. Verwenden Sie also Ihre Pipette Werkzeug, um auf den Hintergrund zu klicken, um diese Farbe zu erhalten und dann gehen Sie vor und klicken Sie auf Stroke de Select mit Commander Control und dem Buchstaben D. So gibt es unsere von Brötchen, die ziemlich cool aussieht. Und wie ich schon sagte, es sieht so aus, als würde es den Teil des Bildes ausschneiden, also ist das ziemlich cool. In Ordnung, gehen wir weiter und drücken Shift plus C, um die Lear-Grenze zu beschneiden. Lassen Sie uns etwas Text hier auf der linken Seite hinzufügen, und dies wird den Zustand des Plakats darstellen. Also werde ich eine große Schriftart verwenden, und wir werden Oswald fett verwenden und lassen Sie es auf 60 für die Größe setzen und dann dunkelgraue Farbe sind . Also in allen Großbuchstaben, ich werde es gemeint, und dann können wir einfach voran gehen und das nach oben bewegen, und ich möchte sicherstellen, dass es an der linken Seite unseres Bildplatzhalters ausgerichtet ist. Die Ebenengrenze ist also eine Linie dazu, aber ich möchte, dass der eigentliche Buchstabe darauf ausgerichtet ist, also werde ich ihn direkt dort platzieren. Ich werde es auch oben unten ausrichten. Jetzt wieder, wir haben mehr Platz in der Ebenenbegrenzung statt hier unten angezeigt. Aber wenn wir Shift plus C drücken, wird das die Ebenengrenze auf den Text zuschneiden. Das ist also ein effizienterer und schnellerer Weg, im Vergleich zu der Art, wie ich dich vorher gelehrt habe. Obwohl es funktioniert, ist es weniger effizient. Versuchen Sie also immer, den Inhalt zuschneiden, um die Ebenengrenze auf die Pixel dieser Ebene zuzuschneiden . So können wir jetzt unser Rechteck-Auswahlwerkzeug verwenden, unsere Auswahl treffen und dann Minze mit Ihrem Lima-Werkzeug auswählen. Wir müssen zurück zur Auswahl und einer Linie in der Mitte der Ziele. Okay, lassen Sie uns wählen und gehen Sie weiter und zoomen Sie wieder heraus. Ich werde voran gehen und speichern das mit Commander Control und dem Buchstaben s. Lassen Sie uns voran und schalten Sie unsere Gitter ein, denn was ich tun möchte, ist, dass ich hier einen Absatz erstellen möchte, der die Beschreibung dieses bestimmten Produkts sein wird. Also möchte ich es zu einer bestimmten Größe von vier Spalten breit und 56 Pixel hoch machen. Wir werden also eine neue Form erstellen, um die Größe dieses Textfeldes zu definieren. Ich rufe ein Beschreibungsfeld an, und dann tippen wir 56 ein. Für die Höhe werde ich es mit Dark Grey füllen. Es spielt keine Rolle, denn wir werden das später löschen. Also gehen Sie voran und de Select Commander Control und den Buchstaben D. Und lassen Sie uns voran und eine Linie diese oben am unteren Rand unseres Schiebereglers gehen. Also genau hier. Stellen Sie sicher, dass Sie die Ebenenumgrenzung auch mit Shift plus C zuschneiden, und dann können Sie diese Ebene auswählen und sie in der Mitte des Ziels ausrichten. Okay, Commander Control nd de select. Wir werden die Informationen oder die Beschreibung in nur einer Sekunde hinzufügen, und wir werden das tun, nachdem wir unser Bild bekommen haben. Ich möchte zuerst an ein paar anderen Elementen arbeiten. Also lassen Sie uns unseren Text für unsere jetzt kaufen, Button hinzufügen . Also für diesen, werde ich eine Schriftart namens Kupferplatte verwenden, und es ist eine Retro-Typ von gekämpft, und Sie können dies kostenlos herunterladen, indem Sie eine Google-Suche nach Kupferplattenschriftarten, freien Schriftarten. Und wenn Sie dies nicht bereits installiert haben, können Sie voran gehen und finden, dass, laden Sie es herunter, installieren Sie es, starten Sie Camp und dann kommen Sie zurück und wir gehen weiter und fügen Sie in unserem mittlerweile Text für die Größe ich tun werde 30 und das Farbgewicht. Der erste Buchstabe ist also ein Großbuchstabe und dann Kleinbuchstaben für die nächsten beiden. Gleiche mit jetzt. Obwohl es aussieht, als wären sie alle Großbuchstaben, gibt es immer noch ein bisschen kleiner als die ersten Buchstaben, die als Großbuchstaben definiert sind . Okay, ich mache das kühn, also wähle ich sie alle aus und klicke hier auf Bold. Lassen Sie uns auch voran und eine Linie dies in die Mitte gehen, und ich denke, ich möchte die Menge der Zeilenabstand erhöhen. Also werde ich 0,5 versuchen. Klicken Sie auf die Techie. Das reicht nicht. Also 1.5 2.5 Lasst uns vier versuchen. Und ich denke, das ist gut da. Also vier für den Zeilenabstand. Lassen Sie uns voran und platzieren Sie dies direkt in die Mitte unserer Taste, also werde ich diese Haltung so verschieben, dass sie über der Schaltfläche Jetzt kaufen liegt und dann Ihren Kreis mit dem Ausrichtungswerkzeug und dann den Text und eine Linie Zehe auswählen . Erster Artikel. Lassen Sie uns voran und erstellen Sie eine neue frühere Gruppe für unseren Kauf. Jetzt, Knopf. In Ordnung, lassen Sie uns weitermachen und unsere Navigationstasten auf beiden Seiten ihres Kleiners erstellen. Okay, ich gehe weiter und scrolle hier nach unten und wähle die gruppierte Held Hintergrund Ebene weil ich möchte, dass diese Ebenen hinter unserem Schieberegler liegen. Also werde ich diese linke Navigation aufrufen, und dann werden wir unser Ellipsenwerkzeug verwenden, um eine Schaltfläche zu erstellen, die 65 mal 65 ist. Wir werden es auch mit einer cremefarbenen Farbe füllen, aber ich möchte, dass es dunkler ist, als der Schieberegler jetzt ist. So hebt es sich ein wenig mehr Also für die Farbe. Ich werde die folgenden f sechs e d.. Neun machen . Gehen Sie weiter und nehmen Sie das auf, und dann gehen Sie weiter und füllen Sie diese Farbe ein, und dann können wir de wählen, also ist es sehr ähnlich. Aber wenn wir hier hineinzoomen, können Sie sehen, dass es etwas dunkler ist. Wir werden auch einen Schlagschatten in der zweiten Zehe hinzufügen, ihm helfen, nur ein bisschen mehr hervorzuheben, also lasst uns voran gehen und das so platzieren, dass die Hälfte des Kreises hinter dem Schieberegler versteckt ist. Der einfachste Weg, das herauszufinden, besteht darin, unsere Führungen einzuschalten und die Hälfte dieses Kreises zu messen . Also haben wir 65 gemacht, also sollten 32 Pixel ungefähr die Hälfte sein. Es sieht so aus, als ob ich ein bisschen zu weit will. Ich werde diesen Leitfaden direkt hier stellen. Ich werde auch die Ebenengrenze mit Shift plus C beschneiden und dann verschieben wir sie einfach in den Bereich, den wir gerade gemessen haben. Okay, lassen Haider Führer. Und jetzt müssen wir einen Pfeil erstellen, der nach links zeigt. Um das zu tun, werden wir unser Rechteck auswählbar verwenden. Lassen Sie uns ein Rechteck erstellen, das 19 mal 19 ist. Ich werde die orangefarbene Farbe auswählen, die wir zuvor für den Hintergrund verwendet haben. Lassen Sie uns eine neue Ebene namens links Errol erstellen und dann gehen Sie voran und füllen Sie es aus. Gehen Sie voran und de Select Commander Control und D und lassen Sie uns beschneiden. Die spätere Grenze wurde plus C geliefert. Ich kann die Farbe momentan nicht sehen, und das liegt daran, dass sich die Ebene hinter dem Schieberegler befindet. Also muss ich fortfahren und das hier rüber bewegen, also werde ich das nur mit meiner Bewegung und aktivem Layer packen, und jetzt können wir die Orange sehen. Alles klar, lassen Sie uns diese Ebene duplizieren. Lassen Sie uns voran und zoomen Sie ganz nah hinein. Ordnung, jetzt werden wir wieder eine Messung vornehmen, weil ich diese aktuelle Ebene nach unten in die rechten drei Pixel verschieben möchte . Nehmen wir also unser Messwerkzeug und messen Sie drei Pixel aus. Lassen Sie uns eine Anleitung hier und dann unten drei Pixel und eine weitere Anleitung hinzufügen. Und jetzt wollen wir es mit unserem Verschiebungswerkzeug direkt in diesen Bereich bewegen. Lassen Sie uns fortfahren und eine neue Ebenengruppe erstellen. Nennen wir es links Arrow. Wir werden beide drinnen platzieren. Ich werde diesen einen Pfeil nach links nennen, ausschneiden, und dann müssen wir den Mischmodus ändern, um das Quadrat auszuschneiden. Gehen wir also zum Mischmodus und wählen Sie Farbe oder Rennen. Okay, jetzt können wir diesen Pfeil nach links nehmen und ihn um 45 Grad drehen, also zeigt er nach links. Also lasst uns unser Drehwerkzeug greifen, das genau hier ist und meine Tastenkombination dafür ist Commander Control und der Buchstabe T und dann für den Winkel, den wir 45 eingeben müssen. Leider wird das machen, um es zu zeigen. Versuchen wir also minus 45 Click Tab. Und da gehen wir, unsere Pfeile zeigen jetzt in die richtige Richtung. Gehen Sie voran und klicken Sie auf, Drehen und dann werde ich es nur manuell in Position bewegen, damit ich es direkt in der Mitte bekommen kann . Mal sehen, ob wir unsere Ausrichtungswerkzeuge verwenden können, um das von oben nach unten auszurichten. Ich werde mein Erleuchtungswerkzeug greifen und ich werde auf die Schaltfläche Shift klicken, auf den Pfeil klicken und dann einen liegenden Zehe ersten Gegenstand , der Mitte des Ziels sein würde. Also, das richtet es aus. Ich werde jetzt mein Umzugswerkzeug schnappen, und ich werde einfach nach links gehen. Ein paar Klicks und ich denke, das sieht gut aus. Gehen Sie weiter und zoomen Sie heraus, damit ich einen kurzen Blick auf das werfen kann, was wir bisher haben. Das sieht also ziemlich gut aus. Ich möchte den Pfeil vielleicht etwas größer machen. Also, was ich tun kann, ist, ich wieder hineinzoomen kann. Und jetzt mit deinem Move-Werkzeug. Klicken Sie einfach auf diese Ebene und verwenden Sie die rechte Pfeiltaste, um sie über ein Pixel nach dem anderen zu bewegen bis Sie mit der Dicke dieses Pfeils zufrieden sind. Also werde ich zu Pixeln mehr nach rechts gehen. Gehen wir weiter und zoomen heraus und werfen einen Blick darauf, und ich denke, das sieht viel besser aus. Also werde ich weiter gehen und meinen so verlassen. Du kannst tun, was du denkst, am besten aussiehst. Jetzt müssen wir diese Navigation nehmen und sie in eine neue Ebenengruppe namens Left Errol einfügen. Lassen Sie es uns duplizieren und umbenennen. Und das stimmt. Wir werden es mit dem rechten Pfeil umbenennen. Lassen Sie uns voran gehen und und eine Anleitung zum oberen Rand dieser Schaltfläche hier, so dass wir es hier auf der rechten Seite als auch ausrichten können . Okay, ich werde nur meine schnappen. Verschieben, Werkzeug, Stellen Sie sicher, dass Sie aktive Ebenen ausgewählt haben, und ich werde es hier auf die rechte Seite verschieben. Ok. In Ordnung. Lassen Sie uns voran und messen Sie 36 Pixel, um sicherzustellen, dass wir genug von der Schaltfläche haben, die angezeigt wird, sieht nicht so aus wie ich. Ich werde einen Führer dort platzieren und ihn dann einfach in Position bringen. Das einzige Problem ist, dass wir den Pfeil nicht sehen können. Um das zu beheben, müssen wir nur die Ebene horizontal drehen. Gehen Sie also auf Ebene, wählen Sie, transformieren Sie und wählen Sie dann horizontal spiegeln. Ihr Hass. Nun, da unsere Navigation abgeschlossen ist, lassen Sie uns gehen und setzen Sie diese beiden Schaltflächen und eine neue Ebenengruppe namens Slider Navigation. Lassen Sie uns voran und speichern Sie es wieder, Commander Control und den Buchstaben s Also haben wir die Mehrheit der Elemente für unseren Schieberegler. Wir haben hier nur einige grafische Elemente hinzuzufügen. Ein Absatz, unser Bild und dann wird es getan werden. Gehen wir also weiter und beenden Sie den Rest des Schiebereglers im nächsten Tutorial. 80. Herde Teil 3: Hallo und willkommen zurück. In Ordnung, wir gehen weiter und beenden unseren Schieberegler und lassen uns weitermachen und unser Produktbild hinzufügen . Wir werden eine Google-Bildsuche für das letzte A klingende sie Monster machen, und wir werden dieses hier auswählen. Es ist 7 40 mal 5 60 Lassen Sie uns das Bild kopieren und einfügen. Stellen Sie sicher, dass Sie diese Ebene nehmen und sie früher auf neu setzen und dann mit dieser Ebene nach oben scrollen . Also ist es über allem anderen, und dann werden wir einfach unser Verschiebungswerkzeug verwenden, um es in Position zu bringen, aber auch die Deckkraft nach unten fallen lassen, so dass wir den Bildplatzhalter dahinter sehen können, der es uns ermöglicht, das Bild zu beschneiden oder die Bild genau so, wie wir wollen. Ich werde das einfach ein wenig nach unten und nach rechts bewegen, vielleicht ein bisschen mehr rechts da runter und dann gehen wir zu 100% auf die Deckkraft zurück und dann werde ich meinen Bildplatzhalter greifen. Lassen Sie uns das unter die Bildebene legen und ich werde Ihnen eine etwas andere Art zeigen , Ihr Bild auf eine bestimmte Größe zuschneiden. Da wir also bereits einen Bildplatzhalter mit der genauen Größe erstellt haben, müssen wir nun eine Auswahl treffen. So können wir mit der rechten Maustaste auf diese Ebene klicken und Alfa auswählen, um auszuwählen, und das wird automatisch eine Auswahl um diese Form anwenden. Jetzt können wir zu unserer Bildebene gehen und eine Ebenenmaske basierend auf Auswahl hinzufügen, und es wird das Bild auf diese Weise zuschneiden. Das ist also nur eine andere Art, es zu tun, gegen wie wir es in der Vergangenheit gemacht haben. Ich werde voran gehen und eine neue Ebenengruppe für diese beiden Ebenen namens Bild erstellen, und lassen Sie uns voran gehen und es nach unten verschieben, so dass es unten für Schaltfläche hier ist. In Ordnung, lassen Sie uns unsere Beschreibung für unser Textfeld bekommen. Gehen wir zurück zu Google-Bildern und klicken Sie auf Besuch, so dass wir nur gehen, um zu sehen, ob es hier eine Beschreibung gibt, die wir basierend auf diesem speziellen Poster verwenden können . Jetzt könnten wir einfach alles benutzen oder Dummy-Steuer verwenden, aber ich möchte nur hier reingehen und sehen, ob ich eine Beschreibung dieses Plakats finden kann, damit das funktioniert, ich werde nur diesen Text hier in diesem ersten Absatz greifen. Kopieren Sie es. Gehen wir hier in unser Dokument, und ich werde zoomen, schnappen Sie sich Ihr Textwerkzeug, und lassen Sie uns auch unsere Raster einschalten, nur um uns ein wenig zu führen. Okay, lassen Sie uns voran und erstellen Sie unser Textfeld Nagel. Aber zuerst, unser Textil ausgewählt ist, stellen Sie sicher, dass Sie die Schriftfamilie eingeben, die Eisenbahn ist. Die Größe ist 14 und dann ist die Farbe dunkelgrau. Wir können jetzt voran gehen und erstellen Sie unser Textfeld und machen es die Größe dieser Form und dann gehen weiter und fügen Sie diese Informationen, die Sie zuvor kopiert haben. Okay, machen wir weiter und schalten Sie unser Textfeld hier aus, damit wir unseren Text sehen können. Und ich denke, ich muss das nach links ausrichten. Also werde ich voran gehen und wählen Sie alles ausrichten. Und ich denke, wir haben unseren Zeilenabstand immer noch eingeschaltet. Das tue ich. Ich habe vier und ich denke, das ist zu viel. Ich werde das auf eins bringen und dann deinen Fluchtschlüssel drücken, um da rauszukommen . Und jetzt haben wir unseren Absatz oder unsere Beschreibung. Gehen wir hier rein und modifizieren oder Absatz ein wenig. Ich werde weiter gehen und drei Punkte hinzufügen, denn was ich tun möchte, ist Ziel oder Link hier zu schaffen . Also in allen Großbuchstaben, tippe ich einfach Mawr, und dann können wir auf das Wort doppelklicken, und wir können tatsächlich reingehen und die Farbe dieses Wortes ändern. Ich werde diese orangefarbene Farbe wählen, und ich möchte auch einen Basiswert hinzufügen, um einen Link darzustellen. Ich möchte auch einige Grafiken hier hinzufügen, nur um ihm eine Art Retro-Typ Gefühl zu geben, indem ich drei Linien hinzufüge. Also lassen Sie uns voran und beginnen, einige dieser Ebenen hier zu organisieren, und ich werde fortfahren und mein Beschreibungsfeld nehmen und es löschen, weil ich nicht mehr brauche . Und dann werde ich einen neuen Gruppen-Layer für meine Inhalte erstellen. Ok. Ich denke, alles andere ist ziemlich gut. Wird sie alle in eine neue Gruppen-Ebene namens Held am Ende setzen. Also gehen wir weiter und fügen Sie hier unsere grafischen Elemente hinzu. Jetzt werde ich eine neue Schicht kalte Linie erstellen und dann, für die Größe, die wir tun werden, um für die mit und 50 für die Höhe. Lassen Sie uns unsere blaue Farbe greifen und lassen Sie uns voran und füllen Sie es in que de select. Gehen wir weiter und bewegen Sie diese etwas über ein wenig und beschneiden den Inhalt mit Shift plus c. Okay, wir werden zwei weitere Linien erstellen, aber ein bisschen kleiner auf beiden Seiten. So werden die Nächsten mit so auch gleich sein. Und dann wird die Höhe 35. Also machen Sie weiter und erstellen Sie zwei weitere Linien. Eigentlich könnten wir das einfach duplizieren, und dann müssen wir alles ausrichten. Ich werde das hier nur ein wenig überlegen, und ich werde eine Richtlinie herausziehen, damit ich sie nach oben ausrichten kann. Lassen Sie uns hier eine Auswahl treffen, und ich möchte die mittlere Ebene mit meinem Ausrichtungswerkzeug auswählen, damit ich sie an der Mitte dieser Auswahl ausrichten kann . Ich muss auch das Gleiche für unsere Mittellinie tun. Es sieht so aus, als wäre es um ein Pixel ausgeschaltet. Also werde ich es einfach mit meiner linken Pfeiltaste nach oben bewegen und dann werde ich mit der rechten Maustaste auf die oberste Ebene hier klicken und nach unten zusammenführen, um all diese und 21 Ebene zu kombinieren. Ich brauche sie nicht mehr einzeln. Gehen wir weiter und schalten alles andere wieder ein, und dann müssen wir es nur in diesem Raum hier ausrichten. Also lassen Sie uns voran und treffen unsere Auswahl. Also möchte ich es direkt in der Mitte zentrieren, aber ich muss möglicherweise diese anderen Ebenen wieder deaktivieren. Lasst uns unser Limit-Tool greifen. Klicken Sie mit Ihrem Ausrichtungswerkzeug auf die Grafik. Stellen Sie sicher, dass Sie die Auswahl ausgewählt haben, und richten Sie dann Mittelpunkt und Mitte des Ziels aus. Fahren Sie weiter und Diesel I und dann gehen wir weiter und drehen Sie die anderen Schichten wieder an. Lass uns weitermachen und verkleinern. Das letzte, was ich tun möchte, ist und ein wenig Tiefe auf den gesamten Schieberegler, und wir werden das tun, indem wir einen Schlagschatten hinzufügen. Ich möchte einen Schlagschatten für die Navigationsschaltflächen separat vom Hintergrundschieberegler selbst hinzufügen , da ich auch über diese Schaltflächen fallen möchte. Lassen Sie uns voran und beginnen Sie mit unseren Navigationstasten, und wenn wir diese auswählen und zu Filtern, Licht und Schatten gehen . Wir können ihm einen Schlagschatten hinzufügen. Und der Grund dafür liegt darin, dass wir gruppierten Layern einen Schlagschatten hinzufügen können. Also müssen wir hineingehen und die eigentlichen Schaltflächen selbst finden und dann einen Schlagschatten auf sie anwenden . Und natürlich müssen wir die Ebenengrenze so ändern, dass sie an die Bildgröße angepasst wird, damit wir diesen Schlagschatten hinzufügen können . Jetzt kann ich zu Filtern, Licht und Schatten, Schlagschatten gehen Licht und Schatten, und meinen Schlagschatten erstellen. Also lasst uns weitermachen und mit einigen Einstellungen hier rumspielen, bis wir einen Schlagschatten finden, mit dem wir zufrieden sind. gefällt mir irgendwie genau dort. Also geh ich weiter und klicke auf, OK, und dann schnappen wir uns diesen Knopf hier. Gleiche Schicht Schicht zwei Bildgröße und dann Befehl oder Steuerung plus F, um diesen Schlagschatten erneut anzuwenden . Alles klar, jetzt müssen wir nur noch die Hintergrundebene unseres Schiebereglers finden und auch den Schlagschatten darauf anwenden . Aber zuerst müssen wir auf Ebene und ausgewählte Ebene auf Bildgröße gehen und dann Befehl oder Steuerung und f, um den Schlagschatten anzuwenden. Alles klar, lassen Sie uns weitermachen und alles in eine neue Schichtgruppe kalt stellen. Stimmt, Held. So ändern wir unsere Hintergrundfarbe wieder, weil wir diese Gruppenebene in einen neuen Gruppenspieler setzen . Wir werden also nur unsere Heldengruppe Layer und Select auswählen, die für den Mischmodus durchgegangen sind, und das wird den Hintergrund für uns und herzlichen Glückwunsch beheben. Wir haben jetzt unseren Retro-Slider abgeschlossen. Jetzt müssen wir auf der E-Commerce-Abschnitt unserer Website arbeiten, und wir werden weiter gehen und damit im nächsten Tutorial beginnen. 81. Körperteil 1: Hallo und willkommen zurück. Ordnung, wir werden jetzt an unserem E-Commerce-Abschnitt für diese Webseite arbeiten, und wir werden unseren Hintergrund und einige unserer Filterschaltflächen erstellen, und dann werden wir es im nächsten Tutorial beenden. Gehen wir also weiter und arbeiten wir zuerst an unserem Hintergrund. Aber eigentlich müssen wir die Campusgröße vergrößern. Lassen Sie uns zu Image-Campus-Augen gehen und erhöhen Sie es auf 3000. Lassen Sie uns auch unsere Hintergrundebene hier greifen und gehen Sie zu Ebene und wählen Sie Ebene zu Bildgröße. Jetzt kann ich es nicht auswählen. Und das liegt daran, dass meine Hintergrundebene viel ist. Also, wenn Ihre auch gesperrt ist, gehen Sie voran und entsperren Sie es und erhöhen Sie dann die Begrenzungsgröße. Schnappen Sie sich Ihre weiße Farbe, um den Rest des Hintergrunds zu füllen. Alles klar, jetzt müssen wir reingehen und unser Muster sowie unsere neuen Farben hinzufügen. Also gehe ich weiter und gehe einfach in unsere Hero-Hintergrundgruppen-Ebene und wähle diese Ebene aus, um sie zu duplizieren. Und dann gehen wir weiter und ziehen diese Kamera raus. Gehen Sie weiter und verschieben Sie meins hier nach unten, also das erste, was wir tun müssen, ist diese Ebenenmaske zu löschen, und wir können das tun, indem Sie mit der rechten Maustaste klicken und die Option Ebenenmaske löschen. Okay, Sie können dies jetzt in Position bringen, und wir müssen auch die Ebenenbegrenzungsgröße für jede Ebene erhöhen. Also lassen Sie uns das für jedes der Overlays und auch für das Muster tun. So Layer-Bildgröße. Lasst uns unser Eimer Fill Tool greifen. Lassen Sie uns unser Muster auswählen und gehen Sie voran und füllen Sie es aus. Und jetzt müssen wir die Farbüberlagerungen auswählen, damit wir jeder Ebene eine neue Farbe hinzufügen können, und wir werden diese blaue Farbe hier verwenden. Also gehen Sie vor und greifen Sie das und dann gehen Sie weiter und füllen Sie das mit der neuen Farbe. Jetzt, da unser Hintergrund fertig ist, können wir weitermachen und an unseren Filtertasten arbeiten. Beginnen wir mit unserem Textwerkzeug. Setzen wir die Schriftart auf Oswald und 24 dann weiß für die Farbe. Okay, lassen Sie den Filter jetzt eingeben, wir werden voran gehen und vier neue Schaltflächen erstellen. Die 1. 1 wird Taste eins sein, und dann für die Größe werden wir 95 mal 45 machen. Aber fügen wir zuerst eine abgerundete Ecke von 10 hinzu und dann ist die Größe wieder 95 mal 45. Und dann füllen wir das mit unserer dunkelgrauen Farbe aus. Gehen Sie voran und de selektieren und lassen Sie uns gehen und dreimal duplizieren. Nun gehen wir voran und beschneiden sind zufrieden mit Shift plus C für jede Ebene. Lass uns voran gehen und einen Löwen und verteilen die Schichten. So Ausrichtungswerkzeug. Schalten wir unseren Heldenbereich hier aus und dann verschieben. Klicken Sie auf die anderen Schaltflächen. Lassen Sie uns auf das erste Element an der Spitze ausrichten, und dann müssen wir den Raum zwischen ihnen verteilen. Also im Moment habe ich 3 50, was zu viel ist. Ich werde versuchen, 1 50, ich will weniger als das tun. Versuchen wir es mit 100. Nicht genug tun 1 40 und 1 25 Sieht aus wie die beste Option. Jetzt müssen wir nur noch einige Titel für unsere Buttons hinzufügen. Also zurück zum Text-Werkzeug, gleiche Schriftart, gleiche Größe, müssen nur ändern Sie es hintere Zehe. Weißer Fall des letzten, was wir tun müssen, ist alles an den Knöpfen auszurichten und dann müssen wir nur unsere Schichten organisieren. Also für den Inhalt werde ich den Inhalt mit Shift plus C für jede Ebene zuschneiden. Nun haben Sie vielleicht bemerkt, dass der Text von einer Textebene in eine Pixelebene geändert wird. Wenn ich also reingehen und die Schreibweise oder die Schriftart oder die Größe ändern möchte und darauf klicke , muss ich dann bestätigen, dass ich es wieder zur Textbearbeitung wechseln möchte, und ich kann es entweder auf einer neuen Ebene oder direkt auf dieser Ebene tun. Es ist also immer noch eine gute Idee, den Inhalt für Ihren Text auf diese Weise zu beschneiden, da Sie bei Bedarf immer zu dieser Textebene zurückkehren können, um sie zu aktualisieren. Erleichtert es nur, den Inhalt auf diese Weise zu beschneiden, so dass Sie ihn ganz einfach nach Bedarf ausrichten können. Also zurück zum Ausrichtungswerkzeug und ausgerichtet auf das erste Element. Wir müssen auch eine Messung der Menge an Raum zwischen hier und Haar nehmen , damit wir es auch hier unten hinzufügen können . Also gehen Sie voran und messen. Ich habe 40 Pixel. Nun, da unsere Schaltflächen fertig sind, müssen wir nur unsere Produkte für diesen Teil unseres Seitenentwurfs hinzufügen, und wir werden diese Bilder in der nächsten Lektion herunterladen und sie so einrichten, dass es mehr wie folgt aussieht. 82. Körperteil 2: Hallo und willkommen zurück. Alles klar, wir werden den E-Commerce-Bereich beenden und wir brauchen acht Bilder, um diesen Abschnitt auszufüllen . Also gehen Sie voran und machen Sie eine Google-Bildsuche nach alten Filmplakaten. Vertikal wird bevorzugt. Fügen Sie sie Ihrem Dokument hinzu, und Sie können die Größe in einer Minute ändern. Sobald wir das Bild Platzhalter hinzufügen, und dann werden Sie wissen, welche Größe sie zu skalieren, auch. Also gehen wir weiter und arbeiten an unserem 1. 1 und wir werden beginnen, indem wir einen Hintergrund für das Produktangebot erstellen . Lassen Sie uns also eine neue Ebene namens Produkt eins erstellen. Und dann für die Größe werden wir zu 76 mal 450 tun und dann füllen wir es mit unserer hellen cremefarbenen Farbe. Gehen Sie weiter und klicken Sie auf OK und füllen Sie es aus. Okay, lasst de wählen und lasst uns auch unser Gitter für den Moment einschalten. Und wenn wir das überziehen, werden Sie feststellen, dass es genau drei Spalten breit ist, was uns erlauben wird, vier verschiedene Produkte hinzuzufügen. In Ordnung, lassen Sie uns die Inhaltsverschiebung zuschneiden, plus C. Jetzt werden wir weitermachen und einen Bildplatzhalter erstellen, genau wie wir es für den Schieberegler getan haben . Und dann für die Größe, werden wir 2 30 mal 3 20 machen und wir werden das mit Schwarz füllen. Also trage ich D und greife dann dein Eimerfüllwerkzeug mit G Phil Iden und de Select Que Shift plus C, um den Inhalt zu beschneiden und dann in Position zu bewegen. Es wird meins ein wenig nach oben bringen, und ich werde hier eine Messung vornehmen. Also bin ich bei 18 Pixeln, also geh weiter und bewege deine. Sie haben also ein Leerzeichen von 18 von oben, und dann werden wir unser Ausrichtungswerkzeug Zehe verwenden, richten Sie es an der Mitte, links und rechts von unserem Hintergrundbild aus. Also geh weiter und tu das. Okay, gehen wir weiter und machen unseren Nagel-Knopf. Schnappen Sie sich Ihr Auswahlwerkzeug, und dann , für die Größe, werden wir 95 mal 95 tun und wir müssen auch eine neue Ebene dafür erstellen. Lasst uns unsere dunkelgraue Farbe schnappen und voran gehen und füllen sie aus. Nun, bevor Sie d auswählen, müssen wir nach oben gehen und einen Schlaganfall hinzufügen. Also bei ihm Strichauswahl, werden wir vier Pixel machen, und ich muss auch meine Farbe wählen. Also greifen Sie Ihre Eye Picker Werkzeug hier, stellen Sie sicher, dass Sie die Hintergrundfarbe klicken Sie auf OK und Ihren Strich, und dann können wir gehen Sie weiter und bewegen Sie diese nach rechts de wählen und dann verschieben. Plus C. Lassen Sie uns unseren Text für diesen Kauf hinzufügen. Jetzt Knopf. Wir werden Copper Plate 26 für die Größe und Weiß verwenden. Zentrieren Sie auch den Text, und verwenden Sie dann das Ausrichtungswerkzeug, um diesen Text auszurichten. Lassen Sie uns voran und legen Sie es in die neue Ebenengruppe. Lassen Sie uns unseren Titel für dieses Plakat erstellen, und ich möchte die Schriftart in Oswald ändern, und dann machen wir 18 für die Größe und wir gehen zurück zu unserer dunkelgrauen Farbe. Also für den Titel, Ich werde nur tippen Sie einen Titel, der dem Filmplakat für dieses bestimmte Produkt entspricht. Ihr kann also unterschiedlich sein, abhängig von dem Poster, das Sie heruntergeladen haben, also gehen Sie einfach vor und geben Sie einen Titel dafür ein. Okay, lass uns Railway Bold und 12 für die Größe machen und jetzt werde ich nur die Abmessungen dieses Filmplakats sowie einen Preis eingeben . Ich denke, ich werde diese Schrift ändern. Ich will es viel dunkler machen, also werde ich mich für Ultra Bold entscheiden. Und dann werde ich zum Titel zurückkehren und sehen, ob ich eine andere Schriftart oder eine leichtere Schrift finden kann . Versuchen wir es mit Oswald Licht. Okay, das gefällt mir viel besser, weil das den Dimensionen im Preis mehr Bedeutung beimißt als der Titel selbst. Denken Sie also daran, wir möchten sicherstellen, dass bestimmte Elemente des Textes richtig Stil haben, so dass ein Titel oder Untertitel wichtiger war als der andere. Auf diese Weise ist es einfacher zu lesen. Kann das mit Commander Control und den Buchstaben s sparen? Wir werden jetzt auch hier unten einen Button erstellen. Das wird ihnen die Möglichkeit geben, mehr über dieses spezielle Filmplakat zu erfahren. Also lasst uns mehr Informationen ausgeben und lasst uns wieder Kupferplatte für die Schriftart und 18 für die Größe machen. Alles klar, lassen Sie uns voran und erstellen Sie eine neue Ebene für die Schaltfläche „Mehr Info“, und dann werden wir abgerundete Ecken hinzufügen. Lassen Sie uns 10 für den Radius tun und dann so weit wie die Zeichen 1 15 mal 30 tun würden und wir werden das mit einer hellgrauen Farbe füllen, also werde ich F ein F ein F ein Klick auf OK verwenden, und dann gehen Sie weiter und füllen Sie das in De Select Commander Control und der Buchstabe D. Lassen Sie uns diesen Text etwas kleiner machen, denn was ich tun möchte, ist, dass ich einen inneren Schatten erzeugen möchte. Also habe ich es dir schon mal gezeigt. Wie Zehe einen Schlagschatten hinzufügen. Aber das Erstellen eines inneren Schattens ist keine Option durch die Werkzeuge selbst, daher müssen wir ein wenig kreativ sein, wie wir das tun. Also möchte ich nur sicherstellen, dass der innere Schatten nicht über unseren Text selbst geht. Also will ich 14 von der Größe machen, und ich werde es auch ausrichten. Gehen wir also zurück zu unserem weiteren Info-Button Shift plus C, um die Ebenengrenze zu skalieren, und dann werden wir unser Ausrichtungswerkzeug verwenden, um den Text auszurichten. Okay, machen wir weiter und erschaffen jetzt unseren inneren Schatten. Also im Grunde alles, was wir tun werden, ist eine weitere Schaltfläche mit der gleichen Größe und einer dunkleren Farbe zu erstellen , und dann werden wir es ausschneiden und dann die Kanten verwischen. Also lassen Sie uns voran und erstellen Sie eine neue Ebene war Rufen Sie es in ihrem Schatten und dann werden wir die gleiche Größe und den gleichen Radius verwenden 1 15 durch 30. Und dann werden wir D. Schnappen Sie sich Ihr Eimerwerkzeug mit G und füllen Sie es mit schwarz und de select aus. Gehen wir weiter und bewegen das über und hinter den anderen Knopf. Das ist also ungefähr die Größe, die ich für meinen inneren Schatten will. Jetzt müssen wir also eine Auswahl treffen. Also gehen wir zu unserem Mehr Info Button, klicken Sie mit der rechten Maustaste und wählen Sie Alfa zur Auswahl. Gehen Sie zurück und wählen Sie Ihren inneren Schatten, und dann werden Sie einen Schnitt machen so Befehl oder Kontrolle und X, oder Sie können gehen, um zu bearbeiten und wählen Sie Cut von hier, que de select Commander Control und D. Nun lassen Sie uns bewegen unsere inneren Schatten zurück über mehr Info Shift plus C, um es zu beschneiden und dann greifen Sie Ihr Verschiebungswerkzeug und platzieren Sie es über diese andere Schaltfläche. Okay, jetzt gehen wir zu Filtern, verwischen und wählen Ghazi in Blur aus. Von hier aus können Sie die Einstellungen sowieso anpassen, was Sie mögen. Und ich werde nur diese Einstellungen hier verwenden, was meiner Meinung nach die Standardeinstellung sind. 1.5 und 1.5 klicken. Okay, Okay, das ist ein bisschen zu dunkel für mich. Also werde ich meine Deckkraft schnappen und das runterwerfen. Jetzt sieht es so aus, als müsste ich es um ein Pixel nach oben verschieben. Also werde ich mein Verschiebungswerkzeug greifen, die Ebene auswählen und sie dann um ein Pixel nach oben verschieben. Und jetzt muss ich nur die Kanten ein wenig aufräumen, damit sie auch hier und hier eine abgerundete Ecke hat . Also werde ich hier reinzoomen, den inneren Schatten greifen, vielleicht Radiergummi Werkzeug mit dem Buchstaben E und dann werde ich nur einige dieser Pixel löschen. Das könnte zu viel gewesen sein. Also werde ich das mit Commander Control und den Buchstaben e rückgängig machen und es dann wiederholen. Ich muss auch diese Seite machen, und ich denke, ich möchte die Deckkraft nur ein wenig mehr fallen lassen. Also genau da. Gehen wir weiter und greifen unser Zoom-Tool. Halten Sie die Befehlstaste oder die Steuerungstaste gedrückt, so dass Sie verkleinern können und dann einfach voran gehen und eine andere Ebene und ihr Ego auswählen können. Sie haben jetzt ein inneres Schloss. Das letzte, was wir tun müssen, ist, unser Bild zum Platzhalter hinzuzufügen. Also finden Sie Ihr Bild. Platzieren Sie es über dem Bildplatzhalter. Bewegen Sie es in Position. Wählen Sie den Bildplatzhalter aus. Richtig. Klicken Sie darauf. Wählen Sie Alfa, um die Auswahl zurück zur Bildebene auszuwählen. Und dann müssen wir das Poster bei Bedarf neu zusammenstellen, indem wir unser Bewegungstool mit dem Buchstaben V packen und darauf klicken. Und dann können wir unsere Pfeiltasten benutzen, um es in Position zu bringen. Genau dort sieht gut aus für mich. Ich werde weitermachen und eine Ebenenmaske und einen Boom hinzufügen! Ich habe jetzt das Bild genau so zugeschnitten, wie ich es will. Alles klar, lassen Sie uns diese Schichten hier aufräumen. - Das Letzte, was ich tun möchte, ist, dass ich hier einen Schlagschatten auf der Rückseite unseres Bildes hinzufügen möchte. Lassen Sie uns also hineingehen und den Bildplatzhalter finden, und gehen Sie weiter und fügen Sie einen Schlagschatten hinzu. Aber zuerst natürlich müssen wir natürlichdie spätere Grenzgröße erhöhen, und dann können wir zu Filtern, Licht und Schatten gehen und einen Schlagschatten hinzufügen. Alles klar, unser erstes Filmplakat ist fertig, und das einzige, was noch übrig ist, das noch sieben Mal zu wiederholen. Anstatt mir das immer und immer wieder zuzusehen, möchte ich, dass du dir die Zeit nimmst, was du gelernt hast, indem du die sieben anderen Plakate hinzufügst . Und in der Tat können Sie tatsächlich ein wenig betrügen, indem Sie Ihr erstes Poster nehmen, es duplizieren und es dann in die entsprechenden Spalten verschieben und dann den Inhalt aktualisieren . Machen Sie also voran und schließen Sie das als Teil Ihrer Aufgabe ab. Und wenn Sie fertig sind, Sie bereit, dieses Webdesign-Projekt abzuschließen, das die Fußzeile vervollständigt und jede Art von Anpassungen durchführt, auf die wir möglicherweise stoßen 83. Fußer: Hallo und willkommen zurück. In Ordnung. Jetzt, da Sie alle Ihre Produktangebote an Ort und Stelle haben, werden wir jetzt unsere letzten Verbesserungen tun sowie beenden Sie unsere Fußzeile soas Faras Abstand geht. Ich nahm den Abstand zwischen den beiden Spalten hier und fügte das auch unten auf den Plakaten hinzu. Ich habe auch den Abstand von hier genommen und hier angewendet. Also hoffentlich sieht Ihr E-Commerce-Abschnitt ähnlich wie folgt aus. Sie haben wahrscheinlich verschiedene Plakate, und das ist in Ordnung. Ich nahm auch alle meine Plakate und legte sie in eine neue Gruppenebene namens Plakate. Und jetzt muss ich einen neuen Gruppen-Layer für den Abschnitt erstellen. Also lasst uns weitermachen und das tun, wenn ihr es noch nicht getan habt. Jetzt haben wir die gleiche Situation mit unserem Hintergrund, wie wir im vorherigen Abschnitt gemacht haben, und das heißt, wenn Sie es in die Layer-Gruppe gesetzt haben, wird sich die Farbe ändern. Also werde ich die E-Commerce-Gruppen-Schicht auswählen und durchlaufen auswählen. Gehen wir weiter und beenden unsere Fußzeile und dann machen wir einige letzte Verbesserungen. Also für die sozialen Symbole, ganz einfach, habe ich nur einige einfache Schwarz-Weiß-Sozialsymbole verwendet, und Sie könnten wahrscheinlich diejenigen aus einem früheren Projekt greifen und dann einfach reinbringen. Lassen Sie uns voran und erstellen Sie den Fuß oder Hintergrund, und dann für die Größe werden wir keine abgerundeten Ecken voll mit und 210 für die Höhe zu tun . Dann füllen wir das mit unserer dunkelgrauen Farbe de Select und Shift plus C aus, um den Inhalt zu beschneiden. Und dann gehen wir weiter und bewegen das nach oben und wir fügen hier unten 40 Pixel Platz hinzu. Jetzt können wir voran gehen und unsere gesamte Leinwand zuschneiden, also werde ich zur Bildleinwandgröße gehen und die Höhe entsprechend anpassen. Dann werde ich hier unten ein paar Informationen hinzufügen, die einen Copyright-Hinweis sowie einige Links haben. Und ich werde es auf Oswald setzen, 20 und White. Also gehen Sie vor und tippen Sie etwas für diesen Teil der Seite, und dann gehen Sie einfach vor und bewegen Sie es in Position. Gehen wir weiter und greifen Sie unser Rechteck-Auswahlwerkzeug, damit wir das auf den Hintergrund ausrichten können. Okay, ich muss nur meine Social-Media-Symbole finden und diese auch ausrichten. Okay, sind Fußzeile ist jetzt fertig, und wir werden einfach hier schnell durchgehen und ein paar kleinere Verbesserungen machen. Ich mag nicht, wie unsere Navigation in Worten unten sitzt. Es ist nicht die genaue Unterseite, denn am Anfang haben wir das Logo von oben nach unten ausgerichtet. Lassen Sie uns also auch unsere Navigation in die Mitte stellen, um sie auszubalancieren. Die andere Sache, die wir für diese Seite tun müssen, ist, einige Optionsfelder auf unserem Schieberegler hinzuzufügen. Wir haben vergessen, das zu tun. Also werde ich einfach zu diesem Videoprojekt am Meer zurückkehren und die Radiobuttons schnappen, die wir zuvor erstellt haben . Wenn Sie also Ihr Verschiebungswerkzeug mit dem Buchstaben V auswählen, dann klicken Sie auf Eine Ebenenführung auswählen. Sobald Sie darauf klicken, wird es zu all diesen Playlist-Kreisen oder Optionsfeldern navigieren, und das können wir einfach in unser aktuelles Projekt ziehen. Ich gehe zurück, um die aktive Ebene zu verschieben. Es hat uns aus dem Gruppenspieler gezogen und nach unten gezogen. Tatsächlich hat es in den Heldenbereich gelegt , wo es hingehört, also möchte ich ein paar Modifikationen vornehmen. Ich möchte den Kreis kleiner machen und den Abstand zwischen ihnen reduzieren. Also lasst uns sie zuerst mit Shift Plus s alles skalieren, um 1 75 mal 16 zu tun und ich möchte diesen blauen Kreis ändern . Zwei sind hellere blaue Farbe, aber zuerst müssen wir Ari Lips Werkzeug greifen, um eine neue Größe zu erstellen. Und lass uns 16 mal 16 machen. Lassen Sie uns eine neue Ebene erstellen, und dann werden wir diese hellblaue Farbe auswählen und füllen Sie sie in Commander Control Indy to de Select Shift Plus C, dann zurück zu unserem Verschiebungswerkzeug, und dann können wir es hier in Position bewegen. Jetzt greifen wir unser Lehman-Tool, und wir müssen alle diese herausnehmen, damit wir sie auswählen können, und dann, mit deinem lahmen Werkzeug, wählen Sie die 1. 1 und dann ändern wir den Verteilungsraum zwischen ihnen. Wir legen den ersten Gegenstand und den Offset fest. Versuchen wir es mal zu viel. Lassen Sie uns das auf 50 zu viel runter auf 25 fallen und ich möchte nur ein bisschen mehr machen. Ich werde 35. Und da gehen wir. Lasst uns weitermachen und diese wieder in die Spielliste setzen. Lassen Sie uns voran und wählen Sie alle mit Commander-Steuerung und ein und lassen Sie uns voran und richten Sie es an der Mitte de Select und dann gehen Sie weiter und verwenden Sie Ihr Move-Werkzeug, um es nur ein wenig nach unten zu bewegen . Okay, gehen wir weiter und zoomen raus. Ich möchte die nur noch ein bisschen mehr runterziehen. Also genau da sollte es gut sein. Lassen Sie uns eine neue Ebenengruppe für die Fußzeile erstellen und sehen, ob wir weitere Anpassungen vornehmen müssen . Und ich bin nicht wie im Filter. Indem ich hier oben bin, möchte ich es tatsächlich in der Mitte der eigentlichen Taste platzieren, also lasst uns voran und Graham R Selection Tool gehen. Lass uns eine Auswahl treffen. Lassen Sie uns den Filter herausziehen, wirklich filtern nach, wählen Sie ihn und dann eine Linie Mitte des Ziels. Können wir das wieder reinlegen? Mal sehen, ob es noch etwas gibt, was wir brauchen. Ich denke, alles andere ist ziemlich gut aufgereiht. Ich werde mein Gitter einschalten, nur um sicherzustellen, dass alles genau dort ausgerichtet ist, wo es sein sollte . Das einzige, was ich nicht mag, ist, dass die Fußzeile jetzt auch dieses Muster übernimmt, also will ich das nicht. Ich möchte eine einfarbige Farbe da unten, also ist es in diesem Fall in Ordnung, die Fußzeile über die andere Gruppenebene zu legen. Weißt du, das Einzige, was ich vielleicht tun möchte, ist, diese orangefarbene Farbe des Hintergrunds abzuschwächen. Also lasst uns in den Heldenbereich gehen und zu den Overlays gehen, und ich werde nur die Deckkraft von übermäßig eins auf etwa 75 anpassen, nur um es ein wenig zu straffen . Und das gefällt mir definitiv viel besser. Herzlichen Glückwunsch. Wir sind jetzt fertig mit Projekt Nummer sechs. wie immer Beenden Siewie immeralle Anpassungen und Aktualisierungen, die Sie für dieses spezielle Projekt vornehmen müssen, und gestalten Sie es dann mit Ihrer eigenen kreativen Vision neu, damit Sie es zu Ihrem Portfolio hinzufügen können . Sobald Sie damit fertig sind, sehe ich Sie im nächsten Projekt, das Projekt Nummer sieben ist. Danke fürs Zuhören und einen tollen Tag 84. Projekt 7: Trek Briefing: Hallo und willkommen zu unserem endgültigen Webdesign-Projekt. Sei aber nicht traurig . Wir werden viele coole Sachen in diesem Projekt lernen. Also lassen Sie uns zuerst über die ursprüngliche Website gehen und dann zeige ich Ihnen mein Webdesign. Jetzt. Die eine Sache, die Sie über diese Website im Vergleich zu vielen anderen bemerken, die wir getan haben, ist, dass insgesamt, diese Website ist nicht so schlecht. Lassen Sie uns einen Blick darauf werfen. Es ist professionell, es ist sauber. Es hat viel bessere Bilder als einige der anderen Projekte, an denen wir gearbeitet haben. Sie haben etwas Styling, aber ich denke, das könnte ein wenig verbessert werden und es einfacher machen, insgesamt zu lesen. Also werde ich mit Ihnen teilen, was wir tun können, um diesen Teil wieder besser zu machen. Die Bilder sind nicht so schlimm. Wir haben hier drüben einen leeren Platz. Es ist ein wenig unausgewogen, keine große Sache. Wir können das Zeug einfach hier hineinschieben. Das ist wieder nichts Wichtiges. Alles ist schön und ordentlich und sauber gestylt. Sie wählten gute Mittel, so dass es insgesamt ziemlich leicht zu lesen ist. Aber wir können es tatsächlich ein wenig leichter zu lesen machen. Sie haben hier unten einige soziale Beweise, um der Firma ein wenig Glaubwürdigkeit hinzuzufügen. Ich würde das lieber in der Nähe der Spitze sehen. Aber dann wieder, wenn sie eine starke Marke haben und es gibt eine große Firma, sie brauchen nicht wirklich eine Menge von sozialen Beweis wie weniger bekannte Unternehmen Mom und Pops Dinge wie das. So oder so, der soziale Beweis könnte hier unten sein, oder es könnte eine Spitze sein, also schauen wir uns das an. Und dann sind sie Fußzeile. Nichts Großes. Sie haben einige Links zu anderen Teilen ihrer Website. Ihre primäre Navigation ist heruntergefahren. Hier ist gut, sie haben einige soziale Symbole. Copyright beweisen Datenschutzrichtlinie, Ihr typisches Zeug in der Fußzeile. Also nichts Wichtiges auf der Fußzeile wieder. Insgesamt ist diese Seite wirklich nicht so schlimm. Ja, wir können kleine Dinge tun, um es besser zu machen. Aber die Hauptsache, die ich stieß, als ich diese Seite in ihrer Konkurrenz erforschte war ihre Konkurrenz sieht ziemlich genau gleich aus. Sie haben Header, sie haben ein Logo. Sie haben Navigation, sie haben Inhalte. Sie haben hübsche Bilder. Es ist also das grundlegende Layout. Der Corporate Stil sauberes Layout. Weißt du, jeder sieht genau gleich aus. Also in dem Bemühen, hervorzuheben und anders zu sein und ein anderes Image, eine andere Marke, einen anderen Stil zu haben eine andere Marke, . Ich wollte etwas einfallen lassen, das niemand sonst für diese Nische tat. Also habe ich über die verschiedenen Designstile nachgedacht, die wir im vorherigen Abschnitt behandelt haben, die sieben beliebten Arten von Designstilen. Und ich habe sie durchgeschaut, und ich habe versucht herauszufinden, welcher besser gegen sauberes, modernes Unternehmen wäre . Und ich wollte etwas tun, das niemand sonst in dieser Nische tat, und ich beschloss, etwas künstlerischer beim Mountainbiken zu tun. Es ist mehr als nur einen großen Hügel oder einen großen Berg hinunter zu treten. Man muss mit der Ebbe und dem Fluss des Trails gehen, und man muss sich der Felsen und die Unebenheiten bewusst sein, weil man nicht auf einen Felsen oder eine Beule treffen und von der Klippe fliegen will . Es gibt also eine Ebbe und Flow, um eine Spur auf einem Berg hinunter zu fahren, also ist es irgendwie wie eine Kunstform, also wollte ich irgendeine Art von Kunstwerk im Vergleich zu gewöhnlichen, einfachen, langweiligen Bildern integrieren . Ja, das Bild ist nicht so schlecht, aber es ist auch nicht so toll. Wie können wir also die Ebbe und den Fluss von Mountainbiken und Kunst schaffen? Also kam ich auf die Idee, ihr Hauptbild zu nehmen und es in ein Kunstwerk zu verwandeln , und ich wählte Aquarell als mein Medium. Und jetzt denkst du wahrscheinlich, okay, okay, wie soll ich ein Aquarell kreieren, das ich noch nie gemalt habe? Nun, rate mal, was ich noch nie gemalt habe, und deshalb haben wir die Macht von Photoshopped zur Hand. Also lassen Sie mich Ihnen zeigen, was das endgültige Design, das ich ausgedacht habe, und wir werden ein wenig mehr über den Design-Stil erklären, und hier ist es. Also haben wir das gleiche Bild und es sieht aus wie ein Aquarell Gemälde, und das kann direkt gemacht werden. Und Photoshopped. Sie brauchen keine Leinwand oder Pinsel oder Aquarellfarbe zu kaufen. Wir können diesen Effekt direkt und Fotoshop bekommen, und ich werde Ihnen zeigen, wie Sie das in der nächsten Lektion tun. Also haben wir unsere primäre Navigation. Nichts Schickes, aber es hat es nicht angezogen. Es ist ein eigener Hintergrund. Es ist oben auf dem Aquarell sowie ihr Logo und dann eine aufgerufene Aktion, um sich für die Buchung zu registrieren . Eine Zeit, um mit einem Führer für diesen Mountainbike-Weg oder andere Trails Ihrer Wahl zu gehen. Wenn also eine Person auf dieser Website landet, wollen wir, dass sie etwas tun. Wir wollen, dass sie sich registrieren. Vier. Das Produkt oder die Dienstleistung ist, dass das Unternehmen in diesem Fall geführte Touren für Mountainbiker verkauft . Vielleicht sind sie noch nicht bereit, sich anzumelden. Das ist in Ordnung. Deshalb haben wir unter dem Heldenbereich zusätzliche Inhalte, die helfen, sie darüber zu verkaufen, warum sie unsere Trails oder den Dreck wählen sollten. Siris Mountainbike-Camps Strecken. Und dann geben wir ihnen noch eine Gelegenheit, sich zu registrieren, sobald sie einige Informationen gelesen haben . Ich habe einige Logos von ihrer Website aufgenommen, die sie bereits verwendet haben, um Glaubwürdigkeit an der Spitze hinzuzufügen , so dass jeder, der nicht mit dieser Firma oder diesem Lager vertraut ist, dies sehen wird. Und dies wird einige Glaubwürdigkeit für sie hinzufügen, wie wir nach unten scrollen, wurden in den Inhalt eingeführt, der uns helfen wird, zu entscheiden, ob wir die Registrierung für dieses Lager wollen oder nicht . Ich habe auch einige Bilder aufgenommen und das Aquarellkonzept aufgenommen und es an den Rändern der Bilder angewendet , um nicht nur Konsistenz mit unserem Aquarellbild hinzuzufügen, sondern es zu brechen und es anders zu machen. Jeder macht Bilder mit vier geraden Seiten. Niemand tut dies und es setzt auch den Designstil des Aquarellkonzepts über den Rest der Homepage fort. Wir haben dann unsere Register-Option hier. Wenn sie bereit sind, ab und zu buchen, haben wir unsere Fußzeile darunter. Also wieder, ich nahm ein Hauptbild als Teil des Hintergrunds und legte eine Aquarellkante auf es unten und oben kann es nicht sehen, weil die Wolken und der Himmel ausgewaschen wurden. Also werde ich Ihnen zeigen, wie Sie diesen Effekt zu den Bildern hinzufügen, wie Sie diesen Hintergrund hier für die Register-Option erstellen können, und dann werde ich Ihnen in der nächsten Lektion zeigen, wie Sie diesen Aquarelleffekt erstellen. Also, wenn Sie bereit sind, loszulegen, machen wir es 85. Aquarellbild Teil 1: Hallo und willkommen zurück. In Ordnung. Bevor wir mit der Umwandlung unseres gewöhnlichen Bildes in ein Aquarell Gemälde beginnen, müssen wir zuerst einige Ressource herunterladen und installieren Sie sie als auch. Das ist also, was wir in dieser Lektion tun werden. Und dann werden wir in der nächsten Lektion Schritt für Schritt unser Aquarell-Kunstwerk erstellen. Also müssen wir ein Bild herunterladen, das wir brauchen, um Aquarellpinsel herunterzuladen und zu installieren. Wir müssen diesen Plug in herunterladen und installieren, und wir müssen auch ein Aquarell strukturiertes Papier herunterladen. Also habe ich eine Textdatei mit der URL für jeden von diesen zusammengestellt. Die Ressource ist. Gehen Sie also weiter, navigieren Sie zu dieser Datei, laden Sie sie herunter und navigieren Sie dann zu jeder dieser URLs, um diese spezifische Ressource für das Image herunterzuladen . Ich habe Whistler Trek Dirt, Siri Berg als die Suche in Google-Bildern, und ich fand dieses Bild hier, so dass Sie einfach mit der rechten Maustaste klicken, kopieren Sie das Bild und öffnen Sie dann Ihre Grid-Master-Vorlage und eingefügt innerhalb von dort. Als nächstes brauchen wir ein paar Aquarellpinsel. Also, sobald Sie zu der URL in der Textdatei navigieren, klicken Sie dann auf diese Schaltfläche hier, um diese Pinsel herunterzuladen und ich werde Ihnen zeigen, wie Sie diese in einem Moment installieren. Und dann für den G m I C Plug in, müssen Sie zu der angegebenen URL gehen. Und dann können Sie für Windows oder für Mac und Windows herunterladen. Benutzer wollen das ZIP-Archiv, und Mac-Benutzer sollten die T GZ-Archivdatei herunterladen. Okay, also geh los und lade die herunter. Und dann, wenn Sie zu diesem spezifischen Earl gehen, können Sie einfach mit der rechten Maustaste klicken und das Bild kopieren, wie Sie es mit dem anderen Bild getan haben. In Ordnung, schauen wir uns mal an. Tante sind hier Bürsten und wir werden die entpacken. Dann finden Sie ein paar Dateien im Inneren. Und was wir wollen, ist diese Akte hier. Es hat eine Erweiterung von Punkt a b R Also gehen Sie mit der rechten Maustaste klicken und kopieren Sie dies und dann innerhalb von Gimp, wir müssen den genauen Ordner finden, um es zu platzieren. Es wird für PC-Benutzer anders sein als Mac-Benutzer, und ich werde Ihnen zeigen, wie man eines macht, und wir werden zuerst über Windows gehen. Also, wenn Sie gehen, um zu bearbeiten und wählen Sie Einstellungen und klicken Sie dann auf Ordner unten hier. Sie werden all diese verschiedenen Ordner finden, in denen Sie verschiedene Arten von Ressourcen installieren können , ist in diesem Fall müssen wir den Pinsel-Ordner finden, und dies zeigt den genauen Speicherort, wo Sie es installieren sollten. Du willst diesen Top hier, nicht den unteren. Also, sobald wir zu diesem bestimmten Ort navigieren, die wieder Benutzer Benutzername App ist, Daten Roaming gimp 2.10 innerhalb des Pinsel-Ordners, Sie wollen rechts? Klicken Sie auf die kopierte Datei, und fügen Sie sie ein. Sobald du das tust, wirst du es hier finden. Nun, für Mac-Benutzer, möchten Sie zu Benutzern gehen? Benutzername, Bibliotheksanwendung Unterstützung gimp 2.10 Pinsel. Und dann innerhalb von dort, werden Sie diese Datei einfügen. Also hier ist es, genau hier. Und dann, sobald Sie das tun, müssen Sie zurückgehen, um wieder zu geben. Wählen Sie Ihr Pinselfeld aus und klicken Sie dann auf Pinsel aktualisieren. Sobald Sie das tun, werden Sie diese Pinsel in diesem Panel finden. Und alle Pinsel sind alphabetisch aufgelistet. Als ich also meine Aquarellpinsel das erste Mal installiert habe, fügte ich den Buchstaben z an der Vorderseite dieses Dateinamens hinzu, damit sie an der Unterseite aller anderen Pinsel hinzugefügt wurden . Also deine, wenn du das nicht getan hast, wird wahrscheinlich irgendwo in der Mitte sein, so dass du zurückgehen und diese bestimmte Datei mit dem Buchstaben Z erneut benennen kannst . Wenn du sie zum Ende hinzufügen möchtest oder ein, wenn du sie an der Vorderseite hinzufügen möchtest und erleichtert es dann einfach, bestimmte Pinsel zu finden, wenn Sie sie in einem bestimmten Quartal umbenennen möchten . Wenn Sie diese Datei umbenennen, müssen Sie zurückkehren und die Pinseloptionen aktualisieren, damit sie im Bedienfeld aktualisiert werden. So installieren Sie die Aquarellpinsel, und wir werden diese verwenden, um unser Aquarellbild zu malen. Jetzt. Die andere Sache, die wir installieren müssen, ist dieser Stecker hier. Also dieses besondere Plug In hat über 400 verschiedene Arten von Filtern, die Gimp Insgesamt verbessert, obwohl Gimp hat eine Menge von Filtern eingebaut, diese spezielle Plug in bereits installiert haben wird Sie mit viel mehr Optionen versus was wir direkt von Gimp bekommen Also lassen Sie mich Ihnen zeigen, wie Sie diese speziellen Plug Ins installieren . Eine für Windows und eine für Mac. Lassen Sie uns zuerst einen Blick auf Windows werfen. Also hier sind die Fenster Zip eingereicht, und hier ist es, entpackt. Im Inneren finden Sie eine Reihe von Dateien. Aber was wir für Windows tun müssen, ist richtig. Klicken Sie auf und kopieren Sie diesen Ordner, und dann müssen wir erneut zu einem bestimmten Ordner gehen, um herauszufinden, wo genau er installiert werden soll. In diesem Fall müssen wir zurück zu 2.10 gehen und dann nach unten scrollen, bis Sie Plug Ins finden, richtig? Klicken Sie auf, und wählen Sie Einfügen. Sie werden dann diesen Ordner genau wie diesen in dort sehen. Und dann müssen Sie gimp neu starten, damit die Installation abgeschlossen ist, und dann werden Sie diese Plug-in-Option direkt hier unten im Filtermenü sehen . Jetzt, für Mac-Benutzer, müssen Sie nur noch einen Schritt zurück gehen, Plug-Ins finden, und dann müssen Sie in den Ordner gehen, aus dem Sie entpackt haben, und kopieren Sie den Fuller und diese Datei hier. Kopieren Sie also beide und fügen Sie sie dann in hier und wieder ein. Sie müssen neu starten. Dann finden Sie den Stecker in der gleichen Stelle. So schnell, wir sind fast fertig. Ich werde dir einfach etwas anderes sehr schnell zeigen. Als du angefangen hast, ist das, was aussehen wird. Aber was ich tun möchte, ist, dass ich diese vier Logos hier loswerden möchte, weil ich sie wirklich nicht brauche. Gibt es nur die Sponsoren für diesen speziellen Plug in. Und sie wollen auch das Thema zu einem dunkleren Thema ändern, das besser zu dem Thema passt , das ich im Gimp habe. Um das zu tun, gehen wir zu den Einstellungen. Wir werden diese Option hier deaktivieren, und wir können das Thema hier von Standard zu dunkel ändern. Es gibt auch andere Optionen, aber ich werde alles andere vorerst auf der Standardeinstellung belassen. Klicken Sie auf OK, und klicken Sie dann auf. Abbrechen, da wir den Plug in neu starten müssen, damit das Design wirksam wird. Alles klar, also mach weiter und beende die Installation deiner Pinsel, der Plug in, um die anderen beiden Ressourcendateien zu erhalten, und dann gehen wir weiter und beenden unser Aquarellbild im nächsten Tutorial. 86. Wasserfarbe Teil 2: Hallo und willkommen zurück. In Ordnung, jetzt, wo Sie alle Ihre Dateien und alles installiert haben, werden wir weitermachen und unser Aquarell-Kunstwerk erstellen. Das erste, was Sie tun müssen, ist die Größe Ihres Bildes so zu ändern, dass es 1400 Pixel breit ist. Und dann, für die Höhe, wird es abhängig von dem Bild, das Sie ausgewählt haben, wenn Sie genau das gleiche Bild ausgewählt haben als es 931 Pixel hoch sein sollte. Wenn Sie ein anderes Foto ausgewählt haben, sich keine Sorgen um die Höhe. Solange es um 900 geht, sollte das gut sein. Und dann können wir zu Filtern gehen und unseren neuen Plug in auswählen, um mit dem Aquarell-Aspekt des Bildes zu beginnen . Also das erste, was wir tun werden, ist, gehen Sie zu unserer Suchoption direkt hier und geben glatt, so dass wir das Gesamtbild glätten können und wir werden bilaterale diese Luft , die Standardeinstellungen, und das ist, was werden wir benutzen. Gehen Sie voran und klicken Sie, wenden Sie sich an. Wir werden eine Suche nach Contour machen und wir wollen Segmentierung wieder Standardwerte, aber wir wollen sicherstellen, dass der Ausgabemodus auf neue Ebenen eingestellt ist. Klicken Sie auf Anwenden, und dann auf das wird und eine neue Ebene mit diesen Filtern angewendet. Lassen Sie uns voran gehen, schalten Sie diese Schicht jetzt stecken. Menü ist verschwunden, aber wenn Sie zu Ihrer Taskleiste gehen, sollten Sie in der Lage sein, es zu finden. Also geh voran und klicke darauf und wir gehen Fuß. Fügen Sie den gleichen Kontursegmentierungsfilter erneut hinzu, aber dieses Mal werden wir die Einstellungen für die Glätte anpassen. Je weiter Sie rechts gehen, desto glatter das Bild, desto weiter nach links, desto detaillierter werden Sie im Bild sehen. Ich möchte Details in dieser Ebene hier in einigen Bereichen zurückbringen. Also werden wir das glatte auf so etwas fallen lassen. Und dann können wir auch die Kantenschwelle erhöhen, um zusätzliche Details im Bild zurück zu bringen . Also diese Luft die Einstellungen, die ich verwenden werde, und dann werde ich wieder auf eine neue Ebene anwenden. Ich werde diesen Schritt eins umbenennen, diesen einen Schritt, zwei weitere Details. Lassen Sie uns voran und schalten Sie den Schritt eine Ebene, und jetzt können wir sehen, dass wir mehr Details in dieser Ebene haben. Nun, um mehr Details in diese Ebene zurück zu bringen, werde ich diese Ebene unter sie verschieben. Und dann für diese Ebene, werden wir eine Ebenenmaske hinzufügen, wie Sie wissen, weiß und schwarz entfernt. Also werde ich weitermachen und eine weiße Ebenenmaske hinzufügen. Jetzt kann ich mein Pinselwerkzeug und einen Pinsel greifen. Ich wähle das hier aus, die Härte 50. Und passen Sie dann Ihre Pinselgröße entsprechend an. Und dann können Sie klicken und einige dieser Details zurückmalen. Also möchte ich vielleicht hier in die Bäume kommen und ein kleines Detail und diese Bäume hinzufügen, denn der Fokus unserer Kamera liegt auf den Biker hier. Also wollen wir und zurück Detail mit allen Elementen, die im Einklang mit den Menschen auf dem Fahrrad sind . Also werde ich diesen Teil hier rückgängig machen, indem ich meinen Ex-Schlüssel beim Malen mit Weiß trage, um etwas davon zu entfernen und dann wieder mit Schwarz in die Bäume hier malen, um etwas von diesem Detail zurückzubringen . Nun, wenn du willst, könntest du es wirklich und detaillieren, wo du willst. Ich werde mich vorerst auf diesen Bereich konzentrieren. Sobald Sie mit dem Hinzufügen Ihrer Details fertig sind, werden wir diese beiden Ebenen nehmen und sie in eine neue Ebenengruppe einfügen. Nennen wir es einfach Detailschritt. Technisch gesehen können wir diese beiden Ebenen nehmen und sie zusammenführen, indem wir zusammengeführt auswählen. Allerdings arbeite ich gerne zerstörungsfrei, und zu einem späteren Zeitpunkt möchte ich vielleicht in einem zusätzlichen Detail zu meinem Kunstwerk zurückkommen. Wenn ich also diese Schichten abflachen würde, wäre ich nicht in der Lage, das zu tun. Deshalb setze ich sie gerne in einer neuen früheren Gruppe zusammen. Und dann können wir mit der rechten Maustaste klicken und Neu aus Sichtbar auswählen. Es kombiniert dann beide Schichten und legt sie auf eine neue Ebene, so dass ich später wiederkommen und von hier aus neu beginnen kann , anstatt von vorne zu beginnen. Jetzt ist es und eine neue Ebene werden wir es mit Weiß füllen hieß Hintergrund, und wir werden es unter die sichtbare Ebene setzen. Jetzt werden wir eine Ebenenmaske auf die sichtbare Ebene in weißem Klick beenden und jetzt beginnt der Spaß , weil wir unser Pinselwerkzeug mit dem Buchstaben B greifen können, und dann können wir unsere neuen Aquarellpinsel verwenden, um ihm einen malerischeren Effekt zu geben , damit Sie einen dieser Aquarellpinsel auswählen können, den Sie verwenden möchten. Ich gehe weiter und wähle 006 aus, um mich anzufangen. Sobald Sie diesen Pinsel ausgewählt haben, können Sie sehen, dass er ganz anders aussieht als der vorherige Pinsel. Wir wollen auch in unsere Werkzeugoptionen gehen und einige Auswahlen treffen, dass die Brustgröße zu groß ist . Ich werde auf etwa 150 gehen und ich möchte auch Dynamics Bleistift-Shader aktivieren. Wenn Sie also hier auf dieses Symbol klicken, können Sie verschiedene Dynamikarten auswählen oder die Art und Weise, wie der Pinsel standardmäßig auf Ihren Campus angewendet wird . Sie haben wahrscheinlich grundlegende Dynamik, und das wird nur einen einfachen Strich anwenden, der mit der Größe und der Form Ihres Pinsels übereinstimmt . Wenn Sie eine andere Dynamik auswählen, unterscheidet sich die Art und Weise, in der Ihr Pinsel mit der Ebene interagiert, an derSie arbeiten , an der Daher müssen Sie alle diese Schritte durchlaufen und mit ihnen herumspielen, um zu sehen, wie Ihre Paintbrush wird mit diesen verschiedenen Optionen angewendet. Wenn Sie also Bleistift-Shader auswählen, dauert es vielleicht ein oder zwei Minuten. Vergessen Sie, diesen Pinsel tatsächlich zu aktivieren, da es sich um einen sehr umfangreichen oder intensiven Pinseltyp handelt, der den Pinsel beim Malen um Ihr Bild unterschiedlich aufträgt. Es wird also kein glatter, konsistenter Schlaganfall sein . Es wird zufällig sein, und es wird realistischere Striche zu Ihrer Leinwand im Vergleich zu einem einfachen, konsistenten Strich hinzufügen . Also gerade jetzt versucht Gimp immer noch, diesen Pinsel zu aktivieren, und ich kann ihn noch nicht überall anwenden, bis Gimp aufholt und tatsächlich den Pinsel lädt. Jetzt, da ich es habe, stellen Sie sicher, dass Sie Ihre Ebenenmaske ausgewählt haben. Du willst mit Schwarz malen, und das andere, was du tun willst, ist, dass du zwei Dinge tun willst. Sie möchten die Deckkraft beim Malen anpassen, und Sie möchten den Aquarellpinsel ändern, sodass er dadurch weniger konsistent und realistisch ist. Also werde ich Ihnen nur sehr schnell zeigen, was passiert, während Sie malen, so wie Sie sehen können viel ein Durchgang um den Rand dieses Pinsels in verschiedenen Teilen des Bereichs, den ich auftrage, unterschiedlich ist . Also gehe ich nur um die Kanten hier, und es wendet diesen Strich zufällig an, weil Sie sehen können, dass der eigentliche Pinsel selbst die Größe ändert und er sich dreht. Und es fügt verschiedene zufällige Striche hinzu. Wenn Sie diese Tools haben, richten Sie Optionen wie wir es tun. Also das, was ich jetzt tun möchte, ist meine Deckkraft fallen lassen und wieder einen anderen Pinsel auswählen. Jeder Pinsel ist in Ordnung, weil sie alle gehen, um Ihnen verschiedene Arten von Strichen, verschiedene Ergebnisse zu geben und wird Ihre Aquarellmalerei realistischer aussehen. Also werde ich etwas kleiner für diesen Pinsel runtergehen, und ich werde das Gleiche tun. Ich werde nur zufällig entlang der Bildränder malen, und Sie können sehen, dass die Striche anders sind als vorher. Ich gehe weiter und schalte meine ursprüngliche Ebene hier aus, und meine Details gehen später, weil wir die nicht wirklich brauchen, die eingeschaltet sind, also gehe ich weiter und gehe weiter, bis der geraden Rand unseres Fotos verschwindet weil ich keine gerade Kante für dieses besondere Aquarellbild möchte. Okay, ich werde weitermachen, die Deckkraft fallen lassen, ich werde einen anderen Pinsel wählen, und ich werde diesen etwas kleiner machen. Lasst uns das auch tun. Und dann werde ich einfach zufällig in den Hintergrund hier klicken, nur um es ein bisschen mehr zu zerbrechen . Nun, die Kapazität, denke ich, ist ein bisschen zu hoch. Also werde ich das mit Commander Control und den Buchstaben E rückgängig und ich werde das nur ein bisschen abnehmen, weil ich nur ein paar zufällige Striche im Hintergrund hier haben möchte , damit es aussieht, als wären einige Farbstriche auf die eigentliche Bild selbst. Und das hilft, es zu brechen und macht es realistischer und eher wie ein Aquarellbild aussehen , anstatt es einfach leer zu lassen, wie es vorher war. In Ordnung, lassen Sie uns weitermachen und unser Aquarell-Texturpapier hinzufügen. Wir möchten sicherstellen, dass wir eine Ebene ohne Ebenenmaske ausgewählt haben. Wenn Sie gehen, um es in Ihr Dokument einfügen, Sonst wird es nicht funktionieren. Ich werde nur auf klicken, Erstellen Sie eine neue Ebene hier, und es fügen Sie dann den bestimmten Inhalt, den ich in eine neue Ebene kopiert. Nennen wir es Aquarellpapier. Ich werde es so skalieren, dass es 1400 Pixel breit ist, und dann müssen wir es nur in Position bringen. Wir müssen auch einen Mischmodus hinzufügen, damit wir den Rest unseres Kunstwerks sehen können. Gehen wir also zu Mischmodi und wählen multiplizieren. Das fügt unserem Kunstwerk etwas Textur hinzu. Und jetzt möchte ich das hier liegend loswerden, und ich habe auch einen Text in dieser Datei. Also werde ich auf Ebene gehen und Ebene zu Bildgröße auswählen. Ich werde eine weiße Schicht Maske hinzufügen und dann mit meinen Aquarellpinseln, werde ich einfach mit Weiß malen, um etwas von dem Aquarellpapier hier unten loszuwerden . Ich muss zuerst meine Deckkraft erhöhen, wenn auch nicht wie in diesem Pinsel zu viel. Also werde ich voran gehen und mir einen anderen aussuchen. Ok? Das scheint ein bisschen besser zu funktionieren. Ich will nicht die Papiertextur loswerden. Ich werde einige hier unten lassen, ist gut, zumindest für jetzt, bis ich etwas anderes beschließe. Also geh einfach weiter und säubere deine Ränder hier unten. Und ich denke, ich möchte wieder mit einem neuen Pinsel zu dieser Ebenenmaske zurückkehren. Es hat das hier versucht, und ich werde in einigen Ecken hier ein bisschen mehr malen, ein bisschen mehr hier oben ein bisschen hier drin. Das gefällt mir nicht. Also werde ich zu Schwarz wechseln, damit ich hier etwas davon loswerden kann, die Deckkraft erhöhen und das ist nur eine Frage des Geschmacks. So Jahre wird definitiv anders aussehen als meine, weil Sie Rapacity Einstellungen Ihre Pinsel, die Sie auswählen, sie sind alle anders. Gehen Sie also voran und tun Sie genau das, was Sie mögen, basierend auf Ihrer kreativen Vision, und das war's. Unser Aquarellbild ist jetzt fertig. Das letzte, was ich empfehlen würde, ist, eine neue Ebene zu erstellen, sobald Sie fertig sind, alle Ihre Einstellungen in Ihren Pinseln und Ihren Texturen anzuwenden und all das, Also lassen Sie uns voran und tun, wenn Sie fertig sind. Wenn nicht, gehen Sie weiter und arbeiten Sie weiter an Ihrem Aquarellbild und legen Sie sie dann alle in diese neue Gruppenebene, und das war's. Sobald Sie fertig sind, werde ich Sie im nächsten Tutorial sehen, weil wir auf unserer Kopfzeile für unsere Webseite arbeiten müssen. Also, wenn Sie bereit sind, damit zu beginnen, gut muss es tun. 87. Kopf-+ Hero: Hallo und willkommen zurück. Ordnung, wir werden weitermachen und an der Kopfzeile und dem Heldenbereich in diesem Tutorial arbeiten, weil der Header wirklich einfach und super einfach zu tun sein wird. Ich ging weiter und tippte meine primäre Navigation aus. Ich habe fünf Leerzeichen zwischen jedem der Menüpunkte hinzugefügt. Ich benutzte Eisenbahn fett und 24 für die Größe und weiß, natürlich. Jetzt muss ich nur noch diesen Inhalt leichter lesen. Aber zuerst möchte ich Ihnen nur zeigen, wo ich meine primäre Navigation platziert habe, die sich auf der linken Seite der ersten Spalte befand, und ich habe 30 Pixel Platz oben im Browser oben in der primären Navigation verwendet . Ich habe auch eine Richtlinie mit 700 Pixeln nach unten hinzugefügt, um die vollständige Zeile für den Heldenbereich darzustellen . Also gehen Sie weiter und ziehen Sie diese Richtlinien heraus und beenden Sie Ihre primäre Navigation und setzen Sie sie an der Stelle. Sobald Sie das haben, müssen wir dann einen Schlagschatten für den Inhalt hinzufügen. Aber zuerst müssen wir auf Ebene gehen und Ebene auswählen, um Größe zu emittieren, um die Ebenenbegrenzungsgröße zu erhöhen , und dann gehen wir zu Filtern, Licht und Schatten Schlagschatten, um unsere Schlagschatten hinzuzufügen. Ich werde eins für die Deckkraft herumlaufen und dann einfach weitermachen und andere Anpassungen vornehmen. Sie möchten, dass Ihr Text leichter lesbar ist. Also werde ich mit diesen Einstellungen hier gehen. Sobald Sie fertig sind, gehen Sie weiter und klicken Sie auf. OK, Sobald Sie Ihre primäre Navigation fertig haben, lassen Sie uns voran und legen Sie sie in eine neue Layergruppe namens Header. Und obwohl es nur eine Ebene gibt, organisiere ich trotzdem gerne alle Ebenen und gruppiere sie basierend auf diesem Abschnitt. Jetzt müssen wir vier Logos herunterladen, die wir unserem Heldenbereich hinzufügen. Also wird die 1. 1 hier sein, und Sie werden eine Suche nach diesem machen. Sie möchten die PNG-Datei finden, die schwarz-weiß sein wird. Aber sobald Sie darauf klicken, sehen Sie die transparente Datei. Also gehen Sie weiter, kopieren Sie das und fügen Sie es ein, und dann müssen wir nur die Größe der Ebene ändern. Also schnappen Sie sich Ihre Waage Werkzeug und dann für die mit, wir werden für 20 tun und lassen Sie uns voran und platzieren Sie es, um unsere primäre Navigation auszurichten , und ich möchte sicherstellen, dass der gesamte Text innerhalb des Berges ist. Kate. Lassen Sie uns die Ebenenbegrenzungsgröße erhöhen und verwenden Sie Commander Control und F zum Einfügen sind Schlagschatten . Können wir drei weitere Logos zum Download haben? Die 2. 1 ist Trek Logo, Fox Shocks Logo, und dann der letzte ist das hören? Also gehen Sie weiter und finden PNG-Dateien für jede Kopie, fügen Sie sie ein und dann gehen wir weiter und ändern Sie sie in der Größe. Soweit die Größe angeht, werden wir 50 Pixel hoch für jede der Ebenen machen. Jetzt, da wir das getan haben, können wir voran gehen und diese in Position bringen. Aber die Frage ist, wollen wir unsere Logos über die Falte oder unter der Falte setzen? Ich denke, in diesem Fall für dieses spezielle Unternehmen ist es ein bekanntes Unternehmen, und ich glaube nicht, dass das Hinzufügen des sozialen Beweises über der Falte so wichtig ist wie wir es mit anderen Unternehmen getan haben , die nicht so bekannt sind wie dieses Unternehmen. Also, das ist nur etwas anderes, das Sie berücksichtigen müssen, wenn Sie Ihre sozialen Beweis oben in der Helden-Sektion oder knapp unter der Falte hinzufügen . Ich denke, für diesen Fall ist es in Ordnung unter der Falte. Also für dieses erste Logo, Ich gehe zu einer Linie auf der linken Seite der zweiten Spalte, Das letzte Logo, das ich werde auf der rechten Seite der zweiten Zehe ausrichten. Letzte Spalte. Gehen wir weiter und greifen unser Ausrichtungstool, damit wir jede dieser Ebenen greifen können, also habe ich Probleme, mein Logo auszuwählen. Also, wenn ich zu meinem anderen lokalen gehen, erscheinen oben. Wenn ich die Layer-Grenze zuschneide, sollte ich jetzt in der Lage sein, meinen lokalen Standort auszuwählen. Okay, lassen Sie uns voran und wählen Sie die anderen beiden, indem Sie unsere Umschalttaste gedrückt halten und auf jedes Logo klicken , erste Element und eine Zeile nach oben auswählen. Sie müssen auch mein zweites Logo direkt in der Mitte dieser beiden Logos zentrieren, also greifen wir unser Auswahlwerkzeug, treffen eine Auswahl, und dann müssen wir es an der Mitte der Auswahl ausrichten. Alles klar, los und de selektieren, und das letzte, was wir für unsere Logos tun müssen, ist ein weißes Farb-Overlay auf diese beiden Logos anzuwenden , also lasst uns voran gehen und eine neue Ebene namens Overlay erstellen. Füllen wir es mit Weiß aus. Und lassen Sie uns alle Logos in eine neue Ebenengruppe namens Logo setzen. Wir möchten sicherstellen, dass wir nicht das erste Logo im Heldenbereich auswählen. Also greifen Sie die anderen drei, legen Sie sie hinein und greifen Sie dann Ihre Overlay-Ebene und ändern Sie Ihren Mischmodus in Addition Jetzt müssen wir diese Logos Gruppenebene zu nehmen und dupliziert, weil wir brauchen und den Schlagschatten . , und wir können keine Schlagschatten zu gruppierten Ebenen hinzufügen. Was wir also mit dieser neuen Ebene tun werden, ist, dass wir mit der rechten Maustaste klicken und Ebenengruppe zusammenführen auswählen . Und auf diese Weise, wenn unser Kunde hat eine Änderung in einmal die Logos, jede andere Reihenfolge, können wir zurück auf die ursprüngliche Gruppen-Ebene hier gehen und sie neu anordnen gegen Zusammenführen, ohne diese Option. Und dann müssen wir von vorne anfangen, indem wir ein Overlay herunterladen und erstellen, damit Sie diese Ebene tatsächlich deaktivieren können, weil wir sie jetzt und dann nicht brauchen. Sobald Ihr Client den Entwurf endgültig genehmigt hat, können Sie diesen Gruppen-Layer vollständig löschen, bevor Sie ihn dem Webentwickler übergeben. Okay, also können wir jetzt voran gehen und unsere Tastenkombination Commander Control und F benutzen, um den Schlagschatten hinzuzufügen. Also das letzte, was zu tun ist, ist deklariert werden Action Button genannt. Lass uns voran gehen und Graham sind Textwerkzeug. Ändern wir die Schriftzeichen auf 36 Weiß für die Farbe. Lassen Sie uns eine neue Ebene namens Schaltfläche erstellen. Stellen Sie sicher, dass Sie es mit Transparenz füllen. Nun, bevor wir die Schaltfläche erstellen, müssen wir zu unseren Werkzeugoptionen gehen und sicherstellen, dass die dynamischen Einstellungen auf die grundlegende Dynamik zurückgesetzt werden. Dann gehen Sie weiter und wählen Sie eine Farbe Ihrer Wahl aus. Und dann, um den Knopf zu machen. Wir werden nur mehrere Male klicken, um die Schaltfläche in der gewünschten Größe zu erstellen. Und je mehr wir hinzufügen, desto dunkler wird der Knopf. Also werde ich gleich dorthin gehen, und ich werde es unter den Text verschieben. Lassen Sie uns voran und Graham sind Textebene als auch. Erhöhen wir die Begrenzungsgröße in. Lassen Sie uns einen Schlagschattenbefehl oder Steuerelement hinzufügen und der Buchstabe F kann gehen Sie voran und gruppieren diese beiden Ebenen. Lassen Sie uns weitermachen und auch eine neue frühere Gruppe für den Heldenbereich erstellen. Das Letzte, was ich tun möchte, ist, dass ich diesen Knopf hier greifen und ihn ein wenig überziehen möchte, weil er gerade etwas unausgewogen ist. Also geh ich wieder rein und schnappe mir meinen angerufenen Action-Button. Gehen wir weiter und beschneiden die Grenze auch mit Shift Plus C und ich werde sie direkt unter unser Logo hier platzieren. Ihr Hass. Das war's also. Unsere Kopfzeile und der Heldenbereich sind jetzt in der nächsten Lektion fertig. Wir gehen weiter und beginnen mit dem ersten Teil ihres Körpers. 88. Körperinhalt: Hallo und willkommen zurück. In Ordnung, wir werden weitermachen und anfangen, an dem Körperteil unserer Webseite zu arbeiten. Wir brauchen drei Bilder, und Sie gehen zu Pixel Bay Dot com oder Google Bilder und finden drei Bilder von Radfahrern so weit wie die Größe, die wir gehen, um die 1. 2 Bilder auf der linken Seite, fünf Spalten breit, und dieses Bild hier über wird sieben Spalten breit sein. Also gehen Sie voran , skalieren Sie Ihre Bilder entsprechend. Benannt die Ebenen um, und vergewissern Sie sich, dass Sie auf die Ebene gehen und die Ebenenbegrenzung der einzelnen Bilder erhöhen . Denn später werden wir einen Aquarellpinsel nehmen und die Kanten der Bilder anpassen, um diesen Aquarelleffekt zu erzeugen . Alles klar, wenn Sie das getan haben, müssen wir dann reingehen und unsere Campusaugen vergrößern. Ich werde jetzt 3500 machen. Und wenn ich dann meinen Heldenbereich hier anschalte, sind alle meine Bilder nicht sichtbar. Und das liegt daran, dass wir innerhalb des Heldenabschnitts innerhalb der Aquarellgruppe diese Ebene hier als aktiv bezeichnet haben. Das ist zu groß. Es verbirgt also meine Bilder. Also werde ich mein Rechteck-Auswahlwerkzeug greifen, und ich werde die Größe der Layer-Grenze ändern, so dass der Rest der Seite gesehen werden kann. Okay, jetzt, da meine Bilder sichtbar sind, muss ich auch zu meiner Hintergrundebene gehen. Sobald ich das schließe und ich muss die spätere Grenzgröße erhöhen und dann müssen wir es mit Gewicht füllen . Alles klar, wir sind jetzt bereit, mit der Arbeit an unseren Bildern und unseren Inhalten zu beginnen, bevor wir an den Bildern arbeiten . Gehen wir weiter und fügen Sie unseren Titel hinzu. Also werden wir Oswald Bold benutzen. Lass uns 76 und Dark Ray machen. Ich werde das jetzt einfach hochziehen und aus dem Weg gehen. Ok? Lassen Sie uns weitergehen und einige zusätzliche Inhalte und wir werden es sieben Spalten breit machen , und wir werden die Höhe der es später anpassen, sobald wir alle unsere Bilder an Ort und Stelle bekommen. Also lasst uns Georgia 16 benutzen. Schnappen Sie sich etwas Dummy-Text und eingefügt in. In Ordnung, ich werde diese beiden Schichten für einen Moment ausschalten, damit wir an unseren Bildern arbeiten können . Lasst uns einen unserer abgerundeten Aquarellpinsel schnappen. Ich werde wählen Nummer 006 Stellen Sie sicher, in den Werkzeugoptionen haben Sie dynamisch eingestellt, um Bleistift-Shooter und dann passen Sie Ihre Deckkraft entsprechend. Ich fange das 100% an und dann müssen wir eine weiße Ebenenmaske hinzufügen. Und dann mit Schwarz können wir entlang der Ränder malen, um diese harte Kante zu entfernen. Also werde ich das für alle drei Bilder tun, und dann werden wir sie in Position bringen. Also mach weiter und arbeite auch an deinen Bildern. Versuchen Sie, so viel von der geraden Kante wie möglich zu entfernen. Passen Sie Ihre A Pass it E und Ihre Pinselgröße an, während Sie arbeiten, um weitere zufällige Striche erstellen können. Sobald Sie mit Ihren Bildern fertig sind, schalten wir das Raster wieder ein, damit wir diese genau dort ausrichten können, wo sie sein müssen. Ich werde auch den Inhalt für jede Ebene mit Shift plus C beschneiden und das wird es einfacher machen, alles auszurichten. Und ich werde diese 16 Spalten Wein setzen, und um es zu verschieben, wollen wir sicherstellen, dass wir das Bild Thumbnail und nicht die Ebenenmaske auswählen. Andernfalls verschieben wir die Ebenenmaske und nicht das Bild. Also möchte ich diese beiden unten ausrichten. Okay, das sieht also ziemlich gut aus. Lasst uns weitermachen und unseren Titel ausrichten. So ist der Inhalt ein wenig zu groß. Also werde ich voran gehen und die Zeile es so, dass der Text an der Spitze ihres Titels ausgerichtet ist, und es ist ein wenig zu lang hier unten, also werde ich voran gehen und einige dieser Inhalte entfernen. Okay, das sieht also ziemlich gut aus. Nie schnell. Ich will dir noch einen Tipp geben. Ich werde voran gehen und unseren Titel in unserem Bild hier abschalten. Und ich werde diese Ebene duplizieren, nur um Ihnen diesen Tipp zu zeigen. Also, wenn es um Inhalte geht, je breiter dieser Inhalt ist, desto schwieriger ist es zu lesen. Und Studien haben gezeigt, dass dies wahr ist. Ihre Augen neigen dazu, müde zu werden, je länger die Textzeile ist. Also sogar Tante sieben Säulen breit. Es ist immer noch ein bisschen schwer zu lesen, weil die Zeilen noch ziemlich lang sind. Jetzt ist es viel einfacher als 12 Spalten. Aber selbst dann würde ich nicht mehr als sieben Säulen breit gehen. Es sei denn, Sie machen den Text natürlich viel größer. Das gleiche gilt, wenn Sie zu weit in die andere Richtung gehen und die Zeilen zu schmal machen, wird es jetzt schwierig, wieder zu lesen, weil Sie nur 2 bis 3 Wörter pro Zeile bekommen, und das macht es viel schwieriger zu lesen. Also würde ich gerne irgendwo zwischen 3 und 5 Spalten im Durchschnitt hingehen, und ich werde das basierend auf der Größe des Textes anpassen. Gehen Sie weiter und machen Sie das alles rückgängig. Lassen Sie uns dies in eine neue Ebenengruppe mit dem Namen Inhalt einfügen. Dann haben wir unsere Bilder. Letzt haben wir unsere Körpergruppe und erraten, was ihr Körperinhalt alles getan wird. Also von hier an, ich habe wirklich keine zusätzlichen Tipps für Sie im nächsten Tutorial, das wir behandeln werden sind Action Section für unseren Körper genannt, die aus einem Registerformular bestehen wird, das ausfüllen kann bestimmte Termine . Das wird sich nicht viel von dem unterscheiden, was wir in früheren Projekten gemacht haben, aber ich werde es mit Ihnen durchgehen, nur damit wir dieses Projekt abschließen können und dann die Fußzeile danach machen. Wenn Sie also bereit sind, mit der Registrierung zu beginnen, wird ein Teil dieses Projekts weitergehen und damit in der nächsten Lektion beginnen. 89. Body: Hallo und willkommen zurück. In Ordnung, wir werden einen Registry-Abschnitt innerhalb des Hauptinhalts erstellen, und wir werden ein großes, vollständiges Beschnittbild als Hintergrund verwenden . Also gehen Sie weiter und finden Sie eine heruntergeladene, ändern Sie die Größe bis 1400 Pixel breit, und wenden Sie dann Ihre Aquarell-Pinsel entlang der oberen und unteren Kanten des Bildes an, damit wir die Konsistenz des Designstils auf dieser Seite behalten können. Und denken Sie daran, Sie eine weiße Ebenenmaske hinzufügen müssen, um dies zu tun und auch die Ebenenbegrenzungsgröße zu erhöhen. Und wenn du fertig bist, kannst du die Ebenengrenze wieder mit Shift plus C beschneiden . Ich werde meinen C t einen Knopf greifen und dupliziert und dann mit meinem Move-Werkzeug. Ich klicke einfach und ziehe weiter nach unten, bis es nach unten kommt. Ich werde die Ebenengrenze auch manuell mit meinem Rechteck-Auswahlwerkzeug zuschneiden, damit ich sie an der Mitte unseres Dokuments ausrichten und dann alle auswählen kann. Es muss auch diese Schicht heraus und unten bringen. Ausgewählt mit Ihrem Lehman-Werkzeug und dann einen Linienmittelpunkt des Ziels. Basierend auf dieser Auswahl de select, Gehen Sie voran und schließen Sie diesen Gruppenspieler und dann werden wir zu betrügen, indem wir unser Filterformular aus einem früheren Projekt greifen . Also geh ich weiter und klicke einfach und ziehe das hier rüber. Jetzt werden Sie oft Elemente verwenden, die Sie zuvor in neuen Projekten erstellt haben. Jetzt natürlich können Sie natürlichimmer zurückgehen und diese von Grund auf neu wiederholen. Wenn Sie ein etwas anderes Design verwenden möchten, möchten Sie vielleicht abgerundete Ecken anstelle einer perfekt quadratischen Ecke. Also, in diesem Fall würde ich es wiederholen. Wenn nicht, gibt es keinen Grund, warum Sie vorhandenen Inhalt nicht verwenden können, ihn für ein anderes Projekt wiederverwenden und dann nur entsprechend für dieses Projekt aktualisiert werden können. Also werde ich mein Move-Werkzeug hier Einläufe nehmen, und wählen wir Wählen Sie einen Layer Kerl, weil ich auf dieses Datum klicken möchte hier. Ich möchte herausfinden, wo es ist, und dann kann ich es entsprechend aktualisieren. Ich brauche es für dieses Design nicht, also werde ich es löschen, wenn ich diese Ebene lösche und ich werde diesen Inhalt nehmen und auch gelöscht. Können wir hier hineinzoomen, damit ich mein Textwerkzeug greifen und diesen Inhalt aktualisieren kann, um das Startdatum zu starten? Lassen Sie uns alle wählen Lassen Sie uns die Farbe zu Weiß ändern und ich werde auch Oswald fett zu tun. Lassen Sie uns das Gleiche für den Inhalt hier tun. Es ist immer noch schwer, diesen Inhalt direkt hier zu lesen. Also werde ich hier zu meiner Hintergrundebene gehen und die Deckkraft ändern, indem ich sie von 22 erhöhe . Sagen wir gleich um die 80. Okay, das ist jetzt leichter zu lesen. Ich werde den Text nur ein wenig nach oben bewegen, also ist er nicht zu nah an den Filterformularen. Lassen Sie uns voran gehen und und eine Führung, so dass wir die nächste Ebene als auch ausrichten können. Ich möchte auch die Farbe der Rose ändern, also werde ich jede Zeile auswählen und mit Weiß füllen. Okay, ich werde diesen Inhalt nach unten verschieben und das in Buch ändern. Jetzt lass es uns größer machen. Lassen Sie uns 48 und Oswald wieder mutig machen. Ich werde den Inhalt mit Shift Plus E zuschneiden, und ich muss diese Zeile auch herausnehmen, damit ich sie mit meinem Ausrichtungstool auswählen kann. Dasselbe mit ihrem Inhalt. Und dann gehen Sie weiter und richten Sie sich an der ersten Gegenstandsmitte und Mitte des Ziels aus. Ok. Ich muss die wieder reinlegen. Ich werde nur ein paar dieser Schichten hier neu anordnen. Ich möchte diesen Filter auch direkt unter den Registrierungsinhalt hier nach oben verschieben. Also ist es zusammen. In Ordnung, das war's also für den Registrierungsbereich. In der nächsten Lektion werden wir unser Design fertigstellen, indem wir die Fußzeile und alle letzten Optimierungen durchführen. 90. Fußer: Hallo und willkommen zurück. In Ordnung, also für den Fuß oder Abschnitt, ging ich voran und tat es. Und es ist nichts Schickes, ziemlich langweilig. Professionell. Nicht viel mehr konnte ich mit dem Fußzeilenabschnitt tun. Es ist nur da, um zusätzliche Links für Informationen zur Verfügung zu stellen, die ein Besucher suchen könnte . Ich habe hier einen Hover-Zustand für eines der Symbole, damit wir sehen können, wie es aussehen wird, wenn wir den Mauszeiger über eines dieser Social-Media-Icons bewegen. Es wird ein bisschen dunkler. Ich habe die Branding-Farben von der Firma selbst verwendet, und ich habe diese Farben auch wieder in den Links verwendet. Du willst wahrscheinlich nicht zusehen, wie ich das von Grund auf mache. Es ist wirklich einfach zu tun. Mittlerweile. Du solltest wissen, wie es geht. Also gehen Sie weiter und üben Sie, was Sie gelernt haben, um die verschiedenen Inhalte für die Fußzeile und Ihre Social-Media-Symbole zu erstellen . Addy Hover gibt an allen verschiedenen Längen Copyright-Informationen, einen Datenschutz-Link und alles andere, was Sie hinzufügen möchten. Dann, genau wie zuvor, müssen wir durchgehen und sicherstellen, dass das Design keine Anpassungen benötigt. Das einzige , was ich sehe, dass wir tun müssen, ist unser Abstand zwischen jedem der Abschnitte. Also gehen Sie hinein, stellen Sie sicher, dass die Abschnitte den gleichen Abstand zwischen ihnen haben. Und dann ist das letzte, was wir tun müssen, um den Heldenbereich zu verbessern, unser Aquarellbild dunkler zu machen . Es ist zu hell, es ist zu weiß. Es ist irgendwie schwer. Lesen Sie den gesamten Inhalt. Also, was ich getan habe, ist, dass ich mit einer neuen strukturierten Ebene, die ich von Picks heruntergeladen habe. Obey und ich haben es über mein Kunstwerk gelegt und einige Anpassungen an dem Papier vorgenommen. Ich lasse die Deckkraft fallen. Ich habe den Mischmodus so geändert, dass er multipliziert wird. Und dann habe ich eine Ebenenmaske hinzugefügt, um die harte Kante entlang der Unterseite zu entfernen. Und ich finde, dass es mit der dunkleren Farbe darüber viel besser aussieht als das helle Weiß , weil ich denke, dass es wieder zu schwer zu lesen macht. Das verbessert es definitiv. Das einzige andere, was ich tun kann, ist hierher zu kommen und etwas von der Wasserfarbe hier unten zu entfernen und es irgendwie ein wenig zu tonisieren. Abgesehen davon, denke ich, dass wir alle fertig sind. Also, herzlichen Glückwunsch zum Abschluss aller sieben Design-Projekte. Üben Sie, was Sie gelernt haben. Erstellen Sie ein neues Design für dieses spezielle Unternehmen für Ihr Portfolio. Und dann, wenn Sie möchten, nehmen Sie eines der Designs, die Sie für Ihr Portfolio erstellt haben, und posten Sie sie im Abschnitt Q und A , um Ihre neuen Designfähigkeiten zu zeigen. Oder vielleicht möchten Sie einfach nur Feedback zu den Entwürfen, die Sie erstellt haben, und ich würde gerne einen Blick auf diese Designs werfen und gegebenenfalls Feedback geben. Sie können am Ende einen besseren Job machen, als ich diese Seiten entwarf. Wenn ja, gratuliere ich Ihnen und dann werden Sie wissen, dass Sie auf dem Weg zum Erfolg sind. Als Webdesigner, vielen Dank fürs Zuhören und einen tollen Tag haben.