How to Create an Email Signature Banner That Works

ZippySig Email Signature Banners

Want to learn how to create an email signature banner? Read on to find out what makes a banner work for your company.

What Is an Email Signature Banner?

An email signature banner is basically an image at the end of your email signature which is usually about 100px (height) x 700px (width) in size. It allows you to promote your company or add details to it which can help your company advertise. Banners have been used in email signatures pretty much since email clients started supporting HTML signatures. Since then, they have been heavily used by marketing teams as they have a huge CTR when advertising.

How Do Email Signature Banners Work?

An email signature banner works by enticing your recipients to click on the link in your banner. That is why you have to make a really attractive banner that defines a problem and provides a call-to-action (CTA). In addition, they bring more public awareness to your product offering.

Implementing a thoughtful banner in your company-wide email signature that points to your website, will likely see an increase in traffic to your website. Furthermore, that should hopefully convert to more sales.

If you don’t already use an email signature, now is the perfect opportunity to create one for free.

When to Use Email Signature Banners?

1. Advertising Your Product

You can use banners to advertise your most popular products. Besides, you should already know what products sell the most and the USP (Unique Selling Proposition) of those products. Create a banner that sells those products and state the USP clearly, with a call to action at the end. Don’t forget to include different varieties of the product, such as different colors, styles etc.

When advertising your product in an email signature banner, it’s always best to offer a discount code with a time limit. This makes your customers feel like you are taking care of them and they might even get the FOMO (Fear Of Missing Out) syndrome.

2. Promoting an Event

Letting people know about an upcoming company event is a huge task. Not so huge with email signature banners.

When creating a banner for an event, let them know the details like:

  • Date and time of the event.
  • Where it will be held.
  • Any guest speakers that will be there.
  • Key points about the event – eg. “Food and drinks provided”
  • Cost of attending the event.

3. Testimonials

Why not share your testimonials with your customers? Let them know they aren’t the only ones that love your products and services. Testimonials also do wonders for prospective customers that are looking to sign up with you. There is no better way to earn trust from your customers than to hear good things from other people.

4. New Videos

If your company regularly uploads video footage and has a big following on Youtube, then maybe you should consider letting them know when you publish a new video by placing a description and link to the video in the banner. It’s an easy way to get a few more views on your video, and not much effort to implement.

5. New Blog Posts

A blog is boring without an audience. What better way to get an audience than to engage with your existing clients and provide them with good quality content that they will enjoy reading. Similarly to the videos, simply insert your latest blog post into your banner with a link to it.

6. New Product

Placing a banner asking for participants to test your new product works well if you have an established customer base. In fact, you really want existing customers to test your new product, because they will know how it compares to the old product. That is a good thing because they will give you accurate feedback.

In fact, you can also offer an incentive to do the beta-testing for you. For example, give them 25% off the new product when it launches if they participate. It’s a quick way to get feedback on a new product.

7. Holiday Wishes

A lot of companies put banners in their email signatures at Christmas time, wishing their customers a safe and merry holiday season. Furthermore, this is a good gesture and shows your customers that you care about them.

Creating an Email Signature Banner

In this section, we’ll show you how to create a banner using Adobe Photoshop CC edition on a Windows 10 PC.

Step 1:

Choose the email signature you want to use with the banner and take a screenshot of it.

Email Signature for Banner

Step 2:

Open Photoshop and create a new project by pressing Ctrl + N or navigating to File > New. Enter a name for the project and select the Height and Width to be 1000 pixels each. Click OK.

Photoshop New Project

Step 3:

Paste the screenshot into Photoshop.

Click and drag the top and side rulers to be the dimensions of the banner. This makes it easier to align everything.

Photoshop Email Signature Banner

Step 4:

We will use the eyedropper tool from the left section to pick a color from our red logo. We will then set that as the background color of our banner. You would usually choose a similar color to your logo or use your company colors.

Once you pick the color, use the rectangle tool from the left side also to create the banner. When using the rectangle tool, you can click and drag to make the rectangle. A handy trick is to press and hold the spacebar right after you have started making the rectangle, then align the rectangle to the top left ruler and release the spacebar to align the bottom right. This is why we set the rulers before.

Photoshop Email Signature Banner Alignment

Step 5:

Banners can display anything you want, so this part will likely differ to what you are trying to achieve. However, for this example, we will simply insert a call-to-action with a link where people can view more information. Although this is a simple banner, it will give you an idea of how to get it done.

Select the eyedropper tool again, and select the color you wish to use. Alternatively, you can use any color from the palette. In this case, we will use white for the text.

Next, select the text tool and click and drag it over the area you wish to place your text. Type in the call-to-action. Adjust the font and size as needed from the top. Remember to keep the fonts and sizes in line with your email signature so it doesn’t look out of place. We will use size 15 Arial font.

Note 1: Make sure the text layer is above the other layers, otherwise the text will be invisible.

Note 2: You can press V on your keyboard to select the Move Tool and then use the shift key to help you align the text box to where you like.

Photoshop Email Signature Banner Text

Step 6:

Style the banner how you like. You can double click on the rectangle layer (or any layer) to add effects. We will add the Inner Glow and Drop Shadow effects.

Photoshop Email Signature Banner Layer Properties

Step 7:

We will now add a few background images of books to our banner. The opacity of them will be set to about 30% in the blending options.

We want to add a button to the banner that will link to the homepage, and again, style the button as well.

Photoshop Email Signature Banner

Step 8:

Once you are happy with the design, you should flatten the image to make it easy to copy it into a new document.

To do this, select all the layers that you have created by holding shift and selecting the bottom layer and the top layer and press Ctrl + G to add them to a new group.

Once that is done, right click on that group and click “Duplicate Group” and click OK on the pop-up box.

Right click on the duplicated new group, and click “Merge Group”. This will create a new flat layer.


Step 9:

Make sure you have the new flattened layer selected, and select the marquee tool from the left.

Now you need to select the banner using the marquee tool and then copy it to the clipboard by using Ctrl + C. Make sure you also include any external shadows in the selection if you have them. The easiest way to select everything would be to align your selection with the rulers you have set up before.

Next, click on File > New. Click OK to use the default values.

Paste the banner into that new document using Ctrl + V.


Step 10:

Save the new document as a PNG by clicking on File > Save As.

Finally, go to tinypng.comcompress your image and then download the compressed version.

And that’s it, you have made a banner!

Email Signature Banner

How to Add a Banner to Your Email Signature

Adding a Banner Manually

You can add a banner to your email signature by following our guide here. It can be quite complicated to add a banner to an email signature as you have to create new tables and ensure the alignment is correct. This should only be done by people who have a good understanding of HTML.

Adding a Banner with Gimmio

A much easier way is to use our email signature generator to add the banner. It took about 1 minute to do it with the example banner we have made above.

Step 1:

Go to Gimmio and log in.

ZippySig Login

Step 2:

Select your email signature and click the Edit button.

Choose a layout which supports an image at the bottom of the email signature.

ZippySig Installing Banner to Email Signature

Step 3:

Click on the Details tab at the top. Scroll down until you see Image 2 and click the “On” button next to it.

From here, you can upload your new banner and set the scale to 100%. You can also specify the hyperlink for the banner so when people click on the banner, it can go to your website.

Make sure the banner looks correct and is aligned well with the rest of the email signature. If the banner doesn’t look in line with everything else, you may need to make adjustments from the Customization tab or crop the whitespace in the logo image from the Details tab.

Note: Depending on which layout you chose, the image at the bottom may either be Image 2 or Image 3.

ZippySig Customize Banner

Step 4:

Once everything looks right, go ahead and install your email signature into your email client and test it out.

Email Signature Banner