How to Effectively Organize your Photoshop Layers

We designers tend to get frustrated with developers when they take liberties with our work.

But we have to understand they’re not entirely at fault.

Put yourself in their shoes: imagine what it’s like opening a Photoshop file (PSD), only to find a jumble of poorly labeled layers and folders, plus a heap of unchecked hidden layers and other half-baked ideas that didn’t make it to fruition.

The following tutorial outlines how to create organized, designer and developer friendly PSD files.

This is in no way the only solution, but hopefully it will encourage better practice in the web design world.

While writing this tutorial, I interviewed several developers who have a lot of experience working with multiple designers.

Their feedback was extremely insightful. I definitely encourage you to also reach out to the developers you work with, to find out if you can do anything to improve your PSD files.

 

1. Basic Folder Structure

For starters, I keep a PSD file on hand named “Website-Template.psd”.

This file contains the basics of each website, including the grid system, basic folder structure and common dimbroeensions (I use a 1000 by 1440 pixel workspace, with a site width of 960 pixels).

This template eliminates the need to set up a new file for each project.


Let’s take a moment to familiarize ourselves with the basic organization of these folders.

You’ll notice that my default folder structure contains only three core folders: “header,” “content,” and “footer”.

This simple set contains the basic folders that most websites use and gets me started on the right foot by providing an effective organizational platform.


You will notice I’ve labeled all of the folders as simply as possible.

These folders will house a slew of sub-folders. As your design grows, be sure those new folders are labeled just as clearly.

Expanding the “header” folder, you’ll see the organization of sub-folders.

Note that the “navigation” sub-folder is usually the most complex: keeping the developer in mind as you label and create this sub-folder and its contents is important.


One last step before jumping into the design is to group this collection of folders into a parent folder named “wireframes”.

This will help keep the content organized for when we begin designing and coloring. It’s also a good way to distinguish between various pages within the same PSD file.

 

2. Managing Layers for an Entire Site

When we designers get into a groove, forgoing structure for creativity can be easy. This is when self-discipline has to kick in.

We must force ourselves to take the time to organize the layers we create.

Now that the initial setup is complete, I’ll give an overview of how I group together various elements of a full design.

As you are aware, designing rarely follows a linear path, so please keep in mind that this is only one of perhaps countless solutions.

“If all designers followed a standard procedure of organizing their PSDs [organizing their folders by following a standard set of guidelines], you could easily knock off an hour of development cost, if not more. Not to mention you’d be filling a rift between design and development, cutting back on any wavering from the original design that is common in the development phase”
Matt Sears, Ruby on Rails developer

 

3. Folder Structure in Detail

We’ll start with an overview of the main body (the content), and finish with the header, because it has an important element (navigation) that needs special attention.


Opening up the content folder, you’ll notice I’ve divided the sub-folders so that the visual layout of the site’s design is reflected in the folder structure.

For example, because the content has a top and bottom section, I’ve labeled them accordingly: “top” and “bottom”.

I’ve also placed all of the background graphics (gradients and other images that will need to be sliced for the HTML) into their own folders.


Now let’s open the “top” folder (a sub-folder of the “content” folder), which contains several common elements, such as a space for text, a space for an image, etc.


Notice the use of yet another sub-structure for additional layers and folders.

Folders have been designated for fonts, images and background graphics (gradients, solid colors, etc.).

Because fonts can be distracting for developers as they sort through a PSD, let’s open the “fonts” folder to see how I’ve organized these.

I based my method on feedback I received from a developer who mentioned that it would be great to be able to click off the fonts to create slices without the text getting in the way.


I’ve taken an extra step and actually given the layer the same name as the font.

This immediately lets the developer know which font to use when coding the HTML.

For more complicated templates, you could create additional folders to specify other fonts and important header fonts.

(Hint: headers are typically labeled H1, H2 and so on in CSS/XHTML terminology, so labeling your header fonts the same way is good practice).

Anything related to fonts should be contained in the “fonts” folder, so that the developer has to make only a single click to remove all fonts and isolate the graphical elements of the site.

It could look something like this:


Always use your intuition and keep your labels simple and obvious.

This technique isn’t about hand-holding the developer; it’s about creating an easy-to-use file that helps everyone in the long run.

The more you distinguish the elements, layers and folders in your design, the smoother things will be in the development phase.

Use this method of organization throughout the entire process, and you’ll be surprised how quickly it becomes second nature.

 

4. Navigation and Roll-Overs

When setting up your navigation interface — whether you’re using tabs, plain text or something else — you’ll want to indicate to your developer how the tabs should look in specific states.

For example, should a tab change color when the user rolls over it? Is special JavaScript, such as for fading in, needed? The possibilities are endless, so don’t expect the developer to be able to read your mind. Folders go only so far in showing these details.

I encourage you to supplement your PSD with a design brief that gives specific directions on the more complicated and detailed aspects of your design.

Let’s assume the user interface (UI) of our design has a tab structure. Developers tend to use specific terms when referring to the various “states” of a tab (by “state” I mean the various ways in which a tab is displayed to the user).

In my interviews with developers, I found the following terms to be the most consistently used and recognizable.

Please note the image that corresponds to each description, and notice how the folder structure reflects my thought process.

 

5. Correct Label Your Tabs and Their States

On: The “on” state of a navigation item (in this case, a tab) indicates that its related page is currently being viewed. Typically, it should be the most noticeable.

Off: This state indicates that a tab is clickable but is not currently being viewed or hovered over with the mouse.


Hover: This state shows how the tab appears when the mouse cursor hovers or rolls over an inactive tab. The graphical treatment of this state is often the same as the “on” state, but it should still be given its own folder.

The key is consistency: no matter what you label your tabs, be sure to keep them consistent!

 

6. A Final Note on Tabs

Opening up one of the sub-folders in the navigation (the “off” folder in the screenshot below), you’ll see that I’ve once again grouped all text in a separate folder.

This is optional, because text is often a part of the graphical makeup of the tab.

If the text will be recreated in HTML, I recommend placing it in a separate folder so that the developer can click it off for easier slicing of the graphic.

 

7. Finalizing the Files

This strategy may seem a bit obsessive, and paying attention to structure and order when one is caught in the throws of a great design is not easy.

Nevertheless, take the time at the end of a project to organize and label your folders appropriately.

If you have complicated illustrations in your design, try to flatten them into a single well-labeled layer.

If that can’t be done (perhaps because of sophisticated blending methods), try converting the layers to smart objects and then rasterizing them.

Ultimately, the goal is to reduce the layers and folders to the bare minimum, and then label them all as clearly as possible.

 

8. A Step in the Right Direction

Developers and designers do not always think alike.

Whereas many designers work in a state of creative chaos, developers typically rely on order, structure, and logic.

As we design, a little organization goes a long way towards keeping developers happy.

There is certainly no one right way to organize PSD files, so reach out to your developers and see what you can do to create PSD files that keep everyone sane!


 

Josh Sears is a writer, illustrator and designer for a slew of web-based projects. He makes his living as Lead Web Designer, Creative Director and Co-Owner of Littlelines.com. You can check out his work here or follow his updates on Twitter.

Do you apply these tips when working with Photoshop?  What other techniques do you use to organize your Photoshop layers?



0 shares
  • http://www.webdevtuts.net Marcell

    Very good tutorial. My files are always messy until I organize them.

    • some guy

      “My files are always messy until I organize them.” -DUH

      • http://Littlelines.com Josh

        Personally I understood exactly what he meant. Some people organize on the fly, as they create, while others get a bit messy until they decide to organize at the end of the process.

  • 梁永宁

    helpful

  • anjum

    wow as designer now i come to know how to do it in right way

  • http://www.twitter.com/epiceyes Scott

    Excellent article. The organization of your psd’s becomes increasingly important when more than one person is going to work with it. For instance a UI Designer may hand the PSD off to a colleague to slice it up and code it. Another consideration is future-proofing the file. Some time down the road you may want to change a specific element and you don’t want to have to spend 15 minutes searching for what needs changed in the PSD. Very nice article.

    • http://www.littlelines.com Josh Sears

      Hi Scott, I agree completely. When designing for myself, my organization skills tend to be an afterthought, but while working in a team, which is a more common situation, we really need to take the time to make things easier on other. Besides, it just means less questions down the road, and a smoother process overall. Thanks for the comments!

  • jason Stephens

    Can I get a copy of that PSD File? I’d love the template as a starting point for my projects….

    http://www.twitter.com/jpstephens

  • http://www.jamesbull.ca James Bull

    Great article!

    I got some great tips in here! Plus, I always try to organize my psd’s in the same manner and as a freshly graduated student it’s reassuring to know that my habits are in line with other industry professionals!

  • http://twitter.com/VaughanJ Vaughan

    One other thing you might want to add to this great post, is the use of Layer Comps.

    For a while I’ve used the same methodology you describe here, but found the more complex the designs got, the more layers were required, the more difficult it became to track designs for home, internal, detail, contact, etc. etc.

    Layer Comps to the rescue; I now turn on the layers I need for one layout, and create a Layer Comp – then turn off other layers, create another Layer Comp and very quickly you can then hop between one comp to the next, without going through and toggling many layers.

    Fantastically useful tool.

  • http://www.bickov.com Alexander Bickov

    Layers organisation depends from the project specifics like deadline and project cost

  • Cooper

    Im with jason, that would be awesome :)

  • http://www.graziano.pl Graziano

    Great article. I will try the “font folder” as the rest is similar to my method. I’m using colored folders and name them with # in the beginning: _CONTENT (content main folder with _) #Top (sub folder) ##something (Top subfolder).

  • http://www.blog.exxcorpio.com Luis Lopez

    Great article, I normally use a template where I have the folders and some little thing already set up for a normal website layout or poster, or wallpaper, etc, and here you just gave me some good ideas to get a better way to organized them all.

  • http://listoric.deviantart.com Listoric

    Really nice overview.

    I do organize my folders quite the same, but if you actually work with smart objects and folder masks, you’ll reach the maximum allowed folder in folder capacity quite fast.

    In CS4 you can link masks to smart objects (afaik) but in CS3, you need to put the smart object into a folder with mask in order to have a linked mask on it.

    Only thing that really annoys me is that you normally create a webdesign from bottom layer to top layer, while every new group or new layer is created below the previous layer, leaving you with the wrong order in the layers tab.

    back to topic, really nice post, it took me almost a year till I realized how important a good structure, groups and layer names really are ^^

  • http://www.doublejdesign.co.uk/ Jack

    Very nice article. Thanks

  • http://idsandclasses.com Dusan

    It’s nice to read about other designers’ working routine. My PSDs are also well structured, but unlike this example, I tend to use smart objects as much as I can

  • http://www.nouveller.com/ Benjamin Reid

    I know someone that doesn’t organise their designs like this and when I come to code it up it takes up way to much time organising things on their behalf. I’ll send ‘em this link!

  • http://www.bcm-websolutions.de/de/services-webdesign-stuttgart.html Christoph

    I should really start using folders, my designs are damn messy

  • Stephan Lenting

    Nice round-up on organizing your .psd!
    I would also like to point out the following points on staying organized:

    1. It’s smart to keep archived versions of your .psd in a separate folder called ‘old’ (in the project file folder in which you’re currently working)

    2. You might also wanna use color-coding to make your (top-)folders even more organized. For example, you could use seperate colors for the top, middle and bottom.

    3. If you import large source files and you’re going to edit these, keep the large source files in a temporary ‘raw files’ folder. And/or save the large source file as a temporary Smart Object. This way, you can always get back when you need to fix something. For example, you might have cropped an image to fit a certain proportion, but later on in the project you want to make it larger. You can use the temporary ‘raw files’ to easily edit the image again.

    • http://www.littlelines.com Josh Sears

      Very good points Stephan, thanks for the suggestions!

  • http://www.design-manchester.co.uk David Rushton

    Great article, I try to keep my layers structured in a similar way but I hadn’t gone into as much depth in terms of H1 and H2 folders.

    I would too like to get a copy of the PSD file if it is available

  • http://www.chickflickreviews.net Jake

    I usually separate my content folder by sections. For instance, Content > Left Sidebar > Links, or Content > Left Sidebar > Search. It seems to work just as well as this method.

    • http://www.littlelines.com Josh Sears

      Hi Jake, I actually use the same method of breaking up my content once the design calls for it. Again, it’s all about taking out the guess work. Thanks for your response!

  • http://twitter.com/davilima6 Davi Lima

    Yeah, please share the PSD file – not only its recipe =)

  • http://bbxdesign.com Jeremy

    You may want to delete that “Wireframes” folder. It’s not useful as it’s the only one at its level, and you’ll win one level of depth (which is limited in PS).

    • http://www.littlelines.com Josh Sears

      I agree. However the Wireframes folder is only in place when I am in charge of creating wireframes for my client. Typically my wireframes aren’t this complicated or in depth.

      For example, if I’m only designing a single homepage, and the wireframes would be a simpler layout with a goal to organize the content, I would have them in their own folder, then add an additional folder entitled “home” for example. The wireframes folder is essentially an archive at that point. Obviously this would only be when the wireframes are simple representations of the layout, but it keeps the content together, and the client gets everything they ordered in one nice PSD (wireframes and homepage design).

      But yes, I agree, with a page as in depth as the one needed for this tutorial, the wireframes folder is a bit misleading. In a full site design, I would leave it in it’s own PSD.

  • http://jgn.me/ Jerome Gravel-Niquet

    You obviously don’t need that top level “Wireframes” group of layer. This only stops you from creating an extra level further down the line (because of Photoshop’s dumb layer groups children limit)

    Good article nevertheless!

    Also, you should try a web-based tool for wireframing, or just sketching. It’s not worth doing it in Photoshop, takes way too much time compared to adapted tools!

    • http://www.littlelines.com Josh Sears

      Hi Jerome. I always start with a sketch first, but find that wireframes are a piece of cake in Photoshop, and in most cases I can utilize some of the assets I’ve created in my wireframes in the actual design. I also tend to keep my programs to a minimum. To each his own though.

      Also, the wireframes folder was just in place for the tutorial. I replied to this in a previous comment, but thanks for pointing it out anyway. Thanks for your input!

    • http://twitter.com/gemmaweirs Gemma

      Fireworks has wireframing and mockup capabilities and it is included in at least three versions of Creative Suite AFAIK, so there is no real need to use expensive wireframing/prototyping tools. Sketching should always be done before going on the computer IMO anyway.

  • http://www.crearecommunications.co.uk Adam

    Thanks for the advice – I really need to get my files organised in Photoshop. I sometimes spend ages looking for a layer because of my lazy organisation. I’ll try and take this on board.

  • http://glennvanbogaert.wordpress.com Glenn Van Bogaert

    Good tips. Some of them I already use but know I can organize a psd file better with these tips. Thanks

  • Jawaad Ahmad Khan

    Great article. I’ve learned about organization the hard way. Lost files, layers and randomness leads to no proper results. I just recently began organizing my layers with folders and it truly makes it a whole lot easier.

  • http://Twitter.com/QuantumGood Dave

    Agree. Would love to see the PSD file available for download here.

  • http://29thfloor.com Dan

    Not to be a contrarian douche but Fireworks has several features exactly for this purpose. Namely, Pages and States (used to be Frames).

    I know some people just prefer Photoshop and it can certainly do a lot of things that FW can’t, but I find for actually putting all the pieces together Fireworks is better than anything else out there.

    • http://www.brownbatterystudios.com/sixthings/ Brownspank

      I agree completely. Photoshop is great, but asset organization is where Fireworks shines and trumps PS. Pages have been extremely helpful for me in Web and iPhone app interface design, especially with its Shared Layers feature; it’s just a more logical way of sectioning your pages/screens.

      (Not much of a States user, though, as I’m more accustomed to sprite-based rollovers.)

    • Russ

      I agree to this also.

      However this is an article on how to organize your Photoshop layers and since they don’t exist in Fireworks I guess that pretty much makes this comment redundant.

      • http://twitter.com/gemmaweirs Gemma

        Actually layers do exist in Fireworks, although they’re not quite the same as what people are accustomed to in Photoshop. The layers in Fireworks need to be appropriately named and organised so it’s still relevant to some degree.

  • BKKKPewsey

    Good info here but I cant see the images has something broke! Tried FF,IE & chrome

    • http://www.uk2group.com Nick Nelson

      I’m the person who takes care of the Hosting for WebDesignerDepot – if you refresh does it fix the issue? We had a few minutes of downtime in one of our cities that I believe you were caught by.

      • BKKKPewsey

        Yeah that was probably it when I posted the browser refreshed automatically Violla!! images appear

  • BKKKPewsey

    Forget comment about images. Made a post and images appeared weird!!!!

    Like the basic maths skill test on post page :)

  • http://www.mikelangelo.com Mikelangelo

    Thanks for posting this. I do organize my psd’s but not the extent that you do and I can see that it would be a big help.

    The only thing I do differently, is my Navigation is a standalone folder in the wireframes folder. My navigation menus are not always in the header, so it doesn’t make sense to always have the folder start in the header.

    Thanks!!

    • http://www.littlelines.com Josh Sears

      That definitely works as well. Obviously if your navigation isn’t in the header, then it doesn’t make sense to put it in the header folder. This tutorial is definitely a loose science ;) Overall though the point is to emphasize logical organization. Hope it helps out.

  • Ryan

    This is totally on the mark. I am a designer that works for a development company. We have a lot of psd’s that come in from the biggest ad agencies in Chicago for us to do all the coding for them… I wish someone would pass this along to them, because the psd’s are usually a huge mess. But to their defense, I am sure it was done as fast as possible, and most of the time they do give us layer comps.

    Dan, Fireworks over PS? I would venture to say you don’t know photoshop that well. And I use both, so I know the difference.

    • http://www.littlelines.com Josh Sears

      This is definitely a valid point. While I love to preach good organization, tight deadlines can really bring that factor down. however I’ve noticed in my own practices that even while under pressure, I’ve made it enough habit to the point that even my sloppiest files are easy to navigate and understand. Like many things it’s the matter of making it second nature that allows a designer to keep organized even while under a tight deadline. Thanks for the response, it’s nice to hear from a developer on the subject ;)

  • RoaldA

    I had relative good layer order, but this helped me further! Thank you! :)

  • http://www.wrccdesign.com.br Wagner Rosati

    Do you guys want the PSD FILE??
    wanna some cup of coffee? a water??

  • Jeff

    A habit I picked-up a few years ago was to always differentiate folder names from layer names by including some special characters in their titles (ie. ‘** Nav’). That way, when I’m looking for a layer/object via the right click move tool, I can quickly scan down the pop-up list to see what are layers and what are folders – thus making it much easier to find what I’m looking for without having to dig through the layers palette.

    There’s nothing worse than inheriting another designer’s PSD files that aren’t organized like this – with multiple layers of nested folders it can take forever to drill down to find that small icon or image, especially if the layers are all named layer 25 copy’.

  • http://www.stephenkui.com Stephen Kui

    Something else to add may be,

    It’s always a good idea to keep in mind that deleted layers aren’t necessarily bad layers, and I use a group for layers I “delete.” Some clients actually search through and look around, and sometimes prefer what you disliked originally.

  • Boo Hoo

    I can honestly say that in the nearly 10 years I’ve been working in Photoshop and designing websites that I have NEVER needed a structure this complicated. While I truly love highly organized structures, THIS seems like you have WAAAAY too much time on your hands or you are just procrastinating the initial design creation.

    Maybe the reason that I don’t spend too much time organizing the stuff is that the whole wireframe is only good for documentation purposes once the site goes live.

    • http://www.stephenkui.com Stephen Kui

      If you’re designing templates for other people, or are giving them source materials, it can be a nightmare for other people to figure out how we specifically work our own PSD’s if we don’t label them nicely.

    • http://Littlelines.com Josh Sears

      Hi Boo Hoo. As mentioned in the article this isn’t meant to be the only way to organize your layers. Do I follow this structure rigidly? No. This article is simply meant to encourage designers to think from an organizational standpoint. It’s not a “My way is better than your way” statement by any means.

      Take what you will from it and leave out the parts you don’t like. And by the way, it’s not really as complicated as the tutorial might make it sound. We’re only talking about 8-10 layers here.

  • http://Twitter.com/QuantumGood Dave

    Here is a Web Design Wireframe Template created in Photoshop CS2 http://bit.ly/4f2qTH to go with this post :)

  • http://www.afsincelik.com Afsin

    Using folders is very important. If you don’t use folders you will be in trouble when you open your psd and want to find or change something you used in. Thanks for organizing tips.

  • http://maxim650.com Todd

    Thank you! I loved this! I’m just getting started in web design, and it’s always helpful to have other ways of using the tools.

    Do you know if this approach will work with GIMP?

  • http://www.blinkss.com Roy

    As a developer I agree with the fonts on different folder statement. Sometimes there will be multiple layers of text directly over a background or image I need to cut and it is a pain sometimes to ge tit out of the way.

    And the worst is not grouping at all.

  • http://www.refine-led.com ben

    thanks for advice,i will change my custom

  • http://www.axlsoftwares.com/scraps/Onam/ prafuldass

    Very helpful post. Thanks for sharing.

  • http://www.phillipecw.com Phillipe Calmet

    Very nice article.
    I always try to organize my psd files at first, but i end up with layers all messy :P

  • Radiculous

    Thanks so much for the tip i’ve been waiting for a tutorial like this..haven’t really gotten around how to organize my psds it always turns out to be a mess after 1,000 client revisions. this’ll surely help a lot. :)

  • Monn

    Cool article, fairly obvious I thought, but maybe not to all.

    The one negative I’ve found once you start nesting folders say more than 2 or 3 levels deep is filesize. PSD’s absolutely ballon in filesize when you start creating loads of folders and nest them.

  • http://www.branditsolutions.com web application development

    It is advisable to remain the text body narrow. It is uncomplicated to read text lines that are kept in narrow columns.

  • http://ckluis.com chris kluis

    I would love a copy of this file structure.

    If you want to help make a web standard – it would help to provide everyone with a template so the standard can take hold.

    Just saying…

    • http://www.littlelines.com Josh Sears

      The PSD has been posted :)

  • http://www.psprint.com/stickers-labels Ashely Adams : Sticker Printing

    This was a good tutorial. and also picked up tips from the post on creating 3D headlines. Thanks!

  • Davi Lima

    Here is the direct download link for the PSD file my buddy Dave made: http://rapidshare.com/files/268760336/web.Design_Wireframe.Layers.psd.html

  • http://www.webdesignerdepot.com Walter

    PSD file added at the bottom of the article.

  • Matt

    Nice work; I really like the depth and details of this article. Thanks!

  • http://gsanmiguel.ca Giselle

    Love it! So simple to use too. Thanks :)

  • http://www.deloreanweb.com Jeremy

    Awesome article, I read it from beginning to end. Good insight.

  • http://www.silviovailante.com Silvio Vailante

    Very good tutorial!!

    Congrats!

  • http://spotmeon.blogspot.com Gaurav M

    Management is the key..screen shots are self explaining

  • http://www.simplicious.at Markus Pirker

    Great usefull article,

    trying to keep my files organized from now on. I promise!

  • Artman

    Wonderful article. More people should be this organized and things would run much more smoothly.

  • http://www.css CSS Showcase @CSSMadness.com

    Good designer knows how to design, great designer knows how to group layers

  • Mindy

    I understand it a lot better than i did before.. Thanks so much for the great info!!!!

  • http://blog.ralev.com/ Ralev Brand Design

    Every newbie should know that half of the work is to organize the file.

    But remember : too many folders are confusing sometimes. So be careful and use system that will work for you and for the developer that will use the file after you. Sometimes less folders and more layers are OK, instead of doing folder for every h1, h2 … etc.

  • http://www.misty-blue.net Sarah

    I’ve been a stickler for organizing my layers since I worked with files from an in-house design team that were completely disorganized. I realized that you need to organize your files no matter what their purpose because you never know who will need to see them and when.

    I’ve never done folders down to the font styles, but I think that might be a good idea to establish code preferences or for those looking at the PSD file for an existing site layout vs. the corresponding CSS file. Thanks for the PSD file that goes with the post. I can’t wait to explore it and maybe learn some new organizational tips.

  • http://axweb.sk Andrew

    These tips save time. Thanks a lot!

  • Kate Madigan

    I’m just starting out as an illustrator, and two days ago I sent my designs off to get coded up into a website to show my work on. I organised my Photoshop files in a very similar way – it felt like plain common sense, so I’m amazed (and just a bit smug!) to find that not everyone does this. Thanks for this article – it made me feel like I’m doing something right!

    • http://www.littlelines.com Josh Sears

      Hi Kate, good to know you’re using good practices with your layers :) Thanks for the response.

  • Shelley

    Great Article. I learned a lot!

  • http://jelaniharris.com Jelani Harris

    I’m used to organizing my layers like this, but this takes it to a whole new level I didn’t even think about. Especially the grouping of the fonts into it’s own layer folder.

    Thanks for the wonderful explanation, and the sample .psd file :)

  • http://diggerdesignlabs.com Steve Robillard

    Great article. I especially liked the font tip. Thanks for adding the PSD.

  • http://dufaukz.com Dufaukz

    LOL so great!
    thanks!

  • http://www.pilotfishseo.com Heather Kyle

    Great post.

    Since everyone has their own style of organization, I think it’s useful to ask your programmers for their feedback. It’s good to know from your programmers that the file is easy enough for them to follow and if there is anything that you can do to make the process easier and more efficient for them.

  • http://www.webhostright.com/ Web Host Right

    Im just starting out with design and photoshop so i think its good that i can learn the right way from the beginning, i really appreciate the advice and intend to keep mine as organized as possible.

  • http://deviant.no/ Another developer

    Thanks for this great article! I’ve been fustrated countless times trying to figure out wth the designer had been smoking while making the graphics, sometimes I end up making a new file with real transparency and layers organized.. After over 8 years of webdevelopment I’m getting really tired of it :D

  • http://www.design-manchester.co.uk Design Manchester

    I really liked the Layers in this photoshop file and decided to combine it with the 360 grid system. You can download the file from here http://www.design-manchester.co.uk/web-design-blog/free-resources/free-photoshop-template-for-web-design/

  • http://wardkennes.be/blog/ Ward Kennes

    I always did it like the screenshots. When you don’t do that you will mess up big projects.

  • Vishal Panchal

    Great article…..
    I am following little bit same, but not up to the mark. Its really good……….

  • mimojito (aka Efren)

    Great article. Speaking as a designer, a well organized file structure makes a world of difference when updates and edits begin to roll in from your clients. It’s also great a housekeeping technique all designers (new and old) should embrace. Speaking as a developer, understanding how the site will unfold and interact with the user is quite valuable.

    Combine that with the ability to use a content versioning software (CVS), e.g., Version Cue, it then allows both designer and developer know exactly what changes were made and where in the design doc, as well as to the implications those changes may incur on the development side of the equation.

    It would be interesting to see a multi-step tutorial that encompasses all aspects of the “Four D” process: Discover, Design, Develop and Deploy. I would be more than happy to assist in that endeavor should it arise. [insert shameless plug here]

    Cheers!

  • http://brettmcdade.com brett

    Great article. I love learning!

  • Brad

    THANK YOU SO MUCH!!! I have poster for a film festival to work on at my high school and I hated photoshop because I couldn’t keep organized. Now I can, and everything runs smoothly!!

  • http://www.autoagente.com Manson

    Excelent, nice post, it was very helpfull

  • http://www.clippingimages.com Tanjila Jesmeen

    its a very good tuts.thanks for sharing.

  • http://www.designtoday.info Mustafa Kurtuldu

    Great stuff, the only difference i have when creating files is i place entire sections of the site into there own folders as well, allows me to switch on and off sections when it comes to developing etc.

    But you have some interesting ideas :) it all helps :)

  • http://sinthux.deviantart.com Dalton Hurd

    I typically clean up my files only after completing the design. It’s a task of its’ own, and is quite monotonous, but I find this method best. If I’m working at organizing the design in the midst of producing it, I just find myself getting distracted.

    • http://www.littlelines.com Josh

      Hi Dalton. I tend to do an overall cleanup at the end of the design phase as well. However, I’ve gotten into the habit of automatically sorting my layers as I work, sort of a “Clean-up lite” practice that is fused into my process. This keeps it less confusing for the final clean up at the end.

      I don’t blame you for avoiding the distraction however. It all depends on how “In the zone” I am at any given time.

      Thanks for the comment.

  • http://www.narendrakeshkar.com/ Narendra Keshkar

    Very useful article because my layers always being messy and I always found it hard to manage them.

  • http://shikebali.co.cc Shikeb Ali

    Nice article, its good to be organized I agree with Josh ’cause I do organize my layers in some what same way (apart those fonts groupings), but I don’t think so some busy people (+lazy designers) are going to adopt this.

    Even I have been thru hundreds of tutorials but never seen such organization of layers as you have suggested to us.

    Thanks for showing us a new aspect of organization.

  • http://earlydawncreations.com Glin

    Great job. I bet a lot of people will find this tutorial useful, including me.

    I always intend to be organized, but in the end it’s so messy. Now I will do better. Thank you.

  • http://www.techrista.com TechRista

    This could be a great help to those who have starting their photoshop designs. Professional designers should keep these in their mind.

  • http://www.examplemag.com Example

    I’m used to organizing my layers like this, but this takes it to a whole new level I didn’t even think about. Especially the grouping of the fonts into it’s own layer folder.

    Thanks for the wonderful explanation, and the sample .psd file! )

  • http://viminteractive.com Pete Karabetis

    I organize my layers similar to this, but with a few exceptions. One of them is, if I’m using stock photography, I’ll label the folder this way: “istock – #1234567″ so the developer knows where the image is from and how to easily find it.

    Great tut! I’m going to pass it on to my designer friend who’s just learning design for the web.

  • http://www.psdcleanup.com Mike

    There are company’s at te moment who can do it for you.

    Like : PSDcleanup.com

  • http://www.globalsitesecrets.com Russell

    Finally! Been searching for an hour on this subject. Great article. Thanks for publishing it.

    Now, can we expand upon this to include localizing graphics and layer management?

  • http://www.veztekusa.com Faraz

    great article for both developers and designers.That is been a usual problem that creates misscommunication between designer and developer that in the end leads to wastage of time and frustration for both.So this articles is solving a major problem.