Important Notice:

On July 31st, 2017 the Digital-Tutors library will be retired along with Digital-Tutors concurrent licensing. Effective August 1, 2017 any active group plans will be redirected to www.pluralsight.com. Each group plan will receive one individual user license on Pluralsight for each active Digital-Tutors license. Please contact your account representative for any additional questions.
Creating an Email Newsletter in Photoshop and Dreamweaver
See Details
Released Sep 9, 2014
Andy Mitchell

Guest Tutor

Andy Mitchell
In this tutorial we'll learn how to design and develop an email newsletter. Throughout these lessons, we'll create an email newsletter for a fictional company.

We’ll start with a wireframe design and convert it to a true concept using Photoshop. Then we'll slice and export our design images and code out the email in Dreamweaver with standard code techniques that are commonly used to build out HTML emails.
Introduction and project overview
1

Introduction and project overview

 
00:48
Reviewing pre-production
2

Reviewing pre-production

 
06:16
Utlizing a wireframe for content placement
3

Utlizing a wireframe for content placement

 
09:49
Adding external assets
4

Adding external assets

 
08:55
Slicing images
5

Slicing images

 
08:15
Preparing images for export
6

Preparing images for export

 
08:22
Coding the basic email structure
7

Coding the basic email structure

 
09:13
Adding tables and inline CSS
8

Adding tables and inline CSS

 
07:36
Finalizing the code layout
9

Finalizing the code layout

 
10:04
Adding main body content and styling copy
10

Adding main body content and styling copy

 
07:40
Adding second column content and styling copy
11

Adding second column content and styling copy

 
07:10
Setting up styling for hypertext links
12

Setting up styling for hypertext links

 
09:56
Establishing a responsive email design
13

Establishing a responsive email design

 
05:44