Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter, we are going to be seeing how we can use external assets in our Captivate projects. We are going to begin with the feature that's part of the E-Learning Suite version of Captivate. When you install the E-Learning Suite, it also installs some connectors between Captivate and some other applications that are part of the E-Learning Suite. In this case, we are going to be taking advantage of that connection to Photoshop. If you are using Captivate as a stand-alone, you will be able to see what happens, but you won't be able to follow along with this exercise. I'd like you to open the Chapter 4 Captivate file that I have included in the Chapter 4 folder in your Exercise Files folder.
You'll see that the file has two pages. We need to add a page onto which we will insert a Photoshop file. Right-click or Ctrl+Click on page 2 and choose Insert > New Slide. Because slide 2 used the master slide number 2, which is our Details Background, we also will maintain the Details Background. I would like to change the Master Slide to None for this slide. Over in your Properties panel under General, choose Master Slide and then None.
Now let's import our Photoshop file. When you import a Photoshop file, this is not done through the Insert menu, it's done through the File menu. Under the File menu, you'll see Import, and at the very top, Photoshop File. Many of us use Photoshop files not only to build the background images for our slides, or to build specific elements that we might use in our slides, but also the combination. So we could have a Photoshop file with multiple layers and perhaps we would want to turn those layers on and off to take advantage of various features of that file more than one time inside of our Captivate project.
We are going to take a look at our file just like that now. The file that I want to import now is the Olive Oil_photoframe.psd file, and this is located in the Images folder, in the Project folder, in the Chapter 4 files. Select it and choose Open. Importing a Photoshop file isn't the same as importing an image. If a file has multiple layers, then you have the ability to turn those layers on and off as you desire. By default, Captivate is going to import a single Photoshop layer comp.
Now a Photoshop layer comp is a way in Photoshop for you to take a number of layers and turn them on and off and then remember that specific state. This particular file has three Photoshop comps built into it. Captivate will automatically select the last document state, which is the state it was in when you saved it. You can see additional layer comps under the menu here. You can see that I have one called Blurry Olives, another called Olives, and the third called Vibrant Olives. Let's take a look at the layers that are turned on and off with Blurry Olives.
You'll notice that the Olives layer turned off and the Olives Blurry layer was turned on. Looking at the Olives layer comp puts it back to where we started. Of course, this is the state I left it in when I closed and saved the document. Lastly there is the Vibrant Olives. This includes an adjustment layer that makes the olives a little bit more vibrant. You can choose to import a single layer comp or multiple layer comps. So if you choose Multiple layer comps, then you can turn on and off the layer comps you want to import.
The result inside of Captivate will be more than one image that gets imported. This could be very useful if you're trying to build say a slideshow or to show different variations on images that you've built inside of Photoshop as layer comps. Let's go back to the Single layer comp, and I want to pick the Vibrant Olives right now. I can choose to import as Photoshop layers or as a Photoshop flattened image. If I choose Flattened Image, then Captivate will flatten all of those layers into a single layer image.
I am going to leave it as layers because I think it's important to maintain flexibility in those images after we've imported them. Now that I have made my choice, I am going to click OK to import the image. Since I have chosen to import this Photoshop file with layers, you can see that I now have Image_8 and Image_7 here. This means that I have the flexibility to turn off and on individual elements. So let's hide the Olives by using the Show/Hide button that's on the Timeline. It's located under the eyeball, and there is a little dot that's to the right of the name Image_8.
If you click that dot, the image will disappear. Now, it's still on the stage; it's just not visible. Let's make it visible again. We'll do the same with Image _7, which is the background. Now these have names that don't quite correspond to the names of the images. If you look here, you can see the names of layers, which was Olives and Background. Let's select the Background and then up on the stage, right-click and choose Find in the Library.
In the Library, the image has been imported with the original name as part of that Photoshop File. However, the name that's been assigned to this particular usage of that image from the Library is Image_7. Let's go back to the Properties and change the name. Instead of Image_7, let's call it Background. Now, you can see the name has changed in the Timeline. Remember, it's always a good idea to give names to your images so that you can address them later when you're building buttons and other types of interactivity.
Let's insert one more slide, and we'll re-import that file a different way. Right click and choose Insert > New Slide. In this case, we get a blank slide because slide 3 had no background, and now we'll choose a File > Import one more time. And we'll choose Photoshop File. Once again, select Olive Oil_ photoframe and Open. And this time, I'd like to choose the Blurry Olives document state. I prepared these images so that they are the same size as my stage; however, if there was a discrepancy between the size of the image and the stage, I could choose Scale according to stage size.
This would then attempt to resize the image to fit onto the stage. Of course, this happens proportionally, so that if it doesn't quite fit there may be a visible bar, either above and below or to the left and right of the image. I've made the choice. We'll click OK to import. Now take a look over in the Library. If the library isn't visible, please make it visible by clicking on the tab on the Library here, and look down here. We just imported the same Photoshop file again. The first time we got the Background and the Olives.
This time we got the Background and Olives Blurry, but the Background has only appeared once in the Library. You can see that it's been used twice, however. What we're seeing is one of the ways that Captivate optimizes the use of your assets by putting them into the Library. We'll be doing a longer exploration of the library in another chapter. But I wanted to point out that when you bring in those Photoshop files, the various components of that Photoshop file are going to be added to the Library independently. The last thing we are going to do with Photoshop is to do some Photoshop round-trip editing.
Right-click on this blurry image right here and choose Edit PSD Source File. Now remember this is only going to work if you have Captivate as part of the E-Learning Suite. This opens my image directly in Photoshop, and in Photoshop you can see that I have my layers turned on and off. Go to my layer comps, and you can see my layer comps are laid out right there. Here is the Vibrant Olives state. Let's look at the Blurry Olives layer comp, and we'll make the Blurry Olives even blurrier.
Select the Blurry Olives layer, and under Filter, choose Blur and a little Gaussian blur. Let's crank that all the way up to 10. There we go and OK. Now there is a real difference between the original that we can still see here and the one that we've just made, which is right there. Let's close this Photoshop file and save it, and you can see the change immediately in Captivate.
What we've seen is an example of the round-trip between Captivate and Photoshop that's enabled by the E-Learning Suite. We'll switch back to Captivate. That image has been updated in the original Photoshop file. Captivate has looked into that original Photoshop file and has drawn out the pieces that it needs to be able to display properly in your Captivate project. This is a great way for you to be more productive with your Captivate workflow, because it allows you to use your Photoshop files as Photoshop files and not have to be saving for Web & Devices or exporting them to other formats in order to get them into your Captivate project.
Let's save this file now as Chapter 4_a. The first time you try to save your file from Captivate, you will be taken automatically to the My Adobe Captivate Projects folder. Its location will vary depending on your operating system. I'm going to go right to my Desktop and choose my Exercise Files and Chapter 4, and I'll store this in my Project folder, and I'll call it "Chapter 4_a." Using Photoshop and Captivate together has been made much easier with Captivate 5.
I hope you'll take advantage of some of that round-trip power that we've just seen and experienced.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 64853 Viewers
80 Video lessons · 124397 Viewers
52 Video lessons · 60322 Viewers
59 Video lessons · 46147 Viewers