I am working with Adobe Photoshop CS4. I wanted to create a round button of size 20px x 20px. To be comfortable I have created a round button with the size of 200px x 200px. The image is shown below:


The image is perfect. Now I want to resize this picture to 20px x 20px, because that is the size that I really need. But upon resizing the image's quality degrades. The black border seems to be distorted. As shown below:


How can I have the same quality of a 200px x 200px image with the size of 20px x 20px?

  • Any reason you aren't doing this in Illustrator? Commented Aug 23, 2014 at 16:45
  • @LaurenIpsum I basically don't work a lot with graphics. I just needed a quick solution and I knew how to use photoshop, so I asked about it.
    – ρss
    Commented Aug 24, 2014 at 21:13

2 Answers 2


If you circle and border is raster you will not able to get it looks good with downscaling. The best way is to draw a circle (shape) perfectly aligned to pixel grid and apply border as layer style. Sample:

enter image description here

  • Do you mean stroke as layer style? I didn't find border. Please see I am not an advanced user of Adobe photoshop.
    – ρss
    Commented May 25, 2014 at 13:15
  • Yes, sorry for confusion :) stroke for sure..
    – Vnovak
    Commented May 25, 2014 at 13:39
  • And yes, tune up your pixel grid like Joojaa said, just do subdivision - 10 instead 2.
    – Vnovak
    Commented May 25, 2014 at 13:52

A quick and dirty alternate answer. As this is by no means a trivial problem to solve. First off you may want to turn the grid on as follows:

  • Edit -> Preferences -> Guides, Grid and Slices...

    • set your grid size to 10 pixels and 2 subdivision
  • Then turn grid on with View -> Show -> Grid

This accomplishes 2 things. Fist it gives you a idea what the new grids are and you can now snap your sizes to grid. One of the reasons why your scaled image is loop sided is because it does not hit the pixels perfectly. Rather your pixels sit on the side causing it to be non-symmetric.

Now redraw the spheres to be centered on pixels and see if it gets better.

Scaled with thin line Scaled with wider line

Images 1-3: Original image, scaled down but pixel snapped with thin line, scaled pixel snapped but with 1 pixel wide line. Sorry the sizes are a bit different size due to pixel snap.

  • Actaully, it will not solve the problem. Perfectly algined 200px diametr circle with black border (all as raster) will not looks smooth and good after downscaling. Can show a comparision.
    – Vnovak
    Commented May 25, 2014 at 13:41
  • Added images showing that it sortof works. Like i say the problem has no perfect solution.
    – joojaa
    Commented May 25, 2014 at 14:14

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.