Additional menu

Designing and Coding Your First Navigation (PSDtoHTML)

posted on January 18, 2012

THIS POST MAY CONTAIN AFFILIATE LINKS. PLEASE READ DISCLOSURE FOR MORE INFO.

What We’ll Be Creating

Creating The Navigation

Starting in Adobe Photoshop, create a new (Ctrl + N) document with the dimensions 800 x 600 pixels with a background color of #2c465a. Select the “Rectangle Tool” (U) then drag out a rectangle which is about 226 pixels wide and 265 pixels in height, we can adjust the size of the rectangle at a later stage if its too big. Fill (G) the rectangle with the color #1d2e3c.

Select the “Rounded Rectangle Tool” (U) with a radius of 5px.

Drag out 5 individual rounded rectangles leave a 10 pixel window all the way around your rectangle. Evenly space each button.

Adding Definition To The Buttons

Add the following layer styles to each one of the rounded buttons.

You should have something like this.

Labelling The Buttons

Select the “Text Type Tool” (T) then label each button.

To make the text stand out that extra bit I’ve added a little drop shadow to my text using the following settings.

Create The Hover Version

Highlight all your layers from within the layers window except the background layer, then right click and select “Duplicate Layers” from the fly-out menu. Once the layers have been duplicated select the “Move Tool” (V) and move the navigation across.

Notice the 2nd navigation buttons are slightly lighter this will be the hover state of the buttons. Simply update the “Layer Styles” on the duplicated buttons with a white #ffffff “Color Overlay” using the settings below.

Navigation Complete

The navigation is complete, save your PSD file then open up a blank HTML document using your favorite code editor. I suggest something easy like Adobe Dreamweaver.

Sprite Preparation

The way the navigation is coded is called a “Image Sprite”. An image sprite is a collection of images put into a single image. Using image sprites will reduce the number of server requests and save bandwidth on your website.

You could use your PSD file as it is now and still use it as an image sprite, but to make it easier were going to place both navigations side by side. Before you dive into this, lets first hide the navigations background rectangle as this can be replicated with CSS (Cascading Style Sheets). Select the move tool (V) then simply move the hover state buttons directly next to the normal state buttons. Be careful not to overlap the images.

Now select the “Rectangular Marquee Tool” (M), zoom in (Z) on your navigation then draw a marquee around the menu buttons.

Once the selection has been made hide your main background layer. Were now set to save the image for the web with a transparent background. Select save for the web by going to “File > Save For Web And Devices”.

From the drop down menu select “PNG-24” then select save from the bottom of the window. Save the file into a folder on your desktop where your index.HTML file will be saved, if you already have a directory structure set out for your navigation then save the image in its relevant folder.

Navigation HTML Structure

Open up your HTML file in your code editor then begin the code structure of the navigation. The best way to code a navigation is with an unordered list.

Give each list (li) item a class of what ever the name of the button is, doing this will make it easier to remember when adding the CSS. After the list class we make a simple anchor tag pointing to the desired page related to that navigation item, then finally we add the text of each button.

Inside a CSS file (If you haven’t got one create one and link it to your HTML document) add the following CSS style tags.

[code type=css]
body {
background-color: #2c465a;
}

ul#simple-navigation {
}

#simple-navigation li {
}

#simple-navigation li a {
}
[/code]

The body tag refers to the whole website, so this would be a good place to add our background color. Simply select the “Eye Dropper Tool” (I) from within photoshop, click your background then note the Hex value of the color from the foreground window, all hex values start with a hash (#). If you save and test your HTML file you should have something like this.

The first thing we need to do is determine the width of each button, you can easy measure the button in photoshop.

With the width determined we can add it to our stylesheet under the 3 style tags for the navigation.

Under the unordered list container (ul) we can also add add the background color of the dark blue rectangle from within our PSD file and the padding which was originally 10 pixels, increasing it to 20 pixels gives the navigation that little bit of extra space around the buttons.

Adding “list-style-type: none” removes the default bullet points from each list item, the height refers to the height of each button this can be measured in photoshop like we did for the width of the buttons. Finally the bottom margin adds 4px below each button.

The list links styles are pretty much the same only this time we display each link as a block item and indent the text by “-9999px” this pushes the text off the page, this is also known as “Text Image Replacement”. The reason we do this is for SEO purposes, we don’t need the text there as the text is on our buttons but having the text and not displaying it in view will help search engines identify what the button us.

Each list item has the spirte image set as the background and with a CSS rule “No-Repeat” the no repeat rule stops the background from repeating over and over. The background position is the position on the image, i worked it out that each button is 50px below each other.

There’s no particular formula and every navigation will be different. For the top and bottom buttons we can use the CSS rule top and bottom. Because were using the normal state of the navigation we must also set our background position to left.

Merging The CSS

Because some of the CSS rules use the same CSS rules we can actual merge them which will speed up your loading times and lower the size of your stylesheet. I don’t suggest you do this for every style in your style sheet, but for the navigation we can do. The CSS looks like this.

Test The Demo

That’s it you should have a finished working navigation, check out my demo to see how mine looks. Click Here for demo.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Reader Interactions

Comments

Cheers for the post. This tutorial has been a great help to me to gain a bit more knowledge about coding navigation’s and using image sprites. I also like how your navigation looks, as it is really clean and gives across a professional feel.

I normally don’t use inner shadow when I am designing my buttons but your example definitely shows that it helps lift it from the navigation and make it stand out that little bit more, so, I think I will be using this technique again in my future work.

Also, I think that it would of been nice if you added to this tutorial and made a click state for when the button is pushed down as this is something I believe works really well.

Hey Richard, I’m really new to all this but I decided to change your ul padding to 20px 20px 16px 20px instead of just 20px to allow for the margin-bottom: 4px; on the last li. What do you think? Is this something web designers would normally do?

I’ve long been using opensource graphic tools like Inkscape and Gimp for all my design needs, but its time I start learning PSD cause Gimp needs more polish and shine before it can replace PSD. But Inkscape is a complete tool equally capable of creating vector graphics as Adobe Illustrator and Corel draw.

Hello! Thank you for the tutorial, but I’ve got a little problem. I did everything as it is instructed in this article, but my buttons don’t show up. Just dark background and nothing more. What could be the problem? Can you help me?