From left to right depicts a sample email in various platforms from a campaign for a product called Sitespotter by n3twork.com. The bottom right screenshot shows our original Photoshop PSD file with the 40 slices it takes to create the finished product. This is one of a number of things that are necessary so that we can code the email in a tabular fashion viewable to all platforms and browsers. Our text is styled strictly with span tags, and all of our spacing is created with transparent GIFs inside table cells with explicit width and height.
Click here to view this email in your browser. As you can see, the finished product matches our photoshop mock-up in all browsers and email clients.
Send us your PSD, we'll send you back a coded, cross-platform, bulletproof email (.zip with html and images) for just $250 with a guaranteed 3 day turnaround time! Our PSD to HTML email service utilizes industry secrets known only by a select few large web development agencies that charge thousands an email! Hundreds of emails have been coded for major software companies like FileMaker Bento, FileMaker, ACT! by Sage Software, Peachtree by Sage, and many more.
For more samples of our work or to get a quote on your next email campaign, please visit the contact page and ask for your free quote today!
Maybe you're already experienced with making HTML emails and have the programming knowledge it takes. For most developers, the process involves painstaking photoshop slicing of a document to separate text areas from graphic areas. When finished, you Save For Web with the proper settings in place and then go through the outputted HTML and manually tweak it to perfection. This can be incredibly time-consuming. This process is where Photoshop Scripts can save you countless hours of precious time.
Photoshop Scripts are not actions, as you can see in the screenshot to the left. They are actual hand-programmed scripts (in this case javascript) placed into Photoshop's presets/scripts directory that show up underneath the Scripts item of your File menu. The two major scripts I use for my emails are featured in this screenshot. Many times when creating an email, you'll have a blank slice that consists of just a solid background color and no text or imagery. Obviously we'll want to edit this slice's options, change it to No Image, then set the background color. We do this so that when we save the html, the slice is rendered using your transparent spacer gif as a spacefiller and bgcolor on the td to set the background color of the cell. The highlighted script, ConvertImageSliceToHTML (bound to the f3 key here) will convert the selected slice of your photoshop document to no image, and also use the current background color you have set to apply that color to the slice's background color. As you can imagine, this is a major timesaver in emails/newsletters that contain 50+ slices.
The next script featured is for slices that you want to use as text areas. Let's say you have a very lengthy text area that contains line breaks, multiple colors, multiple fonts, bold and normal text, etc... all in the same text layer. Hand-coding the HTML that you want to place inside the slice can be very time consuming given the way we have to program all emails with inline styling and archaic code. It also leaves a lot of room for error. Let me show you how this script can completely automate the process.
We first select the text layer that contains the text we want to insert into the slice. As you can see, the script converts the text as it is formatted in your photoshop document, directly to inline-styled HTML. It uses P or span tags depending on your preference, but accurately detects changes in font weight (bold/normal), colors, underlines, and more. If any of these font changes are detected in the layer, it will create the necessary inline-styled code to produce HTML text that matches your Photoshop comp pixel for pixel.
After copying the code generated for us from the script, we then select specific slice that holds the text area. Press F2 to use our previous script and convert the slice to a text area with a solid background color. Then doubleclick on the slice with your slice select tool selected in the toolbar and begin editing the options. You will paste the chunk of code from the previous step into the slice options here.
This may seem like a lot to digest, however it quickly becomes second nature when coding emails and newsletters. The entire process is so simple that it involves you selecting a text layer, pressing F2, copying the contents, closing the script window, pressing f3 on the selected slice to convert it to text, double-clicking active slice to open its options, then pasting the contents of the clipboard into the box. It's that simple. Our slip converts non-friendly HTML like high-ascii characters into their respective entities automatically. Very rarely do you ever have to go behind the script and fix the text formatting of something the script may not have picked up on. It saves an enormous amount of time for any developer.
This script will be available for your purchase very soon. The first script (converting current slice to text area with background color) will also be available here for download completely free. Check back often for updates, or use the contact form on this site to request either one of the scripts if you simply can't wait.