Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Aqua Menu

Aqua Menu


We'll begin this tutorial, by selecting the "Rectangle Tool". Draw a rectangle as illustrated below with 252523 as the color.

image 1

Draw another rectangle using the "Rectangle Tool" this time with 031f2b as the color.

image 2

Now right click on the layer and select, "Blending Options...". Now click on "Inner Glow".

image 3

Do not click "OK" yet. Still more to do.

Now click on "Color Overlay".

image 4

Do not click OK yet... still more to do.

Now click on "Gradient Overlay".

image 5

image 6

You may click "OK".

You should now have the below image.

image 7

Draw another rectangle using the "Rectangle Tool" this time with Black as the color.

image 8

Now go to "Filter" then "Blur" then "Gaussian Blur" and use the following settings.

image 9

You should now have the below image.

image 10

Select the "Text Tool" and use Verdana typeface at a size of 10, Bold and all caps as illustrated below using White as the color. Set the Tracking to -40.

image 11

Now right click on the text layer and select, "Blending Options...". Now click on "Drop Shadow".

image 12

You may now click OK.

You should now have the below image.

image 13

Next, create a new layer then using the "Rectangular Marquee Tool" draw a selection for the upper portion of the menu and fill with White. Deselect the selection by hitting "Ctrl" + "D" on the keyboard and turn the Fill down to 27%.

Then, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 10 pixels and color 232321. Then go to the main menu and select "Layer" then "Rasterize" and lastly, "Shape". By the way, this layer will need to be below the text layer for obvious reasons.

image 14

Now "Ctrl" click the layer found in step 2 to create a selection around it. Make certain that you have the new layer selected in the layers palette then, go to the main menu and click on "Edit" and lastly "Cut".

image 15

The Results!!!

I've added a white rectangle above all other layers and turned the fill way down for a more glossy feel.

image 16

Examples using different colors below:

Aqua Menu Tutorial: Final Result



Author's URL: EmpireDezign
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Aqua Menu"

Only registered users can write comment

No comments yet...