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.
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.
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.
4. Once you select “Slice from Guides” your artboard should look like this:
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:
Select “Preview” and your browser will open up a tab that looks like this:
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:
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!
Paste the body text into the Text Editor with your starter code so that it looks like this:
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:
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.”
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.
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.
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.
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:
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:
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.
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.
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.
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.
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.
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.
← Older Post
Newer Post →
