How To Design an Email Newsletter Template in 7 Simple Steps

Email newsletters are more important than ever.

If you want to reach potential and existing customers, they’re a great way to spread the word about upcoming projects, company news, and other business-related information to a large audience.

In this tutorial I’ll walk you through how to create your own email newsletter template in Photoshop, taking into consideration common design patterns that prove to be effective.

After you have completed this design process, you will be ready to code and style this template.  Here’s a link to the post on coding an email newsletter.

The Final Product

Here’s an image of what the Email Newsletter we are going to be designing looks like.

pet marketing newsletter

1. Getting Started

As general practice, it’s best to design your newsletter with a fixed width instead of a fluid/liquid layout. This will prevent horizontal scroll bars as the result of not using the full width of the screen. Design your newsletter with a width of around 550-600px and make sure the important information is within the top 300-500px of height as this is the size of an average preview pane.

2. Setting up the Document in Photoshop

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

pet anthology newsletter

For the background I filled it with a light gray. I created a container 600px wide to house the main content. I chose to fill it with white and positioned it in the center of the document.

color picker

3. Allow the user to view the email in the browser of their choice


I added this command to the top of the newsletter in Myriad Pro 10pt. It’s important to give the viewer options in viewing your email as some of them might not download images from an email by default. To improve accessibility always include the option of viewing the email newsletter in their web browser.


4. Create the Email Newsletter Header

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

the pet anthology

The above image is the header of the blog. I’m going to retain the look and feel while making only slight modifications. I start by selecting and dragging the mascot over into the newsletter template. From there I grab the name and slogan and drag them onto the new document as well. With some minor revisions to the text, the newsletter looks like this:

the pet digest

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


 5. Create the main part of the newsletter

Start by creating another rectangle 600px wide under the header and extend it close to the bottom of the page.

e news letter

I then gather the content that will be featured on the coming weeks newsletter. Again, using the design attributes already laid out on The Pet Anthology, I create the heading using Museo Sans, drag and drop in the main image as well as copy and paste the article text. A dotted border placed underneath will separate each article field.

blog content

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.

newsletter petanthology

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

pet email newsletter

6. Add Social Links

I want to include an area for social network and RSS icons, as well as the ability to let the subscriber share the newsletter with friends. I start by creating a rectangle 252px and include text to instruct the subscriber to follow us. I use these Social Network icons, changing the colors around to reflect my branding. Keeping in mind usability of e-newsletters I decide to keep things simple.

follow pet anthology

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

7. Include a Footer

To wrap things up, I create the footer which will allow you to get in contact with me and a link allowing you to unsubscribe from the newsletter. Every newsletter needs to have a link or a button to allow the reader to freely unsubscribe from the newsletter should they choose to.




That’s it! Hopefully this tutorial gave you a good idea of how to create a functional email newsletter. Let me know if you have any comments or questions about the design process!

Once again, here’s a link to the post on coding an email newsletter.


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.


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

  2. Boost Inspiration says:

    Very nice and to the point.

  3. 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:

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

    • Stephanie says:

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

      • I’m quite curious about the other part.

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

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

  4. Anastasia says:

    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:

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

  5. Anastasia says:

    Not for the sake of argument at all, just wondering now – why does my firebug says it is h1 – Anyway, your headline and subheads are the same size 36px. I find it extremely difficult to read. Probably because my brain was brought up on magazine articles where correlations between main title, subhead and body text sizes usually have a bulletproof readability…

  6. Anastasia says:

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

  7. Thanks for your information. :)

  8. Plz I rili don’t knw how 2 create links with photoshop for an email newsletter…want 2 design one soon..need some clarity..thanks

  9. 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.

  10. Dear mam, its ok, i’m clear but how i can use it any email client or software can you please write about it?

  11. Mahendra says:

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

  12. Nice tips!

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

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

  15. 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 ( 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

    • 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.

  16. nice example……thanks

  17. 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. Nice tutorail, Very easy to follow step by step guide from start to end.

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

  20. 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.

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

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

  23. 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!

  24. 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.

  25. Rabab almasri says:

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

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

  27. Anonymous says:

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

  28. Evans Joey says:

    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!

  29. Anonymous says:

    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.

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