Theme Building 101: Introduction to Theme Building

[amchine]

Introduction to Theme Building

So, you want to build a theme for HyperSpin eh? Every great journey starts with one small step; let’s look at what that step involves. There are few questions that you need to ask yourself before you begin building a theme:


1. Do I have the tools I need to build a theme?
2. What am I building a theme for? i.e. Is it for a specific game or for a whole system?
3. Does the game or system already have a theme? i.e. Do I really need to build it?
4. Will I be able to find the necessary high resolution artwork?
The first question is hard to answer. It really depends on what you want to do with your theme. The minimum software requirements would be: HyperTheme and Adobe Photoshop (or other image editing software capable of creating transparency and saving as .png). In order to utilize all of the theme building possibilities you should tack on Adobe Flash (or other flash software). Of course your level of personal experience with these programs will be a factor, but it shouldn’t be a huge one. HyperTheme is designed to handle the bulk of the work for you.


Choosing a Theme

Picking a theme to build can be the most important step. You may want to pick to build a theme for a game or system that you love or you may simply wish to contribute to the project and show your support, either way you should pick something that you can handle and have fun with it. Theme building should be a fun and rewarding way for you to contribute to the HyperSpin community, not a second job. As an example I’ll walk you through the process by picking a game and building a theme for it. For fun I’ll pick one of my favorite games, Aero Fighters. I remember playing Aero Fighters in the arcade as a kid and on my M.A.M.E. as an adult so I know that this will go in the M.A.M.E. section of HyperSpin. Let’s see if anyone has built a theme for it already.

Sifting through the downloads section on the HyperSpin website shows me that this particular theme is not available for download, but that does not mean that it’s not a work in progress or has already been submitted by another user. To confirm that it’s not simply awaiting approval we need to check the Theme Announcements section of the forum.

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro01.jpg

*EDIT (Bent98)* The Theme Announcements thread can be a bit more trouble to sift through due to the large number of themes in progress. Please refer to the thread below as it lists all the completed themes and is updated daily.

http://www.hyperspin-fe.com/forum/showthread.php?t=1078 (http://www.hyperspin-fe.com/forum/showthread.php?t=1078)

If the theme you wanted to make is already on the completed list below why not make one thats on the requested theme list found in this thread list below:

http://www.hyperspin-fe.com/forum/showthread.php?t=111 (http://www.hyperspin-fe.com/forum/showthread.php?t=111)

There doesn’t seem to be a post for an Aero Fighters theme so we have the green light.

Note: You are free to submit a theme for a game or system that already has one, however it does more for the overall project to create a theme for a game or system that has none.

It’s not a bad idea to familiarize yourself with the game and it’s history before you begin, especially if you are dealing with a game you have never even heard of. A quick search on mameworld.net/maws (http://www.mameworld.net/maws/) shows us that the rom name for Aero Fighters is “aerofgt,” that the genre is “Shooter,” and that the game was released as Sonic Wings in Japan.

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro02.jpg

This information could come in handy when searching for artwork and the rom name will be especially important when naming our theme.


Finding Artwork

Now that we have a good idea of what we are working with let’s start looking for some artwork! Let’s consider first what we are going to be looking for:

1. A large title.
2. Some sort of high resolution image or images to fill the screen.
3. A background.
4. A wheel image.
An excellent place to start is by looking for a flyer of the game. A search at arcadeflyers.com (http://www.arcadeflyers.com/) yielded a high resolution scan of the flyer, perfect!

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro03.jpg

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro04.jpg

This image will provide us with an awesome title that can easily be resized and used as the wheel image, thus serving two purposes! However, it doesn’t give me much of an art direction. While I might be able to utilize the other images presented in some way, I think I’m going to search for some other artwork. I found a few high resolution scans of the game inserts at mameworld.net/mrdo. (http://www.mameworld.net/mrdo/mame_artwork_ingame.html)

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro05.jpg

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro06.jpg

These planes look like they might make good foreground pieces to fill the screen, and maybe I can bring in the character’s portraits somehow. Now let’s figure out what we are going to do about the background. Your background can be anything from a solid color to a piece of artwork that is fully incorporated into your theme; it’s really your call. I like to use the original flyer and cabinet artwork as a guideline for my themes, and in this case the cabinet marquee used a rather boring blue background, looking back on the flyer I think I’ll make an orange sunset background. Let's open the images we found into an image editing program and see what we can come up with.


Editing Artwork

This isn't a Photoshop tutorial and if you don't know the first thing about image editing you might want to check out billpa's video tutorials that can be found here:

Photoshop Video Tutorials for HyperSpin (http://www.hyperspin-fe.com/forum/showthread.php?t=281)

There are a few things to remember about your images:

1. All images must be saved as .png.
2. Background size should be 1024 x 768 pixels.
3. Wheel images must be no wider than 400 pixels.
4. Transparency is your friend!
Here are the images that I created after a bit of Photoshop work:

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro07.jpg

The checkerboard represents transparency so that whatever is behind my image will show through. I gave the planes some motion blur so that when we put them into the theme we can have it look like they are moving. I cutout the portraits one at a time and then l layered them together. Here is a mockup of what I want my theme to look like using these images and a preview of the video:

http://www.hyperspin-fe.com/forum/images/tutorials/tutorials/intro08.jpg

Now that we have the necessary components ready, let’s open up HyperTheme and move onto the next tutorial: Theme Building 102: Intermediate Level (http://www.hyperspin-fe.com/forum/showthread.php?t=596)


Some helpful links


http://www.thecoverproject.net/ (console game box art)
http://www.cdcovers.cc/ (CD and DVD covers)
http://www.arcadeflyers.com/ (flyers)
http://www.mameworld.net/mrdo/mame_artwork_ingame.html?p=a#here (inserts)
http://www.vgmuseum.com/ (loads of artwork)
http://www.mameworld.net/maws/ (rom info)

Updates:
07-08-2008 Added a link to billpa's video tutorial thread.
07-09-2008 Added link's to billpa's other video tutorial threads.
09-02-2008 Changes made referring people to the Wiki page, consolidated links for billpa's video tutorials.
10-15-2008 Changes made referring people to the Themes completed and request threads. (bent98)



This tutorial written by amchine. HyperSpin and HyperTheme written by BadBoyBill.

[amchine]

Sticky me! Also if anyone has and thoughts or additions feel free to post them!

[brian_hoffman]

Great work.. This will be stickied.

:)

Thanks givin

[Dazz]

amchine - you are the man! You're freaking insane and artwork skills are awesome. Would you happen to know where a good tutorial is on cutting out images? My images always look like crap when I try to cut them out.

[billpa]

Would you happen to know where a good tutorial is on cutting out images? My images always look like crap when I try to cut them out.

Ive been working on a couple of video tutorials...one on tracing in Illustrator and another on cutting bitmapped images in Photoshop. The more I see people creating themes, I think the Photoshop tutorial would be the best one to do first since Illustrator as a bit steeper learning curve. Work is pretty slow tomorrow so I will try to put something together that shows several different ways to cut out an image. Just a question...do most people have Photoshop? I was going to try to do a tutorial for Gimp but I am a lot more experienced in PS so I would rather show that instead.

Bill

[amchine]

Billpa, I would love to see your Illustrator tutorial! I don't know about most people having Photoshop, but the basic principles should apply to whatever image editing software they are using. I used Paint Shop Pro for years before moving to Photoshop and the transition was pretty smooth.

Dazz, I don't know of any awesome tutorials, but you can probably find a ton with a google search. I might write one for HyperSpin purposes too. That would be something I could work on.

[billpa]

Actually the two are very similar if you are familiar with the pen tool. Although there are more steps in tracing with Illustrator, especially if you are using compound paths and clipping masks. I will definitely whip up a quick tutorial on cutting in PS tomorrow. That should be easy. If anyone has something specific they would like to see cut out, please post a link to the image and I will use it in the tutorial. It can be complex if you like although I will have some simple examples to begin with.

Cheers,
Bill

[BadBoyBill]

I think it would be good for you to mention the matting tools. Remove white matt and black matt and defringe. Also that after cutting an image out its really good to add a black background to see how good you really cut something out. You might see lots of white edges around a cut out image, a sure sign of a poor cutout job. When placed on a black background you can really see how good of job youve done. Another trick I use to make the edges of images look really great is to clone the nearest pixels all round the edge. A tedious but worth while process to have that perfect cutout image.

Also I havent used it in a while but a really good tool that works amazing is the onONe Mask Pro photoshop plugin. If you can get that it really makes some jobs insanely easy with a very professional look.

And the easiest and most simplest way to cut an images out with a contrasting backgrounds is simply just using the magic wand tool. But theres only certain images that this tool will work properly on, rarely used but when it can be used you can adjust the threshhold to grab the background right out of the image.

Lastly a more advanced technique is to really study up on how to use channels in photoshop. Ive seen entire books written on just working with channels. But basically it works like this. You can view an images channels using the channels tab (Red, Green , Blue), usually next to the layers tab. Click one channel at a time and you will see that usually one channel will be more prominent from the background than the other channels. You can really isolate simple images right out of the background using this technique.

Theres other techniques I use but these are pretty much the main ways I do it. Learn to use the pen tool and learn how to make corner anchor points by alt clicking a point and you'll be good in no time. Im sure billpa will cover some of these and some of his own personal techniques in his tut.

[billpa]

Well I completed 3 tutorials today that cover cutting out in Photoshop. I am working on compressing them and uploading them to Vimeo so that you can watch them in HD. I should have it done by tomorrow. I might have part one done today but its the most basic tutorial covering cutting out a solid background.

Bill

[BadBoyBill]

Great billpa, cant wait to see them, I'm sure this will help the community alot.

[amchine]

Awesome Billpa! I'm stoked!

[Sistemika]

Amchine, this is a GREAT tutorial. I didn´t see other so good than it.

I´ll try to use this tutorial to contribute by the community.

THANK YOU SO MUCH!!!!

[amchine]

Amchine, this is a GREAT tutorial. I didn´t see other so good than it.

I´ll try to use this tutorial to contribute by the community.

THANK YOU SO MUCH!!!!

No problem! I'll write another one once HyperTheme is released!

[EvilDindon]

Hi,

I'd like to create some themes of my fav games, but I must have missed something :

Where can i dowload hypertheme ?

[kingb33]

Hi,

I'd like to create some themes of my fav games, but I must have missed something :

Where can i dowload hypertheme ?

its not rdy for download yet...we are waiting for it :)

[Thepriest]

nice job im also thinking of building some themes :)

[skarstoker]

thanks anyway I will read it more carefully to understand

[Jonekare]

For theme building should have good graphics knowledge.

[donnei1979]

For theme building should have good graphics knowledge.

Nope, just Google and a pentool.

[puckalb]

I still run normally photoshop online friend. You then just click on the image below onto your computer then normal editing, then save it .. If the problem persists, I know notice to its correct .. thanks.