Jump to content


Photo

Slice/Export Blending Modes CS5 - Help ?!


  • Please log in to reply
2 replies to this topic

#1 conorsax

conorsax

    Fireworks Sparkle

  • Members
  • Pip
  • 2 posts

Posted 02 September 2011 - 01:11 AM

Hi there,

I hope one of you fireworks geniuses can help?

I have been trying to find out how to export a blended image for web design. let me quickly explain.

I take a logo with a black background. I place it on a canvas in fireworks which has a textured image on it.

I don't want the black background to show, just the white logo, therefore I use screen mode blend which looks great on the texture background.

Design completed and looks great. next...


The problem comes when trying to slice and export for html/css.

Once I switch the background image off so that I can export the logo, obviously the logo has nothing to "blend" against and so the surrounding box is now visible again, making it impossible for me to slice anything but a black box with contained logo inside.


Can anyone tell me how I slice this image so that I can export a nice transparent PNG that only shows the white logo as in the design (not the black surrounding box) ?


Any clarifications needed please let me know.

I look forward in anticipation to your responses.

regards

Conor

#2 DaveH

DaveH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 343 posts
  • Location:San Francisco CA USA

Posted 02 September 2011 - 01:20 PM

I take a logo with a black background. I place it on a canvas in fireworks which has a textured image on it.

I don't want the black background to show, just the white logo, therefore I use screen mode blend which looks great on the texture background.

Design completed and looks great. next...

The problem comes when trying to slice and export for html/css.

Once I switch the background image off so that I can export the logo, obviously the logo has nothing to "blend" against and so the surrounding box is now visible again, making it impossible for me to slice anything but a black box with contained logo inside.

Can anyone tell me how I slice this image so that I can export a nice transparent PNG that only shows the white logo as in the design (not the black surrounding box) ?


Conor,

I don't think you're going to be able to do it just by manipulating the slices and layers. You need to actually remove or make the black portion of the image transparent.

One way to do this is to use the PNG8 Index Transparency format. Open you graphic image on a transparent canvas, open the Optimization Panel, and put FW into Preview mode (top left of the canvas.) Set the matte color to transparent. Now look at the color palette for the image - sort it by luminance to put all of the black and near black colors at the end of the palette. In the lower left corner of the Optimization Panel are eye-dropper tools for transparency colors. Select the "+" eyedropper to add a color to the transparency list, and click on the darkest color swatch at the end of the color palette in the Optimization Panel. That black should become transparent in the preview. Chances are you image has several near-black colors, so use the "+" eyedropper and keep adding the darkest colors to the transparency colors until you have removed enough of the black background that only the white logo image remains. Export the image, and you should have a white logo (with some grey around the edges) on a transparent background that you can now place over the texture.

(Other methods would be to erase the black color from the original image using the Erase Tool or creating a mask in the shape of the black areas and masking out the background.)

Hope this helps,

Dave

#3 conorsax

conorsax

    Fireworks Sparkle

  • Members
  • Pip
  • 2 posts

Posted 05 September 2011 - 12:35 AM

excellent stuff thanks dave,

I was trying this anyway with a transparent GIF but here steps with the PNG and grouping the dark colours together will make this process much easier.

many thanks for your reply.

cheers