Posted on April 1st, 2008
Written by John and filed into the Basics, Design, Web Layouts, Effects category.
I am going to show you an easy way to get a stunning floating menu effect you can use for a website.
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:
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:
Pages: 1 2
ilulolhey
Posted by lolhey on April 3rd, 2008 at 5:28 am
Pretty neat. Will definatly be using this =)
Thanks alot.
Posted by LogiQ on April 3rd, 2008 at 6:00 am
thanks for your tutorials. that so make me full help. i will like you to be good designer. regard.
Posted by eqy on April 3rd, 2008 at 9:52 am
very good tutorial thinks
Posted by maky on April 9th, 2008 at 10:38 am
man i was straggling to get it right even-though i new how to do it, but it was very helpful am going to use it on my website.
am dummy on photoshop if you can mail me some more tips i’ll appreciate.
Posted by Mauro on April 11th, 2008 at 3:21 am
If you have any questions feel free to leave a message here and I will try my best to help you out.. thanks for looking at the tutorial
Posted by John on April 11th, 2008 at 3:55 pm
I am new to photoshop and i have been trying your tutorials, and i have been having the same problems,
When i use for example the elliptical marque in a new layer it covers over my other layers, so i did a lighter blue and the blending options i did in the guides, become the same color as the elliptical tool , how do i get it to go behind and not effect the other things ive done.
u say above “In the image above you can see my shape is under the other layers.” how do i get it under??
cheers!! if u cn help
Posted by tom on April 12th, 2008 at 10:12 am
I think I got what you are saying, you just need to drag that layer below all the others on your layers palette. I added a screenshot of what I am talking about under that step of the tutorial. Let me know if that helps. thanks
Posted by John on April 14th, 2008 at 11:11 am
I thought this kind of design it is very hard to do but you made it so simple.. It’s definitely a great help. Thanks.
Posted by mark on April 27th, 2008 at 12:12 pm
[…] Create A Floating Menu In Photoshop […]
Posted by 25 More Most Incredible Photoshop Tutorials on May 4th, 2008 at 7:41 am