Nifty Ways to Take a Full Page Screenshot

The problem with web page screenshots….

One of the things I often need to do as a web designer is to take screenshots of web pages.

If I’ve need to capture a shot of a full web page, up until now it’s been a tedious process:

• Press the Prt Sc key
• Paste the screenshot into Photoshop (you could do the same with any other image editing program)
• Scroll down the page
• Screen capture again
• Paste into Photoshop again
• Repeat until the whole page is done
• Knit the shots together into a new file
• Crop appropriately.
• Save the file.

What a lot of work!

I have now discovered some new tools which make the process much easier.

Desktop browser extensions for taking full page screenshots

Awesome Screenshot: Screen capture, Annotate

Awesome Screenshot is a browser extension for Chrome and Firefox. I’ve tested it in both and it works really well.

The links to download it are:

Awesome Screenshot for Chrome

Awesome Screenshot Plus for Firefox

Taking a full page screenshot is easy.

1. Click on the Screenshot (camera) icon.
2. Select if you want to capture the whole page, the visible part or a selection. If you have selected an area, click the Take Screenshot button.
3. Annotate your screenshot if you wish using the Marker tool.
4. Save or share your screenshot.

Free screenshot tools for Android

You can capture whole web pages using the Dolphin Browser for Android with the Dolphin Screen Cut add-on, both available free from the Play Store. Using both, you can capture all or part of a page.

To do this:

1. Open Dolphin browser and navigate to the page you want to capture.
2. Tap on the icon below the + icon.
3. Select Screen Cut from the menu.
4. Select the area you want to capture.
5. Save or share the screenshot.

A screenshot app for iPad and iPhone

Awesome Screenshot for Safari is a free iPhone and iPad app which lets you to take a screenshot of a full web page. You can then annotate it using the inbuilt tools and save it.

There are two ways to use it – through the app natively, or through the Safari extension.

To activate the Safari extension, you need to do the following:

1. Open Safari.
2. Tap the Share icon.
3. Scroll across the second row of icons starting with Add Bookmark and tap More.
4. Set Screenshot from off to on.

To take a screenshot, tap the Screenshot button in the icon row. You can choose to capture a full page or part of a page, then annotate it.

Using the native app is even easier:

Input the URL of the page in the box and click Go.

Or tap the button and choose from an existing screenshot, which you can then annotate. When you are done, tap the green tick, then the Save link.

The tools you can choose from are:

• Crop
• Draw rectangle or ellipse
• Add arrow or line
• Freeform drawing
• Add text
• Blur parts of the screen.

This is a wider tool suite than the desktop version, which I like.

Browserstack

Browserstack Screenshots is a useful tool I use when testing websites cross-browser. You can which browsers and operating systems to test on. 15 are selected for you to begin with. You can add to, reduce or change that list.

The only caveat with Browserstack is that it tests pages on emulators of the devices rather than the actual devices themselves. So there might be very slight differences in the way a web page looks on say, an iPhone.

And finally…

If you have a Dropbox account, a useful feature is that you can send any screen captures taken with Prt Sc directly to your Dropbox. You won’t get full pages that way, but it’s great if you want to capture your whole desktop.

To do this, you need to install the Dropbox desktop app.

Screenshots are stored in a folder Screenshots, and are named with the date and time they were captured. You’ll get a notification each time one is added.

If you don’t have the screenshot option turned on, you can change that this way:

1. Click on the Dropbox icon in the system tray (Windows) or menu bar (Mac).
2. Click on the gear icon and select Preferences.
3. Choose the Import tab.
4. Check the icon that says “Share screenshots using Dropbox”.

If you want to edit your screenshots, you still need to do that yourself.

Note that you don’t have to share your screenshots with anyone else unless you want to!

Did this post help you? if so, please comment or share!

Tweet
0