The ultimate guide to version control for designers

Published November 26th, 2009 by Anatoly

This is a re-post of my article originally posted on the great web design and development blog - Six Revisions. You can read the original article here: http://sixrevisions.com/project-management/the-ultimate-guide-to-version-control-for-designers/

For most developers version control tools are the most important tools in their toolbox. Every development project starts with choosing the right version control system.

However the majority of designers are still not familiar with the concept of version control, and a very few designers actually use some versioning tools in their work. This article will help you to understand why version control is important for designers and help you to start using it for your projects.

What is version control?

The easiest way to understand the concept of version control is to think of it as of the file history in Photoshop.
However version control is much better than history in Photoshop: you also get a never-ending “undo”, effortless backup, peace of mind and a tidy hard disk.
And all these for the price of taking 20 minutes of your life to understand what version control is and 1 sec every time you submit a version of your file.

With version control systems file versions are stored in a special database (usually called “repository”). The fact that the history of a file is stored separately from the file itself adds extra safety: even if the file gets corrupted you can always restore any of its versions from the history. One more advantage is that you can store the versions of your files on a shared resource (such as a computer in your local network or an internet-based repository) and, therefore, you can edit the same file together with other designers in your team without the fear of overwriting each other’s changes - both yours and your colleague’s changes will be saved.

In order to submit a new version of a file or get an existing one you will need to use a client application that connects to the repository. Whenever you feel you have done something worth saving, click the “submit” button (it may also be called “commit”, or “check in” is some systems). Now this version of the file is saved in the repository and you can always get it from there. When you get an older version the client application replaces the file on your computer with the version from the repository.

How can designers benefit from using version control?

There are multiple benefits of using version control, and some of the benefits make it especially attractive for designers. The most obvious benefits are:

  • it helps you keep your files structured and tidy - you don’t need to create multiple copies of the same file cluttering your hard drive
  • hassle-free backup - all your files are securely stored in the repository along with all their versions
  • centralised and shared storage of all your assets - this feature becomes important when you are working on a project in a team environment as everyone always knows where to get the latest version of some asset

Some benefits that are especially important for designers:

  • the ability to easily save multiple versions of the same file - ideal for brainstorming
  • simplified collaboration with developers - if you are working on a web project together with developers who use Subversion or Mercuial for the source code then you can use the same SVN/Mercurial server as they do. This will help your team to keep all project files organised in one place and backed up

What version control tool is right for you?

Are you ready to give version control a go? Now let’s decide what tool is the best for you.
First we will review the tools that were made specifically for designers, and then we will discuss generic tools suitable for both designers and developers.

Tools for designers

Adobe VersionCue

The first tool aimed at designers is Adobe VersionCue.
Adobe VersionCue is the Adobe’s vision of version control. VersionCue is a part of Adobe Creative Suite family and is not sold separately, so in order to enjoy VersionCue you will need to have some edition of Creative Suite.
VersionCue also relies upon other Adobe applications from the Creative Suite package (namely Adobe Bridge and Adobe Drive), so it’s not a standalone solution. However it’s a pretty powerful and is integrated into Photoshop, InDesign and Illustrator.

Here is a very brief guide on how to start using it.

First you will need to setup a VersionCue server. Server may run on the computer where you do your design work, or it can run on a dedicated machine, and you don’t need to buy another Creative Suite license for the server as it doesn’t require activation.
To create a server you need to open VersionCue settings in the system preferences (Mac OS) or control panel (Windows). You will need to enter the name and visibility for the server (private or accessible by other users):

Now press “Start” and finish server configuration by providing the admin password:

Once the server is started you can connect to it using Adobe Drive: Start Adobe Drive on the computer where you will be doing your design work and you should see the newly created server on the “Visible servers” page:

Select the server, enter your user name, password and press “Connect”:

Now you will need to create a project for your files. Project is just a folder with the logically related files or subfolders - for example you can have one project for each of your clients or for each advertising campaign. To create a project please open Adobe Bridge and select the “Version Cue” item on the “Favorites” tab:

You should see your server in the “content” panel. Double click it and select the “Tools->Version Cue->New project…” item from the main menu:

Now choose the name and description for your project and click the “Share the project with others” option if you want this project to be visible to others:

Once the project is created you can drag and drop a file into it, and it will be automatically checked in - this means that the first version of this file will be saved on the server. You will need to add a comment for the first version - describe what was done in this version:

If you right-click your file in the project and open it in Adobe Photoshop you can make some modifications to it. Select the “File ->Check in” menu item to save the second version:

Go back to the Adobe Bridge, and you will see that the file now is at Version 2. Right-click the file is Adobe Bridge and select “View versions” from the context menu - both of your versions will be displayed in the content panel:

You can right-click the first version and select “Promote to Current version” - this will get the first version and replace the current file with it.

To read more about VersionCue please visit Adobe website: http://www.adobe.com/products/creativesuite/versioncue/

PixelNovel Timeline

The second version control tool made for designers is PixelNovel Timeline. Timeline is a Subversion client integrated into Photoshop. Though it is not a version control system as such (it’s just a front-end for Subversion), it is interesting because of the user interface: it features a unique interface that makes versioning as intuitive as possible:

One more advantage of Timeline - it comes with a hosted online repository on PixelNovel that you can use straight away, so you can avoid the efforts needed to set up a Subversion repository. This makes Timeline the ideal choice for those who want to try version control for the first time and don’t want to put too much effort in setting up.

To use Timeline with the PixelNovel online repository you will need to sign up at http://pixelnovel.com/signup
After confirming your email and choosing your account settings you will be able to download and install the Timeline plug-in. After you install it, Timeline Project Assistant will be started.
Timeline Project Assistant creates a mapping between the folders on your machine containing your files and the folders in the repository - just choose the folder on your computer that contains all the files related to one project, and provide a name for this project:

Now you can open any file from the selected folder in Photoshop, and you will see an unsubmitted revision in Timeline palette:

Click “Submit” and the current version of the file will be saved in the repository:

The preview of the first version will be displayed in Timeline palette:

Now you can edit the file - Timeline will display the unsubmitted revision once again:

You can press “Submit” once more to submit your second version and so on:

You can view your files online if you log into your account at PixelNovel:

Timeline is also available in a standalone variant that can be used with your own repository.

Being a Subversion client Timeline inherits all the pros and cons of Subversion that are covered in the next section.

To find out more about Timeline visit PixelNovel website: http://pixelnovel.com/timeline

Generic version control systems

If you are not happy with the version control solutions oriented at designers you may want to consider a generic Version control system suitable for any files. Using a generic VC system may also be a good choice if you work on a cross-functional project involving both designers and developers. I will cover the 3 systems that are most popular right now: Subversion, Git and Mercurial(Hg).

1) Subversion (SVN).

Subversion is the most popular Version Control system used in many high-scale open source projects, though it has started to lose its positions to Git recently. Subversion server is reasonably easy to set up, and there are plenty of hosted online servers ready to use, some of them are tuned for designers - for example PixelNovel and Beanstalk.
Subversion is liked for:

  • being easy to understand
  • reliablility
  • plenty of various clients readily available

Subversion is disliked for

  • being slow
  • weak support of branching and merging (not very important for design files - read below why)
  • not being distributed (not very important for design files - read below why)

More Subversion resources:

http://subversion.tigris.org/ - the official Subversion project page
http://carsonified.com/blog/features/design/subversion-for-designers/- a brief introduction into Subversion

2) Mercurial (Hg)

Mercurial is a distributed version control system designed with speed in mind. Distributed version control system means that it may have multiple repositories branched from each other and synchronised on a regular basis. Distributed version control systems offer lots of benefits to teams of developers disributed across multiple locations. Unfortunately this feature gives little benefit to the designers. The reason for this is as follows: synchronisation between multiple repositories usually involves merging operatin. Merging means manually choosing the best parts from 2 different versions of a file. This operation can only be done on text files such as source code. However designers usually work with binary files (*.psd, *.ai, *.swf and so on), and if the same binary file gets edited in 2 repositories one set of modifications will be lost.

Still Mercurial is a great and fast system, so it may well be used for design projects. There are a number of hosted online Mercurial repositories such as http://freehg.org/ and http://bitbucket.org/ that you can use to avoid setting up your own repository. There are also some great Mercurial GUI clients such as TortoiseHG for Windows and Mac OS X.

More Mercurial resources:
http://mercurial.selenic.com/ - the official Mercurial project page
http://betterexplained.com/articles/intro-to-distributed-version-control-illustrated/ - an illustrated introduction into distributed version control with Mercurial usage examples

3) Git

Git is a creation of the main programming superstar - Linus Torvalds, and as most of Linus’ creations Git quickly became fashionable amongst programmers. It has a number of advantages compared to SVN (though these advantages mostly make difference for source code, not for binary files), but it’s fairly complicated to use and is not the best tool to be your first version control system. If you are new to version control I would recommend you to start with either Subversion or Mercurial.
Git also has a number of hosted online services, Github is the most popular one.

Git’s strengths are:

  • It’s a distributed system with strong support of branching
  • It’s faster than SVN

More Git resources:
http://git-scm.com/ - the official Git project page
http://www.webdesignerdepot.com/2009/03/intro-to-git-for-web-designers/ - a brief introduction into Git

More version control resources:
http://betterexplained.com/articles/a-visual-guide-to-version-control/ - a visual guide to version control
http://joshcarter.com/productivity/svn_hg_git_for_home_directory - performance comparison for SVN, Git and Mercurial based on binary files

Leave a Reply

Spam Protection by WP-SpamFree