Making a Fireworks png semi-transparent for the web

Posted on 2013-09-23
Medium Priority
Last Modified: 2013-11-19

Using Fireworks CS5 - windows

I need to create a small background png that will be semi transparent for a background color in a drop down menu.

Here's what I have done so far.

I created a canvas 20px by 20px.

I selected transparent as a background

I created a rectangle and filled it with a color.

Then from properties I selected 70 percent transparency for the rectangle, and left Normal in the dropdown.

During the export via Image Preview I selected PNG 8 with index transparency.

However, when  I use the image as the background in a menu it is not transparent.

It could be a problem with my css, but first I want to rule out that I made a mistake creating the transparent image.

Are the steps I did correct? For example, is an index transparency what I want?  OR an alpha transparency.  I assume the PNG8 is correct?   Should I have selected something other than "Normal" from the dropdown in the properties panel?


Question by:Rowby Goren
  • 2
LVL 26

Accepted Solution

David Brugge earned 2000 total points
ID: 39515625
There is a difference between PNG-8 and PNG-24.

PNG-8 is very similar to tiff format. It allows just one shade to be set to transparent, whereas PNG-24 allows a full range of transparency.

This means that you can have regions of 100% transparency with a PNG-8, but not shades or tints.

Try saving as a PNG-24 and everything should work.

Indexed means that one shade and one shade only is transparent, alpha means that a whole range of 256 shades can be transparent.

Author Comment

by:Rowby Goren
ID: 39515648
Thanks D_Brugge

I am on the road but will test this later.

Appreciate your clarification.


Author Comment

by:Rowby Goren
ID: 39617564

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to create blended and gradiated shapes in Illustrator using the blend tool Draw two shapes, one of them in a different color: Select both and create a blend by going to Object > Blend > Make: Blends can also b…
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…

619 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question