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.
This exercise is excerpted from Noble Desktop’s HTML Email training materials and is compatible with updates through 2021. To continue learning HTML Email with hands-on training, check out our coding bootcamps in NYC and live online.
Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.
Topics covered in this HTML Email tutorial:
Slicing a Photoshop file, Naming slices, Adding alt text, Adding link URLs
Exercise Preview
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
Launch Photoshop.
Go to File > Open, and navigate into the yourname-HTML Email Class folder. In the Lunch Menu folder, open Lunch Menu.psd.
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.
Go to File > Save As and name the file yourname-Lunch Menu.psd.
If you get a warning about maximizing compatibility, just click OK.
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
. You might have to click and hold the Crop tool 
to find it.Drag a slice over the top wood area, using the pink Smart Guides to help you position the slice.
If you need to adjust the slice, move the cursor over an edge and drag to resize it.
Drag another slice over the Lunch Specials bar—just below the first slice.
-
Continue slicing the email as shown below:
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.
Choose the Slice Select tool
. You’ll have to click and hold the Slice tool .Double–click the top slice.
In the dialog that appears, next to Name, type: header
Click OK.
Double–click the Lunch Specials slice.
In the dialog that appears, next to Name, type: lunch-specials and click OK.
-
Continue naming slices according to the diagram below:
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.
With the Slice Select tool
chosen, double–click the top slice.-
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 Double–click the Lunch Specials slice.
-
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 -
Continue setting URLs and Alt text according to the diagram below:
When finished, Save the file.
Keep it open; you’ll be using it in the next exercise.