In this tutorial I’ll guide you through the process of designing a clean and festive themed email template. We’ll start off totally from scratch, drafting the layout with Adobe Photoshop. We’ll be using some basic and intermediate techniques to create this design with conversion in mind. Let’s get it started!
Tutorial Assets
In order to follow along you will need some (freely available) assets:
- Open Sans font from Font Squirrel
- Playfair Dislay font from Font Squirrel
-
Bokeh of String Lights on Tree photo from Good Stock Photos
- New Year’s quote from BrainyQuote
Get the Document Ready
Step 1
Begin by creating a new Photoshop document (File > New…) using the settings shown below. The majority of email newsletters have a defined width of around 620 total pixels. I usually use 600px, but anything below 620px is fine. When this is built in HTML it might well be responsive anyway.
Step 2
Let’s set some guides so we have our safe area designed within the bounds of 620px width. Go to View > New Guide… and set some guidelines on the sides as well as a guideline in the middle so we can easily align things later.
Note: Guidelines used for this tutorial: vertical at 40px, 80px, 340px, 600px and 640px.
Tip: You could also use the GuideGuide Photoshop plugin to make this process even quicker.
Step 3
Sticking to Photoshop etiquette we’ll keep things organized and therefore easy to navigate and edit. Let’s create three layer groups named “Header”, “Message”, “Best” and “Quote”. To create groups go to Layer > New > Group… and give each one a title as mentioned. For quick creation of a group just click the folder icon.
Preparing the Background
You shouldn’t make your background too fancy or distracting as many email users won’t see it on smaller screens. Also worth mentioning is that the background shouldn’t be an image as it will be blocked by default on many email clients.
Step 1
Let’s first set the background of the email. Change the foreground color to very light blue #f6f9fb and hit Alt+Backspace to fill the “Background” layer. You can use any other light shade for your email but it is better to have this subtle color that doesn’t distract the recipient but still creates a different mood.
Step 2
Now it’s time to set a background in the safe area where all email content will be put. Pick the Rectangle Tool (U) and draw a white #FFFFFF rectangle between the first and last vertical guidelines that are 600px apart.
Designing the Header
The header of our email is very important and is the crucial point where the email recipient will decide if reading further is worth their time. According to this guide by Nicole Merlin, email expert extraordinaire, it is important to be clear and transparent.
“State the sender, cut the fluff and get straight to the point.”
For this tutorial I will simply put a company name and a link for people to open the email in a web browser in case it doesn’t load properly via the email client. Additionally, I will include a huge image with simple messaging setting the mood and showing the intentions of this email, which is about wishing happy holidays.
Step 3
Open up the “Header” group and pick the Horizontal Type Tool (T). You may find it better to write your company name rather than use a logo because, as I’ve mentioned before, images may be disabled when your email is opened so it can ruin the experience because your logo won’t be visible.
Pick a font that you use for your brand and write your company title, place it on the left top side and give it some space around. In my case I used Open Sans (Bold) 18px size dark grey #434343 for the color.
Step 4
It is very important to provide a link that people can click or tap on and open the email in their browser in case it doesn’t render very well in the email client. Just a simple text link will do the job, placed early on so screen-readers encounter it straight away. I’ve used the same Open Sans (Semibold) font and changed the color to brighter grey #666666 and reduced font size to 13px. Finally place it in the right top corner of the email.
Step 5
Awesome! Now we need to place an image to draw attention of the recipient. We’ll use a Christmas themed photo, adding some gradient effect and copy above it all.
Grab the Rectangle Tool (U) and draw a 600x300px sized box between the first and last guidelines. Then create a new layer on top of it and hold down the Alt key and mouse over the photo layer until you see a little arrow pointing down. When you see it, click on it and you will create a Clipping Mask. Now pick the Gradient Tool (G) and choose the default gradient from red to green.
Now make the gradient by dragging your mouse from top left to bottom right. You will get something like the example below.
Step 6
After that download Bokeh of String Lights on Tree photo from Good Stock Photos and place it over the gradient layer creating a Clipping Mask for this layer too. Finally hit CMD+T and resize the photo.
Pro tip: hold down Shift key to draw/resize proportionally.
Step 7
Now set the layer blending mode to Overlay.
Step 8
Finally let’s write our main message. I’m using white #FFFFFF with the bold, yet elegant typeface Playfair Display (Bold Italic) 52px size to portray the festive feeling. When designing email newsletters make sure to keep your message short and clear so users get it right away.
Designing the Message Area
Another thing that you should keep in mind is designing blocks that can be re-used. For example we’ll design this message block that can be turned into a template so users can change the headline, main copy and call to action button without the need of a designer because everything will be pre-designed. Also they can duplicate such a block and use different messages.
Step 9
It is smart to design your emails in one column and centrally aligned so it can be made into responsive layout easily. Open up the “Message” group and pick the Horizontal Type Tool (T). I’ll be re-using the type layer used for the company title and will increase the font size to 32px and change weight to Extrabold.
Step 10
Now it’s time to say something in more detail, don’t be too long and try to grab reader’s attention, leading the reader to click the call to action button we’ll design in a moment. Using the same Horizontal Type Tool (T) write down your copy, for mine I’ve used the same color as for the “Open in browser” link #666666 and Open Sans (Regular) 18px size.
Step 11
Awesome! You have the reader’s attention and now it’s time to put a call to action button so your email leads somewhere useful. Create a new group called “CTA” and grab the Rectangle Tool (U), after that change foreground color to a red #de1816 that represents the Christmas mood and draw a rectangle shape. In my case it is 240x40px size. Then pick the Horizontal Type Tool (T) and enter the button’s message. I’ve used white #FFFFFF Open Sans (Bold) 14px size.
Finally we need to close the block by separating it with a line; set the foreground color to light grey #eeeeee and pick the Line Tool (U) with Weight set to 1px. After that draw a horizontal line between the first and last guidelines. Leave some space above the line.
Pro tip: hold down Shift to draw perfectly straight lines.
Designing the “Best of” Area
One very common feature in email digest newsletters is sending out latest articles that readers may have missed or would be interested in. When designing such a module you need to keep in mind that it is going to be a dynamic element so you need to set up the scene leaving the email creator to replace the information.
Step 12
Duplicate the previously used message headline layer by hitting CMD+J and dragging it into the “Best” group. After that, change its title and place it below the line consistently, so you maintain vertical rhythm.
Step 13
Now we’ll list out some best articles of the year. For this tutorial I’ll simply use article images, titles and descriptions from Tuts+ Web Design.
Create a new group called “Article”. Grab the Rectangle Tool (U) and, holding down the Shift key, draw a 140x140px sized box. Then pick an article image and drag it to your Photoshop window, after that create a Clipping Mask as we did before and resize the image if needed.
Step 14
Great! Now we need to enter the article title and short description so the reader can get a quick overview before clicking or tapping. I’ll re-use the section headline layer by duplicating it and reducing the font size and also duplicating the description layer from the “Message” group.
Step 15
Minimize the “Article” group and duplicate for two more times by hitting CMD+J. After that move these duplicated groups below the first one and you will need to change the titles, images and descriptions of these duplicated elements.
Step 16
Finally duplicate the “CTA” group and line layer by selecting them and hitting CMD+J, after that move these layers into the “Best” group and place them below the articles leaving enough space.
Designing the Quote and Footer
The end is very near. Let’s put a final block in our newsletter, an inspiring quote with a secondary call to action to tweet it. Best practice is to repeat the main call to action at the very end of the newsletter, but we will break this rule here and use an inspiring quote to energize the reader.
Step 17
Open up the “Quote” group, pick the Horizontal Type Tool (T) and any quote you like from BrainyQuote. Copy the quote and write it down using the same elegant typeface we’ve used for the graphic at the very top of our newsletter. In my case it is Playfair Display (Italic) 24px size and grey color as used for the copy #666666 earlier.
Step 18
Head over to the Twitter website and copy a tweet button. Take a screenshot by hitting Shift+CTRL+CMD+4 and selecting the Tweet button. After that paste it and place below the quote.
Step 19
One last thing. Every email newsletter has to have an option for people to unsubscribe. It is also good to state why recipient is getting the email in the first place. Reuse the “Open in browser” link from the very top, duplicate it and place it below the content background.
Congratulations!
That’s it! We’re done with the email layout design, now review the layers, delete the unnecessary ones and hand it over to your developer, or even better code it yourself. I’ve touched upon some basic techniques and demonstrated my workflow for designing email layout, I hope you’ve learnt something.
I’d love to hear your feedback and see the outcomes of this tutorial!
