I am making UI graphics for a screen with non-square pixels. To be exact, the horizontal distance between pixel centers is larger than the vertical distance.
If I draw a circle in Photoshop and export to a bitmap, it ends up a bit oval on the device screen.
I can fix this by setting the Pixel Aspect Ratio in Photoshop to match the screen. Shift-dragging a circle or square then does the right thing. It looks circular in Photoshop, the exported PNG looks oval on a PC, but then on the device screen it looks circular again.
This appears to be a bug in Photoshop. It might be worth reporting to Adobe as I can’t think of any reason that the current behaviour would be desirable.
I’ve come up with two potential workarounds:
- Create the round cornered rectangle at twice the width that you want it (for 1:2 pixel ratio), rasterise it and then reduce its width by 50%. This is
a bit messy and the ratio will need to be worked out for your real
- Create the round cornered rectangle in Illustrator (or similar) and then copy and paste it into Photoshop – this works fine for some reason.
Bizarrely, copying a shape from a Photoshop document with square pixels into a document with Pixel Aspect Ratio Correction also distorts the corner radii, which adds weight to the theory that this is a bug.