6 Replies Latest reply on Oct 12, 2012 4:57 PM by johnbeach12

    Better photoshop slices

    johnbeach12

      I have a bunch of email templates that need to be sliced into tables in photoshop.

      So far, i've setup the slices then export for web. From there I go into the code and take the image thats inside the cell turn it into a background image, then wirte my text in the cell.

      If the background is a solid color,I can just change the cell to no image, choose the background color, type the text that belongs in the cell all from within photoshop when seting up the slices, but when there's an image I can't make the background the image. I have to go into the code and change each celll seperatly, then go and write all the text in the cell.

       

      Is there a way to gell photoshop, Use the image as a background for certian cells or do I have to go into the code and change it all by hand?

       

      slice.jpg

        • 1. Re: Better photoshop slices
          Mylenium Most Valuable Participant

          Umm, seriously, this must be the most hacky way of creating any HTML code, and bad one at that. I would strongly recommend downloading a visual HTML editor. There are enough free ones. And why anyone even would put up with a million sliced images eludes me completely, too. Simply define a contiguous graphic as the BG for the entire table and be done with it. Even the combined total size of the files will be smaller...

           

          Mylenium

          • 2. Re: Better photoshop slices
            johnbeach12 Level 1

            The files I'm slicing are for email newsletters, they have to be in table's. I can't use any css positioning because email clients are very bad at rending css and none of them support positioning.

            The million sliced images is the best way to get consisitant rendering out of all the diffrent clients. It's ugly but it works. I can define a continuous background but can not for the whole table, it's a requirement of the project. Each slice has to have it's background image, then fallback to background color.

             

            What i'm looking for, is a way to tell photoshop to not render <img> tags, but use style="background:url()" tags for certian cells instead.

            • 3. Re: Better photoshop slices
              Rik Ramsay Level 4
              The files I'm slicing are for email newsletters, they have to be in table's. I can't use any css positioning because email clients are very bad at rending css and none of them support positioning.

               

               

              This is sort of correct. You can use DIVs, floated but it won't be viewable in a lot of webmail clients as they strip the DIV tag. Only seems to work in Outlook (some) and AppleMail. CSS however is very well supported - as long as it's inline! So yes, having your email in tables in by the far the best, and safest bet.

               

              Having said this, you seem to have skipped the part where background-images in table cells are almost impossible to render - on any email client. I had a discussion with someone in the DW forum and we eventually got it working in Outlook, but only Outlook. http://forums.adobe.com/message/4747860#4747860

               

              If you want the email to look the same across all clients, use tables, cell colors and inline CSS. You can use background images on the body or containing table without much of an issue, but your whole idea of having multiple background images with text on top will never work.

              • 4. Re: Better photoshop slices
                johnbeach12 Level 1

                Background images do work in most email clients. The email clients that don't support it are outlook 07/10/13 and gmail on android. I wish I could set a single image as the table background but it's just not possible.

                http://www.campaignmonitor.com/css/

                 

                I'm guessing though I have to add them all by hand. There is no simple way to set it as backround when exporting.

                • 5. Re: Better photoshop slices
                  Rik Ramsay Level 4

                  Background images do work in most email clients.

                  This is a correct statement and your link proves that. However, that was not my comment. I said "background-images in table cells". On the body, and the outer table, background-images more often than not, work. However, this changes when you try to put it on the individual table cell as is well documented throughout the internet. One post is this: http://blog.mailermailer.com/email-design/background-images-in-html-email-the-naked-truth . They have highlighted Gmail, Hotmail and Outlook as not rendering these using certain methods.

                   

                  I'm guessing though I have to add them all by hand. There is no simple way to set it as backround when exporting.

                  The image you have attached does not require to be sliced up as you have it. The only things you need to slice off that image are the 2 green bars on the left and the transparent image - even then the green side bars can be easily replicated using tables, background color and strokes.

                   

                  You can save the transparent sun image as one jpeg or as a transparent PNG and set it as the background image on the containing table or body. If the entire email is one background color, you can add the height to the image to set it in the proper position. This works because you are using tables and need to define the width and height of the email.

                   

                  As a side note, you should not be generating HTML code this way. There are hundreds of free email templates out there and all you need to do per email is modify certain graphics within Photoshop. I am guessing that you have over complicated the table design but without seeing the final article (or intended final version) this is only a guess. You should treat the use of imagery in an HTML email as a secondary thought and focus more on how the email looks with images off. By default, most email clients do not download images until prompted by the user.

                  • 6. Re: Better photoshop slices
                    johnbeach12 Level 1

                    I follow what your saying, and I should appologize, your not seeing the project i'm working on, your seeing something I made as an example.There is a non-disclouse in place so i can't post images of the projects. It's much more complicated than my example with dynamic weather and what not.

                    The link you posted was good, I also use Litmus to text all my code. It's been a great resource.

                    The cell's that have background images also have fallback colors, I can't apply a table background image becuase the images used for the cell backgrounds are dynamically created and are not the same each time the email is sent. The client requires this, I just find a way to make it work. There is also a link to "View in browser", and I do know it won't be used as much as it should.

                     

                    We agree, this is not the best way to do it, but it is what is required. I must follow the development needs that have been set. I am looking for a faster way to meet those requirements.