When it comes to using different Adobe products in conjunction with Captivate, you needn’t think of yourself as being Kofi Annan trying to get different Adobe assets sat round the same table engaging in meaningful dialogue. Captivate plays nicely with the other software out of the box, but let’s look at an exciting way to turn Captivate and Photoshop into kissing-cousins, which will give you a rock-solid way to quickly alter image assets made in Photoshop, across your entire Captivate project, with just a few clicks.

So we’re going to tackle the bread-and-butter of Captivate work, buttons. Probably you are familiar with making buttons in Photoshop and importing your psd. There’s nothing wrong with this method but here is an alternative which I think is a little more efficient.

In Photoshop, create your button however you normally do. For this example we’re going to imagine that, until we see it all put together in CP, we aren’t sure what final colour our navigation/interaction buttons should be. When creating the button in Photoshop, right click on whatever layer contains the colour and select ‘Convert to smart object’.

Once your button is done (with text/symbol) put all the layers in a folder together and make as many copies of the group as you need. They can all be on top of one another, don’t worry about having them spread out around the canvas.

Edit the text/symbol for each layer as needed, save your psd.

Turn on Adobe Generator by going to File>Generate>Image Assets. If this is the first time you’ve ever done this and are waiting for something magical to happen, don’t. Photoshop has kissed you on the cheek, rolled over and gone to sleep at this point.

Now, when you give your layer folders names in a certain format, Photoshop will automatically generate a file for you. The syntax is much bigger than I can get in to here, but at the most basic level, if you rename your layer group something.jpg, you’ll see something.jpg appear in the same folder as the psd is saved in. Importantly, every change you make to that group within Photoshop will be reflected in that output file automatically, without you having to do anything.

So rename each of your layer groups to match the button description, e.g. home.jpg, next.jpg etc. (or .png if you like for transparency)

Now you can jump across to Captivate, import the jpgs and sprinkle them throughout your project as you see fit. To make changes to the colour, back in Photoshop right click on your button colour smartshape layer (can be any one, it doesn’t have to be the original since they are all the same object) and select ‘edit contents’, it’ll appear on its own separate canvas. Change the colour and hit Ctrl+S, you don’t need to go back to the master file containing all your buttons on layers and save anything further, Photoshop will do it for you.

Back in Captivate, in the Library panel, shift click to select all your button images then select ‘Update’ (Ctrl+D), they will all change to the new colour.

I prefer this over importing psds for a couple of reasons:

• You can’t update a whole batch of psds at once, you have to do them one at a time
• After a while, having a lot of layered psds in your Captivate project starts to get messy, its simpler to have a list of jpgs/pngs
• It is less resource-intensive
• You can edit your psd in Captivate, but it is rather clunky, and you then have two versions of your asset, if you suddenly love the new one more than the original, you then have to spend time bringing the original in to line with the new one.

So when your client asks if they can have the buttons ‘less reddy-red and a bit more red-red’, remember that you can still bill them for the hours that they think it’ll take to change all the assets.

Gareth