...Because emails and email design[er]s need love too

How to Properly Optimize and Slice Your Emails for the Web Like a Pro

Posted: August 27th, 2011 | Author: | Filed under: tutorials | Tags: , , , , , , , , , , | 5 Comments »

How to Properly Slice Your Email Design Preview

You have a beautiful email that is ready to be shown to the world – but how can you make sure that everyone who sees it will be able to download it as quickly as possible?

Whether it be on their laptop at the coffee shop, mobile device on the go, or at their work desktop, your email will need to be optimized in order to guarantee that it loads blazing fast.

Here is a quick and easy guide to make your emails load with power and ease – plus with a free sample file to practice!

Note: For safety’s sake, it would be a smart idea to Save a copy of your original PSD and work with the copy so as not to lose your hard work!

Getting Started: How-to slice layers in Photoshop
There are several different routes to make slices in Photoshop. Check out this quick video that give you a basic idea of how the slice tool works:

Adding to that (as the video is slightly is outdated), you can also use the slice select tool to promote slices into user slices, subdivide, and drag slices around using the mouse or even your arrow keys.

And finally, if you do not see the slices for any reason, make sure to check View->Show->Slices and see if slices are visible.

Step One: Slicing your PSD email
We will begin the process by building the design of the email. For this post, we will be using one of KOKOCANDLES‘ monthly emails, sent to subscribers about new items, sales and additional information. Hopefully at this point you already have a design built out and ready for slicing, if not, you can use the one provided at the end of the article

KOKOCANDLES email design sample

For starters, you need to decide what sections of your email are going to be linked up – in most cases, you will have probably already considered this as you were designing the layout, and most likely included call to action links as well as buttons or links to different relevant items.

What we will do now is slice out the main features of the email, focusing on the header images, links, and areas that feature pure text. Also, try to isolate areas that feature simple colors, no gradients, no shadows, and plain text in order to help with optimization (you’ll find out why below).

Using the ideas in the video above and taking into account of the items that will have web links attached to them, slice up your design as you see fit.

koko candles sliced header

Notice the sliced navigation buttons, and how the header is sliced.

Step Two: Choosing the right image formats for your sliced PSD
Now that you have the image all sliced up the way you like it, it’s time to make sure that we get the most “Bang for our Buck” that we can with each sliced section. This generally means using the correct file format and dragging the little sliders around in Photoshop – sounds like fun right?

If you see something below that makes you think your slices aren’t correct, go back and move them around a bit.

First, go into the Photoshop main menu and click, File->Save For Web and Devices (or use the hotkey “CTRL+ALT+SHIFT+S” on Windows or “CMD+ALT+SHIFT+S” on Mac).

We will get a pop up screen that shows our image with slices on a little preview pane, along with a lot of options on the right side to manipulate output.

First let’s focus on the header. You’ll see here that I have selected the slice over the header section with left click, and then I am able to choose the type of image formatting on the right menu for that specific selection (if I select more than one slice I can apply a rule to multiple parts at once).

photoshop slice gif for high contrast

Slice as a gif for high contrast sections or flat colors

Since the header is composed of only two colors, and does not feature any gradients or shadowing effects, it is a great candidate for use of the GIF image format (or PNG if you’d prefer).

Looking lower into the design, you’ll see we also have some navigation buttons that will feature links to relevant sections on the KOKOCANDLES website. Since these feature gradients and are slightly more complex in terms of amount of colors, we will use a JPEG.

photoshop slice jpegs for gradients or many colors

Save as jpeg when you have gradients or many colors in that slice

In the example above, we made the JPEG image quality 60, and checked the box for “Optimized” (this is in the top right of the screenshot).

Now going through the rest of the PSD of the email with the two above ideas in mind, I have produced a sliced image with optimized sections using the proper image formats. Here is an idea of how I sliced the sample file:

format-suggestions

Note: the navigation bar is all JPEG, as is the lower left area.

Step Three: Saving your file for web and getting the HTML
At this point, you should have four things completed:

  1. A designed PSD of your email
  2. A sliced up version of your design
  3. Relevant Alt tags, messages, and URLs inside of each slice that you want to link up (use the slice select tool and then Right Click->Edit Slice Options to modify this data).
  4. Proper image formats set for each type of slice content (high contrast, minimal color GIFs and colorful or complex JPEGs).

Once you have all that done, you are ready for the final step – HTML production.

If you aren’t already there, go back into the menu for Save For Web And Devices. Once there, all you have to do know is hit “Save”.

Then, make or find a folder to save in (I made one called “email”), and match all of the drop downs with the ones in the screenshot below.

save for web and devices

Save for web and devices screen

Once you press save, Photoshop will then very kindly create all of the images sliced out into their respective formats along with an HTML file with all of the images aligned properly and using their associated links, alt tags, and placement.

All you have left to do now is to send your email to your clients and customers and watch the visitors flock to your site!

Questions, Comments, Support
If you have any questions, please ask them below – I’d love to help out!

Here is the download of the sample PSD:
Download sample used in tutorial


This is a guest post by Cameron, a professional web developer who freelances while also working for a large corporation. Find more posts on his website electro kami.

 

Related posts:

100+ completly free HTML email templates
Brilliantly Cropped Header: Quicksilver's Summer Sale
A Complete Guide to Coding HTML Emails
January Unsubscribe List: Cartier, Ralph's, 99 Cent Only Store & Overstock.com
The Ultimate Waste Of Time: Sending Badly Timed Emails


5 Comments on “How to Properly Optimize and Slice Your Emails for the Web Like a Pro”

  1. 1 Vicky said at 9:34 pm on February 20th, 2014:

    Hi,
    I’ve gone through your tutorial step by step and created the slices where I need them. However when I sent a test email to myself to see how it’d display, it’s put in gaps and moved the slices around so it looks jumbled up??
    Is there something I’m doing wrong?

  2. 2 Josh T said at 2:06 pm on September 22nd, 2014:

    Hello,

    Thank you very much for your help with this. It is truly appreciated. I keep having the same problem though. Every time I “Save for Web & Devices” and open up the HTML file in my browser, the pictures don’t show up, they are just blank boxes. Please help me with this.

    Thank you.

  3. 3 Vlas said at 7:42 am on August 3rd, 2015:

    Hi I have followed this tutorial, although when I try to place the flyer in my Outlook and it seems all okay although when I send it out as a test it has the same problem as ‘Vicky’ it has large gaps where I sliced it. If you can email me an answer to this that would be much appreciated. Thanks

  4. 4 Natallie said at 12:40 pm on March 14th, 2016:

    Hello,

    So this may be elementary but after I have created the slices and saved the HTML and images….. if I am creating this email blast for a client….how do I then utilize the HTML + images inside a email window?

    I am self taught so I would love to know + learn how to do this.

    Thank you!

  5. 5 Inbox Junky said at 3:53 pm on March 14th, 2016:

    Hey Natalie!

    For my own emails, I bring the index file into Dreamweaver to finalize the HTML (adding title, renaming the images to where it is located online/hosted, adding alt tags, etc), but you can actually edit it in any text editor. I then copy the html into a email serving service (here are a few – Mailchimp, Constant Contact, Benchmark, Send Grid). Personally I use Mailchimp, and you can start out with a free account. Hope this helps!


Leave a Reply