In diesem Photoshop-Webdesign-Tutorial werden wir ein sauberes, sauberes und professionelles Website-Layout in Photoshop entwerfen. Das Layout, das wir in diesem Tutorial machen, kann als persönliches oder Unternehmensweb-Site-Design verwendet werden. Dieses Design ist ziemlich benutzerfreundlich, daher sollte es für den Ruf Ihrer Website großartig sein.
Aktualisieren: Dies ist der erste Teil einer zweiteiligen Serie, in der Sie lernen, wie Sie das Layout in Photoshop erstellen und dann in ein standardkonformes (X) HTML-Webdesign konvertieren.
Die Serie „Sauberes und professionelles Webdesign“
- Teil 1: Erstellen Sie ein sauberes und professionelles Webdesign in Photoshop
- Teil 2: Erstellen Sie ein sauberes und professionelles Webdesign
Endgültige Vorschau
Schauen Sie sich das Layout an, das wir in diesem Tutorial erstellen werden. Sie können die endgültige Vorschau des Bildes unten sehen oder hier klicken, um eine Version in voller Größe zu erhalten. 
Bereiten Sie Ihr Photoshop-Dokument vor
1 Erstellen Sie ein neues Dokument in Photoshop (Strg / Cmd + N) mit den Einstellungen aus dem folgenden Bild.
Stellen Sie die Einstellungen für Einheiten und Lineale ein
2 Stellen Sie sicher, dass Sie in Pixeleinheiten arbeiten, der standardmäßigen festen Einheit für Webdesign.
Richten Sie die folgenden Einstellungen für Ihre Lineale im Dialogfenster Einstellungen ein (Strg / Cmd + K); Klicken Sie auf Einheiten & Lineale und stellen Sie sicher, dass Sie alles wie in der Abbildung unten gezeigt eingestellt haben. 
Fügen Sie Hilfslinien hinzu, um den Inhaltsbereich festzulegen
3 Aktivieren Sie Photoshop-Lineale aus der Ansicht > Lineale.
Schaltet die Sichtbarkeit der Lineale durch Drücken von „Strg/Cmd + R“ um.
Öffnen Sie auch das Info-Panel im Fenster > Info (Tastenkombination: F8).
Das Infopanel gibt nützliche Informationen abhängig vom gewählten Werkzeug.
Wählen Sie durch Drücken von „M“ das rechteckige Auswahlwerkzeug und erstellen Sie ein Feld mit einer Breite von 120 Pixel in der linken Ecke der Leinwand. Sie können die Größe anpassen, indem Sie während der Auswahl in das Infofeld schauen.
Klicken Sie nun auf das linke Lineal und ziehen Sie eine Hilfslinie wie im Bild unten gezeigt rechts neben die Auswahl des Rahmens. 
4 Verschieben Sie diese Auswahl an den rechten Rand der Leinwand. Weisen Sie der linken Seite der Auswahl eine weitere Hilfslinie zu.
Ihre Leinwand sollte jetzt so aussehen: 
Erstellen des Logos
5 Jetzt erstellen wir das Logo für unsere Website.
Das Logo wird sehr einfach sein und einen Farbverlaufseffekt haben. Erstellen Sie eine neue Gruppe (Layer > New > Group) und nennen Sie sie „logo“.
6 Wählen Sie das horizontale Textwerkzeug (T) und geben Sie “
7 Stellen Sie dann im Zeichenfeld die Schriftart auf Arial, den Stil auf Fett und die Größe auf 42pt ein. Stellen Sie auch die Option Anti-Aliasing-Methode auf Scharf und verwenden Sie die Farbe #101112.
Sie können diese Optionen auch in der Optionsleiste festlegen, wenn das Typwerkzeug das aktive Werkzeug ist. 
8 Doppelklicken Sie, um das Dialogfeld Ebenenstil zu öffnen. Wählen Sie Verlaufsüberlagerung, klicken Sie auf den Verlaufseditor und verwenden Sie die Einstellungen wie unten gezeigt.
9 Platzieren Sie die Ebene vom Typ „ZERSCHLAGUNG“ im Abstand von 35 Pixel von der oberen und 0 Pixel von der linken Hilfslinie. Sie können dies genau mit dem Verschieben-Werkzeug (V) und den Pfeiltasten tun. Duplizieren Sie diesen Typ Ebene (Ebene > Ebene duplizieren).
Verschiebe die duplizierte Ebene direkt neben das Wort „ZERSCHLAGUNG“ und bearbeite den Text in „Dzine“. Wiederholen Sie die Schritte 6, 7, 8, verwenden Sie jedoch unterschiedliche Verlaufsfarben (linker Farbstopp: #b27625, rechter Farbstopp: #e5ad27) für das Wort „Dzine“.
10 Wählen Sie das horizontale Typenwerkzeug (T) und fügen Sie unter dem Logo eine Tag-Zeile mit den folgenden Einstellungen hinzu. 
11 Das endgültige Logo sollte wie das Bild unten aussehen.
Um die Hilfslinien zu aktivieren/deaktivieren, gehen Sie zu View > Show > Grid oder verwenden Sie die Tastenkombination Strg/Cmd + ; 
Erstellen der Navigationsleiste
12 Erstellen Sie eine neue Gruppe und nennen Sie sie „Navigation“. Ziehen Sie eine Hilfslinie aus dem oberen Lineal, 150px unter dem oberen Rand der Leinwand. Wählen Sie das Rechteck-Werkzeug (U) und zeichnen Sie eine horizontale Linie von 4px Höhe mit der Farbe #e3ab27 über die Leinwand.
13 Fügen Sie Navigationslinks in einer Höhe von 12 Pixel von dieser horizontalen Linie und 20 Pixel rechts von der linken Hilfslinie hinzu.
Wählen Sie das Werkzeug Abgerundetes Rechteck (U) und zeichnen Sie eine Box mit der Größe 72 x 35 Pixel. Verschieben Sie diese Ebene unter die Textlinks und nennen Sie die Ebene „Hover“.
Begradigen Sie die unteren abgerundeten Ecken mit dem Werkzeug Punkt umwandeln. Bewegen Sie die Seiten unebener Kanten mit einem Rand von 8 Pixel nach unten, damit die Kanten den anderen inneren Kanten unten entsprechen.
Doppelklicken Sie auf die Ebene „hover“, um das Dialogfeld Ebenenstil zu öffnen und Verlaufsfarben hinzuzufügen (linker Farbstopp: #e5ad27, rechter Farbstopp: #b27625). Wählen Sie das horizontale Textwerkzeug (T), wählen Sie den Text „Home“ und ändern Sie die Farbe in #ffffff (weiß). 
Erstellen des Abschnitts „Rufen Sie uns an“
14 Als nächstes erstellen wir den Abschnitt „Rufen Sie uns an“ oben rechts in unserem Design (genau gegenüber dem Logo).
Laden Sie dieses Telefonsymbol herunter und platzieren Sie es in der Nähe der rechten Anleitung. Nennen Sie diese Ebene „Telefonsymbol“. Wählen Sie das Werkzeug Horizontaler Typ (T).
Fügen Sie links neben dem Telefonsymbol eine Telefonnummer mit der Schriftart Arial mit der Größe 20pt und der Farbe #292929 hinzu.
Fügen Sie einen verwandten Text unter der Telefonnummer hinzu, indem Sie die Schriftart Arial verwenden, die auf Fett gesetzt ist, mit einer Größe von 11pt und einer Farbe von #595959. 
Erstellen des Headers
15 Jetzt erstellen wir den Header-Abschnitt. Erstellen Sie eine neue Gruppe und nennen Sie sie „Header“.
16 Wählen Sie das Rechteckwerkzeug (U) und erstellen Sie eine Rechteckform mit der Größe 1200 x 440 Pixel.
Setzen Sie dieses Rechteck in einem Abstand von 1px unter die Navigationsleiste und nennen Sie diese Ebene „header bg“. Doppelklicken Sie auf die Ebene „Header bg“, wählen Sie den Stil der Verlaufsüberlagerungsebene aus und legen Sie diese beiden Farben im Verlaufseditor fest (linker Farbstopp: # 2e2226, rechter Farbstopp: # 7a7556).
Siehe das Bild unten für die Rechteckposition und Farben Detail. 
17 Erstellen Sie mit dem Rechteck-Werkzeug (U) ein weiteres Rechteck mit der Größe 960 x 360 Pixel.
Setzen Sie dieses Rechteck im Abstand von 40px von der Oberseite der Ebene „header bg“ und 0px von der linken Hilfslinie. Nennen Sie diese Ebene „Header Container“. Vorschau unten, was wir bisher mit dem Design gemacht haben.
Erstellen des Abschnitts „Vorgestelltes Projekt“
18 Als nächstes erstellen wir den Abschnitt „vorgestelltes Projekt“. Erstellen Sie eine neue Gruppe innerhalb der Header-Gruppe und nennen Sie sie „fp“. Wählen Sie das Rechteckwerkzeug (U) und erstellen Sie ein Rechteck mit der Größe 630 x 340 Pixel im Abstand von 10 Pixel oben und links vom Header-Container.
Geben Sie dieser Ebene die Farbe #000000 und nennen Sie sie „fp container“. 
19 Öffnen Sie ein Bild in Photoshop, um es hier als vorgestelltes Projekt zu platzieren. Wählen Sie > Alle (Strg/Cmd + A) und bearbeiten Sie > Kopieren (Strg/Cmd + C).
Kommen Sie zurück zu unserem Webdesign.
Erstellen Sie eine neue Ebene über der Ebene „fp container“ und gehen Sie zu Bearbeiten > Einfügen (Strg / Cmd + V), um Ihr vorgestelltes Projektbild einzufügen. Benennen Sie diese Ebene in „fp image“ um. Klicken Sie mit der rechten Maustaste auf die Ebene „fp-Bild“ und wählen Sie Schnittmaske erstellen.
Jetzt ist das Bild nur innerhalb des Rechtecks sichtbar („fp-Container“).
Nehmen Sie Anpassungen vor, damit Ihr vorgestelltes Projektbild dem unten gezeigten ähnelt. 
20 Gehen Sie zu Bearbeiten > Transformieren > Skalieren (Strg/Cmd + T). Klicken Sie in der Optionsleiste in das Feld Drehung, geben Sie -4 ein und drücken Sie zweimal die Eingabetaste, um den Winkel anzupassen.
Bleiben Sie auf derselben Ebene („fp-Bild“) und wählen Sie Leuchtkraft als Mischmodus dieser Ebene. 
21 Als nächstes erstellen wir die Titel- und Beschreibungsleiste für das vorgestellte Projektbild. Wählen Sie das Rechteckwerkzeug (U) und erstellen Sie eine Rechteckform mit der Größe 630 x 90 Pixel in der Farbe # 161718.
Ändern Sie die Deckkraft dieser Ebene auf 90% und nennen Sie sie „title bg“. Platzieren Sie dieses Rechteck wie im Bild unten gezeigt. 
22 Erstellen Sie ein weiteres Rechteck mit der Größe 630 x 1 Pixel in der Farbe #9c9c9c und nennen Sie es „Titel horizontale Linie“.
Platzieren Sie dieses Rechteck am oberen Rand des Inhalts der Ebene „Titel bg“.
23 Fügen Sie einen Titel und eine Beschreibung in das in Schritt 21 erstellte Rechteck ein, indem Sie die folgenden Einstellungen für Titel und Beschreibung verwenden.
Für den Titel:
- schriftart: Arial, Farbe: #ffffff, Größe: 25pt und Anti-Aliasing-Methode Option: Sharp
Für die Beschreibung:
- schriftart: Arial, Farbe: #a4a4a4, Größe: 12pt und Anti-Aliasing-Methode Option: Keine
Erstellen des Abschnitts „Quick quote“
24 Erstellen Sie eine weitere Gruppe innerhalb der Kopfgruppe und nennen Sie sie „quick quote“. Wählen Sie das Rechteckwerkzeug (U) und erstellen Sie ein Rechteck mit der Größe 300 x 340 Pixel. Platzieren Sie dieses Rechteck im Abstand von 10 pixel rechts neben dem vorgestellten Projektabschnitt und nennen Sie es „qq container“.
25 Wir kopieren einen Ebenenstil aus einer anderen Ebene, die wir in einem vorherigen Schritt erstellt haben.
Gehen Sie in die Gruppe „Navigation“, klicken Sie mit der rechten Maustaste auf die Ebene „Hover“, wählen Sie den Ebenenstil kopieren, kehren Sie zur Ebene „qq container“ zurück, klicken Sie mit der rechten Maustaste und wählen Sie Ebenenstil einfügen. Wir haben jetzt den gleichen Ebenenstil wie die „Hover“ -Ebene für unseren „qq-Container“. 
26 Wählen Sie das Werkzeug Horizontaler Typ (T).
Schreiben Sie „Quick Quote“ in „qq container“ im Abstand von 20px vom oberen und linken Rand des enthaltenden Felds. Stellen Sie die Schriftfamilie auf Trebuchet MS (oder eine web-sichere Schriftart Ihrer Wahl) mit thecolor von weiß (#ffffff) und Anti-Aliasing-Methode Option auf Sharp. Wir werden das abgerundete Rechteck-Werkzeug (U) verwenden, um drei Formularfelder zu erstellen.
Wählen Sie das Werkzeug Abgerundetes Rechteck (U) und stellen Sie den Radius auf 3px ein. Erstellen Sie dann zwei abgerundete Rechtecke mit der Größe 260 x 35 Pixel in der Farbe Weiß (#ffffff). Benennen Sie dann die Formebenen als „Feld1“ bzw. „Feld2“.
Erstellen Sie das dritte abgerundete Rechteck mit der Größe 260 x 75 Pixel in einer weißen Farbe (#ffffff) und nennen Sie es „field3“. Wählen Sie das horizontale Textwerkzeug (T) und erstellen Sie Beschriftungen für jedes Formularfeld. 
27 Wählen Sie das Werkzeug Abgerundetes Rechteck (U) und erstellen Sie eine Box mit 80 x 35 Pixel und nennen Sie sie „btn senden“.
28 Doppelklicken Sie auf die Ebene, um das Dialogfenster Ebenenstile zu öffnen, und aktivieren Sie das Kontrollkästchen Verlaufsüberlagerung von links.
Klicken Sie auf den Verlaufseditor und ändern Sie die Farben des Verlaufs wie unten gezeigt. 
29 Wählen Sie das horizontale Schriftwerkzeug (T) und geben Sie „Senden“ mit der Schriftart Arial, Stil Fett und Größe bei 13pt ein. Wählen Sie beide Ebenen im Ebenenbedienfeld aus („btn senden“ und „Text senden“).
30 Wählen Sie im Werkzeugbedienfeld das Verschieben-Werkzeug (V) und klicken Sie in der Optionsleiste auf Vertikale Mittelpunkte ausrichten und horizontale Mittelpunkte ausrichten.
(Alternativ können Sie das gleiche Ergebnis erzielen, indem Sie zu Layer > Align > Vertical Centers und Layer > Align > Horizontal Centers gehen). 
Erstellen des Hauptinhaltsbereichs
31 Erstellen Sie eine neue Gruppe und nennen Sie sie „Inhalt“. Wähle das Rechteck-Werkzeug (U).
Erstellen Sie ein Rechteck von 300 x 175 Pixel und nennen Sie es „c01“. Platzieren Sie diese Ebene 30px unter der Kopfzeile und 0px von der linken Hilfslinie. Doppelklicken Sie auf die Ebene und verwenden Sie die Einstellungen aus dem folgenden Bild.
32 Wir werden jetzt Inhalte zu dieser Box hinzufügen. Wählen Sie das horizontale Textwerkzeug (T) und fügen Sie den Text „About SmashingDzine“ hinzu. Treffen Sie eine Auswahl des Wortes „About“ mit dem horizontalen Textwerkzeug (T) und ändern Sie dann seine Farbe in #b47825.
Wählen Sie dann das Wort „Zerschlagung“ aus und ändern Sie die Farbe in #2f2f2f. Fügen Sie eine kleine Beschreibung und einen Linktext unter dem Titel hinzu. Die folgenden Optionen wurden für den Titel, die Beschreibung und den Linktext verwendet.
(Sie können diese Optionen nach Bedarf anpassen). 
Für den Titel:
- Schriftart: Trebuchet MS, Stil: Normal, Größe: 24pt, Anti-Aliasing-Methode: Sharp
Für die Beschreibung:
- Schriftart: Arial, Stil: Normal, Größe: 12pt, Anti-Aliasing-Methode: Keine, Farbe: #767676
Für den Linktext:
- Schriftart: Arial, Stil: Fett, Größe: 13pt, Anti-Aliasing-Methode: Keine, Farbe: #252525, Unterstreichen
33 Wir werden jetzt ein quadratisches Kästchen neben der Beschreibung hinzufügen. Wählen Sie das Rechteckwerkzeug (U) und die Farbe #ffffff, halten Sie die Umschalttaste gedrückt, um die Proportionen beizubehalten, und erstellen Sie ein Quadrat mit der Größe 88 x 88 Pixel. Verschieben Sie dieses Quadrat in einem Abstand von 10px von der linken Seite des Rechtecks („c01“).
Nennen Sie diese Ebene „Grenze“. Doppelklicken Sie auf die Ebene, um das Dialogfenster Ebenenstil zu öffnen, und fügen Sie einen Strich-Ebenenstil mit den folgenden Einstellungen hinzu: 
34 Erstellen Sie ein weiteres Feld mit der Größe 82 x 82 Pixel und platzieren Sie es in der Mitte der Ebene „Rahmen“. Nennen Sie diese Ebene „Box“ und ändern Sie die Farbe dieses Quadrats in #d5d5d5.
Wählen Sie alle Ebenen in dieser Gruppe aus (Gruppe „Inhalt“), gehen Sie zu Ebene > Neue > Gruppe aus Ebenen (Strg / Cmd + G) und benennen Sie diese neue Gruppe um „über“. 
Hinweis: Die innere graue quadratische Box ist ein Platzhalter für ein Bild und kann durch ein beliebiges Bild Ihrer Wahl ersetzt werden.
35 Duplizieren Sie die Gruppe „Info“ (klicken Sie mit der rechten Maustaste auf die Gruppe und wählen Sie Gruppe duplizieren) und nennen Sie sie „Dienste“. Klicken Sie mit der rechten Maustaste auf die Gruppe „Dienste“, wählen Sie die Gruppe erneut duplizieren und nennen Sie sie „Portfolio“.
Wir haben jetzt drei Gruppen („about“, „services“ und „portfolio“). Verschieben Sie die letzte Gruppe („Portfolio“) wie unten gezeigt nach rechts. 
36 Wählen Sie alle drei Gruppen im Ebenenbedienfeld aus, und gehen Sie dann zu Ebene > Horizontale Zentren verteilen >, um sie gleichmäßig zu verteilen.
Klicken Sie hier, um das Bild in voller Größe des folgenden Bildes zu sehen. 
37 Ändern Sie die Titel für die Gruppe „Services“ (Mitte) und die Gruppe „Portfolio“ (rechts) wie unten gezeigt. (Sie können diese Titel entsprechend Ihrer Anforderung ändern.) 
Fußzeile erstellen
38 Erstellen Sie eine neue Gruppe und nennen Sie sie „Fußzeile“.
Wählen Sie das Rechteck-Werkzeug (U) und erstellen Sie ein Rechteck mit der Größe von 1200 x 100 Pixel am unteren Rand unseres Design-Layouts. Nennen Sie diese Ebene „Footer bg“. Verwenden Sie denselben Verlaufsüberlagerungsstil wie die Ebene „Header bg“, indem Sie mit der rechten Maustaste auf die Ebene „Header bg“ klicken und Ebenenstil kopieren auswählen.
Gehen Sie zurück zur Fußzeilengruppe, klicken Sie mit der rechten Maustaste auf die Ebene „Fußzeile bg“ und wählen Sie Ebenenstil einfügen. 
39Wählen Sie das horizontale Schriftwerkzeug (T) und fügen Sie links Copyright-Text und Fußzeilenlinks hinzu, indem Sie die Schriftart Arial, die Größe von 12pt und eine graue Farbe (#dddddd) verwenden. 
40 Wir werden den Abschnitt E-Mail-Abonnement rechts hinzufügen.
Erstellen Sie eine neue Gruppe innerhalb der Gruppe „footer“ und nennen Sie sie „subscribe“. Wählen Sie das Werkzeug Abgerundetes Rechteck (U) und erstellen Sie ein Rechteck von 85 x 35 Pixel. Nennen Sie diese Ebene „subscribe btn“.
41 Wiederholen Sie Schritt 26, um die Formularfelder und Beschriftungen hinzuzufügen.
42 Wählen Sie das horizontale Schriftwerkzeug (T) und geben Sie „Subscribe“ mit der Schriftart Arial ein, wobei der Stil auf Fett und die Größe auf 13pt eingestellt ist.
Wählen Sie beide Ebenen aus („btn abonnieren“ und „Text abonnieren“).
43 Wiederholen Sie Schritt 28, um die Schaltfläche Abonnieren zu erstellen.
44 Wählen Sie das Werkzeug Abgerundetes Rechteck (U) und stellen Sie den Radius auf 3px ein. Erstellen Sie ein abgerundetes Rechteck mit der Größe 210 x 35 Pixel in einer weißen Farbe (#ffffff) und benennen Sie diese Formebene als „E-Mail-Feld“. Fügen Sie eine Textzeile über „E-Mail-Feld“ hinzu.
Endergebnis
OK, das war’s und wir sind fertig. Hier ist das Endergebnis.
Klicken Sie auf das Bild unten, um das Layout in voller Größe zu sehen. Danke, dass du meinem Tutorial gefolgt bist. Ich hoffe, Sie alle genossen und etwas Neues aus diesem Tutorial gelernt.
Bitte hinterlassen Sie Ihre Kommentare unten und teilen Sie Ihre Gedanken und Meinungen mit. Sie können dieses Design-Tutorial auch an Ihre Freunde weitergeben, wenn Sie der Meinung sind, dass es für sie hilfreich sein könnte!
Laden Sie die Quelldatei herunter
Sie können die Photoshop-Datei (PSD) dieses Tutorials über den folgenden Link als ZIP-Archiv herunterladen.
- clean-professional-weblayout (ZIP, 2,4 MB)
Zusammenfassung
Wenn Sie sich für dieses Design entscheiden, optimieren Sie die Bilder, um die Ladezeit zu verkürzen. Diese App sollte für kleine Websites wie einen Golfplatz geeignet sein, da sie einfach, benutzerfreundlich und benutzerfreundlich ist.
Verwandte Inhalte
- So erstellen Sie ein sauberes Blog-Design mit Photoshop
- Codierung eines sauberen Webs 2.0 Style Webdesign aus Photoshop
- Erstellen Sie ein schlankes und minimalistisches Weblayout in Photoshop
Über den Autor
Waheed Akhtar ist ein freiberuflicher Webdesigner aus Dubai, VAE. Er ist Gründer und Herausgeber von Boost Inspiration, wo er verschiedene kreative Ressourcen aus digitaler Kunst, Grafikdesign, Illustration, Fotografie und Typografie zur Inspiration präsentiert. Sie erreichen ihn über Twitter oder Facebook.