Mobile app version of vmapp.org
Login or Join
Mendez620

: Vector Icons for iOS App 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

@Mendez620

Posted in: #Icon #SketchApp #Vector

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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Mendez620

1 Comments

Sorted by latest first Latest Oldest Best

 

@Vandalay110

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme