Adobe Photoshop Tutorial - Simple 3D Navigation Bar

Tutorial Written by fxzone

Step 1: Choose blue as the color for the bar, set foreground color to light blue and background color to dark blue. Create a bar with rounded corners on a layer then load a selection on the bar(fig. 1) and apply a vertical gradient(fig. 2). Set your gradient type to linear and the gradient from foreground to background.

Fig. 1

Fig. 2

Step 2: Then you need to create 4 button shaped patterns on a layer and position them accordingly on the bar(fig. 3). Load a selection on the patterns(fig. 4).

Fig. 3

Fig. 4

Step 3: This time using the same gradient settings, apply a vertical gradient but this time having it go the opposite direction. Apply the inset lines and place the text to complete the navigation bar.

Fig. 5

Fig. 6