Guides Rule!

Intro

Did you hear me yelling 'Finally' when the last patch for Captivate was released to version 9.0.1.320? We have now Rulers in Captivate and real (Adobe) guides. I am using that name because they are quite different from the existing Smart Guides which are useful when aligning objects. Moreover the implementation of the Rulers and Guides is really very nice,  Kudos to the Captivate engineers!  Just one example: in responsive projects you can choose to have rulers in Percentages instead of pixels, which is the most logical choice! In this article I want to explain you the reasons for my joy, showing you how I use Rulers and Guides.

Grid

Maybe you don't remember that old grid, which is still present in Captivate 9. It consisted of tiny points, with a default distance of 16 px. You cannot change color of those points (black), which makes that grid useless on dark backgrounds. You can change the default distance between points from 16px to another value, but always the same horizontally and vertically. Personally I remember that distance mostly because it will define how much an object will move or resize when you use CTRL in combination with arrows as shortcut keys (see my old blog post: Shortcut keys for moving/resizing objects). Since many years I didn't use the feature for what it was meant to be used: as a 'grid'. If you just now discover its exitence: turn on the 'old' grid, using View, Show Grid.There is a snapping linked to it as well, which you can turn on/off.

A grid can be very useful in some circumstances!  With the new Guides you have now a powerful alternative: create a custom grid, with lines instead of points, maybe with different distances in horizontal/vertical direction, and use a custom color that stands out from the background. It can be especially useful for responsive projects because percentages instead of pixels  I recommend to lock the guides after creation of the grid. Your grid will be saved with the file, you can show/hide the grid whenever you want.

Here is an example of such a grid, created with the option Multiple Rulers in a blank, normal project:

You can see that the guides were used to have identical symmetrical arrows to the left/right side, to define a space to be left for CC later on, and a top margin. The settings in Multiple Rulers can be seen in this screenshot:

For a responsive project, I would mostly limit the grid to vertical guides, because it is the width that is most important for the design of such a project. Here is a screenshot for a responsive project, with guides in increments of 10%, extra guides at the left and right side at 45% (margins). Only one horizontal guide at 50%. I dragged out an extra guide to 10% for the title.

Theme/Template design

A grid, as described in the previous section, will help a lot when designing master slides - third step in designing a custom theme (after the color palette and the object styles). Of course you can add extra guides, as I showed already in that same section: to indicate margins, to show the center lines etc, space to keep free for custom navigation, control panel, CC etc.
Sometimes you'll need a template on top of a custom theme (which provides all necessary design features) because you need a fixed resolution and custom content: recurrent information, variables, advanced actions, assets in the Library, placeholder slides. For such a template rulers and guides can help as well to create a consistent look for all the future modules that will be based on that particular template.

Motion Paths

If you ever created custom motion paths, which has become much more interesting in Captivate 9 where we have three types of custom motion paths, you know how difficult it is to adjust start and end points to a specific location. I remember the example that I created for this blog post:

Reset Effects

All the cards followed a custom motion paths but had to end up in a stack. My work flow was bit cumbersome:

  • create a "cross hair" using a horizontal and a vertical line object in a group
  • position that group on the exact location, using the X coordinate of the vertical line and the Y coordinate of the horizontal line
  • adding a motion path (no curved, I used the zigzag motion path) to each card, and drag the end point carefully over the crosshair
  • saving that motion path as a custom path
  • applying it in the necessary advanced action

Now I can use a horizontal and a vertical guide, which I can exactly position without using the Options tab with coordinates. Just double-click on the ruler on the exact coordinate that you want.

Watch this screenshot: the thee shapes move each along their individual motion path, but they end at the same location (and paths cross at another location). 

Custom shapes

SVG are a big new feature, but they don't have (yet) the flexibility of shapes which can be used as text container, as button and filled with a texture, and image, a gradient all on the fly. Although Captivate is not meant to have all the editing features of a vector graphics application like Illustrator, you can create pretty nice custom shapes. Any included shape can be converted to a freeform shape, you just have to edit the points and tangent points. 

How can guides help with this process? Have a look at this screenshot. The creation of this symmetrical shield (or highway sign) was lot easier with the help of the rulers when editing the points and tangent points.: