Share
Erstens, Requisiten an Dan Wiersema (mein Freund und Creative Director bei Guifx), weil er die Köpfe hinter diesem Tutorial ist. Konzept und Drahtmodell wurden von ihm entwickelt. Er hat mir auch dabei geholfen, die Falten in Bezug auf die Bewertung meiner Arbeit von Anfang bis Ende auszubügeln.
In diesem Lernprogramm erstellen wir ein Hauptmenü für ein fiktives iPhone-Spiel. Wir werden Photoshop einrichten, um die Zielbildschirmgröße genau anzuzeigen, einen Drahtrahmen für das Projekt einrichten, einen Hintergrund erstellen, ein Logo erstellen, Rock-Textur für die Seitenleiste und Holzstruktur für die gespeicherte Spielebox und Schaltflächen erstellen . Wir werden auch das Erstellen von Grün für Details und ein gutes Maß hinzufügen. Dies wird eine lange Zeit sein, also ist Geduld eine Tugend. Auch Kaffee hilft!
Schauen Sie sich das Bild an, das wir erstellen werden.
Gehen Sie zu pxcalc.com und befolgen Sie die Anweisungen. Auf diese Weise können Sie das Design in seiner endgültigen Größe - der tatsächlichen Größe des tatsächlichen iPhone-Bildschirms - auf Ihrem eigenen Computer anzeigen.
Erstellen Sie ein neues Dokument mit einer Breite von 480 x 320 x x und einer Auflösung von 164,83 Pixel / Zoll. Stellen Sie den Farbmodus auf RGB 8bit ein.
Ich empfehle, ein Wireframe für Ihr Projekt zu erstellen, wie das in der Abbildung unten. Am besten klicken Sie mit der rechten Maustaste, während Sie das Zoom-Werkzeug ausgewählt haben, und wählen Sie die Druckgröße. Wenn Sie Schritt 1 befolgt haben, sehen Sie jetzt Ihr Dokument in der genauen Größe, die der Endbenutzer auf seinem iPhone hat. So können Sie bestimmen, wie groß die Tasten sein sollten, um auf einem Touchscreen-Gerät ausreichend arbeiten zu können. Hinweis: Klicken Sie mit der rechten Maustaste auf den Bildschirm, und berücksichtigen Sie dabei nicht die dicken Finger.
Verwenden Sie das Rechteckwerkzeug und ziehen Sie grobe Platzierungshilfslinien für die verschiedenen Elemente heraus. Halten Sie die Farbe der Formen weiß und fügen Sie einen schwarzen 1px-Innenstrich hinzu. Es ist auch eine gute Idee, das Konzept mit Bleistift und Papier nachzuahmen. Selbst wenn Sie kein guter Freihandkünstler sind (ich bin es nicht, aber ich mache es immer noch), helfen Ihnen Serviettenskizzen, den Preis im Auge zu behalten!
Erstellen Sie eine neue Ebene und nennen Sie sie "Hintergrund". Stellen Sie Ihre Vordergrundfarbe auf # 5e1114 und Ihren Hintergrund auf # 140306 ein. Wählen Sie das Verlaufswerkzeug aus und ziehen Sie die Einstellungen wie unten gezeigt von oben nach unten.
Wenden Sie auf die Ebene "Hintergrund" die folgenden Ebenenstile an.
Setzen Sie Ihre Vorder- und Hintergrundfarben auf Schwarz und Zurück, indem Sie auf der Tastatur die Taste D drücken. Erstellen Sie eine neue Ebene und nennen Sie sie "bg_clouds". Gehen Sie jetzt zu Filter> Render> Clouds. Setzen Sie den Mischmodus dieser Ebene auf Überlagern. Mit dem Radiergummi-Werkzeug in zufälligen Bereichen tupfen und mit einem weichen Pinsel auf 30-50% Deckkraft einstellen, um interessante Highlights zu erzeugen. Versuchen Sie, mein Ergebnis unten zu finden.
Laden Sie dieses Bild von sxc.hu herunter (Danke, Javier González). Nennen Sie die Ebene "Burg", ändern Sie ihre Größe und platzieren Sie sie ungefähr oben in der Mitte der Bühne. Stellen Sie den Mischmodus der Ebene auf Multiplizieren und die Deckkraft auf 60% ein. Verwenden Sie das Radiergummi-Werkzeug, um scharfe Kanten zu löschen. Unten ist mein Ergebnis nach diesem Schritt.
Okay, soweit so gut. Beginnen wir mit der Erstellung unseres Logos. Schnappen Sie sich Ihr Stiftwerkzeug und erstellen Sie den Umriss eines Drachenkopfes. Dazu können Sie entweder ein zufälliges Drachenbild nachzeichnen oder ein eigenes Bild erstellen. Dies führt jedoch zu einigen Hochleistungs-Ebenenstil-Effekten. Versuchen Sie daher, die Form relativ einfach zu halten.
Es gibt eine Vielzahl von freien Formen und Dingbats, die Sie stattdessen verwenden könnten, wenn Sie keine Zeit damit verbringen wollen, einen Drachenkopf aufzuspüren. Wo ein Wille ist, ist auch ein Weg.
Duplizieren Sie Ihre Form zweimal (Ebene> Ebene duplizieren…), so dass Sie 3 Drachenköpfe haben. Nennen Sie den unteren "dragon_1", den mittleren "dragon_2" und den oberen "dragon_3".
Zeit, unseren Drachen zum Strahlen zu bringen. Diese Technik basiert stark auf Elliots AKA TrueLovePrevails 'Tutorial, wie der Warcraft-Logo-Stil repliziert werden kann. Daher wird ein großer Dank an ihn gerichtet, weil er diese fantastische Technik entwickelt und mich verwenden lässt. Klicken Sie hier, um das ursprüngliche Tutorial zu besuchen.)
Wenden Sie auf jede Ebene die folgenden Ebenenstile an, beginnend mit der Ebene "dragon_1"
Wenden Sie nun die folgenden Ebenenstile auf "dragon_2" an und setzen Sie die Deckkraft der Ebene auf 0%..
Und wieder auf "dragon_3" und die Deckkraft der Ebene auf 0% setzen.
Richtig, Drache sieht gut aus - check! Als nächstes ist der Text.
Gehen Sie zu Fontcraft.com und laden Sie Scurlock herunter. Scurlock ist als Demo-Schrift kostenlos. Lesen Sie daher die Nutzungsbedingungen und erwerben Sie eine Lizenz, wenn Sie diese Schrift für kommerzielle Zwecke verwenden möchten.
Wählen Sie Ihr Type Tool aus und stellen Sie die Größe auf 60pt ein. Geben Sie den Text "Drache" ein. Klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie In Form umwandeln. Der Grund dafür ist, dass wir die Unterstreichung des "o" entfernen wollen. Dazu verwenden wir das Direktauswahl-Tool. Aktivieren Sie die Vektormaske, indem Sie auf das Miniaturbild klicken und alle Knoten der Unterstreichung auswählen. Klicken Sie anschließend auf der Tastatur auf Löschen. Wenn Sie nicht alle auf einmal erhalten können, halten Sie die Umschalttaste gedrückt, um die Auswahl zu erweitern.
Als nächstes greifen Sie das Pfadauswahl-Tool und klicken Sie auf das "o". Gehe zu Bearbeiten> Freie Transformation und ziehe den unteren mittleren Knoten nach unten, sodass das "o" so aussieht, als ob es zum restlichen Text gehört. Jetzt duplizieren Sie die Ebene zweimal, genau wie wir es mit dem Drachenkopf gemacht haben. Benennen Sie die Ebenen von unten nach oben mit "dragontext_1", "dragontext_2" und dragontext_3 ".
Lassen Sie uns die "Burg" -Schicht zunächst ausblenden, da dies für das Layout von geringer Bedeutung ist und vor allem beim Entwerfen etwas Ablenkung verursacht.
Klicken Sie mit der rechten Maustaste auf die Ebene "dragon_1" und wählen Sie "Ebenenstil kopieren". Klicken Sie nun mit der rechten Maustaste auf die Ebene "Dragontext_1" und wählen Sie "Ebenenstil einfügen". Klicken Sie mit der rechten Maustaste auf die Ebene "dragon_2" und wählen Sie "Ebenenstil kopieren". Klicken Sie jetzt mit der rechten Maustaste auf die Ebene "dragontext_2" und wählen Sie "Ebenenstil einfügen". Ändern Sie die Deckkraft des Schattenmodus unter Abschrägung und prägen Sie auf 43% ein..
Wählen Sie "dragontext_3" und setzen Sie die Deckkraft der Füllung auf 0%. Wenden Sie dann die im Bild unten gezeigten Stile an. Wenn Sie damit fertig sind, wiederholen Sie die Schritte 9 und 10 für den Text "Storm" (benennen der Ebenen stormtext_ #), und platzieren Sie den Text ungefähr wie unten gezeigt.
Klicken Sie mit der Befehlstaste auf die Vektormaskenminiatur der Ebene "dragontext_2", um die Auswahl zu laden. Sie sehen die marschierenden Ameisen um Ihren Text. Vergewissern Sie sich, dass "dragontext_2" Ihre aktive Ebene ist. Dadurch wird sichergestellt, dass die Einstellungsebene, die wir erstellen, direkt über "dragontext_2" platziert wird.
Klicken Sie nun auf die Schaltfläche "Neue Füll- oder Anpassungsebene erstellen" unter Ihrer Ebenenpalette. Wählen Sie in der Liste die Option Farbbalance aus und übernehmen Sie die folgenden Einstellungen. Klicken Sie anschließend auf Befehl + D, um die Auswahl aufzuheben. Machen Sie dasselbe für die Ebene "swordtext_2".
Details sprechen für sich selbst, also lassen Sie uns etwas mehr Text für zusätzlichen Effekt hinzufügen. Geben Sie "Scroll of the Wicked" erneut mit der Scurlock-Schriftart in einer Größe von 18,5 pt ein. Legen Sie für den Text "Blättern" und "Wicked" die Textgröße auf 14,5 pt fest. Verwenden Sie für "des" Texts # C9C9C9 als Textfarbe und wenden Sie die folgenden Ebenenstile an.
Hoffentlich bist du noch bei mir. Gehen wir weiter zur Seitenleiste.
Erstellen Sie mit Ihrem Stiftwerkzeug eine blockartige Form wie in der Abbildung unten. Sei hier kreativ. Es gibt kein Richtig oder Falsch, wenn man so etwas herstellt. Werfen Sie also einfach eine Form zusammen, ohne auf Details zu achten. Duplizieren Sie diese Ebene und nennen Sie die oberste "sidebar_base". Nennen Sie den unteren "sidebar_perspective". Wenden Sie nun die folgenden Ebenenstile auf die Ebene "sidebar_base" an.
Schieben Sie die "sidebar_perspective" -Schicht 6px nach links, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Ebene rastern".
Richten Sie das Brennwerkzeug mit den nachstehenden Einstellungen ein und zeichnen Sie den perspektivischen Rand - unter Berücksichtigung der Lichtquelle anhand der Konzeptskizze - an der Stelle, an der das Licht am wenigsten auf die Lichtquelle fällt. Mit dem Ausweichwerkzeug malen Sie die gegenüberliegenden Bereiche. Wenn Sie dies für Steinstrukturen tun, finde ich, dass es besser ist, als zu streicheln, statt zu tupfen, da dies die Illusion einer rauen Oberfläche erzeugt. Geben Sie der Ebene schließlich einen Schlagschatten.
Laden Sie dieses Pinselset von Lee Richardson herunter. Erstellen Sie eine neue Ebene über "sidebar_base" und nennen Sie sie "sidebar_texture_1". Klicken Sie bei gedrückter Befehlstaste auf die Ebene "sidebar_base", um die Formauswahl zu laden. Drücken Sie die Umschalttaste, um sie zur Auswahl hinzuzufügen, und klicken Sie auf die Ebene "sidebar_perspective". Als nächstes packe dein Pinselwerkzeug und wähle den zweiten Pinsel des gerade heruntergeladenen Sets. Wenn Ihre Vordergrundfarbe auf Schwarz eingestellt ist, klicken Sie einmal in die Auswahl und drücken Sie die Tastenkombination Befehlstaste + D. Setzen Sie die Deckkraft dieser Ebene auf 50%..
Setzen Sie Ihre Vordergrundfarbe auf # 160A02 und erstellen Sie eine weitere Ebene. Nennen Sie diesen Namen - Sie haben es erraten - "sidebar_texture_2". Wiederholen Sie den Vorgang ab Schritt 15, diesmal mit der vierten Bürste des Sets. Es ist kleiner, so dass Sie zwei Klicks benötigen, um die gesamte Oberfläche abzudecken. Gehen Sie nach Auswahl dieser Ebene auf Filter> Weichzeichnen> Gaußsche Weichzeichnung. Legen Sie einen Radius von 1,5 fest und klicken Sie auf OK. Sie sollten etwas wie das Bild unten haben.
Lassen Sie uns einige Unvollkommenheiten auf der Gesteinsoberfläche hinzufügen. Erstellen Sie eine neue Ebene und nennen Sie sie "Risse". Wählen Sie das Pinselwerkzeug aus und variieren Sie zwischen einem Hauptradius von 2px bis 5px, einer Härte von 60% bis 80%, und behalten Sie die Pinseldeckkraft bei 55%. Sorge dich nicht darum, es zu bekommen Recht. Der Ebenenstil erledigt die meiste Arbeit, und die komischste Form kann sich als großartig herausstellen. Wenn Sie mit den Rissen zufrieden sind, wenden Sie den folgenden Ebenenstil an und werden noch glücklicher.
Erstellen Sie eine weitere Ebene, diese über der "Cracks" -Schicht, und nennen Sie sie "edge_bumps". Wählen Sie das Stiftwerkzeug mit einem Hauptdurchmesser von 1 Pixel und zeichnen Sie einige Unvollkommenheiten in schwarzer Farbe entlang der hervorgehobenen Linie darunter. Legen Sie die Deckkraft der Ebene auf 76% fest und wenden Sie den folgenden Ebenenstil auf die Ebene an.
Erstellen Sie eine neue Ebene über der Ebene "edge_bumps". Klicken Sie mit der rechten Maustaste auf die Ebene "sidebar_perspective". Schnappen Sie sich einen der Standard-Pinsel von Photoshop und tupfen Sie den Rand hier und da ab, während Sie die Pinseldeckkraft bei 55% halten. Kopieren Sie den Ebenenstil aus der Ebene "edge_bumps" und fügen Sie ihn in diese Ebene ein. Legen Sie die Deckkraft der Ebenen auf 55% fest..
Lasst uns weitergehen, um das Holz zu schaffen. Machen Sie eine Form wie die unten für unser großes Spielbrett aus Holz. Setzen Sie die Farbe der Form auf # 463118. Nennen Sie die Ebene "saved_games_base" und wenden Sie die folgenden Stile darauf an.
Versuchen Sie mit Ihrem Stiftwerkzeug, die unten abgebildete Form zu reproduzieren, und platzieren Sie sie unterhalb der Ebene "saved_games_base". Die wichtigen Kanten sind rot hervorgehoben. Nennen Sie es "saved_games_perspective" und setzen Sie die Farbe dieser Form auf # 14100D. Wenden Sie auch einen Schlagschatten wie gezeigt an.
Laden Sie die erste Textur von dieser von cgtextures.com festgelegten Textur herunter. Legen Sie es auf Ihre Bühne und ändern Sie die Größe / Drehung, bis es Ihnen gefällt. Platziere es über und über der Ebene "saved_games_base" und benenne es in "wood_texture_1". Klicken Sie bei gedrückter Befehlstaste auf "Saved_games_base" und dann auf Befehl + Shift-Taste "Saved_games_perspective", um die Auswahl zu erweitern. Wählen Sie "wood_texture_1" und klicken Sie auf die Schaltfläche Ebenenmaske hinzufügen, die sich unter der Ebenenpalette befindet. Setzen Sie diesen Mischmodus für Ebenen auf weiches Licht.
Duplizieren Sie diese Ebene einmal, nennen Sie sie "wood_texture_2", und setzen Sie den Mischmodus auf Überlagerung und Deckkraft auf 15%..
Wiederholen Sie die Schritte 20-22 für die Tasten. Versuchen Sie, den Farbverlauf ein wenig zu variieren, und verwenden Sie statt radiale Spiegelungen. Um den Überblick über Ihre Ebenen zu behalten, können Sie die Schaltflächenebenen einer Gruppe hinzufügen. Versuchen Sie, die unten gezeigten Ergebnisse zu erreichen.
Lassen Sie uns die Dinge ein wenig aufhellen. Wählen Sie die oberste Ebene des Dokuments aus, und klicken Sie auf die Schaltfläche "Neue Füllung oder Anpassung erstellen", genau wie in Schritt 11 für den Text. Wählen Sie diesmal die Ebenen aus der Liste aus und ziehen Sie den mittleren Knoten auf 1.39 (etwas links).
Klicken Sie bei gedrückter Befehlstaste auf die Ebene "stormtext_1". Drücken Sie nun die Befehlstaste und klicken Sie auf die Ebenen "dragontext_1" und "dragon_1". Wählen Sie die Ebenenebenen-Miniaturansicht aus, gehen Sie zu Bearbeiten> Füllen und füllen Sie die Auswahl mit Schwarz. Jetzt werden Text und Drachenkopf nicht von der Ebenenebene beeinflusst.
Als Nächstes werden wir eine Helligkeits- / Kontrasteinstellungsebene hinzufügen, mit der gleichen Methode, die wir für die Ebenen verwendet haben, einschließlich des "Dragon Storm". NUR TEXT Diese Zeit wird von dieser Ebene nicht beeinflusst, indem sie ausgeblendet wird. Stellen Sie die Helligkeit auf 25 und den Kontrast auf 35 ein.
Erstellen Sie mit Ihrem Rechteckwerkzeug über der Ebene "wood_texture_2" eine quadratische Form wie in den Bildern unten. Nennen Sie diese Ebene "inset_rim". Duplizieren Sie diese Ebene jetzt und nennen Sie die oberste Ebene "inset_base".
Wenden Sie die folgenden Stile an, beginnen Sie mit "inset_rim" und verwenden Sie eine Deckkraft von 0%..
Verwenden Sie für "inset_base" dieselben Einstellungen und eine Fülldeckkraft von 60%..
Duplizieren Sie "inset_rim" und "inset_base" zweimal und platzieren Sie sie wie unten in den Bildern unten.
Laden Sie "Livingstone" von PrimaFont von dafont.com herunter. Geben Sie den gesamten unten angezeigten Text ein und verwenden Sie als Textfarbe #ECDECB. Die Größe ist nicht zu wichtig, versuchen Sie einfach, ungefähr das anzupassen, was unten gezeigt wird. Wenden Sie dann den folgenden Stil auf alle diese Textebenen an.
Setzen Sie Ihre Vordergrundfarbe auf # 636363 und erstellen Sie eine neue Ebene unter den Schaltflächen. Mit einem Pinselwerkzeug, das auf 85% Härte mit einem Hauptdurchmesser von 1px eingestellt ist, malen Sie a O Form wie im Bild unten. Siehe die Auswahl der Ameisenmeisen. Duplizieren Sie es und platzieren Sie die Kopien wie gezeigt.
Führen Sie den obigen Schritt für alle Bereiche im Bild unten aus, die Ketten enthalten, und wenden Sie den folgenden Stil auf alle Ebenen an. Es wird viele Ebenen geben. Verwenden Sie Gruppen, um den Überblick zu behalten.
Lassen Sie uns die "Burg" -Schicht wieder sichtbar machen. Da wir uns in die Detaillierungsphase dieses Projekts begeben, ist es schön, einen klaren Überblick über das Endergebnis zu erhalten.
Erstellen Sie nun wieder mit Ihrem Stiftwerkzeug, wobei Schwarz auf Ihre Vordergrundfarbe gesetzt ist, eine Form wie in der gespeicherten Spielbox darunter. Machen Sie es hauptsächlich quadratisch, aber schneiden Sie die Ecken, um eine interessantere Form zu erhalten. Nennen Sie diese Ebene "Tablette". Wenden Sie die folgenden Ebenenstile an:
Geben Sie erneut die Schriftart Livingstone ein, und geben Sie den Text ein, den Sie im gespeicherten Stone-Tablett unten sehen, und wenden Sie die folgenden Ebenenstile an. Wenn Sie fertig sind, duplizieren Sie das gesamte Tablett und platzieren Sie es in das zweite Feld (siehe Abbildung unten).
Setzen Sie Ihre Vordergrundfarbe auf # 2E343A und erstellen Sie mit dem Stiftwerkzeug eine kleine Rautenform (etwa 10 x 10 Pixel). Dies wird die Basis unserer Nieten sein. Benennen Sie den Layer "rivet_inset" und duplizieren Sie ihn zweimal. Nennen Sie die mittlere Nietschicht "rivet_base" und die oberste "rivet_style". Fügen Sie die folgenden Stile hinzu, beginnend mit "rivet_inset".
Wenden Sie nun die folgenden Ebenenstile auf die Ebene "rivet_base" an.
Wenden Sie nun die folgenden Ebenenstile auf die Ebene "rivet_style" an.
Duplizieren Sie nun den gesamten Niet dreimal und platzieren Sie ihn wie in der Abbildung unten in jeder Ecke der gespeicherten Spielbox.
Erstellen Sie 4 kleine Kreise (etwa 4 x 4 x 4 Pixel) an der Basis der gespeicherten Spielebox. Verwenden Sie dazu das Ellipsen-Werkzeug und # CCB55A als Vordergrundfarbe. Dies sind die Seitenanzeigen, die häufig in iPhone-Anwendungen zu finden sind. Wenden Sie diese Stile auf die ersten drei an.
Ändern Sie die Farbe des vierten Kreises in # FFA200, indem Sie auf das Miniaturbild der Formfarbe doppelklicken. Wenden Sie dann den folgenden Stil an.
Zeit, in den letzten und wahrscheinlich schwierigsten Schritt einzutauchen. Dies könnte in der Tat ein ganz anderes Tutorial sein, aber ich versuche, es grundlegend zu halten. Ich werde versuchen, dies anhand von Bildern so gut wie möglich zu erklären, aber es wird für jeden, der sich mit dieser Technik auskennt, eine Erfahrung sein.
Optional können Sie dem Blatt auch eine unscharfe Maske hinzufügen, wenn Sie schärfere Details wünschen. Die Einstellungen würden sich nach dem Betrag von Betrag 50%, Radius 0,5px und Schwelle von 0 bewegen.
Fügen Sie hier und da Grün hinzu, damit es interessanter aussieht. Sie könnten sogar noch weiter gehen als ich und auch einige der gespeicherten Spiele hinzufügen. Vielen Dank, dass Sie diesem Tutorial gefolgt sind und ich hoffe, Sie haben einige neue Techniken gelernt. Unten ist das fertige Ergebnis.
Accentsconagua