3.1 Das Basisdesign

In diesem Unterkapitel möchte ich Ihnen zeigen, wie Sie das grundlegende Design erstellen können. Dazu gehört etwa der Hintergrund der Webseite, der Inhaltsbereich und das Menü, so dass Sie anschließend die Details einarbeiten können.

Öffnen Sie zunächst ein neues Dokument mit den Maßen 1200x1000 Pixel. So haben Sie genügend Platz für die Webseite, auch wenn diese später etwa nur 980 Pixel breit sein sollte.

Der Hintergrund

Für den Hintergrund verwende ich meist einen einfachen Verlauf. So wirkt die Seite direkt lebendiger, auch wenn dieser nur sehr dezent ist. Denken Sie bei der Farbwahl unbedingt daran, dass viele Besucher mittlerweile recht große Breitbild-Monitore verwenden. Daher sollten Sie, wenn möglich, einen dunklen Hintergrund verwenden, da dieser abends oder generell bei wenig Licht viel angenehmer für den Betrachter ist. Zusätzlich legen Sie den Fokus nicht unnötigerweise auf den Hintergrund, so dass der Inhaltsbereich im Vordergrund steht.

Wählen Sie also zunächst über den Farbwähler die 2 Farben für den Verlauf aus. Ich habe die Werte #0d1c2f und #374d5b verwendet und anschließend einen linearen Verlauf mit dem Verlaufswerkzeug (siehe Abbildung 1) von oben nach unten gezogen. Ich habe mich bei dieser Webseite dazu entschieden, den dunklen Farbton dezenter und somit im Kopfbereich zu verwenden. Der restliche Hintergrund erhält die hellere Farbe. Wie groß Sie den Verlauf machen ist Geschmackssache und spielt für die Umsetzung dieses Designs keine Rolle. Ich erwähne dies, da es manchmal vorkommen kann, dass ein Design mit einem längeren Verlauf wesentlich komplizierter umsetzbar ist.

Der Inhaltsbereich

Um diesem Bereich eine feste Breite zu geben verwende ich meist Hilfslinien, an denen ich das Design ausrichte. Aktivieren Sie dafür zunächst die Lineale (Strg+R) und kontrollieren Sie den eingestellten Maßstab mit einem Rechtsklick auf eines der beiden Lineale am Rand der Arbeitsfläche. Im Webbereich sollten Sie in der Regel die Einstellung Pixel verwenden. Ziehen Sie mit gedrückter Maustaste eine Hilfslinie auf die Arbeitsfläche, indem Sie zunächst auf das Lineal an der Seite klicken. Alternativ dazu können Sie über den Menüpunkt Ansicht => neue Hilfslinie eine exakte Position definieren.
Hilfslinien können Sie übrigens einfach entfernen, indem Sie diese zurück auf das Lineal am Rand ziehen. Damit Sie stehts die Übersicht behalten, können Sie diese auch mit einem Shortcut (Strg-H) aus- und einblenden.

In Abbildung 2 sehen Sie meine Einteilung der Arbeitsfläche. Zusätzlich zu den äußeren Grenzen des Inhaltsbereichs habe ich eine Hilfslinie genau in der Mitte platziert, die später beim Design des Banners helfen soll. Meine vertikalen Hilfslinien befinden sich in den Koordinaten 110, 600 und 1090, so dass der Abstand zwischen den äußeren Linien genau 980 Pixel beträgt.

Im nächsten Schritt lege ich den Hintergrund für den Inhalt an. Dazu definiere ich mir zunächst eine Grundfarbe, in diesem Fall den Grauwert #e6e6e6. Dann wähle ich das in Abbildung 3 gezeigte Abgerundetes-Rechteck-Werkzeug mit einem Radius von 2 Pixeln. So erhält das Rechteck eine ganz dezente Rundung, die bewusst nur leicht angedeutet sein soll.

Das Ergebnis sehen Sie in Abbildung 4. Das Rechteck befindet sich zwischen den beiden äußeren Hilfslinien und beginnt mit einem Abstand von etwa 90 Pixeln zum oberen Rand der Arbeitsfläche, so dass dort später der Banner für die Webseite platziert werden kann.

Das Menü

Wählen Sie für das Hauptmenü zunächst einfach zwei dezente Braunwerte aus, da diese meines Erachtens nach sehr gut mit den Hintergrundfarben kombiniert werden können. Ich habe mich für die beiden Farbwerte #92897b und #c6c0b9 entschieden. Erstellen Sie eine neue Ebene, die sich im Ebenenmanager über der Ebene für den Inhalt befinden muss. Wäre dies nicht der Fall, so würde das Menü anschließend von dem grauen Rechteck verdeckt werden.
Da ich im Hintergrund des Hauptmenüs einen Verlauf haben möchte, verwende ich zunächst das Auswahlrechteck-Werkzeug (siehe Abbildung 5) um diesen Verlauf zu beschränken. In diesem Beispiel habe ich die Auswahl-Art auf Feste Größe mit einer Breite von 1200 Pixeln und einer Höhe von 30 Pixeln festgelegt. Wenn Sie anschließend mit dem Werkzeug auf die Arbeitsfläche klicken erzeugt Photoshop automatisch ein Auswahlrechteck in dieser zuvor definierten Größe.

Diese Auswahl verschieben Sie nun so, dass die Oberkante der Auswahl bündig mit der des Inhaltsbereichs ist. Wählen Sie anschließend das Verlaufswerkzeug und ziehen Sie den Verlauf von oben nach unten (oder von unten nach oben, je nachdem welche Farbe ihre Primärfarbe ist) innerhalb der Auswahl auf. Wie Sie anschließend bemerken, füllt der Verlauf nun nicht die gesamte Arbeitsfläche aus, sondern lediglich die vorher definierte Größe der Auswahl. Achten Sie darauf, dass Sie beim erstellen des Verlaufs die zuvor neu angelegte Ebene ausgewählt hatten, damit der Verlauf in dieser gespeichert wird. Ihr Zwischenstand müsste nun dem aus Abbildung 6 ähneln.

Um dem Menü noch einen Glanzeffekt zu verpassen, wähle ich den Farbwert #c8c3bc als Vordergrundfarbe aus und erstelle mir eine 1 Pixel hohe und arbeitsflächenbreite Auswahl. Dazu können Sie entweder den Höhenwert beim Auswahlrechteck-Werkzeug auf 1 Pixel setzen oder aber direkt das Auswahlwerkzeug: Einzelne Zeile verwenden, welches Sie mit einem Rechtsklick auf das Auswahlrechteck-Werkzeug in der Werkzeugpalette auswählen können.
Positionieren Sie die 1 Pixel hohe Auswahl genau auf der Oberkante des Menüverlaufs, wählen Sie die Ebene mit dem Verlauf an und färben Sie diese Zeile mit dem zuvor als Vordergrundfarbe definierten Braunwert (Alt+Backspace oder Alt+Entf).

Im Ebenenmanager sollten Sie aktuell 3 Ebenen haben: Der Hintergrund, die Ebene mit dem grauen Rechteck und das Menü. Mit einem Doppelklick auf den Namen der Ebene können Sie diese übrigens umbenennen, so dass Sie auch im späteren Verlauf die entsprechenden Inhalte der Datei leichter wiederfinden.

Um das Menü abschließend auf das Hintergrund-Rechteck zu begrenzen, klicken Sie mit gedrückter Alt-Taste zwischen die Ebene mit dem Rechteck und dem Menü. Ihr Ebenenmanager sollte jetzt wie in Abbildung 7 aussehen. Sie bleiben mit dieser Technik übrigens flexibel, weil keine Informationen verloren gehen und Sie diese Beschränkung mit einem erneuten Klick mit gehaltener Alt-Taste aufheben können. Zudem passt sich das Menü perfekt an die Rundung des Rechtecks an.

Für das Hauptmenü fehlen jetzt lediglich die einzelnen Menüpunkte. Dafür verwende ich das Text-Werkzeug mit den in Abbildung 8 gezeigten Einstellungen. Wie Sie den Text erstellen bleibt Ihnen überlassen. Ich habe die Oberkategorien einfach mit Leerzeichen getrennt in einem Textfeld erstellt und die Zahlen anschließend einzeln um diese individuell hin und her schieben zu können. Sie können alternativ dazu aber auch alles in einen Textblock schreiben und die Farben und Schriftgrößen ähnlich zu gängigen Textprogrammen nachträglich anpassen, indem Sie die entsprechenden Textbausteine markieren und dann die Texteinstellungen verändern. Für die Zahlen habe ich übrigens den Farbwert #d9d6d1 verwendet.

Den selben Farbwert verwende ich nun auch für das Untermenü. Dafür lege ich zunächst eine neue Ebene an, erstelle mit dem Auswahlrechteck-Werkzeug eine Auswahl in der gewünschten Größe des Untermenüs (980 x 100 Pixel) und färbe diese Fläche ein. Da es sich um eine quadratische Fläche handelt ist die beim Hauptmenü angewandte Technik nicht notwendig. Um das Untermenü vom Hauptmenü abzusetzen, lasse ich dazwischen einen 1 Pixel großen Abstand, bei dem der Inhaltsbereich zum Vorschein kommt.

Abbildung 9 zeigt den aktuellen Zwischenstand, bei dem ich bereits einen kleinen Pfeil erstellt habe, der auf das aktuell aktivierte Hauptmenü zeigen soll. Erzeugen Sie dafür eine neue Ebene und verwenden Sie anschließend das Auswahlrechteck-Werkzeug, um mit gedrückter Shift-Taste eine quadratische Selektion aufzuziehen. Diese Auswahl können Sie nun um 45 Grad rotieren, indem Sie mit einem Rechtsklick auf die Auswahl die Funktion Auswahl transformieren aufrufen. Halten Sie auch bei der Rotation die Shift-Taste gedrückt um das Quadrat in 15 Grad-Schritten zu rotieren. Verwenden Sie anschließend die Enter-Taste um die Rotation zu bestätigen. Diese Auswahl müssen Sie nun lediglich mit der Farbe des Untermenüs füllen und schon haben Sie einen kleinen Pfeil, den Sie beliebig unter dem Hauptmenü platzieren können.

Wie Sie bereits vielleicht bemerkt haben, gibt es, wie in Abbildung 10 veranschaulicht, zwei Sorten von Pfeilen. Den bereits beschriebenen ausgefüllten Pfeil für einen aktiven Menüpunkt und einen Pfeil, der lediglich aus einer Umrandung besteht und der beim Mouseover (zu Deutsch ist das die Aktion die ausgeführt oder angezeigt werden soll, wenn der Nutzer mit der Maus etwa über einen Menüpunkt fährt) verwendet wird.

Den unausgefüllten Pfeil erhalten Sie ganz einfach, indem Sie die Ebene mit dem ausgefüllten Pfeil duplizieren. Ziehen Sie die Ebene dazu im Ebenenmanager einfach auf das Icon für Neue Ebene erstellen. Klicken Sie anschließend mit gedrückter Strg-Taste auf die Ebene um die Auswahl für den Pfeil wieder herzustellen. Achten Sie dabei darauf, dass Sie nicht auf den Namen der Ebene, sondern auf die kleine Vorschau klicken. Wählen Sie jetzt das Auswahlrechteck-Werkzeug und drücken Sie zwei Mal auf die Pfeil-Taste nach unten. Somit verschieben Sie die Selektion um 2 Pixel nach unten. Abschließend betätigen Sie die Entf-Taste um den selektierten Bereich zu löschen und fertig ist der zweite Pfeil.
Sollten Sie keinen Unterschied zum anderen Pfeil feststellen, so ist es eine häufige Fehlerquelle, dass dieser den neuen Pfeil überlappt. Verschieben Sie den Pfeil daher einfach etwas um einen solchen Fehler auszuschließen.