Eyeball FxZone: Photoshop tutorials and tips

3D Bar

Start by making a white 2d navigator bar with rounded edges and place it on a layer (layer 1).

Load a selection around the bar and contract the selection by 3 pixels. The amount of contraction depend on how thick the bar is. Use you best judgement when selecting amount in pixels and Do not lose your selection

With the selection sill loaded, make a new layer(layer 2) using the new layer button. Inverse the selection and fill the selection it with black.

Next, press CTRL + A to select all then CTRL + X to cut and load the contents of the layer to the clipboard. This will empty layer 2

Go back to layer 1 then load a selection again on the white navigation bar then press CTRL + SHIFT + V to paste the contents of the clipboard on a new layer and using the contents of layer 1 as a mask. The white bar should now have a black border around it.

On the newly created layer with the mask, apply filter>blur>guassian blur to the layer. I used 3.4 as the amount of blur for this tutorial but you can experiment with your own settings.

displace contents of the new layer(not the mask) by 1-2 pixels up and 1-2 pixels right. The lower and leftmost part of the bar should come out darker to the side opposite to it as shown on the left.

Add the text and other effects like a drop shadow to complete the navigation bar.

Download the PSD file used in this tutorial

For your comments, questions, suggestions and complaints send your email to webmaster@eyeball-design.com.