It never fails. As UX designers, we're deep into a project, and the time comes to incorporate the client's images—all that carefully conceived and often very expensive branding that is part of a company's public face. We've requested that the project manager track down the logos, web banners (often called "hero images"), and other corporate images for the new design, only to be met with the puzzled question: "Can't you just grab them from the web site?"  

Fair enough question. Most people—even web developers—deal only with derivative web images, not the original images files used to produce them. Where are the originals, anyway?

Why do they have such weird file extensions? And why can't the designers just Photoshop the images that are already on your website? Is it really such a big deal?

Yes and no.

If you're a project manager or architect/engineer with designers on the team, it's not your job to keep up with graphic file standards. But you do need to know that they exist and that you will need to provide original files to your designers in order for them to complete their work. Your designer will be able to help you determine what types of files you need to ask for (usually from your firm's marketing department).

How Graphic Files Work

Who doesn't love a big, tasty sandwich—say, a toasted sourdough bun layered with your favorite thinly sliced meats and cheese, topped with lettuce, tomatoes, maybe a few onions and peppers, and a generous dollop of tangy, decadent dressing?

Now imagine a picture of that same sandwich. Not quite the same, is it?

Graphic design software enables designers to build your project files the way that the corner sandwich shop builds your lunch—in layers from the bottom up. The original files contain all the layers, just like the sandwich. During this stage, we have almost unlimited choices. We can substitute provolone for cheddar, ham for turkey, and mustard instead of mayo. We can start with rye bread, make a low-carb lettuce wrap, or add on double meat.

The images on your website are reduced and flattened into a single layer from the original files. They are a representation of the originals in the same way that a picture of a sandwich represents the real thing. We can see how the "sandwich" was made, but all the magic of Photoshop won't let us edit the text or adjust the images for the new design. Once the file has reached this stage, all we can do is look at it (and feel hungry!).

The List

Why waste time and money going back and forth with your designer trying to hunt down the right files? The exact file types your designer needs depend on which design software was used to create the asset. Here is a list of tips that you can use to work with your designer to make sure you know what to request from your marketing or creative team. Remember, we love to work with you to find the easiest way for the design process to proceed smoothly.

Adobe Illustrator Files (file extensions = .ai, .eps)

• What file format (.ai or .eps)? Your company may have used an older (or newer) version of Adobe Illustrator to create the original files. In some cases, the .ai files may be somewhat incompatible between versions, but .eps files should work.

• Request font files used inside the .ai/.eps. With thousands of fonts out there, the designer may not have the exact font used to create the text elements in your graphics. If the font files are no longer available, please ask that the files be provided with "outlined" text so that it will at least appear correctly on the designer's computer. (In Illustrator, files saved as .eps will have outlined text.)

Adobe InDesign Files (file extension = .indd)

• Package the InDesign files. The InDesign software allows a file to be saved as a package, so that all the artwork and fonts are included and are easily accessible to the designer.

• Include a .pdf in the package. By exporting the original design into a .pdf and including it in the package, the designer can see without a doubt what the original design looked like.

Adobe Fireworks Files (file extension = .png)

• Include font files. As with Illustrator, Fireworks does not embed the font files. Please request that the font files be included with the .png originals or, if they are no longer available, that the .png be saved with outlined text.

Adobe Photoshop Files (file extension = .psd)

• All Photoshop files should be delivered as layered .psd source files. A flattened file without the original "sandwich" layers is much less useful to the designer. Depending on what you need, the designer may have to spend valuable time re-creating the layers that your organization already paid for once.

• Named layers and layer groups are extremely helpful. If possible, ask your creative team to provide layered files with logical layer and group names. This way your designer can grasp the organization of the file layers and groups quickly and won't have to spend time figuring out a random naming scheme.

• Using smart objects for element groups. When pieces of the design can be grouped together, like a site header or footer, creating a smart object will clean up the layer structure and make it easier for a designer to quickly get into the element to make edits.

• Include font files used in the .psd. As with other Adobe products, include the original font files whenever possible.

• Retain all guides and grid files that might have been used in the design. Photoshop's visibility features are invaluable to designers in maintaining the balance in a design and making sure it is presented as originally intended.

The Final Word on Files

Sound intimidating? Not to us. Let me tell you a little secret—we designers love to geek out over these kinds of details. Just jump in and consult us about the design programs that were used to create your original files and we’ll let you know what we need from you to meet our shared goals.