How to Take Ultra High Resolution Screenshots in Chrome (4K, 8K, .., …)

Uma imagem do meu sítio web na resolução 8K (aberta num visualizador de imagens)

Como editor, criador de vídeo ou criador de web pode precisar de imagens de um website, que tenham uma resolução mais alta do que o seu monitor físico. Por exemplo, se tiver um monitor 1920 x 1080 (full HD), mas quiser que as suas capturas de ecrã sejam em 4K (3840 x 2160) ou mesmo 8K (7680 x 4320).

Com métodos tradicionais de tirar uma captura de ecrã como Snipping Tool, no entanto, só pode tirar capturas de ecrã que tenham a mesma resolução que o seu monitor. Mas o próprio Google Chrome tem uma funcionalidade integrada para captar imagens de ecrãs de maior resolução. No seguinte tutorial vou mostrar-lhe como fazer uso dela:

Instruções

P>Passos 3, 4 e 5 só devem ser feitos uma vez. Pela segunda vez o processo será muito mais curto.

P>Passo 1:
Abrir o sítio web que pretende capturar num separador Cromado e carregar em F12 no seu teclado. Isto abrirá as ferramentas de desenvolvimento. Todo o código e coisas que apareçam podem parecer-lhe intimidantes se não estiver familiarizado com o desenvolvimento web, mas não se preocupe. Não mexeremos com isso e não poderá quebrar nada.

Ferramentas de desenvolvimento no Google Chrome

P>Passo 2:
Clique no ícone “Toggle device bar” no canto superior esquerdo do painel de desenvolvedores.

Como abrir a barra de ferramentas do dispositivo no Google Chrome

A vista que aparece agora é um modo que ajuda os programadores web a testar os seus sítios web em diferentes tamanhos de ecrã. O tamanho de ecrã predefinido é “Responsive” mas também se pode escolher outros tipos de ecrã no menu pendente.

A pré-visualização do dispositivo das ferramentas de desenvolvimento do Google Chrome

passo 3:
No entanto, não utilizaremos nenhuma das predefinições mas criaremos o nosso próprio tipo de ecrã. Abrir o menu pendente do tipo de ecrã e seleccionar “Edit…”.

Device Drop Down Menu in Google Chrome developer tools.

P>Passo 4:
Aparecerá uma nova barra lateral que lista vários modelos de telefones que podem ser usados como tipos de ecrã. No entanto, podemos ignorá-los, e em vez disso clicar no botão “Adicionar dispositivo personalizado…”.

Adicionar um dispositivo personalizado no Google Chrome developer tools

passo 5:
Agora preencha os detalhes para o novo dispositivo de ecrã. Escolher um nome como “HighRes Screenshot” e escolher 1920 x 1080 como resolução de ecrã. Não se preocupe, esta não será a resolução das nossas capturas de ecrã, mas apenas determina o tamanho do texto e os elementos no website. As capturas de ecrã terão uma resolução muito superior.
Agora vem a parte importante: Escolher uma relação de pixel do dispositivo (DPR). O DPR determina a resolução das nossas capturas de ecrã da seguinte forma:
Largura de ecrã = 1920 * DPR
Altura de ecrã = 1080 * DPR
Então o DPR actua como um multiplicador de resolução. Quando escolhemos o DPR para ser 4.0 por exemplo, a resolução de imagem de ecrã será:
Largura: 1920 * 4 = 7680 Pixels
Altura: 1080 * 4 = 4320 Pixels
quela que é a resolução de 8K. Finalmente, mudar o tipo de dispositivo de “Móvel” para “Desktop” e clicar no botão “Adicionar” para criar o seu dispositivo de ecrã.

Como configurar um dispositivo personalizado no Google Chrome developer tools

passo 6:
Agora seleccione o seu novo dispositivo no menu pendente do tipo de ecrã. Isto irá tornar o website com as propriedades do dispositivo.

Selecção do dispositivo personalizado recentemente criado para pré-visualização no Google Chrome developer tools

Step 7:
Para tirar a captura de ecrã, clique nos três pontos do lado superior direito e seleccione “Capturar captura de ecrã”.

Capturar uma captura de ecrã de alta resolução utilizando ferramentas de desenvolvimento do Google Chrome

Dependente da sua máquina, levará vários segundos para que o Chrome faça a captura de ecrã. Quando tudo estiver feito, a captura de ecrã será guardada na sua pasta de download.

A captura de ecrã capturada a ser descarregada.

É isso!

Acabou de criar uma imagem de ecrã de 8K de um website. Verifique as propriedades da imagem, se não acredita em mim. Ou descarregue a imagem aqui.

Image properties of the high resolution screenshot, that I just took

O dispositivo de imagem que criou, será guardado no seu browser e não precisa de o recriar sempre. Da próxima vez que quiser fazer uma captura de ecrã de alta resolução, basta carregar em F12, clicar no ícone “Toggle device bar”, seleccionar o seu dispositivo de captura de ecrã e carregar em “Capture screenshot”. Isso é uma questão de 10 segundos!

Bónus

Se seleccionar “Capturar imagem de ecrã em tamanho real” no menu, será criada uma imagem de ecrã de todo o website (do cabeçalho ao rodapé). Isto é útil, quando se pretende arquivar a forma como um sítio web foi visto num determinado momento.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *