Forum Discussion
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
- JoeFrancisCommunity Member
If you open the image in a tool like Photoshop and zoom way in, is the line present?
- RyanMartinCommunity Member
Nope. This is generated by Storyline.
- RyanMartinCommunity Member
*Bump*
I can't be the only one seeing a border around their images ... both jpg's and png's...¯\_(ツ)_/¯
- GrupoAssBiomediCommunity Member
Me too, it is awful.
- JoeFrancisCommunity 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?
- MariaCSStaff
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-Community Member
Hello, Has this been resolved yet? It's a project stopper. It seriously is AWFUL :-O
- MariaCSStaff
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?
- KatieWattenbargCommunity Member
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.
- Jürgen_Schoene_Community Member
which format is the original image before importing - jpg, png, png with alpha?
- KatieWattenbargCommunity Member
The original was .jpg. Source: https://commons.wikimedia.org/wiki/File:2023
- Jürgen_Schoene_Community Member
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 bordersUPDATE:
- 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/reviewthe 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
- TerrySimmonsCommunity 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.
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!
- Jürgen_Schoene_Community Member
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