0

I usually save my images (.png) by selecting an object followed by selecting the artboard and reselecting my object, then saving for web. This method has served me quite well till now. I need to save a very small image (circle 15x15px). This method cuts off part of the circle edges and the images are pixelated. I am using Illustrator CC 2017 21.0.0. Please see the images below. How can I save such a small image with it getting cropped off?

enter image description here

enter image description here

1
  • It is unclear to me if your screenshots are 100% size when uploaded. If they are, then you also have a GUI problem: your save-for-web preview as displayed is far larger than 15px. It looks like about 60px or so. This means your preview is zoomed in, probably because you are using dpi scaling or "retina" etc. which is may be a higher resolution simulating 1080p (I am guessing 4k monitor which would be 4x scaling of 1080p). The actual 15px circle may come off better at 1:1 pixel size.
    – Yorik
    Commented Sep 13, 2017 at 17:07

2 Answers 2

2

There are two parts to your question. It is helpful to look at the pixel grid version of your artwork if you are working at a size where that matters. Go to View > Pixel Preview or alt+ctrl+y.
You should notice that your artwork is pixelated and the edges extend a little outside the small circle shape. This is because a circle does not look like a circle when you only have 15px to work with.

How to avoid cropping the artwork
After selecting your artwork, right click and choose Make Pixel Perfect. This will try to align the shape to the pixel grid as well as possible. You should see that most of the pixels now fit within the bounding circle. Importantly, on the sides that would be cropped.

How to avoid it looking pixelated
This is a doozy. Your shape IS pixelated. It is being rendered by a screen that can only render pixels.
At 15px X 15px it looks like a circle. When zoomed in closer, it looks like a bunch of pixels. The software cleverly handles the conversion for you by antialiasing, blending the foreground (red) to the background (white) to make the edges appear smoother at smaller sizes.
If the circle is to be reproduced at 15 x 15 then you should let the software continue doing this.

1

Things you can try:

  • make the artboard 16x16px and center the circle
  • save the PNG with the 'Clip to Artboard' unchecked. This way only the object is exported, ignoring artboard limits which could affect your edges
  • save a larger PNG like 256x256px (there are options to rescale it visible in your screenshot) and scale the PNG back to 15x15 via CSS

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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