Update: I’ve fleshed out this post and it’s now on CommunityMX as a more detailed – and free – article.

 

In the wonderful world of web design, there are two main graphic camps – Fireworks users and Photoshop users. This post isn’t so much about the different camps – there’s tons of articles out there on that topic – but more so on the reality that sometimes – maybe even often – a designer either has to work with both applications, or has to prep artwork to go from Fireworks to Photoshop.

The Conundrum

This article is inspired by a real world incident that happened just this week. A designer new to Fireworks (but thankfully open-minded and ready to test the FW waters) was having issues with some icons he was creating. These icons had to be usable on any background color or image, and blend seamlessly. The problem was this; flat PNG files exported from Fireworks weren’t retaining anti-aliasing when opened within Photoshop. The files had to be usable in Photoshop because other design team members still used PS for their web comping. (Yes, this is the true, heart-wrenching and inspiring tale of Fireworks conversion – it’s happening, but slowly, one designer at a time . . .)

The exported files were opening in Photoshop, but there was no anti-aliasing on the icon edges. The result is a pixelated, harsh edge around the icon that was impossible to blend into a web page design.

After some discussion and little success,  it was clear that a more visual approach was needed. I asked for and quickly received a sample file from the designer.

Matte color for PNG and GIF can be changed in the Optimize panel.

While the original file DID have a transparent canvas (mandatory for PNG transparency to work, be it 8-bit or 32-bit), I discovered the culprit was the matte color. If the matte color is set to any color, anti-aliasing problems occur.

In the sample image, the matte color in the Optimize panel was set to white – the default matte color in Fireworks. This adds white pixels around the edges of the image, so it blends better with a white background.

This technique is often used with GIF files that have non-square edges (circles, triangles, rounded corner rectangles), to give the impression of a seamless blend with a solid background color. It can also be used with 8-bit PNG files using the standard indexed color (1-color) transparency setting.

The method doesn’t work so well with gradient or photographic backgrounds, because the image can only have one matte color. Likewise, because the matte color adds edge pixels of one specific color to the exported image, the “halo effect” appears as soon as the image is placed on top of a background color that doesn’t match the original matte color.

 

 

The Fix – almost

No matte color + transparent canvas=anti-alias support for non-square edges!

The fix I thought would be very simple indeed. I changed the matte color to none and then I exported the file. (FILE > EXPORT). Transparency and anti-alias were supported when the exported png file was opened in Photoshop.

However, there was a some weirdness happening in Photoshop, nonetheless. As far as I can tell (and I am no Photoshop guru), PS doesn’t understand 8-bit pngs with transparency. It maintains the desired effect, but it locks the layer and I couldn’t find a way to unlock it.

I always like as much flexibility as possible, and don’t like it when I can’t unlock a layer.

Tip

Did you know that Fireworks is the only application that lets you add alpha transparency to 8-bit PNG files? This is not only cool, it means you don’t always need those heavier, 32-bit (24-bit+transparency in PS) files when you want partial opacity.

So, I went back to Fireworks, switched the Optimize setting to PNG 32 (in Photoshop, this is PNG 24 with transparency, which PS does understand). I made sure there was still no matte color and exported again.

Success!

No halo! No weird edge pixels! This image was magnified in Photoshop so you could better see how well the corners blend in with the background colors.

When I  reopened the file in Photoshop, all was well! I added a new layer with a gradient fill to test the rounded corners and the shape blended as desired, even with a multi-colored background. Coolness all around.

So when you’re dealing with anti-aliasing on a transparent background, remember it all comes back to the matte color, though, regardless of which format you decide to use.

Tip

It’s also worth noting that you can even reopen the a flattened PNG in Fireworks, change the matte setting to it, re-export and it too will work in PS. You just won’t have an editable vector object in Fireworks when you open a flat PNG file.


Jim's home on the Web is proudly powered by WordPress and the Theme Adventure by Eric Schwarz
Entries (RSS) and Comments (RSS).

Jim's home on the Web

My thoughts and musings about photography, teaching and technology