Jump to content
You must now use your email address to sign in [click for more info] ×

macOS Circular App Icon Template


kaffeeundsalz

Recommended Posts

Hi everyone,

I know there are already a couple of macOS App Icon templates around here in the forums, but none of these were suitable for my needs. So I created my own from scratch in Affinity Designer and decided to share it here with you. It's complete with editable shapes, custom grid and guides.

As you may know, there are three basic app icon shapes in macOS: circular, square and tilted rectangle. This template is for the circular version and contains only the basic elements. This way, it's easy to bring in your own design. For example, I've created the layers in a way that the inner circle can be easily used as a clipping layer to make sure that when placing a file, it won't exceed the boundaries of the actual design area.

I used Apple's iBooks icon from Mojave as a reference and tried to match gradients, strokes and shadows. I did however change the icon size and guide positions by just a few pixels to strictly constrain to the 8x8 pixels grid Apple suggests in its design guidelines. Apple's own icons are often slightly off-grid; I decided to correct this at least for the basic shapes and sizes found in the template.

Speaking of grid, I made one with Affinity Designer's Grid and Axis Manager which is 64 pixels with 4x16 pixels subdivisions (not 8 pixels to not make it look too dense). Since Designer doesn't support circular and diagonal guides, I created these as actual curves and shapes in the document and put them in their own group (diagonals snapping is however enabled via the Intermediate angles feature).

For more information about the macOS icon grid, see here.

Any comments and suggestions are very welcome.

macos_circular_preview.thumb.png.d7c12a026f06bd4e1c30e13bcbaa54fd.png

 

macOS Circle Icon.afdesign

Link to comment
Share on other sites

  • 4 years later...

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

Terms of Use | 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.