Written on Mar 21st, 2007 by Dave

Posted In: Sony PSP News

Tutorial : Creating High Res PSP XMB Icons

I wrote a while ago an article on creating XMB icons for the PSP, and since then there hace been a number of developments, not least the fact that its now possible to create icons with a high level of transparency, thanks to the use of Alpha Channels.

I’ve been creating all my PSP XMB themes lately using the high resolution looking icons, but it seems a number of people are having trouble with creating their own icons in the same manner, mostly due to an annoying limitation on the number of colours the icon can have. Even when reducing the colour count to a really low number, the RCO Icon editor still complains that there are too many colours (256 colours is the maximum allowed).

The reason for this is the Alpha Channel, which is included in the count of colours used, and will normally blow the 256 colour limit out of the water.

This tutorial will explain how to solve the 256 colour issue and produce nice looking colourful icons, that do not have an unsightly jagged line around them.

This tutorial is image intensive, so please be patient if it is slow loading up. The photos icon in the below screenshot is what this tutorial will create.

The first step is to find the icon you want to convert for the PSP. For this tutorial, I’ve chosen the following ‘Yeti’ box with a photo on the side, which has a nice number of colours, and a good shape for a PSP icon. This is going to be the main Photos icon in the XMB. Its best to select an icon that is in PNG format, with its transparency saved. You should see a patterned background when you open the icon up in Photoshop, this is the transparent element of the icon.

Open your icon up in Photoshop, and add a new layer to the image.

Make sure you have the layers toolset open, along with the channels toolset (if not combined with your layers toolset).

Drag the new layer you have just added to the bottom of the list and fill it with black.

Then switch to the channels tab.

Click the small arrow on the right of the toolset (circled here in orange).

Select the New Channel option and you should get the following pop-up dialog box.

OK the box and you should have a new channel added called Alpha 1. At the moment this will be filled with white.

We need to change the white to black, so simply use the paint or brush and replace the white with black.

We now need to consider the size of your icon. Nearly all the PSP XMB icons are 64 pixels by 64 pixels. The main 6 icons have a small 4 pixel edge at the bottom that the text overlaps, so its best to try and avoid that area of the canvas. I prefer to rsixe the icons to around 52 to 56 pixels, which doesn’t make them look too large or near the text.

Onc the image is resized, you need to get the canvas back to a 64 pixel by 64 pixel size, as the RCO Icon editor requires the icons to have an exact dimension match when it replaces an icon.

You now need to select the outline of the icon. This is done by selecting the icon layer, pressing the ctrl key and clicking on the icon picture in the layers toolset (i.e. to the left of where it says ‘Layer 0′ in the picture below). If you have done this correctly, you should see the icon appear with a marquee selection around it.

Now click on the channels button and select Alpha 1. You should see the black background, with the marquee selection showing the outline of your icon.

You need to now fill the selection with white. The easiest way to do this is to select the brush tool, and make it much larger than the canvas, say 160 pixels. Then line the brush up over the middle of the selection and press the mouse button once. This should fill the shape and give a nice gray gradient around the edges. This is the part that stops the icon having a rough edge to it when you put it on your PSP.

This is where it gets a little tricky. You need to go back to the layers tab and highlight the icon layer. Then go to the menu and select ‘Copy Merged’. This will copy both the icon layer and the black background.

Now select new from the menu. The size of the canvas should default to 64 pixels square.

Paste the image into the new canvas. You should have a single layer that is your icon with its black background.

You now need to reduce the colour count down. Because the normal layer and the Alpha Channel combine, the colour count for the icon layer needs to be reduced down to around 130 colours. Depending on the icon and its colour variation, you may need to play with this number - sometimes it can be higher, sometimes it needs to be lower.

To reduce the number of colours, select ‘Indexed Colour’ from the Image > mode menu.

Select the Local(Perceptual) option from the palette drop down list, and specify the number of colours to match to. Here I have selected 130 colours.

Confirm the Indexed Colour box and then select the whole image. You then need to copy the image. We are going to paste this into the original icon document.

Switch back your main icon that you are working on, and paste the image.

You should now see a new layer added, above the icon and black background layers.

You can delete the original icon layer.

You now repeat the process above for the Alpha Channel. Switch to the channels tab and do a ‘Select All’. Copy the Channel.

Create a new document again and paste the image into the canvas. Note : This is pasted as a normal layer, and has nothing to do with ‘Alpha Channels’ other than you are now looking at what was the contents of the Alpha Channel from your original icon.

We need to reduce the number of colours in this new image as well, but first it needs to be set to RGB to ensure the index colour option works. Click on the RGB option under the Image > Mode menu.

Now select the Indexed Colour option.

This time we want to reduce the number of colours down to around 20. Again, you can increase or decrease this number depending on the complexity of the image. 20 colours ensures that the edges of the icon don’t have that jagged look.

Once the colours have been reduced, ‘Select All’ and copy the image content. Switch back to your original icon and make sure that you are on the Alpha 1 layer under the channels tab. Paste the reduced colour image back into the workspace.

Now you need to save the file. Select the BMP option. I name the icons in relation to thier place in the XMB.

Ensure that the depth is set to 32bit.

Load up the RCO ICon Editor. This is version 1.12.

Load the topmenu_plugin.rco (use one of the ones from someone elses theme if need be). I have used my Duranium R2 “Nemesis” topmenu_plugin.rco for this tutorial.

Select the icon you want to replace and press the Replace button.

Browse to wherever you have saved your new icon to and select it.

If all goes well, and you have reduced the number of colours sufficiently, the RCO Icon Editor will accept your new icon. If it doesn’t, its most likely to be because the number of colours you have recuded the icon down to is insufficient. The RCO Icon Editor will give you a hint as to how many colours you have in your icon. If this is the case, simply go back and reduce the number of colours in either the icon layer or the Alpha 1 channel layer.

Once the icon is loaded into the topmenu_plugin.rco, simply plug your PSP in, boot it up in recovery mode and copy the topmenu_plugin.rco into the vsh/resource directory on flash0 (connect under the advanced menu). Make sure you backup your original topmenu_plugin.rco file first though.

Reboot your PSP and check your new icon looks good. Repeat for the remaining 30 or so icons.

If you have enjoyed this tutorial, please Digg It!.