Laschen/Registerkarten (Webdesign)

Ballu

Hoi

In diesem Tutorial möchte ich euch zeigen, wie ihr solche Laschen/Registerkarten erstellen könnt: http://ballu.pyrokar.lima-city...de/...che/fertig.png

Schritt 1: Grundform

Nun setzen wir erstmal die Grundform Fest. Dazu nutzen wir das Werkzeug "Abgerundetes-Rechteck-Werkzeug (U)". Damit erstellen wir ein Abgerundetes Rechteck, dass ungefähr so aussehen sollte: http://ballu.pyrokar.lima-city.de/Tu.../Lasche/01.png

Schritt 2: Transformieren

Um diese Form noch ein wenig zu Überarbeiten, müssen wir das Werkzeug "Perspekivisch Verzerren" nutzen. Über Bearbeiten/Transformieren rufen wir dies auf. Damit verändern wir die Form so: http://ballu.pyrokar.lima-city.de/Tu.../Lasche/02.png

Schritt 3: Farbe

Nun bringen wir etwas Farbe ins Spiel. Ich benutze die Farbe #256DCF (Hexadezimal). Macht einen Rechtsklick in das abgerundete Rechteck, mit dem "Abgerundetes-Rechteck-Werkzeug (U)". Dort wählen wir dann "Pfadfläche füllen". Dies sollte dann so aussehen: http://ballu.pyrokar.lima-city.de/Tu.../Lasche/03.png

Schritt 4: Ebenen-Effekte

Da dies noch nicht wirklich nach einer Registerkarte/Lasche aussieht, müssen wir es noch in 3D konvertieren. Dafür gibt es keine richtige Funktion, aber Ebenen-Effekte. Dies sollte so eingestellt sein:

Schlagschatten: Winkel:120, Distanz:5, Überfüllen:0, Größe:5
Abgeflachte Kanten und Relief: Farbtiefe:50,Richtung:nach oben, Größe:5,Winkel:120,Höhe:30
Verlaufsüberlagerung: Deckkraft:40,Verlauf: Schwarz -> Weiß,Umkehren:Ja, Skalierung:100

Nun sollte eure Registerkarte/Lasche so aussehen: http://ballu.pyrokar.lima-city.de/Tu.../Lasche/04.png

Schritt 5: Text

So kann man damit ja noch nichts anfangen. Einfach einen Weißen Text draufklatschen, in die Mitte positionieren, und einen angenehmen Schlagschatten einfügen. Jetzt sollte es so aussehen: http://ballu.pyrokar.lima-city...de/...che/fertig.png

Liebe Grüße,
Ballu