Photoshop Question posted in
The official user guide can be found here.

Background image dimension for Navigation Drawer header – Photoshop

Basically I liked the background used by Mr. Jonathan Lee for Navigation Drawer header back ground in google official link http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content

So I wanted to reproduce something similar inspired by that. I believe that I need to make a similar design in photoshop and set it as the background image. But the question is, what should be the dimensions and pixels so that it matches different kind of devices?

The above link has guidelines for icons and margins, but I haven’t seen any dimensions mentioned for that background.

Does anybody have any idea or link that can help?

Tags:

3

Answers


  1. 0

    I would recommend using adobe illustrator as it works great with ui design. Most mobile devices/tablets have a width ranging from 320px – up to 1080px and still increasing as new phones/tablets are released. Scalable vector graphics works great with prototyping ui layouts.

    check out: http://www.uxbooth.com/articles/considerations-for-mobile-design-part-2-dimensions/

    Login or Signup to reply.
  2. 0

    Width is:

    Mobile:

    Width = Screen width − 56 dp

    Maximum width: 320dp

    Maximum width applies only when using a side nav on the left. When using a panel on the right, the panel can cover the full width of the screen.

    http://www.google.com/design/spec/layout/structure.html#structure-side-nav

    Height is determined by the aspect ratio of the image you want:

    http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-ratio-keylines

    Probably 16:9

    Login or Signup to reply.
  3. 0

    Unzipped an APK and this is what I have found out-

    mdpi-
    width=384 pixels
    height=216 pixels
hdpi-
    width=576 pixels
    height=324 pixels
xhdpi-
    width=768 pixels
    height=432 pixels
xxhdpi-
    width=1152 pixels
    height=648 pixels

    Image source= Google’s Newsstand Application, Tool=Adobe photoshop 7.0

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search