Quelle est une bonne (et facile) façon de montrer qu'une capture d'écran est une capture d'écran?

J'utilise Mac OS X 10.6 et j'aime l'outil de capture d'écran du système. Par défaut, lorsque vous saisissez une fenêtre entière, elle mettra un peu d'ombre / dégradé en dessous, avec transparence, en utilisant une image PNG - ce qui, je pense, est plutôt sympa.

Cependant, si vous capturez une région de l'écran, par exemple à partir d'une page Web, les bords sont plats et il peut être difficile de la distinguer du reste du site Web, surtout si elle ressemble aux éléments qui s'y trouvent déjà. .

Ma question est donc la suivante: quelle est la manière simple et élégante de montrer qu'une image ne fait pas partie d'un site Web? Je pense qu'une bordure noire de 5 pixels le ferait probablement, mais ce n'est pas chic. J'aime le dégradé subtil qu'OS X fait, mais est-ce approprié pour toutes les captures d'écran, et serait-ce facile à créer?

J'adorerais vraiment s'il y avait un script que je pourrais utiliser pour appliquer la transformation sans avoir à ouvrir Photoshop lui-même, mais ce n'est pas une exigence pour une réponse acceptable.

^ exemple du problème dont je parle

Cela dépend totalement du type d'images dont nous parlons.

Façons possibles de le faire:

1. Texte dans un coin disant "Capture d'écran" ou "Capture d'écran"
2. Icône d'appareil photo dans un coin ou Texte et image de l'icône d'appareil photo.
3. En cas de dire cette boîte de réponse, le moyen le plus sûr peut être de le superposer avec une autre couleur et de révéler l'image en survol.
4. Parce que # 3 n'est peut-être pas si clair, cette superposition peut être accompagnée de texte et / ou d'icône ou s'il n'y a pas de couleur de superposition, elle peut également être inversée.
5. Une sorte de frontière pourrait être un bon indicateur.

En ce qui concerne les techniques:

# 1 et # 2
Beaucoup de programmes de capture d'écran permettent des filigranes qui seraient idéaux pour des images simples ou peu d'images. En cas d'images multiples, Photoshop pourrait être utilisé pour ajouter un filigrane. Ou une HTML/CSSlégende.

# 3, # 4 et # 5
Ceux-ci devraient être faits avec HTML/CSSlégende.

Je n'ai pas pu m'empêcher de penser à un de mes projets ... maintenant .. "Je ne veux pas faire de publicité ... Mais ..." http://photoshopmesta.net/sic/theTest/ quelque chose comme ça pourrait être utilisé pour montrez qu'il s'agit d'une image lorsque vous survolez l'image.

N'ayant rien d'autre à faire, j'ai donné un exemple de la façon dont cela pourrait fonctionner http://photoshopmesta.net/1/screenshot/

Oh au fait, j'étais sur mon iPad en train de lire ceci et je dois avouer que j'ai essayé de cliquer sur l'image de réponse. Je suis allé de l'avant pour vous donner un +1. J'aimerais pouvoir donner +2 car c'était un excellent exemple :)

Ceci est ma façon préférée, ne fonctionne pas dans toutes les situations, mais est idéal pour les captures d'écran en plein écran.

C'est une bonne idée de garder l'approche cohérente, tout en mettant en valeur vos captures d'écran de manière subtile. Je trouve que l'ombre portée par défaut d'Apple est un peu trop.

J'ajoute juste un trait centré 3px à la photo avec une opacité de 40%. Vous pouvez y ajouter une ombre portée si vous le souhaitez.

Selon le contexte, vous pourriez faire bien pire que de simuler un cadre "moniteur" stylisé (peut-être en gris pomme?). Le script du processeur d'images de Photoshop vous permet d'exécuter une action lors du traitement d'images par lots, vous pouvez donc créer une action qui redimensionne la toile, place le "moniteur" au-dessus de la capture d'écran, ajoute un arrière-plan standard (pour les captures d'écran qui ne remplissent pas la cadre), puis enregistre le résultat au format png ou jpeg.

Vous n'avez pas besoin d'être aussi élaboré qu'un moniteur stylisé, et si vous ne voulez pas qu'ils aient tous la même taille, votre action peut simplement ajouter un trait de dégradé à une image de taille arbitraire. Cela vous permettrait de traiter par lots à partir de Bridge ( Tools > Photoshop > Batch...) et de tout faire dans l'action.

Certaines choses qui pourraient aider:

• Inclure des parties coupées des éléments environnants. Vous pouvez ajouter une ombre portée et un effet semblable à un bord déchiré pour le souligner. (Pour l'effet de bord déchiré, je crée un masque de calque et j'applique le filtre Distorsion> Ocean Ripple de Photoshop avec une petite taille d'ondulation (2) et une petite amplitude d'ondulation (3).)
• Réduisez la taille de l'image afin qu'elle ne soit plus à la même échelle que les éléments de page réels. (Et éventuellement autoriser les utilisateurs à cliquer sur la vignette pour voir une version en taille réelle.)

Par exemple:

(Vous m'avez dupé avec le coup du répondeur. Très intelligent.) Mais quant à ma réponse ...

Je suggère d'utiliser un effet de cadre pour rendre la photo visuellement significative à partir du reste de la page. Donnez-lui juste un bord de papier dentelé. Voilà ce que je ferais.

Comme ligne latérale, si vous souhaitez utiliser la capture d'écran de la fenêtre entière mais que vous n'avez pas les grandes ombres et les zones transparentes afin que vous puissiez appliquer rapidement votre propre style, entrez simplement ce qui suit dans Terminal:

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

Ensuite, redémarrez ou entrez les informations suivantes pour voir les modifications immédiatement:

$ killall SystemUIServer

Voici comment inverser ce qui précède:

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

via un article utile sur tutsplus.com

Pour afficher les captures d'écran en tant que telles, j'ai utilisé un dégradé radial gris clair et une ombre de boîte. Cette méthode a l'avantage d'être possible avec seulement CSS - aucune modification d'image requise:

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;

Ajoutez une marque d'eau à l'image:

: P