Omnigraffle tutorial
-
Upload
billie-demott -
Category
Documents
-
view
2.212 -
download
1
Transcript of Omnigraffle tutorial
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