Turn an Image into a Button


This will be a short tip to explain how you can quickly turn an image into a shape button. I had to explain this already multiple times and wonder why this easy work flow seems to remain a secret to many users. 

Step by Step

  1. Check the size of the image, width and height if the image has the correct size, or the width/height ratio if you want to have a smaller button than the image. You can do this in Captivate as well: insert the image on a slide, and check the size in the Transform accordion.
     Examples: image is 100px wide and 80 px high, you want a button with a width of 75px, the height will have to be 60px.
  2. Insert a smart shape with the wanted size/shape (triangle of 75 x 60 for this example); use the Transform accordion again; and check the option 'Use as button' 
  3. Edit the stroke as wanted - in the image I turned off the stroke (width = 0) but to avoid possible artifacts, choose also color of the background for the stroke. Click then on the Fill button.
  4. Default fill of shapes is a gradient (second choice), first choice is a solid color, but it is the third button that you'll have to click (Image).
  5. Some default textures are available, but you want a custom image, click on the Browser icon, and point to the image in the Library (because you have inserted that image before, it will be available in the library). In the Edit image dialog you can keep the default settings, click on OK.
  6. Your button is ready, you can time it, activate the pause option if wanted. Like all shape buttons it will have two states: not pressed, and pressed. Watch the fill: you'll see a thumbnail version of your image.


I prefer largely this work flow over creating image buttons, where you need to make three images, use names that end on _up, _down, _over. Of course, you only have two states for these shape buttons.