![]() Photoshop can also set the alt text and link for each image. In the dialog that appears, next to Name, type: lunch-specials and click OK.Ĭontinue naming slices according to the diagram below: In the dialog that appears, next to Name, type: header You’ll have to click and hold the Slice tool. ![]() Each slice should have a name that describes the content inside it.Ĭhoose the Slice Select tool. The names of slices are important because they will become the filenames when we export. If you need to adjust the slice, move the cursor over an edge and drag to resize it.ĭrag another slice over the Lunch Specials bar-just below the first slice.Ĭontinue slicing the email as shown below: You might have to click and hold the Crop tool to find it.ĭrag a slice over the top wood area, using the pink Smart Guides to help you position the slice. In the Tools panel on the left, select the Slice tool. We need to slice this into the areas that will link to different webpages. If you get a warning about maximizing compatibility, just click OK. Go to File > Save As and name the file yourname-Lunch Menu.psd. You will not need to edit the text in these files. If you get a warning about missing fonts, proceed through the dialog(s) and Don’t Resolve missing fonts. In the Lunch Menu folder, open Lunch Menu.psd. Go to File > Open, and navigate into the yourname-HTML Email Class folder. ![]() 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. 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. This comes with a few disadvantages, namely the large size of images, and poor experience for users with images disabled. Some graphic-heavy designs cannot be recreated strictly with HTML, so you have to make the entire email with images. Slicing a Photoshop file, Naming slices, Adding alt text, Adding link URLs Exercise Preview Topics covered in this HTML Email tutorial: During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction. Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials.
0 Comments
Leave a Reply. |