Photoshop für Unternehmer:innen: Webdesign Mockup | Jeremy Deighan | Skillshare

Playback-Geschwindigkeit


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

Photoshop für Unternehmer:innen: Webdesign Mockup

teacher avatar Jeremy Deighan, Online Instructor | www.jeremydeighan.com

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

7 Einheiten (58 Min.)
    • 1. Photoshop für Unternehmer : Web-Design Mockup

      3:08
    • 2. Websites für Designideen reinwerfen

      7:40
    • 3. Ideen für dein Websitedesign schreiben

      5:11
    • 4. Formatieren deines Photoshop-Dokuments

      12:24
    • 5. Gestalte deine Website

      11:25
    • 6. UI zu deinem Design hinzufügen

      16:07
    • 7. Mit Photoshop erstellst du ein Web

      2:19
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

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

588

Teilnehmer:innen

1

Projekte

Über diesen Kurs

Photoshop für Unternehmer : Web-Design Mockup

Lerne, wie du Raster, Leitlinien und Elemente innerhalb von Photoshop verwendest, um web für deine eigene Website zu erstellen!

Websites sind einer der ersten Kontakte für Unternehmen und Marken. Am meisten mal, Entwirf Unternehmer entweder ihre eigene Website mit einem System wie Wordpress, oder müssen diesen Job an einen Grafikdesigner/eine Grafikdesignerin weitergeben. Wenn du nicht denkst, bevor du es aufbaust, wird dir schnell erkennen, wie schwer die Erstellung einer Website zusammengestellt kann.

Ich zeige dir, wie du ganz einfach ein web erstellen kannst, bevor du deine echte Website aufbaust. In diesem Kurs lernst du, wie du Websites recherchierst, die bereits da sind, und aussieht gut aus, um Ideen zu erzeugen. Dann schreibe dir einige Konzepte, die du für deine eigene Website möchtest. Zum Schluss entwirfst du dein eigenes Mockup mit bereits vorhandenen Assets und Vorlagen direkt von Photoshop!

Weitere Kurse in dieser Serie:

Mockup

Verbessere dein Profilbild mit Beauty Retusche

Gestalte eine Infografik

Objektentfernung

223d1443

Triff deine:n Kursleiter:in

Teacher Profile Image

Jeremy Deighan

Online Instructor | www.jeremydeighan.com

Kursleiter:in

My name is Jeremy Deighan and I am thrilled to be an online instructor, helping others achieve their own personal goals. I have had quite the range of skills and hobbies through my lifetime. I really enjoy teaching and hope to provide information to others on anything and everything I know how to do! Please take a moment to check out my courses, and if you take any please leave a review and any feedback you have!

Art and Design

I have an extensive background in different forms of art and design. I have an associates degree in Computer Animation and I've worked with various production houses to create awesome content. Adobe Photoshop has been a staple of my arsenal since I was 16 and use it faithfully to this day.

I also have a history in live visual arts, specifical... Vollständiges Profil ansehen

Kursbewertungen

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

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

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

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

Lerne von überall aus

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

Transkripte

1. Photoshop für Unternehmer : Web-Design Mockup: Hey, Leute, mein Name ist Jeremy Deegan, und heute werden wir ein Webdesign-Mock aufbauen. Grundsätzlich ist dies eine grobe Skizze oder eine einfache Vorlage, die wir an einen Grafikdesigner oder Webentwickler senden , um unsere Website für uns zu erstellen , als Unternehmer sollten wir wirklich nicht viel Zeit damit verbringen Dinge, die wir tun sollten. Wenn Sie also keine besonderen Fähigkeiten und Grafikdesign oder Web-Entwicklung haben, möchten Sie wahrscheinlich jemand anderen, der diese Fähigkeiten hat, damit für Sie umgehen lassen. Jetzt möchten wir ein einfaches Mock Up und Photoshopped erstellen, um diese Leute zu zeigen, so dass, wenn sie beginnen, die Website zu entwickeln, sie haben ein grundlegendes Verständnis dessen, was Sie versuchen zu gehen. Und je mehr Informationen Sie ihnen zur Verfügung stellen können, desto einfacher wird es sein. Also lassen Sie uns für eine Sekunde vorstellen, dass Sie ein Eiscreme-Restaurant besitzen, und ich bin ein Kunde, der an die Theke kommt, und ich sage Ihnen, ich würde gerne einen Eisbecher. Nach langjähriger Erfahrung im Eiscreme-Geschäft wissen Sie, dass jeder seine Eisbecher anders mag. Also hast du mich gefragt, was willst du? Vanille oder Schokolade? Und ich sage: Naja, Naja, Vanille, natürlich. Und du sagst, du willst Bananen? Und ich sage: Natürlich gibt es Bananen auf einem Eisbecher und du sagst, OK, , was ist mit Nüssen? Möchtest du ein paar Nüsse auf der Oberseite der Eisbecher? Und ich gehe, nein, ich will keine Verrückten. Ich bin allergisch gegen Nüsse. Oder indem Sie einfach ein paar einfache Fragen stellen, finden Sie sofort heraus, was diese Person will und nicht will. Und je mehr Informationen Sie dem Grafikdesign-Künstler oder dem Website-Entwickler zur Verfügung stellen , desto einfacher wird es für sie sein, es richtig zum 1. 2. oder dritten Mal zu bekommen, , anstatt ständig hin und her gehen und versuchen, Raten Sie mal, wonach Sie suchen. Also zurück in unserem Beispiel, wenn ich zu Ihrem Eisrestaurant komme und an die Theke komme und ich sage, Hey, Hey, ich würde gerne ein Eisbecher, Vanille mit Bananen und kühle Peitsche und eine Kirsche oben. Vielleicht etwas Schokoladensirup, aber keine Nüsse, weil ich allergisch auf diese bin. Du hättest mir keine Fragen stellen müssen, und du weißt genau, was ich will. Du kannst zurückgehen und anfangen, das sofort zu machen, und das ist irgendwie, was wir hier tun. Wir werden ein sehr grundlegendes Design einer Website erstellen und einfach einige grobe Informationen aufgeben , damit wir diese den Grafikdesign-Künstlern oder dem Website-Entwickler geben und ihnen mitteilen können , wonach wir suchen. Das erste, was wir in diesem Kurs tun werden, ist, dass wir einige Ideen von dem aufschreiben , was wir wollen, auf unserer Website. Dann machen wir eine grobe Skizze von Hand, nur um einige grundlegende Layouts zu bekommen. Und es ist in der Regel einfacher, dies von Hand zu tun, weil Sie schnell Bleistift oder Farbe und oder oder auf einer Serviette schreiben können. Wie Sie denken, das sollte aussehen, und wenn es nicht gut aussieht, können Sie es wegwerfen und von vorne anfangen. Dann, sobald Sie eine gute Vorstellung davon haben, werden wir in den Fotoshop kommen und wir werden weitermachen und einige sehr grundlegende Elemente erstellen und diese zusammenfassen, so dass wir sie bewegen können und sehen, wie es an einem tatsächlichen Website-Design. Lassen Sie uns also voran und beginnen Sie in diesem Kurs 2. Websites für Designideen reinwerfen: Wann immer ich beginne, irgendeine Design-Arbeit zu machen, ist das erste, was ich gerne mache, Forschung, und das erlaubt mir, dort zu gehen und zu sehen, was für Menschen funktioniert und was nicht für Menschen funktioniert und helfen, die kreativen Säfte fließen zu lassen, wie ich könnte sagen, möchte einige dieser Informationen auf meinem eigenen Web-Design-Mock auslegen. Also habe ich die kluge, passive Einkommensseite heraufgebracht , und das gehört Pat Flynn, und er mag es, das Gesicht hinter dieser Firma zu sein. So sehen Sie oft viele Bilder und Bilder von ihm auf der Website. Und wenn Sie auf diese Website gehen, ist das erste, was Sie sehen werden, ein sehr riesiges Bild von ihm, und das hilft nur, seine persönliche Marke zu stärken. Aber ich ging weiter und scrollte nach unten, und wir werden uns die untere Hälfte seines Anblicks ansehen, damit wir irgendwie auseinander nehmen können, was er hier getan hat, und Ihnen einige Ideen von einigen verschiedenen Dingen geben können, die Sie so tun können, im ganz oben. Das erste, was Sie sehen werden, ist eine Menüleiste und ich werde nur einige grundlegende Hervorhebungen hier machen . Das wird ein wenig grob sein, aber es wird Ihnen helfen, eine Vorstellung davon zu geben, was los ist. Also haben wir diese Menüleiste oben, die ich in einem roten hervorgehoben habe, und diese Menüleiste ist in drei Abschnitte unterteilt. Das erste, was wir haben, ist das Logo, und dann haben wir die Links für die Website, die sehr häufig auf allen Websites ist. Entschuldigen Sie, und das nächste, was Sie sehen werden, sind seine Einkommensberichte. Das ist etwas, das seit langem getan wird, und das zeigt nur, wie viel Geld er im Laufe der Jahre verdient hat. Aber im Grunde bleibt diese Menüleiste immer dann, wenn wir die Website nach oben und unten scrollen. Also eine Sache ist, Sie immer dieses Logo sehen, und das hilft irgendwie, die Marke zu stärken. Und dann haben wir immer diese Links, so dass Sie gehen und klicken Sie auf einen dieser Links. Egal, wo Sie sich auf der Website befinden, Sie können sich immer von dieser Seite auf eine andere Seite bewegen. Nun, der nächste Abschnitt, den Sie bemerken werden, da wir diesen großen weißen zu blauen Hintergrund haben . Und das alles fühlt sich wie eine Art großer Abschnitt an, wegen des gemeinsamen Hintergrunds, den es teilt. Auch wenn hier jetzt verschiedene Dinge geschehen, ist das alles Inhalt seines Anblicks. Also haben wir einige Post an der Spitze von Affiliate Resource ist, dass er hat und dann seine schlanken Magnete, und wir werden voran gehen und werfen einen Blick auf all diese jetzt. Aber oben auf diesem Hintergrundbild ist es in zwei Hälften aufgeteilt. Also haben wir diese große Hälfte an der Spitze, und dann ist das hier in zwei weitere Hälften gebrochen. Das sind also sein Beitrag, und diese können blockierte Beiträge, YouTube, Post oder Podcasts sein YouTube, , die er tatsächlich veröffentlicht hat. Und er hat hier drei schöne, sehr gleichmäßige Bilder, gegeben in einem sehr schönen, lesbaren Look und sehr leicht zu sehen mit ein wenig Polsterung auf der linken Seite. Und gerade jetzt werden Sie diese Polsterung den ganzen Weg entlang der Seite sehen, weil Sie nie etwas komplett übersetzen wollen , weil es jetzt abgeschnitten werden könnte. Er hat seine Einkommensberichte ganz über, damit das abgehackt werden konnte. Vielleicht ist er nicht so besorgt. Und heute, mit responsiven Website-Designs, ist es nicht so ein großer Faktor. Aber es ist schön, ein wenig Polsterung auf der linken und rechten Seite zu haben. Also haben wir diese drei Post und schön und sogar Layout geht hier und dann unten, dass wir diese vertrauenswürdige Ressource ist Abschnitt. Das wird also wieder in drei weitere Bilder zerlegt. Wir haben diese linke Seite in dieser rechten Seite, und dann haben wir diese drei Tasten, auf die Sie klicken können. Jetzt wirst du bemerken, dass er die drei Knöpfe nicht mit den drei oben in Einklang gebracht hat. Das war also ein ziemlich kluger Schritt, denn was es tut, ist hilft. Es hilft, die Seite ein wenig zu brechen. Wenn er also diese drei Knöpfe unter diese drei Brötchen stecken hätte, würde es etwas fade und langweilig aussehen. Also hat er diese drei Beiträge, und dann versetzt er diese drei mit einem Titel und Untertitel, und Sie beginnen tatsächlich, die Seite so gut zu lesen, Weise sehen Sie die drei Post und dann lesen Sie diesen Titel, und dann Sie könnte sich diese drei Tasten ansehen, die er möchte, dass Sie jetzt klicken, darunter haben wir die Bleimagnete Abschnitt, und dies ist in einen oberen und unteren Abschnitt unterteilt. Und tatsächlich, wenn Sie diese Webseite live betrachten, ist dies ein Bild, das ein- und ausblättert. Das ändert sich also. Je nachdem, welchen er Ihnen zeigt, werden verschiedene Bleimagnete auftauchen. Auf dieser oberen Hälfte haben wir das Bild des e-Buches, das er verschenkt. Und dann haben wir einen weiteren Titel Untertitel mit einem Button zum Klicken. So ist er kaputt, dass schön, leicht zu lesen und ermöglicht es Ihnen, den Knopf schön und fett zu sehen, so dass Sie darauf klicken können . Dann haben wir den unteren Abschnitt, das sind die vier Produkte, die er versucht, Sie dazu zu bringen, sich in die vier Bleimagnete einzumelden , und einzumelden jetzt könnte er vier aus ein paar verschiedenen Gründen gebrauchen. Eine, weil das ist, wie viele Produkte er hat. Aber auch vier statt drei dieses Mal zu setzen hilft auch, die Seite ein wenig mehr zu brechen . Sie beginnen also zu sehen, wie diese Seite angelegt ist und Sie lesen die Seite einfach auf diese Weise, und das ist irgendwie, was Sie tun möchten, wenn Sie Ihre Website entwerfen. Sie wollen es einfach für die Leute machen, diese Art von wie ein Buch zu lesen, wo ihre Augen nur langsam entlang der Seite folgen und nicht überall springen. Also jetzt haben wir vier Bilder und hilft, es einfach ein wenig mehr zu brechen. Und wie ich schon sagte, jeder von diesen, ähm, es geht in und aus dem obigen Bild genau hier unten. Das fühlt sich an wie ein anderer Abschnitt, weil es nicht den gleichen weißen und blauen verblassenden Hintergrund verwendet. Und das liegt daran, dass er jetzt über seine Gemeinschaft spricht, was ein bisschen anders ist. Es sind keine Produkte oder Inhalte, die er verkauft. Er versucht, eine Community aufzubauen, und ich glaube, das ist eine Facebook-Gruppe, mit der Sie verbunden sind. Und auf der linken Seite sehen wir ein Bild von ihm, so dass es diese Marke und seine Vertrauenswürdigkeit verstärkt. Und dann auf der rechten Seite sehen wir nur einen sehr einfachen Titel und eine Schaltfläche mit viel Leerraum, so dass es sehr einfach zu sehen und zu klicken ist. Wenn das etwas ist, von dem Sie ein Teil sein möchten, dann haben wir unten eine untere Menü-Taste. Ah, dies ist nur, um einige weitere Schaltflächen am unteren Rand hinzuzufügen, so dass Sie, wenn Sie zum Ende der Seite gelangen , auf einen dieser Links klicken können, um mit der Seite fortzufahren. Wenn die nicht hier wären, können Sie das ganze Zeug lesen. Deine Augen folgten auf der Seite. Aber dann können Sie einfach die Seite verlassen oder nicht auf eines dieser Sachen klicken, weil es nicht ansprechend für Sie war , indem Sie diese Kauf-Buttons unten hier. Wenn deine Augen die Seite runtergehen, kannst du sagen: OK, was mache ich jetzt? Oh, ich kann auf seine Blawg klicken. Ich kann mehr über ihn erfahren oder es gibt einen Anfang hier, aber vielleicht möchte ich darauf klicken und sehen, wohin das mich führt. So sehr klug, Schaltflächen am unteren Rand Ihrer Seite zu setzen, so dass, wenn die Leute am Ende eines Ihrer Inhalte gelangen , können sie mit Ihrer Website fortfahren und versuchen, nicht aus den Augen zu lassen. Dann unten haben wir unsere grundlegenden Fußzeileninformationen. So werden Sie auf der linken Seite Nutzungsbedingungen und verschiedene Informationen zu sehen , die Sie über die Website im Bloggen des Unternehmens erfahren können. Und dann auf der rechten Seite, werden Sie einige Social-Media-Icons sehen. So können Sie gehen, klicken Sie auf Sie wissen, dass Twitter, um, um, Twitter-Seite und gehen Sie ihm dort folgen. Dies ist also eine sehr einfache Art zu gehen und zu sehen, wie eine Seite angelegt ist. Und wie gesagt, das ist sehr grob. Ich meine, weißt du, ich habe hier nur irgendwie schnell hervorgehoben, aber ich kann leicht sehen, wie er diese Website angelegt hat, wie sie diese schöne Einheitlichkeit hineingebracht hat und nur einen einfachen Weg für die -Betrachter, um diese Informationen zu sehen und zu lesen. Und es gibt Ihnen auch eine Vorstellung von einigen Dingen, die Sie in Ihrer eigenen Website tun möchten . Als Sie anfingen, Ihr eigenes Webdesign zu erstellen, verspotten Sie 3. Ideen für dein Websitedesign schreiben: Das erste, was wir tun wollen, bevor wir anfangen, unsere Website zu verspotten, ist dass wir ein paar Notizen darüber machen wollen, was wir eigentlich wollen auf dieser Website als Faras Links und Layouts und wie es aussieht und so weiter. Jetzt können Sie dies mit einem Stift und Papier tun. Sie können dies mit einem Word-Dokument oder ohne Pad-Dokument tun. Aber im Grunde alles, was wir tun werden, ist, dass wir nur einige Notizen von dem aufschreiben, was wir denken, dass wir auf dieser Website haben wollen. Nun, da dies ein Fotoshop-Kurs ist, werde ich einfach voran gehen und dies in einem Fotoshop mit einem Grafiktablett tun. Und das ist eine verrückte , Bambus-Tablette,die ich habe. Und im Grunde ist es nur ein Tablet mit einem Stift, wo, wenn ich den Stift über die Oberfläche des Tablets bewegen , es bewegt den Cursor herum, und das ist toll für mich, alle möglichen Dinge in einem Fotoshop zu tun. Aber hier kann ich das verwenden, um einige Notizen zu machen, es auf die Ebene zu legen, die Ebene zu verstecken und dann später, wenn ich mich an diese Informationen erinnern möchte. Ich kann es sehr leicht, ähm jetzt. Wenn Sie also folgen, haben Sie eine Tablette. Du kannst es auf diese Weise tun. Andernfalls folgen Sie einfach mit einem Stück Papier und einem Stift. Und das ist ein sehr einfacher Prozess. Das wird nicht zu lange dauern, aber ich möchte Ihnen nur zeigen, wie das geht. Also gehen Sie weiter und stellen Sie sicher, dass Sie Ihren Pinsel ausgewählt haben. Geh hier hoch und wähle einen Pinsel aus. Ich ging mit der harten Runde in einer kleinen Pixelgröße, also sieht es aus wie Handschrift gegen einen Haufen Blobby Chaos, der hier vor sich geht. Und stellen Sie sicher, dass Sie eine Passivität auf 100% in den Strömen auf 100% eingestellt ist. Und im Grunde kann ich hier einfach darauf zurückgreifen. Und wo immer ich zeichne, habe ich viel mehr Kontrolle als eine Maus. Und je härter ich drücke, desto dunkler wird es im Licht oder unterdrücken das Feuerzeug wird und so weiter. Also werde ich das einfach rückgängig machen. Und wir möchten nur einige grundlegende Fragen beantworten, die Sie innerhalb einer Website finden würden. Und du denkst nur an , jede Website,die du vorher gesehen hast, oder sogar an das Beispiel, das wir uns vorher angesehen haben. Und du denkst darüber nach, was du darin haben willst. Also, zum Beispiel, oben, haben wir normalerweise eine Menüleiste, und wir müssen einige Links haben. Also, welche Art von Links werden wir in dieser Menüleiste haben? Nun, wir werden Ah, nach Hause haben , Homelink. Vielleicht bin ich ein Blogger. Und so möchte ich ein wenig über mich Seite haben, denn es geht um meine, ähm, Website,über um meine, ähm, Website, die ich gebloggt und monetarisiert habe. Ähm, vielleicht haben wir oder Blog's. Wir haben das Blut, über das wir reden. Vielleicht bin ich ein oder zwei Podcast. Also möchte ich die Podcast-Informationen haben, und dann möchte ich vielleicht einen Kontaktbereich haben, in dem Leute mich kontaktieren und mir Fragen stellen können . Jetzt werde ich auch einige Social-Media-Links haben. Also, ähm, setzen Sie einfach Social Media Links und denken Sie einfach darüber nach, was? Welche Social-Media-Plattformen, auf denen ich bin. Also habe ich einen YouTube-Kanal. Ich habe einen Facebook-Kanal. Ich habe Twitter, ich habe verlinkt und, ah, sagen wir einfach, Sie wissen, was ist ein anderes Google plus OK, also sagen wir einfach. OK, jetzt wissen wir, welche Art von Links wir hier haben wollen. Und dann haben wir versucht, darüber nachzudenken, was vielleicht? Was wollen wir in dieser Homepage haben? Wie wollen wir aussehen? Also ich weiß, ich will Ah, ich möchte die Marke hinter dieser Homepage und hinter dieser Website sein. Also möchte ich sagen, ähm, ein Profilbild von mir oben, damit die Leute mich sehen können. Und was haben wir sonst noch hier drin? Ich möchte meine neuesten Blawg-Posts zeigen, weil ich viel gebloggt habe, und ich mache Podcast. Ähm, also möchte ich sicherstellen, dass ich kürzlich Blawg und Podcasts habe, ähm, posten, damit die Leute das auf der Homepage sehen können. Vielleicht habe ich einen dieser Bleimagnete, wo ich ein kostenloses Buch verschenke, und ich will diese Information haben . Ähm, also möchte ich sicherstellen, dass ich meinen Bleimagnet da drin habe. Vielleicht mache ich Werbung Google-Anzeigen auf meiner Website, und ich möchte eine Anzeige auf der Titelseite haben. Nur damit ich vielleicht zufällig einige Leute zu greifen und dann klicken Sie durch die Anzeige und generieren ein wenig Nebeneinnahmen für mich, auch. Also werde ich eine Google-Anzeige auf dieser Seite setzen, und dann können Sie durchgehen und nur darüber nachdenken, was Sie eigentlich auf dieser Seite haben wollen und das. Wie ich schon sagte, das kann mehr in die Tiefe kommen. Sie können das zu einem großen Dokument machen und Sie können tatsächlich sagen, okay, wenn die Leute auf die Blockseite klicken, bringt es ihn zu dieser Seite und Sie können es benennen und sagen, Okay, ich möchte, ähm, Sie kennen diese Art von Informationen über den Blog oder diese Art von Layout? Sie können diese verschiedenen Web-Design-Mock ups machen, aber normalerweise das erste, was Sie tun möchten, nachdem Sie einige Recherchen gemacht haben und Sie sich an verschiedenen Websites umgesehen haben, ist es, eine Vorstellung davon zu bekommen, was Sie auf Ihrer Seite wollen, und der beste Weg, dies zu tun, ist, dies auszuschreiben. Und wie gesagt, Sie können dies auf einem Blatt Papier ganz einfach tun, oder wenn Sie ein Word-Dokument bevorzugen, können Sie es dort tun. Aber fangen Sie an, Informationen darüber zu schreiben, was Sie auf dieser Website sehen möchten. Wenn wir also anfangen zu entwerfen, müssen Sie nicht wirklich darüber nachdenken. Du hast die Information schon bereit. 4. Formatieren deines Photoshop-Dokuments: jetzt, da wir einige Ideen aufgeschrieben haben, die wir auf unserer Website wollen, müssen wir darüber sprechen, wie wir unsere Photoshopping-Datei einrichten, so dass wir zumindest die Grundlagen unseres Design-Mock bis zu unserem Grafikdesigner oder Webentwickler bekommen können . Jetzt gibt es alle Websites in verschiedenen Dimensionen, und mit Telefonen und Tablets und verschiedenen Monitorgrößen ist es schwer, die perfekte Größe für eine Website auszuwählen. Und das ist am besten dem Grafikdesigner oder dem Webentwickler überlassen, wenn Sie mit der Arbeit auf der Website beginnen , denn es gibt viele Variablen, die in perfekter Auswahl der perfekten Dimensionen ins Spiel kommen . Also lasst uns voran gehen und schnell über Dimensionen reden. Ich werde meinen Pinsel hier nehmen, und ich werde nur einen einfachen Monitor zeichnen, und das ist wie ein neuer Monitor, den ich benutze. Und das ist ein ziemlich Standardformat, und die Auflösung meines Monitors beträgt 1920 x 10 80. Dann ist das, was ich jetzt auf dem Bildschirm sehen kann. Ah, viele Leute benutzen keine High-Def und größere Monitore. Viele Leute haben immer noch ältere Monitore, die sie verwenden, und diese älteren Monitore sind häufig in einer Auflösung von 10 24 x 7 68 zu finden. Wir wissen also, dass, wenn wir unsere Website wenigstens nach diesen Spezifikationen machen, es für uns viel besser funktionieren wird. Zumindest können Menschen, die auf Geruchsmotoren unsere Bilder sehen. Wenn wir hier in der 1920 von 10 84 trafen Sachen ablegen, dann sieht jemand auf einem älteren Monitor es vielleicht nicht, oder es könnte ausgeschnitten werden. Oder sie müssen möglicherweise die Größe ändern oder überwachen. Und es wird einfach nicht richtig aussehen. Es ist also normalerweise am besten, wenn Sie tatsächlich auf eine kleinere Version bauen. So zumindest jeder kann sehen, dass jetzt, später, Wenn Ihr Web-Entwickler sagt, Sie wissen, lassen Sieuns einfach voran, tun Sie es auf Wenn Ihr Web-Entwickler sagt, Sie wissen, lassen Sie uns einfach voran, die größere Größe, als dann gehen Sie mit dem, was sie sagen, und sprechen Sie es mit ihnen. Aber um dieses Kurses willen, werden wir eine kleinere Größe verwenden, damit wir wissen, dass jeder diese Informationen zumindest sehen kann . Also werden wir es auf diese Größe bauen, und dann wissen Sie, dass wir unsere Menüleiste haben, unsere Informationen und alles, was wir hier geschrieben haben . Nun, natürlich, welche Seiten sind nicht 7 68? Weil sie tatsächlich länger gehen, als das, wo Sie tatsächlich nach unten scrollen. Dies ist nur das sichtbare Bild, so dass wir es später immer hinzufügen können. Und dann hättest du eine Bildlaufleiste und du würdest die Website rauf und runter spazieren gehen, um diese ganzen Informationen hier unten zu sehen . Nun, das funktioniert auch wirklich gut, diese Zahlen, weil ihre, ähm ihre Kräfte von zwei oder teilbar durch zwei. So können wir sie in Stücke zerlegen, die wirklich gut für uns funktionieren. Also werden sie alle diese Zahlen tatsächlich in beide Dimensionen sehr leicht gehen, so dass es sehr einfach macht, die Informationen zu unterteilen. Also lassen Sie uns jetzt einen Blick werfen, wirklich schnell auf einige der Dinge, die wir in Photoshopped tun wollen. Ich werde einen schnellen Kreis zeichnen, nur um Ihnen ein Beispiel für eine Sache zu geben, die wir uns bewusst sein wollen . Also lassen Sie mich es einfach genau dort setzen und füllen Sie es einfach schnell, damit wir das sehen können. Okay, jetzt, das erste, worüber wir reden wollen, ist Bild, Größe und Leinwandgröße. Moment, wenn wir uns die Bildgröße ansehen und ich zu Pixeln gehe, sind wir bei einer Auflösung von 1920 x 10 80. Wenn ich also diesen Vollbildmodus betrachte, würde es meinen Monitor komplett abdecken. Nun, wenn wir dies auf eine kleinere Größe ändern und wir mit der Bildgröße hier arbeiten , was das tatsächlich tun wird, ist, dass es das Bild skaliert und Sie können sehen, dass es alles komprimiert und macht alles zerquetscht. Wenn wir also anfangen zu arbeiten , wollen wir das nicht tun. Wir möchten stattdessen die Canvas-Größe ändern. Also, wenn ich zur Canvas-Größe gehe und ich zu Pixeln ändere, da das ist, worin wir arbeiten. Und ich habe tatsächlich die Leinwandgröße geändert, die gleiche Menge, die du siehst, was es tun wird, ist, dass es das Bild zuschneiden wird, aber es wird nicht skalieren und es zerquetschen lassen. also Wenn Siealsomehr Platz benötigen, Sie die Leinwandgröße ändern, nicht die Bildgröße, weil wir das nicht skalieren möchten. In unserem Beispiel können wir diese 10 24 machen und normalerweise sagen, es wäre 7 68 Aber sagen wir einfach, dass wir etwas mehr Platz wollen , weil wir wissen, dass dies eine lange Dokument-lange Website sein wird. Also hat sie 2000 und was das tut, ist das öffnet uns in ein längeres Dokument, irgendwie wie eine Website, und Sie können sehen, wenn Sie diese 50% gerade jetzt sehen. Wenn ich also auf 100% gezoomt habe, wäre das eigentlich das, was die Website auf meinem Monitor aussehen würde und wir können diesen, ähm, Bildschirmmodus und Vollbildmodus sehen ähm, . Und das ist, was die Website auf meinem Kopf aussehen würde Earner und ich würde keine wichtigen Informationen auf die Seiten hier setzen . Alle meine wichtigen Informationen würden einfach an diesen Ort gehen. Ich weiß also, dass selbst Menschen auf kleineren Monitoren zumindest meine Website sehen können, wenn sie beginnen, durch sie zu schlendern. Also werde ich da rauskommen. Ich werde wieder hinauszoomen, damit wir alles sehen können. Nun, natürlich, meine Informationen wurden hier beschnitten und wir verlieren eine Menge Informationen. Und ich habe immer noch meine Notizen in dieser Ebene. Also, um das Zeug zu sehen, möchte ich das alles nach unten skalieren. Also lassen Sie mich hier alles auswählen. Nein, Si de select-Kontrolle. Sei okay. Da gehst du. Und lass mich meine Notizen hier drinnen skalieren, Sam. Nun, ich habe die nur für später. Wenn ich jemals zurückgehen und ihn ansehen will, kann ich das tun. Die Dimensionen, die mir nicht wirklich wichtig sind, sind in Ordnung. Ich werde das nur austreten, weil ich glaube, Sie verstehen den Punkt, den ich hier ansprechen will , dass wir nur diese spezielle Entschließung verwenden wollen. Aber ich möchte diese Notizen behalten, damit ich diese Ebene immer aktivieren und sie später ansehen kann, und ich werde später nur einen neuen Hintergrund hinzufügen, Layer und einfach weiß machen, nur damit ich diese Transparenz nicht habe. Okay, jetzt haben wir nur ein paar, haben meine Notizen Terminal. Es ist jetzt aus. Ich habe gerade ein weißes Grundlayout, das ich hier verwenden kann. Alles klar, das nächste, was wir tun wollen, ist, dass ich vorangegangen bin und meine Leinwandgröße auf 10 10 24 ändere . Also wissen wir, dass wir eine gute mit haben und ich habe es 2000 gemacht. Es ist also extra lang, also kann ich einfach so arbeiten und dann immer hier reinkommen und das ausschneiden oder es länger machen, basierend darauf, wie diese Website anfängt zu werden. Nun, das nächste, was wir verwenden wollen, ist ein Gitter, weil wir sicherstellen wollen, dass alles an einem Raster gefangen wird. , Noch mal, das muss keine perfekte Wissenschaft sein, weil wir uns verspotten. Aber je näher wir Dinge machen können, wie wir wollen, dass , sie tatsächlich wie Faras aussehen, die Höhen und Verstand und was Sie haben, desto besser wird es sein. Statt einfach willkürlich Dinge darin zu schlagen, sei besser, ein Gitter zu verwenden, also macht es zumindest ein wenig Sinn, besonders wenn wir es an jemand anderen weitergeben. Und das Tolle daran ist, wenn Sie mit einem Grafik-Design-Künstler arbeiten, die Photoshopped hat, können Sie ihnen diese PSD-Datei geben, und dann zumindest können sie es hochziehen und sagen, OK, Sie hat das so viele Pixel gemacht und was hast du und kann irgendwie von dort aus gehen? Also werde ich nur gehen, um zu sehen und ich werde gehen, um zu zeigen und dann Raster auswählen, und das wird eine große Kraft zu schaffen. Jetzt möchte ich dieses Raster anpassen, weil Sie sehen können, dass es hier nicht wirklich schön aufgestellt ist. Es ist irgendwie zu den Seiten zu gehen und nicht perfekt zu treffen, wo wir es wollen. Gehen Sie weiter und zoomen Sie hier hinein, damit wir das sehen können. Sieh mal, wie diese Art hier und so abgeschnitten wurde. Das ist kein nettes, gleichmäßiges Gitter. Es liegt daran, dass es andere Dimensionen verwendet als das, was wir hier verwenden. Klicken Sie also auf „Ziege bearbeiten“, gehen Sie zu den Einstellungen und wählen Sie dann Hilfslinien, Gitter und Scheiben aus. Und das wird uns erlauben, das Gitter zu ändern, wie wir es für richtig halten. Wenn wir also hinuntergehen, wo es Raster sagt, haben wir eine Rasterlinie jeden Zoll mit acht Unterteilungen. Was wir nicht einmal Verletzungen verwenden, waren die Verwendung von Pixeln, also ist das stolz auf das Problem und wir haben acht Unterteilungen. Lasst uns weitermachen. Machen Sie einfach diese eine Unterteilung jetzt, damit Sie sehen können, dass ich nicht die Eingabetaste drücken wollte, aber Sie sehen, was das tut. Jetzt haben wir eine Rasterlinie pro Zoll und keine Unterteilung. Es sind also nur regelmäßige Zeilen ohne Unterteilungen. Also geh zurück, also will ich das nicht schließen. Also werden wir ändern, ist zwei Pixel und jetzt haben wir eine Rasterlinie. Jedes Pixel. Nun, das ist ein bisschen zu viel. Das brauchen wir nicht. Und wie ich bereits sagte, das ist alles durch zwei teilbar. Also können wir jede dieser Nummern verwenden, die ich Ihnen vorhin gezeigt habe. 24 8 16 32 64 Also lasst uns versuchen 64. 64 sieht also gut aus. Es hat einige schöne gute Größe Boxen und teilt uns auf. Wirklich gut. Jetzt könnte ich sagen, acht tun sagen, . Ähm, das ist ein bisschen viel. 16 16 ist ziemlich gut, aber wenn wir 64 eine größere Zahl machen, um diese größeren Boxen zu bekommen und dann verwenden wir Unterteilungen. Also lassen Sie uns sagen, vier Unterteilungen jetzt können wir sehen, wir haben schöne, dicke Linien, alle 64 Pixel, und dann ist es durch vier geteilt. Also, wenn Sie vier in 64 nehmen, das ist 16. Also jede dieser Lichtlinien ist 16 und jede dieser dunklen Linien ist 64, man könnte aufstellen, was sich am besten für dich anfühlt, aber ich denke, das ist ziemlich gut. Dies wird uns eine gute Dimensionsgröße geben. Und jetzt, wenn wir zur Ansicht gehen, stellen Sie sicher, dass wir Snap auf Raster. Also, wenn wir etwas tun, sagen wir, wenn ich diese Box hier packe, wird es es an den Rasterpunkten schnappen, und das wird es einfach schön und sogar Kraft machen. Und wie ich schon sagte, das ist keine perfekte Wissenschaft, aber zumindest wird uns das zeigen, dass wir uns ein paar nette, einfache Dinge geben, mit denen wir gearbeitet haben. Also, wenn ich meine Menüleiste erscheinen lasse und ich diese gut ausgewählt habe, jetzt wissen wir, dass meine Menüleiste genau 64 Pixel gesetzlicher Höhe und 10 24 mit weise ist. Das ist also ein tolles Werkzeug. Und dann noch eine Sache, die Sie vielleicht einschalten möchten, sind die Herrscher. Also, wenn Sie einen Blick haben und Sie auf Lineale klicken hier, Sie gehen, um diese Lineale an der Spitze zu sehen und diese Luft toll für eine Lineal Dinge wieder . Es ist zwei Zentimeter eingestellt und wir wollen keine Zentimeter. Also doppelklicken Sie darauf. Und wenn du doppelklickst, wird das auch die gleichen Präferenzen aufzeigen. Sie können Führungen große und Scheiben hier und darüber, dass Einheiten und Lineale sehen. So können wir jetzt die Lineale Eigenschaft anpassen. Also lasst uns zu Herrschern gehen. Ändern Sie diese zwei Pixel und dann können Sie sehen, dass es unsere Pixel unseres Dokuments zeigt. Wir können OK schlagen, und das ist großartig, denn jetzt können wir sehen, wo wir diese Informationen aufteilen wollen, wenn wir die Lineale als Führer verwenden wollen. Und eine andere tolle Sache an den Linealen ist, wenn Sie gehen, wo das Lineal ist und Sie klicken und ziehen, erhalten Sie diese Linien und diese Luft große Messwerkzeuge. Also ist es sehr einfach, hier eine Zeile zu fallen und irgendwie zu sehen Okay, das ist das Zentrum meines Dokuments, und ich kann die Dinge so ausrichten, und ich kann das schneiden, wie ich will, also werden wir diese verwenden, um einfach unten einige grundlegende Dinge, bevor wir anfangen, Dinge dort fallen zu lassen, so dass wir zumindest anfangen können, dies zu brechen und zu sehen, wie wir wollen, dass diese Website aussehen. So haben wir unser Dokument wieder eingerichtet. Wir sind 10 24 breit, also wissen wir zumindest, dass Menschen auf älteren Monitoren das sehen können. Und wie ich schon sagte, wie Sie mit dem Grafikdesigner, dem Web-Entwickler oder wer auch immer Ihre Website für Sie entwirft, wenn Sie ihn diese Mock bis zu ihnen, zumindest haben sie einen guten allgemeinen Bezugspunkt . Und dann können Sie alle an diesem Punkt zusammenarbeiten und alles ändern, was Sie wollen. Aber wenigstens haben wir einen allgemeinen Sinn für etwas, das ein wenig mehr aussieht, ähm , du weißt schon, zusammenhängend und ah wird ein wenig schöner arbeiten als nur ein paar Zufallszahlen. 5. Gestalte deine Website: Okay, also haben wir unsere Dokumente aufgestellt, wie wir weitermachen und dieses Web-Design-Mock erstellen wollen . Und ich werde Ihnen ein paar verschiedene Möglichkeiten zeigen, wie Sie das tun können. nun daran, Denken Sienun daran,dass alles, was Sie versuchen zu tun, ist nur zeigen, die Grundlagen dessen, was Sie in Ihrer Website suchen möchten und was Sie tun, wenn Sie dies an einen Grafik-Design-Künstler oder einen Web-Entwickler übergeben. Das erste, was wir tun, ist, dass wir hier unser Raster betrachten können und wir beginnen, dieses Raster aufzuteilen . Ah, und unser Dokument in das, was wir glauben, wäre gut in einer Weise, dies zu tun, ist die Verwendung dieser Leitfäden mit den Linealen, damit ich klicken und nach unten ziehen kann. Und ich kann sagen, Ähm dieser Luft, bevor ich das rausreiße. Du hast recht. Die Mitte eins. Also können wir sagen, wir wissen, dass wir unsere Menüleiste oben hier wollen, und wir wissen, dass wir ah, Fußzeile unten wollen und wir werden auch einen Luchs am unteren Rand wollen. Dann haben wir vielleicht ein Top über dem Faltabschnitt eines Bildes von mir oder ein Bild von dir oder deiner Marke oder was auch immer du unten tust. Das könnte sein, was wir wollen, um ein paar Block-Posts haben. Ähm, dann wollen wir unsere Bleimagnete haben und so weiter, und Sie können das aufschneiden und teilen und dann eines der ersten Dinge, die Sie tun können, ist, eine neue Ebene zu erstellen, und dann können Sie hier reingehen, Nehmen Sie die Rechteck-Toolbox. Ah, und dann wählen Sie eine Farbe. Ich benutze normalerweise Grau, wenn ich Mock Ups mache, aber wenn du eine Brandy-Farbe hast, kannst du das tun und ich werde hier reingehen und ich werde nur anfangen, sehr grundlegende rohe Bilder von dem zu erstellen , was ich will. Also ein Pool im Text oder und ich weiß, dass dies der Link Abschnitt ist. Also werde ich hier reingehen, und ich werde nach Hause schreiben über Log-Podcasts Kontakt und was haben Sie und dann, wissen Sie, ändern Sie die Größe hier, und das ist eine Möglichkeit, dies zu tun. Es ist ziemlich einfach. Und alles, was du tust, ist, dass du einfach nachmachst, wie du denkst, das würde aussehen? Also, du weißt schon, oder deine Links hier Willst du ihn in der Mitte? Und Sie müssen kein Experte sein. Und wenn Sie die Website entworfen haben, werden Sie es erkennen. Die Dinge würden sich ändern und du wirst wollen, ähm, ich wollte anders aussehen. Vielleicht sieht etwas nicht richtig aus. Du bist kein Künstler, aber du kannst wenigstens den Grafikdesign-Künstler oder Webentwickler kontaktieren, um dir dabei zu helfen, dies für dich zu erstellen. Das ist also eine Möglichkeit, es zu tun. Und dann, was Sie damit auch tun können, ist, dass Sie diese Ebenen auswählen, drücken Sie Kontrolle G und gruppieren Sie sie zusammen, und dann können Sie diese bewegen. Also, wenn das, sagen wir, ah, Block Post war sagen wir, ah, ah, und du es nicht getan hast, warst du dir nicht sicher, wo du es wolltest. Ah, du weißt es nicht. Wenn Sie oben wollten, möchten Sie es vielleicht auf halbem Weg unten. Dies ist eine großartige Möglichkeit für Sie, diese Dinge zusammen zu gruppieren und sie zu bewegen und zu sehen was für Sie funktioniert und nicht funktioniert. Lassen Sie mich Ihnen eine andere Art zeigen, dies zu tun, und das finde ich einfacher und ah, es sieht irgendwie besser aus. Es ist also ein wenig optisch ansprechender. Also direkt von der Fledermaus, fangen Sie an, eine sehr gute Vorstellung davon zu bekommen, was Sie wollen. Und was ich den Leuten sage, ist die Adobe Creative Cloud Suite, mit der Sie Zugriff auf eine Menge von Assets haben können, die Sie in Ihren Projekten und in allen Kursen verwenden können, die Sie sehen, wie ich tun. Du wirst sehen, wie ich das oft benutze, weil es so ein mächtiges Werkzeug ist. Ich denke, es ist irgendwie unter benutzt und Sie können ausgehen und Sie können diese Dinge im Web finden . Sie können kostenlose finden, die Sie finden, für die Sie bezahlen, und Dinge, die besser zu Ihren Bedürfnissen passen . Aber Sie müssen nicht weiter als die Software selbst suchen. Wenn Sie also die Creative Suite-Anwendung öffnen und darauf klicken, wird es diese Box hier hochziehen. Und wenn wir auf Assets gehen und wir Sie eingeben, warum werden Sie eine Reihe von Benutzeroberflächen-Assets finden, die Sie verwenden können? Einige von ihnen sind einzelne Assets, wie Sie hier den Rechner im Kalender sehen und Sie können ziehen Sie diese in Einige von ihnen sind Vollseitenformate wie Thes Donner. Du setze ich diese Luft so ziemlich schon angelegt. Und einige davon mögen Sie vielleicht. Du könntest einfach einen davon ziehen. Und wenn Sie eine gefunden haben, die Sie mögen und nicht einmal mehr tun müssen, als sagen wir, hier, das ist, was ich will. Einige von ihnen sind Kits von Assets, also sind sie Gruppierungen. Und lassen Sie mich einige von denen finden wie diese hier, diese Kombination Sie AIPAC, ist eine Gruppe zusammen, die Sie verwenden können, und es hat eine Reihe von verschiedenen Dingen. Wenn ich darauf klicke, können Sie sehen, dass es ein Profilbild hat. Es hat eine Grafik. Es hat einen Kalender-Buttons, Suchleisten. Und so hast du das hineingezogen und dann ziehst du einfach die Elemente heraus, die du verwenden möchtest, damit das wirklich gut funktioniert. Und ich habe ein paar dieser Vermögenswerte gezogen und bereits, dass ich diese in diesem Kurs verwenden werde . Dies, nur um Ihnen einen kurzen Überblick darüber zu geben, wie Sie einige dieser Vermögenswerte verwenden können und, ähm, ich werde voran gehen und diese in der Ressource liefern, ist Abschnitt dieses Kurses. Wenn Sie also hier in meine Bibliothek schauen, können Sie die drei sehen, die ich benutze. Die Avia, du, du, ich setze Starter, die Ziegelelemente. Sie ich Kind und eine Ansicht, die ich Kit für die Navigation. Und ich werde diese einfach einzeln öffnen, klicken Sie mit der rechten Maustaste darauf und was wird tun? Es wird eine neue PSD Photoshopped Datei mit denen mit dieser Datei öffnen, und dann können Sie alle verschiedenen Layouts sehen, die wir innerhalb dieser haben. Also lass mich weitermachen, all das öffnen. Das bricht Element eins ist ein wenig größer. Es hat eine Menge Zeug darin, aber wirklich hohe Qualität sieht wirklich gut aus. Nun, das heißt nur, dass es Schriften verwendet, die ich nicht auf meinem Computer installiert habe. Ich kann immer hineingehen und diese Schriftarten installieren. Ich werde mir jetzt keine Sorgen darüber machen, weil wir nur versuchen, dir eine Vorstellung davon zu geben , wie du dein eigenes Mock erstellen würdest und selbst du musst nicht einmal zu viel über den Text arbeiten , weil du nur versuchst, was das Layout zu bekommen sieht so aus. Uns ist egal, ob der Text oder die Bilder nur versucht haben, unseren Punkt auf den Grafikdesigner oder Webentwickler zu bringen. Also, ähm, ich werde gerade beim Absagen haben und die nicht auflösen, und dann werde ich das letzte hier öffnen, und es löst sich nicht auf die Sorge, das zu lösen. Also werde ich die 1. 1 hier gehen, und ich werde heranzoomen. Und das sind vorgefertigte Layouts für Websites, die Sie einfach voran gehen können, und Sie könnten eine von diesen finden , die Sie mögen , und dann können Sie einfach sagen , Hey, das ist das, was ich anstelle dieser Bild setzen Sie dies in und so weiter. Aber was wir tun werden, ist, dass wir einige der Elemente dieser Dinge herausreißen und sie in unserem Design-Mock verwenden werden. Also die 1. 1, die ich benutzen werde, ist diese hier. Und die eine Sache über diese Photoshopped Pausen, Sie haben irgendwann eine Menge von Elementen, und der schwierigste Teil ist zu finden, was ist was? Also, was ich tue, ist, dass ich einfach anfangen werde, Ebenen auszuschalten, bis ich die, die ich will, finde. Okay, also nennt man das zwei Blöcke. Ich werde darauf doppelklicken, weil dies eine intelligente Schicht ist. Wie Sie sehen können, gibt es keinen Ordner mit Informationen. Es hat dieses Symbol hier in der Ebene. Ich klicke doppelt darauf, dass es die Zehe nach oben geht, öffne eine intelligente Ebene mit allen Ebenen darin, und es geht wieder um Textebenen. Ich will das nicht aktualisieren. Wenn ich also die intelligente Ebene geöffnet habe, können Sie jetzt hier alle meine Ordner und Informationen sehen, die wir herausziehen und herumziehen können. Das ist es, wonach ich suche. Also gehe ich zurück. Ich werde einfach das Dokument schließen. Ich brauche es nicht mehr, also werden wir das nicht benutzen. Okay, also gehen wir in diese zwei Blöcke und was hier los ist, ist, dass ich dieses Top mag. Ich mag die Art und Weise, wie sie diesen Titel gemacht haben. Der Untertitel. Vielleicht beginnen einige Buttons, wo ich setzen kann, hier oder etwas, das ich möchte, dass die Person anklickt , haben ein Bild von mir oder meiner Marke und ah, vielleicht diese Navigationslinks. Ich mag diese Navigations-Links, also lasst uns weiter gehen und das wieder hineinziehen. Ich werde nur anfangen, durch die Augäpfel und die Schichten zu klicken, bis ich finde, wonach ich suche, was wonach ich suche, genau da ist, und sie nennen diesen Helden. Also werde ich mit der linken Maustaste klicken und das in mein Dokument ziehen und es einfach dort hineinlegen. Nun, eine Sache, die ich auf jeden Fall empfehlen Sie tun, wenn Sie beginnen, Dinge zu beschriften, die entweder Sinn für Sie oder Sinn für den Grafikdesigner oder Webentwickler später. Denn wenn Sie ihnen die PSD-Datei geben und sie sich das ansehen und sie hier sehen, werden sie nicht wissen, was das ist. Also könnten wir diesen obersten Abschnitt nennen oder so was. Zumindest wissen wir, dass es der obere Abschnitt ist, und das ist der Ordner, an dem wir arbeiten. Also werde ich klicken, und ich werde das ziehen und ich muss das in und wieder skalieren. Wir wollen eng mit den Abmessungen und Größen sein. Aber noch einmal, wir werden jemand anderes für uns daran arbeiten lassen. Also müssen wir nicht perfekt sein. Ähm, aber, weißt du, wir wollen irgendwie nah aussehen. Wir mögen also, wie das aussieht. Das sieht toll aus. Außer, dass es dieses Bild von diesem Mädchen hat, das nach unten schaut. Ich kümmere mich nicht wirklich darum. Ich habe lieber ein Bild von mir und meiner Marke hier drin, zumindest damit ich etwas Zusammenhalt haben kann. Ich könnte es herausnehmen und einfach einen Textblock dort fallen lassen und sagen Bild von mir oder Bild von Marke oder Bild von unserem LKW oder etwas, das Sie verwenden möchten. Ähm, also werde ich den Ordner einfach wieder öffnen. Ich kann irgendwie um dieses Zeug klicken und sehen, was hier vor sich geht. Wir haben den Titel, den wir haben, Knave. Wir hatten eine Reihe. Der Pfeil. Das ist mir egal. Ich werde es einfach lassen. Es ist also eine Sache weniger, die du dir ansehen musst. Wir haben eine Basis. Okay, also ist es in der Basis. Also und dann einige von diesem Zeug vielleicht nicht viel Sinn machen, so dass Sie sehen können, wenn wir das ein- und ausschalten, es hat einige Färbeeffekte und verschiedene Dinge los, während wir nicht darum wieder kümmern . Wir versuchen hier nicht perfekt zu sein. Wir versuchen nur, ein grundlegendes Layout zu bekommen, also werde ich das Rechteck ausschalten. Ich könnte es sogar löschen, wenn ich es wollte. Eigentlich sieht es so aus, als könne es nicht löschen. Ich werde es einfach ausschalten und verstecken. Und dann bin ich einfach Ah, vielleicht bringe ich ein Bild von mir selbst ein. Ich gehe die Akte öffnen. Dies ist ein Projekt, an dem ich zuvor gearbeitet habe. Bild von mir alle zeigt ein wenig vor und nach dem Bild von einigen vertuschenden Farbe, korrigiert, dass ich tat. Aber ich werde nur diesen auswählen, der Anpassungen sagt. Das ist das Bild von mir hier. Das sieht gut aus. Und ich ziehe das in mein Dokument. Lass das da rein und sieh mal, manchmal musst du das Zeug hochziehen, bis du es siehst. So wurde es von einigen dieser Schichten versteckt. Ich habe es einfach weiter nach oben bewegt, bis es in Sicht kam. Also, jetzt werde ich das hier auf dieser Linie runterskalieren, es zurückskalieren und es rüber bewegen. Alles klar, also sieht das gut aus. Ich meine, das gefällt mir. Ich habe schon ein paar Links. Ich habe diesen kleinen Titelbereich. Vielleicht möchte ich den Titelbereich überziehen. Also ich mag es, mit mir reinzukommen, und los geht's. Wir fangen bereits an, die Grundlagen dieses Designs zu sehen. Dies sind also die Grundlagen, wie dieser Prozess funktioniert. Wir machen eine Pause hier, und wir werden zurückkommen und einen Blick darauf werfen, wie wir im nächsten Abschnitt noch ein paar Dinge hinzufügen können . 6. UI zu deinem Design hinzufügen: Okay, wir gehen weiter und beenden dieses Web-Design-Mock. Du hast gesehen, dass es zwei Möglichkeiten gibt, wie wir das tun können. Wir können die Lineale, Gitter und Führer verwenden , um hineinzugehen und einfach einige sehr grundlegende Wege zu blockieren, Dinge zu tun. Oder wir können Assets von Photoshopped selbst verwenden, um schnell auf unsere Website zu deponieren und sie zu verschieben, um eine Vorstellung davon zu bekommen, wie unsere Website sehr schnell aussehen soll. Also werde ich hier nur noch ein paar Dinge hinzufügen, nur damit Sie den Prozess sehen können, während wir uns bewegen. Und es wird der gleiche Prozess während des gesamten Webdesigns sein. Verdammt, du legst einfach Dinge rein und korrigierst sie, bewegst sie und siehst, was am besten für dich funktioniert. Also lassen Sie mich voran gehen und minimieren. Wir haben ihren oberen Teil. Wir haben diese Anpassungsebene, die wir hier haben. Sieh mal, ob ich das hinter diese Linie lasse. Ich habe immer noch meine Notizen-Ebene, so dass ich immer gehen und lesen kann, was ich hinzufügen wollte. Also wollte ich meine Menüleiste und ich kann hier oben und andere in die Menüleiste hier oben gehen , aber das wird uns eine Grundidee geben. Und dann habe ich mein Profilbild. Also wollte ich einige aktuelle Blawg-Posts und Podcast-Beiträge und einen Lead-Magneten in einer Google-Anzeige. Also lasst uns weitermachen und ein paar weitere dieser Dinge hinzufügen. Ich werde zu diesem hier gehen. Dies ist das brics-Element. Und wenn ich hier hineinzocke, ist das ein cooles Dokument. Es ist lang, und es hat eine Menge Zeug drin. Und wieder, ein Teil des Problems mit diesem Dokument ist nur zu versuchen, herauszufinden, was hier ist. Also haben wir eine Reihe von verschiedenen Dingen zur Auswahl, und ich werde hier durchblättern, und ich suche nach etwas, das für unsere Blockbeiträge und unseren Podcast-Post funktionieren würde. So etwas könnte gut sein. Ähm, das könnte etwas Cooles sein. Dies könnte ein Blockpostbild sein, das wir verwenden könnten. Und das ist alles, was ich tue, ist, dass ich hier durchgehe und versuche herauszufinden, was etwas widerspiegeln würde , das tatsächlich wie ein Ah-Blockpost aussieht. Ich mag diesen hier. Ähm, es sieht aus wie ein Beitrag, wo ich ein Bild drin hätte. Der Name, der Titel der Beiträge, die Informationen, wie ich beginne, über den Beitrag zu sprechen, wenn ich es gepostet und alle Kommentare wurden verlassen. Und vielleicht könnte ich dieses Lieblings-Herz hier haben. Oder vielleicht könnte ich das rausnehmen, damit wir, wie ich schon sagte, herausfinden müssen, welche. Das liegt daran, dass diese Namen uns nicht unbedingt etwas bedeuten. Also gehe ich einfach hier durch und ich fange an, diese Ebenen abzuklicken. Oh, okay. Hier ist es. Bildergalerie drei. Also werde ich links auf das klicken. Ich ziehe es in mein Dokument. Ich werde es fallen lassen, in Ordnung? Und so ist das Ah, Spot. Wo jetzt, als ich eine Website entwarf, können Sie ein paar verschiedene Dinge tun. Ich könnte tatsächlich eine Art Titel oder Kopfzeile hier oben setzen, und ich könnte das später ausfüllen, oder ich könnte direkt in den Sumpf Post Abschnitt gehen. Ähm, Moment gehen wir einfach in die Moorpost Sektion und du wirst die Idee bekommen. Aber natürlich möchte ich, dass das gut aussieht. Ich könnte tatsächlich ein kleines Sprichwort hier haben, ein kleines Zitat oder Titel, die kürzlich blawg Post sagt und dann diese in fallen lassen. Aber im Grunde kann ich diese Schicht nehmen und sehen, was wir hier haben. Ok? Wir haben ihr Bild. Okay, lass uns das Symbol loswerden. Wir gehen nicht. Verwenden Sie dieses Symbol und ich kann das Bild verlassen. Ich könnte das Bild herausnehmen, das ich auch könnte, wenn ich wollte. Ich könnte das Rechteck-Werkzeug nehmen und, ähm, einfach über das Bild auf einer neuen Ebene gehen. Je nachdem, was ich dem Grafikdesigner zeigen wollte, konnten sie wahrscheinlich herausfinden, dass das kein Bild ist, Sie wissen, dass dies nur ein Platzhalterbild für das ist, was wir wollen, aber ich könnte das einfach ausfüllen, und ich könnte sogar einen Textblock darüber schreiben, der Bild sagt. Oder ich könnte, selbst wenn ich wollte, ich könnte ihm ein Bild bringen, nur ein schnelles Bild oder so und drei verschiedene hier haben. Aber im Grunde ist das nur ein schneller Weg für mich, das zu sehen. Okay, das ist ein Blockposten, und wir wissen, was wir hier vor sich haben. Ah, und dann werde ich diesen Blawg-Post-Eins nennen. Ich werde Click verlassen. Ziehen Sie diese auf die neue Ebene. Machen Sie eine Kopie davon. Blawg Post auch. Und schnappen Sie sich meinen Zug. Werkzeug Klicken Sie darauf. Verschieben Sie es und kopieren Sie es. Eine Menge Post drei. Klicken Sie darauf. Ok? Und Sie können sehen, dass diese nicht wirklich aufgestellt sind, damit ich sie skalieren kann, nur um willen. Zeit willen. Hier. Ich bringe ihn einfach rüber und zentriere sie irgendwie raus. Okay, jetzt machen wir jetzt etwas Spielraum. Ähm, jetzt möchte ich das aufteilen und vielleicht brauche ich meinen Podcast-Beitrag. Also, ähm, ich muss das teilen. Ich mag diese blaue Linie. Vielleicht möchte ich diese blaue Linie weiter unten benutzen. Das war im oberen Bereich, also lasst uns es suchen. Ich glaube, es ist dieses Jahr. Ja, ja. Es ist also dieser kleine Marker hier. Ich werde darauf klicken, nicht doppelklicken. Ich klicke und ziehe sie auf die, ähm, ähm, unter der neuen Ebenen-Wimpelkette, um eine Kopie zu erstellen. Ich werde es aus diesem Ordner ziehen, damit es von selbst aus ist. Es wird Zeilenumbrüche umbenennen. Ich weiß, was es ist. Bewegen, Werkzeug. Klicken Sie darauf. Also okay, da gehen wir. Okay, also haben wir den Zeilenumbruch dort bekommen. Das ist schön. Und jetzt möchte ich das nur duplizieren, denn vielleicht mache ich das Gleiche für den Moorposten. Vielleicht entscheide ich, dass ich sie kompensieren möchte, wie wir es mit der intelligenten, passiven Einkommensseite gesehen haben . Wie auch immer Sie es tun möchten. Aber, wissen Sie, das ist wieder nur, um Ihnen den Prozess zu zeigen. Also werde ich das mit einem anderen Zeilenumbruch tun und sehr schnell, nur indem wir Dinge verwenden, die wir bereits haben, ähm, Vermögenswerte, die wir bereits im Fotoshop haben. Sie können sehen, dass dies ein sehr einfacher Prozess ist. Und Sie können diese Dinge einfach in Stücke schneiden und nur die Abschnitte verwenden. Sie möchten eine Vorstellung davon bekommen, wie Ihre Website aussehen soll. Und wieder, ich würde wahrscheinlich in einige Titel und Dinge hier setzen und sagen, das ist Ah, das ist ein neuer Block Posts. Lassen Sie mich das tun. Und natürlich würde ich einige Zeit damit verbringen, das gut und gleichmäßig und hübsch aussehen zu lassen, aber im Moment zeigen wir dir einfach das Basic, damit es nicht zu hübsch sein muss. Lassen Sie uns versuchen, den Punkt zu bekommen, den ich hier zu machen versuche. Podcasts. Podcast. Was sind sie? Episoden, okay. Und dann Ah, was wollten wir sonst noch hier? Gehen wir zurück zu unseren Notizen. Werfen Sie einen Blick darauf. Notizen, die wir wollten. Wir haben unser Profilbild. Wir haben unseren Moorposten. Wir wollten Magnet in einer Anzeige führen. Mal sehen, wie wir das tun können. Ich werde das sehr schnell sagen. Ok? Ich gehe zurück. Ich brauche etwas. Sieht aus wie ein Bleimagnet. Ich habe mich das früher angesehen, und das wäre ein gutes Bleimagnet-Bild auf der linken Seite. Titel spricht über den Bleimagneten, und vielleicht habe ich einen Anmeldeknopf und ich ändere uns wahrscheinlich aus, was aussieht wie ein Textfeld mit einigen dieser Assets, aber wir müssen herausfinden, was das ist. Das sind die beiden Blöcke. Also lasst uns packen, dass Ziehen Sie das in unser Dokument hier in, ähm, wir können auch die Farben dieser Dinge ändern. Also, ähm, wenn Sie eine Markenfarbe haben, mit der Sie arbeiten, und Sie wissen, was die Farbe sein soll . kannst du ganz einfach machen. Ähm, amüsant. Sie verwenden dieses Blau ziemlich typischerweise, und das ist eine gute Sache, weil jeder immer das gleiche Blau verwendet, was gut funktioniert. Also lasst uns herausfinden, welche Boxen unser dies auf einem ist. Das hier. Okay, lasst uns die löschen. Ich will das nicht. Wir werden diesen Bleimagneten nennen. Okay, also das ist cool. Wir haben ihren Bleimagnet. Ah, wir wollen in Werbung. Gehen wir hier wieder rein. Sehen Sie, ob wir etwas finden können, das wie eine Werbung aussieht. Oh, da steht Werbung. Perfekt. Okay, wir müssen herausfinden, was das ist. Es gibt eine Menge davon, also beginne ich mich einfach zu verstecken, bis es verschwindet. Und dann weiß ich, was ist. Okay, hier gehen wir zu Bildern. Schlag das rein. Lassen Sie es fallen. Wir brauchen keinen von ihnen. Also wollen wir nicht auch Box. Versteck das da vorbei. Okay, Cool. Und dann nennen wir die Werbung, die du nie buchstabieren kannst. Krawatten bedeuteten und lassen Sie uns diese Führung bewegen. Mach es runter. Also war es nur irgendwie zentriert aussehend. Alles klar, das sieht gut aus. Und, ah, schauen wir uns Ihre Notizen an. Also haben wir so ziemlich alles bekommen, was wir haben wollten. Und wir haben das gemacht und, weißt du, ungefähr 20 Minuten oder so schnell, wir können einfach anfangen, zusammenzufassen, wie das aussieht. Ähm, natürlich, wir wollen die Fußzeile in der Navigation unten. Gehen Sie einfach voran und ziehen Sie das in sehr schnell. Ähm, wir werden Yeah benutzen, diesen hier. Also haben wir diese Fußzeile und Unterfußzeile unten. Ziehen Sie also die Fußzeilenlinks in das Abrufen und passen Sie unser Dokument an. Die Texte sind uns egal. Hatte das einfach wieder in Ordnung. Das ist nur das Design. Schön. Und Fußzeile erweitert. Ja, das gefällt mir auch. Und wir werden diese Berührung haben. Es wären all die verschiedenen Links und Informationen, die wir hier einfügen möchten . Ich mache wahrscheinlich die Verbindung. Die darüber, Ähm, etwas dunkler. , Weißt du, und ich könnte mich mit all dem Zeug verwirren. Nehmen Sie das Logo heraus. Das Logo ist mir egal. Vielleicht zentriere ich und skaliere es neu, so dass es hier ein wenig besser aussieht. Gut. Ok. Und mal sehen, wissen Sie, wenn wir sagen, wir wollten Teoh Farbe in der Fußzeile, die darüber ist. Wie würden wir das tun? Wir könnten auf das fallen lassen, die Hintergrundfarbe finden, und auf diesem kann ich tatsächlich doppelklicken. Und es wird tatsächlich ah, Farbwähler für mich bringen , weil es eine intelligente Schicht ist und ich das verdunkeln könnte, also das ist cool. Ähm, ich könnte auch in Effekt-Farbüberlagerung auf diesem Abschnitt tun und es in eine beliebige Farbe ändern, die ich will. Solange ich normal in 100% Deckkraft ausgewählt habe, könnte ich hier reingehen und die Farbe ändern, aber weil es eine intelligente Ebene ist, gibt mir die Möglichkeit, einfach einen Farbwähler zu verwenden. Also gehen wir mit dem. Das sieht gut aus. Okay, schauen wir uns mal an. Also, hier geht's. Wir haben eine Website sehr schnell und einfach angelegt. Vielleicht mag ich den Link oben nicht. Und ich bin wie, äh, irgendwie wie diese Verbindung ein bisschen besser. Lassen Sie uns so dieser Link hier, das ist Navigationsmenü. Steck das rein, äh oh. Sieht aus, als hätte ich es versehentlich in den Ordner gelegt, also stellen Sie sicher, dass Sie das nicht tun. Ich werde das aus dem Weg bringen. Bringen Sie es nach oben. Ich mag es, Dinge in den Schichten Stapel zu halten. Eigentlich, wie sie auf der Seite angezeigt werden. Es macht nur ein bisschen mehr Sinn. Also, hier geht's. Skalieren Sie das. Und ich muss das alles nicht sehen. Miss Alinas Informationen Dropdown-Menü und Suchergebnisse. Und dann berührt jetzt alles andere irgendwie die Spitze. Das mag ich vielleicht. Ich mag es aber nicht, aber nicht, also klicke ich auf alles und stelle sicher, dass ich meinen Umzug habe. Werkzeug ausgewählt. Und ich könnte das alles zusammen bewegen. Und dann ist das andere Problem, dass wir zwei Links haben. Wir haben diese Beläge und dann Blutungen aus dem oberen Abschnitt. Also gehe ich zum oberen Abschnitt und schalte den Knave aus, damit ich ihn nicht sehe. Und dann haben wir gerade dieses kleine bisschen Leerraum bekommen, weil wir nicht das ganze Dokument gefüllt haben. Wir haben gesehen, wie man das mit der Leinwandgröße macht. Also lasst uns herausfinden, wo wir hier sind. Sieht nach was sagt das aus? 17 10 17 20. Also Leinwandgröße machen diese 17 20 Clipping Wilker. Fahren Sie fort. Okay, jetzt müssen wir alles packen, weil es es von der Mitte abklemmt, nicht von dort, wo wir es klappen wollten. Also schnappen Sie sich einfach alles und bewegen Sie es dann nach unten. Was? Das Verschieben-Werkzeug. Und da gehen wir. Wir haben ein grundlegendes Layout auf unserer Website, und wir haben alles, was wir wollten. Wir haben unsere wir unser ah Logo hier. Es sieht so aus, als ob das Navigationslogo wieder in Schwierigkeiten kam. Wenn ich keine Willens-Sachen benutze, ähm, Navigation. Der obere Abschnitt naff. Wenn ich nichts will, werde ich es normalerweise löschen. Also werden wir den Knave nehmen und ihn loswerden. Okay, also gehen wir. Jetzt haben wir das ein bisschen überziehen. Okay, wir haben unsere Links. Ich habe mein Profilbild, vielleicht einige Buttons und reden über die Website. Ich habe meine letzten Blockbeiträge und einige Platzhalter große große Quadrate hier, um diese zu zeigen . Ich habe meine letzten Podcasts Episoden. Ich habe meinen Bleimagnet. Ich würde wahrscheinlich ein anderes Bild setzen oder das mit einem grauen Quadrat verdecken. Ich habe meine Werbung, meine unteren Lecks. Also alles, was wir unter Notizen mit Ausnahme von Social-Media-Symbolen wollten, aber Sie können sehen, wie einfach es ist, das zu beheben und diese zu bringen. Und das sind die beiden Möglichkeiten, wie Sie dies entwerfen können. Sie können es entweder mit den Gittern und Linealen tun und diese Quadrate und Dinge selbst erstellen , wie ich diese Quadrate in diesem Text machen könnte, aber es ist ein wenig längerer Prozess. Warum nutzen Sie nicht einfach die Assets, die Ihnen bereits bei Adobe zur Verfügung stehen, und erstellen Sie diese Website? Wie siehst du es für richtig? So gibt es einen sehr schnellen, einfachen und einfachen Website-Design-Markt zu gehen . 7. Mit Photoshop erstellst du ein Web: Jetzt wissen Sie, wie Sie ein einfaches Webdesign mock machen, und dies ist wertvolle Informationen für einen Grafikdesigner oder einen Web-Entwickler, weil es ihnen einige Informationen im Voraus, die sie verwenden können, um beginnen, Ihre Website sofort. Und sie müssen kein Haufen Ratschläge machen, um herauszufinden wonach Sie suchen. In diesem Kurs lernen Sie, wie Sie einige Recherchen durchführen, andere Websites ansehen und auseinander auswählen und herausfinden, was für sie gut funktioniert. Sie lernen, wie Sie einige Ideen vor der Zeit von dem aufschreiben, was Sie in Ihrem Website-Design wollen , so dass Sie nicht zu tun, um dieses Rätselraten, während Sie es entwerfen. Dann lernen Sie, wie man eine grobe Skizze macht, um einige grundlegende Ideen aufzulegen. Und dann gingen wir in Fotoshop und verwenden Gitter und Ebenen und verschiedene Werkzeuge, so dass Sie sich durch die verschiedenen Elemente bewegen und sehen können, wie sie in Ihr eigenes Website-Design passen würden . Hoffentlichfanden Sie diese Informationen sehr wertvoll, fanden Sie diese Informationen sehr wertvoll, und jetzt können Sie diese verwenden, um den Prozess zu beschleunigen, wenn Sie eine Website für Ihr Unternehmen oder Ihre Marke erstellt haben . Nun, was ich möchte, dass Sie tun, ist, gehen Sie voran und speichern Sie ein Bild von diesem Design Mock up, das Sie erstellt haben, und Fotoshop und laden Sie es in den Diskussionen oder Projekte Bereich dieses Kurses. Ich würde gerne sehen, woran du arbeitest. Es interessiert mich immer, zu sehen, was die Schüler schaffen. Und wenn Sie Fragen haben oder Feedback zu Ihrem Design wünschen, kann ich Ihnen das auf jeden Fall zur Verfügung stellen, auch wenn Sie einfach nur ein Foto machen wollen oder auch wenn Sie einfach nur ein Foto machen wollen oderIhr Telefon benutzen und einen Schnappschuss von dem machen, was Sie von Hand und laden, dass das großartig wäre, weil ich nur sehen möchte, was es ist, dass Sie jetzt erstellen. Wenn Sie Fragen haben, können Sie mich jederzeit kontaktieren. Sie können die Frage im Diskussionsbereich stellen, oder Sie können mir direkt eine Nachricht senden, und ich werde mich so schnell wie möglich bei Ihnen melden. Ich bin in der Regel immer für die Studenten verfügbar, und ich möchte nur Informationen für Sie zur Verfügung stellen, die ich in der Lage bin. Wenn Sie mehr über mich erfahren möchten, können Sie gehen, um www dot jeremy deegan dot com und finden Sie heraus, was es ist, an dem ich arbeite und kontaktieren Sie mich über diese Website auch. Also freue ich mich auf Ihr Projekt. Gehen Sie weiter und laden Sie es jetzt hoch, und ich sehe Sie in einigen zukünftigen Lektionen.