If you haven’t already, you’re bound to get assigned something that’ll require you to do some UI for an iOS or Android project. Here are some tips.
As pictured above, there are five typical densities to deal with across iOS and Android, which fall into four main groups:
- non-Retina (iOS) and mdpi (Android)
- hdpi (Android)
- retina (iOS)
- xhdpi (Android)
Your process should be something like this:
- Figure out the largest iOS device we likely want to go after, and get its screen resolution. Let’s say we want to target an iPad retina, which is 2048×1536. Let’s now double that resolution.
- We’ll do our mockups in those new dimensions, 4096×3072 (72dpi), within Photoshop.
- As you break your UI pieces apart and export them out for developers, save them as email@example.com (or whatever file format you’re using).
- Then, you’ll want to make copies of all those items, take off the @2x part of the filename, and shrink them all in half. So for example, a 200×200 icon is now 100×100. These smaller images will be for the regular iPad.
- Figure out the largest Android device we likely want to go after, and get its screen resolution. Let’s say we want to target a Nexus 10 tablet, which is 2560×1600.
- We’ll take those dimensions, and multiply them by 2.25 (225%), and build our file in Photoshop at 5760×3600 (72dpi).
- Break your UI pieces apart and export them out as PNG files.
- Download 9patch-resizer. (get the newest .jar file) Save it to your desktop.
- This part is clumsy, but the end result is worth it.
- Open terminal.
- type in cd desktop
- Type in java -jar Resizer_1.3.1.jar
- Make sure Input density is set to xhdpi
- Check all boxes except for tvdpi
- Drag ALL your images on top of the arrow
Then end result? Every single one of your UI elements is automatically resized, and placed in pre-named folders, just the way Android developers need them.
Questions? Give me a shout.