Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating base PSD to design Android App UI for mdpi, 320/480px device

I'm starting my first Android Phone design work. I have some experience with iPhone, iPad design but Android is totally different, I'm even not sure how I should create my base template.

Here is the device info I'm going to design. the app that will work only on this device, no need to multiple screen compatibility thing.

  • mdpi
  • 256K color
  • 3.5"
  • ~165ppi pixel density
  • 320px/480px

So, do I create my photoshop file for 320px/480px, 72px resolution, rgb?

enter image description here

Appreciate helps!!!

like image 714
designer-trying-coding Avatar asked Feb 07 '12 21:02

designer-trying-coding


3 Answers

Google has made a whole site dedicated for your needs: http://developer.android.com/design/index.html

In your case, your PSD settings should be setup like this:

enter image description here

NOTE/EDIT: Notice DPI is set at the default of 72. This is because DPI is meta data for printers. When you read DPI in phone specs, they are talking about the physical representation of how far apart the LCD is packed together. Resolution of the image (320x640) is the only thing you need to care about.

like image 155
Tom Avatar answered Oct 20 '22 10:10

Tom


Have you looked at the Android Design site? It's specifically designed for... well designers.

Look at the devices display section and also the supporting multiple screens page to get an idea of what the general categories of screen sizes are and what an acceptable size and range for these is.

Android in general uses DIP's (Display independant pixel) so the actual pixels per inch depend on the screen you are creating art work for. You have to design for xlarge, large, medium and small screens with differed densities. General advice is to start with medium density screens and then you can increase density and decrease it in your artwork as needed. The link above gives the general dp dimensions of each screen size and density ranges of different types of screens. There should also be some info about converting dp to pixels.

While google frowns on what you are asking (designing for 1 device in particular), you said the device as 166ppi so you could just use 165 pixel / inch in your setting and set the height and width of the PSD depending on the size of your screen (whatever it's width and height is in inches).

This Smashing Magazine article on designing for android should really help. It's old but relevant.

like image 2
Ali Avatar answered Oct 20 '22 10:10

Ali


Android is very different. If you learn how to do use the properties offered by android the right way it works greats.

Quote from developer.android.com

Each screen size offers different possibilities and challenges for user interaction, so in order to truly satisfy and impress your users, your application must go beyond merely supporting multiple screens: it must optimize the user experience for each screen configuration.

There are some tools you should get to know as well such as 'draw9patch'

The best thing to go off of is to simply create a layout in Photoshop just to get the layout down. It will not really matter what exact size as long as you have a rectangular shape. Make your layout and then start to make it fit in android.

Many great tutorials online, but as I mentioned before. Create your layout, then start to customize it for android by using tools such as draw9patch

like image 1
EGHDK Avatar answered Oct 20 '22 10:10

EGHDK