Save a vector shape with transparency with a clean outline in Photoshop?


The problem I'm having is that after I've drawn a 16px by 16px, vector shape (circle), with a transparent background everything about the shape is as I need it, except that the anti-aliasing on the image makes the image look jagged when the background isn't white.

As far as I can tell when I'm saving the image in Adobe Photoshop I may be saving the image incorrectly in the "Save for Web" dialog screen. Desired result is a 16x16 (px) vector shape with a transparent background (so that it can hover a gradient when the image is placed on a web page). This image could be .gif or .png, I'll take either.

Steps to recreate:

  1. Open Photoshop
  2. Create new document
  3. Add new Layer
  4. Delete the Background layer
  5. Select the Ellipse Tool (not the Elliptical Marquee Tool)
  6. Left-click and drag on the Canvas
  7. Type 16px for the Height and Width in the dialog that pops up
  8. Click Ok, and the properties for the vector shape we just added looks like this:Shape Properties
  9. Right-click the shape in the canvas, and select Make Selection
  10. Leave Feather at "0" and check Anti-Aliased, click Ok.
  11. Under the Image menu, select Crop
  12. Open the Save For Web dialog (ctrl + shft + alt + s)
  13. The following are 1 of the 20+ settings patterns I tried:png Save for Web Settings pattern
  14. Review the saved image:final image, doesn't look like a smooth circle at all

As we can see this final image is not a smooth circle, I can't seem to smooth out the jagged border of the image. My other attempts are smooth but unfortunately the anti-aliasing doesn't remain transparent and resembles a white matte border, so if the background I place this image on top of is white, everything looks great, but the goal here is to place this image over a dark gradient background.

Help would be appreciated.

7/28/2014 11:44:00 PM

Accepted Answer

You want to choose PNG-24 in the second drop-down:

enter image description here

Your dot should look like the example on the right here:

enter image description here

I'm not an authority on the png (Portable Network Graphic) file format, but I'll explain what I do know about it.

An 8-bit png is limited to 256 colors, whereas 24-bit can have as many as 16-million colors.

My observation is that transparency is where you see the biggest degradation in quality, because you only have two levels of opacity in an 8-bit png, but you have nearly limitless levels in a 24-bit file.

7/29/2014 2:36:00 PM