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.

Tweaking screenshots before you take them

Web Developer toolbar

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.

Tweaking screenshots without an image editor

The page untouched

Let’s assume that my scenario demands an editor named Beetlejuice. I open Web Developer’s “Miscellaneous” menu and choose “Edit HTML”.

Tweaking screenshots without an image editor

Choosing the "Edit HTML" option

The Web Developer panel opens at the bottom of the window. I search for the text “Sarah”.

Tweaking screenshots without an image editor

Searching for the text to replace

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.

Tweaking screenshots without an image editor

Beetlejuice is now the last editor

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:

  1. Install the Firebug add-on into Firefox.
  2. Click the little bug at bottom right of the window. The Firebug panel opens at the bottom of the browser window.
  3. Click the pointer icon, second from the left at the top of the Firebug panel.
  4. 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.
  5. Make your change to the HMTL in the Firebug window.
  6. Take your screenshot.
  7. Click the bug to close the Firebug panel.
  8. 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!

Tweaking screenshots before you take them

A Galah near Sydney, Australia

“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?

About these ads

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 10 July 2011, in technical writing and tagged , , , , . Bookmark the permalink. 9 Comments.

  1. This is a great tip Sarah! I have FF Web Developer installed but haven’t really put it into any use.

  2. 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!

  3. 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.

  4. 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

  5. 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.

  1. 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

  2. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,465 other followers

%d bloggers like this: