Changing photo shape in Storyline 360 makes it blurry

Jun 13, 2019

I have a photo that is high quality as a rectangle, but when I use the Picture Shape option to change it to a circle, the quality degrades noticeably. The sizing is not changing here so I can't see why this would happen. I've tried this with several different photos and have the same result. I have the most up-to-date version of Storyline 360.

I've attached a screen capture of both the rectangle and circle version.

10 Replies
Katie Riggio

Hi, Jenna!

Thanks for sharing those images, and great call to also open a support case. I see my teammate, Gerald, asked a few clarifying questions to help us dig deeper. Be sure to let him know, and here is your case's unique upload link if you're able to share the .story file with him to test.

You're in excellent hands, and I'll also follow the case as it progresses!

Alexandros Anoyatis

In order to "transform" the rectangle into a circle shape, Storyline has to manipulate the picture again, resulting in an additional "layer" of compression.

There are a few solutions that work for me in most cases, yet all of them come with an accompanying caveat.

1) Use a higher DPI image source (there will still be compression but the resulting image will be crisper) 

Caveat : Hard to source

2) Create the circle shaped objects with an external tool (such as Photoshop or GIMP), then transfer that to Storyline

Caveat : Time consuming

3) Increase the Image Quality pct from the default 80% to 100% in your Publish Settings. You still won't avoid the re-compress, but the result will still be better than before.

Caveat : Larger Filesizes


Hope this helps,
Alex

Ren Gomez

Hi Jenna and Alexandros,

Great news! We just released Update 33 for Storyline 360Here are the details.

It includes a fix we made for images that were blurry when their shapes were changed, or when they were used as shape fills.

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.

Lauren Connelly

Hello Megan!

We're happy to help! I've just tested this on my end using a Rectangle Pentagon, and I didn't see the quality of the image change. It would be helpful to see your course report this to my team if there is a regression. Would you mind either attaching it to this discussion or uploading it privately in a support case?

Megan Daniele

Hi there Lauren, 

I so appreciate you looking into this! It's driving me nuts! I went ahead and uploaded a slide showing the issue... top row has the blurry images (circular shape with a wide border and shadow) while the bottom row has all shapes/effects removed. 

I look forward to your feedback! Thank you! MD

Leslie McKerchie

Hi Megan,

Thank you for sharing your file and allowing me a chance to take a look. I can see those objects are blurry in your sample file.

I'm curious how you're creating the circle objects. I duplicated your slide to replicate, and I am not getting the same behavior, but I'd like to understand your process.

I'll share my steps first, and I added slide 2 to the attached file:

  1. View Tab > Media Library > Select Images to add (yes, you can choose all 4 at once) > Insert (this retains quality)
  2. Select an image on slide to edit > Picture Tools Format > Picture Shape Circle
  3. Adjust Size to 125 x 125.
  4. Add Border and adjust line weight to 15.
  5. Repeat for additional images.
  6. Reposition on the slide where needed.