: How to get rid of jaggered edges in Photoshop? I used Photoshop and Illustrator to draw a black circle of size 44 x 44px. For some reason, the edges aren't smooth. I've exhausted myself of

@Shanna688

Assuming you mean photoshop mix.

The photo appears to be pixellated because it is on the wrong scale. If you enlarge the photo it should be fine

Vote Up Vote Down

@Cofer715

For raster images, you are dealing (basically) with a grid of squares (pixels). When the difference between the size of the arc and the size the pixel is small, the squared edges of the pixels have a larger impact on your perception of the smoothness of the arc.

The jagged edges are called aliasing ( en.wikipedia.org/wiki/Aliasing ). Anti-aliasing in raster images is essentially a blurring technique to minimize the effect. This usually means a "halo" of color which transitions from the edge color to the background color.

Often for icons, this is a fade from black to white, but you probably want to create icons which are suitable for other colored backgrounds, and a fade to white will give rise to a light grey halo which will contrast on dark backgrounds.

To fix this, you can do a "fade to white" and ALSO incorporate an alpha transparency for the same region which fades from 100% opaque to 100% transparent. For the web, this pretty much means saving as a 24 bit PNG file with alpha channel.

Vector art is also a good method (see Ryan's answer) because the rasterization (display) of the image happens at the moment it is rendered, rather than "pre-baked" (a raster PNG or JPG) so such images can be as high resolution as the output device they are on.

TLDNR; ensure you provide the correct sizes for iOS app; anti-aliasing + alpha channel transparency; if needed, possibly avoid a dark outline/profile (something mid-grey)

Vote Up Vote Down

@Sims5801359

At a small resolution in a raster format you're always going to have some jaggedness, especially on a round shape. Some jaggedness can visually appear smoother by making sure Anti-Alias is turned on.

For best results if possible though you'll want to use an .eps/.ai file or more likely an .svg file since you plan on implementing it into a web based application. Then it is being calculated from a vector rather than raster.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="150" cy="150" r="22" fill="black"/>
</svg>

Vote Up Vote Down