Create images used by the navigation bar

We are going to create the image below first. We will make it a little bit longer so that it can accommodate longer text.

Select Tools -> Image Editor from the main menu.
Click on the down arrow of this button . Select New Image -> Blank. Create a new image of size 250x50. Set background color to #0F4D92.
Press the OK button to create the image.
Click this button to create an outline of a rounded rectangle. Select the "Shape tab". Set the values of the dialog as shown below.
Click on the "Style tab". Set the color to #0A2F58. Select the option "Outline". Click OK to create the rectangle.
It should look like the image below.
Click this button again to create another one. Set the values of the dialog as shown below.
Click on the "Style tab". Set the color to #156CCC and select the option "Outline".
Click OK to create the outline of a rounded rectangle. The image should look like the one below.
As we are going to create three images from this. Uncheck the option "Exit editor after insertion" at the bottom right corner.
Make a selection of the image of size 220x50.
Click this button to crop the image.
Click the button "Insert to Site". Select GIF for image type and set the number of colors to 32. Enter the name "nb-hover-left.gif".
Click OK to write the image to file.
Click this button to undo the cropping.
Make another selection of the image 30x50 starting at 220.
Click this button to crop the image.
Click the button "Insert to Site". Select GIF for image type and set the number of colors to 32. Enter the name "nb-hover-right.gif".
Click OK to write the image to file.
Click this button to undo the cropping again.
Make another selection of size 5x50 starting from 0.
Click this button to crop the image.
Click the button "Insert to Site". Select GIF for image type and set the number of colors to 32. Enter the name "nb-bg.gif".
Click OK to write the image to file.