Heim  >  Artikel  >  Web-Frontend  >  PS Webdesign-Tutorial XX – Erstellen Sie in Photoshop ein farbenfrohes Website-Layout für einen Süßwarenladen

PS Webdesign-Tutorial XX – Erstellen Sie in Photoshop ein farbenfrohes Website-Layout für einen Süßwarenladen

高洛峰
高洛峰Original
2017-02-13 09:38:572799Durchsuche

Als Programmierer ist mein künstlerisches Fundament schwach. Wir können auf einige ausgereifte PS-Tutorials auf Webseiten zurückgreifen, um unsere Designfähigkeiten zu verbessern. Um einen Satz zu paraphrasieren: „Wenn Sie mit dreihundert Tang-Gedichten vertraut sind, können Sie sie rezitieren, 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 Mehrheit der Internetnutzer mir einige Ratschläge geben wird.

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.

1. Öffnen Sie Photoshop und erstellen Sie ein neues Dokument mit den Abmessungen 1200×1000.

1. Öffnen Sie Photoshop und erstellen Sie ein neues Dokument mit den Abmessungen 1200px* 1000px.

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

2. Der erste Bereich, mit dem wir beginnen, ist unser Hintergrund. Füllen Sie Ihre Hintergrundebene mit #FD6E8A .

Zuerst beginnen wir mit der Erstellung des Hintergrunds. Füllen Sie die Hintergrundebene mit dem Farbeimer-Werkzeug (G) mit der Farbe: #FD6E8A.

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

3. Wir möchten ein Tupfenmuster erstellen, das wir zu unserem Hintergrund hinzufügen können Abmessungen von 45×53.

3. Wir werden ein Tupfenmuster erstellen, das unserem Hintergrund hinzugefügt werden kann. Dazu müssen wir ein neues Dokument mit den Abmessungen 45px*53px erstellen.

4. Erstellen Sie eine neue transparente Ebene und löschen Sie Ihre Hintergrundebene wie folgt: Ich habe das Ellipsen-Auswahlwerkzeug verwendet.

4. Erstellen Sie eine neue transparente Ebene und löschen Sie Ihre Hintergrundebene. Verwenden Sie als Nächstes Ihr bevorzugtes Ellipsenwerkzeug , um zwei Kreise hinzuzufügen ((0, 2, 24, 24) (20, 27, 24, 24)). Ich verwende das Elliptical Marquee Tool (M).

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

5. Gehen Sie auf „Bearbeiten>Muster definieren“ und geben Sie dann den Namen „Polka Dot“ für Ihren Musternamen ein. Anschließend können Sie ihn schließen Dokument und kehren Sie zu Ihrer Vorlage zurück, in der wir unser neu erstelltes Muster verwenden werden.

5. Klicken Sie auf:

Bearbeiten> Muster definieren und geben Sie dann den Namen des Punktmusters ein. Anschließend können Sie diese Datei schließen und zu Ihrem Layout zurückkehren, wo wir unser neu erstelltes Muster verwenden.

6. Erstellen Sie in Ihrer Ebenenpalette eine neue leere Ebene und benennen Sie sie mit Ihrem Musterstempel (S). Fahren Sie dann mit fort Bürsten Sie mit einem großen weichen Pinsel, bis Sie Ergebnisse erhalten, die etwa wie folgt aussehen:

6. Erstellen Sie im Ebenenbedienfeld eine neue leere Ebene und nennen Sie sie „Punkte“. Verwenden Sie das Musterstempel-Werkzeug (S) und suchen Sie Ihren Punktpinsel im Dropdown-Menü. Verwenden Sie einen großen weichen Pinsel, um die gesamte Seite zu malen, mit einem Ergebnis wie diesem:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Ich habe die Größe auf 800 Pixel eingestellt

7. Verringern Sie dann die Deckkraft Ihrer Punktebene auf etwa 2 %. Dadurch bleibt der Hintergrund sehr dezent %. %um. Dadurch erscheint es vor unserem Hintergrund subtil.

8. Erstellen Sie nun mit Ihrem Ellipsen-Werkzeug einen Kreis, der wie folgt aussieht:

, 585, 585) , der wie folgt aussieht:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

9. Dann möchten wir mit unserem Stiftwerkzeug (P) eine Form auf unserem Kreis erstellen, die wie folgt aussieht::

10 Sobald Sie mit Ihren Ergebnissen fertig sind, wählen Sie beide Ebenen aus, klicken Sie dann mit der rechten Maustaste und wählen Sie „Ebenen zusammenführen“, um die Deckkraft Ihrer Ebene auf etwa 19 % zu verringern. Wir möchten diese Ebene dann zweimal duplizieren, indem wir Befehl+J drücken. Erstellen Sie Ihre zweite Kopie mit einer Deckkraft von 24 % und erstellen Sie dann eine dritte mit einer Deckkraft von 42 %.

10 Wählen Sie in den obigen Schritten beide Ebenen aus, klicken Sie dann mit der rechten Maustaste und wählen Sie PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局 Ebenen zusammenführen

, um sie zu einer Ebene zusammenzufügen. Verringern Sie die Deckkraft Ihrer Ebene auf etwa 19 %. Dann drücken wir Strg+J, duplizieren diese Ebene zweimal und verschieben Ihre Form wie unten gezeigt. Ihre zweite Kopie hat eine Deckkraft von 24 % und die dritte eine Deckkraft von 42 %.

Die Positionen der drei Formen (basierend auf der unteren linken Ecke) sind (39.578), (153.554), (59.484)

11. Der letzte Schliff, den wir unserem Hintergrund hinzufügen, ist das Hinzufügen eines Starburst-Effekts. Wir werden einen der Pinsel aus diesem Pinselpaket verwenden und ihn im Vordergrund platzieren Folgendermaßen habe ich die Deckkraft auf etwa 22 % gesenkt. 11. Als letzten Schritt werden wir unseren Hintergrund erhöhen und einen strahlenden Effekt hinzufügen. Wir werden diesen Pinsel verwenden. Vordergrundfarbe: #FD6E8A, platzieren Sie sie wie unten gezeigt, verringern Sie die Deckkraft auf etwa 22 %.

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局 Hinweis: Für diesen Schritt müssen Sie einen externen Pinsel verwenden. Aber wir können diese Grafik auf jeden Fall erstellen. Im Folgenden wird der Prozess zur Erstellung dieser Grafik beschrieben.

Erstellen Sie ein neues PS-Dokument mit der Größe 600 x 600 Pixel und dem Hintergrund ist transparent. Ziehen Sie einen schwarzen bis transparenten Farbverlauf von oben nach unten

Klicken Sie auf: Filter > Stellen Sie die Parameter wie unten gezeigt ein:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Klicken Sie auf: Filter Twist > ; Scheren

. Stellen Sie die Parameter wie unten gezeigt ein

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Klicken Sie auf: Filter>Verzerrung>Polarkoordinaten und stellen Sie die Parameter wie unten gezeigt ein

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Rechtsklick auf die Ebene und wählen Sie Ebene kopieren, kopieren Sie sie in unser Hauptdokument

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Verschieben Sie die Ebene an die entsprechende Position, setzen Sie die Füllung auf 0 % und stellen Sie sie wie unten gezeigt ein Ebenenstil der Verlaufsüberlagerung, Deckkraft auf 50 % einstellen, Größe auf 225 % des Originals ändern >

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局 12 Für das Logo habe ich ein „Zuckerstangenherz“ vorbereitet, indem ich eine Zuckerstange modifiziert habe Platzieren Sie Ihren Logotext mit der Schriftart Androgyne auf zwei separaten Textebenen.

12 Für das Logo habe ich ein vom Zuckerstangensymbol abgewandeltes Zuckerstangenherz vorbereitet. Bei der Schriftart Androgyne werden zwei separate Textebenen für den Logotext verwendet. PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

13. Fügen Sie auf Ihrer Ebene „Rachel“ die folgenden Mischoptionen ein:

13 Legen Sie auf der Bildebene die folgenden Mischoptionen fest:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Farben des Verlaufseditors: #AE1B3F und #F9255A

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

14. Verwenden Sie auf Ihrer Ebene „Candyland“ denselben Schlagschatten, den Sie auf der Textebene „Rachel“ verwendet haben. Sie erhalten etwas, das so aussieht:PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

14. Die Textebene von CANDYLAND verwendet dieselbe Projektion wie Rachels Textebene. Ihre Kreation wird so aussehen:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

15. Nun gehen wir zu unserer Benutzerkontoleiste, die mit Ihrem abgerundeten Rechteck-Werkzeug (U) mit einem Radius von 10 Pixeln angezeigt wird. und einem Vordergrund von #BC3D56, erstellen Sie ein Rechteck, das dem folgenden ähnelt:

15 Jetzt gehen wir zur Navigationsleiste des Benutzers, die wir nach rechts verschieben. Verwenden Sie das Werkzeug für abgerundete Rechtecke (U), stellen Sie den Radius auf 10 Pixel und die Vordergrundfarbe auf: #BC3D56 ein, zeichnen Sie ein abgerundetes Rechteck (570, 75, 437, 36) , es ähnelt dem folgenden:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

16. Wir möchten als nächstes ein Highlight um unser abgerundetes Rechteck herum hinzufügen Wir möchten also auf die Miniaturansicht unseres abgerundeten Rechtecks ​​in unserer Ebenenpalette klicken, um es zu einer aktiven Auswahl zu machen. Gehen Sie dann zu „Auswählen>Ändern>Vertrag“ und geben Sie 1 in das Dialogfeld ein. Füllen Sie Ihre Auswahl mit #FFFFFF Neue Ebene, verkleinern Sie sie dann erneut und gehen Sie zu „Bearbeiten>Löschen“. Sie erhalten eine weiße Linie, die wie folgt aussieht:

Wir werden einen Kreis mit Hervorhebungen hinzufügen unser abgerundetes Rechteck. Dazu klicken wir bei gedrückter Strg-Taste auf die Miniaturansicht des abgerundeten Rechtecks ​​in unserem Ebenenbedienfeld, um eine Auswahl zu erhalten. Klicken Sie dann auf: Wählen Sie > Verkleinern und geben Sie 1 in das Dialogfeld ein. Erstellen Sie eine neue Ebene, füllen Sie die Auswahl mit #FFFFFF, verkleinern Sie sie dann erneut um 1 und klicken Sie auf: Bearbeiten > Übrig bleibt eine weiße Linie, die so aussieht:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

17 Ändern Sie den Mischmodus auf dieser Ebene auf „Weiches Licht“ und senken Sie ihn dann ab Stellen Sie die Deckkraft auf etwa 38 % ein. Fügen Sie nun die folgenden Mischoptionen zu Ihrer Hervorhebungsebene hinzu: Fügen Sie nun die folgenden Mischoptionen zu Ihrer Hervorhebungsebene hinzu:

Farben des Verlaufseditors: #FFFFFF und #C81243PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

18. Fügen Sie etwas Text hinzu, um Links mit der Farbe #FDDCE3 zu symbolisieren, und Sie erhalten etwas, das so aussieht:

18. Fügen Sie etwas Text hinzu, um Links mit der Farbe #FDDCE3 zu symbolisieren , und Sie haben etwas, das so aussieht: , Ihre Arbeit wird so aussehen:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

19. Jetzt müssen wir eine Suche erstellen Erstellen Sie mit Ihrem Stiftwerkzeug eine Form, die wie folgt aussieht, mit dem Vordergrund #72A0E5.

19. Erstellen Sie mit dem

Stiftwerkzeug

eine Form wie unten gezeigt, Farbe: #72A0E5.

20. Verwenden Sie Befehl+J, um Ihre Form zu duplizieren, gehen Sie dann zu Bearbeiten>Transformieren>Horizontal spiegeln und richten Sie sie wie folgt aus Klicken Sie auf beide Ebenen und wählen Sie „Ebenen zusammenführen“ aus dem Dropdown-Menü:

20. Duplizieren Sie Ihre Form mit Strg + J, klicken Sie dann auf:

Bearbeiten>Transformieren>Horizontal spiegeln

, Ausrichten wie folgt . Wählen Sie beide Ebenen aus und klicken Sie mit der rechten Maustaste. Wählen Sie im Popup-Menü

Ebenen zusammenführen aus: Da ich nicht gut mit dem Stiftwerkzeug umgehen kann, habe ich die folgende Methode verwendet, um einen ähnlichen Effekt zu erzeugen

Verwenden Sie das Werkzeug für abgerundete Rechtecke, stellen Sie den Radius auf 50 Pixel ein und erstellen Sie ein neues abgerundetes Rechteck (730, 0, 224, 75), Farbe: #72A0E5

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Verwenden Sie das Direktauswahl-Werkzeug, um die beiden Punkte in der unteren linken Ecke auszuwählen (drücken Sie beim Auswählen von Punkten die Umschalttaste). ) und drücken Sie Strg+T Transformieren, wählen Sie den Punkt in der unteren linken Ecke als Kontrollpunkt aus, klicken Sie mit der rechten Maustaste und wählen Sie Horizontal spiegeln

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Do Führen Sie den gleichen Vorgang in der unteren rechten Ecke durch, so dass das Ergebnis wie folgt aussieht:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Drücken Sie Strg+T für eine freie Transformation und passen Sie die Form an die entsprechende Höhe, und klicken Sie mit der rechten Maustaste, um Perspektive auszuwählen, um die Form von

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

21. Fügen Sie nun die folgenden Mischoptionen zu Ihrem Suchfeld hinzu: Fügen Sie die folgenden Mischoptionen zu Ihrem Suchfeld hinzu:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

22. Für das Suchfeld muss nur noch ein Eingabefeld mit Ihrem abgerundeten Rechteck-Werkzeug mit einem 5-Pixel-Radius hinzugefügt werden. Anschließend habe ich ein Lupensymbol aus dem NIXUS-Symbolpaket verwendet.

22. Suchfeld, der Rest Verwenden Sie einfach das

Abgerundetes Rechteck-Werkzeug

mit einem Radius von 5 Pixeln und fügen Sie ein Eingabefeld

(753, 45, 178, 25) . Fügen Sie dann das Lupensymbol aus dem NIXUS-Symbolpaket hinzu. und geben Sie den Text und die Farbe des Textes ein: #acacac

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局 23 ist unsere Hauptnavigation. Erstellen Sie mit Ihrem bevorzugten Rechteck-Tool ein schwarzes Rechteck, das wie folgt aussieht, für die Rückseite Ihres Navigationsmenüs. Unser erster Link „Candy“ wird #FFFFFF sein, während unsere nicht aktiven Links so sein werden #FDDCE3. Die für die Links verwendete Schriftart heißt „Chalkboard“.

23. Die letzte Schriftart in unserem Headerbereich ist die Hauptnavigation unserer Website. Erstellen Sie mit Ihrem bevorzugten Rechteckwerkzeug ein schwarzes Rechteck ähnlich dem folgenden für die Rückseite des Navigationsmenüs (120, 154, 960, 48). Die Farbe unseres ersten aktiven Links Candy: #FFFFFF und die Farbe unseres inaktiven Links: #FDDCE3. Die für Links verwendete Schriftart heißt Chalkboard

und ist eigentlich die Schriftart Chalkboard Bold, die sich deutlich von der Schriftart Chalkboard

unterscheidet.

24. Für unsere aktive Registerkarte möchten wir ein Rechteck in einer ähnlichen Form wie folgt erstellen. Die Farbe spielt für uns keine Rolle Ich werde später einen Farbverlauf hinzufügen:

Fügen Sie für unsere aktive Registerkarte ein Rechteck hinzu (128, 145, 138, 57) . Die Farbe ist nicht wichtig, wir werden in einem späteren Schritt einen Farbverlauf hinzufügen

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

25 Fügen Sie nun auf Ihrer Registerkartenebene die folgenden Mischoptionen hinzu Geben Sie ihm einen schönen Farbverlauf.

25. Fügen Sie nun die folgenden Mischoptionen zu Ihrer Tab-Ebene hinzu, um ihm einen schönen Farbverlauf zu verleihen.

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Farben des Verlaufseditors: #336FC1 und #4E8DE3

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

26. Um unserer Registerkarte ein wenig zusätzliches Detail hinzuzufügen, möchten wir mit Ihrem Polygonal-Lasso-Werkzeug (L) eine Auswahl ähnlich der folgenden treffen und wählen Sie dann „Auswählen>Umkehren“. Klicken Sie dann bei ausgewählter Registerkartenebene auf das Ebenenmaskensymbol.

Um unserer Registerkarte etwas mehr Glanz zu verleihen, möchten wir kleine Stücke ausschneiden Spitze. Zeichnen Sie mit dem Polygonal-Lasso-Werkzeug (L) eine Auswahl ähnlich der folgenden und klicken Sie dann auf: Auswählen > Umkehren . Wählen Sie dann Ihre Registerkartenebene aus und klicken Sie im Ebenenbedienfeld auf das Symbol Ebenenmaske hinzufügen.

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

27 Der letzte Schliff besteht darin, einen weißen Akzent um das zu setzen Rand, wie wir es für unseren Abschnitt „Kontoverknüpfungen“ in Schritt 16 getan haben. Anschließend stellen wir ihn auf „Weiches Licht“ ein und verringern dann die Deckkraft auf etwa 62 %. Fügen Sie weiße Glanzlichter an den Rändern hinzu. Wir stellen es dann auf „Weiches Licht“ ein und verringern es dann auf etwa 62 % Deckkraft.

Ergänzend: Kopieren Sie zuerst die Ebene, dann

Ebene rastern, In intelligente Ebene konvertieren, Ebene rastern. Dann verwenden Sie die Methode in Schritt 16

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

28 Der letzte Schritt für unseren Header besteht darin, unseren Candy Cane-Effekt unter der Navigation hinzuzufügen. Erstellen Sie mit Ihrem bevorzugten Rechteckwerkzeug erneut ein Rechteck, das wie folgt aussieht:

28. Der letzte Schritt im Kopfbereich besteht darin, unseren Zuckerstangeneffekt unter der Navigation hinzuzufügen. Verwenden Sie Ihr bevorzugtes

Rechteckwerkzeug

, um das Rechteck (120, 202, 960, 9) erneut zu erstellen, etwa so:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

29. Fügen Sie nun die folgenden Mischoptionen zu Ihrer Ebene hinzu:

29. Fügen Sie nun die folgenden Mischoptionen zu Ihrer Ebene hinzu:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Farben des Verlaufseditors: #6692d4 und #72a0e5 Rohrlinien, wir möchten ein weiteres Muster erstellen. Dazu möchten wir ein neues Dokument mit den Abmessungen 600×600 erstellen. Erstellen Sie eine neue Ebene und löschen Sie Ihre Hintergrundebene, sodass ein transparentes Dokument übrig bleibt. Fügen Sie dann auf folgende Weise eine Reihe von Rechtecken hinzu (ich habe meinen Hintergrund schwarz gemacht, damit Sie ihn besser sehen können, aber Ihrer wird transparent sein):

30. Um unsere Zuckerrohrlinie zu erreichen, möchten wir ein weiteres Muster erstellen. Wir möchten also ein neues Dokument mit den Abmessungen 600 × 600 erstellen. Erstellen Sie eine neue Ebene und löschen Sie die Hintergrundebene, sodass ein transparentes Dokument übrig bleibt. Fügen Sie dann wie folgt eine Reihe von Rechtecken hinzu (ich habe meinen Hintergrund schwarz gemacht, damit Sie ihn besser sehen können, aber Sie werden transparente verwenden): PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

31. Gehen Sie dann zu „Bearbeiten>Definieren“. „Muster“ und benennen Sie es „Streifen“. Schließen Sie dann Ihre Vorlage und klicken Sie bei gedrückter Befehlstaste auf den Hintergrund „Zuckerstangen“, um ihn zu einer aktiven Auswahl zu machen. Verwenden Sie dann das Musterstempel-Werkzeug, um Ihr neu erstelltes Muster zu pinseln auf einer Ebene darüber:

31. Klicken Sie dann auf:

Bearbeiten>, um das Muster zu definieren

und nennen Sie es Streifen. Schließen Sie Ihre Stripe-Datei und kehren Sie zu Ihrem Dokument zurück. Befehl + Klicken Sie auf Ihr Rechteck, um die Auswahl zu bilden, und aktualisieren Sie dann mit Ihrem

Musterstempel-Werkzeug

die Ebene, um den Hintergrund zu bilden:

32. Ändern Sie den Mischmodus zu Overlay und verringern Sie die Deckkraft auf 28 %, und Ihr fertiger Header sieht wie folgt aus:Ändern Sie den Mischmodus auf Overlay und die Deckkraft auf 28 %, und Ihr fertiger Header sieht wie folgt aus:

Das ursprüngliche Tutorial für diesen Schritt sagte es einfach. Nachdem es lange versucht hatte, war es nicht einfach, Erfolg zu haben, also habe ich eine andere Methode ausprobiert

Erstellen Sie ein neues Dokument, Größe: 40px*9px, stellen Sie den Hintergrund auf transparent ein. Verwenden Sie das

Rechteck-Werkzeug

, um ein Rechteck (0, 0, 20, 9) zu erstellen.

Drücken Sie Strg+T, um es frei zu erstellen Transformieren, mit der rechten Maustaste auf Abschrägung

klicken und das Rechteck wie unten gezeigt anpassen:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Klicken Sie auf: Bearbeiten> Muster

und nenne es Streifen.

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Gehen Sie zurück zum Hauptdokument, drücken Sie die Strg-Taste und klicken Sie auf das vorherige lange Rechteck, erstellen Sie eine neue Ebene, füllen Sie sie mit einer beliebigen Farbe und ändern Sie die Füllung auf 0 %. Und fügen Sie dieser Ebene den folgenden Muster-Overlay-Ebenenstil hinzu

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

33. Der Inhaltsbereich basiert hauptsächlich auf der Platzierung von Bildern und Text und hält die Dinge einfach. Wir werden einen weißen Hintergrund haben und die Farbe #28140D für unseren Fließtext, #AF3F55 für Überschriften und #5987CB für unsere Links verwenden.

33. Der Inhaltsbereich enthält hauptsächlich Bilder und Text. Wir werden einen weißen Hintergrund haben, Textkörperfarbe: #28140D, Titeltextfarbe: #AF3F55, Linkfarbe: #5987CBPS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

34. Erstellen Sie mit Ihrem abgerundeten Rechteck-Werkzeug eine Form, die wie folgt unter Ihrem Inhalt aussieht Ebenen:

34. Der letzte Schritt besteht darin, eine Fußzeile hinzuzufügen. Erstellen Sie mit dem Werkzeug für abgerundete Rechtecke mit einem Radius von 15 px ein abgerundetes Rechteck (120, 817, 960, 66) und geben Sie unterhalb Ihrer Inhaltsebene eine Form wie diese an:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

35. Fügen Sie nun die folgenden Mischoptionen zu Ihrer neu erstellten Ebene mit abgerundetem Rechteck hinzu:

35 neu erstellte Ebene „Abgerundetes Rechteck“: Fügen Sie der Rechteckebene die folgenden Mischoptionen hinzu:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Farben des Verlaufseditors: #EE3C66, #C81243

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

36 Ich habe dann den gleichen Zuckerstangeneffekt verwendet, den wir in der Navigation verwendet haben, um unserer Fußzeile Streifen hinzuzufügen. Ich habe den Mischmodus auf „Weiches Licht“ geändert und die Deckkraft auf 15 gesenkt Diesmal %.

36. Fügen Sie als Nächstes die Streifen zu unserer Fußzeile hinzu, indem Sie den gleichen Zuckerstangeneffekt verwenden, den wir in der Navigation verwendet haben. Ändern Sie den Mischmodus auf „Weiches Licht“ und verringern Sie dieses Mal die Deckkraft auf 15 %.

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

37 Jetzt müssen Sie nur noch etwas Text und etwaige Symbole in Ihre Fußzeile einfügen, und Ihr Endergebnis sieht in etwa wie folgt aus:

37. Jetzt müssen Sie nur noch etwas Text und eine Fußzeile hinzufügen und Ihr Endergebnis für alle Symbole sieht so aus:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Abschlussarbeit:

PS网页设计教程XX——在Photoshop中创建一个七彩糖果店网站布局

Nachtrag:

Dies ist ein Tutorial mit einem ganz anderen Stil. Diese Aspekte in diesem Tutorial sind einzigartig: Erstens der Windradeffekt. Im ursprünglichen Tutorial wurde ein aus dem Internet heruntergeladener Pinsel verwendet, aber ich habe ihn geändert, um ihn selbst zu erstellen. Zweitens der einzigartige Musterüberlagerungseffekt Zuckermaskierungseffekt

Weitere PS-Webdesign-Tutorials XX – Erstellen Sie ein farbenfrohes Website-Layout für einen Süßwarenladen in Photoshop. Für verwandte Artikel achten Sie bitte auf die chinesische PHP-Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn