Yannick Lung Profile picture
Sep 23 22 tweets 14 min read
Since I get asked every now and then how I design my icons and what things to look out for, I think now is a good time to go into some tips and tricks. Some of them are more technically oriented, while others are of a design nature.
#SketchDesignChallenge Cover graphic for this thread
Before I even open Sketch, I like to take the time to quickly try out some ideas on paper. This can be done traditionally with pen and paper or digitally on the iPad and the Apple Pencil. This makes it much easier to get a rough feel in advance.
#SketchDesignChallenge Digital drawings of app icons on an iPadSeveral app icon sketches on paper
If you are unsure where to start, I highly recommend reading the associated guidelines first. These often contain basic principles you can use as a guide.
iOS/macOS App Icons 👉 developer.apple.com/design/human-i…
Android Product Icons 👉 material.io/design/iconogr…
#SketchDesignChallenge
Speaking of guidelines, there are some great app icon templates and resources out there to make your life easier. Highly recommended are the ones from @maxrudberg or @flarup.
👉 iosicontemplate.com
👉 applypixels.com/resource/macos…
👉 applypixels.com/resource/ios16…
#SketchDesignChallenge
In addition, Sketch has built-in icon templates. These can be accessed via File → New From Template → [Platform Name]
#SketchDesignChallenge Image showing how to create a document form a template selec
If it is an app icon for iOS or macOS, it is a good idea to design the icon in the Display P3 color space. This makes colors look more vivid and clear.
To activate this setting, go to File → Document Settings... and select “Display P3” for Color Profile.
#SketchDesignChallenge Document settings panel with Display P3 color mode selected
If the app icon is intended for iOS, please export it *without* rounded corners, so only in square format. The masking of the rounded rectangle (squircle) is done by the system itself. #SketchDesignChallenge The do's and don'ts when exporting an iOS app iconScreenshot of strange clipping behavior when quitting an app
Otherwise, the animation of the app will look strange when you quit it.
#SketchDesignChallenge
In comparison, on macOS it is recommended to export the icons in squircle format with border spacing (macOS Big Sur and newer).
#SketchDesignChallenge The do's and don'ts when exporting an macOS app icon
The reason why I say that? Some Mac apps use the wrong proportions, so the icons look a good bit bigger. Especially in the Dock, the icon breaks out because it doesn’t fit with the rest. Please don’t do that.
#SketchDesignChallenge Screenshot showing a list of apps with wrong app icon propor
How do you get around the whole thing? Let’s say the artboard is 512 × 512. Then the base layer should have a size of 412 × 412 pixels.
Alternatively you can download the official macOS App Icon Template from Apple directly.
👉 developer.apple.com/design/resourc…
#SketchDesignChallenge
Since we are talking about macOS icons: To stay consistent with other app icons, the base layer should have a black shadow with alpha of 30%, y-offset of 5 and blur also of 5.
#SketchDesignChallenge Screenshot showing how to apply a shadow for macOS app icons
The word “squircle” has come up before. Apple is known for using particularly soft rounded edges. To achieve this effect in Sketch, you should definitely switch from Rounded Corners to Smooth Corners.
#SketchDesignChallenge Screenshot showing how to activate Smooth corners in Sketch
Believe it or not, for the Squircle there is even a “magic formula” to create the shape.
Set the Corner parameter to Smooth Corners and multiply the height of the square plane with 0.22166
This creates a shape that is very close to the squircle.
#SketchDesignChallenge Formula explaining how to create a squircle shape in Sketch
But enough with mathematical formulas. Let’s move on to a few of my favorite tools that I use most often during the design process.
#SketchDesignChallenge
The Offet tool is useful for quickly creating new layers that are sized to match other layers. This is especially useful for maintaining the proportions of the squircle.
#SketchDesignChallenge
Blend modes allow colors to have an indirect influence on each other. Instead of black shadows or white highlights, the colors “blend” into each other, making the overall image look more natural. My two favorites are “Plus Lighter” and “Plus Darker”.
#SketchDesignChallenge
Blurs are wonderful for softening hard edges. They are particularly suitable for reflections or other light effects. Be sure to create masks so that the blur does not extend beyond the object’s boundary.
#SketchDesignChallenge
The Scissors tool is handy for cutting up layers. For example, I often use it when I want to create an effect only in a very specific place.
#SketchDesignChallenge
Similar to animation curves, linear gradients can sometimes look unnatural. This can be remedied with the Easing Gradient plugin, which creates bezier-like gradients.
👉 github.com/larsenwork/ske…
#SketchDesignChallenge
Also, don’t worry too much about ordering and naming the layers. During the process, it’s perfectly fine if the layer list looks messy… As long as it doesn’t turn into a Very_Final_Copy16.sketch —everything is fine 😁
It’s a creative process after all!
#SketchDesignChallenge Window of Sketch with a very messy layer list
As for process in general, I’m a big fan of iterative design. That means creating as many artboards as possible—each with a small change more. That way you can quickly jump back and know afterwards how something came to be. #SketchDesignChallenge

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Yannick Lung

Yannick Lung Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(