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:
- Open Photoshop
- Create new document
- Add new Layer
- Delete the Background layer
- Select the Ellipse Tool (not the Elliptical Marquee Tool)
- Left-click and drag on the Canvas
- Type 16px for the Height and Width in the dialog that pops up
- Click Ok, and the properties for the vector shape we just added looks like this:
- Right-click the shape in the canvas, and select
- Leave Feather at "0" and check
- Under the
- Open the Save For Web dialog (ctrl + shft + alt + s)
- The following are 1 of the 20+ settings patterns I tried:
- Review the saved image:
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.
You want to choose PNG-24 in the second drop-down:
Your dot should look like the example on the right 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.