Wednesday, April 14, 2010

Customizing a Campaign monitor template

I have just finished customizing a newsletter for JamGrub as part of my Electronic Publishing course.

So this mini-project wasn't for MC25B, but the stuff I was doing definitely required me to call upon my multimedia skills. To customize the template, I was required to make use of Illustrator (replacement vector images), Photoshop (prepare and save these images for the web properly) and Dreamweaver ( to do the image replacement, adjust CSS, add information and links to the HTML)

The template was downloaded from the site http://www.campaignmonitor.com/templates.

I downloaded template 7. It came as a zip file which I unzipped, and found that the folder contained an HTML file with the CSS contained in the head, stock images, and the PSD file which was used to design the template.

I replaced the stock images with images of my own. These replacement images were taken from the blog posts, and resized using Photoscape.

I then deleted the stock images which came with the templates and made the changes to the html file so that the newsletter would call my new images instead.

A bit more complicated was replacing some of the design elements of the newsletter such as separators. I used Photoshop to open documents the same size as the already existing ones, copied and pasted vector images from Illstrator to Photoshop, and then using the save for web dialogue in PS, I saved these as PNGs with transparency. I then changed the HTML to call the new images.

Once I had the design and images customized, I had to input text which I simply copied and pasted from the blog posts. I also inserted the URLs to the individual pages of the site which could be accessed by clicking 'Read more' after the introductory passage of each story in the newsletter.

Here is a before and after of the template

BEFORE:



After:

No comments:

Post a Comment