Table of Contents for

Responsive Web Design with Adobe Photoshop

11. Remembering Etiquette

I almost quit.

A while back, I worked at an agency where the process was generally as follows: The marketing people would meet with a client at the start of a project and then relay some information to the creative director, who would have first dibs on designing the site. He’d make a few PSD comps and hand them down to me to quality-check, more or less, to see whether everything he was doing was achievable in code. As the web designer, I was the bridge between “creative” and development.

I probably don’t need to point out that my role in the process should have started long before inheriting a PSD, but even that didn’t bother me much at the time. The role came with enough freedom to change what I saw fit that I couldn’t complain too much. Prior to learning how to design in the browser, I was lightning-quick at making edits in Photoshop (I’d like to think I still am). It was a skill I took much pride in.

That’s why it surprised everyone that my involvement derailed every project timeline.

Why did we bolt down the tables so I can’t flip them anymore?

That’s why I almost quit. The time I would spend making sense of a PSD was equal to the amount of time I’d spend on actual design. I venture to guess you’ve been in a similar situation, inheriting PSDs from someone and forming 25 questions before you even touch a pixel. If you haven’t, count your lucky stars.

The friction between designer and developer—or, in this case, designer and designer—is enough to produce unhealthy angst and discord. You could follow all of the workflow advice in this book to the letter, but if you work on a team that allows the distribution of messy PSDs, you won’t be getting any more efficient any time soon. If you care about such things (and you must, to have read ten chapters about it so far), a toxic and inefficient process will have you looking elsewhere for employment.

Having thought I was the only one in this kind of situation, I made a text document that outlined all of the things I’d like to have tidied up prior to inheriting artwork. It wasn’t asking much for someone to name their layers, right? Before I clicked Send on a companywide email, I realized this would die the same death just about every other piece of internal documentation does. No, this needs to be taken more seriously. It needs to look more official. This has to be a website.

And so I created one. This is the origin story of the Photoshop Etiquette Manifesto for Web Designers (see Figure 11.1).

Figure 11.1 So it was, and is: www.photoshopetiquette.com

When we discuss etiquette, it’s typically framed around dinner table manners. Having etiquette means you’re proper, considerate, and dignified. Not having it means you’re sloppy, selfish, and, dare I say, immature. Etiquette (or the lack of it) in web design, specifically in Photoshop, has the same characteristics. You either can be mindful of the next person to inherit your file or can work with reckless abandon because you may think it’s quicker to do so.

What does having Photoshop etiquette look like? This chapter will dive deep into some examples, including best practices for file organization, layer organization, image and type considerations, using effects, and proofing your work. Don’t worry, we can all be better in this area of design, myself included. By the end of the chapter you’ll have a great reference for making some helpful adjustments and choices, and if you’re the type who’s already on top of things, you’ll have some required reading to pass around to your team.

Photoshop etiquette is critical to any team and any workflow. Here is a look at some reasons why.

Figure 11.2 Using folders in and out of Photoshop makes for easy scanning and findability.

Now, consider all the hands that touch said files. Creative directors, art directors, interface designers, front-end developers, clients...and the list goes on. The art of building websites involves many moving pieces between breakpoint-specific CSS or Retina versions of images. It’s not that RWD is inherently messy; it just demands that we support and consider devices and views we hadn’t before. Keeping everything organized requires discipline.

It’s not easy to stay on top of everything, but clarity in Photoshop should be non-negotiable. In other words, we have enough to worry about to then have to chase one another to interpret what’s happening in a PSD. RWD has only placed greater emphasis on staying organized and increased efficiency on our teams.

Without further ado, let’s break down what it good Photoshop etiquette looks like.

Product-interior-v2-2-DO_NOT_USE_THIS_ONE.psd

We designers are pretty funny if you think about it. In an effort to aide communication, we try to convey the intent of our PSDs through the field name (see Figure 11.3). Why do we make it so hard on ourselves? Is “Final-v4” really final? Is any file meant for the ever-changing Web “final” anyway? Should we have to note which files are meant to be used and which ones not through suffixes like “DO_NOT_USE” or “OLD”?

Figure 11.3 Do the red labels (top) mean “danger” like I think they do, or is Latest_Latest accurate too? Instead, let’s keep it simple (bottom).

Commit to establishing clarity in your filenames. Simplify any files that you and your collaborators need: “Project-View.psd.” That’s it.

You should also resolve to archive any artwork you don’t need instead of keeping it around with a funky file name. If Project-View.psd needs updating but you don’t want to lose the first version, create a copy and store it in a folder called “_archive” or similar. This practice will help someone inheriting a file structure find what they need quickly and have confidence that they’re opening the right PSD.

Similar to packaging InDesign files, you should include a folder of every asset that didn’t find its origins in the PSD. My recommendation is to store this folder in the same directory as the PSD (see Figure 11.4).

Figure 11.4 Needle-in-a-haystack asset organization (top) is a questionable practice. Tidy it up with a dedicated assets folder.

In doing so, you’ll circumvent having to stop what you’re doing to find the stock photo in your Downloads folder. Win-win.

The easiest way to ensure all your artwork is on a file share is to work directly off of one. You will run some risk of losing your work, just as you would be if your computer went down unexpectedly. At least on the file share you (typically) have greater assurance of a backup. Even more reliable is using version control, such as Git and a service like GitHub, to keep all your files up-to-date and accessible.

Working locally and remembering to upload files occasionally is hard but not impossible. It helps to set yourself an alert for the end of the day.

If you’re looking to take some baby steps with etiquette, do these first. Trust me, they make a world of difference.

Instead, try to be deliberate with every layer name in your document. If it’s a photo, don’t just name it “photo.” Tell your collaborators which photo. If it’s a button, “Shape 1” isn’t clear enough; there may be 25 other shapes nearby. Consider naming the foundation of an efficient collaborative workflow and build upon it by naming accurately.

Similarly, attempt to name assets for their intended use in an interface. If a background belongs to a footer, why not name the layer “footer-bg”? If you recall how Generator works to take layer names and produce files, incorporating a layer’s intended use into its name makes this a no-brainer. Name it “footer-bg.jpg” and save yourself the work of renaming extracted assets later (see Figure 11.5).

Figure 11.5 We can do better than this (left). Show some pride in your craft by naming your layers (right).

A common argument against naming layers is that it takes too much time. While there’s some truth in that, I’d argue the time it takes you, the originator of the PSD, to name your layers is but a fraction of what it takes someone else, who’s unfamiliar with your artwork, to identify and name them. Not naming them at all would be downright inefficient when you’re trying to find things later, wouldn’t it?

Groups are the best way to group and organize content, so failing to include them in a PSD makes your lack of organization apparent. Grouping by component gives someone the option to make the grouped layers visible/invisible or move them as a unit when they need to (see Figure 11.6). Ungrouped layers tend to be quite difficult to corral, especially when two layers of a component may be distant in the layer panel order.

Figure 11.6 Opening a PSD should read like a table of contents.

While you’re at it, consider globalizing shared components and masks as best you can. Trying to maintain five copies of a header can be exhausting if it never changes, so keep it in a group above and away from content that shifts appearance. The same can be said for masks: There’s no reason to duplicate a common mask across ten layers. Instead, place the mask on the group and allow it to cascade down to its contents.

Unless your intent is to toggle visibility to indicate states or behaviors of a particular component, try to let go of any unused layers. All they end up doing is cluttering the Layers panel and confusing someone as to their role. You may have some very good ideas hiding behind the canvas, so document them elsewhere if you can. But by no means keep unused layers hanging around for someone else to figure out what to do with.

Still unconvinced? Do it for performance’s sake: The more layers you have, the slower Photoshop runs. A faster Photoshop should be incentive enough to trim down those layers by cutting the fat of unused ones.

Unfortunately, as a composite gets more and more layered and deep, the less we tend to consider someone else needing to make sense of it. Here are a few things we can do to change that.

For example, if a photo has an unwanted artifact you want to remove, using the Eraser tool would cause irreparable harm to the source. The only option to undo such edits is to hang onto the original asset and include it in the PSD again. Instead, use a mask, which could be hidden or edited later and isn’t permanent (see Figure 11.7).

Figure 11.7 Make edits and adjustments on a mask or separate layer than the original (left) instead of directly on it (right).

Other nondestructive techniques include not rasterizing vector shapes and using adjustment layers.

Always be thinking about how your complex layering or photo manipulations are exported. If they need to be combined and flattened prior to extraction, let the next person know about it. If you do opt to use blend modes in CSS, it’s still important to be able to export an accurate fallback image to achieve the effect in browsers that lack blend mode support.

Extract Assets proved to be a handy tool in Chapter 9, and here you see that the presets for including @2x, @3x, and beyond make for easy production. Whether you choose to upscale or downscale your work, having a complete library of assets and relative sizes has never been more important.

Often is the case that co-workers have slightly different versions of fonts (be they from different foundries or release dates), such as Franklin Gothic on my computer and Franklin Gothic ITC on someone else’s. Not only may their appearance be different, but the name is different enough to warrant Photoshop throwing a missing font dialog. In an ideal situation, a company buys the requisite amount of licenses for a font and distributes them among the design team, ensuring no conflict. However, with the amount of font scouring most of us like to do, it’s highly unrealistic to keep to synced set of fonts across all computers.

Some basic courtesy is required on the part of the PSD creator. If a font can be shared (no license restrictions), include it local to the PSD when you hand it off. If a font needs a license, consider using one that doesn’t—or, at the very least, include a note with instructions for finding it.

Figure 11.8 Don’t do it. Step away from the Free Transform tool.

From a technical standpoint, stretching type in CSS isn’t easily achieved. There’s most likely a backward, obscure way to do it. But again, would you really want to even if it were easy?

Figure 11.9 Not much can be gleaned from this joint text box (left). On the other hand, separating like elements makes the task easier (right).

The easiest remedy is to resize text boxes immediately after you’re done entering and styling text. Much like renaming layers, you could opt to do so just prior to handoff, but it’s a discipline probably best practiced in the moment.

Equally important, keeping your text in separate boxes will help someone looking to extract quick style information. When you combine a headline, subheadline, and body text inside the same block, the font, size, leading (line-height), color, and other characteristics show blank in the Character panel (unless they share any of these values). It takes an extra step of selecting individual text inside the box to determine these values, and while achievable, it’s certainly not convenient. You can save someone time and clicks by keeping similar type in its own text box.

A white square on the canvas shows up as a white thumbnail in the Layers panel, making it easy to find. The worst thing you can do is use a Color Overlay effect to change it to a red square. The thumbnail color won’t update, and someone will be hopelessly glossing through your layers looking for something red, never to find it (Figure 11.10).

Figure 11.10 Try not to fool someone by showing them one color in the thumbnail but switching it on the canvas.

If possible, change the color fill of a shape instead of applying a filter. Changing the fill will update the thumbnail, and everyone will be happy. The idea here is to try to be as accurate as possible with thumbnail previews, whether you employ Color, Gradient, or Pattern Overlays. Those hints of color make scanning hundreds of layers that much easier.

When a pattern is even one pixel off, the effect of a seamless background is destroyed. If the task of a developer or designer is to go in and extract such backgrounds, making them fix seams is less than considerate, don’t you think? Nail the execution of tileable images so someone else won’t have to.

Figure 11.11 Though the Layer Effects panel has the appearance of a wish list, don’t treat it like one.

Historically, the defaults for layer effects have been incredibly gaudy, which was actually a good thing. They emphasized the effect to make its appearance unmistakable, so you knew you were using an effect. Additionally, the appearance was so exaggerated that you had no choice but to edit it to a more tasteful value.

Photoshop CC dialed back such exaggerations in favor of making the defaults fairly tasteful and subtle. While you might be tempted to use their presets, refine the settings to the precise demands of your design instead. A PSD inheritor will appreciate your eye for purpose and consistency, knowing that a 15px blur on a drop shadow was your choice instead of Photoshop’s.

It’s always wise to give a your PSD one last check before sending it on its way.

Figure 11.12 Whoops. Missed that one, huh?

Errors within the body copy are less noticeable, and while it’s usually understood that Photoshop text isn’t final, typos don’t communicate the much care for your craft.

Figure 11.13 A major faux-pas: leaving the watermark in a photo used on a live site

There are some pretty hilarious, but serious, examples out there of finished artwork with an “iStockPhoto” watermark that made it to production. Make sure this doesn’t happen to you by staying on top of purchased assets and updating your PSD.

It’s up to you to be familiar with browser support for the effects you display and the assets you export. Not all browsers support SVG, so you’ll need to include a fallback PNG. Not all browsers support CSS such as rounded corners and alpha transparency, so you’ll need to have a plan for those as well.

Instituting etiquette on your team should prove to be beneficial. Getting everyone on board isn’t always easy, but if you want to be master of your craft, the details of a PSD are a good place to start improving. Consistency, clarity, and intent are the elements you need to pour into Photoshop in order for your work to speak for itself.