Hansen88a
Lurker
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?
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?
