PS Webdesign-Tutorial XXIII – Erstellen Sie eine Website, auf der iPhone 5-Anwendungen verkauft werden

Als Programmierer ist mein künstlerisches Fundament schwach. Wir können auf einige ausgereifte Web-PS-Tutorials zurückgreifen, um unsere Designfähigkeiten zu verbessern. Um einen Satz zu paraphrasieren: „Wenn Sie dreihundert Tang-Gedichte auswendig lesen, können Sie sie aufsagen, auch wenn Sie nicht wissen, wie man sie verfasst.“

Die Tutorials in dieser Reihe stammen aus Online-PS-Tutorials, alle aus dem Ausland und alle auf Englisch. Ich versuche, diese hervorragenden Tutorials zu übersetzen. Aufgrund der begrenzten Übersetzungsmöglichkeiten müssen die Details der Übersetzung noch ausgearbeitet werden. Ich hoffe, dass die Internetnutzer Ihnen einige Ratschläge geben werden.

Versprechen:

1 Die in diesem Artikel verwendete Software ist die Photoshop CS5-Version

2. Die Screenshots des Original-Tutorials sind wieder auf Englisch die Reproduktion. Chinesische Version des Bildes

3. Einige Operationen im Originaltext geben keine Parameter an. Ich habe einige Parameter durch wiederholte Tests gemessen, die in roter Schrift angezeigt werden. Bei einigen falschen Parametern werden die richtigen Parameter direkt in rotem Text angezeigt

Zum Beispiel: (90, 22, 231, 77) , was darauf hinweist, dass die Koordinaten der oberen linken Ecke des Rechteck sind (90, 22), Breite 231, Höhe 77

Zum Beispiel: (90, 22) , was angibt, dass die Koordinaten der oberen linken Ecke des Rechtecks ​​(90, 22) und die anderen beiden Parameter des Rechtecks ​​wurden im Tutorial angegeben

4 Meine eigenen Erfahrungen werden am Ende des Tutorials angehängt. Bei einigen handelt es sich um Optimierungen einiger Schritte im Tutorial usw.

Öffnen Sie zunächst ein neues Dokument und füllen Sie den Hintergrund mit der folgenden Farbe: #2b2b2b

Erstellen Sie zunächst ein neues Dokument, Größe: 1100px*720px und den Hintergrund mit Farbe füllen: #2b2b2b

Der nächste Schritt besteht darin, den Hintergrund mit einem Muster zu füllen . Sie können das Muster über Ebenenstile hinzufügen. Bitte beachten Sie, dass dieses Muster im folgenden Paket mit 815 Photoshop-Pixelmustern zu finden ist. Der nächste Schritt besteht darin, den Hintergrund mit einem Muster zu füllen. Sie können Musterüberlagerungsstile hinzufügen. Bitte beachten Sie, dass dieses Muster in 815 Photoshop-Pixelmustern zu finden ist.

Wenn Sie keine UDT-Mitgliedschaft haben, können Sie dieses Muster alleine erstellen: 2 x 2 Pixel mit transparentem Hintergrund. Fügen Sie einen kleinen 1-Pixel-Punkt hinzu . Wählen Sie dann „Bearbeiten“ > „Muster definieren“ und klicken Sie auf „OK“. Wenn Sie kein UDT-Konto haben, können Sie das Muster erstellen selbst. Neues Dokument: 2px*2px, mit transparentem Hintergrund. Verwenden Sie das

Bleistiftwerkzeug

, um einen 1-Pixel-Punkt hinzuzufügen. Klicken Sie dann auf:

Bearbeiten > Muster definieren

. Geben Sie ihm einen Namen und klicken Sie auf OK. Dann können Sie dieses Muster in Ihrem Ebenenstile-Bedienfeld verwenden

Mit dem abgerundeten Rechteck-Werkzeug erstellen Sie bitte eine Form wie in der Klicken Sie auf das folgende Bild, um es besser zu sehen. , 226), Farbe: #000000. Klicken Sie auf das Bild unten, um es deutlicher zu sehen

Auf der linken Seite werde ich mit demselben Werkzeug eine weitere kleine Form erstellen.Verwenden Sie dasselbe Werkzeug, um links ein weiteres kleines abgerundetes Rechteck hinzuzufügen

(32, 184, 70, 81)

Dann füge ich die folgende Ebene hinzu

Dann legen Sie den Ebenenstil wie unten gezeigt fest

Farbe des Verlaufseditors: #010101, #b8b8b8, #4c4c4c

Mit demselben Werkzeug werde ich eine neue Form erstellen und dann das Perspektivwerkzeug verwenden, um das Aussehen zu ändern Sie können das Perspektivwerkzeug unter „Bearbeiten“ > „Transformieren“ > „Perspektive“ finden. Sie finden das Perspektiven-Tool, indem Sie auf „Bearbeiten > Perspektive“ klicken.

Fügen Sie dieser Ebene einen Verlaufsüberlagerungsstil hinzu

Farben des Verlaufseditors: #000000, #343434

Duplizieren Sie die erste Form und gehen Sie bitte zu Filter > Stellen Sie sicher, dass Sie den Mischmodus für diese Ebene auf „Überlagerung“ ändern (Sie finden den Überlagerungs-Mischmodus oben in Ihrer Ebenenpalette – wahrscheinlich wird „Normal“ angezeigt. Wenn Sie das Dropdown-Menü verwenden, finden Sie die Überlagerung)

Kopieren Sie das vorherige abgerundete Rechteck,

konvertieren Sie es in ein Smart Object

und klicken Sie dann auf:

Filter> Ändern Sie die Mischoptionen dieser Ebene auf „Überlagern“. (Die Mischoptionen finden Sie oben in Ihrem Ebenenbedienfeld. Normalerweise wird „Normal“ angezeigt. Sie können „Überlagerung“ sehen, wenn Sie auf das Dropdown-Menü klicken.)

Mit dem Linienwerkzeug erstelle ich zwei dünne Linien

Dann werde ich beide Zeilen duplizieren und zu Filter > gehen. Sie können mit den Einstellungen herumspielen, bis Sie das gleiche Ergebnis wie ich erhalten Filter, aber auf diese Weise erfahren Sie nicht, was dieses Tool macht.

Dann kopieren Sie diese Zeilen und klicken Sie auf:Filter> Sie können auf die folgenden Einstellungen zurückgreifen, bis Sie einen ähnlichen Effekt wie meinen erzielen. Ich werde Ihnen einige geeignete Parameter für den Unschärfefilter geben, aber Sie müssen diesen Schritt nicht strikt befolgen

Es hat viel Mühe gekostet, diesen Schritt auszuführen, aber ich habe festgestellt, dass er unmöglich ist Allein dadurch, dass man seinen Schritten folgt, stellt sich dieser Effekt ein. Also habe ich es selbst korrigiert und hinzugefügt.

Kopieren Sie diese beiden geraden Linien nicht, verwenden Sie das Geraden-Werkzeug, stellen Sie die Breite auf 3 Pixel ein und zeichnen Sie zwei weitere rote gerade Linien auf den ursprünglichen geraden Linien

Fügen Sie die Schichten der beiden dicken geraden Linien auf der Rückseite zusammen und rastern Sie sie. Und klicken Sie auf: Filter > Gaußscher Weichzeichner . Und platzieren Sie die neue Ebene unter den ursprünglichen zwei dünnen geraden Linien

Füge diese drei Ebenen zu einer Gruppe zusammen und wähle die Gruppe aus, klicke auf: Klicken Sie auf „Ebene“ > „Alle anzeigen“ >, um eine Ebenenmaske hinzuzufügen. Wählen Sie das Verlaufswerkzeug aus, legen Sie den Verlauf wie unten gezeigt fest und fügen Sie der Gruppe einen Verlauf hinzu

Auf der linken Seite werde ich eine eingerückte Schaltfläche erstellen und dann einige Ebenenstile hinzufügen. Ich habe eine Schaltfläche mit abgerundetem Rechteck

(45, 212, 22, 25)

,

Farbe: #d7d7d7 verwendet und einige Ebenenstile hinzugefügt

Verwenden Sie das

Polygon-Werkzeug

, um ein kleines Dreieck in der Mitte der Schaltfläche hinzuzufügen, die Farbe ist schwarz, der gleiche Stil wie das abgerundete Rechteck

Bitte beachten Sie, dass Sie hier auch fast 18.000 Photoshop-Ebenenstile herunterladen können diesen Ebenenstil.

Nachdem Sie den Ebenenstil gesehen haben. Bitte beachten Sie, dass Sie hier 18.000 Photoshop-Ebenenstile herunterladen können. Sie finden diese Ebenenstile in

Hier ist mein bisheriges Ergebnis >

Mit dem Stiftwerkzeug werde ich eine einfache weiße Form erstellen neues weißes Rechteck, verwenden Sie die Perspektive, um es in die folgende Form zu ändern)

Ich verwende den Unschärfefilter und ziehe dann die Ebene unter den vorherigen.

Um einen Unschärfefilter darauf anzuwenden, ziehen Sie die Ebene unter die vorherigen,

und passen Sie sie auf die entsprechende Größe an

Ich werde alle Ebenen für den Diashow-Navigator duplizieren und sie auf der rechten Seite platzieren.

Ich werde alle Ebenen für den Diashow-Navigator duplizieren und sie auf der rechten Seite platzieren . Füge diese Ebenen zu einer Gruppe zusammen und wandele sie in intelligente Objekte um, dupliziere dann die Ebenen, drehe sie horizontal und verschiebe sie an die richtige Position auf der rechten Seite

In der Mitte werde ich eine einfache Form erstellen. Klicken Sie auf das Bild, um das Bild in voller Größe zu sehen.

In der Mitte werde ich eine einfache Form erstellen 🎜> (142, 165 , 816, 136), Farbe: #2a2a2a

. Klicken Sie auf das Bild, um es in voller Größe anzuzeigen

Mit dem Stiftwerkzeug werde ich eine Form wie diese erstellen.

Mit dem Stiftwerkzeug werde ich erstellen eine Form wie diese.

Erstellen Sie die folgende Form

Wenn Sie nicht gut mit dem Stiftwerkzeug umgehen können, können Sie die folgende Methode verwenden

Verwenden Sie das

Rechteck-Werkzeug, um ein neues Rechteck (142, 135, 816, 30) zu erstellen.

Drücken Sie Strg+ T Um die Transformation frei vorzunehmen, klicken Sie mit der rechten Maustaste, um die Perspektive auszuwählen, und ziehen Sie die obere linke Ecke mit der Maus. Klicken Sie 40 Pixel nach links (Sie können gleichzeitig das Informationsfeld öffnen, um sicherzustellen, dass Sie 40 Pixel ziehen)

Für diese Ebene werde ich die folgenden Ebenenstile hinzufügen.

Die folgenden Ebenenstile zu dieser Ebene hinzufügen

Farben des Verlaufseditors: #707070 und #262626

Mit dem abgerundeten Rechteck-Werkzeug erstelle ich eine Form wie die folgende. Verwenden Sie das

Abgerundete Rechteck-Werkzeug, um ein abgerundetes Rechteck

zu erstellen, wie unten gezeigt (102, 41, 896, 126), legen Sie den Radius fest auf 10 Pixel und Farbe: #707070

Klicken Sie mit der rechten Maustaste auf die Ebene in Ihrer Ebenenpalette, wählen Sie „Form rastern“ und löschen Sie sie Klicken Sie mit der rechten Maustaste auf die Ebene im Bedienfeld, wählen Sie „Ebene rastern“ und löschen Sie den unteren Teil der Form (Sie können das rechteckige Auswahlwerkzeug verwenden, um eine rechteckige Auswahl auszuwählen, die Auswahl umzuwandeln, und passen Sie den Y-Wert der Auswahl auf 135 an)

Duplizieren Sie diese Form und gehen Sie zu Filter > Rauschen hinzufügen. In diesem Fenster wird so viel Lärm angezeigt, wie Sie möchten, aber stellen Sie sicher, dass es nicht zu viel ist.

Duplizieren Sie diese Ebene und klicken Sie auf: Filter > Rauschen hinzufügen . Stellen Sie im Fenster die Parameter ein, mit denen Sie das Geräusch einstellen möchten, aber stellen Sie nicht zu viele ein

Mit dem Linienwerkzeug können Sie eine einfache horizontale Linie mit 1 Pixel hinzufügen. Ich verwende die folgende Farbe: #8d8d8d

Mit dem Werkzeug für gerade Linien können Sie eine horizontale Linie mit 1 Pixel hinzufügen(102, 134, 896) 1）, die Farben, die ich verwendet habe: #8d8d8d

Am Ende dieser Diashow werde ich eine weitere Form hinzufügen. Es wurde erstellt mit dem Stiftwerkzeug.

Fügen Sie unten im Bildschieberegler eine weitere Form hinzu. Ich habe das Stiftwerkzeug

verwendet, um das umgekehrte Trapez oben direkt zu kopieren, es vertikal zu spiegeln, an die entsprechende Position zu verschieben und die Umkehrung in der Verlaufsüberlagerung zu deaktivieren

Dann werde ich eine neue Form erstellen mit Rechteck-Werkzeug.

Dann verwende ich das Rechteck-Werkzeug, um ein neues Rechteck (102, 331, 896, 6) mit der Farbe #707070 zu erstellen . Und fügen Sie mit dem Geraden-Werkzeug erneut eine horizontale Linie hinzu (102, 331, 896, 1), Farbe: #8d8d8d

Oben werde ich ein einfaches Textlogo hinzufügen.

Ich werde oben ein einfaches Textlogo erstellen Der Originaltext stellt die Schriftart nicht vor, daher habe ich eins gefunden ähnliche Schriftart und Farbe: #383838

Damit der Text inline aussieht, fügen Sie zwei Ebenenstile hinzu

Auf der rechten Seite der Kopfzeile füge ich ein einfaches Menü hinzu .

Rechts neben dem Kopfbereich sollte ein gemeinsames Menü hinzugefügt werden. Die -Schriftart ist wie unten gezeigt und der Stil ist derselbe wie das Logo oben

Unter jedem Textmenü füge ich unten einige einfache Linien hinzu . Die Farbe der

geraden Linien ist immer noch: #383838

Dann erstelle ich mit dem Ellipse-Werkzeug einen kleinen Kreis Oberhalb jeder Zeile.

Verwenden Sie dann das Ellipsen-Werkzeug

, um über jeder Zeile einen kleinen Kreis hinzuzufügen. Der Ebenenstil stimmt mit dem Menütext überein

Außerdem werde ich unter dem Logo eine schöne runde Form hinzufügen. Diese wurde mit dem abgerundeten Rechteck-Werkzeug erstellt, und ich habe den eingerückten Ebenenstil verwendet, den ich mehrmals auf diesem iPhone verwendet habe entsprechendes Layout.

Und fügen Sie mit dem

Werkzeug für abgerundete Rechtecke

ein schönes abgerundetes Rechteck unter dem LOGO hinzu, und ich habe den integrierten Ebenenstil verwendet, den ich hier schon oft verwendet habe iPhone-Verkaufswebsite.

Und füge eine vertikale gerade Linie hinzu

Mit ein paar Linien werde ich versuchen, alle vertikalen Linien zu kombinieren.

Mit einigen geraden Linien werde ich versuchen, alle vertikalen geraden Linien zu verbinden.

Dieser Schritt ist auch extrem einfach, deshalb werde ich ihn hier hinzufügen

Öffnen Sie das Informationsfeld (drücken Sie F8, um das Informationsfeld aufzurufen), verwenden Sie

Zeichnen Sie mit dem Linienwerkzeug eine geneigte gerade Linie, Farbe: #383838, ΔX=24, ΔY=18, und verschieben Sie die Linie an die entsprechende Position. Fügen Sie den Menütext mit demselben Ebenenstil zur Linie hinzu

Duplizieren Sie die schräge Linie und spiegeln Sie sie horizontal. Kopieren Sie sie mehrmals und verschieben Sie sie in die gerade Linie unter jedem Menütext

Verwenden Sie das

Linienwerkzeug

, um eine Horizontale zu zeichnen Linie Gerade Linien, verbinden Sie diese geraden Linien, Farbe: #383838, und fügen Sie den gleichen Ebenenstil wie die schrägen geraden Linien hinzu

Jetzt Ich werde einige von JackieTran erstellte iPhone-Symbole hinzufügen

Jetzt werde ich einige von JackieTrans iPhone-Symbolen hinzufügen

Unter jedem Das Symbol „Ich habe einen einfachen Schatten platziert“ ist sehr einfach. Wählen Sie „Abgerundetes Rechteck“ aus, erstellen Sie eine dunkle Form und fügen Sie dann einen Unschärfefilter hinzu.

Fügen Sie unter jedem Symbol einige einfache Schatten hinzu. Das Erstellen dieser Schatten ist sehr einfach. Wählen Sie das Abgerundetes Rechteck-Werkzeug aus, um eine dunkle Form zu erstellen, und fügen Sie dann den Unschärfefilter hinzu

Hinweis: bis Nachher Bei diesem Schritt stellte ich fest, dass die ursprünglich erstellten linken und rechten Tasten zu abrupt waren. Also habe ich es geändert, die Deckkraft der roten Linie auf 45 % geändert und den weißen Lichthof verkleinert, wie unten gezeigt:

Hier kann ich die Vorteile intelligenter Objekte erkennen. Ändern Sie die linke Seite und ändern Sie gleichzeitig die rechte Seite

dunkle Form.

Ich habe das

Abgerundetes Rechteck-Werkzeug um erneut ein dunkles abgerundetes Rechteck zu erstellen

(80, 358, 940, 30), stellen Sie den Radius auf 6 Pixel und die Farbe ein: #010101

Ich werde das Stiftwerkzeug verwenden, um eine Form mit einem schönen perspektivischen Aussehen zu erstellen. >StiftwerkzeugErstellen Sie ein wunderschönes umgekehrtes Trapez

Wenn Sie nicht gut darin sind Wenn Sie das Stiftwerkzeug verwenden, können Sie die folgenden Schritte ausführen, um es abzuschließen

Verwenden Sie das Rechteckwerkzeug, um ein neues Rechteck zu erstellen (142, 363, 816, 15)

Drücken Sie Strg+T, um frei zu transformieren, klicken Sie mit der rechten Maustaste, um die Perspektive auszuwählen, und ziehen Sie die untere linke Ecke, um die Breite auf 896 zu ändern

Unten finden Sie die Ebenenstile, die ich verwendet habe.

Die Farbe wurde geändert in: #555555, als nächstes fügen Sie einige verwendete Ebenenstile hinzu

Farben aus dem Verlaufseditor: #8b8b8b, #262626

Ich werde eine andere Form wie im folgenden Bild erstellen. Klicken Sie auf das Bild, um das Ergebnis besser zu sehen.

Erstellen Sie ein weiteres abgerundetes Rechteck

(91, 383,. 918, 290) wie unten gezeigt. Klicken Sie auf das Bild, um es klarer zu sehen

Hier ist der Ebenenstil, den ich für die letzte Form verwendet habe.

Das ist Ich habe der Form einen Ebenenstil hinzugefügt

Farben des Verlaufseditors: #242424, #b8b8b8, #4c4c4c

Ich werde diese Ebene duplizieren und noch einmal etwas Rauschen hinzufügen

Ich werde diese Ebene duplizieren, in Smart Object konvertieren und etwas Rauschen hinzufügen

Dann erstelle ich mit dem Stiftwerkzeug die folgende Form. Bitte verwenden Sie den gleichen Ebenenstil wie oben. Verwenden Sie den gleichen Ebenenstil wie oben

Für diejenigen, die nicht gut mit dem Stiftwerkzeug umgehen können, können Sie sich an die folgenden Schritte halten

Verwenden Sie „Abgerundet“. Rechteck-Werkzeug, um eine neue abgerundete Ecke zu erstellen.

Klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie „Ebene rastern“. Verwenden Sie das Rechteck-Auswahlrechteck-Werkzeug, um die untere Hälfte des abgerundeten Rechtecks ​​auszuwählen, drücken Sie die Entf-Taste, um es zu löschen, und drücken Sie dann Strg+D, um die Auswahl von

um es hinzuzufügen. Verwenden Sie denselben Ebenenstil wie beim vorherigen abgerundeten Rechteck, deaktivieren Sie die Umkehrung im Verlaufsstil und ändern Sie die Farbe auf der rechten Seite des Verlaufseditors in: #828282

Duplizieren Sie diese Form und wählen Sie beide Ebenen in Ihrer Ebenenpalette aus. Drücken Sie STRG+E, um die Ebene mit dem Radiergummi-Werkzeug zusammenzuführen Löschen Sie den unteren Teil der Form. Stellen Sie sicher, dass Sie einen glatten Rundpinsel ausgewählt haben.

Duplizieren Sie die Form und wählen Sie die Ebenen im Ebenenbedienfeld aus. Sobald Sie diese Ebenen ausgewählt haben, drücken Sie STRG+E, um sie zu einer Ebene zusammenzuführen. Verwenden Sie das Radiergummi-Werkzeug, um den unteren Rand der Form zu löschen. Stellen Sie sicher, dass Sie einen glatten Rundpinsel wählen

Nachdem ich meinen vorherigen Prozess verwendet habe, kann dieser Schritt übersprungen werden

Mit dem abgerundeten Rechteck-Werkzeug werde ich erstellen eine neue Form. Ich werde die gleichen eingerückten Ebenenstile verwenden (405, 884, 250)

. Ich werde die gleichen Inline-Ebenenstile verwenden

Hier haben Sie die Ebenenstile noch einmal.

Setzen Sie die Füllung auf 0 % und fügen Sie den folgenden Ebenenstil hinzu, wie Sie ihn schon mehrfach verwendet haben:

Farbüberlagerung: 3e3c3d

Um diesen Schatten zu erstellen, empfehle ich Ihnen, eine neue Ebene zu erstellen und ihn darunter zu platzieren Zeichnen Sie die große Form und zeichnen Sie dann mit dem Pinsel-Werkzeug ganz sanft, bis Sie mit dem Ergebnis zufrieden sind.

Ich werde einen einfachen Schatten erstellen. Um einen Schatten zu erzeugen, können Sie eine neue Ebene erstellen, diese unter der größeren Form platzieren und dann mit dem Pinsel-Werkzeug einen glatten Schatten malen, bis Sie damit zufrieden sind.

Ich werde etwas dunkle Form und etwas Text hinzufügen.

Ich werde etwas dunkle Form und etwas Text hinzufügen

Die Farbe des abgerundeten Rechtecks ​​in der ersten Zeile: #191919, die Farbe des Textes in der ersten Zeile: #b0b0b0

Das abgerundete Rechteck in Farbe der zweiten Zeile: #222222, die Farbe des Textes in der zweiten Zeile: #b7b7b7

Die Farbe des abgerundeten Rechtecks ​​in der dritten Zeile: #292929, die Farbe des Text in der dritten Zeile: #bcbcbc

Fügen Sie jedem Rechteck den gleichen Ebenenstil wie dem Menütext hinzu

Dann werde ich einige Symbole hinzufügen.

Dann einige Symbole hinzufügen, die Farbüberlagerung #b0b0b0 zur ersten Reihe der Symbole hinzufügen, die Farbüberlagerung #b7b7b7 zur zweiten Reihe der Symbole hinzufügen, und fügen Sie die Farbüberlagerung #b7b7b7 zur dritten Reihe der Symbole hinzu. Farbüberlagerung für #bcbcbc

Unten sehen Sie die auf dem platzierten Symbole Auf der rechten Seite können Sie gleichzeitig einige Linien zwischen den einzelnen Kategorien sehen. 🎜>

Unten können Sie das Endergebnis sehen.

Unten können Sie sehen das Endergebnis. Ich hoffe, Ihnen gefällt dieses Layout

Nachtrag:

Herzlichen Glückwunsch an diesen Designer für seinen cleveren Einsatz von Farben, um einen 3D-Effekt zu erzielen . Der Designer nutzte die Farben und PS-Kenntnisse nach Belieben. Der Übersetzer musste sich einige Schritte ohne die Quelldateien sorgfältig überlegen, sodass einige Schritte noch durchgeführt werden konnten .

Weitere PS-Webdesign-Tutorials XXIII – Erstellen einer Website für den Verkauf von iPhone 5-Anwendungen finden Sie auf der chinesischen PHP-Website für verwandte Artikel!