Designing and Coding Your First Navigation (PSDtoHTML)

Designing and Coding Your First Navigation (PSDtoHTML)

What We’ll Be Creating

Designing & Coding Your First Navigation

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.

Designing & Coding Your First Navigation

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

Designing & Coding Your First Navigation

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

Designing & Coding Your First Navigation

Adding Definition To The Buttons

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

Designing & Coding Your First Navigation

Designing & Coding Your First Navigation

Designing & Coding Your First Navigation

You should have something like this.

Designing & Coding Your First Navigation

Labelling The Buttons

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

Designing & Coding Your First Navigation

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

Designing & Coding Your First Navigation

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.

Designing & Coding Your First Navigation

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.

Designing & Coding Your First Navigation

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.

Designing & Coding Your First Navigation

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

Designing & Coding Your First Navigation

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”.

Designing & Coding Your First Navigation

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.

1
2
3
4
5
6
7
<ul id="simple-navigation">
    <li class="homepage"><a href="www.link-goes-here">Homepage</a></li>
    <li class="portfolio"><a href="www.link-goes-here">Portfolio</a></li>
    <li class="meet-our-team"><a href="www.link-goes-here">Meet Our Team</a></li>
    <li class="what-we-do"><a href="www.link-goes-here">What We Do</a></li>
    <li class="get-in-touch"><a href="www.link-goes-here">Get In Touch</a></li>
</ul>

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.

1
2
3
4
5
6
7
8
9
10
11
12
body {
background-color: #2c465a;
}

ul#simple-navigation {
}

#simple-navigation li {
}

#simple-navigation li a {
}

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.

Designing & Coding Your First Navigation

Adding The CSS Styles

The CSS styles for the navigation looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul#simple-navigation {
width: 206px;
float: left;
background-color: #1d2e3c;
padding: 20px;
}

#simple-navigation li {
list-style-type: none;
float: left;
height: 46px;
width: 206px;
margin-bottom: 4px;
}

#simple-navigation li a {
float: left;
height: 46px;
width: 206px;
display: block;
text-indent: -9999px;
}

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

Designing & Coding Your First Navigation

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

Designing & Coding Your First 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.

1
2
3
4
5
6
ul#simple-navigation {
width: 206px;
float: left;
background-color: #1d2e3c;
padding: 20px;
}

The next set of styles are for each list item.

1
2
3
4
5
6
7
#simple-navigation li {
list-style-type: none;
float: left;
height: 46px;
width: 206px;
margin-bottom: 4px;
}

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.

1
2
3
4
5
6
7
#simple-navigation li a {
float: left;
height: 46px;
width: 206px;
display: block;
text-indent: -9999px;
}

Adding Our Sprite Image

If you remember each list item had its own class, add the following code to the stylesheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
li.homepage {
background-position: left top;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.portfolio {
background-position: left -50px;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.meet-our-team {
background-position: left -100px;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.what-we-do {
background-position: left -150px;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.get-in-touch {
background-position: left bottom;
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

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.

Designing & Coding Your First Navigation

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
li.homepage, li.portfolio, li.meet-our-team, li.what-we-do, li.get-in-touch {
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}

li.homepage {
background-position: left top;
}

li.portfolio {
background-position: left -50px;
}

li.meet-our-team {
background-position: left -100px;
}

li.what-we-do {
background-position: left -150px;
}

li.get-in-touch {
background-position: left bottom;
}

Adding The Hover Effect

To style that navigation hover effect we simply duplicate the code above but with the “:hover” attribute and a background position of “right”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#simple-navigation li a:hover {
background-repeat: no-repeat;
background-image: url(navigation-sprite.png);
}
li.homepage a:hover {
background-position: right top;
}

li.portfolio a:hover {
background-position: right -50px;
}

li.meet-our-team a:hover {
background-position: right -100px;
}

li.what-we-do a:hover {
background-position: right -150px;
}

li.get-in-touch a:hover {
background-position: right bottom;
}

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.


Purchase Psd Now

About the Author Wilma Hamlin

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.

Leave a Comment:

22 comments
Clipping Path says

Wow! Awesome article.
Thanks to author for sharing this one.
:)

Reply
Josh Lake says

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.

Once again, Thanks, and I look forward to more tutorials from you.

Reply
logo designers says

superb tutorial, i must try :) thanks

Reply
Michael says

Nice tutorial. Maybe a clicked state would be nice? Maybe an inset dark look?

Reply
Richard Carpenter says

Thanks for comments, i surpose a clicked state would of been a nice touch. Its not really that hard to do.

Just create another menu with your clicked state the duplicate the hover code with with “:active” instead of “:hover”. Then change the background position of the “:active” styles.

Reply
sanjay says

Cool Navigation Richard! Btw, you can also do this using CSS3.. oh wait! That gives me an idea for a blog post :)

Reply
Richard Carpenter says

Yes it can easily be replicated and used coding CSS3. The idea of this tutorials though is for beginners to get to grips with coding.

Reply
JACk says

Brilliant study buddy, i want to make this post as it is on my site http://designsshowcase.com, can i…

Reply
Bob Peace says

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?

Cheers

Reply
rosens says

Your course is so well

Reply
samkc says

thank you sir for your tutorial..as a beginner in this field,this tutorial has helped me to understand the basics.. thank you again…

Reply
wpcoder says

doesn’t work in older browsers

Reply
sikedestroya says

Nice tutorial… Never get enough PSD to HTML tutorials :) Cheers!

Reply
Suren says

Nice & Helpful tutorial for beginners.

Reply
Sadio says

I have always been looking for this tuts about how to convert your PSD Webdesign to HTML.
This one has giving me an idea about how to go about somethings.
Thanks Rich, i love to have more of the tuts.

Reply
Christy Harper says

Thanks for sharing this, it looks really cool :)

Reply
Srinivas Gowda says

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.

Reply
Zoran says

Good

Reply
Nash says

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?

Reply
Imtiaz says

Great share!!!!!!!

Reply
jules says

Great Tutorial.. Thanks for sharing

Reply
Wilma Hamlin
Wilma Hamlin says

Thanks Jules.

Reply
Add Your Reply

Popular posts

css.php