Don’t create image slices for those areas that only contain a single, solid color. In order to specify the slice type, right click over the selected slice and choose Edit Slice Options. Image slices are those areas that need to be preserved as images (like your logo or product box), while “no image” slices are those email areas that are going to hold various email texts. Now you need to specify the type of each slice: image slice or text slice (“no image” slice). As you can see, all email elements were separated into clear slices:ģ. This way you can later apply HTML background colors to these slices, instead of nesting colored images of those areas.īelow is the Photoshop design image after all slices were applied. For example, if you have a grey area and a yellow area, make a slice for the grey area and another slice for the yellow area. – try to split the email image into areas that hold single, solid colors. – avoid leaving image areas that are not part of any slice, even if they are blank (white) spaces. Your logo should form a single slice, your email title text should form another single slice, etc – each slice should contain one clear element (image or text). – whenever possible, try to align your slices horizontally, like creating a table where all cells align to horizontal lines Here are a few tips to create the best email slices: Practically, you have to organize (split) your email layout in multiple zones (slices). You have to create areas that are going to separate HTML elements, using the slices tool: Open your email design image with Photoshop. Let’s assume you have the following design that you need to transform to a HTML email:Ģ. Let’s say you designed the graphical layout of your desired HTML email, so you have an image showing how the email is supposed to look like.
Adobe photoshop newsletter template how to#
How to create a great looking HTML email template with Photoshopġ. – Adobe Photoshop (any CS version will do just fine). – Microsoft Office Outlook (any version starting with Outlook 2000) But, here is a solution even for those that aren’t so familiar with the HTML email tricks.īelow we will describe a straight forward method to design a HTML email and achieve compatibility with all major email client applications. It can be an impossible mission, if you aren’t experienced enough on designing HTML emails. How about a nice looking HTML email template that renders just fine in Outlook, Thunderbird, Gmail and all other major email client applications? Sounds pretty easy, but all email designers know how hard can it be to achieve a slick design yet still get the email to display fine across various email clients.
0 kommentar(er)
