Eyeball FxZone: Photoshop tutorials and tips

Interface Tutorial : 3D Gradient Bar 02


This is another version of the gradient bar using a double gradient but in a different way. Another gradient is used to create for the buttons placed on the bar making it similar to using a triple gradient.




For this bar I choose red as the color so I set my foreground color to light red and my background color to dark red. Then I need a bar with rounded corners on a layer. Then I 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. Do not lose the selection yet.

Figure 01


Figure 02


With the selection still loaded, I contracted the selection by 3 pixels then make a new layer then apply a vertical gradient using the same colors but this time going the other direction.


Figure 03


Then you create 4 button shaped patterns on a different layer and position them accordingly on the bar(fig. 4). Load a selection on the patterns(fig. 5).


Figure 04


Figure 05


Using the same gradient settings, apply a vertical gradient to the patterns but this time having it go the same direction as the first gradient(fig. 6). Apply a drop shadow to the buttons then place the text to complete the bar(fig. 7).


Figure 06


Figure 07


Download the PSD file for this tutorial.
interface05.zip 38 kb
For your comments, questions, suggestions and complaints send your email to webmaster@eyeball-design.com.