How To: Make a Screenshot of a HTML Page Properly

[justinOrel]

Screenshots of HTML pages are used everywhere today, whether you're a designer giving a preview of your latest coded template, or trying to make thumbnails for your portfolio.

Unfortunately with HTML you can't simply export the image like with a PSD (photoshop) file, so you end up taking a screenshot of it in your browser. Now, everything your computer sees, including your taskbar and broswer toolbars will be included in the screenshot, and that can get in the way when you're trying to be professional. You are also unable to see the portion of the page that extends beyond your screen resolution.

Luckily there is a way to overcome this. My following guide describes how to complete the task with Internet Explorer.

1) Open up the page you want to make a screenshot of in Internet Explorer.

2) Go to View > Full Screen in the menu bar, or press F11.

3) Right click on the toolbar on the top and click Auto-Hide, it should now disappear when you move your mouse away.

4) Take a screenshot using the Prt Scrn key on your keyboard, and paste this into your favourite graphics program.

5) Return to Internet Explorer, scroll to the bottom of the page and repeat step 4. This step is not necessary if your whole page fits onto your screen vertically.

6) Align the two images in your graphics program, overlapping to give the proper page view.

7) Slice off the bits that you don't want, including the Internet Explorer scroll bars and any blank spaces on the page created for resolution compatability.

8) Export your image file. There you go, you now have a full image of your coded HTML page without exposing to the public your browser or what programs you have in your Quick Launch menu!

Reply With Quote

[seomelbourne]

You can save a step by browsing your site in Opera. Fullscreen mode in Opera is actually *full screen*! Plus that small screen mode is handy for seeing how your site works on a PDA

[trung277]

Good article. Thank you for sharing this.