Tweaking screenshots without an image editor
A technical writer’s nightmare! You know that feeling you get when you’re taking screenshots and something happens to mess up your scenario. You can’t go back. You can never reproduce that screenshot again. “You silly Galah,” you say to yourself, before heading out for a glass of strong hot chocolate.
There are other reasons why you may want to change the data on a screenshot. Maybe you need to remove your name, other identification or private data. Maybe you want to remove the word “beta” from the software version number.
One way to fix the data is to take the screenshot anyway, then tweak it in an image editor. But that’s so cumbersome. If only you could tweak the text before taking the screenshot!
Well, you can. Technical writers rejoice!
Enter Firefox Web Developer
Web Developer is a Firefox add-on developed by Chris Pederick. Its website says that it also works in Google Chrome. When you install the add-on into Firefox, you get a new toolbar across the top of the browser window. It offers a number of very cool options. Here is just part of the toolbar, with the “Miscellaneous” option expanded.
It’s that “Edit HTML” option that’s useful for tweaking screenshots before we even take them.
Take a look at the page below. It says that the last editor of the page was one Sarah Maddox.
Let’s assume that my scenario demands an editor named Beetlejuice. I open Web Developer’s “Miscellaneous” menu and choose “Edit HTML”.
The Web Developer panel opens at the bottom of the window. I search for the text “Sarah”.
Then I type in my replacement text, and it appears on the page as I type. Magic: the last editor of the page is now Beetlejuice.
When I refresh the page, it will return to its proper state. The change is only in my browser, not on the server and not visible to others who view the page on their computers.
Firebug and others
Firebug is another Firefox add-on that will do the trick. It is a little more heavyweight than Web Developer, and can slow down the response from the websites. On the other hand, I found it easier to get a screenshot of the entire window, including my changes, when using Firebug. In Web Developer, my changes disappeared each time I closed the HTML panel.
To use Firebug:
- Install the Firebug add-on into Firefox.
- Click the little bug at bottom right of the window. The Firebug panel opens at the bottom of the browser window.
- Click the pointer icon, second from the left at the top of the Firebug panel.
- Move your mouse pointer across your screen. Firebug will draw lines to highlight the various UI elements. Click when it highlights the bit you need to change.
- Make your change to the HMTL in the Firebug window.
- Take your screenshot.
- Click the bug to close the Firebug panel.
- Refresh the page. Firebug only changes what the browser displays.
I’m sure there are more tools that can do the same thing in Firefox, as well as in Internet Explorer and other browsers.
Food for thought
Hmm. Thinking of the wider implications: Anyone can write anything on a website, take a screenshot, and make it look as if the website owner wrote it. 🙂
You silly Galah!
“You silly Galah!” Australians say that, usually with affection, when someone does something stupid. I wonder how the expression arose. Why would you ever call something silly, when it’s so lovely?
Posted on 10 July 2011, in technical writing and tagged Firebug, Firefox Web Developer, screenshots, technical documentation, technical writing. Bookmark the permalink. 9 Comments.
This is a great tip Sarah! I have FF Web Developer installed but haven’t really put it into any use.
Thanks Lingbo! Web developer is fun. For example, it helps you to see what CSS is in use where.
This is so good to know. I’ve run into this scenario a few times before and it’s so frustrating. I knew that you could edit HTML with FF Developer but I just never put two and two together. Thanks!
This is fantastic, Sarah, and I’m so glad that you shared it.
I never heard of the galah before. (Is it pronounced “golla” or “galla”?) In America I guess we’d say “you silly goose.” But the galah is ever so much more beautiful.
Hallo Arwen and Larry
I’m so glad you like the tip. Yes, what a pretty bird. It’s pronounced “gull-aah”, with the emphasis on the second syllable. So “You silly galah” has a nice cadence to it. 🙂
Cheers, Sarah
Nice tip – this is great for web-based apps – firebug is very powerful.
For standard application changes, SnagIt really makes it easy to grab the new screen, cut out just the section you need then slap it onto the old image and save – no cumbersome Photoshop required.
Hallo tjrainey
Yes, Snagit is great. We’ve just got licences for Snagit too, and I’m busy learning my way around it. The very best thing is that you can take a screenshot of the entire page, including the bits that are outside the current view.
Cheers, Sarah.
Pingback: Capture Fox: Record Your Screen With Sound in Firefox! Free! Easy! & Transtar Interactive Math Games for Transformation and Reflections! (Revised 6/9/12) | MyWeb4Ed
Pingback: Capture Fox: Record Your Screen With Sound in Firefox! Free! Easy! & Transtar Interactive Math Games for Transformation and Reflections! (Revised 6/9/12) | MyWeb4Ed