|
Interface Tutorial : 3D Gradient Bar 01
|
|
The gradient 3D navigation bars are created using a combination of a single, double or even triple gradients
plus a combination of other effects. The first bar below uses a simple double gradient to create a sinking effect
on the areas where the text will be placed.
The effect is quite simple and the key factor in creating these bars is
the good set of colors for the bar. The gradient must be set to have a
darker color from one color and a brighter color from the same color.
I have choosen blue as the color I want for the bar so I set my foreground color
to light blue and my background color to dark blue. Then I created 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.
Figure 01
Figure 02
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).
Figure 03
Figure 04
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.
Figure 05
Figure 06
|
