Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
Any reason you aren't doing this in Illustrator? – Lauren Ipsum Aug 23 '14 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 Aug 24 '14 at 21:13
up vote 1 down vote accepted

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

share|improve this answer
Do you mean stroke as layer style? I didn't find border. Please see I am not an advanced user of Adobe photoshop. – ρss May 25 '14 at 13:15
Yes, sorry for confusion :) stroke for sure.. – Vnovak May 25 '14 at 13:39
And yes, tune up your pixel grid like Joojaa said, just do subdivision - 10 instead 2. – Vnovak May 25 '14 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.

share|improve this answer
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 May 25 '14 at 13:41
Added images showing that it sortof works. Like i say the problem has no perfect solution. – joojaa May 25 '14 at 14:14

Your Answer


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.