The Lost Art Of Design Etiquette

Advertisement

Endless layers in Photoshop. Overstuffed image folders. That jQuery plug-in that has 12 files associated with it. Hundreds or thousands of individual pieces go into making a website. No wonder we go off the deep end when we can’t find a closing div — er, section tag. We work with a ridiculously large number of things, and how we organize them (or choose not to) is often left to personal preference. But our messy habits result in confusion for the designer or developer who inherits your work.

Does it really need to be this way?

Us Vs. Them?

The great divide between designers and developers is well documented. Designers complain when developers would rather backgrounds not have any images. Developers gripe when given a Photoshop document with missing fonts. If those were the only problems we face, we’d be thrilled.

Unfortunately, not every studio is a breeding ground for pixel-crafting harmony. Sometimes designers work on one floor, developers on another. If you asked a good number of them, they’d say they were content with that arrangement. No wonder communication breakdowns are so frequent. The only brains we have to pick are those of our fellow designers or fellow developers, with little crossover it seems. Proximity doesn’t always improve proficiency, but don’t tell that to bees.

Bees
The essence of teamwork. You’ve heard of designer bees and developer bees, right?

Web designers have the unique ability to communicate through layout, shape, typography and, ultimately, simplicity. That same discipline must be exercised internally when sharing their artwork with colleagues — using, coincidentally, those same tools. As challenging as it may be, we can bring sophistication to our interfaces in Photoshop, so that our artwork achieves clarity through order. Just as our client has a target audience, we should also be considerate of the internal audience that uses our work.

We’re nibbling at the edges of websites that deliver a happy marriage between remarkable aesthetic and solid function. Seeing some websites already achieving that is exciting. But to fill the Web with more of it, designers and developers will need to combine their skills in even more proficient and efficient ways.

A Call to Arms

Let’s start a revolution that has less to do with being nice and more to do with holding one another to higher standards. Let’s get caught up not in the sexy pixels of tomorrow, but rather in attention to detail in our workflow. What if we made it easier for others to actually use and edit our work? Yes, my friends: let’s start an etiquette revolution.

Designers vs. Developers1
Make better websites, not war. Fist bumps, man hugs and peace signs, people.

More Than Just Chivalry

Why etiquette? I agree: at first it does sound stuffy and time-consuming, especially if what we’ve done has always worked. The client won’t see the etiquette, we’ll still get paid, and all is well. But let’s reason here: whether you’re in a group or creating websites all by yourself, the level of detail in your craft reflects how much you value your profession and should be apparent in the finished product.

Even so, internally, inheriting messy artwork can be a point of contention for developers. A design could be the most beautiful and useful thing in the world, but if it’s not practically built, it will waste precious time and money. All of the investigative work of the developer in posing questions to the designer about what’s confusing in their PSD should not have been necessary; the work should have been clear from the beginning, and the designer as organized as ever.

Can both the individual and group benefit from some good ol’ fashioned etiquette?

Personal Gain

Here’s a plain illustration of my point. Think of the designer or developer whose work inspires you most. Imagine you had the opportunity to work with them on a project. They got the ball rolling with a PSD or a directory of coded files, and handed it off to you for editing. How surprised would you be if the layers were unnamed? Or the code wasn’t indented, all smushed together? You likely wouldn’t see that, right? Every layer, every line of code reflects on who they are.

Even if you’re a one-person shop, holding yourself to high standard of organization has always been good practice. By doing so, you make less work for yourself when you need to go back to edit something. More importantly, if you were ever to pass off a PSD to a developer or client, you’d want it to speak to your attention to detail and professionalism.

(Aside to Fireworks users: I’m about to make a ton of references to PSDs, so feel free to substitute “Fireworks PNGs.”)

Collective Gain

Have you ever inherited a PSD from a designer and, on seeing the missing fonts, unnamed layers and myriad of masks, knew you were in for about four hours of work just to get started? No? Must be just me, then.

Indulge me, then. Those hours, even if few, are time spent by someone less familiar with the file than the designer and, thus, unnecessary. Our job as Web designers is to run a tight PSD ship. In theory, I should be able to organize my PSD in a fraction of the time that someone else could, just because of my familiarity as the designer. The result? An easier process for the inheritor and less time billed for the company.

Equally important, how much less disgruntled would developers be if designers handed over their work without so many blunders? How many projects would come in under budget? How about world peace? Too far?

Let’s apply the same clarity that we bring to the canvas to the “Layers” panel, too. Now we’re on our way to higher standards.

Let’s look at some recurring issues and see how to resolve them.

Common Mistakes

Didn’t Put the File on the Server

Just your luck. A deadline is fast approaching, and you’ve set aside a good amount of your day to plough through editing a PSD that a fellow designer has just finished working on. Problem is, you can’t get to it because it’s sitting on their desktop instead of the server. How convenient. And doesn’t this always happen when they’re on vacation?

Alarm Reminder
If you’re like me, your short-term memory could use a reminder at 5:00 pm daily.

The remedy
Depending on the hardware, designers should work directly off a networked server, and use their computers only for local back-ups. Alternatively, you could set an alert (in iCal or your app of choice) at the end of each day to remind you to commit your files to a shared spot.

Unnamed or Unused Layers

The developer didn’t expect to need a machete to use your file. Thicker than the Amazon rainforest, your PSD has layers-a-plenty, some even with such distinguished names as “Layer 0 copy.”

The remedy
Name layers and make folders as you go in Photoshop. Yes, it takes discipline, but it’s easier than having to go back to rename and delete after the fact. Use folders, too: they’re there for a reason.

Messy Layers
Distinguishing “Layer 0” from “Layer 1” is hard. Let’s use our words.

Unpurchased Stock Photos

Hello there, Mr. iStockphoto watermark. Curious to see you in the final PSD. If we could have only mustered the $3 for credits, I could have gotten rid of you myself.

The remedy
For everything, proofread, proofread, proofread. Your text and your images.

Watermarked photo
Ouch! See what happens when we forget to buy the stock?

Inaccurate File Names

You look confused, developer. Clearly, you should be using website_LATEST-v3_FINAL.psd instead of website_USE_THIS_ONE_ULTIMATE.psd.

The remedy
One file, named accurately. Archive the rest if you think you might need to go back to the third of your nine iterations for some reason.

File Naming2
No amount of highlights and descriptions is as good as maintaining a single file and archiving the rest.

Missing Fonts

Does this sound familiar?

The following fonts are missing for text layer “myFont, notYours”:

Guilty Culprit Extra Condensed

Font substitution will occur. Continue?

Ain’t that something? Confirming wouldn’t be a good solution in this case, because then the developer would be doing some guesswork to match the font that the designer presumably has more knowledge of. This usually happens when a font needs to be used as image text, so a straight substitution might not be an option.

The remedy
Ideally, the designer would be considerate enough to include the (licensed) font somewhere within arm’s reach of the PSD. Alternatively, the studio could install common fonts on all production computers. Apps like Fontcase3, Suitcase Fusion4 and Linotype FontExplorer X5 will manage your fonts for you.

Inconsistent or Inaccurate Content

If I’ve learned anything from working with developers, it’s that they don’t like to do things twice. Rightfully so. Whether it’s unpurchased stock photos, inconsistent type sizes or inconsistent colors, when they’re not caught the first time around, images need to be reproduced and code needs to be altered. And sadness overcomes all those involved.

The remedy
Develop a brand guide if one doesn’t exist, and have someone check your work before you hand it off. Think of it as quality control.

Tips And Tools

Name Files For Function

Be descriptive but practical when naming PSDs, JPEGs, etc. Something like header_bg.jpg is a little more indicative than blue_box.jpg, isn’t it?

Conserve File Size

I may sound like an old curmudgeon, but file size is still pertinent today. When exporting images, remember that a background at 80 quality will still look close to one at 100 quality but will likely be at least 33% smaller in size. Everyone still likes pages that load quickly, even if our Internet connection speeds have increased over the years.

Snap to Pixels

When I’m cutting up a PSD, one of the most common things I have to negotiate are those 1-pixel semi-transparent lines on the outer edges of shapes. The best way to remove them is pretty well cloaked in the vastness of Photoshop’s settings. When choosing a shape to draw, such as a rectangle, look towards the top of the screen at a row of those same shapes, with an arrow at the end of the row. Click that arrow, and you’ll see more options. Check the box “Snap to Pixels,” and you’ll see that the shape you draw will have much more precise edges.

Use Version Control

A fantastic way to cut down on the chaos of sharing files is to use a version-control system such as Git or Subversion. You designers, don’t feel that only developers can geek out about this. Using some type of revision control for our PSDs and other artwork files is equally important, because those files tend to get revised and transferred quite a bit. Version control is crucial when multiple people are working on front-end and back-end development, because overwriting someone’s work when uploading your own is all too easy.

Communicate

The saying “Communication goes both ways” never meant so much as it does here. Designers should freely communicate their decisions to developers, who themselves should express their concerns about programming said decisions. Nothing new, but it just doesn’t happen as openly as it should. If you consult with each other frequently, you’re bound to have more etiquette.

Be Teachable

Part of practicing good Web design manners is having the humility to know you’re not the best at what you do (except for one of you out there, Mr. Best Web Designer).

Implement Standards

The best way to force your Web team to adhere to standards is to come up with a list of best practices, on that holds each person accountable for their PSDs, HTML, CSS and beyond.

Code Standards6
Isobar has done some of the work for you with its Code Standards and Best Practices7.

The Photoshop Etiquette Manifesto8 for Web designers was created to give both beginner and seasoned designers a crash course in keeping PSDs organized and understandable for others. With helpful visual comparisons of “Do this” and “Not this,” the website serves as both an educational resource and a checklist9. With the crown of “Layer Mayor” at stake, why not take more pride as the resident PSD pro in your office?

Photoshop Etiquette Manifesto for Web Designers10
Setting some guidelines in your workplace is key to accountability and consistency.

Moving Forward

Having said all this, it’s encouraging to see more designers learning and understanding the process of developers, and vice versa. Some have done it out of necessity, such as freelancers who are hybrid designers/developers. Others have done it in order to understand their co-workers better, in the hope of a better product.

Hopefully, it’s become apparent that being on the same page, especially in Web development, is crucial to success. What are you doing to emphasize a high standard and clarity in your own craft and to make your team’s job easier?

(al)

Footnotes

  1. 1 http://sixrevisions.com/infographs/web-designers-vs-web-developers/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/08/file_accuracy.jpg
  3. 3 http://www.bohemiancoding.com/fontcase
  4. 4 http://www.extensis.com/en/products/suitcasefusion3/overview.jsp
  5. 5 http://www.fontexplorerx.com/
  6. 6 http://na.isobar.com/standards
  7. 7 http://na.isobar.com/standards/
  8. 8 http://photoshopetiquette.com
  9. 9 http://layermayor.com/#pdf
  10. 10 http://photoshopetiquette.com

↑ Back to topShare on Twitter

Syracuse, NY native Dan Rose is a User Interface Designer at WSOL. An advocate of side projects, he's the creator of Photoshop Etiquette, a guide to discernible web design. His affinity for workflow and Photoshoppery are evident in his talks, articles, and screencasts. His ramblings can also be caught on Twitter, @dblizzy.

Advertising
  1. 1

    I had to edit a Prestashop back-end script the other day that wasn’t commented one bit. It was fun, until I got a headache. Inheriting PSDs with layers and masks that aren’t labeled is almost worse. I once had to edit a Paint Shop Pro file that was over 100 layers, and nothing was labeled. I spent more time figuring out the layers than I did making the edits.

    3
  2. 2

    This article makes me feel awful about my unnamed layers! I don’t land up with hundreds, but I just prefer grouping them. I’ve tried naming and get about half way and then fail miserably with the rest… Great article though, thanks.

    12
    • 3

      I believe truely amazing creatives have a bit of trouble with structure.. I know I do, I also take longer to get inspired… vs. my partner that is a more structured creative, my designs rock harder than his, but his are more elegantly coded than mine…

      -22
    • 4

      No shame! We’ve all been there. I think the most important takeaway is that we *want* to be organized. How we go about it always takes discipline and sometimes unique methods. Naming layers is a great place to begin. If you do one PSD fully-organized, you’ll be bound to do more.

      10
      • 5

        I’m definitely inconsistent with naming layers during design once the creativity starts flowing. My solution is to name the layers once I’m done with either the creative burst or the file entirely, also taking time at that point to delete layers that were created and merely hidden in case I decided to go back to that idea. That way, when I reopen the file even years later, I’ll have instant recall for whatever I was working on. I think that balance is the key element here, one way or the other isn’t wrong per se, though both methods working together is the true ideal.

        0
  3. 6

    Ha. I know my developer is laughing at me now. I don’t know where my brain goes sometimes after I finish designing. I guess I just think I am done. So glad I have a wonderful developer that kindly asks me for the changes. I am a recovering unnamed layers addict.

    12
  4. 7

    As a print designer first and web designer a distant second, can someone please explain why PSDs are the default format for web design work? While I love Photoshop, Illustrator has so many advantages (more flexibility with typography, scalability, and the ability to share art across media) without any disadvantages that I can find.

    Is the use of Photoshop for layout work simply industry momentum at this point or am I missing some important features that explain this?

    2
    • 8

      I used to use Illustrator for web design until being hired by a web design firm. There, Photoshop was the standard and I had to convert. I brought up a similar question with supporting argument to my Senior Designer. His response was simple: Photoshop is pixel based, Illustrator is vector base.

      In web design, the metric is in pixels, so work with the program that best supports that metric. The mantra is Pixel Perfect Design for a reason ;-)

      Hope that helps!

      10
    • 9

      Historically, Photoshop was the “go-to” app for designing websites. But in recent years Illustrator has gained many new features that make it just as viable as Photoshop depending on your preferences.

      I personally feel “free’er” in Illustrator using multiple pages and my design style probably suites a vector environment more. For me, Photoshop layers are a pain to navigate and feel restrictive.

      There was a comprehensive article on SM recently about why to use Illustrator: http://www.smashingmagazine.com/2011/01/17/productive-web-design-with-adobe-illustrator/

      But like most things in life, it boils down to personal preference.

      4
      • 10

        I also find Photoshop’s layers too restrictive and prefer to work in Illustrator. Reading the SM article some time ago about designing for web in Illustrator was really liberating – I’m much more confident to apply my preferences and use the program I enjoy most. Every time I use Photoshop, I have to go back and name the layers. Illustrator seems so much more intuitive.

        I’m also guilty of naming files ambiguously with words like ‘final’. I should know better – it never is the last version, as there’s always something more to be done. Version numbers work so much better. But I will take the time to check the file before sending it on. I’d rather clean up any mess in-house before asking someone else to deal with it! Thanks for a useful article.

        5
      • 11

        Illustrator’s a great tool, but we spend more time in Fireworks than anything else. I used Photoshop for years, but switched to FW back in ’04, and never looked back. FW just feels so much more pixel-precise to me, and its ability to quickly knock out clickable walkthroughs is great for quick-and-dirty workflows.

        Between Illustrator, Fireworks, and OmniGraffle, I’m good to go. :)

        0
    • 12

      The web is not vectorized, it’s pixelized, which is why Photoshop is the best tool to create layouts for websites. Photoshop allows designers to make their design pixel perfect and accurate in scale. You can vectorize certain objects in Photoshop and have a logo (as an example) as a layer link to Illustrator so you can easily modify it for scalability purposes.

      -3
      • 13

        Yeah, the assumption that because some elements of websites are raster-based, therefore we should use raster-based programs to build the web, is way off in my mind.

        If we were to take that assumption to it’s logical conclusion, we should be building websites directly in the browser with CSS. Some people do this already and that’s fine too.

        The point is, there is no “best” application to build websites. And where “pixel-perfection” is required, one could use the same argument, i.e. link a photoshop file to an Illustrator file. At the end of the day it’s a personal working preference.

        5
    • 14

      Illustrator is a program designed for creating vector artwork whereas Photoshop is designed to create and edit raster images. The web is made up of raster images, so it makes sense to use Photoshop over Illustrator. Much easier to get things pixel-perfect in PS.

      Really, Adobe intends for us to use Fireworks when designing for web, and I’ve been told it’s really good for that, but it hasn’t really caught on.

      1
      • 15

        I’m familiar with about a dozen raster image editing programs, and I have to say, from a usability standpoint I put fireworks and GIMP on the bottom of the stack. (My favorite for designing for the web is actually corel photopaint, oddly enough, though I use photoshop for compatibility for professional projects)

        0
  5. 16

    re: Inaccurate File Names

    This system has worked well for us:
    Filename–BA_01.psd

    • “Filename” is the name of the file i.e. “Smashing Mag Wireframes”.
    • “BA” is the initials of the person working on the file.
    • “01” is the version number.

    So in this example the file would be named:
    Smashing Mag Wireframes–BA_01.psd

    We always use the latest version of a file based on the version number located in the file name. We never, repeat never, put ambiguous version descriptors such as “Final”, “Print”, “Approved” or “Alternate” in file names.

    9
    • 17

      I do the same as you and it works well!! Interesting… :)

      0
    • 18

      What if two employees have the same initials :) . good idea though if working in a small team

      -4
    • 19

      F. Morgan Whitney

      August 30, 2011 12:53 pm

      Rather than relying on weird naming rules that everyone has to know, consider using git or some other revision control system.

      Benefits:
      – When you commit your changes, you are required to leave a comment, meaning there is a nice audit history of who has done what to the file.
      – Never worry again about someone deleting a version of your file that you wanted to save, you can easily revert to any saved revision
      – You can add a tag to a committed version, like “1st draft” so it’s easy to find the one you want to send to the client vs. the one that’s in a messy state

      2
    • 20

      We also use a naming convention. I have not thought of adding designer’s initials to the file, but the problem has never appeared to begin with.

      As a comment to your structure, may I suggest not to use dashes and underscores but rather choose one and stick to it. I have found this adds to the confusion of when, where, and why to use which. A similar reasoning goes for spacing, some people will collate things that makes sense to them, others space everything out… In other words, if you use a convention, make it bullet-proof ;)

      To sort out the mess, I have stated the camelCase convention with dashes as entity separators. In your example, it would thus be:

      smashingMagWireframes-BA-01.psd

      Hope this helps.

      0
  6. 21

    The problem of that unpurchased stock photo happened to the wii version of Okami in similar way. Some guy of capcom took a watermarked game cover from IGN which later was used for production. Well, capcom came buckets in that guys ass. He has lost his job for this big mistake.

    -14
  7. 22

    In regards to the Snap To Pixel recommendation … If you draw your shapes with the view at 100%, you will not get the “1-pixel semi-transparent lines on the outer edges of shapes.” Those only occur when you draw a shape and your view is less than or more than 100% magnified. Hope this helps someone out there! I know its saved me a lot of hassle when cutting up images. Easier on developing too because there’s no guess work on whether the shape is really supposed to be 50px tall or 51px.

    6
  8. 23

    GOLD!
    This is great. Thank you.

    To expand upon file naming, please, please, please, NEVER name anything “new”. Where do you go form there? “newer”? And then what, “newerer”?

    However, consider not deleting previous versions. Instead, name them properly, and store them in an “old” folder or “archive” or something similar. You never know when someone’s going to say “Can you bring up that one you did four versions ago?”

    5
    • 24

      You’re welcome!

      The point you make is spot on. In many workflows (especially Agile), a group may be best served by structuring folders like this:

      Client // Wireframe // Round 1 // client_wireframe.psd

      This keeps the iterations clear without having to toss any previous work.

      0
  9. 25

    That is why we design AND develop, both steps of the chain, we prep it so that any designer/developer that takes it knows where each element is.

    We are a team of ” creative designer married to a more structured designer that really really gets code” results in a lovely synergy for these kinds of projects!

    -3
    • 26

      You got it. Ideally, having development knowledge would make any designer more sympathetic to being organized. You see the errors and hurdles that happen from both sides of the fence. Traditionally, working in both disciplines, or even so closely to other disciplines, wasn’t the norm. However, the benefits seem to be more apparent today than they were years ago.

      1
  10. 27

    rafael armstrong

    August 29, 2011 9:08 am

    If there were Commandments for design/dev, these would likely be included, and they’d probably be on circuit boards or iPads instead of stone.

    That said, I would add that, if including fonts isn’t necessarily an option (the ol’ pc/mac, non-OTF chasm), then outlining/rasterizing (depending on whether it’s a PS or AI file) the appropriate type layers would be a good way to go.

    1
  11. 28

    Just a tiny correction regarding the Nintendo game using istockphoto in the box: while you can get that image for 3 credits, you’d probably be required to purchase an extended license due to the packaging being mass produced. So even if you paid some money for the non-watermarked image, you might still be violating their license agreement!

    2
  12. 30

    I appreciated this article. Thanks for writing it. It highlights a need for just paying attention and keeping the communication alive. A couple things come to mind.

    To start a company needs to be dedicated to a policy especially concerning version control. In other words it can’t just be something some developer is trying to push. Their superiors (if applicable) need to rally around that idea or no one else will follow it, or they’ll be lazy about it at best because let’s be honest – it’s a giant pain in the ass.

    For communication, this is tricky. I’m not sure it’s always both ways, have you seen The Apprentice? If the PM doesn’t effectively communicate the requirements of a project they can’t expect an effective execution of those requirements. Is it the designer/developer’s job to second-guess what the PM is telling them?

    There is this philosophy of the perfect PSD file, but after working with some of the biggest agencies in the world I can tell you first hand no one cares. If you can’t navigate a messy PSD file then you probably shouldn’t be working in this industry. At the end of the day a designer is hired for their ability to design solutions, naming Layers is a bonus. I love me a tidy PSD file, but it’s just not always a reality.

    3
  13. 31

    Yes, agree! Except for the designer vs. developer cartoon (I know the author didn’t make it). There are some women in the field. We clean up after we make coffee and we name our layers.

    9
  14. 32

    Although, I agree wholeheartedly on naming layers, organizing stuff … I can not quite agree on improving one’s skill set on sites like Method&Craft is a good idea … Trying to teach people how to do things the hard&wrong way … http://methodandcraft.com/videos/layer-positioning-in-a-duplicated-canvas … Wouldn’t it be much better and faster to use the “Duplicate Layer/s …” option here Mr.Yaron!?

    I respect Smashing Magazine and I think it’s a great source for any designer out there, however I think there should be less articles that include ads for pretentious sites.

    1
  15. 33

    Melinda Rainsberger

    August 29, 2011 11:46 am

    Something else to consider with naming: actions. If you name your layers and folders, it makes it easier to change out one little element. In a perfect world, static elements would be approved before you make hundreds of pages, but that’s not always the case. I just finished a whole bunch of banner ads, and the client wanted to test 2 different color schemes. The previous designer didn’t label anything, and the same element had different names from file to file (like the background was Layer 01 in some and Layer 02 in others), so I couldn’t simply write an action to swap out the background for all the files.

    Names matter!

    1
  16. 34

    You touched a lot of things with your article …

    “most common things I have to negotiate are those 1-pixel semi-transparent lines on the outer edges of shapes.” Well I hate that too. It happens a lot of time when I am dealing with amateur designers.

    Maybe designers and developers should communicate better? sit together and talk?

    1
    • 35

      Right-o. For me, etiquette is a vehicle to harbor that communication. Showing that you care enough to organize your work so that it makes a developer’s job easier/efficient is a great first step in to opening lines of communication. Otherwise, their reaction is either to complain to you or to keep it to themselves, neither of which are good building blocks for positive communication.

      0
  17. 36

    Thanks for this article.

    I admit most of the time i received PSD source from my boss, i need to re-design it and tweak some layers with mask and create specific name on where to place and move those layers.

    I usually do make 4 to 5 Folders layer to make my layers more neat and clean to look.
    » Header
    » Menu Navigation (optional)
    » Ajax / Flash
    » Content
    » Footer

    1
  18. 37

    What about if you do not slice .psd files, but you instead create a work flow like this:
    AI>Flash>Dreamweaver… Oh, well then you would be a Design Developer and everyone else would be an idiot. HA!

    -6
    • 38

      AI – not meant for pixel-based editing
      Flash – no longer the way to do any actual website coding
      Dreamweaver – if you already made it flash… what?

      1
  19. 39

    Great article, and it is trending on Worldwide Twitter. Nice one!

    0
  20. 40

    this was a great read.

    *fist bump* to all the Layer Mayors out there

    1
  21. 41

    Hmm, when I took design classes in college and learned to use Photoshop, key best practices outlined here like relevant layer naming/grouping and conserving filesize were taught and enforced. Perhaps these issues are in part a result of the supposed increase in designers w/o formal education?

    0
    • 42

      When I took design-related classes in college, they said nothing about file organization at all, but those classes were run by art professors, so it doesn’t surprise me. I had the importance of organization drilled into me by the organizationally anal developer I worked with in my first job out of college. I’m glad it was drilled into me though, since I’m not naturally inclined toward structure and organization. I now understand how much easier life in the design world is when you keep things in some sort of systematic order.

      1
  22. 43

    While I agree that organizing and naming everything in your PSDs keeps it neater, the way I work with photoshop I almost never have to look for a layer in layers palette. Very similar to the way you would work in Illustrator. Also most of my PSDs have 100s of layers and take weeks to create. Why would I bother naming everything and spent extra 2 days if I don’t ever click on anything in the layers palette.

    If on the other hand I have to pass my design to somebody else I will make sure everything is organized neatly to make it easy on them. But to be honest once you stop searching for layers in the layers palette you can get almost any psd and it would be easy to work with.

    0
  23. 44

    OR you could use Fireworks and not need to worry about layers. It’s a much easier and faster program when it comes to web concepts. Photoshop should be used for touching images, that’s all.

    3
    • 45

      I’m so lucky to work for a company that doesn’t force me to use the wrong software like so many other web designers! I really don’t understand how companies can justify the insane amount of time wasted in Photoshop – managing layers, searching for that one layer you lost, the incredible amount of clicking it takes just to make a simple rectangle with a gradient, etc.

      I guess they just don’t think about it. Sad, really.

      -1
  24. 46

    Great article Dan, you and I think alike! :D

    0
  25. 47

    I think the biggest divide between Designers and Devs is caused by magazine articles such as this. Perception is key and persistently pointing out that Devs are from Mars and Designers are from Venus is actually ramming a wedge over and over. I’ve heard articles like this quoted as examples of how Devs and Designers don’t get on but have very little experience of that being the case. By saying that there is a rift because designers don’t organise their PSDs and files correctly is madness. If there is a rift at an agency it’s more likely to be down to corporate culture or how project deadlines are specified.

    Rather than labelling this article as a bandage for a wound that exists only in then minds of subject strapped magazine authors, it would be more useful to list some of the helpful points in the guise of a toolbox of corporate organisation tips.

    1
    • 48

      Thanks Rob–point well taken, and it’s an important view. I’ve worked at agencies where the culture and relationship between the two parties are great, and rarely would there be angst between the two. I’ve also worked at places that the frustration is so high that it affects the work and choices made. Is it getting better, overall? Certainly, as noted in the last paragraphs of the article. Are there still things organization and etiquette can help us with, collectively *and* individually? No question.

      While “Designers vs. Developers” may seem like a highlight of 2009 and not so much 2011, rifts still exist, and two factors stand out to me: 1) the lack or unwillingness to become familiar with the other discipline (e.g. designers diving in and becoming familiar with code) and 2) workflow and process, as you’ve noted pertaining to culture.

      Organization on the part of a designer can’t solve either, but it can help us work more efficiently. For some designers, repeatedly being told what they’re doing wrong in a PSD by a developer is commonplace, and at times, it creates a divide between the two. I used to be in that position myself, and I witness it with others still. All the more reason to have articles like these to help educate designers, no?

      Unorganized PSDs aren’t always the sole reason why a rift may exist, but organized PSDs can only contribute to the positive.

      4
  26. 49

    Dan, I’m the senior partner (by age) in a company with my 2 daughters. I try to learn at least 1 thing new every day, so thank you for your enlightening article for this novice! I’ve forwarded to my daughter and grandson, who both use Photoshop. All the comments you’ve received proves your article was definitely of interest and timely.

    1
  27. 50

    Stefan Gelenchev

    August 30, 2011 4:59 am

    Nice article!

    0
  28. 51

    In a CSS3 world, we have a few new additions to this list as well:

    * Gradient overlay, color overlay and drop shadow are good
    * Changing blend modes, gradient fill and using the brush tool for shadows are bad

    1
  29. 52

    I have a similar issue with having a design education but doing more development lately.
    I feel more of a bridge between folks and can explain to designers why 1500PX wide patterns are a bad idea. I’ve written a company policy type thing but I still get a converted illustrator file that’s full of layers.
    I think repetition and understanding is important as the other designers I work with don’t WANT to ruin my day, they just want to work fast and forget things.. Great Article, and thanks for the resources!

    0
    • 53

      Thanks for reading, Dennis. You make a good observation: designers want to work fast and in doing so, tend to forget clarity, in an effort to make amazing artwork. What I’ve found is that, while difficult at first, threading in organization as you design will ultimately save you time and effort. It’s a discipline and it seems like it would take more time that you usually don’t have, but in the end, it makes the most sense for both the designer and developer.

      0
  30. 54

    Fantastic article Dan!
    Being a seasoned visual designer, I have learned to be a stickler for organization in design files. Most of my career I have been working in Adobe Flash. Nothing irks me more than unnamed layers!
    However, depending upon the workload and number of tight deadlines, I think the pressure causes a designer to take shortcuts, hence sloppy organization.

    1
  31. 55

    Hey Dan!
    Never thought I’d see a fellow designer from Syracuse on Smashing Mag. Great article. Thanks for the insight!

    1
  32. 56

    What I was trying to get across is that if I’m working on something that I know won’t be sent to another designer / developer like personal artwork, promotional pieces and whatnot, because of the way I work it doesn’t make sense for me to be naming layers and organizing everything if I don’t have to. Two main reasons for me are 1.) it takes a long time especially when working with PSDs with hundreds of layers 2.) it disrupts creative flow. Even if I was going to be categorizing and naming everything I would do it in chunks as opposed to naming layers as I create them. Sometimes I do it to my final file after I’m done working on it all in one go.

    But like I said if I’m working on a web design or anything else that I know will go to another designer / developer afterwards I will give them properly organized files. I think this way everybody wins. I don’t have to wasting time and people that do get my PSDs have never any problems with them.

    -1
  33. 57

    Using Fireworks had made me lazy with layer naming. The major difference between fireworks and photoshop is in the selecting of elements. Photoshop relies on clicking a layer to move it / modify it, Fireworks allows you to click the element in the design and create a slice while automatically selecting the layer on clicking of the element.

    I think this makes prepping images for code much easier and more intuitive because you don’t have to worry about labelling as much. Developers can simply click the part they want and it highlights the layer.

    For web design, Fireworks is by far the most efficient program. As others have said illustrator is a vector based tool. I am pretty simple minded in that I use photoshop for photos, illustrator for illustrations, InDesign for layouts and Fireworks for UI / websites.

    -4
    • 58

      George Alberto Ramirez

      November 21, 2011 4:10 pm

      i appreciate your insight. i am a print graphic designer slowly transitioning into web design. i must say, i am a bit confused by the praise i see being handed to fireworks for its supposed virtues with regards to web layout. Perhaps, it is because of my novice-status as a web designer but i find fireworks ridiculously counter-intuitive and buggy. My colleagues at work also seem to agree. Is there anyone out there who agrees with us? We feel like we’re on crazy pills! ; )

      0
  34. 59

    Great article. Applies equally to us “hybrid” designers.

    Let’s stop the Photoshop vs. Fireworks thing and refer to these files as GSF — Graphics Source Files, or something.

    Love the bee reference.

    1
  35. 62

    a thing I’ve been doing latelly on my photoshop files to keep it clean is to close effect panel too.

    Also make all vector layers, and if you have multiple times the same box why not duplicating the vector path inside the layer (and not the whole layer). Easier to change for future client requests and also keeps a cleaner psd file :)

    0
    • 63

      That’s definitely a “Layer Mayor” thing to do (collapsing the effects panel for each layer). It easily adds twice, sometimes more, amount of height to your layer palette. Globalizing elements is also another good strategy. There’s tons out there, and thanks for sharing yours.

      0
  36. 64

    The “Auto-Select: Layer” option is my best friend in Photoshop. <3

    The first design program I ever used was CorelDraw… it was basically like Illustrator where you click/drag/drop. That way of working stuck with me and I was so happy when I found that option in Photoshop! It's not for everyone though, it's something you have to get used to. I also do lots of layer-locking.

    I'm getting better at naming and organizing my layers now that I work in an environment where my PSDs are shared with developers, though.

    1
  37. 65

    I’ll testify to the fact that properly naming layers has often saved me 6 months later when I have to revisit a file thinking, “what the heck was I doing?”

    3
  38. 66

    Great article. I work with a product called Contegro, it is a CMS that basically removes the need for a developer so I can’t relate to some of the issues you mentioned, though I think I am grateful for that!

    0
  39. 67

    This article wound me up. Not because it isn’t true… Of course having tidy PSD is good practice. It angers me that our industry has become so banale that someone felt compelled to write it.

    I am sorry, but simply repackaging the blatantly obvious in a poorly researched, and solely anecdotal article is not good enough. Why not put a Ladybird logo on the top of the post and be done with it.

    And to call your website a “manifesto” is an insult to the word. Manifestos are more than a hygienic checklist. A manifesto proposes a new way of looking and being. Movements are launched with manifestos. But I guess a bullet list of basic design factoids is a manifesto nowadays.

    As for the designer v’s developer polemic. It has done nothing to pull the debate in any direction. Designers should be doing more than simply providing PSDs for developers to Code-up. Likewise developers should be contributing to the design process. What about user experience, or developing a proposition? Actually coming up with something new rather than rehashing old design cliches. When you strip away the labels you seem so keen to preserve, something interesting starts to happen. We all become designers.

    Your argument only reinforces the status-quo you seek to break down.

    -2
    • 68

      Hi Will–Thanks for your response. You raise some interesting points. I do agree that when designers and developers are involved in a process, not only does it benefit both parties but ultimately the project. While I’m glad you brought that up, I chose to focus on etiquette and organization. There’s tons of posts on process already.

      I’m not familiar with “Ladybird”, so I’m afraid I can’t respond to that comment. For me, the problem is that organization and etiquette *aren’t* blatantly obvious. The ‘norm’ has become that organization isn’t considered, which says to me that either the benefits of it aren’t seemingly strong enough to employ it or the understanding of how to be organized isn’t so obvious. Since I feel as though etiquette and organization have been dormant in our industry, calling others to a movement where we consider and employ such seems “manifesto-ish” to me. I’m glad so many have shared their willingness to do so, regardless of the name.

      I’m very open to hearing what kinds of research should have been performed, and any other suggestions of what would have made this a better post. I’m missing how calling others to a higher organizational standard reinforces a division between designers and developers, but I appreciate your perspective nonetheless.

      2
  40. 69

    The developers are trying to make from the artist developers. All this crappy “manifesto” is like this.

    FIRST thing is the idea you create and represent. At this stage if someone tell me to tidy my Layers, I will literally rip off his head.

    When the Concept is done, the easiest way is to name the layers, arrange them, etc. so and other people can work with them.

    I think the developers must pass also some color and design education.
    Of course there are some usefull tips, but I don’t like to be put in some labels. Because as I see, webdesign is becoming more boring and tidy. So the cooperation is always in both directions – from developers to designers and from designers to developers.

    P.S.
    I am designer but I wear cargo pants, and yes, I cannot afford new razor. ;-).

    Cheers.

    3
  41. 70

    I even take it a step further and name my Photoshop layers with either all capitals, lowercase or lowercase with a capitalized first letter… If you mix them together it just looks messy, no? ;-)

    1
  42. 71

    I find naming layers completely useless, because selecting layers by name takes ages, very often psd files has hundreds and even thousands layers so looking for a particular name is just stupid. I think the easiest way to find the right layer is by turning on auto-select or by right mouse click and picking the top layer (some zooming for better preciseness can be used). To be sure that the right layer is selected you can move the object using keyboard arrows and undo after that or simply turn on “show transform controls” anyway even if the layer is named you still will have to get sure that the right layer is selected :) Of course there are some exceptions but for website designs it works perfectly.

    2
  43. 72

    Good post. These things are very important. The main thing I take issue with is using Photoshop for web design. Fireworks is far superior for this task because it was created just for this use, Photoshop is primarily for image manipulation. Fireworks allows page templates, symbols, styles and a number of other things PS doesnt. Use it for 5 minutes and you will never go back to PS again to layout a web page or series of pages.

    0
  44. 73

    Unnamed psd layer is far more better than someone in my office giving me a website design in indesign format.

    0
  45. 74

    aside from website design in indesign format….unnamed layers are my BIGGEST pet peeve! loved this article, organised files makes everything so much easier :)

    0
  46. 75

    Some good discussion happening, though I don’t think we should be stuck on the following two points: 1) using Photoshop vs. Fireworks, etc. and 2) naming layers as a solution to designer/developer issues. Your choice of software to design websites is rarely problematic (generally), and there’s so much more to etiquette/organization than just naming layers.

    Instead, what I’m proposing in the article addresses some practical things we as designers can do to make our work more professional and practical. Whether you’re just starting out or you’re an award-winning designer, taking steps to improve your clarity and intention in your artwork helps your team. Can someone have messy layers and produce stunning work that never bogs down development? Of course. However, naming layers, as well as using folders, forgetting to put files on the server, leaving unresolved stock photography, inaccurate file names and so much more are classic examples of things we designers could improve upon to make the handoff of our artwork so much better and more clear, which ironically *saves* time and therefore money.

    I’d love to hear which things you’re all doing to help the process of making websites go along smoothly, specifically when/if you pass artwork along to other designers or developers.

    0
  47. 76

    What do you recommend for Version Control in a design environment with multiple designers working on multiple clients PSD’s?

    1
  48. 78

    “Make a template for UI elements – Help your developer out by making a PSD strictly for user interface treatments (buttons, forms, etc.)” – http://photoshopetiquette.com/

    Do you know where to see a example of such a template? I have some doubts about what to include and how.

    0
    • 79

      This one is ridiculously complete, but that’s a good thing. http://www.flickr.com/photos/yaronschoen/4555019786/

      Ideally, you want to include what basic UI elements (buttons, nav items, drop-down menus, etc.) would look like, since your design may or may not include those. The benefit is that it will discourage using default browser styles if someone needs to put them in.

      0
  49. 80

    Really very good article, like everybody knows it but sometimes need an encouragement and reminder to work a bit more to make it comfortable for all others going to use that document when you finish it off.

    0
  50. 81

    Was all very interesting until I saw the heading “Moving Forward”, then I screamed and posted this comment. You should promote synergy with a paradigm shift and remove that section to assist in blue sky thinking from a helicopter view.

    0
  51. 82

    Great article! My last job was for a massive company with its own in-house design/development department, and it took many years, but we finally managed to get some “PSD standards” in place. We’d encountered many problems with our recurring clients where one designer would create a web design in, say, 2007 using their own random method of organization (my favourite example was one designer who grouped everything into two folders: “Text” and “Graphics”). Then my team would go back in circa 2010 to find a musty old PSD that required an hour just to figure out what each layer was. So now there’s a definite standard in place, and the working relationship between designers and developers has greatly improved as a result.

    One caveat that is worth making note of regarding your article, Dan:

    Photoshop CS5 and CS6 do not offer “Snap To Pixel.” Oh, how I wish they did, because the semi-transparent lines around shapes that you mention drives me crazy too, and I’m a designer.

    -1
  52. 83

    Thanks for your perspective, Christian. Many designers feel the same way, I’m sure. However, layer organization is just one facet of better etiquette. The idea is to assist the next person handling your artwork by being as clear as possible with the decisions you’ve made. Layers are a big part of that, but equally important are the names of the files themselves, the way you work with filters, and the organization of assets. It may be easy to find something you created because you’re familiar, but why make it hard on yourself with unnamed/misnamed layers, files, or assets?

    0
  53. 84

    You said it yourself – “the way I work in photoshop I almost never have to look for layers…” I can tell you for a fact that I don’t work that way and I use layers like chapters in a book. You’re telling me that anybody that works like me doesn’t deserve some nice layer names? Come on now, play nice.

    0

↑ Back to top