[GUIDE] 32-Bit Icons

[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!

[antonyfl]

sweet guide dude! u shoulda posted this in the guides section though

[The_Kills]

Thanks man, I havent created Icons at all, because when i saw how..."un-hi-res" they were I was like...ah whats the point.

Great guide, perfectly used images for each step


Lol hope u like 4 Mil point ur gonna get for this from PSPHaxor

[RaiderX]

Originally Posted by antonyfl

sweet guide dude! u shoulda posted this in the guides section though

I can't post it in there. I looked for a new thread button, but there isn't one. I suppose the mods prefer to move good guides into there instead of having a whole bunch of people posting in there and cluttering up the place with hard to follow guides.

[C-Money]

Great guide!

[newone757]

thankyou so much. thanks to you i now know my error is my indexing colors. the same file i was struggling with all day finnaly worked with 3 colors indexed lol. looks terrible so i might have to make my theme black and white . thankyou atleast now i know it works

[-CHW42-]

this should be stickied, its a good guide for the new gen of xmb icons. plus it makes the noobs stop posting about it. i swear i've seen 5 questions related to 32 bit icons today.

[RaiderX]

Originally Posted by newone757

thankyou so much. thanks to you i now know my error is my indexing colors. the same file i was struggling with all day finnaly worked with 3 colors indexed lol. looks terrible so i might have to make my theme black and white . thankyou atleast now i know it works

lol, you can use more colors if you need to.

[newone757]

^^man i cant even find a pic i can use without indexing it to 3 colors. i dont knwo what the problem is