How to make a Homebrew Channel Theme.
How to make a
Homebrew Channel Theme.
By MarcusRaven
V1.3
So, up until now you've most likely been using the default theme for the Homebrew Channel. "But wait, Marcus, you said DEFAULT theme. Does that mean I can use other themes?" Yes, in fact, it does. Using a custom theme is as easy as launching any other Homebrew, and making them is almost as easy. "Woah, woah, woah. I can MAKE a theme for the Homebrew Channel?" If you have a little bit of knowledge with image editing programs, even less knowledge with RGB color codes, and a surprisingly insignificant amount of knowledge with archiving and compression programs, then yes, you can.
In case you didn't follow all that, here's the short of it. It is ridiculously easy to make your own theme for the Homebrew Channel. You'll need the following things:
1) A template to work from (for the easiest and fastest process). Here's the Classic HBC Theme. It is how I start all my themes, and what we'll be using in this tutorial.
2) A good image editing software. (I personally use Fireworks. I know, old school, but its what I prefer. If you use Paint or another lackluster program, your theme will look just as lackluster.)
3) An archiving program that can do ZIP files. (WinRAR is easiest, WinZIP will work, or anything else you prefer. I use WinRAR.)
4) *Optional* Some information on RGB color codes. You can also use a website. A good one is colorpicker.com. Pick your color there, then look at the last three boxes on the right. The values you need are the R (Red), G (Green), and B (Blue) values. The first three boxes are H (Hue), S (Saturation), and another B (Brightness). Don't worry about those.
That's it! Really. Sounds simple so far, right? So, right now your Homebrew Channel looks something like this:
(Screenshot from WiiBrew.)
Well, using the Classic Theme, we're going to replace every image in the theme to make it our own! Let's start with what each graphic in the pack is, so we understand where it will be in our theme. (A very important thing to know. If you skin your background to look like a button, and a loading icon with your background, it'll look really silly. Lol.)
Important Things to Remember
When making your images for your theme, make sure you do NOT change any of their dimensions. This is why I consider it easier to use the Classic Theme as a base for my work. If your images aren't the proper dimensions, your theme will not display properly, and could potentially freeze the Homebrew Channel or your Wii. (There should be no risk of bricking, just freezing for that session.) IF this happens, you need to revert your theme back to the original, just delete the Homebrew Channel Save Data in your Data management screen. Then make sure you fix and repack your theme before running it again.
All images are in PNG format. Any other format will not be read when loading a theme, so remember to save as a PNG!
The Theme Broken Down
The Backgrounds:
Let's start with the most prominent part of any theme. The Background. There are two that should be included in every theme
This is the standard definition background. If your Wii settings are set to Standard (4:3), this is that background that will be shown.
This is the widescreen background. Having your Wii set to Widescreen (16:9) will make the Homebrew Channel show this image.
The Background is what defines your theme. There are loads of online wallpaper sources, and if you feel adventurous you can make your own from scratch.
The Menu Navigation Buttons:
These are the Apps Grid buttons. When your homebrew apps are shown as a grid (Homebrew Icons only) then these buttons are used. The first one is the standard state, and the next one is the hover state, when the cursor is over that button.
These are the Apps List buttons. When your homebrew apps are shown as a list (Icons and Short Descriptions) these are the buttons used. Again, the first is the standard state, and the next is the hover state.
The Page Navigation Buttons:
The Apps Next buttons are only shown when your homebrew apps continue onto another page. Standard and Hover states. Not shown at all if you have only one page of apps or are on the last page of apps.
The Apps Previous buttons are only shown when you have apps on a previous page. Standard and Hover states. Not shown at all if you have only one page of apps or are on the first page of apps.
The other Menu Buttons:
The Button images may look a lot list the Apps List buttons, but are used on the Home screen of the Homebrew Channel. This is where you can access BootMii, the HBC Credits, return to your Wii System Menu, or just shut down.
The Button Small images are for the settings page when you press the 1 Button on the remote. Its where you choose your device for your apps and your sorting method.
The Button Tiny images are for the three choices you have when you open a homebrew app. (Delete, Load, or Back. All three use the one button set.)
The Asthetic Elements:
The Bubble are just that. Bubbles that float by over the background and pop when hovered over by the cursor. This is where you can add some charm to your theme, or make something really annoying.
The Content Arrows only appear if the information on an app's load screen exceeds the space it is shown. This lets you know that you can scroll the information in the direction of the arrow. They appear over the dialog background, so be sure they stand out.
The Dialog Background is where app load screens are, as well as any menu screens and the HBC Credits. The Button series appears most often on this background, so make sure the buttons and background contrast to a degree.
These dialog icons only appear when the HBC needs to show a confirmation or error message. You'll see them most often if an app has trouble loading or you go to delete an app. Being so small, and the fact that they are rarely seen in a working HBC setup, skinning these are optional.
The Network Icons sit in the lower right corner of the main HBC Screen, and show whether or not it can access your internet connection. If not, it will stay dimmed. It flashed between the two when its checking a connection and stays on the active icon when a connection is established.
The USBGecko icons do the same thing for a USBGecko connection as the WiFi icons do for the internet connection. If you don't have a USBGecko, this will stay dimmed. Since this is on the main screen, if you have one or not, your should really skin this.
This is the loading progress background. It holds the loading bar (something we'll see later). The bar appears where the cutout in the middle is, so keep that in mind when changing this image. (Personally I usually just change the color of it.)
The Throbber is like the hourglass on a computer. If the HBC is busy reading your device for apps, the throbber spins in the middle of the screen. Since the image is coded to spin, you just need a static image that looks good spinning.
That is everything in a Homebrew Channel theme, graphically speaking anyway. Seems like a lot? It really isn't once you get down to it. So let's run through the actual steps (recommended by me) to take when making your theme.
The Process of Construction
By now you should have an idea of the theme you wish to create. Gather the resources you wish to use, and get ready to begin.
Instead of listing all those images again, I'll simply put their file names, sizes, and tips or recomendations for them. Open each graphic in your image editing program (I use Fireworks), and don't mess with the canvas size. You can change anything else, but not the size.
Keep in mind that the Homebrew Channel automatically puts all needed text for button actions on the buttons itself, so putting text on your buttons isn't necessary and may create a cluttered look.
Background - 640x480 - The background is where file size can add up. Work in layers if you need to to keep things organize, but be sure you save the final image as a FLATTENED PNG. I'll explain why here shortly. If using layers, you may want to make a working file in case you decide to make changes.
Background_Wide - 852x480 - The widescreen background can definitely be a file size giant, so remember to save as a flattened PNG, and make a working file for this one too if you want. Sometimes doing this background first then just cropping it down to SD size works more easily for some projects.
Apps_grid - 144x64 - Keep in mind that the homebrew app's icon will be taking up most of the space here. If you put an awesome image in the middle of the button, it will rarely be seen. Only a few apps don't come with icons, but you don't want to bank your design on that.
Apps_grid_hover - 144x64 - Same thing goes for this one, but try to also make it stand out in such a way that the user can see that they're selecting a specific button. Subtle differences that still stand out can look really sleek and professional.
Apps_list - 432x64 - The app icon will be in the left of the button, but there will be text to the right. Don't make your button drown out the text to where it can't be read.
Apps_list_hover - 432x64 - Same thing to consider with this image as with the grid hover state.
Apps_next - 64x64 - Something that obviously points to the right will help the user (especially the new one) to see what this button does. But also consider making it fit your theme. An arrow is a little bland, but if you have a Zelda Theme, a hookshot or bow and arrow would get the point across well. This is the inactive state, so give it a bit of shade or more transparency.
Apps_next_hover - 64x64 - Same pointing thing to consider. To make this easy, just duplicate your inactive state, and increase the transparency so its more solid. If you shaded the other one, remove the shade so this one lights up.
Apps_previous - 64x64 - Unless your theme can use asymmetrical navigation buttons, the easiest thing to do here is duplicate your next buttons and just flip them horizontally.
Apps_previous_hover - 64x64 - Same things to consider from apps_next_hover, which you could also just flip horizontally.
Bubble1 - 64x64 - This will float in the background of your theme, popping into smaller versions when hovered over by the cursor, so make something that fits your theme well. Rounder things tend to show up better. Repeat for bubbles 2 and 3. You could make them more transparent to add an illusion of depth, like the classic does, or make all three completely different for a charming effect.
Button - 340x48 - Since these are the Home button menu, you need to keep in mind that there will be nothing but your background behind them and important feature text on them.
Button_focus - 340x48 - Like all the hover states, keep in mind the differences you need to be able to see.
Button_small - 200x48 - Your device menu and app sorting options are on this, so make them able to contain readable text.
Button_small_focus - 200x48 - Another "mouse-over" state. I know, there's a lot of these and really not much else to say.
Button_tiny - 132x48 - Your app buttons. Delete, Load, and Back all use the same button, so keep that in mind in your design.
Button_tiny_focus - 132x48 - Yup, another one.
Content_arrow_down - 32x8 - Just shows up if there's scrollable text. You can keep it as is, color it to match your theme, or come up with something entirely new. Eight pixels tall isn't a lot of space to work with though. I usually just colorize these.
Content_arrow_up - 32x8 - Just flip the down arrow vertically. If you want to make it completely different, just make sure the user understands why its there.
Dialog_background - 520x360 - This is used a lot, so make sure that buttons can be seen clearly and text can be read.
Dlg_confirm - 32x32 - Not really used often. You'll see it when you go to delete an app. You don't have to skin it if you don't want to. Same goes for dlg_error, dlg_info, and dlg_warning. If you decide to, sprites usually look pretty good.
Icon_network - 32x32 - This is the inactive network icon, so think about maybe dimming it or making it really transparent. I usually use 50% transparency, and sometimes remove all color to make it grayscale. Something to consider.
Icon_network_active - 32x32 - The nextwork is active, so brighten and liven this one up! I usually keep all color, but reduce transparency to about 80%.
Icon_usbgecko - 32x32 - Same with the network icon. The two icons sit next to each other, so if you skin one, be prepared to skin the other.
Icon_usbgecko_active - 32x32 - Also the same with the network icon. With all four of the Network and USBGecko icons, sprites don't look bad. Regular images reduced to 32x32 usually end up looking spritey anyway.
Progress - 400x112 - Since the loading bar will go over the middle of this regardless, think about what's in the middle of what you use. Most homebrew apps don't take very long to load anyway, so this image won't be on screen very long. You could use the original as a transparent overlay to help you figure out where the image will be seen, then remove the overlay when you're done.
Throbber - 64x64 - Only seen when the HBC is reading the devices for apps, but it sits in the middle of the screen. You want it to be something that looks good rotating, since the HBC spins it. I've used Power Stars, round logos, and sometimes just made my own circle with an image pasted inside. Whatever suites your theme.
Wow, that's a lot. Every single one of those graphics created for your theme? Great. I highly recommend keeping all graphics for one theme in its own folder, as it makes it easier to pack here shortly.
A WARNING about your background images!
I mentioned that you need to save your backgrounds as flattened png images because their file size gets large otherwise. Here's why. When you load your theme it may display just fine, but the next time you go to the channel it reverts back to the Dark Waters theme. This is because your theme's images are too large in FILE SIZE. When you quit the HBC it save the current theme to the save file. That save file has a cap, however, and if the theme is too large for the save file to handle, it reverts to the original theme. The main backgrounds are usually the culprits. If you've flattened your backgrounds, but your theme still won't stay, then you have some rediculously complicated button graphics! Save every suspect file as a flattened PNG just to be sure. My personal rule of thumb is that if a single file is over a Megabyte, you need to flatten it.
The XML File
When your graphics are all done, you need to make (or, more easily, modify) a theme.xml file. Remember the RGB info I was talking about earlier? This is where you need it. If your theme will look good with the original color text and a blue loading bar, then just copy this file into the same folder as your graphics and leave it alone. You can use WordPad or any other text editor to modify this file. Just be sure it saves as an xml file. This is the contents of the original:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<theme version="1">
<description>HBC Classic by drmr</description>
<font_color>
<red>12</red>
<green>56</green>
<blue>105</blue>
<alpha>255</alpha>
</font_color>
<progress_gradient>
<upper_left>
<red>131</red>
<green>194</green>
<blue>214</blue>
<alpha>229</alpha>
</upper_left>
<upper_right>
<red>131</red>
<green>194</green>
<blue>214</blue>
<alpha>229</alpha>
</upper_right>
<lower_right>
<red>12</red>
<green>56</green>
<blue>105</blue>
<alpha>229</alpha>
</lower_right>
<lower_left>
<red>12</red>
<green>56</green>
<blue>105</blue>
<alpha>229</alpha>
</lower_left>
</progress_gradient>
</theme>
A few tags you need to look at:
font_color - This is the color of ALL text used. Place the Red, Green, and Blue values of your font color in between their respective tags. For the font, don't adjust the alpha unless you had plans for transparent text. 255 is the max value for RGB and alpha. If you put it for all values, you'll have solid white text.
progress_gradient - This is the loading bar! It acts as a four-cornered gradient. So whatever color you set each color, the bar will transition between the colors in those corners. If both left colors are red, and both right colors are blue, you'll have a red to blue gradient. Something to consider is to put a light set of colors on the top or bottom corners to create a rounded effect. You can set an individual alpha setting for each corner as well. I usually leave it alone, but if you know how it will look (or don't mind experimenting) you can adjust it. Just remember that the max for all these values is 255.
Packing it up!
Now its time to pack your theme. Highlight all the graphics and the theme.xml file, and use your archiving program to add them to a theme.zip file. IT HAS TO BE NAMED THEME.ZIP! I use WinRAR, right clicking and choosing Add to Archive...
Once the theme is in theme.zip move it to its own place (like the desktop) for now. We are almost done.
This is the homebrew icon. Once you modify this image, place it in the same place as the theme archive. NOT IN THE ARCHIVE.
Finally, you'll need a meta.xml file. Here's that:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<app version="1.0">
<name>HBC Classic Theme</name>
<version>1.0</version>
<release_date>201010190000</release_date>
<coder>drmr</coder>
<short_description>The Classic Homebrew Channel theme.</short_description>
<long_description>Run this like an application to apply the theme to the Homebrew Channel.
Revert to the default theme by deleting the Homebrew Channel "savegame"
using the data management in the Wii System Menu.</long_description>
</app>
Name is what you will see as the title of the theme.
Version is the version number. DON'T change xml version or app version, just version by itself.
Release_date is the date you wish to show for its release. It goes YYYYMMDD0000. Keep the extra zeroes on the end.
Coder is the author. If this is your theme, put your name here.
Short_description is what is shown on the app list buttons (the long ones). Try to keep it to a short sentence.
Long_description is the entire information about the theme. You can leave the instructions in there if you wish (recommended), and add anything else you like between the tags.
With meta.xml, icon.png, and theme.zip all in the same place, make a new folder. Call it what you like. "MyHBC Theme" is an idea. Then place that folder into another new folder called "apps."
If you just want to use the theme, drop the apps folder onto the root of your SD card, say yes to merging with the current apps folder, and then run it from the Homebrew Channel! You're DONE!
If you want to distribute your theme online, use your archiving program to compress it. It can be a RAR or a ZIP, or whatever. Upload to FileTrip or your favorite upload site. You're also DONE!
Taking a Screenshot
If you plan to upload your theme to be distributed online, you need a screenshot of it so people can see it. The easiest way to do that is to use ThemeShooter. It is located on this page. Download the version you need from there. When you run it, you simply point it to your theme.zip file, then name the screenshot, and you're done! You'll get a lovely image that uses your SD Background, Apps List buttons, navigation arrows, bubbles, and the network and USBGecko icons. This will make it easier for users to determine if your theme is what they want. It'll look like this:
Themeshooter automatically adds that "the homebrew channel" image to the bottom left, because the Homebrew Channel itself does have that. Something to keep in mind when designing your backgrounds.
UPDATE: Another way to take screenshots of your theme is with the Homebrew Channel itself. Connect a Nunchuk to your Wii Remote, and the just press C+Z to capture the shot. (It takes a moment to save directly to the SD card.)
NOTE: Screenshots are saved in standard definition regardless of your widescreen settings. If you are using widescreen, your screenshot will be squished. This can be remedied by stretching the image to 852 pixels wide in an image editing software.
A Few Last Words
If you have any questions, please feel free to ask them. Keep in mind that I am used to using Fireworks, WinRAR, and WordPad. Any questions for other software I may not be able to answer.
To check out the themes I've made, request your own, or vote on my next "premium (see - dual background)" theme, head on over to the topic below:
http://gbatemp.net/t...-skinning-poll/
Change Log
1.3 - Added revision for HBC Screenshots - 6/18/2013
1.2 - Revision for Themeshooter - 10/9/2011
1.1 - Formatting edits - 10/8/2011
1.0 - Initial release - 10/8/2011
Revisions may come at a later date.