How to Create Your Own Persona
Personas are made up of two graphic image files - a "header" image and a "footer" image - which skin the default Firefox UI background.
Finished Your Design? You can submit right now!
- Step 1: Creating a Persona Header Image »
- Step 2: Creating a Persona Footer Image »
- Step 3: Testing your Persona Images
- Step 4: Submit your Persona! »
Step 3: Testing your Persona Images
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:
- If you have Personas installed, click on the little fox on the bottom left of your computer screen and click on "Preferences"
- Ensure the box "Show Custom Persona in Menu" is checked and close the box.
- Click on the little fox again. Mouse over "Custom" in the menu and to the right find and click "Edit"
- Build your Persona using the upload fields and additional settings.
- 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)
Photoshop overlay layerset
- 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.
- 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!
Did you know you can test a Persona before you submit it? Find out how! »
Online Image Editor Resources
- SUMOPaint - SUMO Paint offers professional and easy to use tools for creating and editing images within a browser. SUMO Paint is a free image editing software that gives you the opportunity to create, edit and comment images online with powerful tools and layer support.
- Photoshop.com - Tweak, rotate and touch up photos with Photoshop® Express, your free online photo editor.
- Aviary Phoenix - All the Photoshop features you actually need, at a fraction of the price. Did we mention built-in collaboration? Create and edit with the world!