Solved

Problem with GIF Creation using Fireworks

Posted on 2006-07-05
10
485 Views
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.  
0
Comment
Question by:cobra502
[X]
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
10 Comments
 
LVL 23

Accepted Solution

by:
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 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
 

Author Comment

by:cobra502
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?

Thanks.
0
 
LVL 23

Expert Comment

by:Zeffer
ID: 17054816
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 

Author Comment

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

Expert Comment

by:0verkill
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.
0
 

Author Comment

by:cobra502
ID: 17086203
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
 

Expert Comment

by:0verkill
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:
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
 
LVL 10

Expert Comment

by:Havin_it
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 :)
0
 
LVL 29

Expert Comment

by:matrixnz
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.
0

Featured Post

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …

690 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