Capture d'écran du site Web de la plus haute qualité?

16

J'ai créé un site Web que j'aimerais ajouter à mon portefeuille, mais j'ai du mal à obtenir des captures d'écran de haute qualité du site complet. J'ai essayé d'enregistrer le site Web au format PDF, mais c'était plein d'erreurs, d'autres services en ligne ne peuvent pas recréer les images, etc. J'ai aussi juste essayé de prendre des captures d'écran régulières sur le mac pour tout rassembler, mais cela a vraiment perdu beaucoup de qualité lorsque je l'ai réduit.

Des bonnes idées? :)

website-design screenshot

— user22524
source

Pouvez-vous fournir un exemple de ce qui se passe et peut-être une démonstration de ce que vous essayez de réaliser?

— cclark413

Lorsque vous parlez de "portfolio", voulez-vous dire physique (imprimé sur papier) ou une collection d'images (JPG, PNG) que vous pouvez distribuer sur des supports numériques ou en ligne?

— Daze

Je suis très intéressé par le fait que les captures d'écran mac que l'OP a essayées ne soient pas meilleures que les solutions ci-dessous. Je ne connais aucune capture d'écran Hi Def, donc si quelqu'un pouvait me l'expliquer. De plus, je suis également intéressé par le problème de mise à l'échelle. C'est généralement l'inverse. Bien sûr, lorsque vous réduisez quelque chose - il y a moins d'espace pour que les pixels représentent l'image, mais une perte de "qualité"? Peut-être que votre pourcentage de zoom le fait apparaître de cette façon? Essayez à 100%

— cclark413

1

La résolution d'écran 1920x1080 (1080p) donne une image pour l'impression qui convient à 6,4 x 3,6 pouces

— horatio

16

Dans Firefox, vous pouvez ouvrir la console avec Shift+F2et utiliser screenshot --fullpage.

Pour le mettre à l'échelle à différentes dimensions et tailles tout en préservant la qualité du texte, utilisez Ctrl+Shift+M(ou Cmd+Opt+Msur OS X) pour entrer dans la visionneuse de conception réactive et redimensionnez selon les besoins (vous pouvez également l'utiliser pour obtenir des captures d'écran à une résolution plus élevée que celle prise en charge par votre moniteur, ou obtenir des images de vues tablette / mobile). Aucun plug-in nécessaire.

Grand exemple

Petit exemple

— Slade
source

7

Si vous souhaitez prendre une capture d'écran pleine page sur un site Web, vous pouvez utiliser ce plugin Google Chrome .

Cela fera plusieurs captures d'écran (pendant le défilement) et les combinera en une seule image .png.

Il vous suffit de cliquer sur le plugin et de choisir "Capturer la page entière".

entrez la description de l'image ici

— Stéphane
source

Personnellement, j'utilise celui-ci , il est assez facile d'enregistrer les fichiers.

— Yisela

Les captures d'écran doivent être utilisées dans le portfolio de mon propre site Web. J'ai essayé à la fois la capture d'écran impressionnante et la capture d'écran de la page Web, mais ils ne fonctionnent pas sur la page que j'essaie de capturer. L'effet de parallaxe ruine la capture d'écran et les éléments qui apparaissent pour la première fois lorsque l'utilisateur y fait défiler n'apparaissent pas sur la capture d'écran. J'ai examiné quelques solutions qui pourraient convertir le CSS en vecteur, ce qui serait parfait, mais elles semblent ruiner la structure de la page et ne peuvent pas gérer les images.

— McKeene du

1

parralax est une animation qui ne peut pas être capturée dans une image fixe. Essayez de désactiver les images d'arrière-plan, puis créez une image composite à l'aide de captures d'écran et des fichiers source.

— horatio

1

J'utilise ça aussi. C'est génial. Cependant, cela ne fonctionne pas sur les fichiers locaux. Vous devez d'abord héberger la page html. Il y a aussi un écran d'impression goog ol '. Si vous voulez un outil de capture d'écran rapide pour capturer le mouvement / parallaxe, essayez Screencast-o-matic . Il est basé sur le Web et la sortie vidéo est de très bonne qualité.

— John

1

Je recommande Faststone Capture , que vous pouvez également utiliser en dehors du navigateur pour autre chose. Malheureusement, comme mentionné par @McKeene, il a des problèmes pour coller les images individuelles ensemble à une grande en raison de l'effet de défilement.

La version 5.3 est gratuite (téléchargement en allemand) pour les utilisateurs à domicile. Sinon, la dernière version coûte environ 20 $.

Capture d'écran de FastStone Capture

— Thomas Weller
source

1

Les utilisateurs de Firefox ajoutent simplement un plugin appelé "Capture d'écran impressionnante". Pour télécharger cet addon, visitez le lien suivant https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/

Les utilisateurs de Chrome peuvent accéder à https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=en

cet addon permet aux utilisateurs de prendre une capture d'écran de la partie VISIBLE ainsi que de la PLEINE PAGE, vous pouvez recadrer, insérer des formes, etc. sans passer à un autre programme.

— user22557
source

1

J'ai récemment commencé à utiliser Pagelayers pour mac et j'en suis assez content.

Certaines choses que j'aime:

Les psd peuvent être générés à une largeur personnalisée et une hauteur infinie.
Les psd générés sont divisés en groupes et couches.
Peut enregistrer au format PNG directement

Certaines choses qui me dérangent:

Nécessite que la page soit chargée sur l'application. Pas d'extension chromée. Cela peut être assez fastidieux, surtout lorsque vous voulez juste une capture d'écran simple. (Mon plus gros reproche)
Le fichier psd généré peut être assez volumineux.

Choses que vous pourriez ne pas aimer:

Prix: £ 20

J'ai un cas d'utilisation différent pour cela, donc je peux justifier le prix, mais vous pourriez ne pas le faire si vous avez juste besoin de captures d'écran simples.

J'espère que cela t'aides.

— trylife
source

1

Juste au cas où quelqu'un voudrait lire toutes les réponses et n'était pas satisfait des réponses ci-dessus, qui sont également excellentes, il existe un autre plugin de capture d'écran pour Firefox: "Screengrab!" . Je ne sais pas quelle résolution vous pouvez obtenir, mais toute la page actuelle sera sur la capture d'écran, pas seulement la partie visible. De plus, vous pouvez aller chercher une sélection spécifiée ou uniquement la partie actuellement visible de votre écran, elle enregistre au format png.

— Jaromír le Greenhorn
source

La résolution que vous obtenez dépend de la configuration d'affichage du moniteur que vous utilisez.

— Rafael