Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm trying to create a web icon using expression design.

Its 45x45 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:

enter image description here

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?

share|improve this question
    
Any rounded corners will never make a pixel precise rendering. –  Adam Schuld Jul 15 '13 at 21:00
2  
@Dominic For retina you should double the pixel dimensions, not the ppi. For example 500x400px @ 72ppi is the same size as 500x400px at @ 150ppi. For retina you'd need 1000x800px, as it has sub-pixel display. PPI is always controlled by the actual screen. Think a HD 42 inch vs a HD 23 inch - same pixels, different real-world size, or 'pixels per inch'. If you got really close and counted the actual display pixels on the screen you'd get the real PPI, which obviously varies per device. –  John Jul 15 '13 at 21:33
    
@Dominic I am displaying it in the formatted size.. i.e. 45px x 45px. Also, it might look fine above, but I want it to look razor sharp, not just fine :) –  David Masters Jul 16 '13 at 8:08
    
@John that's interesting. Are you saying that in order to get it to display crisp on a retina, I should double its actual size, then display it by scaling it down by half? –  David Masters Jul 16 '13 at 8:10
    
By the way - I think what this guy talks about in this video is basically my problem....in order to get it looking crisp I need to manually adjust some of the anti-aliasing methodandcraft.com/videos/pixel-hinting-vectors-in-photoshop –  David Masters Jul 16 '13 at 8:11
show 1 more comment

2 Answers

up vote 1 down vote accepted

Is your page rendering it at exactly 45x45? 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.

share|improve this answer
    
I've accepted this answer, but for your comment about doubling the size. I've tested it out using ** @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) ** and it works great. –  David Masters Jul 16 '13 at 12:31
    
Unfortunately, mobile devices often ignore settings and rescale images. They do this for various reasons, so your logo is probably being stretched or squashed using a fast algorithm on the device (instead of a quality oriented algorithm). Be aware that -webkit prefixed items are not universally supported. –  horatio Jul 16 '13 at 16:40
add comment

A good way to guarantee your icons look great on all devices and at least has worked well for me is using SVG and icon fonts. You can use icomoon to create your own icon font and import your own svg icons, and then call them in your css with @font-face, there are tons of tutorials on how to do this on the web and its relatively easy. Here are a few places to look:

http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/

Also smashing has a good article on why our icons or images might not look crisp on other devices because of its pixels: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.