One of the frequent questions I get about creating HTML emails is how to combine images and text.  In this tutorial, I’m going to cover creating an HTML file similar to the one in this post, however instead of using the text image, I’m going to use actual text.

Using a combination of images and text allows you to create hyperlinks, change the text formatting however you like and using whatever HTML elements you want to in order to enhance your email communication.

What Will I Learn From This Series

In this tutorial, I will convert a PDF flyer into an HTML document with images using the slice tool.  Next, I will review and clean up the HTML code using Dreamweaver.  I’ll briefly touch on uploading images to a webserver and then using the HTML code to either send an HTML email or create a web page.

What Tools Do I Need?

• Adobe Photoshop
• Adobe Dreamweaver
• Filezilla
• A Webserver (If you don’t have one, I recommend Bluehost)

First Steps – Photoshop

In this series, I’m starting with a PDF flyer that was created by my marketing department.  A flyer is great for print marketing, but sending emails with flyers attached as PDF documents is pretty old school.  I want my marketing strategy to include similar design, but in flyer format, HTML email and on the internet in the form of a web page.  I’m after consistency in multiple mediums.

(The next logical step would be to create a video using the same imagery, but that will be the stuff of another tutorial!)

In order to do this, I’m going to use Photoshop to convert my PDF document into an HTML file and a set of images.

Photoshop will open the PDF into an image format.  Using the slice tool I will simply draw a box around the parts of the image that I want to turn into individual pieces.  This flyer can be simply cut into 3 main areas, a header graphic at the top, a sidebar graphic on the left and the body text.

After slicing the header graphic, Photoshop will help you with the remaining slices by “snapping” the slice tool to the corners of the slice you already made.

After the three main areas are sliced, you will notice that Photoshop has also created some automatic slices from the remaining areas of the flyer, specifically the white border around the edge of the document.  We’ll clean this up in the next step.

Save for Web and Devices

Using the Save for Web and Devices option, Photoshop will convert your slices into individual images, saving them in an images folder on your hard drive.  Make sure you select HTML and Images in the options area in the save for web and devices dialogue box.  Photoshop will then add an additional HTML file created from the slices.  The HTML file will reference the individual images in the images folder.

You have a number of options in this area.  Two of the important ones are the file size and the image format.  In this example, I am changing the file size to 800 pixels from the original size of the PDF (in this case 2550 pixels!).  This is because many people still have smaller monitors and I want my HTML email (and/or web page) to render nicely for anyone who views it.

Also, I want to optimize the actual images that are saved so they load quickly and aren’t too large.  I have a number of options including GIF, PNG (use this if you need transparency), and JPEG.  In this example, I’m using JPEG format because I don’t need any transparency and the file size is small for fast loading regardless of people’s internet connection.

Note that all slices will be saved to the images folder, not just the ones you want.  Looking in my images folder, I not only have the three main images that will make up my HTML email, but also the “extras,” the white borders around the document that were created by Photoshop out of the left over space.

Cleaning the HTML Code in Dreamweaver

Once I’ve saved for web and devices, I’ll open the HTML file in Dreamweaver.  Remember, the HTML code is using the src tag to reference the images saved in the images file.  That’s why the path starts with <img src=”images/…”>.  This path is the most important item in creating your HTML email because this tells the recipient’s email program or web browser where to find the image on the internet.

When you initially save the HTML file and the images are saved on your hard drive and you open the file in Dreamweaver, you can see the images because Dreamweaver can access them on your local machine.  If you were to copy the code into an email without having uploaded the images to a webserver or changing the path to match, the image links would appear broken to the recipient of your email.  We’ll cover this in a few minutes.

First though, we need to clean up the HTML code, appropriately size and format the table and get rid of what we don’t need, specifically the extra white border around the image.  I find it helpful to work in the split view mode in Dreamweaver so I can see both the HTML code view and the design view at the same time.

The HTML code is essentially a table with each cell containing an image.  You can delete the image from the code by removing the entire image tag <img>, or clicking the image in the design view window and deleting it, but doing that will still leave an empty cell.  Empty cells in HTML code can create blank spaces in the email.  For us to remove the white borders completely, we need to delete those cells all together.

Once we delete the cells (and the image src code in them), be sure to click the refresh button so that the design view will reflect the code changes.

Next, I want to make sure the entire table width is the same as the header graphic so that my overall design looks right by modifying the width of the table to match.

Here’s the re-sized table with the extra cells removed:

Adding Text With Those Images

Once we have the basic structure of the flyer cleaned up, it’s time to add our text.  Because the existing text is nothing more than an image file from the original flyer, I’m going to delete that image but keep the cell as it is.

This empty cell is where I’ll add my text.  Since my flyer was already created with text, I’m going to copy the text right off the PDF file and paste it into the cell, re-formatting it the way I want it. Using the cell options in Dreamweaver, I’ll change the vertical alignment to “top” so that my text starts in the upper left corner of the cell and not in the middle of it.

Using actual text instead of a graphic with text, I can add hyperlinks and whatever HTML elements I like.  Additionally, if I’m using this as a web page, Google and other search engines will be able to index the content on the page for key word optimization.

Adding a combination of images and text gives you much greater flexibility over your HTML email.

As I go through the text, editing spaces and formatting paragraphs, you’ll see that Dreamweaver has made some automatic changes to the cell width and spacing.  By changing the table view to Expanded Tables Mode, I can drag the left edge of my cell next to the left sidebar image as far as it will go.

Because I don’t want my text to be right on the border of the sidebar graphic cell, but to have a little padding, I’m going to modify the width of the graphic cell to be 4 pixels wider than the image.  This will give a little border space between the graphic and the text.  Converting the table view back to “Table Widths,” I can see exactly how the code will render.

 

Get That Path Right!

The most important part of creating an HTML email is getting the path to the graphics correct.  As I mentioned above, the path tells the viewer’s email program or web browser where the image is on the internet.  Up to this point in this example, the image files are all on my local computer.  That’s fine for me, but no one else can see them.

If I update the path in Dreamweaver with the path I know I’m going to upload the images before actually doing so, my link will appear broken.

So my next step is to upload the images to a webserver and then update the HTML code with the exact path for the images.

In this example, I’m using the open source FTP program Filezilla to connect to my webserver and upload my images.

The way to check to see if your images are actually on the web and viewable is to type the exact path to the image file in a web browser.  If you can see the image, then others can too.  If you can’t, then there’s either a problem with the path, the internet connection or the graphic itself isn’t there.

Using the Live View in Dreamweaver

Once you upload the images to a webserver and edit all of the image paths in the HTML code to reflect the location of the image files, you can use the Live View feature in Dreamweaver to see if the graphics show up.  This gives you an easy way to check your HTML code before using it in an email.

Turn the Code Into an Email

Working on the video for this part…

Getting Rid of those Annoying White Spaces in Gmail!