Fun with Firefox Personas: How to make your OWN!

In honor of Firefox 3.5 launching yesterday, I decided to delve a little bit into making the world’s most customizable browser a little more my own.  Firefox 3.5 isn’t a requirement for this little project but if you haven’t downloaded it yet, either as an upgrade or as an alternative to Safari or Internet Explorer, I highly recommend giving it a try and seeing what all the buzz is about!

The best place to get Firefox is always http://www.getfirefox.com/.  Also, if you are interested in just what makes the 3.5 release a must-have check out this great Life Hacker post http://lifehacker.com/5295655/top-10-firefox-35-features.  Just for fun, Mozilla also has a site up that is tracking Firefox downloads in real time and displaying total downloads and the downloads by region that I thought was pretty neat.  Check it out http://downloadstats.mozilla.com/.

So, a while ago Mozilla launched what amounts to a browser wallpaper feature for Firefox.  Similar to themes you might be familiar with, this new feature, called Personas, allows you to quickly and easily switch between different backgrounds for the menu bars in your Firefox window!

There are thousands of options available to play with, some from Mozilla and some from the community.  However, the coolest thing to do with Personas is to make your own!  As I found out, this is actually a fairly simple process that is actually a lot of fun.

The Steps

Step 1:

If you don’t already have it installed, head on over to http://www.getpersonas.com/.  You should probably look at a few of the different Personas that are included just to get some inspiration and get an idea for what you’ll actually be creating.  The little Persona fox will live in the bottom left hand corner of your browser which is where all your options are for Personas.

Step 2:

So, open up your favorite image manipulation software.  I used Photoshop CS4 but just about anything will work, even paint (Here’s a great Photoshop tutorial, if you’re a newbie: Intro to Photoshop)!  That being said, if you don’t have anything better than paint at your disposal, I highly recommend using software that has support for layers such as the free-to-download and free-to-use GIMP, which is available for Windows, Mac, and Linux platforms.  Download it here:  http://www.gimp.org/downloads/.  Need some help on gimp - then, check out some of Marian Heddesheimer’s Gimp Tutorials on MindBites!

You will first be creating the header, which is the most important aspect of your Persona, as it is where your eyes are the most and where most of your work will actually be visible!

Note: If you are creating this persona just for your own personal use, then free handing and testing your creation in your own set up will probably serve you just fine.  However, if you’re one of those ambitious types that wants to share your persona with the world, you will want to download this template file that has the outlines of the UI on the different Firefox platforms so you can test your design to make sure it looks superb on everyone’s machine!  http://personas.services.mozilla.com/static/img/Persona_Header_TEMPLATE.psd

Create your header image, which should be 200 pixels high by 3000 pixels long.  Note that most of this actual image will not be seen by most people; if you are using the template mentioned above, you will see how little space the UI actually takes up.  However, they want this size for people who use monitors of all sizes to make sure that your Persona will have something to display for the few people lucky enough to browse the web on a 60″ HDTV.

Note: Your image can be saved only as a .jpg or .png and can’t exceed 300kb.

Step 3:

Start creating!  Pictures of your kids, girlfriend, boyrfiend, celebrity crush, dream car, house, abstract creations, etc — anything you want is fair game!  Focus your efforts on the top right hand corner of your huge banner, though, because that is where the image will be anchored, and that part is guaranteed to be seen.  Be as elaborate or as simple as you like; just make it your own!  Depending on your intentions, you can probably leave most of the left side of the canvas a solid color as most people will never get that far out to ever see your work.

As an example of where you should focus and just how small a space will actually be used here is my header for my MindBites Persona.  Keep in mind this at 20% of actual size.

This then becomes this:

Step 4:

Create your footer image.  This will go along the bottom where your status bar and other fun things are.  Similar process as creating a header but with 2 distinctions:  This image should only be 100 pixels high instead of 200 but still 3000 long:  also, your footer image will anchor at the bottom left of your image instead of the top right.  So, focus there with your work.  Remember that the footer bar is dramatically shorter than 100 pixels, so keep it on the short side!

Step 5:

We’re getting so close but first thing is first.  We need to enable custom Personas so you can test out your creation to make sure it meets your expectations.  Click on your little fox in the bottom left hand corner of your browser to get the Personas menu.  Click preferences then check off the fancy “Show Custom Personas in menu” check box.

Step 6:

The part you’ve been waiting for: seeing your amazing artwork come to life in your browser!  Now that custom Personas are enabled, just click your Persona fox and select Custom, then Edit.  This brings up a fun window that has a few simple options to help finish your masterpiece.  Pick a catchy name for your Persona.  Then, upload your header and footer images.  You also have the option to edit the color of the very top window bar; pick something that matches (or not - whatever)!  You can also change your text color, I suggest something that you can read through your artwork.

Step 7:

You’re basically done!  You should have your beautiful artwork sitting in your browser like it belongs there!  You might need to do some adjusting to make sure everything is readable and that your artwork isn’t covered by your Google bar or lost behind your tabs.  One thing I noticed was that if I updated my image and tried to re-apply it to my persona but didn’t change the name, the image wouldn’t change.  So, keep that in mind if you have to make adjustments —  change the name a little!

Step 7: Optional

If you think that your Persona is truly a masterpiece meant to be shared with the world, then you can actually register as a Persona designer here: https://personas.services.mozilla.com/signin?return=/upload

Then, you can unleash your creations on the world for all to see and enjoy!

Conclusion

I had a lot of fun tweaking and experimenting with different images and ways to implement Personas to make Firefox a little more unique to me.  Some fun ideas on how to use your new power:

• Create a Persona that features your boss and flatter them next time you give a presentation
• Ninja a Persona featuring Barbie on to your resident tough guys Firefox on his laptop he left unguarded
• Create a Persona for your business and impress your clients with your devotion to branding
• The options are endless

I hope you enjoyed this little tutorial and have some fun with it, I know I did!  If you have any questions, comments, or fan mail leave us a comment or e-mail me: joseph@mindbites.com.

I got a ton of help from Mozilla’s own guide to creating Personas and it might answer any questions you might have. http://personas.services.mozilla.com/demo_create

Get a Trackback link