: How to Remove Jagged Edge (Aliasing) on a Straight Diagonal Line This is 120px X 283px dimension, PNG image. When using it in website the same image dimension is set through css but in the

@Smith574

Yes, there is a way you can get rid of this Anti-aliasing with this lines.
But you'll just have to make this lines as paths with the Pen Tool (probably redraw). And then //Right Click> Make selection> Uncheck the Anti-Alised box.

After creating the selection, do a simple fill with red color (Alt+Backspace).

I'd like to know if that's what you meant.

Vote Up Vote Down

@Martha945

Saving it to PNG-24 is the best you can do.

By the way, please check my example, this is a transparent PNG-24 image below.




The first 3 lines are created in Illustrator and placed to
Photoshop as Smart Objects. This is a lossless method, the line is drawn every time from the source, which is a vector based line.
The 4th was a rectangle I rotated to this angle. Please note, every
time you rotate a pixel based layer, it will reduce the sharpness.
This means a very little bit loss of quiality as you can see.
The 5th is painted with a 100% hard brush.


So the point is, it really matters, how you create an object, when the quality is this important for you.

The other thing is connected to the first answer, as you can see the first 3 lines, the first looks like a bit better, and the third is worse than the second. This is because narrow angles produce lot of pixels having a bit of opacity, and this makes it a little blurry.

Vote Up Vote Down

@Goswami567

Use PNG-24 instead of PNG-8 to save your file. The jagged edges won't be a problem.
A pattern when saved with PNG-8 appears like this when zoomed.


When the same pattern is saved with PNG-24 it appears like this:


The difference is that PNG-8 can save upto 256 colors while PNG-24 can save a million colors( I hope you can calculate the exact number by the use of number 24 ;) )

The images are at the same scale and the difference is visible.

Obviously the size for PNG-24 is large compared to that of PNG-8.

Vote Up Vote Down

@Berryessa866

This is a product of using diagonal lines on a grid (which is essentially what a PNG is: a grid of pixels).

Here's a diagonal line on a grid. Each of the squares represents a pixel, greatly enlarged here. Some pixels need to be only partially coloured.



It's not possible to colour a pixel like this. It needs to be all one colour. Without anti-aliasing, the pixel is either the foreground or background colour:



The black line on that image represents the ideal edge. Whether the underlying pixel turns out foreground or background depends on which side of the ideal line most of the pixel lies. You can see that the ideal line needs to be shown as blocks. These are called jaggies.

One way some packages help with this is to anti-alias the edge, which means producing a gradient of colour rather than the simple binary. From the top image, the resultant colour depends on the percentage of the pixel inside the shape. If a pixel is 25% inside and 75% outside, its resultant colour is 75% along the colour gradient from outside to inside.



This provides a visually smoother edge.

It does look as though your troublesome image is already anti-aliased (I'm sure Photoshop will do that; I used Paint Shop Pro here), in which case it's probably as good as it will get. There is a trade-off between number of graduations [four here] and sharpness of line.

However: in your image, the anti-aliasing is going from red to white, and not to grey (the background colour). If you can set it to anti-alias correctly between the two colours which should be adjacent, you should find the result is better.

Vote Up Vote Down