@1x,@2x,@3x

[patent10021]

So if I wanted to design an iPhone Plus app icon I could start my project @2x and then scale down to @1.5x for Spotlight icon right? Always better to downscale than upscale for high detail especially in Sketch 3 right?

BUT what is @2x for the iPhone Plus icon? Does that mean 180px times 2 = 360px? So I'd start designing at 360px? @2x = 360px?

 

[smetvid]

Depends on how you are designing your icons. If the design is vector based then I always start at a base of @1x and scale up. I do this because of fine details and pixels falling in between whole pixels.

Fine detail @2x scaled down could get softer or lost. Of course this cannot always be helped since the whole point of having retina is to see more detail. I still find it gives me cleaner results in the end.

As for the iPhone6+ it uses 3x graphics based on the original 1x. So if for example an app icon is 60x60 pixels @1x it would be 180x180 pixels @3x. Yes everything becomes 3x larger (technically 9x larger in size). It gets really fun when creating universal apps.

I also find designing web graphics makes more sense to think of them as 1x since that is how CSS works. It uses points and not raw pixels. So for example in terms of CSS values a graphic would be 60x60 no matter if it was on a iPhone3 or a iPhone6+. The difference is how dense those points are. For @1x the points are 1x1 pixels. For @3x they are 3x3 pixels in size. Since our brains still think to 1:1 values it is easier to start a design based on pixel to point values and then let the browser replace the higher res assets as needed.

If you are using pixels to design your graphics they can look better to start larger. I would start @3x but there are issues there as well. Again watch out for fine detail. Creating 180x180 pixel art and scaling down to 60x60 pixels is going to butcher your fine detail and soften a lot of the edges into pixel mush. Sometimes it is easier to start small and do a nearest neighbor scale up and manually add in the extra detail for each resolution. Not a trivial task of course which is why I mostly use vector for designing interface elements these days.

 

[stefanski]

Maybe the Apple HIG is going to answer your question. It contains a whole bunch of rules about sizes for icons:

https://developer.apple.com/library....html#//apple_ref/doc/uid/TP40006556-CH27-SW1

Worth a shot. I usually go there to find help for exactly those questions. At least it states the exact sizes required for your icons across the various devices and places they will show up under.