What’s a good (and easy) way to show that a screenshot is a screenshot?

by

I’m using Mac OS X 10.6 and I like the system screen grab tool. By default when you grab an entire window it will put a bit of a shadow / gradient below it, with transparency, using a PNG image – which I think is pretty nice.

However, if you capture a region of the screen, for example from a web page, the edges are flat and it can be difficult to tell it apart from the rest of the website, especially if it looks similar to the elements that are already there.

So my question is this – what’s an easy, classy, way to show that an image is not in fact part of a website? I think a 5 pixel black border would probably do it, but that’s not classy. I like the subtle gradient that OS X does, but is that appropriate for all screenshots, and would that be easy to create?

I’d truly love it if there was a script I could use to apply the transformation without having to open photoshop itself, but that’s not a requirement for an acceptable answer.

enter image description here

^ example of the problem I’m talking about

Answer

Totally depends on what type of images we’re talking about.

Possible ways of doing it:

  1. Text in some corner saying “Screenshot” or “Screencapture”
  2. Camera icon some corner or Text and image of camera icon.
  3. In case of say that answer box, the safest way may be to overlay it with another color and reveal the image on hover.
  4. Because #3 might not be all that clear, that overlay could be accompanied with text and/or icon or if there is no overlay color it could be reversed as well.
  5. Some sort of border could be good indicator.

As far as techniques go:

#1 and #2
A lot of screencapture programs allow watermarks which would be ideal for single images or few images. In case of multiple images Photoshop could be used to add a watermark. Or an HTML/CSS caption.

#3, #4 and #5
These would have to be made with HTML/CSS caption.

Couldn’t help but think about one of my projects… now.. “I dont want to advertise… But…” http://photoshopmesta.net/sic/theTest/ something like this could be used to show that it is image when you hover over image.

Didn’t have anything else to do so I made example of how it could work http://photoshopmesta.net/1/screenshot/

Oh by the way, I was on my iPad reading this and I have to confess that I did try to click the answer image. I went right ahead to give you a +1. Wish I could give +2 as that was excellent example 🙂

Attribution
Source : Link , Question Author : cwd , Answer Author : phwd

Leave a Comment