Forum Discussion

RyanMartin's avatar
RyanMartin
Community Member
4 years ago

Ugly Grey Line With Picture From File

Hi,

I keep getting this grey 'border' around images I bring in. Many of the images I use have white backgrounds, and as you can see from the attached photo, Storyline gives them this grey border?

Any workaround? Been going on for years now.

Ryan

  • JoeFrancis's avatar
    JoeFrancis
    Community Member

    If you open the image in a tool like Photoshop and zoom way in, is the line present?

  • RyanMartin's avatar
    RyanMartin
    Community Member

    *Bump*

    I can't be the only one seeing a border around their images ... both jpg's and png's...

    ¯\_(ツ)_/¯

  • JoeFrancis's avatar
    JoeFrancis
    Community Member

    Okay, what happens if you have the image open in a tool like Photoshop, copy it, and paste directly into Storyline? Is the line still present?

  • Hello, Grupo Asís.

    I'm happy to help you troubleshoot! Do you have a .story file or a screenshot you can share so we can see what's going on with your images? 

    • NicholasBARKER-'s avatar
      NicholasBARKER-
      Community Member

      Hello, Has this been resolved yet? It's a project stopper. It seriously is AWFUL :-O

  • Hi, Nicholas.

    Thank you for reaching out!

    It would be helpful to see a screenshot of the gray line around your pictures so we can investigate. Can you share the .story file or an image? 

  • You can remove the gray border by using Storyline to crop the image on all sides. If the image is too close to the edge to crop, I use Photoshop to enlarge the canvas size so that I can use Storyline to crop it back to its original size.

    This is a really frustrating and time consuming workaround! I'm attaching a .story showing the gray line (on both a .jpg and .png image) and then the version that is "fixed" with cropping. 

  • your link don't work, but I have found your source image on wiki with google image search

    and now some tests
     - source jpg without any grey border -> to png (2206x1613 Pixel)
     - create a new course with slide size 1366x768
     - imported both image (jpg + png)
     - result: grey borders

    next try
     - resized the png "2206x1613 Pixel" to "1366x768 Pixel" (external in Photoshop)
     - imported both images (jpg + png)
     - result: no grey borders

    UPDATE:
     - resize the png "2206x1613 Pixel" to "2048x1497 Pixel" (the max image size of storyline)
     - imported (png)
     - result: no grey borders


    https://360.articulate.com/review/content/07f53bc9-b354-4b47-b047-63c893bd955d/review

    the problem is the internal scaling of storyline - independent of the image format

    perhaps you should open a support case and send articulate the example .story and a link to this thread

  • TerrySimmons's avatar
    TerrySimmons
    Community Member

    Same issue with grey outline around pngs I brought into my storyline piece. The images have rounded shapes in the background, so there was no way they could be cropped. My work around was to bring the images into powerpoint (no problem with grey outlines here), each on its own slide. Save the ppt and import it into storyline. Once imported they are available in storyview in a new section of slides. Copy the image and paste into the slide where you want it. Then remember to delete the storyview with the powerpoint slides on. The quality isn't quite as good but it's a way round the problem.

    Hope this helps anyone who is still struggling with this problem.

    • StevenBenassi's avatar
      StevenBenassi
      Staff

      Hi Terry!

      Thank you for reaching out and sharing the workaround steps you took to mitigate this issue! I'm sure other users discovering this thread will find the information very useful!

      Have a great rest of your week!

  • the problem with the images in this case was

    • the width of the imported images was 2206 px
    • the max image size width is 2048 px
    • so storyline resize while import the images from 2206 px to 2048 px
    • the import scaler is not very high quality

    result:

    • grey lines appears !!!


    solution:

    • use a scaler (to max width/height) before you import, so the import scaler will not be used