CreativeTechs Tips

Seasoned graphic designers wouldn't dream of sending a print project to press without first approving an accurate proof. Your client's email marketing campaign should be no different. You need to be sure you know what your design looks like on the different email clients your readers might be using.

Unless you have a studio filled with testing computers and different email servers, you can't test all the combinations yourself. In this week's creative tip we profile two services that make proofing your email designs quick and painless.

Service #1: Litmus.

litmusapp.com

Litmus offers a slick online service for testing both website and email designs. Litmus currently provides testing screenshots for 13 different email clients (listed below) and 23 different web browsers (not listed).

Note: We mentioned Litmus a year ago in our related tip: Test your web design in different browsers.

Testing fees start at €12 ($18) for a 24-hour pass, or €39 ($55) for an unlimited monthly subscription. Litmus is a European company so they charge in Euros — US Dollar prices vary slightly based on the exchange rate.

To test your designs, you'll send a draft of your email campaign to a temporary email address Litmus provides. Their service automatically generates a collection of screenshots showing you how that email looks on a number of popular email clients. Their system also provides basic notification if your test emails are flagged as Spam by any email systems.

Webmail Services:

• Gmail
• Hotmail
• AOL Mail
• Yahoo! Mail

Desktop Mail Clients:

• Outlook 2007
• Outlook 2003
• Outlook 2002/XP
• Outlook 2000
• Lotus Notes 8
• Lotus Notes 7
• Lotus Notes 6.5
• Apple Mail 3
• Apple Mail 2.1

Service #2: Campaign Monitor.

Campaign Monitor

Campaign Monitor is an excellent email delivery service for designers who need to create email campaigns for themselves and their clients. Design and spam testing is an add-on service they offer their customers.

Testing fees are $10 per test. Which can add up quickly if you need to re-test the same campaign several times as you make corrections.

To test your designs, you'll need to send the test email using Campaign Monitor's delivery tools. Their proofing service generates screenshots for 20 different email clients, including several mobile email clients that Litmus does not offer. Campaign Monitor also provides a more robust Spam filter test to provide details on how likely your email is to get flagged by a variety of anti-spam filters.

Webmail Services:

• Gmail
• Hotmail
• AOL Web Mail
• Yahoo! Mail
• Comcast
• Earthlink
• Mail.com

Desktop Mail Clients:

• Outlook 2007
• Outlook 2003
• Outlook XP
• Lotus Notes 6.5
• AOL 9 Application
• Thunderbird
• Windows Mail

Mobile Mail Clients:

• BlackBerry
• Windows Mobile 5
• Windows Mobile 6

Verdict: Which email testing service should you use?

If you plan to use Campaign Monitor as your email delivery system, use their screenshot service to proof your designs. They generate a superior Spam testing report, and provide proofs for a wider number of webmail and mobile services.

If you aren't using Campaign Monitor to deliver your email campaign, we'd recommend testing your email designs using the Litmus service instead. Their pricing is better for multiple tests, and because you send your test directly to a temporary email account, the results will accurately reflect any oddities your email delivery service might introduce into your campaign.

Source: This tip inspired by our upcoming Seattle workshop, Marketing with HTML Email Newsletters, where yours truly will be discussing the ins and outs of using Email Newsletters as a marketing tool for graphic design firms and their clients.

Posted by Craig Swanson at 06:00 AM | Permalink

If you've updated to the new Mac version of Microsoft Office 2008, you may have noticed Word now saves files in Microsoft's new DOCX format. The problem is, just as Windows users found, not everyone can open this new file format yet. The easy way to prevent compatibility problems with colleagues and co-workers is to change your default file format back to the old DOC format until everyone in your life has upgraded to the new version of Word.

Here are the quick step-by-step instructions to change this preference in Word 2008.

Choose Word > Preferences in your Mac's menu bar.

Click on the Save icon in Word Preferences.

Choose "Word 97-2004 Document (.doc)" under the Save Word files pop-up menu.

Click OK. As you create new Word documents, they will be saved in the old DOC format everyone in your life is used to receiving.

Problems Opening a DOCX file?

If you find yourself on the other side of this problem — receiving DOCX files when you don't have Office 2008 yet — check out an updated version of our tip from last year:

Updated: Open MS Word 2007 .DOCX files on a Mac.

Source: This tip inspired by a question from Brian McKenna at Top Dog Talent, a new talent agency representing experienced marketing and communications professionals in the Puget Sound area.

Posted by Craig Swanson at 05:45 AM | Permalink

We've been mining for Acrobat tips in preparation for Jason Hoppe's upcoming workshop on Building PDF Forms. This week, we'd like to link to the mother lode of PDF Forms tips:

101 PDF Forms Tips.pdf

Ted Padova, author of the Acrobat Bible, has created this free 55-page document that covers some of his most frequent tasks when creating Acrobat PDF forms. The tips range from the design stage through adding specialized JavaScripts. And since the document is a PDF (of course) Ted has provided working examples of most the techniques in action.

Ted Pavoda's 101 PDF Forms Tips.

Here is a breakdown of the 101 tips covered in this book:

Designing forms

1. Breaking Page Borders
   
2. Changing Midpoints on Objects
   
3. Creating PDFs with Adobe PDF Layers
   
4. Adding Buttons to Layers
   
5. Adding Hyperlinks in Application Documents
   
6. Designing for Run Form Field Recognition
   
7. Replacing Pages
   
8. Replacing Pages in Tiled Views
   
9. Editing Text on a Form
   
10. Editing Images on a Form
    
11. Adding Document Properties
    
12. Flattening Fields
    

Working with Fields

13. Using Run Form Field Recognition
    
14. Scanning for Run Form Field Recognition
    
15. Creating Comb Fields
    
16. Creating Arbitrary Masks
    
17. Formatting Numbers
    
18. Adding Button Faces
    
19. Adding Rollovers to Button Faces
    
20. Duplicating Buttons Across Multiple Pages
    
21. Adding a Reset Button
    
22. Submitting Forms to eMail Addresses
    
23. Creating a Table
    
24. Managing Fields
    
25. Setting Appearance Defaults
    
26. Duplicating Fields
    
27. Adding an Address Block
    
28. Renaming Fields
    
29. Duplicating Check boxes and Radio Buttons
    
30. Adding Barcode Fields
    

Initial Views

31. Setting Initial Views
    
32. Opening in Full Screen Mode
    
33. Hiding the Cursor in FS Mode
    
34. Hiding the Navigation Panel
    
35. Viewing the Navigation Panel
    
36. Setting Custom Zoom Levels
    

Writing JavaScripts

37. Navigating Views
    
38. Creating an Application Alert
    
39. Dismissing Application Alerts
    
40. Adding Line Breaks to Alerts
    
41. Invoking Actions on Field Entry
    
42. Assessing Viewer Versions
    
43. Assessing Viewer Types
    
44. Assessing Document Information
    
45. Autotabbing Fields
    
46. Printing Pages Via JavaScript
    
47. Printing from the JavaScript Console
    
48. Eliminating Fields From Print
    
49. Printing with Annotations
    
50. Creating Document Actions
    
51. Date Stamping a Document
    
52. Summing Rows and Columns
    
53. Using Simplified Field Notation
    
54. Summing Data with JavaScript
    
55. Calculating a Sales Tax
    
56. Calculating a Shipping Charge
    
57. Importing Images
    
58. Showing/Hiding Fields
    
59. Resetting a Form
    
60. Setting Fields to Read Only
    
61. Deleting Fields
    
62. Deleting Zeros from Calculation Fields
    
63. Adding URLs to Text
    
64. URL Links in New Windows
    
65. Adding Annotations Using JavaScript
    
66. Adding Fields Using JavaScript
    
67. Determining x,y Coordinates
    
68. Changing Text Colors
    
69. Spawning Pages From Templates
    
70. Changing OCG States
    
71. Limiting Character Strings
    
72. Popup Menus for URL Navigation
    
73. Popup Menus for Page Views
    
74. Popup Menus for Opening Files
    
75. Emailing a PDF
    
76. Emailing Form Data
    
77. Checking for Empty Fields
    
78. Creating Fixed Response Options
    
79. Creating Application Response Dialog Boxes
    
80. Adding Data to Secondary Forms
    

Adding Menu Items

81. Counting Fields
    
82. Counting Page Templates
    
83. Listing Menu Items
    
84. Adding a URL to a Menu
    
85. Add a File | New Menu Command
    

Adobe LiveCycle Designer (Windows-only)

86. Changing the Default Template
    
87. Adding an Address Block
    
88. Adding Button Imports
    
89. Editing Backgrounds
    
90. Binding an XML Sample File to a Form
    
91. Testing the XML Data File
    
92. Creating a WSDL Connection
    
93. Enabling an XML Form
    
94. Distributing an XML Form
    
95. Adding a PDF Background
    
96. Converting a PDF Form
    
97. Using Transparent Images
    
98. Calculating Columns
    
99. Creating Tables
    
100. Adding a Total Field to a Table
     
101. LifeCycle Designer Resources Available to You
     

Source: This tip inspired by Jason Hoppe's upcoming workshop Acrobat: PDF Forms in Seattle on April 30th. For designers outside of the Seattle area, check out Ted Padova's Blog as well as his updated book, The Adobe Acrobat 8 PDF Bible.

Posted by Craig Swanson at 06:00 AM | Permalink

Managing serial numbers is a headache in almost every creative studio. If you have more than 3 designers on a network, someone has to take responsibility for keeping track of which serial numbers belong on which computers.

CreativeTechs recommends that creative teams stop buying single-user copies of CS3. For the same cost, your studio can get a site license with a single serial number for your entire team. Here's our tip from last year:

Transactional Licensing: Avoid serial number headaches with CS3!

But back to today's tip: What if you are using a single-user copy of CS3, and you need to change which serial number is installed on a particular computer? It turns out Adobe makes changing the serial number easy as can be. No need to uninstall and reinstall software if you know where this "Erase my serial number" checkbox is located.

How to Reserialize CS3: Erase serial number option.

To remove you old CS3 serial number, simply use Adobe's Deactivation feature.

Choose Help > Deactivation from any CS3 application.

In the deactivation window, click the checkbox that says "Erase my serial number from this computer after deactivation complete."

Click the "Deactivate" button.

The next time you launch InDesign, Illustrator, Photoshop, or any of the other CS3 applications, you'll be provided with an opportunity to enter your new serial number — or even start a new 30-day trial period.

Changing the serial number on CS3 is just that easy.

We hope this little tip saved some designers a few wasted hours spent removing and reinstalling software.

Source: This tip inspired by a recent install of 3 new Mac Pro design workstations for the in-house creative team at Seattle's Swedish Medical Center, where this particular technique saved a lot of time and energy. For a related issue, check out our tip on how to Change Microsoft Office's serial number.

Posted by Craig Swanson at 05:45 AM | Permalink

Seattle designer Darlin Gray emailed friends and colleagues links to a short video welcoming them to her new website. What makes this tip-worthy is the simple HTML trick that automatically forwards web visitors to her main website after the video introduction is complete. See her example at:

Video Welcome Page: Darlin's Place

Interested in trying this technique yourself? Apple provides a free set of scripts for integrating QuickTime movies into your website. Read on after the jump for a short tutorial on how to create this effect yourself.

Note: We've tried to provide a good basic tutorial, however this technique does require a medium-level knowledge of HTML and web publishing to accomplish. You'll need to be comfortable uploading and finding files on your website, as well as making minor changes to HTML code.

Step 1: Upload Apple's AC_QuickTime.js script to your site.

Apple provides a free JavaScript file you can upload to your website to streamline the process of embedding QuickTime movies. This script includes updates from late 2006 to provide better compatibility with Microsoft's Internet Explorer browser for Windows. It's free, it works great, and it makes your life easier.

Apple's AC_QuickTime.js JavaScript file

Download this file, and upload it to a folder on your website. In this screenshot from Dreamweaver, you can see we've uploaded the AC_QuickTime.js file into a folder on our website named Scripts.

Step 2: Add a script link to the header of your HTML.

Once you've uploaded Apple's script file, you'll need to add a link to it in the header section of your HTML. If you uploaded that file into a "Scripts" directory on the first level of your site that link would look something like this:

<script src="http://yoursite.com/Scripts/AC_QuickTime.js"
language="JavaScript" type="text/javascript"></script>

This should be a single line when added to your HTML. We've broken it into two lines above to make it more legible in this tutorial.

Note: If you are uncertain where to add this line of code, simply look for a line reading </head> near the top of your HTML, and add this code on a separate line above that. Here is another screenshot from our Dreamweaver example:

Step 3: Embed your QuickTime movie.

With that handled, you can get to the fun part of actually embedding your QuickTime movie on your web page. Add the following HTML code in the section of the page you want your movie:

<script language="JavaScript" type="text/javascript">
QT_WriteOBJECT_XHTML('http://yoursite.com/yourmovie.mov', '700', '410', '',
   'autoplay', 'true',
   'loop', 'false',
   'qtnext1', 'http://yoursite.com/target.html',
</script>

The areas in Red should be replaced with the location of your QuickTime movie, the width and height of that movie, and most significantly for this tip, the URL of the page to forward your viewer to when the movie is done playing (that 'qtnext1' attribute is the key to this trick).

Tip: When setting the width and height of your movie, make sure to add 16 pixels to the height to provide room for the default QuickTime controls that sit below your movie.

Step 4: Additional attribute tags you can use (optional).

In the example code above we included a number of extra attribute tags that control certain ways the embedded QuickTime movie plays. Our example uses two attributes that tells the movie to play as soon as it is loaded, and not to loop. There are a number of additional details you can control by adding an extra line or two to your code:

'autoplay', 'true',

AUTOPLAY tells the movie to start playing as soon as possible without waiting for your visitor to click anything.

'loop', 'false',

Setting the LOOP attribute to FALSE makes sure the movie does not repeat at the end.

'showlogo', 'false',

Setting the SHOWLOGO attribute to FALSE prevents the QuickTime "Q" logo from displaying while a movie is loading.

'href', 'http://yoursite.com/target.html',

When you add the HREF attribute, this makes your movie a clickable link. When a visitor clicks on the movie, they are forwarded to your target URL.

'controller', 'false',

The CONTROLLER attribute determines whether QuickTime controls are visible or not. Setting this to FALSE hides the controls.

'emb#bgcolor', 'black',

The EMB#BGCOLOR attribute sets the background color of your movie box to any HTML color you like. Most designers chose BLACK by default.

'qtnext1', 'http://yoursite.com/target.html',

Finally, QTNEXT1 is the key attribute for this tip. Adding a URL for this attribute will forward your visitor to that webpage when the movie comes to the end.

Additional Apple Resources:

Apple has several excellent resources dedicated to helping web developers included QuickTime media in their web pages.

Apple: Updating Website to Include QuickTime Content.

Apple: Including QuickTime In A Web Page.

Apple: Embed Tag Attributes.

Source: This tip inspired by the long-awaited, often-delayed, arrival of DarlinGray.com. This particular HTML trick comes courtesy of Don Mitchell at Imagination Creation, a Seattle-based web and interactive designer.

Posted by Craig Swanson at 06:15 AM | Permalink

Some time ago I replaced the dock on my MacBook Pro with a picnic theme. Surprisingly, with all the wisdom I have at my disposal to provide clients, one of the most common questions I get these days is how they can have a picnic dock too. So I'm breaking down and documenting this little treat in what is surely to be one of the more frivolous tips in our collection.

Picnic Time Theme at Dockulicious.com

I promised a link to the popular picnic themed dock, so I'll start with that. To easily apply this (or about 150 other themes found on the Dockulicious website) download a theme (.zip file) and apply it to your Mac using their free dock replacement utility:

Dockulicious: Picnic Time Theme

Dockulicious: Dock Replacement Utility

Note: If you are using Safari, turn off the "Open Safe files" checkbox in Safari's preferences so your Mac doesn't decompress those zip files after they are downloaded.

Now that we have that picnic theme out of the way, here are some more details and resources for ambitious designers who may want to create their own custom dock themes.

Modifying your Leopard Dock: More Details

Changing and customizing the dock in Mac OS X Leopard is surprisingly easy — although it involves digging around in folders we typically recommend our clients stay out of. Proceed at your own risk.

The Leopard dock appearance is controlled by a small collection of PNG files tucked away in the System directory. To get at them, use the following steps:

1. Navigate to /System/Library/Core Services/

2. Control-click on Dock and choose Show Package Contents in the pop-up menu.

3. In the resulting window, navigate to Contents/Resources

4. Find the 4 "scurve" PNG files in this folder.

There are 4 primary dock image files. There are several sizes to handle different scale docks. Copy these to your desktop or new folder, and open them up in Photoshop:

• scurve-sm.png
• scurve-m.png
• scurve-l.png
• scurve-xl.png

There are other PNG files you can modify as well, including three indicator icons for showing which applications are active:

• indicator_small.png
• indicator_medium.png
• indicator_large.png

One PNG file for modifying the separator graphic:

• separator.png

And as a bonus, you can also modify the icon for your trash — empty and full:

• trashempty.png
• trashfull.png

5. Replace the original PNG files with your modified versions.

Make sure you've backed up copies of all Leopard's original dock files before you start doing this. This is also the step where you can cause yourself some grief if you make a mistake.

You’ll need to first DELETE the appropriate PNG files you want to replace in the ‘Resources’ folder (you'll need to provide your Admin passwrod). Then copy your newly modified PNG files into this folder. The names must be identical to the files you are replacing.

6. Restart the Dock using Terminal.

Open the Terminal utility, and type “killall Dock” (without quotes) and hit enter.

7. Repeat and test until you are happy with the results.

It takes some experimenting and experience to get a sense of what looks good for a replacement dock. Expect to be playing around for a while.

Additional Dock Resources:

To continue your dock-modifying adventure, here are some additional resources:

Dock Theme Collections:

Dockulicious.com

Leopard Docks

Yellatducks.com Dock Collection

Dock Modification Tutorials:

Yellatducks: How to make Custom Docks for Leopard

Tweak OSX: Customizing Leopard — The Dock

Apple Insider: Customizing the Leopard Dock

Enjoy!

Source: This tip partially inspired by a fabulous Seattle weekend, just perfect for a family picnic at Green Lake Park. A nice summer preview before the rain starts again.

Posted by Craig Swanson at 06:00 AM | Permalink

CreativeTechs is looking for an additional Mac Consultant to join our team. We've been continuing to grow over the last year. We are (frankly) somewhat desperate for a talented Mac IT person who can hit the ground running and continue to help our team grow to the next level.

Over the last decade, CreativeTechs has grown into the Pacific Northwest’s premiere team of Macintosh experts. Our Mac IT consultants support some of the best Mac-based creative teams in the greater Seattle area, including design firms, ad agencies, photographers, video studios, and in-house creative departments.

What is a CreativeTechs Macintosh Consultant?

CreativeTechs’s focus on supporting creative professionals means we are looking for someone with a unique blend of great technical skills, and a knowledge of the graphic design industry:

#1: Great Macintosh troubleshooting and support skills.
#2: Experience supporting a variety of graphic software.
#3: Something Extra.

Mac Troubleshooting: You'll need to move confidently between a wide variety of environments. You must be very comfortable supporting Mac OS X, with a variety of hardware, printers, and networks. Strengths supporting Mac OS X Server environments strongly preferred.

Graphic Software: You should be very comfortable troubleshooting a wide range of design applications in a production setting. Including Photoshop, InDesign, Illustrator, QuarkXPress and many others. The more experience you can demonstrate with design-related workflow the better.

Something Extra: Every new team member adds something special to our team. Beyond the basics, what extra can you bring to our team? With our focus on supporting creative professionals, do you have unique talents you could bring to our clients?

A great job for the right person.

This position is not for everyone. You'll have to love working independently — we have a central office, but most of your time is spent in the field with clients. You'll be traveling between clients during the day, so reliable transportation is a must.

We work with a lot of fun, talented clients — and we make a difference in their lives. Our business is built entirely on referrals, so you'd better be great at taking care of clients.

How to apply.

If this sounds like a great opportunity, please send a cover letter with your resume to jobs2008@creativetechs.com. We strongly prefer PDFs.

Local candidates only please -- we are not considering out of town applications.

Posted by Craig Swanson at 05:00 AM | Permalink | Comments (0)

Last week, our Adobe trainer, Jason Hoppe, led a fast-paced overview of Adobe Lightroom. This was a lot of fun — and for this week's creative tip, we've posted a free PDF of the 8-page workshop booklet you can download and share:

Lightroom Basics.pdf

It still amazes me that Jason can crank out a new workshop like this each week. Not to mention developing the materials for participants to take home. This particular handout is a terrific overview to Lightroom's overall interface and modules.

Right now these weekly mini-workshops are held in our Seattle training lab, but we're getting a lot of requests from readers who want to participate in other parts of the country. Stay tuned. We're hoping to announce our first national webinar options in the next couple months.

Meanwhile, you can browse a list of all our upcoming Seattle-area workshops, as well as a complete list of our past events:

creativetechs.com/miniworkshops

Source: The same day as Jason's Lightroom 1.3 workshop, Adobe released a free download of Adobe Photoshop Lightroom 2.0 beta on the Adobe Labs site. A recent post on John Nack's blog, provides links for a variety of videos, write-ups, and resources: Lightroom 2: The deuce is loose!

Posted by Craig Swanson at 06:15 AM | Permalink

Here is a quick tutorial for something we walk clients through all the time. Say you've forgotten your studio's wireless Airport password. If you checked the "remember this network" option when you first connected wirelessly years ago, your long forgotten password awaits you now in Mac OS X's Keychain Access utility.

Step 1: Launch the Keychain Access utility.

Look in your Mac's Utilities folder to find the often-overlooked Keychain Access utility. The icon is, fittingly, a small ring of keys on a chain. When you launch this utility, you'll be presented with a list of all the passwords you've told your computer to remember over the years.

Step 2: Get info on the password item you need.

Scroll down the main window to find the password item you need. Select “Get Info” from the file menu to see the entry details. You can also double-click the entry to quickly bring up the details.

Step 3: Click on the "Show password" option.

Click on the “Show password” button. You'll need to enter the owner’s main keychain password (usually the same as your Mac's login password).

Voilà, you've uncovered that long-forgotten password.

Source: This tip is inspired by the countless times we've helped clients track down forgotten and missing network passwords. Jordan Bojar also wrote this tip up in his weekly Make Mac Work blog focused on the IT issues facing Macs in Enterprise environments.

Posted by Craig Swanson at 06:00 AM | Permalink

At CreativeTechs, we pride ourselves on providing great Mac support for Seattle-area creative teams. But with our increased success over the last year, our schedule has become too tight to respond to long-term clients as quickly as we'd like.

To address that, the Mac support side of CreativeTechs is becoming a members-only support service. We no longer provide tech support for non-member clients. Our time is now dedicated exclusively for taking care of member clients with an ongoing support relationship.

This is a big step for us. If you are a Seattle creative pro who has relied on CreativeTechs for sporadic Mac support over the years, we can be your support team. But we are no longer available for one-time troubleshooting projects.

Note: The training side of CreativeTechs remains open to EVERYONE.

Posted by Craig Swanson at 01:48 PM | Permalink