Create and Elegant Web Menu

If you find yourself trying to add a bit of class to your website, the first place to start is with your menu. This is easily the most important part of your site, and where most people are going to look to first. So, you’ll want it to be elegant. Here’s how to do that.

Step 1 – Depending on what size your website is, you’ll take this step a bit differently than I. Decide on your dimensions, which for me is 600×75 and open up a new document. Since most site backgrounds are white, I’m using it for my background color.

picture 1 web menu

Step 2 – Here, we’re going to create a small strip of color at the bottom of the menu. So grab your Rectangle Marquee Tool, and create a small strip at the bottom, I’m using this color #30A2A2. Then, on top of the rectangle you just create use the tool to make a shape half the size. Fill it with white, then add these properties

picture 2 web menu

You should then be left with this…

picture 3 web menu

Step 3 – Now, were going to create some buttons for your menu. Take your rectangle tool, and create a button. You can make it any size really, just wouldn’t make it too big. Then add this blending option to it.

picture 4 web menu

you should then be left with this

picture 5 web menu

Step 4 – Now we’re going to add some text to the buttons. Again, you can style this anyway you want really, but in keeping with the simple and elegant look I went with: DellaRobbia BT. I also added a little design trinket to the sides of the menu. Nothing major, just a small brush to give the menu some depth.

picture 6 web menu

repeat this process until you have a full menu like this…

picture 7 web menu

Leave a comment