How to anti-alias an icon？

I do my icons with a custom font and just anti-alias that way.

li2niu🏃🏻 said:

What caused this issue，sketch export mechnism or garmin devices difference?

Depending on what kind of scaling algorithm was used, you could've introduced additional colors in the image which aren't supported by the device, which could look weird whether or not dithering is enabled for the bitmap resource, since most Garmin devices (except for Venu) have a very limited color palette.

You could verify this for yourself by opening the scaled bitmap in an editor and using the color picker to see if it has more colors than the original (and you could double-check to see whether these are colors supported by the Garmin devices you are targetting).

From a quick search, it seems that Sketch scales in a way that introduces new colors (through interpolation).

What you could do in this case is use nearest-neighbor scaling, which gives you a more pixellated result, but preserves the existing colors. This doesn't seem to be supported by Sketch, but you can use GIMP:

https://docs.gimp.org/2.10/en/gimp-image-scale.html

docs.gimp.org/.../gimp-tools-transform.html

(Select "none" for the interpolation type.)

You could also just try disabling dithering on the scaled bitmap resource: developer.garmin.com/.../

For anyone reading this who uses Windows, I also like to use Paint.NET for this kind of thing.

Ok. I dislike using bmfont although it great cuz I have to open my windows pc. Making pngs with different resolutions is much easier for me.

I tried gimp，it works. 

FlowState said:

From a quick search, it seems that Sketch scales in a way that introduces new colors (through interpolation).

Can you tell me the source, I wonder the interpolation algorithm

I searched this:

[https://www.google.ca/search?q=sketch+app+nearest+neighbor+scaling]

and found this:

https://www.designernews.co/stories/46007-ask-can-sketch-be-used-for-pixel-art-

”I don’t believe anti-aliasing can be disabled in Sketch.

I think the main features you're probably after for pixel art are:

1. Being able to paint with a non-antialiased pencil or brush.
2. Nearest neighbour scaling (keep blocky things blocky when you scale).”

It doesn’t say what kind of scaling is used but I’m guessing it’s some form of interpolated/anti-aliased scaling. 

Nice! You might want to touch up some of those pixels by hand. The corners of the inner black rectangle look a little thin. 

FlowState said:

interpolated/anti-aliased scaling.

The procedures in sketch and gimp are not equivalent. 

In sketch, I used CMD+K to scale my vector icon and then export it to a png, I think the interpolation was performed when the image was exported.

And GIMP use it when scaling up.

Yeah, if you used non-interpolated scaling in GIMP, it's not surprising that you'd get a sawtooth corner like that. That's the trade-off for not using interpolation. The problem with interpolation / anti-aliasing is it uses intermediate colors to fill in the gaps smoothly, so that will cause problems on devices with a limited palette.

That's why I suggested fixing the inner corners by hand.