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:

datasetimg3

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: http://onwired.com/901/

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.

Basic Alternatives

Let’s face it, Adobe Photoshop CS3 isn’t ideal for every task. It’s great at a lot of things, but often I find that it’s too much software when it comes to handling basic tasks.

For red eye removal, cropping basic image tweaks/adjustments, I use Google’s Picasa. Its tools are easy to use, provide pretty consistent results and automatically save backups of my original files when I make changes. The fact that it doubles as a photo manager is a bonus. You can easily send photos via, post them to Picasa Web Albums, make cd backups and more. And did I mention it’s free? The only downside to Picasa is that it is PC-only.

For online image editing I use Picnik. It works with Flickr and Facebook, so I was able to link my accounts on those sites with my account in Picnik and make adjustments to pictures I’ve already uploaded to those services. The site is a little slow, but it’s great when you’re wanting to make basic adjustments to photos. Right now Picnik is still in beta, but eventually they will be offering a pro version of the site that will let you do a lot more with your photos.

For everything else I use Photoshop.

More on Photoshop Express

Man, the Adobe MAX conference has unleashed a flood of information on all kinds of new applications and technologies Adobe is working on. One of the things I am most excited about is Photoshop Express. Photoshop Express is a Flash-based image editor that runs within a web browser. CNET has new screenshots and additional details on Photoshop Express. Hopefully we’ll be able to play around with it soon. (via John Nack)

In the meantime, if you’d like to check out a great online image editor – that’s compatible with Flickr, Facebook, and more – might I suggest Picnik? I’ve been using it off and on for a couple of months now and the technology is very promising.

Add IAB Ad Sizes to Photoshop CS3 Defaults

  1. Go to: C:\Program Files\Adobe\Adobe Photoshop CS3\Required
  2. Open: Default New Doc Sizes.txt
  3. Add the following somewhere in the file:You can also do this in CS3. A few IAB ad sizes are actually included by default:
    ; Interactive Marketing Unit (IMU) ad formats, defined by the
    ; Interactive Advertising Bureau, <http://www.iab.net/>
    
    "Medium Rectangle, 300 x 250"	300	 250	pixels	screen dpi RGB 8 1.0
    "Rectangle, 180 x 50"		180	  50	pixels	screen dpi RGB 8 1.0
    "Leaderboard, 728 x 90"		728	  90	pixels	screen dpi RGB 8 1.0
    "Wide Skyscraper, 160 x 600"	160	 600	pixels	screen dpi RGB 8 1.0

    You can replace those entries with this to get all of the default IAB ad sizes into Photoshop CS3:

    ; Interactive Marketing Unit (IMU) ad formats, defined by the
    ; Interactive Advertising Bureau, <http://www.iab.net/>
    
    "Button 1, 120 x 90"		120	  90	pixels	screen dpi RGB 8 1.0
    "Button 2, 120 x 60"		120	  60	pixels	screen dpi RGB 8 1.0
    "Full Banner, 468 x 68"		468	  68	pixels	screen dpi RGB 8 1.0
    "Half Banner, 234 x 60"		234	  60	pixels	screen dpi RGB 8 1.0
    "Half Page Ad, 300 x 600"	300	 600	pixels	screen dpi RGB 8 1.0
    "Large Rectangle, 336 x 280"	336	 280	pixels	screen dpi RGB 8 1.0
    "Leaderboard, 728 x 90"		28	  90	pixels	screen dpi RGB 8 1.0
    "Medium Rectangle, 300 x 250"	300	 250	pixels	screen dpi RGB 8 1.0
    "Micro Bar, 88 x 31"		88	  31	pixels	screen dpi RGB 8 1.0
    "Rectangle, 180 x 150"		180	 150	pixels	screen dpi RGB 8 1.0
    "Skyscraper, 120 x 600"		120	 600	pixels	screen dpi RGB 8 1.0
    "Square Button, 125 x 125"	125	 125	pixels	screen dpi RGB 8 1.0
    "Square Pop-Up, 250 x 250"	250	 250	pixels	screen dpi RGB 8 1.0
    "Vertical Banner, 120 x 240"	120	 240	pixels	screen dpi RGB 8 1.0
    "Vertical Rectangle, 240 x 400"	240	 400	pixels	screen dpi RGB 8 1.0
    "Wide Skyscraper, 160 x 600"	160	 600	pixels	screen dpi RGB 8 1.0
  4. Restart Photoshop CS3.
  5. The new IAB ad sizes will be available when you create a new document, and choose the Web preset.

Installing CS3 Web Premium

UPDATE: This article may be out of date. Additional information on installing CS3 is now available (Thanks to Barry Hills at Adobe!). Please read through the article “Additional Information on Installing CS3” before attempting anything on this page.

Adobe Creative Suite 3A brief disclaimer… The following process enabled me to install Adobe Creative Suite 3 Web Premium after more than a dozen different attempts to install the Suite on two different computers. It may or may not work for you. Before installing new software or changing your system configuration it is ALWAYS a good idea to BACKUP your current configuration before making changes. Having said that…

UPDATE: You may need to adjust the permissions on some Registry Values in order to get CS3 to install. To do this, you’ll need to login as Administrator on your system. These keys have permissions that don’t allow anyone to write to them. Logging in as Administrator will allow you to override this. (Being logged in as a user with Administrator privileges will not work.) To access your registry editor, go to Start > Run > regedit The following registry keys were identified while trying to install Acrobat 8 Professional…

Before making changes to any of these value, I highly suggest backing up your registry.

  • \HKEY_LOCAL_MACHINE\Software\Classes\AcroIEHelper.AcroIEHlprObj\CLSID
  • \HKEY_LOCAL_MACHINE\Software\Classes\CLSID\{06849E9F-C8D7-4D59-B87D-784B7D6BE0B3}\InprocServer32
  • \HKEY_LOCAL_MACHINE\Software\Classes\TypeLib\{5F226421-415D-408D-9A09-0DCD94E25B48}\1.0\FLAGS

This installation technique comes from an idea presented in an Adobe TechNote for installing Dreamweaver CS3 in Selective Startup Mode on Windows XP. I sincerely want to thank Jean who mentioned this technique on another blog post of mine (link).

Before you start, I highly suggest copy the complete installation DVD to your computer. Trust me, this will cut your install times in half. (You can do this by going to My Computer, selecting the DVD, click on the icon and Ctrl+Drag the disc to your desktop. It will copy the entire disk to your desktop.)

  1. In Windows XP, click the Start button and select Run.
  2. Type msconfig in the Open field. This will bring up the System Configuration Utility dialog box.
  3. Under Selective Startup, deselect all of the check boxes except for Load System Services. Leave Use Original BOOT.INI selected.
  4. Click the Services tab and click the Disable All button to deselect all of the check boxes. There will be a few check boxes that cannot be deselected, like DCOM Server and Remote Procedure Call. Leave those selected.
    cs3-install-001.png
  5. Still in the Services tab, enable Windows Installer.
  6. Ignore the other tabs.
    cs3-install-002.png
  7. Click OK and restart your machine when prompted.
  8. After restarting into Selective Startup mode, install Creative Suite 3 Web Premium.
  9. Once Creative Suite 3 Web Premium has been installed, run msconfig again and specify Normal Startup Mode.
  10. Restart the machine back into Normal Startup mode and see if the problem with Creative Suite 3 Web Premium has been resolved.

Installing software shouldn’t be this hard. My problems stemmed from having tried out the Photoshop CS3 Beta, and I knew that I was using unproven software that could cause future problems… Using this process, I was able to successfully install Creative Suite 3 Web Premium on my system. It succeeded where every other technique had failed. Hopefully it will help you get CS3 up and running on your system as well.

Unacceptable

component-install-failed

It’s 12:30am, and I’m giving up on trying to install CS3 for the night. I’m tired and frustrated. Updating software shouldn’t be this difficult, nor should it take as long as it does. Just installing the smallest app, Contribute CS3, takes over an hour because of all of the “Components” that need to be installed. This is complete and utter nonsense.

When I upgraded from Photoshop 7 to Creative Suite I didn’t experience any problems. When I upgraded from CS to CS2, I experience no problems. Now, because I – like so many other people – decided I’d like to try out a Beta application from Adobe, I’m getting screwed out of hours upon hours of my time – because their software simply doesn’t work like it should.

I expect more from Adobe, and frankly this situation is making me seriously reconsider upgrading the rest of the designers in our office.

Tomorrow morning I’ll need to spend some time trying to make sure CS2 works like it should. I have a feeling it’s going to be a while before I waste any more time trying to install CS3.