Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 491
  • Last Modified:

Problem with GIF Creation using Fireworks

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.  
0
cobra502
Asked:
cobra502
  • 3
  • 2
  • 2
  • +2
1 Solution
 
ZefferCommented:
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 maximum..so 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 showing..select 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..

http://jefte.net/design/the-state-of-png-transparency/ 

Z
0
 
cobra502Author Commented:
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?

Thanks.
0
 
ZefferCommented:
Yes I do have another idea..build 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 :)

Z
0
Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

 
cobra502Author Commented:
Doesn't look like I'm going to get an acceptable answer. 100 points for trying.
0
 
0verkillCommented:
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.
0
 
cobra502Author Commented:
Overkill,
             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.
 
0
 
0verkillCommented:
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:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp
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.
0
 
Havin_itCommented:
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 :)
0
 
matrixnzCommented:
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.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now