How to make a Homebrew Channel Theme.

Discussion in 'Wii - Tutorials' started by MarcusRaven, Oct 8, 2011.

Oct 8, 2011
  1. MarcusRaven
    OP

    Member MarcusRaven HBC Theme Maker

    Joined:
    Feb 5, 2010
    Messages:
    928
    Location:
    N. Carolina
    Country:
    United States
    How to make a
    Homebrew Channel Theme.
    [​IMG]
    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:
    [​IMG]
    (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

    [​IMG]
    This is the standard definition background. If your Wii settings are set to Standard (4:3), this is that background that will be shown.

    [​IMG]
    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:


    [​IMG][​IMG]
    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.

    [​IMG]
    [​IMG]
    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:

    [​IMG][​IMG]
    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.

    [​IMG][​IMG]
    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:
    [​IMG]
    [​IMG]
    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.

    [​IMG]
    [​IMG]
    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.

    [​IMG][​IMG]
    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:

    [​IMG][​IMG][​IMG]
    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.
    [​IMG][​IMG]
    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.

    [​IMG]
    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.
    [​IMG][​IMG][​IMG][​IMG]
    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.

    [​IMG][​IMG]
    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.

    [​IMG][​IMG]
    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.

    [​IMG]
    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.)

    [​IMG]
    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.

    [​IMG]
    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>
    
    I had to do some formatting so this would display right on the forums. In your xml file, keep the text between the long_description tags to a single line with no breaks.

    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:

    [​IMG]
    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.
     
  2. SifJar

    Member SifJar Not a pirate

    Joined:
    Apr 4, 2009
    Messages:
    6,022
    Country:
    United Kingdom
    Just a thought, you might want to add a link to ThemeShooter (http://www.wiibrew.org/wiki/ThemeShooter) for creating a mock-up of a theme once it is complete. (ThemeShooterTK is probably the best version for Windows+Linux, ThemeShooterX for Mac).
     
  3. MarcusRaven
    OP

    Member MarcusRaven HBC Theme Maker

    Joined:
    Feb 5, 2010
    Messages:
    928
    Location:
    N. Carolina
    Country:
    United States
    I knew I forgot something. Got a bit rushed towards the end. Thanks. Will revise a bit later.

    EDIT: Revised. Thank you!
     
  4. JoshuaEpling

    Newcomer JoshuaEpling Advanced Member

    Joined:
    Nov 4, 2011
    Messages:
    50
    Country:
    United States
    I had a couple of problems when I made a theme. 1) How did you compress your files? I tried to compress mine and get it under a megabyte. Flattened all images. Repacked it and still couldn't get it under a meg. The archive you linked for HBC Classic is almost half of what it is when unpacked. 2) Do you just flatten the backgrounds? I flattened everything and all transparency left the images. I'm just wondering how to achieve a quality look with low file size. Thanks.
     
  5. SifJar

    Member SifJar Not a pirate

    Joined:
    Apr 4, 2009
    Messages:
    6,022
    Country:
    United Kingdom
    Try PNG Gauntlet to reduce the images file size without losing any quality: http://pnggauntlet.com/

    And you shouldn't lose transparency by flattening the images I don't think, but if you do don't do it. PNG Gauntlet should get the file size of any PNG down at least a bit.
     
  6. SifJar

    Member SifJar Not a pirate

    Joined:
    Apr 4, 2009
    Messages:
    6,022
    Country:
    United Kingdom
    You should maybe add some stuff about custom fonts now that HBC supports them with v1.1.0. Also, you can remove the ThemeShooter stuff, as HBC can now take screenshots by press C+Z on a nunchuck, and the screenshots will be more accurate.

    Although ThemeShooter may still be helpful for getting an estimate of what it will look like roughly. Maybe I should add the ability to preview an unpacked theme, to make it easier for previewing a theme as you make it...Do you think that would be useful? (I won't spend time doing it if it's not going to be useful, but if it is I would happily do it as I shouldn't take too long)
     
  7. MarcusRaven
    OP

    Member MarcusRaven HBC Theme Maker

    Joined:
    Feb 5, 2010
    Messages:
    928
    Location:
    N. Carolina
    Country:
    United States
    Wow, almost forgot I wrote this. I've been busy with moving, new job, and Skylanders. >.< Anyway, let's see here...

    The archive you create doesn't have to be below a Meg. I have a couple themes that end up just over and they work just fine. The background image is one that tends to not cooperate. If you are losing your transparencies by flattening, go ahead and leave them layered. The buttons and such usually don't become too heavy, but if they do I would seriously reconsider your theme. Just flatten the background. Hope that helps!

    I just updated today. Give me some time to play around a bit, update some of my existing themes, and I'll revise the tutorial. I'll leave the Themeshooter stuff, since some people may find it useful still. Loving how the font looks now, and can't wait to see how much further theme-making can go with TTF support. ^_^ Now, all we need is background music and its perfect!
     
  8. D3ATH2020

    Newcomer D3ATH2020 Newbie

    Joined:
    Sep 24, 2014
    Messages:
    6
    Location:
    The place your not!
    Country:
    United States
    Okay I created my own theme following the wiibrew.org guide and it don't show up on the Homebrew Channel after I select the theme it just makes the text for the buttons and icons disappear from the buttons.

    Here's the preview image create from ThemeShooter
    preview.png

    Here is a download link to the theme.xml and meta.xml images I won't give out.
     
    jtvjan likes this.

Share This Page