How I made my email signature

A number of people have asked me about my email signatures and how I made them so I thought I’d make this very short tutorial to show you…

A number of people have asked me about my email signatures and how I made them so I thought I’d make this very short tutorial to show you how I made both my work email signature and my personal one.

My work email has no images in it because one of the services that I use regularly in school is a mailing list that doesn’t allow images. I know I could create separate signatures but the pay off of switching between them wouldn’t be worth it. Instead, I use colour for my signature to make it stand out. Because I work in Carlow, my email signature is in the Carlow colours, red, yellow and green and looks something like this:

It’s very simple to set up in Gmail. All you need to do is go to your settings (the cog) and scroll down the options until you find the signature section. In there, it’s as easy peasy as typing in your signature and editing the text colour and weight.

My personal email looks a little bit more fancy. Here it is:

As you can see, it has a picture of me wrapped in a blue circle on the left and then we have a few bits of information. Underneath, as just a quirk, I also add which book I’m reading at the moment.

The problem with Gmail’s signature setting is that you can’t replicate this with just the settings. For this you need a little bit of coding. Don’t worry, it’s very simple and I’ll show you how. You also need a nice picture of yourself. I prefer a white background but it works just as well with any background. In fact, let’s start with the photo, as this requires no coding.

📸Step 1 — The Photo

As a teacher you are entitled to free access to Canva so if you haven’t already done so, get yourself set up! If you haven’t heard of Canva, go to canva.com and you can thank me later! It’s a brilliant graphic tool that is most often used by teachers and everyone else for creating beautiful looking posters but it’s so much more than that.

Create a new project and make a square that’s as small as possible — say 150px x 150px. This will create a new canvas for your photograph.

You’ll need a frame for your photo so go to the Elements menu and type Frames and you should get a load of them. I like a thick circle but choose your own preference. Once you’re happy, click on it to add it to your screen or drag it over. Make it cover your entire canvas.

Next, upload your best photo to Canva and drag it into your frame and, as if my magic, you’ll have your photo framed nicely. Last step is to save the file on to your computer as a transparent png file. This is easy enough to do.

Go to the Share button, select a png image type and make sure the checkbox for transparent image is ticked. You can then export the image, et voila — it should be in your downloads. It’s likely the filename won’t be great so you can rename it to NAME_sig.png or whatever suits.

The last step is to upload the signature photo on to your scool website as you’ll be referring to it later. The majority of schools that I know are using Wordpress as a backend but if you aren’t don’t worry, there’s plenty of ways to do this. This step follows Wordpress.

Log into your Dashboard in Wordpress and go to Media → Upload. Upload your photo there and it will be displayed in your Media folder. The important bit is to copy the URL of the photo, which you should see.

OK, that’s the photo out of the way: let’s move to the code.

Essentially, your signature is just a HTML table. HTML is a computer language that is super simple to work with because it resembers English very closely. Below I’ll give a quick template. The template essentially creates a 2 column tables, the left-hand-side for the photo and should be about 25% of the width of the signatue and the second coloumn should be about 75%.

<table border=0>
<tr>
<td width="25%> [CODE FOR YOUR PHOTO GOES HERE] </td>
<td>[CODE FOR YOUR SIGNATURE GOES HERE </td>
</tr>
</table>

As you can see, there’s not much to it.

Replace the [CODE FOR YOUR PHOTO GOES HERE] with the following HTML → <img src=”[URL PASTED FROM WORDPRESS] width=”150px” height=”150px” />

Replace the code for your signature with whatever you like except at the end of each line, add the following HTML code: <br />

This is simply the code for a line break, essentially like hitting Enter on a keyboard.

So for example, I could write:

<b>Simon Lewis</b><br />
<br />
🎓Principal <br />
📍Carlow Town <br />
📘Roll Number: XXXXXX <br />

Note the tags <b> </b> make the text bold. You can mess around with colour too if you like but it’s a little more complicated. <font color=”HEX CODE”> </font> where the HEX code is a 6-digit code for every colour in the world. #FFFFFF is white and #000000 is black but it’s probably worth a google search for this.

And once you’ve done this, you are done with the signature.

To get the book you’re currently reading, you can manually add this with code or you can use the service Good Reads which has embeddable code which you can add yourself. It’s a very easy copy/paste of HTML code which you only have to do once.

That’s all there is to it. Click Save and wait for a little while and after that your signature is ready to go!