Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
Another popular use for web design is creating email newsletter templates. Whether it be a stylized sales announcement from your local grocery store or even in the new releases email that lynda.com sends out on a regular basis, email newsletters are a great way to stay in contact with your customers and drive new sales and people to your web site. We can leverage Photoshop to help us design these templates as well, and it's actually quite easy. While there's no email newsletter preset in Photoshop, you can create your own. So, let's take a look at how we can do that now.
I am going to go ahead and press Command+N or Ctrl+N to bring up the New Document dialog box. You could also go up to File > New. I am not going to worry about creating a name, because I am just going to be saving a preset here. From the Preset menu here, I can drop this down, and I can actually choose something like Web just to get myself started. And then I can take a look at some of the sizes to see what's available to me. It should be noted that a majority of email newsletters come in a fixed width, meaning that they stay one constant size, like 500 pixels. This is good news because it means you don't have to build this on a responsive grid or anything like that.
One of the big no-nos of email newsletter design is using horizontal scrollbars. We do not want the user to have to scroll sideways through the design to find anything. Therefore, we should design our template to be around 550-600 pixels wide. Now, there is no set web size that is that small inside of this dropdown menu, and that's okay. You don't necessarily have to stick to that. You can create a bigger document like let's say 800 x 600 and then you use guides or even shape layers to determine the exact width of the design.
Using a bigger canvas size, like 800 x 600, also gives you an idea of what the email newsletter would look like on a larger screen. But if you wanted to stick to the standard 550 x 600 pixel wide document, that's okay. You can do that as well. I can just click away from that, and I can enter in a value right here. So in this case I think I will do 600 pixels wide. The height really doesn't matter as much, because users are used to scrolling up and down on regular web pages. So feel free to make this as tall as you like. In this case, I think I am going to make this about 800 pixels tall.
Remember, resolution doesn't necessarily matter here, but pixel count does, so for now, we'll just leave this on the default 72-pixels-per-inch setting. Now, once I've created all these parameters in here, I can then save this as a preset. So I will click Save Preset, and I am just going to call this Email Newsletter, and I will hit OK. Once I hit OK, Email Newsletter now shows up as one of my choices inside of my Preset menu. So anytime I need to get back to this, I can easily pick that, and hit OK.
Once I hit OK, I'm now able to design my Email Newsletter template using the static size that I've created here. It would probably be a good idea to develop a handful of templates, so you can change them up every now and then, and use different ones on different projects. If you're doing client work, this is especially useful because you can have a different one for each client for instance. Either way, set up your own templates, save them, and you'll be well on your way to creating some awesome newsletters in no time.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.