Application to help explain a GUI

views:

answers:

+4 Q:

Application to help explain a GUI

When a graphical user interface is documented, it usually include a screenshot. In the screenshot different buttons and interactive objects are marked with a letter and below, in a list, its explained what the "button marked with a red A" actually does.

I currently do this myself in Paint .Net, its really hard to make it look even decent. Surely there must be a better tool for it? Im looking for a program that lets me load a saved screenshot, click five times. Each position clicked gets a unique letter, with a circle around it, in a nice color. Something along those lines.

Suggestions for other tools that help me document my GUI is also appreciated.

Edit: To clarify, grabbing/generating the actual screenshot is easy (that I got tools for). Its marking/indicating specific points of interest in the screenshot I need help with. What I do in Paint .Net is, using the text tool, type a unique letter next to the button I want to explain, then, using the circle tool, draw a circle around the letter (to make it stand out more). It doesnt look great and it eats much time. I just felt there must be a faster way.

Edit2: Okey, so Snagit seems to be what I want. The hunt is now on for a free alternative, which is always preferred.

Snagit, the beauty of it it captures the cursor where-ever it is, hit ctrl+shift+p, a nice magnified popup window appears and you can drag to make a rectangle on any part of the screen and dump it into a graphics file for insertion into a document.

Hope this helps, Best regards, Tom.

tommieb75 2010-01-25 19:15:27

I think the question is seeking a tool to mark up the screenshot nicely, not to capture it in the first place.

Wooble 2010-01-25 19:18:44

@Wooble: Oh...Well he did say 'I currently do this myself in Paint .Net, its really hard to make it look even decent. Surely there must be a better tool for it'

tommieb75 2010-01-25 19:26:44

Yes, it was the actual mark up I was looking to do better, thats what Im currently doing in Paint .Net. The actual grabbing is done well enough with the regular PrintScreen button and paste. However, as you, and others, mention: Snagit has grab and mark up combined together. Its a pity its not free.

mizipzor 2010-02-08 13:54:59

+1 A:

If you're the one doing the screen shots, you might want to consider TechSmith's SnagIt. Not only is it the best screen shot taker I'm familiar with (I've been working with it since the late 90s), but it also has a pretty good editor (better than Paint). One of the features in it is that you can add "stamps", and there are stamps for letters and numbers. It doesn't create a content table for you, but it'll still be much faster than using Paint.

There's a free trial you can try on their site.

If you're just looking to edit, stay away from paint. And use something like Visio (PC) or OmniGRaffle (mac) if you have access to them. Copy paste the photo, make the edits in vector form using the convenient tools, and then save the whole thing as PDF for inclusion in your documentation (if it is printed) or as a PNG/JPG for web inclusion.

Uri 2010-01-25 19:20:24

The stamp system is exactly what I was looking for. +1

mizipzor 2010-01-25 21:13:45

Glad to be of help. The one disadvantage of Snagit is that it is windows only (maybe since the mac has it's own grab tool), but I think there may be a (free?) beta of the upcoming version.

Uri 2010-01-25 21:28:04

Doesnt really matter, Ill probably only use this under Windows anyway. Hmm... might add that tag.

mizipzor 2010-01-25 23:00:31

Just returned to this question, I checked out Microsoft Visio but that seems more geared towards the creation of flowcharts (quite powerful though) rather than screenshot markup. Or am I missing something? Maybe my question was vague, Im looking to display an annotated "target render" of the user interface (which explains how to use it), rather than a flowchart that explains the process behind it.

mizipzor 2010-02-08 14:01:31

@mizipor: When I annotate snapshots these days, I use OmniGraffle on the Mac. I take the snapshot, paste it on the canvas, and then start laying callouts from the callout stencil on top. Then I take the whole thing, group it, and export to pdf or png. You should be able to do the same with Visio on Windows. Visio uses different types of stencis. Try starting with a blank page, paste your screenshot, then either use the drawing tools to create stamps or look for the stencil in Visio - there is on one for callouts. Still, if you do a lot of screenshots, paying for Snagit may be a good investment

Uri 2010-02-09 23:23:46

@mizipor: Here is a related link from MS: http://office.microsoft.com/en-us/visio/HA011822461033.aspx

Uri 2010-02-09 23:24:44

+1 A:

To reiterate previous answers, SnagIt has callout tools within its graphic editor.

http://www.techsmith.com/learn/snagit/9/edit/callouts.asp

bryanjonker 2010-01-25 20:06:43

Ah! Callouts seem to be exactly what I am looking for. I thought it was yet another "take a screenshot of a part of the screen easy" tool. Ill look into it now, thanks. :) +1

mizipzor 2010-01-25 21:13:00

Another alternative is Gadwin. The free version is the basic "take screenshots easier" thing, the professional has the annotation feature.

mizipzor 2010-01-25 23:01:26

I recently revisited this issue. A co-worker showed me FastStone Capture and I ended up using it.

Its free.
Its portable.
Still does nifty "section of screen" grabbing.
Annotation could use some improvements, but compared to Paint .Net Im working faster and it looks better.

mizipzor 2010-02-10 09:20:36

ansaurus

tags:

views:

answers:

Application to help explain a GUI

related questions