I have created a vector file (svg) and now I wanted to export it as 66px x 66px, 44px x 44px and 22px x 22px PNG file. It should be used as a UIBarButtonItem in the navigation bar. Therefore I use Inkscape. Here is an example:
I updated to Inkscape 0.91 to disable the anti-aliasing option, but it didn't helped. I tried an online converter tool, tried to simply downscale, exported as EPS/PDF and imported in GIMP, but everytime I don't get sharp lines. There is always antialiasing involved. I read about using tools like ImageMagick, Ghostwriter and use the command line version, but here I have to question the process of how to create my icons. It should be simple and no programming job.
So what is the best way of creating vector images and exporting them as PNG images without antialiasing?
Answer
This problem has nothing to do with software choice or settings therein but basic mathematics.
If your output is intended to be square raster files in multiples of 22 then the source (vector) file and the major elements should be simply divisible by 22.
With the horizontal line elements in your design being half the height of their respective dots, and centre aligned, you're creating a scenario where the smallest possible height is 2px per line. That makes your dots 4px and creates a minimum file height of 4px X 7(3 dots plus top & bottom space) giving 28px.
I suggest you create a 22x22 grid, lay out your design so no lines overlap the grid lines and then scale it up for the other sizes. It's more complicated explaining why it won't work the way you've done it than just starting again with an output grid of the size you want - you'll "click" where you went wrong and why your file will never give you what you want.
No comments:
Post a Comment