what I am trying to do is to create a custom document icon for my app. Apple provides design resources that can be downloaded here: https://developer.apple.com/design/resources/#macos-apps

If you download "macOS 11 (Beta) Download for Photoshop" you will find this document: enter image description here

However I am not able to export the icon(s) from Photoshop because they always come with this grey background and a transparent body, even if I use the image assets generator: enter image description here

What do I have to do in Photoshop to get everything ready and export the icons with a transparent background, white body and my custom icon?

Cheers Daniel

1 Answer 1


---EDIT after further research--- Apple Instructions - Apple has step-by step instructions on how the document icon works here.

I wasn't completely wrong. You're not supposed to export the whole thing, Apple does apply the page overlay in the newest OS, you just supply the asset pieces.

Icon elements

---end edit---

I don't do app development, so I could be wrong, but in comparing the different design element files, it looks like the document icon has two guide layers that you need to turn off / Modify before exporting.

The bottom main layer, and then in the icon's layer folder, the layer with the background and drop shadow, which is called "Guide". It looks like if you turn off that second guide layer, it doesn't export as the correct size, but the other assets have the shadow as transparent. So I would either assume that the the OS needs the grey box for some reason, or you are supposed to delete the whole thing.

Guide layer to turn off

I don't think you are supposed to leave that in, it looks like MacOS applies that to your icon.

When I follow the instructions and turn on the Generate Image Assets, then right click on the folder for the Icon I want to export and leave as transparent, the Guide layer has the folded corner as solid white overlaying the logo. See example here, I dropped a blue behind since this site has a white background so you could see. Also included the transparent PNG.

example icon

Transparent PNG

I would assume that you are supposed to just export your logo as transparent and the OS will take care of the rest.

OR - since it is a BETA version, it's a glitch in the asset.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.