: Illustrator Artboard dimensions for mobile ui design? I want to create one document with multiple (3) artboards in Illustrator for mobile wireframing/ui design. One for iPhone, Android and iPad.

@Sent7350415

There is a plethora of scripts out there for saving graphics from Illustrator for mobile. It's way faster than using "save for web". Here is one, but there are dozens. Plus you can write or edit them yourself. uncorkedstudios.com/blog/export-to-ios-photoshop-script

Vote Up Vote Down

@Angela777

My recommendation: create an Illustrator document using the "Web" profile, to ensure that "Align New Objects to Pixel Grid" is on. That way when you place new shapes onto any artboard, they are pixel-perfect, and will look clean on export at 72dpi. Also, make sure you are in Pixel Preview mode when designing so you can align shapes to the pixels.

Edit: Yes you can create more than one artboard at different dimensions. Just use the Artboard tool, and drag out new artboards in the Illustrator document.

Then, create each artboard at whichever size you prefer to work at: either @2x or not. Here is my goto list, in px:


iPhone 6: 750 x 1334
iPhone 6 plus: 1242 x 2208
iPhone 5s/5c/5: 640 x 1136
iPad: 1536 x 2048
HTC One: 1080 x 1920
[this is the device I have, but its pixel ratio is equivalent to the
most popular Android phones, namely the Samsung Galaxys, etc]


As you can see, I prefer working at full @2x (or more) resolution because during export of artwork I have to do less work. In general, the best way to gauge screen size is to just take a screen capture off of the device you are designing for, and look at the pixel size for that image.

Now, the part you are most interested in. As you already know, working in vector graphics is awesome. Infinite resolute support and (almost) infinite scalability. When you are ready to export the artboards do the following:


Select the artboard you are working with
File > Save for the Web
In the dialogue that opens, select the PNG-24 setting. Toggle
transparency on/off as you wish
Look to where it says Image Size. Here you can export the artboard at any size without loss of quality. You can do 50% size for your low-res devices. Or 100% size for the @2x device sizes I mentioned above.
When you change a size, make sure all values get updates in image size. You may have to click around into the width/height boxes a bit before that happens. Otherwise your export will come out at the original size.
Finally you will have a file at the right size, with minimal headache, and
compressed in file-size for use anywhere you want. My favorite from
here is to import the files onto an actual Phone/Tablet and then
thumb through them to get a feel for what the interface might look
like on an actual device.


Questions?

Vote Up Vote Down