Entwerfen Sie eine warme, fröhliche Website-Oberfläche in Adobe Photoshop

() translation by (you can also view the original English article)

Aktualisiert mit den HTML-Codierungs-Tutorials! - Nicht lange nach dem Start von Webdesigntuts haben wir dieses hervorragende Tutorial veröffentlicht, das den Prozess der Gestaltung einer warmen und fröhlichen Homepage in Photoshop detailliert beschreibt. Nach großer Nachfrage haben wir damit begonnen, das fertige Design zu übernehmen und es in eine standardkonforme HTML- und CSS-Webseite umzuwandeln! Auf dem Weg werden wir eine Vielzahl raffinierter Techniken besprechen, die Ihnen helfen, Ihren eigenen Arbeitsablauf zu verbessern.

Noch besser, wenn Nettuts 80.000 RSS-Abonnenten erreicht, hat Jeffrey zugestimmt, die Dinge noch weiter zu gehen und das fertige Produkt in ein benutzerdefiniertes WordPress-Theme zu konvertieren. Sehen Sie sich unsere Fortschritte unten an.

Die Tutorials zur PSD-zu-HTML-Codierung

Jeffrey Way hat auf unserer Schwesterseite Nettuts einige spektakuläre Programmier-Tutorials zum Konvertieren dieses Designs von PSD in HTML erstellt, also tu dir selbst einen Gefallen und sieh sie dir an, wenn du den Design-Teil abgeschlossen hast! Es gibt insgesamt 8 Kapitel (im Moment sind wir bei Schritt 8), und es lohnt sich, sie zu überprüfen, wenn Sie jemals Fragen zur Konvertierung einer PSD in HTML/CSS hatten.

Die Designphase

In diesem Tutorial lernen wir, wie man in Adobe Photoshop eine warme, fröhliche und gemütliche Oberfläche für eine Portfolio- / Blog-Website entwirft. Während wir dieses Tutorial durchgehen, arbeiten wir mit: einfachen Formen (Rechtecke, Linien, Pfeile usw.), Ebenenstilen (viele davon sogar!), Ebenenmasken, Muster, Zeichen- und Absatzstile und so viele andere Design- und Photoshop-Techniken, die Sie an den Design-Workflow Ihrer Website-Oberfläche anpassen können.

Schritt 1

Um alles ausgerichtet zu halten, verwenden wir das 960s Grid System (hier herunterladen). Öffnen Sie nach dem Herunterladen die Datei "960_grid_24_col.psd". Die Höhe des aktuellen Dokuments ist kleiner als unser endgültiges Design. Wir gehen also zu Bild > Leinwandgröße > Höhe: 1820px, Anker: Oben in der Mitte.

Wir müssen auch sicherstellen, dass unsere Lineale und Guides angezeigt werden. Wir gehen also zu Ansicht > Extras / Lineale / Fangen (damit unsere Objekte an unseren Hilfslinien ausgerichtet werden).

Lassen Sie uns unseren Hintergrund mit einer Sloid-Farbe füllen. Wählen Sie die Ebene „Hintergrund“, klicken Sie mit der rechten Maustaste darauf und wählen Sie: Ebene vom Hintergrund und geben Sie ihr einen aussagekräftigen Namen (zum Beispiel: „bg“). Erstellen Sie nun mit dem rechteckigen Auswahlwerkzeug (M) eine Auswahl über die gesamte Leinwand, setzen Sie Ihre Vordergrundfarbe auf: #f8eedf und klicken Sie dann auf Umschalt+Rücktaste, um Ihre Auswahl zu füllen.

Schritt 2

Beginnen wir mit der Erstellung unseres Headers. Erstellen Sie mit dem rechteckigen Auswahlwerkzeug (M) oder dem Rechteckwerkzeug (U) (oder einem anderen Werkzeug, das Sie bevorzugen) ein Rechteck / eine Auswahl von 1020x100px und füllen Sie es vorerst mit einer beliebigen Farbe.

Fahren Sie fort und wenden Sie eine Verlaufsüberlagerung auf Ihre Kopfzeile an, indem Sie mit der rechten Maustaste auf unsere Ebene> Mischoptionen> Verlaufsüberlagerung> klicken Sie das Bild unten als Referenz:

Um zu verhindern, dass unser Header-Hintergrund flach aussieht, wenden wir eine einfache Noise-Textur an. Erstellen Sie also eine neue Ebene (natürlich muss sie sich über der Hintergrundebene selbst befinden), erstellen Sie eine Auswahl über dem Kopfzeilenhintergrund und füllen Sie sie dann (indem Sie auf Umschalt + Rücktaste klicken) mit diesem Farbwert: #ffc05e.

Gehen Sie zu Filter > Rauschen > Rauschen hinzufügen > Betrag: 48px, Verteilung: Gaussian. Ändern Sie den Mischmodus dieser Ebene in: Luminosity und reduzieren Sie die Opazität auf: 5%.

Schritt 3

Es ist Zeit, den Namen unserer Website einzugeben. Schnappen Sie sich das Horizontal Type Tool (T), geben Sie Ihren Website-Namen gemäß den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Archer (von typography.com herunterladen)
Größe: 30pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Optisch
Verfolgung: 50

Wenden Sie einen Schlagschatten auf unseren Text an, indem Sie die im Bild unten gezeigten Einstellungen verwenden:

Um sicherzustellen, dass der Website-Name vertikal am Kopfzeilenhintergrund ausgerichtet ist, wählen Sie beide Ebenen aus und klicken Sie dann auf „Vertikale Zentren ausrichten“, die Sie im Steuerungsbedienfeld finden.

Schritt 4

In diesem Schritt platzieren wir die Social-Media-Symbole. Wir beginnen damit, diese wirklich fantastischen Social-Media-Symbole von KomodoMedia herunterzuladen und dann vier Symbole wie im Bild unten zu platzieren:

Um sicherzustellen, dass die Abstände zwischen den vier Symbolen gleichmäßig sind. Wählen Sie die vier Ebenen aus und klicken Sie in der Systemsteuerung auf: Horizontale Zentren verteilen.

Lassen Sie uns nun neben unseren Symbolen ein Trennzeichen erstellen. Erstellen Sie mit dem Linienwerkzeug (U) zwei Linien, von denen jede 1x60px groß sein sollte, füllen Sie die linke mit diesem Farbwert: #ffd593 und die rechte mit diesem Farbwert: #c08c3a. Stellen Sie außerdem sicher, dass zwischen den beiden Linien und den vier Symbolen ein horizontaler Leerraum von 20 Pixeln verbleibt.

Wählen Sie das Verlaufswerkzeug (G), öffnen Sie das Dialogfeld Verlaufseditor und legen Sie Ihre Verlaufseinstellungen gemäß der Abbildung unten fest. Klicken Sie dann mit der rechten Maustaste auf die Ebene einer der gerade erstellten Linien und wählen Sie: Ebenenmaske hinzufügen.

Ziehen Sie mit dem Verlaufswerkzeug (G) von oben nach unten. Machen Sie dasselbe mit der Ebene der anderen Linie (oder Sie können einfach die Ebenenmaske kopieren und in die andere Ebene einfügen).

Schritt 5

Es ist Zeit, mit der Arbeit an der Navigationsleiste zu beginnen. Wählen Sie das Rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl von 1020x600px und füllen Sie sie mit diesem Farbwert: #40312a.

Erstellen Sie mit dem Single Row Marquee Tool ein 1020x1px und füllen Sie es mit diesem Farbwert: #f9ba59.

Wir fügen ein Highlight hinzu, indem wir eine Auswahl von 1020x1px erstellen, sie mit diesem Farbwert füllen: #735a4f und ihre Deckkraft auf 70% reduzieren.

Schritt 6

In diesem Schritt erstellen wir unseren Navigationstext. Geben Sie also mit dem Horizontal Type Tool (T) das Wort „Home“ mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Gotham Rounded (von typography.com herunterladen)
Größe: 16pt
Gewicht: Mittel
Anti-Aliasing-Einstellung: Crisp
Farbe: #2c8897
Kerning: Metriken
Verfolgung: 50

Wenden Sie dann gemäß dem folgenden Bild einen Schlagschatten darauf an:

Geben Sie in einer neuen Textebene den Rest des Navigationstexts mit den gleichen Zeicheneinstellungen wie oben ein, außer dass wir diesmal den Farbwert in #ffffff ändern. Wenden Sie erneut einen Schlagschatten auf diese Ebene gemäß der folgenden Abbildung an:

Schritt 7

Jetzt erstellen wir unsere Suchleiste, warum nicht? Wir beginnen damit, dass wir das Wort „SUCHE“ mit den gleichen Zeicheneinstellungen eingeben, die wir auf den Navigationstext angewendet haben, aber diesmal ändern wir die Schriftstärke in: Buch. Wir werden auch den gleichen Schlagschatten darauf anwenden, den wir auf das Wort „Home“ angewendet haben.

Es ist Zeit, das Eingabefeld zu erstellen. Erstellen Sie mit dem Werkzeug für abgerundetes Rechteck (U) ein Rechteck von 190x25px mit einem Radius von 3px, füllen Sie es mit diesem Farbwert: #2c8797, und wenden Sie einen Ebenenstil entsprechend der folgenden Abbildung an:

Versuchen Sie, ein sehr einfaches Lupensymbol zu finden oder zu erstellen, platzieren Sie es wie in der Abbildung unten und vergessen Sie nicht, denselben Schlagschatten, den wir auf das Wort "SUCHEN" angewendet haben, auf dieses Symbol anzuwenden.

Schritt 8

Beginnen wir mit der Arbeit am Featured / Welcome-Bereich. Erstellen Sie mit dem rechteckigen Auswahlwerkzeug (M) eine Auswahl von: 1020x400px und füllen Sie sie mit diesem Farbwert: #deccaaa.

Wir erstellen ein einfaches und subtiles Muster, um unseren Hintergrund interessanter aussehen zu lassen. Fahren Sie fort und erstellen Sie ein neues Dokument von 25x25px und füllen Sie seinen Hintergrund mit diesem Farbwert: #deccaaa.

Erstellen Sie mit dem Ellipsenwerkzeug (U) einen Kreis von etwa 4 x 4 Pixeln, füllen Sie ihn mit: #aa9364 und stellen Sie sicher, dass er an der Mitte des Dokuments ausgerichtet ist.

Erstellen Sie eine weitere Kopie dieses Kreises, verschieben Sie ihn um zwei Pixel nach unten und ändern Sie seine Füllfarbe in: #f2e5cb.

Gehen Sie zu Bearbeiten > Muster definieren > Geben Sie ihm einen Namen.

Wenden Sie den folgenden Ebenenstil auf die Hintergrundebene an (diejenige, die wir zu Beginn dieses Schritts erstellt haben):

Schritt 9

Ziehen Sie ein paar horizontale Hilfslinien gemäß der folgenden Anleitung:

Erstellen Sie mit dem Werkzeug für abgerundetes Rechteck (U) ein Rechteck von 950 x 260 Pixeln mit einem Radius von 5 Pixeln und füllen Sie es mit diesem Farbwert: #40312a.

Wenden Sie einen inneren Schatten darauf an. Verwenden Sie das Bild unten als Referenz:

Wenden Sie einen Rauscheffekt auf dieses Rechteck an (wir haben das bereits für den Hintergrund unserer Kopfzeile getan), fügen Sie dieser Ebene eine Ebenenmaske hinzu und ziehen Sie mit einem linearen Schwarz-Weiß-Verlauf von rechts oben nach links unten.

Schritt 10

Erstellen Sie ein Rechteck oder eine Auswahl von 230x250px, füllen Sie es mit einer beliebigen Farbe, richten Sie es gemäß dem folgenden Bild aus und wenden Sie den Ebenenstil ebenfalls gemäß dem folgenden Bild darauf an:

Gehen Sie zu Datei > Platzieren > und platzieren Sie ein Bild eines vorgestellten Designprojekts. Klicken Sie mit der rechten Maustaste auf diese Ebene > Schnittmaske erstellen.

Schritt 11

Jetzt erstellen wir einen Schatten für unser Bild. Erstellen Sie also mit dem Ellipsenwerkzeug (U) eine Ellipse wie die im Bild unten. Gehen Sie dann zu Filter> Weichzeichnen> Gaußscher Weichzeichner> Radius: 3.0px.

Öffnen Sie Ihren Verlaufseditor und legen Sie Ihre Einstellungen gemäß dem folgenden Bild fest. Erstellen Sie eine Schnittmaske für die Ebene der Ellipse und ziehen Sie mit dem Verlaufswerkzeug (G) von rechts nach links mit einem linearen Verlauf. Stellen Sie außerdem sicher, dass Sie beim Ziehen die Umschalttaste gedrückt halten, um Ihren Engel einzuschränken.

Wir platzieren ein weiteres Bild. Aber das einzige, was wir ändern werden, ist, dass der Inhaber unseres Bildes sein wird: 230x220px.

Schritt 12

Es ist Zeit für einen Begrüßungstext. Nehmen Sie das horizontale Textwerkzeug (T) und geben Sie einen Begrüßungstitel mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Archer
Größe: 24pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: #3da2b4
Kerning: Optisch
Verfolgung: 50

Geben Sie nun Text mit den folgenden Zeichen- und Absatzeinstellungen ein:

Schriftfamilie: Verdana
Größe: 12pt
Gewicht: Normal
Anti-Aliasing-Einstellung: Glatt
Farbe: #ffffff
Kerning: Metriken
Verfolgung: 0
Führend: 18pt
Absatz: Alles begründen

Schritt 13

Lassen Sie uns unsere beiden Call-to-Action-Buttons erstellen. Erstellen Sie mit dem Werkzeug für abgerundetes Rechteck (U) ein Rechteck von 160 x 45 Pixel mit einem Radius von 5 Pixel und füllen Sie es vorerst mit einer beliebigen Farbe. Stellen Sie außerdem sicher, dass Sie es gemäß der folgenden Abbildung ausrichten:

Wenden Sie auf diese Schaltfläche einen Rauscheffekt an (das haben wir bereits mehrmals getan). Fügen Sie eine Ebenenmaske hinzu und ziehen Sie mit einem linearen Schwarz-Weiß-Verlauf von oben nach unten.

Wenden Sie einen Ebenenstil auf diese Ebene an. Verwenden Sie das folgende Bild als Referenz:

Geben Sie mit dem horizontalen Textwerkzeug (T) etwas in diese Schaltfläche ein (z. B.: "Weitere Informationen") und verwenden Sie die folgenden Zeicheneinstellungen:

Schriftfamilie: Gotham Rounded
Größe: 16pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Optisch
Verfolgung: 50

Wenden Sie einen Schlagschatten auf diese Textebene an. Die Einstellungen sind im Bild unten zu sehen:

Erstellen Sie eine weitere Kopie dieser Schaltfläche und stellen Sie sicher, dass Sie sie gemäß der folgenden Abbildung ausrichten:

Schritt 14

Lassen Sie uns fortfahren und ein Breadcrumb erstellen. Erstellen Sie mit dem Werkzeug für abgerundetes Rechteck (U) ein 950 x 40 Pixel großes Rechteck mit einem Radius von 5 Pixel, richten Sie es wie im Bild unten aus und wenden Sie eine Verlaufsüberlagerung entsprechend dem folgenden Bild darauf an:

Geben Sie mit dem horizontalen Textwerkzeug (T) einen Text ein, der anzeigt, wo sich der Benutzer befindet, und wenden Sie die folgenden Zeicheneinstellungen auf Ihren Text an:

Schriftfamilie: Archer
Größe: 13pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Metriken
Verfolgung: 50

Wenden Sie dann einen Schlagschatten auf Ihren Text an. Einstellungen finden Sie im Bild unten:

Erstellen Sie mit dem Polygon-Werkzeug (U) ein 12x12px-Dreieck und füllen Sie es mit diesem Farbwert: #e0cfad.

Schritt 15

In diesem Schritt erstellen wir ein einfaches Trennzeichen, das aus drei übereinander angeordneten Zeilen besteht. Erstellen Sie also mit dem Linienwerkzeug (U) eine 1020x2px-Linie und füllen Sie sie mit diesem Farbwert: #bba67b. Erstellen Sie dann eine weitere Zeile von 1020x1px und füllen Sie sie mit diesem Farbwert: #e6d6b8. Und zum Schluss erstellen Sie noch eine weitere Zeile von 1020x1px und füllen sie mit diesem Farbwert: #bba67b.

Schritt 16

Ziehen Sie ein paar horizontale Hilfslinien gemäß der folgenden Abbildung:

Der erste Abschnitt unseres Inhaltsbereichs wird der Abschnitt „Aus dem Blog“ sein. Nehmen Sie das horizontale Textwerkzeug und geben Sie einen Titel mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Archer
Größe: 24pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: Irgendeine Farbe für jetzt
Kerning: Optisch
Verfolgung: 50

Wenden Sie gemäß der folgenden Abbildung einen Ebenenstil auf diese Textebene an:

Geben Sie den Namen des ersten Blogbeitrags mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Gotham Rounded
Größe: 24pt
Gewicht: Leicht
Anti-Aliasing-Einstellung: Crisp
Farbe: #40312a
Kerning: Optisch
Verfolgung: 50

Geben Sie mit den folgenden Zeicheneinstellungen einige Details zum Blogbeitrag ein:

Schriftfamilie: Archer
Größe: 13pt
Gewicht: Fett Kursiv
Anti-Aliasing-Einstellung: Crisp
Farbe: #ce953c
Kerning: Metriken
Verfolgung: 0

Wir erstellen nun einen Halter für das Leitbild unseres Blogbeitrags. Erstellen Sie also mit dem Werkzeug für abgerundetes Rechteck (U) ein 550x140px mit 5px Radius, füllen Sie es mit einer beliebigen Farbe und wenden Sie dann einen Ebenenstil entsprechend dem folgenden Bild darauf an:

Platzieren Sie Ihr Leitbild und erstellen Sie eine Schnittmaske für diese Ebene.

Geben Sie drei Textzeilen als Einleitung zu unserem Blogbeitrag ein und verwenden Sie dabei die folgenden Zeicheneinstellungen:

Schriftfamilie: Verdana
Größe: 12pt
Gewicht: Normal
Anti-Aliasing-Einstellung: Glatt
Farbe: #000000 - #247184
Kerning: Metriken
Verfolgung: 0
Führend: 18pt

Erstellen Sie eine weitere Kopie dieses Blogbeitrags und stellen Sie sicher, dass die Elemente gemäß der folgenden Abbildung ausgerichtet sind:

Schritt 17

Nehmen Sie das Rechteckwerkzeug (U) und erstellen Sie ein Rechteck von 110 x 30 Pixel, füllen Sie es mit einer beliebigen Farbe und wenden Sie einen Ebenenstil gemäß dem folgenden Bild darauf an:

Wenden Sie erneut einen Rauscheffekt auf diese Schaltfläche an, wenden Sie eine Ebenenmaske an und ziehen Sie von unten nach oben mit einem linearen Schwarz-Weiß-Verlauf.

Erstellen Sie mit dem Linienwerkzeug (U) eine 110x1px-Linie und füllen Sie sie mit diesem Farbwert: #b2988d.

Geben Sie ein Wort innerhalb des Rechtecks ein (z. B. „The Blog“) und verwenden Sie dabei die folgenden Zeicheneinstellungen:

Schriftfamilie: Archer
Größe: 16pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Optisch
Verfolgung: 50

Wenden Sie gemäß dem folgenden Bild einen Schlagschatten darauf an:

Schritt 18

Wir beginnen diesen Schritt, indem wir eine neue horizontale Hilfslinie gemäß der folgenden Abbildung ziehen:

Es ist Zeit, mit der Arbeit an der Seitenleiste zu beginnen. Schnappen Sie sich das rechteckige Auswahlwerkzeug (M), erstellen Sie eine Auswahl von 385 x 720 Pixeln und füllen Sie sie vorerst mit einer beliebigen Farbe.

Wenden Sie gemäß der folgenden Abbildung eine Verlaufsüberlagerung auf diese Ebene an:

Fügen Sie dieser Ebene eine Ebenenmaske hinzu und ziehen Sie dann mit dem Verlaufswerkzeug (G) mit einem linearen Schwarz-Weiß-Verlauf von rechts nach links.

Erstellen Sie mit dem Linienwerkzeug (U) eine 1x720px-Linie und füllen Sie sie mit diesem Farbwert: #dfcdb2.

Fügen Sie dieser Ebene eine Ebenenmaske hinzu und ziehen Sie erneut mit dem Verlaufswerkzeug (G) mit einem linearen Schwarz-zu-Weiß-Verlauf, diesmal jedoch von unten nach oben.

Duplizieren Sie die Ebene der gerade erstellten Linie, verschieben Sie sie um 1 Pixel nach links und ändern Sie ihre Farbe in: #fff7ea.

Schritt 19

Wir erstellen unseren Seitenleisten-Tab. Erstellen Sie mit dem Werkzeug für abgerundetes Rechteck (U) ein 310 x 200 Pixel großes Rechteck mit einem Radius von 5 Pixel, füllen Sie es mit einer beliebigen Farbe und wenden Sie dann den Ebenenstil gemäß der folgenden Abbildung darauf an:

Ziehen Sie eine neue horizontale Hilfslinie gemäß der folgenden Abbildung:

Strg+Klicken Sie auf die Miniaturansicht dieser Ebene, um ihre Pixel zu laden. Nehmen Sie das rechteckige Auswahlwerkzeug (M) und stellen Sie seine Auswahleinstellungen auf: Von Auswahl subtrahieren, dann treffen Sie eine Auswahl über die unten gezeigten Bereiche, um die Auswahl aufzuheben. Jetzt haben Sie einen noch ausgewählten Bereich, erstellen eine neue Ebene und füllen sie mit diesem Farbwert: #40312a.

Erstellen Sie mit dem Linienwerkzeug (U) zwei Linien nebeneinander (siehe Bild unten), jede davon sollte 1px groß sein. Füllen Sie das linke mit diesem Farbwert: #134a56 und das rechte mit diesem Farbwert: #257386.

Machen Sie dasselbe noch einmal, aber diesmal horizontal.

Schritt 20

Geben Sie in der ersten Registerkarte das Wort „Kommentare“ mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Archer
Größe: 16pt
Gewicht: Mittel
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Metriken
Verfolgung: 50

Wenden Sie denselben Schlagschatten an, den wir auf den Breadcrumb-Text angewendet haben.

Geben Sie die Wörter „Kategorien“ und „Archive“ mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Archer
Größe: 16pt
Gewicht: Mittel
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Metriken
Verfolgung: 50

Stellen Sie sicher, dass Sie sie wie in der Abbildung unten ausrichten. Wenden Sie außerdem einen Schlagschatten gemäß dem folgenden Bild darauf an:

Schritt 21

Geben Sie ein Beispiel für einen Kommentar mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Verdana
Größe: 12pt
Gewicht: Normal
Anti-Aliasing-Einstellung: Glatt
Farbe: #ffffff
Kerning: Metriken
Verfolgung: 0
Führend: 18pt

Geben Sie einige Details zum Kommentar ein, indem Sie die folgenden Zeicheneinstellungen verwenden:

Schriftfamilie: Archer — Gotham Rounded
Größe: 12pt
Gewicht: Fett Kursiv — Mittel
Anti-Aliasing-Einstellung: Crisp
Farbe: #f8eedf
Kerning: Optisch
Verfolgung: 0

Erstellen Sie eine Kopie dieses Kommentars und erstellen Sie dazwischen ein Trennzeichen wie das, das wir in Schritt 19 erstellt haben.

Schritt 22

Erstellen Sie einen anderen Titel (der sagt: „WER WIR SIND“) wie den im Bild unten:

Erstellen Sie mit dem Rechteckwerkzeug (U) ein 310 x 100 Pixel großes Rechteck, wenden Sie einen Strich darauf an (Einstellungen sind in der Abbildung unten zu sehen) und platzieren Sie dann ein Bild in diesem Rechteck.

Geben Sie mit dem horizontalen Textwerkzeug (T) einige Wörter zu Ihrer Person ein, und verwenden Sie dabei die folgenden Zeicheneinstellungen:

Schriftfamilie: Verdana
Größe: 12pt
Gewicht: Normal – Fett
Anti-Aliasing-Einstellung: Glatt
Farbe: #000000 — #247184
Kerning: Metriken
Verfolgung: 0

Schritt 23

Erstellen Sie einen anderen Titel (der sagt: „SPONSORS“). Erstellen Sie dann mit dem Rechteckwerkzeug (U) ein 138x138px und füllen Sie es mit diesem Farbwert: #febf5d.

Platzieren Sie ein Bild einer Anzeige wie das folgende Bild:

Erstellen Sie eine Kopie dieses Werbespots.

Erstellen Sie mit dem Linienwerkzeug (U) zwei Linien nebeneinander, jede davon sollte 1x95px groß sein, füllen Sie die linke mit diesem Farbwert: #ffffff und die rechte mit diesem Farbwert: # cfbea3.

Öffnen Sie Ihren Verlaufseditor, legen Sie Ihre Einstellungen wie im Bild unten fest, wählen Sie eine der Ebenen der beiden Linien aus, fügen Sie eine Ebenenmaske hinzu und ziehen Sie dann mit diesem Verlauf von oben nach unten. Machen Sie dasselbe mit der Ebene der anderen Linie.

Schritt 24

Ziehen Sie eine neue horizontale Hilfslinie gemäß der folgenden Abbildung:

Erstellen Sie mit dem rechteckigen Auswahlrahmenwerkzeug (M) eine Auswahl von 1020 x 420 pixel, füllen Sie sie mit einer beliebigen Farbe und wenden Sie dann eine Verlaufsüberlagerung gemäß der folgenden Abbildung darauf an:

Erstellen Sie mit dem Single Row Marquee Tool eine Auswahl und füllen Sie sie mit diesem Farbwert: #b2988d.

Schritt 25

Ziehen Sie zwei horizontale Hilfslinien gemäß der folgenden Abbildung:

Geben Sie mit dem horizontalen Textwerkzeug (T) den ersten Titel der Fußzeile mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Archer
Größe: 24pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: Jede Farbe
Kerning: Optisch
Verfolgung: 50

Wenden Sie dann einen Ebenenstil gemäß der folgenden Abbildung darauf an:

Wir erstellen jetzt unser Kontaktformular. Nun, ich muss nichts sagen, das Bild unten sagt alles.

Wenden Sie den folgenden Ebenenstil auf alle Felder / Rechtecke an, die wir gerade erstellt haben:

Geben Sie nun einen Text in diese Felder ein, der angibt, wozu sie dienen, und verwenden Sie die folgenden Zeicheneinstellungen:

Schriftfamilie: Archer
Größe: 13pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: 247184
Kerning: Metriken
Verfolgung: 0

Schritt 26

Lassen Sie uns das „EINREICHEN“ erstellen. Erstellen Sie mit dem Rechteckwerkzeug (U) ein Rechteck von 110 x 30 Pixeln und füllen Sie es mit diesem Farbwert: #febf5d. Wenden Sie dann einen Ebenenstil gemäß der folgenden Abbildung darauf an:

Wenden Sie erneut einen Rauschfilter an, fügen Sie eine Ebenenmaske hinzu und ziehen Sie dann mit einem linearen Schwarz-Weiß-Verlauf von oben nach unten.

Strg+Klick, um die Pixel des Schaltflächenhintergrunds auszuwählen. Gehen Sie dann zu Auswählen > Ändern > Vertrag > Vertrag von: 1px und füllen Sie diese Auswahl mit: #ffffff. Gehen Sie erneut zu Auswählen> Ändern> Vertrag> Vertrag von: 1px, und klicken Sie dann auf Löschen. Deaktivieren Sie die Auswahl und reduzieren Sie die Deckkraft dieser Ebene auf: 15%.

Geben Sie das Wort „SENDEN“ in die Schaltfläche ein und verwenden Sie dabei die folgenden Zeicheneinstellungen:

Schriftfamilie: Archer
Größe: 16pt
Gewicht: Fett
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Optisch
Verfolgung: 50

Und dann wenden Sie einen Schlagschatten gemäß dem folgenden Bild darauf an:

Schritt 27

Der zweite Abschnitt unserer Fußzeile enthält Bilder unserer letzten Projekte. Erstellen Sie also mit dem Rechteckwerkzeug (U) ein 125 x 95 Pixel großes Rechteck, wenden Sie einen Strich darauf an, platzieren Sie ein Bild und erstellen Sie eine Schnittmaske.

Fügen Sie weiterhin Bilder hinzu und erstellen Sie eine weitere Schaltfläche.

Schritt 28

Der dritte und letzte Teil unseres großen Footers ist der Twitter-Stream. Geben Sie also mit dem Horizontal Type Tool (T) einen Text als Beispiel für einen Tweet mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Verdana
Größe: 12pt
Gewicht: Normal
Anti-Aliasing-Einstellung: Glatt
Farbe: #f8eedf
Kerning: Metriken
Verfolgung: 0

Geben Sie dann einige Details zum Tweet ein, indem Sie die folgenden Zeicheneinstellungen verwenden:

Schriftfamilie: Archer
Größe: 12pt
Gewicht: Fett Kursiv
Anti-Aliasing-Einstellung: Glatt
Farbe: #2e91a0
Kerning: Metriken
Verfolgung: 0

Fügen Sie weitere Beispiele für Tweets hinzu ... Erstellen Sie außerdem eine Schaltfläche "Folgen Sie uns" wie die folgende:

Setzen Sie jeden der drei Abschnitte in eine einzelne Ebenengruppe. Wählen Sie die drei Gruppen aus und klicken Sie dann in der Steuerleiste auf Horizontale Zentren verteilen.

Schritt 29

Jetzt ist es an der Zeit, den Small Footer zu erstellen. Erstellen Sie mit dem rechteckigen Auswahlwerkzeug (M) eine Auswahl von 1020 x 70 Pixeln und wenden Sie eine Verlaufsüberlagerung gemäß der folgenden Abbildung darauf an:

Wenden Sie einen Rauscheffekt auf diese Ebene an (derselbe Effekt, den wir auf die Kopfzeile angewendet haben).

Erstellen Sie mit dem Single Row Marquee Tool eine Auswahl und füllen Sie sie mit diesem Farbwert: #38a4bs.

Geben Sie mit dem horizontalen Textwerkzeug (T) die Copyright-Hinweise mit den folgenden Zeicheneinstellungen ein:

Schriftfamilie: Archer
Größe: 13pt
Gewicht: Mittel
Anti-Aliasing-Einstellung: Crisp
Farbe: #ffffff
Kerning: Metriken
Verfolgung: 50

Wenden Sie dann gemäß der folgenden Abbildung einen Schlagschatten darauf an:

Und schließlich geben Sie eine kleine Navigation mit den gleichen Zeicheneinstellungen und Schlagschatten-Einstellungen wie oben erwähnt ein.

Abschluss

Das ist es, Leute! Wir sind mit unserem Website-Interface-Design fertig. Ich hoffe wirklich, dass Sie dieses Tutorial nützlich fanden. Und wenn Sie Kommentare haben, hinterlassen Sie diese bitte unten und wir werden darauf achten, darauf zu antworten. Vergessen Sie auch nicht, sich den Folgeteil anzusehen, wie Sie dieses Design live bringen können!