The Tale of two HTML Slicers
Jun
6
Written by:
6/6/2011 8:41 AM
I had the opportunity to compare and contrast usage of two HTML slicing programs recently. I started using Adobe Fireworks to slice a single-layer PSD with the inten to create a W3C compliant HTML/CSS layout. I sliced the PSD into several key components and found the hotspot utility to be helpful in highlighting areas of my images that were to become links to other site pages. I exported the slices to HTML and CSS but found that my PSD really had some overlapping slices, that were not conducive to CSS layouts. My sliced HTML file opened in Dreamweaver as a multitude of table tags - did I mention that I am not a Table layout fan?
That's when I turned my attention to Expression Design and Expression Web 4. The slicer in Design had a few less features than Fireworks, such as the slice could only be rectangular, whereas Fireworks offered a polygon slice. Also, the hotspots were defined after slices were exported to Expression Web, instead of being part of the slicing procedure. The cool thing was that the exported HTML and CSS was exactly what I wanted! I had a nice set of DIVs, with style tags in the head of the page, that used absolute positioning. Given that the layout was a bit complex, I was fine with the use of absolute positioning of my DIVs, versus my general practice of relative positioning.
Both Fireworks and Expression Design do a good job at slicing images. I found Expression Design a bit more user friendly and Fireworks a bit more complex. I'll continue to use both, depending on the PSDs that need to be sliced.
Happy Slicing!!