Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop Webdesign

Photoshop: Buntes Menü mit Karteikartenreitern

Register (Reiter, Tabs) sorgen für die Aufteilung gleichartiger Abteilungen oder Kategorien, wobei die kleinen, über den Rand hinausgehenden Abschnitte eine schnelle Orientierung über die Gliederung anbieten, wie etwa die Buchstaben bei einer alphabetisch…

Register (Reiter, Tabs) sorgen für die Aufteilung gleichartiger Abteilungen oder Kategorien, wobei die kleinen, über den Rand hinausgehenden Abschnitte eine schnelle Orientierung über die Gliederung anbieten, wie etwa die Buchstaben bei einer alphabetisch geordneten Einteilung oder etwas einfacher, die Abgrenzung mit unterschiedlichen Farben.

Grundlage aus Formebenen
Das System der Karteikartenreiter wird recht häufig im Webdesign eingesetzt. So können zusammengehörige Themenbereiche visuell getrennt werden. In diesem Beispiel wurde der Hintergrund über »Bearbeiten ↔ Fläche füllen« mit #335577 (RGB 51, 85, 119) gefüllt. Mit dem Abgerundeten-Rechteck-Werkzeug, einem Radius von etwa 12 Pixel und der Farbe #6699bb (RGB 102, 153, 187) erstellt man die Grundform für die Inhalte.

Der »Ebenenstil ↔ Schlagschatten« hebt die Fläche etwas vom Hintergrund ab. Darüber sollte eine kleinere, weiße Fläche liegen, sodass man die Inhalte später besser lesen kann. In den Optionen muss »Formebenen« aktiviert sein. Mit dieser Einstellung generiert Photoshop automatisch jeweils eine eigene Ebene, was für die weitere Entwicklung dieses Workshops eine Grundvoraussetzung ist.

Screenshot
Grundlage aus drei abgerundeten Formebenen

Die Reiter werden ebenso mit dem Abgerundeten-Rechteck-Werkzeug erstellt. Hierbei aktiviert man als Erstes die Hintergrundebene, um sicher zu gehen, dass die Register hinter der Grundlage für die Inhalte stehen. Hat man den ersten Reiter aufgezogen kopiert man diese mehrfach über »Ebene ↔ Neu ↔ Ebene durch Kopie«, wonach die Kopien mit dem Verschieben-Werkzeug positioniert werden. Als Vordergrundfarbe habe ich #7799bb (RGB 119, 153, 187) ausgewählt.

Die Reiter werden im Ebenenfenster selektiert und auf eine Ebene reduziert. Dazu klickt man die jeweiligen Ebenen mit gedrückter Strg-Taste an und anschließend im Menü auf »Ebene ↔ Auf eine Ebene reduzieren«. Der »Ebenenstil ↔ Kontur« mit Größe 1 Pixel, Deckkraft 70% und der Farbe Weiß sowie ein leichter Schlagschatten heben die Reiter vom Hintergrund ab.

Screenshot
Reiter erstellen

Farbverlauf einfügen
Über der Ebene mit den Reitern wird eine neue Ebene mit einem Klick auf »Ebene ↔ Neu ↔ Ebene« erstellt. Ein Verlauf von #224466 (RGB 34, 68, 102) nach #446699 (RGB 68, 102, 153) füllt die Fläche. Dazu verwendet man das Verlaufswerkzeug mit einem Verlauf von der Vordergrund- zur Hintergrundfarbe und zieht diesen Verlauf von links nach rechts auf.

Screenshot
Verlauf über dem Register

Um den Verlauf an die Form der Reiter anzupassen, klickt man im Menü auf »Ebene ↔ Schnittmaske erstellen«. So füllt der Verlauf nur die Flächen der Reiter aus.

Screenshot
Verlauf an deren Form angepasst

Illustration und Menüpunkte
In diesem Beispiel habe ich im Hintergrund der Reiter auf einer eigenen Ebene eine Illustration eingefügt. Die komplette Grafik ist durch eine spezielle Werkzeugspitze realisiert worden. Somit konnte mit nur einem Klick bei eingestellter weißer Vordergrundfarbe die Illustration auf der neuen Ebene erzeugt werden. Die Beschriftung der einzelnen Reiter wird später per HTML und CSS umgesetzt.

Screenshot
Beschriftet und mit einer Illustration geschmückt

Grundlage aus Formebenen
Die Hintergrundebene wird mit #7e7e7e (RGB 126, 126, 126) gefüllt, dann mit dem Abgerundeten-Rechteck-Werkzeug, der Farbe #2f2f2f (RGB 47, 47, 47) und einem Radius von etwa 20 Pixel die Grundlage für die Inhalte aufgezogen. Darüber sorgt das Rechteck-Werkzeug mit der Farbe #ffeedd (RGB 255, 238, 221) für einen Hintergrund, auf dem Text gut lesbar ist. Beiden Ebenen wird der »Ebenenstil ↔ Schlagschatten« zugewiesen.

Screenshot
Grundlage aus verschiedenen Formebenen

Register erstellen
Wie im ersten Beispiel werden auch hier die Reiter mit dem Abgerundeten-Rechteck erzeugt. Diese sollten genau zwischen der Ebene mit der grauen und der beigen Grundlage liegen. Als Farben wurden #33bbbb (RGB 51, 187, 187), #99aa33 (RGB 153, 170, 51), #eecc44 (RGB 238, 204, 68), #ee9944 (RGB 238, 153, 68) und #dd4455 (RGB 221, 68, 85) eingesetzt. Der »Ebenenstil ↔ Schlagschatten« sowie eine »Verlaufsüberlagerung« mit »Überlagern«, Deckkraft 15% und einem Winkel von etwa 135 Grad sorgen für einen leichten 3D-Effekt.

Screenshot
Register mit Stil

Illustration und Menüpunkte
Auch bei diesem Interface habe ich im Hintergrund auf einer eigenen Ebene eine Illustration eingefügt. Diese ist allerdings keine Pinselvorgabe. Sie wurde durch das Eigene-Form-Werkzeug erstellt. Die Beschriftung der einzelnen Reiter sollte möglichst über HTML und CSS erfolgen.

Screenshot
Beschriftet und mit einer Illustration geschmückt

Nach dem Entwurf des Designs in Photoshop kommt die Umwandlung in ein einfaches Weblayout mit Tabellenstruktur über ImageReady. Der Artikel »Website auf Knopfdruck« erklärt später die Optionen, die das Photoshop-Anhängsel für diesen Zweck anbietet. ™

Von Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.