HTML Email Signature Tutorial

How to create an HTML Email Signature from Photoshop.

HTML Template:

[tedhayash]

This is a terrific tutorial, everything spot on.

I want to add that when in Photoshop, you can edit the properties of each slice and enter the link for each, and give it a name and text etc. This eliminates having to add the URLs manually - Photoshop will transfer them to the browser when previewing. The easiest way to do this is in the Save For Web window - double click each slice and enter all the info you like.

[CyberAngel]

Hey Matt,
I'd like to personally thank you because without this tutorial I'd never of completed my email signature,
THANK YOU

[laurathompson]

Thank you!!!! This helped me immensely :)

If any of you are struggling with the quality like I was, start off with an artboard much bigger than what you need, and then scale it down to the dimensions you need it to be to in the save for web window to retrieve the 'preview' code, then scale it back up again to save the images. Works a dream!

[elizabethearle]

This is the best, most simple/thorough tutorial on this I have come across. Most of the others are for developers etc. You have saved my life and about 20 hours of research. THANK YOU. 5 STARS!!

[kamoreeds]

Thank you very much Matt, 5 Years later and you still have the best tutorial on how to HTML Email Signature from Photoshop.
the subject like yours "in my option"
Excellent

[Madden]

Always come back to this incredibly helpful video which has stood the test of time - Pure gold!!!!

[farazghori]

Thank you Mate! this was an excellent tutorial. i spent almost an hour on the web and youtube, saw many tutorials but this one is the winner.

[asemonraja]

I think his guy is a new youtuber. But he share the right solutions with us . Thank you man. Take love ❤

[veronicahanna]

This was the best tutorial I have found on how to create an email signature. I have literally been trying to do this for months! I used Dreamweaver instead of the text editor you used, but everything worked perfectly!

THANK YOU!

[luisavidales]

Thank you so so so I had been struggling with adding a signature for like two or three weeks, reading and watching tutorials like crazy. You explain yourself very well, thank yoU!

[elizabethmiranda-perez]

This is the first time I found one that is so clear and simple to follow. Thanks for the insite.

[ValNg]

This is great thanks! Although for some reason when I send an email it breaks up. It looked fine in my settings area but not when I send it - thoughts/advice?

[mdshohaghossain]

This is the first time I found one that is so clear and simple to follow. Thank you very much

[rafaelnmiguel]

3 days searching for the solution. And i got this simple, and easy to do one.

Man, you just saved my life here =D
Thank you!

[LeyendaNica]

I have improved the signatures I have made thanks to you, that's why thank you so much. Awesome tutorial, RECOMMENDED!

[rebecca-woods]

THANK YOU! THANK YOU! THANK YOU! I've been trying to figure this out for months.

[cherylehargett]

Thank you! It worked! I used Dreamweaver for the code. I just copied and pasted your code in and followed the rest. there was a little figuring out, here and there, but overall success! thank you!!!

[dj_skaarl]

Thank you my lord. Thank you for releasing this video.

[BeeJaneRai]

I know this vid is old as hell but it's still the best out there - THANKS

[IanAbela]

Wonderful... the best tutorial about html signature. Thank you very much