Solved

Problem with GIF Creation using Fireworks

Posted on 2006-07-05
10
483 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
  • 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

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.

Question has a verified solution.

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

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.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.

830 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