Creating a New Background Skin for Action Replay for PSP

Details

Product: Action Replay for PSP (Code Engine Version)
Platform: PSP
Type: Guide
Originally posted: 25/09/2008
Last updated: 25/09/2008
Viewed: 8331 times


Options

Introduction

The brand new Action Replay for PSP uses PNG (Portable Network Graphics) image files for its various background graphics files. These PNG files also contain special none-displaying areas that are used to control the color pallet used with the background and also the codelist icons (like the folders and check boxes).

Users who want to customise their Action Replay PSP beyond just selecting their own built-in theme can do so by creating their own background ‘theme’ PNG. To do this you’ll need knowledge of computer graphics and the ability to use a graphics package like PhotoShop.

The PNG file you make will need to be a 24bit PNG and be saved out with transparency in some areas (around the folders and check boxes). For detailed information read on. A downloadable template in PhotoShop format is linked to at the bottom of this article.

Technical specification and instructions

The whole skin is contained within one PNG graphic. The graphic is divided up into the background image itself, a special bar that controls the pallet for the codelist, message box and help text and another area that includes the graphics used in the codelist and help area.

anatomy-of-a-theme.gif

Background Image

Any image can be used as the background image. High contrast images may make the text difficult to read but trial and error is the best way to find out.

The area of the background image itself is 272h x 480w. When background scrolling is enabled in Action Replay the image will be zoomed slightly.

Color Pallet

Change the color of the blocks in the color pallet to control the color of the text used in Action Replay’s codelist, help bar and message boxes. Use colors that go well with your background.

Each color (as numbered in the image above) corresponds to an element in Action Replay as described in the list below. Only solid colors can be used.

  1. Codelist item (selected) - Text color
  2. Codelist item (sublist selected) - Text color
  3. Codelist item (selected) - Shadow color
  4. Codelist item (unselected) - Text color
  5. Codelist item (unselected) - Shadow color
  6. Codelist item (hidden) - Shadow color
  7. Codelist sub menu - Selected color
  8. Codelist sub menu - Unselected color
  9. Messgae box body - Text color
  10. Message box title - Text color
  11. Key info (bottom right key hints) - Text color
  12. Key info (bottom right key hints) - Text shadow color
  13. Folder code selected - Text color
  14. Folder code - Text color
  15. Folder code - Text shadow color
  16. Code comment selected - Text color
  17. Code comment - Text color
  18. Code comment - Text shadow color
  19. The color the list fades to as it reaches the edge of the screen

PhotoShop CS users are advised to download the PSD template which includes this legend in the layer names used as well as shape areas for each box which allows the colors to be changed easily.

Help Legend

You may want to change the symbols used in the help legend which appears in the bottom right of the screen in Action Replay. If you do change the icons in this area.

Important: When you save your image, the area behind the icons should be transparent. This will ensure the icons sit over the background correctly.

If you’re using the PhotoShop template, remember to hide the ‘Button Areas’ layer before saving the file out. The button areas layer is there simply to identify the extents of each icon.

Codelist Icons

If you want to change the icons used in the Action Replay codelist to match the rest of your theme you can do so by changing the graphics in this area. As with the ‘Help Legend’, when you save out your skin the area behind the codelist icons needs to be transparent and if using the PhotoShop template, the Button Areas layer should be hidden.

PhotoShop Users

A template file to make the process of creating your own skin file much easier is included as a download below. The file makes use of folders and shape layers to organise the screen elements. The template was created in PhotoShop CS3 but should be useable in all versions of PhotoShop CS onwards.

Download the Sample Skin PhotoShop Template linked to below.

None-PhotoShop Users

To create Action Replay skin files you will need a graphics program capable of working with transparency and generating 24bit PNG files.

Download both the Sample Skin PNG and the Sample Skin PNG with Button Areas files listed below.


Downloads
Download description Size Downloaded Added
Sample Skin PNG  154986  84 times  25/09/2008 
Sample Skin with Button Areas PNG  155166  76 times  25/09/2008 
Sample Skin PhotoShop Template  944195  85 times  25/09/2008 
Discuss this Article or Ask Additional Questions
Add a Question Please be clear and specific so we can provide the best help.
You need to be logged in to post a question. Click here to log in.