Remove HTML spacers when exporting for web with Photoshop

Recommended Posts

I'm working for a company that has me create newsletters for them to send out via e-mail. I make them in Photoshop in order to achieve a more professional look, because other programs just don't do it for me (and the company prefers my Photoshop style anyway).

In order to make the different sections of the JPEG newsletter clickable, I divide them into slices, using the slice tool and assign the various URLs to each one. Then I use the Export for Web option to have Photoshop cut the image up and give me an HTML page with the newsletter in its final form.

All seems well in the rendered HTML page, but if I try to copy that HTML code and embed it into an e-mail, I get tiny 1px white spaces (known as spacers) in between each slice. My boss says it's no big deal, but it annoys the HELL out of me. I tried to remove them using Adobe Dreamweaver to edit the code, but the whole newsletter displays incorrectly if they get removed.

Does anyone know how I can export the HTML WITHOUT the spacers?

Share this post

Link to post
Share on other sites

Can’t see this in Photoshop but in Fireworks under File > HTML Setup > Table Tab, there are options for “Nested tables, no spacers” and “Single table, no spacers”.

Not used them myself but it sounds like what you need.

alt text

  • Like 1

Share this post

Link to post
Share on other sites

Hey Simon H,

Thanks, I tried messing around with the various export settings, but with no luck. Nonetheless, here's the most effective solution I've found so far:

1) Choose "Export For Web" and input the desired dimensions (if you're resizing before export)

2) Export as "Images Only" in either JPEG or GIF

3) Load up DreamWeaver CS6 (or newer) and quickly slam down some HTML tables, corresponding to the layout of your newsletter (or whatever it's gonna be)

4) Upload the exported images to your preferred file hosting services and insert each image into its corresponding part of the HTML table

5) Save your file as an HTML

6) Open the saved HTML to make sure everything is working fine

7) [OPTIONAL] Copy all the HTML code and use an e-mail manager that supports HTML e-mails (like Thunderbird) to send out the newsletter (or whatever it is) to your desired addresses

Hope this helps out anyone who's been having the same struggles I have!

P.S.: Yes, it IS worth spending 20-30 minutes to learn how to properly code HTML tables and to have them work the way you want - you never know when you're gonna need this valuable knowledge!

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Similar Content

    • By Beyond_Life
      Picnik will stop working on 19th of april. And I don't like that because I always use Picnik for inserting text for a signature. So when Picnik stops I want a replacement. And that is Photoshop Elements 10. I allready have that so why shouldnt I use it. I also use Machinery HDR2. But that program doesnt have the option to insert text for a sig.
      If I search for my question on Google all I get are youtube movies about how to custum made a sig in a picture using the text symbol. But that means I have to do it every time over and over again.
      Q: Is there a way to create a layer with my signature in it, that I can use with ever new picture, just by inserting that layer? So I don't have to remake my signature every time?
    • By dave1496926426
      I have 8 pictures of my daughter running around the garden all taken from the same spot. I want to be able to open all 8 as layers and blend them together so that the picture shows 8 versions of her at different points in the garden. I have Photoshop CS5 full version.
    • By szac
      I have Windows 8.1 and use office 2013 Outlook. My new Photoshop Elements 12 can't email my photos. It won't even send me a validation code or let me choose anything but adobe mail in the client list. I uninstalled and reinstalled Photoshop Elements 12, but still can't seem to find Outlook. Anyone have any ideas?
  • Who's Online   0 Members, 0 Anonymous, 18 Guests (See full list)

    There are no registered users currently online