Anzeige
Tutorialbeschreibung

Buttonleiste

Buttonleiste

Buttonleiste 4 (Metall)
 

Das brauchst du:
Photoshop 6(+), ich benutze Photoshop 7
Und so geht`s:

1. Schritt:

Erstelle ein neues Dokument (STRG+N). Hintergrund: Weiß, Grösse: 500 x 80. Diese Größe ist erstmal zum Üben.
Die Vordergrundfarbe auf 2d2d2d einstellen und dann Alt+Backspace Taste drücken. Dadurch wird die Ebene mit der Vordergrundfarbe gefüllt.

Bilder

Eine neue Ebene erstellen und mit dem Auwahlrechteck (Art: feste Größe Breite: 500 px Breite 1,5 mm) aufziehen.

Bilder

Bilder

Die Vordergrundfarbe auf 3d3d3d einstellen und durch Alt+Backspace, die Auswahl füllen.

Bilder

Rechtsklick auf die Auswahl und dort unter "Kontur füllen" das hier eingeben.

Bilder

Strg+D drücken, um die Auswahl aufzuheben.

Bilder

2. Schritt:

Als Werkzeug jetzt den Abwedler wählen und diese Einstellungen im Werkzeugmenü übernehmen. Die Pinseleinstellung ist "Rund, Weich, 17 Pixel. Bereich: Lichter, Belichtung: 100%".

Bilder


Die Bezeichungen der Pinsel werden durch darübergehen mit der Maus angezeigt. Mit diesem Pinsel jetzt etwa im unteren Drittel des Bildes hin und her wischen.

Bilder

Jetzt "Rund, Weich, 3 Pixel, Bereich: Tiefen, Belichtung: 100%".  und diese Einstellungen einstellen.

Bilder

Es empfiehlt sich, jetzt etwas an das Bild heranzuzoomen! Direkt unterhalb des eben erzeugten "Striches" ansetzen, Shift-Taste gedrückt halten und 1x hin, 1x zurück und wieder 1x hin rüber ziehen.

Bilder

3. Schritt:

Jetzt nehmen wir das Nachbelichter-Tool und stellen das hier ein. Die Pinseleinstellung ist "Rund, Weich, 13 Pixel, Bereich: Mitteltöne, Belichtung: 50%".

Bilder


Mit diesen Einstellungen etwas im unteren Teil der Navigationsleiste herumwischen. Dabei am Besten die Shift-Taste gedrückt halten und stets immer komplett herüberziehen.

Bilder

Dann noch diese Einstellungen übernehmen und in der oberen Hälfte der Navigationsleiste wischen. Die Pinseleinstellung ist "Rund, Weich, 27 Pixel, Bereich: Mitteltöne, Belichtung: 50%".

Bilder


Das wird sicherlich nicht alles auf Anhieb klappen, aber ruhig mal experimentieren und schauen, was das Tool eigentlich bewirkt. Am Ende dürfte das etwa so aussehen.

Bilder

4. Schritt:

Eine neue Ebene erstellen. D Drücken. Das Bundstiftwerkzeug anwählen und die Pinselgrösse auf 1 Pixel einstellen.
Jetzt damit den Rand der einzelnen Navigationselemente zeichnen. Die Größe muss jeder selber erstellen. Um gerade Linien zu zeichnen, einfach wieder die Shift-Taste gedrückt halten.

Bilder

Danach die Ebene duplizieren indem du sie auf den Abrissblock ziehst. Dann STR+I drücken (die Linien sollten nun weiß sein) und 1 Pixel nach rechts verschieben ( Curser-Taste 1x Rechts ). Die Deckkraft der Ebene dann auf 30% stellen.
Die Füllmethode der Ebene im Ebenenfenster auf "weiches Licht".
Die Ebene ebenfalls duplizieren und 2 Pixel nach links schieben ( Curser-Taste 2 x links).

Bilder

Bilder

5. Schritt:

Zur Navigationsebene wechseln (die Ebene direkt über der Hintergrundebene im Ebenenfenster anklicken). Den Abwedler wieder mit diesen Einstellungen wählen und genau dort, wo sich die "Buttons" treffen, etwa 5 mal klicken. Ebenfalls an den Linien.

Bilder


Bilder


Bilder

Danach kann man noch den Text eintragen.

Bilder


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Pat21
  • 21.06.2011 - 21:03

Ein sehr gelungenes Tutorial

Portrait von Ferdie_der_Hamster
  • 09.11.2010 - 14:04

verständlich erklärt und aussehen tuts bei mir genauso ;) danke!

Portrait von Anne_1990
  • 20.10.2010 - 23:37

Tolles tutorial!!!! Und echt gut erklärt!!!!

Portrait von scarred13
  • 29.09.2010 - 14:20

Sieht zwar bei mir ein bisschen anders aus, aber trotzdem danke ;)

Portrait von Davi
  • 28.09.2010 - 18:42

sehr schön, kann ich grad gebrauchen.

Portrait von buuunz
  • 28.09.2010 - 10:29

Gutes Tutorial - bei den Buttons würde ich es nur nen bisschen anders machen...;)

Portrait von Veith4u
  • 09.06.2010 - 20:58

Gutes Tutorial - bei den Buttons würde ich es nur nen bisschen anders machen...;)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.05.2010 - 12:01

sehr gut und sehr verständlich!

Portrait von cajun952
  • 09.05.2010 - 21:46

sehr schön, kann ich grad gebrauchen.

Portrait von JackAbwearts1
  • 23.04.2010 - 22:46

Super Tutorial! Schade nur das du die Anleitung wie man den Text leuchtend macht, nicht auch erklärt hast.

Portrait von RatedKay
  • 21.04.2010 - 00:11

Ist ein wirklich toll ausgearbeitetes Tutorial. Großes Lob! Danke

Portrait von Gugormilian
  • 07.04.2010 - 23:22

GEIL !!! EInFach geil !

greetz
Gugormilian

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.04.2010 - 17:46

sieht toll aus! das mit der spiegelung find ich am besten! probier doch mal den font Neuropol aus!

Portrait von tmfdsm
  • 23.03.2010 - 13:11

Finde, dass die Buttons richtig gut gelungen sind!!

Es wurde ja schon oft gefragt, habe aber keine Antwort gefunden: Was für eine Schriftart hast du benutzt und welche Effekte dafür? Würde mich über eine Antwort sehr freuen!!

Portrait von Sajeth
  • 21.03.2010 - 22:25

welchen font hast du benutzt?

Portrait von staxx78
  • 05.03.2010 - 17:42

schön und anschaulich beschrieben

Portrait von katoffelsupp
  • 16.02.2010 - 16:51

sehr anschaulich gemacht danke !

Portrait von Melonni
  • 07.02.2010 - 00:33

funktioniert auch prima mit CS4.
weiter so!

Portrait von Lady_bunt
  • 05.02.2010 - 14:43

Gutes Tutorial. Kann man gut nachvollziehen. Weiter so :O)

Portrait von st4rowne3z
  • 04.02.2010 - 21:10

jop wäre schon schön wenn du dieses tutorial nochmal mit cs4 machen könntest aber trozdem gutes tutorial

x
×
×