Record
How to upload your ScreenShots/Media into your Tour(s)
There are several different ways to upload your Media into Tourial. Check out a quick overview of each option and when to utilize them.
Option 1: Workflow Capture: Utilize this option when you have to show a series of steps or want to show off a flow/process while automatically capturing each click, scroll, or drag-and-drop motion.
Option 2: Manual Capture: Utilize this when you want to take a single screen shot OR you need to Edit text on a screen before uploading it- utilizing the "edit mode". You can also take a scrolling screenshot with manual capture to capture page elements that are below the fold of the page (please note that scrolling captures may fail dependent on the way your product is built. When a scrolling capture is successful, you will see the screen panning down as it captures the full web page - if you do not see this behavior, it is likely your app cannot be captured via scrolling capture.)
Option 3: Video Capture: Utilize this when you want to capture longer or complicated workflows in your product. Video capture is also helpful when showing drag and drop functionality, data loading in, or processing times like when showing AI features
Option 1: Upload from your computer
Note: When manually uploading media from your computer, the recommended aspect ratio for both image and video uploads is 16:9. The Tourial app will not block uploads that are not 16:9, but note that images may be cut off at non-recommended aspect ratios.
Option 2: Import from another Tour
How Tourial responds to screen size
Tourials are optimized to work across multiple screen sizes while keeping your tour content fully accessible to potential buyers.
Screenshots will resize to fit within smaller screens so that the tour doesn’t overflow, but the tools on the screen will remain a fixed size to keep them fully legible and interactive.
Best Practices: A Few Do's and Don'ts
DO's
1. Use the Tourial Chrome Extension for Capturing Screenshots & Videos in Media Demos
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 :)
Click this to install the Tourial Chrome Extension
Using the Tourial Extension, you will never need to resize or crop your media. When building media demos, you'll want your screenshots and videos to all be at a 16:9 aspect ratio and the extension will automatically resize your browser when capturing so that all media is the perfect fit for your demos.
2. Use a High Fidelity Device
When talking about display quality, most folks are familiar with the terms HD, UHD, 4k, etc. Each of those terms refer to the device's resolution, but when making media demos resolution isn't the most important number. Pixels Per Inch, or PPI is the most important metric when capturing your product for media demos. We recommend doing media capture from a device with a minimum ppi of 200. If you're unsure of your device's PPI, use this online calculator to determine your device's PPI by inputting the resolution and dimensions of your screen.
Your average Macbook has a retina display, which is Apple's way of saying "very high PPI", and if you've got one of those, we recommend you build on that.
Note that we recommend against capturing media from external monitors. External monitors are typically larger so even if they're a top of the line 4k monitor, the PPI can be relatively small. You will notice "graininess" when capturing on relatively low PPI monitors.
Doing some manual uploads of high PPI media? Tours can get "heavy" when uploading extremely high fidelity files, and if you start to notice that, 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)
DON'T's
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.
Last updated
Was this helpful?