O que é uma maneira boa (e fácil) de mostrar que uma captura de tela é uma captura de tela?

Estou usando o Mac OS X 10.6 e gosto da ferramenta de captura de tela do sistema. Por padrão, quando você pega uma janela inteira, ela coloca um pouco de sombra / gradiente abaixo dela, com transparência, usando uma imagem PNG - o que eu acho bastante legal.

No entanto, se você capturar uma região da tela, por exemplo, a partir de uma página da Web, as bordas são planas e pode ser difícil diferenciá-lo do restante do site, principalmente se parecer com os elementos que já estão lá .

Então, minha pergunta é: qual é a maneira mais fácil e elegante de mostrar que uma imagem não faz parte de um site? Eu acho que uma borda preta de 5 pixels provavelmente faria isso, mas isso não é elegante. Eu gosto do gradiente sutil que o OS X faz, mas é apropriado para todas as capturas de tela e isso seria fácil de criar?

Eu realmente adoraria se houvesse um script que eu pudesse usar para aplicar a transformação sem ter que abrir o próprio photoshop, mas isso não é um requisito para uma resposta aceitável.

^ exemplo do problema de que estou falando

Depende totalmente do tipo de imagem que estamos falando.

Possíveis maneiras de fazê-lo:

1. Texto em algum canto dizendo "Screenshot" ou "Screencapture"
2. Ícone da câmera em algum canto ou Texto e imagem do ícone da câmera.
3. No caso de dizer a caixa de resposta, a maneira mais segura pode ser sobrepor outra cor e revelar a imagem ao passar o mouse.
4. Como o item 3 pode não ser tão claro, essa sobreposição pode ser acompanhada de texto e / ou ícone ou, se não houver cor de sobreposição, também poderá ser revertida.
5. Algum tipo de fronteira pode ser um bom indicador.

No que diz respeito às técnicas:

# 1 e # 2
Muitos programas de captura de tela permitem marcas d'água, o que seria ideal para imagens únicas ou poucas imagens. No caso de várias imagens, o Photoshop pode ser usado para adicionar uma marca d'água. Ou uma HTML/CSSlegenda.

# 3, # 4 e # 5
Estes teriam que ser feitos com HTML/CSSlegenda.

Não pude deixar de pensar em um dos meus projetos ... agora .. "Eu não quero anunciar ... Mas ..." http://photoshopmesta.net/sic/theTest/ algo assim poderia ser usado para mostre que é imagem quando você passa o mouse sobre a imagem.

Como não havia mais nada, fiz um exemplo de como poderia funcionar http://photoshopmesta.net/1/screenshot/

Ah, a propósito, eu estava no meu iPad lendo isso e tenho que confessar que tentei clicar na imagem da resposta. Fui em frente para lhe dar um +1. Gostaria de poder dar +2, pois esse foi um excelente exemplo :)

Essa é minha maneira favorita pessoal, mas não funciona em todas as situações, mas é ideal para capturas de tela em tela cheia.

É uma boa ideia manter a abordagem consistente, destacando as capturas de tela de maneira sutil. Acho a sombra padrão da Apple um pouco demais.

Acabei de adicionar um golpe centrado em 3px à foto com opacidade em 40%. Você pode adicionar uma sombra projetada, se quiser.

Dependendo do contexto, você pode fazer muito pior do que simular uma moldura estilizada de "monitor" (talvez em cinza-maçã?). O script Image Processor do Photoshop permite executar uma Ação ao processar imagens em lote, para que você possa criar uma ação que redimensione a tela, que caia no "monitor" acima da captura de tela e adicione um plano de fundo padrão (para capturas de tela que não preenchem a tela). quadro) e salva o resultado como png ou jpeg.

Você não precisa ser tão elaborado quanto um monitor estilizado e, se não quiser que todos tenham o mesmo tamanho, sua ação pode simplesmente adicionar um traço de gradiente a uma imagem de tamanho arbitrário. Isso permitiria que você processasse em lote a partir de Bridge ( Tools > Photoshop > Batch...) e fizesse tudo na ação.

Algumas coisas que ajudariam:

• Inclua partes cortadas dos elementos circundantes. Você pode adicionar uma sombra projetada e um efeito de borda rasgada para enfatizar isso. (Para o efeito de borda rasgada, eu crio uma máscara de camada e aplico o filtro Distort> Ocean Ripple do Photoshop com um tamanho de ondulação pequeno (2) e magnitude de ondulação pequena (3).)
• Reduza o tamanho da imagem para que não fique mais na mesma escala dos elementos reais da página. (E, possivelmente, permita que os usuários cliquem na miniatura para ver uma versão em tamanho real.)

Por exemplo:

(Você me enganou com o tiro da caixa de respostas. Muito esperto.) Mas quanto à minha resposta ...

Eu sugiro usar um efeito de quadro para tornar a foto visualmente significativa do resto da página. Apenas dê uma borda de papel irregular. Era o que eu faria.

Como uma linha lateral, se você deseja usar a captura de tela inteira da janela, mas não possui grandes sombras e áreas transparentes, para poder aplicar rapidamente seu próprio estilo, basta inserir o seguinte no Terminal:

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

Em seguida, reinicie ou digite o seguinte para ver as alterações imediatamente:

$ killall SystemUIServer

Veja como reverter o acima:

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

através de um artigo útil no tutsplus.com

Para mostrar as capturas de tela, usei um gradiente radial cinza claro e uma sombra de caixa. Este método tem a vantagem de ser possível apenas com CSS - não é necessária edição de imagem:

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;

Adicione uma marca d'água na imagem:

: P