How to Design a Newsletter Template Tutorial 1

We will show you how to design a fresh and colorful newsletter using Adobe Photoshop CC. This template can be used for any of your email marketing needs.

We’ll be covering an array of techniques including shapes, masks, typography and more that can be easily adapted and applied to your own designs.

In this tutorial, we will be creating this fresh newsletter template:

1. Setting up your document

Let’s begin with creating a new Photoshop document by selecting File-> New.

We set the Width to 980 px, Height to 1740 px, Resolution to 72, and the Background Contents to White and the document will be called “Email_Template_Tutorial_Part1”.

2. Creating Guides

Before starting work on the template, it’s a good idea to set up some Guides.

Guides are non-printable horizontal and vertical lines that you can position anywhere you like within a document window. They will help you to align objects precisely and keep everything nice and clean.

To place guides, first of all you need to make sure that you have Rulers visible on your page.

If not, choose View→Rulers to display them.

Now click in the horizontal ruler and drag down to create a new horizontal guide. Release the mouse button when the guide is in the location you want. Same thing with the vertical rulers.

These guides will act as the containers of our page.

Another way to create a more precise guide is to choose View->New Guide and you can input whatever position you want.

We will use it to outline where our template will be located.

For the first guide, set the Orientation to Horizontal and position to 80px.

Then another 80px padding for bottom, so set the position to Horizontal 1654 px. This is where our template will end.

Now it’s time for the vertical sides, which will have a padding of 165px. So create a guide with Vertical orientation and set it to 165 px. After that create another at 815px.

We should now have an outlined space that is 650px in width for our page and your document should look like this:

3. Creating the Background and Navigation

Now we’re ready to start creating the background and other elements of the email template.

Select the Rectangle Tool and set the color to #F1F1F1. Now create a big shape that takes all of your document space. This will be our main background.

To keep things clean, we will be naming our layers. So you can rename this one as “Main Background” by clicking twice on the layer itself.

We will also be grouping each section that we create. You can do that by selecting the layers and holding the Ctrl+G keys. We will name that group “Backgrounds”.

We want the Navigation to be 40px in height, so we have to measure those pixels from the beginning of the first inner vertical guide.

We can do that with help of the Rectangle Marquee Tool. Just start drawing a shape with the tool and make sure to press Shift while you’re doing it, so that it becomes a perfect square. While that shape is marked, you can drag a guide there.

Now with the Rectangle Tool draw a shape that covers the section we just outlined and fill it with white. Rename that layer to “Nav bg”

Before we start adding the text, we will need some padding. So with the Rectangle Marquee Tool and Guides method, put 20px padding on each side of the page.

Now add the text “View Online” with the Horizontal Type Tool.

Font: Arial
Size: 13pt
Color: #888888

Instead of creating a new text layer, you can duplicate the one you just made by right clicking on the layer and choosing Duplicate Layer.

You can also do this by holding down the Shift and Alt keys at the same time, clicking on the text itself and dragging it away from the original. By holding down Shift, your text will stay in a perfect line and you can position it to the right side of the page. Rename that text to “Forward to a Friend”.

To make sure your text is center aligned, select the text layer, use the Rectangle Marquee Tool to mark the navigation field, click on the Move Tool and then choose Align Vertical Centers. Do the same for the other text. Group them and name the folder “Navigation”.

4. Creating the Header

Now it’s time to make the Header. Put a horizontal guide at 90px below the Navigation ones. Draw a rectangle over the new section, double click on its layer and change the Color Picker to #009a7c.
Click on the left guide and add the text “MAILBAKERY”

Font: Bryant Bold Condensed
Size: 24pt
Color: #FFFFFF

And next to it write “Fresh” and move it 5px to the right with your keyboard arrows.

Font: Bryant Regular Condensed
Size: 24pt
Color: #fbc841

Under it, write “Freemium Email Template” and move that about 10px down. You can do this by holding the Shift and pressing the down arrow once. It will move exactly 10 px.

Font: Arial
Size: 16pt
Color: #f1f1f1

Group all the text into the folder “Left text”, mark the green rectangle and click on Align vertical centers again.

On the right – “Newsletter February 2015” – 14pt, “Issue #101” – 16pt with color #f1f1f1.

Group that text and name it “Right text”. After that group both the folders, along with the green rectangle and name it “Header”.

5. Creating the Featured Content

Create a horizontal guide at 270px from the header. Make a rectangle and change its color to #ebebeb. This will be our Image Placeholder. Now open the first image and drag it over the rectangle.

You can either Create a Clipping Mask by holding down the Alt key and clicking between the placeholder and image.

Or Ctrl+ click on the placeholder, chose the image layer and click on the layer Add Layer Mask button.

Now you can resize the image by selecting the layer and pressing Ctrl+ T or Edit->Free Transform. While you’re resizing it, make sure to hold Shift and Alt, so your pic can keep resizing in the middle of the page and keep its proportions.

Group these layers in a “Featured Image” folder. For the text, leave about 50 px distance below the image.

We want the Featured Content section to be about 300px in height, so create a white rectangle that is 650x300px and name it “Featured Bg”.

“Freemium Mail Bakery Email Template” – Arial Bold, 30pt, #009a7c and Arial, 30pt, #525252.

To align the text in the center, Left click on the Featured Bg, select the text and choose Align Horizontal Centers.

For the text, all you have to do is make a Text field with the Type Tool and choose Type-> Paste Lorem Ipsum.

Change the size to 14pt, line spacing to 23pt and color #6b6b6b.

Now mark the entire text field with Ctrl+A and choose Center Text.

The text should be about 30px below the title. So holding Shift, hit the down arrow key 3 times. You can put an extra 20 px padding on the left and right side and align the text.

For the call the action button “Read More”, select the Rounded Rectangle Tool with a 5 px Radius, change the color to #f0b517 and click anywhere on the page.

A new window will appear where you can input the width and height of your rectangle – 130 x 40 px. Sometimes it’s easier than drawing it yourself.

Position it 30px below the Lorem Ipsum text and center align it. Now write “READ MORE” in it with the Type Tool. Make sure to press the Shift key when you click on it, otherwise your text will appear around the shape, not inside it. The font and size are the same, just make it white.

Ctrl-click on the shape and center and choose Align vertical and horizontal centers.

Now group all these elements, along with the image into a “Featured Content” folder.

6. Creating the Left and Right Section.

These sections will also be 300px in height so, you can just duplicate the Featured Content bg twice. Make sure to leave 20 px distance between each one.

Create horizontal guides that are 30 px on the upper and bottom corners of the left shape.

Now create a rectangle that is 300x240px and change its color to #f1f1f1. This will be our Image Placeholder. Paste the image over the placeholder and create a clipping mask.

Double click on the rectangle layer to open its Blending Options. Check the Stroke option and change the size to 10px, the color to #f1f1f1 and the Position – Inside.

Leave about 20px distance between the placeholder and the text field.

“Full Responsive” – Arial Bold, 20pt, #484848

Create a new text field around the guides and paste in some Lorem Ipsum. Mark your text and Left Align it.

You can duplicate the Read More button from the Featured Content section, just change the bg color to #009a7c. An easier way to duplicate a folder is to hold Ctrl+J. Now align it with the placeholder guide.

Do the exact same for the right section. Just left align the text and right align the image. Now your template should look like this:

7. Creating the Footer

Another 20 px distance after the sections, create a new rectangle that is 650x240px and color it with #009a7c.

Now all that’s left is to write in the footer text. You can duplicate the MailBakery logo we made for the header and just change the text to “MAILBAKERY Name”.

As for the rest of the text – Arial, 12 pt, line spacing 20 pt, #f1f1f1.

Center it and you’re done!

That concludes part 1 of our tutorial. Now you have a very clean and fresh email newsletter you can use for any of your email marketing needs. In the next part, we will show you how to add some additional content to make your template more unique and eye catching.