: What's a good (and easy) way to show that a screenshot is a screenshot? 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

@Smith574

Some things that would help:


Include cut-off portions of surrounding elements. You can add a drop shadow and a torn-edge-like effect to emphasize this. (For the torn-edge effect, I create a layer mask and apply Photoshop's Distort > Ocean Ripple filter with a small ripple size (2) and small ripple magnitude (3).)
Reduce the size of the image so that it's no longer at the same scale as real page elements. (And possibly allow users to click on the thumbnail to see a full-sized version.)


For example:

Vote Up Vote Down

@Speyer780

Add a water mark to the image:



:P

Vote Up Vote Down

@Pierce403

To show screenshots as such, I've used a light-gray radial gradient and a box shadow. This method has the advantage of being possible with just CSS--no image editing needed:

background: -webkit-radial-gradient(white,white,#e5e6e7);
background: -o-radial-gradient(white,white,#e5e6e7);
background: -moz-radial-gradient(white,white,#e5e6e7);
background: radial-gradient(white,white,#e5e6e7);
box-shadow: 0px 0px 2px #555555 ;

Vote Up Vote Down

@Merenda852

As a side-line, if you're wanting to use the entire window screenshot but not have the large shadows and transparent areas so that you can quickly apply your own styling just enter the following into Terminal:

$ defaults write com.apple.screencapture disable-shadow -bool TRUE


Then either restart or enter the following to see the changes straight away:

$ killall SystemUIServer


Here's how to reverse the above:

$ defaults write com.apple.screencapture disable-shadow -bool FALSE
$ killall SystemUIServer


via a useful article on tutsplus.com

Vote Up Vote Down

@LarsenBagley460

This is my personal favourite way, doesn't work in all situations though but ideal for full-screen screenshots.

Vote Up Vote Down

@Sims5801359

(You fooled me with the shot of the answering box. Very clever.)
But as for my answer...

I'd suggest using a frame effect to make the shot visually significant from the rest of the page. Just give it a jagged paper edge. That's what I'd do.

Vote Up Vote Down

@Tiffany317

Depending on the context, you could do a lot worse than mock up a stylized "monitor" frame (perhaps in Apple grey?). Photoshop's Image Processor script lets you run an Action when batch processing images, so you could create an action that resizes the canvas, drops in the "monitor" above the screen shot, adds a standard background (for screen grabs that don't fill the frame), then saves the result as a png or jpeg.

You don't have to go as elaborate as a stylized monitor, and if you don't want them all to be the same size, your action might simply add a gradient stroke to an arbitrarily sized image. That would allow you to batch process from Bridge (Tools > Photoshop > Batch...) and do everything in the Action.

Vote Up Vote Down

@Rambettina927

It's a good idea to keep the approach consistent, while highlighting your screenshots in a subtle way. I find Apple's default drop shadow a tad too much.

I just add a 3px centered stroke to the shot with opacity at 40%. You can add a drop shadow to it if you like.

Vote Up Vote Down

@Ogunnowo857

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

Possible ways of doing it:


Text in some corner saying "Screenshot" or "Screencapture"
Camera icon some corner or Text and image of camera icon.
In case of say that answer box, the safest way may be to overlay it with another color and reveal the image on hover.
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.
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..." 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 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 :)

Vote Up Vote Down