Captura de pantalla del sitio web de la más alta calidad?

16

He creado un sitio web que me gustaría agregar a mi cartera, pero estoy teniendo dificultades para obtener capturas de pantalla de alta calidad del sitio completo. Traté de guardar el sitio web como PDF, pero estaba lleno de errores, otros servicios en línea no pueden recrear las imágenes, etc. También he intentado tomar capturas de pantalla regulares en el Mac para unirlo todo, pero realmente perdió mucha calidad cuando lo reduje.

¿Alguna buena idea? :)

website-design screenshot usuario22524
fuente
¿Puede proporcionar un ejemplo de lo que está sucediendo y quizás una demostración de lo que está tratando de lograr?
cclark413
Cuando dice "cartera", ¿se refiere a uno físico (impreso en papel) o una colección de imágenes (JPG, PNG) que puede distribuir en medios digitales o en línea?
Daze
Estoy muy interesado en por qué las capturas de pantalla de mac que el OP ha intentado no son mejores que las soluciones a continuación. No estoy al tanto de ninguna captura de pantalla de alta definición, así que si alguien pudiera explicarme esa. Además, también estoy interesado en el problema de escala. Por lo general, es al revés. Por supuesto, cuando reduce algo, ¿hay menos espacio para que los píxeles representen la imagen, pero una pérdida de "calidad"? ¿Quizás su porcentaje de zoom lo hace aparecer de esta manera? Pruebe 100%
cclark413
1
Resolución 1920x1080 pantalla (1080p) da una imagen para la impresión de que es adecuado para 6.4 x 3.6 pulgadas
horatio

Respuestas:

16

En Firefox, puede abrir la consola con Shift+F2y usar screenshot --fullpage.

Para escalarlo a diferentes dimensiones y tamaños mientras se preserva la calidad del texto, use Ctrl+Shift+M(o Cmd+Opt+Men OS X) para ingresar al visor de diseño receptivo y cambie el tamaño según sea necesario (también puede usar esto para obtener capturas de pantalla a una resolución más alta que la que admite su monitor, u obtener imágenes de vistas de tableta / móvil). No se necesitan complementos.

Ejemplo grande

Pequeño ejemplo

Slade
fuente
7

Si desea tomar una captura de pantalla de página completa en un sitio web, puede usar este complemento de Google Chrome .

Esto hará varias capturas de pantalla (mientras se desplaza) y las combinará en una imagen .png.

Solo tiene que hacer clic en el complemento y elegir "Capturar toda la página".

ingrese la descripción de la imagen aquí

Stéphane
fuente
Yo personalmente uso este , hace que sea bastante fácil guardar los archivos.
Yisela
Las capturas de pantalla deben usarse en la cartera de mi propio sitio web. He intentado tanto Awesome Screenshot como Webpage Screenshot, pero no funcionan en la página que intento capturar. El efecto de paralaje arruina la captura de pantalla y los elementos que aparecen por primera vez cuando el usuario se desplaza hacia abajo no aparecen en la captura de pantalla. He visto algunas soluciones que podrían convertir el CSS a vector, lo que sería perfecto, pero parecen arruinar la estructura de la página y no pueden manejar las imágenes.
McKeene
1
Parralax es una animación que no se puede capturar en una imagen fija. Intente deshabilitar las imágenes de fondo y luego haga una imagen compuesta usando capturas de pantalla y los archivos de origen.
horatio
1
Yo también uso esto. Es asombroso. Sin embargo, no funciona en archivos locales. Primero debe alojar la página html. También hay una buena pantalla de impresión. Si desea una herramienta de captura de pantalla rápida para capturar el movimiento / paralaje, pruebe Screencast-o-matic . Está basado en la web y la salida de video es de muy buena calidad.
John
1

Recomiendo Faststone Capture , que también puede usar fuera del navegador para cualquier otra cosa. Desafortunadamente, como mencionó @McKeene, tiene problemas para unir las imágenes individuales a una grande debido al efecto de desplazamiento.

La versión 5.3 es gratuita (descarga en alemán) para usuarios domésticos. De lo contrario, la última versión cuesta alrededor de $ 20.

Captura de pantalla de FastStone Capture

Thomas Weller
fuente
1

Los usuarios de Firefox simplemente agregan un complemento llamado "Captura de pantalla impresionante". Para descargar este complemento, visite el siguiente enlace https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/

Los usuarios de Chrome pueden ir a https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=en

Este complemento permite a los usuarios tomar una captura de pantalla de la parte VISIBLE así como de la PÁGINA COMPLETA, puede recortar, insertar formas, etc. sin cambiar a otro programa.

usuario22557
fuente
1

Recientemente comencé a usar Pagelayers para Mac y estoy bastante contento con eso.

Algunas cosas que amo:

  • Los psd se pueden generar con ancho personalizado y altura infinita.

  • Los psd generados se dividen en grupos y capas.

  • Puede guardar en PNG directamente

Algunas cosas que me molestan:

  • Requiere que la página se cargue en la aplicación. Sin extensión de cromo. Esto puede ser bastante tedioso, especialmente cuando solo quieres una captura de pantalla simple. (Mi mayor queja con eso)
  • El archivo psd generado puede ser bastante grande.

Cosas que quizás no te gusten:

Precio: £ 20

Tengo un caso de uso diferente, por lo tanto, puedo justificar el precio, sin embargo, es posible que no lo haga si solo necesita capturas de pantalla simples.

Espero que esto ayude.

trylife
fuente
1

En caso de que a alguien le interese leer todas las respuestas y no esté satisfecho con las anteriores, que también son excelentes, hay otro complemento de captura de pantalla para Firefox: "¡ Captura de pantalla !" . No sé qué resolución puede obtener, pero toda la página actual estará en la captura de pantalla, no solo la parte visible. Además, puede ir y tomar una selección específica o solo la parte actualmente visible de su pantalla, se guarda en formato png.

Jaromír el Cuerno Verde
fuente
La resolución que obtenga depende de la configuración de pantalla del monitor que esté utilizando.
Rafael