5

Which of the following approaches should I take to design icons in many resolutions?

  • Create them in vector graphics, as SVG or AI and then rasterize them
  • Design them directly as bitmap graphics (BMP, JPEG, or PNG and separate files for each resolution)

I'd like to consider the following factors:

  • Dependable: will not fail to provide a good quality output and force to start from scratch
  • Easier to learn for beginners in computer-aided graphic design
  • Faster to finish
  • Easier to modify later
  • Better quality of output
  • More common to be used
  • Have good tools, including open-source tools and support for Linux

The use case is launcher icons for an Android app:

Launcher icons on a mobile device must be 48x48 dp ( denisty-independent pixels: 1dp is one pixel on 160 dpi screen),therefore 3 sizes needed

Launcher icons for display on Google Play must be 512x512 pixels. That is the fourth size

Improve this question
0

6 Answers 6

Reset to default
11

The best icon libraries I've seen use an hybrid approach:

  1. For most sizes you have a vector graphic that is rendered for whatever resolution you want

  2. For the really tiny version (16x16px) you make a separate hand tuned bitmap that often isn't even the same image.

Vector graphics is especially useful because today you have systems that can natively render vector images, high resolution displays and weird size icon requirements (web page icons don't have to conform to the icon sizes used in desktop apps)

Improve this answer
0
5

Personally I would go vector.

You can scale endlessly and resize to whatever dimensions you may need. In the past maybe bitmap would have been better because for quality icons you would want pixel perfect icons but now with Illustrators 'align to pixel grid' it makes it easier to get pixel perfect.

Illustrator also saves you time because you can make the icon once and resize to whatever you need whereas bitmap either you make one icon big and scale down but the quality can be a little funny sometimes (depends how you sample down) or you have to take the time to design the icon at each required dimensions e.g. you may think you need a 32x32 icon but you see it on website or app and then want to change it for whatever reason.

But at the end of the day I would say it comes down to which piece of software you feel more comfortable with. For example if you know Photoshop I don't know how easy or hard it would be for you to transition over to Illustrator.

Improve this answer
3

Microsoft published a best practice guide for Aero Glass Icons which may be appropriate here. Although it discusses the Aero icon style at some length, the techniques of producing a good set of scaled icons remain the same and different approaches are discussed towards the end of the article. Their recommendation is that it depends on what the output is.

Improve this answer
2

If you're looking for fully scalable, easy to use, re-usable icons your best bet is to create your own custom font packages utilizing the icons, host them on a private (or client) database and use them in your designs. Not only will you cut down on load times, but you'll have nice crisp icons no matter what the size!

Check out: http://icomoon.io/ I've found it very helpful in quickly creating these kind of packs, they also have pre-made editable icons for base work.

Make sure you're creating them as vector in Illustrator for easy export / import in .svg form!

Improve this answer
2

Create them in vector, even though it may not be as much fun to create. Only time you should use raster is if you are deadly certain that you will never need them larger. What happens if someone wants to buy your icons for print and needs 300ppi? Vector also resizes sharper and more accurately even when downsizing your images.

With SVG, you can scale the graphics on the web. This is important for responsive websites as you can simply set your image at 100% of its container element and it will look always it's best.

Also consider retina displays. Raster graphics currently need to be at double size for retina screens to display at max quality, causing larger download times.

Raster is very limiting, while vector will always look it's best, even on the side of a building.

Improve this answer
2

Most important indicator is probably what graphical elements you want to use for your icons? Shapes and fonts (vector) or parts of a photo (bitmap).

Second indicator is the format of the final product, in your case bitmap.

Software for each type have different capabilities (e.g. filters)... As the user Nir said, you could use a hybrid approach...

In general vector graphics are better at scaling contents but if you design at a size where a line has a width of 5px and then scale e.g. 30% then your result gets blurry and you might have been better off using bitmap from the start.

For an android app I personally would use bitmap graphics. According to this document best practice is to start with an 864x864 artboard and then scale to 96, 72, 48 and 36 pixels.

P.S. You can use Inkscape for vector and Gimp for bitmap graphics.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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