Blurred Edges?

Hello, so I’ve been asked to create some UI for a game - I’m just a Concept Artist so graphic design isn’t my strong suit, but I’m willing to learn. The programmer needed an angled rectangle at 16 x 512px, PNG in white.

I produced this in photoshop:
(it’s black for visibility here)

But he says there is blurring at the edges and wants it crisper?
(the white is mine)

I’m not sure how to go about this… some help would be greatly appreciated!

At only 16 px high, a diagonal line will be stepped. The blur is anti-aliasing, aimed at minimizing the stepped appearance.

Ask the programmer if they can use a vector graphic.

1 Like

thank you! I’ll ask them :slight_smile:

16 x 512px at what resolution?

For whatever reason, the angled portion is anti-aliased into a blur that exceeds the anti-aliasing necessary to smooth out the stepped, pixelated look that would be there without the anti-aliasing.

There are about a dozen different things you could have done wrong to create this excess blurring. The problem is finding what you did to create it and not doing that. That’s not especially insightful advice, but there’s no way for me to know what you did or didn’t do.

As for an SVG file, that’s a vector file that will anti-alias at the appropriate resolution for the display on which it will appear. If SVG works for whatever the programmer is doing, yeah, it’s a good alternative. If what the programmer is working on doesn’t support SVG, you’ll need to figure out how to work in Photoshop without the edges getting unnecessarily blurred.

16x512? So, 16px high.

But your screen capture shows the edge of a button (?) ending in the letter t which is clearly more than 16px tall. So, they (IMO) gave you the wrong specs. or scaled it up to fit which is causing the blur. That’s my 2 cents.