One of the best features of Captivate is that it is an Adobe product. This means that Captivate integrates seamlessly with other “Made in Adobe” applications, despite the fact that Captivate is not part of Creative Cloud.
In this post, I want to explore the integration between Captivate and Photoshop.
We will mainly focus on three Photoshop features that allow you to establish an efficient workflow between Photoshop and Captivate.
1) The Layers
Layers are at the heart of any Photoshop document. The images you create with Photoshop are in fact composed of a series of layers placed on top of each other. Each layer may contain unique settings and effects that affect only one part of the overall image.
In Photoshop, the Layers panel is the real headquarters of your document. The image below shows the layers panel of a simple Photoshop document. Before going any further, I want you to particular attention to
- the fact that this document contains three layers
- these layers have been renamed in Photoshop
- two of these layers are in a layer group
- the layer group has also been renamed (MFTCTitle)
Importing layers in Captivate
Captivate has a specific feature to import a Photoshop file in your eLearning project. By using this feature, the layers defined in the Photoshop document can be maintained in the Captivate project.
To import a Photoshop file into Captivate,
- Go to File -> Import -> Photoshop File
- Select the Photoshop file (with a .psd file extension) to be imported.
The picture below shows the dialog box that opens in Captivate. Note that the layers and the layer groups defined in Photoshop appear in this dialog. Also note that you can uncheck the layers you do not want to import into Captivate. This is particularly useful in many cases, for example in the case of a multilingual project, you can only import the layers corresponding to a particular language in your project.
Also notice the ability to import the layers or a flattened image
- If you decide to import the layers, each Photoshop layer is imported as a different image in Captivate. So importing two layers, creates two different images in Captivate. This allows you for example to animate these images on the timeline of Captivate as if they were two completely different images.
- If you decide to import a flattened image, it means that the layers of Photoshop are merged into a single image during the import process.
2) The layer comps
This Photoshop feature is not nearly as famous as the layers. Yet it is so convenient, specifically in Photoshop documents containing a lot of layers.
Using the layers panel in Photoshop, you can decide, among other things, the visibility of each layer. For example, in the image below, only the layers equipped with a little eye are currently displayed in the document. The other layers are indeed part of the Photoshop document, but are not displayed at this time.
The image below shows you the Layers panel of another Photoshop file. Notice the following things
- this Photoshop document is made of a very large number of layers
- these layers are almost all grouped into layer groups
- every layer and every layer groups have been correctly renamed.
Layer comps let you save the current state of layer visibility. It allows you to recall this particular document state later.
To create a layer comp in Photoshop
- use the Window-> Layer Comps menu to turn the Layer Comps panel on
- click the “New Layer Comp” button at the bottom right corner of the panel
- Enter a name for the new layer comp.
Now, let’s take a look at the Layer Comps panel of the same Photoshop document.
You can see that many layer comps have been created. Each layer comp represents a saved state of the document or, to put it another way, a layer visibility configuration. The configuration currently visible in Photoshop is the one marked by a small icon in the left column.
Importing Layer comps in Captivate
To take advantage of the layer comps in Adobe Captivate, you use the same import procedure as before: File -> Import -> Photoshop File.
After you choose the Photoshop file to open, notice the drop-down list that gives you access to the layer comps created in the Photoshop document. By choosing one of these layer comps Captivate automatically reconfigures the visibility of layers allowing you to import only the state of the Photoshop document you are interested in. Obviously you can decide to import the selected Photoshop layers or to import a flatten image made with the selected layers only.
3) The image generator
The third feature of Photoshop that I would like to discuss in this post is called the “Generator”.
This feature is especially useful for creating your own buttons in Captivate from images created in Photoshop.
As you probably know, Captivate offers three types of buttons
- The text button
- The transparent button
- The image button
Each image button is actually a collection of three pictures representing the three possible states of a button
- the _up state which is the normal state of the button
- the _over state which is the state of the button when the mouse sits on top of it
- the _down state is the state of the button when the mouse sits on top of it and when the mouse button is pressed
If you want to create your own image buttons, you must create three images for each button, each image representing one of the three states of your button. When importing your image button, Captivate can automatically recognize the three states of the button, providing that the following conditions are met
- the three images representing the three button states are all stored in the same folder on your hard drive
- the three images all have the same name (with the exception of a suffix – see next point)
- the three images end with the _up, _over and _down suffixes to mark each of the three corresponding states.
This is where the “Image Generator” feature of Photoshop is particularly useful.
The following image shows an excerpt of the Photoshop Layers panel. Note that
- I created a layer group for each of the buttons of my quiz (Submit, Clear, Retake, etc.)
- there is a layer group for the French version of each button and another one for the English version of each button.
- the layer groups representing the buttons themselves are named after the image file to generate
The image generator of Photoshop will simply scan your Layers panel. Each time a layer or a layer group with the name of a file is detected, Photoshop automatically creates the file in question. In this example, the generator will recognize the images to generate thanks to the fact that the name of the layer group ends with the .png file extension.
To start the image generator, just go to File-> Generate-> Image assets in Photoshop
The images are generated in a folder that Photoshop creates just next to the .psd file. you can now safely create your buttons in Captivate
As long as the image generator stays on, Photoshop automatically regenerates the image files each time a change is detected on one of the layers used to generate the images
Conclusions
There are many ways to integrate Photoshop with Captivate. Captivate even has a specific feature to import Photoshop files in your eLearning project and maintain the layers and the layer comps defined in the Photoshop document.
All these features allow you to build an intelligent and efficient workflow between the designer of your project and the Captivate developer.
That being said, the effectiveness of these workflows largely depends on the proper organization of your Photoshop files. Do not hesitate to “over-organize” your Photoshop documents, that is
- systematically name all your layers
- use layer groups to further organise your Photoshop file
- systematically name all your layer groups
- create layer comps, especially in Photoshop documents containing a larger number of layers and layer groups.
As usual, the success of such integration is a combination of technological performances and of proper organization within a team. Given what Adobe has developed in Captivate and Photoshop, we can say without hesitation that the ball is in your side of the court!