I am using Sketch to design icons for a new version of VidaLingua dictionaries.
I start with vector icons which scale perfectly to 25 pixel height (left). But when I save them to png, they are pixelated (right).
How do I make the pixel perfect like the original?
A pixel is not something that can be bifurcated like you show in your first example.
A pixel (generally) is either all or nothing.
Notice along the edges how your crisp line is only making up for a portion of the "pixel". The grid you are seeing there is merely a representation of what the pixel grid looks like. In the right, it is true to form as it would appear realistically in a pixel.
What's happening is that to make up for the inability to do things such as curve perfectly, it "aliases" the line to the best of its ability to simulate the curve, because you only have squares to work with for making difficult angles - all of which have to be a single solid color.
For iOS, try doubling the size. Being that this is iOS, you are likely working with retina devices which are in a factor of 2 (Smaller device pixels, make more crisp imagery) - which would make the image total size of 50x50. Then, you will see dramatic improvement on a retina screen when calling it out at 25x25.
Hope this makes sense.
