titles.

You can use graphical titles wherever necessary on your page. The easier way is to just use the default text styles as seen on the fonts page. In either case, typically, they are used at the top of the main content area to reinforce the user's perception of where they are — working in conjunction with the title, header, and breadcrumbs information. You can also use them for headings on other parts of your page(s).

So you want the graphic titles? If you don't already have it, (right-click this link and save link as 'titles.psd' [yoursite/img/text/titles.psd]). Open the file with Photoshop.

The 'titles.psd' file is set up to accomodate up to two lines of text. And as you can see, a single line looks best, like 'buildit documentation' above. So if possible, keep it to one line and then crop your title image down as small as you can before saving into [yoursite/img/text/bod_title_textdescription.gif]. Be sure to use the 'save for web' option in photoshop with a background mask of #F1F0EF. In the layers palette you can see a reminder of that mask value below the text layer.

You will notice that the 'titles.psd' file has some blue guidelines as seen in the screenshot above. The first blue line indicates the maximum width for 'wta_01' and 'wta_02' layouts. The second blue line indicates the maximum width for 'wta_00' layouts. The third blue line indicates the maximum width for 'wta_03' layouts. Be sure and crop the image(s) down to a width that is less than those maximum widths.