Capturas de pantalla claras para tutoriales y documentación

Una buena captura muestra dónde pulsar, qué elegir o qué resultado esperar. Un escritorio entero, aunque nítido, ayuda poco si no se encuentra el control.

El objetivo es explicar sin distracciones, datos privados ni archivos excesivos, desde preparar la pantalla hasta revisar la publicación.

Define qué explica cada captura

Escribe primero la acción: «Selecciona Exportar y después PNG» define el tema; «Aquí están los ajustes» deja al lector buscando.

Elige el momento adecuado: menú abierto para opciones, confirmación para el resultado. Separa estado inicial, menú y resultado cuando sea necesario.

Mantén referencias para orientarse. Un interruptor sin título de panel es difícil de localizar. Conserva el encabezado o navegación pertinente y elimina lo demás.

Planifica una secuencia corta donde cada imagen aporte información. Un clic claro en el texto no siempre necesita captura.

Captura un original limpio

Prepara una cuenta de prueba, cierra pestañas y notificaciones. Ajusta la ventana a la interfaz descrita: una estrecha puede cambiar los menús.

• Windows: Windows + Mayús + S permite seleccionar una zona. Recortes también captura ventanas y pantalla completa; consulta las instrucciones de Microsoft.
• Mac: Mayús + Comando + 4 selecciona un área; Mayús + Comando + 5 abre los controles. Consulta la guía de Apple.

Guarda el archivo original. Capturar una imagen mostrada en un chat o descargar su miniatura puede hacer que se pierdan más detalles. Fotografiar el monitor añade reflejos, distorsiones y elementos del entorno.

Si el texto ya es pequeño, ajusta el zoom y captura otra vez. Comprueba que no cambien los controles ni la disposición necesaria. Ampliar después no recupera caracteres mal capturados.

Elimina información privada antes de compartir

Revisa dirección, títulos de pestañas, cuenta, laterales y notificaciones. Los datos ficticios del panel no protegen un correo real en el menú.

Recorta los datos privados que queden fuera del área útil. Cubre los que permanezcan dentro con un rectángulo totalmente opaco. El desenfoque y el pixelado pueden dejar pistas sobre el contenido y no son adecuados para proteger texto confidencial.

1. Abre Pixelar imagen. En Efecto, elige cobertura sólida, llamada Solid cover en inglés.
2. Coloca la cobertura. Ajusta el rectángulo dejando margen alrededor de las letras para ocultarlas enteras.
3. Añade un área por cada zona adicional. En inglés es Add area. Comprueba repeticiones, códigos y QR. Mover una cobertura no protege ambas posiciones.
4. Descarga el PNG y ábrelo. Revisa el archivo, no solo la vista previa.

La cobertura forma parte de los píxeles PNG. Comparte esa copia, no un documento editable con un rectángulo que pueda quitarse. Guarda el original fuera de carpetas públicas.

Solo se protegen las áreas tapadas, no otras partes del documento, portapapeles, cuenta o fuentes. Consulta la guía de pixelado y cobertura.

Recorta antes de añadir énfasis

Con Recortar imagen, elimina navegación, márgenes y escritorio sobrantes. Mantén nombre del control y contexto suficiente.

Decide el encuadre antes de anotar para no señalar algo eliminado después. Un título de panel orienta mejor que una flecha sin contexto.

Añade un marco o número en un editor adecuado si hace falta, sin tapar el nombre. Explícalo en texto. El recorte de Pixilo no dibuja flechas.

Usa estilo y numeración coherentes. «Pulsa el botón 2» es más claro que una indicación basada solo en el color verde.

Elige dimensiones según la lectura real

Evalúa la captura en el artículo final. Un texto legible a pantalla completa puede resultar diminuto en una columna.

Distingue tamaño aparente y píxeles para la nitidez. Más píxeles no hacen las letras mayores por sí solos.

Una vista de 800 × 500 píxeles CSS capturada a 2× puede producir una imagen de 1600 × 1000 píxeles. Mostrarla a 800 × 500 píxeles CSS conserva el tamaño aparente de la interfaz: el texto no se reduce automáticamente a la mitad. Mostrar toda la vista con una anchura de 400 píxeles CSS sí hace más pequeñas sus etiquetas.

El método, la escala y el zoom influyen. MDN explica la densidad. Comprueba el archivo en vez de asumir que todas las capturas son 2×.

Prueba un encuadre más ajustado antes de reducir píxeles. En móvil, 800 pueden mostrarse en 360 CSS. Divide la vista u ofrece una versión ampliable si es necesario.

Usa Cambiar tamaño con las proporciones bloqueadas si el archivo original es innecesariamente grande. Compara el resultado al tamaño de visualización final. Conserva más píxeles o simplifica el encuadre si desaparece información importante.

Elige formato sin perder claridad

Empieza con PNG para las capturas con texto y elementos de interfaz: su compresión sin pérdida evita los artefactos propios del JPG. Prueba a optimizar el PNG antes de cambiar las dimensiones. Si predomina el contenido fotográfico, compara también JPG o WebP.

Exporta desde la misma fuente con medidas y visualización iguales. Revisa letras pequeñas, líneas finas y marcas: manchas, puntuación ausente o halos. Conserva la versión clara si la ligera pierde información.

Consulta JPG frente a PNG y la referencia de MDN. Reinicia las pruebas desde la fuente preparada, no desde el resultado comprimido.

Publica instrucciones comprensibles sin la imagen

Escribe las acciones junto a la captura para lectores de pantalla, zoom, impresión o fallos de carga. «Abre Ajustes, Facturación y Descargar factura» funciona sin verla.

El texto alternativo explica el aporte: «Facturación con Descargar factura resaltado junto al último pago». No transcribas elementos irrelevantes. Consulta la orientación del W3C.

Un pie puede indicar la versión mostrada. Mantén imagen, pie e instrucción juntos, no todas las capturas lejos de sus pasos.

Conserva proporciones y evita desbordar la columna. La guía de imágenes adaptables explica cómo. Revisa que el editor no publique una miniatura pequeña.

Ejemplo: explicar cómo descargar una factura

Instrucción: «Ajustes → Facturación, después Descargar factura junto al pago». Las medidas son ilustrativas, no mediciones de una aplicación.

1. Prepara la vista. Muestra pagos ficticios y el botón pertinente; cierra otros menús.
2. Captura y recorta. De 1600 × 1000, un recorte 1200 × 700 puede conservar título, pago y botón sin el lateral. Guarda el original privado.
3. Tapa los datos restantes. Cubre el correo real y añade áreas para repeticiones. Descarga y revisa PNG.
4. Resalta si hace falta. Enmarca el botón sin tapar su texto en un editor de anotaciones. Guarda PNG con estilo uniforme.
5. Comprueba el artículo. Un recorte de 1200 píxeles de ancho mostrado en 600 píxeles CSS ofrece dos píxeles de imagen por cada píxel CSS. En móvil, comprueba la fila del pago y el texto del botón. Si no se leen, muestra una vista más cercana de esa fila en lugar de reducir aún más toda la captura.
6. Publica con instrucciones. La página y el enlace a tamaño completo deben usar el PNG protegido.

Importa encontrar el pago y el botón, no quitar la mayor cantidad posible de escritorio.

Encuentra el origen del problema

Sigue la publicación como principiante: nombres y pasos deben coincidir, con cada imagen junto a su acción.

Preguntas frecuentes

¿Cada paso necesita captura?

No. La imagen debe aclarar dónde actuar, qué elegir o qué resultado esperar. Un texto claro suele bastar para una acción conocida. Las capturas innecesarias obligan a desplazarse más por la página y requieren actualizaciones cuando cambia el programa.

¿Sirve una captura de página completa?

Para mostrar estructura sí, pero no suele servir para controles pequeños. Añade vistas centradas en los detalles.

¿Conviene mostrar el puntero?

Solo si ayuda. Puede tapar etiquetas; un marco y texto suelen ser más claros.

¿Cómo mantener las capturas actualizadas?

Muestra el contexto necesario y anota versión o fecha si procede. Al cambiar los menús, actualiza imagen e instrucciones juntas.