Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Make a Sleek Web 2.0 Style Menu for Your Site

By: John Overbee
Wednesday, March 19th, 2008
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

To blend in this shape so it looks nice I am going to add a layer mask by clicking
on the mask icon at the bottom of your layers palette window:

After doing that your layer should look like this:

Now we are going to use the gradient tool located in your main palette where your paint bucket is. Make sure it is set on linear gradient and set the opacity at 85%.

With your gradient tool chosen, drag diagonally toward the left and release your mouse like this:

Now you should have something similar to this:

We are finally getting somewhere huh? This seems like a lot of steps I am sure to achieve what we have so far, but hopefully my extra detail is helping you out.

This next step you do not have to take but I am only doing it to make the button look a little more crisp. I am going to choose the glow layer that we made and then pick my burn tool. I am going to
use a 65px soft brush size and burn around the edge of our curve we made.

My result:

Now I am going to add a few thing so you can make it look like a menu for a web site. First I will add a little house that I drew using photoshop shape tools. I will provide it for you in case you want to use it:

Download House File (Right click and save target as or save link as)

Fit it on the image underneath the shiny layer we made and set these blend options:

Outer glow:

Gradient Overlay

My result so far:

Add some text on top of it, still underneath the shiny layer and set its opacity at about 60% so you can see the house through it a bit. Choose whatever font you like.

I am going to cutoff this tutorial at this point and write another one soon on making some simple reflections. If you already know how to do a reflection then you can see where it could be added.
I am going to finalize the menu so you can see my result and maybe from that you can see what I did.

Typically I wouldn’t make all the buttons for the menu different colors, but I wanted to show you how easy it is to change them. You could make some rollover buttons which glow when you hover over them. Thanks again for reading!

Pages: 1 2 3

Topics: , ,

About the Author:
John Overbee is a graphic designer for the iEntry Network.

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved