|
|
Page
3
|
|
Fig. 23
|
Add
the layer style we applied to the Interface layer in step
5.
Then
add some Drop Shadow - default settings - but change the
Distance to 2 pixels and Size to 2 pixels.
Duplicate
the Button layer by dragging it down to the Create a new layer tab.
Do this until you have the buttons you want and nudge them into
the right positions.
Then
link all the different
button layers together and hit Ctrl + E to Merge
the linked layers together. Rename the layer and call it Buttons.
Then
add some Drop Shadow - default settings - but change the
Distance to 1 pixel, and the Size to 1 pixel.
|
|
Fig. 24 |
Create
a new layer below the Buttons layer and call this
layer Inset Buttons.
Press Ctrl + left click the Buttons layer to select the buttons.
Now get rid of the lower selections of the buttons so that only
the top buttons are selected.
Do this by first clicking the Subtract from selection option
an then selecting the lower part of the buttons selection.
Your image should now look exactly like fig. 23!
Then go to Select - Modify - Expand - 2 pixels.
Hit D to set the Default colors (Black foreground color and
white background color)
Select the Gradient Tool And fill your selection from the top to
the bottom. Deselect.
Now
duplicate this layer and move it down beneath the lower set
of buttons.
Your
image should now look like figure 24.
Link
the two Inset buttons layers together and Merge the
linked layers together.
Then run a Gaussian Blur - 4 pixels.
|
|
Fig. 25 |
Now
it's time to add some details to some of our layers.
Activate
the Chrome Detail and duplicate it.
Make a selection similar to mine in figure 25 and inverse
the selection (Ctrl + Shift + I).
Hit the Delete key. Deselect.
Then
turn off the Drop Shadow layer style !
|
|
Fig. 26 |
Then
go to Filter - Blur - Gaussian Blur - 5 pixels.
Still
at the Chrome detail copy layer select the Chrome Detail
layer (Ctrl + left click the Chrome detail layer).
Inverse the selection and hit the Delete key (make
sure you are on the Chrome detail copy layer) to get rid
of the pixels outside the selection. Deselect.
Duplicate
the Chrome detail copy layer and go to Edit - Transform
- Flip horizontal - and move the layer to the right side.
Your
image should now look like fig. 26.
|
|
Fig. 27 |
Activate
the Background Buttons layer.
Create a new layer called Highlights.
Select
the Elliptical Marquee Tool and make a selection similar to mine
in figure 27 and fill the selection with white.
Then
move the selection using the arrow keys until it looks exactly
like fig. 27.
Hit
the Delete key to get rid off the selected area.
|
|
Fig. 28
|
Now
duplicate the Highlights layer 3 times and use the
Edit - transform - Flip Horizontal/Vertical option and move
the different highlight layers until it look like figure 28.
Link
the four different highlights layers together and Merge the
linked layer together (Ctrl + E).
Then go to Filter - Blur - Gaussian blur - 3 pixels.
|
|
Fig. 29
|
Create
a new layer - call it Highlights 2.
Make
a selection similar to mine in fig. 29 and fill the selection with
white color. Deselect.
Gaussian
Blur the layer - 2 pixels
|
|
Fig. 30 |
Duplicate
the Highlights 2 layer and move it down below the lower buttons.
Then
use the Eraser Tool
to get rid of the center of the layer like shown in figure 30.
This
is the settings I used for the brush I used to erase some of
the layer.
Create
a new layer and call it Black Shadow.
Make a selection similar to mine in figure 30 and fill it with black.
Then Gaussian Blur the layer by 4 pixels.
Now
duplicate this layer and move the Black Shadow
copy layer over to the right side.
|
|
Fig. 31 |
Ahhhh
- finally there!!!
Just add some Pushed
in text on top of the buttons and you're finished!
This
tutorial could go on and on for ever, but I'll stop here.
Use your imagination to add even more cool effects to the interface
:)
Good
luck!
(Click
here to see my very final result that I have entered in the
Eyeball interface contest).
|
|
|
|