Das Gestalten ansprechender, sauberer und funktionaler Web-Layouts ist ein wesentlicher Bestandteil des Lebens eines Webdesigners. In diesem Tutorial erstellen wir ein sauberes und professionelles Web-Layout in Photoshop von Grund auf. Dabei lernen Sie nützliche Methoden zur Gestaltung kennen. Fangen wir an!
Vorschau der Endergebnisse
Diese Vorschau zeigt, was Sie am Ende dieses Tutorials erreichen werden: ein professionell gestaltetes Web-Layout.
Erstellen eines professionellen Web-Layouts: Photoshop-Tutorial
Ressourcen
Für dieses Tutorial benötigen Sie nur Adobe Photoshop.
Schritt 1: Mockup
Bevor wir mit der Gestaltung beginnen, müssen wir die Anforderungen, das Aussehen und die Funktionalität planen. Anschließend müssen wir diese Ideen in ein Layout integrieren, um sie visuell umzusetzen. Mockups und Wireframes sind äußerst nützlich für die Erstellung von flexiblen Layouts. Dies ist eine bewährte Methode und wird in der Branche dringend empfohlen.
Ich habe das folgende Mockup nur mit Grautönen erstellt. Auf diese Weise eliminieren wir zu diesem Zeitpunkt Farben aus der Szene, damit wir uns auf das Layout als Ganzes konzentrieren und uns nicht mit Farben herumärgern müssen. Das gibt viel Freiheit, Dinge schnell zu ändern und neu anzuordnen. Ein Mockup kann so detailliert sein, wie Sie möchten. Zu diesem Zweck werde ich mich für das folgende entscheiden und kurz das Layout definieren und festlegen, was wohin kommt.
img(1a)
Schritt 2: Einrichten der Arbeitsfläche
Nachdem wir einen Bauplan für unser Layout haben, ist es an der Zeit, mit der eigentlichen Gestaltung zu beginnen! Wir werden ein 960 Pixel breites Layout erstellen. Öffnen Sie ein neues Dokument mit den Maßen 1200 x 1500 Pixel.
img(1)Da es sich um ein 960 Pixel breites Layout handelt, müssen wir den Arbeitsbereich durch Hinzufügen von Hilfslinien definieren. Drücken Sie **Strg+A**, um das gesamte Dokument auszuwählen.
Gehen Sie zu Auswahl > Auswahl transformieren. Verkleinern Sie die Auswahl auf 960 Pixel Breite. Dies ist der Arbeitsbereich des Layouts.
img(3)Fügen Sie Hilfslinien zur Auswahl hinzu.
img(4)Wir müssen etwas Abstand zwischen dem Rand und dem Inhalt schaffen, den wir später hinzufügen werden! Wählen Sie mit aktiver Auswahl erneut Auswahl transformieren. Ändern Sie die Größe der Auswahl auf 920 Pixel Breite. Das bedeutet 20 Pixel Abstand auf jeder Seite, insgesamt 40 Pixel Abstand.
img(5)Fügen Sie dem ausgewählten Bereich Hilfslinien hinzu.
img(6)
Schritt 3: Erstellen des Headers
Beginnen wir mit der Erstellung des Headers des Layouts! Erstellen Sie eine Auswahl, die 465 Pixel hoch ist.
img(8)Füllen Sie die Auswahl zunächst mit einem Grauwert und verwenden Sie später die Ebenenstile, um Farben und Verläufe hinzuzufügen. Befolgen Sie diesen Ansatz während des gesamten Designs, um eine visuelle Hierarchie beizubehalten. [Webdesign-Tutorial Photoshop](https://de.viettopreview.vn/web-design-tutorial-photoshop/)
img(9)Fügen Sie dem Header einen Verlauf hinzu. Doppelklicken Sie auf die Miniaturansicht der Ebene. Wählen Sie Verlauflänge. Erstellen Sie den folgenden 2-Farben-Verlauf. Verwenden Sie die angegebenen Einstellungen.
Um ein konsistentes Design zu gewährleisten und die Flexibilität bei der Farbgestaltung zu erhöhen, ist es ratsam, mit Graustufen zu beginnen, bevor Sie Farben und Verläufe hinzufügen.
Seiten: 1(https://www.photoshoptutorials.ws/photoshop-tutorials/how-to-create-a-professional-web-layout-in-photoshop/2/)(https://www.photoshoptutorials.ws/photoshop-tutorials/how-to-create-a-professional-web-layout-in-photoshop/3/)(https://www.photoshoptutorials.ws/photoshop-tutorials/how-to-create-a-professional-web-layout-in-photoshop/4/)