*** From the Archives ***
This article is from December 15, 2008, and is no longer current.
Moving from InDesign to Fireworks
Ever since Adobe has killed off Image-ready, a lot of designers have been trying figure out what program to use. Many are still using Photoshop to mockup sites though it is not the right tool for the job. The correct tool would be Fireworks. Fireworks has many things in common with InDesign; In fact, I like to call it InDesign for the web. It supports Master pages, styles (for text and objects) and even a text wrap-like effect.
Moving your Layout
Why would someone want to even bother with sharing information between these two programs?
I have a three letter answer for you: CSS
Yes, InDesign can “technically” export to XHTML & CSS, but your layout will not be anything remotely close to your original layout. It will be up to you to manually code the CSS to re-create your layout.
Fireworks can export HTML and CSS and replicate a close proximity of your layout. Fireworks is only for the prototype of the site, but it will provide a nice handoff to Dreamweaver where you can finish tweaking the code until your layout is complete.
How to transfer your InDesign layout to Fireworks
1. Export your layout as an .eps file.
2. If you are using both ID CS4 and FW CS4 you can open your file directly inside FW.
3. If you are using ID CS3, you may need to open the eps in Illustrator and re-save the file as an .ai.
4. When you open your eps (or .ai) file inside FW you will have to ungroup everything. Just select that layer and go to Modify > ungroup.
5. Now your layout is ready to go.
Limitations
Transparency will not transfer correctly. It will “look” OK, but it will fall apart if you try to move the object around.
Your text will be editable, but it will be broken into individual lines similar to the XFL export to Flash.
I don’t know if Adobe approves this workflow or not, so please be on the lookout for the black helicopters with Adobe logos on them hovering above your workplace.
Conclusions
Overall, I would not recommend this workflow as an ideal solution to create a webpage from an InDesign layout. It is however, a useful technique to use when you need to reuse elements from your InDesign layout inside Fireworks or Dreamweaver. Hopefully, the interoperability between the creative suite apps will continue to improve in CS5 and beyond.
 |
Wich brings me to:
are there any (good) books about recent Fireworks versions?
Hmm, interesting, I will try this, so thanks for this little primer, Fritz! But EPS? How odd, I regard that as an almost-defunct format, and I have not exported EPS files in five years.
I was annoyed with Adobe for the CS3 generation of bundled apps, and told them so, as the Suite most, well, suitable for my needs, the Design Premium, did not include Fireworks. But the Design Premium CS4 suite does, and since I’ve recently bought that upgrade I can begin to fool around with site creation in FW.
@ Fvd Geest: There are not too many books out there on Fireworks. I would recommend the Adobe Classroom in a book. The CS4 book comes out this Spring.
@ Klaus: I know EPS is painful, but it is the only current option. I wish PDF would work, but it comes in as one big picture in Fireworks. There might be another option out there, but this is what I have come up in the meantime.
Photoshop and Fireworks are both quite easy to use for making websites. I’ve only once or twice exported codes from Fireworks and then gave up on that. Instead I just export the images (slices) and then recreate the template page in Dreamweaver to ensure clean, cross-browser compatible codes along with includes for common parts (menu’s, headers, footers).
It might seem like it’s more work, but it’s actually easier to start from scratch than having to clean up “someone elses” codes.
Everyone working on webpages that I know works pretty much the same way, mainly due to the code generated by Fireworks just not being good enough.
Agree with the post from Roland Dec 16.
Fireworks CS4 CSS export is about as useful as a chocolate teapot – far to many limitations – don’t have this touching that or overlaying this or that and…..just keep the background white and drop on your islands of text and images all is fine – as I said – chocolate teapot!