How to Create an Image-Based HTML Signature

Why Create an Email Signature at All? 

Email— love it or hate it, it’s a key part of your everyday workflow as a photographer. It is, essentially, an extension of your brand and may be the primary, if not only, way you connect and communicate with your clients before meeting them for their session.
Email signatures are an excellent way to brand your communications and keep your marketing materials cohesive across the board. They are also just one more area where you can advertise your business and connect every contact with your website, social pages, and all your promotions.
The best email signatures are the ones that not only share your contact details but also communicate a lasting impression for your brand.

HTML vs Image Signatures

So, what’s the difference? First and foremost, if you are using an image-based email signature, you are at risk of your emails being marked as spam. This is usually because the text-to-image ratio is too low. Most spammy emails rely heavily on images because their HTML skills aren’t up to snuff. But have no fear, we’ll teach you everything you need to know to help get your emails in front of your audience.
Image-based email signatures aren’t clickable, either. You’re losing valuable space where you can add your most important links, like your website, Instagram, Facebook or promotions. Using an image only allows you one hyperlink, whereas using an HTML signature allows you to have multiple links, optimizing your signature to be extremely clickable.

Your Step-by-Step Guide to Creating An HTML Signature

We’ve laid out, step-by-step, how to create an awesome HTML email signature. Let’s get started!
1. First, you’ll need to create an email signature design in Photoshop. Your dimensions should be about 650px by 150px for ideal presentation and readability. Remember to use your signature fonts, colors, and any design elements from your brand. This example features Design Aglow’s Lore Design Theme.

LORE Email Signature Photoshop

2. Next, place ruler guides at the different places where you are going to want clickable links. You’ll want to create a grid around each of your social icons and website.

LORE Email Signature Guides Photoshop

3. Once you’ve placed your guides, select the “slice” tool in your toolbar. At the top of your screen, click “slice from guides.” This will cut your file up into separate images that will be used to create the HTML code.

Photoshop Slice From Guides

4. Once you select “Slice from Guides” your artboard should look like this:

LORE Email Signature Slice From Guides

After we save our file, each sliced section will become its own image.
5. We’re now ready to save our file and get into the coding portion. It may seem daunting but don’t worry! It’s easier than you think, we promise.
Go to File → Export → Save For Web (Legacy) and this screen will pop up:

LORE Email Signature Save For Web Preview

Select “Preview” and your browser will open up a tab that looks like this:

Email Signature Web Preview

You can see your email signature image and all the HTML code that we will be using to plug into our main code.
6. Next, you’ll want to open a text editor where your code will live. If you have an Apple computer, you can use the Text Edit application or download Sublime Text  for free online. Open a new Text Document and paste this starter text into it:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>


<!-- Paste Code Under This Line
_________________________________________________________________________________ -->






<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>
7. Paste the starter text into the Text Editor with your starter code so that it looks like this:

Sublime Text Editor Starter HTML Code

8. Go back to that preview tab you opened earlier from Photoshop and grab the body text that is enclosed in the <body> </body> tags. Hey, rockstar...you’re coding!

LORE Email Signature Preview HTML Code Body Text

Paste the body text into the Text Editor with your starter code so that it looks like this:

Sublime Text HTML Code

9. Save your file with whatever naming convention you’d like. We saved ours as LORE-EmailSignature. Be sure to save it as an .HTML file so that you can open it in a web browser. Your file will save to your desktop, so look for it there. Once you open your .HTML file, it will open a tab in your web browser. It will look like this:

LORE Email Signature Web Preview

This is going to be the template for you to plug in all the HTML. You’ll notice how the separate image slices we created in Photoshop are there, but the images are missing. This is because we’ll need to save them into an online space where they will live.
10. Go back to Photoshop and come back to your original export screen and hit “Save.”

LORE Email Signature Photoshop Save

Each image slice will be saved in numerical order into a folder on your desktop as well.
11. Once your images are saved, they will need to be hosted online so that we can link them into our code. We recommend using PostImage.org. It’s a free site where your images will live online, forever.

Post Image Upload Screen

Make sure when you upload all your images, you set no expiration date and you do not resize the images. Once you upload your images, links will be created that we can plug into our code so the sliced image slots in our URL browser will be populated.

Post Image Image Upload Links

12. Now that all of our images have been uploaded, we are ready to replace the placeholder links in our code with the links created on Post Image. Copy your first image link and replace the “BrowserPreview_tmp_01.jpg?1550001679” link with your new image link. Be sure to paste your new link in between the quotation marks.

Sublime Text Editor Image Links

Once you add your first link, hit save and refresh your web browser to test your code. If done correctly, your email signature will look like this:

LORE Email Signature Image Link Population

13. You are going to repeat step 12 until all images have been properly linked. Once completed, your HTML browser tab will look like this:

Populated HTML Image Link LORE Email Signature

Congrats, you’re almost done! Now that you’ve properly linked all your images, you are going to want to add your web links so that your signature is clickable to your different landing pages.
14. Let’s go back to our Post Image tab. Here you’ll find all your different images. You’ll be able to see your icons and their corresponding numbers. For example, you can see that our Facebook icon is linked as image number 12. This means you’ll need to add your link to the 12th image link in your HTML code.

Email Image Link for Facebook

In front of the <img> bracket is where you are going to add your code. The code you will use is:
<a href=”YOURLINKHERE”> in this case, we are using Facebook so your link should look like:
<a href=”https://www.facebook.com/YourStudioPhotography”> Don’t forget to include the <> brackets, the quotation marks and the ‘https://” or your link won’t work properly.

Sublime Text Edit Facebook Link

You are going to repeat step 14 until all your links are working properly. You can keep saving your Text File and refreshing your HTML browser page to test the links. You’ll be able to see if your links are linked properly by rolling your cursor over the icons to see if the mouse turns to be clickable.

Facebook Icon Linked

One thing to note is to place your links on all the sliced images with a link. For example, the www.yourstudiophotography.com link is sliced up into four separate images. You’ll want to make sure you add that link to all four images so that wherever the cursor lands, the link will be clickable.
Once you’ve placed all your links, you finished the hard part! You are now ready to put your shiny new email signature into your email. Yay!
15. If you have Gmail, open your email, go to your settings and scroll down until you see the signature box. Copy your signature from your HTML browser window and paste it into the signature box, hit save and you’re all done! (P.S. it's ok if the pasted signature goes over the box a little, it will format fine once saved.) Open a new email, and you will see your brand new, custom HTML signature.
If you have an email for Outlook, the process for adding your email signature will be the same.

Completed LORE Email Signature

And that’s it! You’ve just created and coded your very own HTML email signature! See, that wasn’t so bad, now was it? Go ahead and give yourself a pat on the back, you deserve it.
Have questions? Leave them in the comments below!
Want to find your perfect brand for your signature and branding? Take our new styles for a spin and see which one is your studio’s soulmate. You can find all our styles here.