Viele angehende Webdesigner stellen sich die Frage: Kann man eine komplette Website in Photoshop erstellen? Während Photoshop ein unglaublich mächtiges Werkzeug ist, liegt seine Hauptstärke im Bereich des visuellen Designs und der Bildbearbeitung, nicht im Programmieren oder Erstellen interaktiver Webseiten. Dieser Artikel, basierend auf einem detaillierten Tutorial, zeigt Ihnen, wie Sie Photoshop nutzen können, um ein beeindruckendes, sauberes und professionelles *Layout* für eine Website zu entwerfen. Es handelt sich hierbei um den ersten Schritt – die visuelle Blaupause.
Das Ziel dieses Tutorials ist es, Ihnen die Erstellung eines ansprechenden Website-Layouts in Photoshop zu vermitteln, das sowohl für persönliche als auch für Unternehmenswebseiten genutzt werden kann. Dieses Design ist auf Benutzerfreundlichkeit ausgelegt und soll die Reputation Ihrer zukünftigen Website positiv beeinflussen. Beachten Sie, dass dies der erste Teil einer Serie ist, die sich auf die Erstellung des Layouts in Photoshop konzentriert. Ein möglicher zweiter Teil würde die Umwandlung dieses Designs in standardkonformes (X)HTML behandeln.
Vorbereitung Ihres Photoshop-Dokuments
Der erste und entscheidende Schritt beim Erstellen eines Webdesigns in Photoshop ist die korrekte Einrichtung Ihres Arbeitsbereichs. Da Webseiten auf Pixeln basieren, ist es unerlässlich, dass auch Ihr Photoshop-Dokument in dieser Einheit arbeitet. Beginnen Sie damit, ein neues Dokument zu erstellen. Die empfohlenen Einstellungen für dieses spezielle Layout sind eine Breite von 1200 Pixeln und eine Höhe von 1600 Pixeln. Stellen Sie sicher, dass die Auflösung auf 72 Pixel/Zoll eingestellt ist, was der Standard für Webgrafiken ist.
Ebenso wichtig ist die korrekte Einstellung der Einheiten und Lineale in Ihren Photoshop-Voreinstellungen. Öffnen Sie das Dialogfeld Voreinstellungen (Strg/Cmd + K), wählen Sie "Einheiten & Lineale" und stellen Sie sicher, dass die Einheiten für Lineale auf "Pixel" eingestellt sind. Dies gewährleistet, dass alle Maße, die Sie verwenden, pixelgenau sind.
Arbeiten mit Hilfslinien für Struktur und Präzision
Hilfslinien sind im Webdesign-Layoutprozess in Photoshop von unschätzbarem Wert. Sie helfen dabei, eine konsistente Struktur zu schaffen und Elemente präzise zu positionieren. Aktivieren Sie die Lineale (Ansicht > Lineale oder Strg/Cmd + R) und das Info-Bedienfeld (Fenster > Info oder F8). Das Info-Bedienfeld liefert nützliche Informationen, insbesondere wenn Sie Auswahlwerkzeuge verwenden.
Um den Inhaltsbereich zu definieren, ziehen Sie Hilfslinien von den Linealen. Für dieses Layout wird ein Inhaltsbereich mit einem Abstand von 120 Pixeln vom linken und rechten Rand des Dokuments festgelegt. Verwenden Sie das Rechteck-Auswahlwerkzeug (M), um eine 120 Pixel breite Auswahl vom linken Rand zu erstellen. Ziehen Sie dann eine Hilfslinie an den rechten Rand dieser Auswahl. Wiederholen Sie diesen Vorgang auf der rechten Seite des Dokuments. Ihr Dokument sollte nun Hilfslinien haben, die einen zentralen Bereich von 960 Pixeln Breite definieren, was eine gängige Breite für nicht-responsive oder ältere Layouts war.
Erstellung des Logos
Das Logo ist ein zentraler Bestandteil des Website-Designs. In diesem Tutorial wird ein einfaches, aber effektives Logo mit einem Farbverlaufseffekt erstellt. Es ist ratsam, alle zusammengehörigen Ebenen in einer Gruppe zu organisieren. Erstellen Sie eine neue Gruppe (Ebene > Neu > Gruppe) und benennen Sie diese "logo".
Verwenden Sie das Horizontale Textwerkzeug (T), um den gewünschten Text (z.B. "SMASHING Dzine") einzugeben. Für den ersten Teil des Logos ("SMASHING") wird die Schriftart Arial, Stil Bold, Größe 42pt verwendet. Die Farbe ist ein dunkles Grau (#101112). Ein Verlauf-Overlay Ebenenstil wird angewendet, um dem Text Tiefe zu verleihen. Der zweite Teil des Logos ("Dzine") wird als separate Textebene erstellt, ebenfalls mit Arial Bold 42pt, aber mit einem anderen Farbverlauf (von #b27625 zu #e5ad27).
Positionieren Sie die Textebenen präzise mithilfe des Verschieben-Werkzeugs (V) und der Pfeiltasten, basierend auf den zuvor gesetzten Hilfslinien und Abständen vom oberen Rand (z.B. 35px vom oberen Rand und 0px von der linken Hilfslinie). Fügen Sie eine untergeordnete Tagline mit kleinerer Schriftgröße und anderer Farbe hinzu, um das Logo zu vervollständigen.
Entwurf der Navigationsleiste
Die Navigationsleiste ermöglicht den Benutzern, durch die Website zu navigieren. Erstellen Sie eine neue Gruppe namens "navigation", die sich über der "logo"-Gruppe befindet, um Ordnung zu halten. Ziehen Sie eine Hilfslinie vom oberen Lineal, um die Unterkante der Navigationsleiste zu markieren (z.B. 150px vom oberen Rand).
Eine horizontale Linie am unteren Rand der Navigation dient als visuelles Trennelement. Verwenden Sie das Rechteck-Werkzeug (U), um eine schmale Linie (z.B. 4px hoch) über die gesamte Breite des Dokuments mit einer Akzentfarbe (#e3ab27) zu zeichnen.
Die Navigationselemente (Links wie "Home", "About", "Services") werden als Textebenen hinzugefügt. Positionieren Sie diese mit einem angemessenen Abstand zur linken Hilfslinie und der horizontalen Linie. Für den "Hover"-Zustand eines Navigationselements (wie es aussehen soll, wenn der Mauszeiger darüber fährt), wird ein abgerundetes Rechteck erstellt. Verwenden Sie das Abgerundetes Rechteck-Werkzeug (U) mit einem kleinen Radius. Passen Sie die Form an, um die unteren Ecken gerade zu machen, und wenden Sie einen Verlauf-Overlay Ebenenstil an (z.B. von #e5ad27 zu #b27625). Die Textfarbe des "Home"-Links im Hover-Zustand wird auf Weiß (#ffffff) geändert.
Der "Rufen Sie uns an" Bereich
Ein "Rufen Sie uns an"-Bereich in der oberen rechten Ecke des Layouts bietet eine schnelle Kontaktmöglichkeit. Dieser Bereich befindet sich gegenüber dem Logo. Er besteht typischerweise aus einem kleinen Symbol und den Kontaktdaten.
Fügen Sie ein Telefonsymbol in der Nähe der rechten Hilfslinie ein. Verwenden Sie das Horizontale Textwerkzeug (T), um die Telefonnummer in einer gut lesbaren Schriftart (z.B. Arial, 20pt, Farbe #292929) links neben dem Symbol zu platzieren. Fügen Sie darunter zusätzlichen Text (z.B. "Call us toll free") in einer kleineren Schriftart (z.B. Arial Bold, 11pt, Farbe #595959) hinzu.
Gestaltung des Headers
Der Header ist oft der erste große visuelle Bereich, den Besucher sehen. Erstellen Sie eine neue Gruppe namens "header". Der Header-Hintergrund wird durch ein großes Rechteck definiert. Verwenden Sie das Rechteck-Werkzeug (U), um ein Rechteck zu erstellen, das sich über die gesamte Breite des Dokuments erstreckt (1200px) und eine bestimmte Höhe hat (z.B. 440px). Positionieren Sie es knapp unterhalb der Navigationsleiste.
Wenden Sie auf diese Hintergrundebene ("header bg") einen Verlauf-Overlay Ebenenstil an. Die Farben können je nach gewünschter Stimmung variieren (z.B. von #2e2226 zu #7a7556). Innerhalb dieses Headers wird ein Container für den Hauptinhalt des Headers erstellt. Ein weiteres Rechteck (z.B. 960px mal 360px) wird innerhalb des Hintergrundrechtecks positioniert, ausgerichtet an den linken und rechten Hilfslinien des Inhaltsbereichs und mit einem Abstand vom oberen Rand des Headers.
Der Bereich "Featured Project"
Ein hervorgehobenes Projekt oder Element im Header zieht die Aufmerksamkeit auf sich. Erstellen Sie eine Untergruppe namens "fp" innerhalb der "header"-Gruppe. Innerhalb des "header container" Rechtecks wird ein weiteres Rechteck als Container für das Bild des Featured Projects erstellt (z.B. 630px mal 340px), positioniert mit einem kleinen Abstand vom oberen und linken Rand des Containers.
Um ein Bild in diesen Container einzufügen, öffnen Sie das Bild in Photoshop, kopieren Sie es und fügen Sie es über der Container-Ebene ein. Verwenden Sie eine Schnittmaske (Rechtsklick auf die Bildebene > Schnittmaske erstellen), damit das Bild nur innerhalb der Form des "fp container" sichtbar ist. Passen Sie die Größe und Position des Bildes an. Ein leichter Drehwinkel (-4 Grad) kann dem Design eine dynamische Note verleihen. Der Füllmethode "Luminosity" kann angewendet werden, um das Bild visuell anzupassen.
Unter dem Bild wird ein Bereich für Titel und Beschreibung erstellt. Ein Rechteck (z.B. 630px mal 90px) mit dunkler Farbe (#161718) und reduzierter Deckkraft (90%) dient als Hintergrund für diesen Text. Eine dünne horizontale Linie (1px hoch, Farbe #9c9c9c) kann am oberen Rand dieses Titelbereichs hinzugefügt werden. Fügen Sie den Titel (z.B. Arial, 25pt, Weiß) und die Beschreibung (z.B. Arial, 12pt, Hellgrau) als Textebenen innerhalb dieses Bereichs hinzu.
Der "Quick Quote" Bereich
Ein "Quick Quote"-Bereich bietet Benutzern eine schnelle Möglichkeit, Informationen anzufordern. Erstellen Sie eine weitere Untergruppe namens "quick quote" innerhalb der "header"-Gruppe. Dieser Bereich wird rechts vom "Featured Project" positioniert und hat eine eigene Containerform (z.B. 300px mal 340px).
Um ein konsistentes Design zu gewährleisten, können Sie Ebenenstile von anderen Elementen kopieren und einfügen. Kopieren Sie den Verlauf-Overlay Stil vom "hover"-Zustand der Navigation und fügen Sie ihn auf die "qq container"-Ebene ein. Fügen Sie den Titel "Quick Quote" (z.B. Trebuchet MS, Weiß) hinzu.
Formularfelder für Name, E-Mail und Nachricht werden als visuelle Elemente dargestellt. Verwenden Sie das Abgerundetes Rechteck-Werkzeug (U) mit einem kleinen Radius (3px) und weißer Füllung, um die Felder zu zeichnen (zwei kleinere, ein größeres). Fügen Sie Labels (Textebenen) für jedes Feld hinzu. Ein "Submit"-Button wird ebenfalls als abgerundetes Rechteck erstellt (z.B. 80px mal 35px) und mit einem Verlauf versehen. Der Text "Submit" wird darüber platziert und zentriert.
Erstellung des Hauptinhaltsbereichs
Der Hauptinhaltsbereich enthält den Kern der Website-Informationen. Erstellen Sie eine neue Gruppe namens "content". Dieser Bereich wird unterhalb des Headers positioniert (z.B. 30px Abstand). Für dieses Layout wird der Inhaltsbereich in drei Spalten unterteilt.
Erstellen Sie zunächst das erste Inhaltsfeld als Rechteck (z.B. 300px mal 175px) und positionieren Sie es an der linken Hilfslinie. Wenden Sie einen Ebenenstil an, um ihm ein bestimmtes Aussehen zu geben. Fügen Sie den Titel hinzu (z.B. "About SmashingDzine"), wobei Sie unterschiedliche Farben für einzelne Wörter verwenden können, um bestimmte Begriffe hervorzuheben. Fügen Sie eine kurze Beschreibung und einen Link-Text hinzu (z.B. "Read More"), jeweils mit passenden Schriftarten, Größen und Farben.
Neben der Beschreibung wird ein Platzhalter für ein Bild oder Symbol erstellt. Dies kann ein weißes Quadrat mit einem grauen Rahmen sein. Verwenden Sie das Rechteck-Werkzeug (U), um ein Quadrat zu erstellen, und fügen Sie einen "Kontur"-Ebenenstil hinzu. Innerhalb dieses Rahmens wird ein kleineres graues Quadrat platziert, das den Bildplatzhalter darstellt.
Fassen Sie alle Ebenen für dieses erste Inhaltsfeld in einer Gruppe zusammen (z.B. "about"). Duplizieren Sie diese Gruppe zweimal und benennen Sie die neuen Gruppen "services" und "portfolio". Positionieren Sie die letzte Gruppe ("portfolio") an der rechten Hilfslinie des Inhaltsbereichs. Wählen Sie alle drei Gruppen aus und verwenden Sie die Funktion "Horizontal verteilen - Mitte" (Ebene > Verteilen), um sie gleichmäßig im Inhaltsbereich zu positionieren. Passen Sie die Titel und Texte der duplizierten Gruppen entsprechend an ("Our Services", "Our Portfolio").
Gestaltung des Footers
Der Footer befindet sich am unteren Ende der Webseite und enthält oft Copyright-Informationen und zusätzliche Links. Erstellen Sie eine neue Gruppe namens "footer". Zeichnen Sie ein Rechteck (z.B. 1200px mal 100px) am unteren Rand des Dokuments.
Um ein einheitliches Design zu erzielen, kopieren Sie den Ebenenstil (Verlauf-Overlay) des "header bg"-Rechtecks und fügen Sie ihn auf die "footer bg"-Ebene ein. Fügen Sie den Copyright-Text und eventuelle Footer-Links als Textebenen hinzu. Eine graue Farbe (#dddddd) und eine kleine Schriftgröße (z.B. Arial, 12pt) sind hierfür passend.
Im rechten Bereich des Footers kann ein Bereich für die E-Mail-Anmeldung platziert werden. Erstellen Sie eine Untergruppe "subscribe". Ähnlich wie beim "Quick Quote"-Bereich werden hier visuelle Darstellungen eines Formularfelds und eines Buttons erstellt. Verwenden Sie das Abgerundetes Rechteck-Werkzeug für das E-Mail-Feld (z.B. 210px mal 35px, weiß) und den "Subscribe"-Button (z.B. 85px mal 35px). Der Button erhält einen Verlauf-Ebenenstil, und der Text "Subscribe" wird darauf platziert und zentriert.
Die Rolle von Photoshop im Webdesign: Layouts, nicht Code
Nachdem Sie all diese Schritte durchgeführt haben, haben Sie ein vollständiges visuelles Layout Ihrer Website in Photoshop erstellt. Dieses PSD-Dokument dient als detaillierte Blaupause für das endgültige Design. Es ist wichtig zu verstehen, dass dies noch keine funktionierende Webseite ist. Photoshop erzeugt Bilder (im PSD-Format), keinen ausführbaren Code (HTML, CSS, JavaScript).
Wofür ist Photoshop im Webdesign also am besten geeignet? Es ist hervorragend für die Erstellung von:
- Detaillierten visuellen Konzepten: Sie können pixelgenaue Entwürfe erstellen und schnell verschiedene Designideen ausprobieren.
- Grafischen Elementen: Logos, Icons, Banner, Hintergrundbilder und andere grafische Assets lassen sich in Photoshop erstellen oder bearbeiten.
- Statischen Prototypen: Das Layout zeigt, wie die Seite aussehen soll, bevor die eigentliche Entwicklung beginnt.
Was sind die Grenzen der Nutzung von Photoshop für das gesamte Webdesign?
- Kein Code-Output: Sie müssen das Design manuell in HTML und CSS übersetzen.
- Nicht nativ responsiv: Photoshop-Layouts sind standardmäßig statisch und nicht darauf ausgelegt, sich an verschiedene Bildschirmgrößen anzupassen. Das Design muss für verschiedene Geräte separat geplant oder die Responsivität muss beim Codieren umgesetzt werden.
- Keine Interaktivität: Hover-Effekte, Dropdown-Menüs oder Formularfunktionen können nur visuell dargestellt, aber nicht getestet werden.
- Schwierigkeiten bei der Zusammenarbeit: Für Entwickler ist es oft einfacher, mit Design-Tools zu arbeiten, die sich stärker auf Code-Übergaben konzentrieren.
Fazit
Sie haben erfolgreich ein sauberes und professionelles Website-Layout in Photoshop erstellt. Dieses Layout ist eine solide Grundlage für die Entwicklung einer benutzerfreundlichen Website, die sich gut für kleinere Projekte eignen könnte. Denken Sie daran, dass die Optimierung von Bildern für die Webnutzung (Reduzierung der Dateigröße) ein entscheidender Schritt ist, bevor die Bilder in eine echte Website integriert werden. Das in Photoshop erstellte Layout ist der erste Schritt; die Umwandlung in funktionierenden Code ist der nächste und notwendige Prozess, um Ihre visuelle Idee in eine lebendige Website zu verwandeln.
Hat dich der Artikel Webdesign in Photoshop: Visuelles Layout interessiert? Schau auch in die Kategorie Ogólny rein – dort findest du mehr ähnliche Inhalte!