Skip to main content
T
tytywitdatnina
Participant
March 1, 2020
Answered

Slice Tool

  • March 1, 2020
  • 4 replies
  • 4826 views

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

This topic has been closed for replies.
Correct answer Dan Rodney

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 🙂

4 replies

mglush
Community Expert
mglushCommunity Expert
Community Expert
March 1, 2020

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

T
tytywitdatninaAuthor
Participant
March 1, 2020

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
Community Expert
mglushCommunity Expert
Community Expert
March 3, 2020

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

    Jeff Arola
    Community Expert
    Jeff ArolaCommunity Expert
    Community Expert
    March 1, 2020

    Try zipping/archiving the file before sending with email.

      Dan Rodney
      Community Expert
      Dan RodneyCommunity Expert
      Community Expert
      March 1, 2020

      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.

      — Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
        T
        tytywitdatninaAuthor
        Participant
        March 1, 2020

        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
        Community Expert
        Dan RodneyCommunity ExpertCorrect answer
        Community Expert
        March 1, 2020

        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 🙂

        — Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
          lambiloon
          Community Expert
          lambiloonCommunity Expert
          Community Expert
          March 1, 2020

          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

          Ali Sajjad / Graphic Design Trainer / Freelancer / Adobe Certified Professional
            T
            tytywitdatninaAuthor
            Participant
            March 1, 2020

            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?

            J
            Jake5CAB
            Participant
            November 6, 2020

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

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices