August 9, 2016
Photoshop and Captivate are the best friends in the world
Comments
(3)
August 9, 2016
Photoshop and Captivate are the best friends in the world
Damien Bruyndonckx is the founder and the CEO of One2Learn, a Belgian company specialized in content development, instructional video, virtual classrooms, and training on the leading eLearning content creation tools. Active in the eLearning industry for over 15 years, Damien has worked with many different customers and LMS implementations. He is a long-time Adobe partner and serves as an instructor for the official Adobe Captivate certification program. Damien is the author of over 30 video courses for LinkedIn Learning and is the coauthor of the Mastering Adobe Captivate series by Packt Publishing.
Guide 13 posts
Followers: 41 people
(3)

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

  1. the fact that this document contains three layers
  2. these layers have been renamed in Photoshop
  3. two of these layers are in a layer group
  4. the layer group has also been renamed (MFTCTitle)

The layers panel of a simple photoshop document

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,

  1. Go to File -> Import -> Photoshop File
  2. 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.

Importing the layers in Captivate

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.

Layers are imported as different images on the Tumeline

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.

A lot of layers in a photoshop document

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

  1. use the Window-> Layer Comps menu to turn the Layer Comps panel on
  2. click the “New Layer Comp” button at the bottom right corner of the panel
  3. Enter a name for the new layer comp.

Now, let’s take a look at the Layer Comps panel of the same Photoshop document.

Layer comps in a 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.

Accessing the layer comps in Captivate

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

Three types of buttons in Captivate

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

Image buttons in Photoshop

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

Images generated by the Generator of Photoshop

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!

 

3 Comments
2016-11-15 12:06:27
2016-11-15 12:06:27

Great post.

Like
(1)
2016-08-16 11:35:59
2016-08-16 11:35:59

Nice post Damien!

Like
(1)
(1)
>
Priyank Shrivastava
's comment
2016-08-18 10:39:35
2016-08-18 10:39:35
>
Priyank Shrivastava
's comment

Thanks Priyank. Glad you like it!

Like
(1)
Add Comment