6

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!!!

designer-trying-coding
  • 5,994
  • 17
  • 70
  • 99

5 Answers5

7

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.

Tom
  • 1,095
  • 2
  • 12
  • 30
  • Thanks Tom!! why is it 160px Resolution? – designer-trying-coding Feb 07 '12 at 22:19
  • 1
    Because you said your screen was ~165ppi, ppi = pixel per inch. Also, the Android docs describe 160dp as the generally accepted size for MDPI. – Ali Feb 07 '12 at 22:22
  • Aha! ok Ali! now makes sense! – designer-trying-coding Feb 07 '12 at 22:23
  • This doc looks small to design. Can I make it like 2x of this size? Width: 640px, Height: 960px, Respolution same 160... will that be trouble for later? will I have to size down and fix elements? – designer-trying-coding Feb 07 '12 at 22:24
  • 1
    If you are using vectors then use any size you want. In the end the actual screen size really does not matter, what matters are the resources that you create (icons, buttons, images etc) these will have to be designed for various screen sizes everything else will be part of the layout. That's also why Google's documentation make no mention of the canvas size. Start with a canvas as big as you want, as long as you know things will scale down properly. – Ali Feb 07 '12 at 22:56
  • 3
    Also, design assets separately! Look at the [icon design guidelines](http://developer.android.com/guide/practices/ui_guidelines/icon_design.html) '**start with artboard section**'. – Ali Feb 07 '12 at 22:56
  • Ok Ali! you make perfect sense! I'm still stacked with canvas size from iOS design :/ ! For android, there is nothing like that. ps, for this app, I DO NOT need multiple screen size issue, this app is going to work ONLY on this mdpi device. So I design my icons for 4X sizes, and start 2X canvas size,,, – designer-trying-coding Feb 07 '12 at 23:05
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/7441/discussion-between-designer-trying-coding-and-ali) – designer-trying-coding Feb 07 '12 at 23:45
  • You should always use 72 ppi when using photoshop for IOS and Andriod alike...Dont use any other....When you design something digitally, resolution doesn't matter – Muhammad Ahsan Aug 25 '14 at 12:50
2

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.

Ali
  • 12,354
  • 9
  • 54
  • 83
  • thanks for the link Ali! I actually read all of http://developer.android.com/design/ , it doesnt say anything about this start point in PSD. I'm just wondering if I start with right Photoshop settings. – designer-trying-coding Feb 07 '12 at 22:07
  • Check out the smashing mag link I added. I think Smashing Mag will speak your language better. – Ali Feb 07 '12 at 22:20
  • Thanks Ali! according to the SM article, 320x480px is mdpi, i was told the device is hdpi. maybe my client is wrong. – designer-trying-coding Feb 07 '12 at 22:30
  • So the screen size hints at the fact that the device is `mdpi` ~160dpi is `mdpi` and `hdpi` is 240dpi (that's in the supporting multiple sceens document). Those numbers are ofcourse baseline and `hdpi` and `mdpi` can actually be ranges. In your case, the screen resolution, the dpi and the screensize would suggest the device is `mdpi` it is an understandable confusion if you are told `mdpi` is 160dp you assume anything higher than 160 would be `hdpi` (not true). – Ali Feb 07 '12 at 22:46
1

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

EGHDK
  • 17,818
  • 45
  • 129
  • 204
0

Because you said your screen was ~165ppi, ppi = pixel per inch. Also, the Android docs describe 160dp as the generally accepted size for MDPI. – Ali Feb 7 at 22:22

so why in google samples ( ex : IDEName\AndroidSDK\samples\android-8\NotePad\res\drawable-hdpi ) , if open image ( ex : app_notes.png ) in photoshop and press ctrl + alt + i , to see resolution , its 72dpi ! but Ali says MDPI = 160dpi , HDPI = 240 , ...

so its must be 240dpi , not 72dpi.

Dr.jacky
  • 3,341
  • 6
  • 53
  • 91
  • This is incorrect. DPI has nothing to do with a digital image. Only the image resolution. DPI is meta data for a physical space. Most commonly used to tell printers how far apart the dots need to be. For phones, the hardware is physically packing the LCD diodes together. In this case, you only need to worry about the final max resolution. This never occurred to me originally, so I edited this threads answer. – Tom Aug 26 '14 at 12:30
0

The bitmap requirement is similar to preparing graphics for print vs. the Web. If you have any experience with print production, you’ll know that a 72 PPI image will look very pixelated and blurry when scaled up and printed. Instead, you would need to redo the image as a vector image or use a high-resolution photo and then set the file’s resolution at around 300 PPI in order to print it without any loss of image quality. Screen density for Android works similar, except that we’re not changing the file’s resolution, only the image’s size (i.e. standard 72 PPI is fine).

Android Smartphones And Display Sizes

Baby Groot
  • 4,637
  • 39
  • 52
  • 71
Arun Jolly
  • 101
  • 1
  • 1
  • 6