Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

This is 120px X 283px dimension, PNG image.

enter image description here

When using it in website the same image dimension is set through css but in the browser view it is showing like a saw like this

enter image description here

Is it possible to draw without any little curve?

Is there a file format or method I can save with that will reduce the aliasing on the line?

share|improve this question
    
you mention "the same image dimension" are you creating the line with pure .css or are you calling the image with .css? If you are using an image what is the format of the image and how did you create the image? –  Gramps Aug 15 '13 at 5:46
    
background: url("imagepath"); width: 120px; height: 283px; –  C-link Aug 15 '13 at 5:48
    
what is "imagepath" (.png, .jpg, .gif, .bmp, .svg, etc. etc.) Please edit your question with how you created "imagepath". –  Gramps Aug 15 '13 at 5:50
1  
if you're worried about the quality of the line why not code it with .css? –  Gramps Aug 15 '13 at 14:31
    
@Matt_2.0 Thank you for your suggestion, but I'm unusual to use this in css exactly the same. –  C-link Aug 16 '13 at 3:43
add comment

3 Answers

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.

Diagonal line on grid

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:

Pixellated diagonal line

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.

Anti-aliased diagonal

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.

share|improve this answer
add comment

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. Jagged edges

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

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.

share|improve this answer
    
Doesn't that also mean larger file sizes? –  Dominic Aug 15 '13 at 20:04
    
Why does the PNG-8 anti-aliasing use white? –  Andrew Leach Aug 15 '13 at 20:04
    
@dominic yes it means larger file sizes because more information is being stored. –  Anish Shah Aug 15 '13 at 20:09
    
But my example doesn't. It grades between red and grey. Perhaps the answer is not to use Photoshop. –  Andrew Leach Aug 15 '13 at 20:13
add comment

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.

Line types

  1. 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.
  2. 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.
  3. 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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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