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

Create a Floating Menu in Photoshop

By: John Overbee
Tuesday, April 1st, 2008
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

I am going to show you an easy way to get a stunning floating menu effect you can use for a website.


SEE FULL SIZE IMAGE

I am going to make the canvas pretty large for this project to show you exactly how you could use this for a site. All of my screenshots will be sized smaller, but I will provide a link to view a larger version.

So I will start off with an 800X600px canvas and make the background a dark blue color. I used #002F3F.

Here is a color sample:

Now I am going to add 3 guides to my canvas so my menu is sized well. In my version of photoshop go to view>>new guide>> click horizontal and key in your size.

My first guide is at 70px horizontal, 2nd guide is 85px and 3rd guide is 100px.

Start a new layer and grab your rectangle marquee tool or your rectangle tool. Fill up the top space in between the guides with the color black:



SEE FULL SIZE IMAGE

Go into your blending options on that layer and use these settings for the gradient overlay:

The two colors used are: #296491 and #95C3CF

Ok, do the same thing as in the last step, except fill in the bottom portion of the guides with black as well and choose these settings for the gradient overlay:

The two color used are: #000000 and 00415F

You should have something like this so far:



SEE FULL SIZE IMAGE

Pages: 1 2

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