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.

To design icons in many resolutions, Which of the following approaches: * to create them in vector graphics, as svg or ai and then rasterize them, * to design them directly as bitmap graphics (formats bmp jpg png, and separate files for each resolution)?

is better in 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

and the use case is: launcher icons for android app: http://developer.android.com/design/style/iconography.html 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
share|improve this question

migrated from photo.stackexchange.com Apr 14 '13 at 4:51

This question came from our site for professional, enthusiast and amateur photographers.

2  
Better how? SVGs obviously scale, so it's better in terms of less work to create and maintain them. Custom made raster images for each resolution are tailored specifically to each resolution, so are better in terms of fidelity and details. –  DA01 Apr 14 '13 at 4:55
    
Can you further specify your use case? How/where do you want to use the "final" product? –  John Apr 15 '13 at 13:43

6 Answers 6

up vote 1 down vote accepted

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 in illustrator for easy export / import in .svg form!

~ Jeff at Huemor Designs

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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)

share|improve this answer
    
Thanks for answering. I upvoted ,but I can only accept one answer. –  Muhammad Annaqeeb Feb 20 at 20:33

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.