How Ot Make App Designs On Macs

How to design custom app icons for macOS Catalina in Sketch

Introduction

Apple made available macOS Catalina almost a month ago. And I'm going to say that I like this year's update. Apple Arcade, Sidecar, Screen Time, Mac Catalyst, and of course, three all-new separate apps — Apple Music, Apple Podcasts and Apple TV. Say bye to iTunes. But it was a great history. I will miss it a little bit. And within an update, you may notice the brand new style of native app icons. For example, you can look at App Store, Books and News.

And today, I wo u ld like to share how to design custom app icons in that new style for Google Chrome, Slack, Twitter and Spotify in Sketch and how to set them on macOS Catalina because I use my MacBook with these apps every single day. I also wanted to add Telegram to this list, but they have already updated their icon. Neat and fast.

So, let's begin with the first icon. But before this, we have to get from the internet all the current logos in the vector-based format SVG. All products should have media kits that help designers on how to use their logos and other assets. So I downloaded all resources from their official sources:

Google Chrome
Slack
Twitter
Spotify

Designing in Sketch

Okay, now we have everything we need. Let's create our first 512 x 512 pixels artboard. It will be a base from which we can scale down and up at any time. Each icon must have space around it. So an actual icon will be around 434 x 434 pixels.

Google Chrome. The first icon was the hardest one. The app logo has a memorable figure that contains three colors on the circle with almost noteless gradients on edges. So you can use an ellipse border with a gradient and masks. In this way, the top group layer called Icon Shape will look like it's under the Google Chrome logo. Also, every icon on macOS has a little shadow beneath it. After that, we can move on to the next one.

Slack. It was easy to create. I grabbed and tuned the gradient from Apple Music for this case. Then I copied a shadow from the previous artboard.

Twitter. It's nice that a native app is back on Mac with dark mode and Mac Catalyst technology. I used dark mode colors to design an icon shape. And also, I added a little shadow for the bird on logo.

Spotify. And last but not least, I just used their official green and black colors. I love this app so much. Even despite Spotify is officially unavailable in Ukraine, I use it.

Setting up new icons on macOS Catalina

First of all, you need to download all the icons I designed in PNG from this link. You can also find a source file for Sketch there. Feel free to modify in a way you like it more or you can even create your own set for other apps. And then export every icon in PNG to set custom app icons on your Mac. To do this, check Apple's official macOS user guide here or follow my manual below:

1. Double-click on a PNG file to open in the Preview app

2. Hit ⌘+C (or choose Edit ➝ Copy in the top menu bar)

3. In Finder go to the folder with applications and select the app you'd like to change the icon for and hit ⌘+I (or right-click on the icon and choose from the context menu Get Info)

4. Click on the small thumbnail of the current app icon in the Info window.

5. Then use the keyboard shortcut ⌘+V to paste your new icon (or choose Edit ➝ Paste in the top menu bar)

6. You may need to reopen the app to have the changes take effect and update it in the dock

7. All done

By the way, you can also want to know how to return everything as it was before. At the top of the Info window, select your changed icon, then hit Backspace on the keyboard (or choose Edit ➝ Cut in the top menu bar). But unfortunately, it doesn't work with apps downloaded from the App Store. It may need to reinstall the whole app.

Conclusion

I hope this story was enjoyable for you if you have any questions, please feel free to leave a comment. Thanks for reading. Clap, share and do design. For me, it was a small side project for weekends that I've been delighted to design and share. So till the next time.