Wer kennt das nicht? Du willst von einer ganzen Website ein Abbild erstellen, kannst aber im Regelfall nur den sichtbaren Bereich virtuell ablichten. Dabei ist es eigentlich ziemlich einfach, einen Screenshot einer Website zu machen, wobei auch die Bereiche erfasst werden, die du erst durch Scrollen erreichst. Hier zeige ich dir kurz & knapp, wie das geht.
Total easy: Screenshots mit Firefox
Firefox macht es meines Erachtes mit Abstand am einfachsten, solch einen ganzseitigen Screenshot zu erstellen. Der Vorgang ist überaus benutzerfreundlich, und du brauchst keine Extensions, um ganz bequem die Website abzufotografieren:
1. Hierzu klickst du auf die drei Pünktchen in der URL-Leiste und gehst auf “Take a Screenshot”:
2. Im nächsten Schritt kannst du dann wahlweise die einzelnen Elemente einer Seite virtuell ablichten lassen, indem du mit dem Mauszeiger drüber fährst und den jeweiligen Bereich anklickst.
In diesem Fall willst du aber die ganze Seite abfotografieren, und hierfür gehst du dann auf “Save full page” und lichtest so die Seite ab.
3. Im allerletzten Schritt tut sich dann ein Fenster auf, in dem du eigentlich nur noch den blauen “Download” Knopf betätigst. Die Datei wird dann im Regelfall in den Downloads-Ordner verfrachtet und dort abgespeichert. Es sei denn, du hast einen anderen Standard-Ordner definiert.
Und das war es auch schon. Operation gelungen, Patient lebt. Nun schauen wir uns als nächstes den Vorgang in Chrome an.
Weniger easy: Screenshots mit Chrome
In Chrome geht das Ganze leider nicht ganz so einfach wie in Firefox. Für Entwickler wird das sicher kein Problem sein, da diese sich meist schon mit Chromes DevTools auskennen. Für nicht ganz so versierte Nutzer hingegen ist es wohl eher etwas unzugänglich, und man muss sich erst an den Vorgang gewöhnen. Und der geht so:
1. Du rufst das DevTools Menü in Windows per STRG + SHIFT + I auf, (im Mac per CMD + ALT + I). Es erscheint folgende Übersicht:
2. In einem zweiten Schritt gibst d nun in Windows STRG + Shift + P ein, was ein Eingabefeld aufruft, das so aussieht:
3. Zu guter Letzt schreibst du nun das Wort “Screenshot” in das Eingabefeld, wodurch einige Optionen angezeigt werden. Was du brauchst, ist “Capture full-size screenshot”.
Das klickst du nun also an, und nach wenigen Sekunden wird ein Abbild der gesamten Website in den Downloads-Ordner heruntergeladen. Fertig. Wenn dir das zu kompliziert ist, gibt es für dich die Screenshot-Funktionalität auch als Chome Extension.
Der Vollständigkeit halber werfe ich noch einen Blick auf den Safari-Browser.
Auch ganz okay: Screenshots mit Safari
Im Safari kannst du ebenso einen Screenshot über den “Web Inspector” tätigen, welchen du per CMD + ALT + I im Mac aufrufst. Hier braucht es nur noch einen weiteren Mausklick auf “Capture Screenshot”, und im Nu liegt die Datei im Downloads-Ordner. Wenn du solche Entwickler-Werkzeuge nicht magst, kannst du auch eine Extension à la Awesome Screenshot verwenden.
Was sind deine Lieblings-Extensions oder Tricks, um solche Screenshots zu erstellen? Schreib es doch unten in die Kommentare! Die besten Tipps nehmen wir dann in den Artikel auf.
Frohes Fotografieren!
(Beitragsbild: Depositphotos)
6 Kommentare zu “Praktisch: Ganzseitige Screenshots deiner Website mit Firefox, Chrome & Safari”
Danke für den Tipp, das wusste ich noch gar nicht – hab es bisher immer (umständlich) mit Photoshop zusammengebastelt haha – so gehts natürlich einfacher 😀
Und meine unbedingte Empfehlung für Chrome ist das Add-on “Awesome Screenshot”.
Auf Firefox nutze ich das “FireShot” Addon, kann nämlich die Screenshots als PDF exportieren 😉
Das kannte ich noch gar nicht, danke Dir!
Die Entwickler-Konsole kann auch einfacher mit der Taste”F12″ aufgerufen werden.
Seit Jahren ist Firefox mein “Leib-und-Magen-Browser” und ich kannte diese geniale und zugleich einfache Funktion überhaupt nocht nicht. Man lernt im Leben nie aus! Danke für den Tipp!