How to format UI control screenshots so users don't think they're touchable?

Question

I have a need in a touchscreen mobile app to show users a message that informs them about some system function that they should know might affect my app. As well as describing the issue, I want to use an image clip of the Preferences setting so they can see visually which system function they might want to toggle.

Problem is, if I show a life-size pixel-perfect grab of the preference control, it looks like they can interact (touch) it right there in my message "dialog", when in fact it's static and non-interactive.

How can I visually convey in this clipped image that it is in fact an illustration, and not the actual control?

Answer 1

I immediately wondered if the images could be wired up to open the preference setting they refer to. Assuming that won't work, three tactics come to mind:

1. Try turning the preference control images to grayscale, so that they can still be visually identified but also recognized as reference images, not actual controls.

2. Try showing a bit of the area surrounding each control so that it looks less like a button and more like a bit of a screen grab. If you can combine it with a callout without getting cluttered, all the better.

3. Try adding a border styled to invoke thoughts of a picture around the preference item image. The curled photograph frame can be a fairly light touch but clearly mark the image as a picture, not the real thing.

I did a couple quick examples to show 2 and 3.