1

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: Icons as a sprite image

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.

Improve this question
4
  • What are your targeted resolutions?
    – JohnB
    Commented May 1, 2015 at 16:46
  • I'd suppose it's irrelevant. See my edit.
    – Milad.N
    Commented May 1, 2015 at 16:59
  • 1
    At a small enough size it becomes relevant. Designing a 16px² icon has different design considerations than one that is 128px²
    – JohnB
    Commented May 1, 2015 at 17:07
  • That's totally correct. Thanks for the comment.
    – Milad.N
    Commented May 1, 2015 at 17:09

1 Answer 1

Reset to default
1

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.

Improve this answer
4
  • Thanks for the answer. As a matter of fact, i guess when I zoom out in InkScape, I don't see that Loss of quality. But If I use a screen shot, the background will be opaque. would it be possible to remove the background without any residues??
    – Milad.N
    Commented May 1, 2015 at 17:02
  • 1
    The most obvious possibility for poor quality or lack of anti-aliasing is the raw pixel dimensions for the smaller icons probably just don't have enough pixels to play with. Tweaking is the answer.
    – Yorik
    Commented May 1, 2015 at 17:05
  • As it turns out there's some rescaling, somewhere in the application. So the problem is not with the graphics. Nevertheless I'm gonna accept the answer since I learned several things regarding icon design from it. Thanks bro
    – Milad.N
    Commented May 1, 2015 at 17:39
  • There'll be no rescaling on export from Inkscape if you leave the export dpi at its default 90. Most set this to 72 and then wonder what's occurring with the weird pixel dimensions of their exports.
    – user19660
    Commented May 6, 2015 at 11:01

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.