¿Cuál es una buena (y fácil) forma de mostrar que una captura de pantalla es una captura de pantalla?


14

Estoy usando Mac OS X 10.6 y me gusta la herramienta de captura de pantalla del sistema. Por defecto, cuando tomas una ventana completa, colocará un poco de sombra / degradado debajo de ella, con transparencia, usando una imagen PNG, lo que creo que es bastante bueno.

Sin embargo, si captura una región de la pantalla, por ejemplo, desde una página web, los bordes son planos y puede ser difícil distinguirlo del resto del sitio web, especialmente si se parece a los elementos que ya están allí. .

Entonces mi pregunta es esta: ¿cuál es una manera fácil, elegante, de mostrar que una imagen no es, de hecho, parte de un sitio web? Creo que un borde negro de 5 píxeles probablemente lo haría, pero eso no es elegante. Me gusta el gradiente sutil que hace OS X, pero ¿es apropiado para todas las capturas de pantalla, y sería fácil de crear?

Realmente me encantaría si hubiera un script que pudiera usar para aplicar la transformación sin tener que abrir el propio Photoshop, pero ese no es un requisito para una respuesta aceptable.

ingrese la descripción de la imagen aquí

^ ejemplo del problema del que estoy hablando


55
Buen ejemplo Por un momento pensé que Chrome tenía un problema de renderizado ...
Farray

1
Con clase, el contexto lo es todo. Un borde de 5px es un K-car con clase, una sombra paralela es un auto deportivo con clase, y el borde de 1px es un sedán de lujo con clase.
Horacio

1
Parece que ImageShack eliminó su imagen y la reemplazó con un banner publicitario. Si puede, vuelva a cargar la imagen (o algo equivalente) utilizando el botón de carga de imágenes en la barra de herramientas del editor (que lo cargará en la cuenta imgur de Stack Exchange).
Ilmari Karonen

Respuestas:


8

Depende totalmente de qué tipo de imágenes estamos hablando.

Posibles formas de hacerlo:

  1. Texto en alguna esquina que dice "Captura de pantalla" o "Captura de pantalla"
  2. Icono de la cámara en alguna esquina o Texto e imagen del icono de la cámara.
  3. En el caso de decir ese cuadro de respuesta, la forma más segura puede ser superponerlo con otro color y revelar la imagen al pasar el mouse.
  4. Debido a que el n. ° 3 podría no ser tan claro, esa superposición podría ir acompañada de texto y / o icono o, si no hay color de superposición, también podría revertirse.
  5. Algún tipo de frontera podría ser un buen indicador.

En cuanto a las técnicas:

# 1 y # 2
Muchos programas de captura de pantalla permiten marcas de agua que serían ideales para imágenes individuales o pocas imágenes. En caso de varias imágenes, Photoshop podría usarse para agregar una marca de agua. O una HTML/CSSleyenda.

# 3, # 4 y # 5
Estos tendrían que hacerse con HTML/CSSsubtítulos.


No pude evitar pensar en uno de mis proyectos ... ahora ... "No quiero anunciar ... Pero ..." http://photoshopmesta.net/sic/theTest/ algo como esto podría usarse para muestra que es imagen cuando pasas el cursor sobre la imagen.

No tenía nada más que hacer, así que hice un ejemplo de cómo podría funcionar http://photoshopmesta.net/1/screenshot/


Ah, por cierto, estaba en mi iPad leyendo esto y tengo que confesar que intenté hacer clic en la imagen de respuesta. Seguí adelante para darte un +1. Ojalá pudiera dar +2 ya que fue un excelente ejemplo :)


6

Esta es mi forma favorita personal, aunque no funciona en todas las situaciones, pero es ideal para capturas de pantalla a pantalla completa.

Captura de pantalla exmaple


¿Puedes dar más detalles sobre cómo lograr esto o vincular a algún lugar que tenga un tutorial?
cwd

Ctrl + PrintScrn para imprimir la pantalla, péguelo en Photoshop. Obtenga una foto de un monitor de Internet y ábralo en Photoshop. Copie su captura de pantalla en la imagen del monitor y use la herramienta editar> transformar> distorsionar para arrastrar las esquinas a la forma de la pantalla.
Scott Brown

4

Es una buena idea mantener el enfoque consistente, mientras resalta sus capturas de pantalla de una manera sutil. Encuentro la sombra paralela predeterminada de Apple un poco demasiado.

Solo agrego un trazo centrado de 3px a la toma con una opacidad del 40%. Puede agregarle una sombra paralela si lo desea.


gracias, ¿puedes agregar un ejemplo?
cwd

4

Dependiendo del contexto, podría hacer mucho peor que simular un marco estilizado de "monitor" (¿tal vez en gris de Apple?). El script del procesador de imágenes de Photoshop le permite ejecutar una acción cuando procesa imágenes por lotes, por lo que podría crear una acción que redimensione el lienzo, se coloque en el "monitor" sobre la captura de pantalla y agregue un fondo estándar (para capturas de pantalla que no llenen el frame), luego guarda el resultado como png o jpeg.

No tiene que ser tan elaborado como un monitor estilizado, y si no desea que todos tengan el mismo tamaño, su acción podría simplemente agregar un trazo de degradado a una imagen de tamaño arbitrario. Eso le permitiría procesar por lotes desde Bridge ( Tools > Photoshop > Batch...) y hacer todo en la Acción.


4

Algunas cosas que ayudarían:

  • Incluya porciones de corte de elementos circundantes. Puede agregar una sombra paralela y un efecto de borde rasgado para enfatizar esto. (Para el efecto de borde rasgado, creo una máscara de capa y aplico el filtro Distort> Ocean Ripple de Photoshop con un pequeño tamaño de ondulación (2) y una pequeña magnitud de ondulación (3).)
  • Reduzca el tamaño de la imagen para que ya no esté a la misma escala que los elementos de página reales. (Y posiblemente permita a los usuarios hacer clic en la miniatura para ver una versión a tamaño completo).

Por ejemplo:

Captura de pantalla de ejemplo


El segundo punto funciona bien, parece. ¡Buena esa!
Bharat

3

(Me engañaste con la foto del contestador. Muy inteligente.) Pero en cuanto a mi respuesta ...

Sugeriría usar un efecto de marco para hacer que la toma sea visualmente significativa del resto de la página. Solo dale un borde de papel dentado. Eso es lo que haría.


No soy profesional en Photoshop, ¿es fácil de hacer?
cwd

Podrías fácilmente hacer un rectángulo blanco, colocar la foto encima y luego borrar alrededor de la foto de manera irregular. Debería ser fácil de hacer en Photoshop.
Andrew Davis

1

Como una línea lateral, si desea utilizar la captura de pantalla completa de la ventana pero no tiene las sombras grandes y las áreas transparentes para que pueda aplicar rápidamente su propio estilo, simplemente ingrese lo siguiente en la Terminal:

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

Luego, reinicie o ingrese lo siguiente para ver los cambios de inmediato:

$ killall SystemUIServer

Aquí se explica cómo revertir lo anterior:

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

a través de un artículo útil en tutsplus.com


0

Para mostrar capturas de pantalla como tal, he usado un degradado radial gris claro y una sombra de cuadro. Este método tiene la ventaja de ser posible con solo CSS: no es necesario editar imágenes:

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;

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.