I am taking screenshots with Snagit. My captured images are 1280 x 720. They look perfect. My storyline story is set to 1280 x 720. When I copy and paste the images into storyline they are blurry. I do not resize or adjust the images at all. I have tried saving the images and inserting them into storyline but they are still blurry. Can anyone tell me how to get these screenshots into storyline so they are clear?
Here is a demo of a screenshot at 1280x720 to show the difference and what you can do.
Ideally, you do not scale the image at all. There will always be some degradation, but when the image is scaled you'll lose image quality. I believe most browsers also have an image smoothing algorithm that may also contribute to some blur.
Default 16x9 is 720x504. I inserted the image in the default story size which scales it down. I published with Modern (which is responsive) and Classic (which can be locked to optimal size.
Thanks for your response. We need to use the modern player for the responsive capabilities. I do not scale or change the size of the image. We are using a story size of 1280 x 720. Therefore, my screen captures are 1280 x 720. To illustrate my problem, I captured a small image using Snagit. See attached files. The Snagit image is almost as good as the original. I clicked on edit then copy in Snagit, then pasted into PowerPoint. You can see the PowerPoint image is not as good, but still, not bad. Then I pasted it into Storyline. You can see the Storyline image is blurry. The green box as well as the text are just not nearly the quality that pasting into PowerPoint has. There must be an explanation for how to get good quality screenshots into Storyline, but I do not know what it is. I can't imagine what I am doing wrong - it is such a simple process. Please help - I can't create work with blurry images.
PowerPoint and Storyline are different products so how they work with and render the content is different.
I reached out to one of our developers to get a better understanding of what Storyline does with the image and will share what I get from them. You can try saving as different image formats
I appreciate your help with this as it is a business critical issue for us. We can't develop eLearning with blurry screens.
I have tried saving as different formats but it still comes into Storyline blurry.
I'm having a hard time understanding why this is so difficult. Should be as simple as copy an image and paste an image. Again, assuming resolution is the same and it is.
I look forward to your solution. I hope it is soon as we can't complete any projects until this issue is resolved. I am happy to do a one to one call with a developer if that will help.
On the surface it may seem simple because you are just copying and pasting. But there's a lot more to it as the software has to process to image to render it on the stage and it's processed when published to play through the player with the other content.
As it is now, the best image quality is by restricting how much you scale it up or down, which you can see in the demo.
I did present the issue to our developers and they are looking at it.
Essentially, it's still the same technical issue where scaling a bitmapped image up or down will create pixilation. That's inherent to non-vector imagery. At this point, there's no change to that. The recommendation is to do as I noted in the previous demos.
I create an exact mockup of the screen I need in Illustrator and export it at the exact size needed in Storyline as a PNG (no scaling or cropping needed in Storyline) and still get blurry results.
We'd be happy to take a look. I'd like you to share your project file with our support engineers to investigate what's happening with your permission. You can share it privately by uploading it here. It will be deleted when troubleshooting is complete.
Please your project file to investigate what's happening with your permission. You can share it publicly here or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.
18 Replies
When you save from SnagIt, what image type are you saving?
I saved them as png. I did that after they were blurry from the copy and paste.
Just to clarify my previous response. I did not save blurry images. :)
Here is a demo of a screenshot at 1280x720 to show the difference and what you can do.
Ideally, you do not scale the image at all. There will always be some degradation, but when the image is scaled you'll lose image quality. I believe most browsers also have an image smoothing algorithm that may also contribute to some blur.
Thanks for your response. We need to use the modern player for the responsive capabilities. I do not scale or change the size of the image. We are using a story size of 1280 x 720. Therefore, my screen captures are 1280 x 720. To illustrate my problem, I captured a small image using Snagit. See attached files. The Snagit image is almost as good as the original. I clicked on edit then copy in Snagit, then pasted into PowerPoint. You can see the PowerPoint image is not as good, but still, not bad. Then I pasted it into Storyline. You can see the Storyline image is blurry. The green box as well as the text are just not nearly the quality that pasting into PowerPoint has. There must be an explanation for how to get good quality screenshots into Storyline, but I do not know what it is. I can't imagine what I am doing wrong - it is such a simple process. Please help - I can't create work with blurry images.
PowerPoint and Storyline are different products so how they work with and render the content is different.
I reached out to one of our developers to get a better understanding of what Storyline does with the image and will share what I get from them. You can try saving as different image formats
Following! I have this problem as well.
I appreciate your help with this as it is a business critical issue for us. We can't develop eLearning with blurry screens.
I have tried saving as different formats but it still comes into Storyline blurry.
I'm having a hard time understanding why this is so difficult. Should be as simple as copy an image and paste an image. Again, assuming resolution is the same and it is.
I look forward to your solution. I hope it is soon as we can't complete any projects until this issue is resolved. I am happy to do a one to one call with a developer if that will help.
On the surface it may seem simple because you are just copying and pasting. But there's a lot more to it as the software has to process to image to render it on the stage and it's processed when published to play through the player with the other content.
As it is now, the best image quality is by restricting how much you scale it up or down, which you can see in the demo.
I did present the issue to our developers and they are looking at it.
I am using a "Snip & Sketch" microsoft app and it seems to do better than the "Snipping" tool that I was using.
The snipping tool will give slightly better results. It's what I've found, too.
Hello, I am having the same issue and was wondering if any progress has been made with the developer?
Essentially, it's still the same technical issue where scaling a bitmapped image up or down will create pixilation. That's inherent to non-vector imagery. At this point, there's no change to that. The recommendation is to do as I noted in the previous demos.
I create an exact mockup of the screen I need in Illustrator and export it at the exact size needed in Storyline as a PNG (no scaling or cropping needed in Storyline) and still get blurry results.
What is your solution to my process?
Hi Maura,
We'd be happy to take a look. I'd like you to share your project file with our support engineers to investigate what's happening with your permission. You can share it privately by uploading it here. It will be deleted when troubleshooting is complete.
Please share if you get a solution. No one has been able to help me resolve this issue.
Hi Randy,
I'd be happy to take a look.
Please your project file to investigate what's happening with your permission. You can share it publicly here or send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.
Hi, everyone.
I have great news to share!
We just released another update for Storyline 360. In Update 63, we’ve included important fixes and new features.
One of the fixes we’ve included is:
We improved how Storyline 360 handles images during import and in the published output, resulting in crisper images.
To take advantage of this update, launch the Articulate 360 desktop app on your computer and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.
Please let us know if you have any questions by reaching out to our Support Engineers directly.