Solved

Problem with GIF Creation using Fireworks

Posted on 2006-07-05
10
481 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:cobra502
Comment Utility
Doesn't look like I'm going to get an acceptable answer. 100 points for trying.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Expert Comment

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
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 …
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now