Einführung in Webdesign: Freundliches Design für Start-ups und kleine Unternehmen

1. Einführung: Hallo, Jungs. Das ist Meg Lewis von Ghostly Farns. Willkommen zu meiner Skillshare Klasse zur Einführung in das UI-Design. Ich möchte Ihnen zunächst ein wenig darüber erzählen , was wir während dieses Kurses lernen werden. Ich werde Ihnen zuerst ein wenig über UI-Stile und -techniken beibringen. Wir werden Dinge wie das Entwerfen verschiedener Schaltflächen, Zifferblätter, Avatare, Container lernen , und dann werden wir all das zusammen in eine einseitige Scrolling-Site für einen gefälschten Start setzen . Wenn wir alles zusammenfassen, werden wir lernen, wie man ein 960 Raster entwirft. Wir werden über Kopfzeilen, den Hauptteil, Fotos lernen , und dann werden wir lernen, wie die Inhalte, die der Client will in verschiedene Abschnitte für die Website aufteilen . Wir werden auch ein wenig über Rollovers und Interaktionen lernen. Lassen Sie mich Ihnen ein wenig über Party Starters erzählen und das Projekt, an dem ich euch zur Arbeit geben werde. Party Starters ist eine fiktive Firma , die ich einen Freund von mir habe, der verzweifelt will, um diese Firma zu gründen, aber er ist ein großer Party-Starter selbst, und so hoffentlich eines Tages, wird dies in den Werken werden. Aber im Moment möchte ich nicht wirklich, dass ihr Jungs für ein richtiges Startup designt , weil wir nicht wollen, dass eure Entwürfe kostenlos verteilt werden. Sie sind herzlich eingeladen, für Ihr eigenes Unternehmen zu entwerfen, wenn Sie ein Gründer eines Unternehmens sind und wenn Sie ein Designer sind, dann sind Sie willkommen Design für ein anderes Unternehmen als Ihr Projekt, oder wenn Sie nur neugierig sind, können Sie auch Design für Party-Starter. Es sind Katzen, tut mir leid. Sie können Ihre eigene Party Starters Website entwerfen, wenn Sie wollen, und senden Sie es einfach auf der Registerkarte Projekte und zeigen Sie mir, was Sie getan haben. Lassen Sie mich Ihnen ein wenig darüber erzählen, warum ich es liebe, für Startups zu entwerfen. Zuallererst sind sie unglaublich leidenschaftlich und enthusiastisch und energisch über das Produkt, und sie haben normalerweise gerne eine Hand vom Design, und sie möchten wirklich dazu beitragen, was mit dem Design passiert und sie sind leicht verfügbar, im Gegensatz zu einer Menge von Unternehmen, die sind, vielleicht, wenn Sie für eine Mutter-und-Pop-Shop, die im Laufe des Tages, sie führen den Laden. Diese Startups denken immer über ihr Unternehmen nach, sie sind ständig auf der Uhr, oft arbeiten sie am Wochenende und am Abend. So sind sie leicht für Sie verfügbar, und sie sind immer nur so aufgeregt über ihr Produkt, dass es wirklich Spaß macht, für ein Startups zu arbeiten und ich könnte es nicht mehr empfehlen. Auch Startups können unglaublich lukrativ für Sie sein. Abhängig von Ihrem Preismodell möchte ich dort nichts wirklich vorschlagen, aber oft je nach Unternehmen können Sie ein wenig mehr berechnen, weil dieses Design von viel mehr Menschen gesehen werden kann oder dann einige kleinere Unternehmen, die wirklich eng an ihrem Budget sind. Startups in der Anfangsphase sind oft sehr eng an ihrem Budget, und ich arbeite oft für diese Unternehmen, also bin ich wirklich aufgeregt über das Produkt. Manchmal biete ich ihnen ein bisschen eine Preisstaffel an. Aber in der Regel sind sie sehr ernst der Design-Arbeit und sie haben sicherlich ein bisschen Geld weil sie nach Investoren suchen und sie wollen ein professionelles vorzeigbares Aussehen haben. Das sind viele Gründe, warum ich es liebe, für Startups zu entwerfen, es macht eine Menge Spaß. UI-Design im Allgemeinen ist wirklich mächtig. Es ist im Wesentlichen nur Formen zu machen. Wie Sie in den Tutorials lernen, machen Sie nur eine Menge Quadrate und abgerundete Rechtecke, aber Sie fügen Farben und Texte zusammen und Fotografie, und Sie sind in der Lage, ein wirklich leistungsfähiges Design zu erstellen. Insbesondere mag ich freundliches Design zu schaffen , das viel Farbe und viel Energie und Wohlbefinden hat, sauber, leicht für den Benutzer zu verdauen und die Menschen reagieren wirklich gut auf freundliches Design. Unternehmen mit freundlichem Design sind im Moment sehr beliebt, wie Sie bei Unternehmen wie Skillshare und Airbnb und Zocdoc und sogar Warby Parker sehen , erhalten Sie diese sauberen modernen Designs, die Farbe in einer großartigen Weise verwenden und Menschen reagieren wirklich gut darauf. Ich wollte Sie nur wissen lassen, dass Sie, nachdem wir diese Tutorials zusammen gemacht haben, Ihre eigene einseitige Website für ein Startup entwerfen. Sie können darüber hinaus gehen, wenn Sie möchten und mit einigen weiteren Seiten fortfahren, aber für diese Klasse möchte ich nur wirklich, dass Sie eine Seite machen. Reichen Sie das an einem Stichtag ein, oder Sie können es vorher einreichen. Ich bin immer per E-Mail unter meg@ghostlyferns.com erreichbar. Du kannst mir Fragen stellen, mir deine Entwürfe frühzeitig zeigen, wenn du willst, und ich gebe dir gerne Feedback oder gebe dir ein paar Tipps. Ich weiß auch, dass die Tutorial-Videos zu sehen sind, was ich zu einigen Zeiten mache , weil ich kein genialer Screencast-Recorder bin. Also, wenn Sie es schwer haben, etwas zu sehen oder wollen, dass ich es klären, ich bin glücklich, dies per E-Mail zu tun. Ich habe auch alle Ressourcendateien aus den Videos bereit, die Sie hier herunterladen können. Gehen Sie vor und laden Sie diese herunter, während Sie sich das Video ansehen, und vielleicht können Sie auf einige meiner Ebenenstile klicken und sehen, was ich getan habe. Alles klar, Leute. Wenn Sie Fragen haben, mir bitte eine E-Mail, meg@ghostlyferns.com, und ich hoffe, Sie haben Spaß an diesem Kurs. Danke, Jungs. 2. Schaltflächen-Stile, Avatare, Container: Hey Gang, das ist Meg Lewis von Geisterfarnen. Willkommen bei der Skill-Share-Klasse zur Einführung in das UI-Design. Ich möchte zunächst einmal sagen, danke für die Teilnahme an dieser Klasse, hoffentlich lernen Sie etwas Wertvolles. Du machst dein Video nicht aus und vergisst, dass es jemals passiert ist. Also möchte ich den Haftungsausschlüssen zuerst geben. Dies ist eine Klasse für jemanden, der ein grundlegendes Verständnis von Photoshop hat. Wenn Sie kein grundlegendes Verständnis von Photoshop haben und Photoshop haben, werde ich ziemlich langsam dorthin gehen, wo Sie den Hang davon greifen können. Aber ich werde schnell genug gehen für die Leute, die bereits wissen, was sie tun, nicht völlig gelangweilt sein. In Ordnung. Fangen wir an. Öffnen Sie Photoshop, starten Sie eine neue Datei. Ich gebe ihm eine beliebige Größe von 1.000 Pixeln mal 1.000 Pixel. Immer 72 DPI für die Gestaltung für das Web. Wir werden einen RGB machen, auch weil wir für das Internet entwerfen. Also lasst uns diesem einen Titel von PARTYSTARTERS in allen Kappen geben. Warum nicht? Mach es auf. Hier ist unsere Leinwand. Wir entwerfen nur UI-Elemente für dieses Tutorial. Also lernen wir Dinge wie Knöpfe, Stile, Hülle und Fülle. Wir machen ein paar Avatare und wir werden Container machen. Es wird großartig. Du wirst eine tolle Zeit haben. Lasst uns anfangen. Als erstes entwerfen wir einige Knöpfe. Wir werden jetzt über acht Tastenstile gehen. Die ersten vier werden dunklere Tasten auf hellem Hintergrund sein. Wir werden es weiß für den Hintergrund halten. Die anderen vier werden hellere Tasten auf einem dunkleren Hintergrund sein. Erste Taste, beginnen wir mit einem abgerundeten Rechteck. Ich gebe ihm einen Radius von fünf Pixeln. Wir machen es nur eine Größe von 245 mal 50. Etwas zu wissen ist, dass ich CS6 verwende. Also bekomme ich diese kleine praktische Größenbenachrichtigung neben meiner Maus. Also, hier geht's. Hier ist unser abgerundetes Rechteck für unseren Button. Ich werde mich hier holen. Ich habe unsere PARTYSTARTERS, Farbfelder vorinstalliert. Also werde ich diese pinkfarbene Farbe probieren. Was sagt nicht Party außer Hot Pink. Jetzt ist es rosa. Ich werde zuerst auf diese Ebene doppelklicken. Es öffnet die Spalte „Layer-Zellen“. Nun, das erste, was am UI-Design ist, dass Sie definitiv diese Farbe die ganze Zeit verwenden werden. Der Ebenenstil ist sehr wichtig. Es lässt alles aussehen, als hätte es Tiefe. Wir unterrichten heute nicht unbedingt flaches Design. Also werden wir alles gerundet halten. Wir werden viele Schlagschatten, Farbverläufe, was auch nicht, natürlich auf eine geschmackvolle Art und Weise verwenden . Beginnen wir also zuerst mit einer Gradientenüberlagerung. Wie Sie sehen können, sieht das absolut schrecklich aus. Also werden wir diesen Farbverlauf direkt hier bearbeiten. Wir werden beiden N die gleiche heiße rosa Farbe geben, die wir vorher hatten. Jetzt möchte ich, dass dieser Farbverlauf eine Art harte Linie in der Mitte hat. Also werden wir diese obere Hälfte des Knopfes heller rosa machen, und diese Hälfte des Knopfes wird die gleiche rosa Farbe bleiben. Also, um ihm diese harte Linie zu geben, und ich werde zwei Punkte direkt in der Mitte machen. Sie können sehen, dass das in der Mitte liegt, weil unser Standort bei 50 Prozent liegt. Ich werde nur diese beiden Punkte auf dieser Seite zu einem helleren Rosa machen , als dieses Rosa ist. Das sieht toll aus. Also werde ich diese Farbe kopieren und auch hier drüben einfügen. Unser Farbverlauf ist fertig und es sieht toll aus, perfekt, alles ist wunderbar. Das nächste, was zu tun ist, ist ein Schlaganfall. Also werden wir den Schlaganfall auf der Außenseite behalten. Ich werde es ungefähr acht Pixel machen. Wir werden diese Deckkraft auf, wir werden sagen, 15 Prozent. Großartig. Also für die Schaltfläche sind wir jetzt mit den Ebenenstilen fertig. Wie Sie sehen können, ist alles, was wir gerade getan haben, genau hier. Also, wenn ich etwas bearbeiten muss, kann ich einfach auf Strich klicken, zu Strich bearbeiten und so weiter. Aber ich werde das zusammenbrechen, einfach unsere Ebenenpalette ein wenig attraktiver machen. Das nächste, was zu tun ist, ist etwas Text hinzuzufügen. Also werde ich nur Taste Text eingeben und schauen, unser Text ist weiß, so dass wir es nicht sehen können. Ich gehe hier rüber zum Charakterfenster und klicke auf die Farbe und ich werde es Hot Pink machen, nur damit du sehen kannst, was los ist. Lassen Sie uns sehen, unsere Schriftgröße beträgt 18 Punkte und wir haben Buchstabenabstand von 100. Das ist absolut perfekt für das, was ich tun möchte. Also werden wir es oben auf die Schaltfläche ziehen und schauen, jetzt können wir es nicht sehen. Also werde ich den Text wieder weiß machen. Perfekt. Um den Text nur ein bisschen leichter zu lesen, werde ich nur ein wenig Schlagschatten hinzufügen. Also habe ich wieder auf eine Ebene geklickt, um Ebenenstile zu öffnen. Ich werde jetzt einen Schlagschatten hinzufügen. Also werden wir dies in einem Abstand von eins halten und dann Ausbreitung von Null und einer Größe von auch Null. Der Winkel hier ist wirklich wichtig. Normalerweise verwende ich einen Winkel von 120 oder 90 Grad. Für dieses Projekt, Ich denke, ich will 90 zu tun. Stellen wir also sicher, dass globales Licht überprüft wird und das wird sicherstellen, dass diese Schlagschatten alle im gleichen Winkel von 90 Grad und inneren Schatten sind, alles, was wir von jetzt an tun, wird immer 90 Grad sein. Lasst uns diese Deckkraft auf 30 Prozent senken. Das ist großartig. So jetzt können Sie sehen, dass der Text nur ein wenig einfacher zu lesen ist. Lassen Sie mich es ausschalten, wieder an. Eine Menge von UI-Design sind diese kleinen subtilen Änderungen, die Benutzer nicht unbedingt bemerken können, aus der Fledermaus, aber es macht definitiv ihr Leben ein wenig einfacher. Ok. Lassen Sie diese Schaltfläche Nummer 1 in einen Ordner, und lassen Sie uns weiter. Taste Nummer 2. Lassen Sie uns mit ein bisschen mehr harten Knopf gehen. Das wird also auch ein bisschen mehr ein flacher Knopf sein. Jetzt machen wir noch eine 245 mal 50. Lassen Sie uns es zu unserer Lieblings-rosa Farbe machen. Eigentlich mag ich nicht mal Pink. Ich weiß nicht, warum ich das benutze. Also zoome ich nur ein bisschen hinein, damit ich hier mit diesem Knopf ein bisschen detaillierter ausrichten kann . Ich werde dies zu einem Twitter-Button machen. Zunächst einmal werden wir ein Twitter-Symbol und einen Text hinzufügen, nur um Ihnen zu zeigen, wie das aussehen könnte. Also zuerst werde ich einen speziellen Bereich für das Twitter-Symbol erstellen. Ich werde hier eine quadratische Form setzen. Ich halte nur die Umschalttaste gedrückt, während ich meine Form 50 Pixel x 50 Pixel ziehe. Wie Sie sehen können, fügt es sich ein, weil es die gleiche rosa ist wie die Form dahinter. Also werden wir dieses Rosa ein bisschen dunkler machen, nur ein bisschen perfekter. Also, jetzt werde ich wieder hinauszoomen. Ich werde Photoshop öffnen. Ich bin Illustrator, ignoriere das. Also öffne ich Illustrator, Ich hatte diese praktische Form, Twitter-Form, kleiner Twitter-Vogel. Ich werde ihn kopieren und dann gehe ich zurück zu Photoshop, ich werde ihn einfügen. Jetzt haben wir hier einige Möglichkeiten. Ich werde eine Formebene verwenden, nur weil ich Lage sein möchte, die Form des Vogels zu ändern und ich in der Lage sein möchte, die Größe zu ändern, ohne einige Details zu verlieren. Wir werden also eine Formebene hinzufügen. Hier ist er, er ist rosa. Wir werden ihn weiß machen, und wir werden ihn auf den Bereich dort setzen. Lassen Sie uns hineinzoomen, um alles perfekt zu machen. Machen wir ihm etwa 30 Pixel. Perfekt. Bringen Sie ihn da hin. Jetzt werden wir ein paar weitere Schaltflächen-Text hinzufügen. Dieses Mal ist dies, wo soziale Schaltflächen. Also werde ich Social Button Text eingeben, immer noch weiß, also werde ich es hier ziehen. Ich bin mir nicht sicher, ob mir der Abstand dazu gefällt. Es sieht so aus, als wären die Buchstaben zu weit auseinander, also werde ich das wieder auf Null ändern. Das ist großartig. Dann werden wir es einfach in das visuelle Zentrum hier verschieben. Perfekt. Dies ist also eine flache Schaltfläche, also werden wir keine Schlagschatten hinzufügen, wir werden keine Farbverläufe hinzufügen. Dieser Schaltflächenstil ist für Entwickler etwas einfacher, mit CSS-Schaltflächen zu tun. Also behalten wir das als flachen Knopfstil und ich beschrifte diesen Knopf 2. Jetzt gehe ich immer durch und nenne all diese Schichten, aber im Interesse der Zeit werde ich das jetzt nicht tun. Taste Nummer 3, dies ist ein Tastenstil, den ich die ganze Zeit verwende. Es ist definitiv ein üblicher Knopf von Ihnen, bin ich sicher. Also hier gehen wir wieder 245 von 50 dafür. Wir machen es wieder rosa. Doppelklicken Sie, um unsere Ebenenstile zu öffnen. Wir werden wieder ein Farbverlaufs-Overlay hinzufügen. Das sieht schrecklich aus. Also lasst uns diese wieder in Pink ändern. Für diesen hier werde ich nur die untere Gradientenstufe ein wenig dunkler machen. Perfekt. Wir wollen einen subtilen Farbverlauf. Je härter der Farbverlauf ist, desto billiger sieht der Knopf normalerweise aus. Dieser Farbverlauf ist also großartig. Jetzt werden wir einen Strich auf der Innenseite hinzufügen, um die Tastengröße und Form ein wenig konkreter zu halten . Es wird ein Pixel sein. Für die Farbe werde ich dieses dunkelrosa am unteren Rand der Schaltfläche probieren. Dann werde ich diesen Schlag noch dunkler machen. Wir wollen, dass es ein wenig definiert, aber nicht zu definiert ist. Das ist perfekt. Der letzte Schritt für diese Schaltfläche ist, einen leichten Schlagschatten hinzuzufügen, und wir haben immer noch unseren Winkel hier von 90. Für diesen Schlagschatten werde ich einen Abstand von eins machen, Ausbreitung von Null und Größe von zwei Pixeln. Lasst uns diese Deckkraft einfach auf 30 Prozent senken. Großartig. Lassen Sie uns etwas mehr Text hinzufügen. Also werde ich den Text von der ersten Schaltfläche nehmen und ich werde ihn kopieren. Also werde ich die Option gedrückt halten, wie ich auf die Schaltfläche Text klicken und ziehen Sie es nach oben über unsere neue Schaltfläche. Jetzt können wir noch sehen, dass es hier unten ist, aber wir haben es auch wieder. Lassen Sie es uns oben auf unserer Schaltfläche nach unten bewegen. Perfekt. Diesmal glaube ich nicht, dass ich genau will, dass es ganz Großbuchstaben ist. Also werde ich Schaltflächentext neu eingeben. Das ist großartig. Eine weitere Sache ist, dass dies eine subtile Ausgabe ist, die die meisten Benutzer nicht bemerken werden, aber es ist definitiv schön und es macht Ihren Button ein wenig klassischer aussehen. Wir werden unsere Ebenenstile wieder öffnen. Diesmal werde ich einen inneren Schatten hinzufügen. Es beginnt ganz oben und wir machen es weiß. Sehen Sie, wie unser Mischmodus auf Multiplikation eingestellt ist. Lassen Sie uns das auf normal ändern, damit wir unsere weiße Farbe sehen können. Lassen Sie uns einen Abstand von zwei Pixeln von Null und Größe von Null machen. Das ist ein bisschen zu hart, also werden wir das nur ein wenig reduzieren. Gehen wir vielleicht 40 Prozent. Perfekt. Großartig. Es gibt einen Button Stil Nummer 3. Taste Stil Nummer 4. Gleiche Größe, gehen wir mit einem abgerundeten Rechteck und lassen Sie uns diesen Radius machen diesmal 50, 245 mal 50 ist unsere magische Zahl. Lass es uns nochmal rosa machen. Diesmal machen wir ähnliche Gradienten wie der letzte. Lassen Sie uns Taste öffnen 3, und, sehen Sie, wo es sagt FX hier, sind Ihre Ebenenstile, so dass Sie gehen, um die Option gedrückt halten, ziehen Sie die FX bis zur neuen Form und lassen Sie los, und Sie haben nur alle kopiert die Layerstile von der vorherigen Schaltfläche bis zu dieser Schaltfläche. Außer, dass ich etwas etwas anderes möchte, möchte ich diesen Strich nehmen und ihn bearbeiten. Anstatt ein Pixel zu machen, lassen Sie uns auf der Außenseite acht Pixel gehen, ähnlich dem, was wir hier oben getan haben. Perfekt. Dann werden wir es in dieser dunkelrosa Farbe behalten. Nun, ich dachte, dieser innere Schatten sieht ein wenig zu intensiv aus, also werden wir das nehmen und wir werden es nur einen Abstand von einem Pixel machen, und wir werden die Deckkraft etwas abschwächen, gehen wir mit 15 Prozent . Perfekt. Jetzt denke ich, das ist nicht ganz genug von einem Kontrast, wie ich wollte, also öffnen wir den Schlaganfall wieder nach oben und machen das nur ein bisschen dunkler, da gehen wir. Perfekt. Nehmen wir den Schaltflächentext vom letzten Mal und kopieren Sie ihn. Auch hier werde ich die Option gedrückt halten und es nach oben verschieben, und dann werde ich diesen Text nach unten oben auf dieser neuen Schaltfläche verschieben. Toll, es gibt Taste Nummer 4. Lassen Sie uns diesen Ordner hier nennen und gehen wir weiter. Jetzt werden wir ein paar helle Tasten auf einem dunkleren Hintergrund machen. Welche Farbe sollten wir für einen dunkleren Hintergrund wählen? Ich weiß, lass uns Hot Pink machen. Wählen Sie eine beliebige Größe für die Form dieses Hintergrunds, machen Sie hier nur ein Rechteck, lassen Sie es pink, alle sind glücklich, lassen Sie uns hier ein wenig mehr Platz für unsere Knöpfe geben. Perfekt. Aber Nummer 1, auf der rosa Seite, werden wir die gleiche Art von Taste tun, die wir gerade mit einem abgerundeten Rechteck von 50 Pixeln Radius, 245 mal 50. Wir können es nicht sehen, weil es die gleiche Farbe wie der rosa Hintergrund hat, also lassen Sie es dieses Mal einfach weiß machen. Fügen Sie einige Ebenenstile hinzu, wir werden hier ein anderes Sortierstil-Design machen, und wir werden nur einen Schlagschatten machen, anstatt es ist dieser verschwommene Schlagschatten-Stil, den wir so gewohnt sind, gehen, um es als solide Schlagschatten zu tun. Ändern wir also den Abstand zu drei, verteilen sich auf Null und Größe auf Null, und jetzt sehen Sie, wie es ein sehr flacher Schatten ist. Lasst uns diese multiplizierte Deckkraft nach unten stoßen, sehr schön, lass uns 15 Prozent machen, nein, lass uns 20 gehen. Ehrfürchtig. Nun, lassen Sie uns etwas mehr Text darüber hinzufügen, ich werde Schaltflächentext eingeben, lassen Sie uns diesen Text rosa machen, lassen Sie uns dieses Mal nicht wirklich Großbuchstaben halten, lasst uns einfach so tippen. Perfekt. Ich will diesmal nicht, dass der Buchstabenabstand ist, also werde ich das wieder auf Null bringen. Ziehen Sie es auf die Schaltfläche und wir sind golden. Perfekt. Es gibt Knopf Nummer 5. Taste Nummer 6. Wir werden eine weitere flache Schaltfläche machen, dieses Mal werden wir Rechteck anstatt ein abgerundetes Rechteck, das wir getan haben, 245 mal 50, da gehen wir. Wir werden es weiß halten, und wir werden dasselbe tun wie ein Schlagschatten, diesmal wird es fünf Pixel Abstand, Null Spread und eine weitere Null für die Größe sein . Wir werden das nochmal runter auf, gehen wir 30. Jetzt nehmen wir den Text von der letzten Schaltfläche und kopieren ihn erneut, verschieben Sie ihn nach unten. Ehrfürchtig. Dieses Mal möchte ich eigentlich, dass der Text etwas dunkler ist, also werde ich den Text nehmen und die Farbe, die wir hier unten sehen, probieren und es so dunkel rosa machen. Taste 6. Ehrfürchtig. Taste 7. Wir haben ein abgerundetes Rechteck-Werkzeug, und wir gehen wieder Radius von fünf, wir gehen zurück zu fünf, 245 mal 50. Dieser Button Stil wird sehr ähnlich zu dem, den Sie hier sehen, es wird nur eine leichtere Version sein. Wir werden dies nehmen, fügen einige Ebenenstile hinzu, wie ein Farbverlauf. obere Abschnitt ist weiß, der untere Abschnitt werden wir weiß probieren, und dann werden wir es in ein wenig dunkleres Grau ändern, es wird sehr subtil sein. Perfekt. Vielleicht ein bisschen mehr, großartig. Jetzt werden wir einen Schlaganfall hinzufügen, also lasst uns wieder nach innen gehen, ein Pixel, und wir werden nur eine dunklere, graue, vielleicht ein wenig dunkler, lass uns sieben gehen. Perfekt. Als nächstes fügen Sie unten einen Schlagschatten hinzu, wir werden den gleichen Schlagschatten machen, den wir auf diesem anderen Knopf getan haben, dieser hier, wir werden einen Abstand von eins machen, Größe von zwei, und wir werden diese runter stoßen, lasst uns 40 gehen. Prozent. Mal sehen, was wir hier haben. Ich denke immer noch, dass der Schlaganfall ein bisschen zu dunkel ist, also werden wir das eine Kerbe runter nehmen, vielleicht. Ein bisschen mehr. Perfekt. Lassen Sie uns den Schlagschatten auch etwas dunkler machen. Lassen Sie uns das auf normal ändern. Großartig. Der nächste Schritt besteht darin, Schaltflächentext zurück hinzuzufügen. Im Interesse der Zeit werde ich diesen Schaltflächentext kopieren, ihn nach unten verschieben. Diesmal werde ich es zu einem dunkelgrauen machen. Wir haben hier oben dieses sehr dunkelgrau aus unseren Mustern, wir werden das benutzen und da gehen wir. Last but not least, ist ein Schaltflächenzustand. Für diese Schaltfläche, wie es aussehen würde, wenn Sie darauf klicken. Legen wir dies in einen Ordner, Knopf 7, und lassen Sie uns diesen Ordner kopieren. Also ziehe ich den Ordner hier runter, kopiere ihn, dann haben wir unsere Taste 7 Kopie. Lass es uns einfach auf Taste 8 ändern. Ziehen wir die Taste 8 nach unten. Damit es so aussieht, als ob es eingedrungen ist, werden wir etwas in den Ebenenstilen tun, wir werden einen inneren Schatten hinzufügen. Eigentlich nehmen wir zuerst unser Gradienten Overlay und lassen Sie es uns einfach umkehren. Anstatt es hell zu dunkel wird, werden wir dunkel zu hell, und dann fügen wir einen inneren Schatten hinzu. Wir halten es hier oben bei 90 Grad, und machen wir Abstand von 4, Größe 3. Perfekt. Lasst uns das auf 20. Großartig. Jetzt sieht unser Schlaganfall ein wenig verrückt aus, weil Sie diesen weißen Rand hier sehen können. Lassen Sie uns den Strich bearbeiten und wir machen ihn dunkler. Nicht so dunkel. Vielleicht gehen wir neun. Großartig. Okay, noch eine kleine Sache, die wir tun können, ist, dass wir diesen Schlagschatten loswerden können, den wir vorher hatten und lasst uns ihn in etwas anderes ändern. Lassen Sie uns dies in Weiß ändern, und entfernen Sie einfach diese Größe von zwei Pixeln und ändern Sie sie in eins. Dann werden wir das im Wesentlichen runterstoßen. Da gehen wir, also haben wir hier nur ein bisschen Weiß hinzugefügt. Perfekt. Alles klar, wir sind fertig mit Knöpfen. Lassen Sie uns diese in den Schaltflächenordner legen, und nennen wir es einen Tag auf Knöpfen. In Ordnung, bewegen wir unsere Knöpfe hier hoch. Nun gehen wir zu Avatar-Stilen über. Wir werden ein paar verschiedene machen, wir werden einen kreisförmigen Avatar und einen quadratischen Avatar machen. Beginnen wir mit einem quadratischen Avatar. Wir werden damit beginnen, hier einen Avatar auf unsere Kunsttafel zu platzieren. Lasst uns unseren Freund Anthony schnappen. Anthony ist hier ein bisschen groß, also machen wir ihn, nichts für Anthony, etwas kleiner. Lassen Sie uns 140 Pixel Quadrat gehen. Perfekt. Jetzt werden wir nur diese Ebene nehmen, wir werden einige Ebenenstile darauf hinzufügen. Beginnen wir mit einem Schlaganfall. Wir gehen hinein, denn wenn Sie größere Striche an der Außenseite hinzufügen, sehen Sie, wie die Kante ein wenig abgerundet ist. Wenn Sie auf abgerundete Kanten gehen, könnte das eine gute Idee sein, aber wir sind es nicht. Also lassen Sie es auf die Innenseite legen und das wird die Form auf 140 Pixel breit anstatt 140 plus acht halten . Lass es uns weiß machen. Jetzt können Sie es nicht sehen, also fügen wir unten einen leichten Schlagschatten hinzu. Dieser wirklich intensive Schlagschatten sieht ziemlich kitschig und ziemlich billig aus, also werden wir ihn ein wenig subtiler machen. Wir werden einen Abstand von einem Pixel hinzufügen, eine Größe von zwei und wir werden das auf 30 reduzieren. Sieh dir das an, es ist schön und subtil. Das Schöne an dieser Art ist, dass es noch besser aussieht, wenn Sie eine hellgraue Farbe dahinter hinzufügen . Sieh dir das an. Schön. Hier ist unser Anthony Avatar Nummer 1. Lassen Sie uns nun in einige abgerundete Avatare einsteigen. Hier wird es ein wenig schwierig, weil ich die Dinge etwas anders mache als viele andere Leute. Viele Leute lieben es, Masken zu verwenden, ich liebe Masken manchmal und ich liebe Masken nicht manchmal. Also werde ich es auf meine Art machen und bitte wissen Sie, dass alles, was ich in Photoshop mache, wenn Sie einen besseren Weg kennen, es zu tun und es so ist, wie Sie es gerne tun, bitte ignorieren Sie mich und tun Sie es auf Ihre Weise. Mein Weg ist nicht richtig, besonders wenn es um Masken geht. Wir werden wieder 140 mal 140 machen. Ich mache nur einen Kreis. Hier ist es. Nur damit wir es sehen können, werde ich es so grell machen. Es ist nicht grell. Es ist schön. Teal Farbe. Dann nehmen wir Anthony wieder mit. Los geht's. Platzieren wir Anthony und dann positionieren wir ihn irgendwo über dem Kreis. Ich werde es nicht perfekt machen, weil ich schnell hier gehe. Jetzt haben wir diese beiden Schichten. Wir haben hier unsere Form, eine Kreisform, und dann haben wir Anthony. Ich gehe direkt zwischen ihnen und halte „Alt“ oder „Option“ gedrückt und klicke. Das hat Anthony gerade oben abgeschnitten. Jetzt weiß ich, dass viele von Ihnen sagen: „Warum machst du nicht einfach eine Maske auf dem Kreis und wendet sie auf Anthony an?“ Darauf antworte ich, ich weiß nicht. Das ist genau die Art, wie ich es mache. Ich werde den Kreis nehmen, ich werde einen Layer-Stil hinzufügen. Wenn Sie Maskierung durchführen, können Sie stattdessen die Ebenenstile zu Anthony hinzufügen. Ich werde dieses Mal einen Schlaganfall nach außen hinzufügen, nein, lass uns reingehen. Wir werden acht von innen machen, um es bei 140 x 140 zu behalten. Dasselbe, wir werden es weiß machen und dann fügen wir dieses Mal ein Äußeres Glühen hinzu. Nicht gelb, ändern wir es in Schwarz und ändern Sie dies auf normal. Sieh dir das an, das ist schrecklich. Sieht furchtbar aus. Also werden wir es ziemlich viel auf etwa 10 Prozent runter nehmen. Perfekt. Okay, da ist Anthony als Kreis. Avatar 2. Avatar 3, wir werden dasselbe tun. Wir werden das tatsächlich kopieren. Um es zu kopieren, habe ich das ausgewählt. Ich klicke um Anthony. Klicken Sie nicht jetzt, halten Sie die Option gedrückt, ziehen Sie ihn über. Perfekt. Jetzt habe ich Anthony 2 nehmen. Nennen wir diesen Avatar 3. Lassen Sie uns diesen Ordner öffnen, klicken Sie wieder auf hier und um die Ebenenstile zu ändern. Bevor wir ein Outer Glow verwenden, deaktivieren wir das. Dieses Mal fügen wir einen Schlagschatten hinzu. Fügen wir hinzu, anstatt ein Schlagschatten wie dieser Avatar zu sein, werden wir es wirklich solide machen. Also werden wir die Größe auf Null nehmen. Perfekt. Also, jetzt haben wir diese harte Linie hier und lassen Sie uns dieses Hot Pink machen. Lustige Zeiten. Avatare, bam, wir haben es geschafft. Nehmen wir diese beiden Avatare und verstauen sie vorerst hier unten. Perfekt. Machen Sie hier mehr Platz für uns. Das nächste, was wir lernen werden, ist ein Container-Stil. Beginnen wir mit einem abgerundeten Rechteck. Wir gehen, Radius von fünf ist in Ordnung. Machen wir hier 250 mal 280. Tut mir leid, das ist langweilig. Dahinter werde ich ihm einen Hintergrund dieser hellgrauen Farbe geben, die wir jetzt haben. Leg es einfach zurück. Jetzt nichts Perfektes. Jetzt haben wir unser Hintergrundrechteck sechs hier, und dann abgerundetes Rechteck, ist auch grau. Also lasst uns das weiß machen, nur damit wir es ein bisschen besser sehen können. Perfekt. Lassen Sie uns also die gleichen Ebenenstile haben, die dieser getan hat. Kein Schlaganfall. Also fügen wir einfach diesen Schlagschatten hinzu. Doppelklicken Sie auf, wechseln Sie zu Schlagschatten. Ändern Sie das in Abstand von eins, Größe von zwei, und dann stoßen wir auf, gehen wir 30. Perfekt. Nächster Schritt. Lassen Sie uns ein Bild hinzufügen. Lasst uns ein anderes Gesicht benutzen. Wie klingt das? Wir haben ein paar gute Avatare in unserem Ordner hier drüben. Gehen wir mit unserem Freund David hierher. Da ist er, sieht glücklich aus. Er wird so glücklich sein. Er ist in diesem Tutorial. Jetzt legen wir ihn einfach wieder auf, wie wir es vorher getan haben. Gehen Sie dazwischen, halten Sie Alt oder Wahltaste gedrückt und klicken Sie darauf. Jetzt hat David sich hier beworben. Damit du ihn rauf und runter bringen kannst, wo wir wollen, genau hier für jetzt. Im Interesse der Zeit werde ich das nur augapfel und sagen, er sieht ziemlich genau hier aus. Nun lassen Sie uns etwas Text darüber hinzufügen. Sagen Sie, dies ist so etwas wie eine Mitgliedskarte oder eine Raumkarte, wenn Sie Leerzeichen haben. Sie können hier ein Bild von einer Wohnung, die Sie lieben, oder für Pinterest, etwas ein bisschen Inspiration, ein Album-Cover, was auch immer Ihr Startup ist, das könnte für alles wirklich funktionieren. Also werden wir hier einen Text hinzufügen, und wir werden Bingo auf Dienstag Nights setzen . Ich weiß nicht mal, warum ich mich dafür entschieden habe. Wahrscheinlich eine schreckliche Idee. Wir können es kaum lesen. Also lassen Sie uns die Textfarbe wieder zu unserem Lieblings-Rosa ändern und machen es ein wenig kleiner. Also lasst uns mit 13 Punkten gehen. Perfekt. Jetzt werden wir hier unten ein paar Avatare hinzufügen, kreisförmige Avatare. Vielleicht sind es Leute, die Bingo am Dienstagabend besuchen, vielleicht sind es Leute, die Bingo am Dienstagabend mögen, wer weiß? Also lassen Sie uns ein paar sehr kleine Kreise machen. Gehen wir 25. Ja, machen wir 25. Lassen Sie uns hineinzoomen, damit wir hier ein bisschen besser sehen können. Also lassen Sie uns noch ein paar Gesichter hinzufügen. Lassen Sie uns unseren Freund Daniel hier platzieren. Oh, er ist so groß. Wieder werden wir es auf meine Art machen und wir werden sie einfach schnell an die Spitze legen. Klicken Sie zwischendurch. Da ist er. Er ist etwas beschnitten, also werde ich das etwas kleiner machen und ihn drauf setzen. Perfekt. Also da ist Daniel. Legen wir ihn in seine eigene Daniel-Mappe. Großartig. Lassen Sie uns ihn kopieren, verliert über fünf Pixel, 1, 2, 3, 4, 5. Hier ist Daniel. Wir werden Anthony hier wieder hinzufügen. Also benennen Sie das um, suchen wir Daniel und befreien Sie sich von Daniel, und lassen Sie uns Anthony hier statt, weil Dienstag Abend Bingo zwei Fans hat, und sie sind Daniel und Anthony. Perfekt. Das ist großartig. Also werden wir einen Bereich hier unten hinzufügen, um ein paar Keywords, Tags oder vielleicht ein kleines Herz für Sie auch Bingo am Dienstag Abend zu mögen. Also lassen Sie uns zuerst eine kleine Trennregel hier unten mit dem Zeilenwerkzeug hinzufügen. Wir werden dieses ein Pixel machen, das Sie hier oben sehen können, wir werden das einfach rüber ziehen. Perfekt. Jetzt ist es weiß, also kannst du es nicht wirklich sehen. Nein, ist es nicht. Es ist grau. Es ist nicht grau genug draußen, es gibt ein wenig Licht. Also werde ich diese graue Farbe von der Seite hier probieren. Perfekt. Da ist unsere Regel. Ich werde das ein wenig atmen lassen, also werde ich Bingo am Dienstag Nights nach oben fünf Pixel bewegen, und die Avatare zwei Pixel hoch, gehen wir drei Pixel. Perfekt. Also fangen wir an, indem wir ein kleines Herz hinzufügen. Also werde ich Illustrator öffnen, das Herz greifen, das ich hier bereit habe, und ich werde es wieder als Shape-Ebene einfügen, damit ich die Größe ändern und die Farbe ändern kann. Lassen Sie uns die Farbe zu rosa ändern, damit wir ein wenig besser sehen und es etwas kleiner machen können. Lass uns 12 Pixel gehen. Perfekt. Das könnte etwas zu klein sein. Also werde ich verkleinern und sehen, was ich denke. Nein, ich denke, das ist eine tolle Größe. Was ist mit dir? Ich kann dich nicht hören. Also nehme ich an, du sagst: „Ja, es ist eine gute Größe.“ Also lassen Sie uns jetzt einige Tags an der Unterseite hinzufügen. Um diesen Textstil aus dem Formular zu erhalten, werde ich diese Buchstaben kopieren und klicken und einfügen. Lassen Sie uns unsere Tags zu Single Men, Bingo und Spaß ändern . Offenbar, Dienstag Abend Bingo ist Single Dude Nacht. Also sagen wir, unsere Linkfarbe ist rosa. Also lassen Sie uns diese Kommas nicht rosa machen, weil sie keine Links sind. Machen wir ihnen stattdessen eine graue Farbe. Auf diese Weise, wenn ich auf Single Men klicke, kann ich zu all den Single Men Events gebracht werden. Vielleicht soll das Eisen die Damen in diese alleinstehende Männernacht ziehen. Ich weiß es nicht. Leute, wir sind komplett mit allen UI-Stilen fertig. Hoffentlich war das nicht zu grausam. Das nächste Tutorial werde ich Ihnen zeigen, wie Sie alle diese Elemente nehmen und sie in einer tatsächlichen UI-Homepage zusammenstellen, und es wird episch sein. 3. Erstelle ein einseitiges Dokument für ein Start-up: Hallo Jungs. Willkommen bei Tutorial Nummer 2. In diesem Tutorial werden wir alles, was wir im ersten Tutorial gelernt haben, nehmen und es auf eine Website anwenden, und wir werden wahrscheinlich einige neue Sachen auf dem Weg lernen. Für diese Seite werden wir eine einseitige Squirrly Website für ein gefälschtes Startup entwerfen. Das Startup wird Party-Starter genannt. Was Party-Starter tut, ist, wenn Sie eine lahme, erbärmliche Party haben , die Sie werfen, niemand hat eine gute Zeit, oder niemand tanzt, können Sie einen Party-Starter bestellen, um zu Ihrem Party so schnell wie möglich und starten Sie es. Ich beginne gerne zuerst mit einem Photoshop-Dokument, das ein 960 Raster hat. Ich habe den Link 960.js in Ihrem Ressourcenbereich auf der Skillshare Seite eingefügt, so dass Sie dorthin gehen können und Sie das Raster für sich selbst herunterladen können, oder Sie können selbst ein Raster erstellen. Dies ist ein Standard-12-Säulen-Raster, das ich immer gerne benutze. Normalerweise bin ich super organisiert und achte auf Pixel, aber um der Zeit willen werde ich nichts davon tun. Ich werde versuchen, sehr organisiert zu sein, während ich auch schnell bin, also werden wir sehen, wie das geht. Normalerweise beginne ich gerne mit drei Ordnern: Kopfzeile, Text und Fußzeile. Ich werde die Website in drei Abschnitte aufteilen, da dies eine abschnittsbasierte Squirrly Website ist. Für den Header werden wir hier mit einer kleinen Headerleiste beginnen. Es wird etwa 70 Pixel hoch sein, 70 und wir werden es nur ein bisschen breiter machen als die tatsächlichen Leinwände hier, weil wir einen Schlagschatten unten hinzufügen werden, und wir wollen nicht wirklich, dass es an den Seiten zeigt. Dafür werden wir einen Schlagschatten hinzufügen, wie ich bereits sagte, Abstand von eins, Größe von zwei, und dann machen wir hier einen kleinen Pass von 30 Prozent. Das sieht toll aus. Was brauchen wir als Nächstes? Ich glaube, wir brauchen ein Logo. Hier habe ich eine kleine Ressourcendatei bereit zu gehen. Es hat einige der Tasten Stile, die wir brauchen, Avatare, und hat auch unsere Party Starters Logo. Nun, dieses Logo, das ich gemacht habe, ist getrennt von dem eigentlichen Text, wie Sie sehen können, und ich tat das nur, damit wir die Farbe der Sprechblase und den Text ändern können , wenn wir wollen unabhängig von dem anderen Teil. Aber jetzt werde ich es nur rosa und dunkelgrau halten, und dann ziehe ich es in unser neues Dokument hierher. Es sieht ein wenig groß aus, also werde ich es etwa 180 Pixel breit machen. Da gehen wir. Komm schon. Da. Dann ist diese Linie hier die Mittellinie, also werde ich sie hier in der Mitte der Seite ausrichten. Lassen Sie uns unsere Führer für eine Sekunde verstecken und sehen Sie sich das an. Ich denke, das ist perfekt. Das nächste, was ich tun will, ist ein kleiner Link hier oben in der Ecke, der sagt: „Ich möchte ein Party-Starter für Leute sein, die auch beitreten und selbst ein Party-Starter werden wollen.“ Ich werde gleich von der Spitze meines Kopfes sagen, wir wollen, dass das 11 Punkte sind. All Caps: „Ich will ein Party-Starter sein. Lassen Sie uns unsere Führer zeigen, und lassen Sie uns das hier aufstellen, und verankern Sie es auf diesem Führer hier. Das ist perfekt. Großartig. Das sieht aber etwas zu groß aus. Ich will, dass es ziemlich subtil ist, also werde ich es hier einen anderen Punkt runterstoßen, auf 10. Ich finde, das sieht ziemlich gut aus. Es sieht diskret aus. Der Header ist tatsächlich getan, das war ein Stück Kuchen. Wir werden diese Ebenen nehmen und sie in den Header-Ordner legen. Jetzt werden wir die Leiche öffnen und an Abschnitt 1 arbeiten. Lassen Sie uns unsere Führer zeigen. Nun, der Abschnitt wird ein großes Browser-Breite Foto mit einigen wichtigen Text darüber, was Party Starter ist, nur ein paar Zeilen, und dann ein großer Call-to-Action-Button hier drüben. Nun, ich möchte definitiv, dass das alles über der Falte liegt, was ich sagen werde, zumindest ist, sagen wir 715 Pixel entlang der Linie hier. Ich möchte es weit darüber halten. Vielleicht stecken wir zuerst unser Bild an und sehen dann, was passiert. Ich werde unser großes Foto platzieren, das jetzt nicht so groß aussieht, aber ich werde es groß machen. Ich werde das ausstrecken und schauen, wie groß es ist. Offensichtlich geht es vorbei an dieser Linie, die ich nicht wirklich will. Ich möchte, dass es nur diesen Abschnitt aufnimmt. Also werde ich das hier ein bisschen zentrieren. Lasst uns das nach oben bewegen. Das sieht toll aus. Dann werde ich eine kleine rechteckige Auswahl treffen. Verstecken wir diesen Kuchen, weil wir nicht wollen, dass die Leute denken, dass die Party-Starter immer mit einem Kuchen auftauchen. Das wollen wir nicht. Das wäre schrecklich. Ich werde das nur da raus maskieren. Perfekt. Hier ist unser großes Bild weit über der Falte, wie es mir gefällt. Lassen Sie uns unsere Guides ausblenden und etwas Text hinzufügen. Hier in diesem anderen Dokument halte ich das gerne griffbereit und habe es einsatzbereit, damit ich es beim Entwerfen referenzieren kann. Wir haben unseren Überschriftentext hier auswendig gelernt. Es ist bereit zu gehen, also können wir uns davon holen, wann immer wir etwas Bestimmtes brauchen. Ich werde eine H2-Überschrift schnappen und sie über ziehen. Hier geht es darum, wo ich meinen Text will, also werde ich nur ein bisschen über Party-Starter tippen. Es wird sagen, lasst uns das nicht machen, da gehen wir: „Geht Ihr Event nicht wie geplant? Niemand tanzt, die Gäste haben keinen Spaß.“ So dass Text auf dem Foto nicht sehr auffällig aussieht, und dieses Foto wird dynamisch dimensioniert werden ein Benutzer sein Fenster öffnet und es kleiner macht. Wir wollen, dass es etwas dahinter hat, um diese Lücke dort zu überbrücken. Ich werde ein wenig Weiß hinter dem Text hinzufügen. Los geht's. Ich werde es sofort augapfel. Vielleicht so. Sicher. Kopieren wir das nach unten und ziehen Sie es. Mit der zweiten Zeile Übereinstimmungen, und dann ziehen Sie das hier rüber. Lassen Sie uns verkleinern, um zu sehen, wie das aussieht. Ich werde das hier ein bisschen hochziehen. Das ist großartig. Nun fügen wir eine weitere Textzeile hinzu, die nur in Großbuchstaben sagt: „Wir bringen die Party ins Leben.“ Perfekt. Lassen Sie uns mit unserer Lieblings-rosa Farbe gehen. Probieren Sie dieses Pink hier oben. Lassen Sie uns den Text oben setzen, und lassen Sie uns diesen Text tatsächlich weiß machen. Großartig. Ich finde, das sieht verdammt gut aus. Das letzte, was hier, lasst uns das über stoßen, ist hinzuzufügen, unsere riesige Call-to-Action-Taste. Also für den Knopf, werde ich hier hineinzoomen. Ich werde einen Teil dieses H2-Textes probieren und ihn einfügen, nur damit ich den Text hier bekommen kann. Der Knopf wird also sagen: „Ich brauche jetzt einen Party-Starter.“ Ausrufezeichen. Das sieht ein wenig groß aus, das wird die Schaltfläche nur eine Registerkarte größer machen, als ich will, also werde ich das auf 16 Punkte stoßen. Ja, das ist großartig. Lassen Sie uns den Schaltflächenhintergrund hinzufügen. Wir werden diesen super gerundeten Button machen, den wir früher gelernt haben, der einen Radius von 50 Pixeln hatte. Machen wir 335 mal 50. Großartig. Passen Sie dies hier entsprechend an. Also für diesen hier werden wir einen Farbverlauf machen, und dieses Mal werden wir Blaugrün machen, weil ich denke, dass rosa Farbe ein wenig übergebraucht wird. Lassen Sie uns diesen Farbverlauf machen, lassen Sie uns hier oben für unsere Party-Starter-Farbschema probieren. Lassen Sie mich diese bläuliche blaugrün Farbe setzen, und lassen Sie uns diese untere hier etwas dunkler machen. Perfekt. Unser nächster Schritt hier besteht darin, diesen Strich auf der Außenseite von acht Pixeln hinzuzufügen und dann die Deckkraft nach unten zu drücken. Gehen wir zu 10 Prozent. Ja, das gefällt mir. Lassen Sie uns diesen Text jetzt weiß machen, ein bisschen auffälliger. Um es noch deutlicher zu machen, fügen wir einen Schlagschatten unter dem Text hinzu. Der Schlagschatten wird nur eine Entfernung von eins sein, Ausbreitung von Null und Größe von Null. Dann stoßen wir die Deckkraft auf das ist cool, 35 rad. Bewegen wir diesen Knopf, um auf unsere Guides zu passen. Hier ist unser Knopf, bewegen Sie sich, wir wollen, dass alles auf unser Gitter passt. Lassen Sie uns auch sicherstellen, dass dieser Text in Ordnung ist, also wählen wir unseren gesamten Text aus, und halten Sie ihn in Check here. Perfekt. In Ordnung. Der letzte Teil von Abschnitt 1 ist, wir wollen deutlich zeigen, ob es eine Party-Starter bereit ist, richtig zu gehen, und wer ist dieser Party-Starter. Lassen Sie uns einige Führer hier unter dem Foto zeichnen. Lass es uns 70 Pixel hoch machen. Gehen wir 75, und wir wollen nicht rosa, tut mir leid, wir wollen weiß. Ziehen wir hier einen weiteren Führer nach unten. Da ist also der nächste Abschnitt. Das erste, was ich hier hinzufügen möchte, ist ein kreisförmiger Avatar. Wo ich einen Kreis nehmen werde, machen wir es etwa 35 Pixel. Lass uns unsere Farbe machen, damit wir das sehen können. Wir werden es hier rüber zu diesem Führer kommen, und jetzt werden wir Anthonys Foto auf diesen Kreis setzen. Machen Sie es sehr kleiner. Das ist großartig. [unhörbar] oben auf dem Kreis. Jetzt werde ich die Maskiertechnik machen. Ich halte „Befehl“ gedrückt, klicke auf den „Kreis“ und gehe dann zu Anthony und klicke hier auf diesen „Maskierungs-Button“. Perfekt. Jetzt können wir den Kreis löschen. Jetzt möchte ich noch mal etwas von der H2 schnappen. Lasst uns H2 schnappen, es rüber ziehen, und wir werden sagen: „Anthony steht da drin.“ Als Nächstes möchten wir Ihnen zeigen, dass Anthony in Ihrer Nähe ist und dass wir wissen, wo Sie sind. Weil wir uns auf das Gerät stützen können, das Sie gerade betrachten oder den Computer, den Sie verwenden. Nun, Standortdienste, wo Sie gerade sind. Wir wollen, dass du weißt, dass es in deiner Nähe eine Party gibt, speziell. Um das zu tun, werde ich eine kleine Karte Pin machen, die ich bekommen habe, und ich habe eine in Illustrator hier geöffnet, ich werde nur kopieren und es in Photoshop einfügen. Es ist weiß, also können wir es nicht sehen. Also werde ich es zu rosa ändern. Das ist ein bisschen groß, es konkurriert mit Anthonys Foto. Wir wollen nicht, dass es wichtiger aussieht als Anthony, also machen wir es klein. Perfekt. Dann zoomen Sie hinein, weil ich hier einen kleinen Effekt machen werde, werde ich Ihnen beibringen, wie man einen reflektierenden Effekt macht. Ich habe es übereinander kopiert, die eine unten, die neue Form, die ich gerade erstellt habe, ich werde es hier reflektieren. Tut mir leid, es ist umkippt. Wir werden es vertikal umdrehen. Dann werde ich die Deckkraft nehmen, und ich werde sie auf 20 fallen lassen. Ich werde eine Ebenenmaske darauf machen. Lassen Sie die Ebenenmaske auswählen, gehen Sie hier rüber und greifen Sie unsere Standard-Zutat, und zeichnen Sie einfach eine Linie hier. Überall ist in Ordnung, aber dort empfehle ich es. Da gehen wir, es ist schön und subtil. Ich werde das in einen Ordner mit dem Titel „Pin“ legen. Gerechte. Anthony steht also vorbei und lasst uns einen weiteren Text hier drüben kopieren, weil wir wollen, dass hier der Name deines Standorts steht. Hatton, New York. Schön. Also lassen Sie uns das nur ein bisschen besser stützen, nicht in den Abstand. Abschnitt 1 ist abgeschlossen, also nehmen wir alles, was wir gerade aus Abschnitt 1 gemacht haben, und legen Sie es in den Ordner Abschnitt 1. Gehen wir jetzt zu Abschnitt 2. Hier ist unsere Anleitung, wo Abschnitt 1 endet, also lasst uns einen neuen Hintergrund beginnen. Ich werde es nur augapfel und sagen, diese Größe sieht vorerst gut aus, und ich werde es blaugrün machen. Jetzt wird dieser Abschnitt nur für ein bisschen mehr Informationen darüber, was Party-Starter ist und was sie tun. Ich merke jetzt, dass ich gerade hier ein bisschen von meinem Bild übrig habe, weil ich es rüber gefahren bin. Ich werde sicherstellen, dass ich mein Bild loswerde. Lassen Sie uns wieder in Abschnitt 1 springen, ich werde auswählen, zeigen Sie meine Guides erneut. Siehst du es? Es ist genau hier. Nur ein bisschen. Ich werde ein Rechteck nehmen, dann gehen Sie in meine Ebenenmaske hier, Ich werde in ihre perfekte zurücksetzen malen. Lassen Sie uns diesen Abschnitt reduzieren, gehen Sie zurück zu Abschnitt 2. Wir haben einen blaugrün Hintergrund, und jetzt möchte ich einen Abschnitt hier hinzufügen. Meine Party ist schrecklich, und dann wird hier drüben ein weiterer Abschnitt sein, ein bisschen mehr über Party-Starter sagt. Für den ersten Abschnitt, zeigen Sie unsere Führungen, wir werden eine Form zeichnen, nur ein Rechteck, ein weißes Rechteck, und haben ein wenig wie ein Schlagschatten. Zeichnen wir ein Rechteck, und ich werde Augapfel die Höhe, weil ich weiß, dass dies die Breite ist, die ich will, weil ich es in den Führungen behalte. Aber für die Höhe sehe ich es einfach nur an. Da ist also unser weißes Rechteck, lassen Sie uns den Führer verstecken, werfen Sie einen Blick. Lassen Sie uns ein wenig einen subtilen Schlagschatten hinzufügen. Eins, Größe von zwei, lass uns eine Null setzen und dann auf 30 stoßen. Perfekt. Wir wollen ein bisschen größeren Text, also werde ich diese Überschrift nehmen, diese größere Überschrift, und ich werde in die Ecke gehen und ich werde es 40 Pixel von oben nach unten werfen, eins, zwei, drei, vier. 40 Pixel von dieser Seite, eins, zwei, drei, vier. Dann werde ich hier einen Führer machen, weil ich etwas Körpertext hier setzen werde, ich möchte sicherstellen, dass ich es an der richtigen Stelle habe. Hier ist der Haupttext, dieser Lorem Ipsum Füllstoff Text. Gehen, um es zu diesen Führungen zu ziehen. Perfekt. Ich werde die Guides verstecken, und ich werde das ändern „Hilf meinen Party-Schlägen“. Ich mag, wie das aussieht. Das ist, berechtigen Sie das, Kasten 1. Legen Sie diese in diesen Ordner, und dann werden wir die Führungen zeigen, kopieren Sie sie, indem Sie die „Option“ und „Shift“ gedrückt halten, ziehen Sie es über. Jetzt merke ich, dass meine Körperkopie nicht da ist, also werde ich von vorne anfangen. Stellen Sie sicher, dass sich meine Textkopie im Ordner Box 1 befindet. Ich halte „Option“, „Shift“ gedrückt, während ich ziehe. Bewegen Sie es akribisch genau dort. Perfekt. Verstecken Sie die Guides und ändern Sie die Spitze in „Was ist ein Party-Starter?“ Hier sind unsere beiden Abschnitte. Ich habe keine Zeit damit verschwendet, eine Kopie zu erstellen, weil dies kein richtiges Startup ist, aber in einem Fall, dass dies ein echtes Startup war, würde ich stundenlang damit verbringen, die perfekte Kopie dafür zu kultivieren. Moment werden wir einige Füller-Text verwenden. Dieser Abschnitt sieht grafisch etwas langweilig aus, also möchte ich nur ein Symbol zur Mitte hinzufügen, um in der Mitte etwas visuelles Gewicht hinzuzufügen. Was ich tun werde, ist, dass ich einen Kreis machen werde, sagen wir, 55 Pixel, ich werde sicherstellen, dass es hier in der Mitte ist, und ich werde es blaugrün machen. Probieren Sie das. Also haben wir diesen blaugrün Kreis oben auf unseren beiden Boxen. Nun, was ich tun werde, ist, dass ich den Ballon aus dem Logo in den Kreis hinzufügen werde. Also gehe ich zur Kopfzeile in das Logo, nimm den Ballon und kopiere ihn. Ich habe zwei Ballon, ich werde den neuen Ballon in den Körperbereich bewegen, Abschnitt 2. Reduzieren Sie die Header-Ordner, also lassen Sie uns jetzt unsere neue Sprechblase nach unten bringen. Bringen Sie es hier in die Mitte. Das Rosa auf dem Blaugrün sieht ein wenig zu viel aus, also werde ich dieses dunkelgrau machen. Ehrfürchtig. Als nächstes ist es, das ein wenig zu verkleinern, lass uns 410 machen. Lass uns noch ein bisschen mehr machen. Abschnitt 2 ist abgeschlossen. Lassen Sie uns alles in Abschnitt 2 einfügen und gehen Sie zu Abschnitt 3. Abschnitt 3 ist die komplizierteste, weil wir zeigen wollen, wer die Partystarter sind. Dieser Abschnitt wird mit dem Titel „ Meet the Party Starters“ betitelt. Wir werden als Karussell ein paar Party-Starter zeigen , die in Ihrer Nähe sind. Wir wollen nicht unbedingt alle Party-Starter zeigen, denn wenn Sie in Chicago sind, wollen Sie nicht wirklich Partystarter in Austin sehen. Wir werden diesen Abschnitt Titel, Treffen Sie die Party Starters, was ich tun werde, indem Sie unsere Rubrik 1, tippen, Treffen Sie die Party Starters. Ich werde meine Guides zeigen und dies zu diesem Leitfaden genau hier bewegen. Ich werde sicherstellen, dass es 70 ist; 1, 2, 3, 4, 5, 6, 7 Pixel vom oberen Rand des Abschnitts. Ich werde diesen Leitfaden loswerden, den ich zuvor erstellt habe. Perfekt. Jetzt wollen wir zeigen, dass diese in Ihrer Nähe sind. Wir nehmen diesen Stift in Manhattan, New York, und wir werden ihn dazu bringen. Das war in Abschnitt 1, Pin Manhattan, New York. Ich werde das kopieren und es in Abschnitt 3 hier runterbringen, zusammengebrochen Abschnitt 1. Perfekt. Wir haben das wieder, und ich möchte, dass es diesmal sagt, in der Nähe von Manhattan, New York. Alle Jungs, die zeigen werden, und Mädchen, werden in Ihrer Nähe sein. In diesem Fall bist du in Manhattan, weil ich dort bin. Perfekt. Der nächste Schritt ist es, unseren Party-Startern zu zeigen. Wir möchten ihr Foto zeigen, ihren Namen und wo sie sich befinden und wie viele Partys sie begonnen haben. Hier drüben habe ich Anthony vorgefertigt. Er ist bereit zu gehen. Er ist perfekt für das Gitter bemessen. Ich werde ihn nur schnappen, und ich werde ihn hier in dieses Dokument ziehen, und dann werde ich ihn richtig nett ausrichten. Pixel perfekt, genau hier. Dann, um der Zeit willen, werde ich das hier nehmen, und ich werde es kopieren. Wenn ich das wirklich tun würde, würde ich es tatsächlich so machen. Ich würde Anthony zuerst vier Mal kopieren, um perfekt im Raster zu sein, dann würde ich die Ordner umbenennen und alle Informationen für vier getrennte Personen ändern. Ich wiederhole eigentlich keinen der Inhalte für Mocks weil ich mag, dass es so nah wie möglich an der realen Sache aussieht. Normalerweise verwende ich Lorem ipsum nicht gerne oder wiederhole Bilder. Aber aus Zeitinteresse müssen wir es so machen, weil ich euch nicht langweilen will. Also haben wir unsere vier Party-Starter perfekt im Startfeld aufgestellt und sehen gut aus. Alles ist großartig. Jetzt müssen wir einige Pfeile auf jeder Seite für das Karussell hinzufügen. Ich hatte hier einen Pfeil in meiner Illustrator-Datei. Ich werde es kopieren, als Formebene einfügen, und ich werde es dunkelgrau machen, weil es jetzt weiß ist. Wir können es nicht sehen. Da ist es. Es ist ziemlich groß. Ich werde es etwas kleiner machen , weil wir hier aus dem Netz gehen. Wir gehen aus der Startaufstellung, Leute. Wir wollen nicht, dass es zu weit außerhalb des Netzes geht. Das ist perfekt. Ehrfürchtig. Ich werde es kopieren und umdrehen, um die andere Seite, und bewegen Sie es über. Perfekt. Gehen wir zurück und werfen einen Blick. Schön. Also haben wir Anthony hier, er hat 41 Partys angefangen. In der Quelldatei, die ich euch geben werde, wird das vier verschiedene Leute haben, also mach dir keine Sorgen darüber. Das nächste, was wir tun müssen, ist zu zeigen, wie es aussieht, wenn Sie über eines davon rollen. Ich denke, es wäre wirklich toll, wenn du wissen würdest, wann jemand jetzt verfügbar ist, weil nur Party-Starter sind, die in deiner Nähe verfügbar sind. Sie sind jetzt nicht unbedingt verfügbar. Vielleicht sind sie schon auf einer Party und nur einer von ihnen ist jetzt verfügbar. Also wollen wir zeigen, dass Anthony jetzt verfügbar ist und wenn du dich umwälzst, kannst du klicken und ihn deine Party starten lassen. Für Anthonys Rollover nehmen wir sein Bild hier. Wir werden doppelklicken, den Layer-Stil aufrufen, und wir werden eine Farbüberlagerung machen. Wir wählen hier unsere Lieblings-rosa Farbe aus und stoßen diese auf 75 Prozent Deckkraft. Sehr nett. Ich werde diesen Text kopieren, weil ich den gleichen Textstil verwenden möchte. Ich werde es einfügen und eingeben, Speichern Sie meine Partei. Bringen Sie es oben, und dann werde ich direkt hinter ihm einen Hintergrund hinzufügen. Das ist zu abgerundet. Lasst uns fünf Pixel Radius gehen. Perfekt. Ich will, dass das rosa ist, und dann werde ich meinen Text nicht grau machen. Lass es uns weiß machen. Treten Sie zurück und werfen Sie einen Blick. Ich mag es. Was meinst du? Ich kann dich nicht hören. Hoffentlich antwortest du mir. In Ordnung. Wir wollen auch unseren Entwicklern zeigen, dass dies in der Tat ein Rollover ist, denn wenn Sie diese PSD verpackt bekommen, um jemanden tatsächlich Code zu senden, werden sie ein wenig verwirrt sein, wenn Sie nicht angeben, dass es ein Rollover ist, weil sie frage mich, warum es so ist. Um das zu tun, lege ich gerne eine Cursor-Hand oben. Hier ist es, nur um zu zeigen, dass dies in der Tat ein Rollover ist. Das Letzte, was ich hier tun möchte, ist, etwas hinter dem Container hinzuzufügen, das nur sagt: „Hey, Anthony ist jetzt verfügbar.“ Wir nehmen 41 Party-Starter und wir werden es kopieren, einfügen es hier, und ändern dies in „Jetzt verfügbar“. Ein wenig näher hier, und dann dahinter werde ich nur ein Rechteck hinter dem Behälter machen, der heiß rosa ist, und dann ändern wir den Text in weiß. Wie ich bereits erwähnt habe, wollen wir, dass es hinter dem Container liegt, also werde ich diese hinter sich ziehen. Perfekt. Lasst uns sie ein wenig näher stoßen. Schön. Dieser Abschnitt ist fast vollständig. Erinnern Sie sich, wie ich Ihnen im ersten Tutorial gesagt habe, dass es manchmal schön aussieht, wenn Sie diese kleinen schattigen Behälter haben , wenn Sie einen sehr hellgrauen Hintergrund hinter sich legen? Ich denke, wir werden das hier tun. Ich denke, das wird wirklich nett sein. Ich werde hinter all diesen Schichten gehen und ich werde ein hellgrau dahinter hinzufügen. Ich denke, das wird wirklich gut aussehen. Hier ist unser hellgrau. Ja, ich bin drauf. Abschnitt 3 ist Donezo. In Ordnung. Leute, wir sind im letzten Abschnitt, der Fußzeile ist. Normalerweise, wenn das kein einziger Pager wäre, hätten wir wahrscheinlich eine Menge Sachen, die wir hier niederlegen müssen. Sie könnten Twitter setzen, Facebook-Links, Sie könnten die Allgemeinen Geschäftsbedingungen setzen, können Sie Links zu dem Blog, anderen Abschnitten der Website zu tun , aber jetzt haben wir nur ein Urheberrecht. Das ist alles, was wir hier niederlegen müssen. Ich werde von hier oben etwas von der Körperkopie kopieren. Lassen Sie uns das alles minimieren. Setzen Sie in die Fußzeile, und ich werde nur tippen, Option, G, die ein Copyright Symbol macht, 2013 Party Starters. Zeigen Sie unsere Führer und stellen Sie dies in die Mitte. Herrlich. Ich denke, lassen Sie uns diese Fußzeile Hot Pink machen, nur um es ein bisschen interessanter erscheinen zu lassen, weil es gerade ein wenig fade aussieht. Hot Pink, und das bedeutet, dass wir den Text in Weiß ändern müssen. Lassen Sie uns das etwas kleiner machen, weil das Urheberrecht nicht sehr wichtig ist. Nun, es ist wichtig, aber du weißt, was ich meine. Es ist nicht so wichtig, wie die Party selbst beginnt. In Ordnung. Da haben wir es. Ihr habt es durchgemacht und wir sind fertig. Das war großartig. Bitte sag mir Bescheid, wenn ihr irgendwelche Fragen habt, ich bin für euch da. Mein Name ist Meg Lewis. Meine E-Mail ist meg@ghostlyferns.com. Sei in Kontakt. Danke, Leute.