Design & Illustration

Categories

Learning Guides

A D OB E P H OTO S HO P

Designing a Christmas Email

Newsletter in Photoshop
by Tomas Laurinavicius

1 day ago

1 Comment

What You'll Be Creating

In this tutorial Ill guide you through the process of designing a clean and festive
themed email template. Well start off totally from scratch, drafting the layout with
Adobe Photoshop. Well be using some basic and intermediate techniques to create
this design with conversion in mind. Lets 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 Years 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
Lets 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 well keep things organized and therefore easy to
navigate and edit. Lets 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 shouldnt make your background too fancy or distracting as many email users
wont see it on smaller screens. Also worth mentioning is that the background
shouldnt be an image as it will be blocked by default on many email clients.

Step 1
Lets 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 doesnt
distract the recipient but still creates a different mood.

Step 2
Now its 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 doesnt 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 Ive
mentioned before, images may be disabled when your email is opened so it can ruin
the experience because your logo wont 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 doesnt 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. Ive 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. Well
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 lets write our main message. Im 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 well 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). Ill 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 its time to say something in more detail, dont be too long and try to grab
readers attention, leading the reader to click the call to action button well design in
a moment. Using the same Horizontal Type Tool (T) write down your copy, for mine
Ive used the same color as for the Open in browser link #666666 and Open Sans
(Regular) 18px size.

Step 11
Awesome! You have the readers attention and now its 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 buttons
message. Ive 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 well list out some best articles of the year. For this tutorial Ill 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. Ill 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. Lets 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 weve 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!

Our finished design

Thats it! Were 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. Ive touched upon some basic techniques and demonstrated my workflow
for designing email layout, I hope youve learnt something.
Id love to hear your feedback and see the outcomes of this tutorial!

Difficulty:
Beginner
Length:
Medium
Categories:
Adobe Photoshop

Email

Conversion

Translations Available:
Tuts+ tutorials are translated by our community members. If you'd like to translate this post into another language, let
us know!

Download Attachment

About Tomas Laurinavicius

Adventurous designer and entrepreneur. Editor-in-chief at Despreneur and Product Manager of Refe. Coauthor of Mobile Design Book. Currently traveling the world.

Suggested Tuts+ Course

Designing and Publishing Websites With Adobe Muse

Related Tutorials
Design an Elegant Gratitude Log Landing Page With Photoshop
Web Design

Designing a Web App UI Kit in Adobe Photoshop

Free

Web Design

Designing a Simple Instagram Based Portfolio in Photoshop

Web Design

Jobs
WordPress Site Migration
in Fort Lauderdale, FL, USA

Android & Java Course Instructor

at Tuts+ in Melbourne VIC, Australia

Envato Market Item

2 Comments

Tuts+ Hub

Share Favorite

Sort by Best

Join the discussion

Nelly Rahman

4 minutes ago

the final touch are really awesome. thanks

Reply Share

kuritooop

a day ago

its awesome

Subscribe

Reply Share

Add Disqus to your site

Teaching skills to millions worldwide.

18,812 Tutorials

Follow Us

Login

455 Video Courses

Privacy

Help and Support

FAQ
Terms of Use
Contact Support
About Tuts+
Advertise
Teach at Tuts+
Email Newsletters
Get Tuts+ updates, news, surveys &
offers.
Email Address
Subscribe
Privacy Policy

Custom digital services like logo design, WordPress installation, video production
and more.
Check out Envato Studio

Choose from over 5 million royalty-free photos and images priced from $1. No
subscription required.
Browse Photos on PhotoDune

2014 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.