Mobile app version of vmapp.org
Login or Join
Turnbaugh909

: Which is better for icon design: vector graphics or raster graphics? Which of the following approaches should I take to design icons in many resolutions? Create them in vector graphics, as

@Turnbaugh909

Posted in: #Icon #Raster #Vector

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

10.06% popularity Vote Up Vote Down


Login to follow query

More posts by @Turnbaugh909

6 Comments

Sorted by latest first Latest Oldest Best

 

@Merenda852

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.

10% popularity Vote Up Vote Down


 

@Smith574

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.

10% popularity Vote Up Vote Down


 

@Shakeerah625

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: 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!

10% popularity Vote Up Vote Down


 

@Michele215

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.

10% popularity Vote Up Vote Down


 

@Turnbaugh909

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.

10% popularity Vote Up Vote Down


 

@Margaret771

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


For most sizes you have a vector graphic that is rendered for whatever resolution you want
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)

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme