Creating a Two Toned, CSS Menu: Part 1

Posted: 06/21/2008

This is a two part tutorial which will explain how to create a two tone navigation much like the one featured on this website.  The process is simple and I’m sure there are other ways to achieve the same results but this was my method.

Part one of the tutorial will focus on creating the graphical elements needed for the navigation.  Part two will focus on integrating it into a website using CSS.

Requirements:  A graphic design program such as Adobe Photoshop or Adobe Illustrator.  I will be using Photoshop CS3.

Step 1:  We will begin by creating the general shape and state of the navigation.  Start by creating a new layer then select the Rectangle Tool. Drag your cursor from left to right, which should create a rectangle.  The height preference is up to you.

Step 2: Next we will add color to the rectangle.  Click on the layer that the rectangle resides on.  Right click (Windows) or Ctrl + Click (Mac) and select Blending Options from the menu. When the Layer Styles window opens, select the checkbox next to Gradient Overlay.

Step 3: Because this is two-toned, we will be using more than two shades in our gradient.  Click on the gradient menu so that the Gradient Editor opens.

Step 4: By default the Black to White gradient is probably already selected.  If not, go ahead and select the Black to White gradient.  Next, double-click on the white Color Stop so the Color Stop Selector opens.  In the Hex field enter “1d1d1d” and choose “OK”.

Step 5: Now add a new Color Stop and set its location at 50%.

Step 6: With the new Color Stop selected, double click on it so that the Color Stop Selector opens again.  This time enter “5a5959” in the hex field.  Feel free to use any other color as long as it is slightly lighter then the right side Color Stop.  Click OK to return to gradient editor.

Step 7: Now we need to add a fourth shade.  Add a new Color Stop and double click on it so the Color Stop Selector opens.  This time enter “000000” for the hex value and click OK to return to the Gradient Editor.  Position the Color Stop at 50%, but make sure it stays to the left of the lighter Color Stop.

Step 8:  Now that the gradient is put together, navigate your way back to the canvas by clicking OK on the Gradient Editor and the Layer Style window.  Your object should now look similar to this depending on the size you used:

Step 9: Next, create and select a new layer.  Select the Rectangle tool and draw a rectangle over the gradient rectangle.  Make the height of the rectangle the same height as where the lighter part stops in the gradient, which should be half way.  This will act as  our light reflection.

Step 10: With the new, white rectangle layer selected, drop the opacity to about 40% or what ever looks good to you.  As an additional step, you can try using a gradient mask to get different results.

Step 11: Now that we have the normal or “off” state of our navigation let's create the Over State.  In this case I will be using a gradient red but feel free to use any color you choose.  Start by selecting the black gradient rectangle layer and duplicate it.

Step 12: Once duplicated, right click (Windows) or Ctrl + Click (Mac) and select Blending Options to open the Layer Styles window.  Select the Gradient Overlay section and open the Gradient Editor.

Step 13: Moving from left to right, open each Color Stop and enter the following for each hex value:

• Color Stop 1 (Far Left): #813333
• Color Stop 2 (Middle-left of lighter color stop): #a83434
• Color Stop 3 (Middle - lighter color stop): #b47171
• Color Stop 4 (Far Right): #ca1111

 

Step 14: “OK” your way back to the canvas.  You should now have something like this:

This will act as our roll over state, which means that when a user moves their mouse over the menu, the red will appear.  When they roll out, it will revert back to black.

Step 15:  Create a new layer.  You can either position this layer under the white rectangle that acts as our light reflection or you can have it over the reflection.  I have it under to give it a glassy look.  On this new layer we are going to create our menu text.  Select the text tool and position it over the navigation and type out your menu items.  You can make it a single string or individual text strings.  Just make sure they line up horizontally.  The results will appear similar to this:

Step 16: Now we just need to slice it up and export it for web.  First, hide the red gradient object so it is no longer visible.  Next, select the Slice tool and begin slicing your menu into evenly spaced sections similar to this:

Step 17: Now that your image is sliced we are going to export them for web use.  Go to File > Save for Web & Devices.  I wouldn’t worry about optimizing them since we will soon be opening the exports in Photoshop again.  Go ahead and save the slices where you see fit.  Before saving them, I recommend naming each slice so they are unique.  This will enable you to easily find the slice when we go back and enable the red background and export.

Step 18: Once you have saved the file and returned to your canvas, go back and enable the red rectangle we created earlier.  Once you have enabled the layer, go to File > Save for Web & Devices.  IMPORTANT: Be sure to save these under a different file name so you do not over-write the slices we just exported.

Step 19:  We are just about finished.  Now that we have are images created we will go ahead and do our final preparation before implementing them into a website.  Go to the directory where you saved all the exported images.  Once there, go ahead and open them all up in Photoshop or open each menu state individually.  For example, if you created a “Home” button, open up both the red and black version of this in Photoshop.  We are going to combine the two into one file so that they are stacked.  In this case, I’ve opened up both versions of my Home button.  Each one should be the same width and height so that all we have to do is create a new PSD file that is the exact same width but double the height.  We will then import both versions of our button into this file, putting the color that should appear first (or what will be our “off” state) on top.  For mine, black will be the “off” state so it will appear on top. You should end up with something like this:

Each menu item needs to be recreated like this.  Once completed, save each one again by going to File > Save for Web & Devices only this time you can optimize all you want for web as this is our final graphic.

This concludes Part 1 of this tutorial.  In Part 2, I will show you how to build out the menu in pure CSS, creating an over state with no Javascript.

Thanks for reading!