Logotipo desenvolvimento para web

Como tirar screenshot de um web site inteiro e obter uma imagem completa

Para aqueles que precisam ter a imagem de um web site inteiro, existem algumas possibilidades de se fazer isso. Aprenda como ter a imagem de um site por completo.

Quando é preciso tirar um screenshot de um site inteiro, mesmo das partes que estrapolam a “dobra superior” (parte visíveil antes de se rolar o barra de rolagem), às vezes pode ser chato… Existem diversas maneiras de se fazer isso:

  • Fazer várias screenshots de diferentes partes e depois juntar tudo em um programa de editoração de imagens;
  • Utilizar um daqueles monitores que giram e ficam mais altos que largos (dependendo do tamanho do site, não funciona);
  • Utilizar os serviços do site Super Screenshot;
  • Usar o plugin para Firefox Screengrab!

Fazer várias screenshots de diferentes partes e depois juntar tudo em um programa de editoração de imagens

Essa é a maneira mais demorada e chata. Deve-se tirar uma screenshot da página “acima da dobra”, abrir seu programa de editoração de imagens preferido e colar a imagem. Depois, rolar a tela até o limite inferior da última, tirar outra foto e colar novamente no programa de editoração de imagens; e assim por diante, até chegar ao fim da página ou ao ponto que se deseja capturar.

Posteriormente, cria-se um novo documento com a largura do site e, para altura, coloca-se um valor bem alto, exagerado, mesmo. Então, pega a primeira screenshot para copiar e colar neste novo documento; pega-se a segunda, e coloca-se logo abaixo da primeira, e assim vai, até completar.

Bem “sacal”, hã…?

Utilizar um daqueles monitores que giram e ficam mais altos que largos

Estes monitores, apesar de nada baratos, costumam ser excelentes! A maioria é widescreen (bom para um filminho!) e tem uma definiçao muito boa. Quando se tem a oportunidade de se ter e/ou usar uma dessas belezas, basta girar a tela para que ela “fique maior” no sentido vertical, configurar a resolução para tal, entrar no site que se quer e tirar uma foto dele.

Agora, dependendo do site que se entre (especialmente blogs), até mesmo este monitor não conseguirá captar toda a extensão. Portanto, este ainda não é o melhor método.

Utilizar os serviços do site Super Screenshot

O site Super Screenshot oferece o serviço de tirar uma foto completa de web sites (gratuitamente). Entretanto, algumas vezes acontecem coisas estranhas com a imagem gerada, com elementos fora do lugar e outras coisas. Veja-se o exemplo no artigo sobre o princípio Gestalt de alinhamento aplicado ao web design.

Essa foi quase, mas usar o Super Screenshot ainda não é a melhor opção.

Usar o plugin para Firefox Screengrab!

Recentemente descobri esta extensão para Firefox, a Screengrab!, que serve justamente para tirar uma screenshot completa de sites!

Depois que você o instala e reinicia o Firefox para seu ativamento acontecer, um ícone indicativo aparece na barra de status, à direita. Quando se clica nele, aparecem 2 menus principais, “Save…” e “Copy…”, onde é possível escolher se se quer salvar a imagem diretamente ou copiar para a área de transferência para uso posterior.

Exemplo de uso do plugin para Firefox Screengrab!

Em cada um dos menus, as mesmas subopções:

  • Complete Page/Frame…”: Serve para tirar uma screenshot de todo o web site (ou frame…);
  • Visible Portion…”: Para capturar somente a parte visível, qualquer que seja;
  • Selection“: que permite selecionar em tempo real um trecho qualquer da tela para gerar uma imagem.

Conclusão

Enfim, pessoal, segundo o que eu pude pensar (pelo menos por agora), a maneira mais fácil, econômica, rápida e prática para se obter uma imagem de um web site completo é, sem sombra de dúvidas, utilizar a extensão do Firefox Screengrab! Com ela, é possível capturar porções de web sites ou toda sua extensão, de forma automática, salvando o arquivo diretamente (.png) ou copiando para a área de transferência para uso posterior.

<update>
O leitor Richardson (Vix) indicou que no navegador Maxthon tem o recurso nativo de tirar screenshots: captura a tela inteira, uma região, uma aba ou todas, além de outras opções. Para quem usa este browser, a facilidade para tirar fotos de sites completos é ainda maior, já que não é preciso instalar extensões.

Cicero Cavalcante comentou sobre o programa WebShot, que também serve para tirar screenshot completo de um site.

Amaral citou o serviço WebShotsPro.com.
</update>

Se alguém souber mais algum jeito para ter uma screenshot completo de um web site, comente, por favor!

Todo desenvolvedor web deve ler

Use a cabeça: HTML com CSS e XHTML PHP e MySQL: Desenvolvimento Web Internet e World Wide Web: Como Programar Criando páginas web com CSS Usabilidade na web Design para a internet Não me faça pensar jQuery: A Biblioteca do Programador JavaScript Ajax com jQuery: Requisições AJAX com a Simplicidade de jQuery

9 comentários em "Como tirar screenshot de um web site inteiro e obter uma imagem completa"

  1. Richardson (Vix) (13/03/2008)  

    Eu utilizo o Maxthon como “navegador” e ele tem um recurso nativo para isso. No caso as opções existens permite captura a tela inteira, uma região, uma aba ou todas, além de outras opções. Salva em arquivo ou copia para a área de transferência, em vários formatos (jpg, gif, png, …).

  2. Tárcio Zemel (13/03/2008)  

    @ Richardson (Vix)

    Muito obrigado pela dica, Vix! Atualizei o texto do artigo em sua homenagem!

    Abraços e apareça!

  3. Thiago Alex (18/03/2008)  

    Cara, mais que o lance da página inteira, eu gostei do recurso de ’seleção’. Para quem publica em blogs e fala sobre sites, facilita bastante o trabalho com os cortes.

  4. Ornando (03/05/2008)  

    Olá Tárcio blz?, este plugin é muito bom mesmo só que ele salva a imagem sem a extensão, deve ser algum bug, para resolver basta “Renomear” o arquivo salvo e colocar a extensão .png

    :)

  5. Tárcio Zemel (05/05/2008)  

    @ Thiago Alex
    Com certeza, Thiago! É realmente uma mão na roda já poder “recortar” da página uma parte, em especial, do que tirar um screenshot, abrir um programa de edição de imagens, recortar, etc, para pegar o trecho que se quer! :-)

    @ Ornando
    Oi, Ornando! Obrigado por comentar!

    Rapaz, que coisa estranha que acontece… Quando eu salvo com o Screengrab (tanto site inteiro, quanto porção) ele automaticamente já coloca a extensão PNG.

    Vai ver aconteceu alguma coisa com sua instação… Tenta reinstalar para ver se funciona; e aí você é poupado do “trabalho” de ter que adicionar a extensão toda hora.

    Abraços!

  6. Cicero Cavalcante (12/06/2009)  

    Um ótimo r pequeno programinha com essa finalidade é WebShot http://www.websitescreenshots.com/Default.aspx#download

  7. Tárcio Zemel (15/06/2009)  

    @ Cicero Cavalcante
    Obrigado pela dica! Atualizei o post com a informação. ;-)

  8. Amaral (21/09/2009)  

    Eu conheço este aqui é muito bom http://www.webshotspro.com

Deixe um comentário

artigos comentários e-mail ?
Siga-me no twitter!