Logo is Fuzzy
Nov 01, 2011
By
fiona wilson
Hi
Hope you can help. I am wanting to put a company logo into the presentations I am recording but after some trial and error (mostly error) the logo is always fuzzy and not crisp as it when viewed separately. I have experimented with different formats (jpg, png, bmp) and using different sizes (varying from 240 x 240 pixels down to 100 x 100) but the results are always the same ( I am using the original file and not a copy) . The logo looks blurry round the edges and looks like a bad screen shot.
Are there any optimal settings/formats I should use?
Many thanks.
Fee
30 Replies
Hi Fiona,
For the best look you need to create you logo to be no bigger than 244 px wide at 92 dpi. I have found that creating it as an .SWF give me the best quality.
In 360, importing a .swf doesn't seem to be an option. I am having the fuzzy logo issue also. Many thanks in advance for relevant advice!
-Wendy
Hi there Wendy!
What are the dimensions of your logo image file? We recommend a maximum width of 200 pixels and a maximum height of 220 pixels.
I'd love to test it out on my end, if you don't mind sharing the image file with me.
Hi Wendy,
Are you looking to insert a logo into the player or on the slide itself?
If you're inserting into the player we still recommend using an image that has a maximum width of 200 pixels and a maximum height of 220 pixels. Otherwise Presenter will scale it to fit, and that could cause blurriness.
Have you tried any image file types, or just an SWF file?
I am inserting the logo into the player. I have tried everything I can think of. Attached is the logo image file; you will see it is sized to the proper dimensions. Here is the url to see the fuzzy result: http://demosite.fpg.unc.edu/NCIC_Module_One_Prototype/story_html5.html
Hmm, that's definitely blurry. It looks more blurry in HTML5 than it does in Flash--in any case, both are more blurry than the original png.
Looks like you created this in Storyline 360, so I'll give it a test there and let you know what I find!
Hi Wendy!
It looks like your original was larger than the recommended dimensions, so that was causing it to look blurry in your published output.
I reduced the image size to a width of 200 pixels, and that seemed to help. Here's a link to the new published output.
Give the new png file I attached here a try, and let me know if you see an improvement!
Thumbs up Alyssa!
Thank you!!
I uploaded with the png file you provided, and it still looks fuzzy to me: http://demosite.fpg.unc.edu/NCIC_Module_One_Prototype/story_html5.html
What am I missing?
Thanks!
HI Wendy,
That looks like the same link as before - are you sure you updated the file and wrote over the previous one? You may also be seeing a cached copy of it. You could try testing the link in an incognito window or private browsing mode.
Yes, I am sure. Although it is the same link, the files were updated.
The published output link provided above results in a somewhat fuzzy logo also, so perhaps this is an issue we can all learn from... I'm having trouble keeping the pixel size down while exporting from Illustrator and I've tried just about everything I can think of. Why does the pixel size matter to Storyline when importing a vector file?
I tried outputting the same logo from Photoshop with the dimensions specified. It's still fuzzy. I'm having a hard time with this one...!
Hi Wendy, I'm sorry this is plaguing you! I think it would be really helpful if we could see your actual Presenter file. Would you be able to send us your Articulate Package? Here's how to do that.
After you create the Articulate Package, click here to send it to our Support Engineers. We'll have a look and let you know what we find!
This post was removed by the author
Thanks Wendy, and as an FYI looks like your email signature came through when you replied via email! No worries, this Peek video will show you how to remove it.
I see you're working with Cleo on the case and he shared some workarounds in addition to report the issue with your logo to our team. If we have any additional information to share about that possible bug, he'll be in touch via your case.
I simply removed the post. This was a Storyline 360 file, and I'm glad to hear that it was logged as a possible software bug. Regarding the workaround, we're still working to see if we can figure out a good way to move forward given the current limitations. Thanks!
we are experiencing the same thing. It makes no technical sense. I edited my graphic to the recommended scale and am seeing the same thing. the player is rendering the logo extremely fuzzy while the rest of the player is crystal clear.
Sorry this is plaguing you, Todd! Like Wendy mentioned, we're logging this as a possible software bug, and we'll let you know as soon as we get any updates. For now, you can try the workaround our Support team shared with Wendy:
Manually change the logo file in the published "Mobile" folder:
1) Publish your project file.
2) Look for "Mobile" folder in the published files.
3) Look for the .PNG file. Note that it will have a different filename but it will be the only .PNG file in the folder.
4) Replace the .PNG file with your original high resolution .PNG file. Simply rename it. See example here.
5) Upload to your published files to your server.
The temp fix worked. Thanks.
Happy to hear it, Todd. Thanks for coming back to let me know!
Please continue to fix a permanent fix though, because we are having to rig several things to get through issues.
Absolutely, Todd. We've got it reported to our team!
Here's a more permanent fix:
Set a custom logo using javascript. This method allows you to set a custom logo to the desired size and will sure looks good because it uses your logo file directly and doesn't process it like Storyline does. You can also place it pretty much where you want in the player if you're willing to play a bit with the code.
I really recommend this method since it allows you to have more control over your logo and that's what you want!
Here's Owen Holt's post that explains how to do it: Custom Logo
This discussion is closed. You can start a new discussion or contact Articulate Support.