How To Create a Newsletter Design in 7 Steps (+ Newsletter Templates)

by Stephanie Hamilton

Last updated on November 12th, 2018

Crazy Egg email marketing guide

Email isn’t going away. It’s here to stay. In the same vein, email newsletters are becoming more popular (and more important) than ever.

If you want to reach potential (and existing) customers, newsletters are a great way to spread your message to a large audience — whether it be upcoming projects, company news, or other business-related information. It’s super cost effective, as well.

In this tutorial, I’m going to walk you through how to create an email newsletter template in Adobe Photoshop, and we’re going to be using some common design patterns that I’ve found very effective.

After you’ve completed the design process, you’ll be ready to code and style this template for your own business. Here’s a link to the post on coding an email newsletter. Let’s go!

What Exactly Is an Email Newsletter?

You’ve probably seen an email newsletter in your inbox before. It’s a cost-effective way for brands to communicate with their users or customers.

If you’re a business like Sephora, for example, your newsletter invites customers to read about makeup tips, gives them a sneak peak at new products and probably offers a coupon.

design-email-newsletter-template-what-is-sephora

If you’re a content site, your newsletter includes an enticing headline for each new article to get users to click over to your site and read more.

As long as you’re offering content that your customers or users find useful, you can leverage email newsletters to keep your brand fresh in their minds.

The Purpose of an Email Newsletter

The purpose of an email newsletter depends on your business. You can use it to drive sales through featured products and coupons. You can connect with customers through helpful tips and information. You can even boost your social following or traffic to your site.

Just remember, good email campaigns are tailored to your needs as well as to the needs of your users.

How Do Email Newsletters Work?

A good email newsletter is not an update of company news. It’s a way to engage people and get them to take an action. It offers readers exclusive information they could not get anywhere else and then calls on them to click, buy or subscribe.

To do that, your newsletter format should be simple and easy to read, yet attention-grabbing.

How to Create a Newsletter Design in 7 Steps

When it comes to email newsletter design and layout, there are some best practices to follow. Let’s look at the process, step by step.

1. Getting Started: Newsletter Size and Dimensions

As a general rule, it’s best to start your newsletter formatting with a fixed width instead of a fluid/liquid layout. If you don’t know the difference, this article should clear it up. This will prevent horizontal scroll bars, which pop up when you don’t use the full width of the screen.

Design your newsletter with a width of around 550 to 600px and make sure the important information is within the top 300 to 500px. This is the size of an average “preview pane” in most desktop email clients.

2. Set Up the Document in Photoshop

Open up Photoshop and create a new document with a width of 800px, a height of 1000px and a resolution of 72dpi. Be sure the color mode is RGB.

design-email-newsletter-template-2-set-up-photoshop

For this newsletter example, I filled the background layer with a light gray. Then I created a container 600px wide to house the main content. I filled it with white and positioned it in the center of the document.

design-email-newsletter-template-2-newsletter-example

3. Allow the User to View the Email in the Browser of their Choice

I added this notice to the top of the newsletter using the Myriad Pro font, 10pt size:

Email not displaying correctly? View it in your browser.

It’s important to give people plenty of options for viewing your email newsletter. Some email clients might not download images by default. To improve accessibility, always include a link to view the email newsletter in a web browser.

4. Create the Email Newsletter Header

In this tutorial I’m creating an email newsletter called The Pet Digest to complement my new blog, The Pet Anthology. The goal is to keep interested readers up-to-date with the latest goings on through a weekly bundle. Since the branding on my blog has already been established, choosing the fonts, color, and graphics of my newsletter is easy.

design-email-newsletter-template-4-step-1

The above image is the header of the blog, which I also created in Photoshop. I’m going to retain the look and feel while making only slight modifications. I start by opening up the psd of the blog header and copying the mascot over into the newsletter template. From there, I grab the name and slogan and copy them into the email newsletter template, as well. With some minor revisions to the text, the newsletter looks like this:

design-email-newsletter-template-2-step-2

The fonts I used were: Slab Tall X for the words Pet Digest, Champagne & Limousines for the words Our Weekly Bundle, and Learning Curve for the.

5. Create the Main Part of the Newsletter

I created another rectangle that’s 600px wide under the header and extended it close to the bottom of the page.

design-email-newsletter-template-5-create-another-rectangle

I then gather the content that will be featured in the week’s newsletter. Again, borrowing the design attributes already laid out in my blog, The Pet Anthology, I create the heading using Museo Sans, drag and drop the main image and copy in the article text. A dotted border placed underneath will separate each article field.

design-email-newsletter-template-5-step-2

I then duplicate the first entry twice and move them down to fill out the rest of the spots for this newsletter. I’ll place the new content in the duplicated spots shortly.

design-email-newsletter-template-5-duplicate

Using guides, I insert the remaining two entries and erase the duplicated content.

design-email-newsletter-template-5-using-guides

6. Add Social Links

I want to include an area for social network and RSS icons, and I want to let the subscriber share the newsletter with friends. I start by creating a rectangle 252px wide and include a call to action that encourages subscribers to follow us.

I use the appropriate social network icons, changing the colors to reflect my branding. Keeping in mind the usability of email newsletters I decide to keep things simple.

design-email-newsletter-template-6-social-links

I then duplicate the rectangle and place it to the right, including the “Share this with you friends” text in the Museo font on top.

7. Include a Footer

To wrap things up, I create the footer, which will allow subscribers to get in contact with me or to unsubscribe from the newsletter. Every newsletter needs to have a link or a button to allow the reader to unsubscribe from the newsletter if they want to.

design-email-newsletter-template-7-include-footer

Newsletter Design Checklist

Once again, here are the seven steps for creating a newsletter design template you can use to make your own creative email newsletters:

  1. Getting Started: Newsletter Design and Dimensions
  2. Set Up the Document in Photoshop
  3. Allow the User to View the Email in the Browser of Their Choice
  4. Create the Email Newsletter Header
  5. Create the Main Part of the Newsletter
  6. Add Social Links
  7. Include a Footer

Email Newsletter Templates and Ideas: The Final Product

Here’s an image of what the email newsletter design looks like, now that it’s complete:

design-email-newsletter-template-final-example

Newsletter Best Practices

Define a Clear Goal

As I mentioned before, the goal of your newsletter will depend on your business. Before you put together an email newsletter design, define what that goal is.

Are you trying to get subscribers to try a new product? That will affect the amount and kinds of imagery you use.

Would you like to increase traffic to your blog? Text summaries and bold, enticing headlines will play heavily into your design.

  • Get Insights Into What Your Readers Like

Once you have the goal of your email newsletter defined, you can focus on what kind of information goes front and center.

Website analytics tools like Google Analytics and user behavior reporting tools like Crazy Egg will show you what content your subscribers are clicking and spending time on. Use that information to put the right pieces of content into your email newsletter.

  • Analyze the Results and Iterate

You used your website analytics to get your newsletter started. Now let your newsletter return the favor.

Analyze click-through and open rates on your email newsletter not only to inform what your next one should contain, but also what kinds of content to place on site, and even in your social campaigns.

Other Interesting Email Newsletter Template Examples

What I’ve done above with The Pet Anthology newsletter is just one example to give you some email design inspiration. But it may not be the best newsletter design for your business.

Great-looking newsletter design inspiration can come from anywhere, so let’s take a look at a few more newsletter examples.

#1: Mommy Nearest

design-email-newsletter-template-mommy-nearest

Mommy Nearest stacks their stories one on on top of the other for easy scrolling on mobile. Considering more than half of web traffic came from mobile in 2018, it’s important to have mobile-friendly email newsletters.

Each story has a bold image and an enticing headline. Right below is a clear CTA, “READ MORE.”

#2: Starbucks

design-email-newsletter-template-starbucks

Starbucks starts with their simple, but very recognizable logo, and then creates colored blocks to feature each product and promotion.

#3: The Washington Post

design-email-newsletter-template-washington-post

The Washington Post’s Daily 202 email newsletter won a Webby in 2017. It has a clean design with plenty of whitespace that allows readers to peruse the day’s headlines easily. The stacked stories are easy to scroll through on mobile, too.

Conclusion

As with any marketing exercise, you should constantly be trying out new design elements, analyzing the results, and making tweaks based on user behavior (in this case, open rates, click through rates, and unsubscribes).

design-email-newsletter-template-conclusion

If you’re looking for more email design inspiration, check out this post we wrote about winning A/B tests and the elements that convert most highly.

And if you’re ready to get started, here’s the link again to our post on creating an email newsletter.

Happy coding!

44 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let's collaborate to tell your brand's story. Visit the blog for more helpful design and business resources.

44 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Anonymous says:
    December 18, 2016 at 9:28 pm

    There is no sugar coating this, it is just plain shite. This is a photoshop tutorial. Email newsletters are actually HTML, CSS, and text. This is a horribly mislead and appears intentional to dupe those who don’t know any better.

  2. rokk says:
    November 14, 2016 at 1:42 am

    Great..tutorial but you missed what I want to know. Most newsletters are interactive. How to do this?

  3. Asad Zaman says:
    October 24, 2016 at 4:14 pm

    Great, easy to follow tutorial, it would be good to have a follow-up tutorial for turning it into an HTML newsletter.

    Regards

  4. Sarah says:
    March 21, 2016 at 1:06 am

    A nice, creative and helpful tutorial! Can you provide HTML code of this template?

  5. Anonymous says:
    February 5, 2016 at 8:32 am

    Appreciating the commitment you put into your site and detailed information you offer.
    It’s great to come across a blog every once in a while that isn’t the same
    out of date rehashed material. Excellent read! I’ve saved your site and I’m adding your RSS feeds to
    my Google account.

  6. Evans Joey says:
    January 22, 2016 at 12:23 am

    I’m just learning Photoshop and this is VERY helpful. Thanks for the tutorial and a few templates to get me started…wish me luck!

  7. Anonymous says:
    January 7, 2016 at 11:24 pm

    Exploring the idea of designing email newsletter is very simply but very good to learning.
    Thanks.

  8. shivendra says:
    November 23, 2015 at 3:13 am

    Geate work. i want a quick mailer article and i got this, Thanks a lot.

  9. Rabab almasri says:
    November 22, 2015 at 6:52 pm

    It’s amazing.. i need this thing in my work ☺

  10. Bob Rugg says:
    October 14, 2015 at 12:53 pm

    I edit/manage a dinosaur PRINT newsletter. I want to take it into this century and realize after reading your article I am a kindergartener in the digital world.
    Enjoyed the help and look forward to learning more.

  11. Bobby says:
    September 10, 2015 at 10:14 am

    I’m so glad that I found this article! Last month I decided to try free trial version of GetResponse platform but I still need more practice to be a professional email marketer. Now I feel much more confident in it!

  12. Dinesh says:
    June 30, 2015 at 11:22 pm

    online news are way to people aware for everyday updates, daily news and etc.Thanks for making this useful contents

    • Kathryn Aragon says:
      July 1, 2015 at 9:39 am

      You bet, Dinesh. Hope it helps.

  13. Tikvah says:
    June 30, 2015 at 3:46 pm

    Hello, thank you for sharing.
    Do you have a similar template for InDesign? Why did you pick Photoshop for this project, any specific reason?
    Thanks,
    Tikvah

  14. Dinesh says:
    June 12, 2015 at 4:40 am

    A great follow up to this would be what’s allowed in an email.I think newsletter is a good addition to other social media channels.

    • Kathryn Aragon says:
      June 12, 2015 at 9:28 am

      Agreed. Thanks for the tip, Dinesh.

  15. Derek Parent says:
    April 23, 2015 at 3:01 pm

    I’m trying to setup a newsletter for my website. Can anybody help me via email? derek [at] theparentteam [dot] com Thanks in advance.

  16. Suleman says:
    March 25, 2015 at 1:06 am

    Nice tutorail, Very easy to follow step by step guide from start to end.

    • Kathryn Aragon says:
      March 25, 2015 at 10:01 am

      Glad you found it helpful, Suleman.

  17. Paul says:
    March 10, 2015 at 11:54 am

    I have a question: Why do you say at the beginning that you should make the e-mail 600 dpi width, and then the very next thing you do is create a file that’s 800 dpi? What happened to 600 dpi?

  18. budyk says:
    January 28, 2015 at 2:42 am

    nice example……thanks

    • Kathryn Aragon says:
      January 28, 2015 at 8:20 am

      You’re welcome, Budyk!

  19. Steve says:
    January 20, 2015 at 7:33 am

    Thanks! This was really helpful, especially for a beginner like me. Two questions:
    1. Is there a truly reliable open source alternative to PhotoShop that you would recommend, among the several software one can find browsing the web?
    2. I’ve been trying a drag&drop email builder, MailStyler (mailstyler.com) that allows to create great HTML templates without coding. It seems amazing to me, but before buying it – have you tried it? Would you recommend it?
    Thanks so much
    Steve

    • Kathryn Aragon says:
      January 20, 2015 at 9:46 am

      Hi Steve. Glad you found it helpful! Stephanie may have something more to add, but here are my thoughts. There are alternatives to PhotoShop, but I never find them satisfactory. You might try PhotoShop Online Free. As for MailStyler, I’ve never used it, so I can’t give a good recommendation. Hopefully another reader will add their two cents. Best of luck, and thanks for stopping by.

  20. ravi says:
    July 29, 2014 at 6:12 am

    It was really impressive.I would also recommend a worthy feature wherein you can send bulk emails with ‘schedule time’ option.
    indusemail.com

    • Neil Patel says:
      July 29, 2014 at 1:25 pm

      Ravi, glad you found it helpful 🙂

  21. Spark Email Design says:
    May 21, 2014 at 8:02 am

    Good tutorial, It really helps experienced as well as freshers or new email template designer. Apprize your effort for drafting this blog.

    • neil says:
      May 21, 2014 at 11:40 am

      Glad we could help. Thanks for the feedback 🙂

  22. Joe says:
    March 18, 2014 at 11:56 am

    Nice tips!

  23. Mahendra says:
    June 22, 2013 at 4:35 am

    Very nice step by step tutorial .. really help me designing my first newsletter… thanks a lot.. for such a great tutorial…

  24. Allyson Steffey says:
    February 12, 2013 at 5:08 am

    Good tutorial. I would love to see your steps or things for making a good email newsletter. But I have noticed that people don’t care about compatibility of email newsletter. One thing I want to say that browser compatibility is the most important things for any email newsletter template. Because as you know, nowadays, technology has developed, people are using email newsletter from different devices as well as different browsers. So if your email newsletter would be compatible for browsers, then you will get more conversions for your business.

  25. sachinbatwal says:
    October 11, 2012 at 6:42 am

    Thanks for your information. 🙂

    • Russ Henneberry says:
      October 11, 2012 at 8:59 am

      You are welcome — hope it helped you develop an awesome email newsletter template!

  26. Anastasia says:
    April 11, 2012 at 8:25 am

    /really need to read my own comments before sending them out. Sorry about all the mistakes.

  27. Anastasia says:
    April 10, 2012 at 7:06 am

    With all due respect, it’s quite difficult to take seriously a design advise from a website which uses h1 tag for subheads and #bbb for comment styling.

    • Russ Henneberry says:
      April 10, 2012 at 8:34 am

      @Anastasia — Touche! However, the subheadings on this blog are h2’s. I will darken up the comment styling. Thanks for pointing this out!

  28. herve says:
    April 9, 2012 at 8:26 am

    This tutorial if helpful from a graphic approach misses technical informations about how to properly code and style newsletter.
    I understand that this was not the topic of the article but it gives the illusion to novices (or even worse to clients!) that this is all you need to do to create a newsletter.
    To my mind the difficulty of doing a proper newsletter doesn’t really come from the graphic part but from the coding part which is very specific in the case of newsletter emails.

    • Russ Henneberry says:
      April 9, 2012 at 10:05 am

      @Herve, good point! I will update the post to reflect this reality. Thanks for the feedback!

    • Stephanie says:
      April 10, 2012 at 3:30 pm

      Hi Herve, My intention was for this to be a two part series. The coding aspect will be covered in the second edition.

      • Panel says:
        April 14, 2012 at 3:39 am

        I’m quite curious about the other part.

        It’s not easy code e-mail newsletter.
        Every mailer or online mailer shows emails differently.

      • Flo says:
        April 19, 2012 at 4:06 pm

        Really nice tutorial, but i’m also searching for the coding aspect…. when will you release the second edition? Looking forward to it 🙂

  29. Boost Inspiration says:
    April 9, 2012 at 7:49 am

    Very nice and to the point.

  30. Fiona says:
    April 7, 2012 at 4:14 am

    Great, easy to follow tutorial – it would be good to have a follow-up tutorial for turning it into an html newsletter.

    • Stephanie says:
      April 10, 2012 at 3:30 pm

      Thanks for reading Fiona! Stay tuned for the second half of this post!

Show Me My Heatmap

A3: @CrazyEgg was one of the best tools I have used to understand what and where users are engaging with a page. #seochat

Matthew Diehl

@matthewdiehl

What makes people leave your website?