" /> CreativeTechs Tips: May 2006 Archives

Main | June 2006 »

May 30, 2006

Examples of Eye Tracking tests at Seth Godin's Blog.

Seth Godin has posted some eye tracking test results for Squido -- a web service he helped found that allows individuals create and maintain specials "lens" that focus on particular content.

You can view the raw unedited results in this YouTube video, or jump over to Seth's full blog entry "What I learned from eye tracking" and read his takeaways and thoughts.

The blue dot shows where a user is focusing their eyes. It it interesting to watch how different users visually scan through a page and decide what to click on next.

I find this video fascinating to watch. I'm attracted to the idea of eye tracking. It is an expensive service, but if you design and maintain a valuable website eye tracking can yield some important information about how people interact with your design.

This example project was created by Etre. You can also watch a short 2-minute video that shows how eye tracking studies work.

May 28, 2006

Check out the Accidental Creative podcast.

AccidentalCreative.gifFor many designers the Accidental Creative might be the first and only podcast you actually listen to.

The Accidental Creative podcast is produced semi-regularly by Todd Henry. Each audio essay is 7 to 15 minutes in length and focuses on challenges common to many creative pros.

Past essay topics include: What do you do when you're creatively empty? How does mediocrity creep into a creative organization? Do you feel pushed along by your work, or are you ahead of it?

iTunes Link: The Accidental Creative.

Todd also produces two other related podcasts. Each exploring the world of professional creativity from slightly different perspectives: The Creative Leader features longer discussions about leading creative teams; and Creative Pops with quick one-minute creative insights.

iTunes Link: The Creative Leader.

iTunes Link: Creative Pops

We've created a full index of the past podcast episodes below. Browse through the collection and listen to a couple topics that catch your interest. A relaxing way to spend a long Memorial Day weekend.

The Accidental Creative:

#1: Introduction.
#2: Dissonance.
#3: Immersion.
#4: Input.
#5: Judgement.
#6: Book Report.
#7: Machines.
#8: Clarity.
#9: Burden.
#10: Start.
#11: Make.
#12: Perspective.
#13: More Book Report.
#14: Creative Inversion.
#15: The 3.
#16: Rhythm and Work.
#17: Finding Your Voice (part 1).
#18: Why?
#19: Alone.
#20: Fear.
#21: Find Your Voice (part 2).

The Creative Leader:

#1: The Role of the Creative Leader.
#2: Clarity Quotient.
#3: Interview w/ Jerry Rushing of Northstar Consulting.
#4: Systems (part 1).

Creative Pops:

#2: Sleep
#3: Novelty vs Creativity
#4: Record
#5: Workspace
#6: Questions
#7: Assumptions
#8: Schedule
#9: Input
#10: Tools
#11: Your Turn
#12: Le Cirque

May 21, 2006

Shift-Tab Hides all Adobe Palettes Except Toolbox.

Most designers know that tapping the Tab key is the quick way to temporarily hide all open palettes in Adobe Photoshop, InDesign or Illustrator. Very handy when your design is obscured by too many windows.

Even more handy: Press Shift+Tab and you can keep your Toolbox and Options bar, but hide the other palettes!

This is one of those basic tips we'd normally expect everyone to already know -- except we didn't! Somehow over years of working with Photoshop we'd missed this simple Shift-Tab finesse. So this tip is dedicated to all those Photoshop, InDesign or Illustrator users who (like us) somehow missed this along the way.

Source: This tip inspired by Brian Wood's class materials from the Photoshop Immersion class at eVolve computer graphics training in Seattle.

Browse maps in 3D with Google Earth.

Google Earth is a free utility that lets you search for nearly any location in the world, then shows you the location in 3D. For example, enjoy a virtual 3D tour of downtown Seattle starting at the CreativeTechs office (although 3D New York is much more interesting).

Google Earth gives you driving directions, maps, and statistics about the area, and lets you zoom and swoop around the world in real time. It can also overlay an amazing amount of information, including roadways, political boundaries, points of interest, local amenities, and information from other Google Earth users. You can also add your own notes.

Available at earth.google.com.

Source: This tip comes from the February 2006 issue of Design Tools Monthly, a newsletter for Macintosh-based graphic designers that summarizes tips and news from a wide number of magazines and websites. CreativeTechs clients with a Priority Support Relationship can download a PDF of the latest issue of Design Tools Monthly from our Members Only website.

May 14, 2006

How to use scanned money in Adobe Photoshop.

The fun part of this week's tip is our source. Check out this energetic Photoshop tutorial from Deke McClelland.

Adobe adds algorithms to Photoshop that prevent users from opening or printing scanned money. While we've been aware of this feature for quite a while, it has taken on the character of an urban legend, because in a quick poll of designer clients, we couldn't find anyone that had actually tried it.

Testing The Money Scanning Legend.

CreativeTechs put on our MythBuster hats to put this claim to the test: We slapped down a fresh new $20 and scanned it into Photoshop. Presto the warning of legend:

This application does not support the printing of banknote images.

Scanning money is not illegal if you follow the rules. Visit RulesForUse.org and select a country for the limitations on using reproductions of various currency. So how can you open a scan of a $20 in Adobe Photoshop?

The answer turns out to be pretty easy: Open your scanned money in Adobe ImageReady first. Click the “switch to Photoshop” button at the bottom of the toolbox and you are back in Photoshop with your money. Easy when you know the trick.

dekePodSource: The fun part of this week's tip is our source. Check out this energetic Photoshop tutorial from Deke McClelland: dekePod Episode 1: It's your Money... Scan it! This is the pilot edition of Deke's new dekePod video podcast. We're looking forward to seeing what comes next. Want to read more about dekePod? Read an interview with Deke at O'Reily Digital Media. Or subscribe to dekePod on iTunes.

MythBusting Note: It turned out to be harder to get a screen capture of our "banknote" warning message than we originally expected. A $10 bill opened in Photoshop just fine. A $100 bill did too. It took a quick trip to the ATM to find our problematic $20 bill before we could reproduce the needed error.

May 13, 2006

What is a good microphone for podcasting?

Two months ago we ran an apparently popular tip on Creating Quick Voiceovers in GarageBand 3. We've received a lot of questions since then about the best microphone to use for a simple voiceover.

We can't quite declare a "best microphone." But if you are looking for an inexpensive way to record video tutorials, GarageBand voiceovers, or your own podcasts, here is our recommendation: Go with one of the Plantronics DSP headsets with a USB connection. These provide good voice recording, and are quite affordable. They plug right into your computer's USB port. Easy.

Two models we've used in our QuickTIme video tutorials:

Plantronics DSP-400 USB Headset [$35].
Plantronics DSP-500 USB Headset [$45].

The DSP-400 folds down for easy portability while the DSP-500 is a bit more substantial (the DSP-500 is apparently the mic of choice for at least one large video tutorial company).

Want to hear for yourself? We've got sound samples on the blog version of this tip for 6 different microphone options.

Sample Sound Tests:

The following recordings come from a handy review by Aaron Shaffer. For each mic he recorded the phrase, "Bob's cat bravely but politely picked seven savory chocolate flowers" which covers the most important articulation sounds.

We've taken Aaron's recordings and separated them into individual clips to make it easier to listen to particular microphone models.

iBook Internal Mic:

Plantronics DSP-400 USB Headset [$34.89].

Marshall MXL-990 XLR Phantom Powered Condenser [$69.99].

Plantronics Discovery 640 Bluetooth Headset [$89.99].

Olympus DM-10 Digital Voice Recorder [$135.94].

Heil PR-40 XLR Dynamic Mic [$269.99].

Source: This tip inspired most recently by a question from the in-house creative department at Costco.

Please Note: The product links in this article are affiliate links at Amazon.com. By purchasing products with our affiliate link, you're helping support our efforts here at CreativeTechs. If you'd rather not, please go to www.amazon.com directly.

May 07, 2006

Prototype Product Packaging in Photoshop CS2.

Are you working on a product packaging job? Here's a way to combine digital product photography and Adobe Photoshop CS2 to create quick virtual prototypes. The process is fairly easy once you understand the technique, and can be used for some pretty remarkable results.

Step 1: Photograph your product alone, and with a reference grid.

Photowrapa_1

In our example, we took two pictures of our blue medicine bottle. The first photo is the product photo we'll wrap our label around. The second photo includes a cut-out grid that will be used as a visual reference.

We created the grid in Adobe Illustrator, printed it on a laser printer and trimmed it down. Be careful not to change the angle or position of the camera or bottle between these two photos.

Step 2: Place the Illustrator grid file as a Smart Object, and Warp.

Photowrapb_1

Here's the magic. In the first step we photographed a reference image with our placed grid pattern. Now we open that image in Photoshop -- and place the original Illustrator grid as a new layer.

You'll need to group that placed grid into a new Smart Object before you'll be able to apply the warp command (Layer > Smart Objects > Group into New Smart Object).

Now your grid is ready to be warped into position (Edit > Transform > Warp). Work with Photoshop CS2's warp tool until you've matched the reference photo exactly.

Finally, replace the underlying bottle image with your original product photo -- make sure to line it up exactly. We now have a Smart Object that has been carefully warped to the precise shape of our product.

Step 3: Place your label artwork into the warped Smart Object.

Photowrapc_1

We are almost done!

Double-click on the warped grid in the layers palette. A separate window opens showing the contents of that Smart Object. Place your label artwork into this document.

In our example we placed a label we designed in Illustrator. This artwork comes in as an additional layer in our Smart Object. If we closed that Smart Object window, our logo will be warped onto the bottle with the grid still visible beneath it. However since we don't really need the grid anymore it is probably easiest to turn off that layer before we close up our window.

Voilà! Add a touch of shadows and highlights and we have a pretty decent prototype of our new label design to show our client. Plus, because this technique is built with a Smart Object, we can continue to open and refine our label design as often as we like.

Photowrapcbqt_1 Want to see a QuickTime tutorial of this technique in action: Photoshop Virtual Prototype Tutorial.

Source: This tip inspired by a similar technique in Russell Brown's Photoshop CS2 Tips & Techniques. Doctor Brown is an incomparable Photoshop showman. If you have an opportunity to catch his live show, do so.

An 80's love song about web standards.

Who remembers the 80's band, Breathe?

One of the original band members now owns a web development company, and has re-recorded their hit "Hands to Heaven" as a loving tribute to the perils of web development. If you are a web designer who was in school in the mid 80's, this MP3 might hit a few chords for you:

Hands to Heaven: The CSS Edition.

Source: Marcus Lillington is now one of three founders of Headscape, a UK web design firm founded in 2002. Marcus co-hosts the boagworld.com podcast to whom this song is dedicated. Read the original article and some lyrics in the boagworld blog.

Here are some of the lyrics:

The supervisor rants. He says "This website's pants! I want my clicks improved by Friday!"

I hit the URL. It's like the bowels of hell. God give me strength. It's just not my day.

So raise your hands to Boag and pray that we can fix this website today.

Tonight I need your CSS, coding in the darkness. From now on no more tables nest; you will meet web standards.

The source code makes me weep. There's tables fifteen-deep. In Netscape 6 it looks like garbage.

The METAs say this turd was made with MS Word. With every click I find new carnage.

So raise your hands to Boag and pray that we can fix this website today.

Tonight I need your CSS, coding in the darkness. From now on no more tables nest; you will meet web standards.

I guess I'll have to start from scratch - then I can kiss this piece of trash goodbye...