Luckily, for the users of Photoshop, there is a (somewhat underused) method to automate all these tasks called "actions". Here I will explain how you can use Photoshop's automation methods to quickly save a large number of buttons from a .psd file to .png images, ready for use in your imagebutton based GUI. Of course you can also use this for saving anyhing else that requires a lot of image exporting.
1. Make a copy of your .psd file and make sure each button is on it's own layer. Name the layers with (buttun name) (button state). For example: save_idle, save_hover, save_selected_idle, save_selected_hover and save_insensitive for the save game button.
2. Select the menu option File/Scripts/"Export Layers To Files" and select destination folder and "File Name Prefix" (for example, "game_menu" if you are exporting the buttons for the game menu/navigation). This can take a while if you have a lot of layers.
If you are doing this for the first time:
2a. open one of the images and select Window/Actions from the menu. On the "Actions" window that opens, click on "Create New Action" icon at the bottom and start recording.
2b. Crop the image (*), save it as .png and stop recording.
Once you have recorded an action, you can re-use it whenever you need to perform the same set of actions again. Of course you can also use this to automate pretty much anything repetitive. By the way, for very complicated actions, that can't be simply recorded, Photoshop also supports scripts written in Javascript.
3. Now open all the exported images (select all files and drag them into Photoshop) and perform the action you just recorded on each one, by playing it from the "Actions" window or pressing a hotkey, if you defined one earlier.
4. Copy the files to your game folder and add the code to your screens.rpy. The filenames are ready for use with the "auto" property to automatically define the images used by a button.
For example:
Code: Select all
imagebutton auto "game_menu_save_%s.png" xpos 810 ypos 99 focus_mask True action ShowMenu('save')5. Don't tell anyone and use the time you just saved for slacking off.
Note that after you use "Export Layers To Files" function, the exported files will be *almost* ready for use. But... they are named something like "game_menu_0000_save_selected_hover.png". Since that's a lot of files to rename, you'll want to change that and get rid of "_0000" part:1. Edit "Export Layers To Files.jsx" file found in
PC: C:\Program Files\Adobe\Adobe Photoshop CS#\Presets\Scripts
MAC: <hard drive>/Applications/Adobe Photoshop CS#/Presets/Scripts
# being the CS version
2. Find the line:
Code: Select all
fileNameBody += "_" + zeroSuppress(i, 4);Code: Select all
// fileNameBody += "_" + zeroSuppress(i, 4);3. If Photoshop was open, close and restart it so that it can pick up the new script.
* Easy way to crop an image:
When cropping an image, you want to end up with an image that's as small as possible, but you also don't want to miss any pixels (like shadows and other hard-to-see stuff). Here's how you do it.
1. Add a new layer, select both layers, right click and select "Merge Layers" (this will flatten the layer, ensuring that the entire image can be selected, in case you have layer effects)
2. Select the Magic Wand Tool (tolerance: 1) and click on the top left area of the canvas. If you have buttons at the very top left, click somewhere else, such as the bottom right (or to put it simpler: use the Wand to select everything, except the image).
3. Right click anywhere and select "Select Inverse" from the menu.
4. Select "Crop" from the Image menu.
5. Select "Save for Web & Devices" from the File menu and save the file as .png.
6. Close the image (you can discard the changes, since you already saved the file you need).
I'm using CS3 and Windows 7, so the methods might be a bit different for you. I hope this helps someone and sheds some light on the misterious Photoshop automation.
