Bei der Erstellung einer Website ist die Phase des Renderns des Seitendesigns sehr wichtig, das anschließend gesetzt und im Netzwerk veröffentlicht wird. In diesem Artikel erfahren Sie, wie Sie mit Adobe Photoshop ein kompetentes Layout für eine Website zeichnen, auf dessen Grundlage Sie später komplexere Layouts erstellen können.
Es ist notwendig
Adobe Photoshop-Programm
Anleitung
Schritt 1
Erstellen Sie in Photoshop (Strg + N) eine neue Datei mit den Abmessungen 1040x1400, wobei 1400 die Höhe ist. Schalten Sie die Anzeige von Linealen ein (Strg + R) und legen Sie Pixel als Maßeinheiten in den Linealeinstellungen fest.
Schritt 2
Beginnen Sie, die Hilfslinien so zu dehnen, dass sie an die Ränder der Layoutboxen passen. Dehnen Sie die Seitenränder so, dass bis zu den Rändern 40 Pixel verbleiben. Die oberen und unteren Ränder sollten ebenfalls 40 Pixel auf jeder Seite bis zu den Rändern des Hintergrunds belassen.
Schritt 3
Wählen Sie dann für die obere Kopfzeile eine Hilfslinie aus, die 200 Pixel vom oberen Rand des Hintergrunds entfernt ist.
Schritt 4
Um die Seitenleisten links und rechts des Layouts zu bilden, setzen Sie die Hilfslinien 240 Pixel vom Hintergrundrand nach links und 800 nach rechts.
Schritt 5
5px von der linken und rechten Seitenleiste nach innen und zeichnen Sie zwei weitere vertikale Hilfslinien. Ziehen Sie dann zwei weitere Hilfslinien 245 px nach links und 795 px nach rechts.
Schritt 6
Messen Sie nun vom Rand der Kopfzeile 30px und zeichnen Sie eine horizontale Hilfslinie für das horizontale Menü.
Schritt 7
Wählen Sie mit der M-Taste den schmalen Bereich des horizontalen Menüs aus, den Sie gerade mit einer rechteckigen Auswahl markiert haben. Wählen Sie das Füllwerkzeug aus und füllen Sie den Bereich mit einer neutralen hellgrauen Farbe.
Schritt 8
Wählen Sie das Füllwerkzeug aus und füllen Sie den Bereich mit einer neutralen hellgrauen Farbe. Klicken Sie auf das Menü "Auswählen-Ändern-Komprimieren", geben Sie eine 1-Pixel-Option an und klicken Sie auf "OK". Füllen Sie den Bereich mit einem helleren Grauton - Sie erhalten einen Menürahmen.
Schritt 9
Erstellen Sie eine neue Ebene, wählen Sie ein geeignetes Bild für das Site-Symbol oder Logo aus und öffnen Sie es dann.
Schritt 10
Fügen Sie ein Bild auf einer neuen Ebene in der Kopfzeile ein und platzieren Sie es am linken Rand. Schreiben Sie rechts neben dem Bild den Texttitel der Site in einer beliebigen Schriftart.
Schritt 11
Gestalten Sie Ihre Website-Blöcke im gleichen Farbschema wie den neu erstellten Header. Wählen Sie den Bereich der linken Seitenleiste aus und führen Sie die gleichen zweifarbigen Füllvorgänge wie beim Menüblock aus.
Schritt 12
Machen Sie dasselbe mit dem mittleren Inhaltsblock. Kopieren Sie die linke Seitenleistenebene und platzieren Sie sie als rechte Seitenleiste.
Schritt 13
Fügen Sie Ihrem Layout Text hinzu - wählen Sie eine neutrale Schriftart und füllen Sie die Menütitel, Nachrichtenbeispiele, Fotos, Tags und Links aus.
Schritt 14
Beenden Sie das Layout, indem Sie eine "Fußzeile" oder Fußzeile erstellen - tragen Sie dort Ihre Urheberrechte und Ihre Kontakte ein.
