Entwerfen Sie eine Web 2.0-Registerkarte mit Photoshop

In der folgenden Anleitung möchten wir Ihnen eine Vorstellung davon geben, wie Sie in Photoshop im Web 2.0-Stil ein schönes, schlankes Tab-Menü entwerfen.

Schritt 1

Erstellen Sie eine neue Leinwand mit weißem Hintergrund [#ffffff] in beliebiger Größe, vorzugsweise rechteckig. Sie eignen sich eher zum Zeichnen von Registern. Dann wechseln Sie zu Channels Tab (Windows -> Channels) klicken Sie auf Neuen Kanal erstellen rechts unten.

Schritt 2

Zeichnen Sie auf dem ausgewählten Kanal-Layer eine ähnliche Form mit dem Polygonal-Lasso-Werkzeug. Fülle es mit weißer Farbe [#ffffff]; heben Sie die Auswahl des polygonalen Bereichs auf (wählen Sie ein Auswahlwerkzeug aus und klicken Sie auf den Bildschirm). Form geben Gaußscher Weichzeichner mit dem Radius 6.0px.

Schritt 3

STRG-L Um den Ebenendialog aufzurufen, drücken Sie den linken und rechten Pfeil, um den mittleren Pfeil zu treffen, wie im Bild oben. Dieser Wille “glatt” Ihre verwischte Form und geben Ihnen eine schöne abgerundete Eckenform.

Schritt 4

In der Registerkarte Channels, Halten Sie die STRG-Taste gedrückt, klicke auf Kanal-Thumbnail von Layer Alpha 1. Die neue Form wird jetzt ausgewählt. Wechseln Sie wieder zu Ebenen Tab, Neue Ebene erstellen und fülle den ausgewählten Bereich mit schwarz [# 000000].

Schritt 5

Entfernen Sie die abgerundeten Ecken unten links und unten rechts, verschieben Sie sie nach links und positionieren Sie sie wie oben abgebildet. Als Nächstes konzentrieren wir uns auf die schwarze Registerkarte.

	Halt STRG, Klicken Sie auf die Tabs Ebenen-Thumbnail um das gesamte Tab-Bild hervorzuheben.
	Wählen Sie, während das Registerbild immer noch hervorgehoben ist Rechteckiges Laufschriftwerkzeug, halt ALT und zeichnen Sie ein Rechteck der Region, die Sie entfernen möchten.
	Sie sollten nur den ausgewählten oberen Teil sehen. Wählen -> Ändern -> Vertrag, Vertrag von 2px und Sie sollten etwas wie das Bild auf der linken Seite erhalten.
	Erstellen Sie eine neue Ebene, füllen Sie den hervorgehobenen Bereich mit weißem [#ffffff]. Rechtsklicken Sie, wählen Sie Fülloptionen dann Gradiant-Überlagerung. Ersetzen Sie den weißen Farbstopp [#ffffff] durch graues [# 616161]. Ihre Registerkarte sollte so aussehen wie das Bild links.

Schritt 6

Erstellen Sie eine neue Ebene. Wählen Abgerundetes rechteckiges Werkzeug (Radius 8px), zeichnen Sie ein Rechteck und legen Sie diese Ebene hinter die schwarze Registerkarte. Klicken Sie mit der rechten Maustaste und wählen Sie Fülloptionen und fügen Sie die folgenden Einstellungen ein.

Schlagschatten

Deckkraft: 31%
Entfernung: 0px
Spread: 0%
Größe: 2px

Abgeflachte Kante und Relief

Tiefe: 100%
Größe: 0px
Erweichen: 0px

Gradiant-Überlagerung

Hier sind die Einstellungen für Farbstopps.
Farbe: #aaaaaa, Lage: 0%
Farbe: #ffffff, Standort 100%

Schritt 7

Fügen Sie etwas Text ein, um den gesamten Web 2.0-Look zu sehen. Ich verwende die Schrift Lucida Fax, Schriftgröße 32pt und 25pt. Und dein Tab ist fertig! Fühlen Sie sich frei, mit der Farbkombination des Tabs herumzuspielen.

Tutorial herunterladen