1. Download our Official Android App: Forums for Android!

Apps Why does our design look so bad on different resolutions? Urgent help needed

Discussion in 'Android Development' started by Hansen88a, Apr 23, 2016.

  1. Hansen88a

    Hansen88a Lurker
    Thread Starter
    Rank:
    None
    Points:
    15
    Posts:
    1
    Joined:
    Feb 23, 2015

    Feb 23, 2015
    1
    0
    15
    Male
    Hello

    We're having some major issues with our designs looking horrible on different screen resolutions even though we think that we sliced all the assets correctly. We planned to launch a few days ago but because of this issue we couldn't. Some help is very much appreciated!


    We have a .psd file in XXXHDPI (width: 1440, height: 2551) with all the design assets that you see in the attached "Original" image. We sliced the design into 4 assets:
    - The logo
    - The background pattern with the icons in the white area
    - The red bottom area
    - The game images/cards

    We used http://jennift.com/dpical.html to calculate the DPI for each of the 4 assets. Then we used Photoshop to "Save for web" (.png file) to all of these sizes xxxhdpi, xxhdpi, xhdpi, hdpi, mdpi and ldpi. We trippled checked to make sure that the sizes of each asset is correct and to us it seems like they are. We even tried using Photoshop scripts that does the slicing automatically.

    Example, the red bottom asset which is full width in the design has the following sizes:
    xxxhdpi: 1440 x 930
    xxhdpi: 1080 x 698
    xhdpi: 720 x 465
    hdpi: 540 x 349
    mdpi: 360 x 233
    ldpi: 270 x 174


    You can see the problem in the 3 below links. The proportions is completely wrong and the design looks horrible. What's the problem? What did we do wrong?
    4 inch: https://drive.google.com/file/d/0BxdUJSq-tNewVWtlOU9qdFR6QlE/view?usp=sharing
    5 inch: https://drive.google.com/file/d/0BxdUJSq-tNewLUJyeF8zN1pCOGs/view?usp=sharing
    6 inch: https://drive.google.com/file/d/0BxdUJSq-tNewQTFpN2RNSUFlSDQ/view?usp=sharing


    Potential issue:
    The designer sent us this design with the following attributes:
    Width: 720 px
    Height: 1275 px
    Resolution: 72 px/inch

    I guess a full screen Android design in XXXHDPI should have the width of 1440 px and not 720 px? So what we did was change the image width to 1440 px with the height proportionally changing to 2551 px. Even though I scaled up the entire file the quality of all the assets is still just as good as in the original size which I think is because the designer created the assets in vector in Sketch.

    We might have made a misstake here... But still, the design quality is good. It's just the proportions on the different screen resolutions that's wrong even though I think we sliced the asssets correctly and into the right size?
     

    Attached Files:


    Advertisement

  2. starkraving

    starkraving Android Expert
    Rank:
    None
    Points:
    323
    Posts:
    2,484
    Joined:
    Apr 27, 2013

    Apr 27, 2013
    2,484
    1,363
    323
    Male
    Contractor
    Las Vegas, Nv
    Have you thought about vector images vs pngs? They seem to scale better and support multi DPI devices better on the whole. A lot of devs are going or have gone to it as well as android is itself.
     

Share This Page

Loading...