Archives
So part one dealth more with big picture and at the end I discussed taking a wider view of the email and deciding what to do on a few key points. Ofcourse describing what to do isn't as useful as actually checking out a visual example so I've gone ahead and included a quick email mockup below and highlighted key things to look for when you do that big once over at the end of step one. This will really help you figure out how to slice up your photoshop document so that you are getting maximum effect with minimum filesize.
This is the finished product on the right, so let's start deconstructing it bit by bit.
 | MACHINE TEXT In the example to the left originally the words Win a cool prize pack... were graphic text, in this specific scenario the words were in a very unique font and therefore could not utilize machine text, but for the sake of example if they were in Arial or Helvetica or Verdana they could most likely take advantage of machine text. So when you first open your PSD do a once over to see if there are any areas which can use this technique. |
 | SLICE AREAS Highlighted in green are the areas that would make the best candidates for “slicing”. They are all pretty obvious and can usually be determined by whether the final product will be an image or use code/machine text. Sometimes you will encounter drop shadows, these work just as a regular HTML background, you would slice 1px of height from a vertical drop shadow, use it as a cell background at which point it would then auto-repeat inside an expanding table cell. It is useful to note however, that if you are expecting a large recipient base to be using Outlook 2007 it would be best to avoid this method and opt for one big dropshadow image. |
 | CSS BORDERS It is a little hard to see in the example, but just above and below the main content area are two red highlighted areas. These consist of simple 1px lines which can be achieved merely by setting either a border-bottom:1px solid #FFFFFF or border-top:1px solid #FFFFF. This then ensures that even with images turned off, this element of the design will still be seen. |
 | CSS PADDING One final thing to look for when scoping the PSD is, where can the email take advantage of CSS padding? In the left you can see multiple areas highlighted in yellow. These areas indicate places where using CSS padding will allow you to position elements properly within table cells. For example in the left column in the main content area, there is no need to use pixels to space out content when a simple padding:20px; tag will push all elements inside that cell 20px inward away from all the edges. Same with the black border running around the entire email, all that needs to be is one big table cell with a black background that uses equal padding to push the entire table within it away from its edges. |
Ok so we have now given the creative a good once over, and we've decided where we need to slice. You can then begin cutting up the PSD in Photoshop by creating slices using the slice tool. Make sure you cut as close to images as possible, as we can generally use padding or borders to space things out later, this cuts down on image size and let’s us do more in the code instead.
It may also help at this point to be sure and give your slices relevant names. This makes it easier once you save them by allowing you to tell which image came from where, what type of graphics it is (ie:image, header, text, etc...) and it also saves time having to rename everything later.
 | CUT IT CLOSE The graphic on the right shows the incorrect way to cut an image (red highlight) and the correct way (green highlight). Notice how the green highlight excludes all the extra space, letting the code do the work for us. |
That's it, you're finally ready to save for web. When I get ready to start saving the images I like to keep the following in mind:
- Generally images with multiple colors and less complexity (with regards to straight lines) are better served being saved as jpg’s where as flat text or portions that have few colors within them are better served by being a gif
- Remember this is email, not the web, people want quick downloads, so make sure you cut down file size as much as possible while still retaining the best image quality you can, generally try and keep the masthead imagery looking sharp whereas smaller images within the email can suffer more as they are not responsible for initial impact
 | IMAGE TYPES Notice how the images in the example have been divided up. The masthead had multiple colors and the least amount of complex lines so it was best served as being a jpg whereas the rest all worked more efficiently as gifs. |
Check back for part 3... coding!
Cheers
0 comments:
Post a Comment