Creating graphics for Android/iOS/Mobile Devices


I've created icons many times now with tons of great information I've learned here at GraphicDesign StackkExchange. Now, I'm finally putting together my first real application that will go public on the iOS and Google Play marketplaces. I've just got a couple of things I want to make sure of when I'm creating these icons. First, I have to create them in Illustrator (so I can use them later on if I need to resize them flawlessly). Second, I need to send them to PhotoShop so I can resize them into their respective sizes.

So, when I first go into Illustrator I'm presented with this settup screen. What would be the optimal settings?

enter image description here I would think RGB instead of CMYK, but I really don't know. Also, when I'm creating stuff, I want to make sure everything is even, so align to pixel grid would be smart. I do NOT understand why you wouldn't want to use the pixel grid. Just putting it out there.

Then, I have my icon. Do I go to File -> Export, to get it to photoshop... or can I just select it and copy it and paste it.

When I paste it, I get a couple of options:

enter image description here

Again... which would be optimal to pick? I need to make sure it aligns to the pixel grid as well (I think).

I know this is a lot of questions, and it's not just one definitive question. IT IS however to get a definitive answer on a process.


There have been some updates to illustrator now, and I'm still wondering if my "Advanced Settings" below are "correct" for making icons for Android and iOS.

enter image description here

Also, I would like to cut photoshop out of my process, and simply save for web from Illustrator. I'm trying to save for web now, and there are a lot of options.

I have a single color icon. Can anyone tell me what is the best way to save my image? I want full quality. I don't know how to choose original. I don't want any compression.

1/22/2014 5:40:00 PM

Accepted Answer

General workflow

Just to clear up your first point, your workflow is fine but it isn't the only accepted solution. Some people use only Photoshop (hopefully with vector-based shapes); some go with purely Illustrator; and many use a hybrid of the two such as your description.

Most people using a hybrid flow would jump from Illy to Photoshop for additional features. Illustrator can handle exporting the sizes. I would use a dedicated artboard for each size, but you can actually do it from the Save for Web dialog if you like.

Illy to P'shop

Export to PSD is a good solution for moving a whole file into Photoshop. Something like a mock-up. It would also be a good fit for complicated icons. If you notice any weird flattening, try simplifying your layer structure.

I work with a developer who prefers that I export Illy art to a PSD before delivering it. I've found some oddities with this method but he prefers them to dealing with Illustrator directly ;)

For bits and pieces of a design or relatively simple icons, pasting to Photoshop is fine. There are a couple of choices to make here.

  1. If you intend to manipulate the objects in Photoshop, you'll want shape layers.
  2. If you're only positioning your Illy art in a PSD, you want a Smart Object. That way you can easily jump back to Illy to edit.

I'm not sure why you'd want a path or pixels. Thanks to Adobe for providing options, I just can't think of a real world use for them.

Color Mode

RGB. You have no use for CMYK here.

Pixel Grid

This is a matter of working preference. When you have your preview mode set to pixel preview, it's going to snap to the pixel grid anyway. I prefer to leave this unchecked and do the aligning myself. Just make sure any additional artboards you set up have their origin on the grid. Having an artboard with an origin of x: .5 will make you crazy until you track it down!

1/14/2013 6:23:00 AM