[GUIDE] Making 32-Bit Icons For Your XMB

[RaiderX]

Ok, I noticed people want a tutorial for this, so here it goes. I hope that people who read this will use their newly acquired knowledge to release some really cool themes and such.

Making 32-bit icons, despite what you may think, is very simple. Even though this tutorial may seem long, it's not. Once you go through it, you'll remember how to do it for every icon and have clean cut icons in no time!

This tutorial is made for Photoshop users.

Alright, well, the first thing you need is the icon you want to use. For my guide, I'm going to be using this icon:



Now once you have your icon, you simply make a new image of the correct dimensions for the icon you plan to use it for in the XMB and resize the icon to fit on it. In my case, it is 64x64 for the music icon.



Fill the background layer with black.



Now drag or paste the icon onto this new canvas and resize it.



Duplicate the icon layer and now either press Ctrl + U or go to Image > Adjustment > Hue/Saturation and change it to 100 lightness and 0 saturation.



This will make the duplicated layer a simple white silhouette of the icon.



Now hold down the Ctrl key and while holding it down, left click on the thumbnail of the white silhouette in the layers window.



You will notice the icon gets outlined with a selection.



Now right-click, and select "Save Selection".



Save the selection as a new channel named "Alpha 1" like so:



You can now press ctrl + D to deselect the icon and you can delete the white silhouette layer.

The next few steps are only so you can learn how this works. It only takes a minute and I urge you to just follow the steps so you have a better understanding of this.

Now click on the channels tab and you'll see RGB, Red, Green, Blue, and Alpha 1.

RGB is linked to the Red, Green, and Blue channels. You can mess around making different channels visible and you'll notice if you select just two color channels, the whole image will only contain those colors, and if you select a single color channel, it becomes grayscale.

So now that you see how these channels work, you can take a look at that Alpha 1 channel you created before. It isn't linked like the color channels.

Make the Alpha 1 channel visible. You'll notice the icon stays as it is, but the background becomes colored. This shows what will be visible and fills the invisible space with a color.



Basically, the alpha channel is just a grayscale layer that defines the opacity/transparency of each pixel. White is 100% opaque and black is 0% opaque. A gray shade in between will be slightly transparent. You can use this to make some cool gradients and such, but remember that each shade used in the alpha channel counts as another color so it could make your image too big if you have a lot of colors in it, you'll end up having to reduce the colors.

So now that you understand how the alpha channel works, you can make it invisible again since it works from "behind the scenes" or so to say. the alpha channel will stay there and the PSP will read it to define transparency for the icon.

Now you may need to reduce the colors of your icon. Go back to the layers tab and now go to Image > Mode > Indexed Color... And use this to reduce the colors of your image. I used 150 colors, but it differs depending on how many colors you actually have in the image to start with. You might not even have to reduce the colors if you only have a few. If you end up with an error when trying to replace the image in Zinga's RCO editor, then you'll have to come back to this step and use less colors.

So here's my image after reducing the colors:



Still looks pretty good. Now go to Image > Mode > RGB Color.

If you want to check, you'll notice the Alpha 1 channel has remained in tact the whole time.

Now simply save the file as a .BMP and select 32-bit:



Now all that's left is to import the image into an .RCO either by hex editing or more easily with Zinga's RCO editor. If it goes through correctly, it should show up just fine in the XMB. If the RCO editor gives you an error thats says you may have more than 256 colors, go back to the step where we made the image indexed color and choose less colors to try and make it smaller.

So you see, it's really not all that complicated at all. It's so simple. So get out there and make some hella cool icons! :D

[Brent2]

i dont know about you, but i known about this process for a while now...I SHOULD HAVE MADE A GUIDE WAHHH!!!!,

[RaiderX]

Originally Posted by Brent2

i dont know about you, but i known about this process for a while now...I SHOULD HAVE MADE A GUIDE WAHHH!!!!,

lol, a lot of people didn't know how to do this, so I came with help.

[bubbles]

Ive tried this and cant get it to work.

It keeps telling me that I cant go below 216 colours whenever I go to indexd colour.

So I put the colours at 216 and when I save the bmp and try to put it into xmb icon packager it tells me that they need to be 8bit with no more than 256 colours.

Any ideas?

Cheers

P.S its most probably me doing something wrong but I cant see what it is.

[RaiderX]

Originally Posted by bubbles

Ive tried this and cant get it to work.

It keeps telling me that I cant go below 216 colours whenever I go to indexd colour.

So I put the colours at 216 and when I save the bmp and try to put it into xmb icon packager it tells me that they need to be 8bit with no more than 256 colours.

Any ideas?

Cheers

P.S its most probably me doing something wrong but I cant see what it is.

Well, don't use xmb icon packager for one thing. Use ZingaBurga's RCO Editor, it's much better and more useful.

I don't see why it would tell you you can't go below 216 colors... uplolad the image you are using.

[Games like a Grrl]

Cheers fot the tut, Raider, it's gonna really help.

[eric112490]

wow raiderx i had no idea you were the guy from qj...wow

[bubbles]

Originally Posted by RaiderX

Well, don't use xmb icon packager for one thing. Use ZingaBurga's RCO Editor, it's much better and more useful.

I don't see why it would tell you you can't go below 216 colors... uplolad the image you are using.

It tells me the same thing when I try using ZingaBurga's RCO Editor.
Im in work at the moment but when I get a chance ill upload the picture, but I dont think its a problem with the Icon because I tried it with the Icon you posted at the top, and it does the same thing.

[teargas647]

thxkbai

[bubbles]

Originally Posted by bubbles

It tells me the same thing when I try using ZingaBurga's RCO Editor.
Im in work at the moment but when I get a chance ill upload the picture, but I dont think its a problem with the Icon because I tried it with the Icon you posted at the top, and it does the same thing.

Ive now managed to ge the icons into the topmenu_plugin.rco using ZingaBurga's RCO Editor. But when I flash the file to my psp I just get blank icons(No Icon at all).

Any help would be greatly appreciated