Problem with GIF Creation using Fireworks

Posted on 2006-07-05
Last Modified: 2013-12-13
I am trying to create a graphic using gradient and transparency features.
The software I'm using is:
Dreamweaver 4
Fireworks MX and /or Fireworks 8

As I understand that you can only use transparent backgrounds in a GIF or PNG file (not a JPG).
I created a graphic in Fireworks using transparent background and the gradient feature. The gradient was linear with a texture of grain and a 0%. I saved the PNG file and exported a GIF file.

Using Dreamweaver, I created a html page. I added a table with background="Assets/Images/test.gif". When you viewed the table and its graphic, the background was transparent but the image was distorted and not smooth. It had vertical bars running from left to right with color from dark to light. When this graphic is viewed in Fireworks it has a smooth gradient from left to right with color from dark to light.  

I replaced the GIF with its PNG file. Now the image looked okay but the background was not transparent, it was a light gray color.

If I export the PNG file as a JPG, it looks okay, but as we said above it has no transparent background capabilities so it comes out light gray like the PNG file.

I don't care if I use the GIF or the PNG file, just one that is correct. Am I missing a parameter that needs to be set or something else? Any feedback would be appreciated

Thanks for your time and help.  
Question by:cobra502
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +2
LVL 23

Accepted Solution

Zeffer earned 350 total points
ID: 17047900
when you are exporting as a jpg or png the colour palette is millions of colours allowing soft graduation of colour blends or a gradient of a colour.
exporting in gif format allows for only 256 colours a colour gradient like you are doing is going to appear as bands of different shades.

in the export preview dialogue for the gif select 128 colours is probably 256 and see it the image is acceptable.

there are issues with png transparency not working in some browsers (Some versions of Internet Explorer included).. read some more here.. 


Author Comment

ID: 17052412
I'm running IE 6.
Gif at 256 is unacceptable.
I tried the changes to PNG, but it made no difference.

Sounds like, you're saying I can't do what I want because of limitations of GIFs and PNGs.

Any other ideas?

LVL 23

Expert Comment

ID: 17054816
Yes I do have another your page in Flash

Import your png into flash and a panel will open with options to keep the layers etc available .. that is uncheck..' import as flattened bitmap'.. if it is checked

when you export the flash movie you'll find the image beatifully rendered..just as it looks in Fireworks

With this approach you will need to either import or create all your graph info and whatever else you want in the 'table'.. as the flash movie will occupy a particular space in your html page that you can't put anything else on (as html)

but that space can hold an unlimited number of other movies and therefore layers of information.. so you could have as many gradient backgrounds as you like..alternating..merging ..changing colour..skys the limit :)

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.


Author Comment

ID: 17059101
Doesn't look like I'm going to get an acceptable answer. 100 points for trying.

Expert Comment

ID: 17077927
As Zeffer mentioned not all browsers support PNG transparancy, but if you say it's fine then just select "PNG 32" from the format menu when exporting.

A 24 bit PNG is essentially lossless, compressed, 24 bit bitmap. A 32 bit PNG is the same except it has an 8 bit alpha channel (transparency), so it should look exactly as the source does in Fireworks.

Author Comment

ID: 17086203
             I think you misread what I said. I said "... I replaced the GIF with its PNG file. Now the image looked okay but the background was not transparent, it was a light gray color."

The transperancy was not there. Thanks for helping.

Expert Comment

ID: 17143682
I did, my apologies. The background is grey because IE6 doesn't support png transparency. One option is to use a browser that supports png transparancy such as IE7, Firefox, or Opera. Another option is to use css to display the pngs in IE6 with certain limitations. The script can be found here:
If you don't need transparency between 0% and 100% and you can afford to split image into parts then that would also fix the problem. By exporting it as multiple gifs each gif needs a smaller pallate and the 'lines' can be elliminated.

Short answer; without browser support there's not much that can be done. Hope that helped some.
LVL 10

Expert Comment

ID: 17166949
A small observation, feel free to disregard.

It sounds like the table in which you will be using this background-image is of fixed dimensions (otherwise using a background-image would cause breakage at different screen-sizes).  I guess also that the table is not fixed upon the page (if it was, transparency in the table-background wouldn't matter, as you could just replicate whatever was under it in your background-image).

If that's correct, I should caution you that your overall design will probably break (or require a lot of horrid sideways-scrolling) for smaller screens, or when users resize the text.  Without knowing more about your whole design I can't specify a good alternative, but these are important things to bear in mind.

Cheers :)
LVL 29

Expert Comment

ID: 17354354
What about using PNG 8 Bit with transparency alpha transparency enabled, I've always found that it still looks better than gifs and ie will support it.

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Website cross platform development 6 43
Free stock image website 3 129
Any free software for printscreens 7 112
Need sample images: 720x480 - 72 dpi & 1920x1080 72 dpi 17 65
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this second Micro Tutorial in the series,  viewers will learn more basic shortcuts and functions of Illustrator. In this tutorial you will learn about the eyedropper tool, zoom , ellipses and more.
Learn how to download your full Prezi presentation for offline presenting. Prezi doesn’t have to be viewed and shared in a web browser, even with a free account you can download your full presentation to share with others. Be sure to download any vi…

739 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