Skip to main content
Dan Rodney/3 min read

Creating & Naming Slices in Photoshop

Common Email Pitfalls

CSS Grid/Flexbox

Outlook ignores them — fall back to tables.

Background Images

VML hacks for Outlook; modern email clients support natively.

Web Fonts

Limited support — provide system font fallbacks.

Forms in Email

Don't — most clients block. Link to a landing page instead.

Master Web Design at Noble Desktop

Noble Desktop's Web Design Certificate teaches HTML, CSS, and the responsive design patterns behind every modern email and web project.

Dive into this comprehensive HTML email tutorial to learn about slicing a Photoshop file, naming slices, adding ALT text, and adding link URLs for a seamless email creation experience.

Topics Covered in This HTML Email Tutorial:

Slicing a Photoshop File, Naming Slices, Adding ALT Text, Adding Link URLs

Exercise Preview

slice options

Exercise Overview

Some graphic-heavy designs cannot be recreated strictly with HTML, so you have to make the entire email with images. This comes with a few disadvantages, namely the large size of images, and poor experience for users with images disabled. All the same, Photoshop is capable of doing most of the things we need for a one-time email, and it’s going to be quicker than coding it from scratch. Keep in mind that Photoshop does not produce very flexible, reusable code, so the approach we will use is not recommended for any email that will be used more than once.

Slicing the File

  1. Launch Photoshop.

  2. Go to File > Open, and navigate into the yourname-HTML Email Class folder. In the Lunch Menu folder, open Lunch Menu.psd.

  3. If you get a warning about missing fonts, proceed through the dialog(s) and Don’t Resolve missing fonts. You will not need to edit the text in these files.

  4. Go to File > Save As and name the file yourname-Lunch Menu.psd.

  5. If you get a warning about maximizing compatibility, just click OK.

  6. We need to slice this into the areas that will link to different webpages. In the Tools panel on the left, select the Slice tool slice tool. You might have to click and hold the Crop tool crop tool to find it.

  7. Drag a slice over the top wood area, using the pink Smart Guides to help you position the slice.

  8. If you need to adjust the slice, move the cursor over an edge and drag to resize it.

  9. Drag another slice over the Lunch Specials bar—just below the first slice.

  10. Continue slicing the email as shown below:

    lunch menu create slices

Naming Slices

The names of slices are important because they will become the filenames when we export. Each slice should have a name that describes the content inside it.

  1. Choose the Slice Select tool slice select tool. You’ll have to click and hold the Slice tool slice tool.

  2. Double–click the top slice.

  3. In the dialog that appears, next to Name, type: header

  4. Click OK.

  5. Double–click the Lunch Specials slice.

  6. In the dialog that appears, next to Name, type: lunch-specials and click OK.

  7. Continue naming slices according to the diagram below:

    lunch menu name slices

Creating ALT Text & Links

Photoshop can also set the ALT text and link for each image. When we export HTML later, it will put the ALT text and links in the code for us.

  1. With the Slice Select tool slice select tool chosen, double–click the top slice.

  2. In the dialog that appears, set the following before clicking OK:

    URL: http://www.omniburger.com
    ALT Tag: Omniburger—The Best Burgers of the World

  3. Double–click the Lunch Specials slice.

  4. In the dialog that appears, set the following before clicking OK:

    URL: http://www.omniburger.com/lunch.html
    ALT Tag: Lunch Specials Mon-Fri, 11am-4pm

  5. Continue setting URLs and ALT text according to the diagram below:

    lunch menu name url and ALT text

  6. When finished, Save the file.

  7. Keep it open; you’ll be using it in the next exercise.