# Grabación de pantalla para tutoriales y demos: un método limpio [Canonical HTML page](https://gradiently.design/es/guide/screen-recording-tips) La mayoría de los tutoriales cuestan de ver por razones que no tienen nada que ver con el software: desorden, texto diminuto, divagaciones y mal sonido. Este método soluciona los cuatro. ## The short version - Una buena grabación de pantalla depende más de la preparación que de la herramienta: despeja la pantalla, agranda el texto y planifica lo que vas a decir. - Compartir una sola pestaña del navegador o una ventana da una grabación de pantalla más limpia y más privada que compartir toda la pantalla. - Que una grabación de pantalla incluya el sonido del propio ordenador depende del navegador y de lo que eliges compartir. - Grabar en tomas cortas de un paso cada una abarata los errores y facilita recortar el vídeo final. - Los subtítulos y una cortinilla de título breve con tu marca hacen que un tutorial sea más fácil de seguir y reconociblemente tuyo. Una **grabación de pantalla** limpia para un tutorial o una demo sale de cuatro hábitos: ordena la pantalla y agranda el texto antes de empezar, comparte solo la pestaña o la ventana que necesitas, sigue un esquema escrito breve y graba tu voz con un micrófono cerca de la boca. Después graba en tomas cortas, recorta las pausas, añade subtítulos y abre con una cortinilla de título sencilla. La herramienta con la que grabes importa mucho menos que estos pasos. ## Prepara la pantalla antes de grabar Quien mira se fija en tu pantalla mucho más que tú. Un escritorio desordenado, una notificación inesperada o una barra de marcadores llena de enlaces personales le apartan la vista de lo que estás enseñando, y pueden mostrar cosas que nunca quisiste compartir. 1. **Activa No molestar** Silencia las notificaciones del ordenador y del móvil que tienes al lado. La vista previa de un mensaje que aparece de golpe distrae y puede ser privada. 2. **Cierra todo lo que no vayas a enseñar** Sal de las demás apps y cierra las pestañas que sobran. Oculta la barra de marcadores y las extensiones de la barra de herramientas. 3. **Agranda el texto** Amplía el navegador o la app al 125 % o al 150 %. Los tutoriales se ven a menudo en el móvil, donde el texto normal de una interfaz resulta ilegible. 4. **Usa datos de demostración** Entra con una cuenta de demo o llena la app de nombres y cifras de ejemplo, para que no aparezcan datos de clientes ni archivos privados. 5. **Ajusta la ventana a 16:9** Si compartes una ventana, dale más o menos la forma del vídeo final para que no queden franjas negras alrededor. ## Qué compartir: una pestaña, una ventana o toda la pantalla Cuando grabas la pantalla en un navegador, el navegador muestra su propio diálogo para compartir y te pide elegir una pestaña, una ventana o una pantalla entera. Cada opción tiene sus pros y sus contras. | Compartir | Ideal para | Ojo con | | --- | --- | --- | | Una pestaña del navegador | Apps web y páginas web; la opción más privada | Si cambias de pestaña a mitad de grabación, no te sigue | | Una ventana | Una app de escritorio, como una hoja de cálculo o un editor | Los menús y diálogos de otras apps no aparecen | | La pantalla entera | Moverte entre varias apps | Lo muestra todo: notificaciones, dock, otras ventanas | Comparte lo mínimo que cubra toda la demo. Para software que funciona en el navegador, una pestaña suele bastar. > **Permisos, sin rodeos** En un Mac, el propio navegador necesita permiso para grabar la pantalla: la primera vez, macOS te lleva a Ajustes del Sistema, Privacidad y seguridad, Grabación de pantalla y audio del sistema, y puede que haya que reiniciar el navegador. Además, grabar solo funciona en una página segura (https). ## Cómo grabar la pantalla con sonido En una grabación de pantalla hay dos tipos de sonido: tu voz a través del micrófono y el sonido del propio ordenador, como un vídeo que se reproduce en la demo. Tu voz es fácil. El sonido del ordenador no está garantizado: que un navegador pueda compartirlo depende del navegador, del sistema operativo y de si compartiste una pestaña, una ventana o la pantalla. Compartir una pestaña en un navegador Chromium como Chrome o Edge, con la opción de compartir audio marcada, es la vía más fiable. Si el sonido importa, haz una prueba de diez segundos y escúchala antes de la toma buena. - Usa cualquier micrófono externo, aunque sea unos auriculares con cable, en lugar del integrado del portátil, que capta el ruido del teclado y el zumbido del ventilador. - Mantén el micrófono a un palmo de la boca y ligeramente a un lado. - Graba en una habitación pequeña con cosas blandas: cortinas, un sofá, una alfombra. Las paredes desnudas hacen eco. - Ponte auriculares si la demo tiene sonido, para que los altavoces no se cuelen de nuevo en el micrófono. ## Escribe los pasos, no las frases Leer un guion completo palabra por palabra suena rígido, e improvisar lleva a divagar. El término medio es un esquema: una línea por paso, con el clic exacto y lo único que debe entender quien mira. Tenlo en papel o en una segunda pantalla, fuera de la zona compartida. ```text TÍTULO Cómo exportar un PDF de impresión (menos de 2 min) 0. Gancho Muestra el PDF terminado con marcas de corte. 1. Abrir Menú Archivo > Exportar. Di por qué: las imprentas necesitan sangrado. 2. Elegir Formato: PDF. Calidad: Impresión. 3. Comprobar Señala el sangrado y las marcas de corte en la vista previa. 4. Exportar Haz clic en Exportar y abre el archivo para demostrar que funcionó. 5. Cerrar Resumen de una línea. Dónde encontrar el siguiente vídeo. ``` Un esquema de una página. Cada línea numerada se convierte en una toma corta. Graba un paso por toma. Si te equivocas, para, espera un segundo y empieza ese paso de nuevo. Las tomas cortas abaratan los errores y te dan puntos de corte naturales. Mueve el ratón despacio y con intención, y haz una breve pausa después de cada clic para que se vea qué ha cambiado. ## Edita, subtitula y enmarca la grabación Editar un tutorial consiste sobre todo en quitar cosas: el silencio antes de hablar, el icono de carga, el arranque fallido. Recorta cada toma al máximo, colócalas en orden y escúchalo todo una vez. [Edición de vídeo para principiantes](https://gradiently.design/es/guide/timeline-video-editing) explica clips, recortes y audio con palabras sencillas. Después añade subtítulos. Mucha gente ve los vídeos sin sonido, y los subtítulos ayudan a quien lo sigue en un segundo idioma. Mantenlos cortos, de dos líneas como máximo, colocados donde no tapen la parte de la interfaz que señalas. [Subtítulos de vídeo](https://gradiently.design/es/guide/video-captions-design) trata el tamaño y la colocación. Una cortinilla de tutorial 16:9 con el texto Exporta un PDF de impresión en 4 clics, Tutorial 07, sobre un fondo degradado de marca Una cortinilla de título que se mantiene dos o tres segundos dice exactamente qué se va a aprender y hace que una serie parezca una serie. Para redes sociales, coloca la grabación sobre un fondo de marca en lugar de estirarla para llenar un formato vertical. Una grabación 16:9 queda bien en el centro de una publicación de 1080×1350 o de una story de 1080×1920, con un titular encima y sitio para subtítulos debajo. Todos los formatos están en [tamaños de vídeo para redes sociales](https://gradiently.design/es/guide/social-video-sizes). - Grabación 1920×1080: 1920 × 1080 - Publicación 1080×1350: 1080 × 1350 - Story 1080×1920: 1080 × 1920 Una grabación panorámica y los dos formatos verticales en los que más a menudo tiene que vivir. Colócala sobre un fondo en lugar de recortarla. ### Cuesta de ver - Toda la pantalla compartida, texto diminuto - Micrófono del portátil, habitación con eco - Una toma larga con cada titubeo - El ratón corriendo por toda la pantalla - Sin subtítulos ### Fácil de seguir - Una pestaña, ampliada al 125 % o más - Micrófono externo, habitación con cosas blandas - Una toma por paso, sin pausas - Puntero lento y deliberado, una pausa tras cada clic - Subtítulos cortos que no tapan la acción ## Grabar la pantalla en Gradiently Con Pro, Gradiently puede grabar una pantalla, una pestaña o una ventana directamente en un diseño, con o sin tu micrófono, además de tu cámara o solo tu voz. El propio diálogo del navegador pregunta qué compartir, y el audio de pantalla depende del navegador y de lo que elijas. Revisas el clip antes de añadirlo y se queda en tu navegador hasta que lo haces. En la línea de tiempo puedes recortarlo, añadir subtítulos y música y colocarlo sobre un fondo propio de tu canal, y después exportar cada tamaño que necesites. [Vídeos demo de producto](https://gradiently.design/es/guide/product-demo-video) y [vídeos a cámara](https://gradiently.design/es/guide/talking-head-video) usan el mismo método. ## FAQ ### ¿Cómo grabo la pantalla con sonido? Activa el micrófono para tu voz. Para el sonido del propio ordenador, comparte una sola pestaña en un navegador Chromium y marca la opción de compartir audio; la compatibilidad en otros navegadores y al compartir la pantalla entera varía. ### ¿Por qué mi navegador no puede grabar la pantalla en un Mac? macOS te pide que permitas el navegador en Ajustes del Sistema, Privacidad y seguridad, Grabación de pantalla y audio del sistema. Después de permitirlo, cierra el navegador y vuelve a abrirlo. ### ¿Comparto una pestaña, una ventana o toda la pantalla? Comparte lo mínimo que cubra la demo. Una pestaña es lo más privado y sirve para apps web; una ventana va bien para una app de escritorio; la pantalla entera solo hace falta cuando te mueves entre apps. ### ¿Cuánto debe durar la grabación de pantalla de un tutorial? Lo menos que permita la tarea. Divide cualquier cosa de más de unos cinco pasos en vídeos separados para que cada uno responda a una sola pregunta. ### ¿A qué resolución debo grabar la pantalla? Apunta a un resultado de 1920×1080 y amplía la interfaz al 125 % o más, para que el texto siga siendo legible cuando el vídeo se vea en un móvil.