Email Template Design Tutorial – How to Design an Ecommerce Email Template

In this tutorial, i’am going teach you how to design an amazing e-commerce email template from scratch in photoshop, it’s a simple, clean and pixel perfect email template, you can download the website version of this e-commerce email template from here for free.

Final Result

Final Result

Recourses :

Before we dive in, we need to download a couple of assets we will need for this tutorial.

– Fonts : i’am using Lato and open source fonts which you can find in google fonts for free and Avenir font.
– Products pictures : i’am using jackjones and pieces images for this tutorial(note we don’t own the images used in this tutorial and all the images are not included with the downloadable file).

Setting up The Document :

Firstly we need to prepare our work environment, we are going to change the font unit from points to pixels, Global Light and activate “snap to pixel” option. for that go to “Edit > Preferences > Units & Rulers..”.

Change Type unit from Points to Pixels.

Next go to “Layer > Layer Style > Global Light” .

Change the Angle to 90° and click OK.

Now let’s activate the “snap to pixels” option, this option will allow us to get pixel perfect shapes, press “U” key, if you are using photoshop cs5 click the “Geometry Options” arrow in the option bar(see the image below) and check “Snap To Pixels”.

If you are using photoshop cs6, go to “Edit > Preferences > General”, and check “Snap Vector Tools and Transforms to Pixel Grid”.

Tutorial :

Press Ctrl + “N” to create a new document, give it a name, set the width 850px to and the height 1797px.

Next we will add two vertical guides, which going to act as our work area, go to “View > New Guide”.

For the first guide set the position to 125px and the orientation to Vertical.

And for the second set the position to 725px and the orientation to Vertical.

Header :

I’ts time to create the header, first go to the layers panel and create a new group by clicking “Create a new group” icon.

Right click the group and select “Group Properties…” from the menu that appears.

Rename the group to “Header” and change the color to red.

With the “Header” group selected, activate the “Rectangle Tool” by pressing “U”, then draw a 850x95px rectangular shape.

Right click the shape layer we just created, and select “Blending Options…” from the menu.

Apply the following style settings to “Drop Shadow” and “Gradient Overlay” styles.

Drop Shadow :

Gradient Overlay :

Next add the logo to the header, and align it vertically and horizontally as shown in the image below.

Billboard :

Time to create the billboard section, create a new group named “Billboard” and change it’s color to orange.

Select the “Rectangle Tool” from the toolbar or by pressing “U”, draw a 850x320px rectangle and place right below the header.

Place an image in the document, right click the image layer and choose “Create Clipping Mask” from the menu or press Ctrl + Alt + G.

Now let’s add a title and a short description to the billboard, press “T” key to select the “Horizontal Type Tool”, write a title e.g. “NEW SEASON ARRIVALS.”(all caps), align it with the left guide we added previously and place it 60px from the top, apply the following settings to the characters.

– Font : Avenir LT 65 Medium
– Size : 33px
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : left
– Color : #ffffff

Write a short description, place it 20px below the title and apply the settings shown below to the characters.

– Font : Avenir LT 35 Light
– Size : 14px
– Font Weight : Regular
– Anti-aliasing : Sharp
– Align : left
– Color : #ffffff

Now we are going to create the “Shop Now” button, Create a new group named “Shop Now btn” inside the “Billboard” group.

Activate the “Rectangle Tool”(U), draw a 172x50px rectangle, place it 40px below the short description we added in the step before.

Double click the rectangular shape layer and apply the settings shown in the image below to the “Gradient Overlay” style.

Activate the “Horizontal Type Tool” by pressing “T”, type “Shop Now” (all caps) and apply the following settings to the characters.

– Font : Lato
– Size : 18px
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : Center
– Color : #ffffff

Right click the “Shop Now” text layer, choose “Blending Options…”, select “Drop Shadow” style and apply the settings shown in the image below.

Newest Products Section :

Now let’s move to the “Newest Products” section, create a new group named “Newest Products” and change it’s color to yellow.

Select the “Horizontal Type Tool”(T) write a title for the section e.g. “Newest Products”(all caps) with the following settings.

– Font : Lato
– Size : 20px
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : Center
– Color : #656363

Activate the “Rectangle Tool” by pressing “U”, set the fill color to #f5f5f5, draw a 175x1px rectangle and align it to the left as shown in the image below.

Duplicate the rectangle shape and align it to the right with the right guide we added previously.

Create a new group named “P1” inside the “Newest products” group.

With the “P1” group selected, press “U” to activate the “Rectangle Tool”, set the color to white(#ffffff), draw a 280x268px rectangle and place it 40px below the section title.

Double click the rectangle shape layer in the layers panel, select “Stroke” style and apply the setting as shown the image below(stroke color #f7f6f6).

Place a product image inside the rectangle and move it 30px from the top of the rectangle.

Press “T” to activate the “Horizontal Type Tool”, add the title and the price, then apply the following character settings.

Title :
– Font : Open Sans
– Size : 16px
– Font Weight : Regular
– Anti-aliasing : Sharp
– align : Center
– color : #717171

Price:
– Font : Open Sans
– Size : 18px
– Font Weight : Bold
– Anti-aliasing : Sharp
– align : Center
– color : 717171

Select the point and the last two numbers of the price text, then Go to “Window > Character” and click the “Superscript” icon as shown in the image below.

Duplicate the “P1” group, rename it to “P2”, then align it to the right.

Change the product image, title and the price, then create a new group inside the “P2” group and name it “Promo Tag”.

Select the “Promo Tag” group in the layers panel, activate the “Rectangle Tool”(U), set the fill color to #f54d56, draw a 80x38px rectangle and place it 30px from the top, as the image below.

Double click the rectangle shape layer, Select “Inner Shadow” style, then apply the following settings(color #de3841).

Activate the “Horizontal Type Tool” by pressing “T”, write the promo line e.g. “-50%” and apply the following setting to the characters.

– Font : Open Sans
– Size : 16px
– Font Weight : SemiBold
– Anti-aliasing : Sharp
– align : Center
– color : #ffffff

Duplicate the “P1” and “P2” groups, rename the duplicated groups to “P3” and “P4”, place them 40px below the first two products, then change the titles, prices and product images as shown in the screen below.

Brands :

In this step we are going to add the brands logo, create a new group name it “Brands” and change it color to Green.

Place three fashion brands logos in the document(i’am using dummy logos to represent the brands), then place logos 60px bellow the newest products section as shown in the image below.

Footer :

Let’s move to the last section which is the “Footer”, create a new group, name it “Footer” and change it’s color to blue.

Press “U” to select the “Rectangle Tool”, draw a 850x273px rectangle and place it 60px below “Brands” section.

Right click the rectangular shape layer, then choose “Blending Options …” from the meni, apply the following settings for “Drop Shadow” and “Gradient Overlay” styles.

Drop Shadow :

Gradient Overlay :

Press “T” to activate the “Horizontal Type Tool”, write the first line e.g. “Need Help? Call Us!”, then place it 40px from the top of the shape we created previously, and 30px below the first line write a phone number e.g. “757-569-6100” apply following character settings.

First Line :
– Font : Lato
– Size : 25px
– Font Weight : Regular
– Anti-aliasing : Sharp
– align : Center
– color : #717171

Phone number :
– Font : Lato
– Size : 36px
– Font Weight : Black
– Anti-aliasing : Sharp
– align : Center
– color : #f54d56

Press “U” then select the “line Tool” from the option bar, set the fill color to #e8e8e8, the weight to 1px, draw 600px width horizontal line and place it 40px below the phone number.

Double click the line shape layer, select “Drop Shadow” Style, then apply the following settings.

Activate the “Horizontal Type Tool”, write the copyrights line e.g. “© 2014 lashoopa.com , All Rights Reserved”, place it 40px below line we added in the step before and apply the following setting to characters.

With the same character settings add the unsubscribe line to the footer e.g.”unsubscribe from mailing list”, place 20px below the copyrights line, then select the line tool draw a small line and place it below “Unsubscribe” work, to indicate that a link.

And that’s it, i hope you enjoyed this tutorials, we still have a lot of awesome tutorials coming soon, subscribe to our newsletter in the box bellow to be the first to get notified when we publish a new awesome tutorial, and if you have any questions, please don’t hesitate to ask us in the comment section below, we will do our best to answer all your questions.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.