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

For PhotoImpact, Paint Shop Pro, PhotoExplorer, PhotoExpress, GIF Animator & WebUtilities

Moderator: Ken Berry

Posts: 135
Joined: Sun Mar 16, 2008 12:39 am
operating_system: Windows 7 Professional
System_Drive: C
32bit or 64bit: 64 Bit
processor: Phenom II X6 1055T 3.2Ghz
ram: 4Gb
Video Card: ATI5670 1Gb + ATI4290 512Mb
sound_card: Realtek HD onboard
Hard_Drive_Capacity: 2Tb
Monitor/Display Make & Model: Belinea B2025S1W + LG M197WDP
Location: Somerset, UK

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

Post 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...
Posts: 14383
Joined: Wed Jan 26, 2005 7:20 am
operating_system: Windows XP Pro
System_Drive: C
32bit or 64bit: 32 Bit
motherboard: Equium P200-178
processor: Intel Pentium Dual-Core Processor T2080
ram: 2 GB
Video Card: Intel 945 Express
sound_card: Intel GMA 950
Hard_Drive_Capacity: 1160 GB
Location: Birmingham UK

Post 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.
:) :) :)
Posts: 2
Joined: Fri Apr 25, 2008 9:32 am


Post by minminx999 »

I never use PaintShop pro photo...I think I will download trial version and test it: )
Posts: 2
Joined: Fri Apr 25, 2008 3:20 am

Post by davidcook »

thanks for this nice works