Member Avatar for Reliable

Hello Everyone,

I've been trying to see if it would be faster to learn to slice my layouts in Fireworks CS4 and export to Dreamweaver or just continue to prepare my assets separately in Photoshop and manually piece them in Dreamweaver.

TO that end I have attached the Free PSD I downloaded and have been trying to slice. IS there a way to slice this and have it come out as it looks? Well..it wouldn't let me attach it so is the link to it.

  • 2 Contributors
  • 1 Reply
  • 186 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by opticblaze

Dani AI

Generated

Building on ’s hands‑on reply and the jewelry PSD you linked, the real choice isn’t “Fireworks or Photoshop?” so much as “what should be exported as images and what should be rebuilt in HTML/CSS.” Fireworks CS4 can save time exporting assets, but treat it primarily as an asset pipeline step—not the final page generator. Decide which pieces must be pixel-perfect images (photos, ornate textures, logos with complex effects) and which should be live HTML (headings, body copy, navigation, form controls).

Keep text and UI chrome as selectable HTML so the site is accessible, responsive, and searchable. Example header pattern for a logo with Retina support:

<header>
  <img src="assets/logo.png" srcset="assets/logo@2x.png 2x" alt="Jewelry Store logo">
  <nav>...semantic links...</nav>
</header>

Organize and optimize exported assets: use a consistent folder structure and simple filenames (lowercase, dashes), export 1x and 2x versions for high‑DPI screens, and prefer CSS for repeating backgrounds or simple decorations instead of slicing them into many images. For small icons consider inline SVG or a sprite to reduce requests:

.hero { background: url('assets/bg-repeat.png') repeat-x; }

.icon-cart {
  background: url('assets/icons.png') 0 -32px;
  width: 32px; height: 32px; display: inline-block;
}

Common pitfalls and fixes: exported HTML from design tools tends to be verbose—hand‑clean the markup for semantics and responsive behavior. Confirm fonts used in the PSD are available on the web (use webfonts or convert only styled/embossed text to images). If layout looks shifted in Dreamweaver, check DPI/scale differences, DOCTYPE, and any CSS resets. In short: use Fireworks to produce well‑named, optimized assets, then hand‑code a semantic, responsive template in Dreamweaver for the best, maintainable result.

Member Avatar for opticblaze

Fireworks rocks...and it is way faster for slicing. Here is what you do.

1) Open the psd file and then click on save as...choose another file name. CS4 will then ask you if you want to save it in highset compatibility mode..say yes.

2) Right click on new file and open with fireworks or open fireworks and the open the file

3) It will then ask if you want to maintain layers..say yes.

4) The image then loads into firework. You will notice that on the right of the screen is docking panel that says "pages,states,layers" assuming you are using fireworks in expanded more --- button top right hand side of page

5) use the layers panel to ulock the layers you want to work with.
6) Then use the slice tool to slice and dice your images...always remember that when you have made a slice..you have to indicate to fireworks in what format you want it...i.e gif, png, jpg.... you do this in the optimize panel (right hand side)

7) dont forget to name your slices by clicking on them and then entering their name in the property bar...bottom left of screen

8) Save the file as a png---important so you can make changes later on if need be
9) Select your slices and then right click and select "selected slices" and your done.

Some general notes

You can show/hide layers and can therefore export the background by hiding the top layers slicing the background and then exporting it...you can even hide the slizes in the layers panel if it gets too much

fireworks.jpg 184.14 KB
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.