Trying to figure out how to spice up your email marketing? I’ll show you how to design an email in Photoshop and then slice it up into multiple images to use in our email marketing tool.
Before You Begin: You will need Photoshop and a basic skill level.
Start with 980 pixels wide x 1500 pixels high at 150 dpi. You can always lengthen or shorten the document if you need to. We will be using "Save for Web" later. Setting it up at 150dpi makes the document larger and easier to see. I always start with a white background.
Place your logo at the top of the page.
What’s your email about? Are you emailing your customers to let them know about Spring Mini Sessions? Or a Holiday promotion? Put that in large, bold type after your logo. You want your customers to know very quickly what your email is about.
If you want to use an image, put that next. You can place one image directly into the email marketing builder, or you could make it a little more interesting in photoshop. You could make it inset, give it a border, show three photos in a row, etc. I like to start with a solid shape and then convert it to a smart object (right click and Convert to Smart Object). Double click the square and then add your image.
Add your text under your image. Maybe explain a little more about how your mini sessions work or the details of your holiday promo. How long does the promotion last? What's included? How much does it cost? You can do this in Photoshop or you can do it in the email marketing builder. I will usually lay it out in Photoshop and then copy and paste the text into the builder.
Here’s an important part you don’t want to forget. ALWAYS include a call to action. “Book Your Mini Session Now”, “Hurry, Limited Spots Available!", "Book Today” “Book Your Session”, you get the idea. I'm going to add a button in the email marketing builder, but you can always make a button in Photoshop if you want it to look different. Remember to update the link for the button.
Now that your email is designed it’s time to slice it up! Make sure your rulers are turned on and drag down your horizontal guide line. I’ll usually do one section with the logo, another section with the header, image, button, etc. Not too big of a section because we want to keep each image under 250k (so the email will load faster). Don't forget to save your file (and it’s a good idea to do this a few times while you’re working on it).
Use the Rectangular Marquee tool to draw the shape of your first section (it should snap to your guide line) and then select the crop tool. Hit enter twice and you’ll just have an image of that section. File > Export > Save for Web will bring up a dialog box. Here you can check your JPG settings and make sure it’s under 250k. Save and name your file. Since this is the first banner, I’ll just label it SpringMiniSession-Banner1.jpg.
Once it's saved as a JPG you want to UNDO your cropping. You can use the key command or go to Edit > Step Backwards. Continue in the same manner until all of your sections are saved as JPGs. If you’re going to use live text for some blocks you can skip those. We’ll build them in the email marketing builder.
Log into your control panel and go to the Marketing tab. Hit the "New" button and pick the first template (it really doesn’t matter which one because we’re going to place in our images and change the colors).
Hit the cog circle and rename your email. I’m going to call this one "Spring Mini Sessions."
You can delete the logo banner – we’re going to upload the one we saved out from Photoshop. You can click on the first image you see or drag over a new image banner. Click Upload and navigate to where you saved the image banners and pop in your logo (don’t forget to link this to your homepage).
Continue the process until all your banners are uploaded. If you need a text box, go ahead and drag that over and add in your text.
If you’re not using a white background, you’ll want to go back into photoshop and eyedropper the color to get the HEX code (ex: #d9bc6e). Go back to your email marketing builder and hit the paintbrush circle. Enter the HEX code in one of the accent color boxes. Go back to the text box that needs the color background and you’ll be able to select the accent color.
If you’re using an image as a button to link to your call to action, make sure you put the link in when you upload the image. If you aren’t using an image as a button you can just use the button in the drag and drop builder.
If you want to change the background color of the whole email go back into the paintbrush circle and change it there.
That's it! You're done! Look at that beautiful email you just built! Go you!