Creating graphics for Android/iOS/Mobile Devices

Question

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?

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:

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.

UPDATE FOR BOUNTY:

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.

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.

Answer 1

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!

Answer 2

So the Artboard x. :5; plainclothes was just making the point that if you have your artboard set up this way then your work will all be slightly off. You can check that this is not the case in Artboard options;

You can see the artboard is selected at the left side and at the top right is where the x and y options are that you might want to toggle. (you might want it at 0)

Other than that your settings seem fine, just like I mentioned earlier, don't forget to alter them to optimise for different screensizes, as mentioned here and here and for iOS here

Edit

If you are still unsure about your saving this answer should help you. You do not need Photoshop as that would resize as bitmap. But for icons in Android devices, if you want to support multiple screens then you need to save accordingly (as linked above -some further info below)

From the Android Developer site;

Screen density The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen. For simplicity, Android groups all actual screen densities into four generalized densities: low, medium, high, and extra high.

The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

Further info from the guys over on StackOverflow;

The ldpi, mdpi and hdpi refer to screen density, which means how much pixels can fit into a single inch.

the ratio in pixels between them is:

ldpi = 1:0.75 mdpi = 1:1 hdpi = 1:1.5 xhdpi = 1:2 xxhdpi = 1:3 so lets take an image with about the size of 100X100:

for mdpi it should be 100X100 for ldpi it should be 75X75 for hdpi it should be 150X150 for xhdpi it should be 200X200 for xxhdpi it should be 300X300 this way, for screens with the same size but different DPI, all the images seem the same size on screen.

Also you have multiple screen size types small, normal, large, xlarge and each one of them can be ldpi, mdpi, hdpi, xhdpi or xxhdpi(Nexus 10).

You can try to create a splash screen image that fit to each and every screen type which gives you 4*5 = 20 different images (it seems to much for me).

Good luck with that app!