Video: Create a Template Background in Adobe Captivate 7

Video: Create a Template Background in Adobe Captivate 7

Here’s our next video in our Captivate 7 series. This tutorial will teach you how to create a background in Adobe Captivate 7. .

Click the buttons to learn more about the Adobe Captivate 7 eLearning Template.

Learn More Preview HTML5 Version Preview Flash Version

In this video, I’ll be teaching you how to create color gradients, insert images, set transparency in an image, insert shapes, set border width and color, and adjust the rounding of corners.

This is the next step in our process of creating a Captivate project template based on the design you see here.

To create any design, you need to break it down into pieces and create the design piece by piece. To do this, it helps to look at the design as a three dimensional object, and then start by creating the objects that are in the very back and work your way forward layering the other objects on top of those in the back.

With that in mind, we’re going to focus on creating the background. The background is made up of a color gradient, some images, and a pair of transparent boxes.

First let’s create the color gradient. To do this, we’re going to insert a rectangle shape with a color gradient at the same width and height as the stage.

  1. Click the “Insert Shape” button in the tool menu
  2. Click the “Rectangle” shape from the pop-out menu, and your cursor will change into a crosshairs.
  3. Click, hold, and drag to draw the rectangle.
  4. With this rectangle still selected, go into the “Properties” panel under the “Transform” section.
  5. Set the X and Y coordinates to zero.
  6. Uncheck “Constrain Proportions”
  7. Set the Width (W) to 981, and the Height (H) to 608, which is the same width and height as the stage

Now, we’re going to set the fill and border of the shape.

  1. With the rectangle still selected, go into the “Properties” panel under the “Fill & Stroke” section.
  2. Click and drag the “Width” slider to the left until the number turns to 0. This will remove the border around the shape.
  3. Set the transparency to 100% by clicking the number to the right of the transparency icon, and typing 100. Press Enter to save your change.
  4. Click on the “Fill” icon
  5. Click the left-hand color of the gradient, and a color palette will appear.
  6. In the color palette, click the “Eyedropper” icon.
  7. Select the “Light Blue” color swatch from the color guide you placed on the stage during our previous video.
  8. Click the “Fill” icon again.
  9. Under “Direction” click the icon that shows the blue transitioning to white from top to bottom.

That finishes the gradient. Next we need to place some cloud images

  1. Click the “Insert Image” button in the Tool menu.
  2. Select your image from the popup window.
  3. Click “Open”.

Next we need to set the image’s background to transparent.

  1. With the image selected, go into the Properties panel under the Image section, and click the color-picker icon.
  2. Select the eyedropper tool from the color palette that appears.
  3. Click the bluish background color to make that color transparent in the image.

Now we have to place the image. If you were following along in this video series you would have already placed a screenshot of the design on this page. If we set the gradient to invisible, and the design screenshot to visible we’ll be able to see how to place the clouds image exactly where it needs to be.

Click and drag the image to the approximate location. With the image still selected, use the arrow keys to place it more precisely.

Next we need to place the other image by repeating the steps we just completed all over again.

  1. Click the “Insert Image” button in the Tool menu.
  2. Select your image from the popup window.
  3. Click “Open”.
  4. With the image selected, go into the Properties panel under the Image section, and click the color-picker icon.
  5. Select the eyedropper tool from the color palette that appears.
  6. Click the blue background color to make that color transparent in the image.

Lastly, we have to create a couple shapes to create our main content area for the project.

  1. Click the “Insert Shape” button in the Tool menu
  2. Click the Rounded Rectangle icon.
  3. Your cursor will appear as a crosshair, click and drag to draw the rounded rectangle.
  4. In the Properties panel, under Transform, click the “Constrain Proportions” checkbox, set the X and Y coordinates to 10, set the Width to 960 and the Height to 524.
  5. In the Properties panel, under the “Fill & Stroke” section, click and drag the Width slide to the right until the number reads 2. This will adjust the thickness of the border to 2 points.
  6. Click the color palette icon beside “Stroke” and select white from the color palette that appears to change the border color.
  7. Click the number beside the transparency icon, type “0”, and press enter to hide the shape’s fill.

Finally, click and drag the yellow handle in the top left of the shape to adjust the rounding of the rectangle’s corners to match the one in the design.

To create the second and final shape select the shape you just completed, and press CTRL+C on your keyboard to copy it. Press CTRL+V to paste a copy of the shape.

  1. In the Properties panel, under Transform set the X and Y coordinates to 12, set the Width to 956 and the Height to 520.
  2. In the Properties panel, under the “Fill & Stroke” section, click the color palette icon beside “Stroke”, click the “Eyedropper” icon from the color palette that appears, and select the “Light Gray” swatch from your color guide.

And that should do it. Make the gradient visible again, and you’ll see how much progress you made in today’s video.

Have yourself a spectacular day.

-Dustin.

No Comments

Comments are closed.

$0.000 items