What would you create on the web if you didn’t have to worry about writing code? That’s (apparently) the premise behind Adobe’s new web authoring tool, code-named Muse. Built using Adobe Air, this cross-platform application will work on Mac, PC, and potentially on Linux as well. While in beta, it’ll be free to use. Plans will start at $15/month when 1.0 is released in 2012.

While I haven’t built anything with Muse (yet), I’m intrigued by it. Will you use Muse? Do you think it will help or hurt web design?

Using data sets and variables in Photoshop

This week I’ve decided to post something a little different.

Working with data in Photoshop (CS3+) is probably not something you’ve thought much about. In fact, I’ve only ever run into one case where using datasets and variables in Photoshop made sense to me, but once you know how to use them, you’re bound to find more and more reasons to use them.

This approach is a timesaver regardless of the amount of data you might have, but if you’ve only got a few lines of data to work with, creating each PSD by hand might save time compared to this method.

Practical Applications:

  • Mailing labels
  • Custom postcards, flyers, etc.
  • Creating ordered price or number-based images
  • And so on…

First, we need some data to work with. For this example, I’ve created a simple list of names and addresses in Google Docs. The first cell of each column is important. We’ll use these names when we define variables to work with in Photoshop later on. Once my spreadsheet is ready, I export the file as a CSV.

Figure 1. Example of demo data as seen in Google
Figure 1. Example of demo data as seen in Google
Your CSV should end up looking something like this.
Figure 2. Your CSV should end up looking something like this.

Once we have our data, we’ll need to create something in Photoshop that can take advantage of it. With a list of names and addresses we could create custom envelopes, postcards, name badges, you name it. For this example, we’re going to keep it simple and create a Galactic Empire email signature graphic/mailing label sort of thingy:


In the above screenshot you can see I’ve created a pretty basic PSD with the Galactic Empire Logo (Layer 1), five text layers and a plain white background layer. Now comes the fun part. Go to Image > Variables > Define. Select Name from the Layer dropdown.

Select Name from the Layer dropdown
Select Name from the Layer dropdown

We need to make sure that each column of data we have in our spreadsheet coincides with a variable. Select a Layer from the layer dropdown (such as Name). Then check the checkbox next to Text Replacement and set the name to Name, so it’ll match the column name from our spreadsheet. Continue doing this for each column/layer until finished.

Next, we need to create our Data Set.
Next, we need to create our Data Set.

Click the import button and it’ll open an Import Data Set window.

Next, we need to create our Data Set.
Figure 6. Select the CSV file you created.

Select the CSV file you’ve created. Make sure the checkboxes are checked. You’ll also want to make sure that you’ve already created your variable associations and the names match your column headings in the CSV. If they don’t match you WILL get errors.

Figure 7.
Figure 7.

You’ll now be able to select from the various Data Sets you’ve created and your PSD will get updated with the results. Once you click OK, save your document.

Now we’re turn each Data Set into its own PSD. Do this by going to File > Export > Data Sets as Files.

Figure 8.
Figure 8. Export data sets as files.

Select a folder for output. Set your naming convention. Click OK. In a matter of seconds you’ll have PSDs for every single data set.

Once you have a folder full of PSDs, your best bet would be to create an action that Saves for Web and then run a batch process that applies the action to each file. I’ll cover that in my next post.

Original posted on the OnWired blog:

CS5 is here.

Creative Suite 5 is here. I’ve had the pleasure of testing out CS5 for the past few months and I’m not exaggerating when I say it’s the best version yet. It runs blazing fast on my Mac mini (Intel Core 2 Duo 2.26GHz with 4GB 1066MHz DDR3). Features like Photoshop’s Content Aware Fill are not to be missed. Not sold on an upgrade yet? Grab one of the trials. If you skipped CS4, some of the interface changes are going to take some time to get used to. (Tabs are a productivity lifesaver!!)

How to be a Photoshop Bad Ass

Greg Rewis is the Group Manager, Worldwide Creative Solutions Evangelism at Adobe. He came to speak to the Atlanta Web Design Group about becoming a Photoshop Bad Ass. This post is a collection of tweets along with links to help add greater understanding to what was being discussed before and during his talk. I hope you find the recap useful.Continue reading “How to be a Photoshop Bad Ass”

Disable Javascript in Acrobat

acrobatFrom the Adobe Product Security Incident Response Team (PSIRT) blog:

“All currently supported shipping versions of Adobe Reader and Acrobat (Adobe Reader and Acrobat 9.1, 8.1.4, and 7.1.1 and earlier versions) are vulnerable to this issue. Adobe plans to provide updates for all supported versions for all platforms (Windows, Macintosh and Unix) to resolve this issue.”

To protect yourself from possible exploits, disable JavaScript in Adobe Reader and Acrobat:

  1. Launch Acrobat or Adobe Reader.
  2. Select Edit>Preferences
  3. Select the JavaScript Category
  4. Uncheck the ‘Enable Acrobat JavaScript’ option
  5. Click OK

Is CS4 worth the upgrade?

Is Adobe Creative Suite 4 worth the upgrade? Having been involved in the Adobe Creative Suite 4 Web Premium beta test for the better part of this year, I’ve had a good bit of experience using the new versions of Dreamweaver, Photoshop and Illustrator.

Here are just a few of the things that have stood out so far:

  • Better UI. I hated it when I first saw it, and I know that others are going to have that same reaction. But the new unified interface is consistent from app to app and is more customizable than ever before. You can quickly toggle between several default workspaces without having to restart the applications. (This was one of my peeves with Dreamweaver CS3. It supported “workspaces” to an extent, but changing it required restarting the program.)
  • Tabbed windows. I tend to work with multiple documents open at a time. The new tabbed windows allow you to see all the documents you’ve got open, easily switch from window to window, and easily sort them. Want to see all of documents you’ve got open and match their zoom level in Photoshop? It’s super easy now.
  • Speed. I tested CS4 out on two machines: a Dell Inspiron 1720 laptop running Windows Vista Ultimate with a 1.6Ghz Core 2 Duo and 3Gb RAM, and a Dell Dimension E510 running Windows XP Professional SP2 with a 3Ghz Pentium 4 HT and 3Gb RAM. I was able to keep several apps open at once on both machines and they were all quick and responsive.
  • Stability. Even in the prerelease versions I tested, CS4 was very stable.
  • Installation.  One of my biggest problems with CS3 was the installation process. CS4 installer has been GREATLY improved. What was once a 2-3 hour ordeal*, only took 35-40 minutes on the two machines I tested on.

This just scratches the surface. CS4 is a major upgrade, and it’s well worth the money in my opinion. In my next post, I’ll discuss some of the new tools and features available in CS4.

Thoughts on CS4

I’ll be speaking on September 23 at 6:30pm about Adobe Creative Suite 4 at the Columbia County Library in Evans, GA as part of the next Refresh Augusta meetup [info]. The presentation will cover what’s new, what I’ve thought about the Suite so far, and more. (As part of the meetup, Refresh Augusta will be giving away two copies of CS3 Web Design Premium, courtesy of Adobe.) Then, on September 24, I’ll be in Columbia SC at The State Newspaper give the same presentation to Refresh Columbia [info].

These presentations will come hot on the heels of Adobe’s planned unveiling of CS4 on 9/23 [info].

No Photoshop vs. Photoshop

Photoshop CS3 ExtendedWhy We Skip Photoshop vs. Why We Don’t Skip Photoshop – I think the lesson learned here is that teams work the way that suits them best. 37Signals has the luxury of being able to design for themselves, and has established a set of design standards that they can ripple throughout their products. Whereas at Blue Flavor – which is a business more similar to PowerServe, I’d imagine – Photoshop is an integral part of the design process that cannot be ignored.

I like the concept of sketching things down on paper and then going directly to HTML, but in most cases, that’s just not practical – especially if your goal is to design something that doesn’t look vanilla. What works for one person, one team, one company isn’t necessarily going to work for another.