Die Gestaltung ansprechender und funktionaler Web-Layouts ist ein wesentlicher Bestandteil des Lebens eines Webdesigners. In diesem Tutorial erstellen wir ein klares und professionelles Web-Layout von Grund auf in Photoshop. Dabei lernen Sie nützliche Methoden zur Gestaltung kennen. Legen wir los!
Beispiel eines professionellen Web-Layouts in Photoshop
Schritt 1: Konzeption und Wireframing
Bevor wir mit der Gestaltung beginnen, ist es wichtig, die Anforderungen, das Erscheinungsbild und die Funktionalität zu planen. Anschließend müssen diese Ideen in einem Layout visualisiert werden. Mockups und Wireframes sind äußerst nützlich, um flexible Layouts zu erstellen. Dies ist eine bewährte Methode und wird in der Branche dringend empfohlen.
Für dieses Beispiel wurde ein einfaches Wireframe nur mit Grautönen erstellt. Dadurch wird die Farbe zunächst ausgeblendet, sodass wir uns auf das gesamte Layout konzentrieren und uns nicht mit Farbdetails verzetteln. Dies bietet große Freiheit, Elemente schnell zu ändern und neu anzuordnen. Ein Mockup kann so detailliert sein, wie Sie es wünschen. Dieses dient als Blaupause und definiert grob das Layout und die Platzierung der Elemente.
Ein einfaches Wireframe-Layout mit Grautönen
Schritt 2: Einrichten der Arbeitsfläche (Canvas)
Nun, da wir eine Blaupause für unser Layout haben, geht es an die eigentliche Gestaltung! Wir erstellen ein Layout mit einer Breite von 960 Pixeln. Erstellen Sie ein neues Dokument mit den Maßen 1200 x 1500 Pixel.
Neues Dokument in Photoshop mit 1200×1500 Pixel
Da es sich um ein 960 Pixel breites Layout handelt, müssen wir den Arbeitsbereich mit Hilfslinien definieren. Drücken Sie Strg+A, um das gesamte Dokument auszuwählen.
Gesamtes Dokument in Photoshop ausgewählt
Gehen Sie zu “Auswahl” > “Auswahl transformieren”. Verkleinern Sie die Auswahl auf 960 Pixel Breite. Dies ist unser Arbeitsbereich für das Layout.
Auswahl auf 960 Pixel Breite reduziert
Fügen Sie der Auswahl Hilfslinien hinzu.
Hilfslinien zur Markierung des 960px Arbeitsbereichs
Wir benötigen einen Innenabstand (Padding) zwischen dem Rand und den Inhalten, die wir später hinzufügen werden. Wählen Sie bei aktiver Auswahl erneut “Auswahl transformieren”. Ändern Sie die Größe der Auswahl auf 920 Pixel Breite. Das bedeutet 20 Pixel Abstand auf jeder Seite, was insgesamt 40 Pixel Abstand ergibt.
Auswahl auf 920 Pixel Breite für Innenabstand reduziert
Fügen Sie der Auswahl weitere Hilfslinien hinzu, um diesen Innenabstand zu definieren.
Hilfslinien für den Innenabstand hinzugefügt
Schritt 3: Gestaltung des Headers
Beginnen wir mit der Gestaltung des Headers für unser Layout. Erstellen Sie eine Auswahl mit einer Höhe von 465 Pixeln.
Header-Bereich mit 465 Pixel Höhe ausgewählt
Füllen Sie die Auswahl zunächst mit einem Grauton. Verwenden Sie später die Ebenenstile, um Farben und Verläufe hinzuzufügen. Beachten Sie diesen Prozess während des gesamten Designs, um eine visuelle Hierarchie beizubehalten.
Header mit Grauton gefüllt
Fügen Sie dem Header einen Verlauf hinzu. Doppelklicken Sie auf das Ebenen-Miniaturbild. Wählen Sie “Verlaufsüberlagerung” (Gradient Overlay). Erstellen Sie den folgenden zweifarbigen Verlauf und verwenden Sie die angegebenen Einstellungen.
Dies ist der Beginn eines professionellen Web-Layouts. Um fortzufahren und das vollständige Design zu erstellen, besuchen Sie bitte die nächsten Seiten des Tutorials. Die fortgeschrittenen Schritte führen Sie durch die Erstellung weiterer Elemente wie Navigation, Inhaltsbereiche und Footer, alles optimiert für ein klares und funktionales Ergebnis.