Mozilla Themes - Focal Point Placement

A little while back a theme designer uploaded a design which was approved but after viewing their design on their browser they thought that someone at Mozilla, whether a reviewer or someone else, had resized their design. I explained that the designs are not in any way altered after they are uploaded. Here the issue was due to the focal point of the person's design not being where they expected it to be after it was displayed on their browser. So I created a sort of guide to show what was happening.

The problem was with where the focal point of the design (in their case an Anime image) was placed in relation to the person's screen resolution.

So let's take a look at some examples. The first one is a fairy design that I just created for this tutorial. I used a desktop wallpaper to create it and the focal point is the fairy and the caterpillar.

NOTE: The design is displayed on my browser with additional toolbars added so that the height is greater, allowing for more of the design, height wise, to be viewable. And the colored lines with numbers show various screen widths. If you don't know what your screen resolution is, visit: http://www.whatismyscreenresolution.com/ Click the image to see a larger view.

As you can see from the image above, my screen resolution's width is 1920 pixels, thus that is the largest width in my example image above and those below. But some screen resolutions are larger.

So let's say you wanted to create a design and weren't aware of how the themes display in your browser and you placed your image that you wanted to use in the center of your design.

As you can see, anyone with a screen width smaller than 1920 wide will not see the full picture that I used. And pretty much anyone with a screen width 1280 or less won't see any of it.

Now let's take a look at a design that doesn't just have one focal point. In this case there many characters from Disney's Beauty and the Beast shown in the following design. And as you can see, not every screen resolution will see all the characters.

This one below has a specific focal point of the cat sleeping on a tree branch, and in this case, the focal point will be viewable in probably all screen resolutions. When I create a design I use a guide of 1024 and always try to keep the main focal point of my designs within that guide. That way I know that the majority of screen resolutions will be able to view it better.

Another thing that I've seen happen a lot is people adding a picture that they like to their design, maybe like a wallpaper image that fits their screen resolution but maybe not someone else's, and then they don't even take into consideration the colors they are using for their background and text. The image below shows a theme I made for this example by just downloading a stock image, placing it where I wanted it and saving it. So the picture is on the darker side which will require a lighter color text for visibility but there is a white background. While I'm still able to read the white text on the white background because of the drop shadow that's automatically put there, it's not exactly appealing. Nor is the fact that the picture I placed in my design just abruptly stops.

If you take a little extra time, you can make a much more appealing image. So what I did was take the color picker tool (just in case the black wasn't a pure black ... though it was) and select the darkest color at the bottom of the image I added. Then I filled the background with it. Now when I do these, I use multiple layers in case I need to make adjustments to one particular thing without messing with anything else. So the image I added was actually on a second layer and I filled the first layer with the black. Like so:

You can see where the edge of the image I added ends because of that raspberry color at the top left. What I did then was take the color picker tool again and select the brightest of the color at the very top then take a large soft round brush and paint a bit of the edge on a new layer BEHIND the layer with the image on, in an attempt to create a similar raspberry glow at that corner.

And with the image visible over it.

Now as you can see from the image above, you can still see a small bit of the edge. That's easy to deal with. For me I used a layer mask but another easy way is just to use a soft round eraser brush at least 100 or so in size and carefully erase it. I went from the very bottom of the image and upwards at an angle until that visible line was gone. This is how it turned out:

It now blends in perfectly, and there is no longer an abrupt cut off of the image like I showed you above. It makes for a much more pleasing appearance in all screen resolutions.

Well, I hope this has been helpful! If you'd like to see the design directly above in action, you can find it here: https://addons.mozilla.org/en-US/firefox/addon/floral-bokah/