How to Create an Impressive Email Signature

A professional and briefly informative email signature is very important for anyone who sends a lot of business emails. Including bloggers. You want your recipients to know who you are (name, position, and company), as well as all the methods they can use to reach you. Secondary email, social media, or phone number if you’re OK with giving it out.

A simple text email is all you need, but I like to take mine a few steps farther. Really, which would you prefer? This:

Chelsey
Blogger
http://chelseyhartman.net
http://twitter.com/diybudgetgirl
http://facebook.com/diybudgetgirl

etc. etc.

Or this:

There is nothing wrong with the first one. It definitely gets the job done. But I feel like the second one makes a much better impression, plus it draws attention to everything at the bottom of the email. I don’t know about everyone else, but once I finish the email, I don’t look at anything beyond the salutation unless it’s necessary. Half the time, I skim the emails, anyway. So anything to draw more attention to it, right!? Right!

You might think I needed someone to design that signature for me, but I did it myself! It’s much easier than it looks, and I intend to show you exactly how I did it.

First, create your images. You can either download Gimp (which is free and acts like Photoshop) or use PicMonkey. The social media icons were downloaded from a site that doesn’t exist anymore…but they’re fairly common. You can find a set just like it here or use your own.

In my own signature, there are 8 images–my signature, my social media icons, and my photo. You can exclude any of these things, but I’ll show you how I did it as is and then how to remove what you don’t want.

(FYI, I created the rounded photo by putting it into PicMonkey. Go to Frames –> Rounded Corners  –> set corner radius all the way to the right, check the box next to “Transparent corners,” and click “Apply.”)

If you’re familiar at all with HTML, you’ll have no issues with this. If you’re not, I’ll try to walk you through it. (If you feel I’m not being clear about something, feel free to leave you questions in the comment section!)

Log in to your email account and find the area where you can create a signature (it’ll be in Settings or Options). Copy and paste this code:

<table>

<tr>

<td><img src=”http://YOUR SIGNATURE IMAGE” width=”118″ height=”35″> <br>

<a href=”http://YOUR WEBSITE URL“>YOUR WEBSITE</a><br>

A description of you or your blog. You can also leave this blank.

</td>

<td><a href=”http://facebook.com/YOUR FACEBOOK SN” target=”_blank”><img src=”http://YOUR FACEBOOK IMAGE” width=”25″ height=”25″ alt=”Follow on Facebook“></a><br>

<a href=”http://twitter.com/YOUR TWITTER SN” target=”_blank”><img src=”http://YOUR TWITTER IMAGE HERE” width=”25″ height=”25″ alt=”Like on Twitter“></a><br>

<a href=”https://pinterest.com/YOUR PINTEREST SN” target=”_blank”><img src=”http://YOUR PINTEREST IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Pinterest“></a><br></td>

<td><img src=”http://YOUR IMAGE URL” width=”75″ height=”75″> </td>

</tr>

</table>

Replace everything within that code with your own information. (The blue parts are things that don’t need changed.) If you want to change the size of something, go for it.

To add another column of social media icons, add another line under Pinterest by going to </td>, hitting enter, and typing <td>. Add the social  media icons you want to add and then end it with </td>. Those “td” codes create new columns (<tr> is for the row).

To reverse this (if you want your image on the left side, for instance), just copy & paste the column (everything from <td> to </td>) wherever you want it to be. It’s pretty simple!

If you want your social media icons to go underneath everything, like this:

 

then you should use this code:

<table>

<tr>

<td><img src=”http://YOUR SIGNATURE IMAGE” width=”118″ height=”35″> <br>

<a href=”http://chelseyhartman.net“>chelseyhartman.net</a><br>

Your description here. Or leave this blank.

</td>

<td><img src=”http://YOUR IMAGE HERE” width=”75″ height=”75″> </td>

</tr>

<tr><td colspan=”2″><center><a href=”http://www.bloglovin.com/YOUR BLOGLOVIN SN” target=”_blank”><img src=”http://BLOGLOVING IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Bloglovin“></a>

<a href=”http://facebook.com/YOUR FACEBOOK SN” target=”_blank”><img src=”http://FACEBOOK IMAGE HERE” width=”25″ height=”25″ alt=”Like on Facebook“></a>

<a href=”http://plus.google.com/YOUR GOOGLE+ SN” target=”_blank”><img src=”http://GOOGLE+ IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Google+“></a>

<a href=”http://pinterest.com/YOUR PINTEREST SN” target=”_blank”><img src=”http://PINTEREST IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Pinterest“></a>

<a href=”http://YOUR TUMBLR SN.tumblr.com” target=”_blank”><img src=”http://TUMBLR IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Tumblr“></a>

<a href=”http://twitter.com/YOUR TWITTER SN” target=”_blank”><img src=”http://TWITTER IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Twitter“></a></td></tr>

</table>

That one is great if you want to have lots of social media icons, but you don’t want to take up more horizontal space than necessary.

To move rows, copy and paste everything from with the <tr> (row) field.

There are many different ways you can use this code, so play around with it and see what you come up with!

[ETA: Many of you are having issues with this tutorial because Gmail doesn’t allow HTML (which I totally forgot about when I wrote this). So Ellie from Creative Geekery sent me a tutorial she found on how to load signatures like this into Gmail. You can view the tutorial here.]

Do you use a signature? Is there a special way you like to do it? Leave it in the comments!