Captura de tela do site da mais alta qualidade?

16

Criei um site que gostaria de adicionar ao meu portfólio, mas estou tendo dificuldades para obter capturas de tela de alta qualidade do site completo. Tentei salvar o site em PDF, mas estava cheio de erros, outros serviços on-line não podem recriar as imagens e assim por diante. Também tentei tirar capturas de tela regulares no mac para juntar tudo, mas realmente perdi muita qualidade quando reduzi o tamanho.

Alguma boa ideia? :)

website-design screenshot user22524
fonte
Você pode fornecer um exemplo do que está acontecendo e talvez uma demonstração do que você está tentando alcançar?
precisa saber é o seguinte
Quando você diz "portfólio", você quer dizer um físico (impresso em papel) ou uma coleção de imagens (JPG, PNG) que você pode distribuir em mídia digital ou online?
Daze
Estou muito interessado em saber por que as capturas de tela para mac que o OP tentou não são melhores do que as soluções abaixo. Não conheço nenhuma captura de tela do Hi Def, por isso, se alguém puder me explicar, por favor. Além disso, também estou interessado no problema de escala. Geralmente é o contrário. Obviamente, quando você reduz o tamanho de algo - há menos espaço para os pixels representarem a imagem, mas há uma perda de "qualidade"? Talvez sua porcentagem de zoom faça com que ela apareça dessa maneira? Tente 100%
cclark413
11
Resolução 1920x1080 tela (1080p) dá uma imagem de impressão que é adequado para 6,4 x 3,6 polegadas
horatio

Respostas:

16

No Firefox, você pode abrir o console com Shift+F2e usar screenshot --fullpage.

Para dimensioná-lo para diferentes dimensões e tamanhos, preservando a qualidade do texto, use Ctrl+Shift+M(ou Cmd+Opt+Mno OS X) para entrar no visualizador de design responsivo e redimensioná-lo conforme necessário (você também pode usá-lo para obter capturas de tela em resolução mais alta do que o monitor suporta ou obter imagens de visualizações para tablet / celular). Não são necessários plug-ins.

Grande exemplo

Pequeno exemplo

Slade
fonte
7

Se você deseja capturar uma tela inteira em um site, pode usar este plug-in do Google Chrome .

Isso fará várias capturas de tela (durante a rolagem) e as combinará em uma imagem .png.

Você só precisa clicar no plug-in e escolher "Capturar página inteira".

insira a descrição da imagem aqui

Stéphane
fonte
Eu pessoalmente uso esse , facilita bastante o salvamento dos arquivos.
Yisela
As capturas de tela devem ser usadas no portfólio em meu próprio site. Tentei tanto o Awesome Screenshot quanto o Screenshot da página da Web, mas eles não estão funcionando na página que estou tentando capturar. O efeito de paralaxe arruina a captura de tela e os elementos que aparecem pela primeira vez quando o usuário rola para baixo, não aparecem na captura de tela. Analisei algumas soluções que poderiam converter o css em vetor, o que seria perfeito, mas elas parecem arruinar a estrutura da página e não conseguem lidar com as imagens.
McKeene
11
parralax é uma animação que não pode ser capturada em uma imagem estática. Tente desativar as imagens de plano de fundo e faça uma imagem composta usando screencaps e os arquivos de origem.
24514 horatio
11
Eu também uso isso. Isso é incrível. Porém, ele não funciona em arquivos locais. Você precisa hospedar a página html primeiro. Também há uma ótima tela de impressão. Se você deseja uma ferramenta rápida de captura de tela para capturar o movimento / paralaxe, tente o Screencast-o-matic . É baseado na Web e a saída de vídeo é de boa qualidade.
John
1

Eu recomendo o Faststone Capture , que você também pode usar fora do navegador para qualquer outra coisa. Infelizmente, como mencionado por @McKeene, ele tem problemas para unir as imagens únicas a uma grande por causa do efeito de rolagem.

A versão 5.3 é gratuita (download em alemão) para usuários domésticos. Caso contrário, a versão mais recente será de cerca de US $ 20.

Captura de tela do FastStone Capture

Thomas Weller
fonte
1

Os usuários do Firefox apenas adicionam um plugin chamado "Awesome Screenshot". Para baixar este complemento, acesse o link https://addons.mozilla.org/pt-BR/firefox/addon/awesome-screenshot-capture-/

Os usuários do Chrome podem acessar https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=en

Este complemento permite aos usuários capturar imagens da parte VISÍVEL, bem como da PÁGINA INTEIRA, você pode cortar, inserir formas etc. sem mudar para outro programa.

user22557
fonte
1

Recentemente, comecei a usar pagelayers para mac e estou muito feliz com isso.

Algumas coisas que eu amo:

  • Psd's podem ser gerados em largura personalizada e altura infinita.

  • Os psd gerados são divididos em grupos e camadas.

  • Pode salvar em PNG diretamente

Algumas coisas que me incomodam:

  • Requer que a página seja carregada no aplicativo. Nenhuma extensão do chrome. Isso pode ser bastante entediante, especialmente quando você deseja apenas uma captura de tela simples. (Minha maior queixa com isso)
  • O arquivo psd gerado pode ser bastante grande.

Coisas que você pode não gostar:

Preço: £ 20

Eu tenho um caso de uso diferente, portanto, posso justificar o preço, mas talvez você não precise se precisar de capturas de tela simples.

Espero que isto ajude.

trylife
fonte
1

Caso alguém se interesse por ler todas as respostas e não esteja satisfeito com as respostas acima, que também são excelentes, existe outro plugin de captura de tela para o Firefox: "Screengrab!" . Não sei qual a resolução que você pode obter, mas a página atual inteira estará na captura de tela, não apenas na parte visível. Além disso, você pode acessar uma seleção especificada ou apenas a parte atualmente visível da tela, que salva no formato png.

Jaromír, o Chifre Verde
fonte
A resolução obtida depende da configuração de exibição do monitor que você está usando.
Rafael