Blurry Icons

newbie-question

#1

I am new to Axure and am trying to make a website prototype - I discovered the new icons available for us to use however when I press preview the icons go blurry. On the actual program I don’t have this issue. (I’ve put the icons relatively small).

Thank you for your time and hope someone gets back to me.


#2

Hi there,

That’s really odd–we haven’t heard reports of blurry icons from the default “Icons” widget library. If you have a moment, I’d like to collect some more information about what you’re seeing:

  1. First, can you attach a full screenshot comparing the blurry icons you see in the browser alongside what you see in the full window of Axure RP?

  2. Which web browser are you using? And do you see clearer icons when you preview in another web browser (e.g. Chrome, Firefox)? You can change the preferred browser for Preview, at “Publish > Preview Options > Browser”.

  3. Are the same icons blurry if you view the locally generated HTML (“Publish > Generate HTML Files”) or view the prototype on Axure Share (“Publish > Publish to Axure Share”)?

  4. Are you seeing this in even a fresh new file (“File > New”) when you preview simple icons on the canvas?

  5. Can you tell if the blurriness is affecting most/all icons in the “Icons” library? Or only a specific few icon widgets in that library?

  6. You mention that you’ve resized the icons to be relatively small. Can you elaborate on that? For example, do the icons start off rendering clearly before they’re resized?

  7. Which build of Axure RP 8 are you running? You can find out the build information in the RP menu “Help > About Axure RP”–the numbers that show right beside the product name will indicate the build (e.g. 8.0.0.3323). If you’re using a build older than 3323, please update at www.axure.com/update and check how the icons look from there.

8 Which version of Windows OS or Mac OS are you running?

Thank you!


#3


I am currently using Chrome, however in the screen shot the first browser is Internet Explorer the second is Chrome and the third is the Axure application.

The icons are still blurry if I view the locally generated HTML.

Even with a new file with just an icon I still see it blurry no matter what the size. Even if I do or don’t resize it when its initially placed.

I’ve tested it out with quite afew icons and it seems to do that with all of them.

I am using Axure RP 8.0.0.3323 so there is no change in icon status. I am running windows 10 on macbook pro retina.

However, I had a similar issue when I imported images with a transparent background in another project and ran it through my iphone.

Also thanks for getting back to me.


#4

Hmm, it looks as if your Windows machine has a custom scaling factor that’s set to something different from the default 100%. Would you be able to check into that further? I believe searching for “Display Settings” on your Windows machine ought to pull up the relevant settings. Here’s a screenshot:

Can you try resetting any custom scaling changes back to the default 100%? And then check the clarity of the icons afterward? Let me know what you find or if I can assist further on that part–feel free to send corresponding screenshots as well. Thank you!


#5

Okay so I moved over to my windows 10 laptop just in case mac retina was the issues (which by the way I meant to say I was on windows 8 on my mac retina sorry for the wrong information). Even with the change of laptops I did not see a difference and I also put the scaling down to 100% and it’s still the same I won’t be adding screen shots as there is nothing new on the matter. Anything else that could possibly be causing this? Thanks again.


#6

Very odd–I’m unable to reproduce this while the scaling is at 100%, but I did see the blurriness when the system display scaling was bumped up. When you mention this part:

…and I also put the scaling down to 100% and it’s still the same…

Can I assume that the scaling was something different from 100% when you checked? And then you changed it down to 100%? Afterward, were you prompted to sign out of your user account and log back in? Please let me know. Here’s a screenshot showing how the prompt would’ve shown up:

At this point, I’m curious to know whether signing out and/or rebooting your computer helps–after having changed the scaling. Let me know what you find after the reboot! If it still doesn’t help, it may be an informative next step to compare what you see when you create a fresh new user profile on your machine.


#7

I did sign out, and as I said I tried on a new computer as well so I don’t think creating a new user profile would make a difference. (:


#8

Ah, I’m seeing another way to reproduce this–when I increase the zoom on the browser itself. Would you be able to check the zoom within the settings of both Chrome and IE? And try setting it to 100% there? Trying to keep scaling at 100% through and through would be the best way to rule this out. Let me know!


#9


So I have put the scaling down on google chrome on the windows laptop and it is not as blurry as it was initially. There is still some blurring effect but its not as noticeable. Top is browser and bottom is Axure file.


#10

Apologies for the delay! It sounds like the zoom levels in your browsers are now set to 100%–is that correct? Is there any point that the icons become clear and crisp? For example, are you having to scale even smaller than 100%?


#11

Hello, sorry for the late response I have been feeling under the weather.

No the icons are blurry no matter what the browser or icon size and yes it is set to 100%.


#12

Hi PewMewMew,

(I hope you’re feeling better!)

It sounds like the icons are still blurry after setting your Windows display and your browser zoom levels to 100%–is that right? Would you happen to have any other display settings other than the display default? For example, what is set as the resolution of your Windows 10 display (available through “Advanced display settings”)? Here’s an example of what mine looks like:

Also, are you, by any chance, using an external monitor for either your MacBook Pro Retina or your Windows 10 computer? If so, are there any altered display settings on the external display? When using the MacBook Pro Retina computer, do you also see the same blurry icons on the Mac OS compared to the Windows 8 OS?


#13

Hello Jane,

The resolution is at its default display and I am not using any other monitor other than the laptop screen. As far as original resolutions I don’t believe there is anything out of the ordinary.


#14

Hi PewMewMew,

Hmm, this is really odd. I haven’t been able to reproduce the same blurry effect unless my Windows display and/or browser zoom levels were set to anything other than 100%. And to confirm, it sounds like both your Windows and Mac display initially had a zoom level other than 100%, along with your browsers, when you and Alex started troubleshooting–is that right? Were there any other settings you changed with the display settings either on your computer or browsers around the same time you changed the zoom level on your computer and browsers?

Let’s try this. Please re-download Axure RP 8 from the below link:

https://www.axure.com/update

Once that’s done, take a screenshot of the icons (with their default dragged-out size) in Axure RP vs. your browser if the icons are still blurry. Please also double-check that your browser and Windows display settings are at the default, with no altered zoom levels or resolution. This will allow me to advise on the next best steps to take. TY!


#15

I foudn this thread because I have the same issue. Browser is at default 100% zoom, I have the latest version of Axure.


#16

Hi easyishard,

I’d like to ask you some troubleshooting questions (similar to Alex’s initial post):

  1. Would you be able to attach a screenshot comparing the blurry icons you’re seeing in the browser with what you’re seeing in Axure RP?

  2. What web browser are you using? Does viewing your prototype in other web browsers make any difference? You can change the preferred browser for Preview by going to “Publish > Preview Options > Browser”.

  3. Do the icons still appear blurry if you view the locally generated HTML (“Publish > Generate HTML Files”) or view the prototype on Axure Share (“Publish > Publish to Axure Share”)?

  4. Are you seeing the issue with blurriness when previewing a new file (“File > New”) with the same icons on the canvas?

  5. Do you know if the blurriness is affecting most/all of the icons in the “Icons” library, or only a specific few icon widgets in that library?

  6. Which version of Windows OS or Mac OS are you running?

Feel free to also send us an email at support@axure.com with the answers to these questions if you’d prefer to troubleshoot via that channel. In the meantime, please let me know if you have any questions or concerns. Thank you!


#17

I also have problems with all icons being blurry when previewing. Only the icons are blurry. Browser is at default 100% zoom, I have the latest version of Axure.

1 - I don’t know how to attach it.

2 - Any/all browser(s).

3 - Yes.

4 - It is not blurry in RP just when you preview.

5 - All

6 - Windows 10


#18

Hi there, I’m having the same problem. I tried on different screens and browsers and still see the icons blurry.

Any of you find a solution to this problem?


#19

Hi metakitrina,

Would you happen to be using a Mac computer with Retina display or another high-resolution screen? We were able to reproduce the blurriness in that setup environment. If that doesn’t resemble your setup though, what can help is to dig into your system/display settings (e.g. DPI) or browser zoom and see where changes may have occurred.


#20

Hello,

I have the same problem with the blurry icons, they are reproduced blurry on preview in google chrome.

They are also reproduced blurry on the axure share app on my oneplus 3t. I have a full HD disply and the icons are fine in axure itself, just blurry on preview.

Please help