PS Webdesign-Tutorial XVII – Entwerfen kreativer Portfolio-Webseiten in Photoshop

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 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.

Schritt 0 – Beginnen Sie mit dem Einrichten des Dokuments

Schritt 0: Einrichten des Dokuments

Öffnen Sie ein neues Dokument: Abmessungen 1200×1640 Pixel und Auflösung 72 Pixel/Zoll.

Neues Dokument: Abmessungen: 1200px*1640px, Auflösung: 72px/Zoll

Um alles ausgerichtet zu halten, können wir von hier aus das 960er-Rastersystem verwenden. Dies ist in diesem Fall nicht unbedingt erforderlich, da wir die Photoshop-Anleitungen verwenden können (Strg+ R zum Aktivieren von Regeln, Anzeigen > Neuer Leitfaden zum Hinzufügen des Leitfadens), aber wie Sie in den vorherigen Tutorials sehen können, kann es manchmal hilfreich sein.

Um Elemente auszurichten, können wir das 960-Raster-Layoutsystem verwenden hier; Dies ist hier nicht erforderlich, da wir PS-Hilfslinien verwenden können (Strg + R, um das Lineal zu aktivieren, Ansicht> Neue Hilfslinien , um Hilfslinien hinzuzufügen), aber Sie können auf das vorherige Tutorial verweisen. Manchmal ist dies möglich Hilf uns sehr gut

Schritt 1 – Hintergrund

Schritt 1: Hintergrund

Wir werden die grundlegenden Ebenen für den Hintergrund erstellen. In diesem Fall hatte ich eine genaue Vorstellung davon, wie ich die verschiedenen Blöcke trennen sollte, um das Layout zu erstellen. Nun, mein Tutorial, meine Webdesigns, beginnen immer mit einer Skizze (oder ein Drahtmodell), es ist nützlich, nur das Endziel im Auge zu behalten; aber es ist klar, dass wir während des Designprozesses wahrscheinlich neue Elemente hinzufügen werden.

Wir werden eine grundlegende Hintergrundebene erstellen . In diesem Fall unterscheide ich genau zwischen verschiedenen Blöcken auf der Anlage, warum? Nun, meine Tutorials, meine Webdesigns beginnen ständig mit Skizzen (oder Wireframes). Es hilft, sich daran zu erinnern, was der Endzweck jedes Stücks ist, aber natürlich können wir während des Designprozesses neue Elemente hinzufügen.

In diesem Fall erstellen wir also 5 Container, in denen wir den Inhalt hinzufügen. Verschiedene Bereiche, fügen Sie jedem Bereich unterschiedliche Inhalte hinzu

Fügen Sie eine erste Ebene hinzu, es wird unser Hintergrund sein, mit der Farbe #ededed (Farbe #ededed) und fügen Sie einen subtilen Rauscheffekt hinzu (Filter > Noise > Add Noise… Betrag 0,5 – 0,8; überprüfen Sie Gauß und Monochromatisch.

Fügen Sie die erste Ebene hinzu, dies wird unser Hintergrund sein, Farbe: #ededed. Rastern Sie die Ebene (Farbe: #ededed) und fügen Sie einen subtilen Rauscheffekt hinzu (

Filter > Rauschen > Rauschen hinzufügen

, Betrag: 0,5–0,8; überprüfen Sie die Gaußsche Verteilung und die Volltonfarbe)

Zeichnen Sie ein Rechteck oben auf der Seite (mit dem Rechteck-Werkzeug, Farbe #cddcec) und rastern Sie die Form erneut und fügen Sie einen subtilen Rauscheffekt hinzu (Filter > Rauschen > ; Rauschen hinzufügen … Betrag 0,5 – 0,8; eine Verlaufsüberlagerung hinzufügen (Weiches Licht, 54 %, Winkel 90 % und Skalierung 75 %). Zeichnen Sie oben auf der Seite ein Rechteck

(0, 0, 1200, 128)
(verwenden Sie das Rechteckwerkzeug, Farbe: #cddcec), rastern Sie die Ebene erneut und fügen Sie ein subtiles Rauschen hinzu (

Filter > Rauschen > Rauschen hinzufügen

, Betrag: 0,5–0,8; Fügen Sie eine Verlaufsüberlagerung hinzu (Weiches Licht, 54 %, Schwarz zu Weiß, Winkel 90, Skalierung 75 %)

Fügen Sie mit dem Rechteckwerkzeug (U) eine neue Form (Farbe #608bb6, Höhe ca. 400 Pixel) für den mittleren Container hinzu und stellen Sie den Mischmodus auf ein Color Burn and Fill auf 75 % und fügen Sie dann einen weißen Strich von 1 Pixel (aus dem Layer Style) hinzu. Verwenden Sie zum Schluss die rechteckige Form für den Abspann (die Fußzeile). Verwenden Sie dasselbe Werkzeug und die gleiche Farbe wie für den mittleren Container, stellen Sie jedoch jetzt „Mischung“ ein auf lineares Licht und Deckkraft auf 70 %.

Verwenden Sie das Rechteck-Werkzeug, um ein Rechteck (0, 753, 1200, 400) (Farbe: #608bb6, Höhe 400px) als Mitte hinzuzufügen Stellen Sie im Bereich Mischmodus auf Farbnachbrennung, Füllung auf 75 % ein und fügen Sie dann einen 1 Pixel großen weißen Strich hinzu (aus dem Bedienfeld „Ebenenstile“). Fügen Sie abschließend ein Rechteck (0, 1592, 1200, 48) hinzu, um die Untertitel (Fußzeile) unten anzuzeigen. Verwenden Sie dabei dieselben Werkzeuge und Farben wie im mittleren Bereich. Stellen Sie einfach den Mischmodus ein zu Linear Light ( sollte Linear Burn sein), Opazität beträgt 70 %

Unterhalb des Endergebnisses.

Die Nachfolgend finden Sie das Endergebnis

Wir möchten unserem Hintergrund mehr Charakter verleihen!
Fügen Sie eine neue Ebene hinzu (Strg+Umschalt+N) und verwenden Sie dazu das Auswahlwerkzeug für eine Zeile Fügen Sie oben auf der Leinwand eine 1 Pixel lange weiße Linie hinzu.

Wir möchten dem Hintergrund weitere Symbole hinzufügen

Erstellen Sie eine neue Ebene (Strg+Umschalt+N) und verwenden Sie dieEinzellinien-Auswahlwerkzeug

Fügen Sie oben auf der Leinwand eine 1 Pixel große weiße Linie hinzu

Vorschlag: Verwenden Sie besser das

Linienwerkzeug

, um eine gerade Linie zu zeichnen ( 0, 0, 1200, 1)

Öffnen Sie nun ein neues Dokument mit 12×1 Pixeln, entsperren Sie die Hintergrundebene und blenden Sie sie aus Zoomen Sie auf 3200 %, fügen Sie eine neue Ebene hinzu und fügen Sie mit dem Rechteck-Auswahlrechteck zwei 1×1-Pixel-Quadrate hinzu, füllen Sie eines mit der Farbe #fff und das andere mit #000, wie unten gezeigt > Muster definieren.Erstellen Sie nun ein neues Dokument, 12px*1px, entsperren Sie die Hintergrundebene und verstecken Sie sie im Ebenenbedienfeld. Zoomen Sie auf 3200 %, erstellen Sie eine neue Ebene und erstellen Sie mit dem Rechteck-Auswahlwerkzeug zwei 1 x 1 Pixel große Quadrate, eines mit der Füllfarbe #ffffff und das andere mit der Füllfarbe #000000. wie im Bild unten gezeigt. Klicken Sie dann auf:

Bearbeiten> Muster definieren

Vorschlag: Es ist besser, das

Bleistift-Werkzeug

Wir haben ein neues Muster, das wir verwenden werden. Gehen Sie zurück zu unserem Hauptdokument und zeichnen Sie (mit dem rechteckigen Auswahlwerkzeug) eine Auswahl, die es abdeckt Füllen Sie die gesamte Leinwand mit einer zufälligen Farbe, setzen Sie „Füllung“ auf 0 % und fügen Sie dann „Musterüberlagerung“ aus dem Ebenenstil hinzu.

Wir sind dabei, mit unserem neuen Muster zu unserem Hauptdokument zurückzukehren. Erstellen Sie eine neue Ebene mit dem Namen Muster (verwenden Sie das Rechteckiges Auswahlwerkzeug

), zeichnen Sie eine Auswahl, die die gesamte Leinwand abdeckt, füllen Sie sie mit einer beliebigen Farbe und stellen Sie die Füllung auf 0 % ein. Fügen Sie dann hinzu ein Muster-Overlay-Ebenenstil

Jetzt ist es Zeit, die Wolken zu erstellen!

Der nächste Schritt besteht darin, die Wolken zu erstellen

Sie können 5 Hilfslinien (84px – 186px – 600px – 1014px – 1118px) hinzufügen, um den Arbeitsbereich einzuschränken, und dann wie gezeigt einige Formen hinzufügen, um die Grundformen zu erstellen Ebenen aus der Ebenenpalette (Strg+Klick auf Ebenen) und dann Strg+G, um die Formen zu gruppieren.

Sie müssen 5 Hilfslinien (84px – 186px – 600px – 1014px – 1118px) hinzufügen, um jedes Werk zu unterteilen Bereich, fügen Sie mit dem Ellipsen-Werkzeug einige Formen hinzu, wie unten gezeigt, um die Grundform zu erstellen. Wählen Sie diese Ebenen im Ebenenbedienfeld aus (Strg+Klick auf diese Ebenen) und drücken Sie dann Strg+G, um diese Formen zu einer Gruppe zusammenzuführen.

Duplizieren Sie die Gruppe und konvertieren Sie die Kopie in ein Smart-Objekt – klicken Sie mit der rechten Maustaste auf die Gruppe in der Ebenenpalette, dann „In ein Smart-Objekt konvertieren“ – resterisieren Sie sie und fügen Sie einen subtilen Rauscheffekt hinzu. Jetzt müssen Sie den überschüssigen Teil der Wolken mithilfe einer Ebene verbergen Maske: Klicken Sie bei gedrückter Strg-Taste auf die Miniaturansicht der Ebene „Oberer Hintergrund“ (in der Ebenenpalette), um eine Auswahl zu erstellen, die den unteren Teil der Wolken ausschließt. Wählen Sie dann die Ebene der Wolken aus und fügen Sie eine Vektormaske hinzu.

Duplizieren Sie die Gruppe und konvertieren Sie die Kopie in ein Smart-Objekt – klicken Sie mit der rechten Maustaste auf die Gruppe im Ebenenbedienfeld und wählen Sie In Smart-Objekt konvertieren – Rastern Sie die Ebene und fügen Sie subtile Rauschfarbeffekte hinzu. Jetzt müssen Sie den Rest der Wolken mithilfe einer Ebenenmaske ausblenden: Strg + Mausklick auf die Miniaturansicht der Ebene „Oberer Hintergrund“ (in der Ebenenpalette), eine Auswahl ohne die unteren Wolken erstellen, dann die Wolkenebene auswählen und Fügen Sie eine Ebenenmaske hinzu.

Dann wenden Sie den folgenden Stil an.

Fügen Sie dann den Stil wie unten gezeigt hinzu: Verschieben Sie die Musterebene im Ebenenbedienfeld nach oben

Farbe der Farbüberlagerung: #ededed

Jetzt zeichnen wir einen schönen Schatten für die Wolken. Duplizieren Sie die Wolkenebene und positionieren Sie die Kopie direkt unter der Originalebene, stellen Sie die Füllung auf 0 % ein und wenden Sie die an Folgender Stil.

Jetzt fügen wir den Wolken einen schönen Schatten hinzu. Kopieren Sie die Wolkenebene, platzieren Sie die Kopie dann unter der aktuellen Ebene (etwas rechts), stellen Sie die Füllung auf 0 % ein und fügen Sie dann den Stil wie unten gezeigt hinzu

Hinweis: Bevor Sie hinzufügen Stil Davor müssen wir noch einige Vorgänge ausführen, nämlich die untere Hälfte der kopierten Wolke löschen.

Wählen Sie die Ebene der Wolkenkopie aus und erstellen Sie sie dann mit dem rechteckigen Auswahlwerkzeug folgende Auswahl

Drücken Sie die Entf-Taste und löschen Sie die untere Hälfte der Kopie der Wolke

Dann füllen Sie sie aus auf 0 % und fügen Sie Stile wie unten gezeigt hinzu

Verlaufsfarben-Editor: Farbe links: #4d76a4, Deckkraft rechts 80 %

Verwenden Sie an dieser Stelle die gleichen Techniken, um andere Wolken zu zeichnen.

Wählen Sie weiße Farbe für die Wolkenfarbüberlagerung

Schritt 3 – Kopfzeilendetails
Zeit Um das Logo hinzuzufügen, verwenden Sie das Stiftwerkzeug (Farbe Nr. 79a7db), um eine Werbetafel zu entwerfen (Sie haben Zweifel an der Verwendung des Stiftwerkzeugs? Lesen Sie diesen fantastischen Artikel von Sebastiano). Fügen Sie dann die beiden weißen Segmente hinzu Fügen Sie der Werbetafel den folgenden Stil hinzu.

Schritt 3: Fügen Sie das LOGO der Webseite zu den Details des Kopfbereichs hinzu

. Verwenden Sie das

Stiftwerkzeug

(Farbe: #79a7db), um eine Werbetafel zu entwerfen (Sie fragen sich, wie man das Stiftwerkzeug verwendet? Lesen Sie diesen wunderbaren Artikel von SEBASTIANO) und fügen Sie mit dem Linienwerkzeug Liniensegment, Dicke beträgt 4 Pixel, und fügen Sie dann den folgenden Ebenenstil zur Werbetafel hinzu Farbe der Projektion: #79a7db

Wenden Sie den gleichen Schlagschatten auch für die beiden weißen Linien an.

Geben Sie zwei Fügen Sie den gleichen Schatten zur weißen geraden Linie hinzu und ändern Sie den Abstand auf 2

, verwenden Sie dazu die Schriftart „Ballpark“ und fügen Sie dann einen Schlagschatten und einen weichen Verlauf hinzu Überlagerung. Die mit Farbverläufen überlagerten Farben sind: #79a7db

Nach dem Logo zeichnen wir einen schönen und einfachen Robotercharakter mit Zoom, Stiftwerkzeug, Ellipsenwerkzeug und abgerundetem Rechteckwerkzeug. Es ist nicht nötig, Schritt für Schritt zu erklären, wie Um den Roboter zu erstellen, schauen Sie sich das Bild unten an und Sie werden auf einen Blick verstehen, wie Sie unseren „Freund“ zeichnen.

Nachdem wir das Logo fertiggestellt haben, verwenden wir das Skalierungswerkzeug, das Stiftwerkzeug, und Ellipse-Werkzeug, abgerundetes Rechteck-Werkzeug zum Zeichnen eines schönen, einfachen Robotersymbols. Es ist nicht nötig, Schritt für Schritt zu erklären, wie man einen Roboter erstellt. Schauen wir uns das Bild unten an. Auf einen Blick werden Sie verstehen, wie man unseren Freund zeichnet.

Gruppieren Sie alle Formen, aus denen der Roboter besteht, und fügen Sie wie zuvor eine Ebenenmaske hinzu, um das folgende Ergebnis zu erhalten.

Gruppieren Sie diese Formen zu einer Gruppe. Formen Sie den Roboter und fügen Sie eine Ebenenmaske hinzu. Ich habe das schon einmal gemacht und das folgende Ergebnis erhalten.

Das Zeichnen dieses Roboters ist zu kompliziert. Ich habe im Internet direkt ein Android-Bild gefunden, um diesen Roboter zu ersetzen

Jetzt müssen wir den Vogel und das Abzeichen zeichnen, das wir verwenden das Stiftwerkzeug, das Pinselwerkzeug und das horizontale Textwerkzeug. Schauen Sie sich unten an, wie Sie unser Layout mit einer hübschen und, ich wiederhole, sehr einfachen Illustration verbessern können.

Jetzt zeichnen wir den Vogel und das Fell von Waffen. Wir verwenden das Stiftwerkzeug, das Pinselwerkzeug und das horizontale Textwerkzeug. Schauen Sie sich die folgenden Tipps und ein sehr einfaches Beispiel an, um zu verstehen, wie Sie unser Layout verbessern können.

Hinweis: Ich werde den Vogel nicht mehr zeichnen, sondern ihn einfach online finden

Fügen Sie das Bild des Vogels an der entsprechenden Stelle hinzu

Fügen Sie mit dem Rechteck-Werkzeug ein Rechteck auf der oberen linken Seite des Vogels hinzu, Farbe: #ebefbc

Verwenden Sie das Werkzeug „Ankerpunkt hinzufügen“ , um einen Ankerpunkt in der Mitte der linken Seite des Rechtecks ​​hinzuzufügen

Platzieren Sie den neuen. Ziehen Sie den hinzugefügten Ankerpunkt nach rechts

und fügen Sie den folgenden Ebenenstil hinzu zur Form:

Verwenden Sie das Linienwerkzeug, um eine zu zeichnen weiße gerade Linie zwischen dem Vogel und der Form

Verwenden Sie das Textwerkzeug, um Text in der hellgelben Form hinzuzufügen. Folgen Sie uns , Schriftart: Ballpark

Schritt 4 – Erster Container

Schritt 4: Erster Inhaltsbereich

Erstellen Sie zunächst das Feld, in das wir die Informationen der Teammitglieder einfügen werden. Zeichnen Sie mit dem Rechteck-Werkzeug ein 480×425 großes Weiß Fügen Sie wie gezeigt zwei graue Linien hinzu (Erstellen Sie eine Schnittmaske, um die Segmente innerhalb des weißen Felds einzuschränken) und fügen Sie außerdem einen Text hinzu (verwenden Sie Delicious Font).

Erstellen Sie zunächst einen Bereich, um Informationen zu Teammitgliedern anzuzeigen. Erstellen Sie mit dem Rechteck-Werkzeug ein weißes Rechteck (532, 192) , Größe: 480px*425px, wie unten gezeigt, fügen Sie zwei graue (#eeeeee) gerade hinzu Zeilen ((532, 200) und (532, 606)) (erstellen Sie eine Schnittmaske, sodass die gerade Linie nur innerhalb des weißen Rechtecks ​​angezeigt wird) und fügen Sie ein Textstück hinzu (Schriftart: Delicious), und folgen. Das folgende Bild fügt Stile zum weißen Rechteck und Text hinzu:

Fügen Sie mithilfe der Hilfslinien und des Horizontal Type Tools Fotos und Informationen über das Teammitglied hinzu. In diesem Fall verwenden wir Lucida Sans. 🎜>Fügen Sie Fotos und Informationen der Teammitglieder hinzu. Hier verwenden wir die Schriftart: Lucida Sans

Die Schriftarteinstellungen für den Namenstext des Designers sind wie folgt: Farbe: #1b77a8

Identität Die Schriftart des Textes ist wie folgt: Farbe: #a8b9c9

Die Schriftart der Beschreibungsinformationen ist wie folgt: Farbe: #898989

Schaltflächenfarbe: #1b77a8

Textschriftart auf der Schaltfläche: Farbe: #ffffff

Zeichnen Sie einen weißen „Pfeil“ mit der gleichen Technik wie beim „Folge uns“-Menüband. Erstellen Sie mit dem Rechteck-Werkzeug und dann mit Hilfe von Hilfslinien eine rechteckige Form , Fügen Sie das Ankerpunkt-Werkzeug und das Direktauswahl-Werkzeug hinzu und verwandeln Sie es in ein schönes Band.

Zeichnen Sie einen weißen Pfeil mit der gleichen Technik wie für das Band. Erstellen Sie mit Hilfe des Rasters ein Rechteck mit dem

Rechteck-Werkzeug

, fügen Sie Ankerpunkte mit dem

Ankerpunkt-Werkzeug hinzufügen

hinzu und verwandeln Sie es dann in ein wunderschönes Band

Fügen Sie den Schatten zum Menüband hinzu (Sie können die Hauptform vorübergehend ausblenden), stellen Sie die Farbe auf #000 und die Deckkraft auf 5 % ein Klicken Sie auf die Form, gehen Sie zu Free Transform Path und aktivieren Sie die Swarp-Modi, um das folgende Ergebnis zu erhalten.

Fügen Sie dem Streamer einen Schlagschatten hinzu. Duplizieren Sie die Ebene, die Sie gerade erstellt haben (Sie können die Hauptform vorübergehend ausblenden), stellen Sie die Farbe auf #000000 und die Deckkraft auf 5 % ein. Klicken Sie mit der rechten Maustaste auf die Form, wählen Sie

Freier Transformationspfad

und aktivieren Sie den

Transformationsmodus

, um ihn wie folgt anzupassen

Verwenden Sie das horizontale Textwerkzeug, um eine „- – – – – – – –“-Zeichenfolge zu erstellen, die Sie rastern können und transformieren Sie es, um den folgenden Effekt zu erzielen. Fügen Sie außerdem einen weichen Schlagschatten hinzu.

Fügen Sie - - - - - - - Text mit dem Textwerkzeug hinzu, Sie können ihn rastern und der Transformation folgen Effekt unten und fügen Sie einen weichen Schlagschatten hinzu

Fügen Sie schließlich den Text hinzu (mit der Schriftart Delicious)

Erstellen Sie nun drei Blöcke mit Beschreibungen der vom Studio bereitgestellten Dienste. In diesem Abschnitt verwenden wir die fantastischen Icon-Sets, erstellt von Asher Abbasi für WeGraphics, Wapp vol. 2 und Wapp Band 1.

Denken Sie daran: In diesem Fall sind die Leitfäden wirklich nützlich, um den Abschnitt mit Symbolen und Text zu füllen.

Erstellen Sie jetzt 3 Blöcke, um die vom Studio bereitgestellten Dienste zu beschreiben . Hier verwenden wir einige Icon-Sets, Wapp vol. 2 und Wapp vol. 1 von WeGraphics von Asher Abbasi

Denken Sie daran: Das Raster dient dazu, Ihnen bei der Platzierung Ihrer Symbole und Texte zu helfen

Schriftart des Titels: Farbe: #10789b

Schriftart des Absatztextes: Farbe: #585858, Text rechtsbündig

Fügen Sie drei „Punkte“ (mit einem schönen Schlagschatten) hinzu und verstärken Sie den Text mit einem 1 Pixel großen weißen Schlagschatten, wie unten gezeigt.

Fügen Sie drei Punkte (mit schönen Schlagschatten) hinzu,

Farbe: #5a8cc1

, und fügen Sie einen 1 Pixel großen weißen Schlagschatten zum vorherigen Text hinzu, wie unten gezeigtPunktprojektion, Projektionsfarbe: #a3c6e6

Textprojektion

Wir erstellen auch ein schönes Menü, direkt unter dem weißen Feld. An dieser Stelle sollte klar sein, wie dieses Menü realisiert wird. Wir fügen den „Pfeilen“ nur einen weichen inneren Schatten hinzu.

Wir werden unter dem weißen Rechteck ein schönes Menü erstellen. Um deutlich zu machen, wie das Menü umgesetzt wird, werden wir den Pfeilen einen inneren Schattenstil hinzufügen.

und Text hinzufügen

Schritt 5 – Das mittlere Band

Schritt 5: Das mittlere Element unseres Designs ist eine informative Infografik, die durch ein großes Band mit einem Slogan eingeleitet wird. Um dieses Band zu realisieren, erstellen wir wie üblich 5 benutzerdefinierte Formen mit dem Stiftwerkzeug (. Ich erinnere noch einmal daran, dass Sie als Anfänger „Photoshop für Anfänger: Das Stiftwerkzeug“ lesen können, um mehr über die Verwendung dieses Werkzeugs zu erfahren. Schauen Sie sich unten an, um zu verstehen, welche Formen wir zeichnen müssen (Hinweis: Wir). wird #497287 für die Hauptformen und #798ea4 für die dunkleren Formen verwenden).

Das mittlere Element unseres Designs ist ein Der informative Infografikbereich wird mit einem großen Streamer mit einem Slogan eingeleitet. Um dieses Menüband zu implementieren, erstellen wir wie gewohnt 5 benutzerdefinierte Formen mit dem

Stiftwerkzeug

(ich erinnere Sie noch einmal daran, dass Sie als Anfänger „Erste Schritte: Stiftwerkzeug in Photoshop“ lesen können, um mehr darüber zu erfahren wie man dieses Tool benutzt). Werfen wir einen Blick darauf, welche Formen genau gezeichnet werden müssen (Hinweis: Farbe für die Hauptform: #497287 und Farbe für die dunkleren Formen: #798ea4).

Hinweis: Sie können auch das Rechteck-Werkzeug plus das

Direktauswahl-Werkzeug

verwenden, um ähnliche Formen zu vervollständigen, wie im Bild unten gezeigt Seien Sie ein Blickfang, jeder verwendet ein helles Auge. Die Farbe von

wird separat geändert Form: #497287, die Farbe der dunkleren Form: # 798ea4

Was ist mit dem Stil? Wir wenden den gleichen Stil an für die „Vorderform“, wie Sie unten sehen können (das Muster, das wir verwenden werden, stammt von Old Paper Patterns auf WeGraphics).

Was ist die Stileinstellung? Okay, wir werden den gleichen Ebenenstil wie die Frontform hinzufügen, wie im Bild unten (für das Muster verwenden wir Old Paper Patterns auf WeGraphics)

Farbe des Schlagschattens: #445055

Die Musterüberlagerung verwendet ein benutzerdefiniertes Muster und der Effekt ähnelt dem

12*24-Muster links und eine Zeile auf jeder Seite, Farbe: #f0f0f0

Für die beiden kleinen Dreiecke wenden wir den folgenden Stil an:

Fügen Sie den beiden Dreiecken den folgenden Stil hinzu:

Das Dreieck links

projizierte Farbe: #445055

Das Dreieck rechts

Farbe des Schlagschattens: #445055

Zum Schluss den Slogan hinzufügen 🎜>

Schritt 6 – Die Infografik

Schritt 6: Die Infografik

Die Idee, eine kleine Infografik hinzuzufügen, entstand aus dem Bedürfnis, den kreativen Prozess unseres fiktiven Designstudios zusammenzufassen. Unten sehen Sie das Endergebnis (Natürlich ist es nur ein vereinfachtes Beispiel dafür, wie man einen kreativen Prozess hinter der Entwicklung eines Projekts beschreiben kann.) Unten sehen Sie das Endergebnis (natürlich ist es nur ein einfaches Beispiel zur Veranschaulichung eines kreativen Prozesses, den Sie später im Prozess beschreiben können)

Beginnen Sie mit dem Entwerfen der beiden Kreise (halten Sie die Umschalttaste gedrückt, um einen perfekten Umfang zu zeichnen, stellen Sie die Füllung für die linke Form auf 0 % ein, stellen Sie den Füllmodus auf lebendiges Licht und die Füllung auf 35 % ein). . Fügen Sie den Stil wie unten gezeigt hinzu (er ist für beide Formen gleich, außer Musterüberlagerung für die linke Form) (Halten Sie die Umschalttaste gedrückt). Taste zum Zeichnen eines perfekten Kreises, Farbe: #3d3d3d). Stellen Sie die Füllung des linken Kreises auf 0 %, den Füllmodus des rechten Kreises auf „Licht“ und die Füllung auf 35 % ein. Stellen Sie den Ebenenstil wie unten gezeigt ein (stellen Sie den gleichen für beide Kreise ein und fügen Sie dann links eine Musterüberlagerung hinzu)

Farbe der Projektion: #445055

Farbe des inneren Leuchtens: #aac1d1

Fügen Sie dann links einen Musterüberlagerungsstil hinzu, das Muster ist 12*12, und die obere linke Ecke ist 8*8 schwarzes Quadrat

Beachten Sie, dass der linke Kreis ein benutzerdefiniertes Muster verwendet. Wir können dieses Muster mit der gleichen Technik wie in Schritt 2 erstellen .

Beachten Sie, dass der Kreis auf der linken Seite ein benutzerdefiniertes Muster verwendet. Wir können die Technik in Schritt 2 verwenden, um dieses Muster zu erstellen

Verwenden Sie das Ellipsen-Werkzeug (erstellen Sie den kleinen weißen Kreis einmal und duplizieren Sie ihn dann, um ihn erneut zu verwenden) und das Linien-Werkzeug (Gewicht: 3 Pixel, Farbe #ffffff), um das Diagramm auf der linken Seite zu gruppieren Erstellen Sie die erstellten Formen und Linien, duplizieren Sie die Gruppe, konvertieren Sie sie in ein intelligentes Objekt und rastern Sie sie dann. Jetzt können Sie den Stil zur Ebene hinzufügen.

Verwenden Sie das Ellipsen-Werkzeug (erstellen Sie einmal kleine weiße Kreise und duplizieren Sie sie dann). so viele wie nötig) und das Linienwerkzeug (Gewicht: 3 Pixel, Farbe: #ffffff) den Kreis auf der linken Seite entwerfen. Gruppieren Sie diese Formen und Linien, kopieren Sie die Gruppe, konvertieren Sie sie in ein Smart Object und rastern Sie sie. Jetzt können Sie den Ebenenstil

zur Schlagschattenfarbe hinzufügen: #94acb5

Zeichnen Sie mit dem Stiftwerkzeug einige Tags (mit leuchtenden Farben: #d82f4c, #edcd59, #4d85a2, #598b3b) und benennen Sie sie dann mit dem horizontalen Textwerkzeug. Sie können auf beide einen weichen Schatten anwenden , Tag und Text.

Verwenden Sie als Nächstes das Stiftwerkzeug, um einige Tags zu zeichnen (verwenden Sie einige helle Farben: #d82f4c, #edcd59, #4d85a2, #598b3b, die tatsächlich verwendeten Farben sind #cbc71e, #5a8c45, # e1c325, #ef6d39, #ec354d, #4c849e) und fügen Sie mit dem Textwerkzeug etwas Text hinzu. Sie können dem Etikett und dem Text den gewünschten Soft-Drop-Shade-Stil hinzufügen

Ebenenstil des Etiketts:

Stil der Textebene:

Fügen Sie innerhalb des rechten Kreises weitere drei Kreise hinzu, stellen Sie die Füllung auf 20 % ein und fügen Sie wie gezeigt Text hinzu (Sie können einen weichen Schlagschatten auf die Zeichenfolge anwenden).

Hinzufügen Fügen Sie weitere 3 Kreise zum rechten Kreis hinzu ( Farbe: #092f46), stellen Sie die Füllung auf 20 % ein und fügen Sie Text hinzu (Sie können dem Text einen weichen Schlagschatten hinzufügen), wie unten gezeigt

Jetzt müssen wir die überschüssigen Teile von „Design“ und „Entwicklung“ ausblenden. Wie bereits gesehen, verwenden wir die Ebenenmaske. Klicken Sie bei gedrückter Strg-Taste auf die Form des „Kreativitäts“-Kreises und stellen Sie den Wert auf „3 Pixel“ ein.

Jetzt wollen wir die überschüssigen Teile der Design- und Entwicklungskreise ausblenden. Wie Sie bereits gesehen haben, verwenden Sie die Ebenenmaske

. Klicken Sie bei gedrückter Strg-Taste auf den Kreis „Kreativität“ im Ebenenbedienfeld und klicken Sie dann auf: „Auswählen“ > „Ändern“ > „Erweitern“ und stellen Sie den Vergrößerungsgrad auf 3 Pixel ein

Strg+Umschalt+I, um die Auswahl umzukehren und dann eine Ebenenmaske auf die Form mit dem Namen „Design“ anzuwenden.

Drücken Sie Strg+Umschalt+I, um die Auswahl umzukehren und dann eine Ebenenmaske zur Designform hinzuzufügen

Wiederholen Sie den Vorgang, um eine neue Auswahl zu erstellen und zu erweitern Sie können es wie gezeigt verwenden, wenn Sie zwei oder mehr Auswahlen aus der Miniaturansicht der Vektormaske hinzufügen müssen. Klicken Sie dazu auf die Formen „Design“ und „Kreativität“. > Wiederholen Sie den obigen Vorgang, um eine neue Auswahl zu erstellen und diese wie unten gezeigt zu erweitern. Wenn Sie eine Vektormaskenauswahl aus zwei oder mehr Miniaturansichten hinzufügen müssen, können Sie mit Strg+Umschalt+Klick eine zusammengesetzte Auswahl erstellen, indem Sie auf die Formen „Design“ und „Kreativität“ klicken.

Strg+Umschalt+I, um die Auswahl umzukehren und dann eine Ebenenmaske auf die Form mit dem Namen „Entwicklung“ anzuwenden.

Drücken Sie Strg+Umschalt+I Auswahl umkehren, dann eine Ebenenmaske zur Entwicklungsform hinzufügen

Wenden Sie einen weichen Schlagschatten auf die drei Kreise an, um das zu erhalten folgendes Ergebnis.

Fügen Sie weiche Schatten zu den drei Kreisen hinzu, um das folgende Ergebnis zu erhalten.

Die anderen Parameter der drei Kreise sind gleich, der einzige Unterschied ist der Winkel. Jeder Kreis muss sorgfältig angepasst werden

Zeichne einen neuen Kreis.

Zeichne einen schönen Kreis

Setzen Sie „Füllung“ auf 0 % und fügen Sie einen weißen Strich hinzu (Größe 3 Pixel).

In Smart Object konvertieren, rastern und einen Schlagschatten hinzufügen (derselbe Schlagschatten, der in diesem „Schritt“ auf das Diagramm angewendet wurde). Infografik, die weitere Linien und Tags hinzufügt, wie im folgenden Bild gezeigt.

In Smart Object konvertieren, rastern und einen Schlagschatten hinzufügen (fügen Sie den gleichen Schlagschatten wie zuvor in diesem Schritt hinzu). Fügen Sie abschließend weitere Beschriftungen und Linien hinzu, wie unten gezeigt

Schritt 7 – Unterer Behälter

Schritt 7: Unterer Inhaltsbereich

Sie können diesen Abschnitt mit den gleichen Techniken wie in Schritt 4 reproduzieren.

Sie können diesen Abschnitt reproduzieren Verwenden der Schritte Die Techniken in 4 werden in diesem Teil reproduziert

Dieser Teil des Original-Tutorials ist einfach, und hier werde ich ihn im Detail hinzufügen

Rechteck-Werkzeug erstellt ein weißes Rechteck (186, 1220, 484, 290); verwenden Sie das Linien-Werkzeug , um zwei gerade Linien zu erstellen (186, 1229, 484, 1) und (186, 1501 , 484, 1), Farbe: #eeeeee; Verwenden Sie das Textwerkzeug, um Text hinzuzufügen, Schriftart: Delicious. Fügen Sie dem Text und dem weißen Rechteck einen Schlagschattenstil hinzu

Verwenden Sie Rechteck-Werkzeug Erstellen Sie zwei Rechtecke (201, 1252) und (442, 1252), Größe: 202px*132px, und fügen Sie den folgenden Strichstil und die folgende Strichfarbe hinzu: #bedbed

Platzieren Sie Bilddateien jeweils über den beiden Rechtecken und klicken Sie dann mit der rechten Maustaste auf die Bildebene im Ebenenbedienfeld. Fügen Sie eine Schnittmaske hinzu dass das Bild nur im Rechteck angezeigt wird

Fügen Sie wie unten gezeigt Bildunterschriften hinzu

Schriftart des Titeltextes: Farbe: #1b77a8

Schriftart des Untertiteltextes: Farbe: #a8b9c9

Schriftart des Absatztextes: Farbe: #898989

Fügen Sie einige Symbole und Text sowie Punkte auf der rechten Seite hinzu und fügen Sie entsprechende Stile hinzu.

Schriftart für Überschriften: Farbe: #10789b

Schriftart für Absatztext: Farbe: #585858

Fügen Sie 2 Punkte hinzu, Farbe: #5a8cc1, und fügen Sie einen 1 Pixel großen weißen Schatten zum vorherigen Text hinzu, wie unten gezeigt

Punktprojektion, Projektionsfarbe: #a3c6e6

Textprojektion

Kopieren Sie den großen weißen Streamer im Hauptinhaltsbereich, drehen Sie ihn horizontal und ändern Sie den entsprechenden Text

Kopieren Sie die 3 Streamer-Schaltflächen in der unteren rechten Ecke des Hauptinhaltsbereichs, spiegeln Sie sie horizontal und ändern Sie den entsprechenden Text

Schritt 8 – Credits

Schritt 8: Urheberrecht

Fügen Sie eine Zeichenfolge mit den Credits hinzu.

Fügen Sie Copyright-Informationen hinzu

Endergebnis: >

Postscript:

Die Merkmale dieses Tutorials sind drei Aspekte:

1. Um Wolken zu erstellen, verwenden Sie Ellipsen-Tools und entsprechende Ebenenstile, um realistische Wolkeneffekte zu erzeugen

2. Die Produktion von Streamern, es gibt viele Streamer-Produktionen in diesem Artikel

3. Die Produktion von Diagrammen finde ich sehr anschaulich. Das ursprüngliche seriöse und starre Layout wurde geändert und fühlte sich ein wenig nüchtern an

Weitere PS-Webdesign-Tutorials XVII – Entwerfen kreativer Kombinationswebseiten in Photoshop Für verwandte Artikel achten Sie bitte auf die chinesische PHP-Website!