Apple iMessages Icons

[CoryT87]

How do I export images to match Apple's Icon requirements? 

[A_B_C]

Hi CoryT87,

 

and welcome here! Are you talking about iMessage stickers? If so, have you seen the following page?

 

https://developer.apple.com/stickers/

 

There you will find plenty of information on the required format, and there are also Photoshop templates you can open in Affinity Designer. What regards exporting your artworks, I believe you can meet the requirements quite easily by using the Export Persona. The in-app help files provide ample information on using the Export Persona. Just go to Help > Affinity Designer Help > Export.

 

Hope that helps! If not, please drop a line …   :)

Alex

[Uuiop]

Hi CoryT87 and welcome. Further to ABCs reply, if you just want to make a simple icon for the Mac Finder, you can select the area you want to use in an image, and make a screenshot (cmd-shift-4). Open this in Preview, Select All (cmd-a) and Copy. Now use Get Info (cmd-i) for the file or folder to which you want to add the icon, click on the icon in the top left corner and paste it there.

 

Using the same Get Info method, you can copy and paste icons between files too.

[CoryT87]

I was able to get it, but I need help with getting a transparency background for Xcode. I've checked the box in the document settings for transparency background and even hid the white background, but when I export as PNG, I get a gray background. I don't want this as I'm using it for my iMessage sticker packs. Can you please help?

[A_B_C]

You will have to set the Matte parameter to transparent (“red diagonal strike-through on white canvas”) before exporting, and it should work.

 

This setting is accessible right away in the Export Options panel of the Export Persona as well as by clicking the More … button on the standard export dialogue (my screenshot).

 

Hope that helps …  :)

Alex

[CoryT87]

Thanks for the info, but when I export for some reason the gray background shows a little bit because of the slice. Can you help with this?

[CoryT87]

Also, when you create a rectangle, why does it not line up with the grid? The only thing that snaps to the grid is the resize window.

[A_B_C]

Hmm … I am sorry but I am not completely sure what you are talking about. The “grid” in my screen shot is just a checkerboard pattern meant to tell you that the document has a transparent background. It is not a design grid. Is that what you mean?  :unsure:

 

Well, actually you could adopt the following workflow:

• Create a new document with a transparent background. Make sure that it shows the checkerboard pattern.
• Create your icon design
• Go to Export Persona, create a slice, make sure that “Matte” for this slice is set to transparent, and export to an alpha channel aware file format like PNG
• You shouldn’t see any grey background in your exported image file

Does that help?  :)

Alex

[A_B_C]

Hmm … I just reread the whole thread … what do you mean by “the gray background shows a little bit because of the slice”?  :unsure:

[CoryT87]

I'm trying what you said but I set the artboard to the size I want then I try to slice the image but it's apparently two different sizes on the slice part. 

 

 

 

[CoryT87]

how to do i add screenshots for you to see what im talking about

[CoryT87]

Here are some screenshots so you can see what im talking about

[A_B_C]

If I understood you correctly, you simply want to export the artboard as a whole and are not interested in the slice called “slice 1”?

[CoryT87]

Correct. But according to the Persona, the artboard is a different size than the regular artboard.

[A_B_C]

Hmm … this is weird. I would perhaps delete all existing slices (not your design layers and not the artboard itself, to be sure) and create a new slice from scratch, just to see if the issue persists.  :unsure:

[CoryT87]

what chat service do you use? It'll probably be easier if we use a chat service

[A_B_C]

I am sorry, I have no chat service, and it is unfortunately already a bit late on my side of the planet, so I fear I will have to log off now … but maybe you can upload your Affinity Designer document and I will have a look tomorrow morning.  :)

[CoryT87]

Ok, here's the file.

icons.afdesign

[R C-R]

I think the problem is buried at the lowest level of the Snow Icon group in the Cloud subgroup are two very large rectangular curves (5403.2 pt wide by 8607.9 pt high) that a mask in the subgroup layer above them mostly hides. The lowest one seems to be empty so it can be deleted without changing anything. The blue one with the gradient could be resized to fit completely in the artboard, but you would have to change its gradient to maintain the same appearance.

 

It would simplify things a lot if you released the mask, making it a pixel layer, & applied the blue gradient directly to it. You could then get rid of all the subgroups, something like the attached.

icons simplified.afdesign

[A_B_C]

Hi Cory,

 

thank you for your file. It seems your main issue is that you apparently get two different document sizes in the Draw Persona (1024 x 768) and in the Export Persona (3072 x 2304). Well, the explanation is simple, as soon as you have a look at the selected document units:

• Draw Persona (“Document Setup”): 1024 x 768 points @ 216 dpi
• Export Persona: 3072 x 2304 pixels

Though this is not entirely clear from the user interface, please have in mind, that the Export Persona is basically a pixel-based environment, and the document dimensions you have selected during the document setup process are translated to pixel values, as soon as you enter the Export Persona. This is the explanation for the difference that you are seeing.

 

Sorry, I had missed this tiny detail on your screenshots yesterday. I hope my explanation will help you.  :)

Alex

[A_B_C]

R C-R … hmm … seems I cannot find the layer you are talking about in the original file. The PNG is just fine on my machine …  :unsure:

[R C-R]

R C-R … hmm … seems I cannot find the layer you are talking about in the original file. The PNG is just fine on my machine …  :unsure:

I downloaded the icons.afdesign file Cory provided in post #18. The layers I am talking about are highlighted in this screenshot:

The Transform panel shows this for either of them:

 

EDIT: Double click on the thumbnail of either of these layers in the Draw persona to zoom the view to fit them in the window. Note that they are much, much larger than the artboard.

 

Do you not see the same thing?

[A_B_C]

Oh, I see … thank you. Yes, I agree, this is a somewhat uncommon document structure …  :)

[CoryT87]

So how should I have it set up then? I was using points because that's what's used for Apple's devices.

[A_B_C]

Could you please describe the intended use of your image a little more closely? And could post a link to the Apple developer resources you are referring to? What document type is required in your case?