# Gravação de ecrã para tutoriais e demos: um fluxo limpo [Canonical HTML page](https://gradiently.design/pt-pt/guide/screen-recording-tips) A maioria dos tutoriais é difícil de ver por razões que nada têm a ver com o software: confusão, texto minúsculo, divagações e mau som. Eis um fluxo que resolve as quatro. ## The short version - Uma boa gravação de ecrã depende mais da preparação do que da ferramenta: limpa o ecrã, aumenta o texto e planeia o que vais dizer. - Partilhar um só separador ou janela do browser dá uma gravação de ecrã mais limpa e mais privada do que partilhar o ecrã todo. - Se uma gravação de ecrã inclui o som do próprio computador depende do browser e do que escolhes partilhar. - Gravar em takes curtos de um passo cada torna os erros baratos de corrigir e o vídeo final fácil de cortar. - Legendas e um cartão de título curto com a tua marca tornam o tutorial mais fácil de seguir e reconhecivelmente teu. Uma **gravação de ecrã** limpa para um tutorial ou demo nasce de quatro hábitos: arrumar o ecrã e aumentar o texto antes de começar, partilhar só o separador ou a janela de que precisas, seguir um guião escrito curto e gravar a voz com um microfone perto da boca. Depois grava em takes curtos, corta as pausas, junta legendas e abre com um cartão de título simples. A ferramenta com que gravas importa muito menos do que estes passos. ## Prepara o ecrã antes de gravar Quem vê olha para o teu ecrã com muito mais atenção do que tu. Um ambiente de trabalho desarrumado, uma notificação perdida ou uma barra de favoritos cheia de links pessoais desviam o olhar daquilo que estás a ensinar, e podem mostrar coisas que nunca quiseste partilhar. 1. **Ativa o modo Não incomodar** Silencia as notificações no computador e no telemóvel ao lado. A pré-visualização de uma mensagem a deslizar distrai e pode ser privada. 2. **Fecha tudo o que não vais mostrar** Sai das outras apps e fecha os separadores a mais. Esconde a barra de favoritos e as extensões que ficam na barra de ferramentas. 3. **Aumenta o texto** Faz zoom no browser ou na app para 125% ou 150%. Os tutoriais vêem-se muitas vezes no telemóvel, onde o texto normal da interface fica ilegível. 4. **Usa dados de demonstração** Entra numa conta de demonstração ou enche a app com nomes e números de exemplo, para que não apareçam dados de clientes nem ficheiros privados. 5. **Ajusta a janela a 16:9** Se partilhas uma janela, dá-lhe mais ou menos a forma do vídeo final para não haver barras pretas à volta. ## Escolhe o que partilhar: um separador, uma janela ou o ecrã todo Quando gravas um ecrã no browser, este mostra a sua própria caixa de partilha e pede-te que escolhas um separador, uma janela ou um ecrã inteiro. Cada opção tem os seus compromissos. | Partilha | Boa para | Atenção a | | --- | --- | --- | | Um separador do browser | Apps web e sites; a escolha mais privada | Mudar de separador a meio da gravação não é acompanhado | | Uma janela | Uma só app de computador, como uma folha de cálculo ou um editor | Menus e caixas de diálogo de outras apps não aparecem | | O ecrã inteiro | Passar entre várias apps | Mostra tudo: notificações, dock, outras janelas | Partilha a coisa mais pequena que cubra toda a demo. Um separador costuma bastar para software que corre no browser. > **Permissões, com franqueza** Num Mac, o próprio browser precisa de permissão para gravar o ecrã: da primeira vez, o macOS leva-te a Definições do Sistema, Privacidade e Segurança, Gravação de Ecrã e Áudio do Sistema, e o browser pode ter de ser reiniciado. A gravação também só funciona numa página segura (https). ## Como gravar o ecrã com áudio Há dois tipos de som numa gravação de ecrã: a tua voz pelo microfone e o som do próprio computador, como um vídeo a passar na demo. A tua voz é fácil. O som do computador não é garantido: se um browser o consegue partilhar depende do browser, do sistema operativo e de teres partilhado um separador, uma janela ou o ecrã. Partilhar um separador num browser Chromium, como o Chrome ou o Edge, com a opção de partilhar áudio assinalada, é o caminho mais fiável. Se o som importa, faz um teste de dez segundos e ouve antes do take a sério. - Usa um microfone externo qualquer, mesmo uns auriculares com fio, em vez do integrado no portátil, que apanha o ruído do teclado e o zumbido da ventoinha. - Mantém o microfone à distância de uma mão da boca e ligeiramente de lado. - Grava numa sala pequena com coisas macias: cortinas, um sofá, um tapete. Paredes nuas fazem eco. - Usa auscultadores se a demo tiver som, para que as colunas não voltem a entrar no microfone. ## Escreve os passos, não as frases Ler um guião completo palavra a palavra soa rígido, e improvisar leva a divagar. O meio-termo é um esquema: uma linha por passo, com o clique exato e a única coisa que quem vê deve perceber. Guarda-o em papel ou num segundo ecrã, fora da área partilhada. ```text TÍTULO Como exportar um PDF para impressão (menos de 2 min) 0. Chamada Mostrar o PDF pronto com marcas de corte. 1. Abrir Menu Ficheiro > Exportar. Dizer por quê: gráficas precisam de sangria. 2. Escolher Formato: PDF. Qualidade: Impressão. 3. Verificar Apontar a sangria e as marcas de corte na pré-visualização. 4. Exportar Clicar em Exportar e abrir o ficheiro para comprovar que funcionou. 5. Encerrar Uma frase de resumo. Onde encontrar o próximo vídeo. ``` Um esquema de uma página. Cada linha numerada passa a ser um take curto. Grava um passo por take. Se te enganares, pára, faz uma pausa de um segundo e recomeça esse passo. Takes curtos tornam os erros baratos e dão-te pontos naturais de corte. Move o rato devagar e de forma deliberada, e faz uma pausa depois de cada clique para que quem vê perceba o que mudou. ## Edita, legenda e enquadra a gravação Editar um tutorial é sobretudo remover coisas: o silêncio antes de falares, o ícone de carregamento, o arranque falhado. Corta cada take rente, coloca-os por ordem e ouve tudo uma vez. [Edição de vídeo para principiantes](https://gradiently.design/pt-pt/guide/timeline-video-editing) explica clipes, cortes e áudio em termos simples. Depois junta legendas. Muita gente vê com o som desligado, e as legendas ajudam quem acompanha numa segunda língua. Mantém-nas curtas, duas linhas no máximo, colocadas onde não tapem a parte da interface que estás a apontar. [Legendas de vídeo](https://gradiently.design/pt-pt/guide/video-captions-design) trata do tamanho e da posição. Um cartão de título de tutorial 16:9 com o texto Exporta um PDF em 4 cliques, Tutorial 07, sobre um fundo de gradiente da marca Um cartão de título mantido dois ou três segundos diz a quem vê exatamente o que vai aprender, e faz uma série parecer uma série. Para publicações sociais, coloca a gravação sobre um fundo da tua marca em vez de a esticares para preencher um enquadramento vertical. Uma gravação 16:9 fica bem no meio de uma publicação de 1080×1350 ou de um story de 1080×1920, com um título por cima e espaço para legendas por baixo. Todos os enquadramentos estão em [tamanhos de vídeo para redes sociais](https://gradiently.design/pt-pt/guide/social-video-sizes). - Gravação 1920×1080: 1920 × 1080 - Publicação no feed 1080×1350: 1080 × 1350 - Story 1080×1920: 1080 × 1920 Uma gravação panorâmica e os dois enquadramentos verticais onde mais vezes tem de viver. Põe-na sobre um fundo em vez de a cortares. ### Difícil de ver - Ecrã todo partilhado, texto minúsculo - Microfone do portátil, sala com eco - Um só take longo com todas as hesitações - Rato a correr pelo ecrã - Sem legendas ### Fácil de seguir - Um separador, com zoom a 125% ou mais - Microfone externo, sala macia - Um take por passo, pausas cortadas - Ponteiro lento e deliberado, uma pausa depois de cada clique - Legendas curtas fora da ação ## Gravar o ecrã no Gradiently Com o Pro, o Gradiently pode gravar um ecrã, separador ou janela diretamente para um design, com ou sem o teu microfone, bem como a tua câmara ou só a tua voz. A caixa de diálogo do próprio browser pergunta o que partilhar, e o áudio do ecrã depende do browser e da superfície que escolhes. Revês o clipe antes de o juntares, e ele fica no teu browser até o fazeres. Na linha temporal podes cortá-lo, juntar legendas e música e colocá-lo num fundo que é o do teu canal, e depois exportar cada tamanho de que precisas. [Vídeos de demonstração de produto](https://gradiently.design/pt-pt/guide/product-demo-video) e [vídeos de pessoa a falar](https://gradiently.design/pt-pt/guide/talking-head-video) usam o mesmo fluxo. ## FAQ ### Como gravo o ecrã com som? Liga o microfone para a tua voz. Para o som do próprio computador, partilha um só separador num browser Chromium e assinala a opção de partilhar áudio; o suporte noutros browsers e na partilha do ecrã todo varia. ### Porque é que o meu browser não grava o ecrã num Mac? O macOS exige que autorizes o browser em Definições do Sistema, Privacidade e Segurança, Gravação de Ecrã e Áudio do Sistema. Depois de autorizar, fecha e volta a abrir o browser. ### Devo partilhar um separador, uma janela ou o ecrã todo? Partilha a coisa mais pequena que cubra a demo. Um separador é o mais privado e serve para apps web; uma janela serve para uma só app de computador; o ecrã todo só é preciso quando passas entre apps. ### Quanto deve durar a gravação de ecrã de um tutorial? O mais curta que a tarefa permitir. Divide em vídeos separados tudo o que tenha mais de cinco passos, para que cada um responda a uma só pergunta. ### Com que resolução devo gravar o ecrã? Aponta a um resultado de 1920×1080 e faz zoom na interface para 125% ou mais, para que o texto continue legível quando o vídeo é visto no telemóvel.