: 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

@Reiling762

Posted in: #AdobePhotoshop #Transparency #Vector

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 Make Selection
Leave Feather at "0" and check Anti-Aliased, click Ok.
Under the Image menu, select Crop
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.

Vote Up Vote Down

Login to post a comment!