Novak's blog is about web design, making money, blogging tips, interesting pictures

Today I’m going to show you how to make web 2.0 menus in Photoshop. They’re going to be 3D and will fade into the background. This tutorial is very simple and can be done in a minute. You don’t need advanced Photoshop skills. You can also see my Vista Button tutorial and Underwater Wallpaper tutorial.

1. Create blank document and fill it with white color. Create new layer. Make a selection of your menu’s size in created layer.
   
2. Fill this selection with white color and double click the layer to access layer style properties. Set outer glow, inner glow and color overlay settings as it shows on pictures.
   
   
   
3. Look at your result. It looks nice but we have to make it fade with the background. Click on the gradient tool and create gradient below.
   
4. Then click on layer mask icon on the bottom of the layer window. You’ll see new rectangle on the right side of selected layer. Select it.
   
5. Now go to your canvas and create gradient like on the picture.
   
6. The result should look like this. Layer mask shows the area which is painted in white color. We made gradient which has white color in the middle so this will make your menu’s edges fade into the background.
   
7. Now all you have to do is add some text and your 3D menu is done.
   

I hope this tutorial will help you make 3D elements for your website. What do you think about it? Was it helpful?

If you like this post, you could subscribe to full feed RSS. You can also subscribe by Email.

Spread the word using these buttons.