Sensorial’Org

Although it has its share of limitations–it doesn’t have brushes, it can’t crop, it can’t manipulate perspectives, it doesn’t have masks, it’s primitive when it comes to transparency… But once I get over the fact that it’s not an editing program, I’m convinced that OmniGraffle can do everything I’ll ever need in a wireframe.

Tips and Tricks

Stencils

The stencils library is probably the first thing a beginner should get acquainted with. Analogous to Photoshop’s brush palette (but don’t expect to be able to create ’strokes’), stencils are a collection of predefined objects that you can drag and drop onto your canvas again and again. I never have to create another ‘X’-box placeholder again.

The program comes with a set of default shapes, but you can download a wide variety of them from Graffletopia, or created on your own (Stencils > New Stencil ) set of objects.

Shapes

Out-of-the-box it has stars, dialog boxes, clouds, arrows… (not at all unlike Photoshop’s custom shapes), and what it doesn’t have, you can probably find in a stencil. But that’s not all, and I just discovered this recently, you can combine shapes via intersection, union and subtraction: Edit > Shapes. Of course, you can always create real custom shapes by using paths and making the points editable in the Edit menu.

Magnets

I have a love-hate relationship with magnets–a property of objects that allows shapes to be joined by a connector (i.e. a line) in case you want to create flow charts and diagrams. However, when I want a line just for aesthetics, it’s always caught up in the magnets of other shapes thereby placing them in unwanted positions. I have not found a way to disable magnets, but I’ve found that l locking the surrounding objects until you’ve positioned your line will save you from having to wrestle with the attractions.

On the other hand, when you actually want to join objects, you can specify exactly where the objects are to be connected with magnet points using the magnet tool.

AppleScripts

Photoshop has its actions, OmniGraffle its AppleScripts. Although the support for stencils far exceeds that of scripts’ (I’ve only found Peter McMaster’s collection), the potential is huge at automating repetitive tasks. Photoshop provides in-program recording of macros, and while OmniGraffle doesn’t provide the same luxury, recording can be done using Mac OS X’s ScriptEditor program.

The up-side of scripts? It’s easily accessible to be made to recognize repetitive actions.

Styles

Object Styles: After you’ve stylized an object, you can copy the style to other objects (think Photoshop layer styles) with the Brush tool by:

1. Selecting the brush tool
2. Selecting the object whose style you want to copy
3. Re-selecting the brush tool, and with the brush cursor active, clicking on every object that you want re-style.

In OmniGraffle Pro 5, this process becomes increasingly easy with the style tray.

Diagram Styles: Discovered this by accident yesterday, and I am totally in love.

Diagrams are a collection of objects joined by connectors, i.e. charts. Enter sitemaps. They’re one of the deliverables that I create as a part of my job, but they’re incredibly tedious to make, especially when they’re dynamic. With the introduction of diagram styles, OmniGraffle becomes accommodating to this type of brainstorming.

David Leonard has a screencast just how powerful this tool can be in conjunction with the Outline perspective: Build attractive site maps in minutes using OmniGraffle.

To create your diagram style using OmniGraffle Pro 4:

1. Create a new document
2. Lay out a sample diagram styled in the way that you want (fill, stroke, font, etc); have at least one object at each level of the tree. For example, if my site has a depth of 4, I’d have 4 different objects to represent each level.
3. Join the objects using magnets and connectors.
4. Save: File > Save diagram style as.... The file needs to be saved in the User’s ~/Library/Application Support/OmniGraffle/Diagram Styles as opposed to the system’s library.

To generate the diagram using the newly designed style:

1. Create a new document
2. Switch from the Canvas perspective to the Outline (or List in OG5) perspective.
3. Select your diagram style from the menu at the bottom of the Outline panel.
4. Double-click on the panel to add a topic.
5. (I’ve found that the first child I add to a topic, which I create using ‘Tab’, will retain the parent’s style. OmniGraffle Pro 4 seems to treat this new child as a ‘indented’ sibling when it’s suppose to be a descendant. To rectify this, right-click on the topic and select ‘Add a Child’. Any subsequent child created using ‘Enter’, and any sibling of the topic created using ‘Shift + Tab’ will assume the appropriate styles. Add children via right-click will have to be done at each level. It’s a hassle sometimes, and I haven’t figured out why it does this, but the time I save when generating sitemaps this way…)

This technique is sufficient if you want sitemap to look like a normal tree. To save canvas real estate, my sitemaps need to take on a file system tree layout. This can be done by un-checking the ‘Auto lay out diagram’ checkbox in the bottom menu of the Outline panel. Once you’ve generated all the objects, select the ones that you need to arrange vertically, open up the Inspector, and navigate to the Canvas: Alignment palette to align them.

Once upon a time, I thought about writing an AppleScript to this for me.