1 person found this helpful
Export the background separately from the rectangle, and export the rectangle as a PNG 32, with a transparent canvas. Put them back together in Dreamweaver or the web page editor of your choice. HTH
PNG8 might be better. PNG32 requires special coding to get it to work in IE6, and even then it can sometimes fail. See this article:
PNG8 works without special coding and gives you up to 256 semi-transparent colors. (If FW doesn't give you your full range, try adding more with the color dropper.) See this article:
If you know none of your visitors use IE6, PNG32 should be fine, though.
thank you very much for your quick answer!
With PNG 32 the shadow and the gradient of my black box looks very nice. With PNG 8 it seems that I have not enough colours to achieve a nice gradient (see attached file;-(
If you have a nice tip how i Should use the color dropper I really would appreciate it:-)
Oh, do you know the best way to export the several images of a complete layout? Should i use the slices option or do i really need to hide all the other layers first, crop the image and then export it? That'S the way I do it but that really sucks;-(
Kind regards from Germany
1 person found this helpful
Hello to Germany from the northwest U.S.!
Export your gradient and the shadow as two separate images. For the gradient, you can use a PNG24 (full color, but no transparency) or a JPG. Use the PNG8 just for the shadow. It looks like you ought to be able to use narrow vertical slices and tile them horizontally, if you want. If your shadow extends to other sides, you could create two images: a larger one with a solid rectangle plus the shadow and a smaller one of just the gradient. Then, place these images as the backgrounds of nesting divs with the proper margins or padding.
In any case, once you're ready to save the shadow, see how many colors Fireworks gives you. Zoom in to your image. It looks like your shadow is about 15 pixels tall, so you could sample each horizontal row with the eyedropper.
Create slices! That's what they're for! Cropping endangers your working file. What if you accidentally save the cropped version? Also, you can read the position and dimensions of the slice objects from the Info panel ("Info" in English, the panel that is in the top right by default) and that's often helpful for writing your HTML and CSS.
Name your slices, as this name then is used for the file name. Depending on what you're doing you may need to hide some layers for export, but slicing is far better than crop/undo. For instance, recently, I created a layout where I had a transparent logo over a tiling background element. I made slices for the logo and for the background tile. But when I went to export the logo, I turned off the layers below the logo.
Hi pixlor,sorry for my late reaction but the last few days have been very stressful;-(Thank you very much for your precise answer! I really, really appreciate that:-)))The idea with two several slices for the gradient and the shadow seems to be very neat! But it seems that I could only choose between the GIF- and the JPG-Format via the Slice-Properties (at the bottom)!?!Kind regards form the (rainy) South of Germany
I'm sorry you've been stressed!
Yes, the Properties panel only has .gif and .jpg. But you can set other image formats and options for those formats elsewhere.
In the Layers panel, under the Web Layer, select the slice to export. Go to the menu item File > Image Preview. It's probably different in German, for me it's in the third grouping. From there, you can select your file format and can apply fine adjustments to the options.
For example, if you want to output a .jpg, you can vary the quality settings in 1% increments, not just "Better Quality" or "Smaller File" that you have on the Properties panel.
Good luck from the (rainy here too!) U.S. Pacific Northwest!