Page 1 of 1

20: Paint Shop Pro Photo X2: [Consistent button/icon sets]

PostPosted: Mon Apr 14, 2008 2:39 pm
by allicorn
What it does...

This tutorial relies on a Script for PSPX2. You can find the download link below.

The problem the script addresses is this:

You're working on a website (or something else, but that'd be what I would be working on ;-) ) that needs a whole bunch of button/icon images. The buttons all need to be in a consistent style (obviously!) and might have rollover/hover versions or active versions. The problem arises when you've made all the dozens of buttons and then the client decides they don't like the style or, want the color slightly different, or something else that'll mean you have to make alterations to the style of every button without necessarily changing the icon image or the label text that sits on top.

What the script does is let you create all your buttons in a single pspimage file where the layers are named in a specific way then - just by running the script - create GIF images for each button based on combinations of the layers within. Its all totally automatic and non-interactive and I routinely use this to pump out button sets of a hundred images or more - takes about a minute.

What you need...

You can download the script itself and a demo image in a ZIP file here.

If you can't or would rather not download a ZIP file, the individual files are here:
The PSP script file
A little demo image to test it with

If you're going to use those two direct links, it's probably best to right-click them then select "Save Target As..." or "Save Link As..." or something like that, depending on which web-browser you're using.

Since the script opens, closes and saves various image files, it needs to be in PSP's "Scripts-Trusted" folder.

On WindowsXP this'll be:
C:\Documents and Settings\<your username>\My Documents\My PSP Files\Scripts-Trusted

On Vista this'll be:
C:\Users\<your username>\My PSP Files\Scripts-Trusted

Once the script file has been put into the "Scripts-Trusted" folder you should immediately be able to use it in PSPX2 (it'll work in PSPX1 and PSPX too - possibly older versions, I wouldn't guarantee that). You can run it by going to the menu, File -> Scripts -> Run then select the AutoButtons script.

If you're going to use it (or other scripts) frequently, you might find it worthwhile to turn on the Script Toolbar which you can do from the menu, View -> Toolbars -> Script. Once that's visible, just select the AutoButtons script in the dropdown and click the little Play button next to it.

How to use it...

To use the script, you have to set up your image with the layers named in a very specific way.

Start by creating a new image from the menu, File -> New Image. The image can be any size, the example here uses a large-ish button of 100x40 pixels:

The background layer should be named "BASE" (yes it should be in UPPERCASE). This layer is the background image for all the buttons in their normal state. So, for instance, it might be a colored rectangle with some bevelly edges.

Rename the background layer to "BASE":

To create a very simple bevelled button look, pick a color, flood fill the entire layer, then use the Inner Bevel feature from the menu, Effects -> 3D Effects -> Inner Bevel

The next layer up is optional. If you want to have "rollover" versions of all the buttons, create a layer called "ROLLOVER" (again, must be UPPERCASE). So, for example, it might be exactly the same colored, bevelly rectangle but with a lighter color or a bright border - but you can do anything you want really.

To create your ROLLOVER layer, right click the BASE layer in the Layers Palette and select Duplicate Layer. Now rename the new layer to "ROLLOVER" by clicking on it's name:

To give the ROLLOVER a different look from the BASE here, we're just going to Colorize it with a green tint. From the menu, select Adjust -> Hue and Saturation -> Colorize:

The third layer up is again optional. If you want to have a third version of the buttons, perhaps for use in an "active" mode (meaning, when the mouse is being pressed on the button, rather than just hovering over it), then create a layer called "ACTIVE". In our running example, this might be the bevelly rectangle again but with the bevels inverted so it looks like the button is being pressed down. Again, put anything you like though.

Duplicate the ROLLOVER layer, and - the same as before - rename it, this time to "ACTIVE":

To make the ACTIVE version look like a button being pressed down, just Flip and Mirror it. From the menu, Image -> Flip and then Image -> Mirror. Now we should have these three layers:

Each of these three layers should be completely opaque. However, when the script runs it can make GIFs with palette-based transparency by looking for a pure magenta color (255 red, 0 green, 255 blue, that's "#FF00FF"). There's absolutely no tolerance on this so if you want any pixels in your BASE, ROLLOVER or ACTIVE layers to be treated as transparent in the resulting GIF buttons, make sure those pixels are precisely that color. If you don't want any transparency you're going to have to avoid having any pixels that are exactly #FF00FF.

After you've set up your BASE and optional ROLLOVER and ACTIVE layers, any other layers you create will contain the stuff that differs for each button (eg some text, an icon image or such). The names of these layers will be used to set the filenames of the GIFs that are created.

So, if you create a layer called "home" (make it UPPER or lowercase, your choice, the filename will be in the same case), leave it mostly transparent, draw a little house on it and plant the text "Home" next to it then, when you run the script, the following images will appear in the same folder as the multi-layer image:

home.gif (which'll be the "BASE" layer with just the "home" layer, merged, and saved as a GIF with any magenta pixels set transparent)

ro_home.gif (which'll be the "ROLLOVER" layer - if you had one - with just the "home" layer, merged, again saved as a GIF the same way)


ac_home.gif (which'll be the "ACTIVE" layer - again, if you made one - with just the "home" layer, merged, and saved as a GIF again)

The fun part is that you can now make as many extra named layers as you like. So, besides your little house on the "home" layer you might also make a "forum", "gallery", "blog", "email me" layer - or whatever you like.

So, now create a layer for each button that you want to generate. Naming them as described:

Add some text or an icon image (or whatever you like) to each layer. Here's my "home" layer:

In the files you downloaded I've included a little demo image that you can test the script with. The layers in there are set up like this:

When you run the script on that image, it'll create all of these GIFs in the same folder:

The "BASE" images...

The "ROLLOVER" images...

The "ACTIVE" images...

PostPosted: Tue Apr 15, 2008 12:26 am
by sjj1805
An excellent tutorial and a worthy candidate for one of the top prizes.
Very practical and useful with nice clear instructions.

Good luck in the competition.
:) :) :)


PostPosted: Sun Jul 20, 2008 3:45 pm
by minminx999
I never use PaintShop pro photo...I think I will download trial version and test it: )

PostPosted: Sun Jul 20, 2008 3:55 pm
by davidcook
thanks for this nice works