Written on Feb 16th, 2007 by Dave

Posted In: Sony PSP Hacks, Sony PSP News

How to create XMB icons for whole PSP interface

I wrote a while ago about changing the icons on your PSP’s XMB interface, and since then there have been a few developments, not least the fact that we can now change all the XMB icons, not just the six main category icons. As well as this, we now have the possibility to customise the battery indicator, volume controls, and music player graphics.

If you wish to completely alter the way your PSP looks, then this tutorial will hopefully show you how to go about customising your PSP XMB. This guide is written for those of you using the Dark_AleX custom firmware 3.03OE-C. This won’t work on with 3.10OE. I haven’t tried it myself, but I have been informed the topmenu_plugin mod does not work on 3.10OE, and therefore if you are using the 3.10OE custom firmware (or any other for that matter), I cannot be held responsible for any damage you do to your PSP in the process of trying to modify the XMB.

There is now some new software to help you in your customisation quest, called RCO Icon Edit. Currently at version 1.05, you can get this PC software from here:

Download: RCO Icon Editor

Once you have downloaded the software, unzip it into a directory and take a look at the readme.txt file. You should have a set of files like these:

The next stage is to get a set of decrypted Flash0 files from your PSP. I won’t go into details about how to do that here, but if you are using the custom firmware then they are easy enough to obtain. The file you are mainly interested in is the topmenu_plugin.rco file, and if you are struggling to get a decrypted version of this file, you can get my example from this tutorial here:

Download: PSPCulture topmenu_plugin.rco file

Note: This is the customised one with all XMB icons replaced, not the original topmenu_plugin.rco. It can be used with the RCO Icon Editor to make your own icons, or used as-is on your PSP. Instructions on installing this file are at the bottom of the article.

If you have a decrypted firmware version from a previous DevHook version, that may be suitable. You will find the topmenu_plugin.rco file in the flash0/vsh/resource/ directory.

Once you have a decrypted topmenu_plugin.rco file, copy it into the directory you unzipped the RCO Icon editor into.

Now start the RCO Icon Editor.

Hit the open RCO button and select your topmenu_plugin.rco. I should mention at this point that the topmenu_plugin.rco relates to the PSP main XMB icons. The other RCO files that reside in flash0 have the battery and other XMB graphics.

You will see a list of files that reside in the topmenu_plugin.rco. Highlight one, and you will see the graphical contents in the preview pane. In this instance, I have highlighted the tex_system file.

You can extract individual elements, or extract all. For this exercise, I only extracted the system icon, as this is the one I’m going to replace. In reality, you may want to extract all and then delete everything except the 32 bit bmp files.

Once you have selected the icon to extract, you will need to give it a name. I simply kept the name of the element and called the file system.bmp.

Opening the extracted icon in Photoshop, you can see its a fairly rudimentary system icon, very flat and no colour.

We now have a number of options - we can use the colour picker to get the background colour of the icon we have extracted, and then simply fill the entire icon with that colour to give us a blank canvas, or we can choose our own canvas colour. I prefer to select my own darker colour than this default, mainly as the images I’m using to crete the XMB icons are in the png format and have drop shadows. This means that to get the images to blend properly, I need a dark canvas colour.

The downside of using images with their own drop shadows is that it makes it very difficult to create an icon that can sit on any PSP background colour. It takes time and practice to become good at this (and believe me, I’m not very good at this at all).

So, here is my 64pixel by 64pixel base icon. Nearly all the XMB icons are this size, although a few are smaller, such as the memory stick icon and the UMD icon. The RCO Icon Editor tells you the size of each icon when you highlight it in the list - take note of this when designing your icons.

This folder is a the graphic I’m going to use to replace the system icon on the PSP XMB. Check out DeviantArt for a number of great icon packages, simply search for the keyword icons on the site. Its from here that the icons I’ve used for this tutorial have come from.

I need to reduce the size down to be smaller than the 64pixel by 64pixel limit of the PSP icon. I know that the icon needs to be offset slightly towards the top of the canvas, as there is a 4pixel border at the bottom to cater for. I resize the graphic down to 56pixels square.

This can then be placed on the 64pixel square canvas.

This is the tricky part. The PSP icon needs to be set to an indexed colour palette, which means that it has a maximum of 256 colours.

We then need to edit the colour table. THis is because the PSP XMB icons use the very first palette entry as the transparent colour, so we need to ensure that we set the first palette entry to the same colour as our canvas background colour.

Here we can see that the first colour in the palette is a vivid green colour, which I had used previously and Photoshop had kindly decided to remember for me.

This green needs to be replaced with the background colour, so select the colour picker (A) and use it against the canvas background (C). This highlights (B) as the background colour.

We then deslect the colour picker (A) and click on the background colour in the palette (B). This brings up the colour dialog box and shows us the colour code of the background. Highlight this and copy it. We are now going to replace the green with this colour code. You can close the colour dialog box off.

Now click on the green (or your equivelant first palette entry) and enter the canvas background colour code. This will force the first palette entry to be the same as the canvas background, in effect making this transparent on the PSP.

You now need to save the image as a bmp file, and it should automatically show you its an 8 bit file.

We then need to go back to the RCO Icon Editor and select the replace option, having highlighted the icon we are going to swap out.

You should now see the icon you have created in the preview box. If you have the size wrong or the file is not 8 bit, the software will warn you.

There is no option to save the topmenu_plugin.rco, it simply gets written to when you use the replace option. Therefore make sure you are always working on a backup copy, and that you keep the original somewhere safe.

The only thing left to do is copy the topmenu_plugin.rco file onto your PSP. Boot up yopur PSP into recovery mode and use the advanced option to connect via USB to the flash0. You should get a warning about the file existing. Overwrite the existing file, disconnect the PSP and reboot it.

You should find your PSP now has its first custom icon, or in my case, lots of custom icons…

While these icons look pretty good (in my opinion), they don’t work very well on other coloured backgrounds. Its really a case of trial and error to get something that looks and works well. Once again, thanks to DeviantArt for being the source of great graphics for use in this tutorial.

As always, there is a risk of bricking your PSP doing these kind of mods, but so long as you have the rcovery menu option, and take care, its pretty safe.

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