Create an e-Commerce Newsletter Template in HTML-CSS

In todays tutorial I will be showing you how to convert a PSD into a website using HTML and CSS. You will need some basic Photoshop skills and be able to write in HTML and CSS to follow along. I will be converting the e-Commerce Newsletter – PSD template that was recently shown on iBrandStudio.

The Basics

1) The first thing we need to do is set up a folder called ‘newsletter’ and inside that create two folders called ‘CSS’ and ‘img’.
2) Inside the ‘newsletter’ folder create a basic html document called ‘index.html’ and then inside of the ‘CSS’ folder create a ‘style.css’ document.

Creating the index

3) Open your ‘index.html’ and insert this code

<!DOCTYPE HTML>
<html>
<head>
	<title>Newsletter</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<link href="CSS/style.css" type="text/css" rel="stylesheet">
</head>
<body>

</body>
</html>

This is basic HTML5 setup which I am sure you will al be familiar with.

Slicing the PSD

4) Open the ‘newsletter’ PSD and make sure only the blue folder is visible as that is what we shall be working from. Most of the newsletter can be created using html and css but there are few things we need to save to make it easier for us.

5) I am going to show you how to slice a PSD to gett he first element, but after that it is up to you to get the rest. The first element we need is the header background.

6) Open the header folder and disable all of the layers except ‘Shape 3’ by clicking the eye on the left. Right click on ‘Shape 3’ and click rasterize.

7) Select the layer ‘Shape 3’ and whilst holding ctrl click on ‘Shape 3 copy’ which is in the root folder. Right click on one and click ‘flatten image’.

8) Click OK to ‘discard hidden layers’.
9) Use the rectangle marquee tool to select the top of the newsletter as seen in the photo. Click Ctrl and C to copy the celection.

10) Click Ctrl and N to open a new document, do not change the dimensions as they are automatically set to the width and height of your previous selection, in this case the header. Now click Ctrl and V to paste the element.

11) Your new element should look the same as below, if not try and redo it until it does.

12) Now click ‘File’ and ‘Save for web and devices’

13) In the settings, choose .jpeg and make it 75% quality (to help load times) and amke sure you do not change the width or height.

14) Save it in your ‘img’ folder inside your ‘newsletter’ folder and called it ‘header.jpg’.

15) Now it is up to you to save the rest of the elements. To finish this tutorial we need:

The TV (make the background transparent, save as .png-24)
The Background to ‘Latest Products’
The little triangle on ‘Find out more’
2 of the product images, one with the 10% off and one without
1 of the price labels
1 circle from near the twitter and facebook links

Note: Make sure you use Ctrl Alt and Z to go back to undo any changes you have made to the PSD before continuing to select elements.

Writing the HTML

When creating HTML templates I always start from the top left and work to the bottom right, then I add the styling. So with that in mind lets get started.

Container

16) The first thing to do is create a div with an id of ‘container’ which will hold all of our elements, text and pictures. Inside that we are going to insert the header background, and all of the text inside that.

<div id="container">
		<div id="textheader">
			<p>Having trouble reading this newsletter? <a href="#">Click here</a> to see it in your browser</p>
		</div>
		
		<div id="headerBG">
			<img src="img/header.jpg">
		</div>
		
		<div id="headertext">
			<h1>Your Company Name</h1>
			<h2>your slogan is here</h2>
			<p id="day">01</p>
			<p id="month">Aug 2010</p>
		</div>
	</div>

17) The next step is to write the code for the middle grey area. Including the TV and the link at the bottom.

		<div id="topgrey">	
		<div>	
		<div id="bottomgrey">	
		<div>
			
		<div id="lefttext">
			<h3>The Best Product of the Year</h3>
			<p id="leftpara">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
				Phasellus eu magna mauris. 
				Nunc viverra gravida sapien, convallis ornare risus placerat eu. 
				In hac habitasse platea dictumst. 
				Sed non sapien tellus, volutpat aliquet magna. 
				Cras nec justo non nisl imperdiet pulvinar.
			</p>
			<a href="#">Find out more<img src="img/arrow.jpg"></a>
		</div>
			<img id="img1" src="img/tv.png" alt="TV">

You may be wondering why I have created two divs called ‘topgrey’ and ‘bottomgrey’, this is to create the background colour without having to slice it from the PSD. As you can see the newsletter is starting to take shape.

18) Now we need to insert the ‘latest products’ background.

<div id="middleBG">
	<img src="img/middleBG.jpg">
		<div id="middletext">
			<h3>Latest Products</h3>
			<a href="#">Vist Our Site</a>
		</div>
</div>

19) It is now time to create the 3 Products in the newsletter. I will show you how to create the first one, and then you can use that to create the last two.

		<div id="products">
			<div id="product1">
				<img src="img/image1.jpg">
				<div id="toptext">
					<h5>Your product name</h5>
					<h6>Monday 2nd August 2010</h6>
				</div>
				
				<div id="price">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
					Phasellus eu magna mauris. 
					Nunc viverra gravida sapien, convallis ornare risus placerat eu. 
					In hac habitasse platea dictumst. 
					Sed non sapien tellus, volutpat aliquet magna. 
					Cras nec justo non nisl imperdiet pulvinar.</p>
					<img src="img/price.jpg">
				</div>	
			</div>
		</div>

20) The final stage of HTML is to write the footer.

		<div id="footer">
			<img id="firstimg" src="img/bullet.jpg">
			<p>Join us on<a href="#">Facebook</a></p>
			<img src="img/bullet.jpg">
			<p>Follow us on<a href="#">Twitter</a></p>
			<img src="img/bullet.jpg">
		</div>
		<div id="bottomfooter">
			<p><a href="#">Click Here</a>to unsubscribe to this newsletter</p>
			<p>Copyright 2010</p>
		</div>

That is all of the HTML written, we can now move on to styling the newsletter

Styling

I am going to use a reset style, but this is completely your choice, I believe it helps to make everything a default style and lets me work on it without wondering why something is not moving where it should. To use a reset style add it before your regular stylesheet in your html, they are easily found online.

Open your ‘style.css’ and make sure it is correctly linked to your HTML file.

21) When starting to style a HTML document I like to center the desina nd set the correct width etc.

#container{
	width:691px;
	margin-right:auto;
	margin-left:auto;
}

I feel that this helps to correct the flow or the document and looks better straight away.

22) I am going to style each section idependently, starting with the header, so you can see how it works

#textheader{
	position:relative;
	width:631px;
	right:1px;
	padding-top:0;
	padding-bottom:0;
	margin-right:auto;
	margin-left:auto;	
	z-index:1;
}

#textheader p{
	float:right;
	font-family:arial, "sans serif";
	font-size:10px;
	padding-top:5px;
}

#headerBG{
	position:relative;
	bottom:15px;
	z-index:0;
}

This code moves the background image up and below the text at the top, it also styles the font and size of the text.

23) Now to move all of the text up onto the banner.

h1{
	position:relative;
	width:400px;
	font-family:arial;
	font-size:30px;
	padding-left:30px;
	bottom:120px;
}

h2{
	position:relative;
	width:400px;
	font-family:arial;
	font-size:15px;
	padding-left:30px;
	bottom:110px;
}

#day{
	position:relative;
	width:400px;
	font-family:arial;
	font-size:60px;
	font-weight:bold;
	left:550px;
	bottom:170px;
}

#month{
	position:relative;
	width:400px;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	left:550px;
	bottom:170px;
}

24)I am going to create the grey background in two parts using the two top and bottom divs I created in the HTML. Remember to use the eyedropper tool in Photoshop to help select the right colours.

#topgrey{
	position:relative;
	width:631px;
	height:156px;
	right:1px;
	background:#a6a6a6;
	bottom:-10px;
	padding:10px;
	margin-right:auto;
	margin-left:auto;
}

#bottomgrey{
	position:relative;
	width:631px;
	height:130px;
	right:10px;
	background: #aeaeae;
	bottom:160px;
	padding:10px;
	margin-right:auto;
	margin-left:auto;
}

As you can see the background is starting to take shape. I used the colours #a6a6a6 and #aeaeae for the two divs, and used the ruler tool in photoshop to measure how big each box should be.

25) Now I need to arrange everything in front on the grey background

#lefttext{
	width:260px;	
	padding-top:30px;
	padding-left:10px;
}

h3{
	font-family:arial;
	font-size:26px;
}

#leftpara{
	font-family:arial;
	font-size:14px;
	padding-top:10px;
	padding-right:10px;	
}

#img1{
	position:relative;
	float:right;
	bottom:180px;
}

#lefttext a{
	position:relative;
	top:20px;
	padding:10px;
	background:#266eff;
	text-decoration:none;
	font-family:arial;
}
	
#lefttext a img{
	position:relative;
	padding-left:10px;
	top:3px;
}

All of that code is used to push the text and the TV into the correct position

26) Now to move the middle blue background into place

#middleBG{
	position:relative;
	bottom:168px;
	right:29px;
}

#middletext h3{
	position:relative;
	bottom:45px;
	left:30px;
}

#middletext a{
	position:relative;
	bottom:65px;
	left:570px;
	font-family:arial;
}

Now that the top half is nearly done, I am going to add a few improvements and make the text white.

h1, h2, #lefttext, #lefttext h3, #middletext a, 
#leftpara, #lefttext a, #day, #month, #middletext h3{
	color:white;
	text-shadow: 1px 1px 3px #888; 
}

The top half is now looking finished, time to move onto the rest.

Continue the styling

We are now going to style the lower half of the newsletter. Once again I will show you how to do one of the products and leave you to d the rest.

27) Start by moving the background into position:

#products{
	background:#f3f3f3;
	position:relative;
	bottom:212px;
	width:652px;
	height:650px;
	right:11px;
	margin-right:auto;
	margin-left:auto;
}

28) This is the code to move all of the first products text and images into the right place.

#toptext{
	position:relative;
	bottom:190px;
	left:200px;
}

#price{
	position:relative;
	bottom:170px;
	left:200px;
	width:350px;
}

#price img{
	position:relative;
	bottom:90px;
	left:350px;	
}

This is the nearly finished newsletter

Finally we need to move the footer up and align the text inside witht the circular bullets.

#footer{
	height:30px;
}

#footer, #products{
	-moz-box-shadow: 0px 1px 4px grey;
	-webkit-box-shadow: 0px 1px 4px grey;
        box-shadow: 0px 1px 4px grey;
}

#footer, #bottomfooter{
	position:relative;
	bottom:212px;
	font-family:arial;
	width:632px;
	right:11px;
	margin-right:auto;
	margin-left:auto;
	padding:10px;
}

#footer p, #footer img{
	float:left;
	padding:10px;
}

#bottomfooter p{
	float:left;
	padding-left:70px;
}

#firstimg{
	margin-left:100px;
}

This is the final lot of CSS code that finishes our newsletter design. Below is an image of the final product.

Conclusion

In summary, we have learnt how to slice a PSD and take key components from it to be able to create a working website using HTML and CSS. There are a few more tweaks that can be done to this design in order to make it look even more proffesional, but overall we have made a very good newsletter. Thanks for reading.

About The Author

Hi, I’m Richard from DesignMango.com and I am a web designer who likes to help other people create cool websites. You can find me on twitter, Youtube and Vimeo.

7 Comments

Chris Dizon says 15 years ago
This isn’t going to work in gmail or lotus notes, both of which strip out the <link&rt; and <style&rt; tags. You’ll have to make all those styles inline for them to show up.
Speaking of which, why does your commenting system strip out the ????
Chris Dizon says 15 years ago
should be >
Gutem says 15 years ago
First time I saw a Newsletter with div tags and external CSS. I always read about use table in the code and inline CSS.
DesignMango says 15 years ago
Hi guys. It should be fairly easy to convert this into a fully working newsletter by adding the style sheet into the HTML. I wanted to do it separate to show that this is not all it could be used for, after all this would not look too bad a website.
Sina says 15 years ago
I make email templates like this on a daily basis and I will tell you now that div tags will cause a lot of headaches. You will have to use tables and embedded tables.
Dan001 says 12 years ago
Hello,
I can not format the newsletter, especially this part is missing “div”?
The Best Product of the Year
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus eu magna mauris.
Nunc viverra gravida sapien, convallis ornare risus placerat eu.
In hac habitasse platea dictumst.
Sed non sapien tellus, volutpat aliquet magna.
Cras nec justo non nisl imperdiet pulvinar.
Find out more

Dan001 says 12 years ago

Hello,

I can not format the newsletter, especially this part is missing “div”?

Comments are closed.