Logo Blurriness/Logos stretching?
Sep 28, 2017
I've done just about everything I can think of and I still cannot get this logo to look crisp on both player templates when both are viewed full screen!!! One player template is for a module sized at (4:3) and the other player template is for a module sized at (16:9). I've tried exporting the raw Adobe Illustrator version of the logo in multiple formats, with multiple different settings all of which produce a crisp image but when imported into the template, it does not retain quality (when viewed full screen). I've tried doing the same in Adobe Photoshop too. Locking the player at optimal size seems to work best, but unfortunately it is something we are trying our best to avoid as it is an inconvenience to our client.
I've noticed something and was hoping if it could be confirmed too. Attached is a screenshot (player templates sided by side) of the same template and same logo used in both modules. Both template players in the screenshots were locked at optimal size. The left is the 4:3 sized module and to the right a 16:9 sized module. Notice the white space to the left and right of the logos. The 16:9 module's logo looks much more crisp than the 4:3 module. My guess is that is due to storyline stretching the l0go more in the 4:3 module when the module is scaled to full screen view. It looks to me as if the logo is being stretched to fit a specific boundary within the space provided for logos. The space provided is different in the 16:9 player template than that in the 4:3. I'm not sure but is this true? Does this mean anything?
I'm not sure what else to do but if anyone could even play with the files and get the logo to look crisp in both, it would be greatly appreciated! Is anyone else experiencing logos appearing blurry in the template with no solution?! I've seen a few older threads and have not found a solution yet.
*Note*
The objective here is to have a crisp logo when both players are viewed full screen and have the player size in the browser settings set to 'scale player to fill browser window'.
P.S. I've attached the logo Adobe Illustrator file (.ai), the logo currently being used in both templates (.jpg), a sample 4:3 module with logo in template (.story), a sample 16:9 module with logo in template (.story), screenshots of the logo in both player templates when locked at optimal size (.png), and a side by side screenshot of both player templates (.jpg).
Thank you!
8 Replies
Did you try inserting your logo as a high-resolution png file? I think Storyline treats pngs differently than jpgs, and won't re-compress or re-size them.
Articulate support got back to me QUICKLY with a way to make the logo look ABSOLUTELY AMAZING. Follow this method:
I understand you need to set the Player to "Scale player to fill browser window". One workaround would be to replace the image in the published output with your original image:
1) Publish your project file.
2) Look for "Mobile" folder in the published files.
3) Look for the image file/s with your logo
4) Replace the image files with your original high-resolution file by renaming it.
Here's a Peek recording of the steps: https://360.articulate.com/review/content/4119010e-ec71-45ec-9331-597c742226db/review (<----I'm not sure if you can view this but I received this link)
Here's how the output looks with this change:
4 x 3 - https://s3.amazonaws.com/articulate-us/support-share/vchua/Case01141743/Mr.+Roboto's+Security+Awareness+Training+Sample+(4x)+-+Storyline+output+-+Copy/story.html (<----I'm not sure if you can view this but I received this link)
16 x 9- https://s3.amazonaws.com/articulate-us/support-share/vchua/Case01141743/Mr.+Roboto's+Security+Awareness+Training+Sample+(16x9)+-+Storyline+output+-+Copy/story_html5.html (<----I'm not sure if you can view this but I received this link)
Thank you so much Articulate Support!
I did unfortunately with no success. Check out the reply below. This worked amazingly well!
Hi Jorge and welcome to E-Learning Heroes :)
Thanks so much for popping back in to share your solution from the support team with the community. Much appreciated!
You're welcome! The solution worked fantastically!
Is this going to be something that the engineering team fixes in future releases? We shouldn't have to go through all of that extra work for every single client project post-publishing just to get the logo to look like it should. This wasn't an issue until the most recent release of Storyline 360.
Hi Ashley - Yes, this is the workaround that was shared with Jorge, but it has been reported to our team as a software bug.
I wanted to share some information on how we define bugs and how we tackle them when they occur.
This thread is attached to the report as well, so we will be able to update here when we can.
Hi Ashley and Jorge,
We released an update for Storyline 360 this AM, which fixed an issue where white lines could appear around slides and the logo might be blurry when a course scaled to fill the browser window.
Take a look at the details here to install the latest update.
Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly.
Note: This fix is available for Storyline 360 and will be included in the next update/release of Storyline 3 - date TBD. We'll share information here once that's available.
This discussion is closed. You can start a new discussion or contact Articulate Support.