I’m trying to create a web icon using expression design.
Its 45×45 pixels in size, and I’ve set the PPI to 96, exporting to .PNG with Antialias & Transparency.
It doesn’t look crisp when I look at it in my page, and it looks pretty blurry when viewing it on my mobile.
I’ve turned on pixel preview, and when I zoom in I can see that on straight lines there is a row of pixels shaded between the two (rather than pixels being either on or off) which seems to be the cause of the problem
I have enabled the following options:
- Snap to Pixels
- Snap to Points
- Snap to Guides
Here is the exported icon:
It’s pretty simple, but if you look at the edges of the pound symbol, they are fuzzy; more so on a mobile device.
Is there anything else I should be doing in order to get a crisp looking icon?
Is your page rendering it at exactly 45×45? If not, the browser is recalculating the pixels and this will cause the blurryness.
I’ve never used Expression myself, but generally when downsizing images, on all programs there will be blurriness as the program has to recalculate the pixels. If you have to resize an image, a tip is to always do it by half, if not quarter. This makes the recalculation easier for the program and gives crisper results.
Also, the PPI is not important for screen, as it will always render the exact number of pixels, per the image dimensions, regardless the pixel per inch (PPI) density you set it to.