A white vector object with drop shadow displaying the way it is intended to.

Every once in a blue moon I run into a problem in Adobe Illustrator when using Save for Web. The issue occurs when saving a transparent PNG file that consists of a white vector object with a drop shadow. For some reason the white vector registers as 100% transparent in the save for web dialog box. Unfortunately, it isn’t just a display glitch. The file actually saves this way making the object, in this case a logo, useless.

The Adobe Illustrator Save For Web Menu displaying a PNG file with a transparency issue involving a White Vector object and Drop Shadow

The problem always seems to take me 5 or 10 minutes to resolve and drives me crazy. Usually I end up opening the AI file in Photoshop and then create a drop shadow and save it for web there. Today, I came up with a new solution. Simply enter the color editor and add 1% Black (K) to the white object. The human eye cannot detect such a small percentage of gray (at least mine can’t) so the vector object still appears white. When you save your slice for web, the white vector objects magically are no longer transparent. Thus saving you the step of opening the file in Photoshop.

Adding 1% Black in the color editor to the White Vector Object in Adobe Illustrator corrects the issue.

Hopefully this solution saves you some time also. If you know what the actual cause of the problem is I please feel free to explain it to me below.

The Adobe Illustrator Save For Web Dialog box with the vector object transparency issue corrected.