Create HTML Email Step 3-Slicing for the Web in Photoshop

This is the third part of a multiple part tutorial series on creating HTML emails from a pre-designed document.

Many firms that rely on marketing have a similar scenario: The marketing staff has created various marketing pieces that work great as print pieces, but when they want to do some customized e-mail marketing, the effort boils down to sending attached PDF documents or using template based subscription services.

In this session, we are taking an image file that we have exported from Acrobat and importing it into Photoshop to slice and optimize for the web.

For a while, the slice tool in Photoshop intimidated me, but it's actually quite easy to use once you get the hang of it. Simply put, this tool allows you to take an image and literally slice or cut it up into manageable pieces that you can then optimize for the web by converting to various formats such as .gif, .jpg, .png, and others. Then, using the Export for Web and Devices function, these images will all be saved in a folder and you have the option of generating HTML code (which we will do).

For a more detailed version of this tutorial, visit my blog at http://www.edhart.me/2011/02/how-to-create-html-email/

If you find this tutorial helpful, please post a comment or share using Facebook, Twitter or whatever way you prefer and thanks for taking some of your time to watch this video!

Category:

Howto & Style

Tags:

• slice tool
• slice in Photoshop
• create HTML email
• tutorial
• marketing

[eh3k]

Great. Thanks for your comment!

[Amberlina03]

This was very helpful, thank you!! :-)

[eh3k]

@Amberlina03 Thanks for the note!

[waaness]

this is by far the BEST tutorial for making a PDF - HTML e-newsletter. Thanks for making this!

[eh3k]

@waaness Thanks for the note! I'm really glad you found it helpful.

[tutumclennan]

Thank you so much for the easy to follow (for an extreme beginner) tutorials! I have subscribed...you are my new html Kahuna...I appreciate your correct usage of the english language, your "easy to listen to" tone of voice and professional delivery. Mahalo!

[eh3k]

@tutumclennan Thanks for the note! Glad you found it helpful.

[Cloud797]

Final-fucking-ly. It took forever to find a decent tutorial on this.

[cstrombe]

Very helpful to this PS newbie. Thanks for posting.

[eh3k]

Thanks for the note. Glad you found it helpful.