The Nitty Gritty of Omnigraffle

Carrier

12:34 PMWeb Page Title

http://host.domain.tld

The Basic Functions of Omnigraffle so You Can Design Your App.

Fill ME!with wireframes!

Stencils/Templates

pg 80

If you don't want a whole object, but just one or all of its styles, drag a style from the style tray to an object in your document.

1. Stencils - a) either search Graffletopia in Stencils & install, or b) find stencils at graffletopia.com, download them, unzip,double click & they'll appear in Stencils at which point you can "Install" (pg 80-82)

1.Template Chooser - you can choose a template (like Miller-Konigi) for your new doc. Can also create a new template, edit your template or set a template as a default (pg 85).

Inspectors

16 different inspectors

DOCUMENTCANVASSTYLE PROPERTIES

Organized into 4 categories based on the kinds of things they affect.

Style Inspectors

5inspectors

Fill Lines& Shapes

Shadow Image Text

1 2 3 4 5

Hot Key: Command+1

Shift+Command+C = color panel

1 2 3 4 5

1

2

Fill Tool - choose a color or gradient to fill the inside of selected shapes (pg 58)

Lines and Shapes - adjust style of line (i.e. stroke, thickness, roundness of the corners); choose shape of your object (pg 59)

3

4

5

Shadow - use to drop a shadow behind selected objects (pg 61)

Image - use to position an image inside a shape (you also can drag & dropan image instead of adding an image) (pg 62)

Text - use to control the positioning & appearance of a selected shape's text (change font, alignment, wrapping to shape, kerning, leading, margins here) (pg 64)

Use to modify any object on the canvas.

Properties Inspectors

4 inspectors

Connections Action NoteGeometry

1 2 3 4

Hot Key: Command+2

1 2 3 4

1

2

3

4

Geometry Tool - adjust object's position & orientation (size, rotation)Check "maintain aspect ratio" so when you change the height & width of one object, the other value changes proportionally (pg 66)

Connections - adjust how your shapes connect to one another; can increase the # of magnets so your shapes can connect in more places (pg 67)

Action- makes objects interactive (use to create a prototype); use to determine what should happen when someone clicks the selected object with the Browse tool (pg 68)

Note- add notes & table of custom data about objects on the canvas; when you hover over an object with a note, the note appears in a tag (pg 68)

Use Properties Inspectors to change aspects of an object that are notstrictly related to its visual style.

Canvas Inspectors

5inspectors

Size Grid Selection Alignment DiagramLayout

1 2 3 4 5

Hot Key: Command+3

1

2

Size- use to change the size of the canvas, how the canvas fits onto printed pages, or what kind of measurement units to use (pg 70)

Grid - use to set up a grid on the canvas, so you can keep objects lined upnicely (pg 72).

3 Selection - use to select lots of shapes at once; it lists all of the different kinds of objects (groups of objects) on the canvas, based on their styles (pg 24).

Alignment- use to line up and space out objects uniformly. Choose what point is used to align your objects (i.e. upper left corner vs. lower right corner); distribute objects evenly with the spread button (pg 73).

4

5 Diagram Layout - use to automatically lay out shapes based on the logical relationships established by the connection lines between them. (Select "Automatic Layout" to have Omni rearrange the objects whenever the connections btw them change. **If your'e diagramming & your boxes start moving all over the place, disable Auto Layout.) (pg 74)

Use to modify the canvas itself.

2inspectors

Data Document

1 2

Hot Key: Command+4

Document Inspectors

12

Data - put in metadata to keep track of your projects (pg 75)

Document - save doc as a flat file (single file on a disk with all images embedded in it) or file package (folder disguised as a single file, with all of the attached images rattling around loose inside). Adjust printing settings (pg 75)

Use to control document-wide settings.

v

s

Selection tool - most basic tool to manipulate objects on the canvas (pg 35)

Shape tool- use to create shapes (pg 38)

c

t

Line tool - use to make lines, connect objects together (pg 39)

Text tool -use to add a label to an object, edit label or create a new shape with text inside (pg 40)

expando/collapso - use to adjust what tools are shown; next slide goes into the tools shown on expando.

Tools

1 2 3 4 5 6 7 8 9 0Alt

Hot Keys:

Space

z

Hand Tool - use to drag your view of the canvas around, to see part of the canvas that is not in sight (pg 47)

Zoom tool - use to get a nearer or farther view of the canvas; can chose specific areas to zoom in & out of. [Shift-click zoom tool returns to 100% (pg 46)

w

r

m

Diagramming Tool- rapidly create new object on the canvas; tool is esp. useful if you have automatic layout turned on (pg 42)

Rubber Stamp Tool - use to replicate objects (pg 44)

Magnet Tool - use to add magnets to shape or to edit a shape's existing magnets; mags are special spots on a shape that attract connection lines (pg 45)

Browse Tool - use to work with interactive Omni docs. When you click on an object, it performs the action as set in the Properties-->Action inspector (pg 48)

**Useful for Instagram HW & creating clickable prototypes.

b

e Pen Tool - create custom shapes (pg 41)

Tools Cont.

1 2 3 4 5 6 7 8 9 0Alt

Hot Keys:

Grouping/Locking/Layering Objects

12

Bring to Front- use to place one object in front of another (Shift+Com+F)

Bring to Back- use to place one object in back of another (Shift+Com+B)

34

5

Lock/Unlock - use to lock certain objects in place (Command+L)

Group/Ungroup -use to group objects together so they group of objects can be manipulated as a single object (Shift+Com+G) (pg 51)

Smart Guides- keep on to help you keep your objects aligned

1 2 3 4 5

1 2

1Canvases Sidebar - shows all the canvases in your doc & the layersthey contain. You can hide this. (pg 5)

(Note: with layers, higher layersappear in front of stuff on lower layers.)(pg 26)

2 Outline Sidebar -gives hierarchical, text-based view of the diagram on the

selected canvas. (Can also change viewto see objects as "List.") (pg 5)

Your Workflow: Canvas & Outline Sidebars

Adding New Canvas/New Layer

12

Add new canvas

Add new layer

1 2

The Style Tray

1

1 Drag & drop style of one object onto another

2

2 Drag & drop a particular style element of one object onto another

(pg 76)

Getting Around with the Selection Tool

Other Omni Resources

12

lynda.com - some freebie tutorials

Keyboard Shortcuts - under Help menu.

34

5

http://forums.omnigroup.com - online Omni forum

Canvas! - post cool tips or troubleshooting you've had to do

http://www.omnigroup.com/applications/omnigraffle - find latest Omni info