PSP Theme Tutorial

**kodabar** · October 27th, 2007, 19:56

I've written a tutorial describing how to create a theme including getting past the tricky alpha channel bit that caused me and so many other people grief. I've included all the free tools that I used and all the files I used to create the theme and the intermediate PSD and PNG files.

It's a 5MB download, so I've stuck it on Rapidshare.

http://rapidshare.com/files/65606969...e_Tutorial.zip

I hope this is of use to people. If you've got any questions, you can contact me on kodabarATgmail.com or post here and I'll do my best to help you out.

**TRIPLEM** · October 27th, 2007, 20:31

Nice! Maby Copying and pasting the text would have been more popular and leads me to beleave its a virus BUT if it was your where stupid enough to leave your email...

OWELL everybody wins!

PS: Im not saying it is a virus im just saying some people dont like downloading =)

**kodabar** · October 27th, 2007, 20:39

Well, the text is too long to post really and I can't include the files. But I will post the text over multiple message to try and help.

**kodabar** · October 27th, 2007, 20:39

1. Introduction
2. Tools
3. Making the graphics
4. Converting the graphics
5. Building the theme file
6. Creating the theme file
7. Installing the theme file

--------------------------------

1.Introduction
You can make your own themse for your PSP. Okay, so this is actually quite hard. And for once, Photoshop isn't going to do the do. There are a few tutorials out there, but I haven't seen a decent one yet.

I started off by looking through the user guide. I had to read a translation of the Japanese version, but the translation was very complete. I couldn't see any mistakes. One line puzzled me though. It was when they were talking about the format that the picture files are in.

"256-colour 32bit CLUT (with Alpha channel)"

What it really means is that the CLUT is 32 bit! This is an odd (and barely supported) feature of certain graphics formats like PNG's. And Photoshop doesn't support it. The CLUT is full of 24 bit colour values AND an 8 bit alpha value instead of the more usual mothod of storing alpha information as a separate colour channel or as a separate file.

The upshot of all this is that we're going to need another bit of software.

--------------------------------

2.Tools

I'm using GenSakWin. Just for extra fun, it's in Japanese. You can get it here:
http://www.os.rim.or.jp/~pekochan/develop/devutil.html

Scroll down to the bottom of the page and click the link marked 0.2.1
And also click the link above it marked 0.2.1b

Unzip the first file and run SETUP.EXE The install program probably won't display correctly as it's in Japanese, but just hit Enter all the way through to get the default values. Fine. Now unzip the other file and you'll find an .EXE file on its own. Get that and shove it into the folder that you installed the main program to (C:\Program Files\AtelierUtsu\GenSakWin\)

I've also included those files in the Tools folder of this zip file

You're also going to need to have thr right firmware install. If you're going down the official Sony route, then you'll need version 3.71 or later. If you're using custom firmware, you're going to need M33 3.71.

The other thing you're going to need is some kind of image/photo/graphics software. I'm using Photoshop CS3 and I'm going to assume you are too.

--------------------------------

3.Making the graphics

This is the easy bit. But you ought to give it some thought. Sony have a team of designers who come up with their icons. You're not as skilled as them. So before you go mad with some crazy concept art, just stop and think a while. Have a look through all the icons on the PSP and think about what kind of groupings there are. All the Settings icons have a little icon in the top corner to show they're part of a subset. You might want to consider whether you want to do this too. There are also other icons that seem related. For instance, the TV icon and the Connected Display Settings icon. Maybe they should be similar.

Now that you've had a look through the icons and thought about what's involved, you'll need to think about what style of graphics you want. Consistency always looks good. If half your icons are Disney characters and the other half are USAF squadron logos, it's not going to look good. You also need to remember that icons are actually there to make things easier to understand. If you're just going to use your theme on your own PSP and not share it with anyone else, then it's fine to do whatever you like. But if you intend to share it with other people, you ought to consider creating icons that are actually understandable.

This is also the time to decide whether you're going to use focus icons. When you select an icon on the PSP, it glows and pulses. You don't have to do this with your icon set. You can completely ignore focus icons and just make the standard ones. It won't look as good, but it will work just fine. And creating focus icons can be pretty easy anyway.

If you open up the template.psd file, you'll see what I did. I drew up and icon to fit with a 48x48 boundary, but made the file 64x64. There aren't any icons bigger than 64x64, so that's not going to be a problem. I also made a focus thing by using a white oval. It extends horizontally, so that it will fill 64x48.

Now's the time to dig out the English version of that Theme software manual. I've put it in the Tools section too. Have a look at the different icons and notice the sizes. Most icons are 48x48 and most focus icons are slightly bigger at 64x64. The category row icons are 64x48 and the second level icons are 32x32.

Now it's on to the hard stuff - the alpha channels. You can skip most of this section as I go into detail about the technical aspects of this.

Alpha channels are a way of storing transparency information. They're pretty easy to use, but most people don't understand them. A 24 bit image file (like a JPEG), stores three 8 bit channels of information. One is Red, one is Green and one is Blue. Added together they give you full 24 bit colour information. Other channels are a way of storing non-RGB information in an image. For example, if you want to print a magazine cover and would like to use gold ink for the logo, how would you create the image file for that? Well, you'd draw up an RGB image as usual and then you'd draw the area you want in gold ink and save it as a separate channel. The guys at the printers then take that channel information and print only that part in gold because it requires a separate ink colour to be loaded into the machinery. Neat, eh?

Now, alpha channels are a particular kind of image information used to delineate transparent areas. Some graphics files support limited transparency. You may have come across this with GIF files, which allow one transparent colour. It's a bit limiting though and it tends to leave nasty jahhed edges around images unless you really know what you're doing. An alpha channel stores 256 different levels of transparency so you can have nice smooth edges on your transparent image areas. For example, when you're designing characters for a first person shooter, you might want some nice badges or logos on their armour. Unless you're going to make your badge square, you're going to have to use transparency. An alpha channel will allow you to tell the game which areas of the badge are invisible so that it'll stick your image in nicely without horrid square edges.

So why do you care?

Well, we're going to do the same with the PSP theme icons. And this is where the problem comes in and why you have to use this weird Japanese software. Only certain image file formats support alpha channels (PSD and TIFF for example). PNG's do too and we're going to use them. The trouble is that the PSP Custom Theme software wants some insane PNG setup that Photoshop doesn't support. This was the major obstacle that I encountered when trying to design a theme. I'd save PNG's from Photoshop and load them into the Custom Theme software and they'd be all over the place and the colours would be all screwed up. What the hell?

So I stared using GenSakWin to help me out. The problem is that the PSP icons have to be 256 colour and they need alpha channel information, but not stored as a separate channel. Grrr.

A 256 colour image (known as indexed colour) isn't a proper 24 bit RGB image. It's only an 8 bit image. So it only contains one channel. And it contains a palette of all the colours it uses. The palette is 256 colours chosen from the full 24 bit RGB spectrum though. But in the case of theme icons for the PSP, it wants 256 colours, but it also wants the alpha information stored IN THE PALETTE! That's why it bans on about 32 bit CLUT's in the manual (a CLUT is a Colour Look Up Table, which is the same thing as a palette). This is the tricky bit.

If you've been skipping through this section to avoid the heavy technical information, you can start reading again now.

Right. I've made an icon on a transparent background in Photoshop. I go to the Layers palette and select "Merge Visible", which flattens all the visible layers into one layer. I also delete any invisible layers. Then I select the whole visibole content by holding CTRL and clicking on the icon of the layer in the Layers palette. This should produce an outline of dancing ants (as I call the selection outlines). Now go up to the top menu bar and select Selection > Save Selection. Choose to save as a new channel in the same image and give it a name. It doesn't matter what the name is, but call it Alpha to keep yourself straight.

Now when you click to show the Channels pallete, you'll see an RGB channel, a Red channel, a Green channel, a Blue channel and your new alpha channel. It will just look like a black square with a white blob on it.

Groovy. Now it's time to save your image. I save them as PSD files and use the maximum compatability option. After all, it's doubtful that any other software company supports full CS3 PSD's yet.

**kodabar** · October 27th, 2007, 20:40

4.Converting the graphics

Now, fire up GenSakWin. Yes, it's going to look horrible, but that's okay. Chances are you're going to see lots of empty boxes and garbage where you'd expect characters to be. But you're not going to need to be able to read anything so it won't matter.

Click the open file icon or press CTRL-O to open your PSD file. Make sure that the "Files of type" thing is set to PSD files so you can actually see your nice new PSD file. Select your file and it'll open up nicely.

Right. Now you'll see your file (isn't it small) and it'll be on a sort of red checkerboard background. This is to indicate transparency. The alpha channel information has been read into the software.

Up on the toolbar, I click the magnifying glass with the plus in it three time to make the image as big as possible.

Now, press CTRL-T and it'll open up a dialogue box. This is where we're going to reduce the colours to 256 and sort out the alpha information too. It's going to look like garbage. I've got full Asian character support in my version of Windows and it still doesn't display this dialogue box properly. You need a copy of the actual Japanese version of Windows to make this display all the characters correctly.

Right. Now I'm going to list all the settings that should be in this dialogue box. Make sure yours match. I'm going to list them from top to bottom and then left to right. So the first box will be the top left and seventh box will be the top right. Pay attention.

Box 1: 256
Box 2: 8:8:8:8
Box 3: Garbage. If you can see numbers, select the garbled option from the drop down list
Box 4: 0.5
Box 5: 0.5
Box 6: Garbage. But it looks like 'SfoefCf and some more crap. Make sure it begins 'S and you'll be fine.
Box 7: Garbage. Looks like Eu. It it looks like a number change it to the garbage option.
Box 8: Same as above
Box 9: RGB
Box 10: Garbage. Looks like ,,e or something.
Box 11: 0.0
Box 12: 1.0

And that's you. Now just hit Enter and your image will be converted. Phew.

Now have a look at the image. Sometimes it doesn't quite convert cleanly and you'll see light red coloured crap around your icon. In which case, just click on those pixels and they'll get sorted out. If you make a mistake when clicking, press CTRL-Z to undo. Very occasionally you'll produce black lines when clicking. Not good. In that case, look at the little palette of colours on the right and click through them until you find one with a vlue the includes A:0 and click on that. Then you'll be able to get rid of the crap pixels again.

Done! Now save your image with Shift+CTRL+S and save it as a PNG file. Make sure you do select PNG in the file type bit. It'll have set itself to PSD's from when you opened the file. Annoyingly, you'll have to set it to PSD's again when you open your next file. Grrr.

--------------------------------

5.Building the theme file

Righty. You've got some PNG files now. I wouldn't do all of them at one time, but just one or two so you can test them out. Load up the Custom Theme Convertor software (it's in the Tools section too). Click along the tabs until you find the right section for your icon. Click on that icon and click on the "Edit" button. You can then choose that file and an optional focus file. OK it and either it'll do nothing (because you got your file right) or it'll bitch at you (because your file is wrong).

If it didn't work, then take the time to check that your image file is the right size in terms of pixels. That's the main cause of it going wrong.

Sometimes the Custom Theme Convertor (hereafter CTC) will crash for no good reason. This is because Mr Sony is morally deficient and has contracted syphilis from low rent Akihabara prostitutes. If CTC crashes, then it's always going to have a problem with that file. You'll have to alter the file in some way and try again. I find it has the greatest problems when you use absolute white or absolute black in an image. Go back to Photoshop and tweak the image to brighten or darken it a bit to solve this. Then convert it again and try again.

If you managed to get a file loaded in succesfully, press the Preview button and you'll see what it will look like. Nice. Go to the "Others" tab and set the Theme Colour to change the background colour in the icon preview. It's a good idea to set a contrasting colour as the background so you can see if there are going to be any problems. If you've set a focus icon, you'll see it animate between the two in the preview too.

It would appear that it transistions between the two images either by fading between them or by cycling the alpha values. I haven't actually worked out which yet. But I'm sure someone will know.

Make sure you regularly save your theme files in its bizarre text file format. Only when you've finished it will you explort it as a proper PTF file. Not that PTF files cannot be loaded by the software so you're not going to be reverse engineering anyone's theme until someone designs some software to do that. I'm sure some header identifiers and byte offsets would be enough to get the original files out, but I'm not about to have a go at that.

One thing I did notice with the CTC software is that the Theme Colour setting is actually quite subtle. If you've set a Wallpaper, you'd expect that the Theme Colour won't really matter as you won't be able to see it. But it actually effects the text very slightly. In my theme I use a grey wallpaper and when I set the Theme Colour to red, I could actually see a red tinge on the second line of any text. Odd. So I made sure I chose a colour setting that suited my theme best. On a lot of wallpapers, this effect will be too subtle to see, but on some you'd better watch out.

--------------------------------

6.Creating the theme file

You don't actually need to have every icon done in order to export the finished PTF file, but there are some files that it will insist on having. As long as you fill in the sections on the "Information" tab and have a preview image and icons set in the "Others" tab, it'll compile just fine. Any missing icons will just be replaced by the standard PSP icons.

Sometimes CTC will crash during export. I guess Mr Sony didn't learn his lesson at the hands of those ladies of the night. Note the point during the comile at which it crashes. It's that particular file that it doesn't like. The biggest problem I've had is with the preview image. If I use absolute black or absolute white it seems to fall over. So it's back to Photoshop to do a spot of lightening and darkening again. Grrr.

Righty, you've exported your file. You rock.

--------------------------------

7.Installing the theme file

This bit is very easy. You just stick it in a folder on your memory card called PSP\THEMES If the folder doesn't exist, create it. Now, head on over to the Settings > Theme Settings bit and you'll be able to load your theme up. Hurrah!