macOS icons squircle shape

[80sTherapy]

I did see this thread where the subject was discussed, but am left a bit perplexed over which of the templates posted in it is closest to Apple's actual design. I also the link to Apple's Photoshop templates, but I get an error message when imported into Designer V2:

I do have "import PSD text" and "import PSD smart objects" already checked in Settings.

Also, or maybe related to that error message, the squircle's shadow has a hard edge when it should be soft...

[firstdefence]

Check this post out: 

 

[firstdefence]

As an example the 512px x2 icon has a 10px Gaussian blur on the shadow layer, but Photoshop applies the gaussian blur as a smart filter, Affinity can apply the gaussian blur as an fx, as a live filter (non-destructive) or as a filter (destructive).

You should be able to get the gaussian blur to work as per photoshop with any of the affinity methods but the easiest is to add the gaussian blur to the colour overlay fx, else use a live filter which I assume will be akin to photoshops smart filter.

I also noticed that the blend options on the shadow layer has been reduced to 30%

 

[kaffeeundsalz]

A somewhat related question in this context is why Apple wouldn't include native Affinity files on their Design Resources page. Is there any way to work towards this?

[v_kyr]

You can build one out of these ...

• Squircle_vs_rounded-rect-square.afdesign
• Squircle_rounded_square.svg

• squircle.afdesign

[80sTherapy]

On 1/9/2024 at 3:28 AM, firstdefence said:

As an example the 512px x2 icon has a 10px Gaussian blur on the shadow layer, but Photoshop applies the gaussian blur as a smart filter, Affinity can apply the gaussian blur as an fx, as a live filter (non-destructive) or as a filter (destructive).

You should be able to get the gaussian blur to work as per photoshop with any of the affinity methods but the easiest is to add the gaussian blur to the colour overlay fx, else use a live filter which I assume will be akin to photoshops smart filter.

I also noticed that the blend options on the shadow layer has been reduced to 30%

 

Got it. Thanks for the link, @firstdefence. Looks like adding a 10px gaussian blue on the color overlay on the 512px x2 icon does the trick.

[80sTherapy]

4 hours ago, v_kyr said:

You can build one out of these ...

• Squircle_vs_rounded-rect-square.afdesign
• Squircle_rounded_square.svg

• squircle.afdesign

Thank you!

[80sTherapy]

5 hours ago, kaffeeundsalz said:

A somewhat related question in this context is why Apple wouldn't include native Affinity files on their Design Resources page. Is there any way to work towards this?

That would solve compatibility issues for sure. I'm not sure on what specifically hinges Apple's choice of formats. Could be that they have number of users for all major design apps, that the choice is more subjective based on how popular they think the various design apps, or it could be something else.

I think it can't hurt to contact Apple and the request that they also provide Affinity files.

[80sTherapy]

OK I'm still mighty confused. I read that Apple uses a squircle (or technically an approximation of one) and definitely NOT a square with rounded corners - yet the Photoshop template provided on Apple website seems to be the latter. 

The attached screenshot shows Apple's icon template (white) as well as the squircle (red) and rounded rectangle (blue) outlines provided above by @v_kyr. You can clearly see that Apple's template is not close to being a squircle. It actually looks identical to the rounded rectangle to me. Can anyone clarify?

Also, I thought that macOS icons were rounded squares, but the 512px x2 template (minus the shadow layer) seems to be about 824x815px...

[v_kyr]

10 minutes ago, 80sTherapy said:

OK I'm still mighty confused. I read that Apple uses a squircle (or technically an approximation of one) and definitely NOT a square with rounded corners

Yes, according to Wikipedia ...

Quote

Apple uses an approximation of a squircle (actually a quintic superellipse) for icons in iOS, iPadOS, macOS, and the home buttons of some Apple hardware.

See also related ...

• Squircle - Wikipedia
• The Hunt for the Squircle
• Design App Icons - Apple Developer
• Apple Design Resources (production templates)
• WWDC App Icon Design - (hd video)
• https://www.bridgetech.io/squircle.html

Though things don't always fit exactly neatless here (some Figma app icon samples surrounded by green squircles) ...

 

[80sTherapy]

13 hours ago, v_kyr said:

Yes, according to Wikipedia ...

See also related ...

• Squircle - Wikipedia
• The Hunt for the Squircle
• Design App Icons - Apple Developer
• Apple Design Resources (production templates)
• WWDC App Icon Design - (hd video)
• https://www.bridgetech.io/squircle.html

Though things don't always fit exactly neatless here (some Figma app icon samples surrounded by green squircles) ...

 

Thank you for the links. I am familiar with all of this, but my question remains. On the Screenshot I provided, Apple's own template seems nothing like a squircle and much closer if not identical to a simple rounded rectangle, so I'm still confused since all sources indicate it should be the former.

The fact that there is lack of consistance in third party app icons is not all too surprising given the differing methodologies/templates used by independent designers. What I still don't understand is wha Apple's own templates don't seem close to being squircles at all. I understand that they are supposed to be an approximation of a squircle, but they simply look like rounded rectangles to me.

Or is it just that the differences between Apple's « squircle » and a rounded rectangle are extemely minor?

[v_kyr]

5 hours ago, 80sTherapy said:

Thank you for the links. I am familiar with all of this, but my question remains. On the Screenshot I provided, Apple's own template seems nothing like a squircle and much closer if not identical to a simple rounded rectangle ...

Nope, for me it's closer to a squircle as defined on Wikipedia, but visually at best let's say something inbetween.