As Halloween is creeping up on us I've selected a grim reaper clip art image from classroomclipart.com for my test. The downloaded image size is 550 x 367.
Although it has always been stated that Firefox Themes should be 3000 x 200 pixels in size, with the new Static Themes there doesn't seem to be a limit anymore. You really only need, at most, 200 pixels in height though and even some of that won't show on your browser. The width can pretty much be whatever you want it to be. It doesn't have to be 3000 pixels wide anymore, thus I'm using a much smaller image in this tutorial.
So what do you do? Well one thing you can do is when the image is open in your graphics program you can take your Selection Tool and select the first 200 pixels (starting from the top) of your image. Like so.
I have it set up in Photoshop to show the Ruler of an image and in the Preferences I have Rulers set to display in Pixels as opposed to Inches, etc. So when I selected the image I just paid attention to the ruler on the left side until my selection was close to if not exactly at the 200 pixels mark. Keep in mind, once again, that not all of your image will be seen. So think about how much and what parts you want seen. For me, I'm going to adjust my selection by putting my pointer inside the selection and clicking then dragging the section down.
As you can see from the above image, I moved my selection down a bit. It's not necessary to see the tippy top of the reapers head. At this point I cropped the image and saved it to my computer.
So let's take our cropped clip art image into Firefox Color to test it out!
From the Custom Background tab you will see an '...Or add your own' button. Click the button and select your image.
Once the image is loaded you will notice, in this example, that there appears to be more than one grim reaper. That's because there is a setting in Firefox Color that allows for the image to tile, or repeat, in a number of different ways. That, however, isn't something that is available when submitting a Static Theme to Mozilla though. Whether that is something they are thinking of adding at a later time, I don't know. Also, by default Firefox Color aligns your image from the left (which I find strange since themes display from the top right) and aligned from the top.
For this example, though, I'm changing the settings to Align right and No repeat. I didn't change it from Align top though.
Now take notice of how the clip art image displays only once. As you can see, the background color is still pink so you can see where the edge of the image stops. And honestly, you do NOT want that. It really doesn't make for a nice theme if you don't blend your image into whatever background color you choose. But since it's a solid white background we can just change our background color to white.
From the Custom colors tab you can make adjustments. In this example I've changed the background color to white. You can now see that you can't tell where the clip art image ends.
But what about the fact that you can't see the whole face? That's where you adjust the other color options.
Toolbar Color
The above image shows that I changed the Toolbar Color to white, which wasn't exactly necessary because I changed the transparency of the color (A) to zero, which is completely transparent. You can't see any toolbar color anymore.
There is still the matter of the Search Bar Color. It covers the reaper too. So let's adjust that as well.
You can see from the image above that in the example the Search Bar over the reaper's face has disappeared as I set the transparency value to zero again. But if you will notice the top of my browsers itself, my Search Bar doesn't even go over the reaper's face. That's because I've edited my header area to include spacers to make the search bar smaller on purpose. I didn't, and still don't, really like when the search bar goes over the focal point of one of my themes.
Now you can go about editing the other colors until you have everything the way you like.
I've now finished customizing the colors. Pretty simple really. I just stuck with the black and white of the clip art image with the exception of the Tab Highlight Color. For that I selected an orange color, something that went along with the wooden handle of the scythe that the grim reaper is holding.
Now a very cool option when using Firefox Color is the ability to Save your theme.
See the top right of your browser window for the Save button. Click it and you are good to go. If you ever change the theme you are using but wish to go back to the one you have on your computer you just go to the Saved themes tab and click on it. No having to select the image or inputting all the color options over again!
Viola! Your saved theme is available anytime you want to use it!
If you decide you want to upload the theme to Mozilla for others to use, this tool is also helpful in that you can refer back to it, provided you tested your theme in it first, to see what colors you selected. Then it's just a matter of copying and pasting the colors from it to the Theme submission form on the Add-Ons site. Just remember, not all of the options available in Firefox Color are available in the submission form online, in particular the alignment options. You can't tile your image or set up how you want it aligned when submitting it online.
And if you are interested in seeing the theme in action, it's available here: https://addons.mozilla.org/en-US/firefox/addon/scream-for-the-grim-reaper/
No comments:
Post a Comment