Create an Email Newsletter Template Part 1

In this tutorial I will show you how to create a simple email newsletter template in Photoshop. The kind of email newsletter you want depends on what your service is but this will give you an idea on how to create one and go from there. In a few weeks I will show you how to turn this template into html.

When coming up with a design you need to focus on the point of the newsletter; to inform, sell, welcome a member, and many other things so take that into consideration before making your newsletter.

If you are trying to sell something have that as your main focus and if the newsletter is just informative then it doesn’t matter as much.

I am going to show you a more informative newsletter design which will display information welcoming the member, showing some news, and then displaying some other information.

Start off with a 600X750px document in Photoshop with a white background.

I like to make my email newsletters the max of 600px to 650px so it looks nice when you get it in your email client in my opinion. Anything too big can just look too junky or not as clean.

First I will create the body of the newsletter using my rectangle marqee tool. I am not going to fill up the entire body of the document we made. I will use black for the rectangle just so you can see it.

Now add blending options to turn it white and add a 1px gray border…

Stroke

Here it is with the stroke:

When creating your design you need to take into consideration how it will work as an email newsletter. You want it simple yet eye catching for the user. I work with email a lot and have worked on newsletter designs for many clients and you need to make sure that it is compliant with all major email clients and some niche ones. For instance a lot of clients use outlook 07 which cannot render background images so you want to try to have everything working without using any background images.

Now this is boring so far but to make this pop a little I want the newsletter to look like the corner is coming off of the background.

To do this create a rectangle behind the current one in a new layer and make it black.

You can just use your rectangle marquee tool again or you can use the ctrl+clicking technique on the preview icon beside the rectangle we already made, this will create a selection around it.

You won’t see the black rectangle since its behind your other one and exactly the same size but that is ok. Now I will add some gaussian blur to it by going to filter>>blur>>gaussian blur

I don’t want tons of blur so I will go for 5.0 pixels

Here is what it looks like thus far

With your blurred layer selected use the keyboard shortcut ctrl+t to transform it. Then right click on your canvas and choose perspective.

With perspective chosen you will see blocks you can grab with your mouse on all corners and on in the middle of the sides. Pull the top right one to the right to expand it.

Then grab the bottom right block and pull to the left to shrink the shadow a bit.

Now this step was for the top shadow, the bottom will be edited in a bit. Now
the top looks like this

There is some left over shadow on the bottom but you can erase that as it won’t be needed. Copy and paste the top part of the shadow back in the document to use for the bottom shadow.

I rotated it 180 degrees and moved it to the bottom.

I want to modify this one a bit more because at the bottom I will have information in the newsletter and with that shadow out too far it will make it a little more difficult to convert over to html so I want to take some more of it away.

So I will use ctrl+t to transform instead this time I am going to use the warp tool.

After picking the warp tool you should have sort of a grid

Click on the bottom middle and pull up

Now take the opacity down on both layers to about 30%.

Here is what I have now as my newsletter:

Finally done with that so moving on to the next step: adding a logo.

Since I don’t really have a logo or a company to use for an example I will make a logo real quick just for a placeholder. So I created my logo, take your logo and place it at the top left in a new layer.

In this layout I will place all the text I want to use in the newsletter even though when I convert it to html I will be using real text on some of the parts.

So in the top right corner I will place text for the date and “visit our site”. I am just going to use arial text like I would in the html version.

Next create a new layer and with your line tool create a horizontal line across
underneath the logo and text…

Create another new layer after that and under the horizontal line create a black rectangle that fits across the newsletter

Now I am going to add a light gradient to the black rectangle so right click on the layer and in your blending options add this gradient:

This is a very faint gray color.

Now you remember the horizontal you made a second ago? Well in your layer’s palette right click on it and hit “duplicate layer”. Drag it down in your canvas below the rectangle you just made.

Next I just added a stock image to bring some life to the newsletter added some text and a button.

The last step I feel is really basic so I figured you didn’t need a deep explanation for it.

One thing I use a lot in Photoshp that comes in handy is grouping your different layers together so you don’t have hundreds of layers that you have to pick through all the time.

For my fake logo layer and text for example I grouped them in a layer I called fake logo. Call yours whatever you want.

Highlight your layers in your layer palette by clicking on the top one, holding down shift and then clicking on your last one. Once you do that click on the little arrow on the top right of your layer palette and choose, “New Group from Layers”…

Once the window pops up name it whatever you want. Now you can move those objects within the group around freely and they will stay together.

Now moving on to the body of the newsletter. There is a lot of information you can include in your newsletter, but since I don’t really have any I will use fake text and icons.

First I will place this icon in the newsletter

You can download cool icons anywhere or create your own. It is a good idea to have some nice looking icons and images in your mailings to bring attention to certain things or just to give it a nice clean look.

There are lots of sites with nice free icons, check out this site to find some cool free ones:

http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/

Next I will place some fake text like I did in the header, using arial.

I think its a good idea to tell your subscribers what you want initially but once you start giving them other information it is nice to entice them to go to your site again that is why I have the “Find Out More” link in there. This just depends on what you do or trying to do by having subscribers. You may have advertisers on your site and it would be nice to get users to go from your newsletter to your site and maybe give your site some traffic.

So for the rest of the information I am going to make it pretty generic just so you can get a feel for what you can add to this.

At the bottom I added twitter, facebook, and rss feed icons because social networking is very important to your marketing this day in age.

This is a very simple design but I hope it gives you some ideas on how you can create an email newsletter simply and easy in Photoshop.

Here is my final version:

In the next few weeks I will show you how to chop this up and make it into an HTML document that can actually be sent in email.

Thanks again for reading!

Here is a link to the .psd file!

Topics: Adobe, Design, email newsletter template, email template, Photoshop, Web Development