Forum Discussion
Storyline low screenshot quality
Hello, I'm having some difficulty uploading screenshots of a website as a background for a slide. I have downloaded various screenshot apps and zoomed in but nothing seems to improve the quality. Is there any advice out there on improving this? Is there a specific aspect ratio that screenshots should follow?
Hello,
The rule of thumb with zooming in on images is to capture them at a higher resolution and then they will stand up to zooming in on them. An image that is at a lower resolution will quickly deteriorate in quality once it starts being blown up past its original size. (Vector graphics being the exception, which a screen capture would not be vector.)
You may try looking at the settings of your screen capture software and set the resolution and screen size (raster) higher. For example, if your Storyline project is 1280 x 720 pixels and you need to zoom in on a website screenshot and display it on part of your Storyline slide, try to capture the website image at a higher size (such as 1920 x 1080 or higher) and see if you can set the resolution to a higher rate (such as 300 pixels).
Again, capturing higher than you need will allow you to blow up an image and retain quality. Capturing at the same size or lower and then blowing up an image will decrease quality.
13 Replies
Hello,
The rule of thumb with zooming in on images is to capture them at a higher resolution and then they will stand up to zooming in on them. An image that is at a lower resolution will quickly deteriorate in quality once it starts being blown up past its original size. (Vector graphics being the exception, which a screen capture would not be vector.)
You may try looking at the settings of your screen capture software and set the resolution and screen size (raster) higher. For example, if your Storyline project is 1280 x 720 pixels and you need to zoom in on a website screenshot and display it on part of your Storyline slide, try to capture the website image at a higher size (such as 1920 x 1080 or higher) and see if you can set the resolution to a higher rate (such as 300 pixels).
Again, capturing higher than you need will allow you to blow up an image and retain quality. Capturing at the same size or lower and then blowing up an image will decrease quality.
My display resolution is at the highest, 2560 x 1440. I can't seem to configure the capture settings for screenshots on Windows nor Screenspresso. Do you have any recommendations for screen capture softwares that allow you to increase the quality?
You might try Snagit from Techsmith. I have that through work and it looks like you can alter the screen size (raster) and also alter the resolution (dots per inch, or dpi).
hello there-I'm having the same problem with bringing snagit screenshot images into my SL slide size 1280 x 720. My external monitor and my laptop displays are both the same as the highest resolution they go is 1920 x 1080. I'm importing my picture size from snagit without resizing, but since my slide size is smaller, it's reduced about 85%. my SnagIt is set to 100% with 96 dpi (because copilot told me that increasing the dpi only mattered if you were printing). I compared both 125% zoom and 150% zoom, and of course I could see the menu's text much clearer at 150%, when I dropped into SL 1280x720, the image was grossly pixelated. less pixelated at 125% zoom but not as clearly readable. I can't split the images. I'm trying to use these images in an eLearning course that is training on an interface. How can I get the quality of the capture without the pixelation brought into SL? I also followed the directions from a different post: https://articulate.com/support/article/Storyline-360-Best-Practices-for-High-Quality-Images-and-Videos
Hi CAP_Oldcastle,
Thanks for sharing all those details, and thanks for also checking the Articulate article on high-quality images, that helps narrow things down.
What you’re seeing is expected behavior when screenshots are captured at a resolution that’s close to (or lower than) the Storyline slide size and then scaled down and back up. Even though your displays are set to 1920×1080, once a screenshot is reduced to fit a 1280×720 slide and then zoomed or displayed larger on-screen, the image can start to look pixelated, especially for UI text.
A couple of things that can help here:
- Avoid browser or OS zoom during capture (125% or 150%). While it can make text look clearer on-screen, it doesn’t add real pixel data and can actually reduce clarity once the image is resized in Storyline.
- Capture at native resolution with no zoom, then crop tightly to the area you need. Keeping the capture as close to 1:1 as possible with how it will appear on the slide usually produces the best results.
The key factor here is pixel dimensions and how much scaling happens once the image is on the slide.
Hope this helps clarify what’s happening and gives you a couple of focused things to try.
I really appreciate your reply and information on zoom. thank you.
Everywhere I searched for answers stated that I needed to use a capture resolution much greater than my Storyline project size. I had many recommendations to get a newer monitor that would be a higher resolution for that reason. You're saying my monitor should be at a resolution as close to my slide size, not larger, correct?
Is it still then recommended to lock the player size? appreciate your help.The general advice is to get your image at the highest resolution that you can, because it's a reductive process after that point. Your original file is the best in terms of quality that you're ever going to have. Audio works the same way. You can only take away details, never add them.
Always consider the end first; what will it need to look like on your audience's screens? Let's say that they're running 1920x1080, same as you. If that's the case, then you don't need to worry about adjusting for them. This also means that you don't need to get a monitor for the sake of getting better quality images (you almost never need to do that nowadays, anyway).
The easier you can make it on yourself, the better. If your monitors are set (in Windows, I assume) to 100%, then you're seeing the image at full resolution, not manipulated by the OS. Doing this is a best practice when using SL.
When you import an image in SL, it'll be resized to fit the resolution of your story files. That means that your image captured at 1920x1080 will be reduced to fit. If you then have to zoom in on the converted image, you're zooming in on a smaller resolution file, and so it'll lose details again.
So the general advice is keep your OS zoom at 100%, capture your images at the highest resolution you can, and avoid zooming in on images that have text in them. Hope this helps.
so my conclusion is that my boss and teammates have higher resolution monitors than I have, and that when they view what I'm capturing in snagit of a browser based GUI, they see more blurry text, than perhaps what I see on my lower resolution monitor which was used for the capture. I've heard them both complain about the images that their businesses provide being lower quality, but we don't know what hardware our audience is using to view our eLearning.
here's what it looks like at 300dpi, 100%, monitor 1920x1080, image not resized, scaled to fit by SL slide 1280x720 Image Quality test
The problem with screenshots is they only really work at the resolution they are taken. This is because you are taking pictures of pixels, and when they move onto a different resolution screen there is either not enough pixels to display them or too many.
There as some things you can do:
Use pngs these are much better for screenshots that jpgs
Display at the resolution taken so do not enlarge or dercrease the sizeFor a background of a slide, you know what the resolution is so capture it at that size
all images are png (I never use jpg) and my screenshots were not resized before bringing into SL. Snagit=300dpi, 100%, monitor display maxed @1920x1080. The snagit capture was not resized; SL has made it fit in my 1280x720 slide in the example I linked, and therefore, you can see it's harder to read inside the course than what I captured. I've tried every suggestion for days and can't seem to improve the readability of the text in the screenshot of the GUI for my boss' liking.
Hello CAP_Oldcastle,
I see you've opened a case and that you're working with my colleague Luiza. Great to know that she's taking a closer look at your Storyline project file. You're in excellent hands! We'll continue the conversation over in your case, so everything is in one spot!
A 4K monitor and 100% Scale in (right click on desktop) Display Settings makes you a screen shot super hero!
thank you. the issue at hand in original post=I don't have 4K monitor and my resolution is maxed to 1920 x 1080. all images are png (I never use jpg) and all images are @ 100%
