Slice Tool

[tytywitdatnina]

Hello,

I am having an issue with the slice tool. I am creating an email in photoshop and have added links to specific parts of my layout using the slice tool. When I export it for web (Save for web (legacy)) and open it in the preview it looks fine, but when I try to send it through Gmail I get issues like the one shown below.

Does anyone have a solution, or can anyone at least tell me why it might be happening? Anything will help at this point, I've tried everything it feels like and I can't find an answer anywhere.

Thanks

[lambiloon]

Hi try to check in different browser like google chrome it happens when you we use slice command can be fixed in dreamweaver is known as fixing the borders....regards

https://youtu.be/rEgZDw5G-oI

[tytywitdatnina]

It's not messing up in the browser, only after I send it in an email. When someone recieves it, the auto-slices have all shifted and thrown everything off. I can't find a single answer as to why this is on the internet, could it be a very specific glitch between my laptop and the PSD file?

[Jake5CAB]

I'm having the same issue. Does anyone have an answer for this?

[Dan Rodney]

HTML and CSS for emails is different than web pages. Save for Web is coding for websites, not emails. Also, sending code through Gmail could further complicate things and mess up the code. Most consumer facing email programs don't properly send HTML, which is why companies use an email service provider (ESP) such as MailChimp.

You can send a test email of your code with https://putsmail.com (instead of Gmail) but I wouldn't be surprised if it still gets messed up because it's not properly coded for emails.

[tytywitdatnina]

I tried putting it in Mailchimp and it still wasn't even registering my images. I feel that it may be an issue with my Photoshop app as opposed to anything else, because I can't find the solution anywhere online or even anyone else experiencing the same issue. Is there a way I can pass it off to someone so that they can look at it and tell me what I've done wrong?

[Dan Rodney · Accepted solution]

For HTML email (and therefore MailChimp):

1. The images need to be hosted somewhere. That could be MailChimp or another online hosting service.
2. The URLs coded in the HTML need to be updated to point to those online locations: http://www.blahblah.com/something

Creating properly coded HTML emails is not a push button process. There are a lot of details involved. While similar to creating websites, emails have their own unique issues. This isn't a simple thing of you doing something wrong, you just need to spend more time learning about all the intricacies of HTML emails.

As I said previously, even if you get the images working, it's very likely the code generated by Photoshop will not work in a wide variety of email apps. It was made (long agao) for webpages and I don't recommend using its code.

To get this working properly could require coding the email from scratch yourself, or redesigning the email using a MailChimp template and filling in the images you create in Photoshop into their template. MailChimp templates are responsive (meaning they adapt and look good on multiple screen sizes). A single design from Photoshop will not be ideal on both phones and desktops.

In other words... this is not the best approach to designing an HTML email but maybe if you upload your images you could get it working 🙂

[Jeff Arola]

Try zipping/archiving the file before sending with email.

[mglush]

Hi!

You mentioned Auto slices in your latest post. So I am assuming that you did not slice the piece yourself and allowed the program to do it? If so, did Auto create slices of small pieces of white space on the edges and middle of your image? Auto slicing could be the problem. 

I would suggest creating your own slices and make them all the same width and if possible the same height so that you don't have extra pieces of white area. I noticed that you sliced out the type separately. Is there a reason like animation in the type? If so, just make the type animation part of that larger slice. Not everything has to be sliced separately. I believe that it is all those little slices that are causing the problem, and if you can eliminate them and standardize the width (especially) and the height, that it might solvd your issue.

Let us know if that helps!

Michelle

[tytywitdatnina]

I am manually slicing the pieces that need URL links and the auto slices are created as a result of my slices. If I could avoid making the auto slices appear then I would. I need there to be several different links throughout the email. I have tried to make the slices as large and consistent as possible but the same thing happens with the auto slices every time. Is there a way that I can hand the file off to someone and have them look at it so that they can explain to me what I am doing wrong?

[mglush]

I'd be happy to take a look at it, if you want. Do you have a dropbox account that you could upload it to and then send the link? 

Michelle