Sometimes, people ask us how we’ve done things on the Silicon Dales website itself, as they’d like to take a technique and put it into their own website. Today, I’m going to be letting you know how to do a screenshot of a website or other item on your computer screen.
Table of Contents
Free Screenshot Softwares / Websites
First up, there are a host of free screen-shotting websites out there, which allow you to not only capture the visible area of some website or other, but also you can capture a printed image of the entire webpage, too, should you need one (for example for a site media pack or similar). Just do a quick Google search for “Free screenshot capture tool” or similar to find those tools – in this blog post, I’m going to be talking about how to make your very own screenshot, using whatever image editing software you use!
Use the Print Screen Function
The first step is to locate the button on your PC keyboard that reads “Print Screen”. On a laptop, sometimes this function requires you to press the “Alt” or “Function” key to work correctly.
Once you’ve found that button, below is a step-by-step guide to using it to get a working screenshot image for a presentation or web design project:
1) Prepare Your Screen Area
Make sure your screen appears exactly how you’d want to capture it – this means move your mouse “pointer” away from the visible area… unless you wanted the mouse pointer to be in your screenshot!
2) Hit Print Screen
Press the print screen button. This will captue an “image” of your entire visible screen, and place it into the clipboard.
3) Open Your Image Editing Software of Choice
I usually use Adobe Fireworks if the image is for the web, but you’ll probably want either Photoshop or the basic “Paint” package if you have no shop bought software. There are also lots of good, free, image editing suites of varying degrees of complexity. If you’re on Linux, try Gimp.
4) Press “Edit > Paste” or Control + V
Either press “Edit > Paste” or the Control key and the letter V to paste your screenshot into your working page.
5) Cut the Screenshot You Want
You probably don’t want to be screen-shotting the whole entire visible area of the screen, so select a rectangular “cut” tool and the Cut (control and X) the desired amount into your clipboard.
6) Make a “New” Document
With this cut to size screenshot in your clipboard, start a new document in your image software.
7) Resize & Save Your Screenshot Image Document for Use
You can then resize to your exact specifications and hit “save as” to give your screenshot a file name that you can remember for whatever use you had intended!
If you wanted to do a “how to” item, this is where you might add red boxes, and pointy arrows, etc, for example!
Any questions or comments, please leave them below and I’ll try to help you get screen shotting ASAP.
You can see screenshots in action produced in this way (using Adobe Fireworks) in our Web Design Portfolio section – so obviously, and alternative is to get the Silicon Dales team to build and manage your website!