: Creating high quality multi-resolution icons Preface: I needed to design a few ( maybe 30 or so ) icons for an app that I'm developing. At first the thought of designing all those icons for

Preface:

I needed to design a few ( maybe 30 or so ) icons for an app that I'm developing. At first the thought of designing all those icons for different resolutions was really daunting for me ( and still is ), specially considering that I need to design several themes. So I decided to create vector icons so that I could design once and resize several times, without quality loss. But as it turns out I was dead WRONG. When I export the svg to png, specially for low resolutions, the quality is awful and it's nowhere even close to good. I could say that anti-aliasing is missing.

The question:

How should I go about designing icon themes with different resolutions?

Shoud I design each resolution independently??
Am I doing something wrong while exporting the SVG to PNG?
or what?

BY THE WAY: I'm using InkScape to design the svg

Thanks a lot

EDIT

The resolution of the output file is not standard, since i'm creating a sprite image. But you could say that the icon sizes are almost 32x32 48x48 72x72 96x96 ...

And here are the icons:

EDIT 2

To be honest I'm starting to think that I'm asking the wrong question ( in the wrong place :-D ). When I uploaded the above image, I started to think that it's not that bad. or even if it's bad, it's not as bad as the final product. So I started to play around with the icon in GIMP with adding different backgrounds. IT'S NOT AS BAD.

So I should add that I need the icons for an android app. Maybe android or my code or even a resized ImageView is responsible for this mess.

10.01% popularity Vote Up Vote Down

: How do I make scratchboard/etching effects? I'm having a hard time grasping how to get the same brush stroke with the right proportion of space in between like in this image (Marilyn). I'm

@Kaufman565

Posted in: #AdobeIllustrator #Brush #Stroke

1 Comments

: Quality-loss by resampling an image bigger? If you have an image you want to make bigger(in realife-size for example for printing), I would use the crop tool of Photoshop with WxHxResolution,

@Kaufman565

Posted in: #AdobePhotoshop #ImageQuality #Resize #Resolution

0 Comments

: How can I quickly design websites without being too detached from the actual web platform? The reason why I'm asking is because while tools like Photoshop and Sketch are great at building mockups,

@Kaufman565

Posted in: #InterfaceDesign #WebsiteDesign

6 Comments

: How to create a gradually transparent mask in photoshop from a black->grays->white image There have been some posts regarding what I describe in the title, but none seem to understand what the

@Kaufman565

Posted in: #AdobePhotoshop

1 Comments

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

@Holmes874

Should I design each resolution independently??

It depends on the icon.

Flat, bold line art can probably be designed as an SVG and just scaled as needed in the app/website. This is how icon fonts work...they are just vector icons and resize as needed.

On the other hand, if it's a photo-realistic icon with fine details, then typically the process is:

design large
scale down for each size
hand-tweak each specific size at the pixel level

The hand-tweaking may be simply adjusting a few pixels here and there, or it could be a major edit where you remove more and more detail as your images get smaller and smaller.

Am I doing something wrong while exporting the SVG to PNG?

Possibly, though I think Inkscape anti-aliases on export by default. In the export window, make sure there isn't an anti-alias option that you have turned off.

FWIW, for converting from Inkscape to PNG, my personal workflow is typically to use screen shots. I just screen shot from Inkscape, paste into my raster editing software (often Pixelmator) and make my pixel tweaks there then save to PNG that way.

10% popularity Vote Up Vote Down

Feed

: Creating high quality multi-resolution icons Preface: I needed to design a few ( maybe 30 or so ) icons for an app that I'm developing. At first the thought of designing all those icons for

More posts by @Kaufman565

: How do I make scratchboard/etching effects? I'm having a hard time grasping how to get the same brush stroke with the right proportion of space in between like in this image (Marilyn). I'm

: Quality-loss by resampling an image bigger? If you have an image you want to make bigger(in realife-size for example for printing), I would use the crop tool of Photoshop with WxHxResolution,

: How can I quickly design websites without being too detached from the actual web platform? The reason why I'm asking is because while tools like Photoshop and Sketch are great at building mockups,

: How to create a gradually transparent mask in photoshop from a black->grays->white image There have been some posts regarding what I describe in the title, but none seem to understand what the

Login to post a comment!

1 Comments

Back to top | Use Dark Theme