We know it sounds trivial. Yes, taking screenshots is easy. However, it's 10x easier to take a bad screenshot. And there's a 90% chance that you're probably taking them in a way that falls into at least 1 of the Don't's category.

So please please please follow these guidelines of Do's and Don't's because great screens = great tour, and a great tour = great engagement!


1. Use a screenshot extension tool.

Do not use cmd shift 4 on your Mac or any hot keys to capture the image by cropping it. We even added that as a Don't to make sure you don't forget :)

Some really good extensions that we like:

Additionally, make sure that when you take the screenshots you always use capture visible or capture full page...once again, never use anything that has you drag and crop the image in order to capture it because this will result in inconsistent jumps between screens when your viewers navigate your tour.

2. Use a high resolution device

We can't stress this enough...if you have a Macbook, use it!

Just because the screen is smaller, it does not correlate to image quality. Macbooks are built with retina display which means their pixel density is 2x that of your average monitor. For example, a 13 inch Macbook with retina has a resolution of 2560 × 1600 whereas your huge extended monitor is most likely only 1920 x 1080.

On the other hand, if you're one of those lucky ducks who has an iMac monitor, use that. Those resolutions can get up to 5120 x 2880 which is super high quality*.

*On that note, images tend to get heavy around that size. Make sure you're using an image compressor and converting PNGs to JPEGs to maximize the speed at which these images will load in your tour.

Here are a couple links to some free image compressors and PNG -> JPEG convertors






3. Edit some of the screen data to make it look nice (optional)

Your demo data can be a little messy at times. Luckily there are a few Chrome extensions that help with this.

Content Edit & Blur - great for blurring sensitive data

Site Editor - great for editing images

Tourial (duh again) - great for editing text (soon to be adding the rest of those editing capabilities too)


1. Don't use CMD + SHIFT + 4 or crop the screen in order to grab it

I know we're beating a dead horse here. But to reiterate, this will give you inconsistent screen transitions, and it will look choppy when users transition between screens.

Unless you're maestro at screen clipping and can guarantee perfect dimensions each time, use a chrome extension.

2. Don't zoom out before taking the screenshot

Zooming out to 90% or 80% because you want to show some data down below? Don't. Take your screenshots at 100% zoom from your browser.

If you want the whole page's data, take a full page screenshot, and then add scrolling effects in Tourial to navigate your user through the entire page. It'll make for an incredible experience too at the end of the day.

Did this answer your question?