6

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.

But, rounded rectangles seem to ignore the aspect ratio. The rounding is skewed. Here is a screenshot with an extreme pixel aspect ratio of 2:1.

5

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:

  1. 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 world case.
  2. 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.