Good Image Design Parameters?

Questions
#1

Are there good design parameters to adhere to when creating custom images?

i.e. certain size, bit depth, etc.

The custom images I’ve created so far seem to be blurry/pixelated/bad when in the designer and deployed on the tablets. I don’t know if they have too much detail or maybe I’m doing something wrong in their creation.

In the designer, they’re all set to UniformToFill for the Stretch property.

See below for one of my button examples. The original PNG is 1800 x 1050, so definitely quite large, but simple at the same time. You can see in the designer how it’s hard to read the letters and not smooth at all. It looks the same in the tablets.

image
image1199×1387 76.5 KB

#2

Remove the text from the image (essentially making it just an icon). Create a button and use your icon and set the IconPosition to Top. Add your text to the text property

I don’t know the technical terms but using text in an image won’t give you the 1:1 pixel ratio sharpness.

#3

Don’t forget also to check out the built-in icons. There’s a “Gauge” icon you can use.

image
image1909×1659 253 KB

#4

I’ll start using more of the built in icons, but I think I figured out the issue.

It seems that scaling images is the problem, so try to have the images close to size you ultimately want them to be.

I resized the left image below to be a 50 x 50 px icon while the image on the right is the original 1800 x 1050 px.
image

#5

I had another response I thought I posted the other day but apparently it got lost or I never hit the reply button. Here’s what I meant to post…

Don’t base this off the results you see in the simulator. You likely have a standard resolution PC monitor (1920 x 1080), not a newer QHD (2560 x 1440) or 4K model (3840 x 2160). You will have this problem on a standard HD monitor. I had the same problem a few years ago. After I upgraded my graphics card & bought a new 4K monitor this is not an issue. You can use higher resolution photos & they won’t look distorted when shrunk. Test on your actual phones & tablets & check to see what resolution they have. If they have a resolution higher than your PC monitor you’ll probably want to make them a little larger. You may want to use 100 x 100 or 150 x 150. 1800 x 1050 is way overkill for something like this. But I think you’ll find that 50x50 will not look very sharp on a QHD or 4K display.