Photoshop Slicing Workflow for HTML Email Tables

This guide outlines the precise workflow for using Adobe Photoshop's Slice Tool and legacy export engine to generate table-based HTML layouts for legacy email clients. By following this method, you can transform static graphics into a functional, structured HTML <table> grid, optimize individual visual assets, and produce email-compatible code that renders consistently across older desktop and webmail applications.

1. Document Preparation and Grid Setup

Design your email template to a fixed width—typically 600 pixels—using the RGB color mode at 72 DPI. Before slicing, define the structure of your HTML table using Photoshop guides (View > Guides > New Guide). Align guides to create continuous horizontal rows and consistent vertical columns. Table-based email rendering depends on uniform columns and rows, so minimizing staggered or overlapping boundaries prevents Photoshop from generating unnecessarily complex nested tables with spacer cells.

2. Slicing the Artwork

Select the Slice Tool (nested under the Crop Tool, keyboard shortcut C).

  • Click and drag over each defined section of your design, snapping to the guides.
  • Alternatively, click Slices From Guides in the top options bar to automatically convert your guide grid into a complete set of user slices.
  • Use the Slice Select Tool to right-click each slice and select Edit Slice Options. Assign descriptive names, specify destination URLs, and provide descriptive alt text to ensure accessibility and support image-off viewing environments.

3. Setting Up Save for Web (Legacy)

Navigate to File > Export > Save for Web (Legacy) (or press Ctrl + Alt + Shift + S / Cmd + Option + Shift + S).

  • In the preview window, select individual slices using the Slice Select Tool to set their respective file formats. Use JPEG for photographic content and PNG or GIF for flat graphics, logos, and elements requiring transparency.
  • Ensure all slices are set to RGB and optimized for file size to reduce overall email load times.

4. Configuring HTML Output Settings

Within the Save for Web dialog, click the Preview... menu or proceed to save to configure the underlying HTML generation settings:

  1. Click Save... to open the save dialog.
  2. In the Save as type (Windows) or Format (macOS) dropdown, select HTML and Images.
  3. Under the Settings dropdown, select Other... to open the Output Settings dialog.
  4. Select HTML from the top dropdown:
    • Set formatting to your preference (e.g., standard indenting).
    • Ensure case conventions match your requirements (lowercase tags and attributes are standard).
  5. Select Slices from the dropdown:
    • Choose Generate Table.
    • Select Empty Cells: TD instead of spacer images to avoid missing asset errors.
    • Check that table attributes are configured to include border="0", cellpadding="0", and cellspacing="0" to eliminate unwanted spacing between cells.
  6. Click OK to return to the export dialog, choose your export folder, and click Save.

5. Post-Export Cleanup for Email Clients

Photoshop outputs the generated .html file and an accompanying images directory. Because Photoshop generates generic HTML, you must perform minor manual cleanup in a code editor for reliable email performance:

  • Open the HTML file and apply style="display: block;" to all <img> tags to eliminate gaps caused by inline element rendering in modern webmail clients like Gmail.
  • Ensure all <td> and <table> tags have explicit width attributes matching the slice dimensions.
  • Wrap the primary table in a centered container table with an absolute width of 600px to ensure the layout centers correctly across Outlook and other desktop clients.