Keeping Order in Large Photoshop Projects
February 05, 2015

Large projects are always a problem to manage and maintain. Large design projects aren't an exception. I probably would even say, that they are even harder to manage, then other types of projects. One of the reasons is that there is no convenient version control system for graphic files. You can't revert one particular change from a graphical file after it was saved, you can only revert the whole file version.

Sometimes, you don't have access to the internet, but you need a constant access to you design revisions. In these cases, I’m using some file name conventions to keep the many files in order.

Apps like InVision and LayerVault are two good examples of some sort of version control system for design files. Though, InVision is more review-centered: as I see it, it's main goal is to be a really good service for design comps, concepts and prototypes review and collaboration. In opposite, LayerVault is more focused towards controlling the versions of your documents: you can choose what version of the Photoshop or Sketch file is a revision; you can manage versions online and compare them; you can even work on the same file with multiple users.

In both cases, whenever you save your design file, a new version of it is stored on their server, so you can view it and restore it, whenever you like. And this is a very important thing when working on large projects, because, you know, changes happen often, and even more often, after the 9th revision the clients likes the 2nd revision much better. And creating files for each revision is a tedious work.

Speaking of which, sometimes it’s better to keep a file for each revision locally. Sometimes you are in a rush, and it’s too long to setup a new project in InVision or LayerVault. Sometimes, you don’t have access to the internet, but you need a constant access to you design revisions. In that cases, I am using some file name conventions to keep the many files in order.

My system is simple — file.name.x.x.x.psd, where: file.name is the name of the page/item/entity that the file contents (for example, index, about.us, business.card, brochure, etc.) and the x.x.x is the number of the version (you can read why I am using periods in file names in my recent article How do I Manage my Stuff and Keep Sanity). The numbering starts with 1.0.0 for the first revision, or on file creation. Then, if some small change happens, and I know, that this change can be needed in the future, I am just adding 1 as the last number: 1.0.1.  If some major change happens, the number that has to change is the one in the middle: 1.1.0. If the next revision is created, or a whole new concept of the design is added, then the first number has to change: 2.0.0. At the end of a project I have something like this in my design folder: index.1.0.0.psd, index.1.0.1.psd, index.1.1.0.psd, index.1.2.0.psd, index.2.0.0, index.2.0.1.psd, index.2.0.2.psd, index.2.0.3.psd. Here the last and final design is the index.2.0.3.psd.

Learn a bit of PSD to HTML coding: it’s always great to have an idea how your project will work in the future.

This system helps me to keep all design revisions, that could be needed in the future, ordered and structured: because of the naming, when sorted by name, the oldest revision is always at the top, and the newest one is always at the bottom. Also, this keeps me from naming my files something like index_final_2.psd, inbex_final_finalized.psd, FinalIndexNeverChangeAgain.psd, and other cool but unusable for other people filenames.

One more thing to note in big projects: it is often needed to change one small element across all the designed pages (this happens mostly in web-design projects). For example, you need to change a user icon in the top menu of a website. If you don’t want to go through all your pages/files (and there could be many), there is an option in Photoshop, that could save you a lot of time. It’s under the File > Place Linked... menu option. This option allows you to choose a .psd file and place it inside of another .psd file, then, when changing the first file, it changes then in all other files. So, in the case of the above example, you need to change the user icon only in one file (menu.psd) and then just re-save all the other files, where menu.psd is used.

This technique becomes really handy, when you have a lot of already designed pages, and you need to apply some changes consistently and quickly across all of these pages. To do this even quicker, a simple Photoshop action can be written, which opens and re-saves all .psd files in a particular folder. I usually keep my block files (files, that are used in other files) in a separate folder called blocks. This helps me to separate one files from others and avoid confusion.

And last, but not least — naming layers. This is a very important part, because nothing is more discouraging than looking at a messed up Photoshop document with tons of different layer named something like New Layer 854. Usually, I try to group and name everything according to how it will be coded in the future — my background knowledge of CSS and HTML helps here a lot. If I am creating a list of news articles in the design, I know, that each article will be coded a separate block, so grouping them each in a separate folder would be a good idea. Learn a bit of PSD to HTML coding: it’s always great to have an idea how your project will work in the future.

Pin — it's the best appreciation!