CreativeTechs Tips

This week's creative tip is one of those handy shortcuts you can use all the time. As basic as it is, a lot of us missed this feature along the way.

In many Adobe application (InDesign, Illustrator, Photoshop), hold down the Shift key while dragging a guide to snap to the nearest ruler mark. The cool part is that your guides snap to the visible tick marks on the ruler whatever the magnification level. Once you've tried it, you'll be using this trick every day.

Source: This tip came up during a Q&A session at one of Jason Hoppe's recent weekly mini-workshops.

Posted by Craig Swanson at 09:15 AM | Permalink

Last week my family and I left for a much anticipated vacation in Italy. But rest assured, before we left town, our team queued up a fun collection of tips to run while we're gone. If everything works properly, those tips should continue to flow uninterrupted each Monday until we return.

In the spirit of travel, we'd like to offer up a tip and tutorial on how to add translation links for international readers of your website or blog. In this example, we'll add a small collection of tiny flags representing different languages. When a reader clicks on a flag, the page is translated using Google's translation services.

Click on a flag to translate this tip into French, German, Italian, Russian, Japanese, or Chinese. Then read on in your language of choice for details on how to recreate these links yourself.

The Easy Way: Single Page Links.

Creating a single translation link is pretty easy. Just visit the Google Translate site, type in your URL, pick the translation that you want to use, and click "Translate."

You'll get a translated version of your site. Copy and paste that resulting URL as a link on your website and you're set.

However, with this approach, you'll have to build each translation link by hand. That's fine for a single page, but if you want to include translation links on many pages across your website or blog, you'll need to turn to a script that can generate the links dynamically.

The Harder Way: Javascript.

To accomplish an automatic translation link, we are going to attach a bit of Javascript code to some graphics or text links on your webpage. You don't have to know how to write Javascript to accomplish this, but you will need to be comfortable digging into HTML.

Here is the basic Javascript code we'll be using:

And here is an English translation for what that code is doing:

Line 1: Go to a new URL which is...
Line 2: The Google Translation page for..
Line 3: The URL you are viewing right now.

This creates a dynamic link to Google's translation site for any web page you happen to be viewing.

Note: The bold text in red indicates the text that will be changed based on the target language you wish to translate into. Here is a list with some language codes you can access through Google:

fr = French
de = German
it = Italian
ru = Russian
ja = Japanese
zh-C = Chinese (Simplified)
zh-TW = Chinese (Traditional)

The Translation Links.

Don't worry about understanding all the Javascript. We'll provide a couple links below that you can copy and paste. You will need to be comfortable working with HTML code to make use of this.

Example 1: Text Link.

Result: French

Example 2: Graphic Link.

Result:

Note: You'll have to replace "flag.gif" with the URL of your flag graphic.

The Flag Graphics

For the actual flag graphics, we recomend a free icon collection we linked to in August 2006 (Free! Icons for your Website, Blog, Etc.). Check out a great set of tiny country flag icons at famfamfam.com:

famfamfam Flag Icons

Good luck. We hope we've included enough clues in this mini-tutorial to allow you to dig in and create your own translation links.

Source: The javascript in this tip comes from the answer to How can I add "translate into" country flags to my pages? on the Ask Dave Taylor Q&A site. We covered Google Translate back in QuickTips #86 - Translate foreign language websites.)

Posted by Craig Swanson at 09:00 AM | Permalink

Presidents' Day (today) is a national holiday in the United States. In honor of the extended weekend, here is a fun project. Design-Police.org has created a great "visual enforcement kit" that includes a wide number of stickers. Download the PDF, print them out, and help bring bad design to justice:

Design-Police.org

For even more fun, combine these stickers with our Acrobat PDF Stamp tip this week, and start critiquing digital proofs from around the office.

Source: Discovered on the always wonderful Swissmiss blog.

Posted by Craig Swanson at 09:15 AM | Permalink

Back in January 2007, we published a tip showing how to use PDF watermarks to add studio-branded "proof" stickers to the PDFs you send clients (Add proofing messages with PDF watermarks). That's been a popular tip over the last year.

This week we'd like to provide an updated tutorial showing how you can do the same thing using custom Acrobat stamps. In hindsight, using Acrobat stamps does a better job, and is a lot more fun.

Once you've created a proof PDF for your client, use the following steps to add a special "proof" stamp in Adobe Acrobat. (You'll need the full version, not just Adobe Reader.)

Step 1: Build a Stamp Graphic.

To begin, you'll need to create a graphic to use as your studio's electronic proofing stamp. In an article for creativepro.com (How to Stamp Proofs with Your Own Brand) Pariah S. Burke showed the graphic he uses, and said, "If you want a proof label like mine, feel free to steal it." So we did. Below is an example file we created for this tip based on Pariah's example.

Example Proof Stamp.pdf

While our example file is a PDF, you can create graphics in a number of formats, including PDF, JPEG, Adobe Illustrator (AI), Adobe Photoshop (PSD), etc.

Step 2: Create a Custom Stamp in Acrobat.

To load a graphic as a custom stamp, choose "Create Custom Stamp" in Acrobat's Tools menu. The menu names vary slightly depending on the version of Acrobat you are using.

Acrobat 8: Tools > Comment & Markup > Stamps > Create Custom Stamp...

Acrobat 7: Tools > Commenting > Stamps > Create Custom Stamp...

In that dialog box, click Import (or Browse), and find the file you want to use as your new stamp. Click OK when you've successfully selected the image you want to import.

In the final dialog box, pick a category name (you might group all your custom stamps under a category that is named after your company), name the custom stamp, and then click OK.

Step 3: Apply Stamps to your PDF.

Applying the stamps to a PDF is easy. The quickest method is to select your stamp directly from the Acrobat Stamps menu. The category name you picked when you imported the stamp graphic now shows as an option in the Stamps menu.

If you will be applying stamps more frequently, or have a larger library of stamps to work from, the floating Stamps Palette may be more convenient.

Acrobat 8: Tools > Comment & Markup > Show Stamps Palette

To demonstrate how you might group a collection of stamps in the Stamps Palette, we pulled some examples from the fun Design Police stickers that we covered in another tip this week. While reviewing a PDF proof, you could grab any needed stamps and easily show your feelings about the design.

Enjoy.

Source: This tip was inspired by How to Stamp Proofs with Your Own Brand, an article at creativepro.com written by Pariah S. Burke. We owe a mention of thanks to Seattle designer Darlin Gray who sent us the heads-up for this great tip. Thanks Darlin!

Posted by Craig Swanson at 09:00 AM | Permalink

CreativeTechs is taking a different approach to professional training. We've organized our materials into dozens of smaller, bite-sized modules. The results are shorter, focused sessions, which let you get the training you need, without setting aside an entire day away from the office.

Download a PDF of our Training Brochure and see what upcoming workshops catch your eye. Then join us Wednesday and Thursday mornings for the fun:

CreativeTechs Training Feb08.pdf

Missed a good one? All our topics are available for one-on-one training. Email training@creativetechs.com or call 206-682-4315 to schedule a personalized training session.

Wednesdays: Creative Mini-Workshops

Each Wednesday, we provide a new 90-minute workshop on a wide variety of topics drawn directly from our real world experience supporting hundreds of creative teams in the greater Seattle area:

Wednesday, Feb 6: 9:30-11am — FreeHand to InDesign CS3.

Wednesday, Feb 13: 9:30-11am — FreeHand to Illustrator CS3.

Wednesday, Feb 20: 9:30-11am — Mastering Adobe's Pen Tool.

Wednesday, Feb 27: 9:30-11am — Using Adobe Bridge.

Wednesday, Mar 5: 9:30-11am — Acrobat: Interactive PDFs.

Wednesday, Mar 12: 9:30-11am — Using Adobe Lightroom.

Wednesday, Mar 19: 9:30-11am — Acrobat: Prepress with PDFs.

Wednesday, Mar 26: 9:30-11am — Font Management in Mac OS X.

Photoshop Thursdays: Non-Destructive Retouching.

New for 2008: Every Thursday morning, Photoshop guru, Jason Hoppe, leads an ongoing series of classes teaching non-destructive retouching techniques in Adobe Photoshop CS3. Done properly, you protect your full image quality as you make edits, while retaining flexibility when clients come back with later change requests.

Thursday, Feb 7: 9:30-11am — Photoshop: Color Correction.

Thursday, Feb 14: 9:30-11am — Photoshop: Power Cloning Techniques.

Thursday, Feb 21: 9:30-11am — Photoshop: Retouching Skin.

Thursday, Feb 28: 9:30-11am — Photoshop: Automating Photoshop.

Thursday, Mar 6: 9:30-11am — Photoshop: Digital Anomalies.

Thursday, Mar 13: 9:30-11am — Photoshop: Smart Objects + Shape Layers.

Thursday, Mar 20: 9:30-11am — Photoshop: Layer Effects.

Also Available: Personalized & Group Training.

In addition to the morning 90-minute workshops, all Jason Hoppe’s workshops are available for individual one-on-one training, or personalized group training sessions. Plus, because of how we've developed smaller, bite-sized modules, we can easily combine a variety of topics to fit your team's unique needs.

If you are interested in group training, or a personalized coaching session, email training@creativetechs.com

Posted by Craig Swanson at 05:29 PM | Permalink | Comments (0)

Over the years, our team fields lots of questions from clients needing to convert documents from one page layout program to another. For this tip we've compiled a number of utilities we've used and recommended.

Q2ID — QuarkXpress to InDesign

ID2Q — InDesign to QuarkXPress

PUB2ID — Microsoft Publisher to InDesign

PM2Q — PageMaker to QuarkXPress

PDF2ID — PDF to InDesign

MIF Filter — FrameMaker to InDesign

MIF Filter — FrameMaker to QuarkXPress

The full version of this tip includes some additional details for each converter, including pricing, links, etc.

QuarkXPress to InDesign — Q2ID

Right out of the box, Adobe InDesign can open and convert QuarkXPress 3.3 and 4.x documents. So if those are the only Quark files you need to convert, you don't need to buy anything extra.

If you need to convert QuarkXPress 5, 6, or 7 documents into InDesign, Markzware's Q2ID utility is ideal. The plug-in supports InDesign CS2 & CS3. In our experience, the Markzware converters do an excellent job.

Q2ID — QuarkXpress to InDesign Converter

Cost: $199
Developer: Markzware
Demo Available: No.

InDesign to QuarkXPress — ID2Q

ID2Q is an XTension for QuarkXPress that provides a quick and easy way to migrate your existing InDesign files into a new QuarkXPress document. The latest version works in QuarkXPress 6.1 or 7.x, and will convert InDesign CS3 documents and earlier.

ID2Q — InDesign to QuakXPress Converter

Cost: $199
Developer: Markzware
Demo Available: No.

Microsoft Publisher to InDesign — PUB2ID

PUB2ID is a plug-in for Adobe InDesign. It provides a quick and easy way to migrate Microsoft Publisher files into new Adobe InDesign documents. This plug-in works with InDesign CS2 & CS3, and converts MS Publisher 2002 through 2007. Sorry, we don't have a solution for going the other direction right now.

PUB2ID — Microsoft Publisher to InDesign

Cost: $199
Developer: Markzware
Demo Available: No.

PageMaker to QuarkXPress— PM2Q

This converter has been around for years, and had not been updated in some time. Most PageMaker users moved on long ago. Still if you have some old PageMaker documents you need to cover over to QuarkXPress, here is the tool. This XTension supports QuarkXPress 6 and can import Mac/PC PageMaker 4.2 through 7.1 documents.

PM2Q — PageMaker to QuarkXPress

Cost: $199
Developer: Markzware
Demo Available: No.

PDF to InDesign — PDF2ID

PDF2ID is and InDesign plug-in that converts every page in a PDF file to an equivalent page in the resulting InDesign document. This utility allows you to use PDFs as a conversion path for many programs that you would not normally be able to convert into InDesign format. This tool was the basis for our recent tip, Convert FreeHand files into InDesign using PDF2ID.

PDF2ID — PDF to InDesign

Cost: $249
Developer: Recosoft
Demo Available: Yes.

FrameMaker to InDesign or QuarkXPress — MIF Filter

This last filter is a bit different. The MIF Filter is a European tool that allows you to import FrameMaker MIF documents into Adobe InDesign CS2/CS3 or QuarkPress . Rather than buying the software, you pay for your conversion on a per-page basis. The price per page ranges between 0.35 - 0.18 EUR ($0.50 - $0.25) depending on the volume purchased. Conversion is charged only upon saving the document - if you don't like the results, don't save the document and there is no charge.

MIF Filter — FrameMaker to InDesign

MIF Filter — FrameMaker to QuarkXPress

Cost: Per-Page-Price
Developer: DTP Tools
Demo Available: Yes.

Source: This tip inspired by many client requests over the years. Most recently inspired by a Quark to InDesign conversion request from Turnstyle in Ballard. Our research into FrameMaker to InDesign conversion was originally inspired by a request from the in-hosue creative team at Aviation Supplies & Academics in Renton.

Posted by Craig Swanson at 10:57 AM | Permalink | Comments (0)

Last year we published a tip about Adobe dropping development and support for Macromedia FreeHand (Goodbye FreeHand. But is Illustrator Enough?). In that tip, we argued that most die-hard FreeHand users are happier and more productive switching to Adobe InDesign rather than Illustrator.

Since then, we've been looking for a method to help designers migrate their old FreeHand documents over to Adobe InDesign. Here is our best approach right now. Export your FreeHand files as PDFs, and use a new tool that converts those PDF files into fully editable InDesign documents:

Recosoft's PDF2ID Converter

The conversion is far from perfect. But if you are a designer who has spent years using Macromedia Freehand as a page layout tool, this is one way we've tested to help move those old files from FreeHand over to Adobe InDesign.

Download and Install the Trial Version of PDF2ID.

Recosoft's PDF2ID converter sells for $249, and is not going to be the right fit for everyone. So we recommend downloading the free demo and experimenting with a few of your files before investing in the full version. The demo allows you to convert a maximum of 10 files.

Recosoft's PDF2ID Trial Software Page

Below is a simple tutorial that walks you through the basics of converting your FreeHand files to InDesign using this tool.

Step 1: Export your FreeHand file as a PDF.

Open your original FreeHand document in FreeHand. Activate all the needed fonts, and confirm you have all the needed linked files. Then export the file document as a PDF.

In FreeHand, choose File > Export, and pick PDF as the format.

To prevent compression of the embedded images in your PDF, click on Setup in your export dialog box and set Image Compression to "None." This does not matter if you plan to relink to your original images after converting to InDesign.

Step 2: Open the PDF into InDesign using PDF2ID.

With the PDF2ID plug-in installed, a new "Open PDF File" option is added to the InDesign File menu.

Step 3: Adjust the PDF2ID Conversion Options.

There are a number of options you can control when converting PDFs into InDesign. We don't cover all those options here. Play with these settings a bit and get a sense of what works for your particular documents.

Step 4: Clean-up the resulting InDesign file.

The PDF2ID conversion is far from perfect. Plan to spend some time cleaning up the resulting InDesign files. You'll probably have to combine disjointed text frames, relink graphics to your original images, and adjust positioning of certain graphic elements.

The demo version of the PDF2ID utility allows you to convert up to 10 documents during the free evaluation. Make use of those free conversions to test this utility and see how much time it might save you when making the move from FreeHand to InDesign.

You'll have to make the judgement for yourself whether this converter is worth the $249 price tag. For some designers, I'm sure it is.

Source: This tip inspired by Jason Hoppe's fantastic workshop last week on migrating from FreeHand to InDesign CS3. This has been my favorite workshop so far this year. If you are a designer in the Seattle area, don't miss next week's follow-up workshop on migrating from FreeHand to Illustrator CS3. Our example FreeHand-to-InDesign converted file was generously provided by Seattle designer Katie Dolejsi.

Posted by Craig Swanson at 11:37 AM | Permalink | Comments (0)

Saturday was Groundhog Day. In a national media event, Punxsutawney Phil saw his shadow, leading the groundhog to forecast six more weeks of winter. And speaking of shadows...

Have you ever found yourself with a Photoshop image that has an object's shadow on an opaque white background, when what you need is that same shadow on a transparent layer. Read the full version of this tip for a simple technique to accomplish just that!

Before: Our Original Image.

Our example image shows a piece of medical equipment photographed on a flat white background.

Step 1: Mask Your Object on its Own Layer.

For this technique, we need the shadow isolated on it's own layer. In this example, the object has been isolated on its own layer using a Layer Mask. The background shadow had been partially recreated, keeping a close resemblance to the cash shadow in the original photo.

Step 2: Hide the Object, and Command-Click on the RGB Channel

If you Command-Click (Ctrl-Click in Windows) on any channel, Photoshop will automatically create a selection based on that channel. This is the key to our trick.

Turn off all layers except for your shadow layer. Command-Click on the RGB channel (or CMYK) in the Channels pane. This loads a selection based on the white areas in your channel (which will be the opposite of your shadow).

Note: If your image has a light gray shadow, you may not see a selection. Don't worry it should still work.

Step 3: Inverse the Selection, and Fill with Black on new Layer.

Now that we've loaded our shadow as a selection, we're almost done. First invert your selection (Select > Inverse). Create a new blank layer, and fill that selection with black (or whichever color you want your shadow to be).

Step 4: Finish Up.

That should be it. You should now have a full transparent shadow in place of your opaque white background. Clean up and name your layers, and you should be ready to use this image for whatever projects you have ahead.

Source: This tip inspired by a great production question last week from Jim Mannino at Landreth Studios in Seattle, regarding a project for the in-house creative team at Philips Ultrasound in Bothell.

Posted by Craig Swanson at 03:32 PM | Permalink | Comments (0)

A favicon is an icon you can design for your website that shows up next to the URL when someone visits. Think of it as a tiny visual business card for your Web site. Think of it as a tiny visual business card for your Web site. You can create one by visiting Genfavicon, a simple Web site who's only purpose is to generate favicons for you:

genfavicon.com

Once you've created your favicon.ico file, you'll need to upload it to the root directory of your website and add bit code in the header of your html files (Here's a simple favicon tutorial).

Source: This tip comes directly from James Dempsey's new The Graphic Mac. For an old-school tip on how to export favicon.ico files directly from Photoshop, we covered this back in Tips #25 How to add a Favicon to your website.

Posted by Craig Swanson at 01:27 PM | Permalink | Comments (0)