How can I export an Apple icon template on Pixelmator Pro?

Talk about Pixelmator Pro, share tips & tricks, tutorials, and other resources.
User avatar

2021-11-30 17:07:47

I used the .psd from https://developer.apple.com/design/resources/ to make some icons, using Pixelmator Pro. But now that I have made them, I can't find a way to export them correctly, individually. Export for Web doesn't work because it doesn't take the masks provided into count... how can I export them? or do I really have to export as one image and then crop the icons out manually?
User avatar

2021-11-30 19:51:26

Maybe not as convenient as it could be but you can make Slices via Export for web which snaps easily to the masks and export the slices then:
Image
User avatar

2021-12-01 15:53:51

Piipperi, for exports like these it's best to use Add for Export. This adds a selected layer or a layer group as a separate image for export.

Image
Export for Web doesn't work because it doesn't take the masks provided into count...
This part is a bit concerning, though. I believe you're exporting the icons as PNGs? If you are, is Keep Transparency selected in the export settings?

Image
User avatar

2021-12-01 19:01:46

by Aurelija 2021-12-01 13:53:51 Piipperi, for exports like these it's best to use Add for Export. This adds a selected layer or a layer group as a separate image for export.

<p><img src="//support-cdn.pixelmator.com/uploads-new/cuf_1638373524_Screenshot_2021_12_01_at_17.43.38.jpg" class="postimage is-shown is-visible" alt="Image" width="383" height="435.5"></p>



This part is a bit concerning, though. I believe you're exporting the icons as PNGs? If you are, is Keep Transparency selected in the export settings?

<p><img src="//support-cdn.pixelmator.com/uploads-new/cuf_1638373549_Screenshot_2021_12_01_at_17.40.18.png" class="postimage is-shown is-visible" alt="Image" width="250" height="290"></p>
that’s not what I mean. Look at the image sizes. And look at the provided masks. Btw, I should mention that at least macOS icons are a lot different. They have a shadow and such.
User avatar

2021-12-02 16:21:49

by EllenM 2021-11-30 17:51:26 Maybe not as convenient as it could be but you can make Slices via Export for web which snaps easily to the masks and export the slices then:
<p><img src="//support-cdn.pixelmator.com/uploads-new/cuf_1638301838_Slices.png" class="postimage is-shown is-visible" alt="Image" width="542" height="374"></p>
This does seem to be the fastest way for now. Thanks
User avatar

2021-12-06 09:27:50

I had a feeling there was something more to it. Thanks for clarifying! :) Have you thought about scripting this? The current export is a bit time-consuming, for sure, but it can really be a one-click process with a proper script. For instance, I've created one that should do the trick (may not be the most elegant of codes but hey, I did my best :sweat_smile: ) :
tell application "Pixelmator Pro"
	activate
	set exportLocation to choose folder with prompt "Please choose where you'd like to export your icons:"
	tell the front document
		repeat with currentGroupLayer in every group layer
			set visible of every layer to false
			set visible of currentGroupLayer to true
			set currentGroupName to name of currentGroupLayer
			load selection of the layer mask of currentGroupLayer
			set maskBounds to selection bounds
			crop bounds maskBounds with delete mode
			export to ((exportLocation as text) & currentGroupName) as PNG
			repeat 3 times
				undo
			end repeat
			set visible of currentGroupLayer to false
		end repeat
	end tell
end tell

You'd need to run this script in Script Editor after you're done creating your icons. It'll essentially load the mask of each icon, then crop the image based on this mask and export it. I should note, however, that it'll only work with icons in separate layer groups with individual layer masks.

You can also download the .scpt file directly here. Let me know if you get to try it out and how it all goes!
User avatar

2021-12-06 10:23:41

by Aurelija 2021-12-06 09:29:08 I had a feeling there was something more to it. Thanks for clarifying! :) Have you thought about scripting this? The current export is a bit time-consuming, for sure, but it can really be a one-click process with a proper script. For instance, I've created one that should do the trick (may not be the most elegant of codes but hey, I did my best :sweat_smile: ) :




You'd need to run this script in Script Editor after you're done creating your icons. It'll essentially load the mask of each icon, then crop the image based on this mask and export it. I should note, however, that it'll only work with icons in separate layer groups with individual layer masks.

You can also download the .scpt file directly here. Let me know if you get to try it out and how it all goes!
Thanks! I’ll def give it a try when I’m working on some icons again.
User avatar

2021-12-06 10:43:37

by Piipperi 2021-12-06 10:24:21
Thanks! I’ll def give it a try when I’m working on some icons again.
Happy to help! :pray: