FullScreen Overlay Image size....

Cableguy

Expert

Licensed User

Longtime User

• Jan 26, 2016

• #1

Hi guys....

I'm about to start talking one of my major challenged skills, GRAPHICS!

I'm planning on creating a full screen Overlay, which will have a transparent middle section...

Due to the modern Screen Sizes in modern Devices, I was left wondering what should be the "default" picture size in pixels, so that the Image would look good in any device, any density..?

So I created a poll. (the values are in pixels, and density is 1)

 

S

sorex

Expert

Licensed User

Longtime User

• Jan 26, 2016

• #2

I entered 800x1280.

that's ~ x2.5 to oversize to HD which wouldn't noticable I guess. and ~ /2.5 for 320x480 resolutions.

 

JordiCP

Expert

Licensed User

Longtime User

• Jan 26, 2016

• #3

Also 800x1280 or similar

If the background picture cannot be stretched, I would recommend to have the original bitmap with some "extra bits wide", as Android screens can have different aspect ratios (which can range from 1.333:1 to nearly 2:1), so on a particular device you can make the image fit vertically and can crop it horizontally depending on its aspect ratio.

 

wonder

Expert

Licensed User

Longtime User

• Feb 2, 2016

• #4

4K

No, but seriously, your Photoshop/Gimp project should be at least twice as bigger as the final output.
If I were you, I'd compose everything in 4K, and then output all 4 scaled down versions (1920.png, 1280.png, 960.png, 480.png).

Let your app measure the user screen and decide the most appropriate size to use.

To minimize file size when using photoshop, do not use the regular "Save" function.
Use "Save for web" instead.

 

JonPM

Well-Known Member

Licensed User

Longtime User

• Feb 2, 2016

• #5

wonder said:

4K

No, but seriously, your Photoshop/Gimp project should be at least twice as bigger as the final output.
If I were you, I'd compose everything in 4K, and then output all 4 scaled down versions (1920.png, 1280.png, 960.png, 480.png).

Let your app measure the user screen and decide the most appropriate size to use.

To minimize file size when using photoshop, do not use the regular "Save" function.
Use "Save for web" instead.

Click to expand...

+1

 

Cableguy

Expert

Licensed User

Longtime User

• Feb 2, 2016

• #6

@wonder, please define me a 4K screen Layout... 4XXX by ?????

 

JonPM

Well-Known Member

Licensed User

Longtime User

• Feb 2, 2016

• #7

4k is 2x 1080, so 3840x2160

 

Cableguy

Expert

Licensed User

Longtime User

• Feb 2, 2016

• #8

thanks @JonPM

 

LucaMs

Expert

Licensed User

Longtime User

• Feb 2, 2016

• #9

I would use 2 bitmaps: 1 for low res devices, 2 for high and select it by code based on screen res.
In both cases the bitmap will be scaled, but I think in the best way possible.

 

ilan

Expert

Licensed User

Longtime User

• Feb 2, 2016

• #10

1080x1920

 

S

sorex

Expert

Licensed User

Longtime User

• Feb 3, 2016

• #11

what's the lowest resolution on phones these days? (non smart watch)

I have a phone with 240x400 and several others are 320x480 I believe. So I keep that always in mind.

I guess most of the brands use double of that as a minimum as screens are way cheaper now.