Template slices reconstructed from original 'images' folder

Not sure if the 33 people who have viewed my earlier question are not able to answer, but I did try to manage a work-around. I am sooooo close yet soooo far....

I took the original, newly downloaded Campaign Monitor, Free, Textile Template PSD and brought in each of the index-colored gifs that are in the 'images' folder of this very template.

I painstakingly laid them directly over the original PSD to line them up exactly after making them RGB layers, renaming each exactly as they appear in the template. (Note: I was wrong about the sizes being smaller, in my earlier post, that was a mistake resulting because of my missing/failing to import one image).

After essentially rebuilding the free template PSD with the original 'images' folder files, as slices, I created guides to 'recreate' these slices in the jiffy pop template that I got for free, then edited the underlying PSD to fit my needs (new image, logo, etc.). After doing this, I exported the images as slices, renaming them one at a time, and then individually replaced each slice, (again) one at a time, making sure they were the exact same size, so as to not mess up the 'puzzle'.

Well, it now works. After two days, it works. Sort it....

It also shows some intermittent fine hairlines between the slices. WHY? How sad :-(

I don't know why, but there isn't a single post I can find on this site, nor is there a tutorial, nor is there anything with the words 'how to slice a Campaign Monitor template PSD' anywhere on Google.

If anyone reading this can help, I'd really value the assistance. I gave up on trying to do this last year, hired a guy who helped but was tough to keep around, so am trying this again.I hate to give up.

*FYI* When looking at the original, unmodified Textiles Template, enlarged in Firefox 5.0.1, it too has these hairlines. I wonder if this is a just a natural by-product of the slicing process, if it is sloppy work, or browser issues, or a matter of the template tables being broken?


roshodgekiss roshodgekiss, 6 years ago

Hi olindacat, sorry to hear that adapting the template has been such a time-consuming task. Generally, folks only go as far as changing the logo (or sometimes a background image), so admittedly, it's quite uncommon that whole designs are sliced up from scratch.

We don't have any tutorials specifically on cutting up Campaign Monitor PSD's, however there are plenty of excellent tutorials out there on converting PSD's into HTML/CSS (which is a similar process), such as this one by Nettuts+.

Alternately, you can hire one of our keen customers to do this task via our 'Find a Designer' forum, or contact XHTMLized.

It's hard to say why you're seeing these hairlines in the browser without viewing your code. By all means, post it here in this thread, or get in touch with our support team so we can take a look for you. Fingers crossed!

Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
olindacat, 6 years ago

Having sliced onions, cucumbers, and websites since the days when slicing was invented, and having a permanent Google logo affixed to my face ;-), I can assure you I read several tutorials on slicing and coding for emails, a well as ran the gamut of videos on Lynda.com, so that idea was considered before my whine-fest.

I have the template pretty much working, and the hairlines seem to be a by-product of the anomalies of the www. Here's a draft from your server of what I've managed to cobble together over the last day: http://waileaoldbluegc.cmail4.com/t/ViewEmail/r/644C689C7BFFC782

This should really only take a few hours, but the lack of documentation is the issue. I recall how lax it was when I tried this last year. I think you'd have more customers if there was better and more fluidity in this process, IMHO.

Yes, I think I mentioned I have used your wonderful and 'keen' customers before. I appreciate the reminder that outsourcing is an option for me, but it wouldn't be necessary if the documentation were there....

FYI: your very cool editor doesn't work when you try to add a link using any of your modal buttons in Firefox 5.0.1. At least, not on a 2011 iMac 27" desktop....

Thanks for at least responding.

ESB, 6 years ago


I do not know if this will solve your particular problem, but my tips for slicing are :
1)    Add CSS for each image - style="display:block".  This removed the extra spaces that I was getting under the images when the email was viewed in FireFox.

2)    If you are replacing one of your slices with text then make sure the <td> tag has its width and height attributes set to the same width and height of the image you are replacing.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free