Image size/location changes in preview

Apr 06, 2016

Hi everyone,

I have a slide that looks fine as I'm working on it, but when I try to preview, one of the character images is shifted to the left and distorted.

I thought it might be because I have hidden images on that page (two characters on the top left; the learner chooses 1 at the beginning of the scene, and only that one is shown). But the problem still appears regardless of whether one, both, or none of those images are shown. 

I'm working in Storyline 2 and I have attached screenshots of what the slide is supposed to look like and what it looks like in preview.

21 Replies
Leslie McKerchie

Hi Adrienne!

Please be sure you are utilizing 96 DPI.

Articulate Storyline requires Microsoft Windows to be configured with 96 DPI (dots per inch). If Windows is using a different DPI setting, you may experience erratic behavior, such as:
*  Elements of the application are misplaced or distorted.
*  Objects are misplaced or distorted when previewed or published.
*  Zoomed images don't work as expected.
*  Font sizes are incorrect after using the translation features.
Katie Maxter

I am having a similar issue...I am adding a line (i.e. border) to pictures by formatting them. While editing, the pictures and their bordering lines display perfectly. However, when previewed or published, the line displays slightly offset from the picture, making it appear that there is a gap between the picture and the border line, and/or that the picture is overlapping the line.  I am working in Storyline 2, update 8:1605.515, although I have had the same issue both before and after installing that latest update.  And I am (and have been) using 96dpi.  Screenshots attached:

Ashley Terwilliger-Pollard

Hi Katie, 

Are you able to share this one slide so that we could take a look at what you've got set up? As you'll see earlier in this thread, our Support engineers weren't able to replicate it on a new file, so it may have been an element of corruption within this particular .story file. You can review the information here to prevent future corruption in your project files. 

Katie Maxter

Hi Ashley,

Sorry for the late reply, I have been traveling for work lately and away from my computer. But yes, I can provide the slide to you (it is attached as a story file).  This problem is presenting on this and other similar slides throughout my original story file. Note that:

  • It is only occurring on inserted photos/images (note that on the attached slide, the rectangle shape with a border line looks just fine--it's just the pictures that don't).
  • It is only occurring with photos/images that are rectangular in shape--elsewhere in my original story file, I inserted photos and changed their shape to a rounded rectangle, then added a border--no problems at all.
  • I have rebuilt the slide--still having the problem.
  • I have copied and pasted the slide into a new story file--still having the problem.
  • I have imported the slide into a new story file--still having the problem.
  • Regarding the info you suggested about preventing future corruption--thanks, but I am already following those recommendations.
Ashley Terwilliger-Pollard

No problem Katie - and first an FYI that responding via email includes your signature here. So you're welcome to edit the post and remove that information if you'd like.

Also, I took a look at your file and saw the same thing you shared on the images - but did not replicate it when inserting a new image into your file and applying the border to match what you had. As I was looking at your slide I began removing a few elements to help me have a clearer field of which ones to look at - and once I was about half way through removing them, the issue no longer appeared. With that type of behavior it would lead me to believe there is an issue in one or more of the images that is causing some general oddities on the slide - I'd be curious to know if you see the same issue in a brand new file? You'd want to look at adding in the images one at a time, and previewing until you see the issue again and then you'll know which one cause the behavior. Are you also inserting these images from a saved/local location on your computer?

Katie Maxter

Hi again--

Thanks for looking at the file. I tried some of the same steps you mentioned, and unfortunately I am still having the same issue with the gap between the image and the outline. I tried:

  • Deleting each image to see if one of them was causing an issue
  • Deleting everything on the slide except the images
  • Removing things from the slide to see if there was a "magic point" where enough things (or the right things) were removed to have the issue stop--I still had gaps.
  • Inserting a new image and adding the same outline (the new image showed up with the gap as well)
  • Changing the images from .png to .jpg
  • Inserting the same images into a new file (still had the gap)
  • Deleting the images and re-inserting them
  • removing the outline from the images and reapplying it

I'm not really sure what else to try? Oh, and yes, all of these inserted images are being inserted from a local location on my computer.


Katie Maxter

I'm on update 8:1605.515; I can get it updated to version 9.

I'll attach a couple of the image files, plus another one that is not on the current slide but that I added in and had the same border issue with.

To apply the border, I am:

  • Insert tab to insert picture
  • Right click on picture, select format picture
  • In the format picture pop up menuy, Line color tab--solid line radio button--color drop down arrow to choose color
  • close format picture box using "close" button at bottom right corner
Ashley Terwilliger-Pollard

Hi Katie,

Thanks for your patience as I took a look at your file and images again. I tested it a number of different times and different way including as you described here. I saw what you described some of the times - but other times not. It seems totally random. Often I was able to resolve the issue by changing the line type associated with the image border from flat to rounded or square - without a noticeable different in the line set up either. I would suggest playing with that as you're editing your files and then I would lock the object on the timeline so that you don't turn it back by mistake.

I'm going to share this behavior with our QA team, but since it seems fairly random it may be harder to pin down... if you're able to discern any pattern to when it does happen please let me know.

Also, this still occurred on Update 9 - but it's always recommended and advised to be on the latest update of Storyline. 

Katie Maxter

Yeah this has been a tricky one to figure out! :) It does seem kind of random to me too--at first I thought it may only be happening with images that I had edited in a separate program before inserting them, but that does not seem to be the case. If I do figure out any pattern or common thread I'll post it here.  Thanks for the idea of changing the line type--I'll play with that and hopefully it'll do the trick. I may also play with using the image as the fill in a rectangle shape, to see if that works any better.

Thanks for all your time and effort in working to get this sorted out, and for sharing it with the QA team!

Katie Maxter

Hey, just wanted to give an update...I played around with the setting for the image borders, changing things like line type, end type, etc. The only thing that ended up working for me was changing the line size to 2px--even then there is still a very small gap, but it's small enough that no one will notice it unless they happen to be looking with a critical eye like I am :) So anyways, that is workable for now!

This discussion is closed. You can start a new discussion or contact Articulate Support.