Smooth Images

Published by cdl on January 19th 2013.

I do not just create icons. Being as I may want to use the images for other projects I tend to work with larger images and higher resolutions to ensure that any printed material will render properly.

Ever wonder what you can do to make your graphics appear smoother and less jagged, especially around the edges? There are a few tricks that can be applied to fix a jagged edge but the one I find most useful for eliminating this problem in the first place is to simply start with a better image. It makes everything smoother without having to tweak edges and parameters of additional tools.

It is always easy to down size an image later if you choose to do so but increasing the size of a smaller image without appropriate resizing software often will result in the same bad edges just being stretched out bigger. I generally work with larger than necessary images and a high resolution, even for small things like icons. For those who do not know dpi and ppi stand for 'dots per inch' and 'pixels per inch'. The resolution (dpi/ppi) of an image is key in printing and the higher the number is here the smoother your end result will be.

I have used smaller images and lower resolutions before, you can see the results of a few illustrated in some of my earlier icons. The results of the smaller/lower resolution images appear to have a jagged appearance and are not as smooth as when larger images with higher resolutions are used, even when smoothing techniques are applied.

So you have an image you really want to use but you find that it is way too small to give the smooth results you desire and resizing of the image does not eliminate your lack of smooth looking lines. What else can you do?

1. You could start over and try to recreate the image on a larger canvas. Often the second time around improves on the original.

2. You can simply use the image as it is and carefully run a smoothing tool over those areas you are not content with. (There are various settings such as size and strength that you can adjust for this tool until you are happy with the result.)

3. You can select the areas you would like to smooth and use a blur filter to obtain the desired result. (Again, you will have to play with the parameters to get the result you desire.)

I find that even when working with larger images of higher resolutions I often want a smoother line here and there. I select the areas I want to smooth out and expand this selection area by a couple of pixels to allow for the blurring effect. This works best with line edges, straight or curved, and the image outline. Apply the adjustment filter at the appropriate strength and instant smoothing appears.
I used this technique on the Smiley, Rose, Dahlia and a few other icons to smooth the edges a bit more.

Not only can these images be used for the icons without effort but due to their resolution value and image size they can be applied to other endeavors as well. Want better icons that appear sharper and smoother? For me bigger is better. If you start with a small pixelated image chances are that you will end up with a pixelated icon or cursor.

Recent comments

Vlasta site administrator on January 21st 2013

Image resolution is a tricky thing. Resolution should be given in DPI, but sometimes people just use the number of pixels instead.

When making icons or other graphics that is only used on computers, the resolution in DPI does not really matter. For icons, a 2000x2000 pixels image with 60 DPI is the same as a 2000x2000 pixels image with 600 DPI. The DPI matters when the image is printed, because number_of_pixels divided by resolution_in_DPI gives physical size in inches. So, if the two images mentioned above were printed (and the printer honored the DPI), they would have different size. The first one would be 10 times bigger on paper, but more blurry than the second one. Both have the same amount of information, because they both have the same amount of pixels.

While a picture is inside the computer, only the number of pixels determines its sharpness. 1000x1000 or 2000x2000 pixels is a good starting point when one wants to make a sharp icon.

cdl contributing user on January 22nd 2013

It is a rather confusing subject. Resolution was not necessarily the main subject of the post and now that you have added your quite knowledgeable comment I have revised my post. Thanks for the information.

Hopefully my post is somewhat less confusing now.

Anonymous

Signed comments carry more weight! Don't be a stranger - log-in or register. It only takes few seconds.