Member Avatar for Reliable

Hey Everyone,

I decided to learn Fireworks CS4 and make it a apart of my arsenal for website layouts since it has the CSS export feature. I used to slice in Photoshop and have now learned to slice with Fireworks. The only thing is it seems even this is limited or I am not doing something right. Slicing a web layout when there is a clear distinction between text and graphics works just fine. I'm having problems, however, slicing and separating text from graphics when the two overlap or when there are graphics serve as text background.

Anyone have any ideas? Have I missed a technique or something? Thanks for your time and help.

  • 3 Contributors
  • 2 Replies
  • 126 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by matricol

Dani AI

Generated

A few focused Fireworks tips that address ’s problem (text overlapping graphics or text-on-image backgrounds), while tying into points raised by and .

Keep text editable and export only graphics

  • Put text on its own top layer and avoid flattening, converting to paths, or embedding it inside bitmap groups. Live vector text is what lets the exported HTML keep text selectable.
  • Remove layer effects (drop shadows, blurs, blend modes) from text objects; those force Fireworks to rasterize the whole group.
  • If the background behind the text is decorative, make that background a separate slice/asset (PNG-24 if you need alpha, JPEG for photos). Export the background image and place it in HTML/CSS as a background-image; keep the text as HTML on top.

A practical quick workflow

  • Isolate graphic-only areas into slices with the Slice tool and name them in the Properties/Optimize panels.
  • Export only those image slices, then rebuild the layout in HTML/CSS using those images as backgrounds or positioned elements. This keeps typography live and accessible, and it lets you use CSS for shadows, positioning, and responsiveness.

Troubleshooting checklist

  • If exported text becomes an image, check for: masks/clipped groups, text inside a grouped bitmap, applied filters, or use of symbols that were rasterized.
  • Test with a tiny sample file: one background slice + one live text object. Export to confirm which operation causes rasterization.
  • For email/newsletter layouts (as notes), image-slicing can still be practical; for general web pages prefer HTML/CSS and, where many small graphics exist, combine them into sprites to reduce requests (as recommends).

These steps keep text accessible, reduce unnecessary image exports, and give predictable results when graphics and text overlap.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

welcome to the 1990s ?? you have missed all the techniques of the last 20 years

DONT DO IT
STOP DOING IT

slicing the web page does not speed it up
slicing the web page slows it down
each chunk of the sliced image adds another http request to the page size, the overhead of another transfer

does not reduce the page size
this is not current practice
the way to speed the page is to reduce http requests, small images are stitched into a larger one, and the image is disdplayed as a css sprite
same size of content, smaller size of overhead
styles are placed in stylesheets, script are placed in script files, are only downloaded once for the entire site, no matter how many pages are loaded
some ideas that may assist you
http://analyze.websiteoptimization.com/authenticate.php?url=http://www.yoursite.com&/
change , to your site

Edited by almostbob because: n/a
Member Avatar for matricol

I use slicing in my nesletters and it speeds it up ! I dont do websites with slicing but I think I is also ok

commented: ignorancec is bliss -3
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.