Mozilla Themes - Focal Point Size

The pixel size for themes (previously referred to as Personas) is 3000x200 for the header graphics and 3000x100 for the footer graphics. In one of the Firefox updates a while back, the footer area is not seen by default so these days quite a few people don't even bother creating a footer graphic. I still do and will continue to do so because I have mine set to see the footer area.

So let's take a look at a sample 3000x200 header graphic.

So when I'm creating a design, I have a blank template file saved on my computer. One of things on the template file is a size guide (which I call Marker). Default screen resolutions have gotten bigger over the years. My screen resolution is 1920x1080. I remember when the main screen resolutions used were 800x600 and 1024x768. So my size guide is 1024 wide, like so:

I have the marker available there so that when I'm creating a design, the focal point is within that area. That's not to say that my design always stays within that area though. I've created designs that went the whole way across the image and you can too. You'll just need to keep in mind that the amount of design you or anyone else will see is dependent on their screen resolution. But at least using some sort of marker you know, especially if you are adding text, that the majority of screen resolutions will be able to see it as it is intended to be seen.



You might also want to take into consideration that some people use additional toolbars while others don't. I do. I've added a couple extra toolbars to my browser just so that I can see more of the theme designs when I'm using them. Examples below.

NO ADDITIONAL TOOLBARS

TWO ADDITIONAL TOOLBARS

It might also be important to note that I use the plugin Classic Theme Restorer for my browser as well. So if the print screens showing my browser look different than what your browser looks like, that's probably why!

Now, when creating a design you have to keep in mind that the header graphics are RIGHT ALIGNED while the footer graphics are LEFT ALIGNED.

Let's start with a space picture found at http://pics-about.space/. It's best to ask permission to use the image if you're planning to upload it to Mozilla whenever possible. I actually like to use stock photo sites where images are available for free. Though even the free images may require you to give credit and/or link back.

If you have the image copied to your clipboard already, you will just need to paste it into your template. I like keeping each step on their own layer in case I need to edit one thing or another.

Clearly you can see that the background gradient color I originally had in place isn't the right color for the image I'm using here. Now, you can do one of two things, 1) change the background color or 2) change the color of the space image. For this, I'm going to change the background color.

What I like to do, to get as close of a match as possible, is use the EYEDROPPER tool.

Once you select the Eyedropper tool, take your pointer and put it over the left side of, in this case, the space picture. While at a glance, it might look like the background is black, it really isn't. Once you have your new color selected, fill in your background layer with the new color.

See, now the background blends much better with the image I used. But it's not perfect. If you take a closer look (by clicking the image above) you can see the edge of the original image. There is an easy fix for that. Select the ERASER tool, set it to a SOFT ROUND size setting. I used 182 in this example, and just lightly go over the left edge of your image until you can no longer see any sharp edge and it looks blended with your background color. I personally prefer to use LAYER MASKS instead of the eraser tool, but I won't go into that right now.

And see, the focal point of the design is within the 1024 size guide that I use. You can always make your 'marker' size the same as your own screen resolution. That way it would fill the whole top of your browser window. It's up to you.

Now, you can choose to leave it like that or you can add something more. For example, I'm going to add additional stars to the image. In the image below, you can see that I've added small stars to the image. I didn't just add them to the left of the space image I used, I added some over top of it as well. It helps to pull the whole thing together as one cohesive image. The star brushes that I used for this were from http://www.obsidiandawn.com/.

After saving the header image I would start on the footer image. Now I could do that by taking a copy of my completed design and FLIP the image HORIZONTAL so that the space scene is now on the left and copy and paste it into my footer template, or I could just fill my footer template with my background color that I used and add some stars to it like I did in the header graphic. The latter is what I choose to do.

Now comes the step that I think is really important. I always test my designs on my browser (without uploading them to the Mozilla Theme site). To do that though, you need a plugin call Personas Plus. It give you the ability to add and/or edit designs right from your own computer. On my browser, I have the fox icon in my footer area. I'm honestly not sure where it will display if you don't have your footer area visible on your browser. So just look for it. And from there you can test your design.

Below is what the image looks like on my browser during the testing of it. The color selections on this are very limited, so I select colors as close as I can get them. When I go to upload to Mozilla Add-On, I can pick more accurate colors. I used to use the color picker tool in Photoshop ahead of time to decide what colors I wanted to use but have since stopped doing that. I just take a little extra time to make my selection on the upload page.

Once you've tested it on your own computer and are satisfied, you can either upload it to Mozilla or just keep it for yourself. I've decided to go ahead and upload it. I just removed the VanillaOrchids text that I have running across the image throughout the tutorial. :D

The finished design is online here: In To Space We Go

I hope something here is helpful.

EDIT: For those interested, here is the template I use in PSD format. DOWNLOAD TEMPLATE