How To Make Pretty Emails With Photoshop
Are you looking for ways to spice up your email marketing efforts? Let me show you how to create an email using Photoshop. Then, I will slice it into multiple images for our email marketing tool.
Before you Begin: Photoshop is required and basic skills.
Create a Photoshop document
Start with 980 pixels width x 1500 pixels height at 150 dpi. If you have to, you can always shorten or lengthen the document. Later, we will use “Save for Web”. It is easier to read and makes the document appear larger. Always start with a white background.
Place your logo
Your logo should be at the top of each page.
Create a header
What is your email about? Is it to inform your customers about Spring Mini Sessions or are you simply emailing them? Oder a Holiday promotion. After your logo, put that text in bold and large font. Your customers should be able to quickly identify the subject of your email.
Place your image(s).
You can use an image by placing it next. One image can be placed directly in the email marketing builder. Or, you could make it more interesting using photoshop. It could be made inset, bordered, or show three photos in one row. I prefer to start with a solid object and then convert it into a smart object (right-click and Convert to Smart Object). Double-click the square to add your image.
Add your text
Add your text under your image. Perhaps you could explain the process of mini sessions or details about your holiday promotion. What is the duration of the promotion? What is included? What is the cost? This can be done in Photoshop, or the email marketing builder. It is common to lay it out in Photoshop, then copy and paste the text into a builder.
This is an important point you should not forget. Always include a call to action. Book Your Mini Session Now, Hurry! Limited Spots Available! You get the idea. If you prefer a different look, you can add a button to the email marketing builder. Make sure to change the link for your button.
It can be sliced!
Now that you have your email designed, it is time to cut it up! Turn on your rulers and drag your horizontal guideline down. One section will have the logo and another with the header, image, and button. We don’t want each image to exceed 250k, so we won’t make it too long. It’s important to save your file. You might want to save it more than once while working on it.
Your images can be saved
Draw the first section using the Rectangular Marquee Tool (it should snap to the guideline). Next, select the crop tool. You’ll get an image of the section by hitting enter twice. A dialog box will appear when you click File > Export > Save to Web. You can now check the JPG settings to make sure it is less than 250k. Save your file and name it. Since this is the first banner, I’ll just label it SpringMiniSession-Banner1.jpg.
After saving the JPG, you can UNDO your cropping. Use the key command, or go to Edit > Move Backwards. Keep going until all sections are saved to JPGs. You can choose to skip blocks that will contain live text. These will be built in the email marketing builder.
Create the email from your control panel
Log in to your control panel, and then go to the Marketing tab. Click the “New” button to choose the first template. It doesn’t matter which one, as we’ll place our images in them and alter the colors
Click the Cog Circle to rename your email. This one will be called “Spring Mini Sessions”.The logo banner can be deleted. We’ll upload the one that we saved from Photoshop. Click on the image that you like or drag it over to create a new banner.
Click Upload to navigate to the location where you saved the image banners. You can then upload your logo and link it to your homepage.
Keep going until you have all of your banners uploaded. You may also need a text box. Drag it over and add your text. If your background is not white, you can go back to photoshop and eyedropper that color to get the HEX codes (ex. #d9bc6e). Now, go back to your email marketing software and click the paintbrush circle. In one of the accent color boxes, enter the HEX code. You can select the accent color by going back to the text box with the background color.
Don’t forget to finish it
When you upload an image to use as a link to your call-to-action, be sure to include the link. You can use the drag-and-drop builder to create a button if you don’t have an image. You can change the background color for the entire email by going back to the paintbrush circle.
That’s all! You’re done! You can now see the beautiful email that you just created! Go you!
- Double-click the background layer, and then draw a line from the center to that layer. This will help align everything in your document.
- Download our Free Social Media Templates and our Free Price Sheet Templates if you need help choosing a look. There are many great free fonts available. You can also drag and drop parts into your email templates. In my example, I used the headline and fonts from the Price sheet Templates.
- You can use Adobe Illustrator to search for patterns, linear elements, and banners. Use them in your email. Sometimes, I will create a header in Illustrator that you can copy into Photoshop.
- Pay attention to the emails you receive from brands that you like. What emails do you open? Which emails do you open? What do you think looks good? When creating your emails, keep this in mind.
- Are you having trouble choosing a color palette for your project? You can choose one color (blue, for example), and then search “Blue Color Palette” to get tons of ideas. You can always open the Photoshop file and adjust the colors to your liking.