Anzeige
Tutorialbeschreibung

Schattiges Tab-Menü

Schattiges Tab-Menü

In meinem ersten Tutorial möchte ich euch zeigen, wie ihr ganz leicht ein schlichtes, aber edles Tab-Menü erstellen könnt.

Zusätzlich gibt es noch einen HTML-Tipp, wie ihr das Menü am besten für eure Website verwendet. Das Wichtigste an dem Tutorial sind die Schatteneffekte, die sich über die angrenzenden Tabs legen. Das ist nicht immer so leicht in HTML umzusetzen ...


Da es mein erstes Tutorial ist, würde ich mich auch über Feedback freuen, ob es gelungen ist oder ob ich zu viel geschrieben habe.


Schritt 1: Die Arbeitsfläche

Zuerst erstellen wir eine neue Datei mit der Hintergrundfarbe Weiß. Ich habe für das Tutorial die Maße 500 x 200 Pixel gewählt, aber natürlich können diese später der Homepage angepasst werden. Im Folgenden habe ich den Hintergrund mithilfe des Farbton/Sättigungs-Dialogs (drücke Strg+U) in einem sanften Blau gefärbt. Diese Ebene stellt den Hintergrund unserer Homepage dar. Dann habe ich zur Vorbereitung noch 4 Hilfslinien erstellt: Mit der Maustaste auf eines der Lineale klicken und die Maustaste festhalten. Nun die Hilfslinie in die Ebene ziehen. (Mit Shift kann man die Rasterabstände benutzen, um ein pixelgenaueres Arbeiten zu ermöglichen).

Tipp: Falls die Lineale nicht sichtbar sind, kann man diese mit Strg+R einblenden.

Bild - Die ArbeitsflächeBilder



 

Schritt 2: Die Menüleiste

1. Wir wählen die Vordergrundfarbe Weiß für unsere Menüleiste.
2. Das Abgerundetes-Rechteck-Werkzeug wird ausgewählt mit
3. einem Radius von 8 Pixeln.

Im 4. Schritt wird dann ein solches Rechteck von der linken oberen Ecke bis zur unteren rechten Ecke aufgezogen, damit wir ein 450 x 30 Pixel großes Rechteck haben.

Bild - Die MenüleisteBilder



 

Schritt 3: Der erste Effekt

Da es jetzt noch unspektakulär aussieht, verleihen wir Form 1 mit einem Rechtsklick im Ebenenmanager auf Form 1 und einem Linksklick auf Fülloptionen einen Schlagschatten.

Bild - Der erste EffektBilder



 

Schritt 4: Tab #1

Bevor wir weiter am Design arbeiten, sollte die Arbeitsfläche noch etwas vorbereitet werden. Dazu werden 3 weitere Hilfslinien gezogen, wie in der Abbildung zu sehen. Daraufhin wird wieder das Abgerundetes-Rechteck-Werkzeug ausgewählt, diesmal mit einem Radius von 4 Pixeln, und ein 83 Pixel breites Rechteck wird augefzogen. Die Höhe des ersten Tabs sollte ungefähr bis zur Hälfte der Menüleistenhöhe gehen.

Danach kann noch mit einem Rechtsklick auf Form 1 im Ebenenmanager und einem Linksklick auf Ebenenstil kopieren der Schlagschatten kopiert und bei Form 2 auf gleiche Weise eingefügt werden. Damit es noch passender ausschaut, wird Form 2 im Ebenenmanager unter Form 1 gelegt.

Das Zwischenergebnis sieht dann wie folgt aus:

Bild - Tab 1Bilder

Tipp: Strg+(Komma) schaltet die Hilfslinien an und aus.


 

Schritt 5: Tab #2, 3, 4 und 5

Ja ich bin zwar ein relativ ordentlicher Mensch, aber auch faul *grins*. Damit wir uns nun nicht für jedes einzelne Tab die Arbeit machen müssen, Hilfslinien zu ziehen, Rechtecke aufzuzeichnen und mit einem Schlagschatten zu versehen, kopieren wir diese doch einfach mal. ABER zuerst können wir uns eine neue leere Ebene erstellen und diese Ebene zusammen mit der Tab-Ebene markieren (Strg gedrückt halten und beide Ebenen anklicken). Dann einen Rechtsklick auf eine der Ebenen und diese Auf eine Ebene reduzieren.

Im 2. Schritt drückt man 4-mal Strg+J, um die Ebene zu vervierfachen. Zum Positionieren von Tab 2-5 muss einfach nur das Verschieben-Werkzeug ausgewählt und die einzelnen Ebenen weiter nach rechts geschoben werden, bis jeweils ein 1-Pixel-Abstand zwischen ihnen zu sehen ist (Schritt 3).

Bild - Tab 2 3 4 und 5Bilder



 

Schritt 6: Inaktive und aktive Tabs

Jetzt werden zuerst die 5 Tab-Ebenen gruppiert, mithilfe des kleinen Ordnersymbols im Ebenenmanager. Danach wird dieser Ordner dupliziert, indem man ihn auf das Symbol rechts neben dem kleinen Ordnersymbol zieht. Nun muss nur noch der duplizierte Ordner über die Menüleiste gezogen werden, und schon haben wir unsere Rohformen für die inaktiven Tabs (liegen unter der Menüleiste) und für die aktiven Tabs (liegen bald auf einer Ebene mit der Menüleiste).

Bild - Inaktive und Aktive TabsBilder



 

Schritt 7: Anpassen der Tabgruppen

Die obere Gruppe ist am leichtesten zu verarbeiten, wobei die zweite auch nicht viel schwieriger ist, hehe. Nun gut, wir ziehen mithilfe des Auswahlrechteck-Werkzeugs eine Auswahl über die obere Hälfte aller Tabs, sodass die Auswahl bündig mit der Menüleiste abschließt. Wir markieren eine Tab-Ebene der oberen Gruppe und drücken Entf, um den Bereich des Tabs innerhalb der Auswahl zu löschen. Dies wiederholen wir für die vier anderen Tabs.

In Schritt 2 geht es mit der unteren Gruppe weiter. Wir klicken erst mal auf das kleine Auge neben der oberen Gruppe im Ebenenmanager, um diese auszublenden. Danach wählen wir das Zauberstab-Werkzeug aus (die Toleranz sollte 20 oder mehr betragen), markieren die unterste Tab-Ebene und klicken mit dem Zauberstab-Werkzeug in die weiße Fläche des Tabs, um eine Auswahl zu erstellen (Schritt 4). Dann wird die Ebene des nächsten Tabs ausgewählt und die Entf-Taste gedrückt, um dort den Schatten zu entfernen (Schritt 5). Dies wird ebenfalls mit allen Ebenen wiederholt, bis alle 5 Tabs scheinbar auf einer Ebene liegen.

Bild - Anpassen der TabgruppenBilder



 
Und wenn nur eine Tab-Ebene der oberen Gruppe sichtbar ist (kleines Auge wieder) und die Tab-Ebene der unteren Gruppe an der selben Position unsichtbar ist, sieht es doch schon ansehnlich aus, vor allem der Schatten, der über die angrenzenden Tabs fällt. Was meint ihr?

Bild - Anpassen der Tabgruppen 2Bilder


Aber jetzt zum designerischen Finale ...


Schritt 8: Text einfügen

Mit dem Text-Werkzeug können die Tabs nun noch geschmückt werden, und außerdem will man ja wissen, wohin man kommt, wenn man den Tab anklickt. Der aktive Tab ist noch in einem matt-dunklen Blau hervorgehoben und ja ... das ist das Design. Zusätzlich auch noch ein kleiner Info-Text in der Menüleiste.

Bild - Text einfügenBilder



 

Schritt 9: Anwendung in HTML

Sind die Tab-Bilder alle gespeichert (siehe Bild), können sie in HTML eingebunden werden. Das Tag <map> legt eine "Karte" auf dem Bild an, mit dessen Hilfe man <area>-Areale erstellen kann, die wie Links funktionieren. In diesem Fall wurden Rechtecke über die Tabs gelegt (<area shape="rect"> [rect = rectangle = Rechteck]), an den angegebenen Koordinaten von links Oben bis rechts unten aufgespannt (coords="x1, y1, x2, y2").

Tipp: Die Koordinaten lassen sich einfach bestimmen, indem man das Bild mit Paint öffnet und den Mauszeiger über den entsprechenden Pixel hält. In der Statusanzeige werden dann die Pixelkoordinaten angezeigt.

Bild - Anwendung in HTMLBilder



Man könnte das Gleiche noch mit einer einzigen PHP-Datei und mit Variablenübergabe machen, aber das gehört wohl eher in den Webdesign-Bereich von PSD-Tutorials.de (habe für Interessierte allerdings eine PHP-Variante in den Arbeitsdateien beigelegt).

So, das war mein erstes Tutorial. Ich hoffe, es hat euch gefallen und ihr habt ein klein wenig dazugelernt. :-)

MfG Kalabrix



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 09.08.2011 - 00:46

Danke für das Tut, hatte zuerst Probleme mit dem Verlinken aber hat dann doch alles geklappt, bitte mehr

Portrait von AustrianKiller
Portrait von OJey
  • 11.07.2011 - 07:50

Ein gelungenes Tutorial für eine Navigationsidee! Lässt sich relativ gut umsetzten.

Portrait von PachN
  • 01.07.2011 - 17:47

Für einen PS Neuling ein schönes Tutorial.
Aber ich werde das alles wohl noch mit ein bisschen CSS kombinieren, dann hat man einen schönen Rollover Effekt und muss nicht erst klicken, dass sich die Tabs ändern ;)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.06.2011 - 17:36

ich verstehe bei schritt 7 , schritt 2 nicht . hab probleme . :(

Portrait von kfzslay87
  • 08.05.2011 - 22:09

Top. Sehr gut beschrieben

Portrait von tobias12
  • 21.04.2011 - 17:11

super tutorial, freue mich über weiter von dir!

Portrait von HowieKellerfish
  • 19.04.2011 - 10:46

Wirklich sehr gutes Tutorial! Einfach gehalten und leicht verständlich. Nur der letzte Teil mit dem Schatten entfernen am Schluss war/ist für mich etwas schwierig. Aber das Forum wird mir hier sicherlich weiterhelfen :)
Vielen Dank!

Portrait von tintenhelmut
  • 03.04.2011 - 21:49

Bin noch Anfängerin, aber super toll erklärt .

Portrait von Kalabrix
  • 06.04.2011 - 18:46

Vielen Dank, das freut mich :-) Toll noch nach so langer Zeit Kommentare zu bekommen!

Portrait von jp_

jp_

  • 30.01.2011 - 18:09

einfach und verständlich erklärt

Portrait von madeleine
  • 11.01.2011 - 12:58

Super Sache, hat sofort funktioniert und die Schritte waren leicht nachvollziehbar!
Meeeehr =)

Portrait von Acchan
  • 08.01.2011 - 15:59

Gut erklärt,
aber mit image-maps zu arbeiten ist nicht barrierefrei.
Lässt sich das programmiertechnisch nicht auch anders lösen?
Deshalb von mir nur 3 Sternchen.

Portrait von noodl
  • 27.10.2010 - 12:25

nice sehr gutes tutorial 5*

Portrait von derEve
  • 17.10.2010 - 12:13

Schön gemacht mit den Pfeilen und sieht gut aus

Portrait von rolle2003
  • 27.09.2010 - 13:39

Sehr Verständlich erklärt,
bitte mehr davon!!

Portrait von NoLimit
  • 26.09.2010 - 12:53

super beschrieben danke

Portrait von Patrickes
  • 21.09.2010 - 21:14

Super im Detail beschrieben. Die Schritte sind dank den Pfeilen
und Beschreibung in Rot sehr gut dokumentiert.
Vielen Dank

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.09.2010 - 22:49

Super Tutorial! Alles erklärt und viele Tipps dabei gegeben. Ist alles gut nachzuvollziehen. Ich kann meinen Vorrednern nur Recht geben. ;-)

Portrait von pfriemala
  • 02.09.2010 - 14:11

Für´s erste Tutorial super verständlich erklärt - weiter so!

x
×
×