Alert: I am in the process of migrating this site to ers.land!
Please update any bookmarks or feed subscriptions; p3l6.dev will be set to redirect soon.

p3l6.dev|☰

New look of app icons

<<Back to Index
  • Liquid glass layers
  • Translucent and tint modes
  • Apps will have the same icon on all devices (other than the watch is a cirlce)
  • New corner radius
    • old icons will automatically adjust the corners if they are a similar shape
  • No more irregular icon shapes on mac
  • Layering is a key component of the new icons
    • at least one background and forground
    • foreground layers should stack, not go around each other
    • Use simple art styles
  • Translucency and blur is easy now
  • Simplifying the elements in your app can help
    • Baked-in effects (shadows etc) should be removed, so as to not fight the glass effect
    • Rounded corners in shapes will be better than hard corners
  • Backgrounds
    • should have a gradient, which can be default
    • colored backgrounds are preferred

      Create icons with icon composer

  • History
    • Mac icons used to be created at various sizes
    • Then even more sizes were required
    • Later an option to just add one image per platform
    • Then new modes were added
    • Now we can do all this in a single file
  • Start in an another design tool
    • Use vectors or svgs
    • Use the app icon template to get the right canvas size (1024)
    • Create the layers for your icon. Split by z-depth and color
    • Be as basic as possible. shapes should be flat and opaque
  • Export each layer as an svg
    • Except backgrounds
    • Prefix with zlayer
    • Don’t export the rounded rect mask, just squares
  • Import into composer
    • Each group can have glass properties. Up to four. But more than one svg can be in each group
    • Lots of properties to change, and can be customized per variant