The best website screenshot tool for designers

T

My favorite tool for taking website screenshots is Google Chrome’s GoFullPage.

Working as a web designer, taking screenshots of what I see in a browser (yes, the full browser window, even what I have to scroll to see) is very useful.

GoFullPage is a free Chrome Extension that simply works, is fast and effective, and does not require extra permissions or include advertisements and watermarks.

The beauty of this screenshot browser plugin is that it provides you with one, single image of the full page, from the top header to the bottom footer. The screenshots include 100% of the image both horizontally and vertically.

  1. To install, open Chrome and go to the GoFullPage Plugin page.
  2. Click the blue Add to Chrome button.
  3. This will add GoFullPage to your Chrome Extensions. The icon is a camera. You will find the icon for us in the top right or your browser bar. If you don’t see it, it might be in the Extensions Dropdown, which is the circle puzzle icon in Chrome (top right of browser).

To use this extension, navigate to a webpage and within your browser, click the GoFullPage camera icon. This will initiate a process window that reads, “Screen capture in progress…”

Once the processing is complete, a new tab will open in your browser. The new tab shows the screen capture and gives you tools in a black toolbar. The most relevant buttons are Download PDF (down arrow and PDF) and Download PNG (down arrow and rectangle).

Your file will download to your desktop where you may share, annotate, and edit to your heart’s delight!

Take a website screenshot with GoFullPage Google Chrome Extension
Take a website screenshot with GoFullPage Google Chrome Extension

Now, when someone asks you how to take a full-page screenshot of a website page, you’ll know just what to do.

Why do I take full-page website screenshots?

I use the GoFullPage Chrome extension several times a week for many design-related purposes.

I use website screenshots for:

  1. Capturing images for visual research. Saving images of webpages that I like and want to remember is an important practice in my design work. Saving an image, rather than just a URL link, is crucial becuase the web is always changing, so saving just the URL link does not guarantee the design element that I want to remember will stay visible.
  2. Sharing designs with clients. Especially if a design is still in the works and perhaps exists only on my local site or the functionality isn’t finished but the look and feel is, then a picture is a great way to share the design.
  3. Annotating a site. Converting a coded webpage into a PDF or image file allows me to annotate the design. I typically open the exported image file in Adobe Acrobat or Adobe Illustator to make notes, but GoFullPage has edit and annotation capabilities, too.
  4. Using a website as the contents for an image. This tool exports a high-resolution image of your website that you could use for an image in a blog like this on, or print publication.

I hope you find this tool useful.

I know there are dozens and dozens of other tools that take website screenshots, but this one has worked for me for years and years. It does everything I need, so why change? I’m not an affiliate or associated with the developers in any way, I’m just a user who finds this visual website capture tool immensely useful.

Do you have other ideas for why the GoFullPage Chrome extension is a great tool for designers?

Reply in the comments.

About the author

Kelly Barkhurst

Designer to Fullstack is my place to geek out and to share tech solutions from my day-to-day as a designer, programmer, and business owner (portfolio). I also write on Arts and Bricks, a parenting blog and decal shop that embraces my family’s love of Art and LEGO bricks!

Add comment

By Kelly Barkhurst

Recent Posts

Archives

Categories