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!

good information. thnx

Nice tutorial. Just want to add that holding Alt while pressing Print Screen will only snapshot the current window.

Usually when you paste it in your graphics program, you should be able to crop it quite easily in any case. That's what I usually do.

When I want a full screenshot of a long page, i flip my resolution up very high until the screen is fully displayed, take my screenshot and drop back down to a normal resolution. Saves you from having to combine two images, though either way isn't that difficult.

Regards,
Jason

I write a program that selects my browser window into a new device context, then copys the bits into a bitmap structure, then output it to a file :D :cool:

Er, I belive there are some other programs that do this too.

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 :)

Hi -
I use the free MWSnap for all my screenshots, since you can choose between: full screen, a rectangular area that you define, or a preset size - and you can save it in pretty much any graphics format.

Tres cool -
love this tiny app!

El

the_pm is absolutely on target! Opera browser does indeed allow fullscreen mode. ;)

Many of the ideas here work! Sometimes several tools can be used simultaneously to get the precise look you want..... outside of full screen shots.... :)

Nice Tutorial. :)

Nice one, a lot of portfolio websites could use this tutorial :)

Nice tip :-D

http://www.provtech.co.uk/main/default.asp

Nice tip I was always cropping images , never thought of that.

cool tut, but there are easier ways.

u dont have to hide ur taskbar just hold alt then prnt scrn so that only the active window gets screened and for long pages just put ur res up.

You can use free program called Purrint Preview to view and save file from your clipboard to file on your disk..(bmp. jpg. png..)

Hold ALT and hit print screen for just the active window.

Originally posted by harleyx
Hold ALT and hit print screen for just the active window.

That wouldn't work if the page is bigger then the screen (like this one), unless you go to a image editor and piece the screenshots together

No, it won't. Of course I didn't say it would. It's far easier than screwin with screen resolution for screencaps. I've found very few instances where you'd need to screencap more than one viewport of information, unless you were making your entire website into uncrawlable jpg's or something silly like that.

thanks good info,,

its quite a simple technique and something i cant belive people don't do!

There is a program on download.com that does the same without needing to merge the pictures together. Can't remember the name right now though but do a search for "screen capture"

hello thats a nice tutorial thank you. gives me some insight into the topic that i am yet to undergo study. good work

cheers

I'm using Fullshot 8.5 for that. You can find at it download.com. It has very nice features.

just use your print button and then paste it into photoshop.

thanks for the info :D

Go for Fullshot, you won't regret it.

hi
If anybody want to take VIDEO screen capture, I advise you to use Screen VidShot 1.2
It allows you to record captures to avi, asf, wmv in 3 ways: Window, Region and Desktop!

I use this...

http://www.techsmith.com/products/snagit/tour/capture.asp

Captures the entire page.

I just downloaded Fullshot, looks like a really nice program. Thanks for mentioning it.

Not a bad idea, but I just export the whole view of the layout from the graphics software :)

thanks for all the tips about the programs and stuff. very helpful!

there's just one other screen capture problem, which is bugging me for ages now: how can I make a capture of a (streaming) video playing on RealPlayer? I managed to tweak the settings of my Windows Media Player, so that's working fine now, but RealPlayer is only giving me a black image.

Any ideas?

Go to Display Properties and turn hardware acceleration off. :)

Sorry for the bump. :stan:

Go to Display Properties and turn hardware acceleration off. :)

Sorry for the bump. :stan:

If i'm not mistaken, this is for capturing screenshot of movies or watching video clips.. :)

Yes. Wasn't that what Miss-NewYork asked about? :fairy:

That wouldn't work if the page is bigger then the screen (like this one), unless you go to a image editor and piece the screenshots together

uh, yeah it would if you put the res down. but if you still need more room for a really long page, the editing tip and combining shots is good. If you are going to post a tutorial it is a good idea to make sure you have the optimal method.

:gthumb:

Good Tutorial, but Photoshop + Cropping is also sufficient :)

Oh ho thanks :) it s veru simple

I prefer Fireshot.......

<<signatures to be set up in your profile>>

I like screenhunter it works well.;)

On a mac i use Paparazzie

Awesome Screenshot for Chrome OS™ is good

www.screencap.net is a choice for Windows users

Lookit is for Ubuntu
http://blog.vivekv.com/lookit-ubuntu-alternative-to-screencap.html

I use firefox and there is a picknik plugin for it where I can just right click and save the entire page and also edit it on picknik.

Nice tutorial too, Might come in handy

You can use renderhtml.com if you need to create a screencap image or PDF from a website.

If you have multiple monitors, you'll end up taking a screen shot of each monitor screen with just PRTSC. That said, select the browser (or any application you want to take a screen shot of) and press ALT+PRTSC. Using ALT+PRTSC will only print the screen that you are currently working in.

Save ur time and life. Use addon for mozilla/chrome. Its called FireShot.

Its for making auto pdf of screen, whole page screenshot, screenshot and autoupload and so on many features. Quality is also pretty good.

Print Screen rocks! Every good designer/developer needs it.

Yes, true. Print Screen is best option for it.