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

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:

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!

16 interações 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 Zemel13/03/2008 

    @ Richardson (Vix)

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

    Abraços e apareça!

  3. Thiago Alex18/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. Ornando03/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 Zemel05/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 Cavalcante11/06/2009 

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

  7. Tárcio Zemel15/06/2009 

    @ Cicero Cavalcante

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

  8. Amaral21/09/2009 

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

  9. flavio29/07/2010 

    Muito obrigado pela dica me ajudou muito…. valeu

  10. Cristiano06/08/2010 

    Nossa cara vlw msmo

    eu tava ralando tirando ss colando no photosoho recortando tdo e montando

    agra ta facinho xD

  11. Tárcio Zemel15/08/2010 

    @ Amaral,

    @ flavio,

    @ Cristiano

    Obrigado pela participação, pessoal! Abraços!

  12. Marcos Malachias21/02/2011 

    Perfeito o artigo e perfeita a ferramenta screengrab. Acabou de me quebrar um galhão com um screenshot agora!
    Site de de vocês esta de parabéns!

    Abraços

    Marcos Malachias
    Adm. de Redes (também design rsrsrs)

  13. Tárcio Zemel14/03/2011 

    Abraços!

  14. Mateus30/05/2011 

    Muito bom o artigo. Vou testar algumas soluções.
    Já usei também o , mas ele falha às vezes, na hora de gerar a imagem.

  15. @gooxe05/12/2011 

    O Screengrab é o melhor, pois ele é um dos poucos q falham pouco na hora de gerar a imagem completa (com a barra de rolagem), infelizmente ele só funciona do firefox 6.0 pra trás =(

Comente!

Um homem que para de anunciar para poupar dinheiro é como um homem que para um relógio para poupar tempo.

Henry Ford
Quer ganhar 1 ano grátis da Conta Negócios Basekit, uma das melhores ferramentas de criar sites do mundo? Saiba como!