Create Your Own Custom Skins: The EASY Way

15 02 2009

For those who like to dabble with digital images, Stu’s Quiz Boxes offers the exciting feature of having a total makeover done by you, the user. And it’s ridiculously simple to do now – just follow this step-by-step guide.

So, what do you need to make a Stu’s Quiz Boxes Skin? Basically, it’s just a folder that contains just three JPEG images named a specific way and formatted to specific sizes. If you can do that, you’ve made yourself a new skin. You can use any photo editing tool to produce the necessary image files – from top-of-the-line Adobe Photoshop to any number of free tools like PhotoFiltre or The GIMP.

Quiz Boxes skins you create should preferably follow some kind of theme. Sure, you can have a whole bunch of random images that make up your Jeopardy game, but what’s the point?  So, let’s go through the images that you’ll need to create to make your own skins -

The Background Image:background.jpg (891×598)

Name: background.jpg Size: 891 x 598 pixels
This image sits behind the game board and is slowly revealed as the game progresses. Your task – find or make a good quality picture of at least this size and resize/crop it to exactly 891 x 598, then save it as background.jpg, preferably as the highest quality (not compressed).

The Foreground Image:

operahouse

Name: foreground.jpg Size: 780 x 585 pixels
This image will be used to create the 30 separate buttons that make up the Quiz Boxes Game Board.  Your task – find or make a good quality picture of at least this size and resize/crop it to exactly 780 x 585, then save it as foreground.jpg, preferably as the highest quality (not compressed). It is recommended that you avoid a foreground image with large areas of white on it.

The Quiz Boxes Breaker Button:

final.jpg (386x265)Name: final.jpg Size: 386 x 265 pixels
This button is displayed before the last question of the game and probably should encompass the overall theme you are trying to get across with your skin.

OK, so as far as organizing the images goes, that’s all you need to do. Three pictures, cropped to specific sizes and named specifically.  Once you have those three images, you need to create a new foldr inside your QuizBoxes\skins folder and call it whatever you like.  In this example, I’d probably call the folder “Sydney Harbour“, so the overall path would be QuizBoxes\skins\Sydney Harbour.  Once you’ve made the folder with an appropriate name (keep the name short!), drop your three images into that folder.

The Magic: Quiz Boxes Skin Builder:

This is the tool that makes the creation of Quiz Boxes skins ridiculously simple.  The  skinbuilder folder is located inside your QuizBoxes folder, at the same level as the quizzes, skins and sounds folders. Open the skinbuilder folder and COPY the file called MakeQuizBoxesSkin from the QuizBoxes\skinbuilder folder into that new skin folder you created and put the three images into. Make sure that you COPY the file and don’t MOVE it.

When you are ready, double-click MakeQuizBoxesSkin in your new skin folder.   A few seconds later (literally), your skin will be ready for use in the Jeopardy game. It will have automatically sliced up your foreground image into 30 boxes and placed the correct dollar labels on each new “button” with translucent text. As well, it added a “QUIZ BOX Breaker!” text lable to your final image.

To check your new skin, start Quiz Boxes, load up a quiz and then select your new skin from the Skins menu.  If there are any problems, go over these steps. You must have done something wrong.

I told you it was the EASY way!

Sharing your skin:

Now that you’ve made your own skin for Quiz Boxes, maybe other Quiz Boxes users would like to use it too!  If you think it’s a really good looking skin and you’d like to share it, all you have to do now is ZIP that folder you made and then email it to stu_hasicATyahoo.com (replace AT with @) as an attachment and I’ll add it to the list of skins at the site for others to download. If you send me your name, I’ll credit you for creating the skin as well. Please – NO inappropriate skins – they will not get published.

How do you “zip” a folder? You can use WinZip that you have to pay for, or you can use 7-Zip for free! You basically run the program and select the folder you created and it will make a single zip file out of that folder and all its contents. When people download it from the Quiz Boxes site, they just unzip it into their QuizBoxes\Skins folder and it will be available for their use!

So what are you waiting for? Start making your own cool Quiz Boxes skins! Tell us all about them below, or if you have any questions, just ask in the comments box at the bottom.


Actions

Information

One response

15 02 2009
Create your Own Skins: Step-by-Step « Stu’s Double Jeopardy!

[...] Skins: Step-by-Step 15 08 2007 PLEASE NOTE: These are the OLD instructions. There is now a MUCH SIMPLER WAY. Don’t waste your time looking here any further. This is ridiculously difficult in [...]

Leave a comment