: 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

@Jessie844

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!

Vote Up Vote Down

@Ravi4787994

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.


If you intend to manipulate the objects in Photoshop, you'll want shape layers.
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!

Vote Up Vote Down