Skip to main content
BRJR9295
BRJR9295
Participant
June 25, 2019
Question

Best Way to Export Icon w/ Text?

  • June 25, 2019
  • 2 replies
  • 677 views

Hi All,

I am designing a set of icons that contain the icon image, plus a text title underneath. These will be used for web. If I had it my way, the icon would be image-only with the title added during the web design -- but these are for work and the decision to include both image and text in the icon has already been made.

The smallest size this icon will be 40x40 px, (50x50 and 60x60 will be the other sizes). 40x40 is the size I have been designing all the icons to (going with the design small --> scale to large method). When I export this as a png, the text is extremely faint and does not show well. I've tried creating outlines/expanding the text, but again these icons have to be consistent with some previously created ones so the text can't look overly thicker.

I know that a png is a raster format, could this be affecting how the text displays? Would a SVG be the better option since it is lossless, or will this have no influence on how the text appears in a small icon.

Any and all help is appreciated! Outlines/expanding shapes, designing large then going to small, or exporting to a different format are the immediate things that come to mind.

Could this also have something to do with the Photos previewer on Windows? When I inserted the png below as an example, it shows up much clearer than when I've exported it and viewed it.

Cheers in advance. 

This topic has been closed for replies.

2 replies

Mike_Gondek10189183
Community Expert
Mike_Gondek10189183Community Expert
Community Expert
June 25, 2019

Yes SVG will help for those with high pixel monitors, try that. 

Viewers with lower pixel monitor you need to accept there is not much you can do except provide them a magnifying glass as your are  painting a picture on a pinhead at  40 x 40. Atleast if someone does a  a Command + (for most major browsers) to zoom in on a lower monitor they will be able to read your buttons, btu most people do not do that, and initial appearances of a website are important to brand perception.

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    June 25, 2019

    You really should start larger. Even if it is being done for web, export the images with a high dpi (the 300 setting is best) and make sure anti-aliasing is set to Type Optimized...

    You can then resize in Photoshop, or, if they're not waaay bigger than their final size, resize them via CSS on the site itself. That will give you the best results, especially on high DPI devices like iphones and Retina displays.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices