For this method, two images are required - one for the links, and one for the hovered state. A third image may be used to show the current page. The images are large, but the same images are used for every button.
Since the images form a background for plain text (as opposed to incorporating the text as part of the image) they have to be large enough for the largest link text, and also large enough to allow the text to enlarge when the user requires bigger writing.There are
only a limited number of button images that allow this, and still have a reasonable appearance at all text sizes. These are (showing one image from each type):
In addition, the Chain Column could be used (as above-left) but the chain links may move apart when text is resized.
Notice that all these images share one important property - The images have at most three defined edges - some (in Group 1) have only one "edge" (such as Arrow), and the tab images (Group 2) have top and sides defined, the bottom can be sliced off as required. The images in Group 1 (left edge defined, no top, right or bottom) are more suited to (but not limited to) vertical navigation bars, the Tabs in Group 2 for horizontal bars.
The next page discusses creating the images in more detail.