As melhores formas de gravar um site para apresentá-lo

Seis formas de capturar um site para um portfólio, um lançamento ou um cliente, de gravadores de tela a renderizadores de URL e demos interativas, e qual usar em cada caso.

Aviral LakhanpaulAtualizado em 30 de outubro de 20264 min de leitura

A resposta curta

Para uma página pública que você só precisa percorrer, um renderizador de URL para vídeo dá o resultado mais fluido com o menor esforço. Para uma demo com cliques, digitação e narração, use um gravador de tela, de preferência um que suavize o cursor e dê zoom por você. Para uma página atrás de um login, grave você mesmo ou use uma extensão. Ferramentas de mockup e demos interativas resolvem outros problemas e funcionam ao lado dessas opções, não no lugar delas.

Comece pelo que o vídeo precisa mostrar

«Gravar um site» abrange três trabalhos bem diferentes, e a ferramenta certa depende de qual deles é o seu.

A página em si. O layout, a tipografia, as imagens, de cima a baixo. Portfólios, posts de lançamento, páginas de templates, aprovação de cliente.
Algo acontecendo nela. Um fluxo de cadastro, um filtro sendo usado, um menu abrindo. Demos de produto e tutoriais.
A página como objeto. O site num notebook ou num celular, girando no espaço. Imagens de destaque e vídeos promocionais no estilo de loja de apps.

Seis métodos, comparados

Formas de gravar um site, comparadas
Método	Melhor para	Rolagem uniforme	Atrás de login	Esforço
Renderizador de URL para vídeo	Mostrar a página em si	Sim, calculada	Não	Colar um link
Gravador de tela caprichado	Demos com cliques e narração	Só se você rolar por igual	Sim	Gravar e editar
Gravador de tela simples	Qualquer coisa, de graça	Só se você rolar por igual	Sim	Gravar, recortar, editar
Extensão de navegador	Páginas em que você está logado	Depende da extensão	Sim	Instalar e gravar
App de mockup	O site num dispositivo, em 3D	Não é o foco	Sim, a partir de uma captura de tela	Trabalho de design
Ferramenta de demo interativa	Tours de produto clicáveis	Vídeo não é o foco	Sim	Capturar um fluxo, editar os passos

1. Um renderizador de URL para vídeo

Você cola um endereço e a ferramenta abre a página no próprio navegador, rola numa curva e codifica o resultado. Nada depende da sua tela, do seu mouse ou da sua máquina, então o movimento é uniforme e o vídeo pode ter qualquer tamanho. O Website Scroll Video é um deles: remove primeiro avisos de cookies e widgets de chat, lê a página na largura de desktop, tablet ou celular e exporta MP4, WebM ou GIF em até 4K a 60 fps, com pausas, hovers e fundos por cima.

O limite é o alcance. O renderizador só consegue abrir o que um visitante anônimo abre, então painéis, sites de staging protegidos por senha e localhost ficam de fora. A página de alternativas compara os renderizadores que existem.

2. Um gravador de tela caprichado

Ferramentas como o Screen Studio gravam a sua tela e depois fazem a edição que uma pessoa faria: suavizam o caminho do cursor, dão zoom nos cliques, adicionam um fundo. São a melhor escolha para mostrar um produto sendo usado. A rolagem, porém, continua sendo sua, então uma página longa rolada à mão ainda carrega o ritmo da rodinha.

3. Um gravador de tela simples

O OBS Studio, o QuickTime, a barra de captura de tela do macOS e a Ferramenta de Captura do Windows são gratuitos e gravam qualquer coisa que você consiga abrir. Eles não fazem nada além da captura: avisos de cookies, notificações e uma rodinha irregular vão todos parar no arquivo. Com alguma preparação, dão bons resultados; como gravar um vídeo de rolagem de um site mostra o passo a passo.

4. Uma extensão de navegador

Uma extensão de gravação de rolagem roda dentro do seu próprio navegador, então consegue capturar páginas em que você está logado, e a maioria automatiza a rolagem. A qualidade depende da sua máquina, já que a gravação acontece nela, e da extensão: algumas são gratuitas com limites, outras são pagas. Extensões comparadas com um renderizador mostra quando cada uma faz sentido.

5. Um app de mockup

Ferramentas de mockup como o Rotato colocam uma captura de tela ou um vídeo num notebook ou celular em 3D e animam o dispositivo. Servem para a imagem de destaque, não para o passeio pela página, e precisam de material gravado como ponto de partida. Uma combinação comum é um vídeo de rolagem feito com um dos métodos acima, colocado num dispositivo dentro de um app de mockup.

6. Uma ferramenta de demo interativa

Ferramentas como o HowdyGo capturam um fluxo do produto como passos clicáveis que o próprio espectador percorre. São feitas para equipes de vendas e de onboarding, e o preço acompanha isso. Algumas exportam um vídeo ou GIF da demo, mas um tour em que você clica é uma coisa diferente de uma rolagem que você assiste.

Qual escolher

Portfólio, post de lançamento, página de template: um renderizador. Veja como gravar sites para o seu portfólio.
Tour do produto com narração: um gravador de tela caprichado.
Uma página que só você consegue abrir: um gravador simples ou uma extensão.
Uma imagem de destaque do site num dispositivo: um app de mockup, alimentado com um vídeo de rolagem.
Na dúvida: comece pelo renderizador. A prévia não custa nada, e os 51 créditos grátis do cadastro cobrem algumas exportações.

Teste no seu próprio site

Cole um link e veja a prévia da rolagem de graça. 51 créditos grátis ao criar a conta, sem cartão e sem marca d’água em nada que você exportar.

Perguntas
e respostas

A versão curta do que as pessoas perguntam em seguida.

Contato

Qual é o jeito mais fácil de gravar um site?

Se ele é público, cole o endereço numa ferramenta de URL para vídeo. Não há gravador para configurar nem rolagem para fazer à mão. Se é privado, use um gravador de tela e deixe um script rolar a página.

Dá para gravar um site sem um gravador de tela?

Dá. Um renderizador de URL para vídeo abre a página nos próprios servidores e monta o vídeo a partir dela, então nada da sua tela é capturado. Só funciona com páginas que um visitante consegue abrir sem fazer login.

Em que formato deve ficar um vídeo de apresentação de um site?

MP4 (H.264) toca em qualquer lugar. WebM é menor e aceita transparência, o que é útil no seu próprio site. GIF é para lugares que não tocam vídeo, como e-mail, e fica maior e com qualidade mais baixa para a mesma duração.

Menos tempo gravando. Mais tempo criando.

Automatize gravações de sites com movimento personalizável, controles inteligentes e opções de exportação pensadas para criadores de hoje.

Experimente agora