OmniGraffle is great program to use for creating things like info-graphs, flow charts, IT diagrams and most commonly used for creating website wireframes. You can also use software like Adobe Illustrator and Photoshop to do the same thing – with Illustrator being the more traditional method when dealing with wireframes. But in cases when you are in a rush and need to crank out some quick wireframes – or if aren’t as familiar with Illustrator – then OmniGraffle is a good tool.
Omnigraffle was specifically designed to handle a variety of tasks. It is a user-friendly program that provides shape, lines, arrow, and text tools to click and drag right onto the screen. It provides you with a library of stencil downloads available at Graffletopia which gives you commonly used web elements and icons.
I recently was using Omnigraffle and realized that I wanted to use my own custom icons for a client that was specifically related to fishing. I had already created the custom icons for the client in Illustrator. So I had to figure out how to create my own stencil in OmniGraffle so I would have access to my icons. It was surprisingly easy. If you find yourself in a similar situation here is how to do it and hopefully this is of some help to you!
When you are in OmniGraffle and you have the stencils open click on the little gear icon and a dropdown appears and click new stencil.
A new Template page will appear. I had my Illustrator page open w/ my vector icons I selected one of the icons command c and then command v into the blank template and you just created your first stencil!
Once you have completed this with all of your separate icons or images then go to file, save as and a box will appear where you can name your stencil.
Now to test out your icons, open a new blank diagram, and drag and drop any of the icons onto the page. Have fun resizing and using them in a diagram, work flow info graphic or wire frame. Now you will have that template saved in OmniGraffle so you can use them whenever necessary. Hopefully this simple exercise will be of some use to you I found it helpful even though it is really easy to do.
Related Visual Design Articles:
- CSS Sprites – Nettuts Tutorial
- Modules, widgets, boxes oh my! What do you call a box?
- Color theory for a visual design: the meaning of color
- How To Create an Animated GIF with Sparkle for the Holidays
- Are our websites getting too crowded with social media apps?
- Error Pages and 404 Redirects Can Be Fun!
Tags: create, custom, guide, how to, illustrator, ison, omnigraffle, photoshop, stencils, tutorial
Wow, that was a very good read. Finally, someone who actually thinks and understands what they are talking about. Quite hard to find lately, especially on-line. I bookmarked your blog and will make sure to keep coming back here if this is how you always post. Thanks, keep it up!
Thanks for the positive feedback I will try to come up with more tutorials for you guys!
Thanks for this great info!
This is definitely one way to do it, but it doesn’t leave the vector art in an editable state. That is, you can drag the stencil onto a drawing, and you can scale it, but it has no handles to allow you to modify its vector properties (other than scaling). I know this *is* possible (’cause I’ve done it in the past, but I didn’t write down how, and now I can’t remember!). Dang this aging stuff anyway!
If you know a way to get the vector art from Illustrator to an Omnigraffle stencil while preserving its vector editing capabilities, I’d sure like to know! (And when I figure it out again, I’ll be back and post it here–so *I* can find it again when I need it!)
-Dw
Ah-HAH! I got it.
You have to save the artwork into a PDF file, then open it using File–>Open in OmniGraffle (or right-click on it in Finder, then Open With–>OmniGraffle). Then once it’s open, you can copy and paste the artwork into your open OG stencil.
The reason for bothering with this is that among other things, it allows you to set the fill color, along with the stroke color and weight. You can also change the shape in OG if you want to, whereas a straight copy-and-paste doesn’t support any of these operations.
-Dw
Wow! Thanks David for sharing such great insight!!
Thanks David! It is tricky trying to edit objects in OmniGraffle I am still just learning myself! Any information like that is super useful.
It’s odd, that sometimes the most straightforward guidelines are often the most appropriate! I will take the above mentioned tips into approach and see the outcome. Thanks for this blog post!
Hey David,
I can see this thread is from a year ago, but I am finding it impossible to replicate your results.
I am able to cut and paste PDFed vector objects from Preview into Omni, but they are not coming in as editable. They retain their vector scaling ability.
Additionally, the objects pasted from AI loose resolution.
I am not sure what has happened with AI CS5 that has created the resolution loss, but I used to be able to go back and forth to AI CS3 with no issues: that is no longer the case.
When I cut and paste BACK from Omni to AI, the object comes in as a group that is then editable in AI…
At any rate, I was just wondering if anyone has had better luck with David’s PDF process?
jd