Screenshot einer Website von höchster Qualität?

16

Ich habe eine Website erstellt , die ich meinem Portfolio hinzufügen möchte, aber es fällt mir schwer, qualitativ hochwertige Screenshots der gesamten Website zu erhalten. Ich habe versucht, die Website als PDF zu speichern, aber das war voller Fehler, andere Onlinedienste können die Bilder nicht neu erstellen und so weiter. Ich habe auch gerade versucht, normale Screenshots auf dem Mac zu machen, um alles zusammenzusetzen, aber es hat wirklich viel an Qualität verloren, als ich es verkleinerte.

Irgendwelche guten Ideen? :)

website-design screenshot user22524
quelle
Können Sie ein Beispiel dafür geben, was gerade passiert, und vielleicht eine Demo dessen, was Sie erreichen möchten?
cclark413
Wenn Sie "Mappe" sagen, meinen Sie eine physische (auf Papier gedruckte) oder eine Sammlung von Bildern (JPG, PNG), die Sie auf digitalen Medien oder online verbreiten können?
Daze
Ich bin sehr interessiert, warum die Mac-Screenshots, die das OP ausprobiert hat, nicht besser sind als die unten aufgeführten Lösungen. Ich kenne keine Hi-Def-Screenshots, wenn mir das also jemand erklären könnte. Weiterhin interessiert mich auch das Skalierungsproblem. Normalerweise ist es umgekehrt. Natürlich, wenn Sie etwas verkleinern - es gibt weniger Platz für Pixel, um das Bild darzustellen, aber einen Verlust an "Qualität"? Vielleicht lässt es Ihr Zoom-Prozentsatz so erscheinen? Versuchen Sie es mit 100%
cclark413
1
Die Bildschirmauflösung
Horatio

Antworten:

16

In Firefox können Sie die Konsole mit öffnen Shift+F2und verwenden screenshot --fullpage.

Verwenden Sie Ctrl+Shift+M(oder Cmd+Opt+MOS X), um den reaktionsschnellen Entwurfs-Viewer zu öffnen und die Größe nach Bedarf zu ändern , um ihn unter Beibehaltung der Textqualität auf unterschiedliche Abmessungen und Größen zu skalieren (Sie können auch Screenshots mit einer höheren Auflösung als vom Monitor unterstützt oder Bilder abrufen) von Tablet / Handy-Ansichten). Es sind keine Plug-Ins erforderlich.

Großes Beispiel

Kleines Beispiel

Slade
quelle
7

Wenn Sie einen ganzseitigen Screenshot einer Website erstellen möchten, können Sie dieses Google Chrome-Plug-in verwenden .

Dadurch werden mehrere Screenshots (während des Bildlaufs) erstellt und zu einem PNG-Bild kombiniert.

Sie müssen nur auf das Plugin klicken und "Gesamte Seite erfassen" auswählen.

Bildbeschreibung hier eingeben

Stéphane
quelle
Ich persönlich benutze dieses , es macht es ziemlich einfach, die Dateien zu speichern.
Yisela
Die Screenshots sollten im Portfolio auf meiner eigenen Website verwendet werden. Ich habe sowohl Awesome Screenshot als auch Webpage Screenshot ausprobiert, aber sie funktionieren nicht auf der Seite, die ich erfassen möchte. Der Parallaxeeffekt ruiniert den Screenshot und die Elemente, die zuerst angezeigt werden, wenn der Benutzer einen Bildlauf nach unten durchführt, werden auf dem Screenshot nicht angezeigt. Ich habe mir ein paar Lösungen angesehen, die das CSS in einen Vektor konvertieren könnten, was perfekt wäre, aber sie scheinen die Struktur der Seite zu ruinieren und können die Bilder nicht verarbeiten.
McKeene
1
parralax ist eine animation, die in einem standbild nicht erfasst werden kann. Deaktivieren Sie die Hintergrundbilder und erstellen Sie dann ein zusammengesetztes Bild mit Hilfe von Screencaps und den Quelldateien.
Horatio
1
Ich benutze das auch. Es ist beeindruckend. Es funktioniert jedoch nicht bei lokalen Dateien. Sie müssen zuerst die HTML-Seite hosten. Es gibt auch einen guten alten Druckbildschirm. Wenn Sie ein Tool zur schnellen Bildschirmaufnahme benötigen, um die Bewegung / Parallaxe zu erfassen, versuchen Sie es mit Screencast-o-matic . Es ist webbasiert und die Videoausgabe ist von ziemlich guter Qualität.
John
1

Ich empfehle Faststone Capture , das Sie auch für andere Zwecke außerhalb des Browsers verwenden können. Leider hat es, wie von @McKeene erwähnt, aufgrund des Bildlaufeffekts Probleme, die einzelnen Bilder zu einem großen zusammenzukleben.

Version 5.3 ist für Privatanwender kostenlos. Ansonsten kostet die neueste Version etwa 20 US-Dollar.

FastStone Capture-Screenshot

Thomas Weller
quelle
1

Firefox-Benutzer fügen einfach ein Plugin mit dem Namen "Awesome Screenshot" hinzu. Besuchen Sie den folgenden Link, um dieses Addon herunterzuladen: https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/

Chrome-Nutzer können https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=de aufrufen

Mit diesem Addon können Benutzer Screenshots von VISIBLE-Teilen sowie von FULL PAGE machen. Sie können Formen zuschneiden, einfügen usw., ohne zu einem anderen Programm wechseln zu müssen.

user22557
quelle
1

Ich habe vor kurzem mit Pagelayers für Mac angefangen und bin ziemlich zufrieden damit.

Einige Dinge, die ich liebe:

  • Psds können in benutzerdefinierter Breite und unendlicher Höhe erstellt werden.

  • Die generierten PSDs sind in Gruppen und Ebenen unterteilt.

  • Kann direkt in PNG speichern

Einige Dinge, die mich stören:

  • Erfordert, dass die Seite in die App geladen wird. Keine Chromverlängerung. Dies kann sehr mühsam sein, besonders wenn Sie nur einen einfachen Screenshot haben möchten. (Mein größter Kritikpunkt damit)
  • Die generierte psd-Datei kann sehr groß sein.

Dinge, die Ihnen vielleicht nicht gefallen:

Preis: £ 20

Ich habe einen anderen Anwendungsfall dafür, daher kann ich den Preis rechtfertigen, aber möglicherweise nicht, wenn Sie nur einfache Screenshots benötigen.

Hoffe das hilft.

trylife
quelle
1

Nur für den Fall, dass jemand alle Antworten lesen möchte und mit den oben genannten, ebenfalls hervorragenden, nicht zufrieden ist, gibt es ein weiteres Screenshot- Plugin für Firefox: "Screengrab!" . Ich weiß nicht, welche Auflösung Sie erhalten können, aber die gesamte aktuelle Seite befindet sich auf dem Screenshot, nicht nur der sichtbare Teil. Zusätzlich können Sie eine bestimmte Auswahl treffen oder nur den aktuell sichtbaren Teil Ihres Bildschirms, der im PNG-Format gespeichert wird.

Jaromír das Greenhorn
quelle
Die Auflösung, die Sie erhalten, hängt von der Anzeigekonfiguration des verwendeten Monitors ab.
Rafael