laboring over basic nav graphics

[boder]

I'm pretty new to web dev and I'm building my first site for hire and trying to keep it simple to match my bid.

I'm wanting to create some very basic graphics into which I will insert my menu items and I would like to model my site after what I see on this page:

sample of graphics

Specifically, I'm after the dark blue horizontal bar, the ligher blue bar beneath it, and the matching light blue vertical band to the right. If I were to do this by my own lights, I would use ms image composer to create gifs like this, but it would take me quite a while! Is there a better way? Also, if I create MS image composer gifs, should they be optimized for the web before I put them into a site?

Thanks,
boder