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 folder 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.

IMPORTANT NOTE: Windows has a horrible habit of hiding file extensions and just showing the name of the file. If your other photos do not show .jpg on the end of the filename, but your three QuizBoxes skin photos do, then you have actually doubled up the .jpg so it’s background.jpg.jpg for example. This will not work.  Make sure you remove that extra .jpg before going onto the next bit. You can turn off and on the hiding of file extensions in Windows 7 and Vista like this, or in Windows XP like this.

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.

Advertisements

Actions

Information

25 responses

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 […]

22 09 2012
mrainwater1Mandie

Hi Stu! I have just finished making my first quiz and when I tried to do the skin maker it won’t take my images. I think it may be because my files automatically save as .jpeg’s and I don’t have any program to change that… help???
I have verified all of my dimensions are correct, and the maker is copied into the file…

Thanks!

23 09 2012
paralleldivergence

Hi Mandie. If the extension saves as .JPEG, just rename the file. Right clicking the file in My Computer and choose rename. But you must have file extensions visible. In My Computer. Go Alt-T to display tools menu, choose Folder Options, click View tab and find Hide extensions for known file types. Uncheck it.

See my answers to Jeff and Naomi below for more info. That’s usually the issue. If you’re still stuck, zip your images and email to me and I’ll tell you where you’ve gone wrong. It works for too many thousands of people

3 12 2009
Jeff

Hi Stu,
Jeff again. I decided to update my version of Quiz Boxes. I just downloaded version 4.1 and did have the skinbuilder folder. I am now getting an error message simialr to what others have gotten as I read through some posts here. It says :
ERROR! For this process to work you must provide three jpeg image files:
-background.jpg – 891 x 598 pixels in size
-foreground.jpg – 780 x 585 pixels in size
-final.jpg – 386 x 265 pixels in size
Please correct this before running this process again.

I have saved each image as a jpg, in the proper pixels, and renamed the files as directed. I would be happy to send them to you through email to see waht I am doing wrong. Help!

3 12 2009
paralleldivergence

Hi Jeff,
OK – Verify all of this for me:
1. You have a Quizboxes folder
2. Inside it there are quizzes, skinbuilder, skins and sounds folders
3. You opened the skins folder and you created a New Folder, called whatever you’d like your skin to be called – eg. football
4. Inside that folder are the three jpg files you mention above
5. As well as those three files, there is one other file – MakeQuizBoxesSkin.bat which you COPIED from the Quizboxes\skinbuilder folder
6. When you double-click THAT MakeQuizBoxesSkin file in YOUR folder (not in the skinbuilder folder), you still get that error?

If you answer YES to 1 through 5 and NO to 6, then it will work – providing you have not modified ANY of the files in the skinbuilder folder.

4 12 2009
Jeff

Hi STu,
Thanks for getting back to me.
1. Yes. I locate Quizboxes by going to My Computer>local disk. It’s there.
2. Yes. The 4 folders are there in addition to 2 other files- Quizboxes (the app) and Setup Shortcut
3. Yes. I did create a new folder in the skins folder with a short abbreviation, cpi.
4. Yes. Using Irfanview, I opened three jpeg image files, resized them to the exact specs, renamed them as directed, and moved them to the new cpi folder within skins folder.
5. Yes. I did copy and paste the MakeQuizBoxesSkin file into cpi also. There is no file extension (.bat) showing after it but if I hover over it it says the file type is MS-DOS Batch File, size 3.58 kb.
6. Yes. I now double click the copied MakeQUizBoxesSKin file in my cpi folder which contains the 3 renamed jpeg images and I still get that error. I did not alter any other files in the QuizBoxes folder.
I love both the Jeopardy and QuizBoxes programs and hope them use them frequently. I was also excited to learn that I could create my own skins and that the process was easy. What could I try next?

4 12 2009
paralleldivergence

Zip the folder called CPI (right-click on the folder and choose Compress files) and email me that zip file to stu_hasic”at”yahoo.com.

12 03 2010
James D

I seem to have a problem…when I use the “MakeQuizBoxesSkin” button, it does not split up my foreground into squares, so I end up with my custom background and the default box styles. Is there any way to fix this without me needing to individually customize the 30 boxes?

12 03 2010
James D

nevermind. problem solved. I had everything installed under Program Files, and windows 7 won’t save pictures there for some reason. The security permissions are all weird. I reinstalled under My documents and had no problems.

13 03 2010
paralleldivergence

Yes, in Windows 7, Program Files is a protected folder and you must “Run as Administrator” to allow the program to make changes in the folder. Fortunately, QuizBoxes is completely portable, so you can run it from any folder – it’s usually best to do so from a folder where you have read/write and modify access.

14 05 2010
Laura

Hi Stu

I followed your directions to make the skins, but for some reason the dollar amounts are not showing up on the buttons. Any idea how I can fix this?

14 05 2010
Laura

oops! Figured it out – something wrong with my image size vs canvas size…

14 05 2010
paralleldivergence

Well done Laura. I like peole who persevere. Hope you like QuizBoxes.

30 06 2010
Jigesha

Hi. When I downloaded the quiz boxes, it didn’t come with the MakeYourOwnSkin file. How can I get that file?

1 07 2010
paralleldivergence

If you don’t have a skinbuilder folder inside your QuizBoxes folder then you must have an older installation. Just download a fresh install from the downloads page. There is no “MakeYourOwnSkin” file, so I’m not sure what you’re referring to there.

12 11 2010
Naomi

I’m having the same problem Jeff was. No matter how many times I’ve checked my files and your instructions, I keep getting the error:

ERROR! For this process to work you must provide three jpeg image files:
-background.jpg – 891 x 598 pixels in size
-foreground.jpg – 780 x 585 pixels in size
-final.jpg – 386 x 265 pixels in size
Please correct this before running this process again.

Please let me know how I should proceed.

Thanks,
Naomi

13 11 2010
paralleldivergence

Jeff’s problem was that his files were called background.jpg.jpg and foreground.jpg.jpg and final.jpg.jpg. If you have file extensions hidden in My computer, i.e. your other photos do not show .jpg on the end, then these three shouldn’t either – otherwise, you are doubling up and the filenames are wrong.

21 11 2010
roger

simple step by step directions, worked awesome, i can see myself using lots of free time making skins!

3 01 2011
Sondra

I’m trying to make a new skin for a Kanas Jeopardy game. I do not have the file called MakeQuizBoxesSkin from the QuizBoxes\skinbuilder folder. I have something that says read this first, which gives me the same information as this does, and a folder called resources but when I open it nothing shows up there.

3 01 2011
paralleldivergence

This is what the folder structure should look like Sondra. http://i.imgur.com/ttMpd.jpg – if it doesn’t redownload and install the program again because someone has deleted something.

22 03 2011
Mike

Thanks for the program, Stu! I’m a 7th Grade World History teacher and I use this for the chapter reviews. The kids love it!!

Is there a way to recolor the dollar amounts on the panels so that they stand out from the background picture a bit more?

Thanks again! This has been a tremendous resource for my class!

23 03 2011
paralleldivergence

Hi Mike. I assume you’ve made your own skin. The point values on the boxes are a very pale translucent gray. You should avoid using a foreground.jpg file which is mostly light colours. Aim for using something a bit darker.

29 04 2011
Loradae

That’s way more clever than I was expecting. Thanks!

5 05 2011
Terri

I was able to create my skins in the appropriate folder just fine. Now when I load my game and hit the button at the top under ‘skins’ I get an error. Run-time error ’76’: path not found. Please help! Thanks,

5 05 2011
paralleldivergence

Hi Terri,
OK – Verify all of this for me:
1. You have a Quizboxes folder
2. Inside it there are quizzes, skinbuilder, skins and sounds folders
3. You opened the skins folder and you created a New Folder, called whatever you’d like your skin to be called – eg. football
4. Inside that folder are the three jpg files you mention above
5. As well as those three files, there is one other file – MakeQuizBoxesSkin.bat which you COPIED from the Quizboxes\skinbuilder folder
6. When you double-click THAT MakeQuizBoxesSkin file in YOUR folder (not in the skinbuilder folder), it makes all the skin jpg files in your folder
7. When you click Skins option in QuizBoxes, it shows you all of the folder names that were in the Skins folder, including your folder.
8. When you select your skin folder, it displays your skin.

If you answer YES to 1 through 8, then it will work – providing you have not modified ANY of the files in the skinbuilder folder. Please advise exactly where in this process you get what error.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: