Building an email template - Photoshop Tutorial

- [Narrator] I want to build an HTML email, a common task for the InHouse designer. And what I've done is I've taken a template from Dreamweaver and kind of captured it in the browser and scaled it down in Illustrator and drawn out this base template. Which I'm now going to use to actually build the structure for an HTML email. Now if I was starting from scratch, I would probably use a guide layout and in case you've never seen one of those before, I will just pop up to the view menu and come down to New Guide Layouts just here, and this one I typically have in 12 columns. It looks kind of busy when you're looking at it from out here but 12 is a great number because of course, it's divisible by two, three and four which means you've got plenty of flexibility with those guides, however in this particular instance, I'm kind of happy with what I've got there that I can build this well enough. So I'm gonna zoom in now on the hero image up at the top because that's where I'll start. And the typical work flow I have for doing this is perhaps to build a background rectangle to start off with and then build all of these individual parts on top. I'll start with the hero here though, so I'm going to tap U on my keyboard to get to the shape tools and the rectangle is exactly what I'm after, so I'm going to work with that. I'll start up here, like so, and just drag outwards. It's kind of nice if you can get it pretty much straight on. I haven't, I've got 595 by 298, but I can resolve that once the properties panel opens. I can just dial that up to 600, which is what that needs to be. And then just dial that up to 300, like so. I can then apply that, I'll just close the properties panel. I can get my move tool and get that into position. The smart guide's there helping me to do that efficiently. And typically, I would give this a name like Hero, okay. And convert it to a smart object. Now the reason I do that is because I can just dive into that smart object, place image content I want to use, pretty much like a container that I can use to drop things in and out of, I will close that then come back to the layout. So I do that and then next up I come along and get the type tool here and I drag myself a text frame for that text. And fill it with some place holder text, so I just do that there, like so. Go to the type menu and choose Paste Lorem Ipsum. And I could figure all that out as I needed to, so at the moment I'll just drop that down to about 16 points, which is a pretty good size for that kind of thing and I'll color that up fairly dark gray toward black just there like so. And that's fine for the moment, I suppose the only other thing I could do there is to just change the letting to automatic, because at the moment, that's very big and long there. And I'll apply that, so I've got that text frame and I could call that Intro, and then I might have another one underneath that for the messaging area, that's the 600 by 230. And then I get into the sub-items, so just zooming out slightly, this is like our main messaging at the top. This is the senior call to action, if you like, and then under that I would have another text layer just here, in fact let's duplicate the text layer. If I just get myself a copy of that, whoops, I'm actually editing it, so that won't work too well. There you go, so I've got a copy and we'll call that Messaging. And then get the selection tool and bring that down into that area, okay. So that's sort of the secondary message there. And then we're into the different sub-items and I've got kind of two categories for those. Now these may be product, they may be anything. I tend to call them Product, because basically in something like this everything is. But I'll make one of the sub-items now. If I get my rectangle tool. So these need to be 270 by 270, so I'll line those up nicely like so. And again, I can use the properties inspector to... Oh it's within a pixel, that's not too bad to be fair is it? Alright each of those so I can line those up and then I'd call this one Sub 1 and turn that into a smart object like so. Same reason as the one before, and then it'd be a matter of just Command + J on that one and calling it Sub 2. So Command + J is duplicating that layer like so. Or jumping to another layer if ya like. I'll get my selection tool and bring that one across. And you can see it makes pretty short work of building that out and then I've got some 170 by 170's underneath that. And so I built those in exactly the same way. And before you know it you've got a built template ready to start populating with some content.