PSD to HTML navigation bar slicing concern

In my PSD file I have a nav bar with some light effect in the background. I'm a bit concerned whether should I slice the whole nav bar and then add text or just slice it into smaller pieces? Which would be the best practice? I'm new to this subject so any ideas would be so much appreciated.

You for sure want to cut the nav bar images into pieces. Add them to the background of each of the nav bar links with css. It will save you a big headache later.

Here is a good example of a jsfiddle

Css

#nav {
    display: block; 
    height: 40px;
    line-height: 35px; 
    list-style: none outside none; 
    margin: 20px auto 0 auto; 
    position: relative; 
    max-width: 750px; 
    min-width: 750px; 
    width: 78.2%;
}

#nav li {
    display: inline;
    text-align: center;
    float:left;
}

#nav li a{
    color: #fff; 
    display: block; 
    float: left; 
    font-family: HelveticaNeue-light,Helvetica,sans-serif; 
    font-size: 1em; 
    height: 100%; 
    padding: 0px 23px 0; 
    text-align: center; 
    text-decoration: none;
    line-height: 40px;
    background:#4D4D4D; 
    position: relative;
}

#nav li a span {
    position: absolute;
    left: 0;
    top: 40px;
    display: none
}

#nav li a:hover, #nav .active a {
    background: url("path/to/image.png") no-repeat bottom  center #a4c723;
    color: #4d4d4d;
}

#nav li a:hover span, #nav .active a span {
    display: block;   
}