I'm having trouble understanding how to create icons for macOS 11. I know the new correct design is to put your image inside of that squircle shape, but I'm having trouble figuring out how to do that. To add to my problem, I wanted to design the icon to look like Xcode or Preview or Garage Band, etc...where there is a "tool" shape that hangs off of the edges.
The app I'm designing for is a utility app. So my icon has kind of a wood texture shape in the middle on top of a white background. And then I have a tool shape sitting on the bottom right corner hanging just off of the edge (like the preview icon).
The HIG allows for design like this on third party apps, but it also give the guidance to use icon images that are NOT rounded and are flattened; allowing the system to round the edges itself. However, this would make it impossible to add a secondary shape that extends beyond the squircle. So I downloaded the photoshop design kit for macOS 11 and used that to generate my icon images. That works OK. But even though I'm using the masking and the alignment grid, the icon, once imported to Xcode, doesn't look right. The proportions are all wrong. The squircle shape is the wrong height relative to the system and Apple Pro Apps. The tile shape itself is the same height as the Xcode icon including the blue tile and the hammer. So I even just removed the tool shape and just used a plain tile square image that I dragged directly to Xcode. But when running, the icon's proportions are still much bigger than the system icons.
This was all done with just plain flat PNGs and using the Photoshop macOS kit. I don't have a Sketch license to try this out. But I'm thinking about later trying to do the Adobe XD template. The best I can tell...the mask size in the Photoshop template file is the wrong size.
Is there something I'm missing? Should I just buy Sketch and use that?
Post
Replies
Boosts
Views
Activity
I can’t figure out how to make the iOS 18 photoshop template for app icons work. In the past, each variant of the icon size was an
editable layer you could open up, change and save. In this one, only the large App Store icons are editable. So I thought maybe if I put my icon in the App Store layer, the smaller icons would automatically scale and fill in. But they don’t. When I checkmark the generate assets option, it generates all the icon files, but all of them are blank, except for the App Store one. I don’t really want the smaller icons to just automatically scale down anyway; I would rather have them be fine-tuned by hand so that they look good at all sizes.
I used the sketch template in a free trial of sketch and it automatically scaled and generated all of the icon sizes, as expected. But I don’t own sketch; I use Photoshop and Illustrator for all of my work.
I’ve always been able to use the template in the past; it’s only this year‘s iOS 18 version that isn’t working for me.