Richard S. Posted November 17, 2020 Share Posted November 17, 2020 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. Quote High-End Photographic Prints Link to comment Share on other sites More sharing options...
v_kyr Posted November 17, 2020 Share Posted November 17, 2020 See: Human Interface Guidelines - What's new Human Interface Guidelines - App icon Apple Design Resources for macOS (templates) Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Tom Schimansky Posted January 8, 2021 Share Posted January 8, 2021 (edited) 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 January 8, 2021 by Tom Schimansky Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 9, 2021 Share Posted January 9, 2021 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: BigSur_Icon_Template.afdesign Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
Tom Schimansky Posted January 9, 2021 Share Posted January 9, 2021 (edited) 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: BigSur_Icon_Template.afdesign 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 Edited January 9, 2021 by Tom Schimansky Shrinks99 1 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 9, 2021 Share Posted January 9, 2021 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)? Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
lepr Posted January 9, 2021 Share Posted January 9, 2021 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] Quote Link to comment Share on other sites More sharing options...
lepr Posted January 9, 2021 Share Posted January 9, 2021 17 hours ago, Tom Schimansky said: Sadly the template from Apple is rasterized Apple's app icon templates, including the PSD version, are in vector form. Quote Link to comment Share on other sites More sharing options...
Old Bruce Posted January 9, 2021 Share Posted January 9, 2021 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. Tom Schimansky 1 Quote Mac Pro (Late 2013) Mac OS 12.7.4 Affinity Designer 2.4.1 | Affinity Photo 2.4.1 | Affinity Publisher 2.4.1 | Beta versions as they appear. I have never mastered color management, period, so I cannot help with that. Link to comment Share on other sites More sharing options...
v_kyr Posted January 9, 2021 Share Posted January 9, 2021 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
lepr Posted January 9, 2021 Share Posted January 9, 2021 26 minutes ago, Old Bruce said: You do have to check the preferences regarding Photoshop files for smart objects and text. True. I have these ticked and didn't consider that Tom may not have them ticked. Quote Link to comment Share on other sites More sharing options...
lepr Posted January 9, 2021 Share Posted January 9, 2021 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. Quote Link to comment Share on other sites More sharing options...
lepr Posted January 9, 2021 Share Posted January 9, 2021 (edited) 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 January 9, 2021 by anon2 Quote Link to comment Share on other sites More sharing options...
Tom Schimansky Posted January 9, 2021 Share Posted January 9, 2021 (edited) 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 January 9, 2021 by Tom Schimansky Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 9, 2021 Share Posted January 9, 2021 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 SVG image assets supported in Xcode 12 Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
v_kyr Posted January 9, 2021 Share Posted January 9, 2021 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: IOS Icon Shape Secret: Is It a Squirrel? Parsing However, other older sources on the net, I once saw, were somehow more confusing to read about that subject, see this one for example. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
v_kyr Posted January 9, 2021 Share Posted January 9, 2021 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> As so often Designer fails on many things here, where other third party tools have no problem with. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
kaffeeundsalz Posted January 9, 2021 Share Posted January 9, 2021 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: IOS Icon Shape Secret: Is It a Squirrel? Parsing 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? Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 9, 2021 Share Posted January 9, 2021 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 ... Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
lepr Posted January 10, 2021 Share Posted January 10, 2021 18 hours ago, v_kyr said: See further the more interesting part here (at least for me) ... Quote SVG image assets supported in Xcode 12 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. Quote Link to comment Share on other sites More sharing options...
lepr Posted January 10, 2021 Share Posted January 10, 2021 (edited) 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 ... 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? Edited January 10, 2021 by anon2 added image Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 10, 2021 Share Posted January 10, 2021 @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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
lepr Posted January 10, 2021 Share Posted January 10, 2021 (edited) 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 January 10, 2021 by anon2 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 10, 2021 Share Posted January 10, 2021 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 ... The Hunt for the Squircle ... 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 ... http://da.procato.com/superellipse/ 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
lepr Posted January 10, 2021 Share Posted January 10, 2021 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 ... The Hunt for the Squircle ... 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.