Que resolución es mejor para capturas de pantallas y..

  • Autor Autor Riven Captain
  • Fecha de inicio Fecha de inicio
R

Riven Captain

Dseda
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Hola, sucede que tengo un blog donde los articulos tienen pasos a seguir y los explico con capturas de pantalla, siento que la calidad no es muy buena. La captura de pantalla lo hago con el programa Lightshot lo guardo en 100% calidad y en .png luego lo paso a photoshop y lo coloco una resolucion alrededor de 800 x 370 para que no sea muy pesado en el wordpress y no se si existe alguna foram de tomarlas a mejor calidad o tal.
 
para capturas de pantallas y edición rápida de imagenes uso picpick, encuentro que la calidad está bien. podrías probarlo :encouragement:
 
para capturas de pantallas y edición rápida de imagenes uso picpick, encuentro que la calidad está bien. podrías probarlo :encouragement:

Gracias por responder, si ahora mismo lo descargo y pruebo.
 
Hola amigo, creo que el detalle que te está sucediendo es en el último paso cuando estás en Photoshop, pues cuando abres el programa y un nuevo proyecto, debes asegurarte que en la parte de "Resolution" o "Resolución", para una buena calidad recomiendo que utilices 300 ppp, así la calidad no bajará, solo asegúrate de eso, pues predeterminadamente te arroja 72 ppp, que para un trabajo de impresión normal no está tan mal, pero en cosas digitales yo recomiendo siempre 300 ppp. Un saludo y espero esto haya sido de alguna ayuda.
 
Última edición:
Hola amigo, creo que el detalle que te está sucediendo es en el último paso cuando estás en Photoshop, pues cuando abres el programa y un nuevo proyecto, debes asegurarte que en la parte de "Resolution" o "Resolución", para una buena calidad recomiendo que utilices 300 ppp, así la calidad no bajará, solo asegúrate de eso, pues predeterminadamente te arroja 72 ppp, que para un trabajo de impresión normal no está tan mal, pero en cosas digitales yo recomiendo siempre 300 ppp. Un saludo y espero esto haya sido de alguna ayuda.

Gracias, nunca habia escuchado o visto esa opción. Mi duda esta si el archivo se vuelve muy pesado?. No quiero que ponga muy pesado mi sitio web. Gracias por responder.
 
Dudo que con esas medidas en pixeles que usas de 800 px X 370 px, la imagen llegue a pesar más de 250 - 300 kb, pues dices que solo son capturas de pantalla, realmente es ligero.
 
Ya has intentado desde un telefono móvil?, prueba con uno de gama media o alta, creo que con eso es suficiente, solo las recortas, se guargan en png y en hd.
Saludos!
 
Con todo respeto para Mike T. Los ppp (pixeles por pulgada) no tienen nada, nada, nada que ver en este caso. Los ppp son para cuando algo se imprime, no para cuando están en pantalla. Cuando mantienes todo para medios electrónicos simplemente las cosas mantienen su dimensión en pixeles, a secas.

Regresando al tema original.

Riven: Un (posible) problema con la metodología que estás usando es de que (probablemente) tus capturas de pantalla las estás haciendo a full screen con una resolución FullHD, por lo que tienes un tamaño de captura de 1920x1080.

Cuando resampleas a 800x370 estás haciendo dos cosas. Distorsionando la proporción y reduciendo el tamaño de los menús, cursor, etc a menos de la mitad.

I. La proporción FullHD y HD es 1.777 (1920/1080) La de 800x370 es 2.1621. Una recomendación inicial es de que reduzcas el tamaño exactamente a la mitad, o sea 960x540.

Pero voy más allá.

Al reducir a la mitad, como ya comenté, reduces el tamaño de todo por lo que igual y ya no se entiende.

II. Entonces la opción es reducir el tamaño de tu ventana a capturar, y hacer un crop.

Revisemos primero una manera no adecuada (Imagenes 1 y 2) y luego una mejor manera de hacer las capturas (3, 4 y 5)

---

Manera no adecuada:

1. Imagen en FullHD

NmgBU.jpg


2. Reducida a la mitad (960x540) (textos demasiado pequeños)

ssbWT.png


Manera más adecuada:

3. Captura con la ventana reducida de tamaño.

eszrs.png


4. Recorte de esa sección.

J4uAY.png


5. Reducida a 960x540.

9J23P.png


Como puedes ver, la imagen 4 mantiene mejor calidad y tamaño en los textos. Puedes ver todas las imágenes en una pestaña nueva.

El mejor método para reducir imágenes en Photoshop es Bicubic Sharpen. Al final podrías aplicar un sharpen adicional.

Y es correcto el hecho de que uses PNG. Dependiendo del tutorial podría ser más adecuado JPG siempre y cuando tengas una foto dominante dentro de la captura. Si sólo son textos o pantallazos de una aplicación PNG es mejor. Claro que si estás limitado realmente en tu ancho de banda pues comprime con JPG. Lo puedes forzar hasta que tú mismo veas los artefactos de compresión.

La Imagen 4 mide como PNG 482k, con bastante compresión JPG mide como 88k. Define tú, que tanto quieres hacer mermelada tu imágen.

nmbxb.jpg
 
Última edición:
El problema está en el escalado.

Photoshop no es el mejor programa para realizar escalados de capturas de pantalla.

Te recomiendo que si vas a usar escalados pruebes algoritmos más avanzados que los de Adobe Photoshop.

Personalmente me gustan mucho las opciones de escalado de ZONER PHOTO STUDIO.

Pero también puedes usar las de Irfanview, que incluye escalados de diferentes tipo, incluso escalado

LANCZOS

que generalmente sólo se incluye en programas de pago.

Este escalado permite realizar aumento/reducción de tamaños con enfoque.

ml13a2.png
 
Los PPP si afectan amigo... sea impreso o pantalla (aqui es dificil por los displays usados para emitir la imagen), obtendrás distintas calidades visuales aunque su uso si es técnicamente para impresión. Aunque en pantalla es mas difícil percibirlo, si estas trabajando con algo muy pequeño (tamaño BxA), ponle 10 ppp y veras que las curvas se distorsionan un poco comparado con una de 300 o 600 ppp (yo lo suelo notar cuando trabajo con textos muy chicos a 72, solo lo subo a 300 y listo). Ya tu decides la cantidad que necesitas, los dos factores que siempre influyen son: para que medio lo usaras (impreso o digital) y a que distancia los apreciaras.
Por ende, entre más PPP mas peso del archivo pero también tu imagen final puede variar dependiendo el formato de compresión que uses.

Es posible ver la diferencia o comparar una imagen de 72ppp / 300ppp / 600ppp / impresa o digital, en cualquier medio es visible.

Después entra otro factor, que formato vas a usar para la compresión; el cual es un tema muy extenso...
Te va ayudar mucho buscar formatos de compresión en google, creeme que es bastante amplio ese tema y hay una gran variedad.
Hay formatos que respetan mas el texto, otros la imagen, etc...

Saludos!
 
No. Diferentes PPP no afectan en nada en la salida para pantalla.

¿Cual de estas está en 72 y cual en 300?

Xppi.jpg


Yppi.jpg


La única manera de saberlo es abrirlas y leer el metadato (o mandar a imprimir). Lo demás es exactamente igual.

---

Para que no haya que yo si veo diferencia y que yo no, acá está una imagen sobre la otra usando el modo Diferencia, lo cual denotaría pixeles de color marcando donde exista diferencia entre los de arriba y los de abajo. No hay ninguno.

Diference.png
 
Última edición:
300.webp
Este era mi ejemplo, un documento nuevo con 72 y otro nuevo con 300.
Ambos mismo tamaño de lienzo.
Ambos coloque el mismo logo u objeto inteligente.

No hice algo mas, solo abrir cada documento con los mismos tamaños pero diferentes densidades y después colocar ese logo y desanclar una ventana para ponerlas lado a lado para ver la diferencia.

Se puede ver que la de 72 se ve un poco pixelada, y de ahi ya no mejorará sino se aumenta la densidad.

Por que hace esto photoshop? No lo se, pero a eso me referia que lo he notado y siempre que trabajo con cosas así, me suele pasar.
 
Ver el archivo adjunto 104300
Este era mi ejemplo, un documento nuevo con 72 y otro nuevo con 300.
Ambos mismo tamaño de lienzo.
Ambos coloque el mismo logo u objeto inteligente.

No hice algo mas, solo abrir cada documento con los mismos tamaños pero diferentes densidades y después colocar ese logo y desanclar una ventana para ponerlas lado a lado para ver la diferencia.

Se puede ver que la de 72 se ve un poco pixelada, y de ahi ya no mejorará sino se aumenta la densidad.

Por que hace esto photoshop? No lo se, pero a eso me referia que lo he notado y siempre que trabajo con cosas así, me suele pasar.

Tienes una vista al 300% y la otra al 50%.

Para poder compararlas en pantalla debes poner 100%.

Para poder compararlas en impresión debes activar "vista > tamaño de impresión" en Photoshop (Photoshop no muestra el tamaño real, es un bug que siempre ha tenido ya que es imposible saberlo pues depende de los dpi que maneje el monitor).
 
Atrás
Arriba