Personas are made up of two graphic image files - a "header" image and a "footer" image - which skin the default Firefox UI background.

The header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.

Whatever header image you create, it will be anchored to the top-right corner of the browser window. The right-hand side of the image is always visible, and as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image. This means that the most valuable visual information should be placed in the upper right area of the header image.

The browser might reveal more of the lower portion of the image as well if it (or an extension) adds another toolbar (like the toolbar that comes with the StumbleUpon extension) or other UI elements to the top of the window.

The header image should be PNG or JPG, 3000 pixels wide and 200 pixels tall and no larger than 300kb in filesize.

The footer image is displayed as the background of the bottom of the browser window, behind the status and find bars.

The footer image, unlike the header, is anchored to the bottom-left corner of the browser window, so the left-hand side of the image is always visible. As a user increases the width of the browser window, the browser reveals more of the right-hand side of the image.

When the status bar is in its default state, there is very little of the footer image shown vertically, and this should be taken into account in your designs. The browser might reveal more of the upper portion of the image as well if it (or an extension) adds another bar (like the Find bar) or other UI elements to the bottom of the window.

The footer image should be PNG or JPG, 3000 pixels wide and 100 pixels tall and no larger than 300kb in filesize.

In general, designs that feature rich content areas in the top-right corner of the browser work best. Though that may be true, you should always check to see where the UI elements sit on top of your designs within the different platform versions of Firefox.

This may be a critical step in finalizing your image, depending on the importance of the visual information you are including in your designs.

Within the Personas menu in the bottom left of the browser's status bar, you can enable an "offline" Persona on your own personal computer by enabling a setting within Preferences. In doing this, you can test your Personas before submitting them to the online catalog. Follow these four steps to get the Custom Personas option up and running in your browser:

Once your images are playing nice with the UI for all the OS flavors of Firefox, save final copies (PNG or JPG) - but be sure to check to ensure they don't exceed 300k in filesize!. (Note: This will only test your Persona on the platform you are currently using)

We've created a positioning template that can be used to help figure out placement of your artwork. The template is structured to allow testing of your Persona header within OSX, Windows XP and Windows Vista flavors of the browser.

The key to using this PSD template is to simply layer your Persona header image underneath one of the three OS layers. Be sure to turn off any of the OS layers you aren't using, as they will overlap each other due to their transparency.

Once you turn on an OS layer, you will be able to see where the UI elements will sit on top of your designs and you can flag any conflicts that may arise.

The example below shows our tutorial header image layered underneath the XP overlay, highlighting where the UI will interact with the design and warning of any issues that you may want to address. The secondary dark bar below the toolbar images is the location of the tabstrip.

Once your images are playing nice with the UI for all the OS flavors of Firefox, save final copies (PNG or JPG) - but be sure to check to ensure they don't exceed 300k in filesize!.

Now that you have finalized the artwork, it is time to share! One thing to note, please do be sure that you have the rights to use whatever image or design you use in your Persona. (We don't want to get any nasty lawyer letters!)

Follow the link below to start the process and add your creations to the constantly growing catalog of Firefox Personas!