Eyeball FxZone: Photoshop tutorials and tips

Interface Tutorial : 3D Gradient Bar 03


For this version of the gradient bar I used a triple gradient to create the bar and the areas where the text are placed using a few contracted selections.




I first set my foreground color to light green and my background color to green red. Then I need a bar with rounded corners on a layer. I loaded 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. With the selection still loaded, contract the selection by 3 pixels(fig. 2).


Figure 01


Figure 02


With the selection still loaded, make a new layer then apply another vertical gradient on the selection using the same colors. The direction of the gradient should be opposite the direction of the first gradient.


Figure 03


To create the division on the nav bar, make thin rectangular selections using the rectangular marquee tool and position them on the bar and hit the delete key.


Figure 04


Load a selection on the layer then contract the selection by 2 pixels. Do not lose the selection.


Figure 05


Using the same set of colors and with the selection still loaded, make a new layer then apply a vertical gradient on the selection(fig. 6). The direction of the gradient should be the same as the first gradient. Reduce the brightness of the current layer using IMAGE > ADJUST > BRIGHTNESS & CONTRAST then place the text.


Figure 06


Figure 07


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