Jump to content

Recommended Posts

Hi everyone.

Not sure where to post this, so I will ask it here - does anyone know of a free Big Sur icon template which can be used to create the main icon for a macOS Big Sur app?

 

Thank you all in advance.

High-End Photographic Prints

 

 

Link to post
Share on other sites
  • 1 month later...

I created a simple Icon-Template for MacOS 11 BigSur in Affinity Designer.

It is based on the official Photoshop template provided by Apple with the correct shadow and mask:

https://developer.apple.com/design/resources/#macos-apps

Sadly the template from Apple is rasterized so I made it with highest resolution available, which is 1024x1024.

Download MacOS 11 Icon Template:

MacOS 11 BigSur Icon Template.afdesign

Edited by Tom Schimansky
Link to post
Share on other sites

 

4 hours ago, Tom Schimansky said:

Sadly the template from Apple is rasterized so I made it with highest resolution available, which is 1024x1024.

It's rasterized due to the mask and applied fx effect shadow!

If you copy the rectangle and apply just the Corner tool on that to rebuild the rounded edges, it get's a "rounded rectangle curve". Afterwards you can delete the mask and intial rectangle, you don't need them anymore. Now if you replace the fx shadow layer with a reduced transparency gradient flow and export the whole, nothing is rasterized!

Example:

 

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
9 hours ago, v_kyr said:

 

It's rasterized due to the mask and applied fx effect shadow!

If you copy the rectangle and apply just the Corner tool on that to rebuild the rounded edges, it get's a "rounded rectangle curve". Afterwards you can delete the mask and intial rectangle, you don't need them anymore. Now if you replace the fx shadow layer with a reduced transparency gradient flow and export the whole, nothing is rasterized!

Example:

 

Thats not correct, you can't rebuild the shape with a rectangle and rounded corners, because

as I wrote in the file, it is not a rectangle with rounded corners, but a shape called a squircle, which looks more round.

Also the shadow in your example is not the official "Apple shadow" from the Apple Photoshop template anymore.

Here is an article about the shape:

https://hackernoon.com/apples-icons-have-that-shape-for-a-very-good-reason-720d4e7c8a14

apple icon squricle.png

Edited by Tom Schimansky
Link to post
Share on other sites

That's right it's not a complete rounded rect, I've also didn't used a rounded rect here but instead your rect shape as starting point. One has to try to form it then accordingly (ideally exactly) as the mask would do. The shadow I used is a fake one, since otherwise via FX you will get rasterization. - I wonder if the original available file formats from the Apple site have as default any rasterization in them (the XD & Sketch samples)?

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
4 hours ago, v_kyr said:

That's right it's not a complete rounded rect, I've also didn't used a rounded rect here but instead your rect shape as starting point. One has to try to form it then accordingly (ideally exactly) as the mask would do. The shadow I used is a fake one, since otherwise via FX you will get rasterization. - I wonder if the original available file formats from the Apple site have as default any rasterization in them (the XD & Sketch samples)?

Your shape has straight edges and quarter-circle corners (in other words, a rounded rectangle), but the official shape is significantly different as explained by Tom. Also, the shadow has to be soft, but yours is hard edged. macOS app icons are in raster format, so it is OK to use a FX blur for the shadow in the template.

Here is an Affinity template for the 1024 x 1024 px size, adapted from the vector artwork in Apple's PSD template:

 

[file deleted because it may breach the Apple macOS Design Resources License]

Link to post
Share on other sites
17 hours ago, Tom Schimansky said:

Sadly the template from Apple is rasterized so I made it with highest resolution available, which is 1024x1024.

 

 

13 minutes ago, anon2 said:

Apple's app icon templates, including the PSD version, are in vector form.

You do have to check the preferences regarding Photoshop files for smart objects and text.

262178427_ScreenShot2021-01-09at6_46_13AM.png.9a0a468b3d8f91e39ee8169c60a5fd7a.png

MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 10.14.6

Affinity Designer 1.9.3 | Affinity Photo 1.9.3 | Affinity Publisher 1.9.3 | Beta versions as they appear.

Link to post
Share on other sites
28 minutes ago, anon2 said:

Your shape has straight edges and quarter-circle corners (in other words, a rounded rectangle), but the official shape is significantly different as explained by Tom. Also, the shadow has to be soft, but yours is hard edged.

I know, that's why I said above to get it then more "ideally exactly", so as the initial template, but without any rasterization then.

Quote

macOS app icons are in raster format, so it is OK to use a FX blur for the shadow in the template.

Mostly yes, but the point to have them all vectors here for developers is another one. Since Xcode 12 you can also use Scalable Vector Graphic (SVG) image assets in iOS, macOS, and iPadOS. Up until Xcode 12, you were just able to use single scale resources by using PDF assets. Which in turn tool away the need to generate individual images for each scale using the @1x, @2x, and @3x postfix etc. - So the whole here (at least for developers) is to save you time and also take away potential mistakes like accidentally generating a @3x asset with the @1x image size and the like. - Further you can easier reuse one and the same vector icon then also scaled up for other demands, like using a bigger one for the info or welcome panels in a software app or for your marketing purposes (big size advertising on bus or house walls ...) etc.

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
1 hour ago, v_kyr said:

I know, that's why I said above to get it then more "ideally exactly", so as the initial template, but without any rasterization then.

The correct vector shape is in the Apple PSD template. I posted (and have now deleted) a Designer file containing that vector shape.

Link to post
Share on other sites
1 hour ago, v_kyr said:

Mostly yes, but the point to have them all vectors here for developers is another one. [...]

 

Your shadow not being blurred so that it does not become rasterised when exported to SVG does not make sense in light of the the Apple guidelines for Big Sur app icons, which state:

 

Quote

Use the drop shadow in the icon-design template. The template includes the system-defined drop shadow that helps your app icon coordinate with other macOS 11 icons.

 

 

Quote

 

App Icon Attributes

All app icons should use the following specifications.

Attribute Value
Format PNG

 

 

 

 

Edited by anon2
Link to post
Share on other sites

Thanks for the information, I didn't know about this PSD import option in Affinity, which is not turned on by default.

So then of course you can also use the Apple PSD template, although the version I posted at the beginning is not wrong. It's only rasterized to 1024x1024 pixels, but for an icon that should be enough in most cases...

Edited by Tom Schimansky
Link to post
Share on other sites
1 hour ago, anon2 said:

Your shadow not being blurred so that it does not become rasterised when exported to SVG does not make sense in light of the the Apple guidelines for Big Sur app icons

If it scales up Ok too it's probably no big problem at all here. Tryouts will show later, actually I don't have any projects where I have to be that much Apple conform in terms of styled icons. - That might be more a matter when distributing a software through Apple's stores then, in order to be conform and accepted by them. - See further the more interesting part here (at least for me) ...

Quote

 

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
1 hour ago, Tom Schimansky said:

So then of course you can also use the Apple PSD template, although the version I posted at the beginning is not wrong.

The informations you gave were pretty good and in line with outher resources about that theme! - See for example also this one:

However, other older sources on the net, I once saw, were somehow more confusing to read about that subject, see this one for example.

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites

BTW and as a side note, as so often when playing around with vector related things (especially with the SVG format), the limitations of Affinity Designer always come quickly to light. I wished it would be more capable in this direction with parsing and interpreting SVG standard commands.

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="5" dy="10" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <path d="M923.347,288.083c8.858,-100.22 -75.686,-184.628 -187.957,-188.083l-447.433,-0c-105.078,-1.342 -189.28,82.953 -187.957,188.083l-0,447.732c0.604,106.676 84.886,191.244 187.957,188.083l447.433,0c105.547,2.157 189.892,-81.99 187.957,-188.083l0,-447.732Z" style="fill:white;" filter="url(#f1)" />
</svg>

svg_tweaking.jpg.d1a9368341f9f46690c7eb12c6bdb9ba.jpg

As so often Designer fails on many things here, where other third party tools have no problem with.

svg_inkscape.jpg.136c454e4368870acfc2ed4e4970a990.jpg

 

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
2 hours ago, v_kyr said:

The informations you gave were pretty good and in line with outher resources about that theme! - See for example also this one:

However, other older sources on the net, I once saw, were somehow more confusing to read about that subject, see this one for example.

Interesting! Do you know any way to create such a squircle in Affinity Designer? Specifically with the curvature continuity diagram in mind? Or is this just not possible with the standard vector tools?

Link to post
Share on other sites
1 hour ago, kaffeeundsalz said:

Do you know any way to create such a squircle in Affinity Designer?

For such a squircle a predefined one rounded edge variation of the rectangle tool and rounded rectangle tool comes pretty close ...

squircle_shape.jpg.19c75482ae826bd4e7ad6576502524a8.jpg

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
18 hours ago, v_kyr said:

See further the more interesting part here (at least for me) ...

  Quote

 

 

 

Yes, but as I pointed out earlier, a macOS app icon is to be in a raster file (now PNG, to be specific).

Furthermore, the different sizes of an app's icon are usually not going to look good if they are simply scaled versions of some design. Typically, the smaller the icon, the fewer details should be included in it so the result isn't an indistinct blur at small sizes.

Link to post
Share on other sites
15 hours ago, v_kyr said:

For such a squircle a predefined one rounded edge variation of the rectangle tool and rounded rectangle tool comes pretty close ...

squircle_shape.jpg.19c75482ae826bd4e7ad6576502524a8.jpg

 

Affinity's Rounded Rectangle defeats the whole point of Apple's use of squircle instead of rounded rectangle - the aesthetics of the two shapes are very different. The squircle features curvature continuity, whereas the rounded rectangle has only tangent continuity.

Also, the "one rounded edge" variant of the Rounded Rectangle has exactly the same curvature discontinuous corner as the "four rounded edges" variant, so what point are you making by showing us that variant?

 

634528595_squircleversusroundedrectangle.thumb.png.f877ad568cfbde8009bcff012545ef7b.png

Edited by anon2
added image
Link to post
Share on other sites

@anon2 During a test with your template, the "one rounded edge" variant of the Rounded Rectangle doesn't look to have exactly the same rounded corner as the Rounded Rectangle. - And as said previously it seems to fit pretty good when tested with those from the Apple templates.

beispiel2.jpg.9454ec2a11165f547e51d6628277f363.jpg

beispiel3.jpg.3b2ae03a88e261e0899b87256f1ca0a1.jpg

beispiel1.jpg.e6973c3f51a6b66c5e730c92ecd690cb.jpg

bsp4.jpg.2b9e6340c147cd355f72f3bd1620bd04.jpg

bsp2.jpg.6f2fdf7639ae42c0f6679a7933237614.jpg

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites
39 minutes ago, v_kyr said:

@anon2 During a test with your template, the "one rounded edge" variant of the Rounded Rectangle doesn't look to have exactly the same rounded corner as the Rounded Rectangle.

My template (now deleted from the forum) contained no Rounded Rectangle, so I don't know why you involve it in a comparison of Rounded Rectangle presets.

Anyway, the one and four rounded corner presets specify differing rounding radius, but they feature the same curvature discontinuity as each other. Set both shapes to the same height and width and, for example, 25% radius and you'll see that their rounded corners are identical.

Edited by anon2
Link to post
Share on other sites
1 hour ago, anon2 said:

My template (now deleted from the forum) contained no Rounded Rectangle, so I don't know why you involve it in a comparison of Rounded Rectangle presets.

I used it initially as a visual reference for comparison with Affinity shape tools, in order to see if something might come close. - Although I later saw through Designer shape experiments that this statement here is justified ...

... further Wikipedia tells that it also is not actually a squircle but an approximation of a quintic superellipse.

At least for the superellipses context I saw an interesting generator ...

However, the whole shape tweaking to recreate some Apple based icons is pretty unneeded at all here, since as Apple states ...

Quote

Keep icon corners square. The system applies a mask that rounds icon corners automatically.

One thing I sometime have to test (when I'm on a newer MacOS system, my Xcode version is sadly by far too old and doesn't support that) is, what ">= Xcode 12" finally then does with applied SVGs when compiling/building the final app (how it handles those and if it possibly converts those then to PNGs either way or not). -- Update: Xcode renders the artwork to PNGs when building the app bundle.

☛ Affinity Designer 1.9.3 ◆ Affinity Photo 1.9.3 ◆ OSX El Capitan

Link to post
Share on other sites

 

 

42 minutes ago, v_kyr said:

I used it initially as a visual reference for comparison with Affinity shape tools, in order to see if something might come close. - Although I later saw through Designer shape experiments that this statement here is justified ...

... further Wikipedia tells that it also is not actually a squircle but an approximation of a quintic superellipse.

I'm not sure why you say "further" when Wikipedia actually references that The Hunt for the Squircle article for its statement that Apple's shape "is not actually a squircle but an approximation of a quintic superellipse."

In any case, cubic Bezier curves cannot represent a perfect superellipse, just as they cannot represent a perfect ellipse or circle (a circle is a special case of an ellipse which is itself a special case of a superellipse). Imprecision in Apple's shape is dancing around the issue that a Rounded Rectangle is an aesthetically poor substitute for Apple's shape.

 

1 hour ago, v_kyr said:

One thing I sometime have to test (when I'm on a newer MacOS system, my Xcode version is sadly by far too old and doesn't support that) is, what ">= Xcode 12" finally then does with applied SVGs when compiling/building the final app (how it handles those and if it possibly converts those then to PNGs either way or not). -- Update: Xcode renders the artwork to PNGs when building the app bundle.

Remember that simply rasterising an SVG at different scales is unlikely to produce a set of high quality app icons.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.