First thing you need to know when you want to get better at something, is to start the clock; time the actual minutes or hours you’re spending on a project. Time big steps and compare them to your previous record, then try to beat them. You are your ultimate competitor.
Open the PSD in Photoshop then slice it to isolate the images from the rest of it -thanks to the slice tool. Be sure that it is cut to the most precise way, that means at pixel perfect.
The PSD that you will receive from your client or that you would have created is an idea.
You have to follow it at the most precise way. Yet, you are the one who knows the best thing to do, which way to deal with elements to produce the wanted effect. Also remember that you can only save the images in jpg or gif.
After the slicing part, you will need something to create a rough mockup of how the elements work together on paper or on screen, which you find best. My preference goes to paper.
Yes, you are now creating tables, a lot of them, but don’t worry it’s how it’s supposed to be going ;)
I chose this one for the graphic WYSIWYG (What You See Is What You Get) very helpful option for newsletters.
Remember that not only you have to create an HTML4.01 transitionnal file, but also have to change the charset from UTF-8 to ISO Latin 1 a.k.a ISO-8859–1.
It is now time to refer to the rough mockup you just did. I have to stress on that one. Because it is very helpful and will save you time.
List all your priorities concerning your newsletter. Than go one after the other. Don’t consider your work as tasks, but more as steps in order to achieve your goals.
Priorities such as creating a spacer and placing it at strategic places, refering to how the rough mockup is made and to the PSD, calculating width of some tables and cells, copying/pasting images, creating the style directly in the code, getting rid of paragraphs, etc
Not exactly; you have to test it now.
For that, thanksfully tools happen to be very useful again. Such as newsletter spam tester, as well as testing it in different webmail providers: gmail, yahoo and hotmail.
Those three mail providers are not working the same way, so each time you’ll encounter a problem on one, you’ll need to work with patience and get back to your code changing one little thing to make it work. Until it works everywhere.
I’ve kept it simple here to the sake of understanding how it goes.
Emailing is not only something you build on Photoshop, code on Dreamweaver and that is ok for everyone. It makes you practice your curiosity and patience.
It takes time and problems to solve to understand everything.